@jiujue/react-canvas-fiber 2.1.2 → 2.1.3

package/dist/index.cjs

@@ -50,10 +50,92 @@ function createNode(type, props) {
     node.imageInstance = null;
   } else if (type === "View") {
     node.backgroundImageInstance = null;
+  } else if (type === "Path") {
+    node.path2d = null;
+    node.pathSource = null;
   }
   return node;
 }
 
+// src/utils/style.ts
+function normalizeInsets(style) {
+  const paddingHorizontal = style?.paddingHorizontal ?? style?.padding ?? 0;
+  const paddingVertical = style?.paddingVertical ?? style?.padding ?? 0;
+  const marginHorizontal = style?.marginHorizontal ?? style?.margin ?? 0;
+  const marginVertical = style?.marginVertical ?? style?.margin ?? 0;
+  return {
+    paddingTop: style?.paddingTop ?? paddingVertical,
+    paddingRight: style?.paddingRight ?? paddingHorizontal,
+    paddingBottom: style?.paddingBottom ?? paddingVertical,
+    paddingLeft: style?.paddingLeft ?? paddingHorizontal,
+    marginTop: style?.marginTop ?? marginVertical,
+    marginRight: style?.marginRight ?? marginHorizontal,
+    marginBottom: style?.marginBottom ?? marginVertical,
+    marginLeft: style?.marginLeft ?? marginHorizontal
+  };
+}
+
+// src/utils/path2d.ts
+function resolvePath2D(node) {
+  const d = node.props?.d;
+  if (typeof d !== "string" || !d.trim()) {
+    node.path2d = null;
+    node.pathSource = null;
+    return null;
+  }
+  if (node.pathSource === d && node.path2d) return node.path2d;
+  try {
+    const path = new Path2D(d);
+    node.path2d = path;
+    node.pathSource = d;
+    return path;
+  } catch {
+    node.path2d = null;
+    node.pathSource = d;
+    return null;
+  }
+}
+
+// src/render/drawPrimitives.ts
+function drawPathNode(ctx, node, x, y) {
+  const path = resolvePath2D(node);
+  if (!path) return;
+  const fill = node.props.fill ?? "#ffffff";
+  const fillRule = node.props.fillRule;
+  const stroke = node.props.stroke;
+  const lineWidth = node.props.lineWidth ?? 1;
+  ctx.save();
+  ctx.translate(x, y);
+  if (fill) {
+    ctx.fillStyle = fill;
+    ctx.fill(path, fillRule);
+  }
+  if (stroke) {
+    ctx.strokeStyle = stroke;
+    ctx.lineWidth = lineWidth;
+    ctx.stroke(path);
+  }
+  ctx.restore();
+}
+function drawLineNode(ctx, node, x, y, w, h) {
+  const stroke = node.props.stroke ?? "#ffffff";
+  const lineWidth = node.props.lineWidth ?? 1;
+  const lineCap = node.props.lineCap;
+  const x1 = node.props.x1 ?? 0;
+  const y1 = node.props.y1 ?? 0;
+  const x2 = node.props.x2 ?? w;
+  const y2 = node.props.y2 ?? h;
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(x + x1, y + y1);
+  ctx.lineTo(x + x2, y + y2);
+  ctx.strokeStyle = stroke;
+  ctx.lineWidth = lineWidth;
+  if (lineCap) ctx.lineCap = lineCap;
+  ctx.stroke();
+  ctx.restore();
+}
+
 // src/render/drawTree.ts
 function resolveInheritedTextStyle(node, defaults) {
   const own = node.props?.style ?? {};
@@ -370,6 +452,36 @@ function drawNode(state, node, offsetX, offsetY) {
     }
     ctx.restore();
   }
+  if (node.type === "Circle") {
+    const fill = node.props.fill ?? "#ffffff";
+    const stroke = node.props.stroke;
+    const lineWidth = node.props.lineWidth ?? 1;
+    if (w > 0 && h > 0) {
+      const cx = x + w / 2;
+      const cy = y + h / 2;
+      const rx = w / 2;
+      const ry = h / 2;
+      ctx.save();
+      ctx.beginPath();
+      ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+      if (fill) {
+        ctx.fillStyle = fill;
+        ctx.fill();
+      }
+      if (stroke) {
+        ctx.strokeStyle = stroke;
+        ctx.lineWidth = lineWidth;
+        ctx.stroke();
+      }
+      ctx.restore();
+    }
+  }
+  if (node.type === "Path") {
+    drawPathNode(ctx, node, x, y);
+  }
+  if (node.type === "Line") {
+    drawLineNode(ctx, node, x, y, w, h);
+  }
   if (node.type === "Text") {
     const text = node.props.text;
     const color = node.props.color ?? "#ffffff";
@@ -448,26 +560,6 @@ function drawTree(root, ctx, dpr, clearColor, defaults) {
   }
   ctx.restore();
 }
-
-// src/utils/style.ts
-function normalizeInsets(style) {
-  const paddingHorizontal = style?.paddingHorizontal ?? style?.padding ?? 0;
-  const paddingVertical = style?.paddingVertical ?? style?.padding ?? 0;
-  const marginHorizontal = style?.marginHorizontal ?? style?.margin ?? 0;
-  const marginVertical = style?.marginVertical ?? style?.margin ?? 0;
-  return {
-    paddingTop: style?.paddingTop ?? paddingVertical,
-    paddingRight: style?.paddingRight ?? paddingHorizontal,
-    paddingBottom: style?.paddingBottom ?? paddingVertical,
-    paddingLeft: style?.paddingLeft ?? paddingHorizontal,
-    marginTop: style?.marginTop ?? marginVertical,
-    marginRight: style?.marginRight ?? marginHorizontal,
-    marginBottom: style?.marginBottom ?? marginVertical,
-    marginLeft: style?.marginLeft ?? marginHorizontal
-  };
-}
-
-// src/layout/layoutTree.ts
 var layoutEnginePromise = null;
 function getLayoutEngine() {
   if (!layoutEnginePromise) {
@@ -934,6 +1026,38 @@ function createReconcilerRoot(container) {
   };
 }
 
+// src/runtime/hitTestPrimitives.ts
+function hitTestEllipse(x, y, left, top, width, height) {
+  const rx = width / 2;
+  const ry = height / 2;
+  if (rx <= 0 || ry <= 0) return false;
+  const cx = left + rx;
+  const cy = top + ry;
+  const dx = (x - cx) / rx;
+  const dy = (y - cy) / ry;
+  return dx * dx + dy * dy <= 1;
+}
+function hitTestLineSegment(x, y, ax, ay, bx, by, threshold) {
+  const abx = bx - ax;
+  const aby = by - ay;
+  const apx = x - ax;
+  const apy = y - ay;
+  const abLenSq = abx * abx + aby * aby;
+  if (abLenSq <= 1e-9) {
+    const dx2 = x - ax;
+    const dy2 = y - ay;
+    return dx2 * dx2 + dy2 * dy2 <= threshold * threshold;
+  }
+  let t = (apx * abx + apy * aby) / abLenSq;
+  if (t < 0) t = 0;
+  else if (t > 1) t = 1;
+  const px = ax + t * abx;
+  const py = ay + t * aby;
+  const dx = x - px;
+  const dy = y - py;
+  return dx * dx + dy * dy <= threshold * threshold;
+}
+
 // src/runtime/root.ts
 function createCanvasRoot(canvas, options) {
   const ctx = canvas.getContext("2d");
@@ -1219,6 +1343,37 @@ function createCanvasRoot(canvas, options) {
       const hit = hitTestNode(child, x, y, childOffsetX, childOffsetY);
       if (hit) return hit;
     }
+    if (node.type === "Circle") {
+      const ok = hitTestEllipse(x, y, left, top, node.layout.width, node.layout.height);
+      if (!ok) return null;
+    }
+    if (node.type === "Line") {
+      const w = node.layout.width;
+      const h = node.layout.height;
+      const x1 = node.props.x1 ?? 0;
+      const y1 = node.props.y1 ?? 0;
+      const x2 = node.props.x2 ?? w;
+      const y2 = node.props.y2 ?? h;
+      const lineWidth = node.props.lineWidth ?? 1;
+      const threshold = Math.max(1, lineWidth / 2);
+      const ok = hitTestLineSegment(x, y, left + x1, top + y1, left + x2, top + y2, threshold);
+      if (!ok) return null;
+    }
+    if (node.type === "Path") {
+      const path = resolvePath2D(node);
+      if (!path) return null;
+      const fillRule = node.props.fillRule;
+      const stroke = node.props.stroke;
+      const lineWidth = node.props.lineWidth ?? 1;
+      ctx.save();
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
+      ctx.translate(left, top);
+      ctx.lineWidth = lineWidth;
+      const inFill = ctx.isPointInPath(path, x, y, fillRule);
+      const inStroke = stroke ? ctx.isPointInStroke(path, x, y) : false;
+      ctx.restore();
+      if (!inFill && !inStroke) return null;
+    }
     return node;
   };
   const hitTestScrollbarThumbNode = (node, x, y, offsetX, offsetY) => {
@@ -1897,6 +2052,15 @@ function View(props) {
 function Rect(props) {
   return react.createElement("Rect", props);
 }
+function Circle(props) {
+  return react.createElement("Circle", props);
+}
+function Path(props) {
+  return react.createElement("Path", props);
+}
+function Line(props) {
+  return react.createElement("Line", props);
+}
 function Text(props) {
   return react.createElement("Text", props);
 }
@@ -1905,7 +2069,10 @@ function Image2(props) {
 }
 
 exports.Canvas = Canvas;
+exports.Circle = Circle;
 exports.Image = Image2;
+exports.Line = Line;
+exports.Path = Path;
 exports.Rect = Rect;
 exports.Text = Text;
 exports.View = View;