Merge pull request #48 from shefing/fixBugs

almost fix jum arrow

library/math/numbersLine/src/App.css

@@ -69,19 +69,19 @@
   margin: var(--margin-value)  !important;
   height: 18px !important;
   border: 0px !important;
+  border-bottom-right-radius: 0px !important;
+  border-top-right-radius: 0px !important;
+  border-bottom-left-radius: 0px !important;
+  border-top-left-radius: 0px !important;
 }
 
 
 .moveable-direction.moveable-e{
   background-image: url('../public/assets/icons/resizeRight.svg')  !important;
-  margin-inline: 0px !important;
-  border-bottom-left-radius: 0px !important;
-  border-top-left-radius: 0px !important;
+  margin-inline: -1px !important;
 }
 
 .moveable-direction.moveable-w{
   background-image: url('../public/assets/icons/resizeLeft.svg')  !important;
   margin-inline:-14px !important;
-  border-bottom-right-radius: 0px !important;
-  border-top-right-radius: 0px !important;
 }

library/math/numbersLine/src/components/Jump.tsx

@@ -1,28 +1,28 @@
-import jumpArrowPlus from "/assets/icons/jumpArrowPlus.png";
-import jumpArrowMinus from "/assets/icons/jumpArrowMinus.png";
 import React, { useEffect, useState } from "react";
 import { IElement } from "../type/moveable";
 import MoveableElement from "./MoveableElement";
 import { useNumbersLineContext } from "../context/numbersLineContext";
 import { calculatRulerWidth, calculatUnitsAmount } from "../lib/utils";
-import { RulerPadding, jumpArrowHeight } from "../consts/elementConsts";
 import { MatchBaseJumpClassName } from "../lib/stylesUtils";
 import { LineRange } from "@/type/ruler";
+import JumpArrow from "./JumpArrow";
 
 interface IProps {
   element: IElement;
 }
 
 const Jump = ({ element }: IProps) => {
   const { windowSize, typeRuler, idDraggElementClick } = useNumbersLineContext();
-  const [unit, setUnit] = useState(windowSize.width / calculatUnitsAmount(typeRuler));
+  const [unit, setUnit] = useState(calculatRulerWidth(windowSize.width) / calculatUnitsAmount(typeRuler));
   const [hideNumber, setHideNumber] = useState(true);
+  const [jumpWidth, setJumpWidth] = useState(unit * element.value);
   const moveableRef = React.useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    let rulerWidth = calculatRulerWidth(windowSize.width, RulerPadding) / calculatUnitsAmount(typeRuler);
+    let rulerWidth = calculatRulerWidth(windowSize.width) / calculatUnitsAmount(typeRuler);
     setUnit(rulerWidth);
-  }, [typeRuler, windowSize.width]);
+    setJumpWidth(rulerWidth * element.value);
+  }, [typeRuler, windowSize]);
 
   return (
     <>
@@ -37,20 +37,14 @@ const Jump = ({ element }: IProps) => {
           transform: element.transform,
         }}
       >
-        <img
-          id="dragElement-jumpArrow"
-          style={{ height: jumpArrowHeight + "px" }}
-          className="w-full"
-          src={element.underRuler ? jumpArrowMinus : jumpArrowPlus}
-          alt="Menu Arrow"
-        />
+        <JumpArrow underRuler={element.underRuler} jumpWidth={jumpWidth} />
         <div id="dragElement-jumpBase" className={MatchBaseJumpClassName(element.underRuler)}>
           <span id="dragElement-jumpLength" className="cursor-pointer" onClick={() => setHideNumber(!hideNumber)}>
             {hideNumber ? "?" : typeRuler != LineRange.hundredCircular ? element.value : element.value * 10}
           </span>
         </div>
       </div>
-      {idDraggElementClick === element.id && <MoveableElement moveableRef={moveableRef} element={element} unit={unit} />}
+      {idDraggElementClick === element.id && <MoveableElement moveableRef={moveableRef} element={element} unit={unit} setJumpWidth={setJumpWidth} />}
     </>
   );
 };

library/math/numbersLine/src/components/JumpArrow.tsx

@@ -0,0 +1,48 @@
+import { jumpArrowHeight } from "../consts/elementConsts";
+import { useNumbersLineContext } from "../context/numbersLineContext";
+import { useEffect, useState } from "react";
+
+interface IProps {
+  underRuler: boolean;
+  jumpWidth: number;
+}
+const JumpArrow = ({ underRuler, jumpWidth }: IProps) => {
+  const [matchingPixels, setMatchingPixels] = useState(0);
+  const { windowSize } = useNumbersLineContext();
+  useEffect(() => {
+    setMatchingPixels(Math.min((jumpWidth / (windowSize.width / 2)) * 35, 45));
+  }, [jumpWidth, windowSize]);
+
+  return (
+    <svg id="dragElement-jumpArrow" className="w-full" style={{ height: jumpArrowHeight + "px", position: "relative" }}>
+      <path
+        d={
+          underRuler
+            ? `M6,${20 - matchingPixels / 3} Q${jumpWidth * 0.5},${jumpArrowHeight * 2 - 10} ${jumpWidth},0`
+            : `M0,${jumpArrowHeight} Q${jumpWidth * 0.5},-${jumpArrowHeight - 10} ${jumpWidth - 6},${jumpArrowHeight - 20 + matchingPixels / 3}`
+        }
+        fill="none"
+        stroke={underRuler ? "#F48460" : "#009FDE"}
+        stroke-width="4"
+        stroke-linecap="round"
+        stroke-dasharray="15 15"
+      />
+      <svg style={{ overflow: "visible" }} x={`${underRuler ? -6 : jumpWidth + 6}`} y={`${underRuler ? 10 : 90}%`}>
+        <polygon
+          points="-20,0 0,10 -20,20 "
+          transform={`rotate(${underRuler ? -100 - matchingPixels : 80 - matchingPixels})`}
+          fill={underRuler ? "#F48460" : "#009FDE"}
+          // stroke={underRuler ? "red0" : "white"}
+          // stroke-width="3"
+          // style={{
+          //   vectorEffect: "non-scaling-stroke",
+          //   strokeDasharray: "30, 0,40", // Adjust based on your requirement
+          //   strokeDashoffset: "30", // Adjust based on your requirement
+          // }}
+        />
+      </svg>
+    </svg>
+  );
+};
+
+export default JumpArrow;

library/math/numbersLine/src/components/MoveableElement.tsx

@@ -2,18 +2,19 @@ import { useNumbersLineContext } from "../context/numbersLineContext";
 import Moveable, { OnResize, OnResizeEnd } from "react-moveable";
 import { IElement, TypesElement } from "../type/moveable";
 import { calculatRulerWidth, calculatUnitsAmount } from "../lib/utils";
-import { RulerMargin, RulerPadding, ToolbarHieght, jumpArrowHeight, jumpBaseHeight } from "../consts/elementConsts";
+import { RulerMargin, RulerPaddingSides, ToolbarHieght, jumpArrowHeight, jumpBaseHeight } from "../consts/elementConsts";
 import { calcJumpPosition } from "../lib/stylesUtils";
 import { ButtonViewable } from "../consts/ButtonViewable";
-import { useAction } from "../hooks/useActionHook";
+import { useAction } from "../hooks/useAction";
 
 interface IProps {
   moveableRef: any;
   element: IElement;
   unit: number;
+  setJumpWidth: (v: number) => void;
 }
 
-const MoveableElement = ({ moveableRef, element, unit }: IProps) => {
+const MoveableElement = ({ moveableRef, element, unit, setJumpWidth }: IProps) => {
   const { windowSize, typeRuler, leftPosition } = useNumbersLineContext();
   const { deleteDragElement, duplicateDragJump, updateDragElements } = useAction();
   const ableProps = {
@@ -33,8 +34,8 @@ const MoveableElement = ({ moveableRef, element, unit }: IProps) => {
     const xPosition = parseFloat(matchX[1]);
     const xPositionString = matchX[0];
     const unitsAmount = calculatUnitsAmount(typeRuler);
-    const sidesPixels = (unitsAmount / 2 - Math.round(xPosition - RulerPadding) / unit) / unitsAmount;
-    const newXPosition = Math.round((xPosition - RulerPadding) / unit) * unit + RulerPadding + sidesPixels;
+    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);
   };
@@ -71,27 +72,27 @@ const MoveableElement = ({ moveableRef, element, unit }: IProps) => {
   const onResize = (e: OnResize) => {
     if (
       !(parseFloat(e.target.style.width) / unit < 1 && e.dist[0] < 0) &&
-      !(parseFloat(e.target.style.width) > calculatRulerWidth(windowSize.width, RulerPadding) && e.dist[0] > 0)
+      !(parseFloat(e.target.style.width) > calculatRulerWidth(windowSize.width) && e.dist[0] > 0)
     ) {
       e.target.style.width = `${e.width}px`;
+      setJumpWidth(e.width);
       e.target.style.transform = e.drag.transform;
-      const newValue = Math.round(parseFloat(e.target.style.width) / unit);
-      newValue > element.value && updateDragElements(element.id, { ...element, value: newValue });
     }
   };
   const onResizeEnd = (e: OnResizeEnd) => {
     const newValue = Math.round(e.lastEvent.width / unit);
     updateDragElements(element.id, { ...element, 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 - RulerPadding) {
-        const range = xPosition + newWidth - windowSize.width + RulerPadding;
+      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 });
@@ -120,9 +121,9 @@ const MoveableElement = ({ moveableRef, element, unit }: IProps) => {
       onResizeEnd={(e) => onResizeEnd(e)}
       snappable={true}
       bounds={{
-        left: RulerPadding,
+        left: RulerPaddingSides,
         top: ToolbarHieght + 32,
-        right: RulerPadding,
+        right: RulerPaddingSides,
         bottom: element.underRuler ? 0 : jumpArrowHeight + jumpBaseHeight,
         position: "css",
       }}

library/math/numbersLine/src/components/Reload.tsx

@@ -8,7 +8,7 @@ import {
   AlertDialogTitle,
 } from "../components/ui/alert-dialog";
 import { useNumbersLineContext } from "../context/numbersLineContext";
-import { useAction } from "../hooks/useActionHook";
+import { useAction } from "../hooks/useAction";
 
 const Reload = () => {
   const { openReloadDialog, setOpenReloadDialog } = useNumbersLineContext();

library/math/numbersLine/src/components/Ruler.tsx

@@ -1,19 +1,10 @@
-import { useEffect } from "react";
 import Arrows from "./ruler/Arrows";
 import XAxis from "./ruler/XAxis";
-import { useNumbersLineContext } from "../context/numbersLineContext";
-import { RulerMargin } from "../consts/elementConsts";
+import { RulerMargin, RulerPadding } from "../consts/elementConsts";
 
 const Ruler = () => {
-  const { windowSize, setLeftPositionValid, setIdDraggElementClick } = useNumbersLineContext();
-
-  useEffect(() => {
-    setLeftPositionValid(0);
-    setIdDraggElementClick("");
-  }, [windowSize.width]);
-
   return (
-    <div style={{ paddingBottom: RulerMargin + "px" }}>
+    <div style={{ paddingBottom: RulerMargin - RulerPadding + "px" }}>
       <Arrows />
       <XAxis />
     </div>

library/math/numbersLine/src/components/ruler/Arrows.tsx

@@ -40,7 +40,7 @@ const Arrows = () => {
   }, [leftPosition]);
 
   return (
-    <div className="flex justify-between m-3 mb-6 ">
+    <div className="flex justify-between m-3 mb-0 ">
       {typeRuler == LineRange.hundred && (
         <>
           <div className="m-2 cursor-pointer relative" onClick={() => updatePositionOnArrowClick("left")}>

library/math/numbersLine/src/components/ruler/Numbers.tsx

@@ -2,12 +2,13 @@ import { useEffect, useState } from "react";
 import { useNumbersLineContext } from "../../context/numbersLineContext";
 import { LineRange, PartToCover, RulerLenth } from "../../type/ruler";
 import { TypeCover } from "../../type/elements";
-import { RulerPadding } from "../../consts/elementConsts";
+import { RulerPaddingSides } from "../../consts/elementConsts";
 
 const Numbers = () => {
   const { windowSize, typeRuler, leftPosition, coverSituation, setCoverSituation, setVisitableDisplayButton } = useNumbersLineContext();
   const [labels, setLabels] = useState<number[]>([]);
   const [labelsCover, setClickedLabelsCover] = useState(new Set());
+
   useEffect(() => {
     let array = Array.from({ length: typeRuler == LineRange.hundredCircular ? typeRuler + 1 : typeRuler }, (_, index) => index);
     setCoverSituation(TypeCover.allDiscover);
@@ -52,17 +53,16 @@ const Numbers = () => {
 
   return (
     <div
-      className={`fixed left-0 right-0 flex justify-between border-t-4 border-gray-900 pt-0 mx-0 pl-[${RulerPadding}px] pr-[${RulerPadding}px]`}
+      className={`fixed left-0 right-0 flex justify-between border-t-4 border-gray-900 pt-0 mx-0`}
       style={
         typeRuler == LineRange.hundred
           ? {
               width: windowSize.width * (LineRange.hundred / RulerLenth.hundred),
               left: `${leftPosition}px`,
-              cursor: "move",
-              paddingLeft: `${RulerPadding}px`,
-              paddingRight: `${RulerPadding}px`,
+              paddingLeft: `${RulerPaddingSides}px`,
+              paddingRight: `${RulerPaddingSides}px`,
             }
-          : { paddingLeft: `${RulerPadding}px`, paddingRight: `${RulerPadding}px` }
+          : { paddingLeft: `${RulerPaddingSides}px`, paddingRight: `${RulerPaddingSides}px` }
       }
     >
       {labels.map((label) =>

library/math/numbersLine/src/components/ruler/XAxis.tsx

@@ -1,14 +1,23 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useNumbersLineContext } from "../../context/numbersLineContext";
 import { LineRange, RulerLenth } from "../../type/ruler";
 import Numbers from "./Numbers";
+import { RulerPadding } from "../../consts/elementConsts";
 
 const XAxis = () => {
-  const { windowSize, typeRuler, leftPosition, setLeftPosition, setLeftPositionValid } = useNumbersLineContext();
+  const { windowSize, typeRuler, leftPosition, setLeftPosition, setLeftPositionValid, setIdDraggElementClick } = useNumbersLineContext();
   const [startX, setStartX] = useState(0);
   const [isDragging, setisDragging] = useState(false);
+  const [prevWindowSize, setPrevWindowSize] = useState(windowSize.width);
+
+  useEffect(() => {
+    const newLeftPosition = (windowSize.width / prevWindowSize) * leftPosition;
+    setLeftPosition(newLeftPosition);
+    setPrevWindowSize(windowSize.width);
+  }, [windowSize]);
 
   const handleStartDrag = (e: any) => {
+    setIdDraggElementClick("");
     setisDragging(true);
     setStartX(e.clientX);
   };
@@ -20,6 +29,7 @@ const XAxis = () => {
       setStartX(e.clientX);
     }
   };
+
   const handleStopDrag = () => {
     setisDragging(false);
     const unit = windowSize.width / RulerLenth.hundred;
@@ -28,15 +38,16 @@ const XAxis = () => {
   };
 
   return (
-    <>
-      {typeRuler == LineRange.hundred ? (
-        <div className="pt-5" onMouseDown={handleStartDrag} onMouseMove={handleonDrag} onMouseUp={handleStopDrag} onMouseLeave={handleStopDrag}>
-          <Numbers />
-        </div>
-      ) : (
-        <Numbers />
-      )}
-    </>
+    <div
+      className={typeRuler == LineRange.hundred ? `cursor-move` : ""}
+      onMouseDown={typeRuler == LineRange.hundred ? handleStartDrag : () => {}}
+      onMouseMove={typeRuler == LineRange.hundred ? handleonDrag : () => {}}
+      onMouseUp={typeRuler == LineRange.hundred ? handleStopDrag : () => {}}
+      onMouseLeave={typeRuler == LineRange.hundred ? handleStopDrag : () => {}}
+      style={{ padding: `${RulerPadding}px` }}
+    >
+      <Numbers />
+    </div>
   );
 };
 

library/math/numbersLine/src/components/toolbar/LineDefinition.tsx

@@ -9,7 +9,7 @@ import { IRulerDefinition, TypeCover } from "../../type/elements";
 
 const LineDefinition = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const { typeRuler, setTypeRuler, dragElements, visitableDisplayButton, setOpenReloadDialog, setTypeRulerChange } = useNumbersLineContext();
+  const { typeRuler, setTypeRuler, setLeftPosition, dragElements, visitableDisplayButton, setOpenReloadDialog, setTypeRulerChange } = useNumbersLineContext();
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -34,6 +34,7 @@ const LineDefinition = () => {
     setIsMenuOpen(false);
     if (dragElements.length == 0 && visitableDisplayButton == TypeCover.allDiscover) {
       setTypeRuler(type);
+      setLeftPosition(0);
     } else {
       setTypeRulerChange(type);
       setOpenReloadDialog(true);

library/math/numbersLine/src/consts/ButtonViewable.tsx

@@ -4,8 +4,8 @@ import duplicateIcon from "/assets/icons/duplicate.svg";
 import duplicateDisable from "/assets/icons/duplicateDisable.svg";
 import { IAbleProps } from "../type/moveable";
 import { LineRange } from "@/type/ruler";
-import { RulerPadding } from "./elementConsts";
 import { calculatScreenWidth } from "@/lib/utils";
+import { RulerPaddingSides } from "./elementConsts";
 
 export const ButtonViewable = {
   name: "ButtonViewable",
@@ -18,7 +18,7 @@ export const ButtonViewable = {
     if (matchX) {
       const xPosition = matchX[1];
       const endXPosition = parseFloat(xPosition) + cssWidth * 2;
-      const outOfRange = endXPosition - window.innerWidth + RulerPadding - 10;
+      const outOfRange = endXPosition - window.innerWidth + RulerPaddingSides - 10;
       if (outOfRange > 0 && (typeRuler != LineRange.hundred || leftPosition - outOfRange < calculatScreenWidth(window.innerWidth))) {
         copyApproval = false;
       }

library/math/numbersLine/src/consts/elementConsts.ts

@@ -30,7 +30,8 @@ export const displayRulerButtonDetials: IDisplayRuller[] = [
   { type: "הצג הכל", visitDisable: TypeCover.allDiscover, choice: TypeCover.allDiscover },
 ];
 
-export const RulerPadding = 32;
+export const RulerPaddingSides = 32;
+export const RulerPadding = 50;
 export const RulerMargin = window.innerHeight * 0.25;
 export const jumpBaseHeight = 40;
 export const jumpArrowHeight = 64;