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

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;
@@ -52,17 +55,23 @@ export class PathExtension extends AbstractExtension {
                 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;
             }
         }
@@ -83,9 +92,27 @@ export class PathExtension extends AbstractExtension {
                     const cy = event.y - this._lastPos.y + this._circlePos.y;
                     const dx = cx - this._circlePos.x;
                     const dy = cy - this._circlePos.y;
-                    p.values[index] = this._originalPathPoint.x + dx;
-                    p.values[index + 1] = this._originalPathPoint.y + dy;
-                    this._drawPath(this._pathdata, index);
+                    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:
@@ -93,21 +120,86 @@ export class PathExtension extends AbstractExtension {
                 this._startPos = null;
                 this._circlePos = null;
                 this._lastPos = null;
+                this.extendedItem.setAttribute('d', createPathD(this._pathdata));
                 break;
         }
     }
-    _drawPath(path, index) {
-        let pathD = "";
-        for (let p of path) {
-            pathD += p.type + p.values[index] + " " + p.values[index + 1];
-        }
-        this.extendedItem.setAttribute("d", 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');
+        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');

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/overlayLayerView.js

@@ -67,8 +67,7 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
     }
     removeOverlay(element) {
         try {
-            if (element)
-                element.parentElement.removeChild(element);
+            element?.parentElement?.removeChild(element);
         }
         catch (err) {
             console.error(err);

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

@@ -80,6 +80,7 @@ export class DrawEllipsisTool {
                 svg.style.position = 'absolute';
                 svg.style.width = (rect.width + 2 * offset) + 'px';
                 svg.style.height = (rect.height + 2 * offset) + 'px';
+                svg.style.overflow = 'visible';
                 this._path = null;
                 const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                 designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));

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

@@ -65,6 +65,7 @@ export class DrawLineTool {
                 svg.style.position = 'absolute';
                 svg.style.width = (rect.width + 2 * offset) + 'px';
                 svg.style.height = (rect.height + 2 * offset) + 'px';
+                svg.style.overflow = 'visible';
                 this._path = null;
                 const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                 designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));

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

@@ -11,7 +11,6 @@ export declare class DrawPathTool implements ITool {
     private _pointerMoved;
     private _eventStarted;
     private _lastPoint;
-    private _savedPoint;
     private _startPoint;
     constructor();
     activated(serviceContainer: ServiceContainer): void;

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

@@ -12,9 +12,8 @@ export class DrawPathTool {
     _dragMode = false;
     _pointerMoved = false;
     _eventStarted = false;
-    _lastPoint = { x: 0, y: 0 };
-    _savedPoint = { x: 0, y: 0 };
-    _startPoint = { x: 0, y: 0 };
+    _lastPoint;
+    _startPoint;
     constructor() {
     }
     activated(serviceContainer) {
@@ -38,10 +37,15 @@ export class DrawPathTool {
                     designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
                     this._startPoint = currentPoint;
                 }
-                if (this._lastPoint.x === currentPoint.x && this._lastPoint.y === currentPoint.y && !this._samePoint) {
+                if (this._lastPoint != null && this._lastPoint.x === currentPoint.x && this._lastPoint.y === currentPoint.y && !this._samePoint) {
                     this._samePoint = true;
                 }
-                this._lastPoint = currentPoint;
+                if (this._lastPoint == null) {
+                    this._lastPoint = currentPoint;
+                }
+                if (this._startPoint == null) {
+                    this._startPoint = currentPoint;
+                }
                 break;
             case EventNames.PointerMove:
                 if (this._eventStarted) {
@@ -57,8 +61,9 @@ export class DrawPathTool {
                 else { // shows line preview
                     if (this._path) {
                         let straightLine = currentPoint;
-                        if (event.shiftKey)
-                            straightLine = straightenLine(this._savedPoint, currentPoint);
+                        if (event.shiftKey) {
+                            straightLine = straightenLine(this._lastPoint, currentPoint);
+                        }
                         this._path.setAttribute("d", this._pathD + "L" + straightLine.x + " " + straightLine.y);
                     }
                 }
@@ -71,15 +76,16 @@ export class DrawPathTool {
                 if (this._p2pMode && !this._samePoint && this._startPoint.x != currentPoint.x && this._startPoint.y != currentPoint.y) {
                     if (this._path) {
                         if (event.shiftKey) {
-                            let straightLine = straightenLine(this._savedPoint, currentPoint);
+                            let straightLine = straightenLine(this._lastPoint, currentPoint);
                             this._pathD += "L" + straightLine.x + " " + straightLine.y;
                             this._path.setAttribute("d", this._pathD);
+                            this._lastPoint = straightLine;
                         }
                         else {
                             this._pathD += "L" + currentPoint.x + " " + currentPoint.y;
                             this._path.setAttribute("d", this._pathD);
+                            this._lastPoint = currentPoint;
                         }
-                        this._savedPoint = currentPoint;
                     }
                 }
                 if (this._samePoint && this._p2pMode || this._dragMode && !this._p2pMode) {
@@ -101,9 +107,11 @@ export class DrawPathTool {
                     svg.style.position = 'absolute';
                     svg.style.width = (rect.width + 2 * offset) + 'px';
                     svg.style.height = (rect.height + 2 * offset) + 'px';
+                    svg.style.overflow = 'visible';
                     //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/designerView/tools/DrawRectTool.js

@@ -95,6 +95,7 @@ export class DrawRectTool {
                 svg.style.position = 'absolute';
                 svg.style.width = (rect.width + 2 * offset) + 'px';
                 svg.style.height = (rect.height + 2 * offset) + 'px';
+                svg.style.overflow = 'visible';
                 this._path = null;
                 const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                 designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));

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,7 +45,10 @@ 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";
 export * from "./elements/services/htmlParserService/DefaultHtmlParserService.js";
 export * from "./elements/services/htmlParserService/NodeHtmlParserService.js";
 export type { IHtmlParserService } from "./elements/services/htmlParserService/IHtmlParserService.js";
@@ -177,3 +180,4 @@ export type { IPoint } from "./interfaces/IPoint.js";
 export type { IRect } from "./interfaces/IRect.js";
 export type { ISize } from "./interfaces/ISize.js";
 export type { ICommandHandler } from "./interfaces/ICommandHandler.js";
+export * from './Constants.js';

package/dist/index.js

@@ -26,7 +26,10 @@ 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";
 export * from "./elements/services/htmlParserService/DefaultHtmlParserService.js";
 export * from "./elements/services/htmlParserService/NodeHtmlParserService.js";
 export * from "./elements/services/instanceService/DefaultInstanceService.js";
@@ -126,3 +129,4 @@ export * from "./elements/widgets/codeView/code-view-code-mirror.js";
 export * from "./elements/documentContainer.js";
 export * from "./enums/EventNames.js";
 export * from "./enums/PointerActionType.js";
+export * from './Constants.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.78",
+  "version": "0.0.82",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,26 +13,26 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.4.0",
+    "@node-projects/base-custom-webcomponent": "^0.5.0",
     "construct-style-sheets-polyfill": "^3.0.5"
   },
   "devDependencies": {
     "@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",
+    "codemirror": "^5.65.1",
     "custom-elements-manifest": "^1.0.0",
-    "esprima-next": "^5.7.0",
+    "esprima-next": "^5.8.1",
     "html2canvas": "*",
-    "jest": "^27.4.5",
+    "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",
-    "typescript": "^4.5.4",
+    "ts-jest": "^27.1.3",
+    "typescript": "^4.5.5",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "repository": {

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

@@ -1,12 +0,0 @@
-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 {
-    canWrite(designItem: IDesignItem): boolean;
-    private _conditionalyWriteIndent;
-    private _conditionalyWriteNewline;
-    write(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
-    private writeTextNode;
-}

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

@@ -1,107 +0,0 @@
-import { DomConverter } from '../../widgets/designerView/DomConverter';
-import { CssCombiner } from '../../helper/CssCombiner';
-import { NodeType } from '../../item/NodeType';
-import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
-import { isInline } from '../../helper/ElementHelper.js';
-//todo :
-//write style...
-//needs InternalBindinsgStorrageService -> keeps bindings
-export class HtmlWriterService {
-    canWrite(designItem) {
-        return true;
-    }
-    _conditionalyWriteIndent(indentedTextWriter, designItem) {
-        if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
-            (designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)))
-            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, designItem, options, designItemsAssignmentList) {
-        let start = indentedTextWriter.position;
-        if (designItem.nodeType == NodeType.TextNode) {
-            this._conditionalyWriteIndent(indentedTextWriter, designItem);
-            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('>');
-            if (designItem.hasChildren) {
-                const children = designItem.children();
-                const singleTextNode = designItem.childCount === 1 && designItem.firstChild.nodeType === NodeType.TextNode;
-                if (singleTextNode) {
-                    this.writeTextNode(indentedTextWriter, designItem, false);
-                }
-                else {
-                    indentedTextWriter.writeNewline();
-                    indentedTextWriter.levelRaise();
-                    for (const c of children) {
-                        c.serviceContainer.forSomeServicesTillResult('htmlWriterService', (s) => {
-                            if (s.canWrite(c)) {
-                                s.write(indentedTextWriter, c, options, designItemsAssignmentList);
-                            }
-                        });
-                    }
-                    indentedTextWriter.levelShrink();
-                    indentedTextWriter.writeIndent();
-                }
-            }
-            else if (designItem.hasContent) {
-                indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content));
-            }
-            if (!DomConverter.IsSelfClosingElement(designItem.name))
-                indentedTextWriter.write('</' + designItem.name + '>');
-            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/manifestLoaders/WebcomponentManifestParserService.d.ts

@@ -1,26 +0,0 @@
-import { IDesignItem } from "../../..";
-import { BindingTarget } from "../../item/BindingTarget";
-import { IElementDefinition } from "../elementsService/IElementDefinition";
-import { IElementsService } from "../elementsService/IElementsService";
-import { IPropertiesService } from "../propertiesService/IPropertiesService";
-import { IProperty } from "../propertiesService/IProperty";
-import { ValueType } from "../propertiesService/ValueType";
-export declare class WebcomponentManifestParserService implements IElementsService, IPropertiesService {
-    private _name;
-    get name(): string;
-    private _packageData;
-    private _elementList;
-    private _resolveStored;
-    private _rejectStored;
-    constructor(name: string, file: string);
-    getElements(): Promise<IElementDefinition[]>;
-    isHandledElement(designItem: IDesignItem): boolean;
-    getProperties(designItem: IDesignItem): IProperty[];
-    getProperty(designItem: IDesignItem, name: string): IProperty;
-    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
-    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
-    clearValue(designItems: IDesignItem[], property: IProperty): void;
-    isSet(designItems: IDesignItem[], property: IProperty): ValueType;
-    getValue(designItems: IDesignItem[], property: IProperty): void;
-    getUnsetValue(designItems: IDesignItem[], property: IProperty): void;
-}