@jiujue/react-canvas-fiber 2.0.4 → 2.0.6

package/dist/index.d.cts

@@ -86,6 +86,7 @@ type ViewProps = {
     children?: ReactNode;
     style?: YogaStyle;
     background?: string;
+    border?: string;
     borderRadius?: number;
     scrollX?: boolean;
     scrollY?: boolean;
@@ -157,6 +158,7 @@ type ImageProps = {
     style?: YogaStyle;
     src: string;
     objectFit?: 'cover' | 'contain' | 'fill';
+    borderRadius?: number;
     pointerEvents?: PointerEventsMode;
     onPointerDownCapture?: CanvasPointerEventHandler;
     onPointerDown?: CanvasPointerEventHandler;

package/dist/index.d.ts

@@ -86,6 +86,7 @@ type ViewProps = {
     children?: ReactNode;
     style?: YogaStyle;
     background?: string;
+    border?: string;
     borderRadius?: number;
     scrollX?: boolean;
     scrollY?: boolean;
@@ -157,6 +158,7 @@ type ImageProps = {
     style?: YogaStyle;
     src: string;
     objectFit?: 'cover' | 'contain' | 'fill';
+    borderRadius?: number;
     pointerEvents?: PointerEventsMode;
     onPointerDownCapture?: CanvasPointerEventHandler;
     onPointerDown?: CanvasPointerEventHandler;

package/dist/index.js

@@ -88,14 +88,56 @@ function drawRoundedRect(ctx, x, y, w, h, r) {
 function rectsIntersect(ax, ay, aw, ah, bx, by, bw, bh) {
   return ax < bx + bw && ax + aw > bx && ay < by + bh && ay + ah > by;
 }
+function resolveBorder(value) {
+  if (typeof value !== "string") return null;
+  const raw = value.trim();
+  if (!raw) return null;
+  const normalized = raw.replace(/\s+/g, " ");
+  const match = normalized.match(/^([0-9]*\.?[0-9]+)(px)?\s+(?:solid\s+)?(.+)$/i);
+  if (match) {
+    const width = Number(match[1]);
+    const color = match[3]?.trim();
+    if (Number.isFinite(width) && width > 0 && color) return { width, color };
+    return null;
+  }
+  const withoutSolid = normalized.replace(/\bsolid\b/gi, " ").replace(/\s+/g, " ").trim();
+  const match2 = withoutSolid.match(/^([0-9]*\.?[0-9]+)(px)?\s+(.+)$/i);
+  if (match2) {
+    const width = Number(match2[1]);
+    const color = match2[3]?.trim();
+    if (Number.isFinite(width) && width > 0 && color) return { width, color };
+    return null;
+  }
+  if (/^[0-9]/.test(withoutSolid)) return null;
+  if (!withoutSolid) return null;
+  return { width: 1, color: withoutSolid };
+}
+function drawBorder(ctx, x, y, w, h, radius, border) {
+  if (!Number.isFinite(border.width) || border.width <= 0) return;
+  const inset = border.width / 2;
+  const bw = w - border.width;
+  const bh = h - border.width;
+  if (bw <= 0 || bh <= 0) return;
+  ctx.save();
+  ctx.strokeStyle = border.color;
+  ctx.lineWidth = border.width;
+  drawRoundedRect(ctx, x + inset, y + inset, bw, bh, Math.max(0, radius - inset));
+  ctx.stroke();
+  ctx.restore();
+}
 function drawNode(state, node, offsetX, offsetY) {
   const { ctx } = state;
   const x = offsetX + node.layout.x;
   const y = offsetY + node.layout.y;
   const w = node.layout.width;
   const h = node.layout.height;
+  let viewBorder = null;
+  let viewRadius = 0;
+  let viewIsScroll = false;
   if (node.type === "View") {
     const background = node.props.background;
+    viewBorder = resolveBorder(node.props.border);
+    viewRadius = node.props.borderRadius ?? 0;
     const scrollX = !!node.props?.scrollX;
     const scrollY = !!node.props?.scrollY;
     const scrollLeft = scrollX ? node.scrollLeft ?? 0 : 0;
@@ -111,14 +153,14 @@ function drawNode(state, node, offsetX, offsetY) {
     const maxScrollLeft = Math.max(0, contentWidth - w);
     const maxScrollTop = Math.max(0, contentHeight - h);
     if (background) {
-      const radius = node.props.borderRadius ?? 0;
       ctx.save();
       ctx.fillStyle = background;
-      drawRoundedRect(ctx, x, y, w, h, radius);
+      drawRoundedRect(ctx, x, y, w, h, viewRadius);
       ctx.fill();
       ctx.restore();
     }
     if (scrollX || scrollY) {
+      viewIsScroll = true;
       ctx.save();
       ctx.beginPath();
       ctx.rect(x, y, w, h);
@@ -195,6 +237,7 @@ function drawNode(state, node, offsetX, offsetY) {
         ctx.fill();
         ctx.restore();
       }
+      if (viewBorder) drawBorder(ctx, x, y, w, h, viewRadius, viewBorder);
       return;
     }
   }
@@ -234,6 +277,7 @@ function drawNode(state, node, offsetX, offsetY) {
     const { imageInstance } = node;
     if (imageInstance && imageInstance.complete && imageInstance.naturalWidth > 0) {
       const objectFit = node.props.objectFit || "contain";
+      const radius = node.props.borderRadius ?? 0;
       const srcW = imageInstance.naturalWidth;
       const srcH = imageInstance.naturalHeight;
       let dstX = x;
@@ -261,7 +305,7 @@ function drawNode(state, node, offsetX, offsetY) {
       }
       ctx.save();
       ctx.beginPath();
-      drawRoundedRect(ctx, x, y, w, h, 0);
+      drawRoundedRect(ctx, x, y, w, h, radius);
       ctx.clip();
       ctx.drawImage(imageInstance, srcX, srcY, finalSrcW, finalSrcH, dstX, dstY, dstW, dstH);
       ctx.restore();
@@ -270,6 +314,9 @@ function drawNode(state, node, offsetX, offsetY) {
   for (const child of node.children) {
     drawNode(state, child, x, y);
   }
+  if (node.type === "View" && !viewIsScroll && viewBorder) {
+    drawBorder(ctx, x, y, w, h, viewRadius, viewBorder);
+  }
 }
 function drawTree(root, ctx, dpr, clearColor, defaults) {
   const w = ctx.canvas.width;