@shopify/react-native-skia 0.1.136 → 0.1.139

Sign up to get free protection for your applications and to get access to all the features.
Files changed (195) hide show
  1. package/README.md +4 -47
  2. package/android/build.gradle +1 -2
  3. package/cpp/api/JsiSkApi.h +0 -4
  4. package/cpp/api/JsiSkFont.h +0 -19
  5. package/cpp/api/JsiSkMatrix.h +12 -0
  6. package/cpp/api/JsiSkTypeface.h +1 -29
  7. package/lib/commonjs/mock/index.js +0 -4
  8. package/lib/commonjs/mock/index.js.map +1 -1
  9. package/lib/commonjs/renderer/Canvas.js +5 -8
  10. package/lib/commonjs/renderer/Canvas.js.map +1 -1
  11. package/lib/commonjs/renderer/components/Group.js +1 -1
  12. package/lib/commonjs/renderer/components/Group.js.map +1 -1
  13. package/lib/commonjs/renderer/components/text/Glyphs.js +4 -6
  14. package/lib/commonjs/renderer/components/text/Glyphs.js.map +1 -1
  15. package/lib/commonjs/renderer/components/text/Text.js +4 -6
  16. package/lib/commonjs/renderer/components/text/Text.js.map +1 -1
  17. package/lib/commonjs/renderer/components/text/TextPath.js +3 -4
  18. package/lib/commonjs/renderer/components/text/TextPath.js.map +1 -1
  19. package/lib/commonjs/renderer/processors/Font.js +1 -27
  20. package/lib/commonjs/renderer/processors/Font.js.map +1 -1
  21. package/lib/commonjs/renderer/processors/Transform.js +8 -15
  22. package/lib/commonjs/renderer/processors/Transform.js.map +1 -1
  23. package/lib/commonjs/skia/core/Data.js +3 -1
  24. package/lib/commonjs/skia/core/Data.js.map +1 -1
  25. package/lib/commonjs/skia/core/Image.js +4 -1
  26. package/lib/commonjs/skia/core/Image.js.map +1 -1
  27. package/lib/commonjs/skia/core/SVG.js +3 -1
  28. package/lib/commonjs/skia/core/SVG.js.map +1 -1
  29. package/lib/commonjs/skia/core/Typeface.js +4 -1
  30. package/lib/commonjs/skia/core/Typeface.js.map +1 -1
  31. package/lib/commonjs/skia/core/index.js +0 -26
  32. package/lib/commonjs/skia/core/index.js.map +1 -1
  33. package/lib/commonjs/skia/types/Font/Font.js.map +1 -1
  34. package/lib/commonjs/skia/types/Matrix.js +18 -3
  35. package/lib/commonjs/skia/types/Matrix.js.map +1 -1
  36. package/lib/commonjs/skia/types/index.js +0 -13
  37. package/lib/commonjs/skia/types/index.js.map +1 -1
  38. package/lib/commonjs/skia/web/JsiSkFont.js +0 -6
  39. package/lib/commonjs/skia/web/JsiSkFont.js.map +1 -1
  40. package/lib/commonjs/skia/web/JsiSkMatrix.js +4 -0
  41. package/lib/commonjs/skia/web/JsiSkMatrix.js.map +1 -1
  42. package/lib/commonjs/skia/web/JsiSkTextBlobFactory.js +1 -1
  43. package/lib/commonjs/skia/web/JsiSkTextBlobFactory.js.map +1 -1
  44. package/lib/commonjs/skia/web/JsiSkia.js +0 -3
  45. package/lib/commonjs/skia/web/JsiSkia.js.map +1 -1
  46. package/lib/commonjs/values/hooks/useComputedValue.js +1 -8
  47. package/lib/commonjs/values/hooks/useComputedValue.js.map +1 -1
  48. package/lib/commonjs/views/SkiaView.web.js +67 -57
  49. package/lib/commonjs/views/SkiaView.web.js.map +1 -1
  50. package/lib/commonjs/web/LoadSkiaWeb.js +29 -0
  51. package/lib/commonjs/web/LoadSkiaWeb.js.map +1 -0
  52. package/lib/commonjs/web/WithSkiaWeb.js +39 -0
  53. package/lib/commonjs/web/WithSkiaWeb.js.map +1 -0
  54. package/lib/commonjs/web/index.js +22 -12
  55. package/lib/commonjs/web/index.js.map +1 -1
  56. package/lib/module/mock/index.js +0 -4
  57. package/lib/module/mock/index.js.map +1 -1
  58. package/lib/module/renderer/Canvas.js +5 -6
  59. package/lib/module/renderer/Canvas.js.map +1 -1
  60. package/lib/module/renderer/components/Group.js +1 -1
  61. package/lib/module/renderer/components/Group.js.map +1 -1
  62. package/lib/module/renderer/components/text/Glyphs.js +4 -5
  63. package/lib/module/renderer/components/text/Glyphs.js.map +1 -1
  64. package/lib/module/renderer/components/text/Text.js +4 -5
  65. package/lib/module/renderer/components/text/Text.js.map +1 -1
  66. package/lib/module/renderer/components/text/TextPath.js +3 -3
  67. package/lib/module/renderer/components/text/TextPath.js.map +1 -1
  68. package/lib/module/renderer/processors/Font.js +0 -23
  69. package/lib/module/renderer/processors/Font.js.map +1 -1
  70. package/lib/module/renderer/processors/Transform.js +8 -15
  71. package/lib/module/renderer/processors/Transform.js.map +1 -1
  72. package/lib/module/skia/core/Data.js +3 -1
  73. package/lib/module/skia/core/Data.js.map +1 -1
  74. package/lib/module/skia/core/Image.js +2 -1
  75. package/lib/module/skia/core/Image.js.map +1 -1
  76. package/lib/module/skia/core/SVG.js +2 -1
  77. package/lib/module/skia/core/SVG.js.map +1 -1
  78. package/lib/module/skia/core/Typeface.js +2 -1
  79. package/lib/module/skia/core/Typeface.js.map +1 -1
  80. package/lib/module/skia/core/index.js +0 -2
  81. package/lib/module/skia/core/index.js.map +1 -1
  82. package/lib/module/skia/types/Font/Font.js.map +1 -1
  83. package/lib/module/skia/types/Matrix.js +12 -2
  84. package/lib/module/skia/types/Matrix.js.map +1 -1
  85. package/lib/module/skia/types/index.js +0 -1
  86. package/lib/module/skia/types/index.js.map +1 -1
  87. package/lib/module/skia/web/JsiSkFont.js +0 -6
  88. package/lib/module/skia/web/JsiSkFont.js.map +1 -1
  89. package/lib/module/skia/web/JsiSkMatrix.js +4 -0
  90. package/lib/module/skia/web/JsiSkMatrix.js.map +1 -1
  91. package/lib/module/skia/web/JsiSkTextBlobFactory.js +1 -1
  92. package/lib/module/skia/web/JsiSkTextBlobFactory.js.map +1 -1
  93. package/lib/module/skia/web/JsiSkia.js +0 -2
  94. package/lib/module/skia/web/JsiSkia.js.map +1 -1
  95. package/lib/module/values/hooks/useComputedValue.js +0 -4
  96. package/lib/module/values/hooks/useComputedValue.js.map +1 -1
  97. package/lib/module/views/SkiaView.web.js +67 -58
  98. package/lib/module/views/SkiaView.web.js.map +1 -1
  99. package/lib/module/web/LoadSkiaWeb.js +16 -0
  100. package/lib/module/web/LoadSkiaWeb.js.map +1 -0
  101. package/lib/module/web/WithSkiaWeb.js +23 -0
  102. package/lib/module/web/WithSkiaWeb.js.map +1 -0
  103. package/lib/module/web/index.js +2 -9
  104. package/lib/module/web/index.js.map +1 -1
  105. package/lib/typescript/src/renderer/Canvas.d.ts +1 -3
  106. package/lib/typescript/src/renderer/DrawingContext.d.ts +1 -2
  107. package/lib/typescript/src/renderer/processors/Font.d.ts +1 -5
  108. package/lib/typescript/src/renderer/processors/Transform.d.ts +2 -2
  109. package/lib/typescript/src/skia/core/index.d.ts +0 -2
  110. package/lib/typescript/src/skia/types/Font/Font.d.ts +0 -12
  111. package/lib/typescript/src/skia/types/Matrix.d.ts +6 -2
  112. package/lib/typescript/src/skia/types/Skia.d.ts +0 -2
  113. package/lib/typescript/src/skia/types/Typeface/Typeface.d.ts +1 -4
  114. package/lib/typescript/src/skia/types/index.d.ts +0 -1
  115. package/lib/typescript/src/skia/web/JsiSkFont.d.ts +1 -2
  116. package/lib/typescript/src/skia/web/JsiSkMatrix.d.ts +1 -0
  117. package/lib/typescript/src/values/hooks/useComputedValue.d.ts +0 -1
  118. package/lib/typescript/src/views/SkiaView.web.d.ts +9 -11
  119. package/lib/typescript/src/web/LoadSkiaWeb.d.ts +6 -0
  120. package/lib/typescript/src/web/WithSkiaWeb.d.ts +12 -0
  121. package/lib/typescript/src/web/index.d.ts +2 -5
  122. package/package.json +5 -1
  123. package/scripts/setup-canvaskit.js +74 -0
  124. package/src/mock/index.ts +0 -4
  125. package/src/renderer/Canvas.tsx +5 -8
  126. package/src/renderer/DrawingContext.ts +1 -2
  127. package/src/renderer/components/Group.tsx +1 -1
  128. package/src/renderer/components/text/Glyphs.tsx +2 -6
  129. package/src/renderer/components/text/Text.tsx +2 -3
  130. package/src/renderer/components/text/TextPath.tsx +2 -3
  131. package/src/renderer/processors/Font.ts +2 -25
  132. package/src/renderer/processors/Transform.ts +7 -10
  133. package/src/skia/core/Data.ts +3 -1
  134. package/src/skia/core/Image.ts +3 -1
  135. package/src/skia/core/SVG.ts +3 -1
  136. package/src/skia/core/Typeface.ts +4 -6
  137. package/src/skia/core/index.ts +0 -2
  138. package/src/skia/types/Font/Font.ts +0 -13
  139. package/src/skia/types/Matrix.ts +19 -3
  140. package/src/skia/types/Skia.ts +0 -2
  141. package/src/skia/types/Typeface/Typeface.ts +1 -4
  142. package/src/skia/types/index.ts +0 -1
  143. package/src/skia/web/JsiSkFont.ts +0 -9
  144. package/src/skia/web/JsiSkMatrix.ts +4 -0
  145. package/src/skia/web/JsiSkTextBlobFactory.ts +1 -1
  146. package/src/skia/web/JsiSkia.ts +0 -2
  147. package/src/values/hooks/useComputedValue.ts +0 -5
  148. package/src/views/SkiaView.web.tsx +55 -70
  149. package/src/web/LoadSkiaWeb.tsx +24 -0
  150. package/src/web/WithSkiaWeb.tsx +37 -0
  151. package/src/web/index.ts +2 -15
  152. package/cpp/api/JsiSkFontMgr.h +0 -84
  153. package/cpp/api/JsiSkFontMgrFactory.h +0 -48
  154. package/lib/commonjs/skia/core/Paint.js +0 -28
  155. package/lib/commonjs/skia/core/Paint.js.map +0 -1
  156. package/lib/commonjs/skia/core/Path.js +0 -72
  157. package/lib/commonjs/skia/core/Path.js.map +0 -1
  158. package/lib/commonjs/skia/types/FontMgr/FontMgr.js +0 -6
  159. package/lib/commonjs/skia/types/FontMgr/FontMgr.js.map +0 -1
  160. package/lib/commonjs/skia/types/FontMgr/FontMgrFactory.js +0 -6
  161. package/lib/commonjs/skia/types/FontMgr/FontMgrFactory.js.map +0 -1
  162. package/lib/commonjs/skia/types/FontMgr/index.js +0 -32
  163. package/lib/commonjs/skia/types/FontMgr/index.js.map +0 -1
  164. package/lib/commonjs/skia/web/JsiSkFontMgr.js +0 -33
  165. package/lib/commonjs/skia/web/JsiSkFontMgr.js.map +0 -1
  166. package/lib/commonjs/skia/web/JsiSkFontMgrFactory.js +0 -25
  167. package/lib/commonjs/skia/web/JsiSkFontMgrFactory.js.map +0 -1
  168. package/lib/module/skia/core/Paint.js +0 -17
  169. package/lib/module/skia/core/Paint.js.map +0 -1
  170. package/lib/module/skia/core/Path.js +0 -53
  171. package/lib/module/skia/core/Path.js.map +0 -1
  172. package/lib/module/skia/types/FontMgr/FontMgr.js +0 -2
  173. package/lib/module/skia/types/FontMgr/FontMgr.js.map +0 -1
  174. package/lib/module/skia/types/FontMgr/FontMgrFactory.js +0 -2
  175. package/lib/module/skia/types/FontMgr/FontMgrFactory.js.map +0 -1
  176. package/lib/module/skia/types/FontMgr/index.js +0 -3
  177. package/lib/module/skia/types/FontMgr/index.js.map +0 -1
  178. package/lib/module/skia/web/JsiSkFontMgr.js +0 -23
  179. package/lib/module/skia/web/JsiSkFontMgr.js.map +0 -1
  180. package/lib/module/skia/web/JsiSkFontMgrFactory.js +0 -14
  181. package/lib/module/skia/web/JsiSkFontMgrFactory.js.map +0 -1
  182. package/lib/typescript/src/skia/core/Paint.d.ts +0 -6
  183. package/lib/typescript/src/skia/core/Path.d.ts +0 -21
  184. package/lib/typescript/src/skia/types/FontMgr/FontMgr.d.ts +0 -18
  185. package/lib/typescript/src/skia/types/FontMgr/FontMgrFactory.d.ts +0 -4
  186. package/lib/typescript/src/skia/types/FontMgr/index.d.ts +0 -2
  187. package/lib/typescript/src/skia/web/JsiSkFontMgr.d.ts +0 -9
  188. package/lib/typescript/src/skia/web/JsiSkFontMgrFactory.d.ts +0 -8
  189. package/src/skia/core/Paint.ts +0 -22
  190. package/src/skia/core/Path.ts +0 -60
  191. package/src/skia/types/FontMgr/FontMgr.ts +0 -24
  192. package/src/skia/types/FontMgr/FontMgrFactory.ts +0 -12
  193. package/src/skia/types/FontMgr/index.ts +0 -2
  194. package/src/skia/web/JsiSkFontMgr.ts +0 -38
  195. package/src/skia/web/JsiSkFontMgrFactory.ts +0 -18
@@ -2,7 +2,7 @@
2
2
  import React from "react";
3
3
  import type { PointerEvent } from "react";
4
4
  import type { LayoutChangeEvent } from "react-native";
5
- import { View } from "react-native";
5
+ import { PixelRatio, View } from "react-native";
6
6
 
7
7
  import type { SkRect, SkCanvas } from "../skia/types";
8
8
  import type { SkiaValue } from "../values";
@@ -11,13 +11,11 @@ import { JsiSkSurface } from "../skia/web/JsiSkSurface";
11
11
  import type { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from "./types";
12
12
  import { TouchType } from "./types";
13
13
 
14
- export class SkiaView extends React.Component<
15
- SkiaViewProps,
16
- { width: number; height: number }
17
- > {
14
+ const pd = PixelRatio.get();
15
+
16
+ export class SkiaView extends React.Component<SkiaViewProps> {
18
17
  constructor(props: SkiaViewProps) {
19
18
  super(props);
20
- this.state = { width: -1, height: -1 };
21
19
  this._mode = props.mode ?? "default";
22
20
  }
23
21
 
@@ -25,10 +23,12 @@ export class SkiaView extends React.Component<
25
23
  private _unsubscriptions: Array<() => void> = [];
26
24
  private _touches: Array<TouchInfo> = [];
27
25
  private _canvas: SkCanvas | null = null;
28
- private _canvasRef: React.RefObject<HTMLCanvasElement> = React.createRef();
26
+ private _canvasRef = React.createRef<HTMLCanvasElement>();
29
27
  private _mode: DrawMode;
30
28
  private _redrawRequests = 0;
31
- private _unmounted = false;
29
+ private width = 0;
30
+ private height = 0;
31
+ private requestId = 0;
32
32
 
33
33
  private unsubscribeAll() {
34
34
  this._unsubscriptions.forEach((u) => u());
@@ -36,39 +36,37 @@ export class SkiaView extends React.Component<
36
36
  }
37
37
 
38
38
  private onLayout(evt: LayoutChangeEvent) {
39
- this.setState(
40
- {
41
- width: evt.nativeEvent.layout.width,
42
- height: evt.nativeEvent.layout.height,
43
- },
44
- () => {
45
- // Reset canvas / surface on layout change
46
- if (this._canvasRef.current) {
47
- // Create surface
48
- this._surface = new JsiSkSurface(
49
- global.CanvasKit,
50
- global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)!
51
- );
52
- // Get canvas and repaint
53
- if (this._surface) {
54
- this._canvas = this._surface.getCanvas();
55
- this.requestRedraw();
56
- }
57
- }
39
+ const { CanvasKit } = global;
40
+ const { width, height } = evt.nativeEvent.layout;
41
+ this.width = width;
42
+ this.height = height;
43
+ // Reset canvas / surface on layout change
44
+ if (this._canvasRef.current) {
45
+ const canvas = this._canvasRef.current;
46
+ canvas.width = canvas.clientWidth * pd;
47
+ canvas.height = canvas.clientHeight * pd;
48
+ const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
49
+ if (!surface) {
50
+ throw new Error("Could not create surface");
58
51
  }
59
- );
52
+ this._surface = new JsiSkSurface(CanvasKit, surface);
53
+ this._canvas = this._surface.getCanvas();
54
+ this.redraw();
55
+ }
60
56
  }
61
57
 
62
58
  componentDidMount() {
63
59
  // Start render loop
60
+ this.tick();
61
+ }
62
+
63
+ componentDidUpdate() {
64
64
  this.redraw();
65
65
  }
66
66
 
67
67
  componentWillUnmount() {
68
68
  this.unsubscribeAll();
69
- this._surface = null;
70
- this._canvas = null;
71
- this._unmounted = true;
69
+ cancelAnimationFrame(this.requestId);
72
70
  }
73
71
 
74
72
  /**
@@ -83,34 +81,32 @@ export class SkiaView extends React.Component<
83
81
  /**
84
82
  * Sends a redraw request to the native SkiaView.
85
83
  */
86
- private redraw() {
84
+ private tick() {
87
85
  if (this._mode === "continuous" || this._redrawRequests > 0) {
88
86
  this._redrawRequests = 0;
89
- if (
90
- this._canvas &&
91
- this.props.onDraw &&
92
- this.state.height !== -1 &&
93
- this.state.width !== -1
94
- ) {
87
+ if (this._canvas && this.props.onDraw) {
95
88
  const touches = [...this._touches];
96
89
  this._touches = [];
97
90
  const info: DrawingInfo = {
98
- height: this.state.height,
99
- width: this.state.width,
91
+ height: this.height,
92
+ width: this.width,
100
93
  timestamp: Date.now(),
101
- touches: [touches],
94
+ touches: touches.map((t) => [t]),
102
95
  };
103
- this.props.onDraw && this.props.onDraw(this._canvas!, info);
96
+ if (this.props.onDraw) {
97
+ const canvas = this._canvas!;
98
+ canvas.save();
99
+ canvas.scale(pd, pd);
100
+ this.props.onDraw(canvas, info);
101
+ canvas.restore();
102
+ }
104
103
  this._surface?.ref.flush();
105
104
  }
106
105
  }
107
- // Always request a new redraw as long as we're not unmounted
108
- if (!this._unmounted) {
109
- requestAnimationFrame(this.redraw.bind(this));
110
- }
106
+ this.requestId = requestAnimationFrame(this.tick.bind(this));
111
107
  }
112
108
 
113
- public requestRedraw() {
109
+ public redraw() {
114
110
  this._redrawRequests++;
115
111
  }
116
112
 
@@ -125,7 +121,7 @@ export class SkiaView extends React.Component<
125
121
  */
126
122
  public setDrawMode(mode: DrawMode) {
127
123
  this._mode = mode;
128
- this.redraw();
124
+ this.tick();
129
125
  }
130
126
 
131
127
  /**
@@ -140,7 +136,7 @@ export class SkiaView extends React.Component<
140
136
  _values.forEach((v) => {
141
137
  this._unsubscriptions.push(
142
138
  v.addListener(() => {
143
- this.requestRedraw();
139
+ this.redraw();
144
140
  })
145
141
  );
146
142
  });
@@ -155,23 +151,11 @@ export class SkiaView extends React.Component<
155
151
  type: touchType,
156
152
  timestamp: Date.now(),
157
153
  });
158
- this.requestRedraw();
159
- }
160
-
161
- handleTouchStart(evt: PointerEvent) {
162
- this.handleTouchEvent(evt, TouchType.Start);
163
- }
164
-
165
- handleTouchMove(evt: PointerEvent) {
166
- this.handleTouchEvent(evt, TouchType.Active);
167
- }
168
-
169
- handleTouchEnd(evt: PointerEvent) {
170
- this.handleTouchEvent(evt, TouchType.Cancelled);
154
+ this.redraw();
171
155
  }
172
156
 
173
- handleTouchCancel(evt: PointerEvent) {
174
- this.handleTouchEvent(evt, TouchType.End);
157
+ createTouchHandler(touchType: TouchType) {
158
+ return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);
175
159
  }
176
160
 
177
161
  render() {
@@ -180,12 +164,13 @@ export class SkiaView extends React.Component<
180
164
  <View {...viewProps} onLayout={this.onLayout.bind(this)}>
181
165
  <canvas
182
166
  ref={this._canvasRef}
183
- width={this.state.width}
184
- height={this.state.height}
185
- onPointerDown={this.handleTouchStart.bind(this)}
186
- onPointerMove={this.handleTouchMove.bind(this)}
187
- onPointerUp={this.handleTouchEnd.bind(this)}
188
- onPointerCancel={this.handleTouchCancel.bind(this)}
167
+ style={{ display: "flex", flex: 1 }}
168
+ onPointerDown={this.createTouchHandler(TouchType.Start)}
169
+ onPointerMove={this.createTouchHandler(TouchType.Active)}
170
+ onPointerUp={this.createTouchHandler(TouchType.End)}
171
+ onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}
172
+ onPointerLeave={this.createTouchHandler(TouchType.End)}
173
+ onPointerOut={this.createTouchHandler(TouchType.End)}
189
174
  />
190
175
  </View>
191
176
  );
@@ -0,0 +1,24 @@
1
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
2
+ // @ts-expect-error
3
+ import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
4
+ import type {
5
+ CanvasKit as CanvasKitType,
6
+ CanvasKitInitOptions,
7
+ } from "canvaskit-wasm";
8
+
9
+ declare global {
10
+ var CanvasKit: CanvasKitType;
11
+ }
12
+
13
+ export const LoadSkiaWeb = async (opts?: CanvasKitInitOptions) => {
14
+ if (global.CanvasKit !== undefined) {
15
+ return;
16
+ }
17
+ const CanvasKit = await CanvasKitInit(opts);
18
+ // The CanvasKit API is stored on the global object and used
19
+ // to create the JsiSKApi in the Skia.web.ts file.
20
+ global.CanvasKit = CanvasKit;
21
+ };
22
+
23
+ // We keep this function for backward compatibility
24
+ export const LoadSkia = LoadSkiaWeb;
@@ -0,0 +1,37 @@
1
+ import type { ComponentProps, ComponentType } from "react";
2
+ import React, { useMemo, lazy, Suspense } from "react";
3
+ import { Platform } from "react-native";
4
+
5
+ import { LoadSkiaWeb } from "./LoadSkiaWeb";
6
+
7
+ interface WithSkiaProps {
8
+ fallback?: ComponentProps<typeof Suspense>["fallback"];
9
+ getComponent: () => Promise<{ default: ComponentType }>;
10
+ opts?: Parameters<typeof LoadSkiaWeb>[0];
11
+ }
12
+
13
+ export const WithSkiaWeb = ({
14
+ getComponent,
15
+ fallback,
16
+ opts,
17
+ }: WithSkiaProps) => {
18
+ const Inner = useMemo(
19
+ () =>
20
+ lazy(async () => {
21
+ if (Platform.OS === "web") {
22
+ await LoadSkiaWeb(opts);
23
+ } else {
24
+ console.warn(
25
+ "<WithSkiaWeb /> is only necessary on web. Consider not using on native."
26
+ );
27
+ }
28
+ return getComponent();
29
+ }),
30
+ [getComponent, opts]
31
+ );
32
+ return (
33
+ <Suspense fallback={fallback ?? null}>
34
+ <Inner />
35
+ </Suspense>
36
+ );
37
+ };
package/src/web/index.ts CHANGED
@@ -1,15 +1,2 @@
1
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
2
- // @ts-expect-error
3
- import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
4
- import type { CanvasKit as CanvasKitType } from "canvaskit-wasm";
5
-
6
- declare global {
7
- var CanvasKit: CanvasKitType;
8
- }
9
-
10
- export const LoadSkia = async () => {
11
- const CanvasKit = await CanvasKitInit();
12
- // The CanvasKit API is stored on the global object and used
13
- // to create the JsiSKApi in the Skia.web.ts file.
14
- global.CanvasKit = CanvasKit;
15
- };
1
+ export * from "./LoadSkiaWeb";
2
+ export * from "./WithSkiaWeb";
@@ -1,84 +0,0 @@
1
- #pragma once
2
-
3
- #include <memory>
4
- #include <utility>
5
-
6
- #include <jsi/jsi.h>
7
-
8
- #include "JsiSkHostObjects.h"
9
-
10
- #pragma clang diagnostic push
11
- #pragma clang diagnostic ignored "-Wdocumentation"
12
-
13
- #include <SkFont.h>
14
- #include <SkFontMgr.h>
15
- #include <SkTypeface.h>
16
-
17
- #pragma clang diagnostic pop
18
-
19
-
20
- namespace RNSkia {
21
-
22
- using namespace facebook;
23
-
24
- class JsiSkFontMgr : public JsiSkWrappingSkPtrHostObject<SkFontMgr> {
25
- public:
26
-
27
- // TODO: declare in JsiSkWrappingSkPtrHostObject via extra template parameter?
28
- JSI_PROPERTY_GET(__typename__) {
29
- return jsi::String::createFromUtf8(runtime, "FontMgr");
30
- }
31
-
32
- JSI_EXPORT_PROPERTY_GETTERS(JSI_EXPORT_PROP_GET(JsiSkFontMgr, __typename__))
33
-
34
- JsiSkFontMgr(std::shared_ptr<RNSkPlatformContext> context,
35
- sk_sp<SkFontMgr> fontMgr)
36
- : JsiSkWrappingSkPtrHostObject(std::move(context), std::move(fontMgr)) {}
37
-
38
- JSI_HOST_FUNCTION(countFamilies) {
39
- auto families = getObject()->countFamilies();
40
- return jsi::Value(families);
41
- }
42
-
43
- JSI_HOST_FUNCTION(getFamilyName) {
44
- auto i = arguments[0].asNumber();
45
- SkString familyName;
46
- getObject()->getFamilyName(i, &familyName);
47
- return jsi::String::createFromUtf8(runtime, familyName.c_str());
48
- }
49
-
50
- JSI_HOST_FUNCTION(matchFamilyStyle) {
51
- auto familyName = arguments[0].asString(runtime).utf8(runtime);
52
- auto fontStyle = SkFontStyle::Normal();
53
- if (count >= 2) {
54
- auto object = arguments[1].asObject(runtime);
55
- int weight = object.getProperty(runtime, "weight").asNumber();
56
- int width = object.getProperty(runtime, "width").asNumber();
57
- SkFontStyle::Slant slant = (SkFontStyle::Slant)object.getProperty(runtime, "slant").asNumber();
58
- fontStyle = SkFontStyle(width, weight, slant);
59
- }
60
- auto typeface = getObject()->matchFamilyStyle(familyName.c_str(), std::move(fontStyle));
61
- if (typeface == nullptr) {
62
- return jsi::Value::null();
63
- }
64
- return jsi::Object::createFromHostObject(
65
- runtime, std::make_shared<JsiSkTypeface>(getContext(), sk_sp<SkTypeface>(std::move(typeface))));;
66
- }
67
-
68
- JSI_EXPORT_FUNCTIONS(
69
- JSI_EXPORT_FUNC(JsiSkFontMgr, countFamilies),
70
- JSI_EXPORT_FUNC(JsiSkFontMgr, getFamilyName),
71
- JSI_EXPORT_FUNC(JsiSkFontMgr, matchFamilyStyle)
72
- )
73
-
74
- /**
75
- Returns the underlying object from a host object of this type
76
- */
77
- static sk_sp<SkFontMgr> fromValue(jsi::Runtime &runtime,
78
- const jsi::Value &obj) {
79
- return obj.asObject(runtime)
80
- .asHostObject<JsiSkFontMgr>(runtime)
81
- ->getObject();
82
- }
83
- };
84
- } // namespace RNSkia
@@ -1,48 +0,0 @@
1
- #pragma once
2
-
3
- #include <memory>
4
- #include <utility>
5
-
6
- #include <jsi/jsi.h>
7
-
8
- #include "JsiSkHostObjects.h"
9
- #include "JsiSkFontMgr.h"
10
- #include "JsiSkData.h"
11
- #include <SkFontMgr.h>
12
-
13
-
14
- namespace RNSkia {
15
-
16
- using namespace facebook;
17
-
18
- class JsiSkFontMgrFactory : public JsiSkHostObject {
19
- public:
20
- // JSI_HOST_FUNCTION(FromData) {
21
- // std::vector<sk_sp<SkData>> data;
22
- // for (int i = 0; i < count; i++) {
23
- // auto d = JsiSkData::fromValue(
24
- // runtime, arguments[i]);
25
- // data.push_back(d);
26
- // }
27
- //
28
- // auto fontMgr = SkFontMgr_New_Custom_Data(data.data(), data.size());
29
- // return jsi::Object::createFromHostObject(
30
- // runtime, std::make_shared<JsiSkFontMgr>(getContext(), fontMgr));
31
- // }
32
-
33
- JSI_HOST_FUNCTION(RefDefault) {
34
- auto fontMgr = SkFontMgr::RefDefault();
35
- return jsi::Object::createFromHostObject(
36
- runtime, std::make_shared<JsiSkFontMgr>(getContext(), std::move(fontMgr)));
37
- }
38
-
39
- JSI_EXPORT_FUNCTIONS(
40
- //JSI_EXPORT_FUNC(JsiSkFontMgrFactory, FromData),
41
- JSI_EXPORT_FUNC(JsiSkFontMgrFactory, RefDefault)
42
- )
43
-
44
- JsiSkFontMgrFactory(std::shared_ptr<RNSkPlatformContext> context)
45
- : JsiSkHostObject(std::move(context)) {}
46
- };
47
-
48
- } // namespace RNSkia
@@ -1,28 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.usePaint = void 0;
7
-
8
- var _react = require("react");
9
-
10
- var _Skia = require("../Skia");
11
-
12
- /**
13
- * Returns a Skia Paint object
14
- * */
15
- const usePaint = (initializer, deps) => (0, _react.useMemo)(() => {
16
- console.warn("usePaint() is deprecated. Use Skia.Paint() instead.");
17
-
18
- const p = _Skia.Skia.Paint();
19
-
20
- if (initializer) {
21
- initializer(p);
22
- }
23
-
24
- return p; // eslint-disable-next-line react-hooks/exhaustive-deps
25
- }, deps);
26
-
27
- exports.usePaint = usePaint;
28
- //# sourceMappingURL=Paint.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["Paint.ts"],"names":["usePaint","initializer","deps","console","warn","p","Skia","Paint"],"mappings":";;;;;;;AACA;;AAEA;;AAGA;AACA;AACA;AACO,MAAMA,QAAQ,GAAG,CACtBC,WADsB,EAEtBC,IAFsB,KAItB,oBAAQ,MAAM;AACZC,EAAAA,OAAO,CAACC,IAAR,CAAa,qDAAb;;AACA,QAAMC,CAAC,GAAGC,WAAKC,KAAL,EAAV;;AACA,MAAIN,WAAJ,EAAiB;AACfA,IAAAA,WAAW,CAACI,CAAD,CAAX;AACD;;AACD,SAAOA,CAAP,CANY,CAOZ;AACD,CARD,EAQGH,IARH,CAJK","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { Skia } from \"../Skia\";\nimport type { SkPaint } from \"../types\";\n\n/**\n * Returns a Skia Paint object\n * */\nexport const usePaint = (\n initializer?: (paint: SkPaint) => void,\n deps?: DependencyList\n) =>\n useMemo(() => {\n console.warn(\"usePaint() is deprecated. Use Skia.Paint() instead.\");\n const p = Skia.Paint();\n if (initializer) {\n initializer(p);\n }\n return p;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n"]}
@@ -1,72 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useTextPath = exports.useSvgPath = exports.usePath = void 0;
7
-
8
- var _react = require("react");
9
-
10
- var _Skia = require("../Skia");
11
-
12
- /**
13
- * Memoizes and returns a Skia Path object with optional initializer
14
- * @param initializer
15
- * @param deps
16
- * @returns
17
- */
18
- const usePath = (initializer, deps) => (0, _react.useMemo)(() => {
19
- console.warn("usePath() is deprecated. Use Skia.Path.Make() instead.");
20
-
21
- const p = _Skia.Skia.Path.Make();
22
-
23
- if (initializer) {
24
- initializer(p);
25
- }
26
-
27
- return p; // eslint-disable-next-line react-hooks/exhaustive-deps
28
- }, [initializer, deps]);
29
- /**
30
- * Initializes a Skia Path from an svg path string
31
- * @param svgpath
32
- * @returns
33
- */
34
- // MakeFromSVGString
35
-
36
-
37
- exports.usePath = usePath;
38
-
39
- const useSvgPath = svgpath => (0, _react.useMemo)(() => {
40
- console.warn("useSvgPath() is deprecated. Use Skia.Path.MakeFromSVGString() instead.");
41
-
42
- const p = _Skia.Skia.Path.MakeFromSVGString(svgpath);
43
-
44
- if (p === null) {
45
- throw new Error(`Invalid SVG path: ${svgpath}`);
46
- }
47
-
48
- return p;
49
- }, [svgpath]);
50
- /**
51
- * Initializes a Skia Path from a text string
52
- * @param svgpath
53
- * @returns
54
- */
55
-
56
-
57
- exports.useSvgPath = useSvgPath;
58
-
59
- const useTextPath = (text, x, y, font) => (0, _react.useMemo)(() => {
60
- console.warn("useTextPath() is deprecated. Use Skia.Path.MakeFromText() instead.");
61
-
62
- const p = _Skia.Skia.Path.MakeFromText(text, x, y, font);
63
-
64
- if (p === null) {
65
- throw new Error("Text path creation failed.");
66
- }
67
-
68
- return p;
69
- }, [text, x, y, font]);
70
-
71
- exports.useTextPath = useTextPath;
72
- //# sourceMappingURL=Path.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["Path.ts"],"names":["usePath","initializer","deps","console","warn","p","Skia","Path","Make","useSvgPath","svgpath","MakeFromSVGString","Error","useTextPath","text","x","y","font","MakeFromText"],"mappings":";;;;;;;AACA;;AAEA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,OAAO,GAAG,CACrBC,WADqB,EAErBC,IAFqB,KAIrB,oBAAQ,MAAM;AACZC,EAAAA,OAAO,CAACC,IAAR,CAAa,wDAAb;;AACA,QAAMC,CAAC,GAAGC,WAAKC,IAAL,CAAUC,IAAV,EAAV;;AACA,MAAIP,WAAJ,EAAiB;AACfA,IAAAA,WAAW,CAACI,CAAD,CAAX;AACD;;AACD,SAAOA,CAAP,CANY,CAOZ;AACD,CARD,EAQG,CAACJ,WAAD,EAAcC,IAAd,CARH,CAJK;AAcP;AACA;AACA;AACA;AACA;AACA;;;;;AACO,MAAMO,UAAU,GAAIC,OAAD,IACxB,oBAAQ,MAAM;AACZP,EAAAA,OAAO,CAACC,IAAR,CACE,wEADF;;AAGA,QAAMC,CAAC,GAAGC,WAAKC,IAAL,CAAUI,iBAAV,CAA4BD,OAA5B,CAAV;;AACA,MAAIL,CAAC,KAAK,IAAV,EAAgB;AACd,UAAM,IAAIO,KAAJ,CAAW,qBAAoBF,OAAQ,EAAvC,CAAN;AACD;;AACD,SAAOL,CAAP;AACD,CATD,EASG,CAACK,OAAD,CATH,CADK;AAYP;AACA;AACA;AACA;AACA;;;;;AACO,MAAMG,WAAW,GAAG,CAACC,IAAD,EAAeC,CAAf,EAA0BC,CAA1B,EAAqCC,IAArC,KACzB,oBAAQ,MAAM;AACZd,EAAAA,OAAO,CAACC,IAAR,CACE,oEADF;;AAGA,QAAMC,CAAC,GAAGC,WAAKC,IAAL,CAAUW,YAAV,CAAuBJ,IAAvB,EAA6BC,CAA7B,EAAgCC,CAAhC,EAAmCC,IAAnC,CAAV;;AACA,MAAIZ,CAAC,KAAK,IAAV,EAAgB;AACd,UAAM,IAAIO,KAAJ,CAAU,4BAAV,CAAN;AACD;;AACD,SAAOP,CAAP;AACD,CATD,EASG,CAACS,IAAD,EAAOC,CAAP,EAAUC,CAAV,EAAaC,IAAb,CATH,CADK","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { Skia } from \"../Skia\";\nimport type { SkFont, SkPath } from \"../types\";\n\n/**\n * Memoizes and returns a Skia Path object with optional initializer\n * @param initializer\n * @param deps\n * @returns\n */\nexport const usePath = (\n initializer?: (path: SkPath) => void,\n deps?: DependencyList\n) =>\n useMemo(() => {\n console.warn(\"usePath() is deprecated. Use Skia.Path.Make() instead.\");\n const p = Skia.Path.Make();\n if (initializer) {\n initializer(p);\n }\n return p;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [initializer, deps]);\n\n/**\n * Initializes a Skia Path from an svg path string\n * @param svgpath\n * @returns\n */\n// MakeFromSVGString\nexport const useSvgPath = (svgpath: string) =>\n useMemo(() => {\n console.warn(\n \"useSvgPath() is deprecated. Use Skia.Path.MakeFromSVGString() instead.\"\n );\n const p = Skia.Path.MakeFromSVGString(svgpath);\n if (p === null) {\n throw new Error(`Invalid SVG path: ${svgpath}`);\n }\n return p;\n }, [svgpath]);\n\n/**\n * Initializes a Skia Path from a text string\n * @param svgpath\n * @returns\n */\nexport const useTextPath = (text: string, x: number, y: number, font: SkFont) =>\n useMemo(() => {\n console.warn(\n \"useTextPath() is deprecated. Use Skia.Path.MakeFromText() instead.\"\n );\n const p = Skia.Path.MakeFromText(text, x, y, font);\n if (p === null) {\n throw new Error(\"Text path creation failed.\");\n }\n return p;\n }, [text, x, y, font]);\n"]}
@@ -1,6 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- //# sourceMappingURL=FontMgr.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
@@ -1,6 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- //# sourceMappingURL=FontMgrFactory.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
@@ -1,32 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
-
7
- var _FontMgrFactory = require("./FontMgrFactory");
8
-
9
- Object.keys(_FontMgrFactory).forEach(function (key) {
10
- if (key === "default" || key === "__esModule") return;
11
- if (key in exports && exports[key] === _FontMgrFactory[key]) return;
12
- Object.defineProperty(exports, key, {
13
- enumerable: true,
14
- get: function () {
15
- return _FontMgrFactory[key];
16
- }
17
- });
18
- });
19
-
20
- var _FontMgr = require("./FontMgr");
21
-
22
- Object.keys(_FontMgr).forEach(function (key) {
23
- if (key === "default" || key === "__esModule") return;
24
- if (key in exports && exports[key] === _FontMgr[key]) return;
25
- Object.defineProperty(exports, key, {
26
- enumerable: true,
27
- get: function () {
28
- return _FontMgr[key];
29
- }
30
- });
31
- });
32
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./FontMgrFactory\";\nexport * from \"./FontMgr\";\n"]}
@@ -1,33 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.JsiSkFontMgr = void 0;
7
-
8
- var _Host = require("./Host");
9
-
10
- class JsiSkFontMgr extends _Host.HostObject {
11
- constructor(CanvasKit) {
12
- super(CanvasKit, null, "FontMgr");
13
- }
14
-
15
- countFamilies() {
16
- console.warn("countFamilies() is deprecated. It returns 0 on React Native Web");
17
- return 0;
18
- }
19
-
20
- getFamilyName(_index) {
21
- console.warn("getFamilyName() is deprecated. It returns an empty string on React Native Web");
22
- return "";
23
- }
24
-
25
- matchFamilyStyle(_familyName, _fontStyle) {
26
- console.warn("matchFamilyStyle() is deprecated. It returns null on React Native Web");
27
- return null;
28
- }
29
-
30
- }
31
-
32
- exports.JsiSkFontMgr = JsiSkFontMgr;
33
- //# sourceMappingURL=JsiSkFontMgr.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["JsiSkFontMgr.ts"],"names":["JsiSkFontMgr","HostObject","constructor","CanvasKit","countFamilies","console","warn","getFamilyName","_index","matchFamilyStyle","_familyName","_fontStyle"],"mappings":";;;;;;;AAIA;;AAEO,MAAMA,YAAN,SACGC,gBADH,CAGP;AACEC,EAAAA,WAAW,CAACC,SAAD,EAAuB;AAChC,UAAMA,SAAN,EAAiB,IAAjB,EAAuB,SAAvB;AACD;;AAEDC,EAAAA,aAAa,GAAG;AACdC,IAAAA,OAAO,CAACC,IAAR,CACE,iEADF;AAGA,WAAO,CAAP;AACD;;AAEDC,EAAAA,aAAa,CAACC,MAAD,EAAiB;AAC5BH,IAAAA,OAAO,CAACC,IAAR,CACE,+EADF;AAGA,WAAO,EAAP;AACD;;AAEDG,EAAAA,gBAAgB,CACdC,WADc,EAEdC,UAFc,EAGK;AACnBN,IAAAA,OAAO,CAACC,IAAR,CACE,uEADF;AAGA,WAAO,IAAP;AACD;;AA3BH","sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type { FontStyle, SkFontMgr, SkTypeface } from \"../types\";\n\nimport { HostObject } from \"./Host\";\n\nexport class JsiSkFontMgr\n extends HostObject<null, \"FontMgr\">\n implements SkFontMgr\n{\n constructor(CanvasKit: CanvasKit) {\n super(CanvasKit, null, \"FontMgr\");\n }\n\n countFamilies() {\n console.warn(\n \"countFamilies() is deprecated. It returns 0 on React Native Web\"\n );\n return 0;\n }\n\n getFamilyName(_index: number) {\n console.warn(\n \"getFamilyName() is deprecated. It returns an empty string on React Native Web\"\n );\n return \"\";\n }\n\n matchFamilyStyle(\n _familyName: string,\n _fontStyle?: FontStyle\n ): SkTypeface | null {\n console.warn(\n \"matchFamilyStyle() is deprecated. It returns null on React Native Web\"\n );\n return null;\n }\n}\n"]}
@@ -1,25 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.JsiSkFontMgrFactory = void 0;
7
-
8
- var _Host = require("./Host");
9
-
10
- var _JsiSkFontMgr = require("./JsiSkFontMgr");
11
-
12
- /*global atob*/
13
- class JsiSkFontMgrFactory extends _Host.Host {
14
- constructor(CanvasKit) {
15
- super(CanvasKit);
16
- }
17
-
18
- RefDefault() {
19
- return new _JsiSkFontMgr.JsiSkFontMgr(this.CanvasKit);
20
- }
21
-
22
- }
23
-
24
- exports.JsiSkFontMgrFactory = JsiSkFontMgrFactory;
25
- //# sourceMappingURL=JsiSkFontMgrFactory.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["JsiSkFontMgrFactory.ts"],"names":["JsiSkFontMgrFactory","Host","constructor","CanvasKit","RefDefault","JsiSkFontMgr"],"mappings":";;;;;;;AAMA;;AACA;;AAPA;AASO,MAAMA,mBAAN,SAAkCC,UAAlC,CAAiE;AACtEC,EAAAA,WAAW,CAACC,SAAD,EAAuB;AAChC,UAAMA,SAAN;AACD;;AAEDC,EAAAA,UAAU,GAAc;AACtB,WAAO,IAAIC,0BAAJ,CAAiB,KAAKF,SAAtB,CAAP;AACD;;AAPqE","sourcesContent":["/*global atob*/\nimport type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type { SkFontMgr } from \"../types\";\nimport type { FontMgrFactory } from \"../types/FontMgr/FontMgrFactory\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkFontMgr } from \"./JsiSkFontMgr\";\n\nexport class JsiSkFontMgrFactory extends Host implements FontMgrFactory {\n constructor(CanvasKit: CanvasKit) {\n super(CanvasKit);\n }\n\n RefDefault(): SkFontMgr {\n return new JsiSkFontMgr(this.CanvasKit);\n }\n}\n"]}