Fix grid offset

jrmi · Apr 2, 2022 · 8838f03 · 8838f03
1 parent 3242957
commit 8838f03
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 },
   },
 ];