mind-map/dist/js/chunk-2d207d0a.js

(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)},n=[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("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("设置当前用户的信息，用于感知数据的同步和显示。即如果其他协同人员激活了某个节点时，会在你当前画布中的该节点上方显示他的头像。")])])}],e={},_=e,i=a("2877"),l=Object(i["a"])(_,v,n,!1,null,null,null);t["default"]=l.exports}}]);