Add palette import modal

src/components/App.tsx

@@ -3,14 +3,14 @@ import React, { useCallback, useReducer, useState, useEffect } from "react";
 import { Tool, STORAGE, DEFAULT_SETTINGS } from "../util/consts";
 import DEFAULT_PALETTE from "../util/defaultPalette";
 import { exportImage, exportPalette } from "../util/exportUtils";
-import { loadNewImage, loadNewPalette } from "../util/fileLoadUtils";
+import { loadNewImage } from "../util/fileLoadUtils";
 import {
   Color,
   Dimensions,
   EditorMode,
   EditorSettings,
   Mode,
-  ImageDataStore
+  ImageDataStore,
 } from "../util/interfaces";
 import { quantize } from "../util/quantize";
 import Bitmap from "../models/Bitmap";
@@ -25,6 +25,7 @@ import PalettePanel from "./PalettePanel";
 import ToolsPanel from "./ToolsPanel";
 import NewImageModal from "./modals/NewImageModal";
 import useModal from "./hooks/useModal";
+import ImportPaletteModal from "./modals/ImportPaletteModal";
 
 function scaleReducer(state: number, e: WheelEvent) {
   const direction = e.deltaY < 0 ? -1 : 1;
@@ -43,20 +44,24 @@ function App(): JSX.Element {
     grid: true,
     currentTool: Tool.PENCIL,
     imageMode: 3,
-    editorMode: EditorMode.Bitmap
+    editorMode: EditorMode.Bitmap,
   });
 
   const {
     isShowing: isMode3BitmapModalShowing,
-    toggle: toggleMode3BitmpModal
+    toggle: toggleMode3BitmpModal,
   } = useModal();
   const {
     isShowing: isMode4BitmapModalShowing,
-    toggle: toggleMode4BitmpModal
+    toggle: toggleMode4BitmpModal,
+  } = useModal();
+  const {
+    isShowing: isPaletteModalShowing,
+    toggle: togglePaletteModal,
   } = useModal();
 
   const [scale, scaleDispatch] = useReducer(scaleReducer, 8);
-  const handleMouseWheelEvent = useCallback(e => scaleDispatch(e), []);
+  const handleMouseWheelEvent = useCallback((e) => scaleDispatch(e), []);
 
   const handleFileInputChange = (
     type: "Image" | "Palette",
@@ -69,9 +74,9 @@ function App(): JSX.Element {
       case "Image":
         handleImageLoad(element.files[0]);
         break;
-      case "Palette":
-        handlePaletteLoad(element.files[0]);
-        break;
+      // case "Palette":
+      //   handlePaletteLoad(element.files[0]);
+      //   break;
     }
   };
 
@@ -110,35 +115,33 @@ function App(): JSX.Element {
 
   const handleClearLocalStorage = () => window.localStorage.clear();
 
-  const handlePaletteLoad = async (palFile: File | null) => {
-    if (palFile) {
-      console.log("Loading palette from file...");
-      let newPalette = await loadNewPalette(palFile);
-      if (newPalette) {
-        if (image instanceof Bitmap4) {
-          image.updatePalette(newPalette);
-        }
-        handlePaletteChange(newPalette);
-      }
+  // const handlePaletteLoad = async (palFile: File | null) => {
+  //   if (palFile) {
+  //     console.log("Loading palette from file...");
+  //     let newPalette = await loadNewPalette(palFile);
+  //     if (newPalette) {
+  //       if (image instanceof Bitmap4) {
+  //         image.updatePalette(newPalette);
+  //       }
+  //       handlePaletteChange(newPalette);
+  //     }
+  //   }
+  // };
+
+  const handlePaletteImport = (pal: Palette) => {
+    if (image instanceof Bitmap4) {
+      image.updatePalette(pal);
     }
+    handlePaletteChange(pal.slice());
   };
 
-  const handlePaletteImport = (
-    oldPal: Palette,
-    newPal: Palette,
-    oldStartRow: number,
-    newStartRow: number,
-    numRows: number,
-    overwrite: boolean
-  ) => {};
-
   const handleToolChange = useCallback(
     (newTool: Tool) => {
       handleSettingsChange({
         grid: editorSettings.grid,
         currentTool: newTool,
         imageMode: editorSettings.imageMode,
-        editorMode: editorSettings.editorMode
+        editorMode: editorSettings.editorMode,
       });
     },
     [editorSettings]
@@ -402,10 +405,18 @@ function App(): JSX.Element {
             buttonLabel="Image (*.png, *.bmp, *.jpg)"
           />
           <div className="dd-divider"></div>
-          <ImportButton
+          {/* <ImportButton
             onFileInputChange={handleFileInputChange.bind(null, "Palette")}
             buttonLabel="Color Palette (*.pal)"
-          />
+          /> */}
+
+          <button onClick={togglePaletteModal}>Palette</button>
+          <ImportPaletteModal
+            isShowing={isPaletteModalShowing}
+            hide={togglePaletteModal}
+            onAccept={handlePaletteImport}
+            oldPal={palette}
+          ></ImportPaletteModal>
         </Dropdown>
         <Dropdown label="Export">
           <div className="dd-content-header">Image</div>

src/components/modals/ImportPaletteModal.tsx

@@ -0,0 +1,166 @@
+import React, { useState } from "react";
+import ReactDOM from "react-dom";
+import ImportButton from "../buttons/ImportButton";
+import Palette from "../../models/Palette";
+import DEFAULT_PALETTE from "../../util/defaultPalette";
+import { loadNewPalette } from "../../util/fileLoadUtils";
+
+interface ImportPaletteModalProps {
+  onAccept: (pal: Palette, oldStartRow: number, newStartRow: number, numRows: number) => void;
+  isShowing: boolean;
+  hide: () => void;
+  oldPal: Palette;
+}
+
+interface ImportPaletteFormProps {
+  onAccept: (pal: Palette, oldStartRow: number, newStartRow: number, numRows: number) => void;
+  oldPal: Palette;
+}
+
+const ImportPaletteModal = ({ onAccept, isShowing, hide, oldPal }: ImportPaletteModalProps) =>
+  isShowing
+    ? ReactDOM.createPortal(
+        <React.Fragment>
+          <div className="modal-overlay" />
+          <div
+            className="modal-wrapper"
+            aria-modal
+            aria-hidden
+            tabIndex={-1}
+            role="dialog"
+          >
+            <div className="modal">
+              <div className="modal-header">Import a New Palette</div>
+              <ImportPaletteForm
+                onAccept={(pal, oldStartRow, newStartRow, numRows) => {
+                  onAccept(pal, oldStartRow, newStartRow, numRows);
+                  hide();
+                }}
+                oldPal={oldPal}
+              ></ImportPaletteForm>
+              <div className="modal-button-right">
+                <button onClick={hide} className="modal-button">Cancel</button>
+              </div>
+            </div>
+          </div>
+        </React.Fragment>,
+        document.body
+      )
+    : null;
+
+const ImportPaletteForm = ({ onAccept, oldPal }: ImportPaletteFormProps) => {
+  const [pal, setPal] = useState<Palette>(DEFAULT_PALETTE);
+  const [oldStartRow, setOldStartRow] = useState<number>(0);
+  const [newStartRow, setNewStartRow] = useState<number>(0);
+  const [numRows, setNumRows] = useState<number>(16);
+
+  const handleFileInputChange = (
+    element: HTMLInputElement | null,
+    event: React.FormEvent<HTMLInputElement>
+  ): void => {
+    event.preventDefault();
+    if (!element || !element.files) return;
+    handlePaletteLoad(element.files[0]);
+  };
+
+  const handlePaletteLoad = async (palFile: File | null) => {
+    if (palFile) {
+      console.log("Loading palette from file...");
+      let newPalette = await loadNewPalette(palFile);
+      if (newPalette) {
+        setPal(newPalette);
+      }
+    }
+  };
+
+
+  const handleOldStartRowChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setOldStartRow(parseInt(e.target.value));
+
+  const handleNewStartRowChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setNewStartRow(parseInt(e.target.value));
+
+  const handleNumRowsChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setNumRows(parseInt(e.target.value));
+
+  /**
+   * On submit, we combine the palettes and pass back the updated palette
+   */
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    combinePals(oldPal, pal, oldStartRow, newStartRow, numRows);
+    onAccept(oldPal, oldStartRow, newStartRow, numRows);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="modal-input-text">
+      <ImportButton
+            onFileInputChange={handleFileInputChange}
+            buttonLabel="Color Palette (*.pal)"
+          />
+      </div>      
+      <br />
+      <label className="modal-label">Palette Rows (0-15)</label>
+      <div className="modal-input-num">
+        <label htmlFor="startRow" className="modal-label-num">Current Palette Starting Row:</label>
+        <input
+          id="start"
+          type="number"
+          min={0}
+          max={16}
+          value={oldStartRow}
+          onChange={handleOldStartRowChange}
+        />
+        <br />
+        <label htmlFor="startRow" className="modal-label-num">Imported Palette Starting Row:</label>
+        <input
+          id="start"
+          type="number"
+          min={0}
+          max={16}
+          value={newStartRow}
+          onChange={handleNewStartRowChange}
+        />
+        <br />
+        <label htmlFor="numRows" className="modal-label-num">Number of Rows:</label>
+        <input
+          id="width"
+          type="number"
+          min={0}
+          max={16}          
+          value={numRows}
+          onChange={handleNumRowsChange}
+        />
+      </div>
+      <br />
+      <div className="modal-button-left">
+      <button className="modal-button">OK</button>
+      </div>
+    </form>
+  );
+};
+
+/**
+ * Function for combining two palettes
+ * @param oldPal old Palette
+ * @param newPal new Palette
+ * @param oldStartRow start row of old Palette
+ * @param newStartRow start row of new Palette
+ * @param numRows number of rows to replace
+ * This function overwrites a given number of rows on 
+ * the old Palette with rows from the new Palette
+ */
+const combinePals = (
+  oldPal: Palette, 
+  newPal: Palette, 
+  oldStartRow: number,
+  newStartRow: number, 
+  numRows: number
+): void => {
+   for(let i = 0; i < numRows * 16; i++) {
+      oldPal[i + oldStartRow * 16] = newPal[i + newStartRow * 16];
+   }
+}
+
+export default ImportPaletteModal;