@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,220 lines (1,219 loc) • 114 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
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 * as _ from "underscore";
import * as Convert from "@aurigma/design-atoms-model/Utils/Convert";
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.
*/
var Canvas = /** @class */ (function () {
/** @internal */
function Canvas(viewer) {
var _this = this;
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._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 = function () {
if (_this._isRedrawPaused)
return;
_this._canvasRenderer.redrawActiveCanvas(_this.layers.toArray(), _this._canvasElementHandler.viewportActiveCanvas, _this.workspace, _this.productHandler, _this.offset);
_this._redrawSelectionCanvas();
};
this._onBeforeReplaceItemHandler = function (handler) {
_this._beforeReplaceItemHandlerEvent.fire(handler);
};
this._onAfterReplaceItemHandler = function (handler) {
_this._afterReplaceItemHandlerEvent.fire(handler);
};
this._onHoverChanged = function () {
_this.redraw();
};
this._onItemRemoved = function (_a) {
var item = _a.item;
if (!(item instanceof Item))
return;
var handler = _this.handlerFactory.get(item);
if (_this.isItemHandlerSelected(handler))
_this.removeSelectedItemHandler(handler);
handler.canvas = null;
_this.handlerFactory.delete(handler);
};
this._onContainersChanged = function (data) {
var e_1, _a, e_2, _b, e_3, _c, e_4, _d;
try {
for (var _e = __values(data.removed), _f = _e.next(); !_f.done; _f = _e.next()) {
var removedContainer = _f.value;
try {
for (var _g = (e_2 = void 0, __values(removedContainer.items)), _h = _g.next(); !_h.done; _h = _g.next()) {
var removedItem = _h.value;
_this._onItemRemoved({ item: removedItem });
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
}
finally { if (e_2) throw e_2.error; }
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
}
finally { if (e_1) throw e_1.error; }
}
_this._updateLayers();
try {
for (var _j = __values(data.added), _k = _j.next(); !_k.done; _k = _j.next()) {
var newContainer = _k.value;
newContainer.items.add_itemRemoved(_this._onItemRemoved);
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_k && !_k.done && (_c = _j.return)) _c.call(_j);
}
finally { if (e_3) throw e_3.error; }
}
try {
for (var _l = __values(data.removed), _m = _l.next(); !_m.done; _m = _l.next()) {
var removedContainer = _m.value;
removedContainer.items.remove_itemRemoved(_this._onItemRemoved);
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (_m && !_m.done && (_d = _l.return)) _d.call(_l);
}
finally { if (e_4) throw e_4.error; }
}
_this.redraw();
};
this._updateLayers = function () {
_this.layers.clear();
_this.layers.addRange(_this._viewer.containersFlatList.map(function (c) { return new Layer(c, _this); }));
_this._layersUpdatedEvent.notify(_this, {});
};
this._onServiceImageContainerLoaded = function (s) {
_this.redraw();
};
this._onCurrentItemHandlerChanged = function (itemHandler) {
if (_this.viewer.inputHandlerManager.isDefault && itemHandler == null)
_this._viewer.setCursor(Cursor.defaultCursor);
_this._currentItemHandlerChangedEvent.notify(itemHandler);
};
this._setRendererLoadingImageUrl = function (sender, args) {
_this._canvasRenderer.setLoadingImageUrl(sender.loadingImageUrl);
};
this._onTextLimitsEvent = function (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 = function (e) {
_this.redrawDesign();
};
this._finishInputErrorMessage = function () {
_this.changeTextEditorDivOutlineColor(false);
_this._errorInput = false;
_this.subscribeLimitsMessage();
_this.redrawDesign();
};
this._onInteractiveZonesStateChanged = function () {
_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: function (itemHandler, textWhizz) {
return new TextEditorController(itemHandler, textWhizz, _this.textRenderer, _this.activeTextCanvasHandler, _this.viewer.configuration, _this._fontRegistry, _this.viewer.colorParser, _this.viewer.textFormattingEnabled, function () { return _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(function () { return _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;
this._status = UpdateStatus.ready;
//save counts of figures: rectangles, texts, ellipses, images, lines
this._tags = {};
this._ready = false;
this._service = null;
this._statusChangedEvent = new EventWithSenderArg();
this._callbackExceptionEvent = new EventWithSenderArg();
this._initializedEvent = new EventWithSenderArg();
this._invokingCallbackRequestEvent = 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);
}
Object.defineProperty(Canvas.prototype, "readonlyCanvasMode", {
get: function () {
return this._readonlyCanvasMode;
},
set: function (value) {
this._readonlyCanvasMode = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "canvasItemHoverEnabled", {
get: function () {
return this._canvasRenderer.style.canvasItemHoverEnabled;
},
set: function (value) {
this._canvasRenderer.style.canvasItemHoverEnabled = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "canvasElementSize", {
get: function () {
return this._canvasElementSize;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "floatingToolbarManager", {
get: function () {
return this._floatingToolbarManager;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "snapLinesHandler", {
get: function () {
return this._snapLinesHandler;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "hoverHandler", {
get: function () {
return this._hoverHandler;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "selection", {
get: function () {
return this._selection;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "rubberbandHandler", {
get: function () {
return this._rubberbandHandler;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "rotateHandler", {
get: function () {
return this._rotateHandler;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "history", {
get: function () {
return this._history;
},
set: function (value) {
this._history = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "viewerConfiguration", {
get: function () {
return this._viewer.configuration;
},
set: function (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;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "dndHandler", {
get: function () {
return this._dndHandler;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "hiddenFieldID", {
get: function () {
return this._hiddenFieldID;
},
set: function (value) {
this._hiddenFieldID = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "service", {
get: function () {
return this._service;
},
set: function (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);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "viewer", {
get: function () {
return this._viewer;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "activeTextCanvasHandler", {
get: function () {
return this._canvasElementHandler;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "hitTestManager", {
get: function () {
return this._hitTestManager;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "textWhizz", {
get: function () {
return this._textWhizz;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "fontRegistry", {
get: function () {
return this._fontRegistry;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "textEditor", {
get: function () {
return this._textEditor;
},
set: function (value) {
if (this._textEditor === value)
return;
if (this._textEditor != null)
this._textEditor.dispose();
this._textEditor = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "textInputIssueUserConfirmationDelegate", {
get: function () {
return this._textInputIssueUserConfirmationDelegate;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "textRenderer", {
get: function () {
return this._textRenderer;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "simpleMode", {
get: function () {
return this._simpleMode;
},
set: function (value) {
this._simpleMode = value;
this.clearSelectedItemHandlers();
this.redraw();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "ignorePermissionsMode", {
get: function () {
return this._ignorePermissionsMode;
},
set: function (value) {
this._ignorePermissionsMode = value;
this.getAllItemHandlers().forEach(function (h) {
h.resetPermissions();
h.update();
});
this.redraw();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.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;
this._canvasElementHandler.offset = value;
if (this._textRenderer != null)
this._textRenderer.offset = value;
this.redraw();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "ready", {
get: function () {
return this._ready;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "tags", {
/** Gets an object containing numbers of lines, rectangles, ellipses, texts, images. */
get: function () {
/// <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: function (tags) {
this._tags = tags;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "width", {
get: function () {
/// <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;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "height", {
get: function () {
/// <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;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "keyEventEnabled", {
get: function () {
/// <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: function (v) {
this._keyEventEnabled = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "marginColor", {
get: function () {
/// <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: function (v) {
this._marginColor = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "marginWidth", {
get: function () {
/// <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: function (v) {
this._marginWidth = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "selectionColor", {
get: function () {
return this._selectionColor;
},
set: function (value) {
this._selectionColor = value;
// fix !!!
//this.updateHoverDiv();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "selectionWidth", {
get: function () {
return this._selectionWidth;
},
set: function (value) {
this._selectionWidth = value;
// fix !!!
//this.updateHoverDiv();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "margin", {
get: function () {
/// <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: function (v) {
this._leftMargin = v;
this._rightMargin = v;
this._topMargin = v;
this._bottomMargin = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "leftMargin", {
get: function () {
return this._leftMargin;
},
set: function (v) {
if (this._leftMargin === v)
return;
this._leftMargin = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "rightMargin", {
get: function () {
return this._rightMargin;
},
set: function (v) {
if (this._rightMargin === v)
return;
this._rightMargin = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "topMargin", {
get: function () {
return this._topMargin;
},
set: function (v) {
if (this._topMargin === v)
return;
this._topMargin = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "bottomMargin", {
get: function () {
return this._bottomMargin;
},
set: function (v) {
if (this._bottomMargin === v)
return;
this._bottomMargin = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "constrainedMarginEnabled", {
get: function () {
/// <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;
},
set: function (v) {
this._constrainedMarginEnabled = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "targetDpi", {
get: function () {
return this._targetDpi;
},
set: function (v) {
this._targetDpi = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "suppressOutOfRegionManipulation", {
get: function () {
return this._suppressOutOfRegionManipulation;
},
set: function (v) {
this._suppressOutOfRegionManipulation = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "violationWarningButtonsEnabled", {
get: function () {
return this._violationContainersHandler.violationWarningButtonsEnabled;
},
set: function (v) {
this._violationContainersHandler.violationWarningButtonsEnabled = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "qualityChangeContainersEnabled", {
get: function () {
return this._violationContainersHandler.qualityChangeContainersEnabled;
},
set: function (v) {
this._violationContainersHandler.qualityChangeContainersEnabled = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "maxFontSize", {
get: function () {
return this._maxFontSize;
},
set: function (v) {
this._maxFontSize = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "minFontSize", {
get: function () {
return this._minFontSize;
},
set: function (v) {
if (v === undefined || v < 0.1)
v = 0.1;
this._minFontSize = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "maxLeading", {
get: function () {
return this._maxLeading;
},
set: function (v) {
this._maxLeading = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "minLeading", {
get: function () {
return this._minLeading;
},
set: function (v) {
this._minLeading = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "status", {
//TODO: remove. (in scope of 0022547)
get: function () {
/**
* Gets a current status of remote method calling.
*/
return this._status;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "surfaceCanvas", {
/** @internal */
get: function () {
return this._canvasElementHandler.viewportSurfaceCanvas;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "multipleSelectionEnabled", {
get: function () {
return this._selection.multipleSelectionEnabled;
},
set: function (value) {
this._selection.multipleSelectionEnabled = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "mouseMoveTimeout", {
get: function () {
return this._mouseMoveTimeout;
},
set: function (value) {
this._mouseMoveTimeout = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "disableSmoothing", {
get: function () {
return this._disableSmoothing;
},
set: function (value) {
this._disableSmoothing = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "previewMode", {
get: function () {
var _a, _b;
return (_b = (_a = this._canvasRenderer) === null || _a === void 0 ? void 0 : _a.previewMode) !== null && _b !== void 0 ? _b : false;
},
set: function (value) {
if (this._canvasRenderer == null)
throw new Exception("CanvasRenderer is not initialized!");
this._canvasRenderer.previewMode = value;
this.updateViolationContainers(true);
this.redraw();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "background", {
get: function () {
return this._background;
},
set: function (value) {
this._background = value;
this._updateBackgroundStyle();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "backgroundImage", {
set: function (value) {
this._backgroundImage = value;
this._updateBackgroundStyle();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "workspaceWidth", {
get: function () {
return this._workspaceWidth;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "workspaceHeight", {
get: function () {
return this._workspaceHeight;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "initialization", {
get: function () {
return this._initialization;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "rotationGripColor", {
get: function () {
return this._canvasRenderer.style.rotationGripColor;
},
set: function (v) {
this._canvasRenderer.style.rotationGripColor = v;
this.redrawSelection();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "resizeGripColor", {
get: function () {
return this._canvasRenderer.style.resizeGripColor;
},
set: function (v) {
this._canvasRenderer.style.resizeGripColor = v;
this.redrawSelection();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "rotationGripSize", {
get: function () {
return this._canvasRenderer.style.rotationGripSize;
},
set: function (v) {
this._canvasRenderer.style.rotationGripSize = v;
this.redrawSelection();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "resizeGripSize", {
get: function () {
return this._canvasRenderer.style.resizeGripSize;
},
set: function (v) {
this._canvasRenderer.style.resizeGripSize = v;
this.redrawSelection();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "resizeGripLineColor", {
get: function () {
return this._canvasRenderer.style.resizeGripLineColor;
},
set: function (value) {
this._canvasRenderer.style.resizeGripLineColor = value;
this.redrawSelection();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "hoverColor", {
get: function () {
return this._canvasRenderer.style.hover.color;
},
set: function (value) {
this._canvasRenderer.style.hover.color = value;
this._canvasRenderer.style.hover.textColor = value;
this.redrawSelection();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "rotationGripLineColor", {
get: function () {
return this._canvasRenderer.style.rotationGripLineColor;
},
set: function (value) {
this._canvasRenderer.style.rotationGripLineColor = value;
this.redrawSelection();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "rotationGripLineLength", {
get: function () {
return this._canvasRenderer.style.rotationGripLineLength;
},
set: function (value) {
this._canvasRenderer.style.rotationGripLineLength = value;
this.redrawSelection();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "placeholderButtonGroupCssClass", {
get: function () {
return this._placeholderButtonGroupCssClass;
},
set: function (value) {
this._placeholderButtonGroupCssClass = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "style", {
get: function () {
return this._canvasRenderer.style;
},
set: function (value) {
this._canvasRenderer.style = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "violationContainerCssClass", {
get: function () {
return this._violationContainerCssClass;
},
set: function (value) {
this._violationContainerCssClass = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "selectImageButtonCssClass", {
get: function () {
return this._selectImageButtonCssClass;
},
set: function (value) {
this._selectImageButtonCssClass = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "selectBarcodeButtonCssClass", {
get: function () {
return this._selectBarcodeButtonCssClass;
},
set: function (value) {
this._selectBarcodeButtonCssClass = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "handleButtonCssClass", {
get: function () {
return this._handleButtonCssClass;
},
set: function (value) {
this._handleButtonCssClass = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "doneButtonCssClass", {
get: function () {
return this._doneButtonCssClass;
},
set: function (value) {
this._doneButtonCssClass = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "violationWarningButtonCssClass", {
get: function () {
return this._violationWarningButtonCssClass;
},
set: function (value) {
this._violationWarningButtonCssClass = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "qualityChangeContainerCssClass", {
get: function () {
return this._qualityChangeContainerCssClass;
},
set: function (value) {
this._qualityChangeContainerCssClass = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "qualityChangeScaleBarCssClass", {
get: function () {
return this._qualityChangeScaleBarCssClass;
},
set: function (value) {
this._qualityChangeScaleBarCssClass = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "qualityBadToWarningChangeScaleBarCssClass", {
get: function () {
return this._qualityBadToWarningChangeScaleBarCssClass;
},
set: function (value) {
this._qualityBadToWarningChangeScaleBarCssClass = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "qualityWarningToGoodChangeScaleBarCssClass", {
get: function () {
return this._qualityWarningToGoodChangeScaleBarCssClass;
},
set: function (value) {
this._qualityWarningToGoodChangeScaleBarCssClass = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "qualityBadToGoodChangeScaleBarCssClass", {
get: function () {
return this._qualityBadToGoodChangeScaleBarCssClass;
},
set: function (value) {
this._qualityBadToGoodChangeScaleBarCssClass = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "qualityNoAnimationChangeScaleBarCssClass", {
get: function () {
return this._qualityNoAnimationChangeScaleBarCssClass;
},
set: function (value) {
this._qualityNoAnimationChangeScaleBarCssClass = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "qualityChangeInfoBarCssClass", {
get: function () {
return this._qualityChangeInfoBarCssClass;
},
set: function (value) {
this._qualityChangeInfoBarCssClass = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "bigButtonGroupCssClass", {
get: function () {
return this._bigButtonGroupCssClass;
},
set: function (value) {
this._bigButtonGroupCssClass = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "goodViolationIconCssClass", {
get: function () {
return this._goodViolationIconCssClass;
},
set: function (value) {
this._goodViolationIconCssClass = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Canvas.prototype, "warningViolationIconCssClass", {
get: function () {
return this._warningViolationIconCssClass;
},