@node-projects/web-component-designer 0.0.37 → 0.0.38

package/dist/elements/controls/DesignerTabControl.js

@@ -137,7 +137,7 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
             let htmlItem = item;
             const tabHeaderDiv = this._elementMap.get(htmlItem);
             this._moreContainer.appendChild(tabHeaderDiv);
-            if (w < this._headerDiv.clientWidth) {
+            if (this._headerDiv.children.length == 0 || (w + (tabHeaderDiv.clientWidth / 2)) < this._headerDiv.clientWidth) {
                 this._headerDiv.appendChild(tabHeaderDiv);
                 w += tabHeaderDiv.clientWidth;
             }

package/dist/elements/controls/ThicknessEditor.d.ts

@@ -6,10 +6,26 @@ export declare type ThicknessEditorValueChangedEventArgs = {
 export declare class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
-    private _value;
-    get value(): string;
-    set value(value: string);
-    valueChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _leftInput;
+    private _topInput;
+    private _rightInput;
+    private _bottomInput;
+    private _valueLeft;
+    get valueLeft(): string;
+    set valueLeft(value: string);
+    valueLeftChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueTop;
+    get valueTop(): string;
+    set valueTop(value: string);
+    valueTopChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueRight;
+    get valueRight(): string;
+    set valueRight(value: string);
+    valueRightChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueBottom;
+    get valueBottom(): string;
+    set valueBottom(value: string);
+    valueBottomChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
     property: string;
     unsetValue: string;
     _updateValue(): void;

package/dist/elements/controls/ThicknessEditor.js

@@ -57,24 +57,89 @@ export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
       <div id="rect"></div>
     </div>
   `;
-    _value;
-    get value() {
-        return this._value;
+    _leftInput;
+    _topInput;
+    _rightInput;
+    _bottomInput;
+    _valueLeft;
+    get valueLeft() {
+        return this._valueLeft;
     }
-    set value(value) {
-        const oldValue = this._value;
-        this._value = value;
-        this._updateValue();
-        this.valueChanged.emit({ newValue: this._value, oldValue: oldValue });
+    set valueLeft(value) {
+        const oldValue = this._valueLeft;
+        this._valueLeft = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueLeftChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueLeftChanged = new TypedEvent();
+    _valueTop;
+    get valueTop() {
+        return this._valueTop;
+    }
+    set valueTop(value) {
+        const oldValue = this._valueTop;
+        this._valueTop = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueTopChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueTopChanged = new TypedEvent();
+    _valueRight;
+    get valueRight() {
+        return this._valueRight;
+    }
+    set valueRight(value) {
+        const oldValue = this._valueRight;
+        this._valueRight = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueRightChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueRightChanged = new TypedEvent();
+    _valueBottom;
+    get valueBottom() {
+        return this._valueBottom;
+    }
+    set valueBottom(value) {
+        const oldValue = this._valueBottom;
+        this._valueBottom = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueBottomChanged.emit({ newValue: value, oldValue: oldValue });
+        }
     }
-    valueChanged = new TypedEvent();
+    valueBottomChanged = new TypedEvent();
     property;
     unsetValue;
     _updateValue() {
+        this._leftInput.value = this.valueLeft;
+        this._topInput.value = this.valueTop;
+        this._rightInput.value = this.valueRight;
+        this._bottomInput.value = this._valueBottom;
     }
     ready() {
         this._parseAttributesToProperties();
         this._updateValue();
+        this._leftInput = this._getDomElement('left');
+        this._topInput = this._getDomElement('top');
+        this._rightInput = this._getDomElement('right');
+        this._bottomInput = this._getDomElement('bottom');
+        this._leftInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueLeft = this._leftInput.value; };
+        this._topInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueTop = this._topInput.value; };
+        this._rightInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueRight = this._rightInput.value; };
+        this._bottomInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueBottom = this._bottomInput.value; };
+        this._leftInput.onblur = (e) => this._valueLeft = this._leftInput.value;
+        this._topInput.onblur = (e) => this._valueTop = this._topInput.value;
+        this._rightInput.onblur = (e) => this._valueRight = this._rightInput.value;
+        this._bottomInput.onblur = (e) => this._valueBottom = this._bottomInput.value;
     }
 }
 customElements.define('node-projects-thickness-editor', ThicknessEditor);

package/dist/elements/services/propertiesService/propertyEditors/BasePropertyEditor.js

@@ -30,7 +30,12 @@ export class BasePropertyEditor {
         else
             this.element.classList.remove('unset-value');
         this.disableChangeNotification = true;
-        this.refreshValue(valueType, value);
+        try {
+            this.refreshValue(valueType, value);
+        }
+        catch (err) {
+            console.error(err);
+        }
         this.disableChangeNotification = false;
     }
 }

package/dist/elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.js

@@ -5,10 +5,10 @@ export class ThicknessPropertyEditor extends BasePropertyEditor {
         super(property);
         const selector = new ThicknessEditor();
         selector.property = property.name;
-        selector.valueChanged.on((e) => this._valueChanged(e.newValue));
+        selector.valueLeftChanged.on((e) => this._valueChanged(e.newValue));
         this.element = selector;
     }
     refreshValue(valueType, value) {
-        this.element.value = value;
+        this.element.valueLeft = value;
     }
 }

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

@@ -63,7 +63,13 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         }
     }
     removeOverlay(element) {
-        element.parentElement.removeChild(element);
+        try {
+            if (element)
+                element.parentElement.removeChild(element);
+        }
+        catch (err) {
+            console.error(err);
+        }
     }
     removeAllNodesWithClass(className) {
         const nodes = this._svg.querySelectorAll('.' + className);

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -11,14 +11,14 @@
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.2.0",
+    "@node-projects/base-custom-webcomponent": "^0.3.0",
     "construct-style-sheets-polyfill": "^3.0.4"
   },
   "devDependencies": {
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^2.4.1",
     "@types/codemirror": "^5.60.5",
-    "@types/jquery": "^3.5.8",
+    "@types/jquery": "^3.5.9",
     "@types/jquery.fancytree": "0.0.7",
     "ace-builds": "^1.4.13",
     "codemirror": "^5.64.0",