Display workplace changes on preview

volkyeth · May 10, 2024 · 8579c61 · 8579c61
1 parent b7de1f9
commit 8579c61
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 44 deletions.
diff --git 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
@@ -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,13 +244,15 @@ 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 });
 };
 
 const handleLeftMouseMove = (point: Point, canvas: HTMLCanvasElement, partState: NounPartState) => {
   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
@@ -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;
-// }