@shopify/react-native-skia 2.2.10 → 2.2.11

package/cpp/api/JsiSkParagraph.h

@@ -95,46 +95,47 @@ public:
     std::vector<para::LineMetrics> metrics;
     getObject()->getLineMetrics(metrics);
     auto returnValue = jsi::Array(runtime, metrics.size());
-    
+
     for (size_t i = 0; i < metrics.size(); ++i) {
       auto lineMetrics = jsi::Object(runtime);
-      
+
       // Text indices
-      lineMetrics.setProperty(runtime, "startIndex", 
+      lineMetrics.setProperty(runtime, "startIndex",
                               static_cast<double>(metrics[i].fStartIndex));
-      lineMetrics.setProperty(runtime, "endIndex", 
+      lineMetrics.setProperty(runtime, "endIndex",
                               static_cast<double>(metrics[i].fEndIndex));
-      lineMetrics.setProperty(runtime, "endExcludingWhitespaces", 
-                              static_cast<double>(metrics[i].fEndExcludingWhitespaces));
-      lineMetrics.setProperty(runtime, "endIncludingNewline", 
-                              static_cast<double>(metrics[i].fEndIncludingNewline));
-      
+      lineMetrics.setProperty(
+          runtime, "endExcludingWhitespaces",
+          static_cast<double>(metrics[i].fEndExcludingWhitespaces));
+      lineMetrics.setProperty(
+          runtime, "endIncludingNewline",
+          static_cast<double>(metrics[i].fEndIncludingNewline));
+
       // Line break info
-      lineMetrics.setProperty(runtime, "isHardBreak", 
-                              metrics[i].fHardBreak);
-      
+      lineMetrics.setProperty(runtime, "isHardBreak", metrics[i].fHardBreak);
+
       // Vertical metrics
-      lineMetrics.setProperty(runtime, "ascent", 
+      lineMetrics.setProperty(runtime, "ascent",
                               static_cast<double>(metrics[i].fAscent));
-      lineMetrics.setProperty(runtime, "descent", 
+      lineMetrics.setProperty(runtime, "descent",
                               static_cast<double>(metrics[i].fDescent));
-      lineMetrics.setProperty(runtime, "height", 
+      lineMetrics.setProperty(runtime, "height",
                               static_cast<double>(metrics[i].fHeight));
-      
+
       // Horizontal metrics
-      lineMetrics.setProperty(runtime, "width", 
+      lineMetrics.setProperty(runtime, "width",
                               static_cast<double>(metrics[i].fWidth));
-      lineMetrics.setProperty(runtime, "left", 
+      lineMetrics.setProperty(runtime, "left",
                               static_cast<double>(metrics[i].fLeft));
-      
+
       // Position
-      lineMetrics.setProperty(runtime, "baseline", 
+      lineMetrics.setProperty(runtime, "baseline",
                               static_cast<double>(metrics[i].fBaseline));
-      
+
       // Line number
-      lineMetrics.setProperty(runtime, "lineNumber", 
+      lineMetrics.setProperty(runtime, "lineNumber",
                               static_cast<double>(metrics[i].fLineNumber));
-      
+
       returnValue.setValueAtIndex(runtime, i, lineMetrics);
     }
     return returnValue;

package/cpp/api/recorder/DrawingCtx.h

@@ -122,7 +122,7 @@ public:
   std::vector<sk_sp<SkShader>> popShaders(int count) {
     std::vector<sk_sp<SkShader>> result;
     int actualCount = std::min(count, static_cast<int>(shaders.size()));
-    
+
     if (actualCount > 0) {
       // Get the last 'actualCount' shaders
       auto start = shaders.end() - actualCount;
@@ -130,7 +130,7 @@ public:
       // Remove them from the original vector
       shaders.erase(start, shaders.end());
     }
-    
+
     return result;
   }
 

package/cpp/api/recorder/JsiRecorder.h

@@ -119,10 +119,9 @@ public:
   }
 
   JSI_HOST_FUNCTION(pushShader) {
-    getObject()->pushShader(runtime,
-                            arguments[0].asString(runtime).utf8(runtime),
-                            arguments[1].asObject(runtime),
-                            arguments[2].asNumber());
+    getObject()->pushShader(
+        runtime, arguments[0].asString(runtime).utf8(runtime),
+        arguments[1].asObject(runtime), arguments[2].asNumber());
     return jsi::Value::undefined();
   }
 

package/cpp/api/recorder/Shaders.h

@@ -41,8 +41,9 @@ public:
     auto uniformsData = processUniforms(source, props.uniforms);
 
     std::vector<sk_sp<SkShader>> childrenShaders = ctx->popShaders(children);
-    auto shader = source->makeShader(std::move(uniformsData), childrenShaders.data(),
-                                     childrenShaders.size(), &m3);
+    auto shader =
+        source->makeShader(std::move(uniformsData), childrenShaders.data(),
+                           childrenShaders.size(), &m3);
 
     ctx->shaders.push_back(shader);
   }

package/cpp/rnskia/RNSkJsiViewApi.h

@@ -16,6 +16,7 @@
 #include <jsi/jsi.h>
 
 namespace RNSkia {
+
 namespace jsi = facebook::jsi;
 
 using RNSkViewInfo = struct RNSkViewInfo {
@@ -100,16 +101,24 @@ public:
     // Safely execute operations while holding the registry lock
     ViewRegistry::getInstance().withViewInfo(
         nativeId, [&](std::shared_ptr<RNSkViewInfo> info) {
-          info->props.insert_or_assign(
-              arguments[1].asString(runtime).utf8(runtime),
-              RNJsi::ViewProperty(runtime, arguments[2]));
-
-          // Now let's see if we have a view that we can update
-          if (info->view != nullptr) {
-            // Update view!
-            info->view->setNativeId(nativeId);
-            info->view->setJsiProperties(info->props);
-            info->props.clear();
+          auto name = arguments[1].asString(runtime).utf8(runtime);
+          if (name == "onSize" && isSharedValue(runtime, arguments[2])) {
+            jsi::Object size(runtime);
+            size.setProperty(runtime, "width", info->view->getScaledWidth());
+            size.setProperty(runtime, "height", info->view->getScaledHeight());
+            arguments[2].asObject(runtime).setProperty(runtime, "value", size);
+          } else {
+            info->props.insert_or_assign(
+                arguments[1].asString(runtime).utf8(runtime),
+                RNJsi::ViewProperty(runtime, arguments[2]));
+
+            // Now let's see if we have a view that we can update
+            if (info->view != nullptr) {
+              // Update view!
+              info->view->setNativeId(nativeId);
+              info->view->setJsiProperties(info->props);
+              info->props.clear();
+            }
           }
           return nullptr; // Return type for template deduction
         });

package/lib/commonjs/renderer/Canvas.js

@@ -9,6 +9,7 @@ var _SkiaViewNativeId = require("../views/SkiaViewNativeId");
 var _SkiaPictureViewNativeComponent = _interopRequireDefault(require("../specs/SkiaPictureViewNativeComponent"));
 var _Reconciler = require("../sksg/Reconciler");
 var _skia = require("../skia");
+var _Platform = require("../Platform");
 var _global;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -103,13 +104,29 @@ const Canvas = ({
       (_viewRef$current2 = viewRef.current) === null || _viewRef$current2 === void 0 || _viewRef$current2.measureInWindow(callback);
     }
   }));
+  const onLayoutWeb = (0, _react.useCallback)(e => {
+    if (onLayout) {
+      onLayout(e);
+    }
+    if (_Platform.Platform.OS === "web" && onSize) {
+      const {
+        width,
+        height
+      } = e.nativeEvent.layout;
+      onSize.value = {
+        width,
+        height
+      };
+    }
+  }, [onLayout, onSize]);
   return /*#__PURE__*/_react.default.createElement(_SkiaPictureViewNativeComponent.default, _extends({
     ref: viewRef,
     collapsable: false,
     nativeID: `${nativeId}`,
     debug: debug,
     opaque: opaque,
-    colorSpace: colorSpace
+    colorSpace: colorSpace,
+    onLayout: onLayoutWeb
   }, viewProps));
 };
 exports.Canvas = Canvas;

package/lib/commonjs/renderer/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_SkiaViewNativeId","_SkiaPictureViewNativeComponent","_interopRequireDefault","_Reconciler","_skia","_global","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","useCanvasRef","useRef","exports","useCanvasSize","userRef","ourRef","ref","size","setSize","useState","width","height","useLayoutEffect","current","measure","_x","_y","isFabric","Boolean","global","nativeFabricUIManager","Canvas","debug","opaque","children","onSize","colorSpace","onLayout","viewProps","console","error","viewRef","nativeId","useMemo","SkiaViewNativeId","root","SkiaSGRoot","Skia","render","useEffect","unmount","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current","measureInWindow","_viewRef$current2","createElement","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC, RefObject } from \"react\";\nimport React, {\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  MeasureInWindowOnSuccessCallback,\n  MeasureOnSuccessCallback,\n  View,\n  ViewProps,\n} from \"react-native\";\nimport { type SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n  makeImageSnapshot(rect?: SkRect): SkImage;\n  makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n  redraw(): void;\n  getNativeId(): number;\n  measure(callback: MeasureOnSuccessCallback): void;\n  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nexport const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {\n  const ourRef = useCanvasRef();\n  const ref = userRef ?? ourRef;\n  const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    if (ref.current) {\n      ref.current.measure((_x, _y, width, height) => {\n        setSize({ width, height });\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return { ref, size };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const isFabric = Boolean((global as any)?.nativeFabricUIManager);\n\nexport interface CanvasProps extends Omit<ViewProps, \"onLayout\"> {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  colorSpace?: \"p3\" | \"srgb\";\n  ref?: React.Ref<CanvasRef>;\n  __destroyWebGLContextAfterRender?: boolean;\n}\n\nexport const Canvas = ({\n  debug,\n  opaque,\n  children,\n  onSize,\n  colorSpace = \"p3\",\n  ref,\n  // Here know this is a type error but this is done on purpose to check it at runtime\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-expect-error\n  onLayout,\n  ...viewProps\n}: CanvasProps) => {\n  if (onLayout && isFabric) {\n    console.error(\n      // eslint-disable-next-line max-len\n      \"<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size\"\n    );\n  }\n  const viewRef = useRef<View>(null);\n  // Native ID\n  const nativeId = useMemo(() => {\n    return SkiaViewNativeId.current++;\n  }, []);\n\n  // Root\n  const root = useMemo(\n    () => new SkiaSGRoot(Skia, nativeId, onSize),\n    [nativeId, onSize]\n  );\n\n  // Render effects\n  useLayoutEffect(() => {\n    root.render(children);\n  }, [children, root, nativeId]);\n\n  useEffect(() => {\n    return () => {\n      root.unmount();\n    };\n  }, [root]);\n\n  // Component methods\n  useImperativeHandle(\n    ref,\n    () =>\n      ({\n        makeImageSnapshot: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n        },\n        makeImageSnapshotAsync: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n        },\n        redraw: () => {\n          SkiaViewApi.requestRedraw(nativeId);\n        },\n        getNativeId: () => {\n          return nativeId;\n        },\n        measure: (callback) => {\n          viewRef.current?.measure(callback);\n        },\n        measureInWindow: (callback) => {\n          viewRef.current?.measureInWindow(callback);\n        },\n      } as CanvasRef)\n  );\n\n  return (\n    <SkiaPictureViewNativeComponent\n      ref={viewRef}\n      collapsable={false}\n      nativeID={`${nativeId}`}\n      debug={debug}\n      opaque={opaque}\n      colorSpace={colorSpace}\n      {...viewProps}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_SkiaViewNativeId","_SkiaPictureViewNativeComponent","_interopRequireDefault","_Reconciler","_skia","_Platform","_global","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","useCanvasRef","useRef","exports","useCanvasSize","userRef","ourRef","ref","size","setSize","useState","width","height","useLayoutEffect","current","measure","_x","_y","isFabric","Boolean","global","nativeFabricUIManager","Canvas","debug","opaque","children","onSize","colorSpace","onLayout","viewProps","console","error","viewRef","nativeId","useMemo","SkiaViewNativeId","root","SkiaSGRoot","Skia","render","useEffect","unmount","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current","measureInWindow","_viewRef$current2","onLayoutWeb","useCallback","Platform","OS","nativeEvent","layout","value","createElement","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC, RefObject } from \"react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  LayoutChangeEvent,\n  MeasureInWindowOnSuccessCallback,\n  MeasureOnSuccessCallback,\n  View,\n  ViewProps,\n} from \"react-native\";\nimport { type SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n  makeImageSnapshot(rect?: SkRect): SkImage;\n  makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n  redraw(): void;\n  getNativeId(): number;\n  measure(callback: MeasureOnSuccessCallback): void;\n  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nexport const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {\n  const ourRef = useCanvasRef();\n  const ref = userRef ?? ourRef;\n  const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    if (ref.current) {\n      ref.current.measure((_x, _y, width, height) => {\n        setSize({ width, height });\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return { ref, size };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const isFabric = Boolean((global as any)?.nativeFabricUIManager);\n\nexport interface CanvasProps extends Omit<ViewProps, \"onLayout\"> {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  colorSpace?: \"p3\" | \"srgb\";\n  ref?: React.Ref<CanvasRef>;\n  __destroyWebGLContextAfterRender?: boolean;\n}\n\nexport const Canvas = ({\n  debug,\n  opaque,\n  children,\n  onSize,\n  colorSpace = \"p3\",\n  ref,\n  // Here know this is a type error but this is done on purpose to check it at runtime\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-expect-error\n  onLayout,\n  ...viewProps\n}: CanvasProps) => {\n  if (onLayout && isFabric) {\n    console.error(\n      // eslint-disable-next-line max-len\n      \"<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size\"\n    );\n  }\n  const viewRef = useRef<View>(null);\n  // Native ID\n  const nativeId = useMemo(() => {\n    return SkiaViewNativeId.current++;\n  }, []);\n\n  // Root\n  const root = useMemo(\n    () => new SkiaSGRoot(Skia, nativeId, onSize),\n    [nativeId, onSize]\n  );\n\n  // Render effects\n  useLayoutEffect(() => {\n    root.render(children);\n  }, [children, root, nativeId]);\n\n  useEffect(() => {\n    return () => {\n      root.unmount();\n    };\n  }, [root]);\n\n  // Component methods\n  useImperativeHandle(\n    ref,\n    () =>\n      ({\n        makeImageSnapshot: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n        },\n        makeImageSnapshotAsync: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n        },\n        redraw: () => {\n          SkiaViewApi.requestRedraw(nativeId);\n        },\n        getNativeId: () => {\n          return nativeId;\n        },\n        measure: (callback) => {\n          viewRef.current?.measure(callback);\n        },\n        measureInWindow: (callback) => {\n          viewRef.current?.measureInWindow(callback);\n        },\n      } as CanvasRef)\n  );\n\n  const onLayoutWeb = useCallback(\n    (e: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(e);\n      }\n      if (Platform.OS === \"web\" && onSize) {\n        const { width, height } = e.nativeEvent.layout;\n        onSize.value = { width, height };\n      }\n    },\n    [onLayout, onSize]\n  );\n\n  return (\n    <SkiaPictureViewNativeComponent\n      ref={viewRef}\n      collapsable={false}\n      nativeID={`${nativeId}`}\n      debug={debug}\n      opaque={opaque}\n      colorSpace={colorSpace}\n      onLayout={onLayoutWeb}\n      {...viewProps}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/sksg/Container.d.ts

@@ -1,4 +1,4 @@
 import type { SharedValue } from "react-native-reanimated";
 import type { Skia, SkSize } from "../skia/types";
 import { StaticContainer } from "./StaticContainer";
-export declare const createContainer: (Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize>) => StaticContainer;
+export declare const createContainer: (Skia: Skia, nativeId: number, _onSize?: SharedValue<SkSize>) => StaticContainer;

package/lib/commonjs/sksg/Container.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createContainer = void 0;
 var _StaticContainer = require("./StaticContainer");
-const createContainer = (Skia, nativeId, onSize) => {
-  return new _StaticContainer.StaticContainer(Skia, nativeId, onSize);
+const createContainer = (Skia, nativeId, _onSize) => {
+  return new _StaticContainer.StaticContainer(Skia, nativeId);
 };
 exports.createContainer = createContainer;
 //# sourceMappingURL=Container.js.map

package/lib/commonjs/sksg/Container.js.map

@@ -1 +1 @@
-{"version":3,"names":["_StaticContainer","require","createContainer","Skia","nativeId","onSize","StaticContainer","exports"],"sources":["Container.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport type { Skia, SkSize } from \"../skia/types\";\n\nimport { StaticContainer } from \"./StaticContainer\";\n\nexport const createContainer = (\n  Skia: Skia,\n  nativeId: number,\n  onSize?: SharedValue<SkSize>\n) => {\n  return new StaticContainer(Skia, nativeId, onSize);\n};\n"],"mappings":";;;;;;AAIA,IAAAA,gBAAA,GAAAC,OAAA;AAEO,MAAMC,eAAe,GAAGA,CAC7BC,IAAU,EACVC,QAAgB,EAChBC,MAA4B,KACzB;EACH,OAAO,IAAIC,gCAAe,CAACH,IAAI,EAAEC,QAAQ,EAAEC,MAAM,CAAC;AACpD,CAAC;AAACE,OAAA,CAAAL,eAAA,GAAAA,eAAA","ignoreList":[]}
+{"version":3,"names":["_StaticContainer","require","createContainer","Skia","nativeId","_onSize","StaticContainer","exports"],"sources":["Container.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport type { Skia, SkSize } from \"../skia/types\";\n\nimport { StaticContainer } from \"./StaticContainer\";\n\nexport const createContainer = (\n  Skia: Skia,\n  nativeId: number,\n  _onSize?: SharedValue<SkSize>\n) => {\n  return new StaticContainer(Skia, nativeId);\n};\n"],"mappings":";;;;;;AAIA,IAAAA,gBAAA,GAAAC,OAAA;AAEO,MAAMC,eAAe,GAAGA,CAC7BC,IAAU,EACVC,QAAgB,EAChBC,OAA6B,KAC1B;EACH,OAAO,IAAIC,gCAAe,CAACH,IAAI,EAAEC,QAAQ,CAAC;AAC5C,CAAC;AAACG,OAAA,CAAAL,eAAA,GAAAA,eAAA","ignoreList":[]}

package/lib/commonjs/sksg/Container.native.js

@@ -18,13 +18,10 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 const nativeDrawOnscreen = (nativeId, recorder, onSize) => {
   "worklet";
 
-  //const start = performance.now();
   if (onSize) {
-    const size = SkiaViewApi.size(nativeId);
-    if (size.width !== onSize.value.width || size.height !== onSize.value.height) {
-      onSize.value = size;
-    }
+    SkiaViewApi.setJsiProperty(nativeId, "onSize", onSize);
   }
+  //const start = performance.now();
   const picture = recorder.play();
   //const end = performance.now();
   //console.log("Recording time: ", end - start);

package/lib/commonjs/sksg/Container.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_ReanimatedProxy","_interopRequireDefault","require","_renderHelpers","_ReanimatedRecorder","_StaticContainer","_Visitor","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","nativeDrawOnscreen","nativeId","recorder","onSize","size","SkiaViewApi","width","height","picture","play","setJsiProperty","NativeReanimatedContainer","Container","constructor","Skia","redraw","mapperId","Rea","stopMapper","unmounted","ReanimatedRecorder","visit","root","sharedValues","getSharedValues","sharedRecorder","getRecorder","runOnUI","length","startMapper","applyUpdates","createContainer","HAS_REANIMATED_3","StaticContainer","exports"],"sources":["Container.native.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkSize } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\n\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\nimport { Container, StaticContainer } from \"./StaticContainer\";\nimport { visit } from \"./Recorder/Visitor\";\n\nimport \"../skia/NativeSetup\";\nimport \"../views/api\";\n\nconst nativeDrawOnscreen = (\n  nativeId: number,\n  recorder: JsiRecorder,\n  onSize?: SharedValue<SkSize>\n) => {\n  \"worklet\";\n\n  //const start = performance.now();\n  if (onSize) {\n    const size = SkiaViewApi.size(nativeId);\n    if (\n      size.width !== onSize.value.width ||\n      size.height !== onSize.value.height\n    ) {\n      onSize.value = size;\n    }\n  }\n  const picture = recorder.play();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nclass NativeReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(\n    Skia: Skia,\n    private nativeId: number,\n    private onSize?: SharedValue<SkSize>\n  ) {\n    super(Skia);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const { nativeId, Skia } = this;\n    const recorder = new ReanimatedRecorder(Skia);\n    visit(recorder, this.root);\n    const sharedValues = recorder.getSharedValues();\n    const sharedRecorder = recorder.getRecorder();\n    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {\n      \"worklet\";\n      nativeDrawOnscreen(nativeId, sharedRecorder, onSize);\n    })(this.onSize);\n    if (sharedValues.length > 0) {\n      const { onSize } = this;\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        sharedRecorder.applyUpdates(sharedValues);\n        nativeDrawOnscreen(nativeId, sharedRecorder, onSize);\n      }, sharedValues);\n    }\n  }\n}\n\nexport const createContainer = (\n  Skia: Skia,\n  nativeId: number,\n  onSize?: SharedValue<SkSize>\n) => {\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    return new NativeReanimatedContainer(Skia, nativeId, onSize);\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_ReanimatedProxy","_interopRequireDefault","require","_renderHelpers","_ReanimatedRecorder","_StaticContainer","_Visitor","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","nativeDrawOnscreen","nativeId","recorder","onSize","SkiaViewApi","setJsiProperty","picture","play","NativeReanimatedContainer","Container","constructor","Skia","redraw","mapperId","Rea","stopMapper","unmounted","ReanimatedRecorder","visit","root","sharedValues","getSharedValues","sharedRecorder","getRecorder","runOnUI","length","startMapper","applyUpdates","createContainer","HAS_REANIMATED_3","StaticContainer","exports"],"sources":["Container.native.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkSize } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\n\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\nimport { Container, StaticContainer } from \"./StaticContainer\";\nimport { visit } from \"./Recorder/Visitor\";\n\nimport \"../skia/NativeSetup\";\nimport \"../views/api\";\n\nconst nativeDrawOnscreen = (\n  nativeId: number,\n  recorder: JsiRecorder,\n  onSize?: SharedValue<SkSize>\n) => {\n  \"worklet\";\n  if (onSize) {\n    SkiaViewApi.setJsiProperty(nativeId, \"onSize\", onSize);\n  }\n  //const start = performance.now();\n  const picture = recorder.play();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nclass NativeReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(\n    Skia: Skia,\n    private nativeId: number,\n    private onSize?: SharedValue<SkSize>\n  ) {\n    super(Skia);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const { nativeId, Skia } = this;\n    const recorder = new ReanimatedRecorder(Skia);\n    visit(recorder, this.root);\n    const sharedValues = recorder.getSharedValues();\n    const sharedRecorder = recorder.getRecorder();\n    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {\n      \"worklet\";\n      nativeDrawOnscreen(nativeId, sharedRecorder, onSize);\n    })(this.onSize);\n    if (sharedValues.length > 0) {\n      const { onSize } = this;\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        sharedRecorder.applyUpdates(sharedValues);\n        nativeDrawOnscreen(nativeId, sharedRecorder, onSize);\n      }, sharedValues);\n    }\n  }\n}\n\nexport const createContainer = (\n  Skia: Skia,\n  nativeId: number,\n  onSize?: SharedValue<SkSize>\n) => {\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    return new NativeReanimatedContainer(Skia, nativeId, onSize);\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/sksg/Container.web.d.ts

@@ -5,10 +5,9 @@ import "../skia/NativeSetup";
 import "../views/api";
 declare class ReanimatedContainer extends Container {
     private nativeId;
-    private onSize?;
     private mapperId;
-    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
+    constructor(Skia: Skia, nativeId: number);
     redraw(): void;
 }
-export declare const createContainer: (Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize>) => StaticContainer | ReanimatedContainer;
+export declare const createContainer: (Skia: Skia, nativeId: number, _onSize?: SharedValue<SkSize>) => StaticContainer | ReanimatedContainer;
 export {};

package/lib/commonjs/sksg/Container.web.js

@@ -17,15 +17,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-const drawOnscreen = (Skia, nativeId, recording, onSize) => {
+const drawOnscreen = (Skia, nativeId, recording) => {
   "worklet";
 
-  if (onSize) {
-    const size = SkiaViewApi.size(nativeId);
-    if (size.width !== onSize.value.width || size.height !== onSize.value.height) {
-      onSize.value = size;
-    }
-  }
   const rec = Skia.PictureRecorder();
   const canvas = rec.beginRecording();
   //const start = performance.now();
@@ -38,10 +32,9 @@ const drawOnscreen = (Skia, nativeId, recording, onSize) => {
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
 };
 class ReanimatedContainer extends _StaticContainer.Container {
-  constructor(Skia, nativeId, onSize) {
+  constructor(Skia, nativeId) {
     super(Skia);
     this.nativeId = nativeId;
-    this.onSize = onSize;
     _defineProperty(this, "mapperId", null);
   }
   redraw() {
@@ -73,16 +66,16 @@ class ReanimatedContainer extends _StaticContainer.Container {
         drawOnscreen(Skia, nativeId, recording);
       }, Array.from(animationValues));
     }
-    _ReanimatedProxy.default.runOnUI(onSize => {
+    _ReanimatedProxy.default.runOnUI(() => {
       "worklet";
 
-      drawOnscreen(Skia, nativeId, recording, onSize);
-    })(this.onSize);
+      drawOnscreen(Skia, nativeId, recording);
+    })();
   }
 }
-const createContainer = (Skia, nativeId, onSize) => {
+const createContainer = (Skia, nativeId, _onSize) => {
   if (_renderHelpers.HAS_REANIMATED_3 && nativeId !== -1) {
-    return new ReanimatedContainer(Skia, nativeId, onSize);
+    return new ReanimatedContainer(Skia, nativeId);
   } else {
     return new _StaticContainer.StaticContainer(Skia, nativeId);
   }

package/lib/commonjs/sksg/Container.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["_ReanimatedProxy","_interopRequireDefault","require","_renderHelpers","_Recorder","_Visitor","_Player","_DrawingContext","_StaticContainer","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","drawOnscreen","Skia","nativeId","recording","onSize","size","SkiaViewApi","width","height","rec","PictureRecorder","canvas","beginRecording","ctx","createDrawingContext","paintPool","replay","commands","picture","finishRecordingAsPicture","setJsiProperty","ReanimatedContainer","Container","constructor","redraw","mapperId","Rea","stopMapper","unmounted","recorder","Recorder","visit","root","record","getRecording","animationValues","startMapper","Array","from","runOnUI","createContainer","HAS_REANIMATED_3","StaticContainer","exports"],"sources":["Container.web.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkSize } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\n\nimport type { Recording } from \"./Recorder/Recorder\";\nimport { Recorder } from \"./Recorder/Recorder\";\nimport { visit } from \"./Recorder/Visitor\";\nimport { replay } from \"./Recorder/Player\";\nimport { createDrawingContext } from \"./Recorder/DrawingContext\";\nimport { Container, StaticContainer } from \"./StaticContainer\";\n\nimport \"../skia/NativeSetup\";\nimport \"../views/api\";\n\nconst drawOnscreen = (\n  Skia: Skia,\n  nativeId: number,\n  recording: Recording,\n  onSize?: SharedValue<SkSize>\n) => {\n  \"worklet\";\n  if (onSize) {\n    const size = SkiaViewApi.size(nativeId);\n    if (\n      size.width !== onSize.value.width ||\n      size.height !== onSize.value.height\n    ) {\n      onSize.value = size;\n    }\n  }\n  const rec = Skia.PictureRecorder();\n  const canvas = rec.beginRecording();\n  //const start = performance.now();\n\n  const ctx = createDrawingContext(Skia, recording.paintPool, canvas);\n  replay(ctx, recording.commands);\n  const picture = rec.finishRecordingAsPicture();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nclass ReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(\n    Skia: Skia,\n    private nativeId: number,\n    private onSize?: SharedValue<SkSize>\n  ) {\n    super(Skia);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    const record = recorder.getRecording();\n    const { animationValues } = record;\n    this.recording = {\n      commands: record.commands,\n      paintPool: record.paintPool,\n    };\n    const { nativeId, Skia, recording } = this;\n    if (animationValues.size > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        drawOnscreen(Skia, nativeId, recording!);\n      }, Array.from(animationValues));\n    }\n    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {\n      \"worklet\";\n      drawOnscreen(Skia, nativeId, recording!, onSize);\n    })(this.onSize);\n  }\n}\n\nexport const createContainer = (\n  Skia: Skia,\n  nativeId: number,\n  onSize?: SharedValue<SkSize>\n) => {\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    return new ReanimatedContainer(Skia, nativeId, onSize);\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_ReanimatedProxy","_interopRequireDefault","require","_renderHelpers","_Recorder","_Visitor","_Player","_DrawingContext","_StaticContainer","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","drawOnscreen","Skia","nativeId","recording","rec","PictureRecorder","canvas","beginRecording","ctx","createDrawingContext","paintPool","replay","commands","picture","finishRecordingAsPicture","SkiaViewApi","setJsiProperty","ReanimatedContainer","Container","constructor","redraw","mapperId","Rea","stopMapper","unmounted","recorder","Recorder","visit","root","record","getRecording","animationValues","size","startMapper","Array","from","runOnUI","createContainer","_onSize","HAS_REANIMATED_3","StaticContainer","exports"],"sources":["Container.web.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkSize } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\n\nimport type { Recording } from \"./Recorder/Recorder\";\nimport { Recorder } from \"./Recorder/Recorder\";\nimport { visit } from \"./Recorder/Visitor\";\nimport { replay } from \"./Recorder/Player\";\nimport { createDrawingContext } from \"./Recorder/DrawingContext\";\nimport { Container, StaticContainer } from \"./StaticContainer\";\n\nimport \"../skia/NativeSetup\";\nimport \"../views/api\";\n\nconst drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {\n  \"worklet\";\n  const rec = Skia.PictureRecorder();\n  const canvas = rec.beginRecording();\n  //const start = performance.now();\n\n  const ctx = createDrawingContext(Skia, recording.paintPool, canvas);\n  replay(ctx, recording.commands);\n  const picture = rec.finishRecordingAsPicture();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nclass ReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(Skia: Skia, private nativeId: number) {\n    super(Skia);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    const record = recorder.getRecording();\n    const { animationValues } = record;\n    this.recording = {\n      commands: record.commands,\n      paintPool: record.paintPool,\n    };\n    const { nativeId, Skia, recording } = this;\n    if (animationValues.size > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        drawOnscreen(Skia, nativeId, recording!);\n      }, Array.from(animationValues));\n    }\n    Rea.runOnUI(() => {\n      \"worklet\";\n      drawOnscreen(Skia, nativeId, recording!);\n    })();\n  }\n}\n\nexport const createContainer = (\n  Skia: Skia,\n  nativeId: number,\n  _onSize?: SharedValue<SkSize>\n) => {\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    return new ReanimatedContainer(Skia, nativeId);\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/sksg/StaticContainer.d.ts

@@ -1,5 +1,4 @@
-import type { SharedValue } from "react-native-reanimated";
-import type { Skia, SkCanvas, SkSize } from "../skia/types";
+import type { Skia, SkCanvas } from "../skia/types";
 import type { Node } from "./Node";
 import type { Recording } from "./Recorder/Recorder";
 import "../views/api";
@@ -18,7 +17,6 @@ export declare abstract class Container {
 }
 export declare class StaticContainer extends Container {
     private nativeId;
-    private onSize?;
-    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
+    constructor(Skia: Skia, nativeId: number);
     redraw(): void;
 }

package/lib/commonjs/sksg/StaticContainer.js

@@ -41,10 +41,9 @@ class Container {
 }
 exports.Container = Container;
 class StaticContainer extends Container {
-  constructor(Skia, nativeId, onSize) {
+  constructor(Skia, nativeId) {
     super(Skia);
     this.nativeId = nativeId;
-    this.onSize = onSize;
   }
   redraw() {
     const recorder = new _Recorder.Recorder();
@@ -52,12 +51,6 @@ class StaticContainer extends Container {
     this.recording = recorder.getRecording();
     const isOnScreen = this.nativeId !== -1;
     if (isOnScreen) {
-      if (this.onSize) {
-        const size = SkiaViewApi.size(this.nativeId);
-        if (size.width !== this.onSize.value.width || size.height !== this.onSize.value.height) {
-          this.onSize.value = size;
-        }
-      }
       const rec = this.Skia.PictureRecorder();
       const canvas = rec.beginRecording();
       this.drawOnCanvas(canvas);

package/lib/commonjs/sksg/StaticContainer.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Recorder","require","_Visitor","_Player","_DrawingContext","_defineProperty","e","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","Container","constructor","Skia","root","_root","mount","unmounted","unmount","drawOnCanvas","canvas","recording","Error","ctx","createDrawingContext","paintPool","replay","commands","exports","StaticContainer","nativeId","onSize","redraw","recorder","Recorder","visit","getRecording","isOnScreen","size","SkiaViewApi","width","height","rec","PictureRecorder","beginRecording","picture","finishRecordingAsPicture","setJsiProperty"],"sources":["StaticContainer.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport type { Skia, SkCanvas, SkSize } from \"../skia/types\";\n\nimport type { Node } from \"./Node\";\nimport type { Recording } from \"./Recorder/Recorder\";\nimport { Recorder } from \"./Recorder/Recorder\";\nimport { visit } from \"./Recorder/Visitor\";\nimport { replay } from \"./Recorder/Player\";\nimport { createDrawingContext } from \"./Recorder/DrawingContext\";\n\nimport \"../views/api\";\n\nexport abstract class Container {\n  private _root: Node[] = [];\n  protected recording: Recording | null = null;\n  protected unmounted = false;\n\n  constructor(protected Skia: Skia) {}\n\n  get root() {\n    return this._root;\n  }\n\n  set root(value: Node[]) {\n    this._root = value;\n  }\n\n  mount() {\n    this.unmounted = false;\n  }\n\n  unmount() {\n    this.unmounted = true;\n  }\n\n  drawOnCanvas(canvas: SkCanvas) {\n    if (!this.recording) {\n      throw new Error(\"No recording to draw\");\n    }\n    const ctx = createDrawingContext(\n      this.Skia,\n      this.recording.paintPool,\n      canvas\n    );\n    replay(ctx, this.recording.commands);\n  }\n\n  abstract redraw(): void;\n}\n\nexport class StaticContainer extends Container {\n  constructor(\n    Skia: Skia,\n    private nativeId: number,\n    private onSize?: SharedValue<SkSize>\n  ) {\n    super(Skia);\n  }\n\n  redraw() {\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    this.recording = recorder.getRecording();\n    const isOnScreen = this.nativeId !== -1;\n    if (isOnScreen) {\n      if (this.onSize) {\n        const size = SkiaViewApi.size(this.nativeId);\n        if (\n          size.width !== this.onSize.value.width ||\n          size.height !== this.onSize.value.height\n        ) {\n          this.onSize.value = size;\n        }\n      }\n      const rec = this.Skia.PictureRecorder();\n      const canvas = rec.beginRecording();\n      this.drawOnCanvas(canvas);\n      const picture = rec.finishRecordingAsPicture();\n      SkiaViewApi.setJsiProperty(this.nativeId, \"picture\", picture);\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_Recorder","require","_Visitor","_Player","_DrawingContext","_defineProperty","e","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","Container","constructor","Skia","root","_root","mount","unmounted","unmount","drawOnCanvas","canvas","recording","Error","ctx","createDrawingContext","paintPool","replay","commands","exports","StaticContainer","nativeId","redraw","recorder","Recorder","visit","getRecording","isOnScreen","rec","PictureRecorder","beginRecording","picture","finishRecordingAsPicture","SkiaViewApi","setJsiProperty"],"sources":["StaticContainer.ts"],"sourcesContent":["import type { Skia, SkCanvas } from \"../skia/types\";\n\nimport type { Node } from \"./Node\";\nimport type { Recording } from \"./Recorder/Recorder\";\nimport { Recorder } from \"./Recorder/Recorder\";\nimport { visit } from \"./Recorder/Visitor\";\nimport { replay } from \"./Recorder/Player\";\nimport { createDrawingContext } from \"./Recorder/DrawingContext\";\n\nimport \"../views/api\";\n\nexport abstract class Container {\n  private _root: Node[] = [];\n  protected recording: Recording | null = null;\n  protected unmounted = false;\n\n  constructor(protected Skia: Skia) {}\n\n  get root() {\n    return this._root;\n  }\n\n  set root(value: Node[]) {\n    this._root = value;\n  }\n\n  mount() {\n    this.unmounted = false;\n  }\n\n  unmount() {\n    this.unmounted = true;\n  }\n\n  drawOnCanvas(canvas: SkCanvas) {\n    if (!this.recording) {\n      throw new Error(\"No recording to draw\");\n    }\n    const ctx = createDrawingContext(\n      this.Skia,\n      this.recording.paintPool,\n      canvas\n    );\n    replay(ctx, this.recording.commands);\n  }\n\n  abstract redraw(): void;\n}\n\nexport class StaticContainer extends Container {\n  constructor(Skia: Skia, private nativeId: number) {\n    super(Skia);\n  }\n\n  redraw() {\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    this.recording = recorder.getRecording();\n    const isOnScreen = this.nativeId !== -1;\n    if (isOnScreen) {\n      const rec = this.Skia.PictureRecorder();\n      const canvas = rec.beginRecording();\n      this.drawOnCanvas(canvas);\n      const picture = rec.finishRecordingAsPicture();\n      SkiaViewApi.setJsiProperty(this.nativeId, \"picture\", picture);\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/specs/NativeSkiaModule.web.js

@@ -9,6 +9,7 @@ exports.default = void 0;
 global.SkiaViewApi = {
   views: {},
   deferedPictures: {},
+  deferedOnSize: {},
   web: true,
   registerView(nativeId, view) {
     // Maybe a picture for this view was already set

package/lib/commonjs/specs/NativeSkiaModule.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["global","SkiaViewApi","views","deferedPictures","web","registerView","nativeId","view","setPicture","setJsiProperty","name","value","size","getSize","width","height","requestRedraw","redraw","makeImageSnapshot","rect","makeImageSnapshotAsync","Promise","resolve","reject","result","Error","_default","exports","default"],"sources":["NativeSkiaModule.web.ts"],"sourcesContent":["/* eslint-disable import/no-anonymous-default-export */\nimport type { SkPicture, SkRect } from \"../skia/types\";\nimport type { ISkiaViewApi } from \"../views/types\";\nimport type { SkiaPictureViewHandle } from \"../views/SkiaPictureView.web\";\n\nexport type ISkiaViewApiWeb = ISkiaViewApi & {\n  views: Record<string, SkiaPictureViewHandle>;\n  deferedPictures: Record<string, SkPicture>;\n  registerView(nativeId: string, view: SkiaPictureViewHandle): void;\n};\n\nglobal.SkiaViewApi = {\n  views: {},\n  deferedPictures: {},\n  web: true,\n  registerView(nativeId: string, view: SkiaPictureViewHandle) {\n    // Maybe a picture for this view was already set\n    if (this.deferedPictures[nativeId]) {\n      view.setPicture(this.deferedPictures[nativeId] as SkPicture);\n    }\n    this.views[nativeId] = view;\n  },\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  setJsiProperty(nativeId: number, name: string, value: any) {\n    if (name === \"picture\") {\n      if (!this.views[`${nativeId}`]) {\n        this.deferedPictures[`${nativeId}`] = value;\n      } else {\n        this.views[`${nativeId}`].setPicture(value);\n      }\n    }\n  },\n  size(nativeId: number) {\n    if (this.views[`${nativeId}`]) {\n      return this.views[`${nativeId}`].getSize();\n    } else {\n      return { width: 0, height: 0 };\n    }\n  },\n  requestRedraw(nativeId: number) {\n    this.views[`${nativeId}`].redraw();\n  },\n  makeImageSnapshot(nativeId: number, rect?: SkRect) {\n    return this.views[`${nativeId}`].makeImageSnapshot(rect);\n  },\n  makeImageSnapshotAsync(nativeId: number, rect?: SkRect) {\n    return new Promise((resolve, reject) => {\n      const result = this.views[`${nativeId}`].makeImageSnapshot(rect);\n      if (result) {\n        resolve(result);\n      } else {\n        reject(new Error(\"Failed to make image snapshot\"));\n      }\n    });\n  },\n} as ISkiaViewApiWeb;\n\n// eslint-disable-next-line import/no-default-export\nexport default {};\n"],"mappings":";;;;;;AAAA;;AAWAA,MAAM,CAACC,WAAW,GAAG;EACnBC,KAAK,EAAE,CAAC,CAAC;EACTC,eAAe,EAAE,CAAC,CAAC;EACnBC,GAAG,EAAE,IAAI;EACTC,YAAYA,CAACC,QAAgB,EAAEC,IAA2B,EAAE;IAC1D;IACA,IAAI,IAAI,CAACJ,eAAe,CAACG,QAAQ,CAAC,EAAE;MAClCC,IAAI,CAACC,UAAU,CAAC,IAAI,CAACL,eAAe,CAACG,QAAQ,CAAc,CAAC;IAC9D;IACA,IAAI,CAACJ,KAAK,CAACI,QAAQ,CAAC,GAAGC,IAAI;EAC7B,CAAC;EACD;EACAE,cAAcA,CAACH,QAAgB,EAAEI,IAAY,EAAEC,KAAU,EAAE;IACzD,IAAID,IAAI,KAAK,SAAS,EAAE;MACtB,IAAI,CAAC,IAAI,CAACR,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,EAAE;QAC9B,IAAI,CAACH,eAAe,CAAC,GAAGG,QAAQ,EAAE,CAAC,GAAGK,KAAK;MAC7C,CAAC,MAAM;QACL,IAAI,CAACT,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACE,UAAU,CAACG,KAAK,CAAC;MAC7C;IACF;EACF,CAAC;EACDC,IAAIA,CAACN,QAAgB,EAAE;IACrB,IAAI,IAAI,CAACJ,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,EAAE;MAC7B,OAAO,IAAI,CAACJ,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACO,OAAO,CAAC,CAAC;IAC5C,CAAC,MAAM;MACL,OAAO;QAAEC,KAAK,EAAE,CAAC;QAAEC,MAAM,EAAE;MAAE,CAAC;IAChC;EACF,CAAC;EACDC,aAAaA,CAACV,QAAgB,EAAE;IAC9B,IAAI,CAACJ,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACW,MAAM,CAAC,CAAC;EACpC,CAAC;EACDC,iBAAiBA,CAACZ,QAAgB,EAAEa,IAAa,EAAE;IACjD,OAAO,IAAI,CAACjB,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACY,iBAAiB,CAACC,IAAI,CAAC;EAC1D,CAAC;EACDC,sBAAsBA,CAACd,QAAgB,EAAEa,IAAa,EAAE;IACtD,OAAO,IAAIE,OAAO,CAAC,CAACC,OAAO,EAAEC,MAAM,KAAK;MACtC,MAAMC,MAAM,GAAG,IAAI,CAACtB,KAAK,CAAC,GAAGI,QAAQ,EAAE,CAAC,CAACY,iBAAiB,CAACC,IAAI,CAAC;MAChE,IAAIK,MAAM,EAAE;QACVF,OAAO,CAACE,MAAM,CAAC;MACjB,CAAC,MAAM;QACLD,MAAM,CAAC,IAAIE,KAAK,CAAC,+BAA+B,CAAC,CAAC;MACpD;IACF,CAAC,CAAC;EACJ;AACF,CAAoB;;AAEpB;AAAA,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GACe,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["global","SkiaViewApi","views","deferedPictures","deferedOnSize","web","registerView","nativeId","view","setPicture","setJsiProperty","name","value","size","getSize","width","height","requestRedraw","redraw","makeImageSnapshot","rect","makeImageSnapshotAsync","Promise","resolve","reject","result","Error","_default","exports","default"],"sources":["NativeSkiaModule.web.ts"],"sourcesContent":["/* eslint-disable import/no-anonymous-default-export */\nimport type { SkPicture, SkRect } from \"../skia/types\";\nimport type { ISkiaViewApi } from \"../views/types\";\nimport type { SkiaPictureViewHandle } from \"../views/SkiaPictureView.web\";\n\nexport type ISkiaViewApiWeb = ISkiaViewApi & {\n  views: Record<string, SkiaPictureViewHandle>;\n  deferedPictures: Record<string, SkPicture>;\n  registerView(nativeId: string, view: SkiaPictureViewHandle): void;\n};\n\nglobal.SkiaViewApi = {\n  views: {},\n  deferedPictures: {},\n  deferedOnSize: {},\n  web: true,\n  registerView(nativeId: string, view: SkiaPictureViewHandle) {\n    // Maybe a picture for this view was already set\n    if (this.deferedPictures[nativeId]) {\n      view.setPicture(this.deferedPictures[nativeId] as SkPicture);\n    }\n    this.views[nativeId] = view;\n  },\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  setJsiProperty(nativeId: number, name: string, value: any) {\n    if (name === \"picture\") {\n      if (!this.views[`${nativeId}`]) {\n        this.deferedPictures[`${nativeId}`] = value;\n      } else {\n        this.views[`${nativeId}`].setPicture(value);\n      }\n    }\n  },\n  size(nativeId: number) {\n    if (this.views[`${nativeId}`]) {\n      return this.views[`${nativeId}`].getSize();\n    } else {\n      return { width: 0, height: 0 };\n    }\n  },\n  requestRedraw(nativeId: number) {\n    this.views[`${nativeId}`].redraw();\n  },\n  makeImageSnapshot(nativeId: number, rect?: SkRect) {\n    return this.views[`${nativeId}`].makeImageSnapshot(rect);\n  },\n  makeImageSnapshotAsync(nativeId: number, rect?: SkRect) {\n    return new Promise((resolve, reject) => {\n      const result = this.views[`${nativeId}`].makeImageSnapshot(rect);\n      if (result) {\n        resolve(result);\n      } else {\n        reject(new Error(\"Failed to make image snapshot\"));\n      }\n    });\n  },\n} as ISkiaViewApiWeb;\n\n// eslint-disable-next-line import/no-default-export\nexport default {};\n"],"mappings":";;;;;;AAAA;;AAWAA,MAAM,CAACC,WAAW,GAAG;EACnBC,KAAK,EAAE,CAAC,CAAC;EACTC,eAAe,EAAE,CAAC,CAAC;EACnBC,aAAa,EAAE,CAAC,CAAC;EACjBC,GAAG,EAAE,IAAI;EACTC,YAAYA,CAACC,QAAgB,EAAEC,IAA2B,EAAE;IAC1D;IACA,IAAI,IAAI,CAACL,eAAe,CAACI,QAAQ,CAAC,EAAE;MAClCC,IAAI,CAACC,UAAU,CAAC,IAAI,CAACN,eAAe,CAACI,QAAQ,CAAc,CAAC;IAC9D;IACA,IAAI,CAACL,KAAK,CAACK,QAAQ,CAAC,GAAGC,IAAI;EAC7B,CAAC;EACD;EACAE,cAAcA,CAACH,QAAgB,EAAEI,IAAY,EAAEC,KAAU,EAAE;IACzD,IAAID,IAAI,KAAK,SAAS,EAAE;MACtB,IAAI,CAAC,IAAI,CAACT,KAAK,CAAC,GAAGK,QAAQ,EAAE,CAAC,EAAE;QAC9B,IAAI,CAACJ,eAAe,CAAC,GAAGI,QAAQ,EAAE,CAAC,GAAGK,KAAK;MAC7C,CAAC,MAAM;QACL,IAAI,CAACV,KAAK,CAAC,GAAGK,QAAQ,EAAE,CAAC,CAACE,UAAU,CAACG,KAAK,CAAC;MAC7C;IACF;EACF,CAAC;EACDC,IAAIA,CAACN,QAAgB,EAAE;IACrB,IAAI,IAAI,CAACL,KAAK,CAAC,GAAGK,QAAQ,EAAE,CAAC,EAAE;MAC7B,OAAO,IAAI,CAACL,KAAK,CAAC,GAAGK,QAAQ,EAAE,CAAC,CAACO,OAAO,CAAC,CAAC;IAC5C,CAAC,MAAM;MACL,OAAO;QAAEC,KAAK,EAAE,CAAC;QAAEC,MAAM,EAAE;MAAE,CAAC;IAChC;EACF,CAAC;EACDC,aAAaA,CAACV,QAAgB,EAAE;IAC9B,IAAI,CAACL,KAAK,CAAC,GAAGK,QAAQ,EAAE,CAAC,CAACW,MAAM,CAAC,CAAC;EACpC,CAAC;EACDC,iBAAiBA,CAACZ,QAAgB,EAAEa,IAAa,EAAE;IACjD,OAAO,IAAI,CAAClB,KAAK,CAAC,GAAGK,QAAQ,EAAE,CAAC,CAACY,iBAAiB,CAACC,IAAI,CAAC;EAC1D,CAAC;EACDC,sBAAsBA,CAACd,QAAgB,EAAEa,IAAa,EAAE;IACtD,OAAO,IAAIE,OAAO,CAAC,CAACC,OAAO,EAAEC,MAAM,KAAK;MACtC,MAAMC,MAAM,GAAG,IAAI,CAACvB,KAAK,CAAC,GAAGK,QAAQ,EAAE,CAAC,CAACY,iBAAiB,CAACC,IAAI,CAAC;MAChE,IAAIK,MAAM,EAAE;QACVF,OAAO,CAACE,MAAM,CAAC;MACjB,CAAC,MAAM;QACLD,MAAM,CAAC,IAAIE,KAAK,CAAC,+BAA+B,CAAC,CAAC;MACpD;IACF,CAAC,CAAC;EACJ;AACF,CAAoB;;AAEpB;AAAA,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GACe,CAAC,CAAC","ignoreList":[]}

package/lib/module/renderer/Canvas.js

@@ -1,10 +1,11 @@
 var _global;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
 import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
 import { SkiaSGRoot } from "../sksg/Reconciler";
 import { Skia } from "../skia";
+import { Platform } from "../Platform";
 export const useCanvasRef = () => useRef(null);
 export const useCanvasSize = userRef => {
   const ourRef = useCanvasRef();
@@ -92,13 +93,29 @@ export const Canvas = ({
       (_viewRef$current2 = viewRef.current) === null || _viewRef$current2 === void 0 || _viewRef$current2.measureInWindow(callback);
     }
   }));
+  const onLayoutWeb = useCallback(e => {
+    if (onLayout) {
+      onLayout(e);
+    }
+    if (Platform.OS === "web" && onSize) {
+      const {
+        width,
+        height
+      } = e.nativeEvent.layout;
+      onSize.value = {
+        width,
+        height
+      };
+    }
+  }, [onLayout, onSize]);
   return /*#__PURE__*/React.createElement(SkiaPictureViewNativeComponent, _extends({
     ref: viewRef,
     collapsable: false,
     nativeID: `${nativeId}`,
     debug: debug,
     opaque: opaque,
-    colorSpace: colorSpace
+    colorSpace: colorSpace,
+    onLayout: onLayoutWeb
   }, viewProps));
 };
 //# sourceMappingURL=Canvas.js.map