@node-projects/web-component-designer 0.0.83 → 0.0.84

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -9,7 +9,7 @@ import { DefaultPlacementService } from './placementService/DefaultPlacementServ
 import { DefaultHtmlParserService } from './htmlParserService/DefaultHtmlParserService.js';
 import { Lit2PropertiesService } from './propertiesService/services/Lit2PropertiesService.js';
 import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
-import { PrimarySelectionDefaultExtensionProvider } from '../widgets/designerView/extensions/PrimarySelectionDefaultExtensionProvider.js';
+import { ElementDragTitleExtensionProvider } from '../widgets/designerView/extensions/ElementDragTitleExtensionProvider.js';
 import { GridExtensionProvider } from '../widgets/designerView/extensions/GridExtensionProvider.js';
 import { TransformOriginExtensionProvider } from '../widgets/designerView/extensions/TransformOriginExtensionProvider.js';
 import { CanvasExtensionProvider } from '../widgets/designerView/extensions/CanvasExtensionProvider.js';
@@ -79,10 +79,11 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
         // new ResizeExtensionProvider(false),
         new InvisibleDivExtensionProvider(),
-        new IframeExtensionProvider()
+        new IframeExtensionProvider(),
+        // new ElementDragTitleExtensionProvider(),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
-        new PrimarySelectionDefaultExtensionProvider(),
+        new ElementDragTitleExtensionProvider(),
         new GridExtensionProvider(),
         new TransformOriginExtensionProvider(),
         new CanvasExtensionProvider(),

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

@@ -632,7 +632,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         return currentElement;
     }
     _rect;
-    _pointerEventHandler(event) {
+    _pointerEventHandler(event, forceElement = null) {
         this._fillCalculationrects();
         if (this._pointerextensions) {
             for (let pe of this._pointerextensions)
@@ -642,9 +642,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             return;
         if (event.buttons == 2)
             return;
-        let currentElement = this.serviceContainer.elementAtPointService.getElementAtPoint(this, { x: event.x, y: event.y });
-        if (currentElement === this._outercanvas2 || currentElement === this.overlayLayer || !currentElement) {
-            currentElement = this._canvas;
+        let currentElement;
+        if (forceElement)
+            currentElement = forceElement;
+        else {
+            currentElement = this.serviceContainer.elementAtPointService.getElementAtPoint(this, { x: event.x, y: event.y });
+            if (currentElement === this._outercanvas2 || currentElement === this.overlayLayer || !currentElement) {
+                currentElement = this._canvas;
+            }
         } /* else {
           if (!DesignerCanvas.hasOrIsParent(currentElement, this._canvas))
             return;

package/dist/elements/widgets/designerView/extensions/ElementDragTitleExtension.d.ts

@@ -0,0 +1,14 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from './AbstractExtension';
+import { IExtensionManager } from "./IExtensionManger";
+export declare class ElementDragTitleExtension extends AbstractExtension {
+    private _rect;
+    private _text;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    _drawMoveOverlay(itemRect: DOMRect): void;
+    refresh(): void;
+    _pointerEvent(event: PointerEvent): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,38 @@
+import { AbstractExtension } from './AbstractExtension';
+export class ElementDragTitleExtension extends AbstractExtension {
+    _rect;
+    _text;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        const boundRect = this.extendedItem.element.getBoundingClientRect();
+        this._rect = this._drawRect((boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16, 60, 15, 'svg-primary-selection-move', this._rect);
+        this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
+        this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
+        this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
+        this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));
+    }
+    _drawMoveOverlay(itemRect) {
+    }
+    refresh() {
+        const boundRect = this.extendedItem.element.getBoundingClientRect();
+        const xr = (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor;
+        const yr = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16;
+        this._rect.setAttribute('x', xr);
+        this._rect.setAttribute('y', yr);
+        const x = (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor;
+        const y = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5;
+        this._text.setAttribute('x', x);
+        this._text.setAttribute('y', y);
+    }
+    _pointerEvent(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        //@ts-ignore
+        this.designerCanvas._pointerEventHandlerBound(event, this.extendedItem.element);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/ElementDragTitleExtensionProvider.d.ts

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class ElementDragTitleExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

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

@@ -0,0 +1,13 @@
+import { ElementDragTitleExtension } from "./ElementDragTitleExtension";
+import { css } from "@node-projects/base-custom-webcomponent";
+export class ElementDragTitleExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new ElementDragTitleExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-text-primary { stroke: none; fill: white; stroke-width: 1; font-size: 10px; font-family: monospace; }
+  `;
+}

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

@@ -6,9 +6,9 @@ export class IframeExtension extends AbstractExtension {
     extend() {
         // forward events to designer, so iframe is selectable via click
         let iframe = this.extendedItem.element;
-        iframe.contentWindow.onpointerdown = (e) => this._pointerEvent(e);
-        iframe.contentWindow.onpointermove = (e) => this._pointerEvent(e);
-        iframe.contentWindow.onpointerup = (e) => this._pointerEvent(e);
+        iframe.contentWindow.addEventListener('pointerdown', (e) => this._pointerEvent(e), { capture: true });
+        iframe.contentWindow.addEventListener('pointermove', (e) => this._pointerEvent(e), { capture: true });
+        iframe.contentWindow.addEventListener('pointerup', (e) => this._pointerEvent(e), { capture: true });
     }
     _pointerEvent(event) {
         const rect = this.extendedItem.element.getBoundingClientRect();

package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtension copy.d.ts

@@ -0,0 +1,13 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from './AbstractExtension';
+import { IExtensionManager } from "./IExtensionManger";
+export declare class PrimarySelectionDefaultExtension extends AbstractExtension {
+    private _rect;
+    private _text;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    _drawMoveOverlay(itemRect: DOMRect): void;
+    refresh(): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtension copy.js

@@ -0,0 +1,21 @@
+import { AbstractExtension } from './AbstractExtension';
+export class PrimarySelectionDefaultExtension extends AbstractExtension {
+    _rect;
+    _text;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    _drawMoveOverlay(itemRect) {
+    }
+    refresh() {
+        const boundRect = this.extendedItem.element.getBoundingClientRect();
+        this._rect = this._drawRect((boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16, 60, 15, 'svg-primary-selection-move', this._rect);
+        this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtensionProvider copy.d.ts

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class PrimarySelectionDefaultExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtensionProvider copy.js

@@ -0,0 +1,13 @@
+import { PrimarySelectionDefaultExtension } from "./PrimarySelectionDefaultExtension";
+import { css } from "@node-projects/base-custom-webcomponent";
+export class PrimarySelectionDefaultExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new PrimarySelectionDefaultExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-text-primary { stroke: none; fill: white; stroke-width: 1; font-size: 10px; font-family: monospace; }
+  `;
+}

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

@@ -22,35 +22,36 @@ export class TransformOriginExtension extends AbstractExtension {
     pointerEvent(event) {
         event.stopPropagation();
         const rect = this.extendedItem.element.getBoundingClientRect();
+        const rectNr = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element); //.getBoundingClientRect();
         const computed = getComputedStyle(this.extendedItem.element);
         const to = computed.transformOrigin.split(' ');
+        const normalized = this.designerCanvas.getNormalizedEventCoordinates(event);
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
-                this._startPos = { x: event.x, y: event.y };
+                this._startPos = { x: normalized.x, y: normalized.y };
                 break;
             case EventNames.PointerMove:
                 if (this._startPos && event.buttons > 0) {
-                    const dx = event.x - this._startPos.x;
-                    const dy = event.y - this._startPos.y;
-                    this._circle.setAttribute('cx', (rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')) + dx));
-                    this._circle.setAttribute('cy', (rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')) + dy));
-                    this._circle2.setAttribute('cx', (rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')) + dx));
-                    this._circle2.setAttribute('cy', (rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')) + dy));
+                    const dx = normalized.x - this._startPos.x;
+                    const dy = normalized.y - this._startPos.y;
+                    this._circle.setAttribute('cx', ((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')) + dx));
+                    this._circle.setAttribute('cy', ((rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')) + dy));
+                    this._circle2.setAttribute('cx', ((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')) + dx));
+                    this._circle2.setAttribute('cy', ((rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')) + dy));
                 }
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
                 if (this._startPos) {
-                    const dx = event.x - this._startPos.x;
-                    const dy = event.y - this._startPos.y;
+                    const dx = normalized.x - this._startPos.x;
+                    const dy = normalized.y - this._startPos.y;
                     const x = Number.parseFloat(to[0].replace('px', ''));
                     const y = Number.parseFloat(to[1].replace('px', ''));
                     const newX = (dx + x);
                     const newY = (dy + y);
-                    const przX = Math.round(newX / rect.width * 10000) / 100; //round to 2 decimal places
-                    const przY = Math.round(newY / rect.height * 10000) / 100;
-                    //this.extendedItem.setStyle('transform-origin',newX + 'px ' + newY + 'px');
+                    const przX = Math.round(newX / rectNr.width * 10000) / 100;
+                    const przY = Math.round(newY / rectNr.height * 10000) / 100;
                     this.extendedItem.setStyle('transform-origin', przX + '% ' + przY + '%');
                     this.refresh();
                     this._startPos = null;

package/dist/index.d.ts

@@ -132,6 +132,8 @@ export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GridExtension.js";
 export * from "./elements/widgets/designerView/extensions/GridExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/IframeExtension.js";
+export * from "./elements/widgets/designerView/extensions/IframeExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtension.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/MouseOverExtension.js";
@@ -140,8 +142,8 @@ export * from "./elements/widgets/designerView/extensions/PathExtension.js";
 export * from "./elements/widgets/designerView/extensions/PathExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/PositionExtension.js";
 export * from "./elements/widgets/designerView/extensions/PositionExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/PrimarySelectionDefaultExtension.js";
-export * from "./elements/widgets/designerView/extensions/PrimarySelectionDefaultExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/ElementDragTitleExtension.js";
+export * from "./elements/widgets/designerView/extensions/ElementDragTitleExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/ResizeExtension.js";
 export * from "./elements/widgets/designerView/extensions/ResizeExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/RotateExtension.js";

package/dist/index.js

@@ -92,6 +92,8 @@ export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GridExtension.js";
 export * from "./elements/widgets/designerView/extensions/GridExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/IframeExtension.js";
+export * from "./elements/widgets/designerView/extensions/IframeExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtension.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/MouseOverExtension.js";
@@ -100,8 +102,8 @@ export * from "./elements/widgets/designerView/extensions/PathExtension.js";
 export * from "./elements/widgets/designerView/extensions/PathExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/PositionExtension.js";
 export * from "./elements/widgets/designerView/extensions/PositionExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/PrimarySelectionDefaultExtension.js";
-export * from "./elements/widgets/designerView/extensions/PrimarySelectionDefaultExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/ElementDragTitleExtension.js";
+export * from "./elements/widgets/designerView/extensions/ElementDragTitleExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/ResizeExtension.js";
 export * from "./elements/widgets/designerView/extensions/ResizeExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/RotateExtension.js";

package/package.json

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