@node-projects/web-component-designer 0.0.36 → 0.0.40

package/assets/images/chromeDevtools/flex-direction-row-icon.svg

@@ -1 +1,82 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13"><g clip-path="url(#clip0)"><rect x="2" y="2.816" width="4.607" height="2.738" rx=".5" stroke="#000"/><rect x="1.5" y="6.989" width="5.607" height="3.738" rx="1" fill="#000"/><path d="M9.461 1.5v7.63H8L10.002 12 12 9.13h-1.458V1.5h-1.08z" fill="#000"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h13v13H0z"/></clipPath></defs></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   fill="none"
+   viewBox="0 0 13 13"
+   version="1.1"
+   id="svg15"
+   sodipodi:docname="flex-direction-row-icon.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata19">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1680"
+     inkscape:window-height="987"
+     id="namedview17"
+     showgrid="false"
+     inkscape:zoom="63.076923"
+     inkscape:cx="6.5"
+     inkscape:cy="6.5"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg15" />
+  <g
+     clip-path="url(#clip0)"
+     id="g8"
+     transform="matrix(0,1,1,0,0,0)">
+    <rect
+       x="2"
+       y="2.816"
+       width="4.6069999"
+       height="2.7379999"
+       rx="0.5"
+       stroke="#000000"
+       id="rect2" />
+    <rect
+       x="1.5"
+       y="6.9889998"
+       width="5.6069999"
+       height="3.7379999"
+       rx="1"
+       fill="#000000"
+       id="rect4" />
+    <path
+       d="M 9.461,1.5 V 9.13 H 8 L 10.002,12 12,9.13 H 10.542 V 1.5 h -1.08 z"
+       fill="#000000"
+       id="path6" />
+  </g>
+  <defs
+     id="defs13">
+    <clipPath
+       id="clip0">
+      <path
+         fill="#fff"
+         d="M0 0h13v13H0z"
+         id="path10" />
+    </clipPath>
+  </defs>
+</svg>

package/dist/elements/controls/DesignerTabControl.js

@@ -137,7 +137,7 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
             let htmlItem = item;
             const tabHeaderDiv = this._elementMap.get(htmlItem);
             this._moreContainer.appendChild(tabHeaderDiv);
-            if (w < this._headerDiv.clientWidth) {
+            if (this._headerDiv.children.length == 0 || (w + (tabHeaderDiv.clientWidth / 2)) < this._headerDiv.clientWidth) {
                 this._headerDiv.appendChild(tabHeaderDiv);
                 w += tabHeaderDiv.clientWidth;
             }

package/dist/elements/controls/ThicknessEditor.d.ts

@@ -6,10 +6,26 @@ export declare type ThicknessEditorValueChangedEventArgs = {
 export declare class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
-    private _value;
-    get value(): string;
-    set value(value: string);
-    valueChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _leftInput;
+    private _topInput;
+    private _rightInput;
+    private _bottomInput;
+    private _valueLeft;
+    get valueLeft(): string;
+    set valueLeft(value: string);
+    valueLeftChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueTop;
+    get valueTop(): string;
+    set valueTop(value: string);
+    valueTopChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueRight;
+    get valueRight(): string;
+    set valueRight(value: string);
+    valueRightChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueBottom;
+    get valueBottom(): string;
+    set valueBottom(value: string);
+    valueBottomChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
     property: string;
     unsetValue: string;
     _updateValue(): void;

package/dist/elements/controls/ThicknessEditor.js

@@ -57,23 +57,88 @@ export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
       <div id="rect"></div>
     </div>
   `;
-    _value;
-    get value() {
-        return this._value;
+    _leftInput;
+    _topInput;
+    _rightInput;
+    _bottomInput;
+    _valueLeft;
+    get valueLeft() {
+        return this._valueLeft;
     }
-    set value(value) {
-        const oldValue = this._value;
-        this._value = value;
-        this._updateValue();
-        this.valueChanged.emit({ newValue: this._value, oldValue: oldValue });
+    set valueLeft(value) {
+        const oldValue = this._valueLeft;
+        this._valueLeft = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueLeftChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueLeftChanged = new TypedEvent();
+    _valueTop;
+    get valueTop() {
+        return this._valueTop;
+    }
+    set valueTop(value) {
+        const oldValue = this._valueTop;
+        this._valueTop = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueTopChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueTopChanged = new TypedEvent();
+    _valueRight;
+    get valueRight() {
+        return this._valueRight;
+    }
+    set valueRight(value) {
+        const oldValue = this._valueRight;
+        this._valueRight = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueRightChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueRightChanged = new TypedEvent();
+    _valueBottom;
+    get valueBottom() {
+        return this._valueBottom;
+    }
+    set valueBottom(value) {
+        const oldValue = this._valueBottom;
+        this._valueBottom = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueBottomChanged.emit({ newValue: value, oldValue: oldValue });
+        }
     }
-    valueChanged = new TypedEvent();
+    valueBottomChanged = new TypedEvent();
     property;
     unsetValue;
     _updateValue() {
+        this._leftInput.value = this.valueLeft;
+        this._topInput.value = this.valueTop;
+        this._rightInput.value = this.valueRight;
+        this._bottomInput.value = this._valueBottom;
     }
     ready() {
         this._parseAttributesToProperties();
+        this._leftInput = this._getDomElement('left');
+        this._topInput = this._getDomElement('top');
+        this._rightInput = this._getDomElement('right');
+        this._bottomInput = this._getDomElement('bottom');
+        this._leftInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueLeft = this._leftInput.value; };
+        this._topInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueTop = this._topInput.value; };
+        this._rightInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueRight = this._rightInput.value; };
+        this._bottomInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueBottom = this._bottomInput.value; };
+        this._leftInput.onblur = (e) => this._valueLeft = this._leftInput.value;
+        this._topInput.onblur = (e) => this._valueTop = this._topInput.value;
+        this._rightInput.onblur = (e) => this._valueRight = this._rightInput.value;
+        this._bottomInput.onblur = (e) => this._valueBottom = this._bottomInput.value;
         this._updateValue();
     }
 }

package/dist/elements/item/DesignItem.d.ts

@@ -21,6 +21,7 @@ export declare class DesignItem implements IDesignItem {
     get name(): string;
     get id(): string;
     set id(value: string);
+    get isRootItem(): boolean;
     private _childArray;
     get hasChildren(): boolean;
     children(): IterableIterator<IDesignItem>;

package/dist/elements/item/DesignItem.js

@@ -44,6 +44,9 @@ export class DesignItem {
     set id(value) {
         this.element.id = value;
     }
+    get isRootItem() {
+        return this.instanceServiceContainer.contentService.rootDesignItem === this;
+    }
     _childArray = [];
     get hasChildren() {
         return this._childArray.length > 0;

package/dist/elements/item/IDesignItem.d.ts

@@ -9,6 +9,7 @@ export interface IDesignItem {
     readonly nodeType: NodeType;
     readonly name: string;
     readonly id: string;
+    readonly isRootItem: boolean;
     readonly hasAttributes: boolean;
     readonly attributes: Map<string, string>;
     readonly hasStyles: boolean;

package/dist/elements/services/ServiceContainer.d.ts

@@ -21,6 +21,7 @@ import { ISnaplinesProviderService } from "./placementService/ISnaplinesProvider
 import { IPrepareElementsForDesignerService } from './instanceService/IPrepareElementsForDesignerService';
 import { IDragDropService } from './dragDropService/IDragDropService';
 import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js";
+import { IDesignerPointerExtensionProvider } from "../widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -43,6 +44,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
         demoViewWidget: new (...args: any[]) => IDemoView & HTMLElement;
     };
     readonly designerExtensions: Map<(ExtensionType | string), IDesignerExtensionProvider[]>;
+    readonly designerPointerExtensions: IDesignerPointerExtensionProvider[];
     designerContextMenuExtensions: IContextMenuExtension[];
     readonly globalContext: GlobalContext;
     readonly designerTools: Map<string | NamedTools, ITool>;

package/dist/elements/services/ServiceContainer.js

@@ -8,6 +8,7 @@ export class ServiceContainer extends BaseServiceContainer {
         demoViewWidget: DemoView
     };
     designerExtensions = new Map();
+    designerPointerExtensions = [];
     designerContextMenuExtensions;
     globalContext = new GlobalContext(this);
     designerTools = new Map();

package/dist/elements/services/propertiesService/propertyEditors/BasePropertyEditor.js

@@ -30,7 +30,12 @@ export class BasePropertyEditor {
         else
             this.element.classList.remove('unset-value');
         this.disableChangeNotification = true;
-        this.refreshValue(valueType, value);
+        try {
+            this.refreshValue(valueType, value);
+        }
+        catch (err) {
+            console.error(err);
+        }
         this.disableChangeNotification = false;
     }
 }

package/dist/elements/services/propertiesService/propertyEditors/NumberPropertyEditor.js

@@ -11,6 +11,6 @@ export class NumberPropertyEditor extends BasePropertyEditor {
         this.element = element;
     }
     refreshValue(valueType, value) {
-        this.element.value = value;
+        this.element.value = value === undefined ? null : value;
     }
 }

package/dist/elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.js

@@ -5,10 +5,10 @@ export class ThicknessPropertyEditor extends BasePropertyEditor {
         super(property);
         const selector = new ThicknessEditor();
         selector.property = property.name;
-        selector.valueChanged.on((e) => this._valueChanged(e.newValue));
+        selector.valueLeftChanged.on((e) => this._valueChanged(e.newValue));
         this.element = selector;
     }
     refreshValue(valueType, value) {
-        this.element.value = value;
+        this.element.valueLeft = value;
     }
 }

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

@@ -115,6 +115,11 @@ export class CssPropertiesService {
             type: "list",
             values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
             service: this
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this
         }, {
             name: "grid-template-columns",
             type: "string",
@@ -160,6 +165,11 @@ export class CssPropertiesService {
             type: "list",
             values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
             service: this
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this
         }, {
             name: "flex-direction",
             type: "img-list",

package/dist/elements/widgets/designerView/IDesignerCanvas.d.ts

@@ -22,6 +22,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;
     elementFromPoint(x: number, y: number): Element;
 }

package/dist/elements/widgets/designerView/designerCanvas.d.ts

@@ -40,6 +40,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     extensionManager: IExtensionManager;
+    private _pointerextensions;
     private _onDblClickBound;
     constructor();
     get designerWidth(): string;
@@ -70,6 +71,8 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private onKeyUp;
     private onKeyDown;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    getNormalizedElementCoordinates(element: Element): IPoint;
+    getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     static getHost(node: Node): Element;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
     _rect: SVGRectElement;

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

@@ -103,13 +103,13 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
           <div style="width: 100%;height: 100%;">
             <div id="node-projects-designer-canvas-outercanvas2" style="width: 100%;height: 100%;position: relative;overflow: auto;">
               <div id="node-projects-designer-canvas-canvasContainer" style="width: 100%;height: 100%;margin: auto;position: absolute;top: 0;/* bottom: 0; does not work with fixed sized when size is bigger then view */left: 0;user-select: none;">
-                <!-- <div id="zoomHelper" style="width: 10px; height: 10px; position: absolute; top: 0; left: 0; pointer-events: none;"></div> -->
                 <div id="node-projects-designer-canvas-canvas" part="canvas" tabindex="0"></div>
               </div>
             </div>
           </div>
         </div>`;
     extensionManager;
+    _pointerextensions;
     _onDblClickBound;
     constructor() {
         super();
@@ -276,6 +276,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvasContainer.appendChild(this.overlayLayer);
         this.snapLines = new Snaplines(this.overlayLayer);
         this.snapLines.initialize(this.rootDesignItem);
+        if (this.serviceContainer.designerPointerExtensions)
+            for (let pe of this.serviceContainer.designerPointerExtensions) {
+                if (!this._pointerextensions)
+                    this._pointerextensions = [];
+                this._pointerextensions.push(pe.getExtension(this));
+            }
         if (this.children) {
             let children = this.children;
             if (this.children.length == 1 && this.children[0] instanceof HTMLSlotElement) {
@@ -486,6 +492,15 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             y: offsetOfOuterY - offsetOfCanvasY
         };
     }
+    getNormalizedElementCoordinates(element) {
+        const targetRect = element.getBoundingClientRect();
+        return { x: targetRect.x - this.containerBoundingRect.x, y: targetRect.y - this.containerBoundingRect.y };
+    }
+    getNormalizedOffsetInElement(event, element) {
+        const normEvt = this.getNormalizedEventCoordinates(event);
+        const normEl = this.getNormalizedElementCoordinates(element);
+        return { x: normEvt.x - normEl.x, y: normEvt.y - normEl.y };
+    }
     //todo remove, is in base custom webcomp domhelper
     static getHost(node) {
         while (node.parentElement)
@@ -539,6 +554,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _rect;
     _pointerEventHandler(event) {
         this._fillCalculationrects();
+        if (this._pointerextensions) {
+            for (let pe of this._pointerextensions)
+                pe.refresh(event);
+        }
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
             return;
         if (event.button == 2)

package/dist/elements/widgets/designerView/extensions/AbstractExtension copy.d.ts

@@ -0,0 +1,22 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+import { OverlayLayerView } from '../overlayLayerView';
+import { OverlayLayer } from './OverlayLayer';
+export declare abstract class AbstractExtension implements IDesignerExtension {
+    protected overlays: SVGGraphicsElement[];
+    protected overlayLayerView: OverlayLayerView;
+    protected extensionManager: IExtensionManager;
+    protected designerView: IDesignerCanvas;
+    protected extendedItem: IDesignItem;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    abstract extend(): any;
+    abstract refresh(): any;
+    abstract dispose(): any;
+    protected _removeAllOverlays(): void;
+    _drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
+    _drawCircle(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
+    _drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
+    _drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
+}

package/dist/elements/widgets/designerView/extensions/AbstractExtension copy.js

@@ -0,0 +1,52 @@
+export class AbstractExtension {
+    overlays = [];
+    overlayLayerView;
+    extensionManager;
+    designerView;
+    extendedItem;
+    constructor(extensionManager, designerView, extendedItem) {
+        this.extensionManager = extensionManager;
+        this.designerView = designerView;
+        this.extendedItem = extendedItem;
+        this.overlayLayerView = designerView.overlayLayer;
+    }
+    _removeAllOverlays() {
+        for (let o of this.overlays) {
+            try {
+                this.overlayLayerView.removeOverlay(o);
+            }
+            catch (err) {
+                console.error(err);
+            }
+        }
+        this.overlays = [];
+    }
+    _drawLine(x1, y1, x2, y2, className, line, overlayLayer) {
+        const newLine = this.overlayLayerView.drawLine(x1, y1, x2, y2, className, line, overlayLayer);
+        if (!line) {
+            this.overlays.push(newLine);
+        }
+        return newLine;
+    }
+    _drawCircle(x, y, radius, className, circle, overlayLayer) {
+        const newCircle = this.overlayLayerView.drawCircle(x, y, radius, className, circle, overlayLayer);
+        if (!circle) {
+            this.overlays.push(newCircle);
+        }
+        return circle;
+    }
+    _drawRect(x, y, w, h, className, rect, overlayLayer) {
+        const newRect = this.overlayLayerView.drawRect(x, y, w, h, className, rect, overlayLayer);
+        if (!rect) {
+            this.overlays.push(newRect);
+        }
+        return newRect;
+    }
+    _drawText(text, x, y, className, textEl, overlayLayer) {
+        const newText = this.overlayLayerView.drawText(text, x, y, className, textEl, overlayLayer);
+        if (!textEl) {
+            this.overlays.push(newText);
+        }
+        return newText;
+    }
+}

package/dist/elements/widgets/designerView/extensions/AbstractExtension.d.ts

@@ -2,21 +2,11 @@ import { IDesignItem } from "../../../item/IDesignItem";
 import { IDesignerCanvas } from "../IDesignerCanvas";
 import { IDesignerExtension } from "./IDesignerExtension";
 import { IExtensionManager } from "./IExtensionManger";
-import { OverlayLayerView } from '../overlayLayerView';
-import { OverlayLayer } from './OverlayLayer';
-export declare abstract class AbstractExtension implements IDesignerExtension {
-    protected overlays: SVGGraphicsElement[];
-    protected overlayLayerView: OverlayLayerView;
-    protected extensionManager: IExtensionManager;
-    protected designerView: IDesignerCanvas;
+import { AbstractExtensionBase } from "./AbstractExtensionBase.js";
+export declare abstract class AbstractExtension extends AbstractExtensionBase implements IDesignerExtension {
     protected extendedItem: IDesignItem;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     abstract extend(): any;
     abstract refresh(): any;
     abstract dispose(): any;
-    protected _removeAllOverlays(): void;
-    _drawLineOverlay(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
-    _drawCircleOverlay(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
-    _drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
-    _drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
 }

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

@@ -1,78 +1,8 @@
-export class AbstractExtension {
-    overlays = [];
-    overlayLayerView;
-    extensionManager;
-    designerView;
+import { AbstractExtensionBase } from "./AbstractExtensionBase.js";
+export class AbstractExtension extends AbstractExtensionBase {
     extendedItem;
     constructor(extensionManager, designerView, extendedItem) {
-        this.extensionManager = extensionManager;
-        this.designerView = designerView;
+        super(extensionManager, designerView);
         this.extendedItem = extendedItem;
-        this.overlayLayerView = designerView.overlayLayer;
-    }
-    _removeAllOverlays() {
-        for (let o of this.overlays) {
-            try {
-                this.overlayLayerView.removeOverlay(o);
-            }
-            catch (err) {
-                console.error(err);
-            }
-        }
-        this.overlays = [];
-    }
-    _drawLineOverlay(x1, y1, x2, y2, className, line, overlayLayer) {
-        if (!line) {
-            line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-            this.overlayLayerView.addOverlay(line, overlayLayer);
-            this.overlays.push(line);
-        }
-        line.setAttribute('x1', x1);
-        line.setAttribute('y1', y1);
-        line.setAttribute('x2', x2);
-        line.setAttribute('y2', y2);
-        if (className)
-            line.setAttribute('class', className);
-        return line;
-    }
-    _drawCircleOverlay(x, y, radius, className, circle, overlayLayer) {
-        if (!circle) {
-            circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-            this.overlayLayerView.addOverlay(circle, overlayLayer);
-            this.overlays.push(circle);
-        }
-        circle.setAttribute('cx', x);
-        circle.setAttribute('cy', y);
-        circle.setAttribute('r', radius);
-        if (className)
-            circle.setAttribute('class', className);
-        return circle;
-    }
-    _drawRect(x, y, w, h, className, rect, overlayLayer) {
-        if (!rect) {
-            rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-            this.overlayLayerView.addOverlay(rect, overlayLayer);
-            this.overlays.push(rect);
-        }
-        rect.setAttribute('x', x);
-        rect.setAttribute('y', y);
-        rect.setAttribute('width', w);
-        rect.setAttribute('height', h);
-        if (className)
-            rect.setAttribute('class', className);
-        return rect;
-    }
-    _drawText(text, x, y, className, textEl, overlayLayer) {
-        if (!textEl) {
-            textEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
-            this.overlayLayerView.addOverlay(textEl, overlayLayer);
-            this.overlays.push(textEl);
-        }
-        textEl.setAttribute('x', x);
-        textEl.setAttribute('y', y);
-        textEl.textContent = text;
-        if (className)
-            textEl.setAttribute('class', className);
-        return textEl;
     }
 }

package/dist/elements/widgets/designerView/extensions/AbstractExtensionBase.d.ts

@@ -0,0 +1,16 @@
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IExtensionManager } from "./IExtensionManger";
+import { OverlayLayerView } from '../overlayLayerView';
+import { OverlayLayer } from './OverlayLayer';
+export declare abstract class AbstractExtensionBase {
+    protected overlays: SVGGraphicsElement[];
+    protected overlayLayerView: OverlayLayerView;
+    protected extensionManager: IExtensionManager;
+    protected designerCanvas: IDesignerCanvas;
+    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas);
+    protected _removeAllOverlays(): void;
+    protected _drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
+    protected _drawCircle(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
+    protected _drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
+    protected _drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
+}