From 299613c9d4fbfb1a539cae692039dd8a4614e2c8 Mon Sep 17 00:00:00 2001 From: Rachel Braverman Date: Sun, 17 Nov 2024 18:11:04 +0200 Subject: [PATCH 1/3] responsiveness- fix ruller position and improve the element position after resize screen (relative to the position of the ruler --- .../src/components/ShowElements.tsx | 13 +++++++-- .../showElements/MoveableElement.tsx | 29 ++++++++++++++----- .../src/hooks/useDraggableElementAction.ts | 8 ++++- .../math/numbersLine/src/hooks/useHelpers.ts | 25 ++++++++++++++-- 4 files changed, 61 insertions(+), 14 deletions(-) diff --git a/library/math/numbersLine/src/components/ShowElements.tsx b/library/math/numbersLine/src/components/ShowElements.tsx index 76164f0..98f2d59 100644 --- a/library/math/numbersLine/src/components/ShowElements.tsx +++ b/library/math/numbersLine/src/components/ShowElements.tsx @@ -8,14 +8,20 @@ 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"; 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 translateY = (element.yRatio * calculatRulerPosition()).toFixed(2)//TODO delelte ).toFixed(2) + if (element.yRatio < 0) //under ruler + translateY = (-1 * element.yRatio * (windowSize.height - calculatRulerPosition()) + calculatRulerPosition()).toFixed(2) + const translateX = ((element.xRatio * (windowSize.width - 2 * RulerPaddingSides)) + RulerPaddingSides).toFixed(2)//TODO calc with 1/2 unit padding too + const newTransform = `translate(${translateX}px, ${translateY}px)` const documentElement = document.getElementById(`dragElement-${element.id}`); if (!documentElement) return; documentElement.style.transform = newTransform; @@ -50,7 +56,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(() => { diff --git a/library/math/numbersLine/src/components/showElements/MoveableElement.tsx b/library/math/numbersLine/src/components/showElements/MoveableElement.tsx index acb654d..1e15881 100644 --- a/library/math/numbersLine/src/components/showElements/MoveableElement.tsx +++ b/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 ( diff --git a/library/math/numbersLine/src/hooks/useDraggableElementAction.ts b/library/math/numbersLine/src/hooks/useDraggableElementAction.ts index 910ab8d..73d507d 100644 --- a/library/math/numbersLine/src/hooks/useDraggableElementAction.ts +++ b/library/math/numbersLine/src/hooks/useDraggableElementAction.ts @@ -34,12 +34,14 @@ 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, @@ -47,6 +49,8 @@ export const useDraggableElementAction = () => { 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); diff --git a/library/math/numbersLine/src/hooks/useHelpers.ts b/library/math/numbersLine/src/hooks/useHelpers.ts index d559cf3..4ce3a24 100644 --- a/library/math/numbersLine/src/hooks/useHelpers.ts +++ b/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, }; }; From 240a56fe62f6f393f3fd49e74b0e63eb133ac931 Mon Sep 17 00:00:00 2001 From: Rachel Braverman Date: Sun, 17 Nov 2024 18:11:28 +0200 Subject: [PATCH 2/3] responsiveness- fix ruller position and improve the element position after resize screen (relative to the position of the ruler) - add forget file --- library/math/numbersLine/src/type/moveable.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/library/math/numbersLine/src/type/moveable.ts b/library/math/numbersLine/src/type/moveable.ts index d2fe24a..d189b75 100644 --- a/library/math/numbersLine/src/type/moveable.ts +++ b/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 { From 330631ed9e56e3e19e8ad784827dce62e439ff1d Mon Sep 17 00:00:00 2001 From: Rachel Braverman Date: Sun, 17 Nov 2024 18:18:16 +0200 Subject: [PATCH 3/3] responsiveness- fix ruller position and improve the element position after resize screen (relative to the position of the ruler) - improve and delete DOTO --- .../src/components/ShowElements.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/library/math/numbersLine/src/components/ShowElements.tsx b/library/math/numbersLine/src/components/ShowElements.tsx index 98f2d59..b704f44 100644 --- a/library/math/numbersLine/src/components/ShowElements.tsx +++ b/library/math/numbersLine/src/components/ShowElements.tsx @@ -9,6 +9,7 @@ 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(); @@ -17,11 +18,19 @@ const ShowElements = () => { const [windowResizing, setWindowResizing] = useState(false); const updateTransform = (element: IElement) => { - let translateY = (element.yRatio * calculatRulerPosition()).toFixed(2)//TODO delelte ).toFixed(2) - if (element.yRatio < 0) //under ruler - translateY = (-1 * element.yRatio * (windowSize.height - calculatRulerPosition()) + calculatRulerPosition()).toFixed(2) - const translateX = ((element.xRatio * (windowSize.width - 2 * RulerPaddingSides)) + RulerPaddingSides).toFixed(2)//TODO calc with 1/2 unit padding too - const newTransform = `translate(${translateX}px, ${translateY}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;