馃巹Hi~澶у濂斤紝鎴戞槸灏忔柊锛岄暱鏈熶粠浜嬪墠绔紑鍙戠殑缂栫▼鐖卞ソ鑰呫€傛垜浼氱敤鏇村鐨勫疄闄呮渚嬭緭鍑烘洿澶氱殑缂栫▼鐭ヨ瘑銆傜浉淇″垎浜槸鎴愰暱鐨勫敮涓€鎹峰緞锛屽笇鏈涙垜鐨勬瘡涓€绡囨枃绔犻兘鑳芥垚涓哄ぇ瀹舵妧鏈惤鍦扮殑鍙傝€儈馃殌鎶€鏈?浠ｇ爜鍒嗕韩鎴戝湪IT200鎬荤粨鎶€鏈涔狅紱鎴戝湪1024Code鍦ㄧ嚎鍐欎唬鐮侊紱鎴戝湪鎺橀噾鍒嗕韩鎶€鏈枃绔狅紱鎴戝湪Github涓婂弬涓庡紑婧愬涔狅紱鎺ㄨ崘鍑犱釜濂界敤鐨勫伐鍏穠ar-conv閫傜敤浜嶸SCodeIDE浠ｇ爜鍙橀噺鍚嶅揩閫熻浆鎹㈠伐鍏穏enerator-vite-plugin蹇€熺敓鎴怴ite鎻掍欢妯℃澘宸ョ▼generator-babel-plugin蹇€熺敓鎴恇abel鎻掍欢妯℃澘宸ョ▼骞惰繘鍏ユ棰楲ogicFlow鏄祦绋嬪浘缂栬緫妗嗘灦锛屾彁渚涙祦绋嬪浘浜や簰鍜岀紪杈戞墍闇€鐨勪竴绯诲垪鍔熻兘锛屼互鍙婄伒娲荤殑鑺傜偣瀹氬埗銆佹彃浠剁瓑鎵╁睍鏈哄埗銆侺ogicFlow鏀寔鍚勭閫昏緫缂栨帓鍦烘櫙鐨勫墠绔爺鍙戝拰瀹氬埗寮€鍙戯紝濡傛祦绋嬪浘銆丒R鍥俱€丅PMN娴佺▼绛夛紝鍦ㄨ亴浣嶅鎵归厤缃€佹満鍣ㄤ汉閫昏緫缂栨帓銆佹棤浠ｇ爜骞冲彴娴佺▼閰嶇疆绛夋柟闈㈡湁寰堝ソ鐨勫簲鐢ㄣ€傛湰鑺傚皢璁茶ВLogicFlow娴佺▼鍥剧紪杈戞鏋剁殑鑷畾涔夎竟锛圗dge锛夛紝浠ヤ究蹇€熷叆闂ㄣ€傝竟鏄繛鎺ヨ妭鐐瑰埌鑺傜偣鐨勫厓绱犮€傞」鐩暣浣撳熀浜嶸ue3+Vite3+Ts4寮€鍙戯紝涓虹啛缁冧娇鐢╒ue3鍜孴ypescript璇硶鐨勬湅鍙嬫彁渚涘府鍔╁拰渚垮埄銆傚鏋滀綘宸茬粡鐔熸倝Vue3鐨勫紑鍙戜範鎯紝寤鸿鐩存帴璁块棶LogicFlow鑾峰彇瀹屾暣鐨勫叆闂ㄦ寚鍗椼€?銆佷簡瑙ｈ嚜瀹氫箟杈圭紭锛圗dge锛夋ā鏉匡細涓庝笂涓€鑺傝嚜瀹氫箟涓氬姟鑺傜偣妯℃澘涓€鏍凤紝Edge涔熼渶瑕佺户鎵垮唴缃殑XxxNode鍜孹xxEdgeModel绫伙紝骞跺鍑虹被鍨嬨€佽鍥惧拰妯″瀷涓変釜閫夐」銆傜浉淇″墠闈㈠鏋滀綘鑳芥垚鍔熻繍琛屾湰鑺傜殑浠ｇ爜锛屾湰鑺備細鏇寸畝鍗曘€備互涓嬩唬鐮佺户鎵胯嚜鍐呯疆鐨凱olylineEdge鍜孭olylineEdgeModel瀹炵幇鏈妭鑷畾涔塃dge锛?/婧愮爜浣嶇疆锛?/src/CustomEdge.tsimport{PolylineEdge,PolylineEdgeModel}from"@logicflow/core";classCustomEdgeNodeextendsPolylineEdge{//瀹樼綉璇存槑锛氱敱浜庤竟缂栬緫鐨勫鏉傛€э紝澶у鏁版儏鍐典笅锛岃嚜瀹氫箟杈规椂涓嶆帹鑽愯嚜瀹氫箟瑙嗗浘}classCustomEdgeModelextendsPolylineEdgeModel{}exportdefault{type:"CustomEdge",view:CustomEdgeNode,model:CustomEdgeModel,}2.浼樺厛娉ㄥ唽浣跨敤锛氫紭鍏堟敞鍐岀殑鍘熷洜鍜屼笂涓€鑺傝鐨勪竴鏍凤紝杩欓噷涓嶅啀璧樿堪锛岃缁х画鎿嶄綔銆?.1娉ㄥ唽鑷畾涔塃dge锛氭敞鍐岃繃绋嬭繕鏄袱姝ワ細棣栧厛灏嗕笂闈㈠啓鐨凜ustomEdge.ts瀵煎叆鍒癆pp.vue涓紱鍏舵锛屽湪render()涔嬪墠閫氳繃lf瀹炰緥涓殑register()鍑芥暟灏咰ustomEdge瀵硅薄浼犻€掔粰register锛?/importcustomEdgeimportCustomEdgefrom"./CustomEdge";//鍑嗗涓や釜Node锛屽苟浣跨敤鑷畾涔塃dge杩炴帴瀹冧滑constgraphData={}onMounted(()=>{//鍦ㄦ墽琛宺ender涔嬪墠Registerlf.value.register(CustomEdge);lf.value.render();})2.2濡備綍浣跨敤鑷畾涔塃dge锛氫笌Node鐨勫畾涔夌浉鍚岋紝鍙槸灏嗚嚜瀹氫箟Edge鏀惧叆杈逛腑锛屼笉鍚岀殑鏄竟闇€瑕佹寚瀹氫袱涓€肩殑婧愯妭鐐笽D鍜岀洰鏍囪妭鐐笽D锛岄€氳繃杩欎袱涓€兼潵瀹氫綅Edge杩炴帴鐨勬槸璋併€倀ype涔熼渶瑕佹寚瀹氫负鑷畾涔塃dge鐨則ype灞炴€у€硷紱//鍑嗗涓や釜鑺傜偣锛岀敤鑷繁瀹氫箟鐨勮竟杩炴帴璧锋潵constgraphData={nodes:[{id:'242b1b6c-1721-4b10-b4ad-c895094cf332',type:'rect',x:100,y:100},{id:'e59d6ecd-68f7-4d50-8e3f-29e67b6e5f16',type:'circle',x:300,y:200}],edges:[{sourceNodeId:'242b1b6c-1721-4b10-b4ad-c895094cf332',targetNodeId:'e59d6ecd-650f7--8e3f-29e67b6e5f16',type:'CustomEdge',}]}3.CustomizetheText&OutlinestyleofEdge锛欵dge鏍峰紡鐨勮嚜瀹氫箟涔熸槸閫氳繃閲嶅啓涓嶅悓鐨勫嚱鏁板疄鐜帮紝姣斿閲嶅啓锛歡etEdgeStyle()銆乬etTextStyle()鍜実etOutlineStyle()锛屾渶鍚庤嚜瀹氫箟绠ご鏍峰紡锛涚被CustomEdgeModel鎵╁睍PolylineEdgeModel{getEdgeStyle(){conststyle=super.getEdgeStyle();const{灞炴€=杩欎釜锛涘鏋?properties.isActived){style.strokeDasharray="44";}style.stroke="姗欒壊";鍥炲綊椋庢牸锛泒getTextStyle(){conststyle=super.getTextStyle();style.color="#3451F1";style.fontSize=20;鏍峰紡.鑳屾櫙&&(style.background.fill="#F2F131");鍥炲綊椋庢牸锛泒getOutlineStyle(){conststyle=super.getOutlineStyle();style.stroke="绾㈣壊";style.hover&&(style.hover.stroke="red");鍥炲綊椋庢牸锛泒}褰撲綘瀹屾垚浠ヤ笂鍔熻兘鐨勬敼鍐欏悗锛屼綘浼氬緱鍒板涓嬫埅鍥剧殑鏁堟灉锛?.寮€鍚竟缂橈紙Edge锛夊姩鐢伙細娣诲姞鍔ㄧ敾鍙互浣撶幇浠庝竴涓狽ode娴佸悜鍙︿竴涓狽ode鐨勮繃绋嬨€傚ぇ澶氭暟娴佺▼鍥剧紪杈戣蒋浠堕兘鏈夋鍔熻兘LF涓彲浠ラ€氳繃lf.openEdgeAnimation(edgeId)鍚姩榛樿鍔ㄧ敾锛屼篃鍙互閫氳繃閲嶅啓getEdgeAnimationStyle()鍑芥暟鏉ヨ嚜瀹氫箟鍔ㄧ敾鐨勫睘鎬э紱鍚敤榛樿鍔ㄧ敾锛氫负闇€瑕佸紑鍚姩鐢荤殑Edge娣诲姞id瀛楁锛屾墽琛屾覆鏌撳嚱鏁皉enderStartanimationafter():constgraphData={edges:[{//娣诲姞id瀛楁id:'702a4d2f-b516-4769-adb0-5a4f4f5c07a9'锛宻ourceNodeId锛?242b1b6c-1721-4b10-b4ad-c895094cf332'锛宼argetNodeId锛?e59d6ecd-68f7-4d50-8e3f-29e67b6e5f16'锛岀被鍨嬶細'CustomEdge'锛屽畨瑁厎=锛堬級]}>{lf.value.render(graphData);//娓叉煋鍚庡紑鍚姩鐢籰f.value.openEdgeAnimation("702a4d2f-b516-4769-adb0-5a4f4f5c07a9");})鑷畾涔夊姩鐢诲睘鎬э細閲嶅啓getEdgeAnimationStyle()鍑芥暟璁剧疆鍔ㄧ敾灞炴€э紝閲嶅啓setAttributes()鍑芥暟浠ュ惎鐢ㄥ姩鐢伙細classCustomEdgeModelextendsPolylineEdgeModel{//...鐪佺暐閮ㄥ垎浠ｇ爜setAttributes():void{this.isAnimation=true;}getEdgeAnimationStyle(){conststyle=super.getEdgeAnimationStyle();style.strokeDasharray="55";style.animationDuration="10s";鍥炲綊椋庢牸锛泒}5.鑷畾涔夎妭鐐归棿鐨勮竟锛圗dge锛夌被鍨嬶細榛樿鐨凟dge绫诲瀷鍙互鍦ㄥ疄渚嬪寲LF鏃堕€氳繃edgeType閫夐」杩涜璋冩暣锛屼篃鍙互浣跨敤lf.setDefaultEdgeType(edgeType)鍑芥暟鎸囧畾锛涘彟澶栵紝涓轰簡婊¤冻涓嶅悓鐨勪笟鍔¤妭鐐圭敱涓嶅悓绫诲瀷鐨勮竟鏉ヨ〃绀恒€備篃鍙互鍦ㄥ疄渚嬪寲LF鏃堕€氳繃璁剧疆edgeGenerator鍑芥暟鏉ュ畾涔夋樉绀鸿鍒欍€傞€氳繃鍑芥暟璁剧疆榛樿绫诲瀷锛歭f.value.setDefaultEdgeType("CustomEdge");閫氳繃閫夐」璁剧疆榛樿绫诲瀷锛歭f銆倂alue=newLogicFlow({edgeType:"CustomEdge",})鏍规嵁鐩稿悓鐨勮妭鐐圭被鍨嬭缃笉鍚岀殑绫诲瀷锛歭f.value=newLogicFlow({edgeGenerator(sourceNode,targetNode,currentEdge?){if(sourceNode.type==='rect')return'CustomEdge'},})6銆佽嚜瀹氫箟绠ご绫诲瀷锛氶€氳繃setTheme()鍑芥暟涓彁渚涚殑绠ご閫夐」锛屽彲浠ユ寚瀹氶粯璁ょ殑Edge绠ご鏍峰紡锛涗篃鍙互鍦ㄧ户鎵縋olylineEdge鍑芥暟鍚庨噸鍐檊etEndArrow()瀹炵幇鏇村鏄剧ず鏍峰紡銆傞€氳繃setTheme()鍑芥暟璁剧疆鍒囧ご鐨勬牱寮忥細f.value.setTheme({arrow:{offset:4,//绠ご鍨傜洿闀垮害verticalLength:2,//绠ご搴曠嚎闀垮害}})閫氳繃閲嶅啓getEndArrow()鍑芥暟锛屾牴鎹睘鎬т紶鍏ョ殑绫诲瀷瀹炵幇涓嶅悓鐨勬晥鏋滐細const{灞炴€э細{arrowType}}=妯″瀷锛沜onst{stroke,strokeWidth}=杩欎釜銆俫etArrowStyle();constpathAttr={stroke,strokeWidth}if(arrowType==='half'){//鍗婄澶磖eturn(h('path',{...pathAttr,d:'M00-105'}))}returnh('path',{...pathAttr,d:'M00-10-5-105z'})}}灏忕粨鏈妭鍒版缁撴潫锛屼綘鐨勪唬鐮侀兘杩愯浜嗗悧锛熸枃绔犱腑缂哄皯涓€浜涜繍琛屾晥鏋滃浘銆傚ぇ瀹跺彲浠ョ洿鎺ヨ闂垜鐨?024code椤圭洰鍦ㄧ嚎棰勮鏁堟灉涓庤嚜宸辩殑浠ｇ爜杩涜瀵规瘮瀛︿範銆備笅涓€鑺傚皢浠嬬粛鏇村浣跨敤LF鏃剁殑閰嶇疆閫夐」銆傚鏋滄偍鐪嬪畬鍚庤寰楁湁鎵€鏀惰幏锛屾杩庣偣璧炪€佽瘎璁恒€佸垎浜拰鏀寔銆備綘鐨勬敮鎸佸拰鑲畾鏄垜缁х画鍐欎笅鍘荤殑鍔ㄥ姏~
