@node-projects/web-component-designer 0.2.3 → 0.2.4

package/dist/elements/widgets/designerView/extensions/svg/geometry/SvgRectGeometryReader.js

@@ -1,11 +1,41 @@
 import { SegmentType } from './IGeometry.js';
+const rectGeometryProperties = ['x', 'y', 'width', 'height'];
+function getRectSerializationHint(rect, property) {
+    const styleValue = rect.style.getPropertyValue(property).trim();
+    if (styleValue) {
+        return { target: 'style', unit: extractStyleUnit(styleValue) };
+    }
+    return { target: 'attribute' };
+}
+function extractStyleUnit(value) {
+    const match = value.trim().match(/^-?(?:\d+|\d*\.\d+)([a-z%]*)$/i);
+    if (match && match[1]) {
+        return match[1];
+    }
+    return 'px';
+}
+function serializeRectValue(property, value, hints) {
+    const hint = hints?.[property];
+    if (hint?.target === 'style') {
+        return {
+            attribute: property,
+            value: `${value}${hint.unit ?? 'px'}`,
+            target: 'style'
+        };
+    }
+    return {
+        attribute: property,
+        value: value.toString()
+    };
+}
 export class SvgRectGeometryReader {
     read(element) {
         const rect = element;
-        const x = rect.x.baseVal.value;
-        const y = rect.y.baseVal.value;
-        const w = rect.width.baseVal.value;
-        const h = rect.height.baseVal.value;
+        const bbox = rect.getBBox();
+        const x = bbox.x;
+        const y = bbox.y;
+        const w = bbox.width;
+        const h = bbox.height;
         const segments = [
             { type: SegmentType.Move, relative: false, point: { x, y } },
             { type: SegmentType.Line, relative: false, point: { x: x + w, y } },
@@ -13,7 +43,8 @@ export class SvgRectGeometryReader {
             { type: SegmentType.Line, relative: false, point: { x, y: y + h } },
             { type: SegmentType.Close, relative: false, point: { x, y } },
         ];
-        return { segments, closed: true };
+        const serializationHints = Object.fromEntries(rectGeometryProperties.map(property => [property, getRectSerializationHint(rect, property)]));
+        return { segments, closed: true, serializationHints };
     }
     serialize(geometry) {
         const pts = geometry.segments.filter(s => s.type !== SegmentType.Close);
@@ -26,10 +57,10 @@ export class SvgRectGeometryReader {
         const maxX = Math.max(...xs);
         const maxY = Math.max(...ys);
         return [
-            { attribute: 'x', value: minX.toString() },
-            { attribute: 'y', value: minY.toString() },
-            { attribute: 'width', value: (maxX - minX).toString() },
-            { attribute: 'height', value: (maxY - minY).toString() },
+            serializeRectValue('x', minX, geometry.serializationHints),
+            serializeRectValue('y', minY, geometry.serializationHints),
+            serializeRectValue('width', maxX - minX, geometry.serializationHints),
+            serializeRectValue('height', maxY - minY, geometry.serializationHints),
         ];
     }
 }

package/dist/elements/widgets/designerView/extensions/svg/geometry/SvgRectGeometryReader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SvgRectGeometryReader.js","sourceRoot":"","sources":["../../../../../../../src/elements/widgets/designerView/extensions/svg/geometry/SvgRectGeometryReader.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"SvgRectGeometryReader.js","sourceRoot":"","sources":["../../../../../../../src/elements/widgets/designerView/extensions/svg/geometry/SvgRectGeometryReader.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4F,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEvI,MAAM,sBAAsB,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,CAAU,CAAC;AAGtE,SAAS,wBAAwB,CAAC,IAAoB,EAAE,QAA8B;IACpF,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC;IAChE,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,gBAAgB,CAAC,UAAU,CAAC,EAAE,CAAC;IACjE,CAAC;IACD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AACjC,CAAC;AAED,SAAS,gBAAgB,CAAC,KAAa;IACrC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,gCAAgC,CAAC,CAAC;IACnE,IAAI,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QACtB,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,kBAAkB,CAAC,QAA8B,EAAE,KAAa,EAAE,KAAuC;IAChH,MAAM,IAAI,GAAG,KAAK,EAAE,CAAC,QAAQ,CAAC,CAAC;IAC/B,IAAI,IAAI,EAAE,MAAM,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO;YACL,SAAS,EAAE,QAAQ;YACnB,KAAK,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE;YACrC,MAAM,EAAE,OAAO;SAChB,CAAC;IACJ,CAAC;IAED,OAAO;QACL,SAAS,EAAE,QAAQ;QACnB,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;KACxB,CAAC;AACJ,CAAC;AAED,MAAM,OAAO,qBAAqB;IAEhC,IAAI,CAAC,OAAgB;QACnB,MAAM,IAAI,GAAG,OAAyB,CAAC;QACvC,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC5B,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;QACjB,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;QACjB,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACrB,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;QAEtB,MAAM,QAAQ,GAAuB;YACnC,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE;YAC5D,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;YACnE,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE;YAC1E,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE;YACnE,EAAE,IAAI,EAAE,WAAW,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE;SAC9D,CAAC;QAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,WAAW,CAC3C,sBAAsB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,wBAAwB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAC7F,CAAC;QAEF,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC;IACxD,CAAC;IAED,SAAS,CAAC,QAAmB;QAC3B,MAAM,GAAG,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,KAAK,CAAC,CAAC;QACxE,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO,EAAE,CAAC;QAE9B,MAAM,EAAE,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACnC,MAAM,EAAE,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACnC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;QAE7B,OAAO;YACL,kBAAkB,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,CAAC,kBAAkB,CAAC;YAC1D,kBAAkB,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,CAAC,kBAAkB,CAAC;YAC1D,kBAAkB,CAAC,OAAO,EAAE,IAAI,GAAG,IAAI,EAAE,QAAQ,CAAC,kBAAkB,CAAC;YACrE,kBAAkB,CAAC,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAE,QAAQ,CAAC,kBAAkB,CAAC;SACvE,CAAC;IACJ,CAAC;CACF"}