@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
@@ -2,8 +2,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
2
2
|
|
3
3
|
import React from "react";
|
4
4
|
import { ClipOp } from "../../skia";
|
5
|
-
import { processTransform,
|
6
|
-
import { createDrawing } from "../nodes";
|
5
|
+
import { processTransform, processPaint, processClip } from "../processors";
|
6
|
+
import { createDrawing, DrawingNode } from "../nodes";
|
7
|
+
import { isDeclarationNode } from "../nodes/Declaration";
|
7
8
|
|
8
9
|
const isSkPaint = obj => "__typename__" in obj && obj.__typename__ === "Paint";
|
9
10
|
|
@@ -18,8 +19,9 @@ const onDraw = createDrawing((ctx, _ref, node) => {
|
|
18
19
|
canvas,
|
19
20
|
opacity
|
20
21
|
} = ctx;
|
21
|
-
const
|
22
|
-
|
22
|
+
const declarations = node.children.filter(isDeclarationNode).map(child => child.draw(ctx));
|
23
|
+
const drawings = node.children.filter(child => child instanceof DrawingNode);
|
24
|
+
const paint = processPaint(ctx.paint.copy(), opacity, groupProps, declarations);
|
23
25
|
const hasTransform = !!groupProps.transform || !!groupProps.matrix;
|
24
26
|
const hasClip = !!clip;
|
25
27
|
const shouldSave = hasTransform || hasClip || !!layer;
|
@@ -50,7 +52,7 @@ const onDraw = createDrawing((ctx, _ref, node) => {
|
|
50
52
|
node.visit({ ...ctx,
|
51
53
|
paint,
|
52
54
|
opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity
|
53
|
-
});
|
55
|
+
}, drawings);
|
54
56
|
|
55
57
|
if (shouldSave) {
|
56
58
|
canvas.restore();
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Group.tsx"],"names":["React","ClipOp","processTransform","
|
1
|
+
{"version":3,"sources":["Group.tsx"],"names":["React","ClipOp","processTransform","processPaint","processClip","createDrawing","DrawingNode","isDeclarationNode","isSkPaint","obj","__typename__","onDraw","ctx","node","layer","clip","invertClip","groupProps","canvas","opacity","declarations","children","filter","map","child","draw","drawings","paint","copy","hasTransform","transform","matrix","hasClip","shouldSave","saveLayer","current","undefined","save","op","Difference","Intersect","visit","restore","Group","props"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAIA,SAASC,MAAT,QAAuB,YAAvB;AACA,SAASC,gBAAT,EAA2BC,YAA3B,EAAyCC,WAAzC,QAA4D,eAA5D;AAOA,SAASC,aAAT,EAAwBC,WAAxB,QAA2C,UAA3C;AACA,SAASC,iBAAT,QAAkC,sBAAlC;;AAEA,MAAMC,SAAS,GAAIC,GAAD,IAChB,kBAAkBA,GAAlB,IAAyBA,GAAG,CAACC,YAAJ,KAAqB,OADhD;;AASA,MAAMC,MAAM,GAAGN,aAAa,CAC1B,CAACO,GAAD,QAAkDC,IAAlD,KAA2D;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,IAAT;AAAeC,IAAAA,UAAf;AAA2B,OAAGC;AAA9B,GAAqD;AACzD,QAAM;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,MAAsBP,GAA5B;AACA,QAAMQ,YAAY,GAAGP,IAAI,CAACQ,QAAL,CAClBC,MADkB,CACXf,iBADW,EAElBgB,GAFkB,CAEbC,KAAD,IAAWA,KAAK,CAACC,IAAN,CAAWb,GAAX,CAFG,CAArB;AAIA,QAAMc,QAAQ,GAAGb,IAAI,CAACQ,QAAL,CAAcC,MAAd,CACdE,KAAD,IAAWA,KAAK,YAAYlB,WADb,CAAjB;AAGA,QAAMqB,KAAK,GAAGxB,YAAY,CACxBS,GAAG,CAACe,KAAJ,CAAUC,IAAV,EADwB,EAExBT,OAFwB,EAGxBF,UAHwB,EAIxBG,YAJwB,CAA1B;AAMA,QAAMS,YAAY,GAAG,CAAC,CAACZ,UAAU,CAACa,SAAb,IAA0B,CAAC,CAACb,UAAU,CAACc,MAA5D;AACA,QAAMC,OAAO,GAAG,CAAC,CAACjB,IAAlB;AACA,QAAMkB,UAAU,GAAGJ,YAAY,IAAIG,OAAhB,IAA2B,CAAC,CAAClB,KAAhD;;AACA,MAAImB,UAAJ,EAAgB;AACd,QAAInB,KAAJ,EAAW;AACT,UAAI,OAAOA,KAAP,KAAiB,SAArB,EAAgC;AAC9BI,QAAAA,MAAM,CAACgB,SAAP;AACD,OAFD,MAEO,IAAI1B,SAAS,CAACM,KAAD,CAAb,EAAsB;AAC3BI,QAAAA,MAAM,CAACgB,SAAP,CAAiBpB,KAAjB;AACD,OAFM,MAEA;AAAA;;AACLI,QAAAA,MAAM,CAACgB,SAAP,mBAAiBpB,KAAK,CAACqB,OAAvB,2DAAkCC,SAAlC;AACD;AACF,KARD,MAQO;AACLlB,MAAAA,MAAM,CAACmB,IAAP;AACD;;AACDnC,IAAAA,gBAAgB,CAACU,GAAD,EAAMK,UAAN,CAAhB;;AACA,QAAIF,IAAJ,EAAU;AACR,YAAMuB,EAAE,GAAGtB,UAAU,GAAGf,MAAM,CAACsC,UAAV,GAAuBtC,MAAM,CAACuC,SAAnD;AACApC,MAAAA,WAAW,CAACc,MAAD,EAASH,IAAT,EAAeuB,EAAf,CAAX;AACD;AACF;;AACDzB,EAAAA,IAAI,CAAC4B,KAAL,CACE,EACE,GAAG7B,GADL;AAEEe,IAAAA,KAFF;AAGER,IAAAA,OAAO,EAAEF,UAAU,CAACE,OAAX,GAAqBF,UAAU,CAACE,OAAX,GAAqBA,OAA1C,GAAoDA;AAH/D,GADF,EAMEO,QANF;;AAQA,MAAIO,UAAJ,EAAgB;AACdf,IAAAA,MAAM,CAACwB,OAAP;AACD;AACF,CAhDyB,CAA5B;AAmDA,OAAO,MAAMC,KAAK,GAAIC,KAAD,IAAsC;AACzD,sBAAO;AAAW,IAAA,MAAM,EAAEjC;AAAnB,KAA+BiC,KAA/B;AAAsC,IAAA,cAAc;AAApD,KAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\nimport type { RefObject } from \"react\";\n\nimport type { SkPaint } from \"../../skia\";\nimport { ClipOp } from \"../../skia\";\nimport { processTransform, processPaint, processClip } from \"../processors\";\nimport type {\n CustomPaintProps,\n TransformProps,\n AnimatedProps,\n ClipDef,\n} from \"../processors\";\nimport { createDrawing, DrawingNode } from \"../nodes\";\nimport { isDeclarationNode } from \"../nodes/Declaration\";\n\nconst isSkPaint = (obj: RefObject<SkPaint> | SkPaint): obj is SkPaint =>\n \"__typename__\" in obj && obj.__typename__ === \"Paint\";\n\nexport interface GroupProps extends CustomPaintProps, TransformProps {\n clip?: ClipDef;\n invertClip?: boolean;\n layer?: RefObject<SkPaint> | SkPaint | boolean;\n}\n\nconst onDraw = createDrawing<GroupProps>(\n (ctx, { layer, clip, invertClip, ...groupProps }, node) => {\n const { canvas, opacity } = ctx;\n const declarations = node.children\n .filter(isDeclarationNode)\n .map((child) => child.draw(ctx));\n\n const drawings = node.children.filter(\n (child) => child instanceof DrawingNode\n );\n const paint = processPaint(\n ctx.paint.copy(),\n opacity,\n groupProps,\n declarations\n );\n const hasTransform = !!groupProps.transform || !!groupProps.matrix;\n const hasClip = !!clip;\n const shouldSave = hasTransform || hasClip || !!layer;\n if (shouldSave) {\n if (layer) {\n if (typeof layer === \"boolean\") {\n canvas.saveLayer();\n } else if (isSkPaint(layer)) {\n canvas.saveLayer(layer);\n } else {\n canvas.saveLayer(layer.current ?? undefined);\n }\n } else {\n canvas.save();\n }\n processTransform(ctx, groupProps);\n if (clip) {\n const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;\n processClip(canvas, clip, op);\n }\n }\n node.visit(\n {\n ...ctx,\n paint,\n opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,\n },\n drawings\n );\n if (shouldSave) {\n canvas.restore();\n }\n }\n);\n\nexport const Group = (props: AnimatedProps<GroupProps>) => {\n return <skDrawing onDraw={onDraw} {...props} skipProcessing />;\n};\n"]}
|
@@ -1,34 +1,14 @@
|
|
1
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
2
|
|
3
3
|
import React, { useRef, useMemo, forwardRef, useImperativeHandle } from "react";
|
4
|
-
import {
|
4
|
+
import { Skia } from "../../skia";
|
5
5
|
import { processPaint } from "../processors";
|
6
6
|
import { createDeclaration } from "../nodes";
|
7
7
|
export const usePaintRef = () => useRef(null);
|
8
8
|
export const Paint = /*#__PURE__*/forwardRef((props, ref) => {
|
9
9
|
const paint = useMemo(() => Skia.Paint(), []);
|
10
10
|
useImperativeHandle(ref, () => paint, [paint]);
|
11
|
-
const onDeclare = useMemo(() => createDeclaration((paintProps, children, ctx) =>
|
12
|
-
processPaint(paint, ctx.opacity, paintProps);
|
13
|
-
children.forEach(child => {
|
14
|
-
if (isShader(child)) {
|
15
|
-
paint.setShader(child);
|
16
|
-
} else if (isMaskFilter(child)) {
|
17
|
-
paint.setMaskFilter(child);
|
18
|
-
} else if (isColorFilter(child)) {
|
19
|
-
paint.setColorFilter(child);
|
20
|
-
} else if (isPathEffect(child)) {
|
21
|
-
paint.setPathEffect(child);
|
22
|
-
}
|
23
|
-
});
|
24
|
-
const filters = children.filter(isImageFilter);
|
25
|
-
|
26
|
-
if (filters.length > 0) {
|
27
|
-
paint.setImageFilter(filters.reverse().reduce(Skia.ImageFilter.MakeCompose, null));
|
28
|
-
}
|
29
|
-
|
30
|
-
return paint;
|
31
|
-
}), [paint]);
|
11
|
+
const onDeclare = useMemo(() => createDeclaration((paintProps, children, ctx) => processPaint(paint, ctx.opacity, paintProps, children)), [paint]);
|
32
12
|
return /*#__PURE__*/React.createElement("skDeclaration", _extends({
|
33
13
|
onDeclare: onDeclare
|
34
14
|
}, props));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Paint.tsx"],"names":["React","useRef","useMemo","forwardRef","useImperativeHandle","
|
1
|
+
{"version":3,"sources":["Paint.tsx"],"names":["React","useRef","useMemo","forwardRef","useImperativeHandle","Skia","processPaint","createDeclaration","usePaintRef","Paint","props","ref","paint","onDeclare","paintProps","children","ctx","opacity"],"mappings":";;AACA,OAAOA,KAAP,IAAgBC,MAAhB,EAAwBC,OAAxB,EAAiCC,UAAjC,EAA6CC,mBAA7C,QAAwE,OAAxE;AAGA,SAASC,IAAT,QAAqB,YAArB;AAEA,SAASC,YAAT,QAA6B,eAA7B;AACA,SAASC,iBAAT,QAAkC,UAAlC;AAEA,OAAO,MAAMC,WAAW,GAAG,MAAMP,MAAM,CAAU,IAAV,CAAhC;AAMP,OAAO,MAAMQ,KAAK,gBAAGN,UAAU,CAC7B,CAACO,KAAD,EAAQC,GAAR,KAAgB;AACd,QAAMC,KAAK,GAAGV,OAAO,CAAC,MAAMG,IAAI,CAACI,KAAL,EAAP,EAAqB,EAArB,CAArB;AACAL,EAAAA,mBAAmB,CAACO,GAAD,EAAM,MAAMC,KAAZ,EAAmB,CAACA,KAAD,CAAnB,CAAnB;AACA,QAAMC,SAAS,GAAGX,OAAO,CACvB,MACEK,iBAAiB,CAAa,CAACO,UAAD,EAAaC,QAAb,EAAuBC,GAAvB,KAC5BV,YAAY,CAACM,KAAD,EAAQI,GAAG,CAACC,OAAZ,EAAqBH,UAArB,EAAiCC,QAAjC,CADG,CAFI,EAKvB,CAACH,KAAD,CALuB,CAAzB;AAOA,sBAAO;AAAe,IAAA,SAAS,EAAEC;AAA1B,KAAyCH,KAAzC,EAAP;AACD,CAZ4B,CAAxB","sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useRef, useMemo, forwardRef, useImperativeHandle } from \"react\";\n\nimport type { SkPaint } from \"../../skia\";\nimport { Skia } from \"../../skia\";\nimport type { CustomPaintProps, AnimatedProps } from \"../processors\";\nimport { processPaint } from \"../processors\";\nimport { createDeclaration } from \"../nodes\";\n\nexport const usePaintRef = () => useRef<SkPaint>(null);\n\nexport interface PaintProps extends Omit<CustomPaintProps, \"paint\"> {\n children?: ReactNode | ReactNode[];\n}\n\nexport const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(\n (props, ref) => {\n const paint = useMemo(() => Skia.Paint(), []);\n useImperativeHandle(ref, () => paint, [paint]);\n const onDeclare = useMemo(\n () =>\n createDeclaration<PaintProps>((paintProps, children, ctx) =>\n processPaint(paint, ctx.opacity, paintProps, children)\n ),\n [paint]\n );\n return <skDeclaration onDeclare={onDeclare} {...props} />;\n }\n);\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,YAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,QAAd;AACA,cAAc,gBAAd;AACA,cAAc,eAAd;AACA,cAAc,gBAAd;AACA,cAAc,eAAd;AACA,cAAc,eAAd;AACA,cAAc,WAAd;AAEA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,SAAd;AACA,cAAc,
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,YAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,QAAd;AACA,cAAc,gBAAd;AACA,cAAc,eAAd;AACA,cAAc,gBAAd;AACA,cAAc,eAAd;AACA,cAAc,eAAd;AACA,cAAc,WAAd;AAEA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd","sourcesContent":["export * from \"./shapes\";\nexport * from \"./backdrop\";\nexport * from \"./image\";\nexport * from \"./shaders\";\nexport * from \"./text\";\nexport * from \"./colorFilters\";\nexport * from \"./maskFilters\";\nexport * from \"./imageFilters\";\nexport * from \"./pathEffects\";\nexport * from \"../processors\";\nexport * from \"./Picture\";\n\nexport * from \"./Group\";\nexport * from \"./Mask\";\nexport * from \"./Paint\";\nexport * from \"./Compose\";\nexport * from \"./Blend\";\nexport * from \"./Drawing\";\n"]}
|
@@ -6,6 +6,7 @@ import { Node } from "./Node";
|
|
6
6
|
export const createDeclaration = cb => cb;
|
7
7
|
export const useDeclaration = (cb, deps) => // eslint-disable-next-line react-hooks/exhaustive-deps
|
8
8
|
useCallback(cb, deps !== null && deps !== void 0 ? deps : []);
|
9
|
+
export const isDeclarationNode = node => node instanceof DeclarationNode;
|
9
10
|
export class DeclarationNode extends Node {
|
10
11
|
constructor(depMgr, onDeclare, props) {
|
11
12
|
super(depMgr, props);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Declaration.tsx"],"names":["useCallback","isAnimated","materialize","Node","createDeclaration","cb","useDeclaration","deps","DeclarationNode","constructor","depMgr","onDeclare","props","memoizable","_props","draw","ctx","children","visit","obj"],"mappings":";;AACA,SAASA,WAAT,QAA4B,OAA5B;AAKA,SAASC,UAAT,EAAqBC,WAArB,QAAwC,eAAxC;AAGA,SAASC,IAAT,QAAqB,QAArB;AAUA,OAAO,MAAMC,iBAAiB,GAC5BC,EAD+B,IAEJA,EAFtB;AAIP,OAAO,MAAMC,cAAc,GAAG,CAC5BD,EAD4B,EAE5BE,IAF4B,KAI5B;AACAP,WAAW,CAACK,EAAD,EAAKE,IAAL,aAAKA,IAAL,cAAKA,IAAL,GAAa,EAAb,CALN;
|
1
|
+
{"version":3,"sources":["Declaration.tsx"],"names":["useCallback","isAnimated","materialize","Node","createDeclaration","cb","useDeclaration","deps","isDeclarationNode","node","DeclarationNode","constructor","depMgr","onDeclare","props","memoizable","_props","draw","ctx","children","visit","obj"],"mappings":";;AACA,SAASA,WAAT,QAA4B,OAA5B;AAKA,SAASC,UAAT,EAAqBC,WAArB,QAAwC,eAAxC;AAGA,SAASC,IAAT,QAAqB,QAArB;AAUA,OAAO,MAAMC,iBAAiB,GAC5BC,EAD+B,IAEJA,EAFtB;AAIP,OAAO,MAAMC,cAAc,GAAG,CAC5BD,EAD4B,EAE5BE,IAF4B,KAI5B;AACAP,WAAW,CAACK,EAAD,EAAKE,IAAL,aAAKA,IAAL,cAAKA,IAAL,GAAa,EAAb,CALN;AAOP,OAAO,MAAMC,iBAAiB,GAC5BC,IAD+B,IAEMA,IAAI,YAAYC,eAFhD;AAQP,OAAO,MAAMA,eAAN,SAAiCP,IAAjC,CAAyC;AAG9CQ,EAAAA,WAAW,CACTC,MADS,EAETC,SAFS,EAGTC,KAHS,EAIT;AACA,UAAMF,MAAN,EAAcE,KAAd;;AADA;;AAEA,UAAMC,UAAN,GAAmB,CAACd,UAAU,CAACa,KAAD,CAA9B;AACA,SAAKD,SAAL,GAAiBA,SAAjB;AACD;;AAEQ,MAALC,KAAK,CAACA,KAAD,EAA0B;AACjC,SAAKC,UAAL,GAAkB,CAACd,UAAU,CAACa,KAAD,CAA7B;AACA,UAAMA,KAAN,GAAcA,KAAd;AACD;;AAEQ,MAALA,KAAK,GAAG;AACV,WAAO,KAAKE,MAAZ;AACD;;AAEDC,EAAAA,IAAI,CAACC,GAAD,EAAsB;AACxB,UAAMC,QAAQ,GAAG,KAAKC,KAAL,CAAWF,GAAX,CAAjB;AACA,UAAMJ,KAAK,GAAGZ,WAAW,CAAC,KAAKY,KAAN,CAAzB;AACA,UAAMO,GAAG,GAAG,KAAKR,SAAL,CAAeC,KAAf,EAAsBK,QAAtB,EAAgCD,GAAhC,CAAZ;AACA,WAAOG,GAAP;AACD;;AA3B6C","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useCallback } from \"react\";\n\nimport type { DrawingContext } from \"../DrawingContext\";\nimport type { SkJSIInstance } from \"../../skia/JsiInstance\";\nimport type { AnimatedProps } from \"../processors\";\nimport { isAnimated, materialize } from \"../processors\";\nimport type { DependencyManager } from \"../DependencyManager\";\n\nimport { Node } from \"./Node\";\n\nexport type DeclarationResult = SkJSIInstance<string> | null;\n\ntype DeclarationCallback<T> = (\n props: T,\n children: DeclarationResult[],\n ctx: DrawingContext\n) => DeclarationResult;\n\nexport const createDeclaration = <T,>(\n cb: DeclarationCallback<T>\n): DeclarationCallback<T> => cb;\n\nexport const useDeclaration = <P,>(\n cb: DeclarationCallback<P>,\n deps?: DependencyList\n) =>\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useCallback(cb, deps ?? []);\n\nexport const isDeclarationNode = (\n node: Node\n): node is DeclarationNode<unknown> => node instanceof DeclarationNode;\n\nexport interface DeclarationProps<P> {\n onDeclare: DeclarationCallback<P>;\n}\n\nexport class DeclarationNode<P> extends Node<P> {\n private onDeclare: DeclarationCallback<P>;\n\n constructor(\n depMgr: DependencyManager,\n onDeclare: DeclarationCallback<P>,\n props: AnimatedProps<P>\n ) {\n super(depMgr, props);\n super.memoizable = !isAnimated(props);\n this.onDeclare = onDeclare;\n }\n\n set props(props: AnimatedProps<P>) {\n this.memoizable = !isAnimated(props);\n super.props = props;\n }\n\n get props() {\n return this._props;\n }\n\n draw(ctx: DrawingContext) {\n const children = this.visit(ctx);\n const props = materialize(this.props);\n const obj = this.onDeclare(props, children, ctx);\n return obj;\n }\n}\n"]}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
2
2
|
|
3
3
|
import { useCallback } from "react";
|
4
|
-
import { processPaint
|
4
|
+
import { processPaint } from "../processors";
|
5
5
|
import { materialize } from "../processors/Animations/Animations";
|
6
6
|
import { isPaint } from "../../skia";
|
7
7
|
import { Node } from "./Node";
|
@@ -26,23 +26,11 @@ export class DrawingNode extends Node {
|
|
26
26
|
if (this.skipProcessing) {
|
27
27
|
this.onDraw(ctx, drawingProps, this);
|
28
28
|
} else {
|
29
|
-
const
|
30
|
-
processPaint(
|
31
|
-
|
32
|
-
|
33
|
-
[selectedPaint, ...this.children.map(child => {
|
34
|
-
//if (child.type === NodeType.Declaration) {
|
35
|
-
const ret = child.draw(ctx);
|
36
|
-
|
37
|
-
if (ret) {
|
38
|
-
return ret;
|
39
|
-
} //}
|
40
|
-
|
41
|
-
|
42
|
-
return null;
|
43
|
-
}).filter(isPaint)].forEach(paint => {
|
29
|
+
const declarations = this.visit(ctx);
|
30
|
+
const paint = processPaint(ctx.paint.copy(), ctx.opacity, drawingProps, declarations);
|
31
|
+
[paint, ...declarations.filter(isPaint)].forEach(currentPaint => {
|
44
32
|
this.onDraw({ ...ctx,
|
45
|
-
paint
|
33
|
+
paint: currentPaint
|
46
34
|
}, drawingProps, this);
|
47
35
|
});
|
48
36
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Drawing.tsx"],"names":["useCallback","processPaint","
|
1
|
+
{"version":3,"sources":["Drawing.tsx"],"names":["useCallback","processPaint","materialize","isPaint","Node","createDrawing","cb","useDrawing","deps","DrawingNode","constructor","depMgr","onDraw","skipProcessing","props","draw","ctx","drawingProps","declarations","visit","paint","copy","opacity","filter","forEach","currentPaint"],"mappings":";;AACA,SAASA,WAAT,QAA4B,OAA5B;AAGA,SAASC,YAAT,QAA6B,eAA7B;AAEA,SAASC,WAAT,QAA4B,qCAA5B;AACA,SAASC,OAAT,QAAwB,YAAxB;AAGA,SAASC,IAAT,QAAqB,QAArB;AAUA,OAAO,MAAMC,aAAa,GAAQC,EAAL,IAC3BA,EADK;AAGP,OAAO,MAAMC,UAAU,GAAG,CAAKD,EAAL,EAA4BE,IAA5B,KACxB;AACAR,WAAW,CAACM,EAAD,EAAKE,IAAL,aAAKA,IAAL,cAAKA,IAAL,GAAa,EAAb,CAFN;AAUP,OAAO,MAAMC,WAAN,SAA6BL,IAA7B,CAAqC;AAI1CM,EAAAA,WAAW,CACTC,MADS,EAETC,MAFS,EAGTC,cAHS,EAITC,KAJS,EAKT;AACA,UAAMH,MAAN,EAAcG,KAAd;;AADA;;AAAA;;AAEA,SAAKF,MAAL,GAAcA,MAAd;AACA,SAAKC,cAAL,GAAsBA,cAAtB;AACD;;AAEDE,EAAAA,IAAI,CAACC,GAAD,EAAsB;AACxB,UAAMC,YAAY,GAAGf,WAAW,CAAC,KAAKY,KAAN,CAAhC;;AACA,QAAI,KAAKD,cAAT,EAAyB;AACvB,WAAKD,MAAL,CAAYI,GAAZ,EAAiBC,YAAjB,EAA+B,IAA/B;AACD,KAFD,MAEO;AACL,YAAMC,YAAY,GAAG,KAAKC,KAAL,CAAWH,GAAX,CAArB;AACA,YAAMI,KAAK,GAAGnB,YAAY,CACxBe,GAAG,CAACI,KAAJ,CAAUC,IAAV,EADwB,EAExBL,GAAG,CAACM,OAFoB,EAGxBL,YAHwB,EAIxBC,YAJwB,CAA1B;AAMA,OAACE,KAAD,EAAQ,GAAGF,YAAY,CAACK,MAAb,CAAoBpB,OAApB,CAAX,EAAyCqB,OAAzC,CAAkDC,YAAD,IAAkB;AACjE,aAAKb,MAAL,CAAY,EAAE,GAAGI,GAAL;AAAUI,UAAAA,KAAK,EAAEK;AAAjB,SAAZ,EAA6CR,YAA7C,EAA2D,IAA3D;AACD,OAFD;AAGD;AACF;;AA/ByC","sourcesContent":["import type { DependencyList, ReactNode } from \"react\";\nimport { useCallback } from \"react\";\n\nimport type { DrawingContext } from \"../DrawingContext\";\nimport { processPaint } from \"../processors\";\nimport type { AnimatedProps } from \"../processors/Animations/Animations\";\nimport { materialize } from \"../processors/Animations/Animations\";\nimport { isPaint } from \"../../skia\";\nimport type { DependencyManager } from \"../DependencyManager\";\n\nimport { Node } from \"./Node\";\n\ntype DrawingCallback<P> = (\n ctx: DrawingContext,\n props: P,\n node: Node<P>\n) => void;\n\ntype OnDrawCallback<P> = (ctx: DrawingContext, props: P, node: Node<P>) => void;\n\nexport const createDrawing = <P,>(cb: OnDrawCallback<P>): DrawingCallback<P> =>\n cb;\n\nexport const useDrawing = <P,>(cb: OnDrawCallback<P>, deps?: DependencyList) =>\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useCallback(cb, deps ?? []);\n\nexport type DrawingProps<T> = {\n onDraw: DrawingCallback<T>;\n skipProcessing?: boolean;\n children?: ReactNode | ReactNode[];\n};\n\nexport class DrawingNode<P> extends Node<P> {\n onDraw: DrawingCallback<P>;\n skipProcessing: boolean;\n\n constructor(\n depMgr: DependencyManager,\n onDraw: DrawingCallback<P>,\n skipProcessing: boolean,\n props: AnimatedProps<P>\n ) {\n super(depMgr, props);\n this.onDraw = onDraw;\n this.skipProcessing = skipProcessing;\n }\n\n draw(ctx: DrawingContext) {\n const drawingProps = materialize(this.props);\n if (this.skipProcessing) {\n this.onDraw(ctx, drawingProps, this);\n } else {\n const declarations = this.visit(ctx);\n const paint = processPaint(\n ctx.paint.copy(),\n ctx.opacity,\n drawingProps,\n declarations\n );\n [paint, ...declarations.filter(isPaint)].forEach((currentPaint) => {\n this.onDraw({ ...ctx, paint: currentPaint }, drawingProps, this);\n });\n }\n }\n}\n"]}
|
@@ -1,6 +1,5 @@
|
|
1
1
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
2
2
|
|
3
|
-
import { isPaint } from "../../skia";
|
4
3
|
export let NodeType;
|
5
4
|
|
6
5
|
(function (NodeType) {
|
@@ -16,7 +15,7 @@ export class Node {
|
|
16
15
|
|
17
16
|
_defineProperty(this, "memoizable", false);
|
18
17
|
|
19
|
-
_defineProperty(this, "memoized",
|
18
|
+
_defineProperty(this, "memoized", null);
|
20
19
|
|
21
20
|
_defineProperty(this, "parent", void 0);
|
22
21
|
|
@@ -38,26 +37,21 @@ export class Node {
|
|
38
37
|
return this._props;
|
39
38
|
}
|
40
39
|
|
41
|
-
visit(ctx) {
|
40
|
+
visit(ctx, children) {
|
42
41
|
const returnedValues = [];
|
43
|
-
|
44
|
-
this.children.forEach(child => {
|
42
|
+
(children !== null && children !== void 0 ? children : this.children).forEach(child => {
|
45
43
|
if (!child.memoized) {
|
46
|
-
const ret = child.draw(
|
44
|
+
const ret = child.draw(ctx);
|
47
45
|
|
48
46
|
if (ret) {
|
49
|
-
if (isPaint(ret)) {
|
50
|
-
currentCtx = { ...currentCtx,
|
51
|
-
paint: ret
|
52
|
-
};
|
53
|
-
}
|
54
|
-
|
55
47
|
returnedValues.push(ret);
|
56
|
-
}
|
57
48
|
|
58
|
-
|
59
|
-
|
49
|
+
if (child.memoizable) {
|
50
|
+
child.memoized = ret;
|
51
|
+
}
|
60
52
|
}
|
53
|
+
} else {
|
54
|
+
returnedValues.push(child.memoized);
|
61
55
|
}
|
62
56
|
});
|
63
57
|
return returnedValues;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Node.ts"],"names":["
|
1
|
+
{"version":3,"sources":["Node.ts"],"names":["NodeType","Node","constructor","depMgr","props","_props","unSubscribeNode","subscribeNode","visit","ctx","children","returnedValues","forEach","child","memoized","ret","draw","push","memoizable"],"mappings":";;AAKA,WAAYA,QAAZ;;WAAYA,Q;AAAAA,EAAAA,Q;AAAAA,EAAAA,Q;GAAAA,Q,KAAAA,Q;;AAOZ,OAAO,MAAeC,IAAf,CAAiC;AAQtCC,EAAAA,WAAW,CAACC,MAAD,EAA4BC,KAA5B,EAAqD;AAAA,sCAPpC,EAOoC;;AAAA;;AAAA,wCALnD,KAKmD;;AAAA,sCAJ3B,IAI2B;;AAAA;;AAAA;;AAC9D,SAAKC,MAAL,GAAcD,KAAd;AACA,SAAKD,MAAL,GAAcA,MAAd;AACA,SAAKA,MAAL,CAAYG,eAAZ,CAA4B,IAA5B;AACA,SAAKH,MAAL,CAAYI,aAAZ,CAA0B,IAA1B,EAAgCH,KAAhC;AACD;;AAIQ,MAALA,KAAK,CAACA,KAAD,EAA0B;AACjC,SAAKD,MAAL,CAAYG,eAAZ,CAA4B,IAA5B;AACA,SAAKH,MAAL,CAAYI,aAAZ,CAA0B,IAA1B,EAAgCH,KAAhC;AACA,SAAKC,MAAL,GAAcD,KAAd;AACD;;AAEQ,MAALA,KAAK,GAAG;AACV,WAAO,KAAKC,MAAZ;AACD;;AAEDG,EAAAA,KAAK,CAACC,GAAD,EAAsBC,QAAtB,EAAyC;AAC5C,UAAMC,cAAkD,GAAG,EAA3D;AACA,KAACD,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,KAAKA,QAAlB,EAA4BE,OAA5B,CAAqCC,KAAD,IAAW;AAC7C,UAAI,CAACA,KAAK,CAACC,QAAX,EAAqB;AACnB,cAAMC,GAAG,GAAGF,KAAK,CAACG,IAAN,CAAWP,GAAX,CAAZ;;AACA,YAAIM,GAAJ,EAAS;AACPJ,UAAAA,cAAc,CAACM,IAAf,CAAoBF,GAApB;;AACA,cAAIF,KAAK,CAACK,UAAV,EAAsB;AACpBL,YAAAA,KAAK,CAACC,QAAN,GAAiBC,GAAjB;AACD;AACF;AACF,OARD,MAQO;AACLJ,QAAAA,cAAc,CAACM,IAAf,CAAoBJ,KAAK,CAACC,QAA1B;AACD;AACF,KAZD;AAaA,WAAOH,cAAP;AACD;;AA3CqC","sourcesContent":["import type { SkJSIInstance } from \"../../skia/JsiInstance\";\nimport type { DependencyManager } from \"../DependencyManager\";\nimport type { DrawingContext } from \"../DrawingContext\";\nimport type { AnimatedProps } from \"../processors\";\n\nexport enum NodeType {\n Declaration = \"skDeclaration\",\n Drawing = \"skDrawing\",\n}\n\ntype DeclarationResult = SkJSIInstance<string> | null;\n\nexport abstract class Node<P = unknown> {\n readonly children: Node[] = [];\n _props: AnimatedProps<P>;\n memoizable = false;\n memoized: DeclarationResult | null = null;\n parent?: Node;\n depMgr: DependencyManager;\n\n constructor(depMgr: DependencyManager, props: AnimatedProps<P>) {\n this._props = props;\n this.depMgr = depMgr;\n this.depMgr.unSubscribeNode(this);\n this.depMgr.subscribeNode(this, props);\n }\n\n abstract draw(ctx: DrawingContext): void | DeclarationResult;\n\n set props(props: AnimatedProps<P>) {\n this.depMgr.unSubscribeNode(this);\n this.depMgr.subscribeNode(this, props);\n this._props = props;\n }\n\n get props() {\n return this._props;\n }\n\n visit(ctx: DrawingContext, children?: Node[]) {\n const returnedValues: Exclude<DeclarationResult, null>[] = [];\n (children ?? this.children).forEach((child) => {\n if (!child.memoized) {\n const ret = child.draw(ctx);\n if (ret) {\n returnedValues.push(ret);\n if (child.memoizable) {\n child.memoized = ret;\n }\n }\n } else {\n returnedValues.push(child.memoized);\n }\n });\n return returnedValues;\n }\n}\n"]}
|
@@ -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} />;
|