Merge pull request #4 from shefing/Initialize_line10

Adding arrows and scrolling with the mouse for an axis of length 100
shefing · Jan 18, 2024 · 1524278 · 1524278
2 parents 4044f24 + 880a481
commit 1524278
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="./src/img/matah-logo.svg" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>numbers line</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/Ruler.tsx b/src/components/Ruler.tsx
@@ -1,8 +1,8 @@
 import XAxis from "./ruler/XAxis";
 const Ruler = () => {
-  const labels = Array.from({ length: 11 }, (_, index) => index);
+  const labels = Array.from({ length: 101 }, (_, index) => index);
   return (
-    <div className="absolute w-full bottom-[26%] left-0">
+    <div className="absolute w-full bottom-[30%] left-0 right-0">
       <XAxis labels={labels} />
     </div>
   );

diff --git a/src/components/ruler/Arrows.tsx b/src/components/ruler/Arrows.tsx
@@ -0,0 +1,29 @@
+import leftArrowIcon from "../../img/Group 1299.svg";
+import rightArrowIcon from "../../img/Group 1300.svg";
+
+interface IProps {
+  startIndex: number;
+  setStartIndex: (val: number) => void;
+}
+const Arrows = ({ startIndex, setStartIndex }: IProps) => {
+  const handleArrowClick = (direction: "left" | "right") => {
+    const step = 1;
+    if (direction === "left") {
+      setStartIndex(Math.max(0, startIndex - step));
+    } else {
+      setStartIndex(Math.min(80, startIndex + step));
+    }
+  };
+
+  return (
+    <div className="flex justify-between m-3 mb-6">
+      <div className="ext-xl m-2 cursor-pointer text-blue-500" onClick={() => handleArrowClick("left")}>
+        <img src={leftArrowIcon} alt="Left Arrow" />
+      </div>
+      <div className="text-xl m-2 cursor-pointer text-blue-500" onClick={() => handleArrowClick("right")}>
+        <img src={rightArrowIcon} alt="Left Arrow" />
+      </div>
+    </div>
+  );
+};
+export default Arrows;
diff --git a/src/components/ruler/XAxis.tsx b/src/components/ruler/XAxis.tsx
@@ -1,17 +1,64 @@
+import Arrows from "./Arrows";
+import { useState } from "react";
+
 interface IProps {
   labels: number[];
 }
 const XAxis = ({ labels }: IProps) => {
+  const [startIndex, setStartIndex] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (isDragging) {
+      const mouseX = e.clientX;
+      const axisRect = e.currentTarget.getBoundingClientRect();
+      const axisWidth = axisRect.width;
+      const relativePosition = mouseX - axisRect.left;
+      const labelIndex = Math.floor((relativePosition / axisWidth) * labels.length);
+      setStartIndex(Math.min(80, Math.max(0, labelIndex)));
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
   return (
     <>
-      <div className="flex justify-between border-t-2 border-gray-900 pt-0 mx-0 pl-8 pr-8">
-        {labels.map((label) => (
-          <div key={label} className={`text-xl text-color flex flex-col items-center ${label % 5 == 0 && "font-bold"}`}>
-            <div className="h-3 border-l-2 border-gray-900 w-px" />
-            {label}
+      {labels.length == 101 ? (
+        <>
+          <Arrows startIndex={startIndex} setStartIndex={setStartIndex} />
+          <div
+            className="stroke-3 stroke-var-black fixed left-0 right-0 flex justify-between border-t-2 border-gray-900 pt-0 mx-0 items-center pl-8 pr-8 "
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseUp}
+            onMouseLeave={handleMouseUp}
+            style={{ cursor: isDragging ? "grabbing" : "grab" }}
+          >
+            {labels.slice(startIndex, startIndex + 21).map((label) => (
+              <div key={label} className={`text-xl text-color flex flex-col items-center ${label % 5 === 0 && "font-bold"}`}>
+                <div className="h-3 border-l-2 border-gray-900 w-1366 flex-shrink-0" />
+                {label}
+              </div>
+            ))}
           </div>
-        ))}
-      </div>
+        </>
+      ) : (
+        <div className="fixed left-0 right-0 flex justify-between border-t-2 border-gray-900 pt-0 mx-0 items-center pl-8 pr-8 ">
+          {labels.map((label) => (
+            <div key={label} className={`text-xl text-color flex flex-col items-center ${label % 5 === 0 && "font-bold"}`}>
+              <div className="h-3 border-l-2 border-gray-900 w-1366 flex-shrink-0" />
+              {label}
+            </div>
+          ))}
+        </div>
+      )}
     </>
   );
 };

diff --git a/src/img/Group 1299.svg b/src/img/Group 1299.svg
diff --git a/src/img/Group 1300.svg b/src/img/Group 1300.svg