@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.
- package/cpp/api/JsiSkApi.h +0 -4
- package/cpp/api/JsiSkFont.h +0 -19
- package/lib/commonjs/mock/index.js +0 -4
- package/lib/commonjs/mock/index.js.map +1 -1
- package/lib/commonjs/renderer/Canvas.js +5 -8
- package/lib/commonjs/renderer/Canvas.js.map +1 -1
- package/lib/commonjs/renderer/components/text/Glyphs.js +4 -6
- package/lib/commonjs/renderer/components/text/Glyphs.js.map +1 -1
- package/lib/commonjs/renderer/components/text/Text.js +4 -6
- package/lib/commonjs/renderer/components/text/Text.js.map +1 -1
- package/lib/commonjs/renderer/components/text/TextPath.js +3 -4
- package/lib/commonjs/renderer/components/text/TextPath.js.map +1 -1
- package/lib/commonjs/renderer/processors/Font.js +1 -27
- package/lib/commonjs/renderer/processors/Font.js.map +1 -1
- package/lib/commonjs/skia/core/Data.js +4 -5
- package/lib/commonjs/skia/core/Data.js.map +1 -1
- package/lib/commonjs/skia/core/Image.js +4 -1
- package/lib/commonjs/skia/core/Image.js.map +1 -1
- package/lib/commonjs/skia/core/SVG.js +3 -1
- package/lib/commonjs/skia/core/SVG.js.map +1 -1
- package/lib/commonjs/skia/core/Typeface.js +4 -1
- package/lib/commonjs/skia/core/Typeface.js.map +1 -1
- package/lib/commonjs/skia/core/index.js +0 -26
- package/lib/commonjs/skia/core/index.js.map +1 -1
- package/lib/commonjs/skia/types/Font/Font.js.map +1 -1
- package/lib/commonjs/skia/types/index.js +0 -13
- package/lib/commonjs/skia/types/index.js.map +1 -1
- package/lib/commonjs/skia/web/JsiSkFont.js +0 -6
- package/lib/commonjs/skia/web/JsiSkFont.js.map +1 -1
- package/lib/commonjs/skia/web/JsiSkTextBlobFactory.js +1 -1
- package/lib/commonjs/skia/web/JsiSkTextBlobFactory.js.map +1 -1
- package/lib/commonjs/skia/web/JsiSkia.js +0 -3
- package/lib/commonjs/skia/web/JsiSkia.js.map +1 -1
- package/lib/commonjs/values/hooks/useComputedValue.js +1 -8
- package/lib/commonjs/values/hooks/useComputedValue.js.map +1 -1
- package/lib/commonjs/views/SkiaView.web.js +53 -33
- package/lib/commonjs/views/SkiaView.web.js.map +1 -1
- package/lib/module/mock/index.js +0 -4
- package/lib/module/mock/index.js.map +1 -1
- package/lib/module/renderer/Canvas.js +5 -6
- package/lib/module/renderer/Canvas.js.map +1 -1
- package/lib/module/renderer/components/text/Glyphs.js +4 -5
- package/lib/module/renderer/components/text/Glyphs.js.map +1 -1
- package/lib/module/renderer/components/text/Text.js +4 -5
- package/lib/module/renderer/components/text/Text.js.map +1 -1
- package/lib/module/renderer/components/text/TextPath.js +3 -3
- package/lib/module/renderer/components/text/TextPath.js.map +1 -1
- package/lib/module/renderer/processors/Font.js +0 -23
- package/lib/module/renderer/processors/Font.js.map +1 -1
- package/lib/module/skia/core/Data.js +4 -5
- package/lib/module/skia/core/Data.js.map +1 -1
- package/lib/module/skia/core/Image.js +2 -1
- package/lib/module/skia/core/Image.js.map +1 -1
- package/lib/module/skia/core/SVG.js +2 -1
- package/lib/module/skia/core/SVG.js.map +1 -1
- package/lib/module/skia/core/Typeface.js +2 -1
- package/lib/module/skia/core/Typeface.js.map +1 -1
- package/lib/module/skia/core/index.js +0 -2
- package/lib/module/skia/core/index.js.map +1 -1
- package/lib/module/skia/types/Font/Font.js.map +1 -1
- package/lib/module/skia/types/index.js +0 -1
- package/lib/module/skia/types/index.js.map +1 -1
- package/lib/module/skia/web/JsiSkFont.js +0 -6
- package/lib/module/skia/web/JsiSkFont.js.map +1 -1
- package/lib/module/skia/web/JsiSkTextBlobFactory.js +1 -1
- package/lib/module/skia/web/JsiSkTextBlobFactory.js.map +1 -1
- package/lib/module/skia/web/JsiSkia.js +0 -2
- package/lib/module/skia/web/JsiSkia.js.map +1 -1
- package/lib/module/values/hooks/useComputedValue.js +0 -4
- package/lib/module/values/hooks/useComputedValue.js.map +1 -1
- package/lib/module/views/SkiaView.web.js +53 -34
- package/lib/module/views/SkiaView.web.js.map +1 -1
- package/lib/typescript/src/renderer/Canvas.d.ts +1 -3
- package/lib/typescript/src/renderer/DrawingContext.d.ts +1 -2
- package/lib/typescript/src/renderer/processors/Font.d.ts +1 -5
- package/lib/typescript/src/skia/core/index.d.ts +0 -2
- package/lib/typescript/src/skia/types/Font/Font.d.ts +0 -12
- package/lib/typescript/src/skia/types/Skia.d.ts +0 -2
- package/lib/typescript/src/skia/types/index.d.ts +0 -1
- package/lib/typescript/src/skia/web/JsiSkFont.d.ts +1 -2
- package/lib/typescript/src/values/hooks/useComputedValue.d.ts +0 -1
- package/lib/typescript/src/views/SkiaView.web.d.ts +5 -5
- package/package.json +1 -1
- package/src/mock/index.ts +0 -4
- package/src/renderer/Canvas.tsx +5 -8
- package/src/renderer/DrawingContext.ts +1 -2
- package/src/renderer/components/text/Glyphs.tsx +2 -6
- package/src/renderer/components/text/Text.tsx +2 -3
- package/src/renderer/components/text/TextPath.tsx +2 -3
- package/src/renderer/processors/Font.ts +2 -25
- package/src/skia/core/Data.ts +8 -5
- package/src/skia/core/Image.ts +3 -1
- package/src/skia/core/SVG.ts +3 -1
- package/src/skia/core/Typeface.ts +4 -6
- package/src/skia/core/index.ts +0 -2
- package/src/skia/types/Font/Font.ts +0 -13
- package/src/skia/types/Skia.ts +0 -2
- package/src/skia/types/index.ts +0 -1
- package/src/skia/web/JsiSkFont.ts +0 -9
- package/src/skia/web/JsiSkTextBlobFactory.ts +1 -1
- package/src/skia/web/JsiSkia.ts +0 -2
- package/src/values/hooks/useComputedValue.ts +0 -5
- package/src/views/SkiaView.web.tsx +41 -46
- package/cpp/api/JsiSkFontMgr.h +0 -84
- package/cpp/api/JsiSkFontMgrFactory.h +0 -48
- package/lib/commonjs/skia/core/Paint.js +0 -28
- package/lib/commonjs/skia/core/Paint.js.map +0 -1
- package/lib/commonjs/skia/core/Path.js +0 -72
- package/lib/commonjs/skia/core/Path.js.map +0 -1
- package/lib/commonjs/skia/types/FontMgr/FontMgr.js +0 -6
- package/lib/commonjs/skia/types/FontMgr/FontMgr.js.map +0 -1
- package/lib/commonjs/skia/types/FontMgr/FontMgrFactory.js +0 -6
- package/lib/commonjs/skia/types/FontMgr/FontMgrFactory.js.map +0 -1
- package/lib/commonjs/skia/types/FontMgr/index.js +0 -32
- package/lib/commonjs/skia/types/FontMgr/index.js.map +0 -1
- package/lib/commonjs/skia/web/JsiSkFontMgr.js +0 -33
- package/lib/commonjs/skia/web/JsiSkFontMgr.js.map +0 -1
- package/lib/commonjs/skia/web/JsiSkFontMgrFactory.js +0 -25
- package/lib/commonjs/skia/web/JsiSkFontMgrFactory.js.map +0 -1
- package/lib/module/skia/core/Paint.js +0 -17
- package/lib/module/skia/core/Paint.js.map +0 -1
- package/lib/module/skia/core/Path.js +0 -53
- package/lib/module/skia/core/Path.js.map +0 -1
- package/lib/module/skia/types/FontMgr/FontMgr.js +0 -2
- package/lib/module/skia/types/FontMgr/FontMgr.js.map +0 -1
- package/lib/module/skia/types/FontMgr/FontMgrFactory.js +0 -2
- package/lib/module/skia/types/FontMgr/FontMgrFactory.js.map +0 -1
- package/lib/module/skia/types/FontMgr/index.js +0 -3
- package/lib/module/skia/types/FontMgr/index.js.map +0 -1
- package/lib/module/skia/web/JsiSkFontMgr.js +0 -23
- package/lib/module/skia/web/JsiSkFontMgr.js.map +0 -1
- package/lib/module/skia/web/JsiSkFontMgrFactory.js +0 -14
- package/lib/module/skia/web/JsiSkFontMgrFactory.js.map +0 -1
- package/lib/typescript/src/skia/core/Paint.d.ts +0 -6
- package/lib/typescript/src/skia/core/Path.d.ts +0 -21
- package/lib/typescript/src/skia/types/FontMgr/FontMgr.d.ts +0 -18
- package/lib/typescript/src/skia/types/FontMgr/FontMgrFactory.d.ts +0 -4
- package/lib/typescript/src/skia/types/FontMgr/index.d.ts +0 -2
- package/lib/typescript/src/skia/web/JsiSkFontMgr.d.ts +0 -9
- package/lib/typescript/src/skia/web/JsiSkFontMgrFactory.d.ts +0 -8
- package/src/skia/core/Paint.ts +0 -22
- package/src/skia/core/Path.ts +0 -60
- package/src/skia/types/FontMgr/FontMgr.ts +0 -24
- package/src/skia/types/FontMgr/FontMgrFactory.ts +0 -12
- package/src/skia/types/FontMgr/index.ts +0 -2
- package/src/skia/web/JsiSkFontMgr.ts +0 -38
- 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, "
|
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
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
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.
|
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
|
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.
|
102
|
-
width: this.
|
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
|
-
|
113
|
-
|
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
|
-
|
181
|
-
|
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" | "
|
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 {
|
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 {
|
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
|
}
|
@@ -1,11 +1,10 @@
|
|
1
1
|
import type { CanvasKit, Font } from "canvaskit-wasm";
|
2
|
-
import type { FontEdging, FontHinting, SkFont, SkPaint, SkPoint,
|
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;
|
@@ -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
|
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
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) => ({
|
package/src/renderer/Canvas.tsx
CHANGED
@@ -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
|
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
|
-
|
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 {
|
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
|
-
{
|
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
|
20
|
-
const font =
|
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,
|
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 =
|
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 {
|
1
|
+
import type { SkFont } from "../../skia/types";
|
2
2
|
|
3
|
-
export type FontDef = { font: SkFont }
|
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
|
-
};
|
package/src/skia/core/Data.ts
CHANGED
@@ -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 =
|
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
|
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
|
-
|
47
|
-
|
48
|
+
return Skia.Data.fromURI(uri).then((d) =>
|
49
|
+
factoryWrapper(d, factory, onError)
|
50
|
+
);
|
48
51
|
}
|
49
52
|
};
|
50
53
|
|
package/src/skia/core/Image.ts
CHANGED
@@ -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,
|
14
|
+
) => useRawData(source, imgFactory, onError);
|
package/src/skia/core/SVG.ts
CHANGED
@@ -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,
|
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);
|
package/src/skia/core/index.ts
CHANGED
@@ -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";
|