@node-projects/web-component-designer 0.0.244 → 0.0.245

package/dist/elements/helper/GridHelper.js

@@ -1,8 +1,9 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "./TransformHelper.js";
 export function CalculateGridInformation(designItem) {
     //todo:
     //same name should combine columns/rows
     let itemRect = designItem.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(designItem.element);
-    //let itemRect = designItem.element.getBoundingClientRect();
+    let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(designItem.element, null, designItem.instanceServiceContainer.designerCanvas);
     const computedStyle = getComputedStyle(designItem.element);
     const rows = computedStyle.gridTemplateRows.split(' ');
     const columns = computedStyle.gridTemplateColumns.split(' ');
@@ -12,8 +13,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 = transformedCornerPoints[0].x;
+    let yOffset = transformedCornerPoints[0].y;
     let gridA = null;
     if (computedStyle.gridTemplateAreas && computedStyle.gridTemplateAreas !== 'none')
         gridA = computedStyle.gridTemplateAreas.split('\"');

package/dist/elements/helper/TransformHelper.d.ts

@@ -1,5 +1,6 @@
 import { IPoint } from "../../interfaces/IPoint.js";
 import { IDesignerCanvas } from "../widgets/designerView/IDesignerCanvas.js";
+export declare function getElementCombinedTransform(element: HTMLElement): DOMMatrix;
 export declare function combineTransforms(element: HTMLElement, actualTransforms: string, requestedTransformation: string): void;
 export declare function getDomMatrix(element: HTMLElement): DOMMatrix;
 export declare function transformPointByInverseMatrix(point: DOMPoint, matrix: DOMMatrix): DOMPoint;

package/dist/elements/helper/TransformHelper.js

@@ -5,6 +5,24 @@ let identityMatrix = [
     0, 0, 1, 0,
     0, 0, 0, 1
 ];
+export function getElementCombinedTransform(element) {
+    //https://www.w3.org/TR/css-transforms-2/#ctm
+    let s = getComputedStyle(element);
+    let m = new DOMMatrix();
+    if (s.translate != 'none') {
+        m = m.multiply(new DOMMatrix('translate(' + s.translate + ')'));
+    }
+    if (s.rotate != 'none') {
+        m = m.multiply(new DOMMatrix('rotate(' + s.rotate + ')'));
+    }
+    if (s.scale != 'none') {
+        m = m.multiply(new DOMMatrix('scale(' + s.rotate + ')'));
+    }
+    if (s.transform != 'none') {
+        m = m.multiply(new DOMMatrix(s.transform));
+    }
+    return m;
+}
 export function combineTransforms(element, actualTransforms, requestedTransformation) {
     if (actualTransforms == null || actualTransforms == '') {
         element.style.transform = requestedTransformation;
@@ -100,8 +118,8 @@ export function getResultingTransformationBetweenElementAndAllAncestors(element,
     let originalElementAndAllParentsMultipliedMatrix;
     while (actualElement != ancestor) {
         const newElement = getParentElementIncludingSlots(actualElement);
-        actualElementMatrix = new DOMMatrix(getComputedStyle(actualElement).transform);
-        newElementMatrix = new DOMMatrix(getComputedStyle(newElement).transform);
+        actualElementMatrix = getElementCombinedTransform(actualElement);
+        newElementMatrix = getElementCombinedTransform(newElement);
         newElementMatrix.m41 = newElementMatrix.m42 = 0;
         if (actualElement == element) {
             originalElementAndAllParentsMultipliedMatrix = actualElementMatrix.multiply(newElementMatrix);

package/dist/elements/services/placementService/FlexBoxPlacementService.js

@@ -44,23 +44,31 @@ export class FlexBoxPlacementService {
         const pos = placementView.getNormalizedEventCoordinates(event);
         const style = getComputedStyle(container.element);
         const childrenWithPos = Array.from(container.children()).filter(x => !x.isEmptyTextNode).map(x => [x, placementView.getNormalizedElementCoordinates(x.element)]);
-        if (style.flexDirection == 'row') {
+        if (style.flexDirection == 'row' || style.flexDirection == 'row-reverse') {
             childrenWithPos.sort(x => x[1].x);
             let elBefore = null;
             for (let c of childrenWithPos) {
                 if (c[1].x + c[1].width / 2 < pos.x) {
                     elBefore = c;
+                    if (style.flexDirection == 'row-reverse')
+                        break;
                 }
             }
             let posBefore = childrenWithPos.indexOf(elBefore);
             let posDrag = childrenWithPos.indexOf(childrenWithPos.find(x => x[0] == items[0]));
             if (elBefore && elBefore[0] != items[0]) {
-                if (posBefore + 1 === posDrag)
+                if (style.flexDirection == 'row-reverse' && posBefore - 1 === posDrag)
+                    return;
+                if (style.flexDirection == 'row' && posBefore + 1 === posDrag)
                     return;
                 const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
                 let cg = items[0].openGroup('move in flexbox');
-                items[0].remove();
-                elBefore[0].insertAdjacentElement(items[0], 'afterend');
+                if (items[0].parent)
+                    items[0].remove();
+                if (style.flexDirection == 'row-reverse')
+                    elBefore[0].insertAdjacentElement(items[0], 'beforebegin');
+                else
+                    elBefore[0].insertAdjacentElement(items[0], 'afterend');
                 cg.commit();
                 container.instanceServiceContainer.selectionService.setSelectedElements(sel);
             }
@@ -69,29 +77,41 @@ export class FlexBoxPlacementService {
                     return;
                 const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
                 let cg = items[0].openGroup('move in flexbox');
-                items[0].remove();
-                container.insertChild(items[0], 0);
+                if (items[0].parent)
+                    items[0].remove();
+                if (style.flexDirection == 'row-reverse')
+                    container.insertChild(items[0]);
+                else
+                    container.insertChild(items[0], 0);
                 cg.commit();
                 container.instanceServiceContainer.selectionService.setSelectedElements(sel);
             }
         }
-        else if (style.flexDirection == 'column') {
+        else if (style.flexDirection == 'column' || style.flexDirection == 'column-reverse') {
             childrenWithPos.sort(x => x[1].y);
             let elBefore = null;
             for (let c of childrenWithPos) {
                 if (c[1].y + c[1].height / 2 < pos.y) {
                     elBefore = c;
+                    if (style.flexDirection == 'column-reverse')
+                        break;
                 }
             }
             let posBefore = childrenWithPos.indexOf(elBefore);
             let posDrag = childrenWithPos.indexOf(childrenWithPos.find(x => x[0] == items[0]));
             if (elBefore && elBefore[0] != items[0]) {
-                if (posBefore + 1 === posDrag)
+                if (style.flexDirection == 'column-reverse' && posBefore - 1 === posDrag)
+                    return;
+                if (style.flexDirection == 'column' && posBefore + 1 === posDrag)
                     return;
                 const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
                 let cg = items[0].openGroup('move in flexbox');
-                items[0].remove();
-                elBefore[0].insertAdjacentElement(items[0], 'afterend');
+                if (items[0].parent)
+                    items[0].remove();
+                if (style.flexDirection == 'column-reverse')
+                    elBefore[0].insertAdjacentElement(items[0], 'beforebegin');
+                else
+                    elBefore[0].insertAdjacentElement(items[0], 'afterend');
                 cg.commit();
                 container.instanceServiceContainer.selectionService.setSelectedElements(sel);
             }
@@ -100,8 +120,12 @@ export class FlexBoxPlacementService {
                     return;
                 const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
                 let cg = items[0].openGroup('move in flexbox');
-                items[0].remove();
-                container.insertChild(items[0], 0);
+                if (items[0].parent)
+                    items[0].remove();
+                if (style.flexDirection == 'column-reverse')
+                    container.insertChild(items[0]);
+                else
+                    container.insertChild(items[0], 0);
                 cg.commit();
                 container.instanceServiceContainer.selectionService.setSelectedElements(sel);
             }

package/dist/elements/services/propertiesService/services/CssProperties.json

@@ -3,7 +3,26 @@
         "type": "color"
     },
     "additiveSymbols": {},
-    "alignContent": {},
+    "alignContent": {
+        "type": "list",
+        "values": [
+            "start",
+            "end",
+            "flex-start",
+            "flex-end",
+            "center",
+            "normal",
+            "baseline",
+            "first baseline",
+            "last baseline",
+            "space-between",
+            "space-around",
+            "space-evenly",
+            "stretch",
+            "safe",
+            "unsafe"
+        ]
+    },
     "alignItems": {},
     "alignSelf": {},
     "alignmentBaseline": {},
@@ -229,11 +248,30 @@
     "filter": {},
     "flex": {},
     "flexBasis": {},
-    "flexDirection": {},
+    "flexDirection": {
+        "type": "list",
+        "values": [
+            "row",
+            "column",
+            "row-reverse",
+            "column-reverse"
+        ]
+    },
     "flexFlow": {},
-    "flexGrow": {},
-    "flexShrink": {},
-    "flexWrap": {},
+    "flexGrow": {
+        "type": "number"
+    },
+    "flexShrink": {
+        "type": "number"
+    },
+    "flexWrap": {
+        "type": "list",
+        "values": [
+            "nowrap",
+            "wrap",
+            "wrap-reverse"
+        ]
+    },
     "float": {},
     "floodColor": {
         "type": "color"
@@ -413,7 +451,11 @@
     "pointerEvents": {},
     "position": {
         "type": "list",
-        "values": ["static", "relative", "absolute"]
+        "values": [
+            "static",
+            "relative",
+            "absolute"
+        ]
     },
     "prefix": {},
     "quotes": {},

package/dist/elements/widgets/designerView/extensions/AbstractExtensionBase.d.ts

@@ -11,6 +11,7 @@ export declare abstract class AbstractExtensionBase {
     constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas);
     protected _removeAllOverlays(): void;
     protected _addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
+    protected _drawGroup(className?: string, group?: SVGGElement, overlayLayer?: OverlayLayer): SVGGElement;
     protected _drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
     protected _drawCircle(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
     protected _drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;

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

@@ -24,6 +24,13 @@ export class AbstractExtensionBase {
         this.overlayLayerView.addOverlay(this.constructor.name, element, overlayLayer);
         this.overlays.push(element);
     }
+    _drawGroup(className, group, overlayLayer) {
+        const newGroup = this.overlayLayerView.drawGroup(this.constructor.name, className, group, overlayLayer);
+        if (!group) {
+            this.overlays.push(newGroup);
+        }
+        return newGroup;
+    }
     _drawLine(x1, y1, x2, y2, className, line, overlayLayer) {
         const newLine = this.overlayLayerView.drawLine(this.constructor.name, x1, y1, x2, y2, className, line, overlayLayer);
         if (!line) {

package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtension.d.ts

@@ -6,6 +6,7 @@ export declare class DisplayGridExtension extends AbstractExtension {
     private _cells;
     private _texts;
     private _gaps;
+    private _group;
     private gridInformation;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(event?: Event): void;

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

@@ -1,10 +1,12 @@
 import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
+import { getElementCombinedTransform } from "../../../../helper/TransformHelper.js";
 import { AbstractExtension } from '../AbstractExtension.js';
 import { OverlayLayer } from "../OverlayLayer.js";
 export class DisplayGridExtension extends AbstractExtension {
     _cells;
     _texts;
     _gaps;
+    _group;
     gridInformation;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
@@ -16,17 +18,23 @@ 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 (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();
             //draw gaps
             this.gridInformation.gaps.forEach((gap, i) => {
-                this._gaps[i] = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', this._gaps[i], OverlayLayer.Normal);
+                this._gaps[i] = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', this._gaps[i], OverlayLayer.Background);
+                this._group.appendChild(this._gaps[i]);
             });
             //draw cells
             cells.forEach((row, i) => {
                 row.forEach((cell, j) => {
                     this._cells[i][j] = this._drawRect(cell.x, cell.y, cell.width, cell.height, 'svg-grid', this._cells[i][j], OverlayLayer.Background);
+                    this._group.appendChild(this._cells[i][j]);
                     if (cell.name) {
                         this._texts[i][j] = this._drawText(cell.name, cell.x, cell.y, 'svg-grid-area', this._texts[i][j], OverlayLayer.Background);
                         this._texts[i][j].setAttribute("dominant-baseline", "hanging");

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtension.d.ts

@@ -8,6 +8,7 @@ export declare class EditGridColumnRowSizesExtension extends AbstractExtension {
     private _resizers;
     private _initalPos;
     private _initialSizes;
+    private _group;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(event?: Event): void;
     refresh(event?: Event): void;

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

@@ -1,6 +1,7 @@
 import { EventNames } from "../../../../../enums/EventNames.js";
 import { convertCssUnit, convertCssUnitToPixel, getCssUnit } from "../../../../helper/CssUnitConverter.js";
 import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
+import { getElementCombinedTransform } from "../../../../helper/TransformHelper.js";
 import { AbstractExtension } from '../AbstractExtension.js';
 import { OverlayLayer } from "../OverlayLayer.js";
 export class EditGridColumnRowSizesExtension extends AbstractExtension {
@@ -8,6 +9,7 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
     _resizers = [];
     _initalPos;
     _initialSizes;
+    _group;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -16,6 +18,10 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
     }
     refresh(event) {
         this.gridInformation = CalculateGridInformation(this.extendedItem);
+        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';
         this.gridInformation.gaps.forEach((gap, i) => {
             if (gap.width < 3) {
                 gap.width = 3;
@@ -26,6 +32,7 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
                 gap.y--;
             }
             let rect = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-resizer-' + gap.type, this._resizers[i], OverlayLayer.Normal);
+            this._group.appendChild(rect);
             if (!this._resizers[i]) {
                 this._resizers[i] = rect;
                 rect.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(event, rect, gap));

package/dist/elements/widgets/designerView/overlayLayerView.d.ts

@@ -20,6 +20,7 @@ export declare class OverlayLayerView extends BaseCustomWebComponentConstructorA
     removeAllOverlays(): void;
     createPoint(): DOMPointInit;
     elementFromPoint(x: number, y: number): Element;
+    drawGroup(overlaySource: string, className?: string, group?: SVGGElement, overlayLayer?: OverlayLayer): SVGGElement;
     drawLine(overlaySource: string, x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
     drawCircle(overlaySource: string, x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
     drawRect(overlaySource: string, x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;

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

@@ -101,6 +101,15 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         //@ts-ignore
         return this.shadowRoot.elementFromPoint(x, y);
     }
+    drawGroup(overlaySource, className, group, overlayLayer) {
+        if (!group) {
+            group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+            this.addOverlay(overlaySource, group, overlayLayer);
+        }
+        if (className)
+            group.setAttribute('class', className);
+        return group;
+    }
     drawLine(overlaySource, x1, y1, x2, y2, className, line, overlayLayer) {
         if (!line) {
             line = document.createElementNS("http://www.w3.org/2000/svg", "line");

package/package.json

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