fix: improve useSize hook

nrkno · Jan 26, 2024 · 16637fe · 16637fe
1 parent 260cba8
commit 16637fe
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/packages/apps/client/src/hooks/useControllerMessages.ts b/packages/apps/client/src/hooks/useControllerMessages.ts
@@ -19,9 +19,9 @@ export function useControllerMessages(ref: React.RefObject<HTMLElement>, heightP
 
 		const onFrame = (now: number) => {
 			const frameTime = lastFrameTime.current === null ? 16 : now - lastFrameTime.current
-			const scrollBy = ((speed.current * fontSizePx) / 300) * frameTime
+			const scrollBy = ((speed.current * fontSizePx) / 300000000) * frameTime
 			position.current = Math.max(0, position.current + scrollBy)
-			console.log(position.current)
+			// console.log(position.current, scrollBy)
 
 			ref.current?.scrollTo(0, position.current)
 

diff --git a/packages/apps/client/src/lib/useSize.ts b/packages/apps/client/src/lib/useSize.ts
@@ -1,8 +1,12 @@
-import { useLayoutEffect, useState } from 'react'
+import { useEffect, useLayoutEffect, useState } from 'react'
 import useResizeObserver from '@react-hook/resize-observer'
 
-export function useSize(target: React.RefObject<HTMLElement>): DOMRect | undefined {
-	const [size, setSize] = useState<DOMRect>()
+export function useSize(target: React.RefObject<HTMLElement>): BoxSize | undefined {
+	const [size, setSize] = useState<{ width: number; height: number }>()
+
+	useEffect(() => {
+		console.log(size, target.current)
+	}, [size, target])
 
 	useLayoutEffect(() => {
 		if (!target.current) return
@@ -11,6 +15,13 @@ export function useSize(target: React.RefObject<HTMLElement>): DOMRect | undefin
 	}, [target])
 
 	// Where the magic happens
-	useResizeObserver(target, (entry) => setSize(entry.contentRect))
+	useResizeObserver(target, (entry) =>
+		setSize({ width: entry.borderBoxSize[0].inlineSize, height: entry.borderBoxSize[0].blockSize })
+	)
 	return size
 }
+
+type BoxSize = {
+	width: number
+	height: number
+}
diff --git a/packages/apps/client/src/views/Output/Output.tsx b/packages/apps/client/src/views/Output/Output.tsx
@@ -28,7 +28,9 @@ const Output = observer(function Output(): React.ReactElement {
 	const scaleVertical = outputSettings.mirrorVertically ? '-1' : '1'
 	const scaleHorizontal = outputSettings.mirrorHorizontally ? '-1' : '1'
 
-	useControllerMessages(rootEl, size.height, (fontSize * size.width) / 100)
+	const sizeCorrection = 1
+
+	useControllerMessages(rootEl, size.height, ((fontSize * size.width) / 100) * sizeCorrection)
 
 	const onViewPortSizeChanged = useCallback(() => {
 		const width = window.innerWidth
@@ -140,10 +142,10 @@ const Output = observer(function Output(): React.ReactElement {
 	const styleVariables = useMemo(
 		() =>
 			({
-				'--prompter-font-size-base': `${fontSize}vw`,
+				'--prompter-font-size-base': `${(fontSize * size.width * sizeCorrection) / 100}px`,
 				transform: `scale(${scaleHorizontal}, ${scaleVertical})`,
 			} as React.CSSProperties),
-		[fontSize, scaleVertical, scaleHorizontal]
+		[fontSize, size.width, scaleVertical, scaleHorizontal]
 	)
 
 	const className = `Prompter ${classes.Output}`