From bf8484c29c7ccb7d41924644fea9c58f2ff65f18 Mon Sep 17 00:00:00 2001 From: karsta26 Date: Tue, 29 Aug 2023 21:12:41 +0200 Subject: [PATCH] Added new numSegments prop in ArcLayer (#8055) --- CONTRIBUTING.md | 2 +- docs/api-reference/layers/arc-layer.md | 6 +++++ .../test-utils/snapshot-test-runner.md | 2 +- modules/layers/src/arc-layer/arc-layer.ts | 18 +++++++++---- .../great-circle-modified-segments.png | Bin 0 -> 7417 bytes test/render/test-cases/arc-layer.js | 25 ++++++++++++++++++ 6 files changed, 46 insertions(+), 7 deletions(-) create mode 100644 test/render/golden-images/great-circle-modified-segments.png diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c8a82228ff2..ae8f60ea50b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -78,7 +78,7 @@ deck.gl development is governed by the vis.gl Technical Steering Committee (TSC) Maintainers of deck.gl have commit access to this GitHub repository, and take part in the decision making process. -If you are interested in becoming a maintainer, read the [governance guidelines](https://github.com/visgl/tsc/tree/master/developer-process/governance.md). +If you are interested in becoming a maintainer, read the [governance guidelines](https://github.com/visgl/tsc/blob/master/governance.md). The vis.gl TSC meets monthly and publishes meeting notes via a [mailing list](https://lists.uc.foundation/g/visgl). This mailing list can also be utilized to reach out to the TSC. diff --git a/docs/api-reference/layers/arc-layer.md b/docs/api-reference/layers/arc-layer.md index 001cfa8be56..1938df2a45e 100644 --- a/docs/api-reference/layers/arc-layer.md +++ b/docs/api-reference/layers/arc-layer.md @@ -85,6 +85,12 @@ Inherits from all [Base Layer](../core/layer.md) properties. If `true`, create the arc along the shortest path on the earth surface. This option is only effective with data in the `LNGLAT` coordinate system. +##### `numSegments` (Number, optional) {#numSegments} + +* Default: `50` + +The number of segments used to draw each arc. This prop can be used to make arcs smooth when using `greatCircle` with long paths. + ##### `widthUnits` (String, optional) {#widthunits} * Default: `'pixels'` diff --git a/docs/api-reference/test-utils/snapshot-test-runner.md b/docs/api-reference/test-utils/snapshot-test-runner.md index bd4a2455599..0f93d3c112f 100644 --- a/docs/api-reference/test-utils/snapshot-test-runner.md +++ b/docs/api-reference/test-utils/snapshot-test-runner.md @@ -124,7 +124,7 @@ Whether the test is being run in headless mode. In headless mode, Chromium uses ## Image Diff Options -The test renderer and each test case may choose to override the default image diffing options. The following options from [captureAndDiffScreen](https://uber-web.github.io/probe.gl/docs/api-reference/test-utils/browser-test-driver#browsertestdriver_captureanddiffscreenoptions--object) are supported: +The test renderer and each test case may choose to override the default image diffing options. The following options from [captureAndDiffScreen](https://github.com/uber-web/probe.gl/blob/master/docs/modules/test-utils/browser-test-driver.md#browsertestdriver_captureanddiffscreenoptions--object) are supported: * `tolerance` * `threshold` diff --git a/modules/layers/src/arc-layer/arc-layer.ts b/modules/layers/src/arc-layer/arc-layer.ts index 454cfa1a326..7a8cfe5d9b8 100644 --- a/modules/layers/src/arc-layer/arc-layer.ts +++ b/modules/layers/src/arc-layer/arc-layer.ts @@ -52,6 +52,7 @@ const defaultProps: DefaultProps = { getTilt: {type: 'accessor', value: 0}, greatCircle: false, + numSegments: {type: 'number', value: 50, min: 1}, widthUnits: 'pixels', widthScale: {type: 'number', value: 1, min: 0}, @@ -71,6 +72,12 @@ type _ArcLayerProps = { */ greatCircle?: boolean; + /** + * The number of segments used to draw each arc. + * @default 50 + */ + numSegments?: number; + /** * The units of the line width, one of `'meters'`, `'common'`, and `'pixels'` * @default 'pixels' @@ -224,8 +231,9 @@ export default class ArcLayer extends updateState(opts: UpdateParameters): void { super.updateState(opts); + const {props, oldProps, changeFlags} = opts; // Re-generate model if geometry changed - if (opts.changeFlags.extensionsChanged) { + if (opts.changeFlags.extensionsChanged || props.numSegments !== oldProps.numSegments) { this.state.model?.destroy(); this.state.model = this._getModel(); this.getAttributeManager()!.invalidateAll(); @@ -250,8 +258,8 @@ export default class ArcLayer extends } protected _getModel(): Model { + const {id, numSegments} = this.props; let positions: number[] = []; - const NUM_SEGMENTS = 50; /* * (0, -1)-------------_(1, -1) * | _,-" | @@ -259,13 +267,13 @@ export default class ArcLayer extends * | _,-" | * (0, 1)"-------------(1, 1) */ - for (let i = 0; i < NUM_SEGMENTS; i++) { + for (let i = 0; i < numSegments; i++) { positions = positions.concat([i, 1, 0, i, -1, 0]); } const model = new Model(this.context.device, { ...this.getShaders(), - id: this.props.id, + id, geometry: new Geometry({ drawMode: GL.TRIANGLE_STRIP, attributes: { @@ -275,7 +283,7 @@ export default class ArcLayer extends isInstanced: true }); - model.setUniforms({numSegments: NUM_SEGMENTS}); + model.setUniforms({numSegments}); return model; } diff --git a/test/render/golden-images/great-circle-modified-segments.png b/test/render/golden-images/great-circle-modified-segments.png new file mode 100644 index 0000000000000000000000000000000000000000..d617fb11f5efce027cf20aed87d641559ba04c61 GIT binary patch literal 7417 zcmeHM`9G9x)W2ttWeUS%%`)*QsVHk9Gc-mKvMaJLSsqK-mzhanlqH2^k9shap|U1K z_9bP{8X@~KjAe}X>iG}e-`*eI`DH$zIotPq&$;e%?rUOh80Z}15axg&=-9QZSYrrc zLO~GhGusjHi-6;sR`3P8XRMe80$0qnI1&qH z$hcdbDS|`9VBe!hEM5gF7hZ9LU3wFPfwM~pYdT3tB4f;7sacr5<}tdqSdhb$tZVw3 zqaY{M!R|@`4kbhp&1h26^Wo(^t7-BohyV1|vCu4r@9eM6j}hu2uNU%vsrN)bxo4v*!jYLA6k0H3v zF)zl(k5K>HGd|IOzUql)jcNhH;f3+`S$dZJ8c zo|hD0V;fuJ&%^7Lcrno1&xM=btIx?^N>6%fJRzYJk;piiBSnJgp_>o#h{i3Ici)Bb z!Cq~xnr>%RPS;TrX0E}%-h{K&J7=gKZqG{8#3oqY_U&n=V1**%LZs}cb+5y(4IEet z7t3BYJCo*Ue{gDLr^I7-m9;(uiGesNg6jXa-{*S}%i~-^CO7b+_tlOEYvMN_c&}&= zd|zm7buiigOkmPvCU)>(pp=XLjO7F82FGG-_s0h*q*@XQ{o^1ZQ}wCee-^iCxlVHJ zVg57qj#d$D5Gydbl{VSyb+!)sIJzCAL%K1&Ce`HmssljSQQlfe4>|+$X9u8wh zoosoNHtAb+AbN80>iXQU9Bl|zK2o?@_bs9Ior0$0O{lF* z09m@+;5gpJ^{G?&$Kvvg**KUU$!StdCHZhCkNtFEYHQna5AAxkQ)txLMXi*C&G#75J z&TIG0$@N=mNCa8u52NG-G)@v?h6>3F0yb}j;S_ylZo4xXd*4c^_Y}t#CPl@ZSKAa0 zHPTVVu%KJKI>%M4nQ798p)eo9x&zA!quwk zF-&>1plVP*<#ENZ*siE2PXRmGha|+1Qo!EJn$UfrIe|I_A^!99?d3h7i2<4;4m%`4 z+xIEPQHG3B9qadAPv-CkE9MXO=+J%n(bK(y0&vPO*$fRMdiXEstqPuvN+6MVq}sFA zN`pUz@8^d|IeHIM%Xq4+bh6L~U&k1AaL@C6+;-C$s)2@bj&V;#8hS9ktagM!LWI#i<^8Iifc{gmL9C z=n1Q*p@0^o{P?7w-Lih8P7^)++0zSWKdkloPlW6e7L!R+KLh0#h6YnPDVnAj;s@H& zy*kxac>+x>&*^C0y}9VyL0*Z&x>t*Y%_YdAM(nU52w)k=3SY5EM|4Ma&0e5)XCB(@ z3~A}JwViy}Su6XHo47T{#!o2+I$4@HH(ABGTWDR=w62Q2nTrEYt?u|&RXU}sLW@`k zHUPQ_7g*I|k(S48?Cd|=rnVL4`OdqR{=N3;a@LdBb;Qgr*VwNQFiJB>b9vNnC5r*7 zs&oRoW9KQX<$%M!tu<(pV-=Qr^sv~r*4B6V;#GPO%u+!HRe$TE|4P<4 z9`_w%J>qR}I?U&0zIb)fb7%VAi*uwTX_*s{2bP7|67g&eiA-E(vUE1wnY=6ek*@H- z*uh&P42v~k-)+8)Q)Vh=hcR1LxrVRbeh?Yqc~7*8CJ@LdR~xiWL{x!JfPW+YtZP8(mZp<*n9m3PE3NM(?(QWHhF*ph!!D!h+d&4li>__& z^gb!kSL8H}ig?t0r-j5BPR+Htf zk`?gU?^LWW=kU0>QLM{W@6L{@*IgRinwOwpXWk3em;`jI2hVxCsm@g=lWK=m3C{w! z3aVi~*O|E|hq|`IW1V82{z;Z%4WjHxIreeMTe+LCz$`@pwo+C9mGN=LMhv!b_0!(O z@BPWInfRG4z0f$_+40C98fQq5hyow?q~-EpFy3p#42xYdO-5+OH-&u<-dyM)$#iEi znmrlF)V!b^P6}Fn1}$3`6B-*G-0)1ruErk{_r4Gh!4Uhr2c{rGveaiQ{t5s{`Q0I$NeweqxVFe8zlS9z-(D3 zr2$=u?(sHVaijkP5RPVt#C_t5A1r7uRY9ky=z{(P@WC>HB0@UF8MXl?5R7xob1P3&t9{(0WLLkRYe1*jX8)Osk$n?_ag~pGvVaX$|FWaFN6t%Kt})+c z)7!eQ)clVRywg&0tIMTXX*t(|2uOqvFlTz|a6dFH&q641Si|0yUA*`;q5}W6Zt49b zf-x^1)CCuT0WHN-;z5RTr{?BPRXmlHh>Eu%&dRGTIN~$xS_R#d2#+M>KlN3_~CT{>e|MWuqb%W9*l04yW#DJCA z7rSAjvu51HMoA(xSR#wiW7Tt4cimLq&h6pSO{v{2aV<2{gg9d$xb^dATpug?_j@@` zBrmY0{{|30ZH@es!ka=0YRINX3@X;2;KmRap9;|SH-VeK`ni;EwT&KUO)$55Cd2lh z&?8`jLEA1%8e9L?5aZsG>7YC^Ew}4X$ES`n2E20v-jzBEbOao`l5ZKLa56mlxvK5@ z5Z}CXRgj3u5P)CFjV!(yiq=iKwe`R&h^}qB)MMEA=qm#5QwvI-=7dGhb{8bYPMMUL z9OUTDo^(i#Jr7K)foC(d;6rfStJG>QjWQ?lB&#+0>6);_7_Ft6U$I#`MVRmqofHNk z%sj~A-wh=sb@}_bRAmIVBd`~Mhg*LnAb4qw4_#*IASYdn(7W1GTb|w*{upGZ1cq)= zSsk|`E);Ewo-d27^<9$&&sVJZNe7rU0>)hFaB7ucD_6GU(%pT;_#kKTk3FrW!SU8k zN98X9J!4R#-i!xBJX4;%|GifHro=mJRGWoov~l~>T2!x9?|0acC1?_DgYm;pHcj;L z1XAY3DbDj&x$(QTD526Ka47r%1CN$mYbi9)VurOVwq!hoPb_pwoZ8`}7SeQw{$nAF zyFThqkY}ZpG|9(n4gA6^2}b-qxk93o?nxboJa#`aKOTnH9;o*8h@ej+CqfVEHpD&; z1W!%7^0$jg-CHdc;1u}+uY`js;JiF|;UA6c(e1dY_AKt=8*RHT)c2{}lQMv7sj;BL z{Sf4(!7v+#eDdhB^O?)rpV9LPMfaawwUO}Jb?ND0uIB^oqE{n$;4l~Ws?ZLVP%W@*gGl$i=zet- zp5|X@W@wZ|`}oqF5b^_f2@nEgvG3pOn$zCAbT(Bn*8|5|2?yiZ)Z{>LnUN}_>b`ji zi&fwL{(#{mezoXEP>0H4RyLBT2S72sSIK_9u0K9SBb2W0@WuWbb)n8q3G&xVfqxj znSlBbd88iIl>6|J3s@Ci=Cy6c+r!>pyaiKiDapN_V4FM(Uyxg699u>DB-_xN&gihe z;=`6*jAA*T3x}U==aCYvi|}|l{raH^gTj)!k;T@8H$8Z9%)LuzW#F??fy5Ey_ZZ99 zPEO9JPt>PEaI2MOLwt^aP|XYEi(cV|P=|iQW6Iz1dJYzHVq4bAIWK&o62@iwm>xoK zY*Qz-=p^ZA-C-2LWfx_g$5X0u(5ZNqs0?E+AH{cjqvc9X&Wb-=R5`9*W~s}@4VIIe z0g|r!XyW4LykU4P`rKKA^4u1^L%MSUZM=^pfGyhS)IKo zd0n&-UY-eZT8J_Xqo`zt^{dNEiqu6kn&J?b-)$AJaN8BJqbMI{^KG@U{6Bi8ZuCER zq49(VnF!jipP75eC9l1O8b$(ME6EM?zl)_yYZhEtD7tVq&zHUHMZdM5Tz2#MTkJrM zi))rpsp~}V%&s#XVl7VrG2KV~#zT%0*8a5}JcLD`yXWn~W6n<4gIg^(k+UHRd^mQZ ztM`=A(W%HhW3x@AC$XKmT+BnaRvPO0+qc(?*8eI#j~9slEUvNN%UJrWm?T~JM+_pr zIIgk&a=h%u@0-0e0%3)RqXR{ z8h_V({QwdWKf1Qgr6i!1$MW!nRIY5J_{ZO4d+5o6d&1Va!7^GAN1?e?|5xw)YU$;#S7>w?o)pXNpE|4{yRO!J<*F z-Mm6=F1lt(;ow4VmVUueNkPLjgQ5t?>I!uKoKIuR>SC92_H$C~6xaBM?6G;DPTl5C z&>2ETKLC2J%P0zqtW9yq^p9g-R$!J@*A7Z&mL_23L=HC3=<%H>k9g%ASAVTT)?%&x z5mtF;aW;w)D9w@AOR|bDZLNRtMl5fwDads$F~wN2NkW+?iI|ql(~jaR`g$e z8awK%eb3I2j#UlIzxwlgXuD%hNAvaPkwy|;hqgUNnarw&(EYa^@|)nD+6*m)%1!c& zn>K^N%A>U(ezm`;Lm2VVsIK&7MhrAl^L?qCH($riW9ABpnCJb-7kMp}?6orSLG{8r zdlQUzj8|}ZQG<#HJ!{Y+hce-Ox0 z5l{hnWSSxqr!Rao5$?Tja4(NV)gyrJrRvVz{-Py>Kl{lPym~tDlc3<`iH-p#QbX@`1GeiC1LBoJLhLSu^zLYJp!N z{6D{$ih&3vy{0e8mxU&IKJBSw3wO%?-N^7!^0I=(mMMHc7qr<9qS2 zgJQ}!**%QSV?~-D!wO&xCdt1bDqW89*J4sFE+s#T)Od0haN)&+$?+K3M|W;Mj9W|2 zrZenDnB-TOdP$sq&j1T1hRQk5+ju^U*KX(qUXVZ`yT_Ib&%_8ut#n*~a_Ok)y6 zjB7@!Sk1Qzj`YGNyAW}EQx-STx6Jc!6H1Px?7*;hTDL+P$5m|1&mBI`q!2IvJ2+E- zrJ{g{vFHOcdRgpAH5nXclt2e$| zC|MJN4Hke)Q76{cJ0jlveB3!|pdb-#-DSgK+;*Es8O;etmKh1NDG}E!F@b7dZVRW~vUa|%3vr?R#iSou%dC0B#O=$ktX$^3)E;zR-J zF%;O2cVc@&SW!wMbiaFaEb|Ga)?$fxVgL(g#8htOCK z9G)&KDX+IFxJ58E0)w}K%)4bbx_{v<(J9&0;@~61`2d0+FWGYRg!B7-&auvj{~33O zu_DO-6$xfkb?n&idW{sGzF1-eyRWaJ!cv6A$r;|kvMOf*v!y21o~@C*KuKL}8j|w{Bq$^7#uC`Hoqq!E7g+WDty~bdp$qq~mN2@`6l+6E;b@^j&*CGvsp( zAbSsX0du~YpJ;R*91azqGojdB$=s>mwNVHOq$l%8U9X2j1L|LJWcTJp1k3UHrhV}x?W8;Z+Qo^x!TBM|wkgKW#JPxWBr$3TLCW_5 zJM#{r2ivpxTe-{Ail_`lD9-@qYjpWM}MJxl-p{xZC#ZGe5NWf$>3;A~j} literal 0 HcmV?d00001 diff --git a/test/render/test-cases/arc-layer.js b/test/render/test-cases/arc-layer.js index e8a92d26e94..847b5bf48c5 100644 --- a/test/render/test-cases/arc-layer.js +++ b/test/render/test-cases/arc-layer.js @@ -209,5 +209,30 @@ export default [ }) ], goldenImage: './test/render/golden-images/great-circle.png' + }, + { + name: 'great-circle-modified-segments', + viewState: { + latitude: 0, + longitude: 0, + zoom: 0, + pitch: 0, + bearing: 0 + }, + layers: [ + new ArcLayer({ + id: 'great-circle-modified-segments', + data: [{source: [64, 17], target: [-112, 7]}], + getWidth: 5, + getHeight: 0, + greatCircle: true, + numSegments: 150, + getSourcePosition: d => d.source, + getTargetPosition: d => d.target, + getSourceColor: [64, 255, 0], + getTargetColor: [0, 128, 200] + }) + ], + goldenImage: './test/render/golden-images/great-circle-modified-segments.png' } ];