@shopify/react-native-skia 0.1.240 → 0.1.241
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
};
|