@node-projects/web-component-designer 0.0.188 → 0.0.190

package/dist/elements/item/DesignItem.js

@@ -407,7 +407,7 @@ export class DesignItem {
     _removeChildInternal(designItem) {
         if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
             designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
-        designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtensions([designItem]);
+        designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtensions([designItem], true);
         const index = this._childArray.indexOf(designItem);
         if (index > -1) {
             this._childArray.splice(index, 1);

package/dist/elements/widgets/codeView/code-view-monaco.d.ts

@@ -5,6 +5,7 @@ import { IStringPosition } from '../../services/htmlWriterService/IStringPositio
 import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
 import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
 export declare class CodeViewMonaco extends BaseCustomWebComponentLazyAppend implements ICodeView, IActivateable, IUiCommandHandler {
+    private static _initalized;
     dispose(): void;
     canvasElement: HTMLElement;
     elementsToPackages: Map<string, string>;
@@ -16,6 +17,7 @@ export declare class CodeViewMonaco extends BaseCustomWebComponentLazyAppend imp
     static readonly template: HTMLTemplateElement;
     executeCommand(command: IUiCommand): void;
     canExecuteCommand(command: IUiCommand): boolean;
+    static initMonacoEditor(): Promise<void>;
     ready(): Promise<void>;
     focusEditor(): void;
     activated(): void;

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

@@ -1,6 +1,7 @@
 import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { CommandType } from '../../../commandHandling/CommandType.js';
 export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
+    static _initalized;
     dispose() {
         this._monacoEditor.dispose();
     }
@@ -53,6 +54,35 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
         }
         return false;
     }
+    static initMonacoEditor() {
+        return new Promise(async (resolve) => {
+            if (!CodeViewMonaco._initalized) {
+                CodeViewMonaco._initalized = true;
+                //@ts-ignore
+                require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' } });
+                //@ts-ignore
+                require(['vs/editor/editor.main'], () => {
+                    //@ts-ignore
+                    monaco.editor.defineTheme('webComponentDesignerTheme', {
+                        base: 'vs',
+                        inherit: true,
+                        //@ts-ignore
+                        rules: [{ background: 'EDF9FA' }],
+                        colors: {
+                            'editor.selectionBackground': '#add6ff',
+                            'editor.inactiveSelectionBackground': '#add6ff'
+                        }
+                    });
+                    //@ts-ignore
+                    monaco.editor.setTheme('webComponentDesignerTheme');
+                    resolve();
+                });
+            }
+            else {
+                resolve();
+            }
+        });
+    }
     async ready() {
         let style;
         //@ts-ignore
@@ -64,80 +94,75 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
             style = await import("monaco-editor/min/vs/editor/editor.main.css", { assert: { type: 'css' } });
         this.shadowRoot.adoptedStyleSheets = [style.default, this.constructor.style];
         this._editor = this._getDomElement('container');
-        //@ts-ignore
-        require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' } });
-        //@ts-ignore
-        require(['vs/editor/editor.main'], () => {
-            //@ts-ignore
-            this._monacoEditor = monaco.editor.create(this._editor, {
-                automaticLayout: true,
-                wordWrapColumn: 1000,
-                wordWrap: 'wordWrapColumn',
-                value: this.code,
-                language: 'html',
-                minimap: {
-                    size: 'fill'
-                },
-                fixedOverflowWidgets: true,
-                scrollbar: {
-                    useShadows: false,
-                    verticalHasArrows: true,
-                    horizontalHasArrows: true,
-                    vertical: 'visible',
-                    horizontal: 'visible'
-                }
-            });
-            //@ts-ignore
-            monaco.editor.defineTheme('myTheme', {
-                base: 'vs',
-                inherit: true,
+        await CodeViewMonaco.initMonacoEditor();
+        const resizeObserver = new ResizeObserver(() => {
+            if (this._editor.offsetWidth > 0) {
                 //@ts-ignore
-                rules: [{ background: 'EDF9FA' }],
-                colors: {
-                    'editor.selectionBackground': '#add6ff',
-                    'editor.inactiveSelectionBackground': '#add6ff'
-                }
-            });
-            //@ts-ignore
-            monaco.editor.setTheme('myTheme');
-            this._monacoEditor.layout();
-            let changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
-                this.onTextChanged.emit(this._monacoEditor.getValue());
-            });
-            this._monacoEditor.onDidChangeModel(e => {
-                changeContentListener.dispose();
-                changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
+                this._monacoEditor = monaco.editor.create(this._editor, {
+                    automaticLayout: true,
+                    wordWrapColumn: 1000,
+                    wordWrap: 'wordWrapColumn',
+                    value: this.code,
+                    language: 'html',
+                    minimap: {
+                        size: 'fill'
+                    },
+                    fixedOverflowWidgets: true,
+                    scrollbar: {
+                        useShadows: false,
+                        verticalHasArrows: true,
+                        horizontalHasArrows: true,
+                        vertical: 'visible',
+                        horizontal: 'visible'
+                    }
+                });
+                let changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
                     this.onTextChanged.emit(this._monacoEditor.getValue());
                 });
-            });
+                this._monacoEditor.onDidChangeModel(e => {
+                    changeContentListener.dispose();
+                    changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
+                        this.onTextChanged.emit(this._monacoEditor.getValue());
+                    });
+                });
+                this._monacoEditor.focus();
+                resizeObserver.disconnect();
+            }
+            ;
         });
+        resizeObserver.observe(this._editor);
     }
     focusEditor() {
         requestAnimationFrame(() => {
             this.focus();
-            this._monacoEditor.focus();
+            if (this._monacoEditor)
+                this._monacoEditor.focus();
         });
     }
     activated() {
         if (this._monacoEditor)
-            this._monacoEditor.layout();
+            if (this._monacoEditor)
+                this._monacoEditor.layout();
     }
     update(code) {
         this.code = code;
         if (this._monacoEditor) {
-            this._monacoEditor.setValue(code);
+            if (this._monacoEditor)
+                this._monacoEditor.setValue(code);
         }
     }
     getText() {
         return this._monacoEditor.getValue();
     }
     setSelection(position) {
-        let model = this._monacoEditor.getModel();
-        let point1 = model.getPositionAt(position.start);
-        let point2 = model.getPositionAt(position.start + position.length);
-        this._monacoEditor.setSelection({ startLineNumber: point1.lineNumber, startColumn: point1.column, endLineNumber: point2.lineNumber, endColumn: point2.column });
-        //@ts-ignore
-        setTimeout(() => this._monacoEditor.revealRangeInCenter(new monaco.Range(point1.lineNumber, point1.column, point2.lineNumber, point2.column), 1));
+        if (this._monacoEditor) {
+            let model = this._monacoEditor.getModel();
+            let point1 = model.getPositionAt(position.start);
+            let point2 = model.getPositionAt(position.start + position.length);
+            this._monacoEditor.setSelection({ startLineNumber: point1.lineNumber, startColumn: point1.column, endLineNumber: point2.lineNumber, endColumn: point2.column });
+            //@ts-ignore
+            setTimeout(() => this._monacoEditor.revealRangeInCenter(new monaco.Range(point1.lineNumber, point1.column, point2.lineNumber, point2.column), 1));
+        }
     }
 }
 customElements.define('node-projects-code-view-monaco', CodeViewMonaco);

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

@@ -12,7 +12,7 @@ export declare class ExtensionManager implements IExtensionManager {
     applyExtension(designItem: IDesignItem, extensionType: ExtensionType, recursive?: boolean): IDesignerExtension[];
     applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, recursive?: boolean): void;
     removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
-    removeExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): void;
+    removeExtensions(designItems: IDesignItem[], includeChildren: boolean, extensionType?: ExtensionType): void;
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
     refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, ignoredExtension?: any): void;
     refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: any): void;

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

@@ -22,7 +22,7 @@ export class ExtensionManager {
                     this.applyExtensions(Array.from(this.designerCanvas.rootDesignItem.children()), ExtensionType.Permanent, true);
                     break;
                 case 'removed':
-                    this.removeExtensions(contentChanged.designItems, ExtensionType.Permanent);
+                    this.removeExtensions(contentChanged.designItems, true, ExtensionType.Permanent);
                     break;
             }
         });
@@ -33,7 +33,7 @@ export class ExtensionManager {
                 const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.oldSelectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
                 this.removeExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
                 this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelection);
-                this.removeExtensions(selectionChangedEvent.oldSelectedElements, ExtensionType.Selection);
+                this.removeExtensions(selectionChangedEvent.oldSelectedElements, false, ExtensionType.Selection);
             }
         }
         if (selectionChangedEvent.selectedElements && selectionChangedEvent.selectedElements.length) {
@@ -154,10 +154,13 @@ export class ExtensionManager {
             }
         }
     }
-    removeExtensions(designItems, extensionType) {
+    removeExtensions(designItems, includeChildren, extensionType) {
         if (designItems) {
             if (extensionType) {
                 for (let i of designItems) {
+                    if (includeChildren && i.hasChildren) {
+                        this.removeExtensions([...i.children()], true, extensionType);
+                    }
                     i.shouldAppliedDesignerExtensions.delete(extensionType);
                     let exts = i.appliedDesignerExtensions.get(extensionType);
                     if (exts) {
@@ -177,6 +180,9 @@ export class ExtensionManager {
             }
             else {
                 for (let i of designItems) {
+                    if (includeChildren && i.hasChildren) {
+                        this.removeExtensions([...i.children()], true, extensionType);
+                    }
                     i.shouldAppliedDesignerExtensions.clear();
                     for (let appE of i.appliedDesignerExtensions) {
                         for (let e of appE[1]) {

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

@@ -5,7 +5,7 @@ export interface IExtensionManager {
     applyExtension(designItem: IDesignItem, extensionType: ExtensionType, recursive?: boolean): IDesignerExtension[];
     applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, recursive?: boolean): any;
     removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
-    removeExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): any;
+    removeExtensions(designItems: IDesignItem[], includeChildren: boolean, extensionType?: ExtensionType): any;
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
     refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): any;
     refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: any): any;

package/package.json

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