iobroker.webui 1.34.2 → 1.35.1

package/README.md

@@ -133,6 +133,13 @@ runtime.html?screenName=screen2
 	Placeholder for next versions:
 	### __WORK IN PROGRESS__
 -->
+### 1.35.1 (2025-09-23)
+- fix reload custom controls
+
+### 1.35.0 (2025-09-23)
+- better nameing
+- changed object notification
+
 ### 1.34.2 (2025-09-21)
 - anaother small fix in signal handling
 

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "webui",
-    "version": "1.34.2",
+    "version": "1.35.1",
     "titleLang": {
       "en": "webui",
       "de": "webui",
@@ -29,6 +29,32 @@
       "zh-cn": "使用万维网传送器的高锰用户接口"
     },
     "news": {
+      "1.35.1": {
+        "en": "fix reload custom controls",
+        "de": "reload benutzerdefinierte bedienelemente",
+        "ru": "исправить пользовательские элементы управления",
+        "pt": "corrigir recarga de controles personalizados",
+        "nl": "repareren herladen aangepaste controles",
+        "fr": "fixer les contrôles personnalisés de recharge",
+        "it": "correzione dei controlli personalizzati di ricarica",
+        "es": "recargar controles personalizados",
+        "pl": "naprawiać sterowanie niestandardowe",
+        "uk": "виправити перевантаження користувальницьких контрольів",
+        "zh-cn": "固定重装自定义控制"
+      },
+      "1.35.0": {
+        "en": "better nameing\nchanged object notification",
+        "de": "besser benennen\nänderung der objektbenachrichtigung",
+        "ru": "лучшее название\nизменено уведомление об объекте",
+        "pt": "melhor nome\nnotificação de objeto alterada",
+        "nl": "betere naamgeving\nobjectnotificatie gewijzigd",
+        "fr": "mieux nommer\nnotification d'objet modifiée",
+        "it": "nome migliore\nnotifica dell'oggetto modificato",
+        "es": "mejor nombre\nnotificación de objeto cambiado",
+        "pl": "lepsze nazwanie\nzmienione powiadomienie obiektu",
+        "uk": "краще ім'я\nзмінено повідомлення про об’єкт",
+        "zh-cn": "更好的名称\n更改对象通知"
+      },
       "1.34.2": {
         "en": "anaother small fix in signal handling",
         "de": "Weitere kleine Korrektur in der Signalerkennung.",
@@ -93,32 +119,6 @@
         "pl": "Support sugestie css prop",
         "uk": "Підтримка пропозицій css",
         "zh-cn": "支持 css 道具建议"
-      },
-      "1.31.6": {
-        "en": "Test one more release",
-        "de": "Testen Sie eine weitere Freigabe",
-        "ru": "Проверить еще один выпуск",
-        "pt": "Teste mais uma versão",
-        "nl": "Test nog een keer",
-        "fr": "Tester une dernière libération",
-        "it": "Prova un'altra versione",
-        "es": "Prueba una versión más",
-        "pl": "Przetestuj jeszcze jedno wydanie",
-        "uk": "Тестувати ще один реліз",
-        "zh-cn": "再试一次"
-      },
-      "1.31.5": {
-        "en": "Fix setting Props with simple scripts",
-        "de": "Reparieren Sie Props mit einfachen Skripten",
-        "ru": "Исправить настройку Props с помощью простых скриптов",
-        "pt": "Corrigir a configuração Props com scripts simples",
-        "nl": "Het instellen van Props met eenvoudige scripts",
-        "fr": "Correction du réglage Props avec des scripts simples",
-        "it": "Fissare le impostazioni Props con semplici script",
-        "es": "Corregir Props con scripts simples",
-        "pl": "Napraw ustawienia Propów za pomocą prostych skryptów",
-        "uk": "Виправлення налаштування пропсів з простими скриптами",
-        "zh-cn": "以简单的脚本修正设置道具"
       }
     },
     "icon": "logo.png",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.webui",
-  "version": "1.34.2",
+  "version": "1.35.1",
   "description": "ioBroker webui",
   "type": "module",
   "main": "dist/backend/main.js",
@@ -60,22 +60,22 @@
     "@node-projects/node-html-parser-esm": "^6.2.0",
     "@node-projects/propertygrid.webcomponent": "^1.4.1",
     "@node-projects/splitview.webcomponent": "^1.0.1",
-    "@node-projects/web-component-designer": "^0.1.262",
+    "@node-projects/web-component-designer": "^0.1.265",
     "@node-projects/web-component-designer-codeview-monaco": "^0.1.33",
     "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser": "^0.1.11",
     "@node-projects/web-component-designer-stylesheetservice-css-tools": "^0.1.11",
-    "@node-projects/web-component-designer-visualization-addons": "^0.1.132",
+    "@node-projects/web-component-designer-visualization-addons": "^0.1.133",
     "@node-projects/web-component-designer-widgets-wunderbaum": "^0.1.33",
     "@types/json-schema": "^7.0.15",
     "@web/dev-server": "^0.4.6",
-    "blockly": "^12.3.0",
+    "blockly": "^12.3.1",
     "chai": "^5.3.1",
     "chai-as-promised": "^8.0.2",
     "construct-style-sheets-polyfill": "^3.1.0",
     "cross-env": "^10.0.0",
     "dayjs": "^1.11.18",
     "del": "^8.0.1",
-    "dock-spawn-ts": "^3.6.1",
+    "dock-spawn-ts": "^3.7.0",
     "es-module-shims": "2.6.2",
     "eslint": "^9.36.0",
     "esprima-next": "^6.0.3",

package/www/dist/frontend/common/IobrokerHandler.d.ts

@@ -30,7 +30,7 @@ export declare class IobrokerHandler implements VisualizationHandler {
     fontDeclarationsStylesheet: CSSStyleSheet;
     globalScriptInstance: IGlobalScript;
     objectsChanged: TypedEvent<{
-        type: string;
+        type: "screen" | "control";
         name: string;
     }>;
     imagesChanged: TypedEvent<void>;
@@ -92,7 +92,7 @@ export declare class IobrokerHandler implements VisualizationHandler {
     private _saveObjectToFile;
     private _saveBinaryToFile;
     sendCommand(command: 'addNpm' | 'removeNpm' | 'updateNpm' | 'uiConnected' | 'uiChangedView', data?: string): Promise<void>;
-    handleCommand(command: "uiReloadPackages" | "uiReload" | "uiRefresh" | "uiChangeView" | "uiChangedView" | "uiOpenDialog" | "uiOpenedDialog" | "uiPlaySound" | "uiRunScript" | "uiAlert", data: string, clientId?: string): Promise<void>;
+    handleCommand(command: "uiReloadPackages" | "uiReload" | "uiRefresh" | "uiChangeView" | "uiChangedView" | "uiOpenDialog" | "uiOpenedDialog" | "uiPlaySound" | "uiRunScript" | "uiAlert" | "objectChanged", data: string, clientId?: string): Promise<void>;
     getSignalInformation(signal: any): SignalInformation;
     getHistoricData(id: string, config: any): Promise<{
         values: ioBroker.GetHistoryResult;

package/www/dist/frontend/common/IobrokerHandler.js

@@ -1,6 +1,7 @@
 import { Connection } from "@iobroker/socket-client";
 import { TypedEvent, cssFromString } from "@node-projects/base-custom-webcomponent";
 import { sleep } from "../helper/Helper.js";
+import { generateCustomControl } from "../runtime/CustomControls.js";
 export class IobrokerHandler {
     static instance = new IobrokerHandler();
     host;
@@ -201,7 +202,8 @@ export class IobrokerHandler {
             this.#cache.get(type).set(name, data);
         if (type == 'control')
             this._controlNames = null;
-        this.objectsChanged.emit({ type, name });
+        //this.objectsChanged.emit({ type, name });
+        this.sendCommand("objectChanged", JSON.stringify({ type, name }));
     }
     async removeObject(type, name) {
         await this.connection.deleteFile(this.namespaceFiles, "/" + this.configPath + type + "s/" + name + '.' + type);
@@ -486,6 +488,12 @@ export class IobrokerHandler {
                 case "uiAlert":
                     alert(data);
                     break;
+                case "objectChanged":
+                    const d = JSON.parse(data);
+                    if (d.type == 'control' && d.name)
+                        generateCustomControl(d.name, await iobrokerHandler.getWebuiObject(d.type, d.name));
+                    this.objectsChanged.emit(d);
+                    break;
             }
         }
     }

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

@@ -2,7 +2,7 @@ import { BaseCustomWebComponentConstructorAppend, LazyLoader, css, html } from "
 import { dragDropFormatNameBindingObject, dragDropFormatNameElementDefinition, ContextMenu, sleep, dragDropFormatNamePropertyGrid, PropertiesHelper, copyTextToClipboard, NamedTools } from "@node-projects/web-component-designer";
 import { iobrokerHandler } from "../common/IobrokerHandler.js";
 import { exportData, openFileDialog } from "../helper/Helper.js";
-import { generateCustomControl, getCustomControlName, webuiCustomControlPrefix } from "../runtime/CustomControls.js";
+import { getCustomControlName, webuiCustomControlPrefix } from "../runtime/CustomControls.js";
 import { defaultOptions, defaultStyle } from "@node-projects/web-component-designer-widgets-wunderbaum";
 import { Wunderbaum } from 'wunderbaum';
 //@ts-ignore
@@ -51,8 +51,6 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
     async initialize(serviceContainer) {
         this.serviceContainer = serviceContainer;
         iobrokerHandler.objectsChanged.on(async (x) => {
-            if (x.type == 'control' && x.name)
-                generateCustomControl(x.name, await iobrokerHandler.getWebuiObject(x.type, x.name));
             this._refreshNode(x.type, true);
         });
         iobrokerHandler.imagesChanged.on(() => this._refreshNode('images'));
@@ -295,20 +293,20 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
                 }], event);
         };
         return {
-            title: 'Screens Style',
+            title: 'Global Screens/Control Style',
             folder: false,
             contextMenu: (e, data) => ctxMenu(e),
             dblclick: (e, data) => {
-                window.appShell.openGlobalStyleEditor(iobrokerHandler.config.globalStyle ?? '', 'screens style', 'globalStyle');
+                window.appShell.openGlobalStyleEditor(iobrokerHandler.config.globalStyle ?? '', 'Global Screens/Control style', 'globalStyle');
             }
         };
     }
     _createFontDeclarationsNode() {
         return {
-            title: 'Global Style',
+            title: 'Root Style (for fonts...)',
             folder: false,
             dblclick: (e, data) => {
-                window.appShell.openGlobalStyleEditor(iobrokerHandler.config.fontDeclarations ?? '', 'global style', 'fontDeclarations');
+                window.appShell.openGlobalStyleEditor(iobrokerHandler.config.fontDeclarations ?? '', 'Root Style', 'fontDeclarations');
             }
         };
     }

package/www/dist/frontend/generated/Properties.json

@@ -72,7 +72,7 @@
         },
         "IControlSettings": {
             "properties": {
-                "addoptedStyles": {
+                "adoptedStyles": {
                     "items": {
                         "type": "string"
                     },
@@ -96,7 +96,7 @@
                 "width",
                 "height",
                 "useGlobalStyle",
-                "addoptedStyles",
+                "adoptedStyles",
                 "bindToSize"
             ],
             "type": "object"
@@ -217,7 +217,7 @@
         },
         "IScreenSettings": {
             "properties": {
-                "addoptedStyles": {
+                "adoptedStyles": {
                     "items": {
                         "type": "string"
                     },
@@ -242,7 +242,7 @@
             "propertyOrder": [
                 "width",
                 "height",
-                "addoptedStyles",
+                "adoptedStyles",
                 "stretch"
             ],
             "type": "object"

package/www/dist/frontend/generated/ScriptCommands.json

@@ -1003,6 +1003,8 @@
                     "type": "string"
                 },
                 "valueList": {
+                    "description": "List of values wich can be toggled through",
+                    "format": "collection",
                     "items": {
                         "type": [
                             "string",

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

@@ -10,6 +10,7 @@ export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
     #eventListeners = [];
     #resizeObserver;
     #specialValueHandler;
+    #controlChangedSubscription;
     constructor() {
         super();
         this._bindingsParse(null, true);
@@ -52,6 +53,16 @@ export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
             this.addEventListener(e[0], e[1]);
         }
         this.#resizeObserver?.observe(this);
+        this.#controlChangedSubscription = iobrokerHandler.objectsChanged.on(d => {
+            const ctlName = this.constructor[webuiCustomControlSymbol].name;
+            if (d.type == 'control' && d.name === ctlName) {
+                this.disconnectedCallback();
+                this._rootDocumentFragment = this.constructor.template.content.cloneNode(true);
+                this.shadowRoot.innerHTML = '';
+                this.shadowRoot.appendChild(this._rootDocumentFragment);
+                this.connectedCallback();
+            }
+        });
     }
     disconnectedCallback() {
         for (let e of this.#eventListeners) {
@@ -62,6 +73,7 @@ export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
             b();
         this.#bindings = null;
         this.#resizeObserver?.unobserve(this);
+        this.#controlChangedSubscription.dispose();
     }
     _assignEvent(event, callback) {
         const arrayEl = [event, callback];

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

@@ -259,8 +259,8 @@ let ScreenViewer = class ScreenViewer extends BaseCustomWebComponentConstructorA
     }
     connectedCallback() {
         this._refreshViewSubscription = iobrokerHandler.refreshView.on(() => this._loadScreen());
-        this._screensChangedSubscription = iobrokerHandler.objectsChanged.on(() => {
-            if (this._screenName)
+        this._screensChangedSubscription = iobrokerHandler.objectsChanged.on(d => {
+            if (this._screenName && d.type == 'screen' && d.name === this._screenName)
                 this._loadScreen();
         });
         this._scriptObject?.connectedCallback?.(this, this._rootShadow);

package/www/index.html

@@ -218,7 +218,7 @@
     </button>
     <button data-command="save" title="save" disabled><img src="./node_modules/@node-projects/web-component-designer/assets/icons/save.svg"></button>
     <div style="margin-left: 30px;">
-      webui - 1.34.2 - 40551f4
+      webui - 1.35.1 - d7d2637
     </div>
     <button style="margin-left: 30px;" data-command="paste" title="paste" disabled><img
         src="./node_modules/@node-projects/web-component-designer/assets/icons/paste.svg"></button>

package/www/node_modules/@node-projects/web-component-designer/dist/elements/helper/getBoxQuads.js

@@ -30,6 +30,35 @@ export function addPolyfill(windowObj = window) {
     }
 }
 /**
+* @param {globalThis} windowObj?
+*/
+export function patchAdoptNode(windowObj = window) {
+    if (!windowObj.Node.prototype.getBoxQuads) {
+        //@ts-ignore
+        windowObj.Node.prototype.getBoxQuads = function (options) {
+            return getBoxQuads(this, options);
+        };
+    }
+    if (!windowObj.Node.prototype.convertQuadFromNode) {
+        //@ts-ignore
+        windowObj.Node.prototype.convertQuadFromNode = function (quad, from, options) {
+            return convertQuadFromNode(this, quad, from, options);
+        };
+    }
+    if (!windowObj.Node.prototype.convertRectFromNode) {
+        //@ts-ignore
+        windowObj.Node.prototype.convertRectFromNode = function (rect, from, options) {
+            return convertRectFromNode(this, rect, from, options);
+        };
+    }
+    if (!windowObj.Node.prototype.convertPointFromNode) {
+        //@ts-ignore
+        windowObj.Node.prototype.convertPointFromNode = function (point, from, options) {
+            return convertPointFromNode(this, point, from, options);
+        };
+    }
+}
+/**
 * @param {Node} node
 * @param {DOMQuadInit} quad
 * @param {Element} from
@@ -43,7 +72,7 @@ export function convertQuadFromNode(node, quad, from, options) {
         quad = new DOMQuad(transformPointBox(quad.p1, options.fromBox, (node.ownerDocument.defaultView ?? window).getComputedStyle(from), -1), transformPointBox(quad.p2, options.fromBox, (node.ownerDocument.defaultView ?? window).getComputedStyle(from), -1), transformPointBox(quad.p3, options.fromBox, (node.ownerDocument.defaultView ?? window).getComputedStyle(from), -1), transformPointBox(quad.p4, options.fromBox, (node.ownerDocument.defaultView ?? window).getComputedStyle(from), -1));
     }
     let res = new DOMQuad(m2.transformPoint(m1.transformPoint(quad.p1)), m2.transformPoint(m1.transformPoint(quad.p2)), m2.transformPoint(m1.transformPoint(quad.p3)), m2.transformPoint(m1.transformPoint(quad.p4)));
-    if (options?.toBox && options?.toBox !== 'border' && node instanceof (node.ownerDocument.defaultView ?? window).Element) {
+    if (options?.toBox && options?.toBox !== 'border' && (node instanceof Element || node instanceof (node.ownerDocument.defaultView ?? window).Element)) {
         res = new DOMQuad(transformPointBox(res.p1, options.toBox, (node.ownerDocument.defaultView ?? window).getComputedStyle(node), -1), transformPointBox(res.p2, options.toBox, (node.ownerDocument.defaultView ?? window).getComputedStyle(node), -1), transformPointBox(res.p3, options.toBox, (node.ownerDocument.defaultView ?? window).getComputedStyle(node), -1), transformPointBox(res.p4, options.toBox, (node.ownerDocument.defaultView ?? window).getComputedStyle(node), -1));
     }
     return res;
@@ -63,7 +92,7 @@ export function convertRectFromNode(node, rect, from, options) {
         rect = new DOMRect(p.x, p.y, rect.width, rect.height);
     }
     let res = new DOMQuad(m2.transformPoint(m1.transformPoint(new DOMPoint(rect.x, rect.y))), m2.transformPoint(m1.transformPoint(new DOMPoint(rect.x + rect.width, rect.y))), m2.transformPoint(m1.transformPoint(new DOMPoint(rect.x + rect.width, rect.y + rect.height))), m2.transformPoint(m1.transformPoint(new DOMPoint(rect.x, rect.y + rect.height))));
-    if (options?.toBox && options?.toBox !== 'border' && node instanceof (node.ownerDocument.defaultView ?? window).Element) {
+    if (options?.toBox && options?.toBox !== 'border' && (node instanceof Element || node instanceof (node.ownerDocument.defaultView ?? window).Element)) {
         res = new DOMQuad(transformPointBox(res.p1, options.toBox, (node.ownerDocument.defaultView ?? window).getComputedStyle(node), -1), transformPointBox(res.p2, options.toBox, (node.ownerDocument.defaultView ?? window).getComputedStyle(node), -1), transformPointBox(res.p3, options.toBox, (node.ownerDocument.defaultView ?? window).getComputedStyle(node), -1), transformPointBox(res.p4, options.toBox, (node.ownerDocument.defaultView ?? window).getComputedStyle(node), -1));
     }
     return res;
@@ -82,7 +111,7 @@ export function convertPointFromNode(node, point, from, options) {
         point = transformPointBox(point, options.fromBox, (node.ownerDocument.defaultView ?? window).getComputedStyle(from), 1);
     }
     let res = m2.transformPoint(m1.transformPoint(point));
-    if (options?.toBox && options?.toBox !== 'border' && node instanceof (node.ownerDocument.defaultView ?? window).Element) {
+    if (options?.toBox && options?.toBox !== 'border' && (node instanceof Element || node instanceof (node.ownerDocument.defaultView ?? window).Element)) {
         res = transformPointBox(res, options.toBox, (node.ownerDocument.defaultView ?? window).getComputedStyle(node), -1);
     }
     return res;
@@ -151,7 +180,7 @@ export function getBoxQuads(node, options) {
     const points = Array(4);
     /** @type {{x: number, y:number}[] } */
     let o = null;
-    if (node instanceof (node.ownerDocument.defaultView ?? window).Element) {
+    if ((node instanceof Element || node instanceof (node.ownerDocument.defaultView ?? window).Element)) {
         if (options?.box === 'margin') {
             const cs = (node.ownerDocument.defaultView ?? window).getComputedStyle(node);
             o = [{ x: parseFloat(cs.marginLeft), y: parseFloat(cs.marginTop) }, { x: -parseFloat(cs.marginRight), y: parseFloat(cs.marginTop) }, { x: -parseFloat(cs.marginRight), y: -parseFloat(cs.marginBottom) }, { x: parseFloat(cs.marginLeft), y: -parseFloat(cs.marginBottom) }];
@@ -205,25 +234,25 @@ function as2DPoint(point) {
 export function getElementSize(node, matrix) {
     let width = 0;
     let height = 0;
-    if (node instanceof (node.ownerDocument.defaultView ?? window).HTMLElement) {
+    if ((node instanceof HTMLElement || node instanceof (node.ownerDocument.defaultView ?? window).HTMLElement)) {
         width = node.offsetWidth;
         height = node.offsetHeight;
     }
-    else if (node instanceof (node.ownerDocument.defaultView ?? window).SVGSVGElement) {
+    else if ((node instanceof SVGSVGElement || node instanceof (node.ownerDocument.defaultView ?? window).SVGSVGElement)) {
         width = node.width.baseVal.value;
         height = node.height.baseVal.value;
     }
-    else if (node instanceof (node.ownerDocument.defaultView ?? window).SVGGraphicsElement) {
+    else if ((node instanceof SVGGraphicsElement || node instanceof (node.ownerDocument.defaultView ?? window).SVGGraphicsElement)) {
         const bbox = node.getBBox();
         width = bbox.width;
         height = bbox.height;
     }
-    else if (node instanceof (node.ownerDocument.defaultView ?? window).MathMLElement) {
+    else if ((node instanceof MathMLElement || node instanceof (node.ownerDocument.defaultView ?? window).MathMLElement)) {
         const bbox = node.getBoundingClientRect();
         width = bbox.width / (matrix?.a ?? 1);
         height = bbox.height / (matrix?.d ?? 1);
     }
-    else if (node instanceof (node.ownerDocument.defaultView ?? window).Text) {
+    else if ((node instanceof Text || node instanceof (node.ownerDocument.defaultView ?? window).Text)) {
         const range = document.createRange();
         range.selectNodeContents(node);
         const targetRect = range.getBoundingClientRect();
@@ -238,10 +267,10 @@ export function getElementSize(node, matrix) {
 * @param {HTMLIFrameElement[]} iframes
 */
 function getElementOffsetsInContainer(node, includeScroll, iframes) {
-    if (node instanceof (node.ownerDocument.defaultView ?? window).HTMLElement) {
+    if ((node instanceof HTMLElement || node instanceof (node.ownerDocument.defaultView ?? window).HTMLElement)) {
         return new DOMPoint(node.offsetLeft - (includeScroll ? node.scrollLeft : 0), node.offsetTop - (includeScroll ? node.scrollTop : 0));
     }
-    else if (node instanceof (node.ownerDocument.defaultView ?? window).Text) {
+    else if ((node instanceof Text || node instanceof (node.ownerDocument.defaultView ?? window).Text)) {
         const range = document.createRange();
         range.selectNodeContents(node);
         const r1 = range.getBoundingClientRect();
@@ -253,8 +282,8 @@ function getElementOffsetsInContainer(node, includeScroll, iframes) {
         const zY = parent.offsetHeight / r2.height;
         return new DOMPoint((r1.x - r2.x) * zX, (r1.y - r2.y) * zY);
     }
-    else if (node instanceof (node.ownerDocument.defaultView ?? window).Element) {
-        if (node instanceof (node.ownerDocument.defaultView ?? window).SVGGraphicsElement && !(node instanceof (node.ownerDocument.defaultView ?? window).SVGSVGElement)) {
+    else if ((node instanceof Element || node instanceof (node.ownerDocument.defaultView ?? window).Element)) {
+        if ((node instanceof SVGGraphicsElement || node instanceof (node.ownerDocument.defaultView ?? window).SVGGraphicsElement) && !((node instanceof SVGSVGElement || node instanceof (node.ownerDocument.defaultView ?? window).SVGSVGElement))) {
             const bb = node.getBBox();
             return new DOMPoint(bb.x, bb.y);
         }
@@ -315,8 +344,8 @@ export function getResultingTransformationBetweenElementAndAllAncestors(node, an
             }
         }
         else {
-            if (actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).HTMLElement) {
-                if (lastOffsetParent !== actualElement.offsetParent && !(actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).HTMLSlotElement)) {
+            if ((actualElement instanceof HTMLElement || actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).HTMLElement)) {
+                if (lastOffsetParent !== actualElement.offsetParent && !((actualElement instanceof HTMLSlotElement || actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).HTMLSlotElement))) {
                     const offsets = getElementOffsetsInContainer(actualElement, actualElement !== node, iframes);
                     lastOffsetParent = actualElement.offsetParent;
                     const mvMat = new DOMMatrix().translate(offsets.x, offsets.y);
@@ -360,14 +389,14 @@ export function getResultingTransformationBetweenElementAndAllAncestors(node, an
 * @returns {Element}
 */
 function getParentElementIncludingSlots(node, iframes) {
-    if (node instanceof (node.ownerDocument.defaultView ?? window).Element && node.assignedSlot)
+    if ((node instanceof Element || node instanceof (node.ownerDocument.defaultView ?? window).Element) && node.assignedSlot)
         return node.assignedSlot;
     if (node.parentElement == null) {
-        if (node.parentNode instanceof (node.ownerDocument.defaultView ?? window).ShadowRoot) {
+        if ((node.parentNode instanceof ShadowRoot || node.parentNode instanceof (node.ownerDocument.defaultView ?? window).ShadowRoot)) {
             return node.parentNode.host;
         }
     }
-    if (node instanceof (node.ownerDocument.defaultView ?? window).HTMLHtmlElement) {
+    if ((node instanceof HTMLHtmlElement || node instanceof (node.ownerDocument.defaultView ?? window).HTMLHtmlElement)) {
         if (iframes) {
             for (const f of iframes)
                 if (f?.contentDocument == node.ownerDocument)
@@ -381,7 +410,7 @@ function getParentElementIncludingSlots(node, iframes) {
 * @param {HTMLIFrameElement[]=} iframes
 */
 export function getElementCombinedTransform(element, iframes) {
-    if (element instanceof (element.ownerDocument.defaultView ?? window).Text)
+    if ((element instanceof Text || element instanceof (element.ownerDocument.defaultView ?? window).Text))
         return new DOMMatrix;
     //https://www.w3.org/TR/css-transforms-2/#ctm
     let s = (element.ownerDocument.defaultView ?? window).getComputedStyle(element);

package/www/node_modules/@node-projects/web-component-designer/dist/elements/services/dragDropService/DragDropService.js

@@ -47,8 +47,11 @@ export class DragDropService {
         const containerPos = designerCanvas.getNormalizedElementCoordinates(newContainer.element);
         const evCoord = designerCanvas.getNormalizedEventCoordinates(event);
         const pos = { x: evCoord.x - containerPos.x, y: evCoord.y - containerPos.y };
-        containerService.place(event, designerCanvas, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
-        containerService.finishPlace(event, designerCanvas, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
+        let offset = { x: 0, y: 0 };
+        if (elementDefinition.mouseOffset)
+            offset = elementDefinition.mouseOffset;
+        containerService.place(event, designerCanvas, newContainer, offset, { x: 0, y: 0 }, pos, [di]);
+        containerService.finishPlace(event, designerCanvas, newContainer, offset, { x: 0, y: 0 }, pos, [di]);
         requestAnimationFrame(() => {
             designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di], event);
             grp.commit();

package/www/node_modules/@node-projects/web-component-designer-visualization-addons/dist/components/SimpleScriptEditor.js

@@ -123,7 +123,10 @@ export class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend
             if (!property.specialAllreadyAdded) {
                 //@ts-ignore
                 property.specialAllreadyAdded = true;
-                if ((typeof currentValue === 'object' && currentValue !== null) || property.format === 'complex') {
+                if (property.format === 'collection') {
+                    //TODO: create a collection edt. in property grid control used
+                }
+                else if ((typeof currentValue === 'object' && currentValue !== null) || property.format === 'complex') {
                     let rB = document.createElement('button');
                     rB.style.height = 'calc(100% - 6px)';
                     rB.style.position = 'relative';

package/www/node_modules/@node-projects/web-component-designer-visualization-addons/dist/helpers/BindingsHelper.js

@@ -897,37 +897,62 @@ export class BindingsHelper {
             else {
                 const stringValue = (v != null ? v.toString() : v);
                 if (stringValue in binding[1].converter) {
-                    v = new Function(signalVarNames, 'return `' + binding[1].converter[stringValue] + '`')(...valuesObject);
+                    const cvVal = binding[1].converter[stringValue];
+                    if (typeof cvVal === 'string')
+                        v = new Function(signalVarNames, 'return `' + binding[1].converter[stringValue] + '`')(...valuesObject);
+                    else
+                        v = cvVal;
                 }
                 else {
+                    let endedWithBreak = false;
                     //@ts-ignore
                     const nr = parseFloat(v);
                     for (let c in binding[1].converter) {
                         if (c.length > 2 && c[0] === '>' && c[1] === '=') {
                             const wr = parseFloat(c.substring(2));
                             if (nr >= wr) {
-                                v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                const cvVal = binding[1].converter[c];
+                                if (typeof cvVal === 'string')
+                                    v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                else
+                                    v = cvVal;
+                                endedWithBreak = true;
                                 break;
                             }
                         }
                         else if (c.length > 2 && c[0] === '<' && c[1] === '=') {
                             const wr = parseFloat(c.substring(2));
                             if (nr <= wr) {
-                                v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                const cvVal = binding[1].converter[c];
+                                if (typeof cvVal === 'string')
+                                    v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                else
+                                    v = cvVal;
+                                endedWithBreak = true;
                                 break;
                             }
                         }
                         else if (c.length > 1 && c[0] === '>') {
                             const wr = parseFloat(c.substring(1));
                             if (nr > wr) {
-                                v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                const cvVal = binding[1].converter[c];
+                                if (typeof cvVal === 'string')
+                                    v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                else
+                                    v = cvVal;
+                                endedWithBreak = true;
                                 break;
                             }
                         }
                         else if (c.length > 1 && c[0] === '<') {
                             const wr = parseFloat(c.substring(1));
                             if (nr < wr) {
-                                v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                const cvVal = binding[1].converter[c];
+                                if (typeof cvVal === 'string')
+                                    v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                else
+                                    v = cvVal;
+                                endedWithBreak = true;
                                 break;
                             }
                         }
@@ -935,12 +960,19 @@ export class BindingsHelper {
                             const sp = c.split('-');
                             if (sp.length > 1) {
                                 if ((sp[0] === '' || nr >= parseFloat(sp[0])) && (sp[1] === '' || parseFloat(sp[1]) >= nr)) {
-                                    v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                    const cvVal = binding[1].converter[c];
+                                    if (typeof cvVal === 'string')
+                                        v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                    else
+                                        v = cvVal;
+                                    endedWithBreak = true;
                                     break;
                                 }
                             }
                         }
                     }
+                    if (!endedWithBreak && binding[1].converterDefault !== undefined)
+                        v = binding[1].converterDefault;
                 }
             }
         }