allow more user viewport root customization

a-type · Oct 2, 2024 · 633913e · 633913e
1 parent b905c0f
commit 633913e
Showing 1 changed file with 12 additions and 4 deletions.
diff --git a/src/components/viewport/ViewportRoot.tsx b/src/components/viewport/ViewportRoot.tsx
@@ -39,14 +39,19 @@ const baseStyle: CSSProperties = {
 	width: '100%',
 	height: '100%',
 	flex: 1,
-	overflow: 'hidden',
-	userSelect: 'none',
-	cursor: 'move',
+};
+
+const requiredStyle: CSSProperties = {
 	position: 'relative',
+	cursor: 'move',
 	touchAction: 'none',
 	contain: 'strict',
+	userSelect: 'none',
+	overflow: 'hidden',
 };
 
+const defaultStyles = { ...baseStyle, ...requiredStyle };
+
 export const ViewportRoot = ({
 	children,
 	className,
@@ -66,7 +71,10 @@ export const ViewportRoot = ({
 		viewport.bindElement,
 	);
 
-	const style = userStyle ? { ...userStyle, ...baseStyle } : baseStyle;
+	const style =
+		userStyle ?
+			{ ...baseStyle, ...userStyle, ...requiredStyle }
+		:	defaultStyles;
 
 	return (
 		<ViewportContext.Provider value={viewport}>