@shopify/react-native-skia 0.1.189 → 0.1.190
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/jestSetup.js +17 -3
- package/lib/commonjs/Platform/IPlatform.d.ts +12 -0
- package/lib/commonjs/Platform/IPlatform.js +6 -0
- package/lib/commonjs/Platform/IPlatform.js.map +1 -0
- package/lib/commonjs/Platform/Platform.d.ts +2 -0
- package/lib/commonjs/Platform/Platform.js +24 -0
- package/lib/commonjs/Platform/Platform.js.map +1 -0
- package/lib/commonjs/Platform/Platform.web.d.ts +2 -0
- package/lib/commonjs/Platform/Platform.web.js +157 -0
- package/lib/commonjs/Platform/Platform.web.js.map +1 -0
- package/lib/commonjs/Platform/index.d.ts +1 -0
- package/lib/commonjs/Platform/index.js +19 -0
- package/lib/commonjs/Platform/index.js.map +1 -0
- package/lib/commonjs/skia/NativeSetup.js +3 -3
- package/lib/commonjs/skia/NativeSetup.js.map +1 -1
- package/lib/commonjs/skia/core/Data.js +2 -8
- package/lib/commonjs/skia/core/Data.js.map +1 -1
- package/lib/commonjs/skia/core/Image.js +3 -3
- package/lib/commonjs/skia/core/Image.js.map +1 -1
- package/lib/commonjs/views/SkiaBaseWebView.d.ts +6 -1
- package/lib/commonjs/views/SkiaBaseWebView.js +32 -25
- package/lib/commonjs/views/SkiaBaseWebView.js.map +1 -1
- package/lib/commonjs/views/SkiaDomView.js +2 -2
- package/lib/commonjs/views/SkiaDomView.js.map +1 -1
- package/lib/commonjs/views/SkiaPictureView.js +2 -2
- package/lib/commonjs/views/SkiaPictureView.js.map +1 -1
- package/lib/commonjs/views/SkiaView.js +3 -2
- package/lib/commonjs/views/SkiaView.js.map +1 -1
- package/lib/commonjs/views/useTouchHandler.js +3 -3
- package/lib/commonjs/views/useTouchHandler.js.map +1 -1
- package/lib/commonjs/web/WithSkiaWeb.js +2 -2
- package/lib/commonjs/web/WithSkiaWeb.js.map +1 -1
- package/lib/module/Platform/IPlatform.d.ts +12 -0
- package/lib/module/Platform/IPlatform.js +2 -0
- package/lib/module/Platform/IPlatform.js.map +1 -0
- package/lib/module/Platform/Platform.d.ts +2 -0
- package/lib/module/Platform/Platform.js +14 -0
- package/lib/module/Platform/Platform.js.map +1 -0
- package/lib/module/Platform/Platform.web.d.ts +2 -0
- package/lib/module/Platform/Platform.web.js +143 -0
- package/lib/module/Platform/Platform.web.js.map +1 -0
- package/lib/module/Platform/index.d.ts +1 -0
- package/lib/module/Platform/index.js +2 -0
- package/lib/module/Platform/index.js.map +1 -0
- package/lib/module/skia/NativeSetup.js +2 -2
- package/lib/module/skia/NativeSetup.js.map +1 -1
- package/lib/module/skia/core/Data.js +2 -7
- package/lib/module/skia/core/Data.js.map +1 -1
- package/lib/module/skia/core/Image.js +2 -2
- package/lib/module/skia/core/Image.js.map +1 -1
- package/lib/module/views/SkiaBaseWebView.d.ts +6 -1
- package/lib/module/views/SkiaBaseWebView.js +31 -24
- package/lib/module/views/SkiaBaseWebView.js.map +1 -1
- package/lib/module/views/SkiaDomView.js +2 -2
- package/lib/module/views/SkiaDomView.js.map +1 -1
- package/lib/module/views/SkiaPictureView.js +2 -2
- package/lib/module/views/SkiaPictureView.js.map +1 -1
- package/lib/module/views/SkiaView.js +2 -2
- package/lib/module/views/SkiaView.js.map +1 -1
- package/lib/module/views/useTouchHandler.js +3 -3
- package/lib/module/views/useTouchHandler.js.map +1 -1
- package/lib/module/web/WithSkiaWeb.js +1 -1
- package/lib/module/web/WithSkiaWeb.js.map +1 -1
- package/lib/typescript/src/Platform/IPlatform.d.ts +12 -0
- package/lib/typescript/src/Platform/Platform.d.ts +2 -0
- package/lib/typescript/src/Platform/Platform.web.d.ts +2 -0
- package/lib/typescript/src/Platform/index.d.ts +1 -0
- package/lib/typescript/src/views/SkiaBaseWebView.d.ts +6 -1
- package/package.json +9 -9
- package/src/Platform/IPlatform.ts +20 -0
- package/src/Platform/Platform.ts +28 -0
- package/src/Platform/Platform.web.tsx +136 -0
- package/src/Platform/index.ts +1 -0
- package/src/skia/NativeSetup.ts +2 -2
- package/src/skia/core/Data.ts +4 -15
- package/src/skia/core/Image.ts +2 -3
- package/src/views/SkiaBaseWebView.tsx +24 -19
- package/src/views/SkiaDomView.tsx +2 -2
- package/src/views/SkiaPictureView.tsx +2 -2
- package/src/views/SkiaView.tsx +2 -2
- package/src/views/useTouchHandler.ts +3 -3
- package/src/web/WithSkiaWeb.tsx +2 -1
@@ -4,10 +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 { PixelRatio, View } from "react-native";
|
8
7
|
import { JsiSkSurface } from "../skia/web/JsiSkSurface";
|
8
|
+
import { Platform } from "../Platform";
|
9
9
|
import { TouchType } from "./types";
|
10
|
-
const pd = PixelRatio
|
10
|
+
const pd = Platform.PixelRatio;
|
11
11
|
export class SkiaBaseWebView extends React.Component {
|
12
12
|
constructor(props) {
|
13
13
|
var _props$mode;
|
@@ -34,6 +34,16 @@ export class SkiaBaseWebView extends React.Component {
|
|
34
34
|
|
35
35
|
_defineProperty(this, "height", 0);
|
36
36
|
|
37
|
+
_defineProperty(this, "onStart", this.createTouchHandler(TouchType.Start));
|
38
|
+
|
39
|
+
_defineProperty(this, "onActive", this.createTouchHandler(TouchType.Active));
|
40
|
+
|
41
|
+
_defineProperty(this, "onCancel", this.createTouchHandler(TouchType.Cancelled));
|
42
|
+
|
43
|
+
_defineProperty(this, "onEnd", this.createTouchHandler(TouchType.End));
|
44
|
+
|
45
|
+
_defineProperty(this, "onLayout", this.onLayoutEvent.bind(this));
|
46
|
+
|
37
47
|
this._mode = (_props$mode = props.mode) !== null && _props$mode !== void 0 ? _props$mode : "default";
|
38
48
|
}
|
39
49
|
|
@@ -43,22 +53,19 @@ export class SkiaBaseWebView extends React.Component {
|
|
43
53
|
this._unsubscriptions = [];
|
44
54
|
}
|
45
55
|
|
46
|
-
|
56
|
+
onLayoutEvent(evt) {
|
47
57
|
const {
|
48
58
|
CanvasKit
|
49
|
-
} = global;
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
const
|
59
|
-
canvas.width = width * pd;
|
60
|
-
canvas.height = height * pd;
|
61
|
-
const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
|
59
|
+
} = global; // Reset canvas / surface on layout change
|
60
|
+
|
61
|
+
const canvas = this._canvasRef.current;
|
62
|
+
|
63
|
+
if (canvas) {
|
64
|
+
this.width = canvas.clientWidth;
|
65
|
+
this.height = canvas.clientHeight;
|
66
|
+
canvas.width = this.width * pd;
|
67
|
+
canvas.height = this.height * pd;
|
68
|
+
const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);
|
62
69
|
|
63
70
|
if (!surface) {
|
64
71
|
throw new Error("Could not create surface");
|
@@ -204,20 +211,20 @@ export class SkiaBaseWebView extends React.Component {
|
|
204
211
|
debug = false,
|
205
212
|
...viewProps
|
206
213
|
} = this.props;
|
207
|
-
return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
|
208
|
-
onLayout: this.onLayout
|
214
|
+
return /*#__PURE__*/React.createElement(Platform.View, _extends({}, viewProps, {
|
215
|
+
onLayout: this.onLayout
|
209
216
|
}), /*#__PURE__*/React.createElement("canvas", {
|
210
217
|
ref: this._canvasRef,
|
211
218
|
style: {
|
212
219
|
display: "flex",
|
213
220
|
flex: 1
|
214
221
|
},
|
215
|
-
onPointerDown: this.
|
216
|
-
onPointerMove: this.
|
217
|
-
onPointerUp: this.
|
218
|
-
onPointerCancel: this.
|
219
|
-
onPointerLeave: this.
|
220
|
-
onPointerOut: this.
|
222
|
+
onPointerDown: this.onStart,
|
223
|
+
onPointerMove: this.onActive,
|
224
|
+
onPointerUp: this.onEnd,
|
225
|
+
onPointerCancel: this.onCancel,
|
226
|
+
onPointerLeave: this.onEnd,
|
227
|
+
onPointerOut: this.onEnd
|
221
228
|
}));
|
222
229
|
}
|
223
230
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","PixelRatio","View","JsiSkSurface","TouchType","pd","get","SkiaBaseWebView","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","getContext","getExtension","loseContext","makeImageSnapshot","rect","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","createTouchHandler","render","debug","viewProps","display","flex","Start","Active","End","Cancelled"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport abstract class SkiaBaseWebView<\n TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n constructor(props: TProps) {\n super(props);\n this._mode = props.mode ?? \"default\";\n }\n\n private _surface: JsiSkSurface | null = null;\n private _unsubscriptions: Array<() => void> = [];\n private _touches: Array<TouchInfo> = [];\n private _canvas: SkCanvas | null = null;\n private _canvasRef = React.createRef<HTMLCanvasElement>();\n private _mode: DrawMode;\n private _redrawRequests = 0;\n private requestId = 0;\n\n protected width = 0;\n protected height = 0;\n\n private unsubscribeAll() {\n this._unsubscriptions.forEach((u) => u());\n this._unsubscriptions = [];\n }\n\n private onLayout(evt: LayoutChangeEvent) {\n const { CanvasKit } = global;\n const { width, height } = evt.nativeEvent.layout;\n this.width = width;\n this.height = height;\n // Reset canvas / surface on layout change\n if (this._canvasRef.current) {\n const canvas = this._canvasRef.current;\n canvas.width = width * pd;\n canvas.height = height * 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 // Call onLayout callback if it exists\n if (this.props.onLayout) {\n this.props.onLayout(evt);\n }\n }\n\n protected getSize() {\n return { width: this.width, height: this.height };\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 // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n this._canvasRef.current\n ?.getContext(\"webgl2\")\n ?.getExtension(\"WEBGL_lose_context\")\n ?.loseContext();\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 this._canvas!.clear(CanvasKit.TRANSPARENT);\n this.renderInCanvas(this._canvas!, []);\n this._surface?.ref.flush();\n return this._surface?.makeImageSnapshot(rect);\n }\n\n /**\n * Override to render\n */\n protected abstract renderInCanvas(\n canvas: SkCanvas,\n touches: TouchInfo[]\n ): void;\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n private tick() {\n if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n this._redrawRequests = 0;\n if (this._canvas) {\n const touches = [...this._touches];\n this._touches = [];\n const canvas = this._canvas!;\n canvas.clear(Float32Array.of(0, 0, 0, 0));\n canvas.save();\n canvas.scale(pd, pd);\n this.renderInCanvas(canvas, touches);\n canvas.restore();\n this._surface?.ref.flush();\n }\n }\n this.requestId = requestAnimationFrame(this.tick.bind(this));\n }\n\n public redraw() {\n this._redrawRequests++;\n }\n\n /**\n * Updates the drawing mode for the skia view. This is the same\n * as declaratively setting the mode property on the SkiaView.\n * There are two drawing modes, \"continuous\" and \"default\",\n * where the continuous mode will continuously redraw the view and\n * the default mode will only redraw when any of the regular react\n * properties are changed like size and margins.\n * @param mode Drawing mode to use.\n */\n public setDrawMode(mode: DrawMode) {\n this._mode = mode;\n this.tick();\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(_values: SkiaValue<unknown>[]) {\n // Unsubscribe from dependency values\n this.unsubscribeAll();\n // Register redraw dependencies on values\n _values.forEach((v) => {\n this._unsubscriptions.push(\n v.addListener(() => {\n this.redraw();\n })\n );\n });\n }\n\n private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n this._touches.push({\n id: evt.pointerId,\n x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n force: evt.pressure,\n type: touchType,\n timestamp: Date.now(),\n });\n this.redraw();\n }\n\n createTouchHandler(touchType: TouchType) {\n return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n }\n\n render() {\n const { mode, debug = false, ...viewProps } = this.props;\n return (\n <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n <canvas\n ref={this._canvasRef}\n style={{ display: \"flex\", flex: 1 }}\n onPointerDown={this.createTouchHandler(TouchType.Start)}\n onPointerMove={this.createTouchHandler(TouchType.Active)}\n onPointerUp={this.createTouchHandler(TouchType.End)}\n onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n onPointerLeave={this.createTouchHandler(TouchType.End)}\n onPointerOut={this.createTouchHandler(TouchType.End)}\n />\n </View>\n );\n }\n}\n"],"mappings":"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"}
|
1
|
+
{"version":3,"names":["React","JsiSkSurface","Platform","TouchType","pd","PixelRatio","SkiaBaseWebView","Component","constructor","props","createRef","createTouchHandler","Start","Active","Cancelled","End","onLayoutEvent","bind","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","getContext","getExtension","loseContext","makeImageSnapshot","rect","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","render","debug","viewProps","display","flex","onStart","onActive","onEnd","onCancel"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = Platform.PixelRatio;\n\nexport abstract class SkiaBaseWebView<\n TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n constructor(props: TProps) {\n super(props);\n this._mode = props.mode ?? \"default\";\n }\n\n private _surface: JsiSkSurface | null = null;\n private _unsubscriptions: Array<() => void> = [];\n private _touches: Array<TouchInfo> = [];\n private _canvas: SkCanvas | null = null;\n private _canvasRef = React.createRef<HTMLCanvasElement>();\n private _mode: DrawMode;\n private _redrawRequests = 0;\n private requestId = 0;\n\n protected width = 0;\n protected height = 0;\n\n private unsubscribeAll() {\n this._unsubscriptions.forEach((u) => u());\n this._unsubscriptions = [];\n }\n\n private onLayoutEvent(evt: LayoutChangeEvent) {\n const { CanvasKit } = global;\n // Reset canvas / surface on layout change\n const canvas = this._canvasRef.current;\n if (canvas) {\n this.width = canvas.clientWidth;\n this.height = canvas.clientHeight;\n canvas.width = this.width * pd;\n canvas.height = this.height * pd;\n const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\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 // Call onLayout callback if it exists\n if (this.props.onLayout) {\n this.props.onLayout(evt);\n }\n }\n\n protected getSize() {\n return { width: this.width, height: this.height };\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 // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n this._canvasRef.current\n ?.getContext(\"webgl2\")\n ?.getExtension(\"WEBGL_lose_context\")\n ?.loseContext();\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 this._canvas!.clear(CanvasKit.TRANSPARENT);\n this.renderInCanvas(this._canvas!, []);\n this._surface?.ref.flush();\n return this._surface?.makeImageSnapshot(rect);\n }\n\n /**\n * Override to render\n */\n protected abstract renderInCanvas(\n canvas: SkCanvas,\n touches: TouchInfo[]\n ): void;\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n private tick() {\n if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n this._redrawRequests = 0;\n if (this._canvas) {\n const touches = [...this._touches];\n this._touches = [];\n const canvas = this._canvas!;\n canvas.clear(Float32Array.of(0, 0, 0, 0));\n canvas.save();\n canvas.scale(pd, pd);\n this.renderInCanvas(canvas, touches);\n canvas.restore();\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 private onStart = this.createTouchHandler(TouchType.Start);\n private onActive = this.createTouchHandler(TouchType.Active);\n private onCancel = this.createTouchHandler(TouchType.Cancelled);\n private onEnd = this.createTouchHandler(TouchType.End);\n private onLayout = this.onLayoutEvent.bind(this);\n\n render() {\n const { mode, debug = false, ...viewProps } = this.props;\n return (\n <Platform.View {...viewProps} onLayout={this.onLayout}>\n <canvas\n ref={this._canvasRef}\n style={{ display: \"flex\", flex: 1 }}\n onPointerDown={this.onStart}\n onPointerMove={this.onActive}\n onPointerUp={this.onEnd}\n onPointerCancel={this.onCancel}\n onPointerLeave={this.onEnd}\n onPointerOut={this.onEnd}\n />\n </Platform.View>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -3,10 +3,10 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
3
3
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
4
4
|
|
5
5
|
import React from "react";
|
6
|
-
import {
|
6
|
+
import { Platform } from "../Platform";
|
7
7
|
import { SkiaViewApi } from "./api";
|
8
8
|
import { SkiaViewNativeId } from "./SkiaView";
|
9
|
-
const NativeSkiaDomView = Platform.OS !== "web" ? requireNativeComponent("SkiaDomView") : // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
9
|
+
const NativeSkiaDomView = Platform.OS !== "web" ? Platform.requireNativeComponent("SkiaDomView") : // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
10
10
|
null;
|
11
11
|
export class SkiaDomView extends React.Component {
|
12
12
|
constructor(props) {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","
|
1
|
+
{"version":3,"names":["React","Platform","SkiaViewApi","SkiaViewNativeId","NativeSkiaDomView","OS","requireNativeComponent","SkiaDomView","Component","constructor","props","_nativeId","current","root","onTouch","onSize","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","componentWillUnmount","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaDomView.tsx"],"sourcesContent":["import React from \"react\";\nimport type { HostComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { Platform } from \"../Platform\";\n\nimport { SkiaViewApi } from \"./api\";\nimport { SkiaViewNativeId } from \"./SkiaView\";\nimport type { NativeSkiaViewProps, SkiaDomViewProps } from \"./types\";\n\nconst NativeSkiaDomView: HostComponent<SkiaDomViewProps> =\n Platform.OS !== \"web\"\n ? Platform.requireNativeComponent<NativeSkiaViewProps>(\"SkiaDomView\")\n : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (null as any);\n\nexport class SkiaDomView extends React.Component<SkiaDomViewProps> {\n constructor(props: SkiaDomViewProps) {\n super(props);\n this._nativeId = SkiaViewNativeId.current++;\n const { root, onTouch, onSize } = props;\n if (root) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"root\", root);\n }\n if (onTouch) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\n }\n if (onSize) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n }\n }\n\n private _nativeId: number;\n\n public get nativeId() {\n return this._nativeId;\n }\n\n componentDidUpdate(prevProps: SkiaDomViewProps) {\n const { root, onTouch, onSize } = this.props;\n if (root !== prevProps.root) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"root\", root);\n }\n if (onTouch !== prevProps.onTouch) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\n }\n if (onSize !== prevProps.onSize) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n }\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n assertSkiaViewApi();\n return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n }\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n public redraw() {\n assertSkiaViewApi();\n SkiaViewApi.requestRedraw(this._nativeId);\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(values: SkiaValue<unknown>[]): () => void {\n assertSkiaViewApi();\n return SkiaViewApi.registerValuesInView(this._nativeId, values);\n }\n\n /**\n * Clear up the dom node when unmounting to release resources.\n */\n componentWillUnmount(): void {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"root\", null);\n }\n\n render() {\n const { mode, debug = false, ...viewProps } = this.props;\n return (\n <NativeSkiaDomView\n collapsable={false}\n nativeID={`${this._nativeId}`}\n mode={mode}\n debug={debug}\n {...viewProps}\n />\n );\n }\n}\n\nconst assertSkiaViewApi = () => {\n if (\n SkiaViewApi === null ||\n SkiaViewApi.setJsiProperty === null ||\n SkiaViewApi.callJsiMethod === null ||\n SkiaViewApi.registerValuesInView === null ||\n SkiaViewApi.requestRedraw === null ||\n SkiaViewApi.makeImageSnapshot === null\n ) {\n throw Error(\"Skia View Api was not found.\");\n }\n};\n"],"mappings":"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"}
|
@@ -3,10 +3,10 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
3
3
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
4
4
|
|
5
5
|
import React from "react";
|
6
|
-
import {
|
6
|
+
import { Platform } from "../Platform";
|
7
7
|
import { SkiaViewApi } from "./api";
|
8
8
|
import { SkiaViewNativeId } from "./SkiaView";
|
9
|
-
const NativeSkiaPictureView = requireNativeComponent("SkiaPictureView");
|
9
|
+
const NativeSkiaPictureView = Platform.requireNativeComponent("SkiaPictureView");
|
10
10
|
export class SkiaPictureView extends React.Component {
|
11
11
|
constructor(props) {
|
12
12
|
super(props);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","
|
1
|
+
{"version":3,"names":["React","Platform","SkiaViewApi","SkiaViewNativeId","NativeSkiaPictureView","requireNativeComponent","SkiaPictureView","Component","constructor","props","_nativeId","current","picture","onSize","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaPictureView.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { Platform } from \"../Platform\";\n\nimport { SkiaViewApi } from \"./api\";\nimport { SkiaViewNativeId } from \"./SkiaView\";\nimport type { NativeSkiaViewProps, SkiaPictureViewProps } from \"./types\";\n\nconst NativeSkiaPictureView =\n Platform.requireNativeComponent<NativeSkiaViewProps>(\"SkiaPictureView\");\n\nexport class SkiaPictureView extends React.Component<SkiaPictureViewProps> {\n constructor(props: SkiaPictureViewProps) {\n super(props);\n this._nativeId = SkiaViewNativeId.current++;\n const { picture, onSize } = props;\n if (picture) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\n }\n if (onSize) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n }\n }\n\n private _nativeId: number;\n\n public get nativeId() {\n return this._nativeId;\n }\n\n componentDidUpdate(prevProps: SkiaPictureViewProps) {\n const { picture, onSize } = this.props;\n if (picture !== prevProps.picture) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\n }\n if (onSize !== prevProps.onSize) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n }\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n assertSkiaViewApi();\n return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n }\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n public redraw() {\n assertSkiaViewApi();\n SkiaViewApi.requestRedraw(this._nativeId);\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(values: SkiaValue<unknown>[]): () => void {\n assertSkiaViewApi();\n return SkiaViewApi.registerValuesInView(this._nativeId, values);\n }\n\n render() {\n const { mode, debug = false, ...viewProps } = this.props;\n return (\n <NativeSkiaPictureView\n collapsable={false}\n nativeID={`${this._nativeId}`}\n mode={mode}\n debug={debug}\n {...viewProps}\n />\n );\n }\n}\n\nconst assertSkiaViewApi = () => {\n if (\n SkiaViewApi === null ||\n SkiaViewApi.setJsiProperty === null ||\n SkiaViewApi.callJsiMethod === null ||\n SkiaViewApi.registerValuesInView === null ||\n SkiaViewApi.requestRedraw === null ||\n SkiaViewApi.makeImageSnapshot === null\n ) {\n throw Error(\"Skia View Api was not found.\");\n }\n};\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAIA,SAASC,QAAT,QAAyB,aAAzB;AAEA,SAASC,WAAT,QAA4B,OAA5B;AACA,SAASC,gBAAT,QAAiC,YAAjC;AAGA,MAAMC,qBAAqB,GACzBH,QAAQ,CAACI,sBAAT,CAAqD,iBAArD,CADF;AAGA,OAAO,MAAMC,eAAN,SAA8BN,KAAK,CAACO,SAApC,CAAoE;EACzEC,WAAW,CAACC,KAAD,EAA8B;IACvC,MAAMA,KAAN;;IADuC;;IAEvC,KAAKC,SAAL,GAAiBP,gBAAgB,CAACQ,OAAjB,EAAjB;IACA,MAAM;MAAEC,OAAF;MAAWC;IAAX,IAAsBJ,KAA5B;;IACA,IAAIG,OAAJ,EAAa;MACXE,iBAAiB;MACjBZ,WAAW,CAACa,cAAZ,CAA2B,KAAKL,SAAhC,EAA2C,SAA3C,EAAsDE,OAAtD;IACD;;IACD,IAAIC,MAAJ,EAAY;MACVC,iBAAiB;MACjBZ,WAAW,CAACa,cAAZ,CAA2B,KAAKL,SAAhC,EAA2C,QAA3C,EAAqDG,MAArD;IACD;EACF;;EAIkB,IAARG,QAAQ,GAAG;IACpB,OAAO,KAAKN,SAAZ;EACD;;EAEDO,kBAAkB,CAACC,SAAD,EAAkC;IAClD,MAAM;MAAEN,OAAF;MAAWC;IAAX,IAAsB,KAAKJ,KAAjC;;IACA,IAAIG,OAAO,KAAKM,SAAS,CAACN,OAA1B,EAAmC;MACjCE,iBAAiB;MACjBZ,WAAW,CAACa,cAAZ,CAA2B,KAAKL,SAAhC,EAA2C,SAA3C,EAAsDE,OAAtD;IACD;;IACD,IAAIC,MAAM,KAAKK,SAAS,CAACL,MAAzB,EAAiC;MAC/BC,iBAAiB;MACjBZ,WAAW,CAACa,cAAZ,CAA2B,KAAKL,SAAhC,EAA2C,QAA3C,EAAqDG,MAArD;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSM,iBAAiB,CAACC,IAAD,EAAgB;IACtCN,iBAAiB;IACjB,OAAOZ,WAAW,CAACiB,iBAAZ,CAA8B,KAAKT,SAAnC,EAA8CU,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdP,iBAAiB;IACjBZ,WAAW,CAACoB,aAAZ,CAA0B,KAAKZ,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSa,cAAc,CAACC,MAAD,EAA2C;IAC9DV,iBAAiB;IACjB,OAAOZ,WAAW,CAACuB,oBAAZ,CAAiC,KAAKf,SAAtC,EAAiDc,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKpB,KAAnD;IACA,oBACE,oBAAC,qBAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEiB,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAxEwE;;AA2E3E,MAAMf,iBAAiB,GAAG,MAAM;EAC9B,IACEZ,WAAW,KAAK,IAAhB,IACAA,WAAW,CAACa,cAAZ,KAA+B,IAD/B,IAEAb,WAAW,CAAC4B,aAAZ,KAA8B,IAF9B,IAGA5B,WAAW,CAACuB,oBAAZ,KAAqC,IAHrC,IAIAvB,WAAW,CAACoB,aAAZ,KAA8B,IAJ9B,IAKApB,WAAW,CAACiB,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}
|
@@ -3,12 +3,12 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
3
3
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
4
4
|
|
5
5
|
import React from "react";
|
6
|
-
import {
|
6
|
+
import { Platform } from "../Platform";
|
7
7
|
import { SkiaViewApi } from "./api";
|
8
8
|
export const SkiaViewNativeId = {
|
9
9
|
current: 1000
|
10
10
|
};
|
11
|
-
const NativeSkiaView = requireNativeComponent("SkiaDrawView");
|
11
|
+
const NativeSkiaView = Platform.requireNativeComponent("SkiaDrawView");
|
12
12
|
export class SkiaView extends React.Component {
|
13
13
|
constructor(props) {
|
14
14
|
super(props);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","
|
1
|
+
{"version":3,"names":["React","Platform","SkiaViewApi","SkiaViewNativeId","current","NativeSkiaView","requireNativeComponent","SkiaView","Component","constructor","props","_nativeId","onDraw","onSize","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaView.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { Platform } from \"../Platform\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps, SkiaDrawViewProps } from \"./types\";\n\nexport const SkiaViewNativeId = { current: 1000 };\n\nconst NativeSkiaView =\n Platform.requireNativeComponent<NativeSkiaViewProps>(\"SkiaDrawView\");\n\nexport class SkiaView extends React.Component<SkiaDrawViewProps> {\n constructor(props: SkiaDrawViewProps) {\n super(props);\n this._nativeId = SkiaViewNativeId.current++;\n const { onDraw, onSize } = props;\n if (onDraw) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n }\n if (onSize) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n }\n }\n\n private _nativeId: number;\n\n public get nativeId() {\n return this._nativeId;\n }\n\n componentDidUpdate(prevProps: SkiaDrawViewProps) {\n const { onDraw, onSize } = this.props;\n if (onDraw !== prevProps.onDraw) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n }\n if (onSize !== prevProps.onSize) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n }\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n assertSkiaViewApi();\n return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n }\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n public redraw() {\n assertSkiaViewApi();\n SkiaViewApi.requestRedraw(this._nativeId);\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(values: SkiaValue<unknown>[]): () => void {\n assertSkiaViewApi();\n return SkiaViewApi.registerValuesInView(this._nativeId, values);\n }\n\n render() {\n const { mode, debug = false, onSize, ...viewProps } = this.props;\n return (\n <NativeSkiaView\n collapsable={false}\n nativeID={`${this._nativeId}`}\n mode={mode}\n debug={debug}\n {...viewProps}\n />\n );\n }\n}\n\nconst assertSkiaViewApi = () => {\n if (\n SkiaViewApi === null ||\n SkiaViewApi.setJsiProperty === null ||\n SkiaViewApi.callJsiMethod === null ||\n SkiaViewApi.registerValuesInView === null ||\n SkiaViewApi.requestRedraw === null ||\n SkiaViewApi.makeImageSnapshot === null\n ) {\n throw Error(\"Skia View Api was not found.\");\n }\n};\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAIA,SAASC,QAAT,QAAyB,aAAzB;AAEA,SAASC,WAAT,QAA4B,OAA5B;AAGA,OAAO,MAAMC,gBAAgB,GAAG;EAAEC,OAAO,EAAE;AAAX,CAAzB;AAEP,MAAMC,cAAc,GAClBJ,QAAQ,CAACK,sBAAT,CAAqD,cAArD,CADF;AAGA,OAAO,MAAMC,QAAN,SAAuBP,KAAK,CAACQ,SAA7B,CAA0D;EAC/DC,WAAW,CAACC,KAAD,EAA2B;IACpC,MAAMA,KAAN;;IADoC;;IAEpC,KAAKC,SAAL,GAAiBR,gBAAgB,CAACC,OAAjB,EAAjB;IACA,MAAM;MAAEQ,MAAF;MAAUC;IAAV,IAAqBH,KAA3B;;IACA,IAAIE,MAAJ,EAAY;MACVE,iBAAiB;MACjBZ,WAAW,CAACa,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;;IACD,IAAIC,MAAJ,EAAY;MACVC,iBAAiB;MACjBZ,WAAW,CAACa,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,QAA3C,EAAqDE,MAArD;IACD;EACF;;EAIkB,IAARG,QAAQ,GAAG;IACpB,OAAO,KAAKL,SAAZ;EACD;;EAEDM,kBAAkB,CAACC,SAAD,EAA+B;IAC/C,MAAM;MAAEN,MAAF;MAAUC;IAAV,IAAqB,KAAKH,KAAhC;;IACA,IAAIE,MAAM,KAAKM,SAAS,CAACN,MAAzB,EAAiC;MAC/BE,iBAAiB;MACjBZ,WAAW,CAACa,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;;IACD,IAAIC,MAAM,KAAKK,SAAS,CAACL,MAAzB,EAAiC;MAC/BC,iBAAiB;MACjBZ,WAAW,CAACa,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,QAA3C,EAAqDE,MAArD;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSM,iBAAiB,CAACC,IAAD,EAAgB;IACtCN,iBAAiB;IACjB,OAAOZ,WAAW,CAACiB,iBAAZ,CAA8B,KAAKR,SAAnC,EAA8CS,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdP,iBAAiB;IACjBZ,WAAW,CAACoB,aAAZ,CAA0B,KAAKX,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSY,cAAc,CAACC,MAAD,EAA2C;IAC9DV,iBAAiB;IACjB,OAAOZ,WAAW,CAACuB,oBAAZ,CAAiC,KAAKd,SAAtC,EAAiDa,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuBf,MAAvB;MAA+B,GAAGgB;IAAlC,IAAgD,KAAKnB,KAA3D;IACA,oBACE,oBAAC,cAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEgB,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAxE8D;;AA2EjE,MAAMf,iBAAiB,GAAG,MAAM;EAC9B,IACEZ,WAAW,KAAK,IAAhB,IACAA,WAAW,CAACa,cAAZ,KAA+B,IAD/B,IAEAb,WAAW,CAAC4B,aAAZ,KAA8B,IAF9B,IAGA5B,WAAW,CAACuB,oBAAZ,KAAqC,IAHrC,IAIAvB,WAAW,CAACoB,aAAZ,KAA8B,IAJ9B,IAKApB,WAAW,CAACiB,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { useCallback, useRef } from "react";
|
2
|
-
import {
|
2
|
+
import { Platform } from "../Platform";
|
3
3
|
import { TouchType } from "./types";
|
4
4
|
|
5
5
|
const useInternalTouchHandler = function (handlers) {
|
@@ -27,8 +27,8 @@ const useInternalTouchHandler = function (handlers) {
|
|
27
27
|
|
28
28
|
if (touch.type !== TouchType.Start && touch.type !== TouchType.End && touch.type !== TouchType.Cancelled && timeDiffseconds > 0) {
|
29
29
|
prevVelocityRef.current[touch.id] = {
|
30
|
-
x: distX / timeDiffseconds / PixelRatio
|
31
|
-
y: distY / timeDiffseconds / PixelRatio
|
30
|
+
x: distX / timeDiffseconds / Platform.PixelRatio,
|
31
|
+
y: distY / timeDiffseconds / Platform.PixelRatio
|
32
32
|
};
|
33
33
|
}
|
34
34
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["useCallback","useRef","
|
1
|
+
{"version":3,"names":["useCallback","useRef","Platform","TouchType","useInternalTouchHandler","handlers","deps","multiTouch","prevTouchInfoRef","prevVelocityRef","history","forEach","touches","i","length","touch","prevTouch","current","id","timeDiffseconds","timestamp","distX","x","distY","y","type","Start","End","Cancelled","PixelRatio","extendedTouchInfo","velocityX","velocityY","onStart","Active","onActive","onEnd","useTouchHandler","useMultiTouchHandler"],"sources":["useTouchHandler.ts"],"sourcesContent":["import type { DependencyList } from \"react\";\nimport { useCallback, useRef } from \"react\";\n\nimport type { Vector } from \"../skia/types\";\nimport { Platform } from \"../Platform\";\n\nimport type {\n ExtendedTouchInfo,\n TouchHandlers,\n TouchHandler,\n TouchInfo,\n} from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst useInternalTouchHandler = (\n handlers: TouchHandlers,\n deps: DependencyList = [],\n multiTouch = false\n): TouchHandler => {\n const prevTouchInfoRef = useRef<{ [key: number]: TouchInfo | undefined }>({});\n const prevVelocityRef = useRef<{ [key: number]: Vector | undefined }>({});\n\n return useCallback((history: Array<Array<TouchInfo>>) => {\n // Process all items in the current touch history\n history.forEach((touches) => {\n // Enumerate touches\n for (let i = 0; i < touches.length; i++) {\n if (!multiTouch && i > 0) {\n break;\n }\n\n const touch = touches[i];\n const prevTouch = prevTouchInfoRef.current[touch.id];\n // Calculate the velocity from the previous touch.\n const timeDiffseconds =\n touch.timestamp -\n (prevTouchInfoRef.current[touch.id]?.timestamp ?? touch.timestamp);\n\n const distX = touch.x - (prevTouch?.x ?? touch.x);\n const distY = touch.y - (prevTouch?.y ?? touch.y);\n\n if (\n touch.type !== TouchType.Start &&\n touch.type !== TouchType.End &&\n touch.type !== TouchType.Cancelled &&\n timeDiffseconds > 0\n ) {\n prevVelocityRef.current[touch.id] = {\n x: distX / timeDiffseconds / Platform.PixelRatio,\n y: distY / timeDiffseconds / Platform.PixelRatio,\n };\n }\n\n const extendedTouchInfo: ExtendedTouchInfo = {\n ...touch,\n velocityX: prevVelocityRef.current[touch.id]?.x ?? 0,\n velocityY: prevVelocityRef.current[touch.id]?.y ?? 0,\n };\n\n // Save previous touch\n prevTouchInfoRef.current[touch.id] = touch;\n\n if (touch.type === TouchType.Start) {\n delete prevVelocityRef.current[touch.id];\n handlers.onStart && handlers.onStart(touch);\n } else if (touch.type === TouchType.Active) {\n handlers.onActive && handlers.onActive(extendedTouchInfo);\n } else {\n handlers.onEnd && handlers.onEnd(extendedTouchInfo);\n }\n }\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler only handles single touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useTouchHandler = (\n handlers: TouchHandlers,\n deps: DependencyList = []\n): TouchHandler => {\n return useInternalTouchHandler(handlers, deps, false);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler handles multiple touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useMultiTouchHandler = (\n handlers: TouchHandlers,\n deps: DependencyList = []\n): TouchHandler => {\n return useInternalTouchHandler(handlers, deps, true);\n};\n"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","useMemo","lazy","Suspense","Platform","LoadSkiaWeb","WithSkiaWeb","getComponent","fallback","opts","Inner","OS","console","warn"],"sources":["WithSkiaWeb.tsx"],"sourcesContent":["import type { ComponentProps, ComponentType } from \"react\";\nimport React, { useMemo, lazy, Suspense } from \"react\";\nimport { Platform } from \"
|
1
|
+
{"version":3,"names":["React","useMemo","lazy","Suspense","Platform","LoadSkiaWeb","WithSkiaWeb","getComponent","fallback","opts","Inner","OS","console","warn"],"sources":["WithSkiaWeb.tsx"],"sourcesContent":["import type { ComponentProps, ComponentType } from \"react\";\nimport React, { useMemo, lazy, Suspense } from \"react\";\n\nimport { Platform } from \"../Platform\";\n\nimport { LoadSkiaWeb } from \"./LoadSkiaWeb\";\n\ninterface WithSkiaProps {\n fallback?: ComponentProps<typeof Suspense>[\"fallback\"];\n getComponent: () => Promise<{ default: ComponentType }>;\n opts?: Parameters<typeof LoadSkiaWeb>[0];\n}\n\nexport const WithSkiaWeb = ({\n getComponent,\n fallback,\n opts,\n}: WithSkiaProps) => {\n const Inner = useMemo(\n // TODO: investigate\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (): any =>\n lazy(async () => {\n if (Platform.OS === \"web\") {\n await LoadSkiaWeb(opts);\n } else {\n console.warn(\n \"<WithSkiaWeb /> is only necessary on web. Consider not using on native.\"\n );\n }\n return getComponent();\n }),\n [getComponent, opts]\n );\n return (\n <Suspense fallback={fallback ?? null}>\n <Inner />\n </Suspense>\n );\n};\n"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,OAAhB,EAAyBC,IAAzB,EAA+BC,QAA/B,QAA+C,OAA/C;AAEA,SAASC,QAAT,QAAyB,aAAzB;AAEA,SAASC,WAAT,QAA4B,eAA5B;AAQA,OAAO,MAAMC,WAAW,GAAG,QAIN;EAAA,IAJO;IAC1BC,YAD0B;IAE1BC,QAF0B;IAG1BC;EAH0B,CAIP;EACnB,MAAMC,KAAK,GAAGT,OAAO,EACnB;EACA;EACA,mBACEC,IAAI,CAAC,YAAY;IACf,IAAIE,QAAQ,CAACO,EAAT,KAAgB,KAApB,EAA2B;MACzB,MAAMN,WAAW,CAACI,IAAD,CAAjB;IACD,CAFD,MAEO;MACLG,OAAO,CAACC,IAAR,CACE,yEADF;IAGD;;IACD,OAAON,YAAY,EAAnB;EACD,CATG,CAJa,EAcnB,CAACA,YAAD,EAAeE,IAAf,CAdmB,CAArB;EAgBA,oBACE,oBAAC,QAAD;IAAU,QAAQ,EAAED,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc;EAAhC,gBACE,oBAAC,KAAD,OADF,CADF;AAKD,CA1BM"}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import type { HostComponent, NodeHandle, ViewComponent } from "react-native";
|
3
|
+
import type { DataModule } from "../skia/types";
|
4
|
+
export interface IPlatform {
|
5
|
+
OS: string;
|
6
|
+
requireNativeComponent: <T>(viewName: string) => HostComponent<T>;
|
7
|
+
PixelRatio: number;
|
8
|
+
NativeModules: Record<string, any>;
|
9
|
+
findNodeHandle: (componentOrHandle: null | number | React.Component<any, any> | React.ComponentClass<any>) => null | NodeHandle;
|
10
|
+
resolveAsset: (source: DataModule) => string;
|
11
|
+
View: typeof ViewComponent;
|
12
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from "./Platform";
|
@@ -17,7 +17,7 @@ export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps>
|
|
17
17
|
protected width: number;
|
18
18
|
protected height: number;
|
19
19
|
private unsubscribeAll;
|
20
|
-
private
|
20
|
+
private onLayoutEvent;
|
21
21
|
protected getSize(): {
|
22
22
|
width: number;
|
23
23
|
height: number;
|
@@ -58,5 +58,10 @@ export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps>
|
|
58
58
|
registerValues(_values: SkiaValue<unknown>[]): void;
|
59
59
|
private handleTouchEvent;
|
60
60
|
createTouchHandler(touchType: TouchType): (evt: PointerEvent) => void;
|
61
|
+
private onStart;
|
62
|
+
private onActive;
|
63
|
+
private onCancel;
|
64
|
+
private onEnd;
|
65
|
+
private onLayout;
|
61
66
|
render(): JSX.Element;
|
62
67
|
}
|
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.
|
10
|
+
"version": "0.1.190",
|
11
11
|
"description": "High-performance React Native Graphics using Skia",
|
12
12
|
"main": "lib/module/index.js",
|
13
13
|
"files": [
|
@@ -81,28 +81,28 @@
|
|
81
81
|
"devDependencies": {
|
82
82
|
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
|
83
83
|
"@types/jest": "^28.1.6",
|
84
|
+
"@types/pixelmatch": "^5.2.4",
|
85
|
+
"@types/pngjs": "^6.0.1",
|
84
86
|
"@types/react-native": "0.70.6",
|
85
87
|
"@types/react-reconciler": "^0.26.7",
|
88
|
+
"@types/ws": "^8.5.3",
|
86
89
|
"eslint": "8.21.0",
|
87
90
|
"eslint-config-react-native-wcandillon": "3.9.0",
|
88
91
|
"eslint-plugin-reanimated": "2.0.0",
|
89
92
|
"jest": "28.1.3",
|
90
93
|
"merge-dirs": "^0.2.1",
|
94
|
+
"pixelmatch": "^5.3.0",
|
95
|
+
"pngjs": "^6.0.0",
|
91
96
|
"react": "18.1.0",
|
92
97
|
"react-native": "0.71.7",
|
93
98
|
"react-native-builder-bob": "^0.18.2",
|
94
99
|
"ts-jest": "^28.0.7",
|
95
|
-
"typescript": "4.8.3"
|
100
|
+
"typescript": "4.8.3",
|
101
|
+
"ws": "^8.11.0"
|
96
102
|
},
|
97
103
|
"dependencies": {
|
98
|
-
"@types/pixelmatch": "^5.2.4",
|
99
|
-
"@types/pngjs": "^6.0.1",
|
100
|
-
"@types/ws": "^8.5.3",
|
101
104
|
"canvaskit-wasm": "0.38.0",
|
102
|
-
"
|
103
|
-
"pngjs": "^6.0.0",
|
104
|
-
"react-reconciler": "^0.27.0",
|
105
|
-
"ws": "^8.11.0"
|
105
|
+
"react-reconciler": "^0.27.0"
|
106
106
|
},
|
107
107
|
"eslintIgnore": [
|
108
108
|
"node_modules/",
|
@@ -0,0 +1,20 @@
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
2
|
+
import type { HostComponent, NodeHandle, ViewComponent } from "react-native";
|
3
|
+
|
4
|
+
import type { DataModule } from "../skia/types";
|
5
|
+
|
6
|
+
export interface IPlatform {
|
7
|
+
OS: string;
|
8
|
+
requireNativeComponent: <T>(viewName: string) => HostComponent<T>;
|
9
|
+
PixelRatio: number;
|
10
|
+
NativeModules: Record<string, any>;
|
11
|
+
findNodeHandle: (
|
12
|
+
componentOrHandle:
|
13
|
+
| null
|
14
|
+
| number
|
15
|
+
| React.Component<any, any>
|
16
|
+
| React.ComponentClass<any>
|
17
|
+
) => null | NodeHandle;
|
18
|
+
resolveAsset: (source: DataModule) => string;
|
19
|
+
View: typeof ViewComponent;
|
20
|
+
}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
import {
|
2
|
+
Image,
|
3
|
+
PixelRatio,
|
4
|
+
requireNativeComponent,
|
5
|
+
Platform as RNPlatform,
|
6
|
+
findNodeHandle,
|
7
|
+
NativeModules,
|
8
|
+
View,
|
9
|
+
} from "react-native";
|
10
|
+
|
11
|
+
import type { DataModule } from "../skia/types";
|
12
|
+
import { isRNModule } from "../skia/types";
|
13
|
+
|
14
|
+
import type { IPlatform } from "./IPlatform";
|
15
|
+
|
16
|
+
export const Platform: IPlatform = {
|
17
|
+
OS: RNPlatform.OS,
|
18
|
+
PixelRatio: PixelRatio.get(),
|
19
|
+
requireNativeComponent,
|
20
|
+
resolveAsset: (source: DataModule) => {
|
21
|
+
return isRNModule(source)
|
22
|
+
? Image.resolveAssetSource(source).uri
|
23
|
+
: source.default;
|
24
|
+
},
|
25
|
+
findNodeHandle,
|
26
|
+
NativeModules,
|
27
|
+
View,
|
28
|
+
};
|