@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.
- package/lib/commonjs/renderer/HostConfig.js +1 -1
- package/lib/commonjs/renderer/HostConfig.js.map +1 -1
- package/lib/commonjs/renderer/components/Group.js +6 -3
- package/lib/commonjs/renderer/components/Group.js.map +1 -1
- package/lib/commonjs/renderer/components/Paint.js +1 -21
- package/lib/commonjs/renderer/components/Paint.js.map +1 -1
- package/lib/commonjs/renderer/components/index.js +0 -13
- package/lib/commonjs/renderer/components/index.js.map +1 -1
- package/lib/commonjs/renderer/nodes/Declaration.js +5 -1
- package/lib/commonjs/renderer/nodes/Declaration.js.map +1 -1
- package/lib/commonjs/renderer/nodes/Drawing.js +4 -16
- package/lib/commonjs/renderer/nodes/Drawing.js.map +1 -1
- package/lib/commonjs/renderer/nodes/Node.js +9 -16
- package/lib/commonjs/renderer/nodes/Node.js.map +1 -1
- package/lib/commonjs/renderer/processors/Paint.js +24 -26
- package/lib/commonjs/renderer/processors/Paint.js.map +1 -1
- package/lib/module/renderer/HostConfig.js +1 -1
- package/lib/module/renderer/HostConfig.js.map +1 -1
- package/lib/module/renderer/components/Group.js +7 -5
- package/lib/module/renderer/components/Group.js.map +1 -1
- package/lib/module/renderer/components/Paint.js +2 -22
- package/lib/module/renderer/components/Paint.js.map +1 -1
- package/lib/module/renderer/components/index.js +0 -1
- package/lib/module/renderer/components/index.js.map +1 -1
- package/lib/module/renderer/nodes/Declaration.js +1 -0
- package/lib/module/renderer/nodes/Declaration.js.map +1 -1
- package/lib/module/renderer/nodes/Drawing.js +5 -17
- package/lib/module/renderer/nodes/Drawing.js.map +1 -1
- package/lib/module/renderer/nodes/Node.js +9 -15
- package/lib/module/renderer/nodes/Node.js.map +1 -1
- package/lib/module/renderer/processors/Paint.js +22 -21
- package/lib/module/renderer/processors/Paint.js.map +1 -1
- package/lib/typescript/src/renderer/Canvas.d.ts +1 -1
- package/lib/typescript/src/renderer/components/index.d.ts +0 -1
- package/lib/typescript/src/renderer/nodes/Declaration.d.ts +1 -0
- package/lib/typescript/src/renderer/nodes/Node.d.ts +2 -2
- package/lib/typescript/src/renderer/processors/Paint.d.ts +2 -2
- package/package.json +1 -1
- package/src/renderer/HostConfig.ts +1 -1
- package/src/renderer/components/Group.tsx +24 -14
- package/src/renderer/components/Paint.tsx +5 -35
- package/src/renderer/components/index.ts +0 -1
- package/src/renderer/nodes/Declaration.tsx +4 -0
- package/src/renderer/nodes/Drawing.tsx +10 -20
- package/src/renderer/nodes/Node.ts +9 -12
- package/src/renderer/processors/Paint.ts +34 -31
- package/lib/commonjs/renderer/components/Defs.js +0 -30
- package/lib/commonjs/renderer/components/Defs.js.map +0 -1
- package/lib/module/renderer/components/Defs.js +0 -16
- package/lib/module/renderer/components/Defs.js.map +0 -1
- package/lib/typescript/src/renderer/components/Defs.d.ts +0 -5
- 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
|
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
|
55
|
-
processPaint(
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
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 =
|
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
|
-
|
44
|
-
this.children.forEach((child) => {
|
42
|
+
(children ?? this.children).forEach((child) => {
|
45
43
|
if (!child.memoized) {
|
46
|
-
const ret = child.draw(
|
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
|
-
|
54
|
-
|
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
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
)
|
91
|
-
|
92
|
-
|
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
|
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,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
|
-
};
|