diff --git a/src/components/map/MapGridEditor.js b/src/components/map/MapGridEditor.js
index 02f7615..f189d8c 100644
--- a/src/components/map/MapGridEditor.js
+++ b/src/components/map/MapGridEditor.js
@@ -15,11 +15,6 @@ function MapGridEditor({ map, onGridChange }) {
const mapSize = { x: mapWidth, y: mapHeight };
- const topLeftHandleRef = useRef();
- const topRightHandleRef = useRef();
- const bottomRightHandleRef = useRef();
- const bottomLeftHandleRef = useRef();
-
const handlePreviousPositionRef = useRef();
function handleScaleCircleDragStart(event) {
@@ -47,32 +42,6 @@ function MapGridEditor({ map, onGridChange }) {
setPreventMapInteraction(false);
}
- const editCircleRadius = Math.max(
- (Math.min(mapWidth, mapHeight) / 30) * Math.max(1 / stageScale, 1),
- 1
- );
-
- const editCircleProps = {
- radius: editCircleRadius,
- fill: "rgba(0, 0, 0, 0.5)",
- stroke: "white",
- strokeWidth: editCircleRadius / 5,
- draggable: true,
- onDragStart: handleScaleCircleDragStart,
- onDragMove: handleScaleCircleDragMove,
- onDragEnd: handleScaleCircleDragEnd,
- onMouseDown: handleInteractivePointerDown,
- onMouseUp: handleInteractivePointerUp,
- onTouchStart: handleInteractivePointerDown,
- onTouchEnd: handleInteractivePointerUp,
- };
-
- const editRectProps = {
- fill: "transparent",
- stroke: "rgba(255, 255, 255, 0.75)",
- strokeWidth: editCircleRadius / 10,
- };
-
function getHandleInset(handle) {
const gridX = map.grid.size.x;
const gridY = map.grid.size.y;
@@ -132,6 +101,12 @@ function MapGridEditor({ map, onGridChange }) {
topLeft: { x: newPosition.x, y: inset.topLeft.y },
bottomRight: { x: inset.bottomRight.x, y: newPosition.y },
};
+ } else if (name === "center") {
+ const offset = Vector2.subtract(position, previousPosition);
+ return {
+ topLeft: Vector2.add(inset.topLeft, offset),
+ bottomRight: Vector2.add(inset.bottomRight, offset),
+ };
} else {
return inset;
}
@@ -158,6 +133,32 @@ function MapGridEditor({ map, onGridChange }) {
return Vector2.divide({ x: handle.x(), y: handle.y() }, mapSize);
}
+ const editCircleRadius = Math.max(
+ (Math.min(mapWidth, mapHeight) / 30) * Math.max(1 / stageScale, 1),
+ 1
+ );
+
+ const editCircleProps = {
+ radius: editCircleRadius,
+ fill: "rgba(0, 0, 0, 0.5)",
+ stroke: "white",
+ strokeWidth: editCircleRadius / 5,
+ draggable: true,
+ onDragStart: handleScaleCircleDragStart,
+ onDragMove: handleScaleCircleDragMove,
+ onDragEnd: handleScaleCircleDragEnd,
+ onMouseDown: handleInteractivePointerDown,
+ onMouseUp: handleInteractivePointerUp,
+ onTouchStart: handleInteractivePointerDown,
+ onTouchEnd: handleInteractivePointerUp,
+ };
+
+ const editRectProps = {
+ fill: "transparent",
+ stroke: "rgba(255, 255, 255, 0.75)",
+ strokeWidth: editCircleRadius / 10,
+ };
+
const handlePositions = getHandlePositions();
return (
@@ -169,33 +170,36 @@ function MapGridEditor({ map, onGridChange }) {
{...editRectProps}
/>
+
);
}