@node-projects/web-component-designer 0.0.237 → 0.0.239

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbar.js

@@ -25,7 +25,7 @@ export class DesignerToolbar extends BaseCustomWebComponentConstructorAppend {
     _toolButtonsElem;
     _serviceContainer;
     _popupContainer;
-    _designerView;
+    designerView;
     constructor() {
         super();
         this._toolButtonsElem = this._getDomElement("toolButtons");
@@ -33,7 +33,7 @@ export class DesignerToolbar extends BaseCustomWebComponentConstructorAppend {
     }
     initialize(serviceContainer, designerView) {
         this._serviceContainer = serviceContainer;
-        this._designerView = designerView;
+        this.designerView = designerView;
         for (let tb of this._serviceContainer.designViewToolbarButtons) {
             this._toolButtonsElem.appendChild(tb.provideButton(designerView.designerCanvas));
         }
@@ -62,25 +62,25 @@ export class DesignerToolbar extends BaseCustomWebComponentConstructorAppend {
         if (this._popupContainer.children.length) {
             this._popupContainer.innerHTML = '';
         }
-        this._designerView.designerCanvas.executeCommand({ type: CommandType.setTool, parameter: tool });
+        this.designerView.designerCanvas.executeCommand({ type: CommandType.setTool, parameter: tool });
     }
     setStrokeColor(color) {
         if (this._popupContainer.children.length) {
             this._popupContainer.innerHTML = '';
         }
-        this._designerView.designerCanvas.executeCommand({ type: CommandType.setStrokeColor, parameter: color });
+        this.designerView.designerCanvas.executeCommand({ type: CommandType.setStrokeColor, parameter: color });
     }
     setFillBrush(color) {
         if (this._popupContainer.children.length) {
             this._popupContainer.innerHTML = '';
         }
-        this._designerView.designerCanvas.executeCommand({ type: CommandType.setFillBrush, parameter: color });
+        this.designerView.designerCanvas.executeCommand({ type: CommandType.setFillBrush, parameter: color });
     }
     setStrokeThickness(input) {
         if (this._popupContainer.children.length) {
             this._popupContainer.innerHTML = '';
         }
-        this._designerView.designerCanvas.executeCommand({ type: CommandType.setStrokeThickness, parameter: input });
+        this.designerView.designerCanvas.executeCommand({ type: CommandType.setStrokeThickness, parameter: input });
     }
 }
 customElements.define('node-projects-designer-toolbar', DesignerToolbar);

package/dist/elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.d.ts

@@ -0,0 +1,5 @@
+import { IDesignerCanvas } from "../../../IDesignerCanvas.js";
+import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js";
+export declare class TransformToolButtonProvider implements IDesignViewToolbarButtonProvider {
+    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
+}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.js

@@ -0,0 +1,10 @@
+import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
+import { assetsPath } from "../../../../../../Constants.js";
+import { TransformToolPopup } from "../popups/TransformToolPopup.js";
+export class TransformToolButtonProvider {
+    provideButton(designerCanvas) {
+        const button = new DesignerToolbarButton(designerCanvas, { 'TransformTool': { icon: assetsPath + 'images/layout/TransformTool.svg' } });
+        button.popup = TransformToolPopup;
+        return button;
+    }
+}

package/dist/elements/widgets/designerView/tools/toolBar/popups/TransformToolPopup.d.ts

@@ -0,0 +1,31 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare class TransformToolPopup extends BaseCustomWebComponentConstructorAppend {
+    private _designerView;
+    private _previousSelectionRect;
+    private _selectionChanged;
+    private _relativeButton;
+    private _absoluteButton;
+    private _applyButton;
+    private _inputX;
+    private _inputY;
+    private _inputR;
+    private _originTopLeft;
+    private _originTopMid;
+    private _originTopRight;
+    private _originMidLeft;
+    private _originMidMid;
+    private _originMidRight;
+    private _originBotLeft;
+    private _originBotMid;
+    private _originBotRight;
+    private _transformMode;
+    private _transformOrigin;
+    static style: CSSStyleSheet;
+    static template: HTMLTemplateElement;
+    constructor();
+    private _changePositionMode;
+    private _applyTransform;
+    private _calculateTransformOriginPosition;
+    private _checkOrigin;
+    private _calculateTransform;
+}

package/dist/elements/widgets/designerView/tools/toolBar/popups/TransformToolPopup.js

@@ -0,0 +1,293 @@
+import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
+import { filterChildPlaceItems } from '../../../../../helper/LayoutHelper.js';
+import { calculateOuterRect } from '../../../../../helper/ElementHelper.js';
+export class TransformToolPopup extends BaseCustomWebComponentConstructorAppend {
+    _designerView;
+    _previousSelectionRect;
+    _selectionChanged;
+    _relativeButton;
+    _absoluteButton;
+    _applyButton;
+    _inputX;
+    _inputY;
+    _inputR;
+    _originTopLeft;
+    _originTopMid;
+    _originTopRight;
+    _originMidLeft;
+    _originMidMid;
+    _originMidRight;
+    _originBotLeft;
+    _originBotMid;
+    _originBotRight;
+    _transformMode;
+    _transformOrigin;
+    static style = css `
+      .container {
+          width: 220px;
+          min-height: 200px;
+          color: white;
+          background-color: rgb(64, 64, 64);
+          border: 1px solid black;
+      }
+      header {
+          text-align: center;
+      }
+      .inputs{
+        float: left;
+        margin-top: 5px;
+        align-items: center;
+      }
+      .input {
+        display: flex;
+        align-items: center; 
+        margin-top: 5px;
+      }
+      .text {
+        margin-left: 5px;
+        font-size: 14px;
+      }
+      .strokecolor{ 
+        float: both;
+      }
+      .fillbrush{
+        float: both;
+      }
+      .strokethickness{
+        float: both;
+      }
+      #input-div{
+        display: grid;
+        grid-template-columns: 1fr 9fr;
+        grid-template-rows: 25px 25px 25px;
+        grid-row-gap: 2px;
+        font-size: small;
+        margin: 10px;
+      }
+      #button-div{
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 25px;
+        font-size: small;
+        margin: 10px;
+        grid-column-gap: 5px
+      }
+      #apply-div{
+        font-size: small;
+        justify-content: center;
+        width: 100%;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        display: flex;
+      }
+      #cube{
+        display: grid;
+        grid-template-columns: 20px 20px 20px;
+        grid-template-rows: 20px 20px 20px;
+        grid-gap: 10px;
+        padding: 10px;
+        top: -80px;
+        position: relative;
+      }
+      #cube-background{
+        width: 60px;
+        height: 60px;
+        background: gray;
+        margin-top: 20px;
+        margin-left: 20px;
+      }
+      `;
+    static template = html `
+        <div class="container">
+          <header>
+            <h2 id="title" style="margin:0px;">Transform</h2>
+          </header>
+          <main id="content-area">
+            <div id="input-div">
+              <span>X:</span>
+              <input type="number" id="transform-input-x">
+              <span>Y:</span>
+              <input type="number" id="transform-input-y">
+              <span>R:</span>
+              <input type="number" id="transform-input-r">
+            </div>
+            <div id="button-div">
+              <button id="transform-button-absolute">absolute</button>
+              <button id="transform-button-relative">relative</button>
+            </div>
+
+            <div style="justify-content: center; display: grid; height: 100px">
+              <div id="cube-background"></div>
+                <div id="cube">
+                  <input id="origin-top-left" type="radio" name="origin-radio">
+                  <input id="origin-top-mid" type="radio" name="origin-radio">
+                  <input id="origin-top-right" type="radio" name="origin-radio">
+                  <input id="origin-mid-left" type="radio" name="origin-radio">
+                  <input id="origin-mid-mid" type="radio" name="origin-radio" checked>
+                  <input id="origin-mid-right" type="radio" name="origin-radio">
+                  <input id="origin-bot-left" type="radio" name="origin-radio">
+                  <input id="origin-bot-mid" type="radio" name="origin-radio">
+                  <input id="origin-bot-right" type="radio" name="origin-radio">
+                </div>
+            </div>
+
+            <div id="apply-div">
+              <button id="transform-button-apply" style="width:100px;">apply</button>
+            </div>
+          </main>
+        </div>`;
+    constructor() {
+        super();
+        this._relativeButton = this._getDomElement("transform-button-relative");
+        this._absoluteButton = this._getDomElement("transform-button-absolute");
+        this._applyButton = this._getDomElement("transform-button-apply");
+        this._inputX = this._getDomElement("transform-input-x");
+        this._inputY = this._getDomElement("transform-input-y");
+        this._inputR = this._getDomElement("transform-input-r");
+        this._originTopLeft = this._getDomElement("origin-top-left");
+        this._originTopMid = this._getDomElement("origin-top-mid");
+        this._originTopRight = this._getDomElement("origin-top-right");
+        this._originMidLeft = this._getDomElement("origin-mid-left");
+        this._originMidMid = this._getDomElement("origin-mid-mid");
+        this._originMidRight = this._getDomElement("origin-mid-right");
+        this._originBotLeft = this._getDomElement("origin-bot-left");
+        this._originBotMid = this._getDomElement("origin-bot-mid");
+        this._originBotRight = this._getDomElement("origin-bot-right");
+        this._relativeButton.onclick = () => this._changePositionMode("relative");
+        this._absoluteButton.onclick = () => this._changePositionMode("absolute");
+        this._applyButton.onclick = () => this._applyTransform();
+        this._transformMode = "relative";
+        this._changePositionMode(this._transformMode);
+    }
+    _changePositionMode(mode) {
+        if (mode == "relative") {
+            this._relativeButton.style.backgroundColor = "#6F8A9D";
+            this._relativeButton.style.color = "black";
+            this._absoluteButton.style.backgroundColor = "#A4B5C1";
+            this._absoluteButton.style.color = "#77716E";
+        }
+        else {
+            this._absoluteButton.style.backgroundColor = "#6F8A9D";
+            this._absoluteButton.style.color = "black";
+            this._relativeButton.style.backgroundColor = "#A4B5C1";
+            this._relativeButton.style.color = "#77716E";
+        }
+        this._transformMode = mode;
+    }
+    _applyTransform() {
+        this._checkOrigin();
+        this._designerView = this.getRootNode().host.designerView;
+        let selection = this._designerView.instanceServiceContainer.selectionService.selectedElements;
+        selection = filterChildPlaceItems(selection);
+        this._selectionChanged = false;
+        this._designerView.instanceServiceContainer.selectionService.onSelectionChanged.once(() => {
+            this._selectionChanged = true;
+            this._previousSelectionRect = null;
+        });
+        if (selection.length != 0) {
+            let inputPos = {
+                x: isNaN(this._inputX.valueAsNumber) ? null : this._inputX.valueAsNumber,
+                y: isNaN(this._inputY.valueAsNumber) ? null : this._inputY.valueAsNumber
+            };
+            let inputRotation = this._inputR.valueAsNumber ? this._inputR.valueAsNumber : 0;
+            let grp = selection[0].openGroup("Transform selection");
+            if (!this._previousSelectionRect || this._selectionChanged)
+                this._previousSelectionRect = calculateOuterRect(selection, this._designerView.designerCanvas);
+            let origin = this._calculateTransformOriginPosition(this._previousSelectionRect);
+            for (let item of selection) {
+                let itemPos = {
+                    x: parseFloat(item.getStyle("left")),
+                    y: parseFloat(item.getStyle("top")),
+                    width: parseFloat(item.getStyle("width")),
+                    height: parseFloat(item.getStyle("height"))
+                };
+                let itemRotStyle = item.getStyle("transform");
+                let itemRotation = 0;
+                if (itemRotStyle)
+                    itemRotation = parseFloat(item.getStyle("transform").replaceAll("rotate(", "").replaceAll("deg)", ""));
+                let newPos = this._calculateTransform(this._previousSelectionRect, origin, itemPos, inputRotation, inputPos, this._transformMode);
+                item.setStyle("left", newPos.x.toString() + "px");
+                item.setStyle("top", newPos.y.toString() + "px");
+                let rotation;
+                if (this._transformMode == 'relative')
+                    rotation = itemRotation + inputRotation;
+                else
+                    rotation = inputRotation;
+                while (rotation >= 360)
+                    rotation -= 360;
+                if (rotation != 0)
+                    item.setStyle("transform", "rotate(" + rotation + "deg)");
+                else
+                    item.removeStyle("transform");
+            }
+            grp.commit();
+        }
+    }
+    _calculateTransformOriginPosition(selectionRect) {
+        switch (this._transformOrigin) {
+            case "topLeft":
+                return { x: selectionRect.x, y: selectionRect.y };
+            case "topMid":
+                return { x: selectionRect.x + selectionRect.width / 2, y: selectionRect.y };
+            case "topRight":
+                return { x: selectionRect.x + selectionRect.width, y: selectionRect.y };
+            case "midLeft":
+                return { x: selectionRect.x, y: selectionRect.y + selectionRect.height / 2 };
+            case "midMid":
+                return { x: selectionRect.x + selectionRect.width / 2, y: selectionRect.y + selectionRect.height / 2 };
+            case "midRight":
+                return { x: selectionRect.x + selectionRect.width, y: selectionRect.y + selectionRect.height / 2 };
+            case "botLeft":
+                return { x: selectionRect.x, y: selectionRect.y + selectionRect.height };
+            case "botMid":
+                return { x: selectionRect.x + selectionRect.width / 2, y: selectionRect.y + selectionRect.height };
+            case "botRight":
+                return { x: selectionRect.x + selectionRect.width, y: selectionRect.y + selectionRect.height };
+        }
+    }
+    _checkOrigin() {
+        if (this._originTopLeft.checked)
+            this._transformOrigin = "topLeft";
+        else if (this._originTopMid.checked)
+            this._transformOrigin = "topMid";
+        else if (this._originTopRight.checked)
+            this._transformOrigin = "topRight";
+        else if (this._originMidLeft.checked)
+            this._transformOrigin = "midLeft";
+        else if (this._originMidMid.checked)
+            this._transformOrigin = "midMid";
+        else if (this._originMidRight.checked)
+            this._transformOrigin = "midRight";
+        else if (this._originBotLeft.checked)
+            this._transformOrigin = "botLeft";
+        else if (this._originBotMid.checked)
+            this._transformOrigin = "botMid";
+        else if (this._originBotRight.checked)
+            this._transformOrigin = "botRight";
+    }
+    _calculateTransform(selectionRect, origin, itemRect, rotation, inputPos, transformMode) {
+        let newPoint;
+        // convert deg in rad
+        rotation = rotation * (Math.PI / 180);
+        if (transformMode == 'absolute') {
+            if (inputPos.x)
+                inputPos.x = inputPos.x - selectionRect.x;
+            if (inputPos.y)
+                inputPos.y = inputPos.y - selectionRect.y;
+        }
+        origin = {
+            x: origin.x - itemRect.width / 2,
+            y: origin.y - itemRect.height / 2
+        };
+        let diffItemPosToOrigin = {
+            x: itemRect.x - origin.x,
+            y: itemRect.y - origin.y
+        };
+        newPoint = {
+            x: Math.cos(rotation) * diffItemPosToOrigin.x - Math.sin(rotation) * diffItemPosToOrigin.y + origin.x + inputPos.x,
+            y: Math.sin(rotation) * diffItemPosToOrigin.x + Math.cos(rotation) * diffItemPosToOrigin.y + origin.y + inputPos.y
+        };
+        return newPoint;
+    }
+}
+customElements.define('node-projects-designer-transformtool-popup', TransformToolPopup);

package/dist/index.d.ts

@@ -44,6 +44,8 @@ export * from "./elements/services/demoProviderService/DemoProviderService.js";
 export type { IDemoProviderService } from "./elements/services/demoProviderService/IDemoProviderService.js";
 export * from "./elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.js";
 export type { IDesignItemDocumentPositionService } from "./elements/services/designItemDocumentPositionService/IDesignItemDocumentPositionService.js";
+export * from "./elements/services/dragDropService/ExternalDragDropService.js";
+export type { IExternalDragDropService } from "./elements/services/dragDropService/IExternalDragDropService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
 export type { IDragDropService } from "./elements/services/dragDropService/IDragDropService.js";
 export type { IElementInteractionService } from "./elements/services/elementInteractionService/IElementInteractionService.js";

package/dist/index.js

@@ -29,6 +29,7 @@ export * from "./elements/services/copyPasteService/CopyPasteService.js";
 export * from "./elements/services/copyPasteService/CopyPasteAsJsonService.js";
 export * from "./elements/services/demoProviderService/DemoProviderService.js";
 export * from "./elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.js";
+export * from "./elements/services/dragDropService/ExternalDragDropService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
 export * from "./elements/services/elementsService/JsonFileElementsService.js";
 export * from "./elements/services/elementsService/PreDefinedElementsService.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.237",
+  "version": "0.0.239",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,7 +13,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.10.9",
+    "@node-projects/base-custom-webcomponent": "^0.11.0",
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {
@@ -25,8 +25,8 @@
     "@types/css-tree": "^2.3.1",
     "@types/jquery": "^3.5.16",
     "@types/jquery.fancytree": "0.0.7",
-    "@types/node": "^20.3.1",
-    "ace-builds": "^1.22.1",
+    "@types/node": "^20.3.3",
+    "ace-builds": "^1.23.1",
     "codemirror": "^6.0.1",
     "css-tree": "^2.3.1",
     "esprima-next": "^5.8.4",
@@ -36,8 +36,8 @@
     "jquery.fancytree": "^2.38.3",
     "mdn-data": "^2.0.32",
     "monaco-editor": "^0.39.0",
-    "ts-jest": "^29.1.0",
-    "typescript": "^5.1.3",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.1.6",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "repository": {