iobroker.mywebui 1.42.40 → 1.42.42

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "mywebui",
-    "version": "1.42.40",
+    "version": "1.42.42",
     "titleLang": {
       "en": "mywebui",
       "de": "mywebui",
@@ -29,6 +29,20 @@
       "zh-cn": "使用万维网传送器的高锰用户接口"
     },
     "news": {
+      "1.42.42": {
+        "en": "feature: 'dynamic' tab in property grid for every element (works also with npm manifest widgets) - per-instance dynamic properties with two-way binding; fix: solution explorer drag crash on nodes without data",
+        "az": "yenilik: property grid-də hər element üçün 'dynamic' tabı (npm manifest widget-ləri ilə də işləyir) - instance-əsaslı dinamik property-lər iki-tərəfli binding ilə; düzəliş: solution explorer-də data-sız node-ları drag edəndə çökmə",
+        "tr": "yenilik: property grid'de her element için 'dynamic' sekmesi (npm manifest widget'larıyla da çalışır) - instance bazlı dinamik property'ler çift yönlü binding ile; düzeltme: solution explorer'da data'sız node sürüklemede çökme",
+        "ru": "новое: вкладка 'dynamic' в property grid для каждого элемента (работает и с npm manifest виджетами) - динамические свойства экземпляра с двусторонней привязкой; исправление: падение drag в solution explorer на узлах без data",
+        "de": "Neu: 'dynamic'-Tab im Property-Grid für jedes Element (funktioniert auch mit npm-Manifest-Widgets) - instanzbasierte dynamische Properties mit Zwei-Wege-Binding; Fix: Drag-Absturz im Solution Explorer bei Knoten ohne Daten"
+      },
+      "1.42.41": {
+        "en": "improvement: dynamic properties now work on Lit/package widgets at runtime too (accessors + -changed events applied by ScreenViewer); events tab lists -changed events of dynamic properties; added webui-demo-widget sample package",
+        "az": "təkmilləşdirmə: dinamik property-lər artıq runtime-da Lit/package widget-lərdə də işləyir (accessor-lar + -changed event-ləri ScreenViewer tərəfindən tətbiq olunur); events tabı dinamik property-lərin -changed event-lərini göstərir; webui-demo-widget nümunə paketi əlavə olundu",
+        "tr": "iyileştirme: dinamik property'ler artık runtime'da Lit/package widget'larda da çalışıyor (accessor'lar + -changed event'leri ScreenViewer tarafından uygulanıyor); events sekmesi dinamik property'lerin -changed event'lerini listeliyor; webui-demo-widget örnek paketi eklendi",
+        "ru": "улучшение: динамические свойства теперь работают и на Lit/package виджетах во время выполнения (аксессоры + события -changed применяются ScreenViewer); вкладка events показывает события -changed динамических свойств; добавлен пример пакета webui-demo-widget",
+        "de": "Verbesserung: dynamische Properties funktionieren zur Laufzeit jetzt auch bei Lit/Package-Widgets (Accessoren + -changed-Events durch ScreenViewer); Events-Tab listet -changed-Events dynamischer Properties; webui-demo-widget Beispielpaket hinzugefügt"
+      },
       "1.42.40": {
         "en": "feature: per-instance dynamic properties for custom controls (add/edit name, type, default via properties tab) and extended Lit widget property support (Array/Object/converter types, webuiProperties metadata for signal/color/screen/enum editors)",
         "az": "yenilik: custom control-lar üçün instance-əsaslı dinamik property-lər (properties tabından ad, tip, default əlavə/redaktə) və Lit widget-lər üçün genişləndirilmiş property dəstəyi (Array/Object/converter tipləri, signal/color/screen/enum editorları üçün webuiProperties metadata)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.42.40",
+  "version": "1.42.42",
   "description": "ioBroker mywebui - Custom edited mywebui by gokturk413 with 3D Editor",
   "type": "module",
   "main": "dist/backend/main.js",

package/www/dist/frontend/config/ConfigureWebcomponentDesigner.js

@@ -15,6 +15,7 @@ import { IobrokerWebuiCustomElementContextMenu } from "../services/IobrokerWebui
 import { IobrokerWebuiRefactorService } from "../services/IobrokerWebuiRefactorService.js";
 import { IobrokerWebuiSpecialPropertiesService } from "../services/IobrokerWebuiSpecialPropertiesService.js";
 import { IobrokerWebuiLitPropertiesService } from "../services/IobrokerWebuiLitPropertiesService.js";
+import { IobrokerWebuiPropertyGroupsService } from "../services/IobrokerWebuiPropertyGroupsService.js";
 // import { IobrokerWebuiVisibilityPropertiesService } from "../services/IobrokerWebuiVisibilityPropertiesService.js";
 import { iobrokerHandler } from "../common/IobrokerHandler.js";
 import { ExpandCollapseContextMenu } from "@gokturk413/web-component-designer-widgets-wunderbaum";
@@ -51,6 +52,7 @@ export function configureDesigner(bindingsHelper) {
     serviceContainer.register('propertyService', new IobrokerWebuiPropertiesService());
     serviceContainer.register('propertyService', new IobrokerWebuiSpecialPropertiesService());
     serviceContainer.register('propertyService', new IobrokerWebuiLitPropertiesService());
+    serviceContainer.register('propertyGroupsService', new IobrokerWebuiPropertyGroupsService());
     // Visibility is now handled directly in PropertyGrid
     // serviceContainer.register('propertyService', new IobrokerWebuiVisibilityPropertiesService());
     serviceContainer.designViewConfigButtons.push(new IobrokerWebuiConfigButtonProvider());

package/www/dist/frontend/config/IobrokerWebuiSolutionExplorer.js

@@ -1086,6 +1086,9 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
                         dndSourceNode = e.node;
                         //@ts-ignore
                         e.event.target.style.opacity = '0.4';
+                        if (!e.node.data?.data) {
+                            return false;
+                        }
                         if (e.node.data.data.type == 'screen') {
                             const screen = e.node.data.data.name;
                             const elementDef = { tag: "iobroker-webui-screen-viewer", defaultAttributes: { 'screen-name': screen }, defaultWidth: '300px', defaultHeight: '200px' };

package/www/dist/frontend/runtime/CustomControls.js

@@ -3,6 +3,7 @@ import { iobrokerHandler } from "../common/IobrokerHandler.js";
 import { PropertiesHelper } from "@gokturk413/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js";
 import { visibilityService } from "./VisibilityService.js";
 import { scanAndApplyAnimations, scanAndApplyEffects, cleanupAnimations, cleanupEffects } from "./AnimationService.js";
+import { applyDynamicProperties, applyDynamicPropertiesToTree } from "./DynamicElementProperties.js";
 export const webuiCustomControlPrefix = 'webui-';
 export const webuiCustomControlSymbol = Symbol('webuiCustomControlSymbol');
 export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
@@ -109,51 +110,11 @@ export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
     }
     // defines accessors for the per-instance dynamic properties declared in the
     // 'dynamic-property-defs' attribute: [ { "name": "kamran", "type": "string", "default": "x" }, ... ]
-    // so they behave like normal control properties (bindings refresh + changed events)
+    // so they behave like normal control properties (bindings refresh + changed events).
+    // also applies dynamic properties to elements inside the control template (e.g. Lit widgets)
     _setupDynamicProperties() {
-        let defs;
-        try {
-            const v = this.getAttribute('dynamic-property-defs');
-            if (!v)
-                return;
-            defs = JSON.parse(v);
-        }
-        catch (e) {
-            console.warn('invalid dynamic-property-defs attribute', e);
-            return;
-        }
-        if (!Array.isArray(defs))
-            return;
-        for (const def of defs) {
-            const name = def?.name;
-            if (!name)
-                continue;
-            if (!Object.getOwnPropertyDescriptor(this, name)) {
-                Object.defineProperty(this, name, {
-                    get() {
-                        return this['_' + name];
-                    },
-                    set(newValue) {
-                        if (this['_' + name] !== newValue && (!Number.isNaN(this['_' + name]) || !Number.isNaN(newValue))) {
-                            this['_' + name] = newValue;
-                            this._bindingsRefresh(name);
-                            this.dispatchEvent(new CustomEvent(PropertiesHelper.camelToDashCase(name) + '-changed', { detail: { newValue } }));
-                        }
-                    },
-                    enumerable: true,
-                    configurable: true,
-                });
-            }
-            const attr = this.getAttribute(PropertiesHelper.camelToDashCase(name));
-            let value = attr ?? def.default;
-            if (value != null) {
-                if (def.type === 'number')
-                    value = parseFloat(value);
-                else if (def.type === 'boolean')
-                    value = value === '' || value === true || value === 'true';
-                this['_' + name] = value;
-            }
-        }
+        applyDynamicProperties(this);
+        applyDynamicPropertiesToTree(this.shadowRoot);
     }
     _assignEvent(event, callback) {
         const arrayEl = [event, callback];

package/www/dist/frontend/runtime/DynamicElementProperties.js

@@ -0,0 +1,97 @@
+import { PropertiesHelper } from "@gokturk413/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js";
+
+// runtime support for per-instance dynamic properties (any element, incl. Lit/package widgets):
+// reads the 'dynamic-property-defs' attribute and defines accessors on the instance so the
+// properties dispatch '<name>-changed' events and refresh webui bindings on change.
+export const dynamicDefsAttributeName = 'dynamic-property-defs';
+
+export function parseDynamicDefs(element) {
+    try {
+        const v = element.getAttribute(dynamicDefsAttributeName);
+        if (v) {
+            const parsed = JSON.parse(v);
+            if (Array.isArray(parsed))
+                return parsed.filter(x => x && x.name);
+        }
+    }
+    catch (e) {
+        console.warn('invalid ' + dynamicDefsAttributeName + ' attribute', e, element);
+    }
+    return [];
+}
+
+function findPrototypeAccessor(element, name) {
+    let proto = Object.getPrototypeOf(element);
+    while (proto && proto !== HTMLElement.prototype) {
+        const desc = Object.getOwnPropertyDescriptor(proto, name);
+        if (desc)
+            return desc;
+        proto = Object.getPrototypeOf(proto);
+    }
+    return null;
+}
+
+export function applyDynamicProperties(element) {
+    const defs = parseDynamicDefs(element);
+    for (const def of defs) {
+        const name = def.name;
+        if (Object.getOwnPropertyDescriptor(element, name))
+            continue;
+        // if the element already has an accessor for this name (e.g. a Lit reactive
+        // property), route values through it so the widget keeps reacting, but still
+        // dispatch the '-changed' event webui bindings listen to
+        const protoDesc = findPrototypeAccessor(element, name);
+        if (protoDesc && (protoDesc.get || protoDesc.set)) {
+            Object.defineProperty(element, name, {
+                get() {
+                    return protoDesc.get ? protoDesc.get.call(this) : undefined;
+                },
+                set(newValue) {
+                    const oldValue = protoDesc.get ? protoDesc.get.call(this) : undefined;
+                    if (oldValue !== newValue) {
+                        protoDesc.set?.call(this, newValue);
+                        this._bindingsRefresh?.(name);
+                        this.dispatchEvent(new CustomEvent(PropertiesHelper.camelToDashCase(name) + '-changed', { detail: { newValue } }));
+                    }
+                },
+                enumerable: true,
+                configurable: true,
+            });
+        }
+        else {
+            Object.defineProperty(element, name, {
+                get() {
+                    return this['_' + name];
+                },
+                set(newValue) {
+                    if (this['_' + name] !== newValue && (!Number.isNaN(this['_' + name]) || !Number.isNaN(newValue))) {
+                        this['_' + name] = newValue;
+                        this._bindingsRefresh?.(name);
+                        this.dispatchEvent(new CustomEvent(PropertiesHelper.camelToDashCase(name) + '-changed', { detail: { newValue } }));
+                    }
+                },
+                enumerable: true,
+                configurable: true,
+            });
+        }
+        const attr = element.getAttribute(PropertiesHelper.camelToDashCase(name));
+        let value = attr ?? def.default;
+        if (value != null) {
+            if (def.type === 'number')
+                value = parseFloat(value);
+            else if (def.type === 'boolean')
+                value = value === '' || value === true || value === 'true';
+            if (protoDesc)
+                element[name] = value;
+            else
+                element['_' + name] = value;
+        }
+    }
+}
+
+export function applyDynamicPropertiesToTree(root) {
+    if (root instanceof Element && root.hasAttribute(dynamicDefsAttributeName))
+        applyDynamicProperties(root);
+    for (const el of root.querySelectorAll('[' + dynamicDefsAttributeName + ']'))
+        applyDynamicProperties(el);
+}

package/www/dist/frontend/runtime/ScreenViewer.js

@@ -7,6 +7,7 @@ import { isFirefox } from "@gokturk413/web-component-designer/dist/elements/help
 import { PropertiesHelper } from "@gokturk413/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js";
 import { visibilityService } from "./VisibilityService.js";
 import { scanAndApplyAnimations, scanAndApplyEffects, cleanupAnimations, cleanupEffects, ensureGSAP } from "./AnimationService.js";
+import { applyDynamicPropertiesToTree } from "./DynamicElementProperties.js";
 window.ensureGSAP = ensureGSAP;
 let ScreenViewer = class ScreenViewer extends BaseCustomWebComponentConstructorAppend {
     static { ScreenViewer_1 = this; }
@@ -313,6 +314,8 @@ let ScreenViewer = class ScreenViewer extends BaseCustomWebComponentConstructorA
                 get() { return el.style.pointerEvents === 'none'; }
             });
         }
+        // dynamic per-instance properties (incl. Lit/package widgets) must exist before bindings
+        applyDynamicPropertiesToTree(this._rootShadow);
         const res = window.appShell.bindingsHelper.applyAllBindings(this._rootShadow, this.relativeSignalsPath, this);
         if (this._iobBindings)
             this._iobBindings.push(...res);

package/www/dist/frontend/services/IobrokerWebuiCustomControlEventsService.js

@@ -1,17 +1,22 @@
 import { EventsService, PropertiesHelper } from "@gokturk413/web-component-designer";
 import { BaseCustomControl, webuiCustomControlSymbol } from "../runtime/CustomControls.js";
+import { readDynamicDefs } from "./DynamicPropertiesHelper.js";
 export class IobrokerWebuiCustomControlEventsService {
     isHandledElementFromEventsService(designItem) {
-        return designItem.element instanceof BaseCustomControl;
+        return designItem.element instanceof BaseCustomControl || designItem.element.hasAttribute?.('dynamic-property-defs');
     }
     getPossibleEvents(designItem) {
         const evt = [];
-        let control = designItem.element.constructor[webuiCustomControlSymbol].control;
-        for (const pname in control.properties) {
+        let control = designItem.element.constructor[webuiCustomControlSymbol]?.control;
+        for (const pname in control?.properties) {
             if (control.properties[pname].internal)
                 continue;
             evt.push({ name: PropertiesHelper.camelToDashCase(pname) + '-changed' });
         }
+        // changed events of the per-instance dynamic properties (dynamic-property-defs attribute)
+        for (const def of readDynamicDefs(designItem.element)) {
+            evt.push({ name: PropertiesHelper.camelToDashCase(def.name) + '-changed' });
+        }
         return [...evt, ...EventsService._simpleMouseEvents, ...EventsService._pointerEvents, ...EventsService._allElements, ...EventsService._focusableEvents];
     }
     getEvent(designItem, name) {

package/www/dist/frontend/services/IobrokerWebuiDynamicPropertiesService.js

@@ -0,0 +1,36 @@
+import { AbstractPropertiesService, PropertyType, RefreshMode } from "@gokturk413/web-component-designer";
+import { readDynamicDefs, createWebuiTypedProperty, dynamicDefsAttributeName } from "./DynamicPropertiesHelper.js";
+import { IobrokerWebuiDynamicPropsEditor } from "../config/IobrokerWebuiDynamicPropsEditor.js";
+
+// serves the 'dynamic' tab of the property grid for EVERY element
+// (independent of which properties service handles the 'properties' tab,
+// e.g. WebcomponentManifestPropertiesService for installed npm widgets)
+export class IobrokerWebuiDynamicPropertiesService extends AbstractPropertiesService {
+    name = "webuiDynamic";
+
+    getRefreshMode(designItem) {
+        return RefreshMode.fullOnValueChange;
+    }
+
+    isHandledElement(designItem) {
+        return true;
+    }
+
+    async getProperties(designItem) {
+        if (!designItem?.element?.getAttribute)
+            return null;
+        const defs = readDynamicDefs(designItem.element);
+        const properties = [];
+        for (const d of defs)
+            properties.push(await createWebuiTypedProperty(d.name, d, this));
+        properties.push({
+            name: 'dynamicPropertyDefs',
+            type: 'string',
+            attributeName: dynamicDefsAttributeName,
+            service: this,
+            propertyType: PropertyType.attribute,
+            createEditor: p => new IobrokerWebuiDynamicPropsEditor(p)
+        });
+        return properties;
+    }
+}

package/www/dist/frontend/services/IobrokerWebuiLitPropertiesService.js

@@ -1,5 +1,5 @@
 import { Lit2PropertiesService, PropertiesHelper, PropertyType, RefreshMode } from "@gokturk413/web-component-designer";
-import { buildDynamicPropertiesGroup, createWebuiTypedProperty } from "./DynamicPropertiesHelper.js";
+import { createWebuiTypedProperty } from "./DynamicPropertiesHelper.js";
 
 // extended properties service for Lit (2/3) widgets:
 //  - supports Array & custom converter properties (edited as string/JSON) which Lit2PropertiesService skips
@@ -47,7 +47,6 @@ export class IobrokerWebuiLitPropertiesService extends Lit2PropertiesService {
             if (!handled.has(name))
                 properties.push(await createWebuiTypedProperty(name, meta[name], this));
         }
-        properties.push(await buildDynamicPropertiesGroup(designItem, this));
         return properties;
     }
 }

package/www/dist/frontend/services/IobrokerWebuiPropertiesService.js

@@ -3,7 +3,6 @@ import { BaseCustomControl, webuiCustomControlSymbol } from "../runtime/CustomCo
 import { iobrokerHandler } from "../common/IobrokerHandler.js";
 import { ScreenViewer } from "../runtime/ScreenViewer.js";
 import { IobrokerWebuiSignalPropertyEditor } from "../config/IobrokerWebuiSignalPropertyEditor.js";
-import { buildDynamicPropertiesGroup } from "./DynamicPropertiesHelper.js";
 export class IobrokerWebuiPropertiesService extends BaseCustomWebComponentPropertiesService {
     isHandledElement(designItem) {
         return designItem.element instanceof BaseCustomControl || designItem.element instanceof ScreenViewer;
@@ -72,7 +71,6 @@ export class IobrokerWebuiPropertiesService extends BaseCustomWebComponentProper
             for (const [groupName, groupProps] of groupMap) {
                 result.push({ name: groupName, description: '', properties: groupProps });
             }
-            result.push(await buildDynamicPropertiesGroup(designItem, this));
             return result;
         }
         else {

package/www/dist/frontend/services/IobrokerWebuiPropertyGroupsService.js

@@ -0,0 +1,13 @@
+import { PropertyGroupsService } from "@gokturk413/web-component-designer";
+import { IobrokerWebuiDynamicPropertiesService } from "./IobrokerWebuiDynamicPropertiesService.js";
+
+// adds a 'dynamic' tab (per-instance dynamic properties) to the property grid for all elements
+export class IobrokerWebuiPropertyGroupsService extends PropertyGroupsService {
+    constructor() {
+        super();
+        const dynamicEntry = { name: 'dynamic', propertiesService: new IobrokerWebuiDynamicPropertiesService() };
+        this._pgList.splice(1, 0, dynamicEntry);
+        this._svgPgList.splice(1, 0, dynamicEntry);
+        this._svgChildPgList.splice(1, 0, dynamicEntry);
+    }
+}