@meonode/canvas 1.0.0-beta.1

package/dist/cjs/canvas/canvas.helper.js

@@ -0,0 +1,239 @@
+'use strict';
+
+var YogaTypes = require('yoga-layout');
+var common_const = require('../constant/common.const.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var YogaTypes__namespace = /*#__PURE__*/_interopNamespaceDefault(YogaTypes);
+
+const drawBorders = ({ ctx, node, x, y, width, height, radii, borderColor, borderStyle, }) => {
+    const borderAll = node.getBorder(YogaTypes__namespace.Edge.All) || 0;
+    const borderTop = Math.max(0, node.getBorder(YogaTypes__namespace.Edge.Top) || borderAll);
+    const borderRight = Math.max(0, node.getBorder(YogaTypes__namespace.Edge.Right) || borderAll);
+    const borderBottom = Math.max(0, node.getBorder(YogaTypes__namespace.Edge.Bottom) || borderAll);
+    const borderLeft = Math.max(0, node.getBorder(YogaTypes__namespace.Edge.Left) || borderAll);
+    const hasBorder = borderTop > 0 || borderRight > 0 || borderBottom > 0 || borderLeft > 0;
+    const boxSizing = node.getBoxSizing();
+    if (hasBorder && borderColor) {
+        ctx.strokeStyle = borderColor;
+        ctx.lineCap = 'butt';
+        ctx.lineJoin = 'miter'; // Use miter for sharp corners unless rounded
+        const setDash = (width) => {
+            if (borderStyle === common_const.Style.Border.Dashed && width > 0) {
+                const dashLength = Math.max(2, width * 1.5);
+                const gapLength = Math.max(1, width);
+                ctx.setLineDash([dashLength, gapLength]);
+            }
+            else {
+                ctx.setLineDash([]); // Solid line
+            }
+        };
+        /**
+         * Draws a rounded corner arc for the border.
+         *
+         * @param cx - The x-coordinate of the visual center of the corner curve.
+         * @param cy - The y-coordinate of the visual center of the corner curve.
+         * @param radius - The visual radius of the corner curve.
+         * @param startAngle - The starting angle of the arc in radians.
+         * @param endAngle - The ending angle of the arc in radians.
+         * @param border1 - The border width leading into the corner.
+         * @param border2 - The border width leading out of the corner.
+         */
+        const drawCornerArc = (cx, cy, radius, startAngle, endAngle, border1, border2) => {
+            if (radius <= 0)
+                return;
+            const cornerWidth = Math.max(border1, border2);
+            if (cornerWidth <= 0)
+                return;
+            let centerlineArcRadius;
+            if (boxSizing === common_const.Style.BoxSizing.ContentBox) {
+                // For content-box, the border is outside the box, so the centerline radius is the visual radius plus half the border width.
+                centerlineArcRadius = radius + cornerWidth / 2;
+            }
+            else {
+                // For border-box, the border is inside the box, so the centerline radius is the visual radius minus half the border width.
+                // Ensure the centerline radius is not negative.
+                centerlineArcRadius = Math.max(0, radius - cornerWidth / 2);
+                if (centerlineArcRadius <= 0 && radius > 0) {
+                    // Draw cap for border-box when border is thicker than radius allows for centerline arc
+                    ctx.fillStyle = borderColor; // Use border color for fill
+                    ctx.beginPath();
+                    // Cap is centered on the visual corner center with the visual radius
+                    ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
+                    ctx.fill();
+                    return; // Cap drawn, skip arc stroke
+                }
+            }
+            // Draw the normal arc stroke using the calculated centerline radius
+            ctx.beginPath();
+            ctx.lineWidth = cornerWidth;
+            setDash(cornerWidth);
+            ctx.arc(cx, cy, centerlineArcRadius, startAngle, endAngle);
+            ctx.stroke();
+        };
+        /**
+         * Draws a straight line segment for the border.
+         *
+         * @param x1 - The x-coordinate of the starting point.
+         * @param y1 - The y-coordinate of the starting point.
+         * @param x2 - The x-coordinate of the ending point.
+         * @param y2 - The y-coordinate of the ending point.
+         * @param borderWidth - The width of the border.
+         */
+        const drawLine = (x1, y1, x2, y2, borderWidth) => {
+            if (borderWidth <= 0)
+                return;
+            ctx.beginPath();
+            ctx.lineWidth = borderWidth;
+            setDash(borderWidth);
+            ctx.moveTo(x1, y1);
+            ctx.lineTo(x2, y2);
+            ctx.stroke();
+        };
+        // Calculate half-border widths
+        const halfBt = borderTop / 2;
+        const halfBr = borderRight / 2;
+        const halfBb = borderBottom / 2;
+        const halfBl = borderLeft / 2;
+        // Calculate effective visual radii, clamped to half dimensions of the *layout box*
+        const maxRadiusX = width / 2; // This matches CSS behavior where radius is relative to the box it's applied to.
+        const maxRadiusY = height / 2;
+        const rTL = Math.max(0, Math.min(radii.TopLeft, maxRadiusX, maxRadiusY));
+        const rTR = Math.max(0, Math.min(radii.TopRight, maxRadiusX, maxRadiusY));
+        const rBR = Math.max(0, Math.min(radii.BottomRight, maxRadiusX, maxRadiusY));
+        const rBL = Math.max(0, Math.min(radii.BottomLeft, maxRadiusX, maxRadiusY));
+        // --- Draw border segments based on boxSizing ---
+        // For content-box, coordinates are offset *outwards* from x, y, width, height
+        if (boxSizing === common_const.Style.BoxSizing.ContentBox) {
+            // Top line segment
+            drawLine(x + rTL, y - halfBt, x + width - rTR, y - halfBt, borderTop);
+            // Right line segment
+            drawLine(x + width + halfBr, y + rTR, x + width + halfBr, y + height - rBR, borderRight);
+            // Bottom line segment
+            drawLine(x + width - rBR, y + height + halfBb, x + rBL, y + height + halfBb, borderBottom);
+            // Left line segment
+            drawLine(x - halfBl, y + height - rBL, x - halfBl, y + rTL, borderLeft);
+            drawCornerArc(x + rTL, y + rTL, rTL, Math.PI, 1.5 * Math.PI, borderLeft, borderTop);
+            drawCornerArc(x + width - rTR, y + rTR, rTR, 1.5 * Math.PI, 2 * Math.PI, borderTop, borderRight);
+            drawCornerArc(x + width - rBR, y + height - rBR, rBR, 0, 0.5 * Math.PI, borderRight, borderBottom);
+            drawCornerArc(x + rBL, y + height - rBL, rBL, 0.5 * Math.PI, Math.PI, borderBottom, borderLeft);
+        }
+        else {
+            // For border-box, coordinates are offset *inwards* from x, y, width, height
+            // Top line segment
+            drawLine(x + rTL, y + halfBt, x + width - rTR, y + halfBt, borderTop);
+            // Right line segment
+            drawLine(x + width - halfBr, y + rTR, x + width - halfBr, y + height - rBR, borderRight);
+            // Bottom line segment
+            drawLine(x + width - rBR, y + height - halfBb, x + rBL, y + height - halfBb, borderBottom);
+            // Left line segment
+            drawLine(x + halfBl, y + height - rBL, x + halfBl, y + rTL, borderLeft);
+            // Draw corner arcs (centers relative to layout box corners, adjusted for inward border)
+            // Pass visual radius (rTL, rTR etc.) to drawCornerArc
+            drawCornerArc(x + rTL, y + rTL, rTL, Math.PI, 1.5 * Math.PI, borderLeft, borderTop); // Top-Left
+            drawCornerArc(x + width - rTR, y + rTR, rTR, 1.5 * Math.PI, 2 * Math.PI, borderTop, borderRight); // Top-Right
+            drawCornerArc(x + width - rBR, y + height - rBR, rBR, 0, 0.5 * Math.PI, borderRight, borderBottom); // Bottom-Right
+            drawCornerArc(x + rBL, y + height - rBL, rBL, 0.5 * Math.PI, Math.PI, borderBottom, borderLeft); // Bottom-Left
+        }
+    }
+};
+/**
+ * Draws an optimized rounded rectangle path on the canvas context.
+ * Automatically clamps radius values to prevent visual artifacts based on box dimensions.
+ * Uses arc-based rendering for crisp corners and consistent border appearance.
+ *
+ * @param ctx - The canvas 2D rendering context to draw on
+ * @param x - Left position of the rectangle
+ * @param y - Top position of the rectangle
+ * @param width - Width of the rectangle
+ * @param height - Height of the rectangle
+ * @param radii - Corner radius values for each corner. Values are clamped to box constraints.
+ */
+const drawRoundedRectPath = (ctx, x, y, width, height, radii) => {
+    if (width <= 0 || height <= 0) {
+        ctx.beginPath();
+        ctx.rect(x, y, width, height);
+        return;
+    }
+    ctx.beginPath();
+    // Clamp radius values to prevent visual artifacts
+    const maxRadius = Math.min(width / 2, height / 2);
+    const clampedTL = Math.max(0, Math.min(radii.TopLeft, maxRadius));
+    const clampedTR = Math.max(0, Math.min(radii.TopRight, maxRadius));
+    const clampedBR = Math.max(0, Math.min(radii.BottomRight, maxRadius));
+    const clampedBL = Math.max(0, Math.min(radii.BottomLeft, maxRadius));
+    ctx.moveTo(x + clampedTL, y);
+    // Draw top edge and top-right corner
+    ctx.lineTo(x + width - clampedTR, y);
+    clampedTR > 0 ? ctx.arc(x + width - clampedTR, y + clampedTR, clampedTR, 1.5 * Math.PI, 0) : ctx.lineTo(x + width, y);
+    // Draw right edge and bottom-right corner
+    ctx.lineTo(x + width, y + height - clampedBR);
+    clampedBR > 0
+        ? ctx.arc(x + width - clampedBR, y + height - clampedBR, clampedBR, 0, 0.5 * Math.PI)
+        : ctx.lineTo(x + width, y + height);
+    // Draw bottom edge and bottom-left corner
+    ctx.lineTo(x + clampedBL, y + height);
+    clampedBL > 0
+        ? ctx.arc(x + clampedBL, y + height - clampedBL, clampedBL, 0.5 * Math.PI, Math.PI)
+        : ctx.lineTo(x, y + height);
+    // Draw left edge and top-left corner
+    ctx.lineTo(x, y + clampedTL);
+    clampedTL > 0 ? ctx.arc(x + clampedTL, y + clampedTL, clampedTL, Math.PI, 1.5 * Math.PI) : ctx.lineTo(x, y);
+    ctx.closePath();
+};
+/**
+ * Calculates border radius values from props
+ * @param radiusProp - Border radius property value
+ * @returns Calculated border radii for all corners
+ */
+const parseBorderRadius = (radiusProp) => {
+    const radii = { TopLeft: 0, TopRight: 0, BottomRight: 0, BottomLeft: 0 };
+    if (typeof radiusProp === 'number') {
+        radii.TopLeft = radii.TopRight = radii.BottomRight = radii.BottomLeft = Math.max(0, radiusProp);
+    }
+    else if (typeof radiusProp === 'object' && radiusProp !== null) {
+        radii.TopLeft = Math.max(0, radiusProp.TopLeft ?? 0);
+        radii.TopRight = Math.max(0, radiusProp.TopRight ?? 0);
+        radii.BottomRight = Math.max(0, radiusProp.BottomRight ?? 0);
+        radii.BottomLeft = Math.max(0, radiusProp.BottomLeft ?? 0);
+    }
+    return radii;
+};
+/**
+ * Parses a percentage value or a number, returning the calculated value based on the base.
+ *
+ * @param value - The value to parse, can be a number, a percentage string, or undefined.
+ * @param base - The base value to calculate the percentage from.
+ * @returns The parsed number, or 0 if the value is not a number or a valid percentage.
+ */
+function parsePercentage(value, base) {
+    if (typeof value === 'number') {
+        return value;
+    }
+    if (typeof value === 'string' && value.endsWith('%')) {
+        return base !== 0 ? (parseFloat(value) / 100) * base : 0;
+    }
+    return 0;
+}
+
+exports.drawBorders = drawBorders;
+exports.drawRoundedRectPath = drawRoundedRectPath;
+exports.parseBorderRadius = parseBorderRadius;
+exports.parsePercentage = parsePercentage;
+//# sourceMappingURL=canvas.helper.js.map

package/dist/cjs/canvas/canvas.helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.helper.js","sources":["../../../../src/canvas/canvas.helper.ts"],"sourcesContent":["import type { CanvasRenderingContext2D } from 'skia-canvas'\nimport * as YogaTypes from 'yoga-layout'\nimport { Style } from '@/constant/common.const.js'\nimport type { BoxProps } from '@/canvas/canvas.type.js'\n\nexport const drawBorders = ({\n  ctx,\n  node,\n  x,\n  y,\n  width,\n  height,\n  radii,\n  borderColor,\n  borderStyle,\n}: {\n  ctx: CanvasRenderingContext2D\n  node: YogaTypes.Node\n  x: number\n  y: number\n  width: number\n  height: number\n  radii: {\n    TopLeft: number\n    TopRight: number\n    BottomLeft: number\n    BottomRight: number\n  }\n  borderColor: BoxProps['borderColor']\n  borderStyle: BoxProps['borderStyle']\n}) => {\n  const borderAll = node.getBorder(YogaTypes.Edge.All) || 0\n  const borderTop = Math.max(0, node.getBorder(YogaTypes.Edge.Top) || borderAll)\n  const borderRight = Math.max(0, node.getBorder(YogaTypes.Edge.Right) || borderAll)\n  const borderBottom = Math.max(0, node.getBorder(YogaTypes.Edge.Bottom) || borderAll)\n  const borderLeft = Math.max(0, node.getBorder(YogaTypes.Edge.Left) || borderAll)\n\n  const hasBorder = borderTop > 0 || borderRight > 0 || borderBottom > 0 || borderLeft > 0\n  const boxSizing = node.getBoxSizing()\n\n  if (hasBorder && borderColor) {\n    ctx.strokeStyle = borderColor\n    ctx.lineCap = 'butt'\n    ctx.lineJoin = 'miter' // Use miter for sharp corners unless rounded\n\n    const setDash = (width: number) => {\n      if (borderStyle === Style.Border.Dashed && width > 0) {\n        const dashLength = Math.max(2, width * 1.5)\n        const gapLength = Math.max(1, width)\n        ctx.setLineDash([dashLength, gapLength])\n      } else {\n        ctx.setLineDash([]) // Solid line\n      }\n    }\n\n    /**\n     * Draws a rounded corner arc for the border.\n     *\n     * @param cx - The x-coordinate of the visual center of the corner curve.\n     * @param cy - The y-coordinate of the visual center of the corner curve.\n     * @param radius - The visual radius of the corner curve.\n     * @param startAngle - The starting angle of the arc in radians.\n     * @param endAngle - The ending angle of the arc in radians.\n     * @param border1 - The border width leading into the corner.\n     * @param border2 - The border width leading out of the corner.\n     */\n    const drawCornerArc = (\n      cx: number,\n      cy: number,\n      radius: number,\n      startAngle: number,\n      endAngle: number,\n      border1: number,\n      border2: number,\n    ) => {\n      if (radius <= 0) return\n\n      const cornerWidth = Math.max(border1, border2)\n      if (cornerWidth <= 0) return\n\n      let centerlineArcRadius: number\n\n      if (boxSizing === Style.BoxSizing.ContentBox) {\n        // For content-box, the border is outside the box, so the centerline radius is the visual radius plus half the border width.\n        centerlineArcRadius = radius + cornerWidth / 2\n      } else {\n        // For border-box, the border is inside the box, so the centerline radius is the visual radius minus half the border width.\n        // Ensure the centerline radius is not negative.\n        centerlineArcRadius = Math.max(0, radius - cornerWidth / 2)\n\n        if (centerlineArcRadius <= 0 && radius > 0) {\n          // Draw cap for border-box when border is thicker than radius allows for centerline arc\n          ctx.fillStyle = borderColor! // Use border color for fill\n          ctx.beginPath()\n          // Cap is centered on the visual corner center with the visual radius\n          ctx.arc(cx, cy, radius, 0, 2 * Math.PI)\n          ctx.fill()\n          return // Cap drawn, skip arc stroke\n        }\n      }\n      // Draw the normal arc stroke using the calculated centerline radius\n      ctx.beginPath()\n      ctx.lineWidth = cornerWidth\n      setDash(cornerWidth)\n      ctx.arc(cx, cy, centerlineArcRadius, startAngle, endAngle)\n      ctx.stroke()\n    }\n\n    /**\n     * Draws a straight line segment for the border.\n     *\n     * @param x1 - The x-coordinate of the starting point.\n     * @param y1 - The y-coordinate of the starting point.\n     * @param x2 - The x-coordinate of the ending point.\n     * @param y2 - The y-coordinate of the ending point.\n     * @param borderWidth - The width of the border.\n     */\n    const drawLine = (x1: number, y1: number, x2: number, y2: number, borderWidth: number) => {\n      if (borderWidth <= 0) return\n      ctx.beginPath()\n      ctx.lineWidth = borderWidth\n      setDash(borderWidth)\n      ctx.moveTo(x1, y1)\n      ctx.lineTo(x2, y2)\n      ctx.stroke()\n    }\n\n    // Calculate half-border widths\n    const halfBt = borderTop / 2\n    const halfBr = borderRight / 2\n    const halfBb = borderBottom / 2\n    const halfBl = borderLeft / 2\n\n    // Calculate effective visual radii, clamped to half dimensions of the *layout box*\n    const maxRadiusX = width / 2 // This matches CSS behavior where radius is relative to the box it's applied to.\n    const maxRadiusY = height / 2\n    const rTL = Math.max(0, Math.min(radii.TopLeft, maxRadiusX, maxRadiusY))\n    const rTR = Math.max(0, Math.min(radii.TopRight, maxRadiusX, maxRadiusY))\n    const rBR = Math.max(0, Math.min(radii.BottomRight, maxRadiusX, maxRadiusY))\n    const rBL = Math.max(0, Math.min(radii.BottomLeft, maxRadiusX, maxRadiusY))\n\n    // --- Draw border segments based on boxSizing ---\n    // For content-box, coordinates are offset *outwards* from x, y, width, height\n    if (boxSizing === Style.BoxSizing.ContentBox) {\n      // Top line segment\n      drawLine(x + rTL, y - halfBt, x + width - rTR, y - halfBt, borderTop)\n      // Right line segment\n      drawLine(x + width + halfBr, y + rTR, x + width + halfBr, y + height - rBR, borderRight)\n      // Bottom line segment\n      drawLine(x + width - rBR, y + height + halfBb, x + rBL, y + height + halfBb, borderBottom)\n      // Left line segment\n      drawLine(x - halfBl, y + height - rBL, x - halfBl, y + rTL, borderLeft)\n\n      drawCornerArc(x + rTL, y + rTL, rTL, Math.PI, 1.5 * Math.PI, borderLeft, borderTop)\n      drawCornerArc(x + width - rTR, y + rTR, rTR, 1.5 * Math.PI, 2 * Math.PI, borderTop, borderRight)\n      drawCornerArc(x + width - rBR, y + height - rBR, rBR, 0, 0.5 * Math.PI, borderRight, borderBottom)\n      drawCornerArc(x + rBL, y + height - rBL, rBL, 0.5 * Math.PI, Math.PI, borderBottom, borderLeft)\n    } else {\n      // For border-box, coordinates are offset *inwards* from x, y, width, height\n      // Top line segment\n      drawLine(x + rTL, y + halfBt, x + width - rTR, y + halfBt, borderTop)\n      // Right line segment\n      drawLine(x + width - halfBr, y + rTR, x + width - halfBr, y + height - rBR, borderRight)\n      // Bottom line segment\n      drawLine(x + width - rBR, y + height - halfBb, x + rBL, y + height - halfBb, borderBottom)\n      // Left line segment\n      drawLine(x + halfBl, y + height - rBL, x + halfBl, y + rTL, borderLeft)\n\n      // Draw corner arcs (centers relative to layout box corners, adjusted for inward border)\n      // Pass visual radius (rTL, rTR etc.) to drawCornerArc\n      drawCornerArc(x + rTL, y + rTL, rTL, Math.PI, 1.5 * Math.PI, borderLeft, borderTop) // Top-Left\n      drawCornerArc(x + width - rTR, y + rTR, rTR, 1.5 * Math.PI, 2 * Math.PI, borderTop, borderRight) // Top-Right\n      drawCornerArc(x + width - rBR, y + height - rBR, rBR, 0, 0.5 * Math.PI, borderRight, borderBottom) // Bottom-Right\n      drawCornerArc(x + rBL, y + height - rBL, rBL, 0.5 * Math.PI, Math.PI, borderBottom, borderLeft) // Bottom-Left\n    }\n  }\n}\n\n/**\n * Draws an optimized rounded rectangle path on the canvas context.\n * Automatically clamps radius values to prevent visual artifacts based on box dimensions.\n * Uses arc-based rendering for crisp corners and consistent border appearance.\n *\n * @param ctx - The canvas 2D rendering context to draw on\n * @param x - Left position of the rectangle\n * @param y - Top position of the rectangle\n * @param width - Width of the rectangle\n * @param height - Height of the rectangle\n * @param radii - Corner radius values for each corner. Values are clamped to box constraints.\n */\nexport const drawRoundedRectPath = (\n  ctx: CanvasRenderingContext2D,\n  x: number,\n  y: number,\n  width: number,\n  height: number,\n  radii: { TopLeft: number; TopRight: number; BottomRight: number; BottomLeft: number },\n) => {\n  if (width <= 0 || height <= 0) {\n    ctx.beginPath()\n    ctx.rect(x, y, width, height)\n    return\n  }\n\n  ctx.beginPath()\n\n  // Clamp radius values to prevent visual artifacts\n  const maxRadius = Math.min(width / 2, height / 2)\n  const clampedTL = Math.max(0, Math.min(radii.TopLeft, maxRadius))\n  const clampedTR = Math.max(0, Math.min(radii.TopRight, maxRadius))\n  const clampedBR = Math.max(0, Math.min(radii.BottomRight, maxRadius))\n  const clampedBL = Math.max(0, Math.min(radii.BottomLeft, maxRadius))\n\n  ctx.moveTo(x + clampedTL, y)\n\n  // Draw top edge and top-right corner\n  ctx.lineTo(x + width - clampedTR, y)\n  clampedTR > 0 ? ctx.arc(x + width - clampedTR, y + clampedTR, clampedTR, 1.5 * Math.PI, 0) : ctx.lineTo(x + width, y)\n\n  // Draw right edge and bottom-right corner\n  ctx.lineTo(x + width, y + height - clampedBR)\n  clampedBR > 0\n    ? ctx.arc(x + width - clampedBR, y + height - clampedBR, clampedBR, 0, 0.5 * Math.PI)\n    : ctx.lineTo(x + width, y + height)\n\n  // Draw bottom edge and bottom-left corner\n  ctx.lineTo(x + clampedBL, y + height)\n  clampedBL > 0\n    ? ctx.arc(x + clampedBL, y + height - clampedBL, clampedBL, 0.5 * Math.PI, Math.PI)\n    : ctx.lineTo(x, y + height)\n\n  // Draw left edge and top-left corner\n  ctx.lineTo(x, y + clampedTL)\n  clampedTL > 0 ? ctx.arc(x + clampedTL, y + clampedTL, clampedTL, Math.PI, 1.5 * Math.PI) : ctx.lineTo(x, y)\n\n  ctx.closePath()\n}\n\n/**\n * Calculates border radius values from props\n * @param radiusProp - Border radius property value\n * @returns Calculated border radii for all corners\n */\nexport const parseBorderRadius = (\n  radiusProp: BoxProps['borderRadius'],\n): {\n  TopLeft: number\n  TopRight: number\n  BottomRight: number\n  BottomLeft: number\n} => {\n  const radii = { TopLeft: 0, TopRight: 0, BottomRight: 0, BottomLeft: 0 }\n  if (typeof radiusProp === 'number') {\n    radii.TopLeft = radii.TopRight = radii.BottomRight = radii.BottomLeft = Math.max(0, radiusProp)\n  } else if (typeof radiusProp === 'object' && radiusProp !== null) {\n    radii.TopLeft = Math.max(0, radiusProp.TopLeft ?? 0)\n    radii.TopRight = Math.max(0, radiusProp.TopRight ?? 0)\n    radii.BottomRight = Math.max(0, radiusProp.BottomRight ?? 0)\n    radii.BottomLeft = Math.max(0, radiusProp.BottomLeft ?? 0)\n  }\n  return radii\n}\n\n/**\n * Parses a percentage value or a number, returning the calculated value based on the base.\n *\n * @param value - The value to parse, can be a number, a percentage string, or undefined.\n * @param base - The base value to calculate the percentage from.\n * @returns The parsed number, or 0 if the value is not a number or a valid percentage.\n */\nexport function parsePercentage(value: number | string | undefined, base: number): number {\n  if (typeof value === 'number') {\n    return value\n  }\n  if (typeof value === 'string' && value.endsWith('%')) {\n    return base !== 0 ? (parseFloat(value) / 100) * base : 0\n  }\n  return 0\n}\n"],"names":["YogaTypes","Style"],"mappings":"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"}