upd: 更新区域内拖拽判断逻辑

wuchunfu · Jul 18, 2023 · f2a0065 · f2a0065
1 parent e8c30fb
commit f2a0065
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 18 deletions.
diff --git a/src/renderer/pages/modules/apidoc/doc-edit/content/apiflow/apiflow.vue b/src/renderer/pages/modules/apidoc/doc-edit/content/apiflow/apiflow.vue
@@ -18,16 +18,16 @@
     <s-selected-node-area v-if="selectionStore.selectedNodeIds.length > 0"></s-selected-node-area>
     <teleport to="body">
       <pre v-if="1" style="position: absolute; right: 420px; top: 40px;max-height: 500px;overflow-y: auto;">
-                <!-- resizeNodeDotState: {{ resizeNodeDotState }} -->
-                <!-- nodesStore: {{ nodesStore }} -->
-                nodeStateStore: {{ nodeStateStore }}
-                <!-- linesStore: {{ linesStore }} -->
-                <!-- lineStateStore: {{ lineStateStore }} -->
-                <!-- createLineDotStore: {{ createLineDotStore }} -->
-                <!-- historyStore: {{ historyStore.doingList.map(v => v.nodeList[0].styleInfo.offsetX) }} -->
-                <!-- selectionStore: {{ selectionStore }} -->
-                <!-- renderAreaStore: {{ renderAreaStore }} -->
-            </pre>
+        <!-- resizeNodeDotState: {{ resizeNodeDotState }} -->
+        nodesStore: {{ nodesStore }}
+        nodeStateStore: {{ nodeStateStore }}
+        <!-- linesStore: {{ linesStore }} -->
+        <!-- lineStateStore: {{ lineStateStore }} -->
+        <!-- createLineDotStore: {{ createLineDotStore }} -->
+        <!-- historyStore: {{ historyStore.doingList.map(v => v.nodeList[0].styleInfo.offsetX) }} -->
+        <!-- selectionStore: {{ selectionStore }} -->
+        <!-- renderAreaStore: {{ renderAreaStore }} -->
+      </pre>
     </teleport>
   </div>
   <canvas
@@ -104,7 +104,7 @@ const cursor = computed(() => {
   if (selectionStore.isHover) {
     return 'move'
   }
-  if (nodeStateStore.hoverNodeId) {
+  if (nodeStateStore.isMouseHoverDragArea) {
     return 'move'
   }
   if (lineStateStore.hoverDragLineId) {
@@ -177,14 +177,24 @@ const initNodes = () => {
       nodeType: 'rect',
       styleInfo: {
         offsetX: 240 * (i + 1),
-        offsetY: 30 + Math.ceil(Math.random() * 100 + 50),
+        offsetY: 30 + 50 * i,
         width: 200,
         height: 130,
         zIndex: i + 1,
         dragZIndex: 1,
       },
       outcomingIds: [],
-      incomingIds: []
+      incomingIds: [],
+      canDragArea: {
+        leftTopPosition: {
+          clientX: 240 * (i + 1) + containerStore.clientX,
+          clientY: 30 + 50 * i + containerStore.clientY,
+        },
+        rightBottomPosition: {
+          clientX: 240 * (i + 1) + 200 + containerStore.clientX,
+          clientY: 30 + 50 * i + 30 + containerStore.clientY,
+        }
+      }
     })
   }
   historyStore.doingList.push({
@@ -197,8 +207,8 @@ const initNodes = () => {
   })
 }
 onMounted(() => {
-  initNodes();
   changeContainerInfo();
+  initNodes();
   changeRenderAreaInfo();
   window.addEventListener('resize', handleResize)
   document.documentElement.addEventListener('mousemove', handleMouseMove);

diff --git a/src/renderer/pages/modules/apidoc/doc-edit/content/apiflow/mouse-handler/mousemove.ts b/src/renderer/pages/modules/apidoc/doc-edit/content/apiflow/mouse-handler/mousemove.ts
@@ -1,4 +1,4 @@
-import { cloneDeep } from '@/helper';
+import { checkPointIsInArea, cloneDeep } from '@/helper';
 import { useFlowConfigStore } from '@/store/apiflow/config';
 import { useFlowContainerStore } from '@/store/apiflow/container';
 import { useFlowCreateLineDotStateStore } from '@/store/apiflow/create-line-state';
@@ -173,7 +173,8 @@ export function changeNodeStateWhenMouseMove(e: MouseEvent): void {
   }
   if (matchedNodes.length === 0 && !createLineDotState.hoverNodeId) {
     nodeStateStore.$patch({
-      hoverNodeId: ''
+      hoverNodeId: '',
+      isMouseHoverDragArea: false,
     })
   } else if (matchedNodes.length !== 0) {
     let maxZIndexNode = matchedNodes[0]
@@ -182,8 +183,14 @@ export function changeNodeStateWhenMouseMove(e: MouseEvent): void {
         maxZIndexNode = matchedNodes[i]
       }
     }
+    const isInDragArea = checkPointIsInArea({
+      clientX: e.clientX,
+      clientY: e.clientY,
+    }, maxZIndexNode.canDragArea)
+    console.log(e.clientX, e.clientY, maxZIndexNode.canDragArea.leftTopPosition, maxZIndexNode.canDragArea.rightBottomPosition)
     nodeStateStore.$patch({
-      hoverNodeId: maxZIndexNode.id
+      hoverNodeId: maxZIndexNode.id,
+      isMouseHoverDragArea: isInDragArea,
     })
   }
 }
@@ -228,6 +235,7 @@ export function changeLineStateWhenMouseMove(e: MouseEvent): void {
 export function changeNodeWhenMouseMove(e: MouseEvent): void {
   const createLineStateStore = useFlowCreateLineDotStateStore();
   const resizeNodeDotStateStore = useFlowResizeNodeStateStore();
+  const containerStore = useFlowContainerStore();
   const nodeStateStore = useFlowNodeStateStore();
   const nodesStore = useFlowNodesStore();
   const lineStateStore = useFlowLineStateStore();
@@ -244,6 +252,10 @@ export function changeNodeWhenMouseMove(e: MouseEvent): void {
       if (matched) {
         matched.styleInfo.offsetX = Math.ceil(nodeStateStore.nodeOffsetXWhenMouseDown + relativeX / configStore.zoom);
         matched.styleInfo.offsetY = Math.ceil(nodeStateStore.nodeOffsetYWhenMouseDown + relativeY / configStore.zoom);
+        matched.canDragArea.leftTopPosition.clientX = matched.styleInfo.offsetX + containerStore.clientX;
+        matched.canDragArea.leftTopPosition.clientY = matched.styleInfo.offsetY + containerStore.clientY;
+        matched.canDragArea.rightBottomPosition.clientX = matched.styleInfo.offsetX + containerStore.clientX + matched.styleInfo.width;
+        matched.canDragArea.rightBottomPosition.clientY = matched.styleInfo.offsetY + containerStore.clientY + 30;
       }
     })
     nodeStateStore.$patch({

diff --git a/src/renderer/store/apiflow/node-state.ts b/src/renderer/store/apiflow/node-state.ts
@@ -7,7 +7,8 @@ export const useFlowNodeStateStore = defineStore('nodeState', {
       hoverNodeId: '',
       dragNodeId: '',
       isMouseDown: false,
-      isMouseDownHeader: false,
+      isMouseDownDragArea: false,
+      isMouseHoverDragArea: false,
       activeNodeId: '',
       mouseDownClientX: 0,
       mouseDownClientY: 0,