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

package/src/view/graph.vue

@@ -22,20 +22,27 @@
         :actionButtonShapeDataId="actionButtonShapeId" @edit-name="handleEditName"
         @update-shape="handleUpdateConnectShape" @diagramDoubleClick="handleDiagramDoubleClick"
         @connect-end="handleConnectEnd" @action-button-click="handleActionButtonClick"
+        @object-flow-connect-end="handleObjectFlowConnectEnd"
         @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>
-    
+
+    <!-- 所在图表 -->
+    <DiagramListTooltip :visible="tooltipVisible" :x="tooltipX" :y="tooltipY" :current-diagram-id="currentDiagramId"
+  @close="tooltipVisible = false" :diagram-location-data="chartLocationData || []" />
+
     <!-- 缩放条 -->
-    <div class="zoom-bar">
-      <button @click="handleZoomOut" class="zoom-button zoom-out">-</button>
-      <div class="zoom-slider">
-        <input type="range" min="0.1" max="3" step="0.1" v-model="zoomValue" @input="handleZoomChange" />
-      </div>
-      <button @click="handleZoomIn" class="zoom-button zoom-in">+</button>
-      <div class="zoom-level">{{ Math.round(currentScale * 100) }}%</div>
-    </div>
+    <ZoomSlider
+      v-model="zoomValue"
+      :min="0.1"
+      :max="3"
+      :step="0.1"
+      @zoom-in="handleZoomIn"
+      @zoom-out="handleZoomOut"
+      @scale-change="handleScaleChange"
+      v-if="graphStore.canOperate"
+    />
   </div>
 </template>
 
@@ -43,7 +50,7 @@
 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 type { locationChart, Shape } from '../types'
 import { useGraphStore } from '../store/graphStore'
 // 导入组件
 import StrategicTaxonomyDiagram from '../components/Diagram/StrategicTaxonomyDiagram.vue'
@@ -63,6 +70,9 @@ import { getShapeComponent, getShapeStyle } from "../render/shape-renderer";
 import { ShapeConfig } from '../utils/diagram'
 import { setCompartmentZones, buildZones, setTaggedValueLabelsCache, setPackageTypesCache } from '../utils/compartment'
 import { eventBus } from "../store";
+import { guardOperate } from "../utils/license-guard"
+import DiagramListTooltip from '../components/DiagramListTooltip/DiagramListTooltip.vue';
+import ZoomSlider from '../components/ZoomSlider/ZoomSlider.vue'
 
 registerShapes({
   StrategicTaxonomyDiagram,
@@ -79,12 +89,19 @@ registerShapes({
   Port
 })
 const interactionLayerRef = ref<InstanceType<typeof InteractionLayer> | null>(null)
+
+// 所在图表弹窗相关变量
+const tooltipVisible = ref(false)
+const tooltipX = ref(0)
+const tooltipY = ref(0)
+const currentDiagramId = ref<string>('')
+
 const props = defineProps<{
   addShapeData: Shape,
   connectShapeData: Shape,
-  lines: String[],
+  lines: string[],
   packages: string[],
-  diagram: String[],
+  diagram: string[],
   taggedValueLabels: string[],
   actionButtonShapeId?: string,
   classMetaTypes: string[],
@@ -92,12 +109,15 @@ const props = defineProps<{
   pins: string[],
   referentialAttributeModel: string[],
   ports: string[],
+  canOperate: boolean
+  chartLocationData?: locationChart[] | null,
 }>()
 
 const emit = defineEmits<{
   (e: 'shapes-property', value: { selectedShape: Shape, showPropertyPanel: boolean }): void
-  (e: 'shapes-edit-name', value: { shape: Shape, newName: string }): void
+  (e: 'shapes-edit-name', value: { shape: Shape, newName: string, oldName: 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: 'object-flow-connect-end', value: { connectionData: { sourceId: string; targetId: string; sourcePoint: { x: number; y: number }; targetPoint: { x: number; y: number }; waypoints: Array<{ x: number; y: number }> }, outputPinBounds: { x: number; y: number; width: number; height: number }, inputPinBounds: { x: number; y: number; width: number; height: 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
@@ -106,8 +126,6 @@ const emit = defineEmits<{
 }>()
 
 const graphStore = useGraphStore()
-const diagramContentRef = ref<HTMLElement | null>(null)
-const shapeComponents = ref<any[]>([]) // 用于获取子组件实例
 const resShape = ref<Shape>({} as Shape) // 用于存储通过 ref 获取的 shape 数据
 
 // 计算属性：获取当前画布的缩放比例
@@ -122,13 +140,14 @@ watch(currentScale, (newScale) => {
 })
 
 // 处理缩放滑块变化
-const handleZoomChange = () => {
-  graphStore.setScale(zoomValue.value)
-  emit('scale-changed', zoomValue.value)
+const handleScaleChange = (scale: number) => {
+  graphStore.setScale(scale)
+  emit('scale-changed', scale)
 }
 
 // 处理放大按钮点击
 const handleZoomIn = () => {
+  // ZoomSlider组件已经处理了内部逻辑，这里只需要触发外部事件
   const newScale = Math.min(currentScale.value + 0.1, 3)
   graphStore.setScale(newScale)
   emit('scale-changed', newScale)
@@ -136,6 +155,7 @@ const handleZoomIn = () => {
 
 // 处理缩小按钮点击
 const handleZoomOut = () => {
+  // ZoomSlider组件已经处理了内部逻辑，这里只需要触发外部事件
   const newScale = Math.max(currentScale.value - 0.1, 0.1)
   graphStore.setScale(newScale)
   emit('scale-changed', newScale)
@@ -189,12 +209,14 @@ const handleNameClick = (shape: Shape, event: MouseEvent) => {
 
 // 处理图形点击事件
 const handleShapeClick = (shape: Shape, event: MouseEvent) => {
-  graphStore.selectShape(shape)
+  return guardOperate(async () => {
+    graphStore.selectShape(shape)
+  })
 }
 
 // 处理编辑名称事件
-const handleEditName = (shape: Shape, newName: string) => {
-  emit('shapes-edit-name', { shape, newName })
+const handleEditName = (shape: Shape, newName: string, oldName: string) => {
+  emit('shapes-edit-name', { shape, newName, oldName })
 }
 
 // 处理连接点位置更新
@@ -211,6 +233,10 @@ const handleConnectEnd = (connectionData: { sourceId: string; targetId: string;
   console.log('连接结束事件已传递给父组件:', connectionData);
 }
 
+const handleObjectFlowConnectEnd = (connectionData: { connectionData: { sourceId: string; targetId: string; sourcePoint: { x: number; y: number }; targetPoint: { x: number; y: number }; waypoints: Array<{ x: number; y: number }> }, outputPinBounds: { x: number; y: number; width: number; height: number }, inputPinBounds: { x: number; y: number; width: number; height: number } }) => {
+  emit('object-flow-connect-end', connectionData);
+}
+
 // 处理双击图表事件
 const handleDiagramDoubleClick = (data: any) => {
   emit('diagramDoubleClick', data);
@@ -249,38 +275,48 @@ const handleEdgeClick = (shape: Shape, event: MouseEvent) => {
     interactionLayerRef.value.handleEdgeClick(edgeShape, event);
   }
 }
+
+// 处理所在图表弹窗位置信息
+const handleLocateChartPosition = (position: { x: number, y: number }) => {
+  tooltipX.value = position.x;
+  tooltipY.value = position.y;
+  tooltipVisible.value = true;
+}
+
 const handleActionButtonAdd = (shape: Shape) => {
   emit('action-button-add', shape);
 }
 
 // 处理鼠标滚轮事件，实现缩放功能
 const handleWheel = (event: WheelEvent) => {
-  // 只有按住Ctrl键时才执行缩放
-  if (!event.ctrlKey && !event.metaKey) {
-    // 不按住Ctrl键时，允许默认的滚轮行为（滚动）
-    return;
-  }
+  return guardOperate(async () => {
+    // 只有按住Ctrl键时才执行缩放
+    if (!event.ctrlKey && !event.metaKey) {
+      // 不按住Ctrl键时，允许默认的滚轮行为（滚动）
+      return;
+    }
 
-  // 阻止默认行为，避免页面缩放
-  event.preventDefault();
+    // 阻止默认行为，避免页面缩放
+    event.preventDefault();
 
-  // 使用normalize-wheel-es标准化滚轮事件
-  const normalized = normalizeWheel(event);
+    // 使用normalize-wheel-es标准化滚轮事件
+    const normalized = normalizeWheel(event);
 
-  // 计算缩放比例增量
-  const zoomFactor = 0.01;
-  const delta = normalized.pixelY > 0 ? -zoomFactor : zoomFactor;
+    // 计算缩放比例增量
+    const zoomFactor = 0.01;
+    const delta = normalized.pixelY > 0 ? -zoomFactor : zoomFactor;
 
-  // 获取当前缩放比例并计算新的缩放比例
-  // getScale默认使用activeDiagramId
-  const currentScale = graphStore.getScale();
-  const newScale = currentScale + delta;
+    // 获取当前缩放比例并计算新的缩放比例
+    // getScale默认使用activeDiagramId
+    const currentScale = graphStore.getScale();
+    const newScale = currentScale + delta;
 
-  // 设置新的缩放比例，默认使用activeDiagramId
-  graphStore.setScale(newScale);
+    // 设置新的缩放比例，默认使用activeDiagramId
+    graphStore.setScale(newScale);
 
-  // 通知父组件缩放变化
-  emit('scale-changed', newScale);
+    // 通知父组件缩放变化
+    emit('scale-changed', newScale);
+  })
 }
 
 const updateShapes = (shapes: Shape[]) => {
@@ -378,17 +414,26 @@ watch(
 )
 // 把 referentialAttributeModel + pins 合并后存进 store
 watch(
-  () => [props.referentialAttributeModel, props.pins,props.ports],
+  () => [props.referentialAttributeModel, props.pins, props.ports],
   ([referentialAttributeModel, pins]) => {
     const refArr = referentialAttributeModel ?? []
     const pinArr = pins ?? []
-    const portArr = props.ports ?? [] 
+    const portArr = props.ports ?? []
     graphStore.pinsTypes = pinArr
     graphStore.portsTypes = portArr
-    graphStore.ownerRequiredShapeKeys = [...refArr, ...pinArr,...portArr]
+    graphStore.ownerRequiredShapeKeys = [...refArr, ...pinArr, ...portArr]
   },
   { immediate: true }
 )
+watch(
+  () => props.canOperate,
+  (val) => {
+    graphStore.canOperate = val ?? false
+  },
+  {
+    immediate: true,
+  }
+)
 onMounted(() => {
   initShapes()
   document.addEventListener('keydown', (e) => {
@@ -398,6 +443,8 @@ onMounted(() => {
     }
   });
 
+  // 监听所在图表弹窗位置信息事件
+  eventBus.on('locate-chart-position', handleLocateChartPosition)
 })
 
 onUnmounted(() => {
@@ -407,6 +454,9 @@ onUnmounted(() => {
       graphStore.selectedIds = []
     }
   });
+
+  // 移除所在图表弹窗位置信息事件监听器
+  eventBus.off('locate-chart-position', handleLocateChartPosition)
 })
 
 defineExpose({
@@ -455,105 +505,21 @@ defineExpose({
   position: absolute;
 }
 
-/* 缩放条样式 */
-.zoom-bar {
-  position: absolute;
-  bottom: 0;
-  right: 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: 1000;
-  gap: 6px;
-  padding: 0 10px;
-}
-
+/* 缩放百分比显示 */
 .zoom-level {
+  position: absolute;
+  bottom: 30px;
+  right: 15px;
   font-size: 10px;
   font-weight: 500;
   min-width: 35px;
   text-align: center;
   color: #333;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 2px 6px;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
-.zoom-slider {
-  width: 150px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.zoom-slider input[type="range"] {
-  width: 100%;
-  height: 2px;
-  border-radius: 1px;
-  background: #e0e0e0;
-  outline: none;
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.zoom-slider input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: #1890ff;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.zoom-slider input[type="range"]::-webkit-slider-thumb:hover {
-  background: #40a9ff;
-  transform: scale(1.1);
-}
-
-.zoom-slider input[type="range"]::-moz-range-thumb {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: #1890ff;
-  cursor: pointer;
-  border: none;
-  transition: all 0.2s;
-}
-
-.zoom-slider input[type="range"]::-moz-range-thumb:hover {
-  background: #40a9ff;
-  transform: scale(1.1);
-}
-
-.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;
-}
-
-.zoom-button:hover {
-  background: #f5f5f5;
-  border-color: #1890ff;
-  color: #1890ff;
-}
 
-.zoom-button:active {
-  background: #e6f7ff;
-}
 </style>