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

package/README.md

@@ -20,6 +20,14 @@ https://www.npmjs.com/package/@node-projects/web-component-designer
   - At the moment Chrome, and Firefox Nightly with Experimental Import Assertions enabled.
   But when import Assertions are landing in Safari and Firefox they will work again.
   And you could transpile them away in the meantime.
+  
+## Projects using it
+
+A ZPL Designer included in a comercial Application:
+![image](https://github.com/node-projects/web-component-designer/assets/364896/e1f1e3cc-29a3-4749-a676-389577fab69a)
+
+A Materialflow Layout Editor in a comercial Application:
+![image](https://github.com/node-projects/web-component-designer/assets/364896/0062562a-4224-4b11-aaa4-03e31494fcfa)
 
 ## Demo
 

package/dist/elements/controls/DesignerTabControl.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentLazyAppend, css, TypedEvent, DomHelper } from '@node-projects/base-custom-webcomponent';
-class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
+export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
     _selectedIndex = -1;
     //private _contentObserver: MutationObserver;
     _panels;
@@ -234,5 +234,4 @@ class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
     }
     onSelectedTabChanged = new TypedEvent();
 }
-export { DesignerTabControl };
 customElements.define('node-projects-designer-tab-control', DesignerTabControl);

package/dist/elements/controls/ImageButtonListSelector.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
+export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     div {
       font-size: 10px;
@@ -78,5 +78,4 @@ class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
         this._updateValue();
     }
 }
-export { ImageButtonListSelector };
 customElements.define('node-projects-image-button-list-selector', ImageButtonListSelector);

package/dist/elements/controls/MetricsEditor.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
-class MetricsEditor extends BaseCustomWebComponentConstructorAppend {
+export class MetricsEditor extends BaseCustomWebComponentConstructorAppend {
     static style = css `
 :host {
   justify-content: center;
@@ -122,5 +122,4 @@ span {
         }
     }
 }
-export { MetricsEditor };
 customElements.define('node-projects-metrics-editor', MetricsEditor);

package/dist/elements/controls/NumericPopup.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
-class NumericPopup extends BaseCustomWebComponentConstructorAppend {
+export class NumericPopup extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     :host {
     }
@@ -36,5 +36,4 @@ class NumericPopup extends BaseCustomWebComponentConstructorAppend {
     ready() {
     }
 }
-export { NumericPopup };
 customElements.define('node-projects-numeric-popup', NumericPopup);

package/dist/elements/controls/NumericStyleInput.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-class NumericStyleInput extends BaseCustomWebComponentConstructorAppend {
+export class NumericStyleInput extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     :host {
     }
@@ -53,5 +53,4 @@ class NumericStyleInput extends BaseCustomWebComponentConstructorAppend {
     _updateValue() {
     }
 }
-export { NumericStyleInput };
 customElements.define('node-projects-numeric-style-input', NumericStyleInput);

package/dist/elements/controls/SimpleSplitView.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
-class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
+export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     :host {
       display: block;
@@ -64,5 +64,4 @@ class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
         });
     }
 }
-export { SimpleSplitView };
 customElements.define('node-projects-simple-split-view', SimpleSplitView);

package/dist/elements/controls/ThicknessEditor.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
+export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
     static style = css `
   :host {
     margin: 4px;
@@ -142,5 +142,4 @@ class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
         this._updateValue();
     }
 }
-export { ThicknessEditor };
 customElements.define('node-projects-thickness-editor', ThicknessEditor);

package/dist/elements/documentContainer.js

@@ -157,12 +157,18 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
             this.demoView.executeCommand(command);
     }
     canExecuteCommand(command) {
-        if (this._tabControl.selectedIndex === 0 || this._tabControl.selectedIndex === 2)
-            return this.designerView?.canExecuteCommand(command);
-        else if (this._tabControl.selectedIndex === 1)
-            return this.codeView?.canExecuteCommand(command);
-        else if (this._tabControl.selectedIndex === 3)
-            return this.demoView?.canExecuteCommand(command);
+        if (this._tabControl.selectedIndex === 0 || this._tabControl.selectedIndex === 2) {
+            if (this.designerView?.canExecuteCommand)
+                return this.designerView.canExecuteCommand(command);
+        }
+        else if (this._tabControl.selectedIndex === 1) {
+            if (this.codeView?.canExecuteCommand)
+                return this.codeView.canExecuteCommand(command);
+        }
+        else if (this._tabControl.selectedIndex === 3) {
+            if (this.demoView?.canExecuteCommand)
+                return this.demoView.canExecuteCommand(command);
+        }
         return false;
     }
     set content(value) {

package/dist/elements/helper/CssCombiner.js

@@ -1,4 +1,4 @@
-class CssCombiner {
+export class CssCombiner {
     static _helperElement = document.createElement('div');
     //todo: inset, flex flow, place content...
     //flex => flex-grow, flex-shrink, flex-basis
@@ -295,4 +295,3 @@ class CssCombiner {
         return true;
     }
 }
-export { CssCombiner };

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

@@ -1,5 +1,5 @@
 import { css } from "@node-projects/base-custom-webcomponent";
-class ContextMenu {
+export class ContextMenu {
     static _contextMenuCss = css `
 	  .context_menu {
 		position: fixed;
@@ -306,7 +306,6 @@ class ContextMenu {
         setTimeout(() => window.removeEventListener("contextmenu", this._windowDown), 10);
     }
 }
-export { ContextMenu };
 class ContextUtil {
     static getSizes(obj) {
         let lis = obj.getElementsByTagName('li');

package/dist/elements/item/DesignItem.js

@@ -13,7 +13,7 @@ import { cssFromString } from '@node-projects/base-custom-webcomponent';
 const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
 const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
 const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
-class DesignItem {
+export class DesignItem {
     lastContainerSize;
     parsedNode;
     node;
@@ -462,4 +462,3 @@ class DesignItem {
         }
     }
 }
-export { DesignItem };

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

@@ -1,7 +1,7 @@
 import { BindingMode } from '../../item/BindingMode.js';
 import { BindingTarget } from "../../item/BindingTarget.js";
 import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
-class BaseCustomWebcomponentBindingsService {
+export class BaseCustomWebcomponentBindingsService {
     static type = 'base-custom-webcomponent-binding';
     getBindings(designItem) {
         let bindings = null;
@@ -71,4 +71,3 @@ class BaseCustomWebcomponentBindingsService {
         return true;
     }
 }
-export { BaseCustomWebcomponentBindingsService };

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

@@ -2,7 +2,7 @@ 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
-class SpecialTagsBindingService {
+export class SpecialTagsBindingService {
     static type = 'visu-tagbinding-binding';
     _bindingTagName = "visu-tagbinding";
     _elementIdAttribute = "elemnt-id";
@@ -42,4 +42,3 @@ class SpecialTagsBindingService {
         return true;
     }
 }
-export { SpecialTagsBindingService };

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,44 @@
+import { DomConverter } from "../../widgets/designerView/DomConverter.js";
+import { copyToClipboard, getFromClipboard, getTextFromClipboard } from "../../helper/ClipboardHelper.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 { }
+        }
+        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/htmlWriterService/LitTsElementWriterService.js

@@ -1,5 +1,5 @@
 //needs InternalBindinsgStorrageService -> keeps bindings
-class LitTsElementWriterService {
+export class LitTsElementWriterService {
     write(indentedTextWriter, designItems, rootContainerKeepInline, options) {
         throw new Error('Method not implemented.');
     }
@@ -41,4 +41,3 @@ declare global {
   }
 }`;
 }
-export { LitTsElementWriterService };

package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyEditor.js

@@ -1,6 +1,6 @@
 import { BasePropertyEditor } from './BasePropertyEditor.js';
 import { html } from '@node-projects/base-custom-webcomponent';
-class JsonPropertyEditor extends BasePropertyEditor {
+export class JsonPropertyEditor extends BasePropertyEditor {
     static template = html `
     <div style="display: flex;">
       <input id="input" type="text">
@@ -19,4 +19,3 @@ class JsonPropertyEditor extends BasePropertyEditor {
         this._input.value = value;
     }
 }
-export { JsonPropertyEditor };

package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyPopupEditor.js

@@ -1,5 +1,5 @@
 import { html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-class JsonPropertyPopupEditor extends BaseCustomWebComponentConstructorAppend {
+export class JsonPropertyPopupEditor extends BaseCustomWebComponentConstructorAppend {
     static template = html `
     <div style="display: flex;">
       <input id="input" type="text">
@@ -11,4 +11,3 @@ class JsonPropertyPopupEditor extends BaseCustomWebComponentConstructorAppend {
         //codeview
     }
 }
-export { JsonPropertyPopupEditor };

package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService.js

@@ -14,6 +14,8 @@ if (window.importShim) {
 else
     //@ts-ignore
     cssProperties = await import("./CssProperties.json", { assert: { type: 'json' } });
+if (cssProperties.default)
+    cssProperties = cssProperties.default;
 const localName = '<local>';
 export class CssCurrentPropertiesService extends CommonPropertiesService {
     getRefreshMode(designItem) {

package/dist/elements/services/propertiesService/services/CssPropertiesService.js

@@ -14,6 +14,8 @@ if (window.importShim) {
 else
     //@ts-ignore
     cssProperties = await import("./CssProperties.json", { assert: { type: 'json' } });
+if (cssProperties.default)
+    cssProperties = cssProperties.default;
 export class CssPropertiesService extends CommonPropertiesService {
     getRefreshMode(designItem) {
         return RefreshMode.none;

package/dist/elements/services/stylesheetService/AbstractStylesheetService.js

@@ -129,6 +129,9 @@ export class AbstractStylesheetService {
                     }
                 }
                 t += '{' + cssText + '}';
+                /*if (rule.cssRules) {
+                    t += rule.cssText.split(rule.conditionText)[0] + rule.conditionText + " { " + this.traverseAndCollectRules(rule) + " }";
+                }*/
             }
         }
         return t;

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.js

@@ -1,6 +1,6 @@
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
 import { dragDropFormatNameBindingObject } from '../../../Constants.js';
-class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
+export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
     _treeDiv;
     _tree;
     static style = css `
@@ -104,5 +104,4 @@ class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
         });
     }
 }
-export { BindableObjectsBrowser };
 customElements.define('node-projects-bindable-objects-browser', BindableObjectsBrowser);

package/dist/elements/widgets/bindings/BindingsEditor.js

@@ -12,7 +12,7 @@ export var valueType;
     valueType["number"] = "number";
     valueType["boolean"] = "boolean";
 })(valueType || (valueType = {}));
-class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
+export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     * { font-size: 16px; }
     .list { 
@@ -50,5 +50,4 @@ class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
         super();
     }
 }
-export { BindingsEditor };
 customElements.define('node-projects-bindings-editor', BindingsEditor);

package/dist/elements/widgets/codeView/code-view-ace.js

@@ -14,7 +14,7 @@ class CodeViewAceCompleter {
         }
     }
 }
-class CodeViewAce extends BaseCustomWebComponentLazyAppend {
+export class CodeViewAce extends BaseCustomWebComponentLazyAppend {
     canvasElement;
     elementsToPackages;
     code;
@@ -130,5 +130,4 @@ class CodeViewAce extends BaseCustomWebComponentLazyAppend {
         this._aceEditor.scrollToLine(point1.row);
     }
 }
-export { CodeViewAce };
 customElements.define('node-projects-code-view-ace', CodeViewAce);

package/dist/elements/widgets/codeView/code-view-code-mirror.js

@@ -1,6 +1,6 @@
 import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { CommandType } from '../../../commandHandling/CommandType.js';
-class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
+export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
     canvasElement;
     elementsToPackages;
     code;
@@ -101,5 +101,4 @@ class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
         this._codeMirrorEditor.setSelection(point1, point2);
     }
 }
-export { CodeViewCodeMirror };
 customElements.define('node-projects-code-view-code-mirror', CodeViewCodeMirror);

package/dist/elements/widgets/codeView/code-view-monaco.js

@@ -1,6 +1,6 @@
 import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { CommandType } from '../../../commandHandling/CommandType.js';
-class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
+export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
     static _initalized;
     dispose() {
         this._monacoEditor?.dispose();
@@ -192,5 +192,4 @@ class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
         }
     }
 }
-export { CodeViewMonaco };
 customElements.define('node-projects-code-view-monaco', CodeViewMonaco);

package/dist/elements/widgets/codeView/code-view-simple.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-class CodeViewSimple extends BaseCustomWebComponentConstructorAppend {
+export class CodeViewSimple extends BaseCustomWebComponentConstructorAppend {
     dispose() {
     }
     canvasElement;
@@ -52,5 +52,4 @@ class CodeViewSimple extends BaseCustomWebComponentConstructorAppend {
         this._text.setSelectionRange(position.start, position.start + position.length);
     }
 }
-export { CodeViewSimple };
 customElements.define('node-projects-code-view-simple', CodeViewSimple);

package/dist/elements/widgets/demoView/demoView.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-class DemoView extends BaseCustomWebComponentLazyAppend {
+export class DemoView extends BaseCustomWebComponentLazyAppend {
     _placeholder;
     _loading;
     static style = css `
@@ -39,5 +39,4 @@ class DemoView extends BaseCustomWebComponentLazyAppend {
         this._loading.hidden = true;
     }
 }
-export { DemoView };
 customElements.define('node-projects-demo-view', DemoView);

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

@@ -23,12 +23,14 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     clickOverlay: HTMLDivElement;
     private _activeTool;
     gridSize: number;
+    pasteOffset: number;
     alignOnGrid: boolean;
     alignOnSnap: boolean;
     snapLines: Snaplines;
     overlayLayer: OverlayLayerView;
     rootDesignItem: IDesignItem;
     eatEvents: Element;
+    private _currentPasteOffset;
     private _zoomFactor;
     private _scaleFactor;
     private _canvasOffset;

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

@@ -20,7 +20,7 @@ import { NodeType } from '../../item/NodeType.js';
 import { StylesheetChangedAction } from '../../services/undoService/transactionItems/StylesheetChangedAction.js';
 import { SetDesignItemsAction } from '../../services/undoService/transactionItems/SetDesignItemsAction.js';
 import { AbstractStylesheetService } from '../../services/stylesheetService/AbstractStylesheetService.js';
-class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
+export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     // Public Properties
     serviceContainer;
     instanceServiceContainer;
@@ -30,12 +30,14 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _activeTool;
     // IPlacementView
     gridSize = 10;
+    pasteOffset = 10;
     alignOnGrid = false;
     alignOnSnap = true;
     snapLines;
     overlayLayer;
     rootDesignItem;
     eatEvents;
+    _currentPasteOffset = this.pasteOffset;
     _zoomFactor = 1; //if scale or zoom css property is used this needs to be the value
     _scaleFactor = 1; //if scale css property is used this need to be the scale value
     _canvasOffset = { x: 0, y: 0 };
@@ -460,14 +462,17 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.instanceServiceContainer.selectionService.setSelectedElements(Array.from(this.rootDesignItem.children()));
     }
     async handleCopyCommand() {
+        this._currentPasteOffset = this.pasteOffset;
         this._lastCopiedPrimaryItem = this.instanceServiceContainer.selectionService.primarySelection;
         await this.serviceContainer.copyPasteService.copyItems(this.instanceServiceContainer.selectionService.selectedElements);
     }
     async handlePasteCommand(disableRestoreOfPositions) {
         const [designItems, positions] = await this.serviceContainer.copyPasteService.getPasteItems(this.serviceContainer, this.instanceServiceContainer);
         let grp = this.rootDesignItem.openGroup("Insert");
+        let lastCopiedPrimaryItemBackup = this._lastCopiedPrimaryItem;
+        let nextPasteOffset = this._currentPasteOffset + this.pasteOffset;
         let pasteContainer = this.rootDesignItem;
-        let pCon = this._lastCopiedPrimaryItem?.parent ?? this.instanceServiceContainer.selectionService.primarySelection;
+        let pCon = lastCopiedPrimaryItemBackup?.parent ?? this.instanceServiceContainer.selectionService.primarySelection;
         while (pCon != null) {
             const containerStyle = getComputedStyle(pCon.element);
             let newContainerService;
@@ -490,8 +495,8 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 let pos = positions ? positions[i] : null;
                 this.instanceServiceContainer.undoService.execute(new InsertAction(pasteContainer, pasteContainer.childCount, di));
                 if (!disableRestoreOfPositions && pos && di.nodeType == NodeType.Element) {
-                    di.setStyle('left', (pos.x - containerPos.x + 10) + 'px');
-                    di.setStyle('top', (pos.y - containerPos.y + 10) + 'px');
+                    di.setStyle('left', (pos.x - containerPos.x + this._currentPasteOffset) + 'px');
+                    di.setStyle('top', (pos.y - containerPos.y + this._currentPasteOffset) + 'px');
                 }
             }
             const intializationService = this.serviceContainer.intializationService;
@@ -503,6 +508,8 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         grp.commit();
         this.snapLines.clearSnaplines();
+        this._lastCopiedPrimaryItem = lastCopiedPrimaryItemBackup;
+        this._currentPasteOffset = nextPasteOffset;
     }
     handleDeleteCommand() {
         let items = this.instanceServiceContainer.selectionService.selectedElements;
@@ -520,6 +527,7 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.instanceServiceContainer.register("selectionService", selectionService(this));
             this.instanceServiceContainer.selectionService.onSelectionChanged.on(() => {
                 this._lastCopiedPrimaryItem = null;
+                this._currentPasteOffset = this.pasteOffset;
             });
         }
         const designItemDocumentPositionService = this.serviceContainer.getLastService('designItemDocumentPositionService');
@@ -782,6 +790,7 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         return [newContainerElementDesignItem, newContainerService];
     }
     async _onDrop(event) {
+        this.serviceContainer.globalContext.tool = this.serviceContainer.designerTools.get(NamedTools.Pointer);
         this._lastDdElement = null;
         event.preventDefault();
         this._canvas.classList.remove('dragFileActive');
@@ -1161,5 +1170,4 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.canvasOffsetUnzoomed = newCanvasOffset;
     }
 }
-export { DesignerCanvas };
 customElements.define('node-projects-designer-canvas', DesignerCanvas);

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

@@ -4,7 +4,7 @@ import { DomConverter } from './DomConverter.js';
 import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js';
 import { EventNames } from '../../../enums/EventNames.js';
 import { DesignerToolbar } from './tools/toolBar/DesignerToolbar.js';
-class DesignerView extends BaseCustomWebComponentConstructorAppend {
+export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     _sVert;
     _sHor;
     get serviceContainer() {
@@ -334,5 +334,4 @@ class DesignerView extends BaseCustomWebComponentConstructorAppend {
         return designerCanvas;
     }
 }
-export { DesignerView };
 customElements.define('node-projects-designer-view', DesignerView);

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

@@ -2,7 +2,7 @@ import { html } from "@node-projects/base-custom-webcomponent";
 import { AbstractExtension } from "../AbstractExtension.js";
 import { ExtensionType } from "../ExtensionType.js";
 import { OverlayLayer } from "../OverlayLayer.js";
-class EditTextExtension extends AbstractExtension {
+export class EditTextExtension extends AbstractExtension {
     static template = html `
     <div style="height: 24px; display: flex;">
       <button data-command="bold" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
@@ -93,4 +93,3 @@ class EditTextExtension extends AbstractExtension {
         this.extendedItem.element.focus();
     }
 }
-export { EditTextExtension };

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

@@ -3,7 +3,7 @@ import { TextTool } from '../../tools/TextTool.js';
 import { AbstractExtension } from "../AbstractExtension.js";
 import { ExtensionType } from "../ExtensionType.js";
 import { OverlayLayer } from "../OverlayLayer.js";
-class EditTextWithStyloExtension extends AbstractExtension {
+export class EditTextWithStyloExtension extends AbstractExtension {
     _contentEditedBound;
     _blurBound;
     static template = html `
@@ -85,4 +85,3 @@ class EditTextWithStyloExtension extends AbstractExtension {
         this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
     }
 }
-export { EditTextWithStyloExtension };

package/dist/elements/widgets/designerView/extensions/svg/EllipsisExtension.d.ts

@@ -20,6 +20,8 @@ export declare class EllipsisExtension extends AbstractExtension {
     private _circle2;
     private _circle3;
     private _circle4;
+    private _startScrollOffset;
+    private _deltaScrollOffset;
     private _parentCoordinates;
     private _offsetSvg;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);

package/dist/elements/widgets/designerView/extensions/svg/EllipsisExtension.js

@@ -17,6 +17,8 @@ export class EllipsisExtension extends AbstractExtension {
     _circle2;
     _circle3;
     _circle4;
+    _startScrollOffset;
+    _deltaScrollOffset;
     _parentCoordinates;
     _offsetSvg = 10.0;
     constructor(extensionManager, designerView, extendedItem) {
@@ -25,6 +27,7 @@ export class EllipsisExtension extends AbstractExtension {
     extend() {
         this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
         this._ellipseElement = this.extendedItem.node;
+        this._startScrollOffset = this.designerCanvas.canvasOffset;
         this._cx = this._ellipseElement.cx.baseVal.value;
         this._cy = this._ellipseElement.cy.baseVal.value;
         this._rx = this._ellipseElement.rx.baseVal.value;
@@ -47,6 +50,10 @@ export class EllipsisExtension extends AbstractExtension {
                 break;
             case EventNames.PointerMove:
                 if (this._startPos && event.buttons > 0) {
+                    this._deltaScrollOffset = {
+                        x: this._startScrollOffset.x - this.designerCanvas.canvasOffset.x,
+                        y: this._startScrollOffset.y - this.designerCanvas.canvasOffset.y
+                    };
                     this._lastPos = { x: this._startPos.x, y: this._startPos.y };
                     const cx = cursorPos.x - this._lastPos.x + this._circlePos.x;
                     const cy = cursorPos.y - this._lastPos.y + this._circlePos.y;
@@ -88,8 +95,10 @@ export class EllipsisExtension extends AbstractExtension {
                 this._startPos = null;
                 this._circlePos = null;
                 this._originalPoint = null;
-                this.extendedItem.setAttribute("rx", this._newRx.toString());
-                this.extendedItem.setAttribute("ry", this._newRy.toString());
+                if (this._newRx && this._newRy) {
+                    this.extendedItem.setAttribute("rx", this._newRx.toString());
+                    this.extendedItem.setAttribute("ry", this._newRy.toString());
+                }
                 if (getComputedStyle(this._ellipseElement.parentElement).position == "absolute") {
                     let group = this.extendedItem.openGroup('rearrangeSvg');
                     let newEllipseCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._ellipseElement);
@@ -111,7 +120,7 @@ export class EllipsisExtension extends AbstractExtension {
         return circle;
     }
     _redrawPathCircle(x, y, oldCircle) {
-        let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5 / this.designerCanvas.scaleFactor, 'svg-path', oldCircle);
+        let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x - this._deltaScrollOffset.x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y - this._deltaScrollOffset.y, 5 / this.designerCanvas.scaleFactor, 'svg-path', oldCircle);
         circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
         return circle;
     }

package/dist/elements/widgets/designerView/extensions/svg/PathExtension.d.ts

@@ -16,6 +16,8 @@ export declare class PathExtension extends AbstractExtension {
     private _offsetSvg;
     private _pathElement;
     private _parentCoordinates;
+    private _startScrollOffset;
+    private _deltaScrollOffset;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     pointerEvent(event: PointerEvent, circle: SVGCircleElement, p: PathData, index: number): void;

package/dist/elements/widgets/designerView/extensions/svg/PathExtension.js

@@ -13,6 +13,8 @@ export class PathExtension extends AbstractExtension {
     _offsetSvg = 10.0;
     _pathElement;
     _parentCoordinates;
+    _startScrollOffset;
+    _deltaScrollOffset;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -21,6 +23,9 @@ export class PathExtension extends AbstractExtension {
         this._pathdata = this.extendedItem.node.getPathData({ normalize: false });
         this._pathElement = this.extendedItem.node;
         this._lastPos = { x: 0, y: 0 };
+        this._startScrollOffset = this.designerCanvas.canvasOffset;
+        if (!this._deltaScrollOffset)
+            this._deltaScrollOffset = { x: 0, y: 0 };
         for (let p of this._pathdata) {
             switch (p.type) {
                 case 'M':
@@ -119,6 +124,10 @@ export class PathExtension extends AbstractExtension {
                 break;
             case EventNames.PointerMove:
                 if (this._startPos && event.buttons > 0) {
+                    this._deltaScrollOffset = {
+                        x: this._startScrollOffset.x - this.designerCanvas.canvasOffset.x,
+                        y: this._startScrollOffset.y - this.designerCanvas.canvasOffset.y
+                    };
                     this._lastPos = { x: this._startPos.x, y: this._startPos.y };
                     const cx = cursorPos.x - this._lastPos.x + this._circlePos.x;
                     const cy = cursorPos.y - this._lastPos.y + this._circlePos.y;
@@ -293,8 +302,8 @@ export class PathExtension extends AbstractExtension {
         let newElementCoords = this.extendedItem.element.getBoundingClientRect();
         let parentLeft = (newElementCoords.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor - this._offsetSvg;
         let parentTop = (newElementCoords.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - this._offsetSvg;
-        let heightSvgElement = newElementCoords.height + (2 * this._offsetSvg);
-        let widthSvgElement = newElementCoords.width + (2 * this._offsetSvg);
+        let heightSvgElement = newElementCoords.height / this.designerCanvas.scaleFactor + (2 * this._offsetSvg);
+        let widthSvgElement = newElementCoords.width / this.designerCanvas.scaleFactor + (2 * this._offsetSvg);
         this.extendedItem.element.parentElement.style.setProperty("left", parentLeft.toString() + "px");
         this.extendedItem.element.parentElement.style.setProperty("top", parentTop.toString() + "px");
         this.extendedItem.element.parentElement.style.setProperty("height", heightSvgElement.toString() + "px");
@@ -302,8 +311,8 @@ export class PathExtension extends AbstractExtension {
     }
     _rearrangePointsFromElement(oldParentCoords, pathData) {
         let newParentCoords = this.extendedItem.element.parentElement.getBoundingClientRect();
-        let diffX = oldParentCoords.x - newParentCoords.x;
-        let diffY = oldParentCoords.y - newParentCoords.y;
+        let diffX = (oldParentCoords.x - newParentCoords.x) / this.designerCanvas.scaleFactor - this._deltaScrollOffset.x;
+        let diffY = (oldParentCoords.y - newParentCoords.y) / this.designerCanvas.scaleFactor - this._deltaScrollOffset.y;
         for (let i = 0; i < pathData.length; i++) {
             pathData[i].values[0] = pathData[i].values[0] + diffX;
             pathData[i].values[1] = pathData[i].values[1] + diffY;

package/dist/elements/widgets/designerView/extensions/svg/RectExtension.d.ts

@@ -18,9 +18,12 @@ export declare class RectExtension extends AbstractExtension {
     private _circle2;
     private _circle3;
     private _circle4;
+    private _startScrollOffset;
+    private _deltaScrollOffset;
     private _rect;
     private _parentCoordinates;
     private _offsetSvg;
+    private _circleMoved;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     pointerEvent(event: PointerEvent, circle: SVGCircleElement, r: SVGRectElement, index: number): void;

package/dist/elements/widgets/designerView/extensions/svg/RectExtension.js

@@ -15,15 +15,19 @@ export class RectExtension extends AbstractExtension {
     _circle2;
     _circle3;
     _circle4;
+    _startScrollOffset;
+    _deltaScrollOffset;
     _rect = { x: 0, y: 0, w: 0, h: 0 };
     _parentCoordinates;
     _offsetSvg = 10.0;
+    _circleMoved;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
         this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
         this._rectElement = this.extendedItem.node;
+        this._startScrollOffset = this.designerCanvas.canvasOffset;
         this._x = this._rectElement.x.baseVal.value;
         this._y = this._rectElement.y.baseVal.value;
         this._w = this._rectElement.width.baseVal.value;
@@ -46,11 +50,17 @@ export class RectExtension extends AbstractExtension {
                 break;
             case EventNames.PointerMove:
                 if (this._startPos && event.buttons > 0) {
+                    this._deltaScrollOffset = {
+                        x: this._startScrollOffset.x - this.designerCanvas.canvasOffset.x,
+                        y: this._startScrollOffset.y - this.designerCanvas.canvasOffset.y
+                    };
                     this._lastPos = { x: this._startPos.x, y: this._startPos.y };
                     const cx = cursorPos.x - this._lastPos.x + this._circlePos.x;
                     const cy = cursorPos.y - this._lastPos.y + this._circlePos.y;
                     let dx = cx - this._circlePos.x;
                     let dy = cy - this._circlePos.y;
+                    if (dx != 0 || dy != 0)
+                        this._circleMoved = true;
                     if (event.shiftKey) {
                         if (Math.abs(dx) < Math.abs(dy)) {
                             dx = 0;
@@ -91,10 +101,12 @@ export class RectExtension extends AbstractExtension {
                 this._startPos = null;
                 this._circlePos = null;
                 this._originalPoint = null;
-                this.extendedItem.setAttribute("x", this._rect.x.toString());
-                this.extendedItem.setAttribute("y", this._rect.y.toString());
-                this.extendedItem.setAttribute("width", this._rect.w.toString());
-                this.extendedItem.setAttribute("height", this._rect.h.toString());
+                if (this._circleMoved) {
+                    this.extendedItem.setAttribute("x", this._rect.x.toString());
+                    this.extendedItem.setAttribute("y", this._rect.y.toString());
+                    this.extendedItem.setAttribute("width", this._rect.w.toString());
+                    this.extendedItem.setAttribute("height", this._rect.h.toString());
+                }
                 if (getComputedStyle(this._rectElement.parentElement).position == "absolute") {
                     let group = this.extendedItem.openGroup('rearrangeSvg');
                     let newRectCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._rectElement);
@@ -116,7 +128,7 @@ export class RectExtension extends AbstractExtension {
         return circle;
     }
     _redrawPathCircle(x, y, oldCircle) {
-        let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5 / this.designerCanvas.scaleFactor, 'svg-path', oldCircle);
+        let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x - this._deltaScrollOffset.x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y - this._deltaScrollOffset.y, 5 / this.designerCanvas.scaleFactor, 'svg-path', oldCircle);
         circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
         return circle;
     }

package/dist/elements/widgets/designerView/overlay/EditTextOverlay.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
-class EditTextOverlay extends BaseCustomWebComponentConstructorAppend {
+export class EditTextOverlay extends BaseCustomWebComponentConstructorAppend {
     static style = css ``;
     static template = html `
     <div>
@@ -7,4 +7,3 @@ class EditTextOverlay extends BaseCustomWebComponentConstructorAppend {
     </div>
   `;
 }
-export { EditTextOverlay };

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

@@ -1,6 +1,6 @@
 import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
 import { OverlayLayer } from './extensions/OverlayLayer.js';
-class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
+export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
     static template = html `
     <svg id="svg" style="pointer-events: none;">
       <defs id="defs"></defs>
@@ -199,5 +199,4 @@ class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         return existingEls;
     }
 }
-export { OverlayLayerView };
 customElements.define(OverlayLayerView.is, OverlayLayerView);

package/dist/elements/widgets/designerView/tools/MagicWandSelectorTool.js

@@ -47,6 +47,8 @@ export class MagicWandSelectorTool {
                     const p4 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
                     if (p1 && p2 && p3 && p4) {
                         const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                        if (designerCanvas.instanceServiceContainer.selectionService.selectedElements)
+                            inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                         inSelectionElements.push(desItem);
                     }
                 }

package/dist/elements/widgets/designerView/tools/PointerTool.js

@@ -110,7 +110,8 @@ export class PointerTool {
                     this._actionType = PointerActionType.Drag;
                 }
                 else if (currentElement === designerCanvas || currentElement === designerCanvas.rootDesignItem.element || currentElement == null) {
-                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(null);
+                    if (!event.shiftKey)
+                        designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(null);
                     this._actionType = PointerActionType.DrawSelection;
                 }
                 else {

package/dist/elements/widgets/designerView/tools/RectangleSelectorTool.js

@@ -51,7 +51,7 @@ export class RectangleSelectorTool {
                 event.target.releasePointerCapture(event.pointerId);
                 designerCanvas.releaseActiveTool();
                 const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
-                const inSelectionElements = [];
+                let inSelectionElements = [];
                 let point = designerCanvas.overlayLayer.createPoint();
                 for (let e of elements) {
                     let elementRect = designerCanvas.getNormalizedElementCoordinates(e);
@@ -69,6 +69,8 @@ export class RectangleSelectorTool {
                     const p4 = p3 && this._rect.isPointInFill(point);
                     if (p4) {
                         const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                        if (designerCanvas.instanceServiceContainer.selectionService.selectedElements)
+                            inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                         inSelectionElements.push(desItem);
                     }
                 }

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbar.js

@@ -6,7 +6,7 @@ import { CommandType } from "../../../../../commandHandling/CommandType.js";
 //import "./popups/DrawToolPopup.js";
 //import "./popups/SelectorToolsPopup.js";
 import { DesignerToolbarButton } from './DesignerToolbarButton.js';
-class DesignerToolbar extends BaseCustomWebComponentConstructorAppend {
+export class DesignerToolbar extends BaseCustomWebComponentConstructorAppend {
     static style = css `
         node-projects-designer-tools-buttons {
             height: 100%;
@@ -83,5 +83,4 @@ class DesignerToolbar extends BaseCustomWebComponentConstructorAppend {
         this._designerView.designerCanvas.executeCommand({ type: CommandType.setStrokeThickness, parameter: input });
     }
 }
-export { DesignerToolbar };
 customElements.define('node-projects-designer-toolbar', DesignerToolbar);

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
-class DesignerToolbarButton extends BaseCustomWebComponentConstructorAppend {
+export class DesignerToolbarButton extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     div {
       width: 24px;
@@ -59,5 +59,4 @@ class DesignerToolbarButton extends BaseCustomWebComponentConstructorAppend {
         }
     }
 }
-export { DesignerToolbarButton };
 customElements.define('node-projects-designer-toolbar-button', DesignerToolbarButton);

package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js

@@ -1,6 +1,6 @@
 import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
 import { assetsPath } from "../../../../../../Constants.js";
-class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
+export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
     static style = css `
       .container {
           width: 220px;
@@ -99,5 +99,4 @@ class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
         }
     }
 }
-export { DrawToolPopup };
 customElements.define('node-projects-designer-drawtool-popup', DrawToolPopup);

package/dist/elements/widgets/miniatureView/html-2-canvas-miniature-view.js

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentLazyAppend, css, html, DomHelper } from '@node-projects/base-custom-webcomponent';
-class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend {
+export class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend {
     static style = css ``;
     static template = html `
         <div class="imgdiv">
@@ -18,5 +18,4 @@ class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend {
         });
     }
 }
-export { Html2CanvasMiniatureView };
 customElements.define('node-projects-html-2-canvas-miniature-view', Html2CanvasMiniatureView);

package/dist/elements/widgets/paletteView/paletteElements.js

@@ -1,7 +1,7 @@
 import { dragDropFormatNameElementDefinition } from '../../../Constants.js';
 import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
 import { DrawElementTool } from '../designerView/tools/DrawElementTool.js';
-class PaletteElements extends BaseCustomWebComponentLazyAppend {
+export class PaletteElements extends BaseCustomWebComponentLazyAppend {
     static style = css `
     :host {
       display: block;
@@ -136,5 +136,4 @@ class PaletteElements extends BaseCustomWebComponentLazyAppend {
         }
     }
 }
-export { PaletteElements };
 customElements.define('node-projects-palette-elements', PaletteElements);

package/dist/elements/widgets/paletteView/paletteTreeView.js

@@ -1,6 +1,6 @@
 import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
 import { dragDropFormatNameElementDefinition } from '../../../Constants.js';
-class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
+export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
     _treeDiv;
     _tree;
     _filter;
@@ -134,5 +134,4 @@ class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
         }
     }
 }
-export { PaletteTreeView };
 customElements.define('node-projects-palette-tree-view', PaletteTreeView);

package/dist/elements/widgets/paletteView/paletteView.js

@@ -2,7 +2,7 @@ import '../../controls/DesignerTabControl.js';
 import { PaletteElements } from './paletteElements.js';
 import { DesignerTabControl } from '../../controls/DesignerTabControl.js';
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-class PaletteView extends BaseCustomWebComponentLazyAppend {
+export class PaletteView extends BaseCustomWebComponentLazyAppend {
     selected = 'native';
     _designerTabControl;
     static style = css `
@@ -35,5 +35,4 @@ class PaletteView extends BaseCustomWebComponentLazyAppend {
         this._designerTabControl.refreshItems();
     }
 }
-export { PaletteView };
 customElements.define('node-projects-palette-view', PaletteView);

package/dist/elements/widgets/propertyGrid/PropertyGrid.js

@@ -2,7 +2,7 @@ import { PropertyGridPropertyList } from './PropertyGridPropertyList.js';
 import { DesignerTabControl } from '../../controls/DesignerTabControl.js';
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
 import { RefreshMode } from '../../services/propertiesService/IPropertiesService.js';
-class PropertyGrid extends BaseCustomWebComponentLazyAppend {
+export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     _serviceContainer;
     _designerTabControl;
     _selectedItems;
@@ -109,5 +109,4 @@ class PropertyGrid extends BaseCustomWebComponentLazyAppend {
         this._itemsObserver.observe(this._selectedItems[0].element, { attributes: true, childList: false, characterData: false });
     }
 }
-export { PropertyGrid };
 customElements.define('node-projects-property-grid', PropertyGrid);

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.js

@@ -1,7 +1,7 @@
 import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
 import { sleep } from '../../helper/Helper.js';
 import { NodeType } from '../../item/NodeType.js';
-class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
+export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     static style = css `
     :host {
       display: block;
@@ -114,5 +114,4 @@ class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         });
     }
 }
-export { PropertyGridWithHeader };
 customElements.define('node-projects-property-grid-with-header', PropertyGridWithHeader);

package/dist/elements/widgets/treeView/treeView.js

@@ -1,6 +1,6 @@
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
 import { DesignItem } from '../../item/DesignItem.js';
-class TreeView extends BaseCustomWebComponentLazyAppend {
+export class TreeView extends BaseCustomWebComponentLazyAppend {
     _items;
     _index;
     _previouslySelected;
@@ -239,5 +239,4 @@ class TreeView extends BaseCustomWebComponentLazyAppend {
         }
     }
 }
-export { TreeView };
 customElements.define('node-projects-tree-view', TreeView);

package/dist/elements/widgets/treeView/treeViewExtended.js

@@ -4,7 +4,7 @@ import { assetsPath } from '../../../Constants.js';
 import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
 import { switchContainer } from '../../helper/SwitchContainerHelper.js';
 import { DomConverter } from '../designerView/DomConverter.js';
-class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
+export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
     _treeDiv;
     _tree;
     _filter;
@@ -363,5 +363,4 @@ class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         });
     }
 }
-export { TreeViewExtended };
 customElements.define('node-projects-tree-view-extended', TreeViewExtended);

package/dist/index.d.ts

@@ -38,6 +38,7 @@ 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/copyPasteService/CopyPasteService.js";
+export * from "./elements/services/copyPasteService/CopyPasteAsJsonService.js";
 export type { ICopyPasteService } from "./elements/services/copyPasteService/ICopyPasteService.js";
 export * from "./elements/services/demoProviderService/DemoProviderService.js";
 export type { IDemoProviderService } from "./elements/services/demoProviderService/IDemoProviderService.js";

package/dist/index.js

@@ -26,6 +26,7 @@ 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/copyPasteService/CopyPasteService.js";
+export * from "./elements/services/copyPasteService/CopyPasteAsJsonService.js";
 export * from "./elements/services/demoProviderService/DemoProviderService.js";
 export * from "./elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.236",
+  "version": "0.0.238",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -21,12 +21,12 @@
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^6.1.5",
     "@papyrs/stylo": "^0.0.45",
-    "@types/codemirror": "^5.60.7",
+    "@types/codemirror": "^5.60.8",
     "@types/css-tree": "^2.3.1",
     "@types/jquery": "^3.5.16",
     "@types/jquery.fancytree": "0.0.7",
-    "@types/node": "^20.2.1",
-    "ace-builds": "^1.21.1",
+    "@types/node": "^20.3.1",
+    "ace-builds": "^1.22.1",
     "codemirror": "^6.0.1",
     "css-tree": "^2.3.1",
     "esprima-next": "^5.8.4",
@@ -35,9 +35,9 @@
     "jquery": "^3.7.0",
     "jquery.fancytree": "^2.38.3",
     "mdn-data": "^2.0.32",
-    "monaco-editor": "^0.38.0",
+    "monaco-editor": "^0.39.0",
     "ts-jest": "^29.1.0",
-    "typescript": "^5.0.4",
+    "typescript": "^5.1.3",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "repository": {