@node-projects/web-component-designer 0.0.117 → 0.0.119

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

@@ -406,7 +406,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.instanceServiceContainer.undoService.clear();
         this.overlayLayer.removeAllOverlays();
         DomHelper.removeAllChildnodes(this.overlayLayer);
-        for (let i of this.rootDesignItem.children())
+        for (let i of [...this.rootDesignItem.children()])
             this.rootDesignItem._removeChildInternal(i);
         this.addDesignItems(designItems);
         this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'parsed' });

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

@@ -11,6 +11,9 @@ export class AltToEnterContainerExtension extends AbstractExtension {
     refresh() {
         let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         this._text = this._drawText("Press ALT to enter container", itemRect.x + 5, itemRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Foregorund);
+        this._text.style.fontSize = (14 / this.designerCanvas.scaleFactor) + 'px';
+        this._text.setAttribute('x', '' + (itemRect.x + 5 / this.designerCanvas.scaleFactor));
+        this._text.setAttribute('y', '' + (itemRect.y + 12 / this.designerCanvas.scaleFactor));
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -8,6 +8,6 @@ export class AltToEnterContainerExtensionProvider {
         return new AltToEnterContainerExtension(extensionManager, designerView, designItem);
     }
     style = css `
-    .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-size: 14px; font-weight:800; font-family: monospace; }
+    .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-weight:800; font-family: monospace; }
   `;
 }

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

@@ -16,19 +16,26 @@ export class ElementDragTitleExtension extends AbstractExtension {
         this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
         this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
         this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));
+        this.refresh();
     }
     _drawMoveOverlay(itemRect) {
     }
     refresh() {
         const boundRect = this.extendedItem.element.getBoundingClientRect();
         const xr = (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor;
-        const yr = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16;
+        const h = (15 / this.designerCanvas.scaleFactor);
+        const w = (60 / this.designerCanvas.scaleFactor);
+        const yr = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - h;
         this._rect.setAttribute('x', xr);
         this._rect.setAttribute('y', yr);
+        this._rect.setAttribute('height', '' + h);
+        this._rect.setAttribute('width', '' + w);
+        this._rect.style.strokeWidth = (1 / this.designerCanvas.scaleFactor).toString();
         const x = (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor;
-        const y = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5;
+        const y = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5 / this.designerCanvas.scaleFactor;
         this._text.setAttribute('x', x);
         this._text.setAttribute('y', y);
+        this._text.style.fontSize = (10 / this.designerCanvas.scaleFactor) + 'px';
     }
     _pointerEvent(event) {
         event.preventDefault();

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

@@ -8,6 +8,6 @@ export class ElementDragTitleExtensionProvider {
         return new ElementDragTitleExtension(extensionManager, designerView, designItem);
     }
     style = css `
-    .svg-text-primary { stroke: none; fill: white; stroke-width: 1; font-size: 10px; font-family: monospace; }
+    .svg-text-primary { stroke: none; fill: white; font-family: monospace; }
   `;
 }

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

@@ -26,6 +26,10 @@ export class PathExtension extends AbstractExtension {
                     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] + this._lastPos.x, p.values[1] + this._lastPos.y, p, 0);
+                    this._lastPos = { x: p.values[0] + this._lastPos.x, y: p.values[1] + this._lastPos.y };
+                    break;
                 case 'H':
                     break;
                 case 'V':

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

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

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

@@ -4,6 +4,10 @@ export class PositionExtension extends AbstractExtension {
     _line2;
     _line3;
     _line4;
+    _rectX;
+    _textX;
+    _rectY;
+    _textY;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -11,33 +15,28 @@ export class PositionExtension extends AbstractExtension {
         this.refresh();
     }
     refresh() {
-        const computedStyle = getComputedStyle(this.extendedItem.element);
-        let itemRect = this.extendedItem.element.getBoundingClientRect();
-        const xOffset = itemRect.x - this.designerCanvas.containerBoundingRect.x;
-        const yOffset = itemRect.y - this.designerCanvas.containerBoundingRect.y;
-        let left = Number.parseFloat(computedStyle.left.replace('px', ''));
-        if (isNaN(left))
-            left = 0;
-        let top = Number.parseFloat(computedStyle.top.replace('px', ''));
-        if (isNaN(top))
-            top = 0;
-        let right = Number.parseFloat(computedStyle.right.replace('px', ''));
-        if (isNaN(right))
-            right = 0;
-        let bottom = Number.parseFloat(computedStyle.bottom.replace('px', ''));
-        if (isNaN(bottom))
-            bottom = 0;
-        let tx = 0;
-        let ty = 0;
-        if (computedStyle.transform !== 'none') {
-            const transforms = computedStyle.transform.replace('matrix(', '').split(',');
-            tx = Number.parseFloat(transforms[4]);
-            ty = Number.parseFloat(transforms[5].replace(')', ''));
-        }
-        this._line1 = this._drawLine((xOffset / this.designerCanvas.scaleFactor - left - tx), (yOffset + itemRect.height / 2) / this.designerCanvas.scaleFactor, xOffset / this.designerCanvas.scaleFactor, (yOffset + itemRect.height / 2) / this.designerCanvas.scaleFactor, 'svg-position', this._line1);
-        this._line2 = this._drawLine((xOffset + itemRect.width / 2) / this.designerCanvas.scaleFactor, (yOffset / this.designerCanvas.scaleFactor) - top - ty, (xOffset + itemRect.width / 2) / this.designerCanvas.scaleFactor, yOffset / this.designerCanvas.scaleFactor, 'svg-position', this._line2);
-        this._line3 = this._drawLine((xOffset + itemRect.width) / this.designerCanvas.scaleFactor, (yOffset + itemRect.height / 2) / this.designerCanvas.scaleFactor, (xOffset + itemRect.width + right + -1 * tx) / this.designerCanvas.scaleFactor, (yOffset + itemRect.height / 2) / this.designerCanvas.scaleFactor, 'svg-position', this._line3);
-        this._line4 = this._drawLine((xOffset + itemRect.width / 2) / this.designerCanvas.scaleFactor, (yOffset + itemRect.height) / this.designerCanvas.scaleFactor, (xOffset + itemRect.width / 2) / this.designerCanvas.scaleFactor, (yOffset + itemRect.height + bottom + -1 * ty) / this.designerCanvas.scaleFactor, 'svg-position', this._line4);
+        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        const itemParentRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element.parentElement);
+        this._line1 = this._drawLine(itemParentRect.x, itemRect.y + itemRect.height / 2, itemRect.x, itemRect.y + itemRect.height / 2, 'svg-position', this._line1);
+        this._line2 = this._drawLine(itemParentRect.x + itemParentRect.width, itemRect.y + itemRect.height / 2, itemRect.x + itemRect.width, itemRect.y + itemRect.height / 2, 'svg-position', this._line2);
+        this._line3 = this._drawLine(itemRect.x + itemRect.width / 2, itemParentRect.y, itemRect.x + itemRect.width / 2, itemRect.y, 'svg-position', this._line3);
+        this._line4 = this._drawLine(itemRect.x + itemRect.width / 2, itemParentRect.y + itemParentRect.height, itemRect.x + itemRect.width / 2, itemRect.y + itemRect.height, 'svg-position', this._line4);
+        this._line1.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
+        this._line2.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
+        this._line3.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
+        this._line4.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
+        this._line1.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
+        this._line2.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
+        this._line3.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
+        this._line4.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
+        let x = Math.round(itemRect.x - itemParentRect.x);
+        let y = Math.round(itemRect.y - itemParentRect.y);
+        this._rectX = this._drawRect(itemParentRect.x + x / 2 - 10, itemRect.y + itemRect.height / 2 - 8, 20, 16, 'svg-position-text-rect', this._rectX);
+        this._textX = this._drawText('' + x, itemParentRect.x + x / 2 - 9, itemRect.y + itemRect.height / 2 + 4, null, this._textX);
+        this._textX.style.fontSize = '12px';
+        this._rectY = this._drawRect(itemRect.x + itemRect.width / 2 - 10, itemParentRect.y + y / 2 - 8, 20, 16, 'svg-position-text-rect', this._rectY);
+        this._textY = this._drawText('' + y, itemRect.x + itemRect.width / 2 - 10, itemParentRect.y + y / 2 + 4, null, this._textY);
+        this._textY.style.fontSize = '12px';
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -6,4 +6,5 @@ import { IExtensionManager } from "./IExtensionManger";
 export declare class PositionExtensionProvider 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/PositionExtensionProvider.js

@@ -1,4 +1,5 @@
 import { PositionExtension } from "./PositionExtension";
+import { css } from "@node-projects/base-custom-webcomponent";
 export class PositionExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
         const cs = getComputedStyle(designItem.element);
@@ -9,4 +10,7 @@ export class PositionExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new PositionExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+    .svg-position-text-rect { fill: white; }
+  `;
 }

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

@@ -1,7 +1,7 @@
 import { CommandType } from "../../../../../commandHandling/CommandType";
 export class RotateLeftAndRight {
     shouldProvideContextmenu(event, designerView, designItem, initiator) {
-        return true;
+        return !designItem.isRootItem;
     }
     provideContextMenuItems(event, designerView, designItem) {
         return [

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

@@ -1,7 +1,7 @@
 import { CommandType } from "../../../../../commandHandling/CommandType";
 export class ZMoveContextMenu {
     shouldProvideContextmenu(event, designerView, designItem, initiator) {
-        return true;
+        return !designItem.isRootItem;
     }
     provideContextMenuItems(event, designerView, designItem) {
         return [

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

@@ -13,6 +13,8 @@ export class MagicWandSelectorTool {
                 designerCanvas.captureActiveTool(this);
                 this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._path.setAttribute('class', 'svg-selector');
+                this._path.style.strokeWidth = '' + (1 / designerCanvas.scaleFactor);
+                this._path.style.strokeDasharray = '' + (2 / designerCanvas.scaleFactor);
                 this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
                 this._path.setAttribute("D", this._pathD);
                 designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);

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

@@ -31,7 +31,8 @@ export class PointerTool {
                     return;
                 }
             }
-            const designItem = DesignItem.GetOrCreateDesignItem(event.target, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+            let newEl = designerCanvas.serviceContainer.elementAtPointService.getElementAtPoint(designerCanvas, { x: event.x, y: event.y });
+            const designItem = DesignItem.GetOrCreateDesignItem(newEl, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
             if (!designerCanvas.instanceServiceContainer.selectionService.isSelected(designItem)) {
                 designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
             }

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

@@ -21,6 +21,8 @@ export class RectangleSelectorTool {
                 this._rect.setAttribute('y', (this._initialPoint.y * designerCanvas.scaleFactor));
                 this._rect.setAttribute('width', 0);
                 this._rect.setAttribute('height', 0);
+                this._rect.style.strokeWidth = '' + (1 / designerCanvas.scaleFactor);
+                this._rect.style.strokeDasharray = '' + (2 / designerCanvas.scaleFactor);
                 designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
                 break;
             case EventNames.PointerMove:

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

@@ -20,6 +20,8 @@ export class ZoomTool {
                 this._rect.setAttribute('y', (this._startPoint.y * designerCanvas.zoomFactor));
                 this._rect.setAttribute('width', 0);
                 this._rect.setAttribute('height', 0);
+                this._rect.style.strokeWidth = '' + (1 / designerCanvas.scaleFactor);
+                this._rect.style.strokeDasharray = '' + (2 / designerCanvas.scaleFactor);
                 designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
                 break;
             case EventNames.PointerMove:

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.117",
+  "version": "0.0.119",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -19,20 +19,20 @@
   "devDependencies": {
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^2.4.1",
-    "@papyrs/stylo": "^0.0.37",
+    "@papyrs/stylo": "^0.0.39",
     "@types/codemirror": "^5.60.5",
     "@types/jquery": "^3.5.14",
     "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.9.6",
+    "ace-builds": "^1.11.2",
     "codemirror": "^6.0.1",
-    "esprima-next": "^5.8.3",
+    "esprima-next": "^5.8.4",
     "html2canvas": "*",
-    "jest": "^28.0.8",
+    "jest": "^29.1.1",
     "jquery": "^3.6.1",
     "jquery.fancytree": "^2.38.2",
     "monaco-editor": "^0.34.0",
-    "ts-jest": "^28.0.8",
-    "typescript": "^4.8.2",
+    "ts-jest": "^29.0.2",
+    "typescript": "^4.8.4",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "repository": {