該功能支援線條以及區域的繪製，包括線條和區域的編輯、取消當前點的繪製回退至上一個點等等
線條繪製=>註冊節點=>配置預設config
程式碼片段：
import ‘。。/。。/。。/。。/。。/flow/comps/style/css/animate。css；//此處 只是個線段的動畫樣式，可自行編寫import { Registry， BaseEdge， EdgeMetadata } from ’。。/。。/。。/。。/core‘；@Registry（“custom-line”）export class CustomLine extends BaseEdge{constructor（metadata？： EdgeMetadata）{super（metadata）；const pathStr： string = this。store。getByPath（“path”）；const path = pathStr。split（“ ”）；const pathVertices： any = ［］；let allPath： any = ［］；let vertices：any = ［］；//用來存放路徑點path。map（（item， index） => {var Regx = /^［A-Za-z］*$/；if （Regx。test（item）） {allPath。push（index） } }）allPath。map（（item，index） => {pathVertices。push（path。slice（item，allPath［index+1］）） }）pathVertices。map（（item， ind） => {if （ind == pathVertices。length - 1） return；vertices。push（{x： parseInt（item［item。length - 2］），y： parseInt（item［item。length - 1］） }） }）this。setProp（{source：{x： parseInt（path［1］），y： parseInt（path［2］）， }，target： {x： parseInt（path［path。length - 2］），y： parseInt（path［path。length - 1］）， }，vertices： vertices， }）； }}CustomLine。config（{ attrs：{ line： { stroke： ’#F59A23‘， strokeWidth：4， targetMarker： “classic”， strokeDasharray： ’5 5‘， opacity：1， style： { animation： ’ant-line 30s infinite linear‘， } }， }， connector： { name： ’rounded‘， args： { radius：1 } }，}）；
監聽線條繪製（開始、結束）
程式碼片段：
import { PenTool， Graph， NodeMetadata， Shape， BaseEdge} from ’@modules/graph/core‘；import { CustomLine } from ’。。/cells‘；export class LineDraw extends PenTool{ constructor（graph）{ super（） this。init（graph） } protected init（graph： Graph）{ this。graph = graph； this。pen = this。createPen（）； document。addEventListener（’keyup‘， （e） => { if （e。code == ’Escape‘） { graph。ui。uncheckToolBarItem（“lineDraw”）； this。pen。clear（）； this。pen。end（）； } }） this。pen。on（“end”， （path： string［］［］， pathBox： any） => { graph。ui。uncheckToolBarItem（“lineDraw”）； path。pop（）； ///不形成閉環 return this。endOfPenLineDrawing（path， pathBox） }）； /// 註冊到工具欄 graph。ui 。addToolBarItem（{ id： “lineDraw”， icon： “i-dividing-line”， tooltip： “線條繪製 | W”， onClick： （） => { this。pen。start（）； graph。ui。checkedToolBarItem（“lineDraw”）； } }） 。bindHotkey（“w”， （）=>{ this。pen。start（）； }）； } protected createPath（options： NodeMetadata）{ return new CustomLine（{ path： options。path }）； }}
繪製結束
程式碼片段：
protected endOfPenDrawing（path： string［］［］， pathBox： any） { const origin = this。graph。graphEngine。localToGraph（0， 0）； const offsetX = 0 - origin。x； const offsetY = 0 - origin。y； const zoom = this。graph。graphEngine。zoom（）； const node = this。createPath（{ x： （pathBox。x / zoom） + （offsetX / zoom）， y： （pathBox。y / zoom） + （offsetY / zoom）， width： pathBox。width / zoom， height： pathBox。height / zoom， path： path。map（p => p。join（“ ”））。join（“ ”）， attrs：{ body：{ strokeWidth： 1， stroke： ’#F59A23‘， opacity：1 } }， }）； this。graph。addCell（node）； } protected createPath（options： NodeMetadata）： SuperNode | BaseEdge{ return this。graph。createNode（ Object。assign（{ shape： “path”， }， options） ）； }
