@node-projects/web-component-designer 0.0.80 → 0.0.84

package/dist/elements/helper/PathDataPolyfill.d.ts

@@ -1,42 +1,42 @@
 import { IPoint } from "../../interfaces/IPoint.js";
 export {};
-declare type PathDataM = {
+export declare type PathDataM = {
     type: 'M' | 'm';
     values: [x: number, y: number];
 };
-declare type PathDataL = {
+export declare type PathDataL = {
     type: 'L' | 'l';
     values: [x: number, y: number];
 };
-declare type PathDataT = {
+export declare type PathDataT = {
     type: 'T' | 't';
     values: [x: number, y: number];
 };
-declare type PathDataH = {
+export declare type PathDataH = {
     type: 'H' | 'h';
     values: [x: number];
 };
-declare type PathDataV = {
+export declare type PathDataV = {
     type: 'V' | 'v';
     values: [y: number];
 };
-declare type PathDataZ = {
+export declare type PathDataZ = {
     type: 'Z' | 'z';
     values?: [];
 };
-declare type PathDataC = {
+export declare type PathDataC = {
     type: 'C' | 'c';
     values: [x1: number, y1: number, x2: number, y2: number, x: number, y: number];
 };
-declare type PathDataS = {
+export declare type PathDataS = {
     type: 'S' | 's';
     values: [x2: number, y2: number, x: number, y: number];
 };
-declare type PathDataQ = {
+export declare type PathDataQ = {
     type: 'Q' | 'q';
     values: [x1: number, y1: number, x: number, y: number];
 };
-declare type PathDataA = {
+export declare type PathDataA = {
     type: 'A' | 'a';
     values: [rx: number, ry: number, ang: number, flag1: 0 | 1, flag2: 0 | 1, x: number, y: number];
 };
@@ -47,6 +47,7 @@ export declare function straightenLine(p1: IPoint, p2: IPoint): IPoint;
 export declare function calculateNormLegth(p1: IPoint, p2: IPoint): number;
 export declare function calculateAlpha(p1: IPoint, p2: IPoint): number;
 export declare function moveSVGPath(path: SVGPathElement, xFactor: number, yFactor: number): string;
+export declare function createPathD(path: PathData[]): string;
 declare global {
     interface SVGGraphicsElement {
         getPathData(options?: {

package/dist/elements/helper/PathDataPolyfill.js

@@ -941,3 +941,38 @@ export function moveSVGPath(path, xFactor, yFactor) {
     }
     return newPathData;
 }
+export function createPathD(path) {
+    let pathD = "";
+    for (let p of path) {
+        switch (p.type) {
+            case 'M':
+                pathD += p.type + p.values[0] + " " + p.values[1];
+                break;
+            case 'L':
+                pathD += p.type + p.values[0] + " " + p.values[1];
+                break;
+            case 'H':
+                break;
+            case 'V':
+                break;
+            case 'Z':
+                pathD += p.type;
+                break;
+            case 'C':
+            case 'c':
+                pathD += p.type + p.values[0] + " " + p.values[1] + " " + p.values[2] + " " + p.values[3] + " " + p.values[4] + " " + p.values[5];
+                break;
+            case 'S':
+                break;
+            case 'Q':
+            case 'q':
+                pathD += p.type + p.values[0] + " " + p.values[1] + " " + p.values[2] + " " + p.values[3];
+                break;
+            case 'T':
+                break;
+            case 'A':
+                break;
+        }
+    }
+    return pathD;
+}

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -9,7 +9,7 @@ import { DefaultPlacementService } from './placementService/DefaultPlacementServ
 import { DefaultHtmlParserService } from './htmlParserService/DefaultHtmlParserService.js';
 import { Lit2PropertiesService } from './propertiesService/services/Lit2PropertiesService.js';
 import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
-import { PrimarySelectionDefaultExtensionProvider } from '../widgets/designerView/extensions/PrimarySelectionDefaultExtensionProvider.js';
+import { ElementDragTitleExtensionProvider } from '../widgets/designerView/extensions/ElementDragTitleExtensionProvider.js';
 import { GridExtensionProvider } from '../widgets/designerView/extensions/GridExtensionProvider.js';
 import { TransformOriginExtensionProvider } from '../widgets/designerView/extensions/TransformOriginExtensionProvider.js';
 import { CanvasExtensionProvider } from '../widgets/designerView/extensions/CanvasExtensionProvider.js';
@@ -52,6 +52,9 @@ import { DrawRectTool } from '../widgets/designerView/tools/DrawRectTool.js';
 import { DrawEllipsisTool } from '../widgets/designerView/tools/DrawEllipsisTool.js';
 import { DrawLineTool } from '../widgets/designerView/tools/DrawLineTool.js';
 import { HtmlWriterService } from './htmlWriterService/HtmlWriterService.js';
+import { RectContextMenu } from '../widgets/designerView/extensions/contextMenu/RectContextMenu.js';
+import { PathContextMenu } from '../widgets/designerView/extensions/contextMenu/PathContextMenu.js';
+import { IframeExtensionProvider } from '../widgets/designerView/extensions/IframeExtensionProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -74,11 +77,13 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("modelCommandService", new DefaultModelCommandService());
     serviceContainer.register("demoProviderService", new DemoProviderService());
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
-        new ResizeExtensionProvider(false),
-        new InvisibleDivExtensionProvider()
+        // new ResizeExtensionProvider(false),
+        new InvisibleDivExtensionProvider(),
+        new IframeExtensionProvider(),
+        // new ElementDragTitleExtensionProvider(),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
-        new PrimarySelectionDefaultExtensionProvider(),
+        new ElementDragTitleExtensionProvider(),
         new GridExtensionProvider(),
         new TransformOriginExtensionProvider(),
         new CanvasExtensionProvider(),
@@ -125,7 +130,9 @@ export function createDefaultServiceContainer() {
         new CopyPasteContextMenu(),
         new ZMoveContextMenu(),
         new MultipleItemsSelectedContextMenu(),
-        new ItemsBelowContextMenu()
+        new PathContextMenu(),
+        new RectContextMenu(),
+        new ItemsBelowContextMenu(),
     ];
     return serviceContainer;
 }

package/dist/elements/services/htmlWriterService/AbstractHtmlWriterService.d.ts

@@ -0,0 +1,10 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IHtmlWriterService } from './IHtmlWriterService.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
+import { IStringPosition } from './IStringPosition.js';
+export declare abstract class AbstractHtmlWriterService implements IHtmlWriterService {
+    abstract write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): any;
+    writeAttributes(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, options: IHtmlWriterOptions): void;
+    writeStyles(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, options: IHtmlWriterOptions): void;
+}

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

@@ -0,0 +1,62 @@
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { CssCombiner } from '../../helper/CssCombiner.js';
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
+export class AbstractHtmlWriterService {
+    writeAttributes(indentedTextWriter, designItem, options) {
+        if (designItem.hasAttributes) {
+            for (const a of designItem.attributes) {
+                indentedTextWriter.write(' ');
+                if (typeof a[1] === 'string') {
+                    if (a[1] === "")
+                        indentedTextWriter.write(a[0]);
+                    else {
+                        if (options.parseJsonInAttributes &&
+                            ((a[1].startsWith('{') && !a[1].startsWith('{{') && a[1].endsWith('}')) ||
+                                (a[1].startsWith('[') && !a[1].startsWith('[[') && a[1].endsWith(']')))) {
+                            try {
+                                let j = JSON.parse(a[1]);
+                                let txt;
+                                if (options.jsonWriteMode == 'beauty')
+                                    txt = JSON.stringify(j, null, 2);
+                                else
+                                    txt = JSON.stringify(j);
+                                indentedTextWriter.write(a[0] + '=\'' + DomConverter.normalizeAttributeValue(txt, true) + '\'');
+                                continue;
+                            }
+                            catch { }
+                        }
+                        const content = DomConverter.normalizeAttributeValue(a[1]);
+                        if (content.indexOf('"')) {
+                            const contentSingle = DomConverter.normalizeAttributeValue(a[1], true);
+                            if (contentSingle.length < content.length)
+                                indentedTextWriter.write(a[0] + '=\'' + contentSingle + '\'');
+                            else
+                                indentedTextWriter.write(a[0] + '="' + content + '"');
+                        }
+                        else
+                            indentedTextWriter.write(a[0] + '="' + content + '"');
+                    }
+                }
+                else if (!a[1])
+                    indentedTextWriter.write(a[0]);
+                else {
+                    //TODO: writing of bindings, really ???
+                }
+            }
+        }
+    }
+    writeStyles(indentedTextWriter, designItem, options) {
+        if (designItem.hasStyles) {
+            indentedTextWriter.write(' style="');
+            let styles = designItem.styles;
+            if (options.compressCssToShorthandProperties)
+                styles = CssCombiner.combine(styles);
+            for (const s of styles) {
+                if (s[0]) {
+                    indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
+                }
+            }
+            indentedTextWriter.write('"');
+        }
+    }
+}

package/dist/elements/services/htmlWriterService/FormatingHtmlWriterService.d.ts

@@ -1,8 +1,8 @@
-import { IDesignItem } from '../../item/IDesignItem';
-import { IHtmlWriterService } from './IHtmlWriterService';
-import { IHtmlWriterOptions } from './IHtmlWriterOptions';
-import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
-import { IStringPosition } from './IStringPosition';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IHtmlWriterService } from './IHtmlWriterService.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
+import { IStringPosition } from './IStringPosition.js';
 declare enum ElementContainerType {
     block = 0,
     complex = 1

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

@@ -1,7 +1,7 @@
-import { DomConverter } from '../../widgets/designerView/DomConverter';
-import { CssCombiner } from '../../helper/CssCombiner';
-import { NodeType } from '../../item/NodeType';
-import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { CssCombiner } from '../../helper/CssCombiner.js';
+import { NodeType } from '../../item/NodeType.js';
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
 import { ElementDisplayType, getElementDisplaytype } from '../../helper/ElementHelper.js';
 var ElementContainerType;
 (function (ElementContainerType) {

package/dist/elements/services/htmlWriterService/HtmlWriterService copy.d.ts

@@ -0,0 +1,12 @@
+import { IDesignItem } from '../../item/IDesignItem';
+import { IHtmlWriterService } from './IHtmlWriterService';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
+import { IStringPosition } from './IStringPosition';
+export declare class HtmlWriterService implements IHtmlWriterService {
+    private _conditionalyWriteIndent;
+    private _conditionalyWriteNewline;
+    write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
+    private internalWrite;
+    private writeTextNode;
+}

package/dist/elements/services/htmlWriterService/HtmlWriterService copy.js

@@ -0,0 +1,118 @@
+import { DomConverter } from '../../widgets/designerView/DomConverter';
+import { CssCombiner } from '../../helper/CssCombiner';
+import { NodeType } from '../../item/NodeType';
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
+import { isEmptyTextNode, isInline } from '../../helper/ElementHelper.js';
+export class HtmlWriterService {
+    _conditionalyWriteIndent(indentedTextWriter, designItem) {
+        if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
+            (designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
+            (designItem.element.previousElementSibling == null && !isInline(designItem.element.parentElement) && (designItem.element.previousSibling == null || isEmptyTextNode(designItem.element.previousSibling))))
+            indentedTextWriter.writeIndent();
+    }
+    _conditionalyWriteNewline(indentedTextWriter, designItem) {
+        if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
+            (designItem.element.nextElementSibling instanceof HTMLElement && !isInline(designItem.element.nextElementSibling)))
+            indentedTextWriter.writeNewline();
+    }
+    write(indentedTextWriter, designItems, rootContainerKeepInline, options, designItemsAssignmentList) {
+        for (const d of designItems) {
+            this.internalWrite(indentedTextWriter, d, options, designItemsAssignmentList);
+        }
+    }
+    internalWrite(indentedTextWriter, designItem, options, designItemsAssignmentList) {
+        let start = indentedTextWriter.position;
+        if (designItem.nodeType == NodeType.TextNode) {
+            if (isEmptyTextNode(designItem.element) &&
+                ((designItem.element.previousSibling instanceof HTMLElement && !isInline(designItem.element.previousSibling)) ||
+                    (designItem.element.nextSibling instanceof HTMLElement && !isInline(designItem.element.nextSibling)))) {
+            }
+            else
+                this.writeTextNode(indentedTextWriter, designItem, true);
+        }
+        else if (designItem.nodeType == NodeType.Comment) {
+            this._conditionalyWriteIndent(indentedTextWriter, designItem);
+            indentedTextWriter.write('<!--' + designItem.content + '-->');
+            this._conditionalyWriteNewline(indentedTextWriter, designItem);
+        }
+        else {
+            this._conditionalyWriteIndent(indentedTextWriter, designItem);
+            indentedTextWriter.write('<' + designItem.name);
+            if (designItem.hasAttributes) {
+                for (const a of designItem.attributes) {
+                    indentedTextWriter.write(' ');
+                    if (typeof a[1] === 'string') {
+                        if (a[1] === "")
+                            indentedTextWriter.write(a[0]);
+                        else
+                            indentedTextWriter.write(a[0] + '="' + DomConverter.normalizeAttributeValue(a[1]) + '"');
+                    }
+                    else if (!a[1])
+                        indentedTextWriter.write(a[0]);
+                    else {
+                        //TODO: writing of bindings
+                    }
+                }
+            }
+            if (designItem.hasStyles) {
+                indentedTextWriter.write(' style="');
+                let styles = designItem.styles;
+                if (options.compressCssToShorthandProperties)
+                    styles = CssCombiner.combine(styles);
+                for (const s of styles) {
+                    if (s[0]) {
+                        indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
+                    }
+                }
+                indentedTextWriter.write('"');
+            }
+            indentedTextWriter.write('>');
+            let contentSingleTextNode = false;
+            if (designItem.hasChildren) {
+                const children = designItem.children();
+                contentSingleTextNode = designItem.childCount === 1 && designItem.firstChild.nodeType === NodeType.TextNode;
+                if (contentSingleTextNode) {
+                    this.writeTextNode(indentedTextWriter, designItem, false);
+                }
+                else {
+                    if (designItem.element instanceof HTMLElement && !isInline(designItem.element)) {
+                        indentedTextWriter.writeNewline();
+                        indentedTextWriter.levelRaise();
+                    }
+                    for (const c of children) {
+                        this.internalWrite(indentedTextWriter, c, options, designItemsAssignmentList);
+                        let childSingleTextNode = c.childCount === 1 && c.firstChild.nodeType === NodeType.TextNode;
+                        if (childSingleTextNode)
+                            indentedTextWriter.writeNewline();
+                    }
+                    if (designItem.element instanceof HTMLElement && !isInline(designItem.element)) {
+                        indentedTextWriter.levelShrink();
+                        if (!indentedTextWriter.isLastCharNewline())
+                            indentedTextWriter.writeNewline();
+                        indentedTextWriter.writeIndent();
+                    }
+                }
+            }
+            else if (designItem.hasContent) {
+                indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content));
+            }
+            if (!DomConverter.IsSelfClosingElement(designItem.name))
+                indentedTextWriter.write('</' + designItem.name + '>');
+            if (!contentSingleTextNode)
+                this._conditionalyWriteNewline(indentedTextWriter, designItem);
+        }
+        if (designItemsAssignmentList) {
+            designItemsAssignmentList.set(designItem, { start: start, length: indentedTextWriter.position - start - 1 });
+        }
+    }
+    writeTextNode(indentedTextWriter, designItem, indentAndNewline) {
+        let content = DomConverter.normalizeContentValue(designItem.content).trim();
+        if (content) {
+            if (indentAndNewline)
+                this._conditionalyWriteIndent(indentedTextWriter, designItem);
+            indentedTextWriter.write(content);
+            if (indentAndNewline)
+                this._conditionalyWriteNewline(indentedTextWriter, designItem);
+        }
+    }
+}

package/dist/elements/services/htmlWriterService/HtmlWriterService.d.ts

@@ -1,9 +1,9 @@
-import { IDesignItem } from '../../item/IDesignItem';
-import { IHtmlWriterService } from './IHtmlWriterService';
-import { IHtmlWriterOptions } from './IHtmlWriterOptions';
-import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
-import { IStringPosition } from './IStringPosition';
-export declare class HtmlWriterService implements IHtmlWriterService {
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
+import { IStringPosition } from './IStringPosition.js';
+import { AbstractHtmlWriterService } from './AbstractHtmlWriterService.js';
+export declare class HtmlWriterService extends AbstractHtmlWriterService {
     private _conditionalyWriteIndent;
     private _conditionalyWriteNewline;
     write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;

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

@@ -1,9 +1,8 @@
-import { DomConverter } from '../../widgets/designerView/DomConverter';
-import { CssCombiner } from '../../helper/CssCombiner';
-import { NodeType } from '../../item/NodeType';
-import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { NodeType } from '../../item/NodeType.js';
 import { isEmptyTextNode, isInline } from '../../helper/ElementHelper.js';
-export class HtmlWriterService {
+import { AbstractHtmlWriterService } from './AbstractHtmlWriterService.js';
+export class HtmlWriterService extends AbstractHtmlWriterService {
     _conditionalyWriteIndent(indentedTextWriter, designItem) {
         if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
             (designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
@@ -38,34 +37,8 @@ export class HtmlWriterService {
         else {
             this._conditionalyWriteIndent(indentedTextWriter, designItem);
             indentedTextWriter.write('<' + designItem.name);
-            if (designItem.hasAttributes) {
-                for (const a of designItem.attributes) {
-                    indentedTextWriter.write(' ');
-                    if (typeof a[1] === 'string') {
-                        if (a[1] === "")
-                            indentedTextWriter.write(a[0]);
-                        else
-                            indentedTextWriter.write(a[0] + '="' + DomConverter.normalizeAttributeValue(a[1]) + '"');
-                    }
-                    else if (!a[1])
-                        indentedTextWriter.write(a[0]);
-                    else {
-                        //TODO: writing of bindings
-                    }
-                }
-            }
-            if (designItem.hasStyles) {
-                indentedTextWriter.write(' style="');
-                let styles = designItem.styles;
-                if (options.compressCssToShorthandProperties)
-                    styles = CssCombiner.combine(styles);
-                for (const s of styles) {
-                    if (s[0]) {
-                        indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
-                    }
-                }
-                indentedTextWriter.write('"');
-            }
+            this.writeAttributes(indentedTextWriter, designItem, options);
+            this.writeStyles(indentedTextWriter, designItem, options);
             indentedTextWriter.write('>');
             let contentSingleTextNode = false;
             if (designItem.hasChildren) {

package/dist/elements/services/htmlWriterService/IHtmlWriterOptions.d.ts

@@ -2,4 +2,6 @@ export declare class IHtmlWriterOptions {
     beautifyOutput: boolean;
     compressCssToShorthandProperties: boolean;
     writeDesignerProperties: boolean;
+    parseJsonInAttributes: boolean;
+    jsonWriteMode: 'min' | 'beauty';
 }

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

@@ -1,5 +1,7 @@
 export class IHtmlWriterOptions {
-    beautifyOutput;
-    compressCssToShorthandProperties;
-    writeDesignerProperties;
+    beautifyOutput = true;
+    compressCssToShorthandProperties = true;
+    writeDesignerProperties = true;
+    parseJsonInAttributes = true;
+    jsonWriteMode = 'min';
 }

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

@@ -78,7 +78,9 @@ export class WebcomponentManifestParserService extends UnkownElementPropertiesSe
         return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
     }
     isHandledElement(designItem) {
-        return this._elementList.find(x => x.tag == designItem.name) != null;
+        if (this._elementList)
+            return this._elementList.find(x => x.tag == designItem.name) != null;
+        return false;
     }
     getProperties(designItem) {
         return this._propertiesList[designItem.name];

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

@@ -20,7 +20,7 @@ export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
     constructor() {
         super();
         //@ts-ignore
-        import("codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        import("./codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this.style.display = 'block';
         this._editor = this._getDomElement('textarea');
     }

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

@@ -1,7 +1,7 @@
-import { IDesignItem } from "../../item/IDesignItem";
-import { IStringPosition } from "../../services/htmlWriterService/IStringPosition";
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IStringPosition } from "../../services/htmlWriterService/IStringPosition.js";
 export declare class DomConverter {
-    static normalizeAttributeValue(value: string | number): string;
+    static normalizeAttributeValue(value: string | number, useSingleQuotes?: boolean): string;
     static normalizeContentValue(value: string): string;
     static IsSelfClosingElement(tag: string): boolean;
     static ConvertToString(designItems: IDesignItem[], designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): string;

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

@@ -1,10 +1,13 @@
-import { IndentedTextWriter } from "../../helper/IndentedTextWriter";
+import { IndentedTextWriter } from "../../helper/IndentedTextWriter.js";
 export class DomConverter {
-    static normalizeAttributeValue(value) {
+    static normalizeAttributeValue(value, useSingleQuotes = false) {
         if (typeof value === 'number')
             value = value.toString();
-        if (value)
+        if (value) {
+            if (useSingleQuotes)
+                return value.replaceAll('\'', ''');
             return value.replaceAll('"', '"');
+        }
         return value;
     }
     static normalizeContentValue(value) {
@@ -31,7 +34,7 @@ export class DomConverter {
     }
     static ConvertToString(designItems, designItemsAssignmentList) {
         let itw = new IndentedTextWriter();
-        let options = { beautifyOutput: true, writeDesignerProperties: true, compressCssToShorthandProperties: true };
+        let options = { beautifyOutput: true, writeDesignerProperties: true, compressCssToShorthandProperties: true, parseJsonInAttributes: true, jsonWriteMode: 'beauty' };
         designItems[0].serviceContainer.htmlWriterService.write(itw, designItems, true, options, designItemsAssignmentList);
         return itw.getString();
     }

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

@@ -53,6 +53,8 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     set designerWidth(value: string);
     get designerHeight(): string;
     set designerHeight(value: string);
+    get designerOffsetWidth(): number;
+    get designerOffsetHeight(): number;
     set additionalStyle(value: CSSStyleSheet);
     executeCommand(command: IUiCommand): Promise<void>;
     canExecuteCommand(command: IUiCommand): boolean;

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

@@ -138,10 +138,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvas = this._getDomElement('node-projects-designer-canvas-canvas');
         this._canvasContainer = this._getDomElement('node-projects-designer-canvas-canvasContainer');
         this._outercanvas2 = this._getDomElement('node-projects-designer-canvas-outercanvas2');
-        this.instanceServiceContainer = new InstanceServiceContainer(this);
-        this.instanceServiceContainer.register("undoService", new UndoService(this));
-        this.instanceServiceContainer.register("selectionService", new SelectionService);
-        this.extensionManager = new ExtensionManager(this);
         this._onKeyDownBound = this.onKeyDown.bind(this);
         this._onKeyUpBound = this.onKeyUp.bind(this);
         this._onDblClickBound = this._onDblClick.bind(this);
@@ -163,6 +159,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvasContainer.style.height = value;
         this.zoomFactorChanged();
     }
+    get designerOffsetWidth() {
+        return this._canvasContainer.offsetWidth;
+    }
+    get designerOffsetHeight() {
+        return this._canvasContainer.offsetHeight;
+    }
     set additionalStyle(value) {
         if (value) {
             for (let r of value.rules) {
@@ -301,8 +303,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     initialize(serviceContainer) {
         this.serviceContainer = serviceContainer;
+        this.instanceServiceContainer = new InstanceServiceContainer(this);
+        this.instanceServiceContainer.register("undoService", new UndoService(this));
+        this.instanceServiceContainer.register("selectionService", new SelectionService);
         this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this.serviceContainer, this.instanceServiceContainer);
         this.instanceServiceContainer.register("contentService", new ContentService(this.rootDesignItem));
+        this.extensionManager = new ExtensionManager(this);
         this.overlayLayer = new OverlayLayerView(serviceContainer);
         this.overlayLayer.style.pointerEvents = 'none';
         this._canvasContainer.appendChild(this.overlayLayer);
@@ -358,6 +364,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.snapLines.clearSnaplines();
     }
     setDesignItems(designItems) {
+        this._fillCalculationrects();
         this.instanceServiceContainer.undoService.clear();
         this.overlayLayer.removeAllOverlays();
         DomHelper.removeAllChildnodes(this.overlayLayer);
@@ -625,7 +632,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         return currentElement;
     }
     _rect;
-    _pointerEventHandler(event) {
+    _pointerEventHandler(event, forceElement = null) {
         this._fillCalculationrects();
         if (this._pointerextensions) {
             for (let pe of this._pointerextensions)
@@ -635,9 +642,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             return;
         if (event.buttons == 2)
             return;
-        let currentElement = this.serviceContainer.elementAtPointService.getElementAtPoint(this, { x: event.x, y: event.y });
-        if (currentElement === this._outercanvas2 || currentElement === this.overlayLayer || !currentElement) {
-            currentElement = this._canvas;
+        let currentElement;
+        if (forceElement)
+            currentElement = forceElement;
+        else {
+            currentElement = this.serviceContainer.elementAtPointService.getElementAtPoint(this, { x: event.x, y: event.y });
+            if (currentElement === this._outercanvas2 || currentElement === this.overlayLayer || !currentElement) {
+                currentElement = this._canvas;
+            }
         } /* else {
           if (!DesignerCanvas.hasOrIsParent(currentElement, this._canvas))
             return;