@shopify/react-native-skia 1.9.1 → 1.10.1

package/lib/module/renderer/Canvas.js

@@ -1,8 +1,12 @@
 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, useCallback, useMemo, forwardRef, useRef } from "react";
-import { SkiaDomView } from "../views";
-import { SkiaRoot } from "./Reconciler";
-export const useCanvasRef = () => useRef(null);
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
+import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
+import { SkiaSGRoot } from "../sksg/Reconciler";
+import { Skia } from "../skia";
+const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
+
+// TODO: no need to go through the JS thread for this
 const useOnSizeEvent = (resultValue, onLayout) => {
   return useCallback(event => {
     if (onLayout) {
@@ -21,67 +25,73 @@ const useOnSizeEvent = (resultValue, onLayout) => {
   }, [onLayout, resultValue]);
 };
 export const Canvas = /*#__PURE__*/forwardRef(({
-  children,
-  style,
+  mode,
   debug,
-  mode = "default",
-  onSize: _onSize,
+  opaque,
+  children,
+  onSize,
   onLayout: _onLayout,
-  ...props
-}, forwardedRef) => {
-  const onLayout = useOnSizeEvent(_onSize, _onLayout);
-  const innerRef = useCanvasRef();
-  const ref = useCombinedRefs(forwardedRef, innerRef);
-  const redraw = useCallback(() => {
-    var _innerRef$current;
-    (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 || _innerRef$current.redraw();
-  }, [innerRef]);
-  const getNativeId = useCallback(() => {
-    var _innerRef$current$nat, _innerRef$current2;
-    const id = (_innerRef$current$nat = (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.nativeId) !== null && _innerRef$current$nat !== void 0 ? _innerRef$current$nat : -1;
-    return id;
-  }, [innerRef]);
-  const root = useMemo(() => new SkiaRoot(redraw, getNativeId), [redraw, getNativeId]);
+  ...viewProps
+}, ref) => {
+  const rafId = useRef(null);
+  const onLayout = useOnSizeEvent(onSize, _onLayout);
+  // Native ID
+  const nativeId = useMemo(() => {
+    return SkiaViewNativeId.current++;
+  }, []);
+
+  // Root
+  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
 
-  // Render effect
+  // Render effects
   useEffect(() => {
     root.render(children);
-  }, [children, root, redraw]);
+  }, [children, root]);
   useEffect(() => {
     return () => {
       root.unmount();
     };
   }, [root]);
-  return /*#__PURE__*/React.createElement(SkiaDomView, _extends({
-    ref: ref,
-    style: style,
-    root: root.dom,
-    onLayout: onLayout,
-    debug: debug,
-    mode: mode
-  }, props));
-});
-
-/**
- * Combines a list of refs into a single ref. This can be used to provide
- * both a forwarded ref and an internal ref keeping the same functionality
- * on both of the refs.
- * @param refs Array of refs to combine
- * @returns A single ref that can be used in a ref prop.
- */
-const useCombinedRefs = (...refs) => {
-  const targetRef = React.useRef(null);
-  React.useEffect(() => {
-    refs.forEach(ref => {
-      if (ref) {
-        if (typeof ref === "function") {
-          ref(targetRef.current);
-        } else {
-          ref.current = targetRef.current;
-        }
+  const requestRedraw = useCallback(() => {
+    rafId.current = requestAnimationFrame(() => {
+      root.render(children);
+      if (mode === "continuous") {
+        requestRedraw();
       }
     });
-  }, [refs]);
-  return targetRef;
-};
+  }, [children, mode, root]);
+  useEffect(() => {
+    if (mode === "continuous") {
+      console.warn("The `mode` property in `Canvas` is deprecated.");
+      requestRedraw();
+    }
+    return () => {
+      if (rafId.current !== null) {
+        cancelAnimationFrame(rafId.current);
+      }
+    };
+  }, [mode, requestRedraw]);
+  // Component methods
+  useImperativeHandle(ref, () => ({
+    makeImageSnapshot: rect => {
+      return SkiaViewApi.makeImageSnapshot(nativeId, rect);
+    },
+    makeImageSnapshotAsync: rect => {
+      return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);
+    },
+    redraw: () => {
+      SkiaViewApi.requestRedraw(nativeId);
+    },
+    getNativeId: () => {
+      return nativeId;
+    }
+  }));
+  return /*#__PURE__*/React.createElement(NativeSkiaPictureView, _extends({
+    collapsable: false,
+    nativeID: `${nativeId}`,
+    debug: debug,
+    opaque: opaque,
+    onLayout: onLayout
+  }, viewProps));
+});
 //# sourceMappingURL=Canvas.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useCallback","useMemo","forwardRef","useRef","SkiaDomView","SkiaRoot","useCanvasRef","useOnSizeEvent","resultValue","onLayout","event","width","height","nativeEvent","layout","value","Canvas","children","style","debug","mode","onSize","_onSize","_onLayout","props","forwardedRef","innerRef","ref","useCombinedRefs","redraw","_innerRef$current","current","getNativeId","_innerRef$current$nat","_innerRef$current2","id","nativeId","root","render","unmount","createElement","_extends","dom","refs","targetRef","forEach"],"sources":["Canvas.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useCallback,\n  useMemo,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  MutableRefObject,\n  ForwardedRef,\n  FunctionComponent,\n} from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport { SkiaDomView } from \"../views\";\nimport type { SkiaBaseViewProps } from \"../views\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\nexport const useCanvasRef = () => useRef<SkiaDomView>(null);\n\nexport interface CanvasProps extends SkiaBaseViewProps {\n  ref?: RefObject<SkiaDomView>;\n  children: ReactNode;\n  mode?: \"default\" | \"continuous\";\n}\n\nconst useOnSizeEvent = (\n  resultValue: SkiaBaseViewProps[\"onSize\"],\n  onLayout?: (event: LayoutChangeEvent) => void\n) => {\n  return useCallback(\n    (event: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(event);\n      }\n      const { width, height } = event.nativeEvent.layout;\n\n      if (resultValue) {\n        resultValue.value = { width, height };\n      }\n    },\n    [onLayout, resultValue]\n  );\n};\n\nexport const Canvas = forwardRef<SkiaDomView, CanvasProps>(\n  (\n    {\n      children,\n      style,\n      debug,\n      mode = \"default\",\n      onSize: _onSize,\n      onLayout: _onLayout,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const onLayout = useOnSizeEvent(_onSize, _onLayout);\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const redraw = useCallback(() => {\n      innerRef.current?.redraw();\n    }, [innerRef]);\n    const getNativeId = useCallback(() => {\n      const id = innerRef.current?.nativeId ?? -1;\n      return id;\n    }, [innerRef]);\n\n    const root = useMemo(\n      () => new SkiaRoot(redraw, getNativeId),\n      [redraw, getNativeId]\n    );\n\n    // Render effect\n    useEffect(() => {\n      root.render(children);\n    }, [children, root, redraw]);\n\n    useEffect(() => {\n      return () => {\n        root.unmount();\n      };\n    }, [root]);\n\n    return (\n      <SkiaDomView\n        ref={ref}\n        style={style}\n        root={root.dom}\n        onLayout={onLayout}\n        debug={debug}\n        mode={mode}\n        {...props}\n      />\n    );\n  }\n) as FunctionComponent<CanvasProps & React.RefAttributes<SkiaDomView>>;\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","SkiaViewNativeId","SkiaPictureViewNativeComponent","SkiaSGRoot","Skia","NativeSkiaPictureView","useOnSizeEvent","resultValue","onLayout","event","width","height","nativeEvent","layout","value","Canvas","mode","debug","opaque","children","onSize","_onLayout","viewProps","ref","rafId","nativeId","current","root","render","unmount","requestRedraw","requestAnimationFrame","console","warn","cancelAnimationFrame","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","getNativeId","React","createElement","_extends","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type { LayoutChangeEvent, ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport type { SkiaBaseViewProps } from \"../views\";\n\nconst NativeSkiaPictureView = SkiaPictureViewNativeComponent;\n\n// TODO: no need to go through the JS thread for this\nconst useOnSizeEvent = (\n  resultValue: SkiaBaseViewProps[\"onSize\"],\n  onLayout?: (event: LayoutChangeEvent) => void\n) => {\n  return useCallback(\n    (event: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(event);\n      }\n      const { width, height } = event.nativeEvent.layout;\n\n      if (resultValue) {\n        resultValue.value = { width, height };\n      }\n    },\n    [onLayout, resultValue]\n  );\n};\n\nexport interface CanvasProps extends ViewProps {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  mode?: \"continuous\" | \"default\";\n}\n\nexport const Canvas = forwardRef(\n  (\n    {\n      mode,\n      debug,\n      opaque,\n      children,\n      onSize,\n      onLayout: _onLayout,\n      ...viewProps\n    }: CanvasProps,\n    ref\n  ) => {\n    const rafId = useRef<number | null>(null);\n    const onLayout = useOnSizeEvent(onSize, _onLayout);\n    // Native ID\n    const nativeId = useMemo(() => {\n      return SkiaViewNativeId.current++;\n    }, []);\n\n    // Root\n    const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n    // Render effects\n    useEffect(() => {\n      root.render(children);\n    }, [children, root]);\n\n    useEffect(() => {\n      return () => {\n        root.unmount();\n      };\n    }, [root]);\n\n    const requestRedraw = useCallback(() => {\n      rafId.current = requestAnimationFrame(() => {\n        root.render(children);\n        if (mode === \"continuous\") {\n          requestRedraw();\n        }\n      });\n    }, [children, mode, root]);\n\n    useEffect(() => {\n      if (mode === \"continuous\") {\n        console.warn(\"The `mode` property in `Canvas` is deprecated.\");\n        requestRedraw();\n      }\n      return () => {\n        if (rafId.current !== null) {\n          cancelAnimationFrame(rafId.current);\n        }\n      };\n    }, [mode, requestRedraw]);\n    // Component methods\n    useImperativeHandle(ref, () => ({\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    }));\n    return (\n      <NativeSkiaPictureView\n        collapsable={false}\n        nativeID={`${nativeId}`}\n        debug={debug}\n        opaque={opaque}\n        onLayout={onLayout}\n        {...viewProps}\n      />\n    );\n  }\n);\n"],"mappings":"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","ignoreList":[]}

package/lib/module/renderer/CanvasOld.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { RefObject, ReactNode, FunctionComponent } from "react";
+import { SkiaDomView } from "../views";
+import type { SkiaBaseViewProps } from "../views";
+export declare const useCanvasRef: () => React.RefObject<SkiaDomView>;
+export interface CanvasOldProps extends SkiaBaseViewProps {
+    ref?: RefObject<SkiaDomView>;
+    children: ReactNode;
+    mode?: "default" | "continuous";
+}
+export declare const CanvasOld: FunctionComponent<CanvasOldProps & React.RefAttributes<SkiaDomView>>;

package/lib/module/renderer/CanvasOld.js

@@ -0,0 +1,87 @@
+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, useCallback, useMemo, forwardRef, useRef } from "react";
+import { SkiaDomView } from "../views";
+import { SkiaRoot } from "./Reconciler";
+export const useCanvasRef = () => useRef(null);
+const useOnSizeEvent = (resultValue, onLayout) => {
+  return useCallback(event => {
+    if (onLayout) {
+      onLayout(event);
+    }
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    if (resultValue) {
+      resultValue.value = {
+        width,
+        height
+      };
+    }
+  }, [onLayout, resultValue]);
+};
+export const CanvasOld = /*#__PURE__*/forwardRef(({
+  children,
+  style,
+  debug,
+  mode = "default",
+  onSize: _onSize,
+  onLayout: _onLayout,
+  ...props
+}, forwardedRef) => {
+  const onLayout = useOnSizeEvent(_onSize, _onLayout);
+  const innerRef = useCanvasRef();
+  const ref = useCombinedRefs(forwardedRef, innerRef);
+  const redraw = useCallback(() => {
+    var _innerRef$current;
+    (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 || _innerRef$current.redraw();
+  }, [innerRef]);
+  const getNativeId = useCallback(() => {
+    var _innerRef$current$nat, _innerRef$current2;
+    const id = (_innerRef$current$nat = (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.nativeId) !== null && _innerRef$current$nat !== void 0 ? _innerRef$current$nat : -1;
+    return id;
+  }, [innerRef]);
+  const root = useMemo(() => new SkiaRoot(redraw, getNativeId), [redraw, getNativeId]);
+
+  // Render effect
+  useEffect(() => {
+    root.render(children);
+  }, [children, root, redraw]);
+  useEffect(() => {
+    return () => {
+      root.unmount();
+    };
+  }, [root]);
+  return /*#__PURE__*/React.createElement(SkiaDomView, _extends({
+    ref: ref,
+    style: style,
+    root: root.dom,
+    onLayout: onLayout,
+    debug: debug,
+    mode: mode
+  }, props));
+});
+
+/**
+ * Combines a list of refs into a single ref. This can be used to provide
+ * both a forwarded ref and an internal ref keeping the same functionality
+ * on both of the refs.
+ * @param refs Array of refs to combine
+ * @returns A single ref that can be used in a ref prop.
+ */
+const useCombinedRefs = (...refs) => {
+  const targetRef = React.useRef(null);
+  React.useEffect(() => {
+    refs.forEach(ref => {
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(targetRef.current);
+        } else {
+          ref.current = targetRef.current;
+        }
+      }
+    });
+  }, [refs]);
+  return targetRef;
+};
+//# sourceMappingURL=CanvasOld.js.map

package/lib/module/renderer/CanvasOld.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useCallback","useMemo","forwardRef","useRef","SkiaDomView","SkiaRoot","useCanvasRef","useOnSizeEvent","resultValue","onLayout","event","width","height","nativeEvent","layout","value","CanvasOld","children","style","debug","mode","onSize","_onSize","_onLayout","props","forwardedRef","innerRef","ref","useCombinedRefs","redraw","_innerRef$current","current","getNativeId","_innerRef$current$nat","_innerRef$current2","id","nativeId","root","render","unmount","createElement","_extends","dom","refs","targetRef","forEach"],"sources":["CanvasOld.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useCallback,\n  useMemo,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  MutableRefObject,\n  ForwardedRef,\n  FunctionComponent,\n} from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport { SkiaDomView } from \"../views\";\nimport type { SkiaBaseViewProps } from \"../views\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\nexport const useCanvasRef = () => useRef<SkiaDomView>(null);\n\nexport interface CanvasOldProps extends SkiaBaseViewProps {\n  ref?: RefObject<SkiaDomView>;\n  children: ReactNode;\n  mode?: \"default\" | \"continuous\";\n}\n\nconst useOnSizeEvent = (\n  resultValue: SkiaBaseViewProps[\"onSize\"],\n  onLayout?: (event: LayoutChangeEvent) => void\n) => {\n  return useCallback(\n    (event: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(event);\n      }\n      const { width, height } = event.nativeEvent.layout;\n\n      if (resultValue) {\n        resultValue.value = { width, height };\n      }\n    },\n    [onLayout, resultValue]\n  );\n};\n\nexport const CanvasOld = forwardRef<SkiaDomView, CanvasOldProps>(\n  (\n    {\n      children,\n      style,\n      debug,\n      mode = \"default\",\n      onSize: _onSize,\n      onLayout: _onLayout,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const onLayout = useOnSizeEvent(_onSize, _onLayout);\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const redraw = useCallback(() => {\n      innerRef.current?.redraw();\n    }, [innerRef]);\n    const getNativeId = useCallback(() => {\n      const id = innerRef.current?.nativeId ?? -1;\n      return id;\n    }, [innerRef]);\n\n    const root = useMemo(\n      () => new SkiaRoot(redraw, getNativeId),\n      [redraw, getNativeId]\n    );\n\n    // Render effect\n    useEffect(() => {\n      root.render(children);\n    }, [children, root, redraw]);\n\n    useEffect(() => {\n      return () => {\n        root.unmount();\n      };\n    }, [root]);\n\n    return (\n      <SkiaDomView\n        ref={ref}\n        style={style}\n        root={root.dom}\n        onLayout={onLayout}\n        debug={debug}\n        mode={mode}\n        {...props}\n      />\n    );\n  }\n) as FunctionComponent<CanvasOldProps & React.RefAttributes<SkiaDomView>>;\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/sksg/Container.js

@@ -12,7 +12,7 @@ const drawOnscreen = (Skia, nativeId, recording) => {
 
   const rec = Skia.PictureRecorder();
   const canvas = rec.beginRecording();
-  // const start = performance.now();
+  //const start = performance.now();
 
   const ctx = createDrawingContext(Skia, recording.paintPool, canvas);
   replay(ctx, recording.commands);
@@ -76,18 +76,23 @@ class ReanimatedContainer extends Container {
       commands: record.commands,
       paintPool: record.paintPool
     };
+    const {
+      nativeId,
+      Skia,
+      recording
+    } = this;
     if (animationValues.size > 0) {
-      const {
-        nativeId,
-        Skia,
-        recording
-      } = this;
       this.mapperId = Rea.startMapper(() => {
         "worklet";
 
         drawOnscreen(Skia, nativeId, recording);
       }, Array.from(animationValues));
     }
+    Rea.runOnUI(() => {
+      "worklet";
+
+      drawOnscreen(Skia, nativeId, recording);
+    })();
   }
 }
 export const createContainer = (Skia, nativeId) => {

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

@@ -1 +1 @@
-{"version":3,"names":["Rea","HAS_REANIMATED_3","Recorder","visit","replay","createDrawingContext","drawOnscreen","Skia","nativeId","recording","rec","PictureRecorder","canvas","beginRecording","ctx","paintPool","commands","picture","finishRecordingAsPicture","SkiaViewApi","setJsiProperty","dispose","Container","constructor","_defineProperty","drawOnCanvas","Error","StaticContainer","redraw","recorder","root","getRecording","isOnScreen","ReanimatedContainer","mapperId","stopMapper","record","animationValues","size","startMapper","Array","from","createContainer"],"sources":["Container.ts"],"sourcesContent":["import Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkCanvas } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\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\nconst drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {\n  \"worklet\";\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  rec.dispose();\n  picture.dispose();\n};\n\nexport abstract class Container {\n  public root: Node[] = [];\n  protected recording: Recording | null = null;\n\n  constructor(protected Skia: Skia, protected nativeId: number) {}\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    //console.log(this.recording.commands);\n    replay(ctx, this.recording.commands);\n  }\n\n  abstract redraw(): void;\n}\n\nclass StaticContainer extends Container {\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\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\nclass ReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\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    if (animationValues.size > 0) {\n      const { nativeId, Skia, recording } = this;\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        drawOnscreen(Skia, nativeId, recording!);\n      }, Array.from(animationValues));\n    }\n  }\n}\n\nexport const createContainer = (Skia: Skia, nativeId: number) => {\n  return HAS_REANIMATED_3 && nativeId !== -1\n    ? new ReanimatedContainer(Skia, nativeId)\n    : new StaticContainer(Skia, nativeId);\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Rea","HAS_REANIMATED_3","Recorder","visit","replay","createDrawingContext","drawOnscreen","Skia","nativeId","recording","rec","PictureRecorder","canvas","beginRecording","ctx","paintPool","commands","picture","finishRecordingAsPicture","SkiaViewApi","setJsiProperty","dispose","Container","constructor","_defineProperty","drawOnCanvas","Error","StaticContainer","redraw","recorder","root","getRecording","isOnScreen","ReanimatedContainer","mapperId","stopMapper","record","animationValues","size","startMapper","Array","from","runOnUI","createContainer"],"sources":["Container.ts"],"sourcesContent":["import Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkCanvas } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\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\nconst drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {\n  \"worklet\";\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  rec.dispose();\n  picture.dispose();\n};\n\nexport abstract class Container {\n  public root: Node[] = [];\n  protected recording: Recording | null = null;\n\n  constructor(protected Skia: Skia, protected nativeId: number) {}\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    //console.log(this.recording.commands);\n    replay(ctx, this.recording.commands);\n  }\n\n  abstract redraw(): void;\n}\n\nclass StaticContainer extends Container {\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\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\nclass ReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\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 = (Skia: Skia, nativeId: number) => {\n  return HAS_REANIMATED_3 && nativeId !== -1\n    ? new ReanimatedContainer(Skia, nativeId)\n    : new StaticContainer(Skia, nativeId);\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/sksg/HostConfig2.d.ts

@@ -0,0 +1,19 @@
+import type { HostConfig } from "react-reconciler";
+import type { NodeType } from "../dom/types";
+import type { Container } from "./Container";
+import type { Node } from "./Node";
+export declare const debug: (message?: any, ...optionalParams: any[]) => void;
+type Instance = Node<unknown>;
+type Props = object;
+type TextInstance = Node<unknown>;
+type SuspenseInstance = Instance;
+type HydratableInstance = Instance;
+type PublicInstance = Instance;
+type HostContext = null;
+type UpdatePayload = Container;
+type ChildSet = unknown;
+type TimeoutHandle = NodeJS.Timeout;
+type NoTimeout = -1;
+type SkiaHostConfig = HostConfig<NodeType, Props, Container, Instance, TextInstance, SuspenseInstance, HydratableInstance, PublicInstance, HostContext, UpdatePayload, ChildSet, TimeoutHandle, NoTimeout>;
+export declare const sksgHostConfig: SkiaHostConfig;
+export {};

package/lib/module/sksg/HostConfig2.js

@@ -0,0 +1,152 @@
+/*global NodeJS*/
+
+import { DefaultEventPriority } from "react-reconciler/constants";
+import { shallowEq } from "../renderer/typeddash";
+const DEBUG = false;
+export const debug = (...args) => {
+  if (DEBUG) {
+    console.log(...args);
+  }
+};
+const appendNode = (parent, child) => {
+  parent.children.push(child);
+};
+const removeNode = (parent, child) => {
+  parent.children.splice(parent.children.indexOf(child), 1);
+};
+const insertBefore = (parent, child, before) => {
+  parent.children.splice(parent.children.indexOf(before), 0, child);
+};
+export const sksgHostConfig = {
+  /**
+   * This function is used by the reconciler in order to calculate current time for prioritising work.
+   */
+  supportsMutation: true,
+  isPrimaryRenderer: false,
+  supportsPersistence: false,
+  supportsHydration: false,
+  //supportsMicrotask: true,
+
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+  appendChildToContainer(container, child) {
+    debug("appendChildToContainer");
+    container.root.push(child);
+  },
+  appendChild(parent, child) {
+    debug("appendChild", parent, child);
+    appendNode(parent, child);
+  },
+  getRootHostContext: _rootContainerInstance => {
+    debug("getRootHostContext");
+    return null;
+  },
+  getChildHostContext(_parentHostContext, _type, _rootContainerInstance) {
+    debug("getChildHostContext");
+    return null;
+  },
+  shouldSetTextContent(_type, _props) {
+    return false;
+  },
+  createTextInstance(_text, _rootContainerInstance, _hostContext, _internalInstanceHandle) {
+    debug("createTextInstance");
+    // return SpanNode({}, text) as SkNode;
+    throw new Error("Text nodes are not supported yet");
+  },
+  createInstance(type, propsWithChildren, _container, _hostContext, _internalInstanceHandle) {
+    debug("createInstance", type);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const {
+      children,
+      ...props
+    } = propsWithChildren;
+    debug("createInstance", type);
+    const instance = {
+      type,
+      props,
+      children: []
+    };
+    return instance;
+  },
+  appendInitialChild(parentInstance, child) {
+    debug("appendInitialChild");
+    appendNode(parentInstance, child);
+  },
+  finalizeInitialChildren(parentInstance, _type, _props, _rootContainerInstance, _hostContext) {
+    debug("finalizeInitialChildren", parentInstance);
+    return false;
+  },
+  commitMount() {
+    // if finalizeInitialChildren = true
+    debug("commitMount");
+  },
+  prepareForCommit(_containerInfo) {
+    debug("prepareForCommit");
+    return null;
+  },
+  resetAfterCommit(container) {
+    debug("resetAfterCommit");
+    container.redraw();
+  },
+  getPublicInstance(node) {
+    debug("getPublicInstance");
+    return node;
+  },
+  prepareUpdate: (_instance, type, oldProps, newProps, rootContainerInstance, _hostContext) => {
+    debug("prepareUpdate");
+    const propsAreEqual = shallowEq(oldProps, newProps);
+    if (propsAreEqual) {
+      return null;
+    }
+    debug("update ", type);
+    return rootContainerInstance;
+  },
+  commitUpdate(instance, _updatePayload, type, prevProps, nextProps, _internalHandle) {
+    debug("commitUpdate: ", type);
+    if (shallowEq(prevProps, nextProps)) {
+      return;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const {
+      children,
+      ...props
+    } = nextProps;
+    instance.props = props;
+  },
+  commitTextUpdate: (_textInstance, _oldText, _newText) => {
+    //  textInstance.instance = newText;
+  },
+  clearContainer: container => {
+    debug("clearContainer");
+    container.root = [];
+  },
+  preparePortalMount: () => {
+    debug("preparePortalMount");
+  },
+  removeChild: (parent, child) => {
+    removeNode(parent, child);
+  },
+  removeChildFromContainer: (container, child) => {
+    container.root.splice(container.root.indexOf(child), 1);
+  },
+  insertInContainerBefore: (container, child, before) => {
+    container.root.splice(container.root.indexOf(before), 0, child);
+  },
+  insertBefore: (parent, child, before) => {
+    insertBefore(parent, child, before);
+  },
+  // see https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
+  getCurrentEventPriority: () => DefaultEventPriority,
+  beforeActiveInstanceBlur: () => {},
+  afterActiveInstanceBlur: () => {},
+  detachDeletedInstance: () => {},
+  getInstanceFromNode: function (_node) {
+    return null;
+  },
+  prepareScopeUpdate: function (_scopeInstance, _instance) {},
+  getInstanceFromScope: function (_scopeInstance) {
+    return null;
+  }
+};
+//# sourceMappingURL=HostConfig2.js.map

package/lib/module/sksg/HostConfig2.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DefaultEventPriority","shallowEq","DEBUG","debug","args","console","log","appendNode","parent","child","children","push","removeNode","splice","indexOf","insertBefore","before","sksgHostConfig","supportsMutation","isPrimaryRenderer","supportsPersistence","supportsHydration","scheduleTimeout","setTimeout","cancelTimeout","clearTimeout","noTimeout","appendChildToContainer","container","root","appendChild","getRootHostContext","_rootContainerInstance","getChildHostContext","_parentHostContext","_type","shouldSetTextContent","_props","createTextInstance","_text","_hostContext","_internalInstanceHandle","Error","createInstance","type","propsWithChildren","_container","props","instance","appendInitialChild","parentInstance","finalizeInitialChildren","commitMount","prepareForCommit","_containerInfo","resetAfterCommit","redraw","getPublicInstance","node","prepareUpdate","_instance","oldProps","newProps","rootContainerInstance","propsAreEqual","commitUpdate","_updatePayload","prevProps","nextProps","_internalHandle","commitTextUpdate","_textInstance","_oldText","_newText","clearContainer","preparePortalMount","removeChild","removeChildFromContainer","insertInContainerBefore","getCurrentEventPriority","beforeActiveInstanceBlur","afterActiveInstanceBlur","detachDeletedInstance","getInstanceFromNode","_node","prepareScopeUpdate","_scopeInstance","getInstanceFromScope"],"sources":["HostConfig2.ts"],"sourcesContent":["/*global NodeJS*/\nimport type { Fiber, HostConfig } from \"react-reconciler\";\nimport { DefaultEventPriority } from \"react-reconciler/constants\";\n\nimport type { NodeType } from \"../dom/types\";\nimport { shallowEq } from \"../renderer/typeddash\";\n\nimport type { Container } from \"./Container\";\nimport type { Node } from \"./Node\";\n\nconst DEBUG = false;\nexport const debug = (...args: Parameters<typeof console.log>) => {\n  if (DEBUG) {\n    console.log(...args);\n  }\n};\n\ntype Instance = Node<unknown>;\n\ntype Props = object;\ntype TextInstance = Node<unknown>;\ntype SuspenseInstance = Instance;\ntype HydratableInstance = Instance;\ntype PublicInstance = Instance;\ntype HostContext = null;\ntype UpdatePayload = Container;\ntype ChildSet = unknown;\ntype TimeoutHandle = NodeJS.Timeout;\ntype NoTimeout = -1;\n\ntype SkiaHostConfig = HostConfig<\n  NodeType,\n  Props,\n  Container,\n  Instance,\n  TextInstance,\n  SuspenseInstance,\n  HydratableInstance,\n  PublicInstance,\n  HostContext,\n  UpdatePayload,\n  ChildSet,\n  TimeoutHandle,\n  NoTimeout\n>;\n\nconst appendNode = (parent: Node<unknown>, child: Node<unknown>) => {\n  parent.children.push(child);\n};\n\nconst removeNode = (parent: Node<unknown>, child: Node<unknown>) => {\n  parent.children.splice(parent.children.indexOf(child), 1);\n};\n\nconst insertBefore = (\n  parent: Node<unknown>,\n  child: Node<unknown>,\n  before: Node<unknown>\n) => {\n  parent.children.splice(parent.children.indexOf(before), 0, child);\n};\n\nexport const sksgHostConfig: SkiaHostConfig = {\n  /**\n   * This function is used by the reconciler in order to calculate current time for prioritising work.\n   */\n  supportsMutation: true,\n  isPrimaryRenderer: false,\n  supportsPersistence: false,\n  supportsHydration: false,\n  //supportsMicrotask: true,\n\n  scheduleTimeout: setTimeout,\n  cancelTimeout: clearTimeout,\n  noTimeout: -1,\n\n  appendChildToContainer(container, child) {\n    debug(\"appendChildToContainer\");\n    container.root.push(child);\n  },\n\n  appendChild(parent, child) {\n    debug(\"appendChild\", parent, child);\n    appendNode(parent, child);\n  },\n\n  getRootHostContext: (_rootContainerInstance: Container) => {\n    debug(\"getRootHostContext\");\n    return null;\n  },\n\n  getChildHostContext(_parentHostContext, _type, _rootContainerInstance) {\n    debug(\"getChildHostContext\");\n    return null;\n  },\n\n  shouldSetTextContent(_type, _props) {\n    return false;\n  },\n\n  createTextInstance(\n    _text,\n    _rootContainerInstance,\n    _hostContext,\n    _internalInstanceHandle\n  ) {\n    debug(\"createTextInstance\");\n    // return SpanNode({}, text) as SkNode;\n    throw new Error(\"Text nodes are not supported yet\");\n  },\n\n  createInstance(\n    type,\n    propsWithChildren,\n    _container,\n    _hostContext,\n    _internalInstanceHandle\n  ) {\n    debug(\"createInstance\", type);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const { children, ...props } = propsWithChildren as any;\n    debug(\"createInstance\", type);\n    const instance = {\n      type,\n      props,\n      children: [],\n    };\n    return instance;\n  },\n\n  appendInitialChild(parentInstance, child) {\n    debug(\"appendInitialChild\");\n    appendNode(parentInstance, child);\n  },\n\n  finalizeInitialChildren(\n    parentInstance,\n    _type,\n    _props,\n    _rootContainerInstance,\n    _hostContext\n  ) {\n    debug(\"finalizeInitialChildren\", parentInstance);\n    return false;\n  },\n\n  commitMount() {\n    // if finalizeInitialChildren = true\n    debug(\"commitMount\");\n  },\n\n  prepareForCommit(_containerInfo) {\n    debug(\"prepareForCommit\");\n    return null;\n  },\n\n  resetAfterCommit(container) {\n    debug(\"resetAfterCommit\");\n    container.redraw();\n  },\n\n  getPublicInstance(node: Instance) {\n    debug(\"getPublicInstance\");\n    return node;\n  },\n\n  prepareUpdate: (\n    _instance,\n    type,\n    oldProps,\n    newProps,\n    rootContainerInstance,\n    _hostContext\n  ) => {\n    debug(\"prepareUpdate\");\n    const propsAreEqual = shallowEq(oldProps, newProps);\n    if (propsAreEqual) {\n      return null;\n    }\n    debug(\"update \", type);\n    return rootContainerInstance;\n  },\n\n  commitUpdate(\n    instance,\n    _updatePayload,\n    type,\n    prevProps,\n    nextProps,\n    _internalHandle\n  ) {\n    debug(\"commitUpdate: \", type);\n    if (shallowEq(prevProps, nextProps)) {\n      return;\n    }\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const { children, ...props } = nextProps as any;\n    instance.props = props;\n  },\n\n  commitTextUpdate: (\n    _textInstance: TextInstance,\n    _oldText: string,\n    _newText: string\n  ) => {\n    //  textInstance.instance = newText;\n  },\n\n  clearContainer: (container) => {\n    debug(\"clearContainer\");\n    container.root = [];\n  },\n\n  preparePortalMount: () => {\n    debug(\"preparePortalMount\");\n  },\n\n  removeChild: (parent, child) => {\n    removeNode(parent, child);\n  },\n\n  removeChildFromContainer: (container, child) => {\n    container.root.splice(container.root.indexOf(child), 1);\n  },\n\n  insertInContainerBefore: (container, child, before) => {\n    container.root.splice(container.root.indexOf(before), 0, child);\n  },\n\n  insertBefore: (parent, child, before) => {\n    insertBefore(parent, child, before);\n  },\n\n  // see https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874\n  getCurrentEventPriority: () => DefaultEventPriority,\n  beforeActiveInstanceBlur: () => {},\n  afterActiveInstanceBlur: () => {},\n  detachDeletedInstance: () => {},\n\n  getInstanceFromNode: function (_node): Fiber | null | undefined {\n    return null;\n  },\n  prepareScopeUpdate: function (_scopeInstance, _instance): void {},\n  getInstanceFromScope: function (_scopeInstance): Instance | null {\n    return null;\n  },\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/sksg/Recorder/Core.js

@@ -1,5 +1,6 @@
 // export enum CommandType {
 //   // Context
+//   Group = "Group",
 //   SavePaint = "SavePaint",
 //   RestorePaint = "RestorePaint",
 //   SaveCTM = "SaveCTM",

package/lib/module/sksg/Recorder/Core.js.map

@@ -1 +1 @@
-{"version":3,"names":["CommandType","materializeProps","command","animatedProps","key","props","value","isCommand","type","isGroup","Group","isDrawCommand"],"sources":["Core.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport type {\n  BlurMaskFilterProps,\n  CircleProps,\n  CTMProps,\n  ImageProps,\n  PointsProps,\n  PathProps,\n  RectProps,\n  RoundedRectProps,\n  OvalProps,\n  LineProps,\n  PatchProps,\n  VerticesProps,\n  DiffRectProps,\n  TextProps,\n  TextPathProps,\n  TextBlobProps,\n  GlyphsProps,\n  PictureProps,\n  ImageSVGProps,\n  ParagraphProps,\n  AtlasProps,\n  DrawingNodeProps,\n} from \"../../dom/types\";\n\n// export enum CommandType {\n//   // Context\n//   SavePaint = \"SavePaint\",\n//   RestorePaint = \"RestorePaint\",\n//   SaveCTM = \"SaveCTM\",\n//   RestoreCTM = \"RestoreCTM\",\n//   PushColorFilter = \"PushColorFilter\",\n//   PushBlurMaskFilter = \"PushBlurMaskFilter\",\n//   PushImageFilter = \"PushImageFilter\",\n//   PushPathEffect = \"PushPathEffect\",\n//   PushShader = \"PushShader\",\n//   ComposeColorFilter = \"ComposeColorFilter\",\n//   ComposeImageFilter = \"ComposeImageFilter\",\n//   ComposePathEffect = \"ComposePathEffect\",\n//   MaterializePaint = \"MaterializePaint\",\n//   SaveBackdropFilter = \"SaveBackdropFilter\",\n//   SaveLayer = \"SaveLayer\",\n//   RestorePaintDeclaration = \"RestorePaintDeclaration\",\n//   // Drawing\n//   DrawBox = \"DrawBox\",\n//   DrawImage = \"DrawImage\",\n//   DrawCircle = \"DrawCircle\",\n//   DrawPaint = \"DrawPaint\",\n//   DrawPoints = \"DrawPoints\",\n//   DrawPath = \"DrawPath\",\n//   DrawRect = \"DrawRect\",\n//   DrawRRect = \"DrawRRect\",\n//   DrawOval = \"DrawOval\",\n//   DrawLine = \"DrawLine\",\n//   DrawPatch = \"DrawPatch\",\n//   DrawVertices = \"DrawVertices\",\n//   DrawDiffRect = \"DrawDiffRect\",\n//   DrawText = \"DrawText\",\n//   DrawTextPath = \"DrawTextPath\",\n//   DrawTextBlob = \"DrawTextBlob\",\n//   DrawGlyphs = \"DrawGlyphs\",\n//   DrawPicture = \"DrawPicture\",\n//   DrawImageSVG = \"DrawImageSVG\",\n//   DrawParagraph = \"DrawParagraph\",\n//   DrawAtlas = \"DrawAtlas\",\n// }\nexport enum CommandType {\n  // Context\n  Group,\n  SavePaint,\n  RestorePaint,\n  SaveCTM,\n  RestoreCTM,\n  PushColorFilter,\n  PushBlurMaskFilter,\n  PushImageFilter,\n  PushPathEffect,\n  PushShader,\n  ComposeColorFilter,\n  ComposeImageFilter,\n  ComposePathEffect,\n  MaterializePaint,\n  SaveBackdropFilter,\n  SaveLayer,\n  RestorePaintDeclaration,\n  // Drawing\n  DrawBox,\n  DrawImage,\n  DrawCircle,\n  DrawPaint,\n  DrawPoints,\n  DrawPath,\n  DrawRect,\n  DrawRRect,\n  DrawOval,\n  DrawLine,\n  DrawPatch,\n  DrawVertices,\n  DrawDiffRect,\n  DrawText,\n  DrawTextPath,\n  DrawTextBlob,\n  DrawGlyphs,\n  DrawPicture,\n  DrawImageSVG,\n  DrawParagraph,\n  DrawAtlas,\n}\n\nexport type Command<T extends CommandType = CommandType> = {\n  type: T;\n  [key: string]: unknown;\n};\n\nexport const materializeProps = (command: {\n  props: Record<string, unknown>;\n  animatedProps?: Record<string, SharedValue<unknown>>;\n}) => {\n  \"worklet\";\n  if (command.animatedProps) {\n    for (const key in command.animatedProps) {\n      command.props[key] = command.animatedProps[key].value;\n    }\n  }\n};\n\nexport const isCommand = <T extends CommandType>(\n  command: Command,\n  type: T\n): command is Command<T> => {\n  \"worklet\";\n  return command.type === type;\n};\n\ninterface GroupCommand extends Command<CommandType.Group> {\n  children: Command[];\n}\n\nexport const isGroup = (command: Command): command is GroupCommand => {\n  \"worklet\";\n  return command.type === CommandType.Group;\n};\n\ninterface Props {\n  [CommandType.DrawImage]: ImageProps;\n  [CommandType.DrawCircle]: CircleProps;\n  [CommandType.SaveCTM]: CTMProps;\n  [CommandType.SavePaint]: DrawingNodeProps;\n  [CommandType.PushBlurMaskFilter]: BlurMaskFilterProps;\n  [CommandType.DrawPoints]: PointsProps;\n  [CommandType.DrawPath]: PathProps;\n  [CommandType.DrawRect]: RectProps;\n  [CommandType.DrawRRect]: RoundedRectProps;\n  [CommandType.DrawOval]: OvalProps;\n  [CommandType.DrawLine]: LineProps;\n  [CommandType.DrawPatch]: PatchProps;\n  [CommandType.DrawVertices]: VerticesProps;\n  [CommandType.DrawDiffRect]: DiffRectProps;\n  [CommandType.DrawText]: TextProps;\n  [CommandType.DrawTextPath]: TextPathProps;\n  [CommandType.DrawTextBlob]: TextBlobProps;\n  [CommandType.DrawGlyphs]: GlyphsProps;\n  [CommandType.DrawPicture]: PictureProps;\n  [CommandType.DrawImageSVG]: ImageSVGProps;\n  [CommandType.DrawParagraph]: ParagraphProps;\n  [CommandType.DrawAtlas]: AtlasProps;\n}\n\ninterface DrawCommand<T extends CommandType> extends Command<T> {\n  props: T extends keyof Props ? Props[T] : never;\n}\n\nexport const isDrawCommand = <T extends keyof Props>(\n  command: Command,\n  type: T\n): command is DrawCommand<T> => {\n  \"worklet\";\n  return command.type === type;\n};\n"],"mappings":"AA2BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYA,WAAW,0BAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAA,OAAXA,WAAW;AAAA;AAgDvB,OAAO,MAAMC,gBAAgB,GAAIC,OAGhC,IAAK;EACJ,SAAS;;EACT,IAAIA,OAAO,CAACC,aAAa,EAAE;IACzB,KAAK,MAAMC,GAAG,IAAIF,OAAO,CAACC,aAAa,EAAE;MACvCD,OAAO,CAACG,KAAK,CAACD,GAAG,CAAC,GAAGF,OAAO,CAACC,aAAa,CAACC,GAAG,CAAC,CAACE,KAAK;IACvD;EACF;AACF,CAAC;AAED,OAAO,MAAMC,SAAS,GAAGA,CACvBL,OAAgB,EAChBM,IAAO,KACmB;EAC1B,SAAS;;EACT,OAAON,OAAO,CAACM,IAAI,KAAKA,IAAI;AAC9B,CAAC;AAMD,OAAO,MAAMC,OAAO,GAAIP,OAAgB,IAA8B;EACpE,SAAS;;EACT,OAAOA,OAAO,CAACM,IAAI,KAAKR,WAAW,CAACU,KAAK;AAC3C,CAAC;AA+BD,OAAO,MAAMC,aAAa,GAAGA,CAC3BT,OAAgB,EAChBM,IAAO,KACuB;EAC9B,SAAS;;EACT,OAAON,OAAO,CAACM,IAAI,KAAKA,IAAI;AAC9B,CAAC","ignoreList":[]}
+{"version":3,"names":["CommandType","materializeProps","command","animatedProps","key","props","value","isCommand","type","isGroup","Group","isDrawCommand"],"sources":["Core.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport type {\n  BlurMaskFilterProps,\n  CircleProps,\n  CTMProps,\n  ImageProps,\n  PointsProps,\n  PathProps,\n  RectProps,\n  RoundedRectProps,\n  OvalProps,\n  LineProps,\n  PatchProps,\n  VerticesProps,\n  DiffRectProps,\n  TextProps,\n  TextPathProps,\n  TextBlobProps,\n  GlyphsProps,\n  PictureProps,\n  ImageSVGProps,\n  ParagraphProps,\n  AtlasProps,\n  DrawingNodeProps,\n} from \"../../dom/types\";\n\n// export enum CommandType {\n//   // Context\n//   Group = \"Group\",\n//   SavePaint = \"SavePaint\",\n//   RestorePaint = \"RestorePaint\",\n//   SaveCTM = \"SaveCTM\",\n//   RestoreCTM = \"RestoreCTM\",\n//   PushColorFilter = \"PushColorFilter\",\n//   PushBlurMaskFilter = \"PushBlurMaskFilter\",\n//   PushImageFilter = \"PushImageFilter\",\n//   PushPathEffect = \"PushPathEffect\",\n//   PushShader = \"PushShader\",\n//   ComposeColorFilter = \"ComposeColorFilter\",\n//   ComposeImageFilter = \"ComposeImageFilter\",\n//   ComposePathEffect = \"ComposePathEffect\",\n//   MaterializePaint = \"MaterializePaint\",\n//   SaveBackdropFilter = \"SaveBackdropFilter\",\n//   SaveLayer = \"SaveLayer\",\n//   RestorePaintDeclaration = \"RestorePaintDeclaration\",\n//   // Drawing\n//   DrawBox = \"DrawBox\",\n//   DrawImage = \"DrawImage\",\n//   DrawCircle = \"DrawCircle\",\n//   DrawPaint = \"DrawPaint\",\n//   DrawPoints = \"DrawPoints\",\n//   DrawPath = \"DrawPath\",\n//   DrawRect = \"DrawRect\",\n//   DrawRRect = \"DrawRRect\",\n//   DrawOval = \"DrawOval\",\n//   DrawLine = \"DrawLine\",\n//   DrawPatch = \"DrawPatch\",\n//   DrawVertices = \"DrawVertices\",\n//   DrawDiffRect = \"DrawDiffRect\",\n//   DrawText = \"DrawText\",\n//   DrawTextPath = \"DrawTextPath\",\n//   DrawTextBlob = \"DrawTextBlob\",\n//   DrawGlyphs = \"DrawGlyphs\",\n//   DrawPicture = \"DrawPicture\",\n//   DrawImageSVG = \"DrawImageSVG\",\n//   DrawParagraph = \"DrawParagraph\",\n//   DrawAtlas = \"DrawAtlas\",\n// }\nexport enum CommandType {\n  // Context\n  Group,\n  SavePaint,\n  RestorePaint,\n  SaveCTM,\n  RestoreCTM,\n  PushColorFilter,\n  PushBlurMaskFilter,\n  PushImageFilter,\n  PushPathEffect,\n  PushShader,\n  ComposeColorFilter,\n  ComposeImageFilter,\n  ComposePathEffect,\n  MaterializePaint,\n  SaveBackdropFilter,\n  SaveLayer,\n  RestorePaintDeclaration,\n  // Drawing\n  DrawBox,\n  DrawImage,\n  DrawCircle,\n  DrawPaint,\n  DrawPoints,\n  DrawPath,\n  DrawRect,\n  DrawRRect,\n  DrawOval,\n  DrawLine,\n  DrawPatch,\n  DrawVertices,\n  DrawDiffRect,\n  DrawText,\n  DrawTextPath,\n  DrawTextBlob,\n  DrawGlyphs,\n  DrawPicture,\n  DrawImageSVG,\n  DrawParagraph,\n  DrawAtlas,\n}\n\nexport type Command<T extends CommandType = CommandType> = {\n  type: T;\n  [key: string]: unknown;\n};\n\nexport const materializeProps = (command: {\n  props: Record<string, unknown>;\n  animatedProps?: Record<string, SharedValue<unknown>>;\n}) => {\n  \"worklet\";\n  if (command.animatedProps) {\n    for (const key in command.animatedProps) {\n      command.props[key] = command.animatedProps[key].value;\n    }\n  }\n};\n\nexport const isCommand = <T extends CommandType>(\n  command: Command,\n  type: T\n): command is Command<T> => {\n  \"worklet\";\n  return command.type === type;\n};\n\ninterface GroupCommand extends Command<CommandType.Group> {\n  children: Command[];\n}\n\nexport const isGroup = (command: Command): command is GroupCommand => {\n  \"worklet\";\n  return command.type === CommandType.Group;\n};\n\ninterface Props {\n  [CommandType.DrawImage]: ImageProps;\n  [CommandType.DrawCircle]: CircleProps;\n  [CommandType.SaveCTM]: CTMProps;\n  [CommandType.SavePaint]: DrawingNodeProps;\n  [CommandType.PushBlurMaskFilter]: BlurMaskFilterProps;\n  [CommandType.DrawPoints]: PointsProps;\n  [CommandType.DrawPath]: PathProps;\n  [CommandType.DrawRect]: RectProps;\n  [CommandType.DrawRRect]: RoundedRectProps;\n  [CommandType.DrawOval]: OvalProps;\n  [CommandType.DrawLine]: LineProps;\n  [CommandType.DrawPatch]: PatchProps;\n  [CommandType.DrawVertices]: VerticesProps;\n  [CommandType.DrawDiffRect]: DiffRectProps;\n  [CommandType.DrawText]: TextProps;\n  [CommandType.DrawTextPath]: TextPathProps;\n  [CommandType.DrawTextBlob]: TextBlobProps;\n  [CommandType.DrawGlyphs]: GlyphsProps;\n  [CommandType.DrawPicture]: PictureProps;\n  [CommandType.DrawImageSVG]: ImageSVGProps;\n  [CommandType.DrawParagraph]: ParagraphProps;\n  [CommandType.DrawAtlas]: AtlasProps;\n}\n\ninterface DrawCommand<T extends CommandType> extends Command<T> {\n  props: T extends keyof Props ? Props[T] : never;\n}\n\nexport const isDrawCommand = <T extends keyof Props>(\n  command: Command,\n  type: T\n): command is DrawCommand<T> => {\n  \"worklet\";\n  return command.type === type;\n};\n"],"mappings":"AA2BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYA,WAAW,0BAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAA,OAAXA,WAAW;AAAA;AAgDvB,OAAO,MAAMC,gBAAgB,GAAIC,OAGhC,IAAK;EACJ,SAAS;;EACT,IAAIA,OAAO,CAACC,aAAa,EAAE;IACzB,KAAK,MAAMC,GAAG,IAAIF,OAAO,CAACC,aAAa,EAAE;MACvCD,OAAO,CAACG,KAAK,CAACD,GAAG,CAAC,GAAGF,OAAO,CAACC,aAAa,CAACC,GAAG,CAAC,CAACE,KAAK;IACvD;EACF;AACF,CAAC;AAED,OAAO,MAAMC,SAAS,GAAGA,CACvBL,OAAgB,EAChBM,IAAO,KACmB;EAC1B,SAAS;;EACT,OAAON,OAAO,CAACM,IAAI,KAAKA,IAAI;AAC9B,CAAC;AAMD,OAAO,MAAMC,OAAO,GAAIP,OAAgB,IAA8B;EACpE,SAAS;;EACT,OAAOA,OAAO,CAACM,IAAI,KAAKR,WAAW,CAACU,KAAK;AAC3C,CAAC;AA+BD,OAAO,MAAMC,aAAa,GAAGA,CAC3BT,OAAgB,EAChBM,IAAO,KACuB;EAC9B,SAAS;;EACT,OAAON,OAAO,CAACM,IAAI,KAAKA,IAAI;AAC9B,CAAC","ignoreList":[]}