From 58ac649aa8a0cd57cef2cec9ed66c24accb4f2e6 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Mon, 20 Jul 2020 19:14:46 +1000
Subject: [PATCH] Fixed bug with tokens that were attatched to a vehicle being
 rendered on top of fog

---
 src/components/map/Map.js      | 65 ++++++++++++++++++----------------
 src/components/map/MapToken.js |  4 +--
 2 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/src/components/map/Map.js b/src/components/map/Map.js
index c31bd7b..df9384a 100644
--- a/src/components/map/Map.js
+++ b/src/components/map/Map.js
@@ -1,4 +1,5 @@
 import React, { useState, useContext, useEffect } from "react";
+import { Group } from "react-konva";
 
 import MapControls from "./MapControls";
 import MapInteraction from "./MapInteraction";
@@ -208,37 +209,39 @@ function Map({
     }
   }
 
-  const mapTokens =
-    mapState &&
-    Object.values(mapState.tokens)
-      .sort(sortMapTokenStates)
-      .map((tokenState) => (
-        <MapToken
-          key={tokenState.id}
-          token={tokensById[tokenState.tokenId]}
-          tokenState={tokenState}
-          tokenSizePercent={tokenSizePercent}
-          onTokenStateChange={onMapTokenStateChange}
-          onTokenMenuOpen={handleTokenMenuOpen}
-          onTokenDragStart={(e) =>
-            setDraggingTokenOptions({
-              dragging: true,
-              tokenState,
-              tokenGroup: e.target,
-            })
-          }
-          onTokenDragEnd={() =>
-            setDraggingTokenOptions({
-              ...draggingTokenOptions,
-              dragging: false,
-            })
-          }
-          draggable={
-            selectedToolId === "pan" && !(tokenState.id in disabledTokens)
-          }
-          mapState={mapState}
-        />
-      ));
+  const mapTokens = mapState && (
+    <Group>
+      {Object.values(mapState.tokens)
+        .sort(sortMapTokenStates)
+        .map((tokenState) => (
+          <MapToken
+            key={tokenState.id}
+            token={tokensById[tokenState.tokenId]}
+            tokenState={tokenState}
+            tokenSizePercent={tokenSizePercent}
+            onTokenStateChange={onMapTokenStateChange}
+            onTokenMenuOpen={handleTokenMenuOpen}
+            onTokenDragStart={(e) =>
+              setDraggingTokenOptions({
+                dragging: true,
+                tokenState,
+                tokenGroup: e.target,
+              })
+            }
+            onTokenDragEnd={() =>
+              setDraggingTokenOptions({
+                ...draggingTokenOptions,
+                dragging: false,
+              })
+            }
+            draggable={
+              selectedToolId === "pan" && !(tokenState.id in disabledTokens)
+            }
+            mapState={mapState}
+          />
+        ))}
+    </Group>
+  );
 
   const tokenMenu = (
     <TokenMenu
diff --git a/src/components/map/MapToken.js b/src/components/map/MapToken.js
index faeb1e0..d47f90b 100644
--- a/src/components/map/MapToken.js
+++ b/src/components/map/MapToken.js
@@ -78,12 +78,12 @@ function MapToken({
 
     const mountChanges = {};
     if (token && token.isVehicle) {
-      const layer = tokenGroup.getLayer();
+      const parent = tokenGroup.getParent();
       const mountedTokens = tokenGroup.find(".token");
       for (let mountedToken of mountedTokens) {
         // Save and restore token position after moving layer
         const position = mountedToken.absolutePosition();
-        mountedToken.moveTo(layer);
+        mountedToken.moveTo(parent);
         mountedToken.absolutePosition(position);
         mountChanges[mountedToken.id()] = {
           ...mapState.tokens[mountedToken.id()],