From a8b61f0223c651b5390309ce26e7baf79eb57f6b Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Tue, 6 Jul 2021 08:18:29 +1000 Subject: [PATCH 1/6] Update react-spring to prevent issues with Firefox resistFingerprinting --- package.json | 3 +- src/components/map/MapToken.js | 2 +- src/components/note/Note.js | 2 +- yarn.lock | 103 ++++++++++++++++++++++++++++++--- 4 files changed, 100 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index f573da7..8e60fa0 100644 --- a/package.json +++ b/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", @@ -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", diff --git a/src/components/map/MapToken.js b/src/components/map/MapToken.js index 9a4d6a5..68ccbb4 100644 --- a/src/components/map/MapToken.js +++ b/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"; diff --git a/src/components/note/Note.js b/src/components/note/Note.js index a5cd5af..cfca951 100644 --- a/src/components/note/Note.js +++ b/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 { diff --git a/yarn.lock b/yarn.lock index bb83ecf..2af27fd 100644 --- a/yarn.lock +++ b/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== @@ -2284,6 +2284,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" @@ -11103,13 +11188,17 @@ react-select@^4.2.1: react-input-autosize "^3.0.0" react-transition-group "^4.3.0" -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== +react-spring@^9.2.3: + version "9.2.3" + resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.2.3.tgz#ff644f8857782389b47171239ee8dead372ebd46" + integrity sha512-D3fx9A7UjX4yp35TM3YxbhzKhjq6nFaEs4/RkKT+/Ch732opG6iUek9jt+mwR1bST29aa9Da6mWipAtQbD2U3g== dependencies: - "@babel/runtime" "^7.3.1" - prop-types "^15.5.8" + "@react-spring/core" "~9.2.0" + "@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" From 629a4ad7ebb7b07cf23bab4bfd0e9f550b5a34cb Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Tue, 6 Jul 2021 08:19:31 +1000 Subject: [PATCH 2/6] Enable fixed physics update to prevent issues with low frame rates --- src/components/dice/DiceInteraction.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/dice/DiceInteraction.js b/src/components/dice/DiceInteraction.js index f5d225b..26c1090 100644 --- a/src/components/dice/DiceInteraction.js +++ b/src/components/dice/DiceInteraction.js @@ -40,7 +40,10 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) { 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; @@ -67,13 +70,14 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) { const delta = newPosition.subtract(currentPosition); selectedMesh.setAbsolutePosition(newPosition); const velocity = delta.scale(1000 / scene.deltaTime); - selectedMeshVelocityWindowRef.current = selectedMeshVelocityWindowRef.current.slice( - Math.max( - selectedMeshVelocityWindowRef.current.length - - selectedMeshVelocityWindowSize, - 0 - ) - ); + selectedMeshVelocityWindowRef.current = + selectedMeshVelocityWindowRef.current.slice( + Math.max( + selectedMeshVelocityWindowRef.current.length - + selectedMeshVelocityWindowSize, + 0 + ) + ); selectedMeshVelocityWindowRef.current.push(velocity); } }); From 73f0667ca2a5971ea4afb388f168b7d2ad27e7ad Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Tue, 6 Jul 2021 08:20:01 +1000 Subject: [PATCH 3/6] Fix crash on dice pickup with low frame rates --- src/helpers/dice.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/helpers/dice.js b/src/helpers/dice.js index d30cab8..4a8c6d1 100644 --- a/src/helpers/dice.js +++ b/src/helpers/dice.js @@ -18,7 +18,11 @@ export function getDiceInstanceRoll(instance) { highestLocator = locator; } } - return parseInt(highestLocator.name.slice(12)); + if (highestLocator) { + return parseInt(highestLocator.name.slice(12)); + } else { + return 0; + } } /** From 5bd5586efcefad0c3387ecea67b0ec046043a292 Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Fri, 16 Jul 2021 09:41:13 +1000 Subject: [PATCH 4/6] Update konva --- package.json | 4 ++-- yarn.lock | 38 +++++++++++++++++++++++--------------- 2 files changed, 25 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 8e60fa0..423154f 100644 --- a/package.json +++ b/package.json @@ -30,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", @@ -44,7 +44,7 @@ "react": "^17.0.1", "react-dom": "^17.0.1", "react-intersection-observer": "^8.32.0", - "react-konva": "^17.0.1-3", + "react-konva": "^17.0.2-5", "react-markdown": "4", "react-media": "^2.0.0-rc.1", "react-modal": "^3.12.1", diff --git a/yarn.lock b/yarn.lock index 2af27fd..9344f82 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8529,10 +8529,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: - version "7.2.5" - resolved "https://registry.yarnpkg.com/konva/-/konva-7.2.5.tgz#9b4ac3a353e6be66e3e69123bf2a0cbc61efeb26" - integrity sha512-yk/li8rUF+09QNlOdkwbEId+QvfATMe/aMGVouWW1oFoUVTYWHsQuIAE6lWy11DK8mLJEJijkNAXC5K+NVlMew== +konva@^8.1.1: + version "8.1.1" + resolved "https://registry.yarnpkg.com/konva/-/konva-8.1.1.tgz#c92c3f81b371947eade7a8f76ee2df34c71b333c" + integrity sha512-2jLijU0N2DNJwBoWzwyxHwqx4GLPjTppSD9TU/G49B2MJ8Sf10E7Y0EmuULjYcNDIFsY+3zMt0VFonKNfyz7WA== language-subtag-registry@~0.3.2: version "0.3.21" @@ -11001,13 +11001,13 @@ 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.1-3: - version "17.0.1-3" - resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-17.0.1-3.tgz#4931c0de642a4ed511ec5aaa2ee113f32d92c68e" - integrity sha512-vbbVyf+IcapVOYu+6w3Wc8BMilQ5zq1P2YaUMSkr4OwcWHvK2hxpJCMldi+wOSOZWoWJBXchWfFvmQHcO55KPA== +react-konva@^17.0.2-5: + version "17.0.2-5" + resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-17.0.2-5.tgz#e70b0acf323402de0a540f27b300fbe7ed151849" + integrity sha512-IyzdfqRDK8r1ulp/jbLPX18AuO+n5yNtL0+4T0QEUsgArRqIl/VRCG1imA5mYJBk0cBNC5+fWDHN+HWEW62ZEQ== dependencies: - react-reconciler "~0.26.1" - scheduler "^0.20.1" + react-reconciler "~0.26.2" + scheduler "^0.20.2" react-lifecycles-compat@^3.0.0: version "3.0.4" @@ -11048,14 +11048,14 @@ react-modal@^3.12.1: react-lifecycles-compat "^3.0.0" warning "^4.0.3" -react-reconciler@~0.26.1: - version "0.26.1" - resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.26.1.tgz#860952dd359fd870f94895c254271e3a9de3b2d6" - integrity sha512-6E/CvH9zcDmHjhiNJlP0qJ8+3ufnY2b5RWs774Uy8XKWN0l6qfnlkz0XnDacxqj2rbJdq76w9dlFXjPPOQrmqA== +react-reconciler@~0.26.2: + version "0.26.2" + resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.26.2.tgz#bbad0e2d1309423f76cf3c3309ac6c96e05e9d91" + integrity sha512-nK6kgY28HwrMNwDnMui3dvm3rCFjZrcGiuwLc5COUipBK5hWHLOxMJhSnSomirqWwjPBJKV1QcbkI0VJr7Gl1Q== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - scheduler "^0.20.1" + scheduler "^0.20.2" react-refresh@^0.8.3: version "0.8.3" @@ -11823,6 +11823,14 @@ scheduler@^0.20.1: 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" From 838ee6861430c68b0497658b8019a726e4294c0d Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Fri, 16 Jul 2021 09:44:19 +1000 Subject: [PATCH 5/6] Change vehicle mount movement method to fix bug with child position not updating --- src/components/map/MapToken.js | 35 ++++++++++++++++++++-------------- 1 file changed, 21 insertions(+), 14 deletions(-) diff --git a/src/components/map/MapToken.js b/src/components/map/MapToken.js index 68ccbb4..f7e14ad 100644 --- a/src/components/map/MapToken.js +++ b/src/components/map/MapToken.js @@ -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 - const position = other.absolutePosition(); - other.moveTo(tokenGroup); - other.absolutePosition(position); + intersectingTokensRef.current.push(other); } } } @@ -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(); - const mountedTokens = tokenGroup.find(".character"); - for (let mountedToken of mountedTokens) { - // Save and restore token position after moving layer - const position = mountedToken.absolutePosition(); - mountedToken.moveTo(parent); - mountedToken.absolutePosition(position); - mountChanges[mountedToken.id()] = { - x: mountedToken.x() / mapWidth, - y: mountedToken.y() / mapHeight, + for (let other of intersectingTokensRef.current) { + mountChanges[other.id()] = { + x: other.x() / mapWidth, + y: other.y() / mapHeight, lastModifiedBy: userId, lastModified: Date.now(), }; } + intersectingTokensRef.current = []; } setPreventMapInteraction(false); From 3aace970046b4fcc8ba128f73c70692e7cd39315 Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Fri, 16 Jul 2021 10:06:35 +1000 Subject: [PATCH 6/6] Fix grid pattern offset for Konva v8 --- src/components/Grid.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Grid.js b/src/components/Grid.js index 8896cbb..8dc3018 100644 --- a/src/components/Grid.js +++ b/src/components/Grid.js @@ -51,19 +51,19 @@ function Grid({ stroke }) { const scale = gridCellPixelSize.width / 300; patternProps.fillPatternScaleX = scale; patternProps.fillPatternScaleY = scale; - patternProps.fillPatternOffsetX = gridCellPixelSize.width / 2; - patternProps.fillPatternOffsetY = gridCellPixelSize.height / 2; + patternProps.fillPatternOffsetX = gridCellPixelSize.width / scale / 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; }