@shopify/react-native-skia 1.9.0 → 1.10.0

package/src/sksg/Recorder/Visitor.ts

@@ -196,6 +196,9 @@ const pushPaints = (recorder: Recorder, paints: Node<any>[]) => {
 };
 
 const visitNode = (recorder: Recorder, node: Node<any>) => {
+  if (node.type === NodeType.Group) {
+    recorder.saveGroup();
+  }
   const { props } = node;
   const {
     colorFilters,
@@ -315,6 +318,9 @@ const visitNode = (recorder: Recorder, node: Node<any>) => {
   if (shouldRestore) {
     recorder.restoreCTM();
   }
+  if (node.type === NodeType.Group) {
+    recorder.restoreGroup();
+  }
 };
 
 export const visit = (recorder: Recorder, root: Node[]) => {

package/lib/commonjs/renderer/Canvas2.d.ts

@@ -1,10 +0,0 @@
-import type { ViewProps } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
-import type { SkSize } from "../skia/types";
-export interface Canvas2Props extends ViewProps {
-    debug?: boolean;
-    opaque?: boolean;
-    onSize?: SharedValue<SkSize>;
-    mode?: "continuous" | "default";
-}
-export declare const Canvas2: import("react").ForwardRefExoticComponent<Canvas2Props & import("react").RefAttributes<unknown>>;

package/lib/commonjs/renderer/Canvas2.js

@@ -1,104 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Canvas2 = void 0;
-var _react = require("react");
-var _SkiaViewNativeId = require("../views/SkiaViewNativeId");
-var _SkiaPictureViewNativeComponent = _interopRequireDefault(require("../specs/SkiaPictureViewNativeComponent"));
-var _Reconciler = require("../sksg/Reconciler");
-var _skia = require("../skia");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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); }
-const NativeSkiaPictureView = _SkiaPictureViewNativeComponent.default;
-
-// TODO: no need to go through the JS thread for this
-const useOnSizeEvent = (resultValue, onLayout) => {
-  return (0, _react.useCallback)(event => {
-    if (onLayout) {
-      onLayout(event);
-    }
-    const {
-      width,
-      height
-    } = event.nativeEvent.layout;
-    if (resultValue) {
-      resultValue.value = {
-        width,
-        height
-      };
-    }
-  }, [onLayout, resultValue]);
-};
-const Canvas2 = exports.Canvas2 = /*#__PURE__*/(0, _react.forwardRef)(({
-  mode,
-  debug,
-  opaque,
-  children,
-  onSize,
-  onLayout: _onLayout,
-  ...viewProps
-}, ref) => {
-  const rafId = (0, _react.useRef)(null);
-  const onLayout = useOnSizeEvent(onSize, _onLayout);
-  // Native ID
-  const nativeId = (0, _react.useMemo)(() => {
-    return _SkiaViewNativeId.SkiaViewNativeId.current++;
-  }, []);
-
-  // Root
-  const root = (0, _react.useMemo)(() => new _Reconciler.SkiaSGRoot(_skia.Skia, nativeId), [nativeId]);
-
-  // Render effects
-  (0, _react.useEffect)(() => {
-    root.render(children);
-  }, [children, root]);
-  (0, _react.useEffect)(() => {
-    return () => {
-      root.unmount();
-    };
-  }, [root]);
-  const requestRedraw = (0, _react.useCallback)(() => {
-    rafId.current = requestAnimationFrame(() => {
-      root.render(children);
-      if (mode === "continuous") {
-        requestRedraw();
-      }
-    });
-  }, [children, mode, root]);
-  (0, _react.useEffect)(() => {
-    if (mode === "continuous") {
-      requestRedraw();
-    }
-    return () => {
-      if (rafId.current !== null) {
-        cancelAnimationFrame(rafId.current);
-      }
-    };
-  }, [mode, requestRedraw]);
-
-  // Component methods
-  (0, _react.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=Canvas2.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_SkiaViewNativeId","_SkiaPictureViewNativeComponent","_interopRequireDefault","_Reconciler","_skia","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","NativeSkiaPictureView","SkiaPictureViewNativeComponent","useOnSizeEvent","resultValue","onLayout","useCallback","event","width","height","nativeEvent","layout","value","Canvas2","exports","forwardRef","mode","debug","opaque","children","onSize","_onLayout","viewProps","ref","rafId","useRef","nativeId","useMemo","SkiaViewNativeId","current","root","SkiaSGRoot","Skia","useEffect","render","unmount","requestRedraw","requestAnimationFrame","cancelAnimationFrame","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","getNativeId","React","createElement","collapsable","nativeID"],"sources":["Canvas2.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 Canvas2Props extends ViewProps {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  mode?: \"continuous\" | \"default\";\n}\n\nexport const Canvas2 = forwardRef(\n  (\n    {\n      mode,\n      debug,\n      opaque,\n      children,\n      onSize,\n      onLayout: _onLayout,\n      ...viewProps\n    }: Canvas2Props,\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        requestRedraw();\n      }\n      return () => {\n        if (rafId.current !== null) {\n          cancelAnimationFrame(rafId.current);\n        }\n      };\n    }, [mode, requestRedraw]);\n\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/commonjs/renderer/Canvas2.web.d.ts

@@ -1,3 +0,0 @@
-import type { CanvasProps } from "./Canvas";
-export type Canvas2Props = CanvasProps;
-export declare const Canvas2: import("react").FunctionComponent<CanvasProps & import("react").RefAttributes<import("..").SkiaDomView>>;

package/lib/commonjs/renderer/Canvas2.web.js

@@ -1,9 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Canvas2 = void 0;
-var _Canvas = require("./Canvas");
-const Canvas2 = exports.Canvas2 = _Canvas.Canvas;
-//# sourceMappingURL=Canvas2.web.js.map

package/lib/commonjs/renderer/Canvas2.web.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_Canvas","require","Canvas2","exports","Canvas"],"sources":["Canvas2.web.tsx"],"sourcesContent":["import type { CanvasProps } from \"./Canvas\";\nimport { Canvas } from \"./Canvas\";\n\nexport type Canvas2Props = CanvasProps;\n\nexport const Canvas2 = Canvas;\n"],"mappings":";;;;;;AACA,IAAAA,OAAA,GAAAC,OAAA;AAIO,MAAMC,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAGE,cAAM","ignoreList":[]}

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

@@ -1,10 +0,0 @@
-import type { ViewProps } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
-import type { SkSize } from "../skia/types";
-export interface Canvas2Props extends ViewProps {
-    debug?: boolean;
-    opaque?: boolean;
-    onSize?: SharedValue<SkSize>;
-    mode?: "continuous" | "default";
-}
-export declare const Canvas2: import("react").ForwardRefExoticComponent<Canvas2Props & import("react").RefAttributes<unknown>>;

package/lib/module/renderer/Canvas2.js

@@ -1,97 +0,0 @@
-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 { 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) {
-      onLayout(event);
-    }
-    const {
-      width,
-      height
-    } = event.nativeEvent.layout;
-    if (resultValue) {
-      resultValue.value = {
-        width,
-        height
-      };
-    }
-  }, [onLayout, resultValue]);
-};
-export const Canvas2 = /*#__PURE__*/forwardRef(({
-  mode,
-  debug,
-  opaque,
-  children,
-  onSize,
-  onLayout: _onLayout,
-  ...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 effects
-  useEffect(() => {
-    root.render(children);
-  }, [children, root]);
-  useEffect(() => {
-    return () => {
-      root.unmount();
-    };
-  }, [root]);
-  const requestRedraw = useCallback(() => {
-    rafId.current = requestAnimationFrame(() => {
-      root.render(children);
-      if (mode === "continuous") {
-        requestRedraw();
-      }
-    });
-  }, [children, mode, root]);
-  useEffect(() => {
-    if (mode === "continuous") {
-      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=Canvas2.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","SkiaViewNativeId","SkiaPictureViewNativeComponent","SkiaSGRoot","Skia","NativeSkiaPictureView","useOnSizeEvent","resultValue","onLayout","event","width","height","nativeEvent","layout","value","Canvas2","mode","debug","opaque","children","onSize","_onLayout","viewProps","ref","rafId","nativeId","current","root","render","unmount","requestRedraw","requestAnimationFrame","cancelAnimationFrame","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","getNativeId","React","createElement","_extends","collapsable","nativeID"],"sources":["Canvas2.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 Canvas2Props extends ViewProps {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  mode?: \"continuous\" | \"default\";\n}\n\nexport const Canvas2 = forwardRef(\n  (\n    {\n      mode,\n      debug,\n      opaque,\n      children,\n      onSize,\n      onLayout: _onLayout,\n      ...viewProps\n    }: Canvas2Props,\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        requestRedraw();\n      }\n      return () => {\n        if (rafId.current !== null) {\n          cancelAnimationFrame(rafId.current);\n        }\n      };\n    }, [mode, requestRedraw]);\n\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":";AAAA,SACEA,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,QACD,OAAO;AAId,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,OAAOC,8BAA8B,MAAM,yCAAyC;AAEpF,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,IAAI,QAAQ,SAAS;AAG9B,MAAMC,qBAAqB,GAAGH,8BAA8B;;AAE5D;AACA,MAAMI,cAAc,GAAGA,CACrBC,WAAwC,EACxCC,QAA6C,KAC1C;EACH,OAAOZ,WAAW,CACfa,KAAwB,IAAK;IAC5B,IAAID,QAAQ,EAAE;MACZA,QAAQ,CAACC,KAAK,CAAC;IACjB;IACA,MAAM;MAAEC,KAAK;MAAEC;IAAO,CAAC,GAAGF,KAAK,CAACG,WAAW,CAACC,MAAM;IAElD,IAAIN,WAAW,EAAE;MACfA,WAAW,CAACO,KAAK,GAAG;QAAEJ,KAAK;QAAEC;MAAO,CAAC;IACvC;EACF,CAAC,EACD,CAACH,QAAQ,EAAED,WAAW,CACxB,CAAC;AACH,CAAC;AASD,OAAO,MAAMQ,OAAO,gBAAGpB,UAAU,CAC/B,CACE;EACEqB,IAAI;EACJC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACRC,MAAM;EACNZ,QAAQ,EAAEa,SAAS;EACnB,GAAGC;AACS,CAAC,EACfC,GAAG,KACA;EACH,MAAMC,KAAK,GAAGxB,MAAM,CAAgB,IAAI,CAAC;EACzC,MAAMQ,QAAQ,GAAGF,cAAc,CAACc,MAAM,EAAEC,SAAS,CAAC;EAClD;EACA,MAAMI,QAAQ,GAAG1B,OAAO,CAAC,MAAM;IAC7B,OAAOE,gBAAgB,CAACyB,OAAO,EAAE;EACnC,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,MAAMC,IAAI,GAAG5B,OAAO,CAAC,MAAM,IAAII,UAAU,CAACC,IAAI,EAAEqB,QAAQ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;;EAEtE;EACA5B,SAAS,CAAC,MAAM;IACd8B,IAAI,CAACC,MAAM,CAACT,QAAQ,CAAC;EACvB,CAAC,EAAE,CAACA,QAAQ,EAAEQ,IAAI,CAAC,CAAC;EAEpB9B,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACX8B,IAAI,CAACE,OAAO,CAAC,CAAC;IAChB,CAAC;EACH,CAAC,EAAE,CAACF,IAAI,CAAC,CAAC;EAEV,MAAMG,aAAa,GAAGlC,WAAW,CAAC,MAAM;IACtC4B,KAAK,CAACE,OAAO,GAAGK,qBAAqB,CAAC,MAAM;MAC1CJ,IAAI,CAACC,MAAM,CAACT,QAAQ,CAAC;MACrB,IAAIH,IAAI,KAAK,YAAY,EAAE;QACzBc,aAAa,CAAC,CAAC;MACjB;IACF,CAAC,CAAC;EACJ,CAAC,EAAE,CAACX,QAAQ,EAAEH,IAAI,EAAEW,IAAI,CAAC,CAAC;EAE1B9B,SAAS,CAAC,MAAM;IACd,IAAImB,IAAI,KAAK,YAAY,EAAE;MACzBc,aAAa,CAAC,CAAC;IACjB;IACA,OAAO,MAAM;MACX,IAAIN,KAAK,CAACE,OAAO,KAAK,IAAI,EAAE;QAC1BM,oBAAoB,CAACR,KAAK,CAACE,OAAO,CAAC;MACrC;IACF,CAAC;EACH,CAAC,EAAE,CAACV,IAAI,EAAEc,aAAa,CAAC,CAAC;;EAEzB;EACAhC,mBAAmB,CAACyB,GAAG,EAAE,OAAO;IAC9BU,iBAAiB,EAAGC,IAAa,IAAK;MACpC,OAAOC,WAAW,CAACF,iBAAiB,CAACR,QAAQ,EAAES,IAAI,CAAC;IACtD,CAAC;IACDE,sBAAsB,EAAGF,IAAa,IAAK;MACzC,OAAOC,WAAW,CAACC,sBAAsB,CAACX,QAAQ,EAAES,IAAI,CAAC;IAC3D,CAAC;IACDG,MAAM,EAAEA,CAAA,KAAM;MACZF,WAAW,CAACL,aAAa,CAACL,QAAQ,CAAC;IACrC,CAAC;IACDa,WAAW,EAAEA,CAAA,KAAM;MACjB,OAAOb,QAAQ;IACjB;EACF,CAAC,CAAC,CAAC;EACH,oBACEc,KAAA,CAAAC,aAAA,CAACnC,qBAAqB,EAAAoC,QAAA;IACpBC,WAAW,EAAE,KAAM;IACnBC,QAAQ,EAAE,GAAGlB,QAAQ,EAAG;IACxBR,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfV,QAAQ,EAAEA;EAAS,GACfc,SAAS,CACd,CAAC;AAEN,CACF,CAAC","ignoreList":[]}

package/lib/module/renderer/Canvas2.web.d.ts

@@ -1,3 +0,0 @@
-import type { CanvasProps } from "./Canvas";
-export type Canvas2Props = CanvasProps;
-export declare const Canvas2: import("react").FunctionComponent<CanvasProps & import("react").RefAttributes<import("..").SkiaDomView>>;

package/lib/module/renderer/Canvas2.web.js

@@ -1,3 +0,0 @@
-import { Canvas } from "./Canvas";
-export const Canvas2 = Canvas;
-//# sourceMappingURL=Canvas2.web.js.map

package/lib/module/renderer/Canvas2.web.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Canvas","Canvas2"],"sources":["Canvas2.web.tsx"],"sourcesContent":["import type { CanvasProps } from \"./Canvas\";\nimport { Canvas } from \"./Canvas\";\n\nexport type Canvas2Props = CanvasProps;\n\nexport const Canvas2 = Canvas;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,UAAU;AAIjC,OAAO,MAAMC,OAAO,GAAGD,MAAM","ignoreList":[]}

package/lib/typescript/lib/commonjs/renderer/Canvas2.d.ts

@@ -1,3 +0,0 @@
-export const __esModule: boolean;
-export const Canvas2: _react.ForwardRefExoticComponent<_react.RefAttributes<any>>;
-import _react = require("react");

package/lib/typescript/lib/commonjs/renderer/Canvas2.web.d.ts

@@ -1,2 +0,0 @@
-export const __esModule: boolean;
-export { Canvas as Canvas2 };

package/lib/typescript/lib/module/renderer/Canvas2.d.ts

@@ -1 +0,0 @@
-export const Canvas2: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

package/lib/typescript/lib/module/renderer/Canvas2.web.d.ts

@@ -1 +0,0 @@
-export const Canvas2: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

package/lib/typescript/src/renderer/Canvas2.d.ts

@@ -1,10 +0,0 @@
-import type { ViewProps } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
-import type { SkSize } from "../skia/types";
-export interface Canvas2Props extends ViewProps {
-    debug?: boolean;
-    opaque?: boolean;
-    onSize?: SharedValue<SkSize>;
-    mode?: "continuous" | "default";
-}
-export declare const Canvas2: import("react").ForwardRefExoticComponent<Canvas2Props & import("react").RefAttributes<unknown>>;

package/lib/typescript/src/renderer/Canvas2.web.d.ts

@@ -1,3 +0,0 @@
-import type { CanvasProps } from "./Canvas";
-export type Canvas2Props = CanvasProps;
-export declare const Canvas2: import("react").FunctionComponent<CanvasProps & import("react").RefAttributes<import("..").SkiaDomView>>;

package/src/renderer/Canvas2.tsx

@@ -1,128 +0,0 @@
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from "react";
-import type { LayoutChangeEvent, ViewProps } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
-
-import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
-import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
-import type { SkRect, SkSize } from "../skia/types";
-import { SkiaSGRoot } from "../sksg/Reconciler";
-import { Skia } from "../skia";
-import type { SkiaBaseViewProps } from "../views";
-
-const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
-
-// TODO: no need to go through the JS thread for this
-const useOnSizeEvent = (
-  resultValue: SkiaBaseViewProps["onSize"],
-  onLayout?: (event: LayoutChangeEvent) => void
-) => {
-  return useCallback(
-    (event: LayoutChangeEvent) => {
-      if (onLayout) {
-        onLayout(event);
-      }
-      const { width, height } = event.nativeEvent.layout;
-
-      if (resultValue) {
-        resultValue.value = { width, height };
-      }
-    },
-    [onLayout, resultValue]
-  );
-};
-
-export interface Canvas2Props extends ViewProps {
-  debug?: boolean;
-  opaque?: boolean;
-  onSize?: SharedValue<SkSize>;
-  mode?: "continuous" | "default";
-}
-
-export const Canvas2 = forwardRef(
-  (
-    {
-      mode,
-      debug,
-      opaque,
-      children,
-      onSize,
-      onLayout: _onLayout,
-      ...viewProps
-    }: Canvas2Props,
-    ref
-  ) => {
-    const rafId = useRef<number | null>(null);
-    const onLayout = useOnSizeEvent(onSize, _onLayout);
-    // Native ID
-    const nativeId = useMemo(() => {
-      return SkiaViewNativeId.current++;
-    }, []);
-
-    // Root
-    const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
-
-    // Render effects
-    useEffect(() => {
-      root.render(children);
-    }, [children, root]);
-
-    useEffect(() => {
-      return () => {
-        root.unmount();
-      };
-    }, [root]);
-
-    const requestRedraw = useCallback(() => {
-      rafId.current = requestAnimationFrame(() => {
-        root.render(children);
-        if (mode === "continuous") {
-          requestRedraw();
-        }
-      });
-    }, [children, mode, root]);
-
-    useEffect(() => {
-      if (mode === "continuous") {
-        requestRedraw();
-      }
-      return () => {
-        if (rafId.current !== null) {
-          cancelAnimationFrame(rafId.current);
-        }
-      };
-    }, [mode, requestRedraw]);
-
-    // Component methods
-    useImperativeHandle(ref, () => ({
-      makeImageSnapshot: (rect?: SkRect) => {
-        return SkiaViewApi.makeImageSnapshot(nativeId, rect);
-      },
-      makeImageSnapshotAsync: (rect?: SkRect) => {
-        return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);
-      },
-      redraw: () => {
-        SkiaViewApi.requestRedraw(nativeId);
-      },
-      getNativeId: () => {
-        return nativeId;
-      },
-    }));
-    return (
-      <NativeSkiaPictureView
-        collapsable={false}
-        nativeID={`${nativeId}`}
-        debug={debug}
-        opaque={opaque}
-        onLayout={onLayout}
-        {...viewProps}
-      />
-    );
-  }
-);

package/src/renderer/Canvas2.web.tsx

@@ -1,6 +0,0 @@
-import type { CanvasProps } from "./Canvas";
-import { Canvas } from "./Canvas";
-
-export type Canvas2Props = CanvasProps;
-
-export const Canvas2 = Canvas;