无限画布 - 代码路径与模块映射
本文档详细列出无限画布相关的所有代码模块及其路径，方便快速定位和查阅。
📦 核心包概览
编辑器代码主要分布在以下目录：
domains/editor/
├── packages/
│ ├── editor/ ← 核心编辑器引擎（最重要）
│ ├── design/ ← 设计业务层
│ ├── common/ ← 通用工具库
│ ├── ai/ ← AI 相关功能
│ ├── mobile/ ← 移动端适配
│ └── foundations/ ← 基座层
├── extensions/ ← 扩展插件
├── apps/ ← 应用入口
└── third-party/ ← 第三方库🎯 无限画布核心模块
1. infinite-renderer（渲染核心）
路径：
domains/editor/packages/editor/infinite-renderer/职责：无限画布的渲染引擎核心，负责将数据模型转换为 PixiJS 可渲染对象
infinite-renderer/src/
├── viewport/ # 视口管理
│ ├── viewport.ts # Viewport 核心类
│ └── index.ts
│
├── surfaces/ # 画布表面层
│ ├── surface.ts # Surface 抽象基类 ⭐
│ ├── board-surface.ts # 无限画布模式
│ ├── poster-surface.ts # 海报模式
│ ├── flow-surface.ts # 长图模式
│ ├── event-boundary.ts # 事件边界/碰撞检测 ⭐
│ └── processors/ # 处理器
│ ├── processor.ts # Processor 抽象基类
│ ├── board-processor.ts # 白板处理器
│ └── poster-processor.ts # 海报处理器
│
├── vm-engine/ # 视图模型引擎
│ ├── vm-engine.ts # VmEngine 核心类 ⭐
│ └── index.ts
│
├── vms/ # 视图模型（30+ 种元素）
│ ├── base/ # 基类
│ │ ├── base-vm.ts # 最基础的 VM
│ │ ├── base-container-vm.ts # 容器基类
│ │ ├── base-element-vm.ts # 元素基类 ⭐
│ │ ├── base-group-element-vm.ts
│ │ ├── graphics-element-vm.ts
│ │ ├── watermark-vm.ts # 水印
│ │ └── image/ # 图片相关
│ │ ├── base-image-vm.ts
│ │ ├── image-content-vm.ts
│ │ ├── dynamic-image.ts
│ │ └── gpu-blender/ # GPU 混合
│ │
│ ├── page/ # 页面
│ │ └── page-vm.ts # PageVm ⭐
│ │
│ ├── layout/ # 画板
│ │ ├── layout-vm.ts # LayoutVm
│ │ ├── layout-layer.ts
│ │ └── layout-background.ts
│ │
│ ├── image/ # 图片元素
│ │ ├── image-vm.ts # ImageVm
│ │ ├── mask-vm.ts # 蒙版
│ │ └── canvas-mask-vm.ts
│ │
│ ├── text/ # 文本元素
│ │ ├── text-vm.ts # TextVm
│ │ └── text-sprite.ts
│ │
│ ├── shape/ # 形状元素
│ │ └── shape-vm.ts # ShapeVm
│ │
│ ├── path/ # 路径元素
│ │ └── path-vm.ts # PathVm
│ │
│ ├── svg/ # SVG 元素
│ │ └── svg-vm.ts # SvgVm
│ │
│ ├── group/ # 组元素
│ │ └── group-vm.ts # GroupVm
│ │
│ ├── connector/ # 连接线
│ │ └── connector-vm.ts # ConnectorVm
│ │
│ ├── table/ # 表格
│ │ └── table-vm.ts # TableVm
│ │
│ ├── video/ # 视频
│ │ └── video-vm.ts # VideoVm
│ │
│ ├── chart/ # 图表
│ │ └── chart-vm.ts # ChartVm
│ │
│ ├── magnifier/ # 放大镜
│ │ └── magnifier-vm.ts # MagnifierVm
│ │
│ ├── three-text/ # 3D 文字
│ │ └── three-text-vm.ts # ThreeTextVm
│ │
│ ├── effect-text/ # 特效文字
│ │ └── effect-text-vm.ts # EffectTextVm
│ │
│ ├── magic-brush/ # 魔法画笔
│ │ └── magic-brush-vm.ts # MagicBrushVm
│ │
│ └── fallback/ # 降级处理
│ └── fallback-vm.ts # FallbackVm
│
├── common/ # 通用工具
│ ├── transform.ts # 矩阵变换 ⭐
│ ├── hit-test.ts # 碰撞检测
│ ├── anchors.ts # 锚点计算
│ ├── anchor-points.ts # 锚点数据
│ └── aspects/ # 切面
│ ├── tap.ts
│ ├── prefer-image.ts
│ └── hidden-on-editing.ts
│
├── context/ # 上下文
│ ├── context.ts # Context 类
│ ├── texture-reuse.ts # 纹理复用
│ └── adaptor/
│ └── model-adaptor.ts
│
├── extractor/ # 导出器
│ ├── extractor.ts # Extractor
│ ├── picker.ts # Picker
│ └── helpers.ts
│
├── plugins/ # 渲染插件
│ ├── plugin-system.ts # 插件系统
│ └── background/ # 背景插件
│
├── extends/ # 扩展类
│ ├── async-sprite.ts # 异步精灵
│ ├── canvas-sprite.ts # Canvas 精灵
│ ├── dynamic-sprite.ts # 动态精灵
│ ├── oriented-rectangle.ts # 有向矩形
│ └── safe-sprite.ts # 安全精灵
│
├── types/ # 类型定义
│ ├── surface.ts
│ ├── viewport.ts
│ ├── element-vm.ts
│ ├── event-boundary.ts
│ └── ...
│
└── utils/ # 工具函数
├── bounds.ts # 包围盒计算
├── math.ts # 数学工具
└── unique-id.ts # ID 生成2. infinite-plugins（渲染插件）
路径：
domains/editor/packages/editor/infinite-plugins/职责：提供 40+ 个渲染层插件，扩展画布功能
infinite-plugins/src/plugins/
├── viewport-plugin/ # 视口控制 ⭐
│ ├── viewport-plugin.tsx # 插件入口
│ ├── commands/
│ │ ├── zoom.ts # 缩放命令 ⭐
│ │ └── index.ts
│ └── hooks/
│ ├── use-viewport.ts # 视口状态
│ └── use-gesture.ts # 手势处理 ⭐
│
├── guide-plugin/ # 对齐参考线
│ └── guide-plugin.ts
│
├── ruler-plugin/ # 标尺
│ └── ruler-plugin.ts
│
├── hand-plugin/ # 抓手工具
│ └── hand-plugin.ts
│
├── hover-plugin/ # 悬停效果
│ └── hover-plugin.ts
│
├── highlight-plugin/ # 高亮效果
│ └── highlight-plugin.ts
│
├── outline-plugin/ # 轮廓线
│ └── outline-plugin.ts
│
├── transform-plugin/ # 元素变换
│ └── transform-plugin.ts
│
├── scrollbar-plugin/ # 滚动条
│ └── scrollbar-plugin.ts
│
├── connector-plugin/ # 连接线
│ └── connector-plugin.ts
│
├── magic-brush/ # 魔法画笔
│ └── ...
│
├── mosaic-plugin/ # 马赛克
│ └── mosaic-plugin.ts
│
├── animation-plugin/ # 动画
│ └── animation-plugin.ts
│
├── auto-scroll-plugin/ # 自动滚动
│ └── auto-scroll-plugin.ts
│
├── bin-packing-plugin/ # 自动排版
│ └── bin-packing-plugin.ts
│
├── hit-test-plugin/ # 碰撞测试
│ └── hit-test-plugin.ts
│
├── loader-plugin/ # 加载器
│ └── loader-plugin.ts
│
├── metrics-plugin/ # 度量
│ └── metrics-plugin.ts
│
└── ... (更多插件)3. infinite-elements（元素服务）
路径：
domains/editor/packages/editor/infinite-elements/职责：各类元素的业务逻辑和 Vue 渲染组件
infinite-elements/src/
├── renderer.ts # 渲染器入口
├── page/ # 页面
│ ├── service.ts
│ ├── renderer.tsx
│ └── components/
│ └── container.vue # 无限画布容器
│
├── layout/ # 画板
│ ├── service.ts
│ └── index.ts
│
├── image/ # 图片
│ ├── service.ts
│ └── index.ts
│
├── text/ # 文本
│ ├── service.ts
│ └── index.ts
│
├── shape/ # 形状
│ ├── service.ts
│ ├── renderer.ts
│ └── shape-text-editor/
│
├── path/ # 路径
│ ├── service.ts
│ └── index.ts
│
├── svg/ # SVG
│ ├── service.ts
│ └── index.ts
│
├── group/ # 组
│ ├── service.ts
│ └── index.ts
│
├── table/ # 表格
│ ├── service.ts
│ └── renderer.ts
│
├── connector/ # 连接线
│ ├── service.ts
│ └── utils.ts
│
├── video/ # 视频
│ ├── service.ts
│ └── index.ts
│
├── magnifier/ # 放大镜
│ ├── service.ts
│ └── render.ts
│
├── magic-brush/ # 魔法画笔
│ ├── service.ts
│ └── renderer.ts
│
└── ... (更多元素)4. framework（编辑器框架）
路径：
domains/editor/packages/editor/framework/职责：编辑器核心框架，包括插件系统、服务系统、视口管理
framework/src/
├── core/
│ ├── framework/ # 框架核心
│ │ ├── framework.ts # 框架类
│ │ └── create.ts # 创建编辑器
│ │
│ ├── viewport/ # 视口管理
│ │ └── viewport.ts # Viewport 类 ⭐
│ │
│ ├── plugin/ # 插件系统
│ │ ├── plugin-manager.ts # 插件管理器
│ │ └── define.ts # 插件定义
│ │
│ ├── service/ # 服务系统
│ │ └── service-manager.ts # 服务管理器
│ │
│ ├── renderer/ # 渲染管理
│ │ └── renderer-manager.ts
│ │
│ ├── y-model/ # Yjs 协同
│ │ ├── binding.ts
│ │ └── apply-yjs.ts
│ │
│ └── methods/ # 编辑器方法
│ ├── element/ # 元素操作
│ │ ├── element.ts
│ │ └── utils/
│ ├── page.ts # 页面操作
│ ├── snapshot.ts # 快照
│ └── data-binding/ # 数据绑定
│
├── containers/ # 容器组件
│ ├── editor-infinite.tsx # 无限画布容器 ⭐
│ ├── editor-canvas.tsx # Canvas 容器
│ └── editor-flow.tsx # 长图容器
│
├── editor/ # 编辑器入口
│ └── editor.js
│
└── utils/ # 工具函数
├── transform.js # 变换工具
├── resize.ts # 尺寸调整
└── ...5. models（数据模型）
路径：
domains/editor/packages/editor/models/职责：定义编辑器的数据模型类
models/src/
├── base/
│ ├── base-element-model.ts # 元素基类
│ ├── group-base-element-model.ts
│ └── page-base-model.ts # 页面基类
│
├── elements/
│ ├── image-element-model.ts # 图片模型
│ ├── text-element-model.ts # 文本模型
│ ├── shape-element-model.ts # 形状模型
│ ├── path-element-model.ts # 路径模型
│ ├── group-element-model.ts # 组模型
│ ├── layout-model.ts # 画板模型
│ └── ...
│
└── page/
└── page-model.ts # 页面模型6. plugins（业务插件）
路径：
domains/editor/packages/editor/plugins/职责：编辑器业务层插件
plugins/src/
├── edit-mode-plugin/ # 编辑模式
├── resize-plugin/ # 尺寸调整
├── rotate-plugin/ # 旋转
├── drag-plugin/ # 拖拽
├── copy-paste-plugin/ # 复制粘贴
├── undo-redo-plugin/ # 撤销重做
├── selection-plugin/ # 选择
├── align-plugin/ # 对齐
├── layer-plugin/ # 图层
├── lock-plugin/ # 锁定
├── group-plugin/ # 成组
├── crop-plugin/ # 裁剪
├── mask-plugin/ # 蒙版
└── ...7. utils（工具库）
路径：
domains/editor/packages/editor/utils/职责：通用工具函数
utils/src/
├── math/ # 数学工具
│ ├── matrix.ts # 矩阵运算
│ ├── vector.ts # 向量运算
│ └── geometry.ts # 几何计算
│
├── animation/ # 动画工具
│ └── animate.ts # 动画函数
│
├── lru-cache/ # LRU 缓存
│ └── index.ts
│
├── image/ # 图片工具
│ └── ...
│
└── ...🔗 其他相关模块
design 包（设计业务层）
packages/design/
├── services/ # 服务层
│ └── content-version/ # 内容版本
│ └── worker/ # Worker 协同
│
├── business-ui/ # 业务 UI 组件
│ └── src/compositions/ # 组合式函数
│
├── ai-chat-vue/ # AI 对话（Vue）
├── ai-chat-react/ # AI 对话（React）
└── ...common 包（通用库）
packages/common/
├── resource-manager/ # 资源管理
│ └── src/browser/worker/ # Worker 池
│ ├── image-bitmap-worker-manager.ts ⭐
│ └── image-bitmap-worker.ts
│
├── drawing-masks/ # 绘图蒙版
│ └── src/utils/canvas.ts # Canvas 工具
│
├── logs/ # 日志系统
├── lru-cache/ # LRU 缓存
├── scheduler/ # 调度器
└── ...📊 功能-代码映射表
| 功能 | 核心文件 | 包名 |
|---|---|---|
| 视口缩放 | viewport-plugin/commands/zoom.ts | @editor/infinite-plugins |
| 手势处理 | viewport-plugin/hooks/use-gesture.ts | @editor/infinite-plugins |
| 视口管理 | framework/src/core/viewport/viewport.ts | @editor/framework |
| 画布表面 | infinite-renderer/src/surfaces/surface.ts | @editor/infinite-renderer |
| 碰撞检测 | infinite-renderer/src/surfaces/event-boundary.ts | @editor/infinite-renderer |
| 视图引擎 | infinite-renderer/src/vm-engine/vm-engine.ts | @editor/infinite-renderer |
| 元素基类 | infinite-renderer/src/vms/base/base-element-vm.ts | @editor/infinite-renderer |
| 矩阵变换 | infinite-renderer/src/common/transform.ts | @editor/infinite-renderer |
| 页面 VM | infinite-renderer/src/vms/page/page-vm.ts | @editor/infinite-renderer |
| 图片 VM | infinite-renderer/src/vms/image/image-vm.ts | @editor/infinite-renderer |
| 文本 VM | infinite-renderer/src/vms/text/text-vm.ts | @editor/infinite-renderer |
| 连接线 VM | infinite-renderer/src/vms/connector/connector-vm.ts | @editor/infinite-renderer |
| 放大镜 VM | infinite-renderer/src/vms/magnifier/magnifier-vm.ts | @editor/infinite-renderer |
| 对齐参考线 | infinite-plugins/src/plugins/guide-plugin/ | @editor/infinite-plugins |
| 标尺 | infinite-plugins/src/plugins/ruler-plugin/ | @editor/infinite-plugins |
| 抓手工具 | infinite-plugins/src/plugins/hand-plugin/ | @editor/infinite-plugins |
| 轮廓线 | infinite-plugins/src/plugins/outline-plugin/ | @editor/infinite-plugins |
| 纹理复用 | infinite-renderer/src/context/texture-reuse.ts | @editor/infinite-renderer |
| 图片导出 | infinite-renderer/src/extractor/extractor.ts | @editor/infinite-renderer |
| Worker 池 | resource-manager/src/browser/worker/ | @editor/resource-manager |
| 动画系统 | utils/src/animation/animate.ts | @editor/utils |
🏷️ 包名与路径对照
| npm 包名 | 源码路径 |
|---|---|
@editor/infinite-renderer | packages/editor/infinite-renderer/ |
@editor/infinite-plugins | packages/editor/infinite-plugins/ |
@editor/infinite-elements | packages/editor/infinite-elements/ |
@editor/framework | packages/editor/framework/ |
@editor/models | packages/editor/models/ |
@editor/plugins | packages/editor/plugins/ |
@editor/utils | packages/editor/utils/ |
@editor/events | packages/editor/events/ |
@design/types | packages/design/types/ |
@design/services | packages/design/services/ |
@editor/resource-manager | packages/common/resource-manager/ |
🎨 渲染引擎依赖
@piso/piso-js ← PixiJS 定制版（核心渲染引擎）
├── @piso/core ← 核心模块（Texture, Matrix, Point 等）
├── @piso/display ← 显示模块（Container, DisplayObject）
├── @piso/graphics ← 图形模块（Graphics）
├── @piso/sprite ← 精灵模块（Sprite）
├── @piso/math ← 数学模块（Rectangle, Polygon）
└── @piso/app ← 应用模块（Application）📝 快速定位技巧
- 找视口相关代码：搜索
viewport、zoom、pan - 找元素渲染代码：在
infinite-renderer/src/vms/下找对应元素 - 找碰撞检测代码：
event-boundary.ts、hit-test.ts - 找坐标转换代码：
transform.ts、getLocalPoint、getGlobalPoint - 找插件代码：
infinite-plugins/src/plugins/下按功能名找
📅 更新时间：2026-01-27