@node-projects/web-component-designer 0.1.153 → 0.1.155

package/dist/elements/helper/LayoutHelper.js

@@ -34,8 +34,8 @@ export function placeDesignItem(container, designItem, offset, mode) {
     if (mode === 'position') {
         let positionedContainerElement = container.element;
         let computedStylePositionedContainer = getComputedStyle(container.element);
-        while (computedStylePositionedContainer.position !== 'relative' && computedStylePositionedContainer.position !== 'absolute') {
-            positionedContainerElement = positionedContainerElement.parentElement;
+        if (computedStylePositionedContainer.position !== 'relative' && computedStylePositionedContainer.position !== 'absolute') {
+            positionedContainerElement = positionedContainerElement.offsetParent;
             computedStylePositionedContainer = getComputedStyle(positionedContainerElement);
         }
         let oldLeft = null;

package/dist/elements/item/DesignItem.js

@@ -268,7 +268,7 @@ export class DesignItem {
             const range = document.createRange();
             range.selectNode(document.body);
             const fragment = range.createContextualFragment(value);
-            for (const n of fragment.childNodes) {
+            for (const n of [...fragment.childNodes]) {
                 let di = DesignItem.createDesignItemFromInstance(n, this.serviceContainer, this.instanceServiceContainer);
                 this.insertChild(di);
             }

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -95,6 +95,7 @@ import { PaddingExtensionProvider } from '../widgets/designerView/extensions/Pad
 import { GridChildResizeExtensionProvider } from '../widgets/designerView/extensions/grid/GridChildResizeExtensionProvider.js';
 import { AlignItemsContextMenu } from '../widgets/designerView/extensions/contextMenu/AlignItemsContextMenu.js';
 import { BasicWebcomponentPropertiesService } from './propertiesService/services/BasicWebcomponentPropertiesService.js';
+import { PreviousElementSelectExtensionProvider } from '../widgets/designerView/extensions/PreviousElementSelectExtensionProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     let defaultPlacementService = new DefaultPlacementService();
@@ -131,6 +132,7 @@ export function createDefaultServiceContainer() {
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
         new ConditionExtensionProvider(new ElementDragTitleExtensionProvider(), item => !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
+        new PreviousElementSelectExtensionProvider(),
         new TransformOriginExtensionProvider(true),
         new MarginExtensionProvider(),
         new PaddingExtensionProvider(),
@@ -160,7 +162,9 @@ export function createDefaultServiceContainer() {
         new FlexboxExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.MouseOver, [
-        new HighlightElementExtensionProvider()
+        new HighlightElementExtensionProvider(),
+        new ElementDragTitleExtensionProvider(),
+        new PreviousElementSelectExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.Placement, [
         new PlacementExtensionProvider()

package/dist/elements/widgets/debugView/debug-view.js

@@ -38,6 +38,18 @@ const getClosestStackingContext = function (node) {
     if (computedStyle.transform !== 'none') {
         return { node: node, reason: `transform: ${computedStyle.transform}` };
     }
+    // elements with a scale value other than "none".
+    if (computedStyle.scale !== 'none') {
+        return { node: node, reason: `scale: ${computedStyle.scale}` };
+    }
+    // elements with a transform value other than "none".
+    if (computedStyle.translate !== 'none') {
+        return { node: node, reason: `translate: ${computedStyle.translate}` };
+    }
+    // elements with a transform value other than "none".
+    if (computedStyle.rotate !== 'none') {
+        return { node: node, reason: `rotate: ${computedStyle.rotate}` };
+    }
     // elements with a mix-blend-mode value other than "normal".
     if (computedStyle.mixBlendMode !== 'normal') {
         return { node: node, reason: `mixBlendMode: ${computedStyle.mixBlendMode}` };
@@ -46,6 +58,10 @@ const getClosestStackingContext = function (node) {
     if (computedStyle.filter !== 'none') {
         return { node: node, reason: `filter: ${computedStyle.filter}` };
     }
+    // elements with a filter value other than "none".
+    if (computedStyle.backdropFilter !== 'none') {
+        return { node: node, reason: `backdropFilter: ${computedStyle.backdropFilter}` };
+    }
     // elements with a perspective value other than "none".
     if (computedStyle.perspective !== 'none') {
         return { node: node, reason: `perspective: ${computedStyle.perspective}` };
@@ -75,7 +91,7 @@ const getClosestStackingContext = function (node) {
         return { node: node, reason: `isolation: ${computedStyle.isolation}` };
     }
     // transform or opacity in will-change even if you don't specify values for these attributes directly.
-    if (computedStyle.willChange === 'transform' || computedStyle.willChange === 'opacity') {
+    if (computedStyle.willChange === 'transform' || computedStyle.willChange === 'opacity' || computedStyle.willChange === 'scale' || computedStyle.willChange === 'translate' || computedStyle.willChange === 'rotate') {
         return { node: node, reason: `willChange: ${computedStyle.willChange}` };
     }
     // an item with a z-index value other than "auto".
@@ -131,6 +147,7 @@ export class DebugView extends BaseCustomWebComponentConstructorAppend {
         overflow: auto;
         height: 100%;
         display: block;
+        font-size: 12px;
       }
       table {
         font-family: Arial, Helvetica, sans-serif;
@@ -162,8 +179,8 @@ export class DebugView extends BaseCustomWebComponentConstructorAppend {
       }`;
     _ready;
     computedStyle;
-    createsStackingContext;
-    createsStackingContextReason;
+    createsStackingContext = '';
+    createsStackingContextReason = '';
     parentStackingContext;
     parentStackingContextText;
     selectedElementOffsetParent;
@@ -200,7 +217,8 @@ export class DebugView extends BaseCustomWebComponentConstructorAppend {
                 if (element && element.nodeType != 8 && element.nodeType != 11) {
                     this.computedStyle = getComputedStyle(element);
                     this.selectedElementOffsetParent = element.offsetParent;
-                    if (this.selectedElementOffsetParent == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element) {
+                    if (this.selectedElementOffsetParent == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element ||
+                        this.selectedElementOffsetParent == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element.parentElement) {
                         this.selectedElementOffsetParentText = null;
                         this.selectedElementOffsetParent = null;
                     }
@@ -214,7 +232,8 @@ export class DebugView extends BaseCustomWebComponentConstructorAppend {
                         if (this.createsStackingContext && element.nodeName !== 'HTML') {
                             this.parentStackingContext = getClosestStackingContext(element.parentNode).node;
                         }
-                        if (this.parentStackingContext == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element.parentElement.parentElement) {
+                        if (this.parentStackingContext == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element.parentElement ||
+                            this.parentStackingContext == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element.parentElement.parentElement) {
                             this.parentStackingContextText = null;
                             this.parentStackingContext = null;
                         }

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

@@ -256,10 +256,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         <div id="node-projects-designer-canvas-outercanvas2" style="width:100%;height:100%;position:relative; margin: 0 !important; padding: 0 !important; border: none !important; isolation: isolate !important;">
           <div id="node-projects-designer-canvas-canvasContainer"
           style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;user-select: none; margin: 0 !important; padding: 0 !important; border: none !important;">
-          <div id="node-projects-designer-canvas-canvas" part="canvas"></div>
+          <div title="" id="node-projects-designer-canvas-canvas" part="canvas"></div>
         </div>
       </div>
-      <div id="node-projects-designer-canvas-clickOverlay" tabindex="0" style="pointer-events: auto;  margin: 0 !important; padding: 0 !important; border: none !important;"></div>
+      <div id="node-projects-designer-canvas-clickOverlay" title="" tabindex="0" style="pointer-events: auto;  margin: 0 !important; padding: 0 !important; border: none !important;"></div>
       </div>
       
       <div id="node-projects-designer-search-container" style="display: none;">

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

@@ -17,6 +17,7 @@ export declare abstract class AbstractExtensionBase {
     protected _drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
     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 _drawPath(data: string, className?: string, path?: SVGPathElement, overlayLayer?: OverlayLayer): SVGPathElement;
     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];

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

@@ -66,6 +66,13 @@ export class AbstractExtensionBase {
         }
         return newRect;
     }
+    _drawPath(data, className, path, overlayLayer) {
+        const newPath = this.overlayLayerView.drawPath(this.constructor.name, data, className, path, overlayLayer);
+        if (!path) {
+            this.overlays.push(newPath);
+        }
+        return newPath;
+    }
     _drawText(text, x, y, className, textEl, overlayLayer) {
         const newText = this.overlayLayerView.drawText(this.constructor.name, text, x, y, className, textEl, overlayLayer);
         if (!textEl) {

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.js

@@ -94,6 +94,17 @@ export class EditTextExtension extends AbstractExtension {
     }
     commitchanges() {
         this._removeAllOverlays();
+        this.extendedItem.element.normalize();
+        let stop = false;
+        outer: while (!stop) {
+            for (let e of this.extendedItem.element.querySelectorAll('*')) {
+                if (e.childNodes.length == 0) {
+                    e.remove();
+                    continue outer;
+                }
+            }
+            stop = true;
+        }
         const newHTML = this.extendedItem.element.innerHTML;
         this.extendedItem.editContentFinish();
         this.extendedItem.innerHTML = newHTML;

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

@@ -0,0 +1,15 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class ElementDragTitleExtension extends AbstractExtension {
+    private _rect;
+    private _text;
+    private _width;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(cache: Record<string | symbol, any>, event?: Event): void;
+    _drawMoveOverlay(itemRect: DOMRect): void;
+    refresh(cache: Record<string | symbol, any>, event?: Event): void;
+    _pointerEvent(event: PointerEvent): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,68 @@
+import { getTextWidth } from '../../../helper/TextHelper.js';
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
+import { NamedTools } from "../tools/NamedTools.js";
+import { AbstractExtension } from './AbstractExtension.js';
+const extensionWidth = 60;
+export class ElementDragTitleExtension extends AbstractExtension {
+    _rect;
+    _text;
+    _width;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(cache, event) {
+        const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas, cache);
+        if (!isNaN(transformedCornerPoints[0].x)) {
+            const boundRect = this.extendedItem.element.getBoundingClientRect();
+            let w = getTextWidth(this.extendedItem.name, '10px monospace');
+            let elementWidth = Math.sqrt(Math.pow(transformedCornerPoints[1].x - transformedCornerPoints[0].x, 2) + Math.pow(transformedCornerPoints[1].y - transformedCornerPoints[0].y, 2));
+            let text = this.extendedItem.name;
+            if (this.extendedItem.id)
+                text = '#' + this.extendedItem.id;
+            this._width = Math.max(Math.min(elementWidth, w), extensionWidth);
+            this._rect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-primary-selection-move', this._rect);
+            this._text = this._drawHTML('<div style="position:relative"><span style="width: 100%; position: absolute; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform-origin: 0 0;">' + text + '</span></div>', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-text-primary', this._text);
+            this._text.style.overflow = 'visible';
+            this._rect2 = this._drawRect(transformedCornerPoints[0].x + 60, transformedCornerPoints[0].y - 16, 15, 15, 'svg-primary-selection-move', this._rect2);
+            this._path = this._drawPath('m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z', 'svg-primary-selection-move', this._path);
+            //<svg viewBox="0 0 24 24"><path d=""></path></svg>
+            this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
+            this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
+            this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));
+            this.refresh(cache, event);
+        }
+    }
+    _drawMoveOverlay(itemRect) {
+    }
+    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;
+        if (!isNaN(transformedCornerPoints[0].x)) {
+            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.setAttribute('height', '' + h);
+                this._text.setAttribute('width', '' + w);
+                this._text.children[0].children[0].style.rotate = angle + 'deg';
+            }
+        }
+    }
+    _pointerEvent(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.designerCanvas.serviceContainer.designerTools.get(NamedTools.Pointer).pointerEventHandler(this.designerCanvas, event, this.extendedItem.element);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -17,9 +17,11 @@ export class ElementDragTitleExtension extends AbstractExtension {
             let w = getTextWidth(this.extendedItem.name, '10px monospace');
             let elementWidth = Math.sqrt(Math.pow(transformedCornerPoints[1].x - transformedCornerPoints[0].x, 2) + Math.pow(transformedCornerPoints[1].y - transformedCornerPoints[0].y, 2));
             let text = this.extendedItem.name;
+            if (this.extendedItem.id)
+                text = '#' + this.extendedItem.id;
             this._width = Math.max(Math.min(elementWidth, w), extensionWidth);
             this._rect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-primary-selection-move', this._rect);
-            this._text = this._drawHTML('<div style="position:relative"><span style="width: 100%; position: absolute; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform-origin: 0 0;">' + text + '</span></div>', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-text-primary', this._text);
+            this._text = this._drawHTML('<div style="position:relative"><span style="width: 100%; position: absolute; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform-origin: 0 0; padding-left: 2px;">' + text + '</span></div>', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-text-primary', this._text);
             this._text.style.overflow = 'visible';
             this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
             this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
@@ -33,7 +35,7 @@ export class ElementDragTitleExtension extends AbstractExtension {
         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;
         if (!isNaN(transformedCornerPoints[0].x)) {
-            if (this._valuesHaveChanges(transformedCornerPoints[0].x, transformedCornerPoints[0].y, angle)) {
+            if (this._valuesHaveChanges(transformedCornerPoints[0].x, transformedCornerPoints[0].y, angle, this.designerCanvas.scaleFactor)) {
                 const h = (15 / this.designerCanvas.scaleFactor);
                 const w = (this._width / this.designerCanvas.scaleFactor);
                 this._rect.setAttribute('x', '' + transformedCornerPoints[0].x);

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

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

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

@@ -0,0 +1,13 @@
+import { ElementDragTitleExtension } from './ElementDragTitleExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class ElementDragTitleExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return !designItem.isRootItem && !(designItem.element instanceof HTMLTemplateElement);
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new ElementDragTitleExtension(extensionManager, designerView, designItem);
+    }
+    static style = css `
+    .svg-text-primary { stroke: none; color: white; font-family: monospace; }
+  `;
+}

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

@@ -0,0 +1,12 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class PreviousElementSelectExtension extends AbstractExtension {
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    private _rect;
+    private _g;
+    extend(cache: Record<string | symbol, any>, event?: Event): void;
+    refresh(cache: Record<string | symbol, any>, event?: Event): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,38 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
+import { AbstractExtension } from './AbstractExtension.js';
+export class PreviousElementSelectExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    _rect;
+    _g;
+    extend(cache, event) {
+        this.refresh(cache, event);
+    }
+    refresh(cache, event) {
+        const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas, cache);
+        if (!isNaN(transformedCornerPoints[1].x)) {
+            if (this._valuesHaveChanges(transformedCornerPoints[0].x, transformedCornerPoints[0].y, this.designerCanvas.scaleFactor)) {
+                const h = (16 / this.designerCanvas.scaleFactor);
+                this._rect = this._drawRect(transformedCornerPoints[1].x - (15 / this.designerCanvas.scaleFactor), transformedCornerPoints[1].y - (16.5 / this.designerCanvas.scaleFactor), h, h, 'svg-previous-select', this._rect);
+                if (!this._g) {
+                    this._g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+                    this._g.setAttribute('class', 'svg-previous-select');
+                    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    path.setAttribute('d', 'm4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z');
+                    this._g.appendChild(path);
+                    this._addOverlay(this._g);
+                    this._rect.onpointerdown = (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        this.extendedItem.instanceServiceContainer.selectionService.setSelectedElements([this.extendedItem.parent]);
+                    };
+                }
+                this._g.setAttribute('transform', 'translate(' + (transformedCornerPoints[1].x - (14.5 / this.designerCanvas.scaleFactor)) + ',' + (transformedCornerPoints[1].y - (15.5 / this.designerCanvas.scaleFactor)) + ') scale(' + 0.6 / this.designerCanvas.scaleFactor + ')');
+            }
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

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

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

@@ -0,0 +1,14 @@
+import { PreviousElementSelectExtension } from './PreviousElementSelectExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class PreviousElementSelectExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return !designItem.isRootItem && !(designItem.element instanceof HTMLTemplateElement);
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new PreviousElementSelectExtension(extensionManager, designerView, designItem);
+    }
+    static style = css `
+    rect.svg-previous-select { stroke: none; fill: #3899ec; pointer-events: auto; }
+    g.svg-previous-select { stroke: none; fill: white; }
+  `;
+}

package/dist/index.d.ts

@@ -242,6 +242,8 @@ export * from "./elements/widgets/designerView/extensions/TransformOriginExtensi
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/PlacementExtension.js";
 export * from "./elements/widgets/designerView/extensions/PlacementExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/PreviousElementSelectExtension.js";
+export * from "./elements/widgets/designerView/extensions/PreviousElementSelectExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/block/BlockToolbarExtension.js";
 export * from "./elements/widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/flex/FlexToolbarExtension.js";

package/dist/index.js

@@ -183,6 +183,8 @@ export * from "./elements/widgets/designerView/extensions/TransformOriginExtensi
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/PlacementExtension.js";
 export * from "./elements/widgets/designerView/extensions/PlacementExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/PreviousElementSelectExtension.js";
+export * from "./elements/widgets/designerView/extensions/PreviousElementSelectExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/block/BlockToolbarExtension.js";
 export * from "./elements/widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/flex/FlexToolbarExtension.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.153",
+  "version": "0.1.155",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",