@node-projects/web-component-designer 0.0.26 → 0.0.30

package/dist/elements/services/elementAtPointService/ElementAtPointService.d.ts

@@ -1,6 +1,6 @@
 import { IElementAtPointService } from './IElementAtPointService';
-import { IDesignerView } from '../../..';
+import { IDesignerCanvas } from '../../..';
 import { IPoint } from '../../../interfaces/IPoint';
 export declare class ElementAtPointService implements IElementAtPointService {
-    getElementAtPoint(designerView: IDesignerView, point: IPoint): any;
+    getElementAtPoint(designerView: IDesignerCanvas, point: IPoint): any;
 }

package/dist/elements/services/htmlParserService/NodeHtmlParserService.d.ts

@@ -3,6 +3,8 @@ import { ServiceContainer } from "../ServiceContainer";
 import { IHtmlParserService } from "./IHtmlParserService";
 import { IDesignItem } from '../../item/IDesignItem';
 export declare class NodeHtmlParserService implements IHtmlParserService {
+    private _parserUrl;
+    constructor(parserUrl?: string);
     parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
     private _parseDiv;
     _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;

package/dist/elements/services/htmlParserService/NodeHtmlParserService.js

@@ -4,12 +4,13 @@ import { newElementFromString } from "../../helper/ElementHelper";
 // Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
 // attributes from their DOM, so you loose Data
 export class NodeHtmlParserService {
-    constructor() {
+    constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js') {
         this._parseDiv = document.createElement("div");
+        this._parserUrl = parserUrl;
     }
     async parse(html, serviceContainer, instanceServiceContainer) {
         //@ts-ignore
-        let parser = await import('../../../../../node-html-parser-esm/dist/index.js');
+        let parser = await import(this._parserUrl);
         const parsed = parser.parse(html, { comment: true });
         let designItems = [];
         for (let p of parsed.childNodes) {
@@ -40,14 +41,7 @@ export class NodeHtmlParserService {
             let style = '';
             let attr = item.attributes;
             for (let a in attr) {
-                let bnd;
-                if (serviceContainer.bindingService) {
-                    bnd = serviceContainer.bindingService.parseBindingAttribute(a, attr[a]);
-                }
-                if (bnd) {
-                    designItem.setAttribute(a, bnd);
-                }
-                else if (a !== 'style') {
+                if (a !== 'style') {
                     designItem.setAttribute(a, attr[a]);
                     if (a === 'node-projects-hide-at-design-time')
                         hideAtDesignTime = true;
@@ -64,17 +58,7 @@ export class NodeHtmlParserService {
                 let styleParser = new CssAttributeParser();
                 styleParser.parse(style);
                 for (let s of styleParser.entries) {
-                    let bnd;
-                    if (serviceContainer.bindingService) {
-                        bnd = serviceContainer.bindingService.parseBindingAttribute(s.name, s.value);
-                    }
-                    if (bnd) {
-                        designItem.setStyle(s.name, bnd);
-                    }
-                    else {
-                        designItem.setStyle(s.name, s.value);
-                    }
-                    //designItem.styles.set(s.name, s.value);
+                    designItem.setStyle(s.name, s.value);
                 }
             }
             designItem.hideAtDesignTime = hideAtDesignTime;

package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.BASE.d.ts

@@ -0,0 +1,9 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer";
+import { ServiceContainer } from "../ServiceContainer";
+import { IHtmlParserService } from "./IHtmlParserService";
+import { IDesignItem } from '../../item/IDesignItem';
+export declare class NodeHtmlParserService implements IHtmlParserService {
+    parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+    private _parseDiv;
+    _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
+}

package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.BASE.js

@@ -0,0 +1,100 @@
+import { DesignItem } from '../../item/DesignItem';
+import { CssAttributeParser } from "../../helper/CssAttributeParser";
+import { newElementFromString } from "../../helper/ElementHelper";
+// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
+// attributes from their DOM, so you loose Data
+export class NodeHtmlParserService {
+    constructor() {
+        this._parseDiv = document.createElement("div");
+    }
+    async parse(html, serviceContainer, instanceServiceContainer) {
+        //@ts-ignore
+        let parser = await import('../../../../../node-html-parser-esm/dist/index.js');
+        const parsed = parser.parse(html, { comment: true });
+        let designItems = [];
+        for (let p of parsed.childNodes) {
+            let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null);
+            if (di != null)
+                designItems.push(di);
+            else
+                console.warn("NodeHtmlParserService - could not parse element", p);
+        }
+        return designItems;
+    }
+    _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
+        let designItem = null;
+        if (item.nodeType == 1) {
+            let element;
+            if (!namespace)
+                element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call 
+            if (!element) {
+                if (namespace)
+                    element = document.createElementNS(namespace, item.rawTagName);
+                else
+                    element = document.createElement(item.rawTagName);
+            }
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+            let hideAtDesignTime = false;
+            let hideAtRunTime = false;
+            let lockAtDesignTime = false;
+            let style = '';
+            let attr = item.attributes;
+            for (let a in attr) {
+                let bnd;
+                if (serviceContainer.bindingService) {
+                    bnd = serviceContainer.bindingService.parseBindingAttribute(a, attr[a]);
+                }
+                if (bnd) {
+                    designItem.setAttribute(a, bnd);
+                }
+                else if (a !== 'style') {
+                    designItem.setAttribute(a, attr[a]);
+                    if (a === 'node-projects-hide-at-design-time')
+                        hideAtDesignTime = true;
+                    else if (a === 'node-projects-hide-at-run-time')
+                        hideAtRunTime = true;
+                    else if (a === 'node-projects-lock-at-design-time')
+                        lockAtDesignTime = true;
+                }
+                else {
+                    style = attr[a];
+                }
+            }
+            if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
+                let styleParser = new CssAttributeParser();
+                styleParser.parse(style);
+                for (let s of styleParser.entries) {
+                    let bnd;
+                    if (serviceContainer.bindingService) {
+                        bnd = serviceContainer.bindingService.parseBindingAttribute(s.name, s.value);
+                    }
+                    if (bnd) {
+                        designItem.setStyle(s.name, bnd);
+                    }
+                    else {
+                        designItem.setStyle(s.name, s.value);
+                    }
+                    //designItem.styles.set(s.name, s.value);
+                }
+            }
+            designItem.hideAtDesignTime = hideAtDesignTime;
+            designItem.hideAtRunTime = hideAtRunTime;
+            designItem.lockAtDesignTime = lockAtDesignTime;
+            element.draggable = false; //even if it should be true, for better designer exp.
+            for (let c of item.childNodes) {
+                let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
+                designItem.insertChild(di);
+            }
+        }
+        else if (item.nodeType == 3) {
+            this._parseDiv.innerHTML = item.rawText;
+            let element = this._parseDiv.childNodes[0];
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+        }
+        else if (item.nodeType == 8) {
+            let element = document.createComment(item.rawText);
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+        }
+        return designItem;
+    }
+}

package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.LOCAL.d.ts

@@ -0,0 +1,11 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer";
+import { ServiceContainer } from "../ServiceContainer";
+import { IHtmlParserService } from "./IHtmlParserService";
+import { IDesignItem } from '../../item/IDesignItem';
+export declare class NodeHtmlParserService implements IHtmlParserService {
+    private _parserUrl;
+    constructor(parserUrl?: string);
+    parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+    private _parseDiv;
+    _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
+}

package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.LOCAL.js

@@ -0,0 +1,84 @@
+import { DesignItem } from '../../item/DesignItem';
+import { CssAttributeParser } from "../../helper/CssAttributeParser";
+import { newElementFromString } from "../../helper/ElementHelper";
+// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
+// attributes from their DOM, so you loose Data
+export class NodeHtmlParserService {
+    constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js') {
+        this._parseDiv = document.createElement("div");
+        this._parserUrl = parserUrl;
+    }
+    async parse(html, serviceContainer, instanceServiceContainer) {
+        //@ts-ignore
+        let parser = await import(this._parserUrl);
+        const parsed = parser.parse(html, { comment: true });
+        let designItems = [];
+        for (let p of parsed.childNodes) {
+            let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null);
+            if (di != null)
+                designItems.push(di);
+            else
+                console.warn("NodeHtmlParserService - could not parse element", p);
+        }
+        return designItems;
+    }
+    _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
+        let designItem = null;
+        if (item.nodeType == 1) {
+            let element;
+            if (!namespace)
+                element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call 
+            if (!element) {
+                if (namespace)
+                    element = document.createElementNS(namespace, item.rawTagName);
+                else
+                    element = document.createElement(item.rawTagName);
+            }
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+            let hideAtDesignTime = false;
+            let hideAtRunTime = false;
+            let lockAtDesignTime = false;
+            let style = '';
+            let attr = item.attributes;
+            for (let a in attr) {
+                if (a !== 'style') {
+                    designItem.setAttribute(a, attr[a]);
+                    if (a === 'node-projects-hide-at-design-time')
+                        hideAtDesignTime = true;
+                    else if (a === 'node-projects-hide-at-run-time')
+                        hideAtRunTime = true;
+                    else if (a === 'node-projects-lock-at-design-time')
+                        lockAtDesignTime = true;
+                }
+                else {
+                    style = attr[a];
+                }
+            }
+            if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
+                let styleParser = new CssAttributeParser();
+                styleParser.parse(style);
+                for (let s of styleParser.entries) {
+                    designItem.setStyle(s.name, s.value);
+                }
+            }
+            designItem.hideAtDesignTime = hideAtDesignTime;
+            designItem.hideAtRunTime = hideAtRunTime;
+            designItem.lockAtDesignTime = lockAtDesignTime;
+            element.draggable = false; //even if it should be true, for better designer exp.
+            for (let c of item.childNodes) {
+                let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
+                designItem.insertChild(di);
+            }
+        }
+        else if (item.nodeType == 3) {
+            this._parseDiv.innerHTML = item.rawText;
+            let element = this._parseDiv.childNodes[0];
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+        }
+        else if (item.nodeType == 8) {
+            let element = document.createComment(item.rawText);
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+        }
+        return designItem;
+    }
+}

package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.REMOTE.d.ts

@@ -0,0 +1,9 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer";
+import { ServiceContainer } from "../ServiceContainer";
+import { IHtmlParserService } from "./IHtmlParserService";
+import { IDesignItem } from '../../item/IDesignItem';
+export declare class NodeHtmlParserService implements IHtmlParserService {
+    parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+    private _parseDiv;
+    _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
+}

package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.REMOTE.js

@@ -0,0 +1,83 @@
+import { DesignItem } from '../../item/DesignItem';
+import { CssAttributeParser } from "../../helper/CssAttributeParser";
+import { newElementFromString } from "../../helper/ElementHelper";
+// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
+// attributes from their DOM, so you loose Data
+export class NodeHtmlParserService {
+    constructor() {
+        this._parseDiv = document.createElement("div");
+    }
+    async parse(html, serviceContainer, instanceServiceContainer) {
+        //@ts-ignore
+        let parser = await import('../../../../../node-html-parser-esm/dist/index.js');
+        const parsed = parser.parse(html, { comment: true });
+        let designItems = [];
+        for (let p of parsed.childNodes) {
+            let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null);
+            if (di != null)
+                designItems.push(di);
+            else
+                console.warn("NodeHtmlParserService - could not parse element", p);
+        }
+        return designItems;
+    }
+    _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
+        let designItem = null;
+        if (item.nodeType == 1) {
+            let element;
+            if (!namespace)
+                element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call 
+            if (!element) {
+                if (namespace)
+                    element = document.createElementNS(namespace, item.rawTagName);
+                else
+                    element = document.createElement(item.rawTagName);
+            }
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+            let hideAtDesignTime = false;
+            let hideAtRunTime = false;
+            let lockAtDesignTime = false;
+            let style = '';
+            let attr = item.attributes;
+            for (let a in attr) {
+                if (a !== 'style') {
+                    designItem.setAttribute(a, attr[a]);
+                    if (a === 'node-projects-hide-at-design-time')
+                        hideAtDesignTime = true;
+                    else if (a === 'node-projects-hide-at-run-time')
+                        hideAtRunTime = true;
+                    else if (a === 'node-projects-lock-at-design-time')
+                        lockAtDesignTime = true;
+                }
+                else {
+                    style = attr[a];
+                }
+            }
+            if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
+                let styleParser = new CssAttributeParser();
+                styleParser.parse(style);
+                for (let s of styleParser.entries) {
+                    designItem.setStyle(s.name, s.value);
+                }
+            }
+            designItem.hideAtDesignTime = hideAtDesignTime;
+            designItem.hideAtRunTime = hideAtRunTime;
+            designItem.lockAtDesignTime = lockAtDesignTime;
+            element.draggable = false; //even if it should be true, for better designer exp.
+            for (let c of item.childNodes) {
+                let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
+                designItem.insertChild(di);
+            }
+        }
+        else if (item.nodeType == 3) {
+            this._parseDiv.innerHTML = item.rawText;
+            let element = this._parseDiv.childNodes[0];
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+        }
+        else if (item.nodeType == 8) {
+            let element = document.createComment(item.rawText);
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+        }
+        return designItem;
+    }
+}

package/dist/elements/services/propertiesService/services/CommonPropertiesService.d.ts

@@ -11,6 +11,6 @@ export declare class CommonPropertiesService implements IPropertiesService {
     setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
-    getValue(designItems: IDesignItem[], property: IProperty): string | boolean | import("../../bindingsService/IBinding").IBinding;
+    getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
     getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
 }

package/dist/elements/services/propertiesService/services/CssPropertiesService.d.ts

@@ -14,6 +14,6 @@ export declare class CssPropertiesService implements IPropertiesService {
     setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
-    getValue(designItems: IDesignItem[], property: IProperty): string | import("../../bindingsService/IBinding").IBinding;
+    getValue(designItems: IDesignItem[], property: IProperty): string;
     getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
 }

package/dist/elements/services/propertiesService/services/CssPropertiesService.js

@@ -1,5 +1,6 @@
 import { ValueType } from '../ValueType';
 import { NodeType } from '../../../item/NodeType';
+import { BindingTarget } from '../../../item/BindingTarget.js';
 export class CssPropertiesService {
     constructor(name) {
         //@ts-ignore
@@ -214,12 +215,19 @@ export class CssPropertiesService {
     isSet(designItems, property) {
         let all = true;
         let some = false;
-        if (designItems != null && designItems.length !== 0)
+        if (designItems != null && designItems.length !== 0) {
             designItems.forEach((x) => {
                 let has = x.styles.has(property.name);
                 all = all && has;
                 some = some || has;
             });
+            //todo: optimize perf, do not call bindings service for each property. 
+            const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.getBindings(designItems[0]);
+            });
+            if (bindings && bindings.find(x => x.target == BindingTarget.css && x.targetName == property.name))
+                return ValueType.bound;
+        }
         else
             return ValueType.none;
         return all ? ValueType.all : some ? ValueType.some : ValueType.none;

package/dist/elements/services/propertiesService/services/UnkownElementPropertiesService.d.ts

@@ -11,6 +11,6 @@ export declare class UnkownElementPropertiesService implements IPropertiesServic
     setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
-    getValue(designItems: IDesignItem[], property: IProperty): string | boolean | import("../../bindingsService/IBinding").IBinding;
+    getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
     getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
 }

package/dist/elements/services/undoService/transactionItems/AttributeChangeAction.d.ts

@@ -1,6 +1,6 @@
 import { ITransactionItem } from '../ITransactionItem';
 import { IDesignItem } from '../../../item/IDesignItem';
-import { IBinding } from '../../bindingsService/IBinding.js';
+import { IBinding } from '../../../item/IBinding.js';
 export declare class AttributeChangeAction implements ITransactionItem {
     constructor(designItem: IDesignItem, name: string, newValue: string | IBinding | null, oldValue: string | IBinding | null);
     title?: string;

package/dist/elements/widgets/designerView/designerCanvas.js

@@ -199,8 +199,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.snapLines = new Snaplines(this.overlayLayer);
         this.snapLines.initialize(this.rootDesignItem);
         if (this.children) {
+            let children = this.children;
+            if (this.children.length == 1 && this.children[0] instanceof HTMLSlotElement) {
+                children = this.children[0].assignedElements();
+            }
             const parser = this.serviceContainer.getLastServiceWhere('htmlParserService', x => x.constructor == DefaultHtmlParserService);
-            this.addDesignItems(parser.createDesignItems(this.children, this.serviceContainer, this.instanceServiceContainer));
+            this.addDesignItems(parser.createDesignItems(children, this.serviceContainer, this.instanceServiceContainer));
         }
     }
     elementFromPoint(x, y) {

package/dist/elements/widgets/designerView/designerView.js

@@ -8,6 +8,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         const outer = this._getDomElement('outer');
         this._designerCanvas = new DesignerCanvas();
         this._designerCanvas.id = "canvas";
+        this._designerCanvas.appendChild(document.createElement("slot"));
         outer.insertAdjacentElement('afterbegin', this._designerCanvas);
         this._zoomInput = this._getDomElement('zoomInput');
         this._zoomInput.onchange = () => { this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100; };

package/dist/elements/widgets/designerView/extensions/PositionExtension.js

@@ -11,10 +11,18 @@ export class PositionExtension extends AbstractExtension {
         let itemRect = this.extendedItem.element.getBoundingClientRect();
         const xOffset = itemRect.x - this.designerView.containerBoundingRect.x;
         const yOffset = itemRect.y - this.designerView.containerBoundingRect.y;
-        const left = Number.parseFloat(computedStyle.left.replace('px', ''));
-        const top = Number.parseFloat(computedStyle.top.replace('px', ''));
-        const right = Number.parseFloat(computedStyle.right.replace('px', ''));
-        const bottom = Number.parseFloat(computedStyle.bottom.replace('px', ''));
+        let left = Number.parseFloat(computedStyle.left.replace('px', ''));
+        if (isNaN(left))
+            left = 0;
+        let top = Number.parseFloat(computedStyle.top.replace('px', ''));
+        if (isNaN(top))
+            top = 0;
+        let right = Number.parseFloat(computedStyle.right.replace('px', ''));
+        if (isNaN(right))
+            right = 0;
+        let bottom = Number.parseFloat(computedStyle.bottom.replace('px', ''));
+        if (isNaN(bottom))
+            bottom = 0;
         let tx = 0;
         let ty = 0;
         if (computedStyle.transform !== 'none') {

package/dist/elements/widgets/designerView/tools/DrawElementTool.d.ts

@@ -1,4 +1,5 @@
 import { IElementDefinition } from '../../../services/elementsService/IElementDefinition';
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
 import { IDesignerCanvas } from '../IDesignerCanvas';
 import { ITool } from './ITool';
 export declare class DrawElementTool implements ITool {
@@ -8,6 +9,7 @@ export declare class DrawElementTool implements ITool {
     readonly cursor = "crosshair";
     private _rect;
     constructor(elementDefinition: IElementDefinition);
+    activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     pointerEventHandler(designerView: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
     private _onPointerDown;

package/dist/elements/widgets/designerView/tools/DrawElementTool.js

@@ -6,6 +6,8 @@ export class DrawElementTool {
         this.cursor = 'crosshair';
         this._elementDefinition = elementDefinition;
     }
+    activated(serviceContainer) {
+    }
     dispose() {
         if (this._createdItem)
             this._createdItem.element.parentElement.removeChild(this._createdItem.element);

package/dist/elements/widgets/designerView/tools/DrawPathTool.d.ts

@@ -1,11 +1,13 @@
 import { IDesignerCanvas } from '../IDesignerCanvas';
 import { ITool } from './ITool';
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
 export declare class DrawPathTool implements ITool {
     readonly cursor = "crosshair";
     private _pathD;
     private _path;
     private _initialPoint;
     constructor();
+    activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
 }

package/dist/elements/widgets/designerView/tools/DrawPathTool.js

@@ -7,6 +7,8 @@ export class DrawPathTool {
     constructor() {
         this.cursor = 'crosshair';
     }
+    activated(serviceContainer) {
+    }
     dispose() {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {

package/dist/elements/widgets/designerView/tools/ITool.d.ts

@@ -1,6 +1,8 @@
 import { IDisposable } from "../../../../interfaces/IDisposable";
+import { ServiceContainer } from "../../../services/ServiceContainer.js";
 import { IDesignerCanvas } from "../IDesignerCanvas";
 export interface ITool extends IDisposable {
     readonly cursor: string;
+    activated(serviceContainer: ServiceContainer): any;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): any;
 }

package/dist/elements/widgets/designerView/tools/MagicWandSelectorTool.d.ts

@@ -1,3 +1,4 @@
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
 import { IDesignerCanvas } from '../IDesignerCanvas';
 import { ITool } from './ITool';
 export declare class MagicWandSelectorTool implements ITool {
@@ -6,5 +7,6 @@ export declare class MagicWandSelectorTool implements ITool {
     private _path;
     private _initialPoint;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
 }

package/dist/elements/widgets/designerView/tools/MagicWandSelectorTool.js

@@ -55,6 +55,8 @@ export class MagicWandSelectorTool {
                 break;
         }
     }
+    activated(serviceContainer) {
+    }
     dispose() {
     }
 }

package/dist/elements/widgets/designerView/tools/PanTool.d.ts

@@ -1,7 +1,9 @@
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
 import { IDesignerCanvas } from '../IDesignerCanvas';
 import { ITool } from './ITool';
 export declare class PanTool implements ITool {
     readonly cursor: string;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
 }

package/dist/elements/widgets/designerView/tools/PanTool.js

@@ -4,6 +4,8 @@ export class PanTool {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
     }
+    activated(serviceContainer) {
+    }
     dispose() {
     }
 }

package/dist/elements/widgets/designerView/tools/PickColorTool.d.ts

@@ -1,7 +1,9 @@
 import { IDesignerCanvas } from '../IDesignerCanvas';
 import { ITool } from './ITool';
+import { ServiceContainer } from '../../../services/ServiceContainer';
 export declare class PickColorTool implements ITool {
     readonly cursor = "crosshair";
+    activated(serviceContainer: ServiceContainer): Promise<void>;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): Promise<void>;
     dispose(): void;
 }

package/dist/elements/widgets/designerView/tools/PickColorTool.js

@@ -1,25 +1,21 @@
-import { EventNames } from '../../../../enums/EventNames.js';
 export class PickColorTool {
     constructor() {
         this.cursor = 'crosshair';
     }
-    async pointerEventHandler(designerCanvas, event, currentElement) {
-        if (event.type == EventNames.PointerDown) {
-            try {
-                //@ts-ignore
-                const eyeDropper = new EyeDropper();
-                const colorSelectionResult = await eyeDropper.open();
-                const color = colorSelectionResult.sRGBHex;
-                if (event.button == 2)
-                    designerCanvas.serviceContainer.globalContext.fillBrush = color;
-                else
-                    designerCanvas.serviceContainer.globalContext.strokeColor = color;
-            }
-            finally {
-                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
-            }
+    async activated(serviceContainer) {
+        try {
+            //@ts-ignore
+            const eyeDropper = new EyeDropper();
+            const colorSelectionResult = await eyeDropper.open();
+            const color = colorSelectionResult.sRGBHex;
+            serviceContainer.globalContext.strokeColor = color;
+        }
+        finally {
+            serviceContainer.globalContext.finishedWithTool(this);
         }
     }
+    async pointerEventHandler(designerCanvas, event, currentElement) {
+    }
     dispose() {
     }
 }