@node-projects/web-component-designer 0.1.75 → 0.1.77

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

@@ -13,7 +13,7 @@ export class DefaultPlacementService {
     isEnterableContainer(container) {
         if (DomConverter.IsSelfClosingElement(container.element.localName))
             return false;
-        if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
+        if (!container.isRootItem && container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
             return false;
         return true;
     }

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

@@ -84,6 +84,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     handleDeleteCommand(): void;
     initialize(serviceContainer: ServiceContainer): void;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     private _zoomFactorChanged;
     private _resizeBackgroundGrid;
     private _updateTransform;

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

@@ -631,6 +631,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.clickOverlay.addEventListener(EventNames.KeyUp, this.onKeyUp, true);
             this.clickOverlay.addEventListener(EventNames.DblClick, this._onDblClick, true);
         }
+        this.extensionManager.connected();
+    }
+    disconnectedCallback() {
+        this.extensionManager.disconnected();
     }
     _zoomFactorChanged(refreshExtensions = true) {
         //a@ts-ignore

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

@@ -19,7 +19,7 @@ export class ElementDragTitleExtension extends AbstractExtension {
             let text = this.extendedItem.name;
             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('<span style="width: 100%;position: absolute;overflow: hidden;text-overflow: ellipsis;">' + text + '</span>', (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('<span style="width: 100%; position: absolute; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">' + text + '</span>', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-text-primary', this._text);
             this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
             this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
             this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));

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

@@ -6,7 +6,10 @@ import { IDesignerExtension } from './IDesignerExtension.js';
 export declare class ExtensionManager implements IExtensionManager {
     designerCanvas: IDesignerCanvas;
     designItemsWithExtentions: Set<IDesignItem>;
+    _timeout: ReturnType<typeof setTimeout>;
     constructor(designerCanvas: IDesignerCanvas);
+    connected(): void;
+    disconnected(): void;
     private refreshAllExtensionsTimeout;
     private _contentChanged;
     private _selectedElementsChanged;

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

@@ -4,15 +4,24 @@ import { ExtensionType } from './ExtensionType.js';
 export class ExtensionManager {
     designerCanvas;
     designItemsWithExtentions = new Set();
+    _timeout;
     constructor(designerCanvas) {
         this.designerCanvas = designerCanvas;
         designerCanvas.instanceServiceContainer.selectionService.onSelectionChanged.on(this._selectedElementsChanged.bind(this));
         designerCanvas.instanceServiceContainer.contentService.onContentChanged.on(this._contentChanged.bind(this));
-        setTimeout(() => this.refreshAllExtensionsTimeout(), 20);
+    }
+    connected() {
+        if (!this._timeout)
+            this._timeout = setTimeout(() => this.refreshAllExtensionsTimeout(), 20);
+    }
+    disconnected() {
+        if (this._timeout)
+            clearTimeout(this._timeout);
+        this._timeout = null;
     }
     refreshAllExtensionsTimeout() {
         this.refreshAllAppliedExtentions();
-        setTimeout(() => this.refreshAllExtensionsTimeout(), 20);
+        this._timeout = setTimeout(() => this.refreshAllExtensionsTimeout(), 20);
     }
     _contentChanged(contentChanged) {
         requestAnimationFrame(() => {

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

@@ -12,4 +12,6 @@ export interface IExtensionManager {
     refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension): any;
     refreshAllAppliedExtentions(): any;
     reapplyAllAppliedExtentions(): any;
+    connected(): any;
+    disconnected(): any;
 }

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

@@ -14,14 +14,14 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
         super(extensionManager, designerView, extendedItem);
     }
     extend(cache, event) {
-        this.refresh(event);
-    }
-    refresh(cache, event) {
-        this.gridInformation = calculateGridInformation(this.extendedItem);
         this._group = this._drawGroup(null, this._group, OverlayLayer.Background);
         this._group.style.transform = getElementCombinedTransform(this.extendedItem.element).toString();
         this._group.style.transformOrigin = '0 0';
         this._group.style.transformBox = 'fill-box';
+        this.refresh(event);
+    }
+    refresh(cache, event) {
+        this.gridInformation = calculateGridInformation(this.extendedItem);
         this.gridInformation.gaps.forEach((gap, i) => {
             if (gap.width < 3) {
                 gap.width = 3;
@@ -32,12 +32,12 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
                 gap.y--;
             }
             let rect = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-resizer-' + gap.type, this._resizers[i], OverlayLayer.Normal);
-            this._group.appendChild(rect);
             if (!this._resizers[i]) {
                 this._resizers[i] = rect;
                 rect.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(event, rect, gap));
                 rect.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(event, rect, gap));
                 rect.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeResize(event, rect, gap));
+                this._group.appendChild(rect);
             }
         });
     }

package/package.json

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