customNode.js 127 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139414041414142414341444145414641474148414941504151415241534154415541564157415841594160416141624163416441654166416741684169417041714172417341744175417641774178417941804181418241834184418541864187418841894190419141924193419441954196419741984199420042014202420342044205420642074208420942104211421242134214421542164217421842194220422142224223
  1. import {
  2. Graph
  3. } from '@antv/x6'
  4. // transverse vertical
  5. // 横 纵
  6. const weight = 3;
  7. const fontsize = 12;
  8. const nodeSize = {};
  9. const blueIconWidth = 24;
  10. const blueIconHeight = 18;
  11. const registerRootNode = () => {
  12. const shapeName = "root-node";
  13. Graph.registerNode(shapeName, {
  14. width: 0,
  15. height: weight,
  16. markup: [{
  17. tagName: 'text',
  18. selector: 'label',
  19. },
  20. {
  21. tagName: 'rect',
  22. selector: 'line',
  23. },
  24. ],
  25. attrs: {
  26. label: {
  27. fill: '#D0D0D0',
  28. y: -fontsize,
  29. fontSize: fontsize,
  30. },
  31. line: {
  32. height: weight,
  33. stroke: "transparent",
  34. },
  35. },
  36. }, true);
  37. }
  38. // 断路器纵向断开
  39. const registerCircuitBreakerVerticalBreak = () => {
  40. const width = 100;
  41. const height = 30;
  42. const shapeName = "circuit-breaker-vertical-break";
  43. const commonOption = () => {
  44. return {
  45. width: width,
  46. height: height,
  47. markup: [{
  48. tagName: 'text',
  49. selector: 'label',
  50. },
  51. {
  52. tagName: 'rect',
  53. selector: 'line',
  54. },
  55. ],
  56. attrs: {
  57. label: {
  58. fill: '#D0D0D0',
  59. fontSize: fontsize,
  60. },
  61. line: {
  62. width: weight,
  63. height: height / 3,
  64. x: -(weight / 2),
  65. fill: "#b30461",
  66. stroke: "transparent",
  67. },
  68. },
  69. }
  70. }
  71. const leftOption = () => {
  72. const option = commonOption();
  73. option.attrs.label.refX = -15;
  74. option.attrs.label['text-anchor'] = 'end';
  75. return option;
  76. }
  77. const rightOption = () => {
  78. const option = commonOption();
  79. option.attrs.label.refX = 15;
  80. option.attrs.label['text-anchor'] = 'start';
  81. return option;
  82. }
  83. const topOption = (option) => {
  84. option.attrs.label.refY = weight;
  85. option.attrs.line.y = height / 3 * 2;
  86. }
  87. const bottomOption = (option) => {
  88. option.attrs.label.refY = weight + height / 3;
  89. option.attrs.line.y = 0;
  90. }
  91. const registerTopLeft = () => {
  92. const shape = `${shapeName}-top-left`;
  93. nodeSize[shape] = {
  94. width: width,
  95. height: height
  96. };
  97. const option = leftOption();
  98. topOption(option);
  99. Graph.registerNode(shape, option, true);
  100. }
  101. const registerTopRight = () => {
  102. const shape = `${shapeName}-top-right`;
  103. nodeSize[shape] = {
  104. width: width,
  105. height: height
  106. };
  107. const option = rightOption();
  108. topOption(option);
  109. Graph.registerNode(shape, option, true);
  110. }
  111. const registerBottomLeft = () => {
  112. const shape = `${shapeName}-bottom-left`;
  113. nodeSize[shape] = {
  114. width: width,
  115. height: height
  116. };
  117. const option = leftOption();
  118. bottomOption(option);
  119. Graph.registerNode(shape, option, true);
  120. }
  121. const registerBottomRight = () => {
  122. const shape = `${shapeName}-bottom-right`;
  123. nodeSize[shape] = {
  124. width: width,
  125. height: height
  126. };
  127. const option = rightOption();
  128. bottomOption(option);
  129. Graph.registerNode(shape, option, true);
  130. }
  131. registerTopLeft();
  132. registerTopRight();
  133. registerBottomLeft();
  134. registerBottomRight();
  135. }
  136. // 长断路器纵向断开
  137. const registerLongCircuitBreakerVerticalBreak = () => {
  138. const width = 100;
  139. const height = 50;
  140. const shapeName = "long-circuit-breaker-vertical-break";
  141. const commonOption = () => {
  142. return {
  143. width: width,
  144. height: height,
  145. markup: [{
  146. tagName: 'text',
  147. selector: 'label',
  148. },
  149. {
  150. tagName: 'rect',
  151. selector: 'line',
  152. },
  153. ],
  154. attrs: {
  155. label: {
  156. fill: '#D0D0D0',
  157. fontSize: fontsize,
  158. },
  159. line: {
  160. width: weight,
  161. height: height / 5 * 3,
  162. x: -(weight / 2),
  163. fill: "#cbaa07",
  164. stroke: "transparent",
  165. },
  166. },
  167. }
  168. }
  169. const leftOption = () => {
  170. const option = commonOption();
  171. option.attrs.label.refX = -15;
  172. option.attrs.label['text-anchor'] = 'end';
  173. return option;
  174. }
  175. const rightOption = () => {
  176. const option = commonOption();
  177. option.attrs.label.refX = 15;
  178. option.attrs.label['text-anchor'] = 'start';
  179. return option;
  180. }
  181. const topOption = (option) => {
  182. option.attrs.label.refY = weight;
  183. option.attrs.line.y = height / 3 * 2;
  184. }
  185. const bottomOption = (option) => {
  186. option.attrs.label.refY = weight + height / 5 * 3;
  187. option.attrs.line.y = 0;
  188. }
  189. const registerTopLeft = () => {
  190. const shape = `${shapeName}-top-left`;
  191. nodeSize[shape] = {
  192. width: width,
  193. height: height
  194. };
  195. const option = leftOption();
  196. topOption(option);
  197. Graph.registerNode(shape, option, true);
  198. }
  199. const registerTopRight = () => {
  200. const shape = `${shapeName}-top-right`;
  201. nodeSize[shape] = {
  202. width: width,
  203. height: height
  204. };
  205. const option = rightOption();
  206. topOption(option);
  207. Graph.registerNode(shape, option, true);
  208. }
  209. const registerBottomLeft = () => {
  210. const shape = `${shapeName}-bottom-left`;
  211. nodeSize[shape] = {
  212. width: width,
  213. height: height
  214. };
  215. const option = leftOption();
  216. bottomOption(option);
  217. Graph.registerNode(shape, option, true);
  218. }
  219. const registerBottomRight = () => {
  220. const shape = `${shapeName}-bottom-right`;
  221. nodeSize[shape] = {
  222. width: width,
  223. height: height
  224. };
  225. const option = rightOption();
  226. bottomOption(option);
  227. Graph.registerNode(shape, option, true);
  228. }
  229. registerTopLeft();
  230. registerTopRight();
  231. registerBottomLeft();
  232. registerBottomRight();
  233. }
  234. // 长断路器纵向连接
  235. const registerLongCircuitBreakerVerticalLink = () => {
  236. const width = 100;
  237. const height = 50;
  238. const shapeName = "long-circuit-breaker-vertical-link";
  239. const commonOption = () => {
  240. return {
  241. width: width,
  242. height: height,
  243. markup: [{
  244. tagName: 'text',
  245. selector: 'label',
  246. },
  247. {
  248. tagName: 'rect',
  249. selector: 'line',
  250. },
  251. ],
  252. attrs: {
  253. label: {
  254. fill: '#D0D0D0',
  255. fontSize: fontsize,
  256. },
  257. line: {
  258. width: weight,
  259. height: height,
  260. x: -(weight / 2),
  261. fill: "#cbaa07",
  262. stroke: "transparent",
  263. },
  264. },
  265. }
  266. }
  267. const leftOption = () => {
  268. const option = commonOption();
  269. option.attrs.label.refX = -15;
  270. option.attrs.label['text-anchor'] = 'end';
  271. return option;
  272. }
  273. const rightOption = () => {
  274. const option = commonOption();
  275. option.attrs.label.refX = 15;
  276. option.attrs.label['text-anchor'] = 'start';
  277. return option;
  278. }
  279. const topOption = (option) => {
  280. option.attrs.label.refY = weight;
  281. option.attrs.line.y = height / 3 * 2;
  282. }
  283. const bottomOption = (option) => {
  284. option.attrs.label.refY = weight + height / 5 * 3;
  285. option.attrs.line.y = 0;
  286. }
  287. const registerTopLeft = () => {
  288. const shape = `${shapeName}-top-left`;
  289. nodeSize[shape] = {
  290. width: width,
  291. height: height
  292. };
  293. const option = leftOption();
  294. topOption(option);
  295. Graph.registerNode(shape, option, true);
  296. }
  297. const registerTopRight = () => {
  298. const shape = `${shapeName}-top-right`;
  299. nodeSize[shape] = {
  300. width: width,
  301. height: height
  302. };
  303. const option = rightOption();
  304. topOption(option);
  305. Graph.registerNode(shape, option, true);
  306. }
  307. const registerBottomLeft = () => {
  308. const shape = `${shapeName}-bottom-left`;
  309. nodeSize[shape] = {
  310. width: width,
  311. height: height
  312. };
  313. const option = leftOption();
  314. bottomOption(option);
  315. Graph.registerNode(shape, option, true);
  316. }
  317. const registerBottomRight = () => {
  318. const shape = `${shapeName}-bottom-right`;
  319. nodeSize[shape] = {
  320. width: width,
  321. height: height
  322. };
  323. const option = rightOption();
  324. bottomOption(option);
  325. Graph.registerNode(shape, option, true);
  326. }
  327. registerTopLeft();
  328. registerTopRight();
  329. registerBottomLeft();
  330. registerBottomRight();
  331. }
  332. // 接地隔离开关横向断开
  333. const registerEarthingDisconnectorTransverseBreak = () => {
  334. const width = 300;
  335. const height = 15;
  336. const shapeName = "earthing-disconnector-transverse-break";
  337. const commonOption = () => {
  338. return {
  339. width: width,
  340. height: height,
  341. markup: [{
  342. tagName: 'text',
  343. selector: 'label',
  344. },
  345. {
  346. tagName: 'rect',
  347. selector: 'verticalLine',
  348. },
  349. {
  350. tagName: 'rect',
  351. selector: 'transverseLine',
  352. },
  353. {
  354. tagName: 'rect',
  355. selector: 'iconVerticalLineS',
  356. },
  357. {
  358. tagName: 'rect',
  359. selector: 'iconVerticalLineM',
  360. },
  361. {
  362. tagName: 'rect',
  363. selector: 'iconVerticalLineL',
  364. },
  365. {
  366. tagName: 'rect',
  367. selector: 'iconTransverseLine',
  368. },
  369. ],
  370. attrs: {
  371. label: {
  372. fill: '#D0D0D0',
  373. fontSize: fontsize,
  374. "alignment-baseline": "middle"
  375. },
  376. verticalLine: {
  377. width: weight,
  378. height: height,
  379. x: -(weight / 2),
  380. y: 0,
  381. fill: "#b30461",
  382. stroke: "transparent",
  383. },
  384. transverseLine: {
  385. width: height / 3 * 4,
  386. height: weight,
  387. fill: "#b30461",
  388. stroke: "transparent",
  389. },
  390. iconVerticalLineS: {
  391. width: weight,
  392. height: blueIconHeight / 2,
  393. y: blueIconHeight / 4,
  394. fill: "#2acabe",
  395. stroke: "transparent",
  396. },
  397. iconVerticalLineM: {
  398. width: weight,
  399. height: blueIconHeight / 3 * 2,
  400. y: blueIconHeight / 6,
  401. fill: "#2acabe",
  402. stroke: "transparent",
  403. },
  404. iconVerticalLineL: {
  405. width: weight,
  406. height: blueIconHeight,
  407. y: 0,
  408. fill: "#2acabe",
  409. stroke: "transparent",
  410. },
  411. iconTransverseLine: {
  412. width: blueIconWidth - weight * 4,
  413. height: weight,
  414. y: (blueIconHeight - weight) / 2,
  415. fill: "#2acabe",
  416. stroke: "transparent",
  417. }
  418. },
  419. }
  420. }
  421. const leftOption = () => {
  422. const option = commonOption();
  423. option.attrs.label.x = -(height * 6);
  424. option.attrs.label['text-anchor'] = 'end';
  425. option.attrs.transverseLine.x = -(height / 3 * 4);
  426. option.attrs.iconVerticalLineS.x = 0;
  427. option.attrs.iconVerticalLineM.x = weight / 2 * 3;
  428. option.attrs.iconVerticalLineL.x = weight * 3;
  429. option.attrs.iconTransverseLine.x = weight * 4;
  430. option.attrs.iconVerticalLineS.x -= height * 5;
  431. option.attrs.iconVerticalLineM.x -= height * 5;
  432. option.attrs.iconVerticalLineL.x -= height * 5;
  433. option.attrs.iconTransverseLine.x -= height * 5;
  434. return option;
  435. }
  436. const rightOption = () => {
  437. const option = commonOption();
  438. option.attrs.label.x = height * 6;
  439. option.attrs.label['text-anchor'] = 'start';
  440. option.attrs.transverseLine.x = 0;
  441. option.attrs.iconVerticalLineS.x = 0;
  442. option.attrs.iconVerticalLineM.x = -(weight / 2 * 3);
  443. option.attrs.iconVerticalLineL.x = -(weight * 3);
  444. option.attrs.iconTransverseLine.x = weight - blueIconWidth;
  445. option.attrs.iconVerticalLineS.x += height * 5;
  446. option.attrs.iconVerticalLineM.x += height * 5;
  447. option.attrs.iconVerticalLineL.x += height * 5;
  448. option.attrs.iconTransverseLine.x += height * 5;
  449. return option;
  450. }
  451. const topOption = (option) => {
  452. option.attrs.label.y = fontsize / 2;
  453. option.attrs.transverseLine.y = 0;
  454. option.attrs.iconVerticalLineS.y -= blueIconHeight / 2 - weight / 2;
  455. option.attrs.iconVerticalLineM.y -= blueIconHeight / 2 - weight / 2;
  456. option.attrs.iconVerticalLineL.y -= blueIconHeight / 2 - weight / 2;
  457. option.attrs.iconTransverseLine.y -= blueIconHeight / 2 - weight / 2;
  458. }
  459. const bottomOption = (option) => {
  460. option.attrs.label.y = height - weight + fontsize / 2;
  461. option.attrs.transverseLine.y = height - weight;
  462. option.attrs.iconVerticalLineS.y += height - weight / 2 - blueIconHeight / 2;
  463. option.attrs.iconVerticalLineM.y += height - weight / 2 - blueIconHeight / 2;
  464. option.attrs.iconVerticalLineL.y += height - weight / 2 - blueIconHeight / 2;
  465. option.attrs.iconTransverseLine.y += height - weight / 2 - blueIconHeight / 2;
  466. }
  467. const registerTopLeft = () => {
  468. const shape = `${shapeName}-top-left`;
  469. nodeSize[shape] = {
  470. width: width,
  471. height: height
  472. };
  473. const option = leftOption();
  474. topOption(option);
  475. Graph.registerNode(shape, option, true);
  476. }
  477. const registerTopRight = () => {
  478. const shape = `${shapeName}-top-right`;
  479. nodeSize[shape] = {
  480. width: width,
  481. height: height
  482. };
  483. const option = rightOption();
  484. topOption(option);
  485. Graph.registerNode(shape, option, true);
  486. }
  487. const registerBottomLeft = () => {
  488. const shape = `${shapeName}-bottom-left`;
  489. nodeSize[shape] = {
  490. width: width,
  491. height: height
  492. };
  493. const option = leftOption();
  494. bottomOption(option);
  495. Graph.registerNode(shape, option, true);
  496. }
  497. const registerBottomRight = () => {
  498. const shape = `${shapeName}-bottom-right`;
  499. nodeSize[shape] = {
  500. width: width,
  501. height: height
  502. };
  503. const option = rightOption();
  504. bottomOption(option);
  505. Graph.registerNode(shape, option, true);
  506. }
  507. registerTopLeft();
  508. registerTopRight();
  509. registerBottomLeft();
  510. registerBottomRight();
  511. }
  512. // 接地隔离开关横向断开
  513. const registerEarthingDisconnectorTransverseYBreak = () => {
  514. const width = 300;
  515. const height = 15;
  516. const shapeName = "earthing-disconnector-transverse-y-break";
  517. const commonOption = () => {
  518. return {
  519. width: width,
  520. height: height,
  521. markup: [{
  522. tagName: 'text',
  523. selector: 'label',
  524. },
  525. {
  526. tagName: 'rect',
  527. selector: 'verticalLine',
  528. },
  529. {
  530. tagName: 'rect',
  531. selector: 'transverseLine',
  532. },
  533. {
  534. tagName: 'rect',
  535. selector: 'iconVerticalLineS',
  536. },
  537. {
  538. tagName: 'rect',
  539. selector: 'iconVerticalLineM',
  540. },
  541. {
  542. tagName: 'rect',
  543. selector: 'iconVerticalLineL',
  544. },
  545. {
  546. tagName: 'rect',
  547. selector: 'iconTransverseLine',
  548. },
  549. ],
  550. attrs: {
  551. label: {
  552. fill: '#D0D0D0',
  553. fontSize: fontsize,
  554. "alignment-baseline": "middle"
  555. },
  556. verticalLine: {
  557. width: weight,
  558. height: height,
  559. x: -(weight / 2),
  560. y: 0,
  561. fill: "#cbaa07",
  562. stroke: "transparent",
  563. },
  564. transverseLine: {
  565. width: height / 3 * 4,
  566. height: weight,
  567. fill: "#cbaa07",
  568. stroke: "transparent",
  569. },
  570. iconVerticalLineS: {
  571. width: weight,
  572. height: blueIconHeight / 2,
  573. y: blueIconHeight / 4,
  574. fill: "#2acabe",
  575. stroke: "transparent",
  576. },
  577. iconVerticalLineM: {
  578. width: weight,
  579. height: blueIconHeight / 3 * 2,
  580. y: blueIconHeight / 6,
  581. fill: "#2acabe",
  582. stroke: "transparent",
  583. },
  584. iconVerticalLineL: {
  585. width: weight,
  586. height: blueIconHeight,
  587. y: 0,
  588. fill: "#2acabe",
  589. stroke: "transparent",
  590. },
  591. iconTransverseLine: {
  592. width: blueIconWidth - weight * 4,
  593. height: weight,
  594. y: (blueIconHeight - weight) / 2,
  595. fill: "#2acabe",
  596. stroke: "transparent",
  597. }
  598. },
  599. }
  600. }
  601. const leftOption = () => {
  602. const option = commonOption();
  603. option.attrs.label.x = -(height * 6);
  604. option.attrs.label['text-anchor'] = 'end';
  605. option.attrs.transverseLine.x = -(height / 3 * 4);
  606. option.attrs.iconVerticalLineS.x = 0;
  607. option.attrs.iconVerticalLineM.x = weight / 2 * 3;
  608. option.attrs.iconVerticalLineL.x = weight * 3;
  609. option.attrs.iconTransverseLine.x = weight * 4;
  610. option.attrs.iconVerticalLineS.x -= height * 5;
  611. option.attrs.iconVerticalLineM.x -= height * 5;
  612. option.attrs.iconVerticalLineL.x -= height * 5;
  613. option.attrs.iconTransverseLine.x -= height * 5;
  614. return option;
  615. }
  616. const rightOption = () => {
  617. const option = commonOption();
  618. option.attrs.label.x = height * 6;
  619. option.attrs.label['text-anchor'] = 'start';
  620. option.attrs.transverseLine.x = 0;
  621. option.attrs.iconVerticalLineS.x = 0;
  622. option.attrs.iconVerticalLineM.x = -(weight / 2 * 3);
  623. option.attrs.iconVerticalLineL.x = -(weight * 3);
  624. option.attrs.iconTransverseLine.x = weight - blueIconWidth;
  625. option.attrs.iconVerticalLineS.x += height * 5;
  626. option.attrs.iconVerticalLineM.x += height * 5;
  627. option.attrs.iconVerticalLineL.x += height * 5;
  628. option.attrs.iconTransverseLine.x += height * 5;
  629. return option;
  630. }
  631. const topOption = (option) => {
  632. option.attrs.label.y = fontsize / 2;
  633. option.attrs.transverseLine.y = 0;
  634. option.attrs.iconVerticalLineS.y -= blueIconHeight / 2 - weight / 2;
  635. option.attrs.iconVerticalLineM.y -= blueIconHeight / 2 - weight / 2;
  636. option.attrs.iconVerticalLineL.y -= blueIconHeight / 2 - weight / 2;
  637. option.attrs.iconTransverseLine.y -= blueIconHeight / 2 - weight / 2;
  638. }
  639. const bottomOption = (option) => {
  640. option.attrs.label.y = height - weight + fontsize / 2;
  641. option.attrs.transverseLine.y = height - weight;
  642. option.attrs.iconVerticalLineS.y += height - weight / 2 - blueIconHeight / 2;
  643. option.attrs.iconVerticalLineM.y += height - weight / 2 - blueIconHeight / 2;
  644. option.attrs.iconVerticalLineL.y += height - weight / 2 - blueIconHeight / 2;
  645. option.attrs.iconTransverseLine.y += height - weight / 2 - blueIconHeight / 2;
  646. }
  647. const registerTopLeft = () => {
  648. const shape = `${shapeName}-top-left`;
  649. nodeSize[shape] = {
  650. width: width,
  651. height: height
  652. };
  653. const option = leftOption();
  654. topOption(option);
  655. Graph.registerNode(shape, option, true);
  656. }
  657. const registerTopRight = () => {
  658. const shape = `${shapeName}-top-right`;
  659. nodeSize[shape] = {
  660. width: width,
  661. height: height
  662. };
  663. const option = rightOption();
  664. topOption(option);
  665. Graph.registerNode(shape, option, true);
  666. }
  667. const registerBottomLeft = () => {
  668. const shape = `${shapeName}-bottom-left`;
  669. nodeSize[shape] = {
  670. width: width,
  671. height: height
  672. };
  673. const option = leftOption();
  674. bottomOption(option);
  675. Graph.registerNode(shape, option, true);
  676. }
  677. const registerBottomRight = () => {
  678. const shape = `${shapeName}-bottom-right`;
  679. nodeSize[shape] = {
  680. width: width,
  681. height: height
  682. };
  683. const option = rightOption();
  684. bottomOption(option);
  685. Graph.registerNode(shape, option, true);
  686. }
  687. registerTopLeft();
  688. registerTopRight();
  689. registerBottomLeft();
  690. registerBottomRight();
  691. }
  692. // 接地隔离开关横向断开o
  693. const registerEarthingDisconnectorTransverseYoBreak = () => {
  694. const width = 300;
  695. const height = 15;
  696. const shapeName = "earthing-disconnector-transverse-yo-break";
  697. const commonOption = () => {
  698. return {
  699. width: width,
  700. height: height,
  701. markup: [{
  702. tagName: 'text',
  703. selector: 'label',
  704. },
  705. {
  706. tagName: 'rect',
  707. selector: 'verticalLine',
  708. },
  709. {
  710. tagName: 'rect',
  711. selector: 'transverseLine',
  712. },
  713. {
  714. tagName: 'rect',
  715. selector: 'iconVerticalLineS',
  716. },
  717. {
  718. tagName: 'rect',
  719. selector: 'iconVerticalLineM',
  720. },
  721. {
  722. tagName: 'rect',
  723. selector: 'iconVerticalLineL',
  724. },
  725. {
  726. tagName: 'rect',
  727. selector: 'iconTransverseLine',
  728. },
  729. ],
  730. attrs: {
  731. label: {
  732. fill: '#D0D0D0',
  733. fontSize: fontsize,
  734. "alignment-baseline": "middle",
  735. opacity: 0,
  736. },
  737. verticalLine: {
  738. width: weight,
  739. height: height,
  740. x: -(weight / 2),
  741. y: 0,
  742. fill: "#cbaa07",
  743. stroke: "transparent",
  744. opacity: 0,
  745. },
  746. transverseLine: {
  747. width: height / 3 * 4,
  748. height: weight,
  749. fill: "#cbaa07",
  750. stroke: "transparent",
  751. opacity: 0,
  752. },
  753. iconVerticalLineS: {
  754. width: weight,
  755. height: blueIconHeight / 2,
  756. y: blueIconHeight / 4,
  757. fill: "#2acabe",
  758. stroke: "transparent",
  759. opacity: 0,
  760. },
  761. iconVerticalLineM: {
  762. width: weight,
  763. height: blueIconHeight / 3 * 2,
  764. y: blueIconHeight / 6,
  765. fill: "#2acabe",
  766. stroke: "transparent",
  767. opacity: 0,
  768. },
  769. iconVerticalLineL: {
  770. width: weight,
  771. height: blueIconHeight,
  772. y: 0,
  773. fill: "#2acabe",
  774. stroke: "transparent",
  775. opacity: 0,
  776. },
  777. iconTransverseLine: {
  778. width: blueIconWidth - weight * 4,
  779. height: weight,
  780. y: (blueIconHeight - weight) / 2,
  781. fill: "#2acabe",
  782. stroke: "transparent",
  783. opacity: 0,
  784. }
  785. },
  786. }
  787. }
  788. const leftOption = () => {
  789. const option = commonOption();
  790. option.attrs.label.x = -(height * 6);
  791. option.attrs.label['text-anchor'] = 'end';
  792. option.attrs.transverseLine.x = -(height / 3 * 4);
  793. option.attrs.iconVerticalLineS.x = 0;
  794. option.attrs.iconVerticalLineM.x = weight / 2 * 3;
  795. option.attrs.iconVerticalLineL.x = weight * 3;
  796. option.attrs.iconTransverseLine.x = weight * 4;
  797. option.attrs.iconVerticalLineS.x -= height * 5;
  798. option.attrs.iconVerticalLineM.x -= height * 5;
  799. option.attrs.iconVerticalLineL.x -= height * 5;
  800. option.attrs.iconTransverseLine.x -= height * 5;
  801. return option;
  802. }
  803. const rightOption = () => {
  804. const option = commonOption();
  805. option.attrs.label.x = height * 6;
  806. option.attrs.label['text-anchor'] = 'start';
  807. option.attrs.transverseLine.x = 0;
  808. option.attrs.iconVerticalLineS.x = 0;
  809. option.attrs.iconVerticalLineM.x = -(weight / 2 * 3);
  810. option.attrs.iconVerticalLineL.x = -(weight * 3);
  811. option.attrs.iconTransverseLine.x = weight - blueIconWidth;
  812. option.attrs.iconVerticalLineS.x += height * 5;
  813. option.attrs.iconVerticalLineM.x += height * 5;
  814. option.attrs.iconVerticalLineL.x += height * 5;
  815. option.attrs.iconTransverseLine.x += height * 5;
  816. return option;
  817. }
  818. const topOption = (option) => {
  819. option.attrs.label.y = fontsize / 2;
  820. option.attrs.transverseLine.y = 0;
  821. option.attrs.iconVerticalLineS.y -= blueIconHeight / 2 - weight / 2;
  822. option.attrs.iconVerticalLineM.y -= blueIconHeight / 2 - weight / 2;
  823. option.attrs.iconVerticalLineL.y -= blueIconHeight / 2 - weight / 2;
  824. option.attrs.iconTransverseLine.y -= blueIconHeight / 2 - weight / 2;
  825. }
  826. const bottomOption = (option) => {
  827. option.attrs.label.y = height - weight + fontsize / 2;
  828. option.attrs.transverseLine.y = height - weight;
  829. option.attrs.iconVerticalLineS.y += height - weight / 2 - blueIconHeight / 2;
  830. option.attrs.iconVerticalLineM.y += height - weight / 2 - blueIconHeight / 2;
  831. option.attrs.iconVerticalLineL.y += height - weight / 2 - blueIconHeight / 2;
  832. option.attrs.iconTransverseLine.y += height - weight / 2 - blueIconHeight / 2;
  833. }
  834. const registerTopLeft = () => {
  835. const shape = `${shapeName}-top-left`;
  836. nodeSize[shape] = {
  837. width: width,
  838. height: height
  839. };
  840. const option = leftOption();
  841. topOption(option);
  842. Graph.registerNode(shape, option, true);
  843. }
  844. const registerTopRight = () => {
  845. const shape = `${shapeName}-top-right`;
  846. nodeSize[shape] = {
  847. width: width,
  848. height: height
  849. };
  850. const option = rightOption();
  851. topOption(option);
  852. Graph.registerNode(shape, option, true);
  853. }
  854. const registerBottomLeft = () => {
  855. const shape = `${shapeName}-bottom-left`;
  856. nodeSize[shape] = {
  857. width: width,
  858. height: height
  859. };
  860. const option = leftOption();
  861. bottomOption(option);
  862. Graph.registerNode(shape, option, true);
  863. }
  864. const registerBottomRight = () => {
  865. const shape = `${shapeName}-bottom-right`;
  866. nodeSize[shape] = {
  867. width: width,
  868. height: height
  869. };
  870. const option = rightOption();
  871. bottomOption(option);
  872. Graph.registerNode(shape, option, true);
  873. }
  874. registerTopLeft();
  875. registerTopRight();
  876. registerBottomLeft();
  877. registerBottomRight();
  878. }
  879. // 接地隔离开关横向断开2
  880. const registerEarthingDisconnectorTransverse2Break = () => {
  881. const width = 300;
  882. const height = 0;
  883. const h = 15;
  884. const shapeName = "earthing-disconnector-transverse2-break";
  885. const commonOption = () => {
  886. return {
  887. width: width,
  888. height: height,
  889. markup: [{
  890. tagName: 'text',
  891. selector: 'label',
  892. },
  893. {
  894. tagName: 'rect',
  895. selector: 'transverseLine',
  896. },
  897. {
  898. tagName: 'rect',
  899. selector: 'iconVerticalLineS',
  900. },
  901. {
  902. tagName: 'rect',
  903. selector: 'iconVerticalLineM',
  904. },
  905. {
  906. tagName: 'rect',
  907. selector: 'iconVerticalLineL',
  908. },
  909. {
  910. tagName: 'rect',
  911. selector: 'iconTransverseLine',
  912. },
  913. ],
  914. attrs: {
  915. label: {
  916. fill: '#D0D0D0',
  917. fontSize: fontsize,
  918. "alignment-baseline": "middle"
  919. },
  920. transverseLine: {
  921. width: h / 3 * 4,
  922. height: weight,
  923. y: -weight/2,
  924. fill: "#b30461",
  925. stroke: "transparent",
  926. },
  927. iconVerticalLineS: {
  928. width: weight,
  929. height: blueIconHeight / 2,
  930. y: blueIconHeight / 4 - blueIconHeight / 2,
  931. fill: "#2acabe",
  932. stroke: "transparent",
  933. },
  934. iconVerticalLineM: {
  935. width: weight,
  936. height: blueIconHeight / 3 * 2,
  937. y: blueIconHeight / 6 - blueIconHeight / 2,
  938. fill: "#2acabe",
  939. stroke: "transparent",
  940. },
  941. iconVerticalLineL: {
  942. width: weight,
  943. height: blueIconHeight,
  944. y: 0 - blueIconHeight / 2,
  945. fill: "#2acabe",
  946. stroke: "transparent",
  947. },
  948. iconTransverseLine: {
  949. width: blueIconWidth - weight * 4,
  950. height: weight,
  951. y: (blueIconHeight - weight) / 2 - blueIconHeight / 2,
  952. fill: "#2acabe",
  953. stroke: "transparent",
  954. }
  955. },
  956. }
  957. }
  958. const leftOption = () => {
  959. const option = commonOption();
  960. option.attrs.label.x = -(h * 6);
  961. option.attrs.label['text-anchor'] = 'end';
  962. option.attrs.transverseLine.x = -(h / 3 * 4);
  963. option.attrs.iconVerticalLineS.x = 0;
  964. option.attrs.iconVerticalLineM.x = weight / 2 * 3;
  965. option.attrs.iconVerticalLineL.x = weight * 3;
  966. option.attrs.iconTransverseLine.x = weight * 4;
  967. option.attrs.iconVerticalLineS.x -= h * 5;
  968. option.attrs.iconVerticalLineM.x -= h * 5;
  969. option.attrs.iconVerticalLineL.x -= h * 5;
  970. option.attrs.iconTransverseLine.x -= h * 5;
  971. return option;
  972. }
  973. const rightOption = () => {
  974. const option = commonOption();
  975. option.attrs.label.x = h * 6;
  976. option.attrs.label['text-anchor'] = 'start';
  977. option.attrs.transverseLine.x = 0;
  978. option.attrs.iconVerticalLineS.x = 0;
  979. option.attrs.iconVerticalLineM.x = -(weight / 2 * 3);
  980. option.attrs.iconVerticalLineL.x = -(weight * 3);
  981. option.attrs.iconTransverseLine.x = weight - blueIconWidth;
  982. option.attrs.iconVerticalLineS.x += h * 5;
  983. option.attrs.iconVerticalLineM.x += h * 5;
  984. option.attrs.iconVerticalLineL.x += h * 5;
  985. option.attrs.iconTransverseLine.x += h * 5;
  986. return option;
  987. }
  988. const topOption = (option) => {
  989. option.attrs.label.y = fontsize / 2;
  990. }
  991. const bottomOption = (option) => {
  992. option.attrs.label.y = h - weight + fontsize / 2;
  993. }
  994. const registerTopLeft = () => {
  995. const shape = `${shapeName}-top-left`;
  996. nodeSize[shape] = {
  997. width: width,
  998. height: height
  999. };
  1000. const option = leftOption();
  1001. topOption(option);
  1002. Graph.registerNode(shape, option, true);
  1003. }
  1004. const registerTopRight = () => {
  1005. const shape = `${shapeName}-top-right`;
  1006. nodeSize[shape] = {
  1007. width: width,
  1008. height: height
  1009. };
  1010. const option = rightOption();
  1011. topOption(option);
  1012. Graph.registerNode(shape, option, true);
  1013. }
  1014. const registerBottomLeft = () => {
  1015. const shape = `${shapeName}-bottom-left`;
  1016. nodeSize[shape] = {
  1017. width: width,
  1018. height: height
  1019. };
  1020. const option = leftOption();
  1021. bottomOption(option);
  1022. Graph.registerNode(shape, option, true);
  1023. }
  1024. const registerBottomRight = () => {
  1025. const shape = `${shapeName}-bottom-right`;
  1026. nodeSize[shape] = {
  1027. width: width,
  1028. height: height
  1029. };
  1030. const option = rightOption();
  1031. bottomOption(option);
  1032. Graph.registerNode(shape, option, true);
  1033. }
  1034. registerTopLeft();
  1035. registerTopRight();
  1036. registerBottomLeft();
  1037. registerBottomRight();
  1038. }
  1039. // 接地隔离开关纵向断开
  1040. const registerEarthingDisconnectorVerticalBreak = () => {
  1041. const width = 300;
  1042. const height = 20;
  1043. const shapeName = "earthing-disconnector-vertical-break";
  1044. const commonOption = () => {
  1045. return {
  1046. width: width,
  1047. height: height,
  1048. markup: [{
  1049. tagName: 'text',
  1050. selector: 'label',
  1051. },
  1052. {
  1053. tagName: 'rect',
  1054. selector: 'verticalLine1',
  1055. },
  1056. {
  1057. tagName: 'rect',
  1058. selector: 'verticalLine',
  1059. },
  1060. {
  1061. tagName: 'rect',
  1062. selector: 'transverseLine',
  1063. },
  1064. {
  1065. tagName: 'rect',
  1066. selector: 'iconVerticalLineS',
  1067. },
  1068. {
  1069. tagName: 'rect',
  1070. selector: 'iconVerticalLineM',
  1071. },
  1072. {
  1073. tagName: 'rect',
  1074. selector: 'iconVerticalLineL',
  1075. },
  1076. {
  1077. tagName: 'rect',
  1078. selector: 'iconTransverseLine',
  1079. },
  1080. ],
  1081. attrs: {
  1082. label: {
  1083. fill: '#D0D0D0',
  1084. fontSize: fontsize,
  1085. y: height * 3 + fontsize + blueIconWidth + 9,
  1086. "alignment-baseline": "middle",
  1087. "text-anchor": "middle",
  1088. },
  1089. verticalLine1: {
  1090. width: weight,
  1091. height: height,
  1092. x: -(weight / 2),
  1093. y: 0,
  1094. fill: "#cbaa07",
  1095. stroke: "transparent",
  1096. },
  1097. verticalLine: {
  1098. width: weight,
  1099. height: height,
  1100. y: height,
  1101. fill: "#cbaa07",
  1102. stroke: "transparent",
  1103. },
  1104. transverseLine: {
  1105. width: height,
  1106. height: weight,
  1107. y: height - weight,
  1108. fill: "#cbaa07",
  1109. stroke: "transparent",
  1110. },
  1111. iconVerticalLineS: {
  1112. width: blueIconHeight / 2,
  1113. height: weight,
  1114. x: blueIconHeight / 4,
  1115. y: blueIconHeight + height * 3,
  1116. fill: "#2acabe",
  1117. stroke: "transparent",
  1118. },
  1119. iconVerticalLineM: {
  1120. width: blueIconHeight / 3 * 2,
  1121. height: weight,
  1122. x: blueIconHeight / 6,
  1123. y: blueIconHeight - weight / 2 * 3 + height * 3,
  1124. fill: "#2acabe",
  1125. stroke: "transparent",
  1126. },
  1127. iconVerticalLineL: {
  1128. width: blueIconHeight,
  1129. height: weight,
  1130. x: 0,
  1131. y: blueIconHeight - weight * 3 + height * 3,
  1132. fill: "#2acabe",
  1133. stroke: "transparent",
  1134. },
  1135. iconTransverseLine: {
  1136. width: weight,
  1137. height: blueIconWidth - weight * 4,
  1138. x: (blueIconHeight - weight) / 2,
  1139. y: height * 3,
  1140. fill: "#2acabe",
  1141. stroke: "transparent",
  1142. }
  1143. },
  1144. }
  1145. }
  1146. const leftOption = () => {
  1147. const option = commonOption();
  1148. option.attrs.label.x = -height;
  1149. option.attrs.transverseLine.x = -height;
  1150. option.attrs.verticalLine.x = -height;
  1151. option.attrs.iconVerticalLineS.x -= height / 2 * 3 - weight / 2;
  1152. option.attrs.iconVerticalLineM.x -= height / 2 * 3 - weight / 2;
  1153. option.attrs.iconVerticalLineL.x -= height / 2 * 3 - weight / 2;
  1154. option.attrs.iconTransverseLine.x -= height / 2 * 3 - weight / 2;
  1155. return option;
  1156. }
  1157. const rightOption = () => {
  1158. const option = commonOption();
  1159. option.attrs.label.x = height;
  1160. option.attrs.transverseLine.x = 0;
  1161. option.attrs.verticalLine.x = height - weight;
  1162. option.attrs.iconVerticalLineS.x += height / 2 - weight / 2;
  1163. option.attrs.iconVerticalLineM.x += height / 2 - weight / 2;
  1164. option.attrs.iconVerticalLineL.x += height / 2 - weight / 2;
  1165. option.attrs.iconTransverseLine.x += height / 2 - weight / 2;
  1166. return option;
  1167. }
  1168. const topOption = (option) => { }
  1169. const bottomOption = (option) => { }
  1170. const registerTopLeft = () => {
  1171. const shape = `${shapeName}-top-left`;
  1172. nodeSize[shape] = {
  1173. width: width,
  1174. height: height
  1175. };
  1176. const option = leftOption();
  1177. topOption(option);
  1178. Graph.registerNode(shape, option, true);
  1179. }
  1180. const registerTopRight = () => {
  1181. const shape = `${shapeName}-top-right`;
  1182. nodeSize[shape] = {
  1183. width: width,
  1184. height: height
  1185. };
  1186. const option = rightOption();
  1187. topOption(option);
  1188. Graph.registerNode(shape, option, true);
  1189. }
  1190. const registerBottomLeft = () => {
  1191. const shape = `${shapeName}-bottom-left`;
  1192. nodeSize[shape] = {
  1193. width: width,
  1194. height: height
  1195. };
  1196. const option = leftOption();
  1197. bottomOption(option);
  1198. Graph.registerNode(shape, option, true);
  1199. }
  1200. const registerBottomRight = () => {
  1201. const shape = `${shapeName}-bottom-right`;
  1202. nodeSize[shape] = {
  1203. width: width,
  1204. height: height
  1205. };
  1206. const option = rightOption();
  1207. bottomOption(option);
  1208. Graph.registerNode(shape, option, true);
  1209. }
  1210. registerTopLeft();
  1211. registerTopRight();
  1212. registerBottomLeft();
  1213. registerBottomRight();
  1214. }
  1215. // 注册上下箭头
  1216. const registerArrowVertical = () => {
  1217. const width = weight;
  1218. const height = 0;
  1219. const arrowWidth = 13;
  1220. const arrowHeight = 15;
  1221. const shapeName = "arrow-vertical";
  1222. const commonOption = () => {
  1223. return {
  1224. width: width,
  1225. height: height,
  1226. markup: [
  1227. {
  1228. tagName: 'rect',
  1229. selector: 'line',
  1230. },
  1231. {
  1232. tagName: 'polygon',
  1233. selector: 'arrow',
  1234. },
  1235. ],
  1236. attrs: {
  1237. line: {
  1238. width: weight,
  1239. x: -(weight / 2),
  1240. fill: "#cbaa07",
  1241. stroke: "transparent",
  1242. },
  1243. arrow: {
  1244. x: -(weight / 2),
  1245. fill: "#cbaa07",
  1246. stroke: "transparent",
  1247. }
  1248. },
  1249. }
  1250. }
  1251. const leftOption = () => {
  1252. const option = commonOption();
  1253. return option;
  1254. }
  1255. const rightOption = () => {
  1256. const option = commonOption();
  1257. return option;
  1258. }
  1259. const topOption = (option) => {
  1260. option.attrs.line.y = arrowHeight;
  1261. option.attrs.arrow.refY = 0;
  1262. option.attrs.arrow.points = `0,0 ${-(arrowWidth/2)},${arrowHeight} ${arrowWidth/2},${arrowHeight}`;
  1263. }
  1264. const bottomOption = (option) => {
  1265. option.attrs.line.y = 0;
  1266. option.attrs.arrow.points = `${-(arrowWidth/2)},0 ${arrowWidth/2},0 0,${arrowHeight}`;
  1267. }
  1268. const registerTopLeft = () => {
  1269. const shape = `${shapeName}-top-left`;
  1270. nodeSize[shape] = {
  1271. width: width,
  1272. height: height
  1273. };
  1274. const option = leftOption();
  1275. topOption(option);
  1276. Graph.registerNode(shape, option, true);
  1277. }
  1278. const registerTopRight = () => {
  1279. const shape = `${shapeName}-top-right`;
  1280. nodeSize[shape] = {
  1281. width: width,
  1282. height: height
  1283. };
  1284. const option = rightOption();
  1285. topOption(option);
  1286. Graph.registerNode(shape, option, true);
  1287. }
  1288. const registerBottomLeft = () => {
  1289. const shape = `${shapeName}-bottom-left`;
  1290. nodeSize[shape] = {
  1291. width: width,
  1292. height: height
  1293. };
  1294. const option = leftOption();
  1295. bottomOption(option);
  1296. Graph.registerNode(shape, option, true);
  1297. }
  1298. const registerBottomRight = () => {
  1299. const shape = `${shapeName}-bottom-right`;
  1300. nodeSize[shape] = {
  1301. width: width,
  1302. height: height
  1303. };
  1304. const option = rightOption();
  1305. bottomOption(option);
  1306. Graph.registerNode(shape, option, true);
  1307. }
  1308. registerTopLeft();
  1309. registerTopRight();
  1310. registerBottomLeft();
  1311. registerBottomRight();
  1312. }
  1313. // 注册一条竖线
  1314. const registerLineVertical = () => {
  1315. const width = weight;
  1316. const height = 0;
  1317. const shapeName = "line-vertical";
  1318. const commonOption = () => {
  1319. return {
  1320. width: width,
  1321. height: height,
  1322. markup: [
  1323. {
  1324. tagName: 'rect',
  1325. selector: 'line',
  1326. },
  1327. ],
  1328. attrs: {
  1329. line: {
  1330. width: weight,
  1331. x: -(weight / 2),
  1332. y: 0,
  1333. fill: "#cbaa07",
  1334. stroke: "transparent",
  1335. },
  1336. },
  1337. }
  1338. }
  1339. const leftOption = () => {
  1340. const option = commonOption();
  1341. return option;
  1342. }
  1343. const rightOption = () => {
  1344. const option = commonOption();
  1345. return option;
  1346. }
  1347. const topOption = (option) => { }
  1348. const bottomOption = (option) => { }
  1349. const registerTopLeft = () => {
  1350. const shape = `${shapeName}-top-left`;
  1351. nodeSize[shape] = {
  1352. width: width,
  1353. height: height
  1354. };
  1355. const option = leftOption();
  1356. topOption(option);
  1357. Graph.registerNode(shape, option, true);
  1358. }
  1359. const registerTopRight = () => {
  1360. const shape = `${shapeName}-top-right`;
  1361. nodeSize[shape] = {
  1362. width: width,
  1363. height: height
  1364. };
  1365. const option = rightOption();
  1366. topOption(option);
  1367. Graph.registerNode(shape, option, true);
  1368. }
  1369. const registerBottomLeft = () => {
  1370. const shape = `${shapeName}-bottom-left`;
  1371. nodeSize[shape] = {
  1372. width: width,
  1373. height: height
  1374. };
  1375. const option = leftOption();
  1376. bottomOption(option);
  1377. Graph.registerNode(shape, option, true);
  1378. }
  1379. const registerBottomRight = () => {
  1380. const shape = `${shapeName}-bottom-right`;
  1381. nodeSize[shape] = {
  1382. width: width,
  1383. height: height
  1384. };
  1385. const option = rightOption();
  1386. bottomOption(option);
  1387. Graph.registerNode(shape, option, true);
  1388. }
  1389. registerTopLeft();
  1390. registerTopRight();
  1391. registerBottomLeft();
  1392. registerBottomRight();
  1393. }
  1394. // 竖着的电抗器
  1395. const registerReactorVertical = () => {
  1396. const width = weight;
  1397. const height = 70;
  1398. const r = 10;
  1399. const shapeName = "reactor-vertical";
  1400. const commonOption = () => {
  1401. return {
  1402. width: width,
  1403. height: height,
  1404. markup: [
  1405. {
  1406. tagName: 'path',
  1407. selector: 'reactor',
  1408. },
  1409. ],
  1410. attrs: {
  1411. reactor: {
  1412. d: `M0,0 l0,${height-r*2} a${r} ${r} 0 1 0 ${r} ${r} l-${r},0 l0,${r}`,
  1413. x: -(weight / 2),
  1414. y: 0,
  1415. fill: "transparent",
  1416. stroke: "#cbaa07",
  1417. "stroke-width": weight,
  1418. },
  1419. },
  1420. }
  1421. }
  1422. const leftOption = () => {
  1423. const option = commonOption();
  1424. return option;
  1425. }
  1426. const rightOption = () => {
  1427. const option = commonOption();
  1428. return option;
  1429. }
  1430. const topOption = (option) => { }
  1431. const bottomOption = (option) => { }
  1432. const registerTopLeft = () => {
  1433. const shape = `${shapeName}-top-left`;
  1434. nodeSize[shape] = {
  1435. width: width,
  1436. height: height
  1437. };
  1438. const option = leftOption();
  1439. topOption(option);
  1440. Graph.registerNode(shape, option, true);
  1441. }
  1442. const registerTopRight = () => {
  1443. const shape = `${shapeName}-top-right`;
  1444. nodeSize[shape] = {
  1445. width: width,
  1446. height: height
  1447. };
  1448. const option = rightOption();
  1449. topOption(option);
  1450. Graph.registerNode(shape, option, true);
  1451. }
  1452. const registerBottomLeft = () => {
  1453. const shape = `${shapeName}-bottom-left`;
  1454. nodeSize[shape] = {
  1455. width: width,
  1456. height: height
  1457. };
  1458. const option = leftOption();
  1459. bottomOption(option);
  1460. Graph.registerNode(shape, option, true);
  1461. }
  1462. const registerBottomRight = () => {
  1463. const shape = `${shapeName}-bottom-right`;
  1464. nodeSize[shape] = {
  1465. width: width,
  1466. height: height
  1467. };
  1468. const option = rightOption();
  1469. bottomOption(option);
  1470. Graph.registerNode(shape, option, true);
  1471. }
  1472. registerTopLeft();
  1473. registerTopRight();
  1474. registerBottomLeft();
  1475. registerBottomRight();
  1476. }
  1477. // 竖着的电容
  1478. const registerCapacitanceVertical = () => {
  1479. const width = 16;
  1480. const height = 50;
  1481. const shapeName = "capacitance-vertical";
  1482. const commonOption = () => {
  1483. return {
  1484. width: width,
  1485. height: height,
  1486. markup: [
  1487. {
  1488. tagName: 'path',
  1489. selector: 'reactor',
  1490. },
  1491. ],
  1492. attrs: {
  1493. reactor: {
  1494. d: `M0,0 l0,${height*0.4} m-${width/2},0 l${width},0 m0,${height*0.2-weight} l-${width},0 m${width/2},0 l0,${height*0.4+weight}`,
  1495. x: -(weight / 2),
  1496. y: 0,
  1497. fill: "transparent",
  1498. stroke: "#cbaa07",
  1499. "stroke-width": weight,
  1500. },
  1501. },
  1502. }
  1503. }
  1504. const leftOption = () => {
  1505. const option = commonOption();
  1506. return option;
  1507. }
  1508. const rightOption = () => {
  1509. const option = commonOption();
  1510. return option;
  1511. }
  1512. const topOption = (option) => { }
  1513. const bottomOption = (option) => { }
  1514. const registerTopLeft = () => {
  1515. const shape = `${shapeName}-top-left`;
  1516. nodeSize[shape] = {
  1517. width: width,
  1518. height: height
  1519. };
  1520. const option = leftOption();
  1521. topOption(option);
  1522. Graph.registerNode(shape, option, true);
  1523. }
  1524. const registerTopRight = () => {
  1525. const shape = `${shapeName}-top-right`;
  1526. nodeSize[shape] = {
  1527. width: width,
  1528. height: height
  1529. };
  1530. const option = rightOption();
  1531. topOption(option);
  1532. Graph.registerNode(shape, option, true);
  1533. }
  1534. const registerBottomLeft = () => {
  1535. const shape = `${shapeName}-bottom-left`;
  1536. nodeSize[shape] = {
  1537. width: width,
  1538. height: height
  1539. };
  1540. const option = leftOption();
  1541. bottomOption(option);
  1542. Graph.registerNode(shape, option, true);
  1543. }
  1544. const registerBottomRight = () => {
  1545. const shape = `${shapeName}-bottom-right`;
  1546. nodeSize[shape] = {
  1547. width: width,
  1548. height: height
  1549. };
  1550. const option = rightOption();
  1551. bottomOption(option);
  1552. Graph.registerNode(shape, option, true);
  1553. }
  1554. registerTopLeft();
  1555. registerTopRight();
  1556. registerBottomLeft();
  1557. registerBottomRight();
  1558. }
  1559. // 竖着的电阻
  1560. const registerResistanceVertical = () => {
  1561. const width = 16;
  1562. const height = 100;
  1563. const shapeName = "resistance-vertical";
  1564. const commonOption = () => {
  1565. return {
  1566. width: width,
  1567. height: height,
  1568. markup: [
  1569. {
  1570. tagName: 'path',
  1571. selector: 'reactor',
  1572. },
  1573. ],
  1574. attrs: {
  1575. reactor: {
  1576. d: `M0,0 l0,${height} m-${width/2},-${height*0.3} l${width},0 l0,-${height*0.4} l-${width},0 l0,${height*0.4}`,
  1577. x: -(weight / 2),
  1578. y: 0,
  1579. fill: "transparent",
  1580. stroke: "#cbaa07",
  1581. "stroke-width": weight,
  1582. },
  1583. },
  1584. }
  1585. }
  1586. const leftOption = () => {
  1587. const option = commonOption();
  1588. return option;
  1589. }
  1590. const rightOption = () => {
  1591. const option = commonOption();
  1592. return option;
  1593. }
  1594. const topOption = (option) => { }
  1595. const bottomOption = (option) => { }
  1596. const registerTopLeft = () => {
  1597. const shape = `${shapeName}-top-left`;
  1598. nodeSize[shape] = {
  1599. width: width,
  1600. height: height
  1601. };
  1602. const option = leftOption();
  1603. topOption(option);
  1604. Graph.registerNode(shape, option, true);
  1605. }
  1606. const registerTopRight = () => {
  1607. const shape = `${shapeName}-top-right`;
  1608. nodeSize[shape] = {
  1609. width: width,
  1610. height: height
  1611. };
  1612. const option = rightOption();
  1613. topOption(option);
  1614. Graph.registerNode(shape, option, true);
  1615. }
  1616. const registerBottomLeft = () => {
  1617. const shape = `${shapeName}-bottom-left`;
  1618. nodeSize[shape] = {
  1619. width: width,
  1620. height: height
  1621. };
  1622. const option = leftOption();
  1623. bottomOption(option);
  1624. Graph.registerNode(shape, option, true);
  1625. }
  1626. const registerBottomRight = () => {
  1627. const shape = `${shapeName}-bottom-right`;
  1628. nodeSize[shape] = {
  1629. width: width,
  1630. height: height
  1631. };
  1632. const option = rightOption();
  1633. bottomOption(option);
  1634. Graph.registerNode(shape, option, true);
  1635. }
  1636. registerTopLeft();
  1637. registerTopRight();
  1638. registerBottomLeft();
  1639. registerBottomRight();
  1640. }
  1641. // 电压互感器 3 Voltage transformer
  1642. const registerVoltageTransformer = () => {
  1643. const width = 16;
  1644. const height = 50;
  1645. const r = height / 5;
  1646. const w = weight / 3 * 2;
  1647. const shapeName = "voltage-transformer";
  1648. const commonOption = () => {
  1649. return {
  1650. width: width,
  1651. height: height,
  1652. markup: [
  1653. {
  1654. tagName: 'rect',
  1655. selector: 'line',
  1656. },
  1657. {
  1658. tagName: 'circle',
  1659. selector: 'circle1',
  1660. },
  1661. {
  1662. tagName: 'circle',
  1663. selector: 'circle2',
  1664. },
  1665. {
  1666. tagName: 'circle',
  1667. selector: 'circle3',
  1668. },
  1669. {
  1670. tagName: 'path',
  1671. selector: 'path',
  1672. },
  1673. ],
  1674. attrs: {
  1675. line: {
  1676. x: -(weight / 2),
  1677. y: 0,
  1678. width: weight,
  1679. height: r + weight*2,
  1680. fill: "#cbaa07",
  1681. stroke: "transparent",
  1682. },
  1683. circle1: {
  1684. cx: 0,
  1685. cy: 2*r+weight*2,
  1686. r: r,
  1687. fill: "transparent",
  1688. stroke: "#cbaa07",
  1689. "stroke-width": w,
  1690. },
  1691. circle2: {
  1692. cx: 0,
  1693. cy: 4*r,
  1694. r: r,
  1695. fill: "transparent",
  1696. stroke: "#cbaa07",
  1697. "stroke-width": w,
  1698. },
  1699. circle3: {
  1700. cx: Math.sqrt(weight*(2*r-weight)) + r - 3,
  1701. cy: 3*r+weight,
  1702. r: r,
  1703. fill: "transparent",
  1704. stroke: "#cbaa07",
  1705. "stroke-width": w,
  1706. },
  1707. path: {
  1708. d: `M0,${2*r+weight*2} l-${r/2},-${r/2} m${r/2},${r/2} l${r/2},-${r/2} m-${r/2},${r/2} l0,${r/2}
  1709. M0,${4*r} l-${r/2},-${r/2} m${r/2},${r/2} l${r/2},-${r/2} m-${r/2},${r/2} l0,${r/2}
  1710. M${Math.sqrt(weight*(2*r-weight))+r-3},${3*r+weight} m-1,0 l-${r/3},${r/3} l${r},0 l-${r/3},-${r/3}`,
  1711. x: -(weight / 2),
  1712. y: 0,
  1713. fill: "transparent",
  1714. stroke: "#cbaa07",
  1715. "stroke-width": w,
  1716. },
  1717. },
  1718. }
  1719. }
  1720. const leftOption = () => {
  1721. const option = commonOption();
  1722. return option;
  1723. }
  1724. const rightOption = () => {
  1725. const option = commonOption();
  1726. return option;
  1727. }
  1728. const topOption = (option) => { }
  1729. const bottomOption = (option) => { }
  1730. const registerTopLeft = () => {
  1731. const shape = `${shapeName}-top-left`;
  1732. nodeSize[shape] = {
  1733. width: width,
  1734. height: height
  1735. };
  1736. const option = leftOption();
  1737. topOption(option);
  1738. Graph.registerNode(shape, option, true);
  1739. }
  1740. const registerTopRight = () => {
  1741. const shape = `${shapeName}-top-right`;
  1742. nodeSize[shape] = {
  1743. width: width,
  1744. height: height
  1745. };
  1746. const option = rightOption();
  1747. topOption(option);
  1748. Graph.registerNode(shape, option, true);
  1749. }
  1750. const registerBottomLeft = () => {
  1751. const shape = `${shapeName}-bottom-left`;
  1752. nodeSize[shape] = {
  1753. width: width,
  1754. height: height
  1755. };
  1756. const option = leftOption();
  1757. bottomOption(option);
  1758. Graph.registerNode(shape, option, true);
  1759. }
  1760. const registerBottomRight = () => {
  1761. const shape = `${shapeName}-bottom-right`;
  1762. nodeSize[shape] = {
  1763. width: width,
  1764. height: height
  1765. };
  1766. const option = rightOption();
  1767. bottomOption(option);
  1768. Graph.registerNode(shape, option, true);
  1769. }
  1770. registerTopLeft();
  1771. registerTopRight();
  1772. registerBottomLeft();
  1773. registerBottomRight();
  1774. }
  1775. // 电压互感器3
  1776. const registerVoltage3Transformer = () => {
  1777. const width = 50;
  1778. const height = 0;
  1779. const r = width / 5;
  1780. const w = weight / 3 * 2;
  1781. const shapeName = "voltage3-transformer";
  1782. const commonOption = () => {
  1783. return {
  1784. width: width,
  1785. height: height,
  1786. markup: [
  1787. {
  1788. tagName: 'rect',
  1789. selector: 'line',
  1790. },
  1791. {
  1792. tagName: 'circle',
  1793. selector: 'circle1',
  1794. },
  1795. {
  1796. tagName: 'circle',
  1797. selector: 'circle2',
  1798. },
  1799. {
  1800. tagName: 'circle',
  1801. selector: 'circle3',
  1802. },
  1803. {
  1804. tagName: 'path',
  1805. selector: 'path',
  1806. },
  1807. ],
  1808. attrs: {
  1809. line: {
  1810. x: -width + weight,
  1811. y: -r*2,
  1812. width: weight,
  1813. height: r*2,
  1814. fill: "#b30461",
  1815. stroke: "transparent",
  1816. },
  1817. circle1: {
  1818. cx: -width + weight*3/2,
  1819. cy: -r*3,
  1820. r: r,
  1821. fill: "transparent",
  1822. stroke: "#b30461",
  1823. "stroke-width": w,
  1824. },
  1825. circle2: {
  1826. cx: -width + weight*3/2 - Math.sqrt(weight*(r*2-weight)),
  1827. cy: -r*4 - (r - weight*2),
  1828. r: r,
  1829. fill: "transparent",
  1830. stroke: "#b30461",
  1831. "stroke-width": w,
  1832. },
  1833. circle3: {
  1834. cx: -width + weight*3/2 + Math.sqrt(weight*(r*2-weight)),
  1835. cy: -r*4 - (r - weight*2),
  1836. r: r,
  1837. fill: "transparent",
  1838. stroke: "#b30461",
  1839. "stroke-width": w,
  1840. },
  1841. path: {
  1842. d: `M${-width+weight*3/2},${-r*3} l-${r/2},${r/2} m${r/2},-${r/2} l${r/2},${r/2} m-${r/2},-${r/2} l0,-${r/2}
  1843. M${-width+weight*3/2-Math.sqrt(weight*(r*2-weight))},${-r*4-(r-weight*2)} l-${r/2},${r/2} m${r/2},-${r/2} l${r/2},${r/2} m-${r/2},-${r/2} l0,-${r/2}
  1844. M${-width+weight*3/2+Math.sqrt(weight*(r*2-weight))},${-r*4-(r-weight*2)} l-${r/2},${r/2} m${r/2},-${r/2} l${r/2},${r/2} m-${r/2},-${r/2} l0,-${r/2}`,
  1845. x: -(weight / 2),
  1846. y: 0,
  1847. fill: "transparent",
  1848. stroke: "#b30461",
  1849. "stroke-width": w,
  1850. },
  1851. },
  1852. }
  1853. }
  1854. const leftOption = () => {
  1855. const option = commonOption();
  1856. return option;
  1857. }
  1858. const rightOption = () => {
  1859. const option = commonOption();
  1860. return option;
  1861. }
  1862. const topOption = (option) => { }
  1863. const bottomOption = (option) => { }
  1864. const registerTopLeft = () => {
  1865. const shape = `${shapeName}-top-left`;
  1866. nodeSize[shape] = {
  1867. width: width,
  1868. height: height
  1869. };
  1870. const option = leftOption();
  1871. topOption(option);
  1872. Graph.registerNode(shape, option, true);
  1873. }
  1874. const registerTopRight = () => {
  1875. const shape = `${shapeName}-top-right`;
  1876. nodeSize[shape] = {
  1877. width: width,
  1878. height: height
  1879. };
  1880. const option = rightOption();
  1881. topOption(option);
  1882. Graph.registerNode(shape, option, true);
  1883. }
  1884. const registerBottomLeft = () => {
  1885. const shape = `${shapeName}-bottom-left`;
  1886. nodeSize[shape] = {
  1887. width: width,
  1888. height: height
  1889. };
  1890. const option = leftOption();
  1891. bottomOption(option);
  1892. Graph.registerNode(shape, option, true);
  1893. }
  1894. const registerBottomRight = () => {
  1895. const shape = `${shapeName}-bottom-right`;
  1896. nodeSize[shape] = {
  1897. width: width,
  1898. height: height
  1899. };
  1900. const option = rightOption();
  1901. bottomOption(option);
  1902. Graph.registerNode(shape, option, true);
  1903. }
  1904. registerTopLeft();
  1905. registerTopRight();
  1906. registerBottomLeft();
  1907. registerBottomRight();
  1908. }
  1909. // 电压互感器5
  1910. const registerVoltage5Transformer = () => {
  1911. const width = 50;
  1912. const height = 0;
  1913. const r = width / 5;
  1914. const w = weight / 3 * 2;
  1915. const shapeName = "voltage5-transformer";
  1916. const commonOption = () => {
  1917. return {
  1918. width: width,
  1919. height: height,
  1920. markup: [
  1921. {
  1922. tagName: 'rect',
  1923. selector: 'line',
  1924. },
  1925. {
  1926. tagName: 'circle',
  1927. selector: 'circle1',
  1928. },
  1929. {
  1930. tagName: 'circle',
  1931. selector: 'circle2',
  1932. },
  1933. {
  1934. tagName: 'circle',
  1935. selector: 'circle3',
  1936. },
  1937. {
  1938. tagName: 'circle',
  1939. selector: 'circle4',
  1940. },
  1941. {
  1942. tagName: 'circle',
  1943. selector: 'circle5',
  1944. },
  1945. {
  1946. tagName: 'path',
  1947. selector: 'path',
  1948. },
  1949. ],
  1950. attrs: {
  1951. line: {
  1952. x: -width + weight,
  1953. y: 0,
  1954. width: weight,
  1955. height: r*2,
  1956. fill: "#b30461",
  1957. stroke: "transparent",
  1958. },
  1959. circle1: {
  1960. cx: -width + weight*3/2,
  1961. cy: r*3,
  1962. r: r,
  1963. fill: "transparent",
  1964. stroke: "#b30461",
  1965. "stroke-width": w,
  1966. },
  1967. circle2: {
  1968. cx: -width + weight*3/2 - Math.sqrt(weight*(r*2-weight)),
  1969. cy: r*4 + (r - weight*2),
  1970. r: r,
  1971. fill: "transparent",
  1972. stroke: "#b30461",
  1973. "stroke-width": w,
  1974. },
  1975. circle3: {
  1976. cx: -width + weight*3/2 + Math.sqrt(weight*(r*2-weight)),
  1977. cy: r*4 + (r - weight*2),
  1978. r: r,
  1979. fill: "transparent",
  1980. stroke: "#b30461",
  1981. "stroke-width": w,
  1982. },
  1983. circle4: {
  1984. cx: -width + weight*3/2 - Math.sqrt(weight*(r*2-weight)),
  1985. cy: r*6 + (r - weight*3),
  1986. r: r,
  1987. fill: "transparent",
  1988. stroke: "#b30461",
  1989. "stroke-width": w,
  1990. },
  1991. circle5: {
  1992. cx: -width + weight*3/2 + Math.sqrt(weight*(r*2-weight)),
  1993. cy: r*6 + (r - weight*3),
  1994. r: r,
  1995. fill: "transparent",
  1996. stroke: "#b30461",
  1997. "stroke-width": w,
  1998. },
  1999. path: {
  2000. d: `M${-width+weight*3/2},${r*3} l-${r/2},-${r/2} m${r/2},${r/2} l${r/2},-${r/2} m-${r/2},${r/2} l0,${r/2}
  2001. M${-width+weight*3/2-Math.sqrt(weight*(r*2-weight))},${r*4+(r-weight*2)} m-2,-1 l${r/3},-${r/3} l0,${r-1} l-${r/3},-${r/3}
  2002. M${-width+weight*3/2+Math.sqrt(weight*(r*2-weight))},${r*4+(r-weight*2)} l-${r/2},-${r/2} m${r/2},${r/2} l${r/2},-${r/2} m-${r/2},${r/2} l0,${r/2}
  2003. M${-width+weight*3/2-Math.sqrt(weight*(r*2-weight))},${r*6+(r-weight*3)} l-${r/2},-${r/2} m${r/2},${r/2} l${r/2},-${r/2} m-${r/2},${r/2} l0,${r/2}
  2004. M${-width+weight*3/2+Math.sqrt(weight*(r*2-weight))},${r*6+(r-weight*3)} l-${r/2},-${r/2} m${r/2},${r/2} l${r/2},-${r/2} m-${r/2},${r/2} l0,${r/2}
  2005. M${-width+weight*3/2},${r*3} l-${r*4},0 l0,-${r*3}`,
  2006. x: -(weight / 2),
  2007. y: 0,
  2008. fill: "transparent",
  2009. stroke: "#b30461",
  2010. "stroke-width": w,
  2011. },
  2012. },
  2013. }
  2014. }
  2015. const leftOption = () => {
  2016. const option = commonOption();
  2017. return option;
  2018. }
  2019. const rightOption = () => {
  2020. const option = commonOption();
  2021. return option;
  2022. }
  2023. const topOption = (option) => { }
  2024. const bottomOption = (option) => { }
  2025. const registerTopLeft = () => {
  2026. const shape = `${shapeName}-top-left`;
  2027. nodeSize[shape] = {
  2028. width: width,
  2029. height: height
  2030. };
  2031. const option = leftOption();
  2032. topOption(option);
  2033. Graph.registerNode(shape, option, true);
  2034. }
  2035. const registerTopRight = () => {
  2036. const shape = `${shapeName}-top-right`;
  2037. nodeSize[shape] = {
  2038. width: width,
  2039. height: height
  2040. };
  2041. const option = rightOption();
  2042. topOption(option);
  2043. Graph.registerNode(shape, option, true);
  2044. }
  2045. const registerBottomLeft = () => {
  2046. const shape = `${shapeName}-bottom-left`;
  2047. nodeSize[shape] = {
  2048. width: width,
  2049. height: height
  2050. };
  2051. const option = leftOption();
  2052. bottomOption(option);
  2053. Graph.registerNode(shape, option, true);
  2054. }
  2055. const registerBottomRight = () => {
  2056. const shape = `${shapeName}-bottom-right`;
  2057. nodeSize[shape] = {
  2058. width: width,
  2059. height: height
  2060. };
  2061. const option = rightOption();
  2062. bottomOption(option);
  2063. Graph.registerNode(shape, option, true);
  2064. }
  2065. registerTopLeft();
  2066. registerTopRight();
  2067. registerBottomLeft();
  2068. registerBottomRight();
  2069. }
  2070. // 接地变压器 Grounding transformer
  2071. const registerGroundingTransformer = () => {
  2072. const width = 16;
  2073. const height = 110;
  2074. const r = height / 11;
  2075. const w = weight / 3 * 2;
  2076. const shapeName = "grounding-transformer";
  2077. const commonOption = () => {
  2078. return {
  2079. width: width,
  2080. height: height,
  2081. markup: [
  2082. {
  2083. tagName: 'rect',
  2084. selector: 'line',
  2085. },
  2086. {
  2087. tagName: 'circle',
  2088. selector: 'circle1',
  2089. },
  2090. {
  2091. tagName: 'circle',
  2092. selector: 'circle2',
  2093. },
  2094. {
  2095. tagName: 'path',
  2096. selector: 'path',
  2097. },
  2098. {
  2099. tagName: 'rect',
  2100. selector: 'verticalLine',
  2101. },
  2102. {
  2103. tagName: 'rect',
  2104. selector: 'transverseLine',
  2105. },
  2106. {
  2107. tagName: 'rect',
  2108. selector: 'iconVerticalLineS',
  2109. },
  2110. {
  2111. tagName: 'rect',
  2112. selector: 'iconVerticalLineM',
  2113. },
  2114. {
  2115. tagName: 'rect',
  2116. selector: 'iconVerticalLineL',
  2117. },
  2118. {
  2119. tagName: 'rect',
  2120. selector: 'iconTransverseLine',
  2121. },
  2122. ],
  2123. attrs: {
  2124. line: {
  2125. x: -(weight / 2),
  2126. y: 0,
  2127. width: weight,
  2128. height: 7*r + weight*2,
  2129. fill: "#cbaa07",
  2130. stroke: "transparent",
  2131. },
  2132. circle1: {
  2133. cx: 0,
  2134. cy: 8*r+weight*2,
  2135. r: r,
  2136. fill: "transparent",
  2137. stroke: "#cbaa07",
  2138. "stroke-width": w,
  2139. },
  2140. circle2: {
  2141. cx: 0,
  2142. cy: 10*r,
  2143. r: r,
  2144. fill: "transparent",
  2145. stroke: "#cbaa07",
  2146. "stroke-width": w,
  2147. },
  2148. path: {
  2149. d: `M0,${8*r+weight*2} m-${r/2},1 l${r},0 l-${r/2},-${r-2} l-${r/2},${r-2}
  2150. M0,${10*r} l-${r/2},${r/2} m${r/2},-${r/2} l${r/2},${r/2} m-${r/2},-${r/2} l0,-${r/2}`,
  2151. x: -(weight / 2),
  2152. y: 0,
  2153. fill: "transparent",
  2154. stroke: "#cbaa07",
  2155. "stroke-width": w,
  2156. },
  2157. verticalLine: {
  2158. width: weight,
  2159. height: r*2,
  2160. x: -r*2,
  2161. y: 10*r,
  2162. fill: "#cbaa07",
  2163. stroke: "transparent",
  2164. },
  2165. transverseLine: {
  2166. width: r*2,
  2167. height: w,
  2168. x: -r*2,
  2169. y: 10*r,
  2170. fill: "#cbaa07",
  2171. stroke: "transparent",
  2172. },
  2173. iconVerticalLineS: {
  2174. width: blueIconHeight / 2,
  2175. height: weight,
  2176. x: blueIconHeight / 4 - r*2 - blueIconHeight / 2 + weight / 2,
  2177. y: blueIconHeight + r * 12,
  2178. fill: "#2acabe",
  2179. stroke: "transparent",
  2180. },
  2181. iconVerticalLineM: {
  2182. width: blueIconHeight / 3 * 2,
  2183. height: weight,
  2184. x: blueIconHeight / 6 - r*2 - blueIconHeight / 2 + weight / 2,
  2185. y: blueIconHeight - weight / 2 * 3 + r * 12,
  2186. fill: "#2acabe",
  2187. stroke: "transparent",
  2188. },
  2189. iconVerticalLineL: {
  2190. width: blueIconHeight,
  2191. height: weight,
  2192. x: 0 - r*2 - blueIconHeight / 2 + weight / 2,
  2193. y: blueIconHeight - weight * 3 + r * 12,
  2194. fill: "#2acabe",
  2195. stroke: "transparent",
  2196. },
  2197. iconTransverseLine: {
  2198. width: weight,
  2199. height: blueIconWidth - weight * 4,
  2200. x: (blueIconHeight - weight) / 2 - r*2 - blueIconHeight / 2 + weight / 2,
  2201. y: r * 12,
  2202. fill: "#2acabe",
  2203. stroke: "transparent",
  2204. }
  2205. },
  2206. }
  2207. }
  2208. const leftOption = () => {
  2209. const option = commonOption();
  2210. return option;
  2211. }
  2212. const rightOption = () => {
  2213. const option = commonOption();
  2214. return option;
  2215. }
  2216. const topOption = (option) => { }
  2217. const bottomOption = (option) => { }
  2218. const registerTopLeft = () => {
  2219. const shape = `${shapeName}-top-left`;
  2220. nodeSize[shape] = {
  2221. width: width,
  2222. height: height
  2223. };
  2224. const option = leftOption();
  2225. topOption(option);
  2226. Graph.registerNode(shape, option, true);
  2227. }
  2228. const registerTopRight = () => {
  2229. const shape = `${shapeName}-top-right`;
  2230. nodeSize[shape] = {
  2231. width: width,
  2232. height: height
  2233. };
  2234. const option = rightOption();
  2235. topOption(option);
  2236. Graph.registerNode(shape, option, true);
  2237. }
  2238. const registerBottomLeft = () => {
  2239. const shape = `${shapeName}-bottom-left`;
  2240. nodeSize[shape] = {
  2241. width: width,
  2242. height: height
  2243. };
  2244. const option = leftOption();
  2245. bottomOption(option);
  2246. Graph.registerNode(shape, option, true);
  2247. }
  2248. const registerBottomRight = () => {
  2249. const shape = `${shapeName}-bottom-right`;
  2250. nodeSize[shape] = {
  2251. width: width,
  2252. height: height
  2253. };
  2254. const option = rightOption();
  2255. bottomOption(option);
  2256. Graph.registerNode(shape, option, true);
  2257. }
  2258. registerTopLeft();
  2259. registerTopRight();
  2260. registerBottomLeft();
  2261. registerBottomRight();
  2262. }
  2263. // 横着的接地电容
  2264. const registerGroundingCapacitanceTransverse = () => {
  2265. const width = 100;
  2266. const height = 15;
  2267. const ut = width * 0.20;
  2268. const uv = width * 0.1;
  2269. const shapeName = "grounding-capacitance-transverse";
  2270. const commonOption = () => {
  2271. return {
  2272. width: width,
  2273. height: height,
  2274. markup: [
  2275. {
  2276. tagName: 'path',
  2277. selector: 'reactor',
  2278. },
  2279. {
  2280. tagName: 'path',
  2281. selector: 'icon',
  2282. },
  2283. ],
  2284. attrs: {
  2285. reactor: {
  2286. d: `M0,0 l0,-${height} l-${ut},0 m0,${ut/2} l0,-${ut} m-${uv-weight},0 l0,${ut} m0,-${ut/2} l-${ut*2},0
  2287. m0,${ut/2} l0,-${ut} m-${uv-weight},0 l0,${ut} m0,-${ut/2} l-${ut},0`,
  2288. x: -(weight / 2),
  2289. refY: height,
  2290. fill: "transparent",
  2291. stroke: "#b30461",
  2292. "stroke-width": weight,
  2293. },
  2294. icon: {
  2295. d: `M0,0 l-${blueIconWidth-weight*4},0 m0,${blueIconHeight/2} l0,-${blueIconHeight} m-${weight*1.5},${blueIconHeight/6} l0,${blueIconHeight/3*2}
  2296. m0,${blueIconHeight/6} m-${weight*1.5},-${blueIconHeight/4} l0,-${blueIconHeight/2}`,
  2297. refX: -width + weight*2,
  2298. refY: 0,
  2299. fill: "transparent",
  2300. stroke: "#2acabe",
  2301. "stroke-width": weight,
  2302. },
  2303. },
  2304. }
  2305. }
  2306. const leftOption = () => {
  2307. const option = commonOption();
  2308. return option;
  2309. }
  2310. const rightOption = () => {
  2311. const option = commonOption();
  2312. return option;
  2313. }
  2314. const topOption = (option) => { }
  2315. const bottomOption = (option) => {
  2316. option.attrs.reactor.transform = `scale(1, -1) translate(0, ${height})`;
  2317. option.attrs.icon.refY = height;
  2318. }
  2319. const registerTopLeft = () => {
  2320. const shape = `${shapeName}-top-left`;
  2321. nodeSize[shape] = {
  2322. width: width,
  2323. height: height
  2324. };
  2325. const option = leftOption();
  2326. topOption(option);
  2327. Graph.registerNode(shape, option, true);
  2328. }
  2329. const registerTopRight = () => {
  2330. const shape = `${shapeName}-top-right`;
  2331. nodeSize[shape] = {
  2332. width: width,
  2333. height: height
  2334. };
  2335. const option = rightOption();
  2336. topOption(option);
  2337. Graph.registerNode(shape, option, true);
  2338. }
  2339. const registerBottomLeft = () => {
  2340. const shape = `${shapeName}-bottom-left`;
  2341. nodeSize[shape] = {
  2342. width: width,
  2343. height: height
  2344. };
  2345. const option = leftOption();
  2346. bottomOption(option);
  2347. Graph.registerNode(shape, option, true);
  2348. }
  2349. const registerBottomRight = () => {
  2350. const shape = `${shapeName}-bottom-right`;
  2351. nodeSize[shape] = {
  2352. width: width,
  2353. height: height
  2354. };
  2355. const option = rightOption();
  2356. bottomOption(option);
  2357. Graph.registerNode(shape, option, true);
  2358. }
  2359. registerTopLeft();
  2360. registerTopRight();
  2361. registerBottomLeft();
  2362. registerBottomRight();
  2363. }
  2364. // ???
  2365. const registerGroundingResistanceVertical = () => {
  2366. const width = 15;
  2367. const height = 70;
  2368. const arrowWidth = 13;
  2369. const arrowHeight = 15;
  2370. const shapeName = "grounding-resistance-vertical";
  2371. const commonOption = () => {
  2372. return {
  2373. width: width,
  2374. height: height,
  2375. markup: [
  2376. {
  2377. tagName: 'path',
  2378. selector: 'reactor',
  2379. },
  2380. {
  2381. tagName: 'path',
  2382. selector: 'icon',
  2383. },
  2384. {
  2385. tagName: 'polygon',
  2386. selector: 'arrow',
  2387. },
  2388. ],
  2389. attrs: {
  2390. reactor: {
  2391. d: `M0,0 l0,${width} l0,${width} m0,-${width} l-${width/2},0 l0,40 l${width},0 l0,-40 l-${width/2},0`,
  2392. x: -(weight / 2),
  2393. refY: 0,
  2394. fill: "transparent",
  2395. stroke: "#b30461",
  2396. "stroke-width": weight,
  2397. },
  2398. icon: {
  2399. d: `M0,0 l-${blueIconWidth-weight*4},0 m0,${blueIconHeight/2} l0,-${blueIconHeight} m-${weight*1.5},${blueIconHeight/6} l0,${blueIconHeight/3*2}
  2400. m0,${blueIconHeight/6} m-${weight*1.5},-${blueIconHeight/4} l0,-${blueIconHeight/2}`,
  2401. refX: -width + weight*2,
  2402. refY: 0,
  2403. fill: "transparent",
  2404. stroke: "#2acabe",
  2405. "stroke-width": weight,
  2406. transform: `rotate(-90) translate(-${height-width+weight/2}, ${blueIconHeight/2})`
  2407. },
  2408. arrow: {
  2409. points: `${-(arrowWidth/2)},0 ${arrowWidth/2},0 0,${arrowHeight}`,
  2410. x: -(weight / 2),
  2411. refY: width*2,
  2412. fill: "#b30461",
  2413. stroke: "transparent",
  2414. }
  2415. },
  2416. }
  2417. }
  2418. const leftOption = () => {
  2419. const option = commonOption();
  2420. return option;
  2421. }
  2422. const rightOption = () => {
  2423. const option = commonOption();
  2424. return option;
  2425. }
  2426. const topOption = (option) => { }
  2427. const bottomOption = (option) => { }
  2428. const registerTopLeft = () => {
  2429. const shape = `${shapeName}-top-left`;
  2430. nodeSize[shape] = {
  2431. width: width,
  2432. height: height
  2433. };
  2434. const option = leftOption();
  2435. topOption(option);
  2436. Graph.registerNode(shape, option, true);
  2437. }
  2438. const registerTopRight = () => {
  2439. const shape = `${shapeName}-top-right`;
  2440. nodeSize[shape] = {
  2441. width: width,
  2442. height: height
  2443. };
  2444. const option = rightOption();
  2445. topOption(option);
  2446. Graph.registerNode(shape, option, true);
  2447. }
  2448. const registerBottomLeft = () => {
  2449. const shape = `${shapeName}-bottom-left`;
  2450. nodeSize[shape] = {
  2451. width: width,
  2452. height: height
  2453. };
  2454. const option = leftOption();
  2455. bottomOption(option);
  2456. Graph.registerNode(shape, option, true);
  2457. }
  2458. const registerBottomRight = () => {
  2459. const shape = `${shapeName}-bottom-right`;
  2460. nodeSize[shape] = {
  2461. width: width,
  2462. height: height
  2463. };
  2464. const option = rightOption();
  2465. bottomOption(option);
  2466. Graph.registerNode(shape, option, true);
  2467. }
  2468. registerTopLeft();
  2469. registerTopRight();
  2470. registerBottomLeft();
  2471. registerBottomRight();
  2472. }
  2473. // Three phase transformer
  2474. const registerThreePhaseTransformer = () => {
  2475. const width = 16;
  2476. const height = 50;
  2477. const r = height / 5;
  2478. const w = weight / 3 * 2;
  2479. const shapeName = "three-phase-transformer";
  2480. const commonOption = () => {
  2481. return {
  2482. width: width,
  2483. height: height,
  2484. markup: [
  2485. {
  2486. tagName: 'rect',
  2487. selector: 'line',
  2488. },
  2489. {
  2490. tagName: 'circle',
  2491. selector: 'circle1',
  2492. },
  2493. {
  2494. tagName: 'circle',
  2495. selector: 'circle2',
  2496. },
  2497. {
  2498. tagName: 'circle',
  2499. selector: 'circle3',
  2500. },
  2501. {
  2502. tagName: 'path',
  2503. selector: 'path',
  2504. },
  2505. {
  2506. tagName: 'path',
  2507. selector: 'path1',
  2508. },
  2509. {
  2510. tagName: 'path',
  2511. selector: 'path2',
  2512. },
  2513. ],
  2514. attrs: {
  2515. line: {
  2516. x: -(weight / 2),
  2517. y: 0,
  2518. width: weight,
  2519. height: r + weight*2,
  2520. fill: "#b30461",
  2521. stroke: "transparent",
  2522. },
  2523. circle1: {
  2524. cx: 0,
  2525. cy: 2*r+weight*2,
  2526. r: r,
  2527. fill: "transparent",
  2528. stroke: "#b30461",
  2529. "stroke-width": w,
  2530. },
  2531. circle2: {
  2532. cx: 0,
  2533. cy: 4*r,
  2534. r: r,
  2535. fill: "transparent",
  2536. stroke: "#cbaa07",
  2537. "stroke-width": w,
  2538. },
  2539. circle3: {
  2540. cx: Math.sqrt(weight*(2*r-weight)) + r - 3,
  2541. cy: 3*r+weight,
  2542. r: r,
  2543. fill: "transparent",
  2544. stroke: "#b30461",
  2545. "stroke-width": w,
  2546. },
  2547. path: {
  2548. d: `M0,${2*r+weight*2} l-${r/2},${r/2} m${r/2},-${r/2} l${r/2},${r/2} m-${r/2},-${r/2} l0,-${r/2}
  2549. M${Math.sqrt(weight*(2*r-weight))+r-3},${3*r+weight} m-1,-${r/2} l0,${r} l${r/2},-${r/2} l-${r/2},-${r/2}`,
  2550. x: -(weight / 2),
  2551. y: 0,
  2552. fill: "transparent",
  2553. stroke: "#b30461",
  2554. "stroke-width": w,
  2555. },
  2556. path1: {
  2557. d: `M0,${4*r} l-${r/2},${r/2} m${r/2},-${r/2} l${r/2},${r/2} m-${r/2},-${r/2} l0,-${r/2}`,
  2558. x: -(weight / 2),
  2559. y: 0,
  2560. fill: "transparent",
  2561. stroke: "#cbaa07",
  2562. "stroke-width": w,
  2563. },
  2564. path2: {
  2565. // d: `M-20,${2*r+weight*2+15} l56,-23 l${23/10},${56/10}`,
  2566. d: `M-20,${2*r+weight*2+15} l60,0 l0,5 l15,-5 l-15,-5 l0,5 z`,
  2567. x: -(weight / 2),
  2568. y: 0,
  2569. fill: "#b30461",
  2570. stroke: "#b30461",
  2571. "stroke-width": w,
  2572. transform: `rotate(-30) translate(-20, -10)`
  2573. },
  2574. },
  2575. }
  2576. }
  2577. const leftOption = () => {
  2578. const option = commonOption();
  2579. return option;
  2580. }
  2581. const rightOption = () => {
  2582. const option = commonOption();
  2583. return option;
  2584. }
  2585. const topOption = (option) => { }
  2586. const bottomOption = (option) => { }
  2587. const registerTopLeft = () => {
  2588. const shape = `${shapeName}-top-left`;
  2589. nodeSize[shape] = {
  2590. width: width,
  2591. height: height
  2592. };
  2593. const option = leftOption();
  2594. topOption(option);
  2595. Graph.registerNode(shape, option, true);
  2596. }
  2597. const registerTopRight = () => {
  2598. const shape = `${shapeName}-top-right`;
  2599. nodeSize[shape] = {
  2600. width: width,
  2601. height: height
  2602. };
  2603. const option = rightOption();
  2604. topOption(option);
  2605. Graph.registerNode(shape, option, true);
  2606. }
  2607. const registerBottomLeft = () => {
  2608. const shape = `${shapeName}-bottom-left`;
  2609. nodeSize[shape] = {
  2610. width: width,
  2611. height: height
  2612. };
  2613. const option = leftOption();
  2614. bottomOption(option);
  2615. Graph.registerNode(shape, option, true);
  2616. }
  2617. const registerBottomRight = () => {
  2618. const shape = `${shapeName}-bottom-right`;
  2619. nodeSize[shape] = {
  2620. width: width,
  2621. height: height
  2622. };
  2623. const option = rightOption();
  2624. bottomOption(option);
  2625. Graph.registerNode(shape, option, true);
  2626. }
  2627. registerTopLeft();
  2628. registerTopRight();
  2629. registerBottomLeft();
  2630. registerBottomRight();
  2631. }
  2632. // 主变压器
  2633. const registerMainTransformer = () => {
  2634. const width = 66;
  2635. const height = 0;
  2636. const shapeName = "main-transformer";
  2637. const commonOption = () => {
  2638. return {
  2639. width: width,
  2640. height: height,
  2641. markup: [
  2642. {
  2643. tagName: 'rect',
  2644. selector: 'line',
  2645. },
  2646. ],
  2647. attrs: {
  2648. line: {
  2649. x: -width - 10,
  2650. y: -40,
  2651. width: width,
  2652. height: weight,
  2653. fill: "#b30461",
  2654. stroke: "transparent",
  2655. },
  2656. },
  2657. }
  2658. }
  2659. const leftOption = () => {
  2660. const option = commonOption();
  2661. return option;
  2662. }
  2663. const rightOption = () => {
  2664. const option = commonOption();
  2665. return option;
  2666. }
  2667. const topOption = (option) => { }
  2668. const bottomOption = (option) => { }
  2669. const registerTopLeft = () => {
  2670. const shape = `${shapeName}-top-left`;
  2671. nodeSize[shape] = {
  2672. width: width,
  2673. height: height
  2674. };
  2675. const option = leftOption();
  2676. topOption(option);
  2677. Graph.registerNode(shape, option, true);
  2678. }
  2679. const registerTopRight = () => {
  2680. const shape = `${shapeName}-top-right`;
  2681. nodeSize[shape] = {
  2682. width: width,
  2683. height: height
  2684. };
  2685. const option = rightOption();
  2686. topOption(option);
  2687. Graph.registerNode(shape, option, true);
  2688. }
  2689. const registerBottomLeft = () => {
  2690. const shape = `${shapeName}-bottom-left`;
  2691. nodeSize[shape] = {
  2692. width: width,
  2693. height: height
  2694. };
  2695. const option = leftOption();
  2696. bottomOption(option);
  2697. Graph.registerNode(shape, option, true);
  2698. }
  2699. const registerBottomRight = () => {
  2700. const shape = `${shapeName}-bottom-right`;
  2701. nodeSize[shape] = {
  2702. width: width,
  2703. height: height
  2704. };
  2705. const option = rightOption();
  2706. bottomOption(option);
  2707. Graph.registerNode(shape, option, true);
  2708. }
  2709. registerTopLeft();
  2710. registerTopRight();
  2711. registerBottomLeft();
  2712. registerBottomRight();
  2713. }
  2714. // 主变压器1
  2715. const registerMainTransformer1 = () => {
  2716. const width = 66;
  2717. const height = 0;
  2718. const shapeName = "main-transformer1";
  2719. const commonOption = () => {
  2720. return {
  2721. width: width,
  2722. height: height,
  2723. markup: [
  2724. {
  2725. tagName: 'text',
  2726. selector: 'label',
  2727. },
  2728. {
  2729. tagName: 'path',
  2730. selector: 'path',
  2731. },
  2732. {
  2733. tagName: 'path',
  2734. selector: 'icon',
  2735. },
  2736. ],
  2737. attrs: {
  2738. label: {
  2739. x: -width - 25,
  2740. y: 0,
  2741. fill: '#D0D0D0',
  2742. fontSize: fontsize,
  2743. "text-anchor": "end",
  2744. },
  2745. path: {
  2746. d: `M0,0 l0,15`,
  2747. refX: -width - 10,
  2748. refY: -40,
  2749. fill: "transparent",
  2750. stroke: "#b30461",
  2751. "stroke-width": weight,
  2752. },
  2753. icon: {
  2754. d: `M0,0 l-${blueIconWidth-weight*4},0 m0,${blueIconHeight/2} l0,-${blueIconHeight} m-${weight*1.5},${blueIconHeight/6} l0,${blueIconHeight/3*2}
  2755. m0,${blueIconHeight/6} m-${weight*1.5},-${blueIconHeight/4} l0,-${blueIconHeight/2}`,
  2756. refX: -width + weight*2,
  2757. refY: 0,
  2758. fill: "transparent",
  2759. stroke: "#2acabe",
  2760. "stroke-width": weight,
  2761. transform: `rotate(-90) translate(-16.5,-16)`
  2762. },
  2763. },
  2764. }
  2765. }
  2766. const leftOption = () => {
  2767. const option = commonOption();
  2768. return option;
  2769. }
  2770. const rightOption = () => {
  2771. const option = commonOption();
  2772. return option;
  2773. }
  2774. const topOption = (option) => { }
  2775. const bottomOption = (option) => { }
  2776. const registerTopLeft = () => {
  2777. const shape = `${shapeName}-top-left`;
  2778. nodeSize[shape] = {
  2779. width: width,
  2780. height: height
  2781. };
  2782. const option = leftOption();
  2783. topOption(option);
  2784. Graph.registerNode(shape, option, true);
  2785. }
  2786. const registerTopRight = () => {
  2787. const shape = `${shapeName}-top-right`;
  2788. nodeSize[shape] = {
  2789. width: width,
  2790. height: height
  2791. };
  2792. const option = rightOption();
  2793. topOption(option);
  2794. Graph.registerNode(shape, option, true);
  2795. }
  2796. const registerBottomLeft = () => {
  2797. const shape = `${shapeName}-bottom-left`;
  2798. nodeSize[shape] = {
  2799. width: width,
  2800. height: height
  2801. };
  2802. const option = leftOption();
  2803. bottomOption(option);
  2804. Graph.registerNode(shape, option, true);
  2805. }
  2806. const registerBottomRight = () => {
  2807. const shape = `${shapeName}-bottom-right`;
  2808. nodeSize[shape] = {
  2809. width: width,
  2810. height: height
  2811. };
  2812. const option = rightOption();
  2813. bottomOption(option);
  2814. Graph.registerNode(shape, option, true);
  2815. }
  2816. registerTopLeft();
  2817. registerTopRight();
  2818. registerBottomLeft();
  2819. registerBottomRight();
  2820. }
  2821. // 主变压器2
  2822. const registerMainTransformer2 = () => {
  2823. const width = 15;
  2824. const height = 0;
  2825. const h = 7;
  2826. const arrowWidth = 13;
  2827. const arrowHeight = 15;
  2828. const shapeName = "main-transformer2";
  2829. const commonOption = () => {
  2830. return {
  2831. width: width,
  2832. height: height,
  2833. markup: [
  2834. {
  2835. tagName: 'path',
  2836. selector: 'reactor',
  2837. },
  2838. {
  2839. tagName: 'path',
  2840. selector: 'icon',
  2841. },
  2842. {
  2843. tagName: 'polygon',
  2844. selector: 'arrow',
  2845. },
  2846. ],
  2847. attrs: {
  2848. reactor: {
  2849. d: `M0,0 l0,${width} l0,${width} m0,-${width} l-${width/2},0 l0,40 l${width},0 l0,-40 l-${width/2},0`,
  2850. refX: -50,
  2851. refY: -40,
  2852. fill: "transparent",
  2853. stroke: "#b30461",
  2854. "stroke-width": weight,
  2855. },
  2856. icon: {
  2857. d: `M0,0 l-${blueIconWidth-weight*4},0 m0,${blueIconHeight/2} l0,-${blueIconHeight} m-${weight*1.5},${blueIconHeight/6} l0,${blueIconHeight/3*2}
  2858. m0,${blueIconHeight/6} m-${weight*1.5},-${blueIconHeight/4} l0,-${blueIconHeight/2}`,
  2859. refX: -50,
  2860. refY: 0,
  2861. fill: "transparent",
  2862. stroke: "#2acabe",
  2863. "stroke-width": weight,
  2864. transform: `rotate(-90) translate(-16.5,0)`
  2865. },
  2866. arrow: {
  2867. points: `${-(arrowWidth/2)},0 ${arrowWidth/2},0 0,${arrowHeight}`,
  2868. refX: -50,
  2869. refY: -10,
  2870. fill: "#b30461",
  2871. stroke: "transparent",
  2872. }
  2873. },
  2874. }
  2875. }
  2876. const leftOption = () => {
  2877. const option = commonOption();
  2878. return option;
  2879. }
  2880. const rightOption = () => {
  2881. const option = commonOption();
  2882. return option;
  2883. }
  2884. const topOption = (option) => { }
  2885. const bottomOption = (option) => { }
  2886. const registerTopLeft = () => {
  2887. const shape = `${shapeName}-top-left`;
  2888. nodeSize[shape] = {
  2889. width: width,
  2890. height: height
  2891. };
  2892. const option = leftOption();
  2893. topOption(option);
  2894. Graph.registerNode(shape, option, true);
  2895. }
  2896. const registerTopRight = () => {
  2897. const shape = `${shapeName}-top-right`;
  2898. nodeSize[shape] = {
  2899. width: width,
  2900. height: height
  2901. };
  2902. const option = rightOption();
  2903. topOption(option);
  2904. Graph.registerNode(shape, option, true);
  2905. }
  2906. const registerBottomLeft = () => {
  2907. const shape = `${shapeName}-bottom-left`;
  2908. nodeSize[shape] = {
  2909. width: width,
  2910. height: height
  2911. };
  2912. const option = leftOption();
  2913. bottomOption(option);
  2914. Graph.registerNode(shape, option, true);
  2915. }
  2916. const registerBottomRight = () => {
  2917. const shape = `${shapeName}-bottom-right`;
  2918. nodeSize[shape] = {
  2919. width: width,
  2920. height: height
  2921. };
  2922. const option = rightOption();
  2923. bottomOption(option);
  2924. Graph.registerNode(shape, option, true);
  2925. }
  2926. registerTopLeft();
  2927. registerTopRight();
  2928. registerBottomLeft();
  2929. registerBottomRight();
  2930. }
  2931. // 主变压器3
  2932. const registerMainTransformer3 = () => {
  2933. const width = 15;
  2934. const height = 0;
  2935. const h = 7;
  2936. const arrowWidth = 13;
  2937. const arrowHeight = 15;
  2938. const shapeName = "main-transformer3";
  2939. const commonOption = () => {
  2940. return {
  2941. width: width,
  2942. height: height,
  2943. markup: [
  2944. {
  2945. tagName: 'text',
  2946. selector: 'label',
  2947. },
  2948. {
  2949. tagName: 'path',
  2950. selector: 'reactor',
  2951. },
  2952. {
  2953. tagName: 'path',
  2954. selector: 'icon',
  2955. },
  2956. {
  2957. tagName: 'polygon',
  2958. selector: 'arrow',
  2959. },
  2960. {
  2961. tagName: 'polygon',
  2962. selector: 'arrow1',
  2963. },
  2964. ],
  2965. attrs: {
  2966. label: {
  2967. x: -25,
  2968. y: 55,
  2969. fill: '#D0D0D0',
  2970. fontSize: fontsize,
  2971. "text-anchor": "middle",
  2972. },
  2973. reactor: {
  2974. d: `M0,0 l0,${width}`,
  2975. refX: -25,
  2976. refY: -40,
  2977. fill: "transparent",
  2978. stroke: "#b30461",
  2979. "stroke-width": weight,
  2980. },
  2981. icon: {
  2982. d: `M0,0 l-${blueIconWidth-weight*4},0 m0,${blueIconHeight/2} l0,-${blueIconHeight} m-${weight*1.5},${blueIconHeight/6} l0,${blueIconHeight/3*2}
  2983. m0,${blueIconHeight/6} m-${weight*1.5},-${blueIconHeight/4} l0,-${blueIconHeight/2}`,
  2984. refX: -25,
  2985. refY: 0,
  2986. fill: "transparent",
  2987. stroke: "#2acabe",
  2988. "stroke-width": weight,
  2989. transform: `rotate(-90) translate(-16.5,0)`
  2990. },
  2991. arrow: {
  2992. points: `${-(arrowWidth/2)},0 ${arrowWidth/2},0 0,${arrowHeight}`,
  2993. refX: -25,
  2994. refY: -25,
  2995. fill: "#b30461",
  2996. stroke: "transparent",
  2997. },
  2998. arrow1: {
  2999. points: `0,0 ${-(arrowWidth/2)},${arrowHeight} ${arrowWidth/2},${arrowHeight}`,
  3000. refX: -25,
  3001. refY: 5,
  3002. fill: "#b30461",
  3003. stroke: "transparent",
  3004. },
  3005. },
  3006. }
  3007. }
  3008. const leftOption = () => {
  3009. const option = commonOption();
  3010. return option;
  3011. }
  3012. const rightOption = () => {
  3013. const option = commonOption();
  3014. return option;
  3015. }
  3016. const topOption = (option) => { }
  3017. const bottomOption = (option) => { }
  3018. const registerTopLeft = () => {
  3019. const shape = `${shapeName}-top-left`;
  3020. nodeSize[shape] = {
  3021. width: width,
  3022. height: height
  3023. };
  3024. const option = leftOption();
  3025. topOption(option);
  3026. Graph.registerNode(shape, option, true);
  3027. }
  3028. const registerTopRight = () => {
  3029. const shape = `${shapeName}-top-right`;
  3030. nodeSize[shape] = {
  3031. width: width,
  3032. height: height
  3033. };
  3034. const option = rightOption();
  3035. topOption(option);
  3036. Graph.registerNode(shape, option, true);
  3037. }
  3038. const registerBottomLeft = () => {
  3039. const shape = `${shapeName}-bottom-left`;
  3040. nodeSize[shape] = {
  3041. width: width,
  3042. height: height
  3043. };
  3044. const option = leftOption();
  3045. bottomOption(option);
  3046. Graph.registerNode(shape, option, true);
  3047. }
  3048. const registerBottomRight = () => {
  3049. const shape = `${shapeName}-bottom-right`;
  3050. nodeSize[shape] = {
  3051. width: width,
  3052. height: height
  3053. };
  3054. const option = rightOption();
  3055. bottomOption(option);
  3056. Graph.registerNode(shape, option, true);
  3057. }
  3058. registerTopLeft();
  3059. registerTopRight();
  3060. registerBottomLeft();
  3061. registerBottomRight();
  3062. }
  3063. // 开关断开
  3064. const registerSwitchBreak = () => {
  3065. const width = 0;
  3066. const height = 0;
  3067. const shapeName = "switch-break";
  3068. const commonOption = () => {
  3069. return {
  3070. width: width,
  3071. height: height,
  3072. markup: [
  3073. {
  3074. tagName: 'path',
  3075. selector: 'path',
  3076. },
  3077. ],
  3078. attrs: {
  3079. path: {
  3080. d: `M1,6 a3 3 0 1 0 -2 0 M0,6 l-5,15 m0,5 l10,0`,
  3081. refX: 0,
  3082. refY: 0,
  3083. fill: "transparent",
  3084. stroke: "#04a635",
  3085. "stroke-width": 2,
  3086. },
  3087. },
  3088. }
  3089. }
  3090. const registerTop = () => {
  3091. const shape = `${shapeName}-top`;
  3092. nodeSize[shape] = {
  3093. width: width,
  3094. height: height
  3095. };
  3096. const option = commonOption();
  3097. option.attrs.path.transform = `rotate(180)`; // `rotate(-90) translate(-16.5,0)`;
  3098. Graph.registerNode(shape, option, true);
  3099. }
  3100. const registerBottom = () => {
  3101. const shape = `${shapeName}-bottom`;
  3102. nodeSize[shape] = {
  3103. width: width,
  3104. height: height
  3105. };
  3106. const option = commonOption();
  3107. Graph.registerNode(shape, option, true);
  3108. }
  3109. const registerLeft = () => {
  3110. const shape = `${shapeName}-left`;
  3111. nodeSize[shape] = {
  3112. width: width,
  3113. height: height
  3114. };
  3115. const option = commonOption();
  3116. option.attrs.path.transform = `rotate(90)`; // `rotate(-90) translate(-16.5,0)`;
  3117. Graph.registerNode(shape, option, true);
  3118. }
  3119. const registerRight = () => {
  3120. const shape = `${shapeName}-right`;
  3121. nodeSize[shape] = {
  3122. width: width,
  3123. height: height
  3124. };
  3125. const option = commonOption();
  3126. option.attrs.path.transform = `rotate(-90)`; // `rotate(-90) translate(-16.5,0)`;
  3127. Graph.registerNode(shape, option, true);
  3128. }
  3129. registerTop();
  3130. registerBottom();
  3131. registerLeft();
  3132. registerRight();
  3133. }
  3134. // 开关闭合
  3135. const registerSwitchClose = () => {
  3136. const width = 0;
  3137. const height = 0;
  3138. const shapeName = "switch-close";
  3139. const commonOption = () => {
  3140. return {
  3141. width: width,
  3142. height: height,
  3143. markup: [
  3144. {
  3145. tagName: 'path',
  3146. selector: 'path',
  3147. },
  3148. ],
  3149. attrs: {
  3150. path: {
  3151. d: `M1,6 a3 3 0 1 0 -2 0 M0,6 l0,20 m-5,0 l10,0`,
  3152. refX: 0,
  3153. refY: 0,
  3154. fill: "transparent",
  3155. stroke: "#b30303",
  3156. "stroke-width": 2,
  3157. },
  3158. },
  3159. }
  3160. }
  3161. const registerTop = () => {
  3162. const shape = `${shapeName}-top`;
  3163. nodeSize[shape] = {
  3164. width: width,
  3165. height: height
  3166. };
  3167. const option = commonOption();
  3168. option.attrs.path.transform = `rotate(180)`; // `rotate(-90) translate(-16.5,0)`;
  3169. Graph.registerNode(shape, option, true);
  3170. }
  3171. const registerBottom = () => {
  3172. const shape = `${shapeName}-bottom`;
  3173. nodeSize[shape] = {
  3174. width: width,
  3175. height: height
  3176. };
  3177. const option = commonOption();
  3178. Graph.registerNode(shape, option, true);
  3179. }
  3180. const registerLeft = () => {
  3181. const shape = `${shapeName}-left`;
  3182. nodeSize[shape] = {
  3183. width: width,
  3184. height: height
  3185. };
  3186. const option = commonOption();
  3187. option.attrs.path.transform = `rotate(90)`; // `rotate(-90) translate(-16.5,0)`;
  3188. Graph.registerNode(shape, option, true);
  3189. }
  3190. const registerRight = () => {
  3191. const shape = `${shapeName}-right`;
  3192. nodeSize[shape] = {
  3193. width: width,
  3194. height: height
  3195. };
  3196. const option = commonOption();
  3197. option.attrs.path.transform = `rotate(-90)`; // `rotate(-90) translate(-16.5,0)`;
  3198. Graph.registerNode(shape, option, true);
  3199. }
  3200. registerTop();
  3201. registerBottom();
  3202. registerLeft();
  3203. registerRight();
  3204. }
  3205. // 手车00
  3206. const registerHandcart00 = () => {
  3207. const width = 0;
  3208. const height = 0;
  3209. const shapeName = "handcart00";
  3210. const commonOption = () => {
  3211. return {
  3212. width: width,
  3213. height: height,
  3214. markup: [
  3215. {
  3216. tagName: 'path',
  3217. selector: 'path',
  3218. },
  3219. {
  3220. tagName: 'rect',
  3221. selector: 'rect',
  3222. },
  3223. ],
  3224. attrs: {
  3225. path: {
  3226. d: `M0,0 l-8,8 m8,-8 l8,8 m-8,-2 l-8,8 m8,-8 l8,8
  3227. M0,60 l-8,-8 m8,8 l8,-8 m-8,2 l-8,-8 m8,8 l8,-8`,
  3228. refX: 0,
  3229. refY: 0,
  3230. fill: "transparent",
  3231. stroke: "#04a635",
  3232. "stroke-width": 2,
  3233. },
  3234. rect: {
  3235. x: -8,
  3236. y: 18,
  3237. width: 16,
  3238. height: 24,
  3239. fill: "#04a635",
  3240. stroke: "transparent",
  3241. },
  3242. },
  3243. }
  3244. }
  3245. const registerTop = () => {
  3246. const shape = `${shapeName}-top`;
  3247. nodeSize[shape] = {
  3248. width: width,
  3249. height: height
  3250. };
  3251. const option = commonOption();
  3252. Graph.registerNode(shape, option, true);
  3253. }
  3254. const registerBottom = () => {
  3255. const shape = `${shapeName}-bottom`;
  3256. nodeSize[shape] = {
  3257. width: width,
  3258. height: height
  3259. };
  3260. const option = commonOption();
  3261. Graph.registerNode(shape, option, true);
  3262. }
  3263. const registerLeft = () => {
  3264. const shape = `${shapeName}-left`;
  3265. nodeSize[shape] = {
  3266. width: width,
  3267. height: height
  3268. };
  3269. const option = commonOption();
  3270. Graph.registerNode(shape, option, true);
  3271. }
  3272. const registerRight = () => {
  3273. const shape = `${shapeName}-right`;
  3274. nodeSize[shape] = {
  3275. width: width,
  3276. height: height
  3277. };
  3278. const option = commonOption();
  3279. Graph.registerNode(shape, option, true);
  3280. }
  3281. registerTop();
  3282. registerBottom();
  3283. registerLeft();
  3284. registerRight();
  3285. }
  3286. // 手车01
  3287. const registerHandcart01 = () => {
  3288. const width = 0;
  3289. const height = 0;
  3290. const shapeName = "handcart01";
  3291. const commonOption = () => {
  3292. return {
  3293. width: width,
  3294. height: height,
  3295. markup: [
  3296. {
  3297. tagName: 'path',
  3298. selector: 'path',
  3299. },
  3300. {
  3301. tagName: 'rect',
  3302. selector: 'rect',
  3303. },
  3304. ],
  3305. attrs: {
  3306. path: {
  3307. d: `M0,0 l-8,8 m8,-8 l8,8 m-8,-2 l-8,8 m8,-8 l8,8
  3308. M0,60 l-8,-8 m8,8 l8,-8 m-8,2 l-8,-8 m8,8 l8,-8`,
  3309. refX: 0,
  3310. refY: 0,
  3311. fill: "transparent",
  3312. stroke: "#04a635",
  3313. "stroke-width": 2,
  3314. },
  3315. rect: {
  3316. x: -8,
  3317. y: 18,
  3318. width: 16,
  3319. height: 24,
  3320. fill: "#b30303",
  3321. stroke: "transparent",
  3322. },
  3323. },
  3324. }
  3325. }
  3326. const registerTop = () => {
  3327. const shape = `${shapeName}-top`;
  3328. nodeSize[shape] = {
  3329. width: width,
  3330. height: height
  3331. };
  3332. const option = commonOption();
  3333. Graph.registerNode(shape, option, true);
  3334. }
  3335. const registerBottom = () => {
  3336. const shape = `${shapeName}-bottom`;
  3337. nodeSize[shape] = {
  3338. width: width,
  3339. height: height
  3340. };
  3341. const option = commonOption();
  3342. Graph.registerNode(shape, option, true);
  3343. }
  3344. const registerLeft = () => {
  3345. const shape = `${shapeName}-left`;
  3346. nodeSize[shape] = {
  3347. width: width,
  3348. height: height
  3349. };
  3350. const option = commonOption();
  3351. Graph.registerNode(shape, option, true);
  3352. }
  3353. const registerRight = () => {
  3354. const shape = `${shapeName}-right`;
  3355. nodeSize[shape] = {
  3356. width: width,
  3357. height: height
  3358. };
  3359. const option = commonOption();
  3360. Graph.registerNode(shape, option, true);
  3361. }
  3362. registerTop();
  3363. registerBottom();
  3364. registerLeft();
  3365. registerRight();
  3366. }
  3367. // 手车10
  3368. const registerHandcart10 = () => {
  3369. const width = 0;
  3370. const height = 0;
  3371. const shapeName = "handcart10";
  3372. const commonOption = () => {
  3373. return {
  3374. width: width,
  3375. height: height,
  3376. markup: [
  3377. {
  3378. tagName: 'path',
  3379. selector: 'path',
  3380. },
  3381. {
  3382. tagName: 'rect',
  3383. selector: 'rect',
  3384. },
  3385. ],
  3386. attrs: {
  3387. path: {
  3388. d: `M0,0 l-8,8 m8,-8 l8,8 m-8,-2 l-8,8 m8,-8 l8,8
  3389. M0,60 l-8,-8 m8,8 l8,-8 m-8,2 l-8,-8 m8,8 l8,-8`,
  3390. refX: 0,
  3391. refY: 0,
  3392. fill: "transparent",
  3393. stroke: "#b30303",
  3394. "stroke-width": 2,
  3395. },
  3396. rect: {
  3397. x: -8,
  3398. y: 18,
  3399. width: 16,
  3400. height: 24,
  3401. fill: "#04a635",
  3402. stroke: "transparent",
  3403. },
  3404. },
  3405. }
  3406. }
  3407. const registerTop = () => {
  3408. const shape = `${shapeName}-top`;
  3409. nodeSize[shape] = {
  3410. width: width,
  3411. height: height
  3412. };
  3413. const option = commonOption();
  3414. Graph.registerNode(shape, option, true);
  3415. }
  3416. const registerBottom = () => {
  3417. const shape = `${shapeName}-bottom`;
  3418. nodeSize[shape] = {
  3419. width: width,
  3420. height: height
  3421. };
  3422. const option = commonOption();
  3423. Graph.registerNode(shape, option, true);
  3424. }
  3425. const registerLeft = () => {
  3426. const shape = `${shapeName}-left`;
  3427. nodeSize[shape] = {
  3428. width: width,
  3429. height: height
  3430. };
  3431. const option = commonOption();
  3432. Graph.registerNode(shape, option, true);
  3433. }
  3434. const registerRight = () => {
  3435. const shape = `${shapeName}-right`;
  3436. nodeSize[shape] = {
  3437. width: width,
  3438. height: height
  3439. };
  3440. const option = commonOption();
  3441. Graph.registerNode(shape, option, true);
  3442. }
  3443. registerTop();
  3444. registerBottom();
  3445. registerLeft();
  3446. registerRight();
  3447. }
  3448. // 手车11
  3449. const registerHandcart11 = () => {
  3450. const width = 0;
  3451. const height = 0;
  3452. const shapeName = "handcart11";
  3453. const commonOption = () => {
  3454. return {
  3455. width: width,
  3456. height: height,
  3457. markup: [
  3458. {
  3459. tagName: 'path',
  3460. selector: 'path',
  3461. },
  3462. {
  3463. tagName: 'rect',
  3464. selector: 'rect',
  3465. },
  3466. ],
  3467. attrs: {
  3468. path: {
  3469. d: `M0,0 l-8,8 m8,-8 l8,8 m-8,-2 l-8,8 m8,-8 l8,8
  3470. M0,60 l-8,-8 m8,8 l8,-8 m-8,2 l-8,-8 m8,8 l8,-8`,
  3471. refX: 0,
  3472. refY: 0,
  3473. fill: "transparent",
  3474. stroke: "#b30303",
  3475. "stroke-width": 2,
  3476. },
  3477. rect: {
  3478. x: -8,
  3479. y: 18,
  3480. width: 16,
  3481. height: 24,
  3482. fill: "#b30303",
  3483. stroke: "transparent",
  3484. },
  3485. },
  3486. }
  3487. }
  3488. const registerTop = () => {
  3489. const shape = `${shapeName}-top`;
  3490. nodeSize[shape] = {
  3491. width: width,
  3492. height: height
  3493. };
  3494. const option = commonOption();
  3495. Graph.registerNode(shape, option, true);
  3496. }
  3497. const registerBottom = () => {
  3498. const shape = `${shapeName}-bottom`;
  3499. nodeSize[shape] = {
  3500. width: width,
  3501. height: height
  3502. };
  3503. const option = commonOption();
  3504. Graph.registerNode(shape, option, true);
  3505. }
  3506. const registerLeft = () => {
  3507. const shape = `${shapeName}-left`;
  3508. nodeSize[shape] = {
  3509. width: width,
  3510. height: height
  3511. };
  3512. const option = commonOption();
  3513. Graph.registerNode(shape, option, true);
  3514. }
  3515. const registerRight = () => {
  3516. const shape = `${shapeName}-right`;
  3517. nodeSize[shape] = {
  3518. width: width,
  3519. height: height
  3520. };
  3521. const option = commonOption();
  3522. Graph.registerNode(shape, option, true);
  3523. }
  3524. registerTop();
  3525. registerBottom();
  3526. registerLeft();
  3527. registerRight();
  3528. }
  3529. // 标签文字
  3530. const registerTagText = () => {
  3531. const width = 100;
  3532. const height = 24;
  3533. const shape = "tag-text";
  3534. nodeSize[shape] = {
  3535. width: width,
  3536. height: height
  3537. };
  3538. const option = {
  3539. width: width,
  3540. height: height,
  3541. markup: [
  3542. {
  3543. tagName: 'rect',
  3544. selector: 'rect',
  3545. },
  3546. {
  3547. tagName: 'text',
  3548. selector: 'label',
  3549. },
  3550. ],
  3551. attrs: {
  3552. rect: {
  3553. width: width,
  3554. height: height,
  3555. x: 0,
  3556. y: 0,
  3557. fill: "#5B5792",
  3558. stroke: "transparent",
  3559. },
  3560. label: {
  3561. fill: '#C9D0FE',
  3562. fontSize: 14,
  3563. refX: 50,
  3564. refY: 5,
  3565. "text-anchor": "middle"
  3566. },
  3567. },
  3568. };
  3569. Graph.registerNode(shape, option, true);
  3570. }
  3571. // 标签文字
  3572. const registerTagTextR = () => {
  3573. const width = 100;
  3574. const height = 24;
  3575. const shape = "tag-text-r";
  3576. nodeSize[shape] = {
  3577. width: width,
  3578. height: height
  3579. };
  3580. const option = {
  3581. width: width,
  3582. height: height,
  3583. markup: [
  3584. {
  3585. tagName: 'rect',
  3586. selector: 'rect',
  3587. },
  3588. {
  3589. tagName: 'text',
  3590. selector: 'label',
  3591. },
  3592. ],
  3593. attrs: {
  3594. rect: {
  3595. width: width,
  3596. height: height,
  3597. x: 0,
  3598. y: 0,
  3599. fill: "#BA323766",
  3600. stroke: "#BA3237",
  3601. opacity: 0.5,
  3602. "stroke-width": 1,
  3603. },
  3604. label: {
  3605. fill: '#C9D0FE',
  3606. fontSize: 14,
  3607. refX: 50,
  3608. refY: 5,
  3609. "text-anchor": "middle"
  3610. },
  3611. },
  3612. };
  3613. Graph.registerNode(shape, option, true);
  3614. }
  3615. // 小标签文字
  3616. const registerTagTexts = () => {
  3617. const width = 74;
  3618. const height = 24;
  3619. const shape = "tag-text-s";
  3620. nodeSize[shape] = {
  3621. width: width,
  3622. height: height
  3623. };
  3624. const option = {
  3625. width: width,
  3626. height: height,
  3627. markup: [
  3628. {
  3629. tagName: 'rect',
  3630. selector: 'rect',
  3631. },
  3632. {
  3633. tagName: 'text',
  3634. selector: 'label',
  3635. },
  3636. ],
  3637. attrs: {
  3638. rect: {
  3639. width: width,
  3640. height: height,
  3641. x: 0,
  3642. y: 0,
  3643. fill: "#5B5792",
  3644. stroke: "transparent",
  3645. },
  3646. label: {
  3647. fill: '#C9D0FE',
  3648. fontSize: 14,
  3649. refX: 37,
  3650. refY: 5,
  3651. "text-anchor": "middle"
  3652. },
  3653. },
  3654. };
  3655. Graph.registerNode(shape, option, true);
  3656. }
  3657. // 表单文字
  3658. const registerFormText = () => {
  3659. const width = 150;
  3660. const height = 24;
  3661. const shape = "form-text";
  3662. nodeSize[shape] = {
  3663. width: width,
  3664. height: height
  3665. };
  3666. const option = {
  3667. width: width,
  3668. height: height,
  3669. markup: [
  3670. {
  3671. tagName: 'rect',
  3672. selector: 'rect',
  3673. },
  3674. {
  3675. tagName: 'text',
  3676. selector: 'label',
  3677. },
  3678. {
  3679. tagName: 'text',
  3680. selector: 'value',
  3681. },
  3682. ],
  3683. attrs: {
  3684. rect: {
  3685. width: width,
  3686. height: height,
  3687. x: 0,
  3688. y: 0,
  3689. fill: "#536268",
  3690. opacity: 0.2,
  3691. stroke: "transparent",
  3692. },
  3693. label: {
  3694. fill: '#6A7476',
  3695. fontSize: fontsize,
  3696. refX: 6,
  3697. refY: 6,
  3698. "text-anchor": "start"
  3699. },
  3700. value: {
  3701. fill: '#059C40',
  3702. fontSize: fontsize,
  3703. refX: 144,
  3704. refY: 6,
  3705. "text-anchor": "end"
  3706. },
  3707. },
  3708. };
  3709. Graph.registerNode(shape, option, true);
  3710. }
  3711. // label文字
  3712. const registerLabelText = () => {
  3713. const width = 150;
  3714. const height = 24;
  3715. const shape = "label-text";
  3716. nodeSize[shape] = {
  3717. width: width,
  3718. height: height
  3719. };
  3720. const option = {
  3721. width: width,
  3722. height: height,
  3723. markup: [
  3724. {
  3725. tagName: 'text',
  3726. selector: 'label',
  3727. },
  3728. ],
  3729. attrs: {
  3730. label: {
  3731. fill: '#6A7476',
  3732. fontSize: fontsize,
  3733. refX: 0,
  3734. refY: 6,
  3735. "text-anchor": "start"
  3736. },
  3737. },
  3738. };
  3739. Graph.registerNode(shape, option, true);
  3740. }
  3741. // simple文字
  3742. const registerSimpleText = () => {
  3743. const width = 150;
  3744. const height = 24;
  3745. const shape = "simple-text";
  3746. nodeSize[shape] = {
  3747. width: width,
  3748. height: height
  3749. };
  3750. const option = {
  3751. width: width,
  3752. height: height,
  3753. markup: [
  3754. {
  3755. tagName: 'text',
  3756. selector: 'label',
  3757. },
  3758. ],
  3759. attrs: {
  3760. label: {
  3761. fill: '#D0D0D0',
  3762. fontSize: fontsize,
  3763. refX: 0,
  3764. refY: 6,
  3765. "text-anchor": "start"
  3766. },
  3767. },
  3768. };
  3769. Graph.registerNode(shape, option, true);
  3770. }
  3771. // simple文字
  3772. const registerSimpleTextR = () => {
  3773. const width = 150;
  3774. const height = 24;
  3775. const shape = "simple-text-r";
  3776. nodeSize[shape] = {
  3777. width: width,
  3778. height: height
  3779. };
  3780. const option = {
  3781. width: width,
  3782. height: height,
  3783. markup: [
  3784. {
  3785. tagName: 'text',
  3786. selector: 'label',
  3787. },
  3788. ],
  3789. attrs: {
  3790. label: {
  3791. fill: '#D0D0D0',
  3792. fontSize: fontsize,
  3793. refX: 0,
  3794. refY: 6,
  3795. "text-anchor": "end"
  3796. },
  3797. },
  3798. };
  3799. Graph.registerNode(shape, option, true);
  3800. }
  3801. // value文字
  3802. const registerValueText = () => {
  3803. const width = 74;
  3804. const height = 24;
  3805. const shape = "value-text";
  3806. nodeSize[shape] = {
  3807. width: width,
  3808. height: height
  3809. };
  3810. const option = {
  3811. width: width,
  3812. height: height,
  3813. markup: [
  3814. {
  3815. tagName: 'rect',
  3816. selector: 'rect',
  3817. },
  3818. {
  3819. tagName: 'text',
  3820. selector: 'label',
  3821. },
  3822. ],
  3823. attrs: {
  3824. rect: {
  3825. width: width,
  3826. height: height,
  3827. x: 0,
  3828. y: 0,
  3829. fill: "#536268",
  3830. opacity: 0.2,
  3831. stroke: "transparent",
  3832. },
  3833. label: {
  3834. fill: '#059C40',
  3835. fontSize: fontsize,
  3836. refX: 37,
  3837. refY: 6,
  3838. "text-anchor": "middle"
  3839. },
  3840. },
  3841. };
  3842. Graph.registerNode(shape, option, true);
  3843. }
  3844. // 总貌主变
  3845. const registerMainChange = () => {
  3846. const width = 74;
  3847. const height = 24;
  3848. const r = 10;
  3849. const w = 2;
  3850. const shape = "main-change";
  3851. nodeSize[shape] = {
  3852. width: width,
  3853. height: height
  3854. };
  3855. const option = {
  3856. width: width,
  3857. height: height,
  3858. markup: [
  3859. {
  3860. tagName: 'rect',
  3861. selector: 'line1',
  3862. },
  3863. {
  3864. tagName: 'path',
  3865. selector: 'path',
  3866. },
  3867. {
  3868. tagName: 'path',
  3869. selector: 'path1',
  3870. },
  3871. {
  3872. tagName: 'circle',
  3873. selector: 'circle1',
  3874. },
  3875. {
  3876. tagName: 'circle',
  3877. selector: 'circle2',
  3878. },
  3879. {
  3880. tagName: 'path',
  3881. selector: 'path2',
  3882. },
  3883. {
  3884. tagName: 'rect',
  3885. selector: 'line2',
  3886. },
  3887. ],
  3888. attrs: {
  3889. line1: {
  3890. width: weight,
  3891. height: 10,
  3892. x: -(weight/2),
  3893. y: 0,
  3894. fill: "#b30461",
  3895. stroke: "transparent",
  3896. },
  3897. circle1: {
  3898. cx: 0,
  3899. cy: 20,
  3900. r: 10,
  3901. fill: "transparent",
  3902. stroke: "#d500ff",
  3903. "stroke-width": 2,
  3904. },
  3905. circle2: {
  3906. cx: 0,
  3907. cy: 34,
  3908. r: 10,
  3909. fill: "transparent",
  3910. stroke: "#cbaa07",
  3911. "stroke-width": 2,
  3912. },
  3913. path: {
  3914. d: `M0,20 l-${r/2},${r/2} m${r/2},-${r/2} l${r/2},${r/2} m-${r/2},-${r/2} l0,-${r/2}`,
  3915. x: -(weight / 2),
  3916. y: 0,
  3917. fill: "transparent",
  3918. stroke: "#d500ff",
  3919. "stroke-width": w,
  3920. },
  3921. path1: {
  3922. d: `M0,34 m-1,-${r/2} l0,${r} l${r/2},-${r/2} l-${r/2},-${r/2}`,
  3923. x: -(weight / 2),
  3924. y: 0,
  3925. fill: "transparent",
  3926. stroke: "#cbaa07",
  3927. "stroke-width": w,
  3928. },
  3929. path2: {
  3930. d: `M-20,${weight*2+15} l50,0 l0,2.5 l7.5,-2.5 l-7.5,-2.5 l0,2.5 z`,
  3931. x: -(weight / 2),
  3932. y: 0,
  3933. fill: "#d500ff",
  3934. stroke: "#d500ff",
  3935. "stroke-width": w,
  3936. transform: `rotate(-30) translate(-20, -3)`
  3937. },
  3938. line2: {
  3939. width: weight,
  3940. height: 10,
  3941. x: -(weight/2),
  3942. y: 44,
  3943. fill: "#cbaa07",
  3944. stroke: "transparent",
  3945. },
  3946. },
  3947. };
  3948. Graph.registerNode(shape, option, true);
  3949. }
  3950. // 风机
  3951. const registerFan = () => {
  3952. const width = 40;
  3953. const height = 24;
  3954. const shapeName = "fan";
  3955. const commonOption = () => {
  3956. return {
  3957. width: width,
  3958. height: height,
  3959. markup: [
  3960. {
  3961. tagName: 'rect',
  3962. selector: 'rect',
  3963. },
  3964. {
  3965. tagName: 'text',
  3966. selector: 'label',
  3967. },
  3968. {
  3969. tagName: 'image',
  3970. selector: 'image',
  3971. }
  3972. ],
  3973. attrs: {
  3974. rect: {
  3975. width: width,
  3976. height: height,
  3977. x: 0,
  3978. y: 0,
  3979. rx: 4,
  3980. ry: 4,
  3981. opacity: 0.5,
  3982. "stroke-width": 1,
  3983. },
  3984. label: {
  3985. fill: '#B2BDC0',
  3986. fontSize: 13,
  3987. refX: 20,
  3988. refY: 6,
  3989. "text-anchor": "middle"
  3990. },
  3991. image: {
  3992. width: 50,
  3993. height: 50,
  3994. refX: -5,
  3995. refY: -55,
  3996. },
  3997. },
  3998. }
  3999. }
  4000. const green = () =>{
  4001. const color = "green";
  4002. const shape = `${shapeName}-${color}`;
  4003. nodeSize[shape] = {
  4004. width: width,
  4005. height: height
  4006. };
  4007. const option = commonOption();
  4008. option.attrs.rect.fill = "#05bb4c66";
  4009. option.attrs.rect.stroke = "#05bb4c";
  4010. option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
  4011. Graph.registerNode(shape, option, true);
  4012. }
  4013. const gray = () =>{
  4014. const color = "gray";
  4015. const shape = `${shapeName}-${color}`;
  4016. nodeSize[shape] = {
  4017. width: width,
  4018. height: height
  4019. };
  4020. const option = commonOption();
  4021. option.attrs.rect.fill = "#B3BDC066";
  4022. option.attrs.rect.stroke = "#B3BDC0";
  4023. option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
  4024. Graph.registerNode(shape, option, true);
  4025. }
  4026. const blue = () =>{
  4027. const color = "blue";
  4028. const shape = `${shapeName}-${color}`;
  4029. nodeSize[shape] = {
  4030. width: width,
  4031. height: height
  4032. };
  4033. const option = commonOption();
  4034. option.attrs.rect.fill = "#1a93cf66";
  4035. option.attrs.rect.stroke = "#1a93cf";
  4036. option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
  4037. Graph.registerNode(shape, option, true);
  4038. }
  4039. const orange = () =>{
  4040. const color = "orange";
  4041. const shape = `${shapeName}-${color}`;
  4042. nodeSize[shape] = {
  4043. width: width,
  4044. height: height
  4045. };
  4046. const option = commonOption();
  4047. option.attrs.rect.fill = "#e17e2366";
  4048. option.attrs.rect.stroke = "#e17e23";
  4049. option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
  4050. Graph.registerNode(shape, option, true);
  4051. }
  4052. const red = () =>{
  4053. const color = "red";
  4054. const shape = `${shapeName}-${color}`;
  4055. nodeSize[shape] = {
  4056. width: width,
  4057. height: height
  4058. };
  4059. const option = commonOption();
  4060. option.attrs.rect.fill = "#BA323766";
  4061. option.attrs.rect.stroke = "#BA3237";
  4062. option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
  4063. Graph.registerNode(shape, option, true);
  4064. }
  4065. const purple = () =>{
  4066. const color = "purple";
  4067. const shape = `${shapeName}-${color}`;
  4068. nodeSize[shape] = {
  4069. width: width,
  4070. height: height
  4071. };
  4072. const option = commonOption();
  4073. option.attrs.rect.fill = "#c531c766";
  4074. option.attrs.rect.stroke = "#c531c7";
  4075. option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
  4076. Graph.registerNode(shape, option, true);
  4077. }
  4078. const purpleStop = () =>{
  4079. const color = "purple-stop";
  4080. const shape = `${shapeName}-${color}`;
  4081. nodeSize[shape] = {
  4082. width: width,
  4083. height: height
  4084. };
  4085. const option = commonOption();
  4086. option.attrs.rect.fill = "#c531c766";
  4087. option.attrs.rect.stroke = "#c531c7";
  4088. option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
  4089. Graph.registerNode(shape, option, true);
  4090. }
  4091. const white = () =>{
  4092. const color = "white";
  4093. const shape = `${shapeName}-${color}`;
  4094. nodeSize[shape] = {
  4095. width: width,
  4096. height: height
  4097. };
  4098. const option = commonOption();
  4099. option.attrs.rect.fill = "#ffffff66";
  4100. option.attrs.rect.stroke = "#ffffff";
  4101. option.attrs.image['xlink:href'] = require(`@assets/png/fanx6-${color}.svg`);
  4102. Graph.registerNode(shape, option, true);
  4103. }
  4104. green();
  4105. gray();
  4106. blue();
  4107. orange();
  4108. red();
  4109. purple();
  4110. purpleStop();
  4111. white();
  4112. }
  4113. // 注册自定义节点
  4114. const register = () => {
  4115. registerRootNode();
  4116. registerCircuitBreakerVerticalBreak();
  4117. registerLongCircuitBreakerVerticalBreak();
  4118. registerLongCircuitBreakerVerticalLink();
  4119. registerEarthingDisconnectorTransverseBreak();
  4120. registerEarthingDisconnectorTransverse2Break();
  4121. registerEarthingDisconnectorVerticalBreak();
  4122. registerArrowVertical();
  4123. registerLineVertical();
  4124. registerReactorVertical();
  4125. registerCapacitanceVertical();
  4126. registerResistanceVertical();
  4127. registerVoltageTransformer();
  4128. registerGroundingTransformer();
  4129. registerGroundingCapacitanceTransverse();
  4130. registerVoltage3Transformer();
  4131. registerVoltage5Transformer();
  4132. registerGroundingResistanceVertical();
  4133. registerThreePhaseTransformer();
  4134. registerEarthingDisconnectorTransverseYBreak();
  4135. registerMainTransformer();
  4136. registerMainTransformer1();
  4137. registerMainTransformer2();
  4138. registerMainTransformer3();
  4139. registerSwitchBreak();
  4140. registerSwitchClose();
  4141. registerHandcart00();
  4142. registerHandcart01();
  4143. registerHandcart10();
  4144. registerHandcart11();
  4145. registerEarthingDisconnectorTransverseYoBreak();
  4146. registerTagText();
  4147. registerFormText();
  4148. registerLabelText();
  4149. registerValueText();
  4150. registerTagTexts();
  4151. registerMainChange();
  4152. registerSimpleText();
  4153. registerSimpleTextR();
  4154. registerFan();
  4155. registerTagTextR();
  4156. }
  4157. export default {
  4158. register: register,
  4159. nodeSize: nodeSize,
  4160. weight: weight,
  4161. fontsize: fontsize,
  4162. }