move selectedColor from gui to canvas store to be able to choose default color based on cli

src/actions/index.js

@@ -312,7 +312,7 @@ export function tryPlacePixel(
       canvasId,
     } = state.canvas;
     const selectedColor = (color === undefined || color === null)
-      ? state.gui.selectedColor
+      ? state.canvas.selectedColor
       : color;
 
     dispatch(requestPlacePixel(canvasId, coordinates, selectedColor));

src/components/Palette.jsx

@@ -47,7 +47,7 @@ function getStylesByWindowSize(
     paletteCols = (windowHeight < 801) ? 2 : 1;
     flexDirection = 'column';
   }
-  const height = Math.ceil(numCal * spanSize / paletteCols);
+  const height = Math.ceil(numCal / paletteCols) * spanSize;
   const width = spanSize * paletteCols;
 
   if (!paletteOpen) {
@@ -148,8 +148,8 @@ function Palette({
 }
 
 function mapStateToProps(state: State) {
-  const { selectedColor, paletteOpen, compactPalette } = state.gui;
-  const { palette, clrIgnore } = state.canvas;
+  const { paletteOpen, compactPalette } = state.gui;
+  const { palette, clrIgnore, selectedColor } = state.canvas;
   return {
     colors: palette.colors,
     selectedColor,

src/components/PalselButton.jsx

@@ -30,8 +30,8 @@ const PalselButton = ({
 
 // TODO simplify...
 function mapStateToProps(state: State) {
-  const { selectedColor, paletteOpen } = state.gui;
-  const { palette } = state.canvas;
+  const { paletteOpen } = state.gui;
+  const { palette, selectedColor } = state.canvas;
   return { palette, selectedColor, paletteOpen };
 }
 

src/controls/PixelPainterControls.js

@@ -121,13 +121,14 @@ export function initControls(renderer, viewport: HTMLCanvasElement, curStore) {
 
   hammertime.on('tap', ({ center }) => {
     const state = store.getState();
-    const { autoZoomIn, selectedColor } = state.gui;
+    const { autoZoomIn } = state.gui;
     const { placeAllowed } = state.user;
-
     const {
       scale,
       isHistoricalView,
+      selectedColor,
     } = state.canvas;
+
     if (isHistoricalView) return;
 
     const { x, y } = center;

src/reducers/canvas.js

@@ -2,6 +2,7 @@
 
 import type { Action } from '../actions/types';
 import type { Cell } from '../core/Cell';
+import type { ColorIndex } from '../core/Palette';
 import Palette from '../core/Palette';
 import {
   getMaxTiledZoom,
@@ -21,6 +22,7 @@ import {
 export type CanvasState = {
   canvasId: number,
   canvasIdent: string,
+  selectedColor: ColorIndex,
   is3D: boolean,
   canvasSize: number,
   canvasMaxTiledZoom: number,
@@ -133,6 +135,7 @@ function getViewFromURL(canvases: Object) {
 const initialState: CanvasState = {
   ...getViewFromURL(DEFAULT_CANVASES),
   fetchs: 0,
+  selectedColor: 3,
   isHistoricalView: false,
   historicalDate: null,
   historicalTime: null,
@@ -258,6 +261,13 @@ export default function canvasReducer(
       };
     }
 
+    case 'SELECT_COLOR': {
+      return {
+        ...state,
+        selectedColor: action.color,
+      };
+    }
+
     case 'SELECT_CANVAS': {
       let { canvasId } = action;
       const { canvases, isHistoricalView } = state;
@@ -285,6 +295,7 @@ export default function canvasReducer(
         ...state,
         canvasId,
         canvasIdent,
+        selectedColor: clrIgnore,
         canvasSize,
         is3D,
         canvasStartDate,

src/reducers/gui.js

@@ -1,14 +1,12 @@
 /* @flow */
 
 import type { Action } from '../actions/types';
-import type { ColorIndex } from '../core/Palette';
 import type { Cell } from '../core/Cell';
 
 
 export type GUIState = {
   showGrid: boolean,
   showPixelNotify: boolean,
-  selectedColor: ColorIndex,
   hover: ?Cell,
   pixelsPlaced: number,
   autoZoomIn: boolean,
@@ -24,7 +22,6 @@ export type GUIState = {
 const initialState: GUIState = {
   showGrid: false,
   showPixelNotify: false,
-  selectedColor: 3,
   hover: null,
   pixelsPlaced: 0,
   autoZoomIn: false,
@@ -127,14 +124,6 @@ export default function gui(
       return {
         ...state,
         paletteOpen,
-        selectedColor: action.color,
-      };
-    }
-
-    case 'SELECT_CANVAS': {
-      return {
-        ...state,
-        selectedColor: 2,
       };
     }
 

src/ui/render2Delements.js

@@ -17,8 +17,8 @@ export function renderPlaceholder(
 ) {
   const viewportCtx = $viewport.getContext('2d');
 
-  const { selectedColor, hover } = state.gui;
-  const { palette } = state.canvas;
+  const { hover } = state.gui;
+  const { palette, selectedColor } = state.canvas;
 
   const [sx, sy] = worldToScreen(state, $viewport, hover);
 
@@ -51,8 +51,8 @@ export function renderPotatoPlaceholder(
 ) {
   const viewportCtx = $viewport.getContext('2d');
 
-  const { selectedColor, hover } = state.gui;
-  const { palette } = state.canvas;
+  const { hover } = state.gui;
+  const { palette, selectedColor } = state.canvas;
 
   const [sx, sy] = worldToScreen(state, $viewport, hover);