@node-projects/web-component-designer 0.0.118 → 0.0.120

package/dist/elements/helper/contextMenu/ContextMenuHelper.js

@@ -133,12 +133,17 @@ export class ContextMenuHelper {
         let ul = document.createElement('ul');
         ul.className = 'context-menu__items';
         nav.appendChild(ul);
+        let lastWasSeperator = false;
         for (let i of items) {
             if (i.title == '-') {
-                let hr = document.createElement('hr');
-                ul.appendChild(hr);
+                if (!lastWasSeperator) {
+                    let hr = document.createElement('hr');
+                    ul.appendChild(hr);
+                    lastWasSeperator = true;
+                }
             }
             else {
+                lastWasSeperator = false;
                 let li = document.createElement('li');
                 li.className = 'context-menu__item';
                 let div = document.createElement('div');

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

@@ -6,12 +6,14 @@ 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)) ||
-            (designItem.element.previousElementSibling == null && !isInline(designItem.element.parentElement) && (designItem.element.previousSibling == null || isEmptyTextNode(designItem.element.previousSibling))))
+            (designItem.element.previousElementSibling == null && !isInline(designItem.element.parentElement) && (designItem.element.previousSibling == null || isEmptyTextNode(designItem.element.previousSibling))) ||
+            (designItem.element instanceof SVGElement))
             indentedTextWriter.writeIndent();
     }
     _conditionalyWriteNewline(indentedTextWriter, designItem) {
         if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
-            (designItem.element.nextElementSibling instanceof HTMLElement && !isInline(designItem.element.nextElementSibling)))
+            (designItem.element.nextElementSibling instanceof HTMLElement && !isInline(designItem.element.nextElementSibling)) ||
+            (designItem.element instanceof SVGElement))
             indentedTextWriter.writeNewline();
     }
     write(indentedTextWriter, designItems, rootContainerKeepInline, options, designItemsAssignmentList) {
@@ -48,7 +50,7 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
                     this.writeTextNode(indentedTextWriter, designItem, false);
                 }
                 else {
-                    if (designItem.element instanceof HTMLElement && !isInline(designItem.element)) {
+                    if (designItem.element instanceof HTMLElement && !isInline(designItem.element) || (designItem.element instanceof SVGElement)) {
                         indentedTextWriter.writeNewline();
                         indentedTextWriter.levelRaise();
                     }
@@ -56,9 +58,10 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
                         this.internalWrite(indentedTextWriter, c, options, designItemsAssignmentList);
                         let childSingleTextNode = c.childCount === 1 && c.firstChild.nodeType === NodeType.TextNode;
                         if (childSingleTextNode)
-                            indentedTextWriter.writeNewline();
+                            if (!indentedTextWriter.isLastCharNewline())
+                                indentedTextWriter.writeNewline();
                     }
-                    if (designItem.element instanceof HTMLElement && !isInline(designItem.element)) {
+                    if (designItem.element instanceof HTMLElement && !isInline(designItem.element) || (designItem.element instanceof SVGElement)) {
                         indentedTextWriter.levelShrink();
                         if (!indentedTextWriter.isLastCharNewline())
                             indentedTextWriter.writeNewline();
@@ -73,7 +76,8 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
             if (!DomConverter.IsSelfClosingElement(designItem.name))
                 indentedTextWriter.write('</' + designItem.name + '>');
             //if (!contentSingleTextNode)
-            this._conditionalyWriteNewline(indentedTextWriter, designItem);
+            if (!indentedTextWriter.isLastCharNewline())
+                this._conditionalyWriteNewline(indentedTextWriter, designItem);
         }
         if (designItemsAssignmentList) {
             designItemsAssignmentList.set(designItem, { start: start, length: indentedTextWriter.position - start - 1 });

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

@@ -319,9 +319,26 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     async handlePasteCommand() {
         const designItems = await this.serviceContainer.copyPasteService.getPasteItems(this.serviceContainer, this.instanceServiceContainer);
         let grp = this.rootDesignItem.openGroup("Insert");
+        let pasteContainer = this.rootDesignItem;
+        let pCon = this.instanceServiceContainer.selectionService.primarySelection;
+        while (pCon != null) {
+            const containerStyle = getComputedStyle(pCon.element);
+            let newContainerService;
+            newContainerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(pCon, containerStyle));
+            if (newContainerService) {
+                if (newContainerService.canEnter(pCon, designItems)) {
+                    pasteContainer = pCon;
+                    break;
+                }
+                else {
+                    pCon = pCon.parent;
+                    continue;
+                }
+            }
+        }
         if (designItems) {
             for (let di of designItems) {
-                this.instanceServiceContainer.undoService.execute(new InsertAction(this.rootDesignItem, this.rootDesignItem.childCount, di));
+                this.instanceServiceContainer.undoService.execute(new InsertAction(pasteContainer, pasteContainer.childCount, di));
             }
             const intializationService = this.serviceContainer.intializationService;
             if (intializationService) {
@@ -406,7 +423,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/SelectAllChildrenContextMenu.js

@@ -5,7 +5,7 @@ export class SelectAllChildrenContextMenu {
     }
     provideContextMenuItems(event, designerCanvas, designItem) {
         return [{
-                title: 'Select all Children', action: () => {
+                title: 'select all Children', action: () => {
                     designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(Array.from(designItem.children()).filter(x => x.nodeType == NodeType.Element));
                 }
             }];

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/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.js

@@ -30,7 +30,7 @@ export class DesignerToolbarButton extends BaseCustomWebComponentConstructorAppe
         this.tools = tools;
         this._img = this._getDomElement('img');
         this._div = this._getDomElement('div');
-        this._img.onclick = () => {
+        this._div.onclick = () => {
             if (this.popup) {
                 this.getRootNode().host.showPopup(this);
             }

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.120",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",