@node-projects/web-component-designer 0.0.82 → 0.0.86

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

@@ -1,20 +1,20 @@
-import { AbstractExtension } from "./AbstractExtension";
-const offset = 3;
-export class MouseOverExtension extends AbstractExtension {
-    _rect;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        this.refresh();
-    }
-    refresh() {
-        let itemRect = this.extendedItem.element.getBoundingClientRect();
-        const xOffset = itemRect.x - this.designerCanvas.containerBoundingRect.x;
-        const yOffset = itemRect.y - this.designerCanvas.containerBoundingRect.y;
-        this._rect = this._drawRect((xOffset - offset) / this.designerCanvas.scaleFactor, (yOffset - offset) / this.designerCanvas.scaleFactor, (itemRect.width + offset + offset) / this.designerCanvas.scaleFactor, (itemRect.height + offset + offset) / this.designerCanvas.scaleFactor, 'svg-hover', this._rect);
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}
+import { AbstractExtension } from "./AbstractExtension";
+const offset = 3;
+export class MouseOverExtension extends AbstractExtension {
+    _rect;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        let itemRect = this.extendedItem.element.getBoundingClientRect();
+        const xOffset = itemRect.x - this.designerCanvas.containerBoundingRect.x;
+        const yOffset = itemRect.y - this.designerCanvas.containerBoundingRect.y;
+        this._rect = this._drawRect((xOffset - offset) / this.designerCanvas.scaleFactor, (yOffset - offset) / this.designerCanvas.scaleFactor, (itemRect.width + offset + offset) / this.designerCanvas.scaleFactor, (itemRect.height + offset + offset) / this.designerCanvas.scaleFactor, 'svg-hover', this._rect);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -1,10 +1,10 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class MouseOverExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-}
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class MouseOverExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

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

@@ -1,13 +1,13 @@
-import { MouseOverExtension } from "./MouseOverExtension";
-import { css } from "@node-projects/base-custom-webcomponent";
-export class MouseOverExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        return true;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new MouseOverExtension(extensionManager, designerView, designItem);
-    }
+import { MouseOverExtension } from "./MouseOverExtension";
+import { css } from "@node-projects/base-custom-webcomponent";
+export class MouseOverExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new MouseOverExtension(extensionManager, designerView, designItem);
+    }
     style = css `
     .svg-hover { stroke: #90caf9; fill: none; }
-  `;
-}
+  `;
+}

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

@@ -1,5 +1,5 @@
-export declare enum OverlayLayer {
-    Background = 10,
-    Normal = 20,
-    Foregorund = 30
-}
+export declare enum OverlayLayer {
+    Background = 10,
+    Normal = 20,
+    Foregorund = 30
+}

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

@@ -1,6 +1,6 @@
-export var OverlayLayer;
-(function (OverlayLayer) {
-    OverlayLayer[OverlayLayer["Background"] = 10] = "Background";
-    OverlayLayer[OverlayLayer["Normal"] = 20] = "Normal";
-    OverlayLayer[OverlayLayer["Foregorund"] = 30] = "Foregorund";
-})(OverlayLayer || (OverlayLayer = {}));
+export var OverlayLayer;
+(function (OverlayLayer) {
+    OverlayLayer[OverlayLayer["Background"] = 10] = "Background";
+    OverlayLayer[OverlayLayer["Normal"] = 20] = "Normal";
+    OverlayLayer[OverlayLayer["Foregorund"] = 30] = "Foregorund";
+})(OverlayLayer || (OverlayLayer = {}));

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

@@ -1,21 +1,23 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { AbstractExtension } from "./AbstractExtension";
-import "../../../helper/PathDataPolyfill";
-import { IExtensionManager } from "./IExtensionManger";
-import { PathData } from "../../../helper/PathDataPolyfill";
-export declare class PathExtension extends AbstractExtension {
-    private _lastPos;
-    private _parentRect;
-    private _startPos;
-    private _circlePos;
-    private _originalPathPoint;
-    private _pathdata;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    pointerEvent(event: PointerEvent, circle: SVGCircleElement, p: PathData, index: number): void;
-    _drawPathCircle(x: number, y: number, p: PathData, index: number): void;
-    _drawPathLine(x1: number, y1: number, x2: number, y2: number): void;
-    refresh(): void;
-    dispose(): void;
-}
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from "./AbstractExtension";
+import "../../../helper/PathDataPolyfill";
+import { IPoint } from "../../../../interfaces/IPoint";
+import { IExtensionManager } from "./IExtensionManger";
+import { PathData } from "../../../helper/PathDataPolyfill";
+export declare class PathExtension extends AbstractExtension {
+    private _lastPos;
+    private _parentRect;
+    private _startPos;
+    private _circlePos;
+    private _originalPathPoint;
+    private _pathdata;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    pointerEvent(event: PointerEvent, circle: SVGCircleElement, p: PathData, index: number): void;
+    _drawPathCircle(x: number, y: number, p: PathData, index: number): void;
+    _drawPathLine(x1: number, y1: number, x2: number, y2: number): void;
+    _checkCircleIndex(p: PathData, circlePos: IPoint): boolean;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -1,214 +1,249 @@
-import { AbstractExtension } from "./AbstractExtension";
-import "../../../helper/PathDataPolyfill";
-import { EventNames } from "../../../../enums/EventNames";
-import { createPathD } from "../../../helper/PathDataPolyfill";
-import { ContextMenuHelper } from "../../../helper/contextMenu/ContextMenuHelper";
-export class PathExtension extends AbstractExtension {
-    //private _itemRect: DOMRect;
-    //private _svgRect: DOMRect;
-    _lastPos;
-    _parentRect;
-    _startPos;
-    _circlePos;
-    _originalPathPoint;
-    _pathdata;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        //this._itemRect = this.extendedItem.element.getBoundingClientRect();
-        //this._svgRect = (<SVGGeometryElement>this.extendedItem.element).ownerSVGElement.getBoundingClientRect();
-        this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
-        this._pathdata = this.extendedItem.node.getPathData({ normalize: false });
-        for (let p of this._pathdata) {
-            switch (p.type) {
-                case 'M':
-                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
-                    this._lastPos = { x: p.values[0], y: p.values[1] };
-                    break;
-                case 'L':
-                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
-                    this._lastPos = { x: p.values[0], y: p.values[1] };
-                    break;
-                case 'H':
-                    break;
-                case 'V':
-                    break;
-                case 'Z':
-                    break;
-                case 'C':
-                    this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
-                    this._drawPathLine(p.values[4], p.values[5], p.values[2], p.values[3]);
-                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
-                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
-                    this._drawPathCircle(p.values[4], p.values[5], p, 4);
-                    this._lastPos = { x: p.values[4], y: p.values[5] };
-                    break;
-                case 'c':
-                    this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
-                    this._drawPathLine(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5], p.values[2], p.values[3]);
-                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
-                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
-                    this._drawPathCircle(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5], p, 4);
-                    this._lastPos = { x: p.values[4], y: p.values[5] };
-                    break;
-                case 'S':
-                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
-                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
-                    this._lastPos = { x: p.values[2], y: p.values[3] };
-                    break;
-                case 'Q':
-                    this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
-                    this._drawPathLine(p.values[0], p.values[1], p.values[2], p.values[3]);
-                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
-                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
-                    this._lastPos = { x: p.values[2], y: p.values[3] };
-                    break;
-                case 'T':
-                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
-                    this._lastPos = { x: p.values[0], y: p.values[1] };
-                    break;
-                case 'A':
-                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
-                    this._drawPathCircle(p.values[5], p.values[6], p, 5);
-                    this._lastPos = { x: p.values[0], y: p.values[1] };
-                    break;
-            }
-        }
-    }
-    pointerEvent(event, circle, p, index) {
-        event.stopPropagation();
-        switch (event.type) {
-            case EventNames.PointerDown:
-                event.target.setPointerCapture(event.pointerId);
-                this._startPos = { x: event.x, y: event.y };
-                this._circlePos = { x: parseFloat(circle.getAttribute("cx")), y: parseFloat(circle.getAttribute("cy")) };
-                this._originalPathPoint = { x: p.values[index], y: p.values[index + 1] };
-                break;
-            case EventNames.PointerMove:
-                if (this._startPos && event.buttons > 0) {
-                    this._lastPos = { x: this._startPos.x, y: this._startPos.y };
-                    const cx = event.x - this._lastPos.x + this._circlePos.x;
-                    const cy = event.y - this._lastPos.y + this._circlePos.y;
-                    const dx = cx - this._circlePos.x;
-                    const dy = cy - this._circlePos.y;
-                    if (event.shiftKey) {
-                        if (Math.abs(dx) >= Math.abs(dy)) {
-                            p.values[index] = this._originalPathPoint.x + dx;
-                            circle.setAttribute("cx", (this._circlePos.x + dx).toString());
-                            p.values[index + 1] = this._originalPathPoint.y;
-                            circle.setAttribute("cy", (this._circlePos.y).toString());
-                        }
-                        else {
-                            p.values[index] = this._originalPathPoint.x;
-                            circle.setAttribute("cx", (this._circlePos.x).toString());
-                            p.values[index + 1] = this._originalPathPoint.y + dy;
-                            circle.setAttribute("cy", (this._circlePos.y + dy).toString());
-                        }
-                    }
-                    else {
-                        p.values[index] = this._originalPathPoint.x + dx;
-                        p.values[index + 1] = this._originalPathPoint.y + dy;
-                        circle.setAttribute("cx", (this._circlePos.x + dx).toString());
-                        circle.setAttribute("cy", (this._circlePos.y + dy).toString());
-                    }
-                    this.extendedItem.element.setAttribute("d", createPathD(this._pathdata));
-                }
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                this._startPos = null;
-                this._circlePos = null;
-                this._lastPos = null;
-                this.extendedItem.setAttribute('d', createPathD(this._pathdata));
-                break;
-        }
-    }
-    _drawPathCircle(x, y, p, index) {
-        const items = [];
-        const pidx = this._pathdata.indexOf(p);
-        items.push({
-            title: 'delete point', action: () => {
-                this._pathdata.splice(pidx, 1);
-                if (pidx == 0)
-                    this._pathdata[0].type = 'M';
-                this.extendedItem.setAttribute('d', createPathD(this._pathdata));
-            }
-        });
-        items.push({
-            title: 'insert point after', action: () => {
-                const l = { type: 'L', values: [p.values[0], p.values[1]] };
-                this._pathdata.splice(pidx + 1, 0, l);
-                this.extendedItem.setAttribute('d', createPathD(this._pathdata));
-            }
-        });
-        if (pidx != 0) {
-            items.push({
-                title: 'convert to quadratic bézier', action: () => {
-                    const p1x = this._pathdata[pidx - 1].values[0];
-                    const p1y = this._pathdata[pidx - 1].values[1];
-                    const p2x = this._pathdata[pidx].values[0];
-                    const p2y = this._pathdata[pidx].values[1];
-                    const mpx = (p2x + p1x) * 0.5;
-                    const mpy = (p2y + p1y) * 0.5;
-                    const theta = Math.atan2(p2y - p1y, p2x - p1x) - Math.PI / 2;
-                    const offset = 50;
-                    const c1x = mpx + offset * Math.cos(theta);
-                    const c1y = mpy + offset * Math.sin(theta);
-                    this._pathdata[pidx].type = 'Q';
-                    this._pathdata[pidx].values[0] = c1x;
-                    this._pathdata[pidx].values[1] = c1y;
-                    this._pathdata[pidx].values[2] = p2x;
-                    this._pathdata[pidx].values[3] = p2y;
-                    this.extendedItem.setAttribute('d', createPathD(this._pathdata));
-                }
-            });
-        }
-        if (pidx != 0) {
-            items.push({
-                title: 'convert to cubic bézier', action: () => {
-                    const p1x = this._pathdata[pidx - 1].values[0];
-                    const p1y = this._pathdata[pidx - 1].values[1];
-                    const p2x = this._pathdata[pidx].values[0];
-                    const p2y = this._pathdata[pidx].values[1];
-                    const mpx = (p2x + p1x) * 0.5;
-                    const mpy = (p2y + p1y) * 0.5;
-                    const theta = Math.atan2(p2y - p1y, p2x - p1x) - Math.PI / 2;
-                    const offset = 50;
-                    let c1x = mpx + offset * Math.cos(theta);
-                    let c1y = mpy + offset * Math.sin(theta);
-                    c1x = p.values[0] + 2 * (p1x - p.values[0]) / 3;
-                    c1y = p.values[1] + 2 * (p1y - p.values[1]) / 3;
-                    const c2x = x + 2 * (p1x - x) / 3;
-                    const c2y = y + 2 * (p1y - y) / 3;
-                    this._pathdata[pidx].type = 'C';
-                    this._pathdata[pidx].values[0] = c1x;
-                    this._pathdata[pidx].values[1] = c1y;
-                    this._pathdata[pidx].values[2] = c2x;
-                    this._pathdata[pidx].values[3] = c2y;
-                    this._pathdata[pidx].values[4] = p2x;
-                    this._pathdata[pidx].values[5] = p2y;
-                    this.extendedItem.setAttribute('d', createPathD(this._pathdata));
-                }
-            });
-        }
-        let circle = this._drawCircle(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y, 5, 'svg-path');
-        circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event, circle, p, index));
-        circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, circle, p, index));
-        circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, circle, p, index));
-        circle.addEventListener(EventNames.ContextMenu, event => {
-            event.preventDefault();
-            ContextMenuHelper.showContextMenu(null, event, null, items);
-        });
-    }
-    _drawPathLine(x1, y1, x2, y2) {
-        this._drawLine(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x1, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y1, this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x2, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y2, 'svg-path-line');
-    }
-    refresh() {
-        this._removeAllOverlays();
-        this.extend();
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}
+import { AbstractExtension } from "./AbstractExtension";
+import "../../../helper/PathDataPolyfill";
+import { EventNames } from "../../../../enums/EventNames";
+import { createPathD } from "../../../helper/PathDataPolyfill";
+import { ContextMenuHelper } from "../../../helper/contextMenu/ContextMenuHelper";
+export class PathExtension extends AbstractExtension {
+    //private _itemRect: DOMRect;
+    //private _svgRect: DOMRect;
+    _lastPos;
+    _parentRect;
+    _startPos;
+    _circlePos;
+    _originalPathPoint;
+    _pathdata;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        //this._itemRect = this.extendedItem.element.getBoundingClientRect();
+        //this._svgRect = (<SVGGeometryElement>this.extendedItem.element).ownerSVGElement.getBoundingClientRect();
+        this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
+        this._pathdata = this.extendedItem.node.getPathData({ normalize: false });
+        for (let p of this._pathdata) {
+            switch (p.type) {
+                case 'M':
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._lastPos = { x: p.values[0], y: p.values[1] };
+                    break;
+                case 'L':
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._lastPos = { x: p.values[0], y: p.values[1] };
+                    break;
+                case 'H':
+                    break;
+                case 'V':
+                    break;
+                case 'Z':
+                    break;
+                case 'C':
+                    this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
+                    this._drawPathLine(p.values[4], p.values[5], p.values[2], p.values[3]);
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
+                    this._drawPathCircle(p.values[4], p.values[5], p, 4);
+                    this._lastPos = { x: p.values[4], y: p.values[5] };
+                    break;
+                case 'c':
+                    this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
+                    this._drawPathLine(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5], p.values[2], p.values[3]);
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
+                    this._drawPathCircle(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5], p, 4);
+                    this._lastPos = { x: p.values[4], y: p.values[5] };
+                    break;
+                case 'S':
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
+                    this._lastPos = { x: p.values[2], y: p.values[3] };
+                    break;
+                case 'Q':
+                    this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
+                    this._drawPathLine(p.values[0], p.values[1], p.values[2], p.values[3]);
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
+                    this._lastPos = { x: p.values[2], y: p.values[3] };
+                    break;
+                case 'T':
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._lastPos = { x: p.values[0], y: p.values[1] };
+                    break;
+                case 'A':
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._drawPathCircle(p.values[5], p.values[6], p, 5);
+                    this._lastPos = { x: p.values[0], y: p.values[1] };
+                    break;
+            }
+        }
+    }
+    pointerEvent(event, circle, p, index) {
+        event.stopPropagation();
+        switch (event.type) {
+            case EventNames.PointerDown:
+                event.target.setPointerCapture(event.pointerId);
+                this._startPos = { x: event.x, y: event.y };
+                this._circlePos = { x: parseFloat(circle.getAttribute("cx")), y: parseFloat(circle.getAttribute("cy")) };
+                this._originalPathPoint = { x: p.values[index], y: p.values[index + 1] };
+                break;
+            case EventNames.PointerMove:
+                if (this._startPos && event.buttons > 0) {
+                    this._lastPos = { x: this._startPos.x, y: this._startPos.y };
+                    const cx = event.x - this._lastPos.x + this._circlePos.x;
+                    const cy = event.y - this._lastPos.y + this._circlePos.y;
+                    const dx = cx - this._circlePos.x;
+                    const dy = cy - this._circlePos.y;
+                    if (event.shiftKey) {
+                        if (Math.abs(dx) >= Math.abs(dy)) {
+                            p.values[index] = this._originalPathPoint.x + dx;
+                            circle.setAttribute("cx", (this._circlePos.x + dx).toString());
+                            p.values[index + 1] = this._originalPathPoint.y;
+                            circle.setAttribute("cy", (this._circlePos.y).toString());
+                        }
+                        else {
+                            p.values[index] = this._originalPathPoint.x;
+                            circle.setAttribute("cx", (this._circlePos.x).toString());
+                            p.values[index + 1] = this._originalPathPoint.y + dy;
+                            circle.setAttribute("cy", (this._circlePos.y + dy).toString());
+                        }
+                    }
+                    else {
+                        p.values[index] = this._originalPathPoint.x + dx;
+                        p.values[index + 1] = this._originalPathPoint.y + dy;
+                        circle.setAttribute("cx", (this._circlePos.x + dx).toString());
+                        circle.setAttribute("cy", (this._circlePos.y + dy).toString());
+                    }
+                    this.extendedItem.element.setAttribute("d", createPathD(this._pathdata));
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                this._startPos = null;
+                this._circlePos = null;
+                this._lastPos = null;
+                this.extendedItem.setAttribute('d', createPathD(this._pathdata));
+                break;
+        }
+    }
+    _drawPathCircle(x, y, p, index) {
+        let circle = this._drawCircle(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y, 5, 'svg-path');
+        let circlePos = { x: x, y: y };
+        const items = [];
+        const pidx = this._pathdata.indexOf(p);
+        items.push({
+            title: 'delete point', action: () => {
+                this._pathdata.splice(pidx, 1);
+                if (pidx == 0)
+                    this._pathdata[0].type = 'M';
+                this.extendedItem.setAttribute('d', createPathD(this._pathdata));
+            }
+        });
+        items.push({
+            title: 'insert point after', action: () => {
+                const l = { type: 'L', values: [p.values[0], p.values[1]] };
+                this._pathdata.splice(pidx + 1, 0, l);
+                this.extendedItem.setAttribute('d', createPathD(this._pathdata));
+            }
+        });
+        if (pidx != 0 && this._checkCircleIndex(p, circlePos)) {
+            items.push({
+                title: 'convert to quadratic bézier', action: () => {
+                    let p1x = this._pathdata[pidx - 1].values[0];
+                    let p1y = this._pathdata[pidx - 1].values[1];
+                    if (this._pathdata[pidx - 1].type === 'C') {
+                        p1x = this._pathdata[pidx - 1].values[4];
+                        p1y = this._pathdata[pidx - 1].values[5];
+                    }
+                    else if (this._pathdata[pidx - 1].type === 'Q') {
+                        p1x = this._pathdata[pidx - 1].values[2];
+                        p1y = this._pathdata[pidx - 1].values[3];
+                    }
+                    const p2x = this._pathdata[pidx].values[0];
+                    const p2y = this._pathdata[pidx].values[1];
+                    const mpx = (p2x + p1x) * 0.5;
+                    const mpy = (p2y + p1y) * 0.5;
+                    const theta = Math.atan2(p2y - p1y, p2x - p1x) - Math.PI / 2;
+                    const offset = 50;
+                    const c1x = mpx + offset * Math.cos(theta);
+                    const c1y = mpy + offset * Math.sin(theta);
+                    this._pathdata[pidx].type = 'Q';
+                    this._pathdata[pidx].values[0] = c1x;
+                    this._pathdata[pidx].values[1] = c1y;
+                    this._pathdata[pidx].values[2] = p2x;
+                    this._pathdata[pidx].values[3] = p2y;
+                    this.extendedItem.setAttribute('d', createPathD(this._pathdata));
+                }
+            });
+        }
+        if (pidx != 0 && this._checkCircleIndex(p, circlePos)) {
+            items.push({
+                title: 'convert to cubic bézier', action: () => {
+                    let p1x = this._pathdata[pidx - 1].values[0];
+                    let p1y = this._pathdata[pidx - 1].values[1];
+                    if (this._pathdata[pidx - 1].type === 'C') {
+                        p1x = this._pathdata[pidx - 1].values[4];
+                        p1y = this._pathdata[pidx - 1].values[5];
+                    }
+                    else if (this._pathdata[pidx - 1].type === 'Q') {
+                        p1x = this._pathdata[pidx - 1].values[2];
+                        p1y = this._pathdata[pidx - 1].values[3];
+                    }
+                    const p2x = this._pathdata[pidx].values[0];
+                    const p2y = this._pathdata[pidx].values[1];
+                    const mpx = (p2x + p1x) * 0.5;
+                    const mpy = (p2y + p1y) * 0.5;
+                    const theta = Math.atan2(p2y - p1y, p2x - p1x) - Math.PI / 2;
+                    const offset = 50;
+                    let c1x = mpx + offset * Math.cos(theta);
+                    let c1y = mpy + offset * Math.sin(theta);
+                    c1x = p.values[0] + 2 * (p1x - p.values[0]) / 3;
+                    c1y = p.values[1] + 2 * (p1y - p.values[1]) / 3;
+                    const c2x = x + 2 * (p1x - x) / 3;
+                    const c2y = y + 2 * (p1y - y) / 3;
+                    this._pathdata[pidx].type = 'C';
+                    this._pathdata[pidx].values[0] = c1x;
+                    this._pathdata[pidx].values[1] = c1y;
+                    this._pathdata[pidx].values[2] = c2x;
+                    this._pathdata[pidx].values[3] = c2y;
+                    this._pathdata[pidx].values[4] = p2x;
+                    this._pathdata[pidx].values[5] = p2y;
+                    this.extendedItem.setAttribute('d', createPathD(this._pathdata));
+                }
+            });
+        }
+        circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event, circle, p, index));
+        circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, circle, p, index));
+        circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, circle, p, index));
+        circle.addEventListener(EventNames.ContextMenu, event => {
+            event.preventDefault();
+            ContextMenuHelper.showContextMenu(null, event, null, items);
+        });
+    }
+    _drawPathLine(x1, y1, x2, y2) {
+        this._drawLine(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x1, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y1, this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x2, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y2, 'svg-path-line');
+    }
+    _checkCircleIndex(p, circlePos) {
+        switch (p.type) {
+            case 'M':
+            case 'L':
+                if (p.values[0] == circlePos.x && p.values[1] == circlePos.y)
+                    return true;
+                break;
+            case 'Q':
+                if (p.values[2] == circlePos.x && p.values[3] == circlePos.y)
+                    return true;
+                break;
+            case 'C':
+                if (p.values[4] == circlePos.x && p.values[5] == circlePos.y)
+                    return true;
+                break;
+        }
+        return false;
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}