@shopify/react-native-skia 0.1.115 → 0.1.116
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +39 -2
- package/lib/commonjs/renderer/components/Group.js +25 -17
- package/lib/commonjs/renderer/components/Group.js.map +1 -1
- package/lib/commonjs/renderer/components/shapes/FitBox.js +9 -5
- package/lib/commonjs/renderer/components/shapes/FitBox.js.map +1 -1
- package/lib/commonjs/skia/index.js +14 -0
- package/lib/commonjs/skia/index.js.map +1 -1
- package/lib/commonjs/views/SkiaView.js +0 -39
- package/lib/commonjs/views/SkiaView.js.map +1 -1
- package/lib/commonjs/views/types.js.map +1 -1
- package/lib/module/renderer/components/Group.js +24 -16
- package/lib/module/renderer/components/Group.js.map +1 -1
- package/lib/module/renderer/components/shapes/FitBox.js +5 -4
- package/lib/module/renderer/components/shapes/FitBox.js.map +1 -1
- package/lib/module/skia/index.js +1 -0
- package/lib/module/skia/index.js.map +1 -1
- package/lib/module/views/SkiaView.js +0 -39
- package/lib/module/views/SkiaView.js.map +1 -1
- package/lib/module/views/types.js.map +1 -1
- package/lib/typescript/src/renderer/Canvas.d.ts +1 -1
- package/lib/typescript/src/renderer/components/shapes/FitBox.d.ts +9 -0
- package/lib/typescript/src/skia/index.d.ts +1 -0
- package/lib/typescript/src/views/SkiaView.d.ts +4 -13
- package/lib/typescript/src/views/types.d.ts +2 -1
- package/package.json +7 -7
- package/src/renderer/components/Group.tsx +21 -14
- package/src/renderer/components/shapes/FitBox.tsx +6 -4
- package/src/skia/index.ts +1 -0
- package/src/views/SkiaView.tsx +5 -39
- package/src/views/types.ts +2 -1
package/README.md
CHANGED
|
@@ -1,7 +1,44 @@
|
|
|
1
1
|
# React Native Skia
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
React Native Skia brings the [Skia Graphics Library](https://skia.org/) to React Native.
|
|
4
|
+
Skia serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox, Firefox OS, and many other products.
|
|
5
|
+
|
|
6
|
+
Checkout the full documentation [here](https://shopify.github.io/react-native-skia).
|
|
7
|
+
|
|
8
|
+
```sh
|
|
9
|
+
yarn add @shopify/react-native-skia
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Or using npm:
|
|
4
13
|
|
|
5
14
|
```sh
|
|
6
15
|
npm install @shopify/react-native-skia
|
|
7
|
-
```
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## iOS
|
|
19
|
+
|
|
20
|
+
Run `pod install` on the `ios/` directory.
|
|
21
|
+
|
|
22
|
+
## Android
|
|
23
|
+
|
|
24
|
+
> **Version compatibility**: `react-native@>=0.66` is required.
|
|
25
|
+
|
|
26
|
+
Currently, you will need Android NDK to be installed.
|
|
27
|
+
If you have Android Studio installed, make sure `$ANDROID_NDK` is available.
|
|
28
|
+
`ANDROID_NDK=/Users/username/Library/Android/sdk/ndk-bundle` for instance.
|
|
29
|
+
|
|
30
|
+
If the NDK is not installed, you can install it via Android Studio by going to the menu _File > Project Structure_
|
|
31
|
+
|
|
32
|
+
And then the _SDK Location_ section. It will show you the NDK path, or the option to download it if you don't have it installed.
|
|
33
|
+
|
|
34
|
+
## Playground
|
|
35
|
+
|
|
36
|
+
We have an example project you can play with [here](https://github.com/Shopify/react-native-skia/tree/main/example).
|
|
37
|
+
|
|
38
|
+
```sh
|
|
39
|
+
yarn
|
|
40
|
+
cd package && yarn && cd ..
|
|
41
|
+
cd example && yarn && yarn start
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
To run the example project on iOS, you will need to run `pod install`, and on Android, you will also need Android NDK to be installed ([see here](#android)).
|
|
@@ -32,33 +32,41 @@ const onDraw = (0, _nodes.createDrawing)((ctx, _ref, node) => {
|
|
|
32
32
|
} = ctx;
|
|
33
33
|
const paint = (0, _processors.selectPaint)(ctx.paint, groupProps);
|
|
34
34
|
(0, _processors.processPaint)(paint, opacity, groupProps);
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
35
|
+
const hasTransform = !!groupProps.transform || !!groupProps.matrix;
|
|
36
|
+
const hasClip = !!clip;
|
|
37
|
+
const shouldSave = hasTransform || hasClip;
|
|
38
|
+
|
|
39
|
+
if (shouldSave) {
|
|
40
|
+
if (layer) {
|
|
41
|
+
if (typeof layer === "boolean") {
|
|
42
|
+
canvas.saveLayer();
|
|
43
|
+
} else if (isSkPaint(layer)) {
|
|
44
|
+
canvas.saveLayer(layer);
|
|
45
|
+
} else {
|
|
46
|
+
var _layer$current;
|
|
47
|
+
|
|
48
|
+
canvas.saveLayer((_layer$current = layer.current) !== null && _layer$current !== void 0 ? _layer$current : undefined);
|
|
49
|
+
}
|
|
41
50
|
} else {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
canvas.saveLayer((_layer$current = layer.current) !== null && _layer$current !== void 0 ? _layer$current : undefined);
|
|
51
|
+
canvas.save();
|
|
45
52
|
}
|
|
46
|
-
} else {
|
|
47
|
-
canvas.save();
|
|
48
|
-
}
|
|
49
53
|
|
|
50
|
-
|
|
54
|
+
(0, _processors.processTransform)(ctx, groupProps);
|
|
51
55
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
56
|
+
if (clip) {
|
|
57
|
+
const op = invertClip ? _skia.ClipOp.Difference : _skia.ClipOp.Intersect;
|
|
58
|
+
(0, _processors.processClip)(canvas, clip, op);
|
|
59
|
+
}
|
|
55
60
|
}
|
|
56
61
|
|
|
57
62
|
node.visit({ ...ctx,
|
|
58
63
|
paint,
|
|
59
64
|
opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity
|
|
60
65
|
});
|
|
61
|
-
|
|
66
|
+
|
|
67
|
+
if (shouldSave) {
|
|
68
|
+
canvas.restore();
|
|
69
|
+
}
|
|
62
70
|
});
|
|
63
71
|
|
|
64
72
|
const Group = props => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Group.tsx"],"names":["isSkPaint","obj","__typename__","onDraw","ctx","node","layer","clip","invertClip","groupProps","canvas","opacity","paint","saveLayer","current","undefined","save","op","ClipOp","Difference","Intersect","visit","restore","Group","props"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AAYA;;;;;;AAEA,MAAMA,SAAS,GAAIC,GAAD,IAChB,kBAAkBA,GAAlB,IAAyBA,GAAG,CAACC,YAAJ,KAAqB,OADhD;;AASA,MAAMC,MAAM,GAAG,0BACb,CAACC,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,KAAK,GAAG,6BAAYR,GAAG,CAACQ,KAAhB,EAAuBH,UAAvB,CAAd;AACA,gCAAaG,KAAb,EAAoBD,OAApB,EAA6BF,UAA7B;;AACA,
|
|
1
|
+
{"version":3,"sources":["Group.tsx"],"names":["isSkPaint","obj","__typename__","onDraw","ctx","node","layer","clip","invertClip","groupProps","canvas","opacity","paint","hasTransform","transform","matrix","hasClip","shouldSave","saveLayer","current","undefined","save","op","ClipOp","Difference","Intersect","visit","restore","Group","props"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AAYA;;;;;;AAEA,MAAMA,SAAS,GAAIC,GAAD,IAChB,kBAAkBA,GAAlB,IAAyBA,GAAG,CAACC,YAAJ,KAAqB,OADhD;;AASA,MAAMC,MAAM,GAAG,0BACb,CAACC,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,KAAK,GAAG,6BAAYR,GAAG,CAACQ,KAAhB,EAAuBH,UAAvB,CAAd;AACA,gCAAaG,KAAb,EAAoBD,OAApB,EAA6BF,UAA7B;AACA,QAAMI,YAAY,GAAG,CAAC,CAACJ,UAAU,CAACK,SAAb,IAA0B,CAAC,CAACL,UAAU,CAACM,MAA5D;AACA,QAAMC,OAAO,GAAG,CAAC,CAACT,IAAlB;AACA,QAAMU,UAAU,GAAGJ,YAAY,IAAIG,OAAnC;;AACA,MAAIC,UAAJ,EAAgB;AACd,QAAIX,KAAJ,EAAW;AACT,UAAI,OAAOA,KAAP,KAAiB,SAArB,EAAgC;AAC9BI,QAAAA,MAAM,CAACQ,SAAP;AACD,OAFD,MAEO,IAAIlB,SAAS,CAACM,KAAD,CAAb,EAAsB;AAC3BI,QAAAA,MAAM,CAACQ,SAAP,CAAiBZ,KAAjB;AACD,OAFM,MAEA;AAAA;;AACLI,QAAAA,MAAM,CAACQ,SAAP,mBAAiBZ,KAAK,CAACa,OAAvB,2DAAkCC,SAAlC;AACD;AACF,KARD,MAQO;AACLV,MAAAA,MAAM,CAACW,IAAP;AACD;;AACD,sCAAiBjB,GAAjB,EAAsBK,UAAtB;;AACA,QAAIF,IAAJ,EAAU;AACR,YAAMe,EAAE,GAAGd,UAAU,GAAGe,aAAOC,UAAV,GAAuBD,aAAOE,SAAnD;AACA,mCAAYf,MAAZ,EAAoBH,IAApB,EAA0Be,EAA1B;AACD;AACF;;AACDjB,EAAAA,IAAI,CAACqB,KAAL,CAAW,EACT,GAAGtB,GADM;AAETQ,IAAAA,KAFS;AAGTD,IAAAA,OAAO,EAAEF,UAAU,CAACE,OAAX,GAAqBF,UAAU,CAACE,OAAX,GAAqBA,OAA1C,GAAoDA;AAHpD,GAAX;;AAKA,MAAIM,UAAJ,EAAgB;AACdP,IAAAA,MAAM,CAACiB,OAAP;AACD;AACF,CAlCY,CAAf;;AAqCO,MAAMC,KAAK,GAAIC,KAAD,IAAsC;AACzD,sBAAO;AAAW,IAAA,MAAM,EAAE1B;AAAnB,KAA+B0B,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 {\n processTransform,\n selectPaint,\n processPaint,\n processClip,\n} from \"../processors\";\nimport type {\n CustomPaintProps,\n TransformProps,\n AnimatedProps,\n ClipDef,\n} from \"../processors\";\nimport { createDrawing } from \"../nodes\";\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 paint = selectPaint(ctx.paint, groupProps);\n processPaint(paint, opacity, groupProps);\n const hasTransform = !!groupProps.transform || !!groupProps.matrix;\n const hasClip = !!clip;\n const shouldSave = hasTransform || hasClip;\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 ...ctx,\n paint,\n opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,\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"]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.FitBox = void 0;
|
|
6
|
+
exports.fitbox = exports.FitBox = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
@@ -15,6 +15,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
15
15
|
|
|
16
16
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
17
|
|
|
18
|
+
const fitbox = (fit, src, dst) => {
|
|
19
|
+
const rects = (0, _image.fitRects)(fit, src, dst);
|
|
20
|
+
return (0, _image.rect2rect)(rects.src, rects.dst);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
exports.fitbox = fitbox;
|
|
24
|
+
|
|
18
25
|
const FitBox = _ref => {
|
|
19
26
|
let {
|
|
20
27
|
fit,
|
|
@@ -22,10 +29,7 @@ const FitBox = _ref => {
|
|
|
22
29
|
dst,
|
|
23
30
|
children
|
|
24
31
|
} = _ref;
|
|
25
|
-
const transform = (0, _react.useMemo)(() =>
|
|
26
|
-
const rects = (0, _image.fitRects)(fit, src, dst);
|
|
27
|
-
return (0, _image.rect2rect)(rects.src, rects.dst);
|
|
28
|
-
}, [dst, fit, src]);
|
|
32
|
+
const transform = (0, _react.useMemo)(() => fitbox(fit, src, dst), [dst, fit, src]);
|
|
29
33
|
return /*#__PURE__*/_react.default.createElement(_Group.Group, {
|
|
30
34
|
transform: transform
|
|
31
35
|
}, children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["FitBox.tsx"],"names":["
|
|
1
|
+
{"version":3,"sources":["FitBox.tsx"],"names":["fitbox","fit","src","dst","rects","FitBox","children","transform","defaultProps"],"mappings":";;;;;;;AACA;;AAGA;;AAEA;;;;;;AASO,MAAMA,MAAM,GAAG,CAACC,GAAD,EAAWC,GAAX,EAAwBC,GAAxB,KAAwC;AAC5D,QAAMC,KAAK,GAAG,qBAASH,GAAT,EAAcC,GAAd,EAAmBC,GAAnB,CAAd;AACA,SAAO,sBAAUC,KAAK,CAACF,GAAhB,EAAqBE,KAAK,CAACD,GAA3B,CAAP;AACD,CAHM;;;;AAKA,MAAME,MAAM,GAAG,QAA2C;AAAA,MAA1C;AAAEJ,IAAAA,GAAF;AAAOC,IAAAA,GAAP;AAAYC,IAAAA,GAAZ;AAAiBG,IAAAA;AAAjB,GAA0C;AAC/D,QAAMC,SAAS,GAAG,oBAAQ,MAAMP,MAAM,CAACC,GAAD,EAAMC,GAAN,EAAWC,GAAX,CAApB,EAAqC,CAACA,GAAD,EAAMF,GAAN,EAAWC,GAAX,CAArC,CAAlB;AACA,sBAAO,6BAAC,YAAD;AAAO,IAAA,SAAS,EAAEK;AAAlB,KAA8BD,QAA9B,CAAP;AACD,CAHM;;;AAKPD,MAAM,CAACG,YAAP,GAAsB;AACpBP,EAAAA,GAAG,EAAE;AADe,CAAtB","sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useMemo } from \"react\";\n\nimport type { Fit } from \"../image\";\nimport { rect2rect, fitRects } from \"../image\";\nimport type { SkRect } from \"../../../skia\";\nimport { Group } from \"../Group\";\n\ninterface FitProps {\n fit: Fit;\n src: SkRect;\n dst: SkRect;\n children: ReactNode | ReactNode[];\n}\n\nexport const fitbox = (fit: Fit, src: SkRect, dst: SkRect) => {\n const rects = fitRects(fit, src, dst);\n return rect2rect(rects.src, rects.dst);\n};\n\nexport const FitBox = ({ fit, src, dst, children }: FitProps) => {\n const transform = useMemo(() => fitbox(fit, src, dst), [dst, fit, src]);\n return <Group transform={transform}>{children}</Group>;\n};\n\nFitBox.defaultProps = {\n fit: \"contain\",\n};\n"]}
|
|
@@ -308,4 +308,18 @@ Object.keys(_Color).forEach(function (key) {
|
|
|
308
308
|
}
|
|
309
309
|
});
|
|
310
310
|
});
|
|
311
|
+
|
|
312
|
+
var _Data = require("./Data");
|
|
313
|
+
|
|
314
|
+
Object.keys(_Data).forEach(function (key) {
|
|
315
|
+
if (key === "default" || key === "__esModule") return;
|
|
316
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
317
|
+
if (key in exports && exports[key] === _Data[key]) return;
|
|
318
|
+
Object.defineProperty(exports, key, {
|
|
319
|
+
enumerable: true,
|
|
320
|
+
get: function () {
|
|
321
|
+
return _Data[key];
|
|
322
|
+
}
|
|
323
|
+
});
|
|
324
|
+
});
|
|
311
325
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { Skia } from \"./Skia\";\nexport * from \"./Canvas\";\nexport * from \"./Paint\";\nexport * from \"./Rect\";\nexport * from \"./RRect\";\nexport * from \"./Point\";\nexport * from \"./Path\";\nexport * from \"./Font\";\nexport * from \"./Typeface\";\nexport * from \"./MaskFilter\";\nexport * from \"./ColorFilter\";\nexport * from \"./ImageFilter\";\nexport * from \"./PathEffect\";\nexport * from \"./RuntimeEffect\";\nexport * from \"./Shader\";\nexport * from \"./Image\";\nexport * from \"./Matrix\";\nexport * from \"./SVG\";\nexport * from \"./Surface\";\nexport * from \"./FontMgr\";\nexport * from \"./Vertices\";\nexport * from \"./Color\";\n"]}
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { Skia } from \"./Skia\";\nexport * from \"./Canvas\";\nexport * from \"./Paint\";\nexport * from \"./Rect\";\nexport * from \"./RRect\";\nexport * from \"./Point\";\nexport * from \"./Path\";\nexport * from \"./Font\";\nexport * from \"./Typeface\";\nexport * from \"./MaskFilter\";\nexport * from \"./ColorFilter\";\nexport * from \"./ImageFilter\";\nexport * from \"./PathEffect\";\nexport * from \"./RuntimeEffect\";\nexport * from \"./Shader\";\nexport * from \"./Image\";\nexport * from \"./Matrix\";\nexport * from \"./SVG\";\nexport * from \"./Surface\";\nexport * from \"./FontMgr\";\nexport * from \"./Vertices\";\nexport * from \"./Color\";\nexport * from \"./Data\";\n"]}
|
|
@@ -25,8 +25,6 @@ class SkiaView extends _react.default.Component {
|
|
|
25
25
|
|
|
26
26
|
_defineProperty(this, "_nativeId", void 0);
|
|
27
27
|
|
|
28
|
-
_defineProperty(this, "_animatingValues", []);
|
|
29
|
-
|
|
30
28
|
this._nativeId = SkiaViewNativeId++;
|
|
31
29
|
const {
|
|
32
30
|
onDraw
|
|
@@ -98,43 +96,6 @@ class SkiaView extends _react.default.Component {
|
|
|
98
96
|
assertDrawCallbacksEnabled();
|
|
99
97
|
return SkiaViewApi.registerValuesInView(this._nativeId, values);
|
|
100
98
|
}
|
|
101
|
-
/**
|
|
102
|
-
* Increases the number of animations active in the view.
|
|
103
|
-
*/
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
addAnimation(owner) {
|
|
107
|
-
if (this._animatingValues.findIndex(p => p === owner) === -1) {
|
|
108
|
-
this._animatingValues.push(owner);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
if (this._animatingValues.length === 1) {
|
|
112
|
-
if (this.props.mode === "default" || this.props.mode === undefined) {
|
|
113
|
-
//console.log("SkiaView addAnimation - mode changed to continuous");
|
|
114
|
-
this.setDrawMode("continuous");
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
/**
|
|
119
|
-
* Decreases the number of animations active in the view.
|
|
120
|
-
*/
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
removeAnimation(owner) {
|
|
124
|
-
const indexOfOwner = this._animatingValues.indexOf(owner);
|
|
125
|
-
|
|
126
|
-
if (indexOfOwner !== -1) {
|
|
127
|
-
// Remove
|
|
128
|
-
this._animatingValues = this._animatingValues.filter(p => p !== owner);
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
if (this._animatingValues.length === 0) {
|
|
132
|
-
if (this.props.mode === "default" || this.props.mode === undefined) {
|
|
133
|
-
//console.log("SkiaView removeAnimation - mode changed to default");
|
|
134
|
-
this.setDrawMode("default");
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
99
|
|
|
139
100
|
render() {
|
|
140
101
|
const {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SkiaView.tsx"],"names":["SkiaViewNativeId","NativeSkiaView","SkiaViewApi","global","SkiaView","React","Component","constructor","props","_nativeId","onDraw","assertDrawCallbacksEnabled","setDrawCallback","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","invalidateSkiaView","setDrawMode","mode","registerValues","values","registerValuesInView","
|
|
1
|
+
{"version":3,"sources":["SkiaView.tsx"],"names":["SkiaViewNativeId","NativeSkiaView","SkiaViewApi","global","SkiaView","React","Component","constructor","props","_nativeId","onDraw","assertDrawCallbacksEnabled","setDrawCallback","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","invalidateSkiaView","setDrawMode","mode","registerValues","values","registerValuesInView","render","style","debug","Error"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAYA,IAAIA,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,cAAc,GAAG,yCACrB,qBADqB,CAAvB;AAoBA,MAAM;AAAEC,EAAAA;AAAF,IAAkBC,MAAxB;;AAEO,MAAMC,QAAN,SAAuBC,eAAMC,SAA7B,CAAsD;AAC3DC,EAAAA,WAAW,CAACC,KAAD,EAAuB;AAChC,UAAMA,KAAN;;AADgC;;AAEhC,SAAKC,SAAL,GAAiBT,gBAAgB,EAAjC;AACA,UAAM;AAAEU,MAAAA;AAAF,QAAaF,KAAnB;;AACA,QAAIE,MAAJ,EAAY;AACVC,MAAAA,0BAA0B;AAC1BT,MAAAA,WAAW,CAACU,eAAZ,CAA4B,KAAKH,SAAjC,EAA4CC,MAA5C;AACD;AACF;;AAIkB,MAARG,QAAQ,GAAG;AACpB,WAAO,KAAKJ,SAAZ;AACD;;AAEDK,EAAAA,kBAAkB,CAACC,SAAD,EAA2B;AAC3C,UAAM;AAAEL,MAAAA;AAAF,QAAa,KAAKF,KAAxB;;AACA,QAAIE,MAAM,KAAKK,SAAS,CAACL,MAAzB,EAAiC;AAC/BC,MAAAA,0BAA0B;AAC1BT,MAAAA,WAAW,CAACU,eAAZ,CAA4B,KAAKH,SAAjC,EAA4CC,MAA5C;AACD;AACF;AAED;AACF;AACA;AACA;AACA;;;AACSM,EAAAA,iBAAiB,CAACC,IAAD,EAAgB;AACtCN,IAAAA,0BAA0B;AAC1B,WAAOT,WAAW,CAACc,iBAAZ,CAA8B,KAAKP,SAAnC,EAA8CQ,IAA9C,CAAP;AACD;AAED;AACF;AACA;;;AACSC,EAAAA,MAAM,GAAG;AACdP,IAAAA,0BAA0B;AAC1BT,IAAAA,WAAW,CAACiB,kBAAZ,CAA+B,KAAKV,SAApC;AACD;AAED;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACSW,EAAAA,WAAW,CAACC,IAAD,EAAiB;AACjCV,IAAAA,0BAA0B;AAC1BT,IAAAA,WAAW,CAACkB,WAAZ,CAAwB,KAAKX,SAA7B,EAAwCY,IAAxC;AACD;AAED;AACF;AACA;AACA;AACA;;;AACSC,EAAAA,cAAc,CAACC,MAAD,EAAuC;AAC1DZ,IAAAA,0BAA0B;AAC1B,WAAOT,WAAW,CAACsB,oBAAZ,CAAiC,KAAKf,SAAtC,EAAiDc,MAAjD,CAAP;AACD;;AAEDE,EAAAA,MAAM,GAAG;AACP,UAAM;AAAEC,MAAAA,KAAF;AAASL,MAAAA,IAAT;AAAeM,MAAAA,KAAK,GAAG;AAAvB,QAAiC,KAAKnB,KAA5C;AACA,wBACE,6BAAC,cAAD;AACE,MAAA,KAAK,EAAEkB,KADT;AAEE,MAAA,WAAW,EAAE,KAFf;AAGE,MAAA,QAAQ,EAAG,GAAE,KAAKjB,SAAU,EAH9B;AAIE,MAAA,IAAI,EAAEY,IAJR;AAKE,MAAA,KAAK,EAAEM;AALT,MADF;AASD;;AA9E0D;;;;AAiF7D,MAAMhB,0BAA0B,GAAG,MAAM;AACvC,MACET,WAAW,KAAK,IAAhB,IACAA,WAAW,CAACU,eAAZ,IAA+B,IAD/B,IAEAV,WAAW,CAACiB,kBAAZ,IAAkC,IAHpC,EAIE;AACA,UAAMS,KAAK,CAAC,0BAAD,CAAX;AACD;AACF,CARD","sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkImage, SkRect } from \"../skia\";\nimport type { SkiaReadonlyValue } from \"../values\";\n\nimport type {\n DrawMode,\n SkiaViewProps,\n RNSkiaDrawCallback,\n NativeSkiaViewProps,\n} from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaView = requireNativeComponent<NativeSkiaViewProps>(\n \"ReactNativeSkiaView\"\n);\n\ndeclare global {\n var SkiaViewApi: {\n invalidateSkiaView: (nativeId: number) => void;\n makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n setDrawCallback: (\n nativeId: number,\n callback: RNSkiaDrawCallback | undefined\n ) => void;\n setDrawMode: (nativeId: number, mode: DrawMode) => void;\n registerValuesInView: (\n nativeId: number,\n values: SkiaReadonlyValue<unknown>[]\n ) => () => void;\n };\n}\n\nconst { SkiaViewApi } = global;\n\nexport class SkiaView extends React.Component<SkiaViewProps> {\n constructor(props: SkiaViewProps) {\n super(props);\n this._nativeId = SkiaViewNativeId++;\n const { onDraw } = props;\n if (onDraw) {\n assertDrawCallbacksEnabled();\n SkiaViewApi.setDrawCallback(this._nativeId, onDraw);\n }\n }\n\n private _nativeId: number;\n\n public get nativeId() {\n return this._nativeId;\n }\n\n componentDidUpdate(prevProps: SkiaViewProps) {\n const { onDraw } = this.props;\n if (onDraw !== prevProps.onDraw) {\n assertDrawCallbacksEnabled();\n SkiaViewApi.setDrawCallback(this._nativeId, onDraw);\n }\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n assertDrawCallbacksEnabled();\n return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n }\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n public redraw() {\n assertDrawCallbacksEnabled();\n SkiaViewApi.invalidateSkiaView(this._nativeId);\n }\n\n /**\n * Updates the drawing mode for the skia view. This is the same\n * as declaratively setting the mode property on the SkiaView.\n * There are two drawing modes, \"continuous\" and \"default\",\n * where the continuous mode will continuously redraw the view and\n * the default mode will only redraw when any of the regular react\n * properties are changed like size and margins.\n * @param mode Drawing mode to use.\n */\n public setDrawMode(mode: DrawMode) {\n assertDrawCallbacksEnabled();\n SkiaViewApi.setDrawMode(this._nativeId, mode);\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(values: SkiaReadonlyValue<unknown>[]) {\n assertDrawCallbacksEnabled();\n return SkiaViewApi.registerValuesInView(this._nativeId, values);\n }\n\n render() {\n const { style, mode, debug = false } = this.props;\n return (\n <NativeSkiaView\n style={style}\n collapsable={false}\n nativeID={`${this._nativeId}`}\n mode={mode}\n debug={debug}\n />\n );\n }\n}\n\nconst assertDrawCallbacksEnabled = () => {\n if (\n SkiaViewApi === null ||\n SkiaViewApi.setDrawCallback == null ||\n SkiaViewApi.invalidateSkiaView == null\n ) {\n throw Error(\"Skia Api is not enabled.\");\n }\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["types.ts"],"names":["TouchType"],"mappings":";;;;;;IAWYA,S;;;WAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,yBAAAA,S","sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkCanvas } from \"../skia/Canvas\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n mode?: DrawMode;\n debug?: boolean;\n};\n\nexport enum TouchType {\n Start,\n Active,\n End,\n Cancelled,\n}\n\nexport interface TouchInfo {\n x: number;\n y: number;\n force: number;\n type: TouchType;\n timestamp: number;\n}\n\nexport interface DrawingInfo {\n width: number;\n height: number;\n timestamp: number;\n touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n // points per second\n velocityX: number;\n velocityY: number;\n};\n\nexport type TouchHandlers = {\n onStart?: (touchInfo: TouchInfo) => void;\n onActive?: (touchInfo: ExtendedTouchInfo) => void;\n onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;\n\nexport type
|
|
1
|
+
{"version":3,"sources":["types.ts"],"names":["TouchType"],"mappings":";;;;;;IAWYA,S;;;WAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,yBAAAA,S","sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkCanvas } from \"../skia/Canvas\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n mode?: DrawMode;\n debug?: boolean;\n};\n\nexport enum TouchType {\n Start,\n Active,\n End,\n Cancelled,\n}\n\nexport interface TouchInfo {\n x: number;\n y: number;\n force: number;\n type: TouchType;\n timestamp: number;\n}\n\nexport interface DrawingInfo {\n width: number;\n height: number;\n timestamp: number;\n touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n // points per second\n velocityX: number;\n velocityY: number;\n};\n\nexport type TouchHandlers = {\n onStart?: (touchInfo: TouchInfo) => void;\n onActive?: (touchInfo: ExtendedTouchInfo) => void;\n onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;\n\nexport type SkiaViewProps = {\n style?: ViewProps[\"style\"];\n /**\n * Sets the drawing mode for the skia view. There are two drawing\n * modes, \"continuous\" and \"default\", where the continuous mode will\n * continuously redraw the view, and the default mode will only\n * redraw when any of the regular react properties are changed like\n * sizes and margins.\n */\n mode?: DrawMode;\n /**\n * When set to true the view will display information about the\n * average time it takes to render.\n */\n debug?: boolean;\n /**\n * Draw callback. Will be called whenever the view is invalidated and\n * needs to redraw. This is either caused by a change in a react\n * property, a touch event, or a call to redraw. If the view is in\n * continuous mode the callback will be called 60 frames per second\n * by the native view.\n */\n onDraw?: RNSkiaDrawCallback;\n};\n\n/**\n * Listener interface for value changes\n */\nexport interface ValueListener {\n addListener: (callback: () => void) => number;\n removeListener: (id: number) => void;\n}\n"]}
|
|
@@ -20,33 +20,41 @@ const onDraw = createDrawing((ctx, _ref, node) => {
|
|
|
20
20
|
} = ctx;
|
|
21
21
|
const paint = selectPaint(ctx.paint, groupProps);
|
|
22
22
|
processPaint(paint, opacity, groupProps);
|
|
23
|
+
const hasTransform = !!groupProps.transform || !!groupProps.matrix;
|
|
24
|
+
const hasClip = !!clip;
|
|
25
|
+
const shouldSave = hasTransform || hasClip;
|
|
23
26
|
|
|
24
|
-
if (
|
|
25
|
-
if (
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
if (shouldSave) {
|
|
28
|
+
if (layer) {
|
|
29
|
+
if (typeof layer === "boolean") {
|
|
30
|
+
canvas.saveLayer();
|
|
31
|
+
} else if (isSkPaint(layer)) {
|
|
32
|
+
canvas.saveLayer(layer);
|
|
33
|
+
} else {
|
|
34
|
+
var _layer$current;
|
|
31
35
|
|
|
32
|
-
|
|
36
|
+
canvas.saveLayer((_layer$current = layer.current) !== null && _layer$current !== void 0 ? _layer$current : undefined);
|
|
37
|
+
}
|
|
38
|
+
} else {
|
|
39
|
+
canvas.save();
|
|
33
40
|
}
|
|
34
|
-
} else {
|
|
35
|
-
canvas.save();
|
|
36
|
-
}
|
|
37
41
|
|
|
38
|
-
|
|
42
|
+
processTransform(ctx, groupProps);
|
|
39
43
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
44
|
+
if (clip) {
|
|
45
|
+
const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
|
|
46
|
+
processClip(canvas, clip, op);
|
|
47
|
+
}
|
|
43
48
|
}
|
|
44
49
|
|
|
45
50
|
node.visit({ ...ctx,
|
|
46
51
|
paint,
|
|
47
52
|
opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity
|
|
48
53
|
});
|
|
49
|
-
|
|
54
|
+
|
|
55
|
+
if (shouldSave) {
|
|
56
|
+
canvas.restore();
|
|
57
|
+
}
|
|
50
58
|
});
|
|
51
59
|
export const Group = props => {
|
|
52
60
|
return /*#__PURE__*/React.createElement("skDrawing", _extends({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Group.tsx"],"names":["React","ClipOp","processTransform","selectPaint","processPaint","processClip","createDrawing","isSkPaint","obj","__typename__","onDraw","ctx","node","layer","clip","invertClip","groupProps","canvas","opacity","paint","saveLayer","current","undefined","save","op","Difference","Intersect","visit","restore","Group","props"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAIA,SAASC,MAAT,QAAuB,YAAvB;AACA,SACEC,gBADF,EAEEC,WAFF,EAGEC,YAHF,EAIEC,WAJF,QAKO,eALP;AAYA,SAASC,aAAT,QAA8B,UAA9B;;AAEA,MAAMC,SAAS,GAAIC,GAAD,IAChB,kBAAkBA,GAAlB,IAAyBA,GAAG,CAACC,YAAJ,KAAqB,OADhD;;AASA,MAAMC,MAAM,GAAGJ,aAAa,CAC1B,CAACK,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,KAAK,GAAGhB,WAAW,CAACQ,GAAG,CAACQ,KAAL,EAAYH,UAAZ,CAAzB;AACAZ,EAAAA,YAAY,CAACe,KAAD,EAAQD,OAAR,EAAiBF,UAAjB,CAAZ;;AACA,
|
|
1
|
+
{"version":3,"sources":["Group.tsx"],"names":["React","ClipOp","processTransform","selectPaint","processPaint","processClip","createDrawing","isSkPaint","obj","__typename__","onDraw","ctx","node","layer","clip","invertClip","groupProps","canvas","opacity","paint","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,SACEC,gBADF,EAEEC,WAFF,EAGEC,YAHF,EAIEC,WAJF,QAKO,eALP;AAYA,SAASC,aAAT,QAA8B,UAA9B;;AAEA,MAAMC,SAAS,GAAIC,GAAD,IAChB,kBAAkBA,GAAlB,IAAyBA,GAAG,CAACC,YAAJ,KAAqB,OADhD;;AASA,MAAMC,MAAM,GAAGJ,aAAa,CAC1B,CAACK,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,KAAK,GAAGhB,WAAW,CAACQ,GAAG,CAACQ,KAAL,EAAYH,UAAZ,CAAzB;AACAZ,EAAAA,YAAY,CAACe,KAAD,EAAQD,OAAR,EAAiBF,UAAjB,CAAZ;AACA,QAAMI,YAAY,GAAG,CAAC,CAACJ,UAAU,CAACK,SAAb,IAA0B,CAAC,CAACL,UAAU,CAACM,MAA5D;AACA,QAAMC,OAAO,GAAG,CAAC,CAACT,IAAlB;AACA,QAAMU,UAAU,GAAGJ,YAAY,IAAIG,OAAnC;;AACA,MAAIC,UAAJ,EAAgB;AACd,QAAIX,KAAJ,EAAW;AACT,UAAI,OAAOA,KAAP,KAAiB,SAArB,EAAgC;AAC9BI,QAAAA,MAAM,CAACQ,SAAP;AACD,OAFD,MAEO,IAAIlB,SAAS,CAACM,KAAD,CAAb,EAAsB;AAC3BI,QAAAA,MAAM,CAACQ,SAAP,CAAiBZ,KAAjB;AACD,OAFM,MAEA;AAAA;;AACLI,QAAAA,MAAM,CAACQ,SAAP,mBAAiBZ,KAAK,CAACa,OAAvB,2DAAkCC,SAAlC;AACD;AACF,KARD,MAQO;AACLV,MAAAA,MAAM,CAACW,IAAP;AACD;;AACD1B,IAAAA,gBAAgB,CAACS,GAAD,EAAMK,UAAN,CAAhB;;AACA,QAAIF,IAAJ,EAAU;AACR,YAAMe,EAAE,GAAGd,UAAU,GAAGd,MAAM,CAAC6B,UAAV,GAAuB7B,MAAM,CAAC8B,SAAnD;AACA1B,MAAAA,WAAW,CAACY,MAAD,EAASH,IAAT,EAAee,EAAf,CAAX;AACD;AACF;;AACDjB,EAAAA,IAAI,CAACoB,KAAL,CAAW,EACT,GAAGrB,GADM;AAETQ,IAAAA,KAFS;AAGTD,IAAAA,OAAO,EAAEF,UAAU,CAACE,OAAX,GAAqBF,UAAU,CAACE,OAAX,GAAqBA,OAA1C,GAAoDA;AAHpD,GAAX;;AAKA,MAAIM,UAAJ,EAAgB;AACdP,IAAAA,MAAM,CAACgB,OAAP;AACD;AACF,CAlCyB,CAA5B;AAqCA,OAAO,MAAMC,KAAK,GAAIC,KAAD,IAAsC;AACzD,sBAAO;AAAW,IAAA,MAAM,EAAEzB;AAAnB,KAA+ByB,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 {\n processTransform,\n selectPaint,\n processPaint,\n processClip,\n} from \"../processors\";\nimport type {\n CustomPaintProps,\n TransformProps,\n AnimatedProps,\n ClipDef,\n} from \"../processors\";\nimport { createDrawing } from \"../nodes\";\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 paint = selectPaint(ctx.paint, groupProps);\n processPaint(paint, opacity, groupProps);\n const hasTransform = !!groupProps.transform || !!groupProps.matrix;\n const hasClip = !!clip;\n const shouldSave = hasTransform || hasClip;\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 ...ctx,\n paint,\n opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,\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,6 +1,10 @@
|
|
|
1
1
|
import React, { useMemo } from "react";
|
|
2
2
|
import { rect2rect, fitRects } from "../image";
|
|
3
3
|
import { Group } from "../Group";
|
|
4
|
+
export const fitbox = (fit, src, dst) => {
|
|
5
|
+
const rects = fitRects(fit, src, dst);
|
|
6
|
+
return rect2rect(rects.src, rects.dst);
|
|
7
|
+
};
|
|
4
8
|
export const FitBox = _ref => {
|
|
5
9
|
let {
|
|
6
10
|
fit,
|
|
@@ -8,10 +12,7 @@ export const FitBox = _ref => {
|
|
|
8
12
|
dst,
|
|
9
13
|
children
|
|
10
14
|
} = _ref;
|
|
11
|
-
const transform = useMemo(() =>
|
|
12
|
-
const rects = fitRects(fit, src, dst);
|
|
13
|
-
return rect2rect(rects.src, rects.dst);
|
|
14
|
-
}, [dst, fit, src]);
|
|
15
|
+
const transform = useMemo(() => fitbox(fit, src, dst), [dst, fit, src]);
|
|
15
16
|
return /*#__PURE__*/React.createElement(Group, {
|
|
16
17
|
transform: transform
|
|
17
18
|
}, children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["FitBox.tsx"],"names":["React","useMemo","rect2rect","fitRects","Group","
|
|
1
|
+
{"version":3,"sources":["FitBox.tsx"],"names":["React","useMemo","rect2rect","fitRects","Group","fitbox","fit","src","dst","rects","FitBox","children","transform","defaultProps"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,OAAhB,QAA+B,OAA/B;AAGA,SAASC,SAAT,EAAoBC,QAApB,QAAoC,UAApC;AAEA,SAASC,KAAT,QAAsB,UAAtB;AASA,OAAO,MAAMC,MAAM,GAAG,CAACC,GAAD,EAAWC,GAAX,EAAwBC,GAAxB,KAAwC;AAC5D,QAAMC,KAAK,GAAGN,QAAQ,CAACG,GAAD,EAAMC,GAAN,EAAWC,GAAX,CAAtB;AACA,SAAON,SAAS,CAACO,KAAK,CAACF,GAAP,EAAYE,KAAK,CAACD,GAAlB,CAAhB;AACD,CAHM;AAKP,OAAO,MAAME,MAAM,GAAG,QAA2C;AAAA,MAA1C;AAAEJ,IAAAA,GAAF;AAAOC,IAAAA,GAAP;AAAYC,IAAAA,GAAZ;AAAiBG,IAAAA;AAAjB,GAA0C;AAC/D,QAAMC,SAAS,GAAGX,OAAO,CAAC,MAAMI,MAAM,CAACC,GAAD,EAAMC,GAAN,EAAWC,GAAX,CAAb,EAA8B,CAACA,GAAD,EAAMF,GAAN,EAAWC,GAAX,CAA9B,CAAzB;AACA,sBAAO,oBAAC,KAAD;AAAO,IAAA,SAAS,EAAEK;AAAlB,KAA8BD,QAA9B,CAAP;AACD,CAHM;AAKPD,MAAM,CAACG,YAAP,GAAsB;AACpBP,EAAAA,GAAG,EAAE;AADe,CAAtB","sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useMemo } from \"react\";\n\nimport type { Fit } from \"../image\";\nimport { rect2rect, fitRects } from \"../image\";\nimport type { SkRect } from \"../../../skia\";\nimport { Group } from \"../Group\";\n\ninterface FitProps {\n fit: Fit;\n src: SkRect;\n dst: SkRect;\n children: ReactNode | ReactNode[];\n}\n\nexport const fitbox = (fit: Fit, src: SkRect, dst: SkRect) => {\n const rects = fitRects(fit, src, dst);\n return rect2rect(rects.src, rects.dst);\n};\n\nexport const FitBox = ({ fit, src, dst, children }: FitProps) => {\n const transform = useMemo(() => fitbox(fit, src, dst), [dst, fit, src]);\n return <Group transform={transform}>{children}</Group>;\n};\n\nFitBox.defaultProps = {\n fit: \"contain\",\n};\n"]}
|
package/lib/module/skia/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":["Skia"],"mappings":"AAAA,SAASA,IAAT,QAAqB,QAArB;AACA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,QAAd;AACA,cAAc,YAAd;AACA,cAAc,cAAd;AACA,cAAc,eAAd;AACA,cAAc,eAAd;AACA,cAAc,cAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,UAAd;AACA,cAAc,OAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,SAAd","sourcesContent":["export { Skia } from \"./Skia\";\nexport * from \"./Canvas\";\nexport * from \"./Paint\";\nexport * from \"./Rect\";\nexport * from \"./RRect\";\nexport * from \"./Point\";\nexport * from \"./Path\";\nexport * from \"./Font\";\nexport * from \"./Typeface\";\nexport * from \"./MaskFilter\";\nexport * from \"./ColorFilter\";\nexport * from \"./ImageFilter\";\nexport * from \"./PathEffect\";\nexport * from \"./RuntimeEffect\";\nexport * from \"./Shader\";\nexport * from \"./Image\";\nexport * from \"./Matrix\";\nexport * from \"./SVG\";\nexport * from \"./Surface\";\nexport * from \"./FontMgr\";\nexport * from \"./Vertices\";\nexport * from \"./Color\";\n"]}
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":["Skia"],"mappings":"AAAA,SAASA,IAAT,QAAqB,QAArB;AACA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,QAAd;AACA,cAAc,YAAd;AACA,cAAc,cAAd;AACA,cAAc,eAAd;AACA,cAAc,eAAd;AACA,cAAc,cAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,UAAd;AACA,cAAc,OAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,SAAd;AACA,cAAc,QAAd","sourcesContent":["export { Skia } from \"./Skia\";\nexport * from \"./Canvas\";\nexport * from \"./Paint\";\nexport * from \"./Rect\";\nexport * from \"./RRect\";\nexport * from \"./Point\";\nexport * from \"./Path\";\nexport * from \"./Font\";\nexport * from \"./Typeface\";\nexport * from \"./MaskFilter\";\nexport * from \"./ColorFilter\";\nexport * from \"./ImageFilter\";\nexport * from \"./PathEffect\";\nexport * from \"./RuntimeEffect\";\nexport * from \"./Shader\";\nexport * from \"./Image\";\nexport * from \"./Matrix\";\nexport * from \"./SVG\";\nexport * from \"./Surface\";\nexport * from \"./FontMgr\";\nexport * from \"./Vertices\";\nexport * from \"./Color\";\nexport * from \"./Data\";\n"]}
|
|
@@ -13,8 +13,6 @@ export class SkiaView extends React.Component {
|
|
|
13
13
|
|
|
14
14
|
_defineProperty(this, "_nativeId", void 0);
|
|
15
15
|
|
|
16
|
-
_defineProperty(this, "_animatingValues", []);
|
|
17
|
-
|
|
18
16
|
this._nativeId = SkiaViewNativeId++;
|
|
19
17
|
const {
|
|
20
18
|
onDraw
|
|
@@ -86,43 +84,6 @@ export class SkiaView extends React.Component {
|
|
|
86
84
|
assertDrawCallbacksEnabled();
|
|
87
85
|
return SkiaViewApi.registerValuesInView(this._nativeId, values);
|
|
88
86
|
}
|
|
89
|
-
/**
|
|
90
|
-
* Increases the number of animations active in the view.
|
|
91
|
-
*/
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
addAnimation(owner) {
|
|
95
|
-
if (this._animatingValues.findIndex(p => p === owner) === -1) {
|
|
96
|
-
this._animatingValues.push(owner);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
if (this._animatingValues.length === 1) {
|
|
100
|
-
if (this.props.mode === "default" || this.props.mode === undefined) {
|
|
101
|
-
//console.log("SkiaView addAnimation - mode changed to continuous");
|
|
102
|
-
this.setDrawMode("continuous");
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
/**
|
|
107
|
-
* Decreases the number of animations active in the view.
|
|
108
|
-
*/
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
removeAnimation(owner) {
|
|
112
|
-
const indexOfOwner = this._animatingValues.indexOf(owner);
|
|
113
|
-
|
|
114
|
-
if (indexOfOwner !== -1) {
|
|
115
|
-
// Remove
|
|
116
|
-
this._animatingValues = this._animatingValues.filter(p => p !== owner);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
if (this._animatingValues.length === 0) {
|
|
120
|
-
if (this.props.mode === "default" || this.props.mode === undefined) {
|
|
121
|
-
//console.log("SkiaView removeAnimation - mode changed to default");
|
|
122
|
-
this.setDrawMode("default");
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
87
|
|
|
127
88
|
render() {
|
|
128
89
|
const {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SkiaView.tsx"],"names":["React","requireNativeComponent","SkiaViewNativeId","NativeSkiaView","SkiaViewApi","global","SkiaView","Component","constructor","props","_nativeId","onDraw","assertDrawCallbacksEnabled","setDrawCallback","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","invalidateSkiaView","setDrawMode","mode","registerValues","values","registerValuesInView","
|
|
1
|
+
{"version":3,"sources":["SkiaView.tsx"],"names":["React","requireNativeComponent","SkiaViewNativeId","NativeSkiaView","SkiaViewApi","global","SkiaView","Component","constructor","props","_nativeId","onDraw","assertDrawCallbacksEnabled","setDrawCallback","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","invalidateSkiaView","setDrawMode","mode","registerValues","values","registerValuesInView","render","style","debug","Error"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,sBAAT,QAAuC,cAAvC;AAYA,IAAIC,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,cAAc,GAAGF,sBAAsB,CAC3C,qBAD2C,CAA7C;AAoBA,MAAM;AAAEG,EAAAA;AAAF,IAAkBC,MAAxB;AAEA,OAAO,MAAMC,QAAN,SAAuBN,KAAK,CAACO,SAA7B,CAAsD;AAC3DC,EAAAA,WAAW,CAACC,KAAD,EAAuB;AAChC,UAAMA,KAAN;;AADgC;;AAEhC,SAAKC,SAAL,GAAiBR,gBAAgB,EAAjC;AACA,UAAM;AAAES,MAAAA;AAAF,QAAaF,KAAnB;;AACA,QAAIE,MAAJ,EAAY;AACVC,MAAAA,0BAA0B;AAC1BR,MAAAA,WAAW,CAACS,eAAZ,CAA4B,KAAKH,SAAjC,EAA4CC,MAA5C;AACD;AACF;;AAIkB,MAARG,QAAQ,GAAG;AACpB,WAAO,KAAKJ,SAAZ;AACD;;AAEDK,EAAAA,kBAAkB,CAACC,SAAD,EAA2B;AAC3C,UAAM;AAAEL,MAAAA;AAAF,QAAa,KAAKF,KAAxB;;AACA,QAAIE,MAAM,KAAKK,SAAS,CAACL,MAAzB,EAAiC;AAC/BC,MAAAA,0BAA0B;AAC1BR,MAAAA,WAAW,CAACS,eAAZ,CAA4B,KAAKH,SAAjC,EAA4CC,MAA5C;AACD;AACF;AAED;AACF;AACA;AACA;AACA;;;AACSM,EAAAA,iBAAiB,CAACC,IAAD,EAAgB;AACtCN,IAAAA,0BAA0B;AAC1B,WAAOR,WAAW,CAACa,iBAAZ,CAA8B,KAAKP,SAAnC,EAA8CQ,IAA9C,CAAP;AACD;AAED;AACF;AACA;;;AACSC,EAAAA,MAAM,GAAG;AACdP,IAAAA,0BAA0B;AAC1BR,IAAAA,WAAW,CAACgB,kBAAZ,CAA+B,KAAKV,SAApC;AACD;AAED;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACSW,EAAAA,WAAW,CAACC,IAAD,EAAiB;AACjCV,IAAAA,0BAA0B;AAC1BR,IAAAA,WAAW,CAACiB,WAAZ,CAAwB,KAAKX,SAA7B,EAAwCY,IAAxC;AACD;AAED;AACF;AACA;AACA;AACA;;;AACSC,EAAAA,cAAc,CAACC,MAAD,EAAuC;AAC1DZ,IAAAA,0BAA0B;AAC1B,WAAOR,WAAW,CAACqB,oBAAZ,CAAiC,KAAKf,SAAtC,EAAiDc,MAAjD,CAAP;AACD;;AAEDE,EAAAA,MAAM,GAAG;AACP,UAAM;AAAEC,MAAAA,KAAF;AAASL,MAAAA,IAAT;AAAeM,MAAAA,KAAK,GAAG;AAAvB,QAAiC,KAAKnB,KAA5C;AACA,wBACE,oBAAC,cAAD;AACE,MAAA,KAAK,EAAEkB,KADT;AAEE,MAAA,WAAW,EAAE,KAFf;AAGE,MAAA,QAAQ,EAAG,GAAE,KAAKjB,SAAU,EAH9B;AAIE,MAAA,IAAI,EAAEY,IAJR;AAKE,MAAA,KAAK,EAAEM;AALT,MADF;AASD;;AA9E0D;;AAiF7D,MAAMhB,0BAA0B,GAAG,MAAM;AACvC,MACER,WAAW,KAAK,IAAhB,IACAA,WAAW,CAACS,eAAZ,IAA+B,IAD/B,IAEAT,WAAW,CAACgB,kBAAZ,IAAkC,IAHpC,EAIE;AACA,UAAMS,KAAK,CAAC,0BAAD,CAAX;AACD;AACF,CARD","sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkImage, SkRect } from \"../skia\";\nimport type { SkiaReadonlyValue } from \"../values\";\n\nimport type {\n DrawMode,\n SkiaViewProps,\n RNSkiaDrawCallback,\n NativeSkiaViewProps,\n} from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaView = requireNativeComponent<NativeSkiaViewProps>(\n \"ReactNativeSkiaView\"\n);\n\ndeclare global {\n var SkiaViewApi: {\n invalidateSkiaView: (nativeId: number) => void;\n makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n setDrawCallback: (\n nativeId: number,\n callback: RNSkiaDrawCallback | undefined\n ) => void;\n setDrawMode: (nativeId: number, mode: DrawMode) => void;\n registerValuesInView: (\n nativeId: number,\n values: SkiaReadonlyValue<unknown>[]\n ) => () => void;\n };\n}\n\nconst { SkiaViewApi } = global;\n\nexport class SkiaView extends React.Component<SkiaViewProps> {\n constructor(props: SkiaViewProps) {\n super(props);\n this._nativeId = SkiaViewNativeId++;\n const { onDraw } = props;\n if (onDraw) {\n assertDrawCallbacksEnabled();\n SkiaViewApi.setDrawCallback(this._nativeId, onDraw);\n }\n }\n\n private _nativeId: number;\n\n public get nativeId() {\n return this._nativeId;\n }\n\n componentDidUpdate(prevProps: SkiaViewProps) {\n const { onDraw } = this.props;\n if (onDraw !== prevProps.onDraw) {\n assertDrawCallbacksEnabled();\n SkiaViewApi.setDrawCallback(this._nativeId, onDraw);\n }\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n assertDrawCallbacksEnabled();\n return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n }\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n public redraw() {\n assertDrawCallbacksEnabled();\n SkiaViewApi.invalidateSkiaView(this._nativeId);\n }\n\n /**\n * Updates the drawing mode for the skia view. This is the same\n * as declaratively setting the mode property on the SkiaView.\n * There are two drawing modes, \"continuous\" and \"default\",\n * where the continuous mode will continuously redraw the view and\n * the default mode will only redraw when any of the regular react\n * properties are changed like size and margins.\n * @param mode Drawing mode to use.\n */\n public setDrawMode(mode: DrawMode) {\n assertDrawCallbacksEnabled();\n SkiaViewApi.setDrawMode(this._nativeId, mode);\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(values: SkiaReadonlyValue<unknown>[]) {\n assertDrawCallbacksEnabled();\n return SkiaViewApi.registerValuesInView(this._nativeId, values);\n }\n\n render() {\n const { style, mode, debug = false } = this.props;\n return (\n <NativeSkiaView\n style={style}\n collapsable={false}\n nativeID={`${this._nativeId}`}\n mode={mode}\n debug={debug}\n />\n );\n }\n}\n\nconst assertDrawCallbacksEnabled = () => {\n if (\n SkiaViewApi === null ||\n SkiaViewApi.setDrawCallback == null ||\n SkiaViewApi.invalidateSkiaView == null\n ) {\n throw Error(\"Skia Api is not enabled.\");\n }\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["types.ts"],"names":["TouchType"],"mappings":"AAWA,WAAYA,SAAZ;;WAAYA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S","sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkCanvas } from \"../skia/Canvas\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n mode?: DrawMode;\n debug?: boolean;\n};\n\nexport enum TouchType {\n Start,\n Active,\n End,\n Cancelled,\n}\n\nexport interface TouchInfo {\n x: number;\n y: number;\n force: number;\n type: TouchType;\n timestamp: number;\n}\n\nexport interface DrawingInfo {\n width: number;\n height: number;\n timestamp: number;\n touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n // points per second\n velocityX: number;\n velocityY: number;\n};\n\nexport type TouchHandlers = {\n onStart?: (touchInfo: TouchInfo) => void;\n onActive?: (touchInfo: ExtendedTouchInfo) => void;\n onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;\n\nexport type
|
|
1
|
+
{"version":3,"sources":["types.ts"],"names":["TouchType"],"mappings":"AAWA,WAAYA,SAAZ;;WAAYA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S","sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkCanvas } from \"../skia/Canvas\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n mode?: DrawMode;\n debug?: boolean;\n};\n\nexport enum TouchType {\n Start,\n Active,\n End,\n Cancelled,\n}\n\nexport interface TouchInfo {\n x: number;\n y: number;\n force: number;\n type: TouchType;\n timestamp: number;\n}\n\nexport interface DrawingInfo {\n width: number;\n height: number;\n timestamp: number;\n touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n // points per second\n velocityX: number;\n velocityY: number;\n};\n\nexport type TouchHandlers = {\n onStart?: (touchInfo: TouchInfo) => void;\n onActive?: (touchInfo: ExtendedTouchInfo) => void;\n onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;\n\nexport type SkiaViewProps = {\n style?: ViewProps[\"style\"];\n /**\n * Sets the drawing mode for the skia view. There are two drawing\n * modes, \"continuous\" and \"default\", where the continuous mode will\n * continuously redraw the view, and the default mode will only\n * redraw when any of the regular react properties are changed like\n * sizes and margins.\n */\n mode?: DrawMode;\n /**\n * When set to true the view will display information about the\n * average time it takes to render.\n */\n debug?: boolean;\n /**\n * Draw callback. Will be called whenever the view is invalidated and\n * needs to redraw. This is either caused by a change in a react\n * property, a touch event, or a call to redraw. If the view is in\n * continuous mode the callback will be called 60 frames per second\n * by the native view.\n */\n onDraw?: RNSkiaDrawCallback;\n};\n\n/**\n * Listener interface for value changes\n */\nexport interface ValueListener {\n addListener: (callback: () => void) => number;\n removeListener: (id: number) => void;\n}\n"]}
|
|
@@ -22,5 +22,5 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
|
|
|
22
22
|
onTouch?: TouchHandler;
|
|
23
23
|
fontMgr?: FontMgr;
|
|
24
24
|
}
|
|
25
|
-
export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "
|
|
25
|
+
export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "style" | "mode" | "debug" | "onDraw" | "children" | "onTouch" | "fontMgr"> & React.RefAttributes<SkiaView>>;
|
|
26
26
|
export {};
|
|
@@ -7,6 +7,15 @@ interface FitProps {
|
|
|
7
7
|
dst: SkRect;
|
|
8
8
|
children: ReactNode | ReactNode[];
|
|
9
9
|
}
|
|
10
|
+
export declare const fitbox: (fit: Fit, src: SkRect, dst: SkRect) => readonly [{
|
|
11
|
+
readonly translateX: number;
|
|
12
|
+
}, {
|
|
13
|
+
readonly translateY: number;
|
|
14
|
+
}, {
|
|
15
|
+
readonly scaleX: number;
|
|
16
|
+
}, {
|
|
17
|
+
readonly scaleY: number;
|
|
18
|
+
}];
|
|
10
19
|
export declare const FitBox: {
|
|
11
20
|
({ fit, src, dst, children }: FitProps): JSX.Element;
|
|
12
21
|
defaultProps: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { SkImage, SkRect } from "../skia";
|
|
3
3
|
import type { SkiaReadonlyValue } from "../values";
|
|
4
|
-
import type { DrawMode,
|
|
4
|
+
import type { DrawMode, SkiaViewProps, RNSkiaDrawCallback } from "./types";
|
|
5
5
|
declare global {
|
|
6
6
|
var SkiaViewApi: {
|
|
7
7
|
invalidateSkiaView: (nativeId: number) => void;
|
|
@@ -11,12 +11,11 @@ declare global {
|
|
|
11
11
|
registerValuesInView: (nativeId: number, values: SkiaReadonlyValue<unknown>[]) => () => void;
|
|
12
12
|
};
|
|
13
13
|
}
|
|
14
|
-
export declare class SkiaView extends React.Component<
|
|
15
|
-
constructor(props:
|
|
14
|
+
export declare class SkiaView extends React.Component<SkiaViewProps> {
|
|
15
|
+
constructor(props: SkiaViewProps);
|
|
16
16
|
private _nativeId;
|
|
17
|
-
private _animatingValues;
|
|
18
17
|
get nativeId(): number;
|
|
19
|
-
componentDidUpdate(prevProps:
|
|
18
|
+
componentDidUpdate(prevProps: SkiaViewProps): void;
|
|
20
19
|
/**
|
|
21
20
|
* Creates a snapshot from the canvas in the surface
|
|
22
21
|
* @param rect Rect to use as bounds. Optional.
|
|
@@ -43,13 +42,5 @@ export declare class SkiaView extends React.Component<RNSkiaViewProps> {
|
|
|
43
42
|
* @param values Values to register
|
|
44
43
|
*/
|
|
45
44
|
registerValues(values: SkiaReadonlyValue<unknown>[]): () => void;
|
|
46
|
-
/**
|
|
47
|
-
* Increases the number of animations active in the view.
|
|
48
|
-
*/
|
|
49
|
-
addAnimation(owner: unknown): void;
|
|
50
|
-
/**
|
|
51
|
-
* Decreases the number of animations active in the view.
|
|
52
|
-
*/
|
|
53
|
-
removeAnimation(owner: unknown): void;
|
|
54
45
|
render(): JSX.Element;
|
|
55
46
|
}
|
|
@@ -35,7 +35,8 @@ export declare type TouchHandlers = {
|
|
|
35
35
|
};
|
|
36
36
|
export declare type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
|
|
37
37
|
export declare type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;
|
|
38
|
-
export declare type
|
|
38
|
+
export declare type SkiaViewProps = {
|
|
39
|
+
style?: ViewProps["style"];
|
|
39
40
|
/**
|
|
40
41
|
* Sets the drawing mode for the skia view. There are two drawing
|
|
41
42
|
* modes, "continuous" and "default", where the continuous mode will
|
package/package.json
CHANGED
|
@@ -4,12 +4,9 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "React Native Skia",
|
|
7
|
-
"version": "0.1.
|
|
8
|
-
"description": "
|
|
7
|
+
"version": "0.1.116",
|
|
8
|
+
"description": "High-performance React Native Graphics using Skia",
|
|
9
9
|
"main": "lib/module/index.js",
|
|
10
|
-
"types": "lib/typescript/index.d.ts",
|
|
11
|
-
"react-native": "lib/module/index.js",
|
|
12
|
-
"module": "lib/module/index.js",
|
|
13
10
|
"files": [
|
|
14
11
|
"src",
|
|
15
12
|
"lib",
|
|
@@ -38,7 +35,7 @@
|
|
|
38
35
|
"tsc": "tsc --noEmit",
|
|
39
36
|
"lint": "eslint . --ext .ts,.tsx --max-warnings 0",
|
|
40
37
|
"test": "jest",
|
|
41
|
-
"postinstall": "
|
|
38
|
+
"postinstall": "node scripts/install-npm.js",
|
|
42
39
|
"build": "bob build"
|
|
43
40
|
},
|
|
44
41
|
"repository": {
|
|
@@ -96,5 +93,8 @@
|
|
|
96
93
|
"module",
|
|
97
94
|
"typescript"
|
|
98
95
|
]
|
|
99
|
-
}
|
|
96
|
+
},
|
|
97
|
+
"types": "lib/typescript/index.d.ts",
|
|
98
|
+
"module": "lib/module/index.js",
|
|
99
|
+
"react-native": "lib/module/index.js"
|
|
100
100
|
}
|
|
@@ -31,28 +31,35 @@ const onDraw = createDrawing<GroupProps>(
|
|
|
31
31
|
const { canvas, opacity } = ctx;
|
|
32
32
|
const paint = selectPaint(ctx.paint, groupProps);
|
|
33
33
|
processPaint(paint, opacity, groupProps);
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
34
|
+
const hasTransform = !!groupProps.transform || !!groupProps.matrix;
|
|
35
|
+
const hasClip = !!clip;
|
|
36
|
+
const shouldSave = hasTransform || hasClip;
|
|
37
|
+
if (shouldSave) {
|
|
38
|
+
if (layer) {
|
|
39
|
+
if (typeof layer === "boolean") {
|
|
40
|
+
canvas.saveLayer();
|
|
41
|
+
} else if (isSkPaint(layer)) {
|
|
42
|
+
canvas.saveLayer(layer);
|
|
43
|
+
} else {
|
|
44
|
+
canvas.saveLayer(layer.current ?? undefined);
|
|
45
|
+
}
|
|
39
46
|
} else {
|
|
40
|
-
canvas.
|
|
47
|
+
canvas.save();
|
|
48
|
+
}
|
|
49
|
+
processTransform(ctx, groupProps);
|
|
50
|
+
if (clip) {
|
|
51
|
+
const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
|
|
52
|
+
processClip(canvas, clip, op);
|
|
41
53
|
}
|
|
42
|
-
} else {
|
|
43
|
-
canvas.save();
|
|
44
|
-
}
|
|
45
|
-
processTransform(ctx, groupProps);
|
|
46
|
-
if (clip) {
|
|
47
|
-
const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
|
|
48
|
-
processClip(canvas, clip, op);
|
|
49
54
|
}
|
|
50
55
|
node.visit({
|
|
51
56
|
...ctx,
|
|
52
57
|
paint,
|
|
53
58
|
opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,
|
|
54
59
|
});
|
|
55
|
-
|
|
60
|
+
if (shouldSave) {
|
|
61
|
+
canvas.restore();
|
|
62
|
+
}
|
|
56
63
|
}
|
|
57
64
|
);
|
|
58
65
|
|
|
@@ -13,11 +13,13 @@ interface FitProps {
|
|
|
13
13
|
children: ReactNode | ReactNode[];
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
export const fitbox = (fit: Fit, src: SkRect, dst: SkRect) => {
|
|
17
|
+
const rects = fitRects(fit, src, dst);
|
|
18
|
+
return rect2rect(rects.src, rects.dst);
|
|
19
|
+
};
|
|
20
|
+
|
|
16
21
|
export const FitBox = ({ fit, src, dst, children }: FitProps) => {
|
|
17
|
-
const transform = useMemo(() =>
|
|
18
|
-
const rects = fitRects(fit, src, dst);
|
|
19
|
-
return rect2rect(rects.src, rects.dst);
|
|
20
|
-
}, [dst, fit, src]);
|
|
22
|
+
const transform = useMemo(() => fitbox(fit, src, dst), [dst, fit, src]);
|
|
21
23
|
return <Group transform={transform}>{children}</Group>;
|
|
22
24
|
};
|
|
23
25
|
|
package/src/skia/index.ts
CHANGED
package/src/views/SkiaView.tsx
CHANGED
|
@@ -6,9 +6,9 @@ import type { SkiaReadonlyValue } from "../values";
|
|
|
6
6
|
|
|
7
7
|
import type {
|
|
8
8
|
DrawMode,
|
|
9
|
-
|
|
9
|
+
SkiaViewProps,
|
|
10
10
|
RNSkiaDrawCallback,
|
|
11
|
-
|
|
11
|
+
NativeSkiaViewProps,
|
|
12
12
|
} from "./types";
|
|
13
13
|
|
|
14
14
|
let SkiaViewNativeId = 1000;
|
|
@@ -35,8 +35,8 @@ declare global {
|
|
|
35
35
|
|
|
36
36
|
const { SkiaViewApi } = global;
|
|
37
37
|
|
|
38
|
-
export class SkiaView extends React.Component<
|
|
39
|
-
constructor(props:
|
|
38
|
+
export class SkiaView extends React.Component<SkiaViewProps> {
|
|
39
|
+
constructor(props: SkiaViewProps) {
|
|
40
40
|
super(props);
|
|
41
41
|
this._nativeId = SkiaViewNativeId++;
|
|
42
42
|
const { onDraw } = props;
|
|
@@ -47,13 +47,12 @@ export class SkiaView extends React.Component<RNSkiaViewProps> {
|
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
private _nativeId: number;
|
|
50
|
-
private _animatingValues: Array<unknown> = [];
|
|
51
50
|
|
|
52
51
|
public get nativeId() {
|
|
53
52
|
return this._nativeId;
|
|
54
53
|
}
|
|
55
54
|
|
|
56
|
-
componentDidUpdate(prevProps:
|
|
55
|
+
componentDidUpdate(prevProps: SkiaViewProps) {
|
|
57
56
|
const { onDraw } = this.props;
|
|
58
57
|
if (onDraw !== prevProps.onDraw) {
|
|
59
58
|
assertDrawCallbacksEnabled();
|
|
@@ -103,39 +102,6 @@ export class SkiaView extends React.Component<RNSkiaViewProps> {
|
|
|
103
102
|
return SkiaViewApi.registerValuesInView(this._nativeId, values);
|
|
104
103
|
}
|
|
105
104
|
|
|
106
|
-
/**
|
|
107
|
-
* Increases the number of animations active in the view.
|
|
108
|
-
*/
|
|
109
|
-
public addAnimation(owner: unknown) {
|
|
110
|
-
if (this._animatingValues.findIndex((p) => p === owner) === -1) {
|
|
111
|
-
this._animatingValues.push(owner);
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
if (this._animatingValues.length === 1) {
|
|
115
|
-
if (this.props.mode === "default" || this.props.mode === undefined) {
|
|
116
|
-
//console.log("SkiaView addAnimation - mode changed to continuous");
|
|
117
|
-
this.setDrawMode("continuous");
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
/**
|
|
123
|
-
* Decreases the number of animations active in the view.
|
|
124
|
-
*/
|
|
125
|
-
public removeAnimation(owner: unknown) {
|
|
126
|
-
const indexOfOwner = this._animatingValues.indexOf(owner);
|
|
127
|
-
if (indexOfOwner !== -1) {
|
|
128
|
-
// Remove
|
|
129
|
-
this._animatingValues = this._animatingValues.filter((p) => p !== owner);
|
|
130
|
-
}
|
|
131
|
-
if (this._animatingValues.length === 0) {
|
|
132
|
-
if (this.props.mode === "default" || this.props.mode === undefined) {
|
|
133
|
-
//console.log("SkiaView removeAnimation - mode changed to default");
|
|
134
|
-
this.setDrawMode("default");
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
|
|
139
105
|
render() {
|
|
140
106
|
const { style, mode, debug = false } = this.props;
|
|
141
107
|
return (
|
package/src/views/types.ts
CHANGED
|
@@ -47,7 +47,8 @@ export type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
|
|
|
47
47
|
|
|
48
48
|
export type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;
|
|
49
49
|
|
|
50
|
-
export type
|
|
50
|
+
export type SkiaViewProps = {
|
|
51
|
+
style?: ViewProps["style"];
|
|
51
52
|
/**
|
|
52
53
|
* Sets the drawing mode for the skia view. There are two drawing
|
|
53
54
|
* modes, "continuous" and "default", where the continuous mode will
|