@node-projects/web-component-designer 0.0.214 → 0.0.216

package/dist/elements/documentContainer.js

@@ -115,11 +115,12 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         if (this._tabControl.selectedIndex === 2) {
             let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
             if (primarySelection) {
-                let designItemsAssignmentList = new Map();
-                this._content = this.designerView.getHTML(designItemsAssignmentList);
-                this._selectionPosition = designItemsAssignmentList.get(primarySelection);
-                this.codeView.setSelection(this._selectionPosition);
-                this._selectionPosition = null;
+                this._content = this.designerView.getHTML();
+                if (this.designerView.instanceServiceContainer.designItemDocumentPositionService) {
+                    this._selectionPosition = this.designerView.instanceServiceContainer.designItemDocumentPositionService.getPosition(primarySelection);
+                    this.codeView.setSelection(this._selectionPosition);
+                    this._selectionPosition = null;
+                }
             }
         }
     }
@@ -129,14 +130,15 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
             this._disableChangeNotificationDesigner = true;
             if (this._tabControl.selectedIndex === 2) {
                 let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
-                let designItemsAssignmentList = new Map();
-                this._content = this.designerView.getHTML(designItemsAssignmentList);
+                this._content = this.designerView.getHTML();
                 this.codeView.update(this._content);
                 if (primarySelection) {
-                    this._selectionPosition = designItemsAssignmentList.get(primarySelection);
-                    if (this._selectionPosition)
-                        this.codeView.setSelection(this._selectionPosition);
-                    this._selectionPosition = null;
+                    if (this.designerView.instanceServiceContainer.designItemDocumentPositionService) {
+                        this._selectionPosition = this.designerView.instanceServiceContainer.designItemDocumentPositionService.getPosition(primarySelection);
+                        if (this._selectionPosition)
+                            this.codeView.setSelection(this._selectionPosition);
+                        this._selectionPosition = null;
+                    }
                 }
             }
             this._disableChangeNotificationDesigner = false;
@@ -190,9 +192,10 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         this._tabControl.onSelectedTabChanged.on(i => {
             if (i.oldIndex === 0) {
                 let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
-                let designItemsAssignmentList = new Map();
-                this._content = this.designerView.getHTML(designItemsAssignmentList);
-                this._selectionPosition = designItemsAssignmentList.get(primarySelection);
+                this._content = this.designerView.getHTML();
+                if (this.designerView.instanceServiceContainer.designItemDocumentPositionService) {
+                    this._selectionPosition = this.designerView.instanceServiceContainer.designItemDocumentPositionService.getPosition(primarySelection);
+                }
             }
             else if (i.oldIndex === 1) {
                 this._content = this.codeView.getText();

package/dist/elements/item/DesignItem.js

@@ -23,7 +23,7 @@ export class DesignItem {
     shouldAppliedDesignerExtensions = new Map();
     async clone() {
         try {
-            const html = DomConverter.ConvertToString([this], null, false);
+            const html = DomConverter.ConvertToString([this], false);
             const parsed = await this.serviceContainer.htmlParserService.parse(html, this.serviceContainer, this.instanceServiceContainer);
             return parsed[0];
         }

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -79,6 +79,7 @@ import { JumpToElementContextMenu } from '../widgets/designerView/extensions/con
 import { EditGridColumnRowSizesExtensionProvider } from '../widgets/designerView/extensions/grid/EditGridColumnRowSizesExtensionProvider.js';
 import { DisplayGridExtensionProvider } from '../widgets/designerView/extensions/grid/DisplayGridExtensionProvider.js';
 import { ApplyFirstMachingExtensionProvider } from '../widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.js';
+import { DesignItemDocumentPositionService } from './designItemDocumentPositionService/DesignItemDocumentPositionService.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -104,6 +105,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("undoService", (designerCanvas) => new UndoService(designerCanvas));
     serviceContainer.register("selectionService", (designerCanvas) => new SelectionService(designerCanvas, false));
     serviceContainer.register("contentService", (designerCanvas) => new ContentService(designerCanvas.rootDesignItem));
+    serviceContainer.register("designItemDocumentPositionService", (designerCanvas) => new DesignItemDocumentPositionService(designerCanvas));
     //serviceContainer.register("stylesheetService", new DemoProviderService());
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
         // new ResizeExtensionProvider(false),

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

@@ -5,11 +5,13 @@ import { IContentService } from './contentService/IContentService.js';
 import { IDesignContext } from '../widgets/designerView/IDesignContext.js';
 import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js';
 import { IStylesheetService } from './stylesheetService/IStylesheetService.js';
+import { IDesignItemDocumentPositionService } from './designItemDocumentPositionService/IDesignItemDocumentPositionService.js';
 interface InstanceServiceNameMap {
     "undoService": IUndoService;
     "selectionService": ISelectionService;
     "contentService": IContentService;
     "stylesheetService": IStylesheetService;
+    "designItemDocumentPositionService": IDesignItemDocumentPositionService;
 }
 export declare class InstanceServiceContainer extends BaseServiceContainer<InstanceServiceNameMap> {
     designContext: IDesignContext;
@@ -20,5 +22,6 @@ export declare class InstanceServiceContainer extends BaseServiceContainer<Insta
     get selectionService(): ISelectionService;
     get contentService(): IContentService;
     get stylesheetService(): IStylesheetService;
+    get designItemDocumentPositionService(): IDesignItemDocumentPositionService;
 }
 export {};

package/dist/elements/services/InstanceServiceContainer.js

@@ -20,4 +20,7 @@ export class InstanceServiceContainer extends BaseServiceContainer {
     get stylesheetService() {
         return this.getLastService('stylesheetService');
     }
+    get designItemDocumentPositionService() {
+        return this.getLastService('designItemDocumentPositionService');
+    }
 }

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

@@ -38,6 +38,7 @@ 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';
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -62,6 +63,7 @@ interface ServiceNameMap {
     "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: {

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

@@ -3,7 +3,7 @@ import { copyToClipboard, getFromClipboard, getTextFromClipboard } from "../../h
 export const positionsJsonMime = 'web text/positions';
 export class CopyPasteService {
     async copyItems(designItems) {
-        const copyText = DomConverter.ConvertToString(designItems, null, false);
+        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)]]);
     }

package/dist/elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.d.ts

@@ -0,0 +1,11 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
+import { IStringPosition } from "../htmlWriterService/IStringPosition.js";
+import { IDesignItemDocumentPositionService } from "./IDesignItemDocumentPositionService.js";
+export declare class DesignItemDocumentPositionService implements IDesignItemDocumentPositionService {
+    private _designItemsAssignmentList?;
+    constructor(designerCanvas: IDesignerCanvas);
+    setPosition(designItem: IDesignItem, position: IStringPosition): void;
+    clearPositions(): void;
+    getPosition(designItem: IDesignItem): IStringPosition;
+}

package/dist/elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.js

@@ -0,0 +1,13 @@
+export class DesignItemDocumentPositionService {
+    _designItemsAssignmentList = new Map();
+    constructor(designerCanvas) { }
+    setPosition(designItem, position) {
+        this._designItemsAssignmentList.set(designItem, position);
+    }
+    clearPositions() {
+        this._designItemsAssignmentList.clear();
+    }
+    getPosition(designItem) {
+        return this._designItemsAssignmentList.get(designItem);
+    }
+}

package/dist/elements/services/designItemDocumentPositionService/IDesignItemDocumentPositionService.d.ts

@@ -0,0 +1,7 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IStringPosition } from "../htmlWriterService/IStringPosition.js";
+export interface IDesignItemDocumentPositionService {
+    setPosition(designItem: IDesignItem, position: IStringPosition): any;
+    clearPositions(): any;
+    getPosition(designItem: IDesignItem): IStringPosition;
+}

package/dist/elements/services/designItemDocumentPositionService/IDesignItemDocumentPositionService.js

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

package/dist/elements/services/htmlParserService/NodeHtmlParserService.js

@@ -38,6 +38,8 @@ export class NodeHtmlParserService {
                 manualCreatedElement = true;
             }
             designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+            if (instanceServiceContainer.designItemDocumentPositionService)
+                instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: item.range[0], length: item.range[1] - item.range[0] });
             let style = '';
             let attr = item.attributes;
             for (let a in attr) {
@@ -71,10 +73,14 @@ export class NodeHtmlParserService {
             this._parseDiv.innerHTML = item.rawText;
             let element = this._parseDiv.childNodes[0];
             designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+            if (instanceServiceContainer.designItemDocumentPositionService)
+                instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: item.range[0], length: item.range[1] - item.range[0] });
         }
         else if (item.nodeType == 8) {
             let element = document.createComment(item.rawText);
             designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+            if (instanceServiceContainer.designItemDocumentPositionService)
+                instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: item.range[0], length: item.range[1] - item.range[0] });
         }
         return designItem;
     }

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

@@ -1,13 +1,12 @@
 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 _conditionalyWriteIndentBefore;
     private _conditionalyWriteNewline;
-    write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
+    write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions): void;
     private internalWrite;
     private writeTextNode;
 }

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

@@ -22,12 +22,12 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
             (designItem.element instanceof SVGElement))
             indentedTextWriter.writeNewline();
     }
-    write(indentedTextWriter, designItems, rootContainerKeepInline, options, designItemsAssignmentList) {
+    write(indentedTextWriter, designItems, rootContainerKeepInline, options) {
         for (const d of designItems) {
-            this.internalWrite(indentedTextWriter, d, options, designItemsAssignmentList);
+            this.internalWrite(indentedTextWriter, d, options);
         }
     }
-    internalWrite(indentedTextWriter, designItem, options, designItemsAssignmentList) {
+    internalWrite(indentedTextWriter, designItem, options) {
         let start = indentedTextWriter.position;
         let end = indentedTextWriter.position;
         if (designItem.nodeType == NodeType.TextNode) {
@@ -66,7 +66,7 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
                         indentedTextWriter.levelRaise();
                     }
                     for (const c of children) {
-                        this.internalWrite(indentedTextWriter, c, options, designItemsAssignmentList);
+                        this.internalWrite(indentedTextWriter, c, options);
                         let childSingleTextNode = c.childCount === 1 && c.firstChild.nodeType === NodeType.TextNode;
                         if (childSingleTextNode)
                             if (!indentedTextWriter.isLastCharNewline())
@@ -92,8 +92,8 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
             if (!indentedTextWriter.isLastCharNewline() && (!designItem.parent || !isInlineAfter(designItem.parent.element)))
                 this._conditionalyWriteNewline(indentedTextWriter, designItem);
         }
-        if (designItemsAssignmentList) {
-            designItemsAssignmentList.set(designItem, { start: start, length: end - start });
+        if (designItem.instanceServiceContainer.designItemDocumentPositionService) {
+            designItem.instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: start, length: end - start });
         }
     }
     writeTextNode(indentedTextWriter, designItem, indentAndNewline) {

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

@@ -1,7 +1,6 @@
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
 import { ITextWriter } from '../../helper/ITextWriter.js';
-import { IStringPosition } from './IStringPosition.js';
 export interface IHtmlWriterService {
-    write(textWriter: ITextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): any;
+    write(textWriter: ITextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, options: IHtmlWriterOptions): any;
 }

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

@@ -1,8 +1,7 @@
 import { IDesignItem } from "../../item/IDesignItem.js";
-import { IStringPosition } from "../../services/htmlWriterService/IStringPosition.js";
 export declare class DomConverter {
     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>, beautifyOutput?: boolean): string;
+    static ConvertToString(designItems: IDesignItem[], beautifyOutput?: boolean): string;
 }

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

@@ -33,10 +33,10 @@ export class DomConverter {
             tag === 'track' ||
             tag === 'wbr';
     }
-    static ConvertToString(designItems, designItemsAssignmentList, beautifyOutput) {
+    static ConvertToString(designItems, beautifyOutput) {
         let itw = beautifyOutput !== false ? new IndentedTextWriter() : new SimpleTextWriter();
         let options = { beautifyOutput: beautifyOutput !== false, writeDesignerProperties: true, compressCssToShorthandProperties: true, parseJsonInAttributes: true, jsonWriteMode: 'beauty' };
-        designItems[0].serviceContainer.htmlWriterService.write(itw, designItems, true, options, designItemsAssignmentList);
+        designItems[0].serviceContainer.htmlWriterService.write(itw, designItems, true, options);
         return itw.getString();
     }
 }

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

@@ -429,6 +429,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 this._lastCopiedPrimaryItem = null;
             });
         }
+        const designItemDocumentPositionService = this.serviceContainer.getLastService('designItemDocumentPositionService');
+        if (designItemDocumentPositionService) {
+            this.instanceServiceContainer.register("designItemDocumentPositionService", designItemDocumentPositionService(this));
+        }
         this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this.serviceContainer, this.instanceServiceContainer);
         const contentService = this.serviceContainer.getLastService('contentService');
         if (contentService) {

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

@@ -5,7 +5,6 @@ import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js
 import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
 import { DesignerCanvas } from "./designerCanvas.js";
 import { IDesignItem } from '../../item/IDesignItem.js';
-import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
 export declare class DesignerView extends BaseCustomWebComponentConstructorAppend implements IUiCommandHandler {
     private _sVert;
     private _sHor;
@@ -34,7 +33,7 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     executeCommand(command: IUiCommand): Promise<void>;
     canExecuteCommand(command: IUiCommand): boolean;
     initialize(serviceContainer: ServiceContainer): void;
-    getHTML(designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): string;
+    getHTML(): string;
     parseHTML(html: string, disableUndo?: boolean): Promise<void>;
     static wrapInDesigner(elements: HTMLCollection | HTMLElement[], serviceContainer: ServiceContainer): DesignerCanvas;
 }

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

@@ -301,10 +301,10 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         }
         this._toolbar.initialize(this.serviceContainer, this);
     }
-    getHTML(designItemsAssignmentList) {
+    getHTML() {
         //this.instanceServiceContainer.selectionService.setSelectedElements(null);
         if (this._designerCanvas.rootDesignItem.childCount > 0)
-            return DomConverter.ConvertToString(Array.from(this._designerCanvas.rootDesignItem.children()), designItemsAssignmentList);
+            return DomConverter.ConvertToString(Array.from(this._designerCanvas.rootDesignItem.children()));
         return '';
     }
     async parseHTML(html, disableUndo = false) {

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtension.d.ts

@@ -11,7 +11,7 @@ export declare class EditGridColumnRowSizesExtension extends AbstractExtension {
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(event?: Event): void;
     refresh(event?: Event): void;
-    _pointerActionTypeResize(event: PointerEvent, rect: SVGRectElement, gap: ReturnType<typeof CalculateGridInformation>['gaps'][0]): void;
-    _convertCssUnits(pixelSizes: number[], targetUnits: string[], target: HTMLElement, percentTarget: 'width' | 'height'): string[];
+    private _pointerActionTypeResize;
+    private _convertCssUnits;
     dispose(): void;
 }

package/dist/index.d.ts

@@ -40,6 +40,8 @@ export * from "./elements/services/copyPasteService/CopyPasteService.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";
+export * from "./elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.js";
+export type { IDesignItemDocumentPositionService } from "./elements/services/designItemDocumentPositionService/IDesignItemDocumentPositionService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
 export type { IDragDropService } from "./elements/services/dragDropService/IDragDropService.js";
 export type { IElementInteractionService } from "./elements/services/elementInteractionService/IElementInteractionService.js";

package/dist/index.js

@@ -26,6 +26,7 @@ export * from "./elements/services/elementAtPointService/ElementAtPointService.j
 export * from "./elements/services/contentService/ContentService.js";
 export * from "./elements/services/copyPasteService/CopyPasteService.js";
 export * from "./elements/services/demoProviderService/DemoProviderService.js";
+export * from "./elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
 export * from "./elements/services/elementsService/JsonFileElementsService.js";
 export * from "./elements/services/elementsService/PreDefinedElementsService.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.214",
+  "version": "0.0.216",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -19,13 +19,13 @@
   "devDependencies": {
     "@adobe/css-tools": "^4.3.0-beta.1",
     "@node-projects/lean-he-esm": "^3.3.0",
-    "@node-projects/node-html-parser-esm": "^2.5.1",
+    "@node-projects/node-html-parser-esm": "^6.1.5",
     "@papyrs/stylo": "^0.0.42",
     "@types/codemirror": "^5.60.7",
     "@types/css-tree": "^2.3.1",
     "@types/jquery": "^3.5.16",
     "@types/jquery.fancytree": "0.0.7",
-    "@types/node": "^18.14.6",
+    "@types/node": "^18.15.0",
     "ace-builds": "^1.15.3",
     "codemirror": "^6.0.1",
     "css-tree": "^2.3.1",