@shopify/react-native-skia 0.1.151 → 0.1.152
Sign up to get free protection for your applications and to get access to all the features.
- package/android/CMakeLists.txt +4 -5
- package/android/cpp/jni/JniLoad.cpp +7 -5
- package/android/cpp/jni/JniSkiaManager.cpp +2 -15
- package/android/cpp/jni/include/JniSkiaBaseView.h +68 -0
- package/android/cpp/jni/include/JniSkiaDrawView.h +64 -47
- package/android/cpp/jni/include/JniSkiaManager.h +8 -10
- package/android/cpp/jni/include/JniSkiaPictureView.h +96 -0
- package/android/cpp/rnskia-android/{RNSkPlatformContextImpl.h → RNSkAndroidPlatformContext.h} +4 -4
- package/android/cpp/rnskia-android/RNSkAndroidView.h +100 -0
- package/android/cpp/rnskia-android/RNSkOpenGLCanvasProvider.cpp +91 -0
- package/android/cpp/rnskia-android/RNSkOpenGLCanvasProvider.h +39 -0
- package/android/cpp/rnskia-android/SkiaOpenGLRenderer.cpp +15 -6
- package/android/cpp/rnskia-android/SkiaOpenGLRenderer.h +5 -4
- package/android/src/main/java/com/shopify/reactnative/skia/PlatformContext.java +5 -11
- package/android/src/main/java/com/shopify/reactnative/skia/RNSkiaPackage.java +1 -2
- package/android/src/main/java/com/shopify/reactnative/skia/SkiaBaseView.java +143 -0
- package/android/src/main/java/com/shopify/reactnative/skia/SkiaDrawView.java +17 -145
- package/android/src/main/java/com/shopify/reactnative/skia/{RNSkiaViewManager.java → SkiaDrawViewManager.java} +4 -15
- package/android/src/main/java/com/shopify/reactnative/skia/SkiaManager.java +1 -10
- package/android/src/main/java/com/shopify/reactnative/skia/SkiaPictureView.java +45 -0
- package/android/src/main/java/com/shopify/reactnative/skia/SkiaPictureViewManager.java +64 -0
- package/cpp/jsi/JsiValueWrapper.h +11 -0
- package/cpp/rnskia/RNSkInfoParameter.h +4 -14
- package/cpp/rnskia/RNSkJsView.cpp +211 -0
- package/cpp/rnskia/RNSkJsView.h +115 -0
- package/cpp/rnskia/RNSkJsiViewApi.h +6 -6
- package/cpp/rnskia/RNSkManager.cpp +7 -7
- package/cpp/rnskia/RNSkManager.h +7 -7
- package/cpp/rnskia/RNSkPictureView.h +124 -0
- package/cpp/rnskia/RNSkView.h +287 -0
- package/ios/RNSkia-iOS/RNSkMetalCanvasProvider.h +38 -0
- package/ios/RNSkia-iOS/{RNSkDrawViewImpl.mm → RNSkMetalCanvasProvider.mm} +40 -23
- package/ios/RNSkia-iOS/{PlatformContext.h → RNSkiOSPlatformContext.h} +4 -4
- package/ios/RNSkia-iOS/{PlatformContext.mm → RNSkiOSPlatformContext.mm} +5 -5
- package/ios/RNSkia-iOS/RNSkiOSView.h +34 -0
- package/ios/RNSkia-iOS/SkiaDrawViewManager.mm +19 -11
- package/ios/RNSkia-iOS/SkiaManager.mm +3 -3
- package/ios/RNSkia-iOS/SkiaPictureViewManager.h +8 -0
- package/ios/RNSkia-iOS/SkiaPictureViewManager.mm +51 -0
- package/ios/RNSkia-iOS/SkiaUIView.h +26 -0
- package/ios/RNSkia-iOS/{SkiaDrawView.mm → SkiaUIView.mm} +29 -23
- package/lib/commonjs/views/SkiaBaseWebView.js +213 -0
- package/lib/commonjs/views/SkiaBaseWebView.js.map +1 -0
- package/lib/commonjs/views/SkiaPictureView.js +112 -0
- package/lib/commonjs/views/SkiaPictureView.js.map +1 -0
- package/lib/commonjs/views/SkiaPictureView.web.js +31 -0
- package/lib/commonjs/views/SkiaPictureView.web.js.map +1 -0
- package/lib/commonjs/views/SkiaView.js +1 -1
- package/lib/commonjs/views/SkiaView.js.map +1 -1
- package/lib/commonjs/views/SkiaView.web.js +14 -201
- package/lib/commonjs/views/SkiaView.web.js.map +1 -1
- package/lib/commonjs/views/index.js +13 -0
- package/lib/commonjs/views/index.js.map +1 -1
- package/lib/commonjs/views/types.js.map +1 -1
- package/lib/module/views/SkiaBaseWebView.js +198 -0
- package/lib/module/views/SkiaBaseWebView.js.map +1 -0
- package/lib/module/views/SkiaPictureView.js +94 -0
- package/lib/module/views/SkiaPictureView.js.map +1 -0
- package/lib/module/views/SkiaPictureView.web.js +19 -0
- package/lib/module/views/SkiaPictureView.web.js.map +1 -0
- package/lib/module/views/SkiaView.js +1 -1
- package/lib/module/views/SkiaView.js.map +1 -1
- package/lib/module/views/SkiaView.web.js +15 -199
- package/lib/module/views/SkiaView.web.js.map +1 -1
- package/lib/module/views/index.js +1 -0
- package/lib/module/views/index.js.map +1 -1
- package/lib/module/views/types.js.map +1 -1
- package/lib/typescript/src/views/SkiaBaseWebView.d.ts +58 -0
- package/lib/typescript/src/views/SkiaPictureView.d.ts +27 -0
- package/lib/typescript/src/views/SkiaPictureView.web.d.ts +7 -0
- package/lib/typescript/src/views/SkiaView.d.ts +4 -4
- package/lib/typescript/src/views/SkiaView.web.d.ts +6 -53
- package/lib/typescript/src/views/index.d.ts +1 -0
- package/lib/typescript/src/views/types.d.ts +7 -2
- package/package.json +1 -1
- package/src/views/SkiaBaseWebView.tsx +177 -0
- package/src/views/SkiaPictureView.tsx +93 -0
- package/src/views/SkiaPictureView.web.tsx +23 -0
- package/src/views/SkiaView.tsx +6 -7
- package/src/views/SkiaView.web.tsx +18 -167
- package/src/views/index.ts +1 -0
- package/src/views/types.ts +9 -2
- package/android/cpp/jni/JniSkiaDrawView.cpp +0 -113
- package/android/cpp/rnskia-android/RNSkDrawViewImpl.cpp +0 -73
- package/android/cpp/rnskia-android/RNSkDrawViewImpl.h +0 -48
- package/cpp/rnskia/RNSkDrawView.cpp +0 -315
- package/cpp/rnskia/RNSkDrawView.h +0 -226
- package/ios/RNSkia-iOS/RNSkDrawViewImpl.h +0 -52
- package/ios/RNSkia-iOS/SkiaDrawView.h +0 -23
@@ -0,0 +1,26 @@
|
|
1
|
+
#pragma once
|
2
|
+
|
3
|
+
#import <memory>
|
4
|
+
#import <string>
|
5
|
+
|
6
|
+
#import <CoreFoundation/CoreFoundation.h>
|
7
|
+
#import <UIKit/UIKit.h>
|
8
|
+
|
9
|
+
#import <RNSkiOSView.h>
|
10
|
+
#import <RNSkManager.h>
|
11
|
+
|
12
|
+
class RNSkiOSJsView;
|
13
|
+
|
14
|
+
@interface SkiaUIView : UIView
|
15
|
+
|
16
|
+
- (instancetype)initWithManager: (RNSkia::RNSkManager*)manager
|
17
|
+
factory: (std::function<std::shared_ptr<RNSkBaseiOSView>(
|
18
|
+
std::shared_ptr<RNSkia::RNSkPlatformContext>)>)factory;
|
19
|
+
|
20
|
+
- (std::shared_ptr<RNSkBaseiOSView>) impl;
|
21
|
+
|
22
|
+
- (void) setDrawingMode:(std::string) mode;
|
23
|
+
- (void) setDebugMode:(bool) debugMode;
|
24
|
+
- (void) setNativeId:(size_t) nativeId;
|
25
|
+
|
26
|
+
@end
|
@@ -1,24 +1,26 @@
|
|
1
1
|
#import <React/RCTBridge.h>
|
2
2
|
|
3
|
-
#import <
|
3
|
+
#import <SkiaUIView.h>
|
4
4
|
|
5
5
|
#include <utility>
|
6
6
|
#include <vector>
|
7
7
|
|
8
|
-
#import <RNSkDrawViewImpl.h>
|
9
8
|
#import <RNSkManager.h>
|
10
9
|
|
11
|
-
@implementation
|
12
|
-
std::shared_ptr<
|
10
|
+
@implementation SkiaUIView {
|
11
|
+
std::shared_ptr<RNSkBaseiOSView> _impl;
|
13
12
|
RNSkia::RNSkManager* _manager;
|
14
13
|
RNSkia::RNSkDrawingMode _drawingMode;
|
14
|
+
std::function<std::shared_ptr<RNSkBaseiOSView>(std::shared_ptr<RNSkia::RNSkPlatformContext>)> _factory;
|
15
15
|
bool _debugMode;
|
16
16
|
size_t _nativeId;
|
17
17
|
}
|
18
18
|
|
19
19
|
#pragma mark Initialization and destruction
|
20
20
|
|
21
|
-
- (instancetype) initWithManager: (RNSkia::RNSkManager*)manager
|
21
|
+
- (instancetype) initWithManager: (RNSkia::RNSkManager*)manager
|
22
|
+
factory: (std::function<std::shared_ptr<RNSkBaseiOSView>(
|
23
|
+
std::shared_ptr<RNSkia::RNSkPlatformContext>)>)factory
|
22
24
|
{
|
23
25
|
self = [super init];
|
24
26
|
if (self) {
|
@@ -26,6 +28,7 @@
|
|
26
28
|
_nativeId = 0;
|
27
29
|
_debugMode = false;
|
28
30
|
_drawingMode = RNSkia::RNSkDrawingMode::Default;
|
31
|
+
_factory = factory;
|
29
32
|
|
30
33
|
// Listen to notifications about module invalidation
|
31
34
|
[[NSNotificationCenter defaultCenter] addObserver:self
|
@@ -50,7 +53,7 @@
|
|
50
53
|
[_impl->getLayer() removeFromSuperlayer];
|
51
54
|
|
52
55
|
if(_nativeId != 0 && _manager != nullptr) {
|
53
|
-
_manager->
|
56
|
+
_manager->setSkiaView(_nativeId, nullptr);
|
54
57
|
}
|
55
58
|
|
56
59
|
_impl = nullptr;
|
@@ -58,20 +61,23 @@
|
|
58
61
|
} else {
|
59
62
|
// Create implementation view when the parent view is set
|
60
63
|
if(_impl == nullptr && _manager != nullptr) {
|
61
|
-
_impl =
|
64
|
+
_impl = _factory(_manager->getPlatformContext());
|
65
|
+
if(_impl == nullptr) {
|
66
|
+
throw std::runtime_error("Expected Skia view implementation, got nullptr.");
|
67
|
+
}
|
62
68
|
[self.layer addSublayer: _impl->getLayer()];
|
63
69
|
if(_nativeId != 0) {
|
64
|
-
_manager->
|
70
|
+
_manager->setSkiaView(_nativeId, _impl->getDrawView());
|
65
71
|
}
|
66
|
-
_impl->setDrawingMode(_drawingMode);
|
67
|
-
_impl->setShowDebugOverlays(_debugMode);
|
72
|
+
_impl->getDrawView()->setDrawingMode(_drawingMode);
|
73
|
+
_impl->getDrawView()->setShowDebugOverlays(_debugMode);
|
68
74
|
}
|
69
75
|
}
|
70
76
|
}
|
71
77
|
|
72
78
|
- (void) dealloc {
|
73
79
|
if(_manager != nullptr && _nativeId != 0) {
|
74
|
-
_manager->
|
80
|
+
_manager->unregisterSkiaView(_nativeId);
|
75
81
|
}
|
76
82
|
|
77
83
|
[[NSNotificationCenter defaultCenter] removeObserver:self name:RCTBridgeWillInvalidateModulesNotification object:nil];
|
@@ -94,14 +100,14 @@
|
|
94
100
|
_drawingMode = mode.compare("continuous") == 0 ? RNSkia::RNSkDrawingMode::Continuous : RNSkia::RNSkDrawingMode::Default;
|
95
101
|
|
96
102
|
if(_impl != nullptr) {
|
97
|
-
_impl->setDrawingMode(_drawingMode);
|
103
|
+
_impl->getDrawView()->setDrawingMode(_drawingMode);
|
98
104
|
}
|
99
105
|
}
|
100
106
|
|
101
107
|
-(void) setDebugMode:(bool) debugMode {
|
102
108
|
_debugMode = debugMode;
|
103
109
|
if(_impl != nullptr) {
|
104
|
-
_impl->setShowDebugOverlays(debugMode);
|
110
|
+
_impl->getDrawView()->setShowDebugOverlays(debugMode);
|
105
111
|
}
|
106
112
|
}
|
107
113
|
|
@@ -109,13 +115,13 @@
|
|
109
115
|
_nativeId = nativeId;
|
110
116
|
|
111
117
|
if(_impl != nullptr) {
|
112
|
-
_manager->
|
118
|
+
_manager->registerSkiaView(nativeId, _impl->getDrawView());
|
113
119
|
}
|
114
120
|
}
|
115
121
|
|
116
122
|
#pragma mark External API
|
117
123
|
|
118
|
-
- (std::shared_ptr<
|
124
|
+
- (std::shared_ptr<RNSkBaseiOSView>) impl {
|
119
125
|
return _impl;
|
120
126
|
}
|
121
127
|
|
@@ -135,10 +141,10 @@
|
|
135
141
|
|
136
142
|
- (void) handleTouches:(NSSet<UITouch*>*) touches withEvent:(UIEvent*) event {
|
137
143
|
if (event.type == UIEventTypeTouches) {
|
138
|
-
std::vector<RNSkia::
|
144
|
+
std::vector<RNSkia::RNSkTouchInfo> nextTouches;
|
139
145
|
for (UITouch *touch in touches) {
|
140
146
|
auto position = [touch preciseLocationInView:self];
|
141
|
-
RNSkia::
|
147
|
+
RNSkia::RNSkTouchInfo nextTouch;
|
142
148
|
nextTouch.x = position.x;
|
143
149
|
nextTouch.y = position.y;
|
144
150
|
nextTouch.force = [touch force];
|
@@ -146,26 +152,26 @@
|
|
146
152
|
auto phase = [touch phase];
|
147
153
|
switch(phase) {
|
148
154
|
case UITouchPhaseBegan:
|
149
|
-
nextTouch.type = RNSkia::
|
155
|
+
nextTouch.type = RNSkia::RNSkTouchInfo::TouchType::Start;
|
150
156
|
break;
|
151
157
|
case UITouchPhaseMoved:
|
152
|
-
nextTouch.type = RNSkia::
|
158
|
+
nextTouch.type = RNSkia::RNSkTouchInfo::TouchType::Active;
|
153
159
|
break;
|
154
160
|
case UITouchPhaseEnded:
|
155
|
-
nextTouch.type = RNSkia::
|
161
|
+
nextTouch.type = RNSkia::RNSkTouchInfo::TouchType::End;
|
156
162
|
break;
|
157
163
|
case UITouchPhaseCancelled:
|
158
|
-
nextTouch.type = RNSkia::
|
164
|
+
nextTouch.type = RNSkia::RNSkTouchInfo::TouchType::Cancelled;
|
159
165
|
break;
|
160
166
|
default:
|
161
|
-
nextTouch.type = RNSkia::
|
167
|
+
nextTouch.type = RNSkia::RNSkTouchInfo::TouchType::Active;
|
162
168
|
break;
|
163
169
|
}
|
164
170
|
|
165
171
|
nextTouches.push_back(nextTouch);
|
166
172
|
}
|
167
173
|
if(_impl != nullptr) {
|
168
|
-
_impl->updateTouchState(
|
174
|
+
_impl->getDrawView()->updateTouchState(nextTouches);
|
169
175
|
}
|
170
176
|
}
|
171
177
|
}
|
@@ -0,0 +1,213 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.SkiaBaseWebView = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
|
10
|
+
var _reactNative = require("react-native");
|
11
|
+
|
12
|
+
var _JsiSkSurface = require("../skia/web/JsiSkSurface");
|
13
|
+
|
14
|
+
var _types = require("./types");
|
15
|
+
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
17
|
+
|
18
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
19
|
+
|
20
|
+
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; }
|
21
|
+
|
22
|
+
const pd = _reactNative.PixelRatio.get();
|
23
|
+
|
24
|
+
class SkiaBaseWebView extends _react.default.Component {
|
25
|
+
constructor(props) {
|
26
|
+
super(props);
|
27
|
+
|
28
|
+
_defineProperty(this, "_surface", null);
|
29
|
+
|
30
|
+
_defineProperty(this, "_unsubscriptions", []);
|
31
|
+
|
32
|
+
_defineProperty(this, "_touches", []);
|
33
|
+
|
34
|
+
_defineProperty(this, "_canvas", null);
|
35
|
+
|
36
|
+
_defineProperty(this, "_canvasRef", /*#__PURE__*/_react.default.createRef());
|
37
|
+
|
38
|
+
_defineProperty(this, "_mode", void 0);
|
39
|
+
|
40
|
+
_defineProperty(this, "_redrawRequests", 0);
|
41
|
+
|
42
|
+
_defineProperty(this, "requestId", 0);
|
43
|
+
|
44
|
+
_defineProperty(this, "width", 0);
|
45
|
+
|
46
|
+
_defineProperty(this, "height", 0);
|
47
|
+
|
48
|
+
this._mode = props.mode ?? "default";
|
49
|
+
}
|
50
|
+
|
51
|
+
unsubscribeAll() {
|
52
|
+
this._unsubscriptions.forEach(u => u());
|
53
|
+
|
54
|
+
this._unsubscriptions = [];
|
55
|
+
}
|
56
|
+
|
57
|
+
onLayout(evt) {
|
58
|
+
const {
|
59
|
+
CanvasKit
|
60
|
+
} = global;
|
61
|
+
const {
|
62
|
+
width,
|
63
|
+
height
|
64
|
+
} = evt.nativeEvent.layout;
|
65
|
+
this.width = width;
|
66
|
+
this.height = height; // Reset canvas / surface on layout change
|
67
|
+
|
68
|
+
if (this._canvasRef.current) {
|
69
|
+
const canvas = this._canvasRef.current;
|
70
|
+
canvas.width = canvas.clientWidth * pd;
|
71
|
+
canvas.height = canvas.clientHeight * pd;
|
72
|
+
const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
|
73
|
+
|
74
|
+
if (!surface) {
|
75
|
+
throw new Error("Could not create surface");
|
76
|
+
}
|
77
|
+
|
78
|
+
this._surface = new _JsiSkSurface.JsiSkSurface(CanvasKit, surface);
|
79
|
+
this._canvas = this._surface.getCanvas();
|
80
|
+
this.redraw();
|
81
|
+
}
|
82
|
+
}
|
83
|
+
|
84
|
+
componentDidMount() {
|
85
|
+
// Start render loop
|
86
|
+
this.tick();
|
87
|
+
}
|
88
|
+
|
89
|
+
componentDidUpdate() {
|
90
|
+
this.redraw();
|
91
|
+
}
|
92
|
+
|
93
|
+
componentWillUnmount() {
|
94
|
+
this.unsubscribeAll();
|
95
|
+
cancelAnimationFrame(this.requestId);
|
96
|
+
}
|
97
|
+
/**
|
98
|
+
* Creates a snapshot from the canvas in the surface
|
99
|
+
* @param rect Rect to use as bounds. Optional.
|
100
|
+
* @returns An Image object.
|
101
|
+
*/
|
102
|
+
|
103
|
+
|
104
|
+
makeImageSnapshot(rect) {
|
105
|
+
var _this$_surface;
|
106
|
+
|
107
|
+
return (_this$_surface = this._surface) === null || _this$_surface === void 0 ? void 0 : _this$_surface.makeImageSnapshot(rect);
|
108
|
+
}
|
109
|
+
/**
|
110
|
+
* Override to render
|
111
|
+
*/
|
112
|
+
|
113
|
+
|
114
|
+
/**
|
115
|
+
* Sends a redraw request to the native SkiaView.
|
116
|
+
*/
|
117
|
+
tick() {
|
118
|
+
if (this._mode === "continuous" || this._redrawRequests > 0) {
|
119
|
+
this._redrawRequests = 0;
|
120
|
+
|
121
|
+
if (this._canvas) {
|
122
|
+
var _this$_surface2;
|
123
|
+
|
124
|
+
const touches = [...this._touches];
|
125
|
+
this._touches = [];
|
126
|
+
this.renderInCanvas(this._canvas, touches);
|
127
|
+
(_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
|
128
|
+
}
|
129
|
+
}
|
130
|
+
|
131
|
+
this.requestId = requestAnimationFrame(this.tick.bind(this));
|
132
|
+
}
|
133
|
+
|
134
|
+
redraw() {
|
135
|
+
this._redrawRequests++;
|
136
|
+
}
|
137
|
+
/**
|
138
|
+
* Updates the drawing mode for the skia view. This is the same
|
139
|
+
* as declaratively setting the mode property on the SkiaView.
|
140
|
+
* There are two drawing modes, "continuous" and "default",
|
141
|
+
* where the continuous mode will continuously redraw the view and
|
142
|
+
* the default mode will only redraw when any of the regular react
|
143
|
+
* properties are changed like size and margins.
|
144
|
+
* @param mode Drawing mode to use.
|
145
|
+
*/
|
146
|
+
|
147
|
+
|
148
|
+
setDrawMode(mode) {
|
149
|
+
this._mode = mode;
|
150
|
+
this.tick();
|
151
|
+
}
|
152
|
+
/**
|
153
|
+
* Registers one or move values as a dependant value of the Skia View. The view will
|
154
|
+
* The view will redraw itself when any of the values change.
|
155
|
+
* @param values Values to register
|
156
|
+
*/
|
157
|
+
|
158
|
+
|
159
|
+
registerValues(_values) {
|
160
|
+
// Unsubscribe from dependency values
|
161
|
+
this.unsubscribeAll(); // Register redraw dependencies on values
|
162
|
+
|
163
|
+
_values.forEach(v => {
|
164
|
+
this._unsubscriptions.push(v.addListener(() => {
|
165
|
+
this.redraw();
|
166
|
+
}));
|
167
|
+
});
|
168
|
+
}
|
169
|
+
|
170
|
+
handleTouchEvent(evt, touchType) {
|
171
|
+
this._touches.push({
|
172
|
+
id: evt.pointerId,
|
173
|
+
x: evt.clientX - evt.currentTarget.getClientRects()[0].left,
|
174
|
+
y: evt.clientY - evt.currentTarget.getClientRects()[0].top,
|
175
|
+
force: evt.pressure,
|
176
|
+
type: touchType,
|
177
|
+
timestamp: Date.now()
|
178
|
+
});
|
179
|
+
|
180
|
+
this.redraw();
|
181
|
+
}
|
182
|
+
|
183
|
+
createTouchHandler(touchType) {
|
184
|
+
return evt => this.handleTouchEvent(evt, touchType);
|
185
|
+
}
|
186
|
+
|
187
|
+
render() {
|
188
|
+
const {
|
189
|
+
mode,
|
190
|
+
debug = false,
|
191
|
+
...viewProps
|
192
|
+
} = this.props;
|
193
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({}, viewProps, {
|
194
|
+
onLayout: this.onLayout.bind(this)
|
195
|
+
}), /*#__PURE__*/_react.default.createElement("canvas", {
|
196
|
+
ref: this._canvasRef,
|
197
|
+
style: {
|
198
|
+
display: "flex",
|
199
|
+
flex: 1
|
200
|
+
},
|
201
|
+
onPointerDown: this.createTouchHandler(_types.TouchType.Start),
|
202
|
+
onPointerMove: this.createTouchHandler(_types.TouchType.Active),
|
203
|
+
onPointerUp: this.createTouchHandler(_types.TouchType.End),
|
204
|
+
onPointerCancel: this.createTouchHandler(_types.TouchType.Cancelled),
|
205
|
+
onPointerLeave: this.createTouchHandler(_types.TouchType.End),
|
206
|
+
onPointerOut: this.createTouchHandler(_types.TouchType.End)
|
207
|
+
}));
|
208
|
+
}
|
209
|
+
|
210
|
+
}
|
211
|
+
|
212
|
+
exports.SkiaBaseWebView = SkiaBaseWebView;
|
213
|
+
//# sourceMappingURL=SkiaBaseWebView.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["pd","PixelRatio","get","SkiaBaseWebView","React","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","JsiSkSurface","_canvas","getCanvas","redraw","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","makeImageSnapshot","rect","_redrawRequests","touches","_touches","renderInCanvas","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","timestamp","Date","now","createTouchHandler","render","debug","viewProps","display","flex","TouchType","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 = 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 * 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 this.renderInCanvas(this._canvas!, touches);\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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"}
|
@@ -0,0 +1,112 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.SkiaPictureView = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
|
10
|
+
var _reactNative = require("react-native");
|
11
|
+
|
12
|
+
var _api = require("./api");
|
13
|
+
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
15
|
+
|
16
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
17
|
+
|
18
|
+
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; }
|
19
|
+
|
20
|
+
let SkiaViewNativeId = 1000;
|
21
|
+
const NativeSkiaPictureView = (0, _reactNative.requireNativeComponent)("SkiaPictureView");
|
22
|
+
|
23
|
+
class SkiaPictureView extends _react.default.Component {
|
24
|
+
constructor(props) {
|
25
|
+
super(props);
|
26
|
+
|
27
|
+
_defineProperty(this, "_nativeId", void 0);
|
28
|
+
|
29
|
+
this._nativeId = SkiaViewNativeId++;
|
30
|
+
const {
|
31
|
+
picture
|
32
|
+
} = props;
|
33
|
+
|
34
|
+
if (picture) {
|
35
|
+
assertSkiaViewApi();
|
36
|
+
|
37
|
+
_api.SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
41
|
+
get nativeId() {
|
42
|
+
return this._nativeId;
|
43
|
+
}
|
44
|
+
|
45
|
+
componentDidUpdate(prevProps) {
|
46
|
+
const {
|
47
|
+
picture
|
48
|
+
} = this.props;
|
49
|
+
|
50
|
+
if (picture !== prevProps.picture) {
|
51
|
+
assertSkiaViewApi();
|
52
|
+
|
53
|
+
_api.SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
|
54
|
+
}
|
55
|
+
}
|
56
|
+
/**
|
57
|
+
* Creates a snapshot from the canvas in the surface
|
58
|
+
* @param rect Rect to use as bounds. Optional.
|
59
|
+
* @returns An Image object.
|
60
|
+
*/
|
61
|
+
|
62
|
+
|
63
|
+
makeImageSnapshot(rect) {
|
64
|
+
assertSkiaViewApi();
|
65
|
+
return _api.SkiaViewApi.makeImageSnapshot(this._nativeId, rect);
|
66
|
+
}
|
67
|
+
/**
|
68
|
+
* Sends a redraw request to the native SkiaView.
|
69
|
+
*/
|
70
|
+
|
71
|
+
|
72
|
+
redraw() {
|
73
|
+
assertSkiaViewApi();
|
74
|
+
|
75
|
+
_api.SkiaViewApi.requestRedraw(this._nativeId);
|
76
|
+
}
|
77
|
+
/**
|
78
|
+
* Registers one or move values as a dependant value of the Skia View. The view will
|
79
|
+
* The view will redraw itself when any of the values change.
|
80
|
+
* @param values Values to register
|
81
|
+
*/
|
82
|
+
|
83
|
+
|
84
|
+
registerValues(values) {
|
85
|
+
assertSkiaViewApi();
|
86
|
+
return _api.SkiaViewApi.registerValuesInView(this._nativeId, values);
|
87
|
+
}
|
88
|
+
|
89
|
+
render() {
|
90
|
+
const {
|
91
|
+
mode,
|
92
|
+
debug = false,
|
93
|
+
...viewProps
|
94
|
+
} = this.props;
|
95
|
+
return /*#__PURE__*/_react.default.createElement(NativeSkiaPictureView, _extends({
|
96
|
+
collapsable: false,
|
97
|
+
nativeID: `${this._nativeId}`,
|
98
|
+
mode: mode,
|
99
|
+
debug: debug
|
100
|
+
}, viewProps));
|
101
|
+
}
|
102
|
+
|
103
|
+
}
|
104
|
+
|
105
|
+
exports.SkiaPictureView = SkiaPictureView;
|
106
|
+
|
107
|
+
const assertSkiaViewApi = () => {
|
108
|
+
if (_api.SkiaViewApi === null || _api.SkiaViewApi.setJsiProperty === null || _api.SkiaViewApi.callJsiMethod === null || _api.SkiaViewApi.registerValuesInView === null || _api.SkiaViewApi.requestRedraw === null || _api.SkiaViewApi.makeImageSnapshot === null) {
|
109
|
+
throw Error("Skia View Api was not found.");
|
110
|
+
}
|
111
|
+
};
|
112
|
+
//# sourceMappingURL=SkiaPictureView.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["SkiaViewNativeId","NativeSkiaPictureView","requireNativeComponent","SkiaPictureView","React","Component","constructor","props","_nativeId","picture","assertSkiaViewApi","SkiaViewApi","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\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps, SkiaPictureViewProps } from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaPictureView =\n requireNativeComponent<NativeSkiaViewProps>(\"SkiaPictureView\");\n\nexport class SkiaPictureView extends React.Component<SkiaPictureViewProps> {\n constructor(props: SkiaPictureViewProps) {\n super(props);\n this._nativeId = SkiaViewNativeId++;\n const { picture } = props;\n if (picture) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\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 } = this.props;\n if (picture !== prevProps.picture) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\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;;AACA;;AAKA;;;;;;;;AAGA,IAAIA,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,qBAAqB,GACzB,IAAAC,mCAAA,EAA4C,iBAA5C,CADF;;AAGO,MAAMC,eAAN,SAA8BC,cAAA,CAAMC,SAApC,CAAoE;EACzEC,WAAW,CAACC,KAAD,EAA8B;IACvC,MAAMA,KAAN;;IADuC;;IAEvC,KAAKC,SAAL,GAAiBR,gBAAgB,EAAjC;IACA,MAAM;MAAES;IAAF,IAAcF,KAApB;;IACA,IAAIE,OAAJ,EAAa;MACXC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,SAA3C,EAAsDC,OAAtD;IACD;EACF;;EAIkB,IAARI,QAAQ,GAAG;IACpB,OAAO,KAAKL,SAAZ;EACD;;EAEDM,kBAAkB,CAACC,SAAD,EAAkC;IAClD,MAAM;MAAEN;IAAF,IAAc,KAAKF,KAAzB;;IACA,IAAIE,OAAO,KAAKM,SAAS,CAACN,OAA1B,EAAmC;MACjCC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,SAA3C,EAAsDC,OAAtD;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSO,iBAAiB,CAACC,IAAD,EAAgB;IACtCP,iBAAiB;IACjB,OAAOC,gBAAA,CAAYK,iBAAZ,CAA8B,KAAKR,SAAnC,EAA8CS,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdR,iBAAiB;;IACjBC,gBAAA,CAAYQ,aAAZ,CAA0B,KAAKX,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSY,cAAc,CAACC,MAAD,EAA2C;IAC9DX,iBAAiB;IACjB,OAAOC,gBAAA,CAAYW,oBAAZ,CAAiC,KAAKd,SAAtC,EAAiDa,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKnB,KAAnD;IACA,oBACE,6BAAC,qBAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEgB,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAhEwE;;;;AAmE3E,MAAMhB,iBAAiB,GAAG,MAAM;EAC9B,IACEC,gBAAA,KAAgB,IAAhB,IACAA,gBAAA,CAAYC,cAAZ,KAA+B,IAD/B,IAEAD,gBAAA,CAAYgB,aAAZ,KAA8B,IAF9B,IAGAhB,gBAAA,CAAYW,oBAAZ,KAAqC,IAHrC,IAIAX,gBAAA,CAAYQ,aAAZ,KAA8B,IAJ9B,IAKAR,gBAAA,CAAYK,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}
|
@@ -0,0 +1,31 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.SkiaPictureView = void 0;
|
7
|
+
|
8
|
+
var _reactNative = require("react-native");
|
9
|
+
|
10
|
+
var _SkiaBaseWebView = require("./SkiaBaseWebView");
|
11
|
+
|
12
|
+
const pd = _reactNative.PixelRatio.get();
|
13
|
+
|
14
|
+
class SkiaPictureView extends _SkiaBaseWebView.SkiaBaseWebView {
|
15
|
+
constructor(props) {
|
16
|
+
super(props);
|
17
|
+
}
|
18
|
+
|
19
|
+
renderInCanvas(canvas) {
|
20
|
+
if (this.props.picture) {
|
21
|
+
canvas.save();
|
22
|
+
canvas.scale(pd, pd);
|
23
|
+
canvas.drawPicture(this.props.picture);
|
24
|
+
canvas.restore();
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
}
|
29
|
+
|
30
|
+
exports.SkiaPictureView = SkiaPictureView;
|
31
|
+
//# sourceMappingURL=SkiaPictureView.web.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["pd","PixelRatio","get","SkiaPictureView","SkiaBaseWebView","constructor","props","renderInCanvas","canvas","picture","save","scale","drawPicture","restore"],"sources":["SkiaPictureView.web.tsx"],"sourcesContent":["import { PixelRatio } from \"react-native\";\n\nimport type { SkCanvas } from \"../skia/types\";\n\nimport type { SkiaPictureViewProps } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nconst pd = PixelRatio.get();\n\nexport class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewProps> {\n constructor(props: SkiaPictureViewProps) {\n super(props);\n }\n\n protected renderInCanvas(canvas: SkCanvas): void {\n if (this.props.picture) {\n canvas.save();\n canvas.scale(pd, pd);\n canvas.drawPicture(this.props.picture);\n canvas.restore();\n }\n }\n}\n"],"mappings":";;;;;;;AAAA;;AAKA;;AAEA,MAAMA,EAAE,GAAGC,uBAAA,CAAWC,GAAX,EAAX;;AAEO,MAAMC,eAAN,SAA8BC,gCAA9B,CAAoE;EACzEC,WAAW,CAACC,KAAD,EAA8B;IACvC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAyB;IAC/C,IAAI,KAAKF,KAAL,CAAWG,OAAf,EAAwB;MACtBD,MAAM,CAACE,IAAP;MACAF,MAAM,CAACG,KAAP,CAAaX,EAAb,EAAiBA,EAAjB;MACAQ,MAAM,CAACI,WAAP,CAAmB,KAAKN,KAAL,CAAWG,OAA9B;MACAD,MAAM,CAACK,OAAP;IACD;EACF;;AAZwE"}
|
@@ -18,7 +18,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
18
18
|
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; }
|
19
19
|
|
20
20
|
let SkiaViewNativeId = 1000;
|
21
|
-
const NativeSkiaView = (0, _reactNative.requireNativeComponent)("
|
21
|
+
const NativeSkiaView = (0, _reactNative.requireNativeComponent)("SkiaDrawView");
|
22
22
|
|
23
23
|
class SkiaView extends _react.default.Component {
|
24
24
|
constructor(props) {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["SkiaViewNativeId","NativeSkiaView","requireNativeComponent","SkiaView","React","Component","constructor","props","_nativeId","onDraw","assertSkiaViewApi","SkiaViewApi","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\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps,
|
1
|
+
{"version":3,"names":["SkiaViewNativeId","NativeSkiaView","requireNativeComponent","SkiaView","React","Component","constructor","props","_nativeId","onDraw","assertSkiaViewApi","SkiaViewApi","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\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps, SkiaDrawViewProps } from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaView =\n requireNativeComponent<NativeSkiaViewProps>(\"SkiaDrawView\");\n\nexport class SkiaView extends React.Component<SkiaDrawViewProps> {\n constructor(props: SkiaDrawViewProps) {\n super(props);\n this._nativeId = SkiaViewNativeId++;\n const { onDraw } = props;\n if (onDraw) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\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 } = this.props;\n if (onDraw !== prevProps.onDraw) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\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 <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;;AACA;;AAKA;;;;;;;;AAGA,IAAIA,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,cAAc,GAClB,IAAAC,mCAAA,EAA4C,cAA5C,CADF;;AAGO,MAAMC,QAAN,SAAuBC,cAAA,CAAMC,SAA7B,CAA0D;EAC/DC,WAAW,CAACC,KAAD,EAA2B;IACpC,MAAMA,KAAN;;IADoC;;IAEpC,KAAKC,SAAL,GAAiBR,gBAAgB,EAAjC;IACA,MAAM;MAAES;IAAF,IAAaF,KAAnB;;IACA,IAAIE,MAAJ,EAAY;MACVC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;EACF;;EAIkB,IAARI,QAAQ,GAAG;IACpB,OAAO,KAAKL,SAAZ;EACD;;EAEDM,kBAAkB,CAACC,SAAD,EAA+B;IAC/C,MAAM;MAAEN;IAAF,IAAa,KAAKF,KAAxB;;IACA,IAAIE,MAAM,KAAKM,SAAS,CAACN,MAAzB,EAAiC;MAC/BC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSO,iBAAiB,CAACC,IAAD,EAAgB;IACtCP,iBAAiB;IACjB,OAAOC,gBAAA,CAAYK,iBAAZ,CAA8B,KAAKR,SAAnC,EAA8CS,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdR,iBAAiB;;IACjBC,gBAAA,CAAYQ,aAAZ,CAA0B,KAAKX,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSY,cAAc,CAACC,MAAD,EAA2C;IAC9DX,iBAAiB;IACjB,OAAOC,gBAAA,CAAYW,oBAAZ,CAAiC,KAAKd,SAAtC,EAAiDa,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKnB,KAAnD;IACA,oBACE,6BAAC,cAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEgB,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAhE8D;;;;AAmEjE,MAAMhB,iBAAiB,GAAG,MAAM;EAC9B,IACEC,gBAAA,KAAgB,IAAhB,IACAA,gBAAA,CAAYC,cAAZ,KAA+B,IAD/B,IAEAD,gBAAA,CAAYgB,aAAZ,KAA8B,IAF9B,IAGAhB,gBAAA,CAAYW,oBAAZ,KAAqC,IAHrC,IAIAX,gBAAA,CAAYQ,aAAZ,KAA8B,IAJ9B,IAKAR,gBAAA,CAAYK,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}
|