From b100052453a7e6bee1486a4645f46cfc21730328 Mon Sep 17 00:00:00 2001 From: achichenkov Date: Sat, 11 Jan 2025 13:36:21 +0300 Subject: [PATCH] fix(Map): New windows systems --- .../components/mapInterface/MapInterface.tsx | 58 ++++----------- .../mapInterface/components/index.ts | 1 - .../components/mapInterface/constants.tsx | 71 +++++++++++++++++++ .../components/MapSettings/MapSettings.tsx | 26 +++---- .../WidgetsSettings/WidgetsSettings.tsx | 37 ++++++++++ .../ui-kit/WindowManager/WindowManager.tsx | 10 +++ .../components/ui-kit/WindowManager/types.ts | 1 + assets/js/hooks/Mapper/constants.ts | 1 + .../mapRootProvider/MapRootProvider.tsx | 18 ++++- 9 files changed, 161 insertions(+), 62 deletions(-) create mode 100644 assets/js/hooks/Mapper/components/mapInterface/constants.tsx create mode 100644 assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/WidgetsSettings/WidgetsSettings.tsx diff --git a/assets/js/hooks/Mapper/components/mapInterface/MapInterface.tsx b/assets/js/hooks/Mapper/components/mapInterface/MapInterface.tsx index 0c8faa8e..cb2791d3 100644 --- a/assets/js/hooks/Mapper/components/mapInterface/MapInterface.tsx +++ b/assets/js/hooks/Mapper/components/mapInterface/MapInterface.tsx @@ -1,48 +1,11 @@ import 'react-grid-layout/css/styles.css'; import 'react-resizable/css/styles.css'; -import { - LocalCharacters, - RoutesWidget, - SystemInfo, - SystemSignatures, -} from '@/hooks/Mapper/components/mapInterface/widgets'; -import { useState } from 'react'; +import { useMemo, useState } from 'react'; import { SESSION_KEY } from '@/hooks/Mapper/constants.ts'; import { WindowManager } from '@/hooks/Mapper/components/ui-kit/WindowManager'; import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/types.ts'; - -const CURRENT_WINDOWS_VERSION = 2; - -const DEFAULT: WindowProps[] = [ - { - id: 'info', - position: { x: 10, y: 10 }, - size: { width: 250, height: 200 }, - zIndex: 0, - content: () => , - }, - { - id: 'signatures', - position: { x: 10, y: 220 }, - size: { width: 250, height: 300 }, - zIndex: 0, - content: () => , - }, - { - id: 'local', - position: { x: 270, y: 10 }, - size: { width: 250, height: 510 }, - zIndex: 0, - content: () => , - }, - { - id: 'routes', - position: { x: 10, y: 530 }, - size: { width: 510, height: 200 }, - zIndex: 0, - content: () => , - }, -]; +import { CURRENT_WINDOWS_VERSION, DEFAULT_WIDGETS } from '@/hooks/Mapper/components/mapInterface/constants.tsx'; +import { useMapRootState } from '@/hooks/Mapper/mapRootProvider'; type WindowsLS = { windows: WindowProps[]; @@ -60,19 +23,19 @@ const restoreWindowsFromLS = (): WindowProps[] => { const raw = localStorage.getItem(SESSION_KEY.windows); if (!raw) { console.warn('No windows found in local storage!!'); - return DEFAULT; + return DEFAULT_WIDGETS; } const { version, windows } = JSON.parse(raw) as WindowsLS; if (!version || CURRENT_WINDOWS_VERSION > version) { - return DEFAULT; + return DEFAULT_WIDGETS; } // eslint-disable-next-line no-debugger const out = (windows as Omit[]) - .filter(x => DEFAULT.find(def => def.id === x.id)) + .filter(x => DEFAULT_WIDGETS.find(def => def.id === x.id)) .map(x => { - const content = DEFAULT.find(def => def.id === x.id)?.content; + const content = DEFAULT_WIDGETS.find(def => def.id === x.id)?.content; return { ...x, content: content! }; }); @@ -81,10 +44,15 @@ const restoreWindowsFromLS = (): WindowProps[] => { export const MapInterface = () => { const [items, setItems] = useState(restoreWindowsFromLS); + const { windowsVisible } = useMapRootState(); + + const itemsFiltered = useMemo(() => { + return items.filter(x => windowsVisible.some(j => x.id === j)); + }, [items, windowsVisible]); return ( { saveWindowsToLS(x); diff --git a/assets/js/hooks/Mapper/components/mapInterface/components/index.ts b/assets/js/hooks/Mapper/components/mapInterface/components/index.ts index 02eb1eaf..75d50c2e 100644 --- a/assets/js/hooks/Mapper/components/mapInterface/components/index.ts +++ b/assets/js/hooks/Mapper/components/mapInterface/components/index.ts @@ -1,5 +1,4 @@ export * from './Widget'; -export * from './WidgetsGrid'; export * from './SystemSettingsDialog'; export * from './SystemCustomLabelDialog'; export * from './SystemLinkSignatureDialog'; diff --git a/assets/js/hooks/Mapper/components/mapInterface/constants.tsx b/assets/js/hooks/Mapper/components/mapInterface/constants.tsx new file mode 100644 index 00000000..467cd738 --- /dev/null +++ b/assets/js/hooks/Mapper/components/mapInterface/constants.tsx @@ -0,0 +1,71 @@ +import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/types.ts'; +import { + LocalCharacters, + RoutesWidget, + SystemInfo, + SystemSignatures, +} from '@/hooks/Mapper/components/mapInterface/widgets'; + +export const CURRENT_WINDOWS_VERSION = 2; + +export enum WidgetsIds { + info = 'info', + signatures = 'signatures', + local = 'local', + routes = 'routes', +} + +export const DEFAULT_WIDGETS: WindowProps[] = [ + { + id: WidgetsIds.info, + position: { x: 10, y: 10 }, + size: { width: 250, height: 200 }, + zIndex: 0, + content: () => , + }, + { + id: WidgetsIds.signatures, + position: { x: 10, y: 220 }, + size: { width: 250, height: 300 }, + zIndex: 0, + content: () => , + }, + { + id: WidgetsIds.local, + position: { x: 270, y: 10 }, + size: { width: 250, height: 510 }, + zIndex: 0, + content: () => , + }, + { + id: WidgetsIds.routes, + position: { x: 10, y: 530 }, + size: { width: 510, height: 200 }, + zIndex: 0, + content: () => , + }, +]; + +type WidgetsCheckboxesType = { + id: WidgetsIds; + label: string; +}[]; + +export const WIDGETS_CHECKBOXES_PROPS: WidgetsCheckboxesType = [ + { + id: WidgetsIds.info, + label: 'System Info', + }, + { + id: WidgetsIds.signatures, + label: 'Signatures', + }, + { + id: WidgetsIds.local, + label: 'Local', + }, + { + id: WidgetsIds.routes, + label: 'Routes', + }, +]; diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.tsx index c2583d32..37cba252 100644 --- a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.tsx +++ b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.tsx @@ -3,13 +3,10 @@ import { Dialog } from 'primereact/dialog'; import { useCallback, useMemo, useState } from 'react'; import { TabPanel, TabView } from 'primereact/tabview'; import { PrettySwitchbox } from './components'; -import { - InterfaceStoredSettingsProps, - useMapRootState, - InterfaceStoredSettings, -} from '@/hooks/Mapper/mapRootProvider'; +import { InterfaceStoredSettingsProps, useMapRootState, InterfaceStoredSettings } from '@/hooks/Mapper/mapRootProvider'; import { OutCommand } from '@/hooks/Mapper/types'; import { Dropdown } from 'primereact/dropdown'; +import { WidgetsSettings } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components/WidgetsSettings/WidgetsSettings.tsx'; export enum UserSettingsRemoteProps { link_signature_on_splash = 'link_signature_on_splash', @@ -140,7 +137,6 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => { }; }, [userRemoteSettings, interfaceSettings]); - const handleShow = async () => { const { user_settings } = await outCommand({ type: OutCommand.getUserSettings, @@ -182,7 +178,7 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => { key={item.prop} label={item.label} checked={!!currentValue} - setChecked={(checked) => handleSettingChange(item.prop, checked)} + setChecked={checked => handleSettingChange(item.prop, checked)} /> ); } @@ -195,7 +191,7 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => { className="text-sm" value={currentValue} options={item.options} - onChange={(e) => handleSettingChange(item.prop, e.value)} + onChange={e => handleSettingChange(item.prop, e.value)} placeholder="Select a theme" /> @@ -227,19 +223,15 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
setActiveIndex(e.index)} + onTabChange={e => setActiveIndex(e.index)} className={styles.verticalTabView} > -
- {renderSettingsList(COMMON_CHECKBOXES_PROPS)} -
+
{renderSettingsList(COMMON_CHECKBOXES_PROPS)}
 -
- {renderSettingsList(SYSTEMS_CHECKBOXES_PROPS)} -
+
{renderSettingsList(SYSTEMS_CHECKBOXES_PROPS)}
 @@ -254,6 +246,10 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => { {renderSettingsList(UI_CHECKBOXES_PROPS)} + + + + {renderSettingItem(THEME_SETTING)} diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/WidgetsSettings/WidgetsSettings.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/WidgetsSettings/WidgetsSettings.tsx new file mode 100644 index 00000000..78e827df --- /dev/null +++ b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/WidgetsSettings/WidgetsSettings.tsx @@ -0,0 +1,37 @@ +import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components'; +import { WIDGETS_CHECKBOXES_PROPS, WidgetsIds } from '@/hooks/Mapper/components/mapInterface/constants.tsx'; +import { useMapRootState } from '@/hooks/Mapper/mapRootProvider'; +import { useCallback } from 'react'; + +export interface WidgetsSettingsProps {} + +// eslint-disable-next-line no-empty-pattern +export const WidgetsSettings = ({}: WidgetsSettingsProps) => { + const { windowsVisible, setWindowsVisible } = useMapRootState(); + + const handleWidgetSettingsChange = useCallback( + (widget: WidgetsIds, checked: boolean) => { + setWindowsVisible(prev => { + if (checked) { + return [...prev, widget]; + } + + return prev.filter(x => x !== widget); + }); + }, + [setWindowsVisible], + ); + + return ( +
+ {WIDGETS_CHECKBOXES_PROPS.map(widget => ( + x === widget.id)} + setChecked={checked => handleWidgetSettingsChange(widget.id, checked)} + /> + ))} +
+ ); +}; diff --git a/assets/js/hooks/Mapper/components/ui-kit/WindowManager/WindowManager.tsx b/assets/js/hooks/Mapper/components/ui-kit/WindowManager/WindowManager.tsx index b8082151..e9d4f7d8 100644 --- a/assets/js/hooks/Mapper/components/ui-kit/WindowManager/WindowManager.tsx +++ b/assets/js/hooks/Mapper/components/ui-kit/WindowManager/WindowManager.tsx @@ -90,6 +90,16 @@ export const WindowManager: React.FC = ({ windows: initialWi zIndex: index + 1, })), ); + + useEffect(() => { + setWindows( + initialWindows.map((window, index) => ({ + ...window, + zIndex: index + 1, + })), + ); + }, [initialWindows]); + const containerRef = useRef(null); const activeWindowIdRef = useRef(null); const actionTypeRef = useRef(null); diff --git a/assets/js/hooks/Mapper/components/ui-kit/WindowManager/types.ts b/assets/js/hooks/Mapper/components/ui-kit/WindowManager/types.ts index fbdde57c..912aa508 100644 --- a/assets/js/hooks/Mapper/components/ui-kit/WindowManager/types.ts +++ b/assets/js/hooks/Mapper/components/ui-kit/WindowManager/types.ts @@ -6,4 +6,5 @@ export type WindowProps = { position: { x: number; y: number }; size: { width: number; height: number }; zIndex: number; + visible?: boolean; }; diff --git a/assets/js/hooks/Mapper/constants.ts b/assets/js/hooks/Mapper/constants.ts index 4f2637e3..18f91522 100644 --- a/assets/js/hooks/Mapper/constants.ts +++ b/assets/js/hooks/Mapper/constants.ts @@ -1,6 +1,7 @@ export enum SESSION_KEY { viewPort = 'viewPort', windows = 'windows', + windowsVisible = 'windowsVisible', routes = 'routes', } diff --git a/assets/js/hooks/Mapper/mapRootProvider/MapRootProvider.tsx b/assets/js/hooks/Mapper/mapRootProvider/MapRootProvider.tsx index 8304f41b..72c75a35 100644 --- a/assets/js/hooks/Mapper/mapRootProvider/MapRootProvider.tsx +++ b/assets/js/hooks/Mapper/mapRootProvider/MapRootProvider.tsx @@ -4,6 +4,7 @@ import { MapUnionTypes, OutCommandHandler, SolarSystemConnection } from '@/hooks import { useMapRootHandlers } from '@/hooks/Mapper/mapRootProvider/hooks'; import { WithChildren } from '@/hooks/Mapper/types/common.ts'; import useLocalStorageState from 'use-local-storage-state'; +import { WidgetsIds } from '@/hooks/Mapper/components/mapInterface/constants.tsx'; export type MapRootData = MapUnionTypes & { selectedSystems: string[]; @@ -60,7 +61,14 @@ export const STORED_INTERFACE_DEFAULT_VALUES: InterfaceStoredSettings = { isShowBackgroundPattern: true, isSoftBackground: false, theme: 'default', -} +}; + +export const STORED_VISIBLE_WIDGETS_DEFAULT = [ + WidgetsIds.info, + WidgetsIds.local, + WidgetsIds.routes, + WidgetsIds.signatures, +]; export interface MapRootContextProps { update: ContextStoreDataUpdate; @@ -68,6 +76,8 @@ export interface MapRootContextProps { outCommand: OutCommandHandler; interfaceSettings: InterfaceStoredSettings; setInterfaceSettings: Dispatch>; + windowsVisible: WidgetsIds[]; + setWindowsVisible: Dispatch>; } const MapRootContext = createContext({ @@ -102,6 +112,10 @@ export const MapRootProvider = ({ children, fwdRef, outCommand }: MapRootProvide }, ); + const [windowsVisible, setWindowsVisible] = useLocalStorageState('windows:visible', { + defaultValue: STORED_VISIBLE_WIDGETS_DEFAULT, + }); + useEffect(() => { let foundNew = false; const newVals = Object.keys(STORED_INTERFACE_DEFAULT_VALUES).reduce((acc, x) => { @@ -128,6 +142,8 @@ export const MapRootProvider = ({ children, fwdRef, outCommand }: MapRootProvide outCommand: outCommand, setInterfaceSettings, interfaceSettings, + windowsVisible, + setWindowsVisible, }} > {children}