@node-projects/web-component-designer 0.0.80 → 0.0.81

package/dist/elements/helper/PathDataPolyfill.d.ts

@@ -1,42 +1,42 @@
 import { IPoint } from "../../interfaces/IPoint.js";
 export {};
-declare type PathDataM = {
+export declare type PathDataM = {
     type: 'M' | 'm';
     values: [x: number, y: number];
 };
-declare type PathDataL = {
+export declare type PathDataL = {
     type: 'L' | 'l';
     values: [x: number, y: number];
 };
-declare type PathDataT = {
+export declare type PathDataT = {
     type: 'T' | 't';
     values: [x: number, y: number];
 };
-declare type PathDataH = {
+export declare type PathDataH = {
     type: 'H' | 'h';
     values: [x: number];
 };
-declare type PathDataV = {
+export declare type PathDataV = {
     type: 'V' | 'v';
     values: [y: number];
 };
-declare type PathDataZ = {
+export declare type PathDataZ = {
     type: 'Z' | 'z';
     values?: [];
 };
-declare type PathDataC = {
+export declare type PathDataC = {
     type: 'C' | 'c';
     values: [x1: number, y1: number, x2: number, y2: number, x: number, y: number];
 };
-declare type PathDataS = {
+export declare type PathDataS = {
     type: 'S' | 's';
     values: [x2: number, y2: number, x: number, y: number];
 };
-declare type PathDataQ = {
+export declare type PathDataQ = {
     type: 'Q' | 'q';
     values: [x1: number, y1: number, x: number, y: number];
 };
-declare type PathDataA = {
+export declare type PathDataA = {
     type: 'A' | 'a';
     values: [rx: number, ry: number, ang: number, flag1: 0 | 1, flag2: 0 | 1, x: number, y: number];
 };
@@ -47,6 +47,7 @@ export declare function straightenLine(p1: IPoint, p2: IPoint): IPoint;
 export declare function calculateNormLegth(p1: IPoint, p2: IPoint): number;
 export declare function calculateAlpha(p1: IPoint, p2: IPoint): number;
 export declare function moveSVGPath(path: SVGPathElement, xFactor: number, yFactor: number): string;
+export declare function createPathD(path: PathData[]): string;
 declare global {
     interface SVGGraphicsElement {
         getPathData(options?: {

package/dist/elements/helper/PathDataPolyfill.js

@@ -941,3 +941,38 @@ export function moveSVGPath(path, xFactor, yFactor) {
     }
     return newPathData;
 }
+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;
+        }
+    }
+    return pathD;
+}

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -52,6 +52,8 @@ import { DrawRectTool } from '../widgets/designerView/tools/DrawRectTool.js';
 import { DrawEllipsisTool } from '../widgets/designerView/tools/DrawEllipsisTool.js';
 import { DrawLineTool } from '../widgets/designerView/tools/DrawLineTool.js';
 import { HtmlWriterService } from './htmlWriterService/HtmlWriterService.js';
+import { RectContextMenu } from '../widgets/designerView/extensions/contextMenu/RectContextMenu.js';
+import { PathContextMenu } from '../widgets/designerView/extensions/contextMenu/PathContextMenu.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -125,7 +127,9 @@ export function createDefaultServiceContainer() {
         new CopyPasteContextMenu(),
         new ZMoveContextMenu(),
         new MultipleItemsSelectedContextMenu(),
-        new ItemsBelowContextMenu()
+        new PathContextMenu(),
+        new RectContextMenu(),
+        new ItemsBelowContextMenu(),
     ];
     return serviceContainer;
 }

package/dist/elements/services/htmlWriterService/AbstractHtmlWriterService.d.ts

@@ -0,0 +1,10 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IHtmlWriterService } from './IHtmlWriterService.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
+import { IStringPosition } from './IStringPosition.js';
+export declare abstract class AbstractHtmlWriterService implements IHtmlWriterService {
+    abstract write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): any;
+    writeAttributes(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, options: IHtmlWriterOptions): void;
+    writeStyles(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, options: IHtmlWriterOptions): void;
+}

package/dist/elements/services/htmlWriterService/AbstractHtmlWriterService.js

@@ -0,0 +1,62 @@
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { CssCombiner } from '../../helper/CssCombiner.js';
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
+export class AbstractHtmlWriterService {
+    writeAttributes(indentedTextWriter, designItem, options) {
+        if (designItem.hasAttributes) {
+            for (const a of designItem.attributes) {
+                indentedTextWriter.write(' ');
+                if (typeof a[1] === 'string') {
+                    if (a[1] === "")
+                        indentedTextWriter.write(a[0]);
+                    else {
+                        if (options.parseJsonInAttributes &&
+                            ((a[1].startsWith('{') && !a[1].startsWith('{{') && a[1].endsWith('}')) ||
+                                (a[1].startsWith('[') && !a[1].startsWith('[[') && a[1].endsWith(']')))) {
+                            try {
+                                let j = JSON.parse(a[1]);
+                                let txt;
+                                if (options.jsonWriteMode == 'beauty')
+                                    txt = JSON.stringify(j, null, 2);
+                                else
+                                    txt = JSON.stringify(j);
+                                indentedTextWriter.write(a[0] + '=\'' + DomConverter.normalizeAttributeValue(txt, true) + '\'');
+                                continue;
+                            }
+                            catch { }
+                        }
+                        const content = DomConverter.normalizeAttributeValue(a[1]);
+                        if (content.indexOf('"')) {
+                            const contentSingle = DomConverter.normalizeAttributeValue(a[1], true);
+                            if (contentSingle.length < content.length)
+                                indentedTextWriter.write(a[0] + '=\'' + contentSingle + '\'');
+                            else
+                                indentedTextWriter.write(a[0] + '="' + content + '"');
+                        }
+                        else
+                            indentedTextWriter.write(a[0] + '="' + content + '"');
+                    }
+                }
+                else if (!a[1])
+                    indentedTextWriter.write(a[0]);
+                else {
+                    //TODO: writing of bindings, really ???
+                }
+            }
+        }
+    }
+    writeStyles(indentedTextWriter, designItem, options) {
+        if (designItem.hasStyles) {
+            indentedTextWriter.write(' style="');
+            let styles = designItem.styles;
+            if (options.compressCssToShorthandProperties)
+                styles = CssCombiner.combine(styles);
+            for (const s of styles) {
+                if (s[0]) {
+                    indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
+                }
+            }
+            indentedTextWriter.write('"');
+        }
+    }
+}

package/dist/elements/services/htmlWriterService/FormatingHtmlWriterService.d.ts

@@ -1,8 +1,8 @@
-import { IDesignItem } from '../../item/IDesignItem';
-import { IHtmlWriterService } from './IHtmlWriterService';
-import { IHtmlWriterOptions } from './IHtmlWriterOptions';
-import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
-import { IStringPosition } from './IStringPosition';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IHtmlWriterService } from './IHtmlWriterService.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
+import { IStringPosition } from './IStringPosition.js';
 declare enum ElementContainerType {
     block = 0,
     complex = 1

package/dist/elements/services/htmlWriterService/FormatingHtmlWriterService.js

@@ -1,7 +1,7 @@
-import { DomConverter } from '../../widgets/designerView/DomConverter';
-import { CssCombiner } from '../../helper/CssCombiner';
-import { NodeType } from '../../item/NodeType';
-import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { CssCombiner } from '../../helper/CssCombiner.js';
+import { NodeType } from '../../item/NodeType.js';
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
 import { ElementDisplayType, getElementDisplaytype } from '../../helper/ElementHelper.js';
 var ElementContainerType;
 (function (ElementContainerType) {

package/dist/elements/services/htmlWriterService/HtmlWriterService copy.d.ts

@@ -0,0 +1,12 @@
+import { IDesignItem } from '../../item/IDesignItem';
+import { IHtmlWriterService } from './IHtmlWriterService';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
+import { IStringPosition } from './IStringPosition';
+export declare class HtmlWriterService implements IHtmlWriterService {
+    private _conditionalyWriteIndent;
+    private _conditionalyWriteNewline;
+    write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
+    private internalWrite;
+    private writeTextNode;
+}

package/dist/elements/services/htmlWriterService/HtmlWriterService copy.js

@@ -0,0 +1,118 @@
+import { DomConverter } from '../../widgets/designerView/DomConverter';
+import { CssCombiner } from '../../helper/CssCombiner';
+import { NodeType } from '../../item/NodeType';
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
+import { isEmptyTextNode, isInline } from '../../helper/ElementHelper.js';
+export class HtmlWriterService {
+    _conditionalyWriteIndent(indentedTextWriter, designItem) {
+        if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
+            (designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
+            (designItem.element.previousElementSibling == null && !isInline(designItem.element.parentElement) && (designItem.element.previousSibling == null || isEmptyTextNode(designItem.element.previousSibling))))
+            indentedTextWriter.writeIndent();
+    }
+    _conditionalyWriteNewline(indentedTextWriter, designItem) {
+        if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
+            (designItem.element.nextElementSibling instanceof HTMLElement && !isInline(designItem.element.nextElementSibling)))
+            indentedTextWriter.writeNewline();
+    }
+    write(indentedTextWriter, designItems, rootContainerKeepInline, options, designItemsAssignmentList) {
+        for (const d of designItems) {
+            this.internalWrite(indentedTextWriter, d, options, designItemsAssignmentList);
+        }
+    }
+    internalWrite(indentedTextWriter, designItem, options, designItemsAssignmentList) {
+        let start = indentedTextWriter.position;
+        if (designItem.nodeType == NodeType.TextNode) {
+            if (isEmptyTextNode(designItem.element) &&
+                ((designItem.element.previousSibling instanceof HTMLElement && !isInline(designItem.element.previousSibling)) ||
+                    (designItem.element.nextSibling instanceof HTMLElement && !isInline(designItem.element.nextSibling)))) {
+            }
+            else
+                this.writeTextNode(indentedTextWriter, designItem, true);
+        }
+        else if (designItem.nodeType == NodeType.Comment) {
+            this._conditionalyWriteIndent(indentedTextWriter, designItem);
+            indentedTextWriter.write('<!--' + designItem.content + '-->');
+            this._conditionalyWriteNewline(indentedTextWriter, designItem);
+        }
+        else {
+            this._conditionalyWriteIndent(indentedTextWriter, designItem);
+            indentedTextWriter.write('<' + designItem.name);
+            if (designItem.hasAttributes) {
+                for (const a of designItem.attributes) {
+                    indentedTextWriter.write(' ');
+                    if (typeof a[1] === 'string') {
+                        if (a[1] === "")
+                            indentedTextWriter.write(a[0]);
+                        else
+                            indentedTextWriter.write(a[0] + '="' + DomConverter.normalizeAttributeValue(a[1]) + '"');
+                    }
+                    else if (!a[1])
+                        indentedTextWriter.write(a[0]);
+                    else {
+                        //TODO: writing of bindings
+                    }
+                }
+            }
+            if (designItem.hasStyles) {
+                indentedTextWriter.write(' style="');
+                let styles = designItem.styles;
+                if (options.compressCssToShorthandProperties)
+                    styles = CssCombiner.combine(styles);
+                for (const s of styles) {
+                    if (s[0]) {
+                        indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
+                    }
+                }
+                indentedTextWriter.write('"');
+            }
+            indentedTextWriter.write('>');
+            let contentSingleTextNode = false;
+            if (designItem.hasChildren) {
+                const children = designItem.children();
+                contentSingleTextNode = designItem.childCount === 1 && designItem.firstChild.nodeType === NodeType.TextNode;
+                if (contentSingleTextNode) {
+                    this.writeTextNode(indentedTextWriter, designItem, false);
+                }
+                else {
+                    if (designItem.element instanceof HTMLElement && !isInline(designItem.element)) {
+                        indentedTextWriter.writeNewline();
+                        indentedTextWriter.levelRaise();
+                    }
+                    for (const c of children) {
+                        this.internalWrite(indentedTextWriter, c, options, designItemsAssignmentList);
+                        let childSingleTextNode = c.childCount === 1 && c.firstChild.nodeType === NodeType.TextNode;
+                        if (childSingleTextNode)
+                            indentedTextWriter.writeNewline();
+                    }
+                    if (designItem.element instanceof HTMLElement && !isInline(designItem.element)) {
+                        indentedTextWriter.levelShrink();
+                        if (!indentedTextWriter.isLastCharNewline())
+                            indentedTextWriter.writeNewline();
+                        indentedTextWriter.writeIndent();
+                    }
+                }
+            }
+            else if (designItem.hasContent) {
+                indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content));
+            }
+            if (!DomConverter.IsSelfClosingElement(designItem.name))
+                indentedTextWriter.write('</' + designItem.name + '>');
+            if (!contentSingleTextNode)
+                this._conditionalyWriteNewline(indentedTextWriter, designItem);
+        }
+        if (designItemsAssignmentList) {
+            designItemsAssignmentList.set(designItem, { start: start, length: indentedTextWriter.position - start - 1 });
+        }
+    }
+    writeTextNode(indentedTextWriter, designItem, indentAndNewline) {
+        let content = DomConverter.normalizeContentValue(designItem.content).trim();
+        if (content) {
+            if (indentAndNewline)
+                this._conditionalyWriteIndent(indentedTextWriter, designItem);
+            indentedTextWriter.write(content);
+            if (indentAndNewline)
+                this._conditionalyWriteNewline(indentedTextWriter, designItem);
+        }
+    }
+}

package/dist/elements/services/htmlWriterService/HtmlWriterService.d.ts

@@ -1,9 +1,9 @@
-import { IDesignItem } from '../../item/IDesignItem';
-import { IHtmlWriterService } from './IHtmlWriterService';
-import { IHtmlWriterOptions } from './IHtmlWriterOptions';
-import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
-import { IStringPosition } from './IStringPosition';
-export declare class HtmlWriterService implements IHtmlWriterService {
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
+import { IStringPosition } from './IStringPosition.js';
+import { AbstractHtmlWriterService } from './AbstractHtmlWriterService.js';
+export declare class HtmlWriterService extends AbstractHtmlWriterService {
     private _conditionalyWriteIndent;
     private _conditionalyWriteNewline;
     write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;

package/dist/elements/services/htmlWriterService/HtmlWriterService.js

@@ -1,9 +1,8 @@
-import { DomConverter } from '../../widgets/designerView/DomConverter';
-import { CssCombiner } from '../../helper/CssCombiner';
-import { NodeType } from '../../item/NodeType';
-import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { NodeType } from '../../item/NodeType.js';
 import { isEmptyTextNode, isInline } from '../../helper/ElementHelper.js';
-export class HtmlWriterService {
+import { AbstractHtmlWriterService } from './AbstractHtmlWriterService.js';
+export class HtmlWriterService extends AbstractHtmlWriterService {
     _conditionalyWriteIndent(indentedTextWriter, designItem) {
         if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
             (designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
@@ -38,34 +37,8 @@ export class HtmlWriterService {
         else {
             this._conditionalyWriteIndent(indentedTextWriter, designItem);
             indentedTextWriter.write('<' + designItem.name);
-            if (designItem.hasAttributes) {
-                for (const a of designItem.attributes) {
-                    indentedTextWriter.write(' ');
-                    if (typeof a[1] === 'string') {
-                        if (a[1] === "")
-                            indentedTextWriter.write(a[0]);
-                        else
-                            indentedTextWriter.write(a[0] + '="' + DomConverter.normalizeAttributeValue(a[1]) + '"');
-                    }
-                    else if (!a[1])
-                        indentedTextWriter.write(a[0]);
-                    else {
-                        //TODO: writing of bindings
-                    }
-                }
-            }
-            if (designItem.hasStyles) {
-                indentedTextWriter.write(' style="');
-                let styles = designItem.styles;
-                if (options.compressCssToShorthandProperties)
-                    styles = CssCombiner.combine(styles);
-                for (const s of styles) {
-                    if (s[0]) {
-                        indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
-                    }
-                }
-                indentedTextWriter.write('"');
-            }
+            this.writeAttributes(indentedTextWriter, designItem, options);
+            this.writeStyles(indentedTextWriter, designItem, options);
             indentedTextWriter.write('>');
             let contentSingleTextNode = false;
             if (designItem.hasChildren) {

package/dist/elements/services/htmlWriterService/IHtmlWriterOptions.d.ts

@@ -2,4 +2,6 @@ export declare class IHtmlWriterOptions {
     beautifyOutput: boolean;
     compressCssToShorthandProperties: boolean;
     writeDesignerProperties: boolean;
+    parseJsonInAttributes: boolean;
+    jsonWriteMode: 'min' | 'beauty';
 }

package/dist/elements/services/htmlWriterService/IHtmlWriterOptions.js

@@ -1,5 +1,7 @@
 export class IHtmlWriterOptions {
-    beautifyOutput;
-    compressCssToShorthandProperties;
-    writeDesignerProperties;
+    beautifyOutput = true;
+    compressCssToShorthandProperties = true;
+    writeDesignerProperties = true;
+    parseJsonInAttributes = true;
+    jsonWriteMode = 'min';
 }

package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.js

@@ -78,7 +78,9 @@ export class WebcomponentManifestParserService extends UnkownElementPropertiesSe
         return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
     }
     isHandledElement(designItem) {
-        return this._elementList.find(x => x.tag == designItem.name) != null;
+        if (this._elementList)
+            return this._elementList.find(x => x.tag == designItem.name) != null;
+        return false;
     }
     getProperties(designItem) {
         return this._propertiesList[designItem.name];

package/dist/elements/widgets/codeView/code-view-code-mirror.js

@@ -20,7 +20,7 @@ export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
     constructor() {
         super();
         //@ts-ignore
-        import("codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        import("./codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this.style.display = 'block';
         this._editor = this._getDomElement('textarea');
     }

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

@@ -1,7 +1,7 @@
-import { IDesignItem } from "../../item/IDesignItem";
-import { IStringPosition } from "../../services/htmlWriterService/IStringPosition";
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IStringPosition } from "../../services/htmlWriterService/IStringPosition.js";
 export declare class DomConverter {
-    static normalizeAttributeValue(value: string | number): string;
+    static normalizeAttributeValue(value: string | number, useSingleQuotes?: boolean): string;
     static normalizeContentValue(value: string): string;
     static IsSelfClosingElement(tag: string): boolean;
     static ConvertToString(designItems: IDesignItem[], designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): string;

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

@@ -1,10 +1,13 @@
-import { IndentedTextWriter } from "../../helper/IndentedTextWriter";
+import { IndentedTextWriter } from "../../helper/IndentedTextWriter.js";
 export class DomConverter {
-    static normalizeAttributeValue(value) {
+    static normalizeAttributeValue(value, useSingleQuotes = false) {
         if (typeof value === 'number')
             value = value.toString();
-        if (value)
+        if (value) {
+            if (useSingleQuotes)
+                return value.replaceAll('\'', ''');
             return value.replaceAll('"', '"');
+        }
         return value;
     }
     static normalizeContentValue(value) {
@@ -31,7 +34,7 @@ export class DomConverter {
     }
     static ConvertToString(designItems, designItemsAssignmentList) {
         let itw = new IndentedTextWriter();
-        let options = { beautifyOutput: true, writeDesignerProperties: true, compressCssToShorthandProperties: true };
+        let options = { beautifyOutput: true, writeDesignerProperties: true, compressCssToShorthandProperties: true, parseJsonInAttributes: true, jsonWriteMode: 'beauty' };
         designItems[0].serviceContainer.htmlWriterService.write(itw, designItems, true, options, designItemsAssignmentList);
         return itw.getString();
     }

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

@@ -2,7 +2,6 @@ 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 {
@@ -15,10 +14,8 @@ export declare class PathExtension extends AbstractExtension {
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     pointerEvent(event: PointerEvent, circle: SVGCircleElement, p: PathData, index: number): void;
-    _drawPath(path: PathData[], index: number): string;
     _drawPathCircle(x: number, y: number, p: PathData, index: number): void;
     _drawPathLine(x1: number, y1: number, x2: number, y2: number): void;
-    _drawHelpLine(pStart: IPoint, pEnd: IPoint): void;
     refresh(): void;
     dispose(): void;
 }

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

@@ -1,6 +1,8 @@
 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;
@@ -17,7 +19,7 @@ export class PathExtension extends AbstractExtension {
         //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: true });
+        this._pathdata = this.extendedItem.node.getPathData({ normalize: false });
         for (let p of this._pathdata) {
             switch (p.type) {
                 case 'M':
@@ -26,6 +28,7 @@ export class PathExtension extends AbstractExtension {
                     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;
@@ -56,6 +59,8 @@ export class PathExtension extends AbstractExtension {
                 case 'Q':
                     this._drawPathCircle(p.values[0], p.values[1], p, 0);
                     this._drawPathCircle(p.values[2], p.values[3], p, 2);
+                    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]);
                     break;
                 case 'T':
                     this._drawPathCircle(p.values[0], p.values[1], p, 0);
@@ -103,7 +108,7 @@ export class PathExtension extends AbstractExtension {
                         circle.setAttribute("cx", (this._circlePos.x + dx).toString());
                         circle.setAttribute("cy", (this._circlePos.y + dy).toString());
                     }
-                    this.extendedItem.element.setAttribute("d", this._drawPath(this._pathdata, index));
+                    this.extendedItem.element.setAttribute("d", createPathD(this._pathdata));
                 }
                 break;
             case EventNames.PointerUp:
@@ -111,61 +116,90 @@ export class PathExtension extends AbstractExtension {
                 this._startPos = null;
                 this._circlePos = null;
                 this._lastPos = null;
-                this.extendedItem.setAttribute('d', this._drawPath(this._pathdata, index));
+                this.extendedItem.setAttribute('d', createPathD(this._pathdata));
                 break;
         }
     }
-    _drawPath(path, index) {
-        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':
-                    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':
-                    break;
-                case 'T':
-                    break;
-                case 'A':
-                    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));
+                }
+            });
         }
-        return pathD;
-        console.log(pathD);
-    }
-    _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, 3, 'svg-path');
+        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');
     }
-    _drawHelpLine(pStart, pEnd) {
-        let line;
-        line.setAttribute("stroke", "yellow");
-        line.setAttribute("stroke-width", "2");
-        line.setAttribute("x1", pStart.x.toString());
-        line.setAttribute("y1", pStart.y.toString());
-        line.setAttribute("x2", pEnd.x.toString());
-        line.setAttribute("y2", pEnd.y.toString());
-    }
     refresh() {
         this._removeAllOverlays();
         this.extend();

package/dist/elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js

@@ -8,7 +8,6 @@ export class CopyPasteContextMenu {
             { title: 'copy', action: () => { designerView.executeCommand({ type: CommandType.copy }); } },
             { title: 'cut', action: () => { designerView.executeCommand({ type: CommandType.cut }); } },
             { title: 'paste', action: () => { designerView.executeCommand({ type: CommandType.paste }); } },
-            { title: '-' },
             { title: 'delete', action: () => { designerView.executeCommand({ type: CommandType.delete }); } },
             { title: '-' }
         ];

package/dist/elements/widgets/designerView/extensions/contextMenu/PathContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
+export declare class PathContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/PathContextMenu.js

@@ -0,0 +1,31 @@
+import { createPathD } from "../../../../helper/PathDataPolyfill";
+export class PathContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        if (designItem.element instanceof SVGPathElement)
+            return true;
+        return false;
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        const pathdata = designItem.node.getPathData({ normalize: true });
+        const items = [];
+        const lastType = pathdata[pathdata.length - 1].type;
+        items.push({ title: '-' });
+        if (lastType == 'z' || lastType == 'Z') {
+            items.push({
+                title: 'open path ', action: () => {
+                    pathdata.splice(pathdata.length - 1, 1);
+                    designItem.setAttribute('d', createPathD(pathdata));
+                }
+            });
+        }
+        else {
+            items.push({
+                title: 'close path ', action: () => {
+                    pathdata.push({ type: 'Z' });
+                    designItem.setAttribute('d', createPathD(pathdata));
+                }
+            });
+        }
+        return items;
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/RectContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
+export declare class RectContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/RectContextMenu.js

@@ -0,0 +1,34 @@
+import { DeleteAction } from "../../../../..";
+import { DesignItem } from "../../../../item/DesignItem";
+import { InsertAction } from "../../../../services/undoService/transactionItems/InsertAction";
+export class RectContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        if (designItem.element instanceof SVGRectElement)
+            return true;
+        return false;
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        return [
+            { title: '-' },
+            {
+                title: 'convert to path', action: () => {
+                    let rect = designItem.element;
+                    let pathD = "";
+                    pathD += "M" + rect.x.baseVal.value + " " + rect.y.baseVal.value +
+                        "L" + (rect.x.baseVal.value + rect.width.baseVal.value) + " " + rect.y.baseVal.value +
+                        "L" + (rect.x.baseVal.value + rect.width.baseVal.value) + " " + (rect.y.baseVal.value + rect.height.baseVal.value) +
+                        "L" + rect.x.baseVal.value + " " + (rect.y.baseVal.value + rect.height.baseVal.value) +
+                        "Z";
+                    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    path.setAttribute("d", pathD);
+                    path.setAttribute("stroke", rect.getAttribute("stroke"));
+                    path.setAttribute("fill", rect.getAttribute("fill"));
+                    path.setAttribute("stroke-width", rect.getAttribute("stroke-width"));
+                    const di = DesignItem.createDesignItemFromInstance(path, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                    designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designItem.parent, designItem.childCount, di));
+                    designerCanvas.instanceServiceContainer.undoService.execute(new DeleteAction([designItem]));
+                }
+            }
+        ];
+    }
+}

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

@@ -13,7 +13,7 @@ export class DrawPathTool {
     _pointerMoved = false;
     _eventStarted = false;
     _lastPoint;
-    _startPoint = { x: 0, y: 0 };
+    _startPoint;
     constructor() {
     }
     activated(serviceContainer) {
@@ -43,6 +43,9 @@ export class DrawPathTool {
                 if (this._lastPoint == null) {
                     this._lastPoint = currentPoint;
                 }
+                if (this._startPoint == null) {
+                    this._startPoint = currentPoint;
+                }
                 break;
             case EventNames.PointerMove:
                 if (this._eventStarted) {
@@ -108,6 +111,7 @@ export class DrawPathTool {
                     //designerView.rootDesignItem.element.appendChild(svg);
                     this._path = null;
                     this._pathD = null;
+                    this._lastPoint = null;
                     const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                     designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
                     designerCanvas.serviceContainer.globalContext.finishedWithTool(this);

package/dist/elements/widgets/treeView/treeViewExtended.js

@@ -59,6 +59,7 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         background: #ffffffc9;
         width: 70px;
         justify-content: flex-end;
+        background: white;
       }
 
       table.fancytree-ext-table tbody tr.fancytree-selected {

package/dist/index.d.ts

@@ -45,6 +45,7 @@ export * from "./elements/services/elementsService/JsonFileElementsService.js";
 export * from "./elements/services/elementsService/PreDefinedElementsService.js";
 export type { IHtmlWriterService } from "./elements/services/htmlWriterService/IHtmlWriterService.js";
 export type { IHtmlWriterOptions } from "./elements/services/htmlWriterService/IHtmlWriterOptions.js";
+export * from "./elements/services/htmlWriterService/AbstractHtmlWriterService.js";
 export * from "./elements/services/htmlWriterService/FormatingHtmlWriterService.js";
 export * from "./elements/services/htmlWriterService/HtmlWriterService.js";
 export * from "./elements/services/htmlWriterService/LitTsElementWriterService.js";

package/dist/index.js

@@ -26,6 +26,7 @@ export * from "./elements/services/demoProviderService/DemoProviderService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
 export * from "./elements/services/elementsService/JsonFileElementsService.js";
 export * from "./elements/services/elementsService/PreDefinedElementsService.js";
+export * from "./elements/services/htmlWriterService/AbstractHtmlWriterService.js";
 export * from "./elements/services/htmlWriterService/FormatingHtmlWriterService.js";
 export * from "./elements/services/htmlWriterService/HtmlWriterService.js";
 export * from "./elements/services/htmlWriterService/LitTsElementWriterService.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.80",
+  "version": "0.0.81",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -20,7 +20,7 @@
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^2.4.1",
     "@types/codemirror": "^5.60.5",
-    "@types/jquery": "^3.5.11",
+    "@types/jquery": "^3.5.13",
     "@types/jquery.fancytree": "0.0.7",
     "ace-builds": "^1.4.13",
     "codemirror": "^5.65.0",
@@ -29,9 +29,9 @@
     "html2canvas": "*",
     "jest": "^27.4.7",
     "jquery": "^3.6.0",
-    "jquery.fancytree": "^2.38.0",
+    "jquery.fancytree": "^2.38.1",
     "monaco-editor": "^0.31.1",
-    "ts-jest": "^27.1.2",
+    "ts-jest": "^27.1.3",
     "typescript": "^4.5.4",
     "typescript-lit-html-plugin": "^0.9.0"
   },