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

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -163,8 +163,8 @@ export function createDefaultServiceContainer() {
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.MouseOver, [
         new HighlightElementExtensionProvider(),
-        new ElementDragTitleExtensionProvider(),
-        new PreviousElementSelectExtensionProvider()
+        new ConditionExtensionProvider(new ElementDragTitleExtensionProvider(), item => item.instanceServiceContainer.selectionService.primarySelection !== item && !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
+        new ConditionExtensionProvider(new PreviousElementSelectExtensionProvider(), item => item.instanceServiceContainer.selectionService.primarySelection !== item && !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.Placement, [
         new PlacementExtensionProvider()

package/dist/elements/services/elementAtPointService/ElementAtPointService.d.ts

@@ -2,5 +2,5 @@ import { IElementAtPointService } from './IElementAtPointService.js';
 import { IPoint } from '../../../interfaces/IPoint.js';
 import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
 export declare class ElementAtPointService implements IElementAtPointService {
-    getElementAtPoint(designerView: IDesignerCanvas, point: IPoint): any;
+    getElementAtPoint(designerCanvas: IDesignerCanvas, point: IPoint): any;
 }

package/dist/elements/services/elementAtPointService/ElementAtPointService.js

@@ -1,5 +1,5 @@
 export class ElementAtPointService {
-    getElementAtPoint(designerView, point) {
-        return designerView.getElementAtPoint(point);
+    getElementAtPoint(designerCanvas, point) {
+        return designerCanvas.getElementAtPoint(point);
     }
 }

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

@@ -4,6 +4,7 @@ import { AbstractExtension } from './AbstractExtension.js';
 import { IExtensionManager } from './IExtensionManger.js';
 export declare class ElementDragTitleExtension extends AbstractExtension {
     private _rect;
+    private _clickRect;
     private _text;
     private _width;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);

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

@@ -5,6 +5,7 @@ import { AbstractExtension } from './AbstractExtension.js';
 const extensionWidth = 60;
 export class ElementDragTitleExtension extends AbstractExtension {
     _rect;
+    _clickRect;
     _text;
     _width;
     constructor(extensionManager, designerView, extendedItem) {
@@ -20,12 +21,14 @@ export class ElementDragTitleExtension extends AbstractExtension {
             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._rect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y, this._width, 15, 'svg-primary-selection-move', this._rect);
+            this._clickRect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y, this._width, 18, 'svg-invisible', this._clickRect);
+            this._clickRect.style.background = 'transparent';
             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));
-            this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));
+            this._clickRect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
+            this._clickRect.addEventListener('pointermove', (e) => this._pointerEvent(e));
+            this._clickRect.addEventListener('pointerup', (e) => this._pointerEvent(e));
             this.refresh(cache, event);
         }
     }
@@ -45,6 +48,13 @@ export class ElementDragTitleExtension extends AbstractExtension {
                 this._rect.setAttribute('height', '' + h);
                 this._rect.setAttribute('width', '' + w);
                 this._rect.style.strokeWidth = (1 / this.designerCanvas.scaleFactor).toString();
+                this._clickRect.setAttribute('x', '' + transformedCornerPoints[0].x);
+                this._clickRect.setAttribute('y', '' + transformedCornerPoints[0].y);
+                this._clickRect.style.rotate = angle + 'deg';
+                this._clickRect.style.transformBox = 'fill-box';
+                this._clickRect.setAttribute('height', '' + (h + 3));
+                this._clickRect.setAttribute('width', '' + w);
+                this._clickRect.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';

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

@@ -1,4 +1,3 @@
-import { DesignItem } from '../../../item/DesignItem.js';
 import { IDesignItem } from '../../../item/IDesignItem.js';
 import { IDesignerCanvas } from '../IDesignerCanvas.js';
 import { ExtensionType } from './ExtensionType.js';
@@ -9,9 +8,9 @@ export declare class ExtensionManager implements IExtensionManager {
     designerCanvas: IDesignerCanvas;
     designItemsWithExtentions: Set<IDesignItem>;
     _timeout: ReturnType<typeof setTimeout>;
-    _appliedDesignerExtensions: WeakMap<DesignItem, Map<ExtensionType, IDesignerExtension[]>>;
-    _shouldAppliedDesignerExtensions: WeakMap<DesignItem, Map<ExtensionType, IDesignerExtensionProvider[]>>;
-    _lastApplyEventPerType: WeakMap<DesignItem, Map<ExtensionType, Event>>;
+    _appliedDesignerExtensions: WeakMap<IDesignItem, Map<ExtensionType, IDesignerExtension[]>>;
+    _shouldAppliedDesignerExtensions: WeakMap<IDesignItem, Map<ExtensionType, IDesignerExtensionProvider[]>>;
+    _lastApplyEventPerType: WeakMap<IDesignItem, Map<ExtensionType, Event>>;
     _lastPrimarySelectionRefreshItem: WeakRef<IDesignItem>;
     constructor(designerCanvas: IDesignerCanvas);
     connected(): void;

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

@@ -86,10 +86,11 @@ export class ExtensionManager {
     }
     _selectedElementsRefresh(selectionChangedEvent) {
         this.refreshAllAppliedExtentions(selectionChangedEvent.event);
-        if (selectionChangedEvent.selectedElements && selectionChangedEvent.selectedElements.length && (!this._lastPrimarySelectionRefreshItem || this._lastPrimarySelectionRefreshItem.deref() !== selectionChangedEvent.selectedElements[0])) {
-            this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelectionRefreshed, selectionChangedEvent.event);
-            this._lastPrimarySelectionRefreshItem = new WeakRef(selectionChangedEvent.selectedElements[0]);
+        if (selectionChangedEvent.selectedElements && selectionChangedEvent.selectedElements.length && this._lastPrimarySelectionRefreshItem?.deref() === selectionChangedEvent.selectedElements[0]) {
+            if (!this._appliedDesignerExtensions.get(selectionChangedEvent.selectedElements[0])?.get(ExtensionType.PrimarySelectionRefreshed))
+                this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelectionRefreshed, selectionChangedEvent.event);
         }
+        this._lastPrimarySelectionRefreshItem = new WeakRef(selectionChangedEvent.selectedElements[0]);
     }
     applyExtension(designItem, extensionType, event, recursive = false) {
         if (designItem && designItem.nodeType == NodeType.Element) {

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

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

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

@@ -5,6 +5,7 @@ export class PreviousElementSelectExtension extends AbstractExtension {
         super(extensionManager, designerView, extendedItem);
     }
     _rect;
+    _clickRect;
     _g;
     extend(cache, event) {
         this.refresh(cache, event);
@@ -12,9 +13,10 @@ export class PreviousElementSelectExtension extends AbstractExtension {
     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)) {
+            if (this._valuesHaveChanges(transformedCornerPoints[1].x, transformedCornerPoints[1].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);
+                this._clickRect = this._drawRect(transformedCornerPoints[1].x - (15 / this.designerCanvas.scaleFactor), transformedCornerPoints[1].y - (16.5 / this.designerCanvas.scaleFactor), h, h + 3, 'svg-invisible', this._clickRect);
                 if (!this._g) {
                     this._g = document.createElementNS("http://www.w3.org/2000/svg", "g");
                     this._g.setAttribute('class', 'svg-previous-select');
@@ -22,11 +24,15 @@ export class PreviousElementSelectExtension extends AbstractExtension {
                     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) => {
+                    this._clickRect.onpointerdown = (e) => {
                         e.preventDefault();
                         e.stopPropagation();
                         this.extendedItem.instanceServiceContainer.selectionService.setSelectedElements([this.extendedItem.parent]);
                     };
+                    this._clickRect.onpointermove = (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    };
                 }
                 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 + ')');
             }

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtension.d.ts

@@ -9,6 +9,7 @@ export declare class EditGridColumnRowSizesExtension extends AbstractExtension {
     private _initalPos;
     private _initialSizes;
     private _group;
+    private _hasChanged;
     constructor(extensionManager: IExtensionManager, designerView: 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/grid/EditGridColumnRowSizesExtension.js

@@ -10,6 +10,7 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
     _initalPos;
     _initialSizes;
     _group;
+    _hasChanged;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -57,29 +58,35 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
             case EventNames.PointerMove:
                 if (this._initialSizes) {
                     const diff = this._initalPos - pos;
-                    let parts = this._initialSizes.split(' ');
-                    parts[index] = (parseFloat(parts[index]) - diff) + 'px';
-                    parts[index + 1] = (parseFloat(parts[index + 1]) + diff) + 'px';
-                    this.extendedItem.element.style[templatePropertyName] = parts.join(' ');
-                    this.extensionManager.refreshExtensions([this.extendedItem], null, event);
+                    if (Math.abs(diff) > 5 || this._hasChanged) {
+                        this._hasChanged = true;
+                        let parts = this._initialSizes.split(' ');
+                        parts[index] = (parseFloat(parts[index]) - diff) + 'px';
+                        parts[index + 1] = (parseFloat(parts[index + 1]) + diff) + 'px';
+                        this.extendedItem.element.style[templatePropertyName] = parts.join(' ');
+                        this.extensionManager.refreshExtensions([this.extendedItem], null, event);
+                    }
                 }
                 break;
             case EventNames.PointerUp:
                 rect.releasePointerCapture(event.pointerId);
                 const diff = this._initalPos - pos;
-                const realStyle = this.extendedItem.getStyleFromSheetOrLocalOrComputed(templatePropertyName);
-                const initialParts = this._initialSizes.split(' ');
-                const parts = realStyle.split(' ');
-                let units = parts.map(x => getCssUnit(x));
-                if (parts.length != initialParts.length) {
-                    units = initialParts.map(x => getCssUnit(x));
+                if (this._hasChanged) {
+                    this._hasChanged = false;
+                    const realStyle = this.extendedItem.getStyleFromSheetOrLocalOrComputed(templatePropertyName);
+                    const initialParts = this._initialSizes.split(' ');
+                    const parts = realStyle.split(' ');
+                    let units = parts.map(x => getCssUnit(x));
+                    if (parts.length != initialParts.length) {
+                        units = initialParts.map(x => getCssUnit(x));
+                    }
+                    this.extendedItem.element.style[templatePropertyName] = '';
+                    const targetPixelSizes = initialParts.map(x => parseFloat(x));
+                    targetPixelSizes[index] -= diff;
+                    targetPixelSizes[index + 1] += diff;
+                    const newSizes = this._convertCssUnits(targetPixelSizes, units, this.extendedItem.element, sizeType);
+                    this.extendedItem.updateStyleInSheetOrLocal(templatePropertyName, newSizes.join(' '), null, true);
                 }
-                this.extendedItem.element.style[templatePropertyName] = '';
-                const targetPixelSizes = initialParts.map(x => parseFloat(x));
-                targetPixelSizes[index] -= diff;
-                targetPixelSizes[index + 1] += diff;
-                const newSizes = this._convertCssUnits(targetPixelSizes, units, this.extendedItem.element, sizeType);
-                this.extendedItem.updateStyleInSheetOrLocal(templatePropertyName, newSizes.join(' '), null, true);
                 this._initalPos = null;
                 this._initialSizes = null;
                 this.extensionManager.refreshExtensions([this.extendedItem]);

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

@@ -15,11 +15,12 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
       overflow: visible;
     }
 
+    .svg-invisible { stroke: transparent; fill: transparent; pointer-events: all; }
     .svg-snapline { stroke: purple; stroke-dasharray: 4; fill: transparent; }
     .svg-selector { stroke: black; fill: #3899ec55; stroke-width: 1; stroke-dasharray: 2; }
-    .svg-primary-selection-move { stroke: #3899ec; fill: #3899ec; cursor: move; pointer-events: all }
+    .svg-primary-selection-move { stroke: #3899ec; fill: #3899ec; cursor: move; pointer-events: all; }
     .svg-position  { stroke: black; stroke-dasharray: 2; }
-    .svg-path { stroke: #3899ec; fill: orange; pointer-events: all }
+    .svg-path { stroke: #3899ec; fill: orange; pointer-events: all; }
     .svg-path-line { stroke: #3899ec; stroke-dasharray: 2; }
     .svg-draw-new-element { stroke: black; fill: transparent; stroke-width: 1; }
     .svg-toolbar-container { overflow: visible }

package/package.json

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