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

package/assets/images/layout/TransformTool.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g transform="matrix(1.42857,0,0,0.416667,-14.2857,33.3333)">
+        <path d="M10,50.5L10,29.5L71.25,29.5L71.25,10L80,40L71.25,70L71.25,50.5L10,50.5Z"/>
+    </g>
+    <g transform="matrix(8.74748e-17,-1.42857,0.416667,2.55135e-17,33.3333,114.286)">
+        <path d="M10,50.5L10,29.5L71.25,29.5L71.25,10L80,40L71.25,70L71.25,50.5L10,50.5Z"/>
+    </g>
+    <g transform="matrix(1,0,0,1,4,-2)">
+        <g transform="matrix(1.17647,0,0,1,59.9412,-58)">
+            <path d="M6,79L23,79" style="fill:none;stroke:black;stroke-width:5.72px;"/>
+        </g>
+        <g transform="matrix(7.2038e-17,-1.17647,1,6.12323e-17,-2,38.0588)">
+            <path d="M6,79L23,79" style="fill:none;stroke:black;stroke-width:5.72px;"/>
+        </g>
+    </g>
+    <g transform="matrix(0.882353,0,0,0.75,6.20588,21.75)">
+        <path d="M6,79L23,79" style="fill:none;stroke:black;stroke-width:7.63px;"/>
+    </g>
+</svg>

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

@@ -1,4 +1,7 @@
 import { IPoint } from '../../interfaces/IPoint.js';
+import { IRect } from '../../interfaces/IRect.js';
+import { IDesignItem } from '../item/IDesignItem.js';
+import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js';
 export declare function inDesigner(element: Element): boolean;
 export declare function newElementFromString(text: any): Element;
 export declare enum ElementDisplayType {
@@ -17,3 +20,4 @@ export declare function getElementsWindowOffsetWithoutSelfAndParentTransformatio
     offsetTop: number;
 };
 export declare function getContentBoxContentOffsets(element: any): IPoint;
+export declare function calculateOuterRect(designItems: IDesignItem[], designerCanvas: IDesignerCanvas): IRect;

package/dist/elements/helper/ElementHelper.js

@@ -105,3 +105,32 @@ export function getContentBoxContentOffsets(element) {
         + parseInt(getComputedStyle(element).borderBottom.replace('px', ''));
     return { x: xOffset, y: yOffset };
 }
+export function calculateOuterRect(designItems, designerCanvas) {
+    let min = { x: Number.MAX_VALUE, y: Number.MAX_VALUE };
+    let max = { x: Number.MIN_VALUE, y: Number.MIN_VALUE };
+    let elementRect;
+    for (let s of designItems) {
+        elementRect = {
+            x: designerCanvas.getNormalizedElementCoordinates(s.element).x,
+            y: designerCanvas.getNormalizedElementCoordinates(s.element).y,
+            width: designerCanvas.getNormalizedElementCoordinates(s.element).width,
+            height: designerCanvas.getNormalizedElementCoordinates(s.element).height
+        };
+        // calculate min and max of selection
+        if (elementRect.x < min.x)
+            min.x = elementRect.x;
+        if (elementRect.y < min.y)
+            min.y = elementRect.y;
+        if (elementRect.x + elementRect.width > max.x)
+            max.x = elementRect.x + elementRect.width;
+        if (elementRect.y + elementRect.height > max.y)
+            max.y = elementRect.y + elementRect.height;
+    }
+    // calculate reckt around selection
+    return {
+        x: min.x,
+        y: min.y,
+        width: max.x - min.x,
+        height: max.y - min.y
+    };
+}

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -39,7 +39,7 @@ import { GridPlacementService } from './placementService/GridPlacementService.js
 import { ElementAtPointService } from './elementAtPointService/ElementAtPointService.js';
 import { FlexBoxPlacementService } from './placementService/FlexBoxPlacementService.js';
 import { SnaplinesProviderService } from './placementService/SnaplinesProviderService.js';
-import { DragDropService } from './dragDropService/DragDropService.js';
+import { ExternalDragDropService } from './dragDropService/ExternalDragDropService.js';
 import { EditTextExtensionProvider } from '../widgets/designerView/extensions/EditText/EditTextExtensionProvider.js';
 import { CopyPasteService } from './copyPasteService/CopyPasteService.js';
 import { DefaultModelCommandService } from './modelCommandService/DefaultModelCommandService.js';
@@ -80,6 +80,9 @@ import { EditGridColumnRowSizesExtensionProvider } from '../widgets/designerView
 import { DisplayGridExtensionProvider } from '../widgets/designerView/extensions/grid/DisplayGridExtensionProvider.js';
 import { ApplyFirstMachingExtensionProvider } from '../widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.js';
 import { DesignItemDocumentPositionService } from './designItemDocumentPositionService/DesignItemDocumentPositionService.js';
+import { TransformToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.js';
+import { MultipleSelectionRectExtensionProvider } from '../widgets/designerView/extensions/MultipleSelectionRectExtensionProvider.js';
+import { DragDropService } from './dragDropService/DragDropService.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -98,6 +101,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("snaplinesProviderService", new SnaplinesProviderService());
     serviceContainer.register("htmlParserService", new DefaultHtmlParserService());
     serviceContainer.register("elementAtPointService", new ElementAtPointService());
+    serviceContainer.register("externalDragDropService", new ExternalDragDropService());
     serviceContainer.register("dragDropService", new DragDropService());
     serviceContainer.register("copyPasteService", new CopyPasteService());
     serviceContainer.register("modelCommandService", new DefaultModelCommandService());
@@ -126,6 +130,7 @@ export function createDefaultServiceContainer() {
         new RectExtentionProvider(),
         new ResizeExtensionProvider(true),
         new RotateExtensionProvider(),
+        new MultipleSelectionRectExtensionProvider(),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.Selection, [
         new SelectionDefaultExtensionProvider()
@@ -170,7 +175,7 @@ export function createDefaultServiceContainer() {
     //new CursorLinePointerExtensionProvider()
     );
     serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new InvisibleElementExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new StylesheetServiceDesignViewConfigButtons());
-    serviceContainer.designViewToolbarButtons.push(new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new ZoomToolButtonProvider(), new SeperatorToolProvider(22), new DrawToolButtonProvider(), new SeperatorToolProvider(5), new TextToolButtonProvider());
+    serviceContainer.designViewToolbarButtons.push(new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new ZoomToolButtonProvider(), new SeperatorToolProvider(22), new DrawToolButtonProvider(), new SeperatorToolProvider(22), new TextToolButtonProvider(), new SeperatorToolProvider(22), new TransformToolButtonProvider());
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),
         new SeperatorContextMenu(),

package/dist/elements/services/ServiceContainer.d.ts

@@ -18,7 +18,7 @@ import { GlobalContext } from './GlobalContext.js';
 import { IBindingService } from './bindingsService/IBindingService.js';
 import { IElementAtPointService } from './elementAtPointService/IElementAtPointService.js';
 import { ISnaplinesProviderService } from "./placementService/ISnaplinesProviderService.js";
-import { IDragDropService } from './dragDropService/IDragDropService.js';
+import { IExternalDragDropService } from './dragDropService/IExternalDragDropService.js';
 import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js";
 import { IDesignerPointerExtensionProvider } from "../widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
 import { IModelCommandService } from "./modelCommandService/IModelCommandService.js";
@@ -39,6 +39,7 @@ import { IContentService } from './contentService/IContentService.js';
 import { IStylesheetService } from './stylesheetService/IStylesheetService.js';
 import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js';
 import { IDesignItemDocumentPositionService } from './designItemDocumentPositionService/IDesignItemDocumentPositionService.js';
+import { IDragDropService } from './dragDropService/IDragDropService.js';
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -53,12 +54,13 @@ interface ServiceNameMap {
     "bindableObjectsService": IBindableObjectsService;
     "bindableObjectDragDropService": IBindableObjectDragDropService;
     "elementAtPointService": IElementAtPointService;
-    "dragDropService": IDragDropService;
+    "externalDragDropService": IExternalDragDropService;
     "copyPasteService": ICopyPasteService;
     "modelCommandService": IModelCommandService;
     "demoProviderService": IDemoProviderService;
     "elementInteractionService": IElementInteractionService;
     "propertyGroupsService": IPropertyTabsService;
+    "dragDropService": IDragDropService;
     "undoService": (designerCanvas: IDesignerCanvas) => IUndoService;
     "selectionService": (designerCanvas: IDesignerCanvas) => ISelectionService;
     "contentService": (designerCanvas: IDesignerCanvas) => IContentService;
@@ -85,6 +87,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get bindingService(): IBindingService;
     get bindableObjectsServices(): IBindableObjectsService[];
     get bindableObjectDragDropService(): IBindableObjectDragDropService;
+    get dragDropService(): IDragDropService;
     get elementInteractionServices(): IElementInteractionService[];
     get propertiesServices(): IPropertiesService[];
     get propertyGroupService(): IPropertyTabsService;
@@ -97,7 +100,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get htmlParserService(): IHtmlParserService;
     get intializationService(): IIntializationService;
     get elementAtPointService(): IElementAtPointService;
-    get dragDropService(): IDragDropService;
+    get externalDragDropService(): IExternalDragDropService;
     get copyPasteService(): ICopyPasteService;
     get modelCommandService(): IModelCommandService;
     get demoProviderService(): IDemoProviderService;

package/dist/elements/services/ServiceContainer.js

@@ -34,6 +34,9 @@ export class ServiceContainer extends BaseServiceContainer {
     get bindableObjectDragDropService() {
         return this.getLastService('bindableObjectDragDropService');
     }
+    get dragDropService() {
+        return this.getLastService('dragDropService');
+    }
     get elementInteractionServices() {
         return this.getServices('elementInteractionService');
     }
@@ -70,8 +73,8 @@ export class ServiceContainer extends BaseServiceContainer {
     get elementAtPointService() {
         return this.getLastService('elementAtPointService');
     }
-    get dragDropService() {
-        return this.getLastService('dragDropService');
+    get externalDragDropService() {
+        return this.getLastService('externalDragDropService');
     }
     get copyPasteService() {
         return this.getLastService('copyPasteService');

package/dist/elements/services/dragDropService/DragDropService.d.ts

@@ -1,6 +1,12 @@
 import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
 import { IDragDropService } from "./IDragDropService.js";
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IPlacementService } from "../placementService/IPlacementService.js";
 export declare class DragDropService implements IDragDropService {
-    dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
-    drop(designerView: IDesignerCanvas, event: DragEvent): void;
+    private _dragOverExtensionItem;
+    dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent): void;
+    dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent): void;
+    dragOver(designerCanvas: IDesignerCanvas, event: DragEvent): void;
+    drop(designerCanvas: IDesignerCanvas, event: DragEvent): Promise<void>;
+    getPossibleContainerForDragDrop(designerCanvas: IDesignerCanvas, event: DragEvent): [newContainerElementDesignItem: IDesignItem, newContainerService: IPlacementService];
 }

package/dist/elements/services/dragDropService/DragDropService.js

@@ -1,28 +1,86 @@
 import { DesignItem } from '../../item/DesignItem.js';
 import { InsertAction } from "../undoService/transactionItems/InsertAction.js";
+import { ExtensionType } from "../../widgets/designerView/extensions/ExtensionType.js";
+import { dragDropFormatNameElementDefinition } from "../../../Constants.js";
 export class DragDropService {
-    dragOver(event) {
-        if (event.dataTransfer.items[0].type.startsWith('image/'))
-            return 'copy';
-        return 'none';
+    _dragOverExtensionItem;
+    dragEnter(designerCanvas, event) {
     }
-    drop(designerView, event) {
-        if (event.dataTransfer.files[0].type.startsWith('image/')) {
-            let reader = new FileReader();
-            reader.onloadend = () => {
-                const img = document.createElement('img');
-                img.src = reader.result;
-                const di = DesignItem.createDesignItemFromInstance(img, designerView.serviceContainer, designerView.instanceServiceContainer);
-                let grp = di.openGroup("Insert of <img>");
-                di.setStyle('position', 'absolute');
-                const targetRect = event.target.getBoundingClientRect();
-                di.setStyle('top', event.offsetY + targetRect.top - designerView.containerBoundingRect.y + 'px');
-                di.setStyle('left', event.offsetX + targetRect.left - designerView.containerBoundingRect.x + 'px');
-                designerView.instanceServiceContainer.undoService.execute(new InsertAction(designerView.rootDesignItem, designerView.rootDesignItem.childCount, di));
-                grp.commit();
-                requestAnimationFrame(() => designerView.instanceServiceContainer.selectionService.setSelectedElements([di]));
-            };
-            reader.readAsDataURL(event.dataTransfer.files[0]);
+    dragLeave(designerCanvas, event) {
+        if (this._dragOverExtensionItem) {
+            designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
+            this._dragOverExtensionItem = null;
         }
     }
+    dragOver(designerCanvas, event) {
+        let [newContainer] = this.getPossibleContainerForDragDrop(designerCanvas, event);
+        if (this._dragOverExtensionItem != newContainer) {
+            designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
+            designerCanvas.extensionManager.applyExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
+            this._dragOverExtensionItem = newContainer;
+        }
+        else {
+            designerCanvas.extensionManager.refreshExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
+        }
+    }
+    async drop(designerCanvas, event) {
+        if (this._dragOverExtensionItem) {
+            designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
+            this._dragOverExtensionItem = null;
+        }
+        let [newContainer] = this.getPossibleContainerForDragDrop(designerCanvas, event);
+        if (!newContainer)
+            newContainer = designerCanvas.rootDesignItem;
+        //TODO : we need to use container service for adding to element, so also grid and flexbox work correct
+        const transferData = event.dataTransfer.getData(dragDropFormatNameElementDefinition);
+        const elementDefinition = JSON.parse(transferData);
+        const di = await designerCanvas.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer));
+        const grp = di.openGroup("Insert of <" + di.name + ">");
+        di.setStyle('position', 'absolute');
+        const containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, getComputedStyle(newContainer.element)));
+        containerService.enterContainer(newContainer, [di]);
+        const containerPos = designerCanvas.getNormalizedElementCoordinates(newContainer.element);
+        const evCoord = designerCanvas.getNormalizedEventCoordinates(event);
+        const pos = { x: evCoord.x - containerPos.x, y: evCoord.y - containerPos.y };
+        containerService.place(event, designerCanvas, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
+        containerService.finishPlace(event, designerCanvas, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
+        designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(newContainer, newContainer.childCount, di));
+        requestAnimationFrame(() => {
+            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di]);
+            grp.commit();
+        });
+    }
+    getPossibleContainerForDragDrop(designerCanvas, event) {
+        let newContainerElementDesignItem = null;
+        let newContainerService = null;
+        const elementsFromPoint = designerCanvas.elementsFromPoint(event.x, event.y);
+        for (let e of elementsFromPoint) {
+            if (e == designerCanvas.rootDesignItem.element) {
+                newContainerElementDesignItem = designerCanvas.rootDesignItem;
+                const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
+                newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
+                break;
+            }
+            else if (false) {
+                //check we don't try to move a item over one of its children..
+            }
+            else {
+                newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
+                newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
+                if (newContainerService) {
+                    //TODO: Maybe the check for SVG Elemnt should be in "canEnterByDrop"?
+                    if (newContainerService.canEnterByDrop(newContainerElementDesignItem) && !(newContainerElementDesignItem.element instanceof SVGElement)) {
+                        break;
+                    }
+                    else {
+                        newContainerElementDesignItem = null;
+                        newContainerService = null;
+                        continue;
+                    }
+                }
+            }
+        }
+        return [newContainerElementDesignItem, newContainerService];
+    }
 }

package/dist/elements/services/dragDropService/ExternalDragDropService copy.d.ts

@@ -0,0 +1,6 @@
+import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
+import { IExternalDragDropService } from "./IExternalDragDropService.js";
+export declare class ExternalDragDropService implements IExternalDragDropService {
+    dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
+    drop(designerView: IDesignerCanvas, event: DragEvent): void;
+}

package/dist/elements/services/dragDropService/ExternalDragDropService copy.js

@@ -0,0 +1,28 @@
+import { DesignItem } from '../../item/DesignItem.js';
+import { InsertAction } from "../undoService/transactionItems/InsertAction.js";
+export class ExternalDragDropService {
+    dragOver(event) {
+        if (event.dataTransfer.items[0].type.startsWith('image/'))
+            return 'copy';
+        return 'none';
+    }
+    drop(designerView, event) {
+        if (event.dataTransfer.files[0].type.startsWith('image/')) {
+            let reader = new FileReader();
+            reader.onloadend = () => {
+                const img = document.createElement('img');
+                img.src = reader.result;
+                const di = DesignItem.createDesignItemFromInstance(img, designerView.serviceContainer, designerView.instanceServiceContainer);
+                let grp = di.openGroup("Insert of <img>");
+                di.setStyle('position', 'absolute');
+                const targetRect = event.target.getBoundingClientRect();
+                di.setStyle('top', event.offsetY + targetRect.top - designerView.containerBoundingRect.y + 'px');
+                di.setStyle('left', event.offsetX + targetRect.left - designerView.containerBoundingRect.x + 'px');
+                designerView.instanceServiceContainer.undoService.execute(new InsertAction(designerView.rootDesignItem, designerView.rootDesignItem.childCount, di));
+                grp.commit();
+                requestAnimationFrame(() => designerView.instanceServiceContainer.selectionService.setSelectedElements([di]));
+            };
+            reader.readAsDataURL(event.dataTransfer.files[0]);
+        }
+    }
+}

package/dist/elements/services/dragDropService/ExternalDragDropService.d.ts

@@ -0,0 +1,6 @@
+import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
+import { IExternalDragDropService } from "./IExternalDragDropService.js";
+export declare class ExternalDragDropService implements IExternalDragDropService {
+    dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
+    drop(designerCanvas: IDesignerCanvas, event: DragEvent): void;
+}

package/dist/elements/services/dragDropService/ExternalDragDropService.js

@@ -0,0 +1,28 @@
+import { DesignItem } from '../../item/DesignItem.js';
+import { InsertAction } from "../undoService/transactionItems/InsertAction.js";
+export class ExternalDragDropService {
+    dragOver(event) {
+        if (event.dataTransfer.items[0].type.startsWith('image/'))
+            return 'copy';
+        return 'none';
+    }
+    drop(designerCanvas, event) {
+        if (event.dataTransfer.files[0].type.startsWith('image/')) {
+            let reader = new FileReader();
+            reader.onloadend = () => {
+                const img = document.createElement('img');
+                img.src = reader.result;
+                const di = DesignItem.createDesignItemFromInstance(img, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                let grp = di.openGroup("Insert of <img>");
+                di.setStyle('position', 'absolute');
+                const targetRect = event.target.getBoundingClientRect();
+                di.setStyle('top', event.offsetY + targetRect.top - designerCanvas.containerBoundingRect.y + 'px');
+                di.setStyle('left', event.offsetX + targetRect.left - designerCanvas.containerBoundingRect.x + 'px');
+                designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
+                grp.commit();
+                requestAnimationFrame(() => designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di]));
+            };
+            reader.readAsDataURL(event.dataTransfer.files[0]);
+        }
+    }
+}

package/dist/elements/services/dragDropService/IDragDropService.d.ts

@@ -1,5 +1,10 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
 import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
+import { IPlacementService } from "../placementService/IPlacementService.js";
 export interface IDragDropService {
-    dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
+    dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent): any;
+    dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent): any;
+    dragOver(designerCanvas: IDesignerCanvas, event: DragEvent): any;
     drop(designerCanvas: IDesignerCanvas, event: DragEvent): any;
+    getPossibleContainerForDragDrop(designerCanvas: IDesignerCanvas, event: DragEvent): [newContainerElementDesignItem: IDesignItem, newContainerService: IPlacementService];
 }

package/dist/elements/services/dragDropService/IExternalDragDropService copy.d.ts

@@ -0,0 +1,5 @@
+import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
+export interface IExternalDragDropService {
+    dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
+    drop(designerCanvas: IDesignerCanvas, event: DragEvent): any;
+}

package/dist/elements/services/dragDropService/IExternalDragDropService copy.js

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

package/dist/elements/services/dragDropService/IExternalDragDropService.d.ts

@@ -0,0 +1,5 @@
+import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
+export interface IExternalDragDropService {
+    dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
+    drop(designerCanvas: IDesignerCanvas, event: DragEvent): any;
+}

package/dist/elements/services/dragDropService/IExternalDragDropService.js

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

package/dist/elements/services/placementService/DefaultPlacementService.d.ts

@@ -12,6 +12,7 @@ export declare class DefaultPlacementService implements IPlacementService {
     placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
     startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
     place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): void;
     enterContainer(container: IDesignItem, items: IDesignItem[]): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
     finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;

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

@@ -109,6 +109,17 @@ export class DefaultPlacementService {
             combineTransforms(designItem.element, designItem.getStyle('transform'), translationMatrix.toString());
         }
     }
+    moveElements(designItems, position, absolute) {
+        //TODO: Check if we set left or right
+        //TODO: Use CSS units
+        for (let d of designItems) {
+            if (position.x)
+                d.setStyle('left', parseInt(d.element.style.left) - position.x + 'px');
+            if (position.y)
+                d.setStyle('top', parseInt(d.element.style.top) - position.y + 'px');
+        }
+        designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshExtensions(designItems);
+    }
     enterContainer(container, items) {
         let filterdItems = filterChildPlaceItems(items);
         for (let i of filterdItems) {

package/dist/elements/services/placementService/FlexBoxPlacementService.d.ts

@@ -14,4 +14,5 @@ export declare class FlexBoxPlacementService implements IPlacementService {
     startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
     place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
     finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): void;
 }

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

@@ -110,4 +110,6 @@ export class FlexBoxPlacementService {
     }
     finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
     }
+    moveElements(designItems, position, absolute) {
+    }
 }

package/dist/elements/services/placementService/GridPlacementService.d.ts

@@ -14,4 +14,5 @@ export declare class GridPlacementService implements IPlacementService {
     startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
     place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
     finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): void;
 }

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

@@ -105,4 +105,6 @@ export class GridPlacementService {
         }
         placementView.extensionManager.refreshAllExtensions([container]);
     }
+    moveElements(designItems, position, absolute) {
+    }
 }

package/dist/elements/services/placementService/IPlacementService.d.ts

@@ -3,10 +3,10 @@ import { IDesignItem } from '../../item/IDesignItem.js';
 import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 import { IPoint } from '../../../interfaces/IPoint.js';
 export interface IPlacementService extends IService {
-    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): any;
-    canEnterByDrop(container: IDesignItem): any;
-    canEnter(container: IDesignItem, items: IDesignItem[]): any;
-    canLeave(container: IDesignItem, items: IDesignItem[]): any;
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
+    canEnterByDrop(container: IDesignItem): boolean;
+    canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
+    canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     enterContainer(container: IDesignItem, items: IDesignItem[]): any;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): any;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
@@ -14,4 +14,5 @@ export interface IPlacementService extends IService {
     startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): any;
     place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): any;
     finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): any;
+    moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): any;
 }

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

@@ -90,12 +90,10 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     lazyTriggerReparseDocumentStylesheets(): void;
     private reparseDocumentStylesheets;
     addDesignItems(designItems: IDesignItem[]): void;
-    _dragOverExtensionItem: IDesignItem;
     private _onDragEnter;
     private _onDragLeave;
     private _lastDdElement;
     private _onDragOver;
-    private _getPossibleContainerForDrop;
     private _onDrop;
     showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenu;
     private _onDblClick;