@shopify/react-native-skia 2.2.9 → 2.2.10
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/lib/commonjs/renderer/Canvas.d.ts +1 -0
- package/lib/commonjs/renderer/Canvas.js.map +1 -1
- package/lib/commonjs/specs/NativeSkiaModule.web.d.ts +3 -3
- package/lib/commonjs/specs/NativeSkiaModule.web.js.map +1 -1
- package/lib/commonjs/specs/SkiaPictureViewNativeComponent.web.d.ts +1 -2
- package/lib/commonjs/views/SkiaPictureView.web.d.ts +10 -6
- package/lib/commonjs/views/SkiaPictureView.web.js +253 -20
- package/lib/commonjs/views/SkiaPictureView.web.js.map +1 -1
- package/lib/commonjs/views/types.d.ts +1 -0
- package/lib/commonjs/views/types.js.map +1 -1
- package/lib/module/renderer/Canvas.d.ts +1 -0
- package/lib/module/renderer/Canvas.js.map +1 -1
- package/lib/module/specs/NativeSkiaModule.web.d.ts +3 -3
- package/lib/module/specs/NativeSkiaModule.web.js.map +1 -1
- package/lib/module/specs/SkiaPictureViewNativeComponent.web.d.ts +1 -2
- package/lib/module/views/SkiaPictureView.web.d.ts +10 -6
- package/lib/module/views/SkiaPictureView.web.js +251 -18
- package/lib/module/views/SkiaPictureView.web.js.map +1 -1
- package/lib/module/views/types.d.ts +1 -0
- package/lib/module/views/types.js.map +1 -1
- package/lib/typescript/lib/commonjs/specs/SkiaPictureViewNativeComponent.web.d.ts +11 -1
- package/lib/typescript/lib/commonjs/views/SkiaPictureView.web.d.ts +1 -6
- package/lib/typescript/lib/module/specs/SkiaPictureViewNativeComponent.web.d.ts +1 -2
- package/lib/typescript/lib/module/views/SkiaPictureView.web.d.ts +2 -6
- package/lib/typescript/src/renderer/Canvas.d.ts +1 -0
- package/lib/typescript/src/specs/NativeSkiaModule.web.d.ts +3 -3
- package/lib/typescript/src/specs/SkiaPictureViewNativeComponent.web.d.ts +1 -2
- package/lib/typescript/src/views/SkiaPictureView.web.d.ts +10 -6
- package/lib/typescript/src/views/types.d.ts +1 -0
- package/package.json +1 -1
- package/src/renderer/Canvas.tsx +1 -0
- package/src/renderer/__tests__/e2e/ParagraphMethods.spec.tsx +115 -110
- package/src/specs/NativeSkiaModule.web.ts +4 -4
- package/src/views/SkiaPictureView.web.tsx +312 -18
- package/src/views/types.ts +4 -0
- package/lib/commonjs/views/SkiaBaseWebView.d.ts +0 -40
- package/lib/commonjs/views/SkiaBaseWebView.js +0 -143
- package/lib/commonjs/views/SkiaBaseWebView.js.map +0 -1
- package/lib/module/views/SkiaBaseWebView.d.ts +0 -40
- package/lib/module/views/SkiaBaseWebView.js +0 -136
- package/lib/module/views/SkiaBaseWebView.js.map +0 -1
- package/lib/typescript/lib/commonjs/views/SkiaBaseWebView.d.ts +0 -39
- package/lib/typescript/lib/module/views/SkiaBaseWebView.d.ts +0 -36
- package/lib/typescript/src/views/SkiaBaseWebView.d.ts +0 -40
- package/src/views/SkiaBaseWebView.tsx +0 -140
@@ -1,40 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import type { SkRect, SkCanvas } from "../skia/types";
|
3
|
-
import type { SkiaBaseViewProps } from "./types";
|
4
|
-
export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps> extends React.Component<TProps> {
|
5
|
-
constructor(props: TProps);
|
6
|
-
private _surface;
|
7
|
-
private _unsubscriptions;
|
8
|
-
private _canvas;
|
9
|
-
private _canvasRef;
|
10
|
-
private _redrawRequests;
|
11
|
-
private requestId;
|
12
|
-
protected width: number;
|
13
|
-
protected height: number;
|
14
|
-
private unsubscribeAll;
|
15
|
-
private onLayoutEvent;
|
16
|
-
getSize(): {
|
17
|
-
width: number;
|
18
|
-
height: number;
|
19
|
-
};
|
20
|
-
componentDidMount(): void;
|
21
|
-
componentDidUpdate(): void;
|
22
|
-
componentWillUnmount(): void;
|
23
|
-
/**
|
24
|
-
* Creates a snapshot from the canvas in the surface
|
25
|
-
* @param rect Rect to use as bounds. Optional.
|
26
|
-
* @returns An Image object.
|
27
|
-
*/
|
28
|
-
makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage | undefined;
|
29
|
-
/**
|
30
|
-
* Override to render
|
31
|
-
*/
|
32
|
-
protected abstract renderInCanvas(canvas: SkCanvas): void;
|
33
|
-
/**
|
34
|
-
* Sends a redraw request to the native SkiaView.
|
35
|
-
*/
|
36
|
-
private tick;
|
37
|
-
redraw(): void;
|
38
|
-
private onLayout;
|
39
|
-
render(): React.JSX.Element;
|
40
|
-
}
|
@@ -1,143 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.SkiaBaseWebView = void 0;
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
8
|
-
var _JsiSkSurface = require("../skia/web/JsiSkSurface");
|
9
|
-
var _Platform = require("../Platform");
|
10
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
11
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
12
|
-
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
13
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
14
|
-
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* global HTMLCanvasElement */
|
15
|
-
const pd = _Platform.Platform.PixelRatio;
|
16
|
-
class SkiaBaseWebView extends _react.default.Component {
|
17
|
-
constructor(props) {
|
18
|
-
super(props);
|
19
|
-
_defineProperty(this, "_surface", null);
|
20
|
-
_defineProperty(this, "_unsubscriptions", []);
|
21
|
-
_defineProperty(this, "_canvas", null);
|
22
|
-
_defineProperty(this, "_canvasRef", /*#__PURE__*/_react.default.createRef());
|
23
|
-
_defineProperty(this, "_redrawRequests", 0);
|
24
|
-
_defineProperty(this, "requestId", 0);
|
25
|
-
_defineProperty(this, "width", 0);
|
26
|
-
_defineProperty(this, "height", 0);
|
27
|
-
_defineProperty(this, "onLayout", this.onLayoutEvent.bind(this));
|
28
|
-
}
|
29
|
-
unsubscribeAll() {
|
30
|
-
this._unsubscriptions.forEach(u => u());
|
31
|
-
this._unsubscriptions = [];
|
32
|
-
}
|
33
|
-
onLayoutEvent(evt) {
|
34
|
-
const {
|
35
|
-
CanvasKit
|
36
|
-
} = global;
|
37
|
-
// Reset canvas / surface on layout change
|
38
|
-
const canvas = this._canvasRef.current;
|
39
|
-
if (canvas) {
|
40
|
-
this.width = canvas.clientWidth;
|
41
|
-
this.height = canvas.clientHeight;
|
42
|
-
canvas.width = this.width * pd;
|
43
|
-
canvas.height = this.height * pd;
|
44
|
-
const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);
|
45
|
-
const ctx = canvas.getContext("webgl2");
|
46
|
-
if (ctx) {
|
47
|
-
ctx.drawingBufferColorSpace = "display-p3";
|
48
|
-
}
|
49
|
-
if (!surface) {
|
50
|
-
throw new Error("Could not create surface");
|
51
|
-
}
|
52
|
-
this._surface = new _JsiSkSurface.JsiSkSurface(CanvasKit, surface);
|
53
|
-
this._canvas = this._surface.getCanvas();
|
54
|
-
this.redraw();
|
55
|
-
}
|
56
|
-
// Call onLayout callback if it exists
|
57
|
-
if (this.props.onLayout) {
|
58
|
-
this.props.onLayout(evt);
|
59
|
-
}
|
60
|
-
}
|
61
|
-
getSize() {
|
62
|
-
return {
|
63
|
-
width: this.width,
|
64
|
-
height: this.height
|
65
|
-
};
|
66
|
-
}
|
67
|
-
componentDidMount() {
|
68
|
-
// Start render loop
|
69
|
-
this.tick();
|
70
|
-
}
|
71
|
-
componentDidUpdate() {
|
72
|
-
this.redraw();
|
73
|
-
}
|
74
|
-
componentWillUnmount() {
|
75
|
-
this.unsubscribeAll();
|
76
|
-
cancelAnimationFrame(this.requestId);
|
77
|
-
// eslint-disable-next-line max-len
|
78
|
-
// https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use
|
79
|
-
// https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
|
80
|
-
// We delete the context, only if the context has been intialized
|
81
|
-
if (this._surface) {
|
82
|
-
var _this$_canvasRef$curr;
|
83
|
-
(_this$_canvasRef$curr = this._canvasRef.current) === null || _this$_canvasRef$curr === void 0 || (_this$_canvasRef$curr = _this$_canvasRef$curr.getContext("webgl2")) === null || _this$_canvasRef$curr === void 0 || (_this$_canvasRef$curr = _this$_canvasRef$curr.getExtension("WEBGL_lose_context")) === null || _this$_canvasRef$curr === void 0 || _this$_canvasRef$curr.loseContext();
|
84
|
-
}
|
85
|
-
}
|
86
|
-
|
87
|
-
/**
|
88
|
-
* Creates a snapshot from the canvas in the surface
|
89
|
-
* @param rect Rect to use as bounds. Optional.
|
90
|
-
* @returns An Image object.
|
91
|
-
*/
|
92
|
-
makeImageSnapshot(rect) {
|
93
|
-
var _this$_surface, _this$_surface2;
|
94
|
-
this._canvas.clear(CanvasKit.TRANSPARENT);
|
95
|
-
this.renderInCanvas(this._canvas);
|
96
|
-
(_this$_surface = this._surface) === null || _this$_surface === void 0 || _this$_surface.ref.flush();
|
97
|
-
return (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.makeImageSnapshot(rect);
|
98
|
-
}
|
99
|
-
|
100
|
-
/**
|
101
|
-
* Override to render
|
102
|
-
*/
|
103
|
-
|
104
|
-
/**
|
105
|
-
* Sends a redraw request to the native SkiaView.
|
106
|
-
*/
|
107
|
-
tick() {
|
108
|
-
if (this._redrawRequests > 0) {
|
109
|
-
this._redrawRequests = 0;
|
110
|
-
if (this._canvas) {
|
111
|
-
var _this$_surface3;
|
112
|
-
const canvas = this._canvas;
|
113
|
-
canvas.clear(Float32Array.of(0, 0, 0, 0));
|
114
|
-
canvas.save();
|
115
|
-
canvas.scale(pd, pd);
|
116
|
-
this.renderInCanvas(canvas);
|
117
|
-
canvas.restore();
|
118
|
-
(_this$_surface3 = this._surface) === null || _this$_surface3 === void 0 || _this$_surface3.ref.flush();
|
119
|
-
}
|
120
|
-
}
|
121
|
-
this.requestId = requestAnimationFrame(this.tick.bind(this));
|
122
|
-
}
|
123
|
-
redraw() {
|
124
|
-
this._redrawRequests++;
|
125
|
-
}
|
126
|
-
render() {
|
127
|
-
const {
|
128
|
-
debug = false,
|
129
|
-
...viewProps
|
130
|
-
} = this.props;
|
131
|
-
return /*#__PURE__*/_react.default.createElement(_Platform.Platform.View, _extends({}, viewProps, {
|
132
|
-
onLayout: this.onLayout
|
133
|
-
}), /*#__PURE__*/_react.default.createElement("canvas", {
|
134
|
-
ref: this._canvasRef,
|
135
|
-
style: {
|
136
|
-
display: "flex",
|
137
|
-
flex: 1
|
138
|
-
}
|
139
|
-
}));
|
140
|
-
}
|
141
|
-
}
|
142
|
-
exports.SkiaBaseWebView = SkiaBaseWebView;
|
143
|
-
//# sourceMappingURL=SkiaBaseWebView.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_JsiSkSurface","_Platform","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","_defineProperty","_toPropertyKey","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","pd","Platform","PixelRatio","SkiaBaseWebView","React","Component","constructor","props","createRef","onLayoutEvent","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","ctx","getContext","drawingBufferColorSpace","Error","_surface","JsiSkSurface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","_this$_canvasRef$curr","getExtension","loseContext","makeImageSnapshot","rect","_this$_surface","_this$_surface2","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","_this$_surface3","Float32Array","of","save","scale","restore","requestAnimationFrame","render","debug","viewProps","createElement","View","style","display","flex","exports"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { SkiaBaseViewProps } 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 }\n\n private _surface: JsiSkSurface | null = null;\n private _unsubscriptions: Array<() => void> = [];\n private _canvas: SkCanvas | null = null;\n private _canvasRef = React.createRef<HTMLCanvasElement>();\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 const ctx = canvas.getContext(\"webgl2\");\n if (ctx) {\n ctx.drawingBufferColorSpace = \"display-p3\";\n }\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 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 // eslint-disable-next-line max-len\n // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use\n // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n // We delete the context, only if the context has been intialized\n if (this._surface) {\n this._canvasRef.current\n ?.getContext(\"webgl2\")\n ?.getExtension(\"WEBGL_lose_context\")\n ?.loseContext();\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 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(canvas: SkCanvas): void;\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n private tick() {\n if (this._redrawRequests > 0) {\n this._redrawRequests = 0;\n if (this._canvas) {\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);\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 private onLayout = this.onLayoutEvent.bind(this);\n\n render() {\n const { debug = false, ...viewProps } = this.props;\n return (\n <Platform.View {...viewProps} onLayout={this.onLayout}>\n <canvas ref={this._canvasRef} style={{ display: \"flex\", flex: 1 }} />\n </Platform.View>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
@@ -1,40 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import type { SkRect, SkCanvas } from "../skia/types";
|
3
|
-
import type { SkiaBaseViewProps } from "./types";
|
4
|
-
export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps> extends React.Component<TProps> {
|
5
|
-
constructor(props: TProps);
|
6
|
-
private _surface;
|
7
|
-
private _unsubscriptions;
|
8
|
-
private _canvas;
|
9
|
-
private _canvasRef;
|
10
|
-
private _redrawRequests;
|
11
|
-
private requestId;
|
12
|
-
protected width: number;
|
13
|
-
protected height: number;
|
14
|
-
private unsubscribeAll;
|
15
|
-
private onLayoutEvent;
|
16
|
-
getSize(): {
|
17
|
-
width: number;
|
18
|
-
height: number;
|
19
|
-
};
|
20
|
-
componentDidMount(): void;
|
21
|
-
componentDidUpdate(): void;
|
22
|
-
componentWillUnmount(): void;
|
23
|
-
/**
|
24
|
-
* Creates a snapshot from the canvas in the surface
|
25
|
-
* @param rect Rect to use as bounds. Optional.
|
26
|
-
* @returns An Image object.
|
27
|
-
*/
|
28
|
-
makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage | undefined;
|
29
|
-
/**
|
30
|
-
* Override to render
|
31
|
-
*/
|
32
|
-
protected abstract renderInCanvas(canvas: SkCanvas): void;
|
33
|
-
/**
|
34
|
-
* Sends a redraw request to the native SkiaView.
|
35
|
-
*/
|
36
|
-
private tick;
|
37
|
-
redraw(): void;
|
38
|
-
private onLayout;
|
39
|
-
render(): React.JSX.Element;
|
40
|
-
}
|
@@ -1,136 +0,0 @@
|
|
1
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
2
|
-
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
3
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
4
|
-
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
5
|
-
/* global HTMLCanvasElement */
|
6
|
-
import React from "react";
|
7
|
-
import { JsiSkSurface } from "../skia/web/JsiSkSurface";
|
8
|
-
import { Platform } from "../Platform";
|
9
|
-
const pd = Platform.PixelRatio;
|
10
|
-
export class SkiaBaseWebView extends React.Component {
|
11
|
-
constructor(props) {
|
12
|
-
super(props);
|
13
|
-
_defineProperty(this, "_surface", null);
|
14
|
-
_defineProperty(this, "_unsubscriptions", []);
|
15
|
-
_defineProperty(this, "_canvas", null);
|
16
|
-
_defineProperty(this, "_canvasRef", /*#__PURE__*/React.createRef());
|
17
|
-
_defineProperty(this, "_redrawRequests", 0);
|
18
|
-
_defineProperty(this, "requestId", 0);
|
19
|
-
_defineProperty(this, "width", 0);
|
20
|
-
_defineProperty(this, "height", 0);
|
21
|
-
_defineProperty(this, "onLayout", this.onLayoutEvent.bind(this));
|
22
|
-
}
|
23
|
-
unsubscribeAll() {
|
24
|
-
this._unsubscriptions.forEach(u => u());
|
25
|
-
this._unsubscriptions = [];
|
26
|
-
}
|
27
|
-
onLayoutEvent(evt) {
|
28
|
-
const {
|
29
|
-
CanvasKit
|
30
|
-
} = global;
|
31
|
-
// Reset canvas / surface on layout change
|
32
|
-
const canvas = this._canvasRef.current;
|
33
|
-
if (canvas) {
|
34
|
-
this.width = canvas.clientWidth;
|
35
|
-
this.height = canvas.clientHeight;
|
36
|
-
canvas.width = this.width * pd;
|
37
|
-
canvas.height = this.height * pd;
|
38
|
-
const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);
|
39
|
-
const ctx = canvas.getContext("webgl2");
|
40
|
-
if (ctx) {
|
41
|
-
ctx.drawingBufferColorSpace = "display-p3";
|
42
|
-
}
|
43
|
-
if (!surface) {
|
44
|
-
throw new Error("Could not create surface");
|
45
|
-
}
|
46
|
-
this._surface = new JsiSkSurface(CanvasKit, surface);
|
47
|
-
this._canvas = this._surface.getCanvas();
|
48
|
-
this.redraw();
|
49
|
-
}
|
50
|
-
// Call onLayout callback if it exists
|
51
|
-
if (this.props.onLayout) {
|
52
|
-
this.props.onLayout(evt);
|
53
|
-
}
|
54
|
-
}
|
55
|
-
getSize() {
|
56
|
-
return {
|
57
|
-
width: this.width,
|
58
|
-
height: this.height
|
59
|
-
};
|
60
|
-
}
|
61
|
-
componentDidMount() {
|
62
|
-
// Start render loop
|
63
|
-
this.tick();
|
64
|
-
}
|
65
|
-
componentDidUpdate() {
|
66
|
-
this.redraw();
|
67
|
-
}
|
68
|
-
componentWillUnmount() {
|
69
|
-
this.unsubscribeAll();
|
70
|
-
cancelAnimationFrame(this.requestId);
|
71
|
-
// eslint-disable-next-line max-len
|
72
|
-
// https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use
|
73
|
-
// https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
|
74
|
-
// We delete the context, only if the context has been intialized
|
75
|
-
if (this._surface) {
|
76
|
-
var _this$_canvasRef$curr;
|
77
|
-
(_this$_canvasRef$curr = this._canvasRef.current) === null || _this$_canvasRef$curr === void 0 || (_this$_canvasRef$curr = _this$_canvasRef$curr.getContext("webgl2")) === null || _this$_canvasRef$curr === void 0 || (_this$_canvasRef$curr = _this$_canvasRef$curr.getExtension("WEBGL_lose_context")) === null || _this$_canvasRef$curr === void 0 || _this$_canvasRef$curr.loseContext();
|
78
|
-
}
|
79
|
-
}
|
80
|
-
|
81
|
-
/**
|
82
|
-
* Creates a snapshot from the canvas in the surface
|
83
|
-
* @param rect Rect to use as bounds. Optional.
|
84
|
-
* @returns An Image object.
|
85
|
-
*/
|
86
|
-
makeImageSnapshot(rect) {
|
87
|
-
var _this$_surface, _this$_surface2;
|
88
|
-
this._canvas.clear(CanvasKit.TRANSPARENT);
|
89
|
-
this.renderInCanvas(this._canvas);
|
90
|
-
(_this$_surface = this._surface) === null || _this$_surface === void 0 || _this$_surface.ref.flush();
|
91
|
-
return (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.makeImageSnapshot(rect);
|
92
|
-
}
|
93
|
-
|
94
|
-
/**
|
95
|
-
* Override to render
|
96
|
-
*/
|
97
|
-
|
98
|
-
/**
|
99
|
-
* Sends a redraw request to the native SkiaView.
|
100
|
-
*/
|
101
|
-
tick() {
|
102
|
-
if (this._redrawRequests > 0) {
|
103
|
-
this._redrawRequests = 0;
|
104
|
-
if (this._canvas) {
|
105
|
-
var _this$_surface3;
|
106
|
-
const canvas = this._canvas;
|
107
|
-
canvas.clear(Float32Array.of(0, 0, 0, 0));
|
108
|
-
canvas.save();
|
109
|
-
canvas.scale(pd, pd);
|
110
|
-
this.renderInCanvas(canvas);
|
111
|
-
canvas.restore();
|
112
|
-
(_this$_surface3 = this._surface) === null || _this$_surface3 === void 0 || _this$_surface3.ref.flush();
|
113
|
-
}
|
114
|
-
}
|
115
|
-
this.requestId = requestAnimationFrame(this.tick.bind(this));
|
116
|
-
}
|
117
|
-
redraw() {
|
118
|
-
this._redrawRequests++;
|
119
|
-
}
|
120
|
-
render() {
|
121
|
-
const {
|
122
|
-
debug = false,
|
123
|
-
...viewProps
|
124
|
-
} = this.props;
|
125
|
-
return /*#__PURE__*/React.createElement(Platform.View, _extends({}, viewProps, {
|
126
|
-
onLayout: this.onLayout
|
127
|
-
}), /*#__PURE__*/React.createElement("canvas", {
|
128
|
-
ref: this._canvasRef,
|
129
|
-
style: {
|
130
|
-
display: "flex",
|
131
|
-
flex: 1
|
132
|
-
}
|
133
|
-
}));
|
134
|
-
}
|
135
|
-
}
|
136
|
-
//# sourceMappingURL=SkiaBaseWebView.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["React","JsiSkSurface","Platform","pd","PixelRatio","SkiaBaseWebView","Component","constructor","props","_defineProperty","createRef","onLayoutEvent","bind","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","ctx","getContext","drawingBufferColorSpace","Error","_surface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","_this$_canvasRef$curr","getExtension","loseContext","makeImageSnapshot","rect","_this$_surface","_this$_surface2","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","_this$_surface3","Float32Array","of","save","scale","restore","requestAnimationFrame","render","debug","viewProps","createElement","View","_extends","style","display","flex"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { SkiaBaseViewProps } 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 }\n\n private _surface: JsiSkSurface | null = null;\n private _unsubscriptions: Array<() => void> = [];\n private _canvas: SkCanvas | null = null;\n private _canvasRef = React.createRef<HTMLCanvasElement>();\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 const ctx = canvas.getContext(\"webgl2\");\n if (ctx) {\n ctx.drawingBufferColorSpace = \"display-p3\";\n }\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 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 // eslint-disable-next-line max-len\n // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use\n // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n // We delete the context, only if the context has been intialized\n if (this._surface) {\n this._canvasRef.current\n ?.getContext(\"webgl2\")\n ?.getExtension(\"WEBGL_lose_context\")\n ?.loseContext();\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 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(canvas: SkCanvas): void;\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n private tick() {\n if (this._redrawRequests > 0) {\n this._redrawRequests = 0;\n if (this._canvas) {\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);\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 private onLayout = this.onLayoutEvent.bind(this);\n\n render() {\n const { debug = false, ...viewProps } = this.props;\n return (\n <Platform.View {...viewProps} onLayout={this.onLayout}>\n <canvas ref={this._canvasRef} style={{ display: \"flex\", flex: 1 }} />\n </Platform.View>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
@@ -1,39 +0,0 @@
|
|
1
|
-
export const __esModule: boolean;
|
2
|
-
declare const SkiaBaseWebView_base: any;
|
3
|
-
export class SkiaBaseWebView extends SkiaBaseWebView_base {
|
4
|
-
[x: string]: any;
|
5
|
-
constructor(props: any);
|
6
|
-
unsubscribeAll(): void;
|
7
|
-
_unsubscriptions: any[] | undefined;
|
8
|
-
onLayoutEvent(evt: any): void;
|
9
|
-
width: any;
|
10
|
-
height: any;
|
11
|
-
_surface: _JsiSkSurface.JsiSkSurface | undefined;
|
12
|
-
_canvas: import("../skia/web/JsiSkCanvas").JsiSkCanvas | undefined;
|
13
|
-
getSize(): {
|
14
|
-
width: any;
|
15
|
-
height: any;
|
16
|
-
};
|
17
|
-
componentDidMount(): void;
|
18
|
-
componentDidUpdate(): void;
|
19
|
-
componentWillUnmount(): void;
|
20
|
-
/**
|
21
|
-
* Creates a snapshot from the canvas in the surface
|
22
|
-
* @param rect Rect to use as bounds. Optional.
|
23
|
-
* @returns An Image object.
|
24
|
-
*/
|
25
|
-
makeImageSnapshot(rect: any): import("../skia/web/JsiSkImage").JsiSkImage | undefined;
|
26
|
-
/**
|
27
|
-
* Override to render
|
28
|
-
*/
|
29
|
-
/**
|
30
|
-
* Sends a redraw request to the native SkiaView.
|
31
|
-
*/
|
32
|
-
tick(): void;
|
33
|
-
_redrawRequests: number | undefined;
|
34
|
-
requestId: number | undefined;
|
35
|
-
redraw(): void;
|
36
|
-
render(): any;
|
37
|
-
}
|
38
|
-
import _JsiSkSurface = require("../skia/web/JsiSkSurface");
|
39
|
-
export {};
|
@@ -1,36 +0,0 @@
|
|
1
|
-
export class SkiaBaseWebView extends React.Component<any, any, any> {
|
2
|
-
constructor(props: any);
|
3
|
-
unsubscribeAll(): void;
|
4
|
-
_unsubscriptions: any[] | undefined;
|
5
|
-
onLayoutEvent(evt: any): void;
|
6
|
-
width: any;
|
7
|
-
height: any;
|
8
|
-
_surface: JsiSkSurface | undefined;
|
9
|
-
_canvas: import("../skia/web/JsiSkCanvas").JsiSkCanvas | undefined;
|
10
|
-
getSize(): {
|
11
|
-
width: any;
|
12
|
-
height: any;
|
13
|
-
};
|
14
|
-
componentDidMount(): void;
|
15
|
-
componentDidUpdate(): void;
|
16
|
-
componentWillUnmount(): void;
|
17
|
-
/**
|
18
|
-
* Creates a snapshot from the canvas in the surface
|
19
|
-
* @param rect Rect to use as bounds. Optional.
|
20
|
-
* @returns An Image object.
|
21
|
-
*/
|
22
|
-
makeImageSnapshot(rect: any): import("..").JsiSkImage | undefined;
|
23
|
-
/**
|
24
|
-
* Override to render
|
25
|
-
*/
|
26
|
-
/**
|
27
|
-
* Sends a redraw request to the native SkiaView.
|
28
|
-
*/
|
29
|
-
tick(): void;
|
30
|
-
_redrawRequests: number | undefined;
|
31
|
-
requestId: number | undefined;
|
32
|
-
redraw(): void;
|
33
|
-
render(): React.CElement<import("react-native").ViewProps, import("react-native").View>;
|
34
|
-
}
|
35
|
-
import React from "react";
|
36
|
-
import { JsiSkSurface } from "../skia/web/JsiSkSurface";
|
@@ -1,40 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import type { SkRect, SkCanvas } from "../skia/types";
|
3
|
-
import type { SkiaBaseViewProps } from "./types";
|
4
|
-
export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps> extends React.Component<TProps> {
|
5
|
-
constructor(props: TProps);
|
6
|
-
private _surface;
|
7
|
-
private _unsubscriptions;
|
8
|
-
private _canvas;
|
9
|
-
private _canvasRef;
|
10
|
-
private _redrawRequests;
|
11
|
-
private requestId;
|
12
|
-
protected width: number;
|
13
|
-
protected height: number;
|
14
|
-
private unsubscribeAll;
|
15
|
-
private onLayoutEvent;
|
16
|
-
getSize(): {
|
17
|
-
width: number;
|
18
|
-
height: number;
|
19
|
-
};
|
20
|
-
componentDidMount(): void;
|
21
|
-
componentDidUpdate(): void;
|
22
|
-
componentWillUnmount(): void;
|
23
|
-
/**
|
24
|
-
* Creates a snapshot from the canvas in the surface
|
25
|
-
* @param rect Rect to use as bounds. Optional.
|
26
|
-
* @returns An Image object.
|
27
|
-
*/
|
28
|
-
makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage | undefined;
|
29
|
-
/**
|
30
|
-
* Override to render
|
31
|
-
*/
|
32
|
-
protected abstract renderInCanvas(canvas: SkCanvas): void;
|
33
|
-
/**
|
34
|
-
* Sends a redraw request to the native SkiaView.
|
35
|
-
*/
|
36
|
-
private tick;
|
37
|
-
redraw(): void;
|
38
|
-
private onLayout;
|
39
|
-
render(): React.JSX.Element;
|
40
|
-
}
|
@@ -1,140 +0,0 @@
|
|
1
|
-
/* global HTMLCanvasElement */
|
2
|
-
import React from "react";
|
3
|
-
import type { LayoutChangeEvent } from "react-native";
|
4
|
-
|
5
|
-
import type { SkRect, SkCanvas } from "../skia/types";
|
6
|
-
import { JsiSkSurface } from "../skia/web/JsiSkSurface";
|
7
|
-
import { Platform } from "../Platform";
|
8
|
-
|
9
|
-
import type { SkiaBaseViewProps } from "./types";
|
10
|
-
|
11
|
-
const pd = Platform.PixelRatio;
|
12
|
-
|
13
|
-
export abstract class SkiaBaseWebView<
|
14
|
-
TProps extends SkiaBaseViewProps
|
15
|
-
> extends React.Component<TProps> {
|
16
|
-
constructor(props: TProps) {
|
17
|
-
super(props);
|
18
|
-
}
|
19
|
-
|
20
|
-
private _surface: JsiSkSurface | null = null;
|
21
|
-
private _unsubscriptions: Array<() => void> = [];
|
22
|
-
private _canvas: SkCanvas | null = null;
|
23
|
-
private _canvasRef = React.createRef<HTMLCanvasElement>();
|
24
|
-
private _redrawRequests = 0;
|
25
|
-
private requestId = 0;
|
26
|
-
|
27
|
-
protected width = 0;
|
28
|
-
protected height = 0;
|
29
|
-
|
30
|
-
private unsubscribeAll() {
|
31
|
-
this._unsubscriptions.forEach((u) => u());
|
32
|
-
this._unsubscriptions = [];
|
33
|
-
}
|
34
|
-
|
35
|
-
private onLayoutEvent(evt: LayoutChangeEvent) {
|
36
|
-
const { CanvasKit } = global;
|
37
|
-
// Reset canvas / surface on layout change
|
38
|
-
const canvas = this._canvasRef.current;
|
39
|
-
if (canvas) {
|
40
|
-
this.width = canvas.clientWidth;
|
41
|
-
this.height = canvas.clientHeight;
|
42
|
-
canvas.width = this.width * pd;
|
43
|
-
canvas.height = this.height * pd;
|
44
|
-
const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);
|
45
|
-
const ctx = canvas.getContext("webgl2");
|
46
|
-
if (ctx) {
|
47
|
-
ctx.drawingBufferColorSpace = "display-p3";
|
48
|
-
}
|
49
|
-
if (!surface) {
|
50
|
-
throw new Error("Could not create surface");
|
51
|
-
}
|
52
|
-
this._surface = new JsiSkSurface(CanvasKit, surface);
|
53
|
-
this._canvas = this._surface.getCanvas();
|
54
|
-
this.redraw();
|
55
|
-
}
|
56
|
-
// Call onLayout callback if it exists
|
57
|
-
if (this.props.onLayout) {
|
58
|
-
this.props.onLayout(evt);
|
59
|
-
}
|
60
|
-
}
|
61
|
-
|
62
|
-
getSize() {
|
63
|
-
return { width: this.width, height: this.height };
|
64
|
-
}
|
65
|
-
|
66
|
-
componentDidMount() {
|
67
|
-
// Start render loop
|
68
|
-
this.tick();
|
69
|
-
}
|
70
|
-
|
71
|
-
componentDidUpdate() {
|
72
|
-
this.redraw();
|
73
|
-
}
|
74
|
-
|
75
|
-
componentWillUnmount() {
|
76
|
-
this.unsubscribeAll();
|
77
|
-
cancelAnimationFrame(this.requestId);
|
78
|
-
// eslint-disable-next-line max-len
|
79
|
-
// https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use
|
80
|
-
// https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
|
81
|
-
// We delete the context, only if the context has been intialized
|
82
|
-
if (this._surface) {
|
83
|
-
this._canvasRef.current
|
84
|
-
?.getContext("webgl2")
|
85
|
-
?.getExtension("WEBGL_lose_context")
|
86
|
-
?.loseContext();
|
87
|
-
}
|
88
|
-
}
|
89
|
-
|
90
|
-
/**
|
91
|
-
* Creates a snapshot from the canvas in the surface
|
92
|
-
* @param rect Rect to use as bounds. Optional.
|
93
|
-
* @returns An Image object.
|
94
|
-
*/
|
95
|
-
public makeImageSnapshot(rect?: SkRect) {
|
96
|
-
this._canvas!.clear(CanvasKit.TRANSPARENT);
|
97
|
-
this.renderInCanvas(this._canvas!);
|
98
|
-
this._surface?.ref.flush();
|
99
|
-
return this._surface?.makeImageSnapshot(rect);
|
100
|
-
}
|
101
|
-
|
102
|
-
/**
|
103
|
-
* Override to render
|
104
|
-
*/
|
105
|
-
protected abstract renderInCanvas(canvas: SkCanvas): void;
|
106
|
-
|
107
|
-
/**
|
108
|
-
* Sends a redraw request to the native SkiaView.
|
109
|
-
*/
|
110
|
-
private tick() {
|
111
|
-
if (this._redrawRequests > 0) {
|
112
|
-
this._redrawRequests = 0;
|
113
|
-
if (this._canvas) {
|
114
|
-
const canvas = this._canvas!;
|
115
|
-
canvas.clear(Float32Array.of(0, 0, 0, 0));
|
116
|
-
canvas.save();
|
117
|
-
canvas.scale(pd, pd);
|
118
|
-
this.renderInCanvas(canvas);
|
119
|
-
canvas.restore();
|
120
|
-
this._surface?.ref.flush();
|
121
|
-
}
|
122
|
-
}
|
123
|
-
this.requestId = requestAnimationFrame(this.tick.bind(this));
|
124
|
-
}
|
125
|
-
|
126
|
-
public redraw() {
|
127
|
-
this._redrawRequests++;
|
128
|
-
}
|
129
|
-
|
130
|
-
private onLayout = this.onLayoutEvent.bind(this);
|
131
|
-
|
132
|
-
render() {
|
133
|
-
const { debug = false, ...viewProps } = this.props;
|
134
|
-
return (
|
135
|
-
<Platform.View {...viewProps} onLayout={this.onLayout}>
|
136
|
-
<canvas ref={this._canvasRef} style={{ display: "flex", flex: 1 }} />
|
137
|
-
</Platform.View>
|
138
|
-
);
|
139
|
-
}
|
140
|
-
}
|