Merge pull request #52 from shefing/afterReview

After review
shefing · Feb 28, 2024 · f6e649c · f6e649c
2 parents 11b617b + ee18531
commit f6e649c
Show file tree

Hide file tree

Showing 13 changed files with 104 additions and 98 deletions.
diff --git a/library/math/numbersLine/src/components/Jump.tsx b/library/math/numbersLine/src/components/Jump.tsx
@@ -5,26 +5,27 @@ import { useNumbersLineContext } from "../context/numbersLineContext";
 import { calculatUnitsAmount } from "../lib/utils";
 import { LineRange, RulerLenth } from "../type/ruler";
 import JumpArrow from "./JumpArrow";
-import { useWindowSize } from "../hooks/useWindowSize";
-import { baseJumpClassName } from "@/styles/jump";
+import { useHelpers } from "../hooks/useHelpers";
+import { baseJumpClassName } from "../styles/jump";
+import { useAction } from "../hooks/useAction";
 
 interface IProps {
   element: IElement;
 }
-
 const Jump = ({ element }: IProps) => {
   const { windowSize, typeRuler, idDraggElementClick } = useNumbersLineContext();
-  const { calculatRulerWidth } = useWindowSize();
+  const { calculatRulerWidth } = useHelpers();
+  const { updateDragElements } = useAction();
+
   const jump = element.jump!;
   const [unit, setUnit] = useState(calculatRulerWidth() / calculatUnitsAmount(typeRuler));
   const [hideNumber, setHideNumber] = useState(true);
-  const [jumpWidth, setJumpWidth] = useState(unit * jump.value);
   const moveableRef = React.useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     let rulerWidth = calculatRulerWidth() / calculatUnitsAmount(typeRuler);
     setUnit(rulerWidth);
-    setJumpWidth(rulerWidth * jump.value);
+    updateDragElements(element.id, { ...element, width: rulerWidth * jump.value });
     typeRuler == LineRange.hundred && setUnit(windowSize.width / RulerLenth.hundred);
   }, [typeRuler, windowSize]);
 
@@ -40,7 +41,7 @@ const Jump = ({ element }: IProps) => {
           transform: element.transform,
         }}
       >
-        <JumpArrow underRuler={jump.underRuler} jumpWidth={jumpWidth} />
+        <JumpArrow underRuler={jump.underRuler} jumpWidth={element.width} />
         <div id="dragElement-jumpBase" className={`${baseJumpClassName} ${jump.underRuler ? " bg-[#F48460] mb-[1rem]" : " bg-[#009FDE] mt-[1rem]"}`}>
           <span id="dragElement-jumpLength" className="cursor-pointer" onClick={() => setHideNumber(!hideNumber)}>
             {hideNumber ? "?" : typeRuler != LineRange.hundredCircular ? jump.value : jump.value * 10}
@@ -49,11 +50,10 @@ const Jump = ({ element }: IProps) => {
       </div>
       {idDraggElementClick === element.id && (
         <div id={`dragElement-jumpBase-${jump.underRuler ? "under" : "on"}`}>
-          <MoveableElement moveableRef={moveableRef} element={element} unit={unit} setJumpWidth={setJumpWidth} />
+          <MoveableElement moveableRef={moveableRef} element={element} unit={unit} />
         </div>
       )}
     </>
   );
 };
-
 export default Jump;
diff --git a/library/math/numbersLine/src/components/MoveableElement.tsx b/library/math/numbersLine/src/components/MoveableElement.tsx
@@ -1,25 +1,24 @@
 import { useNumbersLineContext } from "../context/numbersLineContext";
 import Moveable, { OnResize, OnResizeEnd } from "react-moveable";
 import { IElement } from "../type/moveable";
-import { calculatUnitsAmount } from "../lib/utils";
-import { RulerMargin, RulerPadding, ToolbarHieght, jumpArrowHeight, jumpBaseHeight } from "../consts/elementConsts";
+import { calcXTransform, calcYTransform, calculatUnitsAmount } from "../lib/utils";
+import { RulerMargin, RulerPadding, ToolbarHieght, buttonsWidth, jumpBaseHeight, jumpHeight } from "../consts/elementConsts";
 import { calcJumpPosition } from "../lib/utils";
 import { ButtonViewable } from "../consts/ButtonViewable";
 import { useAction } from "../hooks/useAction";
-import { useWindowSize } from "../hooks/useWindowSize";
-import { ActionTypes } from "@/type/elements";
+import { useHelpers } from "../hooks/useHelpers";
+import { ActionTypes } from "../type/elements";
 
 interface IProps {
   moveableRef: any;
   element: IElement;
   unit?: number;
-  setJumpWidth?: (v: number) => void;
 }
 
-const MoveableElement = ({ moveableRef, element, unit, setJumpWidth }: IProps) => {
+const MoveableElement = ({ moveableRef, element, unit }: IProps) => {
   const { windowSize, typeRuler, rulerPaddingSides, leftPosition } = useNumbersLineContext();
   const { deleteDragElement, duplicateDragJump, updateDragElements } = useAction();
-  const { calculatRulerWidth, calculatScreenWidth } = useWindowSize();
+  const { calculatRulerWidth, calculatScreenWidth } = useHelpers();
 
   const ableProps = {
     ButtonViewable: true,
@@ -34,47 +33,34 @@ const MoveableElement = ({ moveableRef, element, unit, setJumpWidth }: IProps) =
   };
 
   const updateXLocation = (e: any) => {
-    //locate the element exactly on the ruler lines
-    const originalString = e.target.style.transform;
-    const matchX = originalString.match(/\((.*?)px/);
-    if (!matchX) return;
-    const xPosition = parseFloat(matchX[1]);
-    const xPositionString = matchX[0];
+    const xPosition = calcXTransform(e.target.style.transform);
     const unitsAmount = calculatUnitsAmount(typeRuler);
-    //explanation
+    // few pixels for the precise position of the element, the calculation is done relative to the position on the axis.
     const sidesPixels = (unitsAmount / 2 - Math.round(xPosition - rulerPaddingSides) / unit!) / unitsAmount;
     const newXPosition = Math.round((xPosition - rulerPaddingSides) / unit!) * unit! + rulerPaddingSides + sidesPixels;
-    const newXPositionString = "(" + newXPosition + "px";
-    e.target.style.transform = e.target.style.transform.replace(xPositionString, newXPositionString);
+    e.target.style.transform = e.target.style.transform.replace("(" + xPosition, "(" + newXPosition);
   };
 
   const onDragEnd = (e: OnResizeEnd) => {
     if (!element?.jump) return;
-
-    //find jump positiom if dragged under the ruler
-    let isUnderRuler = element.jump?.underRuler;
-    const matchY = e.target.style.transform.match(/,\s*(-?\d+\.?\d*)px\)/);
-    if (!matchY) return;
-    const yTransform = parseFloat(matchY[1]);
-    const yTransformString = matchY[0];
+    let isUnderRuler = element.jump.underRuler;
+    const yTransform = calcYTransform(e.target.style.transform);
     const elementPsition = calcJumpPosition(yTransform, element.jump.underRuler);
     const rulerPosition = windowSize.height * (1 - RulerMargin) - RulerPadding;
-
-    //check if element close to the ruler
+    // Change the position of the element relative to the integers, provided that the position is close to the axis.
     if (Math.abs(rulerPosition - elementPsition) < 50) updateXLocation(e);
 
-    //checked if jump type changed (from under ruler to or not)
+    // Change the type of jump if its position has changed relative to the ruler.
     if (element.jump.underRuler != rulerPosition < elementPsition) {
-      //TODO: change it to const (80)
       let newYPositionString = "";
       if (rulerPosition < elementPsition) {
         isUnderRuler = true;
-        newYPositionString = ", " + Math.round(yTransform + 80) + "px)";
+        newYPositionString = Math.round(yTransform + jumpHeight - jumpBaseHeight) + "px)";
       } else {
         isUnderRuler = false;
-        newYPositionString = ", " + Math.round(yTransform - 80) + "px)";
+        newYPositionString = Math.round(yTransform - jumpHeight + jumpBaseHeight) + "px)";
       }
-      e.target.style.transform = e.target.style.transform.replace(yTransformString, newYPositionString);
+      e.target.style.transform = e.target.style.transform.replace(yTransform + "px)", newYPositionString);
     }
 
     updateDragElements(element.id, { ...element, transform: e.target.style.transform, jump: { ...element.jump, underRuler: isUnderRuler } });
@@ -83,38 +69,35 @@ const MoveableElement = ({ moveableRef, element, unit, setJumpWidth }: IProps) =
   const onResize = (e: OnResize) => {
     if (!(parseFloat(e.target.style.width) / unit! < 1 && e.dist[0] < 0) && !(parseFloat(e.target.style.width) > calculatRulerWidth() && e.dist[0] > 0)) {
       e.target.style.width = `${e.width}px`;
-      setJumpWidth!(e.width);
+      updateDragElements(element.id, { ...element, width: e.width });
       e.target.style.transform = e.drag.transform;
     }
   };
 
   const onResizeEnd = (e: OnResizeEnd) => {
     if (!element.jump) return;
+    // Changes the width of the jump according to the axis.
     const newValue = Math.round(e.lastEvent.width / unit!);
-    updateDragElements(element.id, { ...element, jump: { ...element.jump, value: newValue } });
     const newWidth = newValue * unit!;
     e.target.style.width = `${newWidth}px`;
-    setJumpWidth!(newWidth);
 
-    const matchX = e.target.style.transform.match(/\((.*?)px/);
-    if (matchX) {
-      const xPosition = parseFloat(matchX[1]);
-      const xXPositionString = matchX[0];
-      //Change position when jump out of bounds:
-      if (xPosition + newWidth > windowSize.width - rulerPaddingSides) {
-        const range = xPosition + newWidth - windowSize.width + rulerPaddingSides;
-        const newXTransform = "(" + (xPosition - range) + "px";
-        e.target.style.transform = e.target.style.transform.replace(xXPositionString, newXTransform);
-        updateDragElements(element.id, { ...element, transform: e.target.style.transform });
-      }
-      //Change position when jump reSize on the left:
-      if (e.clientX < xPosition) {
-        const range = e.lastEvent.width - newWidth;
-        const newXTransform = "(" + (xPosition + range) + "px";
-        e.target.style.transform = e.target.style.transform.replace(xXPositionString, newXTransform);
-        updateDragElements(element.id, { ...element, transform: e.target.style.transform });
-      }
+    const xPosition = calcXTransform(e.target.style.transform);
+    //Change position when jump out of range.
+    if (xPosition + newWidth > windowSize.width - rulerPaddingSides) {
+      const range = xPosition + newWidth - windowSize.width + rulerPaddingSides;
+      const newXPosition = "(" + (xPosition - range);
+      e.target.style.transform = e.target.style.transform.replace("(" + xPosition, newXPosition);
+    }
+    //Change position when jump reSize on the left.
+    let newTransform = e.target.style.transform;
+    if (e.clientX < xPosition) {
+      const range = e.lastEvent.width - newWidth;
+      const newXPosition = "(" + (xPosition + range);
+      newTransform = e.target.style.transform.replace("(" + xPosition, newXPosition);
+      e.target.style.transform = newTransform;
     }
+
+    updateDragElements(element.id, { ...element, width: newWidth, transform: newTransform, jump: { ...element.jump, value: newValue } });
   };
 
   return (
@@ -134,7 +117,7 @@ const MoveableElement = ({ moveableRef, element, unit, setJumpWidth }: IProps) =
         left: rulerPaddingSides,
         top: ToolbarHieght + 32,
         right: rulerPaddingSides,
-        bottom: !element.jump || element.jump.underRuler ? 0 : jumpArrowHeight + jumpBaseHeight,
+        bottom: !element.jump || element.jump.underRuler ? buttonsWidth : jumpHeight - jumpBaseHeight + buttonsWidth,
         position: "css",
       }}
     />

diff --git a/library/math/numbersLine/src/components/Restart.tsx b/library/math/numbersLine/src/components/Restart.tsx
@@ -12,7 +12,7 @@ import { useAction } from "../hooks/useAction";
 
 const Restart = () => {
   const { typeRuler, openRestartDialog, setOpenRestartDialog, setTypeRulerChange } = useNumbersLineContext();
-  const { initialization } = useAction();
+  const { restart } = useAction();
 
   return (
     <AlertDialog open={openRestartDialog} onOpenChange={setOpenRestartDialog}>
@@ -22,7 +22,7 @@ const Restart = () => {
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel onClick={() => setTypeRulerChange(typeRuler)}>הישארו</AlertDialogCancel>
-          <AlertDialogAction onClick={initialization}>מחק הכל</AlertDialogAction>
+          <AlertDialogAction onClick={restart}>מחק הכל</AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>

diff --git a/library/math/numbersLine/src/components/ShowElements.tsx b/library/math/numbersLine/src/components/ShowElements.tsx
@@ -4,29 +4,27 @@ import { useNumbersLineContext } from "../context/numbersLineContext";
 import { useEffect, useState } from "react";
 import { ActionTypes, IWindowSize } from "../type/elements";
 import { Text } from "./Text";
+import { calcXTransform, calcYTransform } from "../lib/utils";
+import { useAction } from "../hooks/useAction";
 
 const ShowElements = () => {
   const { windowSize, dragElements, setIdDraggElementClick } = useNumbersLineContext();
+  const { updateDragElements } = useAction();
   const [windowResizing, setWindowResizing] = useState(false);
   const [prevWindowSize, setPrevWindowSize] = useState<IWindowSize>({ height: windowSize.height, width: windowSize.width });
 
   const updateTransform = (element: IElement, heightRelative: number, widthRelative: number) => {
-    const originalString = element.transform;
-    const matchX = originalString.match(/\((.*?)px/);
-    const matchY = originalString.match(/,\s*(-?\d+\.?\d*)px\)/);
-    if (!matchX || !matchY) return;
-    const xPosition = parseFloat(matchX[1]);
-    const xPositionString = matchX[0];
+    const xPosition = calcXTransform(element.transform);
     const newXPosition = xPosition * widthRelative;
-    const yPosition = parseFloat(matchY[1]);
-    const yPositionString = matchY[0];
+    const yPosition = calcYTransform(element.transform);
     const newYPosition = yPosition * heightRelative;
     const newXYPositionString = "(" + newXPosition.toFixed(2) + "px, " + newYPosition.toFixed(2) + "px)";
-    const newTransform = element.transform.replace(xPositionString + yPositionString, newXYPositionString);
-    element.transform = newTransform;
+    const newTransform = element.transform.replace("(" + xPosition + "px, " + yPosition + "px)", newXYPositionString);
     const documentElement = document.getElementById(`dragElement-${element.id}`);
     if (!documentElement) return;
     documentElement.style.transform = newTransform;
+
+    updateDragElements(element.id, { ...element, transform: newTransform });
   };
 
   useEffect(() => {
@@ -67,8 +65,16 @@ const ShowElements = () => {
 
   return dragElements.map((element: IElement) => (
     <div key={element.id} id={element.id} onClick={() => setIdDraggElementClick(element.id)}>
-      {element.type == ActionTypes.jump && <Jump element={element} />}
-      {element.type == ActionTypes.text && <Text element={element} />}
+      {(() => {
+        switch (element.type) {
+          case ActionTypes.jump:
+            return <Jump element={element} />;
+          case ActionTypes.text:
+            return <Text element={element} />;
+          default:
+            return null;
+        }
+      })()}
     </div>
   ));
 };

diff --git a/library/math/numbersLine/src/components/ruler/Arrows.tsx b/library/math/numbersLine/src/components/ruler/Arrows.tsx
@@ -6,11 +6,11 @@ import { LineRange, RulerLenth } from "../../type/ruler";
 import { useNumbersLineContext } from "../../context/numbersLineContext";
 import { useEffect, useRef, useState } from "react";
 import { RulerMargin } from "../../consts/elementConsts";
-import { useWindowSize } from "../../hooks/useWindowSize";
+import { useHelpers } from "../../hooks/useHelpers";
 
 const Arrows = () => {
   const { typeRuler, windowSize, leftPosition, setLeftPosition, dragElements, idDraggElementClick, setIdDraggElementClick } = useNumbersLineContext();
-  const { calculatScreenWidth } = useWindowSize();
+  const { calculatScreenWidth } = useHelpers();
   const [leftArrowIcon, setLeftArrowIcon] = useState(leftArrow);
   const [rightArrowIcon, setRightArrowIcon] = useState(rightArrow);
   const leftPositionRef = useRef(leftPosition);

diff --git a/library/math/numbersLine/src/components/ruler/XAxis.tsx b/library/math/numbersLine/src/components/ruler/XAxis.tsx
@@ -3,11 +3,10 @@ import { useNumbersLineContext } from "../../context/numbersLineContext";
 import { LineRange, RulerLenth } from "../../type/ruler";
 import Numbers from "./Numbers";
 import { RulerPadding } from "../../consts/elementConsts";
-import { useWindowSize } from "../../hooks/useWindowSize";
-
+import { useHelpers } from "../../hooks/useHelpers";
 const XAxis = () => {
   const { windowSize, typeRuler, leftPosition, setLeftPosition, setIdDraggElementClick } = useNumbersLineContext();
-  const { calculatScreenWidth } = useWindowSize();
+  const { calculatScreenWidth } = useHelpers();
 
   const [startX, setStartX] = useState(0);
   const [isDragging, setisDragging] = useState(false);

diff --git a/library/math/numbersLine/src/components/toolbar/IconsToolbar.tsx b/library/math/numbersLine/src/components/toolbar/IconsToolbar.tsx
@@ -6,6 +6,7 @@ import { useNumbersLineContext } from "../../context/numbersLineContext";
 import { ActionTypes, TypeCover } from "../../type/elements";
 import { v4 as uuidv4 } from "uuid";
 import { IElement } from "@/type/moveable";
+import { useHelpers } from "@/hooks/useHelpers";
 
 interface IProps {
   typeAction: ActionTypes;
@@ -15,7 +16,7 @@ interface IProps {
 const IconsToolbar = ({ typeAction, iconUrl, isDragged }: IProps) => {
   const [isHovered, setIsHovered] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
-  const [newJumpPixels, setNewJumpPixels] = useState(0);
+  const [duplicateElementPlace, setDuplicateElementPlace] = useState(0);
   const {
     windowSize,
     rulerPaddingSides,
@@ -27,6 +28,7 @@ const IconsToolbar = ({ typeAction, iconUrl, isDragged }: IProps) => {
     setOpenRestartDialog,
     visitableDisplayButton,
   } = useNumbersLineContext();
+  const { calculatRulerWidth } = useHelpers();
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -41,7 +43,7 @@ const IconsToolbar = ({ typeAction, iconUrl, isDragged }: IProps) => {
   }, [isOpen]);
 
   useEffect(() => {
-    setNewJumpPixels(0);
+    setDuplicateElementPlace(0);
   }, [idDraggElementClick]);
 
   const getSrc = () => {
@@ -53,26 +55,27 @@ const IconsToolbar = ({ typeAction, iconUrl, isDragged }: IProps) => {
   };
 
   const addDraggableElement = () => {
-    const xTranslate = calcWidthStartPosition(2, windowSize.width, typeRuler) + newJumpPixels;
-    const yTranslate = calcHeightStartPosition(4, windowSize.height) + newJumpPixels;
+    const xTranslate = calcWidthStartPosition(2, windowSize.width, typeRuler) + duplicateElementPlace;
+    const yTranslate = calcHeightStartPosition(4, windowSize.height) + duplicateElementPlace;
 
     let newElement: IElement = {
       id: uuidv4(),
       type: typeAction,
       transform: `translate(${xTranslate}px, ${yTranslate}px)`,
+      width: calculatRulerWidth() / calculatUnitsAmount(typeRuler),
     };
 
     if (typeAction === ActionTypes.jump) {
       newElement.jump = { value: 1, underRuler: false };
     }
 
     setDragElements([...dragElements, newElement]);
-    setNewJumpPixels((prevPixels) => prevPixels + 10);
+    setDuplicateElementPlace((prevPixels) => prevPixels + 10);
     const outOfRange =
       xTranslate > windowSize.width - windowSize.width / calculatUnitsAmount(typeRuler) - rulerPaddingSides ||
       yTranslate > windowSize.height - rulerPaddingSides;
 
-    outOfRange && setNewJumpPixels(0);
+    outOfRange && setDuplicateElementPlace(0);
   };
 
   const actionButtonClick = () => {
@@ -86,7 +89,9 @@ const IconsToolbar = ({ typeAction, iconUrl, isDragged }: IProps) => {
   return (
     <div className="flex flex-col items-center" ref={wrapperRef}>
       <img
-        className="m-3 cursor-pointer"
+        className={`m-3 cursor-pointer ${
+          typeAction === ActionTypes.restart && dragElements.length == 0 && visitableDisplayButton == TypeCover.allDiscover && "pointer-events-none"
+        }`}
         src={getSrc()}
         alt={typeAction + " Toolbar"}
         onMouseEnter={() => setIsHovered(true)}