@shopify/react-native-skia 0.1.238 → 0.1.239

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.
Files changed (22) hide show
  1. package/cpp/rnskia/dom/nodes/JsiAtlasNode.h +0 -1
  2. package/ios/RNSkia-iOS/RNSkiOSPlatformContext.h +4 -3
  3. package/ios/RNSkia-iOS/SkiaManager.h +3 -1
  4. package/ios/RNSkia-iOS/SkiaManager.mm +6 -5
  5. package/ios/RNSkiaModule.mm +7 -1
  6. package/lib/commonjs/external/reanimated/buffers.d.ts +6 -4
  7. package/lib/commonjs/external/reanimated/buffers.js +16 -6
  8. package/lib/commonjs/external/reanimated/buffers.js.map +1 -1
  9. package/lib/commonjs/external/reanimated/textures.d.ts +6 -3
  10. package/lib/commonjs/external/reanimated/textures.js +52 -7
  11. package/lib/commonjs/external/reanimated/textures.js.map +1 -1
  12. package/lib/module/external/reanimated/buffers.d.ts +6 -4
  13. package/lib/module/external/reanimated/buffers.js +18 -8
  14. package/lib/module/external/reanimated/buffers.js.map +1 -1
  15. package/lib/module/external/reanimated/textures.d.ts +6 -3
  16. package/lib/module/external/reanimated/textures.js +46 -4
  17. package/lib/module/external/reanimated/textures.js.map +1 -1
  18. package/lib/typescript/src/external/reanimated/buffers.d.ts +6 -4
  19. package/lib/typescript/src/external/reanimated/textures.d.ts +6 -3
  20. package/package.json +1 -1
  21. package/src/external/reanimated/buffers.ts +29 -26
  22. package/src/external/reanimated/textures.tsx +55 -6
package/cpp/rnskia/dom/nodes/JsiAtlasNode.h CHANGED
@@ -46,7 +46,6 @@ protected:
46
46
 
47
47
  _rectsProp->require();
48
48
  _rsxFormsProp->require();
49
- _imageProp->require();
50
49
  }
51
50
 
52
51
  private:
package/ios/RNSkia-iOS/RNSkiOSPlatformContext.h CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  #import <React/RCTBridge+Private.h>
4
4
  #import <React/RCTBridge.h>
5
- #import <ReactCommon/RCTTurboModule.h>
6
5
 
7
6
  #include <functional>
8
7
  #include <memory>
@@ -30,8 +29,10 @@ static void handleNotification(CFNotificationCenterRef center, void *observer,
30
29
 
31
30
  class RNSkiOSPlatformContext : public RNSkPlatformContext {
32
31
  public:
33
- RNSkiOSPlatformContext(jsi::Runtime *runtime, RCTBridge *bridge)
34
- : RNSkPlatformContext(runtime, bridge.jsCallInvoker,
32
+ RNSkiOSPlatformContext(
33
+ jsi::Runtime *runtime, RCTBridge *bridge,
34
+ std::shared_ptr<facebook::react::CallInvoker> jsCallInvoker)
35
+ : RNSkPlatformContext(runtime, jsCallInvoker,
35
36
  [[UIScreen mainScreen] scale]) {
36
37
 
37
38
  // We need to make sure we invalidate when modules are freed
package/ios/RNSkia-iOS/SkiaManager.h CHANGED
@@ -12,6 +12,8 @@
12
12
 
13
13
  - (void)invalidate;
14
14
 
15
- - (instancetype)initWithBridge:(RCTBridge *)bridge;
15
+ - (instancetype)initWithBridge:(RCTBridge *)bridge
16
+ jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)
17
+ jsInvoker;
16
18
 
17
19
  @end
package/ios/RNSkia-iOS/SkiaManager.mm CHANGED
@@ -6,8 +6,6 @@
6
6
  #import <React/RCTBridge.h>
7
7
  #import <React/RCTUIManager.h>
8
8
 
9
- #import <ReactCommon/RCTTurboModule.h>
10
-
11
9
  #import "RNSkiOSPlatformContext.h"
12
10
 
13
11
  @implementation SkiaManager {
@@ -26,7 +24,9 @@
26
24
  _skManager = nullptr;
27
25
  }
28
26
 
29
- - (instancetype)initWithBridge:(RCTBridge *)bridge {
27
+ - (instancetype)initWithBridge:(RCTBridge *)bridge
28
+ jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)
29
+ jsInvoker {
30
30
  self = [super init];
31
31
  if (self) {
32
32
  RCTCxxBridge *cxxBridge = (RCTCxxBridge *)bridge;
@@ -37,8 +37,9 @@
37
37
 
38
38
  // Create the RNSkiaManager (cross platform)
39
39
  _skManager = std::make_shared<RNSkia::RNSkManager>(
40
- jsRuntime, bridge.jsCallInvoker,
41
- std::make_shared<RNSkia::RNSkiOSPlatformContext>(jsRuntime, bridge));
40
+ jsRuntime, jsInvoker,
41
+ std::make_shared<RNSkia::RNSkiOSPlatformContext>(jsRuntime, bridge,
42
+ jsInvoker));
42
43
  }
43
44
  }
44
45
  return self;
package/ios/RNSkiaModule.mm CHANGED
@@ -1,9 +1,11 @@
1
1
 
2
2
  #import "RNSkiaModule.h"
3
3
  #import <React/RCTBridge+Private.h>
4
+ #import <ReactCommon/RCTTurboModule.h>
4
5
 
5
6
  @implementation RNSkiaModule {
6
7
  SkiaManager *skiaManager;
8
+ std::shared_ptr<facebook::react::CallInvoker> jsInvoker;
7
9
  }
8
10
 
9
11
  RCT_EXPORT_MODULE()
@@ -33,13 +35,17 @@ RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(install) {
33
35
  return @true;
34
36
  }
35
37
  RCTBridge *bridge = [RCTBridge currentBridge];
36
- skiaManager = [[SkiaManager alloc] initWithBridge:bridge];
38
+ if (!jsInvoker) {
39
+ jsInvoker = bridge.jsCallInvoker;
40
+ }
41
+ skiaManager = [[SkiaManager alloc] initWithBridge:bridge jsInvoker:jsInvoker];
37
42
  return @true;
38
43
  }
39
44
 
40
45
  #ifdef RCT_NEW_ARCH_ENABLED
41
46
  - (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
42
47
  (const facebook::react::ObjCTurboModule::InitParams &)params {
48
+ jsInvoker = params.jsInvoker;
43
49
  return std::make_shared<facebook::react::NativeSkiaModuleSpecJSI>(params);
44
50
  }
45
51
  #endif
package/lib/commonjs/external/reanimated/buffers.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
2
- export declare const useRectBuffer: (size: number, modifier: (input: SkHostRect, index: number) => void) => import("react-native-reanimated").SharedValue<SkHostRect[]>;
3
- export declare const useRSXformBuffer: (size: number, modifier: (input: SkRSXform, index: number) => void) => import("react-native-reanimated").SharedValue<SkRSXform[]>;
4
- export declare const usePointBuffer: (size: number, modifier: (input: SkPoint, index: number) => void) => import("react-native-reanimated").SharedValue<SkPoint[]>;
5
- export declare const useColorBuffer: (size: number, modifier: (input: SkColor, index: number) => void) => import("react-native-reanimated").SharedValue<Float32Array[]>;
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[]>;
7
+ export {};
package/lib/commonjs/external/reanimated/buffers.js CHANGED
@@ -5,22 +5,32 @@ 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");
8
9
  var _skia = require("../../skia");
9
10
  var _moduleWrapper = require("./moduleWrapper");
10
11
  var _interpolators = require("./interpolators");
11
12
  const useBuffer = (size, bufferInitializer, modifier) => {
13
+ var _mod$__closure;
12
14
  const buffer = (0, _react.useMemo)(() => new Array(size).fill(0).map(bufferInitializer),
13
15
  // eslint-disable-next-line react-hooks/exhaustive-deps
14
16
  [size]);
15
- const transforms = (0, _moduleWrapper.useSharedValue)(buffer);
16
- (0, _moduleWrapper.useDerivedValue)(() => {
17
+ const values = (0, _moduleWrapper.useSharedValue)(buffer);
18
+ const mod = modifier;
19
+ const deps = Object.values((_mod$__closure = mod.__closure) !== null && _mod$__closure !== void 0 ? _mod$__closure : {});
20
+ const mapperId = (0, _reactNativeReanimated.startMapper)(() => {
21
+ "worklet";
22
+
17
23
  buffer.forEach((val, index) => {
18
24
  modifier(val, index);
19
25
  });
20
- // Assuming notifyChange is a function that notifies about the change in transforms.
21
- (0, _interpolators.notifyChange)(transforms);
22
- });
23
- return transforms;
26
+ (0, _interpolators.notifyChange)(values);
27
+ }, deps);
28
+ (0, _react.useEffect)(() => {
29
+ return () => {
30
+ (0, _reactNativeReanimated.stopMapper)(mapperId);
31
+ };
32
+ }, [mapperId]);
33
+ return values;
24
34
  };
25
35
  const useRectBuffer = (size, modifier) => useBuffer(size, () => _skia.Skia.XYWHRect(0, 0, 0, 0), modifier);
26
36
 
package/lib/commonjs/external/reanimated/buffers.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_react","require","_skia","_moduleWrapper","_interpolators","useBuffer","size","bufferInitializer","modifier","buffer","useMemo","Array","fill","map","transforms","useSharedValue","useDerivedValue","forEach","val","index","notifyChange","useRectBuffer","Skia","XYWHRect","exports","useRSXformBuffer","RSXform","usePointBuffer","Point","useColorBuffer","Color"],"sources":["buffers.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { SkColor, SkHostRect, SkPoint, SkRSXform } from \"../../skia/types\";\nimport { Skia } from \"../../skia\";\n\nimport { useDerivedValue, useSharedValue } from \"./moduleWrapper\";\nimport { notifyChange } from \"./interpolators\";\n\nconst useBuffer = <T>(\n size: number,\n bufferInitializer: () => T,\n modifier: (input: T, index: number) => void\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 transforms = useSharedValue(buffer);\n\n useDerivedValue(() => {\n buffer.forEach((val, index) => {\n modifier(val, index);\n });\n // Assuming notifyChange is a function that notifies about the change in transforms.\n notifyChange(transforms);\n });\n\n return transforms;\n};\n\nexport const useRectBuffer = (\n size: number,\n modifier: (input: SkHostRect, index: number) => void\n) => useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);\n\n// Usage for RSXform Buffer\nexport const useRSXformBuffer = (\n size: number,\n modifier: (input: SkRSXform, index: number) => void\n) => useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);\n\n// Usage for Point Buffer\nexport const usePointBuffer = (\n size: number,\n modifier: (input: SkPoint, index: number) => void\n) => useBuffer(size, () => Skia.Point(0, 0), modifier);\n\n// Usage for Color Buffer\nexport const useColorBuffer = (\n size: number,\n modifier: (input: SkColor, index: number) => void\n) => useBuffer(size, () => Skia.Color(\"black\"), modifier);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAGA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAEA,MAAMI,SAAS,GAAGA,CAChBC,IAAY,EACZC,iBAA0B,EAC1BC,QAA2C,KACxC;EACH,MAAMC,MAAM,GAAG,IAAAC,cAAO,EACpB,MAAM,IAAIC,KAAK,CAACL,IAAI,CAAC,CAACM,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAACN,iBAAiB,CAAC;EACpD;EACA,CAACD,IAAI,CACP,CAAC;EACD,MAAMQ,UAAU,GAAG,IAAAC,6BAAc,EAACN,MAAM,CAAC;EAEzC,IAAAO,8BAAe,EAAC,MAAM;IACpBP,MAAM,CAACQ,OAAO,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;MAC7BX,QAAQ,CAACU,GAAG,EAAEC,KAAK,CAAC;IACtB,CAAC,CAAC;IACF;IACA,IAAAC,2BAAY,EAACN,UAAU,CAAC;EAC1B,CAAC,CAAC;EAEF,OAAOA,UAAU;AACnB,CAAC;AAEM,MAAMO,aAAa,GAAGA,CAC3Bf,IAAY,EACZE,QAAoD,KACjDH,SAAS,CAACC,IAAI,EAAE,MAAMgB,UAAI,CAACC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEf,QAAQ,CAAC;;AAE/D;AAAAgB,OAAA,CAAAH,aAAA,GAAAA,aAAA;AACO,MAAMI,gBAAgB,GAAGA,CAC9BnB,IAAY,EACZE,QAAmD,KAChDH,SAAS,CAACC,IAAI,EAAE,MAAMgB,UAAI,CAACI,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAElB,QAAQ,CAAC;;AAE9D;AAAAgB,OAAA,CAAAC,gBAAA,GAAAA,gBAAA;AACO,MAAME,cAAc,GAAGA,CAC5BrB,IAAY,EACZE,QAAiD,KAC9CH,SAAS,CAACC,IAAI,EAAE,MAAMgB,UAAI,CAACM,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAEpB,QAAQ,CAAC;;AAEtD;AAAAgB,OAAA,CAAAG,cAAA,GAAAA,cAAA;AACO,MAAME,cAAc,GAAGA,CAC5BvB,IAAY,EACZE,QAAiD,KAC9CH,SAAS,CAACC,IAAI,EAAE,MAAMgB,UAAI,CAACQ,KAAK,CAAC,OAAO,CAAC,EAAEtB,QAAQ,CAAC;AAACgB,OAAA,CAAAK,cAAA,GAAAA,cAAA"}
1
+ {"version":3,"names":["_react","require","_reactNativeReanimated","_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 { startMapper, stopMapper } from \"react-native-reanimated\";\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 { 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;AACA,IAAAC,sBAAA,GAAAD,OAAA;AAIA,IAAAE,KAAA,GAAAF,OAAA;AAEA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AAIA,MAAMK,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,kCAAW,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,iCAAU,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"}
package/lib/commonjs/external/reanimated/textures.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  import type { ReactElement } from "react";
2
2
  import type { SharedValue } from "react-native-reanimated";
3
- import type { SkImage, SkPicture, SkSize } from "../../skia/types";
4
- export declare const useTextureValue: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
5
- export declare const useTextureValueFromPicture: (picture: SkPicture, size: SkSize) => SharedValue<SkImage | null>;
3
+ import type { DataSourceParam, SkImage, SkPicture, SkSize } from "../../skia/types";
4
+ export declare const useTexture: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
5
+ export declare const useTextureAsValue: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
6
+ export declare const useTextureValueFromPicture: (picture: SkPicture | null, size: SkSize) => SharedValue<SkImage | null>;
7
+ export declare const usePictureAsTexture: (picture: SkPicture | null, size: SkSize) => SharedValue<SkImage | null>;
8
+ export declare const useImageAsTexture: (source: DataSourceParam) => SharedValue<SkImage | null>;
package/lib/commonjs/external/reanimated/textures.js CHANGED
@@ -3,28 +3,73 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useTextureValueFromPicture = exports.useTextureValue = void 0;
6
+ exports.useTextureValueFromPicture = exports.useTextureAsValue = exports.useTexture = exports.usePictureAsTexture = exports.useImageAsTexture = void 0;
7
7
  var _react = require("react");
8
8
  var _Offscreen = require("../../renderer/Offscreen");
9
+ var _skia = require("../../skia");
9
10
  var _moduleWrapper = require("./moduleWrapper");
10
- const createTextureValue = (texture, picture, size) => {
11
+ const createTexture = (texture, picture, size) => {
11
12
  "worklet";
12
13
 
13
14
  texture.value = (0, _Offscreen.drawAsImageFromPicture)(picture, size);
14
15
  };
15
- const useTextureValue = (element, size) => {
16
+ const useTexture = (element, size) => {
16
17
  const picture = (0, _react.useMemo)(() => {
17
18
  return (0, _Offscreen.drawAsPicture)(element);
18
19
  }, [element]);
19
- return useTextureValueFromPicture(picture, size);
20
+ return usePictureAsTexture(picture, size);
20
21
  };
21
- exports.useTextureValue = useTextureValue;
22
+ exports.useTexture = useTexture;
23
+ const useTextureAsValue = (element, size) => {
24
+ console.warn("useTextureAsValue has been renamed to use useTexture");
25
+ return useTexture(element, size);
26
+ };
27
+ exports.useTextureAsValue = useTextureAsValue;
22
28
  const useTextureValueFromPicture = (picture, size) => {
29
+ console.warn("useTextureValueFromPicture has been renamed to use usePictureAsTexture");
30
+ return usePictureAsTexture(picture, size);
31
+ };
32
+ exports.useTextureValueFromPicture = useTextureValueFromPicture;
33
+ const usePictureAsTexture = (picture, size) => {
23
34
  const texture = (0, _moduleWrapper.useSharedValue)(null);
24
35
  (0, _react.useEffect)(() => {
25
- (0, _moduleWrapper.runOnUI)(createTextureValue)(texture, picture, size);
36
+ if (picture !== null) {
37
+ (0, _moduleWrapper.runOnUI)(createTexture)(texture, picture, size);
38
+ }
26
39
  }, [texture, picture, size]);
27
40
  return texture;
28
41
  };
29
- exports.useTextureValueFromPicture = useTextureValueFromPicture;
42
+ exports.usePictureAsTexture = usePictureAsTexture;
43
+ const useImageAsTexture = source => {
44
+ const image = (0, _skia.useImage)(source);
45
+ const size = (0, _react.useMemo)(() => {
46
+ if (image) {
47
+ return {
48
+ width: image.width(),
49
+ height: image.height()
50
+ };
51
+ }
52
+ return {
53
+ width: 0,
54
+ height: 0
55
+ };
56
+ }, [image]);
57
+ const picture = (0, _react.useMemo)(() => {
58
+ if (image) {
59
+ const recorder = _skia.Skia.PictureRecorder();
60
+ const canvas = recorder.beginRecording({
61
+ x: 0,
62
+ y: 0,
63
+ width: size.width,
64
+ height: size.height
65
+ });
66
+ canvas.drawImage(image, 0, 0);
67
+ return recorder.finishRecordingAsPicture();
68
+ } else {
69
+ return null;
70
+ }
71
+ }, [size, image]);
72
+ return usePictureAsTexture(picture, size);
73
+ };
74
+ exports.useImageAsTexture = useImageAsTexture;
30
75
  //# sourceMappingURL=textures.js.map
package/lib/commonjs/external/reanimated/textures.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_react","require","_Offscreen","_moduleWrapper","createTextureValue","texture","picture","size","value","drawAsImageFromPicture","useTextureValue","element","useMemo","drawAsPicture","useTextureValueFromPicture","exports","useSharedValue","useEffect","runOnUI"],"sources":["textures.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { ReactElement } from \"react\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport type { SkImage, SkPicture, SkSize } from \"../../skia/types\";\nimport {\n drawAsImageFromPicture,\n drawAsPicture,\n} from \"../../renderer/Offscreen\";\n\nimport { runOnUI, useSharedValue } from \"./moduleWrapper\";\n\nconst createTextureValue = (\n texture: SharedValue<SkImage | null>,\n picture: SkPicture,\n size: SkSize\n) => {\n \"worklet\";\n texture.value = drawAsImageFromPicture(picture, size);\n};\n\nexport const useTextureValue = (element: ReactElement, size: SkSize) => {\n const picture = useMemo(() => {\n return drawAsPicture(element);\n }, [element]);\n return useTextureValueFromPicture(picture, size);\n};\n\nexport const useTextureValueFromPicture = (\n picture: SkPicture,\n size: SkSize\n) => {\n const texture = useSharedValue<SkImage | null>(null);\n useEffect(() => {\n runOnUI(createTextureValue)(texture, picture, size);\n }, [texture, picture, size]);\n return texture;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,UAAA,GAAAD,OAAA;AAKA,IAAAE,cAAA,GAAAF,OAAA;AAEA,MAAMG,kBAAkB,GAAGA,CACzBC,OAAoC,EACpCC,OAAkB,EAClBC,IAAY,KACT;EACH,SAAS;;EACTF,OAAO,CAACG,KAAK,GAAG,IAAAC,iCAAsB,EAACH,OAAO,EAAEC,IAAI,CAAC;AACvD,CAAC;AAEM,MAAMG,eAAe,GAAGA,CAACC,OAAqB,EAAEJ,IAAY,KAAK;EACtE,MAAMD,OAAO,GAAG,IAAAM,cAAO,EAAC,MAAM;IAC5B,OAAO,IAAAC,wBAAa,EAACF,OAAO,CAAC;EAC/B,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EACb,OAAOG,0BAA0B,CAACR,OAAO,EAAEC,IAAI,CAAC;AAClD,CAAC;AAACQ,OAAA,CAAAL,eAAA,GAAAA,eAAA;AAEK,MAAMI,0BAA0B,GAAGA,CACxCR,OAAkB,EAClBC,IAAY,KACT;EACH,MAAMF,OAAO,GAAG,IAAAW,6BAAc,EAAiB,IAAI,CAAC;EACpD,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAAC,sBAAO,EAACd,kBAAkB,CAAC,CAACC,OAAO,EAAEC,OAAO,EAAEC,IAAI,CAAC;EACrD,CAAC,EAAE,CAACF,OAAO,EAAEC,OAAO,EAAEC,IAAI,CAAC,CAAC;EAC5B,OAAOF,OAAO;AAChB,CAAC;AAACU,OAAA,CAAAD,0BAAA,GAAAA,0BAAA"}
1
+ {"version":3,"names":["_react","require","_Offscreen","_skia","_moduleWrapper","createTexture","texture","picture","size","value","drawAsImageFromPicture","useTexture","element","useMemo","drawAsPicture","usePictureAsTexture","exports","useTextureAsValue","console","warn","useTextureValueFromPicture","useSharedValue","useEffect","runOnUI","useImageAsTexture","source","image","useImage","width","height","recorder","Skia","PictureRecorder","canvas","beginRecording","x","y","drawImage","finishRecordingAsPicture"],"sources":["textures.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { ReactElement } from \"react\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport type {\n DataSourceParam,\n SkImage,\n SkPicture,\n SkSize,\n} from \"../../skia/types\";\nimport {\n drawAsImageFromPicture,\n drawAsPicture,\n} from \"../../renderer/Offscreen\";\nimport { Skia, useImage } from \"../../skia\";\n\nimport { runOnUI, useSharedValue } from \"./moduleWrapper\";\n\nconst createTexture = (\n texture: SharedValue<SkImage | null>,\n picture: SkPicture,\n size: SkSize\n) => {\n \"worklet\";\n texture.value = drawAsImageFromPicture(picture, size);\n};\n\nexport const useTexture = (element: ReactElement, size: SkSize) => {\n const picture = useMemo(() => {\n return drawAsPicture(element);\n }, [element]);\n return usePictureAsTexture(picture, size);\n};\n\nexport const useTextureAsValue = (element: ReactElement, size: SkSize) => {\n console.warn(\"useTextureAsValue has been renamed to use useTexture\");\n return useTexture(element, size);\n};\n\nexport const useTextureValueFromPicture = (\n picture: SkPicture | null,\n size: SkSize\n) => {\n console.warn(\n \"useTextureValueFromPicture has been renamed to use usePictureAsTexture\"\n );\n return usePictureAsTexture(picture, size);\n};\n\nexport const usePictureAsTexture = (\n picture: SkPicture | null,\n size: SkSize\n) => {\n const texture = useSharedValue<SkImage | null>(null);\n useEffect(() => {\n if (picture !== null) {\n runOnUI(createTexture)(texture, picture, size);\n }\n }, [texture, picture, size]);\n return texture;\n};\n\nexport const useImageAsTexture = (source: DataSourceParam) => {\n const image = useImage(source);\n const size = useMemo(() => {\n if (image) {\n return { width: image.width(), height: image.height() };\n }\n return { width: 0, height: 0 };\n }, [image]);\n const picture = useMemo(() => {\n if (image) {\n const recorder = Skia.PictureRecorder();\n const canvas = recorder.beginRecording({\n x: 0,\n y: 0,\n width: size.width,\n height: size.height,\n });\n canvas.drawImage(image, 0, 0);\n return recorder.finishRecordingAsPicture();\n } else {\n return null;\n }\n }, [size, image]);\n return usePictureAsTexture(picture, size);\n};\n"],"mappings":"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"}
package/lib/module/external/reanimated/buffers.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
2
- export declare const useRectBuffer: (size: number, modifier: (input: SkHostRect, index: number) => void) => import("react-native-reanimated").SharedValue<SkHostRect[]>;
3
- export declare const useRSXformBuffer: (size: number, modifier: (input: SkRSXform, index: number) => void) => import("react-native-reanimated").SharedValue<SkRSXform[]>;
4
- export declare const usePointBuffer: (size: number, modifier: (input: SkPoint, index: number) => void) => import("react-native-reanimated").SharedValue<SkPoint[]>;
5
- export declare const useColorBuffer: (size: number, modifier: (input: SkColor, index: number) => void) => import("react-native-reanimated").SharedValue<Float32Array[]>;
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[]>;
7
+ export {};
package/lib/module/external/reanimated/buffers.js CHANGED
@@ -1,20 +1,30 @@
1
- import { useMemo } from "react";
1
+ import { useEffect, useMemo } from "react";
2
+ import { startMapper, stopMapper } from "react-native-reanimated";
2
3
  import { Skia } from "../../skia";
3
- import { useDerivedValue, useSharedValue } from "./moduleWrapper";
4
+ import { useSharedValue } from "./moduleWrapper";
4
5
  import { notifyChange } from "./interpolators";
5
6
  const useBuffer = (size, bufferInitializer, modifier) => {
7
+ var _mod$__closure;
6
8
  const buffer = useMemo(() => new Array(size).fill(0).map(bufferInitializer),
7
9
  // eslint-disable-next-line react-hooks/exhaustive-deps
8
10
  [size]);
9
- const transforms = useSharedValue(buffer);
10
- useDerivedValue(() => {
11
+ const values = useSharedValue(buffer);
12
+ const mod = modifier;
13
+ const deps = Object.values((_mod$__closure = mod.__closure) !== null && _mod$__closure !== void 0 ? _mod$__closure : {});
14
+ const mapperId = startMapper(() => {
15
+ "worklet";
16
+
11
17
  buffer.forEach((val, index) => {
12
18
  modifier(val, index);
13
19
  });
14
- // Assuming notifyChange is a function that notifies about the change in transforms.
15
- notifyChange(transforms);
16
- });
17
- return transforms;
20
+ notifyChange(values);
21
+ }, deps);
22
+ useEffect(() => {
23
+ return () => {
24
+ stopMapper(mapperId);
25
+ };
26
+ }, [mapperId]);
27
+ return values;
18
28
  };
19
29
  export const useRectBuffer = (size, modifier) => useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);
20
30
 
package/lib/module/external/reanimated/buffers.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["useMemo","Skia","useDerivedValue","useSharedValue","notifyChange","useBuffer","size","bufferInitializer","modifier","buffer","Array","fill","map","transforms","forEach","val","index","useRectBuffer","XYWHRect","useRSXformBuffer","RSXform","usePointBuffer","Point","useColorBuffer","Color"],"sources":["buffers.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { SkColor, SkHostRect, SkPoint, SkRSXform } from \"../../skia/types\";\nimport { Skia } from \"../../skia\";\n\nimport { useDerivedValue, useSharedValue } from \"./moduleWrapper\";\nimport { notifyChange } from \"./interpolators\";\n\nconst useBuffer = <T>(\n size: number,\n bufferInitializer: () => T,\n modifier: (input: T, index: number) => void\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 transforms = useSharedValue(buffer);\n\n useDerivedValue(() => {\n buffer.forEach((val, index) => {\n modifier(val, index);\n });\n // Assuming notifyChange is a function that notifies about the change in transforms.\n notifyChange(transforms);\n });\n\n return transforms;\n};\n\nexport const useRectBuffer = (\n size: number,\n modifier: (input: SkHostRect, index: number) => void\n) => useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);\n\n// Usage for RSXform Buffer\nexport const useRSXformBuffer = (\n size: number,\n modifier: (input: SkRSXform, index: number) => void\n) => useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);\n\n// Usage for Point Buffer\nexport const usePointBuffer = (\n size: number,\n modifier: (input: SkPoint, index: number) => void\n) => useBuffer(size, () => Skia.Point(0, 0), modifier);\n\n// Usage for Color Buffer\nexport const useColorBuffer = (\n size: number,\n modifier: (input: SkColor, index: number) => void\n) => useBuffer(size, () => Skia.Color(\"black\"), modifier);\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAG/B,SAASC,IAAI,QAAQ,YAAY;AAEjC,SAASC,eAAe,EAAEC,cAAc,QAAQ,iBAAiB;AACjE,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,MAAMC,SAAS,GAAGA,CAChBC,IAAY,EACZC,iBAA0B,EAC1BC,QAA2C,KACxC;EACH,MAAMC,MAAM,GAAGT,OAAO,CACpB,MAAM,IAAIU,KAAK,CAACJ,IAAI,CAAC,CAACK,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAACL,iBAAiB,CAAC;EACpD;EACA,CAACD,IAAI,CACP,CAAC;EACD,MAAMO,UAAU,GAAGV,cAAc,CAACM,MAAM,CAAC;EAEzCP,eAAe,CAAC,MAAM;IACpBO,MAAM,CAACK,OAAO,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;MAC7BR,QAAQ,CAACO,GAAG,EAAEC,KAAK,CAAC;IACtB,CAAC,CAAC;IACF;IACAZ,YAAY,CAACS,UAAU,CAAC;EAC1B,CAAC,CAAC;EAEF,OAAOA,UAAU;AACnB,CAAC;AAED,OAAO,MAAMI,aAAa,GAAGA,CAC3BX,IAAY,EACZE,QAAoD,KACjDH,SAAS,CAACC,IAAI,EAAE,MAAML,IAAI,CAACiB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEV,QAAQ,CAAC;;AAE/D;AACA,OAAO,MAAMW,gBAAgB,GAAGA,CAC9Bb,IAAY,EACZE,QAAmD,KAChDH,SAAS,CAACC,IAAI,EAAE,MAAML,IAAI,CAACmB,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEZ,QAAQ,CAAC;;AAE9D;AACA,OAAO,MAAMa,cAAc,GAAGA,CAC5Bf,IAAY,EACZE,QAAiD,KAC9CH,SAAS,CAACC,IAAI,EAAE,MAAML,IAAI,CAACqB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAEd,QAAQ,CAAC;;AAEtD;AACA,OAAO,MAAMe,cAAc,GAAGA,CAC5BjB,IAAY,EACZE,QAAiD,KAC9CH,SAAS,CAACC,IAAI,EAAE,MAAML,IAAI,CAACuB,KAAK,CAAC,OAAO,CAAC,EAAEhB,QAAQ,CAAC"}
1
+ {"version":3,"names":["useEffect","useMemo","startMapper","stopMapper","Skia","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 { startMapper, stopMapper } from \"react-native-reanimated\";\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 { 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;AAC1C,SAASC,WAAW,EAAEC,UAAU,QAAQ,yBAAyB;AAIjE,SAASC,IAAI,QAAQ,YAAY;AAEjC,SAASC,cAAc,QAAQ,iBAAiB;AAChD,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,GAAGnB,WAAW,CAAC,MAAM;IACjC,SAAS;;IACTU,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;MACXG,UAAU,CAACkB,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,MAAMJ,IAAI,CAACsB,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,MAAMJ,IAAI,CAACwB,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,MAAMJ,IAAI,CAAC0B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAEpB,QAAQ,CAAC;;AAEnD;AACA,OAAO,MAAMqB,cAAc,GAAGA,CAACvB,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,MAAMJ,IAAI,CAAC4B,KAAK,CAAC,OAAO,CAAC,EAAEtB,QAAQ,CAAC"}
package/lib/module/external/reanimated/textures.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  import type { ReactElement } from "react";
2
2
  import type { SharedValue } from "react-native-reanimated";
3
- import type { SkImage, SkPicture, SkSize } from "../../skia/types";
4
- export declare const useTextureValue: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
5
- export declare const useTextureValueFromPicture: (picture: SkPicture, size: SkSize) => SharedValue<SkImage | null>;
3
+ import type { DataSourceParam, SkImage, SkPicture, SkSize } from "../../skia/types";
4
+ export declare const useTexture: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
5
+ export declare const useTextureAsValue: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
6
+ export declare const useTextureValueFromPicture: (picture: SkPicture | null, size: SkSize) => SharedValue<SkImage | null>;
7
+ export declare const usePictureAsTexture: (picture: SkPicture | null, size: SkSize) => SharedValue<SkImage | null>;
8
+ export declare const useImageAsTexture: (source: DataSourceParam) => SharedValue<SkImage | null>;
package/lib/module/external/reanimated/textures.js CHANGED
@@ -1,22 +1,64 @@
1
1
  import { useEffect, useMemo } from "react";
2
2
  import { drawAsImageFromPicture, drawAsPicture } from "../../renderer/Offscreen";
3
+ import { Skia, useImage } from "../../skia";
3
4
  import { runOnUI, useSharedValue } from "./moduleWrapper";
4
- const createTextureValue = (texture, picture, size) => {
5
+ const createTexture = (texture, picture, size) => {
5
6
  "worklet";
6
7
 
7
8
  texture.value = drawAsImageFromPicture(picture, size);
8
9
  };
9
- export const useTextureValue = (element, size) => {
10
+ export const useTexture = (element, size) => {
10
11
  const picture = useMemo(() => {
11
12
  return drawAsPicture(element);
12
13
  }, [element]);
13
- return useTextureValueFromPicture(picture, size);
14
+ return usePictureAsTexture(picture, size);
15
+ };
16
+ export const useTextureAsValue = (element, size) => {
17
+ console.warn("useTextureAsValue has been renamed to use useTexture");
18
+ return useTexture(element, size);
14
19
  };
15
20
  export const useTextureValueFromPicture = (picture, size) => {
21
+ console.warn("useTextureValueFromPicture has been renamed to use usePictureAsTexture");
22
+ return usePictureAsTexture(picture, size);
23
+ };
24
+ export const usePictureAsTexture = (picture, size) => {
16
25
  const texture = useSharedValue(null);
17
26
  useEffect(() => {
18
- runOnUI(createTextureValue)(texture, picture, size);
27
+ if (picture !== null) {
28
+ runOnUI(createTexture)(texture, picture, size);
29
+ }
19
30
  }, [texture, picture, size]);
20
31
  return texture;
21
32
  };
33
+ export const useImageAsTexture = source => {
34
+ const image = useImage(source);
35
+ const size = useMemo(() => {
36
+ if (image) {
37
+ return {
38
+ width: image.width(),
39
+ height: image.height()
40
+ };
41
+ }
42
+ return {
43
+ width: 0,
44
+ height: 0
45
+ };
46
+ }, [image]);
47
+ const picture = useMemo(() => {
48
+ if (image) {
49
+ const recorder = Skia.PictureRecorder();
50
+ const canvas = recorder.beginRecording({
51
+ x: 0,
52
+ y: 0,
53
+ width: size.width,
54
+ height: size.height
55
+ });
56
+ canvas.drawImage(image, 0, 0);
57
+ return recorder.finishRecordingAsPicture();
58
+ } else {
59
+ return null;
60
+ }
61
+ }, [size, image]);
62
+ return usePictureAsTexture(picture, size);
63
+ };
22
64
  //# sourceMappingURL=textures.js.map
package/lib/module/external/reanimated/textures.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["useEffect","useMemo","drawAsImageFromPicture","drawAsPicture","runOnUI","useSharedValue","createTextureValue","texture","picture","size","value","useTextureValue","element","useTextureValueFromPicture"],"sources":["textures.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { ReactElement } from \"react\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport type { SkImage, SkPicture, SkSize } from \"../../skia/types\";\nimport {\n drawAsImageFromPicture,\n drawAsPicture,\n} from \"../../renderer/Offscreen\";\n\nimport { runOnUI, useSharedValue } from \"./moduleWrapper\";\n\nconst createTextureValue = (\n texture: SharedValue<SkImage | null>,\n picture: SkPicture,\n size: SkSize\n) => {\n \"worklet\";\n texture.value = drawAsImageFromPicture(picture, size);\n};\n\nexport const useTextureValue = (element: ReactElement, size: SkSize) => {\n const picture = useMemo(() => {\n return drawAsPicture(element);\n }, [element]);\n return useTextureValueFromPicture(picture, size);\n};\n\nexport const useTextureValueFromPicture = (\n picture: SkPicture,\n size: SkSize\n) => {\n const texture = useSharedValue<SkImage | null>(null);\n useEffect(() => {\n runOnUI(createTextureValue)(texture, picture, size);\n }, [texture, picture, size]);\n return texture;\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAK1C,SACEC,sBAAsB,EACtBC,aAAa,QACR,0BAA0B;AAEjC,SAASC,OAAO,EAAEC,cAAc,QAAQ,iBAAiB;AAEzD,MAAMC,kBAAkB,GAAGA,CACzBC,OAAoC,EACpCC,OAAkB,EAClBC,IAAY,KACT;EACH,SAAS;;EACTF,OAAO,CAACG,KAAK,GAAGR,sBAAsB,CAACM,OAAO,EAAEC,IAAI,CAAC;AACvD,CAAC;AAED,OAAO,MAAME,eAAe,GAAGA,CAACC,OAAqB,EAAEH,IAAY,KAAK;EACtE,MAAMD,OAAO,GAAGP,OAAO,CAAC,MAAM;IAC5B,OAAOE,aAAa,CAACS,OAAO,CAAC;EAC/B,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EACb,OAAOC,0BAA0B,CAACL,OAAO,EAAEC,IAAI,CAAC;AAClD,CAAC;AAED,OAAO,MAAMI,0BAA0B,GAAGA,CACxCL,OAAkB,EAClBC,IAAY,KACT;EACH,MAAMF,OAAO,GAAGF,cAAc,CAAiB,IAAI,CAAC;EACpDL,SAAS,CAAC,MAAM;IACdI,OAAO,CAACE,kBAAkB,CAAC,CAACC,OAAO,EAAEC,OAAO,EAAEC,IAAI,CAAC;EACrD,CAAC,EAAE,CAACF,OAAO,EAAEC,OAAO,EAAEC,IAAI,CAAC,CAAC;EAC5B,OAAOF,OAAO;AAChB,CAAC"}
1
+ {"version":3,"names":["useEffect","useMemo","drawAsImageFromPicture","drawAsPicture","Skia","useImage","runOnUI","useSharedValue","createTexture","texture","picture","size","value","useTexture","element","usePictureAsTexture","useTextureAsValue","console","warn","useTextureValueFromPicture","useImageAsTexture","source","image","width","height","recorder","PictureRecorder","canvas","beginRecording","x","y","drawImage","finishRecordingAsPicture"],"sources":["textures.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { ReactElement } from \"react\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport type {\n DataSourceParam,\n SkImage,\n SkPicture,\n SkSize,\n} from \"../../skia/types\";\nimport {\n drawAsImageFromPicture,\n drawAsPicture,\n} from \"../../renderer/Offscreen\";\nimport { Skia, useImage } from \"../../skia\";\n\nimport { runOnUI, useSharedValue } from \"./moduleWrapper\";\n\nconst createTexture = (\n texture: SharedValue<SkImage | null>,\n picture: SkPicture,\n size: SkSize\n) => {\n \"worklet\";\n texture.value = drawAsImageFromPicture(picture, size);\n};\n\nexport const useTexture = (element: ReactElement, size: SkSize) => {\n const picture = useMemo(() => {\n return drawAsPicture(element);\n }, [element]);\n return usePictureAsTexture(picture, size);\n};\n\nexport const useTextureAsValue = (element: ReactElement, size: SkSize) => {\n console.warn(\"useTextureAsValue has been renamed to use useTexture\");\n return useTexture(element, size);\n};\n\nexport const useTextureValueFromPicture = (\n picture: SkPicture | null,\n size: SkSize\n) => {\n console.warn(\n \"useTextureValueFromPicture has been renamed to use usePictureAsTexture\"\n );\n return usePictureAsTexture(picture, size);\n};\n\nexport const usePictureAsTexture = (\n picture: SkPicture | null,\n size: SkSize\n) => {\n const texture = useSharedValue<SkImage | null>(null);\n useEffect(() => {\n if (picture !== null) {\n runOnUI(createTexture)(texture, picture, size);\n }\n }, [texture, picture, size]);\n return texture;\n};\n\nexport const useImageAsTexture = (source: DataSourceParam) => {\n const image = useImage(source);\n const size = useMemo(() => {\n if (image) {\n return { width: image.width(), height: image.height() };\n }\n return { width: 0, height: 0 };\n }, [image]);\n const picture = useMemo(() => {\n if (image) {\n const recorder = Skia.PictureRecorder();\n const canvas = recorder.beginRecording({\n x: 0,\n y: 0,\n width: size.width,\n height: size.height,\n });\n canvas.drawImage(image, 0, 0);\n return recorder.finishRecordingAsPicture();\n } else {\n return null;\n }\n }, [size, image]);\n return usePictureAsTexture(picture, size);\n};\n"],"mappings":"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"}
package/lib/typescript/src/external/reanimated/buffers.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
2
- export declare const useRectBuffer: (size: number, modifier: (input: SkHostRect, index: number) => void) => import("react-native-reanimated").SharedValue<SkHostRect[]>;
3
- export declare const useRSXformBuffer: (size: number, modifier: (input: SkRSXform, index: number) => void) => import("react-native-reanimated").SharedValue<SkRSXform[]>;
4
- export declare const usePointBuffer: (size: number, modifier: (input: SkPoint, index: number) => void) => import("react-native-reanimated").SharedValue<SkPoint[]>;
5
- export declare const useColorBuffer: (size: number, modifier: (input: SkColor, index: number) => void) => import("react-native-reanimated").SharedValue<Float32Array[]>;
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[]>;
7
+ export {};
package/lib/typescript/src/external/reanimated/textures.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  import type { ReactElement } from "react";
2
2
  import type { SharedValue } from "react-native-reanimated";
3
- import type { SkImage, SkPicture, SkSize } from "../../skia/types";
4
- export declare const useTextureValue: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
5
- export declare const useTextureValueFromPicture: (picture: SkPicture, size: SkSize) => SharedValue<SkImage | null>;
3
+ import type { DataSourceParam, SkImage, SkPicture, SkSize } from "../../skia/types";
4
+ export declare const useTexture: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
5
+ export declare const useTextureAsValue: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
6
+ export declare const useTextureValueFromPicture: (picture: SkPicture | null, size: SkSize) => SharedValue<SkImage | null>;
7
+ export declare const usePictureAsTexture: (picture: SkPicture | null, size: SkSize) => SharedValue<SkImage | null>;
8
+ export declare const useImageAsTexture: (source: DataSourceParam) => SharedValue<SkImage | null>;
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "setup-skia-web": "./scripts/setup-canvaskit.js"
8
8
  },
9
9
  "title": "React Native Skia",
10
- "version": "0.1.238",
10
+ "version": "0.1.239",
11
11
  "description": "High-performance React Native Graphics using Skia",
12
12
  "main": "lib/module/index.js",
13
13
  "files": [
package/src/external/reanimated/buffers.ts CHANGED
@@ -1,53 +1,56 @@
1
- import { useMemo } from "react";
1
+ import { useEffect, useMemo } from "react";
2
+ import { startMapper, stopMapper } from "react-native-reanimated";
3
+ import type { WorkletFunction } from "react-native-reanimated/lib/typescript/reanimated2/commonTypes";
2
4
 
3
5
  import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
4
6
  import { Skia } from "../../skia";
5
7
 
6
- import { useDerivedValue, useSharedValue } from "./moduleWrapper";
8
+ import { useSharedValue } from "./moduleWrapper";
7
9
  import { notifyChange } from "./interpolators";
8
10
 
11
+ type Modifier<T> = (input: T, index: number) => void;
12
+
9
13
  const useBuffer = <T>(
10
14
  size: number,
11
15
  bufferInitializer: () => T,
12
- modifier: (input: T, index: number) => void
16
+ modifier: Modifier<T>
13
17
  ) => {
14
18
  const buffer = useMemo(
15
19
  () => new Array(size).fill(0).map(bufferInitializer),
16
20
  // eslint-disable-next-line react-hooks/exhaustive-deps
17
21
  [size]
18
22
  );
19
- const transforms = useSharedValue(buffer);
20
-
21
- useDerivedValue(() => {
23
+ const values = useSharedValue(buffer);
24
+ const mod = modifier as WorkletFunction;
25
+ const deps = Object.values(mod.__closure ?? {});
26
+ const mapperId = startMapper(() => {
27
+ "worklet";
22
28
  buffer.forEach((val, index) => {
23
29
  modifier(val, index);
24
30
  });
25
- // Assuming notifyChange is a function that notifies about the change in transforms.
26
- notifyChange(transforms);
27
- });
31
+ notifyChange(values);
32
+ }, deps);
28
33
 
29
- return transforms;
34
+ useEffect(() => {
35
+ return () => {
36
+ stopMapper(mapperId);
37
+ };
38
+ }, [mapperId]);
39
+
40
+ return values;
30
41
  };
31
42
 
32
- export const useRectBuffer = (
33
- size: number,
34
- modifier: (input: SkHostRect, index: number) => void
35
- ) => useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);
43
+ export const useRectBuffer = (size: number, modifier: Modifier<SkHostRect>) =>
44
+ useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);
36
45
 
37
46
  // Usage for RSXform Buffer
38
- export const useRSXformBuffer = (
39
- size: number,
40
- modifier: (input: SkRSXform, index: number) => void
41
- ) => useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);
47
+ export const useRSXformBuffer = (size: number, modifier: Modifier<SkRSXform>) =>
48
+ useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);
42
49
 
43
50
  // Usage for Point Buffer
44
- export const usePointBuffer = (
45
- size: number,
46
- modifier: (input: SkPoint, index: number) => void
47
- ) => useBuffer(size, () => Skia.Point(0, 0), modifier);
51
+ export const usePointBuffer = (size: number, modifier: Modifier<SkPoint>) =>
52
+ useBuffer(size, () => Skia.Point(0, 0), modifier);
48
53
 
49
54
  // Usage for Color Buffer
50
- export const useColorBuffer = (
51
- size: number,
52
- modifier: (input: SkColor, index: number) => void
53
- ) => useBuffer(size, () => Skia.Color("black"), modifier);
55
+ export const useColorBuffer = (size: number, modifier: Modifier<SkColor>) =>
56
+ useBuffer(size, () => Skia.Color("black"), modifier);
package/src/external/reanimated/textures.tsx CHANGED
@@ -2,15 +2,21 @@ import { useEffect, useMemo } from "react";
2
2
  import type { ReactElement } from "react";
3
3
  import type { SharedValue } from "react-native-reanimated";
4
4
 
5
- import type { SkImage, SkPicture, SkSize } from "../../skia/types";
5
+ import type {
6
+ DataSourceParam,
7
+ SkImage,
8
+ SkPicture,
9
+ SkSize,
10
+ } from "../../skia/types";
6
11
  import {
7
12
  drawAsImageFromPicture,
8
13
  drawAsPicture,
9
14
  } from "../../renderer/Offscreen";
15
+ import { Skia, useImage } from "../../skia";
10
16
 
11
17
  import { runOnUI, useSharedValue } from "./moduleWrapper";
12
18
 
13
- const createTextureValue = (
19
+ const createTexture = (
14
20
  texture: SharedValue<SkImage | null>,
15
21
  picture: SkPicture,
16
22
  size: SkSize
@@ -19,20 +25,63 @@ const createTextureValue = (
19
25
  texture.value = drawAsImageFromPicture(picture, size);
20
26
  };
21
27
 
22
- export const useTextureValue = (element: ReactElement, size: SkSize) => {
28
+ export const useTexture = (element: ReactElement, size: SkSize) => {
23
29
  const picture = useMemo(() => {
24
30
  return drawAsPicture(element);
25
31
  }, [element]);
26
- return useTextureValueFromPicture(picture, size);
32
+ return usePictureAsTexture(picture, size);
33
+ };
34
+
35
+ export const useTextureAsValue = (element: ReactElement, size: SkSize) => {
36
+ console.warn("useTextureAsValue has been renamed to use useTexture");
37
+ return useTexture(element, size);
27
38
  };
28
39
 
29
40
  export const useTextureValueFromPicture = (
30
- picture: SkPicture,
41
+ picture: SkPicture | null,
42
+ size: SkSize
43
+ ) => {
44
+ console.warn(
45
+ "useTextureValueFromPicture has been renamed to use usePictureAsTexture"
46
+ );
47
+ return usePictureAsTexture(picture, size);
48
+ };
49
+
50
+ export const usePictureAsTexture = (
51
+ picture: SkPicture | null,
31
52
  size: SkSize
32
53
  ) => {
33
54
  const texture = useSharedValue<SkImage | null>(null);
34
55
  useEffect(() => {
35
- runOnUI(createTextureValue)(texture, picture, size);
56
+ if (picture !== null) {
57
+ runOnUI(createTexture)(texture, picture, size);
58
+ }
36
59
  }, [texture, picture, size]);
37
60
  return texture;
38
61
  };
62
+
63
+ export const useImageAsTexture = (source: DataSourceParam) => {
64
+ const image = useImage(source);
65
+ const size = useMemo(() => {
66
+ if (image) {
67
+ return { width: image.width(), height: image.height() };
68
+ }
69
+ return { width: 0, height: 0 };
70
+ }, [image]);
71
+ const picture = useMemo(() => {
72
+ if (image) {
73
+ const recorder = Skia.PictureRecorder();
74
+ const canvas = recorder.beginRecording({
75
+ x: 0,
76
+ y: 0,
77
+ width: size.width,
78
+ height: size.height,
79
+ });
80
+ canvas.drawImage(image, 0, 0);
81
+ return recorder.finishRecordingAsPicture();
82
+ } else {
83
+ return null;
84
+ }
85
+ }, [size, image]);
86
+ return usePictureAsTexture(picture, size);
87
+ };