canvas-editor-engine 1.0.4 → 1.0.6

package/dist/web-component.d.ts

@@ -1,9 +1,25 @@
 import { TComponent } from "./types/general";
 export declare class WebComponentWrapper {
-    element: HTMLDivElement;
+    baseElement: HTMLDivElement;
+    editorWrapElement: HTMLDivElement;
+    stylesWrapElement: HTMLDivElement;
+    toolsWrapElement: HTMLDivElement;
     constructor();
-    add(component: TComponent, style?: HTMLStyleElement): HTMLDivElement;
-    private _stylish;
+    get base(): {
+        add: (component: TComponent, style?: HTMLStyleElement) => HTMLDivElement;
+    };
+    get editorWrap(): {
+        add: (component: TComponent, style?: HTMLStyleElement) => HTMLDivElement;
+    };
+    get stylesWrap(): {
+        add: (component: TComponent, style?: HTMLStyleElement) => HTMLDivElement;
+    };
+    get toolsWrap(): {
+        add: (component: TComponent, style?: HTMLStyleElement) => HTMLDivElement;
+    };
+    private _methods;
+    private _add;
+    private _baseStyle;
 }
 export default class WebComponent extends HTMLElement {
     constructor();

package/dist/web-component.js

@@ -7,28 +7,65 @@ const pipette_component_1 = require("./components/pipette.component");
 const slot_component_1 = require("./components/slot.component");
 class WebComponentWrapper {
     constructor() {
-        const webComponentWrapper = document.createElement('div');
-        webComponentWrapper.className = 'editor-wrap';
-        webComponentWrapper.style.position = 'relative';
-        webComponentWrapper.style.display = 'flex';
-        this.element = webComponentWrapper;
-        this._stylish();
-    }
-    add(component, style) {
-        const componentElement = this.element.appendChild(component);
+        const base = document.createElement('div');
+        base.className = 'wc-editor';
+        base.style.position = 'relative';
+        base.style.display = 'flex';
+        const stylesWrap = document.createElement('div');
+        stylesWrap.className = 'styles-wrap';
+        const editorWrap = document.createElement('div');
+        editorWrap.className = 'editor-wrap';
+        editorWrap.style.position = 'relative';
+        editorWrap.style.display = 'flex';
+        const toolsWrap = document.createElement('div');
+        editorWrap.className = 'tools-wrap';
+        editorWrap.style.position = 'relative';
+        editorWrap.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();
+    }
+    get base() {
+        return this._methods(this.baseElement);
+    }
+    ;
+    get editorWrap() {
+        return this._methods(this.editorWrapElement);
+    }
+    ;
+    get stylesWrap() {
+        return this._methods(this.stylesWrapElement);
+    }
+    ;
+    get toolsWrap() {
+        return this._methods(this.toolsWrapElement);
+    }
+    ;
+    _methods(elementWrapper) {
+        return {
+            add: (component, style) => this._add(elementWrapper, component, style),
+        };
+    }
+    _add(elementWrapper, component, style) {
+        const componentElement = elementWrapper.appendChild(component);
         if (!!style) {
-            this.element.appendChild(style);
+            this.stylesWrapElement.appendChild(style);
         }
         return componentElement;
     }
-    _stylish() {
+    _baseStyle() {
         const style = document.createElement('style');
         style.innerHTML = `
       * {
         user-select: none;
       }
     `;
-        this.element.appendChild(style);
+        this.stylesWrapElement.appendChild(style);
     }
 }
 exports.WebComponentWrapper = WebComponentWrapper;
@@ -38,14 +75,14 @@ class WebComponent extends HTMLElement {
         const shadowRoot = this.attachShadow({ mode: "open" });
         const webComponentWrapper = new WebComponentWrapper();
         const { canvasTemplate, canvasStyle } = canvas_component_1.default.getComponent();
-        const canvasElement = webComponentWrapper.add(canvasTemplate, canvasStyle);
+        const canvasElement = webComponentWrapper.editorWrap.add(canvasTemplate, canvasStyle);
         const { pipetteTemplate, pipetteStyle } = pipette_component_1.default.getComponent();
-        webComponentWrapper.add(pipetteTemplate, pipetteStyle);
+        webComponentWrapper.editorWrap.add(pipetteTemplate, pipetteStyle);
         const { slotTemplate, slotStyle } = slot_component_1.default.getComponent('tools');
-        webComponentWrapper.add(slotTemplate, slotStyle);
+        webComponentWrapper.toolsWrap.add(slotTemplate, slotStyle);
         const { excretionsTemplate, excretionsStyle } = excretions_component_1.default.getComponent();
-        webComponentWrapper.add(excretionsTemplate, excretionsStyle);
-        shadowRoot.appendChild(webComponentWrapper.element);
+        webComponentWrapper.editorWrap.add(excretionsTemplate, excretionsStyle);
+        shadowRoot.appendChild(webComponentWrapper.baseElement);
         canvas_component_1.default.simulateSubscriptions();
         this.addEventListener('initial', () => {
             this.dispatchEvent(new CustomEvent('get-editor-element', {

package/package.json

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