@mx-sose-front/mx-sose-graph 1.1.0 → 1.1.2

package/src/components/Shape/Block.vue

@@ -172,8 +172,8 @@ const shapeStyle = computed<CSSProperties>(() => {
     width = Math.max(estimatedTextWidth.value, width);
   }
 
-  // 最小高度限制为70px
-  const minHeight = 70;
+  // 最小高度限制为60px
+  const minHeight = 60;
   const height = Math.max(bounds.height || 40, minHeight);
 
   return {
@@ -189,8 +189,8 @@ const updateShapeBounds = async () => {
 
   const requiredWidth = estimatedTextWidth.value;
   const currentWidth = props.shape.bounds.width || 100;
-  // 最小高度限制为70px
-  const minHeight = 70;
+  // 最小高度限制为60px
+  const minHeight = 60;
   const currentHeight = props.shape.bounds.height || 40;
   const requiredHeight = Math.max(currentHeight, minHeight);
 
@@ -249,9 +249,9 @@ const vbW = computed(() => props.shape.bounds.width || 100)
 const vbH = computed(() => props.shape.bounds.height || 40)
 // ================== 监听 bounds 宽高变化 ==================
 
-// 原始宽高（150 x 70）
+// 原始宽高（150 x 60）
 const DEFAULT_WIDTH = 150
-const DEFAULT_HEIGHT = 70
+const DEFAULT_HEIGHT = 60
 
 // 记录上一次的宽高，用来做去重判断
 const lastBounds = ref({
@@ -268,7 +268,7 @@ watch(
   () => [props.shape.bounds.width, props.shape.bounds.height],
   ([newW, newH]) => {
     if (isGhost.value) return
-    // 宽高兜底到默认值（150 x 70）
+    // 宽高兜底到默认值（150 x 60）
     const width = newW ?? DEFAULT_WIDTH
     const height = newH ?? DEFAULT_HEIGHT
 
@@ -281,7 +281,7 @@ watch(
     }
     // 更新“上一次”的记录
     lastBounds.value = { width, height }
-    // 只有当宽高不再是原始 150 x 70 时才认为“真的变化”，再去调用其他方法
+    // 只有当宽高不再是原始 150 x 60 时才认为“真的变化”，再去调用其他方法
       if (
       width !== DEFAULT_WIDTH || height !== DEFAULT_HEIGHT
       

package/src/components/ZoomSlider/ZoomSlider.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="zoom-bar">
+    <button @click="handleZoomOut" class="zoom-button zoom-out">-</button>
+    <div class="zoom-slider">
+      <div class="slider-wrapper" :style="{ '--progress': `${((modelValue - min) / (max - min)) * 100}%` }">
+        <input 
+          type="range" 
+          :min="min" 
+          :max="max" 
+          :step="step" 
+          v-model="internalValue" 
+          @input="handleZoomChange" 
+        />
+      </div>
+    </div>
+    <button @click="handleZoomIn" class="zoom-button zoom-in">+</button>
+    <div class="zoom-level">{{ Math.round(internalValue * 100) }}%</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface Props {
+  modelValue: number
+  min?: number
+  max?: number
+  step?: number
+  onZoomIn?: () => void
+  onZoomOut?: () => void
+  onScaleChange?: (scale: number) => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  min: 0.1,
+  max: 3,
+  step: 0.1
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+  'zoom-in': []
+  'zoom-out': []
+  'scale-change': [scale: number]
+}>()
+
+// 内部值，用于双向绑定滑块
+const internalValue = ref(props.modelValue)
+
+// 监听props变化，更新内部值
+watch(() => props.modelValue, (newValue) => {
+  internalValue.value = newValue
+})
+
+// 监听内部值变化，emit事件
+watch(internalValue, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+
+// 处理缩放滑块变化
+const handleZoomChange = () => {
+  emit('scale-change', internalValue.value)
+  emit('update:modelValue', internalValue.value)
+}
+
+// 处理放大按钮点击
+const handleZoomIn = () => {
+  const newValue = Math.min(internalValue.value + props.step, props.max)
+  internalValue.value = newValue
+  emit('zoom-in')
+  emit('update:modelValue', newValue)
+}
+
+// 处理缩小按钮点击
+const handleZoomOut = () => {
+  const newValue = Math.max(internalValue.value - props.step, props.min)
+  internalValue.value = newValue
+  emit('zoom-out')
+  emit('update:modelValue', newValue)
+}
+</script>
+
+<style scoped>
+.zoom-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  background: white;
+  border-top: 1px solid #e0e0e0;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
+  z-index: 100;
+  gap: 6px;
+  padding: 0 10px;
+}
+
+.zoom-level {
+  font-size: 10px;
+  font-weight: 500;
+  min-width: 35px;
+  text-align: center;
+  color: #333;
+}
+
+.zoom-button {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #e0e0e0;
+  border-radius: 2px;
+  background: white;
+  cursor: pointer;
+  font-size: 10px;
+  font-weight: 600;
+  color: #333;
+  transition: all 0.2s;
+  user-select: none;
+}
+
+.zoom-button:hover {
+  background: #f5f5f5;
+  border-color: #2a7fd9;
+  color: #2a7fd9;
+}
+
+.zoom-button:active {
+  transform: scale(0.95);
+}
+
+.zoom-slider {
+  width: 150px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.slider-wrapper {
+  width: 100%;
+  height: 2px;
+  background: #e0e0e0;
+  border-radius: 1px;
+  position: relative;
+}
+
+.slider-wrapper::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: var(--progress, 0%);
+  height: 2px;
+  background: #2a7fd9;
+  border-radius: 1px;
+  z-index: 1;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.slider-wrapper input[type="range"] {
+  width: 100%;
+  height: 12px;
+  background: transparent;
+  outline: none;
+  -webkit-appearance: none;
+  margin: 0;
+  position: relative;
+  z-index: 2;
+  cursor: pointer;
+}
+
+/* WebKit浏览器滑块样式 */
+.slider-wrapper input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: white;
+  border: 2px solid #2a7fd9;
+  cursor: pointer;
+  transition: all 0.2s;
+  transform: translateY(-6px);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.slider-wrapper input[type="range"]::-webkit-slider-thumb:hover {
+  background: white;
+  border-color: #2a7fd9;
+  transform: translateY(-6px) scale(1.1);
+}
+
+/* Mozilla浏览器滑块样式 */
+.slider-wrapper input[type="range"]::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: white;
+  border: 2px solid #2a7fd9;
+  cursor: pointer;
+  transition: all 0.2s;
+  transform: translateY(-6px);
+}
+
+.slider-wrapper input[type="range"]::-moz-range-thumb:hover {
+  background: white;
+  border-color: #2a7fd9;
+  transform: translateY(-6px) scale(1.1);
+}
+
+/* Firefox滑块轨道样式 */
+.slider-wrapper input[type="range"]::-moz-range-track {
+  background: transparent;
+  height: 2px;
+  border: none;
+}
+
+/* 移除聚焦时的默认样式 */
+.slider-wrapper input[type="range"]:focus {
+  outline: none;
+}
+</style>

package/src/constants/index.ts

@@ -201,6 +201,9 @@ export const BlockKeyMap = {
   'ActualResponsibility': 'Block',//实际责任
   'System': 'Block',//系统
   'Competence': 'Block',//权限
+  'Person': 'Block',//人员
+  'SecurityProcess': 'Block',//安全流程
+  'ResourceMitigation': 'Block',  // 资源缓解措施
 
   // 线
   'Association': 'Edge', //双向关联
@@ -228,6 +231,7 @@ export const BlockKeyMap = {
   'FunctionControlFlow':'Edge',//功能控制流
   'ServiceConnector':'Edge',//服务连接器
   'ServiceControlFlow':'Edge',//服务控制流
+  "ServiceObjectFlow": 'Edge', // 服务对象流
   'Connector':'Edge',//连接器
   'OperationalConnector':'Edge',//业务连接器
   'IsCapableToPerform':'Edge',//能够胜任
@@ -321,6 +325,14 @@ export const BlockKeyMap = {
 // 导出类型
 export type ShapeKeyValue = typeof BlockKeyMap[keyof typeof BlockKeyMap]
 
+// 四个角手柄常量
+export const resizeHandles: { position: "nw" | "ne" | "sw" | "se" }[] = [
+  { position: "nw" },
+  { position: "ne" },
+  { position: "sw" },
+  { position: "se" },
+]
+
 // 只包含图类型的映射
 export const DiagramKeyMap = {
   'StrategicTaxonomyDiagram': 'StrategicTaxonomyDiagram', //战略概念图

package/src/store/graphStore.ts

@@ -20,6 +20,7 @@ import {
 } from '../utils/compartment'
 import { EdgeUtils } from '../utils/edgeUtils'
 import { expandParentByChild } from '../utils/autoExpandParent'
+import { adjustCanvasToFitAllShapes } from '../utils/diagram'
 import { applyReparentAndClone, autoExpandMovedCompartmentsAfterDrag, buildDragEndPayloads, buildPrevParentMap, collectAffectedShapeIds, createOnNestDoneCallback } from '../utils/graphDragService'
 type Rect = { x: number; y: number; width: number; height: number };
 export const useGraphStore = defineStore('graph', () => {
@@ -52,6 +53,8 @@ export const useGraphStore = defineStore('graph', () => {
   const groupBaseBox = ref<Rect | null>(null)
   // 指针相对图元左上角的偏移，用于保持拖动时鼠标与元素的相对位置
   const dragOffset = ref<{ x: number; y: number } | null>(null)
+  // 拖拽开始时的画布尺寸快照
+  const dragBaseCanvasSize = ref<{ width: number; height: number } | null>(null)
   //当前打开画布的列表
   const diagrams = ref<Shape[]>([])
   //当前打开的画布id
@@ -71,8 +74,11 @@ export const useGraphStore = defineStore('graph', () => {
   const packagesTypes = ref<string[]>([])           // 需要展示线的隔间组件的图元类型
   const classMetaTypes = ref<string[]>([]) //可以生成的class类型
   const ownerRequiredShapeKeys = ref<string[]>([])//哪些图元需要自动补 ownerId
-  const pinsTypes=ref<string[]>([])//栓类型
+  const pinsTypes = ref<string[]>([])//栓类型
   const portsTypes = ref<string[]>([])//端口类型
+  const museInGraphView = ref<boolean>(false) //是否鼠标在图元区域
+  const canOperate = ref<boolean>(false)//license是否允许操作
+  const connectMode = ref<string>('connect')
   // 方法
   /**
    * 添加图元
@@ -259,6 +265,14 @@ export const useGraphStore = defineStore('graph', () => {
   }
   // 清空选择
   const clearSelection = () => selectShape(null)
+  // 全选图元
+  const selectAll = () => {
+    // 获取所有非diagram类型的图元
+    const allShapeIds = shapes.value
+      .filter(shape => shape.shapeType?.toLowerCase() !== 'diagram')
+      .map(shape => shape.id)
+    selectMany(allShapeIds)
+  }
   // 设置图表标题
   const setTitle = (title: string) => {
     diagramTitle.value = title
@@ -340,6 +354,16 @@ export const useGraphStore = defineStore('graph', () => {
     for (const k in snap.dragBase) dragGhost[k] = snap.dragBase[k] // 写入新 key
     draggingIds.value = validIds
     dragAnchor.value = { x: pointer.x, y: pointer.y }
+
+    const currentDiagram = shapes.value.find(s => s.shapeType === 'diagram')
+    if (currentDiagram) {
+      dragBaseCanvasSize.value = {
+        width: currentDiagram.bounds.width ?? 0,
+        height: currentDiagram.bounds.height ?? 0
+      }
+    } else {
+      dragBaseCanvasSize.value = null
+    }
     if (validIds.length === 1) {
       const b = dragBase.value[validIds[0]]
       dragOffset.value = { x: pointer.x - b.x, y: pointer.y - b.y }
@@ -444,7 +468,7 @@ export const useGraphStore = defineStore('graph', () => {
     }
   }
   //拖动过程中
-  const moveDraggedShape = (pointer: { x: number; y: number }) => {
+  const moveDraggedShape = async (pointer: { x: number; y: number }) => {
     if (!isDragging.value || draggingIds.value.length === 0) return
 
     if (draggingIds.value.length === 1) {
@@ -576,6 +600,23 @@ export const useGraphStore = defineStore('graph', () => {
       updateShape,
     })
 
+    // 先同步调整画布大小，确保获取到最新的画布数据
+    adjustCanvasToFitAllShapes()
+
+    // 检查画布宽高是否有变化
+    if (dragBaseCanvasSize.value) {
+      const currentDiagram = shapes.value.find(s => s.shapeType === 'diagram')
+      if (currentDiagram) {
+        const currentWidth = currentDiagram.bounds.width
+        const currentHeight = currentDiagram.bounds.height
+        const { width: baseWidth, height: baseHeight } = dragBaseCanvasSize.value
+        if (currentWidth !== baseWidth || currentHeight !== baseHeight) {
+          const diagramPayload = _.cloneDeep(currentDiagram)
+          payloads.push(diagramPayload)
+        }
+      }
+    }
+
     //对外只暴露一个事件：shape-drag-end
     eventBus.emit('shape-drag-end', payloads, ownerPayload, onNestDone)
 
@@ -638,6 +679,7 @@ export const useGraphStore = defineStore('graph', () => {
     groupBaseBox.value = null
     dragSelectionSnapshot.value = []
     primaryDragId.value = null
+    dragBaseCanvasSize.value = null
     for (const k in dragGhost) delete dragGhost[k]
   }
   //设置当前打开的画布id
@@ -647,6 +689,14 @@ export const useGraphStore = defineStore('graph', () => {
   const setActiveDiagramId = (id: string | null) => {
     activeDiagramId.value = id;
   };
+  // 设置当前连线的模式
+  const setConnectMode = (mode: string) => {
+    connectMode.value = mode
+  }
+  // 获取当前连线的模式
+  const getConnectMode = () => {
+    return connectMode.value
+  }
   // 获取当前缩放比例
   const getScale = (diagramId?: string | null) => {
     const targetId = diagramId || activeDiagramId.value;
@@ -682,37 +732,56 @@ export const useGraphStore = defineStore('graph', () => {
  * - 内部调用 expandParentByChild → 得到 expanded / affectedIds
  * - 若有扩父，再组装 sizePayload 并发 shape-size-update 事件
  */
-  const expandParentAndEmitSizeUpdateByChild = (child: Shape) => {
-    if (!child.parenShapeId) {
-      return
+  const collectAncestors = (shapes: Shape[], id: string) => {
+    const out: string[] = []
+    let cur = shapes.find(s => s.id === id)
+    while (cur) {
+      out.push(cur.id)
+      const pid = cur.parenShapeId
+      if (!pid) break
+      cur = shapes.find(s => s.id === pid)
     }
-     if (pinsTypes.value.includes(child.shapeKey)) return
-    const { expanded, affectedIds } = expandParentByChild({
+    return out
+  }
+
+  const expandParentAndEmitSizeUpdateByChild = (child: Shape) => {
+    if (!child.parenShapeId) return
+    if (pinsTypes.value.includes(child.shapeKey)) return
+
+    const parentId = child.parenShapeId
+    const chainIds = collectAncestors(shapes.value, parentId)
+
+    // before 快照（只对父链）
+    const before = new Map(
+      chainIds.map(id => [
+        id,
+        JSON.stringify(shapes.value.find(s => s.id === id)?.bounds ?? {}),
+      ]),
+    )
+
+    const { expanded } = expandParentByChild({
       shapes: shapes.value,
       child,
       updateShape,
     })
-
     if (!expanded) return
 
-    const childId = child.id
-
-    // 组装“只更新大小”的 payload：id + JSON.stringify(bounds)
-    const sizePayload: ShapeSizeUpdatePayload[] = affectedIds
+    const payload: ShapeSizeUpdatePayload[] = chainIds
+      .filter(id => id !== child.id)
       .map(id => shapes.value.find(s => s.id === id))
       .filter((s): s is Shape => !!s)
-      // 过滤掉子元素本身，只把真正扩父的父/祖先发给接口
-      .filter(s => s.id !== childId)
-      .map(s => ({
-        id: s.id,
-        bounds: JSON.stringify(s.bounds ?? {}),
-      }))
+      .filter(s => before.get(s.id) !== JSON.stringify(s.bounds ?? {})) //  diff
+      .map(s => ({ id: s.id, bounds: JSON.stringify(s.bounds ?? {}) }))
 
-    if (!sizePayload.length) return
+    if (!payload.length) return
+    // eventBus.emit('shape-size-update', payload)
+  }
 
-    // 发事件给统一监听，监听里再去调用 updateShapeSize（单条接口就 for 循环）
-    eventBus.emit('shape-size-update', sizePayload)
+  // 设置鼠标是否在图元区域
+  const setIsMouseInGraphView = (isIn: boolean) => {
+    museInGraphView.value = isIn
   }
+
   return {
     // 状态
     shapes,
@@ -726,6 +795,7 @@ export const useGraphStore = defineStore('graph', () => {
     hoverNestable,
     currentDiagramId,
     canDropOnCanvas,
+    canOperate,
     //图元shapeKey
     taggedValueLabels,
     packagesTypes,
@@ -742,6 +812,9 @@ export const useGraphStore = defineStore('graph', () => {
     activeDiagramId,
     // 当前活动画布的缩放比例
     currentScale: computed(() => getScale()),
+    museInGraphView,
+    connectMode,
+
     // 方法
     addShape,
     removeShape,
@@ -759,6 +832,7 @@ export const useGraphStore = defineStore('graph', () => {
     setCurrentDiagramId,
     selectMany,
     clearSelection,
+    selectAll,
     removeSelected,
     finalCheckCanNest,
     setHoverState,
@@ -767,9 +841,12 @@ export const useGraphStore = defineStore('graph', () => {
     getScale,
     setScale,
     setActiveDiagramId,
+    setConnectMode,
+    getConnectMode,
     visibleShapes,
     externalCreatingId,
     expandParentAndEmitSizeUpdateByChild,
+    setIsMouseInGraphView,
   }
 },
   //配置持久化

package/src/types/index.ts

@@ -5,6 +5,8 @@ export interface Bounds {
   width?: number | undefined
   height?: number | undefined
 }
+
+export type Rect = { x: number; y: number; width: number; height: number };
 export type Padding = number | { top: number; right: number; bottom: number; left: number };
 // 样式接口
 export interface Style {
@@ -197,4 +199,15 @@ export interface CheckNested {
 export interface ShapeSizeUpdatePayload {
   id: string
   bounds: string   // JSON string
-}
+}
+
+// 所在图表列表
+export interface locationChart {
+  modelCode: string //图表图标名称
+  treeId: string
+  modelName: string //图表名称
+}
+
+// InteractionLayer types
+export type { InteractionLayerProps, ExternalCreateDragState } from './interactionLayer';
+export { InteractionLayerEmits } from './interactionLayer';

package/src/types/interactionLayer.ts

@@ -0,0 +1,35 @@
+import type { Shape } from ".";
+
+export interface InteractionLayerProps {
+  connectShapeData?: Shape;
+  diagramBounds?: any;
+  resShape: Shape;
+  lines?: string[];
+  packages?: string[];
+  diagram?: string[];
+  taggedValueLabels?: string[];
+  actionButtonShapeDataId?: string;
+  edgeCheck?: boolean;
+}
+
+export const InteractionLayerEmits = [
+  "propertyPanel",
+  "editName",
+  "update-shape",
+  "connectEnd",
+  "actionButtonClick",
+  "diagramDoubleClick",
+  "modelTypePropertyIdButtonClick",
+  "edge-click",
+  "property-panel",
+  "actionButtonAdd"
+] as string[];
+
+export type InteractionLayerEmitsType = typeof InteractionLayerEmits;
+
+export interface ExternalCreateDragState {
+  creatingId: string | null;
+  pendingShape: Shape | null;
+  isDragging: boolean;
+  isCheckInFlight: boolean;
+}