From 2a9a1bca5be6ac738300c0ec6691a9911da02fb2 Mon Sep 17 00:00:00 2001 From: Xaver Maierhofer Date: Wed, 28 Dec 2016 04:21:55 +0100 Subject: [PATCH] [TASK] Update to leaflet v1 --- lib/map.js | 20 +- lib/map/clientlayer.js | 2 +- lib/map/labelslayer.js | 4 +- package.json | 3 +- scss/modules/_leaflet.scss | 414 ++++++++++++++++++++++++++----------- scss/modules/_sidebar.scss | 4 +- scss/night.scss | 7 + yarn.lock | 10 +- 8 files changed, 319 insertions(+), 145 deletions(-) diff --git a/lib/map.js b/lib/map.js index 0b3c8ac..56f2803 100644 --- a/lib/map.js +++ b/lib/map.js @@ -1,6 +1,4 @@ -define(['map/clientlayer', 'map/labelslayer', - 'leaflet', 'moment', 'locationmarker', 'rbush', 'helper', - 'leaflet.label'], +define(['map/clientlayer', 'map/labelslayer', 'leaflet', 'moment', 'locationmarker', 'rbush', 'helper'], function (ClientLayer, LabelsLayer, L, moment, LocationMarker, rbush, helper) { 'use strict'; @@ -78,7 +76,7 @@ define(['map/clientlayer', 'map/labelslayer', }; m.on('click', router.node(d)); - m.bindLabel(d.nodeinfo.hostname); + m.bindTooltip(d.nodeinfo.hostname); dict[d.nodeinfo.node_id] = m; @@ -105,7 +103,7 @@ define(['map/clientlayer', 'map/labelslayer', line.setStyle(opts); }; - line.bindLabel(d.source.node.nodeinfo.hostname + ' – ' + d.target.node.nodeinfo.hostname + '
' + helper.showDistance(d) + ' / ' + helper.showTq(d) + ''); + line.bindTooltip(d.source.node.nodeinfo.hostname + ' – ' + d.target.node.nodeinfo.hostname + '
' + helper.showDistance(d) + ' / ' + helper.showTq(d) + ''); line.on('click', router.link(d)); dict[d.id] = line; @@ -279,7 +277,7 @@ define(['map/clientlayer', 'map/labelslayer', }; }); - layers[0].layer.addTo(map); + map.addLayer(layers[0].layer); layers.forEach(function (d) { baseLayers[d.name] = d.layer; @@ -298,11 +296,11 @@ define(['map/clientlayer', 'map/labelslayer', map.zoomControl.setPosition('topright'); - var clientLayer = new ClientLayer({ minZoom: config.clientZoom }); + var clientLayer = new ClientLayer('', { minZoom: config.clientZoom }); clientLayer.addTo(map); clientLayer.setZIndex(5); - var labelsLayer = new LabelsLayer({ minZoom: config.labelZoom }); + var labelsLayer = new LabelsLayer('', { minZoom: config.labelZoom }); labelsLayer.addTo(map); labelsLayer.setZIndex(6); @@ -345,10 +343,6 @@ define(['map/clientlayer', 'map/labelslayer', map.fitBounds(bounds, { paddingTopLeft: [sidebar(), 0], maxZoom: config.nodeZoom }); } - function resetZoom() { - setView(config.fixedCenter); - } - function goto(m) { var bounds; @@ -383,7 +377,7 @@ define(['map/clientlayer', 'map/labelslayer', } else if (savedView) { map.setView(savedView.center, savedView.zoom); } else { - resetZoom(); + setView(config.fixedCenter); } } } diff --git a/lib/map/clientlayer.js b/lib/map/clientlayer.js index c1deb08..2aa2a5c 100644 --- a/lib/map/clientlayer.js +++ b/lib/map/clientlayer.js @@ -2,7 +2,7 @@ define(['leaflet', 'helper'], function (L, helper) { 'use strict'; - return L.TileLayer.Canvas.extend({ + return L.TileLayer.extend({ setData: function (d) { this.data = d; diff --git a/lib/map/labelslayer.js b/lib/map/labelslayer.js index 649ba86..12bea03 100644 --- a/lib/map/labelslayer.js +++ b/lib/map/labelslayer.js @@ -70,9 +70,9 @@ define(['leaflet', 'rbush', 'helper'], return { minX: x, minY: y, maxX: x + width, maxY: y + height }; } - return L.TileLayer.Canvas.extend({ + return L.TileLayer.extend({ onAdd: function (map) { - L.TileLayer.Canvas.prototype.onAdd.call(this, map); + L.TileLayer.prototype.onAdd.call(this, map); if (this.data) { this.prepareLabels(); } diff --git a/package.json b/package.json index 7798b59..266242a 100644 --- a/package.json +++ b/package.json @@ -47,8 +47,7 @@ "d3-force": "^1.0.6", "d3-selection": "^1.0.5", "d3-zoom": "^1.1.3", - "leaflet": "https://github.com/davojta/Leaflet.git#stable_0_7_7_1_release", - "leaflet-label": "^0.2.1-0", + "leaflet": "^1.0.3", "moment": "^2.17.1", "node-polyglot": "^2.2.2", "promise-polyfill": "^6.0.2", diff --git a/scss/modules/_leaflet.scss b/scss/modules/_leaflet.scss index fea076e..b0ce18b 100644 --- a/scss/modules/_leaflet.scss +++ b/scss/modules/_leaflet.scss @@ -1,12 +1,10 @@ -.leaflet-map-pane, +.leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, -.leaflet-tile-pane, .leaflet-tile-container, -.leaflet-overlay-pane, -.leaflet-shadow-pane, -.leaflet-marker-pane, +.leaflet-pane > svg, +.leaflet-pane > canvas, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer { @@ -16,25 +14,55 @@ } .leaflet-container { - background: $color-map-background; - cursor: grab; + background: $color-gray-light; outline: 0; overflow: hidden; - touch-action: none; - - a { - color: $color-primary; - } - - img { - max-width: none; - } .leaflet-control-attribution { background: transparentize($color-white, .3); margin: 0; } + .leaflet-control-attribution, + .leaflet-control-scale { + font-size: 11px; + padding: 5px; + } + + .leaflet-marker-pane, + .leaflet-shadow-pane, + .leaflet-tile-pane { + img { + max-width: none; + } + } + + img { + &.leaflet-image-layer { + max-width: none; + } + } + + .leaflet-overlay-pane { + svg { + max-width: none; + } + } + + &.leaflet-touch-zoom { + -ms-touch-action: pan-x pan-y; // sass-lint:disable-line no-vendor-prefixes + touch-action: pan-x pan-y; + } + + &.leaflet-touch-drag { + -ms-touch-action: pinch-zoom; // sass-lint:disable-line no-vendor-prefixes + + &.leaflet-touch-drag { + -ms-touch-action: none; // sass-lint:disable-line no-vendor-prefixes + touch-action: none; + } + } + .leaflet-control-layers-toggle { background: $color-white; border-radius: 50%; @@ -44,7 +72,7 @@ height: 1.8em; line-height: 1.95; margin-right: 16px; - opacity: .7; + opacity: .9; text-align: center; transition: background-color .5s, color .5s; width: 1.8em; @@ -61,6 +89,44 @@ text-rendering: auto; } } + + .leaflet-control-layers-expanded { + padding: 0; + + .leaflet-control-layers-list { + display: block; + position: relative; + } + + .leaflet-control-layers-toggle { + display: none; + } + } +} + +.leaflet-tile, +.leaflet-marker-icon, +.leaflet-marker-shadow { + user-select: none; +} + +///* Safari renders non-retina tile on retina better with this, but Chrome is worse */ +.leaflet-safari { + .leaflet-tile { + image-rendering: -webkit-optimize-contrast; // sass-lint:disable-line no-vendor-prefixes + } + + ///* hack that prevents hw layers "stretching" when loading new tiles */ + .leaflet-tile-container { + -webkit-transform-origin: 0 0; // sass-lint:disable-line no-vendor-prefixes + height: 1600px; + width: 1600px; + } +} + +.leaflet-marker-icon, +.leaflet-marker-shadow { + display: block; } .leaflet-tile { @@ -73,28 +139,54 @@ } .leaflet-zoom-box { + -moz-box-sizing: border-box; // sass-lint:disable-line no-vendor-prefixes + box-sizing: border-box; height: 0; width: 0; + z-index: 800; +} + +///* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ +.leaflet-overlay-pane { + z-index: 400; + + svg { + -moz-user-select: none; // sass-lint:disable-line no-vendor-prefixes + } +} + +.leaflet-pane { + z-index: 400; } .leaflet-tile-pane { - z-index: 2; -} - -.leaflet-objects-pane { - z-index: 3; -} - -.leaflet-overlay-pane { - z-index: 4; + z-index: 200; } .leaflet-shadow-pane { - z-index: 5; + z-index: 500; } .leaflet-marker-pane { - z-index: 6; + z-index: 600; +} + +.leaflet-tooltip-pane { + z-index: 650; +} + +.leaflet-popup-pane { + z-index: 700; +} + +.leaflet-map-pane { + canvas { + z-index: 100; + } + + svg { + z-index: 200; + } } .leaflet-vml-shape { @@ -102,14 +194,17 @@ width: 1px; } +.lvml { + display: inline-block; + position: absolute; +} + .leaflet-control { clear: both; - cursor: auto; float: left; - font-size: $font-size-map-control; pointer-events: auto; position: relative; - z-index: 7; + z-index: 800; } .leaflet-top, @@ -119,14 +214,6 @@ z-index: 1000; } -.leaflet-top { - top: 0; - - .leaflet-control { - margin-top: 10px; - } -} - .leaflet-right { right: 0; @@ -135,8 +222,17 @@ } } +.leaflet-top { + top: 0; + + .leaflet-control { + margin-top: 10px; + } +} + .leaflet-bottom { bottom: 0; + } .leaflet-left { @@ -149,66 +245,98 @@ .leaflet-fade-anim { .leaflet-tile { + will-change: opacity; + } + + .leaflet-popup { opacity: 0; transition: opacity .2s linear; } - .leaflet-tile-loaded { - opacity: 1; + .leaflet-map-pane { + .leaflet-popup { + opacity: 1; + } } } -%no-transition { - transition: none; +.leaflet-zoom-animated { + transform-origin: 0 0; } .leaflet-zoom-anim { - .leaflet-tile { - @extend %no-transition; - } - .leaflet-zoom-animated { transition: transform .25s cubic-bezier(0, 0, .25, 1); + will-change: transform; } .leaflet-zoom-hide { visibility: hidden; } + } +.leaflet-zoom-anim, .leaflet-pan-anim { .leaflet-tile { - @extend %no-transition; + transition: none; } } -.leaflet-touching { - .leaflet-zoom-animated { - @extend %no-transition; - } -} - -.leaflet-clickable { +.leaflet-interactive { cursor: pointer; } -.leaflet-dragging { - .leaflet-container, - .leaflet-clickable { - cursor: move; +.leaflet-grab { + cursor: -webkit-grab; // sass-lint:disable-line no-vendor-prefixes + cursor: -moz-grab; // sass-lint:disable-line no-vendor-prefixes no-duplicate-properties +} + +.leaflet-crosshair { + &, + &.leaflet-interactive { + cursor: crosshair; } } -.leaflet-touch { - .leaflet-control-layers, - .leaflet-bar { - background-clip: padding-box; - border: 2px solid transparentize($color-black, .8); - } +.leaflet-popup-pane, +.leaflet-control { + cursor: auto; +} - .leaflet-control-layers-toggle { - height: 44px; - width: 44px; +.leaflet-dragging { + .leaflet-marker-draggable, + .leaflet-grab { + &, + &.leaflet-interactive { + cursor: move; + cursor: -webkit-grabbing; // sass-lint:disable-line no-vendor-prefixes no-duplicate-properties + cursor: -moz-grabbing; // sass-lint:disable-line no-vendor-prefixes no-duplicate-properties + } + } +} + +.leaflet-marker-icon, +.leaflet-marker-shadow, +.leaflet-image-layer, +.leaflet-tile-container { + pointer-events: none; +} + +.leaflet-pane > svg { + path { + pointer-events: none; + + &.leaflet-interactive { + pointer-events: auto; + } + } +} + +.leaflet-marker-icon, +.leaflet-image-layer { + &.leaflet-interactive { + pointer-events: auto; } } @@ -222,36 +350,21 @@ opacity: .8; } + .leaflet-control-layers-list { + display: none; + } + label { display: block; } - - .leaflet-control-layers-list { - display: none; - } } -.leaflet-control-layers-expanded { - background: $color-white; - color: $color-gray-dark; - - .leaflet-control-layers-toggle { - display: none; - } - - .leaflet-control-layers-list { - background: transparentize($color-white, .1); - color: $color-gray-dark; - display: block; - padding: 2px 10px; - position: relative; - - label { - cursor: pointer; - } - } +.leaflet-control-layers-scrollbar { + overflow-y: scroll; + padding-right: 5px; } + .leaflet-control-layers-selector { display: none; @@ -286,37 +399,102 @@ } } -.leaflet-control-layers-separator { - border-top: 1px solid $color-gray-light; - height: 0; - margin: 5px -10px 5px -6px; +.leaflet-tooltip { + background-color: $color-white; + border: 1px solid $color-primary; + border-radius: 2px; + color: $color-primary; + font-size: 12px; + line-height: 1.2; + padding: 6px; + pointer-events: none; + position: absolute; + user-select: none; + white-space: nowrap; + + &.leaflet-clickable { + cursor: pointer; + pointer-events: auto; + } } -.leaflet-control-attribution, -.leaflet-control-scale-line { - color: $color-gray-dark; - padding: 2px 5px 4px; -} - -.leaflet-label { - &.leaflet-label-right { - background-color: $color-white; - border: 1px solid $color-primary; - border-radius: 0; - display: block; - font-size: $font-size-map-control; - font-weight: normal; - line-height: 1.5; - opacity: .8; - padding: 1px 6px; +.leaflet-tooltip-top, +.leaflet-tooltip-bottom, +.leaflet-tooltip-left, +.leaflet-tooltip-right { + &::before { + background: transparent; + border: 6px solid transparent; + content: ''; + pointer-events: none; position: absolute; - user-select: none; - white-space: nowrap; - z-index: 6; + } +} - &::before { - display: none; - } +.leaflet-tooltip-bottom { + margin-top: 6px; + + &::before { + border-bottom-color: $color-white; + margin-left: -6px; + margin-top: -12px; + top: 0; + } +} + +.leaflet-tooltip-top { + margin-top: -6px; + + &::before { + border-top-color: $color-white; + bottom: 0; + margin-bottom: -12px; + } +} + +.leaflet-tooltip-bottom, +.leaflet-tooltip-top { + &::before { + left: 50%; + margin-left: -6px; + } +} + +.leaflet-tooltip-left { + margin-left: -6px; + + &::before { + border-left-color: $color-white; + margin-right: -12px; + right: 0; + } +} + +.leaflet-tooltip-right { + margin-left: 6px; + + &::before { + border-right-color: $color-white; + left: 0; + margin-left: -12px; + } +} + +.leaflet-tooltip-left, +.leaflet-tooltip-right { + &::before { + margin-top: -6px; + top: 50%; + } +} + +.leaflet-control-layers-list { + background: transparentize($color-white, .1); + color: $color-gray-dark; + padding: 10px; + + label { + cursor: pointer; } } diff --git a/scss/modules/_sidebar.scss b/scss/modules/_sidebar.scss index d19c10d..3046307 100644 --- a/scss/modules/_sidebar.scss +++ b/scss/modules/_sidebar.scss @@ -4,7 +4,7 @@ position: absolute; transition: left .5s; width: $sidebar-width; - z-index: 5; + z-index: 1005; &.hidden { left: -$sidebar-width - $button-distance; @@ -124,7 +124,7 @@ position: fixed; top: $button-distance; transition: left .5s, box-shadow .5s, color .5s, transform .5s; - z-index: 10; + z-index: 1010; &::after { content: '\f124'; diff --git a/scss/night.scss b/scss/night.scss index b03c3a7..3dbdc6b 100644 --- a/scss/night.scss +++ b/scss/night.scss @@ -28,6 +28,13 @@ html { } } + .leaflet-control-container { + .leaflet-control-layers-toggle { + background: lighten($color-white, 10); + color: $color-black; + } + } + .leaflet-control-zoom { a { background: lighten($color-white, 10); diff --git a/yarn.lock b/yarn.lock index d851fc1..e1e72fc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2177,13 +2177,9 @@ lcid@^1.0.0: dependencies: invert-kv "^1.0.0" -leaflet-label@^0.2.1-0: - version "0.2.1-0" - resolved "https://registry.yarnpkg.com/leaflet-label/-/leaflet-label-0.2.1-0.tgz#b91a678a4d78ac4c47cb230d3926254fd2a7e612" - -"leaflet@https://github.com/davojta/Leaflet.git#stable_0_7_7_1_release": - version "0.7.7" - resolved "https://github.com/davojta/Leaflet.git#bf3bcd089bea98d3f75bda08a79d8260f27eb3bf" +leaflet@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.0.3.tgz#1f401b98b45c8192134c6c8d69686253805007c8" levn@^0.3.0, levn@~0.3.0: version "0.3.0"