@shopify/react-native-skia 0.1.189 → 0.1.191
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/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.");
|