diff --git a/app/app.ts b/app/app.ts index e85fe0b..d35b123 100644 --- a/app/app.ts +++ b/app/app.ts @@ -7,10 +7,18 @@ import { createAppStore } from "@editor/store"; export type ImageStudioApp = ReturnType; -export function createImageStudioApp(options?: { documentName?: string }) { +export function createImageStudioApp(options?: { documentName?: string; createDefaultArtboard?: boolean }) { const registry = createCommandRegistry([...viewportCommands, ...selectionCommands, ...documentCommands]); const store = createAppStore(createInitialAppState(options?.documentName), registry); + if (options?.createDefaultArtboard !== false) { + store.dispatch("document.addArtboard", { + id: crypto.randomUUID(), + name: "Artboard 1", + bounds: { x: -400, y: -300, w: 800, h: 600 }, + }); + } + return { registry, store, diff --git a/view/App.tsx b/view/App.tsx index 4a98125..2244efc 100644 --- a/view/App.tsx +++ b/view/App.tsx @@ -12,7 +12,7 @@ export function App({ app }: AppProps) { const zoomPercent = Math.round(state.editor.viewport.zoom * 100); return ( -
+

Image Studio

diff --git a/view/CanvasViewport.tsx b/view/CanvasViewport.tsx index 7219453..fa0816c 100644 --- a/view/CanvasViewport.tsx +++ b/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(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 ; + return ; } diff --git a/view/index.css b/view/index.css index 7012ea1..8e5334a 100644 --- a/view/index.css +++ b/view/index.css @@ -5,7 +5,13 @@ @apply font-sans; } + html, + body, + #root { + @apply h-full; + } + body { - @apply m-0 min-w-[320px] min-h-screen bg-background text-foreground; + @apply m-0 min-w-[320px] bg-background text-foreground; } }