@shopify/react-native-skia 0.1.151 → 0.1.153

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 (89) hide show
  1. package/android/CMakeLists.txt +5 -5
  2. package/android/cpp/jni/JniLoad.cpp +7 -5
  3. package/android/cpp/jni/JniSkiaManager.cpp +2 -15
  4. package/android/cpp/jni/include/JniSkiaBaseView.h +68 -0
  5. package/android/cpp/jni/include/JniSkiaDrawView.h +64 -47
  6. package/android/cpp/jni/include/JniSkiaManager.h +8 -10
  7. package/android/cpp/jni/include/JniSkiaPictureView.h +96 -0
  8. package/android/cpp/rnskia-android/{RNSkPlatformContextImpl.h → RNSkAndroidPlatformContext.h} +4 -4
  9. package/android/cpp/rnskia-android/RNSkAndroidView.h +100 -0
  10. package/android/cpp/rnskia-android/RNSkOpenGLCanvasProvider.cpp +91 -0
  11. package/android/cpp/rnskia-android/RNSkOpenGLCanvasProvider.h +39 -0
  12. package/android/cpp/rnskia-android/SkiaOpenGLRenderer.cpp +15 -6
  13. package/android/cpp/rnskia-android/SkiaOpenGLRenderer.h +5 -4
  14. package/android/src/main/java/com/shopify/reactnative/skia/PlatformContext.java +5 -11
  15. package/android/src/main/java/com/shopify/reactnative/skia/RNSkiaPackage.java +1 -2
  16. package/android/src/main/java/com/shopify/reactnative/skia/SkiaBaseView.java +143 -0
  17. package/android/src/main/java/com/shopify/reactnative/skia/SkiaDrawView.java +17 -145
  18. package/android/src/main/java/com/shopify/reactnative/skia/{RNSkiaViewManager.java → SkiaDrawViewManager.java} +4 -15
  19. package/android/src/main/java/com/shopify/reactnative/skia/SkiaManager.java +1 -10
  20. package/android/src/main/java/com/shopify/reactnative/skia/SkiaPictureView.java +45 -0
  21. package/android/src/main/java/com/shopify/reactnative/skia/SkiaPictureViewManager.java +64 -0
  22. package/cpp/jsi/JsiValueWrapper.h +11 -0
  23. package/cpp/rnskia/RNSkInfoParameter.h +4 -14
  24. package/cpp/rnskia/RNSkJsView.cpp +211 -0
  25. package/cpp/rnskia/RNSkJsView.h +115 -0
  26. package/cpp/rnskia/RNSkJsiViewApi.h +6 -6
  27. package/cpp/rnskia/RNSkManager.cpp +7 -7
  28. package/cpp/rnskia/RNSkManager.h +7 -7
  29. package/cpp/rnskia/RNSkPictureView.h +124 -0
  30. package/cpp/rnskia/RNSkView.h +287 -0
  31. package/ios/RNSkia-iOS/RNSkMetalCanvasProvider.h +38 -0
  32. package/ios/RNSkia-iOS/{RNSkDrawViewImpl.mm → RNSkMetalCanvasProvider.mm} +46 -23
  33. package/ios/RNSkia-iOS/{PlatformContext.h → RNSkiOSPlatformContext.h} +4 -4
  34. package/ios/RNSkia-iOS/{PlatformContext.mm → RNSkiOSPlatformContext.mm} +5 -5
  35. package/ios/RNSkia-iOS/RNSkiOSView.h +34 -0
  36. package/ios/RNSkia-iOS/SkiaDrawViewManager.mm +19 -11
  37. package/ios/RNSkia-iOS/SkiaManager.mm +3 -3
  38. package/ios/RNSkia-iOS/SkiaPictureViewManager.h +8 -0
  39. package/ios/RNSkia-iOS/SkiaPictureViewManager.mm +51 -0
  40. package/ios/RNSkia-iOS/SkiaUIView.h +26 -0
  41. package/ios/RNSkia-iOS/{SkiaDrawView.mm → SkiaUIView.mm} +29 -23
  42. package/lib/commonjs/views/SkiaBaseWebView.js +213 -0
  43. package/lib/commonjs/views/SkiaBaseWebView.js.map +1 -0
  44. package/lib/commonjs/views/SkiaPictureView.js +112 -0
  45. package/lib/commonjs/views/SkiaPictureView.js.map +1 -0
  46. package/lib/commonjs/views/SkiaPictureView.web.js +31 -0
  47. package/lib/commonjs/views/SkiaPictureView.web.js.map +1 -0
  48. package/lib/commonjs/views/SkiaView.js +1 -1
  49. package/lib/commonjs/views/SkiaView.js.map +1 -1
  50. package/lib/commonjs/views/SkiaView.web.js +14 -201
  51. package/lib/commonjs/views/SkiaView.web.js.map +1 -1
  52. package/lib/commonjs/views/index.js +13 -0
  53. package/lib/commonjs/views/index.js.map +1 -1
  54. package/lib/commonjs/views/types.js.map +1 -1
  55. package/lib/module/views/SkiaBaseWebView.js +198 -0
  56. package/lib/module/views/SkiaBaseWebView.js.map +1 -0
  57. package/lib/module/views/SkiaPictureView.js +94 -0
  58. package/lib/module/views/SkiaPictureView.js.map +1 -0
  59. package/lib/module/views/SkiaPictureView.web.js +19 -0
  60. package/lib/module/views/SkiaPictureView.web.js.map +1 -0
  61. package/lib/module/views/SkiaView.js +1 -1
  62. package/lib/module/views/SkiaView.js.map +1 -1
  63. package/lib/module/views/SkiaView.web.js +15 -199
  64. package/lib/module/views/SkiaView.web.js.map +1 -1
  65. package/lib/module/views/index.js +1 -0
  66. package/lib/module/views/index.js.map +1 -1
  67. package/lib/module/views/types.js.map +1 -1
  68. package/lib/typescript/src/views/SkiaBaseWebView.d.ts +58 -0
  69. package/lib/typescript/src/views/SkiaPictureView.d.ts +27 -0
  70. package/lib/typescript/src/views/SkiaPictureView.web.d.ts +7 -0
  71. package/lib/typescript/src/views/SkiaView.d.ts +4 -4
  72. package/lib/typescript/src/views/SkiaView.web.d.ts +6 -53
  73. package/lib/typescript/src/views/index.d.ts +1 -0
  74. package/lib/typescript/src/views/types.d.ts +7 -2
  75. package/package.json +3 -3
  76. package/src/views/SkiaBaseWebView.tsx +177 -0
  77. package/src/views/SkiaPictureView.tsx +93 -0
  78. package/src/views/SkiaPictureView.web.tsx +23 -0
  79. package/src/views/SkiaView.tsx +6 -7
  80. package/src/views/SkiaView.web.tsx +18 -167
  81. package/src/views/index.ts +1 -0
  82. package/src/views/types.ts +9 -2
  83. package/android/cpp/jni/JniSkiaDrawView.cpp +0 -113
  84. package/android/cpp/rnskia-android/RNSkDrawViewImpl.cpp +0 -73
  85. package/android/cpp/rnskia-android/RNSkDrawViewImpl.h +0 -48
  86. package/cpp/rnskia/RNSkDrawView.cpp +0 -315
  87. package/cpp/rnskia/RNSkDrawView.h +0 -226
  88. package/ios/RNSkia-iOS/RNSkDrawViewImpl.h +0 -52
  89. package/ios/RNSkia-iOS/SkiaDrawView.h +0 -23
@@ -0,0 +1 @@
1
+ {"version":3,"names":["SkiaViewNativeId","NativeSkiaPictureView","requireNativeComponent","SkiaPictureView","React","Component","constructor","props","_nativeId","picture","assertSkiaViewApi","SkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaPictureView.tsx"],"sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps, SkiaPictureViewProps } from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaPictureView =\n requireNativeComponent<NativeSkiaViewProps>(\"SkiaPictureView\");\n\nexport class SkiaPictureView extends React.Component<SkiaPictureViewProps> {\n constructor(props: SkiaPictureViewProps) {\n super(props);\n this._nativeId = SkiaViewNativeId++;\n const { picture } = props;\n if (picture) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\n }\n }\n\n private _nativeId: number;\n\n public get nativeId() {\n return this._nativeId;\n }\n\n componentDidUpdate(prevProps: SkiaPictureViewProps) {\n const { picture } = this.props;\n if (picture !== prevProps.picture) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\n }\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n assertSkiaViewApi();\n return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n }\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n public redraw() {\n assertSkiaViewApi();\n SkiaViewApi.requestRedraw(this._nativeId);\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(values: SkiaValue<unknown>[]): () => void {\n assertSkiaViewApi();\n return SkiaViewApi.registerValuesInView(this._nativeId, values);\n }\n\n render() {\n const { mode, debug = false, ...viewProps } = this.props;\n return (\n <NativeSkiaPictureView\n collapsable={false}\n nativeID={`${this._nativeId}`}\n mode={mode}\n debug={debug}\n {...viewProps}\n />\n );\n }\n}\n\nconst assertSkiaViewApi = () => {\n if (\n SkiaViewApi === null ||\n SkiaViewApi.setJsiProperty === null ||\n SkiaViewApi.callJsiMethod === null ||\n SkiaViewApi.registerValuesInView === null ||\n SkiaViewApi.requestRedraw === null ||\n SkiaViewApi.makeImageSnapshot === null\n ) {\n throw Error(\"Skia View Api was not found.\");\n }\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAKA;;;;;;;;AAGA,IAAIA,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,qBAAqB,GACzB,IAAAC,mCAAA,EAA4C,iBAA5C,CADF;;AAGO,MAAMC,eAAN,SAA8BC,cAAA,CAAMC,SAApC,CAAoE;EACzEC,WAAW,CAACC,KAAD,EAA8B;IACvC,MAAMA,KAAN;;IADuC;;IAEvC,KAAKC,SAAL,GAAiBR,gBAAgB,EAAjC;IACA,MAAM;MAAES;IAAF,IAAcF,KAApB;;IACA,IAAIE,OAAJ,EAAa;MACXC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,SAA3C,EAAsDC,OAAtD;IACD;EACF;;EAIkB,IAARI,QAAQ,GAAG;IACpB,OAAO,KAAKL,SAAZ;EACD;;EAEDM,kBAAkB,CAACC,SAAD,EAAkC;IAClD,MAAM;MAAEN;IAAF,IAAc,KAAKF,KAAzB;;IACA,IAAIE,OAAO,KAAKM,SAAS,CAACN,OAA1B,EAAmC;MACjCC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,SAA3C,EAAsDC,OAAtD;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSO,iBAAiB,CAACC,IAAD,EAAgB;IACtCP,iBAAiB;IACjB,OAAOC,gBAAA,CAAYK,iBAAZ,CAA8B,KAAKR,SAAnC,EAA8CS,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdR,iBAAiB;;IACjBC,gBAAA,CAAYQ,aAAZ,CAA0B,KAAKX,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSY,cAAc,CAACC,MAAD,EAA2C;IAC9DX,iBAAiB;IACjB,OAAOC,gBAAA,CAAYW,oBAAZ,CAAiC,KAAKd,SAAtC,EAAiDa,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKnB,KAAnD;IACA,oBACE,6BAAC,qBAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEgB,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAhEwE;;;;AAmE3E,MAAMhB,iBAAiB,GAAG,MAAM;EAC9B,IACEC,gBAAA,KAAgB,IAAhB,IACAA,gBAAA,CAAYC,cAAZ,KAA+B,IAD/B,IAEAD,gBAAA,CAAYgB,aAAZ,KAA8B,IAF9B,IAGAhB,gBAAA,CAAYW,oBAAZ,KAAqC,IAHrC,IAIAX,gBAAA,CAAYQ,aAAZ,KAA8B,IAJ9B,IAKAR,gBAAA,CAAYK,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.SkiaPictureView = void 0;
7
+
8
+ var _reactNative = require("react-native");
9
+
10
+ var _SkiaBaseWebView = require("./SkiaBaseWebView");
11
+
12
+ const pd = _reactNative.PixelRatio.get();
13
+
14
+ class SkiaPictureView extends _SkiaBaseWebView.SkiaBaseWebView {
15
+ constructor(props) {
16
+ super(props);
17
+ }
18
+
19
+ renderInCanvas(canvas) {
20
+ if (this.props.picture) {
21
+ canvas.save();
22
+ canvas.scale(pd, pd);
23
+ canvas.drawPicture(this.props.picture);
24
+ canvas.restore();
25
+ }
26
+ }
27
+
28
+ }
29
+
30
+ exports.SkiaPictureView = SkiaPictureView;
31
+ //# sourceMappingURL=SkiaPictureView.web.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["pd","PixelRatio","get","SkiaPictureView","SkiaBaseWebView","constructor","props","renderInCanvas","canvas","picture","save","scale","drawPicture","restore"],"sources":["SkiaPictureView.web.tsx"],"sourcesContent":["import { PixelRatio } from \"react-native\";\n\nimport type { SkCanvas } from \"../skia/types\";\n\nimport type { SkiaPictureViewProps } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nconst pd = PixelRatio.get();\n\nexport class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewProps> {\n constructor(props: SkiaPictureViewProps) {\n super(props);\n }\n\n protected renderInCanvas(canvas: SkCanvas): void {\n if (this.props.picture) {\n canvas.save();\n canvas.scale(pd, pd);\n canvas.drawPicture(this.props.picture);\n canvas.restore();\n }\n }\n}\n"],"mappings":";;;;;;;AAAA;;AAKA;;AAEA,MAAMA,EAAE,GAAGC,uBAAA,CAAWC,GAAX,EAAX;;AAEO,MAAMC,eAAN,SAA8BC,gCAA9B,CAAoE;EACzEC,WAAW,CAACC,KAAD,EAA8B;IACvC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAyB;IAC/C,IAAI,KAAKF,KAAL,CAAWG,OAAf,EAAwB;MACtBD,MAAM,CAACE,IAAP;MACAF,MAAM,CAACG,KAAP,CAAaX,EAAb,EAAiBA,EAAjB;MACAQ,MAAM,CAACI,WAAP,CAAmB,KAAKN,KAAL,CAAWG,OAA9B;MACAD,MAAM,CAACK,OAAP;IACD;EACF;;AAZwE"}
@@ -18,7 +18,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
18
18
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
19
19
 
20
20
  let SkiaViewNativeId = 1000;
21
- const NativeSkiaView = (0, _reactNative.requireNativeComponent)("ReactNativeSkiaView");
21
+ const NativeSkiaView = (0, _reactNative.requireNativeComponent)("SkiaDrawView");
22
22
 
23
23
  class SkiaView extends _react.default.Component {
24
24
  constructor(props) {
@@ -1 +1 @@
1
- {"version":3,"names":["SkiaViewNativeId","NativeSkiaView","requireNativeComponent","SkiaView","React","Component","constructor","props","_nativeId","onDraw","assertSkiaViewApi","SkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaView.tsx"],"sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps, SkiaViewProps } from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaView = requireNativeComponent<NativeSkiaViewProps>(\n \"ReactNativeSkiaView\"\n);\n\nexport class SkiaView extends React.Component<SkiaViewProps> {\n constructor(props: SkiaViewProps) {\n super(props);\n this._nativeId = SkiaViewNativeId++;\n const { onDraw } = props;\n if (onDraw) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n }\n }\n\n private _nativeId: number;\n\n public get nativeId() {\n return this._nativeId;\n }\n\n componentDidUpdate(prevProps: SkiaViewProps) {\n const { onDraw } = this.props;\n if (onDraw !== prevProps.onDraw) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n }\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n assertSkiaViewApi();\n return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n }\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n public redraw() {\n assertSkiaViewApi();\n SkiaViewApi.requestRedraw(this._nativeId);\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(values: SkiaValue<unknown>[]): () => void {\n assertSkiaViewApi();\n return SkiaViewApi.registerValuesInView(this._nativeId, values);\n }\n\n render() {\n const { mode, debug = false, ...viewProps } = this.props;\n return (\n <NativeSkiaView\n collapsable={false}\n nativeID={`${this._nativeId}`}\n mode={mode}\n debug={debug}\n {...viewProps}\n />\n );\n }\n}\n\nconst assertSkiaViewApi = () => {\n if (\n SkiaViewApi === null ||\n SkiaViewApi.setJsiProperty === null ||\n SkiaViewApi.callJsiMethod === null ||\n SkiaViewApi.registerValuesInView === null ||\n SkiaViewApi.requestRedraw === null ||\n SkiaViewApi.makeImageSnapshot === null\n ) {\n throw Error(\"Skia View Api was not found.\");\n }\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAKA;;;;;;;;AAGA,IAAIA,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,cAAc,GAAG,IAAAC,mCAAA,EACrB,qBADqB,CAAvB;;AAIO,MAAMC,QAAN,SAAuBC,cAAA,CAAMC,SAA7B,CAAsD;EAC3DC,WAAW,CAACC,KAAD,EAAuB;IAChC,MAAMA,KAAN;;IADgC;;IAEhC,KAAKC,SAAL,GAAiBR,gBAAgB,EAAjC;IACA,MAAM;MAAES;IAAF,IAAaF,KAAnB;;IACA,IAAIE,MAAJ,EAAY;MACVC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;EACF;;EAIkB,IAARI,QAAQ,GAAG;IACpB,OAAO,KAAKL,SAAZ;EACD;;EAEDM,kBAAkB,CAACC,SAAD,EAA2B;IAC3C,MAAM;MAAEN;IAAF,IAAa,KAAKF,KAAxB;;IACA,IAAIE,MAAM,KAAKM,SAAS,CAACN,MAAzB,EAAiC;MAC/BC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSO,iBAAiB,CAACC,IAAD,EAAgB;IACtCP,iBAAiB;IACjB,OAAOC,gBAAA,CAAYK,iBAAZ,CAA8B,KAAKR,SAAnC,EAA8CS,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdR,iBAAiB;;IACjBC,gBAAA,CAAYQ,aAAZ,CAA0B,KAAKX,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSY,cAAc,CAACC,MAAD,EAA2C;IAC9DX,iBAAiB;IACjB,OAAOC,gBAAA,CAAYW,oBAAZ,CAAiC,KAAKd,SAAtC,EAAiDa,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKnB,KAAnD;IACA,oBACE,6BAAC,cAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEgB,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAhE0D;;;;AAmE7D,MAAMhB,iBAAiB,GAAG,MAAM;EAC9B,IACEC,gBAAA,KAAgB,IAAhB,IACAA,gBAAA,CAAYC,cAAZ,KAA+B,IAD/B,IAEAD,gBAAA,CAAYgB,aAAZ,KAA8B,IAF9B,IAGAhB,gBAAA,CAAYW,oBAAZ,KAAqC,IAHrC,IAIAX,gBAAA,CAAYQ,aAAZ,KAA8B,IAJ9B,IAKAR,gBAAA,CAAYK,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}
1
+ {"version":3,"names":["SkiaViewNativeId","NativeSkiaView","requireNativeComponent","SkiaView","React","Component","constructor","props","_nativeId","onDraw","assertSkiaViewApi","SkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaView.tsx"],"sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps, SkiaDrawViewProps } from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaView =\n requireNativeComponent<NativeSkiaViewProps>(\"SkiaDrawView\");\n\nexport class SkiaView extends React.Component<SkiaDrawViewProps> {\n constructor(props: SkiaDrawViewProps) {\n super(props);\n this._nativeId = SkiaViewNativeId++;\n const { onDraw } = props;\n if (onDraw) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n }\n }\n\n private _nativeId: number;\n\n public get nativeId() {\n return this._nativeId;\n }\n\n componentDidUpdate(prevProps: SkiaDrawViewProps) {\n const { onDraw } = this.props;\n if (onDraw !== prevProps.onDraw) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n }\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n assertSkiaViewApi();\n return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n }\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n public redraw() {\n assertSkiaViewApi();\n SkiaViewApi.requestRedraw(this._nativeId);\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(values: SkiaValue<unknown>[]): () => void {\n assertSkiaViewApi();\n return SkiaViewApi.registerValuesInView(this._nativeId, values);\n }\n\n render() {\n const { mode, debug = false, ...viewProps } = this.props;\n return (\n <NativeSkiaView\n collapsable={false}\n nativeID={`${this._nativeId}`}\n mode={mode}\n debug={debug}\n {...viewProps}\n />\n );\n }\n}\n\nconst assertSkiaViewApi = () => {\n if (\n SkiaViewApi === null ||\n SkiaViewApi.setJsiProperty === null ||\n SkiaViewApi.callJsiMethod === null ||\n SkiaViewApi.registerValuesInView === null ||\n SkiaViewApi.requestRedraw === null ||\n SkiaViewApi.makeImageSnapshot === null\n ) {\n throw Error(\"Skia View Api was not found.\");\n }\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAKA;;;;;;;;AAGA,IAAIA,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,cAAc,GAClB,IAAAC,mCAAA,EAA4C,cAA5C,CADF;;AAGO,MAAMC,QAAN,SAAuBC,cAAA,CAAMC,SAA7B,CAA0D;EAC/DC,WAAW,CAACC,KAAD,EAA2B;IACpC,MAAMA,KAAN;;IADoC;;IAEpC,KAAKC,SAAL,GAAiBR,gBAAgB,EAAjC;IACA,MAAM;MAAES;IAAF,IAAaF,KAAnB;;IACA,IAAIE,MAAJ,EAAY;MACVC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;EACF;;EAIkB,IAARI,QAAQ,GAAG;IACpB,OAAO,KAAKL,SAAZ;EACD;;EAEDM,kBAAkB,CAACC,SAAD,EAA+B;IAC/C,MAAM;MAAEN;IAAF,IAAa,KAAKF,KAAxB;;IACA,IAAIE,MAAM,KAAKM,SAAS,CAACN,MAAzB,EAAiC;MAC/BC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSO,iBAAiB,CAACC,IAAD,EAAgB;IACtCP,iBAAiB;IACjB,OAAOC,gBAAA,CAAYK,iBAAZ,CAA8B,KAAKR,SAAnC,EAA8CS,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdR,iBAAiB;;IACjBC,gBAAA,CAAYQ,aAAZ,CAA0B,KAAKX,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSY,cAAc,CAACC,MAAD,EAA2C;IAC9DX,iBAAiB;IACjB,OAAOC,gBAAA,CAAYW,oBAAZ,CAAiC,KAAKd,SAAtC,EAAiDa,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKnB,KAAnD;IACA,oBACE,6BAAC,cAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEgB,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAhE8D;;;;AAmEjE,MAAMhB,iBAAiB,GAAG,MAAM;EAC9B,IACEC,gBAAA,KAAgB,IAAhB,IACAA,gBAAA,CAAYC,cAAZ,KAA+B,IAD/B,IAEAD,gBAAA,CAAYgB,aAAZ,KAA8B,IAF9B,IAGAhB,gBAAA,CAAYW,oBAAZ,KAAqC,IAHrC,IAIAX,gBAAA,CAAYQ,aAAZ,KAA8B,IAJ9B,IAKAR,gBAAA,CAAYK,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}
@@ -5,219 +5,32 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.SkiaView = void 0;
7
7
 
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
8
  var _reactNative = require("react-native");
11
9
 
12
- var _JsiSkSurface = require("../skia/web/JsiSkSurface");
13
-
14
- var _types = require("./types");
15
-
16
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
19
-
20
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
10
+ var _SkiaBaseWebView = require("./SkiaBaseWebView");
21
11
 
22
12
  const pd = _reactNative.PixelRatio.get();
23
13
 
24
- class SkiaView extends _react.default.Component {
14
+ class SkiaView extends _SkiaBaseWebView.SkiaBaseWebView {
25
15
  constructor(props) {
26
16
  super(props);
27
-
28
- _defineProperty(this, "_surface", null);
29
-
30
- _defineProperty(this, "_unsubscriptions", []);
31
-
32
- _defineProperty(this, "_touches", []);
33
-
34
- _defineProperty(this, "_canvas", null);
35
-
36
- _defineProperty(this, "_canvasRef", /*#__PURE__*/_react.default.createRef());
37
-
38
- _defineProperty(this, "_mode", void 0);
39
-
40
- _defineProperty(this, "_redrawRequests", 0);
41
-
42
- _defineProperty(this, "width", 0);
43
-
44
- _defineProperty(this, "height", 0);
45
-
46
- _defineProperty(this, "requestId", 0);
47
-
48
- this._mode = props.mode ?? "default";
49
- }
50
-
51
- unsubscribeAll() {
52
- this._unsubscriptions.forEach(u => u());
53
-
54
- this._unsubscriptions = [];
55
17
  }
56
18
 
57
- onLayout(evt) {
58
- const {
59
- CanvasKit
60
- } = global;
61
- const {
62
- width,
63
- height
64
- } = evt.nativeEvent.layout;
65
- this.width = width;
66
- this.height = height; // Reset canvas / surface on layout change
67
-
68
- if (this._canvasRef.current) {
69
- const canvas = this._canvasRef.current;
70
- canvas.width = canvas.clientWidth * pd;
71
- canvas.height = canvas.clientHeight * pd;
72
- const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
73
-
74
- if (!surface) {
75
- throw new Error("Could not create surface");
76
- }
77
-
78
- this._surface = new _JsiSkSurface.JsiSkSurface(CanvasKit, surface);
79
- this._canvas = this._surface.getCanvas();
80
- this.redraw();
19
+ renderInCanvas(canvas, touches) {
20
+ if (this.props.onDraw) {
21
+ const info = {
22
+ height: this.height,
23
+ width: this.width,
24
+ timestamp: Date.now(),
25
+ touches: touches.map(t => [t])
26
+ };
27
+ canvas.save();
28
+ canvas.scale(pd, pd);
29
+ this.props.onDraw(canvas, info);
30
+ canvas.restore();
81
31
  }
82
32
  }
83
33
 
84
- componentDidMount() {
85
- // Start render loop
86
- this.tick();
87
- }
88
-
89
- componentDidUpdate() {
90
- this.redraw();
91
- }
92
-
93
- componentWillUnmount() {
94
- this.unsubscribeAll();
95
- cancelAnimationFrame(this.requestId);
96
- }
97
- /**
98
- * Creates a snapshot from the canvas in the surface
99
- * @param rect Rect to use as bounds. Optional.
100
- * @returns An Image object.
101
- */
102
-
103
-
104
- makeImageSnapshot(rect) {
105
- var _this$_surface;
106
-
107
- return (_this$_surface = this._surface) === null || _this$_surface === void 0 ? void 0 : _this$_surface.makeImageSnapshot(rect);
108
- }
109
- /**
110
- * Sends a redraw request to the native SkiaView.
111
- */
112
-
113
-
114
- tick() {
115
- if (this._mode === "continuous" || this._redrawRequests > 0) {
116
- this._redrawRequests = 0;
117
-
118
- if (this._canvas && this.props.onDraw) {
119
- var _this$_surface2;
120
-
121
- const touches = [...this._touches];
122
- this._touches = [];
123
- const info = {
124
- height: this.height,
125
- width: this.width,
126
- timestamp: Date.now(),
127
- touches: touches.map(t => [t])
128
- };
129
-
130
- if (this.props.onDraw) {
131
- const canvas = this._canvas;
132
- canvas.save();
133
- canvas.scale(pd, pd);
134
- this.props.onDraw(canvas, info);
135
- canvas.restore();
136
- }
137
-
138
- (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
139
- }
140
- }
141
-
142
- this.requestId = requestAnimationFrame(this.tick.bind(this));
143
- }
144
-
145
- redraw() {
146
- this._redrawRequests++;
147
- }
148
- /**
149
- * Updates the drawing mode for the skia view. This is the same
150
- * as declaratively setting the mode property on the SkiaView.
151
- * There are two drawing modes, "continuous" and "default",
152
- * where the continuous mode will continuously redraw the view and
153
- * the default mode will only redraw when any of the regular react
154
- * properties are changed like size and margins.
155
- * @param mode Drawing mode to use.
156
- */
157
-
158
-
159
- setDrawMode(mode) {
160
- this._mode = mode;
161
- this.tick();
162
- }
163
- /**
164
- * Registers one or move values as a dependant value of the Skia View. The view will
165
- * The view will redraw itself when any of the values change.
166
- * @param values Values to register
167
- */
168
-
169
-
170
- registerValues(_values) {
171
- // Unsubscribe from dependency values
172
- this.unsubscribeAll(); // Register redraw dependencies on values
173
-
174
- _values.forEach(v => {
175
- this._unsubscriptions.push(v.addListener(() => {
176
- this.redraw();
177
- }));
178
- });
179
- }
180
-
181
- handleTouchEvent(evt, touchType) {
182
- this._touches.push({
183
- id: evt.pointerId,
184
- x: evt.clientX - evt.currentTarget.getClientRects()[0].left,
185
- y: evt.clientY - evt.currentTarget.getClientRects()[0].top,
186
- force: evt.pressure,
187
- type: touchType,
188
- timestamp: Date.now()
189
- });
190
-
191
- this.redraw();
192
- }
193
-
194
- createTouchHandler(touchType) {
195
- return evt => this.handleTouchEvent(evt, touchType);
196
- }
197
-
198
- render() {
199
- const {
200
- mode,
201
- debug = false,
202
- ...viewProps
203
- } = this.props;
204
- return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({}, viewProps, {
205
- onLayout: this.onLayout.bind(this)
206
- }), /*#__PURE__*/_react.default.createElement("canvas", {
207
- ref: this._canvasRef,
208
- style: {
209
- display: "flex",
210
- flex: 1
211
- },
212
- onPointerDown: this.createTouchHandler(_types.TouchType.Start),
213
- onPointerMove: this.createTouchHandler(_types.TouchType.Active),
214
- onPointerUp: this.createTouchHandler(_types.TouchType.End),
215
- onPointerCancel: this.createTouchHandler(_types.TouchType.Cancelled),
216
- onPointerLeave: this.createTouchHandler(_types.TouchType.End),
217
- onPointerOut: this.createTouchHandler(_types.TouchType.End)
218
- }));
219
- }
220
-
221
34
  }
222
35
 
223
36
  exports.SkiaView = SkiaView;
@@ -1 +1 @@
1
- {"version":3,"names":["pd","PixelRatio","get","SkiaView","React","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","clientWidth","clientHeight","surface","MakeWebGLCanvasSurface","Error","_surface","JsiSkSurface","_canvas","getCanvas","redraw","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","makeImageSnapshot","rect","_redrawRequests","onDraw","touches","_touches","info","timestamp","Date","now","map","t","save","scale","restore","ref","flush","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","createTouchHandler","render","debug","viewProps","display","flex","TouchType","Start","Active","End","Cancelled"],"sources":["SkiaView.web.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport class SkiaView extends React.Component<SkiaViewProps> {\n constructor(props: SkiaViewProps) {\n super(props);\n this._mode = props.mode ?? \"default\";\n }\n\n private _surface: JsiSkSurface | null = null;\n private _unsubscriptions: Array<() => void> = [];\n private _touches: Array<TouchInfo> = [];\n private _canvas: SkCanvas | null = null;\n private _canvasRef = React.createRef<HTMLCanvasElement>();\n private _mode: DrawMode;\n private _redrawRequests = 0;\n private width = 0;\n private height = 0;\n private requestId = 0;\n\n private unsubscribeAll() {\n this._unsubscriptions.forEach((u) => u());\n this._unsubscriptions = [];\n }\n\n private onLayout(evt: LayoutChangeEvent) {\n const { CanvasKit } = global;\n const { width, height } = evt.nativeEvent.layout;\n this.width = width;\n this.height = height;\n // Reset canvas / surface on layout change\n if (this._canvasRef.current) {\n const canvas = this._canvasRef.current;\n canvas.width = canvas.clientWidth * pd;\n canvas.height = canvas.clientHeight * pd;\n const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);\n if (!surface) {\n throw new Error(\"Could not create surface\");\n }\n this._surface = new JsiSkSurface(CanvasKit, surface);\n this._canvas = this._surface.getCanvas();\n this.redraw();\n }\n }\n\n componentDidMount() {\n // Start render loop\n this.tick();\n }\n\n componentDidUpdate() {\n this.redraw();\n }\n\n componentWillUnmount() {\n this.unsubscribeAll();\n cancelAnimationFrame(this.requestId);\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n return this._surface?.makeImageSnapshot(rect);\n }\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n private tick() {\n if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n this._redrawRequests = 0;\n if (this._canvas && this.props.onDraw) {\n const touches = [...this._touches];\n this._touches = [];\n const info: DrawingInfo = {\n height: this.height,\n width: this.width,\n timestamp: Date.now(),\n touches: touches.map((t) => [t]),\n };\n if (this.props.onDraw) {\n const canvas = this._canvas!;\n canvas.save();\n canvas.scale(pd, pd);\n this.props.onDraw(canvas, info);\n canvas.restore();\n }\n this._surface?.ref.flush();\n }\n }\n this.requestId = requestAnimationFrame(this.tick.bind(this));\n }\n\n public redraw() {\n this._redrawRequests++;\n }\n\n /**\n * Updates the drawing mode for the skia view. This is the same\n * as declaratively setting the mode property on the SkiaView.\n * There are two drawing modes, \"continuous\" and \"default\",\n * where the continuous mode will continuously redraw the view and\n * the default mode will only redraw when any of the regular react\n * properties are changed like size and margins.\n * @param mode Drawing mode to use.\n */\n public setDrawMode(mode: DrawMode) {\n this._mode = mode;\n this.tick();\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(_values: SkiaValue<unknown>[]) {\n // Unsubscribe from dependency values\n this.unsubscribeAll();\n // Register redraw dependencies on values\n _values.forEach((v) => {\n this._unsubscriptions.push(\n v.addListener(() => {\n this.redraw();\n })\n );\n });\n }\n\n private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n this._touches.push({\n id: evt.pointerId,\n x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n force: evt.pressure,\n type: touchType,\n timestamp: Date.now(),\n });\n this.redraw();\n }\n\n createTouchHandler(touchType: TouchType) {\n return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n }\n\n render() {\n const { mode, debug = false, ...viewProps } = this.props;\n return (\n <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n <canvas\n ref={this._canvasRef}\n style={{ display: \"flex\", flex: 1 }}\n onPointerDown={this.createTouchHandler(TouchType.Start)}\n onPointerMove={this.createTouchHandler(TouchType.Active)}\n onPointerUp={this.createTouchHandler(TouchType.End)}\n onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n onPointerLeave={this.createTouchHandler(TouchType.End)}\n onPointerOut={this.createTouchHandler(TouchType.End)}\n />\n </View>\n );\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"names":["pd","PixelRatio","get","SkiaView","SkiaBaseWebView","constructor","props","renderInCanvas","canvas","touches","onDraw","info","height","width","timestamp","Date","now","map","t","save","scale","restore"],"sources":["SkiaView.web.tsx"],"sourcesContent":["import { PixelRatio } from \"react-native\";\n\nimport type { SkCanvas } from \"../skia/types\";\n\nimport type { DrawingInfo, SkiaDrawViewProps, TouchInfo } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nconst pd = PixelRatio.get();\n\nexport class SkiaView extends SkiaBaseWebView<SkiaDrawViewProps> {\n constructor(props: SkiaDrawViewProps) {\n super(props);\n }\n\n protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {\n if (this.props.onDraw) {\n const info: DrawingInfo = {\n height: this.height,\n width: this.width,\n timestamp: Date.now(),\n touches: touches.map((t) => [t]),\n };\n canvas.save();\n canvas.scale(pd, pd);\n this.props.onDraw(canvas, info);\n canvas.restore();\n }\n }\n}\n"],"mappings":";;;;;;;AAAA;;AAKA;;AAEA,MAAMA,EAAE,GAAGC,uBAAA,CAAWC,GAAX,EAAX;;AAEO,MAAMC,QAAN,SAAuBC,gCAAvB,CAA0D;EAC/DC,WAAW,CAACC,KAAD,EAA2B;IACpC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAmBC,OAAnB,EAA+C;IACrE,IAAI,KAAKH,KAAL,CAAWI,MAAf,EAAuB;MACrB,MAAMC,IAAiB,GAAG;QACxBC,MAAM,EAAE,KAAKA,MADW;QAExBC,KAAK,EAAE,KAAKA,KAFY;QAGxBC,SAAS,EAAEC,IAAI,CAACC,GAAL,EAHa;QAIxBP,OAAO,EAAEA,OAAO,CAACQ,GAAR,CAAaC,CAAD,IAAO,CAACA,CAAD,CAAnB;MAJe,CAA1B;MAMAV,MAAM,CAACW,IAAP;MACAX,MAAM,CAACY,KAAP,CAAapB,EAAb,EAAiBA,EAAjB;MACA,KAAKM,KAAL,CAAWI,MAAX,CAAkBF,MAAlB,EAA0BG,IAA1B;MACAH,MAAM,CAACa,OAAP;IACD;EACF;;AAlB8D"}
@@ -17,6 +17,19 @@ Object.keys(_SkiaView).forEach(function (key) {
17
17
  });
18
18
  });
19
19
 
20
+ var _SkiaPictureView = require("./SkiaPictureView");
21
+
22
+ Object.keys(_SkiaPictureView).forEach(function (key) {
23
+ if (key === "default" || key === "__esModule") return;
24
+ if (key in exports && exports[key] === _SkiaPictureView[key]) return;
25
+ Object.defineProperty(exports, key, {
26
+ enumerable: true,
27
+ get: function () {
28
+ return _SkiaPictureView[key];
29
+ }
30
+ });
31
+ });
32
+
20
33
  var _types = require("./types");
21
34
 
22
35
  Object.keys(_types).forEach(function (key) {
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./SkiaView\";\nexport * from \"./types\";\nexport * from \"./useDrawCallback\";\nexport * from \"./useTouchHandler\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
1
+ {"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./SkiaView\";\nexport * from \"./SkiaPictureView\";\nexport * from \"./types\";\nexport * from \"./useDrawCallback\";\nexport * from \"./useTouchHandler\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
@@ -1 +1 @@
1
- {"version":3,"names":["TouchType"],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkCanvas, SkImage, SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n mode?: DrawMode;\n debug?: boolean;\n};\n\nexport enum TouchType {\n Start,\n Active,\n End,\n Cancelled,\n}\n\nexport interface TouchInfo {\n x: number;\n y: number;\n force: number;\n type: TouchType;\n id: number;\n timestamp: number;\n}\n\nexport interface DrawingInfo {\n width: number;\n height: number;\n timestamp: number;\n touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n // points per second\n velocityX: number;\n velocityY: number;\n};\n\nexport type TouchHandlers = {\n onStart?: (touchInfo: TouchInfo) => void;\n onActive?: (touchInfo: ExtendedTouchInfo) => void;\n onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;\n\n/**\n * Listener interface for value changes\n */\nexport interface ValueListener {\n addListener: (callback: () => void) => number;\n removeListener: (id: number) => void;\n}\n\nexport interface ISkiaViewApi {\n setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n callJsiMethod: <T extends Array<unknown>>(\n nativeId: number,\n name: string,\n ...args: T\n ) => void;\n registerValuesInView: (\n nativeId: number,\n values: SkiaValue<unknown>[]\n ) => () => void;\n requestRedraw: (nativeId: number) => void;\n makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n}\n\nexport interface SkiaViewProps extends ViewProps {\n /**\n * Sets the drawing mode for the skia view. There are two drawing\n * modes, \"continuous\" and \"default\", where the continuous mode will\n * continuously redraw the view, and the default mode will only\n * redraw when any of the regular react properties are changed like\n * sizes and margins.\n */\n mode?: DrawMode;\n /**\n * When set to true the view will display information about the\n * average time it takes to render.\n */\n debug?: boolean;\n /**\n * Draw callback. Will be called whenever the view is invalidated and\n * needs to redraw. This is either caused by a change in a react\n * property, a touch event, or a call to redraw. If the view is in\n * continuous mode the callback will be called 60 frames per second\n * by the native view.\n */\n onDraw?: RNSkiaDrawCallback;\n}\n"],"mappings":";;;;;;IAYYA,S;;;WAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;GAAAA,S,yBAAAA,S"}
1
+ {"version":3,"names":["TouchType"],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkCanvas, SkImage, SkPicture, SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n mode?: DrawMode;\n debug?: boolean;\n};\n\nexport enum TouchType {\n Start,\n Active,\n End,\n Cancelled,\n}\n\nexport interface TouchInfo {\n x: number;\n y: number;\n force: number;\n type: TouchType;\n id: number;\n timestamp: number;\n}\n\nexport interface DrawingInfo {\n width: number;\n height: number;\n timestamp: number;\n touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n // points per second\n velocityX: number;\n velocityY: number;\n};\n\nexport type TouchHandlers = {\n onStart?: (touchInfo: TouchInfo) => void;\n onActive?: (touchInfo: ExtendedTouchInfo) => void;\n onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;\n\n/**\n * Listener interface for value changes\n */\nexport interface ValueListener {\n addListener: (callback: () => void) => number;\n removeListener: (id: number) => void;\n}\n\nexport interface ISkiaViewApi {\n setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n callJsiMethod: <T extends Array<unknown>>(\n nativeId: number,\n name: string,\n ...args: T\n ) => void;\n registerValuesInView: (\n nativeId: number,\n values: SkiaValue<unknown>[]\n ) => () => void;\n requestRedraw: (nativeId: number) => void;\n makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n}\n\nexport interface SkiaBaseViewProps extends ViewProps {\n /**\n * Sets the drawing mode for the skia view. There are two drawing\n * modes, \"continuous\" and \"default\", where the continuous mode will\n * continuously redraw the view, and the default mode will only\n * redraw when any of the regular react properties are changed like\n * sizes and margins.\n */\n mode?: DrawMode;\n /**\n * When set to true the view will display information about the\n * average time it takes to render.\n */\n debug?: boolean;\n}\n\nexport interface SkiaDrawViewProps extends SkiaBaseViewProps {\n /**\n * Draw callback. Will be called whenever the view is invalidated and\n * needs to redraw. This is either caused by a change in a react\n * property, a touch event, or a call to redraw. If the view is in\n * continuous mode the callback will be called 60 frames per second\n * by the native view.\n */\n onDraw?: RNSkiaDrawCallback;\n}\n\nexport interface SkiaPictureViewProps extends SkiaBaseViewProps {\n picture?: SkPicture;\n}\n"],"mappings":";;;;;;IAYYA,S;;;WAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;GAAAA,S,yBAAAA,S"}
@@ -0,0 +1,198 @@
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+
3
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
4
+
5
+ /* global HTMLCanvasElement */
6
+ import React from "react";
7
+ import { PixelRatio, View } from "react-native";
8
+ import { JsiSkSurface } from "../skia/web/JsiSkSurface";
9
+ import { TouchType } from "./types";
10
+ const pd = PixelRatio.get();
11
+ export class SkiaBaseWebView extends React.Component {
12
+ constructor(props) {
13
+ super(props);
14
+
15
+ _defineProperty(this, "_surface", null);
16
+
17
+ _defineProperty(this, "_unsubscriptions", []);
18
+
19
+ _defineProperty(this, "_touches", []);
20
+
21
+ _defineProperty(this, "_canvas", null);
22
+
23
+ _defineProperty(this, "_canvasRef", /*#__PURE__*/React.createRef());
24
+
25
+ _defineProperty(this, "_mode", void 0);
26
+
27
+ _defineProperty(this, "_redrawRequests", 0);
28
+
29
+ _defineProperty(this, "requestId", 0);
30
+
31
+ _defineProperty(this, "width", 0);
32
+
33
+ _defineProperty(this, "height", 0);
34
+
35
+ this._mode = props.mode ?? "default";
36
+ }
37
+
38
+ unsubscribeAll() {
39
+ this._unsubscriptions.forEach(u => u());
40
+
41
+ this._unsubscriptions = [];
42
+ }
43
+
44
+ onLayout(evt) {
45
+ const {
46
+ CanvasKit
47
+ } = global;
48
+ const {
49
+ width,
50
+ height
51
+ } = evt.nativeEvent.layout;
52
+ this.width = width;
53
+ this.height = height; // Reset canvas / surface on layout change
54
+
55
+ if (this._canvasRef.current) {
56
+ const canvas = this._canvasRef.current;
57
+ canvas.width = canvas.clientWidth * pd;
58
+ canvas.height = canvas.clientHeight * pd;
59
+ const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
60
+
61
+ if (!surface) {
62
+ throw new Error("Could not create surface");
63
+ }
64
+
65
+ this._surface = new JsiSkSurface(CanvasKit, surface);
66
+ this._canvas = this._surface.getCanvas();
67
+ this.redraw();
68
+ }
69
+ }
70
+
71
+ componentDidMount() {
72
+ // Start render loop
73
+ this.tick();
74
+ }
75
+
76
+ componentDidUpdate() {
77
+ this.redraw();
78
+ }
79
+
80
+ componentWillUnmount() {
81
+ this.unsubscribeAll();
82
+ cancelAnimationFrame(this.requestId);
83
+ }
84
+ /**
85
+ * Creates a snapshot from the canvas in the surface
86
+ * @param rect Rect to use as bounds. Optional.
87
+ * @returns An Image object.
88
+ */
89
+
90
+
91
+ makeImageSnapshot(rect) {
92
+ var _this$_surface;
93
+
94
+ return (_this$_surface = this._surface) === null || _this$_surface === void 0 ? void 0 : _this$_surface.makeImageSnapshot(rect);
95
+ }
96
+ /**
97
+ * Override to render
98
+ */
99
+
100
+
101
+ /**
102
+ * Sends a redraw request to the native SkiaView.
103
+ */
104
+ tick() {
105
+ if (this._mode === "continuous" || this._redrawRequests > 0) {
106
+ this._redrawRequests = 0;
107
+
108
+ if (this._canvas) {
109
+ var _this$_surface2;
110
+
111
+ const touches = [...this._touches];
112
+ this._touches = [];
113
+ this.renderInCanvas(this._canvas, touches);
114
+ (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
115
+ }
116
+ }
117
+
118
+ this.requestId = requestAnimationFrame(this.tick.bind(this));
119
+ }
120
+
121
+ redraw() {
122
+ this._redrawRequests++;
123
+ }
124
+ /**
125
+ * Updates the drawing mode for the skia view. This is the same
126
+ * as declaratively setting the mode property on the SkiaView.
127
+ * There are two drawing modes, "continuous" and "default",
128
+ * where the continuous mode will continuously redraw the view and
129
+ * the default mode will only redraw when any of the regular react
130
+ * properties are changed like size and margins.
131
+ * @param mode Drawing mode to use.
132
+ */
133
+
134
+
135
+ setDrawMode(mode) {
136
+ this._mode = mode;
137
+ this.tick();
138
+ }
139
+ /**
140
+ * Registers one or move values as a dependant value of the Skia View. The view will
141
+ * The view will redraw itself when any of the values change.
142
+ * @param values Values to register
143
+ */
144
+
145
+
146
+ registerValues(_values) {
147
+ // Unsubscribe from dependency values
148
+ this.unsubscribeAll(); // Register redraw dependencies on values
149
+
150
+ _values.forEach(v => {
151
+ this._unsubscriptions.push(v.addListener(() => {
152
+ this.redraw();
153
+ }));
154
+ });
155
+ }
156
+
157
+ handleTouchEvent(evt, touchType) {
158
+ this._touches.push({
159
+ id: evt.pointerId,
160
+ x: evt.clientX - evt.currentTarget.getClientRects()[0].left,
161
+ y: evt.clientY - evt.currentTarget.getClientRects()[0].top,
162
+ force: evt.pressure,
163
+ type: touchType,
164
+ timestamp: Date.now()
165
+ });
166
+
167
+ this.redraw();
168
+ }
169
+
170
+ createTouchHandler(touchType) {
171
+ return evt => this.handleTouchEvent(evt, touchType);
172
+ }
173
+
174
+ render() {
175
+ const {
176
+ mode,
177
+ debug = false,
178
+ ...viewProps
179
+ } = this.props;
180
+ return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
181
+ onLayout: this.onLayout.bind(this)
182
+ }), /*#__PURE__*/React.createElement("canvas", {
183
+ ref: this._canvasRef,
184
+ style: {
185
+ display: "flex",
186
+ flex: 1
187
+ },
188
+ onPointerDown: this.createTouchHandler(TouchType.Start),
189
+ onPointerMove: this.createTouchHandler(TouchType.Active),
190
+ onPointerUp: this.createTouchHandler(TouchType.End),
191
+ onPointerCancel: this.createTouchHandler(TouchType.Cancelled),
192
+ onPointerLeave: this.createTouchHandler(TouchType.End),
193
+ onPointerOut: this.createTouchHandler(TouchType.End)
194
+ }));
195
+ }
196
+
197
+ }
198
+ //# sourceMappingURL=SkiaBaseWebView.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["React","PixelRatio","View","JsiSkSurface","TouchType","pd","get","SkiaBaseWebView","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","clientWidth","clientHeight","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","makeImageSnapshot","rect","_redrawRequests","touches","_touches","renderInCanvas","ref","flush","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","createTouchHandler","render","debug","viewProps","display","flex","Start","Active","End","Cancelled"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport abstract class SkiaBaseWebView<\n TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n constructor(props: TProps) {\n super(props);\n this._mode = props.mode ?? \"default\";\n }\n\n private _surface: JsiSkSurface | null = null;\n private _unsubscriptions: Array<() => void> = [];\n private _touches: Array<TouchInfo> = [];\n private _canvas: SkCanvas | null = null;\n private _canvasRef = React.createRef<HTMLCanvasElement>();\n private _mode: DrawMode;\n private _redrawRequests = 0;\n private requestId = 0;\n\n protected width = 0;\n protected height = 0;\n\n private unsubscribeAll() {\n this._unsubscriptions.forEach((u) => u());\n this._unsubscriptions = [];\n }\n\n private onLayout(evt: LayoutChangeEvent) {\n const { CanvasKit } = global;\n const { width, height } = evt.nativeEvent.layout;\n this.width = width;\n this.height = height;\n // Reset canvas / surface on layout change\n if (this._canvasRef.current) {\n const canvas = this._canvasRef.current;\n canvas.width = canvas.clientWidth * pd;\n canvas.height = canvas.clientHeight * pd;\n const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);\n if (!surface) {\n throw new Error(\"Could not create surface\");\n }\n this._surface = new JsiSkSurface(CanvasKit, surface);\n this._canvas = this._surface.getCanvas();\n this.redraw();\n }\n }\n\n componentDidMount() {\n // Start render loop\n this.tick();\n }\n\n componentDidUpdate() {\n this.redraw();\n }\n\n componentWillUnmount() {\n this.unsubscribeAll();\n cancelAnimationFrame(this.requestId);\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n return this._surface?.makeImageSnapshot(rect);\n }\n\n /**\n * Override to render\n */\n protected abstract renderInCanvas(\n canvas: SkCanvas,\n touches: TouchInfo[]\n ): void;\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n private tick() {\n if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n this._redrawRequests = 0;\n if (this._canvas) {\n const touches = [...this._touches];\n this._touches = [];\n this.renderInCanvas(this._canvas!, touches);\n this._surface?.ref.flush();\n }\n }\n this.requestId = requestAnimationFrame(this.tick.bind(this));\n }\n\n public redraw() {\n this._redrawRequests++;\n }\n\n /**\n * Updates the drawing mode for the skia view. This is the same\n * as declaratively setting the mode property on the SkiaView.\n * There are two drawing modes, \"continuous\" and \"default\",\n * where the continuous mode will continuously redraw the view and\n * the default mode will only redraw when any of the regular react\n * properties are changed like size and margins.\n * @param mode Drawing mode to use.\n */\n public setDrawMode(mode: DrawMode) {\n this._mode = mode;\n this.tick();\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(_values: SkiaValue<unknown>[]) {\n // Unsubscribe from dependency values\n this.unsubscribeAll();\n // Register redraw dependencies on values\n _values.forEach((v) => {\n this._unsubscriptions.push(\n v.addListener(() => {\n this.redraw();\n })\n );\n });\n }\n\n private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n this._touches.push({\n id: evt.pointerId,\n x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n force: evt.pressure,\n type: touchType,\n timestamp: Date.now(),\n });\n this.redraw();\n }\n\n createTouchHandler(touchType: TouchType) {\n return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n }\n\n render() {\n const { mode, debug = false, ...viewProps } = this.props;\n return (\n <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n <canvas\n ref={this._canvasRef}\n style={{ display: \"flex\", flex: 1 }}\n onPointerDown={this.createTouchHandler(TouchType.Start)}\n onPointerMove={this.createTouchHandler(TouchType.Active)}\n onPointerUp={this.createTouchHandler(TouchType.End)}\n onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n onPointerLeave={this.createTouchHandler(TouchType.End)}\n onPointerOut={this.createTouchHandler(TouchType.End)}\n />\n </View>\n );\n }\n}\n"],"mappings":"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"}