@shopify/react-native-skia 0.1.115 → 0.1.116
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/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
|