@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
904 lines • 58 kB
JavaScript
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";
export class CanvasElementHandler {
get offset() { return this._offset; }
set offset(value) {
if (value != null && value.equals(this._offset) || value == null && this.offset != null)
return;
this._offset = value;
}
constructor(_viewer, _selection, _dndHandler, _rotateHandler, config) {
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 = (element) => {
if (this._whitespace == null) {
this._childrenToAdd.push(element);
return;
}
this._whitespace.appendChild(element);
};
this._showQualityChangeContainer = (itemHandler) => {
const violationSetting = itemHandler.item.violationSettings;
if (!violationSetting.allowImageQuality)
return false;
if (itemHandler instanceof PlaceholderItemHandler && itemHandler.isStubOrEmpty())
return false;
const image = ItemUtils.getImageItem(itemHandler.item);
const isVectorContent = image != null && image.source.isVector;
if (isVectorContent)
return false;
const 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 = () => {
const current = this._selection.currentItemHandler;
if (current != null) {
const textAlignment = current.item instanceof PlainTextItem ? current.item.alignment : null;
const textVerticalAlignment = current.item instanceof BoundedTextItem ? current.item.verticalAlignment : null;
let 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(); };
const id = this._viewer.id;
if (id == null)
throw new InvalidOperationException("Element id cannot be null or undefined");
this._staticTextCanvasId = `${id}_staticText`;
this.setConf(config);
}
setConf(conf) {
this._config = Object.assign({ handleButtonEnabled: true }, (conf || {}));
}
get _canvas() {
//use for settings only. Remove after complete refactoring
return this._viewer.canvas;
}
addStyles() {
this._addButtonStyles();
this._addDndStyle();
this._rotateHandler.addRotationStyle();
}
_addButtonStyles() {
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);
}
_addDndStyle() {
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);
}
addTextEditorStyles(css) {
const style = document.createElement("link");
style.type = "text/css";
style.rel = "stylesheet";
style.href = css;
document.head.appendChild(style);
}
_addStaticTextCanvas(width, height) {
this.staticTextCanvas = this._createCanvasElement(this._staticTextCanvasId, width, height);
this.staticTextCanvas.style.visibility = "hidden";
this._parent.appendChild(this.staticTextCanvas);
}
get viewportSurfaceCanvas() {
return this._viewportSurfaceCanvas;
}
get viewportInactiveCanvas() {
return this._viewportInactiveCanvas;
}
get viewportActiveCanvas() {
return this._viewportActiveCanvas;
}
get viewportDesignCanvas() {
return this._viewportDesignCanvas;
}
get viewportActiveTextCanvas() {
return this._viewportActiveTextCanvas;
}
get viewportCursorCanvas() {
return this._viewportCursorCanvas;
}
get viewportSelectionCanvas() {
return this._viewportSelectionCanvas;
}
get viewportTextureCanvas() {
if (this._viewportTextureCanvas == null) {
this._viewportTextureCanvas = this._appendViewportCanvas("texture");
this._viewportTextureCanvas.style["opacity"] = "0";
}
return this._viewportTextureCanvas;
}
get viewportMemoryCanvas() {
if (this._viewportMemoryCanvas == null) {
this._viewportMemoryCanvas = this._appendViewportCanvas("memory");
this._viewportMemoryCanvas.style["opacity"] = "0";
}
return this._viewportMemoryCanvas;
}
_appendViewportCanvas(name) {
const element = this._viewer.element;
var el = element.parentNode;
var doc = el.ownerDocument;
const canvas = this._createViewportCanvas(doc, element.id, name);
this._viewportDiv.appendChild(canvas);
return canvas;
}
addViewport(viewport) {
var _a;
//console.log(`addViewport`);
const element = this._viewer.element;
var el = element.parentNode;
var style = " -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px)";
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.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);
}
_createViewportCanvas(document, parentId, suffix) {
const 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;
}
updateViewport() {
var _a;
if (this._viewportDiv == null)
return;
//console.log(`updateViewport`);
const 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}`);
}
_updateViewportCanvas(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`;
}
removeViewport() {
const element = this._viewer.element;
var el = element.parentNode;
if (this._viewportDiv)
el.removeChild(this._viewportDiv);
}
addElement(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);
if (this._viewer.frontEndTextRenderingEnabled)
this._addTextEditorDiv();
this._addDndDiv();
this._childrenToAdd.forEach(this.addChild);
this._childrenToAdd = [];
}
replaceStaticTextCanvas() {
var _a;
const width = this.staticTextCanvas.width;
const height = this.staticTextCanvas.height;
const 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;
}
createCanvas(size) {
const rnd = Math.random();
const now = performance.now();
const id = `tmp-${rnd}-${now}`.replace(/./g, '-');
const canvas = this._createCanvasElement(id, size.width, size.height);
canvas.style.visibility = "hidden";
this._parent.appendChild(canvas);
return canvas;
}
removeElement() {
this._removeTextEditorDiv();
this._removeDndDiv();
}
moveActiveTextCanvasOnTop() {
this._viewportDiv.insertBefore(this.viewportActiveTextCanvas, this.viewportDesignCanvas);
}
moveActiveTextCanvasBack() {
this._viewportDiv.insertBefore(this.viewportActiveTextCanvas, this.viewportInactiveCanvas);
}
//#region dnd
_addDndDiv() {
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);
}
_removeDndDiv() {
if (this._dndDiv == null)
return;
this._dndDiv.remove();
this._dndDiv = null;
}
showDnd(point, image, angle) {
this._dndDiv.querySelectorAll("div[id^=ccDndThumb]").forEach((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((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((elem) => {
elem.classList.add("outside-canvas");
});
}
else {
this._dndDiv.querySelectorAll("div[id^=ccDndThumb]").forEach((elem) => {
elem.classList.remove("outside-canvas");
});
}
if (this._dndHandler.isDragOver()) {
this._dndDiv.querySelectorAll("div[id^=ccDndThumb]").forEach((elem) => {
elem.classList.add("drag-over");
});
}
else {
this._dndDiv.querySelectorAll("div[id^=ccDndThumb]").forEach((elem) => {
elem.classList.remove("drag-over");
});
}
}
hideDnd() {
this._dndDiv.style.visibility = "hidden";
this._dndDiv.querySelectorAll("div[id^=ccDndThumb]").forEach((elem) => {
elem.style.visibility = "hidden";
});
}
removeChilds(element) {
this._whitespace.removeChild(element);
}
//#endregion
//#region placeholder buttons
addPlaceholderButtonGroup(placeholder, viewer) {
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 !== "")
editDiv.classList.add(...divClass.split(" "));
if (Environment.IsTouchDevice()) {
var bigButtonGroupCssClass = this._canvas.bigButtonGroupCssClass;
if (bigButtonGroupCssClass != null && bigButtonGroupCssClass !== "")
editDiv.classList.add(...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 !== "")
selectButton.classList.add(...selectBarcodeButtonCssClass.split(" "));
else
selectButton.innerText = "Select";
}
else {
var selectImageButtonCssClass = this._canvas.selectImageButtonCssClass;
if (selectImageButtonCssClass != null && selectImageButtonCssClass !== "")
selectButton.classList.add(...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 !== "")
handleButton.classList.add(...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 !== "")
doneDiv.classList.add(...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 !== "")
doneButton.classList.add(...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);
}
removePlaceholderButtonGroup(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;
}
updatePlaceholderButtonGroup(placeholder, viewer) {
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;
const isShowSelectButton = () => {
let disableByRotation = this._selection.isRotating && this._selection.isItemHandlerSelected(placeholder);
return !disableByRotation && placeholder.isStubOrEmpty() && placeholder.showSelectButton();
};
const isHandleButtonShouldBeShowed = () => {
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;
};
const isDndStarted = () => {
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);
}
updatePlaceholderButtonGroupPosition(placeholder, viewer) {
if (viewer == null || this._parent == null || placeholder == null ||
placeholder.placeholderButtonGroup == null)
return;
let rect = RotatedRectangleF.getRectWithOffset(placeholder.currentRectangle, this._offset);
rect = CanvasElementHandler.rotateRectangle(rect, this._viewer);
const controlCenter = CoordinatesConvertUtils.workspaceToWhiteSpacePoint(new PointF(rect.centerX, rect.centerY), viewer);
const placeholderButtonGroup = placeholder.placeholderButtonGroup;
const x = (controlCenter.x - placeholderButtonGroup.offsetWidth / 2);
const y = (controlCenter.y - placeholderButtonGroup.offsetHeight / 2);
placeholderButtonGroup.style.position = "absolute";
placeholderButtonGroup.style.left = `${x}px`;
placeholderButtonGroup.style.top = `${y}px`;
}
//#endregion
//#region violation container
addViolationContainer(itemHandler, viewer) {
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 !== "")
violationContainer.classList.add(...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 !== "")
qualityChangeContainer.classList.add(...qualityChangeContainerCssClass.split(" "));
var qualityChangeScaleBar = document.createElement("div");
qualityChangeContainer.appendChild(qualityChangeScaleBar);
var qualityChangeScaleBarCssClass = this._canvas.qualityChangeScaleBarCssClass;
if (qualityChangeScaleBarCssClass != null && qualityChangeScaleBarCssClass !== "")
qualityChangeScaleBar.classList.add(...qualityChangeScaleBarCssClass.split(" "));
var qualityChangeInfoBar = document.createElement("div");
qualityChangeContainer.appendChild(qualityChangeInfoBar);
var qualityChangeInfoBarCssClass = this._canvas.qualityChangeInfoBarCssClass;
if (qualityChangeInfoBarCssClass != null && qualityChangeInfoBarCssClass !== "") {
qualityChangeInfoBar.classList.add(...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 = `
<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>
<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>
`;
violationWarningButton.type = "button";
if (violationClass != null && violationClass !== "")
violationWarningButton.classList.add(...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);
}
removeViolationContainer(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);
}
}
updateViolationContainer(itemHandler, updatePosition = false, viewer) {
if (itemHandler == null ||
itemHandler.getViolationContainer() == null)
return;
const 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);
}
updateViolationContainerPosition(itemHandler, viewer) {
if (viewer == null || this._parent == null || itemHandler == null || itemHandler.item == null ||
(!this._canvas.violationWarningButtonsEnabled && !this._canvas.qualityChangeContainersEnabled) ||
itemHandler.getViolationContainer() == null)
return;
let 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;
const isModifyHandlerOperation = this._selection.isDragging || this._selection.isResizing || this._selection.isRotating;
let showViolationWarning = itemHandler.isVisible() && !isModifyHandlerOperation;
violationWarningButton.style.visibility = showViolationWarning ? "visible" : "hidden";
}
_addTextEditorDiv() {
document.execCommand("styleWithCSS");
const style = document.createElement("style");
style.type = "text/css";
style.innerHTML =
`#${this._textEditorId} { -webkit-user-select: text; user-select: text; }
#${this._textEditorId} p { margin: 0px; line-height: normal; }
#${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);
}
_removeTextEditorDiv() {
if (this._textEditorDiv == null)
return;
this._removeTextEditorDivFromDom();
this._textEditorDiv = null;
this._viewer.remove_zoomed(this._onZoomedScrolledDelegate);
this._viewer.remove_scrolled(this._onZoomedScrolledDelegate);
}
_appendTextEditorDivToDom() {
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);
}
_removeTextEditorDivFromDom() {
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();
}
get textEditorDiv() {
return this._textEditorDiv;
}
get textEditorInnerDiv() {
return this._textEditorInnerDiv;
}
showTextEditor(rectangle, textAlignment, html, borderWidth, borderColor, fillColor, opacity, textVerticalAlignment, isVertical) {
this._appendTextEditorDivToDom();
this._updateTextEditorPosition(rectangle, textAlignment, borderWidth, textVerticalAlignment, isVertical);
this._textEditorDiv.style.border = `solid ${borderWidth}pt ${borderColor}`;
this._textEditorDiv.style.backgroundColor = `${this._canvas.style.selection.fillColor}`;
this._textEditorDiv.style.opacity = `${opacity}`;
this._textEditorDiv.style.setProperty("outline", `${this._canvas.selectionWidth}px ${this._getOutlineStyleFromDashPattern(this._canvas.style.selection.dashPattern)} ${this._canvas.style.selection.color}`, "important");
this._textEditorInnerDiv.innerHTML = html;
this._textEditorInnerDiv.focus();
}
_getOutlineStyleFromDashPattern(dp) {
if (!dp || dp.length < 1)
return "solid";
if (dp[0] < 5)
return "dotted";
if (dp[0] > 5)
return "dashed";
return "solid";
}
changeTextEditorDivOutlineColor(toRed) {
if (this._textEditorDiv)
this._textEditorDiv.style.setProperty("outline", `${this._canvas.selectionWidth}px ${this._getOutlineStyleFromDashPattern(this._canvas.style.selection.dashPattern)} ${toRed ? "rgba(255,0,0,1)" : this._canvas.style.selection.color}`, "important");
}
hideTextEditor() {
if (this._textEditorDiv == null)
return;
this._removeTextEditorDivFromDom();
}
getTextEditorFormattedText() {
if (this._textEditorDiv == null || this._textEditorInnerDiv == null)
return "";
return this._textEditorInnerDiv.innerText.trim() === "" ? "" : this._textEditorInnerDiv.innerHTML;
}
_updateTextEditorPosition(rectangle, textAlignment, borderWidth, verticalAlignment, isVertical) {
if (rectangle == null || this._textEditorDiv == null)
return;
const viewer = this._viewer;
if (borderWidth > 0) {
rectangle.width += 2 * borderWidth;
rectangle.height += 2 * borderWidth;
}
rectangle = CanvasElementHandler.rotateRectangle(rectangle, viewer);
if (textAlignment == null) {
//BoundedText
const location = CoordinatesConvertUtils.productToControlPoint(rectangle.location, viewer, viewer.canvas.offset).round();
this._textEditorDiv.style.left = `0px`;
this._textEditorDiv.style.top = `0px`;
this._textEditorDiv.style.width = `${rectangle.width}pt`;
this._textEditorDiv.style.height = `${rectangle.height}pt`;
this._textEditorDiv.style.transformOrigin = `left top`;
this._textEditorDiv.style.transform = `translate(${location.x}px, ${location.y}px) scale(${viewer.zoom}) rotate(${rectangle.angle}deg)`;
this._textEditorInnerDiv.style.left = `0px`;
this._textEditorInnerDiv.style.top = `0px`;
this._textEditorInnerDiv.style.width = `${rectangle.width}pt`;
}
else {
//PlainText
this._textEditorDiv.style.top = `0px`;
this._textEditorDiv.style.width = "max-content";
this._textEditorDiv.style.height = "max-content";
if (isVertical) {
let rightTop = CoordinatesConvertUtils.productToControlPoint(rectangle.getUpperRightCorner(), this._viewer, this._viewer.canvas.offset).round();
let dx = rightTop.x - viewer.width;
if (textAlignment == TextAlignment.Center) {
const center = CoordinatesConvertUtils.productToControlPoint(rectangle.center, viewer, viewer.canvas.offset).round();
this._textEditorDiv.style.left = `${center.x}px`;
this._textEditorDiv.style.top = `${center.y}px`;
this._textEditorDiv.style.transformOrigin = `center center`;
this._textEditorDiv.style.transform = `translate(-50%, -50%) scale(${viewer.zoom}) rotate(${rectangle.angle}deg)`;
}
else if (textAlignment == TextAlignment.Right) {
const bottom = CoordinatesConvertUtils.productToControlPoint(rectangle.getBottomRightCorner(), viewer, viewer.canvas.offset).round();
dx = bottom.x - viewer.width;
this._textEditorDiv.style.right = `0px`;
this._textEditorDiv.style.top = `${bottom.y}px`;
this._textEditorDiv.style.transformOrigin = `right bottom`;
this._textEditorDiv.style.transform = `translate(${dx}px, -100%) scale(${viewer.zoom}) rotate(${rectangle.angle}deg)`;
}
else {
this._textEditorDiv.style.right = `0px`;
this._textEditorDiv.style.transformOrigin = `right top`;
this._textEditorDiv.style.transform = `translate(${dx}px, ${rightTop.y}px) scale(${viewer.zoom}) rotate(${rectangle.angle}deg)`;
}
}
else {
let leftTop = CoordinatesConvertUtils.productToControlPoint(rectangle.getUpperLeftCorner(), this._viewer, this._viewer.canvas.offset).round();
if (textAlignment == TextAlignment.Center) {
const center = CoordinatesConvertUtils.productToControlPoint(rectangle.center, viewer, viewer.canvas.offset).round();
this._textEditorDiv.style.left = `${center.x}px`;
this._textEditorDiv.style.top = `${center.y}px`;
this._textEditorDiv.style.transformOrigin = `center center`;
this._textEditorDiv.style.transform = `translate(-50%, -50%) scale(${viewer.zoom}) rotate(${rectangle.angle}deg)`;
}
else if (textAlignment == TextAlignment.Right) {
const right = CoordinatesConvertUtils.productToControlPoint(rectangle.getUpperRightCorner(), viewer, viewer.canvas.offset).round();
this._textEditorDiv.style.left = `${right.x}px`;
this._textEditorDiv.style.transformOrigin = `right top`;
this._textEditorDiv.style.transform = `translate(-100%, ${right.y}px) scale(${viewer.zoom}) rotate(${rectangle.angle}deg)`;
}
else {
this._textEditorDiv.style.left = `0px`;
this._textEditorDiv.style.transformOrigin = `left top`;
this._textEditorDiv.style.transform = `translate(${leftTop.x}px, ${leftTop.y}px) scale(${viewer.zoom}) rotate(${rectangle.angle}deg)`;
}
}
}
switch (verticalAlignment) {
case TextVerticalAlignment.Bottom:
this._textEditorDiv.style.alignItems = "flex-end";
break;
case TextVerticalAlignment.Center:
this._textEditorDiv.style.alignItems = "center";
break;
case TextVerticalAlignment.Top:
default:
this._textEditorDiv.style.alignItems = "flex