From 8838f03b59297c3a460e20d360142d97f3499745 Mon Sep 17 00:00:00 2001
From: Jeremie Pardou-Piquemal <571533+jrmi@users.noreply.github.com>
Date: Sat, 2 Apr 2022 11:42:43 +0200
Subject: [PATCH] Fix grid offset

---
 src/board/Items/Item.jsx          |  4 ++--
 src/board/Items/useItemActions.js |  4 ++--
 src/board/Selection.jsx           |  4 ++--
 src/stories/MainView.stories.jsx  | 10 +++++-----
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/board/Items/Item.jsx b/src/board/Items/Item.jsx
index 544d49b..4948000 100644
--- a/src/board/Items/Item.jsx
+++ b/src/board/Items/Item.jsx
@@ -7,7 +7,7 @@ const ItemWrapper = styled.div`
   display: inline-block;
   transition: transform 150ms;
   user-select: none;
-  padding: 4px;
+  padding: 2px;
   transform: rotate(${({ rotation }) => rotation}deg);
 
   & .corner {
@@ -35,7 +35,7 @@ const ItemWrapper = styled.div`
 
   &.selected {
     border: 2px dashed #db5034;
-    padding: 2px;
+    padding: 0px;
     cursor: pointer;
   }
 
diff --git a/src/board/Items/useItemActions.js b/src/board/Items/useItemActions.js
index f979ae2..3404494 100644
--- a/src/board/Items/useItemActions.js
+++ b/src/board/Items/useItemActions.js
@@ -169,8 +169,8 @@ const useItemActions = () => {
             }
 
             const [centerX, centerY] = [
-              item.x + elem.clientWidth / 2,
-              item.y + elem.clientHeight / 2,
+              item.x + elem.clientWidth / 2 - offsetX,
+              item.y + elem.clientHeight / 2 - offsetY,
             ];
 
             let newX;
diff --git a/src/board/Selection.jsx b/src/board/Selection.jsx
index 82e98a7..0f6e9a5 100644
--- a/src/board/Selection.jsx
+++ b/src/board/Selection.jsx
@@ -97,8 +97,8 @@ const BoundingBox = () => {
       style={{
         ...defaultZoneStyle,
         transform: `translate(${boundingBoxLast.left}px, ${boundingBoxLast.top}px)`,
-        height: `${boundingBoxLast.height}px`,
-        width: `${boundingBoxLast.width}px`,
+        height: `${boundingBoxLast.height - 2}px`,
+        width: `${boundingBoxLast.width - 2}px`,
       }}
       className="selection"
     />
diff --git a/src/stories/MainView.stories.jsx b/src/stories/MainView.stories.jsx
index 9dafa8c..7ddc950 100644
--- a/src/stories/MainView.stories.jsx
+++ b/src/stories/MainView.stories.jsx
@@ -81,24 +81,24 @@ const initialItems = [
     layer: 2,
   },
   {
-    type: "rect",
+    type: "round",
     x: 200,
     y: -200,
     id: "test-grid",
     color: "#3327AA",
     width: 100,
     height: 100,
-    grid: { type: "hexV", size: 20, offset: { x: 5, y: 5 } },
+    grid: { type: "hexH", size: 50, offset: { x: 10, y: 10 } },
   },
   {
-    type: "rect",
+    type: "round",
     x: 220,
     y: -220,
     id: "test-grid2",
-    color: "#3327AA",
+    color: "#aa2722",
     width: 100,
     height: 100,
-    grid: { type: "hexV", size: 20 },
+    grid: { type: "hexH", size: 50 },
   },
 ];