@shopify/react-native-skia 0.1.118 → 0.1.119

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 (52) hide show
  1. package/lib/commonjs/renderer/HostConfig.js +1 -1
  2. package/lib/commonjs/renderer/HostConfig.js.map +1 -1
  3. package/lib/commonjs/renderer/components/Group.js +6 -3
  4. package/lib/commonjs/renderer/components/Group.js.map +1 -1
  5. package/lib/commonjs/renderer/components/Paint.js +1 -21
  6. package/lib/commonjs/renderer/components/Paint.js.map +1 -1
  7. package/lib/commonjs/renderer/components/index.js +0 -13
  8. package/lib/commonjs/renderer/components/index.js.map +1 -1
  9. package/lib/commonjs/renderer/nodes/Declaration.js +5 -1
  10. package/lib/commonjs/renderer/nodes/Declaration.js.map +1 -1
  11. package/lib/commonjs/renderer/nodes/Drawing.js +4 -16
  12. package/lib/commonjs/renderer/nodes/Drawing.js.map +1 -1
  13. package/lib/commonjs/renderer/nodes/Node.js +9 -16
  14. package/lib/commonjs/renderer/nodes/Node.js.map +1 -1
  15. package/lib/commonjs/renderer/processors/Paint.js +24 -26
  16. package/lib/commonjs/renderer/processors/Paint.js.map +1 -1
  17. package/lib/module/renderer/HostConfig.js +1 -1
  18. package/lib/module/renderer/HostConfig.js.map +1 -1
  19. package/lib/module/renderer/components/Group.js +7 -5
  20. package/lib/module/renderer/components/Group.js.map +1 -1
  21. package/lib/module/renderer/components/Paint.js +2 -22
  22. package/lib/module/renderer/components/Paint.js.map +1 -1
  23. package/lib/module/renderer/components/index.js +0 -1
  24. package/lib/module/renderer/components/index.js.map +1 -1
  25. package/lib/module/renderer/nodes/Declaration.js +1 -0
  26. package/lib/module/renderer/nodes/Declaration.js.map +1 -1
  27. package/lib/module/renderer/nodes/Drawing.js +5 -17
  28. package/lib/module/renderer/nodes/Drawing.js.map +1 -1
  29. package/lib/module/renderer/nodes/Node.js +9 -15
  30. package/lib/module/renderer/nodes/Node.js.map +1 -1
  31. package/lib/module/renderer/processors/Paint.js +22 -21
  32. package/lib/module/renderer/processors/Paint.js.map +1 -1
  33. package/lib/typescript/src/renderer/Canvas.d.ts +1 -1
  34. package/lib/typescript/src/renderer/components/index.d.ts +0 -1
  35. package/lib/typescript/src/renderer/nodes/Declaration.d.ts +1 -0
  36. package/lib/typescript/src/renderer/nodes/Node.d.ts +2 -2
  37. package/lib/typescript/src/renderer/processors/Paint.d.ts +2 -2
  38. package/package.json +1 -1
  39. package/src/renderer/HostConfig.ts +1 -1
  40. package/src/renderer/components/Group.tsx +24 -14
  41. package/src/renderer/components/Paint.tsx +5 -35
  42. package/src/renderer/components/index.ts +0 -1
  43. package/src/renderer/nodes/Declaration.tsx +4 -0
  44. package/src/renderer/nodes/Drawing.tsx +10 -20
  45. package/src/renderer/nodes/Node.ts +9 -12
  46. package/src/renderer/processors/Paint.ts +34 -31
  47. package/lib/commonjs/renderer/components/Defs.js +0 -30
  48. package/lib/commonjs/renderer/components/Defs.js.map +0 -1
  49. package/lib/module/renderer/components/Defs.js +0 -16
  50. package/lib/module/renderer/components/Defs.js.map +0 -1
  51. package/lib/typescript/src/renderer/components/Defs.d.ts +0 -5
  52. package/src/renderer/components/Defs.tsx +0 -19
@@ -28,6 +28,10 @@ export const useDeclaration = <P,>(
28
28
  // eslint-disable-next-line react-hooks/exhaustive-deps
29
29
  useCallback(cb, deps ?? []);
30
30
 
31
+ export const isDeclarationNode = (
32
+ node: Node
33
+ ): node is DeclarationNode<unknown> => node instanceof DeclarationNode;
34
+
31
35
  export interface DeclarationProps<P> {
32
36
  onDeclare: DeclarationCallback<P>;
33
37
  }
@@ -2,7 +2,7 @@ import type { DependencyList, ReactNode } from "react";
2
2
  import { useCallback } from "react";
3
3
 
4
4
  import type { DrawingContext } from "../DrawingContext";
5
- import { processPaint, selectPaint } from "../processors";
5
+ import { processPaint } from "../processors";
6
6
  import type { AnimatedProps } from "../processors/Animations/Animations";
7
7
  import { materialize } from "../processors/Animations/Animations";
8
8
  import { isPaint } from "../../skia";
@@ -51,25 +51,15 @@ export class DrawingNode<P> extends Node<P> {
51
51
  if (this.skipProcessing) {
52
52
  this.onDraw(ctx, drawingProps, this);
53
53
  } else {
54
- const selectedPaint = selectPaint(ctx.paint, drawingProps);
55
- processPaint(selectedPaint, ctx.opacity, drawingProps);
56
- // to draw only once:
57
- // onDraw({ ...ctx, paint: selectedPaint }, children);
58
- [
59
- selectedPaint,
60
- ...this.children
61
- .map((child) => {
62
- //if (child.type === NodeType.Declaration) {
63
- const ret = child.draw(ctx);
64
- if (ret) {
65
- return ret;
66
- }
67
- //}
68
- return null;
69
- })
70
- .filter(isPaint),
71
- ].forEach((paint) => {
72
- this.onDraw({ ...ctx, paint }, drawingProps, this);
54
+ const declarations = this.visit(ctx);
55
+ const paint = processPaint(
56
+ ctx.paint.copy(),
57
+ ctx.opacity,
58
+ drawingProps,
59
+ declarations
60
+ );
61
+ [paint, ...declarations.filter(isPaint)].forEach((currentPaint) => {
62
+ this.onDraw({ ...ctx, paint: currentPaint }, drawingProps, this);
73
63
  });
74
64
  }
75
65
  }
@@ -1,4 +1,3 @@
1
- import { isPaint } from "../../skia";
2
1
  import type { SkJSIInstance } from "../../skia/JsiInstance";
3
2
  import type { DependencyManager } from "../DependencyManager";
4
3
  import type { DrawingContext } from "../DrawingContext";
@@ -15,7 +14,7 @@ export abstract class Node<P = unknown> {
15
14
  readonly children: Node[] = [];
16
15
  _props: AnimatedProps<P>;
17
16
  memoizable = false;
18
- memoized = false;
17
+ memoized: DeclarationResult | null = null;
19
18
  parent?: Node;
20
19
  depMgr: DependencyManager;
21
20
 
@@ -38,21 +37,19 @@ export abstract class Node<P = unknown> {
38
37
  return this._props;
39
38
  }
40
39
 
41
- visit(ctx: DrawingContext) {
40
+ visit(ctx: DrawingContext, children?: Node[]) {
42
41
  const returnedValues: Exclude<DeclarationResult, null>[] = [];
43
- let currentCtx = ctx;
44
- this.children.forEach((child) => {
42
+ (children ?? this.children).forEach((child) => {
45
43
  if (!child.memoized) {
46
- const ret = child.draw(currentCtx);
44
+ const ret = child.draw(ctx);
47
45
  if (ret) {
48
- if (isPaint(ret)) {
49
- currentCtx = { ...currentCtx, paint: ret };
50
- }
51
46
  returnedValues.push(ret);
47
+ if (child.memoizable) {
48
+ child.memoized = ret;
49
+ }
52
50
  }
53
- if (child.memoizable) {
54
- child.memoized = true;
55
- }
51
+ } else {
52
+ returnedValues.push(child.memoized);
56
53
  }
57
54
  });
58
55
  return returnedValues;
@@ -6,14 +6,22 @@ import {
6
6
  StrokeJoin,
7
7
  StrokeCap,
8
8
  processColor,
9
+ isShader,
10
+ isMaskFilter,
11
+ isColorFilter,
12
+ isPathEffect,
13
+ isImageFilter,
14
+ Skia,
9
15
  } from "../../skia";
10
- import type { SkPaint, Color } from "../../skia";
16
+ import type { SkPaint, Color, SkImageFilter } from "../../skia";
17
+ import type { DeclarationResult } from "../nodes";
11
18
  export type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
12
19
 
13
20
  export interface ChildrenProps {
14
21
  children?: ReactNode | ReactNode[];
15
22
  }
16
23
 
24
+ // TODO: rename to paint props?
17
25
  export interface CustomPaintProps extends ChildrenProps {
18
26
  paint?: RefObject<SkPaint>;
19
27
  color?: Color;
@@ -33,6 +41,7 @@ export const processPaint = (
33
41
  paint: SkPaint,
34
42
  currentOpacity: number,
35
43
  {
44
+ paint: paintRef,
36
45
  color,
37
46
  blendMode,
38
47
  style,
@@ -41,8 +50,12 @@ export const processPaint = (
41
50
  strokeCap,
42
51
  strokeMiter,
43
52
  opacity,
44
- }: CustomPaintProps
53
+ }: CustomPaintProps,
54
+ children: DeclarationResult[]
45
55
  ) => {
56
+ if (paintRef && paintRef.current) {
57
+ return paintRef.current;
58
+ }
46
59
  if (color !== undefined) {
47
60
  const c = processColor(color, currentOpacity);
48
61
  paint.setShader(null);
@@ -72,34 +85,24 @@ export const processPaint = (
72
85
  if (opacity !== undefined) {
73
86
  paint.setAlphaf(opacity);
74
87
  }
75
- };
76
-
77
- export const selectPaint = (
78
- currentPaint: SkPaint,
79
- {
80
- paint,
81
- color: cl,
82
- blendMode,
83
- style: paintStyle,
84
- strokeWidth,
85
- strokeJoin,
86
- strokeCap,
87
- strokeMiter,
88
- opacity,
89
- }: CustomPaintProps
90
- ) => {
91
- const hasCustomPaint =
92
- cl !== undefined ||
93
- blendMode !== undefined ||
94
- paintStyle !== undefined ||
95
- strokeWidth !== undefined ||
96
- strokeJoin !== undefined ||
97
- opacity !== undefined ||
98
- strokeCap !== undefined ||
99
- strokeMiter !== undefined;
100
- const parentPaint = paint?.current ?? currentPaint;
101
- if (hasCustomPaint) {
102
- return parentPaint.copy();
88
+ children.forEach((child) => {
89
+ if (isShader(child)) {
90
+ paint.setShader(child);
91
+ } else if (isMaskFilter(child)) {
92
+ paint.setMaskFilter(child);
93
+ } else if (isColorFilter(child)) {
94
+ paint.setColorFilter(child);
95
+ } else if (isPathEffect(child)) {
96
+ paint.setPathEffect(child);
97
+ }
98
+ });
99
+ const filters = children.filter(isImageFilter);
100
+ if (filters.length > 0) {
101
+ paint.setImageFilter(
102
+ filters
103
+ .reverse()
104
+ .reduce<SkImageFilter | null>(Skia.ImageFilter.MakeCompose, null)
105
+ );
103
106
  }
104
- return parentPaint;
107
+ return paint;
105
108
  };
@@ -1,30 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.Defs = void 0;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- var _nodes = require("../nodes");
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
15
-
16
- const onDeclare = (0, _nodes.createDeclaration)(() => {
17
- // Do nothing.
18
- // The goal of this component is to avoid declared paint from
19
- // being used in the drawing context automatically
20
- return null;
21
- });
22
-
23
- const Defs = props => {
24
- return /*#__PURE__*/_react.default.createElement("skDeclaration", _extends({
25
- onDeclare: onDeclare
26
- }, props));
27
- };
28
-
29
- exports.Defs = Defs;
30
- //# sourceMappingURL=Defs.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["Defs.tsx"],"names":["onDeclare","Defs","props"],"mappings":";;;;;;;AAAA;;AAGA;;;;;;AAMA,MAAMA,SAAS,GAAG,8BAAkB,MAAM;AACxC;AACA;AACA;AACA,SAAO,IAAP;AACD,CALiB,CAAlB;;AAOO,MAAMC,IAAI,GAAIC,KAAD,IAAsB;AACxC,sBAAO;AAAe,IAAA,SAAS,EAAEF;AAA1B,KAAyCE,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { createDeclaration } from \"../nodes\";\n\nexport interface DefsProps {\n children: ReactNode | ReactNode[];\n}\n\nconst onDeclare = createDeclaration(() => {\n // Do nothing.\n // The goal of this component is to avoid declared paint from\n // being used in the drawing context automatically\n return null;\n});\n\nexport const Defs = (props: DefsProps) => {\n return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}
@@ -1,16 +0,0 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
- import React from "react";
4
- import { createDeclaration } from "../nodes";
5
- const onDeclare = createDeclaration(() => {
6
- // Do nothing.
7
- // The goal of this component is to avoid declared paint from
8
- // being used in the drawing context automatically
9
- return null;
10
- });
11
- export const Defs = props => {
12
- return /*#__PURE__*/React.createElement("skDeclaration", _extends({
13
- onDeclare: onDeclare
14
- }, props));
15
- };
16
- //# sourceMappingURL=Defs.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["Defs.tsx"],"names":["React","createDeclaration","onDeclare","Defs","props"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,SAASC,iBAAT,QAAkC,UAAlC;AAMA,MAAMC,SAAS,GAAGD,iBAAiB,CAAC,MAAM;AACxC;AACA;AACA;AACA,SAAO,IAAP;AACD,CALkC,CAAnC;AAOA,OAAO,MAAME,IAAI,GAAIC,KAAD,IAAsB;AACxC,sBAAO;AAAe,IAAA,SAAS,EAAEF;AAA1B,KAAyCE,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { createDeclaration } from \"../nodes\";\n\nexport interface DefsProps {\n children: ReactNode | ReactNode[];\n}\n\nconst onDeclare = createDeclaration(() => {\n // Do nothing.\n // The goal of this component is to avoid declared paint from\n // being used in the drawing context automatically\n return null;\n});\n\nexport const Defs = (props: DefsProps) => {\n return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}
@@ -1,5 +0,0 @@
1
- import type { ReactNode } from "react";
2
- export interface DefsProps {
3
- children: ReactNode | ReactNode[];
4
- }
5
- export declare const Defs: (props: DefsProps) => JSX.Element;
@@ -1,19 +0,0 @@
1
- import React from "react";
2
- import type { ReactNode } from "react";
3
-
4
- import { createDeclaration } from "../nodes";
5
-
6
- export interface DefsProps {
7
- children: ReactNode | ReactNode[];
8
- }
9
-
10
- const onDeclare = createDeclaration(() => {
11
- // Do nothing.
12
- // The goal of this component is to avoid declared paint from
13
- // being used in the drawing context automatically
14
- return null;
15
- });
16
-
17
- export const Defs = (props: DefsProps) => {
18
- return <skDeclaration onDeclare={onDeclare} {...props} />;
19
- };