@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.
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.");