@shopify/react-native-skia 0.1.240 → 0.1.241
Sign up to get free protection for your applications and to get access to all the features.
- package/android/cpp/rnskia-android/SkiaOpenGLSurfaceFactory.cpp +14 -0
- package/lib/commonjs/external/reanimated/buffers.d.ts +4 -4
- package/lib/commonjs/external/reanimated/buffers.js +2 -3
- package/lib/commonjs/external/reanimated/buffers.js.map +1 -1
- package/lib/commonjs/external/reanimated/interpolators.js +2 -2
- package/lib/commonjs/external/reanimated/interpolators.js.map +1 -1
- package/lib/commonjs/renderer/Offscreen.d.ts +1 -0
- package/lib/commonjs/renderer/Offscreen.js +16 -2
- package/lib/commonjs/renderer/Offscreen.js.map +1 -1
- package/lib/module/external/reanimated/buffers.d.ts +4 -4
- package/lib/module/external/reanimated/buffers.js +1 -2
- package/lib/module/external/reanimated/buffers.js.map +1 -1
- package/lib/module/external/reanimated/interpolators.js +2 -2
- package/lib/module/external/reanimated/interpolators.js.map +1 -1
- package/lib/module/renderer/Offscreen.d.ts +1 -0
- package/lib/module/renderer/Offscreen.js +15 -1
- package/lib/module/renderer/Offscreen.js.map +1 -1
- package/lib/typescript/src/external/reanimated/buffers.d.ts +4 -4
- package/lib/typescript/src/renderer/Offscreen.d.ts +1 -0
- package/package.json +1 -1
- package/src/external/reanimated/buffers.ts +1 -2
- package/src/external/reanimated/interpolators.ts +2 -2
- package/src/renderer/Offscreen.tsx +17 -1
|
@@ -28,12 +28,26 @@ sk_sp<SkSurface> SkiaOpenGLSurfaceFactory::makeOffscreenSurface(int width,
|
|
|
28
28
|
|
|
29
29
|
SkSurfaceProps props(0, kUnknown_SkPixelGeometry);
|
|
30
30
|
|
|
31
|
+
if (!SkiaOpenGLHelper::makeCurrent(
|
|
32
|
+
&ThreadContextHolder::ThreadSkiaOpenGLContext,
|
|
33
|
+
ThreadContextHolder::ThreadSkiaOpenGLContext.gl1x1Surface)) {
|
|
34
|
+
RNSkLogger::logToConsole(
|
|
35
|
+
"Could not create EGL Surface from native window / surface. Could "
|
|
36
|
+
"not set new surface as current surface.");
|
|
37
|
+
return nullptr;
|
|
38
|
+
}
|
|
39
|
+
|
|
31
40
|
// Create texture
|
|
32
41
|
auto texture =
|
|
33
42
|
ThreadContextHolder::ThreadSkiaOpenGLContext.directContext
|
|
34
43
|
->createBackendTexture(width, height, colorType,
|
|
35
44
|
skgpu::Mipmapped::kNo, GrRenderable::kYes);
|
|
36
45
|
|
|
46
|
+
if (!texture.isValid()) {
|
|
47
|
+
RNSkLogger::logToConsole("couldn't create offscreen texture %dx%d", width,
|
|
48
|
+
height);
|
|
49
|
+
}
|
|
50
|
+
|
|
37
51
|
struct ReleaseContext {
|
|
38
52
|
SkiaOpenGLContext *context;
|
|
39
53
|
GrBackendTexture texture;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
|
|
2
2
|
type Modifier<T> = (input: T, index: number) => void;
|
|
3
|
-
export declare const useRectBuffer: (size: number, modifier: Modifier<SkHostRect>) => import("react-native-reanimated").SharedValue<SkHostRect[]>;
|
|
4
|
-
export declare const useRSXformBuffer: (size: number, modifier: Modifier<SkRSXform>) => import("react-native-reanimated").SharedValue<SkRSXform[]>;
|
|
5
|
-
export declare const usePointBuffer: (size: number, modifier: Modifier<SkPoint>) => import("react-native-reanimated").SharedValue<SkPoint[]>;
|
|
6
|
-
export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated").SharedValue<Float32Array[]>;
|
|
3
|
+
export declare const useRectBuffer: (size: number, modifier: Modifier<SkHostRect>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkHostRect[]>;
|
|
4
|
+
export declare const useRSXformBuffer: (size: number, modifier: Modifier<SkRSXform>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkRSXform[]>;
|
|
5
|
+
export declare const usePointBuffer: (size: number, modifier: Modifier<SkPoint>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkPoint[]>;
|
|
6
|
+
export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<Float32Array[]>;
|
|
7
7
|
export {};
|
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useRectBuffer = exports.useRSXformBuffer = exports.usePointBuffer = exports.useColorBuffer = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
|
-
var _reactNativeReanimated = require("react-native-reanimated");
|
|
9
8
|
var _skia = require("../../skia");
|
|
10
9
|
var _moduleWrapper = require("./moduleWrapper");
|
|
11
10
|
var _interpolators = require("./interpolators");
|
|
@@ -17,7 +16,7 @@ const useBuffer = (size, bufferInitializer, modifier) => {
|
|
|
17
16
|
const values = (0, _moduleWrapper.useSharedValue)(buffer);
|
|
18
17
|
const mod = modifier;
|
|
19
18
|
const deps = Object.values((_mod$__closure = mod.__closure) !== null && _mod$__closure !== void 0 ? _mod$__closure : {});
|
|
20
|
-
const mapperId = (0,
|
|
19
|
+
const mapperId = (0, _moduleWrapper.startMapper)(() => {
|
|
21
20
|
"worklet";
|
|
22
21
|
|
|
23
22
|
buffer.forEach((val, index) => {
|
|
@@ -27,7 +26,7 @@ const useBuffer = (size, bufferInitializer, modifier) => {
|
|
|
27
26
|
}, deps);
|
|
28
27
|
(0, _react.useEffect)(() => {
|
|
29
28
|
return () => {
|
|
30
|
-
(0,
|
|
29
|
+
(0, _moduleWrapper.stopMapper)(mapperId);
|
|
31
30
|
};
|
|
32
31
|
}, [mapperId]);
|
|
33
32
|
return values;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","
|
|
1
|
+
{"version":3,"names":["_react","require","_skia","_moduleWrapper","_interpolators","useBuffer","size","bufferInitializer","modifier","_mod$__closure","buffer","useMemo","Array","fill","map","values","useSharedValue","mod","deps","Object","__closure","mapperId","startMapper","forEach","val","index","notifyChange","useEffect","stopMapper","useRectBuffer","Skia","XYWHRect","exports","useRSXformBuffer","RSXform","usePointBuffer","Point","useColorBuffer","Color"],"sources":["buffers.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { WorkletFunction } from \"react-native-reanimated/lib/typescript/reanimated2/commonTypes\";\n\nimport type { SkColor, SkHostRect, SkPoint, SkRSXform } from \"../../skia/types\";\nimport { Skia } from \"../../skia\";\n\nimport { startMapper, stopMapper, useSharedValue } from \"./moduleWrapper\";\nimport { notifyChange } from \"./interpolators\";\n\ntype Modifier<T> = (input: T, index: number) => void;\n\nconst useBuffer = <T>(\n size: number,\n bufferInitializer: () => T,\n modifier: Modifier<T>\n) => {\n const buffer = useMemo(\n () => new Array(size).fill(0).map(bufferInitializer),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [size]\n );\n const values = useSharedValue(buffer);\n const mod = modifier as WorkletFunction;\n const deps = Object.values(mod.__closure ?? {});\n const mapperId = startMapper(() => {\n \"worklet\";\n buffer.forEach((val, index) => {\n modifier(val, index);\n });\n notifyChange(values);\n }, deps);\n\n useEffect(() => {\n return () => {\n stopMapper(mapperId);\n };\n }, [mapperId]);\n\n return values;\n};\n\nexport const useRectBuffer = (size: number, modifier: Modifier<SkHostRect>) =>\n useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);\n\n// Usage for RSXform Buffer\nexport const useRSXformBuffer = (size: number, modifier: Modifier<SkRSXform>) =>\n useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);\n\n// Usage for Point Buffer\nexport const usePointBuffer = (size: number, modifier: Modifier<SkPoint>) =>\n useBuffer(size, () => Skia.Point(0, 0), modifier);\n\n// Usage for Color Buffer\nexport const useColorBuffer = (size: number, modifier: Modifier<SkColor>) =>\n useBuffer(size, () => Skia.Color(\"black\"), modifier);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAIA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAIA,MAAMI,SAAS,GAAGA,CAChBC,IAAY,EACZC,iBAA0B,EAC1BC,QAAqB,KAClB;EAAA,IAAAC,cAAA;EACH,MAAMC,MAAM,GAAG,IAAAC,cAAO,EACpB,MAAM,IAAIC,KAAK,CAACN,IAAI,CAAC,CAACO,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAACP,iBAAiB,CAAC;EACpD;EACA,CAACD,IAAI,CACP,CAAC;EACD,MAAMS,MAAM,GAAG,IAAAC,6BAAc,EAACN,MAAM,CAAC;EACrC,MAAMO,GAAG,GAAGT,QAA2B;EACvC,MAAMU,IAAI,GAAGC,MAAM,CAACJ,MAAM,EAAAN,cAAA,GAACQ,GAAG,CAACG,SAAS,cAAAX,cAAA,cAAAA,cAAA,GAAI,CAAC,CAAC,CAAC;EAC/C,MAAMY,QAAQ,GAAG,IAAAC,0BAAW,EAAC,MAAM;IACjC,SAAS;;IACTZ,MAAM,CAACa,OAAO,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;MAC7BjB,QAAQ,CAACgB,GAAG,EAAEC,KAAK,CAAC;IACtB,CAAC,CAAC;IACF,IAAAC,2BAAY,EAACX,MAAM,CAAC;EACtB,CAAC,EAAEG,IAAI,CAAC;EAER,IAAAS,gBAAS,EAAC,MAAM;IACd,OAAO,MAAM;MACX,IAAAC,yBAAU,EAACP,QAAQ,CAAC;IACtB,CAAC;EACH,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,OAAON,MAAM;AACf,CAAC;AAEM,MAAMc,aAAa,GAAGA,CAACvB,IAAY,EAAEE,QAA8B,KACxEH,SAAS,CAACC,IAAI,EAAE,MAAMwB,UAAI,CAACC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEvB,QAAQ,CAAC;;AAE5D;AAAAwB,OAAA,CAAAH,aAAA,GAAAA,aAAA;AACO,MAAMI,gBAAgB,GAAGA,CAAC3B,IAAY,EAAEE,QAA6B,KAC1EH,SAAS,CAACC,IAAI,EAAE,MAAMwB,UAAI,CAACI,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE1B,QAAQ,CAAC;;AAE3D;AAAAwB,OAAA,CAAAC,gBAAA,GAAAA,gBAAA;AACO,MAAME,cAAc,GAAGA,CAAC7B,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,MAAMwB,UAAI,CAACM,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE5B,QAAQ,CAAC;;AAEnD;AAAAwB,OAAA,CAAAG,cAAA,GAAAA,cAAA;AACO,MAAME,cAAc,GAAGA,CAAC/B,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,MAAMwB,UAAI,CAACQ,KAAK,CAAC,OAAO,CAAC,EAAE9B,QAAQ,CAAC;AAACwB,OAAA,CAAAK,cAAA,GAAAA,cAAA"}
|
|
@@ -7,12 +7,12 @@ exports.useVectorInterpolation = exports.usePathValue = exports.usePathInterpola
|
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
var _animation = require("../../animation");
|
|
9
9
|
var _skia = require("../../skia");
|
|
10
|
-
var
|
|
10
|
+
var _Offscreen = require("../../renderer/Offscreen");
|
|
11
11
|
var _moduleWrapper = require("./moduleWrapper");
|
|
12
12
|
const notifyChange = value => {
|
|
13
13
|
"worklet";
|
|
14
14
|
|
|
15
|
-
if (
|
|
15
|
+
if ((0, _Offscreen.isOnMainThread)()) {
|
|
16
16
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
17
17
|
value._value = value.value;
|
|
18
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_animation","_skia","
|
|
1
|
+
{"version":3,"names":["_react","require","_animation","_skia","_Offscreen","_moduleWrapper","notifyChange","value","isOnMainThread","_value","exports","usePathValue","cb","init","pathInit","useMemo","Skia","Path","Make","path","useSharedValue","useDerivedValue","reset","undefined","addPath","useClock","clock","callback","useCallback","info","timeSinceFirstFrame","useFrameCallback","useInterpolator","factory","interpolator","input","output","options","result","useAnimatedReaction","val","usePathInterpolation","outputRange","allPathsInterpolable","slice","every","isInterpolatable","Error","interpolatePaths","useVectorInterpolation","Point","interpolateVector"],"sources":["interpolators.ts"],"sourcesContent":["import type {\n ExtrapolationType,\n FrameInfo,\n SharedValue,\n} from \"react-native-reanimated\";\nimport { useCallback, useMemo } from \"react\";\n\nimport type { SkPath, SkPoint } from \"../../skia/types\";\nimport { interpolatePaths, interpolateVector } from \"../../animation\";\nimport { Skia } from \"../../skia\";\nimport { isOnMainThread } from \"../../renderer/Offscreen\";\n\nimport {\n useAnimatedReaction,\n useFrameCallback,\n useSharedValue,\n useDerivedValue,\n} from \"./moduleWrapper\";\n\nexport const notifyChange = (value: SharedValue<unknown>) => {\n \"worklet\";\n if (isOnMainThread()) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (value as any)._value = value.value;\n }\n};\n\nexport const usePathValue = (cb: (path: SkPath) => void, init?: SkPath) => {\n const pathInit = useMemo(() => Skia.Path.Make(), []);\n const path = useSharedValue(pathInit);\n useDerivedValue(() => {\n path.value.reset();\n if (init !== undefined) {\n path.value.addPath(init);\n }\n cb(path.value);\n notifyChange(path);\n });\n return path;\n};\n\nexport const useClock = () => {\n const clock = useSharedValue(0);\n const callback = useCallback(\n (info: FrameInfo) => {\n \"worklet\";\n clock.value = info.timeSinceFirstFrame;\n },\n [clock]\n );\n useFrameCallback(callback);\n return clock;\n};\n\n/**\n * @worklet\n */\ntype Interpolator<T> = (\n value: number,\n input: number[],\n output: T[],\n options: ExtrapolationType,\n result: T\n) => T;\n\nconst useInterpolator = <T>(\n factory: () => T,\n value: SharedValue<number>,\n interpolator: Interpolator<T>,\n input: number[],\n output: T[],\n options?: ExtrapolationType\n) => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const init = useMemo(() => factory(), []);\n const result = useSharedValue(init);\n useAnimatedReaction(\n () => value.value,\n (val) => {\n result.value = interpolator(val, input, output, options, result.value);\n notifyChange(result);\n },\n [input, output, options]\n );\n return result;\n};\n\nexport const usePathInterpolation = (\n value: SharedValue<number>,\n input: number[],\n outputRange: SkPath[],\n options?: ExtrapolationType\n) => {\n // Check if all paths in outputRange are interpolable\n const allPathsInterpolable = outputRange\n .slice(1)\n .every((path) => outputRange[0].isInterpolatable(path));\n if (!allPathsInterpolable) {\n // Handle the case where not all paths are interpolable\n // For example, throw an error or return early\n throw new Error(\n `Not all paths in the output range are interpolable.\nSee: https://shopify.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`\n );\n }\n return useInterpolator(\n () => Skia.Path.Make(),\n value,\n interpolatePaths,\n input,\n outputRange,\n options\n );\n};\n\nexport const useVectorInterpolation = (\n value: SharedValue<number>,\n input: number[],\n outputRange: SkPoint[],\n options?: ExtrapolationType\n) =>\n useInterpolator(\n () => Skia.Point(0, 0),\n value,\n interpolateVector,\n input,\n outputRange,\n options\n );\n"],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { ReactElement } from "react";
|
|
2
2
|
import type { SkPicture, SkSize } from "../skia/types";
|
|
3
|
+
export declare const isOnMainThread: () => boolean;
|
|
3
4
|
export declare const drawAsPicture: (element: ReactElement) => SkPicture;
|
|
4
5
|
export declare const drawAsImage: (element: ReactElement, size: SkSize) => import("../skia").SkImage;
|
|
5
6
|
export declare const drawAsImageFromPicture: (picture: SkPicture, size: SkSize) => import("../skia").SkImage;
|
|
@@ -3,10 +3,18 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.drawAsPicture = exports.drawAsImageFromPicture = exports.drawAsImage = void 0;
|
|
6
|
+
exports.isOnMainThread = exports.drawAsPicture = exports.drawAsImageFromPicture = exports.drawAsImage = void 0;
|
|
7
7
|
var _types = require("../dom/types");
|
|
8
8
|
var _skia = require("../skia");
|
|
9
|
+
var _Platform = require("../Platform");
|
|
9
10
|
var _Reconciler = require("./Reconciler");
|
|
11
|
+
// We call it main thread because on web main is JS thread
|
|
12
|
+
const isOnMainThread = () => {
|
|
13
|
+
"worklet";
|
|
14
|
+
|
|
15
|
+
return typeof _WORKLET !== "undefined" && _WORKLET === true || _Platform.Platform.OS === "web";
|
|
16
|
+
};
|
|
17
|
+
exports.isOnMainThread = isOnMainThread;
|
|
10
18
|
const drawAsPicture = element => {
|
|
11
19
|
const recorder = _skia.Skia.PictureRecorder();
|
|
12
20
|
const canvas = recorder.beginRecording();
|
|
@@ -33,7 +41,13 @@ const drawAsImageFromPicture = (picture, size) => {
|
|
|
33
41
|
canvas.scale(pd, pd);
|
|
34
42
|
canvas.drawPicture(picture);
|
|
35
43
|
surface.flush();
|
|
36
|
-
|
|
44
|
+
const image = surface.makeImageSnapshot();
|
|
45
|
+
// If we are not on the main thread, we need to make the image non-texture.
|
|
46
|
+
if (!isOnMainThread()) {
|
|
47
|
+
return image.makeNonTextureImage();
|
|
48
|
+
} else {
|
|
49
|
+
return image;
|
|
50
|
+
}
|
|
37
51
|
};
|
|
38
52
|
exports.drawAsImageFromPicture = drawAsImageFromPicture;
|
|
39
53
|
//# sourceMappingURL=Offscreen.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_types","require","_skia","_Reconciler","drawAsPicture","element","recorder","Skia","PictureRecorder","canvas","beginRecording","root","SkiaRoot","render","ctx","JsiDrawingContext","dom","picture","finishRecordingAsPicture","
|
|
1
|
+
{"version":3,"names":["_types","require","_skia","_Platform","_Reconciler","isOnMainThread","_WORKLET","Platform","OS","exports","drawAsPicture","element","recorder","Skia","PictureRecorder","canvas","beginRecording","root","SkiaRoot","render","ctx","JsiDrawingContext","dom","picture","finishRecordingAsPicture","drawAsImage","size","drawAsImageFromPicture","pd","surface","Surface","MakeOffscreen","width","height","getCanvas","scale","drawPicture","flush","image","makeImageSnapshot","makeNonTextureImage"],"sources":["Offscreen.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\nimport { JsiDrawingContext } from \"../dom/types\";\nimport type { SkPicture, SkSize } from \"../skia/types\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\n// We call it main thread because on web main is JS thread\nexport const isOnMainThread = () => {\n \"worklet\";\n return (\n (typeof _WORKLET !== \"undefined\" && _WORKLET === true) ||\n Platform.OS === \"web\"\n );\n};\n\nexport const drawAsPicture = (element: ReactElement) => {\n const recorder = Skia.PictureRecorder();\n const canvas = recorder.beginRecording();\n const root = new SkiaRoot(Skia, false);\n root.render(element);\n const ctx = new JsiDrawingContext(Skia, canvas);\n root.dom.render(ctx);\n const picture = recorder.finishRecordingAsPicture();\n return picture;\n};\n\nexport const drawAsImage = (element: ReactElement, size: SkSize) => {\n return drawAsImageFromPicture(drawAsPicture(element), size);\n};\n\n// TODO: We're not sure yet why PixelRatio is not needed here.\nconst pd = 1;\nexport const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {\n \"worklet\";\n const surface = Skia.Surface.MakeOffscreen(\n size.width * pd,\n size.height * pd\n )!;\n const canvas = surface.getCanvas();\n canvas.scale(pd, pd);\n canvas.drawPicture(picture);\n surface.flush();\n const image = surface.makeImageSnapshot();\n // If we are not on the main thread, we need to make the image non-texture.\n if (!isOnMainThread()) {\n return image.makeNonTextureImage();\n } else {\n return image;\n }\n};\n"],"mappings":";;;;;;AAEA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AAEA,IAAAG,WAAA,GAAAH,OAAA;AAEA;AACO,MAAMI,cAAc,GAAGA,CAAA,KAAM;EAClC,SAAS;;EACT,OACG,OAAOC,QAAQ,KAAK,WAAW,IAAIA,QAAQ,KAAK,IAAI,IACrDC,kBAAQ,CAACC,EAAE,KAAK,KAAK;AAEzB,CAAC;AAACC,OAAA,CAAAJ,cAAA,GAAAA,cAAA;AAEK,MAAMK,aAAa,GAAIC,OAAqB,IAAK;EACtD,MAAMC,QAAQ,GAAGC,UAAI,CAACC,eAAe,CAAC,CAAC;EACvC,MAAMC,MAAM,GAAGH,QAAQ,CAACI,cAAc,CAAC,CAAC;EACxC,MAAMC,IAAI,GAAG,IAAIC,oBAAQ,CAACL,UAAI,EAAE,KAAK,CAAC;EACtCI,IAAI,CAACE,MAAM,CAACR,OAAO,CAAC;EACpB,MAAMS,GAAG,GAAG,IAAIC,wBAAiB,CAACR,UAAI,EAAEE,MAAM,CAAC;EAC/CE,IAAI,CAACK,GAAG,CAACH,MAAM,CAACC,GAAG,CAAC;EACpB,MAAMG,OAAO,GAAGX,QAAQ,CAACY,wBAAwB,CAAC,CAAC;EACnD,OAAOD,OAAO;AAChB,CAAC;AAACd,OAAA,CAAAC,aAAA,GAAAA,aAAA;AAEK,MAAMe,WAAW,GAAGA,CAACd,OAAqB,EAAEe,IAAY,KAAK;EAClE,OAAOC,sBAAsB,CAACjB,aAAa,CAACC,OAAO,CAAC,EAAEe,IAAI,CAAC;AAC7D,CAAC;;AAED;AAAAjB,OAAA,CAAAgB,WAAA,GAAAA,WAAA;AACA,MAAMG,EAAE,GAAG,CAAC;AACL,MAAMD,sBAAsB,GAAGA,CAACJ,OAAkB,EAAEG,IAAY,KAAK;EAC1E,SAAS;;EACT,MAAMG,OAAO,GAAGhB,UAAI,CAACiB,OAAO,CAACC,aAAa,CACxCL,IAAI,CAACM,KAAK,GAAGJ,EAAE,EACfF,IAAI,CAACO,MAAM,GAAGL,EAChB,CAAE;EACF,MAAMb,MAAM,GAAGc,OAAO,CAACK,SAAS,CAAC,CAAC;EAClCnB,MAAM,CAACoB,KAAK,CAACP,EAAE,EAAEA,EAAE,CAAC;EACpBb,MAAM,CAACqB,WAAW,CAACb,OAAO,CAAC;EAC3BM,OAAO,CAACQ,KAAK,CAAC,CAAC;EACf,MAAMC,KAAK,GAAGT,OAAO,CAACU,iBAAiB,CAAC,CAAC;EACzC;EACA,IAAI,CAAClC,cAAc,CAAC,CAAC,EAAE;IACrB,OAAOiC,KAAK,CAACE,mBAAmB,CAAC,CAAC;EACpC,CAAC,MAAM;IACL,OAAOF,KAAK;EACd;AACF,CAAC;AAAC7B,OAAA,CAAAkB,sBAAA,GAAAA,sBAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
|
|
2
2
|
type Modifier<T> = (input: T, index: number) => void;
|
|
3
|
-
export declare const useRectBuffer: (size: number, modifier: Modifier<SkHostRect>) => import("react-native-reanimated").SharedValue<SkHostRect[]>;
|
|
4
|
-
export declare const useRSXformBuffer: (size: number, modifier: Modifier<SkRSXform>) => import("react-native-reanimated").SharedValue<SkRSXform[]>;
|
|
5
|
-
export declare const usePointBuffer: (size: number, modifier: Modifier<SkPoint>) => import("react-native-reanimated").SharedValue<SkPoint[]>;
|
|
6
|
-
export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated").SharedValue<Float32Array[]>;
|
|
3
|
+
export declare const useRectBuffer: (size: number, modifier: Modifier<SkHostRect>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkHostRect[]>;
|
|
4
|
+
export declare const useRSXformBuffer: (size: number, modifier: Modifier<SkRSXform>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkRSXform[]>;
|
|
5
|
+
export declare const usePointBuffer: (size: number, modifier: Modifier<SkPoint>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkPoint[]>;
|
|
6
|
+
export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<Float32Array[]>;
|
|
7
7
|
export {};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { useEffect, useMemo } from "react";
|
|
2
|
-
import { startMapper, stopMapper } from "react-native-reanimated";
|
|
3
2
|
import { Skia } from "../../skia";
|
|
4
|
-
import { useSharedValue } from "./moduleWrapper";
|
|
3
|
+
import { startMapper, stopMapper, useSharedValue } from "./moduleWrapper";
|
|
5
4
|
import { notifyChange } from "./interpolators";
|
|
6
5
|
const useBuffer = (size, bufferInitializer, modifier) => {
|
|
7
6
|
var _mod$__closure;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useMemo","
|
|
1
|
+
{"version":3,"names":["useEffect","useMemo","Skia","startMapper","stopMapper","useSharedValue","notifyChange","useBuffer","size","bufferInitializer","modifier","_mod$__closure","buffer","Array","fill","map","values","mod","deps","Object","__closure","mapperId","forEach","val","index","useRectBuffer","XYWHRect","useRSXformBuffer","RSXform","usePointBuffer","Point","useColorBuffer","Color"],"sources":["buffers.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { WorkletFunction } from \"react-native-reanimated/lib/typescript/reanimated2/commonTypes\";\n\nimport type { SkColor, SkHostRect, SkPoint, SkRSXform } from \"../../skia/types\";\nimport { Skia } from \"../../skia\";\n\nimport { startMapper, stopMapper, useSharedValue } from \"./moduleWrapper\";\nimport { notifyChange } from \"./interpolators\";\n\ntype Modifier<T> = (input: T, index: number) => void;\n\nconst useBuffer = <T>(\n size: number,\n bufferInitializer: () => T,\n modifier: Modifier<T>\n) => {\n const buffer = useMemo(\n () => new Array(size).fill(0).map(bufferInitializer),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [size]\n );\n const values = useSharedValue(buffer);\n const mod = modifier as WorkletFunction;\n const deps = Object.values(mod.__closure ?? {});\n const mapperId = startMapper(() => {\n \"worklet\";\n buffer.forEach((val, index) => {\n modifier(val, index);\n });\n notifyChange(values);\n }, deps);\n\n useEffect(() => {\n return () => {\n stopMapper(mapperId);\n };\n }, [mapperId]);\n\n return values;\n};\n\nexport const useRectBuffer = (size: number, modifier: Modifier<SkHostRect>) =>\n useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);\n\n// Usage for RSXform Buffer\nexport const useRSXformBuffer = (size: number, modifier: Modifier<SkRSXform>) =>\n useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);\n\n// Usage for Point Buffer\nexport const usePointBuffer = (size: number, modifier: Modifier<SkPoint>) =>\n useBuffer(size, () => Skia.Point(0, 0), modifier);\n\n// Usage for Color Buffer\nexport const useColorBuffer = (size: number, modifier: Modifier<SkColor>) =>\n useBuffer(size, () => Skia.Color(\"black\"), modifier);\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAI1C,SAASC,IAAI,QAAQ,YAAY;AAEjC,SAASC,WAAW,EAAEC,UAAU,EAAEC,cAAc,QAAQ,iBAAiB;AACzE,SAASC,YAAY,QAAQ,iBAAiB;AAI9C,MAAMC,SAAS,GAAGA,CAChBC,IAAY,EACZC,iBAA0B,EAC1BC,QAAqB,KAClB;EAAA,IAAAC,cAAA;EACH,MAAMC,MAAM,GAAGX,OAAO,CACpB,MAAM,IAAIY,KAAK,CAACL,IAAI,CAAC,CAACM,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAACN,iBAAiB,CAAC;EACpD;EACA,CAACD,IAAI,CACP,CAAC;EACD,MAAMQ,MAAM,GAAGX,cAAc,CAACO,MAAM,CAAC;EACrC,MAAMK,GAAG,GAAGP,QAA2B;EACvC,MAAMQ,IAAI,GAAGC,MAAM,CAACH,MAAM,EAAAL,cAAA,GAACM,GAAG,CAACG,SAAS,cAAAT,cAAA,cAAAA,cAAA,GAAI,CAAC,CAAC,CAAC;EAC/C,MAAMU,QAAQ,GAAGlB,WAAW,CAAC,MAAM;IACjC,SAAS;;IACTS,MAAM,CAACU,OAAO,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;MAC7Bd,QAAQ,CAACa,GAAG,EAAEC,KAAK,CAAC;IACtB,CAAC,CAAC;IACFlB,YAAY,CAACU,MAAM,CAAC;EACtB,CAAC,EAAEE,IAAI,CAAC;EAERlB,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACXI,UAAU,CAACiB,QAAQ,CAAC;IACtB,CAAC;EACH,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,OAAOL,MAAM;AACf,CAAC;AAED,OAAO,MAAMS,aAAa,GAAGA,CAACjB,IAAY,EAAEE,QAA8B,KACxEH,SAAS,CAACC,IAAI,EAAE,MAAMN,IAAI,CAACwB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEhB,QAAQ,CAAC;;AAE5D;AACA,OAAO,MAAMiB,gBAAgB,GAAGA,CAACnB,IAAY,EAAEE,QAA6B,KAC1EH,SAAS,CAACC,IAAI,EAAE,MAAMN,IAAI,CAAC0B,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAElB,QAAQ,CAAC;;AAE3D;AACA,OAAO,MAAMmB,cAAc,GAAGA,CAACrB,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,MAAMN,IAAI,CAAC4B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAEpB,QAAQ,CAAC;;AAEnD;AACA,OAAO,MAAMqB,cAAc,GAAGA,CAACvB,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,MAAMN,IAAI,CAAC8B,KAAK,CAAC,OAAO,CAAC,EAAEtB,QAAQ,CAAC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { useCallback, useMemo } from "react";
|
|
2
2
|
import { interpolatePaths, interpolateVector } from "../../animation";
|
|
3
3
|
import { Skia } from "../../skia";
|
|
4
|
-
import {
|
|
4
|
+
import { isOnMainThread } from "../../renderer/Offscreen";
|
|
5
5
|
import { useAnimatedReaction, useFrameCallback, useSharedValue, useDerivedValue } from "./moduleWrapper";
|
|
6
6
|
export const notifyChange = value => {
|
|
7
7
|
"worklet";
|
|
8
8
|
|
|
9
|
-
if (
|
|
9
|
+
if (isOnMainThread()) {
|
|
10
10
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
11
11
|
value._value = value.value;
|
|
12
12
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useMemo","interpolatePaths","interpolateVector","Skia","
|
|
1
|
+
{"version":3,"names":["useCallback","useMemo","interpolatePaths","interpolateVector","Skia","isOnMainThread","useAnimatedReaction","useFrameCallback","useSharedValue","useDerivedValue","notifyChange","value","_value","usePathValue","cb","init","pathInit","Path","Make","path","reset","undefined","addPath","useClock","clock","callback","info","timeSinceFirstFrame","useInterpolator","factory","interpolator","input","output","options","result","val","usePathInterpolation","outputRange","allPathsInterpolable","slice","every","isInterpolatable","Error","useVectorInterpolation","Point"],"sources":["interpolators.ts"],"sourcesContent":["import type {\n ExtrapolationType,\n FrameInfo,\n SharedValue,\n} from \"react-native-reanimated\";\nimport { useCallback, useMemo } from \"react\";\n\nimport type { SkPath, SkPoint } from \"../../skia/types\";\nimport { interpolatePaths, interpolateVector } from \"../../animation\";\nimport { Skia } from \"../../skia\";\nimport { isOnMainThread } from \"../../renderer/Offscreen\";\n\nimport {\n useAnimatedReaction,\n useFrameCallback,\n useSharedValue,\n useDerivedValue,\n} from \"./moduleWrapper\";\n\nexport const notifyChange = (value: SharedValue<unknown>) => {\n \"worklet\";\n if (isOnMainThread()) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (value as any)._value = value.value;\n }\n};\n\nexport const usePathValue = (cb: (path: SkPath) => void, init?: SkPath) => {\n const pathInit = useMemo(() => Skia.Path.Make(), []);\n const path = useSharedValue(pathInit);\n useDerivedValue(() => {\n path.value.reset();\n if (init !== undefined) {\n path.value.addPath(init);\n }\n cb(path.value);\n notifyChange(path);\n });\n return path;\n};\n\nexport const useClock = () => {\n const clock = useSharedValue(0);\n const callback = useCallback(\n (info: FrameInfo) => {\n \"worklet\";\n clock.value = info.timeSinceFirstFrame;\n },\n [clock]\n );\n useFrameCallback(callback);\n return clock;\n};\n\n/**\n * @worklet\n */\ntype Interpolator<T> = (\n value: number,\n input: number[],\n output: T[],\n options: ExtrapolationType,\n result: T\n) => T;\n\nconst useInterpolator = <T>(\n factory: () => T,\n value: SharedValue<number>,\n interpolator: Interpolator<T>,\n input: number[],\n output: T[],\n options?: ExtrapolationType\n) => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const init = useMemo(() => factory(), []);\n const result = useSharedValue(init);\n useAnimatedReaction(\n () => value.value,\n (val) => {\n result.value = interpolator(val, input, output, options, result.value);\n notifyChange(result);\n },\n [input, output, options]\n );\n return result;\n};\n\nexport const usePathInterpolation = (\n value: SharedValue<number>,\n input: number[],\n outputRange: SkPath[],\n options?: ExtrapolationType\n) => {\n // Check if all paths in outputRange are interpolable\n const allPathsInterpolable = outputRange\n .slice(1)\n .every((path) => outputRange[0].isInterpolatable(path));\n if (!allPathsInterpolable) {\n // Handle the case where not all paths are interpolable\n // For example, throw an error or return early\n throw new Error(\n `Not all paths in the output range are interpolable.\nSee: https://shopify.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`\n );\n }\n return useInterpolator(\n () => Skia.Path.Make(),\n value,\n interpolatePaths,\n input,\n outputRange,\n options\n );\n};\n\nexport const useVectorInterpolation = (\n value: SharedValue<number>,\n input: number[],\n outputRange: SkPoint[],\n options?: ExtrapolationType\n) =>\n useInterpolator(\n () => Skia.Point(0, 0),\n value,\n interpolateVector,\n input,\n outputRange,\n options\n );\n"],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { ReactElement } from "react";
|
|
2
2
|
import type { SkPicture, SkSize } from "../skia/types";
|
|
3
|
+
export declare const isOnMainThread: () => boolean;
|
|
3
4
|
export declare const drawAsPicture: (element: ReactElement) => SkPicture;
|
|
4
5
|
export declare const drawAsImage: (element: ReactElement, size: SkSize) => import("../skia").SkImage;
|
|
5
6
|
export declare const drawAsImageFromPicture: (picture: SkPicture, size: SkSize) => import("../skia").SkImage;
|
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
import { JsiDrawingContext } from "../dom/types";
|
|
2
2
|
import { Skia } from "../skia";
|
|
3
|
+
import { Platform } from "../Platform";
|
|
3
4
|
import { SkiaRoot } from "./Reconciler";
|
|
5
|
+
|
|
6
|
+
// We call it main thread because on web main is JS thread
|
|
7
|
+
export const isOnMainThread = () => {
|
|
8
|
+
"worklet";
|
|
9
|
+
|
|
10
|
+
return typeof _WORKLET !== "undefined" && _WORKLET === true || Platform.OS === "web";
|
|
11
|
+
};
|
|
4
12
|
export const drawAsPicture = element => {
|
|
5
13
|
const recorder = Skia.PictureRecorder();
|
|
6
14
|
const canvas = recorder.beginRecording();
|
|
@@ -25,6 +33,12 @@ export const drawAsImageFromPicture = (picture, size) => {
|
|
|
25
33
|
canvas.scale(pd, pd);
|
|
26
34
|
canvas.drawPicture(picture);
|
|
27
35
|
surface.flush();
|
|
28
|
-
|
|
36
|
+
const image = surface.makeImageSnapshot();
|
|
37
|
+
// If we are not on the main thread, we need to make the image non-texture.
|
|
38
|
+
if (!isOnMainThread()) {
|
|
39
|
+
return image.makeNonTextureImage();
|
|
40
|
+
} else {
|
|
41
|
+
return image;
|
|
42
|
+
}
|
|
29
43
|
};
|
|
30
44
|
//# sourceMappingURL=Offscreen.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["JsiDrawingContext","Skia","SkiaRoot","drawAsPicture","element","recorder","PictureRecorder","canvas","beginRecording","root","render","ctx","dom","picture","finishRecordingAsPicture","drawAsImage","size","drawAsImageFromPicture","pd","surface","Surface","MakeOffscreen","width","height","getCanvas","scale","drawPicture","flush","makeImageSnapshot"],"sources":["Offscreen.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\nimport { JsiDrawingContext } from \"../dom/types\";\nimport type { SkPicture, SkSize } from \"../skia/types\";\nimport { Skia } from \"../skia\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\nexport const drawAsPicture = (element: ReactElement) => {\n const recorder = Skia.PictureRecorder();\n const canvas = recorder.beginRecording();\n const root = new SkiaRoot(Skia, false);\n root.render(element);\n const ctx = new JsiDrawingContext(Skia, canvas);\n root.dom.render(ctx);\n const picture = recorder.finishRecordingAsPicture();\n return picture;\n};\n\nexport const drawAsImage = (element: ReactElement, size: SkSize) => {\n return drawAsImageFromPicture(drawAsPicture(element), size);\n};\n\n// TODO: We're not sure yet why PixelRatio is not needed here.\nconst pd = 1;\nexport const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {\n \"worklet\";\n const surface = Skia.Surface.MakeOffscreen(\n size.width * pd,\n size.height * pd\n )!;\n const canvas = surface.getCanvas();\n canvas.scale(pd, pd);\n canvas.drawPicture(picture);\n surface.flush();\n
|
|
1
|
+
{"version":3,"names":["JsiDrawingContext","Skia","Platform","SkiaRoot","isOnMainThread","_WORKLET","OS","drawAsPicture","element","recorder","PictureRecorder","canvas","beginRecording","root","render","ctx","dom","picture","finishRecordingAsPicture","drawAsImage","size","drawAsImageFromPicture","pd","surface","Surface","MakeOffscreen","width","height","getCanvas","scale","drawPicture","flush","image","makeImageSnapshot","makeNonTextureImage"],"sources":["Offscreen.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\nimport { JsiDrawingContext } from \"../dom/types\";\nimport type { SkPicture, SkSize } from \"../skia/types\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\n// We call it main thread because on web main is JS thread\nexport const isOnMainThread = () => {\n \"worklet\";\n return (\n (typeof _WORKLET !== \"undefined\" && _WORKLET === true) ||\n Platform.OS === \"web\"\n );\n};\n\nexport const drawAsPicture = (element: ReactElement) => {\n const recorder = Skia.PictureRecorder();\n const canvas = recorder.beginRecording();\n const root = new SkiaRoot(Skia, false);\n root.render(element);\n const ctx = new JsiDrawingContext(Skia, canvas);\n root.dom.render(ctx);\n const picture = recorder.finishRecordingAsPicture();\n return picture;\n};\n\nexport const drawAsImage = (element: ReactElement, size: SkSize) => {\n return drawAsImageFromPicture(drawAsPicture(element), size);\n};\n\n// TODO: We're not sure yet why PixelRatio is not needed here.\nconst pd = 1;\nexport const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {\n \"worklet\";\n const surface = Skia.Surface.MakeOffscreen(\n size.width * pd,\n size.height * pd\n )!;\n const canvas = surface.getCanvas();\n canvas.scale(pd, pd);\n canvas.drawPicture(picture);\n surface.flush();\n const image = surface.makeImageSnapshot();\n // If we are not on the main thread, we need to make the image non-texture.\n if (!isOnMainThread()) {\n return image.makeNonTextureImage();\n } else {\n return image;\n }\n};\n"],"mappings":"AAEA,SAASA,iBAAiB,QAAQ,cAAc;AAEhD,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,QAAQ,QAAQ,aAAa;AAEtC,SAASC,QAAQ,QAAQ,cAAc;;AAEvC;AACA,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAClC,SAAS;;EACT,OACG,OAAOC,QAAQ,KAAK,WAAW,IAAIA,QAAQ,KAAK,IAAI,IACrDH,QAAQ,CAACI,EAAE,KAAK,KAAK;AAEzB,CAAC;AAED,OAAO,MAAMC,aAAa,GAAIC,OAAqB,IAAK;EACtD,MAAMC,QAAQ,GAAGR,IAAI,CAACS,eAAe,CAAC,CAAC;EACvC,MAAMC,MAAM,GAAGF,QAAQ,CAACG,cAAc,CAAC,CAAC;EACxC,MAAMC,IAAI,GAAG,IAAIV,QAAQ,CAACF,IAAI,EAAE,KAAK,CAAC;EACtCY,IAAI,CAACC,MAAM,CAACN,OAAO,CAAC;EACpB,MAAMO,GAAG,GAAG,IAAIf,iBAAiB,CAACC,IAAI,EAAEU,MAAM,CAAC;EAC/CE,IAAI,CAACG,GAAG,CAACF,MAAM,CAACC,GAAG,CAAC;EACpB,MAAME,OAAO,GAAGR,QAAQ,CAACS,wBAAwB,CAAC,CAAC;EACnD,OAAOD,OAAO;AAChB,CAAC;AAED,OAAO,MAAME,WAAW,GAAGA,CAACX,OAAqB,EAAEY,IAAY,KAAK;EAClE,OAAOC,sBAAsB,CAACd,aAAa,CAACC,OAAO,CAAC,EAAEY,IAAI,CAAC;AAC7D,CAAC;;AAED;AACA,MAAME,EAAE,GAAG,CAAC;AACZ,OAAO,MAAMD,sBAAsB,GAAGA,CAACJ,OAAkB,EAAEG,IAAY,KAAK;EAC1E,SAAS;;EACT,MAAMG,OAAO,GAAGtB,IAAI,CAACuB,OAAO,CAACC,aAAa,CACxCL,IAAI,CAACM,KAAK,GAAGJ,EAAE,EACfF,IAAI,CAACO,MAAM,GAAGL,EAChB,CAAE;EACF,MAAMX,MAAM,GAAGY,OAAO,CAACK,SAAS,CAAC,CAAC;EAClCjB,MAAM,CAACkB,KAAK,CAACP,EAAE,EAAEA,EAAE,CAAC;EACpBX,MAAM,CAACmB,WAAW,CAACb,OAAO,CAAC;EAC3BM,OAAO,CAACQ,KAAK,CAAC,CAAC;EACf,MAAMC,KAAK,GAAGT,OAAO,CAACU,iBAAiB,CAAC,CAAC;EACzC;EACA,IAAI,CAAC7B,cAAc,CAAC,CAAC,EAAE;IACrB,OAAO4B,KAAK,CAACE,mBAAmB,CAAC,CAAC;EACpC,CAAC,MAAM;IACL,OAAOF,KAAK;EACd;AACF,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
|
|
2
2
|
type Modifier<T> = (input: T, index: number) => void;
|
|
3
|
-
export declare const useRectBuffer: (size: number, modifier: Modifier<SkHostRect>) => import("react-native-reanimated").SharedValue<SkHostRect[]>;
|
|
4
|
-
export declare const useRSXformBuffer: (size: number, modifier: Modifier<SkRSXform>) => import("react-native-reanimated").SharedValue<SkRSXform[]>;
|
|
5
|
-
export declare const usePointBuffer: (size: number, modifier: Modifier<SkPoint>) => import("react-native-reanimated").SharedValue<SkPoint[]>;
|
|
6
|
-
export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated").SharedValue<Float32Array[]>;
|
|
3
|
+
export declare const useRectBuffer: (size: number, modifier: Modifier<SkHostRect>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkHostRect[]>;
|
|
4
|
+
export declare const useRSXformBuffer: (size: number, modifier: Modifier<SkRSXform>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkRSXform[]>;
|
|
5
|
+
export declare const usePointBuffer: (size: number, modifier: Modifier<SkPoint>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkPoint[]>;
|
|
6
|
+
export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<Float32Array[]>;
|
|
7
7
|
export {};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { ReactElement } from "react";
|
|
2
2
|
import type { SkPicture, SkSize } from "../skia/types";
|
|
3
|
+
export declare const isOnMainThread: () => boolean;
|
|
3
4
|
export declare const drawAsPicture: (element: ReactElement) => SkPicture;
|
|
4
5
|
export declare const drawAsImage: (element: ReactElement, size: SkSize) => import("../skia").SkImage;
|
|
5
6
|
export declare const drawAsImageFromPicture: (picture: SkPicture, size: SkSize) => import("../skia").SkImage;
|
package/package.json
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { useEffect, useMemo } from "react";
|
|
2
|
-
import { startMapper, stopMapper } from "react-native-reanimated";
|
|
3
2
|
import type { WorkletFunction } from "react-native-reanimated/lib/typescript/reanimated2/commonTypes";
|
|
4
3
|
|
|
5
4
|
import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
|
|
6
5
|
import { Skia } from "../../skia";
|
|
7
6
|
|
|
8
|
-
import { useSharedValue } from "./moduleWrapper";
|
|
7
|
+
import { startMapper, stopMapper, useSharedValue } from "./moduleWrapper";
|
|
9
8
|
import { notifyChange } from "./interpolators";
|
|
10
9
|
|
|
11
10
|
type Modifier<T> = (input: T, index: number) => void;
|
|
@@ -8,7 +8,7 @@ import { useCallback, useMemo } from "react";
|
|
|
8
8
|
import type { SkPath, SkPoint } from "../../skia/types";
|
|
9
9
|
import { interpolatePaths, interpolateVector } from "../../animation";
|
|
10
10
|
import { Skia } from "../../skia";
|
|
11
|
-
import {
|
|
11
|
+
import { isOnMainThread } from "../../renderer/Offscreen";
|
|
12
12
|
|
|
13
13
|
import {
|
|
14
14
|
useAnimatedReaction,
|
|
@@ -19,7 +19,7 @@ import {
|
|
|
19
19
|
|
|
20
20
|
export const notifyChange = (value: SharedValue<unknown>) => {
|
|
21
21
|
"worklet";
|
|
22
|
-
if (
|
|
22
|
+
if (isOnMainThread()) {
|
|
23
23
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
24
24
|
(value as any)._value = value.value;
|
|
25
25
|
}
|
|
@@ -3,9 +3,19 @@ import type { ReactElement } from "react";
|
|
|
3
3
|
import { JsiDrawingContext } from "../dom/types";
|
|
4
4
|
import type { SkPicture, SkSize } from "../skia/types";
|
|
5
5
|
import { Skia } from "../skia";
|
|
6
|
+
import { Platform } from "../Platform";
|
|
6
7
|
|
|
7
8
|
import { SkiaRoot } from "./Reconciler";
|
|
8
9
|
|
|
10
|
+
// We call it main thread because on web main is JS thread
|
|
11
|
+
export const isOnMainThread = () => {
|
|
12
|
+
"worklet";
|
|
13
|
+
return (
|
|
14
|
+
(typeof _WORKLET !== "undefined" && _WORKLET === true) ||
|
|
15
|
+
Platform.OS === "web"
|
|
16
|
+
);
|
|
17
|
+
};
|
|
18
|
+
|
|
9
19
|
export const drawAsPicture = (element: ReactElement) => {
|
|
10
20
|
const recorder = Skia.PictureRecorder();
|
|
11
21
|
const canvas = recorder.beginRecording();
|
|
@@ -33,5 +43,11 @@ export const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {
|
|
|
33
43
|
canvas.scale(pd, pd);
|
|
34
44
|
canvas.drawPicture(picture);
|
|
35
45
|
surface.flush();
|
|
36
|
-
|
|
46
|
+
const image = surface.makeImageSnapshot();
|
|
47
|
+
// If we are not on the main thread, we need to make the image non-texture.
|
|
48
|
+
if (!isOnMainThread()) {
|
|
49
|
+
return image.makeNonTextureImage();
|
|
50
|
+
} else {
|
|
51
|
+
return image;
|
|
52
|
+
}
|
|
37
53
|
};
|