@node-projects/web-component-designer 0.0.35 → 0.0.39

package/dist/elements/services/propertiesService/services/Lit2PropertiesService.js

@@ -1,10 +1,7 @@
 import { AbstractBasePropertiesService } from "./AbstractBasePropertiesService";
 import { PropertiesHelper } from './PropertiesHelper';
 export class Lit2PropertiesService extends AbstractBasePropertiesService {
-    constructor() {
-        super(...arguments);
-        this.name = "lit2";
-    }
+    name = "lit2";
     isHandledElement(designItem) {
         let prop = designItem.element.constructor.elementProperties;
         if (prop)

package/dist/elements/services/propertiesService/services/LitElementPropertiesService.js

@@ -1,9 +1,6 @@
 import { AbstractBasePropertiesService } from "./AbstractBasePropertiesService";
 export class LitElementPropertiesService extends AbstractBasePropertiesService {
-    constructor() {
-        super(...arguments);
-        this.name = "lit";
-    }
+    name = "lit";
     isHandledElement(designItem) {
         let proto = designItem.element.constructor.__proto__;
         while (proto != null) {

package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService.js

@@ -1,80 +1,77 @@
 import { CommonPropertiesService } from "./CommonPropertiesService";
 export class NativeElementsPropertiesService extends CommonPropertiesService {
-    constructor() {
-        super(...arguments);
-        //@ts-ignore
-        this.inputProperties = [
-            {
-                name: "type",
-                type: "list",
-                values: ["text", "number", "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "password", "radio", "range", "reset", "search", "submit", "tel", "time", "url", "week"],
-                service: this,
-                defaultValue: "text"
-            }, {
-                name: "value",
-                type: "string",
-                service: this
-            }, {
-                name: "checked",
-                type: "boolean",
-                service: this
-            }, {
-                name: "min",
-                type: "number",
-                service: this
-            }, {
-                name: "max",
-                type: "number",
-                service: this
-            }
-        ];
-        this.buttonProperties = [
-            {
-                name: "type",
-                type: "list",
-                values: ["button", "submit", "reset"],
-                service: this,
-                defaultValue: "button"
-            }, {
-                name: "value",
-                type: "string",
-                service: this
-            }, {
-                name: "disabled",
-                type: "boolean",
-                service: this
-            }
-        ];
-        this.anchorProperties = [
-            {
-                name: "href",
-                type: "string",
-                service: this
-            }
-        ];
-        this.divProperties = [
-            {
-                name: "title",
-                type: "string",
-                service: this
-            }
-        ];
-        this.imgProperties = [
-            {
-                name: "src",
-                type: "string",
-                service: this
-            }
-        ];
-        this.iframeProperties = [
-            {
-                name: "src",
-                type: "string",
-                service: this
-            }
-        ];
-        this.name = "native";
-    }
+    //@ts-ignore
+    inputProperties = [
+        {
+            name: "type",
+            type: "list",
+            values: ["text", "number", "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "password", "radio", "range", "reset", "search", "submit", "tel", "time", "url", "week"],
+            service: this,
+            defaultValue: "text"
+        }, {
+            name: "value",
+            type: "string",
+            service: this
+        }, {
+            name: "checked",
+            type: "boolean",
+            service: this
+        }, {
+            name: "min",
+            type: "number",
+            service: this
+        }, {
+            name: "max",
+            type: "number",
+            service: this
+        }
+    ];
+    buttonProperties = [
+        {
+            name: "type",
+            type: "list",
+            values: ["button", "submit", "reset"],
+            service: this,
+            defaultValue: "button"
+        }, {
+            name: "value",
+            type: "string",
+            service: this
+        }, {
+            name: "disabled",
+            type: "boolean",
+            service: this
+        }
+    ];
+    anchorProperties = [
+        {
+            name: "href",
+            type: "string",
+            service: this
+        }
+    ];
+    divProperties = [
+        {
+            name: "title",
+            type: "string",
+            service: this
+        }
+    ];
+    imgProperties = [
+        {
+            name: "src",
+            type: "string",
+            service: this
+        }
+    ];
+    iframeProperties = [
+        {
+            name: "src",
+            type: "string",
+            service: this
+        }
+    ];
+    name = "native";
     isHandledElement(designItem) {
         switch (designItem.element.localName) {
             case 'input':

package/dist/elements/services/propertiesService/services/PolymerPropertiesService.js

@@ -1,9 +1,6 @@
 import { AbstractBasePropertiesService } from './AbstractBasePropertiesService';
 export class PolymerPropertiesService extends AbstractBasePropertiesService {
-    constructor() {
-        super(...arguments);
-        this.name = "polymer";
-    }
+    name = "polymer";
     isHandledElement(designItem) {
         return designItem.element.constructor.polymerElementVersion != null;
     }

package/dist/elements/services/propertiesService/services/UnkownElementPropertiesService.js

@@ -1,9 +1,7 @@
 import { ValueType } from "../ValueType";
 import { PropertiesHelper } from './PropertiesHelper';
 export class UnkownElementPropertiesService {
-    constructor() {
-        this.name = "unkown";
-    }
+    name = "unkown";
     isHandledElement(designItem) {
         return true;
     }

package/dist/elements/services/selectionService/SelectionService.js

@@ -1,10 +1,8 @@
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { NodeType } from '../../item/NodeType';
 export class SelectionService {
-    constructor() {
-        this.selectedElements = [];
-        this.onSelectionChanged = new TypedEvent();
-    }
+    primarySelection;
+    selectedElements = [];
     setSelectedElements(designItems) {
         let oldSelectedElements = this.selectedElements;
         if (!designItems) {
@@ -33,4 +31,5 @@ export class SelectionService {
     isSelected(designItem) {
         return this.selectedElements.indexOf(designItem) >= 0;
     }
+    onSelectionChanged = new TypedEvent();
 }

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

@@ -1,7 +1,9 @@
 export class ChangeGroup {
+    title;
+    affectedItems;
+    commitHandler;
+    abortHandler;
     constructor(title, affectedItems, commitHandler, abortHandler) {
-        this.undoStack = [];
-        this.redoStack = [];
         this.title = title;
         this.affectedItems = affectedItems;
         this.commitHandler = commitHandler;
@@ -41,6 +43,8 @@ export class ChangeGroup {
     mergeWith(other) {
         return false;
     }
+    undoStack = [];
+    redoStack = [];
     execute(item) {
         item.do();
         for (let existingItem of this.undoStack) {

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

@@ -3,11 +3,9 @@ import { ChangeGroup } from "./ChangeGroup.js";
  * Manages a stack of available undo/redo actions
  */
 export class UndoService {
-    constructor() {
-        this._undoStack = [];
-        this._redoStack = [];
-        this._transactionStack = [];
-    }
+    _undoStack = [];
+    _redoStack = [];
+    _transactionStack = [];
     openGroup(title, affectedItems) {
         let t = new ChangeGroup(title, affectedItems, (t) => this.commitTransactionItem(t), (t) => this.abortTransactionItem(t));
         this._transactionStack.push(t);

package/dist/elements/services/undoService/transactionItems/AttributeChangeAction.js

@@ -6,6 +6,7 @@ export class AttributeChangeAction {
         this.newValue = newValue;
         this.oldValue = oldValue;
     }
+    title;
     get affectedItems() {
         return [this.designItem];
     }
@@ -55,6 +56,10 @@ export class AttributeChangeAction {
             }
         }
     }
+    designItem;
+    name;
+    newValue;
+    oldValue;
     mergeWith(other) {
         if (other instanceof AttributeChangeAction && this.designItem === other.designItem && this.name === other.name) {
             this.newValue = other.newValue;

package/dist/elements/services/undoService/transactionItems/CssStyleChangeAction.js

@@ -6,6 +6,7 @@ export class CssStyleChangeAction {
         this.newValue = newValue;
         this.oldValue = oldValue;
     }
+    title;
     get affectedItems() {
         return [this.designItem];
     }
@@ -29,6 +30,10 @@ export class CssStyleChangeAction {
             this.designItem.element.style[this.name] = this.newValue;
         }
     }
+    designItem;
+    name;
+    newValue;
+    oldValue;
     mergeWith(other) {
         if (other instanceof CssStyleChangeAction && this.designItem === other.designItem && this.name === other.name) {
             this.newValue = other.newValue;

package/dist/elements/services/undoService/transactionItems/DeleteAction.js

@@ -5,6 +5,7 @@ export class DeleteAction {
         this.deletedItems = deletedItems;
         this.extensionManager = extensionManager;
     }
+    title;
     get affectedItems() {
         return this.deletedItems;
     }
@@ -25,6 +26,10 @@ export class DeleteAction {
         }
         this.extensionManager.removeExtensions(this.deletedItems);
     }
+    deletedItems;
+    extensionManager;
+    _parentItems;
+    _parentIndexes;
     mergeWith(other) {
         return false;
     }

package/dist/elements/services/undoService/transactionItems/InsertAction.js

@@ -5,6 +5,7 @@ export class InsertAction {
         this.index = index;
         this.newItem = newItem;
     }
+    title;
     get affectedItems() {
         return [this.designItem];
     }
@@ -17,6 +18,9 @@ export class InsertAction {
         if (prepService)
             requestAnimationFrame(() => prepService.prepareElementsForDesigner(this.newItem));
     }
+    designItem;
+    index;
+    newItem;
     mergeWith(other) {
         return false;
     }

package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction.js

@@ -7,6 +7,7 @@ export class MoveElementInDomAction {
         this.oldTarget = oldTarget;
         this.oldPosition = oldPosition;
     }
+    title;
     get affectedItems() {
         return [this.designItem, this.newTarget, this.oldTarget];
     }
@@ -16,6 +17,12 @@ export class MoveElementInDomAction {
     do() {
         this.newTarget.element.insertAdjacentElement(this.newPosition, this.designItem.element);
     }
+    designItem;
+    newTarget;
+    newPosition;
+    oldTarget;
+    oldPosition;
+    newItem;
     mergeWith(other) {
         return false;
     }

package/dist/elements/services/undoService/transactionItems/PropertyChangeAction.js

@@ -6,6 +6,7 @@ export class PropertyChangeAction {
         this.newValue = newValue;
         this.oldValue = oldValue;
     }
+    title;
     get affectedItems() {
         return [this.designItem];
     }
@@ -21,6 +22,10 @@ export class PropertyChangeAction {
         else
             this.property.service.setValue([this.designItem], this.property, this.newValue);
     }
+    designItem;
+    property;
+    newValue;
+    oldValue;
     mergeWith(other) {
         if (other instanceof PropertyChangeAction && this.designItem === other.designItem && this.property === other.property) {
             this.newValue = other.newValue;

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.js

@@ -1,5 +1,32 @@
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
 export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
+    _treeDiv;
+    _tree;
+    _filter;
+    static style = css `
+      span.drag-source {
+        border: 1px solid grey;
+        border-radius: 3px;
+        padding: 2px;
+        background-color: silver;
+      }
+
+      span.fancytree-node.fancytree-drag-source {
+        outline: 1px dotted grey;
+      }
+      span.fancytree-node.fancytree-drop-accept {
+        outline: 1px dotted green;
+      }
+      span.fancytree-node.fancytree-drop-reject {
+        outline: 1px dotted red;
+      }
+      #tree ul {
+        border: none;
+      }
+      #tree ul:focus {
+        outline: none;
+      }
+    `;
     constructor() {
         super();
         let externalCss = document.createElement('style');
@@ -94,28 +121,4 @@ export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
         }
     }
 }
-BindableObjectsBrowser.style = css `
-      span.drag-source {
-        border: 1px solid grey;
-        border-radius: 3px;
-        padding: 2px;
-        background-color: silver;
-      }
-
-      span.fancytree-node.fancytree-drag-source {
-        outline: 1px dotted grey;
-      }
-      span.fancytree-node.fancytree-drop-accept {
-        outline: 1px dotted green;
-      }
-      span.fancytree-node.fancytree-drop-reject {
-        outline: 1px dotted red;
-      }
-      #tree ul {
-        border: none;
-      }
-      #tree ul:focus {
-        outline: none;
-      }
-    `;
 customElements.define('node-projects-bindable-objects-browser', BindableObjectsBrowser);

package/dist/elements/widgets/bindings/BindingsEditor.js

@@ -1,13 +1,9 @@
 import { css, BaseCustomWebComponentConstructorAppend, html } from '@node-projects/base-custom-webcomponent';
 export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
-    constructor() {
-        super();
-    }
-}
-BindingsEditor.style = css `
+    static style = css `
     * { font-size: 16px; }
     `;
-BindingsEditor.template = html `
+    static template = html `
     <span style="position:absolute;top:6px;left:20px;">Expression</span>
     <input style="width:340px;height:24px;position:absolute;top:30px;left:20px;">
     <span style="position:absolute;top:78px;left:20px;">Target</span>
@@ -24,4 +20,8 @@ BindingsEditor.template = html `
     <input id="nullSafe" type="checkbox" style="width:24px;height:24px;position:absolute;top:208px;left:15.328125px;">
     <label for="nullSafe" style="position:absolute;top:211px;left:44.328125px;">Null Safe</label>
   `;
+    constructor() {
+        super();
+    }
+}
 customElements.define('node-projects-bindings-editor', BindingsEditor);

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

@@ -15,6 +15,18 @@ class CodeViewAceCompleter {
     }
 }
 export class CodeViewAce extends BaseCustomWebComponentLazyAppend {
+    canvasElement;
+    elementsToPackages;
+    code;
+    _aceEditor;
+    _editor;
+    static style = css `
+    :host {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+    `;
     constructor() {
         super();
         this.style.display = 'block';
@@ -116,11 +128,4 @@ export class CodeViewAce extends BaseCustomWebComponentLazyAppend {
         this._aceEditor.scrollToLine(point1.row);
     }
 }
-CodeViewAce.style = css `
-    :host {
-      display: block;
-      height: 100%;
-      width: 100%;
-    }
-    `;
 customElements.define('node-projects-code-view-ace', CodeViewAce);

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

@@ -1,6 +1,24 @@
 import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
 import { CommandType } from '../../../commandHandling/CommandType';
 export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
+    canvasElement;
+    elementsToPackages;
+    code;
+    _codeMirrorEditor;
+    _editor;
+    static style = css `
+    :host {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+    `;
+    static template = html `
+<style>@import "./node_modules/codemirror/lib/codemirror.css";</style>
+<div  style="width: 100%; height: 100%;">
+<div id="textarea"></div>
+</div>
+`;
     constructor() {
         super();
         this.style.display = 'block';
@@ -77,17 +95,4 @@ export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
         this._codeMirrorEditor.setSelection(point1, point2);
     }
 }
-CodeViewCodeMirror.style = css `
-    :host {
-      display: block;
-      height: 100%;
-      width: 100%;
-    }
-    `;
-CodeViewCodeMirror.template = html `
-<style>@import "./node_modules/codemirror/lib/codemirror.css";</style>
-<div  style="width: 100%; height: 100%;">
-<div id="textarea"></div>
-</div>
-`;
 customElements.define('node-projects-code-view-code-mirror', CodeViewCodeMirror);

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

@@ -4,6 +4,22 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
     dispose() {
         this._monacoEditor.dispose();
     }
+    canvasElement;
+    elementsToPackages;
+    code;
+    _monacoEditor;
+    _editor;
+    static style = css `
+    :host {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+    `;
+    static template = html `
+      <style>@import "./node_modules/monaco-editor/min/vs/editor/editor.main.css";</style>
+      <div id="container" style="width: 100%; height: 100%;"></div>
+  `;
     executeCommand(command) {
         switch (command.type) {
             case CommandType.undo:
@@ -82,15 +98,4 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
         this._monacoEditor.revealLineInCenter(point2.lineNumber);
     }
 }
-CodeViewMonaco.style = css `
-    :host {
-      display: block;
-      height: 100%;
-      width: 100%;
-    }
-    `;
-CodeViewMonaco.template = html `
-      <style>@import "./node_modules/monaco-editor/min/vs/editor/editor.main.css";</style>
-      <div id="container" style="width: 100%; height: 100%;"></div>
-  `;
 customElements.define('node-projects-code-view-monaco', CodeViewMonaco);

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

@@ -1,5 +1,29 @@
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
 export class DemoView extends BaseCustomWebComponentLazyAppend {
+    _placeholder;
+    _loading;
+    static style = css `
+  :host {
+    display: block;
+    overflow: hidden;
+    background: white;
+    height: 100%;
+    width: 100%;
+  }
+  #placeholder {
+    height: 100%;
+    width: 100%;
+  }
+  #loading {
+    position: absolute;
+    top: 60px;
+    left: 20px;
+  }
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }`;
     constructor() {
         super();
         this._placeholder = document.createElement('div');
@@ -30,26 +54,4 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
         doc.close();
     }
 }
-DemoView.style = css `
-  :host {
-    display: block;
-    overflow: hidden;
-    background: white;
-    height: 100%;
-    width: 100%;
-  }
-  #placeholder {
-    height: 100%;
-    width: 100%;
-  }
-  #loading {
-    position: absolute;
-    top: 60px;
-    left: 20px;
-  }
-  iframe {
-    width: 100%;
-    height: 100%;
-    border: none;
-  }`;
 customElements.define('node-projects-demo-view', DemoView);

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

@@ -1,5 +1,3 @@
 export class DesignContext {
-    constructor() {
-        this.imports = [];
-    }
+    imports = [];
 }

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

@@ -2,7 +2,6 @@ import { IDesignItem } from "../../item/IDesignItem";
 import { InstanceServiceContainer } from "../../services/InstanceServiceContainer";
 import { ServiceContainer } from "../../services/ServiceContainer";
 import { Snaplines } from "./Snaplines";
-import { IDesignerMousePoint } from "../../../interfaces/IDesignerMousePoint";
 import { IPlacementView } from './IPlacementView';
 import { IExtensionManager } from "./extensions/IExtensionManger";
 import { IUiCommandHandler } from "../../../commandHandling/IUiCommandHandler";
@@ -22,7 +21,8 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     zoomFactor: number;
     eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;
-    getDesignerMousepoint(event: MouseEvent, target: Element, startPoint?: IDesignerMousePoint): IDesignerMousePoint;
+    getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;
     elementFromPoint(x: number, y: number): Element;
 }