You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

1 lines
8.0 KiB

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d207d0a"],{a1ae:function(s,t,a){"use strict";a.r(t);var v=function(){var s=this;s._self._c;return s._m(0)},e=[function(){var s=this,t=s._self._c;return t("div",[t("h1",[s._v("Cooperate 插件 beta")]),t("blockquote",[t("p",[s._v("v0.7.3+")])]),t("p",[s._v("该插件用于实现协同编辑。")]),t("h2",[s._v("介绍")]),t("p",[s._v("该插件通过"),t("a",{attrs:{href:"https://github.com/yjs/yjs"}},[s._v("Yjs")]),s._v("实现协同编辑,基本原理是将思维导图的树数据转成平级的对象数据,然后通过"),t("a",{attrs:{href:"https://docs.yjs.dev/api/shared-types/y.map"}},[s._v("Y.Map")]),s._v("类型的共享数据进行协同,即当画布上进行了某些操作后会更新"),t("code",[s._v("y.map")]),s._v("对象,然后其他协同的客户端会接收到更新后的数据,再转换回树结构数据,更新画布即可实现实时更新。")]),t("p",[s._v("要实现协同,后端是少不了的,"),t("code",[s._v("Yjs")]),s._v("提供了一些"),t("a",{attrs:{href:"https://docs.yjs.dev/ecosystem/connection-provider"}},[s._v("Connection Provider")]),s._v("。同时也提供了后端的示例,但只是最简单的实现,实际项目中你应该需要重写或完善。")]),t("p",[s._v("你可以选择适合自己的"),t("code",[s._v("Provider")]),s._v(",默认使用的是"),t("a",{attrs:{href:"https://github.com/yjs/y-webrtc"}},[s._v("y-webrtc")]),s._v("。")]),t("h2",[s._v("demo")]),t("p",[s._v("如果你想通过demo来尝试一下可以通过以下步骤:")]),t("ol",[t("li",[s._v("克隆项目及安装依赖:")])]),t("pre",{staticClass:"hljs"},[t("code",[s._v("git "),t("span",{staticClass:"hljs-built_in"},[s._v("clone")]),s._v(" https://github.com/wanglin2/mind-map.git\n"),t("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" mind-map\n"),t("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" simple-mind-map\nnpm i\nnpm link\n"),t("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" ..\n"),t("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web\nnpm i\nnpm link simple-mind-map\n")])]),t("ol",{attrs:{start:"2"}},[t("li",[s._v("修改"),t("code",[s._v("web/src/pages/Edit/components/Edit.vue")]),s._v("文件")])]),t("p",[s._v("注册协同插件,即取消该行注释:")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-comment"},[s._v("// .usePlugin(Cooperate)// 协同插件")]),s._v("\n")])]),t("p",[s._v("将信令服务器地址改为你本机的ip:")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-comment"},[s._v("// cooperateTest 函数")]),s._v("\n\n"),t("span",{staticClass:"hljs-attr"},[s._v("signalingList")]),s._v(": ["),t("span",{staticClass:"hljs-string"},[s._v("'ws://【你的ip】:4444'")]),s._v("]\n")])]),t("ol",{attrs:{start:"3"}},[t("li",[s._v("启动demo项目的本地服务:")])]),t("pre",{staticClass:"hljs"},[t("code",[s._v("// web路径下执行\nnpm run serve\n")])]),t("ol",{attrs:{start:"4"}},[t("li",[s._v("启动信令服务器:")])]),t("pre",{staticClass:"hljs"},[t("code",[s._v("// simple-mind-map路径下执行\nnpm run wsServe\n")])]),t("p",[s._v("该命令执行的是"),t("code",[s._v("simple-mind-map/bin/wsServer.mjs")]),s._v("文件,该文件的内容是从"),t("a",{attrs:{href:"https://github.com/yjs/y-webrtc"}},[s._v("y-webrtc")]),s._v("仓库直接复制的,可能并不完善,请谨慎用于实际项目。")]),t("ol",{attrs:{start:"5"}},[t("li",[s._v("在两个浏览器中访问服务地址:")])]),t("pre",{staticClass:"hljs"},[t("code",[s._v("http://【你的ip】:8080/#/?userName=用户名\n")])]),t("p",[s._v("你可以在不同的浏览器上设置不同的userName。然后就可以在一个浏览器中编辑,在另一个浏览器上看到自动更新了。")]),t("h2",[s._v("注册")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" MindMap "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'simple-mind-map'")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Cooperate "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'simple-mind-map/src/plugins/Cooperate.js'")]),s._v("\nMindMap.usePlugin(Cooperate)\n")])]),t("p",[s._v("注册完且实例化"),t("code",[s._v("MindMap")]),s._v("后可通过"),t("code",[s._v("mindMap.cooperate")]),s._v("获取到该实例。")]),t("h3",[s._v("配置")]),t("p",[s._v("该插件支持一些配置,可在实例化思维导图时传入,支持的配置如下:")]),t("p",[t("code",[s._v("beforeCooperateUpdate")])]),t("p",[s._v("详细信息见【构造函数】篇章的【实例化选项】小节。")]),t("h2",[s._v("方法")]),t("h3",[s._v("getDoc()")]),t("p",[s._v("获取Yjs doc实例。")]),t("h3",[s._v("setProvider(provider, webrtcProviderConfig)")]),t("ul",[t("li",[t("p",[t("code",[s._v("provider")]),s._v(":Yjs的连接提供者,可参考"),t("a",{attrs:{href:"https://docs.yjs.dev/ecosystem/connection-provider"}},[s._v("Connection Provider")]),s._v(",默认为"),t("code",[s._v("null")])])]),t("li",[t("p",[t("code",[s._v("webrtcProviderConfig")]),s._v(":webrtc provider的配置参数,需要传递一个对象,格式如下:")])])]),t("pre",{staticClass:"hljs"},[t("code",[s._v("{ \n "),t("span",{staticClass:"hljs-attr"},[s._v("roomName")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(", "),t("span",{staticClass:"hljs-comment"},[s._v("// 必传,房间名称 ")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("signalingList")]),s._v(": ["),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("],"),t("span",{staticClass:"hljs-comment"},[s._v("// 必传,指定信令服务器")]),s._v("\n ..."),t("span",{staticClass:"hljs-comment"},[s._v("// webrtc provider的其他配置")]),s._v("\n}\n")])]),t("p",[s._v("详细配置可参考"),t("a",{attrs:{href:"https://github.com/yjs/y-webrtc"}},[s._v("y-webrtc")]),s._v("。")]),t("p",[s._v("设置Yjs的连接提供者,"),t("code",[s._v("provider")]),s._v("如果不传,那么默认会使用"),t("code",[s._v("y-webrtc")]),s._v(",你也可以使用其他的"),t("code",[s._v("provider")]),s._v("。")]),t("p",[s._v("如果使用默认的"),t("code",[s._v("y-webrtc")]),s._v(",那么需要通过第二个参数传入必要的配置。")]),t("p",[t("code",[s._v("simple-mind-map/bin/wsServer.mjs")]),s._v("文件提供了一个简单的信令服务器代码,可供测试和参考。")]),t("h3",[s._v("setUserInfo(userInfo)")]),t("ul",[t("li",[t("code",[s._v("userInfo")]),s._v(":用户信息。格式如下:")])]),t("pre",{staticClass:"hljs"},[t("code",[s._v("{\n "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(", "),t("span",{staticClass:"hljs-comment"},[s._v("// 必传,用户唯一的id")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(", "),t("span",{staticClass:"hljs-comment"},[s._v("// 用户名称。name和avatar两个只传一个即可,如果都传了,会显示avatar")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("avatar")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(", "),t("span",{staticClass:"hljs-comment"},[s._v("// 用户头像")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(" "),t("span",{staticClass:"hljs-comment"},[s._v("// 如果没有传头像,那么会以一个圆形来显示名称的第一个字,文字的颜色为白色,圆的颜色可以通过该字段设置")]),s._v("\n}\n")])]),t("p",[s._v("设置当前用户的信息,用于感知数据的同步和显示。即如果其他协同人员激活了某个节点时,会在你当前画布中的该节点上方显示他的头像。")])])}],n={},_=n,i=a("2877"),p=Object(i["a"])(_,v,e,!1,null,null,null);t["default"]=p.exports}}]);