@node-projects/web-component-designer 0.0.133 → 0.0.134

package/dist/elements/helper/contextMenu/ContextMenu.d.ts

@@ -12,7 +12,6 @@ export declare class ContextMenu {
     options: IContextMenuOptions;
     private num;
     private _windowDownBound;
-    private _windowUpBound;
     private _windowKeyUpBound;
     private _windowResizeBound;
     private _menuElement;
@@ -22,7 +21,6 @@ export declare class ContextMenu {
     display(event: MouseEvent): void;
     _windowResize(): void;
     _windowDown(e: MouseEvent): void;
-    _windowUp(e: MouseEvent): void;
     _windowKeyUp(e: KeyboardEvent): void;
     static show(menu: IContextMenuItem[], event: MouseEvent, options?: IContextMenuOptions): ContextMenu;
     close(): void;

package/dist/elements/helper/contextMenu/ContextMenu.js

@@ -1,4 +1,5 @@
 import { css } from "@node-projects/base-custom-webcomponent";
+import { sleep } from "../Helper";
 export class ContextMenu {
     static _contextMenuCss = css `
 	  .context_menu {
@@ -113,7 +114,6 @@ export class ContextMenu {
     options;
     num;
     _windowDownBound;
-    _windowUpBound;
     _windowKeyUpBound;
     _windowResizeBound;
     _menuElement;
@@ -123,7 +123,6 @@ export class ContextMenu {
         this.options = options;
         this.reload();
         this._windowDownBound = this._windowDown.bind(this);
-        this._windowUpBound = this._windowUp.bind(this);
         this._windowKeyUpBound = this._windowKeyUp.bind(this);
         this._windowResizeBound = this._windowResize.bind(this);
     }
@@ -231,11 +230,11 @@ export class ContextMenu {
             menu.classList.remove("cm_border_bottom");
         }
         menu.classList.add("display");
+        event.preventDefault();
         window.addEventListener("keyup", this._windowKeyUpBound);
         window.addEventListener("mousedown", this._windowDownBound);
-        window.addEventListener("mouseup", this._windowUpBound);
         window.addEventListener("resize", this._windowResizeBound);
-        event.preventDefault();
+        sleep(100).then(() => window.addEventListener("contextmenu", this._windowDownBound));
     }
     _windowResize() {
         this.close();
@@ -245,11 +244,6 @@ export class ContextMenu {
         if (p.indexOf(this._menuElement) < 0)
             this.close();
     }
-    _windowUp(e) {
-        const p = e.composedPath();
-        if (p.indexOf(this._menuElement) < 0)
-            this.close();
-    }
     _windowKeyUp(e) {
         if (e.key === 'Escape') {
             this.close();
@@ -264,7 +258,7 @@ export class ContextMenu {
         this._menuElement.remove();
         window.removeEventListener("keyup", this._windowKeyUpBound);
         window.removeEventListener("mousedown", this._windowDownBound);
-        window.removeEventListener("mouseup", this._windowUpBound);
+        window.removeEventListener("contextmenu", this._windowDownBound);
         window.removeEventListener("resize", this._windowResizeBound);
     }
 }

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

@@ -57,7 +57,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     set canvasOffset(value) {
         this._canvasOffset = value;
-        this._zoomFactorChanged();
+        this._zoomFactorChanged(false);
     }
     get canvasOffsetUnzoomed() {
         return { x: this._canvasOffset.x * this.zoomFactor, y: this._canvasOffset.y * this.zoomFactor };
@@ -452,7 +452,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.clickOverlay.addEventListener(EventNames.DblClick, this._onDblClickBound, true);
         }
     }
-    _zoomFactorChanged() {
+    _zoomFactorChanged(refreshExtensions = true) {
         //a@ts-ignore
         //this._canvasContainer.style.zoom = <any>this._zoomFactor;
         //this._canvasContainer.style.transform = 'scale(' + this._zoomFactor+') translate(' + this._translate.x + ', '+this._translate.y+')';
@@ -462,7 +462,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._updateTransform();
         this._fillCalculationrects();
         this.onZoomFactorChanged.emit(this._zoomFactor);
-        this.extensionManager.refreshAllAppliedExtentions();
+        if (refreshExtensions)
+            this.extensionManager.refreshAllAppliedExtentions();
     }
     _updateTransform() {
         this._scaleFactor = this._zoomFactor;
@@ -851,8 +852,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             currentElement = this.instanceServiceContainer.selectionService.primarySelection?.element ?? this._canvas;
         }
         let tool = this.serviceContainer.globalContext.tool ?? this.serviceContainer.designerTools.get(NamedTools.Pointer);
-        this._canvas.style.cursor = tool.cursor;
         tool.pointerEventHandler(this, event, currentElement);
+        this._canvas.style.cursor = tool.cursor;
     }
     captureActiveTool(tool) {
         this._activeTool = tool;

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

@@ -5,17 +5,22 @@ import { IDesignerCanvas } from "../IDesignerCanvas";
 import { ITool } from "./ITool";
 import { ServiceContainer } from "../../../services/ServiceContainer.js";
 export declare class PointerTool implements ITool {
-    readonly cursor: string;
+    cursor: string;
     private _movedSinceStartedAction;
     private _initialPoint;
     private _actionType?;
     private _actionStartedDesignItem?;
     private _actionStartedDesignItems?;
+    private _clonedItems?;
+    private _copiedItemsInserted;
     private _previousEventName;
     private _dragOverExtensionItem;
     private _dragExtensionItem;
     private _moveItemsOffset;
     private _initialOffset;
+    private _firstTimeInMove;
+    private _secondTimeInMove;
+    private _changeGroup;
     constructor();
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
@@ -24,6 +29,7 @@ export declare class PointerTool implements ITool {
     private _resetTool;
     private _pointerActionTypeDrawSelection;
     private _pointerActionTypeDragOrSelect;
+    private checkSelectElement;
     static FindPossibleContainer(designItem: IDesignItem, designItems: IDesignItem[], event: IPoint): [newContainerElementDesignItem: IDesignItem, newContainerService: IPlacementService];
     keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
 }

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

@@ -10,11 +10,16 @@ export class PointerTool {
     _actionType;
     _actionStartedDesignItem;
     _actionStartedDesignItems;
+    _clonedItems;
+    _copiedItemsInserted = false;
     _previousEventName;
     _dragOverExtensionItem;
     _dragExtensionItem;
     _moveItemsOffset = { x: 0, y: 0 };
     _initialOffset;
+    _firstTimeInMove;
+    _secondTimeInMove;
+    _changeGroup;
     constructor() {
     }
     activated(serviceContainer) {
@@ -40,6 +45,10 @@ export class PointerTool {
         }
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
+        if (event.ctrlKey)
+            this.cursor = 'copy';
+        else
+            this.cursor = 'default';
         const interactionServices = designerCanvas.serviceContainer.elementInteractionServices;
         if (interactionServices)
             for (let s of interactionServices) {
@@ -62,10 +71,26 @@ export class PointerTool {
                 event.target.setPointerCapture(event.pointerId);
                 designerCanvas.captureActiveTool(this);
                 this._movedSinceStartedAction = false;
+                this._copiedItemsInserted = false;
+                this._clonedItems = null;
+                this._firstTimeInMove = false;
+                this._secondTimeInMove = false;
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
                 designerCanvas.releaseActiveTool();
+                this._copiedItemsInserted = false;
+                this._clonedItems = null;
+                this._firstTimeInMove = false;
+                this._secondTimeInMove = false;
+                break;
+            case EventNames.PointerMove:
+                if (this._firstTimeInMove)
+                    this._secondTimeInMove = true;
+                if (this._secondTimeInMove)
+                    this._firstTimeInMove = false;
+                else
+                    this._firstTimeInMove = true;
                 break;
         }
         if (!currentElement)
@@ -126,7 +151,7 @@ export class PointerTool {
             drawSelectionTool.pointerEventHandler(designerView, event, currentElement);
         }
     }
-    _pointerActionTypeDragOrSelect(designerCanvas, event, currentDesignItem, currentPoint) {
+    async _pointerActionTypeDragOrSelect(designerCanvas, event, currentDesignItem, currentPoint) {
         if (event.altKey) {
             if (event.type == EventNames.PointerDown) {
                 const currentSelection = designerCanvas.instanceServiceContainer.selectionService.primarySelection;
@@ -147,23 +172,6 @@ export class PointerTool {
                 {
                     this._actionStartedDesignItem = currentDesignItem;
                     this._moveItemsOffset = { x: 0, y: 0 };
-                    if (event.shiftKey || event.ctrlKey) {
-                        const index = designerCanvas.instanceServiceContainer.selectionService.selectedElements.indexOf(currentDesignItem);
-                        if (index >= 0) {
-                            let newSelectedList = designerCanvas.instanceServiceContainer.selectionService.selectedElements.slice(0);
-                            newSelectedList.splice(index, 1);
-                            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(newSelectedList);
-                        }
-                        else {
-                            let newSelectedList = designerCanvas.instanceServiceContainer.selectionService.selectedElements.slice(0);
-                            newSelectedList.push(currentDesignItem);
-                            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(newSelectedList);
-                        }
-                    }
-                    else {
-                        if (designerCanvas.instanceServiceContainer.selectionService.selectedElements.indexOf(currentDesignItem) < 0)
-                            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
-                    }
                     this._actionStartedDesignItems = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements];
                     if (designerCanvas.alignOnSnap)
                         designerCanvas.snapLines.calculateSnaplines(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
@@ -174,6 +182,40 @@ export class PointerTool {
                     if (event.buttons == 0) {
                         return;
                     }
+                    if (this._firstTimeInMove) {
+                        if (!currentDesignItem.instanceServiceContainer.selectionService.selectedElements.includes(currentDesignItem)) {
+                            if (event.ctrlKey || event.shiftKey)
+                                currentDesignItem.instanceServiceContainer.selectionService.setSelectedElements([...currentDesignItem.instanceServiceContainer.selectionService.selectedElements, currentDesignItem]);
+                            else
+                                currentDesignItem.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
+                            this._actionStartedDesignItems = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements];
+                            if (designerCanvas.alignOnSnap)
+                                designerCanvas.snapLines.calculateSnaplines(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                        }
+                    }
+                    // *** Copy Items via Ctrl Drag ***
+                    if (!this._clonedItems) {
+                        this._clonedItems = [];
+                        for (let d of this._actionStartedDesignItems) {
+                            const clone = await d.clone();
+                            this._clonedItems.push(clone);
+                        }
+                    }
+                    if (event.ctrlKey && !this._copiedItemsInserted) {
+                        this._copiedItemsInserted = true;
+                        if (!this._changeGroup)
+                            this._changeGroup = designerCanvas.rootDesignItem.openGroup("Copy Elements");
+                        for (let i = 0; i < this._clonedItems.length; i++) {
+                            this._actionStartedDesignItems[i].insertAdjacentElement(this._clonedItems[i], 'beforebegin');
+                        }
+                    }
+                    else if (!event.ctrlKey && this._copiedItemsInserted) {
+                        for (let d of this._clonedItems) {
+                            d.remove();
+                        }
+                        this._copiedItemsInserted = false;
+                    }
+                    // *** End Copy Items Part ***
                     const elementMoved = currentPoint.x != this._initialPoint.x || currentPoint.y != this._initialPoint.y;
                     if (this._actionType != PointerActionType.Drag && elementMoved) {
                         this._actionType = PointerActionType.Drag;
@@ -238,8 +280,12 @@ export class PointerTool {
             case EventNames.PointerUp:
                 {
                     if (!this._movedSinceStartedAction || this._actionType == PointerActionType.DragOrSelect) {
-                        if (this._previousEventName == EventNames.PointerDown && !event.shiftKey && !event.ctrlKey)
+                        if (this._previousEventName == EventNames.PointerDown && !event.shiftKey && !event.ctrlKey) {
                             designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([this._actionStartedDesignItem]);
+                        }
+                        else {
+                            this.checkSelectElement(event, designerCanvas, currentDesignItem);
+                        }
                         return;
                     }
                     if (this._movedSinceStartedAction) {
@@ -247,9 +293,11 @@ export class PointerTool {
                         let containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle));
                         const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
                         if (containerService) {
-                            let cg = designerCanvas.rootDesignItem.openGroup("Move Elements");
+                            if (!this._changeGroup)
+                                this._changeGroup = designerCanvas.rootDesignItem.openGroup("Move Elements");
                             containerService.finishPlace(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                            cg.commit();
+                            this._changeGroup.commit();
+                            this._changeGroup = null;
                         }
                         designerCanvas.extensionManager.removeExtension(this._dragExtensionItem, ExtensionType.ContainerDrag);
                         this._dragExtensionItem = null;
@@ -258,10 +306,33 @@ export class PointerTool {
                         this._moveItemsOffset = { x: 0, y: 0 };
                     }
                     designerCanvas.extensionManager.refreshExtensions(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                    if (this._changeGroup) {
+                        this._changeGroup.abort();
+                        this._changeGroup = null;
+                    }
                     break;
                 }
         }
     }
+    checkSelectElement(event, designerCanvas, currentDesignItem) {
+        if (event.shiftKey || event.ctrlKey) {
+            const index = designerCanvas.instanceServiceContainer.selectionService.selectedElements.indexOf(currentDesignItem);
+            if (index >= 0) {
+                let newSelectedList = designerCanvas.instanceServiceContainer.selectionService.selectedElements.slice(0);
+                newSelectedList.splice(index, 1);
+                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(newSelectedList);
+            }
+            else {
+                let newSelectedList = designerCanvas.instanceServiceContainer.selectionService.selectedElements.slice(0);
+                newSelectedList.push(currentDesignItem);
+                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(newSelectedList);
+            }
+        }
+        else {
+            if (designerCanvas.instanceServiceContainer.selectionService.selectedElements.indexOf(currentDesignItem) < 0)
+                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
+        }
+    }
     static FindPossibleContainer(designItem, designItems, event) {
         let newContainerElementDesignItem = null;
         let newContainerService = null;

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

@@ -174,13 +174,28 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
                 nodeColumnIdx: 0,
                 checkboxColumnIdx: 0, // render the checkboxes into the 1st column
             },
-            activate: (event, data) => {
+            click: (event, data) => {
                 if (event.originalEvent) { // only for clicked items, not when elements selected via code.
                     let node = data.node;
                     let designItem = node.data.ref;
-                    if (designItem)
-                        designItem.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+                    if (designItem) {
+                        if (event.ctrlKey) {
+                            const sel = [...designItem.instanceServiceContainer.selectionService.selectedElements];
+                            const idx = sel.indexOf(designItem);
+                            if (idx >= 0) {
+                                sel.splice(idx, 1);
+                                designItem.instanceServiceContainer.selectionService.setSelectedElements(sel);
+                            }
+                            else {
+                                designItem.instanceServiceContainer.selectionService.setSelectedElements([...sel, designItem]);
+                            }
+                        }
+                        else {
+                            designItem.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+                        }
+                    }
                 }
+                return false;
             },
             createNode: (event, data) => {
                 let node = data.node;

package/package.json

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