Convert canvas components to TS

src/components/viewer/ViewerCanvas/core/Canvas.ts

@@ -252,7 +252,7 @@ class Collector extends EventEmitter2 {
 }
 
 class Canvas extends EventEmitter2 {
-	public camera: Camera
+	public camera?: Camera
 	public collectors: Collector[] = []
 
 	public readonly app: PIXI.Application = new PIXI.Application({
@@ -267,10 +267,9 @@ class Canvas extends EventEmitter2 {
 
 	private maid: Maid = new Maid()
 
-	constructor(camera: Camera) {
+	constructor() {
 		super()
 
-		this.camera = camera
 		this.element = this.app.view
 
 		const updateSize = () => {

src/components/viewer/ViewerCanvas/core/Input.ts

@@ -3,7 +3,7 @@ import { EventEmitter2 } from "eventemitter2"
 
 import Maid from "../../../../class/Maid"
 
-function getEventPosition(event: MouseEvent) {
+function getEventPosition(event: MouseEvent): Vector2 {
 	return new Vector2(event.offsetX, event.offsetY)
 }
 
@@ -38,8 +38,6 @@ class Pointer extends EventEmitter2 {
 	}
 }
 
-type EventListener = (event: Event) => void
-
 class Input extends EventEmitter2 {
 	public pointers: Record<string, Pointer> = {}
 	public maid: Maid = new Maid()

src/components/viewer/ViewerCanvas/index.jsx → src/components/viewer/ViewerCanvas/index.tsx

@@ -3,16 +3,21 @@ import styled from "styled-components"
 import Canvas from "./core/Canvas"
 import Camera from "./core/Camera"
 import Input from "./core/Input"
-import useStaticValue from "/src/util/useStaticValue"
+import useStaticValue from "../../../util/useStaticValue"
 import ViewerContext from "../ViewerContext"
+import { Snapshot } from "@free-draw/moderation-client"
 
 const ViewerCanvasElement = styled.div`
 	position: relative;
 	overflow: hidden;
 `
 
-function ViewerCanvas({ data, className, children }) {
-	const ref = React.useRef()
+function ViewerCanvas({ data, className, children }: {
+	data: Snapshot["canvas"],
+	className?: string,
+	children?: React.ReactNode[],
+}) {
+	const ref = React.useRef() as React.RefObject<HTMLDivElement>
 
 	const canvas = useStaticValue(() => new Canvas())
 	const input = useStaticValue(() => new Input(canvas.element))

src/components/viewer/ViewerContext.ts

@@ -0,0 +1,14 @@
+import React from "react"
+import Camera from "./ViewerCanvas/core/Camera"
+import Canvas from "./ViewerCanvas/core/Canvas"
+import Input from "./ViewerCanvas/core/Input"
+
+type ViewerContextData = {
+	canvas: Canvas,
+	input: Input,
+	camera: Camera,
+}
+
+const ViewerContext = React.createContext<ViewerContextData | null>(null)
+
+export default ViewerContext

src/components/viewer/ViewerHoverDetails.jsx → src/components/viewer/ViewerHoverDetails.tsx

@@ -1,9 +1,12 @@
+import { Vector2 } from "@free-draw/moderation-client"
 import React from "react"
 import styled from "styled-components"
-
+import { Pointer } from "./ViewerCanvas/core/Input"
 import ViewerContext from "./ViewerContext"
 
-const ViewerHoverDetailsElement = styled.div`
+const ViewerHoverDetailsElement = styled.div<{
+	enabled: boolean,
+}>`
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -21,16 +24,19 @@ const ViewerHoverDetailsNameElement = styled.span`
 	font-size: 16px;
 `
 
-function ViewerHoverDetails() {
-	const [ enabled, setEnabled ] = React.useState(false)
-	const [ name, setName ] = React.useState(null)
+const ViewerHoverDetails = () => {
+	const ref = React.useRef() as React.RefObject<HTMLDivElement>
+
+	const context = React.useContext(ViewerContext)
+	if (!context) throw new Error("ViewerHoverDetails must be inside of a ViewerCanvas")
+	const { canvas, input } = context
 
-	const ref = React.useRef()
-	const { canvas, input } = React.useContext(ViewerContext)
+	const [ enabled, setEnabled ] = React.useState<boolean>(false)
+	const [ name, setName ] = React.useState<string | null>(null)
 
 	React.useEffect(() => {
-		const listener = input.on("move", (_, screenPosition) => {
-			const position = canvas.camera.getRelativePosition(screenPosition)
+		const onMove = (_pointer: Pointer, screenPosition: Vector2) => {
+			const position = canvas.camera!.getRelativePosition(screenPosition)
 			const line = canvas.getLineAt(position)
 
 			const shouldBeEnabled = !!line
@@ -43,14 +49,17 @@ function ViewerHoverDetails() {
 				const owner = collector.owner
 
 				if (name !== owner.name) {
-					setName(owner.name)
+					setName(owner.name!)
 				}
 			}
 
-			ref.current.style.transform = `translate(${screenPosition.x}px, ${screenPosition.y}px)`
-		}, { objectify: true })
+			ref.current!.style.transform = `translate(${screenPosition.x}px, ${screenPosition.y}px)`
+		}
 
-		return () => listener.off()
+		input.on("move", onMove)
+		return () => {
+			input.off("move", onMove)
+		}
 	}, [ enabled, name ])
 
 	return (

src/components/viewer/ViewerPlayerBubbles.jsx → src/components/viewer/ViewerPlayerBubbles.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import styled from "styled-components"
-import { getRobloxThumbnail, RobloxThumbnailType } from "@free-draw/moderation-client"
-import API from "/src/API"
-import useAsync from "/src/util/useAsync"
+import { getRobloxThumbnail, RobloxThumbnailType, SnapshotPlayer, Vector2 } from "@free-draw/moderation-client"
+import API from "../../API"
+import useAsync from "../../util/useAsync"
 import ViewerPositionalOverlay from "./ViewerPositionalOverlay"
 
 const size = 64
@@ -35,8 +35,10 @@ const ViewerPlayerBubbleNameElement = styled.span`
 	margin-top: 12px;
 `
 
-function ViewerPlayerBubble(props) {
-	const { player, position } = props
+function ViewerPlayerBubble({ player, position }: {
+	player: SnapshotPlayer,
+	position: Vector2,
+}) {
 	const avatar = useAsync(getRobloxThumbnail, [ player.id ])(API, {
 		id: player.id,
 		type: RobloxThumbnailType.AVATAR_HEADSHOT,
@@ -46,7 +48,7 @@ function ViewerPlayerBubble(props) {
 	return (
 		<ViewerPositionalOverlay position={position} ignoreScale>
 			<ViewerPlayerBubbleElement href={`https://www.roblox.com/users/${player.id}/profile`}>
-				<ViewerPlayerBubbleAvatarElement src={avatar} />
+				<ViewerPlayerBubbleAvatarElement src={avatar ?? ""} />
 				<ViewerPlayerBubbleNameElement>{player.name}</ViewerPlayerBubbleNameElement>
 			</ViewerPlayerBubbleElement>
 		</ViewerPositionalOverlay>
@@ -55,11 +57,13 @@ function ViewerPlayerBubble(props) {
 
 const ViewerPlayerBubblesElement = styled.div``
 
-function ViewerPlayerBubbles(props) {
+function ViewerPlayerBubbles({ players }: {
+	players: SnapshotPlayer[],
+}) {
 	return (
 		<ViewerPlayerBubblesElement>
 			{
-				Object.values(props.players).map((player) => {
+				Object.values(players).map((player) => {
 					return (
 						<ViewerPlayerBubble
 							key={player.id}

src/components/viewer/ViewerPositionalOverlay.tsx

@@ -19,6 +19,7 @@ const ViewerPositionalOverlayElement = styled.div`
 function ViewerPositionalOverlay(props: {
 	position: Vector2,
 	ignoreScale?: boolean,
+	children: React.ReactNode[],
 }) {
 	const context = React.useContext(ViewerContext)
 	if (!context) throw new Error("ViewerPositionalOverlay must be inside of a ViewerCanvas")

src/components/viewer/index.js → src/components/viewer/index.ts

@@ -7,7 +7,7 @@ import ViewerPlayerBubbles from "./ViewerPlayerBubbles"
 
 export {
 	ViewerContext,
-	
+
 	ViewerCanvas,
 	ViewerHoverDetails,
 	ViewerPositionalOverlay,