@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
969 lines • 71.5 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
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 __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spread = (this && this.__spread) || function () {
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
return ar;
};
var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
import { Canvas } from "../Canvas";
import { BaseViewer, ZoomParams } from "./BaseViewer";
import { UpdateStatus } from "../UpdateStatus";
import { ScrollBarsStyle } from "./ScrollBarsStyle";
import { Utils as AjcUtils } from "../Utils/Common";
import { ZoomMode } from "./ZoomMode";
import { ViewportAlignment } from "./ViewportAlignment";
import { Surface } from "@aurigma/design-atoms-model/Product/Surface";
import { ArgumentNullException, Exception } from "@aurigma/design-atoms-model/Exception";
import { urlCombine } from "@aurigma/design-atoms-model/Utils/Utils";
import { SafetyLinesHandler } from "./SafetyLinesHandler";
import { WatermarkHandler } from "./WatermarkHandler";
import { GridHandler } from "./GridHandler";
import { EventObject } from "@aurigma/design-atoms-model/EventObject";
import { PointF, EqualsOfFloatNumbers, SizeF } from "@aurigma/design-atoms-model/Math/index";
import Environment from "@aurigma/design-atoms-model/Utils/Environment";
import * as Convert from "@aurigma/design-atoms-model/Utils/Convert";
import { CurvedTextItem, BaseTextItem } from "@aurigma/design-atoms-model/Product/Items";
import { NewBaseTextItemHandler } from "../ItemHandlers";
import { ViewerConfiguration } from "./ViewerConfiguration";
import { RenderingType, PrintArea } from "@aurigma/design-atoms-model/Product";
import * as _ from "underscore";
import { LicenseHandler } from "../License";
import { Configuration } from "@aurigma/design-atoms-model/Configuration";
import { VariableItemHelper } from "../Services/VariableItemHelper";
import { EventManager } from "../Services/EventManager";
import { ProductThemeManager } from "../Services/ProductTheme/ProductThemeManager";
import { History } from "../History";
import { SnapshotHandler } from "../History/SnapshotHandler";
import { CommandManager } from "../Commands/CommandManager";
import { ProductHandler } from "../Services/ProductHandler";
import { TextEditorMode } from "./Interfaces";
import { ItemsDataApplier } from "../Services/ItemsDataApplier";
import { SurfaceHandler } from "../Services/SurfaceHandler";
import { PrintAreaBoundsType } from "@aurigma/design-atoms-model/Product/PrintAreaBoundsType";
import { CanvasViolationVisualizer } from "./../Services/ViolationService/CanvasViolationVisualizer";
import { FrontEndLogger, LogSource } from "../Services/FrontEndLogger";
import { ViolationServiceFactory } from "../Services/ViolationService/ViolationServiceFactory";
import { RotateHandler } from "../RotateHandler";
import { InputHandlerManager } from "./../Input/InputHandler/InputHandlerManager";
import { InputHandlerType } from "./../Input/InputHandler/InputHandlerType";
import { InputType } from "./../Input/InputManager/IInputManager";
import { DesignAtomsApiClient } from "../Services/DesignAtomsApiClient";
import { PathHandler } from "../ItemHandlers/PathHandler";
import { ItemUtils } from "../Utils/ItemUtils";
import { Service } from "../Services/Service";
import { ViewerInitializer } from "./ViewerInitializer";
import { ScrollbarStyleHandler } from "./ScrollbarStyleHandler";
import { ColorPreviewService } from "../Services/ColorPreviewService";
import { CmykColorParser, ColorParser, LabColorParser, NamedColorConverter, RgbColorParser, SpotColorParser } from "../Serialization/Color";
import { ProductPreviewService } from "../Services/ProductPreview";
import { InteractiveZonesHandler } from "./InteractiveZonesHandler";
import { RenderingConfigProvider } from "../RenderingConfigProvider";
var Viewer = /** @class */ (function (_super) {
__extends(Viewer, _super);
function Viewer(_a) {
var holderElement = _a.holderElement, backendUrl = _a.backendUrl, _b = _a.surface, surface = _b === void 0 ? new Surface(null, null, null, [new PrintArea()]) : _b, _c = _a.canvasBackground, canvasBackground = _c === void 0 ? "chess" : _c, _d = _a.rulerEnabled, rulerEnabled = _d === void 0 ? true : _d, _e = _a.frontEndTextRenderingEnabled, frontEndTextRenderingEnabled = _e === void 0 ? false : _e, _f = _a.zone, zone = _f === void 0 ? null : _f, _g = _a.productViewerPartId, productViewerPartId = _g === void 0 ? "ProductViewer" : _g, _h = _a.ignorePermissionsMode, ignorePermissionsMode = _h === void 0 ? false : _h, _j = _a.keyInputElement, keyInputElement = _j === void 0 ? null : _j, _k = _a.readonlyCanvasMode, readonlyCanvasMode = _k === void 0 ? false : _k;
var _l;
var _this = _super.call(this, zone) || this;
_this.containersFlatListChangedEvent = new EventObject();
_this._containersFlatList = [];
_this._textFormattingEnabled = true;
_this._ignorePermissionsModeEnabled = false;
_this._viewerInitializer = new ViewerInitializer();
_this._updateItem = function (item) {
if (item instanceof CurvedTextItem)
item.fitToPathStep = _this.configuration.text.fitToPathStep;
};
_this._onHistoryChanged = function (sender, propertyName) {
_this._history.addSnapshot();
};
_this._surface = null;
_this._onCurrentSurfaceContainerAdded = function (data) {
if (data.item.name === Configuration.MAIN_CONTAINER_NAME && data.item.renderingType === RenderingType.Normal)
_this.userEditContainer = data.item;
};
_this._onSurfacePropertyChanged = function (s, property) {
switch (property) {
case "mockup":
_this._updateContainersFlatList();
break;
case "width":
case "height":
var bounds = _this._surfaceHandler.getBounds(PrintAreaBoundsType.Total);
_this._canvas.setWorkspaceSize(bounds.width, bounds.height);
break;
case "rotateAngle":
_this.contentAngle = _this.surface.rotateAngle;
break;
}
};
_this._onPrintAreaPropertyChanged = function (s, property) {
if (property !== "bounds" && property !== "slug" && property !== "bleed")
return;
_this._updateCanvasByPrintAreaBounds();
_this._updateViewport();
};
_this._updateCanvasByPrintAreaBounds = function () {
var totalBounds = _this._surfaceHandler.getBounds(PrintAreaBoundsType.Total);
if (_this._canvas.workspaceWidth !== totalBounds.width || _this._canvas.workspaceHeight !== totalBounds.height) {
_this._canvas.setWorkspaceSize(totalBounds.width, totalBounds.height);
}
var offset = new PointF(-Math.min(0, totalBounds.left), -Math.min(0, totalBounds.top));
_this._canvas.offset = offset;
_this._interactiveZonesHandler.setOffset(offset);
var paBounds = _this._surfaceHandler.getPrintAreasBounds(PrintAreaBoundsType.Trim);
_this._baseRulersOffset = new PointF(paBounds.left + offset.x, paBounds.top + offset.y);
};
_this._restoreSelectionAfterSnapshotLoaded = function () { return __awaiter(_this, void 0, void 0, function () {
var selectedHandlers, surfaceItems, handlers;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
selectedHandlers = this.canvas.getSelectedItemHandlers().toArray();
return [4 /*yield*/, new Promise(function (resolve) {
var cb = function () {
resolve();
_this.eventManager.removeSnapshotLoadedEvent(cb);
};
_this.eventManager.addSnapshotLoadedEvent(cb);
})];
case 1:
_a.sent();
surfaceItems = this.surface.getAllItems({ flatGroupItems: true, ignoreMockups: false }).toArray();
handlers = selectedHandlers.map(function (_a) {
var item = _a.item;
return surfaceItems.find(function (_a) {
var id = _a.id;
return item.id === id;
});
})
.filter(function (item) { return !!item; }).map(function (item) { return _this._canvas.viewer.getHandler(item); });
this.canvas.clearSelectedItemHandlers();
this.canvas.setSelectedItemHandlers(handlers);
return [2 /*return*/];
}
});
}); };
_this._updateContainersFlatList = function () {
var previewsList = _this._containersFlatList;
_this._containersFlatList = __spread((_this.surface != null ? _this.surface.mockup.underContainers : []), (_this.surface != null ? _this.surface.containers : []), (_this.surface != null ? _this.surface.mockup.overContainers : []), (_this.previewMode ? [] : _this._safetyLinesHandler.safetyLinesContainers), _this._watermarkHandler.watermarkContainers, _this._gridHandler.gridContainers);
_this.containersFlatListChangedEvent.notify(_this._getDifference(previewsList, _this._containersFlatList));
};
_this._onInput = function (params) {
if (params.type === InputType.Hover) {
_this._rulersOnHover(params);
}
};
_this._viewerInitializer = new ViewerInitializer();
_this.frontEndTextRenderingEnabled = frontEndTextRenderingEnabled;
_this._normalizeHolderElement(holderElement);
_this._viewportDiv = _this._createViewportDiv(holderElement);
_this._viewerElement = _this._createViewerElement(holderElement, productViewerPartId);
_this._viewerInitializer.onSetBackendUrl(function () {
if (_this._designAtomsApiClient == null) {
_this._designAtomsApiClient = new DesignAtomsApiClient();
_this._designAtomsApiClient.backendUrl = _this.backendUrl;
_this._viewerInitializer.setApiClient();
}
else {
_this._designAtomsApiClient.backendUrl = _this.backendUrl;
}
});
_this._rgbColorParser = new RgbColorParser();
_this._colorParser = new ColorParser(new NamedColorConverter(), _this._rgbColorParser, new CmykColorParser(), new LabColorParser(), new SpotColorParser());
_this._renderingConfigProvider = new RenderingConfigProvider(_this);
_this._viewerInitializer.onSetApiClient(function () {
var _a, _b;
PathHandler.designAtomsApiClient = _this._designAtomsApiClient;
ItemUtils.designAtomsApiClient = _this._designAtomsApiClient;
_this._service = new Service(_this.designAtomsApiClient);
_this._licenseHandler = new LicenseHandler(_this, _this._designAtomsApiClient);
var viewer = _this;
_this._colorPreviewService = new ColorPreviewService(_this.designAtomsApiClient, _this._renderingConfigProvider);
_this._productPreviewService = new ProductPreviewService({
get product() {
return viewer._productHandler.product;
},
get currentSurface() {
return viewer._productHandler.currentSurface;
},
get currentSurfaceChanged() {
return viewer._eventManager.surfaceChangedEvent;
}
}, _this.designAtomsApiClient, _this.colorPreviewService, _this._service, _this, _this._colorParser);
_this._canvas = _this._createCanvas();
_this._viewerInitializer.setCanvas();
_this._watermarkHandler = new WatermarkHandler(null, _this._service);
_this._watermarkHandler.add_watermarkCollectionChanged(_this._updateContainersFlatList);
_this._designAtomsApiClient.setAuthorizationToken((_b = (_a = _this.configuration) === null || _a === void 0 ? void 0 : _a.apiClientConfiguration) === null || _b === void 0 ? void 0 : _b.authorizationToken);
});
_this._viewerInitializer.onSetCanvas(function () {
_this._snapshotHandler = new SnapshotHandler(_this);
_this._history = _this._initializeHistory();
_this._eventManager.canvas = _this.canvas;
});
_this._eventManager = new EventManager(surface.parentProduct, _this);
_this._eventManager.addPrintAreaPropertyChanged(_this._onPrintAreaPropertyChanged);
_this._eventManager.addPrintAreaCollectionChanged(_this._updateCanvasByPrintAreaBounds);
_this._eventManager.addBeforeSnapshotLoad(_this._restoreSelectionAfterSnapshotLoaded);
_this._eventManager.addItemAdded(function (e) { return _this._updateItem(e.item); });
if (_this.frontEndTextRenderingEnabled) {
_this._eventManager.addItemPropertyChanged(function (item) {
if (item instanceof BaseTextItem)
_this._canvas.handlerFactory.replaceTextItemHandler(item);
});
}
_this._ignorePermissionsModeEnabled = ignorePermissionsMode !== null && ignorePermissionsMode !== void 0 ? ignorePermissionsMode : false;
_this._configuration = new ViewerConfiguration(null);
_this._screenXDpi = _this._screenYDpi = 96;
_this._whitespaceDiv = null;
_this._resizeCheckIntervalId = null;
_this._interactiveZonesHandler = new InteractiveZonesHandler((_l = _this._configuration.style) === null || _l === void 0 ? void 0 : _l.interactiveZones, _this._eventManager.interactiveZonesChangedEvent);
_this._safetyLinesHandler = new SafetyLinesHandler(_this._configuration.printZone, _this.colorParser);
_this._safetyLinesHandler.addChanged(_this._updateContainersFlatList);
_this._safetyLinesHandler.addVisibilityChanged(function () { _this.canvas.redraw(); });
_this._gridHandler = new GridHandler(_this.colorParser);
_this._gridHandler.addChanged(function () { _this.canvas.redraw(); });
_this._scrollbarStyleHandler = new ScrollbarStyleHandler();
_this._productHandler = new ProductHandler(_this, _this._eventManager);
_this.surface = surface;
_this._viewerInitializer.onInitalization(function () {
_this.initialize({ ignore: false, readonlyCanvasMode: readonlyCanvasMode });
_this._setCanvasBackground(canvasBackground);
});
_this._viewerInitializer.onPostInitialization(function () {
_this.zoomMode = ZoomMode.bestFit;
_this.viewportAlignment = ViewportAlignment.centerCenter;
_this.rulerEnabled = rulerEnabled;
_this._variableItemHelper = new VariableItemHelper(_this._productHandler, _this._canvas, _this._eventManager);
_this._productThemeManager = new ProductThemeManager(_this._productHandler, null, _this._canvas, _this._eventManager);
_this._itemsDataApplier = new ItemsDataApplier(_this._productHandler, _this._canvas, _this._productThemeManager);
_this._commandManager = new CommandManager(_this._history, _this._productHandler, _this._productThemeManager, _this._variableItemHelper, _this._eventManager, _this._canvas, _this._itemsDataApplier);
_this._inputHandlerManager = new InputHandlerManager(_this, _this._holderElement, keyInputElement);
_this._inputHandlerManager.setInputHandlerType(InputHandlerType.Default);
_this._inputHandlerManager.inputManager.addOnInput(_this._onInput);
_this._interactiveZonesHandler.setInputManager(_this._inputHandlerManager.inputManager);
_this._interactiveZonesHandler.setSelectionHandler(_this.canvas.selection);
});
if (backendUrl != null)
_this.backendUrl = backendUrl;
return _this;
}
/**
* @param surfaceIndex Index of the surface to preview
* @param options Preview rendering options
* @returns Blob containing the preview image of given surface
*/
Viewer.prototype.getSurfacePreview = function (surfaceIndex, options) {
return this._productPreviewService.getSurfacePreview(surfaceIndex, options);
};
/**
* @param options Preview rendering options
* @returns Blob containing the preview image of the current surface
*/
Viewer.prototype.getCurrentSurfacePreview = function (options) {
return this._productPreviewService.getCurrentSurfacePreview(options);
};
Viewer.prototype.ensureFocus = function () {
this._whitespaceDiv.focus();
};
Object.defineProperty(Viewer.prototype, "backendUrl", {
get: function () {
return this._backendUrl;
},
set: function (value) {
if (this._backendUrl === value)
return;
if (value == null)
throw new ArgumentNullException("backendUrl must not be null.");
this._backendUrl = value;
this._viewerInitializer.setBackendUrl(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "designAtomsApiClient", {
get: function () {
return this._designAtomsApiClient;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "colorPreviewService", {
get: function () {
return this._colorPreviewService;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "colorParser", {
get: function () {
return this._colorParser;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "rgbColorParser", {
get: function () {
return this._rgbColorParser;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "hitTestManager", {
get: function () {
var _a;
return (_a = this._canvas) === null || _a === void 0 ? void 0 : _a.hitTestManager;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "_serviceEndpoint", {
get: function () {
return this._backendUrl != null ? urlCombine(this._backendUrl, "api/ccviewer") : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "containersFlatList", {
get: function () {
return this._containersFlatList;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "commandManager", {
get: function () { return this._commandManager; },
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "configuration", {
get: function () {
return this._configuration;
},
// TODO: Move it to constructor please
set: function (conf) {
var _a, _b, _c, _d;
this._configuration = new ViewerConfiguration(conf);
this.gridHandler.setConfig(this._configuration.grid, this._configuration.rulers);
this._setRulersConfig((_a = this._configuration) === null || _a === void 0 ? void 0 : _a.rulers);
this._scrollbarStyleHandler.isCustomScrollbarStyleEnabled = !this._configuration.disableCustomScrollbarStyle;
this._variableItemHelper.maskSymbol = this._configuration.variableItemsMaskSymbol;
this._productThemeManager.productThemes = this._configuration.productThemes;
if (this.surface != null && this.surface.parentProduct != null)
this.surface.parentProduct.getAllItems().forEach(this._updateItem);
this.history.historySize = this.configuration.historySize;
this.commandManager.configuration = this.configuration;
this._safetyLinesHandler.conf = this._configuration.printZone;
this.canvas.viewerConfiguration = this._configuration;
var vsConf = (_b = this._configuration) === null || _b === void 0 ? void 0 : _b.violationService;
if (!(vsConf === null || vsConf === void 0 ? void 0 : vsConf.enabled))
return;
this._violationServiceFactory = new ViolationServiceFactory(vsConf, this._configuration.messages, this._eventManager, this._productHandler);
this._violationService = this._violationServiceFactory.create();
if (!(vsConf === null || vsConf === void 0 ? void 0 : vsConf.qualityChangeContainersEnabled) && !(vsConf === null || vsConf === void 0 ? void 0 : vsConf.violationWarningButtonsEnabled))
return;
this._canvasViolationVisualizer = new CanvasViolationVisualizer(this.canvas, vsConf, this._violationService, this._violationServiceFactory, this._productHandler, this._configuration.messages, this._eventManager);
this._interactiveZonesHandler.setStyles(this._configuration.style.interactiveZones);
(_c = this._designAtomsApiClient) === null || _c === void 0 ? void 0 : _c.setAuthorizationToken((_d = this._configuration.apiClientConfiguration) === null || _d === void 0 ? void 0 : _d.authorizationToken);
this._scrollbarStyleHandler.scrollbarEnabled = this._configuration.scrollbarEnabled;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "renderingConfig", {
get: function () {
return this.configuration.renderingConfig;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "renderingConfigProvider", {
get: function () {
return this._renderingConfigProvider;
},
enumerable: true,
configurable: true
});
Viewer.prototype.exitEditMode = function () {
return __awaiter(this, void 0, void 0, function () {
var escaping;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
escaping = this._canvas.getAllItemHandlers({ onlyType: NewBaseTextItemHandler })
.map(function (x) {
if (x.editing)
return x.exitEditMode();
});
return [4 /*yield*/, Promise.all(escaping)];
case 1:
_a.sent();
return [2 /*return*/];
}
});
});
};
Viewer.prototype.setInputHandlerType = function (type, args, options) {
if (this.canvas == null)
throw new Exception("Canvas is not initialized!");
this._inputHandlerManager.setInputHandlerType(type, args, options);
};
Object.defineProperty(Viewer.prototype, "inputHandlerManager", {
get: function () {
return this._inputHandlerManager;
},
enumerable: true,
configurable: true
});
Viewer.prototype.queryItems = function (selectors, queryOptions) {
return this._productHandler.queryItems(selectors, queryOptions);
};
Viewer.prototype._initializeHistory = function () {
var result = new History(this._snapshotHandler);
this.eventManager.addSurfaceCollectionChanged(this._onHistoryChanged);
this.eventManager.addContainerCollectionChanged(this._onHistoryChanged);
this.eventManager.addItemCollectionChanged(this._onHistoryChanged);
this.eventManager.addUnderMockupContainerCollectionChanged(this._onHistoryChanged);
this.eventManager.addOverMockupContainerCollectionChanged(this._onHistoryChanged);
this.eventManager.addPreviewMockupContainerCollectionChanged(this._onHistoryChanged);
this.eventManager.addItemPropertyChanged(this._onHistoryChanged);
this.canvas.history = result;
return result;
};
Viewer.prototype._normalizeHolderElement = function (holder) {
holder.style.overflow = "hidden";
holder.style.userSelect = "none";
holder.style.webkitUserSelect = "none";
holder.style.msUserSelect = "none";
holder.style.position = "relative";
};
Viewer.prototype._createViewerElement = function (holderElement, productViewerPartId) {
var viewerElement = document.createElement("div");
viewerElement.id = holderElement.id + "_" + productViewerPartId;
viewerElement.attributes["name"] = viewerElement.id;
viewerElement.style.width = "100%";
viewerElement.style.height = "100%";
viewerElement.style.display = "block";
viewerElement.style.zIndex = "1";
viewerElement.style.margin = "0";
viewerElement.style.padding = "0";
viewerElement.style.border = "0";
viewerElement.style.position = "relative";
viewerElement.style.overflow = "hidden";
viewerElement.style.transform = "translate3d(0px, 0px, 0px)";
viewerElement.style.touchAction = "none";
holderElement.appendChild(viewerElement);
return viewerElement;
};
Object.defineProperty(Viewer.prototype, "licenseHandler", {
get: function () {
return this._licenseHandler;
},
enumerable: true,
configurable: true
});
Viewer.prototype._createCanvas = function () {
var canvas = new Canvas(this);
canvas.service = this._service;
canvas.initialize();
canvas.multipleSelectionEnabled = true;
canvas.ignorePermissionsMode = this._ignorePermissionsModeEnabled;
canvas.floatingToolbarManager.eventManager = this._eventManager;
return canvas;
};
Viewer.prototype._setCanvasBackground = function (background) {
if (background === "chess")
this.canvas.backgroundImage = urlCombine(this._serviceEndpoint, "/resource?image=background");
else
this.canvas.background = background.color;
};
Viewer.prototype.setTextWhizzModule = function (textWhizz) {
this.canvas.setTextWhizzModule(textWhizz);
this._interactiveZonesHandler.setTextWhizz(textWhizz);
FrontEndLogger.debugLog("TextWhizz loaded", LogSource.Common);
this.eventManager.textWhizzReadyEvent.notify(textWhizz);
};
Viewer.prototype.initTextEditor = function (fontService, useSimpleFontList, textEditor, textInputIssueUserConfirmationDelegate) {
if (textEditor === void 0) { textEditor = TextEditorMode.Default; }
if (textInputIssueUserConfirmationDelegate === void 0) { textInputIssueUserConfirmationDelegate = null; }
this._textEditorMode = textEditor;
this._fontService = fontService;
this._useSimpleFontList = useSimpleFontList;
this._textInputIssueUserConfirmationDelegate = textInputIssueUserConfirmationDelegate;
this.canvas.initTextEditor(textEditor, fontService, useSimpleFontList, textInputIssueUserConfirmationDelegate);
};
Object.defineProperty(Viewer.prototype, "textEditorMode", {
get: function () {
return this._textEditorMode;
},
set: function (value) {
this._textEditorMode = value;
this.canvas.initTextEditor(this._textEditorMode, this._fontService, this._useSimpleFontList, this._textInputIssueUserConfirmationDelegate);
},
enumerable: true,
configurable: true
});
Viewer.prototype.setTextEditorMode = function (value) {
switch (value) {
case 0:
this.textEditorMode = TextEditorMode.Default;
break;
case 1:
this.textEditorMode = TextEditorMode.Html;
break;
case 2:
default:
this.textEditorMode = TextEditorMode.None;
break;
}
};
Object.defineProperty(Viewer.prototype, "canvas", {
get: function () {
return this._canvas;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "whitespaceDiv", {
get: function () {
return this._whitespaceDiv;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "viewportDiv", {
get: function () {
return this._viewportDiv;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "surface", {
get: function () {
return this._surface;
},
set: function (value) {
var _a;
if (value == null)
throw new ArgumentNullException("surface");
var prevSurface = this.surface;
if (value === prevSurface)
return;
(_a = this._canvas) === null || _a === void 0 ? void 0 : _a.clearSelectedItemHandlers();
this._surface = value;
this._eventManager.setProduct(value.parentProduct);
if (this._canvas != null)
this._onCurrentSurfaceChange(prevSurface);
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "safetyLinesHandler", {
get: function () {
return this._safetyLinesHandler;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "gridHandler", {
get: function () {
return this._gridHandler;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "surfaceHandler", {
get: function () {
return this._surfaceHandler;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "violationService", {
get: function () {
return this._violationService;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "violationServiceFactory", {
get: function () {
return this._violationServiceFactory;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "interactiveZonesHandler", {
get: function () {
return this._interactiveZonesHandler;
},
enumerable: true,
configurable: true
});
Viewer.prototype._onCurrentSurfaceChange = function (prevSurface) {
var e_1, _a, e_2, _b, e_3, _c, e_4, _d, e_5, _e, e_6, _f, e_7, _g;
this._interactiveZonesHandler.currentSurface = this.surface;
this._safetyLinesHandler.surface = this.surface;
this._watermarkHandler.surface = this.surface;
this._gridHandler.surface = this.surface;
this._surfaceHandler = new SurfaceHandler(this.surface);
var bounds = this._surfaceHandler.getBounds(PrintAreaBoundsType.Total);
this._updateCanvasByPrintAreaBounds();
this.canvas.service.beginMultiCall();
this._canvas.setWorkspaceSize(bounds.width, bounds.height);
this._updateContainersFlatList();
this.canvas.service.endMultiCall();
if (prevSurface != null) {
try {
for (var _h = __values(this._getContainerCollections(prevSurface, false)), _j = _h.next(); !_j.done; _j = _h.next()) {
var collection = _j.value;
try {
for (var collection_1 = (e_2 = void 0, __values(collection)), collection_1_1 = collection_1.next(); !collection_1_1.done; collection_1_1 = collection_1.next()) {
var container = collection_1_1.value;
try {
for (var _k = (e_3 = void 0, __values(container.items)), _l = _k.next(); !_l.done; _l = _k.next()) {
var item = _l.value;
var itemHandler = this.getHandler(item);
this.releaseHandler(itemHandler);
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
}
finally { if (e_3) throw e_3.error; }
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (collection_1_1 && !collection_1_1.done && (_b = collection_1.return)) _b.call(collection_1);
}
finally { if (e_2) throw e_2.error; }
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_j && !_j.done && (_a = _h.return)) _a.call(_h);
}
finally { if (e_1) throw e_1.error; }
}
try {
//TODO this can be implemented more elegantly by using RxJs
for (var _m = __values(this._getContainerCollections(prevSurface, true)), _o = _m.next(); !_o.done; _o = _m.next()) {
var collection = _o.value;
collection.remove_collectionChanged(this._updateContainersFlatList);
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (_o && !_o.done && (_d = _m.return)) _d.call(_m);
}
finally { if (e_4) throw e_4.error; }
}
prevSurface.containers.remove_itemAdded(this._onCurrentSurfaceContainerAdded);
}
try {
for (var _p = __values(this._getContainerCollections(this._surface, true)), _q = _p.next(); !_q.done; _q = _p.next()) {
var collection = _q.value;
try {
for (var collection_2 = (e_6 = void 0, __values(collection)), collection_2_1 = collection_2.next(); !collection_2_1.done; collection_2_1 = collection_2.next()) {
var container = collection_2_1.value;
try {
for (var _r = (e_7 = void 0, __values(container.items)), _s = _r.next(); !_s.done; _s = _r.next()) {
var item = _s.value;
var itemHandler = this.getHandler(item);
itemHandler.canvas = this.canvas;
}
}
catch (e_7_1) { e_7 = { error: e_7_1 }; }
finally {
try {
if (_s && !_s.done && (_g = _r.return)) _g.call(_r);
}
finally { if (e_7) throw e_7.error; }
}
}
}
catch (e_6_1) { e_6 = { error: e_6_1 }; }
finally {
try {
if (collection_2_1 && !collection_2_1.done && (_f = collection_2.return)) _f.call(collection_2);
}
finally { if (e_6) throw e_6.error; }
}
collection.add_collectionChanged(this._updateContainersFlatList);
}
}
catch (e_5_1) { e_5 = { error: e_5_1 }; }
finally {
try {
if (_q && !_q.done && (_e = _p.return)) _e.call(_p);
}
finally { if (e_5) throw e_5.error; }
}
this.surface.addPropertyChanged(this._onSurfacePropertyChanged);
this.contentAngle = this.surface.rotateAngle;
this._updateAlignMargin();
this._eventManager.surfaceChangedEvent.notify(this._surface);
this._canvas.redraw();
this._updateViewport();
this.canvas.updateButtonGroups({ onlyVisible: false });
this.canvas.clearSelectedItemHandlers();
this.canvas.updateViolationContainers(true);
if (this.surface.containers.length > 0) {
var mainContainer = this.surface.containers.firstOrDefault(function (c) { return c.name === Configuration.MAIN_CONTAINER_NAME; });
this.userEditContainer = mainContainer != null ? mainContainer : this.surface.containers.get(0);
this.surface.containers.add_itemAdded(this._onCurrentSurfaceContainerAdded);
}
};
Viewer.prototype._updateAlignMargin = function () {
if (!(this.surface instanceof Surface) || this._canvas == null || this.surface.printAreas.empty)
return;
var margins = { left: 0, right: 0, top: 0, bottom: 0 };
var targetSafetyLineName = this.configuration.alignToSafetyLineName;
if (!_.isEmpty(targetSafetyLineName)) {
var surfaceSafetyLines = this.surface.printAreas.selectMany(function (p) { return p.safetyLines; });
var safetyLine = surfaceSafetyLines === null || surfaceSafetyLines === void 0 ? void 0 : surfaceSafetyLines.firstOrDefault(function (sl) { return sl.name == targetSafetyLineName; });
if (safetyLine != null) {
var margin = safetyLine.getMargin();
margins.left = margin.left;
margins.right = margin.right;
margins.top = margin.top;
margins.bottom = margin.bottom;
}
else {
var alignArea = this.surface.printAreas.get(0);
switch (targetSafetyLineName) {
case "bleed":
margins.left = -alignArea.bleed.left;
margins.right = -alignArea.bleed.right;
margins.top = -alignArea.bleed.top;
margins.bottom = -alignArea.bleed.bottom;
break;
case "slug":
margins.left = -alignArea.slug.left;
margins.right = -alignArea.slug.right;
margins.top = -alignArea.slug.top;
margins.bottom = -alignArea.slug.bottom;
break;
}
}
}
this._canvas.leftMargin = margins.left;
this._canvas.rightMargin = margins.right;
this._canvas.topMargin = margins.top;
this._canvas.bottomMargin = margins.bottom;
};
Viewer.prototype._getContainerCollections = function (surface, includeSpecialCollections) {
var result = [
surface.mockup.underContainers,
surface.mockup.overContainers,
surface.containers,
];
if (includeSpecialCollections) {
result = __spread(result, [
this._safetyLinesHandler.safetyLinesContainers,
this._watermarkHandler.watermarkContainers,
this._gridHandler.gridContainers
]);
}
return result;
};
Object.defineProperty(Viewer.prototype, "watermarkConfig", {
get: function () {
return this._watermarkHandler.watermarkConfig;
},
set: function (value) {
this._watermarkHandler.watermarkConfig = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "selectedItems", {
get: function () {
var selectedItemHandlers = this.canvas.getSelectedItemHandlers();
return selectedItemHandlers !== null ? selectedItemHandlers.select(function (x) { return x.item; }).toArray() : null;
},
set: function (value) {
if (value == null) {
this.canvas.clearSelectedItemHandlers();
return;
}
var itemHandlers = value.map(this.canvas.handlerFactory.get);
this.canvas.setSelectedItemHandlers(itemHandlers);
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "currentItem", {
get: function () {
var currentItemHandler = this.canvas.currentItemHandler;
return currentItemHandler != null ? currentItemHandler.item : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "zoomConfig", {
get: function () {
if (this._configuration)
return this._configuration.zoom;
else
return null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "previewMode", {
get: function () {
return this.canvas.previewMode;
},
set: function (value) {
this.canvas.previewMode = value;
this._updateContainersFlatList();
},
enumerable: true,
configurable: true
});
Viewer.prototype._getDifference = function (prevList, newList) {
return {
added: newList.reduce(function (acc, c) {
if (!prevList.includes(c))
acc.push(c);
return acc;
}, new Array()),
removed: prevList.reduce(function (acc, c) {
if (!newList.includes(c))
acc.push(c);
return acc;
}, new Array())
};
};
Object.defineProperty(Viewer.prototype, "contentWidth", {
/**
* @returns {number} content width in css pixels
*/
get: function () {
return this._getContentDimension(this.workspaceWidth, Environment.screenDpi);
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "contentHeight", {
/**
* @returns {number} content height in css pixels
*/
get: function () {
return this._getContentDimension(this.workspaceHeight, Environment.screenDpi);
},
enumerable: true,
configurable: true
});
Viewer.prototype._getContentDimension = function (workspaceDimension, screenDpi) {
var value = Convert.devicePixelsToCssPixels(Convert.pointsToPixels(workspaceDimension, screenDpi) *
this.zoom);
return Math.ceil(value);
};
Object.defineProperty(Viewer.prototype, "workspaceWidth", {
get: function () {
/// <summary>Gets a value that represents the width (in points) of the <see cref="T:J:VectorObjects.Canvas" /> associated with this <see cref="T:J:CanvasViewer" />.</summary>
/// <value type="Number">The value which represents the width (in points) of the <see cref="T:J:VectorObjects.Canvas" /> associated with this <see cref="T:J:CanvasViewer" />.</value>
/// <remarks><para>This property corresponds to <see cref="P:CanvasViewer.WorkspaceWidth">CanvasViewer.WorkspaceWidth</see> server-side member.</para></remarks>
return this.canvas.workspaceWidth;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "workspaceHeight", {
get: function () {
/// <summary>Gets a value that represents the height (in points) of the <see cref="T:J:VectorObjects.Canvas" /> associated with this <see cref="T:J:CanvasViewer" />.</summary>
/// <value type="Number">The value which represents the height (in points) of the <see cref="T:J:VectorObjects.Canvas" /> associated with this <see cref="T:J:CanvasViewer" />.</value>
/// <remarks><para>This property corresponds to <see cref="P:CanvasViewer.WorkspaceHeight">CanvasViewer.WorkspaceHeight</see> server-side member.</para></remarks>
return this.canvas.workspaceHeight;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Viewer.prototype, "actualSizeHorizontalScale", {
get: function () {
/// <summary>Gets value which represents the ratio of screen horizontal resolution to the canvas resolution.</summary>
/// <value type="N