@node-projects/web-component-designer 0.0.17 → 0.0.19

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.js

@@ -0,0 +1,78 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { ExtensionType } from "../ExtensionType.js";
+import { OverlayLayer } from "../OverlayLayer.js";
+export class EditTextExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+        this._contentEditedBound = this._contentEdited.bind(this);
+        this._blurBound = this._blur.bind(this);
+    }
+    extend() {
+        //todo -> check what to do with extensions, do not loose edit on mouse click,...
+        //maybe use a html edit framework
+        this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelection);
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Selection);
+        this.extendedItem.element.setAttribute('contenteditable', '');
+        this.extendedItem.element.addEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.addEventListener('blur', this._blurBound);
+        this.extendedItem.element.focus();
+        this.designerView.eatEvents = this.extendedItem.element;
+        let itemRect = this.extendedItem.element.getBoundingClientRect();
+        const elements = EditTextExtension.template.content.cloneNode(true);
+        elements.querySelectorAll('button').forEach(x => x.onclick = () => this._formatSelection(x.dataset['command']));
+        let foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        foreignObject.setAttribute('x', '' + (itemRect.x - this.designerView.containerBoundingRect.x));
+        foreignObject.setAttribute('y', '' + (itemRect.y - this.designerView.containerBoundingRect.y - 32));
+        foreignObject.setAttribute('width', '50');
+        foreignObject.setAttribute('height', '32');
+        foreignObject.appendChild(elements);
+        this.overlayLayerView.addOverlay(foreignObject, OverlayLayer.Foregorund);
+        this.overlays.push(foreignObject);
+    }
+    refresh() {
+        this.dispose();
+    }
+    dispose() {
+        this._removeAllOverlays();
+        this.extendedItem.element.removeAttribute('contenteditable');
+        this.extendedItem.element.removeEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.removeEventListener('blur', this._blurBound);
+        this.designerView.eatEvents = null;
+        this.extendedItem.updateChildrenFromNodesChildren();
+    }
+    _contentEdited() {
+        //todo -> save???
+        //this.extendedItem.content = this.extendedItem.element.innerHTML;
+        //console.log(this.extendedItem.element.innerHTML)
+    }
+    _blur() {
+        if (!this._blurTimeout) {
+            this._blurTimeout = setTimeout(() => {
+                this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
+            }, 150);
+        }
+    }
+    _formatSelection(type) {
+        if (this._blurTimeout)
+            clearTimeout(this._blurTimeout);
+        this._blurTimeout = null;
+        const selection = this.designerView.shadowRoot.getSelection();
+        console.log(selection);
+        switch (type) {
+            case 'bold':
+                document.execCommand('bold', false, null);
+                break;
+        }
+        this.extendedItem.element.focus();
+    }
+}
+EditTextExtension.template = html `
+    <div style="height: 24px;">
+      <button data-command="bold" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
+      <button data-command="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><em>i</em></button>
+      <button data-command="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><ins>u</ins></button>
+      <button data-command="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><del>s</del></button>
+    </div>
+  `;

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.d.ts

@@ -0,0 +1,9 @@
+import { IDesignerExtensionProvider } from "../IDesignerExtensionProvider";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerView } from "../../IDesignerView";
+import { IDesignerExtension } from "../IDesignerExtension";
+import { IExtensionManager } from "../IExtensionManger";
+export declare class EditTextExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerView, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerView, designItem: IDesignItem): IDesignerExtension;
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js

@@ -0,0 +1,11 @@
+import { EditTextExtension } from "./EditTextExtension.js";
+export class EditTextExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.name === 'button' || designItem.name === 'input')
+            return false;
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new EditTextExtension(extensionManager, designerView, designItem);
+    }
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextTinyMceExtension.d.ts

@@ -0,0 +1,27 @@
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerView } from "../../IDesignerView";
+import { AbstractExtension } from '../AbstractExtension';
+import { IExtensionManager } from "../IExtensionManger";
+export declare class EditTextTinyMceExtension extends AbstractExtension {
+    private _contentEditedBound;
+    private _blurBound;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerView, extendedItem: IDesignItem);
+    tinyMceConfig: {
+        target: any;
+        menubar: boolean;
+        inline: boolean;
+        plugins: string[];
+        toolbar: string[];
+        valid_elements: string;
+        valid_styles: {
+            '*': string;
+        };
+        powerpaste_word_import: string;
+        powerpaste_html_import: string;
+    };
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+    _contentEdited(): void;
+    _blur(): void;
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextTinyMceExtension.js

@@ -0,0 +1,61 @@
+import { AbstractExtension } from '../AbstractExtension';
+import { ExtensionType } from "../ExtensionType.js";
+export class EditTextTinyMceExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+        this.tinyMceConfig = {
+            target: null,
+            menubar: false,
+            inline: true,
+            plugins: [
+                'link',
+                'lists',
+                'powerpaste',
+                'autolink',
+                'tinymcespellchecker'
+            ],
+            toolbar: [
+                'undo redo | bold italic underline | fontselect fontsizeselect',
+                'forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist outdent indent'
+            ],
+            valid_elements: 'p[style],strong,em,span[style],a[href],ul,ol,li',
+            valid_styles: {
+                '*': 'font-size,font-family,color,text-decoration,text-align'
+            },
+            powerpaste_word_import: 'clean',
+            powerpaste_html_import: 'clean',
+        };
+        this._contentEditedBound = this._contentEdited.bind(this);
+        this._blurBound = this._blur.bind(this);
+    }
+    extend() {
+        //todo -> check what to do with extensions, do not loose edit on mouse click,...
+        //maybe use a html edit framework
+        this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelection);
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Selection);
+        this.extendedItem.element.addEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.addEventListener('blur', this._blurBound);
+        this.extendedItem.element.focus();
+        this.designerView.eatEvents = this.extendedItem.element;
+        this.tinyMceConfig.target = this.extendedItem.element;
+        //@ts-ignore
+        tinymce.init(this.tinyMceConfig);
+    }
+    refresh() {
+        this.dispose();
+    }
+    dispose() {
+        this.extendedItem.element.removeEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.removeEventListener('blur', this._blurBound);
+        //this.designerView.disableKeyboardEvents = false;
+    }
+    _contentEdited() {
+        //todo -> save???
+        //this.extendedItem.content = this.extendedItem.element.innerHTML;
+        //console.log(this.extendedItem.element.innerHTML)
+    }
+    _blur() {
+        this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
+    }
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextTinyMceExtensionProvider.d.ts

@@ -0,0 +1,9 @@
+import { IDesignerExtensionProvider } from "../IDesignerExtensionProvider";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerView } from "../../IDesignerView";
+import { IDesignerExtension } from "../IDesignerExtension";
+import { IExtensionManager } from "../IExtensionManger";
+export declare class EditTextTinyMceExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerView, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerView, designItem: IDesignItem): IDesignerExtension;
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextTinyMceExtensionProvider.js

@@ -0,0 +1,9 @@
+import { EditTextTinyMceExtension } from "./EditTextTinyMceExtension.js";
+export class EditTextTinyMceExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new EditTextTinyMceExtension(extensionManager, designerView, designItem);
+    }
+}

package/dist/elements/widgets/designerView/extensions/ExtensionType.d.ts

@@ -13,5 +13,9 @@ export declare enum ExtensionType {
     /**
      * Extension for the Current Container wich the dragged element is contained.
      */
-    ContainerDrag = 256
+    ContainerDrag = 256,
+    /**
+     * Extension for the Current Container wich the dragged element is contained.
+     */
+    Doubleclick = 512
 }

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

@@ -15,4 +15,8 @@ export var ExtensionType;
      * Extension for the Current Container wich the dragged element is contained.
      */
     ExtensionType[ExtensionType["ContainerDrag"] = 256] = "ContainerDrag";
+    /**
+     * Extension for the Current Container wich the dragged element is contained.
+     */
+    ExtensionType[ExtensionType["Doubleclick"] = 512] = "Doubleclick";
 })(ExtensionType || (ExtensionType = {}));

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

@@ -27,7 +27,7 @@ export class RotateExtension extends AbstractExtension {
         g.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeRotate(event));
         g.setAttribute('class', 'svg-selection svg-primary-rotate');
         g.setAttribute('transform', 'translate(' + (itemRect.x - this.designerView.containerBoundingRect.x - 13) + ',' + (itemRect.y - this.designerView.containerBoundingRect.y - 8.5) + ')');
-        this.overlayLayerView.appendChild(g);
+        this.overlayLayerView.addOverlay(g);
         this.overlays.push(g);
     }
     _pointerActionTypeRotate(event) {

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

@@ -1,7 +1,7 @@
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
 import { OverlayLayer } from './extensions/OverlayLayer.js';
 import { ServiceContainer } from '../../services/ServiceContainer';
-export declare class OverlayLayerView extends BaseCustomWebComponentLazyAppend {
+export declare class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
     static readonly template: HTMLTemplateElement;
     static readonly style: CSSStyleSheet;
     static readonly is = "node-projects-overlay-layer-view";

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

@@ -1,6 +1,6 @@
-import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
 import { OverlayLayer } from './extensions/OverlayLayer.js';
-export class OverlayLayerView extends BaseCustomWebComponentLazyAppend {
+export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
     constructor(serviceContainer) {
         super();
         this._serviceContainer = serviceContainer;
@@ -62,6 +62,7 @@ OverlayLayerView.style = css `
     svg {
       width: 100%;
       height: 100%;
+      overflow: visible;
     }
 
     .svg-snapline { stroke: purple; stroke-dasharray: 4; fill: transparent; }

package/dist/enums/EventNames.d.ts

@@ -3,9 +3,13 @@ export declare enum EventNames {
     PointerMove = "pointermove",
     PointerUp = "pointerup",
     DragEnter = "dragenter",
+    DragLeave = "dragleave",
     DragOver = "dragover",
     Drop = "drop",
     Scroll = "scroll",
     Wheel = "wheel",
-    ContextMenu = "contextmenu"
+    ContextMenu = "contextmenu",
+    KeyDown = "keydown",
+    KeyUp = "keyup",
+    DblClick = "dblclick"
 }

package/dist/enums/EventNames.js

@@ -4,9 +4,13 @@ export var EventNames;
     EventNames["PointerMove"] = "pointermove";
     EventNames["PointerUp"] = "pointerup";
     EventNames["DragEnter"] = "dragenter";
+    EventNames["DragLeave"] = "dragleave";
     EventNames["DragOver"] = "dragover";
     EventNames["Drop"] = "drop";
     EventNames["Scroll"] = "scroll";
     EventNames["Wheel"] = "wheel";
     EventNames["ContextMenu"] = "contextmenu";
+    EventNames["KeyDown"] = "keydown";
+    EventNames["KeyUp"] = "keyup";
+    EventNames["DblClick"] = "dblclick";
 })(EventNames || (EventNames = {}));

package/dist/index.d.ts

@@ -27,6 +27,8 @@ export type { IElementAtPointService } from "./elements/services/elementAtPointS
 export * from "./elements/services/contentService/ContentService.js";
 export type { IContentChanged } from "./elements/services/contentService/IContentChanged.js";
 export type { IContentService } from "./elements/services/contentService/IContentService.js";
+export * from "./elements/services/dragDropService/DragDropService.js";
+export type { IDragDropService } from "./elements/services/dragDropService/IDragDropService.js";
 export type { IElementDefinition } from "./elements/services/elementsService/IElementDefinition.js";
 export type { IElementsJson } from "./elements/services/elementsService/IElementsJson.js";
 export type { IElementsService } from "./elements/services/elementsService/IElementsService.js";
@@ -40,6 +42,8 @@ export type { IHtmlParserService } from "./elements/services/htmlParserService/I
 export type { IIntializationService } from "./elements/services/initializationService/IIntializationService.js";
 export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export type { IInstanceService } from "./elements/services/instanceService/IInstanceService.js";
+export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
+export type { IPrepareElementsForDesignerService } from "./elements/services/instanceService/IPrepareElementsForDesignerService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
 export type { IEditorTypesService } from "./elements/services/propertiesService/IEditorTypesService.js";
 export type { IPropertiesService } from "./elements/services/propertiesService/IPropertiesService.js";

package/dist/index.js

@@ -18,11 +18,13 @@ export * from "./elements/services/placementService/GridPlacementService.js";
 export * from "./elements/services/placementService/SnaplinesProviderService.js";
 export * from "./elements/services/elementAtPointService/ElementAtPointService.js";
 export * from "./elements/services/contentService/ContentService.js";
+export * from "./elements/services/dragDropService/DragDropService.js";
 export * from "./elements/services/elementsService/JsonFileElementsService.js";
 export * from "./elements/services/htmlWriterService/HtmlWriterService.js";
 export * from "./elements/services/htmlParserService/DefaultHtmlParserService.js";
 export * from "./elements/services/htmlParserService/NodeHtmlParserService.js";
 export * from "./elements/services/instanceService/DefaultInstanceService.js";
+export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";

package/package.json

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

package/dist/elements/loader/CustomElementsManifestLoader.d.ts

@@ -1,8 +0,0 @@
-import { ServiceContainer } from '../services/ServiceContainer';
-export declare class CustomElementsManifestLoader {
-    static loadManifest(serviceContainer: ServiceContainer, nodeModule: string, options?: {
-        name?: string;
-        dontLoadWidgets?: boolean;
-        dontLoadProperties?: boolean;
-    }): Promise<void>;
-}

package/dist/elements/loader/CustomElementsManifestLoader.js

@@ -1,45 +0,0 @@
-import { LazyLoader } from '@node-projects/base-custom-webcomponent';
-import { PreDefinedElementsService } from '../services/elementsService/PreDefinedElementsService';
-import { ListPropertiesService } from '../services/propertiesService/services/ListPropertiesService';
-export class CustomElementsManifestLoader {
-    static async loadManifest(serviceContainer, nodeModule, options) {
-        const nodePath = './node_modules/';
-        const packageJson = JSON.parse(await LazyLoader.LoadText(nodePath + nodeModule + '/package.json'));
-        let jsModule = nodePath + nodeModule + '/' + packageJson.main;
-        if (packageJson.module)
-            jsModule = nodePath + nodeModule + '/' + packageJson.module;
-        const manifest = JSON.parse(await LazyLoader.LoadText(nodePath + nodeModule + '/' + packageJson.customElements));
-        let name = nodeModule;
-        if (options && options.name)
-            name = options.name;
-        if (!options || !options.dontLoadWidgets) {
-            const elementDefinitions = [];
-            for (const tag of manifest.tags) {
-                const elementDefinition = { tag: tag.name, import: jsModule, description: tag.description };
-                elementDefinitions.push(elementDefinition);
-            }
-            const service = new PreDefinedElementsService(name, { elements: elementDefinitions });
-            serviceContainer.register('elementsService', service);
-        }
-        if (!options || !options.dontLoadProperties) {
-            const propertyDefinitions = {};
-            for (const tag of manifest.tags) {
-                const attributes = [];
-                for (const attr of tag.attributes) {
-                    let propertyDefinition = { name: attr.name, default: attr.default, description: attr.description };
-                    if (attr.type && attr.type.startsWith('"')) {
-                        propertyDefinition.type = 'list';
-                        propertyDefinition.values = attr.type.split('|');
-                    }
-                    else {
-                        propertyDefinition.type = attr.type;
-                    }
-                    attributes.push(propertyDefinition);
-                }
-                propertyDefinitions[tag.name] = attributes;
-            }
-            const service = new ListPropertiesService(propertyDefinitions);
-            serviceContainer.register('propertyService', service);
-        }
-    }
-}

package/dist/elements/loader/ICustomElementsManifest.d.ts

@@ -1,24 +0,0 @@
-export interface ICustomElementsManifest {
-    version: string;
-    tags: IOldCustomElementsManifestTag[];
-}
-export interface IOldCustomElementsManifestTag {
-    name: string;
-    path: string;
-    description?: string;
-    attributes?: IOldCustomElementsManifestAttribute[];
-    properties?: IOldCustomElementsManifestProperty[];
-}
-export interface IOldCustomElementsManifestAttribute {
-    name: string;
-    description?: string;
-    type: string;
-    default?: string;
-}
-export interface IOldCustomElementsManifestProperty {
-    name: string;
-    attribute?: string;
-    description?: string;
-    type: string;
-    default?: string;
-}

package/dist/elements/loader/IOldCustomElementsManifest copy.d.ts

@@ -1,24 +0,0 @@
-export interface IOldCustomElementsManifest {
-    version: string;
-    tags: IOldCustomElementsManifestTag[];
-}
-export interface IOldCustomElementsManifestTag {
-    name: string;
-    path: string;
-    description?: string;
-    attributes?: IOldCustomElementsManifestAttribute[];
-    properties?: IOldCustomElementsManifestProperty[];
-}
-export interface IOldCustomElementsManifestAttribute {
-    name: string;
-    description?: string;
-    type: string;
-    default?: string;
-}
-export interface IOldCustomElementsManifestProperty {
-    name: string;
-    attribute?: string;
-    description?: string;
-    type: string;
-    default?: string;
-}

package/dist/elements/loader/OldCustomElementsManifestLoader copy.d.ts

@@ -1,8 +0,0 @@
-import { ServiceContainer } from '../services/ServiceContainer';
-export declare class OldCustomElementsManifestLoader {
-    static loadManifest(serviceContainer: ServiceContainer, nodeModule: string, options?: {
-        name?: string;
-        dontLoadWidgets?: boolean;
-        dontLoadProperties?: boolean;
-    }): Promise<void>;
-}

package/dist/elements/loader/OldCustomElementsManifestLoader copy.js

@@ -1,45 +0,0 @@
-import { LazyLoader } from '@node-projects/base-custom-webcomponent';
-import { PreDefinedElementsService } from '../services/elementsService/PreDefinedElementsService';
-import { ListPropertiesService } from '../services/propertiesService/services/ListPropertiesService';
-export class OldCustomElementsManifestLoader {
-    static async loadManifest(serviceContainer, nodeModule, options) {
-        const nodePath = './node_modules/';
-        const packageJson = JSON.parse(await LazyLoader.LoadText(nodePath + nodeModule + '/package.json'));
-        let jsModule = nodePath + nodeModule + '/' + packageJson.main;
-        if (packageJson.module)
-            jsModule = nodePath + nodeModule + '/' + packageJson.module;
-        const manifest = JSON.parse(await LazyLoader.LoadText(nodePath + nodeModule + '/' + packageJson.customElementsManifest));
-        let name = nodeModule;
-        if (options && options.name)
-            name = options.name;
-        if (!options || !options.dontLoadWidgets) {
-            const elementDefinitions = [];
-            for (const tag of manifest.tags) {
-                const elementDefinition = { tag: tag.name, import: jsModule, description: tag.description };
-                elementDefinitions.push(elementDefinition);
-            }
-            const service = new PreDefinedElementsService(name, { elements: elementDefinitions });
-            serviceContainer.register('elementsService', service);
-        }
-        if (!options || !options.dontLoadProperties) {
-            const propertyDefinitions = {};
-            for (const tag of manifest.tags) {
-                const attributes = [];
-                for (const attr of tag.attributes) {
-                    let propertyDefinition = { name: attr.name, default: attr.default, description: attr.description };
-                    if (attr.type && attr.type.startsWith('"')) {
-                        propertyDefinition.type = 'list';
-                        propertyDefinition.values = attr.type.split('|');
-                    }
-                    else {
-                        propertyDefinition.type = attr.type;
-                    }
-                    attributes.push(propertyDefinition);
-                }
-                propertyDefinitions[tag.name] = attributes;
-            }
-            const service = new ListPropertiesService(propertyDefinitions);
-            serviceContainer.register('propertyService', service);
-        }
-    }
-}

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

@@ -1,17 +0,0 @@
-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;
-    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: IDesignerMousePoint, newPoint: IDesignerMousePoint, items: IDesignItem[]): IPoint;
-    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IDesignerMousePoint, newPoint: IDesignerMousePoint, 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;
-}

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

@@ -1,103 +0,0 @@
-import { DomConverter } from '../../widgets/designerView/DomConverter.js';
-export class DefaultPlacementService {
-    serviceForContainer(container) {
-        if (container.element.style.display === 'grid' || container.element.style.display === 'inline-grid' ||
-            container.element.style.display === 'flex' || container.element.style.display === 'inline-flex')
-            return false;
-        return true;
-    }
-    canEnter(container, items) {
-        if (DomConverter.IsSelfClosingElement(container.element.localName))
-            return false;
-        if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
-            return false;
-        return true;
-    }
-    canLeave(container, items) {
-        return true;
-    }
-    getElementOffset(container, designItem) {
-        return container.element.getBoundingClientRect();
-    }
-    calculateTrack(event, placementView, startPoint, 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.originalX - startPoint.offsetInControlX, y: newPoint.originalY - startPoint.offsetInControlY }, { 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);
-                }
-                else {
-                    trackX = Math.round(trackX);
-                }
-                if (newPos.y !== null) {
-                    trackY = newPos.y - Math.round(startPoint.originalY) + Math.round(startPoint.offsetInControlY);
-                }
-                else {
-                    trackY = Math.round(trackY);
-                }
-            }
-        }
-        return { x: trackX, y: trackY };
-    }
-    placePoint(event, placementView, container, startPoint, 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.originalX - startPoint.offsetInControlX, y: newPoint.originalY - startPoint.offsetInControlY }, 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 };
-    }
-    place(event, placementView, container, startPoint, 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]);
-        //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)';
-        }
-    }
-    enterContainer(container, items) {
-    }
-    leaveContainer(container, items) {
-    }
-    finishPlace(event, placementView, container, startPoint, newPoint, items) {
-        let track = this.calculateTrack(event, placementView, startPoint, newPoint, items[0]);
-        for (const designItem of items) {
-            let movedElement = designItem.element;
-            let oldLeft = parseInt(movedElement.style.left);
-            oldLeft = Number.isNaN(oldLeft) ? 0 : oldLeft;
-            let oldTop = parseInt(movedElement.style.top);
-            oldTop = Number.isNaN(oldTop) ? 0 : oldTop;
-            //let oldPosition = movedElement.style.position;
-            designItem.element.style.transform = null;
-            designItem.setStyle('position', 'absolute');
-            designItem.setStyle('left', (track.x + oldLeft) + "px");
-            designItem.setStyle('top', (track.y + oldTop) + "px");
-        }
-    }
-}