venue-layout v0.8.0

Venue Layout

Компоненты для просмотра и создания схемы зала.

Установка

Убедитесь, что установлен Node.js 5 и выше:

$ node -v
v8.1.3

Установите глобальные модули (может потребоваться sudo):

$ npm install -g webpack webpack-dev-server

Установите модули в папке проекта:

$ npm install

Запуск

Для запуска веб-сервера разработки выполните:

$ npm start

Сервер запустится по адресу http://localhost:8080

Сборка

После внесения изменений не забывайте обновлять сборку. Для сборки библиотек в папку ./dist выполните команду:

$ npm run build

Обновление Fabric.js

В проекте используется специальная сборка Fabric.js. При выходе новых версий Fabric может понадобиться обновить сборку.

Для этого нужно склонировать куда-нибудь репозиторий Fabric:

$ git clone git@github.com:kangax/fabric.js.git

Зайти в папку проекта fabric.js:

$ cd fabric.js

При необходимости можно переключиться на конкретную версию (тег):

$ git checkout tags/v1.7.2

Затем выполнить сборку fabric.js:

$ node build.js modules=animation,gestures,interaction no-svg-export

Полученный файл fabric/dist/fabric.js нужно скопировать в папку venue-layout/web_modules

Стандарты кодирования

Для сборки используется webpack с поддержкой ES2015.

Модули

Модули устанавливаются через npm и могут подключаться через require (стиль CommonJS) или через import (стиль ES2015).

Используемые для работы приложения модули лучше устанавливать с флагом --save:

$ npm install javascript-natural-sort --save

Используемые для сборки модули лучше устанавливать с флагом --save-dev:

$ npm install babel-preset-es2015 --save-dev

ESLint

Для обнаружения потенциальных ошибок и поддержания стиля кодирования используется ESLint.

ESLint запускается автоматически при сборке и выводит результаты проверки в терминал, но удобнее видеть результаты сразу во время написания кода.

В JetBrains IDE (WebStorm, PhpStorm и т.д.) для этого есть плагин ESLint, который включен по-умолчанию и подчеркивает проблемные места в коде.

В Sublime Text нужно выполнить следующие действия:

• Установить пакет SublimeLinter
• Установить к нему плагин SublimeLinter-eslint
• Найденные ошибки начнут подсвечиваться в коде, а их описание можно вывести по нажатию Cmd + Ctrl + A (Mac) или Ctrl + K, A (Win).

Подробную информацию по правилам ESLint найти здесь: http://eslint.org/docs/rules/

События

Один из способов взаимодействия с компонентом VenueLayout – перехват событий:

venueLayout.canvas.on('seat:over', event => { ... })

Встроенные в fabric события описаны здесь: https://github.com/kangax/fabric.js/wiki/Working-with-events

Помимо этого, VenueLayout определяет свои собственные события.

canvas:move – при сдвиге схемы. Возвращает объект, содержащий delta – смещение схемы по x и y.

category:over – при наведении на категорию VenueGeneralAdmission. Возвращает объект {e, object, category, point}

category:click – аналогично category:over, но возникает при клике на категорию

category:out – при уводе мыши с категории. Возвращает {e, object, category}

seat:over – при наведении на место, для VenueSeatRows и VenueSeat. Возвращает {e, object, seat, category, point}

seat:click – аналогично seat:over, но возникает при клике

seat:out – при уводе мыши с места для VenueSeatRows и VenueSeat. Возвращает {object, seat}

ticketselection:changed – при изменении выборки билетов объекта {object, tickets, byUser}

ticketobject:over – при наведении на объект с билетами {e, object}

ticketobject:out – при уводе мыши с объекта с билетами {object}

ticketgroup:changed – при изменении выбранной группы билетов {group, prevGroup} (0 – основная группа, 1 – вторичка)

Все события возвращают «логические» координаты объектов. Чтобы перевести их в физические относительно элемента — можно использовать фукнцию venueLayout.transformToRealPoint({x, y}): {x, y}

Прочие события

zoom:before – перед выполнением зума, в т.ч. анимированного {startZoom, endZoom, zoom}

zoom:after – после окончания анимации зума {startZoom, endZoom, zoom}

zoom – в случае анимированного зума выполняется для каждой итерации анимации {startZoom, endZoom, zoom}

startZoom – начальный зум, endZoom – финальный, zoom – текущий

mouse:click – событие введено, чтобы отличать клики от перетаскиваний. Если нужно поймать именно клик, можно использовать его.