card cascade and constants

.gitignore

@@ -23,4 +23,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+# firebase
+/.firebase
 firebase-debug.log

src/components-shared/Dropdowns/ColorDropdown.jsx

@@ -1,8 +1,8 @@
 import React, { useRef } from 'react';
 
 import './ColorDropdown.scss';
-import '../../styles/colors.scss'
-import { CARD_COLOR_KEYS } from '../../styles/colors';
+import '../../constants/colors.scss';
+import { CARD_COLOR_KEYS } from '../../constants/colors';
 import useOutsideClick from '../../utils/useOutsideClick';
 
 export const ColorDropdown = ({

src/components/Canvas/hooks.js

@@ -4,30 +4,23 @@ import { useDispatch, useSelector } from "react-redux";
 import { actions } from '../../data/redux';
 import * as api from '../../data/api/database';
 
-import { NETWORK_STATUS } from '../../data/redux/session/constants';
-import { GRID } from '../../styles/constants';
+import { NETWORK_STATUS, CANVAS_STATES } from '../../constants/states';
+import {
+  GRID_SIZE,
+  GRID_SCALE,
+  DEFAULT_CANVAS_POSITION,
+  DEFAULT_CANVAS_SCALE,
+} from '../../constants/dimensions';
 import { ANIMATION } from '../Card/hooks';
-import { DEFAULT_TAB_POSITION, DEFAULT_TAB_SCALE } from '../../data/redux/project/constants';
-
-export const CANVAS_STATES = {
-  empty: 'empty',
-  loading: 'loading',
-  loaded: 'loaded',
-};
-
-export const CANVAS_SIZE = {
-  width: 250 * GRID.size,
-  height: 200 * GRID.size,
-};
 
 export const useCanvasHooks = () => {
   const dispatch = useDispatch();
   const userId = useSelector((state) => state.user.userId);
   const status = useSelector(state => state.session.status || NETWORK_STATUS.idle);
   const activeProject = useSelector(state => state.session.activeCampaignId || '');
   const activeTab = useSelector(state => state.project.present.activeViewId || '');
-  const activeTabPosition = useSelector(state => activeTab ? state.project.present.views[activeTab]?.pos : DEFAULT_TAB_POSITION);
-  const activeTabScale = useSelector(state => activeTab ? state.project.present.views[activeTab]?.scale : DEFAULT_TAB_SCALE);
+  const activeTabPosition = useSelector(state => activeTab ? state.project.present.views[activeTab]?.pos : DEFAULT_CANVAS_POSITION);
+  const activeTabScale = useSelector(state => activeTab ? state.project.present.views[activeTab]?.scale : DEFAULT_CANVAS_SCALE);
   const cardCollection = useSelector(state => state.project.present.cards);
 
   const [ canvasState, setCanvasState ] = useState(CANVAS_STATES.empty);
@@ -78,7 +71,7 @@ export const useCanvasHooks = () => {
       let newScale = activeTabScale ?? 1;
       newScale += event.deltaY * -0.001;
       newScale = Math.round(newScale * 10) / 10;
-      newScale = Math.min(Math.max(GRID.scaleMin, newScale), GRID.scaleMax);
+      newScale = Math.min(Math.max(GRID_SCALE.min, newScale), GRID_SCALE.max);
       dispatch(actions.project.setActiveTabScale({ scale: newScale }));
     },
     cardDropHandler: (event) => {
@@ -87,8 +80,8 @@ export const useCanvasHooks = () => {
       if (cardCollection[droppedCard]) {
         if (!cardCollection[droppedCard].views[activeTab]) {
           // TODO more precise position calculation
-          let x = Math.round((event.clientX - GRID.size - GRID.size) / GRID.size) * GRID.size;
-          let y = Math.round((event.clientY - GRID.size - GRID.size) / GRID.size) * GRID.size;
+          let x = Math.round((event.clientX - GRID_SIZE - GRID_SIZE) / GRID_SIZE) * GRID_SIZE;
+          let y = Math.round((event.clientY - GRID_SIZE - GRID_SIZE) / GRID_SIZE) * GRID_SIZE;
           x = (x < 0) ? 0 : x;
           y = (y < 0) ? 0 : y;
           const position = { x, y };

src/components/Canvas/index.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { Rnd } from 'react-rnd';
 
-import { CANVAS_STATES, CANVAS_SIZE, useCanvasHooks } from './hooks';
+import { useCanvasHooks } from './hooks';
 import Card from '../Card/Card';
 
-import { GRID } from '../../styles/constants';
+import { CANVAS_STATES } from '../../constants/states';
+import { GRID_SIZE, CANVAS_SIZE } from '../../constants/dimensions';
+
 import './index.scss';
 import BookIcon from '../../assets/icons/book.svg';
 import PlusIcon from '../../assets/icons/plus.svg'
@@ -88,7 +90,7 @@ const Canvas = ({ toolMenuRef }) => {
               {cardList}
               <div
                 className='grid'
-                style={{ backgroundSize: GRID.size + ' ' + GRID.size }}
+                style={{ backgroundSize: GRID_SIZE + ' ' + GRID_SIZE }}
               />
             </div>
           </Rnd>

src/components/Card/Card.jsx

@@ -7,7 +7,7 @@ import Title from './Title';
 import Content from './Content';
 
 import './Card.scss';
-import { GRID } from '../../styles/constants';
+import { GRID_SIZE, MIN_CARD_SIZE } from '../../constants/dimensions';
 
 export const Card = ({
   cardId,
@@ -45,13 +45,12 @@ export const Card = ({
       // drag
       disableDragging={isEditing}
       dragHandleClassName='input-div'
-      // dragGrid={[GRID.size, GRID.size]}
       onDragStart={onDragStart}
       onDragStop={onDragStop}
       // size
       size={size}
-      minWidth={GRID.size * 12} 
-      minHeight={GRID.size * 10}
+      minWidth={MIN_CARD_SIZE.width} 
+      minHeight={MIN_CARD_SIZE.height}
       scale={activeTabScale}
       // resize
       enableResizing={{
@@ -60,7 +59,7 @@ export const Card = ({
         topLeft: true,
         topRight: true,
       }}
-      resizeGrid={[GRID.size, GRID.size]}
+      resizeGrid={[ GRID_SIZE, GRID_SIZE ]}
       onResizeStop={onResizeStop}
     >
       <div

src/components/Card/LibraryTitle.jsx

@@ -6,7 +6,7 @@ import ColorDropdown from '../../components-shared/Dropdowns/ColorDropdown';
 import ActionDropdown from '../../components-shared/Dropdowns/ActionDropdown';
 
 import './Card.scss';
-import '../../styles/colors.scss';
+import '../../constants/colors.scss';
 import OpenColorBlackIcon from '../../assets/icons/rounded-square.svg';
 import OpenColorWhiteIcon from '../../assets/icons/rounded-square-white.svg';
 import DropdownArrowBlackIcon from '../../assets/icons/dropdown-arrow.svg';

src/components/Card/Title.jsx

@@ -6,7 +6,7 @@ import ColorDropdown from '../../components-shared/Dropdowns/ColorDropdown';
 import ActionDropdown from '../../components-shared/Dropdowns/ActionDropdown';
 
 import './Card.scss';
-import '../../styles/colors.scss';
+import '../../constants/colors.scss';
 import OpenColorBlackIcon from '../../assets/icons/rounded-square.svg';
 import OpenColorWhiteIcon from '../../assets/icons/rounded-square-white.svg';
 import DropdownArrowBlackIcon from '../../assets/icons/dropdown-arrow.svg';

src/components/Card/hooks.js

@@ -3,13 +3,13 @@ import { useDispatch, useSelector } from 'react-redux';
 import useOutsideClick from '../../utils/useOutsideClick';
 
 import { actions } from '../../data/redux';
-import { CARD_COLOR_KEYS, LIGHT_COLORS } from '../../styles/colors';
+import { CARD_COLOR_KEYS, LIGHT_COLORS } from '../../constants/colors';
 import { POPUP_KEYS } from '../Popup/PopupKey';
 import { ACTION_TYPE } from '../../components-shared/Dropdowns/ActionDropdown';
 
 import LibraryIcon from '../../assets/icons/library-open.svg';
 import RedTrashIcon from '../../assets/icons/trash-red.svg';
-import { DEFAULT_CARD_POSITION } from '../../data/redux/project/constants';
+import { NEW_CARD_POSITION } from '../../constants/dimensions';
 
 export const ANIMATION = {
   cardBlink: 'card-blink .25s step-end 4 alternate',
@@ -32,13 +32,10 @@ export const useCardHooks = ({
     size: cardSize,
   } = useSelector( state => state.project.present.cards[cardId].views[activeTab]);
 
-
   const [isDragging, setIsDragging] = useState(false);
   const [isSelected, setIsSelected] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
-
   const cardRef = useRef();
-
   const isActive = cardId === activeCard;
 
   useOutsideClick([cardRef, toolMenuRef], isSelected, 
@@ -122,9 +119,7 @@ export const useLibraryCardHooks = ({
   const [isEditing, setIsEditing] = useState(false);
   const [cardAnimation, setCardAnimation] = useState({});
   const [useAnimation, setUseAnimation] = useState(false);
-
   const libraryCardRef = useRef();
-
   const isActive = cardId === activeCard;
 
   useOutsideClick([libraryCardRef], isSelected, 
@@ -328,7 +323,7 @@ export const useOptionsDropdownLibraryHooks = ({
     {
       title: 'Add to tab',
       type: cardTabs[activeTab] ? ACTION_TYPE.disabled : null,
-      callback: () => dispatch(actions.project.linkCardToView({ id: cardId, position: DEFAULT_CARD_POSITION })),
+      callback: () => dispatch(actions.project.linkCardToView({ id: cardId, position: NEW_CARD_POSITION })),
     },
     {
       title: 'Remove from tab',

src/components/HeaderMenu/hooks.js

@@ -9,7 +9,7 @@ import * as api from  '../../data/api/database';
 import * as authApi from '../../data/api/auth';
 import * as userApi from '../../data/api/user';
 
-import { NETWORK_STATUS } from '../../data/redux/session/constants';
+import { NETWORK_STATUS } from '../../constants/states';
 import { POPUP_KEYS } from '../Popup/PopupKey';
 
 export const SAVE_BUTTON = {

src/components/Library/FilterBar.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import ColorDropdown from '../../components-shared/Dropdowns/ColorDropdown';
 import { FILTER_OPTIONS, useColorDropdownHooks } from './hooks';
+
 import './index.scss';
-import '../../styles/colors.scss';
-import { CARD_COLOR_KEYS } from '../../styles/colors';
+import '../../constants/colors.scss';
+import { CARD_COLOR_KEYS } from '../../constants/colors';
 
 const FilterBar = ({
   isColorFiltered,

src/components/Library/hooks.js

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import { CARD_COLOR_KEYS } from '../../styles/colors';
+import { CARD_COLOR_KEYS } from '../../constants/colors';
 
 export const FILTER_OPTIONS = {
   allTab: 'allTab',

src/components/TabBar/hooks.js

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import useOutsideClick from '../../utils/useOutsideClick';
+import generateUID from '../../utils/generateUID';
 
 import { actions } from '../../data/redux';
 
@@ -132,7 +133,9 @@ export const useTabControlsHooks = ({
   return {
     newTab: () => {
       if (!!activeProject) {
-        dispatch(actions.project.createTab());
+        const newId = generateUID('tab');
+        dispatch(actions.project.createTab({ newId }));
+        dispatch(actions.project.setActiveTab({ id: newId }));
       }
     },
     btnRef,

src/components/ToolMenu/hooks.js

@@ -1,25 +1,75 @@
 import { useDispatch, useSelector } from 'react-redux';
 
-import { actions } from '../../data/redux';
+import { actions, selectors } from '../../data/redux';
+import generateUID from '../../utils/generateUID';
+import { GRID_SIZE, CANVAS_SIZE, NEW_CARD_POSITION, NEW_CARD_SIZE } from '../../constants/dimensions';
+
+const calcNearestGrid = ({ x, y }) => {
+  const newX = Math.round(x / GRID_SIZE) * GRID_SIZE;
+  if (newX < 0) {
+    newX = 0;
+  }
+  if (newX > CANVAS_SIZE.width) {
+    newX = CANVAS_SIZE.width - (5 * GRID_SIZE);
+  }
+  const newY = Math.round(y / GRID_SIZE) * GRID_SIZE;
+  if (newY < 0) {
+    newY = 0;
+  }
+  if (newY > CANVAS_SIZE.height) {
+    newY = CANVAS_SIZE.height - (5 * GRID_SIZE);
+  }
+
+  return {
+    x: newX,
+    y: newY,
+  };
+};
 
 export const useToolMenuHooks = () => {
   const dispatch = useDispatch();
   const activeCard = useSelector(state => state.session.activeCardId);
   const activeTab = useSelector(state => state.project.present.activeViewId);
+  // const activeCardPosition = useSelector(selectors.project.activeCardPosition);
+  const activeTabPosition = useSelector(selectors.project.activeTabPosition);
 
   const disableNewCard = !activeTab;
   const disableCopyCard = !activeCard || !activeCard;
 
   return {
     onClickNewCard: () => {
       if (!disableNewCard) {
-        dispatch(actions.project.createCard());
+        const newId = generateUID('card');
+        let position = calcNearestGrid({
+          x: NEW_CARD_POSITION.x - activeTabPosition.x,
+          y: NEW_CARD_POSITION.y - activeTabPosition.y,
+        });
+        if (position.x + NEW_CARD_SIZE.width > CANVAS_SIZE.width) {
+          position.x = CANVAS_SIZE.width - NEW_CARD_SIZE.width;
+        }
+        if (position.y + NEW_CARD_SIZE.height > CANVAS_SIZE.height) {
+          position.y = CANVAS_SIZE.height - NEW_CARD_SIZE.height;
+        }
+        // if (position.x === activeCardPosition?.x && position.y === activeCardPosition?.y) {
+        //   position = {
+        //     x: position.x + GRID_SIZE,
+        //     y: position.y + GRID_SIZE,
+        //   };
+        //   console.log('trig', position)
+        // }
+        dispatch(actions.project.createCard({
+          newId,
+          position,
+        }));
+        dispatch(actions.session.setActiveCard({ id: newId }));
       }
     },
     disableNewCard,
     onClickCopyCard: () => {
       if (!disableCopyCard) {
-        dispatch(actions.project.copyCard({ id: activeCard }));
+        const newId = generateUID('card');
+        dispatch(actions.project.copyCard({ id: activeCard, newId }));
+        dispatch(actions.session.setActiveCard({ id: newId }));
       }
     },
     disableCopyCard,

src/styles/colors.scss → src/constants/colors.scss

@@ -17,4 +17,4 @@
 .jungle { background-color: #225C33; }
 .forest { background-color: #134444; }
 .shadow { background-color: #363B4E; }
-.black { background-color: #000000; }
+.black { background-color: #000000; }