From 8579c61ebbe03b1ed39347c1ef40c53f7a917971 Mon Sep 17 00:00:00 2001 From: Volky Date: Fri, 10 May 2024 15:12:17 -0300 Subject: [PATCH] Display workplace changes on preview --- apps/studio/src/model/Noun.ts | 4 ++ .../src/model/WorkspaceModes/EditMode.ts | 12 +++-- .../src/model/WorkspaceModes/PlacingMode.ts | 44 ++----------------- 3 files changed, 16 insertions(+), 44 deletions(-) diff --git a/apps/studio/src/model/Noun.ts b/apps/studio/src/model/Noun.ts index 6287c88..6c8ff72 100644 --- a/apps/studio/src/model/Noun.ts +++ b/apps/studio/src/model/Noun.ts @@ -5,6 +5,7 @@ import { clearCanvas } from "../utils/canvas/clearCanvas"; import { drawCanvas } from "../utils/canvas/drawCanvas"; import { nounParts } from "../utils/constants"; import { NounPartState, createNounPart } from "./NounPart"; +import { useWorkspaceState } from "./Workspace"; export type NounState = { activePart: NounPartType | null; @@ -82,11 +83,14 @@ export const drawNounCanvas = (state: NounState) => { if (!state.canvas) { return; } + const workingCanvas = useWorkspaceState.getState().canvas!; clearCanvas(state.canvas); for (const part of nounParts) { if (!state[part].visible) { continue; } + + state.activePart === part ? drawCanvas(workingCanvas, state.canvas) : drawCanvas(state[part].canvas, state.canvas); } }; diff --git a/apps/studio/src/model/WorkspaceModes/EditMode.ts b/apps/studio/src/model/WorkspaceModes/EditMode.ts index edef1c1..f5a1e2b 100644 --- a/apps/studio/src/model/WorkspaceModes/EditMode.ts +++ b/apps/studio/src/model/WorkspaceModes/EditMode.ts @@ -21,7 +21,7 @@ import { getCanvasPoint } from "../../utils/geometry/getCanvasPoint"; import { Brush, useBrush } from "../Brush"; import { useClipboardState } from "../Clipboard"; import { useCursor } from "../Cursor"; -import { useNounState } from "../Noun"; +import { drawNounCanvas, useNounState } from "../Noun"; import { NounPartState } from "../NounPart"; import { useSelection } from "../Selection"; import { useToolboxState } from "../Toolbox"; @@ -91,7 +91,8 @@ export const EditMode: WorkspaceMode = { e.preventDefault(); const activePart = useNounState.getState().getActivePartState(); if (!activePart || !activePart.canUndo) return; - activePart.undo(); + activePart.undo().then(() => drawNounCanvas(useNounState.getState())); + }, description: "Undo", }, @@ -101,7 +102,7 @@ export const EditMode: WorkspaceMode = { e.preventDefault(); const activePart = useNounState.getState().getActivePartState(); if (!activePart || !activePart.canRedo) return; - activePart.redo(); + activePart.redo().then(() => drawNounCanvas(useNounState.getState())); }, description: "Redo", }, @@ -243,6 +244,7 @@ const copySelectionToClipboard = () => { const handleLeftMouseDown = (point: Point, canvas: HTMLCanvasElement, partState: NounPartState) => { applyTool([point], canvas, partState); Brush.drawHover(point, canvas!); + drawNounCanvas(useNounState.getState()); useCursor.setState({ pathPoints: [point], clickingLeft: true }); }; @@ -250,6 +252,7 @@ const handleLeftMouseMove = (point: Point, canvas: HTMLCanvasElement, partState: const { pathPoints } = useCursor.getState(); applyTool([...pathPoints, point], canvas, partState); Brush.drawHover(point, canvas); + drawNounCanvas(useNounState.getState()); useCursor.setState({ pathPoints: [...pathPoints, point] }); }; @@ -259,6 +262,7 @@ const handleLeftMouseUp = (point: Point, canvas: HTMLCanvasElement, partState: N applyTool(points, canvas, partState); replaceCanvas(canvas, partState.canvas); Brush.drawHover(point, canvas); + drawNounCanvas(useNounState.getState()); partState.commit(); useCursor.setState({ pathPoints: [], clickingLeft: false }); @@ -267,12 +271,14 @@ const handleLeftMouseUp = (point: Point, canvas: HTMLCanvasElement, partState: N const handleMouseMove = (point: Point, canvas: HTMLCanvasElement, partState: NounPartState) => { replaceCanvas(partState.canvas, canvas); Brush.drawHover(point, canvas); + drawNounCanvas(useNounState.getState()); }; const applyTool = (points: Point[], workingCanvas: HTMLCanvasElement, partState: NounPartState) => { const tool = useToolboxState.getState().tool; replaceCanvas(partState.canvas, workingCanvas); tool.apply(points, workingCanvas, partState); + drawNounCanvas(useNounState.getState()); }; const apply = (action: (ctx: CanvasRenderingContext2D) => void) => { diff --git a/apps/studio/src/model/WorkspaceModes/PlacingMode.ts b/apps/studio/src/model/WorkspaceModes/PlacingMode.ts index 7323624..a95fb79 100644 --- a/apps/studio/src/model/WorkspaceModes/PlacingMode.ts +++ b/apps/studio/src/model/WorkspaceModes/PlacingMode.ts @@ -10,7 +10,7 @@ import { MouseButton, MouseEventType } from "../../utils/constants"; import { getCanvasPoint } from "../../utils/geometry/getCanvasPoint"; import { useClipboardState } from "../Clipboard"; import { useCursor } from "../Cursor"; -import { useNounState } from "../Noun"; +import { drawNounCanvas, useNounState } from "../Noun"; import { NounPartState } from "../NounPart"; import { useSelection } from "../Selection"; import { WorkspaceMode, useWorkspaceState } from "../Workspace"; @@ -161,14 +161,6 @@ export const PlacingMode: WorkspaceMode = { }, { commands: ["?"], callback: () => useCheatSheetState.getState().toggle(), description: "Open cheat sheet" }, ], - - // Mousetrap.bind("enter", () => { - // if (!canvas || !placing) { - // return; - // } - - // place(canvas); - // }); }; const renderWorkspaceCanvas = () => { @@ -196,6 +188,7 @@ const renderWorkspaceCanvas = () => { } drawCanvas(placingCanvas, workspaceCanvas, placeOffset.x, placeOffset.y); + drawNounCanvas(useNounState.getState()); }; const commitPlacing = () => { @@ -218,6 +211,7 @@ const endPlacing = () => { const { resetPlacing } = usePlacingState.getState(); useWorkspaceState.getState().changeMode(EditMode); resetPlacing(); + drawNounCanvas(useNounState.getState()); }; const handleLeftMouseDown = (point: Point, workingCanvas: HTMLCanvasElement, partState: NounPartState) => { @@ -240,35 +234,3 @@ const handleLeftMouseUp = (point: Point, workingCanvas: HTMLCanvasElement, partS const handleMouseMove = (point: Point, workingCanvas: HTMLCanvasElement, partState: NounPartState) => { renderWorkspaceCanvas(); }; - -// const applyTool = (points: Point[], workingCanvas: HTMLCanvasElement, partState: NounPartState) => { -// const tool = useToolboxState.getState().tool; -// const { placingCanvas, placing, placeOffset } = useClipboardState.getState(); -// replaceCanvas(partState.canvas, workingCanvas); -// tool.apply(points, workingCanvas, partState); -// if (placing) { -// drawCanvas(placingCanvas, workingCanvas, placeOffset.x, placeOffset.y); -// } -// }; - -// const apply = (action: (ctx: CanvasRenderingContext2D) => void) => { -// const nounState = useNounState.getState(); -// if (!nounState.activePart) return; - -// const { canvas } = useWorkspaceState.getState(); -// if (!canvas) return; - -// const activePartState = nounState[nounState.activePart]; -// const ctx = canvas.getContext("2d")!; -// action(ctx); -// replaceCanvas(canvas, activePartState.canvas); -// activePartState.commit(); -// }; - -// const { placing, offsetPlacing } = useClipboardState.getState(); -// if (placing) { -// const xOffset = points[points.length - 1].x - points[points.length - 2]?.x ?? points[points.length - 1].x; -// const yOffset = points[points.length - 1].y - points[points.length - 2]?.y ?? points[points.length - 1].y; -// offsetPlacing(xOffset, yOffset); -// return; -// }