# simple-mind

**Repository Path**: devangbamboo/simple-mind

## Basic Information

- **Project Name**: simple-mind
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-16
- **Last Updated**: 2026-07-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# simple-mind

一个轻量的**无限画布思维导图**工具，单文件 HTML 实现。

双击 `start.bat` 启动本地服务，浏览器自动打开；不想要黑窗口就双击 `launch-silent.vbs`。

![screenshot](assets/screenshot.png)

## ✨ 功能

- **画布**：平移、滚轮缩放、坐标轴 + 刻度，支持白 / 奶油 / 暗色主题
- **节点**：
  - 双击空白处新增节点
  - 双击节点进入编辑（**短名字** + **详细笔记**，6 色调色板：红/蓝/绿/橙/紫/灰）
  - 悬停节点 → 节点下方弹出笔记 tooltip
  - 拖动节点自由布局
- **连线**：
  - `Ctrl + 左键` 按住节点拖到目标节点 → 建边
  - 双击边 → 编辑边的文字
  - 选中边后中点出现**控制点**，拖动可调整弧度（二次贝塞尔曲线）
  - 右键边 → 重置弯折 / 删除
- **键盘**（Xmind 风格）：
  - 选中节点 + `Tab` → 新建**子节点** + 自动连边 + 进入编辑
  - 选中节点 + `Enter` → 直接进入编辑
  - `Delete` / `Backspace` → 删除选中节点或边
  - `Esc` → 取消选择
- **文件 + 持久化**：
  - 左上角文件 tab（`happiness.prg`）显示当前正在编辑的文件；点击可改名
  - 标 `*` 斜体 = 新建/未保存过（红色标记）
  - `保存`：优先写入本地后端 `data/*.json`；后端不可用时退回浏览器文件句柄；再不可用才下载兜底
  - `打开`：在 Chrome/Edge 等支持 File System Access API 的浏览器里打开本地 JSON，并保留文件句柄
  - `Ctrl + S`：等同于保存
  - `文件 → 新建`：清空画布 + 重置文件名 + 重置 `isNewFile`
  - `导出`：另存为一份 JSON；不支持直接写文件的浏览器会退回下载兜底
  - **localStorage 不存图数据**。只存用户偏好（key `infinite-canvas:prefs`）：
    - `currentFile` 当前文件名
    - `isNewFile` 是否新文件
    - `defaultNodeColor` 新建节点的默认色
    - `theme` 当前主题
  - 文件关闭（×）= 触发"新建"
- **右键菜单**：
  - 节点：编辑 / 删除
  - 边：编辑文字 / 重置弯折 / 删除连线
  - 空白：新建节点

## 🚀 启动

### 方式一：双击 bat（看得到命令行，推荐调试时用）

```
双击 start.bat
```

输出示例：

```
============================================================
 Infinite Canvas
 URL       : http://127.0.0.1:8000/canvas.html
 Document  : C:\path\to\canvas.html
 Port      : 8000
Log file  : C:\path\to\server-8000.log

 Press Ctrl+C in this window to stop the server.
============================================================
```

按 `Ctrl+C` 停止服务。

### 方式二：双击 vbs（无黑窗口，推荐日常用）

```
双击 launch-silent.vbs
```

浏览器自动打开 `http://127.0.0.1:<port>/canvas.html`。服务在后台跑，关闭浏览器**不会**停止服务（要停就任务管理器杀 `node.exe`，或重新跑 `start.bat` 选另一个端口）。

### bat 做了什么

- UTF-8 控制台
- 自检 `canvas.html` 在不在旁边（不在会报错并 pause）
- 自动检查 Node.js / npm
- Node.js 版本自检（要 18+）
- 扫 8000-8999 找空闲端口
- 起 npm 后端（`npm run serve`）→ 自动开浏览器 → 日志 append 到 `server-<port>.log`
- 后端接口：`/api/load` 读取 `data/*.json`，`/api/save` 原子写入 `data/*.json`

如果系统没装 Node.js/npm，bat 会提示并暂停，**不会**静默失败。

## 🧱 文件清单

| 路径 | 作用 |
| --- | --- |
| `canvas.html` | 整个应用（HTML + CSS + JS 单文件，零依赖） |
| `package.json` | npm 脚本入口 |
| `server.mjs` | 本地 npm 后端：静态服务 + JSON 保存/读取 API |
| `src/api.mjs` | Web 标准 Request/Response API 逻辑，方便后续迁到 Cloudflare Worker |
| `start.bat` | 一键启动（带 cmd 窗口） |
| `launch-silent.vbs` | 一键启动（隐藏 cmd 窗口） |
| `server-<port>.log` | HTTP 请求日志（启动后生成，gitignore） |
| `verify/` | 开发期截图与临时文件（gitignore） |
| `publish/v1` `v2` `v3` | 预留发布目录（占位） |
| `v1.7z` `v2.7z` `v3.7z` | 早期废弃版本（保留在本地，**不入库**） |

## 🏗 架构

- **零依赖**：不引任何 JS/CSS 库、不打包、不构建
- **数据模型**：
  - 节点 `{ id, x, y, title, note, color }`
  - 边 `{ id, from, to, label, curve }`，`curve` 是中点垂直偏移像素，正负决定弯向
- **渲染**：
  - 节点用 `foreignObject` + HTML div，自适应文字宽度
  - 边用 SVG `path` 二次贝塞尔 (`M ... Q cx cy ...`)，`curve` 改变 `cx,cy`
  - 控制点是 `Q` 的控制点 `(mx, my) + perpendicular(curve)`
- **状态 → DOM 分离**：
  - 全量 `render()` 只在 add/remove/transform 时调
  - `selectNode` / `selectEdge` 走 **partial update**（只改 class + marker），保留 DOM 节点不被销毁，确保 dblclick 派发时 target 还在
- **持久化**：启动 npm 后端时图数据写入 `data/*.json`；没有后端时才使用浏览器文件句柄；`localStorage:infinite-canvas:prefs` 只存偏好（`currentFile` / `isNewFile` / `defaultNodeColor` / `theme`），不存图
- **坐标系**：SVG viewport `translate(pan) scale(zoom)`，世界坐标 + 视口转换；坐标轴 / 刻度在 screen-space `gridLayer`，跟随 pan/zoom 重新计算

## ⌨️ 快捷键速查

| 键 | 行为 |
| --- | --- |
| `双击空白` | 新建节点 + 编辑 |
| `双击节点` | 编辑该节点 |
| `双击边` | 编辑边的文字 |
| `Ctrl + 左键拖` | 从节点拉一条边到目标 |
| `Tab`（选中节点） | 新建子节点 + 自动连边 + 进入编辑 |
| `Enter`（选中节点） | 进入编辑 |
| `Delete` / `Backspace` | 删除选中节点 / 边 |
| `Esc` | 取消选择 |
| 滚轮 | 缩放（以光标为中心） |
| 拖空白 | 平移画布 |
| 右键 | 上下文菜单 |

## 🐛 已知小问题

- 边编辑输入框定位用的是"打开编辑时的 curve"，若你先调弯再编辑 label，输入框会落在原直线中点而不是弯中点（视觉略偏）
- 如果不是通过 `start.bat`/`npm run serve` 打开页面，后端 API 不可用，保存会退回浏览器文件句柄或下载兜底

## 📝 License

MIT（暂定）