@node-projects/web-component-designer 0.0.249 → 0.0.251

package/dist/elements/helper/GridHelper.js

@@ -73,8 +73,8 @@ export function CalculateGridInformation(designItem) {
         yOffset += gp;
     }
     const retVal = { cells: [], gaps: [] };
-    for (let xIdx = 0; xIdx < rows.length; xIdx++) {
-        const r = rows[xIdx];
+    for (let rowIdx = 0; rowIdx < rows.length; rowIdx++) {
+        const r = rows[rowIdx];
         let areas = null;
         if (gridA && gridA[rw + 1]) {
             areas = gridA[rw + 1].split(' ');
@@ -84,15 +84,15 @@ export function CalculateGridInformation(designItem) {
         const currY = Number.parseFloat(r.replace('px', ''));
         let cellList = [];
         retVal.cells.push(cellList);
-        for (let yIdx = 0; yIdx < columns.length; yIdx++) {
-            const c = columns[yIdx];
-            if (x > 0) {
-                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: xGap, height: currY, column: yIdx, row: xIdx, type: 'v' });
+        for (let colIdx = 0; colIdx < columns.length; colIdx++) {
+            const c = columns[colIdx];
+            if (colIdx > 0) {
+                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: xGap, height: currY, column: colIdx, row: rowIdx, type: 'v' });
                 x += xGap;
             }
             const currX = Number.parseFloat(c.replace('px', ''));
-            if (y > 0) {
-                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset - yGap + paddingTop, width: currX, height: yGap, column: yIdx, row: xIdx, type: 'h' });
+            if (rowIdx > 0) {
+                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset - yGap + paddingTop, width: currX, height: yGap, column: colIdx, row: rowIdx, type: 'h' });
             }
             let name = null;
             if (areas && areas[cl]) {

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/widgets/designerView/extensions/grid/DisplayGridExtension.js

@@ -18,10 +18,12 @@ export class DisplayGridExtension extends AbstractExtension {
     refresh(event) {
         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.249",
+  "version": "0.0.251",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",