@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
1,221 lines • 79.9 kB
JavaScript
import * as Convert from "@aurigma/design-atoms-model/Utils/Convert";
import { defaults } from "@aurigma/utils-js";
import { EventWithSenderArg, EventObject, Item, WrappingMode, Exception, RectangleF, PointF, RotatedRectangleF, Path, EqualsOfFloatNumbers, Environment, Surface } from "@aurigma/design-atoms-model";
import { MobileTextEditor, NewTextEditor, toTextWhizzPath } from "@aurigma/design-atoms-text";
import { PathHandler } from "./ItemHandlers/PathHandler";
import { PlaceholderItemHandler } from "./ItemHandlers/PlaceholderItemHandler";
import { LayerCollection } from "./LayerCollection";
import { DragNDropHandler } from "./DragNDropHandler";
import { RotateHandler } from "./RotateHandler";
import { Cursor } from "./Utils/Common";
import { UpdateStatus } from "./UpdateStatus";
import { BaseRectangleItemHandler } from "./ItemHandlers/BaseRectangleItemHandler";
import { CanvasData } from "./CanvasData";
import { Layer } from "./Layer";
import { BoundedTextItemHandler } from "./ItemHandlers/BoundedTextItemHandler";
import { HandlerFactoryByItem } from "./ItemHandlers/HandlerFactoryByItem";
import { PathBoundedTextItemHandler } from "./ItemHandlers/PathBoundedTextItemHandler";
import { HoverHandler } from "./Input/InputHandler/Default/HoverHandler";
import { CanvasElementHandler } from "./CanvasElementHandler";
import { CanvasRenderer } from "./CanvasRenderer";
import { SnapLinesHandler } from "./Viewer/SnapLinesHandler";
import { GroupItemHandler } from "./ItemHandlers/GroupItemHandler";
import { FontRegistry } from "./InPlace/FontRegistry";
import { NewBaseTextItemHandler, NewBoundedTextItemHandler } from "./ItemHandlers";
import { WebGLTextRenderer } from "./InPlace/WebGLTextRenderer";
import { Ctx2dTextRenderer } from "./InPlace/Ctx2dTextRenderer";
import { TextEditorMode } from "./Viewer/Interfaces";
import { Translations } from "./Viewer/Translations";
import { FrontEndLogger, LogSource } from "./Services/FrontEndLogger";
import { CoordinatesConvertUtils } from "./Utils/CoordinatesConvertUtils";
import { HitTestManager } from "./Services/HitTestManager";
import { SelectionHandler } from "./Services/Selection/SelectionHandler";
import { RubberbandHandler } from "./Input/InputHandler/Default/RubberbandHandler";
import { FloatingToolbarManager } from "./Services/FloatingToolbar/FloatingToolbarManager";
import { TextEditorRenderer } from "./InPlace/TextEditorRenderer";
import { InputTextValidator } from "./InPlace/InputTextValidator";
import { Clipboard } from "./InPlace/Clipboard";
import { ViewportHandler } from "./Viewer/ViewportHandler";
import { SpotlightHandler } from "./Canvas/SpotlightHandler";
import { ViolationContainersHandler } from "./Viewer/ViolationContainersHandler";
import { TextEditorController } from "./InPlace";
import { ItemsCommand } from "@aurigma/design-atoms-interfaces";
/**
* Represents the main host object containing a stack of layers.
*
* This client-side class corresponds to the server-side class `Canvas` and provides access to its primary members in TypeScript.
*/
export class Canvas {
/** @internal */
constructor(viewer) {
var _a, _b;
this._clipboard = null;
this._violationWarningButtonCssClass = "da-violation-icon";
this._goodViolationIconCssClass = "da-violation-icon-good";
this._warningViolationIconCssClass = "da-violation-icon-warning";
this._violationBadIconCssClass = "da-violation-icon-bad";
this._qualityChangeContainerCssClass = "da-quality-change-container";
this._violationContainerCssClass = "da-violation-container";
this._qualityChangeScaleBarCssClass = "da-quality-change-scale-bar";
this._qualityBadToWarningChangeScaleBarCssClass = "da-bad-to-warning";
this._qualityWarningToGoodChangeScaleBarCssClass = "da-warning-to-good";
this._qualityBadToGoodChangeScaleBarCssClass = "da-bad-to-good";
this._qualityNoAnimationChangeScaleBarCssClass = "da-no-animation";
this._qualityChangeInfoBarCssClass = "da-quality-change-info-bar";
this._background = null;
this._initialized = false;
this._updateCalled = false;
this._isRedrawPaused = false;
this._redrawRequested = false;
this._pause = 0;
this._minFontSize = 0.1;
this._status = UpdateStatus.ready; //?
this._simpleMode = true;
this._ignorePermissionsMode = false;
this._textEditorRenderer = null;
this._onScrollEvent = new EventObject();
this._zoomChangedEvent = new EventObject();
this._workspaceSizeChangedEvent = new EventWithSenderArg();
this._beforeReplaceItemHandlerEvent = new EventObject();
this._afterReplaceItemHandlerEvent = new EventObject();
this._onSelectionLockedEvent = new EventObject();
this._errorInput = false;
this._readonlyCanvasMode = false;
this.redrawDesign = () => {
if (this._isRedrawPaused)
return;
this._canvasRenderer.redrawActiveCanvas(this.layers.toArray(), this._canvasElementHandler.viewportActiveCanvas, this.workspace, this.productHandler, this.offset);
this._redrawSelectionCanvas();
};
this._onBeforeReplaceItemHandler = (handler) => {
this._beforeReplaceItemHandlerEvent.fire(handler);
};
this._onAfterReplaceItemHandler = (handler) => {
this._afterReplaceItemHandlerEvent.fire(handler);
};
this._onHoverChanged = () => {
this.redraw();
};
this._onItemRemoved = ({ item }) => {
if (!(item instanceof Item))
return;
const handler = this.handlerFactory.get(item);
if (this.isItemHandlerSelected(handler))
this.removeSelectedItemHandler(handler);
handler.canvas = null;
this.handlerFactory.delete(handler);
};
this._onContainersChanged = (data) => {
for (let removedContainer of data.removed) {
for (let removedItem of removedContainer.items) {
this._onItemRemoved({ item: removedItem });
}
}
this._updateLayers();
for (let newContainer of data.added)
newContainer.items.add_itemRemoved(this._onItemRemoved);
for (let removedContainer of data.removed)
removedContainer.items.remove_itemRemoved(this._onItemRemoved);
this.redraw();
};
this._updateLayers = () => {
this.layers.clear();
this.layers.addRange(this._viewer.containersFlatList.map(c => new Layer(c, this)));
this._layersUpdatedEvent.notify(this, {});
};
this._onServiceImageContainerLoaded = (s) => {
this.redraw();
};
this._onCurrentItemHandlerChanged = (itemHandler) => {
if (this.viewer.inputHandlerManager.isDefault && itemHandler == null)
this._viewer.setCursor(Cursor.defaultCursor);
this._currentItemHandlerChangedEvent.notify(itemHandler);
};
this._setRendererLoadingImageUrl = (sender, args) => {
this._canvasRenderer.setLoadingImageUrl(sender.loadingImageUrl);
};
this._onTextLimitsEvent = (e) => {
this._lastLimitsEvent = e;
if (e.isLimitsBroken || e.isPastePrevented) {
this.unsubscribeLimitsMessage();
this.changeTextEditorDivOutlineColor(true);
this._errorInput = true;
clearTimeout(Number(this._errorInputTimerId));
this._errorInputTimerId = setTimeout(this._finishInputErrorMessage, 800);
}
this.redrawDesign();
};
this._ontextMetricsChanged = (e) => {
this.redrawDesign();
};
this._finishInputErrorMessage = () => {
this.changeTextEditorDivOutlineColor(false);
this._errorInput = false;
this.subscribeLimitsMessage();
this.redrawDesign();
};
this._onInteractiveZonesStateChanged = () => {
this.redrawDesign();
};
this._viewer = viewer;
this._prevWorkspaceSize = { width: 0, height: 0 };
this._hitTestManager = new HitTestManager(this);
this._snapLinesHandler = new SnapLinesHandler();
this._selection = new SelectionHandler(this._hitTestManager, this, this._snapLinesHandler, viewer.interactiveZonesHandler);
this._dndHandler = new DragNDropHandler(this, this.viewer, this._hitTestManager);
this._hoverHandler = new HoverHandler(this._viewer.eventManager);
this._rotateHandler = new RotateHandler(this, this.viewer);
this._rubberbandHandler = new RubberbandHandler();
this._viewportHandler = new ViewportHandler(this, viewer);
this.handlerFactory = new HandlerFactoryByItem(this, {
create: (itemHandler, textWhizz) => new TextEditorController(itemHandler, textWhizz, this.textRenderer, this.activeTextCanvasHandler, this.viewer.configuration, this._fontRegistry, this.viewer.colorParser, this.viewer.textFormattingEnabled, () => this.textEditor)
}, this._viewer.colorPreviewService, this._viewer.colorParser);
this._spotlightHandler = new SpotlightHandler(this.handlerFactory);
this._canvasElementHandler = new CanvasElementHandler(this.viewer, this._selection, this._dndHandler, this._rotateHandler, { handleButtonEnabled: true });
this._canvasRenderer = new CanvasRenderer(this._selection, this._dndHandler, (_a = viewer.configuration) === null || _a === void 0 ? void 0 : _a.handlers, this._rubberbandHandler, this._viewportHandler, this._spotlightHandler, this._hoverHandler, this._snapLinesHandler, this._canvasElementHandler, this.viewer.interactiveZonesHandler);
this._violationContainersHandler = new ViolationContainersHandler(this._canvasElementHandler, this, this.viewer);
this.viewer.eventManager.addMaskedContainersChanged(() => this.redraw());
// Data
this.layers = new LayerCollection(this);
// Appearance
this._workspaceWidth = 72.0;
this._workspaceHeight = 72.0;
this._zoom = 1.0;
this._targetDpi = null;
this._hiddenFieldID = "";
this._parent = null;
this._document = document;
this._mouseMoveTimeout = 100;
this._disableSmoothing = false;
this._placeholderButtonGroupCssClass = null;
this._selectImageButtonCssClass = null;
this._selectBarcodeButtonCssClass = null;
this._doneButtonCssClass = null;
this._handleButtonCssClass = null;
this._bigButtonGroupCssClass = null;
this.translations = new Translations();
this.translations.valuesUpdatedEvent.add(this._onTranslationsChanged.bind(this)); // should be removed somewhere
this._backgroundImage = null;
this._marginColor = "rgba(100,255,100,1)";
this._marginWidth = 0;
this._leftMargin = 0.25 * 72;
this._rightMargin = 0.25 * 72;
this._topMargin = 0.25 * 72;
this._bottomMargin = 0.25 * 72;
this._maxFontSize = null;
this._minFontSize = null;
this._maxLeading = null;
this._minLeading = null;
this._constrainedMarginEnabled = false;
this._keyEventEnabled = true;
this._selectionColor = "rgba(0,0,255,0.7)";
this._selectionWidth = 2;
this._suppressOutOfRegionManipulation = true;
// Events
this._initialization = false;
this._onSelectedItemHandlersDeletingDelegate;
this._onSelectedItemHandlersChangedDelegate;
//save counts of figures: rectangles, texts, ellipses, images, lines
this._tags = {};
this._ready = false;
this._service = null;
this._initializedEvent = new EventWithSenderArg();
this._currentItemHandlerChangedEvent = new EventObject();
this._selectedItemHandlersChangedEvent = new EventWithSenderArg();
this._dragNDropDoneEvent = new EventWithSenderArg();
this._dragNDropStartingEvent = new EventWithSenderArg();
this._dragNDropPerformedEvent = new EventWithSenderArg();
this._readyEvent = new EventWithSenderArg();
this._layersUpdatedEvent = new EventWithSenderArg();
this._autoPlaceholderEditModeEnabled = false;
this.handlerFactory.beforeReplaceItemHandlerEvent.add(this._onBeforeReplaceItemHandler);
this.handlerFactory.afterReplaceItemHandlerEvent.add(this._onAfterReplaceItemHandler);
this._hoverHandler.hoverChanged.add(this._onHoverChanged);
this._initContainersObservation();
this._floatingToolbarManager = new FloatingToolbarManager(this._canvasElementHandler, this._viewer, this, this._selection);
this._rubberbandHandler.addOnRubberbandChanged(this.redrawDesign);
this._selection.addCurrentItemChanged(this._onCurrentItemHandlerChanged);
(_b = this.viewer.designAtomsApiClient) === null || _b === void 0 ? void 0 : _b.loadingImageUrlChanged.add(this._setRendererLoadingImageUrl);
this.viewer.interactiveZonesHandler.stateChangedEvent.add(this._onInteractiveZonesStateChanged);
}
get readonlyCanvasMode() {
return this._readonlyCanvasMode;
}
set readonlyCanvasMode(value) {
this._readonlyCanvasMode = value;
}
get canvasItemHoverEnabled() {
return this._canvasRenderer.style.canvasItemHoverEnabled;
}
set canvasItemHoverEnabled(value) {
this._canvasRenderer.style.canvasItemHoverEnabled = value;
}
get canvasElementSize() {
return this._canvasElementSize;
}
get floatingToolbarManager() {
return this._floatingToolbarManager;
}
get snapLinesHandler() {
return this._snapLinesHandler;
}
get hoverHandler() {
return this._hoverHandler;
}
get selection() {
return this._selection;
}
get rubberbandHandler() {
return this._rubberbandHandler;
}
get rotateHandler() {
return this._rotateHandler;
}
get history() {
return this._history;
}
set history(value) {
this._history = value;
}
get viewerConfiguration() {
return this._viewer.configuration;
}
set viewerConfiguration(config) {
this._canvasRenderer.conf = config === null || config === void 0 ? void 0 : config.handlers;
this.snapLinesHandler.setConfiguration(config === null || config === void 0 ? void 0 : config.snapLines);
this.floatingToolbarManager.configuration = config.floatingToolbar;
this._updateCanvasElementHandlerConf(config.floatingToolbar);
this.violationWarningButtonsEnabled = config.violationService.violationWarningButtonsEnabled;
this.qualityChangeContainersEnabled = config.violationService.qualityChangeContainersEnabled;
}
get dndHandler() {
return this._dndHandler;
}
get hiddenFieldID() {
return this._hiddenFieldID;
}
set hiddenFieldID(value) {
this._hiddenFieldID = value;
}
get service() {
return this._service;
}
set service(value) {
if (this._service != null) {
this._service.imageLoaderService.removeImageContainerLoaded(this._onServiceImageContainerLoaded);
}
this._service = value;
this._setRendererLoadingImageUrl(this.viewer.designAtomsApiClient, {});
if (this._service != null) {
this._service.imageLoaderService.addImageContainerLoaded(this._onServiceImageContainerLoaded);
}
}
get viewer() {
return this._viewer;
}
get activeTextCanvasHandler() {
return this._canvasElementHandler;
}
get hitTestManager() {
return this._hitTestManager;
}
get textWhizz() {
return this._textWhizz;
}
get fontRegistry() {
return this._fontRegistry;
}
get textEditor() {
return this._textEditor;
}
set textEditor(value) {
if (this._textEditor === value)
return;
if (this._textEditor != null)
this._textEditor.dispose();
this._textEditor = value;
}
get textInputIssueUserConfirmationDelegate() {
return this._textInputIssueUserConfirmationDelegate;
}
get textRenderer() {
return this._textRenderer;
}
get simpleMode() {
return this._simpleMode;
}
set simpleMode(value) {
this._simpleMode = value;
this.clearSelectedItemHandlers();
this.redraw();
}
get ignorePermissionsMode() {
return this._ignorePermissionsMode;
}
set ignorePermissionsMode(value) {
this._ignorePermissionsMode = value;
this.getAllItemHandlers().forEach(h => {
h.resetPermissions();
h.update();
});
this.redraw();
}
get offset() {
return this._offset;
}
set offset(value) {
if (value != null && value.equals(this._offset) || value == null && this.offset != null)
return;
this._offset = value;
this._canvasElementHandler.offset = value;
if (this._textRenderer != null)
this._textRenderer.offset = value;
this.redraw();
}
get ready() {
return this._ready;
}
/** Gets an object containing numbers of lines, rectangles, ellipses, texts, images. */
get tags() {
/// <summary>Gets or sets custom data.</summary>
/// <value type="Object">The custom data.</value>
/// <remarks><para>This property corresponds to <see cref="P:Canvas.Tags">Canvas.Tags</see> server-side member.</para></remarks>
return this._tags;
}
/** Sets an object containing numbers of lines, rectangles, ellipses, texts, images. */
set tags(tags) {
this._tags = tags;
}
get width() {
/// <summary>Gets the width of the canvas taking into account screen horizontal resolution and zoom value.</summary>
/// <value type="Number">The width of the canvas.</value>
return this._workspaceWidth * this._zoom * Environment.screenDpi / 72;
}
get height() {
/// <summary>Gets the height of the canvas taking into account screen vertical resolution and zoom value.</summary>
/// <value type="Number">The height of the canvas.</value>
return this._workspaceHeight * this._zoom * Environment.screenDpi / 72;
}
get keyEventEnabled() {
/// <summary>Gets or sets the value indicating whether the both key-up and key-down events are enabled.</summary>
/// <value type="Boolean"><strong>true</strong> if the key-up and key-down events are enabled; otherwise <strong>false</strong>.</value>
return this._keyEventEnabled;
}
set keyEventEnabled(v) {
this._keyEventEnabled = v;
}
get marginColor() {
/// <summary>Gets or sets a color of the outer margin of the canvas.</summary>
/// <value type="String">The color value specified as a hex representation of the RGB triad in HTML-style syntax (#rrggbb) which specifies a color of the outer margin of the canvas.</value>
/// <remarks><para>This property corresponds to <see cref="P:Canvas.MarginColor">Canvas.MarginColor</see> server-side member.</para></remarks>
return this._marginColor;
}
set marginColor(v) {
this._marginColor = v;
}
get marginWidth() {
/// <summary>Gets or sets a width of the outer margin of the canvas.</summary>
/// <value type="Number">The width of the margin of the canvas.</value>
/// <remarks><para>This property corresponds to <see cref="P:Canvas.MarginWidth">Canvas.MarginWidth</see> server-side member.</para></remarks>
return this._marginWidth;
}
set marginWidth(v) {
this._marginWidth = v;
}
get selectionColor() {
return this._selectionColor;
}
set selectionColor(value) {
this._selectionColor = value;
}
get selectionWidth() {
return this._selectionWidth;
}
set selectionWidth(value) {
this._selectionWidth = value;
}
get margin() {
/// <summary>Gets or sets the outer margin of the canvas.</summary>
/// <value type="Number">The margin of the canvas.</value>
/// <remarks><para>This property corresponds to <see cref="P:Canvas.Margin">Canvas.Margin</see> server-side member.</para></remarks>
return Math.min(this._leftMargin, this._topMargin, this._rightMargin, this._bottomMargin);
}
set margin(v) {
this._leftMargin = v;
this._rightMargin = v;
this._topMargin = v;
this._bottomMargin = v;
}
get leftMargin() {
return this._leftMargin;
}
set leftMargin(v) {
if (this._leftMargin === v)
return;
this._leftMargin = v;
}
get rightMargin() {
return this._rightMargin;
}
set rightMargin(v) {
if (this._rightMargin === v)
return;
this._rightMargin = v;
}
get topMargin() {
return this._topMargin;
}
set topMargin(v) {
if (this._topMargin === v)
return;
this._topMargin = v;
}
get bottomMargin() {
return this._bottomMargin;
}
set bottomMargin(v) {
if (this._bottomMargin === v)
return;
this._bottomMargin = v;
}
set constrainedMarginEnabled(v) {
this._constrainedMarginEnabled = v;
}
get constrainedMarginEnabled() {
/// <summary>Gets or sets the value indicating whether it is possible to move v-objects beyond the bounds of the canvas.</summary>
/// <value type="Boolean"><strong>true</strong> if it is possible to move v-objects beyond the bounds of the canvas; otherwise, <strong>false</strong>.</value>
/// <remarks><para>This property corresponds to <see cref="P:Canvas.ConstrainedMarginEnabled">Canvas.ConstrainedMarginEnabled</see> server-side member.</para></remarks>
return this._constrainedMarginEnabled;
}
get targetDpi() {
return this._targetDpi;
}
set targetDpi(v) {
this._targetDpi = v;
}
set suppressOutOfRegionManipulation(v) {
this._suppressOutOfRegionManipulation = v;
}
get suppressOutOfRegionManipulation() {
return this._suppressOutOfRegionManipulation;
}
set violationWarningButtonsEnabled(v) {
this._violationContainersHandler.violationWarningButtonsEnabled = v;
}
get violationWarningButtonsEnabled() {
return this._violationContainersHandler.violationWarningButtonsEnabled;
}
set qualityChangeContainersEnabled(v) {
this._violationContainersHandler.qualityChangeContainersEnabled = v;
}
get qualityChangeContainersEnabled() {
return this._violationContainersHandler.qualityChangeContainersEnabled;
}
get maxFontSize() {
return this._maxFontSize;
}
set maxFontSize(v) {
this._maxFontSize = v;
}
get minFontSize() {
return this._minFontSize;
}
set minFontSize(v) {
if (v === undefined || v < 0.1)
v = 0.1;
this._minFontSize = v;
}
get maxLeading() {
return this._maxLeading;
}
set maxLeading(v) {
this._maxLeading = v;
}
get minLeading() {
return this._minLeading;
}
set minLeading(v) {
this._minLeading = v;
}
//TODO: remove. (in scope of 0022547)
get status() {
/**
* Gets a current status of remote method calling.
*/
return this._status;
}
/** @internal */
get surfaceCanvas() {
return this._canvasElementHandler.viewportSurfaceCanvas;
}
get multipleSelectionEnabled() {
return this._selection.multipleSelectionEnabled;
}
set multipleSelectionEnabled(value) {
this._selection.multipleSelectionEnabled = value;
}
get mouseMoveTimeout() {
return this._mouseMoveTimeout;
}
set mouseMoveTimeout(value) {
this._mouseMoveTimeout = value;
}
get disableSmoothing() {
return this._disableSmoothing;
}
set disableSmoothing(value) {
this._disableSmoothing = value;
}
get previewMode() {
var _a, _b;
return (_b = (_a = this._canvasRenderer) === null || _a === void 0 ? void 0 : _a.previewMode) !== null && _b !== void 0 ? _b : false;
}
set previewMode(value) {
if (this._canvasRenderer == null)
throw new Exception("CanvasRenderer is not initialized!");
this._canvasRenderer.previewMode = value;
this.updateViolationContainers(true);
this.redraw();
}
set background(value) {
this._background = value;
this._updateBackgroundStyle();
}
get background() {
return this._background;
}
set backgroundImage(value) {
this._backgroundImage = value;
this._updateBackgroundStyle();
}
get workspaceWidth() {
return this._workspaceWidth;
}
get workspaceHeight() {
return this._workspaceHeight;
}
get initialization() {
return this._initialization;
}
get rotationGripColor() {
return this._canvasRenderer.style.rotationGripColor;
}
set rotationGripColor(v) {
this._canvasRenderer.style.rotationGripColor = v;
this.redrawSelection();
}
get resizeGripColor() {
return this._canvasRenderer.style.resizeGripColor;
}
set resizeGripColor(v) {
this._canvasRenderer.style.resizeGripColor = v;
this.redrawSelection();
}
get rotationGripSize() {
return this._canvasRenderer.style.rotationGripSize;
}
set rotationGripSize(v) {
this._canvasRenderer.style.rotationGripSize = v;
this.redrawSelection();
}
get resizeGripSize() {
return this._canvasRenderer.style.resizeGripSize;
}
set resizeGripSize(v) {
this._canvasRenderer.style.resizeGripSize = v;
this.redrawSelection();
}
get resizeGripLineColor() {
return this._canvasRenderer.style.resizeGripLineColor;
}
set resizeGripLineColor(value) {
this._canvasRenderer.style.resizeGripLineColor = value;
this.redrawSelection();
}
get hoverColor() {
return this._canvasRenderer.style.hover.color;
}
set hoverColor(value) {
this._canvasRenderer.style.hover.color = value;
this._canvasRenderer.style.hover.textColor = value;
this.redrawSelection();
}
get rotationGripLineColor() {
return this._canvasRenderer.style.rotationGripLineColor;
}
set rotationGripLineColor(value) {
this._canvasRenderer.style.rotationGripLineColor = value;
this.redrawSelection();
}
get rotationGripLineLength() {
return this._canvasRenderer.style.rotationGripLineLength;
}
set rotationGripLineLength(value) {
this._canvasRenderer.style.rotationGripLineLength = value;
this.redrawSelection();
}
get placeholderButtonGroupCssClass() {
return this._placeholderButtonGroupCssClass;
}
set placeholderButtonGroupCssClass(value) {
this._placeholderButtonGroupCssClass = value;
}
get style() {
return this._canvasRenderer.style;
}
set style(value) {
this._canvasRenderer.style = value;
}
get violationContainerCssClass() {
return this._violationContainerCssClass;
}
set violationContainerCssClass(value) {
this._violationContainerCssClass = value;
}
get selectImageButtonCssClass() {
return this._selectImageButtonCssClass;
}
set selectImageButtonCssClass(value) {
this._selectImageButtonCssClass = value;
}
get selectBarcodeButtonCssClass() {
return this._selectBarcodeButtonCssClass;
}
set selectBarcodeButtonCssClass(value) {
this._selectBarcodeButtonCssClass = value;
}
get handleButtonCssClass() {
return this._handleButtonCssClass;
}
set handleButtonCssClass(value) {
this._handleButtonCssClass = value;
}
get doneButtonCssClass() {
return this._doneButtonCssClass;
}
set doneButtonCssClass(value) {
this._doneButtonCssClass = value;
}
get violationWarningButtonCssClass() {
return this._violationWarningButtonCssClass;
}
set violationWarningButtonCssClass(value) {
this._violationWarningButtonCssClass = value;
}
get qualityChangeContainerCssClass() {
return this._qualityChangeContainerCssClass;
}
set qualityChangeContainerCssClass(value) {
this._qualityChangeContainerCssClass = value;
}
get qualityChangeScaleBarCssClass() {
return this._qualityChangeScaleBarCssClass;
}
set qualityChangeScaleBarCssClass(value) {
this._qualityChangeScaleBarCssClass = value;
}
get qualityBadToWarningChangeScaleBarCssClass() {
return this._qualityBadToWarningChangeScaleBarCssClass;
}
set qualityBadToWarningChangeScaleBarCssClass(value) {
this._qualityBadToWarningChangeScaleBarCssClass = value;
}
get qualityWarningToGoodChangeScaleBarCssClass() {
return this._qualityWarningToGoodChangeScaleBarCssClass;
}
set qualityWarningToGoodChangeScaleBarCssClass(value) {
this._qualityWarningToGoodChangeScaleBarCssClass = value;
}
get qualityBadToGoodChangeScaleBarCssClass() {
return this._qualityBadToGoodChangeScaleBarCssClass;
}
set qualityBadToGoodChangeScaleBarCssClass(value) {
this._qualityBadToGoodChangeScaleBarCssClass = value;
}
get qualityNoAnimationChangeScaleBarCssClass() {
return this._qualityNoAnimationChangeScaleBarCssClass;
}
set qualityNoAnimationChangeScaleBarCssClass(value) {
this._qualityNoAnimationChangeScaleBarCssClass = value;
}
get qualityChangeInfoBarCssClass() {
return this._qualityChangeInfoBarCssClass;
}
set qualityChangeInfoBarCssClass(value) {
this._qualityChangeInfoBarCssClass = value;
}
get bigButtonGroupCssClass() {
return this._bigButtonGroupCssClass;
}
set bigButtonGroupCssClass(value) {
this._bigButtonGroupCssClass = value;
}
get goodViolationIconCssClass() {
return this._goodViolationIconCssClass;
}
set goodViolationIconCssClass(value) {
this._goodViolationIconCssClass = value;
}
get warningViolationIconCssClass() {
return this._warningViolationIconCssClass;
}
set warningViolationIconCssClass(value) {
this._warningViolationIconCssClass = value;
}
get badViolationIconCssClass() {
return this._violationBadIconCssClass;
}
set badViolationIconCssClass(value) {
this._violationBadIconCssClass = value;
}
get zoom() {
return this._zoom;
}
set autoPlaceholderEditModeEnabled(value) {
if (value != undefined && value != null)
this._autoPlaceholderEditModeEnabled = value;
}
get autoPlaceholderEditModeEnabled() {
return this._autoPlaceholderEditModeEnabled;
}
get selectionVisibleRectangle() {
return this._selection.visibleRectangle;
}
get currentItemHandler() {
return this._selection.currentItemHandler;
}
get layers() {
return this._layers;
}
set layers(v) {
this._layers = v;
}
get parentElement() {
return this._parent;
}
get inPlaceEditingHandler() {
const currHandler = this.currentItemHandler;
return (this.textEditor != null &&
currHandler != null &&
currHandler instanceof NewBaseTextItemHandler &&
currHandler.isInEdit) ?
currHandler : null;
}
get mul() {
return this.zoom * 96 / 72;
}
get contentUpdatingPlaceholderItemHandler() {
var selectedPlaceholder = this.selectedPlaceholderItemHandler;
if (selectedPlaceholder != null && selectedPlaceholder.isContentUpdating())
return selectedPlaceholder;
return null;
}
get contentEditingPlaceholderItemHandler() {
var selectedPlaceholder = this.selectedPlaceholderItemHandler;
if (selectedPlaceholder != null && selectedPlaceholder.editing)
return selectedPlaceholder;
return null;
}
get selectedPlaceholderItemHandler() {
var selectedItemHandler = this.selectedHandler;
if (selectedItemHandler instanceof PlaceholderItemHandler) {
return selectedItemHandler;
}
return null;
}
get selectedHandler() {
var selectedItemHandlers = this.getSelectedItemHandlers();
if (selectedItemHandlers.length === 1) {
return selectedItemHandlers.getItem(0);
}
return null;
}
get isInitialized() {
return this._initialized;
}
get isUpdating() {
return false;
}
get isSelectionLocked() {
return this._selection.locked;
}
get isSelectionResizing() {
return this._selection.isResizing;
}
get isSelectionRotating() {
return this._selection.isRotating;
}
get isSelectionDragging() {
return this._selection.isDragging;
}
get isSelectionIdle() {
return this._selection.isIdle;
}
get designAtomsApiClient() {
var _a;
return (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.designAtomsApiClient;
}
get frontEndTextRenderingEnabled() {
return this.viewer.frontEndTextRenderingEnabled;
}
get productHandler() {
return this.viewer.productHandler;
}
get lastLimitsEvent() {
return this._lastLimitsEvent;
}
get errorInput() {
return this._errorInput;
}
get workspace() {
return {
width: this.workspaceWidth,
height: this.workspaceHeight,
zoom: this.zoom
};
}
get renderingConfigProvider() {
return this.viewer.renderingConfigProvider;
}
get contentAngle() {
return this._viewer.contentAngle;
}
get _drawSnapLines() {
return this.contentEditingPlaceholderItemHandler == null;
}
setCursor(value, onBody) {
this.viewer.setCursor(value, onBody);
}
ensureFocus() {
this.viewer.ensureFocus();
}
doesContainItem(item) {
if (item.parentContainer == null || !(item.parentContainer.parentComponent instanceof Surface))
return false;
const itemSurface = item.parentContainer.parentComponent;
return this._viewer.surface == itemSurface;
}
getItemHandler(item) {
return this.handlerFactory.get(item);
}
deleteItemHandler(itemHandler) {
this.handlerFactory.delete(itemHandler);
}
isDragSource(itemHandler) {
return this.dndHandler.isDragSource(itemHandler);
}
isDragTarget(itemHandler) {
return this.dndHandler.isDragTarget(itemHandler);
}
setTextWhizzModule(textWhizz) {
this._textWhizz = textWhizz;
this._canvasRenderer.setTextWhizzModule(textWhizz);
this._setFontRegistry(new FontRegistry(this._textWhizz, this.viewer.designAtomsApiClient));
this.handlerFactory.setFontRegistry(this._fontRegistry);
let staticTextCanvas = this._canvasElementHandler.staticTextCanvas;
const activeTextCanvas = this._canvasElementHandler.viewportActiveTextCanvas;
const isWebGLSupported = !Environment.IsFirefox() && this._textWhizz.isHardwareAccelerationAvailable(`#${staticTextCanvas.id}`);
if (!isWebGLSupported) {
staticTextCanvas = this._canvasElementHandler.replaceStaticTextCanvas();
console.warn("WebGL text rendering is not supported");
}
this._textRenderer = isWebGLSupported
? new WebGLTextRenderer(staticTextCanvas, activeTextCanvas, textWhizz, this.zoom, this.offset, this._viewportHandler, this._canvasRenderer.style.selection, this.viewer.rgbColorParser, this._canvasElementHandler)
: new Ctx2dTextRenderer(staticTextCanvas, activeTextCanvas, textWhizz, this.zoom, this.offset, this._viewportHandler, this._canvasRenderer.style.selection, this.viewer.rgbColorParser, this._canvasElementHandler);
this._textRenderer.setWorkspaceSize(this._workspaceWidth, this._workspaceHeight);
this._canvasRenderer.textRenderer = this._textRenderer;
if (this._textEditorRenderer)
this._textEditorRenderer.textRenderer = this._textRenderer;
this.getAllItemHandlers({ flatGroupItems: true }).forEach(h => {
if (h instanceof NewBaseTextItemHandler)
h.setTextWhizzModule(textWhizz, this.fontRegistry);
if (h instanceof BaseRectangleItemHandler)
h.onTextWhizzInit();
});
PathHandler.textWhizz = this._textWhizz;
}
initTextEditor(textEditor, fontService, useSimpleFontList, textInputIssueUserConfirmationDelegate) {
this._textInputIssueUserConfirmationDelegate = textInputIssueUserConfirmationDelegate;
if (textEditor === TextEditorMode.None)
this.textEditor = null;
else {
const isMobile = textEditor === TextEditorMode.Html || Environment.IsTouchDevice();
this.textEditor = isMobile
? this._createMobileEditor(fontService, useSimpleFontList)
: this._createTextWhizzEditor();
}
}
waitUpdate(itemHandlers = null) {
const allItemHandlers = itemHandlers != null ? itemHandlers : this.getAllItemHandlers();
return Promise.all(allItemHandlers.map(function (vo) {
return vo.waitUpdate();
}));
}
deleteSelectedItemHandlers(force = false) {
var canDeleteItemHandlers = true;
if (!canDeleteItemHandlers)
return;
let canDelete = true;
const selectedItemHandlers = this.getSelectedItemHandlers();
for (var i = 0; i < selectedItemHandlers.length; i++) {
var itemHandler = selectedItemHandlers.getItem(i);
if (!this._canDeleteItemHandler(itemHandler)) {
canDelete = false;
break;
}
}
if (!canDelete)
return;
this.viewer.commandManager.execute(ItemsCommand.deleteItems, {
items: selectedItemHandlers.toArray().map(h => h.item),
force: force
});
}
getAllItemHandlers(options) {
options = normalize(options);
const self = this;
return this.layers
.toArray()
.map(function (l) {
return l.itemHandlers.toArray();
})
.reduce(function (prev, current) {
return prev.concat(current);
}, [])
.reduce(function (arr, itemHandler) {
arr.push(itemHandler);
if (options.flatGroupItems && itemHandler instanceof GroupItemHandler)
arr.push(...itemHandler.getNestedItemHandlers());
return arr;
}, [])
.filter(function (vo) {
if (options.whiteListFilter(vo))
return true;
if (options.blackListFilter(vo))
return false;
var accept = true;
if (options.excludeGroupItems)
accept = accept && !(vo instanceof GroupItemHandler);
if (options.onlyVisible && accept) {
// ReSharper disable once ConditionIsAlwaysConst
accept = accept && vo.layer != null && vo.layer.visible;
accept = accept && vo.visible;
accept = accept && !vo.getPermissions().noShow;
}
if (options.onlyUnlocked && accept) {
accept = !vo.layer.locked && !vo.isLocked() && self.viewer.productHandler.isInteractive(vo.item);
}
if (options.onlyType && accept) {
if (!Array.isArray(options.onlyType))
options.onlyType = [options.onlyType];
accept = false;
options.onlyType.some((type) => {
if (vo instanceof type) {
accept = true;
return true;
}
});
}
return accept;
});
function normalize(options) {
if (options == null)
options = {};
return defaults(options, {
excludeGroupItems: false,
flatGroupItems: false,
onlyVisible: false,
onlyUnlocked: false,
whiteListFilter: function (vo) {
return false;
},
blackListFilter: function (vo) {
return false;
}
});
}
}
pauseUpdateTexts() {
this._pause += 1;
}
resumeUpdateTexts() {
this._pause -= 1;
if (this._pause <= 0) {
if (this._updateCalled)
this.updateTexts();
this._updateCalled = false;
this._pause = 0;
}
}
updateTexts(textToSkip = null) {
if (this._pause > 0) {
this._updateCalled = true;
return;
}
var isBounded = (vo) => {
return vo instanceof BoundedTextItemHandler || vo instanceof PathBoundedTextItemHandler || vo instanceof NewBoundedTextItemHandler;
};
var idToSkip = isBounded(textToSkip) ? textToSkip.uniqueId : null;
var layers = this.layers;
for (var i = 0, imax = layers.length; i < imax; i++) {
var layer = layers.getItem(i);
if (layer.visible) {
var itemHandlers = layer.flatItemHandlers;
for (var j = 0, jmax = itemHandlers.length; j < jmax; j++) {
var itemHandler = itemHandlers.getItem(j);
if (itemHandler.uniqueId !== idToSkip &&
isBounded(itemHandler) &&
itemHandler.visible &&
!itemHandler.getPermissions().noShow) {
this._updateWrappingRectangles(itemHandler);
}
}
}
}
}
setWorkspaceSize(width, height, updateButtonGroup) {
var _a;
if (EqualsOfFloatNumbers(this._workspaceWidth, width) && EqualsOfFloatNumbers(this._workspaceHeight, height))
return;
this._workspaceWidth = width;
this._workspaceHeight = height;
(_a = this._textRenderer) === null || _a === void 0 ? void 0 : _a.setWorkspaceSize(width, height);
this._workspaceSizeChangedEvent.notify(this, updateButtonGroup);
}
setZoom(value, preventEvent, options) {
var _a;
if (options == null)
options = {};
if (options.force == null)
options.force = false;
if (options.updateButtonGroup == null)
options.updateButtonGroup = true;
if (options.fullUpdate == null)
options.fullUpdate = true;
if (value !== this._zoom || options.force) {
this._zoom = value;
(_a = this._textRenderer) === null || _a === void 0 ? void 0 : _a.setZoom(this._zoom);
if (!this._initialization) {
this._updateCanvasElementSize(options.updateButtonGroup, options.fullUpdate);
this.redraw();
if (!preventEvent)
this._zoomChangedEvent.notify({ fullUpdate: options.fullUpdate });
}
}
}
calcPlatformLimitZoom() {
const zoom1PixelWidth = Convert.pointsToPixels(this.workspaceWidth, Environment.screenDpi);
const zoom1PixelHeight = Convert.pointsToPixels(this.workspaceHeight, Environment.screenDpi);
const getZoomForArea = (area) => Math.sqrt(area / (zoom1PixelWidth * zoom1PixelHeight));
const getMaxZoomForPixelWidthHeight = (width, height) => Math.min(width / zoom1PixelWidth, height / zoom1PixelHeight);
if (Environment.IsIos()) {
let thresholdCanvasArea;
var iosVersion = Environment.GetIosVersion();
if ((typeof iosVersion[0] === "number") &&
iosVersion[0] >= 9 &&
(typeof iosVersion[1] === "number") &&
iosVersion[1] >= 3) {
thresholdCanvasArea = 16000000;
}
else {
thresholdCanvasArea = 5000000;
}
return getZoomForArea(thresholdCanvasArea);
}
else {
if (Environment.IsIE() || Environment.IsEdge())
return getMaxZoomForPixelWidthHeight(8192, 8192);
if (Environment.IsGoogleChrome())
return Math.min(getMaxZoomForPixelWidthHeight(32767, 32767), getZoomForArea(268435456));
if (Environment.IsSafariOrSafariWebView())
return Math.min(getMaxZoomForPixelWidthHeight(32767, 32767));
if (Environment.IsFirefox())
return Math.min(getMaxZoomForPixelWidthHeight(32767, 32767), getZoomForArea(472907776));
}
return 2147483647; //default max int32
}
onScroll() {
this.redraw();
this.redrawActiveTexts();
this._onScrollEvent.notify();
}
updateSelection(force = false) {
this._selection.update(force);
}
getSelectedItemHandlers() {
return this._selection.selectedItemHandlers;
}
setSelectedItemHandlers(itemHandlers) {
this._selection.setSelectedItemHandlers(itemHandlers);
}
isItemHandlerSelected(itemHandler) {
return this._selection.isItemHandlerSelected(itemHandler);
}
isOnlyThisItemHandlerSelected(itemHandler) {
return this._selection.isOnlyThisItemHandlerSelected(itemHandler);
}
addSelectedItemHandler(itemHandler) {
this._selection.addSelectedItemHandler(itemHandler);
}
removeSelectedItemHandler(itemHandler) {
this._selection.removeSelectedItemHandler(itemHandler);
}
clearSelectedItemHandlers() {
this._selection.clearSelectedItemHandlers();
}
onDragNDropStarting(data) {
this._dragNDropStartingEvent.notify(this, data);
}
onDragNDropDone() {
this._dragNDropDoneEvent.notify(this);
}
onDragNDropPerformed(data) {
this._dragNDropPerformedEvent.notify(this, data);
this._currentItemHandlerChangedEvent.notify(this.currentItemHandler);
}
onSelectionLocked() {
this._onSelectionLockedEvent.notify(this);
}
enableSelection() {
this._selection.enable();
}
disableSelection() {
this._selection.disable();
}
getData(forService = false, layerId = null) {
var _a, _b;
/// <summary>Gets or sets serialized data of this canvas.</summary>
/// <value type="String">The string which represents a serialized data of this canvas.</value>
/// <remarks><para>This property corresponds to <see cref="P:Canvas.Data">Canvas.Data</see> server-side member.</para></remarks>
const data = new CanvasData(this, forService, layerId);
if (data.Z === 0) {
console.warn(`Canvas zoom is 0! Canvas: { w: ${this.width}, h: ${this.height}, ww: ${this.workspaceWidth}, wh: ${this.workspaceHeight}, elSize: {${(_a = this._canvasElementSize) === null || _a === void 0 ? void 0 : _a.width}, ${(_b = this._canvasElementSize) === null || _b === void 0 ? void 0 : _b.height}}]`, data, this._parent);
}
return data;
}
add_onScroll(h) {
this._onScrollEvent.add(h);
}
remove_onScroll(h) {
this._onScrollEvent.remove(h);
}
add_zoomChanged(h) {
this._zoomChangedEvent.add(h);
}
remove_zoomChanged(h) {
this._zoomChangedEvent.remove(h);
}
add_initialized(h) {
this._initializedEvent.add(h);
}
remove_initialized(h) {
this._initializedEvent.remove(h);
}
add_currentItemHandlerChanged(handler) {
this._currentItemHandlerChangedEvent.add(handler);
}
remove_currentItemHandlerChanged(handler) {
this._currentItemHandlerChangedEvent.remove(handler);
}
add_selectedItemHandlerChanged(handler) {
this._selectedItemHandlersChangedEvent.add(handl