feat: 物料拖拽多人协作 & 选区同步功能

Author: ztygod

mockServer/package.json

@@ -40,7 +40,11 @@
     "koa-compose": "^4.1.0",
     "koa-jwt": "^3.6.0",
     "koa-router": "^8.0.8",
-    "koa-static2": "^0.1.8"
+    "koa-static2": "^0.1.8",
+    "yjs": "^13.6.8",
+    "y-websocket": "^1.5.0",
+    "ws": "^8.13.0",
+    "lib0": "^0.2.55"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

mockServer/src/app.js

@@ -14,12 +14,16 @@ import Koa2 from 'koa'
 import KoaBody from 'koa-body'
 import KoaStatic from 'koa-static2'
 import path from 'path'
+import http from 'http'
+import WebSocket from 'ws'
+import { setupWSConnection, docs } from 'y-websocket/bin/utils'
 import { env, port } from './config/config'
 import ErrorRoutesCatch from './middleware/ErrorRoutesCatch'
 import ErrorRoutes from './routes/error-routes'
 import MainRoutes from './routes/main-routes'
 
 const app = new Koa2()
+// -------------------- HTTP 相关中间件 --------------------
 app
   .use((ctx, next) => {
     ctx.set('Access-Control-Allow-Origin', '*')
@@ -56,6 +60,34 @@ if (env === 'development') {
   })
 }
 
-app.listen(port)
+// -------------------- 创建 HTTP Server --------------------
+const server = http.createServer(app.callback())
+
+// -------------------- Yjs WebSocket --------------------
+const wss = new WebSocket.Server({ server })
+
+wss.on('connection', (conn, req) => {
+  setupWSConnection(conn, req, { gc: true })
+
+  const docName = req.url.slice(1) // 去掉开头的 '/'
+  const doc = docs.get(docName)
+  if (doc) {
+    doc.on('update', (update, origin, docInstance) => {
+      console.log(`
+        ==== Yjs Server Stats (Doc Changed) ====
+        Time: ${new Date().toLocaleString()}
+        DocId: ${docName}
+        Update byteLength: ${update.byteLength}
+        Current connections: ${docInstance.conns?.size ?? 0}
+        ==========================
+      `)
+    })
+  }
+})
+
+// -------------------- 启动服务 --------------------
+server.listen(port, () => {
+  console.log(`HTTP+Yjs server listening at http://localhost:${port} , WebSocket: ws://localhost:${port}/ws`)
+})
 
 export default app

packages/build/vite-config/src/vite-plugins/devAliasPlugin.js

@@ -16,6 +16,10 @@ const getDevAlias = (useSourceAlias) => {
     '@opentiny/tiny-engine-common/component': path.resolve(basePath, 'packages/common/component'),
     '@opentiny/tiny-engine-common/js': path.resolve(basePath, 'packages/common/js'),
     '@opentiny/tiny-engine-common': path.resolve(basePath, 'packages/common/index.ts'),
+    '@opentiny/tiny-engine-multi-person-collaboration': path.resolve(
+      basePath,
+      'packages/multi-person-collaboration/src/index'
+    ),
     '@opentiny/tiny-engine-plugin-materials': path.resolve(basePath, 'packages/plugins/materials/index.ts'),
     '@opentiny/tiny-engine-plugin-block': path.resolve(basePath, 'packages/plugins/block/index.ts'),
     '@opentiny/tiny-engine-plugin-state': path.resolve(basePath, 'packages/plugins/state/index.ts'),

packages/canvas/container/src/CanvasContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-for="state in multiSelectedStates" :key="state.id">
+  <div v-for="state in allMultiSelectedStates" :key="state.id">
     <canvas-action
       :hoverState="hoverState"
       :inactiveHoverState="inactiveHoverState"
@@ -8,6 +8,7 @@
       :windowGetClickEventTarget="target"
       :resize="canvasState.type === 'absolute'"
       :multiStateLength="multiStateLength"
+      :remoteStatesLength="remoteStatesLength"
       :isMultiDragging="isMultiDragging"
       @select-slot="selectSlot"
       @setting="settingModel"
@@ -91,8 +92,12 @@ import {
   clearLineState,
   querySelectById,
   getCurrent,
-  canvasApi
+  canvasApi,
+  getRect
 } from './container'
+import { initHook, HOOK_NAME } from '@opentiny/tiny-engine-meta-register'
+import useCollabSchema from '@opentiny/tiny-engine-multi-person-collaboration'
+import { useRealtimeCollab } from '@opentiny/tiny-engine-meta-register'
 
 export default {
   components: {
@@ -138,7 +143,53 @@ export default {
 
     const { multiSelectedStates, isMouseDown } = useMultiSelect()
 
+    // Awareness 是否完成初始化，initHook之后才能得到 remoteStates数据
+    const isReady = ref(false)
+
+    // Awareness 远端数据
+    const remoteStates = ref({})
+
+    // 滚动保持节点位置同步
+    const syncRemoteStatesSelections = ref([])
+
+    // 全部 Selection States 信息
+    const allMultiSelectedStates = computed(() => {
+      return [...multiSelectedStates.value, ...syncRemoteStatesSelections.value]
+    })
+
+    // 将 state 映射成带位置信息的 selection
+    const mapStateToSelection = (state) => {
+      const element = querySelectById(state.selection.id)
+      if (!element) return null
+      const { top, left, width, height } = getRect(element)
+      return {
+        ...state,
+        isRemote: true,
+        user: state.user,
+        top,
+        left,
+        width,
+        height
+      }
+    }
+
+    // 远端 selections，自动过滤不存在的元素
+    const remoteStatesSelections = computed(() => {
+      if (!remoteStates.value) return []
+
+      return Object.values(remoteStates.value)
+        .filter((state) => state.selection)
+        .map(mapStateToSelection)
+        .filter(Boolean)
+    })
+
+    // 手动刷新远端节点位置
+    const syncRemoteNode = () => {
+      syncRemoteStatesSelections.value = syncRemoteStatesSelections.value.map(mapStateToSelection).filter(Boolean)
+    }
+
     const multiStateLength = computed(() => multiSelectedStates.value.length)
+    const remoteStatesLength = computed(() => syncRemoteStatesSelections.value.length)
     const {
       startMultiDrag,
       moveMultiDrag,
@@ -397,6 +448,26 @@ export default {
         registerHotkeyEvent(doc)
 
         win.addEventListener('scroll', syncNodeScroll, true)
+        win.addEventListener('scroll', syncRemoteNode, true)
+
+        const { insertSharedNode, deleteSharedNode, updateUserSelection, remoteStates } = useCollabSchema({
+          roomId: 'schema-yjs',
+          currentUser: {
+            id: 2,
+            name: 'Bob',
+            color: '#4ECDC4',
+            avatarUrl: 'https://i.pravatar.cc/150?img=2'
+          }
+        })
+
+        initHook(HOOK_NAME.useRealtimeCollab, {
+          insertSharedNode,
+          deleteSharedNode,
+          updateUserSelection,
+          remoteStates
+        })
+
+        isReady.value = true
       }
     }
     // 设置弹窗
@@ -452,6 +523,30 @@ export default {
     document.addEventListener('beforeCanvasReady', beforeCanvasReady)
     document.addEventListener('canvasReady', canvasReady)
 
+    watch(isReady, (newVal) => {
+      if (newVal) {
+        const newStates = useRealtimeCollab().remoteStates
+        remoteStates.value = newStates
+      }
+    })
+
+    watch(
+      remoteStatesSelections,
+      (newVal) => {
+        syncRemoteStatesSelections.value = newVal
+      },
+      { immediate: true }
+    )
+
+    watch(
+      remoteStates,
+      (newVal) => {
+        // eslint-disable-next-line no-console
+        console.log('remoteStates变动', newVal)
+      },
+      { deep: true }
+    )
+
     return {
       isMouseDown,
       iframe,
@@ -477,7 +572,12 @@ export default {
       srcAttrName,
       isMultiDragging,
       multiDragState,
-      getMultiDragPositionText
+      getMultiDragPositionText,
+      remoteStates,
+      allMultiSelectedStates,
+      remoteStatesSelections,
+      remoteStatesLength,
+      syncRemoteStatesSelections
     }
   }
 }

packages/canvas/container/src/components/CanvasAction.vue

@@ -9,7 +9,7 @@
       width: selectState.width + 'px'
     }"
   >
-    <div v-if="showQuickAction" ref="labelRef" class="corner-mark-left" :style="labelStyle">
+    <div v-if="showQuickAction && !haveRemoteState" ref="labelRef" class="corner-mark-left" :style="labelStyle">
       <span>{{ selectState.componentName }}</span>
       <TinyPopover
         v-model="showPopover"
@@ -25,6 +25,9 @@
         </template>
       </TinyPopover>
     </div>
+    <div v-else-if="haveRemoteState" ref="labelRef" class="corner-mark-left" :style="labelStyle">
+      <span> {{ selectState.user.name }} 正在编辑 </span>
+    </div>
     <!-- 绝对定位画布时调节元素大小 -->
     <template v-else>
       <div
@@ -68,7 +71,7 @@
         @mousedown.stop="onMousedown($event, 'end', 'end')"
       ></div>
     </template>
-    <div v-if="showAction" ref="optionRef" class="corner-mark-right" :style="fixStyle">
+    <div v-if="showAction && !haveRemoteState" ref="optionRef" class="corner-mark-right" :style="fixStyle">
       <template v-if="!isModal">
         <div v-if="showToParent" title="选择父级">
           <icon-chevron-left class="svg-currentcolor" @click.stop="selectParent"></icon-chevron-left>
@@ -134,7 +137,7 @@ import {
   querySelectById
 } from '../container'
 import { useLayout, useMaterial, useCanvas, useMessage } from '@opentiny/tiny-engine-meta-register'
-import { Popover } from '@opentiny/vue'
+import { Numeric, Popover } from '@opentiny/vue'
 import shortCutPopover from './shortCutPopover.vue'
 
 // 工具操作条高度
@@ -186,6 +189,10 @@ export default {
       type: Number,
       default: () => 0
     },
+    remoteStatesLength: {
+      type: Numeric,
+      default: () => {}
+    },
     resize: {
       type: Boolean,
       default: false
@@ -259,6 +266,10 @@ export default {
       return props.multiStateLength < 2
     })
 
+    const haveRemoteState = computed(() => {
+      return props.remoteStatesLength > 0
+    })
+
     const showAction = computed(() => {
       const { schema, parent } = getCurrent()
       if (schema?.props?.['data-id'] === 'root-container') {
@@ -543,6 +554,7 @@ export default {
       fixStyle,
       showAction,
       showQuickAction,
+      haveRemoteState,
       showPopover,
       showToParent,
       activeSetting,

packages/canvas/container/src/composables/useMultiSelect.ts

@@ -1,10 +1,10 @@
 import { ref } from 'vue'
-import { useCanvas, useMessage, useHistory, getOptions } from '@opentiny/tiny-engine-meta-register'
+import { useCanvas, useMessage, useHistory, getOptions, useRealtimeCollab } from '@opentiny/tiny-engine-meta-register'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { getRect, querySelectById, POSITION, insertNode, selectNode, canvasState } from '../container'
 import type { Node } from '../../../types'
 
-interface SelectionState {
+export interface SelectionState {
   id: string
   top?: number
   left?: number
@@ -114,6 +114,9 @@ export const useMultiSelect = () => {
     // 单选
     multiSelectedStates.value = [selectState]
 
+    // 多人协作
+    useRealtimeCollab().updateUserSelection(selectState)
+
     return true
   }
 

packages/canvas/container/src/container.ts

@@ -26,6 +26,7 @@ import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import Builtin from '../../render/src/builtin/builtin.json' //TODO 画布内外应该分开
 import { useMultiSelect } from './composables/useMultiSelect'
 import type { Node, RootNode } from '../../types'
+import { useRealtimeCollab } from '@opentiny/tiny-engine-meta-register'
 
 export interface DragOffset {
   offsetX: number
@@ -310,6 +311,9 @@ const insertAfter = ({ parent, node, data }: InsertOptions) => {
     position: 'after',
     referTargetNodeId: node.id
   })
+
+  // 多人协作同步
+  useRealtimeCollab().insertSharedNode({ node, parent, data }, POSITION.BOTTOM)
 }
 
 const insertReplace = ({ parent, node, data }: InsertOptions) => {
@@ -327,6 +331,9 @@ const insertReplace = ({ parent, node, data }: InsertOptions) => {
       position: 'replace',
       referTargetNodeId: node.id
     })
+
+    // 多人协作同步
+    useRealtimeCollab().insertSharedNode({ node, parent, data }, POSITION.REPLACE)
   }
 }
 
@@ -342,6 +349,9 @@ const insertBefore = ({ parent, node, data }: InsertOptions) => {
     position: 'before',
     referTargetNodeId: node.id
   })
+
+  // 多人协作同步
+  useRealtimeCollab().insertSharedNode({ node, parent, data }, POSITION.TOP)
 }
 
 const insertInner = ({ node, data }: Omit<InsertOptions, 'parent'>, position: string = '') => {
@@ -355,13 +365,18 @@ const insertInner = ({ node, data }: Omit<InsertOptions, 'parent'>, position: st
     newNodeData: data,
     position: ([POSITION.TOP, POSITION.LEFT] as string[]).includes(position) ? 'before' : 'after'
   })
+
+  // 多人协作同步
+  useRealtimeCollab().insertSharedNode({ node, parent: node, data }, POSITION.TOP)
 }
 
 export const removeNode = (id: string) => {
   useCanvas().operateNode({
     type: 'delete',
     id
   })
+  // 多人协作同步
+  useRealtimeCollab().deleteSharedNode(id)
 }
 
 // 添加外部容器
@@ -377,6 +392,9 @@ const insertContainer = ({ parent, node, data }: InsertOptions) => {
     position: POSITION.OUT,
     referTargetNodeId: node.id
   })
+
+  // 多人协作同步
+  useRealtimeCollab().insertSharedNode({ node, parent, data }, POSITION.OUT)
 }
 
 export const removeNodeById = (id: string) => {