@node-projects/web-component-designer 0.1.85 → 0.1.87

package/dist/elements/helper/ElementHelper.js

@@ -75,6 +75,21 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
             lst.forEach(x => { x.offsetLeft += cachedObj.offsetLeft; x.offsetTop += cachedObj.offsetTop; });
             break;
         }
+        let nextParent = element.offsetParent ? element.offsetParent : element.getRootNode().host;
+        if (element instanceof SVGGraphicsElement) {
+            nextParent = element.ownerSVGElement;
+        }
+        else if (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
+            nextParent = element.parentElement ? element.parentElement : element.getRootNode().host;
+        }
+        let scrollLeft = 0;
+        let scrollTop = 0;
+        if (nextParent) {
+            scrollLeft = nextParent.scrollLeft ?? 0;
+            scrollTop = nextParent.scrollTop ?? 0;
+        }
+        let currLeft = 0;
+        let currTop = 0;
         if (element instanceof SVGSVGElement) {
             //TODO: !huge Perf impact! - fix without transformation
             let t = element.style.transform;
@@ -82,43 +97,25 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
             const bcEl = element.getBoundingClientRect();
             const bcPar = element.parentElement ? element.parentElement.getBoundingClientRect() : element.getRootNode().host.getBoundingClientRect();
             element.style.transform = t;
-            const currLeft = (bcEl.left - bcPar.left) / zoom;
-            const currTop = (bcEl.top - bcPar.top) / zoom;
-            offsetLeft += currLeft;
-            offsetTop += currTop;
-            lst.forEach(x => { x.offsetLeft += currLeft; x.offsetTop += currTop; });
-            const cacheEntry = { offsetLeft: currLeft, offsetTop: currTop };
-            lst.push(cacheEntry);
-            ch.set(element, cacheEntry);
-            element = element.parentElement ? element.parentElement : element.getRootNode().host;
+            currLeft = (bcEl.left - bcPar.left) / zoom;
+            currTop = (bcEl.top - bcPar.top) / zoom;
         }
         else if (element instanceof SVGGraphicsElement) {
             let bbox = element.getBBox();
-            offsetLeft += bbox.x;
-            offsetTop += bbox.y;
-            lst.forEach(x => { x.offsetLeft += bbox.x; x.offsetTop += bbox.y; });
-            const cacheEntry = { offsetLeft: bbox.x, offsetTop: bbox.y };
-            lst.push(cacheEntry);
-            ch.set(element, cacheEntry);
-            element = element.ownerSVGElement;
-        }
-        else if (element instanceof HTMLBodyElement) {
-            element = element.parentElement ? element.parentElement : element.getRootNode().host;
-        }
-        else if (element instanceof HTMLHtmlElement) {
-            element = element.parentElement ? element.parentElement : element.getRootNode().host;
+            currLeft = bbox.x;
+            currTop = bbox.y;
         }
         else {
-            const currLeft = element.offsetLeft;
-            const currTop = element.offsetTop;
-            lst.forEach(x => { x.offsetLeft += currLeft; x.offsetTop += currTop; });
-            const cacheEntry = { offsetLeft: currLeft, offsetTop: currTop };
-            lst.push(cacheEntry);
-            ch.set(element, cacheEntry);
-            offsetLeft += element.offsetLeft;
-            offsetTop += element.offsetTop;
-            element = element.offsetParent ? element.offsetParent : element.getRootNode().host;
+            currLeft = element.offsetLeft - scrollLeft;
+            currTop = element.offsetTop - scrollTop;
         }
+        lst.forEach(x => { x.offsetLeft += currLeft; x.offsetTop += currTop; });
+        const cacheEntry = { offsetLeft: currLeft, offsetTop: currTop };
+        lst.push(cacheEntry);
+        ch.set(element, cacheEntry);
+        offsetLeft += currLeft;
+        offsetTop += currTop;
+        element = nextParent;
     }
     return { offsetLeft: offsetLeft, offsetTop: offsetTop };
 }

package/dist/elements/widgets/demoView/demoView.js

@@ -47,6 +47,7 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
         super();
         this._placeholder = document.createElement('div');
         this._placeholder.id = 'placeholder';
+        this._placeholder.style.transform = 'scale(1)'; //to fix position: static alignment
         this.shadowRoot.appendChild(this._placeholder);
         this._loading = document.createElement('div');
         this._loading.id = 'loading';

package/dist/elements/widgets/designerView/extensions/svg/EllipsisExtension.d.ts

@@ -26,8 +26,9 @@ export declare class EllipsisExtension extends AbstractExtension {
     private _offsetSvg;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
+    refresh(): void;
     pointerEvent(event: PointerEvent, circle: SVGCircleElement, e: SVGEllipseElement, index: number): void;
-    _drawPathCircle(x: number, y: number, e: SVGEllipseElement, index: number): SVGCircleElement;
+    _drawPathCircle(x: number, y: number, e: SVGEllipseElement, index: number, circle: SVGCircleElement): SVGCircleElement;
     _redrawPathCircle(x: number, y: number, oldCircle: SVGCircleElement): SVGCircleElement;
     _getPointsFromEllipse(elementCoords: IRect): number[];
     _getMinMaxValues(coords: any): {
@@ -38,6 +39,5 @@ export declare class EllipsisExtension extends AbstractExtension {
     };
     _rearrangeSvgParent(newEllipseExtrema: any): void;
     _rearrangePointsFromElement(oldParentCoords: IRect): void;
-    refresh(): void;
     dispose(): void;
 }

package/dist/elements/widgets/designerView/extensions/svg/EllipsisExtension.js

@@ -25,6 +25,9 @@ export class EllipsisExtension extends AbstractExtension {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
+        this.refresh();
+    }
+    refresh() {
         this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
         this._ellipseElement = this.extendedItem.node;
         this._startScrollOffset = this.designerCanvas.canvasOffset;
@@ -32,10 +35,12 @@ export class EllipsisExtension extends AbstractExtension {
         this._cy = this._ellipseElement.cy.baseVal.value;
         this._rx = this._ellipseElement.rx.baseVal.value;
         this._ry = this._ellipseElement.ry.baseVal.value;
-        this._circle1 = this._drawPathCircle(this._cx, this._cy - this._ry, this._ellipseElement, 0);
-        this._circle2 = this._drawPathCircle(this._cx + this._rx, this._cy, this._ellipseElement, 1);
-        this._circle3 = this._drawPathCircle(this._cx, this._cy + this._ry, this._ellipseElement, 2);
-        this._circle4 = this._drawPathCircle(this._cx - this._rx, this._cy, this._ellipseElement, 3);
+        if (this._valuesHaveChanges(this.designerCanvas.zoomFactor, this._cx, this._cy, this._rx, this._ry)) {
+            this._circle1 = this._drawPathCircle(this._cx, this._cy - this._ry, this._ellipseElement, 0, this._circle1);
+            this._circle2 = this._drawPathCircle(this._cx + this._rx, this._cy, this._ellipseElement, 1, this._circle2);
+            this._circle3 = this._drawPathCircle(this._cx, this._cy + this._ry, this._ellipseElement, 2, this._circle3);
+            this._circle4 = this._drawPathCircle(this._cx - this._rx, this._cy, this._ellipseElement, 3, this._circle4);
+        }
     }
     pointerEvent(event, circle, e, index) {
         event.stopPropagation();
@@ -111,8 +116,8 @@ export class EllipsisExtension extends AbstractExtension {
                 break;
         }
     }
-    _drawPathCircle(x, y, e, index) {
-        let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5 / this.designerCanvas.scaleFactor, 'svg-path');
+    _drawPathCircle(x, y, e, index, circle) {
+        circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5 / this.designerCanvas.scaleFactor, 'svg-path', circle);
         circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
         circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event, circle, e, index));
         circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, circle, e, index));
@@ -173,10 +178,6 @@ export class EllipsisExtension extends AbstractExtension {
         this.extendedItem.setAttribute('cx', (this._ellipseElement.cx.baseVal.value + diffX).toString());
         this.extendedItem.setAttribute('cy', (this._ellipseElement.cy.baseVal.value + diffY).toString());
     }
-    refresh() {
-        this._removeAllOverlays();
-        this.extend();
-    }
     dispose() {
         this._removeAllOverlays();
     }

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.d.ts

@@ -11,6 +11,7 @@ export declare class DesignerToolbarButton extends BaseCustomWebComponentConstru
     currentToolOnButton: string;
     private _img;
     private _div;
+    private _longPress;
     constructor(designerCanvas: IDesignerCanvas, tools: Record<string | NamedTools, {
         icon: string;
     }>);

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.js

@@ -17,6 +17,7 @@ export class DesignerToolbarButton extends BaseCustomWebComponentConstructorAppe
     img {
       width: calc(100% - 4px);
       height: calc(100% - 4px);
+      -webkit-user-drag: none;
     }    
     `;
     static template = html `<div id="div"><img id="img"></div>`;
@@ -25,17 +26,29 @@ export class DesignerToolbarButton extends BaseCustomWebComponentConstructorAppe
     currentToolOnButton;
     _img;
     _div;
+    _longPress;
     constructor(designerCanvas, tools) {
         super();
         this.tools = tools;
         this._img = this._getDomElement('img');
         this._div = this._getDomElement('div');
-        this._div.onclick = () => {
-            if (this.popup) {
-                this.getRootNode().host.showPopup(this);
-            }
-            else {
+        this._div.onpointerdown = () => {
+            if (this.currentToolOnButton) {
                 this.getRootNode().host.setTool(this.currentToolOnButton);
+                if (this.popup) {
+                    this._longPress = setTimeout(() => {
+                        this._longPress = null;
+                        this.getRootNode().host.showPopup(this);
+                    }, 200);
+                }
+            }
+            else if (this.popup)
+                this.getRootNode().host.showPopup(this);
+        };
+        this._div.onpointerup = () => {
+            if (this._longPress) {
+                clearTimeout(this._longPress);
+                this._longPress = null;
             }
         };
         this.showTool(Object.getOwnPropertyNames(tools)[0]);

package/dist/elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.js

@@ -3,7 +3,7 @@ import { assetsPath } from "../../../../../../Constants.js";
 import { TransformToolPopup } from "../popups/TransformToolPopup.js";
 export class TransformToolButtonProvider {
     provideButton(designerCanvas) {
-        const button = new DesignerToolbarButton(designerCanvas, { 'TransformTool': { icon: assetsPath + 'images/layout/TransformTool.svg' } });
+        const button = new DesignerToolbarButton(designerCanvas, { '': { icon: assetsPath + 'images/layout/TransformTool.svg' } });
         button.popup = TransformToolPopup;
         return button;
     }

package/package.json

@@ -1,24 +1,24 @@
-{
-  "description": "A UI designer for Polymer apps",
-  "name": "@node-projects/web-component-designer",
-  "version": "0.1.85",
-  "type": "module",
-  "main": "./dist/index.js",
-  "author": "jochen.kuehner@gmx.de",
-  "license": "MIT",
-  "scripts": {
-    "tsc": "tsc",
-    "build": "tsc",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "@node-projects/base-custom-webcomponent": ">=0.21.2"
-  },
-  "devDependencies": {
-    "mdn-data": "^2.3.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/node-projects/web-component-designer.git"
-  }
-}
+{
+  "description": "A UI designer for Polymer apps",
+  "name": "@node-projects/web-component-designer",
+  "version": "0.1.87",
+  "type": "module",
+  "main": "./dist/index.js",
+  "author": "jochen.kuehner@gmx.de",
+  "license": "MIT",
+  "scripts": {
+    "tsc": "tsc",
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@node-projects/base-custom-webcomponent": ">=0.21.2"
+  },
+  "devDependencies": {
+    "mdn-data": "^2.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-projects/web-component-designer.git"
+  }
+}