+ <>
+
+ );
+};
+
+function App() {
+ return (
+
+
);
}
diff --git a/src/components/Brick.jsx b/src/components/Brick.jsx
index 260e504..f2f6a63 100644
--- a/src/components/Brick.jsx
+++ b/src/components/Brick.jsx
@@ -12,8 +12,8 @@ export const Brick = ({
color = "#ff0000",
dimensions = { x: 1, z: 1 },
rotation = 0,
- translation = 0,
- addBrick = () => {},
+ translation = { x: 0, z: 0 },
+ onClick = () => {},
bricksBoundBox = { current: [] },
uID = "",
mouseMove = () => {},
@@ -54,28 +54,53 @@ export const Brick = ({
boundingBoxRef.push({ uID, brickBoundingBox });
return () => {
- boundingBoxRef.filter((brick) => brick.uID !== uID);
+ boundingBoxRef.filter((brick) => {
+ return brick.uID !== uID;
+ });
};
- }, [uID, bricksBoundBox]);
+ }, []);
+
+ const compansateX =
+ dimensions.x % 2 === 0 ? dimensions.x / 2 : (dimensions.x - 1) / 2;
+ const compansateZ =
+ dimensions.z % 2 === 0 ? dimensions.z / 2 : (dimensions.z - 1) / 2;
+
+ const offsetX =
+ Math.sign(translation.x) < 0
+ ? Math.max(translation.x, -compansateX)
+ : Math.min(translation.x, compansateX);
+
+ const offsetZ =
+ Math.sign(translation.z) < 0
+ ? Math.max(translation.z, -compansateZ)
+ : Math.min(translation.z, compansateZ);
return (
<>
-
-
-
+
+
+
+
);
};
diff --git a/src/components/BrickCursor.jsx b/src/components/BrickCursor.jsx
index efe6706..12196df 100644
--- a/src/components/BrickCursor.jsx
+++ b/src/components/BrickCursor.jsx
@@ -1,4 +1,3 @@
-import { useThree } from "@react-three/fiber";
import React, { forwardRef, useMemo } from "react";
import { Vector3 } from "three";
import { getMeasurementsFromDimensions, base } from "../utils";
@@ -12,7 +11,7 @@ export const BrickCursor = forwardRef(
},
dimensions = { x: 1, z: 1 },
rotation = 0,
- translation = 0,
+ translation = { x: 0, z: 0 },
},
ref
) => {
@@ -37,18 +36,43 @@ export const BrickCursor = forwardRef(
);
}, [intersect, height, rotation, width, depth]);
+ const compansateX =
+ dimensions.x % 2 === 0 ? dimensions.x / 2 : (dimensions.x - 1) / 2;
+ const compansateZ =
+ dimensions.z % 2 === 0 ? dimensions.z / 2 : (dimensions.z - 1) / 2;
+
+ const offsetX =
+ Math.sign(translation.x) < 0
+ ? Math.max(translation.x, -compansateX)
+ : Math.min(translation.x, compansateX);
+
+ const offsetZ =
+ Math.sign(translation.z) < 0
+ ? Math.max(translation.z, -compansateZ)
+ : Math.min(translation.z, compansateZ);
+
return (
<>
-
-
-
-
+
+
+
+
+
);
}
diff --git a/src/components/InfoPanel.jsx b/src/components/InfoPanel.jsx
index 39e725e..1b831d4 100644
--- a/src/components/InfoPanel.jsx
+++ b/src/components/InfoPanel.jsx
@@ -13,7 +13,9 @@ export const InfoPanel = () => {
width: "200px",
}}
>
- Use panel on right top corner to customize the Lego Bricks Properties
+ Use panel on right top corner to customize the Lego Bricks Properties Use
+
+ "AWSD" to chnage the anchor points of bricks