@node-projects/web-component-designer 0.1.156 → 0.1.158

package/dist/elements/helper/CssUnitConverter.d.ts

@@ -1,3 +1,5 @@
 export declare function convertCssUnitToPixel(cssValue: string, target: HTMLElement, percentTarget: 'width' | 'height'): number;
 export declare function getCssUnit(cssValue: string): string;
 export declare function convertCssUnit(cssValue: string | number, target: HTMLElement, percentTarget: 'width' | 'height', unit: string): string;
+export declare function splitCssGridColumnSizes(sizes: String): string[];
+export declare function getExpandedCssGridColumnSizes(sizes: String): string[];

package/dist/elements/helper/CssUnitConverter.js

@@ -102,3 +102,34 @@ export function convertCssUnit(cssValue, target, percentTarget, unit) {
 function getOriginalSizeBeforeTransformation(element) {
     return { width: element.offsetWidth, height: element.offsetHeight };
 }
+export function splitCssGridColumnSizes(sizes) {
+    const parts = sizes.split(' ');
+    const ret = [];
+    for (let i = 0; i < parts.length; i++) {
+        let p = parts[i];
+        if (p.startsWith('repeat(')) {
+            while (!p.includes(")")) {
+                i++;
+                if (!parts[i])
+                    continue;
+                p += parts[i];
+            }
+        }
+        ret.push(p);
+    }
+    return ret;
+}
+export function getExpandedCssGridColumnSizes(sizes) {
+    const parts = splitCssGridColumnSizes(sizes);
+    const ret = [];
+    for (let p of parts) {
+        if (p.startsWith('repeat(')) {
+            const prt = p.split(',');
+            for (let i = 0; i < parseInt(prt[0].substring(7)); i++)
+                ret.push(prt[1].substring(0, prt[1].length - 1));
+        }
+        else
+            ret.push(p);
+    }
+    return ret.map(x => getCssUnit(x));
+}

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/services/propertiesService/services/NativeElementsPropertiesService.js

@@ -149,6 +149,12 @@ export class NativeElementsPropertiesService extends AbstractPropertiesService {
             type: "string",
             service: this,
             propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "alt",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
         }
     ];
     iframeProperties = [

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.js

@@ -1,5 +1,5 @@
 import { EventNames } from "../../../../../enums/EventNames.js";
-import { convertCssUnit, convertCssUnitToPixel, getCssUnit } from "../../../../helper/CssUnitConverter.js";
+import { convertCssUnit, convertCssUnitToPixel, getCssUnit, getExpandedCssGridColumnSizes } from "../../../../helper/CssUnitConverter.js";
 import { calculateGridInformation } from "../../../../helper/GridHelper.js";
 import { getElementCombinedTransform } from "../../../../helper/TransformHelper.js";
 import { AbstractExtension } from '../AbstractExtension.js';
@@ -75,9 +75,8 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
                     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) {
+                    let units = getExpandedCssGridColumnSizes(realStyle);
+                    if (units.length != initialParts.length) {
                         units = initialParts.map(x => getCssUnit(x));
                     }
                     this.extendedItem.element.style[templatePropertyName] = '';

package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtension.js

@@ -65,15 +65,15 @@ export class GridToolbarExtension extends BasicStackedToolbarExtension {
                 if (!rows)
                     return;
                 const cg = this.extendedItem.openGroup('change grid type');
-                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-columns', '1fr '.repeat(parseInt(columns)).trim());
-                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-rows', '1fr '.repeat(parseInt(rows)).trim());
+                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-columns', 'repeat(' + columns + ', 1fr)');
+                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-rows', 'repeat(' + rows + ', 1fr)');
                 cg.commit();
             }
             else {
                 const parts = gridTypeEl.value.split('x');
                 const cg = this.extendedItem.openGroup('change grid type');
-                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-columns', '1fr '.repeat(parseInt(parts[0])).trim());
-                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-rows', '1fr '.repeat(parseInt(parts[1])).trim());
+                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-columns', 'repeat(' + parts[0] + ', 1fr)');
+                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-rows', 'repeat(' + parts[1] + ', 1fr)');
                 cg.commit();
             }
         };

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.156",
+  "version": "0.1.158",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",