@remotion/rough-notation 4.0.497 → 4.0.499

package/dist/esm/index.mjs

@@ -7,13 +7,13 @@ import {
 
 // src/create-annotation.tsx
 import {
-  createContext,
   createRef,
   useEffect as useEffect2,
+  useLayoutEffect,
   useMemo as useMemo2,
   useState as useState2
 } from "react";
-import { continueRender, delayRender } from "remotion";
+import { continueRender, delayRender, useCurrentFrame } from "remotion";
 
 // src/element-size.ts
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -2405,34 +2405,22 @@ var renderAnnotation = ({
 };
 
 // src/rough.ts
-var svgRect = ({
-  svg,
-  element,
-  scale
-}) => {
-  const rect1 = svg.getBoundingClientRect();
-  const rect2 = element.getBoundingClientRect();
-  const inverseScale = 1 / scale;
+var getLocalRect = (element) => {
   return {
-    x: (rect2.x - rect1.x) * inverseScale,
-    y: (rect2.y - rect1.y) * inverseScale,
-    w: rect2.width * inverseScale,
-    h: rect2.height * inverseScale
+    x: element.offsetLeft,
+    y: element.offsetTop,
+    w: element.offsetWidth,
+    h: element.offsetHeight
   };
 };
 var render = ({
-  svg,
   seed,
   element,
   config,
-  scale,
   progress,
   options
 }) => {
-  if (scale === 0) {
-    return [];
-  }
-  const rect = svgRect({ svg, element, scale });
+  const rect = getLocalRect(element);
   if (rect.w === 0 || rect.h === 0) {
     return [];
   }
@@ -2551,40 +2539,12 @@ var resolveAnnotationConfig = (config) => {
 };
 
 // src/create-annotation.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var AnnotationContext = createContext({
-  setSvgChildren: () => {
-    return;
-  },
-  svgChildren: []
-});
-var MEASURER_SIZE = 100;
-var measurerSize = {
-  height: MEASURER_SIZE,
-  width: MEASURER_SIZE,
-  position: "fixed",
-  opacity: 0,
-  top: -1e4
-};
+import { jsx as jsx2 } from "react/jsx-runtime";
 var createAnnotation = () => {
   const ref = createRef();
   const svgRef = createRef();
-  const measurer = createRef();
   const Container = (props) => {
-    const [svgChildren, setSvgChildren] = useState2([]);
-    const value = useMemo2(() => {
-      return { setSvgChildren, svgChildren };
-    }, [svgChildren]);
-    return /* @__PURE__ */ jsxs(AnnotationContext.Provider, {
-      value,
-      children: [
-        props.children,
-        /* @__PURE__ */ jsx2("div", {
-          ref: measurer,
-          style: measurerSize
-        })
-      ]
-    });
+    return props.children;
   };
   const Tracker = ({ children, style }) => {
     return /* @__PURE__ */ jsx2("span", {
@@ -2611,9 +2571,11 @@ var createAnnotation = () => {
     progress,
     ...config
   }) => {
+    const frame = useCurrentFrame();
+    const parsedKey = JSON.stringify(resolveAnnotationConfig(config));
     const parsed = useMemo2(() => {
-      return resolveAnnotationConfig(config);
-    }, [config]);
+      return JSON.parse(parsedKey);
+    }, [parsedKey]);
     const roughJsOptions = useMemo2(() => {
       return resolveRoughOptions({
         roughness,
@@ -2643,16 +2605,20 @@ var createAnnotation = () => {
       }
       continueRender(initial);
     }, [initial, size]);
-    const scale = measurer.current ? measurer.current.getBoundingClientRect().width / MEASURER_SIZE : null;
-    const svgChildren = ref.current && scale ? render({
-      config: parsed,
-      svg: svgRef.current,
-      element: ref.current,
-      seed: seed ?? 1,
-      scale,
-      progress,
-      options: roughJsOptions
-    }) : [];
+    const [svgChildren, setSvgChildren] = useState2([]);
+    useLayoutEffect(() => {
+      if (!ref.current || !svgRef.current) {
+        setSvgChildren([]);
+        return;
+      }
+      setSvgChildren(render({
+        config: parsed,
+        element: ref.current,
+        seed: seed ?? 1,
+        progress,
+        options: roughJsOptions
+      }));
+    }, [frame, parsed, progress, roughJsOptions, seed, size]);
     return /* @__PURE__ */ jsx2("svg", {
       ref: svgRef,
       style: {
@@ -2670,7 +2636,7 @@ var createAnnotation = () => {
 };
 
 // src/Annotation.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var colorSchema = {
   color: {
     type: "color",
@@ -2975,8 +2941,8 @@ var makeAnnotationComponent = ({
       outlineRef,
       children: /* @__PURE__ */ jsx3("span", {
         ref: outlineRef,
-        style: { display: "inline-block" },
-        children: /* @__PURE__ */ jsxs2(annotation.Container, {
+        style: { display: "inline-block", position: "relative" },
+        children: /* @__PURE__ */ jsxs(annotation.Container, {
           children: [
             layer === "behind" ? annotationElement : null,
             /* @__PURE__ */ jsx3(annotation.Tracker, {

package/dist/rough.d.ts

@@ -1,11 +1,10 @@
 import type React from 'react';
-import type { ResolvedAnnotationConfig, RoughAnnotationOptions } from './types';
-export declare const render: ({ svg, seed, element, config, scale, progress, options, }: {
-    readonly svg: SVGSVGElement;
+import type { Rect, ResolvedAnnotationConfig, RoughAnnotationOptions } from './types';
+export declare const getLocalRect: (element: HTMLElement) => Rect;
+export declare const render: ({ seed, element, config, progress, options, }: {
     readonly seed: number;
     readonly element: HTMLElement;
     readonly config: ResolvedAnnotationConfig;
-    readonly scale: number;
     readonly progress: number;
     readonly options: RoughAnnotationOptions;
 }) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/rough-notation",
-	"version": "4.0.497",
+	"version": "4.0.499",
 	"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.497",
-		"remotion": "4.0.497",
+		"@remotion/paths": "4.0.499",
+		"remotion": "4.0.499",
 		"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.497",
+		"@remotion/eslint-config-internal": "4.0.499",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},