diff --git a/web/src/EditMode.tsx b/web/src/EditMode.tsx index 0d1f0da..d95b0ef 100644 --- a/web/src/EditMode.tsx +++ b/web/src/EditMode.tsx @@ -5,6 +5,8 @@ import { serializeInterface, parseInterface } from './lib/xml'; import SignalTree from './SignalTree'; import EditCanvas, { genWidgetId, DEFAULT_SIZES } from './EditCanvas'; import PropertiesPane from './PropertiesPane'; +import ContextualHelp from './ContextualHelp'; +import HelpModal from './HelpModal'; interface Props { initial: Interface | null; @@ -79,6 +81,9 @@ export default function EditMode({ initial, onDone }: Props) { const [snapGrid, setSnapGrid] = useState(10); const [showSnapGrid, setShowSnapGrid] = useState(true); const [showInsertMenu, setShowInsertMenu] = useState(false); + const [showHelp, setShowHelp] = useState(false); + const [helpSection, setHelpSection] = useState('edit'); + function openHelp(section = 'edit') { setHelpSection(section); setShowHelp(true); } // Undo / redo const undoStack = useRef([]); @@ -232,6 +237,7 @@ export default function EditMode({ initial, onDone }: Props) { function handleKeyDown(e: KeyboardEvent) { const target = e.target as Element; if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT') return; + if (e.key === '?') { openHelp('edit'); return; } if ((e.key === 'Delete' || e.key === 'Backspace') && selectedIds.length > 0) { pushUndo(); @@ -338,6 +344,8 @@ export default function EditMode({ initial, onDone }: Props) {
+ +
+ + {showHelp && ( + setShowHelp(false)} /> + )} ); } diff --git a/web/src/ViewMode.tsx b/web/src/ViewMode.tsx index 3081c77..ce15a12 100644 --- a/web/src/ViewMode.tsx +++ b/web/src/ViewMode.tsx @@ -6,6 +6,8 @@ import { wsClient } from './lib/ws'; import { parseInterface } from './lib/xml'; import type { Interface } from './lib/types'; import { useEffect } from 'preact/hooks'; +import ContextualHelp from './ContextualHelp'; +import HelpModal from './HelpModal'; interface Props { onEdit?: (iface?: Interface) => void; @@ -21,6 +23,10 @@ export default function ViewMode({ onEdit }: Props) { const [currentInterface, setCurrentInterface] = useState(null); const [parseError, setParseError] = useState(null); const [wsStatus, setWsStatus] = useState('connecting'); + const [showHelp, setShowHelp] = useState(false); + const [helpSection, setHelpSection] = useState('start'); + + function openHelp(section = 'start') { setHelpSection(section); setShowHelp(true); } // Historical time range — null means live const now = useMemo(() => new Date(), []); @@ -117,6 +123,14 @@ export default function ViewMode({ onEdit }: Props) { {wsStatus} + +