@shopify/react-native-skia 0.1.151 → 0.1.152
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/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":";;;;;;;AACA;;AAGA;;AAIA;;AAGA;;;;;;;;AAEA,MAAMA,EAAE,GAAGC,uBAAA,CAAWC,GAAX,EAAX;;AAEO,MAAeC,eAAf,SAEGC,cAAA,CAAMC,SAFT,CAE2B;EAChCC,WAAW,CAACC,KAAD,EAAgB;IACzB,MAAMA,KAAN;;IADyB,kCAKa,IALb;;IAAA,0CAMmB,EANnB;;IAAA,kCAOU,EAPV;;IAAA,iCAQQ,IARR;;IAAA,iDASNH,cAAA,CAAMI,SAAN,EATM;;IAAA;;IAAA,yCAWD,CAXC;;IAAA,mCAYP,CAZO;;IAAA,+BAcT,CAdS;;IAAA,gCAeR,CAfQ;;IAEzB,KAAKC,KAAL,GAAaF,KAAK,CAACG,IAAN,IAAc,SAA3B;EACD;;EAcOC,cAAc,GAAG;IACvB,KAAKC,gBAAL,CAAsBC,OAAtB,CAA+BC,CAAD,IAAOA,CAAC,EAAtC;;IACA,KAAKF,gBAAL,GAAwB,EAAxB;EACD;;EAEOG,QAAQ,CAACC,GAAD,EAAyB;IACvC,MAAM;MAAEC;IAAF,IAAgBC,MAAtB;IACA,MAAM;MAAEC,KAAF;MAASC;IAAT,IAAoBJ,GAAG,CAACK,WAAJ,CAAgBC,MAA1C;IACA,KAAKH,KAAL,GAAaA,KAAb;IACA,KAAKC,MAAL,GAAcA,MAAd,CAJuC,CAKvC;;IACA,IAAI,KAAKG,UAAL,CAAgBC,OAApB,EAA6B;MAC3B,MAAMC,MAAM,GAAG,KAAKF,UAAL,CAAgBC,OAA/B;MACAC,MAAM,CAACN,KAAP,GAAeM,MAAM,CAACC,WAAP,GAAqB1B,EAApC;MACAyB,MAAM,CAACL,MAAP,GAAgBK,MAAM,CAACE,YAAP,GAAsB3B,EAAtC;MACA,MAAM4B,OAAO,GAAGX,SAAS,CAACY,sBAAV,CAAiC,KAAKN,UAAL,CAAgBC,OAAjD,CAAhB;;MACA,IAAI,CAACI,OAAL,EAAc;QACZ,MAAM,IAAIE,KAAJ,CAAU,0BAAV,CAAN;MACD;;MACD,KAAKC,QAAL,GAAgB,IAAIC,0BAAJ,CAAiBf,SAAjB,EAA4BW,OAA5B,CAAhB;MACA,KAAKK,OAAL,GAAe,KAAKF,QAAL,CAAcG,SAAd,EAAf;MACA,KAAKC,MAAL;IACD;EACF;;EAEDC,iBAAiB,GAAG;IAClB;IACA,KAAKC,IAAL;EACD;;EAEDC,kBAAkB,GAAG;IACnB,KAAKH,MAAL;EACD;;EAEDI,oBAAoB,GAAG;IACrB,KAAK5B,cAAL;IACA6B,oBAAoB,CAAC,KAAKC,SAAN,CAApB;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSC,iBAAiB,CAACC,IAAD,EAAgB;IAAA;;IACtC,yBAAO,KAAKZ,QAAZ,mDAAO,eAAeW,iBAAf,CAAiCC,IAAjC,CAAP;EACD;EAED;AACF;AACA;;;EAME;AACF;AACA;EACUN,IAAI,GAAG;IACb,IAAI,KAAK5B,KAAL,KAAe,YAAf,IAA+B,KAAKmC,eAAL,GAAuB,CAA1D,EAA6D;MAC3D,KAAKA,eAAL,GAAuB,CAAvB;;MACA,IAAI,KAAKX,OAAT,EAAkB;QAAA;;QAChB,MAAMY,OAAO,GAAG,CAAC,GAAG,KAAKC,QAAT,CAAhB;QACA,KAAKA,QAAL,GAAgB,EAAhB;QACA,KAAKC,cAAL,CAAoB,KAAKd,OAAzB,EAAmCY,OAAnC;QACA,wBAAKd,QAAL,oEAAeiB,GAAf,CAAmBC,KAAnB;MACD;IACF;;IACD,KAAKR,SAAL,GAAiBS,qBAAqB,CAAC,KAAKb,IAAL,CAAUc,IAAV,CAAe,IAAf,CAAD,CAAtC;EACD;;EAEMhB,MAAM,GAAG;IACd,KAAKS,eAAL;EACD;EAED;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;EACSQ,WAAW,CAAC1C,IAAD,EAAiB;IACjC,KAAKD,KAAL,GAAaC,IAAb;IACA,KAAK2B,IAAL;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSgB,cAAc,CAACC,OAAD,EAAgC;IACnD;IACA,KAAK3C,cAAL,GAFmD,CAGnD;;IACA2C,OAAO,CAACzC,OAAR,CAAiB0C,CAAD,IAAO;MACrB,KAAK3C,gBAAL,CAAsB4C,IAAtB,CACED,CAAC,CAACE,WAAF,CAAc,MAAM;QAClB,KAAKtB,MAAL;MACD,CAFD,CADF;IAKD,CAND;EAOD;;EAEOuB,gBAAgB,CAAC1C,GAAD,EAAoB2C,SAApB,EAA0C;IAChE,KAAKb,QAAL,CAAcU,IAAd,CAAmB;MACjBI,EAAE,EAAE5C,GAAG,CAAC6C,SADS;MAEjBC,CAAC,EAAE9C,GAAG,CAAC+C,OAAJ,GAAc/C,GAAG,CAACgD,aAAJ,CAAkBC,cAAlB,GAAmC,CAAnC,EAAsCC,IAFtC;MAGjBC,CAAC,EAAEnD,GAAG,CAACoD,OAAJ,GAAcpD,GAAG,CAACgD,aAAJ,CAAkBC,cAAlB,GAAmC,CAAnC,EAAsCI,GAHtC;MAIjBC,KAAK,EAAEtD,GAAG,CAACuD,QAJM;MAKjBC,IAAI,EAAEb,SALW;MAMjBc,SAAS,EAAEC,IAAI,CAACC,GAAL;IANM,CAAnB;;IAQA,KAAKxC,MAAL;EACD;;EAEDyC,kBAAkB,CAACjB,SAAD,EAAuB;IACvC,OAAQ3C,GAAD,IAAuB,KAAK0C,gBAAL,CAAsB1C,GAAtB,EAA2B2C,SAA3B,CAA9B;EACD;;EAEDkB,MAAM,GAAG;IACP,MAAM;MAAEnE,IAAF;MAAQoE,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKxE,KAAnD;IACA,oBACE,6BAAC,iBAAD,eAAUwE,SAAV;MAAqB,QAAQ,EAAE,KAAKhE,QAAL,CAAcoC,IAAd,CAAmB,IAAnB;IAA/B,iBACE;MACE,GAAG,EAAE,KAAK5B,UADZ;MAEE,KAAK,EAAE;QAAEyD,OAAO,EAAE,MAAX;QAAmBC,IAAI,EAAE;MAAzB,CAFT;MAGE,aAAa,EAAE,KAAKL,kBAAL,CAAwBM,gBAAA,CAAUC,KAAlC,CAHjB;MAIE,aAAa,EAAE,KAAKP,kBAAL,CAAwBM,gBAAA,CAAUE,MAAlC,CAJjB;MAKE,WAAW,EAAE,KAAKR,kBAAL,CAAwBM,gBAAA,CAAUG,GAAlC,CALf;MAME,eAAe,EAAE,KAAKT,kBAAL,CAAwBM,gBAAA,CAAUI,SAAlC,CANnB;MAOE,cAAc,EAAE,KAAKV,kBAAL,CAAwBM,gBAAA,CAAUG,GAAlC,CAPlB;MAQE,YAAY,EAAE,KAAKT,kBAAL,CAAwBM,gBAAA,CAAUG,GAAlC;IARhB,EADF,CADF;EAcD;;AA9J+B"}
|
|
@@ -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"}
|