@node-projects/web-component-designer 0.0.148 → 0.0.150

package/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js

@@ -1,5 +1,6 @@
 import { BindingMode } from '../../item/BindingMode';
 import { BindingTarget } from "../../item/BindingTarget.js";
+import { PropertiesHelper } from "../propertiesService/services/PropertiesHelper";
 export class BaseCustomWebcomponentBindingsService {
     static type = 'base-custom-webcomponent-binding';
     getBindings(designItem) {
@@ -32,7 +33,7 @@ export class BaseCustomWebcomponentBindingsService {
                     bnd.expression = value.substring(2, value.length - 4);
                 }
                 else {
-                    bnd.targetName = name;
+                    bnd.targetName = PropertiesHelper.dashToCamelCase(name);
                     bnd.target = BindingTarget.property;
                     bnd.expression = value.substring(2, value.length - 4);
                 }

package/dist/elements/services/bindingsService/SpecialTagsBindingService.js

@@ -1,6 +1,7 @@
 import { BindingTarget } from "../../item/BindingTarget.js";
 import { BindingMode } from "../../item/BindingMode.js";
 /* Service wich read binings from special HTMl elements -> like tag-binding */
+//TODO: refactor so we could use it
 export class SpecialTagsBindingService {
     static type = 'visu-tagbinding-binding';
     _bindingTagName = "visu-tagbinding";

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

@@ -213,7 +213,16 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                                 t += ',';
                             t += '#node-projects-designer-canvas-canvas ' + p;
                         }
-                        style += t + '{' + r.style.cssText + '}';
+                        let cssText = r.style.cssText;
+                        //bugfix for chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1394353 
+                        if (r.styleMap && r.styleMap.get('grid-template') && r.styleMap.get('grid-template').toString().includes('repeat(')) {
+                            let entr = r.styleMap.entries();
+                            cssText = '';
+                            for (let e of entr) {
+                                cssText += e[0] + ':' + e[1].toString() + ';';
+                            }
+                        }
+                        style += t + '{' + cssText + '}';
                     }
                 }
             }

package/dist/elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.d.ts

@@ -8,6 +8,10 @@ export declare class EditTextWithStyloExtension extends AbstractExtension implem
     private _blurBound;
     private static template;
     private _resizeObserver;
+    private _rect1;
+    private _rect2;
+    private _rect3;
+    private _rect4;
     private _foreignObject;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;

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

@@ -10,6 +10,10 @@ export class EditTextWithStyloExtension extends AbstractExtension {
     <stylo-editor></stylo-editor>
   `;
     _resizeObserver;
+    _rect1;
+    _rect2;
+    _rect3;
+    _rect4;
     _foreignObject;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
@@ -21,6 +25,7 @@ export class EditTextWithStyloExtension extends AbstractExtension {
         this.extendedItem.element.addEventListener('input', this._contentEditedBound);
         this.extendedItem.element.addEventListener('blur', this._blurBound);
         this.extendedItem.element.focus();
+        this.designerCanvas.eatEvents = this.extendedItem.element;
         this.designerCanvas.serviceContainer.globalContext.tool = new TextTool(true);
         const elements = EditTextWithStyloExtension.template.content.cloneNode(true);
         const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
@@ -33,6 +38,10 @@ export class EditTextWithStyloExtension extends AbstractExtension {
         this.overlayLayerView.addOverlay(foreignObject, OverlayLayer.Foregorund);
         this.overlays.push(foreignObject);
         this._drawClickOverlayRects();
+        this._rect1.addEventListener('pointerdown', (e) => this._clickOutside(e));
+        this._rect2.addEventListener('pointerdown', (e) => this._clickOutside(e));
+        this._rect3.addEventListener('pointerdown', (e) => this._clickOutside(e));
+        this._rect4.addEventListener('pointerdown', (e) => this._clickOutside(e));
         requestAnimationFrame(() => {
             const stylo = foreignObject.querySelector('stylo-editor');
             //@ts-ignore
@@ -46,7 +55,13 @@ export class EditTextWithStyloExtension extends AbstractExtension {
         this._resizeObserver = new ResizeObserver(() => this._drawClickOverlayRects());
         this._resizeObserver.observe(this.extendedItem.element);
     }
-    _drawClickOverlayRects() { }
+    _drawClickOverlayRects() {
+        const normalized = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        this._rect1 = this._drawRect(0, 0, this.designerCanvas.containerBoundingRect.width, normalized.y, 'svg-transparent', this._rect1, OverlayLayer.Normal);
+        this._rect2 = this._drawRect(0, 0, normalized.x, this.designerCanvas.containerBoundingRect.height, 'svg-transparent', this._rect2, OverlayLayer.Normal);
+        this._rect3 = this._drawRect(normalized.x + normalized.width, 0, this.designerCanvas.containerBoundingRect.width, this.designerCanvas.containerBoundingRect.height, 'svg-transparent', this._rect3, OverlayLayer.Normal);
+        this._rect4 = this._drawRect(0, normalized.y + normalized.height, this.designerCanvas.containerBoundingRect.width, this.designerCanvas.containerBoundingRect.height, 'svg-transparent', this._rect4, OverlayLayer.Normal);
+    }
     handlesPointerEvent(designerCanvas, event, currentElement) {
         let p = event.composedPath();
         const stylo = this._foreignObject.querySelector('stylo-editor');
@@ -60,8 +75,6 @@ export class EditTextWithStyloExtension extends AbstractExtension {
         this._removeAllOverlays();
         this.extendedItem.element.removeAttribute('contenteditable');
         this.designerCanvas.eatEvents = null;
-        this.extendedItem.element.querySelectorAll('[paragraph_id]').forEach(x => x.removeAttribute('paragraph_id'));
-        this.extendedItem.element.querySelectorAll('[draggable]').forEach(x => x.removeAttribute('draggable'));
         this.extendedItem.updateChildrenFromNodesChildren();
         this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
     }

package/dist/elements/widgets/designerView/extensions/svg/EllipsisExtension.d.ts

@@ -2,6 +2,7 @@ import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
 import { AbstractExtension } from "../AbstractExtension";
 import { IExtensionManager } from "../IExtensionManger";
+import { IRect } from "../../../../../interfaces/IRect";
 export declare class EllipsisExtension extends AbstractExtension {
     private _parentRect;
     private _ellipseElement;
@@ -19,11 +20,22 @@ export declare class EllipsisExtension extends AbstractExtension {
     private _circle2;
     private _circle3;
     private _circle4;
+    private _parentCoordinates;
+    private _offsetSvg;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     pointerEvent(event: PointerEvent, circle: SVGCircleElement, e: SVGEllipseElement, index: number): void;
     _drawPathCircle(x: number, y: number, e: SVGEllipseElement, index: number): SVGCircleElement;
     _redrawPathCircle(x: number, y: number, oldCircle: SVGCircleElement): SVGCircleElement;
+    _getPointsFromEllipse(elementCoords: IRect): number[];
+    _getMinMaxValues(coords: any): {
+        xMin: number;
+        xMax: number;
+        yMin: number;
+        yMax: number;
+    };
+    _rearrangeSvgParent(newEllipseExtrema: any): void;
+    _rearrangePointsFromElement(oldParentCoords: IRect): void;
     refresh(): void;
     dispose(): void;
 }

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

@@ -17,6 +17,8 @@ export class EllipsisExtension extends AbstractExtension {
     _circle2;
     _circle3;
     _circle4;
+    _parentCoordinates;
+    _offsetSvg = 10.0;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -41,6 +43,7 @@ export class EllipsisExtension extends AbstractExtension {
                 this._startPos = cursorPos;
                 this._circlePos = { x: parseFloat(circle.getAttribute("cx")), y: parseFloat(circle.getAttribute("cy")) };
                 this._originalPoint = { x: this._rx, y: this._ry };
+                this._parentCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._ellipseElement.parentElement);
                 break;
             case EventNames.PointerMove:
                 if (this._startPos && event.buttons > 0) {
@@ -87,6 +90,15 @@ export class EllipsisExtension extends AbstractExtension {
                 this._originalPoint = null;
                 this.extendedItem.setAttribute("rx", this._newRx.toString());
                 this.extendedItem.setAttribute("ry", this._newRy.toString());
+                if (getComputedStyle(this._ellipseElement.parentElement).position == "absolute") {
+                    let group = this.extendedItem.openGroup('rearrangeSvg');
+                    let newEllipseCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._ellipseElement);
+                    let newEllipseCoordinatesCloud = this._getPointsFromEllipse(newEllipseCoordinates);
+                    let newEllipseExtrema = this._getMinMaxValues(newEllipseCoordinatesCloud);
+                    this._rearrangeSvgParent(newEllipseExtrema);
+                    this._rearrangePointsFromElement(this._parentCoordinates);
+                    group.commit();
+                }
                 break;
         }
     }
@@ -103,6 +115,55 @@ export class EllipsisExtension extends AbstractExtension {
         circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
         return circle;
     }
+    _getPointsFromEllipse(elementCoords) {
+        let Coords = [];
+        Coords.push(elementCoords.x);
+        Coords.push(elementCoords.x + elementCoords.width);
+        Coords.push(elementCoords.x);
+        Coords.push(elementCoords.x + elementCoords.width);
+        Coords.push(elementCoords.y);
+        Coords.push(elementCoords.y);
+        Coords.push(elementCoords.y + elementCoords.height);
+        Coords.push(elementCoords.y + elementCoords.height);
+        Coords.push(elementCoords.height);
+        Coords.push(elementCoords.width);
+        return Coords;
+    }
+    _getMinMaxValues(coords) {
+        let extrema = { xMin: 0.0, xMax: 0.0, yMin: 0.0, yMax: 0.0 };
+        for (let i = 0; i < coords.length - 2; i++) {
+            if (coords[i] < coords[i + 1] && i <= 3) {
+                extrema.xMin = coords[i];
+            }
+            else if (coords[i] < coords[i + 1] && i > 3 && i <= 7) {
+                extrema.yMin = coords[i];
+            }
+            if (coords[i] > coords[i + 1] && i <= 3) {
+                extrema.xMax = coords[i];
+            }
+            else if (coords[i] > coords[i + 1] && i > 3 && i <= 7) {
+                extrema.yMax = coords[i];
+            }
+        }
+        return extrema;
+    }
+    _rearrangeSvgParent(newEllipseExtrema) {
+        let parentLeft = newEllipseExtrema.xMin - this._offsetSvg;
+        let parentTop = newEllipseExtrema.yMin - this._offsetSvg;
+        let widthEllipseElement = newEllipseExtrema.xMax - newEllipseExtrema.xMin + (2 * this._offsetSvg);
+        let heightEllipseElement = newEllipseExtrema.yMax - newEllipseExtrema.yMin + (2 * this._offsetSvg);
+        this.extendedItem.parent.setStyle("left", parentLeft.toString() + "px");
+        this.extendedItem.parent.setStyle("top", parentTop.toString() + "px");
+        this.extendedItem.parent.setStyle("height", heightEllipseElement.toString() + "px");
+        this.extendedItem.parent.setStyle("width", widthEllipseElement.toString() + "px");
+    }
+    _rearrangePointsFromElement(oldParentCoords) {
+        let newParentCoords = this.designerCanvas.getNormalizedElementCoordinates(this._ellipseElement.parentElement);
+        let diffX = oldParentCoords.x - newParentCoords.x;
+        let diffY = oldParentCoords.y - newParentCoords.y;
+        this.extendedItem.setAttribute('cx', (this._ellipseElement.cx.baseVal.value + diffX).toString());
+        this.extendedItem.setAttribute('cy', (this._ellipseElement.cy.baseVal.value + diffY).toString());
+    }
     refresh() {
         this._removeAllOverlays();
         this.extend();

package/dist/elements/widgets/designerView/extensions/svg/LineExtension.d.ts

@@ -2,6 +2,7 @@ import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
 import { AbstractExtension } from "../AbstractExtension";
 import { IExtensionManager } from "../IExtensionManger";
+import { IRect } from "../../../../../interfaces/IRect";
 export declare class LineExtension extends AbstractExtension {
     private _parentRect;
     private _lineElement;
@@ -11,10 +12,21 @@ export declare class LineExtension extends AbstractExtension {
     private _originalPoint;
     private _newLinePoint;
     private _newCirclePoint;
+    private _parentCoordinates;
+    private _offsetSvg;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     pointerEvent(event: PointerEvent, circle: SVGCircleElement, l: SVGLineElement, index: number): void;
     _drawPathCircle(x: number, y: number, l: SVGLineElement, index: number): void;
+    _getPointsFromRect(elementCoords: IRect): number[];
+    _getMinMaxValues(coords: any): {
+        xMin: number;
+        xMax: number;
+        yMin: number;
+        yMax: number;
+    };
+    _rearrangeSvgParent(newLineExtrema: any): void;
+    _rearrangePointsFromElement(oldParentCoords: IRect): void;
     refresh(): void;
     dispose(): void;
 }

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

@@ -9,6 +9,8 @@ export class LineExtension extends AbstractExtension {
     _originalPoint;
     _newLinePoint;
     _newCirclePoint;
+    _parentCoordinates;
+    _offsetSvg = 10.0;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -31,6 +33,7 @@ export class LineExtension extends AbstractExtension {
                 this._startPos = cursorPos;
                 this._circlePos = { x: parseFloat(circle.getAttribute("cx")), y: parseFloat(circle.getAttribute("cy")) };
                 this._originalPoint = { x: parseFloat(l.getAttribute("x" + index)), y: parseFloat(l.getAttribute("y" + index)) };
+                this._parentCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._lineElement.parentElement);
                 break;
             case EventNames.PointerMove:
                 if (this._startPos && event.buttons > 0) {
@@ -68,6 +71,15 @@ export class LineExtension extends AbstractExtension {
                 this._originalPoint = null;
                 this.extendedItem.setAttribute('x' + index, this._newLinePoint.x.toString());
                 this.extendedItem.setAttribute('y' + index, this._newLinePoint.y.toString());
+                if (getComputedStyle(this._lineElement.parentElement).position == "absolute") {
+                    let group = this.extendedItem.openGroup('rearrangeSvg');
+                    let newLineCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._lineElement);
+                    let newLineCoordinatesCloud = this._getPointsFromRect(newLineCoordinates);
+                    let newLineExtrema = this._getMinMaxValues(newLineCoordinatesCloud);
+                    this._rearrangeSvgParent(newLineExtrema);
+                    this._rearrangePointsFromElement(this._parentCoordinates);
+                    group.commit();
+                }
                 break;
         }
     }
@@ -78,6 +90,53 @@ export class LineExtension extends AbstractExtension {
         circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, circle, l, index));
         circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, circle, l, index));
     }
+    _getPointsFromRect(elementCoords) {
+        let Coords = [];
+        Coords.push(elementCoords.x);
+        Coords.push(elementCoords.x + elementCoords.width);
+        Coords.push(elementCoords.y);
+        Coords.push(elementCoords.y + elementCoords.height);
+        Coords.push(elementCoords.height);
+        Coords.push(elementCoords.width);
+        return Coords;
+    }
+    _getMinMaxValues(coords) {
+        let extrema = { xMin: 0.0, xMax: 0.0, yMin: 0.0, yMax: 0.0 };
+        for (let i = 0; i < coords.length - 2; i++) {
+            if (coords[i] < coords[i + 1] && i <= 1) {
+                extrema.xMin = coords[i];
+            }
+            else if (coords[i] < coords[i + 1] && i > 1 && i <= 3) {
+                extrema.yMin = coords[i];
+            }
+            if (coords[i] > coords[i + 1] && i <= 1) {
+                extrema.xMax = coords[i];
+            }
+            else if (coords[i] > coords[i + 1] && i > 1 && i <= 3) {
+                extrema.yMax = coords[i];
+            }
+        }
+        return extrema;
+    }
+    _rearrangeSvgParent(newLineExtrema) {
+        let parentLeft = newLineExtrema.xMin - this._offsetSvg;
+        let parentTop = newLineExtrema.yMin - this._offsetSvg;
+        let widthLineElement = newLineExtrema.xMax - newLineExtrema.xMin + (2 * this._offsetSvg);
+        let heightLineElement = newLineExtrema.yMax - newLineExtrema.yMin + (2 * this._offsetSvg);
+        this.extendedItem.parent.setStyle("left", parentLeft.toString() + "px");
+        this.extendedItem.parent.setStyle("top", parentTop.toString() + "px");
+        this.extendedItem.parent.setStyle("height", heightLineElement.toString() + "px");
+        this.extendedItem.parent.setStyle("width", widthLineElement.toString() + "px");
+    }
+    _rearrangePointsFromElement(oldParentCoords) {
+        let newParentCoords = this.designerCanvas.getNormalizedElementCoordinates(this._lineElement.parentElement);
+        let diffX = oldParentCoords.x - newParentCoords.x;
+        let diffY = oldParentCoords.y - newParentCoords.y;
+        this.extendedItem.setAttribute('x1', (this._lineElement.x1.baseVal.value + diffX).toString());
+        this.extendedItem.setAttribute('y1', (this._lineElement.y1.baseVal.value + diffY).toString());
+        this.extendedItem.setAttribute('x2', (this._lineElement.x2.baseVal.value + diffX).toString());
+        this.extendedItem.setAttribute('y2', (this._lineElement.y2.baseVal.value + diffY).toString());
+    }
     refresh() {
         this._removeAllOverlays();
         this.extend();

package/dist/elements/widgets/designerView/extensions/svg/PathExtension.d.ts

@@ -5,6 +5,7 @@ import "../../../../helper/PathDataPolyfill";
 import { IPoint } from "../../../../../interfaces/IPoint";
 import { IExtensionManager } from "../IExtensionManger";
 import { PathData } from "../../../../helper/PathDataPolyfill";
+import { IRect } from "../../../../../interfaces/IRect";
 export declare class PathExtension extends AbstractExtension {
     private _lastPos;
     private _parentRect;
@@ -12,12 +13,17 @@ export declare class PathExtension extends AbstractExtension {
     private _circlePos;
     private _originalPathPoint;
     private _pathdata;
+    private _offsetSvg;
+    private _pathElement;
+    private _parentCoordinates;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     pointerEvent(event: PointerEvent, circle: SVGCircleElement, p: PathData, index: number): void;
     _drawPathCircle(x: number, y: number, p: PathData, index: number): void;
     _drawPathLine(x1: number, y1: number, x2: number, y2: number): void;
     _checkCircleIndex(p: PathData, circlePos: IPoint): boolean;
+    _rearrangeSvgElement(): void;
+    _rearrangePointsFromElement(oldParentCoords: IRect, pathData: PathData[]): void;
     refresh(): void;
     dispose(): void;
 }

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

@@ -10,12 +10,16 @@ export class PathExtension extends AbstractExtension {
     _circlePos;
     _originalPathPoint;
     _pathdata;
+    _offsetSvg = 10.0;
+    _pathElement;
+    _parentCoordinates;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
         this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
         this._pathdata = this.extendedItem.node.getPathData({ normalize: false });
+        this._pathElement = this.extendedItem.node;
         this._lastPos = { x: 0, y: 0 };
         for (let p of this._pathdata) {
             switch (p.type) {
@@ -111,6 +115,7 @@ export class PathExtension extends AbstractExtension {
                 this._startPos = cursorPos;
                 this._circlePos = { x: parseFloat(circle.getAttribute("cx")), y: parseFloat(circle.getAttribute("cy")) };
                 this._originalPathPoint = { x: p.values[index], y: p.values[index + 1] };
+                this._parentCoordinates = this.extendedItem.element.parentElement.getBoundingClientRect();
                 break;
             case EventNames.PointerMove:
                 if (this._startPos && event.buttons > 0) {
@@ -158,6 +163,13 @@ export class PathExtension extends AbstractExtension {
                 this._circlePos = null;
                 this._lastPos = null;
                 this.extendedItem.setAttribute('d', createPathD(this._pathdata));
+                if (getComputedStyle(this._pathElement.parentElement).position == "absolute") {
+                    let group = this.extendedItem.openGroup('rearrangeSvg');
+                    let dataPath = this._pathdata;
+                    this._rearrangeSvgElement();
+                    this._rearrangePointsFromElement(this._parentCoordinates, dataPath);
+                    group.commit();
+                }
                 break;
         }
     }
@@ -277,6 +289,27 @@ export class PathExtension extends AbstractExtension {
         }
         return false;
     }
+    _rearrangeSvgElement() {
+        let newElementCoords = this.extendedItem.element.getBoundingClientRect();
+        let parentLeft = (newElementCoords.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor - this._offsetSvg;
+        let parentTop = (newElementCoords.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - this._offsetSvg;
+        let heightSvgElement = newElementCoords.height + (2 * this._offsetSvg);
+        let widthSvgElement = newElementCoords.width + (2 * this._offsetSvg);
+        this.extendedItem.element.parentElement.style.setProperty("left", parentLeft.toString() + "px");
+        this.extendedItem.element.parentElement.style.setProperty("top", parentTop.toString() + "px");
+        this.extendedItem.element.parentElement.style.setProperty("height", heightSvgElement.toString() + "px");
+        this.extendedItem.element.parentElement.style.setProperty("width", widthSvgElement.toString() + "px");
+    }
+    _rearrangePointsFromElement(oldParentCoords, pathData) {
+        let newParentCoords = this.extendedItem.element.parentElement.getBoundingClientRect();
+        let diffX = oldParentCoords.x - newParentCoords.x;
+        let diffY = oldParentCoords.y - newParentCoords.y;
+        for (let i = 0; i < pathData.length; i++) {
+            pathData[i].values[0] = pathData[i].values[0] + diffX;
+            pathData[i].values[1] = pathData[i].values[1] + diffY;
+        }
+        this.extendedItem.element.setAttribute("d", createPathD(this._pathdata));
+    }
     refresh() {
         this._removeAllOverlays();
         this.extend();

package/dist/elements/widgets/designerView/extensions/svg/RectExtension.d.ts

@@ -1,3 +1,4 @@
+import { IRect } from "../../../../../interfaces/IRect";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
 import { AbstractExtension } from "../AbstractExtension";
@@ -18,6 +19,8 @@ export declare class RectExtension extends AbstractExtension {
     private _circle3;
     private _circle4;
     private _rect;
+    private _parentCoordinates;
+    private _offsetSvg;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     pointerEvent(event: PointerEvent, circle: SVGCircleElement, r: SVGRectElement, index: number): void;
@@ -29,6 +32,15 @@ export declare class RectExtension extends AbstractExtension {
         w: number;
         h: number;
     };
+    _getPointsFromRect(elementCoords: IRect): number[];
+    _getMinMaxValues(coords: any): {
+        xMin: number;
+        xMax: number;
+        yMin: number;
+        yMax: number;
+    };
+    _rearrangeSvgParent(newRectExtrema: any): void;
+    _rearrangePointsFromElement(oldParentCoords: IRect): void;
     refresh(): void;
     dispose(): void;
 }

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

@@ -16,6 +16,8 @@ export class RectExtension extends AbstractExtension {
     _circle3;
     _circle4;
     _rect = { x: 0, y: 0, w: 0, h: 0 };
+    _parentCoordinates;
+    _offsetSvg = 10.0;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -40,6 +42,7 @@ export class RectExtension extends AbstractExtension {
                 this._startPos = cursorPos;
                 this._circlePos = { x: parseFloat(circle.getAttribute("cx")), y: parseFloat(circle.getAttribute("cy")) };
                 this._originalPoint = { x: this._x, y: this._y };
+                this._parentCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._rectElement.parentElement);
                 break;
             case EventNames.PointerMove:
                 if (this._startPos && event.buttons > 0) {
@@ -92,6 +95,15 @@ export class RectExtension extends AbstractExtension {
                 this.extendedItem.setAttribute("y", this._rect.y.toString());
                 this.extendedItem.setAttribute("width", this._rect.w.toString());
                 this.extendedItem.setAttribute("height", this._rect.h.toString());
+                if (getComputedStyle(this._rectElement.parentElement).position == "absolute") {
+                    let group = this.extendedItem.openGroup('rearrangeSvg');
+                    let newRectCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._rectElement);
+                    let newRectCoordinatesCloud = this._getPointsFromRect(newRectCoordinates);
+                    let newRectExtrema = this._getMinMaxValues(newRectCoordinatesCloud);
+                    this._rearrangeSvgParent(newRectExtrema);
+                    this._rearrangePointsFromElement(this._parentCoordinates);
+                    group.commit();
+                }
                 break;
         }
     }
@@ -128,6 +140,55 @@ export class RectExtension extends AbstractExtension {
         }
         return rect;
     }
+    _getPointsFromRect(elementCoords) {
+        let Coords = [];
+        Coords.push(elementCoords.x);
+        Coords.push(elementCoords.x + elementCoords.width);
+        Coords.push(elementCoords.x);
+        Coords.push(elementCoords.x + elementCoords.width);
+        Coords.push(elementCoords.y);
+        Coords.push(elementCoords.y);
+        Coords.push(elementCoords.y + elementCoords.height);
+        Coords.push(elementCoords.y + elementCoords.height);
+        Coords.push(elementCoords.height);
+        Coords.push(elementCoords.width);
+        return Coords;
+    }
+    _getMinMaxValues(coords) {
+        let extrema = { xMin: 0.0, xMax: 0.0, yMin: 0.0, yMax: 0.0 };
+        for (let i = 0; i < coords.length - 2; i++) {
+            if (coords[i] < coords[i + 1] && i <= 3) {
+                extrema.xMin = coords[i];
+            }
+            else if (coords[i] < coords[i + 1] && i > 3 && i <= 7) {
+                extrema.yMin = coords[i];
+            }
+            if (coords[i] > coords[i + 1] && i <= 3) {
+                extrema.xMax = coords[i];
+            }
+            else if (coords[i] > coords[i + 1] && i > 3 && i <= 8) {
+                extrema.yMax = coords[i];
+            }
+        }
+        return extrema;
+    }
+    _rearrangeSvgParent(newRectExtrema) {
+        let parentLeft = newRectExtrema.xMin - this._offsetSvg;
+        let parentTop = newRectExtrema.yMin - this._offsetSvg;
+        let widthRectElement = newRectExtrema.xMax - newRectExtrema.xMin + (2 * this._offsetSvg);
+        let heightRectElement = newRectExtrema.yMax - newRectExtrema.yMin + (2 * this._offsetSvg);
+        this.extendedItem.parent.setStyle("left", parentLeft.toString() + "px");
+        this.extendedItem.parent.setStyle("top", parentTop.toString() + "px");
+        this.extendedItem.parent.setStyle("height", heightRectElement.toString() + "px");
+        this.extendedItem.parent.setStyle("width", widthRectElement.toString() + "px");
+    }
+    _rearrangePointsFromElement(oldParentCoords) {
+        let newParentCoords = this.designerCanvas.getNormalizedElementCoordinates(this._rectElement.parentElement);
+        let diffX = oldParentCoords.x - newParentCoords.x;
+        let diffY = oldParentCoords.y - newParentCoords.y;
+        this.extendedItem.setAttribute('x', (this._rectElement.x.baseVal.value + diffX).toString());
+        this.extendedItem.setAttribute('y', (this._rectElement.y.baseVal.value + diffY).toString());
+    }
     refresh() {
         this._removeAllOverlays();
         this.extend();

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

@@ -35,13 +35,11 @@ export class TextTool {
                     setTimeout(() => { span.focus(); }, 50);
                 }
                 else {
-                    if (this._textEditExtensions) {
-                        for (let e of this._textEditExtensions) {
-                            if (e.handlesPointerEvent) {
-                                const ret = e.handlesPointerEvent(designerCanvas, event, currentElement);
-                                if (!ret) {
-                                    designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
-                                }
+                    for (let e of this._textEditExtensions) {
+                        if (e.handlesPointerEvent) {
+                            const ret = e.handlesPointerEvent(designerCanvas, event, currentElement);
+                            if (!ret) {
+                                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
                             }
                         }
                     }

package/dist/elements/widgets/treeView/treeViewExtended.js

@@ -3,6 +3,7 @@ import { NodeType } from '../../item/NodeType';
 import { assetsPath } from '../../../Constants';
 import { ContextMenu } from '../../helper/contextMenu/ContextMenu';
 import { switchContainer } from '../../helper/SwitchContainerHelper';
+import { DomConverter } from '../designerView/DomConverter';
 export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
     _treeDiv;
     _tree;
@@ -195,7 +196,8 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
                         }
                     }
                 }
-                return false;
+                const disableExpand = event.originalEvent.ctrlKey || event.originalEvent.shiftKey;
+                return !disableExpand;
             },
             createNode: (event, data) => {
                 let node = data.node;
@@ -336,7 +338,7 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
             currentNode = this._tree.getRootNode();
         }
         const newNode = currentNode.addChildren({
-            title: item.nodeType === NodeType.Element ? item.name + " " + (item.id ? ('#' + item.id) : '') : '<small><small><small>#' + (item.nodeType === NodeType.TextNode ? 'text' : 'comment') + '&nbsp;</small></small></small> ' + item.content,
+            title: item.nodeType === NodeType.Element ? item.name + " " + (item.id ? ('#' + item.id) : '') : '<small><small><small>#' + (item.nodeType === NodeType.TextNode ? 'text' : 'comment') + '&nbsp;</small></small></small> ' + DomConverter.normalizeContentValue(item.content),
             folder: item.children.length > 0 ? true : false,
             //@ts-ignore
             ref: item

package/dist/index.d.ts

@@ -23,7 +23,6 @@ export type { IBindableObjectsService } from "./elements/services/bindableObject
 export type { IBindableObjectDragDropService } from "./elements/services/bindableObjectsService/IBindableObjectDragDropService.js";
 export type { IBindingService } from "./elements/services/bindingsService/IBindingService.js";
 export * from "./elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js";
-export * from "./elements/services/bindingsService/SpecialTagsBindingService.js";
 export * from "./elements/services/placementService/DefaultPlacementService.js";
 export * from "./elements/services/placementService/FlexBoxPlacementService.js";
 export * from "./elements/services/placementService/GridPlacementService.js";

package/dist/index.js

@@ -16,7 +16,6 @@ export * from "./elements/item/BindingMode.js";
 export * from "./elements/item/BindingTarget.js";
 export * from "./elements/services/bindableObjectsService/BindableObjectType.js";
 export * from "./elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js";
-export * from "./elements/services/bindingsService/SpecialTagsBindingService.js";
 export * from "./elements/services/placementService/DefaultPlacementService.js";
 export * from "./elements/services/placementService/FlexBoxPlacementService.js";
 export * from "./elements/services/placementService/GridPlacementService.js";

package/package.json

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