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

package/dist/elements/documentContainer.js

@@ -1,22 +1,23 @@
-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 {
-    designerView;
-    codeView;
-    demoView;
-    additionalData;
-    _serviceContainer;
-    _content = '';
-    _tabControl;
-    _selectionPosition;
-    _splitDiv;
-    _designerDiv;
-    _codeDiv;
-    refreshInSplitViewDebounced;
-    _disableChangeNotificationDesigner;
-    _disableChangeNotificationEditor;
-    static get style() {
+import { BaseCustomWebComponentLazyAppend, css, debounce } from "@node-projects/base-custom-webcomponent";
+import { DesignerTabControl } from "./controls/DesignerTabControl";
+import { DesignerView } from "./widgets/designerView/designerView";
+import { SimpleSplitView } from './controls/SimpleSplitView';
+export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
+    designerView;
+    codeView;
+    demoView;
+    additionalData;
+    _serviceContainer;
+    _content = '';
+    _tabControl;
+    _selectionPosition;
+    _splitDiv;
+    _designerDiv;
+    _codeDiv;
+    refreshInSplitViewDebounced;
+    _disableChangeNotificationDesigner;
+    _disableChangeNotificationEditor;
+    static get style() {
         return css `
       div {
         height: 100%;
@@ -25,172 +26,170 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
       }                            
       node-projects-designer-view {
         height: 100%;
-        /*overflow: auto;*/
+        overflow: hidden;
       }
-      .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;
-        let div = document.createElement("div");
-        this._tabControl = new DesignerTabControl();
-        div.appendChild(this._tabControl);
-        this.designerView = new DesignerView();
-        this.designerView.setAttribute('exportparts', 'canvas');
-        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._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);
-        queueMicrotask(() => {
-            this.shadowRoot.appendChild(div);
-            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();
-    }
-    executeCommand(command) {
-        if (this._tabControl.selectedIndex === 0)
-            this.designerView.executeCommand(command);
-        else if (this._tabControl.selectedIndex === 1)
-            this.codeView.executeCommand(command);
-    }
-    canExecuteCommand(command) {
-        if (this._tabControl.selectedIndex === 0)
-            return this.designerView.canExecuteCommand(command);
-        else if (this._tabControl.selectedIndex === 1)
-            return this.codeView.canExecuteCommand(command);
-        return false;
-    }
-    set content(value) {
-        this._content = value;
-        if (this._tabControl) {
-            if (this._tabControl.selectedIndex === 0)
-                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 === 3)
-                this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content);
-        }
-    }
-    get content() {
-        if (this._tabControl) {
-            if (this._tabControl.selectedIndex === 0)
-                this._content = this.designerView.getHTML();
-            else if (this._tabControl.selectedIndex === 1)
-                this._content = this.codeView.getText();
-            return this._content;
-        }
-        return null;
-    }
-    ready() {
-        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);
-            }
-            else if (i.oldIndex === 1) {
-                this._content = this.codeView.getText();
-            }
-            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);
-            if (i.newIndex === 1 || i.newIndex === 2) {
-                this.codeView.update(this._content);
-                if (this._selectionPosition) {
-                    this.codeView.setSelection(this._selectionPosition);
-                    this._selectionPosition = null;
-                }
-                if (i.changedViaClick) {
-                    this.codeView.focusEditor();
-                }
-            }
-            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;
-    }
-    get instanceServiceContainer() {
-        return this.designerView.instanceServiceContainer;
-    }
-}
-//@ts-ignore
-customElements.define("node-projects-document-container", DocumentContainer);
+      `;
+    }
+    constructor(serviceContainer, content) {
+        super();
+        this.refreshInSplitViewDebounced = debounce(this.refreshInSplitView, 200);
+        this._serviceContainer = serviceContainer;
+        if (content != null)
+            this._content = content;
+        let div = document.createElement("div");
+        this._tabControl = new DesignerTabControl();
+        div.appendChild(this._tabControl);
+        this.designerView = new DesignerView();
+        this.designerView.setAttribute('exportparts', 'canvas');
+        this.designerView.slot = 'top';
+        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.slot = 'bottom';
+        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 = new SimpleSplitView();
+        this._splitDiv.style.height = '100%';
+        this._splitDiv.title = 'Split';
+        this._tabControl.appendChild(this._splitDiv);
+        this.demoView = new serviceContainer.config.demoViewWidget();
+        this.demoView.title = 'Preview';
+        this._tabControl.appendChild(this.demoView);
+        queueMicrotask(() => {
+            this.shadowRoot.appendChild(div);
+            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();
+    }
+    executeCommand(command) {
+        if (this._tabControl.selectedIndex === 0)
+            this.designerView.executeCommand(command);
+        else if (this._tabControl.selectedIndex === 1)
+            this.codeView.executeCommand(command);
+    }
+    canExecuteCommand(command) {
+        if (this._tabControl.selectedIndex === 0)
+            return this.designerView.canExecuteCommand(command);
+        else if (this._tabControl.selectedIndex === 1)
+            return this.codeView.canExecuteCommand(command);
+        return false;
+    }
+    set content(value) {
+        this._content = value;
+        if (this._tabControl) {
+            if (this._tabControl.selectedIndex === 0)
+                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 === 3)
+                this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content);
+        }
+    }
+    get content() {
+        if (this._tabControl) {
+            if (this._tabControl.selectedIndex === 0)
+                this._content = this.designerView.getHTML();
+            else if (this._tabControl.selectedIndex === 1)
+                this._content = this.codeView.getText();
+            return this._content;
+        }
+        return null;
+    }
+    ready() {
+        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);
+            }
+            else if (i.oldIndex === 1) {
+                this._content = this.codeView.getText();
+            }
+            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);
+            if (i.newIndex === 1 || i.newIndex === 2) {
+                this.codeView.update(this._content);
+                if (this._selectionPosition) {
+                    this.codeView.setSelection(this._selectionPosition);
+                    this._selectionPosition = null;
+                }
+                if (i.changedViaClick) {
+                    this.codeView.focusEditor();
+                }
+            }
+            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;
+    }
+    get instanceServiceContainer() {
+        return this.designerView.instanceServiceContainer;
+    }
+}
+//@ts-ignore
+customElements.define("node-projects-document-container", DocumentContainer);

package/dist/elements/helper/CssAttributeParser.d.ts

@@ -1,9 +1,9 @@
-export declare class CssEntry {
-    constructor(name: string, value: string);
-    name: string;
-    value: string;
-}
-export declare class CssAttributeParser {
-    entries: CssEntry[];
-    parse(text: string, quoteType?: string): void;
-}
+export declare class CssEntry {
+    constructor(name: string, value: string);
+    name: string;
+    value: string;
+}
+export declare class CssAttributeParser {
+    entries: CssEntry[];
+    parse(text: string, quoteType?: string): void;
+}

package/dist/elements/helper/CssAttributeParser.js

@@ -1,67 +1,67 @@
-var Token;
-(function (Token) {
-    Token[Token["Name"] = 0] = "Name";
-    Token[Token["Value"] = 1] = "Value";
-    Token[Token["InQuote"] = 2] = "InQuote";
-})(Token || (Token = {}));
-export class CssEntry {
-    constructor(name, value) {
-        this.name = name.trim();
-        this.value = value.trim();
-    }
-    name;
-    value;
-}
-export class CssAttributeParser {
-    entries = [];
-    parse(text, quoteType = '\'') {
-        this.entries = [];
-        let name = '';
-        let value = '';
-        let token = Token.Name;
-        for (let n = 0; n < text.length; n++) {
-            let c = text[n];
-            if (token === Token.Name) {
-                if (c === ':')
-                    token = Token.Value;
-                else if (c === ';') {
-                    name = '';
-                }
-                else
-                    name += c;
-            }
-            else if (token === Token.Value) {
-                if (c === ';') {
-                    this.entries.push(new CssEntry(name, value));
-                    name = '';
-                    value = '';
-                    token = Token.Name;
-                }
-                else {
-                    if (c === quoteType) {
-                        token = Token.InQuote;
-                    }
-                    value += c;
-                }
-            }
-            else if (token === Token.InQuote) {
-                if (c === '\\') {
-                    value += c;
-                    n++;
-                    c = text[n];
-                    value += c;
-                }
-                else if (c === quoteType) {
-                    value += c;
-                    token = Token.Value;
-                }
-                else {
-                    value += c;
-                }
-            }
-        }
-        if (name.trim() !== '') {
-            this.entries.push(new CssEntry(name, value));
-        }
-    }
-}
+var Token;
+(function (Token) {
+    Token[Token["Name"] = 0] = "Name";
+    Token[Token["Value"] = 1] = "Value";
+    Token[Token["InQuote"] = 2] = "InQuote";
+})(Token || (Token = {}));
+export class CssEntry {
+    constructor(name, value) {
+        this.name = name.trim();
+        this.value = value.trim();
+    }
+    name;
+    value;
+}
+export class CssAttributeParser {
+    entries = [];
+    parse(text, quoteType = '\'') {
+        this.entries = [];
+        let name = '';
+        let value = '';
+        let token = Token.Name;
+        for (let n = 0; n < text.length; n++) {
+            let c = text[n];
+            if (token === Token.Name) {
+                if (c === ':')
+                    token = Token.Value;
+                else if (c === ';') {
+                    name = '';
+                }
+                else
+                    name += c;
+            }
+            else if (token === Token.Value) {
+                if (c === ';') {
+                    this.entries.push(new CssEntry(name, value));
+                    name = '';
+                    value = '';
+                    token = Token.Name;
+                }
+                else {
+                    if (c === quoteType) {
+                        token = Token.InQuote;
+                    }
+                    value += c;
+                }
+            }
+            else if (token === Token.InQuote) {
+                if (c === '\\') {
+                    value += c;
+                    n++;
+                    c = text[n];
+                    value += c;
+                }
+                else if (c === quoteType) {
+                    value += c;
+                    token = Token.Value;
+                }
+                else {
+                    value += c;
+                }
+            }
+        }
+        if (name.trim() !== '') {
+            this.entries.push(new CssEntry(name, value));
+        }
+    }
+}

package/dist/elements/helper/CssCombiner.d.ts

@@ -1,11 +1,11 @@
-export declare class CssCombiner {
-    private static _helperElement;
-    static combine(styles: Map<string, string>, globalStyles?: Map<string, string>): Map<string, string>;
-    private static combineBorder;
-    private static combineMargin;
-    private static combinePadding;
-    private static combineInset;
-    private static combineBackground;
-    private static combineFont;
-    private static checkIfStyleIsCombinable;
-}
+export declare class CssCombiner {
+    private static _helperElement;
+    static combine(styles: Map<string, string>, globalStyles?: Map<string, string>): Map<string, string>;
+    private static combineBorder;
+    private static combineMargin;
+    private static combinePadding;
+    private static combineInset;
+    private static combineBackground;
+    private static combineFont;
+    private static checkIfStyleIsCombinable;
+}