refactor(images): refactor to rnd and add onMinimize

remigallego · Sep 1, 2020 · a613592 · a613592
1 parent 00bb0a2
commit a613592
Show file tree

Hide file tree

Showing 7 changed files with 3,513 additions and 3,493 deletions.
diff --git a/js/actions/images.ts b/js/actions/images.ts
@@ -1,8 +1,11 @@
 import { Action, Dispatch } from "redux";
 import { ImageFile } from "../types";
 import { generateImagesId } from "../utils/images";
+
 export const OPEN_IMAGE = "OPEN_IMAGE";
 export const CLOSE_IMAGE = "CLOSE_IMAGE";
+export const ON_DRAG_START = "ON_DRAG_START";
+export const ON_DRAG_STOP = "ON_DRAG_STOP";
 
 export function openImage(
   imageFile: ImageFile,
@@ -22,6 +25,30 @@ export function openImage(
   };
 }
 
+export function onDragStart(id: string) {
+  return (dispatch: Dispatch<Action>) => {
+    dispatch({
+      type: ON_DRAG_START,
+      payload: {
+        id
+      }
+    });
+  };
+}
+
+export function onDragStop(id: string, x: number, y: number) {
+  return (dispatch: Dispatch<Action>) => {
+    dispatch({
+      type: ON_DRAG_STOP,
+      payload: {
+        id,
+        x: x,
+        y: y
+      }
+    });
+  };
+}
+
 export function closeImage(id: string) {
   return (dispatch: Dispatch<Action>) => {
     dispatch({

diff --git a/js/components/ImageDialog/index.tsx b/js/components/ImageDialog/index.tsx
@@ -1,8 +1,11 @@
 import React, { useLayoutEffect, useState } from "react";
-import Draggable from "react-draggable";
 import styled, { css, keyframes } from "styled-components";
 import { ImageDialogType } from "../../types";
 import TitleBar from "../Explorer/TitleBar";
+import { toggleMinimize } from "../../actions/windows";
+import { useDispatch } from "react-redux";
+import { onDragStop, onDragStart } from "../../actions/images";
+import Rnd, { DraggableData } from "react-rnd";
 
 interface Props {
   image: ImageDialogType;
@@ -13,24 +16,54 @@ interface Props {
 export default (props: Props) => {
   const [animation, setAnimation] = useState<"grow" | "shrink" | "">("");
 
-  useLayoutEffect(() => {
+  /*   useLayoutEffect(() => {
     setAnimation("grow");
     setTimeout(() => setAnimation(""), 250);
   }, []);
+ */
+  const dispatch = useDispatch();
+
+  const handleDragStop = (data: DraggableData) => {
+    const { clientHeight, clientWidth } = document.documentElement;
+    const width = 400;
+    const height = 400;
+    const rightMostPoint = data.x + width;
+    const bottomMostPoint = data.y + height;
+
+    let x = data.x;
+    let y = data.y;
+
+    if (rightMostPoint > clientWidth) x = clientWidth - width;
+    if (x < 0) x = 0;
+    if (bottomMostPoint > clientHeight) y = clientHeight - height;
+    if (y < 0) y = 0;
+
+    /*     if (x === explorer.x && y === explorer.y) return; */
+    dispatch(onDragStop(props.image.id, x, y));
+  };
+
+  console.log(props.image.x);
 
   return (
     <>
-      <Draggable
+      <Rnd
         key={props.key}
-        defaultPosition={{
-          x: props.image.x - 200,
-          y: props.image.y - 200
+        position={{
+          x: props.image.x,
+          y: props.image.y
+        }}
+        onDragStart={e => {
+          dispatch(onDragStart(props.image.id));
         }}
+        onDragStop={(e: any, data: DraggableData) => handleDragStop(data)}
       >
         <Container enableShadow={animation.length === 0}>
           <Animated animation={animation}>
             <TitleBar
               title={props.image.title}
+              onMinimize={() => {
+                dispatch(toggleMinimize(props.image.id));
+              }}
               onClose={() => {
                 setAnimation("shrink");
                 setTimeout(() => props.onDismiss(), 250);
@@ -47,7 +80,7 @@ export default (props: Props) => {
             />
           </Animated>
         </Container>
-      </Draggable>
+      </Rnd>
     </>
   );
 };

diff --git a/js/components/TaskBar/index.tsx b/js/components/TaskBar/index.tsx
@@ -168,7 +168,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  height: 30px;
+  height: 40px;
 `;
 
 const Item = styled.div<{

diff --git a/js/reducers/images.ts b/js/reducers/images.ts
@@ -1,5 +1,10 @@
 import _ from "lodash";
-import { CLOSE_IMAGE, OPEN_IMAGE } from "../actions/images";
+import {
+  CLOSE_IMAGE,
+  OPEN_IMAGE,
+  ON_DRAG_STOP,
+  ON_DRAG_START
+} from "../actions/images";
 import { ImageDialogType } from "../types";
 
 export interface ImagesState {
@@ -20,6 +25,30 @@ const images = (state: ImagesState = initialStateImages, action: any) => {
       return openImage(state, action);
     case CLOSE_IMAGE:
       return closeImage(state, action);
+    case ON_DRAG_START:
+      return {
+        ...state,
+        byId: {
+          ...state.byId,
+          [action.payload.id]: {
+            ...state.byId[action.payload.id],
+            isDragging: true
+          }
+        }
+      };
+    case ON_DRAG_STOP:
+      return {
+        ...state,
+        byId: {
+          ...state.byId,
+          [action.payload.id]: {
+            ...state.byId[action.payload.id],
+            x: action.payload.x,
+            y: action.payload.y,
+            isDragging: false
+          }
+        }
+      };
     default:
       return state;
   }

diff --git a/js/types/index.ts b/js/types/index.ts
@@ -20,6 +20,7 @@ export interface ImageDialogType {
   x: number;
   y: number;
   title: string;
+  isDragging: boolean;
 }
 
 export interface ImageData {