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

package/src/utils/zorder.ts

@@ -0,0 +1,39 @@
+// utils/zorder.ts
+import type { Shape } from '../types'
+// 统一规范某个 diagram 内所有图元的 zIndex（绘制层级）。
+export function normalizeZOrder(
+  shapes: Shape[],
+  diagramId: string | null,
+  updateShape: (id: string, patch: Partial<Shape>) => void,
+  baseZ = 1,
+  step  = 1
+) {
+  const nodes = shapes.filter(s => (s.diagramId ?? null) === (diagramId ?? s.diagramId))
+  const byId = new Map(nodes.map(n => [n.id, n]))
+
+  const isDiagram = (s?: Shape) => s?.shapeType?.toLowerCase?.() === 'diagram'
+  const getZ = (s?: Shape) => Number((s?.style as any)?.zIndex ?? 0)
+
+  const depthCache = new Map<string, number>()
+  const depthOf = (n: Shape): number => {
+    if (depthCache.has(n.id)) return depthCache.get(n.id)!
+    let d = 1
+    let cur: Shape | undefined = n
+    while (cur?.parenShapeId) {
+      const p = byId.get(cur.parenShapeId)
+      if (!p) break
+      if (isDiagram(p)) break  
+      d += 1
+      cur = p
+    }
+    depthCache.set(n.id, d)
+    return d
+  }
+
+  for (const n of nodes) {
+    const wantZ = baseZ + depthOf(n) * step
+    if (getZ(n) !== wantZ) {
+      updateShape(n.id, { style: { ...(n.style ?? {}), zIndex: wantZ } as any })
+    }
+  }
+}

package/src/view/graph.vue

@@ -0,0 +1,419 @@
+<template>
+  <div class="graph-view">
+    <!-- 画布内容区域 -->
+    <div class="diagram-content" ref="diagramContentRef" @wheel="handleWheel">
+      <div class="shapes-container" v-if="shapes.length > 0">
+        <component v-for="shape in shapes" :key="shape.id" :is="getShapeComponent(shape)" :shape="shape"
+          :style="getShapeStyle(shape)" @name-click="handleNameClick" @shape-click="handleShapeClick"
+          @edge-click="handleEdgeClick"
+          :is-selected="graphStore.selectedShape?.id === shape.id && shape.shapeType === 'edge'" ref="shapeComponents"
+          class="shape-element" :data-shape-id="shape.id"
+          @compartment-metrics="(m: any, shape: any) => onCompartmentMetrics(m, shape)" />
+      </div>
+
+      <!-- 交互层 - 整合了连接层逻辑 -->
+      <InteractionLayer v-if="diagramBounds" ref="interactionLayerRef" :connect-shape-data="connectShapeData"
+        :diagram-bounds="diagramBounds" :style="{
+          width: `${(diagramBounds?.width ?? 0) - 10}px`,
+          height: `${(diagramBounds?.height ?? 0) - 10}px`,
+          left: `${diagramBounds.x}px`,
+          top: `${diagramBounds.y}px`
+        }" :resShape="resShape" :edgeCheck="edgeCheck" @property-panel="handlePropertyPanel"
+        :actionButtonShapeDataId="actionButtonShapeId" @edit-name="handleEditName"
+        @update-shape="handleUpdateConnectShape" @diagramDoubleClick="handleDiagramDoubleClick"
+        @connect-end="handleConnectEnd" @action-button-click="handleActionButtonClick"
+        @model-type-property-id-button-click="handleModelTypePropertyIdButtonClick" :lines="props.lines"
+        :packages="props.packages" :diagram="props.diagram" :tagged-value-labels="props.taggedValueLabels"
+        @action-button-add="handleActionButtonAdd" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed, watch, nextTick, onUnmounted } from 'vue'
+import normalizeWheel from 'normalize-wheel-es'
+import InteractionLayer from '../components/InteractionLayer.vue'
+import type { Shape } from '../types'
+import { useGraphStore } from '../store/graphStore'
+// 导入组件
+import StrategicTaxonomyDiagram from '../components/Diagram/StrategicTaxonomyDiagram.vue'
+import ConceptualRole from '../components/Shape/ConceptualRole.vue'
+import Block from '../components/Shape/Block.vue'
+import DogEar from '../components/Shape/DogEar.vue'
+import Action from '../components/Shape/Action.vue'
+import Package from '../components/Shape/Package.vue'
+import DividingLine from '../components/Shape/DividingLine.vue'
+import Edge from '../components/Edge/Edge.vue'
+import Diagram from '../components/Shape/Diagram.vue'
+import ActivityAction from '../components/Shape/ActivityAction.vue'
+import Pin from '../components/Pin/Pin.vue'
+import Port from '../components/Pin/Port.vue'
+import { registerShapes } from "../render/shape-registry";
+import { getShapeComponent, getShapeStyle } from "../render/shape-renderer";
+import { ShapeConfig } from '../utils/diagram'
+import { setCompartmentZones, buildZones, setTaggedValueLabelsCache, setPackageTypesCache } from '../utils/compartment'
+import { eventBus } from "../store";
+
+registerShapes({
+  StrategicTaxonomyDiagram,
+  ConceptualRole,
+  Block,
+  DogEar,
+  DividingLine,
+  Package,
+  Edge,
+  Action,
+  ActivityAction,
+  Diagram,
+  Pin,
+  Port
+})
+const interactionLayerRef = ref<InstanceType<typeof InteractionLayer> | null>(null)
+const props = defineProps<{
+  addShapeData: Shape,
+  connectShapeData: Shape,
+  lines: String[],
+  packages: string[],
+  diagram: String[],
+  taggedValueLabels: string[],
+  actionButtonShapeId?: string,
+  classMetaTypes: string[],
+  edgeCheck: boolean,
+  pins: string[],
+  referentialAttributeModel: string[],
+  ports: string[],
+}>()
+
+const emit = defineEmits<{
+  (e: 'shapes-property', value: { selectedShape: Shape, showPropertyPanel: boolean }): void
+  (e: 'shapes-edit-name', value: { shape: Shape, newName: string }): void
+  (e: 'connect-end', value: { sourceId: string, targetId: string, sourcePoint: { x: number, y: number }, targetPoint: { x: number, y: number }, waypoints: Array<{ x: number, y: number }> }): void
+  (e: 'action-button-click', value: string, shape: Shape): void
+  (e: 'diagramDoubleClick', data: any): void
+  (e: 'model-type-property-id-button-click', value: string, shape: Shape): void
+  (e: 'action-button-add', shape: Shape): void
+  (e: 'scale-changed', scale: number): void
+}>()
+
+const graphStore = useGraphStore()
+const diagramContentRef = ref<HTMLElement | null>(null)
+const shapeComponents = ref<any[]>([]) // 用于获取子组件实例
+const resShape = ref<Shape>({} as Shape) // 用于存储通过 ref 获取的 shape 数据
+
+// 计算属性：获取当前画布的缩放比例
+const currentScale = computed(() => graphStore.getScale())
+
+// 响应式数据
+const shapes = computed(() =>
+  (graphStore.visibleShapes || []).filter(s => {
+    // 外部拖拽创建中的形状应该被隐藏，只显示 ghost
+    if (graphStore.externalCreatingId && s.id === graphStore.externalCreatingId) {
+      return false
+    }
+    return (s?.shapeType !== 'shape' && s?.shapeType !== 'pin')       // 非 shape：一律渲染
+      || s?.inert !== false         // 仅当是 shape 才检查；inert===false 才被过滤掉
+  })
+)
+
+// 将隔间组件从 DOM 量测得到的头/内容高度写回 shape.meta，
+const onCompartmentMetrics = (
+  m: { headerH: number; contentH: number },
+  shape: Shape
+) => {
+  // 就地挂 meta（避免触发重渲染）
+  shape.meta = { ...(shape.meta || {}), headerH: m.headerH, contentH: m.contentH }
+  //  计算 zones 并注册
+  //  计算最新的分区，并注册到全局（供 hover 命中 / 落点钳制 / 扩父等逻辑读取）
+  const z = buildZones(shape, m)
+  setCompartmentZones(shape.id, z)
+}
+// 获取StrategicTaxonomyDiagram的bounds
+const diagramBounds = computed(() => {
+  const diagram = shapes.value.find(s => s.shapeType === ShapeConfig.SHAPE_TYPE)
+  return diagram?.bounds || null
+})
+
+// 初始化数据
+const initShapes = () => {
+  graphStore.setTitle('战略图谱')
+}
+
+const handlePropertyPanel = (payload: boolean) => {
+  if (graphStore.selectedShape) {
+    emit('shapes-property', { selectedShape: graphStore.selectedShape, showPropertyPanel: payload })
+  }
+}
+
+// 处理名称点击事件
+const handleNameClick = (shape: Shape, event: MouseEvent) => {
+  graphStore.selectShape(shape)
+}
+
+// 处理图形点击事件
+const handleShapeClick = (shape: Shape, event: MouseEvent) => {
+  graphStore.selectShape(shape)
+}
+
+// 处理编辑名称事件
+const handleEditName = (shape: Shape, newName: string) => {
+  emit('shapes-edit-name', { shape, newName })
+}
+
+// 处理连接点位置更新
+const handleUpdateConnectShape = (updatedShape: Shape) => {
+  // 这里可以添加更新 connectShapeData 的逻辑
+  // 由于 connectShapeData 是 props，可能需要通过 emit 通知父组件更新
+  console.log('连接点位置更新:', updatedShape)
+}
+
+// 处理连接结束事件
+const handleConnectEnd = (connectionData: { sourceId: string; targetId: string; sourcePoint: { x: number; y: number }; targetPoint: { x: number; y: number }; waypoints: Array<{ x: number; y: number }> }) => {
+  // 将连接数据传递给父组件
+  emit('connect-end', connectionData);
+  console.log('连接结束事件已传递给父组件:', connectionData);
+}
+
+// 处理双击图表事件
+const handleDiagramDoubleClick = (data: any) => {
+  emit('diagramDoubleClick', data);
+}
+
+const handleActionButtonClick = (value: any, shape: Shape) => {
+  emit('action-button-click', value, shape);
+}
+
+const handleModelTypePropertyIdButtonClick = (value: any, shape: Shape) => {
+  emit('model-type-property-id-button-click', value, shape);
+}
+
+// 处理线条点击事件并转发给交互层
+const handleEdgeClick = (shape: Shape, event: MouseEvent) => {
+  // 阻止事件冒泡，避免触发InteractionLayer的背景点击
+  event.stopPropagation();
+  event.preventDefault();
+
+  // 直接打印线条数据，确保事件被正确捕获
+  console.log('Graph层捕获到线条点击事件，线条数据:', shape, 'shapeType:', shape.shapeType);
+
+  // 确保shapeType为edge
+  const edgeShape = {
+    ...shape,
+    shapeType: 'edge' as const
+  };
+
+  // 先直接选中线条
+  graphStore.clearSelection();
+  graphStore.selectShape(edgeShape);
+
+  // 转发事件给InteractionLayer组件
+  if (interactionLayerRef.value?.handleEdgeClick) {
+    console.log('转发线条点击事件到InteractionLayer');
+    interactionLayerRef.value.handleEdgeClick(edgeShape, event);
+  }
+}
+const handleActionButtonAdd = (shape: Shape) => {
+  emit('action-button-add', shape);
+}
+
+// 处理鼠标滚轮事件，实现缩放功能
+const handleWheel = (event: WheelEvent) => {
+  // 只有按住Ctrl键时才执行缩放
+  if (!event.ctrlKey && !event.metaKey) {
+    // 不按住Ctrl键时，允许默认的滚轮行为（滚动）
+    return;
+  }
+
+  // 阻止默认行为，避免页面缩放
+  event.preventDefault();
+
+  // 使用normalize-wheel-es标准化滚轮事件
+  const normalized = normalizeWheel(event);
+
+  // 计算缩放比例增量
+  const zoomFactor = 0.01;
+  const delta = normalized.pixelY > 0 ? -zoomFactor : zoomFactor;
+
+  // 获取当前缩放比例并计算新的缩放比例
+  // getScale默认使用activeDiagramId
+  const currentScale = graphStore.getScale();
+  const newScale = currentScale + delta;
+
+  // 设置新的缩放比例，默认使用activeDiagramId
+  graphStore.setScale(newScale);
+
+  // 通知父组件缩放变化
+  emit('scale-changed', newScale);
+}
+
+const updateShapes = (shapes: Shape[]) => {
+  shapes.sort((a, b) => {
+    if (a.shapeType === 'diagram') return -1
+    if (b.shapeType === 'diagram') return 1
+    return 0
+  })
+  graphStore.updateShapes(shapes)
+
+  // 在图形批量更新后（通常是从后端加载数据），初始化所有连线的端点
+  // 确保连线不会横跨图元，而是从合适的位置连接
+  nextTick(() => {
+    graphStore.initializeAllEdgeEndpoints()
+  })
+}
+
+const updateShape = (shapeId: string, updates: Partial<Shape>, id: 'id' | 'modelId' = 'id') => {
+  graphStore.updateShape(shapeId, updates, id)
+}
+
+watch(() => props.addShapeData, async (newVal, oldVal) => {
+  if (!newVal || Object.keys(newVal).length === 0) return
+  sweepShapesWithInert()
+  await graphStore.clearSelection()
+  graphStore.addShape(newVal)
+  graphStore.selectShape(newVal)
+  eventBus.emit('addShape:ok')
+  // graphStore.addShape(newVal)
+  // resShape.value = newVal
+},)
+function sweepShapesWithInert() {
+  const arr = graphStore.shapes as any[]
+  let removed = 0
+  for (let i = arr.length - 1; i >= 0; i--) {
+    if ('inert' in arr[i]) {
+      arr.splice(i, 1)     // 直接删，避免 removeShape 的事件/副作用导致回填
+      removed++
+    }
+  }
+  if (removed > 0) {
+    graphStore.clearSelection?.()
+  }
+}
+//拖动过程中
+const continueExternalCreateDrag = (payload: { clientX: number; clientY: number }) => {
+  interactionLayerRef.value?.continueExternalCreateDrag(payload)
+}
+// 转发外部拖拽的“结束”事件到交互层。
+const finishExternalCreateDrag = (payload: { clientX: number; clientY: number }) => {
+  interactionLayerRef.value?.finishExternalCreateDrag(payload)
+}
+// 监听shapes变化，确保InteractionLayer位置正确
+watch(shapes, () => {
+  nextTick(() => {
+    // 可以在这里添加额外的位置调整逻辑
+  })
+}, { deep: true })
+
+watch(() => props.actionButtonShapeId, (newVal) => {
+  console.log('newVal', newVal);
+})
+// 监听 taggedValueLabels，立即同步到 graphStore
+watch(
+  () => props.taggedValueLabels,
+  (val) => {
+    graphStore.taggedValueLabels = val ?? []
+    setTaggedValueLabelsCache(graphStore.taggedValueLabels)
+  },
+  {
+    immediate: true, // 组件挂载时先执行一次  
+  }
+)
+
+// 监听 packages，同步到 graphStore.setPackageTypes
+watch(
+  () => props.packages,
+  (val) => {
+    graphStore.packagesTypes = val ?? []
+    setPackageTypesCache(graphStore.packagesTypes)
+  },
+  {
+    immediate: true,
+  }
+)
+//监听classMetaTypes，同步到graphStore.classMetaTypes
+watch(
+  () => props.classMetaTypes,
+  (val) => {
+    graphStore.classMetaTypes = val ?? []
+  },
+  {
+    immediate: true,
+  }
+)
+// 把 referentialAttributeModel + pins 合并后存进 store
+watch(
+  () => [props.referentialAttributeModel, props.pins,props.ports],
+  ([referentialAttributeModel, pins]) => {
+    const refArr = referentialAttributeModel ?? []
+    const pinArr = pins ?? []
+    const portArr = props.ports ?? [] 
+    graphStore.pinsTypes = pinArr
+    graphStore.portsTypes = portArr
+    graphStore.ownerRequiredShapeKeys = [...refArr, ...pinArr,...portArr]
+  },
+  { immediate: true }
+)
+onMounted(() => {
+  initShapes()
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      graphStore.clearSelection()
+      graphStore.selectedIds = []
+    }
+  });
+
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      graphStore.clearSelection()
+      graphStore.selectedIds = []
+    }
+  });
+})
+
+defineExpose({
+  getBoundingClientRect: () => interactionLayerRef.value?.getBoundingClientRect(),
+  updateShapes,
+  updateShape,
+  continueExternalCreateDrag,
+  finishExternalCreateDrag,
+})
+</script>
+
+<style scoped>
+.graph-view {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  position: relative;
+  overflow: hidden;
+  user-select: none;
+}
+
+.diagram-content {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  /* 防止Firefox中的默认缩放行为 */
+  touch-action: none;
+}
+
+.shapes-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 600px;
+  /* 应用缩放变换 */
+  transform-origin: 0 0;
+  transform: scale(v-bind('currentScale'));
+}
+
+/* 所有 shape 组件都使用绝对定位 */
+.shapes-container>* {
+  position: absolute;
+}
+</style>

package/src/vite-env.d.ts

@@ -0,0 +1,33 @@
+// / <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL: string
+  readonly VITE_APP_ENV: string
+  readonly VITE_APP_TITLE: string
+  readonly DEV: boolean
+  readonly PROD: boolean
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+  glob: (pattern: string, options?: { eager?: boolean; import?: string }) => Record<string, any>
+}
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, never>, Record<string, never>, unknown>
+  export default component
+}
+
+declare global {
+  interface Window {
+    electronAPI?: {
+      getAppVersion: () => Promise<string>
+      sendMessage: (msg: string) => void
+      onMessage: (cb: (msg: string) => void) => void
+      selectFile: () => Promise<string | undefined>;
+    }
+  }
+}
+
+declare module 'lodash'