@node-projects/web-component-designer 0.0.98 → 0.0.99

package/dist/elements/helper/CssCombiner.js

@@ -135,7 +135,11 @@ export class CssCombiner {
             styles.delete('margin-right');
             styles.delete('margin-bottom');
             styles.delete('margin-left');
-            styles.set('margin', e.style.marginTop + ' ' + e.style.marginRight + ' ' + e.style.marginBottom + ' ' + e.style.marginLeft);
+            if (e.style.marginTop == e.style.marginRight && e.style.marginTop == e.style.marginBottom && e.style.marginTop == e.style.marginLeft) {
+                styles.set('margin', e.style.marginTop);
+            }
+            else
+                styles.set('margin', e.style.marginTop + ' ' + e.style.marginRight + ' ' + e.style.marginBottom + ' ' + e.style.marginLeft);
         }
     }
     static combinePadding(styles) {
@@ -155,7 +159,11 @@ export class CssCombiner {
             styles.delete('padding-right');
             styles.delete('padding-bottom');
             styles.delete('padding-left');
-            styles.set('padding', e.style.paddingTop + ' ' + e.style.paddingRight + ' ' + e.style.paddingBottom + ' ' + e.style.paddingLeft);
+            if (e.style.paddingTop == e.style.paddingRight && e.style.paddingTop == e.style.paddingBottom && e.style.paddingTop == e.style.paddingLeft) {
+                styles.set('padding', e.style.paddingTop);
+            }
+            else
+                styles.set('padding', e.style.paddingTop + ' ' + e.style.paddingRight + ' ' + e.style.paddingBottom + ' ' + e.style.paddingLeft);
         }
     }
     static combineInset(styles) {

package/dist/elements/helper/GridHelper.js

@@ -1,7 +1,8 @@
 export function CalculateGridInformation(designItem) {
     //todo:
     //same name should combine columns/rows
-    let itemRect = designItem.element.getBoundingClientRect();
+    let itemRect = designItem.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(designItem.element);
+    //let itemRect = designItem.element.getBoundingClientRect();
     const computedStyle = getComputedStyle(designItem.element);
     const rows = computedStyle.gridTemplateRows.split(' ');
     const columns = computedStyle.gridTemplateColumns.split(' ');
@@ -11,8 +12,8 @@ export function CalculateGridInformation(designItem) {
     let xGap = 0;
     let yGap = 0;
     let rw = 0;
-    let xOffset = itemRect.x - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.x;
-    let yOffset = itemRect.y - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.y;
+    let xOffset = itemRect.x; // - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.x;
+    let yOffset = itemRect.y; // - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.y;
     let gridA = null;
     if (computedStyle.gridTemplateAreas && computedStyle.gridTemplateAreas !== 'none')
         gridA = computedStyle.gridTemplateAreas.split('\"');

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

@@ -243,7 +243,9 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
             scaleX = cvRect.width / dimensions.width;
         if (dimensions.height)
             scaleY = cvRect.height / dimensions.height;
-        this._designerCanvas.zoomFactor = scaleX < scaleY ? scaleX : scaleY;
+        let fak = scaleX < scaleY ? scaleX : scaleY;
+        if (!isNaN(fak))
+            this._designerCanvas.zoomFactor = fak;
         this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
     }
     _onScrollbar(e) {

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

@@ -4,19 +4,17 @@ export class CanvasExtension extends AbstractExtension {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
-        let itemRect = this.extendedItem.element.getBoundingClientRect();
+        let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         const computedStyle = getComputedStyle(this.extendedItem.element);
         if (computedStyle.margin !== '0px') {
-            const xOffset = itemRect.x - this.designerCanvas.containerBoundingRect.x;
-            const yOffset = itemRect.y - this.designerCanvas.containerBoundingRect.y;
             const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
             const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
             const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
             const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
-            this._drawRect(xOffset - left, yOffset - top, left + itemRect.width + right, top, 'svg-margin');
-            this._drawRect(xOffset - left, yOffset, left, itemRect.height, 'svg-margin');
-            this._drawRect(xOffset + itemRect.width, yOffset, right, itemRect.height, 'svg-margin');
-            this._drawRect(xOffset - left, yOffset + itemRect.height, left + itemRect.width + right, bottom, 'svg-margin');
+            this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top, 'svg-margin');
+            this._drawRect(itemRect.x - left, itemRect.y, left, itemRect.height, 'svg-margin');
+            this._drawRect(itemRect.x + itemRect.width, itemRect.y, right, itemRect.height, 'svg-margin');
+            this._drawRect(itemRect.x - left, itemRect.y + itemRect.height, left + itemRect.width + right, bottom, 'svg-margin');
         }
     }
     refresh() {

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

@@ -1,4 +1,5 @@
 import { AbstractExtension } from "./AbstractExtension";
+import { OverlayLayer } from "./OverlayLayer.js";
 export class GrayOutExtension extends AbstractExtension {
     _path;
     constructor(extensionManager, designerView, extendedItem) {
@@ -11,7 +12,7 @@ export class GrayOutExtension extends AbstractExtension {
         if (!this._path) {
             this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
             this._path.setAttribute('class', 'svg-gray-out');
-            this.overlayLayerView.appendChild(this._path);
+            this.overlayLayerView.addOverlay(this._path, OverlayLayer.Background);
             this.overlays.push(this._path);
         }
         let itemRect = this.extendedItem.element.getBoundingClientRect();

package/package.json

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