@shopify/react-native-skia 0.1.190 → 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 (41) hide show
  1. package/cpp/rnskia/dom/nodes/JsiImageSvgNode.h +24 -3
  2. package/cpp/rnskia/dom/nodes/JsiPathNode.h +11 -11
  3. package/lib/commonjs/Platform/Platform.web.js +1 -1
  4. package/lib/commonjs/Platform/Platform.web.js.map +1 -1
  5. package/lib/commonjs/dom/nodes/drawings/ImageSVG.d.ts +7 -2
  6. package/lib/commonjs/dom/nodes/drawings/ImageSVG.js +29 -7
  7. package/lib/commonjs/dom/nodes/drawings/ImageSVG.js.map +1 -1
  8. package/lib/commonjs/dom/nodes/drawings/PathNode.js +6 -2
  9. package/lib/commonjs/dom/nodes/drawings/PathNode.js.map +1 -1
  10. package/lib/commonjs/dom/types/Drawings.d.ts +7 -2
  11. package/lib/commonjs/dom/types/Drawings.js.map +1 -1
  12. package/lib/commonjs/renderer/processors/math/Math.d.ts +1 -0
  13. package/lib/commonjs/renderer/processors/math/Math.js +9 -1
  14. package/lib/commonjs/renderer/processors/math/Math.js.map +1 -1
  15. package/lib/commonjs/views/SkiaBaseWebView.js +9 -4
  16. package/lib/commonjs/views/SkiaBaseWebView.js.map +1 -1
  17. package/lib/module/Platform/Platform.web.js +1 -1
  18. package/lib/module/Platform/Platform.web.js.map +1 -1
  19. package/lib/module/dom/nodes/drawings/ImageSVG.d.ts +7 -2
  20. package/lib/module/dom/nodes/drawings/ImageSVG.js +29 -6
  21. package/lib/module/dom/nodes/drawings/ImageSVG.js.map +1 -1
  22. package/lib/module/dom/nodes/drawings/PathNode.js +5 -2
  23. package/lib/module/dom/nodes/drawings/PathNode.js.map +1 -1
  24. package/lib/module/dom/types/Drawings.d.ts +7 -2
  25. package/lib/module/dom/types/Drawings.js.map +1 -1
  26. package/lib/module/renderer/processors/math/Math.d.ts +1 -0
  27. package/lib/module/renderer/processors/math/Math.js +5 -0
  28. package/lib/module/renderer/processors/math/Math.js.map +1 -1
  29. package/lib/module/views/SkiaBaseWebView.js +9 -4
  30. package/lib/module/views/SkiaBaseWebView.js.map +1 -1
  31. package/lib/typescript/src/dom/nodes/drawings/ImageSVG.d.ts +7 -2
  32. package/lib/typescript/src/dom/types/Drawings.d.ts +7 -2
  33. package/lib/typescript/src/renderer/processors/math/Math.d.ts +1 -0
  34. package/package.json +4 -1
  35. package/scripts/install-npm.js +2 -3
  36. package/src/Platform/Platform.web.tsx +1 -1
  37. package/src/dom/nodes/drawings/ImageSVG.ts +17 -6
  38. package/src/dom/nodes/drawings/PathNode.ts +10 -1
  39. package/src/dom/types/Drawings.ts +7 -2
  40. package/src/renderer/processors/math/Math.ts +5 -0
  41. package/src/views/SkiaBaseWebView.tsx +9 -4
@@ -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;
@@ -121,7 +121,7 @@ const View = _ref => {
121
121
  const cssStyles = (0, _react.useMemo)(() => {
122
122
  return { ...style,
123
123
  display: "flex",
124
- flexDirection: style.flexDirection || "column",
124
+ flexDirection: style.flexDirection || "inherit",
125
125
  flexWrap: style.flexWrap || "nowrap",
126
126
  justifyContent: style.justifyContent || "flex-start",
127
127
  alignItems: style.alignItems || "stretch",
@@ -1 +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 || \"column\",\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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"}
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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"}
@@ -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"}
@@ -110,12 +110,17 @@ class SkiaBaseWebView extends _react.default.Component {
110
110
  }
111
111
 
112
112
  componentWillUnmount() {
113
- var _this$_canvasRef$curr, _this$_canvasRef$curr2, _this$_canvasRef$curr3;
114
-
115
113
  this.unsubscribeAll();
116
- cancelAnimationFrame(this.requestId); // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
114
+ cancelAnimationFrame(this.requestId); // eslint-disable-next-line max-len
115
+ // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use
116
+ // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
117
+ // We delete the context, only if the context has been intialized
118
+
119
+ if (this._surface) {
120
+ var _this$_canvasRef$curr, _this$_canvasRef$curr2, _this$_canvasRef$curr3;
117
121
 
118
- (_this$_canvasRef$curr = this._canvasRef.current) === null || _this$_canvasRef$curr === void 0 ? void 0 : (_this$_canvasRef$curr2 = _this$_canvasRef$curr.getContext("webgl2")) === null || _this$_canvasRef$curr2 === void 0 ? void 0 : (_this$_canvasRef$curr3 = _this$_canvasRef$curr2.getExtension("WEBGL_lose_context")) === null || _this$_canvasRef$curr3 === void 0 ? void 0 : _this$_canvasRef$curr3.loseContext();
122
+ (_this$_canvasRef$curr = this._canvasRef.current) === null || _this$_canvasRef$curr === void 0 ? void 0 : (_this$_canvasRef$curr2 = _this$_canvasRef$curr.getContext("webgl2")) === null || _this$_canvasRef$curr2 === void 0 ? void 0 : (_this$_canvasRef$curr3 = _this$_canvasRef$curr2.getExtension("WEBGL_lose_context")) === null || _this$_canvasRef$curr3 === void 0 ? void 0 : _this$_canvasRef$curr3.loseContext();
123
+ }
119
124
  }
120
125
  /**
121
126
  * Creates a snapshot from the canvas in the surface
@@ -1 +1 @@
1
- {"version":3,"names":["pd","Platform","PixelRatio","SkiaBaseWebView","React","Component","constructor","props","createRef","createTouchHandler","TouchType","Start","Active","Cancelled","End","onLayoutEvent","bind","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","Error","_surface","JsiSkSurface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","getContext","getExtension","loseContext","makeImageSnapshot","rect","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","render","debug","viewProps","display","flex","onStart","onActive","onEnd","onCancel"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = Platform.PixelRatio;\n\nexport abstract class SkiaBaseWebView<\n TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n constructor(props: TProps) {\n super(props);\n this._mode = props.mode ?? \"default\";\n }\n\n private _surface: JsiSkSurface | null = null;\n private _unsubscriptions: Array<() => void> = [];\n private _touches: Array<TouchInfo> = [];\n private _canvas: SkCanvas | null = null;\n private _canvasRef = React.createRef<HTMLCanvasElement>();\n private _mode: DrawMode;\n private _redrawRequests = 0;\n private requestId = 0;\n\n protected width = 0;\n protected height = 0;\n\n private unsubscribeAll() {\n this._unsubscriptions.forEach((u) => u());\n this._unsubscriptions = [];\n }\n\n private onLayoutEvent(evt: LayoutChangeEvent) {\n const { CanvasKit } = global;\n // Reset canvas / surface on layout change\n const canvas = this._canvasRef.current;\n if (canvas) {\n this.width = canvas.clientWidth;\n this.height = canvas.clientHeight;\n canvas.width = this.width * pd;\n canvas.height = this.height * pd;\n const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\n if (!surface) {\n throw new Error(\"Could not create surface\");\n }\n this._surface = new JsiSkSurface(CanvasKit, surface);\n this._canvas = this._surface.getCanvas();\n this.redraw();\n }\n // Call onLayout callback if it exists\n if (this.props.onLayout) {\n this.props.onLayout(evt);\n }\n }\n\n protected getSize() {\n return { width: this.width, height: this.height };\n }\n\n componentDidMount() {\n // Start render loop\n this.tick();\n }\n\n componentDidUpdate() {\n this.redraw();\n }\n\n componentWillUnmount() {\n this.unsubscribeAll();\n cancelAnimationFrame(this.requestId);\n // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n this._canvasRef.current\n ?.getContext(\"webgl2\")\n ?.getExtension(\"WEBGL_lose_context\")\n ?.loseContext();\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n this._canvas!.clear(CanvasKit.TRANSPARENT);\n this.renderInCanvas(this._canvas!, []);\n this._surface?.ref.flush();\n return this._surface?.makeImageSnapshot(rect);\n }\n\n /**\n * Override to render\n */\n protected abstract renderInCanvas(\n canvas: SkCanvas,\n touches: TouchInfo[]\n ): void;\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n private tick() {\n if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n this._redrawRequests = 0;\n if (this._canvas) {\n const touches = [...this._touches];\n this._touches = [];\n const canvas = this._canvas!;\n canvas.clear(Float32Array.of(0, 0, 0, 0));\n canvas.save();\n canvas.scale(pd, pd);\n this.renderInCanvas(canvas, touches);\n canvas.restore();\n this._surface?.ref.flush();\n }\n }\n this.requestId = requestAnimationFrame(this.tick.bind(this));\n }\n\n public redraw() {\n this._redrawRequests++;\n }\n\n /**\n * Updates the drawing mode for the skia view. This is the same\n * as declaratively setting the mode property on the SkiaView.\n * There are two drawing modes, \"continuous\" and \"default\",\n * where the continuous mode will continuously redraw the view and\n * the default mode will only redraw when any of the regular react\n * properties are changed like size and margins.\n * @param mode Drawing mode to use.\n */\n public setDrawMode(mode: DrawMode) {\n this._mode = mode;\n this.tick();\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(_values: SkiaValue<unknown>[]) {\n // Unsubscribe from dependency values\n this.unsubscribeAll();\n // Register redraw dependencies on values\n _values.forEach((v) => {\n this._unsubscriptions.push(\n v.addListener(() => {\n this.redraw();\n })\n );\n });\n }\n\n private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n this._touches.push({\n id: evt.pointerId,\n x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n force: evt.pressure,\n type: touchType,\n timestamp: Date.now(),\n });\n this.redraw();\n }\n\n createTouchHandler(touchType: TouchType) {\n return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n }\n\n private onStart = this.createTouchHandler(TouchType.Start);\n private onActive = this.createTouchHandler(TouchType.Active);\n private onCancel = this.createTouchHandler(TouchType.Cancelled);\n private onEnd = this.createTouchHandler(TouchType.End);\n private onLayout = this.onLayoutEvent.bind(this);\n\n render() {\n const { mode, debug = false, ...viewProps } = this.props;\n return (\n <Platform.View {...viewProps} onLayout={this.onLayout}>\n <canvas\n ref={this._canvasRef}\n style={{ display: \"flex\", flex: 1 }}\n onPointerDown={this.onStart}\n onPointerMove={this.onActive}\n onPointerUp={this.onEnd}\n onPointerCancel={this.onCancel}\n onPointerLeave={this.onEnd}\n onPointerOut={this.onEnd}\n />\n </Platform.View>\n );\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"names":["pd","Platform","PixelRatio","SkiaBaseWebView","React","Component","constructor","props","createRef","createTouchHandler","TouchType","Start","Active","Cancelled","End","onLayoutEvent","bind","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","Error","_surface","JsiSkSurface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","getContext","getExtension","loseContext","makeImageSnapshot","rect","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","render","debug","viewProps","display","flex","onStart","onActive","onEnd","onCancel"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = Platform.PixelRatio;\n\nexport abstract class SkiaBaseWebView<\n TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n constructor(props: TProps) {\n super(props);\n this._mode = props.mode ?? \"default\";\n }\n\n private _surface: JsiSkSurface | null = null;\n private _unsubscriptions: Array<() => void> = [];\n private _touches: Array<TouchInfo> = [];\n private _canvas: SkCanvas | null = null;\n private _canvasRef = React.createRef<HTMLCanvasElement>();\n private _mode: DrawMode;\n private _redrawRequests = 0;\n private requestId = 0;\n\n protected width = 0;\n protected height = 0;\n\n private unsubscribeAll() {\n this._unsubscriptions.forEach((u) => u());\n this._unsubscriptions = [];\n }\n\n private onLayoutEvent(evt: LayoutChangeEvent) {\n const { CanvasKit } = global;\n // Reset canvas / surface on layout change\n const canvas = this._canvasRef.current;\n if (canvas) {\n this.width = canvas.clientWidth;\n this.height = canvas.clientHeight;\n canvas.width = this.width * pd;\n canvas.height = this.height * pd;\n const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\n if (!surface) {\n throw new Error(\"Could not create surface\");\n }\n this._surface = new JsiSkSurface(CanvasKit, surface);\n this._canvas = this._surface.getCanvas();\n this.redraw();\n }\n // Call onLayout callback if it exists\n if (this.props.onLayout) {\n this.props.onLayout(evt);\n }\n }\n\n protected getSize() {\n return { width: this.width, height: this.height };\n }\n\n componentDidMount() {\n // Start render loop\n this.tick();\n }\n\n componentDidUpdate() {\n this.redraw();\n }\n\n componentWillUnmount() {\n this.unsubscribeAll();\n cancelAnimationFrame(this.requestId);\n // eslint-disable-next-line max-len\n // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use\n // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n // We delete the context, only if the context has been intialized\n if (this._surface) {\n this._canvasRef.current\n ?.getContext(\"webgl2\")\n ?.getExtension(\"WEBGL_lose_context\")\n ?.loseContext();\n }\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n this._canvas!.clear(CanvasKit.TRANSPARENT);\n this.renderInCanvas(this._canvas!, []);\n this._surface?.ref.flush();\n return this._surface?.makeImageSnapshot(rect);\n }\n\n /**\n * Override to render\n */\n protected abstract renderInCanvas(\n canvas: SkCanvas,\n touches: TouchInfo[]\n ): void;\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n private tick() {\n if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n this._redrawRequests = 0;\n if (this._canvas) {\n const touches = [...this._touches];\n this._touches = [];\n const canvas = this._canvas!;\n canvas.clear(Float32Array.of(0, 0, 0, 0));\n canvas.save();\n canvas.scale(pd, pd);\n this.renderInCanvas(canvas, touches);\n canvas.restore();\n this._surface?.ref.flush();\n }\n }\n this.requestId = requestAnimationFrame(this.tick.bind(this));\n }\n\n public redraw() {\n this._redrawRequests++;\n }\n\n /**\n * Updates the drawing mode for the skia view. This is the same\n * as declaratively setting the mode property on the SkiaView.\n * There are two drawing modes, \"continuous\" and \"default\",\n * where the continuous mode will continuously redraw the view and\n * the default mode will only redraw when any of the regular react\n * properties are changed like size and margins.\n * @param mode Drawing mode to use.\n */\n public setDrawMode(mode: DrawMode) {\n this._mode = mode;\n this.tick();\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(_values: SkiaValue<unknown>[]) {\n // Unsubscribe from dependency values\n this.unsubscribeAll();\n // Register redraw dependencies on values\n _values.forEach((v) => {\n this._unsubscriptions.push(\n v.addListener(() => {\n this.redraw();\n })\n );\n });\n }\n\n private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n this._touches.push({\n id: evt.pointerId,\n x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n force: evt.pressure,\n type: touchType,\n timestamp: Date.now(),\n });\n this.redraw();\n }\n\n createTouchHandler(touchType: TouchType) {\n return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n }\n\n private onStart = this.createTouchHandler(TouchType.Start);\n private onActive = this.createTouchHandler(TouchType.Active);\n private onCancel = this.createTouchHandler(TouchType.Cancelled);\n private onEnd = this.createTouchHandler(TouchType.End);\n private onLayout = this.onLayoutEvent.bind(this);\n\n render() {\n const { mode, debug = false, ...viewProps } = this.props;\n return (\n <Platform.View {...viewProps} onLayout={this.onLayout}>\n <canvas\n ref={this._canvasRef}\n style={{ display: \"flex\", flex: 1 }}\n onPointerDown={this.onStart}\n onPointerMove={this.onActive}\n onPointerUp={this.onEnd}\n onPointerCancel={this.onCancel}\n onPointerLeave={this.onEnd}\n onPointerOut={this.onEnd}\n />\n </Platform.View>\n );\n }\n}\n"],"mappings":"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"}
@@ -108,7 +108,7 @@ const View = _ref => {
108
108
  const cssStyles = useMemo(() => {
109
109
  return { ...style,
110
110
  display: "flex",
111
- flexDirection: style.flexDirection || "column",
111
+ flexDirection: style.flexDirection || "inherit",
112
112
  flexWrap: style.flexWrap || "nowrap",
113
113
  justifyContent: style.justifyContent || "flex-start",
114
114
  alignItems: style.alignItems || "stretch",
@@ -1 +1 @@
1
- {"version":3,"names":["React","useLayoutEffect","useMemo","useRef","isRNModule","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","current","observe","unobserve","View","children","style","rawStyle","cssStyles","display","flexDirection","flexWrap","justifyContent","alignItems","alignContent","Platform","OS","PixelRatio","devicePixelRatio","requireNativeComponent","resolveAsset","source","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 || \"column\",\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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"}
1
+ {"version":3,"names":["React","useLayoutEffect","useMemo","useRef","isRNModule","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","current","observe","unobserve","View","children","style","rawStyle","cssStyles","display","flexDirection","flexWrap","justifyContent","alignItems","alignContent","Platform","OS","PixelRatio","devicePixelRatio","requireNativeComponent","resolveAsset","source","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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"}
@@ -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
  }
@@ -1,5 +1,4 @@
1
1
  import { NodeType } from "../../types";
2
- import { processRect } from "../datatypes";
3
2
  import { JsiDrawingNode } from "../DrawingNode";
4
3
  export class ImageSVGNode extends JsiDrawingNode {
5
4
  constructor(ctx, props) {
@@ -7,7 +6,22 @@ export class ImageSVGNode extends JsiDrawingNode {
7
6
  }
8
7
 
9
8
  deriveProps() {
10
- return null;
9
+ if (this.props.rect) {
10
+ return this.props.rect;
11
+ }
12
+
13
+ const {
14
+ x,
15
+ y,
16
+ width,
17
+ height
18
+ } = this.props;
19
+ return {
20
+ x,
21
+ y,
22
+ width,
23
+ height
24
+ };
11
25
  }
12
26
 
13
27
  draw(_ref) {
@@ -18,8 +32,8 @@ export class ImageSVGNode extends JsiDrawingNode {
18
32
  svg
19
33
  } = this.props;
20
34
 
21
- if (!svg) {
22
- return;
35
+ if (!this.derived) {
36
+ throw new Error("ImageSVGNode: derived props unresolved");
23
37
  }
24
38
 
25
39
  const {
@@ -27,9 +41,18 @@ export class ImageSVGNode extends JsiDrawingNode {
27
41
  y,
28
42
  width,
29
43
  height
30
- } = processRect(this.Skia, this.props);
44
+ } = this.derived;
45
+
46
+ if (svg === null) {
47
+ return;
48
+ }
49
+
31
50
  canvas.save();
32
- canvas.translate(x, y);
51
+
52
+ if (x && y) {
53
+ canvas.translate(x, y);
54
+ }
55
+
33
56
  canvas.drawSvg(svg, width, height);
34
57
  canvas.restore();
35
58
  }
@@ -1 +1 @@
1
- {"version":3,"names":["NodeType","processRect","JsiDrawingNode","ImageSVGNode","constructor","ctx","props","ImageSVG","deriveProps","draw","canvas","svg","x","y","width","height","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,SAASA,QAAT,QAAyB,aAAzB;AACA,SAASC,WAAT,QAA4B,cAA5B;AACA,SAASC,cAAT,QAA+B,gBAA/B;AAGA,OAAO,MAAMC,YAAN,SAA2BD,cAA3B,CAA+D;EACpEE,WAAW,CAACC,GAAD,EAAmBC,KAAnB,EAAyC;IAClD,MAAMD,GAAN,EAAWL,QAAQ,CAACO,QAApB,EAA8BD,KAA9B;EACD;;EAEDE,WAAW,GAAG;IACZ,OAAO,IAAP;EACD;;EAEDC,IAAI,OAA6B;IAAA,IAA5B;MAAEC;IAAF,CAA4B;IAC/B,MAAM;MAAEC;IAAF,IAAU,KAAKL,KAArB;;IACA,IAAI,CAACK,GAAL,EAAU;MACR;IACD;;IACD,MAAM;MAAEC,CAAF;MAAKC,CAAL;MAAQC,KAAR;MAAeC;IAAf,IAA0Bd,WAAW,CAAC,KAAKe,IAAN,EAAY,KAAKV,KAAjB,CAA3C;IACAI,MAAM,CAACO,IAAP;IACAP,MAAM,CAACQ,SAAP,CAAiBN,CAAjB,EAAoBC,CAApB;IACAH,MAAM,CAACS,OAAP,CAAeR,GAAf,EAAoBG,KAApB,EAA2BC,MAA3B;IACAL,MAAM,CAACU,OAAP;EACD;;AAnBmE"}
1
+ {"version":3,"names":["NodeType","JsiDrawingNode","ImageSVGNode","constructor","ctx","props","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,SAASA,QAAT,QAAyB,aAAzB;AACA,SAASC,cAAT,QAA+B,gBAA/B;AAGA,OAAO,MAAMC,YAAN,SAA2BD,cAA3B,CAGL;EACAE,WAAW,CAACC,GAAD,EAAmBC,KAAnB,EAAyC;IAClD,MAAMD,GAAN,EAAWJ,QAAQ,CAACM,QAApB,EAA8BD,KAA9B;EACD;;EAEDE,WAAW,GAAG;IACZ,IAAI,KAAKF,KAAL,CAAWG,IAAf,EAAqB;MACnB,OAAO,KAAKH,KAAL,CAAWG,IAAlB;IACD;;IACD,MAAM;MAAEC,CAAF;MAAKC,CAAL;MAAQC,KAAR;MAAeC;IAAf,IAA0B,KAAKP,KAArC;IACA,OAAO;MAAEI,CAAF;MAAKC,CAAL;MAAQC,KAAR;MAAeC;IAAf,CAAP;EACD;;EAEDC,IAAI,OAA6B;IAAA,IAA5B;MAAEC;IAAF,CAA4B;IAC/B,MAAM;MAAEC;IAAF,IAAU,KAAKV,KAArB;;IACA,IAAI,CAAC,KAAKW,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"}
@@ -1,3 +1,4 @@
1
+ import { saturate } from "../../../renderer/processors/math";
1
2
  import { FillType } from "../../../skia/types";
2
3
  import { NodeType } from "../../types";
3
4
  import { enumKey, processPath } from "../datatypes";
@@ -9,12 +10,14 @@ export class PathNode extends JsiDrawingNode {
9
10
 
10
11
  deriveProps() {
11
12
  const {
12
- start,
13
- end,
13
+ start: trimStart,
14
+ end: trimEnd,
14
15
  fillType,
15
16
  stroke,
16
17
  ...pathProps
17
18
  } = this.props;
19
+ const start = saturate(trimStart);
20
+ const end = saturate(trimEnd);
18
21
  const hasStartOffset = start !== 0;
19
22
  const hasEndOffset = end !== 1;
20
23
  const hasStrokeOptions = stroke !== undefined;
@@ -1 +1 @@
1
- {"version":3,"names":["FillType","NodeType","enumKey","processPath","JsiDrawingNode","PathNode","constructor","ctx","props","Path","deriveProps","start","end","fillType","stroke","pathProps","hasStartOffset","hasEndOffset","hasStrokeOptions","undefined","hasFillType","willMutatePath","pristinePath","Skia","path","copy","setFillType","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,SAASA,QAAT,QAAyB,qBAAzB;AAGA,SAASC,QAAT,QAAyB,aAAzB;AACA,SAASC,OAAT,EAAkBC,WAAlB,QAAqC,cAArC;AACA,SAASC,cAAT,QAA+B,gBAA/B;AAGA,OAAO,MAAMC,QAAN,SAAuBD,cAAvB,CAAyD;EAC9DE,WAAW,CAACC,GAAD,EAAmBC,KAAnB,EAAqC;IAC9C,MAAMD,GAAN,EAAWN,QAAQ,CAACQ,IAApB,EAA0BD,KAA1B;EACD;;EAESE,WAAW,GAAG;IACtB,MAAM;MAAEC,KAAF;MAASC,GAAT;MAAcC,QAAd;MAAwBC,MAAxB;MAAgC,GAAGC;IAAnC,IAAiD,KAAKP,KAA5D;IACA,MAAMQ,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,GAAGnB,WAAW,CAAC,KAAKoB,IAAN,EAAYR,SAAS,CAACS,IAAtB,CAAhC;IACA,MAAMA,IAAI,GAAGH,cAAc,GAAGC,YAAY,CAACG,IAAb,EAAH,GAAyBH,YAApD;;IACA,IAAIF,WAAJ,EAAiB;MACfI,IAAI,CAACE,WAAL,CAAiB1B,QAAQ,CAACE,OAAO,CAACW,QAAD,CAAR,CAAzB;IACD;;IACD,IAAIK,gBAAJ,EAAsB;MACpBM,IAAI,CAACV,MAAL,CAAYA,MAAZ;IACD;;IACD,IAAIE,cAAc,IAAIC,YAAtB,EAAoC;MAClCO,IAAI,CAACG,IAAL,CAAUhB,KAAV,EAAiBC,GAAjB,EAAsB,KAAtB;IACD;;IACD,OAAOY,IAAP;EACD;;EAEDI,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":["saturate","FillType","NodeType","enumKey","processPath","JsiDrawingNode","PathNode","constructor","ctx","props","Path","deriveProps","start","trimStart","end","trimEnd","fillType","stroke","pathProps","hasStartOffset","hasEndOffset","hasStrokeOptions","undefined","hasFillType","willMutatePath","pristinePath","Skia","path","copy","setFillType","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,SAASA,QAAT,QAAyB,mCAAzB;AACA,SAASC,QAAT,QAAyB,qBAAzB;AAGA,SAASC,QAAT,QAAyB,aAAzB;AACA,SAASC,OAAT,EAAkBC,WAAlB,QAAqC,cAArC;AACA,SAASC,cAAT,QAA+B,gBAA/B;AAGA,OAAO,MAAMC,QAAN,SAAuBD,cAAvB,CAAyD;EAC9DE,WAAW,CAACC,GAAD,EAAmBC,KAAnB,EAAqC;IAC9C,MAAMD,GAAN,EAAWN,QAAQ,CAACQ,IAApB,EAA0BD,KAA1B;EACD;;EAESE,WAAW,GAAG;IACtB,MAAM;MACJC,KAAK,EAAEC,SADH;MAEJC,GAAG,EAAEC,OAFD;MAGJC,QAHI;MAIJC,MAJI;MAKJ,GAAGC;IALC,IAMF,KAAKT,KANT;IAOA,MAAMG,KAAK,GAAGZ,QAAQ,CAACa,SAAD,CAAtB;IACA,MAAMC,GAAG,GAAGd,QAAQ,CAACe,OAAD,CAApB;IACA,MAAMI,cAAc,GAAGP,KAAK,KAAK,CAAjC;IACA,MAAMQ,YAAY,GAAGN,GAAG,KAAK,CAA7B;IACA,MAAMO,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,GAAGrB,WAAW,CAAC,KAAKsB,IAAN,EAAYR,SAAS,CAACS,IAAtB,CAAhC;IACA,MAAMA,IAAI,GAAGH,cAAc,GAAGC,YAAY,CAACG,IAAb,EAAH,GAAyBH,YAApD;;IACA,IAAIF,WAAJ,EAAiB;MACfI,IAAI,CAACE,WAAL,CAAiB5B,QAAQ,CAACE,OAAO,CAACa,QAAD,CAAR,CAAzB;IACD;;IACD,IAAIK,gBAAJ,EAAsB;MACpBM,IAAI,CAACV,MAAL,CAAYA,MAAZ;IACD;;IACD,IAAIE,cAAc,IAAIC,YAAtB,EAAoC;MAClCO,IAAI,CAACG,IAAL,CAAUlB,KAAV,EAAiBE,GAAjB,EAAsB,KAAtB;IACD;;IACD,OAAOa,IAAP;EACD;;EAEDI,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;
@@ -22,4 +22,9 @@ export const clamp = (value, lowerBound, upperBound) => {
22
22
 
23
23
  return Math.min(Math.max(lowerBound, value), upperBound);
24
24
  };
25
+ export const saturate = value => {
26
+ "worklet";
27
+
28
+ return clamp(value, 0, 1);
29
+ };
25
30
  //# 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;AACA,OAAO,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;;AACA,OAAO,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;AACA,OAAO,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;;AACA,OAAO,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;AASP,OAAO,MAAMI,QAAQ,GAAIT,KAAD,IAAmB;EACzC;;EACA,OAAOG,KAAK,CAACH,KAAD,EAAQ,CAAR,EAAW,CAAX,CAAZ;AACD,CAHM"}
@@ -99,12 +99,17 @@ export class SkiaBaseWebView extends React.Component {
99
99
  }
100
100
 
101
101
  componentWillUnmount() {
102
- var _this$_canvasRef$curr, _this$_canvasRef$curr2, _this$_canvasRef$curr3;
103
-
104
102
  this.unsubscribeAll();
105
- cancelAnimationFrame(this.requestId); // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
103
+ cancelAnimationFrame(this.requestId); // eslint-disable-next-line max-len
104
+ // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use
105
+ // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
106
+ // We delete the context, only if the context has been intialized
107
+
108
+ if (this._surface) {
109
+ var _this$_canvasRef$curr, _this$_canvasRef$curr2, _this$_canvasRef$curr3;
106
110
 
107
- (_this$_canvasRef$curr = this._canvasRef.current) === null || _this$_canvasRef$curr === void 0 ? void 0 : (_this$_canvasRef$curr2 = _this$_canvasRef$curr.getContext("webgl2")) === null || _this$_canvasRef$curr2 === void 0 ? void 0 : (_this$_canvasRef$curr3 = _this$_canvasRef$curr2.getExtension("WEBGL_lose_context")) === null || _this$_canvasRef$curr3 === void 0 ? void 0 : _this$_canvasRef$curr3.loseContext();
111
+ (_this$_canvasRef$curr = this._canvasRef.current) === null || _this$_canvasRef$curr === void 0 ? void 0 : (_this$_canvasRef$curr2 = _this$_canvasRef$curr.getContext("webgl2")) === null || _this$_canvasRef$curr2 === void 0 ? void 0 : (_this$_canvasRef$curr3 = _this$_canvasRef$curr2.getExtension("WEBGL_lose_context")) === null || _this$_canvasRef$curr3 === void 0 ? void 0 : _this$_canvasRef$curr3.loseContext();
112
+ }
108
113
  }
109
114
  /**
110
115
  * Creates a snapshot from the canvas in the surface
@@ -1 +1 @@
1
- {"version":3,"names":["React","JsiSkSurface","Platform","TouchType","pd","PixelRatio","SkiaBaseWebView","Component","constructor","props","createRef","createTouchHandler","Start","Active","Cancelled","End","onLayoutEvent","bind","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","getContext","getExtension","loseContext","makeImageSnapshot","rect","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","render","debug","viewProps","display","flex","onStart","onActive","onEnd","onCancel"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = Platform.PixelRatio;\n\nexport abstract class SkiaBaseWebView<\n TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n constructor(props: TProps) {\n super(props);\n this._mode = props.mode ?? \"default\";\n }\n\n private _surface: JsiSkSurface | null = null;\n private _unsubscriptions: Array<() => void> = [];\n private _touches: Array<TouchInfo> = [];\n private _canvas: SkCanvas | null = null;\n private _canvasRef = React.createRef<HTMLCanvasElement>();\n private _mode: DrawMode;\n private _redrawRequests = 0;\n private requestId = 0;\n\n protected width = 0;\n protected height = 0;\n\n private unsubscribeAll() {\n this._unsubscriptions.forEach((u) => u());\n this._unsubscriptions = [];\n }\n\n private onLayoutEvent(evt: LayoutChangeEvent) {\n const { CanvasKit } = global;\n // Reset canvas / surface on layout change\n const canvas = this._canvasRef.current;\n if (canvas) {\n this.width = canvas.clientWidth;\n this.height = canvas.clientHeight;\n canvas.width = this.width * pd;\n canvas.height = this.height * pd;\n const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\n if (!surface) {\n throw new Error(\"Could not create surface\");\n }\n this._surface = new JsiSkSurface(CanvasKit, surface);\n this._canvas = this._surface.getCanvas();\n this.redraw();\n }\n // Call onLayout callback if it exists\n if (this.props.onLayout) {\n this.props.onLayout(evt);\n }\n }\n\n protected getSize() {\n return { width: this.width, height: this.height };\n }\n\n componentDidMount() {\n // Start render loop\n this.tick();\n }\n\n componentDidUpdate() {\n this.redraw();\n }\n\n componentWillUnmount() {\n this.unsubscribeAll();\n cancelAnimationFrame(this.requestId);\n // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n this._canvasRef.current\n ?.getContext(\"webgl2\")\n ?.getExtension(\"WEBGL_lose_context\")\n ?.loseContext();\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n this._canvas!.clear(CanvasKit.TRANSPARENT);\n this.renderInCanvas(this._canvas!, []);\n this._surface?.ref.flush();\n return this._surface?.makeImageSnapshot(rect);\n }\n\n /**\n * Override to render\n */\n protected abstract renderInCanvas(\n canvas: SkCanvas,\n touches: TouchInfo[]\n ): void;\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n private tick() {\n if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n this._redrawRequests = 0;\n if (this._canvas) {\n const touches = [...this._touches];\n this._touches = [];\n const canvas = this._canvas!;\n canvas.clear(Float32Array.of(0, 0, 0, 0));\n canvas.save();\n canvas.scale(pd, pd);\n this.renderInCanvas(canvas, touches);\n canvas.restore();\n this._surface?.ref.flush();\n }\n }\n this.requestId = requestAnimationFrame(this.tick.bind(this));\n }\n\n public redraw() {\n this._redrawRequests++;\n }\n\n /**\n * Updates the drawing mode for the skia view. This is the same\n * as declaratively setting the mode property on the SkiaView.\n * There are two drawing modes, \"continuous\" and \"default\",\n * where the continuous mode will continuously redraw the view and\n * the default mode will only redraw when any of the regular react\n * properties are changed like size and margins.\n * @param mode Drawing mode to use.\n */\n public setDrawMode(mode: DrawMode) {\n this._mode = mode;\n this.tick();\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(_values: SkiaValue<unknown>[]) {\n // Unsubscribe from dependency values\n this.unsubscribeAll();\n // Register redraw dependencies on values\n _values.forEach((v) => {\n this._unsubscriptions.push(\n v.addListener(() => {\n this.redraw();\n })\n );\n });\n }\n\n private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n this._touches.push({\n id: evt.pointerId,\n x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n force: evt.pressure,\n type: touchType,\n timestamp: Date.now(),\n });\n this.redraw();\n }\n\n createTouchHandler(touchType: TouchType) {\n return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n }\n\n private onStart = this.createTouchHandler(TouchType.Start);\n private onActive = this.createTouchHandler(TouchType.Active);\n private onCancel = this.createTouchHandler(TouchType.Cancelled);\n private onEnd = this.createTouchHandler(TouchType.End);\n private onLayout = this.onLayoutEvent.bind(this);\n\n render() {\n const { mode, debug = false, ...viewProps } = this.props;\n return (\n <Platform.View {...viewProps} onLayout={this.onLayout}>\n <canvas\n ref={this._canvasRef}\n style={{ display: \"flex\", flex: 1 }}\n onPointerDown={this.onStart}\n onPointerMove={this.onActive}\n onPointerUp={this.onEnd}\n onPointerCancel={this.onCancel}\n onPointerLeave={this.onEnd}\n onPointerOut={this.onEnd}\n />\n </Platform.View>\n );\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"names":["React","JsiSkSurface","Platform","TouchType","pd","PixelRatio","SkiaBaseWebView","Component","constructor","props","createRef","createTouchHandler","Start","Active","Cancelled","End","onLayoutEvent","bind","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","getContext","getExtension","loseContext","makeImageSnapshot","rect","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","render","debug","viewProps","display","flex","onStart","onActive","onEnd","onCancel"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = Platform.PixelRatio;\n\nexport abstract class SkiaBaseWebView<\n TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n constructor(props: TProps) {\n super(props);\n this._mode = props.mode ?? \"default\";\n }\n\n private _surface: JsiSkSurface | null = null;\n private _unsubscriptions: Array<() => void> = [];\n private _touches: Array<TouchInfo> = [];\n private _canvas: SkCanvas | null = null;\n private _canvasRef = React.createRef<HTMLCanvasElement>();\n private _mode: DrawMode;\n private _redrawRequests = 0;\n private requestId = 0;\n\n protected width = 0;\n protected height = 0;\n\n private unsubscribeAll() {\n this._unsubscriptions.forEach((u) => u());\n this._unsubscriptions = [];\n }\n\n private onLayoutEvent(evt: LayoutChangeEvent) {\n const { CanvasKit } = global;\n // Reset canvas / surface on layout change\n const canvas = this._canvasRef.current;\n if (canvas) {\n this.width = canvas.clientWidth;\n this.height = canvas.clientHeight;\n canvas.width = this.width * pd;\n canvas.height = this.height * pd;\n const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\n if (!surface) {\n throw new Error(\"Could not create surface\");\n }\n this._surface = new JsiSkSurface(CanvasKit, surface);\n this._canvas = this._surface.getCanvas();\n this.redraw();\n }\n // Call onLayout callback if it exists\n if (this.props.onLayout) {\n this.props.onLayout(evt);\n }\n }\n\n protected getSize() {\n return { width: this.width, height: this.height };\n }\n\n componentDidMount() {\n // Start render loop\n this.tick();\n }\n\n componentDidUpdate() {\n this.redraw();\n }\n\n componentWillUnmount() {\n this.unsubscribeAll();\n cancelAnimationFrame(this.requestId);\n // eslint-disable-next-line max-len\n // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use\n // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n // We delete the context, only if the context has been intialized\n if (this._surface) {\n this._canvasRef.current\n ?.getContext(\"webgl2\")\n ?.getExtension(\"WEBGL_lose_context\")\n ?.loseContext();\n }\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n this._canvas!.clear(CanvasKit.TRANSPARENT);\n this.renderInCanvas(this._canvas!, []);\n this._surface?.ref.flush();\n return this._surface?.makeImageSnapshot(rect);\n }\n\n /**\n * Override to render\n */\n protected abstract renderInCanvas(\n canvas: SkCanvas,\n touches: TouchInfo[]\n ): void;\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n private tick() {\n if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n this._redrawRequests = 0;\n if (this._canvas) {\n const touches = [...this._touches];\n this._touches = [];\n const canvas = this._canvas!;\n canvas.clear(Float32Array.of(0, 0, 0, 0));\n canvas.save();\n canvas.scale(pd, pd);\n this.renderInCanvas(canvas, touches);\n canvas.restore();\n this._surface?.ref.flush();\n }\n }\n this.requestId = requestAnimationFrame(this.tick.bind(this));\n }\n\n public redraw() {\n this._redrawRequests++;\n }\n\n /**\n * Updates the drawing mode for the skia view. This is the same\n * as declaratively setting the mode property on the SkiaView.\n * There are two drawing modes, \"continuous\" and \"default\",\n * where the continuous mode will continuously redraw the view and\n * the default mode will only redraw when any of the regular react\n * properties are changed like size and margins.\n * @param mode Drawing mode to use.\n */\n public setDrawMode(mode: DrawMode) {\n this._mode = mode;\n this.tick();\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(_values: SkiaValue<unknown>[]) {\n // Unsubscribe from dependency values\n this.unsubscribeAll();\n // Register redraw dependencies on values\n _values.forEach((v) => {\n this._unsubscriptions.push(\n v.addListener(() => {\n this.redraw();\n })\n );\n });\n }\n\n private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n this._touches.push({\n id: evt.pointerId,\n x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n force: evt.pressure,\n type: touchType,\n timestamp: Date.now(),\n });\n this.redraw();\n }\n\n createTouchHandler(touchType: TouchType) {\n return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n }\n\n private onStart = this.createTouchHandler(TouchType.Start);\n private onActive = this.createTouchHandler(TouchType.Active);\n private onCancel = this.createTouchHandler(TouchType.Cancelled);\n private onEnd = this.createTouchHandler(TouchType.End);\n private onLayout = this.onLayoutEvent.bind(this);\n\n render() {\n const { mode, debug = false, ...viewProps } = this.props;\n return (\n <Platform.View {...viewProps} onLayout={this.onLayout}>\n <canvas\n ref={this._canvasRef}\n style={{ display: \"flex\", flex: 1 }}\n onPointerDown={this.onStart}\n onPointerMove={this.onActive}\n onPointerUp={this.onEnd}\n onPointerCancel={this.onCancel}\n onPointerLeave={this.onEnd}\n onPointerOut={this.onEnd}\n />\n </Platform.View>\n );\n }\n}\n"],"mappings":"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"}
@@ -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
  }
@@ -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
  }
@@ -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;
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "setup-skia-web": "./scripts/setup-canvaskit.js"
8
8
  },
9
9
  "title": "React Native Skia",
10
- "version": "0.1.190",
10
+ "version": "0.1.191",
11
11
  "description": "High-performance React Native Graphics using Skia",
12
12
  "main": "lib/module/index.js",
13
13
  "files": [
@@ -76,6 +76,9 @@
76
76
  "peerDependenciesMeta": {
77
77
  "react-native-reanimated": {
78
78
  "optional": true
79
+ },
80
+ "react-native": {
81
+ "optional": true
79
82
  }
80
83
  },
81
84
  "devDependencies": {
@@ -8,10 +8,9 @@ const createSymlink = (p) => {
8
8
  const srcDir = path.resolve(`./cpp/${p}`);
9
9
  const dstDir = path.resolve(`./android/cpp/${p}`);
10
10
 
11
- if (fs.existsSync(dstDir)) {
12
- fs.unlinkSync(dstDir);
11
+ if (!fs.existsSync(dstDir) || !fs.lstatSync(dstDir).isSymbolicLink()) {
12
+ fs.symlinkSync(srcDir, dstDir, "junction");
13
13
  }
14
- fs.symlinkSync(srcDir, dstDir, "junction");
15
14
  };
16
15
 
17
16
  // Copy common cpp files from the package root to the android folder
@@ -99,7 +99,7 @@ const View = (({ children, onLayout, style: rawStyle }: ViewProps) => {
99
99
  return {
100
100
  ...style,
101
101
  display: "flex",
102
- flexDirection: style.flexDirection || "column",
102
+ flexDirection: style.flexDirection || "inherit",
103
103
  flexWrap: style.flexWrap || "nowrap",
104
104
  justifyContent: style.justifyContent || "flex-start",
105
105
  alignItems: style.alignItems || "stretch",
@@ -1,26 +1,37 @@
1
1
  import type { DrawingContext, ImageSVGProps } from "../../types";
2
2
  import { NodeType } from "../../types";
3
- import { processRect } from "../datatypes";
4
3
  import { JsiDrawingNode } from "../DrawingNode";
5
4
  import type { NodeContext } from "../Node";
6
5
 
7
- export class ImageSVGNode extends JsiDrawingNode<ImageSVGProps, null> {
6
+ export class ImageSVGNode extends JsiDrawingNode<
7
+ ImageSVGProps,
8
+ Pick<ImageSVGProps, "x" | "y" | "width" | "height">
9
+ > {
8
10
  constructor(ctx: NodeContext, props: ImageSVGProps) {
9
11
  super(ctx, NodeType.ImageSVG, props);
10
12
  }
11
13
 
12
14
  deriveProps() {
13
- return null;
15
+ if (this.props.rect) {
16
+ return this.props.rect;
17
+ }
18
+ const { x, y, width, height } = this.props;
19
+ return { x, y, width, height };
14
20
  }
15
21
 
16
22
  draw({ canvas }: DrawingContext) {
17
23
  const { svg } = this.props;
18
- if (!svg) {
24
+ if (!this.derived) {
25
+ throw new Error("ImageSVGNode: derived props unresolved");
26
+ }
27
+ const { x, y, width, height } = this.derived;
28
+ if (svg === null) {
19
29
  return;
20
30
  }
21
- const { x, y, width, height } = processRect(this.Skia, this.props);
22
31
  canvas.save();
23
- canvas.translate(x, y);
32
+ if (x && y) {
33
+ canvas.translate(x, y);
34
+ }
24
35
  canvas.drawSvg(svg, width, height);
25
36
  canvas.restore();
26
37
  }
@@ -1,3 +1,4 @@
1
+ import { saturate } from "../../../renderer/processors/math";
1
2
  import { FillType } from "../../../skia/types";
2
3
  import type { SkPath } from "../../../skia/types";
3
4
  import type { DrawingContext, PathProps } from "../../types";
@@ -12,7 +13,15 @@ export class PathNode extends JsiDrawingNode<PathProps, SkPath> {
12
13
  }
13
14
 
14
15
  protected deriveProps() {
15
- const { start, end, fillType, stroke, ...pathProps } = this.props;
16
+ const {
17
+ start: trimStart,
18
+ end: trimEnd,
19
+ fillType,
20
+ stroke,
21
+ ...pathProps
22
+ } = this.props;
23
+ const start = saturate(trimStart);
24
+ const end = saturate(trimEnd);
16
25
  const hasStartOffset = start !== 0;
17
26
  const hasEndOffset = end !== 1;
18
27
  const hasStrokeOptions = stroke !== undefined;
@@ -90,9 +90,14 @@ export interface VerticesProps extends DrawingNodeProps {
90
90
  indices?: number[];
91
91
  }
92
92
 
93
- export type ImageSVGProps = RectDef & {
93
+ export interface ImageSVGProps extends DrawingNodeProps {
94
94
  svg: SkSVG | null;
95
- } & DrawingNodeProps;
95
+ x?: number;
96
+ y?: number;
97
+ width?: number;
98
+ height?: number;
99
+ rect?: SkRect;
100
+ }
96
101
 
97
102
  export interface PictureProps extends DrawingNodeProps {
98
103
  picture: SkPicture;
@@ -24,3 +24,8 @@ export const clamp = (
24
24
  "worklet";
25
25
  return Math.min(Math.max(lowerBound, value), upperBound);
26
26
  };
27
+
28
+ export const saturate = (value: number) => {
29
+ "worklet";
30
+ return clamp(value, 0, 1);
31
+ };
@@ -77,11 +77,16 @@ export abstract class SkiaBaseWebView<
77
77
  componentWillUnmount() {
78
78
  this.unsubscribeAll();
79
79
  cancelAnimationFrame(this.requestId);
80
+ // eslint-disable-next-line max-len
81
+ // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use
80
82
  // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
81
- this._canvasRef.current
82
- ?.getContext("webgl2")
83
- ?.getExtension("WEBGL_lose_context")
84
- ?.loseContext();
83
+ // We delete the context, only if the context has been intialized
84
+ if (this._surface) {
85
+ this._canvasRef.current
86
+ ?.getContext("webgl2")
87
+ ?.getExtension("WEBGL_lose_context")
88
+ ?.loseContext();
89
+ }
85
90
  }
86
91
 
87
92
  /**