From 6b6b634f494165fd30e5b937a356f5873485a062 Mon Sep 17 00:00:00 2001
From: Lemon <1599456917@qq.com>
Date: Thu, 13 Feb 2025 18:07:12 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E6=80=8E=E5=8A=A0=E5=AE=A1=E7=90=86?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E4=B8=AD=E7=9A=84=E6=B5=81=E7=A8=8B=E5=9B=BE?=
 =?UTF-8?q?=20=E5=B0=8F=E6=89=8B=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceSimpleViewer.vue    | 68 +++++++++++++++++--
 1 file changed, 61 insertions(+), 7 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
index 8d1d3fc6e..afb152da3 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
@@ -1,10 +1,19 @@
 <template>
   <div v-loading="loading" class="process-viewer-container">
-    <SimpleProcessViewer
-      :flow-node="simpleModel"
-      :tasks="tasks"
-      :process-instance="processInstance"
-    />
+    <div
+      ref="wrapperRef"
+      class="process-viewer-wrapper"
+      @mousedown="startDrag"
+      @mousemove="onDrag"
+      @mouseup="stopDrag"
+      @mouseleave="stopDrag"
+    >
+      <SimpleProcessViewer
+        :flow-node="simpleModel"
+        :tasks="tasks"
+        :process-instance="processInstance"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -25,6 +34,32 @@ const tasks = ref([])
 // 流程实例
 const processInstance = ref()
 
+const wrapperRef = ref<HTMLElement>()
+const isDragging = ref(false)
+const startX = ref(0)
+const startY = ref(0)
+const currentX = ref(0)
+const currentY = ref(0)
+
+const startDrag = (e: MouseEvent) => {
+  if (!wrapperRef.value) return
+  isDragging.value = true
+  startX.value = e.clientX - currentX.value
+  startY.value = e.clientY - currentY.value
+}
+
+const onDrag = (e: MouseEvent) => {
+  if (!isDragging.value || !wrapperRef.value) return
+  e.preventDefault()
+  currentX.value = e.clientX - startX.value
+  currentY.value = e.clientY - startY.value
+  wrapperRef.value.style.transform = `translate(${currentX.value}px, ${currentY.value}px)`
+}
+
+const stopDrag = () => {
+  isDragging.value = false
+}
+
 /** 监控模型视图 包括任务列表、进行中的活动节点编号等 */
 watch(
   () => props.modelView,
@@ -84,8 +119,7 @@ const setSimpleModelNodeTaskStatus = (
   // 审批节点
   if (
     simpleModel.type === NodeType.START_USER_NODE ||
-    simpleModel.type === NodeType.USER_TASK_NODE ||
-    simpleModel.type === NodeType.TRANSACTOR_NODE
+    simpleModel.type === NodeType.USER_TASK_NODE
   ) {
     simpleModel.activityStatus = TaskStatusEnum.NOT_START
     if (rejectedTaskActivityIds.includes(simpleModel.id)) {
@@ -171,4 +205,24 @@ const setSimpleModelNodeTaskStatus = (
 </script>
 
 <style lang="scss" scoped>
+.process-viewer-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+
+  .process-viewer-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-width: 100%;
+    min-height: 100%;
+    cursor: grab;
+    user-select: none;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
 </style>
-- 
Gitee


From 0212ef48510236b0bce8e0247c892a38e39f1fb1 Mon Sep 17 00:00:00 2001
From: Lemon <1599456917@qq.com>
Date: Thu, 13 Feb 2025 18:32:00 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E5=9B=BE=20=E5=B0=8F=E6=89=8B=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/SimpleProcessModel.vue                | 90 +++++++++++++++----
 .../detail/ProcessInstanceSimpleViewer.vue    | 68 ++------------
 2 files changed, 81 insertions(+), 77 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
index 8f0a2916b..bab336dcd 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
@@ -26,7 +26,15 @@
         </el-button-group>
       </el-row>
     </div>
-    <div class="simple-process-model" :style="`transform: scale(${scaleValue / 100});`">
+    <div
+      class="simple-process-model"
+      :style="`transform: translate(${currentX}px, ${currentY}px) scale(${scaleValue / 100});`"
+      @mousedown="startDrag"
+      @mousemove="onDrag"
+      @mouseup="stopDrag"
+      @mouseleave="stopDrag"
+      @mouseenter="setGrabCursor"
+    >
       <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
     </div>
   </div>
@@ -80,24 +88,41 @@ let scaleValue = ref(100)
 const MAX_SCALE_VALUE = 200
 const MIN_SCALE_VALUE = 50
 
-// 放大
-const zoomIn = () => {
-  if (scaleValue.value == MAX_SCALE_VALUE) {
-    return
-  }
-  scaleValue.value += 10
+const isDragging = ref(false)
+const startX = ref(0)
+const startY = ref(0)
+const currentX = ref(0)
+const currentY = ref(0)
+
+const setGrabCursor = () => {
+  document.body.style.cursor = 'grab';
 }
 
-// 缩小
-const zoomOut = () => {
-  if (scaleValue.value == MIN_SCALE_VALUE) {
-    return
-  }
-  scaleValue.value -= 10
+const resetCursor = () => {
+  document.body.style.cursor = 'default';
 }
 
-const processReZoom = () => {
-  scaleValue.value = 100
+const startDrag = (e: MouseEvent) => {
+  isDragging.value = true;
+  startX.value = e.clientX - currentX.value;
+  startY.value = e.clientY - currentY.value;
+  setGrabCursor(); // 设置小手光标
+}
+
+const onDrag = (e: MouseEvent) => {
+  if (!isDragging.value) return;
+  e.preventDefault();
+  
+  // 使用 requestAnimationFrame 优化性能
+  requestAnimationFrame(() => {
+    currentX.value = e.clientX - startX.value;
+    currentY.value = e.clientY - startY.value;
+  });
+}
+
+const stopDrag = () => {
+  isDragging.value = false;
+  resetCursor(); // 重置光标
 }
 
 const errorDialogVisible = ref(false)
@@ -193,6 +218,39 @@ const importLocalFile = () => {
     }
   }
 }
+
+// 放大
+const zoomIn = () => {
+  if (scaleValue.value == MAX_SCALE_VALUE) {
+    return
+  }
+  scaleValue.value += 10
+}
+
+// 缩小
+const zoomOut = () => {
+  if (scaleValue.value == MIN_SCALE_VALUE) {
+    return
+  }
+  scaleValue.value -= 10
+}
+
+const processReZoom = () => {
+  scaleValue.value = 100
+}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.simple-process-model-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.simple-process-model {
+  position: relative; // 确保相对定位
+  min-width: 100%; // 确保宽度为100%
+  min-height: 100%; // 确保高度为100%
+}
+</style>
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
index afb152da3..8d1d3fc6e 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
@@ -1,19 +1,10 @@
 <template>
   <div v-loading="loading" class="process-viewer-container">
-    <div
-      ref="wrapperRef"
-      class="process-viewer-wrapper"
-      @mousedown="startDrag"
-      @mousemove="onDrag"
-      @mouseup="stopDrag"
-      @mouseleave="stopDrag"
-    >
-      <SimpleProcessViewer
-        :flow-node="simpleModel"
-        :tasks="tasks"
-        :process-instance="processInstance"
-      />
-    </div>
+    <SimpleProcessViewer
+      :flow-node="simpleModel"
+      :tasks="tasks"
+      :process-instance="processInstance"
+    />
   </div>
 </template>
 <script lang="ts" setup>
@@ -34,32 +25,6 @@ const tasks = ref([])
 // 流程实例
 const processInstance = ref()
 
-const wrapperRef = ref<HTMLElement>()
-const isDragging = ref(false)
-const startX = ref(0)
-const startY = ref(0)
-const currentX = ref(0)
-const currentY = ref(0)
-
-const startDrag = (e: MouseEvent) => {
-  if (!wrapperRef.value) return
-  isDragging.value = true
-  startX.value = e.clientX - currentX.value
-  startY.value = e.clientY - currentY.value
-}
-
-const onDrag = (e: MouseEvent) => {
-  if (!isDragging.value || !wrapperRef.value) return
-  e.preventDefault()
-  currentX.value = e.clientX - startX.value
-  currentY.value = e.clientY - startY.value
-  wrapperRef.value.style.transform = `translate(${currentX.value}px, ${currentY.value}px)`
-}
-
-const stopDrag = () => {
-  isDragging.value = false
-}
-
 /** 监控模型视图 包括任务列表、进行中的活动节点编号等 */
 watch(
   () => props.modelView,
@@ -119,7 +84,8 @@ const setSimpleModelNodeTaskStatus = (
   // 审批节点
   if (
     simpleModel.type === NodeType.START_USER_NODE ||
-    simpleModel.type === NodeType.USER_TASK_NODE
+    simpleModel.type === NodeType.USER_TASK_NODE ||
+    simpleModel.type === NodeType.TRANSACTOR_NODE
   ) {
     simpleModel.activityStatus = TaskStatusEnum.NOT_START
     if (rejectedTaskActivityIds.includes(simpleModel.id)) {
@@ -205,24 +171,4 @@ const setSimpleModelNodeTaskStatus = (
 </script>
 
 <style lang="scss" scoped>
-.process-viewer-container {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-
-  .process-viewer-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    min-width: 100%;
-    min-height: 100%;
-    cursor: grab;
-    user-select: none;
-
-    &:active {
-      cursor: grabbing;
-    }
-  }
-}
 </style>
-- 
Gitee


From f9c74461864b458f00b8e540adf2868d097f0780 Mon Sep 17 00:00:00 2001
From: Lemon <1599456917@qq.com>
Date: Tue, 18 Feb 2025 11:55:46 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E5=9B=BE=20=E5=B0=8F=E6=89=8B=E5=8A=9F=E8=83=BD=20=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E9=87=8D=E7=BD=AE=E5=8A=9F=E8=83=BD=20=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E6=B5=81=E7=A8=8B=E4=BD=8D=E7=BD=AE=E5=90=8E=E6=81=A2?=
 =?UTF-8?q?=E5=A4=8D=E5=8E=9F=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/SimpleProcessModel.vue                | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
index bab336dcd..5a472980c 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="simple-process-model-container position-relative">
-    <div class="position-absolute top-0px right-0px bg-#fff">
+    <div class="position-absolute top-0px right-0px bg-#fff z-index-button-group">
       <el-row type="flex" justify="end">
         <el-button-group key="scale-control" size="default">
           <el-button v-if="!readonly" size="default" @click="exportJson">
@@ -23,6 +23,7 @@
           <el-button size="default" :plain="true" :icon="ZoomOut" @click="zoomOut()" />
           <el-button size="default" class="w-80px"> {{ scaleValue }}% </el-button>
           <el-button size="default" :plain="true" :icon="ZoomIn" @click="zoomIn()" />
+          <el-button size="default" @click="resetPosition">重置</el-button>
         </el-button-group>
       </el-row>
     </div>
@@ -93,6 +94,8 @@ const startX = ref(0)
 const startY = ref(0)
 const currentX = ref(0)
 const currentY = ref(0)
+const initialX = ref(0)
+const initialY = ref(0)
 
 const setGrabCursor = () => {
   document.body.style.cursor = 'grab';
@@ -238,6 +241,18 @@ const zoomOut = () => {
 const processReZoom = () => {
   scaleValue.value = 100
 }
+
+// 在组件初始化时记录初始位置
+onMounted(() => {
+  initialX.value = currentX.value
+  initialY.value = currentY.value
+})
+
+// 重置位置的函数
+const resetPosition = () => {
+  currentX.value = initialX.value
+  currentY.value = initialY.value
+}
 </script>
 
 <style lang="scss" scoped>
@@ -253,4 +268,8 @@ const processReZoom = () => {
   min-width: 100%; // 确保宽度为100%
   min-height: 100%; // 确保高度为100%
 }
+
+.z-index-button-group {
+  z-index: 10;
+}
 </style>
-- 
Gitee


From 58825842abb4ee3afda11eeb80ba8d2828191567 Mon Sep 17 00:00:00 2001
From: Lemon <1599456917@qq.com>
Date: Tue, 18 Feb 2025 12:03:12 +0800
Subject: [PATCH 4/4] =?UTF-8?q?1.=20=E5=A2=9E=E5=8A=A0=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E5=9B=BE=20=E5=B0=8F=E6=89=8B=E5=8A=9F=E8=83=BD=202.=20?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=87=8D=E7=BD=AE=E5=8A=9F=E8=83=BD=20?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E6=B5=81=E7=A8=8B=E4=BD=8D=E7=BD=AE=E5=90=8E?=
 =?UTF-8?q?=E6=81=A2=E5=A4=8D=E5=8E=9F=E4=BD=8D=E7=BD=AE=203.=20=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E6=8C=AA=E5=8A=A8=E7=9A=84=E6=97=B6=E5=80=99=E7=A6=81?=
 =?UTF-8?q?=E7=94=A8=E6=96=87=E6=9C=AC=E9=80=89=E6=8B=A9,=E7=A1=AE?=
 =?UTF-8?q?=E4=BF=9D=E6=8B=96=E5=8A=A8=E6=97=B6=E4=B8=8D=E4=BC=9A=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E6=96=87=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesignerV2/src/SimpleProcessModel.vue         | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
index 5a472980c..daf74867d 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
@@ -114,7 +114,7 @@ const startDrag = (e: MouseEvent) => {
 
 const onDrag = (e: MouseEvent) => {
   if (!isDragging.value) return;
-  e.preventDefault();
+  e.preventDefault(); // 禁用文本选择
   
   // 使用 requestAnimationFrame 优化性能
   requestAnimationFrame(() => {
@@ -261,6 +261,7 @@ const resetPosition = () => {
   height: 100%;
   position: relative;
   overflow: hidden;
+  user-select: none; // 禁用文本选择
 }
 
 .simple-process-model {
-- 
Gitee