@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
327 lines • 15.8 kB
JavaScript
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spread = (this && this.__spread) || function () {
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
return ar;
};
var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
import { PointF } from "@aurigma/design-atoms-model/Math";
import { PlaceholderItemHandler } from "./ItemHandlers/PlaceholderItemHandler";
import { BarcodeItemHandler, GroupItemHandler } from "./ItemHandlers";
import { CoordinateSystem } from "./Viewer";
import { PlaceholderItem, BarcodeItem, ImageMetaData } from "@aurigma/design-atoms-model/Product/Items";
import * as _ from "underscore";
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";
var DragNDropHandler = /** @class */ (function () {
function DragNDropHandler(_canvas, _viewer, _hitTestManager) {
var _this = this;
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 = function (handler) {
if (handler == null || (!(handler instanceof PlaceholderItemHandler)) || handler.content instanceof BarcodeItemHandler)
return false;
var permissions = handler.getPermissions();
return permissions.allowDragAndDrop &&
!handler.isStubOrEmpty() &&
(!permissions.allowMove || _this._canvas.simpleMode) &&
!_this._isOutOfCanvas;
};
this._onDragNDropStarting = function (data) {
_this._canvas.onDragNDropStarting(data);
var sourceItemHandler = data.source;
var sourceItem = sourceItemHandler.item;
var checkPlaceholderLimitations = function (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 (var i = 0; i < source.allowedTabs.length; i++) {
if (!target.allowedTabs.includes(source.allowedTabs[i]))
return false;
}
}
return true;
};
var items = _this._canvas.viewer.surface.getAllItems({ ignoreMockups: false, flatGroupItems: true });
var placeholders = _.filter(items.toArray(), function (item) {
return 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(function (x) { return _this._canvas.viewer.getHandler(x); });
};
this._onDragNDropPerformed = function (data) {
_this._canvas.onDragNDropPerformed(data);
var sourceItemHandler = data.source;
var targetItemHandler = data.target;
var sourceItem = sourceItemHandler.item;
var sourceContent = sourceItem.content;
var targetItem = null;
var targetContent = null;
if (targetItemHandler != null) {
targetItem = targetItemHandler.item;
targetContent = targetItem.content;
}
var targetContentNotEmpty = targetContent && !targetItem.isStubOrEmpty;
var 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;
var targetTags = targetContent != null ? targetContent.tags : null;
_this._createAndInsertImageContent(targetImageMeta, sourceItem, !targetContentNotEmpty, targetTags);
if (targetItem != null) {
var 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 = function (imageMeta, placeholderItem, isStubContent, tags) {
var e_1, _a;
if (isStubContent === void 0) { isStubContent = false; }
if (tags === void 0) { tags = {}; }
var viewer = _this._canvas.viewer;
var product = viewer.surface.parentProduct;
var items = product != null ? product.getAllItems({ ignoreMockups: false, flatGroupItems: true }) : viewer.surface.getAllItems().toArray();
var allPlaceholders = items.filter(function (i) { return i instanceof PlaceholderItem; });
var linkedPlaceholders = placeholderItem.linkId != null
? allPlaceholders.filter(function (i) { return i.linkId === placeholderItem.linkId; })
: [];
var placeholders = __spread([placeholderItem], linkedPlaceholders);
try {
for (var placeholders_1 = __values(placeholders), placeholders_1_1 = placeholders_1.next(); !placeholders_1_1.done; placeholders_1_1 = placeholders_1.next()) {
var placeholder = placeholders_1_1.value;
var 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);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (placeholders_1_1 && !placeholders_1_1.done && (_a = placeholders_1.return)) _a.call(placeholders_1);
}
finally { if (e_1) throw e_1.error; }
}
};
}
DragNDropHandler.prototype.processMove = function (e) {
var _a;
if (e.type !== InputType.Move)
return;
if (e.state === InputState.Started) {
this._isOutOfCanvas = this._testOutOfCanvas(e.workspace);
var 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);
var 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;
var dragTarget = this.hitTest(e.workspace);
if (!this.isDragTarget(dragTarget))
dragTarget = null;
var 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();
};
DragNDropHandler.prototype._setDragOver = function (value) {
if (this._dragOver != null && this._dragOver !== value) {
var 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();
}
};
DragNDropHandler.prototype.isDragSource = function (vo) {
return this._dragSource === vo;
};
DragNDropHandler.prototype.isDragTarget = function (vo) {
if (this._dragTargets == null)
return false;
return this._dragTargets.includes(vo);
};
DragNDropHandler.prototype.isDragStarted = function () {
return this._dndStarted;
};
DragNDropHandler.prototype.isDragOver = function (vo) {
if (vo === void 0) { vo = null; }
if (vo === null)
return this._dragOver != null;
else
return this._dragOver === vo;
};
DragNDropHandler.prototype.isOutOfCanvas = function () {
return this._isOutOfCanvas;
};
DragNDropHandler.prototype.hitTest = function (point) {
var handlers = this._hitTestManager.getItemHandlersByHitTest(point, CoordinateSystem.workspace).filter(function (itemHandler) { return !(itemHandler instanceof GroupItemHandler); });
var upperHandler = handlers[0];
return upperHandler instanceof PlaceholderItemHandler
? upperHandler
: null;
};
DragNDropHandler.prototype._testOutOfCanvas = function (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;
};
Object.defineProperty(DragNDropHandler.prototype, "_image", {
get: function () {
var image = this._dragSource.content._imageContainer._image;
return image;
},
enumerable: true,
configurable: true
});
DragNDropHandler.prototype._unsetDragTargets = function () {
var dragTargets = this._dragTargets;
this._dragTargets = null;
if (dragTargets != null) {
dragTargets.forEach(function (ph) { return ph._reloadPlaceholderButtons(); });
this._canvas.redraw();
}
};
DragNDropHandler.prototype._setDragTargets = function (sourceVo) {
var _this = this;
var placeholders = this._canvas.getAllItemHandlers({
onlyVisible: true,
onlyType: PlaceholderItemHandler,
flatGroupItems: true
});
this._dragTargets = placeholders.filter(function (ph) {
return ph !== sourceVo &&
(_this._allowedTargets == null ||
_this._allowedTargets.includes(ph));
});
if (this._dragTargets.length > 0) {
this._dragTargets.forEach(function (ph) { return ph._reloadPlaceholderButtons(); });
this._canvas.redraw();
}
};
DragNDropHandler.prototype.draw = function () {
if (!this._dndStarted) {
if (this._isShown) {
this._canvas.hideDnd();
this._isShown = false;
}
return;
}
this._canvas.showDnd(this._currentPointClient, this._dragImg);
this._isShown = true;
};
return DragNDropHandler;
}());
export { DragNDropHandler };
//# sourceMappingURL=DragNDropHandler.js.map