馃巹Hi~澶у濂斤紝鎴戞槸灏忔柊锛屼竴鍚嶉暱鏈熶粠浜嬪墠绔紑鍙戠殑缂栫▼鐖卞ソ鑰呫€傛垜浼氱敤鏇村鐨勫疄闄呮渚嬭緭鍑烘洿澶氱殑缂栫▼鐭ヨ瘑銆傚悓鏃讹紝鎴戠浉淇″垎浜槸鎴愰暱鐨勫敮涓€鎹峰緞锛屽湪姝や篃甯屾湜鎴戠殑姣忕瘒鏂囩珷閮借兘鎴愪负澶у鎶€鏈惤鍦扮殑鍙傝€儈馃殌鎶€鏈?浠ｇ爜鍒嗕韩鎴戝湪IT200鎬荤粨鎶€鏈涔狅紱鎴戝湪1024Code鍦ㄧ嚎鍐欎唬鐮侊紱鎴戝湪鎺橀噾鍒嗕韩鎶€鏈枃绔狅紱鎴戝湪Github鍙備笌寮€婧愬涔狅紱鎺ㄨ崘鍑犱釜濂界敤鐨勫伐鍏穠ar-conv閫傜敤浜嶸SCodeIDE浠ｇ爜鍙橀噺鍚嶅揩閫熻浆鎹㈠伐鍏穏enerator-vite-plugin蹇€熺敓鎴怴ite鎻掍欢妯℃澘宸ョ▼generator-babel-plugin蹇€熺敓鎴怋abel鎻掍欢妯℃澘宸ョ▼杩涘叆姝ｉLogicFlow鏄竴涓祦绋嬪浘缂栬緫妗嗘灦锛屽畠鎻愪緵浜嗘祦绋嬪浘浜や簰鍜岀紪杈戞墍蹇呴渶鐨勪竴绯诲垪鍔熻兘锛屼互鍙婄伒娲荤殑鑺傜偣瀹氬埗銆佹彃浠剁瓑鎵╁睍鏈哄埗銆侺ogicFlow鏀寔鍚勭閫昏緫缂栨帓鍦烘櫙鐨勫墠绔爺鍙戝拰瀹氬埗寮€鍙戯紝濡傛祦绋嬪浘銆丒R鍥俱€丅PMN娴佺▼绛夛紝鍦ㄨ亴浣嶅鎵归厤缃€佹満鍣ㄤ汉閫昏緫缂栨帓銆佹棤浠ｇ爜骞冲彴娴佺▼閰嶇疆绛夋柟闈㈡湁寰堝ソ鐨勫簲鐢ㄣ€傛湰鑺傚皢璁茶ВLogicFlow娴佺▼鍥剧紪杈戞鏋跺唴缃殑鑿滃崟鎻掍欢锛屽揩閫熶笂鎵嬨€傛暣浣撻」鐩熀浜嶸ue3+Vite3+Ts4寮€鍙戯紝涓虹啛缁冧娇鐢╒ue3鍜孴ypescript璇硶鐨勬湅鍙嬫彁渚涘府鍔╁拰渚垮埄銆傚鏋滀綘宸茬粡鐔熺粌鎺屾彙浜哣ue3鐨勫紑鍙戜範鎯紝寤鸿鐩存帴璁块棶LogicFlow浠ヨ幏寰楀畬鏁寸殑鍏ラ棬鎸囧崡銆?銆佽彍鍗曟彃浠剁殑瀹夎閰嶇疆锛氳彍鍗曟彃浠剁殑瀹夎閰嶇疆涓庝笂涓€鑺傚唴缃彃浠堕厤缃浉鍚岋紝寮曞叆鐨凪enu瀵硅薄涔熶紶閫掔粰plugins閫夐」LF琚疄渚嬪寲銆傞粯璁よ彍鍗曟敮鎸佸涓嬶細鑺傜偣鍙抽敭鑿滃崟鍒犻櫎澶嶅埗缂栬緫澶嶅埗渚ц竟鍙抽敭鑿滃崟鍒犻櫎鉂岀紪杈戝鍒剁敾甯冨彸閿彍鍗曗潓鉂屸潓2.鑿滃崟椤归厤缃細姣忎釜鑿滃崟椤规敮鎸佺殑閰嶇疆閫夐」濡備笅琛ㄦ墍绀恒€傚彧鏈塩allback鏄繀閫夐」锛氬瓧娈电被鍨嬫槸鍚﹀繀椤绘弿杩皌extstring鏂囨湰鑿滃崟椤规樉绀烘枃鏈琧lassNamestring绫诲悕姣忎釜item榛樿鐨勭被鏄痩f-menu-item锛屽鏋滆缃簡杩欎釜瀛楁锛宑alss浼氬湪鍘熸潵鐨勫熀纭€涓婂姞涓奵la鈥嬧€媠sName銆俰conboolean鏄惁鍒涘缓甯︽湁icon鐨剆panbooth濡傛灉绠€鍗曞鍒朵笉鑳戒赴瀵岃彍鍗曪紝鍙互娣诲姞涓€涓猧con骞惰缃负true锛屽搴旂殑鑿滃崟椤逛細娣诲姞涓€涓甫鏈塴f-menu-icon绫荤殑span锛屼赴瀵岃彍鍗曢€氳繃涓哄叾璁剧疆鑳屾櫙鏉ヨ〃绀猴紝涓€鑸笌className閰嶅悎浣跨敤銆傜偣鍑籧allbackFunction鍚庢墽琛岀殑鍥炶皟鉁呰妭鐐规暟鎹?杈圭紭鏁版嵁/浜嬩欢淇℃伅鍙互鍦ㄤ笁涓彍鍗曞洖璋冧腑鑾峰彇銆?銆佹坊鍔犺彍鍗曢€夐」锛氶粯璁ょ殑鑿滃崟鑲畾瑕嗙洊涓嶄簡瀹為檯鐨勪笟鍔″満鏅紝鎵€浠ュ湪瀹夎鑿滃崟鎻掍欢鍚庯紝鎻愪緵addMenuConfig鎵╁睍鍘熸湁鐨勮彍鍗曢」锛屾墿灞曞悗鐨勮彍鍗曚粛鐒堕渶瑕佸湪涔嬪墠杩涜鎿嶄綔娓叉煋锛氬涓嬩唬鐮侀厤缃妭鐐瑰彸閿彍鍗曟坊鍔犲叡浜拰灞炴€ц彍鍗曪紝渚ц竟鍙抽敭鑿滃崟娣诲姞灞炴€ц彍鍗曪紝鐢诲竷鍙抽敭鑿滃崟娣诲姞鍏变韩鑿滃崟銆俢onstmenuConfig={nodeMenu:[{text:'鍒嗕韩',callback(){alert('鍒嗕韩鎴愬姛锛?);}},{text:'Properties',callback(node:any){alert(`nodeid:${node.id}鑺傜偣绫诲瀷锛?{node.type}鑺傜偣鍧愭爣锛?x:${node.x},y:${node.y})`);},},],edgeMenu:[{text:'Properties',callback(edge:any){alert(`Edgeid:${edge.id}Edgetype:${edge.type}Edgecoordinates:(x:${edge.x},y:${edge.y})婧愯妭鐐筰d:${edge.sourceNodeId}鐩爣鑺傜偣id:${edge.targetNodeId}`);},},],graphMenu:[{text:'鍒嗕韩',callback(){alert('鍒嗕韩鎴愬姛锛?);}},],};lf.value.extension.menu.addMenuConfig(menuConfig);4.閲嶇疆鑿滃崟閫夐」锛氬綋榛樿鐨勮彍鍗曢」涓嶅鐢ㄦ椂锛屽彲浠ユ坊鍔犳柊鐨勮彍鍗曢€夐」杩涘叆锛屽綋涓嶉渶瑕佹彁渚涚殑鑿滃崟鏃讹紝闇€瑕侀噸缃繖浜涘唴缃殑鑿滃崟椤癸紝鍙互鎸夌収涓嬮潰鐨勪唬鐮侊細edgeMenu:false,//鍒犻櫎榛樿杈圭紭鑿滃崟graphMenu:[],//瑕嗙洊榛樿鑿滃崟鍙充晶鐨勫彸閿彍鍗曪紝涓巉alse鎬ц兘鐩稿悓5.鎸囧畾鍏冪礌閰嶇疆鑿滃崟鐨勭被鍨嬶細the涓婇潰鐨勮彍鍗曠殑娣诲姞鍜岄噸缃兘鏄熀浜庢瘮杈冨ぇ鑼冨洿鐨勬搷浣滐紝鑿滃崟椤圭湅璧锋潵瀹屽叏涓€鏍凤紝閭ｄ箞瀵逛簬涓嶅悓绫诲瀷鐨勫厓绱犲浣曢厤缃笉鍚岀殑鑿滃崟椤瑰憿锛熺劧鍚庡線涓嬭蛋锛歭f.value.extension.menu.setMenuByType({type:'rect',menu:[{text:'Share',callback(){alert('SharesuccessfulByType!');}},]})PS锛氫笂闈唬鐮佽缃簡鑺傜偣绫诲瀷asrect鑿滃崟琚浛鎹负鍙湁涓€涓叡浜彍鍗曢」锛屽叾浠栭厤缃寜绫诲瀷鐩稿悓銆?銆佹寚瀹氫笟鍔＄姸鎬佽缃彍鍗曪細涓嶅悓鐨勪笟鍔¤妭鐐逛細鏈変笉鍚岀殑鐘舵€侊紝涓嶅悓鐘舵€佹敮鎸佺殑鑿滃崟椤逛篃涓嶅悓銆傝嚜瀹氫箟鑺傜偣鏃舵牴鎹笉鍚岀殑涓氬姟鐘舵€佽缃彍鍗曢」锛涜嚜瀹氫箟鑺傜偣涓笉鑳界洿鎺ヤ娇鐢↙F瀹炰緥锛岄渶瑕侀€氳繃graphModel娲惧彂浜嬩欢杩涜娑堟伅閫氱煡锛涗紭鍏堢骇锛氭寚瀹氫笟鍔＄姸鎬佽缃彍鍗?鎸囧畾绫诲瀷鍏冪礌閰嶇疆鑿滃崟>甯歌鑿滃崟閰嶇疆>榛樿鑿滃崟銆備笅闈㈢殑浠ｇ爜鏄竴涓粡鍏哥殑鑷畾涔変笟鍔¤妭鐐逛唬鐮侊紝闇€瑕佽鏄庣殑鏄痠sDisabledNode鏄寕浜嗚妭鐐归鐣欑殑properties灞炴€х殑鎵╁睍涓氬姟鑺傜偣锛宔ventCenter.emit()鏄嚜瀹氫箟涓氬姟鑺傜偣涓淳鍙戜簨浠剁殑鍑芥暟,骞朵笖闇€瑕侀厤缃浉搴旂殑鎺ユ敹鍑芥暟杩涜澶勭悊锛歵his.fill='#F0F8FF';this.radius=10;const{properties:{isDisabledNode}}=this;if(!isDisabledNode){//涓洪潪绂佺敤鍏冪礌鍗曠嫭璁剧疆鑿滃崟銆倀his.menu=[{text:'del',callback:(node:any)=>{this.graphModel.deleteNode(node.id);this.graphModel.eventCenter.emit('鑷畾涔?浜嬩欢',鑺傜偣);},},{text:'edit',callback:(node:any)=>{this.graphModel.setElementStateById(node.id,2);},},{text:'copy',callback:(node:any)=>{this.graphModel.cloneNode(node.id);},},];}}}exportdefault{type:"CustomNode",view:RectNode,model:CustomNodeModel,}琛ュ厖鐩戝惉浜嬩欢鍑芥暟锛歭f.value.on('custom:event',(r)=>{console.log(r)});灏忕粨鏈妭鍒版缁撴潫锛屼唬鐮侀噺姣旇緝澶э紝寰堝閰嶇疆涔熶緷璧栧墠闈㈠嚑鑺傜殑瀛︿範锛屾坊鍔犺嚜瀹氫箟Edge鐨勮彍鍗曚篃鏄被浼肩殑鎿嶄綔銆傚唴缃彃浠剁殑浣跨敤鍒拌繖閲屽氨鍛婁竴娈佃惤浜嗭紝鎺ヤ笅鏉ュ氨鏄渶鍚庝竴鑺傦紝鑷畾涔夋彃浠朵簡銆傝嚜瀹氫箟鎻掍欢浼氭洿鏈夌敤鏈熷緟浠ｇ爜鐨勫鐢▇濡傛灉浣犵湅瀹屽悗瑙夊緱鏈夋敹鑾凤紝娆㈣繋鐐硅禐銆佽瘎璁恒€佸垎浜拰鏀寔銆備綘鐨勬敮鎸佸拰鑲畾鏄垜缁х画鍐欎笅鍘荤殑鍔ㄥ姏~
