@node-projects/web-component-designer 0.0.36 → 0.0.40

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.d.ts

@@ -0,0 +1,13 @@
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export declare class CursorLinePointerExtension extends AbstractDesignerPointerExtension {
+    private _lineOffset;
+    private _lineLength;
+    private _circle;
+    private _line1;
+    private _line2;
+    private _line3;
+    private _line4;
+    refresh(event: PointerEvent): void;
+    dispose(): void;
+    style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js

@@ -0,0 +1,26 @@
+import { css } from '@node-projects/base-custom-webcomponent';
+import { OverlayLayer } from '../OverlayLayer.js';
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export class CursorLinePointerExtension extends AbstractDesignerPointerExtension {
+    _lineOffset = 5;
+    _lineLength = 10;
+    _circle;
+    _line1;
+    _line2;
+    _line3;
+    _line4;
+    refresh(event) {
+        let mp = this.designerCanvas.getNormalizedEventCoordinates(event);
+        this._circle = this._drawCircle(mp.x, mp.y, 1, 'svg-cursor-line', this._circle, OverlayLayer.Foregorund);
+        this._line1 = this._drawLine(mp.x, mp.y - this._lineOffset, mp.x, mp.y - this._lineOffset - this._lineLength, 'svg-cursor-line', this._line1, OverlayLayer.Foregorund);
+        this._line2 = this._drawLine(mp.x, mp.y + this._lineOffset, mp.x, mp.y + this._lineOffset + this._lineLength, 'svg-cursor-line', this._line2, OverlayLayer.Foregorund);
+        this._line3 = this._drawLine(mp.x - this._lineOffset, mp.y, mp.x - this._lineOffset - this._lineLength, mp.y, 'svg-cursor-line', this._line3, OverlayLayer.Foregorund);
+        this._line4 = this._drawLine(mp.x + this._lineOffset, mp.y, mp.x + this._lineOffset + this._lineLength, mp.y, 'svg-cursor-line', this._line4, OverlayLayer.Foregorund);
+    }
+    dispose() {
+        super._removeAllOverlays();
+    }
+    style = css `
+    .svg-cursor-line { stroke: black; pointer-events: none }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.d.ts

@@ -0,0 +1,7 @@
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignerPointerExtension } from './IDesignerPointerExtension.js';
+import { IDesignerPointerExtensionProvider } from './IDesignerPointerExtensionProvider.js';
+export declare class CursorLinePointerExtensionProvider implements IDesignerPointerExtensionProvider {
+    getExtension(designerCanvas: IDesignerCanvas): IDesignerPointerExtension;
+    style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js

@@ -0,0 +1,10 @@
+import { css } from '@node-projects/base-custom-webcomponent';
+import { CursorLinePointerExtension } from './CursorLinePointerExtension.js';
+export class CursorLinePointerExtensionProvider {
+    getExtension(designerCanvas) {
+        return new CursorLinePointerExtension(designerCanvas.extensionManager, designerCanvas);
+    }
+    style = css `
+    .svg-cursor-line { stroke: black; pointer-events: none }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorRectanglePointerExtension copy.d.ts

@@ -1,7 +1,13 @@
 import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
 export declare class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
-    private _rect;
+    private _lineOffset;
+    private _lineLength;
+    private _line1;
+    private _line2;
+    private _line3;
+    private _line4;
     extend(event: PointerEvent): void;
     refresh(event: PointerEvent): void;
     dispose(): void;
+    style: CSSStyleSheet;
 }

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorRectanglePointerExtension copy.js

@@ -1,20 +1,27 @@
+import { css } from '@node-projects/base-custom-webcomponent';
 import { OverlayLayer } from '../OverlayLayer.js';
 import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
 export class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
-    _rect;
+    _lineOffset = 5;
+    _lineLength = 10;
+    _line1;
+    _line2;
+    _line3;
+    _line4;
     extend(event) {
-        this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-        this.overlayLayerView.addOverlay(this._rect, OverlayLayer.Foregorund);
+        this.refresh(event);
     }
     refresh(event) {
         let mp = this.designerView.getNormalizedEventCoordinates(event);
-        this._rect.setAttribute('class', 'svg-selector');
-        this._rect.setAttribute('x', (mp.x - 5));
-        this._rect.setAttribute('y', (mp.y - 5));
-        this._rect.setAttribute('width', (10));
-        this._rect.setAttribute('height', (10));
+        this._line1 = this._drawLine(mp.x, mp.y - this._lineOffset, mp.x, mp.y - this._lineOffset - this._lineLength, 'svg-cursor-line', this._line1, OverlayLayer.Foregorund);
+        this._line2 = this._drawLine(mp.x, mp.y + this._lineOffset, mp.x, mp.y + this._lineOffset + this._lineLength, 'svg-cursor-line', this._line2, OverlayLayer.Foregorund);
+        this._line3 = this._drawLine(mp.x - this._lineOffset, mp.y, mp.x - this._lineOffset - this._lineLength, mp.y, 'svg-cursor-line', this._line3, OverlayLayer.Foregorund);
+        this._line4 = this._drawLine(mp.x + this._lineOffset, mp.y, mp.x + this._lineOffset + this._lineLength, mp.y, 'svg-cursor-line', this._line4, OverlayLayer.Foregorund);
     }
     dispose() {
         super._removeAllOverlays();
     }
+    style = css `
+    .svg-cursor-line { stroke: black; pointer-events: none }
+  `;
 }

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.d.ts

@@ -1,5 +1,5 @@
 import { IDisposable } from "../../../../../interfaces/IDisposable.js";
 export interface IDesignerPointerExtension extends IDisposable {
-    extend(event: PointerEvent): any;
     refresh(event: PointerEvent): any;
+    style?: CSSStyleSheet;
 }

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.d.ts

@@ -1,9 +1,6 @@
-import { IDesignItem } from "../../../../item/IDesignItem.js";
 import { IDesignerCanvas } from "../../IDesignerCanvas.js";
-import { IExtensionManager } from "../IExtensionManger.js";
 import { IDesignerPointerExtension } from "./IDesignerPointerExtension.js";
 export interface IDesignerPointerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerPointerExtension;
+    getExtension(designerView: IDesignerCanvas): IDesignerPointerExtension;
     style?: CSSStyleSheet;
 }

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

@@ -17,4 +17,8 @@ export declare class OverlayLayerView extends BaseCustomWebComponentConstructorA
     removeAllNodesWithClass(className: string): void;
     createPoint(): DOMPointInit;
     elementFromPoint(x: number, y: number): Element;
+    drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
+    drawCircle(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
+    drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
+    drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
 }

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

@@ -47,6 +47,11 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
                 }
             }
         }
+        for (const ext of this._serviceContainer.designerPointerExtensions) {
+            if (ext.style) {
+                styles.push(ext.style);
+            }
+        }
         this.shadowRoot.adoptedStyleSheets = styles;
     }
     addOverlay(element, overlayLayer = OverlayLayer.Normal) {
@@ -63,7 +68,13 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         }
     }
     removeOverlay(element) {
-        element.parentElement.removeChild(element);
+        try {
+            if (element)
+                element.parentElement.removeChild(element);
+        }
+        catch (err) {
+            console.error(err);
+        }
     }
     removeAllNodesWithClass(className) {
         const nodes = this._svg.querySelectorAll('.' + className);
@@ -79,5 +90,55 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         //@ts-ignore
         return this.shadowRoot.elementFromPoint(x, y);
     }
+    drawLine(x1, y1, x2, y2, className, line, overlayLayer) {
+        if (!line) {
+            line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            this.addOverlay(line, overlayLayer);
+        }
+        line.setAttribute('x1', x1);
+        line.setAttribute('y1', y1);
+        line.setAttribute('x2', x2);
+        line.setAttribute('y2', y2);
+        if (className)
+            line.setAttribute('class', className);
+        return line;
+    }
+    drawCircle(x, y, radius, className, circle, overlayLayer) {
+        if (!circle) {
+            circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+            this.addOverlay(circle, overlayLayer);
+        }
+        circle.setAttribute('cx', x);
+        circle.setAttribute('cy', y);
+        circle.setAttribute('r', radius);
+        if (className)
+            circle.setAttribute('class', className);
+        return circle;
+    }
+    drawRect(x, y, w, h, className, rect, overlayLayer) {
+        if (!rect) {
+            rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+            this.addOverlay(rect, overlayLayer);
+        }
+        rect.setAttribute('x', x);
+        rect.setAttribute('y', y);
+        rect.setAttribute('width', w);
+        rect.setAttribute('height', h);
+        if (className)
+            rect.setAttribute('class', className);
+        return rect;
+    }
+    drawText(text, x, y, className, textEl, overlayLayer) {
+        if (!textEl) {
+            textEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
+            this.addOverlay(textEl, overlayLayer);
+        }
+        textEl.setAttribute('x', x);
+        textEl.setAttribute('y', y);
+        textEl.textContent = text;
+        if (className)
+            textEl.setAttribute('class', className);
+        return textEl;
+    }
 }
 customElements.define(OverlayLayerView.is, OverlayLayerView);

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

@@ -40,11 +40,7 @@ export class PointerTool {
         const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
         if (this._actionType == null) {
             this._initialPoint = currentPoint;
-            const targetRect = currentElement.getBoundingClientRect();
-            this._initialOffset = {
-                x: event.x - targetRect.x,
-                y: event.y - targetRect.y
-            };
+            this._initialOffset = designerCanvas.getNormalizedOffsetInElement(event, currentElement);
             if (event.type == EventNames.PointerDown) {
                 this._actionStartedDesignItem = currentDesignItem;
                 designerCanvas.snapLines.clearSnaplines();

package/dist/index.d.ts

@@ -135,6 +135,11 @@ export * from "./elements/widgets/designerView/extensions/contextMenu/CopyPasteC
 export * from "./elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js";
+export type { IDesignerPointerExtension } from "./elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.js";
+export type { IDesignerPointerExtensionProvider } from "./elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js";
+export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js";
+export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js";
 export * from "./elements/widgets/demoView/demoView.js";
 export * from "./elements/widgets/paletteView/paletteElements.js";
 export * from "./elements/widgets/paletteView/paletteView.js";

package/dist/index.js

@@ -98,6 +98,9 @@ export * from "./elements/widgets/designerView/extensions/contextMenu/CopyPasteC
 export * from "./elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js";
+export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js";
+export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js";
 export * from "./elements/widgets/demoView/demoView.js";
 export * from "./elements/widgets/paletteView/paletteElements.js";
 export * from "./elements/widgets/paletteView/paletteView.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.36",
+  "version": "0.0.40",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -11,14 +11,14 @@
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.2.0",
+    "@node-projects/base-custom-webcomponent": "^0.3.0",
     "construct-style-sheets-polyfill": "^3.0.4"
   },
   "devDependencies": {
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^2.4.1",
     "@types/codemirror": "^5.60.5",
-    "@types/jquery": "^3.5.8",
+    "@types/jquery": "^3.5.9",
     "@types/jquery.fancytree": "0.0.7",
     "ace-builds": "^1.4.13",
     "codemirror": "^5.64.0",