@node-projects/web-component-designer 0.0.140 → 0.0.142

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

@@ -12,6 +12,7 @@ interface InstanceServiceNameMap {
 export declare class InstanceServiceContainer extends BaseServiceContainer<InstanceServiceNameMap> {
     designContext: IDesignContext;
     readonly designerCanvas: IDesignerCanvas;
+    designer: any;
     constructor(designerCanvas: IDesignerCanvas);
     get undoService(): IUndoService;
     get selectionService(): ISelectionService;

package/dist/elements/services/InstanceServiceContainer.js

@@ -3,6 +3,7 @@ import { DesignContext } from '../widgets/designerView/DesignContext';
 export class InstanceServiceContainer extends BaseServiceContainer {
     designContext = new DesignContext();
     designerCanvas;
+    designer; //usable to assign designer from outside
     constructor(designerCanvas) {
         super();
         this.designerCanvas = designerCanvas;

package/dist/elements/services/ServiceContainer.js

@@ -1,10 +1,10 @@
 import { BaseServiceContainer } from './BaseServiceContainer';
-import { CodeViewMonaco } from "../widgets/codeView/code-view-monaco";
 import { DemoView } from '../widgets/demoView/demoView';
 import { GlobalContext } from './GlobalContext';
+import { CodeViewSimple } from "../widgets/codeView/code-view-simple";
 export class ServiceContainer extends BaseServiceContainer {
     config = {
-        codeViewWidget: CodeViewMonaco,
+        codeViewWidget: CodeViewSimple,
         demoViewWidget: DemoView
     };
     designerExtensions = new Map();

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

@@ -0,0 +1,25 @@
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { ICodeView } from "./ICodeView";
+import { IActivateable } from '../../../interfaces/IActivateable';
+import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler';
+import { IUiCommand } from '../../../commandHandling/IUiCommand';
+export declare class CodeViewMonaco extends BaseCustomWebComponentLazyAppend implements ICodeView, IActivateable, IUiCommandHandler {
+    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;
+    ready(): Promise<void>;
+    focusEditor(): void;
+    activated(): void;
+    update(code: any): void;
+    getText(): string;
+    setSelection(position: IStringPosition): void;
+}

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

@@ -0,0 +1,119 @@
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { CommandType } from '../../../commandHandling/CommandType';
+export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
+    dispose() {
+        this._monacoEditor.dispose();
+    }
+    canvasElement;
+    elementsToPackages;
+    code;
+    onTextChanged = new TypedEvent();
+    _monacoEditor;
+    _editor;
+    static style = css `
+    :host {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+    `;
+    static template = html `
+      <div id="container" style="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;
+    }
+    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');
+        //@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,
+                value: this.code,
+                language: 'html',
+                minimap: {
+                    size: 'fill'
+                },
+                fixedOverflowWidgets: true
+            });
+            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.onTextChanged.emit(this._monacoEditor.getValue());
+                });
+            });
+        });
+    }
+    focusEditor() {
+        requestAnimationFrame(() => {
+            this.focus();
+            this._monacoEditor.focus();
+        });
+    }
+    activated() {
+        if (this._monacoEditor)
+            this._monacoEditor.layout();
+    }
+    update(code) {
+        this.code = 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 });
+        setTimeout(() => this._monacoEditor.revealLine(point1.lineNumber), 20);
+    }
+}
+customElements.define('node-projects-code-view-monaco', CodeViewMonaco);

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

@@ -0,0 +1,23 @@
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { ICodeView } from "./ICodeView";
+import { IActivateable } from '../../../interfaces/IActivateable';
+import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler';
+import { IUiCommand } from '../../../commandHandling/IUiCommand';
+export declare class CodeViewSimple extends BaseCustomWebComponentConstructorAppend implements ICodeView, IActivateable, IUiCommandHandler {
+    dispose(): void;
+    canvasElement: HTMLElement;
+    elementsToPackages: Map<string, string>;
+    onTextChanged: TypedEvent<string>;
+    private _text;
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    executeCommand(command: IUiCommand): void;
+    canExecuteCommand(command: IUiCommand): boolean;
+    ready(): Promise<void>;
+    focusEditor(): void;
+    activated(): void;
+    update(code: any): void;
+    getText(): string;
+    setSelection(position: IStringPosition): void;
+}

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

@@ -0,0 +1,55 @@
+import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export class CodeViewSimple extends BaseCustomWebComponentConstructorAppend {
+    dispose() {
+    }
+    canvasElement;
+    elementsToPackages;
+    onTextChanged = new TypedEvent();
+    _text;
+    static style = css `
+    :host {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+
+    textarea {
+      height: 100%;
+      width: 100%;
+      resize: none;
+      white-space: nowrap;
+      box-sizing: border-box;
+    }
+    `;
+    static template = html `
+      <div id="container" style="width: 100%; height: 100%; position: absolute;">
+        <textarea id="text"></textarea>
+      </div>
+  `;
+    executeCommand(command) {
+    }
+    canExecuteCommand(command) {
+        return false;
+    }
+    async ready() {
+        this._text = this._getDomElement('text');
+    }
+    focusEditor() {
+        requestAnimationFrame(() => {
+            this.focus();
+            this._text.focus();
+        });
+    }
+    activated() {
+    }
+    update(code) {
+        this._text.value = code;
+    }
+    getText() {
+        return this._text.value;
+    }
+    setSelection(position) {
+        this._text.setSelectionRange(position.start, position.start + position.length);
+    }
+}
+customElements.define('node-projects-code-view-simple', CodeViewSimple);

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

@@ -465,8 +465,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._updateTransform();
         this._fillCalculationrects();
         this.onZoomFactorChanged.emit(this._zoomFactor);
-        if (refreshExtensions)
+        if (refreshExtensions) {
             this.extensionManager.refreshAllAppliedExtentions();
+            setTimeout(() => this.extensionManager.refreshAllAppliedExtentions(), 200);
+        }
     }
     _updateTransform() {
         this._scaleFactor = this._zoomFactor;

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

@@ -10,12 +10,7 @@ export class InvisibleDivExtension extends AbstractExtension {
     }
     refresh() {
         const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
-        const computedStyle = getComputedStyle(this.extendedItem.element);
-        const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
-        const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
-        const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
-        const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
-        this._rect = this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-invisible-div', this._rect, OverlayLayer.Background);
+        this._rect = this._drawRect(itemRect.x, itemRect.y, itemRect.width, itemRect.height, 'svg-invisible-div', this._rect, OverlayLayer.Background);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -93,7 +93,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
         }
     }
     createElements(designItem) {
-        if (this._propertiesService.listNeedsRefresh(designItem) || this._propertyMap.size == 0) {
+        if (this._propertiesService && (this._propertiesService.listNeedsRefresh(designItem)) || this._propertyMap.size == 0) {
             DomHelper.removeAllChildnodes(this._div);
             this._propertyMap.clear();
             if (this._propertiesService) {

package/dist/index.d.ts

@@ -215,6 +215,7 @@ export type { ICodeView } from "./elements/widgets/codeView/ICodeView.js";
 export * from "./elements/widgets/codeView/code-view-monaco.js";
 export * from "./elements/widgets/codeView/code-view-ace.js";
 export * from "./elements/widgets/codeView/code-view-code-mirror.js";
+export * from "./elements/widgets/codeView/code-view-simple.js";
 export * from "./elements/documentContainer.js";
 export * from "./enums/EventNames.js";
 export * from "./enums/PointerActionType.js";

package/dist/index.js

@@ -167,6 +167,7 @@ export * from "./elements/widgets/treeView/treeViewExtended.js";
 export * from "./elements/widgets/codeView/code-view-monaco.js";
 export * from "./elements/widgets/codeView/code-view-ace.js";
 export * from "./elements/widgets/codeView/code-view-code-mirror.js";
+export * from "./elements/widgets/codeView/code-view-simple.js";
 export * from "./elements/documentContainer.js";
 export * from "./enums/EventNames.js";
 export * from "./enums/PointerActionType.js";

package/package.json

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