⚡️ :: (#28) fixed top and left

KJG04 · Jan 25, 2022 · 0c2b652 · 0c2b652
1 parent ea9649a
commit 0c2b652
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 9 deletions.
diff --git a/functions/src/components/LogicGate/Gates/AND/index.tsx b/functions/src/components/LogicGate/Gates/AND/index.tsx
@@ -28,12 +28,12 @@ const ANDGate: FC<Gate & { index: number }> = ({ position, index }) => {
 
         const name = names[i] as "input1" | "input2" | "output";
 
-        const { offsetTop, offsetLeft } = refs[i];
+        const { left, top, height, width } = refs[i].getBoundingClientRect();
 
         copyGates[index][name] = {
           id: id,
           connectNode: null,
-          position: [offsetLeft, offsetTop],
+          position: [left + width / 2, top + height / 2],
         };
       });
     }

diff --git a/functions/src/components/LogicGate/LogicGate.tsx b/functions/src/components/LogicGate/LogicGate.tsx
@@ -54,7 +54,6 @@ const LogicGate = () => {
   const onMouseDown = useCallback(
     (e: React.MouseEvent<SVGSVGElement>) => {
       const mouse: Point = [e.nativeEvent.offsetX, e.nativeEvent.offsetY];
-
       const dots: Dot[] = [];
 
       gates.forEach((value) => {
@@ -109,8 +108,8 @@ const LogicGate = () => {
   return (
     <>
       <S.Container>
-        {dots.current.map(([x, y], index) => {
-          return <S.Dot key={index} style={{ top: `${y}px`, left: `${x}px` }} />;
+        {gates.map((value, index) => {
+          return <ANDGate key={value.id} {...{ ...value, index }} />;
         })}
 
         <S.PathContainer onMouseDown={onMouseDown} onMouseUp={onMouseUp} onMouseMove={onMouseMove}>
@@ -131,10 +130,6 @@ const LogicGate = () => {
             />
           ))}
         </S.PathContainer>
-
-        {gates.map((value, index) => {
-          return <ANDGate {...{ ...value, index }} />;
-        })}
       </S.Container>
     </>
   );