馃巹Hi~澶у濂斤紝鎴戞槸灏忔柊锛岄暱鏈熶粠浜嬪墠绔紑鍙戠殑缂栫▼鐖卞ソ鑰呫€傛垜浼氱敤鏇村鐨勫疄闄呮渚嬭緭鍑烘洿澶氱殑缂栫▼鐭ヨ瘑锛屾垜鐩镐俊鍒嗕韩鏄垚闀跨殑鍞竴鎹峰緞锛屽湪杩欓噷涔熷笇鏈涙垜鐨勬瘡涓€绡囨枃绔犻兘鑳芥垚涓哄ぇ瀹舵妧鏈惤鍦扮殑鍙傝€儈馃殌鎶€鏈?浠ｇ爜鍒嗕韩鎴戞€荤粨IT200鐨勬妧鏈涔狅紱鎴戝湪1024Code鍦ㄧ嚎鍐欎唬鐮侊紱鎴戝湪鎺橀噾鏂囩珷鍒嗕韩鎶€鏈紱鎴戝湪Github涓婂弬涓庡紑婧愬涔狅紱馃槆鎺ㄨ崘鍑犱釜濂界敤鐨勫伐鍏穠ar-conv閫傜敤浜嶸SCodeIDE浠ｇ爜鍙橀噺鍚嶅揩閫熻浆鎹㈠伐鍏穏enerator-vite-plugin蹇€熺敓鎴怴ite鎻掍欢妯℃澘宸ョ▼generator-babel-plugin蹇€熺敓鎴怋abel鎻掍欢妯℃澘宸ョ▼杩涘叆姝ｉLogicFlowis娴佺▼鍥剧紪杈戞鏋讹紝鎻愪緵娴佺▼鍥句氦浜掑拰缂栬緫鎵€闇€鐨勪竴绯诲垪鍔熻兘锛屼互鍙婄伒娲荤殑鑺傜偣瀹氬埗銆佹彃浠跺寲绛夋墿灞曟満鍒躲€侺ogicFlow鏀寔鍚勭閫昏緫缂栨帓鍦烘櫙鐨勫墠绔爺鍙戝拰瀹氬埗寮€鍙戯紝濡傛祦绋嬪浘銆丒R鍥俱€丅PMN娴佺▼绛夛紝鍦ㄨ亴浣嶅鎵归厤缃€佹満鍣ㄤ汉閫昏緫缂栨帓銆佹棤浠ｇ爜骞冲彴娴佺▼閰嶇疆绛夋柟闈㈡湁寰堝ソ鐨勫簲鐢ㄣ€傛湰鑺傚皢瑙ｉ噴鏇村閰嶇疆閫夐」锛屼互渚垮揩閫熷叆闂↙ogicFlow娴佺▼鍥剧紪杈戞鏋躲€傞」鐩暣浣撳熀浜嶸ue3+Vite3+Ts4寮€鍙戯紝涓虹啛缁冧娇鐢╒ue3鍜孴ypescript璇硶鐨勬湅鍙嬫彁渚涘府鍔╁拰渚垮埄銆傚鏋滀綘宸茬粡绮鹃€歏ue3鐨勫紑鍙戜範鎯紝寤鸿鐩存帴璁块棶LogicFlow鑾峰彇瀹屾暣鐨勫叆闂ㄦ寚鍗椼€?.璁剧疆涓婚Theme锛歀F鎻愪緵浜嗕袱绉嶅疄鐜颁富棰樼殑鏂瑰紡锛屼竴绉嶆槸鍦ㄥ疄渚嬪寲LF瀵硅薄鏃堕厤缃畇tyle閫夐」锛屽彟涓€绉嶆槸浣跨敤鍐呯疆鐨刲f.setTheme({})鍑芥暟鏉ラ厤缃拰璁剧疆涓婚鐨勫叕鍏卞睘鎬у垪琛紙瀹屾暣鐨勯€夐」鍒楄〃瑙乀hemeApi锛夛細灞炴€у悕绉版弿杩皊troke灞炴€у畾涔夌粰瀹氬浘褰㈠厓绱犵殑澶栬疆寤撻鑹瞫troke-dasharray灞炴€у彲浠ユ帶鍒剁敤浜巗trokesstroke-width灞炴€ф寚瀹氬綋鍓嶅璞¤疆寤撶殑瀹藉害fill灞炴€х敤浜庡畾涔夌粰瀹氬浘褰㈠厓绱犲唴閮ㄧ殑棰滆壊fill-opacity灞炴€ф寚瀹氬～鍏呴鑹茬殑涓嶉€忔槑搴︽垨鍐呭鐨勪笉閫忔槑搴﹀綋鍓嶅璞ont-size灞炴€у畾涔夋枃鏈瓧浣撳ぇ灏廲olor灞炴€у畾涔夊疄渚嬪寲LF鏃舵枃鏈鑹查厤缃細conststyleConfig={}//涓婚閰嶇疆椤筶f.value=newLogicFlow({container:container.value,grid:true,//瀹炰緥鍖朙F閰嶇疆涓婚鏃秙tyle:styleConfig,})瀹炰緥鍖朙F鍚庨厤缃細conststyleConfig={}//涓婚閰嶇疆椤筶f.value.setTheme(styleConfig);PS锛氳妭鐐圭殑width銆乭eight銆乺绛夌被浼煎睘鎬х粺绉颁负Shape灞炴€э紝鍥犱负浼氬奖鍝嶉敋鐐逛綅缃拰杩炴帴璁＄畻锛屼笉鑳介€氳繃涓婚璁剧疆锛屽彧鑳藉湪鑷畾涔夋椂璋冩暣銆?.璁剧疆缃戞牸Grid锛氱綉鏍煎湪LF涓殑涓昏浣滅敤鏄畾浣嶈妭鐐圭殑涓績鐐逛互鍙婁綍鏃剁Щ鍔ㄣ€傞粯璁ょ綉鏍奸€夐」鍏抽棴锛屼腑蹇冪偣鍜岀Щ鍔ㄧ殑鏈€灏忓崟浣嶄负1px銆傚綋缃戞牸閫夐」寮€鍚悗锛屾覆鏌撶殑涓績鐐瑰拰绉诲姩鏃剁殑鏈€灏忓崟浣嶄細璋冩暣涓?0px銆備负浜嗗湪鑷畾涔夎妭鐐圭殑瀹介珮鏃舵洿濂界殑瀵归綈缃戞牸锛屽缓璁缃负缃戞牸鏈€灏忓崟浣嶇殑鏁存暟鍊嶃€俢onstgridConfig={size:20,visible:true,type:'mesh',config:{color:'#ababab',thickness:1,},}lf.value=newLogicFlow({container:container.value,缃戞牸:gridConfig,})3.璁剧疆瀵归綈绾縎napline锛氱綉鏍艰В鍐充簡鑺傜偣涓績鐐圭殑瀹氫綅鍜屽榻愰棶棰橈紝褰撶Щ鍔ㄦ椂锛屽涓妭鐐圭殑浣嶇疆璋冩暣闇€瑕侀€氳繃瀵归綈绾挎潵杈呭姪锛岄粯璁ゅ榻愮嚎閫夐」鍚敤鍚庯紝鍙互閫氳繃鍦ㄤ富棰樹腑璁剧疆閫夐」鏉ヨ嚜瀹氫箟瀵归綈绾跨殑鏍峰紡锛沜onststyleConfig={snapline:{stroke:'#1E90FF',//瀵归綈绾块鑹瞫trokeWidth:1,//瀵归綈绾垮搴,}lf.value.setTheme(styleConfig);4.璁剧疆鑳屾櫙鑳屾櫙锛氬湪鍓嶉潰鐨勪緥瀛愪腑锛屽凡缁忓惎鐢ㄤ簡Grid浣滀负鑳屾櫙銆侺F瀵硅薄瀹炰緥鍖栨椂锛屼篃鍙互閫氳繃閫夐」鎺у埗鑳屾櫙銆傞粯璁ゅ叧闂€備慨鏀归€夐」涓鸿儗鏅紱lf.value=newLogicFlow({container:container.value,//grid:true,//鍏抽棴缃戞牸background:{backgroundImage:"url(../grid.svg)",backgroundRepeat:"repeat"}})5.璁剧疆閿洏蹇嵎閿敭鐩橈細蹇嵎閿篃鏄祦绋嬪浘浜у搧涓笉鍙垨缂虹殑鍔熻兘锛屽彲浠ユ瀬澶х殑鏂逛究鐢ㄦ埛浣撻獙銆侺F榛樿绂佺敤蹇嵎閿殑浣跨敤锛屽彲浠ュ湪瀹炰緥鍖朙F鏃跺惎鐢╡nabled閫夐」鏉ユ敮鎸侊紱闄や簡鍐呯疆鐨勫揩鎹烽敭锛孡F杩樻敮鎸佽嚜瀹氫箟鎵╁睍蹇嵎閿殑浣跨敤锛涘唴缃揩鎹烽敭蹇嵎鍔熻兘cmd+corctrl+c澶嶅埗鑺傜偣cmd+vorctrl+v绮樿创鑺傜偣cmd+zorctrl+zundocmd+yorctrl+ybackspace閫€鏍煎垹闄ゆ搷浣滃惎鐢ㄥ揩鎹烽敭浣庨鍊糴=newLogicFlow({container:container.value,keyboard:{enabled:true},})鑷畾涔夊揩鎹烽敭锛氬揩鎹烽敭瀹氫箟瑙勫垯鍚宮ousetrap锛涗笅闈互瀹樼綉鐨勪緥瀛愭潵婕旂ず鑷畾涔夊垹闄よ妭鐐圭殑蹇嵎鏂瑰紡瑙﹀彂key鏃舵坊鍔犱簩娆＄‘璁ゆ彁閱掞紱lf.value=newLogicFlow({container:container.value,keyboard:{enabled:true,shortcuts:[{keys:["backspace"],callback:()=>{constr=window.confirm("Areyou纭畾瑕佸垹闄ゅ悧锛熲€?;if(r){constelements=lf.value!.getSelectElements(true);lf.value?.clearSelectElements();elements.edges.forEach((edge:EdgeConfig)=>lf.value!.deleteEdge(edge.id||''));elements.nodes.forEach((node:NodeConfig)=>lf.value!.deleteNode(node.id||''));}}}]},})6.璁剧疆鍥惧舰缂栬緫鏂瑰紡锛歀F鎻愪緵浜嗘洿澶氶€夐」锛屾柟渚挎帶鍒跺浘褰㈢紪杈戞柟寮忋€備篃鍙互鍦ㄥ疄渚嬪寲LF鏃堕€氳繃options杩涜鍒濆鍖栵紝涔熸敮鎸佸疄渚嬪寲LF閫氳繃lf.updateEditConfig鍑芥暟杩涜璋冩暣锛涘浘缂栬緫妯″紡鏀寔鐨勯€夐」鍒楄〃锛堝畬鏁撮€夐」鍒楄〃瑙乪ditConfigModelApi锛夛細灞炴€у悕榛樿鍊艰鏄巌sSilentModelfalse鏄惁涓洪潤榛樻ā寮弒topZoomGraphfalse绂佹缂╂斁鐢诲竷stopScrollGraphfalse绂佹榧犳爣婊氬姩绉诲姩鐢诲竷stopMoveGraphfalse绂佹鎷栧姩鐢诲竷濡備笅锛屽紑鍚彧璇婚潤榛樻ā寮忥紝绂佹缂╂斁锛岀姝㈤紶鏍囨粴鍔ㄧЩ鍔ㄧ敾甯冿紝绂佹鎷栧姩鐢诲竷锛歭f.value=newLogicFlow({container:container.value,isSilentMode:true,//闈欓煶妯″紡stopZoomGraph:true,//绂佹缂╂斁stopScrollGraph:true,//绂佹榧犳爣婊氬姩绉诲姩鐢诲竷stopMoveGraph:true,//绂佹鎷栧姩鐢诲竷})閫氳繃lf.updateEditConfig鏇寸伒娲荤殑璋冩暣锛歭f.value.updateEditConfig({isSilentMode:false});鎬荤粨鏈妭鍐呭鍒版缁撴潫銆備綘浜嗚В涓婚銆佺綉鏍笺€佸榻愮嚎銆佽儗鏅€佸揩鎹烽敭鍜屽浘琛ㄧ紪杈戞柟娉曞悧锛熻繖浜涢€夐」涓嶆槸蹇呴渶鐨勶紝浣嗘偍闇€瑕佺煡閬撳浣曞湪闇€瑕佹椂閰嶇疆瀹冧滑銆備笅涓€鑺傚紑濮嬩负鎻掍欢閮ㄥ垎鐨勫涔犲仛鍑嗗銆傚姞娌箏濡傛灉鐪嬪畬鏈夋敹鑾凤紝璇风偣璧炪€佽瘎璁恒€佸垎浜€佹敮鎸佷綘鐨勬敮鎸佸拰鑲畾锛屾槸鎴戝潥鎸佸啓浣滅殑鍔ㄥ姏~鏈枃杞嚜https://juejin.cn/post/7187535095392600121銆傚鏈変镜鏉冿紝璇疯仈绯诲垹闄ゃ€?/p>
