@node-projects/web-component-designer 0.1.50 → 0.1.51

package/dist/elements/helper/TransformHelper.js

@@ -9,16 +9,16 @@ export function getElementCombinedTransform(element) {
     //https://www.w3.org/TR/css-transforms-2/#ctm
     let s = getComputedStyle(element);
     let m = new DOMMatrix();
-    if (s.translate != 'none') {
+    if (s.translate != 'none' && s.translate) {
         m = m.multiply(new DOMMatrix('translate(' + s.translate + ')'));
     }
-    if (s.rotate != 'none') {
+    if (s.rotate != 'none' && s.rotate) {
         m = m.multiply(new DOMMatrix('rotate(' + s.rotate + ')'));
     }
-    if (s.scale != 'none') {
+    if (s.scale != 'none' && s.scale) {
         m = m.multiply(new DOMMatrix('scale(' + s.scale + ')'));
     }
-    if (s.transform != 'none') {
+    if (s.transform != 'none' && s.transform) {
         m = m.multiply(new DOMMatrix(s.transform));
     }
     return m;
@@ -119,7 +119,7 @@ export function getResultingTransformationBetweenElementAndAllAncestors(element,
     let actualElementMatrix;
     let newElementMatrix;
     let originalElementAndAllParentsMultipliedMatrix;
-    while (actualElement != ancestor) {
+    while (actualElement != ancestor && actualElement != null) {
         let cachedObj = ch.get(actualElement);
         if (cachedObj) {
             if (originalElementAndAllParentsMultipliedMatrix)
@@ -130,19 +130,21 @@ export function getResultingTransformationBetweenElementAndAllAncestors(element,
             break;
         }
         const newElement = getParentElementIncludingSlots(actualElement);
-        actualElementMatrix = getElementCombinedTransform(actualElement);
-        newElementMatrix = getElementCombinedTransform(newElement);
-        newElementMatrix.m41 = newElementMatrix.m42 = 0;
-        if (actualElement == element) {
-            originalElementAndAllParentsMultipliedMatrix = actualElementMatrix.multiply(newElementMatrix);
-        }
-        else if (newElement != ancestor || !excludeAncestor) {
-            originalElementAndAllParentsMultipliedMatrix = originalElementAndAllParentsMultipliedMatrix.multiply(newElementMatrix);
+        if (newElement) {
+            actualElementMatrix = getElementCombinedTransform(actualElement);
+            newElementMatrix = getElementCombinedTransform(newElement);
+            newElementMatrix.m41 = newElementMatrix.m42 = 0;
+            if (actualElement == element) {
+                originalElementAndAllParentsMultipliedMatrix = actualElementMatrix.multiply(newElementMatrix);
+            }
+            else if (newElement != ancestor || !excludeAncestor) {
+                originalElementAndAllParentsMultipliedMatrix = originalElementAndAllParentsMultipliedMatrix.multiply(newElementMatrix);
+            }
+            lst.forEach(x => x[0] = x[0].multiply(originalElementAndAllParentsMultipliedMatrix));
+            const cacheEntry = [originalElementAndAllParentsMultipliedMatrix];
+            lst.push(cacheEntry);
+            ch.set(actualElement, cacheEntry);
         }
-        lst.forEach(x => x[0] = x[0].multiply(originalElementAndAllParentsMultipliedMatrix));
-        const cacheEntry = [originalElementAndAllParentsMultipliedMatrix];
-        lst.push(cacheEntry);
-        ch.set(actualElement, cacheEntry);
         actualElement = newElement;
     }
     return originalElementAndAllParentsMultipliedMatrix;
@@ -154,6 +156,8 @@ export function getByParentsTransformedPointRelatedToCanvas(element, point, desi
     let byParentTransformedPointRelatedToCanvas = { x: 0, y: 0 };
     while (actualElement != canvas) {
         const parentElement = getParentElementIncludingSlots(actualElement);
+        if (!parentElement)
+            break;
         const elementWindowOffset = getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement, designerCanvas.zoomFactor, cache);
         const toSplit = getComputedStyle(parentElement).transformOrigin.split(' ');
         const tfX = parseFloat(toSplit[0]);

package/dist/elements/item/DesignItem.js

@@ -8,8 +8,7 @@ import { InsertChildAction } from '../services/undoService/transactionItems/Inse
 import { DomConverter } from '../widgets/designerView/DomConverter.js';
 import { DeleteAction } from '../services/undoService/transactionItems/DeleteAction.js';
 import { enableStylesheetService } from '../widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js';
-import { AbstractStylesheetService } from '../services/stylesheetService/AbstractStylesheetService.js';
-import { TypedEvent, cssFromString } from '@node-projects/base-custom-webcomponent';
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { TextContentChangeAction } from '../services/undoService/transactionItems/TextContentChangeAction.js';
 const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
 const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
@@ -306,6 +305,15 @@ export class DesignItem {
     }
     static createDesignItemFromInstance(node, serviceContainer, instanceServiceContainer) {
         let designItem = new DesignItem(node, node, serviceContainer, instanceServiceContainer);
+        if (node instanceof HTMLTemplateElement && node.getAttribute('shadowrootmode') == 'open') {
+            try {
+                const shadow = node.parentNode.attachShadow({ mode: 'open' });
+                shadow.appendChild(node.content.cloneNode(true));
+            }
+            catch (err) {
+                console.error("error attaching shadowdom", err);
+            }
+        }
         if (designItem.nodeType == NodeType.Element) {
             for (let a of designItem.element.attributes) {
                 if (a.name !== 'style') {
@@ -335,10 +343,19 @@ export class DesignItem {
     updateChildrenFromNodesChildren() {
         this._childArray = [];
         if (this.nodeType == NodeType.Element) {
-            for (const c of this.element.childNodes) {
-                const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer);
-                this._childArray.push(di);
-                di._parent = this;
+            if (this.element instanceof HTMLTemplateElement) {
+                for (const c of this.element.content.childNodes) {
+                    const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer);
+                    this._childArray.push(di);
+                    di._parent = this;
+                }
+            }
+            else {
+                for (const c of this.element.childNodes) {
+                    const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer);
+                    this._childArray.push(di);
+                    di._parent = this;
+                }
             }
         }
         this._refreshIfStyleSheet();
@@ -495,11 +512,19 @@ export class DesignItem {
         }
         if (index == null || this._childArray.length == 0 || index >= this._childArray.length) {
             this._childArray.push(designItem);
-            this.view.appendChild(designItem.view);
+            if (this.view instanceof HTMLTemplateElement) {
+                this.view.content.appendChild(designItem.view);
+            }
+            else
+                this.view.appendChild(designItem.view);
         }
         else {
             let el = this._childArray[index];
-            this.view.insertBefore(designItem.view, el.element);
+            if (this.view instanceof HTMLTemplateElement) {
+                this.view.content.insertBefore(designItem.view, el.element);
+            }
+            else
+                this.view.insertBefore(designItem.view, el.element);
             this._childArray.splice(index, 0, designItem);
         }
         designItem._parent = this;
@@ -529,9 +554,10 @@ export class DesignItem {
         if (this.name == 'style' || this.parent?.name == 'style') {
             //Update Stylesheetservice with sheet info
             //Patch this sheetdata
-            const realContent = this._childArray.reduce((a, b) => a + b.content, '');
+            //TODO: do not patch styles in templates, this needs to be recursive, cause the style does not need to be on the root
+            /*const realContent = this._childArray.reduce((a, b) => a + b.content, '');
             this.view.textContent = AbstractStylesheetService.buildPatchedStyleSheet([cssFromString(realContent)]);
-            this.instanceServiceContainer.designerCanvas.lazyTriggerReparseDocumentStylesheets();
+            this.instanceServiceContainer.designerCanvas.lazyTriggerReparseDocumentStylesheets();*/
         }
         else if (this.name == 'link') {
         }

package/dist/elements/services/demoProviderService/SimpleDemoProviderService.js

@@ -21,7 +21,13 @@ export class SimpleDemoProviderService {
                 .map(x => cssFromString(x.content)));
         }
         shadowRoot.adoptedStyleSheets = styles;
-        shadowRoot.innerHTML = code;
+        shadowRoot.innerHTML = '';
+        //@ts-ignore
+        const myDocument = new DOMParser().parseFromString(code, 'text/html', { includeShadowRoots: true });
+        const fragment = document.createDocumentFragment();
+        for (let e of myDocument.childNodes)
+            fragment.appendChild(e);
+        shadowRoot.appendChild(fragment);
         contentDiv.style.display = '';
     }
 }

package/dist/elements/services/propertiesService/PropertyGroupsService.js

@@ -44,11 +44,13 @@ export class PropertyGroupsService {
         let lst = this._pgList;
         if (designItems[0].element instanceof SVGElement)
             lst = this._svgPgList;
-        const parentStyle = getComputedStyle(designItems[0].element.parentElement);
-        if (parentStyle.display.includes('grid'))
-            lst = [...lst, this._gridChild[0]];
-        else if (parentStyle.display.includes('flex'))
-            lst = [...lst, this._flexChild[0]];
+        if (designItems[0].element.parentElement) {
+            const parentStyle = getComputedStyle(designItems[0].element.parentElement);
+            if (parentStyle.display.includes('grid'))
+                lst = [...lst, this._gridChild[0]];
+            else if (parentStyle.display.includes('flex'))
+                lst = [...lst, this._flexChild[0]];
+        }
         return lst;
     }
 }

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

@@ -1037,7 +1037,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         if (this._lastHoverDesignItem != currentDesignItem) {
             if (this._lastHoverDesignItem)
                 this.extensionManager.removeExtension(this._lastHoverDesignItem, ExtensionType.MouseOver);
-            if (currentDesignItem && currentDesignItem != this.rootDesignItem && DomHelper.getHost(element.parentNode) !== this.overlayLayer)
+            if (currentDesignItem && currentDesignItem != this.rootDesignItem && (!element.parentNode || DomHelper.getHost(element.parentNode) !== this.overlayLayer))
                 this.extensionManager.applyExtension(currentDesignItem, ExtensionType.MouseOver, event);
             this._lastHoverDesignItem = currentDesignItem;
         }

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

@@ -12,22 +12,24 @@ export class ElementDragTitleExtension extends AbstractExtension {
     }
     extend() {
         const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
-        const boundRect = this.extendedItem.element.getBoundingClientRect();
-        let w = getTextWidth(this.extendedItem.name, '10px monospace');
-        let elementWidth = Math.sqrt(Math.pow(transformedCornerPoints[1].x - transformedCornerPoints[0].x, 2) + Math.pow(transformedCornerPoints[1].y - transformedCornerPoints[0].y, 2));
-        let text = this.extendedItem.name;
-        this._width = Math.max(Math.min(elementWidth, w), extensionWidth);
-        if (w > this._width)
-            text = this.extendedItem.name.substring(0, 10) + '…';
-        this._rect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-primary-selection-move', this._rect);
-        this._text = this._drawText(text, (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
-        const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
-        title.textContent = this.extendedItem.name;
-        this._text.appendChild(title);
-        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();
+        if (!isNaN(transformedCornerPoints[0].x)) {
+            const boundRect = this.extendedItem.element.getBoundingClientRect();
+            let w = getTextWidth(this.extendedItem.name, '10px monospace');
+            let elementWidth = Math.sqrt(Math.pow(transformedCornerPoints[1].x - transformedCornerPoints[0].x, 2) + Math.pow(transformedCornerPoints[1].y - transformedCornerPoints[0].y, 2));
+            let text = this.extendedItem.name;
+            this._width = Math.max(Math.min(elementWidth, w), extensionWidth);
+            if (w > this._width)
+                text = this.extendedItem.name.substring(0, 10) + '…';
+            this._rect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-primary-selection-move', this._rect);
+            this._text = this._drawText(text, (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
+            const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
+            title.textContent = this.extendedItem.name;
+            this._text.appendChild(title);
+            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) {
     }
@@ -35,19 +37,21 @@ export class ElementDragTitleExtension extends AbstractExtension {
         const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 0, y: 16 }, this.designerCanvas);
         const angle = Math.atan2((transformedCornerPoints[1].y - transformedCornerPoints[0].y), (transformedCornerPoints[1].x - transformedCornerPoints[0].x)) * 180 / Math.PI;
         const transformedCornerPointsTx = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 0, y: 5 }, this.designerCanvas);
-        const h = (15 / this.designerCanvas.scaleFactor);
-        const w = (this._width / this.designerCanvas.scaleFactor);
-        this._rect.setAttribute('x', '' + transformedCornerPoints[0].x);
-        this._rect.setAttribute('y', '' + transformedCornerPoints[0].y);
-        this._rect.style.rotate = angle + 'deg';
-        this._rect.style.transformBox = 'fill-box';
-        this._rect.setAttribute('height', '' + h);
-        this._rect.setAttribute('width', '' + w);
-        this._rect.style.strokeWidth = (1 / this.designerCanvas.scaleFactor).toString();
-        this._text.setAttribute('x', '' + transformedCornerPointsTx[0].x);
-        this._text.setAttribute('y', '' + transformedCornerPointsTx[0].y);
-        this._text.style.fontSize = (10 / this.designerCanvas.scaleFactor) + 'px';
-        this._text.setAttribute('transform', 'rotate(' + angle + ' ' + transformedCornerPointsTx[0].x + ' ' + transformedCornerPointsTx[0].y + ')');
+        if (!isNaN(transformedCornerPoints[0].x)) {
+            const h = (15 / this.designerCanvas.scaleFactor);
+            const w = (this._width / this.designerCanvas.scaleFactor);
+            this._rect.setAttribute('x', '' + transformedCornerPoints[0].x);
+            this._rect.setAttribute('y', '' + transformedCornerPoints[0].y);
+            this._rect.style.rotate = angle + 'deg';
+            this._rect.style.transformBox = 'fill-box';
+            this._rect.setAttribute('height', '' + h);
+            this._rect.setAttribute('width', '' + w);
+            this._rect.style.strokeWidth = (1 / this.designerCanvas.scaleFactor).toString();
+            this._text.setAttribute('x', '' + transformedCornerPointsTx[0].x);
+            this._text.setAttribute('y', '' + transformedCornerPointsTx[0].y);
+            this._text.style.fontSize = (10 / this.designerCanvas.scaleFactor) + 'px';
+            this._text.setAttribute('transform', 'rotate(' + angle + ' ' + transformedCornerPointsTx[0].x + ' ' + transformedCornerPointsTx[0].y + ')');
+        }
     }
     _pointerEvent(event) {
         event.preventDefault();

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

@@ -11,8 +11,10 @@ export class HighlightElementExtension extends AbstractExtension {
     }
     refresh() {
         let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: offset, y: offset }, this.designerCanvas);
-        this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-hover', this._rect);
-        this._rect.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
+        if (!isNaN(transformedCornerPoints[0].x)) {
+            this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-hover', this._rect);
+            this._rect.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
+        }
     }
     dispose() {
         this._removeAllOverlays();

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.50",
+  "version": "0.1.51",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",