@node-projects/web-component-designer 0.0.248 → 0.0.250

package/dist/elements/services/dragDropService/DragDropService.d.ts

@@ -4,6 +4,8 @@ import { IDesignItem } from "../../item/IDesignItem.js";
 import { IPlacementService } from "../placementService/IPlacementService.js";
 export declare class DragDropService implements IDragDropService {
     private _dragOverExtensionItem;
+    private _oldX;
+    private _oldY;
     dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent): void;
     dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent): void;
     dragOver(designerCanvas: IDesignerCanvas, event: DragEvent): void;

package/dist/elements/services/dragDropService/DragDropService.js

@@ -4,6 +4,8 @@ import { ExtensionType } from "../../widgets/designerView/extensions/ExtensionTy
 import { dragDropFormatNameElementDefinition } from "../../../Constants.js";
 export class DragDropService {
     _dragOverExtensionItem;
+    _oldX;
+    _oldY;
     dragEnter(designerCanvas, event) {
     }
     dragLeave(designerCanvas, event) {
@@ -20,7 +22,11 @@ export class DragDropService {
             this._dragOverExtensionItem = newContainer;
         }
         else {
-            designerCanvas.extensionManager.refreshExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
+            if (event.x != this._oldX && event.y != this._oldY) {
+                this._oldX = event.x;
+                this._oldY = event.y;
+                designerCanvas.extensionManager.refreshExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
+            }
         }
     }
     async drop(designerCanvas, event) {

package/dist/elements/services/stylesheetService/AbstractStylesheetService.js

@@ -103,7 +103,9 @@ export class AbstractStylesheetService {
                 let parts = rule.selectorText.split(',');
                 let sel = "";
                 for (let p of parts) {
-                    if (p.includes(DesignerCanvas.cssprefixConstant)) {
+                    if (p == ':host')
+                        sel += DesignerCanvas.cssprefixConstant;
+                    else if (p.includes(DesignerCanvas.cssprefixConstant)) {
                         sel += p;
                         continue;
                     }

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

@@ -229,6 +229,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     #node-projects-designer-search-container > #node-projects-designer-search-close::after {
       transform: translate(-50%, -50%) rotate(-45deg);
     }
+
+    #node-projects-designer-canvas-canvas {
+      margin: 0; 
+      padding: 0; 
+      border: none;
+    }
   `;
     static template = html `
     <div style="display: flex;flex-direction: column;width: 100%;height: 100%; margin: 0 !important; padding: 0 !important; border: none !important;">
@@ -236,7 +242,7 @@ 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" style=" margin: 0 !important; padding: 0 !important; border: none !important;"></div>
+          <div 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>

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

@@ -12,16 +12,20 @@ export class DisplayGridExtension extends AbstractExtension {
         super(extensionManager, designerView, extendedItem);
     }
     extend(event) {
+        console.log('extend');
         this._initSVGArrays();
         this.refresh(event);
     }
     refresh(event) {
+        console.log('refresh');
         this.gridInformation = CalculateGridInformation(this.extendedItem);
         let cells = this.gridInformation.cells;
-        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';
+        if (!this._group) {
+            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';
+        }
         if (cells[0][0] && !isNaN(cells[0][0].height) && !isNaN(cells[0][0].width)) {
             if (this.gridInformation.cells.length != this._cells.length || this.gridInformation.cells[0].length != this._cells[0].length)
                 this._initSVGArrays();

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.248",
+  "version": "0.0.250",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",