Merge branch 'master' into typescript

package.json

@@ -9,6 +9,7 @@
     "@dnd-kit/sortable": "^3.1.0",
     "@mitchemmc/dexie-export-import": "^1.0.1",
     "@msgpack/msgpack": "^2.4.1",
+    "@react-spring/konva": "^9.2.3",
     "@sentry/integrations": "^6.3.0",
     "@sentry/react": "^6.3.0",
     "@stripe/stripe-js": "^1.13.1",
@@ -29,7 +30,7 @@
     "fuse.js": "^6.4.6",
     "image-outline": "^0.1.0",
     "intersection-observer": "^0.12.0",
-    "konva": "^7.2.5",
+    "konva": "^8.1.1",
     "lodash.chunk": "^4.2.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.get": "^4.4.2",
@@ -43,7 +44,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-intersection-observer": "^8.32.0",
-    "react-konva": "^17.0.2-3",
+    "react-konva": "^17.0.2-5",
     "react-markdown": "4",
     "react-media": "^2.0.0-rc.1",
     "react-modal": "^3.12.1",
@@ -52,7 +53,7 @@
     "react-router-hash-link": "^2.2.2",
     "react-scripts": "^4.0.3",
     "react-select": "^4.2.1",
-    "react-spring": "^8.0.27",
+    "react-spring": "^9.2.3",
     "react-textarea-autosize": "^8.3.3",
     "react-toast-notifications": "^2.4.3",
     "react-use-gesture": "^9.1.3",

src/components/Grid.tsx

@@ -50,19 +50,19 @@ function Grid({ stroke }: { stroke: "black" | "white" }) {
     const scale = gridCellPixelSize.width / 300;
     patternProps.fillPatternScaleX = scale;
     patternProps.fillPatternScaleY = scale;
-    patternProps.fillPatternOffsetX = gridCellPixelSize.width / 2;
+    patternProps.fillPatternOffsetX = gridCellPixelSize.width / scale / 2;
-    patternProps.fillPatternOffsetY = gridCellPixelSize.height / 2;
+    patternProps.fillPatternOffsetY = gridCellPixelSize.height / scale / 2;
   } else if (grid.type === "hexVertical") {
     // Hex tile pattern is 153 DPI to better fit hex tiles
     const scale = gridCellPixelSize.width / 153;
     patternProps.fillPatternScaleX = scale;
     patternProps.fillPatternScaleY = scale;
-    patternProps.fillPatternOffsetY = gridCellPixelSize.radius / 2;
+    patternProps.fillPatternOffsetY = gridCellPixelSize.radius / scale / 2;
   } else if (grid.type === "hexHorizontal") {
     const scale = gridCellPixelSize.height / 153;
     patternProps.fillPatternScaleX = scale;
     patternProps.fillPatternScaleY = scale;
-    patternProps.fillPatternOffsetY = -gridCellPixelSize.radius / 2;
+    patternProps.fillPatternOffsetY = -gridCellPixelSize.radius / scale / 2;
     patternProps.fillPatternRotation = 90;
   }
 

src/components/dice/DiceInteraction.tsx

@@ -65,7 +65,10 @@ function DiceInteraction({
       const scene = new Scene(engine);
       scene.clearColor = new Color4(0, 0, 0, 0);
       // Enable physics
-      scene.enablePhysics(new Vector3(0, -98, 0), new AmmoJSPlugin(true, AMMO));
+      scene.enablePhysics(
+        new Vector3(0, -98, 0),
+        new AmmoJSPlugin(false, AMMO)
+      );
 
       let camera = new TargetCamera("camera", new Vector3(0, 33.5, 0), scene);
       camera.fov = 0.65;

src/components/map/MapToken.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from "react";
 import { Image as KonvaImage, Group } from "react-konva";
-import { useSpring, animated } from "react-spring/konva";
+import { useSpring, animated } from "@react-spring/konva";
 import useImage from "use-image";
 
 import usePrevious from "../../hooks/usePrevious";
@@ -20,6 +20,7 @@ import TokenLabel from "../token/TokenLabel";
 import TokenOutline from "../token/TokenOutline";
 
 import { Intersection, getScaledOutline } from "../../helpers/token";
+import Vector2 from "../../helpers/Vector2";
 
 import { tokenSources } from "../../tokens";
 
@@ -48,10 +49,14 @@ function MapToken({
 
   const snapPositionToGrid = useGridSnapping();
 
+  const intersectingTokensRef = useRef([]);
+  const previousDragPositionRef = useRef({ x: 0, y: 0 });
+
   function handleDragStart(event) {
     const tokenGroup = event.target;
 
     if (tokenState.category === "vehicle") {
+      previousDragPositionRef.current = tokenGroup.position();
       const tokenIntersection = new Intersection(
         getScaledOutline(tokenState, tokenWidth, tokenHeight),
         { x: tokenX - tokenWidth / 2, y: tokenY - tokenHeight / 2 },
@@ -67,10 +72,7 @@ function MapToken({
           continue;
         }
         if (tokenIntersection.intersects(other.position())) {
-          // Save and restore token position after moving layer
+          intersectingTokensRef.current.push(other);
-          const position = other.absolutePosition();
-          other.moveTo(tokenGroup);
-          other.absolutePosition(position);
         }
       }
     }
@@ -84,6 +86,16 @@ function MapToken({
     if (map.snapToGrid) {
       tokenGroup.position(snapPositionToGrid(tokenGroup.position()));
     }
+    if (tokenState.category === "vehicle") {
+      const deltaPosition = Vector2.subtract(
+        tokenGroup.position(),
+        previousDragPositionRef.current
+      );
+      for (let other of intersectingTokensRef.current) {
+        other.position(Vector2.add(other.position(), deltaPosition));
+      }
+      previousDragPositionRef.current = tokenGroup.position();
+    }
   }
 
   function handleDragEnd(event) {
@@ -91,20 +103,15 @@ function MapToken({
 
     const mountChanges = {};
     if (tokenState.category === "vehicle") {
-      const parent = tokenGroup.getParent();
+      for (let other of intersectingTokensRef.current) {
-      const mountedTokens = tokenGroup.find(".character");
+        mountChanges[other.id()] = {
-      for (let mountedToken of mountedTokens) {
+          x: other.x() / mapWidth,
-        // Save and restore token position after moving layer
+          y: other.y() / mapHeight,
-        const position = mountedToken.absolutePosition();
-        mountedToken.moveTo(parent);
-        mountedToken.absolutePosition(position);
-        mountChanges[mountedToken.id()] = {
-          x: mountedToken.x() / mapWidth,
-          y: mountedToken.y() / mapHeight,
           lastModifiedBy: userId,
           lastModified: Date.now(),
         };
       }
+      intersectingTokensRef.current = [];
     }
 
     setPreventMapInteraction(false);

src/components/note/Note.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from "react";
 import { Rect, Text } from "react-konva";
-import { useSpring, animated } from "react-spring/konva";
+import { useSpring, animated } from "@react-spring/konva";
 
 import { useUserId } from "../../contexts/UserIdContext";
 import {

src/helpers/dice.ts

@@ -21,10 +21,11 @@ export function getDiceInstanceRoll(instance: InstancedMesh) {
       highestLocator = locator;
     }
   }
-  if (!highestLocator) {
+  if (highestLocator) {
+    return parseInt(highestLocator.name.slice(12));
+  } else {
     return 0;
   }
-  return parseInt(highestLocator.name.slice(12));
 }
 
 /**

yarn.lock

@@ -1670,7 +1670,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.6":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.6":
   version "7.11.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
   integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
@@ -2308,6 +2308,91 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
+"@react-spring/animated@~9.2.0":
+  version "9.2.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.2.3.tgz#271226099d356b7b6d99240375dd8f62f450e997"
+  integrity sha512-xxYOxxrk4r+yy218lVnkR027GXGvHcadDnnXRW0l6atcL+1AGYwimMwIuvzlvnsVnyoK0YUABEeGjk9ENOrVMQ==
+  dependencies:
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/core@~9.2.0":
+  version "9.2.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.2.3.tgz#b3926ef8f2694bfb251318d7b44abac1fa5321d0"
+  integrity sha512-8qJbj0xjjoYGVqdmNd2bVaFzKSAwrMVLweHkaYJiTY6p0g7LhSdt5KSl1MjYA4Rj6S4wO1KgefAPK6mH6MtGtA==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/konva@^9.2.3", "@react-spring/konva@~9.2.0":
+  version "9.2.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.2.3.tgz#7a0a1cd7b2b365c7e9c6a14002c3ec6f37f3663a"
+  integrity sha512-lycvgmlag3/CeemuoI2bTVgu/LK98VzNTyBClXyppduGwGwR/iJPYjOFraL7pTKyEGp2qMCo1URISc6W43PkQg==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/native@~9.2.0":
+  version "9.2.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.2.3.tgz#a98c43fad6322e9c77e0fad602f83caf56f45c93"
+  integrity sha512-odPk/NfMgLTp9bh4Rz2joWKMiNIC4/n+m60lGG0Eznmg3nYgtZ5+GMcph3A5dn5XWJGLywxrPiy8/wf+5LaVtA==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/rafz@~9.2.0":
+  version "9.2.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.2.3.tgz#ffde337240b6880a2488d3ca67e4b01688881793"
+  integrity sha512-ThBI3HWp1Y82uRSFVpoykwgM3M9s3SJD6ilKKp9C2OTPcGhWiRGt1IMjzKPwB+F1NX3psbPTt30Bev8WzA/DQQ==
+
+"@react-spring/shared@~9.2.0":
+  version "9.2.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.2.3.tgz#eaa4a4e6bf4f43d10b4a5c920a917e84047ac50e"
+  integrity sha512-MehdmKao1oUAwSEJo8BXOz1OGgsSav/dimD1Vz920hirShj9s/I4zKnWtkdK92xQ4n35D/xD3hATHkXbt/WSvg==
+  dependencies:
+    "@react-spring/rafz" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/three@~9.2.0":
+  version "9.2.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.2.3.tgz#1871a6c7dcb20ab284b8ce4af1805c86c9bb27ed"
+  integrity sha512-DMns/lTWmJ7EFJHf+7CERBAUWWZ314FPQGAcOXFHvMXfxfzBwV8/HGuvlKcdNsTqXfCi3PcYQEAWhpFF/YgVbA==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/types@~9.2.0":
+  version "9.2.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.2.3.tgz#08b5ca1cb262328529ee558796395f073b6029b0"
+  integrity sha512-G7AWUJavwsvvvprnYmqUXE5N1XKINktc8V72ipvkFTE3DD3GApYpX/ORNmieJljKJYvBSBzpRSIzk2qELUs30Q==
+
+"@react-spring/web@~9.2.0":
+  version "9.2.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.2.3.tgz#b9037719b489863ca2ad39caaacff6d315bbaea8"
+  integrity sha512-dWRcgVDbO2UI9I03n/HVmCx9tY++Na+RwRzkzXv3E53BcFsjvnWGArnpj+xE/XgXiaII3ep2RmUj5jyYoukqGg==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/zdog@~9.2.0":
+  version "9.2.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.2.3.tgz#f41cf4f99ddde1cbb9a4c76202a4d2bf8d4b9886"
+  integrity sha512-Ne06eVaV/SQrtdMixLPmkfO2mhoqpkPEAsqW92Bh+hODdEdPwVvexitKPx29uc6F2/zOu9t8NAJfqbOsq3j1Hw==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
 "@rollup/plugin-node-resolve@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
@@ -8675,10 +8760,10 @@ klona@^2.0.4:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
   integrity sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==
 
-konva@^7.2.5:
+konva@^8.1.1:
-  version "7.2.5"
+  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/konva/-/konva-7.2.5.tgz#9b4ac3a353e6be66e3e69123bf2a0cbc61efeb26"
+  resolved "https://registry.yarnpkg.com/konva/-/konva-8.1.1.tgz#c92c3f81b371947eade7a8f76ee2df34c71b333c"
-  integrity sha512-yk/li8rUF+09QNlOdkwbEId+QvfATMe/aMGVouWW1oFoUVTYWHsQuIAE6lWy11DK8mLJEJijkNAXC5K+NVlMew==
+  integrity sha512-2jLijU0N2DNJwBoWzwyxHwqx4GLPjTppSD9TU/G49B2MJ8Sf10E7Y0EmuULjYcNDIFsY+3zMt0VFonKNfyz7WA==
 
 language-subtag-registry@~0.3.2:
   version "0.3.21"
@@ -11137,10 +11222,10 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
-react-konva@^17.0.2-3:
+react-konva@^17.0.2-5:
-  version "17.0.2-3"
+  version "17.0.2-5"
-  resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-17.0.2-3.tgz#c5d789de3761981bf1d721e95df8393e5ba47e40"
+  resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-17.0.2-5.tgz#e70b0acf323402de0a540f27b300fbe7ed151849"
-  integrity sha512-6HSRBzJ8omiZaalpOr2LtUrmXfmhsCa3qkr6Wjg4+a0cK3n67cA9QqEcDT9pZU6aNnrieutQrGddNxvXKiG+OA==
+  integrity sha512-IyzdfqRDK8r1ulp/jbLPX18AuO+n5yNtL0+4T0QEUsgArRqIl/VRCG1imA5mYJBk0cBNC5+fWDHN+HWEW62ZEQ==
   dependencies:
     react-reconciler "~0.26.2"
     scheduler "^0.20.2"
@@ -11323,13 +11408,17 @@ react-select@^4.2.1:
     react-input-autosize "^3.0.0"
     react-transition-group "^4.3.0"
 
-react-spring@^8.0.27:
+react-spring@^9.2.3:
-  version "8.0.27"
+  version "9.2.3"
-  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.2.3.tgz#ff644f8857782389b47171239ee8dead372ebd46"
-  integrity sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==
+  integrity sha512-D3fx9A7UjX4yp35TM3YxbhzKhjq6nFaEs4/RkKT+/Ch732opG6iUek9jt+mwR1bST29aa9Da6mWipAtQbD2U3g==
   dependencies:
-    "@babel/runtime" "^7.3.1"
+    "@react-spring/core" "~9.2.0"
-    prop-types "^15.5.8"
+    "@react-spring/konva" "~9.2.0"
+    "@react-spring/native" "~9.2.0"
+    "@react-spring/three" "~9.2.0"
+    "@react-spring/web" "~9.2.0"
+    "@react-spring/zdog" "~9.2.0"
 
 react-textarea-autosize@^8.3.3:
   version "8.3.3"
@@ -11954,6 +12043,14 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"