@node-projects/web-component-designer 0.0.118 → 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/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.118",
+  "version": "0.0.119",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",