Merge pull request #85 from shefing/fixes-version-two

Fixes version two

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

@@ -8,14 +8,29 @@ import { ActionTypes } from "../type/toolbar";
 import { useHelpers } from "../hooks/useHelpers";
 import { IElement } from "../type/moveable";
 import { useDraggableElementAction } from "@/hooks/useDraggableElementAction";
+import { RulerPaddingSides } from "@/consts/elementConsts";
+import { unitAmount } from "@/type/ruler";
 
 const ShowElements = () => {
   const { windowSize, rulerType, unit, setUnit, dragElements, setIdDraggElementClick } = useNumbersLineContext();
-  const { calculatRulerWidth, calculatUnitsAmount } = useHelpers();
+  const { calculatRulerWidth, calculatUnitsAmount, calculatRulerPosition } = useHelpers();
   const { updateDragElements } = useDraggableElementAction();
   const [windowResizing, setWindowResizing] = useState(false);
+
   const updateTransform = (element: IElement) => {
-    const newTransform = `translate(${(element.widthRatio * windowSize.width).toFixed(2)}px, ${(element.heightRatio * windowSize.height).toFixed(2)}px)`
+    let translateX;
+    if (calculatUnitsAmount() === unitAmount.twenty) {
+      translateX = (element.xRatio * (windowSize.width - unit)) + 0.5 * unit;
+    } else {
+      translateX = (element.xRatio * (windowSize.width - 2 * RulerPaddingSides)) + RulerPaddingSides;
+    }
+    let translateY;
+    if (element.yRatio < 0) { // Element is below the ruler
+      translateY = (-1 * element.yRatio * (windowSize.height - calculatRulerPosition())) + calculatRulerPosition();
+    } else {
+      translateY = element.yRatio * calculatRulerPosition();
+    }
+    const newTransform = `translate(${translateX.toFixed(2)}px, ${translateY.toFixed(2)}px)`;
     const documentElement = document.getElementById(`dragElement-${element.id}`);
     if (!documentElement) return;
     documentElement.style.transform = newTransform;
@@ -50,7 +65,10 @@ const ShowElements = () => {
   useEffect(() => {
     if (windowResizing) return;
     const newUnit = calculatRulerWidth() / calculatUnitsAmount();
+    if (newUnit == unit)
+      dragElements.map((element: IElement) => element.type != ActionTypes.text && updateTransform(element));
     setUnit(newUnit);
+
   }, [rulerType, windowResizing]);
 
   useEffect(() => {

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

@@ -2,12 +2,12 @@ import { useNumbersLineContext } from "../../context/numbersLineContext";
 import Moveable, { OnResize, OnResizeEnd } from "react-moveable";
 import { IElement } from "../../type/moveable";
 import { calcXTransform, calcYTransform } from "../../lib/utils";
-import { rulerLocation, ToolbarHeight, buttonsDraggElementWidth, ruleHeight, screenHeightMinimum, DistanceRulerForUpdatePositioning } from "../../consts/elementConsts";
+import { ToolbarHeight, buttonsDraggElementWidth, screenHeightMinimum, DistanceRulerForUpdatePositioning } from "../../consts/elementConsts";
 import { ButtonViewable } from "../../consts/ButtonViewable";
 import { useDraggableElementAction } from "../../hooks/useDraggableElementAction";
 import { useHelpers } from "../../hooks/useHelpers";
 import { ActionTypes, WritingSituation } from "../../type/toolbar";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { OnDragEnd, OnResizeStart } from "moveable";
 
 interface IProps {
@@ -19,10 +19,15 @@ interface IProps {
 const MoveableElement = ({ moveableRef, element, dragging, setDragging }: IProps) => {
   const { windowSize, rulerType, unit, leftPosition, idDraggElementClick, setIdDraggElementClick, color } = useNumbersLineContext();
   const { deleteDragElement, duplicateDragJump, updateDragElements, updateDragElementsLayers } = useDraggableElementAction();
-  const { calculatScreenWidth, calculatRulerPaddingSides, calculatJumpHeightWithoutBase, calcElementPosition, duplicateIfLength20, calculatWidthRatio, calculatHeightRatio} = useHelpers();
+  const { calculatScreenWidth, calculatRulerPaddingSides, calculatJumpHeightWithoutBase, calcYElementPosition, duplicateIfLength20, calculatWidthRatio, calculatHeightRatio, calculatRulerPosition, calculatXRatio, calculatYRatio } = useHelpers();
   const [rightStartPosition, setRightStartPosition] = useState(0);
   const [boundScale, setBoundScale] = useState(0);
   const [changeDragState, setChangeDragState] = useState(false);
+  const [rulerPosition, setRulerPosition] = useState(calculatRulerPosition());
+
+  useEffect(() => {
+    setRulerPosition(calculatRulerPosition());
+  }, [windowSize]);
 
   const ableProps = {
     ButtonViewable: true,
@@ -60,19 +65,22 @@ const MoveableElement = ({ moveableRef, element, dragging, setDragging }: IProps
 
   const onDragEnd = (e: OnDragEnd | OnResizeEnd, resizeElement?: IElement) => {
     if (element.type == ActionTypes.text) {
-      updateDragElements(element.id, { ...element, transform: e.target.style.transform});
+      const xRatio = calculatXRatio(calcXTransform(e.target.style.transform));
+      const yRatio = calculatYRatio(calcYTransform(e.target.style.transform));
+      updateDragElements(element.id, { ...element, transform: e.target.style.transform, xRatio, yRatio });
       setDragging!(false);
       setIdDraggElementClick("");
       return;
     }
     const yTransform = calcYTransform(e.target.style.transform);
-    const rulerPosition = windowSize.height * (1 - rulerLocation) - ruleHeight;
-    let elementPsition = calcElementPosition(yTransform, element, unit * duplicateIfLength20());
+    let elementPsition = calcYElementPosition(yTransform, element, unit * duplicateIfLength20());
     // Change the position of the element relative to the integers, provided that the position is close to the axis.
     if (Math.abs(rulerPosition - elementPsition) < DistanceRulerForUpdatePositioning) updateXLocation(e);
     // Change the type of jump if its position has changed relative to the ruler.
     if (!element?.jump) {
-      updateDragElements(element.id, { ...element, transform: e.target.style.transform, widthRatio: calculatWidthRatio(e.target.style.transform), heightRatio: calculatHeightRatio(e.target.style.transform)});
+      const xRatio = calculatXRatio(calcXTransform(e.target.style.transform));
+      const yRatio = calculatYRatio(calcYTransform(e.target.style.transform));
+      updateDragElements(element.id, { ...element, transform: e.target.style.transform, widthRatio: calculatWidthRatio(e.target.style.transform), heightRatio: calculatHeightRatio(e.target.style.transform), xRatio, yRatio });
       return;
     }
     let isUnderRuler = element.jump.underRuler;
@@ -87,12 +95,16 @@ const MoveableElement = ({ moveableRef, element, dragging, setDragging }: IProps
       }
       e.target.style.transform = e.target.style.transform.replace(yTransform + "px)", newYPositionString);
     }
+    const xRatio = calculatXRatio(calcXTransform(e.target.style.transform));
+    const yRatio = calculatYRatio(calcYTransform(e.target.style.transform));
     updateDragElements(element.id, {
       ...element,
       transform: e.target.style.transform,
       widthRatio: calculatWidthRatio(e.target.style.transform),
       heightRatio: calculatHeightRatio(e.target.style.transform),
       jump: { ...(resizeElement ? resizeElement.jump! : element.jump), underRuler: isUnderRuler },
+      xRatio,
+      yRatio
     });
   };
 
@@ -161,7 +173,8 @@ const MoveableElement = ({ moveableRef, element, dragging, setDragging }: IProps
       newTransform = e.target.style.transform.replace("(" + xPosition, newXPosition);
       e.target.style.transform = newTransform;
     }
-    updateDragElements(element.id, { ...element, transform: newTransform,  widthRatio: calculatWidthRatio(e.target.style.transform), heightRatio: calculatHeightRatio(e.target.style.transform), jump: { ...element.jump, width: newWidth, value: newValue } });
+    const xRatio = calculatXRatio(calcXTransform(e.target.style.transform));
+    updateDragElements(element.id, { ...element, transform: newTransform, widthRatio: calculatWidthRatio(e.target.style.transform), heightRatio: calculatHeightRatio(e.target.style.transform), jump: { ...element.jump, width: newWidth, value: newValue }, xRatio });
   };
 
   return (

library/math/numbersLine/src/hooks/useDraggableElementAction.ts

@@ -34,19 +34,23 @@ export const useDraggableElementAction = () => {
     zIndexCounter,
     setZIndexCounter,
   } = useNumbersLineContext();
-  const { calculatRulerWidth, calculatUnitsAmount, calculatRulerPaddingSides } = useHelpers();
+  const { calculatRulerWidth, calculatUnitsAmount, calculatRulerPaddingSides, calculatXRatio, calculatYRatio } = useHelpers();
 
   const addDraggableElement = (typeAction: ActionTypes, type?: NaviKeniIconsTypes) => {
     const elementWidth = typeAction == ActionTypes.jump ? calculatRulerWidth() / calculatUnitsAmount(): typeAction == ActionTypes.naviAndKeni? calculatRulerWidth() / unitAmount.ten: textBoxWidth;
     const xTranslate = (windowSize.width - elementWidth) / 2 + duplicateElementSpace;
     const yTranslate = windowSize.height / 4 + duplicateElementSpace;
+    const xRatio = calculatXRatio(xTranslate)
+    const yRatio = calculatYRatio(yTranslate)
     let newElement: IElement = {
       id: uuidv4(),
       type: typeAction,
       transform: `translate(${xTranslate}px, ${yTranslate}px)`,
       zIndex: zIndexCounter,
       heightRatio: xTranslate/windowSize.width,
       widthRatio: yTranslate/windowSize.height,
+      xRatio: xRatio,
+      yRatio: yRatio,
     };
 
     if (typeAction === ActionTypes.jump) {
@@ -89,10 +93,12 @@ export const useDraggableElementAction = () => {
       setLeftPosition((prev) => Math.round((prev - outOfRange) / unit) * unit);
     }
     newTransform = element.transform.replace("(" + startPosition, "(" + newPosition);
+    const xRatio = calculatXRatio(newPosition)
     const newElement = {
       ...element,
       id,
       transform: newTransform,
+      xRatio
     };
     setDragElements([...dragElements, newElement]);
     setIdDraggElementClick(id);

library/math/numbersLine/src/hooks/useHelpers.ts

@@ -1,6 +1,6 @@
 import { calcXTransform, calcYTransform } from "@/lib/utils";
 import { IElement } from "@/type/moveable";
-import { jumpArrowHeightConst, jumpArrowHeightRelative, jumpBaseHeight, jumpToArrowDistance, RulerPaddingSides, screenHeightMinimum } from "../consts/elementConsts";
+import { jumpArrowHeightConst, jumpArrowHeightRelative, jumpBaseHeight, jumpToArrowDistance, ruleHeight, rulerLocation, RulerPaddingSides, screenHeightMinimum } from "../consts/elementConsts";
 import { useNumbersLineContext } from "../context/numbersLineContext";
 import { LineRange, unitAmount } from "../type/ruler";
 import { TypeCover } from "../type/toolbar";
@@ -41,7 +41,7 @@ export const useHelpers = () => {
     return windowSize.height > screenHeightMinimum ?  jumpArrowHeightConst + jumpToArrowDistance : jumpArrowHeightRelative * windowSize.height + (jumpToArrowDistance/2);
   };
 
-   const calcElementPosition = (transfomPosition: number, element: IElement, unit: number): number => {
+   const calcYElementPosition = (transfomPosition: number, element: IElement, unit: number): number => {
   if (element.jump) {
     const base = transfomPosition + jumpBaseHeight / 3;
     return element.jump.underRuler ? base : base + calculatJumpHeightWithoutBase();
@@ -61,6 +61,22 @@ export const useHelpers = () => {
     return calcYTransform(transform)/windowSize.height;
   };
 
+  const calculatRulerPosition = (): number => {
+    return windowSize.height - (windowSize.height * rulerLocation) - ruleHeight;
+  };
+
+  const calculatXRatio = (xPosition:number): number => {
+      if(calculatUnitsAmount() == unitAmount.twenty)
+        return (xPosition- 0.5*unit) / (windowSize.width - unit)
+      return (xPosition- RulerPaddingSides) / (windowSize.width - 2 * RulerPaddingSides)
+  };
+
+  const calculatYRatio = (yPosition: number): number => {
+      if(calculatRulerPosition() < yPosition)
+        return (yPosition - calculatRulerPosition()) / (windowSize.height - calculatRulerPosition()) * -1
+      return yPosition / calculatRulerPosition()
+  };
+
   const restart = () => {
     setrulerType(rulerTypeShould);
     setDragElements([]);
@@ -79,8 +95,11 @@ export const useHelpers = () => {
     calculatHeightRatio,
     calculatWidthRatio,
     calculatJumpHeightWithoutBase,
-    calcElementPosition,
+    calcYElementPosition,
+    calculatRulerPosition,
     duplicateIfLength20,
+    calculatXRatio,
+    calculatYRatio,
     restart,
   };
 };

library/math/numbersLine/src/type/moveable.ts

@@ -11,6 +11,8 @@ export interface IElement {
   heightRatio: number;
   widthRatio: number;
   zIndex: number;
+  xRatio: number;
+  yRatio: number;
 }
 
 export interface IJump {