@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
899 lines • 67.6 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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;
};
import Environment from "@aurigma/design-atoms-model/Utils/Environment";
import { PlaceholderItemHandler, RenderState, ImageItemHandler, PlainTextItemHandler, GroupItemHandler, NewBaseTextItemHandler } from "./ItemHandlers";
import { InvalidOperationException } from "@aurigma/design-atoms-model/Exception";
import { PointF, RotatedRectangleF, RectangleF } from "@aurigma/design-atoms-model/Math";
import { TextAlignment, PlainTextItem, TextVerticalAlignment, BoundedTextItem, PathBoundedTextItem } from "@aurigma/design-atoms-model/Product/Items";
import { Collection } from "@aurigma/design-atoms-model/Collection";
import { ItemUtils } from "./Utils/ItemUtils";
import { addPointerEventsStopPropagation, removePointerEventsStopPropagation } from "./Utils/Dom";
import { CoordinatesConvertUtils } from "./Utils/CoordinatesConvertUtils";
var CanvasElementHandler = /** @class */ (function () {
function CanvasElementHandler(_viewer, _selection, _dndHandler, _rotateHandler, config) {
var _this = this;
this._viewer = _viewer;
this._selection = _selection;
this._dndHandler = _dndHandler;
this._rotateHandler = _rotateHandler;
this._document = null;
this._parent = null;
this._whitespace = null;
this._childrenToAdd = [];
this._dndDiv = null;
this._dndStyle = null;
this._buttonStyle = null;
this._textEditorDiv = null;
this._textEditorInnerDiv = null;
this.staticTextCanvas = null;
//#endregion
//#region selection
this.addChild = function (element) {
if (_this._whitespace == null) {
_this._childrenToAdd.push(element);
return;
}
_this._whitespace.appendChild(element);
};
this._showQualityChangeContainer = function (itemHandler) {
var violationSetting = itemHandler.item.violationSettings;
if (!violationSetting.allowImageQuality)
return false;
if (itemHandler instanceof PlaceholderItemHandler && itemHandler.isStubOrEmpty())
return false;
var image = ItemUtils.getImageItem(itemHandler.item);
var isVectorContent = image != null && image.source.isVector;
if (isVectorContent)
return false;
var isChanging = _this._selection.isResizing || (itemHandler instanceof PlaceholderItemHandler && itemHandler.forceQualityChangeInfoBar);
if (!isChanging)
return false;
return !itemHandler.isQualityChangeBarEmpty;
};
//#endregion
//#region text editor
this._textEditorId = "textEditor";
this._onZoomedScrolledDelegate = function () {
var current = _this._selection.currentItemHandler;
if (current != null) {
var textAlignment = current.item instanceof PlainTextItem ? current.item.alignment : null;
var textVerticalAlignment = current.item instanceof BoundedTextItem ? current.item.verticalAlignment : null;
var isVertical = false;
if (current.item instanceof PlainTextItem || current.item instanceof BoundedTextItem || current.item instanceof PathBoundedTextItem)
isVertical = current.item.isVertical;
_this._updateTextEditorPosition(current.rectangle, textAlignment, current.item.borderWidth, textVerticalAlignment, isVertical);
}
};
this._stopPropagationFnc = function (e) { e.stopPropagation(); };
var id = this._viewer.id;
if (id == null)
throw new InvalidOperationException("Element id cannot be null or undefined");
this._staticTextCanvasId = id + "_staticText";
this.setConf(config);
}
Object.defineProperty(CanvasElementHandler.prototype, "offset", {
get: function () { return this._offset; },
set: function (value) {
if (value != null && value.equals(this._offset) || value == null && this.offset != null)
return;
this._offset = value;
},
enumerable: true,
configurable: true
});
CanvasElementHandler.prototype.setConf = function (conf) {
this._config = __assign({ handleButtonEnabled: true }, (conf || {}));
};
Object.defineProperty(CanvasElementHandler.prototype, "_canvas", {
get: function () {
//use for settings only. Remove after complete refactoring
return this._viewer.canvas;
},
enumerable: true,
configurable: true
});
CanvasElementHandler.prototype.addStyles = function () {
this._addButtonStyles();
this._addDndStyle();
this._rotateHandler.addRotationStyle();
};
CanvasElementHandler.prototype._addButtonStyles = function () {
if (this._buttonStyle != null)
this._buttonStyle.remove();
this._buttonStyle = document.createElement("style");
this._buttonStyle.type = "text/css";
this._buttonStyle.innerHTML = ".buttonsHidden {opacity: 0; transition: 0.3s opacity; pointer-events: none !important;}" +
".buttonsShown {opacity: 1; transition: 0.3s opacity; position: relative;}" +
".elementHidden {opacity: 0; transition: 0.3s opacity;}" +
".elementShown {opacity: 1; transition: 0.3s opacity;}" +
".without-animation { transition: none !important; }";
document.head.appendChild(this._buttonStyle);
};
CanvasElementHandler.prototype._addDndStyle = function () {
if (this._dndStyle != null)
this._dndStyle.remove();
this._dndStyle = document.createElement("style");
this._dndStyle.type = "text/css";
this._dndStyle.innerHTML = "#ccDndDiv {position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; box-sizing: border-box; width: 100%; height: 100%;}" +
"#ccDndDiv .thumb {position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; box-sizing: border-box; width: 100px; height: 100px; border: 1px solid black; opacity: 0.8; background-size: cover;}" +
"#ccDndDiv .thumb.outside-canvas:after { content: '\\e92b'; font-size: 46px; text-align: center; font-family: 'Material Icons'; line-height: 100px; vertical-align: middle; color: white; background-color: red; opacity: 0.5; width: 100%; height: 100%; display: block; }" +
"#ccDndDiv .thumb.outside-canvas { opacity: 0.5 }" +
"#ccDndDiv .thumb.drag-over { opacity: 0.4 }" +
".cc-dnd-icon {color: white}" +
".cc-dnd-over {transition: transform 1.5s; transform: scale(1.2); }";
document.head.appendChild(this._dndStyle);
};
CanvasElementHandler.prototype.addTextEditorStyles = function (css) {
var style = document.createElement("link");
style.type = "text/css";
style.rel = "stylesheet";
style.href = css;
document.head.appendChild(style);
};
CanvasElementHandler.prototype._addStaticTextCanvas = function (width, height) {
this.staticTextCanvas = this._createCanvasElement(this._staticTextCanvasId, width, height);
this.staticTextCanvas.style.visibility = "hidden";
this._parent.appendChild(this.staticTextCanvas);
};
Object.defineProperty(CanvasElementHandler.prototype, "viewportSurfaceCanvas", {
get: function () {
return this._viewportSurfaceCanvas;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CanvasElementHandler.prototype, "viewportInactiveCanvas", {
get: function () {
return this._viewportInactiveCanvas;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CanvasElementHandler.prototype, "viewportActiveCanvas", {
get: function () {
return this._viewportActiveCanvas;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CanvasElementHandler.prototype, "viewportDesignCanvas", {
get: function () {
return this._viewportDesignCanvas;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CanvasElementHandler.prototype, "viewportActiveTextCanvas", {
get: function () {
return this._viewportActiveTextCanvas;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CanvasElementHandler.prototype, "viewportCursorCanvas", {
get: function () {
return this._viewportCursorCanvas;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CanvasElementHandler.prototype, "viewportSelectionCanvas", {
get: function () {
return this._viewportSelectionCanvas;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CanvasElementHandler.prototype, "viewportTextureCanvas", {
get: function () {
if (this._viewportTextureCanvas == null) {
this._viewportTextureCanvas = this._appendViewportCanvas("texture");
this._viewportTextureCanvas.style["opacity"] = "0";
}
return this._viewportTextureCanvas;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CanvasElementHandler.prototype, "viewportMemoryCanvas", {
get: function () {
if (this._viewportMemoryCanvas == null) {
this._viewportMemoryCanvas = this._appendViewportCanvas("memory");
this._viewportMemoryCanvas.style["opacity"] = "0";
}
return this._viewportMemoryCanvas;
},
enumerable: true,
configurable: true
});
CanvasElementHandler.prototype._appendViewportCanvas = function (name) {
var element = this._viewer.element;
var el = element.parentNode;
var doc = el.ownerDocument;
var canvas = this._createViewportCanvas(doc, element.id, name);
this._viewportDiv.appendChild(canvas);
return canvas;
};
CanvasElementHandler.prototype.addViewport = function (viewport) {
var _a;
//console.log(`addViewport`);
var element = this._viewer.element;
var el = element.parentNode;
var doc = el.ownerDocument;
var style = " -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px)";
//var viewport = doc.createElement("div");
//viewport.id = element.id +"_viewport";
viewport.setAttribute("style", style);
viewport.style.zIndex = "0";
viewport.style.position = "absolute";
viewport.style.width = "100px";
viewport.style.height = "100px";
viewport.style.left = this._viewer.actualRulerWidth + "px";
viewport.style.top = this._viewer.actualRulerWidth + "px";
//viewport.style.border = "1px solid green";
viewport.style.pointerEvents = "none";
this._viewportDiv = viewport;
if (((_a = this._canvas) === null || _a === void 0 ? void 0 : _a.readonlyCanvasMode) === true) {
this._viewportSurfaceCanvas = this._appendViewportCanvas("surface");
this._viewportInactiveCanvas = this._appendViewportCanvas("inactive"); // for redraw?
this._viewportDesignCanvas = this._appendViewportCanvas("design");
}
else {
this._viewportSurfaceCanvas = this._appendViewportCanvas("surface");
this._viewportActiveCanvas = this._appendViewportCanvas("active");
this._viewportActiveTextCanvas = this._appendViewportCanvas("activeText");
this._viewportInactiveCanvas = this._appendViewportCanvas("inactive");
this._viewportDesignCanvas = this._appendViewportCanvas("design");
this._viewportSelectionCanvas = this._appendViewportCanvas("selection");
this._viewportCursorCanvas = this._appendViewportCanvas("cursor");
this._viewportCursorCanvas.style["mixBlendMode"] = "difference";
}
el.appendChild(viewport);
};
CanvasElementHandler.prototype._createViewportCanvas = function (document, parentId, suffix) {
var canvas = document.createElement("canvas");
canvas.id = parentId + "_viewport_" + suffix;
canvas.style.position = "absolute";
canvas.style.width = "100%";
canvas.style.height = "100%";
canvas.style.pointerEvents = "none";
return canvas;
};
CanvasElementHandler.prototype.updateViewport = function () {
var _a;
if (this._viewportDiv == null)
return;
//console.log(`updateViewport`);
var rulerWidth = this._viewer.actualRulerWidth;
this._viewportDiv.style.left = rulerWidth + "px";
this._viewportDiv.style.top = rulerWidth + "px";
var elementBounds = this._viewer.holderBounds;
var viewAreaWidth = elementBounds.width - rulerWidth;
var viewAreaHeight = elementBounds.height - rulerWidth;
this._viewportDiv.style.width = viewAreaWidth + "px";
this._viewportDiv.style.height = viewAreaHeight + "px";
if (((_a = this._canvas) === null || _a === void 0 ? void 0 : _a.readonlyCanvasMode) === true) {
this._updateViewportCanvas(this._viewportSurfaceCanvas, viewAreaWidth, viewAreaHeight);
this._updateViewportCanvas(this._viewportDesignCanvas, viewAreaWidth, viewAreaHeight);
this._updateViewportCanvas(this._viewportInactiveCanvas, viewAreaWidth, viewAreaHeight); // for redraw?
}
else {
this._updateViewportCanvas(this._viewportSurfaceCanvas, viewAreaWidth, viewAreaHeight);
this._updateViewportCanvas(this._viewportActiveCanvas, viewAreaWidth, viewAreaHeight);
this._updateViewportCanvas(this._viewportActiveTextCanvas, viewAreaWidth, viewAreaHeight);
this._updateViewportCanvas(this._viewportInactiveCanvas, viewAreaWidth, viewAreaHeight);
this._updateViewportCanvas(this._viewportDesignCanvas, viewAreaWidth, viewAreaHeight);
this._updateViewportCanvas(this._viewportSelectionCanvas, viewAreaWidth, viewAreaHeight);
this._updateViewportCanvas(this._viewportCursorCanvas, viewAreaWidth, viewAreaHeight);
this._updateViewportCanvas(this._viewportMemoryCanvas, viewAreaWidth, viewAreaHeight);
this._updateViewportCanvas(this._viewportTextureCanvas, viewAreaWidth, viewAreaHeight);
}
// cursor
//console.log(`updateviewport w ${viewAreaWidth} h ${viewAreaHeight}`);
};
CanvasElementHandler.prototype._updateViewportCanvas = function (canvas, width, height) {
if (canvas == null)
return;
canvas.width = Math.ceil(width * Environment.devicePixelRatio);
canvas.style.width = Math.ceil(width) + "px";
canvas.height = Math.ceil(height * Environment.devicePixelRatio);
canvas.style.height = Math.ceil(height) + "px";
};
CanvasElementHandler.prototype.removeViewport = function () {
var element = this._viewer.element;
var el = element.parentNode;
if (this._viewportDiv)
el.removeChild(this._viewportDiv);
};
CanvasElementHandler.prototype.addElement = function (parent, whitespace, width, height) {
this._parent = parent;
this._document = parent.ownerDocument;
this._whitespace = whitespace;
if (this._document == null || this._whitespace == null)
return;
// hidden canvas for static text rendering
this._addStaticTextCanvas(width, height);
//canvas for bottom inactive items (main canvas)
//this.surfaceCanvas = this._createCanvasElement(this._surfaceCanvasId, width, height);
//this._parent.appendChild(this.surfaceCanvas);
// canvas for currentely selected items and all items between them
//this.activeCanvas = this._createCanvasElement(this._activeCanvasId, width, height);
//this._parent.appendChild(this.activeCanvas);
// canvas for webgl active text
//this.activeTextCanvas = this._createCanvasElement(this._activeTextCanvasId, width, height);
//this._parent.appendChild(this.activeTextCanvas);
// canvas for top inactive items
//this.inactiveCanvas = this._createCanvasElement(this._inactiveCanvasId, width, height);
//this._parent.appendChild(this.inactiveCanvas);
// canvas for selection and highlight
//this.designCanvas = this._createCanvasElement(this._designCanvasId, width, height);
//this._parent.appendChild(this.designCanvas);
// canvas for text cursor
//this.cursorCanvas = this._createCanvasElement(this._cursorCanvasId, width, height);
//this._parent.appendChild(this.cursorCanvas);
if (this._viewer.frontEndTextRenderingEnabled)
this._addTextEditorDiv();
this._addDndDiv();
this._childrenToAdd.forEach(this.addChild);
this._childrenToAdd = [];
};
CanvasElementHandler.prototype.replaceStaticTextCanvas = function () {
var _a;
var width = this.staticTextCanvas.width;
var height = this.staticTextCanvas.height;
var parent = (_a = this.staticTextCanvas) === null || _a === void 0 ? void 0 : _a.parentNode;
if (parent != null) {
parent.removeChild(this.staticTextCanvas);
this.staticTextCanvas = null;
}
this._addStaticTextCanvas(width, height);
return this.staticTextCanvas;
};
CanvasElementHandler.prototype.createCanvas = function (size) {
var rnd = Math.random();
var now = performance.now();
var id = ("tmp-" + rnd + "-" + now).replace(/./g, '-');
var canvas = this._createCanvasElement(id, size.width, size.height);
canvas.style.visibility = "hidden";
this._parent.appendChild(canvas);
return canvas;
};
CanvasElementHandler.prototype.removeElement = function () {
this._removeTextEditorDiv();
this._removeDndDiv();
};
CanvasElementHandler.prototype.updateElementSize = function (width, height, fullUpdate) {
//let viewerObj = this._viewer as any;
//var hb = viewerObj._holderBounds;
//var pageCoords = viewerObj._getElementPageCoord(this._viewer.element);
//var pageCoords = CoordinatesConvertUtils.getElementPageCoord(this._viewer.contentCtx);
//console.log(`hb`, hb);
//console.log(`pageCoords`, pageCoords);
if (fullUpdate === void 0) { fullUpdate = true; }
/*var canvases = this._getAllCanvases();
for (var i = 0; i < canvases.length; i++) {
const canvas = canvases[i];
if (canvas != null) {
CanvasElementHandler.setElementSize(canvas, width, height, fullUpdate);
//CanvasElementHandler.setElementSize(canvas, hb.width, hb.height, pageCoords);
}
}*/
};
CanvasElementHandler.prototype.moveActiveTextCanvasOnTop = function () {
this._viewportDiv.insertBefore(this.viewportActiveTextCanvas, this.viewportDesignCanvas);
};
CanvasElementHandler.prototype.moveActiveTextCanvasBack = function () {
this._viewportDiv.insertBefore(this.viewportActiveTextCanvas, this.viewportInactiveCanvas);
};
//#region dnd
CanvasElementHandler.prototype._addDndDiv = function () {
this._dndDiv = this._document.createElement("div");
this._dndDiv.id = "ccDndDiv";
this._document.body.appendChild(this._dndDiv);
var thumb = this._document.createElement("div");
thumb.id = "ccDndThumb";
thumb.classList.add("thumb");
thumb.style.visibility = "hidden";
thumb.style.left = "50%";
thumb.style.top = "0%";
this._dndDiv.appendChild(thumb);
};
CanvasElementHandler.prototype._removeDndDiv = function () {
if (this._dndDiv == null)
return;
this._dndDiv.remove();
this._dndDiv = null;
};
CanvasElementHandler.prototype.showDnd = function (point, image, angle) {
this._dndDiv.querySelectorAll("div[id^=ccDndThumb]").forEach(function (elem) {
elem.style.left = point.x - 50 + "px";
elem.style.top = point.y - 50 + "px";
});
this._dndDiv.style.visibility = "visible";
this._dndDiv.querySelectorAll("div[id^=ccDndThumb]").forEach(function (elem) {
elem.style.visibility = "visible";
elem.style.backgroundImage = "url(" + image.src + ")";
elem.style.transform = "rotate(" + angle + "deg)";
});
if (this._dndHandler.isOutOfCanvas()) {
this._dndDiv.querySelectorAll("div[id^=ccDndThumb]").forEach(function (elem) {
elem.classList.add("outside-canvas");
});
}
else {
this._dndDiv.querySelectorAll("div[id^=ccDndThumb]").forEach(function (elem) {
elem.classList.remove("outside-canvas");
});
}
if (this._dndHandler.isDragOver()) {
this._dndDiv.querySelectorAll("div[id^=ccDndThumb]").forEach(function (elem) {
elem.classList.add("drag-over");
});
}
else {
this._dndDiv.querySelectorAll("div[id^=ccDndThumb]").forEach(function (elem) {
elem.classList.remove("drag-over");
});
}
};
CanvasElementHandler.prototype.hideDnd = function () {
this._dndDiv.style.visibility = "hidden";
this._dndDiv.querySelectorAll("div[id^=ccDndThumb]").forEach(function (elem) {
elem.style.visibility = "hidden";
});
};
CanvasElementHandler.prototype.removeChilds = function (element) {
this._whitespace.removeChild(element);
};
//#endregion
//#region placeholder buttons
CanvasElementHandler.prototype.addPlaceholderButtonGroup = function (placeholder, viewer) {
var _a, _b, _c, _d, _e, _f, _g;
if (viewer == null || this._parent == null || placeholder == null)
return;
var buttonDiv = document.createElement("div");
buttonDiv.style.position = "absolute";
buttonDiv.style.display = "flex";
buttonDiv.style.alignItems = "center";
buttonDiv.id = "buttonDiv";
var divClass = this._canvas.placeholderButtonGroupCssClass;
var editDiv = document.createElement("div");
editDiv.id = "editDiv";
if (divClass != null && divClass !== "")
(_a = editDiv.classList).add.apply(_a, __spread(divClass.split(" ")));
if (Environment.IsTouchDevice()) {
var bigButtonGroupCssClass = this._canvas.bigButtonGroupCssClass;
if (bigButtonGroupCssClass != null && bigButtonGroupCssClass !== "")
(_b = editDiv.classList).add.apply(_b, __spread(bigButtonGroupCssClass.split(" ")));
}
if (placeholder.isStubOrEmpty() &&
!(this._dndHandler.isDragStarted() && this._dndHandler.isDragTarget(placeholder))) {
var selectButton = document.createElement("button");
selectButton.type = "button";
selectButton.id = "selectButton";
selectButton.setAttribute("style", "will-change: transform");
addPointerEventsStopPropagation(selectButton);
selectButton.addEventListener("click", placeholder.selectButtonClickHandler);
if (placeholder.item.isBarcodePlaceholder) {
var selectBarcodeButtonCssClass = this._canvas.selectBarcodeButtonCssClass;
if (selectBarcodeButtonCssClass != null && selectBarcodeButtonCssClass !== "")
(_c = selectButton.classList).add.apply(_c, __spread(selectBarcodeButtonCssClass.split(" ")));
else
selectButton.innerText = "Select";
}
else {
var selectImageButtonCssClass = this._canvas.selectImageButtonCssClass;
if (selectImageButtonCssClass != null && selectImageButtonCssClass !== "")
(_d = selectButton.classList).add.apply(_d, __spread(selectImageButtonCssClass.split(" ")));
else
selectButton.innerText = "Select";
}
placeholder.selectButton = selectButton;
editDiv.appendChild(selectButton);
}
if (this._dndHandler.isDragStarted) {
if (this._dndHandler.isDragTarget(placeholder)) {
var dropIcon = document.createElement("div");
dropIcon.id = "dropIcon";
dropIcon.classList.add("cc-dnd-icon");
dropIcon.setAttribute("style", "width: 30px; height: 30px; will-change: transform");
var iconClass = placeholder.isStubOrEmpty()
? "cc-icon-dnd-target-empty"
: "cc-icon-dnd-target-not-empty";
dropIcon.classList.add(iconClass);
if (this._dndHandler.isDragOver(placeholder)) {
dropIcon.classList.add("cc-dnd-over");
}
editDiv.appendChild(dropIcon);
}
}
var allowEditContent = placeholder.getPermissions().allowEditContent;
if (allowEditContent && !placeholder.isStubOrEmpty() && !this._dndHandler.isDragStarted()) {
var handleButton = document.createElement("button");
handleButton.type = "button";
handleButton.id = "handleButton";
handleButton.setAttribute("style", "will-change: transform");
addPointerEventsStopPropagation(handleButton);
var handleButtonCss = this._canvas.handleButtonCssClass;
if (handleButtonCss != null && handleButtonCss !== "")
(_e = handleButton.classList).add.apply(_e, __spread(handleButtonCss.split(" ")));
else
handleButton.innerText = "Handle";
placeholder.handleButton = handleButton;
handleButton.addEventListener("click", placeholder.onHandleButtonClick);
editDiv.appendChild(handleButton);
}
buttonDiv.appendChild(editDiv);
var doneDiv = document.createElement("div");
doneDiv.id = "doneDiv";
if (divClass != null && divClass !== "")
(_f = doneDiv.classList).add.apply(_f, __spread(divClass.split(" ")));
if (allowEditContent) {
var doneButton = document.createElement("button");
doneButton.type = "button";
doneButton.setAttribute("style", "will-change: transform");
addPointerEventsStopPropagation(doneButton);
var doneButtonCss = this._canvas.doneButtonCssClass;
if (doneButtonCss != null && doneButtonCss !== "")
(_g = doneButton.classList).add.apply(_g, __spread(doneButtonCss.split(" ")));
else
doneButton.innerText = "Done";
placeholder.doneButton = doneButton;
doneButton.addEventListener("click", placeholder.onDoneButtonClick);
doneDiv.appendChild(doneButton);
}
buttonDiv.appendChild(doneDiv);
this._whitespace.appendChild(buttonDiv);
placeholder.placeholderButtonGroup = buttonDiv;
placeholder.editButtonGroup = editDiv;
placeholder.doneButtonGroup = doneDiv;
this.updatePlaceholderButtonGroup(placeholder, viewer);
};
CanvasElementHandler.prototype.removePlaceholderButtonGroup = function (placeholder) {
if (placeholder == null || placeholder.placeholderButtonGroup == null)
return;
var buttons = [
placeholder.selectButton, placeholder.doneButton, placeholder.handleButton
];
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
if (button == null)
continue;
removePointerEventsStopPropagation(button);
}
placeholder.placeholderButtonGroup.remove();
placeholder.placeholderButtonGroup = null;
placeholder.doneButtonGroup = null;
placeholder.selectButton = null;
placeholder.handleButton = null;
placeholder.doneButton = null;
};
CanvasElementHandler.prototype.updatePlaceholderButtonGroup = function (placeholder, viewer) {
var _this = this;
if (placeholder == null || placeholder.placeholderButtonGroup == null)
return;
var placeholderButtonGroup = placeholder.placeholderButtonGroup;
if (!placeholder.isVisible() || placeholder.isLocked() || !this._isDefaultInputHandler) {
placeholderButtonGroup.style.visibility = "hidden";
return;
}
placeholderButtonGroup.style.visibility = "visible";
var editButtonGroup = placeholder.editButtonGroup;
var doneButtonGroup = placeholder.doneButtonGroup;
var isShowSelectButton = function () {
var disableByRotation = _this._selection.isRotating && _this._selection.isItemHandlerSelected(placeholder);
return !disableByRotation && placeholder.isStubOrEmpty() && placeholder.showSelectButton();
};
var isHandleButtonShouldBeShowed = function () {
return _this._config.handleButtonEnabled &&
!placeholder.isStubOrEmpty()
&& placeholder.showHandleButton()
&& _this._selection.isItemHandlerSelected(placeholder)
&& !placeholder.isContentUpdating()
&& _this._selection.selectedItemHandlers.length === 1
&& !_this._selection.isRotating
&& !_this._selection.isResizing
&& !_this._selection.isDragging;
};
var isDndStarted = function () {
return _this._dndHandler.isDragStarted() && _this._dndHandler.isDragTarget(placeholder);
};
if (!this._canvas.autoPlaceholderEditModeEnabled) {
if (isShowSelectButton() || isHandleButtonShouldBeShowed() || isDndStarted())
CanvasElementHandler.showElement(editButtonGroup);
else
CanvasElementHandler.hideElement(editButtonGroup);
if (placeholder.editing && !placeholder.isContentUpdating() && placeholder.getPermissions(true).showDoneButton)
CanvasElementHandler.showElement(doneButtonGroup);
else
CanvasElementHandler.hideElement(doneButtonGroup);
}
else {
if (!isShowSelectButton())
CanvasElementHandler.hideElement(editButtonGroup);
CanvasElementHandler.hideElement(doneButtonGroup);
}
var selectButton = placeholder.selectButton;
if (selectButton != null)
selectButton.title = this._getSelectButtonTitle(placeholder);
var doneButton = placeholder.doneButton;
if (doneButton != null)
doneButton.title = this._canvas.translations.doneButtonTitle;
var handleButton = placeholder.handleButton;
if (handleButton != null)
handleButton.title = this._canvas.translations.handleButtonTitle;
this.updatePlaceholderButtonGroupPosition(placeholder, viewer);
};
CanvasElementHandler.prototype.updatePlaceholderButtonGroupPosition = function (placeholder, viewer) {
if (viewer == null || this._parent == null || placeholder == null ||
placeholder.placeholderButtonGroup == null)
return;
var rect = RotatedRectangleF.getRectWithOffset(placeholder.rectangle, this._offset);
rect = CanvasElementHandler.rotateRectangle(rect, this._viewer);
var controlCenter = CoordinatesConvertUtils.workspaceToWhiteSpacePoint(new PointF(rect.centerX, rect.centerY), viewer);
var placeholderButtonGroup = placeholder.placeholderButtonGroup;
var x = (controlCenter.x - placeholderButtonGroup.offsetWidth / 2);
var y = (controlCenter.y - placeholderButtonGroup.offsetHeight / 2);
placeholderButtonGroup.style.position = "absolute";
placeholderButtonGroup.style.left = x + "px";
placeholderButtonGroup.style.top = y + "px";
};
//#endregion
//#region violation container
CanvasElementHandler.prototype.addViolationContainer = function (itemHandler, viewer) {
var _a, _b, _c, _d, _e;
if (viewer == null || this._parent == null || itemHandler == null ||
(!this._canvas.violationWarningButtonsEnabled && !this._canvas.qualityChangeContainersEnabled) ||
itemHandler.getViolationContainer() != null)
return;
if (!this._canvas.violationWarningButtonsEnabled &&
this._canvas.qualityChangeContainersEnabled &&
!(itemHandler instanceof ImageItemHandler) &&
!(itemHandler instanceof PlainTextItemHandler))
return;
var violationContainer = document.createElement("div");
var violationContainerClass = this._canvas.violationContainerCssClass;
if (violationContainerClass != null && violationContainerClass !== "")
(_a = violationContainer.classList).add.apply(_a, __spread(violationContainerClass.split(" ")));
itemHandler.setViolationContainer(violationContainer);
if (this._canvas.qualityChangeContainersEnabled
&& (itemHandler instanceof ImageItemHandler || (itemHandler instanceof PlaceholderItemHandler && itemHandler.item.barcodeFormat == null))) {
var qualityChangeContainer = document.createElement("div");
violationContainer.appendChild(qualityChangeContainer);
var qualityChangeContainerCssClass = this._canvas.qualityChangeContainerCssClass;
if (qualityChangeContainerCssClass != null && qualityChangeContainerCssClass !== "")
(_b = qualityChangeContainer.classList).add.apply(_b, __spread(qualityChangeContainerCssClass.split(" ")));
var qualityChangeScaleBar = document.createElement("div");
qualityChangeContainer.appendChild(qualityChangeScaleBar);
var qualityChangeScaleBarCssClass = this._canvas.qualityChangeScaleBarCssClass;
if (qualityChangeScaleBarCssClass != null && qualityChangeScaleBarCssClass !== "")
(_c = qualityChangeScaleBar.classList).add.apply(_c, __spread(qualityChangeScaleBarCssClass.split(" ")));
var qualityChangeInfoBar = document.createElement("div");
qualityChangeContainer.appendChild(qualityChangeInfoBar);
var qualityChangeInfoBarCssClass = this._canvas.qualityChangeInfoBarCssClass;
if (qualityChangeInfoBarCssClass != null && qualityChangeInfoBarCssClass !== "") {
(_d = qualityChangeInfoBar.classList).add.apply(_d, __spread(qualityChangeInfoBarCssClass.split(" ")));
}
itemHandler.qualityChangeContainer = qualityChangeContainer;
itemHandler.qualityChangeScaleBar = qualityChangeScaleBar;
itemHandler.qualityChangeInfoBar = qualityChangeInfoBar;
}
if (this._canvas.violationWarningButtonsEnabled) {
var violationClass = this._canvas.violationWarningButtonCssClass;
var violationWarningButton = document.createElement("button");
violationWarningButton.innerHTML = "\n <svg width=\"24\" height=\"24\" class=\"warning-svg\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.29 3.86001L1.82002 18C1.64539 18.3024 1.55299 18.6453 1.55201 18.9945C1.55103 19.3437 1.64151 19.6871 1.81445 19.9905C1.98738 20.2939 2.23675 20.5468 2.53773 20.7239C2.83871 20.901 3.18082 20.9962 3.53002 21H20.47C20.8192 20.9962 21.1613 20.901 21.4623 20.7239C21.7633 20.5468 22.0127 20.2939 22.1856 19.9905C22.3585 19.6871 22.449 19.3437 22.448 18.9945C22.4471 18.6453 22.3547 18.3024 22.18 18L13.71 3.86001C13.5318 3.56611 13.2807 3.32313 12.9812 3.15449C12.6817 2.98585 12.3438 2.89726 12 2.89726C11.6563 2.89726 11.3184 2.98585 11.0188 3.15449C10.7193 3.32313 10.4683 3.56611 10.29 3.86001V3.86001Z\" fill=\"currentColor\" stroke=\"black\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12 9V13\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12 17H12.01\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg width=\"24\" height=\"24\" class=\"good-svg\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" fill=\"currentColor\" stroke=\"black\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M16.5 9L10.3125 15L7.5 12.2727\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n ";
violationWarningButton.type = "button";
if (violationClass != null && violationClass !== "")
(_e = violationWarningButton.classList).add.apply(_e, __spread(violationClass.split(" ")));
else
violationWarningButton.innerText = "Quality";
addPointerEventsStopPropagation(violationWarningButton);
var violationWarningButtonClickHandler = itemHandler.getViolationWarningButtonClickHandler();
violationWarningButton.addEventListener("click", violationWarningButtonClickHandler);
itemHandler.setViolationWarningButton(violationWarningButton);
violationContainer.appendChild(violationWarningButton);
}
this._whitespace.appendChild(violationContainer);
this.updateViolationContainer(itemHandler, true, viewer);
};
CanvasElementHandler.prototype.removeViolationContainer = function (handler) {
if (handler == null)
return;
var violationWarningButton = handler.getViolationWarningButton();
if (violationWarningButton != null) {
removePointerEventsStopPropagation(violationWarningButton);
violationWarningButton.remove();
handler.setViolationWarningButton(null);
}
if (handler instanceof ImageItemHandler || handler instanceof PlaceholderItemHandler) {
var qualityChangeContainer = handler.qualityChangeContainer;
if (qualityChangeContainer != null) {
qualityChangeContainer.remove();
handler.qualityChangeContainer = null;
handler.qualityChangeScaleBar = null;
handler.qualityChangeInfoBar = null;
}
}
var violationContainer = handler.getViolationContainer();
if (violationContainer != null) {
violationContainer.remove();
handler.setViolationContainer(null);
}
};
CanvasElementHandler.prototype.updateViolationContainer = function (itemHandler, updatePosition, viewer) {
if (updatePosition === void 0) { updatePosition = false; }
if (itemHandler == null ||
itemHandler.getViolationContainer() == null)
return;
var isQualityChangeContainerEnabled = (itemHandler instanceof ImageItemHandler || itemHandler instanceof PlaceholderItemHandler);
var qualityChangeContainer = isQualityChangeContainerEnabled ? itemHandler.qualityChangeContainer : null;
var violationWarningButton = itemHandler.getViolationWarningButton();
if (viewer.previewMode || !itemHandler.isVisible() || itemHandler.locked || !this._isDefaultInputHandler) {
if (qualityChangeContainer != null) {
qualityChangeContainer.style.visibility = "hidden";
}
if (violationWarningButton != null) {
violationWarningButton.style.visibility = "hidden";
}
return;
}
if (this._canvas.violationWarningButtonsEnabled && violationWarningButton != null) {
violationWarningButton.style.visibility = "visible";
violationWarningButton.style.pointerEvents = "auto";
var isItemHandlerSelected = this._selection.isOnlyThisItemHandlerSelected(itemHandler);
if (isItemHandlerSelected) {
violationWarningButton.classList.add("active");
}
else {
violationWarningButton.classList.remove("active");
}
}
if (this._canvas.qualityChangeContainersEnabled && qualityChangeContainer != null) {
qualityChangeContainer.style.visibility = "visible";
if (this._showQualityChangeContainer(itemHandler))
CanvasElementHandler.showElement(qualityChangeContainer);
else
CanvasElementHandler.hideElement(qualityChangeContainer);
}
if (!updatePosition)
return;
this.updateViolationContainerPosition(itemHandler, viewer);
};
CanvasElementHandler.prototype.updateViolationContainerPosition = function (itemHandler, viewer) {
if (viewer == null || this._parent == null || itemHandler == null || itemHandler.item == null ||
(!this._canvas.violationWarningButtonsEnabled && !this._canvas.qualityChangeContainersEnabled) ||
itemHandler.getViolationContainer() == null)
return;
var rectangle = RotatedRectangleF.getRectWithOffset(itemHandler.rectangle, this._offset);
rectangle = CanvasElementHandler.rotateRectangle(rectangle, this._viewer);
var z = viewer.zoom;
var hs = viewer.screenXDpi / 72 * z;
var vs = viewer.screenYDpi / 72 * z;
var rectWidth = Math.floor(rectangle.width * hs);
var rectHeight = Math.floor(rectangle.height * vs);
var violationWarningButton = itemHandler.getViolationWarningButton();
var violationContainer = itemHandler.getViolationContainer();
var targetContainer = violationContainer != null ? violationContainer : violationWarningButton;
var containerWidth = targetContainer.offsetWidth;
var containerHeight = targetContainer.offsetHeight;
var abovePositionMultiplier = 3.5;
var isPositionAboveObject = (containerWidth * abovePositionMultiplier) > rectWidth ||
(containerHeight * abovePositionMultiplier) > rectHeight;
var margin = 8;
var offsetX = (isPositionAboveObject ? -containerWidth / 2 : margin) + containerWidth / 2;
var offsetY = (isPositionAboveObject ? -containerHeight : margin) + containerHeight / 2;
var offsetPoint = new PointF(offsetX, offsetY);
offsetPoint.rotate(rectangle.angle);
var containerPosition = CoordinatesConvertUtils.workspaceToControlPoint(rectangle.getUpperLeftCorner(), viewer);
var whitespaceDiv = viewer.whitespaceDiv;
var viewerElement = viewer.element;
containerPosition.x += offsetPoint.x -
whitespaceDiv.offsetLeft -
containerWidth / 2 +
viewerElement.scrollLeft;
containerPosition.y += offsetPoint.y -
whitespaceDiv.offsetTop -
containerHeight / 2 +
viewerElement.scrollTop;
containerPosition.x = Math.max(0, containerPosition.x);
containerPosition.y = Math.max(0, containerPosition.y);
var rightDiff = containerPosition.x + containerWidth - viewer.whitespaceDiv.offsetWidth;
if (rightDiff > 0) {
containerPosition.x -= rightDiff;
}
var bottomDiff = containerPosition.y + containerHeight - viewer.whitespaceDiv.offsetHeight;
if (bottomDiff > 0) {
containerPosition.y -= bottomDiff;
}
violationContainer.style.left = containerPosition.x + "px";
violationContainer.style.top = containerPosition.y + "px";
violationContainer.style.position = "absolute";
var violationWarningButton = itemHandler.getViolationWarningButton();
if (violationWarningButton == null)
return;
var isModifyHandlerOperation = this._selection.isDragging || this._selection.isResizing || this._selection.isRotating;
var showViolationWarning = itemHandler.isVisible() && !isModifyHandlerOperation;
violationWarningButton.style.visibility = showViolationWarning ? "visible" : "hidden";
};
CanvasElementHandler.prototype._addTextEditorDiv = function () {
document.execCommand("styleWithCSS");
var style = document.createElement("style");
style.type = "text/css";
style.innerHTML =
"#" + this._textEditorId + " { -webkit-user-select: text; user-select: text; } \n #" + this._textEditorId + " p { margin: 0px; line-height: normal; }\n #" + this._textEditorId + " p:first-child::first-line { line-height: 1; }";
document.head.appendChild(style);
this._viewer.add_zoomed(this._onZoomedScrolledDelegate);
this._viewer.add_scrolled(this._onZoomedScrolledDelegate);
};
CanvasElementHandler.prototype._removeTextEditorDiv = function () {
if (this._textEditorDiv == null)
return;
this._removeTextEditorDivFromDom();
this._textEditorDiv = null;
this._viewer.remove_zoomed(this._onZoomedScrolledDelegate);
this._viewer.remove_scrolled(this._onZoomedScrolledDelegate);
};
CanvasElementHandler.prototype._appendTextEditorDivToDom = function () {
this._textEditorDiv = document.createElement("div");
this._textEditorDiv.id = this._textEditorId;
this._textEditorDiv.style.display = "flex";
this._textEditorDiv.style.position = "absolute";
this._textEditorDiv.style.zIndex = "1";
this._textEditorDiv.style.backgroundColor = "transparent";
this._textEditorDiv.style.overflow = "hidden";
this._textEditorDiv.style.cursor = "text";
this._textEditorDiv.addEventListener("dblclick", this._stopPropagationFnc);
this._textEditorDiv.addEventListener("click", this._stopPropagationFnc);
this._textEditorDiv.addEventListener("mousedown", this._stopPropagationFnc);
this._textEditorDiv.addEventListener("mousemove", this._stopPropagationFnc);
this._textEditorDiv.addEventListener("mouseup", this._stopPropagationFnc);
this._textEditorDiv.addEventListener("keydown", this._stopPropagationFnc);
this._textEditorDiv.addEventListener("keyup", this._stopPropagationFnc);
this._parent.parentElement.parentElement.parentElement.appendChild(this._textEditorDiv);
this._textEditorInnerDiv = document.createElement("div");
this._textEditorInnerDiv.style.display = "block";
this._textEditorInnerDiv.contentEditable = "true";
this._textEditorDiv.appendChild(this._textEditorInnerDiv);
};
CanvasElementHandler.prototype._removeTextEditorDivFromDom = function () {
this._textEditorDiv.removeEventListener("dblclick", this._stopPropagationFnc);
this._textEditorDiv.removeEventListener("click", this._stopPropagationFnc);
this._textEditorDiv.removeEventListener("mousedown", this._stopPropagationFnc);
this._textEditorDiv.removeEventListener("mousemove", this._stopPropagationFnc);
this._textEditorDiv.removeEventListener("mouseup", this._stopPropagationFnc);
this._textEditorDiv.removeEventListener("keydown", this._stopPropagationFnc);
this._textEditorDiv.removeEventListener("keyup", this._stopPropagationFnc);
this._textEditorDiv.remove();
};
Object.defineProperty(CanvasElementHandler.prototype, "textEditorDiv", {
get: function () {
return this._textEdit