fix flashing on refresh

fix 3D canvas showing as 2D on refresh
allow access to the 2D representation by pressing P when viewing 3D canvas

src/reducers/canvas.js

@@ -272,9 +272,9 @@ export default function canvasReducer(
         size: canvasSize,
         sd: canvasStartDate,
         ident: canvasIdent,
-        v: is3D,
         colors,
       } = canvas;
+      const is3D = !!canvas.v;
       // get previous view, scale and viewscale if possible
       let viewscale = DEFAULT_SCALE;
       let scale = DEFAULT_SCALE;
@@ -336,7 +336,7 @@ export default function canvasReducer(
       }
       const canvas = canvases[canvasId];
       const clrIgnore = canvas.cli || 0;
-      const is3D = !!canvases.v;
+      const is3D = !!canvas.v;
       const {
         size: canvasSize,
         sd: canvasStartDate,

src/store/rendererHook.js

@@ -57,6 +57,15 @@ export default (store) => (next) => (action) => {
       break;
     }
 
+    case 'TOGGLE_HIDDEN_CANVASES': {
+      const renderer = getRenderer();
+      const { is3D } = state.canvas;
+      if (is3D) {
+        initRenderer(store, !renderer.is3D);
+      }
+      break;
+    }
+
     case 'SET_HISTORICAL_TIME': {
       const {
         historicalDate,

src/ui/Renderer2D.js

@@ -34,25 +34,25 @@ const SCALE_THREASHOLD = Math.min(
 
 
 class Renderer {
-  is3D: false;
+  is3D = false;
   //
-  canvasId: number = null;
-  chunkLoader: Object = null;
+  canvasId = null;
+  chunkLoader = null;
   //--
   centerChunk;
-  tiledScale: number;
-  tiledZoom: number;
-  hover: boolean;
+  tiledScale;
+  tiledZoom;
+  hover;
   //--
-  viewport: HTMLCanvasElement = null;
+  viewport = null;
   store;
   //--
-  forceNextRender: boolean;
-  forceNextSubrender: boolean;
-  canvas: HTMLCanvasElement;
-  lastFetch: number;
+  forceNextRender;
+  forceNextSubrender;
+  canvas;
+  lastFetch;
   //--
-  oldHistoricalTime: string;
+  oldHistoricalTime;
 
   constructor(store) {
     this.centerChunk = [null, null];
@@ -159,7 +159,7 @@ class Renderer {
     this.updateScale(this.store.getState());
   }
 
-  getColorIndexOfPixel(cx, cy, historical: boolean = false) {
+  getColorIndexOfPixel(cx, cy, historical = false) {
     if (historical) {
       const state = this.store.getState();
       const {
@@ -232,9 +232,9 @@ class Renderer {
 
 
   renderPixel(
-    i: number,
-    j: number,
-    offset: number,
+    i,
+    j,
+    offset,
     color,
     notify,
   ) {
@@ -273,9 +273,9 @@ class Renderer {
 
 
   isChunkInView(
-    cz: number,
-    cx: number,
-    cy: number,
+    cz,
+    cx,
+    cy,
   ) {
     if (cz !== this.tiledZoom) {
       return false;

src/ui/Renderer3D.js

@@ -1,7 +1,6 @@
 /*
  * 3D Renderer for VoxelCanvas
  *
- * @flow
  */
 
 import * as THREE from 'three';
@@ -31,27 +30,27 @@ class Renderer {
   //--
   store;
   //--
-  scene: Object;
-  camera: Object;
-  rollOverMesh: Object;
-  objects: Array<Object>;
-  loadedChunks: Array<Object>;
-  plane: Object;
-  oobGeometry: Object;
-  oobMaterial: Object;
+  scene;
+  camera;
+  rollOverMesh;
+  objects;
+  loadedChunks;
+  plane;
+  oobGeometry;
+  oobMaterial;
   //--
-  controls: Object;
-  threeRenderer: Object;
+  controls;
+  threeRenderer;
   // temp variables for mouse events
   mouse;
   mouseMoveStart;
   raycaster;
-  pressTime: number;
-  pressCdTime: number;
-  multitap: number;
+  pressTime;
+  pressCdTime;
+  multitap;
   //--
-  chunkLoader: ChunkLoader = null;
-  forceNextRender: boolean = false;
+  chunkLoader = null;
+  forceNextRender = false;
 
   constructor(store) {
     this.store = store;
@@ -274,10 +273,10 @@ class Renderer {
   }
 
   renderPixel(
-    i: number,
-    j: number,
-    offset: number,
-    color: number,
+    i,
+    j,
+    offset,
+    color,
   ) {
     const { chunkLoader } = this;
     if (chunkLoader) {
@@ -469,7 +468,7 @@ class Renderer {
     }
   }
 
-  placeVoxel(x: number, y: number, z: number, color: number = null) {
+  placeVoxel(x, y, z, color = null) {
     const {
       store,
     } = this;