@node-projects/web-component-designer 0.0.196 → 0.0.198

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -78,6 +78,7 @@ import { StylesheetServiceDesignViewConfigButtons } from '../widgets/designerVie
 import { JumpToElementContextMenu } from '../widgets/designerView/extensions/contextMenu/JumpToElementContextMenu.js';
 import { EditGridExtensionProvider } from '../widgets/designerView/extensions/grid/EditGridExtensionProvider.js';
 import { DisplayGridExtensionProvider } from '../widgets/designerView/extensions/grid/DisplayGridExtensionProvider.js';
+import { ApplyFirstMachingExtensionProvider } from '../widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -140,13 +141,11 @@ export function createDefaultServiceContainer() {
         new GrayOutExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.ContainerDragOver, [
-        new GrayOutDragOverContainerExtensionProvider(),
-        new AltToEnterContainerExtensionProvider(),
-        new DisplayGridExtensionProvider()
+        new ApplyFirstMachingExtensionProvider(new DisplayGridExtensionProvider(), new GrayOutDragOverContainerExtensionProvider()),
+        new AltToEnterContainerExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.ContainerExternalDragOver, [
-        new GrayOutDragOverContainerExtensionProvider(),
-        new DisplayGridExtensionProvider()
+        new ApplyFirstMachingExtensionProvider(new DisplayGridExtensionProvider(), new GrayOutDragOverContainerExtensionProvider()),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.Doubleclick, [
         new EditTextExtensionProvider()

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

@@ -48,7 +48,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;
     elementFromPoint(x: number, y: number): Element;
     elementsFromPoint(x: number, y: number): Element[];
-    showHoverExtension(element: Element): any;
+    showHoverExtension(element: Element, event: Event): any;
     zoomTowardsPoint(point: IPoint, scalechange: number): void;
     zoomPoint(canvasPoint: IPoint, newZoom: number): void;
     zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;

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

@@ -113,7 +113,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     elementFromPoint(x: number, y: number): Element;
     elementsFromPoint(x: number, y: number): Element[];
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
-    showHoverExtension(element: Element): void;
+    showHoverExtension(element: Element, event: Event): void;
     private _pointerEventHandler;
     captureActiveTool(tool: ITool): void;
     releaseActiveTool(): void;

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

@@ -609,9 +609,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 let [newContainer] = this._getPossibleContainerForDrop(event);
                 if (this._dragOverExtensionItem != newContainer) {
                     this.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
-                    this.extensionManager.applyExtension(newContainer, ExtensionType.ContainerExternalDragOver);
+                    this.extensionManager.applyExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
                     this._dragOverExtensionItem = newContainer;
                 }
+                else {
+                    this.extensionManager.refreshExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
+                }
             }
         }
     }
@@ -710,7 +713,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     _onDblClick(event) {
         event.preventDefault();
-        this.extensionManager.applyExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.Doubleclick);
+        this.extensionManager.applyExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.Doubleclick, event);
     }
     onKeyUp(event) {
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
@@ -883,13 +886,13 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         return currentElement;
     }
-    showHoverExtension(element) {
+    showHoverExtension(element, event) {
         const currentDesignItem = DesignItem.GetOrCreateDesignItem(element, this.serviceContainer, this.instanceServiceContainer);
         if (this._lastHoverDesignItem != currentDesignItem) {
             if (this._lastHoverDesignItem)
                 this.extensionManager.removeExtension(this._lastHoverDesignItem, ExtensionType.MouseOver);
             if (currentDesignItem && currentDesignItem != this.rootDesignItem && DomHelper.getHost(element.parentNode) !== this.overlayLayer)
-                this.extensionManager.applyExtension(currentDesignItem, ExtensionType.MouseOver);
+                this.extensionManager.applyExtension(currentDesignItem, ExtensionType.MouseOver, event);
             this._lastHoverDesignItem = currentDesignItem;
         }
     }
@@ -928,7 +931,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         this.clickOverlay.style.cursor = this._canvas.style.cursor;
         const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, this.serviceContainer, this.instanceServiceContainer);
-        this.showHoverExtension(currentDesignItem.element);
+        this.showHoverExtension(currentDesignItem.element, event);
         //TODO: needed ??
         if (currentElement && DomHelper.getHost(currentElement.parentNode) === this.overlayLayer) {
             if (this.eatEvents)

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

@@ -9,13 +9,13 @@ export declare class ExtensionManager implements IExtensionManager {
     constructor(designerCanvas: IDesignerCanvas);
     private _contentChanged;
     private _selectedElementsChanged;
-    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, recursive?: boolean): IDesignerExtension[];
-    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, recursive?: boolean): void;
+    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, event?: Event, recursive?: boolean): IDesignerExtension[];
+    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, event?: Event, recursive?: boolean): void;
     removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
-    removeExtensions(designItems: IDesignItem[], includeChildren: boolean, extensionType?: ExtensionType): void;
-    refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
-    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, ignoredExtension?: any): void;
-    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: any): void;
+    removeExtensions(designItems: IDesignItem[], recursive: boolean, extensionType?: ExtensionType): void;
+    refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType, event?: Event): void;
+    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, event?: Event, ignoredExtension?: IDesignerExtension): void;
+    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension): void;
     refreshAllAppliedExtentions(): void;
     reapplyAllAppliedExtentions(): void;
     private static getAllChildElements;

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

@@ -13,13 +13,13 @@ export class ExtensionManager {
         requestAnimationFrame(() => {
             switch (contentChanged.changeType) {
                 case 'added':
-                    this.applyExtensions(contentChanged.designItems, ExtensionType.Permanent, true);
+                    this.applyExtensions(contentChanged.designItems, ExtensionType.Permanent, null, true);
                     break;
                 case 'moved':
                     this.refreshExtensions(contentChanged.designItems, ExtensionType.Permanent);
                     break;
                 case 'parsed':
-                    this.applyExtensions(Array.from(this.designerCanvas.rootDesignItem.children()), ExtensionType.Permanent, true);
+                    this.applyExtensions(Array.from(this.designerCanvas.rootDesignItem.children()), ExtensionType.Permanent, null, true);
                     break;
                 case 'removed':
                     this.removeExtensions(contentChanged.designItems, true, ExtensionType.Permanent);
@@ -44,7 +44,7 @@ export class ExtensionManager {
         }
         //this.refreshExtensions(selectionChangedEvent.selectedElements);
     }
-    applyExtension(designItem, extensionType, recursive = false) {
+    applyExtension(designItem, extensionType, event, recursive = false) {
         if (designItem && designItem.nodeType == NodeType.Element) {
             const extProv = this.designerCanvas.serviceContainer.designerExtensions.get(extensionType);
             let extensions = [];
@@ -61,7 +61,7 @@ export class ExtensionManager {
                             appE = [];
                         const ext = e.getExtension(this, this.designerCanvas, designItem);
                         try {
-                            ext.extend();
+                            ext.extend(event);
                             extensions.push(ext);
                         }
                         catch (err) {
@@ -75,14 +75,14 @@ export class ExtensionManager {
             }
             if (recursive) {
                 for (const d of designItem.children()) {
-                    this.applyExtension(d, extensionType, recursive);
+                    this.applyExtension(d, extensionType, event, recursive);
                 }
             }
             return extensions;
         }
         return null;
     }
-    applyExtensions(designItems, extensionType, recursive = false) {
+    applyExtensions(designItems, extensionType, event, recursive = false) {
         if (designItems) {
             const extProv = this.designerCanvas.serviceContainer.designerExtensions.get(extensionType);
             if (extProv) {
@@ -93,13 +93,13 @@ export class ExtensionManager {
                             shouldAppE = [];
                         shouldAppE.push(e);
                         i.shouldAppliedDesignerExtensions.set(extensionType, shouldAppE);
-                        if ( /*i.nodeType == NodeType.Element &&*/e.shouldExtend(this, this.designerCanvas, i)) {
+                        if (e.shouldExtend(this, this.designerCanvas, i)) {
                             let appE = i.appliedDesignerExtensions.get(extensionType);
                             if (!appE)
                                 appE = [];
                             const ext = e.getExtension(this, this.designerCanvas, i);
                             try {
-                                ext.extend();
+                                ext.extend(event);
                             }
                             catch (err) {
                                 console.error(err);
@@ -113,7 +113,7 @@ export class ExtensionManager {
             }
             if (recursive) {
                 for (const d of designItems) {
-                    this.applyExtensions(Array.from(d.children()), extensionType, recursive);
+                    this.applyExtensions(Array.from(d.children()), extensionType, event, recursive);
                 }
             }
         }
@@ -154,11 +154,11 @@ export class ExtensionManager {
             }
         }
     }
-    removeExtensions(designItems, includeChildren, extensionType) {
+    removeExtensions(designItems, recursive, extensionType) {
         if (designItems) {
             if (extensionType) {
                 for (let i of designItems) {
-                    if (includeChildren && i.hasChildren) {
+                    if (recursive && i.hasChildren) {
                         this.removeExtensions([...i.children()], true, extensionType);
                     }
                     i.shouldAppliedDesignerExtensions.delete(extensionType);
@@ -180,7 +180,7 @@ export class ExtensionManager {
             }
             else {
                 for (let i of designItems) {
-                    if (includeChildren && i.hasChildren) {
+                    if (recursive && i.hasChildren) {
                         this.removeExtensions([...i.children()], true, extensionType);
                     }
                     i.shouldAppliedDesignerExtensions.clear();
@@ -200,14 +200,14 @@ export class ExtensionManager {
             }
         }
     }
-    refreshExtension(designItem, extensionType) {
+    refreshExtension(designItem, extensionType, event) {
         if (designItem) {
             if (extensionType) {
                 let exts = designItem.appliedDesignerExtensions.get(extensionType);
                 if (exts) {
                     for (let e of exts) {
                         try {
-                            e.refresh();
+                            e.refresh(event);
                         }
                         catch (err) {
                             console.error(err);
@@ -219,7 +219,7 @@ export class ExtensionManager {
                 for (let appE of designItem.appliedDesignerExtensions) {
                     for (let e of appE[1]) {
                         try {
-                            e.refresh();
+                            e.refresh(event);
                         }
                         catch (err) {
                             console.error(err);
@@ -229,7 +229,7 @@ export class ExtensionManager {
             }
         }
     }
-    refreshExtensions(designItems, extensionType, ignoredExtension) {
+    refreshExtensions(designItems, extensionType, event, ignoredExtension) {
         if (designItems) {
             if (extensionType) {
                 for (let i of designItems) {
@@ -238,7 +238,7 @@ export class ExtensionManager {
                         for (let e of exts) {
                             try {
                                 if (e != ignoredExtension)
-                                    e.refresh();
+                                    e.refresh(event);
                             }
                             catch (err) {
                                 console.error(err);
@@ -253,7 +253,7 @@ export class ExtensionManager {
                         for (let e of appE[1]) {
                             try {
                                 if (e != ignoredExtension)
-                                    e.refresh();
+                                    e.refresh(event);
                             }
                             catch (err) {
                                 console.error(err);
@@ -266,17 +266,17 @@ export class ExtensionManager {
     }
     refreshAllExtensions(designItems, ignoredExtension) {
         if (designItems) {
-            this.refreshExtensions(designItems, ExtensionType.Permanent, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.Selection, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.PrimarySelection, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainer, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.MouseOver, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.OnlyOneItemSelected, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.MultipleItemsSelected, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.ContainerDragOver, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.ContainerDrag, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.Doubleclick, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.Placement, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Permanent, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Selection, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelection, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainer, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.MouseOver, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.OnlyOneItemSelected, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.MultipleItemsSelected, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.ContainerDragOver, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.ContainerDrag, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Doubleclick, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Placement, null, ignoredExtension);
         }
     }
     refreshAllAppliedExtentions() {

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

@@ -4,7 +4,7 @@ import { IDesignerCanvas } from '../IDesignerCanvas.js';
 import { IDesignerExtension } from './IDesignerExtension.js';
 import { IExtensionManager } from './IExtensionManger.js';
 export declare class GrayOutDragOverContainerExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
     readonly style: CSSStyleSheet;
 }

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

@@ -1,7 +1,7 @@
 import { css } from "@node-projects/base-custom-webcomponent";
 import { GrayOutDragOverContainerExtension } from "./GrayOutDragOverContainerExtension.js";
 export class GrayOutDragOverContainerExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
         return true;
     }
     getExtension(extensionManager, designerView, designItem) {

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

@@ -1,5 +1,5 @@
 import { IDisposable } from '../../../../interfaces/IDisposable.js';
 export interface IDesignerExtension extends IDisposable {
-    extend(): any;
-    refresh(): any;
+    extend(event?: Event): any;
+    refresh(event?: Event): any;
 }

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

@@ -5,5 +5,5 @@ import { IExtensionManager } from './IExtensionManger.js';
 export interface IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    style?: CSSStyleSheet;
+    style?: CSSStyleSheet | CSSStyleSheet[];
 }

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

@@ -2,13 +2,13 @@ import { IDesignItem } from '../../../item/IDesignItem.js';
 import { ExtensionType } from './ExtensionType.js';
 import { IDesignerExtension } from './IDesignerExtension.js';
 export interface IExtensionManager {
-    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, recursive?: boolean): IDesignerExtension[];
-    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, recursive?: boolean): any;
+    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, event?: Event, recursive?: boolean): IDesignerExtension[];
+    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, event?: Event, recursive?: boolean): any;
     removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
-    removeExtensions(designItems: IDesignItem[], includeChildren: boolean, extensionType?: ExtensionType): any;
-    refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
-    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): any;
-    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: any): any;
+    removeExtensions(designItems: IDesignItem[], recursive: boolean, extensionType?: ExtensionType): any;
+    refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType, event?: Event): any;
+    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, event?: Event): any;
+    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension): any;
     refreshAllAppliedExtentions(): any;
     reapplyAllAppliedExtentions(): any;
 }

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

@@ -7,8 +7,8 @@ export declare class DisplayGridExtension extends AbstractExtension {
     private _gaps;
     private gridInformation;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
+    extend(event?: Event): void;
+    refresh(event?: Event): void;
     dispose(): void;
     _initSVGArrays(): void;
 }

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

@@ -8,11 +8,11 @@ export class DisplayGridExtension extends AbstractExtension {
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
-    extend() {
+    extend(event) {
         this._initSVGArrays();
-        this.refresh();
+        this.refresh(event);
     }
-    refresh() {
+    refresh(event) {
         this.gridInformation = CalculateGridInformation(this.extendedItem);
         let cells = this.gridInformation.cells;
         if (cells[0][0] && !isNaN(cells[0][0].height) && !isNaN(cells[0][0].width)) {
@@ -30,6 +30,12 @@ export class DisplayGridExtension extends AbstractExtension {
                         const text = this._drawText(cell.name, cell.x, cell.y, 'svg-grid-area', null, OverlayLayer.Background);
                         text.setAttribute("dominant-baseline", "hanging");
                     }
+                    if (event && event instanceof MouseEvent) {
+                        let crd = this.designerCanvas.getNormalizedEventCoordinates(event);
+                        if (crd.x >= cell.x && crd.y >= cell.y && crd.x <= cell.x + cell.width && crd.y <= cell.y + cell.height) {
+                            this._cells[i][j].setAttribute("class", "svg-grid-current-cell");
+                        }
+                    }
                 });
             });
         }

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

@@ -13,6 +13,7 @@ export class DisplayGridExtensionProvider {
     }
     style = css `
     .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
+    .svg-grid-current-cell { stroke: orange; stroke-dasharray: 5; fill: #e3ff4722; }
     .svg-grid-area { font-size: 8px; }
     .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
     .svg-grid-resizer { fill: white; stroke: #3899ec; }

package/dist/elements/widgets/designerView/extensions/logic/ApplyFirstExtensionProvider.d.ts

@@ -0,0 +1,12 @@
+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 ApplyFirstMachingExtensionProvider implements IDesignerExtensionProvider {
+    private extensions;
+    private extIndex;
+    constructor(...extensions: IDesignerExtensionProvider[]);
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

package/dist/elements/widgets/designerView/extensions/logic/ApplyFirstExtensionProvider.js

@@ -0,0 +1,17 @@
+export class ApplyFirstMachingExtensionProvider {
+    extensions;
+    extIndex;
+    constructor(...extensions) {
+        this.extensions = extensions;
+    }
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        for (this.extIndex = 0; this.extIndex++; this.extIndex < this.extensions.length) {
+            if (this.extensions[this.extIndex].shouldExtend(extensionManager, designerCanvas, designItem))
+                return true;
+        }
+        return false;
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return this.extensions[this.extIndex].getExtension(extensionManager, designerCanvas, designItem);
+    }
+}

package/dist/elements/widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.d.ts

@@ -0,0 +1,13 @@
+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 ApplyFirstMachingExtensionProvider implements IDesignerExtensionProvider {
+    private extensions;
+    private extIndex;
+    style: CSSStyleSheet[];
+    constructor(...extensions: IDesignerExtensionProvider[]);
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

package/dist/elements/widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.js

@@ -0,0 +1,28 @@
+export class ApplyFirstMachingExtensionProvider {
+    extensions;
+    extIndex;
+    style;
+    constructor(...extensions) {
+        this.extensions = extensions;
+        for (let e of extensions) {
+            if (e.style) {
+                if (!this.style)
+                    this.style = [];
+                if (Array.isArray(e.style))
+                    this.style.push(...e.style);
+                else
+                    this.style.push(e.style);
+            }
+        }
+    }
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        for (this.extIndex = 0; this.extIndex < this.extensions.length; this.extIndex++) {
+            if (this.extensions[this.extIndex].shouldExtend(extensionManager, designerCanvas, designItem))
+                return true;
+        }
+        return false;
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return this.extensions[this.extIndex].getExtension(extensionManager, designerCanvas, designItem);
+    }
+}

package/dist/elements/widgets/designerView/extensions/logic/DisplayGridExtensionProvider.d.ts

@@ -0,0 +1,11 @@
+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 const gridExtensionShowOverlayOptionName = "gridExtensionShowOverlay";
+export declare class DisplayGridExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/logic/DisplayGridExtensionProvider.js

@@ -0,0 +1,23 @@
+import { css } from "@node-projects/base-custom-webcomponent";
+import { DisplayGridExtension } from './DisplayGridExtension.js';
+export const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
+export class DisplayGridExtensionProvider {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        const display = getComputedStyle(designItem.element).display;
+        if (display == 'grid' || display == 'inline-grid')
+            return designerCanvas.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
+        return false;
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new DisplayGridExtension(extensionManager, designerCanvas, designItem);
+    }
+    style = css `
+    .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
+    .svg-grid-current-cell { stroke: orange; stroke-dasharray: 5; fill: #e3ff4722; }
+    .svg-grid-area { font-size: 8px; }
+    .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
+    .svg-grid-resizer { fill: white; stroke: #3899ec; }
+    .svg-grid-header { fill: #ff944722; stroke: orange; }
+    .svg-grid-plus-sign { stroke: black; }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/logic/OrCombineContainerProvider.d.ts

@@ -0,0 +1,12 @@
+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 ApplyFirstExtensionProvider implements IDesignerExtensionProvider {
+    private extensions;
+    private extIndex;
+    constructor(...extensions: IDesignerExtensionProvider[]);
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

package/dist/elements/widgets/designerView/extensions/logic/OrCombineContainerProvider.js

@@ -0,0 +1,17 @@
+export class ApplyFirstExtensionProvider {
+    extensions;
+    extIndex;
+    constructor(...extensions) {
+        this.extensions = extensions;
+    }
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        for (this.extIndex = 0; this.extIndex++; this.extIndex < this.extensions.length) {
+            if (this.extensions[this.extIndex].shouldExtend(extensionManager, designerCanvas, designItem))
+                return true;
+        }
+        return false;
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return this.extensions[this.extIndex].getExtension(extensionManager, designerCanvas, designItem);
+    }
+}

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

@@ -45,7 +45,10 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         for (const extList of this._serviceContainer.designerExtensions) {
             for (const ext of extList[1]) {
                 if (ext.style) {
-                    styles.push(ext.style);
+                    if (Array.isArray(ext.style))
+                        styles.push(...ext.style);
+                    else
+                        styles.push(ext.style);
                 }
             }
         }

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

@@ -234,7 +234,7 @@ export class PointerTool {
                             const dragItem = this._actionStartedDesignItem.parent;
                             if (this._dragExtensionItem != dragItem) {
                                 designerCanvas.extensionManager.removeExtension(this._dragExtensionItem, ExtensionType.ContainerDrag);
-                                designerCanvas.extensionManager.applyExtension(dragItem, ExtensionType.ContainerDrag);
+                                designerCanvas.extensionManager.applyExtension(dragItem, ExtensionType.ContainerDrag, event);
                                 this._dragExtensionItem = dragItem;
                             }
                             else {
@@ -249,11 +249,11 @@ export class PointerTool {
                                 if (newContainerElementDesignItem != null) {
                                     if (this._dragOverExtensionItem != newContainerElementDesignItem) {
                                         designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
-                                        designerCanvas.extensionManager.applyExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOver);
+                                        designerCanvas.extensionManager.applyExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOver, event);
                                         this._dragOverExtensionItem = newContainerElementDesignItem;
                                     }
                                     else {
-                                        designerCanvas.extensionManager.refreshExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOver);
+                                        designerCanvas.extensionManager.refreshExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOver, event);
                                     }
                                 }
                                 else {
@@ -281,14 +281,14 @@ export class PointerTool {
                                     for (const item of this._actionStartedDesignItems) {
                                         designerCanvas.extensionManager.removeExtension(item, ExtensionType.Placement);
                                         designerCanvas.extensionManager.removeExtension(item, ExtensionType.MouseOver);
-                                        designerCanvas.extensionManager.applyExtension(item, ExtensionType.Placement);
+                                        designerCanvas.extensionManager.applyExtension(item, ExtensionType.Placement, event);
                                     }
                                     currentContainerService.startPlace(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
                                     this._started = true;
                                 }
                                 currentContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
                             }
-                            designerCanvas.extensionManager.refreshExtensions(this._actionStartedDesignItems);
+                            designerCanvas.extensionManager.refreshExtensions(this._actionStartedDesignItems, null, event);
                         }
                     }
                     break;
@@ -316,7 +316,7 @@ export class PointerTool {
                             this._changeGroup.commit();
                             this._changeGroup = null;
                             for (const item of this._actionStartedDesignItems) {
-                                designerCanvas.extensionManager.applyExtension(item, ExtensionType.MouseOver);
+                                designerCanvas.extensionManager.applyExtension(item, ExtensionType.MouseOver, event);
                                 designerCanvas.extensionManager.removeExtension(item, ExtensionType.Placement);
                             }
                         }
@@ -326,7 +326,7 @@ export class PointerTool {
                         this._dragOverExtensionItem = null;
                         this._moveItemsOffset = { x: 0, y: 0 };
                     }
-                    designerCanvas.extensionManager.refreshExtensions(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                    designerCanvas.extensionManager.refreshExtensions(designerCanvas.instanceServiceContainer.selectionService.selectedElements, null, event);
                     if (this._changeGroup) {
                         this._changeGroup.abort();
                         this._changeGroup = null;

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

@@ -31,7 +31,7 @@ export class TextTool {
                     //todo: Maybe we could also remove the eatEvents property
                     //TODO - don't apply doubleclick extension (maybe it is not the doubleclick one) - apply edit text extesion directly
                     //should we configure the editTextExtension anywhere??
-                    this._textEditExtensions = designerCanvas.extensionManager.applyExtension(di, ExtensionType.Doubleclick);
+                    this._textEditExtensions = designerCanvas.extensionManager.applyExtension(di, ExtensionType.Doubleclick, event);
                     setTimeout(() => { span.focus(); }, 50);
                 }
                 else {

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

@@ -23,7 +23,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     .content-wrapper {
       padding: .5em;
       display: grid;
-      grid-template-columns: 11px auto minmax(80px, 1fr);
+      grid-template-columns: 11px auto minmax(80px, min-content);
       align-items: center;
       grid-auto-rows: minmax(24px, auto);
       align-items: center;
@@ -41,7 +41,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
       box-sizing: border-box;
       display: inline-block;
       font-size: 13px;
-      width: 110px;
+      width: auto;
       overflow: hidden;
       text-overflow: ellipsis;
       margin-right: 2px;

package/dist/elements/widgets/treeView/treeViewExtended.js

@@ -205,8 +205,8 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
                     let designItem = node.data.ref;
                     node.tr.oncontextmenu = (e) => this.showDesignItemContextMenu(designItem, e);
                     if (designItem && designItem.nodeType === NodeType.Element && designItem !== designItem.instanceServiceContainer.contentService.rootDesignItem) {
-                        node.tr.onmouseenter = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(designItem.element);
-                        node.tr.onmouseleave = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(null);
+                        node.tr.onmouseenter = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(designItem.element, e);
+                        node.tr.onmouseleave = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(null, e);
                         let d = document.createElement("div");
                         d.className = "cmd";
                         let imgL = document.createElement('img');

package/dist/index.d.ts

@@ -196,6 +196,7 @@ export * from "./elements/widgets/designerView/extensions/grid/EditGridExtension
 export * from "./elements/widgets/designerView/extensions/grid/EditGridExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/grid/DisplayGridExtension.js";
 export * from "./elements/widgets/designerView/extensions/grid/DisplayGridExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.js";

package/dist/index.js

@@ -150,6 +150,7 @@ export * from "./elements/widgets/designerView/extensions/grid/EditGridExtension
 export * from "./elements/widgets/designerView/extensions/grid/EditGridExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/grid/DisplayGridExtension.js";
 export * from "./elements/widgets/designerView/extensions/grid/DisplayGridExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.196",
+  "version": "0.0.198",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -17,21 +17,21 @@
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {
-    "@adobe/css-tools": "^4.1.0",
+    "@adobe/css-tools": "^4.2.0",
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^2.5.1",
     "@papyrs/stylo": "^0.0.42",
     "@types/codemirror": "^5.60.7",
-    "@types/css-tree": "^2.3.0",
+    "@types/css-tree": "^2.3.1",
     "@types/jquery": "^3.5.16",
     "@types/jquery.fancytree": "0.0.7",
-    "@types/node": "^18.13.0",
-    "ace-builds": "^1.15.0",
+    "@types/node": "^18.14.0",
+    "ace-builds": "^1.15.2",
     "codemirror": "^6.0.1",
     "css-tree": "^2.3.1",
     "esprima-next": "^5.8.4",
     "html2canvas": "*",
-    "jest": "^29.4.2",
+    "jest": "^29.4.3",
     "jquery": "^3.6.3",
     "jquery.fancytree": "^2.38.3",
     "mdn-data": "^2.0.31",