Skip to content

Fix keyboard shortcuts issues: scrolling, hints, cursor placement, and select all #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mikebarkmin merged 4 commits into from
Oct 13, 2025
Merged

Fix keyboard shortcuts issues: scrolling, hints, cursor placement, and select all #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eb97476
Initial plan
Copilot Oct 13, 2025
ef9bb63
Implement keyboard shortcuts improvements
Copilot Oct 13, 2025
3898e76
fix select all
mikebarkmin Oct 13, 2025
5bcebd4
Add close button (X) to help dialog header for better mobile usability
Copilot Oct 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 27 additions & 6 deletions packages/learningmap/src/EditorToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";
import { Menu, MenuButton, MenuDivider, MenuItem, SubMenu } from "@szhsin/react-menu";
import "@szhsin/react-menu/dist/index.css";
import '@szhsin/react-menu/dist/transitions/zoom.css';
import { Plus, Bug, Settings, Eye, Menu as MenuI, FolderOpen, Download, ImageDown, ExternalLink, Share2 } from "lucide-react";
import { Plus, Bug, Settings, Eye, Menu as MenuI, FolderOpen, Download, ImageDown, ExternalLink, Share2, RotateCcw } from "lucide-react";
import { getTranslations } from "./translations";

interface EditorToolbarProps {
Expand All @@ -21,6 +21,7 @@ interface EditorToolbarProps {
onDownlad: () => void;
onOpen: () => void;
onShare: () => void;
onReset: () => void;
language?: string;
}

Expand All @@ -40,6 +41,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
onDownlad,
onOpen,
onShare,
onReset,
language = "en",
}) => {
const t = getTranslations(language);
Expand All @@ -48,10 +50,22 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
<div className="editor-toolbar">
<div className="toolbar-group">
<Menu menuButton={<MenuButton disabled={previewMode} className="toolbar-button"><Plus size={16} /> <span className="toolbar-label">{t.nodes}</span></MenuButton>}>
<MenuItem onClick={() => onAddNewNode("task")}>{t.addTask}</MenuItem>
<MenuItem onClick={() => onAddNewNode("topic")}>{t.addTopic}</MenuItem>
<MenuItem onClick={() => onAddNewNode("image")}>{t.addImage}</MenuItem>
<MenuItem onClick={() => onAddNewNode("text")}>{t.addText}</MenuItem>
<MenuItem onClick={() => onAddNewNode("task")}>
<span>{t.addTask}</span>
<span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+1</span>
</MenuItem>
<MenuItem onClick={() => onAddNewNode("topic")}>
<span>{t.addTopic}</span>
<span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+2</span>
</MenuItem>
<MenuItem onClick={() => onAddNewNode("image")}>
<span>{t.addImage}</span>
<span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+3</span>
</MenuItem>
<MenuItem onClick={() => onAddNewNode("text")}>
<span>{t.addText}</span>
<span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+4</span>
</MenuItem>
</Menu>
<button disabled={previewMode} onClick={onOpenSettingsDrawer} className="toolbar-button">
<Settings size={16} /> <span className="toolbar-label">{t.settings}</span>
Expand All @@ -69,9 +83,15 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
<Share2 size={16} /> <span>{t.share}</span>
</MenuItem>
<MenuDivider />
<MenuItem onClick={onReset}>
<RotateCcw size={16} /> <span>{t.reset}</span>
<span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+Del</span>
</MenuItem>
<MenuDivider />
<SubMenu className={`${debugMode ? "active" : ""}`} label={<><Bug size={16} /> <span>{t.debug}</span></>}>
<MenuItem type="checkbox" checked={debugMode} onClick={onToggleDebugMode}>
{t.enableDebugMode}
<span>{t.enableDebugMode}</span>
<span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+D</span>
</MenuItem>
<MenuItem type="checkbox" checked={showCompletionNeeds} onClick={e => onSetShowCompletionNeeds(e.checked ?? false)} disabled={!debugMode}>
{t.showCompletionNeedsEdges}
Expand All @@ -85,6 +105,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
</SubMenu>
<MenuItem onClick={onTogglePreviewMode} className={`${previewMode ? "active" : ""}`}>
<Eye size={16} /> <span>{t.preview}</span>
<span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+P</span>
</MenuItem>
<MenuDivider />
<MenuItem href="https://openpatch.org" target="_blank" rel="noopener noreferrer">
Expand Down
90 changes: 64 additions & 26 deletions packages/learningmap/src/LearningMapEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import FloatingEdge from "./FloatingEdge";
import { EditorToolbar } from "./EditorToolbar";
import { parseRoadmapData } from "./helper";
import { LearningMap } from "./LearningMap";
import { Info, Redo, Undo, RotateCw, ShieldAlert } from "lucide-react";
import { Info, Redo, Undo, RotateCw, ShieldAlert, X } from "lucide-react";
import useUndoable from "./useUndoable";
import { MultiNodePanel } from "./MultiNodePanel";
import { getTranslations } from "./translations";
Expand Down Expand Up @@ -82,6 +82,7 @@ export function LearningMapEditor({
const [settings, setSettings] = useState<Settings>(parsedRoadmap.settings);
const [showGrid, setShowGrid] = useState(false);
const [clipboard, setClipboard] = useState<{ nodes: Node<NodeData>[]; edges: Edge[] } | null>(null);
const [lastMousePosition, setLastMousePosition] = useState<{ x: number; y: number } | null>(null);

// Use language from settings if available, otherwise use prop
const effectiveLanguage = settings?.language || language;
Expand All @@ -98,6 +99,7 @@ export function LearningMapEditor({
{ action: t.shortcuts.togglePreviewMode, shortcut: "Ctrl+P" },
{ action: t.shortcuts.toggleDebugMode, shortcut: "Ctrl+D" },
{ action: t.shortcuts.selectMultipleNodes, shortcut: "Ctrl+Click or Shift+Drag" },
{ action: t.shortcuts.selectAllNodes, shortcut: "Ctrl+A" },
{ action: t.shortcuts.showHelp, shortcut: "Ctrl+? or Help Button" },
{ action: t.shortcuts.zoomIn, shortcut: "Ctrl++" },
{ action: t.shortcuts.zoomOut, shortcut: "Ctrl+-" },
Expand Down Expand Up @@ -306,12 +308,16 @@ export function LearningMapEditor({

const addNewNode = useCallback(
(type: "task" | "topic" | "image" | "text") => {
const centerPos = screenToFlowPosition({ x: window.innerWidth / 2, y: window.innerHeight / 2 });
// Use last mouse position if available, otherwise use center of screen
const position = lastMousePosition
? screenToFlowPosition(lastMousePosition)
: screenToFlowPosition({ x: window.innerWidth / 2, y: window.innerHeight / 2 });

if (type === "task") {
const newNode: Node<NodeData> = {
id: `node${nextNodeId}`,
type,
position: centerPos,
position,
data: {
label: t.newTask,
summary: "",
Expand All @@ -324,7 +330,7 @@ export function LearningMapEditor({
const newNode: Node<NodeData> = {
id: `node${nextNodeId}`,
type,
position: centerPos,
position,
data: {
label: t.newTopic,
summary: "",
Expand All @@ -339,7 +345,7 @@ export function LearningMapEditor({
id: `background-node${nextNodeId}`,
type,
zIndex: -2,
position: centerPos,
position,
data: {
src: "",
},
Expand All @@ -350,7 +356,7 @@ export function LearningMapEditor({
const newNode: Node<TextNodeData> = {
id: `background-node${nextNodeId}`,
type,
position: centerPos,
position,
zIndex: -1,
data: {
text: t.backgroundTextDefault,
Expand All @@ -363,7 +369,7 @@ export function LearningMapEditor({
}
setSaved(false);
},
[nextNodeId, screenToFlowPosition, setNodes, setSaved, t]
[nextNodeId, lastMousePosition, screenToFlowPosition, setNodes, setSaved, t]
);

const handleSave = useCallback(() => {
Expand Down Expand Up @@ -679,13 +685,31 @@ export function LearningMapEditor({
}
}, [setNodes, setEdges, setNextNodeId, setSaved, t]);

const handleSelectAll = useCallback(() => {
setNodes(nds => nds.map(n => ({
...n,
selected: true,
})))
}, [nodes, setSelectedNodeIds]);

const handleSelectionChange: OnSelectionChangeFunc = useCallback(
({ nodes: selectedNodes }) => {
setSelectedNodeIds(selectedNodes.map(n => n.id));
},
[setSelectedNodeIds]
);

// Track mouse position for node placement
useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
setLastMousePosition({ x: e.clientX, y: e.clientY });
};
window.addEventListener("mousemove", handleMouseMove);
return () => {
window.removeEventListener("mousemove", handleMouseMove);
};
}, []);

useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
//save shortcut
Expand Down Expand Up @@ -764,7 +788,6 @@ export function LearningMapEditor({
handleZoomToSelection();
}

console.log(e);
// Toggle grid shortcut
if ((e.ctrlKey || e.metaKey) && e.code === "Backslash") {
e.preventDefault();
Expand All @@ -790,6 +813,11 @@ export function LearningMapEditor({
e.preventDefault();
handlePaste();
}
// Select all shortcut
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'a' && !e.shiftKey) {
e.preventDefault();
handleSelectAll();
}

// Dismiss with Escape
if (helpOpen && e.key === 'Escape') {
Expand All @@ -802,7 +830,7 @@ export function LearningMapEditor({
};
}, [handleSave, handleUndo, handleRedo, addNewNode, helpOpen, setHelpOpen, togglePreviewMode, toggleDebugMode,
handleZoomIn, handleZoomOut, handleResetZoom, handleFitView, handleZoomToSelection, handleToggleGrid,
handleResetMap, handleCut, handleCopy, handlePaste]);
handleResetMap, handleCut, handleCopy, handlePaste, handleSelectAll]);

return (
<>
Expand All @@ -822,6 +850,7 @@ export function LearningMapEditor({
onDownlad={handleDownload}
onOpen={handleOpen}
onShare={handleShare}
onReset={handleResetMap}
language={effectiveLanguage}
/>
{previewMode && <LearningMap roadmapData={roadmapState} language={effectiveLanguage} />}
Expand Down Expand Up @@ -907,24 +936,33 @@ export function LearningMapEditor({
open={helpOpen}
onClose={() => setHelpOpen(false)}
>
<h2>{t.keyboardShortcuts}</h2>
<table>
<thead>
<tr>
<th>{t.action}</th>
<th>{t.shortcut}</th>
</tr>
</thead>
<tbody>
{keyboardShortcuts.map((item) => (
<tr key={item.action}>
<td>{item.action}</td>
<td>{item.shortcut}</td>
<header className="help-header">
<h2>{t.keyboardShortcuts}</h2>
<button className="close-button" onClick={() => setHelpOpen(false)} aria-label={t.close}>
<X size={20} />
</button>
</header>
<div className="help-content">
<table>
<thead>
<tr>
<th>{t.action}</th>
<th>{t.shortcut}</th>
</tr>
))}
</tbody>
</table>
<button className="primary-button" onClick={() => setHelpOpen(false)}>{t.close}</button>
</thead>
<tbody>
{keyboardShortcuts.map((item) => (
<tr key={item.action}>
<td>{item.action}</td>
<td>{item.shortcut}</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="help-footer">
<button className="primary-button" onClick={() => setHelpOpen(false)}>{t.close}</button>
</div>
</dialog>
<ShareDialog
open={shareDialogOpen}
Expand Down
30 changes: 28 additions & 2 deletions packages/learningmap/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -624,18 +624,44 @@ header.drawer-header {
dialog.help[open] {
width: 600px;
max-width: 90vw;
max-height: 90vh;
border: none;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
padding: 24px;
padding: 0;
background: white;
position: fixed;
top: 50%;
transform: translateY(-50%);
gap: 16px;
display: flex;
flex-direction: column;
z-index: 1000;
overflow: hidden;

.help-header {
padding: 24px 24px 16px 24px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e5e7eb;

h2 {
margin: 0;
font-size: 24px;
font-weight: 700;
}
}

.help-content {
flex: 1;
overflow-y: auto;
padding: 16px 24px;
}

.help-footer {
padding: 16px 24px 24px 24px;
border-top: 1px solid #e5e7eb;
}

table {
width: 100%;
Expand Down
3 changes: 3 additions & 0 deletions packages/learningmap/src/translations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export interface Translations {
togglePreviewMode: string;
toggleDebugMode: string;
selectMultipleNodes: string;
selectAllNodes: string;
showHelp: string;
zoomIn: string;
zoomOut: string;
Expand Down Expand Up @@ -234,6 +235,7 @@ const en: Translations = {
togglePreviewMode: "Toggle Preview Mode",
toggleDebugMode: "Toggle Debug Mode",
selectMultipleNodes: "Select Multiple Nodes",
selectAllNodes: "Select All Nodes",
showHelp: "Show Help",
zoomIn: "Zoom In",
zoomOut: "Zoom Out",
Expand Down Expand Up @@ -430,6 +432,7 @@ const de: Translations = {
togglePreviewMode: "Vorschau-Modus umschalten",
toggleDebugMode: "Debug-Modus umschalten",
selectMultipleNodes: "Mehrere Knoten auswählen",
selectAllNodes: "Alle Knoten auswählen",
showHelp: "Hilfe anzeigen",
zoomIn: "Vergrößern",
zoomOut: "Verkleinern",
Expand Down