feat(view): show default artboard canvas

view/CanvasViewport.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { AppStore } from "@editor/store";
 import type { GlobalPointerConsumer, GlobalWheelConsumer } from "@input/index";
 import {
@@ -24,6 +24,7 @@ export function CanvasViewport({
   globalWheelConsumer = ignoreGlobalWheel,
 }: CanvasViewportProps) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const [isPanning, setIsPanning] = useState(false);
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -73,6 +74,7 @@ export function CanvasViewport({
       if (!consumed) return;
 
       canvas.setPointerCapture(event.pointerId);
+      setIsPanning(true);
       event.preventDefault();
     };
 
@@ -83,7 +85,10 @@ export function CanvasViewport({
 
     const handlePointerUp = (event: PointerEvent) => {
       const consumed = panHandler.pointerUp(pointerInputEventFromPointerEvent(event));
-      if (consumed) event.preventDefault();
+      if (!consumed) return;
+
+      setIsPanning(false);
+      event.preventDefault();
     };
 
     canvas.addEventListener("pointerdown", handlePointerDown);
@@ -118,5 +123,5 @@ export function CanvasViewport({
     return () => canvas.removeEventListener("wheel", handleWheel);
   }, [globalWheelConsumer, store]);
 
-  return <canvas ref={canvasRef} className="h-full w-full" />;
+  return <canvas ref={canvasRef} className={isPanning ? "h-full w-full cursor-grabbing" : "h-full w-full cursor-grab"} />;
 }