Style diff #324
Style diff #324
Conversation
Fast, semantically aware style diff utility. The differ compares two
stylesheets creating a list of changes. Operations produced by the diff
resemble the mapbox-gl-js API in spirit. Any error creating the diff will
fall back to the 'setStyle' operation.
Operations:
- setStyle
- addLayer
- removeLayer
- setPaintProperty
- setLayoutProperty
- setFilter
- setLayerZoomRange
- setLayerProperty
- addSource
- removeSource
- setConstant
- setSprite
- setGlyphs
- setTransition
Example diff:
[
{ command: 'setConstant', args: ['@water', '#0000FF'] },
{ command: 'setPaintProperty', args: ['background', 'background-color', 'black'] }
]
Applying the diff is an exercise left to each mapbox-gl implementation. A
crude mapbox-gl-js implementation would look like:
var changes = diff(oldStylesheet, newStylesheet);
try {
map.batch(function (batch) {
changes.forEach(function (change) {
batch[change.command].apply(batch, change.args);
});
});
} catch (e) {
console.warn('Unable to apply diff:', e);
map.setStyle(newStylesheet);
}
|
Makes sense to me to have this code live here if we need to reuse it (are we at that point now?). It should live within |
|
I started with the code in For example: vs: |
|
My hunch is we will want to take an approach more like that of validation, where version differences are captured in inline branches, rather than having a completely separate implementation for each version. |
|
That would simplify the layout a good bit. The downside is that we'd only ever be able to diff stylesheet of the latest version. If we're ok with that, I'll make the change. |
|
The idea and the implementation look solid. I have a nagging fear that, in the long run, making GL style changes more efficient using diffs will be more painful than doing so using smart caching of the underlying resources. |
|
Incremental updates to a live style is just one use case. Another would be comparing the cumulative changes before publishing a new style. Another could be differential sync of styles across multiple collaborators. I'm sure there are other use cases I haven't thought of yet. Minimizing the number of changes should always be more efficient, but I'll shed 😂 when setStyle is fast. |
Proposal for what style diffing could look like within mapbox-gl-style-spec. This code has worked well with mapbox-gl-js. Particularly interested in thoughts from @jfirebaugh @incanus and @lucaswoj