Merge pull request #50 from shefing/fixBugs

fix bug - jump resize icon and scroll screen when have element in the…
shefing · Feb 25, 2024 · 5facfd7 · 5facfd7
2 parents 72d0d40 + c924b9e
commit 5facfd7
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 10 deletions.
diff --git a/library/math/numbersLine/src/App.css b/library/math/numbersLine/src/App.css
@@ -12,6 +12,10 @@
   font-display: swap;
 }
 
+body{
+  overflow: hidden;
+}
+
 .logo {
   height: 6em;
   padding: 1.5em;
@@ -56,17 +60,12 @@
 
 }
 
-:root {
-  --margin-value:28px;
-}
-
 .moveable-direction.moveable-e, .moveable-direction.moveable-w {
   background-size: contain !important;
   background-repeat: no-repeat !important;
   background-position: center !important;
   background-color: #ffffff00 !important;
 
-  margin: var(--margin-value)  !important;
   height: 18px !important;
   border: 0px !important;
   border-bottom-right-radius: 0px !important;
@@ -75,6 +74,15 @@
   border-top-left-radius: 0px !important;
 }
 
+#dragElement-jumpBase-on .moveable-direction.moveable-e,
+#dragElement-jumpBase-on .moveable-direction.moveable-w {
+  margin-top: 30px !important;
+}
+
+#dragElement-jumpBase-under .moveable-direction.moveable-e,
+#dragElement-jumpBase-under .moveable-direction.moveable-w {
+  margin-top: -50px !important;
+}
 
 .moveable-direction.moveable-e{
   background-image: url('../public/assets/icons/resizeRight.svg')  !important;

diff --git a/library/math/numbersLine/src/components/Jump.tsx b/library/math/numbersLine/src/components/Jump.tsx
@@ -44,7 +44,11 @@ const Jump = ({ element }: IProps) => {
           </span>
         </div>
       </div>
-      {idDraggElementClick === element.id && <MoveableElement moveableRef={moveableRef} element={element} unit={unit} setJumpWidth={setJumpWidth} />}
+      {idDraggElementClick === element.id && (
+        <div id={`dragElement-jumpBase-${element.underRuler ? "under" : "on"}`}>
+          <MoveableElement moveableRef={moveableRef} element={element} unit={unit} setJumpWidth={setJumpWidth} />
+        </div>
+      )}
     </>
   );
 };

diff --git a/library/math/numbersLine/src/components/MoveableElement.tsx b/library/math/numbersLine/src/components/MoveableElement.tsx
@@ -63,8 +63,6 @@ const MoveableElement = ({ moveableRef, element, unit, setJumpWidth }: IProps) =
         newYPositionString = ", " + Math.round(yTransform - 80) + "px)";
       }
       e.target.style.transform = e.target.style.transform.replace(yTransformString, newYPositionString);
-      const root = document.documentElement;
-      root.style.setProperty("--margin-value", `${element.underRuler ? 30 : -50}px`);
     }
 
     updateDragElements(element.id, { ...element, transform: e.target.style.transform, underRuler: isUnderRuler });

diff --git a/library/math/numbersLine/src/components/ruler/Arrows.tsx b/library/math/numbersLine/src/components/ruler/Arrows.tsx
@@ -25,7 +25,7 @@ const Arrows = () => {
 
     dragElements.forEach((item) => {
       if (item.id != idDraggElementClick) {
-        const element = document.getElementById("dragElement-jump" + item.id);
+        const element = document.getElementById(`dragElement-jump${item.id}`);
         const match = element?.style.transform.match(/\((.*?)px/);
         if (match && element) {
           const xPosition = parseFloat(match[1]);

diff --git a/library/math/numbersLine/src/hooks/useAction.ts b/library/math/numbersLine/src/hooks/useAction.ts
@@ -28,7 +28,7 @@ export const useAction = () => {
   const duplicateDragJump = async (element: IElement) => {
     const id = uuidv4();
     let transform = "";
-    const baseJump = document.getElementById("dragElement-jump" + element.id);
+    const baseJump = document.getElementById(`dragElement-jump${element.id}`);
     let matchX = baseJump?.style.transform.match(/\((.*?)px/);
     if (matchX && baseJump) {
       const xPosition = parseFloat(matchX[1]);