@node-projects/web-component-designer 0.1.170 → 0.1.172

package/dist/elements/helper/ElementHelper.js

@@ -107,7 +107,7 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
         let currLeft = 0;
         let currTop = 0;
         if (element instanceof (element.ownerDocument.defaultView ?? window).SVGSVGElement || element instanceof (element.ownerDocument.defaultView ?? window).MathMLElement) {
-            //TODO: !huge Perf impact! - fix without transformation
+            //TODO: !maybe huge Perf impact! - fix without transformation
             let t = element.style.transform;
             element.style.transform = '';
             const bcEl = element.getBoundingClientRect();

package/dist/elements/helper/TransformHelper.js

@@ -157,8 +157,7 @@ export function getByParentsTransformedPointRelatedToCanvas(element, point, desi
         const tfX = parseFloat(toSplit[0]);
         const tfY = parseFloat(toSplit[1]);
         const parentElementTransformOrigin = new DOMPoint(elementWindowOffset.offsetLeft - designerCanvas.outerRect.x + tfX, elementWindowOffset.offsetTop - designerCanvas.outerRect.y + tfY);
-        //if (actualElement == element) 
-        {
+        if (actualElement == element) {
             const transf = (element.ownerDocument.defaultView ?? window).getComputedStyle(element).transform;
             const mtx = extractTranslationFromDOMMatrix(new DOMMatrix(transf));
             parentElementTransformOrigin.x -= mtx.x;
@@ -199,6 +198,7 @@ export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, u
     const topright = 1;
     const bottomleft = 2;
     const bottomright = 3;
+    //offset points for calculation
     let intUntransformedCornerPointsOffset = nullOffsetArray;
     if (untransformedCornerPointsOffset != null) {
         if (Array.isArray(untransformedCornerPointsOffset)) {

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -135,7 +135,7 @@ export function createDefaultServiceContainer() {
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
         new ConditionExtensionProvider(new ElementDragTitleExtensionProvider(), item => !(item.node instanceof item.window.SVGElement) || item.node instanceof item.window.SVGSVGElement),
-        new PreviousElementSelectExtensionProvider(),
+        new ConditionExtensionProvider(new PreviousElementSelectExtensionProvider(), item => !(item.node instanceof item.window.SVGElement) || item.node instanceof item.window.SVGSVGElement),
         new TransformOriginExtensionProvider(true),
         new MarginExtensionProvider(),
         new PaddingExtensionProvider(),

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.js

@@ -73,18 +73,16 @@ export class EditTextExtension extends AbstractExtension {
             this.extensionManager.removeExtensionInstance(this.extendedItem, this);
         };
         this._addOverlay(this._path, OverlayLayer.Background);
-        let points = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
-        let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
-        let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z ";
-        data += "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + " Z";
-        this._path.setAttribute("d", data);
+        this.refresh();
     }
     refresh() {
-        let points = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
-        let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
-        let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z ";
-        data += "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + " Z";
-        this._path.setAttribute("d", data);
+        let p = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
+        if (this._valuesHaveChanges(this.designerCanvas.containerBoundingRect.width, this.designerCanvas.containerBoundingRect.height, this.designerCanvas.scaleFactor, p[0].x, p[0].y, p[1].x, p[1].y, p[2].x, p[2].y, p[3].x, p[3].y)) {
+            let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
+            let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z ";
+            data += "M" + [p[0], p[1], p[3], p[2]].map(x => x.x + ',' + x.y).join(' ') + 'Z ';
+            this._path.setAttribute("d", data);
+        }
     }
     dispose() {
         this._selectionChangedListener.dispose();

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

@@ -1,5 +1,6 @@
 import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
 import { AbstractExtension } from './AbstractExtension.js';
+import { OverlayLayer } from './OverlayLayer.js';
 const offset = 3;
 export class HighlightElementExtension extends AbstractExtension {
     _rect;
@@ -12,7 +13,7 @@ export class HighlightElementExtension extends AbstractExtension {
     refresh() {
         let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: offset, y: offset }, this.designerCanvas);
         if (!isNaN(transformedCornerPoints[0].x)) {
-            this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-hover', this._rect);
+            this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-hover', this._rect, OverlayLayer.Background);
             this._rect.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
         }
     }

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

@@ -8,6 +8,6 @@ export class HighlightElementExtensionProvider {
         return new HighlightElementExtension(extensionManager, designerView, designItem);
     }
     static style = css `
-    .svg-hover { stroke: #90caf9; fill: none; }
+    .svg-hover { stroke: #90caf966; fill: none; }
   `;
 }

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

@@ -14,7 +14,7 @@ export class PlacementExtension extends AbstractExtension {
         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._rect = this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-hover', this._rect);
+        this._rect = this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-placement', this._rect);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -8,6 +8,6 @@ export class PlacementExtensionProvider {
         return new PlacementExtension(extensionManager, designerView, designItem);
     }
     static style = css `
-    .svg-hover { stroke: #90caf9; fill: none; }
+    .svg-placement { stroke: #90caf9; fill: none; }
   `;
 }

package/dist/elements/widgets/designerView/extensions/svg/SvgElementExtension.js

@@ -37,7 +37,7 @@ export class SvgElementExtension extends AbstractExtension {
     }
     refresh() {
         let points = getSvgElementPoints(this._svgElement);
-        if (this._valuesHaveChanges(this.designerCanvas.scaleFactor, ...points.map(x => x.x), ...points.map(x => x.y))) {
+        if (points && this._valuesHaveChanges(this.designerCanvas.scaleFactor, ...points.map(x => x.x), ...points.map(x => x.y))) {
             this._points = points;
             for (let i = 0; i < this._points.length; i++) {
                 this._circles[i] = this._drawPathCircle(i, this._circles[i]);

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.170",
+  "version": "0.1.172",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",