canvas-editor-engine 2.3.17 → 2.3.19

package/dist/web-component.js

@@ -0,0 +1,179 @@
+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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { reflect } from "./utils/reflect";
+reflect();
+import CanvasComponent from "./components/canvas.component";
+import ExcretionsComponent from "./components/excretions.component";
+import LoadingComponent from "./components/loading.component";
+import PipetteComponent from "./components/pipette.component";
+import SlotComponent from "./components/slot.component";
+import EventService from "./services/event.service";
+import LoggerService from "./services/logger.service";
+import ToolLayerService from "./services/tool-layers.service";
+import ToolService from "./services/tool.service";
+import CropService from "./services/crop.service";
+import AppStore from "./store/store";
+import ThroughHistoryService from "./services/through-history.service";
+import AppStoreRepository from "./store/storeRepository";
+import ProjectsService from "./services/projects.service";
+import PullProjectService from "./services/pull-project.service";
+import DrawService from "./services/draw.service";
+import DownloadService from "./services/download.service";
+import ResizeService from "./services/serize.service";
+import DrawLayersService from "./services/draw-layers.service";
+import DrawAccumulatorService from "./services/draw-accumulator.service";
+var WebComponentWrapper = /** @class */ (function () {
+    function WebComponentWrapper() {
+        var base = document.createElement('div');
+        base.className = 'wc-editor';
+        base.style.position = 'relative';
+        base.style.display = 'flex';
+        base.style.overflow = 'hidden';
+        var stylesWrap = document.createElement('div');
+        stylesWrap.className = 'styles-wrap';
+        var editorWrap = document.createElement('div');
+        editorWrap.className = 'editor-wrap';
+        editorWrap.style.position = 'relative';
+        editorWrap.style.display = 'flex';
+        editorWrap.style.overflow = 'hidden';
+        var toolsWrap = document.createElement('div');
+        toolsWrap.className = 'tools-wrap';
+        toolsWrap.style.position = 'relative';
+        toolsWrap.style.display = 'flex';
+        base.appendChild(stylesWrap);
+        base.appendChild(editorWrap);
+        base.appendChild(toolsWrap);
+        this.baseElement = base;
+        this.stylesWrapElement = stylesWrap;
+        this.editorWrapElement = editorWrap;
+        this.toolsWrapElement = toolsWrap;
+        this._baseStyle();
+    }
+    Object.defineProperty(WebComponentWrapper.prototype, "base", {
+        get: function () {
+            return this._methods(this.baseElement);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ;
+    Object.defineProperty(WebComponentWrapper.prototype, "editorWrap", {
+        get: function () {
+            return this._methods(this.editorWrapElement);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ;
+    Object.defineProperty(WebComponentWrapper.prototype, "stylesWrap", {
+        get: function () {
+            return this._methods(this.stylesWrapElement);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ;
+    Object.defineProperty(WebComponentWrapper.prototype, "toolsWrap", {
+        get: function () {
+            return this._methods(this.toolsWrapElement);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ;
+    WebComponentWrapper.prototype._methods = function (elementWrapper) {
+        var _this = this;
+        return {
+            add: function (component, style) { return _this._add(elementWrapper, component, style); },
+        };
+    };
+    WebComponentWrapper.prototype._add = function (elementWrapper, component, style) {
+        var componentElement = elementWrapper.appendChild(component);
+        if (!!style) {
+            this.stylesWrapElement.appendChild(style);
+        }
+        return componentElement;
+    };
+    WebComponentWrapper.prototype._baseStyle = function () {
+        var style = document.createElement('style');
+        style.innerHTML = "\n      * {\n        user-select: none;\n      }\n    ";
+        this.stylesWrapElement.appendChild(style);
+    };
+    return WebComponentWrapper;
+}());
+export { WebComponentWrapper };
+var WebComponent = /** @class */ (function (_super) {
+    __extends(WebComponent, _super);
+    function WebComponent() {
+        var _this = _super.call(this) || this;
+        var shadowRoot = _this.attachShadow({ mode: "open" });
+        _this.webComponentWrapper = new WebComponentWrapper();
+        shadowRoot.appendChild(_this.webComponentWrapper.baseElement);
+        return _this;
+    }
+    WebComponent.prototype.init = function (appConfig) {
+        this.appConfig = appConfig;
+        this.projectsService = new ProjectsService();
+        this.loggerService = new LoggerService();
+        this.toolLayerService = new ToolLayerService(this.appConfig);
+        this.eventService = new EventService();
+        this.canvasComponent = new CanvasComponent(this.appConfig, this.loggerService, this.toolLayerService);
+        this.toolService = new ToolService(this.canvasComponent);
+        this.appStoreRepository = new AppStoreRepository();
+        this.throughHistoryService = new ThroughHistoryService(this.appConfig, this.appStoreRepository);
+        this.resizeService = new ResizeService(this.appConfig, this.throughHistoryService);
+        this.appStore = new AppStore(this.throughHistoryService, this.appStoreRepository);
+        this.pullProjectService = new PullProjectService(this.throughHistoryService, this.appStoreRepository);
+        this.drawService = new DrawService(this.appConfig, this.appStoreRepository, this.eventService);
+        this.drawLayersService = new DrawLayersService(this.appStoreRepository);
+        this.drawAccumulatorService = new DrawAccumulatorService(this.appConfig, this.appStoreRepository, this.eventService, this.drawLayersService);
+        this.downloadService = new DownloadService(this.canvasComponent);
+        var _a = this.canvasComponent.getComponent(), canvasTemplate = _a.canvasTemplate, canvasStyle = _a.canvasStyle;
+        this.canvasElement = this.webComponentWrapper.editorWrap.add(canvasTemplate, canvasStyle);
+        var pipetteComponent = new PipetteComponent(this.toolService, this.loggerService, this.canvasComponent);
+        var _b = pipetteComponent.getComponent(), pipetteTemplate = _b.pipetteTemplate, pipetteStyle = _b.pipetteStyle;
+        this.webComponentWrapper.editorWrap.add(pipetteTemplate, pipetteStyle);
+        var slotComponent = new SlotComponent(this.loggerService);
+        var _c = slotComponent.getComponent('tools'), slotTemplate = _c.slotTemplate, slotStyle = _c.slotStyle;
+        this.webComponentWrapper.toolsWrap.add(slotTemplate, slotStyle);
+        this.excretionsComponent = new ExcretionsComponent(this.toolService, this.loggerService, this.toolLayerService, this.canvasComponent);
+        this.cropService = new CropService(this.appConfig, this.appStoreRepository, this.excretionsComponent);
+        var _d = this.excretionsComponent.getComponent(), excretionsTemplate = _d.excretionsTemplate, excretionsStyle = _d.excretionsStyle;
+        this.webComponentWrapper.editorWrap.add(excretionsTemplate, excretionsStyle);
+        var loadingComponent = new LoadingComponent(this.loggerService, this.eventService);
+        var _e = loadingComponent.getComponent(), loadingTemplate = _e.loadingTemplate, loadingStyle = _e.loadingStyle;
+        this.webComponentWrapper.editorWrap.add(loadingTemplate, loadingStyle);
+        this.canvasComponent.simulateSubscriptions();
+        this.eventService.applyEvents(this.webComponentWrapper.baseElement);
+        return this.initial();
+    };
+    WebComponent.prototype.initial = function () {
+        this.appConfig.bindCanvas(this.canvasElement);
+        return {
+            editorElement: this.canvasElement,
+            canvasSelector: this.canvasComponent.getCanvasSelector(),
+        };
+    };
+    WebComponent.prototype.restoreJSONProjects = function (layerId, jsonProjects) {
+        var projectProcessor = this.projectsService.on('File');
+        var serializer = projectProcessor.getSerializerInstance(jsonProjects);
+        var projects = serializer.getProjects();
+        this.drawAccumulatorService.add(layerId, 'project', projects[0], projects[0].state.current.size);
+        this.throughHistoryService.recovery(projects[0]);
+    };
+    return WebComponent;
+}(HTMLElement));
+export default WebComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-editor-engine",
-  "version": "2.3.17",
+  "version": "2.3.19",
   "description": "CanvasEditorEngine library, use: [typescript] [canvas]",
   "main": "dist/index.mjs",
   "types": "dist/index.d.ts",