@node-projects/web-component-designer 0.0.35 → 0.0.39

package/dist/elements/helper/Screenshot.js

@@ -1,5 +1,9 @@
 // for screenshots to be genrated properly, you need to select the current tab only in media source selector
 export class Screenshot {
+    static _canvas;
+    static _context;
+    static _video;
+    static _captureStream;
     static _disableStream() {
         Screenshot._captureStream.getTracks().forEach(track => track.stop());
         Screenshot._canvas = null;

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

@@ -1,7 +1,62 @@
 import { css } from "@node-projects/base-custom-webcomponent";
 export class ContextMenuHelper {
-    constructor() {
-    }
+    static _contextMenuCss = css `
+  .context-menu {
+    display: none;
+    position: absolute;
+    z-index: 999999;
+    padding: 0px 0;
+    background-color: rgb(255 255 255 / 93%);
+    border: solid 1px #dfdfdf;
+    box-shadow: 1px 1px 2px #cfcfcf;
+    cursor: default;
+    user-select: none;
+    border-radius: 12px;
+  }
+
+  .context-menu hr {
+    margin: 0 0 5px 5%;
+    height: 1px;
+    width: 90%;
+    background-color: #e2e2e2;
+  }
+  
+  .context-menu--active {
+    display: block;
+  }
+  
+  .context-menu__items {
+    list-style: none;
+    margin: 8px;
+    padding: 0;
+  }
+  
+  .context-menu__item {
+    display: block;
+    margin-bottom: 4px;
+  }
+  
+  .context-menu__item:last-child {
+    margin-bottom: 0;
+  }
+  
+  .context-menu__link {
+    display: block;
+    padding: 0px 12px;
+    color: #0066aa;
+    text-decoration: none;
+  }
+  
+  .context-menu__link:hover {
+    color: #fff;
+    background-color: #0066aa;
+  }`;
+    _shadowRoot;
+    _element;
+    _closeBound;
+    _keyUpBound;
+    _closeOnDownBound;
+    _closeOnUpBound;
     static addContextMenu(element, items) {
         element.oncontextmenu = (event) => {
             event.preventDefault();
@@ -22,6 +77,8 @@ export class ContextMenuHelper {
         ctxMenu.positionMenu(e);
         return ctxMenu;
     }
+    constructor() {
+    }
     init(shadowRoot, element) {
         this._shadowRoot = shadowRoot;
         this._element = element;
@@ -153,54 +210,3 @@ export class ContextMenuHelper {
         }
     }
 }
-ContextMenuHelper._contextMenuCss = css `
-  .context-menu {
-    display: none;
-    position: absolute;
-    z-index: 999999;
-    padding: 0px 0;
-    background-color: rgb(255 255 255 / 93%);
-    border: solid 1px #dfdfdf;
-    box-shadow: 1px 1px 2px #cfcfcf;
-    cursor: default;
-    user-select: none;
-    border-radius: 12px;
-  }
-
-  .context-menu hr {
-    margin: 0 0 5px 5%;
-    height: 1px;
-    width: 90%;
-    background-color: #e2e2e2;
-  }
-  
-  .context-menu--active {
-    display: block;
-  }
-  
-  .context-menu__items {
-    list-style: none;
-    margin: 8px;
-    padding: 0;
-  }
-  
-  .context-menu__item {
-    display: block;
-    margin-bottom: 4px;
-  }
-  
-  .context-menu__item:last-child {
-    margin-bottom: 0;
-  }
-  
-  .context-menu__link {
-    display: block;
-    padding: 0px 12px;
-    color: #0066aa;
-    text-decoration: none;
-  }
-  
-  .context-menu__link:hover {
-    color: #fff;
-    background-color: #0066aa;
-  }`;

package/dist/elements/helper/w3color.js

@@ -1,22 +1,20 @@
 /* w3color.js ver.1.18 by w3schools.com (Do not remove this line)*/
 export class w3color {
-    constructor() {
-        this.red = 0;
-        this.green = 0;
-        this.blue = 0;
-        this.hue = 0;
-        this.sat = 0;
-        this.lightness = 0;
-        this.whiteness = 0;
-        this.blackness = 0;
-        this.cyan = 0;
-        this.magenta = 0;
-        this.yellow = 0;
-        this.black = 0;
-        this.ncol = 'R';
-        this.opacity = 1;
-        this.valid = false;
-    }
+    red = 0;
+    green = 0;
+    blue = 0;
+    hue = 0;
+    sat = 0;
+    lightness = 0;
+    whiteness = 0;
+    blackness = 0;
+    cyan = 0;
+    magenta = 0;
+    yellow = 0;
+    black = 0;
+    ncol = 'R';
+    opacity = 1;
+    valid = false;
     toRgbString() {
         return "rgb(" + this.red + ", " + this.green + ", " + this.blue + ")";
     }

package/dist/elements/item/DesignItem.d.ts

@@ -21,6 +21,7 @@ export declare class DesignItem implements IDesignItem {
     get name(): string;
     get id(): string;
     set id(value: string);
+    get isRootItem(): boolean;
     private _childArray;
     get hasChildren(): boolean;
     children(): IterableIterator<IDesignItem>;

package/dist/elements/item/DesignItem.js

@@ -7,16 +7,10 @@ const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
 const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
 const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
 export class DesignItem {
-    constructor(node, serviceContainer, instanceServiceContainer) {
-        this.appliedDesignerExtensions = new Map();
-        this._childArray = [];
-        this.node = node;
-        this.serviceContainer = serviceContainer;
-        this.instanceServiceContainer = instanceServiceContainer;
-        this.attributes = new Map();
-        this.styles = new Map();
-        DesignItem._designItemMap.set(node, this);
-    }
+    node;
+    serviceContainer;
+    instanceServiceContainer;
+    appliedDesignerExtensions = new Map();
     replaceNode(newNode) {
         DesignItem._designItemMap.delete(this.node);
         DesignItem._designItemMap.set(newNode, this);
@@ -32,9 +26,12 @@ export class DesignItem {
     get hasAttributes() {
         return this.attributes.size > 0;
     }
+    attributes;
     get hasStyles() {
         return this.styles.size > 0;
     }
+    styles;
+    static _designItemMap = new WeakMap();
     get element() {
         return this.node;
     }
@@ -47,6 +44,10 @@ export class DesignItem {
     set id(value) {
         this.element.id = value;
     }
+    get isRootItem() {
+        return this.instanceServiceContainer.contentService.rootDesignItem === this;
+    }
+    _childArray = [];
     get hasChildren() {
         return this._childArray.length > 0;
     }
@@ -103,11 +104,11 @@ export class DesignItem {
     set content(value) {
         this.node.textContent = value;
     }
+    _hideAtDesignTime;
     get hideAtDesignTime() {
         return this._hideAtDesignTime;
     }
     set hideAtDesignTime(value) {
-        var _a;
         this._hideAtDesignTime = value;
         if (value)
             this.attributes.set(hideAtDesignTimeAttributeName, "");
@@ -115,16 +116,16 @@ export class DesignItem {
             this.attributes.delete(hideAtDesignTimeAttributeName);
         if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
             if (!value)
-                this.element.style.display = (_a = this.styles.get('display')) !== null && _a !== void 0 ? _a : "";
+                this.element.style.display = this.styles.get('display') ?? "";
             else
                 this.element.style.display = 'none';
         }
     }
+    _hideAtRunTime;
     get hideAtRunTime() {
         return this._hideAtRunTime;
     }
     set hideAtRunTime(value) {
-        var _a;
         this._hideAtRunTime = value;
         if (value)
             this.attributes.set(hideAtRunTimeAttributeName, "");
@@ -132,11 +133,12 @@ export class DesignItem {
             this.attributes.delete(hideAtRunTimeAttributeName);
         if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
             if (!value)
-                this.element.style.opacity = (_a = this.styles.get('opacity')) !== null && _a !== void 0 ? _a : "";
+                this.element.style.opacity = this.styles.get('opacity') ?? "";
             else
                 this.element.style.opacity = '0.3';
         }
     }
+    _lockAtDesignTime;
     get lockAtDesignTime() {
         return this._lockAtDesignTime;
     }
@@ -198,6 +200,14 @@ export class DesignItem {
             }
         }
     }
+    constructor(node, serviceContainer, instanceServiceContainer) {
+        this.node = node;
+        this.serviceContainer = serviceContainer;
+        this.instanceServiceContainer = instanceServiceContainer;
+        this.attributes = new Map();
+        this.styles = new Map();
+        DesignItem._designItemMap.set(node, this);
+    }
     openGroup(title, affectedItems) {
         return this.instanceServiceContainer.undoService.openGroup(title, affectedItems);
     }
@@ -236,4 +246,3 @@ export class DesignItem {
         this.instanceServiceContainer.undoService.execute(action);
     }
 }
-DesignItem._designItemMap = new WeakMap();

package/dist/elements/item/IDesignItem.d.ts

@@ -9,6 +9,7 @@ export interface IDesignItem {
     readonly nodeType: NodeType;
     readonly name: string;
     readonly id: string;
+    readonly isRootItem: boolean;
     readonly hasAttributes: boolean;
     readonly attributes: Map<string, string>;
     readonly hasStyles: boolean;

package/dist/elements/services/BaseServiceContainer.js

@@ -1,7 +1,5 @@
 export class BaseServiceContainer {
-    constructor() {
-        this._services = new Map();
-    }
+    _services = new Map();
     getLastService(service) {
         let list = this._services.get(service);
         if (list && list.length)

package/dist/elements/services/GlobalContext.js

@@ -2,13 +2,11 @@
 //Service container should not be something with changeing information, so global context is for tool and color (and maybe more)
 import { PropertyChangedArgs, TypedEvent } from "@node-projects/base-custom-webcomponent";
 export class GlobalContext {
+    _serviceContainer;
+    _tool;
+    _strokeColor = 'black';
+    _fillBrush = 'transparent';
     constructor(serviceContainer) {
-        this._strokeColor = 'black';
-        this._fillBrush = 'transparent';
-        this.onToolChanged = new TypedEvent();
-        this.finishedWithTool = () => this.tool = null;
-        this.onStrokeColorChanged = new TypedEvent();
-        this.onFillBrushChanged = new TypedEvent();
         this._serviceContainer = serviceContainer;
     }
     set tool(tool) {
@@ -25,6 +23,8 @@ export class GlobalContext {
     get tool() {
         return this._tool;
     }
+    onToolChanged = new TypedEvent();
+    finishedWithTool = () => this.tool = null;
     set strokeColor(strokeColor) {
         if (this._strokeColor !== strokeColor) {
             const oldStrokeColor = this._strokeColor;
@@ -35,6 +35,7 @@ export class GlobalContext {
     get strokeColor() {
         return this._strokeColor;
     }
+    onStrokeColorChanged = new TypedEvent();
     set fillBrush(fillBrush) {
         this._fillBrush = fillBrush;
         if (this._fillBrush !== fillBrush) {
@@ -46,4 +47,5 @@ export class GlobalContext {
     get fillBrush() {
         return this._fillBrush;
     }
+    onFillBrushChanged = new TypedEvent();
 }

package/dist/elements/services/InstanceServiceContainer.js

@@ -1,10 +1,7 @@
 import { BaseServiceContainer } from './BaseServiceContainer';
 import { DesignContext } from '../widgets/designerView/DesignContext';
 export class InstanceServiceContainer extends BaseServiceContainer {
-    constructor() {
-        super(...arguments);
-        this.designContext = new DesignContext();
-    }
+    designContext = new DesignContext();
     get undoService() {
         return this.getLastService('undoService');
     }

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

@@ -21,6 +21,7 @@ import { ISnaplinesProviderService } from "./placementService/ISnaplinesProvider
 import { IPrepareElementsForDesignerService } from './instanceService/IPrepareElementsForDesignerService';
 import { IDragDropService } from './dragDropService/IDragDropService';
 import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js";
+import { IDesignerPointerExtensionProvider } from "../widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -43,6 +44,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
         demoViewWidget: new (...args: any[]) => IDemoView & HTMLElement;
     };
     readonly designerExtensions: Map<(ExtensionType | string), IDesignerExtensionProvider[]>;
+    readonly designerPointerExtensions: IDesignerPointerExtensionProvider[];
     designerContextMenuExtensions: IContextMenuExtension[];
     readonly globalContext: GlobalContext;
     readonly designerTools: Map<string | NamedTools, ITool>;

package/dist/elements/services/ServiceContainer.js

@@ -3,16 +3,15 @@ import { CodeViewMonaco } from "../widgets/codeView/code-view-monaco";
 import { DemoView } from '../widgets/demoView/demoView';
 import { GlobalContext } from './GlobalContext';
 export class ServiceContainer extends BaseServiceContainer {
-    constructor() {
-        super(...arguments);
-        this.config = {
-            codeViewWidget: CodeViewMonaco,
-            demoViewWidget: DemoView
-        };
-        this.designerExtensions = new Map();
-        this.globalContext = new GlobalContext(this);
-        this.designerTools = new Map();
-    }
+    config = {
+        codeViewWidget: CodeViewMonaco,
+        demoViewWidget: DemoView
+    };
+    designerExtensions = new Map();
+    designerPointerExtensions = [];
+    designerContextMenuExtensions;
+    globalContext = new GlobalContext(this);
+    designerTools = new Map();
     get bindingService() {
         return this.getLastService('bindingService');
     }

package/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js

@@ -1,6 +1,7 @@
 import { BindingMode } from '../../item/BindingMode';
 import { BindingTarget } from "../../item/BindingTarget.js";
 export class BaseCustomWebcomponentBindingsService {
+    static type = 'base-custom-webcomponent-binding';
     getBindings(designItem) {
         let bindings = null;
         for (let a of designItem.attributes) {
@@ -66,4 +67,3 @@ export class BaseCustomWebcomponentBindingsService {
         return true;
     }
 }
-BaseCustomWebcomponentBindingsService.type = 'base-custom-webcomponent-binding';

package/dist/elements/services/bindingsService/SpecialTagsBindingService.js

@@ -2,11 +2,12 @@ import { BindingTarget } from "../../item/BindingTarget.js";
 import { BindingMode } from "../../item/BindingMode.js";
 /* Service wich read binings from special HTMl elements -> like tag-binding */
 export class SpecialTagsBindingService {
+    static type = 'visu-tagbinding-binding';
+    _bindingTagName = "visu-tagbinding";
+    _elementIdAttribute = "elemnt-id";
+    _propertyNameAttribute = "property";
+    _isStyleNameAttribute = "is-style";
     constructor() {
-        this._bindingTagName = "visu-tagbinding";
-        this._elementIdAttribute = "elemnt-id";
-        this._propertyNameAttribute = "property";
-        this._isStyleNameAttribute = "is-style";
     }
     getBindings(designItem) {
         const bindings = [];
@@ -37,4 +38,3 @@ export class SpecialTagsBindingService {
         return true;
     }
 }
-SpecialTagsBindingService.type = 'visu-tagbinding-binding';

package/dist/elements/services/contentService/ContentService.js

@@ -1,7 +1,8 @@
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 export class ContentService {
     constructor(rootElement) {
-        this.onContentChanged = new TypedEvent();
         this.rootDesignItem = rootElement;
     }
+    rootDesignItem;
+    onContentChanged = new TypedEvent();
 }

package/dist/elements/services/elementsService/JsonFileElementsService.js

@@ -1,6 +1,20 @@
 import { LazyLoader } from '@node-projects/base-custom-webcomponent';
 // Reads a Json File and provides the Elements listed there
 export class JsonFileElementsService {
+    _name;
+    get name() { return this._name; }
+    _elementList;
+    _resolveStored;
+    _rejectStored;
+    getElements() {
+        if (this._elementList)
+            return Promise.resolve(this._elementList);
+        if (!this._resolveStored) {
+            this._resolveStored = [];
+            this._rejectStored = [];
+        }
+        return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
+    }
     constructor(name, file) {
         this._name = name;
         LazyLoader.LoadText(file).then(data => {
@@ -25,16 +39,6 @@ export class JsonFileElementsService {
             }
         });
     }
-    get name() { return this._name; }
-    getElements() {
-        if (this._elementList)
-            return Promise.resolve(this._elementList);
-        if (!this._resolveStored) {
-            this._resolveStored = [];
-            this._rejectStored = [];
-        }
-        return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
-    }
     isIElementDefintion(object) {
         return object != null && object.tag != null;
     }

package/dist/elements/services/elementsService/PreDefinedElementsService.js

@@ -1,4 +1,10 @@
 export class PreDefinedElementsService {
+    _name;
+    get name() { return this._name; }
+    _elementList;
+    getElements() {
+        return Promise.resolve(this._elementList);
+    }
     constructor(name, data) {
         this._name = name;
         this._elementList = [];
@@ -9,10 +15,6 @@ export class PreDefinedElementsService {
                 this._elementList.push({ tag: element });
         });
     }
-    get name() { return this._name; }
-    getElements() {
-        return Promise.resolve(this._elementList);
-    }
     isIElementDefintion(object) {
         return object != null && object.tag != null;
     }

package/dist/elements/services/htmlParserService/NodeHtmlParserService.js

@@ -4,8 +4,8 @@ import { newElementFromString } from "../../helper/ElementHelper";
 // Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
 // attributes from their DOM, so you loose Data
 export class NodeHtmlParserService {
+    _parserUrl;
     constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js') {
-        this._parseDiv = document.createElement("div");
         this._parserUrl = parserUrl;
     }
     async parse(html, serviceContainer, instanceServiceContainer) {
@@ -22,6 +22,7 @@ export class NodeHtmlParserService {
         }
         return designItems;
     }
+    _parseDiv = document.createElement("div");
     _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
         let designItem = null;
         if (item.nodeType == 1) {

package/dist/elements/services/htmlWriterService/IHtmlWriterOptions.js

@@ -1,2 +1,5 @@
 export class IHtmlWriterOptions {
+    beautifyOutput;
+    compressCssToShorthandProperties;
+    writeDesignerProperties;
 }

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

@@ -1,7 +1,6 @@
 import type { IPoint } from '../../../interfaces/IPoint.js';
 import type { IPlacementService } from './IPlacementService.js';
 import type { IDesignItem } from '../../item/IDesignItem.js';
-import { IDesignerMousePoint } from '../../../interfaces/IDesignerMousePoint.js';
 import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 export declare class DefaultPlacementService implements IPlacementService {
     serviceForContainer(container: IDesignItem): boolean;
@@ -9,9 +8,9 @@ export declare class DefaultPlacementService implements IPlacementService {
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
     private calculateTrack;
-    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IDesignerMousePoint, newPoint: IDesignerMousePoint, items: IDesignItem[]): IPoint;
-    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IDesignerMousePoint, newPoint: IDesignerMousePoint, items: IDesignItem[]): void;
+    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
+    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
     enterContainer(container: IDesignItem, items: IDesignItem[]): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
-    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IDesignerMousePoint, newPoint: IDesignerMousePoint, 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

@@ -19,7 +19,7 @@ export class DefaultPlacementService {
     getElementOffset(container, designItem) {
         return container.element.getBoundingClientRect();
     }
-    calculateTrack(event, placementView, startPoint, newPoint, item) {
+    calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, item) {
         let trackX = newPoint.x - startPoint.x;
         let trackY = newPoint.y - startPoint.y;
         if (!event.ctrlKey) {
@@ -29,15 +29,15 @@ export class DefaultPlacementService {
             }
             else if (placementView.alignOnSnap) {
                 let rect = item.element.getBoundingClientRect();
-                let newPos = placementView.snapLines.snapToPosition({ x: newPoint.originalX - startPoint.offsetInControlX, y: newPoint.originalY - startPoint.offsetInControlY }, { width: rect.width, height: rect.height }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
+                let newPos = placementView.snapLines.snapToPosition({ x: newPoint.x - offsetInControl.x, y: newPoint.y - offsetInControl.y }, { width: rect.width, height: rect.height }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
                 if (newPos.x !== null) {
-                    trackX = newPos.x - Math.round(startPoint.originalX) + Math.round(startPoint.offsetInControlX);
+                    trackX = newPos.x - Math.round(startPoint.x) + Math.round(offsetInControl.x);
                 }
                 else {
                     trackX = Math.round(trackX);
                 }
                 if (newPos.y !== null) {
-                    trackY = newPos.y - Math.round(startPoint.originalY) + Math.round(startPoint.offsetInControlY);
+                    trackY = newPos.y - Math.round(startPoint.y) + Math.round(offsetInControl.y);
                 }
                 else {
                     trackY = Math.round(trackY);
@@ -46,7 +46,7 @@ export class DefaultPlacementService {
         }
         return { x: trackX, y: trackY };
     }
-    placePoint(event, placementView, container, startPoint, newPoint, items) {
+    placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
         let trackX = newPoint.x;
         let trackY = newPoint.y;
         if (!event.ctrlKey) {
@@ -55,7 +55,7 @@ export class DefaultPlacementService {
                 trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize;
             }
             else if (placementView.alignOnSnap) {
-                let newPos = placementView.snapLines.snapToPosition({ x: newPoint.originalX - startPoint.offsetInControlX, y: newPoint.originalY - startPoint.offsetInControlY }, null, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
+                let newPos = placementView.snapLines.snapToPosition({ x: newPoint.x - offsetInControl.x, y: newPoint.y - offsetInControl.y }, null, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
                 if (newPos.x !== null) {
                     trackX = newPos.x;
                 }
@@ -72,10 +72,10 @@ export class DefaultPlacementService {
         }
         return { x: trackX, y: trackY };
     }
-    place(event, placementView, container, startPoint, newPoint, items) {
+    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
         //TODO:, this should revert all undo actions while active
         //maybe a undo actions returns itself or an id so it could be changed?
-        let track = this.calculateTrack(event, placementView, startPoint, newPoint, items[0]);
+        let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
         //TODO: -> what is if a transform already exists -> backup existing style.?
         for (const designItem of items) {
             designItem.element.style.transform = 'translate(' + track.x + 'px, ' + track.y + 'px)';
@@ -85,8 +85,8 @@ export class DefaultPlacementService {
     }
     leaveContainer(container, items) {
     }
-    finishPlace(event, placementView, container, startPoint, newPoint, items) {
-        let track = this.calculateTrack(event, placementView, startPoint, newPoint, items[0]);
+    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
         for (const designItem of items) {
             let movedElement = designItem.element;
             let oldLeft = parseInt(movedElement.style.left);

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

@@ -1,4 +1,3 @@
-import { IDesignerMousePoint } from '../../../interfaces/IDesignerMousePoint.js';
 import { IPoint } from '../../../interfaces/IPoint.js';
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
@@ -10,7 +9,7 @@ export declare class FlexBoxPlacementService implements IPlacementService {
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
-    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IDesignerMousePoint, newPoint: IDesignerMousePoint, items: IDesignItem[]): IPoint;
-    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IDesignerMousePoint, newPoint: IDesignerMousePoint, items: IDesignItem[]): void;
-    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IDesignerMousePoint, newPoint: IDesignerMousePoint, items: IDesignItem[]): void;
+    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
+    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;
 }