@node-projects/web-component-designer 0.0.85 → 0.0.86

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

@@ -1 +1 @@
-export declare function combineTransforms(element: HTMLElement, transform1: string, transform2: string): void;
+export declare function combineTransforms(helperElement: HTMLElement, element: HTMLElement, transform1: string, transform2: string): void;

package/dist/elements/helper/TransformHelper.js

@@ -1,12 +1,14 @@
-export function combineTransforms(element, transform1, transform2) {
+export function combineTransforms(helperElement, element, transform1, transform2) {
     if (transform1 == null || transform1 == '') {
         element.style.transform = transform2;
         return;
     }
-    element.style.transform = transform1;
-    const matrix1 = new DOMMatrix(window.getComputedStyle(element).transform);
-    element.style.transform = transform2;
-    const matrix2 = new DOMMatrix(window.getComputedStyle(element).transform);
+    helperElement.style.transform = '';
+    helperElement.style.transform = transform1;
+    const matrix1 = new DOMMatrix(window.getComputedStyle(helperElement).transform);
+    helperElement.style.transform = '';
+    helperElement.style.transform = transform2;
+    const matrix2 = new DOMMatrix(window.getComputedStyle(helperElement).transform);
     const result = matrix2.multiply(matrix1);
     element.style.transform = result.toString();
 }

package/dist/elements/item/DesignItem.js

@@ -188,8 +188,9 @@ export class DesignItem {
                         designItem.styles.set(e.name, e.value);
                     }
                 }
-                if (!designItem._lockAtDesignTime)
-                    node.style.pointerEvents = 'auto';
+                if (!designItem._lockAtDesignTime) {
+                    requestAnimationFrame(() => node.style.pointerEvents = 'auto');
+                }
                 else
                     node.style.pointerEvents = 'none';
                 //node.style.cursor = 'pointer';

package/dist/elements/services/htmlParserService/NodeHtmlParserService.js

@@ -43,7 +43,7 @@ export class NodeHtmlParserService {
             let attr = item.attributes;
             for (let a in attr) {
                 if (a !== 'style') {
-                    designItem.setAttribute(a, attr[a]);
+                    designItem.attributes.set(a, attr[a]);
                     if (a === 'node-projects-hide-at-design-time')
                         hideAtDesignTime = true;
                     else if (a === 'node-projects-hide-at-run-time')
@@ -59,11 +59,12 @@ export class NodeHtmlParserService {
                 let styleParser = new CssAttributeParser();
                 styleParser.parse(style);
                 for (let s of styleParser.entries) {
-                    designItem.setStyle(s.name, s.value);
+                    designItem.styles.set(s.name, s.value);
                 }
             }
-            if (element instanceof HTMLElement || element instanceof SVGElement)
-                element.style.pointerEvents = 'auto';
+            if (!lockAtDesignTime && (element instanceof HTMLElement || element instanceof SVGElement)) {
+                requestAnimationFrame(() => element.style.pointerEvents = 'auto');
+            }
             designItem.hideAtDesignTime = hideAtDesignTime;
             designItem.hideAtRunTime = hideAtRunTime;
             designItem.lockAtDesignTime = lockAtDesignTime;

package/dist/elements/services/placementService/DefaultPlacementService.js

@@ -82,7 +82,7 @@ export class DefaultPlacementService {
         //TODO: -> what is if a transform already exists -> backup existing style.?
         for (const designItem of filterdItems) {
             const newTransform = 'translate(' + track.x + 'px, ' + track.y + 'px)';
-            combineTransforms(designItem.element, designItem.styles.get('transform'), newTransform);
+            combineTransforms(placementView.transformHelperElement, designItem.element, designItem.styles.get('transform'), newTransform);
         }
     }
     enterContainer(container, items) {

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

@@ -31,4 +31,5 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;
     elementFromPoint(x: number, y: number): Element;
+    getItemsBelowMouse(event: MouseEvent): Element[];
 }

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

@@ -10,4 +10,5 @@ export interface IPlacementView {
     snapLines: Snaplines;
     readonly zoomFactor: number;
     readonly scaleFactor: number;
+    readonly transformHelperElement: HTMLDivElement;
 }

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

@@ -25,6 +25,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     overlayLayer: OverlayLayerView;
     rootDesignItem: IDesignItem;
     eatEvents: Element;
+    transformHelperElement: HTMLDivElement;
     private _zoomFactor;
     private _scaleFactor;
     private _canvasOffset;
@@ -87,4 +88,5 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _fillCalculationrects;
     addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
     removeOverlay(element: SVGGraphicsElement): void;
+    getItemsBelowMouse(event: MouseEvent): Element[];
 }

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

@@ -34,6 +34,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     overlayLayer;
     rootDesignItem;
     eatEvents;
+    transformHelperElement;
     _zoomFactor = 1; //if scale or zoom css property is used this needs to be the value
     _scaleFactor = 1; //if scale css property is used this need to be the scale value
     _canvasOffset = { x: 0, y: 0 };
@@ -117,6 +118,11 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       cursor: pointer;
       user-select: none;
       -webkit-user-select: none;
+    }
+    
+    #transformHelper {
+      height: 0;
+      width: 0;
     }`;
     static template = html `
     <div style="display: flex;flex-direction: column;width: 100%;height: 100%;">
@@ -129,6 +135,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
           </div>
         </div>
       </div>
+      <div id="transformHelper"></div>
     </div>`;
     extensionManager;
     _pointerextensions;
@@ -138,6 +145,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvas = this._getDomElement('node-projects-designer-canvas-canvas');
         this._canvasContainer = this._getDomElement('node-projects-designer-canvas-canvasContainer');
         this._outercanvas2 = this._getDomElement('node-projects-designer-canvas-outercanvas2');
+        this.transformHelperElement = this._getDomElement('transformHelper');
         this._onKeyDownBound = this.onKeyDown.bind(this);
         this._onKeyUpBound = this.onKeyUp.bind(this);
         this._onDblClickBound = this._onDblClick.bind(this);
@@ -480,11 +488,16 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _onContextMenu(event) {
         event.preventDefault();
         if (!event.shiftKey) {
-            const designItem = DesignItem.GetOrCreateDesignItem(event.target, this.serviceContainer, this.instanceServiceContainer);
-            if (!this.instanceServiceContainer.selectionService.isSelected(designItem)) {
-                this.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+            let items = this.getItemsBelowMouse(event);
+            if (items.indexOf(this.instanceServiceContainer.selectionService.primarySelection.element) >= 0)
+                this.showDesignItemContextMenu(this.instanceServiceContainer.selectionService.primarySelection, event);
+            else {
+                const designItem = DesignItem.GetOrCreateDesignItem(event.target, this.serviceContainer, this.instanceServiceContainer);
+                if (!this.instanceServiceContainer.selectionService.isSelected(designItem)) {
+                    this.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+                }
+                this.showDesignItemContextMenu(designItem, event);
             }
-            this.showDesignItemContextMenu(designItem, event);
         }
     }
     showDesignItemContextMenu(designItem, event) {
@@ -684,5 +697,38 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     removeOverlay(element) {
         this.overlayLayer.removeOverlay(element);
     }
+    getItemsBelowMouse(event) {
+        const lstEl = [];
+        //search for containers below mouse cursor.
+        //to do this, we need to disable pointer events for each in a loop and search wich element is there
+        let backupPEventsMap = new Map();
+        try {
+            let el = this.elementFromPoint(event.x, event.y);
+            backupPEventsMap.set(el, el.style.pointerEvents);
+            el.style.pointerEvents = 'none';
+            if (el !== this.rootDesignItem.element) {
+                el = this.elementFromPoint(event.x, event.y);
+                while (el != null) {
+                    if (el === this.rootDesignItem.element)
+                        break;
+                    if (el !== this.overlayLayer && el.parentElement !== this.overlayLayer && el.getRootNode() === this.shadowRoot)
+                        lstEl.push(el);
+                    if (!backupPEventsMap.has(el))
+                        backupPEventsMap.set(el, el.style.pointerEvents);
+                    el.style.pointerEvents = 'none';
+                    const oldEl = el;
+                    el = this.elementFromPoint(event.x, event.y);
+                    if (oldEl === el)
+                        break;
+                }
+            }
+        }
+        finally {
+            for (let e of backupPEventsMap.entries()) {
+                e[0].style.pointerEvents = e[1];
+            }
+        }
+        return lstEl;
+    }
 }
 customElements.define('node-projects-designer-canvas', DesignerCanvas);

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

@@ -8,20 +8,22 @@ export class ExtensionManager {
         designerCanvas.instanceServiceContainer.contentService.onContentChanged.on(this._contentChanged.bind(this));
     }
     _contentChanged(contentChanged) {
-        switch (contentChanged.changeType) {
-            case 'added':
-                this.applyExtensions(contentChanged.designItems, ExtensionType.Permanent, true);
-                break;
-            case 'moved':
-                this.refreshExtensions(contentChanged.designItems, ExtensionType.Permanent);
-                break;
-            case 'parsed':
-                this.applyExtensions(Array.from(this.designerCanvas.rootDesignItem.children()), ExtensionType.Permanent, true);
-                break;
-            case 'removed':
-                this.removeExtensions(contentChanged.designItems, ExtensionType.Permanent);
-                break;
-        }
+        requestAnimationFrame(() => {
+            switch (contentChanged.changeType) {
+                case 'added':
+                    this.applyExtensions(contentChanged.designItems, ExtensionType.Permanent, true);
+                    break;
+                case 'moved':
+                    this.refreshExtensions(contentChanged.designItems, ExtensionType.Permanent);
+                    break;
+                case 'parsed':
+                    this.applyExtensions(Array.from(this.designerCanvas.rootDesignItem.children()), ExtensionType.Permanent, true);
+                    break;
+                case 'removed':
+                    this.removeExtensions(contentChanged.designItems, ExtensionType.Permanent);
+                    break;
+            }
+        });
     }
     _selectedElementsChanged(selectionChangedEvent) {
         if (selectionChangedEvent.oldSelectedElements && selectionChangedEvent.oldSelectedElements.length) {

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

@@ -1,4 +1,5 @@
 import { AbstractExtension } from './AbstractExtension';
+import { OverlayLayer } from "./OverlayLayer.js";
 export class InvisibleDivExtension extends AbstractExtension {
     _rect;
     constructor(extensionManager, designerCanvas, extendedItem) {
@@ -8,13 +9,13 @@ export class InvisibleDivExtension extends AbstractExtension {
         this.refresh();
     }
     refresh() {
-        const itemRect = this.extendedItem.element.getBoundingClientRect();
+        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         const computedStyle = getComputedStyle(this.extendedItem.element);
         const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
         const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
         const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
         const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
-        this._rect = this._drawRect(itemRect.x - this.designerCanvas.containerBoundingRect.x - left, itemRect.y - this.designerCanvas.containerBoundingRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-invisible-div', this._rect);
+        this._rect = this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-invisible-div', this._rect, OverlayLayer.Background);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -4,7 +4,6 @@ import { IDesignerCanvas } from "../../IDesignerCanvas";
 import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
 export declare class ItemsBelowContextMenu implements IContextMenuExtension {
     shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
-    provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+    provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
     private _select;
-    private _searchForItemsBelow;
 }

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

@@ -3,11 +3,11 @@ export class ItemsBelowContextMenu {
     shouldProvideContextmenu(event, designerView, designItem, initiator) {
         return initiator == 'designer';
     }
-    provideContextMenuItems(event, designerView, designItem) {
-        const lstItems = this._searchForItemsBelow(event, designerView);
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        const lstItems = designerCanvas.getItemsBelowMouse(event);
         if (lstItems.length > 0) {
             //TODO: create a submenu 'select items below...'
-            return [{ title: '-' }, ...lstItems.map(x => ({ title: 'select: ' + x.localName + (x.id ? ' (' + x.id + ')' : ''), action: () => this._select(designerView, x) }))];
+            return [{ title: '-' }, ...lstItems.map(x => ({ title: 'select: ' + x.localName + (x.id ? ' (' + x.id + ')' : ''), action: () => this._select(designerCanvas, x) }))];
         }
         return [];
     }
@@ -15,37 +15,4 @@ export class ItemsBelowContextMenu {
         const item = DesignItem.GetOrCreateDesignItem(element, designerView.serviceContainer, designerView.instanceServiceContainer);
         designerView.instanceServiceContainer.selectionService.setSelectedElements([item]);
     }
-    _searchForItemsBelow(event, designerView) {
-        const lstEl = [];
-        //search for containers below mouse cursor.
-        //to do this, we need to disable pointer events for each in a loop and search wich element is there
-        let backupPEventsMap = new Map();
-        try {
-            let el = designerView.elementFromPoint(event.x, event.y);
-            backupPEventsMap.set(el, el.style.pointerEvents);
-            el.style.pointerEvents = 'none';
-            if (el !== designerView.rootDesignItem.element) {
-                el = designerView.elementFromPoint(event.x, event.y);
-                while (el != null) {
-                    if (el === designerView.rootDesignItem.element)
-                        break;
-                    if (el !== designerView.overlayLayer && el.parentElement !== designerView.overlayLayer && el.getRootNode() === designerView.shadowRoot)
-                        lstEl.push(el);
-                    if (!backupPEventsMap.has(el))
-                        backupPEventsMap.set(el, el.style.pointerEvents);
-                    el.style.pointerEvents = 'none';
-                    const oldEl = el;
-                    el = designerView.elementFromPoint(event.x, event.y);
-                    if (oldEl === el)
-                        break;
-                }
-            }
-        }
-        finally {
-            for (let e of backupPEventsMap.entries()) {
-                e[0].style.pointerEvents = e[1];
-            }
-        }
-        return lstEl;
-    }
 }

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

@@ -366,6 +366,7 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
                 //@ts-ignore
                 if (activeElements.indexOf(node.data.ref) >= 0) {
                     node.setSelected(true);
+                    node.makeVisible({ scrollIntoView: true });
                 }
                 else {
                     node.setSelected(false);

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.85",
+  "version": "0.0.86",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",