iobroker.webui 1.38.3 → 1.38.7

package/README.md

@@ -133,6 +133,18 @@ runtime.html?screenName=screen2
 	Placeholder for next versions:
 	### __WORK IN PROGRESS__
 -->
+### 1.38.7 (2025-11-29)
+- upgrade designer once more
+
+### 1.38.6 (2025-11-24)
+- fix package.lock
+
+### 1.38.5 (2025-11-24)
+- fix package.lock
+
+### 1.38.4 (2025-11-24)
+- update npm packages again (for fixes in box quads)
+
 ### 1.38.3 (2025-11-22)
 - update npm packges (fixes box quads)
 

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "webui",
-    "version": "1.38.3",
+    "version": "1.38.7",
     "titleLang": {
       "en": "webui",
       "de": "webui",
@@ -29,6 +29,58 @@
       "zh-cn": "使用万维网传送器的高锰用户接口"
     },
     "news": {
+      "1.38.7": {
+        "en": "upgrade designer once more",
+        "de": "upgrade-designer noch einmal",
+        "ru": "обновление дизайнера снова",
+        "pt": "atualizar o designer mais uma vez",
+        "nl": "upgrade ontwerper opnieuw",
+        "fr": "upgrade designer une fois de plus",
+        "it": "aggiornamento designer ancora una volta",
+        "es": "diseñador de actualización una vez más",
+        "pl": "upgrade designer jeszcze raz",
+        "uk": "модернізація дизайнера",
+        "zh-cn": "再次升级设计器"
+      },
+      "1.38.6": {
+        "en": "fix package.lock",
+        "de": "paket reparieren.lock",
+        "ru": "исправить упаковку",
+        "pt": "corrigir pacote.lock",
+        "nl": "fix pakket.lock",
+        "fr": "réparer paquet.lock",
+        "it": "fix package.lock",
+        "es": "arreglar paquete.lock",
+        "pl": "fix package.lock",
+        "uk": "засупу 10 ток",
+        "zh-cn": "固定软件包.lock"
+      },
+      "1.38.5": {
+        "en": "fix package.lock",
+        "de": "paket reparieren.lock",
+        "ru": "исправить упаковку",
+        "pt": "corrigir pacote.lock",
+        "nl": "fix pakket.lock",
+        "fr": "réparer paquet.lock",
+        "it": "fix package.lock",
+        "es": "arreglar paquete.lock",
+        "pl": "fix package.lock",
+        "uk": "засупу 10 ток",
+        "zh-cn": "固定软件包.lock"
+      },
+      "1.38.4": {
+        "en": "update npm packages again (for fixes in box quads)",
+        "de": "npm pakete erneut aktualisieren (für fixes in box quads)",
+        "ru": "обновление пакетов npm (для исправлений в квадратах коробки)",
+        "pt": "atualizar pacotes npm novamente (para correções em quads de caixa)",
+        "nl": "npm-pakketten opnieuw bijwerken (voor fixes in box quads)",
+        "fr": "mettre à jour à nouveau les paquets npm (pour les corrections dans la case quads)",
+        "it": "aggiornamento npm pacchetti di nuovo (per correzioni in box quads)",
+        "es": "actualizar paquetes npm de nuevo (para correcciones en cuádruples de caja)",
+        "pl": "aktualizacja pakietów npm ponownie (dla poprawek w kwadratach pola)",
+        "uk": "оновлення npm пакетів знову (для фіксації в квадроциклах коробки)",
+        "zh-cn": "再次更新 npm 包( 用于在框四区修正)"
+      },
       "1.38.3": {
         "en": "update npm packges (fixes box quads)",
         "de": "update npm packges (fixes box quads)",
@@ -67,58 +119,6 @@
         "pl": "naprawić po zmianie połączenia",
         "uk": "фіксувати після змін з'єднання",
         "zh-cn": "连接更改后修复"
-      },
-      "1.38.0": {
-        "en": "update npms",
-        "de": "aktualisierung von npms",
-        "ru": "обновление npms",
-        "pt": "atualizar npms",
-        "nl": "npms bijwerken",
-        "fr": "mettre à jour npms",
-        "it": "aggiornamento npm",
-        "es": "actualización npms",
-        "pl": "update npms",
-        "uk": "оновлення npms",
-        "zh-cn": "更新 npms"
-      },
-      "1.37.0": {
-        "en": "fix bug in bundled code\nuse minified code for config",
-        "de": "fehler in gebündeltem code beheben\nminified code für config",
-        "ru": "исправить ошибку in bundled code\nминифицированный код для конфигурирования",
-        "pt": "corrigir o erro no código empacotado\nusar código minimizado para configuração",
-        "nl": "fix bug in gebundelde code\nvermineerde code voor config gebruiken",
-        "fr": "correction du bogue dans le code groupé\nutiliser le code minifié pour la configuration",
-        "it": "fix bug in codice bundle\nutilizzare il codice miniificato per la configurazione",
-        "es": "solucionar error en código incluido\nuse minified code for config",
-        "pl": "fix błąd w kodzie pakietowym\nużyj minionego kodu dla konfiguracji",
-        "uk": "виправлення помилок в коді\nвикористовуйте норифікований код для налаштування",
-        "zh-cn": "在捆绑的代码中修复错误\n配置使用已修改的代码"
-      },
-      "1.36.0": {
-        "en": "fix some boxQuads edge cases",
-        "de": "befestigen Sie einige BoxQuads Randgehäuse",
-        "ru": "исправьте некоторые случаи BoxQuads edge",
-        "pt": "corrigir algumas caixasQuads edge cases",
-        "nl": "fix sommige doosQuads rand gevallen",
-        "fr": "fixer quelques cas de bord de boxQuads",
-        "it": "risolvere alcuni casi di bordo boxQuads",
-        "es": "arreglar algunas cajas de borde Cuads",
-        "pl": "naprawić kilka skrzynek boxQuads krawędzi",
-        "uk": "закріпити якусь коробкуШвидких крайових випадків",
-        "zh-cn": "修补一些框 Quads 边框"
-      },
-      "1.35.4": {
-        "en": "clear cache on reload",
-        "de": "löschen cache auf nachladen",
-        "ru": "чистый кэш на перезагрузке",
-        "pt": "limpar cache ao recarregar",
-        "nl": "cache wissen bij herladen",
-        "fr": "effacer le cache lors du rechargement",
-        "it": "cache chiara su ricarica",
-        "es": "caché transparente en la recarga",
-        "pl": "klarowna pamięć podręczna przy ponownym załadowaniu",
-        "uk": "прозорий кеш на перевантаження",
-        "zh-cn": "重新装入时清除缓存"
       }
     },
     "icon": "logo.png",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.webui",
-  "version": "1.38.3",
+  "version": "1.38.7",
   "description": "ioBroker webui",
   "type": "module",
   "main": "dist/backend/main.js",
@@ -60,7 +60,7 @@
     "@node-projects/node-html-parser-esm": "^6.4.1",
     "@node-projects/propertygrid.webcomponent": "^1.4.1",
     "@node-projects/splitview.webcomponent": "^1.0.1",
-    "@node-projects/web-component-designer": "^0.1.316",
+    "@node-projects/web-component-designer": "^0.1.321",
     "@node-projects/web-component-designer-codeview-monaco": "^0.1.33",
     "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser": "^0.1.12",
     "@node-projects/web-component-designer-stylesheetservice-css-tools": "^0.1.11",
@@ -93,7 +93,7 @@
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "typescript-json-schema": "^0.66.0",
+    "typescript-json-schema": "^0.67.0",
     "wunderbaum": "0.13.0"
   }
 }

package/www/index.html

@@ -217,7 +217,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.38.3 - 9517cda
+      webui - 1.38.7 - e7559a4
     </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

@@ -69,11 +69,11 @@ export function convertQuadFromNode(node, quad, from, options) {
     const m1 = getResultingTransformationBetweenElementAndAllAncestors(from, document.body, options?.iframes);
     const m2 = getResultingTransformationBetweenElementAndAllAncestors(node, document.body, options?.iframes).inverse();
     if (options?.fromBox && options?.fromBox !== 'border') {
-        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));
+        quad = new DOMQuad(transformPointBox(quad.p1, options.fromBox, getCachedComputedStyle(from), -1), transformPointBox(quad.p2, options.fromBox, getCachedComputedStyle(from), -1), transformPointBox(quad.p3, options.fromBox, getCachedComputedStyle(from), -1), transformPointBox(quad.p4, options.fromBox, getCachedComputedStyle(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 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));
+        res = new DOMQuad(transformPointBox(res.p1, options.toBox, getCachedComputedStyle(node), -1), transformPointBox(res.p2, options.toBox, getCachedComputedStyle(node), -1), transformPointBox(res.p3, options.toBox, getCachedComputedStyle(node), -1), transformPointBox(res.p4, options.toBox, getCachedComputedStyle(node), -1));
     }
     return res;
 }
@@ -88,12 +88,12 @@ export function convertRectFromNode(node, rect, from, options) {
     const m1 = getResultingTransformationBetweenElementAndAllAncestors(from, (node.ownerDocument.defaultView ?? window).document.body.parentElement, options?.iframes);
     const m2 = getResultingTransformationBetweenElementAndAllAncestors(node, (node.ownerDocument.defaultView ?? window).document.body.parentElement, options?.iframes).inverse();
     if (options?.fromBox && options?.fromBox !== 'border') {
-        const p = transformPointBox(new DOMPoint(rect.x, rect.y), options.fromBox, (node.ownerDocument.defaultView ?? window).getComputedStyle(from), 1);
+        const p = transformPointBox(new DOMPoint(rect.x, rect.y), options.fromBox, getCachedComputedStyle(from), 1);
         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 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));
+        res = new DOMQuad(transformPointBox(res.p1, options.toBox, getCachedComputedStyle(node), -1), transformPointBox(res.p2, options.toBox, getCachedComputedStyle(node), -1), transformPointBox(res.p3, options.toBox, getCachedComputedStyle(node), -1), transformPointBox(res.p4, options.toBox, getCachedComputedStyle(node), -1));
     }
     return res;
 }
@@ -108,11 +108,11 @@ export function convertPointFromNode(node, point, from, options) {
     const m1 = getResultingTransformationBetweenElementAndAllAncestors(from, (node.ownerDocument.defaultView ?? window).document.body.parentElement, options?.iframes);
     const m2 = getResultingTransformationBetweenElementAndAllAncestors(node, document.body, options?.iframes).inverse();
     if (options?.fromBox && options?.fromBox !== 'border') {
-        point = transformPointBox(point, options.fromBox, (node.ownerDocument.defaultView ?? window).getComputedStyle(from), 1);
+        point = transformPointBox(point, options.fromBox, getCachedComputedStyle(from), 1);
     }
     let res = m2.transformPoint(m1.transformPoint(point));
     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);
+        res = transformPointBox(res, options.toBox, getCachedComputedStyle(node), -1);
     }
     return res;
 }
@@ -142,15 +142,34 @@ let hash;
 let boxQuadsCache;
 /** @type { Map<string, DOMMatrix> } */
 let transformCache;
+/** @type { WeakMap<Node, CSSStyleDeclaration> } */
+let computedStyleCache;
 let hashId = 0;
 export function clearCache() {
     boxQuadsCache.clear();
     transformCache.clear();
+    computedStyleCache = new WeakMap();
 }
 export function useCache() {
     hash = new WeakMap();
     boxQuadsCache = new Map();
     transformCache = new Map();
+    computedStyleCache = new WeakMap();
+}
+/**
+* @param {Element} element
+* @returns {CSSStyleDeclaration}
+*/
+function getCachedComputedStyle(element) {
+    if (!computedStyleCache) {
+        return (element.ownerDocument.defaultView ?? window).getComputedStyle(element);
+    }
+    let style = computedStyleCache.get(element);
+    if (!style) {
+        style = (element.ownerDocument.defaultView ?? window).getComputedStyle(element);
+        computedStyleCache.set(element, style);
+    }
+    return style;
 }
 /**
 * @param {Node} node
@@ -182,15 +201,15 @@ export function getBoxQuads(node, options) {
     let o = null;
     if ((node instanceof Element || node instanceof (node.ownerDocument.defaultView ?? window).Element)) {
         if (options?.box === 'margin') {
-            const cs = (node.ownerDocument.defaultView ?? window).getComputedStyle(node);
+            const cs = getCachedComputedStyle(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) }];
         }
         else if (options?.box === 'padding') {
-            const cs = (node.ownerDocument.defaultView ?? window).getComputedStyle(node);
+            const cs = getCachedComputedStyle(node);
             o = [{ x: -parseFloat(cs.borderLeftWidth), y: -parseFloat(cs.borderTopWidth) }, { x: parseFloat(cs.borderRightWidth), y: -parseFloat(cs.borderTopWidth) }, { x: parseFloat(cs.borderRightWidth), y: parseFloat(cs.borderBottomWidth) }, { x: -parseFloat(cs.borderLeftWidth), y: parseFloat(cs.borderBottomWidth) }];
         }
         else if (options?.box === 'content') {
-            const cs = (node.ownerDocument.defaultView ?? window).getComputedStyle(node);
+            const cs = getCachedComputedStyle(node);
             o = [{ x: -parseFloat(cs.borderLeftWidth) - parseFloat(cs.paddingLeft), y: -parseFloat(cs.borderTopWidth) - parseFloat(cs.paddingTop) }, { x: parseFloat(cs.borderRightWidth) + parseFloat(cs.paddingRight), y: -parseFloat(cs.borderTopWidth) - parseFloat(cs.paddingTop) }, { x: parseFloat(cs.borderRightWidth) + parseFloat(cs.paddingRight), y: parseFloat(cs.borderBottomWidth) + parseFloat(cs.paddingBottom) }, { x: -parseFloat(cs.borderLeftWidth) - parseFloat(cs.paddingLeft), y: parseFloat(cs.borderBottomWidth) + parseFloat(cs.paddingBottom) }];
         }
     }
@@ -268,12 +287,12 @@ export function getElementSize(node, matrix) {
 */
 function getElementOffsetsInContainer(node, includeScroll, iframes) {
     if ((node instanceof HTMLElement || node instanceof (node.ownerDocument.defaultView ?? window).HTMLElement)) {
-        let cs = (node.ownerDocument.defaultView ?? window).getComputedStyle(node);
+        let cs = getCachedComputedStyle(node);
         if (cs.offsetPath && cs.offsetPath !== 'none') {
             return new DOMPoint(0, 0);
         }
         if (includeScroll) {
-            const cs = (node.ownerDocument.defaultView ?? window).getComputedStyle(node);
+            const cs = getCachedComputedStyle(node);
             return new DOMPoint(node.offsetLeft - (includeScroll ? node.scrollLeft - parseFloat(cs.borderLeftWidth) : 0), node.offsetTop - (includeScroll ? node.scrollTop - parseFloat(cs.borderTopWidth) : 0));
         }
         else {
@@ -297,16 +316,16 @@ function getElementOffsetsInContainer(node, includeScroll, iframes) {
             const bb = node.getBBox();
             return new DOMPoint(bb.x, bb.y);
         }
-        const cs = (node.ownerDocument.defaultView ?? window).getComputedStyle(node);
+        const cs = getCachedComputedStyle(node);
         if (cs.position === 'absolute') {
             return new DOMPoint(parseFloat(cs.left), parseFloat(cs.top));
         }
         const par = getParentElementIncludingSlots(node, iframes);
-        const m = getResultingTransformationBetweenElementAndAllAncestors(par, document.body, iframes);
+        const m = getResultingTransformationBetweenElementAndAllAncestors(par, document.body, iframes).inverse();
         const r1 = node.getBoundingClientRect();
-        const r1t = m.inverse().transformPoint(r1);
+        const r1t = m.transformPoint(r1);
         const r2 = par.getBoundingClientRect();
-        const r2t = m.inverse().transformPoint(r2);
+        const r2t = m.transformPoint(r2);
         return new DOMPoint(r1t.x - r2t.x, r1t.y - r2t.y);
     }
 }
@@ -338,7 +357,7 @@ export function getResultingTransformationBetweenElementAndAllAncestors(node, an
     let originalElementAndAllParentsMultipliedMatrix = getElementCombinedTransform(actualElement, iframes);
     let perspectiveParentElement = getParentElementIncludingSlots(actualElement, iframes);
     if (perspectiveParentElement) {
-        let s = (actualElement.ownerDocument.defaultView ?? window).getComputedStyle(perspectiveParentElement);
+        let s = getCachedComputedStyle(perspectiveParentElement);
         if (s.transformStyle !== 'preserve-3d') {
             projectTo2D(originalElementAndAllParentsMultipliedMatrix);
         }
@@ -347,26 +366,25 @@ export function getResultingTransformationBetweenElementAndAllAncestors(node, an
     while (actualElement != ancestor && actualElement != null) {
         const parentElement = getParentElementIncludingSlots(actualElement, iframes);
         if (actualElement.assignedSlot != null) {
-            const st = (perspectiveParentElement.ownerDocument.defaultView ?? window).getComputedStyle(actualElement);
-            if (st.position !== "static") {
-                const mvMat = new DOMMatrix().translate(parseFloat(st.left), parseFloat(st.top));
-                originalElementAndAllParentsMultipliedMatrix = mvMat.multiply(originalElementAndAllParentsMultipliedMatrix);
-            }
+            const l = offsetTopLeftPolyfill(actualElement, 'offsetLeft');
+            const t = offsetTopLeftPolyfill(actualElement, 'offsetTop');
+            const mvMat = new DOMMatrix().translateSelf(l, t);
+            originalElementAndAllParentsMultipliedMatrix = mvMat.multiplySelf(originalElementAndAllParentsMultipliedMatrix);
         }
         else {
             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);
-                    originalElementAndAllParentsMultipliedMatrix = mvMat.multiply(originalElementAndAllParentsMultipliedMatrix);
+                    const mvMat = new DOMMatrix().translateSelf(offsets.x, offsets.y);
+                    originalElementAndAllParentsMultipliedMatrix = mvMat.multiplySelf(originalElementAndAllParentsMultipliedMatrix);
                 }
             }
             else {
                 const offsets = getElementOffsetsInContainer(actualElement, actualElement !== node, iframes);
                 lastOffsetParent = null;
-                const mvMat = new DOMMatrix().translate(offsets.x, offsets.y);
-                originalElementAndAllParentsMultipliedMatrix = mvMat.multiply(originalElementAndAllParentsMultipliedMatrix);
+                const mvMat = new DOMMatrix().translateSelf(offsets.x, offsets.y);
+                originalElementAndAllParentsMultipliedMatrix = mvMat.multiplySelf(originalElementAndAllParentsMultipliedMatrix);
             }
         }
         if (parentElement) {
@@ -375,7 +393,7 @@ export function getResultingTransformationBetweenElementAndAllAncestors(node, an
                 originalElementAndAllParentsMultipliedMatrix = parentElementMatrix.multiply(originalElementAndAllParentsMultipliedMatrix);
             perspectiveParentElement = getParentElementIncludingSlots(parentElement, iframes);
             if (perspectiveParentElement) {
-                const s = (perspectiveParentElement.ownerDocument.defaultView ?? window).getComputedStyle(perspectiveParentElement);
+                const s = getCachedComputedStyle(perspectiveParentElement);
                 if (s.transformStyle !== 'preserve-3d') {
                     projectTo2D(originalElementAndAllParentsMultipliedMatrix);
                 }
@@ -423,16 +441,13 @@ export function getElementCombinedTransform(element, iframes) {
     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);
+    let s = getCachedComputedStyle(element);
     let m = new DOMMatrix();
     const origin = s.transformOrigin.split(' ');
     const originX = parseFloat(origin[0]);
     const originY = parseFloat(origin[1]);
     const originZ = origin[2] ? parseFloat(origin[2]) : 0;
     const mOri = new DOMMatrix().translate(originX, originY, originZ);
-    if (s.offsetPath && s.offsetPath !== 'none') {
-        m = m.multiply(computeOffsetTransformMatrix(element));
-    }
     if (s.translate != 'none' && s.translate) {
         let tr = s.translate;
         if (tr.includes('%')) {
@@ -444,24 +459,27 @@ export function getElementCombinedTransform(element, iframes) {
                 v[1] = (parseFloat(v[1]) * r.height / 100) + 'px';
             tr = v.join(',');
         }
-        m = m.multiply(new DOMMatrix('translate(' + tr.replace(' ', ',') + ')'));
+        m.multiplySelf(new DOMMatrix('translate(' + tr.replaceAll(' ', ',') + ')'));
     }
     if (s.rotate != 'none' && s.rotate) {
-        m = m.multiply(new DOMMatrix('rotate(' + s.rotate.replace(' ', ',') + ')'));
+        m.multiplySelf(new DOMMatrix('rotate(' + s.rotate.replaceAll(' ', ',') + ')'));
     }
     if (s.scale != 'none' && s.scale) {
-        m = m.multiply(new DOMMatrix('scale(' + s.scale.replace(' ', ',') + ')'));
+        m.multiplySelf(new DOMMatrix('scale(' + s.scale.replaceAll(' ', ',') + ')'));
     }
     if (s.transform != 'none' && s.transform) {
-        m = m.multiply(new DOMMatrix(s.transform));
+        m.multiplySelf(new DOMMatrix(s.transform));
+    }
+    m = mOri.multiply(m.multiply(mOri.inverse()));
+    if (s.offsetPath && s.offsetPath !== 'none') {
+        m.multiplySelf(computeOffsetTransformMatrix(element));
     }
-    let res = mOri.multiply(m.multiply(mOri.inverse()));
     //@ts-ignore
     const pt = getElementPerspectiveTransform(element, iframes);
     if (pt != null) {
-        res = pt.multiply(res);
+        m = pt.multiply(m);
     }
-    return res;
+    return m;
 }
 /**
 * project a DOM-Matrix to 2D (from firefox matrix.h)
@@ -503,7 +521,7 @@ function getElementPerspectiveTransform(element, iframes) {
     const perspectiveNode = getParentElementIncludingSlots(element, iframes);
     if (perspectiveNode) {
         //https://drafts.csswg.org/css-transforms-2/#perspective-matrix-computation
-        let s = (element.ownerDocument.defaultView ?? window).getComputedStyle(perspectiveNode);
+        let s = getCachedComputedStyle(perspectiveNode);
         if (s.perspective !== 'none') {
             let m = new DOMMatrix();
             let p = parseFloat(s.perspective);
@@ -522,11 +540,12 @@ function getElementPerspectiveTransform(element, iframes) {
     return null;
 }
 function computeOffsetTransformMatrix(elem) {
-    const cs = (elem.ownerDocument.defaultView ?? window).getComputedStyle(elem);
+    const cs = getCachedComputedStyle(elem);
     const offsetPath = cs.offsetPath; // e.g. "path('M0,0 ...')"
     const offsetDistance = cs.offsetDistance; // e.g. "50%"
     const offsetRotate = cs.offsetRotate; // e.g. "auto", "45deg", "auto 30deg"
     const offsetAnchor = cs.offsetAnchor;
+    const transformOrigin = cs.transformOrigin;
     // Parse offset-distance (px or %)
     let distance = parseOffsetDistance(offsetDistance);
     // Compute position & tangent on path
@@ -541,21 +560,19 @@ function computeOffsetTransformMatrix(elem) {
     else {
         rotateFinal = parseFloat(offsetRotate);
     }
-    let anchor = parseOffsetAnchor(offsetAnchor, elem);
-    const anchorMatrix = new DOMMatrix()
-        .translateSelf(-anchor.x, -anchor.y);
-    let m = anchorMatrix.translateSelf(x, y);
-    m = m.rotateSelf(rotateFinal);
+    const anchor = parseOffsetAnchor(offsetAnchor, transformOrigin, elem);
+    const anchorMatrix = new DOMMatrix().translateSelf(-anchor.x, -anchor.y);
+    let m = anchorMatrix.translate(x, y);
+    m.multiplySelf(anchorMatrix.invertSelf());
+    m.rotateSelf(rotateFinal);
+    m.translateSelf(-anchor.x, -anchor.y);
     return m;
 }
-function parseOffsetAnchor(str, elem) {
-    let width = elem.offsetWidth;
-    let height = elem.offsetHeight;
-    //if (!(elem instanceof HTMLElement)) {
-    //    const rect = elem.getBoundingClientRect();
-    //}
+function parseOffsetAnchor(str, transformOrigin, elem) {
+    const width = elem.offsetWidth;
+    const height = elem.offsetHeight;
     if (!str || str === "auto") {
-        return { x: width / 2, y: height / 2 };
+        str = transformOrigin;
     }
     const parts = str.split(/\s+/);
     if (parts.length === 1) {
@@ -773,4 +790,86 @@ function rectPath(top, left, right, bottom, t) {
     let y = bottom - dist;
     return { x: left, y, angle: 270 };
 }
+//Code from: https://github.com/floating-ui/floating-ui/blob/master/packages/utils/src/dom.ts
+const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
+const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
+const containValues = ['paint', 'layout', 'strict', 'content'];
+function isElement(value) {
+    const elType = value?.ownerDocument?.defaultView?.Element;
+    return value instanceof Element || (elType != null && value instanceof elType);
+}
+/**
+ *
+ * @param {Element | CSSStyleDeclaration} elementOrCss
+ * @returns {boolean}
+ */
+function isContainingBlock(elementOrCss) {
+    /** @type {CSSStyleDeclaration } */
+    //@ts-ignore
+    const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+    // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+    return (transformProperties.some((value) => css[value] ? css[value] !== 'none' : false) ||
+        (css.containerType ? css.containerType !== 'normal' : false) ||
+        (css.backdropFilter ? css.backdropFilter !== 'none' : false) ||
+        (css.filter ? css.filter !== 'none' : false) ||
+        willChangeValues.some((value) => (css.willChange || '').includes(value)) ||
+        containValues.some((value) => (css.contain || '').includes(value)));
+}
+//Code from: https://github.com/jcfranco/composed-offset-position/blob/main/src/index.ts
+function flatTreeParent(element) {
+    if (element.assignedSlot)
+        return element.assignedSlot;
+    if (element.parentNode instanceof ShadowRoot)
+        return element.parentNode.host;
+    return element.parentNode;
+}
+function ancestorTreeScopes(element) {
+    const scopes = new Set();
+    let currentScope = element.getRootNode();
+    while (currentScope) {
+        scopes.add(currentScope);
+        currentScope = currentScope.parentNode
+            ? currentScope.parentNode.getRootNode()
+            : null;
+    }
+    return scopes;
+}
+function offsetParentPolyfill(element) {
+    // Do an initial walk to check for display:none ancestors.
+    for (let ancestor = element; ancestor; ancestor = flatTreeParent(ancestor)) {
+        if (!(ancestor instanceof Element))
+            continue;
+        if (getCachedComputedStyle(ancestor).display === 'none')
+            return null;
+    }
+    for (let ancestor = flatTreeParent(element); ancestor; ancestor = flatTreeParent(ancestor)) {
+        if (!(ancestor instanceof Element))
+            continue;
+        const style = getCachedComputedStyle(ancestor);
+        if (style.display === 'contents')
+            continue;
+        if (style.position !== 'static' || isContainingBlock(style))
+            return ancestor;
+        if (ancestor.tagName === 'BODY')
+            return ancestor;
+    }
+    return null;
+}
+/**
+ *
+ * @param {*} element
+ * @param {'offsetTop' | 'offsetLeft'} offsetTopOrLeft
+ * @returns
+ */
+function offsetTopLeftPolyfill(element, offsetTopOrLeft) {
+    let value = element[offsetTopOrLeft];
+    let nextOffsetParent = offsetParentPolyfill(element);
+    const scopes = ancestorTreeScopes(element);
+    while (nextOffsetParent && !scopes.has(nextOffsetParent.getRootNode())) {
+        value -= nextOffsetParent[offsetTopOrLeft];
+        nextOffsetParent = offsetParentPolyfill(nextOffsetParent);
+    }
+    return value;
+}
 //# sourceMappingURL=getBoxQuads.js.map

package/www/node_modules/@node-projects/web-component-designer/dist/elements/item/DesignItem.js

@@ -270,7 +270,8 @@ export class DesignItem {
         grp.commit();
     }
     get innerHTML() {
-        return this.element.innerHTML;
+        const innerHTML = DomConverter.ConvertToString([...this.children()], false);
+        return innerHTML;
     }
     set innerHTML(value) {
         if (this.nodeType != NodeType.TextNode) {

package/www/node_modules/@node-projects/web-component-designer/dist/elements/widgets/designerView/tools/PointerTool.js

@@ -302,15 +302,18 @@ export class PointerTool {
                             else {
                                 const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
                                 if (!this._started) {
-                                    for (const item of this._actionStartedDesignItems) {
-                                        designerCanvas.extensionManager.removeExtension(item, ExtensionType.Placement);
-                                        designerCanvas.extensionManager.removeExtension(item, ExtensionType.MouseOver);
-                                        designerCanvas.extensionManager.applyExtension(item, ExtensionType.Placement, event);
+                                    if (!currentContainerService.startPlacementAllowed || currentContainerService.startPlacementAllowed(event, designerCanvas, this._actionStartedDesignItem.parent, this._actionStartedDesignItems)) {
+                                        for (const item of this._actionStartedDesignItems) {
+                                            designerCanvas.extensionManager.removeExtension(item, ExtensionType.Placement);
+                                            designerCanvas.extensionManager.removeExtension(item, ExtensionType.MouseOver);
+                                            designerCanvas.extensionManager.applyExtension(item, ExtensionType.Placement, event);
+                                        }
+                                        currentContainerService.startPlace(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
+                                        this._started = true;
                                     }
-                                    currentContainerService.startPlace(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
-                                    this._started = true;
                                 }
-                                currentContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
+                                else
+                                    currentContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
                             }
                             designerCanvas.extensionManager.refreshExtensions(this._actionStartedDesignItems, null, event, null, 20);
                         }