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

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

@@ -0,0 +1,122 @@
+import { IPropertiesService } from './propertiesService/IPropertiesService.js';
+import { IPlacementService } from './placementService/IPlacementService.js';
+import { IElementsService } from './elementsService/IElementsService.js';
+import { IInstanceService } from './instanceService/IInstanceService.js';
+import { IEditorTypesService } from './propertiesService/IEditorTypesService.js';
+import { BaseServiceContainer } from './BaseServiceContainer.js';
+import { IHtmlWriterService } from './htmlWriterService/IHtmlWriterService.js';
+import { ICodeView } from '../widgets/codeView/ICodeView.js';
+import { IHtmlParserService } from './htmlParserService/IHtmlParserService.js';
+import { IIntializationService } from './initializationService/IIntializationService.js';
+import { IDemoView } from '../widgets/demoView/IDemoView.js';
+import { ITool } from '../widgets/designerView/tools/ITool.js';
+import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
+import { IDesignerExtensionProvider } from '../widgets/designerView/extensions/IDesignerExtensionProvider.js';
+import { NamedTools } from '../widgets/designerView/tools/NamedTools.js';
+import { IContextMenuExtension } from '../widgets/designerView/extensions/contextMenu/IContextMenuExtension.js';
+import { GlobalContext } from './GlobalContext.js';
+import { IBindingService } from './bindingsService/IBindingService.js';
+import { IElementAtPointService } from './elementAtPointService/IElementAtPointService.js';
+import { ISnaplinesProviderService } from "./placementService/ISnaplinesProviderService.js";
+import { IExternalDragDropService } from './dragDropService/IExternalDragDropService.js';
+import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js";
+import { IDesignerPointerExtensionProvider } from "../widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
+import { IModelCommandService } from "./modelCommandService/IModelCommandService.js";
+import { IDesignViewConfigButtonsProvider } from "../widgets/designerView/extensions/buttons/IDesignViewConfigButtonsProvider.js";
+import { IDemoProviderService } from "./demoProviderService/IDemoProviderService.js";
+import { IBindableObjectsService } from "./bindableObjectsService/IBindableObjectsService.js";
+import { IBindableObjectDragDropService } from "./bindableObjectsService/IBindableObjectDragDropService.js";
+import { IDesignViewToolbarButtonProvider } from "../widgets/designerView/tools/toolBar/IDesignViewToolbarButtonProvider.js";
+import { IElementInteractionService } from './elementInteractionService/IElementInteractionService.js';
+import { IProperty } from "./propertiesService/IProperty.js";
+import { IDesignItem } from "../item/IDesignItem.js";
+import { IBinding } from '../item/IBinding.js';
+import { BindingTarget } from '../item/BindingTarget.js';
+import { IPropertyTabsService } from './propertiesService/IPropertyTabsService.js';
+import { IUndoService } from './undoService/IUndoService.js';
+import { ISelectionService } from './selectionService/ISelectionService.js';
+import { IContentService } from './contentService/IContentService.js';
+import { IStylesheetService } from './stylesheetService/IStylesheetService.js';
+import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js';
+import { IDesignItemDocumentPositionService } from './designItemDocumentPositionService/IDesignItemDocumentPositionService.js';
+import { IDragDropService } from './dragDropService/IDragDropService.js';
+import { IDesignItemService } from './designItemService/IDesignItemService.js';
+import { IEventsService } from './eventsService/IEventsService.js';
+import { IPropertyGridDragDropService } from './dragDropService/IPropertyGridDragDropService.js';
+import { IConfigUiService } from './configUiService/IConfigUiService.js';
+interface ServiceNameMap {
+    "propertyService": IPropertiesService;
+    "attachedPropertyService": IPropertiesService;
+    "containerService": IPlacementService;
+    "snaplinesProviderService": ISnaplinesProviderService;
+    "elementsService": IElementsService;
+    "instanceService": IInstanceService;
+    "editorTypesService": IEditorTypesService;
+    "htmlWriterService": IHtmlWriterService;
+    "htmlParserService": IHtmlParserService;
+    "intializationService": IIntializationService;
+    "bindingService": IBindingService;
+    "bindableObjectsService": IBindableObjectsService;
+    "bindableObjectDragDropService": IBindableObjectDragDropService;
+    "elementAtPointService": IElementAtPointService;
+    "externalDragDropService": IExternalDragDropService;
+    "copyPasteService": ICopyPasteService;
+    "modelCommandService": IModelCommandService;
+    "demoProviderService": IDemoProviderService;
+    "elementInteractionService": IElementInteractionService;
+    "propertyGroupsService": IPropertyTabsService;
+    "dragDropService": IDragDropService;
+    "designItemService": IDesignItemService;
+    "eventsService": IEventsService;
+    "propertyGridDragDropService": IPropertyGridDragDropService;
+    "configUiService": IConfigUiService;
+    "undoService": (designerCanvas: IDesignerCanvas) => IUndoService;
+    "selectionService": (designerCanvas: IDesignerCanvas) => ISelectionService;
+    "contentService": (designerCanvas: IDesignerCanvas) => IContentService;
+    "stylesheetService": (designerCanvas: IDesignerCanvas) => IStylesheetService;
+    "designItemDocumentPositionService": (designerCanvas: IDesignerCanvas) => IDesignItemDocumentPositionService;
+}
+export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMap> {
+    readonly config: {
+        codeViewWidget: new (...args: any[]) => ICodeView & HTMLElement;
+        demoViewWidget: new (...args: any[]) => IDemoView & HTMLElement;
+        openBindingsEditor?: (property: IProperty, designItems: IDesignItem[], binding: IBinding, bindingTarget: BindingTarget) => Promise<void>;
+    };
+    readonly designerExtensions: Map<(ExtensionType | string), IDesignerExtensionProvider[]>;
+    removeDesignerExtensionOfType(container: (ExtensionType | string), lambda: new (...args: any[]) => IDesignerExtensionProvider): void;
+    readonly designViewConfigButtons: IDesignViewConfigButtonsProvider[];
+    readonly designViewToolbarButtons: IDesignViewToolbarButtonProvider[];
+    readonly designerPointerExtensions: IDesignerPointerExtensionProvider[];
+    designerContextMenuExtensions: IContextMenuExtension[];
+    readonly globalContext: GlobalContext;
+    readonly options: {
+        zoomDesignerBackground: boolean;
+    };
+    readonly designerTools: Map<string | NamedTools, ITool>;
+    get bindingService(): IBindingService;
+    get bindableObjectsServices(): IBindableObjectsService[];
+    get bindableObjectDragDropService(): IBindableObjectDragDropService;
+    get propertyGridDragDropService(): IPropertyGridDragDropService;
+    get dragDropService(): IDragDropService;
+    get elementInteractionServices(): IElementInteractionService[];
+    get propertiesServices(): IPropertiesService[];
+    get attachedPropertyServices(): IPropertiesService[];
+    get propertyGroupService(): IPropertyTabsService;
+    get containerServices(): IPlacementService[];
+    get snaplinesProviderService(): ISnaplinesProviderService;
+    get elementsServices(): IElementsService[];
+    get eventsService(): IEventsService[];
+    get instanceServices(): IInstanceService[];
+    get editorTypesServices(): IEditorTypesService[];
+    get htmlWriterService(): IHtmlWriterService;
+    get htmlParserService(): IHtmlParserService;
+    get intializationService(): IIntializationService;
+    get elementAtPointService(): IElementAtPointService;
+    get externalDragDropService(): IExternalDragDropService;
+    get copyPasteService(): ICopyPasteService;
+    get modelCommandService(): IModelCommandService;
+    get demoProviderService(): IDemoProviderService;
+    get designItemService(): IDesignItemService;
+    get configUiServices(): IConfigUiService[];
+}
+export {};

package/dist/elements/services/ServiceContainer.js

@@ -0,0 +1,103 @@
+import { BaseServiceContainer } from './BaseServiceContainer.js';
+import { DemoView } from '../widgets/demoView/demoView.js';
+import { GlobalContext } from './GlobalContext.js';
+import { CodeViewSimple } from '../widgets/codeView/code-view-simple.js';
+export class ServiceContainer extends BaseServiceContainer {
+    config = {
+        codeViewWidget: CodeViewSimple,
+        demoViewWidget: DemoView
+    };
+    designerExtensions = new Map();
+    removeDesignerExtensionOfType(container, lambda) {
+        const extContainer = this.designerExtensions.get(container);
+        for (let i = 0; i < extContainer.length; i++) {
+            if (extContainer[i].constructor === lambda) {
+                extContainer.splice(i, 1);
+            }
+        }
+    }
+    designViewConfigButtons = [];
+    designViewToolbarButtons = [];
+    designerPointerExtensions = [];
+    designerContextMenuExtensions;
+    globalContext = new GlobalContext(this);
+    options = {
+        zoomDesignerBackground: true
+    };
+    designerTools = new Map();
+    get bindingService() {
+        return this.getLastService('bindingService');
+    }
+    get bindableObjectsServices() {
+        return this.getServices('bindableObjectsService');
+    }
+    get bindableObjectDragDropService() {
+        return this.getLastService('bindableObjectDragDropService');
+    }
+    get propertyGridDragDropService() {
+        return this.getLastService('propertyGridDragDropService');
+    }
+    get dragDropService() {
+        return this.getLastService('dragDropService');
+    }
+    get elementInteractionServices() {
+        return this.getServices('elementInteractionService');
+    }
+    get propertiesServices() {
+        return this.getServices('propertyService');
+    }
+    get attachedPropertyServices() {
+        return this.getServices('attachedPropertyService');
+    }
+    get propertyGroupService() {
+        return this.getLastService('propertyGroupsService');
+    }
+    get containerServices() {
+        return this.getServices('containerService');
+    }
+    get snaplinesProviderService() {
+        return this.getLastService('snaplinesProviderService');
+    }
+    get elementsServices() {
+        return this.getServices('elementsService');
+    }
+    get eventsService() {
+        return this.getServices('eventsService');
+    }
+    get instanceServices() {
+        return this.getServices('instanceService');
+    }
+    get editorTypesServices() {
+        return this.getServices('editorTypesService');
+    }
+    get htmlWriterService() {
+        return this.getLastService('htmlWriterService');
+    }
+    get htmlParserService() {
+        return this.getLastService('htmlParserService');
+    }
+    get intializationService() {
+        return this.getLastService('intializationService');
+    }
+    get elementAtPointService() {
+        return this.getLastService('elementAtPointService');
+    }
+    get externalDragDropService() {
+        return this.getLastService('externalDragDropService');
+    }
+    get copyPasteService() {
+        return this.getLastService('copyPasteService');
+    }
+    get modelCommandService() {
+        return this.getLastService('modelCommandService');
+    }
+    get demoProviderService() {
+        return this.getLastService('demoProviderService');
+    }
+    get designItemService() {
+        return this.getLastService('designItemService');
+    }
+    get configUiServices() {
+        return this.getServices('configUiService');
+    }
+}

package/dist/elements/services/bindableObjectsService/BindableObjectType.d.ts

@@ -0,0 +1,9 @@
+export declare enum BindableObjectType {
+    undefined = "undefined",
+    folder = "folder",
+    boolean = "boolean",
+    number = "number",
+    string = "string",
+    date = "date",
+    color = "color"
+}

package/dist/elements/services/bindableObjectsService/BindableObjectType.js

@@ -0,0 +1,10 @@
+export var BindableObjectType;
+(function (BindableObjectType) {
+    BindableObjectType["undefined"] = "undefined";
+    BindableObjectType["folder"] = "folder";
+    BindableObjectType["boolean"] = "boolean";
+    BindableObjectType["number"] = "number";
+    BindableObjectType["string"] = "string";
+    BindableObjectType["date"] = "date";
+    BindableObjectType["color"] = "color";
+})(BindableObjectType || (BindableObjectType = {}));

package/dist/elements/services/bindableObjectsService/IBindableObject.d.ts

@@ -0,0 +1,8 @@
+import { BindableObjectType } from './BindableObjectType.js';
+export interface IBindableObject<T> {
+    readonly type: BindableObjectType;
+    readonly name: string;
+    readonly fullName: string;
+    readonly children?: false | IBindableObject<T>[];
+    readonly originalObject?: T;
+}

package/dist/elements/services/bindableObjectsService/IBindableObject.js

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

package/dist/elements/services/bindableObjectsService/IBindableObjectDragDropService.d.ts

@@ -0,0 +1,12 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
+import { IProperty } from "../propertiesService/IProperty.js";
+import { IBindableObject } from "./IBindableObject.js";
+export interface IBindableObjectDragDropService {
+    dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): void;
+    dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): void;
+    dragOver(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): 'none' | 'copy' | 'link' | 'move';
+    drop(designerCanvas: IDesignerCanvas, event: DragEvent, bindableObject: IBindableObject<any>, element: Element): void;
+    dragOverOnProperty?(event: DragEvent, property: IProperty, designItems: IDesignItem[]): 'none' | 'copy' | 'link' | 'move';
+    dropOnProperty?(event: DragEvent, property: IProperty, bindableObject: IBindableObject<any>, designItems: IDesignItem[]): void;
+}

package/dist/elements/services/bindableObjectsService/IBindableObjectDragDropService.js

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

package/dist/elements/services/bindableObjectsService/IBindableObjectsService.d.ts

@@ -0,0 +1,6 @@
+import { IBindableObject } from './IBindableObject.js';
+export interface IBindableObjectsService {
+    readonly name: string;
+    getBindableObject(fullName: string): Promise<IBindableObject<any>>;
+    getBindableObjects(parent?: IBindableObject<any>): Promise<IBindableObject<any>[]>;
+}

package/dist/elements/services/bindableObjectsService/IBindableObjectsService.js

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

package/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.d.ts

@@ -0,0 +1,10 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IBinding } from '../../item/IBinding.js';
+import { IBindingService } from './IBindingService.js';
+import { BindingTarget } from "../../item/BindingTarget.js";
+export declare class BaseCustomWebcomponentBindingsService implements IBindingService {
+    static type: string;
+    getBindings(designItem: IDesignItem): IBinding[];
+    setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+    clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
+}

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

@@ -0,0 +1,73 @@
+import { BindingMode } from '../../item/BindingMode.js';
+import { BindingTarget } from "../../item/BindingTarget.js";
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
+export class BaseCustomWebcomponentBindingsService {
+    static type = 'base-custom-webcomponent-binding';
+    getBindings(designItem) {
+        let bindings = null;
+        for (let a of designItem.attributes()) {
+            const name = a[0];
+            const value = a[1];
+            if ((value.startsWith('[[') || value.startsWith('{{')) && (value.endsWith('}}') || value.endsWith(']]'))) {
+                if (!bindings)
+                    bindings = [];
+                let bnd = { rawName: name, rawValue: value };
+                if (a[0].startsWith('css:')) {
+                    bnd.targetName = name.substring(4);
+                    bnd.target = BindingTarget.css;
+                    bnd.expression = value.substring(2, value.length - 4);
+                }
+                else if (a[0].startsWith('class:')) {
+                    bnd.targetName = name.substring(4);
+                    bnd.target = BindingTarget.class;
+                    bnd.expression = value.substring(2, value.length - 4);
+                }
+                else if (a[0].startsWith('$')) {
+                    bnd.targetName = name.substring(1);
+                    bnd.target = BindingTarget.attribute;
+                    bnd.expression = value.substring(2, value.length - 4);
+                }
+                else if (a[0].startsWith('@')) {
+                    bnd.targetName = name.substring(1);
+                    bnd.target = BindingTarget.event;
+                    bnd.expression = value.substring(2, value.length - 4);
+                }
+                else {
+                    bnd.targetName = PropertiesHelper.dashToCamelCase(name);
+                    bnd.target = BindingTarget.property;
+                    bnd.expression = value.substring(2, value.length - 4);
+                }
+                bnd.type = BaseCustomWebcomponentBindingsService.type;
+                bnd.targetName = bnd.targetName;
+                bindings.push(bnd);
+            }
+        }
+        return bindings;
+    }
+    setBinding(designItem, binding) {
+        if (binding.type !== BaseCustomWebcomponentBindingsService.type)
+            return false;
+        let nm = '';
+        switch (binding.target) {
+            case BindingTarget.css:
+                nm += 'css:';
+                break;
+            case BindingTarget.class:
+                nm += 'class';
+                break;
+            case BindingTarget.attribute:
+                nm += '$';
+                break;
+            case BindingTarget.event:
+                nm += '@';
+                break;
+        }
+        nm += binding.targetName;
+        let value = (binding.mode == BindingMode.oneWay ? '[[' : '{{') + binding.expression + (binding.mode == BindingMode.oneWay ? ']]' : '}}');
+        designItem.setAttribute(nm, value);
+        return true;
+    }
+    clearBinding(designItem, propertyName, propertyTarget) {
+        return true;
+    }
+}

package/dist/elements/services/bindingsService/IBindingService.d.ts

@@ -0,0 +1,13 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IBinding } from '../../item/IBinding.js';
+import { BindingTarget } from '../../item/BindingTarget.js';
+/**
+ * Can be used to parse bindings wich are done via special HTML Attributes or special Elements
+ * If your Bindings are to special, or HTML is not valid with them, maybe you need to parse the Bindings already in the
+ * htmlParserService
+ */
+export interface IBindingService {
+    getBindings(designItem: IDesignItem): IBinding[];
+    setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+    clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
+}

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

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

package/dist/elements/services/bindingsService/SpecialTagsBindingService.d.ts

@@ -0,0 +1,16 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IBinding } from '../../item/IBinding.js';
+import { IBindingService } from './IBindingService.js';
+import { BindingTarget } from "../../item/BindingTarget.js";
+export declare class SpecialTagsBindingService implements IBindingService {
+    static type: string;
+    _bindingTagName: string;
+    _elementIdAttribute: string;
+    _propertyNameAttribute: string;
+    _isStyleNameAttribute: string;
+    constructor();
+    getBindings(designItem: IDesignItem): IBinding[];
+    private _parseBindingElement;
+    setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+    clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
+}

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

@@ -0,0 +1,44 @@
+import { BindingTarget } from "../../item/BindingTarget.js";
+import { BindingMode } from "../../item/BindingMode.js";
+/* Service wich read binings from special HTMl elements -> like tag-binding */
+//TODO: refactor so we could use it
+export class SpecialTagsBindingService {
+    static type = 'visu-tagbinding-binding';
+    _bindingTagName = "visu-tagbinding";
+    _elementIdAttribute = "elemnt-id";
+    _propertyNameAttribute = "property";
+    _isStyleNameAttribute = "is-style";
+    constructor() {
+    }
+    getBindings(designItem) {
+        const bindings = [];
+        const directBindings = designItem.element.querySelectorAll(':scope > ' + this._bindingTagName);
+        for (let b of directBindings) {
+            bindings.push(this._parseBindingElement(b));
+        }
+        if (designItem.id) {
+            const nameBindings = designItem.instanceServiceContainer.contentService.rootDesignItem.element.querySelectorAll(this._bindingTagName + "[" + this._elementIdAttribute + "='" + designItem.id + "]");
+            for (let b of nameBindings) {
+                const bnd = this._parseBindingElement(b);
+                bnd.targetId = designItem.id;
+                bindings.push(bnd);
+            }
+        }
+        return null;
+    }
+    _parseBindingElement(b) {
+        let bnd = { targetName: b.getAttribute(this._propertyNameAttribute) };
+        bnd.target = b.hasAttribute(this._isStyleNameAttribute) ? BindingTarget.css : BindingTarget.property;
+        bnd.invert = b.hasAttribute('negative-logic');
+        bnd.rawValue = b.outerHTML;
+        bnd.type = SpecialTagsBindingService.type;
+        bnd.mode = b.hasAttribute('two-way') ? BindingMode.twoWay : BindingMode.oneWay;
+        return bnd;
+    }
+    setBinding(designItem, binding) {
+        return true;
+    }
+    clearBinding(designItem, propertyName, propertyTarget) {
+        return true;
+    }
+}

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

@@ -0,0 +1,7 @@
+"use strict";
+//read vue bindings:
+//v-bind:class
+//v-bind:style
+//v-if
+//v-else
+//v-show

package/dist/elements/services/configUiService/IConfigUiService.d.ts

@@ -0,0 +1,5 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+export interface IConfigUiService {
+    hasConfigUi(designItem: IDesignItem): Promise<boolean>;
+    getConfigUi(designItem: IDesignItem): Promise<HTMLElement>;
+}

package/dist/elements/services/configUiService/IConfigUiService.js

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

package/dist/elements/services/contentService/ContentService.d.ts

@@ -0,0 +1,9 @@
+import { IContentService } from './IContentService.js';
+import { IContentChanged } from './IContentChanged';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+export declare class ContentService implements IContentService {
+    constructor(rootElement: IDesignItem);
+    readonly rootDesignItem: IDesignItem;
+    readonly onContentChanged: TypedEvent<IContentChanged>;
+}

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

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

package/dist/elements/services/contentService/IContentChanged.d.ts

@@ -0,0 +1,10 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+interface IContentChangedParsed {
+    changeType: 'parsed';
+}
+interface IContentChangedWithDesignItems {
+    changeType: "added" | "removed" | "moved";
+    designItems: IDesignItem[];
+}
+export type IContentChanged = IContentChangedParsed | IContentChangedWithDesignItems;
+export {};

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

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

package/dist/elements/services/contentService/IContentService.d.ts

@@ -0,0 +1,7 @@
+import { IContentChanged } from './IContentChanged.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+export interface IContentService {
+    readonly onContentChanged: TypedEvent<IContentChanged>;
+    readonly rootDesignItem: IDesignItem;
+}

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

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

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

@@ -0,0 +1,9 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { ICopyPasteService } from "./ICopyPasteService.js";
+import { ServiceContainer } from '../ServiceContainer.js';
+import { InstanceServiceContainer } from '../InstanceServiceContainer.js';
+import { IRect } from "../../../interfaces/IRect.js";
+export declare class CopyPasteAsJsonService implements ICopyPasteService {
+    copyItems(designItems: IDesignItem[]): Promise<void>;
+    getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<[designItems: IDesignItem[], positions?: IRect[]]>;
+}

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

@@ -0,0 +1,54 @@
+import { DomConverter } from "../../widgets/designerView/DomConverter.js";
+import { copyToClipboard, getFromClipboard, getTextFromClipboard } from "../../helper/ClipboardHelper.js";
+import { DesignItem } from "../../item/DesignItem.js";
+export class CopyPasteAsJsonService {
+    async copyItems(designItems) {
+        const copyText = DomConverter.ConvertToString(designItems, false);
+        const positions = designItems.map(x => x.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(x.element));
+        let data = { html: copyText, positions: positions };
+        copyToClipboard([["application/json", JSON.stringify(data)]]);
+    }
+    async getPasteItems(serviceContainer, instanceServiceContainer) {
+        let data = '';
+        let html = '';
+        let positions = null;
+        const items = await getFromClipboard();
+        if (items != null) {
+            try {
+                data = await (await items[0].getType('text/html'))?.text();
+            }
+            catch { }
+            if (!data)
+                try {
+                    data = await (await items[0].getType('text/plain'))?.text();
+                }
+                catch { }
+            try {
+                data = await (await items[0].getType('application/json'))?.text();
+            }
+            catch { }
+            try {
+                let imageFmt = items[0].types.find(x => x.startsWith("image/"));
+                if (imageFmt) {
+                    let imgData = await items[0].getType(imageFmt);
+                    let di = await DesignItem.createDesignItemFromImageBlob(serviceContainer, instanceServiceContainer, imgData);
+                    return [[di]];
+                }
+            }
+            catch { }
+        }
+        else {
+            data = await getTextFromClipboard();
+        }
+        if (data.startsWith('{')) {
+            let dataObj = JSON.parse(data);
+            html = dataObj.html;
+            positions = dataObj.positions;
+        }
+        else {
+            html = data;
+        }
+        const parserService = serviceContainer.htmlParserService;
+        return [await parserService.parse(html, serviceContainer, instanceServiceContainer, true), positions];
+    }
+}

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

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

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

@@ -0,0 +1,33 @@
+import { DomConverter } from "../../widgets/designerView/DomConverter.js";
+import { copyToClipboard, getFromClipboard, getTextFromClipboard } from "../../helper/ClipboardHelper.js";
+export const positionsJsonMime = 'web text/positions';
+export class CopyPasteService {
+    async copyItems(designItems) {
+        const copyText = DomConverter.ConvertToString(designItems, false);
+        const positions = designItems.map(x => x.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(x.element));
+        copyToClipboard([["text/html", copyText], [positionsJsonMime, JSON.stringify(positions)]]);
+    }
+    async getPasteItems(serviceContainer, instanceServiceContainer) {
+        let html = '';
+        let positions = null;
+        const items = await getFromClipboard();
+        if (items != null) {
+            try {
+                html = await (await items[0].getType('text/html'))?.text();
+            }
+            catch { }
+            if (!html)
+                html = await (await items[0].getType('text/plain'))?.text();
+            try {
+                let positionsJson = await (await items[0].getType(positionsJsonMime))?.text();
+                positions = JSON.parse(positionsJson);
+            }
+            catch { }
+        }
+        else {
+            html = await getTextFromClipboard();
+        }
+        const parserService = serviceContainer.htmlParserService;
+        return [await parserService.parse(html, serviceContainer, instanceServiceContainer, true), positions];
+    }
+}

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

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