Moved to react spring for konva animations

package.json

@@ -24,6 +24,7 @@
     "react-router-dom": "^5.1.2",
     "react-router-hash-link": "^1.2.2",
     "react-scripts": "3.4.0",
+    "react-spring": "^8.0.27",
     "react-use-gesture": "^7.0.15",
     "shortid": "^2.2.15",
     "simple-peer": "^9.6.2",

src/components/map/MapToken.js

@@ -1,6 +1,6 @@
 import React, { useContext, useState, useEffect, useRef } from "react";
 import { Image as KonvaImage, Group } from "react-konva";
-import Konva from "konva";
+import { useSpring, animated } from "react-spring/konva";
 import useImage from "use-image";
 
 import useDataSource from "../../helpers/useDataSource";
@@ -169,32 +169,21 @@ function MapToken({
   }, [debouncedStageScale, tokenWidth, tokenHeight, tokenSourceStatus]);
 
   // Animate to new token positions if edited by others
-  const containerRef = useRef();
   const tokenX = tokenState.x * mapWidth;
   const tokenY = tokenState.y * mapHeight;
-
   const previousWidth = usePrevious(mapWidth);
   const previousHeight = usePrevious(mapHeight);
   const resized = mapWidth !== previousWidth || mapHeight !== previousHeight;
-  useEffect(() => {
+  const skipAnimation = tokenState.lastEditedBy === userId || resized;
-    const container = containerRef.current;
+  const props = useSpring({
-    if (container) {
+    x: tokenX,
-      if (tokenState.lastEditedBy === userId || resized) {
+    y: tokenY,
-        container.x(tokenX);
+    immediate: skipAnimation,
-        container.y(tokenY);
+  });
-      } else {
-        container.to({
-          x: tokenX,
-          y: tokenY,
-          duration: 0.3,
-          easing: Konva.Easings.EaseInOut,
-        });
-      }
-    }
-  }, [tokenX, tokenY, tokenState.lastEditedBy, userId, resized]);
 
   return (
-    <Group
+    <animated.Group
+      {...props}
       width={tokenWidth}
       height={tokenHeight}
       draggable={draggable}
@@ -211,7 +200,6 @@ function MapToken({
       opacity={tokenOpacity}
       name={token && token.isVehicle ? "vehicle" : "token"}
       id={tokenState.id}
-      ref={containerRef}
     >
       <KonvaImage
         ref={imageRef}
@@ -236,7 +224,7 @@ function MapToken({
           height={tokenHeight}
         />
       </Group>
-    </Group>
+    </animated.Group>
   );
 }
 

yarn.lock

@@ -863,6 +863,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.3.1":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
+  integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.4", "@babel/runtime@^7.8.4":
   version "7.8.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.7.tgz#8fefce9802db54881ba59f90bb28719b4996324d"
@@ -8981,7 +8988,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
-prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9383,6 +9390,14 @@ react-scripts@3.4.0:
   optionalDependencies:
     fsevents "2.1.2"
 
+react-spring@^8.0.27:
+  version "8.0.27"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
+  integrity sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    prop-types "^15.5.8"
+
 react-use-gesture@^7.0.15:
   version "7.0.15"
   resolved "https://registry.yarnpkg.com/react-use-gesture/-/react-use-gesture-7.0.15.tgz#93c651e916a31cfb12d079e7fa1543d5b0511e07"