@jiujue/react-canvas-fiber 2.1.2 → 2.1.3

package/dist/index.d.cts

@@ -137,6 +137,72 @@ type RectProps = {
     onPointerEnter?: CanvasPointerEventHandler;
     onPointerLeave?: CanvasPointerEventHandler;
 };
+type CircleProps = {
+    children?: ReactNode;
+    style?: YogaStyle;
+    fill?: string;
+    stroke?: string;
+    lineWidth?: number;
+    pointerEvents?: PointerEventsMode;
+    onPointerDownCapture?: CanvasPointerEventHandler;
+    onPointerDown?: CanvasPointerEventHandler;
+    onPointerMoveCapture?: CanvasPointerEventHandler;
+    onPointerMove?: CanvasPointerEventHandler;
+    onPointerUpCapture?: CanvasPointerEventHandler;
+    onPointerUp?: CanvasPointerEventHandler;
+    onPointerCancelCapture?: CanvasPointerEventHandler;
+    onPointerCancel?: CanvasPointerEventHandler;
+    onClickCapture?: CanvasPointerEventHandler;
+    onClick?: CanvasPointerEventHandler;
+    onPointerEnter?: CanvasPointerEventHandler;
+    onPointerLeave?: CanvasPointerEventHandler;
+};
+type PathProps = {
+    children?: ReactNode;
+    style?: YogaStyle;
+    d: string;
+    fill?: string;
+    fillRule?: CanvasFillRule;
+    stroke?: string;
+    lineWidth?: number;
+    pointerEvents?: PointerEventsMode;
+    onPointerDownCapture?: CanvasPointerEventHandler;
+    onPointerDown?: CanvasPointerEventHandler;
+    onPointerMoveCapture?: CanvasPointerEventHandler;
+    onPointerMove?: CanvasPointerEventHandler;
+    onPointerUpCapture?: CanvasPointerEventHandler;
+    onPointerUp?: CanvasPointerEventHandler;
+    onPointerCancelCapture?: CanvasPointerEventHandler;
+    onPointerCancel?: CanvasPointerEventHandler;
+    onClickCapture?: CanvasPointerEventHandler;
+    onClick?: CanvasPointerEventHandler;
+    onPointerEnter?: CanvasPointerEventHandler;
+    onPointerLeave?: CanvasPointerEventHandler;
+};
+type LineProps = {
+    children?: ReactNode;
+    style?: YogaStyle;
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+    stroke?: string;
+    lineWidth?: number;
+    lineCap?: CanvasLineCap;
+    pointerEvents?: PointerEventsMode;
+    onPointerDownCapture?: CanvasPointerEventHandler;
+    onPointerDown?: CanvasPointerEventHandler;
+    onPointerMoveCapture?: CanvasPointerEventHandler;
+    onPointerMove?: CanvasPointerEventHandler;
+    onPointerUpCapture?: CanvasPointerEventHandler;
+    onPointerUp?: CanvasPointerEventHandler;
+    onPointerCancelCapture?: CanvasPointerEventHandler;
+    onPointerCancel?: CanvasPointerEventHandler;
+    onClickCapture?: CanvasPointerEventHandler;
+    onClick?: CanvasPointerEventHandler;
+    onPointerEnter?: CanvasPointerEventHandler;
+    onPointerLeave?: CanvasPointerEventHandler;
+};
 type TextProps = {
     children?: never;
     text: string;
@@ -192,12 +258,18 @@ declare function Canvas(props: CanvasProps): react_jsx_runtime.JSX.Element;
  * 它们返回 intrinsic element（字符串 type），由自定义 reconciler 接管创建/更新节点：
  * - <View/> -> CanvasNode(type='View')
  * - <Rect/> -> CanvasNode(type='Rect')
+ * - <Circle/> -> CanvasNode(type='Circle')
+ * - <Path/> -> CanvasNode(type='Path')
+ * - <Line/> -> CanvasNode(type='Line')
  * - <Text/> -> CanvasNode(type='Text')
  * - <Image/> -> CanvasNode(type='Image')
  */
 declare function View(props: ViewProps): react.ReactElement<ViewProps, string | react.JSXElementConstructor<any>>;
 declare function Rect(props: RectProps): react.ReactElement<RectProps, string | react.JSXElementConstructor<any>>;
+declare function Circle(props: CircleProps): react.ReactElement<CircleProps, string | react.JSXElementConstructor<any>>;
+declare function Path(props: PathProps): react.ReactElement<PathProps, string | react.JSXElementConstructor<any>>;
+declare function Line(props: LineProps): react.ReactElement<LineProps, string | react.JSXElementConstructor<any>>;
 declare function Text(props: TextProps): react.ReactElement<TextProps, string | react.JSXElementConstructor<any>>;
 declare function Image(props: ImageProps): react.ReactElement<ImageProps, string | react.JSXElementConstructor<any>>;
 
-export { Canvas, Image, Rect, Text, View };
+export { Canvas, Circle, Image, Line, Path, Rect, Text, View };

package/dist/index.d.ts

@@ -137,6 +137,72 @@ type RectProps = {
     onPointerEnter?: CanvasPointerEventHandler;
     onPointerLeave?: CanvasPointerEventHandler;
 };
+type CircleProps = {
+    children?: ReactNode;
+    style?: YogaStyle;
+    fill?: string;
+    stroke?: string;
+    lineWidth?: number;
+    pointerEvents?: PointerEventsMode;
+    onPointerDownCapture?: CanvasPointerEventHandler;
+    onPointerDown?: CanvasPointerEventHandler;
+    onPointerMoveCapture?: CanvasPointerEventHandler;
+    onPointerMove?: CanvasPointerEventHandler;
+    onPointerUpCapture?: CanvasPointerEventHandler;
+    onPointerUp?: CanvasPointerEventHandler;
+    onPointerCancelCapture?: CanvasPointerEventHandler;
+    onPointerCancel?: CanvasPointerEventHandler;
+    onClickCapture?: CanvasPointerEventHandler;
+    onClick?: CanvasPointerEventHandler;
+    onPointerEnter?: CanvasPointerEventHandler;
+    onPointerLeave?: CanvasPointerEventHandler;
+};
+type PathProps = {
+    children?: ReactNode;
+    style?: YogaStyle;
+    d: string;
+    fill?: string;
+    fillRule?: CanvasFillRule;
+    stroke?: string;
+    lineWidth?: number;
+    pointerEvents?: PointerEventsMode;
+    onPointerDownCapture?: CanvasPointerEventHandler;
+    onPointerDown?: CanvasPointerEventHandler;
+    onPointerMoveCapture?: CanvasPointerEventHandler;
+    onPointerMove?: CanvasPointerEventHandler;
+    onPointerUpCapture?: CanvasPointerEventHandler;
+    onPointerUp?: CanvasPointerEventHandler;
+    onPointerCancelCapture?: CanvasPointerEventHandler;
+    onPointerCancel?: CanvasPointerEventHandler;
+    onClickCapture?: CanvasPointerEventHandler;
+    onClick?: CanvasPointerEventHandler;
+    onPointerEnter?: CanvasPointerEventHandler;
+    onPointerLeave?: CanvasPointerEventHandler;
+};
+type LineProps = {
+    children?: ReactNode;
+    style?: YogaStyle;
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+    stroke?: string;
+    lineWidth?: number;
+    lineCap?: CanvasLineCap;
+    pointerEvents?: PointerEventsMode;
+    onPointerDownCapture?: CanvasPointerEventHandler;
+    onPointerDown?: CanvasPointerEventHandler;
+    onPointerMoveCapture?: CanvasPointerEventHandler;
+    onPointerMove?: CanvasPointerEventHandler;
+    onPointerUpCapture?: CanvasPointerEventHandler;
+    onPointerUp?: CanvasPointerEventHandler;
+    onPointerCancelCapture?: CanvasPointerEventHandler;
+    onPointerCancel?: CanvasPointerEventHandler;
+    onClickCapture?: CanvasPointerEventHandler;
+    onClick?: CanvasPointerEventHandler;
+    onPointerEnter?: CanvasPointerEventHandler;
+    onPointerLeave?: CanvasPointerEventHandler;
+};
 type TextProps = {
     children?: never;
     text: string;
@@ -192,12 +258,18 @@ declare function Canvas(props: CanvasProps): react_jsx_runtime.JSX.Element;
  * 它们返回 intrinsic element（字符串 type），由自定义 reconciler 接管创建/更新节点：
  * - <View/> -> CanvasNode(type='View')
  * - <Rect/> -> CanvasNode(type='Rect')
+ * - <Circle/> -> CanvasNode(type='Circle')
+ * - <Path/> -> CanvasNode(type='Path')
+ * - <Line/> -> CanvasNode(type='Line')
  * - <Text/> -> CanvasNode(type='Text')
  * - <Image/> -> CanvasNode(type='Image')
  */
 declare function View(props: ViewProps): react.ReactElement<ViewProps, string | react.JSXElementConstructor<any>>;
 declare function Rect(props: RectProps): react.ReactElement<RectProps, string | react.JSXElementConstructor<any>>;
+declare function Circle(props: CircleProps): react.ReactElement<CircleProps, string | react.JSXElementConstructor<any>>;
+declare function Path(props: PathProps): react.ReactElement<PathProps, string | react.JSXElementConstructor<any>>;
+declare function Line(props: LineProps): react.ReactElement<LineProps, string | react.JSXElementConstructor<any>>;
 declare function Text(props: TextProps): react.ReactElement<TextProps, string | react.JSXElementConstructor<any>>;
 declare function Image(props: ImageProps): react.ReactElement<ImageProps, string | react.JSXElementConstructor<any>>;
 
-export { Canvas, Image, Rect, Text, View };
+export { Canvas, Circle, Image, Line, Path, Rect, Text, View };

package/dist/index.js

@@ -44,10 +44,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 ?? {};
@@ -364,6 +446,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";
@@ -442,26 +554,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) {
@@ -928,6 +1020,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");
@@ -1213,6 +1337,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) => {
@@ -1891,6 +2046,15 @@ function View(props) {
 function Rect(props) {
   return createElement("Rect", props);
 }
+function Circle(props) {
+  return createElement("Circle", props);
+}
+function Path(props) {
+  return createElement("Path", props);
+}
+function Line(props) {
+  return createElement("Line", props);
+}
 function Text(props) {
   return createElement("Text", props);
 }
@@ -1898,6 +2062,6 @@ function Image2(props) {
   return createElement("Image", props);
 }
 
-export { Canvas, Image2 as Image, Rect, Text, View };
+export { Canvas, Circle, Image2 as Image, Line, Path, Rect, Text, View };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map