@remotion/rough-notation 4.0.534 → 4.0.536

package/dist/esm/index.mjs

@@ -8,14 +8,8 @@ import {
 } from "remotion";
 
 // src/create-annotation.tsx
-import {
-  createRef,
-  useEffect as useEffect2,
-  useLayoutEffect,
-  useMemo as useMemo2,
-  useState as useState2
-} from "react";
-import { continueRender, delayRender, useCurrentFrame } from "remotion";
+import { createRef, useLayoutEffect, useMemo as useMemo2, useState as useState2 } from "react";
+import { useCurrentFrame, useDelayRender } from "remotion";
 
 // src/element-size.ts
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -1477,12 +1471,12 @@ var makeArc = ({
       t
     });
   });
-  const length2 = lengthProperties.arcLength;
+  const length = lengthProperties.arcLength;
   const getPointAtLength = (fractionLength) => {
     if (fractionLength < 0) {
       fractionLength = 0;
-    } else if (fractionLength > length2) {
-      fractionLength = length2;
+    } else if (fractionLength > length) {
+      fractionLength = length;
     }
     const position = pointOnEllipticalArc({
       p0: { x: x0, y: y0 },
@@ -1492,7 +1486,7 @@ var makeArc = ({
       largeArcFlag: LargeArcFlag,
       sweepFlag: SweepFlag,
       p1: { x: x1, y: y1 },
-      t: fractionLength / length2
+      t: fractionLength / length
     });
     return { x: position.x, y: position.y };
   };
@@ -1501,18 +1495,18 @@ var makeArc = ({
     getTangentAtLength: (fractionLength) => {
       if (fractionLength < 0) {
         fractionLength = 0;
-      } else if (fractionLength > length2) {
-        fractionLength = length2;
+      } else if (fractionLength > length) {
+        fractionLength = length;
       }
       const point_dist = 0.05;
       const p1 = getPointAtLength(fractionLength);
       let p2;
       if (fractionLength < 0) {
         fractionLength = 0;
-      } else if (fractionLength > length2) {
-        fractionLength = length2;
+      } else if (fractionLength > length) {
+        fractionLength = length;
       }
-      if (fractionLength < length2 - point_dist) {
+      if (fractionLength < length - point_dist) {
         p2 = getPointAtLength(fractionLength + point_dist);
       } else {
         p2 = getPointAtLength(fractionLength - point_dist);
@@ -1520,13 +1514,13 @@ var makeArc = ({
       const xDist = p2.x - p1.x;
       const yDist = p2.y - p1.y;
       const dist = Math.sqrt(xDist * xDist + yDist * yDist);
-      if (fractionLength < length2 - point_dist) {
+      if (fractionLength < length - point_dist) {
         return { x: -xDist / dist, y: -yDist / dist };
       }
       return { x: xDist / dist, y: yDist / dist };
     },
     getTotalLength: () => {
-      return length2;
+      return length;
     },
     type: "arc"
   };
@@ -1888,16 +1882,16 @@ var getLength = (path) => {
   return constructucted.totalLength;
 };
 var evolvePath = (progress, path) => {
-  const length2 = getLength(path);
+  const length = getLength(path);
   if (progress === 0) {
-    const extendedLength = length2 * 1.5;
+    const extendedLength = length * 1.5;
     return {
       strokeDasharray: `${extendedLength} ${extendedLength}`,
       strokeDashoffset: extendedLength
     };
   }
-  const strokeDasharray = `${length2} ${length2}`;
-  const strokeDashoffset = length2 - progress * length2;
+  const strokeDasharray = `${length} ${length}`;
+  const strokeDashoffset = length - progress * length;
   return { strokeDasharray, strokeDashoffset };
 };
 
@@ -1997,18 +1991,18 @@ function _doubleLine(x1, y1, x2, y2, o, filling = false) {
 }
 function _line(x1, y1, x2, y2, o, move, overlay) {
   const lengthSq = Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2);
-  const length2 = Math.sqrt(lengthSq);
+  const length = Math.sqrt(lengthSq);
   let roughnessGain = 1;
-  if (length2 < 200) {
+  if (length < 200) {
     roughnessGain = 1;
-  } else if (length2 > 500) {
+  } else if (length > 500) {
     roughnessGain = 0.4;
   } else {
-    roughnessGain = -0.0016668 * length2 + 1.233334;
+    roughnessGain = -0.0016668 * length + 1.233334;
   }
   let offset = o.maxRandomnessOffset || 0;
   if (offset * offset * 100 > lengthSq) {
-    offset = length2 / 10;
+    offset = length / 10;
   }
   const halfOffset = offset / 2;
   const divergePoint = 0.2 + random(o) * 0.2;
@@ -2616,14 +2610,16 @@ var createAnnotation = () => {
       preserveVertices,
       roughness
     ]);
-    const [initial] = useState2(() => delayRender());
+    const { delayRender, continueRender } = useDelayRender();
     const size = useElementSize(ref);
-    useEffect2(() => {
-      if (size === null) {
+    const isWaitingForSize = size === null;
+    useLayoutEffect(() => {
+      if (!isWaitingForSize) {
         return;
       }
-      continueRender(initial);
-    }, [initial, size]);
+      const handle = delayRender("Waiting for rough annotation size");
+      return () => continueRender(handle);
+    }, [continueRender, delayRender, isWaitingForSize]);
     const [svgChildren, setSvgChildren] = useState2([]);
     useLayoutEffect(() => {
       if (!ref.current || !svgRef.current) {
@@ -2786,14 +2782,6 @@ var paddingSchema = {
 var underlinePaddingSchema = {
   "padding.top": paddingSchema["padding.top"]
 };
-var textContentSchema = {
-  children: {
-    type: "text-content",
-    default: "",
-    description: "Text",
-    keyframable: false
-  }
-};
 var sharedSchema = (defaultRoughness) => ({
   ...Interactive.baseSchema,
   ...Interactive.premountSchema,
@@ -2821,7 +2809,7 @@ var sharedSchema = (defaultRoughness) => ({
   ...roughJsControlsSchema(defaultRoughness),
   ...colorSchema,
   ...Interactive.textSchema,
-  ...textContentSchema,
+  ...Interactive.childrenSchema,
   ...Interactive.backgroundSchema,
   ...Interactive.borderSchema,
   ...Interactive.borderRadiusSchema
@@ -3078,11 +3066,11 @@ var Circle = makeAnnotationComponent({
   schema: circleSchema
 });
 export {
-  Underline,
-  StrikeThrough,
-  Highlight,
-  CrossedOff,
-  Circle,
+  Box,
   Bracket,
-  Box
+  Circle,
+  CrossedOff,
+  Highlight,
+  StrikeThrough,
+  Underline
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/rough-notation",
-	"version": "4.0.534",
+	"version": "4.0.536",
 	"description": "Rough annotation primitives for Remotion",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -26,8 +26,8 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"@remotion/paths": "4.0.534",
-		"remotion": "4.0.534",
+		"@remotion/paths": "4.0.536",
+		"remotion": "4.0.536",
 		"roughjs": "4.6.6"
 	},
 	"peerDependencies": {
@@ -45,7 +45,7 @@
 	"devDependencies": {
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@remotion/eslint-config-internal": "4.0.534",
+		"@remotion/eslint-config-internal": "4.0.536",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},