Создание плагинов

Gridstack.js предоставляет мощный механизм расширения функциональности через плагины. Плагин — это объект или функция, которая подключается к Gridstack и расширяет его возможности, добавляя новые методы, события или изменяя поведение сетки.

Структура плагина

Плагин в Gridstack.js обычно реализуется как объект с методами init, destroy и опциональными дополнительными методами для кастомного функционала:

class MyGridPlugin {
  constructor(grid, options = {}) {
    this.grid = grid;       // экземпляр сетки Gridstack
    this.options = options; // пользовательские настройки плагина
  }

  init() {
    // Здесь происходит инициализация плагина
    // Например, добавление новых событий или стилей
    this.grid.on('change', this.onChange.bind(this));
  }

  onChange(event, items) {
    console.log('Элементы изменены', items);
  }

  destroy() {
    // Очистка ресурсов, удаление событий
    this.grid.off('change', this.onChange.bind(this));
  }
}

Ключевые моменты:

constructor(grid, options) — принимает объект сетки и настройки.
init() — основной метод для установки плагина.
destroy() — освобождает ресурсы и отключает события.

Подключение плагина к сетке

Для интеграции плагина используется метод addPlugin или непосредственное создание экземпляра и вызов init:

const grid = GridStack.init({/* настройки сетки */});
const plugin = new MyGridPlugin(grid, { debug: true });
plugin.init();

Gridstack не ограничивает количество подключаемых плагинов, поэтому можно создавать цепочки расширений.

Работа с событиями сетки

Gridstack.js активно использует события, которые являются основным механизмом взаимодействия плагинов с сеткой. Основные события:

added — вызывается при добавлении нового элемента в сетку.
removed — при удалении элемента.
change — при изменении позиции или размеров элементов.
dragstart, dragstop, resizestart, resizestop — события перетаскивания и изменения размеров.

Пример обработки нескольких событий в плагине:

init() {
  this.grid.on('added', this.onAdded.bind(this));
  this.grid.on('removed', this.onRemoved.bind(this));
  this.grid.on('change', this.onChange.bind(this));
}

onAdded(event, items) {
  console.log('Добавлены элементы:', items);
}

onRemoved(event, items) {
  console.log('Удалены элементы:', items);
}

Расширение методов Gridstack

Плагины могут добавлять новые методы к объекту сетки. Это достигается простым присвоением функций:

grid.myCustomMethod = function() {
  console.log('Это пользовательский метод сетки');
}

Для более сложных сценариев создаются прототипные расширения:

GridStack.prototype.customLog = function(message) {
  console.log('GridStack log:', message);
}

grid.customLog('Тестовое сообщение');

Работа с пользовательскими настройками плагина

Плагины часто требуют передачи конфигурации. Рекомендуется использовать объект options с дефолтными значениями:

class TooltipPlugin {
  constructor(grid, options = {}) {
    this.grid = grid;
    this.options = Object.assign({
      color: 'blue',
      delay: 300
    }, options);
  }

  init() {
    this.grid.engine.nodes.forEach(node => {
      node.el.style.borderColor = this.options.color;
    });
  }
}

const tooltip = new TooltipPlugin(grid, { color: 'red' });
tooltip.init();

Управление жизненным циклом плагина

Важно корректно управлять ресурсами, чтобы плагины не создавали утечки памяти или конфликтов:

Инициализация — подключение событий, создание необходимых DOM-элементов.
Работа — выполнение логики в ответ на события или методы сетки.
Удаление — отключение всех обработчиков, удаление элементов и очистка внутренних ссылок.

Примеры полезных плагинов

Плагин для сетки с автосохранением — отслеживает изменения элементов и сохраняет их состояние в localStorage.
Плагин для ограничения размеров элементов — задает минимальные и максимальные размеры и блокирует изменения за пределами этих значений.
Плагин визуализации горячих зон — выделяет зоны сетки, в которых можно размещать элементы, при наведении мыши.