Implement background image move

monman53 · Mar 26, 2022 · aea5142 · aea5142
1 parent 89d3386
commit aea5142
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 12 deletions.
diff --git a/src/Background.tsx b/src/Background.tsx
@@ -18,8 +18,8 @@ export function BackgroundCanvas() {
     const width = state.nw * state.dw;
     ctx.clearRect(0, 0, width, height);
     ctx.globalAlpha = 0.4;
-    if (state.image instanceof Image) {
-      ctx.drawImage(state.image, 0, 0)
+    if (state.background.image instanceof Image) {
+      ctx.drawImage(state.background.image, state.background.x, state.background.y)
     }
   }
 
@@ -41,24 +41,43 @@ export function ImageURL() {
   const setState = stateContext.setState;
 
   const handleImageURLChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    let background = state.background;
+
     // Get new imageURL
-    const url = event.target.value;
-    setState({ ...state, imageURL: url })
+    background.imageURL = event.target.value;
+    setState({ ...state, background: background });
 
     // Load image
     let image = new Image();
-    image.src = url;
+    image.src = background.imageURL;
     image.onload = () => {
-      setState({ ...state, image: image, imageURL: url })
+      background.image = image;
+      setState({ ...state, background: background });
     };
     image.onerror = () => {
-      setState({ ...state, image: new Image(), imageURL: url })
+      background.image = new Image();
+      setState({ ...state, background: background });
     };
   };
 
+  const handlePositionChange = (dx: number, dy: number) => {
+    return () => {
+      let background = state.background;
+      background.x += dx;
+      background.y += dy;
+      setState({ ...state, background: background });
+    }
+  }
+
   return (
     <div>
-      Image URL: <input className="form-control" type="text" value={state.imageURL} onChange={handleImageURLChange} />
+      Image URL: <input className="form-control" type="text" value={state.background.imageURL} onChange={handleImageURLChange} />
+      <div className="btn-group my-2" role="group">
+        <button className="btn btn-outline-secondary" onClick={handlePositionChange(-1, 0)}>←</button>
+        <button className="btn btn-outline-secondary" onClick={handlePositionChange(0, -1)}>↑</button>
+        <button className="btn btn-outline-secondary" onClick={handlePositionChange(0, 1)}>↓</button>
+        <button className="btn btn-outline-secondary" onClick={handlePositionChange(1, 0)}>→</button>
+      </div>
     </div>
   );
 };
diff --git a/src/State.tsx b/src/State.tsx
@@ -6,8 +6,6 @@ interface State {
   nw: number,
   nh: number,
   data: number[],
-  imageURL: string,
-  image: HTMLImageElement,
   brushType: number, // TODO: Use enum
   palette: {
     colors: {
@@ -16,6 +14,12 @@ interface State {
     selected: number,
     idCounter: number,
   }
+  background: {
+    imageURL: string,
+    image: HTMLImageElement,
+    x: number,
+    y: number,
+  },
   grid: {
     visible: boolean,
   },
@@ -38,14 +42,18 @@ export const initialState: State = {
   nw: nw,
   nh: nh,
   data: data,
-  imageURL: "",
-  image: new Image(),
   brushType: 1,
   palette: {
     colors: [{ key: 0, value: "#000000" }],
     selected: 0,
     idCounter: 1,
   },
+  background: {
+    imageURL: "",
+    image: new Image(),
+    x: 0,
+    y: 0,
+  },
   grid: {
     visible: true,
   },