@node-projects/web-component-designer 0.1.82 → 0.1.84

package/dist/elements/helper/CssUnitConverter.js

@@ -22,7 +22,7 @@ export function convertCssUnitToPixel(cssValue, target, percentTarget) {
         'vmax': value => value / 100 * (window.innerHeight > window.innerWidth ? window.innerHeight : window.innerWidth),
         'lh': value => value * parseFloat(getComputedStyle(target).lineHeight),
         'rlh': value => value * parseFloat(getComputedStyle(document.documentElement).lineHeight),
-        '%': value => value / 100 * (percentTarget == 'height' ? target.getBoundingClientRect().height : target.getBoundingClientRect().width),
+        '%': value => value / 100 * (percentTarget == 'height' ? getOriginalSizeBeforeTransformation(target).height : getOriginalSizeBeforeTransformation(target).width),
         /*TODO: container units
         //find parent with computed style where container-type is inline-size or size (regarding to query type)
         //use this size for calculation
@@ -82,7 +82,7 @@ export function convertCssUnit(cssValue, target, percentTarget, unit) {
         'vmax': value => value * 100 / (window.innerHeight > window.innerWidth ? window.innerHeight : window.innerWidth),
         'lh': value => value / parseFloat(getComputedStyle(target).lineHeight),
         'rlh': value => value / parseFloat(getComputedStyle(document.documentElement).lineHeight),
-        '%': value => value * 100 / (percentTarget == 'height' ? target.getBoundingClientRect().height : target.getBoundingClientRect().width),
+        '%': value => value * 100 / (percentTarget == 'height' ? getOriginalSizeBeforeTransformation(target).height : getOriginalSizeBeforeTransformation(target).width),
         // Times
         'ms': value => value,
         's': value => value / 1000,
@@ -99,3 +99,6 @@ export function convertCssUnit(cssValue, target, percentTarget, unit) {
     }
     return cssValue;
 }
+function getOriginalSizeBeforeTransformation(element) {
+    return { width: element.offsetWidth, height: element.offsetHeight };
+}

package/dist/elements/helper/ElementHelper.js

@@ -61,7 +61,11 @@ const windowOffsetsCacheKey = Symbol('windowOffsetsCacheKey');
 export function getElementsWindowOffsetWithoutSelfAndParentTransformations(element, zoom, cache = {}) {
     let offsetLeft = 0;
     let offsetTop = 0;
-    let ch = cache[windowOffsetsCacheKey] ??= new Map();
+    let ch;
+    if (cache)
+        ch = cache[windowOffsetsCacheKey] ??= new Map();
+    else
+        ch = new Map();
     let lst = [];
     while (element) {
         let cachedObj = ch.get(element);

package/dist/elements/helper/TransformHelper.js

@@ -113,24 +113,28 @@ export function getDesignerCanvasNormalizedTransformedOriginWithoutParentTransfo
     const designerCanvasNormalizedTransformedOrigin = new DOMPoint(transformOriginAbsolutRelatedToWindowWithoutAnyTransformation.x - designerCanvas.containerBoundingRect.x, transformOriginAbsolutRelatedToWindowWithoutAnyTransformation.y - designerCanvas.containerBoundingRect.y);
     return designerCanvasNormalizedTransformedOrigin;
 }
-const elemntMatrixCacheKey = Symbol('windowOffsetsCacheKey');
+//const elementMatrixCacheKey = Symbol('windowOffsetsCacheKey');
 export function getResultingTransformationBetweenElementAndAllAncestors(element, ancestor, excludeAncestor, cache = {}) {
-    let ch = cache[elemntMatrixCacheKey] ??= new Map();
+    /*let ch: Map<any, [DOMMatrix]>;
+    if (cache)
+      ch = cache[elementMatrixCacheKey] ??= new Map<any, [DOMMatrix]>();
+    else
+      ch = new Map<any, [DOMMatrix]>();*/
     let lst = [];
     let actualElement = element;
     let actualElementMatrix;
     let newElementMatrix;
     let originalElementAndAllParentsMultipliedMatrix;
     while (actualElement != ancestor && actualElement != null) {
-        let cachedObj = ch.get(actualElement);
+        /*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;
-        }
+          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);
@@ -145,7 +149,7 @@ export function getResultingTransformationBetweenElementAndAllAncestors(element,
             lst.forEach(x => x[0] = x[0].multiply(originalElementAndAllParentsMultipliedMatrix));
             const cacheEntry = [originalElementAndAllParentsMultipliedMatrix];
             lst.push(cacheEntry);
-            ch.set(actualElement, cacheEntry);
+            //ch.set(actualElement, cacheEntry);
         }
         actualElement = newElement;
     }

package/dist/elements/item/IBinding.d.ts

@@ -9,9 +9,15 @@ export interface IBinding {
     expression?: string;
     expressionTwoWay?: string;
     bindableObjectNames?: string[];
+    bindableObjects?: IBindableObject[];
     converters?: any;
     mode?: BindingMode;
     invert?: boolean;
     changedEvents?: string[];
     nullSafe?: boolean;
 }
+export interface IBindableObject {
+    name?: string;
+    alias?: string;
+    modificator?: string;
+}

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

@@ -97,8 +97,8 @@ export class DefaultPlacementService {
         }
         let filteredItems = filterChildPlaceItems(items);
         for (const designItem of filteredItems) {
-            const canvas = designItem.element.closest('#node-projects-designer-canvas-canvas');
-            let originalElementAndAllAncestorsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(designItem.element.parentElement, canvas, true);
+            const canvas = designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element;
+            let originalElementAndAllAncestorsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(designItem.parent.element, canvas, true);
             let transformMatrixParentTransformsCompensated = null;
             if (originalElementAndAllAncestorsMultipliedMatrix) {
                 transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0).matrixTransform(originalElementAndAllAncestorsMultipliedMatrix.inverse());

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

@@ -12,8 +12,13 @@ export class SnaplinesProviderService {
             const positionsMiddleH = [];
             const positionsV = [];
             const positionsMiddleV = [];
-            for (let n of containerItem.querySelectorAll('*')) {
-                if (!ignMap.has(n)) {
+            const tw = document.createTreeWalker(containerItem.isRootItem ? containerItem.element.shadowRoot : containerItem.element, NodeFilter.SHOW_ELEMENT);
+            let n = tw.nextNode();
+            while (n != null) {
+                if (ignMap.has(n)) {
+                    n = tw.nextSibling();
+                }
+                else {
                     const p = n.getBoundingClientRect();
                     const pLeft = (p.x - outerRect.x) / canvas.scaleFactor;
                     const pMidH = (p.x - outerRect.x + p.width / 2) / canvas.scaleFactor;
@@ -36,6 +41,7 @@ export class SnaplinesProviderService {
                     positionsV.push([pBottom, transformedP]);
                     if (provideWithDist)
                         positionsV.push([pBottom + provideWithDistDist, transformedP]);
+                    n = tw.nextNode();
                 }
             }
             positionsH.push([0, { x: 0, y: 0, width: 0, height: 0 }]);

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

@@ -23,6 +23,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     clickOverlay: HTMLDivElement;
     private _activeTool;
     private _gridSize;
+    private _moveGroup;
     get gridSize(): number;
     set gridSize(value: number);
     pasteOffset: number;
@@ -128,7 +129,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _pointerEventHandler;
     captureActiveTool(tool: ITool): void;
     releaseActiveTool(): void;
-    private _fillCalculationrects;
+    fillCalculationrects(): void;
     removeOverlay(element: SVGGraphicsElement): void;
     zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
     zoomPoint(canvasPoint: IPoint, newZoom: number): void;

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

@@ -29,6 +29,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _activeTool;
     // IPlacementView
     _gridSize = 10;
+    _moveGroup;
     get gridSize() {
         return this._gridSize;
     }
@@ -638,7 +639,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvasContainer.style.bottom = this._outercanvas2.offsetHeight >= this._canvasContainer.offsetHeight ? '0' : '';
         this._canvasContainer.style.right = this._outercanvas2.offsetWidth >= this._canvasContainer.offsetWidth ? '0' : '';
         this._updateTransform();
-        this._fillCalculationrects();
+        this.fillCalculationrects();
         this.onZoomFactorChanged.emit(this._zoomFactor);
         if (refreshExtensions) {
             this.extensionManager.refreshAllAppliedExtentions();
@@ -668,7 +669,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.instanceServiceContainer.undoService.execute(setItemsAction);
     }
     _internalSetDesignItems(designItems) {
-        this._fillCalculationrects();
+        this.fillCalculationrects();
         this.overlayLayer.removeAllOverlays();
         DomHelper.removeAllChildnodes(this.overlayLayer);
         for (let i of [...this.rootDesignItem.children()])
@@ -711,7 +712,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.snapLines.clearSnaplines();
     }
     _onDragEnter(event) {
-        this._fillCalculationrects();
+        this.fillCalculationrects();
         event.preventDefault();
         const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
         if (hasTransferDataBindingObject) {
@@ -737,7 +738,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     _onDragLeave(event) {
-        this._fillCalculationrects();
+        this.fillCalculationrects();
         event.preventDefault();
         this._canvas.classList.remove('dragFileActive');
         const dragDropService = this.serviceContainer.dragDropService;
@@ -748,14 +749,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _lastDdElement = null;
     _onDragOver(event) {
         event.preventDefault();
-        /*if (this.alignOnSnap) {
-          this.snapLines.calculateSnaplines(this.instanceServiceContainer.selectionService.selectedElements);
-          //TODO: fix this following code...
-          const currentPoint = this.getDesignerMousepoint(event);
-          let containerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.rootDesignItem))
-          containerService.finishPlace(this, this.rootDesignItem, this._initialPoint, currentPoint, this.instanceServiceContainer.selectionService.selectedElements);
-        }*/
-        this._fillCalculationrects();
+        this.fillCalculationrects();
         if (event.dataTransfer.types.length > 0 && event.dataTransfer.types[0] == 'Files') {
             const ddService = this.serviceContainer.externalDragDropService;
             if (ddService) {
@@ -793,7 +787,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._lastDdElement = null;
         event.preventDefault();
         this._canvas.classList.remove('dragFileActive');
-        this._fillCalculationrects();
+        this.fillCalculationrects();
         if (event.dataTransfer.files?.length > 0) {
             const ddService = this.serviceContainer.externalDragDropService;
             if (ddService) {
@@ -813,7 +807,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             else {
                 const dragDropService = this.serviceContainer.dragDropService;
                 if (dragDropService) {
-                    this._fillCalculationrects();
+                    this.fillCalculationrects();
                     dragDropService.drop(this, event);
                 }
             }
@@ -863,6 +857,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     onKeyUp(event) {
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
             return;
+        if (this._moveGroup) {
+            this._moveGroup.commit();
+            this._moveGroup = null;
+        }
         event.preventDefault();
     }
     onKeyDown(event) {
@@ -902,6 +900,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 case 'ArrowLeft':
                 case 'ArrowRight':
                     {
+                        if (!this._moveGroup)
+                            this._moveGroup = this.rootDesignItem.openGroup("move items");
                         let offset = { x: 0, y: 0 };
                         if (event.key == 'ArrowDown')
                             offset.y = -moveOffset;
@@ -1018,7 +1018,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _pointerEventHandler(event, forceElement = null) {
         if (!this.serviceContainer)
             return;
-        this._fillCalculationrects();
+        this.fillCalculationrects();
         if (this._pointerextensions) {
             for (let pe of this._pointerextensions)
                 pe.refresh(event);
@@ -1069,7 +1069,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     releaseActiveTool() {
         this._activeTool = null;
     }
-    _fillCalculationrects() {
+    fillCalculationrects() {
         this.containerBoundingRect = this._canvasContainer.getBoundingClientRect();
         this.outerRect = this._outercanvas2.getBoundingClientRect();
     }

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

@@ -358,6 +358,7 @@ export class ExtensionManager {
         this.designerCanvas.overlayLayer.endBatch();
     }
     refreshAllAppliedExtentions() {
+        this.designerCanvas.fillCalculationrects();
         this.refreshAllExtensions([...this.designItemsWithExtentions]);
     }
     //TODO: does not work with permanant, when not applied... maybe we need to do in another way

package/dist/elements/widgets/designerView/tools/DrawElementTool.js

@@ -31,33 +31,34 @@ export class DrawElementTool {
     }
     keyboardEventHandler(designerCanvas, event, currentElement) { }
     sizeOverlapThreshold = false;
-    async _onPointerDown(designerView, event) {
+    async _onPointerDown(designerCanvas, event) {
+        const evPos = designerCanvas.getNormalizedEventCoordinates(event);
         event.preventDefault();
-        this._startPosition = { x: event.x, y: event.y };
-        this._changeGroup = designerView.rootDesignItem.openGroup("Insert Item");
-        this._createdItem = await designerView.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(this._elementDefinition, designerView.serviceContainer, designerView.instanceServiceContainer));
-        const targetRect = event.target.getBoundingClientRect();
+        this._startPosition = { x: evPos.x, y: evPos.y };
+        this._changeGroup = designerCanvas.rootDesignItem.openGroup("Insert Item");
+        this._createdItem = await designerCanvas.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(this._elementDefinition, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer));
         this._createdItem.setStyle('position', 'absolute');
-        this._createdItem.setStyle('left', event.offsetX + targetRect.left - designerView.containerBoundingRect.x + 'px');
-        this._createdItem.setStyle('top', event.offsetY + targetRect.top - designerView.containerBoundingRect.y + 'px');
+        this._createdItem.setStyle('left', evPos.x + 'px');
+        this._createdItem.setStyle('top', evPos.y + 'px');
         this._createdItem.setStyle('width', '0');
         this._createdItem.setStyle('height', '0');
         this._createdItem.element.style.overflow = 'hidden';
-        designerView.rootDesignItem.insertChild(this._createdItem);
+        designerCanvas.rootDesignItem.insertChild(this._createdItem);
         //draw via containerService??? how to draw into a grid, a stackpanel???
-        designerView.instanceServiceContainer.selectionService.clearSelectedElements();
+        designerCanvas.instanceServiceContainer.selectionService.clearSelectedElements();
     }
     async _onPointerMove(designerCanvas, event) {
+        const evPos = designerCanvas.getNormalizedEventCoordinates(event);
         if (this._createdItem) {
             if (!this._rect) {
                 this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
                 designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foreground);
                 this._rect.setAttribute('class', 'svg-draw-new-element');
-                this._rect.setAttribute('x', (this._startPosition.x - designerCanvas.containerBoundingRect.x));
-                this._rect.setAttribute('y', (this._startPosition.y - designerCanvas.containerBoundingRect.y));
+                this._rect.setAttribute('x', (this._startPosition.x));
+                this._rect.setAttribute('y', (this._startPosition.y));
             }
-            const w = event.x - this._startPosition.x;
-            const h = event.y - this._startPosition.y;
+            const w = evPos.x - this._startPosition.x;
+            const h = evPos.y - this._startPosition.y;
             if (w >= 0) {
                 this._rect.setAttribute('width', w);
                 this._createdItem.setStyle('width', w + 'px');

package/package.json

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