@shopify/react-native-skia 0.1.118 → 0.1.121
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/android/CMakeLists.txt +30 -16
- package/android/build.gradle +81 -34
- package/android/src/main/java/com/shopify/reactnative/skia/PlatformContext.java +1 -1
- package/ios/RNSkia-iOS/RNSkDrawViewImpl.h +3 -6
- package/ios/RNSkia-iOS/RNSkDrawViewImpl.mm +2 -4
- package/ios/RNSkia-iOS/SkiaDrawView.mm +3 -2
- 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
@@ -1,7 +1,8 @@
|
|
1
|
-
import { BlendMode, PaintStyle, StrokeJoin, StrokeCap, processColor } from "../../skia";
|
1
|
+
import { BlendMode, PaintStyle, StrokeJoin, StrokeCap, processColor, isShader, isMaskFilter, isColorFilter, isPathEffect, isImageFilter, Skia } from "../../skia";
|
2
2
|
export const enumKey = k => k.charAt(0).toUpperCase() + k.slice(1);
|
3
|
-
export const processPaint = (paint, currentOpacity, _ref) => {
|
3
|
+
export const processPaint = (paint, currentOpacity, _ref, children) => {
|
4
4
|
let {
|
5
|
+
paint: paintRef,
|
5
6
|
color,
|
6
7
|
blendMode,
|
7
8
|
style,
|
@@ -12,6 +13,10 @@ export const processPaint = (paint, currentOpacity, _ref) => {
|
|
12
13
|
opacity
|
13
14
|
} = _ref;
|
14
15
|
|
16
|
+
if (paintRef && paintRef.current) {
|
17
|
+
return paintRef.current;
|
18
|
+
}
|
19
|
+
|
15
20
|
if (color !== undefined) {
|
16
21
|
const c = processColor(color, currentOpacity);
|
17
22
|
paint.setShader(null);
|
@@ -48,28 +53,24 @@ export const processPaint = (paint, currentOpacity, _ref) => {
|
|
48
53
|
if (opacity !== undefined) {
|
49
54
|
paint.setAlphaf(opacity);
|
50
55
|
}
|
51
|
-
};
|
52
|
-
export const selectPaint = (currentPaint, _ref2) => {
|
53
|
-
var _paint$current;
|
54
56
|
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
}
|
66
|
-
const
|
67
|
-
const parentPaint = (_paint$current = paint === null || paint === void 0 ? void 0 : paint.current) !== null && _paint$current !== void 0 ? _paint$current : currentPaint;
|
57
|
+
children.forEach(child => {
|
58
|
+
if (isShader(child)) {
|
59
|
+
paint.setShader(child);
|
60
|
+
} else if (isMaskFilter(child)) {
|
61
|
+
paint.setMaskFilter(child);
|
62
|
+
} else if (isColorFilter(child)) {
|
63
|
+
paint.setColorFilter(child);
|
64
|
+
} else if (isPathEffect(child)) {
|
65
|
+
paint.setPathEffect(child);
|
66
|
+
}
|
67
|
+
});
|
68
|
+
const filters = children.filter(isImageFilter);
|
68
69
|
|
69
|
-
if (
|
70
|
-
|
70
|
+
if (filters.length > 0) {
|
71
|
+
paint.setImageFilter(filters.reverse().reduce(Skia.ImageFilter.MakeCompose, null));
|
71
72
|
}
|
72
73
|
|
73
|
-
return
|
74
|
+
return paint;
|
74
75
|
};
|
75
76
|
//# sourceMappingURL=Paint.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Paint.ts"],"names":["BlendMode","PaintStyle","StrokeJoin","StrokeCap","processColor","enumKey","k","charAt","toUpperCase","slice","processPaint","paint","currentOpacity","color","blendMode","style","strokeWidth","strokeJoin","strokeCap","strokeMiter","opacity","undefined","c","setShader","setColor","getColor","setBlendMode","setStyle","setStrokeJoin","setStrokeCap","setStrokeMiter","setStrokeWidth","setAlphaf","
|
1
|
+
{"version":3,"sources":["Paint.ts"],"names":["BlendMode","PaintStyle","StrokeJoin","StrokeCap","processColor","isShader","isMaskFilter","isColorFilter","isPathEffect","isImageFilter","Skia","enumKey","k","charAt","toUpperCase","slice","processPaint","paint","currentOpacity","children","paintRef","color","blendMode","style","strokeWidth","strokeJoin","strokeCap","strokeMiter","opacity","current","undefined","c","setShader","setColor","getColor","setBlendMode","setStyle","setStrokeJoin","setStrokeCap","setStrokeMiter","setStrokeWidth","setAlphaf","forEach","child","setMaskFilter","setColorFilter","setPathEffect","filters","filter","length","setImageFilter","reverse","reduce","ImageFilter","MakeCompose"],"mappings":"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","sourcesContent":["import type { ReactNode, RefObject } from \"react\";\n\nimport {\n BlendMode,\n PaintStyle,\n StrokeJoin,\n StrokeCap,\n processColor,\n isShader,\n isMaskFilter,\n isColorFilter,\n isPathEffect,\n isImageFilter,\n Skia,\n} from \"../../skia\";\nimport type { SkPaint, Color, SkImageFilter } from \"../../skia\";\nimport type { DeclarationResult } from \"../nodes\";\nexport type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;\n\nexport interface ChildrenProps {\n children?: ReactNode | ReactNode[];\n}\n\n// TODO: rename to paint props?\nexport interface CustomPaintProps extends ChildrenProps {\n paint?: RefObject<SkPaint>;\n color?: Color;\n strokeWidth?: number;\n blendMode?: SkEnum<typeof BlendMode>;\n style?: SkEnum<typeof PaintStyle>;\n strokeJoin?: SkEnum<typeof StrokeJoin>;\n strokeCap?: SkEnum<typeof StrokeCap>;\n strokeMiter?: number;\n opacity?: number;\n}\n\nexport const enumKey = <K extends string>(k: K) =>\n (k.charAt(0).toUpperCase() + k.slice(1)) as Capitalize<K>;\n\nexport const processPaint = (\n paint: SkPaint,\n currentOpacity: number,\n {\n paint: paintRef,\n color,\n blendMode,\n style,\n strokeWidth,\n strokeJoin,\n strokeCap,\n strokeMiter,\n opacity,\n }: CustomPaintProps,\n children: DeclarationResult[]\n) => {\n if (paintRef && paintRef.current) {\n return paintRef.current;\n }\n if (color !== undefined) {\n const c = processColor(color, currentOpacity);\n paint.setShader(null);\n paint.setColor(c);\n } else {\n const c = processColor(paint.getColor(), currentOpacity);\n paint.setColor(c);\n }\n if (blendMode !== undefined) {\n paint.setBlendMode(BlendMode[enumKey(blendMode)]);\n }\n if (style !== undefined) {\n paint.setStyle(PaintStyle[enumKey(style)]);\n }\n if (strokeJoin !== undefined) {\n paint.setStrokeJoin(StrokeJoin[enumKey(strokeJoin)]);\n }\n if (strokeCap !== undefined) {\n paint.setStrokeCap(StrokeCap[enumKey(strokeCap)]);\n }\n if (strokeMiter !== undefined) {\n paint.setStrokeMiter(strokeMiter);\n }\n if (strokeWidth !== undefined) {\n paint.setStrokeWidth(strokeWidth);\n }\n if (opacity !== undefined) {\n paint.setAlphaf(opacity);\n }\n children.forEach((child) => {\n if (isShader(child)) {\n paint.setShader(child);\n } else if (isMaskFilter(child)) {\n paint.setMaskFilter(child);\n } else if (isColorFilter(child)) {\n paint.setColorFilter(child);\n } else if (isPathEffect(child)) {\n paint.setPathEffect(child);\n }\n });\n const filters = children.filter(isImageFilter);\n if (filters.length > 0) {\n paint.setImageFilter(\n filters\n .reverse()\n .reduce<SkImageFilter | null>(Skia.ImageFilter.MakeCompose, null)\n );\n }\n return paint;\n};\n"]}
|
@@ -18,4 +18,4 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
|
|
18
18
|
onTouch?: TouchHandler;
|
19
19
|
fontMgr?: FontMgr;
|
20
20
|
}
|
21
|
-
export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "
|
21
|
+
export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "style" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "onTouch" | "fontMgr"> & React.RefAttributes<SkiaView>>;
|
@@ -8,6 +8,7 @@ export declare type DeclarationResult = SkJSIInstance<string> | null;
|
|
8
8
|
declare type DeclarationCallback<T> = (props: T, children: DeclarationResult[], ctx: DrawingContext) => DeclarationResult;
|
9
9
|
export declare const createDeclaration: <T>(cb: DeclarationCallback<T>) => DeclarationCallback<T>;
|
10
10
|
export declare const useDeclaration: <P>(cb: DeclarationCallback<P>, deps?: DependencyList | undefined) => DeclarationCallback<P>;
|
11
|
+
export declare const isDeclarationNode: (node: Node) => node is DeclarationNode<unknown>;
|
11
12
|
export interface DeclarationProps<P> {
|
12
13
|
onDeclare: DeclarationCallback<P>;
|
13
14
|
}
|
@@ -11,13 +11,13 @@ export declare abstract class Node<P = unknown> {
|
|
11
11
|
readonly children: Node[];
|
12
12
|
_props: AnimatedProps<P>;
|
13
13
|
memoizable: boolean;
|
14
|
-
memoized:
|
14
|
+
memoized: DeclarationResult | null;
|
15
15
|
parent?: Node;
|
16
16
|
depMgr: DependencyManager;
|
17
17
|
constructor(depMgr: DependencyManager, props: AnimatedProps<P>);
|
18
18
|
abstract draw(ctx: DrawingContext): void | DeclarationResult;
|
19
19
|
set props(props: AnimatedProps<P>);
|
20
20
|
get props(): AnimatedProps<P>;
|
21
|
-
visit(ctx: DrawingContext): SkJSIInstance<string>[];
|
21
|
+
visit(ctx: DrawingContext, children?: Node[]): SkJSIInstance<string>[];
|
22
22
|
}
|
23
23
|
export {};
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import type { ReactNode, RefObject } from "react";
|
2
2
|
import { BlendMode, PaintStyle, StrokeJoin, StrokeCap } from "../../skia";
|
3
3
|
import type { SkPaint, Color } from "../../skia";
|
4
|
+
import type { DeclarationResult } from "../nodes";
|
4
5
|
export declare type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
|
5
6
|
export interface ChildrenProps {
|
6
7
|
children?: ReactNode | ReactNode[];
|
@@ -17,5 +18,4 @@ export interface CustomPaintProps extends ChildrenProps {
|
|
17
18
|
opacity?: number;
|
18
19
|
}
|
19
20
|
export declare const enumKey: <K extends string>(k: K) => Capitalize<K>;
|
20
|
-
export declare const processPaint: (paint: SkPaint, currentOpacity: number, { color, blendMode, style, strokeWidth, strokeJoin, strokeCap, strokeMiter, opacity, }: CustomPaintProps) =>
|
21
|
-
export declare const selectPaint: (currentPaint: SkPaint, { paint, color: cl, blendMode, style: paintStyle, strokeWidth, strokeJoin, strokeCap, strokeMiter, opacity, }: CustomPaintProps) => SkPaint;
|
21
|
+
export declare const processPaint: (paint: SkPaint, currentOpacity: number, { paint: paintRef, color, blendMode, style, strokeWidth, strokeJoin, strokeCap, strokeMiter, opacity, }: CustomPaintProps, children: DeclarationResult[]) => SkPaint;
|
package/package.json
CHANGED
@@ -3,19 +3,15 @@ import type { RefObject } from "react";
|
|
3
3
|
|
4
4
|
import type { SkPaint } from "../../skia";
|
5
5
|
import { ClipOp } from "../../skia";
|
6
|
-
import {
|
7
|
-
processTransform,
|
8
|
-
selectPaint,
|
9
|
-
processPaint,
|
10
|
-
processClip,
|
11
|
-
} from "../processors";
|
6
|
+
import { processTransform, processPaint, processClip } from "../processors";
|
12
7
|
import type {
|
13
8
|
CustomPaintProps,
|
14
9
|
TransformProps,
|
15
10
|
AnimatedProps,
|
16
11
|
ClipDef,
|
17
12
|
} from "../processors";
|
18
|
-
import { createDrawing } from "../nodes";
|
13
|
+
import { createDrawing, DrawingNode } from "../nodes";
|
14
|
+
import { isDeclarationNode } from "../nodes/Declaration";
|
19
15
|
|
20
16
|
const isSkPaint = (obj: RefObject<SkPaint> | SkPaint): obj is SkPaint =>
|
21
17
|
"__typename__" in obj && obj.__typename__ === "Paint";
|
@@ -29,8 +25,19 @@ export interface GroupProps extends CustomPaintProps, TransformProps {
|
|
29
25
|
const onDraw = createDrawing<GroupProps>(
|
30
26
|
(ctx, { layer, clip, invertClip, ...groupProps }, node) => {
|
31
27
|
const { canvas, opacity } = ctx;
|
32
|
-
const
|
33
|
-
|
28
|
+
const declarations = node.children
|
29
|
+
.filter(isDeclarationNode)
|
30
|
+
.map((child) => child.draw(ctx));
|
31
|
+
|
32
|
+
const drawings = node.children.filter(
|
33
|
+
(child) => child instanceof DrawingNode
|
34
|
+
);
|
35
|
+
const paint = processPaint(
|
36
|
+
ctx.paint.copy(),
|
37
|
+
opacity,
|
38
|
+
groupProps,
|
39
|
+
declarations
|
40
|
+
);
|
34
41
|
const hasTransform = !!groupProps.transform || !!groupProps.matrix;
|
35
42
|
const hasClip = !!clip;
|
36
43
|
const shouldSave = hasTransform || hasClip || !!layer;
|
@@ -52,11 +59,14 @@ const onDraw = createDrawing<GroupProps>(
|
|
52
59
|
processClip(canvas, clip, op);
|
53
60
|
}
|
54
61
|
}
|
55
|
-
node.visit(
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
62
|
+
node.visit(
|
63
|
+
{
|
64
|
+
...ctx,
|
65
|
+
paint,
|
66
|
+
opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,
|
67
|
+
},
|
68
|
+
drawings
|
69
|
+
);
|
60
70
|
if (shouldSave) {
|
61
71
|
canvas.restore();
|
62
72
|
}
|
@@ -1,15 +1,8 @@
|
|
1
1
|
import type { ReactNode } from "react";
|
2
2
|
import React, { useRef, useMemo, forwardRef, useImperativeHandle } from "react";
|
3
3
|
|
4
|
-
import type { SkPaint
|
5
|
-
import {
|
6
|
-
isShader,
|
7
|
-
isMaskFilter,
|
8
|
-
isColorFilter,
|
9
|
-
Skia,
|
10
|
-
isImageFilter,
|
11
|
-
isPathEffect,
|
12
|
-
} from "../../skia";
|
4
|
+
import type { SkPaint } from "../../skia";
|
5
|
+
import { Skia } from "../../skia";
|
13
6
|
import type { CustomPaintProps, AnimatedProps } from "../processors";
|
14
7
|
import { processPaint } from "../processors";
|
15
8
|
import { createDeclaration } from "../nodes";
|
@@ -26,32 +19,9 @@ export const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(
|
|
26
19
|
useImperativeHandle(ref, () => paint, [paint]);
|
27
20
|
const onDeclare = useMemo(
|
28
21
|
() =>
|
29
|
-
createDeclaration<PaintProps>((paintProps, children, ctx) =>
|
30
|
-
processPaint(paint, ctx.opacity, paintProps)
|
31
|
-
|
32
|
-
if (isShader(child)) {
|
33
|
-
paint.setShader(child);
|
34
|
-
} else if (isMaskFilter(child)) {
|
35
|
-
paint.setMaskFilter(child);
|
36
|
-
} else if (isColorFilter(child)) {
|
37
|
-
paint.setColorFilter(child);
|
38
|
-
} else if (isPathEffect(child)) {
|
39
|
-
paint.setPathEffect(child);
|
40
|
-
}
|
41
|
-
});
|
42
|
-
const filters = children.filter(isImageFilter);
|
43
|
-
if (filters.length > 0) {
|
44
|
-
paint.setImageFilter(
|
45
|
-
filters
|
46
|
-
.reverse()
|
47
|
-
.reduce<SkImageFilter | null>(
|
48
|
-
Skia.ImageFilter.MakeCompose,
|
49
|
-
null
|
50
|
-
)
|
51
|
-
);
|
52
|
-
}
|
53
|
-
return paint;
|
54
|
-
}),
|
22
|
+
createDeclaration<PaintProps>((paintProps, children, ctx) =>
|
23
|
+
processPaint(paint, ctx.opacity, paintProps, children)
|
24
|
+
),
|
55
25
|
[paint]
|
56
26
|
);
|
57
27
|
return <skDeclaration onDeclare={onDeclare} {...props} />;
|
@@ -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
|
-
};
|