From 0077389f629fb101385ae9e906b14d3e86f8097c Mon Sep 17 00:00:00 2001
From: caixiaofeng <1941338475@qq.com>
Date: Sat, 3 Aug 2024 21:28:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8C=89=E4=BD=8F=E6=8B=96=E5=8A=A8=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useDraggableScroll.ts          | 44 ++++++++++++++++++++++++
 src/views/flowDesign/index.vue           | 13 ++++---
 src/views/flowDesign/nodes/EndNode.vue   |  1 +
 src/views/flowDesign/nodes/StartNode.vue |  1 +
 4 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 src/hooks/useDraggableScroll.ts

diff --git a/src/hooks/useDraggableScroll.ts b/src/hooks/useDraggableScroll.ts
new file mode 100644
index 0000000..1311c83
--- /dev/null
+++ b/src/hooks/useDraggableScroll.ts
@@ -0,0 +1,44 @@
+import { ref, onMounted, onBeforeUnmount, type Ref } from 'vue'
+
+export function useDraggableScroll(containerRef: Ref<HTMLElement | null>) {
+  const isDragging = ref(false);
+  let startX: number, startY: number;
+  let scrollLeft: number, scrollTop: number;
+
+  const onMouseDown = (e: MouseEvent) => {
+    if (!containerRef.value) return;
+    isDragging.value = true;
+    startX = e.pageX;
+    startY = e.pageY;
+    scrollLeft = containerRef.value.scrollLeft;
+    scrollTop = containerRef.value.scrollTop;
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  };
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (!isDragging.value || !containerRef.value) return;
+    const deltaX = e.pageX - startX;
+    const deltaY = e.pageY - startY;
+    containerRef.value.scrollLeft = scrollLeft - deltaX;
+    containerRef.value.scrollTop = scrollTop - deltaY;
+  };
+
+  const onMouseUp = () => {
+    isDragging.value = false;
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  };
+
+  onMounted(() => {
+    containerRef.value?.addEventListener('mousedown', onMouseDown);
+  });
+
+  onBeforeUnmount(() => {
+    containerRef.value?.removeEventListener('mousedown', onMouseDown);
+  });
+
+  return {
+    isDragging,
+  };
+}
diff --git a/src/views/flowDesign/index.vue b/src/views/flowDesign/index.vue
index 1c144fc..8b3ddae 100644
--- a/src/views/flowDesign/index.vue
+++ b/src/views/flowDesign/index.vue
@@ -13,6 +13,7 @@ import type {
 } from './nodes/type'
 import type { FilterRules } from '@/components/AdvancedFilter/type'
 import type { Field } from '@/components/Render/type'
+import { useDraggableScroll } from '@/hooks/useDraggableScroll'
 
 const props = withDefaults(
   defineProps<{
@@ -54,6 +55,9 @@ const activeData = ref<FlowNode>({
 })
 const penalVisible = ref(false)
 const nodesError = ref<Recordable<ErrorInfo[]>>({})
+
+const designerContainerRef = ref<HTMLElement | null>(null)
+useDraggableScroll(designerContainerRef);
 provide('flowDesign', {
   readOnly: readOnly,
   fields: flatFields,
@@ -315,7 +319,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="designer-container">
+  <div class="designer-container cursor-default active:cursor-grabbing" ref="designerContainerRef">
     <div class="tool">
       <slot></slot>
     </div>
@@ -330,7 +334,7 @@ defineExpose({
       </el-tooltip>
     </div>
     <!--流程树-->
-    <div class="node-container">
+    <div class="node-container" >
       <TreeNode :node="process" @addNode="addNode" @delNode="delNode" @activeNode="openPenal" />
     </div>
     <!--属性面板-->
@@ -344,8 +348,8 @@ defineExpose({
   position: relative;
   display: flex;
   flex-direction: row;
-  min-height: 100%;
-  min-width: 100%;
+  height: 100%;
+  width: 100%;
   overflow: auto;
   background-color: var(--flow-bg-color);
 
@@ -376,7 +380,6 @@ defineExpose({
     display: flex;
     align-items: center;
     flex-direction: column;
-    padding-top: 50px;
   }
 }
 </style>
diff --git a/src/views/flowDesign/nodes/EndNode.vue b/src/views/flowDesign/nodes/EndNode.vue
index ab72513..c7b7c73 100644
--- a/src/views/flowDesign/nodes/EndNode.vue
+++ b/src/views/flowDesign/nodes/EndNode.vue
@@ -36,6 +36,7 @@ const activeNode = () => {
 <style scoped lang="scss">
 .node-box {
   position: relative;
+  padding-bottom: 50px;
 
   .end-node-circle {
     width: 10px;
diff --git a/src/views/flowDesign/nodes/StartNode.vue b/src/views/flowDesign/nodes/StartNode.vue
index a45d2bc..82e984d 100644
--- a/src/views/flowDesign/nodes/StartNode.vue
+++ b/src/views/flowDesign/nodes/StartNode.vue
@@ -35,6 +35,7 @@ watchEffect(() => {
 
 <style scoped lang="scss">
 .start-node {
+  padding-top: 50px;
   :deep(.node-box) {
     &:after {
       display: none;