improved dashed lines #938

ansis · 2015-01-16T19:50:21Z

A new attempt improving dashed lines. Replaces #649

no sliding

Dashes no longer slid along the lines as you zoom. Instead they stretch and then reset at every zoom.

scaled by width

Dashes size units are now scaled up by the line width. This should make it easier to use dashes that look right at every zoom without creating functions for them. So this is what "line-dasharray": [1, 1] looks like at line widths 2, 8, 16:

If you still need functions, you can use them. They look like this:

"line-dash-array": {
    "stops": [ [0, [1.2, 0.8]], [15, [1.7, 0.3]]]
}

longer patterns

Previously dash arrays could only have on dash length value and one gap length. Dash patterns can now be any length. "line-dasharray": [5, 1, 1, 1, 1, 1, 1, 1]:

round dashes

The ends of the dashes now obey the line-cap layout property, so you can have rounded dashes:

Style spec changes: mapbox/mapbox-gl-style-spec#234
Native port: mapbox/mapbox-gl-native#761
Updated tests: mapbox/mapbox-gl-test-suite#12
Style migration: cutting-room-floor/mapbox-gl-style-lint#37
Styles: mapbox/mapbox-gl-styles#24

TODO

update render tests
style migration scripts, migrate styles. This is going to be tricky for dashes that used to be functions.

Instead of spinning, dashes stretch before reseting at every round zoom. Dash and space length units are now in terms of the line width, not pixels. Dasharrays can be any length, not just 2. Lines with "line-cap": "round" will have round dashes.

This might get re-added if we change how line patterns are implemented.

nickidlugash · 2015-01-16T21:48:43Z

@ansis Did we decide to scale dashes by line-gap-width? – I think it makes more sense for dashes to always be scaled by line-width (#860 (comment)).

ansis · 2015-01-16T21:56:32Z

@ansis Did we decide to scale dashes by line-gap-width? – I think it makes more sense for dashes to always be scaled by line-width (#860 (comment)).

It's implemented, but can easily be reverted. I don't have enough experience to have an opinion about this. @jfirebaugh are you fine with reverting a5fb9f9, or do you still think scaling by gap-width is better?

This reverts commit 98c365f.

ljbade · 2015-01-17T12:11:16Z

Love the improvements, particularly the more flexible dash pattern.

ansis · 2015-01-21T00:14:12Z

Updated tests: mapbox/mapbox-gl-test-suite#12
Style migration: cutting-room-floor/mapbox-gl-style-lint#37
Styles: mapbox/mapbox-gl-styles#24

remaining:

choose whether dash size should be scaled by line-gap-width
review (if anyone wants to)

jfirebaugh · 2015-01-21T00:23:26Z

If we always scale by line-width, is it still possible to manually scale the values to get exactly aligned casing and fill dashes? I'm worried that float rounding or something will screw that up.

nickidlugash · 2015-01-21T00:23:50Z

choose whether dash size should be scaled by line-gap-width

My vote is to revert this.

Can't wait to try out the new dashes!

ansis · 2015-01-21T00:47:47Z

If we always scale by line-width, is it still possible to manually scale the values to get exactly aligned casing and fill dashes? I'm worried that float rounding or something will screw that up.

Yeah, it seems to work fine.

Outer: "line-dasharray": [2.5, 1.5, 2.5], "line-width": 2
Inner: "line-dasharray": [4.5, 4, 4.5], "line-width": 1

My vote is to revert this.

Reverted.

Introduce a StyleLayer class for the in-memory representation of a style layer. It handles constant resolution, paint property cascading, and paint property calculation. The paint functions now accept a layer as one of the parameters and read all layer properties from it. This simplifies the rendering flow quite a bit. The concept of a "bucket" is now something that only the workers need to know about. The main thread does not create buckets, it merely stores the buffers and elementGroups on the tile when they are received from the worker.

_cascade ⇢ _resolve (called automatically) _cascadeClasses ⇢ _cascade (called when classes change) recalculate ⇢ _recalculate (it's internal-only)

This is a blend of #901 and #939. The format for featuresAt results changed again. Instead of result-per-geometry-cross-layer, each result has a `layers` array with all layers that contain the feature. Thus avoiding duplication of geometry and properties in the result set.

This can happen if the referent layer is skipped due to min/maxzoom.

mapbox/mapbox-gl-style-spec#232

Conflicts: js/render/draw_line.js js/style/style.js package.json

jfirebaugh · 2015-01-22T01:53:02Z

@ansis I merged master here but rendering tests are currently failing. Can you take a look?

jfirebaugh · 2015-01-22T01:53:56Z

This will need to be merged to master manually (it's targeting mb-pages, which is no longer correct).

ansis · 2015-01-22T02:40:13Z

@jfirebaugh all render tests are passing for me. Which ones are failing for you? up to date test-suite?

jfirebaugh · 2015-01-22T02:44:51Z

I'm seeing the same error as the Travis build:

# geojson default
/home/travis/build/mapbox/mapbox-gl-js/node_modules/tape/index.js:75
        throw err
              ^
TypeError: Cannot call method 'join' of undefined
    at LineAtlas.getDash (/home/travis/build/mapbox/mapbox-gl-js/js/render/line_atlas.js:21:25)
    at Object.drawLine [as line] (/home/travis/build/mapbox/mapbox-gl-js/js/render/draw_line.js:57:37)
    at GLPainter.drawLayers (/home/travis/build/mapbox/mapbox-gl-js/js/render/painter.js:255:25)
    at GLPainter.drawTile (/home/travis/build/mapbox/mapbox-gl-js/js/render/painter.js:241:10)
    at Object.exports._renderTiles [as render] (/home/travis/build/mapbox/mapbox-gl-js/js/source/source.js:58:17)
    at GLPainter.render (/home/travis/build/mapbox/mapbox-gl-js/js/render/painter.js:231:20)
    at util.extend.render (/home/travis/build/mapbox/mapbox-gl-js/js/ui/map.js:329:22)
    at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)

ansis · 2015-01-22T03:07:13Z

my spec was not up to date. Test fixed in 34fc5b4

jfirebaugh · 2015-01-22T18:45:43Z

Merged!

ansis added 6 commits January 13, 2015 17:16

remove old dash support from line shader

57f966b

don't use separate lineatlas for sdf line patterns

f5388f7

remove unused varying from line shader

d904660

remove unused support for images in lineatlas

790e279

This might get re-added if we change how line patterns are implemented.

support for dasharray functions

7833748

This was referenced Jan 16, 2015

improved dashed lines mapbox/mapbox-gl-native#761

Merged

remove dash default, allow any pattern length mapbox/mapbox-gl-style-spec#234

Closed

new dashed and patterned lines #649

Closed

seamlessly join odd-length dasharrays

8314099

jfirebaugh and others added 2 commits January 16, 2015 13:57

Revert "Revert API and examples updates for unreleased changes"

bf315b0

This reverts commit 98c365f.

Document Map 'classes' option

61dbee4

Merge mapbox/featuresAt-refs-redux

9c9e1a3

ansis force-pushed the dash-3 branch from a5fb9f9 to 8314099 Compare January 21, 2015 00:44

jfirebaugh added 6 commits January 20, 2015 17:41

Don't mutate layout in the bowels of the worker

b0cd028

Remove unused

05bdb7b

Rationalize style methods

90c0f09

_cascade ⇢ _resolve (called automatically) _cascadeClasses ⇢ _cascade (called when classes change) recalculate ⇢ _recalculate (it's internal-only)

Handle ref layer preceding referent

081a26a

ansis mentioned this pull request Jan 21, 2015

functions without interpolation mapbox/mapbox-gl-style-spec#237

Closed

jfirebaugh added 2 commits January 21, 2015 13:40

Update CHANGELOG

28e0608

Revert to ES5 syntax

da89f70

Fix cov task

d4c0d2b

jfirebaugh mentioned this pull request Jan 21, 2015

v7 mapbox/mapbox-gl-style-spec#238

Merged

jfirebaugh added 4 commits January 21, 2015 17:31

Skip indexing ref layers without a bucket

8ab5548

This can happen if the referent layer is skipped due to min/maxzoom.

Update to style-spec v7

3df8c11

Remove support for prerendered layers

548322c

mapbox/mapbox-gl-style-spec#232

Merge branch 'master' into dash-3

a9fbeb8

Conflicts: js/render/draw_line.js js/style/style.js package.json

update reference to v7

34fc5b4

ansis mentioned this pull request Jan 22, 2015

round linejoins for dashed lines #127

Closed

jfirebaugh closed this Jan 22, 2015

jfirebaugh deleted the dash-3 branch January 22, 2015 18:45

ansis mentioned this pull request Jan 23, 2015

Behavior of line-cap + line-dasharray #884

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

improved dashed lines #938

improved dashed lines #938

ansis commented Jan 16, 2015

nickidlugash commented Jan 16, 2015

ansis commented Jan 16, 2015

ljbade commented Jan 17, 2015

ansis commented Jan 21, 2015

jfirebaugh commented Jan 21, 2015

nickidlugash commented Jan 21, 2015

ansis commented Jan 21, 2015

jfirebaugh commented Jan 22, 2015

jfirebaugh commented Jan 22, 2015

ansis commented Jan 22, 2015

jfirebaugh commented Jan 22, 2015

ansis commented Jan 22, 2015

jfirebaugh commented Jan 22, 2015

improved dashed lines #938

improved dashed lines #938

Conversation

ansis commented Jan 16, 2015

no sliding

scaled by width

longer patterns

round dashes

nickidlugash commented Jan 16, 2015

ansis commented Jan 16, 2015

ljbade commented Jan 17, 2015

ansis commented Jan 21, 2015

jfirebaugh commented Jan 21, 2015

nickidlugash commented Jan 21, 2015

ansis commented Jan 21, 2015

jfirebaugh commented Jan 22, 2015

jfirebaugh commented Jan 22, 2015

ansis commented Jan 22, 2015

jfirebaugh commented Jan 22, 2015

ansis commented Jan 22, 2015

jfirebaugh commented Jan 22, 2015