@node-projects/web-component-designer 0.0.59 → 0.0.63

package/.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: jogibear9988

package/dist/commandHandling/CommandType.d.ts

@@ -21,5 +21,8 @@ export declare enum CommandType {
     'distributeHorizontal' = "distributeHorizontaly",
     'distributeVertical' = "distributeVertical",
     'setTool' = "setTool",
+    'setStrokeColor' = "setStrokeColor",
+    'setFillBrush' = "setFillBrush",
+    'setStrokeThickness' = "setStrokeThickness",
     'screenshot' = "screenshot"
 }

package/dist/commandHandling/CommandType.js

@@ -22,5 +22,8 @@ export var CommandType;
     CommandType["distributeHorizontal"] = "distributeHorizontaly";
     CommandType["distributeVertical"] = "distributeVertical";
     CommandType["setTool"] = "setTool";
+    CommandType["setStrokeColor"] = "setStrokeColor";
+    CommandType["setFillBrush"] = "setFillBrush";
+    CommandType["setStrokeThickness"] = "setStrokeThickness";
     CommandType["screenshot"] = "screenshot";
 })(CommandType || (CommandType = {}));

package/dist/elements/documentContainer.d.ts

@@ -7,6 +7,7 @@ import { IDemoView } from './widgets/demoView/IDemoView';
 import { IUiCommandHandler } from "../commandHandling/IUiCommandHandler";
 import { IUiCommand } from "../commandHandling/IUiCommand";
 import { IDisposable } from "../interfaces/IDisposable";
+import { ISelectionChangedEvent } from "./services/selectionService/ISelectionChangedEvent.js";
 export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend implements IUiCommandHandler, IDisposable {
     designerView: DesignerView;
     codeView: ICodeView & HTMLElement;
@@ -16,8 +17,17 @@ export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend
     private _content;
     private _tabControl;
     private _selectionPosition;
+    private _splitDiv;
+    private _designerDiv;
+    private _codeDiv;
+    private refreshInSplitViewDebounced;
+    private _disableChangeNotificationDesigner;
+    private _disableChangeNotificationEditor;
     static get style(): CSSStyleSheet;
     constructor(serviceContainer: ServiceContainer, content?: string);
+    refreshInSplitView(): Promise<void>;
+    designerSelectionChanged(e: ISelectionChangedEvent): void;
+    designerContentChanged(): void;
     dispose(): void;
     executeCommand(command: IUiCommand): void;
     canExecuteCommand(command: IUiCommand): boolean;

package/dist/elements/documentContainer.js

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend, css } from "@node-projects/base-custom-webcomponent";
+import { BaseCustomWebComponentLazyAppend, css, debounce } from "@node-projects/base-custom-webcomponent";
 import { DesignerTabControl } from "./controls/DesignerTabControl";
 import { DesignerView } from "./widgets/designerView/designerView";
 export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
@@ -10,6 +10,12 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     _content = '';
     _tabControl;
     _selectionPosition;
+    _splitDiv;
+    _designerDiv;
+    _codeDiv;
+    refreshInSplitViewDebounced;
+    _disableChangeNotificationDesigner;
+    _disableChangeNotificationEditor;
     static get style() {
         return css `
       div {
@@ -20,10 +26,16 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
       node-projects-designer-view {
         height: 100%;
         /*overflow: auto;*/
-      }`;
+      }
+      .split-div {
+        display: grid;
+        grid-template-rows: 1fr 1fr;
+      }
+      `;
     }
     constructor(serviceContainer, content) {
         super();
+        this.refreshInSplitViewDebounced = debounce(this.refreshInSplitView, 200);
         this._serviceContainer = serviceContainer;
         if (content != null)
             this._content = content;
@@ -32,12 +44,31 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         div.appendChild(this._tabControl);
         this.designerView = new DesignerView();
         this.designerView.setAttribute('exportparts', 'canvas');
-        this.designerView.title = 'Designer';
-        this._tabControl.appendChild(this.designerView);
+        this._designerDiv = document.createElement("div");
+        this._tabControl.appendChild(this._designerDiv);
+        this._designerDiv.title = 'Designer';
+        this._designerDiv.appendChild(this.designerView);
         this.designerView.initialize(this._serviceContainer);
+        this.designerView.instanceServiceContainer.selectionService.onSelectionChanged.on(e => this.designerSelectionChanged(e));
+        this.designerView.designerCanvas.onContentChanged.on(() => this.designerContentChanged());
         this.codeView = new serviceContainer.config.codeViewWidget();
-        this.codeView.title = 'Code';
-        this._tabControl.appendChild(this.codeView);
+        this._codeDiv = document.createElement("div");
+        this._tabControl.appendChild(this._codeDiv);
+        this._codeDiv.title = 'Code';
+        this._codeDiv.appendChild(this.codeView);
+        this.codeView.onTextChanged.on(text => {
+            if (!this._disableChangeNotificationDesigner) {
+                this._disableChangeNotificationEditor = true;
+                if (this._tabControl.selectedIndex === 2) {
+                    this._content = text;
+                    this.refreshInSplitViewDebounced();
+                }
+            }
+        });
+        this._splitDiv = document.createElement("div");
+        this._splitDiv.title = 'Split';
+        this._splitDiv.className = 'split-div';
+        this._tabControl.appendChild(this._splitDiv);
         this.demoView = new serviceContainer.config.demoViewWidget();
         this.demoView.title = 'Preview';
         this._tabControl.appendChild(this.demoView);
@@ -46,6 +77,40 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
             this._tabControl.selectedIndex = 0;
         });
     }
+    async refreshInSplitView() {
+        await this.designerView.parseHTML(this._content);
+        this._disableChangeNotificationEditor = false;
+    }
+    designerSelectionChanged(e) {
+        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;
+            }
+        }
+    }
+    designerContentChanged() {
+        if (!this._disableChangeNotificationEditor) {
+            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.codeView.update(this._content);
+                if (primarySelection) {
+                    this._selectionPosition = designItemsAssignmentList.get(primarySelection);
+                    if (this._selectionPosition)
+                        this.codeView.setSelection(this._selectionPosition);
+                    this._selectionPosition = null;
+                }
+            }
+            this._disableChangeNotificationDesigner = false;
+        }
+    }
     dispose() {
         this.codeView.dispose();
     }
@@ -69,7 +134,9 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
                 this.designerView.parseHTML(this._content);
             else if (this._tabControl.selectedIndex === 1)
                 this.codeView.update(this._content);
-            else if (this._tabControl.selectedIndex === 2)
+            else if (this._tabControl.selectedIndex === 2) {
+            }
+            else if (this._tabControl.selectedIndex === 3)
                 this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content);
         }
     }
@@ -91,11 +158,16 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
                 this._content = this.designerView.getHTML(designItemsAssignmentList);
                 this._selectionPosition = designItemsAssignmentList.get(primarySelection);
             }
-            else if (i.oldIndex === 1)
+            else if (i.oldIndex === 1) {
                 this._content = this.codeView.getText();
-            if (i.newIndex === 0)
+            }
+            else if (i.oldIndex === 2) {
+                this._designerDiv.appendChild(this.designerView);
+                this._codeDiv.appendChild(this.codeView);
+            }
+            if (i.newIndex === 0 || i.newIndex === 2)
                 this.designerView.parseHTML(this._content);
-            else if (i.newIndex === 1) {
+            if (i.newIndex === 1 || i.newIndex === 2) {
                 this.codeView.update(this._content);
                 if (this._selectionPosition) {
                     this.codeView.setSelection(this._selectionPosition);
@@ -105,8 +177,13 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
                     this.codeView.focusEditor();
                 }
             }
-            else if (i.newIndex === 2)
+            if (i.newIndex === 2) {
+                this._splitDiv.appendChild(this.designerView);
+                this._splitDiv.appendChild(this.codeView);
+            }
+            if (i.newIndex === 3) {
                 this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content);
+            }
         });
         if (this._content)
             this.content = this._content;

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -45,6 +45,9 @@ import { DragDropService } from './dragDropService/DragDropService';
 import { EditTextExtensionProvider } from '../widgets/designerView/extensions/EditText/EditTextExtensionProvider.js';
 import { CopyPasteService } from './copyPasteService/CopyPasteService';
 import { DefaultModelCommandService } from './modelCommandService/DefaultModelCommandService';
+import { ButtonSeperatorProvider } from '../widgets/designerView/ButtonSeperatorProvider';
+import { GridExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/GridExtensionDesignViewConfigButtons';
+import { DemoProviderService } from './demoProviderService/DemoProviderService';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -65,6 +68,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("dragDropService", new DragDropService());
     serviceContainer.register("copyPasteService", new CopyPasteService());
     serviceContainer.register("modelCommandService", new DefaultModelCommandService());
+    serviceContainer.register("demoProviderService", new DemoProviderService());
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
         new ResizeExtensionProvider(false),
         new InvisibleDivExtensionProvider()
@@ -106,6 +110,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerTools.set(NamedTools.MagicWandSelector, new MagicWandSelectorTool());
     serviceContainer.designerTools.set(NamedTools.PickColor, new PickColorTool());
     serviceContainer.designerTools.set(NamedTools.Text, new TextTool());
+    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons());
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),
         new ZMoveContextMenu(),

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

@@ -5,6 +5,7 @@ export declare class GlobalContext {
     private _serviceContainer;
     private _tool;
     private _strokeColor;
+    private _strokeThickness;
     private _fillBrush;
     constructor(serviceContainer: ServiceContainer);
     set tool(tool: ITool);
@@ -14,6 +15,9 @@ export declare class GlobalContext {
     set strokeColor(strokeColor: string);
     get strokeColor(): string;
     readonly onStrokeColorChanged: TypedEvent<PropertyChangedArgs<string>>;
+    set strokeThickness(strokeThickness: string);
+    get strokeThickness(): string;
+    readonly onStrokeThicknessChanged: TypedEvent<PropertyChangedArgs<string>>;
     set fillBrush(fillBrush: string);
     get fillBrush(): string;
     readonly onFillBrushChanged: TypedEvent<PropertyChangedArgs<string>>;

package/dist/elements/services/GlobalContext.js

@@ -5,6 +5,7 @@ export class GlobalContext {
     _serviceContainer;
     _tool;
     _strokeColor = 'black';
+    _strokeThickness = '3';
     _fillBrush = 'transparent';
     constructor(serviceContainer) {
         this._serviceContainer = serviceContainer;
@@ -36,6 +37,17 @@ export class GlobalContext {
         return this._strokeColor;
     }
     onStrokeColorChanged = new TypedEvent();
+    set strokeThickness(strokeThickness) {
+        if (this._strokeThickness !== strokeThickness) {
+            const oldStrokeThickness = this._strokeThickness;
+            this._strokeThickness = strokeThickness;
+            this.onStrokeThicknessChanged.emit(new PropertyChangedArgs(strokeThickness, oldStrokeThickness));
+        }
+    }
+    get strokeThickness() {
+        return this._strokeThickness;
+    }
+    onStrokeThicknessChanged = new TypedEvent();
     set fillBrush(fillBrush) {
         this._fillBrush = fillBrush;
         if (this._fillBrush !== fillBrush) {

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

@@ -23,6 +23,8 @@ import { IDragDropService } from './dragDropService/IDragDropService';
 import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js";
 import { IDesignerPointerExtensionProvider } from "../widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
 import { IModelCommandService } from "./modelCommandService/IModelCommandService.js";
+import { IDesignViewConfigButtonsProvider } from "../widgets/designerView/IDesignViewConfigButtonsProvider.js";
+import { IDemoProviderService } from "./demoProviderService/IDemoProviderService.js";
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -39,6 +41,7 @@ interface ServiceNameMap {
     "dragDropService": IDragDropService;
     "copyPasteService": ICopyPasteService;
     "modelCommandService": IModelCommandService;
+    "demoProviderService": IDemoProviderService;
 }
 export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMap> {
     readonly config: {
@@ -46,6 +49,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
         demoViewWidget: new (...args: any[]) => IDemoView & HTMLElement;
     };
     readonly designerExtensions: Map<(ExtensionType | string), IDesignerExtensionProvider[]>;
+    readonly designViewConfigButtons: IDesignViewConfigButtonsProvider[];
     readonly designerPointerExtensions: IDesignerPointerExtensionProvider[];
     designerContextMenuExtensions: IContextMenuExtension[];
     readonly globalContext: GlobalContext;
@@ -65,5 +69,6 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get dragDropService(): IDragDropService;
     get copyPasteService(): ICopyPasteService;
     get modelCommandService(): IModelCommandService;
+    get demoProviderService(): IDemoProviderService;
 }
 export {};

package/dist/elements/services/ServiceContainer.js

@@ -8,6 +8,7 @@ export class ServiceContainer extends BaseServiceContainer {
         demoViewWidget: DemoView
     };
     designerExtensions = new Map();
+    designViewConfigButtons = [];
     designerPointerExtensions = [];
     designerContextMenuExtensions;
     globalContext = new GlobalContext(this);
@@ -57,4 +58,7 @@ export class ServiceContainer extends BaseServiceContainer {
     get modelCommandService() {
         return this.getLastService('modelCommandService');
     }
+    get demoProviderService() {
+        return this.getLastService('demoProviderService');
+    }
 }

package/dist/elements/services/demoProviderService/DemoProviderService.d.ts

@@ -0,0 +1,6 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+import { IDemoProviderService } from "./IDemoProviderService.js";
+export declare class DemoProviderService implements IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): Promise<void>;
+}

package/dist/elements/services/demoProviderService/DemoProviderService.js

@@ -0,0 +1,28 @@
+import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
+export class DemoProviderService {
+    provideDemo(container, serviceContainer, instanceServiceContainer, code) {
+        return new Promise(resolve => {
+            const iframe = document.createElement('iframe');
+            iframe.style.width = '100%';
+            iframe.style.height = '100%';
+            iframe.style.border = 'none';
+            iframe.style.display = 'none';
+            DomHelper.removeAllChildnodes(container);
+            container.appendChild(iframe);
+            iframe.onload = () => {
+                iframe.style.display = 'block';
+                resolve();
+            };
+            const doc = iframe.contentWindow.document;
+            doc.open();
+            doc.write('<script type="module">');
+            for (let i of instanceServiceContainer.designContext.imports) {
+                doc.write("import '" + i + "';");
+            }
+            doc.write("document.body.style.display='';");
+            doc.write('</script>');
+            doc.write('<body style="display:none">' + code + '</body>');
+            doc.close();
+        });
+    }
+}

package/dist/elements/services/demoProviderService/IDemoProviderService.d.ts

@@ -0,0 +1,5 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+export interface IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): any;
+}

package/dist/elements/services/demoProviderService/IDemoProviderService.js

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

package/dist/elements/services/undoService/UndoService.js

@@ -42,6 +42,7 @@ export class UndoService {
             this._transactionStack[this._transactionStack.length - 1].execute(item);
         }
         this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
+        this._designerCanvas.onContentChanged.emit();
     }
     clear() {
         this._undoStack = [];
@@ -63,6 +64,7 @@ export class UndoService {
             throw err;
         }
         this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
+        this._designerCanvas.onContentChanged.emit();
     }
     redo() {
         if (!this.canRedo())
@@ -79,6 +81,7 @@ export class UndoService {
             throw err;
         }
         this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
+        this._designerCanvas.onContentChanged.emit();
     }
     canUndo() {
         return this._undoStack.length > 0;

package/dist/elements/widgets/codeView/ICodeView.d.ts

@@ -1,9 +1,11 @@
 import { IUiCommandHandler } from "../../../commandHandling/IUiCommandHandler";
 import { IDisposable } from "../../../interfaces/IDisposable";
 import { IStringPosition } from "../../services/htmlWriterService/IStringPosition";
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 export interface ICodeView extends IUiCommandHandler, IDisposable {
     update(code: string): any;
     getText(): any;
     setSelection(position: IStringPosition): any;
     focusEditor(): any;
+    onTextChanged: TypedEvent<string>;
 }

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

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { ICodeView } from "./ICodeView";
 import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
 import { IUiCommand } from '../../../commandHandling/IUiCommand';
@@ -7,6 +7,7 @@ export declare class CodeViewAce extends BaseCustomWebComponentLazyAppend implem
     canvasElement: HTMLElement;
     elementsToPackages: Map<string, string>;
     code: string;
+    onTextChanged: TypedEvent<string>;
     private _aceEditor;
     private _editor;
     static readonly style: CSSStyleSheet;

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

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, css, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { CommandType } from '../../../commandHandling/CommandType';
 class CodeViewAceCompleter {
     getCompletions(editor, session, pos, prefix, callback) {
@@ -18,6 +18,7 @@ export class CodeViewAce extends BaseCustomWebComponentLazyAppend {
     canvasElement;
     elementsToPackages;
     code;
+    onTextChanged = new TypedEvent();
     _aceEditor;
     _editor;
     static style = css `
@@ -111,6 +112,7 @@ export class CodeViewAce extends BaseCustomWebComponentLazyAppend {
         });
         let config = { attributes: true, childList: true, characterData: true };
         observer.observe(this.shadowRoot.querySelector('.ace_content'), config);
+        this._aceEditor.on('change', () => this.onTextChanged.emit(this._aceEditor.getValue()));
     }
     update(code) {
         this._aceEditor.setValue(code);

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

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { ICodeView } from "./ICodeView";
 import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
 import { IUiCommand } from '../../../commandHandling/IUiCommand';
@@ -7,6 +7,7 @@ export declare class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend
     canvasElement: HTMLElement;
     elementsToPackages: Map<string, string>;
     code: string;
+    onTextChanged: TypedEvent<string>;
     private _codeMirrorEditor;
     private _editor;
     static readonly style: CSSStyleSheet;

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

@@ -1,9 +1,10 @@
-import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { CommandType } from '../../../commandHandling/CommandType';
 export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
     canvasElement;
     elementsToPackages;
     code;
+    onTextChanged = new TypedEvent();
     _codeMirrorEditor;
     _editor;
     static style = css `
@@ -82,6 +83,7 @@ export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
         //@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);

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

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { ICodeView } from "./ICodeView";
 import { IActivateable } from '../../../interfaces/IActivateable';
 import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
@@ -9,6 +9,7 @@ export declare class CodeViewMonaco extends BaseCustomWebComponentLazyAppend imp
     canvasElement: HTMLElement;
     elementsToPackages: Map<string, string>;
     code: string;
+    onTextChanged: TypedEvent<string>;
     private _monacoEditor;
     private _editor;
     static readonly style: CSSStyleSheet;

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

@@ -1,4 +1,4 @@
-import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { CommandType } from '../../../commandHandling/CommandType';
 export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
     dispose() {
@@ -7,6 +7,7 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
     canvasElement;
     elementsToPackages;
     code;
+    onTextChanged = new TypedEvent();
     _monacoEditor;
     _editor;
     static style = css `
@@ -69,6 +70,15 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
                 }
             });
             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() {

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

@@ -7,5 +7,5 @@ export declare class DemoView extends BaseCustomWebComponentLazyAppend implement
     private _loading;
     static readonly style: CSSStyleSheet;
     constructor();
-    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): void;
+    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): Promise<void>;
 }

package/dist/elements/widgets/demoView/demoView.js

@@ -18,11 +18,6 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
     position: absolute;
     top: 60px;
     left: 20px;
-  }
-  iframe {
-    width: 100%;
-    height: 100%;
-    border: none;
   }`;
     constructor() {
         super();
@@ -34,24 +29,10 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
         this._loading.textContent = '🛀 Hold on, loading...';
         this.shadowRoot.appendChild(this._loading);
     }
-    display(serviceContainer, instanceServiceContainer, code) {
-        let iframe = document.createElement('iframe');
-        this._placeholder.innerHTML = '';
-        this._placeholder.appendChild(iframe);
+    async display(serviceContainer, instanceServiceContainer, code) {
         this._loading.hidden = false;
-        iframe.onload = () => {
-            this._loading.hidden = true;
-        };
-        let doc = iframe.contentWindow.document;
-        doc.open();
-        doc.write('<script type="module">');
-        for (let i of instanceServiceContainer.designContext.imports) {
-            doc.write("import '" + i + "';");
-        }
-        doc.write("document.body.style.display='';");
-        doc.write('</script>');
-        doc.write('<body style="display:none">' + code + '</body>');
-        doc.close();
+        await serviceContainer.demoProviderService.provideDemo(this._placeholder, serviceContainer, instanceServiceContainer, code);
+        this._loading.hidden = true;
     }
 }
 customElements.define('node-projects-demo-view', DemoView);

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

@@ -0,0 +1,7 @@
+import { IDesignerCanvas } from "./IDesignerCanvas.js";
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class ButtonSeperatorProvider implements IDesignViewConfigButtonsProvider {
+    _space: number;
+    constructor(space: number);
+    provideButtons(designerCanvas: IDesignerCanvas): HTMLElement[];
+}

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

@@ -0,0 +1,11 @@
+export class ButtonSeperatorProvider {
+    _space;
+    constructor(space) {
+        this._space = space;
+    }
+    provideButtons(designerCanvas) {
+        const div = document.createElement('div');
+        div.style.marginLeft = this._space + 'px';
+        return [div];
+    }
+}

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

@@ -0,0 +1,8 @@
+import { DesignerView } from "./designerView.js";
+import { IDesignerCanvas } from "./IDesignerCanvas.js";
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class ButtonSeperatorProvider implements IDesignViewConfigButtonsProvider {
+    _space: number;
+    constructor(space: number);
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

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

@@ -0,0 +1,11 @@
+export class ButtonSeperatorProvider {
+    _space;
+    constructor(space) {
+        this._space = space;
+    }
+    provideButtons(designerView, designerCanvas) {
+        const div = document.createElement('div');
+        div.style.marginLeft = this._space + 'px';
+        return [div];
+    }
+}

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

@@ -1,4 +1,7 @@
 import { IDesignContext } from "./IDesignContext";
 export declare class DesignContext implements IDesignContext {
     imports: string[];
+    extensionOptions: {
+        [key: string]: any;
+    };
 }

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

@@ -1,3 +1,4 @@
 export class DesignContext {
     imports = [];
+    extensionOptions = {};
 }

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

@@ -0,0 +1,7 @@
+import { IDesignerCanvas } from "./IDesignerCanvas.js";
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+import { DesignerView } from './designerView';
+export declare class DesignerViewUseOverlayScollbars implements IDesignViewConfigButtonsProvider {
+    constructor();
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}