@node-projects/web-component-designer 0.0.130 → 0.0.132

package/dist/commandHandling/IUiCommand.d.ts

@@ -3,4 +3,7 @@ export interface IUiCommand {
     type: CommandType;
     special?: string;
     parameter?: any;
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    shiftKey?: boolean;
 }

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

@@ -0,0 +1,11 @@
+export interface ITextWriter {
+    get position(): number;
+    isLastCharNewline(): boolean;
+    levelRaise(): void;
+    levelShrink(): void;
+    write(text: string): void;
+    writeLine(text: string): void;
+    writeIndent(): void;
+    writeNewline(): void;
+    getString(): string;
+}

package/dist/elements/helper/ITextWriter.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/helper/IndentedTextWriter copy.d.ts

@@ -0,0 +1,14 @@
+export declare class IndentedTextWriter {
+    private _textHolder;
+    readonly indent: number;
+    level: number;
+    get position(): number;
+    isLastCharNewline(): boolean;
+    levelRaise(): void;
+    levelShrink(): void;
+    write(text: string): void;
+    writeLine(text: string): void;
+    writeIndent(): void;
+    writeNewline(): void;
+    getString(): string;
+}

package/dist/elements/helper/IndentedTextWriter copy.js

@@ -0,0 +1,34 @@
+export class IndentedTextWriter {
+    _textHolder = '';
+    indent = 4;
+    level = 0;
+    get position() {
+        return this._textHolder.length;
+    }
+    isLastCharNewline() {
+        return this._textHolder[this._textHolder.length - 1] === '\n';
+    }
+    levelRaise() {
+        this.level++;
+    }
+    levelShrink() {
+        this.level--;
+    }
+    write(text) {
+        this._textHolder += text;
+    }
+    writeLine(text) {
+        this.writeIndent();
+        this._textHolder += text;
+        this.writeNewline();
+    }
+    writeIndent() {
+        this._textHolder += ''.padEnd(this.level * this.indent, ' ');
+    }
+    writeNewline() {
+        this._textHolder += '\n';
+    }
+    getString() {
+        return this._textHolder;
+    }
+}

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

@@ -1,4 +1,5 @@
-export declare class IndentedTextWriter {
+import { ITextWriter } from './ITextWriter';
+export declare class IndentedTextWriter implements ITextWriter {
     private _textHolder;
     readonly indent: number;
     level: number;

package/dist/elements/helper/SimpleTextWriter copy.d.ts

@@ -0,0 +1,12 @@
+export declare class SimpleTextWriter {
+    private _textHolder;
+    get position(): number;
+    isLastCharNewline(): boolean;
+    levelRaise(): void;
+    levelShrink(): void;
+    write(text: string): void;
+    writeLine(text: string): void;
+    writeIndent(): void;
+    writeNewline(): void;
+    getString(): string;
+}

package/dist/elements/helper/SimpleTextWriter copy.js

@@ -0,0 +1,26 @@
+export class SimpleTextWriter {
+    _textHolder = '';
+    get position() {
+        return this._textHolder.length;
+    }
+    isLastCharNewline() {
+        return this._textHolder[this._textHolder.length - 1] === '\n';
+    }
+    levelRaise() {
+    }
+    levelShrink() {
+    }
+    write(text) {
+        this._textHolder += text;
+    }
+    writeLine(text) {
+        this._textHolder += text;
+    }
+    writeIndent() {
+    }
+    writeNewline() {
+    }
+    getString() {
+        return this._textHolder;
+    }
+}

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

@@ -0,0 +1,13 @@
+import { ITextWriter } from './ITextWriter';
+export declare class SimpleTextWriter implements ITextWriter {
+    private _textHolder;
+    get position(): number;
+    isLastCharNewline(): boolean;
+    levelRaise(): void;
+    levelShrink(): void;
+    write(text: string): void;
+    writeLine(text: string): void;
+    writeIndent(): void;
+    writeNewline(): void;
+    getString(): string;
+}

package/dist/elements/helper/SimpleTextWriter.js

@@ -0,0 +1,26 @@
+export class SimpleTextWriter {
+    _textHolder = '';
+    get position() {
+        return this._textHolder.length;
+    }
+    isLastCharNewline() {
+        return this._textHolder[this._textHolder.length - 1] === '\n';
+    }
+    levelRaise() {
+    }
+    levelShrink() {
+    }
+    write(text) {
+        this._textHolder += text;
+    }
+    writeLine(text) {
+        this._textHolder += text;
+    }
+    writeIndent() {
+    }
+    writeNewline() {
+    }
+    getString() {
+        return this._textHolder;
+    }
+}

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

@@ -0,0 +1,2 @@
+import { IDesignItem } from "../item/IDesignItem";
+export declare function switchContainer(items: IDesignItem[], newContainer: IDesignItem, resizeNewContainer?: boolean, newContainerOffset?: number): void;

package/dist/elements/helper/SwitchContainerHelper.js

@@ -0,0 +1,45 @@
+export function switchContainer(items, newContainer, resizeNewContainer = false, newContainerOffset = 0) {
+    //todo...
+    //- switch to other containers? like grid, flexbox, ...
+    //- position non absolute, or absolute from bottom or right
+    const firstItem = items[0];
+    const grp = firstItem.openGroup('switchContainerHelper');
+    const designerCanvas = firstItem.instanceServiceContainer.designerCanvas;
+    let minX = Number.MAX_VALUE;
+    let minY = Number.MAX_VALUE;
+    let maxX = 0;
+    let maxY = 0;
+    for (let e of items) {
+        let rect = designerCanvas.getNormalizedElementCoordinates(e.element);
+        if (rect.x < minX)
+            minX = rect.x;
+        if (rect.y < minY)
+            minY = rect.y;
+        if (rect.x + rect.width > maxX)
+            maxX = rect.x + rect.width;
+        if (rect.y + rect.height > maxY)
+            maxY = rect.y + rect.height;
+    }
+    let rectNewContainer = designerCanvas.getNormalizedElementCoordinates(newContainer.element);
+    for (let e of items) {
+        let rect = designerCanvas.getNormalizedElementCoordinates(e.element);
+        e.remove();
+        if (resizeNewContainer) {
+            e.setStyle('left', (rect.x - minX + newContainerOffset).toString() + 'px');
+            e.setStyle('top', (rect.y - minY + newContainerOffset).toString() + 'px');
+        }
+        else {
+            e.setStyle('left', (rect.x - rectNewContainer.x).toString() + 'px');
+            e.setStyle('top', (rect.y - rectNewContainer.y).toString() + 'px');
+        }
+        newContainer.insertChild(e);
+    }
+    if (resizeNewContainer) {
+        newContainer.setStyle('position', 'absolute');
+        newContainer.setStyle('left', (minX - newContainerOffset).toString() + 'px');
+        newContainer.setStyle('top', (minY - newContainerOffset).toString() + 'px');
+        newContainer.setStyle('width', (maxX - minX + 2 * newContainerOffset).toString() + 'px');
+        newContainer.setStyle('height', (maxY - minY + 2 * newContainerOffset).toString() + 'px');
+    }
+    grp.commit();
+}

package/dist/elements/services/copyPasteService/CopyPasteService.d.ts

@@ -2,7 +2,9 @@ import { IDesignItem } from "../../item/IDesignItem.js";
 import { ICopyPasteService } from "./ICopyPasteService.js";
 import { ServiceContainer } from '../ServiceContainer';
 import { InstanceServiceContainer } from '../InstanceServiceContainer';
+import { IRect } from "../../../interfaces/IRect.js";
+export declare const positionsJsonMime = "web text/positions";
 export declare class CopyPasteService implements ICopyPasteService {
     copyItems(designItems: IDesignItem[]): Promise<void>;
-    getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+    getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<[designItems: IDesignItem[], positions?: IRect[]]>;
 }

package/dist/elements/services/copyPasteService/CopyPasteService.js

@@ -1,12 +1,33 @@
 import { DomConverter } from "../../widgets/designerView/DomConverter.js";
+export const positionsJsonMime = 'web text/positions';
 export class CopyPasteService {
     async copyItems(designItems) {
-        const copyText = DomConverter.ConvertToString(designItems, null);
-        await navigator.clipboard.writeText(copyText);
+        const copyText = DomConverter.ConvertToString(designItems, null, false);
+        const positions = designItems.map(x => x.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(x.element));
+        const data = [new ClipboardItem({ ["text/html"]: new Blob([copyText], { type: 'text/html' }), [positionsJsonMime]: new Blob([JSON.stringify(positions)], { type: positionsJsonMime }) })];
+        try {
+            await navigator.clipboard.write(data);
+        }
+        catch (err) {
+            await navigator.clipboard.writeText(copyText);
+        }
     }
     async getPasteItems(serviceContainer, instanceServiceContainer) {
-        const text = await navigator.clipboard.readText();
+        const items = await navigator.clipboard.read();
+        let html = '';
+        try {
+            html = await (await items[0].getType('text/html'))?.text();
+        }
+        catch { }
+        if (!html)
+            html = await (await items[0].getType('text/plain'))?.text();
+        let positions = null;
+        try {
+            let positionsJson = await (await items[0].getType(positionsJsonMime))?.text();
+            positions = JSON.parse(positionsJson);
+        }
+        catch { }
         const parserService = serviceContainer.htmlParserService;
-        return await parserService.parse(text, serviceContainer, instanceServiceContainer);
+        return [await parserService.parse(html, serviceContainer, instanceServiceContainer), positions];
     }
 }

package/dist/elements/services/copyPasteService/ICopyPasteService.d.ts

@@ -1,7 +1,8 @@
+import { IRect } from "../../../interfaces/IRect.js";
 import { IDesignItem } from "../../item/IDesignItem.js";
 import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
 import { ServiceContainer } from "../ServiceContainer.js";
 export interface ICopyPasteService {
     copyItems(designItems: IDesignItem[]): Promise<void>;
-    getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+    getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<[designItems: IDesignItem[], positions?: IRect[]]>;
 }

package/dist/elements/services/htmlWriterService/AbstractHtmlWriterService.d.ts

@@ -1,10 +1,10 @@
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IHtmlWriterService } from './IHtmlWriterService.js';
 import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
-import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
 import { IStringPosition } from './IStringPosition.js';
+import { ITextWriter } from '../../helper/ITextWriter.js';
 export declare abstract class AbstractHtmlWriterService implements IHtmlWriterService {
-    abstract write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): any;
-    writeAttributes(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, options: IHtmlWriterOptions): void;
-    writeStyles(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, options: IHtmlWriterOptions): void;
+    abstract write(indentedTextWriter: ITextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): any;
+    writeAttributes(indentedTextWriter: ITextWriter, designItem: IDesignItem, options: IHtmlWriterOptions): void;
+    writeStyles(indentedTextWriter: ITextWriter, designItem: IDesignItem, options: IHtmlWriterOptions): void;
 }

package/dist/elements/services/htmlWriterService/IHtmlWriterService.d.ts

@@ -1,7 +1,7 @@
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
-import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
+import { ITextWriter } from '../../helper/ITextWriter.js';
 import { IStringPosition } from './IStringPosition.js';
 export interface IHtmlWriterService {
-    write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): any;
+    write(textWriter: ITextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): any;
 }

package/dist/elements/services/undoService/ChangeGroup.d.ts

@@ -11,6 +11,7 @@ export declare class ChangeGroup implements ITransactionItem {
     commit(): void;
     abort(): void;
     mergeWith(other: ITransactionItem): boolean;
+    addCommitedSubchangeGroup(changeGroup: ChangeGroup): void;
     undoStack: ITransactionItem[];
     redoStack: ITransactionItem[];
     execute(item: ITransactionItem): void;

package/dist/elements/services/undoService/ChangeGroup.js

@@ -51,6 +51,9 @@ export class ChangeGroup {
     mergeWith(other) {
         return false;
     }
+    addCommitedSubchangeGroup(changeGroup) {
+        this.undoStack.push(changeGroup);
+    }
     undoStack = [];
     redoStack = [];
     execute(item) {

package/dist/elements/services/undoService/UndoService.js

@@ -21,9 +21,15 @@ export class UndoService {
             this.clear();
             throw "UndoService - Commited Transaction was not the last";
         }
-        if (itm.undoStack.length)
-            this._undoStack.push(itm);
-        this._redoStack = [];
+        if (itm.undoStack.length) {
+            if (this._transactionStack.length > 0) {
+                this._transactionStack[this._transactionStack.length - 1].addCommitedSubchangeGroup(itm);
+            }
+            else {
+                this._undoStack.push(itm);
+                this._redoStack = [];
+            }
+        }
     }
     abortTransactionItem(transactionItem) {
         let itm = this._transactionStack.pop();

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

@@ -4,5 +4,5 @@ export declare class DomConverter {
     static normalizeAttributeValue(value: string | number, useSingleQuotes?: boolean): string;
     static normalizeContentValue(value: string): string;
     static IsSelfClosingElement(tag: string): boolean;
-    static ConvertToString(designItems: IDesignItem[], designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): string;
+    static ConvertToString(designItems: IDesignItem[], designItemsAssignmentList?: Map<IDesignItem, IStringPosition>, beautifyOutput?: boolean): string;
 }

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

@@ -1,4 +1,5 @@
 import { IndentedTextWriter } from "../../helper/IndentedTextWriter.js";
+import { SimpleTextWriter } from "../../helper/SimpleTextWriter.js";
 export class DomConverter {
     static normalizeAttributeValue(value, useSingleQuotes = false) {
         if (typeof value === 'number')
@@ -32,9 +33,9 @@ export class DomConverter {
             tag === 'track' ||
             tag === 'wbr';
     }
-    static ConvertToString(designItems, designItemsAssignmentList) {
-        let itw = new IndentedTextWriter();
-        let options = { beautifyOutput: true, writeDesignerProperties: true, compressCssToShorthandProperties: true, parseJsonInAttributes: true, jsonWriteMode: 'beauty' };
+    static ConvertToString(designItems, designItemsAssignmentList, beautifyOutput) {
+        let itw = beautifyOutput !== false ? new IndentedTextWriter() : new SimpleTextWriter();
+        let options = { beautifyOutput: beautifyOutput !== false, writeDesignerProperties: true, compressCssToShorthandProperties: true, parseJsonInAttributes: true, jsonWriteMode: 'beauty' };
         designItems[0].serviceContainer.htmlWriterService.write(itw, designItems, true, options, designItemsAssignmentList);
         return itw.getString();
     }

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

@@ -33,6 +33,10 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
     getViewportCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
+    getNormalizedElementCoordinatesAndRealSizes(element: Element): IRect & {
+        realWidth: number;
+        realHeight: number;
+    };
     captureActiveTool(tool: ITool): any;
     releaseActiveTool(): any;
     getDesignSurfaceDimensions(): ISize;

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

@@ -73,7 +73,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     canExecuteCommand(command: IUiCommand): boolean;
     handleSelectAll(): void;
     handleCopyCommand(): Promise<void>;
-    handlePasteCommand(): Promise<void>;
+    handlePasteCommand(disableRestoreOfPositions: boolean): Promise<void>;
     handleDeleteCommand(): void;
     initialize(serviceContainer: ServiceContainer): void;
     connectedCallback(): void;
@@ -100,6 +100,10 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
      */
     getViewportCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
+    getNormalizedElementCoordinatesAndRealSizes(element: Element): IRect & {
+        realWidth: number;
+        realHeight: number;
+    };
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     elementFromPoint(x: number, y: number): Element;
     elementsFromPoint(x: number, y: number): Element[];

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

@@ -295,7 +295,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 this.handleDeleteCommand();
                 break;
             case CommandType.paste:
-                this.handlePasteCommand();
+                this.handlePasteCommand(command.altKey == true);
                 break;
             case CommandType.selectAll:
                 this.handleSelectAll();
@@ -363,8 +363,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     async handleCopyCommand() {
         await this.serviceContainer.copyPasteService.copyItems(this.instanceServiceContainer.selectionService.selectedElements);
     }
-    async handlePasteCommand() {
-        const designItems = await this.serviceContainer.copyPasteService.getPasteItems(this.serviceContainer, this.instanceServiceContainer);
+    async handlePasteCommand(disableRestoreOfPositions) {
+        const [designItems, positions] = await this.serviceContainer.copyPasteService.getPasteItems(this.serviceContainer, this.instanceServiceContainer);
         let grp = this.rootDesignItem.openGroup("Insert");
         let pasteContainer = this.rootDesignItem;
         let pCon = this.instanceServiceContainer.selectionService.primarySelection;
@@ -384,8 +384,15 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             }
         }
         if (designItems) {
-            for (let di of designItems) {
+            let containerPos = this.getNormalizedElementCoordinates(pasteContainer.element);
+            for (let i = 0; i < designItems.length; i++) {
+                let di = designItems[i];
+                let pos = positions ? positions[i] : null;
                 this.instanceServiceContainer.undoService.execute(new InsertAction(pasteContainer, pasteContainer.childCount, di));
+                if (!disableRestoreOfPositions && pos) {
+                    di.setStyle('left', (pos.x - containerPos.x) + 'px');
+                    di.setStyle('top', (pos.y - containerPos.y) + 'px');
+                }
             }
             const intializationService = this.serviceContainer.intializationService;
             if (intializationService) {
@@ -656,19 +663,19 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
             return;
         if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey)
-            this.executeCommand({ type: CommandType.undo });
+            this.executeCommand({ type: CommandType.undo, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
         else if ((event.ctrlKey || event.metaKey) && event.key === 'z' && event.shiftKey)
-            this.executeCommand({ type: CommandType.redo });
+            this.executeCommand({ type: CommandType.redo, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
         else if ((event.ctrlKey || event.metaKey) && event.key === 'y')
-            this.executeCommand({ type: CommandType.redo });
+            this.executeCommand({ type: CommandType.redo, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
         else if ((event.ctrlKey || event.metaKey) && event.key === 'a')
-            this.executeCommand({ type: CommandType.selectAll });
+            this.executeCommand({ type: CommandType.selectAll, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
         else if ((event.ctrlKey || event.metaKey) && event.key === 'c')
-            this.executeCommand({ type: CommandType.copy });
+            this.executeCommand({ type: CommandType.copy, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
         else if ((event.ctrlKey || event.metaKey) && event.key === 'v')
-            this.executeCommand({ type: CommandType.paste });
+            this.executeCommand({ type: CommandType.paste, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
         else if ((event.ctrlKey || event.metaKey) && event.key === 'x')
-            this.executeCommand({ type: CommandType.cut });
+            this.executeCommand({ type: CommandType.cut, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
         else {
             let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
             if (!primarySelection) {
@@ -680,7 +687,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             switch (event.key) {
                 case 'Delete':
                 case 'Backspace':
-                    this.executeCommand({ type: CommandType.delete });
+                    this.executeCommand({ type: CommandType.delete, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
                     break;
                 case 'ArrowUp':
                     {
@@ -736,6 +743,17 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         const targetRect = element.getBoundingClientRect();
         return { x: (targetRect.x - this.containerBoundingRect.x) / this.scaleFactor, y: (targetRect.y - this.containerBoundingRect.y) / this.scaleFactor, width: targetRect.width / this.scaleFactor, height: targetRect.height / this.scaleFactor };
     }
+    getNormalizedElementCoordinatesAndRealSizes(element) {
+        let ret = this.getNormalizedElementCoordinates(element);
+        const st = getComputedStyle(element);
+        let realWidth = ret.width;
+        let realHeight = ret.height;
+        if (st.boxSizing != 'border-box') {
+            realWidth = realWidth - (parseFloat(st.borderLeft) + parseFloat(st.paddingLeft) + parseFloat(st.paddingRight) + parseFloat(st.borderRight));
+            realHeight = realHeight - (parseFloat(st.borderTop) + parseFloat(st.paddingTop) + parseFloat(st.paddingBottom) + parseFloat(st.borderBottom));
+        }
+        return { ...ret, realWidth, realHeight };
+    }
     getNormalizedOffsetInElement(event, element) {
         const normEvt = this.getNormalizedEventCoordinates(event);
         const normEl = this.getNormalizedElementCoordinates(element);

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

@@ -72,12 +72,12 @@ export class ResizeExtension extends AbstractExtension {
                 this._initialPoint = currentPoint;
                 this._initialSizes = [];
                 this._actionModeStarted = actionMode;
-                let rect = this.extendedItem.element.getBoundingClientRect();
-                this._initialSizes.push({ width: rect.width / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
+                let rect = this.designerCanvas.getNormalizedElementCoordinatesAndRealSizes(this.extendedItem.element);
+                this._initialSizes.push({ width: rect.realWidth, height: rect.realHeight });
                 if (this.resizeAllSelected) {
                     for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                        rect = designItem.element.getBoundingClientRect();
-                        this._initialSizes.push({ width: rect.width / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
+                        rect = this.designerCanvas.getNormalizedElementCoordinatesAndRealSizes(designItem.element);
+                        this._initialSizes.push({ width: rect.realWidth, height: rect.realHeight });
                     }
                 }
                 if (this.designerCanvas.alignOnSnap)

package/dist/elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js

@@ -1,3 +1,4 @@
+import { switchContainer } from "../../../../helper/SwitchContainerHelper";
 import { DesignItem } from "../../../../item/DesignItem";
 export class MultipleItemsSelectedContextMenu {
     orderIndex = 60;
@@ -17,39 +18,12 @@ export class MultipleItemsSelectedContextMenu {
                         action: () => {
                             const grp = designItem.openGroup("wrap in Div");
                             let elements = designItem.instanceServiceContainer.selectionService.selectedElements;
-                            let div = document.createElement('div');
-                            const divDesignItem = DesignItem.createDesignItemFromInstance(div, designItem.serviceContainer, designItem.instanceServiceContainer);
-                            designItem.insertAdjacentElement(divDesignItem, 'beforebegin');
-                            let offset = 10;
-                            let minX = Number.MAX_VALUE;
-                            let minY = Number.MAX_VALUE;
-                            let maxX = 0;
-                            let maxY = 0;
-                            for (let e of elements) {
-                                let rect = designerCanvas.getNormalizedElementCoordinates(e.element);
-                                if (rect.x < minX)
-                                    minX = rect.x;
-                                if (rect.y < minY)
-                                    minY = rect.y;
-                                if (rect.x + rect.width > maxX)
-                                    maxX = rect.x + rect.width;
-                                if (rect.y + rect.height > maxY)
-                                    maxY = rect.y + rect.height;
-                            }
-                            for (let e of elements) {
-                                let rect = designerCanvas.getNormalizedElementCoordinates(e.element);
-                                e.remove();
-                                e.setStyle('left', (rect.x - minX + offset).toString() + 'px');
-                                e.setStyle('top', (rect.y - minY + offset).toString() + 'px');
-                                divDesignItem.insertChild(e);
-                            }
-                            divDesignItem.setStyle('position', 'absolute');
-                            divDesignItem.setStyle('left', (minX - offset).toString() + 'px');
-                            divDesignItem.setStyle('top', (minY - offset).toString() + 'px');
-                            divDesignItem.setStyle('width', (maxX - minX + 2 * offset).toString() + 'px');
-                            divDesignItem.setStyle('height', (maxY - minY + 2 * offset).toString() + 'px');
+                            let newContainer = document.createElement('div');
+                            const newContainerDesignItem = DesignItem.createDesignItemFromInstance(newContainer, designItem.serviceContainer, designItem.instanceServiceContainer);
+                            elements[0].insertAdjacentElement(newContainerDesignItem, 'beforebegin');
+                            switchContainer(elements, newContainerDesignItem, true, 10);
                             grp.commit();
-                            designItem.instanceServiceContainer.selectionService.setSelectedElements([divDesignItem]);
+                            designItem.instanceServiceContainer.selectionService.setSelectedElements([newContainerDesignItem]);
                         }
                     }
                 ]

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

@@ -2,6 +2,7 @@ import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projec
 import { NodeType } from '../../item/NodeType';
 import { assetsPath } from '../../../Constants';
 import { ContextMenu } from '../../helper/contextMenu/ContextMenu';
+import { switchContainer } from '../../helper/SwitchContainerHelper';
 export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
     _treeDiv;
     _tree;
@@ -169,7 +170,7 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
             quicksearch: true,
             source: [],
             table: {
-                indentation: 20,
+                indentation: 10,
                 nodeColumnIdx: 0,
                 checkboxColumnIdx: 0, // render the checkboxes into the 1st column
             },
@@ -216,96 +217,32 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
                 preventVoidMoves: false,
                 dropMarkerOffsetX: -24,
                 dropMarkerInsertOffsetX: -16,
+                multiSource: true,
                 dragStart: (node, data) => {
-                    /* This function MUST be defined to enable dragging for the tree.
-                      *
-                      * Return false to cancel dragging of node.
-                      * data.dataTransfer.setData() and .setDragImage() is available
-                      * here.
-                      */
-                    // Set the allowed effects (i.e. override the 'effectAllowed' option)
                     data.effectAllowed = "all";
-                    // Set a drop effect (i.e. override the 'dropEffectDefault' option)
-                    // data.dropEffect = "link";
-                    data.dropEffect = "copy";
-                    // We could use a custom image here:
-                    // data.dataTransfer.setDragImage($("<div>TEST</div>").appendTo("body")[0], -10, -10);
-                    // data.useDefaultImage = false;
-                    // Return true to allow the drag operation
+                    data.dropEffect = "move";
                     return true;
                 },
-                // dragDrag: function(node, data) {
-                //   logLazy("dragDrag", null, 2000,
-                //     "T1: dragDrag: " + "data: " + data.dropEffect + "/" + data.effectAllowed +
-                //     ", dataTransfer: " + data.dataTransfer.dropEffect + "/" + data.dataTransfer.effectAllowed );
-                // },
-                // dragEnd: function(node, data) {
-                //   node.debug( "T1: dragEnd: " + "data: " + data.dropEffect + "/" + data.effectAllowed +
-                //     ", dataTransfer: " + data.dataTransfer.dropEffect + "/" + data.dataTransfer.effectAllowed, data);
-                //     alert("T1: dragEnd")
-                // },
-                // --- Drop-support:
                 dragEnter: (node, data) => {
-                    // data.dropEffect = "copy";
+                    data.dropEffect = data.originalEvent.ctrlKey ? 'copy' : 'move';
                     return true;
                 },
                 dragOver: (node, data) => {
-                    // Assume typical mapping for modifier keys
-                    data.dropEffect = data.dropEffectSuggested;
-                    // data.dropEffect = "move";
+                    data.dropEffect = data.originalEvent.ctrlKey ? 'copy' : 'move';
+                    return true;
                 },
                 dragDrop: (node, data) => {
-                    /* This function MUST be defined to enable dropping of items on
-                      * the tree.
-                      */
-                    let newNode, transfer = data.dataTransfer, sourceNodes = data.otherNodeList, mode = data.dropEffect;
-                    if (data.hitMode === "after") {
-                        // If node are inserted directly after tagrget node one-by-one,
-                        // this would reverse them. So we compensate:
-                        sourceNodes.reverse();
-                    }
-                    if (data.otherNode) {
-                        // Drop another Fancytree node from same frame (maybe a different tree however)
-                        //let sameTree = (data.otherNode.tree === data.tree);
-                        if (mode === "move") {
-                            data.otherNode.moveTo(node, data.hitMode);
+                    const sourceDesignitems = data.otherNodeList.map(x => x.data.ref);
+                    const targetDesignitem = node.data.ref;
+                    if (data.dropEffectSuggested == 'move') {
+                        if (data.hitMode == 'over') {
+                            switchContainer(sourceDesignitems, targetDesignitem);
                         }
-                        else {
-                            newNode = data.otherNode.copyTo(node, data.hitMode);
-                            if (mode === "link") {
-                                newNode.setTitle("Link to " + newNode.title);
-                            }
-                            else {
-                                newNode.setTitle("Copy of " + newNode.title);
-                            }
+                        else if (data.hitMode == 'before') {
                         }
-                    }
-                    else if (data.otherNodeData) {
-                        // Drop Fancytree node from different frame or window, so we only have
-                        // JSON representation available
-                        //@ts-ignore
-                        node.addChild(data.otherNodeData, data.hitMode);
-                    }
-                    else if (data.files.length) {
-                        // Drop files
-                        for (let i = 0; i < data.files.length; i++) {
-                            let file = data.files[i];
-                            node.addNode({ title: "'" + file.name + "' (" + file.size + " bytes)" }, data.hitMode);
-                            // var url = "'https://example.com/upload",
-                            //     formData = new FormData();
-                            // formData.append("file", transfer.files[0])
-                            // fetch(url, {
-                            //   method: "POST",
-                            //   body: formData
-                            // }).then(function() { /* Done. Inform the user */ })
-                            // .catch(function() { /* Error. Inform the user */ });
+                        else if (data.hitMode == 'after') {
                         }
                     }
-                    else {
-                        // Drop a non-node
-                        node.addNode({ title: transfer.getData("text") }, data.hitMode);
-                    }
-                    node.setExpanded();
                 },
             },
             multi: {

package/package.json

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