@mx-sose-front/mx-sose-graph 1.0.0

package/src/store/index.ts

@@ -0,0 +1,8 @@
+// import { createPinia } from 'pinia'
+// import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+// 创建 Pinia 实例
+// export const pinia = createPinia()
+// pinia.use(piniaPluginPersistedstate)
+// 导出所有 store
+export { useGraphStore } from './graphStore'
+export { eventBus } from './eventBus'

package/src/style/index.css

@@ -0,0 +1 @@
+@import './tailwind.css';

package/src/style/tailwind.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 自定义组件样式 */
+@layer components {
+  .btn-primary {
+    @apply bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
+  }
+  
+  .btn-secondary {
+    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
+  }
+  
+  .card {
+    @apply bg-white rounded-lg shadow-md border border-gray-200 p-4;
+  }
+  
+  .input-field {
+    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
+  }
+}
+
+/* 自定义工具类 */
+@layer utilities {
+  .text-shadow {
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
+  .text-shadow-lg {
+    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
+}

package/src/types/index.ts

@@ -0,0 +1,200 @@
+// 边界位置接口
+export interface Bounds {
+  x?: number | undefined
+  y?: number | undefined
+  width?: number | undefined
+  height?: number | undefined
+}
+export type Padding = number | { top: number; right: number; bottom: number; left: number };
+// 样式接口
+export interface Style {
+  fontSize?: number
+  fontFamily?: string
+  fontWeight?: string
+  color?: string
+  backgroundColor?: string
+  borderColor?: string
+  borderWidth?: number
+  borderRadius?: number
+  padding?: Padding
+  margin?: number
+  zIndex?: number//元素层级
+  canvasBorderWidth?: number// 画布边框粗细
+  canvasBorderColor?: string// 画布边框颜色
+  canvasBorderStyle?: 'dashed' | 'solid' | 'dotted'// 画布边框线条形状
+  canvasNameFontSize?: number// 画布名称字体大小
+  canvasNameFontFamily?: string// 画布名称字体
+  canvasNameFontColor?: string// 画布名称字体颜色
+  gradientLeftColor?: string // 渐变左颜色
+  gradientRightColor?: string // 渐变右颜色
+  textAnchor?: string // pin文本对齐方式
+  dominantBaseline?: string // pin文本基线
+}
+
+// 名称对象接口
+export interface NameObject {
+  name: string
+  value?: string
+  type?: string
+  defaultValue?: string
+  [key: string]: any
+}
+
+// 标签值接口
+export interface TaggedValueLabel {
+  id: string
+  modelId: string
+  modelName: string
+  names: string // JSON字符串，包含NameObject
+  name: string
+  nameBounds?: string // JSON字符串，包含Bounds
+  nameStyle?: string // JSON字符串，包含Style
+}
+
+// 隔间组件接口
+export interface Comparent {
+  keywords: string
+  keywordsBounds?: string // JSON字符串，包含Bounds
+  keywordsStyle?: string // JSON字符串，包含Style
+  comparentLabels: TaggedValueLabel[]
+}
+
+export interface Waypoint {
+  x: number
+  y: number
+}
+
+// 场景菜单接口
+export interface scenarioMenu {
+  [key: string]: any
+}
+
+// 图元接口
+export interface Shape {
+  id: string // 图元ID
+  diagramId: string // 画布ID
+  parenShapeId: string  // 父图元ID(图元嵌套)
+  shapeKey: string // 具体图元类型（即模型类型）
+  shapeType: 'shape' | 'edge' | 'pin' | 'diagram' // 图形大类
+  bounds: Bounds // 整体图元位置大小
+  style?: Style // 图元样式，JSON字符串
+  keywords: string // 关键字
+  keywordsBounds?: Bounds // 关键字位置，JSON字符串
+  keywordsStyle?: Style // 关键字位置样式，JSON字符串
+  icon?: string // 图标文件名
+  modelId: string // 图元对应模型id
+  modelName: string // 图元对应的模型名称
+  names: string // 模型名称拼接对象，JSON字符串
+  name: string // 图元显示名称（根据模型拼接）
+  nameBounds?: Bounds // 名称位置，JSON字符串
+  nameStyle?: Style // 名称样式，JSON字符串
+  direction?: string // 方向（例如端口）
+  sourceId?: string // 关系源图元id
+  targetId?: string // 关系目标图元id
+  waypointId?: string // 关系点位id
+  waypoints?: Waypoint[] // 关系点位，JSON字符串
+  showKeywords: boolean // 是否展示关键字
+  showIcon: boolean // 是否展示图标
+  showName: boolean // 是否展示名称
+  showTaggedValues: boolean // 是否展示拓展值
+  showComparents: boolean // 是否展示隔间组件
+  taggedValueLabels?: TaggedValueLabel[] // 标签值数组
+  comparents?: CompartmentRecord[] // 隔间组件数组
+  meta?: any; // 高亮信息
+  scenarioMenus?: scenarioMenu[],
+  inert?: boolean | true  // 惰性可见（不可见/不渲染/不拾取）
+  sourceModels?: string[] // 允许的源图元数组
+  targetModels?: string[] // 允许的目标图元数组
+  modelTypePropertyId: string // 设置类型
+  targetCreateModel?: string // 允许的目标图元字符串
+  sourceModelId?: string // 允许的源图元字符串
+  isMovableComparents: boolean//是否能拖出隔间
+}
+export interface CompartmentRecord {
+  bounds: Bounds                    // 整个父隔间的大小位置
+  modelId: string               // 模型 id（例如区域 ID）
+  modelName: string             // 模型名称
+  comparentShapes: Shape[]        // 子图元“快照”（深拷贝，去 comparents 字段）
+}
+
+export interface scenarioMenu {
+  code: string,
+  name: string,
+  icon: string,
+  sourceModels: string[],
+  targetCreateModel: string,
+  targetModels: string[],
+}
+
+export interface Diagram {
+  id: string // 图元ID
+  diagramId: string // 画布ID
+  parenShapeId?: string // 父图元ID(图元嵌套)
+  shapeKey: string // 具体图元类型（即模型类型）
+  shapeType: 'shape' | 'edge' | 'port' | 'diagram' // 图形大类
+  bounds: Bounds // 整体图元位置大小
+  keywords: string // 关键字
+  keywordsBounds?: Bounds // 关键字位置，JSON字符串
+  keywordsStyle?: Style // 关键字位置样式，JSON字符串
+  icon?: string // 图标文件名
+  modelId: string // 图元对应模型id
+  modelName: string // 图元对应的模型名称
+  names: string // 模型名称拼接对象，JSON字符串
+  name: string // 图元显示名称（根据模型拼接）
+  nameBounds?: Bounds // 名称位置，JSON字符串
+  nameStyle?: Style // 名称样式，JSON字符串
+  direction?: string // 方向（例如端口）
+  sourceId?: string // 关系源图元id
+  targetId?: string // 关系目标图元id  waypoints?: Waypoint[] // 关系点位，JSON字符串
+  showKeywords: boolean // 是否展示关键字
+  showIcon: boolean // 是否展示图标
+  showName: boolean // 是否展示名称
+  showTaggedValues: boolean // 是否展示拓展值
+  showComparents: boolean // 是否展示隔间组件
+  taggedValueLabels?: TaggedValueLabel[] // 标签值数组
+  comparents?: Comparent[] // 隔间组件数组
+  shapeArr?: Shape[]
+}
+
+// 事件类型
+export interface GraphEvents {
+  onShapeClick?: (node: Shape, event: MouseEvent) => void
+  onShapeDoubleClick?: (node: Shape, event: MouseEvent) => void
+  onEdgeClick?: (edge: Shape, event: MouseEvent) => void
+  onDiagramClick?: (event: MouseEvent) => void
+  onZoom?: (scale: number) => void
+  onPan?: (x: number, y: number) => void
+}
+// 嵌套使用
+export type NestingConfig = {
+  onlyUnderSameType?: string[]          // 作为“子”只能挂到同类型父上
+  disallowAsChild?: string[]            // 禁止当子
+  disallowAsParent?: string[]           // 禁止当父
+  allowedParents?: Record<string, string[]>  //  允许的父类型
+  allowedChildren?: Record<string, string[]> // 允许的子类型
+  rejectChildTypes?: Record<string, string[]>// 禁止的子类型
+  maxChildren?: Record<string, number>       //  最大子数量
+  /** 同类型是否禁止互相嵌套（全局） */
+  disallowSameTypeAll?: boolean
+  /**只对这些类型禁止“同类型互相嵌套”（按类型粒度） */
+  disallowSameType?: string[]
+}
+export type OwnerPayload = {
+  id: string;         // 子元素 modelId
+  ownerId: string;    // 父元素 modelId
+  ownerType: string;  // 父元素 shapeKey
+  shapeId?: string
+}
+export interface CheckNested {
+  modelType: string;//当前模型类型
+  modelShapeId?: string;//当前模型图元ID
+  targetModelType: string;//目标模型类型
+  targetModelShapeId: string;//目标模型图元ID
+  diagramCode: string;//目标模型图元所在图表类型
+  modelId: string;//当前模型id
+}
+//修改图元大小
+export interface ShapeSizeUpdatePayload {
+  id: string
+  bounds: string   // JSON string
+}

package/src/utils/autoExpandParent.ts

@@ -0,0 +1,94 @@
+import type { Shape, } from '@/types/index'
+import { expandParentToFitChildBounds } from './containers' 
+import { isCompartment } from './compartment';
+export type Rect = { x: number; y: number; width: number; height: number }
+/**
+ * 扩父工具入参
+ */
+export interface ExpandByChildOptions {
+  /** 当前画布上的所有图元（store 里的 shapes.value） */
+  shapes: Shape[]
+  /** 子元素完整数据（至少要有 id / parenShapeId / bounds） */
+  child: Shape
+  /** 更新图元的统一方法（store 里的 updateShape） */
+  updateShape: (id: string, updates: Partial<Shape>) => void
+}
+
+/**
+ * 扩父工具返回值
+ */
+export interface ExpandByChildResult {
+  /** 是否真的发生了扩父（如果父本来就够大，这里是 false） */
+  expanded: boolean
+  /** 所有被本次扩父影响到的图元 id（父、本父、祖先父等） */
+  affectedIds: string[]
+}
+
+/**
+ * 通过“子元素数据”来触发扩父：
+ * - 从 child.parenShapeId 中取出父元素 id
+ * - 找到父元素 shape
+ * - 调用 expandParentToFitChildBounds，只改前端 store
+ * - 返回 expanded + affectedIds，供 store 再去发事件 / 调接口
+ */
+export function expandParentByChild(
+  options: ExpandByChildOptions,
+): ExpandByChildResult {
+  const { shapes, child, updateShape } = options
+
+  // 1. 子元素必须有父 id 和 bounds，否则不需要扩父
+  const parentId = (child as any).parenShapeId as string | undefined | null
+  if (!parentId) {
+    return { expanded: false, affectedIds: [] }
+  }
+
+  const bounds = child.bounds as Rect | undefined
+  if (!bounds) {
+    return { expanded: false, affectedIds: [] }
+  }
+
+  // 2. 查找父元素
+  const parent = shapes.find(s => s.id === parentId)
+  if (!parent) {
+    return { expanded: false, affectedIds: [] }
+  }
+
+  // 3. 调用你原来的扩父核心方法（只修改 store 中父/祖先的 bounds）
+  const { expanded, affectedIds } = expandParentToFitChildBounds(
+    shapes,
+    parent,
+    child.id,
+    bounds,
+    updateShape,
+  )
+
+  // 4. 直接把结果透传给调用方（store 再决定要不要发事件、调接口）
+  return { expanded, affectedIds }
+}
+// 根据“父是隔间”的场景，在父移动之后，重新检查它所有子是否压到头部 / 内容区
+// 若是，则尝试再次扩父（此时 parent.y 已经离开画布顶部，availUp 可能 > 0）
+export function autoExpandCompartmentAfterMoved(
+  shapes: Shape[],
+  parentId: string,
+  updateShape: (id: string, updates: Partial<Shape>) => void,
+) {
+  const parent = shapes.find(s => s.id === parentId)
+  if (!parent || !isCompartment(parent)) return
+  // 找出所有“挂在这个隔间下面、并且有 bounds 的子元素”
+  const children = shapes.filter(
+    c => (c as any).parenShapeId === parent.id && c.bounds
+  )
+
+  for (const child of children) {
+    const rect = child.bounds as Rect
+    // 这里会走你写的 "if (isCompartment(parent)) { ... }" 逻辑
+    // 当 parent 已经从画布顶部拖下来，availUp 就 > 0，有空间继续向上扩
+    expandParentToFitChildBounds(
+      shapes,
+      parent,
+      child.id,
+      rect,
+      updateShape,
+    )
+  }
+}

package/src/utils/colorUtils.ts

@@ -0,0 +1,137 @@
+/**
+ * 颜色转换与明度调整工具函数
+ */
+
+export interface HSL {
+  h: number
+  s: number
+  l: number
+}
+
+/**
+ * 调整颜色明度（使颜色变深或变浅）
+ * @param color 原始颜色（支持hex或rgb格式）
+ * @param percent 调整百分比（正值增加明度-变浅，负值降低明度-变深）
+ * @returns 调整后的颜色（hex格式）
+ */
+export function adjustColorLightness(color: string, percent: number): string {
+  const hsl = colorToHsl(color)
+  if (!hsl) return color
+
+  // 调整明度并限制在10%-90%范围（避免过暗或过亮）
+  let newLightness = hsl.l + percent
+  newLightness = Math.max(10, Math.min(90, newLightness))
+  
+  return hslToRgb(hsl.h, hsl.s, newLightness)
+}
+
+/**
+ * 将颜色字符串转换为HSL格式
+ * @param color 颜色字符串（hex或rgb格式）
+ * @returns HSL对象或null（转换失败时）
+ */
+export function colorToHsl(color: string): HSL | null {
+  // 处理十六进制颜色（#fff 或 #ffffff）
+  if (color.startsWith('#')) {
+    let hex = color.slice(1)
+    // 处理3位简写形式（#fff → #ffffff）
+    if (hex.length === 3) {
+      hex = hex.split('').map(c => c + c).join('')
+    }
+    
+    const r = parseInt(hex.slice(0, 2), 16) / 255
+    const g = parseInt(hex.slice(2, 4), 16) / 255
+    const b = parseInt(hex.slice(4, 6), 16) / 255
+    
+    return rgbToHsl(r, g, b)
+  }
+  
+  // 处理rgb颜色（rgb(255,255,255)）
+  if (color.startsWith('rgb')) {
+    const match = color.match(/rgb\(?(\d+),\s*(\d+),\s*(\d+)\)?/)
+    if (match) {
+      const r = parseInt(match[1]) / 255
+      const g = parseInt(match[2]) / 255
+      const b = parseInt(match[3]) / 255
+      return rgbToHsl(r, g, b)
+    }
+  }
+  
+  return null
+}
+
+/**
+ * RGB转HSL颜色空间
+ * @param r 红色通道（0-1）
+ * @param g 绿色通道（0-1）
+ * @param b 蓝色通道（0-1）
+ * @returns HSL对象
+ */
+export function rgbToHsl(r: number, g: number, b: number): HSL {
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  let h = 0, s = 0
+  const l = (max + min) / 2
+
+  if (max !== min) {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+    
+    switch (max) {
+      case r: h = (g - b) / d + (g < b ? 6 : 0); break
+      case g: h = (b - r) / d + 2; break
+      case b: h = (r - g) / d + 4; break
+    }
+    
+    h *= 60
+  }
+
+  return { 
+    h: Math.round(h), 
+    s: Math.round(s * 100), 
+    l: Math.round(l * 100) 
+  }
+}
+
+/**
+ * HSL转RGB颜色空间（返回hex格式）
+ * @param h 色相（0-360）
+ * @param s 饱和度（0-100）
+ * @param l 明度（0-100）
+ * @returns 十六进制颜色字符串
+ */
+export function hslToRgb(h: number, s: number, l: number): string {
+  h /= 360
+  s /= 100
+  l /= 100
+  
+  let r, g, b
+
+  if (s === 0) {
+    r = g = b = l // 灰度
+  } else {
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0) t += 1
+      if (t > 1) t -= 1
+      if (t < 1/6) return p + (q - p) * 6 * t
+      if (t < 1/2) return q
+      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6
+      return p
+    }
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+    const p = 2 * l - q
+
+    r = hue2rgb(p, q, h + 1/3)
+    g = hue2rgb(p, q, h)
+    b = hue2rgb(p, q, h - 1/3)
+  }
+
+  // 转换为十六进制格式
+  const toHex = (x: number) => {
+    const hex = Math.round(x * 255).toString(16)
+    return hex.length === 1 ? '0' + hex : hex
+  }
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}