[fix] Dashboard UI & UX

packages/rath-client/src/components/appNav.tsx

@@ -1,11 +1,12 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Nav, INavLinkGroup } from '@fluentui/react';
 import { observer } from 'mobx-react-lite';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
 import { PIVOT_KEYS } from '../constants';
 import { useGlobalStore } from '../store';
+import useHotKey from '../hooks/use-hotkey';
 import UserSetting from './userSettings';
 
 const NavContainer = styled.div`
@@ -57,6 +58,17 @@ const IconMap = {
     [key: string]: string;
 };
 
+const HotKeyMap = {
+    D: PIVOT_KEYS.dataSource,
+    M: PIVOT_KEYS.editor,
+    S: PIVOT_KEYS.semiAuto,
+    A: PIVOT_KEYS.megaAuto,
+    P: PIVOT_KEYS.painter,
+    L: PIVOT_KEYS.collection,
+    B: PIVOT_KEYS.dashboard,
+    C: PIVOT_KEYS.causal,
+} as const;
+
 function getIcon(k: string): string {
     return IconMap[k] || 'Settings';
 }
@@ -67,13 +79,20 @@ const AppNav: React.FC<AppNavProps> = (props) => {
 
     const { appKey, navMode } = commonStore;
 
+    const [altKeyPressed, setAltKeyPressed] = useState(false);
+
     const getLinks = useCallback(
         (pivotKeys: string[]) => {
             return pivotKeys.map((p) => {
+                const hotkeyAccess = altKeyPressed ? Object.entries(HotKeyMap).find(
+                    ([, key]) => key === p
+                )?.[0] ?? null : null;
                 return {
                     url: `#${p}`,
                     key: p,
-                    name: navMode === 'text' ? intl.get(`menu.${p}`) : '',
+                    name: `${navMode === 'text' ? intl.get(`menu.${p}`) : ''}${
+                        hotkeyAccess ? ` (${hotkeyAccess})` : ''
+                    }`,
                     forceAnchor: true,
                     iconProps: { iconName: getIcon(p) },
                     // iconProps: navMode === 'icon' ? {iconName: getIcon(p) } : undefined,
@@ -84,9 +103,34 @@ const AppNav: React.FC<AppNavProps> = (props) => {
                 };
             });
         },
-        [commonStore, navMode]
+        [commonStore, navMode, altKeyPressed]
     );
 
+    useEffect(() => {
+        const handleKeyDown = (ev: KeyboardEvent) => {
+            if (ev.key === 'Alt') {
+                setAltKeyPressed(true);
+            }
+        };
+        const handleKeyUp = (ev: KeyboardEvent) => {
+            if (ev.key === 'Alt' || !ev.altKey) {
+                setAltKeyPressed(false);
+            }
+        };
+        document.body.addEventListener('keydown', handleKeyDown);
+        document.body.addEventListener('keyup', handleKeyUp);
+        return () => {
+            document.body.removeEventListener('keydown', handleKeyDown);
+            document.body.removeEventListener('keyup', handleKeyUp);
+        };
+    }, []);
+
+    const HotKeyActions = useMemo(() => Object.fromEntries(Object.entries(HotKeyMap).map(([k, appKey]) => [
+        `Alt+${k}`, () => commonStore.setAppKey(appKey)
+    ])), [commonStore]);
+
+    useHotKey(HotKeyActions);
+
     const groups: INavLinkGroup[] = [
         {
             links: [
@@ -103,7 +147,7 @@ const AppNav: React.FC<AppNavProps> = (props) => {
                     url: '#dev-mode',
                     key: intl.get('menu.devCollection'),
                     name: navMode === 'text' ? intl.get('menu.devCollection') : '',
-                    isExpanded: false,
+                    isExpanded: altKeyPressed,
                     forceAnchor: true,
                     onClick(e: any) {
                         e.preventDefault();
@@ -139,6 +183,7 @@ const AppNav: React.FC<AppNavProps> = (props) => {
             ],
         },
     ];
+
     return (
         <NavContainer>
             <LogoBar>

packages/rath-client/src/hooks/use-hotkey.ts

@@ -0,0 +1,61 @@
+import { useEffect, useRef } from "react";
+
+export type HotKeyLeadingKey = (
+    | 'Meta'        // MacOS: command   Windows: Windows
+    | 'Control'     // MacOS: control^  Windows: Ctrl
+    | 'Shift'       // MacOS: shift     Windows: Shift
+    | 'Alt'         // MacOS: option    Windows: Alt
+);
+
+export type HotKeyMainKey = (
+    // | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '0'
+    | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K'
+    | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V'
+    | 'W' | 'X' | 'Y' | 'Z'
+)
+
+export type HotKeyTrigger = `${
+    `${HotKeyLeadingKey}+` | ''
+}${
+    `${HotKeyLeadingKey}+` | ''
+}${
+    HotKeyMainKey
+}`;
+
+export type HotKeyCallback = (e: KeyboardEvent) => void;
+
+export type HotKeyActions = {
+    [key in HotKeyTrigger]?: HotKeyCallback;
+};
+
+
+const useHotKey = (actions: HotKeyActions) => {
+    const actionsRef = useRef(actions);
+    actionsRef.current = actions;
+
+    useEffect(() => {
+        const cb = (e: KeyboardEvent) => {
+            const mainKey = /^Key(?<key>[A-Z])$/.exec(e.code)?.groups?.['key'] ?? null;
+            if (mainKey) {
+                const totalLeadingKey = [
+                    e.metaKey ? 'Meta\\+' : '',
+                    e.ctrlKey ? 'Control\\+' : '',
+                    e.shiftKey ? 'Shift\\+' : '',
+                    e.altKey ? 'Alt\\+' : '',
+                ].filter(Boolean);
+                const keyPattern = new RegExp(`^(${totalLeadingKey.join('|')})+${mainKey}$`);
+                const matched = Object.entries(actionsRef.current).find(([k]) => keyPattern.test(k));
+                matched?.[1](e);
+            }
+        };
+
+        document.body.addEventListener('keydown', cb);
+
+        return () => {
+            document.body.removeEventListener('keydown', cb);
+        };
+    }, []);
+};
+
+
+export default useHotKey

packages/rath-client/src/pages/dashboard/dashboard-draft.tsx

@@ -5,6 +5,7 @@ import { useGlobalStore } from '../../store';
 import { DashboardCard } from '../../store/dashboardStore';
 import DashboardPanel from './dashboard-panel';
 import DashboardRenderer, { transformCoord } from './renderer';
+import type { RefLine } from './renderer/card';
 import { MIN_CARD_SIZE } from './renderer/constant';
 
 
@@ -359,6 +360,82 @@ const DashboardDraft: FC<DashboardDraftProps> = ({ cursor, mode, ratio: r, sampl
         }
     }, [focus, page.cards]);
 
+    const getRefLinesCache = useRef<[number, RefLine[]]>();
+
+    const getRefLines = useCallback((selfIdx: number): RefLine[] => {
+        const cache = getRefLinesCache.current;
+        if (cache?.[0] === selfIdx) {
+            return cache[1];
+        }
+        const lines: RefLine[] = [{
+            direction: 'x',
+            position: 0,
+            reason: ['canvas-limit'],
+            score: 1,
+        }, {
+            direction: 'y',
+            position: 0,
+            reason: ['canvas-limit'],
+            score: 1,
+        }, {
+            direction: 'x',
+            position: page.config.size.w,
+            reason: ['canvas-limit'],
+            score: 1,
+        }, {
+            direction: 'y',
+            position: page.config.size.h,
+            reason: ['canvas-limit'],
+            score: 1,
+        }];
+        const cards = page.cards.filter((_, i) => i !== selfIdx);
+        for (const card of cards) {
+            lines.push({
+                direction: 'x',
+                position: card.layout.x,
+                reason: ['align-other-card'],
+                score: 1,
+            }, {
+                direction: 'y',
+                position: card.layout.y,
+                reason: ['align-other-card'],
+                score: 1,
+            }, {
+                direction: 'x',
+                position: card.layout.x + card.layout.w,
+                reason: ['align-other-card'],
+                score: 1,
+            }, {
+                direction: 'y',
+                position: card.layout.y + card.layout.h,
+                reason: ['align-other-card'],
+                score: 1,
+            });
+        }
+        const res = lines.reduce<RefLine[]>((list, line) => {
+            const same = list.find(which => which.direction === line.direction && which.position === line.position);
+            if (same) {
+                for (const reason of line.reason) {
+                    if (!same.reason.includes(reason)) {
+                        same.reason.push(reason);
+                    }
+                }
+                same.score += line.score;
+            } else {
+                list.push(line);
+            }
+            return list;
+        }, []).sort((a, b) => b.score - a.score);
+        const cacheData: [number, RefLine[]] = [selfIdx, res];
+        getRefLinesCache.current = cacheData;
+        setTimeout(() => {
+            if (getRefLinesCache.current === cacheData) {
+                getRefLinesCache.current = undefined;
+            }
+        }, 1_000);
+        return res;
+    }, [page]);
+
     return (
         <Container onClick={handleClick}>
             <div className="draft">
@@ -381,6 +458,7 @@ const DashboardDraft: FC<DashboardDraftProps> = ({ cursor, mode, ratio: r, sampl
                         operators: {
                             ...operators,
                             adjustCardSize: adjustCardSize.bind({}, index),
+                            getRefLines,
                         },
                     })) : undefined}
                 >