@node-projects/web-component-designer 0.0.291 → 0.1.0

package/dist/elements/services/instanceService/DefaultInstanceService.js

@@ -1,71 +0,0 @@
-import { DesignItem } from '../../item/DesignItem.js';
-import { encodeXMLChars } from '../../helper/XmlHelper.js';
-import { newElementFromString } from '../../helper/ElementHelper.js';
-export class DefaultInstanceService {
-    async getElement(definition, serviceContainer, instanceServiceContainer) {
-        if (definition.import) {
-            let importUri = definition.import;
-            if (importUri[0] === '.')
-                importUri = (window.location.origin + window.location.pathname).split('/').slice(0, -1).join('/') + '/' + importUri;
-            //@ts-ignore
-            if (window.importShim) {
-                //@ts-ignore
-                importShim(importUri).then((x) => {
-                    let ctor = customElements.get(definition.tag);
-                    if (!ctor && definition.className && x[definition.className])
-                        customElements.define(definition.tag, x[definition.className]);
-                    //TODO: refresh all extensions
-                });
-            }
-            else {
-                import(importUri).then((x) => {
-                    let ctor = customElements.get(definition.tag);
-                    if (!ctor && definition.className && x[definition.className])
-                        customElements.define(definition.tag, x[definition.className]);
-                    //TODO: refresh all extensions
-                });
-            }
-            //removed await here, feels better to not wait for the elemnt is loaded, maybe this needs to be configurable
-            if (instanceServiceContainer.designContext.imports.indexOf(importUri) <= 0)
-                instanceServiceContainer.designContext.imports.push(importUri);
-        }
-        let attr = '';
-        if (definition.defaultAttributes) {
-            for (let a in definition.defaultAttributes) {
-                let value = definition.defaultAttributes[a];
-                try {
-                    if (typeof value === 'object')
-                        attr += ' ' + a + '="' + encodeXMLChars(JSON.stringify(definition.defaultAttributes[a])) + '"';
-                    else
-                        attr += ' ' + a + '="' + encodeXMLChars(definition.defaultAttributes[a]) + '"';
-                }
-                catch (e) {
-                    console.warn(e);
-                }
-            }
-        }
-        const elementString = '<' + definition.tag + attr + '></' + definition.tag + '>';
-        const element = newElementFromString(elementString);
-        if (!definition.doNotSetInNodeProjectsDesignerViewOnInstance)
-            element._inNodeProjectsDesignerView = true;
-        if (definition.defaultWidth)
-            element.style.width = definition.defaultWidth;
-        if (definition.defaultHeight)
-            element.style.height = definition.defaultHeight;
-        element.style.position = 'absolute';
-        if (definition.defaultStyles) {
-            for (let s in definition.defaultStyles)
-                element.style[s] = definition.defaultStyles[s];
-        }
-        if (definition.defaultContent) {
-            if (typeof definition.defaultContent === "string") {
-                element.innerHTML = definition.defaultContent;
-            }
-            else {
-                element.appendChild(definition.defaultContent);
-            }
-        }
-        let designItem = DesignItem.createDesignItemFromInstance(element, serviceContainer, instanceServiceContainer);
-        return designItem;
-    }
-}

package/dist/elements/services/instanceService/IDesignerInstance.d.ts

@@ -1,3 +0,0 @@
-export interface IDesignerInstance {
-    _inNodeProjectsDesignerView: boolean;
-}

package/dist/elements/services/instanceService/IDesignerInstance.js

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

package/dist/elements/services/instanceService/IInstanceService.d.ts

@@ -1,8 +0,0 @@
-import { IService } from '../IService.js';
-import { IElementDefinition } from '../elementsService/IElementDefinition.js';
-import type { ServiceContainer } from '../ServiceContainer.js';
-import type { InstanceServiceContainer } from '../InstanceServiceContainer.js';
-import { IDesignItem } from '../../item/IDesignItem.js';
-export interface IInstanceService extends IService {
-    getElement(definition: IElementDefinition, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem>;
-}

package/dist/elements/services/instanceService/IInstanceService.js

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

package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.d.ts

@@ -1,26 +0,0 @@
-import { BindingTarget } from '../../item/BindingTarget.js';
-import { IElementDefinition } from '../elementsService/IElementDefinition.js';
-import { IElementsService } from '../elementsService/IElementsService.js';
-import { IPropertiesService, RefreshMode } from '../propertiesService/IPropertiesService.js';
-import { IProperty } from '../propertiesService/IProperty.js';
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { AbstractPropertiesService } from '../propertiesService/services/AbstractPropertiesService.js';
-export declare class WebcomponentManifestParserService extends AbstractPropertiesService implements IElementsService, IPropertiesService {
-    getRefreshMode(designItem: IDesignItem): RefreshMode;
-    private _name;
-    get name(): string;
-    private _packageData;
-    private _elementList;
-    private _propertiesList;
-    private _resolveStored;
-    private _rejectStored;
-    private _importPrefix;
-    constructor(name: string, fileOrObject: string | object, importPrefix?: string);
-    private _parseManifest;
-    private manifestClassPropertyTypeToEditorPropertyType;
-    getElements(): Promise<IElementDefinition[]>;
-    isHandledElement(designItem: IDesignItem): boolean;
-    getProperties(designItem: IDesignItem): IProperty[];
-    getProperty(designItem: IDesignItem, name: string): IProperty;
-    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
-}

package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.js

@@ -1,114 +0,0 @@
-import { BindingTarget } from '../../item/BindingTarget.js';
-import { RefreshMode } from '../propertiesService/IPropertiesService.js';
-import { PropertyType } from '../propertiesService/PropertyType.js';
-import { AbstractPropertiesService } from '../propertiesService/services/AbstractPropertiesService.js';
-import { removeLeading, removeTrailing } from '../../helper/Helper.js';
-export class WebcomponentManifestParserService extends AbstractPropertiesService {
-    getRefreshMode(designItem) {
-        return RefreshMode.none;
-    }
-    _name;
-    get name() { return this._name; }
-    _packageData;
-    _elementList;
-    _propertiesList;
-    _resolveStored;
-    _rejectStored;
-    _importPrefix = '';
-    constructor(name, fileOrObject, importPrefix = '') {
-        super();
-        this._name = name;
-        this._importPrefix = importPrefix;
-        if (typeof fileOrObject === 'string') {
-            this._importPrefix = this._importPrefix ?? fileOrObject.split('/').slice(0, -1).join('/');
-            let importOfFile;
-            //@ts-ignore
-            if (window.importShim)
-                //@ts-ignore
-                importOfFile = importShim(fileOrObject, { assert: { type: 'json' } });
-            else
-                //@ts-ignore
-                importOfFile = import(fileOrObject, { assert: { type: 'json' } });
-            importOfFile.then(module => {
-                this._packageData = module.default;
-                this._parseManifest();
-            }).catch(err => {
-                if (this._rejectStored) {
-                    this._rejectStored.forEach(x => x(err));
-                    this._resolveStored = null;
-                    this._rejectStored = null;
-                }
-            });
-        }
-        else {
-            this._packageData = fileOrObject;
-            this._parseManifest();
-        }
-    }
-    _parseManifest() {
-        this._elementList = [];
-        this._propertiesList = {};
-        for (let m of this._packageData.modules) {
-            for (let e of m.exports) {
-                if (e.kind == 'custom-element-definition') {
-                    this._elementList.push({ tag: e.name, import: removeTrailing(this._importPrefix, '/') + '/' + removeLeading(e.declaration.module, '/') });
-                    let properties = [];
-                    let declaration = m.declarations.find(x => x.name == e.declaration.name);
-                    for (let d of declaration.members) {
-                        if (d.kind == 'field') {
-                            let pType = PropertyType.property;
-                            if (declaration.attributes)
-                                pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
-                            const p = this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text);
-                            properties.push({ name: d.name, service: this, propertyType: pType, type: p[0], values: p[1], description: d.description });
-                        }
-                    }
-                    this._propertiesList[e.name] = properties;
-                }
-            }
-            if (this._resolveStored) {
-                this._resolveStored.forEach(x => x(this._elementList));
-                this._resolveStored = null;
-                this._rejectStored = null;
-            }
-        }
-    }
-    manifestClassPropertyTypeToEditorPropertyType(type) {
-        if (type) {
-            if (type.toLowerCase() === 'boolean')
-                return ['boolean'];
-            if (type.toLowerCase() === 'number')
-                return ['number'];
-            if (type.toLowerCase() === 'string')
-                return ['string'];
-            if (type.startsWith("'") && type.includes("|")) {
-                const values = type.split("|").map(x => x.trim()).map(x => x.substring(1, x.length - 1));
-                return ['list', values];
-            }
-        }
-        return [type];
-    }
-    async getElements() {
-        if (this._packageData)
-            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); });
-    }
-    isHandledElement(designItem) {
-        if (this._elementList)
-            return this._elementList.find(x => x.tag == designItem.name) != null;
-        return false;
-    }
-    getProperties(designItem) {
-        return this._propertiesList[designItem.name];
-    }
-    getProperty(designItem, name) {
-        return this._propertiesList[designItem.name].find(x => x.name == name);
-    }
-    getPropertyTarget(designItem, property) {
-        return this._propertiesList[designItem.name].find(x => x.name == property.name).propertyType == PropertyType.attribute ? BindingTarget.attribute : BindingTarget.property;
-    }
-}

package/dist/elements/services/modelCommandService/DefaultModelCommandService.d.ts

@@ -1,7 +0,0 @@
-import { IUiCommand } from "../../../commandHandling/IUiCommand.js";
-import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
-import { IModelCommandService } from "./IModelCommandService.js";
-export declare class DefaultModelCommandService implements IModelCommandService {
-    canExecuteCommand(designerCanvas: IDesignerCanvas, command: IUiCommand): boolean;
-    executeCommand(designerCanvas: IDesignerCanvas, command: IUiCommand): Promise<boolean>;
-}

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

@@ -1,148 +0,0 @@
-import { CommandType } from "../../../commandHandling/CommandType.js";
-import { ArrangeHelper } from "../../helper/ArrangeHelper.js";
-import { Orientation } from "../../../enums/Orientation.js";
-export class DefaultModelCommandService {
-    canExecuteCommand(designerCanvas, command) {
-        if (command.type == CommandType.moveBackward ||
-            command.type == CommandType.moveForward ||
-            command.type == CommandType.moveToBack ||
-            command.type == CommandType.moveToFront)
-            return designerCanvas.instanceServiceContainer.selectionService.primarySelection != null;
-        if (command.type == CommandType.arrangeBottom ||
-            command.type == CommandType.arrangeCenter ||
-            command.type == CommandType.arrangeLeft ||
-            command.type == CommandType.arrangeMiddle ||
-            command.type == CommandType.arrangeRight ||
-            command.type == CommandType.arrangeTop ||
-            command.type == CommandType.unifyHeight ||
-            command.type == CommandType.unifyWidth)
-            return designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 1;
-        if (command.type == CommandType.rotateCounterClockwise ||
-            command.type == CommandType.rotateClockwise ||
-            command.type == CommandType.mirrorHorizontal ||
-            command.type == CommandType.mirrorVertical)
-            return designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 0;
-        return null;
-    }
-    async executeCommand(designerCanvas, command) {
-        let sel = designerCanvas.instanceServiceContainer.selectionService.primarySelection;
-        const selection = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements];
-        if (command.type == CommandType.moveBackward) {
-            let idx = sel.parent.indexOf(sel) - 1;
-            if (idx >= 0)
-                sel.parent.insertChild(sel, idx);
-        }
-        else if (command.type == CommandType.moveForward) {
-            let idx = sel.parent.indexOf(sel) + 1;
-            if (idx < sel.parent.childCount)
-                sel.parent.insertChild(sel, idx);
-        }
-        else if (command.type == CommandType.moveToBack)
-            sel.parent.insertChild(sel, 0);
-        else if (command.type == CommandType.moveToFront)
-            sel.parent.insertChild(sel);
-        else if (command.type == CommandType.arrangeTop) {
-            ArrangeHelper.arrangeElements(Orientation.TOP, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-        }
-        else if (command.type == CommandType.arrangeRight) {
-            ArrangeHelper.arrangeElements(Orientation.RIGHT, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-        }
-        else if (command.type == CommandType.arrangeLeft) {
-            ArrangeHelper.arrangeElements(Orientation.LEFT, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-        }
-        else if (command.type == CommandType.arrangeBottom) {
-            ArrangeHelper.arrangeElements(Orientation.BOTTOM, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-        }
-        else if (command.type == CommandType.arrangeCenter) {
-            ArrangeHelper.arrangeElements(Orientation.HORIZONTAL_CENTER, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-        }
-        else if (command.type == CommandType.arrangeMiddle) {
-            ArrangeHelper.arrangeElements(Orientation.VERTICAL_CENTER, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-        }
-        else if (command.type == CommandType.unifyHeight) {
-            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('unifyHeight');
-            const height = designerCanvas.instanceServiceContainer.selectionService.primarySelection.getStyle('height');
-            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                s.setStyle('height', height);
-            }
-            grp.commit();
-        }
-        else if (command.type == CommandType.unifyWidth) {
-            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('unifyWidth');
-            const width = designerCanvas.instanceServiceContainer.selectionService.primarySelection.getStyle('width');
-            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                s.setStyle('width', width);
-            }
-            grp.commit();
-        }
-        else if (command.type == CommandType.rotateCounterClockwise) {
-            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('rotateCounterClockwise');
-            var trf = designerCanvas.instanceServiceContainer.selectionService.primarySelection.getStyle('transform');
-            let degree = 0;
-            let rotation = "";
-            if (trf != null) {
-                try {
-                    if (trf.includes('-'))
-                        degree = parseInt(trf.match(/\d+/)[0]) * -1;
-                    else
-                        degree = parseInt(trf.match(/\d+/)[0]);
-                    rotation = "rotate(" + (degree - 90) + "deg)";
-                }
-                catch {
-                    rotation = "rotate(-90deg)";
-                }
-            }
-            else {
-                rotation = "rotate(-90deg)";
-            }
-            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                s.setStyle('transform', rotation);
-            }
-            grp.commit();
-        }
-        else if (command.type == CommandType.rotateClockwise) {
-            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('rotateClockwise');
-            var trf = designerCanvas.instanceServiceContainer.selectionService.primarySelection.getStyle('transform');
-            let degree = 0;
-            let rotation = "";
-            if (trf != null) {
-                try {
-                    if (trf.includes('-'))
-                        degree = parseInt(trf.match(/\d+/)[0]) * -1;
-                    else
-                        degree = parseInt(trf.match(/\d+/)[0]);
-                    rotation = "rotate(" + (degree + 90) + "deg)";
-                }
-                catch {
-                    rotation = "rotate(90deg)";
-                }
-            }
-            else {
-                rotation = "rotate(90deg)";
-            }
-            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                s.setStyle('transform', rotation);
-            }
-            grp.commit();
-        }
-        else if (command.type == CommandType.mirrorHorizontal) {
-            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('mirrorHorizontal');
-            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                s.setStyle('transform', 'scaleX(-1)');
-            }
-            grp.commit();
-        }
-        else if (command.type == CommandType.mirrorVertical) {
-            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('mirrorHorizontal');
-            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                s.setStyle('transform', 'scaleY(-1)');
-            }
-            grp.commit();
-        }
-        else
-            return null;
-        designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(selection);
-        return true;
-    }
-}
-//TODO: combine transforms, could be easy, add new transform, get the matrix and convert back to simple ones (if possible)

package/dist/elements/services/modelCommandService/IModelCommandService.d.ts

@@ -1,7 +0,0 @@
-import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
-import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
-import { IService } from '../IService.js';
-export interface IModelCommandService extends IService {
-    canExecuteCommand(designerCanvas: IDesignerCanvas, command: IUiCommand): boolean | null;
-    executeCommand(designerCanvas: IDesignerCanvas, command: IUiCommand): any;
-}

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

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

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

@@ -1,19 +0,0 @@
-import type { IPoint } from '../../../interfaces/IPoint.js';
-import type { IPlacementService } from './IPlacementService.js';
-import type { IDesignItem } from '../../item/IDesignItem.js';
-import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
-export declare class DefaultPlacementService implements IPlacementService {
-    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
-    isEnterableContainer(container: IDesignItem): boolean;
-    canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
-    canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
-    getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
-    private calculateTrack;
-    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

@@ -1,148 +0,0 @@
-import { DomConverter } from '../../widgets/designerView/DomConverter.js';
-import { combineTransforms, extractTranslationFromDOMMatrix, getResultingTransformationBetweenElementAndAllAncestors } from '../../helper/TransformHelper.js';
-import { filterChildPlaceItems, placeDesignItem } from '../../helper/LayoutHelper.js';
-import { ExtensionType } from '../../widgets/designerView/extensions/ExtensionType.js';
-import { straightenLine } from '../../helper/PathDataPolyfill.js';
-export class DefaultPlacementService {
-    serviceForContainer(container, containerStyle) {
-        if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
-            containerStyle.display === 'flex' || containerStyle.display === 'inline-flex')
-            return false;
-        return true;
-    }
-    isEnterableContainer(container) {
-        if (DomConverter.IsSelfClosingElement(container.element.localName))
-            return false;
-        if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
-            return false;
-        return true;
-    }
-    canEnter(container, items) {
-        if (!this.isEnterableContainer(container))
-            return false;
-        if (!items.every(x => !x.element.contains(container.element)))
-            return false;
-        return true;
-    }
-    canLeave(container, items) {
-        return true;
-    }
-    getElementOffset(container, designItem) {
-        return container.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(container.element);
-    }
-    calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, item) {
-        let trackX = newPoint.x - startPoint.x;
-        let trackY = newPoint.y - startPoint.y;
-        if (!event.ctrlKey) {
-            if (placementView.alignOnGrid) {
-                trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize;
-                trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize;
-            }
-            else if (placementView.alignOnSnap) {
-                let rect = item.element.getBoundingClientRect();
-                let newPos = placementView.snapLines.snapToPosition({ x: (newPoint.x - offsetInControl.x), y: (newPoint.y - offsetInControl.y) }, { width: rect.width / placementView.scaleFactor, height: rect.height / placementView.scaleFactor }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
-                if (newPos.x !== null) {
-                    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.y) + Math.round(offsetInControl.y);
-                }
-                else {
-                    trackY = Math.round(trackY);
-                }
-            }
-        }
-        return { x: trackX, y: trackY };
-    }
-    placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        let trackX = newPoint.x;
-        let trackY = newPoint.y;
-        if (!event.ctrlKey) {
-            if (placementView.alignOnGrid) {
-                trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize;
-                trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize;
-            }
-            else if (placementView.alignOnSnap) {
-                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;
-                }
-                else {
-                    trackX = Math.round(trackX);
-                }
-                if (newPos.y !== null) {
-                    trackY = newPos.y;
-                }
-                else {
-                    trackY = Math.round(trackY);
-                }
-            }
-        }
-        return { x: trackX, y: trackY };
-    }
-    startPlace(event, placementView, container, startPoint, offsetInControl, 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, offsetInControl, newPoint, items[0]);
-        if (event.shiftKey) {
-            track = straightenLine({ x: 0, y: 0 }, track, true);
-        }
-        let filteredItems = filterChildPlaceItems(items);
-        for (const designItem of filteredItems) {
-            const canvas = designItem.element.closest('#node-projects-designer-canvas-canvas');
-            let originalElementAndAllAncestorsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(designItem.element.parentElement, canvas, true);
-            let transformMatrixParentTransformsCompensated = null;
-            if (originalElementAndAllAncestorsMultipliedMatrix) {
-                transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0).matrixTransform(originalElementAndAllAncestorsMultipliedMatrix.inverse());
-            }
-            else {
-                transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0);
-            }
-            const translationMatrix = new DOMMatrix().translate(transformMatrixParentTransformsCompensated.x, transformMatrixParentTransformsCompensated.y);
-            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) {
-            container.insertChild(i);
-            if (i.lastContainerSize) {
-                if (!i.hasStyle('width'))
-                    i.setStyle('width', i.lastContainerSize.width + 'px');
-                if (!i.hasStyle('height'))
-                    i.setStyle('height', i.lastContainerSize.height + 'px');
-            }
-        }
-    }
-    leaveContainer(container, items) {
-    }
-    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        let filterdItems = filterChildPlaceItems(items);
-        for (const designItem of filterdItems) {
-            let translation = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.element.style.transform));
-            const stylesMapOffset = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.getStyle('transform') ?? ''));
-            designItem.element.style.transform = designItem.getStyle('transform') ?? '';
-            let track = { x: translation.x, y: translation.y };
-            placeDesignItem(container, designItem, { x: track.x - stylesMapOffset.x, y: track.y - stylesMapOffset.y }, 'position');
-        }
-        for (const item of items) {
-            placementView.extensionManager.removeExtension(item, ExtensionType.Placement);
-        }
-    }
-}

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

@@ -1,20 +0,0 @@
-import { IPoint } from '../../../interfaces/IPoint.js';
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
-import { IPlacementService } from './IPlacementService.js';
-export declare class FlexBoxPlacementService implements IPlacementService {
-    private _basePlacementService;
-    constructor(basePlacementService: IPlacementService);
-    enterContainer(container: IDesignItem, items: IDesignItem[]): void;
-    leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
-    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
-    isEnterableContainer(container: IDesignItem): any;
-    canEnter(container: IDesignItem, items: IDesignItem[]): any;
-    canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
-    getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
-    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;
-    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-    moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): void;
-}