@node-projects/web-component-designer 0.0.120 → 0.0.122

package/dist/elements/helper/PathDataPolyfill.js

@@ -944,34 +944,11 @@ export function moveSVGPath(path, xFactor, yFactor) {
 export function createPathD(path) {
     let pathD = "";
     for (let p of path) {
-        switch (p.type) {
-            case 'M':
-                pathD += p.type + p.values[0] + " " + p.values[1];
-                break;
-            case 'L':
-                pathD += p.type + p.values[0] + " " + p.values[1];
-                break;
-            case 'H':
-                break;
-            case 'V':
-                break;
-            case 'Z':
-                pathD += p.type;
-                break;
-            case 'C':
-            case 'c':
-                pathD += p.type + p.values[0] + " " + p.values[1] + " " + p.values[2] + " " + p.values[3] + " " + p.values[4] + " " + p.values[5];
-                break;
-            case 'S':
-                break;
-            case 'Q':
-            case 'q':
-                pathD += p.type + p.values[0] + " " + p.values[1] + " " + p.values[2] + " " + p.values[3];
-                break;
-            case 'T':
-                break;
-            case 'A':
-                break;
+        pathD += p.type + " ";
+        for (var i = 0; i < p.values.length; i++) {
+            if (p.values[i] != null && !isNaN(p.values[i])) {
+                pathD += p.values[i] + " ";
+            }
         }
     }
     return pathD;

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

@@ -41,6 +41,7 @@ export declare class DesignItem implements IDesignItem {
     set content(value: string);
     get innerHTML(): string;
     set innerHTML(value: string);
+    get isEmptyTextNode(): boolean;
     private _hideAtDesignTime;
     get hideAtDesignTime(): boolean;
     set hideAtDesignTime(value: boolean);

package/dist/elements/item/DesignItem.js

@@ -85,7 +85,7 @@ export class DesignItem {
             action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this));
         }
         else if (where == 'afterend') {
-            action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this));
+            action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this) + 1);
         }
         this.instanceServiceContainer.undoService.execute(action);
     }
@@ -124,6 +124,9 @@ export class DesignItem {
         this.element.innerHTML = value;
         this.updateChildrenFromNodesChildren();
     }
+    get isEmptyTextNode() {
+        return this.nodeType === NodeType.TextNode && this.content?.trim() == '';
+    }
     _hideAtDesignTime;
     get hideAtDesignTime() {
         return this._hideAtDesignTime;

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

@@ -33,6 +33,7 @@ export interface IDesignItem {
     readonly hasContent: boolean;
     content: string;
     innerHTML?: string;
+    readonly isEmptyTextNode: boolean;
     readonly node: Node;
     readonly element: Element;
     serviceContainer: ServiceContainer;

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -14,7 +14,7 @@ import { GridExtensionProvider } from '../widgets/designerView/extensions/GridEx
 import { TransformOriginExtensionProvider } from '../widgets/designerView/extensions/TransformOriginExtensionProvider.js';
 import { CanvasExtensionProvider } from '../widgets/designerView/extensions/CanvasExtensionProvider.js';
 import { PositionExtensionProvider } from '../widgets/designerView/extensions/PositionExtensionProvider.js';
-import { PathExtensionProvider } from '../widgets/designerView/extensions/PathExtensionProvider.js';
+import { PathExtensionProvider } from '../widgets/designerView/extensions/svg/PathExtensionProvider.js';
 import { MouseOverExtensionProvider } from '../widgets/designerView/extensions/MouseOverExtensionProvider.js';
 import { NamedTools } from '../widgets/designerView/tools/NamedTools.js';
 import { PointerTool } from '../widgets/designerView/tools/PointerTool.js';
@@ -64,6 +64,9 @@ import { DrawToolButtonProvider } from '../widgets/designerView/tools/toolBar/bu
 import { TextToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js';
 import { SelectorToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js';
 import { GrayOutDragOverContainerExtensionProvider } from '../widgets/designerView/extensions/GrayOutDragOverContainerExtensionProvider.js';
+import { LineExtensionProvider } from '../widgets/designerView/extensions/svg/LineExtensionProvider.js';
+import { RectExtentionProvider } from '../widgets/designerView/extensions/svg/RectExtensionProvider.js';
+import { EllipsisExtensionProvider } from '../widgets/designerView/extensions/svg/EllipsisExtensionProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -95,7 +98,10 @@ export function createDefaultServiceContainer() {
         new TransformOriginExtensionProvider(),
         new CanvasExtensionProvider(),
         new PositionExtensionProvider(),
+        new EllipsisExtensionProvider(),
+        new LineExtensionProvider(),
         new PathExtensionProvider(),
+        new RectExtentionProvider(),
         new ResizeExtensionProvider(true),
         new RotateExtensionProvider(),
     ]);

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

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

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

@@ -0,0 +1,106 @@
+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 LitElementParserService {
+    _parserUrl;
+    _esprimaUrl;
+    constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js', esprimaUrl = '../../../../../esprima-next/dist/esm/esprima.js') {
+        this._parserUrl = parserUrl;
+        this._esprimaUrl = esprimaUrl;
+    }
+    async parse(module, serviceContainer, instanceServiceContainer) {
+        let esprima = await import(this._esprimaUrl);
+        const parsedModule = esprima.parseModule(module);
+        const classDecl = parsedModule.body.find(x => x.type == esprima.Syntax.ClassDeclaration);
+        const renderMethod = classDecl.body.body.find(x => x.type == esprima.Syntax.MethodDefinition && x.key.name == 'render');
+        const renderMethodStatement = renderMethod.value.body.body[0];
+        const taggedTemplate = renderMethodStatement.argument;
+        const templateLiteral = taggedTemplate.quasi;
+        const html = templateLiteral.quasis.map(x => x.value.raw).join();
+        //@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;
+    }
+    _parseDiv = document.createElement("div");
+    _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
+        let designItem = null;
+        if (item.nodeType == 1) {
+            let element;
+            let manualCreatedElement = false;
+            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);
+                manualCreatedElement = true;
+            }
+            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.attributes.set(a, attr[a]);
+                    if (manualCreatedElement) {
+                        element.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.styles.set(s.name, s.value);
+                    if (manualCreatedElement) {
+                        element.style[s.name] = s.value;
+                    }
+                }
+            }
+            if (!lockAtDesignTime && (element instanceof HTMLElement || element instanceof SVGElement)) {
+                requestAnimationFrame(() => element.style.pointerEvents = 'auto');
+            }
+            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._insertChildInternal(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 copy.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 copy.js

@@ -0,0 +1,96 @@
+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 {
+    _parserUrl;
+    constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js') {
+        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;
+    }
+    _parseDiv = document.createElement("div");
+    _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
+        let designItem = null;
+        if (item.nodeType == 1) {
+            let element;
+            let manualCreatedElement = false;
+            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);
+                manualCreatedElement = true;
+            }
+            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.attributes.set(a, attr[a]);
+                    if (manualCreatedElement) {
+                        element.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.styles.set(s.name, s.value);
+                    if (manualCreatedElement) {
+                        element.style[s.name] = s.value;
+                    }
+                }
+            }
+            if (!lockAtDesignTime && (element instanceof HTMLElement || element instanceof SVGElement)) {
+                requestAnimationFrame(() => element.style.pointerEvents = 'auto');
+            }
+            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._insertChildInternal(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/placementService/FlexBoxPlacementService.js

@@ -1,3 +1,4 @@
+import { DefaultPlacementService } from './DefaultPlacementService.js';
 export class FlexBoxPlacementService {
     enterContainer(container, items) {
         for (let i of items) {
@@ -9,6 +10,12 @@ export class FlexBoxPlacementService {
         }
     }
     leaveContainer(container, items) {
+        for (let i of items) {
+            if (!i.lastContainerSize) {
+                const rect = i.element.getBoundingClientRect();
+                i.lastContainerSize = { width: rect.width, height: rect.height };
+            }
+        }
     }
     serviceForContainer(container, containerStyle) {
         if (containerStyle.display == 'flex' || containerStyle.display == 'inline-flex')
@@ -28,17 +35,68 @@ export class FlexBoxPlacementService {
         return container.element.getBoundingClientRect();
     }
     placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        return null;
+        const defaultPlacementService = container.serviceContainer.getLastServiceWhere('containerService', x => x instanceof DefaultPlacementService);
+        return defaultPlacementService.placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items);
     }
     place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        /*let direction = getComputedStyle(container.element).flexDirection;
-        
-        const pos = (<IDesignerCanvas><unknown>placementView).getNormalizedEventCoordinates(event);
-        const posElement = (<IDesignerCanvas><unknown>placementView).getNormalizedElementCoordinates(items[0].element)
-    
-        for (let e of container.element.children) {
-    
-        }*/
+        const pos = placementView.getNormalizedEventCoordinates(event);
+        const style = getComputedStyle(container.element);
+        const childrenWithPos = Array.from(container.children()).filter(x => !x.isEmptyTextNode).map(x => [x, placementView.getNormalizedElementCoordinates(x.element)]);
+        if (style.flexDirection == 'row') {
+            childrenWithPos.sort(x => x[1].x);
+            let elBefore = null;
+            for (let c of childrenWithPos) {
+                if (c[1].x + c[1].width / 2 < pos.x) {
+                    elBefore = c;
+                }
+            }
+            let posBefore = childrenWithPos.indexOf(elBefore);
+            let posDrag = childrenWithPos.indexOf(childrenWithPos.find(x => x[0] == items[0]));
+            if (elBefore && elBefore[0] != items[0]) {
+                if (posBefore + 1 === posDrag)
+                    return;
+                let cg = items[0].openGroup('move in flexbox');
+                items[0].remove();
+                elBefore[0].insertAdjacentElement(items[0], 'afterend');
+                cg.commit();
+            }
+            else if (elBefore == null) {
+                if (posDrag == 0)
+                    return;
+                let cg = items[0].openGroup('move in flexbox');
+                items[0].remove();
+                container.insertChild(items[0], 0);
+                cg.commit();
+            }
+        }
+        else if (style.flexDirection == 'column') {
+            childrenWithPos.sort(x => x[1].y);
+            let elBefore = null;
+            for (let c of childrenWithPos) {
+                if (c[1].y + c[1].height / 2 < pos.y) {
+                    elBefore = c;
+                }
+            }
+            let posBefore = childrenWithPos.indexOf(elBefore);
+            let posDrag = childrenWithPos.indexOf(childrenWithPos.find(x => x[0] == items[0]));
+            if (elBefore && elBefore[0] != items[0]) {
+                if (posBefore + 1 === posDrag)
+                    return;
+                let cg = items[0].openGroup('move in flexbox');
+                items[0].remove();
+                elBefore[0].insertAdjacentElement(items[0], 'afterend');
+                cg.commit();
+            }
+            else if (elBefore == null) {
+                if (posDrag == 0)
+                    return;
+                let cg = items[0].openGroup('move in flexbox');
+                items[0].remove();
+                container.insertChild(items[0], 0);
+                cg.commit();
+            }
+        }
+        placementView.extensionManager.refreshAllExtensions([container]);
     }
     finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
     }

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

@@ -3,7 +3,7 @@ import { IExtensionManager } from "./IExtensionManger";
 import { OverlayLayerView } from '../overlayLayerView';
 import { OverlayLayer } from './OverlayLayer';
 export declare abstract class AbstractExtensionBase {
-    protected overlays: SVGGraphicsElement[];
+    protected overlays: SVGElement[];
     protected overlayLayerView: OverlayLayerView;
     protected extensionManager: IExtensionManager;
     protected designerCanvas: IDesignerCanvas;
@@ -13,4 +13,5 @@ export declare abstract class AbstractExtensionBase {
     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;
+    protected _drawTextWithBackground(text: string, x: number, y: number, backgroundColor: string, className?: string, existingEls?: [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement], overlayLayer?: OverlayLayer): [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement];
 }

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

@@ -47,4 +47,11 @@ export class AbstractExtensionBase {
         }
         return newText;
     }
+    _drawTextWithBackground(text, x, y, backgroundColor, className, existingEls, overlayLayer) {
+        const newEls = this.overlayLayerView.drawTextWithBackground(text, x, y, backgroundColor, className, existingEls, overlayLayer);
+        if (!existingEls) {
+            this.overlays.push(...newEls);
+        }
+        return newEls;
+    }
 }

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

@@ -7,9 +7,7 @@ export declare class PositionExtension extends AbstractExtension {
     private _line2;
     private _line3;
     private _line4;
-    private _rectX;
     private _textX;
-    private _rectY;
     private _textY;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;

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

@@ -4,9 +4,7 @@ export class PositionExtension extends AbstractExtension {
     _line2;
     _line3;
     _line4;
-    _rectX;
     _textX;
-    _rectY;
     _textY;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
@@ -31,12 +29,12 @@ export class PositionExtension extends AbstractExtension {
         this._line4.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
         let x = Math.round(itemRect.x - itemParentRect.x);
         let y = Math.round(itemRect.y - itemParentRect.y);
-        this._rectX = this._drawRect(itemParentRect.x + x / 2 - 10, itemRect.y + itemRect.height / 2 - 8, 20, 16, 'svg-position-text-rect', this._rectX);
-        this._textX = this._drawText('' + x, itemParentRect.x + x / 2 - 9, itemRect.y + itemRect.height / 2 + 4, null, this._textX);
-        this._textX.style.fontSize = '12px';
-        this._rectY = this._drawRect(itemRect.x + itemRect.width / 2 - 10, itemParentRect.y + y / 2 - 8, 20, 16, 'svg-position-text-rect', this._rectY);
-        this._textY = this._drawText('' + y, itemRect.x + itemRect.width / 2 - 10, itemParentRect.y + y / 2 + 4, null, this._textY);
-        this._textY.style.fontSize = '12px';
+        this._textX = this._drawTextWithBackground('' + x, itemParentRect.x + x / 2, itemRect.y + itemRect.height / 2, 'white', 'svg-position-text', this._textX);
+        this._textX[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
+        this._textX[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
+        this._textY = this._drawTextWithBackground('' + y, itemRect.x + itemRect.width / 2, itemParentRect.y + y / 2, 'white', 'svg-position-text', this._textY);
+        this._textY[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
+        this._textY[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -11,6 +11,6 @@ export class PositionExtensionProvider {
         return new PositionExtension(extensionManager, designerView, designItem);
     }
     style = css `
-    .svg-position-text-rect { fill: white; }
+    .svg-position-text { text-anchor: middle; alignment-baseline: central; }
   `;
 }

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

@@ -7,6 +7,8 @@ export class ResizeExtensionProvider {
         this.resizeAllSelected = resizeAllSelected;
     }
     shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.element instanceof SVGElement)
+            return false;
         return designItem.nodeType == NodeType.Element;
     }
     getExtension(extensionManager, designerView, designItem) {

package/dist/elements/widgets/designerView/extensions/svg/EllipsisExtension.d.ts

@@ -0,0 +1,29 @@
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { AbstractExtension } from "../AbstractExtension";
+import { IExtensionManager } from "../IExtensionManger";
+export declare class EllipsisExtension extends AbstractExtension {
+    private _parentRect;
+    private _ellipseElement;
+    private _circlePos;
+    private _startPos;
+    private _lastPos;
+    private _originalPoint;
+    private _cx;
+    private _cy;
+    private _rx;
+    private _ry;
+    private _newRx;
+    private _newRy;
+    private _circle1;
+    private _circle2;
+    private _circle3;
+    private _circle4;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    pointerEvent(event: PointerEvent, circle: SVGCircleElement, e: SVGEllipseElement, index: number): void;
+    _drawPathCircle(x: number, y: number, e: SVGEllipseElement, index: number): SVGCircleElement;
+    _redrawPathCircle(x: number, y: number, oldCircle: SVGCircleElement): SVGCircleElement;
+    refresh(): void;
+    dispose(): void;
+}