@node-projects/web-component-designer 0.0.153 → 0.0.154

package/dist/elements/controls/MetricsEditor.d.ts

@@ -8,7 +8,7 @@ export declare class MetricsEditor extends BaseCustomWebComponentConstructorAppe
     static readonly template: HTMLTemplateElement;
     property: string;
     unsetValue: string;
-    _updateValue(): void;
     ready(): void;
     onDoubleClick(event: PointerEvent): void;
+    onKeyDown(event: KeyboardEvent): void;
 }

package/dist/elements/controls/MetricsEditor.js

@@ -30,7 +30,7 @@ export class MetricsEditor extends BaseCustomWebComponentConstructorAppend {
 }
 
 div.ct {
-  width:280px;height:180px;
+  width:280px;height:120px;
 }
 
 div span {
@@ -83,44 +83,43 @@ span {
 }`;
     static template = html `
   <div class="ct"><span title="position">position</span>
-  <div class="top">-</div><br><div class="left">-</div><div class="ct"><span title="margin">margin</span>
-  <div id="testdiv" [contentEditable]="contentEditable"  @dblclick="onDoubleClick" class="top">-</div><br><div class="left">-</div><div class="ct"><span title="border">border</span>
-  <div class="top">-</div><br><div class="left">-</div><div class="ct"><span title="padding">padding</span>
-  <div class="top">-</div><br><div class="left">-</div><div class="ct" style="font-size:6px"><div class="left">-</div>
-  x
-  <div class="right">-</div>
-  </div><div class="right">-</div><br><div class="bottom">-</div></div><div class="right">-</div><br><div class="bottom">-</div></div><div class="right">-</div><br><div class="bottom">-</div></div><div class="right">-</div><br><div class="bottom">-</div></div>
+  <div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div class="ct"><span title="margin">margin</span>
+  <div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div class="ct"><span title="border">border</span>
+  <div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div class="ct"><span title="padding">padding</span>
+  <div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div class="ct" style="font-size:6px"><div data-style="element" @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div>
+  &nbsp;x&nbsp;
+  <div data-style="element" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div>
+  </div><div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div>
   `;
     property;
     unsetValue;
-    //private _root: HTMLDivElement;
-    //private _contentEditable: HTMLDivElement;
-    _updateValue() {
-    }
     ready() {
-        //this._root = this._getDomElement<HTMLDivElement>("testdiv");
         this._parseAttributesToProperties();
-        this._updateValue();
         this._assignEvents();
     }
     onDoubleClick(event) {
-        let element = this._getDomElement("testdiv");
-        // contentEditable setzten
+        const element = event.target;
         element.setAttribute("contentEditable", "");
-        // - rausnehmen
-        element.innerHTML = "-";
-        // Input auswerten
-        //Input in div schreiben
-        // contentEditable false setzen mit EnterTaste
-        element.onkeydown = (e) => {
-            if (e.key == "Enter") {
-                let _input = element.innerHTML;
-                //let value = document.createElement("input");
-                element.style.marginTop = _input;
-                element.removeAttribute("contentEditable");
-                element.innerHTML = "-";
-            }
-        };
+        const range = document.createRange();
+        const sel = window.getSelection();
+        range.setStart(element.firstChild, 0);
+        range.setEndAfter(element.lastChild);
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+    onKeyDown(event) {
+        const element = event.target;
+        if (event.key == "Enter") {
+            element.removeAttribute("contentEditable");
+            const value = element.innerHTML;
+            const valueChangedEvent = new CustomEvent('value-changed', {
+                detail: {
+                    style: element.dataset['style'],
+                    value: value
+                }
+            });
+            this.dispatchEvent(valueChangedEvent);
+        }
     }
 }
 customElements.define('node-projects-metrics-editor', MetricsEditor);

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

@@ -12,6 +12,7 @@ export declare function addVectors(vectorA: [number, number], vectorB: [number,
 export declare function getDesignerCanvasNormalizedTransformedOriginWithoutParentTransformation(element: HTMLElement, designerCanvas: IDesignerCanvas): DOMPoint;
 export declare function getResultingTransformationBetweenElementAndAllAncestors(element: HTMLElement, ancestor: HTMLElement, excludeAncestor?: boolean): DOMMatrix;
 export declare function getByParentsTransformedPointRelatedToCanvas(element: HTMLElement, point: DOMPoint, designerCanvas: IDesignerCanvas): IPoint;
+export declare function getDesignerCanvasNormalizedTransformedPoint(element: HTMLElement, point: IPoint, designerCanvas: IDesignerCanvas): IPoint;
 export declare function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element: HTMLElement, untransformedCornerPointsOffset: IPoint | null, designerCanvas: IDesignerCanvas): [DOMPoint, DOMPoint, DOMPoint, DOMPoint];
 export declare function extractTranslationFromDOMMatrix(matrix: DOMMatrix): DOMPoint;
 export declare function extractRotationAngleFromDOMMatrix(matrix: DOMMatrix): number;

package/dist/elements/helper/TransformHelper.js

@@ -123,6 +123,9 @@ export function getByParentsTransformedPointRelatedToCanvas(element, point, desi
     }
     return byParentTransformedPointRelatedToCanvas;
 }
+export function getDesignerCanvasNormalizedTransformedPoint(element, point, designerCanvas) {
+    return getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, { x: -point.x, y: -point.y }, designerCanvas)[0];
+}
 export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, untransformedCornerPointsOffset, designerCanvas) {
     const topleft = 0;
     const topright = 1;

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

@@ -57,18 +57,22 @@ export class FlexBoxPlacementService {
             if (elBefore && elBefore[0] != items[0]) {
                 if (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');
                 cg.commit();
+                container.instanceServiceContainer.selectionService.setSelectedElements(sel);
             }
             else if (elBefore == null) {
                 if (posDrag == 0)
                     return;
+                const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
                 let cg = items[0].openGroup('move in flexbox');
                 items[0].remove();
                 container.insertChild(items[0], 0);
                 cg.commit();
+                container.instanceServiceContainer.selectionService.setSelectedElements(sel);
             }
         }
         else if (style.flexDirection == 'column') {
@@ -84,18 +88,22 @@ export class FlexBoxPlacementService {
             if (elBefore && elBefore[0] != items[0]) {
                 if (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');
                 cg.commit();
+                container.instanceServiceContainer.selectionService.setSelectedElements(sel);
             }
             else if (elBefore == null) {
                 if (posDrag == 0)
                     return;
+                const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
                 let cg = items[0].openGroup('move in flexbox');
                 items[0].remove();
                 container.insertChild(items[0], 0);
                 cg.commit();
+                container.instanceServiceContainer.selectionService.setSelectedElements(sel);
             }
         }
         placementView.extensionManager.refreshAllExtensions([container]);

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

@@ -75,10 +75,12 @@ export class RotateExtension extends AbstractExtension {
                     let angle = Math.atan2(currentPoint.y - transformOriginInPx.y, currentPoint.x - transformOriginInPx.x) * (180 / Math.PI);
                     angle = angle - this._initialOverlayAngle + this._initialElementAngle;
                     angle *= -1;
+                    if (!event.ctrlKey)
+                        angle = Math.ceil(angle / 15) * 15;
                     const rotationMatrix3d = getRotationMatrix3d('z', angle);
                     rotateElementByMatrix3d(this.extendedItem.element, rotationMatrix3d);
-                    let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 30, y: 30 }, this.designerCanvas);
-                    let angleTextPosition = transformedCornerPoints[0];
+                    const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 30, y: 30 }, this.designerCanvas);
+                    const angleTextPosition = transformedCornerPoints[0];
                     this._textAngle = this._drawTextWithBackground(this._actualRotationAngle + '°', angleTextPosition.x, angleTextPosition.y, 'white', 'svg-rotate-text', this._textAngle);
                     this._textAngle[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
                     this._textAngle[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';

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

@@ -1,5 +1,6 @@
 import { EventNames } from "../../../../enums/EventNames";
 import { convertCssUnit, getCssUnit } from "../../../helper/CssUnitConverter";
+import { getDesignerCanvasNormalizedTransformedPoint } from "../../../helper/TransformHelper";
 import { AbstractExtension } from './AbstractExtension';
 export class TransformOriginExtension extends AbstractExtension {
     _startPos;
@@ -10,21 +11,15 @@ export class TransformOriginExtension extends AbstractExtension {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
-        const rect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         const computed = getComputedStyle(this.extendedItem.element);
-        const x = 0;
-        const y = 1;
         const to = computed.transformOrigin.split(' '); // This value remains the same regardless of scalefactor
-        const toInPercentage = [];
-        toInPercentage[0] = parseInt(to[0]) / parseInt(getComputedStyle(this.extendedItem.element).width); // This value remains the same regardless of scalefactor
-        toInPercentage[1] = parseInt(to[1]) / parseInt(getComputedStyle(this.extendedItem.element).height); // This value remains the same regardless of scalefactor
-        const toDOMPoint = new DOMPoint(rect.x + toInPercentage[x] * rect.width, rect.y + toInPercentage[y] * rect.height);
+        const toDOMPoint = getDesignerCanvasNormalizedTransformedPoint(this.extendedItem.element, { x: parseFloat(to[0]), y: parseFloat(to[1]) }, this.designerCanvas);
         this._circle = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 5 / this.designerCanvas.zoomFactor, 'svg-transform-origin');
         this._circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
         this._circle.style.cursor = 'pointer';
         this._circle2 = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 1 / this.designerCanvas.zoomFactor, 'svg-transform-origin');
         this._circle2.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
-        this._circle2.style.pointerEvents = 'pointer-events: none';
+        this._circle2.style.pointerEvents = 'none';
         this._circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event));
         this._circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event));
         this._circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event)); //TODO: -> assign to window

package/package.json

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