Merge pull request #4 from toshusai/update-path-rendering

Fix path rendering issue
toshusai · Mar 13, 2024 · 5bed07c · 5bed07c
2 parents 4e7af75 + 97841cc
commit 5bed07c
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 32 deletions.
diff --git a/src/components/CubicControls/__snapshots__/index.stories.tsx.snap b/src/components/CubicControls/__snapshots__/index.stories.tsx.snap
@@ -7,7 +7,7 @@ exports[`Controls/CubicControls Default smoke-test 1`] = `
        height="108"
        viewbox="-4 -4 108 108"
        class="cmpui_curve-controls-svg"
-       style="position: absolute; left: -4px; top: -4px; width: 108px; height: 108px; pointer-events: none;"
+       style="position: absolute; overflow: visible; left: -4px; top: -4px; width: 108px; height: 108px; pointer-events: none;"
   >
     <path d="M 0 100"
           stroke-width="1"

diff --git a/src/components/Path/__snapshots__/index.stories.tsx.snap b/src/components/Path/__snapshots__/index.stories.tsx.snap
@@ -1,21 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Controls/Path Basic smoke-test 1`] = `
-<svg width="208"
-     height="208"
-     viewbox="-4 -4 208 208"
-     class="cmpui_curve-controls-svg"
-     style="position: absolute; left: -4px; top: -4px; width: 208px; height: 208px;"
->
-  <path d="M 0 0"
-        stroke-width="1"
-        fill="none"
+<div style="width: 200px; height: 200px; position: relative;">
+  <svg stroke="var(--cmpui-primary-color)"
+       width="208"
+       height="208"
+       viewbox="-4 -4 208 208"
+       class="cmpui_curve-controls-svg"
+       style="position: absolute; overflow: visible; left: -4px; top: -4px; width: 208px; height: 208px;"
   >
-  </path>
-  <path d="M 0 0 C 100 0 100 200 200 200"
-        stroke-width="1"
-        fill="none"
-  >
-  </path>
-</svg>
+    <path d="M 0 0"
+          stroke-width="1"
+          fill="none"
+    >
+    </path>
+    <path d="M 0 0 C 100 0 100 200 200 200"
+          stroke-width="1"
+          fill="none"
+    >
+    </path>
+  </svg>
+</div>
 `;
diff --git a/src/components/Path/index.stories.tsx b/src/components/Path/index.stories.tsx
@@ -12,12 +12,21 @@ type Story = StoryObj<typeof Path>;
 export const Basic: Story = {
   render: function Render() {
     return (
-      <Path
-        commands={[
-          { type: "move", x: 0, y: 0 },
-          { type: "cubic", x: 200, y: 200, x1: 100, y1: 0, x2: 100, y2: 200 },
-        ]}
-      />
+      <div
+        style={{
+          width: 200,
+          height: 200,
+          position: "relative",
+        }}
+      >
+        <Path
+          stroke="var(--cmpui-primary-color)"
+          commands={[
+            { type: "move", x: 0, y: 0 },
+            { type: "cubic", x: 200, y: 200, x1: 100, y1: 0, x2: 100, y2: 200 },
+          ]}
+        />
+      </div>
     );
   },
 };
diff --git a/src/components/Path/index.tsx b/src/components/Path/index.tsx
@@ -21,15 +21,6 @@ export function Path({
 
   const offset = 4;
 
-  useEffect(() => {
-    if (!ref.current) return;
-    const bbox = ref.current.getBBox();
-    setX(bbox.x - offset);
-    setY(bbox.y - offset);
-    setWidth(bbox.width + offset * 2);
-    setHeight(bbox.height + offset * 2);
-  }, [ref.current, setX, setY, setWidth, setHeight]);
-
   function commandToD(command: Command[][0]) {
     switch (command.type) {
       case "move":
@@ -43,13 +34,36 @@ export function Path({
     }
   }
 
+  const pathRefs = React.useRef<SVGPathElement[]>([]);
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      if (ref.current) {
+        const bbox = ref.current.getBBox();
+        setX(bbox.x - offset);
+        setY(bbox.y - offset);
+        setWidth(bbox.width + offset * 2);
+        setHeight(bbox.height + offset * 2);
+      }
+    });
+
+    pathRefs.current.forEach((path) => {
+      resizeObserver.observe(path);
+    });
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [setX, setY, setWidth, setHeight, pathRefs, ref]);
+
   return (
     <svg
       {...props}
       width={width}
       height={height}
       style={{
         position: "absolute",
+        overflow: "visible",
         left: x,
         top: y,
         width,
@@ -76,6 +90,11 @@ export function Path({
             strokeWidth={1}
             fill="none"
             onClick={onClickCurve}
+            ref={(el) => {
+              if (el) {
+                pathRefs.current[i] = el;
+              }
+            }}
           />
         );
       })}