@shopify/react-native-skia 1.11.6 → 1.11.7
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/commonjs/renderer/Canvas.d.ts +3 -2
- package/lib/commonjs/renderer/Canvas.js +4 -2
- package/lib/commonjs/renderer/Canvas.js.map +1 -1
- package/lib/module/renderer/Canvas.d.ts +3 -2
- package/lib/module/renderer/Canvas.js +1 -1
- package/lib/module/renderer/Canvas.js.map +1 -1
- package/lib/typescript/lib/commonjs/renderer/Canvas.d.ts +2 -3
- package/lib/typescript/lib/module/renderer/Canvas.d.ts +3 -2
- package/lib/typescript/src/renderer/Canvas.d.ts +3 -2
- package/package.json +1 -1
- package/src/renderer/Canvas.tsx +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { FC } from "react";
|
|
2
|
+
import React from "react";
|
|
2
3
|
import type { ViewProps } from "react-native";
|
|
3
4
|
import type { SharedValue } from "react-native-reanimated";
|
|
4
5
|
import type { SkImage, SkRect, SkSize } from "../skia/types";
|
|
@@ -8,12 +9,12 @@ interface CanvasRef extends FC<CanvasProps> {
|
|
|
8
9
|
redraw(): void;
|
|
9
10
|
getNativeId(): number;
|
|
10
11
|
}
|
|
11
|
-
export declare const useCanvasRef: () =>
|
|
12
|
+
export declare const useCanvasRef: () => React.RefObject<CanvasRef>;
|
|
12
13
|
export interface CanvasProps extends ViewProps {
|
|
13
14
|
debug?: boolean;
|
|
14
15
|
opaque?: boolean;
|
|
15
16
|
onSize?: SharedValue<SkSize>;
|
|
16
17
|
mode?: "continuous" | "default";
|
|
17
18
|
}
|
|
18
|
-
export declare const Canvas:
|
|
19
|
+
export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<unknown>>;
|
|
19
20
|
export {};
|
|
@@ -4,12 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useCanvasRef = exports.Canvas = void 0;
|
|
7
|
-
var _react = require("react");
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _SkiaViewNativeId = require("../views/SkiaViewNativeId");
|
|
9
9
|
var _SkiaPictureViewNativeComponent = _interopRequireDefault(require("../specs/SkiaPictureViewNativeComponent"));
|
|
10
10
|
var _Reconciler = require("../sksg/Reconciler");
|
|
11
11
|
var _skia = require("../skia");
|
|
12
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
15
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
14
16
|
const useCanvasRef = () => (0, _react.useRef)(null);
|
|
15
17
|
exports.useCanvasRef = useCanvasRef;
|
|
@@ -95,7 +97,7 @@ const Canvas = exports.Canvas = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
95
97
|
return nativeId;
|
|
96
98
|
}
|
|
97
99
|
}));
|
|
98
|
-
return /*#__PURE__*/
|
|
100
|
+
return /*#__PURE__*/_react.default.createElement(NativeSkiaPictureView, _extends({
|
|
99
101
|
collapsable: false,
|
|
100
102
|
nativeID: `${nativeId}`,
|
|
101
103
|
debug: debug,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_SkiaViewNativeId","_SkiaPictureViewNativeComponent","_interopRequireDefault","_Reconciler","_skia","e","__esModule","default","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_SkiaViewNativeId","_SkiaPictureViewNativeComponent","_interopRequireDefault","_Reconciler","_skia","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","useCanvasRef","useRef","exports","NativeSkiaPictureView","SkiaPictureViewNativeComponent","useOnSizeEvent","resultValue","onLayout","useCallback","event","width","height","nativeEvent","layout","value","Canvas","forwardRef","mode","debug","opaque","children","onSize","_onLayout","viewProps","ref","rafId","nativeId","useMemo","SkiaViewNativeId","current","root","SkiaSGRoot","Skia","useEffect","render","unmount","requestRedraw","requestAnimationFrame","console","warn","cancelAnimationFrame","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","getNativeId","createElement","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from \"react\";\nimport type { LayoutChangeEvent, ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport type { SkiaBaseViewProps } from \"../views\";\n\ninterface CanvasRef extends FC<CanvasProps> {\n makeImageSnapshot(rect?: SkRect): SkImage;\n makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n redraw(): void;\n getNativeId(): number;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nconst NativeSkiaPictureView = SkiaPictureViewNativeComponent;\n\n// TODO: no need to go through the JS thread for this\nconst useOnSizeEvent = (\n resultValue: SkiaBaseViewProps[\"onSize\"],\n onLayout?: (event: LayoutChangeEvent) => void\n) => {\n return useCallback(\n (event: LayoutChangeEvent) => {\n if (onLayout) {\n onLayout(event);\n }\n const { width, height } = event.nativeEvent.layout;\n\n if (resultValue) {\n resultValue.value = { width, height };\n }\n },\n [onLayout, resultValue]\n );\n};\n\nexport interface CanvasProps extends ViewProps {\n debug?: boolean;\n opaque?: boolean;\n onSize?: SharedValue<SkSize>;\n mode?: \"continuous\" | \"default\";\n}\n\nexport const Canvas = forwardRef(\n (\n {\n mode,\n debug,\n opaque,\n children,\n onSize,\n onLayout: _onLayout,\n ...viewProps\n }: CanvasProps,\n ref\n ) => {\n const rafId = useRef<number | null>(null);\n const onLayout = useOnSizeEvent(onSize, _onLayout);\n // Native ID\n const nativeId = useMemo(() => {\n return SkiaViewNativeId.current++;\n }, []);\n\n // Root\n const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n // Render effects\n useEffect(() => {\n root.render(children);\n }, [children, root]);\n\n useEffect(() => {\n return () => {\n root.unmount();\n };\n }, [root]);\n\n const requestRedraw = useCallback(() => {\n rafId.current = requestAnimationFrame(() => {\n root.render(children);\n if (mode === \"continuous\") {\n requestRedraw();\n }\n });\n }, [children, mode, root]);\n\n useEffect(() => {\n if (mode === \"continuous\") {\n console.warn(\"The `mode` property in `Canvas` is deprecated.\");\n requestRedraw();\n }\n return () => {\n if (rafId.current !== null) {\n cancelAnimationFrame(rafId.current);\n }\n };\n }, [mode, requestRedraw]);\n // Component methods\n useImperativeHandle(ref, () => ({\n makeImageSnapshot: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n },\n makeImageSnapshotAsync: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n },\n redraw: () => {\n SkiaViewApi.requestRedraw(nativeId);\n },\n getNativeId: () => {\n return nativeId;\n },\n }));\n return (\n <NativeSkiaPictureView\n collapsable={false}\n nativeID={`${nativeId}`}\n debug={debug}\n opaque={opaque}\n onLayout={onLayout}\n {...viewProps}\n />\n );\n }\n);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { FC } from "react";
|
|
2
|
+
import React from "react";
|
|
2
3
|
import type { ViewProps } from "react-native";
|
|
3
4
|
import type { SharedValue } from "react-native-reanimated";
|
|
4
5
|
import type { SkImage, SkRect, SkSize } from "../skia/types";
|
|
@@ -8,12 +9,12 @@ interface CanvasRef extends FC<CanvasProps> {
|
|
|
8
9
|
redraw(): void;
|
|
9
10
|
getNativeId(): number;
|
|
10
11
|
}
|
|
11
|
-
export declare const useCanvasRef: () =>
|
|
12
|
+
export declare const useCanvasRef: () => React.RefObject<CanvasRef>;
|
|
12
13
|
export interface CanvasProps extends ViewProps {
|
|
13
14
|
debug?: boolean;
|
|
14
15
|
opaque?: boolean;
|
|
15
16
|
onSize?: SharedValue<SkSize>;
|
|
16
17
|
mode?: "continuous" | "default";
|
|
17
18
|
}
|
|
18
|
-
export declare const Canvas:
|
|
19
|
+
export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<unknown>>;
|
|
19
20
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
|
-
import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
|
|
2
|
+
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
|
|
3
3
|
import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
|
|
4
4
|
import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
|
|
5
5
|
import { SkiaSGRoot } from "../sksg/Reconciler";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","SkiaViewNativeId","SkiaPictureViewNativeComponent","SkiaSGRoot","Skia","useCanvasRef","NativeSkiaPictureView","useOnSizeEvent","resultValue","onLayout","event","width","height","nativeEvent","layout","value","Canvas","mode","debug","opaque","children","onSize","_onLayout","viewProps","ref","rafId","nativeId","current","root","render","unmount","requestRedraw","requestAnimationFrame","console","warn","cancelAnimationFrame","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","getNativeId","
|
|
1
|
+
{"version":3,"names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","SkiaViewNativeId","SkiaPictureViewNativeComponent","SkiaSGRoot","Skia","useCanvasRef","NativeSkiaPictureView","useOnSizeEvent","resultValue","onLayout","event","width","height","nativeEvent","layout","value","Canvas","mode","debug","opaque","children","onSize","_onLayout","viewProps","ref","rafId","nativeId","current","root","render","unmount","requestRedraw","requestAnimationFrame","console","warn","cancelAnimationFrame","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","getNativeId","createElement","_extends","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from \"react\";\nimport type { LayoutChangeEvent, ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport type { SkiaBaseViewProps } from \"../views\";\n\ninterface CanvasRef extends FC<CanvasProps> {\n makeImageSnapshot(rect?: SkRect): SkImage;\n makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n redraw(): void;\n getNativeId(): number;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nconst NativeSkiaPictureView = SkiaPictureViewNativeComponent;\n\n// TODO: no need to go through the JS thread for this\nconst useOnSizeEvent = (\n resultValue: SkiaBaseViewProps[\"onSize\"],\n onLayout?: (event: LayoutChangeEvent) => void\n) => {\n return useCallback(\n (event: LayoutChangeEvent) => {\n if (onLayout) {\n onLayout(event);\n }\n const { width, height } = event.nativeEvent.layout;\n\n if (resultValue) {\n resultValue.value = { width, height };\n }\n },\n [onLayout, resultValue]\n );\n};\n\nexport interface CanvasProps extends ViewProps {\n debug?: boolean;\n opaque?: boolean;\n onSize?: SharedValue<SkSize>;\n mode?: \"continuous\" | \"default\";\n}\n\nexport const Canvas = forwardRef(\n (\n {\n mode,\n debug,\n opaque,\n children,\n onSize,\n onLayout: _onLayout,\n ...viewProps\n }: CanvasProps,\n ref\n ) => {\n const rafId = useRef<number | null>(null);\n const onLayout = useOnSizeEvent(onSize, _onLayout);\n // Native ID\n const nativeId = useMemo(() => {\n return SkiaViewNativeId.current++;\n }, []);\n\n // Root\n const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n // Render effects\n useEffect(() => {\n root.render(children);\n }, [children, root]);\n\n useEffect(() => {\n return () => {\n root.unmount();\n };\n }, [root]);\n\n const requestRedraw = useCallback(() => {\n rafId.current = requestAnimationFrame(() => {\n root.render(children);\n if (mode === \"continuous\") {\n requestRedraw();\n }\n });\n }, [children, mode, root]);\n\n useEffect(() => {\n if (mode === \"continuous\") {\n console.warn(\"The `mode` property in `Canvas` is deprecated.\");\n requestRedraw();\n }\n return () => {\n if (rafId.current !== null) {\n cancelAnimationFrame(rafId.current);\n }\n };\n }, [mode, requestRedraw]);\n // Component methods\n useImperativeHandle(ref, () => ({\n makeImageSnapshot: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n },\n makeImageSnapshotAsync: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n },\n redraw: () => {\n SkiaViewApi.requestRedraw(nativeId);\n },\n getNativeId: () => {\n return nativeId;\n },\n }));\n return (\n <NativeSkiaPictureView\n collapsable={false}\n nativeID={`${nativeId}`}\n debug={debug}\n opaque={opaque}\n onLayout={onLayout}\n {...viewProps}\n />\n );\n }\n);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
export const __esModule: boolean;
|
|
2
|
-
export const Canvas:
|
|
3
|
-
export function useCanvasRef():
|
|
4
|
-
import _react = require("react");
|
|
2
|
+
export const Canvas: any;
|
|
3
|
+
export function useCanvasRef(): any;
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
export function useCanvasRef():
|
|
2
|
-
export const Canvas:
|
|
1
|
+
export function useCanvasRef(): React.MutableRefObject<null>;
|
|
2
|
+
export const Canvas: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
|
|
3
|
+
import React from "react";
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { FC } from "react";
|
|
2
|
+
import React from "react";
|
|
2
3
|
import type { ViewProps } from "react-native";
|
|
3
4
|
import type { SharedValue } from "react-native-reanimated";
|
|
4
5
|
import type { SkImage, SkRect, SkSize } from "../skia/types";
|
|
@@ -8,12 +9,12 @@ interface CanvasRef extends FC<CanvasProps> {
|
|
|
8
9
|
redraw(): void;
|
|
9
10
|
getNativeId(): number;
|
|
10
11
|
}
|
|
11
|
-
export declare const useCanvasRef: () =>
|
|
12
|
+
export declare const useCanvasRef: () => React.RefObject<CanvasRef>;
|
|
12
13
|
export interface CanvasProps extends ViewProps {
|
|
13
14
|
debug?: boolean;
|
|
14
15
|
opaque?: boolean;
|
|
15
16
|
onSize?: SharedValue<SkSize>;
|
|
16
17
|
mode?: "continuous" | "default";
|
|
17
18
|
}
|
|
18
|
-
export declare const Canvas:
|
|
19
|
+
export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<unknown>>;
|
|
19
20
|
export {};
|
package/package.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"setup-skia-web": "./scripts/setup-canvaskit.js"
|
|
9
9
|
},
|
|
10
10
|
"title": "React Native Skia",
|
|
11
|
-
"version": "1.11.
|
|
11
|
+
"version": "1.11.7",
|
|
12
12
|
"description": "High-performance React Native Graphics using Skia",
|
|
13
13
|
"main": "lib/module/index.js",
|
|
14
14
|
"react-native": "src/index.ts",
|
package/src/renderer/Canvas.tsx
CHANGED