added : Delete Feature

src/components/Brick.jsx

@@ -5,6 +5,7 @@ import {
   base,
   createGeometry,
   knobSize,
+  outlineWidth,
 } from "../utils";
 import { Vector3, Box3, BackSide } from "three";
 import { useSelect } from "@react-three/drei";
@@ -15,17 +16,10 @@ export const Brick = ({
   dimensions = { x: 1, z: 1 },
   rotation = 0,
   translation = { x: 0, z: 0 },
-  // onClick = () => {},
   bricksBoundBox = { current: [] },
   uID = "",
   mouseMove = () => {},
 }) => {
-  // const [{}, set] = useControls(() => ({
-  //   Delete: button((get) => {
-  //     deleteSelectedBrick();
-  //   }),
-  // }));
-
   const brickRef = useRef();
 
   const { height, width, depth } = getMeasurementsFromDimensions(dimensions);
@@ -36,11 +30,11 @@ export const Brick = ({
 
   const outlineGeometry = useMemo(() => {
     return createGeometry({
-      width: width + 2.6,
-      height: height + 2.6,
-      depth: depth + 2.6,
+      width: width + outlineWidth * 2,
+      height: height + outlineWidth * 2,
+      depth: depth + outlineWidth * 2,
       dimensions,
-      knobDim: knobSize + 1.2,
+      knobDim: knobSize + outlineWidth,
     });
   }, [width, height, depth, dimensions]);
 
@@ -82,20 +76,21 @@ export const Brick = ({
     };
   }, [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 compansate = {
+    x: dimensions.x % 2 === 0 ? dimensions.x / 2 : (dimensions.x - 1) / 2,
+    z: 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);
+  const offset = {
+    x:
+      Math.sign(translation.x) < 0
+        ? Math.max(translation.x, -compansate.x)
+        : Math.min(translation.x, compansate.x),
+    z:
+      Math.sign(translation.z) < 0
+        ? Math.max(translation.z, -compansate.z)
+        : Math.min(translation.z, compansate.z),
+  };
 
   const selected = useSelect().map((sel) => sel.userData.uID);
   const isSelected = !!selected.find((sel) => sel === uID);
@@ -110,11 +105,18 @@ export const Brick = ({
         <mesh
           castShadow
           receiveShadow
-          userData={{ uID }}
+          userData={{
+            uID,
+            dimensions,
+            offset,
+            width,
+            depth,
+            type: `${dimensions.x}-${dimensions.z}`,
+          }}
           position={[
-            (offsetX * width) / dimensions.x,
+            (offset.x * width) / dimensions.x,
             0.5,
-            (offsetZ * depth) / dimensions.z,
+            (offset.z * depth) / dimensions.z,
           ]}
           // onClick={onClick}
           geometry={brickGeometry}
@@ -129,9 +131,9 @@ export const Brick = ({
         {isSelected && (
           <mesh
             position={[
-              (offsetX * width) / dimensions.x,
+              (offset.x * width) / dimensions.x,
               0.5,
-              (offsetZ * depth) / dimensions.z,
+              (offset.z * depth) / dimensions.z,
             ]}
             geometry={outlineGeometry}
           >

src/components/BrickOutline.jsx

@@ -0,0 +1,62 @@
+import { useSelect } from "@react-three/drei";
+import React, { useMemo } from "react";
+
+const OutlineMesh = ({ meshesData }) => {
+  console.log(meshesData);
+  return <></>;
+};
+
+const BrickOutline = () => {
+  const selected = useSelect().map((sel) => sel.userData);
+
+  const selectedMeshes = useMemo(() => {
+    const meshesAccrodingToType = {};
+
+    for (let i = 0; i < selected.length; i++) {
+      const currentSelected = selected[i];
+      meshesAccrodingToType[currentSelected.type] = meshesAccrodingToType[
+        currentSelected.type
+      ]
+        ? [...meshesAccrodingToType[currentSelected.type], currentSelected]
+        : [currentSelected];
+    }
+
+    return meshesAccrodingToType;
+  }, [selected]);
+
+  //   const compansate = {
+  //     x: dimensions.x % 2 === 0 ? dimensions.x / 2 : (dimensions.x - 1) / 2,
+  //     z: dimensions.z % 2 === 0 ? dimensions.z / 2 : (dimensions.z - 1) / 2,
+  //   };
+
+  //   const offset = {
+  //     x:
+  //       Math.sign(translation.x) < 0
+  //         ? Math.max(translation.x, -compansate.x)
+  //         : Math.min(translation.x, compansate.x),
+  //     z:
+  //       Math.sign(translation.z) < 0
+  //         ? Math.max(translation.z, -compansate.z)
+  //         : Math.min(translation.z, compansate.z),
+  //   };
+
+  return (
+    <>
+      {/* <mesh
+        position={[
+          (offset.x * width) / dimensions.x,
+          0.5,
+          (offset.z * depth) / dimensions.z,
+        ]}
+        geometry={outlineGeometry}
+      >
+        <meshBasicMaterial color={"white"} side={BackSide} />
+      </mesh> */}
+      {Object.entries(selectedMeshes).map(([key, value]) => (
+        <OutlineMesh key={key} meshesData={value} />
+      ))}
+    </>
+  );
+};
+
+export default BrickOutline;

src/components/DeleteBrick.jsx

@@ -0,0 +1,13 @@
+import { useSelect } from "@react-three/drei";
+import React from "react";
+import { useDeleteShortcut } from "../utils";
+
+const DeleteBrick = ({ setBricks }) => {
+  const selected = useSelect().map((sel) => sel.userData.uID);
+
+  useDeleteShortcut(selected, setBricks);
+
+  return <></>;
+};
+
+export default DeleteBrick;

src/components/Scene.jsx

@@ -9,6 +9,8 @@ import {
 } from "../utils";
 import { button, useControls } from "leva";
 import { Select } from "@react-three/drei";
+import DeleteBrick from "./DeleteBrick";
+import BrickOutline from "./BrickOutline";
 
 let t;
 
@@ -205,6 +207,8 @@ export const Scene = () => {
             />
           );
         })}
+        <DeleteBrick setBricks={setBricks} />
+        <BrickOutline />
       </Select>
       <Lights />
       <Workspace onClick={onClick} mouseMove={mouseMove} />

src/utils/constants.js

@@ -1,5 +1,6 @@
 export const base = 25;
 export const knobSize = 7;
+export const outlineWidth = 1.3;
 
 export const bricks = [
   { x: 1, z: 1 },

src/utils/hooks.js

@@ -43,3 +43,32 @@ export const useAnchorShorcuts = (anchorX, anchorZ, set) => {
 
   return null;
 };
+
+export const useDeleteShortcut = (selected, setBricks) => {
+  const deleteSelectedBricks = () => {
+    console.log("DELETE");
+    setBricks((bricks) =>
+      bricks.filter((brick) => {
+        const selectedClone = [...selected];
+        const uID = brick.uID;
+        let should = true;
+        for (let i = 0; i < selectedClone.length; i++) {
+          const selectedUID = selectedClone[i];
+          if (uID === selectedUID) {
+            should = false;
+            selectedClone.splice(i, 1);
+          }
+        }
+        return should;
+      })
+    );
+  };
+
+  useKeyboardShortcut(["Delete"], deleteSelectedBricks, {
+    overrideSystem: true,
+    ignoreInputFields: false,
+    repeatOnHold: false,
+  });
+
+  return null;
+};