fix(Map): Fixed problem with windows. (#140)

* fix(Map): Fixed problem with windows.

* fix(Core): Added min heigth for body

---------

Co-authored-by: achichenkov <aleksei.chichenkov@telleqt.ai>
Co-authored-by: Dmitry Popov <dmitriypopovsamara@gmail.com>

assets/css/app.css

@@ -25,6 +25,10 @@ body {
   width: 400px; /* As IE6 ignores !important it will set width as 400px; */
 }
 
+body > div:first-of-type {
+  min-height: 500px !important;
+}
+
 .lending-normal {
   font-family: 'Shentox', 'Rogan', sans-serif !important;
   font-weight: 500;

assets/js/hooks/Mapper/components/mapInterface/MapInterface.tsx

@@ -21,5 +21,12 @@ export const MapInterface = () => {
       .filter(x => windowsSettings.visible.some(j => x.id === j));
   }, [windowsSettings]);
 
-  return <WindowManager windows={items} dragSelector=".react-grid-dragHandleExample" onChange={updateWidgetSettings} />;
+  return (
+    <WindowManager
+      windows={items}
+      viewPort={windowsSettings.viewPort}
+      dragSelector=".react-grid-dragHandleExample"
+      onChange={updateWidgetSettings}
+    />
+  );
 };

assets/js/hooks/Mapper/components/ui-kit/WindowManager/WindowManager.tsx

@@ -76,14 +76,22 @@ export const WindowWrapper = ({ onResize, onDrag, ...window }: WindowWrapperProp
     </div>
   );
 };
+export type ViewPortProps = { w: number; h: number };
+export type WindowsManagerOnChange = (props: { windows: WindowProps[]; viewPort: ViewPortProps }) => void;
 
 type WindowManagerProps = {
   windows: WindowProps[];
+  viewPort?: ViewPortProps;
   dragSelector?: string;
-  onChange?(windows: WindowProps[]): void;
+  onChange?: WindowsManagerOnChange;
 };
 
-export const WindowManager: React.FC<WindowManagerProps> = ({ windows: initialWindows, dragSelector, onChange }) => {
+export const WindowManager: React.FC<WindowManagerProps> = ({
+  windows: initialWindows,
+  viewPort,
+  dragSelector,
+  onChange,
+}) => {
   const [windows, setWindows] = useState(
     initialWindows.map((window, index) => ({
       ...window,
@@ -91,6 +99,16 @@ export const WindowManager: React.FC<WindowManagerProps> = ({ windows: initialWi
     })),
   );
 
+  const refPrevSize = useRef({ w: 0, h: 0 });
+
+  useEffect(() => {
+    if (!viewPort) {
+      return;
+    }
+
+    refPrevSize.current = viewPort;
+  }, [viewPort]);
+
   useEffect(() => {
     setWindows(initialWindows.slice(0));
   }, [initialWindows]);
@@ -102,14 +120,15 @@ export const WindowManager: React.FC<WindowManagerProps> = ({ windows: initialWi
   const startMousePositionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
   const startWindowStateRef = useRef<{ x: number; y: number; width: number; height: number }>(DefaultWindowState);
 
-  const ref = useRef({ windows, onChange });
+  const ref = useRef({ windows, viewPort, onChange });
-  ref.current = { windows, onChange };
+  ref.current = { windows, viewPort, onChange };
-
-  const refPrevSize = useRef({ w: 0, h: 0 });
 
   const onDebouncedChange = useMemo(() => {
     return debounce(() => {
-      ref.current.onChange?.(ref.current.windows);
+      ref.current.onChange?.({
+        windows: ref.current.windows,
+        viewPort: refPrevSize.current,
+      });
     }, 20);
   }, []);
 
@@ -336,7 +355,7 @@ export const WindowManager: React.FC<WindowManagerProps> = ({ windows: initialWi
 
   // Handle resize of the container and reposition windows
   useEffect(() => {
-    if (containerRef.current) {
+    if (ref.current.viewPort == null && containerRef.current) {
       refPrevSize.current = { w: containerRef.current.clientWidth, h: containerRef.current.clientHeight };
     }
 
@@ -384,10 +403,14 @@ export const WindowManager: React.FC<WindowManagerProps> = ({ windows: initialWi
             next.position.y = container.clientHeight - next.size.height - SNAP_GAP;
           }
 
-          if (next.position.y < 0) {
+          if (next.position.y < SNAP_GAP) {
             next.position.y = 0;
           }
 
+          if (next.position.x < SNAP_GAP) {
+            next.position.x = SNAP_GAP;
+          }
+
           return next;
         });
       });

assets/js/hooks/Mapper/mapRootProvider/MapRootProvider.tsx

@@ -1,16 +1,20 @@
 import { ContextStoreDataUpdate, useContextStore } from '@/hooks/Mapper/utils';
 import { createContext, Dispatch, ForwardedRef, forwardRef, SetStateAction, useContext, useEffect } from 'react';
-import { MapUnionTypes, OutCommandHandler, SolarSystemConnection } from '@/hooks/Mapper/types';
+import {
+  CommandLinkSignatureToSystem,
+  MapUnionTypes,
+  OutCommandHandler,
+  SolarSystemConnection,
+} from '@/hooks/Mapper/types';
 import { useMapRootHandlers } from '@/hooks/Mapper/mapRootProvider/hooks';
 import { WithChildren } from '@/hooks/Mapper/types/common.ts';
 import useLocalStorageState from 'use-local-storage-state';
 import {
   ToggleWidgetVisibility,
-  UpdateWidgetSettingsFunc,
   useStoreWidgets,
   WindowStoreInfo,
 } from '@/hooks/Mapper/mapRootProvider/hooks/useStoreWidgets.ts';
-import { CommandLinkSignatureToSystem } from '@/hooks/Mapper/types';
+import { WindowsManagerOnChange } from '@/hooks/Mapper/components/ui-kit/WindowManager';
 import { DetailedKill } from '../types/kills';
 
 export type MapRootData = MapUnionTypes & {
@@ -82,7 +86,7 @@ export interface MapRootContextProps {
   setInterfaceSettings: Dispatch<SetStateAction<InterfaceStoredSettings>>;
   windowsSettings: WindowStoreInfo;
   toggleWidgetVisibility: ToggleWidgetVisibility;
-  updateWidgetSettings: UpdateWidgetSettingsFunc;
+  updateWidgetSettings: WindowsManagerOnChange;
   resetWidgets: () => void;
 }
 

assets/js/hooks/Mapper/mapRootProvider/hooks/useStoreWidgets.ts

@@ -8,13 +8,14 @@ import {
 } from '@/hooks/Mapper/components/mapInterface/constants.tsx';
 import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/types.ts';
 import { useCallback, useEffect, useRef } from 'react';
-import { SNAP_GAP } from '@/hooks/Mapper/components/ui-kit/WindowManager';
+import { SNAP_GAP, WindowsManagerOnChange } from '@/hooks/Mapper/components/ui-kit/WindowManager';
 
 export type StoredWindowProps = Omit<WindowProps, 'content'>;
 export type WindowStoreInfo = {
   version: number;
   windows: StoredWindowProps[];
   visible: WidgetsIds[];
+  viewPort?: { w: number; h: number } | undefined;
 };
 export type UpdateWidgetSettingsFunc = (widgets: WindowProps[]) => void;
 export type ToggleWidgetVisibility = (widgetId: WidgetsIds) => void;
@@ -33,7 +34,7 @@ export const useStoreWidgets = () => {
   const ref = useRef({ windowsSettings, setWindowsSettings });
   ref.current = { windowsSettings, setWindowsSettings };
 
-  const updateWidgetSettings: UpdateWidgetSettingsFunc = useCallback(newWindows => {
+  const updateWidgetSettings: WindowsManagerOnChange = useCallback(({ windows, viewPort }) => {
     const { setWindowsSettings } = ref.current;
 
     setWindowsSettings(({ version, visible /*, windows*/ }: WindowStoreInfo) => {
@@ -41,13 +42,14 @@ export const useStoreWidgets = () => {
         version,
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         windows: DEFAULT_WIDGETS.map(({ content, ...x }) => {
-          const windowProp = newWindows.find(j => j.id === x.id);
+          const windowProp = windows.find(j => j.id === x.id);
           if (windowProp) {
             return windowProp;
           }
 
           return x;
         }),
+        viewPort,
         visible,
       };
     });
@@ -92,7 +94,7 @@ export const useStoreWidgets = () => {
       return;
     }
 
-    const { version, windows, visible } = JSON.parse(raw) as WindowStoreInfo;
+    const { version, windows, visible, viewPort } = JSON.parse(raw) as WindowStoreInfo;
     if (!version || CURRENT_WINDOWS_VERSION > version) {
       setWindowsSettings(getDefaultWidgetProps());
     }
@@ -104,6 +106,7 @@ export const useStoreWidgets = () => {
       version: CURRENT_WINDOWS_VERSION,
       windows: out as WindowProps[],
       visible,
+      viewPort,
     });
   }, []);