Add mouse parameter to the sandbox

docs/components/PaveRenderer.vue

@@ -1,8 +1,16 @@
 <script lang="ts" setup>
-import {throttledWatch, useCssVar, useElementSize} from '@vueuse/core'
+import {
+	throttledWatch,
+	useCssVar,
+	useElementBounding,
+	useElementSize,
+	useMouseInElement,
+	watchOnce,
+} from '@vueuse/core'
 import {computed, onMounted, ref, watch} from 'vue'
 
 import {createDrawFunction, setupEvalContextCreator} from './createDrawFunction'
+import {vec2} from 'linearly'
 
 const props = withDefaults(
 	defineProps<{
@@ -15,7 +23,37 @@ const props = withDefaults(
 const canvas = ref<null | HTMLCanvasElement>(null)
 const context = ref<null | CanvasRenderingContext2D>(null)
 
-const {width: canvasWidth, height: canvasHeight} = useElementSize(canvas)
+const {
+	x: mouseX,
+	y: mouseY,
+	isOutside,
+} = useMouseInElement(canvas, {
+	target: canvas,
+})
+
+const onceHovered = ref(false)
+
+watchOnce(isOutside, () => {
+	if (!isOutside.value) {
+		onceHovered.value = true
+	}
+})
+
+const mouse = computed<vec2>(() =>
+	onceHovered.value
+		? [
+				((mouseX.value - canvasX.value) / canvasWidth.value) * 100,
+				((mouseY.value - canvasY.value) / canvasHeight.value) * 100,
+		  ]
+		: [50, 50]
+)
+
+const {
+	width: canvasWidth,
+	height: canvasHeight,
+	x: canvasX,
+	y: canvasY,
+} = useElementBounding(canvas)
 
 onMounted(async () => {
 	context.value = canvas.value?.getContext('2d') ?? null
@@ -30,7 +68,7 @@ onMounted(async () => {
 		return createDrawContext(ctx)
 	})
 
-	const evalFn = ref<((time: number) => void) | null>(null)
+	const evalFn = ref<((arg: {time: number; mouse: vec2}) => void) | null>(null)
 
 	throttledWatch(
 		() =>
@@ -50,12 +88,12 @@ onMounted(async () => {
 	)
 
 	watch(
-		() => [props.time, evalFn.value] as const,
-		([time, evalFn]) => {
+		() => [props.time, mouse.value, evalFn.value] as const,
+		([time, mouse, evalFn]) => {
 			if (!evalFn) return
 
 			try {
-				evalFn(time)
+				evalFn({time, mouse})
 			} catch (e) {
 				// eslint-disable-next-line no-console
 				console.error(e)

docs/components/createDrawFunction.ts

@@ -134,15 +134,15 @@ export function createDrawFunction(
 
 	try {
 		const draw = saferEval(
-			`(time) => {\n${code}\n}`,
+			`({time, mouse}) => {\n${code}\n}`,
 			evalContext
-		) as unknown as (time: number) => void
+		) as unknown as (arg: {time: number; mouse: vec2}) => void
 
-		return (time: number) => {
+		return (arg: {time: number; mouse: vec2}) => {
 			canvasContext.clearRect(0, 0, canvas.width, canvas.height)
 			canvasContext.resetTransform()
 			canvasContext.transform(...mat2d.fromScaling([scale, scale]))
-			draw(time)
+			draw(arg)
 		}
 	} catch (e) {
 		// eslint-disable-next-line no-console

docs/components/exportVideo.ts

@@ -66,7 +66,7 @@ export async function exportVideo(code: string, onlyCanvas = false) {
 	for (let i = 0; i < frameCount; i++) {
 		const time = i / frameCount
 
-		evalFn(time)
+		evalFn({time, mouse: [50, 50]})
 
 		if (!onlyCanvas) {
 			videoContext.clearRect(0, 0, 1920, 1080)

docs/sandbox.md

@@ -26,6 +26,9 @@ context: CanvasRenderingContext2D
 // Current time ranging from 0 to 1
 time: number
 
+// The position of the mouse ranging from 0 to 100. Initial value is [50, 50]
+mouse: [x: number, y: number]
+
 // Shorhands for drawing functions
 stroke: (path: Path, color = accentCoor, width = 1) => void
 fill: (path: Path, color = accentColor) => void