@shopify/react-native-skia 0.1.189 → 0.1.191
Sign up to get free protection for your applications and to get access to all the features.
- package/cpp/rnskia/dom/nodes/JsiImageSvgNode.h +24 -3
- package/cpp/rnskia/dom/nodes/JsiPathNode.h +11 -11
- package/jestSetup.js +17 -3
- package/lib/commonjs/Platform/IPlatform.d.ts +12 -0
- package/lib/commonjs/Platform/IPlatform.js +6 -0
- package/lib/commonjs/Platform/IPlatform.js.map +1 -0
- package/lib/commonjs/Platform/Platform.d.ts +2 -0
- package/lib/commonjs/Platform/Platform.js +24 -0
- package/lib/commonjs/Platform/Platform.js.map +1 -0
- package/lib/commonjs/Platform/Platform.web.d.ts +2 -0
- package/lib/commonjs/Platform/Platform.web.js +157 -0
- package/lib/commonjs/Platform/Platform.web.js.map +1 -0
- package/lib/commonjs/Platform/index.d.ts +1 -0
- package/lib/commonjs/Platform/index.js +19 -0
- package/lib/commonjs/Platform/index.js.map +1 -0
- package/lib/commonjs/dom/nodes/drawings/ImageSVG.d.ts +7 -2
- package/lib/commonjs/dom/nodes/drawings/ImageSVG.js +29 -7
- package/lib/commonjs/dom/nodes/drawings/ImageSVG.js.map +1 -1
- package/lib/commonjs/dom/nodes/drawings/PathNode.js +6 -2
- package/lib/commonjs/dom/nodes/drawings/PathNode.js.map +1 -1
- package/lib/commonjs/dom/types/Drawings.d.ts +7 -2
- package/lib/commonjs/dom/types/Drawings.js.map +1 -1
- package/lib/commonjs/renderer/processors/math/Math.d.ts +1 -0
- package/lib/commonjs/renderer/processors/math/Math.js +9 -1
- package/lib/commonjs/renderer/processors/math/Math.js.map +1 -1
- package/lib/commonjs/skia/NativeSetup.js +3 -3
- package/lib/commonjs/skia/NativeSetup.js.map +1 -1
- package/lib/commonjs/skia/core/Data.js +2 -8
- package/lib/commonjs/skia/core/Data.js.map +1 -1
- package/lib/commonjs/skia/core/Image.js +3 -3
- package/lib/commonjs/skia/core/Image.js.map +1 -1
- package/lib/commonjs/views/SkiaBaseWebView.d.ts +6 -1
- package/lib/commonjs/views/SkiaBaseWebView.js +41 -29
- package/lib/commonjs/views/SkiaBaseWebView.js.map +1 -1
- package/lib/commonjs/views/SkiaDomView.js +2 -2
- package/lib/commonjs/views/SkiaDomView.js.map +1 -1
- package/lib/commonjs/views/SkiaPictureView.js +2 -2
- package/lib/commonjs/views/SkiaPictureView.js.map +1 -1
- package/lib/commonjs/views/SkiaView.js +3 -2
- package/lib/commonjs/views/SkiaView.js.map +1 -1
- package/lib/commonjs/views/useTouchHandler.js +3 -3
- package/lib/commonjs/views/useTouchHandler.js.map +1 -1
- package/lib/commonjs/web/WithSkiaWeb.js +2 -2
- package/lib/commonjs/web/WithSkiaWeb.js.map +1 -1
- package/lib/module/Platform/IPlatform.d.ts +12 -0
- package/lib/module/Platform/IPlatform.js +2 -0
- package/lib/module/Platform/IPlatform.js.map +1 -0
- package/lib/module/Platform/Platform.d.ts +2 -0
- package/lib/module/Platform/Platform.js +14 -0
- package/lib/module/Platform/Platform.js.map +1 -0
- package/lib/module/Platform/Platform.web.d.ts +2 -0
- package/lib/module/Platform/Platform.web.js +143 -0
- package/lib/module/Platform/Platform.web.js.map +1 -0
- package/lib/module/Platform/index.d.ts +1 -0
- package/lib/module/Platform/index.js +2 -0
- package/lib/module/Platform/index.js.map +1 -0
- package/lib/module/dom/nodes/drawings/ImageSVG.d.ts +7 -2
- package/lib/module/dom/nodes/drawings/ImageSVG.js +29 -6
- package/lib/module/dom/nodes/drawings/ImageSVG.js.map +1 -1
- package/lib/module/dom/nodes/drawings/PathNode.js +5 -2
- package/lib/module/dom/nodes/drawings/PathNode.js.map +1 -1
- package/lib/module/dom/types/Drawings.d.ts +7 -2
- package/lib/module/dom/types/Drawings.js.map +1 -1
- package/lib/module/renderer/processors/math/Math.d.ts +1 -0
- package/lib/module/renderer/processors/math/Math.js +5 -0
- package/lib/module/renderer/processors/math/Math.js.map +1 -1
- package/lib/module/skia/NativeSetup.js +2 -2
- package/lib/module/skia/NativeSetup.js.map +1 -1
- package/lib/module/skia/core/Data.js +2 -7
- package/lib/module/skia/core/Data.js.map +1 -1
- package/lib/module/skia/core/Image.js +2 -2
- package/lib/module/skia/core/Image.js.map +1 -1
- package/lib/module/views/SkiaBaseWebView.d.ts +6 -1
- package/lib/module/views/SkiaBaseWebView.js +40 -28
- package/lib/module/views/SkiaBaseWebView.js.map +1 -1
- package/lib/module/views/SkiaDomView.js +2 -2
- package/lib/module/views/SkiaDomView.js.map +1 -1
- package/lib/module/views/SkiaPictureView.js +2 -2
- package/lib/module/views/SkiaPictureView.js.map +1 -1
- package/lib/module/views/SkiaView.js +2 -2
- package/lib/module/views/SkiaView.js.map +1 -1
- package/lib/module/views/useTouchHandler.js +3 -3
- package/lib/module/views/useTouchHandler.js.map +1 -1
- package/lib/module/web/WithSkiaWeb.js +1 -1
- package/lib/module/web/WithSkiaWeb.js.map +1 -1
- package/lib/typescript/src/Platform/IPlatform.d.ts +12 -0
- package/lib/typescript/src/Platform/Platform.d.ts +2 -0
- package/lib/typescript/src/Platform/Platform.web.d.ts +2 -0
- package/lib/typescript/src/Platform/index.d.ts +1 -0
- package/lib/typescript/src/dom/nodes/drawings/ImageSVG.d.ts +7 -2
- package/lib/typescript/src/dom/types/Drawings.d.ts +7 -2
- package/lib/typescript/src/renderer/processors/math/Math.d.ts +1 -0
- package/lib/typescript/src/views/SkiaBaseWebView.d.ts +6 -1
- package/package.json +12 -9
- package/scripts/install-npm.js +2 -3
- package/src/Platform/IPlatform.ts +20 -0
- package/src/Platform/Platform.ts +28 -0
- package/src/Platform/Platform.web.tsx +136 -0
- package/src/Platform/index.ts +1 -0
- package/src/dom/nodes/drawings/ImageSVG.ts +17 -6
- package/src/dom/nodes/drawings/PathNode.ts +10 -1
- package/src/dom/types/Drawings.ts +7 -2
- package/src/renderer/processors/math/Math.ts +5 -0
- package/src/skia/NativeSetup.ts +2 -2
- package/src/skia/core/Data.ts +4 -15
- package/src/skia/core/Image.ts +2 -3
- package/src/views/SkiaBaseWebView.tsx +33 -23
- package/src/views/SkiaDomView.tsx +2 -2
- package/src/views/SkiaPictureView.tsx +2 -2
- package/src/views/SkiaView.tsx +2 -2
- package/src/views/useTouchHandler.ts +3 -3
- package/src/web/WithSkiaWeb.tsx +2 -1
@@ -19,10 +19,23 @@ protected:
|
|
19
19
|
auto svgDom = _svgDomProp->getDerivedValue();
|
20
20
|
if (svgDom != nullptr) {
|
21
21
|
auto rect = _rectProp->getDerivedValue();
|
22
|
-
|
22
|
+
auto x = _xProp->isSet() ? _xProp->value().getAsNumber() : -1;
|
23
|
+
auto y = _yProp->isSet() ? _yProp->value().getAsNumber() : -1;
|
24
|
+
auto width = _widthProp->isSet() ? _widthProp->value().getAsNumber() : -1;
|
25
|
+
auto height =
|
26
|
+
_widthProp->isSet() ? _heightProp->value().getAsNumber() : -1;
|
23
27
|
context->getCanvas()->save();
|
24
|
-
|
25
|
-
|
28
|
+
if (rect != nullptr) {
|
29
|
+
context->getCanvas()->translate(rect->x(), rect->y());
|
30
|
+
svgDom->setContainerSize(SkSize::Make(rect->width(), rect->height()));
|
31
|
+
} else {
|
32
|
+
if (x != -1 && y != -1) {
|
33
|
+
context->getCanvas()->translate(x, y);
|
34
|
+
}
|
35
|
+
if (width != -1 && height != -1) {
|
36
|
+
svgDom->setContainerSize(SkSize::Make(width, height));
|
37
|
+
}
|
38
|
+
}
|
26
39
|
svgDom->render(context->getCanvas());
|
27
40
|
context->getCanvas()->restore();
|
28
41
|
}
|
@@ -32,11 +45,19 @@ protected:
|
|
32
45
|
JsiDomDrawingNode::defineProperties(container);
|
33
46
|
_svgDomProp = container->defineProperty<SvgProp>("svg");
|
34
47
|
_rectProp = container->defineProperty<RectProps>("rect");
|
48
|
+
_xProp = container->defineProperty<NodeProp>("x");
|
49
|
+
_yProp = container->defineProperty<NodeProp>("y");
|
50
|
+
_widthProp = container->defineProperty<NodeProp>("width");
|
51
|
+
_heightProp = container->defineProperty<NodeProp>("height");
|
35
52
|
}
|
36
53
|
|
37
54
|
private:
|
38
55
|
SvgProp *_svgDomProp;
|
39
56
|
RectProps *_rectProp;
|
57
|
+
NodeProp *_xProp;
|
58
|
+
NodeProp *_yProp;
|
59
|
+
NodeProp *_widthProp;
|
60
|
+
NodeProp *_heightProp;
|
40
61
|
};
|
41
62
|
|
42
63
|
} // namespace RNSkia
|
@@ -3,6 +3,7 @@
|
|
3
3
|
#include "JsiDomDrawingNode.h"
|
4
4
|
#include "PathProp.h"
|
5
5
|
|
6
|
+
#include <algorithm>
|
6
7
|
#include <memory>
|
7
8
|
#include <string>
|
8
9
|
|
@@ -27,12 +28,14 @@ public:
|
|
27
28
|
protected:
|
28
29
|
void draw(DrawingContext *context) override {
|
29
30
|
if (getPropsContainer()->isChanged()) {
|
31
|
+
auto start = saturate(
|
32
|
+
_startProp->isSet() ? _startProp->value().getAsNumber() : 0.0);
|
33
|
+
auto end =
|
34
|
+
saturate(_endProp->isSet() ? _endProp->value().getAsNumber() : 1.0);
|
30
35
|
// Can we use the path directly, or do we need to copy to
|
31
36
|
// mutate / modify the path?
|
32
|
-
auto hasStartOffset =
|
33
|
-
|
34
|
-
auto hasEndOffset =
|
35
|
-
_endProp->isSet() && _endProp->value().getAsNumber() != 1.0;
|
37
|
+
auto hasStartOffset = start != 0.0;
|
38
|
+
auto hasEndOffset = end != 1.0;
|
36
39
|
auto hasFillStyle = _fillTypeProp->isSet();
|
37
40
|
auto hasStrokeOptions =
|
38
41
|
_strokeOptsProp->isSet() &&
|
@@ -44,9 +47,6 @@ protected:
|
|
44
47
|
if (willMutatePath) {
|
45
48
|
// We'll trim the path
|
46
49
|
SkPath filteredPath(*_pathProp->getDerivedValue());
|
47
|
-
auto start =
|
48
|
-
_startProp->isSet() ? _startProp->value().getAsNumber() : 0.0;
|
49
|
-
auto end = _endProp->isSet() ? _endProp->value().getAsNumber() : 1.0;
|
50
50
|
auto pe =
|
51
51
|
SkTrimPathEffect::Make(start, end, SkTrimPathEffect::Mode::kNormal);
|
52
52
|
|
@@ -55,16 +55,14 @@ protected:
|
|
55
55
|
if (!pe->filterPath(&filteredPath, filteredPath, &rec, nullptr)) {
|
56
56
|
throw std::runtime_error(
|
57
57
|
"Failed trimming path with parameters start: " +
|
58
|
-
std::to_string(
|
59
|
-
", end: " + std::to_string(_endProp->value().getAsNumber()));
|
58
|
+
std::to_string(start) + ", end: " + std::to_string(end));
|
60
59
|
}
|
61
60
|
filteredPath.swap(filteredPath);
|
62
61
|
_path = std::make_shared<const SkPath>(filteredPath);
|
63
62
|
} else if (hasStartOffset || hasEndOffset) {
|
64
63
|
throw std::runtime_error(
|
65
64
|
"Failed trimming path with parameters start: " +
|
66
|
-
std::to_string(
|
67
|
-
", end: " + std::to_string(_endProp->value().getAsNumber()));
|
65
|
+
std::to_string(start) + ", end: " + std::to_string(end));
|
68
66
|
} else {
|
69
67
|
_path = std::make_shared<const SkPath>(filteredPath);
|
70
68
|
}
|
@@ -144,6 +142,8 @@ protected:
|
|
144
142
|
}
|
145
143
|
|
146
144
|
private:
|
145
|
+
float saturate(float x) { return std::max(0.0f, std::min(1.0f, x)); }
|
146
|
+
|
147
147
|
SkPathFillType getFillTypeFromStringValue(const std::string &value) {
|
148
148
|
if (value == "winding") {
|
149
149
|
return SkPathFillType::kWinding;
|
package/jestSetup.js
CHANGED
@@ -1,4 +1,18 @@
|
|
1
1
|
/* globals jest */
|
2
|
-
jest.mock("@shopify/react-native-skia", () =>
|
3
|
-
|
4
|
-
);
|
2
|
+
jest.mock("@shopify/react-native-skia", () => {
|
3
|
+
jest.mock("@shopify/react-native-skia/lib/commonjs/Platform", () => {
|
4
|
+
const Noop = () => undefined;
|
5
|
+
return {
|
6
|
+
OS: "web",
|
7
|
+
PixelRatio: 1,
|
8
|
+
requireNativeComponent: Noop,
|
9
|
+
resolveAsset: Noop,
|
10
|
+
findNodeHandle: Noop,
|
11
|
+
NativeModules: Noop,
|
12
|
+
View: Noop,
|
13
|
+
};
|
14
|
+
});
|
15
|
+
return require("@shopify/react-native-skia/lib/commonjs/mock").Mock(
|
16
|
+
global.CanvasKit
|
17
|
+
);
|
18
|
+
});
|
@@ -0,0 +1,12 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import type { HostComponent, NodeHandle, ViewComponent } from "react-native";
|
3
|
+
import type { DataModule } from "../skia/types";
|
4
|
+
export interface IPlatform {
|
5
|
+
OS: string;
|
6
|
+
requireNativeComponent: <T>(viewName: string) => HostComponent<T>;
|
7
|
+
PixelRatio: number;
|
8
|
+
NativeModules: Record<string, any>;
|
9
|
+
findNodeHandle: (componentOrHandle: null | number | React.Component<any, any> | React.ComponentClass<any>) => null | NodeHandle;
|
10
|
+
resolveAsset: (source: DataModule) => string;
|
11
|
+
View: typeof ViewComponent;
|
12
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":[],"sources":["IPlatform.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { HostComponent, NodeHandle, ViewComponent } from \"react-native\";\n\nimport type { DataModule } from \"../skia/types\";\n\nexport interface IPlatform {\n OS: string;\n requireNativeComponent: <T>(viewName: string) => HostComponent<T>;\n PixelRatio: number;\n NativeModules: Record<string, any>;\n findNodeHandle: (\n componentOrHandle:\n | null\n | number\n | React.Component<any, any>\n | React.ComponentClass<any>\n ) => null | NodeHandle;\n resolveAsset: (source: DataModule) => string;\n View: typeof ViewComponent;\n}\n"],"mappings":""}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.Platform = void 0;
|
7
|
+
|
8
|
+
var _reactNative = require("react-native");
|
9
|
+
|
10
|
+
var _types = require("../skia/types");
|
11
|
+
|
12
|
+
const Platform = {
|
13
|
+
OS: _reactNative.Platform.OS,
|
14
|
+
PixelRatio: _reactNative.PixelRatio.get(),
|
15
|
+
requireNativeComponent: _reactNative.requireNativeComponent,
|
16
|
+
resolveAsset: source => {
|
17
|
+
return (0, _types.isRNModule)(source) ? _reactNative.Image.resolveAssetSource(source).uri : source.default;
|
18
|
+
},
|
19
|
+
findNodeHandle: _reactNative.findNodeHandle,
|
20
|
+
NativeModules: _reactNative.NativeModules,
|
21
|
+
View: _reactNative.View
|
22
|
+
};
|
23
|
+
exports.Platform = Platform;
|
24
|
+
//# sourceMappingURL=Platform.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["Platform","OS","RNPlatform","PixelRatio","get","requireNativeComponent","resolveAsset","source","isRNModule","Image","resolveAssetSource","uri","default","findNodeHandle","NativeModules","View"],"sources":["Platform.ts"],"sourcesContent":["import {\n Image,\n PixelRatio,\n requireNativeComponent,\n Platform as RNPlatform,\n findNodeHandle,\n NativeModules,\n View,\n} from \"react-native\";\n\nimport type { DataModule } from \"../skia/types\";\nimport { isRNModule } from \"../skia/types\";\n\nimport type { IPlatform } from \"./IPlatform\";\n\nexport const Platform: IPlatform = {\n OS: RNPlatform.OS,\n PixelRatio: PixelRatio.get(),\n requireNativeComponent,\n resolveAsset: (source: DataModule) => {\n return isRNModule(source)\n ? Image.resolveAssetSource(source).uri\n : source.default;\n },\n findNodeHandle,\n NativeModules,\n View,\n};\n"],"mappings":";;;;;;;AAAA;;AAWA;;AAIO,MAAMA,QAAmB,GAAG;EACjCC,EAAE,EAAEC,qBAAA,CAAWD,EADkB;EAEjCE,UAAU,EAAEA,uBAAA,CAAWC,GAAX,EAFqB;EAGjCC,sBAAsB,EAAtBA,mCAHiC;EAIjCC,YAAY,EAAGC,MAAD,IAAwB;IACpC,OAAO,IAAAC,iBAAA,EAAWD,MAAX,IACHE,kBAAA,CAAMC,kBAAN,CAAyBH,MAAzB,EAAiCI,GAD9B,GAEHJ,MAAM,CAACK,OAFX;EAGD,CARgC;EASjCC,cAAc,EAAdA,2BATiC;EAUjCC,aAAa,EAAbA,0BAViC;EAWjCC,IAAI,EAAJA;AAXiC,CAA5B"}
|
@@ -0,0 +1,157 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.Platform = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
9
|
+
|
10
|
+
var _types = require("../skia/types");
|
11
|
+
|
12
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
13
|
+
|
14
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
15
|
+
|
16
|
+
// eslint-disable-next-line max-len
|
17
|
+
// https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/useElementLayout/index.js
|
18
|
+
const DOM_LAYOUT_HANDLER_NAME = "__reactLayoutHandler";
|
19
|
+
let resizeObserver = null;
|
20
|
+
|
21
|
+
const getObserver = () => {
|
22
|
+
if (resizeObserver == null) {
|
23
|
+
resizeObserver = new window.ResizeObserver(function (entries) {
|
24
|
+
entries.forEach(entry => {
|
25
|
+
const node = entry.target;
|
26
|
+
const {
|
27
|
+
left,
|
28
|
+
top,
|
29
|
+
width,
|
30
|
+
height
|
31
|
+
} = entry.contentRect;
|
32
|
+
const onLayout = node[DOM_LAYOUT_HANDLER_NAME];
|
33
|
+
|
34
|
+
if (typeof onLayout === "function") {
|
35
|
+
// setTimeout 0 is taken from react-native-web (UIManager)
|
36
|
+
setTimeout(() => onLayout({
|
37
|
+
timeStamp: Date.now(),
|
38
|
+
nativeEvent: {
|
39
|
+
layout: {
|
40
|
+
x: left,
|
41
|
+
y: top,
|
42
|
+
width,
|
43
|
+
height
|
44
|
+
}
|
45
|
+
},
|
46
|
+
currentTarget: 0,
|
47
|
+
target: 0,
|
48
|
+
bubbles: false,
|
49
|
+
cancelable: false,
|
50
|
+
defaultPrevented: false,
|
51
|
+
eventPhase: 0,
|
52
|
+
|
53
|
+
isDefaultPrevented() {
|
54
|
+
throw new Error("Method not supported on web.");
|
55
|
+
},
|
56
|
+
|
57
|
+
isPropagationStopped() {
|
58
|
+
throw new Error("Method not supported on web.");
|
59
|
+
},
|
60
|
+
|
61
|
+
persist() {
|
62
|
+
throw new Error("Method not supported on web.");
|
63
|
+
},
|
64
|
+
|
65
|
+
preventDefault() {
|
66
|
+
throw new Error("Method not supported on web.");
|
67
|
+
},
|
68
|
+
|
69
|
+
stopPropagation() {
|
70
|
+
throw new Error("Method not supported on web.");
|
71
|
+
},
|
72
|
+
|
73
|
+
isTrusted: true,
|
74
|
+
type: ""
|
75
|
+
}), 0);
|
76
|
+
}
|
77
|
+
});
|
78
|
+
});
|
79
|
+
}
|
80
|
+
|
81
|
+
return resizeObserver;
|
82
|
+
};
|
83
|
+
|
84
|
+
const useElementLayout = (ref, onLayout) => {
|
85
|
+
const observer = getObserver();
|
86
|
+
(0, _react.useLayoutEffect)(() => {
|
87
|
+
const node = ref.current;
|
88
|
+
|
89
|
+
if (node !== null) {
|
90
|
+
node[DOM_LAYOUT_HANDLER_NAME] = onLayout;
|
91
|
+
}
|
92
|
+
}, [ref, onLayout]);
|
93
|
+
(0, _react.useLayoutEffect)(() => {
|
94
|
+
const node = ref.current;
|
95
|
+
|
96
|
+
if (node != null && observer != null) {
|
97
|
+
if (typeof node[DOM_LAYOUT_HANDLER_NAME] === "function") {
|
98
|
+
observer.observe(node);
|
99
|
+
} else {
|
100
|
+
observer.unobserve(node);
|
101
|
+
}
|
102
|
+
}
|
103
|
+
|
104
|
+
return () => {
|
105
|
+
if (node != null && observer != null) {
|
106
|
+
observer.unobserve(node);
|
107
|
+
}
|
108
|
+
};
|
109
|
+
}, [observer, ref]);
|
110
|
+
};
|
111
|
+
|
112
|
+
const View = _ref => {
|
113
|
+
let {
|
114
|
+
children,
|
115
|
+
onLayout,
|
116
|
+
style: rawStyle
|
117
|
+
} = _ref;
|
118
|
+
const style = (0, _react.useMemo)(() => rawStyle ?? {}, [rawStyle]);
|
119
|
+
const ref = (0, _react.useRef)(null);
|
120
|
+
useElementLayout(ref, onLayout);
|
121
|
+
const cssStyles = (0, _react.useMemo)(() => {
|
122
|
+
return { ...style,
|
123
|
+
display: "flex",
|
124
|
+
flexDirection: style.flexDirection || "inherit",
|
125
|
+
flexWrap: style.flexWrap || "nowrap",
|
126
|
+
justifyContent: style.justifyContent || "flex-start",
|
127
|
+
alignItems: style.alignItems || "stretch",
|
128
|
+
alignContent: style.alignContent || "stretch"
|
129
|
+
};
|
130
|
+
}, [style]);
|
131
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
132
|
+
ref: ref,
|
133
|
+
style: cssStyles
|
134
|
+
}, children);
|
135
|
+
};
|
136
|
+
|
137
|
+
const Platform = {
|
138
|
+
OS: "web",
|
139
|
+
PixelRatio: window.devicePixelRatio,
|
140
|
+
requireNativeComponent: () => {
|
141
|
+
throw new Error("requireNativeComponent is not supported on the web");
|
142
|
+
},
|
143
|
+
resolveAsset: source => {
|
144
|
+
if ((0, _types.isRNModule)(source)) {
|
145
|
+
throw new Error("Image source is a number - this is not supported on the web");
|
146
|
+
}
|
147
|
+
|
148
|
+
return source.default;
|
149
|
+
},
|
150
|
+
findNodeHandle: () => {
|
151
|
+
throw new Error("findNodeHandle is not supported on the web");
|
152
|
+
},
|
153
|
+
NativeModules: {},
|
154
|
+
View
|
155
|
+
};
|
156
|
+
exports.Platform = Platform;
|
157
|
+
//# sourceMappingURL=Platform.web.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["DOM_LAYOUT_HANDLER_NAME","resizeObserver","getObserver","window","ResizeObserver","entries","forEach","entry","node","target","left","top","width","height","contentRect","onLayout","setTimeout","timeStamp","Date","now","nativeEvent","layout","x","y","currentTarget","bubbles","cancelable","defaultPrevented","eventPhase","isDefaultPrevented","Error","isPropagationStopped","persist","preventDefault","stopPropagation","isTrusted","type","useElementLayout","ref","observer","useLayoutEffect","current","observe","unobserve","View","children","style","rawStyle","useMemo","useRef","cssStyles","display","flexDirection","flexWrap","justifyContent","alignItems","alignContent","Platform","OS","PixelRatio","devicePixelRatio","requireNativeComponent","resolveAsset","source","isRNModule","default","findNodeHandle","NativeModules"],"sources":["Platform.web.tsx"],"sourcesContent":["import type { RefObject, CSSProperties } from \"react\";\nimport React, { useLayoutEffect, useMemo, useRef } from \"react\";\nimport type { LayoutChangeEvent, ViewComponent, ViewProps } from \"react-native\";\n\nimport type { DataModule } from \"../skia/types\";\nimport { isRNModule } from \"../skia/types\";\n\nimport type { IPlatform } from \"./IPlatform\";\n\n// eslint-disable-next-line max-len\n// https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/useElementLayout/index.js\nconst DOM_LAYOUT_HANDLER_NAME = \"__reactLayoutHandler\";\ntype OnLayout = ((event: LayoutChangeEvent) => void) | undefined;\ntype Div = HTMLDivElement & {\n __reactLayoutHandler: OnLayout;\n};\n\nlet resizeObserver: ResizeObserver | null = null;\n\nconst getObserver = () => {\n if (resizeObserver == null) {\n resizeObserver = new window.ResizeObserver(function (entries) {\n entries.forEach((entry) => {\n const node = entry.target as Div;\n const { left, top, width, height } = entry.contentRect;\n const onLayout = node[DOM_LAYOUT_HANDLER_NAME];\n if (typeof onLayout === \"function\") {\n // setTimeout 0 is taken from react-native-web (UIManager)\n setTimeout(\n () =>\n onLayout({\n timeStamp: Date.now(),\n nativeEvent: { layout: { x: left, y: top, width, height } },\n currentTarget: 0,\n target: 0,\n bubbles: false,\n cancelable: false,\n defaultPrevented: false,\n eventPhase: 0,\n isDefaultPrevented() {\n throw new Error(\"Method not supported on web.\");\n },\n isPropagationStopped() {\n throw new Error(\"Method not supported on web.\");\n },\n persist() {\n throw new Error(\"Method not supported on web.\");\n },\n preventDefault() {\n throw new Error(\"Method not supported on web.\");\n },\n stopPropagation() {\n throw new Error(\"Method not supported on web.\");\n },\n isTrusted: true,\n type: \"\",\n }),\n 0\n );\n }\n });\n });\n }\n return resizeObserver;\n};\n\nconst useElementLayout = (ref: RefObject<Div>, onLayout: OnLayout) => {\n const observer = getObserver();\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (node !== null) {\n node[DOM_LAYOUT_HANDLER_NAME] = onLayout;\n }\n }, [ref, onLayout]);\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (node != null && observer != null) {\n if (typeof node[DOM_LAYOUT_HANDLER_NAME] === \"function\") {\n observer.observe(node);\n } else {\n observer.unobserve(node);\n }\n }\n return () => {\n if (node != null && observer != null) {\n observer.unobserve(node);\n }\n };\n }, [observer, ref]);\n};\n\nconst View = (({ children, onLayout, style: rawStyle }: ViewProps) => {\n const style = useMemo(() => (rawStyle ?? {}) as CSSProperties, [rawStyle]);\n const ref = useRef<Div>(null);\n useElementLayout(ref, onLayout);\n const cssStyles = useMemo(() => {\n return {\n ...style,\n display: \"flex\",\n flexDirection: style.flexDirection || \"inherit\",\n flexWrap: style.flexWrap || \"nowrap\",\n justifyContent: style.justifyContent || \"flex-start\",\n alignItems: style.alignItems || \"stretch\",\n alignContent: style.alignContent || \"stretch\",\n };\n }, [style]);\n\n return (\n <div ref={ref} style={cssStyles}>\n {children}\n </div>\n );\n}) as unknown as typeof ViewComponent;\n\nexport const Platform: IPlatform = {\n OS: \"web\",\n PixelRatio: window.devicePixelRatio,\n requireNativeComponent: () => {\n throw new Error(\"requireNativeComponent is not supported on the web\");\n },\n resolveAsset: (source: DataModule) => {\n if (isRNModule(source)) {\n throw new Error(\n \"Image source is a number - this is not supported on the web\"\n );\n }\n return source.default;\n },\n findNodeHandle: () => {\n throw new Error(\"findNodeHandle is not supported on the web\");\n },\n NativeModules: {},\n View,\n};\n"],"mappings":"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"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from "./Platform";
|
@@ -0,0 +1,19 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
|
7
|
+
var _Platform = require("./Platform");
|
8
|
+
|
9
|
+
Object.keys(_Platform).forEach(function (key) {
|
10
|
+
if (key === "default" || key === "__esModule") return;
|
11
|
+
if (key in exports && exports[key] === _Platform[key]) return;
|
12
|
+
Object.defineProperty(exports, key, {
|
13
|
+
enumerable: true,
|
14
|
+
get: function () {
|
15
|
+
return _Platform[key];
|
16
|
+
}
|
17
|
+
});
|
18
|
+
});
|
19
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Platform\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
@@ -1,8 +1,13 @@
|
|
1
1
|
import type { DrawingContext, ImageSVGProps } from "../../types";
|
2
2
|
import { JsiDrawingNode } from "../DrawingNode";
|
3
3
|
import type { NodeContext } from "../Node";
|
4
|
-
export declare class ImageSVGNode extends JsiDrawingNode<ImageSVGProps,
|
4
|
+
export declare class ImageSVGNode extends JsiDrawingNode<ImageSVGProps, Pick<ImageSVGProps, "x" | "y" | "width" | "height">> {
|
5
5
|
constructor(ctx: NodeContext, props: ImageSVGProps);
|
6
|
-
deriveProps():
|
6
|
+
deriveProps(): import("../../..").SkRect | {
|
7
|
+
x: number | undefined;
|
8
|
+
y: number | undefined;
|
9
|
+
width: number | undefined;
|
10
|
+
height: number | undefined;
|
11
|
+
};
|
7
12
|
draw({ canvas }: DrawingContext): void;
|
8
13
|
}
|
@@ -7,8 +7,6 @@ exports.ImageSVGNode = void 0;
|
|
7
7
|
|
8
8
|
var _types = require("../../types");
|
9
9
|
|
10
|
-
var _datatypes = require("../datatypes");
|
11
|
-
|
12
10
|
var _DrawingNode = require("../DrawingNode");
|
13
11
|
|
14
12
|
class ImageSVGNode extends _DrawingNode.JsiDrawingNode {
|
@@ -17,7 +15,22 @@ class ImageSVGNode extends _DrawingNode.JsiDrawingNode {
|
|
17
15
|
}
|
18
16
|
|
19
17
|
deriveProps() {
|
20
|
-
|
18
|
+
if (this.props.rect) {
|
19
|
+
return this.props.rect;
|
20
|
+
}
|
21
|
+
|
22
|
+
const {
|
23
|
+
x,
|
24
|
+
y,
|
25
|
+
width,
|
26
|
+
height
|
27
|
+
} = this.props;
|
28
|
+
return {
|
29
|
+
x,
|
30
|
+
y,
|
31
|
+
width,
|
32
|
+
height
|
33
|
+
};
|
21
34
|
}
|
22
35
|
|
23
36
|
draw(_ref) {
|
@@ -28,8 +41,8 @@ class ImageSVGNode extends _DrawingNode.JsiDrawingNode {
|
|
28
41
|
svg
|
29
42
|
} = this.props;
|
30
43
|
|
31
|
-
if (!
|
32
|
-
|
44
|
+
if (!this.derived) {
|
45
|
+
throw new Error("ImageSVGNode: derived props unresolved");
|
33
46
|
}
|
34
47
|
|
35
48
|
const {
|
@@ -37,9 +50,18 @@ class ImageSVGNode extends _DrawingNode.JsiDrawingNode {
|
|
37
50
|
y,
|
38
51
|
width,
|
39
52
|
height
|
40
|
-
} =
|
53
|
+
} = this.derived;
|
54
|
+
|
55
|
+
if (svg === null) {
|
56
|
+
return;
|
57
|
+
}
|
58
|
+
|
41
59
|
canvas.save();
|
42
|
-
|
60
|
+
|
61
|
+
if (x && y) {
|
62
|
+
canvas.translate(x, y);
|
63
|
+
}
|
64
|
+
|
43
65
|
canvas.drawSvg(svg, width, height);
|
44
66
|
canvas.restore();
|
45
67
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["ImageSVGNode","JsiDrawingNode","constructor","ctx","props","NodeType","ImageSVG","deriveProps","
|
1
|
+
{"version":3,"names":["ImageSVGNode","JsiDrawingNode","constructor","ctx","props","NodeType","ImageSVG","deriveProps","rect","x","y","width","height","draw","canvas","svg","derived","Error","save","translate","drawSvg","restore"],"sources":["ImageSVG.ts"],"sourcesContent":["import type { DrawingContext, ImageSVGProps } from \"../../types\";\nimport { NodeType } from \"../../types\";\nimport { JsiDrawingNode } from \"../DrawingNode\";\nimport type { NodeContext } from \"../Node\";\n\nexport class ImageSVGNode extends JsiDrawingNode<\n ImageSVGProps,\n Pick<ImageSVGProps, \"x\" | \"y\" | \"width\" | \"height\">\n> {\n constructor(ctx: NodeContext, props: ImageSVGProps) {\n super(ctx, NodeType.ImageSVG, props);\n }\n\n deriveProps() {\n if (this.props.rect) {\n return this.props.rect;\n }\n const { x, y, width, height } = this.props;\n return { x, y, width, height };\n }\n\n draw({ canvas }: DrawingContext) {\n const { svg } = this.props;\n if (!this.derived) {\n throw new Error(\"ImageSVGNode: derived props unresolved\");\n }\n const { x, y, width, height } = this.derived;\n if (svg === null) {\n return;\n }\n canvas.save();\n if (x && y) {\n canvas.translate(x, y);\n }\n canvas.drawSvg(svg, width, height);\n canvas.restore();\n }\n}\n"],"mappings":";;;;;;;AACA;;AACA;;AAGO,MAAMA,YAAN,SAA2BC,2BAA3B,CAGL;EACAC,WAAW,CAACC,GAAD,EAAmBC,KAAnB,EAAyC;IAClD,MAAMD,GAAN,EAAWE,eAAA,CAASC,QAApB,EAA8BF,KAA9B;EACD;;EAEDG,WAAW,GAAG;IACZ,IAAI,KAAKH,KAAL,CAAWI,IAAf,EAAqB;MACnB,OAAO,KAAKJ,KAAL,CAAWI,IAAlB;IACD;;IACD,MAAM;MAAEC,CAAF;MAAKC,CAAL;MAAQC,KAAR;MAAeC;IAAf,IAA0B,KAAKR,KAArC;IACA,OAAO;MAAEK,CAAF;MAAKC,CAAL;MAAQC,KAAR;MAAeC;IAAf,CAAP;EACD;;EAEDC,IAAI,OAA6B;IAAA,IAA5B;MAAEC;IAAF,CAA4B;IAC/B,MAAM;MAAEC;IAAF,IAAU,KAAKX,KAArB;;IACA,IAAI,CAAC,KAAKY,OAAV,EAAmB;MACjB,MAAM,IAAIC,KAAJ,CAAU,wCAAV,CAAN;IACD;;IACD,MAAM;MAAER,CAAF;MAAKC,CAAL;MAAQC,KAAR;MAAeC;IAAf,IAA0B,KAAKI,OAArC;;IACA,IAAID,GAAG,KAAK,IAAZ,EAAkB;MAChB;IACD;;IACDD,MAAM,CAACI,IAAP;;IACA,IAAIT,CAAC,IAAIC,CAAT,EAAY;MACVI,MAAM,CAACK,SAAP,CAAiBV,CAAjB,EAAoBC,CAApB;IACD;;IACDI,MAAM,CAACM,OAAP,CAAeL,GAAf,EAAoBJ,KAApB,EAA2BC,MAA3B;IACAE,MAAM,CAACO,OAAP;EACD;;AA5BD"}
|
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.PathNode = void 0;
|
7
7
|
|
8
|
+
var _math = require("../../../renderer/processors/math");
|
9
|
+
|
8
10
|
var _types = require("../../../skia/types");
|
9
11
|
|
10
12
|
var _types2 = require("../../types");
|
@@ -20,12 +22,14 @@ class PathNode extends _DrawingNode.JsiDrawingNode {
|
|
20
22
|
|
21
23
|
deriveProps() {
|
22
24
|
const {
|
23
|
-
start,
|
24
|
-
end,
|
25
|
+
start: trimStart,
|
26
|
+
end: trimEnd,
|
25
27
|
fillType,
|
26
28
|
stroke,
|
27
29
|
...pathProps
|
28
30
|
} = this.props;
|
31
|
+
const start = (0, _math.saturate)(trimStart);
|
32
|
+
const end = (0, _math.saturate)(trimEnd);
|
29
33
|
const hasStartOffset = start !== 0;
|
30
34
|
const hasEndOffset = end !== 1;
|
31
35
|
const hasStrokeOptions = stroke !== undefined;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["PathNode","JsiDrawingNode","constructor","ctx","props","NodeType","Path","deriveProps","start","end","fillType","stroke","pathProps","hasStartOffset","hasEndOffset","hasStrokeOptions","undefined","hasFillType","willMutatePath","pristinePath","processPath","Skia","path","copy","setFillType","FillType","enumKey","trim","draw","canvas","paint","derived","Error","drawPath"],"sources":["PathNode.ts"],"sourcesContent":["import { FillType } from \"../../../skia/types\";\nimport type { SkPath } from \"../../../skia/types\";\nimport type { DrawingContext, PathProps } from \"../../types\";\nimport { NodeType } from \"../../types\";\nimport { enumKey, processPath } from \"../datatypes\";\nimport { JsiDrawingNode } from \"../DrawingNode\";\nimport type { NodeContext } from \"../Node\";\n\nexport class PathNode extends JsiDrawingNode<PathProps, SkPath> {\n constructor(ctx: NodeContext, props: PathProps) {\n super(ctx, NodeType.Path, props);\n }\n\n protected deriveProps() {\n const {
|
1
|
+
{"version":3,"names":["PathNode","JsiDrawingNode","constructor","ctx","props","NodeType","Path","deriveProps","start","trimStart","end","trimEnd","fillType","stroke","pathProps","saturate","hasStartOffset","hasEndOffset","hasStrokeOptions","undefined","hasFillType","willMutatePath","pristinePath","processPath","Skia","path","copy","setFillType","FillType","enumKey","trim","draw","canvas","paint","derived","Error","drawPath"],"sources":["PathNode.ts"],"sourcesContent":["import { saturate } from \"../../../renderer/processors/math\";\nimport { FillType } from \"../../../skia/types\";\nimport type { SkPath } from \"../../../skia/types\";\nimport type { DrawingContext, PathProps } from \"../../types\";\nimport { NodeType } from \"../../types\";\nimport { enumKey, processPath } from \"../datatypes\";\nimport { JsiDrawingNode } from \"../DrawingNode\";\nimport type { NodeContext } from \"../Node\";\n\nexport class PathNode extends JsiDrawingNode<PathProps, SkPath> {\n constructor(ctx: NodeContext, props: PathProps) {\n super(ctx, NodeType.Path, props);\n }\n\n protected deriveProps() {\n const {\n start: trimStart,\n end: trimEnd,\n fillType,\n stroke,\n ...pathProps\n } = this.props;\n const start = saturate(trimStart);\n const end = saturate(trimEnd);\n const hasStartOffset = start !== 0;\n const hasEndOffset = end !== 1;\n const hasStrokeOptions = stroke !== undefined;\n const hasFillType = !!fillType;\n const willMutatePath =\n hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;\n const pristinePath = processPath(this.Skia, pathProps.path);\n const path = willMutatePath ? pristinePath.copy() : pristinePath;\n if (hasFillType) {\n path.setFillType(FillType[enumKey(fillType)]);\n }\n if (hasStrokeOptions) {\n path.stroke(stroke);\n }\n if (hasStartOffset || hasEndOffset) {\n path.trim(start, end, false);\n }\n return path;\n }\n\n draw({ canvas, paint }: DrawingContext) {\n if (!this.derived) {\n throw new Error(\"Path not initialized\");\n }\n canvas.drawPath(this.derived, paint);\n }\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAGA;;AACA;;AACA;;AAGO,MAAMA,QAAN,SAAuBC,2BAAvB,CAAyD;EAC9DC,WAAW,CAACC,GAAD,EAAmBC,KAAnB,EAAqC;IAC9C,MAAMD,GAAN,EAAWE,gBAAA,CAASC,IAApB,EAA0BF,KAA1B;EACD;;EAESG,WAAW,GAAG;IACtB,MAAM;MACJC,KAAK,EAAEC,SADH;MAEJC,GAAG,EAAEC,OAFD;MAGJC,QAHI;MAIJC,MAJI;MAKJ,GAAGC;IALC,IAMF,KAAKV,KANT;IAOA,MAAMI,KAAK,GAAG,IAAAO,cAAA,EAASN,SAAT,CAAd;IACA,MAAMC,GAAG,GAAG,IAAAK,cAAA,EAASJ,OAAT,CAAZ;IACA,MAAMK,cAAc,GAAGR,KAAK,KAAK,CAAjC;IACA,MAAMS,YAAY,GAAGP,GAAG,KAAK,CAA7B;IACA,MAAMQ,gBAAgB,GAAGL,MAAM,KAAKM,SAApC;IACA,MAAMC,WAAW,GAAG,CAAC,CAACR,QAAtB;IACA,MAAMS,cAAc,GAClBL,cAAc,IAAIC,YAAlB,IAAkCC,gBAAlC,IAAsDE,WADxD;IAEA,MAAME,YAAY,GAAG,IAAAC,sBAAA,EAAY,KAAKC,IAAjB,EAAuBV,SAAS,CAACW,IAAjC,CAArB;IACA,MAAMA,IAAI,GAAGJ,cAAc,GAAGC,YAAY,CAACI,IAAb,EAAH,GAAyBJ,YAApD;;IACA,IAAIF,WAAJ,EAAiB;MACfK,IAAI,CAACE,WAAL,CAAiBC,eAAA,CAAS,IAAAC,kBAAA,EAAQjB,QAAR,CAAT,CAAjB;IACD;;IACD,IAAIM,gBAAJ,EAAsB;MACpBO,IAAI,CAACZ,MAAL,CAAYA,MAAZ;IACD;;IACD,IAAIG,cAAc,IAAIC,YAAtB,EAAoC;MAClCQ,IAAI,CAACK,IAAL,CAAUtB,KAAV,EAAiBE,GAAjB,EAAsB,KAAtB;IACD;;IACD,OAAOe,IAAP;EACD;;EAEDM,IAAI,OAAoC;IAAA,IAAnC;MAAEC,MAAF;MAAUC;IAAV,CAAmC;;IACtC,IAAI,CAAC,KAAKC,OAAV,EAAmB;MACjB,MAAM,IAAIC,KAAJ,CAAU,sBAAV,CAAN;IACD;;IACDH,MAAM,CAACI,QAAP,CAAgB,KAAKF,OAArB,EAA8BD,KAA9B;EACD;;AAxC6D"}
|
@@ -50,9 +50,14 @@ export interface VerticesProps extends DrawingNodeProps {
|
|
50
50
|
blendMode?: SkEnum<typeof BlendMode>;
|
51
51
|
indices?: number[];
|
52
52
|
}
|
53
|
-
export
|
53
|
+
export interface ImageSVGProps extends DrawingNodeProps {
|
54
54
|
svg: SkSVG | null;
|
55
|
-
|
55
|
+
x?: number;
|
56
|
+
y?: number;
|
57
|
+
width?: number;
|
58
|
+
height?: number;
|
59
|
+
rect?: SkRect;
|
60
|
+
}
|
56
61
|
export interface PictureProps extends DrawingNodeProps {
|
57
62
|
picture: SkPicture;
|
58
63
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":[],"sources":["Drawings.ts"],"sourcesContent":["import type {\n FillType,\n SkImage,\n StrokeOpts,\n Vector,\n Color,\n SkPoint,\n BlendMode,\n PointMode,\n VertexMode,\n SkFont,\n SkRRect,\n SkTextBlob,\n SkPicture,\n SkSVG,\n SkPaint,\n SkRect,\n} from \"../../skia/types\";\n\nimport type {\n CircleDef,\n Fit,\n GroupProps,\n PathDef,\n RectDef,\n RRectDef,\n SkEnum,\n} from \"./Common\";\nimport type { DrawingContext } from \"./DrawingContext\";\n\nexport interface DrawingNodeProps extends GroupProps {\n paint?: SkPaint;\n}\n\nexport type ImageProps = DrawingNodeProps &\n RectDef & {\n fit?: Fit;\n image: SkImage | null;\n };\n\nexport type CircleProps = CircleDef & DrawingNodeProps;\n\nexport interface PathProps extends DrawingNodeProps {\n path: PathDef;\n start: number;\n end: number;\n stroke?: StrokeOpts;\n fillType?: SkEnum<typeof FillType>;\n}\n\nexport interface CustomDrawingNodeProps extends DrawingNodeProps {\n drawing: (ctx: DrawingContext) => void;\n}\n\nexport interface LineProps extends DrawingNodeProps {\n p1: Vector;\n p2: Vector;\n}\n\nexport type OvalProps = RectDef & DrawingNodeProps;\n\nexport type RectProps = RectDef & DrawingNodeProps;\n\nexport type RoundedRectProps = RRectDef & DrawingNodeProps;\n\nexport interface CubicBezierHandle {\n pos: Vector;\n c1: Vector;\n c2: Vector;\n}\n\nexport interface PatchProps extends DrawingNodeProps {\n colors?: Color[];\n patch: [\n CubicBezierHandle,\n CubicBezierHandle,\n CubicBezierHandle,\n CubicBezierHandle\n ];\n texture?: readonly [SkPoint, SkPoint, SkPoint, SkPoint];\n blendMode?: SkEnum<typeof BlendMode>;\n}\n\nexport interface VerticesProps extends DrawingNodeProps {\n colors?: string[];\n vertices: SkPoint[];\n textures?: SkPoint[];\n mode: SkEnum<typeof VertexMode>;\n blendMode?: SkEnum<typeof BlendMode>;\n indices?: number[];\n}\n\nexport
|
1
|
+
{"version":3,"names":[],"sources":["Drawings.ts"],"sourcesContent":["import type {\n FillType,\n SkImage,\n StrokeOpts,\n Vector,\n Color,\n SkPoint,\n BlendMode,\n PointMode,\n VertexMode,\n SkFont,\n SkRRect,\n SkTextBlob,\n SkPicture,\n SkSVG,\n SkPaint,\n SkRect,\n} from \"../../skia/types\";\n\nimport type {\n CircleDef,\n Fit,\n GroupProps,\n PathDef,\n RectDef,\n RRectDef,\n SkEnum,\n} from \"./Common\";\nimport type { DrawingContext } from \"./DrawingContext\";\n\nexport interface DrawingNodeProps extends GroupProps {\n paint?: SkPaint;\n}\n\nexport type ImageProps = DrawingNodeProps &\n RectDef & {\n fit?: Fit;\n image: SkImage | null;\n };\n\nexport type CircleProps = CircleDef & DrawingNodeProps;\n\nexport interface PathProps extends DrawingNodeProps {\n path: PathDef;\n start: number;\n end: number;\n stroke?: StrokeOpts;\n fillType?: SkEnum<typeof FillType>;\n}\n\nexport interface CustomDrawingNodeProps extends DrawingNodeProps {\n drawing: (ctx: DrawingContext) => void;\n}\n\nexport interface LineProps extends DrawingNodeProps {\n p1: Vector;\n p2: Vector;\n}\n\nexport type OvalProps = RectDef & DrawingNodeProps;\n\nexport type RectProps = RectDef & DrawingNodeProps;\n\nexport type RoundedRectProps = RRectDef & DrawingNodeProps;\n\nexport interface CubicBezierHandle {\n pos: Vector;\n c1: Vector;\n c2: Vector;\n}\n\nexport interface PatchProps extends DrawingNodeProps {\n colors?: Color[];\n patch: [\n CubicBezierHandle,\n CubicBezierHandle,\n CubicBezierHandle,\n CubicBezierHandle\n ];\n texture?: readonly [SkPoint, SkPoint, SkPoint, SkPoint];\n blendMode?: SkEnum<typeof BlendMode>;\n}\n\nexport interface VerticesProps extends DrawingNodeProps {\n colors?: string[];\n vertices: SkPoint[];\n textures?: SkPoint[];\n mode: SkEnum<typeof VertexMode>;\n blendMode?: SkEnum<typeof BlendMode>;\n indices?: number[];\n}\n\nexport interface ImageSVGProps extends DrawingNodeProps {\n svg: SkSVG | null;\n x?: number;\n y?: number;\n width?: number;\n height?: number;\n rect?: SkRect;\n}\n\nexport interface PictureProps extends DrawingNodeProps {\n picture: SkPicture;\n}\n\nexport interface PointsProps extends DrawingNodeProps {\n points: SkPoint[];\n mode: SkEnum<typeof PointMode>;\n}\n\nexport interface DiffRectProps extends DrawingNodeProps {\n inner: SkRRect;\n outer: SkRRect;\n}\n\nexport interface TextProps extends DrawingNodeProps {\n font: SkFont | null;\n text: string;\n x: number;\n y: number;\n}\n\nexport interface TextPathProps extends DrawingNodeProps {\n font: SkFont | null;\n text: string;\n path: PathDef;\n initialOffset: number;\n}\n\nexport interface TextBlobProps extends DrawingNodeProps {\n blob: SkTextBlob;\n x: number;\n y: number;\n}\n\nexport interface Glyph {\n id: number;\n pos: SkPoint;\n}\n\nexport interface GlyphsProps extends DrawingNodeProps {\n font: SkFont | null;\n x: number;\n y: number;\n glyphs: Glyph[];\n}\n\nexport interface BoxProps extends DrawingNodeProps {\n box: SkRRect | SkRect;\n}\n\nexport interface BoxShadowProps {\n dx?: number;\n dy?: number;\n spread?: number;\n blur: number;\n color?: Color;\n inner?: boolean;\n}\n"],"mappings":""}
|
@@ -3,7 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.mix = exports.clamp = void 0;
|
6
|
+
exports.saturate = exports.mix = exports.clamp = void 0;
|
7
7
|
|
8
8
|
/**
|
9
9
|
* Linear interpolation
|
@@ -34,4 +34,12 @@ const clamp = (value, lowerBound, upperBound) => {
|
|
34
34
|
};
|
35
35
|
|
36
36
|
exports.clamp = clamp;
|
37
|
+
|
38
|
+
const saturate = value => {
|
39
|
+
"worklet";
|
40
|
+
|
41
|
+
return clamp(value, 0, 1);
|
42
|
+
};
|
43
|
+
|
44
|
+
exports.saturate = saturate;
|
37
45
|
//# sourceMappingURL=Math.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["mix","value","x","y","clamp","lowerBound","upperBound","Math","min","max"],"sources":["Math.ts"],"sourcesContent":["/**\n * Linear interpolation\n * @param value\n * @param x\n * @param y\n */\nexport const mix = (value: number, x: number, y: number) => {\n \"worklet\";\n return x * (1 - value) + y * value;\n};\n\n/**\n * @summary Clamps a node with a lower and upper bound.\n * @example\n clamp(-1, 0, 100); // 0\n clamp(1, 0, 100); // 1\n clamp(101, 0, 100); // 100\n */\nexport const clamp = (\n value: number,\n lowerBound: number,\n upperBound: number\n) => {\n \"worklet\";\n return Math.min(Math.max(lowerBound, value), upperBound);\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,GAAG,GAAG,CAACC,KAAD,EAAgBC,CAAhB,EAA2BC,CAA3B,KAAyC;EAC1D;;EACA,OAAOD,CAAC,IAAI,IAAID,KAAR,CAAD,GAAkBE,CAAC,GAAGF,KAA7B;AACD,CAHM;AAKP;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACO,MAAMG,KAAK,GAAG,CACnBH,KADmB,EAEnBI,UAFmB,EAGnBC,UAHmB,KAIhB;EACH;;EACA,OAAOC,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAASJ,UAAT,EAAqBJ,KAArB,CAAT,EAAsCK,UAAtC,CAAP;AACD,CAPM"}
|
1
|
+
{"version":3,"names":["mix","value","x","y","clamp","lowerBound","upperBound","Math","min","max","saturate"],"sources":["Math.ts"],"sourcesContent":["/**\n * Linear interpolation\n * @param value\n * @param x\n * @param y\n */\nexport const mix = (value: number, x: number, y: number) => {\n \"worklet\";\n return x * (1 - value) + y * value;\n};\n\n/**\n * @summary Clamps a node with a lower and upper bound.\n * @example\n clamp(-1, 0, 100); // 0\n clamp(1, 0, 100); // 1\n clamp(101, 0, 100); // 100\n */\nexport const clamp = (\n value: number,\n lowerBound: number,\n upperBound: number\n) => {\n \"worklet\";\n return Math.min(Math.max(lowerBound, value), upperBound);\n};\n\nexport const saturate = (value: number) => {\n \"worklet\";\n return clamp(value, 0, 1);\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,GAAG,GAAG,CAACC,KAAD,EAAgBC,CAAhB,EAA2BC,CAA3B,KAAyC;EAC1D;;EACA,OAAOD,CAAC,IAAI,IAAID,KAAR,CAAD,GAAkBE,CAAC,GAAGF,KAA7B;AACD,CAHM;AAKP;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACO,MAAMG,KAAK,GAAG,CACnBH,KADmB,EAEnBI,UAFmB,EAGnBC,UAHmB,KAIhB;EACH;;EACA,OAAOC,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAASJ,UAAT,EAAqBJ,KAArB,CAAT,EAAsCK,UAAtC,CAAP;AACD,CAPM;;;;AASA,MAAMI,QAAQ,GAAIT,KAAD,IAAmB;EACzC;;EACA,OAAOG,KAAK,CAACH,KAAD,EAAQ,CAAR,EAAW,CAAX,CAAZ;AACD,CAHM"}
|
@@ -1,10 +1,10 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var
|
3
|
+
var _Platform = require("../Platform");
|
4
4
|
|
5
|
-
if (
|
5
|
+
if (_Platform.Platform.OS !== "web" && global.SkiaApi == null) {
|
6
6
|
// Initialize RN Skia
|
7
|
-
const SkiaModule =
|
7
|
+
const SkiaModule = _Platform.Platform.NativeModules.RNSkia;
|
8
8
|
|
9
9
|
if (SkiaModule == null || typeof SkiaModule.install !== "function") {
|
10
10
|
throw new Error("Native RNSkia Module cannot be found! Make sure you correctly " + "installed native dependencies and rebuilt your app.");
|