search

nikeee / edotor.net

Your favourite Graphviz editor
https://edotor.net
MIT License
176 stars 21 forks source link

Increase max zoom factor... a lot #32

Closed IfZen closed 3 years ago

IfZen commented 4 years ago

When zooming a large graph using mouse scroll, it seems there is a limit, a maximum zoom factor, which is still too tiny in my case to read the nodes' labels. This is frustrating because I need to export the PNG file and get in trouble with another issue. Graph and trouble are described here: https://github.com/nikeee/edotor.net/issues/24#issuecomment-663904168

Because the render is svg, we should be able to zoom veeeery deep right ? I am not a web developper so maybe I missed a point here.

Any way to improve this ?

ghost commented 3 years ago

I agree with @IfZen Here is an example where we hit the limit.

digraph G {
node0 [style=filled, fillcolor=green, label="(0.5472420298865589, 0.18440159754287377)"]
node0->node1
node0->node2
node1 [style=filled, fillcolor=green, label="(0.21564298592392728, 0.5033527249528885)"]
node1->node3
node1->node4
node3 [style=filled, fillcolor=green, label="(0.3278677144315696, 0.08730278779272638)"]
node3->node7
node3->node8
node7 [style=filled, fillcolor=green, label="(0.08901995060225087, 0.2873854808912799)"]
node7->node15
node7->node16
node15 [style=filled, fillcolor=green, label="(0.09547167599425532, 0.1504045644787454)"]
node15->node31
node15->node32
node31 [style=filled, fillcolor=green, label="(0.05870517300796696, 0.0812323636704183)"]
node31->node63
node31->node64
node63 [style=filled, fillcolor=green, label="(0.013228274889449998, 0.002735936651055426)"]
null0 [shape=point]
node63->null0
null1 [shape=point]
node63->null1
node64 [style=filled, fillcolor=green, label="(0.06417831827397791, 0.24063350760562308)"]
null2 [shape=point]
node64->null2
null3 [shape=point]
node64->null3
node32 [style=filled, fillcolor=green, label="(0.23566515452309011, 0.025805316553509705)"]
node32->node65
null4 [shape=point]
node32->null4
node65 [style=filled, fillcolor=green, label="(0.11049873972171065, 0.014930977524445721)"]
null5 [shape=point]
node65->null5
null6 [shape=point]
node65->null6
node16 [style=filled, fillcolor=green, label="(0.1370053240328405, 0.4477587959090783)"]
node16->node33
node16->node34
node33 [style=filled, fillcolor=green, label="(0.12094474104703568, 0.4871905665544983)"]
node33->node67
null7 [shape=point]
node33->null7
node67 [style=filled, fillcolor=green, label="(0.07184286104629223, 0.38892413352130306)"]
null8 [shape=point]
node67->null8
null9 [shape=point]
node67->null9
node34 [style=filled, fillcolor=green, label="(0.2694539533637178, 0.4492084975385452)"]
node34->node69
null10 [shape=point]
node34->null10
node69 [style=filled, fillcolor=green, label="(0.267098541857388, 0.3487217120103706)"]
null11 [shape=point]
node69->null11
null12 [shape=point]
node69->null12
node8 [style=filled, fillcolor=green, label="(0.3288837262186789, 0.2678744874107114)"]
node8->node17
node8->node18
node17 [style=filled, fillcolor=green, label="(0.5164654504568629, 0.13071654328250026)"]
node17->node35
node17->node36
node35 [style=filled, fillcolor=green, label="(0.40698439655163965, 0.14231126692939222)"]
node35->node71
node35->node72
node71 [style=filled, fillcolor=green, label="(0.499522342336581, 0.050064802341412196)"]
null13 [shape=point]
node71->null13
null14 [shape=point]
node71->null14
node72 [style=filled, fillcolor=green, label="(0.35469612366473213, 0.1920995872344189)"]
null15 [shape=point]
node72->null15
null16 [shape=point]
node72->null16
node36 [style=filled, fillcolor=green, label="(0.5180139757326523, 0.14177677112039277)"]
node36->node73
null17 [shape=point]
node36->null17
node73 [style=filled, fillcolor=green, label="(0.5233624542515399, 0.09593249193546338)"]
null18 [shape=point]
node73->null18
null19 [shape=point]
node73->null19
node18 [style=filled, fillcolor=green, label="(0.4523532850025175, 0.28797591279302603)"]
node18->node37
node18->node38
node37 [style=filled, fillcolor=green, label="(0.33984229939071087, 0.44189623767890307)"]
node37->node75
null20 [shape=point]
node37->null20
node75 [style=filled, fillcolor=green, label="(0.3491002199909905, 0.32662353183278703)"]
null21 [shape=point]
node75->null21
null22 [shape=point]
node75->null22
node38 [style=filled, fillcolor=green, label="(0.49945345256012674, 0.49254335096204793)"]
node38->node77
null23 [shape=point]
node38->null23
node77 [style=filled, fillcolor=green, label="(0.4726639625869903, 0.4581674551776389)"]
null24 [shape=point]
node77->null24
null25 [shape=point]
node77->null25
node4 [style=filled, fillcolor=green, label="(0.27758120735938274, 0.6367159068010555)"]
node4->node9
node4->node10
node9 [style=filled, fillcolor=green, label="(0.2616674640848684, 0.8852990573306854)"]
node9->node19
node9->node20
node19 [style=filled, fillcolor=green, label="(0.11709212618434162, 0.5978819668616798)"]
node19->node39
node19->node40
node39 [style=filled, fillcolor=green, label="(0.05148197556483636, 0.6963637895453242)"]
node39->node79
node39->node80
node79 [style=filled, fillcolor=green, label="(0.0879494749289702, 0.6118972236390957)"]
null26 [shape=point]
node79->null26
null27 [shape=point]
node79->null27
node80 [style=filled, fillcolor=green, label="(0.10165932013675072, 0.7386086306538633)"]
null28 [shape=point]
node80->null28
null29 [shape=point]
node80->null29
node40 [style=filled, fillcolor=green, label="(0.2552721674269913, 0.6695031267545032)"]
node40->node81
null30 [shape=point]
node40->null30
node81 [style=filled, fillcolor=green, label="(0.1850518916063164, 0.5287408646500641)"]
null31 [shape=point]
node81->null31
null32 [shape=point]
node81->null32
node20 [style=filled, fillcolor=green, label="(0.1302873744661106, 0.9222644138474514)"]
node20->node41
node20->node42
node41 [style=filled, fillcolor=green, label="(0.10420156220012255, 0.990634349544691)"]
node41->node83
null33 [shape=point]
node41->null33
node83 [style=filled, fillcolor=green, label="(0.06928856532400884, 0.920845479567401)"]
null34 [shape=point]
node83->null34
null35 [shape=point]
node83->null35
node42 [style=filled, fillcolor=green, label="(0.2767103325565815, 0.9817009520603073)"]
node42->node85
null36 [shape=point]
node42->null36
node85 [style=filled, fillcolor=green, label="(0.17630418741523546, 0.9200373645554134)"]
null37 [shape=point]
node85->null37
null38 [shape=point]
node85->null38
node10 [style=filled, fillcolor=green, label="(0.3988025109989348, 0.8200496453952356)"]
node10->node21
node10->node22
node21 [style=filled, fillcolor=green, label="(0.4564342795416412, 0.6115214809307277)"]
node21->node43
node21->node44
node43 [style=filled, fillcolor=green, label="(0.39739713498668994, 0.715241174998077)"]
node43->node87
null39 [shape=point]
node43->null39
node87 [style=filled, fillcolor=green, label="(0.2956560839167959, 0.6218896364082611)"]
null40 [shape=point]
node87->null40
null41 [shape=point]
node87->null41
node44 [style=filled, fillcolor=green, label="(0.5279077302000474, 0.7500969446116035)"]
node44->node89
null42 [shape=point]
node44->null42
node89 [style=filled, fillcolor=green, label="(0.4632948349479159, 0.7395389173870944)"]
null43 [shape=point]
node89->null43
null44 [shape=point]
node89->null44
node22 [style=filled, fillcolor=green, label="(0.4870691553155584, 0.9467250399176264)"]
node22->node45
node22->node46
node45 [style=filled, fillcolor=green, label="(0.3349347164452757, 0.9391309710300403)"]
node45->node91
null45 [shape=point]
node45->null45
node91 [style=filled, fillcolor=green, label="(0.3923832815786157, 0.8723172983435971)"]
null46 [shape=point]
node91->null46
null47 [shape=point]
node91->null47
node46 [style=filled, fillcolor=green, label="(0.515610559145753, 0.9859503294576576)"]
node46->node93
null48 [shape=point]
node46->null48
node93 [style=filled, fillcolor=green, label="(0.5348591702996933, 0.9380971138207372)"]
null49 [shape=point]
node93->null49
null50 [shape=point]
node93->null50
node2 [style=filled, fillcolor=green, label="(0.6340389181473038, 0.5031497825914643)"]
node2->node5
node2->node6
node5 [style=filled, fillcolor=green, label="(0.7862680901061835, 0.26087907535770094)"]
node5->node11
node5->node12
node11 [style=filled, fillcolor=green, label="(0.6160875784902076, 0.3762958097370487)"]
node11->node23
node11->node24
node23 [style=filled, fillcolor=green, label="(0.6773829885850401, 0.12864881132367634)"]
node23->node47
node23->node48
node47 [style=filled, fillcolor=green, label="(0.6212149731583951, 0.10361093203636307)"]
node47->node95
node47->node96
node95 [style=filled, fillcolor=green, label="(0.6462670807106595, 0.01982591661701827)"]
null51 [shape=point]
node95->null51
null52 [shape=point]
node95->null52
node96 [style=filled, fillcolor=green, label="(0.675086915139233, 0.2230140100888286)"]
null53 [shape=point]
node96->null53
null54 [shape=point]
node96->null54
node48 [style=filled, fillcolor=green, label="(0.7245288531231282, 0.3280290062533139)"]
node48->node97
null55 [shape=point]
node48->null55
node97 [style=filled, fillcolor=green, label="(0.7742697486039214, 0.10759434997337947)"]
null56 [shape=point]
node97->null56
null57 [shape=point]
node97->null57
node24 [style=filled, fillcolor=green, label="(0.6831466571746073, 0.4711173050459888)"]
node24->node49
node24->node50
node49 [style=filled, fillcolor=green, label="(0.6076866262564321, 0.467821717594869)"]
node49->node99
null58 [shape=point]
node49->null58
node99 [style=filled, fillcolor=green, label="(0.669906245785035, 0.3833058643783308)"]
null59 [shape=point]
node99->null59
null60 [shape=point]
node99->null60
node50 [style=filled, fillcolor=green, label="(0.6872466861551974, 0.4604375176019253)"]
node50->node101
null61 [shape=point]
node50->null61
node101 [style=filled, fillcolor=green, label="(0.6906917676408141, 0.3802783006709951)"]
null62 [shape=point]
node101->null62
null63 [shape=point]
node101->null63
node12 [style=filled, fillcolor=green, label="(0.9831358714210048, 0.3726307488490974)"]
node12->node25
node12->node26
node25 [style=filled, fillcolor=green, label="(0.9006014296950229, 0.011809874994408998)"]
node25->node51
node25->node52
node51 [style=filled, fillcolor=green, label="(0.8662220981238089, 0.3463308932863225)"]
node51->node103
null64 [shape=point]
node51->null64
node103 [style=filled, fillcolor=green, label="(0.8687412657741851, 0.3302757531333633)"]
null65 [shape=point]
node103->null65
null66 [shape=point]
node103->null66
node52 [style=filled, fillcolor=green, label="(0.9019382230814261, 0.2965210998494765)"]
node52->node105
null67 [shape=point]
node52->null67
node105 [style=filled, fillcolor=green, label="(0.9688821675704143, 0.07984367576490081)"]
null68 [shape=point]
node105->null68
null69 [shape=point]
node105->null69
node26 [style=filled, fillcolor=green, label="(0.8893947372620788, 0.38158285823127647)"]
node26->node53
node26->node54
node53 [style=filled, fillcolor=green, label="(0.8200608199347834, 0.455011551967783)"]
node53->node107
null70 [shape=point]
node53->null70
node107 [style=filled, fillcolor=green, label="(0.8596417610013654, 0.385642677450048)"]
null71 [shape=point]
node107->null71
null72 [shape=point]
node107->null72
node54 [style=filled, fillcolor=green, label="(0.9114060446305023, 0.5028522028982868)"]
node54->node109
null73 [shape=point]
node54->null73
node109 [style=filled, fillcolor=green, label="(0.9618828503070099, 0.4864373556824546)"]
null74 [shape=point]
node109->null74
null75 [shape=point]
node109->null75
node6 [style=filled, fillcolor=green, label="(0.8269637479040602, 0.7228393345491433)"]
node6->node13
node6->node14
node13 [style=filled, fillcolor=green, label="(0.6547791904163812, 0.7380109342836942)"]
node13->node27
node13->node28
node27 [style=filled, fillcolor=green, label="(0.7695036112395442, 0.7269369068263654)"]
node27->node55
node27->node56
node55 [style=filled, fillcolor=green, label="(0.6485956219503952, 0.6216787113873359)"]
node55->node111
node55->node112
node111 [style=filled, fillcolor=green, label="(0.7190962751611406, 0.6156385878385687)"]
null76 [shape=point]
node111->null76
null77 [shape=point]
node111->null77
node112 [style=filled, fillcolor=green, label="(0.681300953153181, 0.6848290501520709)"]
null78 [shape=point]
node112->null78
null79 [shape=point]
node112->null79
node56 [style=filled, fillcolor=green, label="(0.7898032387575937, 0.7060467896416124)"]
node56->node113
null80 [shape=point]
node56->null80
node113 [style=filled, fillcolor=green, label="(0.8206824411145484, 0.6322892264815282)"]
null81 [shape=point]
node113->null81
null82 [shape=point]
node113->null82
node28 [style=filled, fillcolor=green, label="(0.7490715090840355, 0.8791501049246714)"]
node28->node57
node28->node58
node57 [style=filled, fillcolor=green, label="(0.6399934387432874, 0.9652040414132792)"]
node57->node115
null83 [shape=point]
node57->null83
node115 [style=filled, fillcolor=green, label="(0.6330181291233904, 0.8365273697462978)"]
null84 [shape=point]
node115->null84
null85 [shape=point]
node115->null85
node58 [style=filled, fillcolor=green, label="(0.7585663335338151, 0.9311942871123262)"]
node58->node117
null86 [shape=point]
node58->null86
node117 [style=filled, fillcolor=green, label="(0.7925893515449551, 0.8232779217454348)"]
null87 [shape=point]
node117->null87
null88 [shape=point]
node117->null88
node14 [style=filled, fillcolor=green, label="(0.9460311102484847, 0.6959219994423657)"]
node14->node29
node14->node30
node29 [style=filled, fillcolor=green, label="(0.9154402333409823, 0.6892411457632873)"]
node29->node59
node29->node60
node59 [style=filled, fillcolor=green, label="(0.8430063218491559, 0.5878517083041592)"]
node59->node119
null89 [shape=point]
node59->null89
node119 [style=filled, fillcolor=green, label="(0.9097060344937931, 0.5676959351170044)"]
null90 [shape=point]
node119->null90
null91 [shape=point]
node119->null91
node60 [style=filled, fillcolor=green, label="(0.9851304391595073, 0.6008566587077387)"]
node60->node121
null92 [shape=point]
node60->null92
node121 [style=filled, fillcolor=green, label="(0.9447128734270486, 0.5039789123408972)"]
null93 [shape=point]
node121->null93
null94 [shape=point]
node121->null94
node30 [style=filled, fillcolor=green, label="(0.8462442550095075, 0.9371457926009722)"]
node30->node61
node30->node62
node61 [style=filled, fillcolor=green, label="(0.8412339125829232, 0.8730173079177155)"]
node61->node123
null95 [shape=point]
node61->null95
node123 [style=filled, fillcolor=green, label="(0.8290552041576117, 0.8706195401044241)"]
null96 [shape=point]
node123->null96
null97 [shape=point]
node123->null97
node62 [style=filled, fillcolor=green, label="(0.9899348040065478, 0.8782854569995219)"]
node62->node125
null98 [shape=point]
node62->null98
node125 [style=filled, fillcolor=green, label="(0.9076351946530363, 0.8096630245756847)"]
null99 [shape=point]
node125->null99
null100 [shape=point]
node125->null100
}
nikeee commented 3 years ago

Just released a new version. Please check if the issue persists. :)

ghost commented 3 years ago

@nikeee Awesome!!! 🍻

IfZen commented 3 years ago

Cool :) Thanks for your time