修改x6

business-css/frontend/src/components/antvx6/index.vue

@@ -43,6 +43,7 @@ const props = defineProps({
 const projectInfo:any = ref(props.projectInfo) // 项目信息
 const isScenario = ref(false) //是否展示历史模拟场景
 const isDisplay = ref(true) // 是否显示
+const isExpansionandcontraction = ref(false) // 是否显示展开收起按钮
 // 为了协助代码演示
 let graph: Graph
 let currentArrowStyle = 'single' // 默认单箭头
@@ -143,6 +144,20 @@ onMounted(() => {
         },
       },
     },
+      interacting: function (cellView) {
+    // 获取当前节点的模型
+      const cell = cellView.cell
+      // 判断节点是否为 'rect' 形状
+      if (cell.shape === 'rect') {
+        // 如果是 'rect' 形状，则禁止节点移动
+        return { nodeMovable: false }
+      }
+      // 其他形状的节点允许所有交互
+      return true
+    }
+    // interacting: {
+    //   nodeMovable: false, // 禁止所有节点移动
+    // },
   })
   // #endregion
 
@@ -151,7 +166,7 @@ onMounted(() => {
   .use(
       new Transform({
         resizing: false, // 通过拖拽边缘调整节点大小
-        rotating: true, // 允许旋转节点
+        rotating: false, // 允许旋转节点
         // scaling 不是 Transform 插件的有效配置项，已移除
       }),
     )
@@ -237,7 +252,7 @@ onMounted(() => {
     ?.appendChild(stencil.container as HTMLElement)
 
     // 监听Graph中节点创建事件
-  graph.on('node:added', (args) => {
+  graph.on('node:added', (args:any) => {
     console.log('节点已添加到画布', args)
     const { node } = args
     
@@ -264,6 +279,9 @@ onMounted(() => {
         graph.removeNode(node)
       }, 100)
     } else {
+      if(node.store && node.store.data && node.store.data.shape === 'rect'){
+        return
+      }
       // 设置固定大小
       node.size(160, 160)
       // 去掉背景节点
@@ -349,6 +367,59 @@ onMounted(() => {
     }
   })
 
+
+
+
+  let startPoint:any = null // 矩形起点
+
+// 监听鼠标按下事件：记录起点
+graph.on('blank:mousedown', (e) => {
+  startPoint = { x: e.x, y: e.y }
+})
+
+// 监听鼠标松开事件：绘制矩形
+graph.on('blank:mouseup', (e) => {
+  console.log('鼠标松开事件', e)
+  if (!startPoint) return
+
+
+  const endPoint = { x: e.x, y: e.y }
+  if(Math.abs(endPoint.x - startPoint.x) <20 && Math.abs(endPoint.y - startPoint.y) <20){
+    return
+  }
+  const width = Math.abs(endPoint.x - startPoint.x)
+  const height = Math.abs(endPoint.y - startPoint.y)
+  const x = Math.min(startPoint.x, endPoint.x)
+  const y = Math.min(startPoint.y, endPoint.y)
+
+  // 添加矩形节点（设置 zIndex 为 -1 确保在最底层）
+  graph.addNode({
+    shape: 'rect',
+    x,
+    y,
+    width,
+    height,
+    zIndex: -1, // 关键：置于底层
+    // interactive: false, // 禁用所有交互
+    // selectable: false, // 明确禁止选中
+    draggable: false, // 明确禁止移动
+     interacting: {
+      nodeMovable: false, // 禁止所有节点移动
+    },
+    attrs: {
+      body: {
+        fill: 'transparent', 
+        stroke: '#999',
+        strokeWidth: 1,
+        strokeDasharray: '5 5', // 设置虚线样式
+      },
+    },
+  })
+
+  startPoint = null // 重置起点
+})
+
+
   // 控制连接桩显示/隐藏
   const showPorts = (ports: NodeListOf<SVGElement>, show: boolean) => {
     for (let i = 0, len = ports.length; i < len; i += 1) {
@@ -846,15 +917,15 @@ function handleClose() {
     </div> -->
     <div class="antvx6-header">
       <div class="header-left-box">
-        <div class="return-icon-box" @click="closeAntvx6">
-          <img src="@/assets/x6/return.png" alt="图标" title="返回工作台" style="cursor: pointer;">
+        <div class="return-icon-box" @click="closeAntvx6"  title="返回工作台">
+          <img src="@/assets/x6/return.png" alt="图标" style="cursor: pointer;">
         </div>
         <div class="project-name">{{ projectInfo.name }}</div>
-        <div class="return-icon-box" @click="analysisAdd">
-          <img src="@/assets/x6/add.png" alt="图标" title="新增模拟分析" style="cursor: pointer;">
+        <div class="return-icon-box" @click="analysisAdd"  title="新增模拟分析">
+          <img src="@/assets/x6/add.png" alt="图标" style="cursor: pointer;">
         </div>
-        <div class="return-icon-box" @click="simulationClick">
-          <img src="@/assets/x6/history.png" alt="图标" title="历史模拟分析" style="cursor: pointer;">
+        <div class="return-icon-box" @click="simulationClick" title="历史模拟分析">
+          <img src="@/assets/x6/history.png" alt="图标"  style="cursor: pointer;">
         </div>
       </div>
       <div class="header-content-box">
@@ -895,6 +966,20 @@ function handleClose() {
           <img src="@/assets/x6/del.png" alt="图标" title="删除"  style="cursor: pointer;"
           @click="deleteNode">
       </div>
+      <div class="line-style-box">
+         <div class="expansionandcontraction-box" v-if="isExpansionandcontraction == false" @click="isExpansionandcontraction = true">
+          <img src="@/assets/x6/expansionandcontraction-left.png">
+        </div>
+        <div v-if="isExpansionandcontraction == true" style="display: flex;align-items: center;">
+          <div class="expansionandcontraction-box" @click="isExpansionandcontraction = false">
+            <img src="@/assets/x6/expansionandcontraction-right.png">
+          </div>
+          <div class="style-content-box">
+            <div class="style-content-box-title">样式</div>
+          </div>
+        </div>
+        
+      </div>
     </div>
     <Createscenario v-if="dialogVisible" :projectInfo="projectInfo" @closeCreatescenario ="closeCreatescenario"/>
     <el-dialog v-model="isScenario" :close-on-click-modal="false"
@@ -1136,4 +1221,50 @@ function handleClose() {
   text-align: center;
   padding-top: 5px;
 }
+.line-style-box{
+  position: absolute;
+  right: 0;
+  height: 100%;
+  /* width: 100px; */
+  /* background-color: #d9d9d9; */
+  z-index: 10;
+  display: flex;
+  align-items: center;
+}
+.expansionandcontraction-box{
+  width:15px;
+  height: 64px;
+  background-color: #ffffff;
+  border: 1px solid #cfcfcf;
+
+  border-radius: 10px 0 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.style-content-box{
+  width: 300px;
+  height: calc(100vh - 60px);
+  border: 1px solid #cfcfcf;
+  border-top: none;
+  border-right: none;
+  background: #fff;
+}
+.style-content-box-title{
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  text-align: left;
+  font-size: 14px;
+  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  font-weight: 700;
+  font-style: normal;
+  font-size: 14px;
+  color: #282828;
+  background-color: rgba(255, 255, 255, 1);
+  box-sizing: border-box;
+  border-bottom:1px solid rgba(238, 238, 238, 1);
+  padding-left: 15px;
+}
 </style>

business-css/frontend/src/views/business/project/index.vue

@@ -277,7 +277,7 @@ function closeAntvx6() {
       <ScenarioModel v-if="isScenario"  :projectInfo="info" ref="Scenario" />
     </el-dialog>
 
-    <div v-if="isShowAntvx6" style="position: fixed;top: 0px;left: 10px; width: 100vw;height: 100vh;background-color: #fff;z-index: 100;">
+    <div v-if="isShowAntvx6" style="position: fixed;top: 0px;left: 0px; width: 100vw;height: 100vh;background-color: #fff;z-index: 100;">
       <Antvx6 ref="antvx6" v-if="isShowAntvx6" :projectInfo="info"   @closeAntvx6="closeAntvx6"/>
     </div>
   </div>