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

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

@@ -1,24 +1,24 @@
-import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { ICodeView } from './ICodeView.js';
-import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
-import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
-import { IDisposable } from '../../../interfaces/IDisposable.js';
-export declare class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend implements ICodeView, IDisposable {
-    canvasElement: HTMLElement;
-    elementsToPackages: Map<string, string>;
-    code: string;
-    onTextChanged: TypedEvent<string>;
-    private _codeMirrorEditor;
-    private _editor;
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    constructor();
-    dispose(): void;
-    executeCommand(command: IUiCommand): void;
-    canExecuteCommand(command: IUiCommand): boolean;
-    focusEditor(): void;
-    ready(): void;
-    update(code: any): void;
-    getText(): string;
-    setSelection(position: IStringPosition): void;
-}
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { ICodeView } from './ICodeView.js';
+import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
+import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
+import { IDisposable } from '../../../interfaces/IDisposable.js';
+export declare class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend implements ICodeView, IDisposable {
+    canvasElement: HTMLElement;
+    elementsToPackages: Map<string, string>;
+    code: string;
+    onTextChanged: TypedEvent<string>;
+    private _codeMirrorEditor;
+    private _editor;
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    constructor();
+    dispose(): void;
+    executeCommand(command: IUiCommand): void;
+    canExecuteCommand(command: IUiCommand): boolean;
+    focusEditor(): void;
+    ready(): void;
+    update(code: any): void;
+    getText(): string;
+    setSelection(position: IStringPosition): void;
+}

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

@@ -1,104 +1,105 @@
-import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { CommandType } from '../../../commandHandling/CommandType.js';
-export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
-    canvasElement;
-    elementsToPackages;
-    code;
-    onTextChanged = new TypedEvent();
-    _codeMirrorEditor;
-    _editor;
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { CommandType } from '../../../commandHandling/CommandType.js';
+class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
+    canvasElement;
+    elementsToPackages;
+    code;
+    onTextChanged = new TypedEvent();
+    _codeMirrorEditor;
+    _editor;
     static style = css `
     :host {
       display: block;
       height: 100%;
       width: 100%;
-    }`;
+    }`;
     static template = html `
     <div  style="width: 100%; height: 100%;">
       <div id="textarea"></div>
-    </div>`;
-    constructor() {
-        super();
-        //@ts-ignore
-        if (window.importShim)
-            //@ts-ignore
-            importShim("./codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
-        else
-            //@ts-ignore
-            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');
-    }
-    dispose() {
-    }
-    executeCommand(command) {
-        switch (command.type) {
-            case CommandType.undo:
-                this._codeMirrorEditor.undo();
-                break;
-            case CommandType.redo:
-                this._codeMirrorEditor.redo();
-                break;
-            case CommandType.copy:
-                const text = this._codeMirrorEditor.getSelection();
-                navigator.clipboard.writeText(text);
-                break;
-            case CommandType.paste:
-                navigator.clipboard.readText().then(text => {
-                    this._codeMirrorEditor.replaceSelection(text);
-                });
-                break;
-            case CommandType.cut:
-                const textc = this._codeMirrorEditor.getSelection();
-                navigator.clipboard.writeText(textc);
-                this._codeMirrorEditor.replaceSelection('');
-                break;
-            case CommandType.delete:
-                this._codeMirrorEditor.replaceSelection('');
-                break;
-        }
-    }
-    canExecuteCommand(command) {
-        switch (command.type) {
-            case CommandType.undo:
-            case CommandType.redo:
-            case CommandType.copy:
-            case CommandType.paste:
-            case CommandType.cut:
-            case CommandType.delete:
-                return true;
-        }
-        return false;
-    }
-    focusEditor() {
-        requestAnimationFrame(() => {
-            this.focus();
-            this._codeMirrorEditor.focus();
-        });
-    }
-    ready() {
-        const config = {
-            tabSize: 3,
-            lineNumbers: true,
-            mode: 'xml',
-            //@ts-ignore
-            htmlMode: true
-        };
-        //@ts-ignore
-        this._codeMirrorEditor = CodeMirror(this._editor, config);
-        this._codeMirrorEditor.setSize('100%', '100%');
-        this._codeMirrorEditor.on('change', () => this.onTextChanged.emit(this._codeMirrorEditor.getValue()));
-    }
-    update(code) {
-        this._codeMirrorEditor.setValue(code);
-    }
-    getText() {
-        return this._codeMirrorEditor.getValue();
-    }
-    setSelection(position) {
-        let point1 = this._codeMirrorEditor.posFromIndex(position.start);
-        let point2 = this._codeMirrorEditor.posFromIndex(position.start + position.length);
-        this._codeMirrorEditor.setSelection(point1, point2);
-    }
-}
-customElements.define('node-projects-code-view-code-mirror', CodeViewCodeMirror);
+    </div>`;
+    constructor() {
+        super();
+        //@ts-ignore
+        if (window.importShim)
+            //@ts-ignore
+            importShim("./codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        else
+            //@ts-ignore
+            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');
+    }
+    dispose() {
+    }
+    executeCommand(command) {
+        switch (command.type) {
+            case CommandType.undo:
+                this._codeMirrorEditor.undo();
+                break;
+            case CommandType.redo:
+                this._codeMirrorEditor.redo();
+                break;
+            case CommandType.copy:
+                const text = this._codeMirrorEditor.getSelection();
+                navigator.clipboard.writeText(text);
+                break;
+            case CommandType.paste:
+                navigator.clipboard.readText().then(text => {
+                    this._codeMirrorEditor.replaceSelection(text);
+                });
+                break;
+            case CommandType.cut:
+                const textc = this._codeMirrorEditor.getSelection();
+                navigator.clipboard.writeText(textc);
+                this._codeMirrorEditor.replaceSelection('');
+                break;
+            case CommandType.delete:
+                this._codeMirrorEditor.replaceSelection('');
+                break;
+        }
+    }
+    canExecuteCommand(command) {
+        switch (command.type) {
+            case CommandType.undo:
+            case CommandType.redo:
+            case CommandType.copy:
+            case CommandType.paste:
+            case CommandType.cut:
+            case CommandType.delete:
+                return true;
+        }
+        return false;
+    }
+    focusEditor() {
+        requestAnimationFrame(() => {
+            this.focus();
+            this._codeMirrorEditor.focus();
+        });
+    }
+    ready() {
+        const config = {
+            tabSize: 3,
+            lineNumbers: true,
+            mode: 'xml',
+            //@ts-ignore
+            htmlMode: true
+        };
+        //@ts-ignore
+        this._codeMirrorEditor = CodeMirror(this._editor, config);
+        this._codeMirrorEditor.setSize('100%', '100%');
+        this._codeMirrorEditor.on('change', () => this.onTextChanged.emit(this._codeMirrorEditor.getValue()));
+    }
+    update(code) {
+        this._codeMirrorEditor.setValue(code);
+    }
+    getText() {
+        return this._codeMirrorEditor.getValue();
+    }
+    setSelection(position) {
+        let point1 = this._codeMirrorEditor.posFromIndex(position.start);
+        let point2 = this._codeMirrorEditor.posFromIndex(position.start + position.length);
+        this._codeMirrorEditor.setSelection(point1, point2);
+    }
+}
+export { CodeViewCodeMirror };
+customElements.define('node-projects-code-view-code-mirror', CodeViewCodeMirror);

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

@@ -1,27 +1,27 @@
-import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { ICodeView } from './ICodeView.js';
-import { IActivateable } from '../../../interfaces/IActivateable.js';
-import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
-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>;
-    code: string;
-    onTextChanged: TypedEvent<string>;
-    private _monacoEditor;
-    private _editor;
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    executeCommand(command: IUiCommand): void;
-    canExecuteCommand(command: IUiCommand): boolean;
-    static initMonacoEditor(): Promise<void>;
-    ready(): Promise<void>;
-    focusEditor(): void;
-    activated(): void;
-    update(code: any): void;
-    getText(): any;
-    setSelection(position: IStringPosition): void;
-}
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { ICodeView } from './ICodeView.js';
+import { IActivateable } from '../../../interfaces/IActivateable.js';
+import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
+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>;
+    code: string;
+    onTextChanged: TypedEvent<string>;
+    private _monacoEditor;
+    private _editor;
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    executeCommand(command: IUiCommand): void;
+    canExecuteCommand(command: IUiCommand): boolean;
+    static initMonacoEditor(): Promise<void>;
+    ready(): Promise<void>;
+    focusEditor(): void;
+    activated(): void;
+    update(code: any): void;
+    getText(): any;
+    setSelection(position: IStringPosition): void;
+}

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

@@ -1,168 +1,170 @@
-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();
-    }
-    canvasElement;
-    elementsToPackages;
-    code;
-    onTextChanged = new TypedEvent();
-    //@ts-ignore
-    _monacoEditor;
-    _editor;
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { CommandType } from '../../../commandHandling/CommandType.js';
+class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
+    static _initalized;
+    dispose() {
+        this._monacoEditor?.dispose();
+    }
+    canvasElement;
+    elementsToPackages;
+    code;
+    onTextChanged = new TypedEvent();
+    //@ts-ignore
+    _monacoEditor;
+    _editor;
     static style = css `
     :host {
       display: block;
       height: 100%;
       width: 100%;
     }
-    `;
+    `;
     static template = html `
       <div id="container" style="overflow: hidden; width: 100%; height: 100%; position: absolute;"></div>
-  `;
-    executeCommand(command) {
-        switch (command.type) {
-            case CommandType.undo:
-                this._monacoEditor.trigger('source', 'undo', null);
-                break;
-            case CommandType.redo:
-                this._monacoEditor.trigger('source', 'redo', null);
-                break;
-            case CommandType.copy:
-                this._monacoEditor.trigger('source', 'editor.action.clipboardCopyAction', null);
-                break;
-            case CommandType.paste:
-                this._monacoEditor.trigger('source', 'editor.action.clipboardPasteAction', null);
-                break;
-            case CommandType.cut:
-                break;
-            case CommandType.delete:
-                break;
-        }
-    }
-    canExecuteCommand(command) {
-        switch (command.type) {
-            case CommandType.undo:
-            case CommandType.redo:
-            case CommandType.copy:
-            case CommandType.paste:
-            case CommandType.cut:
-            case CommandType.delete:
-                return true;
-        }
-        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
-        if (window.importShim)
-            //@ts-ignore
-            style = await importShim("monaco-editor/min/vs/editor/editor.main.css", { assert: { type: 'css' } });
-        else
-            //@ts-ignore
-            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');
-        await CodeViewMonaco.initMonacoEditor();
-        const resizeObserver = new ResizeObserver(() => {
-            if (this._editor.offsetWidth > 0) {
-                //@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'
-                    }
-                });
-                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();
-            if (this._monacoEditor)
-                this._monacoEditor.focus();
-        });
-    }
-    activated() {
-        if (this._monacoEditor)
-            if (this._monacoEditor)
-                this._monacoEditor.layout();
-    }
-    update(code) {
-        this.code = code;
-        if (this._monacoEditor) {
-            if (this._monacoEditor)
-                this._monacoEditor.setValue(code);
-        }
-    }
-    getText() {
-        return this._monacoEditor.getValue();
-    }
-    setSelection(position) {
-        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
-            this._monacoEditor.revealRangeInCenterIfOutsideViewport(new monaco.Range(point1.lineNumber, point1.column, point2.lineNumber, point2.column), 1);
-        }
-    }
-}
-customElements.define('node-projects-code-view-monaco', CodeViewMonaco);
+  `;
+    executeCommand(command) {
+        switch (command.type) {
+            case CommandType.undo:
+                this._monacoEditor.trigger('source', 'undo', null);
+                break;
+            case CommandType.redo:
+                this._monacoEditor.trigger('source', 'redo', null);
+                break;
+            case CommandType.copy:
+                this._monacoEditor.trigger('source', 'editor.action.clipboardCopyAction', null);
+                break;
+            case CommandType.paste:
+                this._monacoEditor.trigger('source', 'editor.action.clipboardPasteAction', null);
+                break;
+            case CommandType.cut:
+                break;
+            case CommandType.delete:
+                break;
+        }
+    }
+    canExecuteCommand(command) {
+        switch (command.type) {
+            case CommandType.undo:
+            case CommandType.redo:
+            case CommandType.copy:
+            case CommandType.paste:
+            case CommandType.cut:
+            case CommandType.delete:
+                return true;
+        }
+        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
+        if (window.importShim)
+            //@ts-ignore
+            style = await importShim("monaco-editor/min/vs/editor/editor.main.css", { assert: { type: 'css' } });
+        else
+            //@ts-ignore
+            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');
+        await CodeViewMonaco.initMonacoEditor();
+        const resizeObserver = new ResizeObserver(() => {
+            if (this._editor.offsetWidth > 0) {
+                //@ts-ignore
+                this._monacoEditor = monaco.editor.create(this._editor, {
+                    automaticLayout: true,
+                    wordWrapColumn: 1000,
+                    //wordWrap: 'wordWrapColumn',
+                    fontLigatures: '',
+                    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();
+            if (this._monacoEditor)
+                this._monacoEditor.focus();
+        });
+    }
+    activated() {
+        if (this._monacoEditor)
+            if (this._monacoEditor)
+                this._monacoEditor.layout();
+    }
+    update(code) {
+        this.code = code;
+        if (this._monacoEditor) {
+            if (this._monacoEditor)
+                this._monacoEditor.setValue(code);
+        }
+    }
+    getText() {
+        return this._monacoEditor.getValue();
+    }
+    setSelection(position) {
+        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
+            this._monacoEditor.revealRangeInCenterIfOutsideViewport(new monaco.Range(point1.lineNumber, point1.column, point2.lineNumber, point2.column), 1);
+        }
+    }
+}
+export { CodeViewMonaco };
+customElements.define('node-projects-code-view-monaco', CodeViewMonaco);