@node-projects/web-component-designer 0.0.89 → 0.0.90

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

@@ -0,0 +1,7 @@
+import { IDesignerCanvas } from "../..";
+import { Orientation } from "../../enums/Orientation";
+export declare abstract class ArrangeHelper {
+    static arrangeElements(orientation: Orientation, designerCanvas: IDesignerCanvas): void;
+    private static arrange;
+    private static formGroup;
+}

package/dist/elements/helper/ArrangeHelper.js

@@ -0,0 +1,79 @@
+import { Orientation } from "../../enums/Orientation";
+export class ArrangeHelper {
+    static arrangeElements(orientation, designerCanvas) {
+        switch (orientation) {
+            case Orientation.TOP: {
+                const grp = this.formGroup(ArrangeDirection.TOP, designerCanvas);
+                const top = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('top');
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'top', top);
+                }
+                grp.commit();
+                break;
+            }
+            case Orientation.RIGHT: {
+                const grp = this.formGroup(ArrangeDirection.RIGHT, designerCanvas);
+                const arrElement = designerCanvas.getNormalizedElementCoordinates(designerCanvas.instanceServiceContainer.selectionService.primarySelection.element);
+                const right = Math.floor(arrElement.x + arrElement.width);
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'left', (right - Math.floor(designerCanvas.getNormalizedElementCoordinates(elem.element).width)) + "px");
+                }
+                grp.commit();
+                break;
+            }
+            case Orientation.BOTTOM:
+                const grp = this.formGroup(ArrangeDirection.BOTTOM, designerCanvas);
+                const arrElement = designerCanvas.getNormalizedElementCoordinates(designerCanvas.instanceServiceContainer.selectionService.primarySelection.element);
+                const top = Math.floor(arrElement.y + arrElement.height);
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'top', (top - Math.floor(designerCanvas.getNormalizedElementCoordinates(elem.element).height)) + "px");
+                }
+                grp.commit();
+                break;
+            case Orientation.LEFT: {
+                const grp = this.formGroup(ArrangeDirection.LEFT, designerCanvas);
+                const left = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('left');
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'left', left);
+                }
+                grp.commit();
+                break;
+            }
+            case Orientation.VERTICAL_CENTER: {
+                const grp = this.formGroup(ArrangeDirection.VERTICAL_CENTER, designerCanvas);
+                const arrElement = designerCanvas.getNormalizedElementCoordinates(designerCanvas.instanceServiceContainer.selectionService.primarySelection.element);
+                const ver_center = arrElement.y + arrElement.height / 2;
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'top', (ver_center - Math.floor(designerCanvas.getNormalizedElementCoordinates(elem.element).height) / 2) + "px");
+                }
+                grp.commit();
+                break;
+            }
+            case Orientation.HORIZONTAL_CENTER: {
+                const grp = this.formGroup(ArrangeDirection.HORIZONTAL_CENTER, designerCanvas);
+                const arrElement = designerCanvas.getNormalizedElementCoordinates(designerCanvas.instanceServiceContainer.selectionService.primarySelection.element);
+                const hor_center = arrElement.x + (arrElement.width / 2);
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'left', (hor_center - Math.floor(designerCanvas.getNormalizedElementCoordinates(elem.element).width) / 2) + "px");
+                }
+                grp.commit();
+                break;
+            }
+        }
+    }
+    static arrange(element, attribut, value) {
+        element.setStyle(attribut, value);
+    }
+    static formGroup(name, designerCanvas) {
+        return designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup(name);
+    }
+}
+var ArrangeDirection;
+(function (ArrangeDirection) {
+    ArrangeDirection["TOP"] = "arrangeTop";
+    ArrangeDirection["RIGHT"] = "arrangeRight";
+    ArrangeDirection["BOTTOM"] = "arrangeBottom";
+    ArrangeDirection["LEFT"] = "arrangeLeft";
+    ArrangeDirection["HORIZONTAL_CENTER"] = "arrangeHorizontalCenter";
+    ArrangeDirection["VERTICAL_CENTER"] = "arrangeVerticalCenter";
+})(ArrangeDirection || (ArrangeDirection = {}));

package/dist/elements/services/modelCommandService/DefaultModelCommandService.js

@@ -1,4 +1,6 @@
 import { CommandType } from "../../../commandHandling/CommandType.js";
+import { ArrangeHelper } from "../../helper/ArrangeHelper.js";
+import { Orientation } from "../../../enums/Orientation.js";
 export class DefaultModelCommandService {
     canExecuteCommand(designerCanvas, command) {
         if (command.type == CommandType.moveBackward ||
@@ -33,21 +35,23 @@ export class DefaultModelCommandService {
             sel.parent.insertChild(sel, 0);
         else if (command.type == CommandType.moveToFront)
             sel.parent.insertChild(sel);
+        else if (command.type == CommandType.arrangeTop) {
+            ArrangeHelper.arrangeElements(Orientation.TOP, designerCanvas);
+        }
+        else if (command.type == CommandType.arrangeRight) {
+            ArrangeHelper.arrangeElements(Orientation.RIGHT, designerCanvas);
+        }
         else if (command.type == CommandType.arrangeLeft) {
-            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('arrangeLeft');
-            const left = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('left');
-            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                s.setStyle('left', left);
-            }
-            grp.commit();
+            ArrangeHelper.arrangeElements(Orientation.LEFT, designerCanvas);
         }
-        else if (command.type == CommandType.arrangeTop) {
-            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('arrangeTop');
-            const top = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('top');
-            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                s.setStyle('top', top);
-            }
-            grp.commit();
+        else if (command.type == CommandType.arrangeBottom) {
+            ArrangeHelper.arrangeElements(Orientation.BOTTOM, designerCanvas);
+        }
+        else if (command.type == CommandType.arrangeCenter) {
+            ArrangeHelper.arrangeElements(Orientation.HORIZONTAL_CENTER, designerCanvas);
+        }
+        else if (command.type == CommandType.arrangeMiddle) {
+            ArrangeHelper.arrangeElements(Orientation.VERTICAL_CENTER, designerCanvas);
         }
         else if (command.type == CommandType.unifyHeight) {
             const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('unifyHeight');

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

@@ -40,4 +40,5 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     getItemsBelowMouse(event: MouseEvent): Element[];
     zoomTowardsPoint(point: IPoint, scalechange: number): void;
     zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
+    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): void;
 }

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

@@ -31,6 +31,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _zoomFactor;
     private _scaleFactor;
     private _canvasOffset;
+    private _currentContextMenu;
     private _lastPointerDownHandler;
     get zoomFactor(): number;
     set zoomFactor(value: number);
@@ -45,7 +46,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _canvasContainer;
     private _outercanvas2;
     private _lastHoverDesignItem;
-    private _onContextMenuBound;
     private _pointerEventHandlerBound;
     private _firstConnect;
     private _onKeyDownBound;
@@ -81,7 +81,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _onDragLeave;
     private _onDragOver;
     private _onDrop;
-    private _onContextMenu;
     showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
     private _onDblClick;
     private onKeyUp;

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

@@ -39,6 +39,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _zoomFactor = 1; //if scale or zoom css property is used this needs to be the value
     _scaleFactor = 1; //if scale css property is used this need to be the scale value
     _canvasOffset = { x: 0, y: 0 };
+    _currentContextMenu;
     _lastPointerDownHandler;
     get zoomFactor() {
         return this._zoomFactor;
@@ -70,7 +71,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _canvasContainer;
     _outercanvas2;
     _lastHoverDesignItem;
-    _onContextMenuBound;
     _pointerEventHandlerBound;
     _firstConnect;
     _onKeyDownBound;
@@ -166,9 +166,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._onKeyDownBound = this.onKeyDown.bind(this);
         this._onKeyUpBound = this.onKeyUp.bind(this);
         this._onDblClickBound = this._onDblClick.bind(this);
-        this._onContextMenuBound = this._onContextMenu.bind(this);
         this._pointerEventHandlerBound = this._pointerEventHandler.bind(this);
-        this.clickOverlay.oncontextmenu = this._onContextMenuBound;
+        this.clickOverlay.oncontextmenu = (e) => e.preventDefault();
     }
     get designerWidth() {
         return this._canvasContainer.style.width;
@@ -514,30 +513,16 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             }
         }
     }
-    _onContextMenu(event) {
-        event.preventDefault();
-        if (!event.shiftKey) {
-            let items = this.getItemsBelowMouse(event);
-            if (items.indexOf(this.instanceServiceContainer.selectionService.primarySelection.element) >= 0)
-                this.showDesignItemContextMenu(this.instanceServiceContainer.selectionService.primarySelection, event);
-            else {
-                const designItem = DesignItem.GetOrCreateDesignItem(event.target, this.serviceContainer, this.instanceServiceContainer);
-                if (!this.instanceServiceContainer.selectionService.isSelected(designItem)) {
-                    this.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
-                }
-                this.showDesignItemContextMenu(designItem, event);
-            }
-        }
-    }
     showDesignItemContextMenu(designItem, event) {
+        this._currentContextMenu?.close();
         const mnuItems = [];
         for (let cme of this.serviceContainer.designerContextMenuExtensions) {
             if (cme.shouldProvideContextmenu(event, this, designItem, 'designer')) {
                 mnuItems.push(...cme.provideContextMenuItems(event, this, designItem));
             }
         }
-        let ctxMnu = ContextMenuHelper.showContextMenu(null, event, null, mnuItems);
-        return ctxMnu;
+        this._currentContextMenu = ContextMenuHelper.showContextMenu(null, event, null, mnuItems);
+        return this._currentContextMenu;
     }
     _onDblClick(event) {
         event.preventDefault();
@@ -692,8 +677,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
             return;
-        if (event.buttons == 2)
-            return;
         let currentElement;
         if (forceElement)
             currentElement = forceElement;

package/dist/elements/widgets/designerView/tools/PointerTool.d.ts

@@ -16,6 +16,7 @@ export declare class PointerTool implements ITool {
     constructor();
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
+    private _showContextMenu;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
     private _pointerActionTypeDrawSelection;
     private _resetPointerEventsForClickThrough;

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

@@ -22,7 +22,26 @@ export class PointerTool {
     }
     dispose() {
     }
+    _showContextMenu(event, designerCanvas) {
+        event.preventDefault();
+        if (!event.shiftKey) {
+            let items = designerCanvas.getItemsBelowMouse(event);
+            if (items.indexOf(designerCanvas.instanceServiceContainer.selectionService.primarySelection?.element) >= 0)
+                designerCanvas.showDesignItemContextMenu(designerCanvas.instanceServiceContainer.selectionService.primarySelection, event);
+            else {
+                const designItem = DesignItem.GetOrCreateDesignItem(event.target, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                if (!designerCanvas.instanceServiceContainer.selectionService.isSelected(designItem)) {
+                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+                }
+                designerCanvas.showDesignItemContextMenu(designItem, event);
+            }
+        }
+    }
     pointerEventHandler(designerCanvas, event, currentElement) {
+        if (event.button == 2) {
+            this._showContextMenu(event, designerCanvas);
+            return;
+        }
         if (((event.ctrlKey || event.metaKey) && event.shiftKey) || event.buttons == 4) {
             const panTool = designerCanvas.serviceContainer.designerTools.get(NamedTools.Pan);
             if (panTool) {

package/dist/enums/Orientation.d.ts

@@ -0,0 +1,8 @@
+export declare enum Orientation {
+    TOP = 0,
+    RIGHT = 1,
+    BOTTOM = 2,
+    LEFT = 3,
+    VERTICAL_CENTER = 4,
+    HORIZONTAL_CENTER = 5
+}

package/dist/enums/Orientation.js

@@ -0,0 +1,9 @@
+export var Orientation;
+(function (Orientation) {
+    Orientation[Orientation["TOP"] = 0] = "TOP";
+    Orientation[Orientation["RIGHT"] = 1] = "RIGHT";
+    Orientation[Orientation["BOTTOM"] = 2] = "BOTTOM";
+    Orientation[Orientation["LEFT"] = 3] = "LEFT";
+    Orientation[Orientation["VERTICAL_CENTER"] = 4] = "VERTICAL_CENTER";
+    Orientation[Orientation["HORIZONTAL_CENTER"] = 5] = "HORIZONTAL_CENTER";
+})(Orientation || (Orientation = {}));

package/package.json

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