MX Sose Graph

一个专为体系工程建模设计的Vue3图可视化库，提供丰富的图形组件、交互功能和数据管理能力。

特性

- 🎯 Vue3 原生支持 - 基于Vue3 Composition API和Pinia状态管理
- 🎨 丰富的图形组件 - 支持体系工程建模、块状图、折角图、分割线等多种图形
- 🖱️ 强大的交互功能 - 支持拖拽、缩放、平移、选择、连接等操作
- 📐 智能布局管理 - 自动计算图形位置和连接关系
- 🔧 高度可配置 - 支持自定义样式、图标、标签值等
- 📦 TypeScript支持 - 完整的类型定义和类型安全
- 🚀 高性能渲染 - 优化的渲染性能和内存管理
- 🎪 事件驱动 - 基于事件总线的组件通信机制

安装

``bash
npm install mx-sose-graph

或

yarn add mx-sose-graph

或

pnpm add mx-sose-graph
`

快速开始

$3

`typescript
import { createApp } from 'vue'
import MxSoseGraphPlugin from 'mx-sose-graph'
import 'mx-sose-graph/dist/style.css'

const app = createApp(App)
app.use(MxSoseGraphPlugin)
app.mount('#app')
`

$3

`vue





`

核心组件

$3

主要的图形视图组件，负责渲染整个图形画布。

Props:
- addShapeData: Shape - 要添加的图形数据
- connectShapeData: Shape - 连接操作的图形数据

Events:
- shapes-property - 图形属性面板事件
- shapes-edit-name - 图形名称编辑事件
- connect-end - 连接完成事件

$3

#### StrategicTaxonomyDiagram
体系工程建模图组件，用于创建体系层级的图形表示。

#### Block
块状图形组件，支持自定义样式和内容。

#### DogEar
折角图形组件，常用于标注和提示。

#### DividingLine
分割线组件，用于图形区域的划分。

#### Edge
边连接组件，支持多种连接样式和路径。

状态管理

$3

基于Pinia的图形状态管理，提供以下功能：

`typescript
import { useGraphStore } from 'mx-sose-graph'

const graphStore = useGraphStore()

// 添加图形
graphStore.addShape(shape)

// 更新图形
graphStore.updateShape(shapeId, updates)

// 选择图形
graphStore.selectShape(shape)

// 删除图形
graphStore.removeShape(shapeId)

// 拖拽操作
graphStore.startDragShape(shapeId, pointer)
graphStore.moveDraggedShape(pointer)
graphStore.endDragShape()
`

类型定义

$3

`typescript
interface Shape {
id: string // 图形ID
diagramId: string // 画布ID
parenShapeId?: string // 父图形ID
shapeKey: string // 图形类型
shapeType: 'shape' | 'edge' | 'pin' | 'diagram'
bounds: Bounds // 位置和大小
style?: Style // 样式配置
keywords: string // 关键字
icon?: string // 图标
modelId: string // 模型ID
modelName: string // 模型名称
names: string // 名称JSON
name: string // 显示名称
showKeywords: boolean // 是否显示关键字
showIcon: boolean // 是否显示图标
showName: boolean // 是否显示名称
showTaggedValues: boolean // 是否显示标签值
showComparents: boolean // 是否显示隔间组件
taggedValueLabels?: TaggedValueLabel[]
comparents?: Comparent[]
meta: any // 元数据
}
`

$3

`typescript
interface Bounds {
x?: number
y?: number
width?: number
height?: number
}
`

$3

`typescript
interface Style {
fontSize?: number
fontFamily?: string
fontWeight?: string
color?: string
backgroundColor?: string
borderColor?: string
borderWidth?: number
borderRadius?: number
padding?: number | { top: number; right: number; bottom: number; left: number }
margin?: number
zIndex?: number
// 画布相关样式
canvasBorderWidth?: number
canvasBorderColor?: string
canvasBorderStyle?: 'dashed' | 'solid' | 'dotted'
canvasNameFontSize?: number
canvasNameFontFamily?: string
canvasNameFontColor?: string
// 渐变相关
gradientLeftColor?: string
gradientRightColor?: string
}
`

工具函数

$3

`typescript
import { registerShapes } from 'mx-sose-graph'

registerShapes({
StrategicTaxonomyDiagram,
Block,
DogEar,
DividingLine,
Edge
})
`

$3

`typescript
import { getShapeComponent, getShapeStyle } from 'mx-sose-graph'

// 获取图形组件
const component = getShapeComponent(shape)

// 获取图形样式
const style = getShapeStyle(shape)
`

开发

$3

`bash
npm install
`

$3

`bash
npm run dev
`

$3

`bash
npm run build:lib
`

$3

`bash
npm run type-check
`

$3

`bash
npm run lint
`

$3

`bash
npm run build:prod
`

项目结构

`
src/
├── components/ # 图形组件
│ ├── Diagram/ # 图表组件
│ ├── Shape/ # 图形组件
│ ├── Edge/ # 边组件
│ └── Port/ # 端口组件
├── store/ # 状态管理
│ ├── graphStore.ts # 图形状态
│ └── eventBus.ts # 事件总线
├── render/ # 渲染相关
│ ├── shape-registry.ts
│ └── shape-renderer.ts
├── utils/ # 工具函数
│ ├── diagram.ts # 图表工具
│ ├── drag.ts # 拖拽工具
│ ├── geom.ts # 几何计算
│ └── containers.ts # 容器管理
├── types/ # 类型定义
├── style/ # 样式文件
└── view/ # 视图组件
└── graph.vue # 主图形视图
``

许可证

MIT License

贡献

欢迎提交Issue和Pull Request！

更新日志

$3

- 初始版本发布
- 支持体系工程建模可视化
- 提供丰富的图形组件和交互功能
- 基于Vue3和Pinia的现代化架构