react-native-wgpu 0.5.8 → 0.5.9
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/cpp/rnwgpu/api/GPUQueue.cpp +1 -1
- package/lib/commonjs/WebGPUViewNativeComponent.web.js +14 -10
- package/lib/commonjs/WebGPUViewNativeComponent.web.js.map +1 -1
- package/lib/module/WebGPUViewNativeComponent.web.js +13 -10
- package/lib/module/WebGPUViewNativeComponent.web.js.map +1 -1
- package/lib/typescript/lib/commonjs/WebGPUViewNativeComponent.web.d.ts +1 -2
- package/lib/typescript/lib/commonjs/WebGPUViewNativeComponent.web.d.ts.map +1 -1
- package/lib/typescript/lib/module/WebGPUViewNativeComponent.web.d.ts +2 -1
- package/lib/typescript/lib/module/WebGPUViewNativeComponent.web.d.ts.map +1 -1
- package/lib/typescript/src/WebGPUViewNativeComponent.web.d.ts +2 -111
- package/lib/typescript/src/WebGPUViewNativeComponent.web.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/WebGPUViewNativeComponent.web.ts +18 -13
|
@@ -124,7 +124,7 @@ void GPUQueue::copyExternalImageToTexture(
|
|
|
124
124
|
throw std::runtime_error("Invalid input for GPUQueue::writeTexture()");
|
|
125
125
|
}
|
|
126
126
|
|
|
127
|
-
if (source->flipY) {
|
|
127
|
+
if (source->flipY.value_or(false)) {
|
|
128
128
|
// Calculate the row size and total size
|
|
129
129
|
uint32_t rowSize = bytesPerPixel * source->source->getWidth();
|
|
130
130
|
uint32_t totalSize = source->source->getSize();
|
|
@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = WebGPUViewNativeComponent;
|
|
7
|
-
var _react = require("react");
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
|
-
var _reactNativeWeb = require("react-native-web");
|
|
10
9
|
var _utils = require("./utils");
|
|
10
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
11
11
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12
12
|
function debounce(func, wait, immediate = false) {
|
|
13
13
|
let timeout;
|
|
@@ -51,20 +51,23 @@ function WebGPUViewNativeComponent(props) {
|
|
|
51
51
|
} = props;
|
|
52
52
|
const canvasElm = (0, _react.useRef)();
|
|
53
53
|
(0, _react.useEffect)(() => {
|
|
54
|
-
const onResize = debounce(() => resizeCanvas(canvasElm.current), 100);
|
|
54
|
+
const onResize = debounce(() => resizeCanvas(canvasElm.current ?? null), 100);
|
|
55
55
|
window.addEventListener("resize", onResize);
|
|
56
56
|
return () => {
|
|
57
57
|
window.removeEventListener("resize", onResize);
|
|
58
58
|
};
|
|
59
59
|
}, []);
|
|
60
|
-
return
|
|
60
|
+
return /*#__PURE__*/_react.default.createElement("canvas", {
|
|
61
61
|
...rest,
|
|
62
|
-
style: [styles.view, styles.flex1, transparent === false && {
|
|
63
|
-
backgroundColor: "white"
|
|
64
|
-
},
|
|
65
|
-
// Canvas elements are transparent by default on the web
|
|
66
|
-
style],
|
|
67
62
|
id: (0, _utils.contextIdToId)(contextId),
|
|
63
|
+
style: {
|
|
64
|
+
...styles.view,
|
|
65
|
+
...styles.flex1,
|
|
66
|
+
...(transparent === false ? {
|
|
67
|
+
backgroundColor: "white"
|
|
68
|
+
} : {}),
|
|
69
|
+
...(typeof style === "object" ? style : {})
|
|
70
|
+
},
|
|
68
71
|
ref: ref => {
|
|
69
72
|
canvasElm.current = ref;
|
|
70
73
|
if (ref) {
|
|
@@ -80,7 +83,8 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
80
83
|
view: {
|
|
81
84
|
alignItems: "stretch",
|
|
82
85
|
backgroundColor: "transparent",
|
|
83
|
-
//
|
|
86
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
87
|
+
// @ts-expect-error
|
|
84
88
|
border: "0 solid black",
|
|
85
89
|
boxSizing: "border-box",
|
|
86
90
|
display: "flex",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_utils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","debounce","func","wait","immediate","timeout","debounced","args","context","callNow","clearTimeout","setTimeout","undefined","apply","resizeCanvas","canvas","dpr","window","devicePixelRatio","height","width","getBoundingClientRect","setAttribute","toString","WebGPUViewNativeComponent","props","contextId","style","transparent","rest","canvasElm","useRef","useEffect","onResize","current","addEventListener","removeEventListener","React","createElement","id","contextIdToId","styles","view","flex1","backgroundColor","ref","StyleSheet","create","flex","alignItems","border","boxSizing","display","flexBasis","flexDirection","flexShrink","listStyle","margin","minHeight","minWidth","padding","position","zIndex"],"sourceRoot":"../../src","sources":["WebGPUViewNativeComponent.web.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { useEffect, useRef } from "react";
|
|
1
|
+
import React, { useEffect, useRef } from "react";
|
|
2
2
|
import { StyleSheet } from "react-native";
|
|
3
|
-
import { unstable_createElement as unstableCreateElement } from "react-native-web";
|
|
4
3
|
import { contextIdToId } from "./utils";
|
|
5
4
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
6
5
|
function debounce(func, wait, immediate = false) {
|
|
@@ -45,20 +44,23 @@ export default function WebGPUViewNativeComponent(props) {
|
|
|
45
44
|
} = props;
|
|
46
45
|
const canvasElm = useRef();
|
|
47
46
|
useEffect(() => {
|
|
48
|
-
const onResize = debounce(() => resizeCanvas(canvasElm.current), 100);
|
|
47
|
+
const onResize = debounce(() => resizeCanvas(canvasElm.current ?? null), 100);
|
|
49
48
|
window.addEventListener("resize", onResize);
|
|
50
49
|
return () => {
|
|
51
50
|
window.removeEventListener("resize", onResize);
|
|
52
51
|
};
|
|
53
52
|
}, []);
|
|
54
|
-
return
|
|
53
|
+
return /*#__PURE__*/React.createElement("canvas", {
|
|
55
54
|
...rest,
|
|
56
|
-
style: [styles.view, styles.flex1, transparent === false && {
|
|
57
|
-
backgroundColor: "white"
|
|
58
|
-
},
|
|
59
|
-
// Canvas elements are transparent by default on the web
|
|
60
|
-
style],
|
|
61
55
|
id: contextIdToId(contextId),
|
|
56
|
+
style: {
|
|
57
|
+
...styles.view,
|
|
58
|
+
...styles.flex1,
|
|
59
|
+
...(transparent === false ? {
|
|
60
|
+
backgroundColor: "white"
|
|
61
|
+
} : {}),
|
|
62
|
+
...(typeof style === "object" ? style : {})
|
|
63
|
+
},
|
|
62
64
|
ref: ref => {
|
|
63
65
|
canvasElm.current = ref;
|
|
64
66
|
if (ref) {
|
|
@@ -74,7 +76,8 @@ const styles = StyleSheet.create({
|
|
|
74
76
|
view: {
|
|
75
77
|
alignItems: "stretch",
|
|
76
78
|
backgroundColor: "transparent",
|
|
77
|
-
//
|
|
79
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
80
|
+
// @ts-expect-error
|
|
78
81
|
border: "0 solid black",
|
|
79
82
|
boxSizing: "border-box",
|
|
80
83
|
display: "flex",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useRef","StyleSheet","
|
|
1
|
+
{"version":3,"names":["React","useEffect","useRef","StyleSheet","contextIdToId","debounce","func","wait","immediate","timeout","debounced","args","context","callNow","clearTimeout","setTimeout","undefined","apply","resizeCanvas","canvas","dpr","window","devicePixelRatio","height","width","getBoundingClientRect","setAttribute","toString","WebGPUViewNativeComponent","props","contextId","style","transparent","rest","canvasElm","onResize","current","addEventListener","removeEventListener","createElement","id","styles","view","flex1","backgroundColor","ref","create","flex","alignItems","border","boxSizing","display","flexBasis","flexDirection","flexShrink","listStyle","margin","minHeight","minWidth","padding","position","zIndex"],"sourceRoot":"../../src","sources":["WebGPUViewNativeComponent.web.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
export const __esModule: boolean;
|
|
2
2
|
export default WebGPUViewNativeComponent;
|
|
3
|
-
declare function WebGPUViewNativeComponent(props: any):
|
|
4
|
-
import _react = require("react");
|
|
3
|
+
declare function WebGPUViewNativeComponent(props: any): any;
|
|
5
4
|
//# sourceMappingURL=WebGPUViewNativeComponent.web.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WebGPUViewNativeComponent.web.d.ts","sourceRoot":"","sources":["../../../commonjs/WebGPUViewNativeComponent.web.js"],"names":[],"mappings":";;AA4CA,
|
|
1
|
+
{"version":3,"file":"WebGPUViewNativeComponent.web.d.ts","sourceRoot":"","sources":["../../../commonjs/WebGPUViewNativeComponent.web.js"],"names":[],"mappings":";;AA4CA,4DAiCC"}
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
export default function WebGPUViewNativeComponent(props: any):
|
|
1
|
+
export default function WebGPUViewNativeComponent(props: any): React.DetailedReactHTMLElement<any, HTMLElement>;
|
|
2
|
+
import React from "react";
|
|
2
3
|
//# sourceMappingURL=WebGPUViewNativeComponent.web.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WebGPUViewNativeComponent.web.d.ts","sourceRoot":"","sources":["../../../module/WebGPUViewNativeComponent.web.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"WebGPUViewNativeComponent.web.d.ts","sourceRoot":"","sources":["../../../module/WebGPUViewNativeComponent.web.js"],"names":[],"mappings":"AAqCA,gHAiCC;kBAtEwC,OAAO"}
|
|
@@ -1,118 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
|
|
2
3
|
import type { ViewProps } from "react-native";
|
|
3
4
|
export interface NativeProps extends ViewProps {
|
|
4
5
|
contextId: Int32;
|
|
5
6
|
transparent: boolean;
|
|
6
7
|
}
|
|
7
|
-
export default function WebGPUViewNativeComponent(props: NativeProps):
|
|
8
|
-
style: (import("react-native").StyleProp<import("react-native").ViewStyle> | {
|
|
9
|
-
flex: number;
|
|
10
|
-
} | {
|
|
11
|
-
alignItems: "stretch";
|
|
12
|
-
backgroundColor: string;
|
|
13
|
-
border: string;
|
|
14
|
-
boxSizing: "border-box";
|
|
15
|
-
display: "flex";
|
|
16
|
-
flexBasis: "auto";
|
|
17
|
-
flexDirection: "column";
|
|
18
|
-
flexShrink: number;
|
|
19
|
-
listStyle: string;
|
|
20
|
-
margin: number;
|
|
21
|
-
minHeight: number;
|
|
22
|
-
minWidth: number;
|
|
23
|
-
padding: number;
|
|
24
|
-
position: "relative";
|
|
25
|
-
zIndex: number;
|
|
26
|
-
})[];
|
|
27
|
-
id: string;
|
|
28
|
-
ref: (ref: HTMLCanvasElement) => void;
|
|
29
|
-
children?: React.ReactNode | undefined;
|
|
30
|
-
hitSlop?: null | import("react-native").Insets | number | undefined;
|
|
31
|
-
needsOffscreenAlphaCompositing?: boolean | undefined;
|
|
32
|
-
onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
|
|
33
|
-
pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined;
|
|
34
|
-
removeClippedSubviews?: boolean | undefined;
|
|
35
|
-
testID?: string | undefined;
|
|
36
|
-
nativeID?: string | undefined;
|
|
37
|
-
collapsable?: boolean | undefined;
|
|
38
|
-
collapsableChildren?: boolean | undefined;
|
|
39
|
-
onBlur?: ((e: import("react-native").BlurEvent) => void) | null | undefined;
|
|
40
|
-
onFocus?: ((e: import("react-native").FocusEvent) => void) | null | undefined;
|
|
41
|
-
renderToHardwareTextureAndroid?: boolean | undefined;
|
|
42
|
-
focusable?: boolean | undefined;
|
|
43
|
-
tabIndex?: 0 | -1 | undefined;
|
|
44
|
-
shouldRasterizeIOS?: boolean | undefined;
|
|
45
|
-
isTVSelectable?: boolean | undefined;
|
|
46
|
-
hasTVPreferredFocus?: boolean | undefined;
|
|
47
|
-
tvParallaxShiftDistanceX?: number | undefined;
|
|
48
|
-
tvParallaxShiftDistanceY?: number | undefined;
|
|
49
|
-
tvParallaxTiltAngle?: number | undefined;
|
|
50
|
-
tvParallaxMagnification?: number | undefined;
|
|
51
|
-
onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
|
|
52
|
-
onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
|
|
53
|
-
onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
54
|
-
onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
55
|
-
onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
56
|
-
onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
57
|
-
onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
58
|
-
onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
59
|
-
onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
|
|
60
|
-
onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
61
|
-
onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
|
|
62
|
-
onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
|
|
63
|
-
onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
64
|
-
onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
65
|
-
onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
66
|
-
onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
67
|
-
onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
|
|
68
|
-
onPointerEnter?: ((event: import("react-native").PointerEvent) => void) | undefined;
|
|
69
|
-
onPointerEnterCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
|
|
70
|
-
onPointerLeave?: ((event: import("react-native").PointerEvent) => void) | undefined;
|
|
71
|
-
onPointerLeaveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
|
|
72
|
-
onPointerMove?: ((event: import("react-native").PointerEvent) => void) | undefined;
|
|
73
|
-
onPointerMoveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
|
|
74
|
-
onPointerCancel?: ((event: import("react-native").PointerEvent) => void) | undefined;
|
|
75
|
-
onPointerCancelCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
|
|
76
|
-
onPointerDown?: ((event: import("react-native").PointerEvent) => void) | undefined;
|
|
77
|
-
onPointerDownCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
|
|
78
|
-
onPointerUp?: ((event: import("react-native").PointerEvent) => void) | undefined;
|
|
79
|
-
onPointerUpCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
|
|
80
|
-
accessible?: boolean | undefined;
|
|
81
|
-
accessibilityActions?: ReadonlyArray<import("react-native").AccessibilityActionInfo> | undefined;
|
|
82
|
-
accessibilityLabel?: string | undefined;
|
|
83
|
-
'aria-label'?: string | undefined;
|
|
84
|
-
accessibilityRole?: import("react-native").AccessibilityRole | undefined;
|
|
85
|
-
accessibilityState?: import("react-native").AccessibilityState | undefined;
|
|
86
|
-
'aria-busy'?: boolean | undefined;
|
|
87
|
-
'aria-checked'?: boolean | "mixed" | undefined;
|
|
88
|
-
'aria-disabled'?: boolean | undefined;
|
|
89
|
-
'aria-expanded'?: boolean | undefined;
|
|
90
|
-
'aria-selected'?: boolean | undefined;
|
|
91
|
-
accessibilityHint?: string | undefined;
|
|
92
|
-
accessibilityValue?: import("react-native").AccessibilityValue | undefined;
|
|
93
|
-
'aria-valuemax'?: import("react-native").AccessibilityValue["max"] | undefined;
|
|
94
|
-
'aria-valuemin'?: import("react-native").AccessibilityValue["min"] | undefined;
|
|
95
|
-
'aria-valuenow'?: import("react-native").AccessibilityValue["now"] | undefined;
|
|
96
|
-
'aria-valuetext'?: import("react-native").AccessibilityValue["text"] | undefined;
|
|
97
|
-
onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
|
|
98
|
-
importantForAccessibility?: ("auto" | "yes" | "no" | "no-hide-descendants") | undefined;
|
|
99
|
-
'aria-hidden'?: boolean | undefined;
|
|
100
|
-
'aria-modal'?: boolean | undefined;
|
|
101
|
-
role?: import("react-native").Role | undefined;
|
|
102
|
-
accessibilityLabelledBy?: string | string[] | undefined;
|
|
103
|
-
'aria-labelledby'?: string | undefined;
|
|
104
|
-
accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
|
|
105
|
-
'aria-live'?: ("polite" | "assertive" | "off") | undefined;
|
|
106
|
-
screenReaderFocusable?: boolean | undefined;
|
|
107
|
-
accessibilityElementsHidden?: boolean | undefined;
|
|
108
|
-
accessibilityViewIsModal?: boolean | undefined;
|
|
109
|
-
onAccessibilityEscape?: (() => void) | undefined;
|
|
110
|
-
onAccessibilityTap?: (() => void) | undefined;
|
|
111
|
-
onMagicTap?: (() => void) | undefined;
|
|
112
|
-
accessibilityIgnoresInvertColors?: boolean | undefined;
|
|
113
|
-
accessibilityLanguage?: string | undefined;
|
|
114
|
-
accessibilityShowsLargeContentViewer?: boolean | undefined;
|
|
115
|
-
accessibilityLargeContentTitle?: string | undefined;
|
|
116
|
-
accessibilityRespondsToUserInteraction?: boolean | undefined;
|
|
117
|
-
}, string | import("react").JSXElementConstructor<any>>;
|
|
8
|
+
export default function WebGPUViewNativeComponent(props: NativeProps): React.JSX.Element;
|
|
118
9
|
//# sourceMappingURL=WebGPUViewNativeComponent.web.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WebGPUViewNativeComponent.web.d.ts","sourceRoot":"","sources":["../../../src/WebGPUViewNativeComponent.web.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"WebGPUViewNativeComponent.web.d.ts","sourceRoot":"","sources":["../../../src/WebGPUViewNativeComponent.web.ts"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,SAAS,EAAE,KAAK,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;CACtB;AA2CD,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAC/C,KAAK,EAAE,WAAW,GACjB,KAAK,CAAC,GAAG,CAAC,OAAO,CAgCnB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { useEffect, useRef } from "react";
|
|
1
|
+
import React, { useEffect, useRef } from "react";
|
|
2
2
|
import { StyleSheet } from "react-native";
|
|
3
|
-
import { unstable_createElement as unstableCreateElement } from "react-native-web";
|
|
4
3
|
import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
|
|
5
4
|
import type { ViewProps } from "react-native";
|
|
6
5
|
|
|
@@ -39,7 +38,7 @@ function debounce<T extends (...args: any[]) => void>(
|
|
|
39
38
|
};
|
|
40
39
|
}
|
|
41
40
|
|
|
42
|
-
function resizeCanvas(canvas
|
|
41
|
+
function resizeCanvas(canvas: HTMLCanvasElement | null) {
|
|
43
42
|
if (!canvas) {
|
|
44
43
|
return;
|
|
45
44
|
}
|
|
@@ -52,28 +51,33 @@ function resizeCanvas(canvas?: HTMLCanvasElement) {
|
|
|
52
51
|
}
|
|
53
52
|
|
|
54
53
|
// eslint-disable-next-line import/no-default-export
|
|
55
|
-
export default function WebGPUViewNativeComponent(
|
|
54
|
+
export default function WebGPUViewNativeComponent(
|
|
55
|
+
props: NativeProps,
|
|
56
|
+
): React.JSX.Element {
|
|
56
57
|
const { contextId, style, transparent, ...rest } = props;
|
|
57
58
|
|
|
58
59
|
const canvasElm = useRef<HTMLCanvasElement>();
|
|
59
60
|
|
|
60
61
|
useEffect(() => {
|
|
61
|
-
const onResize = debounce(
|
|
62
|
+
const onResize = debounce(
|
|
63
|
+
() => resizeCanvas(canvasElm.current ?? null),
|
|
64
|
+
100,
|
|
65
|
+
);
|
|
62
66
|
window.addEventListener("resize", onResize);
|
|
63
67
|
return () => {
|
|
64
68
|
window.removeEventListener("resize", onResize);
|
|
65
69
|
};
|
|
66
70
|
}, []);
|
|
67
71
|
|
|
68
|
-
return
|
|
72
|
+
return React.createElement("canvas", {
|
|
69
73
|
...rest,
|
|
70
|
-
style: [
|
|
71
|
-
styles.view,
|
|
72
|
-
styles.flex1,
|
|
73
|
-
transparent === false && { backgroundColor: "white" }, // Canvas elements are transparent by default on the web
|
|
74
|
-
style,
|
|
75
|
-
],
|
|
76
74
|
id: contextIdToId(contextId),
|
|
75
|
+
style: {
|
|
76
|
+
...styles.view,
|
|
77
|
+
...styles.flex1,
|
|
78
|
+
...(transparent === false ? { backgroundColor: "white" } : {}),
|
|
79
|
+
...(typeof style === "object" ? style : {}),
|
|
80
|
+
},
|
|
77
81
|
ref: (ref: HTMLCanvasElement) => {
|
|
78
82
|
canvasElm.current = ref;
|
|
79
83
|
if (ref) {
|
|
@@ -90,7 +94,8 @@ const styles = StyleSheet.create({
|
|
|
90
94
|
view: {
|
|
91
95
|
alignItems: "stretch",
|
|
92
96
|
backgroundColor: "transparent",
|
|
93
|
-
//
|
|
97
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
98
|
+
// @ts-expect-error
|
|
94
99
|
border: "0 solid black",
|
|
95
100
|
boxSizing: "border-box",
|
|
96
101
|
display: "flex",
|