@mx-sose-front/mx-sose-graph 1.1.8 → 1.2.1

package/src/components/Matrix/index.ts

@@ -0,0 +1,168 @@
+import type { TreeNode, ColumnHeaderCell } from '../../types'
+
+/** 递归收集树中所有叶子节点（按遍历顺序） */
+export function getLeafNodes(nodes: TreeNode[]): TreeNode[] {
+  const leaves: TreeNode[] = []
+  function walk(list: TreeNode[]) {
+    for (const node of list) {
+      if (node.isLeaf || !node.children?.length) {
+        leaves.push(node)
+      } else {
+        walk(node.children)
+      }
+    }
+  }
+  walk(nodes)
+  return leaves
+}
+
+/** 根据 rowId + colId 从 matrixNodes 中取单元格数据 */
+export function getMatrixCell(
+  matrixNodes: ColumnHeaderCell[],
+  rowNodeId: string,
+  columnNodeId: string
+): ColumnHeaderCell | undefined {
+  return matrixNodes.find(
+    (n) => n.rowNodeId === rowNodeId && n.columnNodeId === columnNodeId
+  )
+}
+
+export interface FlattenRowItem {
+  node: TreeNode
+  depth: number
+}
+
+/** 按展开状态扁平化行树：行方向可展开，每行一个节点 */
+export function flattenRowTree(
+  nodes: TreeNode[],
+  expandedIds: Set<string>,
+  depth = 0
+): FlattenRowItem[] {
+  const result: FlattenRowItem[] = []
+  for (const node of nodes) {
+    result.push({ node, depth })
+    const hasChildren = node.children && node.children.length > 0
+    if (hasChildren && expandedIds.has(node.id)) {
+      result.push(...flattenRowTree(node.children!, expandedIds, depth + 1))
+    }
+  }
+  return result
+}
+
+/** 按展开状态得到可见的列叶子（最深一层），用于数据列 */
+export function getVisibleColumnLeaves(
+  nodes: TreeNode[],
+  expandedIds: Set<string>
+): TreeNode[] {
+  const result: TreeNode[] = []
+  function walk(list: TreeNode[]) {
+    for (const node of list) {
+      const hasChildren = node.children && node.children.length > 0
+      if (!hasChildren || !expandedIds.has(node.id)) {
+        result.push(node)
+      } else {
+        walk(node.children!)
+      }
+    }
+  }
+  walk(nodes)
+  return result
+}
+
+/** 递归收集树中所有节点 id（用于判断某 id 是否属于该树，折叠时子节点不应当「补列」） */
+export function getAllColumnNodeIds(nodes: TreeNode[]): Set<string> {
+  const ids = new Set<string>()
+  function walk(list: TreeNode[]) {
+    for (const node of list) {
+      ids.add(node.id)
+      if (node.children?.length) walk(node.children)
+    }
+  }
+  walk(nodes)
+  return ids
+}
+
+/**
+ * 与行对齐的列顺序：先根（战略层(1)）算一列，再子节点（能力…）。
+ * 单根且已展开且有子节点时，返回 [根, ...叶子]；否则仅返回叶子。
+ */
+export function getVisibleColumnNodesWithRoot(
+  nodes: TreeNode[],
+  expandedIds: Set<string>
+): TreeNode[] {
+  const leaves = getVisibleColumnLeaves(nodes, expandedIds)
+  if (nodes.length !== 1) return leaves
+  const root = nodes[0]
+  const hasChildren = root.children && root.children.length > 0
+  if (!hasChildren || !expandedIds.has(root.id)) return leaves
+  return [root, ...leaves]
+}
+
+export interface ColHeaderCell {
+  node: TreeNode
+  colspan: number
+  rowspan: number
+  isEmpty?: boolean
+}
+
+/** 计算列头多行：列方向竖着展开，每层表头一行；叶子节点用 rowspan 跨到最底行 */
+export function getColumnHeaderRows(
+  nodes: TreeNode[],
+  expandedIds: Set<string>
+): ColHeaderCell[][] {
+  const rows: ColHeaderCell[][] = []
+  function countLeaves(n: TreeNode): number {
+    if (!n.children?.length) return 1
+    if (!expandedIds.has(n.id)) return 1
+    return n.children.reduce((s, c) => s + countLeaves(c), 0)
+  }
+  function calcMaxDepth(list: TreeNode[], depth: number): number {
+    let max = depth
+    for (const n of list) {
+      if (n.children?.length && expandedIds.has(n.id)) {
+        max = Math.max(max, calcMaxDepth(n.children, depth + 1))
+      }
+    }
+    return max
+  }
+  const totalRows = calcMaxDepth(nodes, 1)
+
+  function buildRow(list: TreeNode[], currentRow: number): void {
+    const cells: ColHeaderCell[] = list.map((node) => {
+      const hasExpandedChildren = !!(node.children?.length && expandedIds.has(node.id))
+      return {
+        node,
+        colspan: countLeaves(node),
+        rowspan: hasExpandedChildren ? 1 : Math.max(1, totalRows - currentRow + 1),
+      }
+    })
+    rows.push(cells)
+    const next: TreeNode[] = []
+    for (const node of list) {
+      if (node.children?.length && expandedIds.has(node.id)) next.push(...node.children)
+    }
+    if (next.length) buildRow(next, currentRow + 1)
+  }
+  buildRow(nodes, 1)
+  return rows
+}
+
+/** 判断行节点是否用「文件夹+方框」样式（Strategy、123 等），否则用「橙圆 C+三角」 */
+export function isFolderLikeNode(node: TreeNode): boolean {
+  return node.nodeType === 'folder' || node.nodeType === 'group'
+}
+
+/** 递归收集树中所有有子节点的节点 id（用于默认全部展开） */
+export function getAllExpandableIds(nodes: TreeNode[]): Set<string> {
+  const ids = new Set<string>()
+  function walk(list: TreeNode[]) {
+    for (const node of list) {
+      if (node.children?.length) {
+        ids.add(node.id)
+        walk(node.children)
+      }
+    }
+  }
+  walk(nodes)
+  return ids
+}

package/src/components/Shape/ConceptualRole.vue

@@ -4,11 +4,6 @@
     :style="shapeStyle" 
     @click="onClick" 
     @dblclick="onDoubleClick"
-    @mousedown="preventScaleAndDrag"
-    @touchstart="preventScaleAndDrag"
-    @touchmove="preventTouchScale"
-    @touchend="preventTouchScale"
-    @wheel="onWheel"
     @contextmenu.prevent
   >
     <svg :width="vbW" :height="vbH" :viewBox="`0 0 ${vbW} ${vbH}`" class="diagram-svg">
@@ -194,37 +189,10 @@ const shapeStyle = computed<CSSProperties>(() => {
 })
 
 const onClick = (event: MouseEvent) => {
-  event.stopPropagation();
-  event.preventDefault();
   emit('shape-click', props.shape, event)
 }
 
-const onDoubleClick = (event: MouseEvent) => {
-  event.stopPropagation();
-  event.preventDefault();
-}
-
-// 阻止拖拽和缩放相关的事件
-const preventScaleAndDrag = (event: Event) => {
-  event.stopPropagation();
-  event.preventDefault();
-}
-
-// 阻止触摸缩放事件
-const preventTouchScale = (event: TouchEvent) => {
-  // 阻止多点触控缩放
-  if (event.touches.length > 1) {
-    event.stopPropagation();
-    event.preventDefault();
-  }
-}
-
-// 阻止鼠标滚轮缩放 - 完全禁用缩放功能
-const onWheel = (event: WheelEvent) => {
-  // 完全阻止所有滚轮事件，包括缩放
-  event.stopPropagation();
-  event.preventDefault();
-}
+const onDoubleClick = (_event: MouseEvent) => {}
 
 const onImageClick = (event: MouseEvent) => {
   event.stopPropagation()
@@ -263,4 +231,4 @@ const onNameClick = (event: MouseEvent) => {
   transform: none !important;
   -webkit-transform: none !important;
 }
-</style>
+</style>