Add mouse parameter to the sandbox

docs/components/PaveRenderer.vue

@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import {throttledWatch, useCssVar, useElementSize} from '@vueuse/core'
-import {computed, onMounted, ref, watch} from 'vue'
+import {
+	throttledWatch,
+	useCssVar,
+	useElementSize,
+	useMouseInElement,
+} from '@vueuse/core'
+import {computed, onMounted, ref, watch, watchEffect} from 'vue'
 
 import {createDrawFunction, setupEvalContextCreator} from './createDrawFunction'
+import {vec2} from 'linearly'
 
 const props = withDefaults(
 	defineProps<{
@@ -15,6 +21,22 @@ const props = withDefaults(
 const canvas = ref<null | HTMLCanvasElement>(null)
 const context = ref<null | CanvasRenderingContext2D>(null)
 
+const {x: mouseX, y: mouseY} = useMouseInElement(canvas, {
+	target: canvas,
+	type: e => {
+		const el = e.target as HTMLElement
+		return [
+			((e.pageX - el.offsetLeft) / el.offsetWidth) * 100,
+			((e.pageY - el.offsetTop) / el.offsetHeight) * 100,
+		]
+	},
+	initialValue: {x: 50, y: 50},
+})
+
+const mouse = computed<vec2>(() => [mouseX.value, mouseY.value])
+
+watchEffect(() => console.log(mouse.value))
+
 const {width: canvasWidth, height: canvasHeight} = useElementSize(canvas)
 
 onMounted(async () => {
@@ -30,7 +52,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 +72,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