npm - @node-projects/web-component-designer - Versions diffs - 0.1.162 → 0.1.165 - Mend

@node-projects/web-component-designer 0.1.162 → 0.1.165

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/assets/designerCanvasIframe.html ADDED Viewed

@@ -0,0 +1,20 @@
+<html>
+<head>
+    <script>
+        window.addEventListener("message",
+            (event) => {
+                const data = event.data;
+                const obj = JSON.parse(data);
+                switch (obj.type) {
+                    case 'elementsFromPoint': {
+                        const ret = document.elementsFromPoint(...obj.par);
+                    }
+                }
+            }, false);
+    </script>
+</head>
+<body></body>
+</html>

package/dist/elements/helper/ElementHelper.js CHANGED Viewed

@@ -7,7 +7,6 @@ export function inDesigner(element) {
 }
 export function newElementFromString(text, document) {
     const range = document.createRange();
-    range.selectNode(document.body);
     //@ts-ignore
     const fragment = range.createContextualFragment(text, { includeShadowRoots: true });
     return fragment.firstChild;

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

@@ -20,4 +20,3 @@ export declare function getElementSize(element: HTMLElement): {
 export declare function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element: HTMLElement, untransformedCornerPointsOffset: IPoint | null, designerCanvas: IDesignerCanvas, cache?: Record<string | symbol, any>): [DOMPoint, DOMPoint, DOMPoint, DOMPoint];
 export declare function extractTranslationFromDOMMatrix(matrix: DOMMatrix): DOMPoint;
 export declare function extractRotationAngleFromDOMMatrix(matrix: DOMMatrix): number;
-export declare function normalizeToAbsolutePosition(element: HTMLElement, normalizeProperty: "left" | "top"): string;

package/dist/elements/helper/TransformHelper.js CHANGED Viewed

@@ -9,7 +9,7 @@ let identityMatrix = [
 ];
 export function getElementCombinedTransform(element) {
     //https://www.w3.org/TR/css-transforms-2/#ctm
-    let s = getComputedStyle(element);
+    let s = element.ownerDocument.defaultView.getComputedStyle(element);
     let m = new DOMMatrix();
     if (s.translate != 'none' && s.translate) {
         m = m.multiply(new DOMMatrix('translate(' + s.translate + ')'));
@@ -37,9 +37,6 @@ export function combineTransforms(element, actualTransforms, requestedTransforma
 }
 export function transformPointByInverseMatrix(point, matrix) {
     const inverse = matrix.inverse();
-    //fix chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1395645
-    inverse.m33 = 1;
-    inverse.m44 = 1;
     return point.matrixTransform(inverse);
 }
 export function getRotationMatrix3d(axisOfRotation, angle) {
@@ -113,46 +110,37 @@ export function getDesignerCanvasNormalizedTransformedOriginWithoutParentTransfo
     const designerCanvasNormalizedTransformedOrigin = new DOMPoint(transformOriginAbsolutRelatedToWindowWithoutAnyTransformation.x - designerCanvas.containerBoundingRect.x, transformOriginAbsolutRelatedToWindowWithoutAnyTransformation.y - designerCanvas.containerBoundingRect.y);
     return designerCanvasNormalizedTransformedOrigin;
 }
-//const elementMatrixCacheKey = Symbol('windowOffsetsCacheKey');
+const elementMatrixCacheKey = Symbol('windowOffsetsCacheKey');
 export function getResultingTransformationBetweenElementAndAllAncestors(element, ancestor, excludeAncestor, cache = {}) {
-    /*let ch: Map<any, [DOMMatrix]>;
+    let ch;
     if (cache)
-      ch = cache[elementMatrixCacheKey] ??= new Map<any, [DOMMatrix]>();
+        ch = cache[elementMatrixCacheKey] ??= new Map();
     else
-      ch = new Map<any, [DOMMatrix]>();*/
-    let lst = [];
+        ch = new Map();
+    const res = ch.get(element);
+    if (res)
+        return res;
     let actualElement = element;
     let actualElementMatrix;
     let newElementMatrix;
     let originalElementAndAllParentsMultipliedMatrix;
     while (actualElement != ancestor && actualElement != null) {
-        /*let cachedObj = ch.get(actualElement);
-        if (cachedObj) {
-          if (originalElementAndAllParentsMultipliedMatrix)
-            originalElementAndAllParentsMultipliedMatrix = cachedObj[0].multiply(originalElementAndAllParentsMultipliedMatrix);
-          else
-            originalElementAndAllParentsMultipliedMatrix = cachedObj[0];
-          lst.forEach(x => x[0] = x[0].multiply(originalElementAndAllParentsMultipliedMatrix));
-          break;
-        }*/
         const newElement = getParentElementIncludingSlots(actualElement);
         if (newElement) {
             actualElementMatrix = getElementCombinedTransform(actualElement);
             newElementMatrix = getElementCombinedTransform(newElement);
-            newElementMatrix.m41 = newElementMatrix.m42 = 0;
+            actualElementMatrix.m43 = 0;
+            newElementMatrix.m41 = newElementMatrix.m42 = newElementMatrix.m43 = 0;
             if (actualElement == element) {
-                originalElementAndAllParentsMultipliedMatrix = actualElementMatrix.multiply(newElementMatrix);
+                originalElementAndAllParentsMultipliedMatrix = newElementMatrix.multiply(actualElementMatrix);
             }
             else if (newElement != ancestor || !excludeAncestor) {
-                originalElementAndAllParentsMultipliedMatrix = originalElementAndAllParentsMultipliedMatrix.multiply(newElementMatrix);
+                originalElementAndAllParentsMultipliedMatrix = newElementMatrix.multiply(originalElementAndAllParentsMultipliedMatrix);
             }
-            lst.forEach(x => x[0] = x[0].multiply(originalElementAndAllParentsMultipliedMatrix));
-            const cacheEntry = [originalElementAndAllParentsMultipliedMatrix];
-            lst.push(cacheEntry);
-            //ch.set(actualElement, cacheEntry);
         }
         actualElement = newElement;
     }
+    ch.set(element, originalElementAndAllParentsMultipliedMatrix);
     return originalElementAndAllParentsMultipliedMatrix;
 }
 export function getByParentsTransformedPointRelatedToCanvas(element, point, designerCanvas, cache) {
@@ -169,8 +157,10 @@ export function getByParentsTransformedPointRelatedToCanvas(element, point, desi
         const tfX = parseFloat(toSplit[0]);
         const tfY = parseFloat(toSplit[1]);
         const parentElementTransformOrigin = new DOMPoint(elementWindowOffset.offsetLeft - designerCanvas.outerRect.x + tfX, elementWindowOffset.offsetTop - designerCanvas.outerRect.y + tfY);
-        if (actualElement == element) {
-            const mtx = extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform));
+        //if (actualElement == element)
+        {
+            const transf = element.ownerDocument.defaultView.getComputedStyle(element).transform;
+            const mtx = extractTranslationFromDOMMatrix(new DOMMatrix(transf));
             parentElementTransformOrigin.x -= mtx.x;
             parentElementTransformOrigin.y -= mtx.y;
         }
@@ -260,23 +250,9 @@ export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, u
     return transformedCornerPoints;
 }
 export function extractTranslationFromDOMMatrix(matrix) {
+    //TODO: maybe we also need m43 here??
     return new DOMPoint(matrix.m41, matrix.m42, 0, 0);
 }
 export function extractRotationAngleFromDOMMatrix(matrix) {
     return getRotationAngleFromMatrix(null, matrix);
 }
-export function normalizeToAbsolutePosition(element, normalizeProperty) {
-    switch (normalizeProperty) {
-        case "left":
-            let left = getComputedStyle(element).left;
-            element.style.removeProperty('right');
-            element.style.left = left;
-            return left;
-        case "top":
-            let top = getComputedStyle(element).top;
-            element.style.removeProperty('bottom');
-            element.style.top = top;
-            return top;
-    }
-    return null;
-}

package/dist/elements/services/DefaultServiceBootstrap.js CHANGED Viewed

@@ -98,6 +98,7 @@ import { BasicWebcomponentPropertiesService } from './propertiesService/services
 import { PreviousElementSelectExtensionProvider } from '../widgets/designerView/extensions/PreviousElementSelectExtensionProvider.js';
 import { ForceCssContextMenu } from '../widgets/designerView/extensions/contextMenu/ForceCssContextMenu.js';
 import { OptionsContextMenuButton } from '../widgets/designerView/extensions/buttons/OptionsContextMenuButton.js';
+import { ChildrenContextMenu } from '../widgets/designerView/extensions/contextMenu/ChildrenContextMenu.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     let defaultPlacementService = new DefaultPlacementService();
@@ -218,6 +219,7 @@ export function createDefaultServiceContainer() {
         new SelectAllChildrenContextMenu(),
         new SeperatorContextMenu(),
         new ItemsBelowContextMenu(),
+        new ChildrenContextMenu(),
     ];
     return serviceContainer;
 }

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

@@ -304,6 +304,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         if (this._useIframe) {
             this._iframe = document.createElement('iframe');
             this._iframe.setAttribute("sandbox", "allow-same-origin");
+            //TODO: add option to allow scripts in iframes...
+            //this._iframe.setAttribute("sandbox", "allow-same-origin allow-scripts");
             this._canvas.appendChild(this._iframe);
             requestAnimationFrame(() => {
                 this._window = this._iframe.contentWindow;

package/dist/elements/widgets/designerView/extensions/PreviousElementSelectExtension.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import { AbstractExtension } from './AbstractExtension.js';
 import { IExtensionManager } from './IExtensionManger.js';
 export declare class PreviousElementSelectExtension extends AbstractExtension {
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    private _path;
     private _rect;
     private _clickRect;
     private _g;

package/dist/elements/widgets/designerView/extensions/PreviousElementSelectExtension.js CHANGED Viewed

@@ -4,6 +4,7 @@ export class PreviousElementSelectExtension extends AbstractExtension {
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
+    _path;
     _rect;
     _clickRect;
     _g;
@@ -13,16 +14,18 @@ export class PreviousElementSelectExtension extends AbstractExtension {
     refresh(cache, event) {
         const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas, cache);
         if (!isNaN(transformedCornerPoints[1].x)) {
-            if (this._valuesHaveChanges(transformedCornerPoints[1].x, transformedCornerPoints[1].y, this.designerCanvas.scaleFactor)) {
+            if (this._valuesHaveChanges(transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[1].x, transformedCornerPoints[1].y, this.designerCanvas.scaleFactor)) {
+                const angle = Math.atan2((transformedCornerPoints[1].y - transformedCornerPoints[0].y), (transformedCornerPoints[1].x - transformedCornerPoints[0].x)) * 180 / Math.PI;
                 const h = (16 / this.designerCanvas.scaleFactor);
-                this._rect = this._drawRect(transformedCornerPoints[1].x - (15 / this.designerCanvas.scaleFactor), transformedCornerPoints[1].y - (16.5 / this.designerCanvas.scaleFactor), h, h, 'svg-previous-select', this._rect);
-                this._clickRect = this._drawRect(transformedCornerPoints[1].x - (15 / this.designerCanvas.scaleFactor), transformedCornerPoints[1].y - (16.5 / this.designerCanvas.scaleFactor), h, h + 3, 'svg-invisible', this._clickRect);
+                this._rect = this._drawRect(0, 0, h, h, 'svg-previous-select', this._rect);
+                this._clickRect = this._drawRect(0, 0, h, h + 3, 'svg-invisible', this._clickRect);
                 if (!this._g) {
                     this._g = document.createElementNS("http://www.w3.org/2000/svg", "g");
                     this._g.setAttribute('class', 'svg-previous-select');
-                    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-                    path.setAttribute('d', 'm4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z');
-                    this._g.appendChild(path);
+                    this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    this._path.setAttribute('d', 'm4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z');
+                    this._g.appendChild(this._rect);
+                    this._g.appendChild(this._path);
                     this._addOverlay(this._g);
                     this._clickRect.onpointerdown = (e) => {
                         e.preventDefault();
@@ -33,8 +36,12 @@ export class PreviousElementSelectExtension extends AbstractExtension {
                         e.preventDefault();
                         e.stopPropagation();
                     };
+                    this._g.appendChild(this._clickRect);
                 }
-                this._g.setAttribute('transform', 'translate(' + (transformedCornerPoints[1].x - (14.5 / this.designerCanvas.scaleFactor)) + ',' + (transformedCornerPoints[1].y - (15.5 / this.designerCanvas.scaleFactor)) + ') scale(' + 0.6 / this.designerCanvas.scaleFactor + ')');
+                this._path.style.scale = (0.6 / this.designerCanvas.scaleFactor).toString();
+                this._g.style.transform = 'translate(' + (transformedCornerPoints[1].x - (14.5 / this.designerCanvas.scaleFactor)) + 'px,' + (transformedCornerPoints[1].y - (15.5 / this.designerCanvas.scaleFactor)) + 'px) rotate(' + angle + 'deg)';
+                this._g.style.transformOrigin = '100% 100%';
+                this._g.style.transformBox = 'fill-box';
             }
         }
     }

package/dist/elements/widgets/designerView/extensions/PreviousElementSelectExtensionProvider.js CHANGED Viewed

@@ -9,6 +9,6 @@ export class PreviousElementSelectExtensionProvider {
     }
     static style = css `
     rect.svg-previous-select { stroke: none; fill: #3899ec; pointer-events: auto; }
-    g.svg-previous-select { stroke: none; fill: white; }
+    g.svg-previous-select { fill: white; pointer-events: auto; }
   `;
 }

package/dist/elements/widgets/designerView/extensions/ResizeExtension.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import { IDesignItem } from '../../../item/IDesignItem.js';
 import { IDesignerCanvas } from '../IDesignerCanvas.js';
 import { AbstractExtension } from './AbstractExtension.js';
 import { IExtensionManager } from './IExtensionManger.js';
+export declare function normalizeToAbsolutePosition(element: HTMLElement, normalizeProperty: "left" | "top"): string;
 export declare class ResizeExtension extends AbstractExtension {
     private resizeAllSelected;
     private _initialSizes;

package/dist/elements/widgets/designerView/extensions/ResizeExtension.js CHANGED Viewed

@@ -1,8 +1,22 @@
 import { EventNames } from '../../../../enums/EventNames.js';
 import { getContentBoxContentOffsets } from '../../../helper/ElementHelper.js';
 import { roundValue } from '../../../helper/LayoutHelper.js';
-import { transformPointByInverseMatrix, getDesignerCanvasNormalizedTransformedCornerDOMPoints, normalizeToAbsolutePosition, getElementCombinedTransform } from "../../../helper/TransformHelper.js";
+import { transformPointByInverseMatrix, getDesignerCanvasNormalizedTransformedCornerDOMPoints, getElementCombinedTransform } from "../../../helper/TransformHelper.js";
 import { AbstractExtension } from './AbstractExtension.js';
+export function normalizeToAbsolutePosition(element, normalizeProperty) {
+    switch (normalizeProperty) {
+        case "left":
+            let left = getComputedStyle(element).left;
+            element.style.removeProperty('right');
+            element.style.left = left;
+            return left;
+        case "top":
+            let top = getComputedStyle(element).top;
+            element.style.removeProperty('bottom');
+            element.style.top = top;
+            return top;
+    }
+}
 //TODO: use PlacementService, size is not always width/height could also be margin etc...
 //      also when elment aligned to bottom, will it later also be?
 export class ResizeExtension extends AbstractExtension {

package/dist/elements/widgets/designerView/extensions/contextMenu/ChildrenContextMenu.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
+export declare class ChildrenContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+    private _select;
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/ChildrenContextMenu.js ADDED Viewed

@@ -0,0 +1,19 @@
+import { DesignItem } from '../../../../item/DesignItem.js';
+export class ChildrenContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return initiator == 'designer';
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        if (designItem) {
+            const lstItems = [...designItem.element.children];
+            if (lstItems.length > 0) {
+                return [{ title: 'children', children: [...lstItems.map(x => ({ title: 'select: ' + x.localName + (x.id ? ' (#' + x.id + ')' : ''), action: () => this._select(designerCanvas, x) }))] }];
+            }
+        }
+        return [];
+    }
+    _select(designerView, element) {
+        const item = DesignItem.GetOrCreateDesignItem(element, element, designerView.serviceContainer, designerView.instanceServiceContainer);
+        designerView.instanceServiceContainer.selectionService.setSelectedElements([item]);
+    }
+}

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

@@ -0,0 +1,9 @@
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
+export declare class ItemsBelowContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+    private _select;
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu copy.js ADDED Viewed

@@ -0,0 +1,17 @@
+import { DesignItem } from '../../../../item/DesignItem.js';
+export class ItemsBelowContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return initiator == 'designer';
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        const lstItems = designerCanvas.elementsFromPoint(event.x, event.y);
+        if (lstItems.length > 0) {
+            return [{ title: 'items below', children: [...lstItems.map(x => ({ title: 'select: ' + x.localName + (x.id ? ' (' + x.id + ')' : ''), action: () => this._select(designerCanvas, x) }))] }];
+        }
+        return [];
+    }
+    _select(designerView, element) {
+        const item = DesignItem.GetOrCreateDesignItem(element, element, designerView.serviceContainer, designerView.instanceServiceContainer);
+        designerView.instanceServiceContainer.selectionService.setSelectedElements([item]);
+    }
+}

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

@@ -6,7 +6,7 @@ export class ItemsBelowContextMenu {
     provideContextMenuItems(event, designerCanvas, designItem) {
         const lstItems = designerCanvas.elementsFromPoint(event.x, event.y);
         if (lstItems.length > 0) {
-            return [{ title: 'items below', children: [...lstItems.map(x => ({ title: 'select: ' + x.localName + (x.id ? ' (' + x.id + ')' : ''), action: () => this._select(designerCanvas, x) }))] }];
+            return [{ title: 'items below', children: [...lstItems.map(x => ({ title: 'select: ' + x.localName + (x.id ? ' (#' + x.id + ')' : ''), action: () => this._select(designerCanvas, x) }))] }];
         }
         return [];
     }

package/dist/index.d.ts CHANGED Viewed

@@ -275,6 +275,7 @@ export type { IContextMenuExtension, ContextmenuInitiator } from "./elements/wid
 export * from "./elements/widgets/designerView/extensions/contextMenu/ChildContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/ChildrenContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/PathContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/RectContextMenu.js";

package/dist/index.js CHANGED Viewed

@@ -214,6 +214,7 @@ export * from "./elements/widgets/designerView/extensions/EditText/EditTextExten
 export * from "./elements/widgets/designerView/extensions/contextMenu/ChildContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/ChildrenContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/PathContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/RectContextMenu.js";

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.162",
+  "version": "0.1.165",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",