@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
269 lines • 12.8 kB
JavaScript
import { PointF } from "@aurigma/design-atoms-model/Math";
import { PlaceholderItemHandler } from "./ItemHandlers/PlaceholderItemHandler";
import { BarcodeItemHandler, GroupItemHandler } from "./ItemHandlers";
import { CoordinateSystem } from "./Viewer/CoordinateSystem";
import { PlaceholderItem, BarcodeItem, ImageMetaData } from "@aurigma/design-atoms-model/Product/Items";
import { Configuration } from "@aurigma/design-atoms-model/Configuration";
import { ItemUtils } from "./Utils/ItemUtils";
import { HistoryUpdateMode } from "./Commands/ModelUpdateCommand";
import { InputType, InputState } from "./Input/InputManager/IInputManager";
import { ItemsCommand } from "@aurigma/design-atoms-interfaces";
export class DragNDropHandler {
constructor(_canvas, _viewer, _hitTestManager) {
this._canvas = _canvas;
this._viewer = _viewer;
this._hitTestManager = _hitTestManager;
this._dndStarted = false;
this._isShown = false;
this._currentPointClient = null;
this._isOutOfCanvas = false;
this._dragSource = null;
this._dragOver = null;
this._dragImg = null;
this._dragTargets = null;
this._allowedTargets = null;
this._isDNDAllowed = (handler) => {
if (handler == null || (!(handler instanceof PlaceholderItemHandler)) || handler.content instanceof BarcodeItemHandler)
return false;
const permissions = handler.getPermissions();
return permissions.allowDragAndDrop &&
!handler.isStubOrEmpty() &&
(!permissions.allowMove || this._canvas.simpleMode) &&
!this._isOutOfCanvas;
};
this._onDragNDropStarting = (data) => {
this._canvas.onDragNDropStarting(data);
const sourceItemHandler = data.source;
const sourceItem = sourceItemHandler.item;
const checkPlaceholderLimitations = (source, target) => {
if (source.allowedSubfolder !== target.allowedSubfolder)
return false;
if (source.allowedTabs == null && target.allowedTabs != null ||
source.allowedTabs != null && target.allowedTabs == null)
return false;
if (source.linkId != null && target.linkId === source.linkId)
return false;
if (source.allowedTabs != null && target.allowedTabs != null) {
if (source.allowedTabs.length !== target.allowedTabs.length)
return false;
for (let i = 0; i < source.allowedTabs.length; i++) {
if (!target.allowedTabs.includes(source.allowedTabs[i]))
return false;
}
}
return true;
};
const items = this._canvas.viewer.surface.getAllItems({ ignoreMockups: false, flatGroupItems: true });
const placeholders = items.toArray().filter(item => item.parentContainer != null &&
item instanceof PlaceholderItem &&
!(item.content != null && item.content instanceof BarcodeItem) &&
item !== sourceItem &&
checkPlaceholderLimitations(sourceItem, item) &&
item.parentContainer.name !== Configuration.BG_CONTAINER_NAME &&
item.manipulationPermissions.allowDragAndDrop);
data.allowedTargets = placeholders.map(x => this._canvas.viewer.getHandler(x));
};
this._onDragNDropPerformed = (data) => {
this._canvas.onDragNDropPerformed(data);
const sourceItemHandler = data.source;
const targetItemHandler = data.target;
const sourceItem = sourceItemHandler.item;
const sourceContent = sourceItem.content;
let targetItem = null;
let targetContent = null;
if (targetItemHandler != null) {
targetItem = targetItemHandler.item;
targetContent = targetItem.content;
}
const targetContentNotEmpty = targetContent && !targetItem.isStubOrEmpty;
const targetImageMeta = targetContentNotEmpty
? new ImageMetaData({
isUserImage: targetContent.isUserImage,
isVector: targetContent.source.isVector,
name: targetContent.name,
size: { width: targetContent.source.width, height: targetContent.source.height },
storageId: targetContent.source.id,
origin: targetContent.source.origin
})
: sourceItem.stubStorageMeta;
const targetTags = targetContent != null ? targetContent.tags : null;
this._createAndInsertImageContent(targetImageMeta, sourceItem, !targetContentNotEmpty, targetTags);
if (targetItem != null) {
const sourceImageMeta = new ImageMetaData({
isUserImage: sourceContent.isUserImage,
isVector: sourceContent.source.isVector,
name: sourceContent.name,
size: { width: sourceContent.source.width, height: sourceContent.source.height },
storageId: sourceContent.source.id,
origin: sourceContent.source.origin
});
this._createAndInsertImageContent(sourceImageMeta, targetItem, null, sourceContent.tags);
}
};
this._createAndInsertImageContent = (imageMeta, placeholderItem, isStubContent = false, tags = {}) => {
const viewer = this._canvas.viewer;
const product = viewer.surface.parentProduct;
const items = product != null ? product.getAllItems({ ignoreMockups: false, flatGroupItems: true }) : viewer.surface.getAllItems().toArray();
const allPlaceholders = items.filter(i => i instanceof PlaceholderItem);
const linkedPlaceholders = placeholderItem.linkId != null
? allPlaceholders.filter(i => i.linkId === placeholderItem.linkId)
: [];
const placeholders = [placeholderItem, ...linkedPlaceholders];
for (const placeholder of placeholders) {
const imageForPh = imageMeta == null || imageMeta.storageId == null ? null : ItemUtils.createImageContentForPlaceholder(placeholder, imageMeta, viewer.productHandler);
placeholder.isStubContent = isStubContent != null ? isStubContent : false;
if (imageForPh != null && tags != null)
imageForPh.tags = tags;
this._viewer.commandManager.execute(ItemsCommand.addContent, { placeholder: placeholder, content: imageForPh }, HistoryUpdateMode.NotUpdate);
}
};
}
processMove(e) {
var _a;
if (e.type !== InputType.Move)
return;
if (e.state === InputState.Started) {
this._isOutOfCanvas = this._testOutOfCanvas(e.workspace);
const handler = this.hitTest(e.startWorkspace);
if (!this._isDNDAllowed(handler))
return;
this._currentPointClient = new PointF(e.page.x + window.scrollX, e.page.y + window.scrollY);
this._dragSource = handler;
var dndData = {
source: this._dragSource,
allowedTargets: null
};
this._onDragNDropStarting(dndData);
this._allowedTargets = dndData.allowedTargets;
this._dndStarted = true;
this._dragSource._reloadPlaceholderButtons();
this._dragImg = this._image;
this._setDragTargets(this._dragSource);
this._viewer.eventManager.dndStartedEvent.notify(this._dragSource);
}
else if (e.state === InputState.InProgress) {
this._isOutOfCanvas = this._testOutOfCanvas(e.workspace);
let vObj = this.hitTest(e.workspace);
if (!this._dragTargets.includes(vObj))
vObj = null;
this._setDragOver(vObj);
this._currentPointClient = new PointF(e.page.x + window.scrollX, e.page.y + window.scrollY);
}
else if (e.state === InputState.Finished) {
if (!this._dndStarted)
return;
let dragTarget = this.hitTest(e.workspace);
if (!this.isDragTarget(dragTarget))
dragTarget = null;
const isOutOfCanvas = this._testOutOfCanvas(e.workspace);
if (isOutOfCanvas) {
this._onDragNDropPerformed({ source: this._dragSource, target: null });
this._canvas.setSelectedItemHandlers([]);
}
else if (dragTarget != null && dragTarget != this._dragSource) {
this._onDragNDropPerformed({ source: this._dragSource, target: dragTarget });
this._canvas.setSelectedItemHandlers([dragTarget]);
}
this._setDragOver(null);
this._dndStarted = false;
var ds = this._dragSource;
this._dragSource = null;
if (ds)
ds._reloadPlaceholderButtons();
this._currentPointClient = null;
this._dragImg = null;
this._dragOver = null;
this._unsetDragTargets();
this.draw();
this._canvas.onDragNDropDone();
this._viewer.eventManager.dndFinishedEvent.notify(dragTarget);
}
if (this._dndStarted)
(_a = this._canvas) === null || _a === void 0 ? void 0 : _a.redrawDesign();
}
_setDragOver(value) {
if (this._dragOver != null && this._dragOver !== value) {
const dragOver = this._dragOver;
this._dragOver = null;
this._canvas.redrawDesign();
dragOver._reloadPlaceholderButtons();
}
if (value && value !== this._dragSource && value !== this._dragOver) {
this._dragOver = value;
this._canvas.redrawDesign();
this._dragOver._reloadPlaceholderButtons();
}
}
isDragSource(vo) {
return this._dragSource === vo;
}
isDragTarget(vo) {
if (this._dragTargets == null)
return false;
return this._dragTargets.includes(vo);
}
isDragStarted() {
return this._dndStarted;
}
isDragOver(vo = null) {
if (vo === null)
return this._dragOver != null;
else
return this._dragOver === vo;
}
isOutOfCanvas() {
return this._isOutOfCanvas;
}
hitTest(point) {
const handlers = this._hitTestManager.getItemHandlersByHitTest(point, CoordinateSystem.workspace).filter((itemHandler) => !(itemHandler instanceof GroupItemHandler));
const upperHandler = handlers[0];
return upperHandler instanceof PlaceholderItemHandler
? upperHandler
: null;
}
_testOutOfCanvas(point) {
if (point.x < 0 || point.x > this._canvas.workspaceWidth)
return true;
if (point.y < 0 || point.y > this._canvas.workspaceHeight)
return true;
return false;
}
get _image() {
const image = this._dragSource.content._imageContainer._image;
return image;
}
_unsetDragTargets() {
var dragTargets = this._dragTargets;
this._dragTargets = null;
if (dragTargets != null) {
dragTargets.forEach(ph => ph._reloadPlaceholderButtons());
this._canvas.redraw();
}
}
_setDragTargets(sourceVo) {
const placeholders = this._canvas.getAllItemHandlers({
onlyVisible: true,
onlyType: PlaceholderItemHandler,
flatGroupItems: true
});
this._dragTargets = placeholders.filter(ph => ph !== sourceVo &&
(this._allowedTargets == null ||
this._allowedTargets.includes(ph)));
if (this._dragTargets.length > 0) {
this._dragTargets.forEach(ph => ph._reloadPlaceholderButtons());
this._canvas.redraw();
}
}
draw() {
if (!this._dndStarted) {
if (this._isShown) {
this._canvas.hideDnd();
this._isShown = false;
}
return;
}
this._canvas.showDnd(this._currentPointClient, this._dragImg);
this._isShown = true;
}
}
//# sourceMappingURL=DragNDropHandler.js.map