Demo4GraphInstanceAPI-bd5fe695.js

/**
*  亲爱的朋友：
*      很高兴你能看到这段文字，这说明你是非常热爱技术、热爱学习的。
*      组件中所有示例都可以通过文档 + typescript描述找到相关配置及用法
*      示例可以为你提供额外的灵感、方便你完成开发目标、节省你工作时间
*      以下代码也许花些时间很容易破解，但相比下面这个方案，通过破解代码来学习知识显然是不划算的：
*      https://relation-graph.com/#/vip-services
*      因为你的时间非常宝贵，开通会员直接查看代码学习、直接沟通解决问题，是最最高效的学习和工作方法，期待你的加入。
**/
              var v=Object.defineProperty;var s=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;var l=(e,o,t)=>o in e?v(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,c=(e,o)=>{for(var t in o||(o={}))g.call(o,t)&&l(e,t,o[t]);if(s)for(var t of s(o))u.call(o,t)&&l(e,t,o[t]);return e};var h=(e,o,t)=>new Promise((i,d)=>{var f=a=>{try{n(t.next(a))}catch(r){d(r)}},b=a=>{try{n(t.throw(a))}catch(r){d(r)}},n=a=>a.done?i(a.value):Promise.resolve(a.value).then(f,b);n((t=t.apply(e,o)).next())});import{m,n as _}from"./index-c13658a0.js";var x=function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",[t("div",{staticStyle:{height:"200px",overflow:"auto","padding-left":"30px","border-bottom":"#efefef solid 1px","padding-top":"10px","font-size":"14px"}},[t("div",{staticStyle:{"font-size":"16px","font-weight":"bold"}},[e._v("API")]),e.english?t("div",{staticStyle:{"padding-left":"20px","line-height":"25px"}},[t("div",[e._v("Please refer to the following declaration file: node_modules/relation-graph/types/${vue2/vue3/react}.d.ts")]),e._v(" "),t("div",{staticStyle:{"font-weight":"bold"}},[e._v("relation-graph Component API")]),e._v(" "),t("div",[e._v("Component interface methods: Refer to the type RelationGraphComponent defined in ${vue2/vue3/react}.d.ts (i.e., the object obtained through this.$refs.graphRef)")]),e._v(" "),t("div",{staticStyle:{"font-weight":"bold"}},[e._v("relation-graph Graph instance API")]),e._v(" "),t("div",[e._v("Graph instance interface methods: Refer to the type RelationGraphInstance defined in ${vue2/vue3/react}.d.ts (i.e., the object obtained through this.$refs.graphRef.getInstance())")])]):t("div",{staticStyle:{"padding-left":"20px","line-height":"25px"}},[t("div",[e._v("请参考以下声明文件:node_modules/relation-graph/types/${vue2/vue3/react}.d.ts")]),t("div",{staticStyle:{"font-weight":"bold"}},[e._v("relation-graph Component API")]),t("div",[e._v("组件接口方法：参考${vue2/vue3/react}.d.ts中定义的类型RelationGraphComponent（即通过this.$refs.graphRef获取的对象）")]),t("div",{staticStyle:{"font-weight":"bold"}},[e._v("relation-graph Graph instance API")]),t("div",[e._v("图谱实例接口方法：参考${vue2/vue3/react}.d.ts中定义的类型RelationGraphInstance（即通过this.$refs.graphRef.getInstance()获取到的对象）")])]),t("el-alert",{attrs:{title:e.english?"The following examples demonstrate the effect of expanding/collapsing a specific node by calling the API interface:":"以下示例通过调用API接口实现了展开/收缩指定节点的效果：",type:"success",closable:!1,"show-icon":""}})],1),t("div",{staticStyle:{height:"40px","padding-left":"20px","padding-top":"5px","border-bottom":"#efefef solid 1px"}},[t("el-button",{attrs:{size:"mini"},on:{click:e.callApi}},[e._v(e._s(e.english?"Expand node":"展开指定节点"))])],1),t("div",{staticStyle:{height:"calc(100vh - 300px)"}},[t("RelationGraph",{ref:"graphRef",attrs:{options:e.hTreeOptions}})],1)])},y=[];const I={name:"Demo",components:{},computed:c({},m(["english"])),data(){return{hTreeOptions:{layouts:[{label:"中心",layoutName:"tree",layoutClassName:"seeks-layout-center",from:"left",min_per_width:300,min_per_height:100}],defaultNodeShape:1,defaultNodeWidth:100,defaultLineShape:2,defaultNodeBorderWidth:0,defaultLineColor:"rgba(0, 186, 189, 1)",defaultNodeColor:"rgba(0, 206, 209, 1)",defaultNodeHeight:30,defaultJunctionPoint:"lr",reLayoutWhenExpandedOrCollapsed:!0,defaultExpandHolderPosition:"right",zoomToFitWhenRefresh:!0,useAnimationWhenExpanded:!0,debug:!1}}},mounted(){this.showHTree()},methods:{showHTree(){const e={rootId:"a",nodes:[{id:"a",text:"a"},{id:"b",text:"b"},{id:"b1",text:"b1"},{id:"b1-1",text:"b1-1"},{id:"b1-2",text:"b1-2"},{id:"b1-3",text:"b1-3"},{id:"b1-4",text:"b1-4"},{id:"b1-5",text:"b1-5"},{id:"b1-6",text:"b1-6"},{id:"b2",text:"b2"},{id:"b2-1",text:"b2-1"},{id:"b2-2",text:"b2-2"},{id:"c",text:"c"},{id:"c1",text:"c1"},{id:"c2",text:"c2"},{id:"c3",text:"c3"}],lines:[{from:"a",to:"b"},{from:"b",to:"b1"},{from:"b1",to:"b1-1"},{from:"b1",to:"b1-2"},{from:"b1",to:"b1-3"},{from:"b1",to:"b1-4"},{from:"b1",to:"b1-5"},{from:"b1",to:"b1-6"},{from:"b",to:"b2"},{from:"b2",to:"b2-1"},{from:"b2",to:"b2-2"},{from:"a",to:"c"},{from:"c",to:"c1"},{from:"c",to:"c2"},{from:"c",to:"c3"}]};this.$refs.graphRef.setJsonData(e,o=>{})},callApi(e){return h(this,null,function*(){const o="a",t=this.$refs.graphRef.getInstance(),i=t.getNodeById(o);i.expanded===!0?yield t.collapseNode(i,e):yield t.expandNode(i,e)})}}},p={};var R=_(I,x,y,!1,w,null,null,null);function w(e){for(let o in p)this[o]=p[o]}const N=function(){return R.exports}();export{N as default};