@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.
Files changed (112) hide show
  1. package/cpp/rnskia/dom/nodes/JsiImageSvgNode.h +24 -3
  2. package/cpp/rnskia/dom/nodes/JsiPathNode.h +11 -11
  3. package/jestSetup.js +17 -3
  4. package/lib/commonjs/Platform/IPlatform.d.ts +12 -0
  5. package/lib/commonjs/Platform/IPlatform.js +6 -0
  6. package/lib/commonjs/Platform/IPlatform.js.map +1 -0
  7. package/lib/commonjs/Platform/Platform.d.ts +2 -0
  8. package/lib/commonjs/Platform/Platform.js +24 -0
  9. package/lib/commonjs/Platform/Platform.js.map +1 -0
  10. package/lib/commonjs/Platform/Platform.web.d.ts +2 -0
  11. package/lib/commonjs/Platform/Platform.web.js +157 -0
  12. package/lib/commonjs/Platform/Platform.web.js.map +1 -0
  13. package/lib/commonjs/Platform/index.d.ts +1 -0
  14. package/lib/commonjs/Platform/index.js +19 -0
  15. package/lib/commonjs/Platform/index.js.map +1 -0
  16. package/lib/commonjs/dom/nodes/drawings/ImageSVG.d.ts +7 -2
  17. package/lib/commonjs/dom/nodes/drawings/ImageSVG.js +29 -7
  18. package/lib/commonjs/dom/nodes/drawings/ImageSVG.js.map +1 -1
  19. package/lib/commonjs/dom/nodes/drawings/PathNode.js +6 -2
  20. package/lib/commonjs/dom/nodes/drawings/PathNode.js.map +1 -1
  21. package/lib/commonjs/dom/types/Drawings.d.ts +7 -2
  22. package/lib/commonjs/dom/types/Drawings.js.map +1 -1
  23. package/lib/commonjs/renderer/processors/math/Math.d.ts +1 -0
  24. package/lib/commonjs/renderer/processors/math/Math.js +9 -1
  25. package/lib/commonjs/renderer/processors/math/Math.js.map +1 -1
  26. package/lib/commonjs/skia/NativeSetup.js +3 -3
  27. package/lib/commonjs/skia/NativeSetup.js.map +1 -1
  28. package/lib/commonjs/skia/core/Data.js +2 -8
  29. package/lib/commonjs/skia/core/Data.js.map +1 -1
  30. package/lib/commonjs/skia/core/Image.js +3 -3
  31. package/lib/commonjs/skia/core/Image.js.map +1 -1
  32. package/lib/commonjs/views/SkiaBaseWebView.d.ts +6 -1
  33. package/lib/commonjs/views/SkiaBaseWebView.js +41 -29
  34. package/lib/commonjs/views/SkiaBaseWebView.js.map +1 -1
  35. package/lib/commonjs/views/SkiaDomView.js +2 -2
  36. package/lib/commonjs/views/SkiaDomView.js.map +1 -1
  37. package/lib/commonjs/views/SkiaPictureView.js +2 -2
  38. package/lib/commonjs/views/SkiaPictureView.js.map +1 -1
  39. package/lib/commonjs/views/SkiaView.js +3 -2
  40. package/lib/commonjs/views/SkiaView.js.map +1 -1
  41. package/lib/commonjs/views/useTouchHandler.js +3 -3
  42. package/lib/commonjs/views/useTouchHandler.js.map +1 -1
  43. package/lib/commonjs/web/WithSkiaWeb.js +2 -2
  44. package/lib/commonjs/web/WithSkiaWeb.js.map +1 -1
  45. package/lib/module/Platform/IPlatform.d.ts +12 -0
  46. package/lib/module/Platform/IPlatform.js +2 -0
  47. package/lib/module/Platform/IPlatform.js.map +1 -0
  48. package/lib/module/Platform/Platform.d.ts +2 -0
  49. package/lib/module/Platform/Platform.js +14 -0
  50. package/lib/module/Platform/Platform.js.map +1 -0
  51. package/lib/module/Platform/Platform.web.d.ts +2 -0
  52. package/lib/module/Platform/Platform.web.js +143 -0
  53. package/lib/module/Platform/Platform.web.js.map +1 -0
  54. package/lib/module/Platform/index.d.ts +1 -0
  55. package/lib/module/Platform/index.js +2 -0
  56. package/lib/module/Platform/index.js.map +1 -0
  57. package/lib/module/dom/nodes/drawings/ImageSVG.d.ts +7 -2
  58. package/lib/module/dom/nodes/drawings/ImageSVG.js +29 -6
  59. package/lib/module/dom/nodes/drawings/ImageSVG.js.map +1 -1
  60. package/lib/module/dom/nodes/drawings/PathNode.js +5 -2
  61. package/lib/module/dom/nodes/drawings/PathNode.js.map +1 -1
  62. package/lib/module/dom/types/Drawings.d.ts +7 -2
  63. package/lib/module/dom/types/Drawings.js.map +1 -1
  64. package/lib/module/renderer/processors/math/Math.d.ts +1 -0
  65. package/lib/module/renderer/processors/math/Math.js +5 -0
  66. package/lib/module/renderer/processors/math/Math.js.map +1 -1
  67. package/lib/module/skia/NativeSetup.js +2 -2
  68. package/lib/module/skia/NativeSetup.js.map +1 -1
  69. package/lib/module/skia/core/Data.js +2 -7
  70. package/lib/module/skia/core/Data.js.map +1 -1
  71. package/lib/module/skia/core/Image.js +2 -2
  72. package/lib/module/skia/core/Image.js.map +1 -1
  73. package/lib/module/views/SkiaBaseWebView.d.ts +6 -1
  74. package/lib/module/views/SkiaBaseWebView.js +40 -28
  75. package/lib/module/views/SkiaBaseWebView.js.map +1 -1
  76. package/lib/module/views/SkiaDomView.js +2 -2
  77. package/lib/module/views/SkiaDomView.js.map +1 -1
  78. package/lib/module/views/SkiaPictureView.js +2 -2
  79. package/lib/module/views/SkiaPictureView.js.map +1 -1
  80. package/lib/module/views/SkiaView.js +2 -2
  81. package/lib/module/views/SkiaView.js.map +1 -1
  82. package/lib/module/views/useTouchHandler.js +3 -3
  83. package/lib/module/views/useTouchHandler.js.map +1 -1
  84. package/lib/module/web/WithSkiaWeb.js +1 -1
  85. package/lib/module/web/WithSkiaWeb.js.map +1 -1
  86. package/lib/typescript/src/Platform/IPlatform.d.ts +12 -0
  87. package/lib/typescript/src/Platform/Platform.d.ts +2 -0
  88. package/lib/typescript/src/Platform/Platform.web.d.ts +2 -0
  89. package/lib/typescript/src/Platform/index.d.ts +1 -0
  90. package/lib/typescript/src/dom/nodes/drawings/ImageSVG.d.ts +7 -2
  91. package/lib/typescript/src/dom/types/Drawings.d.ts +7 -2
  92. package/lib/typescript/src/renderer/processors/math/Math.d.ts +1 -0
  93. package/lib/typescript/src/views/SkiaBaseWebView.d.ts +6 -1
  94. package/package.json +12 -9
  95. package/scripts/install-npm.js +2 -3
  96. package/src/Platform/IPlatform.ts +20 -0
  97. package/src/Platform/Platform.ts +28 -0
  98. package/src/Platform/Platform.web.tsx +136 -0
  99. package/src/Platform/index.ts +1 -0
  100. package/src/dom/nodes/drawings/ImageSVG.ts +17 -6
  101. package/src/dom/nodes/drawings/PathNode.ts +10 -1
  102. package/src/dom/types/Drawings.ts +7 -2
  103. package/src/renderer/processors/math/Math.ts +5 -0
  104. package/src/skia/NativeSetup.ts +2 -2
  105. package/src/skia/core/Data.ts +4 -15
  106. package/src/skia/core/Image.ts +2 -3
  107. package/src/views/SkiaBaseWebView.tsx +33 -23
  108. package/src/views/SkiaDomView.tsx +2 -2
  109. package/src/views/SkiaPictureView.tsx +2 -2
  110. package/src/views/SkiaView.tsx +2 -2
  111. package/src/views/useTouchHandler.ts +3 -3
  112. 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
- context->getCanvas()->translate(rect->x(), rect->y());
25
- svgDom->setContainerSize(SkSize::Make(rect->width(), rect->height()));
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
- _startProp->isSet() && _startProp->value().getAsNumber() != 0.0;
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(_startProp->value().getAsNumber()) +
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(_startProp->value().getAsNumber()) +
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
- require("@shopify/react-native-skia/lib/commonjs/mock").Mock(global.CanvasKit)
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,6 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ //# sourceMappingURL=IPlatform.js.map
@@ -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,2 @@
1
+ import type { IPlatform } from "./IPlatform";
2
+ export declare const Platform: IPlatform;
@@ -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,2 @@
1
+ import type { IPlatform } from "./IPlatform";
2
+ export declare const Platform: IPlatform;
@@ -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, null> {
4
+ export declare class ImageSVGNode extends JsiDrawingNode<ImageSVGProps, Pick<ImageSVGProps, "x" | "y" | "width" | "height">> {
5
5
  constructor(ctx: NodeContext, props: ImageSVGProps);
6
- deriveProps(): null;
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
- return null;
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 (!svg) {
32
- return;
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
- } = (0, _datatypes.processRect)(this.Skia, this.props);
53
+ } = this.derived;
54
+
55
+ if (svg === null) {
56
+ return;
57
+ }
58
+
41
59
  canvas.save();
42
- canvas.translate(x, y);
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","draw","canvas","svg","x","y","width","height","processRect","Skia","save","translate","drawSvg","restore"],"sources":["ImageSVG.ts"],"sourcesContent":["import type { DrawingContext, ImageSVGProps } from \"../../types\";\nimport { NodeType } from \"../../types\";\nimport { processRect } from \"../datatypes\";\nimport { JsiDrawingNode } from \"../DrawingNode\";\nimport type { NodeContext } from \"../Node\";\n\nexport class ImageSVGNode extends JsiDrawingNode<ImageSVGProps, null> {\n constructor(ctx: NodeContext, props: ImageSVGProps) {\n super(ctx, NodeType.ImageSVG, props);\n }\n\n deriveProps() {\n return null;\n }\n\n draw({ canvas }: DrawingContext) {\n const { svg } = this.props;\n if (!svg) {\n return;\n }\n const { x, y, width, height } = processRect(this.Skia, this.props);\n canvas.save();\n canvas.translate(x, y);\n canvas.drawSvg(svg, width, height);\n canvas.restore();\n }\n}\n"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AAGO,MAAMA,YAAN,SAA2BC,2BAA3B,CAA+D;EACpEC,WAAW,CAACC,GAAD,EAAmBC,KAAnB,EAAyC;IAClD,MAAMD,GAAN,EAAWE,eAAA,CAASC,QAApB,EAA8BF,KAA9B;EACD;;EAEDG,WAAW,GAAG;IACZ,OAAO,IAAP;EACD;;EAEDC,IAAI,OAA6B;IAAA,IAA5B;MAAEC;IAAF,CAA4B;IAC/B,MAAM;MAAEC;IAAF,IAAU,KAAKN,KAArB;;IACA,IAAI,CAACM,GAAL,EAAU;MACR;IACD;;IACD,MAAM;MAAEC,CAAF;MAAKC,CAAL;MAAQC,KAAR;MAAeC;IAAf,IAA0B,IAAAC,sBAAA,EAAY,KAAKC,IAAjB,EAAuB,KAAKZ,KAA5B,CAAhC;IACAK,MAAM,CAACQ,IAAP;IACAR,MAAM,CAACS,SAAP,CAAiBP,CAAjB,EAAoBC,CAApB;IACAH,MAAM,CAACU,OAAP,CAAeT,GAAf,EAAoBG,KAApB,EAA2BC,MAA3B;IACAL,MAAM,CAACW,OAAP;EACD;;AAnBmE"}
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 { start, end, fillType, stroke, ...pathProps } = this.props;\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;;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;MAAEC,KAAF;MAASC,GAAT;MAAcC,QAAd;MAAwBC,MAAxB;MAAgC,GAAGC;IAAnC,IAAiD,KAAKR,KAA5D;IACA,MAAMS,cAAc,GAAGL,KAAK,KAAK,CAAjC;IACA,MAAMM,YAAY,GAAGL,GAAG,KAAK,CAA7B;IACA,MAAMM,gBAAgB,GAAGJ,MAAM,KAAKK,SAApC;IACA,MAAMC,WAAW,GAAG,CAAC,CAACP,QAAtB;IACA,MAAMQ,cAAc,GAClBL,cAAc,IAAIC,YAAlB,IAAkCC,gBAAlC,IAAsDE,WADxD;IAEA,MAAME,YAAY,GAAG,IAAAC,sBAAA,EAAY,KAAKC,IAAjB,EAAuBT,SAAS,CAACU,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,EAAQhB,QAAR,CAAT,CAAjB;IACD;;IACD,IAAIK,gBAAJ,EAAsB;MACpBO,IAAI,CAACX,MAAL,CAAYA,MAAZ;IACD;;IACD,IAAIE,cAAc,IAAIC,YAAtB,EAAoC;MAClCQ,IAAI,CAACK,IAAL,CAAUnB,KAAV,EAAiBC,GAAjB,EAAsB,KAAtB;IACD;;IACD,OAAOa,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;;AAhC6D"}
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 declare type ImageSVGProps = RectDef & {
53
+ export interface ImageSVGProps extends DrawingNodeProps {
54
54
  svg: SkSVG | null;
55
- } & DrawingNodeProps;
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 type ImageSVGProps = RectDef & {\n svg: SkSVG | null;\n} & DrawingNodeProps;\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":""}
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":""}
@@ -13,3 +13,4 @@ export declare const mix: (value: number, x: number, y: number) => number;
13
13
  clamp(101, 0, 100); // 100
14
14
  */
15
15
  export declare const clamp: (value: number, lowerBound: number, upperBound: number) => number;
16
+ export declare const saturate: (value: number) => number;
@@ -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 _reactNative = require("react-native");
3
+ var _Platform = require("../Platform");
4
4
 
5
- if (_reactNative.Platform.OS !== "web" && global.SkiaApi == null) {
5
+ if (_Platform.Platform.OS !== "web" && global.SkiaApi == null) {
6
6
  // Initialize RN Skia
7
- const SkiaModule = _reactNative.NativeModules.RNSkia;
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.");