@shopify/react-native-skia 0.1.138 → 0.1.139

Sign up to get free protection for your applications and to get access to all the features.
Files changed (147) hide show
  1. package/cpp/api/JsiSkApi.h +0 -4
  2. package/cpp/api/JsiSkFont.h +0 -19
  3. package/lib/commonjs/mock/index.js +0 -4
  4. package/lib/commonjs/mock/index.js.map +1 -1
  5. package/lib/commonjs/renderer/Canvas.js +5 -8
  6. package/lib/commonjs/renderer/Canvas.js.map +1 -1
  7. package/lib/commonjs/renderer/components/text/Glyphs.js +4 -6
  8. package/lib/commonjs/renderer/components/text/Glyphs.js.map +1 -1
  9. package/lib/commonjs/renderer/components/text/Text.js +4 -6
  10. package/lib/commonjs/renderer/components/text/Text.js.map +1 -1
  11. package/lib/commonjs/renderer/components/text/TextPath.js +3 -4
  12. package/lib/commonjs/renderer/components/text/TextPath.js.map +1 -1
  13. package/lib/commonjs/renderer/processors/Font.js +1 -27
  14. package/lib/commonjs/renderer/processors/Font.js.map +1 -1
  15. package/lib/commonjs/skia/core/Data.js +4 -5
  16. package/lib/commonjs/skia/core/Data.js.map +1 -1
  17. package/lib/commonjs/skia/core/Image.js +4 -1
  18. package/lib/commonjs/skia/core/Image.js.map +1 -1
  19. package/lib/commonjs/skia/core/SVG.js +3 -1
  20. package/lib/commonjs/skia/core/SVG.js.map +1 -1
  21. package/lib/commonjs/skia/core/Typeface.js +4 -1
  22. package/lib/commonjs/skia/core/Typeface.js.map +1 -1
  23. package/lib/commonjs/skia/core/index.js +0 -26
  24. package/lib/commonjs/skia/core/index.js.map +1 -1
  25. package/lib/commonjs/skia/types/Font/Font.js.map +1 -1
  26. package/lib/commonjs/skia/types/index.js +0 -13
  27. package/lib/commonjs/skia/types/index.js.map +1 -1
  28. package/lib/commonjs/skia/web/JsiSkFont.js +0 -6
  29. package/lib/commonjs/skia/web/JsiSkFont.js.map +1 -1
  30. package/lib/commonjs/skia/web/JsiSkTextBlobFactory.js +1 -1
  31. package/lib/commonjs/skia/web/JsiSkTextBlobFactory.js.map +1 -1
  32. package/lib/commonjs/skia/web/JsiSkia.js +0 -3
  33. package/lib/commonjs/skia/web/JsiSkia.js.map +1 -1
  34. package/lib/commonjs/values/hooks/useComputedValue.js +1 -8
  35. package/lib/commonjs/values/hooks/useComputedValue.js.map +1 -1
  36. package/lib/commonjs/views/SkiaView.web.js +53 -33
  37. package/lib/commonjs/views/SkiaView.web.js.map +1 -1
  38. package/lib/module/mock/index.js +0 -4
  39. package/lib/module/mock/index.js.map +1 -1
  40. package/lib/module/renderer/Canvas.js +5 -6
  41. package/lib/module/renderer/Canvas.js.map +1 -1
  42. package/lib/module/renderer/components/text/Glyphs.js +4 -5
  43. package/lib/module/renderer/components/text/Glyphs.js.map +1 -1
  44. package/lib/module/renderer/components/text/Text.js +4 -5
  45. package/lib/module/renderer/components/text/Text.js.map +1 -1
  46. package/lib/module/renderer/components/text/TextPath.js +3 -3
  47. package/lib/module/renderer/components/text/TextPath.js.map +1 -1
  48. package/lib/module/renderer/processors/Font.js +0 -23
  49. package/lib/module/renderer/processors/Font.js.map +1 -1
  50. package/lib/module/skia/core/Data.js +4 -5
  51. package/lib/module/skia/core/Data.js.map +1 -1
  52. package/lib/module/skia/core/Image.js +2 -1
  53. package/lib/module/skia/core/Image.js.map +1 -1
  54. package/lib/module/skia/core/SVG.js +2 -1
  55. package/lib/module/skia/core/SVG.js.map +1 -1
  56. package/lib/module/skia/core/Typeface.js +2 -1
  57. package/lib/module/skia/core/Typeface.js.map +1 -1
  58. package/lib/module/skia/core/index.js +0 -2
  59. package/lib/module/skia/core/index.js.map +1 -1
  60. package/lib/module/skia/types/Font/Font.js.map +1 -1
  61. package/lib/module/skia/types/index.js +0 -1
  62. package/lib/module/skia/types/index.js.map +1 -1
  63. package/lib/module/skia/web/JsiSkFont.js +0 -6
  64. package/lib/module/skia/web/JsiSkFont.js.map +1 -1
  65. package/lib/module/skia/web/JsiSkTextBlobFactory.js +1 -1
  66. package/lib/module/skia/web/JsiSkTextBlobFactory.js.map +1 -1
  67. package/lib/module/skia/web/JsiSkia.js +0 -2
  68. package/lib/module/skia/web/JsiSkia.js.map +1 -1
  69. package/lib/module/values/hooks/useComputedValue.js +0 -4
  70. package/lib/module/values/hooks/useComputedValue.js.map +1 -1
  71. package/lib/module/views/SkiaView.web.js +53 -34
  72. package/lib/module/views/SkiaView.web.js.map +1 -1
  73. package/lib/typescript/src/renderer/Canvas.d.ts +1 -3
  74. package/lib/typescript/src/renderer/DrawingContext.d.ts +1 -2
  75. package/lib/typescript/src/renderer/processors/Font.d.ts +1 -5
  76. package/lib/typescript/src/skia/core/index.d.ts +0 -2
  77. package/lib/typescript/src/skia/types/Font/Font.d.ts +0 -12
  78. package/lib/typescript/src/skia/types/Skia.d.ts +0 -2
  79. package/lib/typescript/src/skia/types/index.d.ts +0 -1
  80. package/lib/typescript/src/skia/web/JsiSkFont.d.ts +1 -2
  81. package/lib/typescript/src/values/hooks/useComputedValue.d.ts +0 -1
  82. package/lib/typescript/src/views/SkiaView.web.d.ts +5 -5
  83. package/package.json +1 -1
  84. package/src/mock/index.ts +0 -4
  85. package/src/renderer/Canvas.tsx +5 -8
  86. package/src/renderer/DrawingContext.ts +1 -2
  87. package/src/renderer/components/text/Glyphs.tsx +2 -6
  88. package/src/renderer/components/text/Text.tsx +2 -3
  89. package/src/renderer/components/text/TextPath.tsx +2 -3
  90. package/src/renderer/processors/Font.ts +2 -25
  91. package/src/skia/core/Data.ts +8 -5
  92. package/src/skia/core/Image.ts +3 -1
  93. package/src/skia/core/SVG.ts +3 -1
  94. package/src/skia/core/Typeface.ts +4 -6
  95. package/src/skia/core/index.ts +0 -2
  96. package/src/skia/types/Font/Font.ts +0 -13
  97. package/src/skia/types/Skia.ts +0 -2
  98. package/src/skia/types/index.ts +0 -1
  99. package/src/skia/web/JsiSkFont.ts +0 -9
  100. package/src/skia/web/JsiSkTextBlobFactory.ts +1 -1
  101. package/src/skia/web/JsiSkia.ts +0 -2
  102. package/src/values/hooks/useComputedValue.ts +0 -5
  103. package/src/views/SkiaView.web.tsx +41 -46
  104. package/cpp/api/JsiSkFontMgr.h +0 -84
  105. package/cpp/api/JsiSkFontMgrFactory.h +0 -48
  106. package/lib/commonjs/skia/core/Paint.js +0 -28
  107. package/lib/commonjs/skia/core/Paint.js.map +0 -1
  108. package/lib/commonjs/skia/core/Path.js +0 -72
  109. package/lib/commonjs/skia/core/Path.js.map +0 -1
  110. package/lib/commonjs/skia/types/FontMgr/FontMgr.js +0 -6
  111. package/lib/commonjs/skia/types/FontMgr/FontMgr.js.map +0 -1
  112. package/lib/commonjs/skia/types/FontMgr/FontMgrFactory.js +0 -6
  113. package/lib/commonjs/skia/types/FontMgr/FontMgrFactory.js.map +0 -1
  114. package/lib/commonjs/skia/types/FontMgr/index.js +0 -32
  115. package/lib/commonjs/skia/types/FontMgr/index.js.map +0 -1
  116. package/lib/commonjs/skia/web/JsiSkFontMgr.js +0 -33
  117. package/lib/commonjs/skia/web/JsiSkFontMgr.js.map +0 -1
  118. package/lib/commonjs/skia/web/JsiSkFontMgrFactory.js +0 -25
  119. package/lib/commonjs/skia/web/JsiSkFontMgrFactory.js.map +0 -1
  120. package/lib/module/skia/core/Paint.js +0 -17
  121. package/lib/module/skia/core/Paint.js.map +0 -1
  122. package/lib/module/skia/core/Path.js +0 -53
  123. package/lib/module/skia/core/Path.js.map +0 -1
  124. package/lib/module/skia/types/FontMgr/FontMgr.js +0 -2
  125. package/lib/module/skia/types/FontMgr/FontMgr.js.map +0 -1
  126. package/lib/module/skia/types/FontMgr/FontMgrFactory.js +0 -2
  127. package/lib/module/skia/types/FontMgr/FontMgrFactory.js.map +0 -1
  128. package/lib/module/skia/types/FontMgr/index.js +0 -3
  129. package/lib/module/skia/types/FontMgr/index.js.map +0 -1
  130. package/lib/module/skia/web/JsiSkFontMgr.js +0 -23
  131. package/lib/module/skia/web/JsiSkFontMgr.js.map +0 -1
  132. package/lib/module/skia/web/JsiSkFontMgrFactory.js +0 -14
  133. package/lib/module/skia/web/JsiSkFontMgrFactory.js.map +0 -1
  134. package/lib/typescript/src/skia/core/Paint.d.ts +0 -6
  135. package/lib/typescript/src/skia/core/Path.d.ts +0 -21
  136. package/lib/typescript/src/skia/types/FontMgr/FontMgr.d.ts +0 -18
  137. package/lib/typescript/src/skia/types/FontMgr/FontMgrFactory.d.ts +0 -4
  138. package/lib/typescript/src/skia/types/FontMgr/index.d.ts +0 -2
  139. package/lib/typescript/src/skia/web/JsiSkFontMgr.d.ts +0 -9
  140. package/lib/typescript/src/skia/web/JsiSkFontMgrFactory.d.ts +0 -8
  141. package/src/skia/core/Paint.ts +0 -22
  142. package/src/skia/core/Path.ts +0 -60
  143. package/src/skia/types/FontMgr/FontMgr.ts +0 -24
  144. package/src/skia/types/FontMgr/FontMgrFactory.ts +0 -12
  145. package/src/skia/types/FontMgr/index.ts +0 -2
  146. package/src/skia/web/JsiSkFontMgr.ts +0 -38
  147. package/src/skia/web/JsiSkFontMgrFactory.ts +0 -18
@@ -4,9 +4,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
4
4
 
5
5
  /* global HTMLCanvasElement */
6
6
  import React from "react";
7
- import { View } from "react-native";
7
+ import { PixelRatio, View } from "react-native";
8
8
  import { JsiSkSurface } from "../skia/web/JsiSkSurface";
9
9
  import { TouchType } from "./types";
10
+ const pd = PixelRatio.get();
10
11
  export class SkiaView extends React.Component {
11
12
  constructor(props) {
12
13
  var _props$mode;
@@ -27,12 +28,12 @@ export class SkiaView extends React.Component {
27
28
 
28
29
  _defineProperty(this, "_redrawRequests", 0);
29
30
 
30
- _defineProperty(this, "_unmounted", false);
31
+ _defineProperty(this, "width", 0);
32
+
33
+ _defineProperty(this, "height", 0);
34
+
35
+ _defineProperty(this, "requestId", 0);
31
36
 
32
- this.state = {
33
- width: -1,
34
- height: -1
35
- };
36
37
  this._mode = (_props$mode = props.mode) !== null && _props$mode !== void 0 ? _props$mode : "default";
37
38
  }
38
39
 
@@ -43,21 +44,30 @@ export class SkiaView extends React.Component {
43
44
  }
44
45
 
45
46
  onLayout(evt) {
46
- this.setState({
47
- width: evt.nativeEvent.layout.width,
48
- height: evt.nativeEvent.layout.height
49
- }, () => {
50
- // Reset canvas / surface on layout change
51
- if (this._canvasRef.current) {
52
- // Create surface
53
- this._surface = new JsiSkSurface(global.CanvasKit, global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)); // Get canvas and repaint
54
-
55
- if (this._surface) {
56
- this._canvas = this._surface.getCanvas();
57
- this.redraw();
58
- }
47
+ const {
48
+ CanvasKit
49
+ } = global;
50
+ const {
51
+ width,
52
+ height
53
+ } = evt.nativeEvent.layout;
54
+ this.width = width;
55
+ this.height = height; // Reset canvas / surface on layout change
56
+
57
+ if (this._canvasRef.current) {
58
+ const canvas = this._canvasRef.current;
59
+ canvas.width = canvas.clientWidth * pd;
60
+ canvas.height = canvas.clientHeight * pd;
61
+ const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
62
+
63
+ if (!surface) {
64
+ throw new Error("Could not create surface");
59
65
  }
60
- });
66
+
67
+ this._surface = new JsiSkSurface(CanvasKit, surface);
68
+ this._canvas = this._surface.getCanvas();
69
+ this.redraw();
70
+ }
61
71
  }
62
72
 
63
73
  componentDidMount() {
@@ -65,11 +75,13 @@ export class SkiaView extends React.Component {
65
75
  this.tick();
66
76
  }
67
77
 
78
+ componentDidUpdate() {
79
+ this.redraw();
80
+ }
81
+
68
82
  componentWillUnmount() {
69
83
  this.unsubscribeAll();
70
- this._surface = null;
71
- this._canvas = null;
72
- this._unmounted = true;
84
+ cancelAnimationFrame(this.requestId);
73
85
  }
74
86
  /**
75
87
  * Creates a snapshot from the canvas in the surface
@@ -92,26 +104,31 @@ export class SkiaView extends React.Component {
92
104
  if (this._mode === "continuous" || this._redrawRequests > 0) {
93
105
  this._redrawRequests = 0;
94
106
 
95
- if (this._canvas && this.props.onDraw && this.state.height !== -1 && this.state.width !== -1) {
107
+ if (this._canvas && this.props.onDraw) {
96
108
  var _this$_surface2;
97
109
 
98
110
  const touches = [...this._touches];
99
111
  this._touches = [];
100
112
  const info = {
101
- height: this.state.height,
102
- width: this.state.width,
113
+ height: this.height,
114
+ width: this.width,
103
115
  timestamp: Date.now(),
104
116
  touches: touches.map(t => [t])
105
117
  };
106
- this.props.onDraw && this.props.onDraw(this._canvas, info);
107
- (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
108
- }
109
- } // Always request a new redraw as long as we're not unmounted
110
118
 
119
+ if (this.props.onDraw) {
120
+ const canvas = this._canvas;
121
+ canvas.save();
122
+ canvas.scale(pd, pd);
123
+ this.props.onDraw(canvas, info);
124
+ canvas.restore();
125
+ }
111
126
 
112
- if (!this._unmounted) {
113
- requestAnimationFrame(this.tick.bind(this));
127
+ (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
128
+ }
114
129
  }
130
+
131
+ this.requestId = requestAnimationFrame(this.tick.bind(this));
115
132
  }
116
133
 
117
134
  redraw() {
@@ -177,8 +194,10 @@ export class SkiaView extends React.Component {
177
194
  onLayout: this.onLayout.bind(this)
178
195
  }), /*#__PURE__*/React.createElement("canvas", {
179
196
  ref: this._canvasRef,
180
- width: this.state.width,
181
- height: this.state.height,
197
+ style: {
198
+ display: "flex",
199
+ flex: 1
200
+ },
182
201
  onPointerDown: this.createTouchHandler(TouchType.Start),
183
202
  onPointerMove: this.createTouchHandler(TouchType.Active),
184
203
  onPointerUp: this.createTouchHandler(TouchType.End),
@@ -1 +1 @@
1
- {"version":3,"sources":["SkiaView.web.tsx"],"names":["React","View","JsiSkSurface","TouchType","SkiaView","Component","constructor","props","createRef","state","width","height","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","setState","nativeEvent","layout","_canvasRef","current","_surface","global","CanvasKit","MakeWebGLCanvasSurface","_canvas","getCanvas","redraw","componentDidMount","tick","componentWillUnmount","_unmounted","makeImageSnapshot","rect","_redrawRequests","onDraw","touches","_touches","info","timestamp","Date","now","map","t","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","Start","Active","End","Cancelled"],"mappings":"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","sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { 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\nexport class SkiaView extends React.Component<\n SkiaViewProps,\n { width: number; height: number }\n> {\n constructor(props: SkiaViewProps) {\n super(props);\n this.state = { width: -1, height: -1 };\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.RefObject<HTMLCanvasElement> = React.createRef();\n private _mode: DrawMode;\n private _redrawRequests = 0;\n private _unmounted = false;\n\n private unsubscribeAll() {\n this._unsubscriptions.forEach((u) => u());\n this._unsubscriptions = [];\n }\n\n private onLayout(evt: LayoutChangeEvent) {\n this.setState(\n {\n width: evt.nativeEvent.layout.width,\n height: evt.nativeEvent.layout.height,\n },\n () => {\n // Reset canvas / surface on layout change\n if (this._canvasRef.current) {\n // Create surface\n this._surface = new JsiSkSurface(\n global.CanvasKit,\n global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)!\n );\n // Get canvas and repaint\n if (this._surface) {\n this._canvas = this._surface.getCanvas();\n this.redraw();\n }\n }\n }\n );\n }\n\n componentDidMount() {\n // Start render loop\n this.tick();\n }\n\n componentWillUnmount() {\n this.unsubscribeAll();\n this._surface = null;\n this._canvas = null;\n this._unmounted = true;\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 (\n this._canvas &&\n this.props.onDraw &&\n this.state.height !== -1 &&\n this.state.width !== -1\n ) {\n const touches = [...this._touches];\n this._touches = [];\n const info: DrawingInfo = {\n height: this.state.height,\n width: this.state.width,\n timestamp: Date.now(),\n touches: touches.map((t) => [t]),\n };\n this.props.onDraw && this.props.onDraw(this._canvas!, info);\n this._surface?.ref.flush();\n }\n }\n // Always request a new redraw as long as we're not unmounted\n if (!this._unmounted) {\n requestAnimationFrame(this.tick.bind(this));\n }\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 width={this.state.width}\n height={this.state.height}\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"]}
1
+ {"version":3,"sources":["SkiaView.web.tsx"],"names":["React","PixelRatio","View","JsiSkSurface","TouchType","pd","get","SkiaView","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","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","Start","Active","End","Cancelled"],"mappings":"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","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"]}
@@ -3,7 +3,6 @@ import type { RefObject, ReactNode, ComponentProps } from "react";
3
3
  import ReactReconciler from "react-reconciler";
4
4
  import { SkiaView } from "../views";
5
5
  import type { TouchHandler } from "../views";
6
- import type { SkFontMgr } from "../skia/types";
7
6
  import { Container } from "./nodes";
8
7
  export declare const skiaReconciler: ReactReconciler.Reconciler<Container, import("./nodes").Node<unknown>, import("./nodes").Node<unknown>, import("./nodes").Node<unknown>, import("./nodes").Node<unknown>>;
9
8
  export declare const useCanvasRef: () => React.RefObject<SkiaView>;
@@ -11,6 +10,5 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
11
10
  ref?: RefObject<SkiaView>;
12
11
  children: ReactNode;
13
12
  onTouch?: TouchHandler;
14
- fontMgr?: SkFontMgr;
15
13
  }
16
- export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "fontMgr" | "onTouch"> & React.RefAttributes<SkiaView>>;
14
+ export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "onTouch"> & React.RefAttributes<SkiaView>>;
@@ -1,12 +1,11 @@
1
1
  import type { RefObject } from "react";
2
2
  import type { DrawingInfo, SkiaView } from "../views";
3
- import type { SkFontMgr, SkCanvas, SkPaint, Skia, Vector } from "../skia/types";
3
+ import type { SkCanvas, SkPaint, Skia, Vector } from "../skia/types";
4
4
  export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
5
5
  canvas: SkCanvas;
6
6
  paint: SkPaint;
7
7
  opacity: number;
8
8
  center: Vector;
9
9
  ref: RefObject<SkiaView>;
10
- fontMgr: SkFontMgr;
11
10
  Skia: Skia;
12
11
  }
@@ -1,11 +1,7 @@
1
- import type { SkFontMgr, SkFont, Skia } from "../../skia/types";
1
+ import type { SkFont } from "../../skia/types";
2
2
  export declare type FontDef = {
3
3
  font: SkFont;
4
- } | {
5
- familyName: string;
6
- size: number;
7
4
  };
8
5
  export declare const isFont: (fontDef: FontDef) => fontDef is {
9
6
  font: SkFont;
10
7
  };
11
- export declare const processFont: (Skia: Skia, fontMgr: SkFontMgr, fontDef: FontDef) => SkFont;
@@ -4,9 +4,7 @@ export * from "./Typeface";
4
4
  export * from "./Image";
5
5
  export * from "./Picture";
6
6
  export * from "./SVG";
7
- export * from "./Path";
8
7
  export * from "./Vector";
9
8
  export * from "./Rect";
10
9
  export * from "./RRect";
11
10
  export * from "./Matrix";
12
- export * from "./Paint";
@@ -24,18 +24,6 @@ export interface SkFont extends SkJSIInstance<"Font"> {
24
24
  * @param paint
25
25
  */
26
26
  getGlyphWidths(glyphs: number[], paint?: SkPaint): number[];
27
- /** Returns the advance width of text.
28
- The advance is the normal distance to move before drawing additional text.
29
- Returns the bounding box of text if bounds is not nullptr. The paint
30
- stroke settings, mask filter, or path effect may modify the bounds.
31
-
32
- @param text character storage encoded with SkTextEncoding
33
- @param byteLength length of character storage in bytes
34
- @param bounds returns bounding box relative to (0, 0) if not nullptr
35
- @param paint optional; may be nullptr
36
- @return number of glyphs represented by text of length byteLength
37
- */
38
- measureText: (text: string, paint?: SkPaint) => SkRect;
39
27
  /**
40
28
  * Returns the FontMetrics for this font.
41
29
  */
@@ -17,7 +17,6 @@ import type { SkVertices, VertexMode } from "./Vertices/Vertices";
17
17
  import type { DataFactory } from "./Data";
18
18
  import type { SVGFactory } from "./SVG";
19
19
  import type { TextBlobFactory } from "./TextBlob";
20
- import type { FontMgrFactory } from "./FontMgr/FontMgrFactory";
21
20
  import type { SurfaceFactory } from "./Surface";
22
21
  import type { SkRSXform } from "./RSXform";
23
22
  import type { SkPath } from "./Path/Path";
@@ -62,7 +61,6 @@ export interface Skia {
62
61
  Data: DataFactory;
63
62
  Image: ImageFactory;
64
63
  SVG: SVGFactory;
65
- FontMgr: FontMgrFactory;
66
64
  TextBlob: TextBlobFactory;
67
65
  Surface: SurfaceFactory;
68
66
  }
@@ -2,7 +2,6 @@ export * from "./Picture";
2
2
  export * from "./Data";
3
3
  export * from "./SVG";
4
4
  export * from "./Surface";
5
- export * from "./FontMgr";
6
5
  export * from "./Vertices";
7
6
  export * from "./RuntimeEffect";
8
7
  export * from "./Shader";
@@ -1,11 +1,10 @@
1
1
  import type { CanvasKit, Font } from "canvaskit-wasm";
2
- import type { FontEdging, FontHinting, SkFont, SkPaint, SkPoint, SkRect, SkTypeface } from "../types";
2
+ import type { FontEdging, FontHinting, SkFont, SkPaint, SkPoint, SkTypeface } from "../types";
3
3
  import { HostObject } from "./Host";
4
4
  import { JsiSkRect } from "./JsiSkRect";
5
5
  import { JsiSkTypeface } from "./JsiSkTypeface";
6
6
  export declare class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
7
7
  constructor(CanvasKit: CanvasKit, ref: Font);
8
- measureText(_text: string, _paint?: SkPaint): SkRect;
9
8
  getTextWidth(text: string, paint?: SkPaint | undefined): number;
10
9
  getMetrics(): {
11
10
  ascent: number;
@@ -6,4 +6,3 @@
6
6
  * @returns A readonly value
7
7
  */
8
8
  export declare const useComputedValue: <R>(cb: () => R, values: unknown[]) => import("..").SkiaValue<R>;
9
- export declare const useDerivedValue: <R>(cb: () => R, values: unknown[]) => import("..").SkiaValue<R>;
@@ -4,10 +4,7 @@ import type { SkRect } from "../skia/types";
4
4
  import type { SkiaValue } from "../values";
5
5
  import type { DrawMode, SkiaViewProps } from "./types";
6
6
  import { TouchType } from "./types";
7
- export declare class SkiaView extends React.Component<SkiaViewProps, {
8
- width: number;
9
- height: number;
10
- }> {
7
+ export declare class SkiaView extends React.Component<SkiaViewProps> {
11
8
  constructor(props: SkiaViewProps);
12
9
  private _surface;
13
10
  private _unsubscriptions;
@@ -16,10 +13,13 @@ export declare class SkiaView extends React.Component<SkiaViewProps, {
16
13
  private _canvasRef;
17
14
  private _mode;
18
15
  private _redrawRequests;
19
- private _unmounted;
16
+ private width;
17
+ private height;
18
+ private requestId;
20
19
  private unsubscribeAll;
21
20
  private onLayout;
22
21
  componentDidMount(): void;
22
+ componentDidUpdate(): void;
23
23
  componentWillUnmount(): void;
24
24
  /**
25
25
  * Creates a snapshot from the canvas in the surface
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "setup-skia-web": "./scripts/setup-canvaskit.js"
8
8
  },
9
9
  "title": "React Native Skia",
10
- "version": "0.1.138",
10
+ "version": "0.1.139",
11
11
  "description": "High-performance React Native Graphics using Skia",
12
12
  "main": "lib/module/index.js",
13
13
  "files": [
package/src/mock/index.ts CHANGED
@@ -52,12 +52,8 @@ export const Mock: typeof SkiaExports &
52
52
  useFont: Noop,
53
53
  useTypeface: Noop,
54
54
  useImage: Noop,
55
- usePath: Noop,
56
55
  useSVG: Noop,
57
- useTextPath: Noop,
58
- usePaint: Noop,
59
56
  usePicture: Noop,
60
- useSvgPath: Noop,
61
57
  // 3. Point/Rect/Transform utilities
62
58
  vec,
63
59
  rect: (x: number, y: number, width: number, height: number) => ({
@@ -18,7 +18,6 @@ import ReactReconciler from "react-reconciler";
18
18
 
19
19
  import { SkiaView, useDrawCallback } from "../views";
20
20
  import type { TouchHandler } from "../views";
21
- import type { SkFontMgr } from "../skia/types";
22
21
  import { useValue } from "../values/hooks/useValue";
23
22
  import { Skia } from "../skia/Skia";
24
23
 
@@ -50,13 +49,10 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
50
49
  ref?: RefObject<SkiaView>;
51
50
  children: ReactNode;
52
51
  onTouch?: TouchHandler;
53
- fontMgr?: SkFontMgr;
54
52
  }
55
53
 
56
- const defaultFontMgr = Skia.FontMgr.RefDefault();
57
-
58
54
  export const Canvas = forwardRef<SkiaView, CanvasProps>(
59
- ({ children, style, debug, mode, onTouch, fontMgr }, forwardedRef) => {
55
+ ({ children, style, debug, mode, onTouch }, forwardedRef) => {
60
56
  const size = useValue({ width: 0, height: 0 });
61
57
  const canvasCtx = useMemo(() => ({ Skia, size }), [size]);
62
58
  const innerRef = useCanvasRef();
@@ -106,7 +102,6 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
106
102
  opacity: 1,
107
103
  ref,
108
104
  center: Skia.Point(width / 2, height / 2),
109
- fontMgr: fontMgr ?? defaultFontMgr,
110
105
  Skia,
111
106
  };
112
107
  container.draw(ctx);
@@ -116,9 +111,11 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
116
111
 
117
112
  useEffect(() => {
118
113
  return () => {
119
- container.depMgr.unsubscribe();
114
+ skiaReconciler.updateContainer(null, root, null, () => {
115
+ container.depMgr.unsubscribe();
116
+ });
120
117
  };
121
- }, [container]);
118
+ }, [container, root]);
122
119
 
123
120
  return (
124
121
  <SkiaView
@@ -1,7 +1,7 @@
1
1
  import type { RefObject } from "react";
2
2
 
3
3
  import type { DrawingInfo, SkiaView } from "../views";
4
- import type { SkFontMgr, SkCanvas, SkPaint, Skia, Vector } from "../skia/types";
4
+ import type { SkCanvas, SkPaint, Skia, Vector } from "../skia/types";
5
5
 
6
6
  export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
7
7
  canvas: SkCanvas;
@@ -9,6 +9,5 @@ export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
9
9
  opacity: number;
10
10
  center: Vector;
11
11
  ref: RefObject<SkiaView>;
12
- fontMgr: SkFontMgr;
13
12
  Skia: Skia;
14
13
  }
@@ -4,7 +4,6 @@ import type { CustomPaintProps, AnimatedProps } from "../../processors";
4
4
  import { createDrawing } from "../../nodes/Drawing";
5
5
  import type { SkPoint } from "../../../skia/types";
6
6
  import type { FontDef } from "../../processors/Font";
7
- import { processFont } from "../../processors/Font";
8
7
 
9
8
  export interface Glyph {
10
9
  id: number;
@@ -24,11 +23,8 @@ interface ProcessedGlyphs {
24
23
  }
25
24
 
26
25
  const onDraw = createDrawing<GlyphsProps>(
27
- (
28
- { canvas, paint, fontMgr, Skia },
29
- { glyphs: rawGlyphs, x, y, ...fontDef }
30
- ) => {
31
- const font = processFont(Skia, fontMgr, fontDef);
26
+ ({ canvas, paint }, { glyphs: rawGlyphs, x, y, ...fontDef }) => {
27
+ const { font } = fontDef;
32
28
  const { glyphs, positions } = rawGlyphs.reduce<ProcessedGlyphs>(
33
29
  (acc, glyph) => {
34
30
  const { id, pos } = glyph;
@@ -6,7 +6,6 @@ import type {
6
6
  FontDef,
7
7
  } from "../../processors";
8
8
  import { createDrawing } from "../../nodes/Drawing";
9
- import { processFont } from "../../processors";
10
9
 
11
10
  type TextProps = CustomPaintProps &
12
11
  FontDef & {
@@ -16,8 +15,8 @@ type TextProps = CustomPaintProps &
16
15
  };
17
16
 
18
17
  const onDraw = createDrawing<TextProps>(
19
- ({ canvas, paint, fontMgr, Skia }, { text, x, y, ...fontDef }) => {
20
- const font = processFont(Skia, fontMgr, fontDef);
18
+ ({ canvas, paint }, { text, x, y, ...fontDef }) => {
19
+ const { font } = fontDef;
21
20
  canvas.drawText(text, x, y, paint, font);
22
21
  }
23
22
  );
@@ -4,7 +4,6 @@ import type { CustomPaintProps, AnimatedProps } from "../../processors";
4
4
  import { createDrawing } from "../../nodes";
5
5
  import type { SkPath, SkRSXform } from "../../../skia/types";
6
6
  import type { FontDef } from "../../processors/Font";
7
- import { processFont } from "../../processors/Font";
8
7
 
9
8
  export type TextPathProps = CustomPaintProps &
10
9
  FontDef & {
@@ -15,7 +14,7 @@ export type TextPathProps = CustomPaintProps &
15
14
 
16
15
  const onDraw = createDrawing<TextPathProps>(
17
16
  (
18
- { canvas, paint, fontMgr, Skia },
17
+ { canvas, paint, Skia },
19
18
  { text, initialOffset, path: pathDef, ...fontDef }
20
19
  ) => {
21
20
  const path =
@@ -25,7 +24,7 @@ const onDraw = createDrawing<TextPathProps>(
25
24
  if (path === null) {
26
25
  throw new Error("Invalid path: " + pathDef);
27
26
  }
28
- const font = processFont(Skia, fontMgr, fontDef);
27
+ const { font } = fontDef;
29
28
  const ids = font.getGlyphIDs(text);
30
29
  const widths = font.getGlyphWidths(ids, paint);
31
30
  const rsx: SkRSXform[] = [];
@@ -1,31 +1,8 @@
1
- import type { SkFontMgr, SkFont, Skia } from "../../skia/types";
1
+ import type { SkFont } from "../../skia/types";
2
2
 
3
- export type FontDef = { font: SkFont } | { familyName: string; size: number };
3
+ export type FontDef = { font: SkFont };
4
4
 
5
5
  export const isFont = (fontDef: FontDef): fontDef is { font: SkFont } =>
6
6
  // We have an issue to check property existence on JSI backed instances
7
7
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
8
8
  (fontDef as any).font !== undefined;
9
-
10
- export const processFont = (
11
- Skia: Skia,
12
- fontMgr: SkFontMgr,
13
- fontDef: FontDef
14
- ) => {
15
- let selectedFont: SkFont;
16
- if (isFont(fontDef)) {
17
- selectedFont = fontDef.font;
18
- } else {
19
- console.warn(
20
- // eslint-disable-next-line max-len
21
- "Using system fonts is deprecated. Please use the font property instead: https://shopify.github.io/react-native-skia/docs/text/fonts"
22
- );
23
- const { familyName, size } = fontDef;
24
- const typeface = fontMgr.matchFamilyStyle(familyName);
25
- if (typeface === null) {
26
- throw new Error(`No typeface found for ${familyName}`);
27
- }
28
- selectedFont = Skia.Font(typeface, size);
29
- }
30
- return selectedFont;
31
- };
@@ -32,19 +32,22 @@ const loadDataCollection = <T>(
32
32
  ): Promise<(T | null)[]> =>
33
33
  Promise.all(sources.map((source) => loadData(source, factory, onError)));
34
34
 
35
- const loadData = async <T>(
35
+ const loadData = <T>(
36
36
  source: DataSource,
37
37
  factory: (data: SkData) => T,
38
38
  onError?: (err: Error) => void
39
39
  ): Promise<T | null> => {
40
40
  if (source === null) {
41
- return null;
41
+ return new Promise((resolve) => resolve(null));
42
42
  } else if (source instanceof Uint8Array) {
43
- return factoryWrapper(Skia.Data.fromBytes(source), factory, onError);
43
+ return new Promise((resolve) =>
44
+ resolve(factoryWrapper(Skia.Data.fromBytes(source), factory, onError))
45
+ );
44
46
  } else {
45
47
  const uri = typeof source === "string" ? source : resolveAsset(source);
46
- const d = await Skia.Data.fromURI(uri);
47
- return factoryWrapper(d, factory, onError);
48
+ return Skia.Data.fromURI(uri).then((d) =>
49
+ factoryWrapper(d, factory, onError)
50
+ );
48
51
  }
49
52
  };
50
53
 
@@ -3,10 +3,12 @@ import type { DataSource } from "../types";
3
3
 
4
4
  import { useRawData } from "./Data";
5
5
 
6
+ const imgFactory = Skia.Image.MakeImageFromEncoded.bind(Skia.Image);
7
+
6
8
  /**
7
9
  * Returns a Skia Image object
8
10
  * */
9
11
  export const useImage = (
10
12
  source: DataSource | null | undefined,
11
13
  onError?: (err: Error) => void
12
- ) => useRawData(source, Skia.Image.MakeImageFromEncoded, onError);
14
+ ) => useRawData(source, imgFactory, onError);
@@ -3,7 +3,9 @@ import type { DataSource } from "../types";
3
3
 
4
4
  import { useRawData } from "./Data";
5
5
 
6
+ const svgFactory = Skia.SVG.MakeFromData.bind(Skia.SVG);
7
+
6
8
  export const useSVG = (
7
9
  source: DataSource | null | undefined,
8
10
  onError?: (err: Error) => void
9
- ) => useRawData(source, Skia.SVG.MakeFromData, onError);
11
+ ) => useRawData(source, svgFactory, onError);
@@ -2,15 +2,13 @@ import { Skia } from "../Skia";
2
2
  import type { DataSource } from "../types";
3
3
 
4
4
  import { useRawData } from "./Data";
5
+
6
+ const tfFactory = Skia.Typeface.MakeFreeTypeFaceFromData.bind(Skia.Typeface);
7
+
5
8
  /**
6
9
  * Returns a Skia Typeface object
7
10
  * */
8
11
  export const useTypeface = (
9
12
  source: DataSource | null | undefined,
10
13
  onError?: (err: Error) => void
11
- ) =>
12
- useRawData(
13
- source,
14
- Skia.Typeface.MakeFreeTypeFaceFromData.bind(Skia.Typeface),
15
- onError
16
- );
14
+ ) => useRawData(source, tfFactory, onError);
@@ -4,9 +4,7 @@ export * from "./Typeface";
4
4
  export * from "./Image";
5
5
  export * from "./Picture";
6
6
  export * from "./SVG";
7
- export * from "./Path";
8
7
  export * from "./Vector";
9
8
  export * from "./Rect";
10
9
  export * from "./RRect";
11
10
  export * from "./Matrix";
12
- export * from "./Paint";