# ndraw

**Repository Path**: wcode1/ndraw

## Basic Information

- **Project Name**: ndraw
- **Description**: 以vue3,element-plus,paperjs,等库为基础,实现drawio的基本功能, 并增加一些附加功能

学习用.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-06
- **Last Updated**: 2026-06-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


![](./img/20260610155839.jpg)


# 功能特性
### TODO:
-[ ] root中editor不应该被访问
-[ ] useMouseInElement,布局重排对性能有影响
-[ ] 查看所有watch,影响性能

* 布局
  dagre：适用于有向图 / 流程图的自动布局（节点按层级排列，Draw.io 流程图核心）；
  elkjs：Eclipse 开源的布局库，支持树形 / 网格 / 流式 / 力导向，功能最全（Draw.io 核心布局库）；
  d3-force：力导向布局，适用于关系图 / 网络图（节点间有引力 / 斥力，自动分散不重叠）。

### 应用功能

* 工具栏
    -[ ] 系统配置按钮

* 菜单栏
  * 设置
      -[ ] 显示元素悬浮提示

* 自定义库
    -[ ] 增加库 按钮

* 系统库
    -[ ] 右键菜单
    - 
* 快捷键
* 动画编辑,演示

### 图操作
* 对齐线
* 自由绘图
    -[ ] 弹窗处理
    -[ ] 可修改
* 文本框
    -[ ] 使用Markdown格式
    -[ ] 简单编辑
    -[ ] 详细编辑
* 数学公式
    -[ ] \\frac{1}{x^2-1}
    -[ ] 使用markdown处理
* 层管理
    -[ ] 参考drawio
    -[ ] 使用markdown处理

### 元素

#### 特性
* 增加多边形
* 
#### 操作
* 双击默认操作
  -[ ] 可自定义
* 拖动形状到外部,自动导出图片
* 
#### 格式支持
* docx,xlsx
* wps
* 图片
* gant
* mind
* 声音
* 预览外部链接.iframe
* Mermaid
* echarts
* threeJs
#### 效果
* 效果
  -[ ] 属性面板中开关
  * 草图
  * 玻璃
  * 线条流动动画
* 鼠标悬浮提示
  -[ ] 放到Module中
  -[ ] 可配置开关
  -[ ] 自定义内容
  -[ ] 提示元素属性.可配置属性开关
  -[ ] 提示元素操作按钮.可配置属性开关
* 增加到自定义库
  -[ ] 右键菜单
* 旋转
  -[ ] 以15度为单位
  -[ ] alt时精细调整
  -[ ] 格式面板绝对调整
* 调整大小
  -[x] 调整控制点
  -[x] 锁定单边
  -[x] ctrl时双向调整
  -[x] shift锁定纵横比
* 组合/取消组合
  -[ ] 右键菜单
  -[ ] 格式面板
* 锁定,解锁
  -[ ] 右键菜单
  -[ ] 格式面板
-[ ] 形状调整控制手柄
-[ ] 修改对齐点.
-[ ] 剪切
-[ ] 复制
-[ ] 副本
-[ ] 粘贴
* 自定义属性
  -[ ] 属性编辑器
  -[ ] 属性label,type,
* 删除
  -[ ] 锁定时不能删除
  -[ ] 容器,同时删除子对象.  如果子对象锁定,怎么办?
  -[ ] 组合

## 其他
-[ ] 形状可转换为图片,避免嵌入字体时文件太大.
-[ ] 右键点击图形,除通用操作(delete..)外,可给图形注册自定义操作.比如ungroup. 选择下级...
-[ ] 双击图形,在不同位置,触发不同操作.形状可自定义操作.形状内文字编辑器,可多个.存储为子元素.不只限一个.
-[ ] 支持解析yed布局算法
-[ ] 支持粘贴各种文件格式. 库等
-[ ] **可拖入html.可用于原型图设计**
-[ ] 图形可自定义控制按钮,比如原功能插入布局中的树等操作.选中一个后,可控制子节点布局.CreateGraphDialog
-[ ] 拖动外部内容到编辑器,形状,文字,
-[ ] 连续键功能,在上方提示.如选中形状后,显示快捷键列表 a <-  w ^ s d
-[ ] 针对当前图形,快速插入,方向,图形,快捷键提示,参考原始shapePicker
-[ ] 全局库元素默认大小,各库默认大小.方便使用时频繁调整大小
-[ ] 拖动图形到线上,自动插入并连接.
-[ ] 下载自定义字体,存储到indexdb. 列表存在 config. indexdb.
-[ ] 实现自动类似网页布局,flex,grid  实现原型图功能
-[ ] 大屏设计?

# 心得
* ts-node
```javascript
import * as tsNode from 'ts-node';

// 初始化 ts-node 编译器
tsNode.register({
  transpileOnly: true,
  compilerOptions: {
    module: 'commonjs'
  }
});
```
* prototype继承class 需要使用
```javascript


const instance = Reflect.construct(mxShape, [], new.target || this.constructor);
instance.age = age;
return instance;
```

* chrome启动调试
```text
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir="/Users/wuwenjun/Documents/temp"
```


# 键盘快捷键配置功能

本模块提供了类似 VSCode 的键盘快捷键配置功能，允许用户自定义应用程序中各种操作的快捷键。

## 功能特点

- 提供图形化界面配置所有支持的操作快捷键
- 支持组合键（如 Ctrl+C、Alt+Shift+S 等）
- 快捷键配置自动保存到本地存储
- 支持恢复默认快捷键配置
- 支持搜索操作以快速找到要配置的快捷键

## 文件结构

- `ShortcutModule.ts`: 核心模块，管理快捷键配置、默认值和持久化
- `KeyboardShortcutDialog.vue`: 快捷键配置对话框组件
- `ShortcutMgr.ts`: 键盘事件监听器，处理快捷键触发
- `test-shortcut.ts`: 功能测试文件
- `README.md`: 本文档

## 使用方法

### 打开快捷键配置

1. 点击顶部菜单中的「设置」
2. 选择「键盘快捷键」选项

### 配置快捷键

1. 在快捷键配置对话框中，找到要修改的操作
2. 点击当前的快捷键或「未设置」按钮
3. 按下新的快捷键组合
4. 快捷键会自动保存

### 清除快捷键

1. 点击操作右侧的 × 按钮
2. 快捷键会被清除并恢复为默认值（如果有）

### 重置所有快捷键

1. 点击对话框底部的「重置为默认」按钮
2. 确认操作后，所有快捷键将恢复为默认配置

## 支持的操作

系统支持为 ActionEnum 中定义的所有操作配置快捷键，包括但不限于：

- 文件操作（新建、打开、保存、导出等）
- 编辑操作（剪切、复制、粘贴等）
- 视图操作（适应窗口、重置视图、智能适应等）
- 面板操作（显示/隐藏左侧面板、右侧面板等）

## 默认快捷键

默认快捷键配置如下：

## 注意事项

- 某些快捷键可能与浏览器默认快捷键冲突，请选择合适的替代组合
- 不要在输入框中测试快捷键，系统会自动跳过输入框中的快捷键触发
- 快捷键配置保存在浏览器的本地存储中，清除浏览器数据会丢失自定义配置

## 技术实现细节

- 使用 Vue 3 和 TypeScript 实现组件和逻辑
- 使用 @vueuse/core 的 useMagicKeys 功能监听键盘事件
- 使用 localStorage 持久化用户配置
- 采用单例模式实现快捷键处理器，确保全局唯一实例