Reset preview on rcc load

nekiro · Sep 28, 2022 · 19fa951 · 19fa951
1 parent 0639c34
commit 19fa951
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 43 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "rcc-editor",
   "productName": "rcc-editor",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "edit qt .rcc files",
   "main": ".webpack/main",
   "scripts": {

diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx
@@ -1,31 +1,3 @@
-/**
- * This file will automatically be loaded by webpack and run in the "renderer" context.
- * To learn more about the differences between the "main" and the "renderer" context in
- * Electron, visit:
- *
- * https://electronjs.org/docs/latest/tutorial/process-model
- *
- * By default, Node.js integration in this file is disabled. When enabling Node.js integration
- * in a renderer process, please be aware of potential security implications. You can read
- * more about security risks here:
- *
- * https://electronjs.org/docs/tutorial/security
- *
- * To enable Node.js integration in this file, open up `main.js` and enable the `nodeIntegration`
- * flag:
- *
- * ```
- *  // Create the browser window.
- *  mainWindow = new BrowserWindow({
- *    width: 800,
- *    height: 600,
- *    webPreferences: {
- *      nodeIntegration: true
- *    }
- *  });
- * ```
- */
-
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import MainScreen from './screens/MainScreen';

diff --git a/src/renderer/components/Preview/index.tsx b/src/renderer/components/Preview/index.tsx
@@ -2,13 +2,7 @@ import React from 'react';
 import useSelectedElement from '../../hooks/useSelectedElement';
 import styles from './style.css';
 
-type PreviewProps = {
-  visible: boolean;
-};
-
-export default function Preview({
-  visible,
-}: PreviewProps & React.ImgHTMLAttributes<HTMLImageElement>) {
+export default function Preview() {
   const [selected, setSelected] = useSelectedElement();
 
   const onDropToPreview = async (event: React.DragEvent<HTMLImageElement>) => {
@@ -34,7 +28,7 @@ export default function Preview({
     <img
       onDrop={onDropToPreview}
       onDragOver={onDragOverToPreview}
-      className={`${styles.preview} ${visible ? styles.visible : ''}`}
+      className={`${styles.preview} ${selected.element ? styles.visible : ''}`}
       src={
         selected.element ? `data:image/png;base64,${selected.image?.data}` : ''
       }

diff --git a/src/renderer/hooks/useSelectedElement.tsx b/src/renderer/hooks/useSelectedElement.tsx
@@ -8,7 +8,7 @@ import { Image } from '../../types/Image';
 
 type SelectedElementContext = [
   { element?: HTMLButtonElement; image?: Image },
-  (element: HTMLButtonElement, image: Image) => void,
+  (element?: HTMLButtonElement, image?: Image) => void,
 ];
 
 const context = createContext<SelectedElementContext>([{}, () => true]);
@@ -19,7 +19,7 @@ export const SelectedElementProvider = ({ children }: PropsWithChildren) => {
     image?: Image;
   }>({});
 
-  const setElement = (element: HTMLButtonElement, image: Image) =>
+  const setElement = (element?: HTMLButtonElement, image?: Image) =>
     setElementState({
       element,
       image,

diff --git a/src/renderer/screens/MainScreen/index.tsx b/src/renderer/screens/MainScreen/index.tsx
@@ -3,15 +3,18 @@ import SelectableList from '../../components/SelectableList';
 import styles from './style.css';
 import { Image } from '../../../types/Image';
 import Preview from '../../components/Preview';
-import useSelectedElement from '../../hooks/useSelectedElement';
+import useSelectedElement from '../../../renderer/hooks/useSelectedElement';
 
 export default function MainScreen() {
   const [images, setImages] = useState<Image[]>([]);
-  const [selectedElement] = useSelectedElement();
+  const [, setElement] = useSelectedElement();
 
   useEffect(() => {
     window.api.handlers.listImages.subscribe(
-      (_: Electron.IpcRendererEvent, images: Image[]) => setImages(images),
+      (_: Electron.IpcRendererEvent, images: Image[]) => {
+        setElement();
+        setImages(images);
+      },
     );
     window.api.handlers.listImage.subscribe(
       (_: Electron.IpcRendererEvent, index: number, image: Image) =>
@@ -32,7 +35,7 @@ export default function MainScreen() {
       <div
         className={`${styles['center-container']} ${styles['miniature-holder']}`}
       >
-        <Preview visible={!!selectedElement} />
+        <Preview />
       </div>
     </div>
   );