# Места нанесения и слои

Данные методы доступны только при использовании JavaScript API метода интеграции

Пример:

```javascript
var o3d = new O3d(config);
o3d.on('start', function () {
    o3d.on('changeLayer', function (data) {
        console.log('Areas:', data.areas);
    });
    var id = o3d.addLayer('34fe372', 'text', { text: 'Привет!' });
    console.log('New id:', id);

});
```

## Методы

### `getAreas()`

Возвращает данные о всех местах нанесения. Будет возвращён объект с ID слоя в качестве ключа и данными о слое в качестве значения.

### `getArea(id)`

Возвращает данные о месте нанесения.

* `id` *{string}* - ID места нанесения
* `@return` *{*[*Area*](https://github.com/oasiscatalog/o3d/tree/8b289c36cd104380b99f413ffe27b71f4b912955/areas.html#area)*}*
* `@return` *{*[*Area*](https://github.com/oasiscatalog/o3d/tree/8b289c36cd104380b99f413ffe27b71f4b912955/areas.html#area)*{}}*

### `getActiveArea()`

Возвращает текущее активное (редактируемое) место нанесения.

* `@return` *{*[*Area*](https://github.com/oasiscatalog/o3d/tree/8b289c36cd104380b99f413ffe27b71f4b912955/areas.html#area)*}*

### `setActiveArea(id[, changeView, callback])`

Задаёт место нанесения активным (редактируемым).

* `id` *{string}* - ID места нанесения
* `changeView` *{boolean}* - переключать на связанный с этим местом ракурс
* `callback` *{*`function (result)`*}* - функция обратного вызова
  * `result` *{boolean}* - было ли переключение (`false` - если место уже было активным)

### `getLayer(id)`

Возвращает данные о слое.

* `id` *{integer}* - ID слоя
* `@return` *{*[*Layer*](https://github.com/oasiscatalog/o3d/tree/8b289c36cd104380b99f413ffe27b71f4b912955/areas.html#layer)*}*

### `getActiveLayer()`

Возвращает текущий активный (редактируемый) слой.

* `@return` *{*[*Layer*](https://github.com/oasiscatalog/o3d/tree/8b289c36cd104380b99f413ffe27b71f4b912955/areas.html#layer)*}*

### `setActiveLayer(id[, callback])`

Делает слой активным (редактируемым).

* `id` *{integer}* - ID места нанесения
* `callback` *{*`function (result)`*}* - функция обратного вызова
  * `result` *{boolean}* - было ли переключение (`false` - если слой уже был активным)

### `addLayer(areaId, type, data[, callback])`

Добавляет слой.

* `areaId` *{string}* - ID места нанесения
* `type` *{string}* - тип слоя (`'text'` - текстовый, `'image'` - изображение)
* `data` *{*[*Layer*](https://github.com/oasiscatalog/o3d/tree/8b289c36cd104380b99f413ffe27b71f4b912955/areas.html#layer)*}* - данные о слое
* `callback` *{*`function (result)`*}* - функция обратного вызова
  * `result` *{integer}* - ID нового слоя

### `editLayer(id, data[, callback])`

Редактирует слой.

* `id` *{integer}* - ID слоя
* `data` *{*[*Layer*](https://github.com/oasiscatalog/o3d/tree/8b289c36cd104380b99f413ffe27b71f4b912955/areas.html#layer)*}* - данные о слое
* `callback` *{*`function (result)`*}* - функция обратного вызова
  * `result` *{boolean}* - `true` при успехе, `false` если слой не найден

### `deleteLayer(id[, callback])`

Удаляет слой.

* `id` *{integer}* - ID слоя
* `callback` *{*`function (result)`*}* - функция обратного вызова
  * `result` *{boolean}* - `true` при успехе, `false` если слой не найден

### `toggleLayer(id[, to, callback])`

Выключает/включает отображение слоя.

* `id` *{integer}* - ID слоя
* `to` *{bool|undefined}* - в какое состояние переключать, если `undefined` - то переключает состояние
* `callback` *{*`function (result)`*}* - функция обратного вызова
  * `result` *{boolean}* - `true` при успехе, `false` если слой не найден

### `moveLayer(layerId, newAreaId[, callback])`

Перемещает слой в другое место нанесения. Слой перемещается в конец списка слоёв.

* `layerId` *{integer}* - ID слоя
* `newAreaId` *{string}* - ID места нанесения
* `callback` *{*`function (result)`*}* - функция обратного вызова
  * `result` *{boolean}* - `true` при успехе, `false` если слой или место не найдены

### `moveLayers(oldAreaId, newAreaId[, callback])`

Перемещает все слои из одного места нанесения в другое. Слои перемещаются в конец списка слоёв.

* `oldAreaId` *{integer}* - ID места нанесения (отправитель)
* `newAreaId` *{string}* - ID места нанесения (получатель)
* `callback` *{*`function (result)`*}* - функция обратного вызова
  * `result` *{boolean}* - `true` при успехе, `false` если места нанесения не найдены

### `setLayerIndex(id, index[, callback])`

Задаёт порядок расположения слоя в списке слоёв.

* `id` *{integer}* - ID слоя
* `index` *{integer}* - новый порядковый индекс слоя
* `callback` *{*`function (result)`*}* - функция обратного вызова
  * `result` *{boolean}* - `true` при успехе, `false` если слой не найден

### `getAreaCanvasData(id, callback[, type, encoderOptions])`

Получает toDataUrl() содержимого canvas места нанесения.

* `id` *{string}* - ID места нанесения
* `callback` *{*`function (result)`*}* - функция обратного вызова
  * `result` *{string|null|false}* - data:uri изображения, `null` если место нанесение пусто, `false` если область не найдена
* `type` *{string}* - MIME-тип содержимого, см. `CanvasRenderingContext2D.toDataUrl()`
* `encoderOptions` *{\*}* - дополнительные опции, см. `CanvasRenderingContext2D.toDataUrl()`

## События

### `changeLayout` *{Object}*

Генерируются при любых изменениях в местах нанесений или слоях.

* `action` *{string}* - действие которое произвело изменение, доступны действия:
  * `add` - при добавлении слоя
  * `edit` - при редактировании слоя
  * `delete` - при удалении слоя
  * `toggle` - при изменении видимости слоя
  * `setIndex` - при изменении порядка слоя
  * `moveLayer` - при перемещении слоя в другое место нанесения
  * `move` - при перемещении слоя по области
  * `scale` - при изменении размера слоя
  * `rotate` - при вращении слоя
  * `flipHorizontal` - при отражении слоя по горизонтали
  * `flipVertical` - при отражении слоя по вертикали
  * `text` - при изменении текста в тестовом слое
  * `font` - при изменении шрифта в тестовом слое
  * `color` - при изменении цвета текста в текстовом слое
  * `color` - при изменении цвета текста в текстовом слое
  * `align` - при изменении выравнивания в текстовом слое
  * `lineHeight` - при изменении выоты строки в текстовом слое
  * `image` - при изменении изображения в слое с изображением
  * `imageLoad` - при загрузке изменённого изображения в слое с изображением
* `data` *{Object}* - дополнительные данные к действию
  * `areaId` *{string}* - ID места нанесения, в котором произошли изменения
  * `layerId` *{integer}* - ID слоя, в которой произошли изменения (если доступно)
  * `oldAreaId` *{string}* - ID старого места нанесения (для `moveLayer`)
  * `oldIndex` *{integer}* - предыдущий индекс слоя (для `setIndex`)
  * `newIndex` *{integer}* - новый индекс слоя (для `setIndex`)
* `areas` *{*[*Area*](https://github.com/oasiscatalog/o3d/tree/8b289c36cd104380b99f413ffe27b71f4b912955/areas.html#area)*{}}* - новое состояние всех слоёв

### `changeArea` *{string}*

Генерируется при изменении активного места нанесения пользователем. Передаётся ID новой активной области.

### `changeLayer` *{integer}*

Генерируется при изменении активного слоя пользователем. Передаётся ID нового слоя.

### `changeColors` *{Object}*

Генерируется при изменении палитры в месте нанесения с ограниченным по цветам типом нанесения.

* `areaId` *{string}* - ID места нанесения

## Типы

### `Area` *{Object}* <a href="#area" id="area"></a>

Данные о месте нанесения.

* `id` *{string}* - ID места нанесения. Данный ID формируется хэшированием на основе `baseId` и идентификатора названия модели в состоянии. То есть при изменении идентификатора модели в состоянии товара ID также изменится.
* `baseId` *{integer}* - базовый ID места нанесения. Данный ID назначается для модели, таким образом при использовании в состоянии одной модели несколько раз, у них будет одинаковый `baseId` у мест нанесения.
* `partId` *{integer}* - ID модели
* `object` *{string|null}* - идентификатор модели назвначенный в состоянии (если есть)
* `title` *{string}* - название места нанесения
* `viewId` *{integer}* - связанный ракурс
* `link` *{string}* - артикул места нанесения на сайте (указывается в ЛК)
* `bTypes` *{*[*BType*](https://github.com/oasiscatalog/o3d/tree/8b289c36cd104380b99f413ffe27b71f4b912955/areas.html#btype)*{}}* - типы нанесений
* `width` *{integer}* - ширина места нанесения в мм
* `height` *{integer}* - высота места нанесения в мм
* `bound` *{*[*Bound*](https://github.com/oasiscatalog/o3d/tree/8b289c36cd104380b99f413ffe27b71f4b912955/areas.html#bound)*|null}* - расположение и размеры слоёв относительно места нанесения, если нет видимых слоёв, то `null`
* `layers` *{*[*Layer*](https://github.com/oasiscatalog/o3d/tree/8b289c36cd104380b99f413ffe27b71f4b912955/areas.html#layer)*\[]}* - список слоёв

### `Layer` *{Object}* <a href="#layer" id="layer"></a>

Данные о слое.

* `id` *{integer}* - ID слоя
* `name` *{string}* - название слоя (отображается в редакторе в списке слоёв)
* `visible` *{boolean} \[true]* - видимость слоя
* `x` *{integer} \[0]* - смещение в пикселях по оси X относительно зоны нанесения
* `y` *{integer} \[0]* - смещение в пикселях по оси Y относительно зоны нанесения
* `scaleX` *{float} \[1]* - масштаб по оси X, при отражении будет отрицательное значение
* `scaleY` *{float} \[1]* - масштаб по оси Y, при отражении будет отрицательное значение
* `rotate` *{float}* \[0] - угол поворота слоя в радианах
* `bound` *{*[*Bound*](https://github.com/oasiscatalog/o3d/tree/8b289c36cd104380b99f413ffe27b71f4b912955/areas.html#bound)*|null}* - расположение и размер слоя относительно места нанесения

Для текстовых слоёв:

* `text` *{string}* - текст
* `font` *{string}* - шрифт
* `color` *{string}* - цвет (в формате hex)
* `align` *{string}* - выравнивание многострочного текста (`left`, `right`, `center`)
* `lineHeight` *{float}* - высота строки в процентах

Для слоёв с изображением:

* `image` *{boolean|integer}* - есть ли изображение в слое, если в данных о заказе, то индекс изображения в `layerImages`
* `imageUrl` *{string|null}* - URL катинки, если она взята со стороннего ресурса

### `Bound` *{Object}* <a href="#bound" id="bound"></a>

Описание размера и расположения. Значения нормированы единичным квадратом (координаты от 0 до 1).

* `left` *{float}* - минимальная координата по X
* `right` *{float}* - максимальная координата по X
* `top` *{float}* - минимальная координата по Y
* `bottom` *{float}* - максимальная координата по Y
* `leftTop` *{Point}* - расположение верхнего левого угла (Point - {x, y})
* `leftBottom` *{Point}* - расположение нижнего левого угла (Point - {x, y})
* `rightTop` *{Point}* - расположение верхнего правого угла (Point - {x, y})
* `rightBottom` *{Point}* - расположение нижнего правого угла (Point - {x, y})

### `BType` *{Object}* <a href="#btype" id="btype"></a>

Данные о типе нанесения.

* `title` *{string}* - название
* `article` *{string}* - артикул на сайте
* `maxWidth` *{integer}* - максимальная ширина нанесения в мм
* `maxHeight` *{integer}* - максимальная высота нанесения в мм
* `minDpi` *{integer}* - минимальное DPI для растровых изображений
* `substrate` *{boolean}* - возможна ли подложка
* `vectorWarn` *{boolean}* - требуется ли вектроное изображение
* `colors` *{Object{colorId}}* - объект с доступными цветностями:
  * `article` *{string}* - артикул на сайте
  * `title` *{string}* - название цветности