From 299bae656fbfec4f803a317c06a5c8fb61db5650 Mon Sep 17 00:00:00 2001 From: Jacob Lambert Date: Tue, 31 Mar 2020 17:52:14 -0400 Subject: [PATCH 1/6] created importpalettemodal; created combinepals util (no functionality yet); updated app to utilize the modal and util --- src/components/App.tsx | 34 ++++++++++++++++++++++++++-------- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index d89c828..40a234a 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -25,6 +25,8 @@ import PalettePanel from "./PalettePanel"; import ToolsPanel from "./ToolsPanel"; import NewImageModal from "./modals/NewImageModal"; import useModal from "./hooks/useModal"; +import ImportPaletteModal from "./modals/ImportPaletteModal"; +import { combinePals } from "../util/combinePals"; function scaleReducer(state: number, e: WheelEvent) { const direction = e.deltaY < 0 ? -1 : 1; @@ -54,6 +56,11 @@ function App(): JSX.Element { isShowing: isMode4BitmapModalShowing, toggle: toggleMode4BitmpModal } = useModal(); + const { + isShowing: isPaletteModalShowing, + toggle: togglePaletteModal + } = useModal(); + const [scale, scaleDispatch] = useReducer(scaleReducer, 8); const handleMouseWheelEvent = useCallback(e => scaleDispatch(e), []); @@ -124,13 +131,17 @@ function App(): JSX.Element { }; const handlePaletteImport = ( - oldPal: Palette, - newPal: Palette, - oldStartRow: number, - newStartRow: number, + pal: Palette, + startRow: number, numRows: number, - overwrite: boolean - ) => {}; + ) => { + combinePals(palette, pal, startRow, numRows); + + if (image instanceof Bitmap4) { + image.updatePalette(pal); + } + handlePaletteChange(pal); + }; const handleToolChange = useCallback( (newTool: Tool) => { @@ -402,10 +413,17 @@ function App(): JSX.Element { buttonLabel="Image (*.png, *.bmp, *.jpg)" />
- + /> */} + + +
Image
From 058c98e55289973ca65beb32b57d2359999518b3 Mon Sep 17 00:00:00 2001 From: Jacob Lambert Date: Thu, 2 Apr 2020 17:00:05 -0400 Subject: [PATCH 2/6] functionality for importing speific palette row/s works; scss is not updated --- src/components/App.tsx | 36 ++++++++++++++++-------------------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 40a234a..9f2b0f1 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -26,7 +26,6 @@ import ToolsPanel from "./ToolsPanel"; import NewImageModal from "./modals/NewImageModal"; import useModal from "./hooks/useModal"; import ImportPaletteModal from "./modals/ImportPaletteModal"; -import { combinePals } from "../util/combinePals"; function scaleReducer(state: number, e: WheelEvent) { const direction = e.deltaY < 0 ? -1 : 1; @@ -76,9 +75,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; } }; @@ -117,26 +116,22 @@ 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, - startRow: number, - numRows: number, ) => { - combinePals(palette, pal, startRow, numRows); - if (image instanceof Bitmap4) { image.updatePalette(pal); } @@ -423,6 +418,7 @@ function App(): JSX.Element { isShowing={isPaletteModalShowing} hide={togglePaletteModal} onAccept={handlePaletteImport} + oldPal={palette} > From e5eb8795a31a9f2cf9237f6b0258f659bfbcb97c Mon Sep 17 00:00:00 2001 From: Jacob Lambert Date: Thu, 2 Apr 2020 17:13:31 -0400 Subject: [PATCH 3/6] functionality for importing speific palette row/s works; scss is not updated --- src/components/modals/ImportPaletteModal.tsx | 154 +++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 src/components/modals/ImportPaletteModal.tsx diff --git a/src/components/modals/ImportPaletteModal.tsx b/src/components/modals/ImportPaletteModal.tsx new file mode 100644 index 0000000..929007d --- /dev/null +++ b/src/components/modals/ImportPaletteModal.tsx @@ -0,0 +1,154 @@ +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( + +
+
+
+
Import a New Palette
+ { + onAccept(pal, oldStartRow, newStartRow, numRows); + hide(); + }} + oldPal={oldPal} + > +
+ +
+
+
+ , + document.body + ) + : null; + +const ImportPaletteForm = ({ onAccept, oldPal }: ImportPaletteFormProps) => { + const [pal, setPal] = useState(DEFAULT_PALETTE); + const [oldStartRow, setOldStartRow] = useState(0); + const [newStartRow, setNewStartRow] = useState(0); + const [numRows, setNumRows] = useState(16); + + const handleFileInputChange = ( + element: HTMLInputElement | null, + event: React.FormEvent + ): 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) => + setOldStartRow(parseInt(e.target.value)); + + const handleNewStartRowChange = (e: React.ChangeEvent) => + setNewStartRow(parseInt(e.target.value)); + + const handleNumRowsChange = (e: React.ChangeEvent) => + setNumRows(parseInt(e.target.value)); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + combinePals(oldPal, pal, oldStartRow, newStartRow, numRows); + onAccept(oldPal, oldStartRow, newStartRow, numRows); + }; + + return ( +
+
+ +
+
+ +
+ + +
+ + +
+ + +
+
+
+ +
+
+ ); +}; + + +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; From 4791b8b6d7e9c4bf1120382f3deec581cec1ba11 Mon Sep 17 00:00:00 2001 From: Jacob Lambert Date: Thu, 16 Apr 2020 19:17:05 -0400 Subject: [PATCH 4/6] added helpful comments --- src/components/modals/ImportPaletteModal.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/modals/ImportPaletteModal.tsx b/src/components/modals/ImportPaletteModal.tsx index 929007d..97afe8e 100644 --- a/src/components/modals/ImportPaletteModal.tsx +++ b/src/components/modals/ImportPaletteModal.tsx @@ -79,10 +79,13 @@ const ImportPaletteForm = ({ onAccept, oldPal }: ImportPaletteFormProps) => { const handleNewStartRowChange = (e: React.ChangeEvent) => setNewStartRow(parseInt(e.target.value)); - + const handleNumRowsChange = (e: React.ChangeEvent) => 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); @@ -138,7 +141,16 @@ const ImportPaletteForm = ({ onAccept, oldPal }: ImportPaletteFormProps) => { ); }; - +/** + * 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, From 553e75681d6794e00a11d0e96809e409ecd992d5 Mon Sep 17 00:00:00 2001 From: Logan Bussell Date: Thu, 16 Apr 2020 22:23:34 -0400 Subject: [PATCH 5/6] fix palette not re-rendering after import --- src/components/App.tsx | 30 ++++++++++++------------------ 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 9f2b0f1..c328bce 100644 --- a/src/components/App.tsx +++ b/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"; @@ -44,25 +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 + 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", @@ -129,13 +128,8 @@ function App(): JSX.Element { // } // }; - const handlePaletteImport = ( - pal: Palette, - ) => { - if (image instanceof Bitmap4) { - image.updatePalette(pal); - } - handlePaletteChange(pal); + const handlePaletteImport = (pal: Palette) => { + handlePaletteChange(pal.slice()); }; const handleToolChange = useCallback( @@ -144,7 +138,7 @@ function App(): JSX.Element { grid: editorSettings.grid, currentTool: newTool, imageMode: editorSettings.imageMode, - editorMode: editorSettings.editorMode + editorMode: editorSettings.editorMode, }); }, [editorSettings] From 9ac188917af7e049baa4cca71731300ca2d9b590 Mon Sep 17 00:00:00 2001 From: Jacob Lambert Date: Thu, 16 Apr 2020 23:13:35 -0400 Subject: [PATCH 6/6] image now properly updates upon pal import when in mode 4 --- src/components/App.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/App.tsx b/src/components/App.tsx index c328bce..d26a151 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -129,6 +129,9 @@ function App(): JSX.Element { // }; const handlePaletteImport = (pal: Palette) => { + if (image instanceof Bitmap4) { + image.updatePalette(pal); + } handlePaletteChange(pal.slice()); };