Merge pull request #169 from epam/features/EPMUII-5023-draw-controls-…

…component Features/EPMUII-5023 Draw controls component
epam · Sep 28, 2023 · baf5c54 · baf5c54
2 parents d126260 + 7149653
commit baf5c54
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 24 deletions.
diff --git a/src/engine/Graphics2d.module.css b/src/engine/Graphics2d.module.css
@@ -4,7 +4,7 @@
 */
 
  .wrapperStyles {
-    width: 100%;
+     width: 100%;
      height: 100vh;
      justify-content: center;
      overflow: scroll;

diff --git a/src/ui/Main.module.css b/src/ui/Main.module.css
@@ -79,6 +79,7 @@
     right: 0;
     bottom: 0;
     z-index: 1;
+    user-select: none;
 }
 
 .settings {

diff --git a/src/ui/MobileSettings/MobileSettings.jsx b/src/ui/MobileSettings/MobileSettings.jsx
@@ -11,13 +11,15 @@ export const MobileSettings = () => {
   const [is2DMenuOpen, setIs2DMenuOpen] = useState(false);
   const [isCursorMenuOpen, setIsCursorMenuOpen] = useState(false);
   const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia('(max-width: 767px)').matches);
+  const [isMenuHidden, setIsMenuHidden] = useState(false);
+
   const containerRef = useRef(null);
+  const pressTimer = useRef(null);
   const toggleSettingsMenu = () => {
     setIsSettingsMenuOpen(!isSettingsMenuOpen);
     setIs2DMenuOpen(false);
     setIsCursorMenuOpen(false);
   };
-
   const toggle2DMenu = () => {
     setIs2DMenuOpen(!is2DMenuOpen);
     setIsSettingsMenuOpen(false);
@@ -28,37 +30,49 @@ export const MobileSettings = () => {
     setIsSettingsMenuOpen(false);
     setIs2DMenuOpen(false);
   };
+  const closeAllMenu = () => {
+    setIsSettingsMenuOpen(false);
+    setIs2DMenuOpen(false);
+    setIsCursorMenuOpen(false);
+  };
+
   useEffect(() => {
-    const handleResize = () => {
-      setIsSmallScreen(window.matchMedia('(max-width: 768px)').matches);
+    const onLongPress = () => {
+      setIsMenuHidden((current) => !current);
+      closeAllMenu();
     };
 
-    window.addEventListener('resize', handleResize);
+    const startPress = () => {
+      pressTimer.current = setTimeout(() => {
+        onLongPress();
+      }, 1000);
+    };
+
+    const endPress = () => {
+      clearTimeout(pressTimer.current);
+    };
+
+    document.addEventListener('touchstart', startPress);
+    document.addEventListener('touchend', endPress);
 
     return () => {
-      window.removeEventListener('resize', handleResize);
+      document.removeEventListener('touchstart', startPress);
+      document.removeEventListener('touchend', endPress);
     };
   }, []);
-
   useEffect(() => {
-    //TODO: next step is implementation behavior
-    const handleClickOutside = (event) => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setIsSettingsMenuOpen(false);
-        setIs2DMenuOpen(false);
-        setIsCursorMenuOpen(false);
-      }
+    const handleResize = () => {
+      setIsSmallScreen(window.matchMedia('(max-width: 768px)').matches);
     };
 
-    const containerElement = containerRef.current;
-    containerElement.addEventListener('click', handleClickOutside);
+    window.addEventListener('resize', handleResize);
 
     return () => {
-      containerElement.removeEventListener('click', handleClickOutside);
+      window.removeEventListener('resize', handleResize);
     };
   }, []);
   return (
-    <div className={css.settings__menu} ref={containerRef}>
+    <div className={`${css.settings__menu} ${isMenuHidden ? css.hidden : css.settings__menu}`} ref={containerRef}>
       <div className={css.buttons__container}>
         <UIButton icon="settings-linear" cx={css['settings__menu__button']} handler={toggleSettingsMenu} testId={'buttonSettingsLinear'}>
           <SVG name="settings-linear" width={42} height={42} />
@@ -78,7 +92,7 @@ export const MobileSettings = () => {
         </div>
       )}
       {(is2DMenuOpen || !isSmallScreen) && (
-        <div className={css.settings__menu_block}>
+        <div className={`${css.settings__menu_block} ${css.animation}`}>
           <LeftToolbar />
         </div>
       )}

diff --git a/src/ui/MobileSettings/MobileSettings.module.css b/src/ui/MobileSettings/MobileSettings.module.css
@@ -11,8 +11,12 @@
     position: absolute;
     top: 50%;
     right: 0;
+    opacity: 1;
     border: 1px solid var(--dark-gray);
     border-radius: 0.5rem;
+    animation: onHide .6s ease-in-out;
+    animation-fill-mode: forwards;
+
 }
 
 .buttons__container button {
@@ -24,9 +28,17 @@
     padding-left: 1rem;
 }
 
-
 .settings__menu {
+    display: block;
     background: inherit;
+    opacity: 1;
+}
+
+.hidden {
+    display: none;
+    opacity: 0;
+    animation: onHide .6s ease-in-out;
+    animation-fill-mode: forwards;
 }
 
 .settings__menu__button:after {
@@ -47,15 +59,28 @@
     left: 0;
     right: 0;
     padding: 10px;
-    z-index: 2;
+    z-index: 20000;
+    animation: onHide .6s ease-in-out;
+    animation-fill-mode: forwards;
 }
 
 .flex {
     flex-direction: column;
 }
 
-.settings__menu_block:active {
-    opacity: 0;
+@media screen and (max-width: 1024px){
+
+    @keyframes onHide {
+        0% {
+            opacity: 0;
+        }
+        50% {
+            opacity: 0.9;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
 }
 
 @media screen and (min-width: 768px){
@@ -93,6 +118,9 @@
         left: 12%;
         z-index: 10;
     }
+    .animation {
+        animation: none;
+    }
 
     .horizontal {
         width: 10rem;
@@ -117,4 +145,4 @@
     .horizontal {
         top: 12%;
     }
-}
+}