@node-projects/web-component-designer 0.1.72 → 0.1.74

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

@@ -1,4 +1,3 @@
-import { DomHelper } from '@node-projects/base-custom-webcomponent';
 export const provideSnaplinesWithDistance = 'provideSnaplinesWithDistance';
 export const provideSnaplinesWithDistanceDistance = 'provideSnaplinesWithDistanceDistance';
 export class SnaplinesProviderService {
@@ -13,8 +12,7 @@ export class SnaplinesProviderService {
             const positionsMiddleH = [];
             const positionsV = [];
             const positionsMiddleV = [];
-            let ignoreElements = ignoredItems.map(x => x.element);
-            for (let n of DomHelper.getAllChildNodes(containerItem.element, false, ignoreElements)) {
+            for (let n of containerItem.querySelectorAll('*')) {
                 if (!ignMap.has(n)) {
                     const p = n.getBoundingClientRect();
                     const pLeft = (p.x - outerRect.x) / canvas.scaleFactor;

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

@@ -439,7 +439,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         let maxX = 0, maxY = 0, minX = 0, minY = 0;
         this.canvasOffset = { x: 0, y: 0 };
         this.zoomFactor = 1;
-        for (let n of DomHelper.getAllChildNodes(this.rootDesignItem.element)) {
+        for (let n of this.rootDesignItem.querySelectorAll('*')) {
             if (n instanceof Element) {
                 const rect = n.getBoundingClientRect();
                 minX = minX < rect.x ? minX : rect.x;

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

@@ -314,7 +314,6 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         this._toolbar.initialize(this.serviceContainer, this);
     }
     getHTML() {
-        //this.instanceServiceContainer.selectionService.setSelectedElements(null);
         if (this._designerCanvas.rootDesignItem.childCount > 0) {
             return DomConverter.ConvertToString(Array.from(this._designerCanvas.rootDesignItem.children()), true, true);
         }

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

@@ -9,6 +9,8 @@ export declare abstract class AbstractExtensionBase {
     protected extensionManager: IExtensionManager;
     protected designerCanvas: IDesignerCanvas;
     constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas);
+    private _backup;
+    protected _valuesHaveChanges(...values: any[]): boolean;
     protected _removeAllOverlays(): void;
     protected _addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
     protected _drawGroup(className?: string, group?: SVGGElement, overlayLayer?: OverlayLayer): SVGGElement;
@@ -16,6 +18,7 @@ export declare abstract class AbstractExtensionBase {
     protected _drawCircle(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
     protected _drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
     protected _drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
+    protected _drawHTML(html: string | HTMLElement, x: number, y: number, w: number, h: number, className?: string, htmlObj?: SVGForeignObjectElement, overlayLayer?: OverlayLayer): SVGForeignObjectElement;
     protected _drawTextWithBackground(text: string, x: number, y: number, backgroundColor: string, className?: string, existingEls?: [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement], overlayLayer?: OverlayLayer): [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement];
     protected _drawTransformedRect(points: [IPoint, IPoint, IPoint, IPoint], className?: string, path?: SVGPathElement, overlayLayer?: OverlayLayer): SVGPathElement;
 }

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

@@ -9,6 +9,20 @@ export class AbstractExtensionBase {
         this.designerCanvas = designerCanvas;
         this.overlayLayerView = designerCanvas.overlayLayer;
     }
+    _backup;
+    _valuesHaveChanges(...values) {
+        if (this._backup == null) {
+            this._backup = values;
+            return true;
+        }
+        for (let i = 0; i < values.length; i++) {
+            if (values[i] !== this._backup[i]) {
+                this._backup = values;
+                return true;
+            }
+        }
+        return false;
+    }
     _removeAllOverlays() {
         for (let o of this.overlays) {
             try {
@@ -59,6 +73,13 @@ export class AbstractExtensionBase {
         }
         return newText;
     }
+    _drawHTML(html, x, y, w, h, className, htmlObj, overlayLayer) {
+        const newHtml = this.overlayLayerView.drawHTML(this.constructor.name, html, x, y, w, h, className, htmlObj, overlayLayer);
+        if (!htmlObj) {
+            this.overlays.push(newHtml);
+        }
+        return newHtml;
+    }
     _drawTextWithBackground(text, x, y, backgroundColor, className, existingEls, overlayLayer) {
         const newEls = this.overlayLayerView.drawTextWithBackground(this.constructor.name, text, x, y, backgroundColor, className, existingEls, overlayLayer);
         if (!existingEls) {

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

@@ -21,10 +21,7 @@ export class ElementDragTitleExtension extends AbstractExtension {
             if (w > this._width)
                 text = this.extendedItem.name.substring(0, 10) + '…';
             this._rect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-primary-selection-move', this._rect);
-            this._text = this._drawText(text, (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
-            const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
-            title.textContent = this.extendedItem.name;
-            this._text.appendChild(title);
+            this._text = this._drawHTML('<span>' + text + '</span>', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, transformedCornerPoints[0].y - 16, this._width, 15, '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));
@@ -36,21 +33,23 @@ export class ElementDragTitleExtension extends AbstractExtension {
     refresh(cache, event) {
         const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 0, y: 16 }, this.designerCanvas, cache);
         const angle = Math.atan2((transformedCornerPoints[1].y - transformedCornerPoints[0].y), (transformedCornerPoints[1].x - transformedCornerPoints[0].x)) * 180 / Math.PI;
-        const transformedCornerPointsTx = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 0, y: 5 }, this.designerCanvas);
         if (!isNaN(transformedCornerPoints[0].x)) {
-            const h = (15 / this.designerCanvas.scaleFactor);
-            const w = (this._width / this.designerCanvas.scaleFactor);
-            this._rect.setAttribute('x', '' + transformedCornerPoints[0].x);
-            this._rect.setAttribute('y', '' + transformedCornerPoints[0].y);
-            this._rect.style.rotate = angle + 'deg';
-            this._rect.style.transformBox = 'fill-box';
-            this._rect.setAttribute('height', '' + h);
-            this._rect.setAttribute('width', '' + w);
-            this._rect.style.strokeWidth = (1 / this.designerCanvas.scaleFactor).toString();
-            this._text.setAttribute('x', '' + transformedCornerPointsTx[0].x);
-            this._text.setAttribute('y', '' + transformedCornerPointsTx[0].y);
-            this._text.style.fontSize = (10 / this.designerCanvas.scaleFactor) + 'px';
-            this._text.setAttribute('transform', 'rotate(' + angle + ' ' + transformedCornerPointsTx[0].x + ' ' + transformedCornerPointsTx[0].y + ')');
+            if (this._valuesHaveChanges(transformedCornerPoints[0].x, transformedCornerPoints[0].y, angle)) {
+                const h = (15 / this.designerCanvas.scaleFactor);
+                const w = (this._width / this.designerCanvas.scaleFactor);
+                this._rect.setAttribute('x', '' + transformedCornerPoints[0].x);
+                this._rect.setAttribute('y', '' + transformedCornerPoints[0].y);
+                this._rect.style.rotate = angle + 'deg';
+                this._rect.style.transformBox = 'fill-box';
+                this._rect.setAttribute('height', '' + h);
+                this._rect.setAttribute('width', '' + w);
+                this._rect.style.strokeWidth = (1 / this.designerCanvas.scaleFactor).toString();
+                this._text.setAttribute('x', '' + transformedCornerPoints[0].x);
+                this._text.setAttribute('y', '' + transformedCornerPoints[0].y);
+                this._text.style.fontSize = (10 / this.designerCanvas.scaleFactor) + 'px';
+                this._text.style.transformBox = 'fill-box';
+                this._text.style.rotate = angle + 'deg';
+            }
         }
     }
     _pointerEvent(event) {

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

@@ -8,6 +8,7 @@ export class ElementDragTitleExtensionProvider {
         return new ElementDragTitleExtension(extensionManager, designerView, designItem);
     }
     style = css `
-    .svg-text-primary { stroke: none; fill: white; font-family: monospace; }
+    .svg-text-primary { stroke: none; color: white; font-family: monospace; }
+    .svg-text-primary.span { width: 100%; position: absolute; text-overflow: ellipsis; overflow: hidden; }
   `;
 }

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

@@ -4,7 +4,6 @@ import { AbstractExtension } from './AbstractExtension.js';
 import { IExtensionManager } from './IExtensionManger.js';
 export declare class InvisibleElementExtension extends AbstractExtension {
     private _rect;
-    private lastPoints;
     constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem);
     extend(cache: Record<string | symbol, any>, event?: Event): void;
     refresh(cache: Record<string | symbol, any>, event?: Event): void;

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

@@ -3,7 +3,6 @@ import { AbstractExtension } from './AbstractExtension.js';
 import { OverlayLayer } from "./OverlayLayer.js";
 export class InvisibleElementExtension extends AbstractExtension {
     _rect;
-    lastPoints;
     constructor(extensionManager, designerCanvas, extendedItem) {
         super(extensionManager, designerCanvas, extendedItem);
     }
@@ -12,8 +11,7 @@ export class InvisibleElementExtension extends AbstractExtension {
     }
     refresh(cache, event) {
         const t = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas, cache);
-        if (!this.lastPoints || this.lastPoints[0].x != t[0].x || this.lastPoints[0].y != t[0].y || this.lastPoints[1].x != t[1].x || this.lastPoints[1].y != t[1].y || this.lastPoints[2].x != t[2].x || this.lastPoints[2].y != t[2].y || this.lastPoints[3].x != t[3].x || this.lastPoints[3].y != t[3].y) {
-            this.lastPoints = t;
+        if (this._valuesHaveChanges(t[0].x, t[0].y, t[1].x, t[1].y, t[2].x, t[2].y, t[3].x, t[3].y)) {
             this._rect = this._drawTransformedRect(t, 'svg-invisible-div', this._rect, OverlayLayer.Background);
         }
     }

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

@@ -11,6 +11,7 @@ export declare class PositionExtension extends AbstractExtension {
     private _textY;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
+    _oldValues: any[];
     refresh(): void;
     dispose(): void;
 }

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

@@ -12,29 +12,32 @@ export class PositionExtension extends AbstractExtension {
     extend() {
         this.refresh();
     }
+    _oldValues = [];
     refresh() {
         const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         const itemParentRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.parent.element);
-        this._line1 = this._drawLine(itemParentRect.x, itemRect.y + itemRect.height / 2, itemRect.x, itemRect.y + itemRect.height / 2, 'svg-position', this._line1);
-        this._line2 = this._drawLine(itemParentRect.x + itemParentRect.width, itemRect.y + itemRect.height / 2, itemRect.x + itemRect.width, itemRect.y + itemRect.height / 2, 'svg-position', this._line2);
-        this._line3 = this._drawLine(itemRect.x + itemRect.width / 2, itemParentRect.y, itemRect.x + itemRect.width / 2, itemRect.y, 'svg-position', this._line3);
-        this._line4 = this._drawLine(itemRect.x + itemRect.width / 2, itemParentRect.y + itemParentRect.height, itemRect.x + itemRect.width / 2, itemRect.y + itemRect.height, 'svg-position', this._line4);
-        this._line1.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
-        this._line2.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
-        this._line3.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
-        this._line4.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
-        this._line1.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
-        this._line2.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
-        this._line3.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
-        this._line4.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
-        let x = Math.round(itemRect.x - itemParentRect.x);
-        let y = Math.round(itemRect.y - itemParentRect.y);
-        this._textX = this._drawTextWithBackground('' + x, itemParentRect.x + x / 2, itemRect.y + itemRect.height / 2, 'white', 'svg-position-text', this._textX);
-        this._textX[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
-        this._textX[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
-        this._textY = this._drawTextWithBackground('' + y, itemRect.x + itemRect.width / 2, itemParentRect.y + y / 2, 'white', 'svg-position-text', this._textY);
-        this._textY[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
-        this._textY[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
+        if (this._valuesHaveChanges(this.designerCanvas.scaleFactor, itemRect.x, itemRect.y, itemParentRect.x, itemParentRect.y, itemRect.height, itemRect.width, itemParentRect.height, itemParentRect.width)) {
+            this._line1 = this._drawLine(itemParentRect.x, itemRect.y + itemRect.height / 2, itemRect.x, itemRect.y + itemRect.height / 2, 'svg-position', this._line1);
+            this._line2 = this._drawLine(itemParentRect.x + itemParentRect.width, itemRect.y + itemRect.height / 2, itemRect.x + itemRect.width, itemRect.y + itemRect.height / 2, 'svg-position', this._line2);
+            this._line3 = this._drawLine(itemRect.x + itemRect.width / 2, itemParentRect.y, itemRect.x + itemRect.width / 2, itemRect.y, 'svg-position', this._line3);
+            this._line4 = this._drawLine(itemRect.x + itemRect.width / 2, itemParentRect.y + itemParentRect.height, itemRect.x + itemRect.width / 2, itemRect.y + itemRect.height, 'svg-position', this._line4);
+            this._line1.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
+            this._line2.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
+            this._line3.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
+            this._line4.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
+            this._line1.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
+            this._line2.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
+            this._line3.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
+            this._line4.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
+            let x = Math.round(itemRect.x - itemParentRect.x);
+            let y = Math.round(itemRect.y - itemParentRect.y);
+            this._textX = this._drawTextWithBackground('' + x, itemParentRect.x + x / 2, itemRect.y + itemRect.height / 2, 'white', 'svg-position-text', this._textX);
+            this._textX[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
+            this._textX[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
+            this._textY = this._drawTextWithBackground('' + y, itemRect.x + itemRect.width / 2, itemParentRect.y + y / 2, 'white', 'svg-position-text', this._textY);
+            this._textY[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
+            this._textY[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
+        }
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -32,14 +32,16 @@ export class ResizeExtension extends AbstractExtension {
             this.remove();
             return;
         }
-        this._circle1 = this._drawResizerOverlay(transformedCornerPoints[0].x, transformedCornerPoints[0].y, 'nw-resize', this._circle1);
-        this._circle2 = this._drawResizerOverlay((transformedCornerPoints[0].x + (transformedCornerPoints[1].x - transformedCornerPoints[0].x) / 2), (transformedCornerPoints[0].y + (transformedCornerPoints[1].y - transformedCornerPoints[0].y) / 2), 'n-resize', this._circle2);
-        this._circle3 = this._drawResizerOverlay(transformedCornerPoints[1].x, transformedCornerPoints[1].y, 'ne-resize', this._circle3);
-        this._circle4 = this._drawResizerOverlay((transformedCornerPoints[0].x + (transformedCornerPoints[2].x - transformedCornerPoints[0].x) / 2), (transformedCornerPoints[0].y + (transformedCornerPoints[2].y - transformedCornerPoints[0].y) / 2), 'w-resize', this._circle4);
-        this._circle5 = this._drawResizerOverlay(transformedCornerPoints[2].x, transformedCornerPoints[2].y, 'sw-resize', this._circle5);
-        this._circle6 = this._drawResizerOverlay((transformedCornerPoints[2].x + (transformedCornerPoints[3].x - transformedCornerPoints[2].x) / 2), (transformedCornerPoints[2].y + (transformedCornerPoints[3].y - transformedCornerPoints[2].y) / 2), 's-resize', this._circle6);
-        this._circle8 = this._drawResizerOverlay((transformedCornerPoints[1].x + (transformedCornerPoints[3].x - transformedCornerPoints[1].x) / 2), (transformedCornerPoints[1].y + (transformedCornerPoints[3].y - transformedCornerPoints[1].y) / 2), 'e-resize', this._circle8);
-        this._circle7 = this._drawResizerOverlay(transformedCornerPoints[3].x, transformedCornerPoints[3].y, 'se-resize', this._circle7);
+        if (this._valuesHaveChanges(transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[1].x, transformedCornerPoints[1].y, transformedCornerPoints[2].x, transformedCornerPoints[2].y, transformedCornerPoints[3].x, transformedCornerPoints[3].y)) {
+            this._circle1 = this._drawResizerOverlay(transformedCornerPoints[0].x, transformedCornerPoints[0].y, 'nw-resize', this._circle1);
+            this._circle2 = this._drawResizerOverlay((transformedCornerPoints[0].x + (transformedCornerPoints[1].x - transformedCornerPoints[0].x) / 2), (transformedCornerPoints[0].y + (transformedCornerPoints[1].y - transformedCornerPoints[0].y) / 2), 'n-resize', this._circle2);
+            this._circle3 = this._drawResizerOverlay(transformedCornerPoints[1].x, transformedCornerPoints[1].y, 'ne-resize', this._circle3);
+            this._circle4 = this._drawResizerOverlay((transformedCornerPoints[0].x + (transformedCornerPoints[2].x - transformedCornerPoints[0].x) / 2), (transformedCornerPoints[0].y + (transformedCornerPoints[2].y - transformedCornerPoints[0].y) / 2), 'w-resize', this._circle4);
+            this._circle5 = this._drawResizerOverlay(transformedCornerPoints[2].x, transformedCornerPoints[2].y, 'sw-resize', this._circle5);
+            this._circle6 = this._drawResizerOverlay((transformedCornerPoints[2].x + (transformedCornerPoints[3].x - transformedCornerPoints[2].x) / 2), (transformedCornerPoints[2].y + (transformedCornerPoints[3].y - transformedCornerPoints[2].y) / 2), 's-resize', this._circle6);
+            this._circle8 = this._drawResizerOverlay((transformedCornerPoints[1].x + (transformedCornerPoints[3].x - transformedCornerPoints[1].x) / 2), (transformedCornerPoints[1].y + (transformedCornerPoints[3].y - transformedCornerPoints[1].y) / 2), 'e-resize', this._circle8);
+            this._circle7 = this._drawResizerOverlay(transformedCornerPoints[3].x, transformedCornerPoints[3].y, 'se-resize', this._circle7);
+        }
         //#endregion Circles
     }
     _drawResizerOverlay(x, y, cursor, oldCircle) {

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

@@ -8,8 +8,8 @@ export declare class TransformOriginExtension extends AbstractExtension {
     private _circle2;
     private _oldValue;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    refresh(cache: Record<string | symbol, any>, event?: Event): void;
     extend(cache: Record<string | symbol, any>, event?: Event): void;
     pointerEvent(event: PointerEvent): void;
-    refresh(cache: Record<string | symbol, any>, event?: Event): void;
     dispose(): void;
 }

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

@@ -10,6 +10,23 @@ export class TransformOriginExtension extends AbstractExtension {
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
+    refresh(cache, event) {
+        const computed = getComputedStyle(this.extendedItem.element);
+        const to = computed.transformOrigin.split(' '); // This value remains the same regardless of scalefactor
+        const toDOMPoint = getDesignerCanvasNormalizedTransformedPoint(this.extendedItem.element, { x: parseFloat(to[0]) * this.designerCanvas.zoomFactor, y: parseFloat(to[1]) * this.designerCanvas.zoomFactor }, this.designerCanvas, cache);
+        if (this._valuesHaveChanges(toDOMPoint.x, toDOMPoint.y, this.designerCanvas.zoomFactor)) {
+            this._removeAllOverlays();
+            this._circle = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 5 / this.designerCanvas.zoomFactor, 'svg-transform-origin');
+            this._circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+            this._circle.style.cursor = 'pointer';
+            this._circle2 = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 1 / this.designerCanvas.zoomFactor, 'svg-transform-origin');
+            this._circle2.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+            this._circle2.style.pointerEvents = 'none';
+            this._circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event));
+            this._circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event));
+            this._circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event)); //TODO: -> assign to window
+        }
+    }
     extend(cache, event) {
         const computed = getComputedStyle(this.extendedItem.element);
         const to = computed.transformOrigin.split(' '); // This value remains the same regardless of scalefactor
@@ -18,18 +35,12 @@ export class TransformOriginExtension extends AbstractExtension {
             this.remove();
             return;
         }
-        this._circle = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 5 / this.designerCanvas.zoomFactor, 'svg-transform-origin');
-        this._circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
-        this._circle.style.cursor = 'pointer';
-        this._circle2 = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 1 / this.designerCanvas.zoomFactor, 'svg-transform-origin');
-        this._circle2.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
-        this._circle2.style.pointerEvents = 'none';
-        this._circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event));
-        this._circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event));
-        this._circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event)); //TODO: -> assign to window
-        let old = this.extendedItem.getStyleFromSheetOrLocal('transform-origin');
-        if (old) {
-            this._oldValue = old;
+        else {
+            let old = this.extendedItem.getStyleFromSheetOrLocal('transform-origin');
+            if (old) {
+                this._oldValue = old;
+            }
+            this.refresh(cache, event);
         }
     }
     pointerEvent(event) {
@@ -88,12 +99,6 @@ export class TransformOriginExtension extends AbstractExtension {
                 break;
         }
     }
-    refresh(cache, event) {
-        if (this._circle) {
-            this._removeAllOverlays();
-            this.extend(cache, event);
-        }
-    }
     dispose() {
         this._removeAllOverlays();
     }

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

@@ -32,5 +32,6 @@ export declare class OverlayLayerView extends BaseCustomWebComponentConstructorA
     drawRect(overlaySource: string, x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
     drawPath(overlaySource: string, data: string, className?: string, path?: SVGPathElement, overlayLayer?: OverlayLayer): SVGPathElement;
     drawText(overlaySource: string, text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
+    drawHTML(overlaySource: string, html: HTMLElement | string, x: number, y: number, w: number, h: number, className?: string, htmlObj?: SVGForeignObjectElement, overlayLayer?: OverlayLayer): SVGForeignObjectElement;
     drawTextWithBackground(overlaySource: string, text: string, x: number, y: number, backgroundColor: string, className?: string, existingEls?: [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement], overlayLayer?: OverlayLayer): [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement];
 }

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

@@ -205,6 +205,23 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
             textEl.setAttribute('class', className);
         return textEl;
     }
+    drawHTML(overlaySource, html, x, y, w, h, className, htmlObj, overlayLayer) {
+        if (!htmlObj) {
+            htmlObj = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
+            this.addOverlay(overlaySource, htmlObj, overlayLayer);
+        }
+        htmlObj.setAttribute('x', x);
+        htmlObj.setAttribute('y', y);
+        htmlObj.setAttribute('width', w);
+        htmlObj.setAttribute('height', h);
+        if (typeof html === 'string')
+            htmlObj.innerHTML = html;
+        else
+            htmlObj.appendChild(html);
+        if (className)
+            htmlObj.setAttribute('class', className);
+        return htmlObj;
+    }
     drawTextWithBackground(overlaySource, text, x, y, backgroundColor, className, existingEls, overlayLayer) {
         if (!existingEls) {
             let filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.js

@@ -37,6 +37,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
       overflow: hidden;
       font-size: 12px;
       height: 20px;
+      border: none;
     }
     #pg {
       height: calc(100% - 64px);
@@ -44,7 +45,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     `;
     static template = html `
   <div class="root">
-    <span style="grid-column: span 3;" class="desc">Type:</span><span id="type"></span>
+    <span style="grid-column: span 3;" class="desc">Type:</span><input type="text" readonly id="type">
     <button id="config" style="display: none; grid-column: 5; grid-row: span 3; height: calc(100% - 10px); margin-left: 10px;">config</button>
     <div title="id" id="idRect" style="grid-column: 1; width: 7px; height: 7px; border: 1px solid white;"></div>
     <span style="grid-column: span 2;" class="desc">Id:</span><input type="text" id="id">
@@ -137,10 +138,13 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
             else {
                 this._configButton.style.display = 'none';
             }
-            if (this._instanceServiceContainer.selectionService.primarySelection?.nodeType == NodeType.Element)
-                this._type.innerText = this._instanceServiceContainer.selectionService.primarySelection?.name ?? '';
-            else
-                this._type.innerText = this._instanceServiceContainer.selectionService.primarySelection?.node?.nodeName ?? '';
+            if (this._instanceServiceContainer.selectionService.primarySelection?.nodeType == NodeType.Element) {
+                this._type.value = this._instanceServiceContainer.selectionService.primarySelection?.name ?? '';
+            }
+            else {
+                this._type.value = this._instanceServiceContainer.selectionService.primarySelection?.node?.nodeName ?? '';
+            }
+            this._type.title = this._type.value;
             this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
             if (this._instanceServiceContainer.selectionService.primarySelection?.element?.nodeType != NodeType.Element) {
                 this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.content ?? '';

package/package.json

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

package/dist/elements/services/propertiesService/IPropertyTabsService.d.ts

@@ -1,8 +0,0 @@
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { IPropertiesService } from './IPropertiesService.js';
-export interface IPropertyTabsService {
-    getPropertygroups(designItems: IDesignItem[]): {
-        name: string;
-        propertiesService: IPropertiesService;
-    }[];
-}

package/dist/elements/services/propertiesService/IPropertyTabsService.js

@@ -1 +0,0 @@
-export {};

package/dist/elements/services/propertiesService/PropertyTabsService.d.ts

@@ -1,27 +0,0 @@
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { IPropertiesService } from './IPropertiesService.js';
-import { IPropertyTabsService } from './IPropertyTabsService.js';
-import { AttachedPropertiesService } from './services/AttachedPropertiesService.js';
-export declare class PropertyTabsService implements IPropertyTabsService {
-    protected _attachedPropertiesService: AttachedPropertiesService;
-    protected _pgList: {
-        name: string;
-        propertiesService: IPropertiesService;
-    }[];
-    protected _svgPgList: {
-        name: string;
-        propertiesService: IPropertiesService;
-    }[];
-    protected _gridChild: {
-        name: string;
-        propertiesService: IPropertiesService;
-    }[];
-    protected _flexChild: {
-        name: string;
-        propertiesService: IPropertiesService;
-    }[];
-    getPropertygroups(designItems: IDesignItem[]): {
-        name: string;
-        propertiesService: IPropertiesService;
-    }[];
-}

package/dist/elements/services/propertiesService/PropertyTabsService.js

@@ -1,53 +0,0 @@
-import { NodeType } from '../../item/NodeType.js';
-import { AttachedPropertiesService } from './services/AttachedPropertiesService.js';
-import { AttributesPropertiesService } from './services/AttributesPropertiesService.js';
-import { CommonPropertiesService } from './services/CommonPropertiesService.js';
-import { CssCurrentPropertiesService } from './services/CssCurrentPropertiesService.js';
-import { CssCustomPropertiesService } from './services/CssCustomPropertiesService.js';
-import { CssPropertiesService } from './services/CssPropertiesService.js';
-export class PropertyTabsService {
-    _attachedPropertiesService = new AttachedPropertiesService();
-    _pgList = [
-        { name: 'properties', propertiesService: null },
-        { name: 'attached', propertiesService: this._attachedPropertiesService },
-        { name: 'attributes', propertiesService: new AttributesPropertiesService() },
-        { name: 'common', propertiesService: new CommonPropertiesService() },
-        { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
-        { name: 'css vars', propertiesService: new CssCustomPropertiesService() },
-        { name: 'layout', propertiesService: new CssPropertiesService("layout") },
-        { name: 'flex', propertiesService: new CssPropertiesService("flex") },
-        { name: 'grid', propertiesService: new CssPropertiesService("grid") },
-    ];
-    _svgPgList = [
-        { name: 'properties', propertiesService: null },
-        { name: 'attached', propertiesService: this._attachedPropertiesService },
-        { name: 'attributes', propertiesService: new AttributesPropertiesService() },
-        { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
-        { name: 'css vars', propertiesService: new CssCustomPropertiesService() },
-        { name: 'layout', propertiesService: new CssPropertiesService("layout") },
-        { name: 'svg', propertiesService: new CssPropertiesService("svg") },
-    ];
-    _gridChild = [
-        { name: 'gridChild', propertiesService: new CssPropertiesService("gridChild") },
-    ];
-    _flexChild = [
-        { name: 'flexChild', propertiesService: new CssPropertiesService("flexChild") },
-    ];
-    getPropertygroups(designItems) {
-        if (designItems == null || designItems.length == 0)
-            return [];
-        if (designItems[0].nodeType == NodeType.TextNode || designItems[0].nodeType == NodeType.Comment)
-            return [];
-        this._pgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
-        this._svgPgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
-        let lst = this._pgList;
-        if (designItems[0].element instanceof SVGElement)
-            lst = this._svgPgList;
-        const parentStyle = getComputedStyle(designItems[0].element.parentElement);
-        if (parentStyle.display.includes('grid'))
-            lst = [...lst, this._gridChild[0]];
-        else if (parentStyle.display.includes('flex'))
-            lst = [...lst, this._flexChild[0]];
-        return lst;
-    }
-}

package/dist/elements/services/refactorService/BindingsRefactorService copy.d.ts

@@ -1,6 +0,0 @@
-import { IDesignItem } from "../../item/IDesignItem.js";
-import { IRefactoring } from "./IRefactoring.js";
-export declare class BindingsRefactorService {
-    getRefactorings(designItems: IDesignItem[]): IRefactoring[];
-    refactor(refactoring: IRefactoring, oldValue: string, newValue: string): void;
-}

package/dist/elements/services/refactorService/BindingsRefactorService copy.js

@@ -1,21 +0,0 @@
-export class BindingsRefactorService {
-    getRefactorings(designItems) {
-        let refactorings = [];
-        for (let d of designItems) {
-            let bindings = d.serviceContainer.bindingService.getBindings(d);
-            if (bindings) {
-                for (let b of bindings) {
-                    for (let s of b.bindableObjectNames) {
-                        refactorings.push({ service: this, name: s, itemType: 'bindableObject', designItem: d, type: 'binding', sourceObject: b, display: b.target + '/' + b.targetName });
-                    }
-                }
-            }
-        }
-        return refactorings;
-    }
-    refactor(refactoring, oldValue, newValue) {
-        let binding = refactoring.sourceObject;
-        binding.bindableObjectNames = binding.bindableObjectNames.map(x => x == oldValue ? newValue : x);
-        refactoring.designItem.serviceContainer.bindingService.setBinding(refactoring.designItem, binding);
-    }
-}

package/dist/elements/services/refactorService/RefactorService.d.ts

@@ -1,5 +0,0 @@
-import { IDesignItem } from "../../item/IDesignItem.js";
-import { IRefactoring } from "./IRefactoring.js";
-export declare class RefactorService {
-    getRefactorings(designItems: IDesignItem[]): Record<string, IRefactoring[]>;
-}

package/dist/elements/services/refactorService/RefactorService.js

@@ -1,17 +0,0 @@
-export class RefactorService {
-    getRefactorings(designItems) {
-        let refactorings = {};
-        for (let d of designItems) {
-            let bindings = d.serviceContainer.bindingService.getBindings(d);
-            for (let b of bindings) {
-                for (let s of b.bindableObjectNames) {
-                    if (!refactorings[s]) {
-                        refactorings[s] = [];
-                    }
-                    refactorings[s].push({ name: s, designItem: d, type: 'binding', sourceObject: b });
-                }
-            }
-        }
-        return refactorings;
-    }
-}

package/dist/elements/widgets/refactorView/code-view-simple.d.ts

@@ -1,23 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { ICodeView } from './ICodeView.js';
-import { IActivateable } from '../../../interfaces/IActivateable.js';
-import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
-import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
-import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
-export declare class CodeViewSimple extends BaseCustomWebComponentConstructorAppend implements ICodeView, IActivateable, IUiCommandHandler {
-    dispose(): void;
-    canvasElement: HTMLElement;
-    elementsToPackages: Map<string, string>;
-    onTextChanged: TypedEvent<string>;
-    private _text;
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    executeCommand(command: IUiCommand): void;
-    canExecuteCommand(command: IUiCommand): boolean;
-    ready(): Promise<void>;
-    focusEditor(): void;
-    activated(): void;
-    update(code: any): void;
-    getText(): string;
-    setSelection(position: IStringPosition): void;
-}

package/dist/elements/widgets/refactorView/code-view-simple.js

@@ -1,55 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export class CodeViewSimple extends BaseCustomWebComponentConstructorAppend {
-    dispose() {
-    }
-    canvasElement;
-    elementsToPackages;
-    onTextChanged = new TypedEvent();
-    _text;
-    static style = css `
-    :host {
-      display: block;
-      height: 100%;
-      width: 100%;
-    }
-
-    textarea {
-      height: 100%;
-      width: 100%;
-      resize: none;
-      white-space: nowrap;
-      box-sizing: border-box;
-    }
-    `;
-    static template = html `
-      <div id="container" style="width: 100%; height: 100%; position: absolute;">
-        <textarea id="text"></textarea>
-      </div>
-  `;
-    executeCommand(command) {
-    }
-    canExecuteCommand(command) {
-        return false;
-    }
-    async ready() {
-        this._text = this._getDomElement('text');
-    }
-    focusEditor() {
-        requestAnimationFrame(() => {
-            this.focus();
-            this._text.focus();
-        });
-    }
-    activated() {
-    }
-    update(code) {
-        this._text.value = code;
-    }
-    getText() {
-        return this._text.value;
-    }
-    setSelection(position) {
-        this._text.setSelectionRange(position.start, position.start + position.length);
-    }
-}
-customElements.define('node-projects-code-view-simple', CodeViewSimple);