fix: node swap bug

Author: ztygod

packages/multi-person-collaboration/src/config/index.ts

@@ -6,3 +6,6 @@ export const ROOT_SCHEMA_MAP = 'schema'
 
 // 在监听器中需要被忽略的变更
 export const IGNORE_OBSERVER_ORIGIN = 'YOUR_IGNORE_PATCHES'
+
+// 内部 Yjs 键值，不能映射到 schema 上
+export const INTERNAL_YJS_KEYS = ['meta', '_methods_deleted', '_node_deleted']

packages/multi-person-collaboration/src/operation/operationHandler .ts

@@ -191,11 +191,38 @@ export class OperationHandler {
     const targetIndex = childrenArray.toArray().findIndex((node) => node.get('id') === targetId)
     if (targetIndex === -1) return
 
-    const swapIndex = direction === 'up' ? targetIndex - 1 : targetIndex + 1
-    if (swapIndex < 0 || swapIndex >= childrenArray.length) return
+    let swapIndex = direction === 'up' ? targetIndex - 1 : targetIndex + 1
+
+    // 判断 swapIndex 索引所在的节点是否是已删除节点
+    while (swapIndex >= 0 && swapIndex < childrenArray.length) {
+      const swapNode = childrenArray.get(swapIndex)
+      const isDelete = swapNode.get('_node_deleted') === true || swapNode.get('_node_deleted') === 'true'
+
+      if (!isDelete) {
+        // 不是被删除节点，停止循环
+        break
+      }
+
+      // 如果是被删除节点，则继续往前找或往后找
+      swapIndex = direction === 'up' ? swapIndex - 1 : swapIndex + 1
+    }
+
+    if (swapIndex < 0 || swapIndex >= childrenArray.length) {
+      // eslint-disable-next-line no-console
+      console.warn(`[Move] No valid swap target found for direction: ${direction}`)
+      return
+    }
 
     // 调用交换函数
-    this.swapYArrayElements(childrenArray, targetIndex, swapIndex, parentId, targetId, direction)
+    this.swapYArrayElements(
+      childrenArray,
+      targetIndex,
+      swapIndex,
+      parentId,
+      targetId,
+      childrenArray.get(swapIndex).get('id'),
+      direction
+    )
   }
 
   // 修改节点样式
@@ -376,6 +403,7 @@ export class OperationHandler {
     index2: number,
     parentId: string | undefined,
     schemaId: string,
+    swapId: string,
     direction: 'down' | 'up'
   ): void {
     if (index1 === index2 || index1 < 0 || index2 < 0 || index1 >= yarray.length || index2 >= yarray.length) {
@@ -393,6 +421,7 @@ export class OperationHandler {
       direction,
       parentId,
       schemaId,
+      swapId,
       targetIndex: index1,
       swapIndex: index2,
       timestamp: Date.now()

packages/multi-person-collaboration/src/services/schemaManager.ts

@@ -6,7 +6,7 @@ import type { RootNode, UpdateAttributesRole } from '../type'
 import { fromYjs, sanitizeSchema, toYjs } from '../utils'
 import { toRaw } from 'vue'
 import type { YjsProvider } from './providerManager'
-import { IGNORE_OBSERVER_ORIGIN, ROOT_SCHEMA_MAP } from '../config'
+import { IGNORE_OBSERVER_ORIGIN, INTERNAL_YJS_KEYS, ROOT_SCHEMA_MAP } from '../config'
 
 type DiffPatch =
   | { type: 'add' | 'update' | 'delete'; path: (string | number)[]; value?: any }
@@ -27,11 +27,9 @@ type DiffPatch =
   | { type: 'methods-delete'; path: (string | number)[]; nodeId: string; methodsName: string }
   | {
       type: 'array-swap'
-      direction: 'down' | 'up'
       parentId: string | undefined
       schemaId: string
-      targetIndex: number
-      swapIndex: number
+      swapId: string
     }
   | {
       type: 'methods-add-node'
@@ -126,7 +124,6 @@ export class SchemaManager {
             // eslint-disable-next-line no-console
             console.log(`[${docName}] Remote has data. Importing remote schema to UI.`)
             const rawRemoteSchema = fromYjs(yMap!)
-            const INTERNAL_YJS_KEYS = ['meta', '_methods_deleted', '_node_deleted', 'newNode']
             const cleanSchema = sanitizeSchema(rawRemoteSchema, INTERNAL_YJS_KEYS)
             useCanvas().importSchema(cleanSchema)
           }
@@ -199,13 +196,10 @@ export class SchemaManager {
           if (payload && payload.op === 'move') {
             const patch: DiffPatch = {
               type: 'array-swap',
-              direction: payload.direction,
               parentId: payload.parentId,
-              schemaId: payload.schemeId,
-              targetIndex: payload.targetIndex,
-              swapIndex: payload.swapIndex
+              schemaId: payload.schemaId,
+              swapId: payload.swapId
             }
-
             this.applyPatches(docName, [patch])
           } else if (payload && payload.op === 'insert') {
             const patch: DiffPatch = {
@@ -422,10 +416,15 @@ export class SchemaManager {
           const parentNode = patch.parentId ? useCanvas().getNode(patch.parentId, false) : useCanvas().getPageSchema()
           const childrenArray: any[] = parentNode.children
 
-          if (patch.targetIndex > -1 && patch.swapIndex < childrenArray.length) {
-            ;[childrenArray[patch.targetIndex], childrenArray[patch.swapIndex]] = [
-              childrenArray[patch.swapIndex],
-              childrenArray[patch.targetIndex]
+          // 通过 Id 找到需要交换位置两个节点的索引
+          const targetIndex = childrenArray.findIndex((node) => node.id === patch.schemaId)
+          const swapIndex = childrenArray.findIndex((node) => node.id === patch.swapId)
+
+          // 交换位置
+          if (targetIndex > -1 && swapIndex < childrenArray.length) {
+            ;[childrenArray[targetIndex], childrenArray[swapIndex]] = [
+              childrenArray[swapIndex],
+              childrenArray[targetIndex]
             ]
           }
 

packages/multi-person-collaboration/src/utils/index.ts

@@ -94,7 +94,7 @@ export const getValueByPath = (obj: any, path: (string | number)[]): any => {
  * @param keysToFilter - 一个包含需要被移除的键名的数组。
  * @returns 一个只包含纯 UI 数据的、干净的 schema 对象。
  */
-export function sanitizeSchema(schema: any, keysToFilter: string[]): any {
+export function sanitizeSchema(schema: any, keysToFilter?: string[]): any {
   if (typeof schema !== 'object' || schema === null) {
     return schema
   }
@@ -112,7 +112,7 @@ export function sanitizeSchema(schema: any, keysToFilter: string[]): any {
   const sanitizedObject: { [key: string]: any } = {}
   const originalKeys = Object.keys(schema) // 保留原对象的键顺序
   for (const key of originalKeys) {
-    if (keysToFilter.includes(key)) continue
+    if (keysToFilter?.includes(key)) continue
     const child = sanitizeSchema(schema[key], keysToFilter)
     if (child !== undefined) {
       sanitizedObject[key] = child