ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-08-31 17:37:25 +00:00
Code Issues Projects Releases Wiki Activity

Fix tests, types, added data-wd-key

Browse Source
This commit is contained in:
HarelM
2023-12-19 23:44:35 +02:00
parent 84adbe6eb2
commit 3ba3a20848
14 changed files with 1124 additions and 1313 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MapMaplibreGl.jsx
+101 -123
View File
@@ -1,17 +1,19 @@
import Color from "color";
import MapboxInspect from "mapbox-gl-inspect";
import colors from "mapbox-gl-inspect/lib/colors";
import MapLibreGl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import PropTypes from "prop-types";
import React from "react";
import ReactDOM from "react-dom";
import { colorHighlightedLayer } from "../libs/highlight";
import "../libs/maplibre-rtl";
import ZoomControl from "../libs/zoomcontrol";
import "../maplibregl.css";
import MapMaplibreGlFeaturePropertyPopup from "./MapMaplibreGlFeaturePropertyPopup";
import MapMaplibreGlLayerPopup from "./MapMaplibreGlLayerPopup";
import React from 'react'
import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'
import MapLibreGl from 'maplibre-gl'
import MapboxInspect from 'mapbox-gl-inspect'
import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup'
import MapMaplibreGlFeaturePropertyPopup from './MapMaplibreGlFeaturePropertyPopup'
import tokens from '../config/tokens.json'
import colors from 'mapbox-gl-inspect/lib/colors'
import Color from 'color'
import ZoomControl from '../libs/zoomcontrol'
import { colorHighlightedLayer } from '../libs/highlight'
import 'maplibre-gl/dist/maplibre-gl.css'
import '../maplibregl.css'
import '../libs/maplibre-rtl'
const IS_SUPPORTED = MapLibreGl.supported();
@@ -22,32 +24,32 @@ function renderPopup(popup, mountNode) {
function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
const backgroundLayer = {
id: "background",
type: "background",
paint: {
"background-color": "#1c1f24",
},
};
const layer = colorHighlightedLayer(highlightedLayer);
if (layer) {
coloredLayers.push(layer);
"id": "background",
"type": "background",
"paint": {
"background-color": '#1c1f24',
}
}
const sources = {};
Object.keys(originalMapStyle.sources).forEach((sourceId) => {
const source = originalMapStyle.sources[sourceId];
if (source.type !== "raster" && source.type !== "raster-dem") {
sources[sourceId] = source;
const layer = colorHighlightedLayer(highlightedLayer)
if(layer) {
coloredLayers.push(layer)
}
const sources = {}
Object.keys(originalMapStyle.sources).forEach(sourceId => {
const source = originalMapStyle.sources[sourceId]
if(source.type !== 'raster' && source.type !== 'raster-dem') {
sources[sourceId] = source
}
});
})
const inspectStyle = {
...originalMapStyle,
sources: sources,
layers: [backgroundLayer].concat(coloredLayers),
};
return inspectStyle;
layers: [backgroundLayer].concat(coloredLayers)
}
return inspectStyle
}
export default class MapMaplibreGl extends React.Component {
@@ -60,7 +62,7 @@ export default class MapMaplibreGl extends React.Component {
options: PropTypes.object,
replaceAccessTokens: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
};
}
static defaultProps = {
onMapLoaded: () => {},
@@ -68,55 +70,51 @@ export default class MapMaplibreGl extends React.Component {
onLayerSelect: () => {},
onChange: () => {},
options: {},
};
}
constructor(props) {
super(props);
super(props)
this.state = {
map: null,
inspect: null,
};
}
}
updateMapFromProps(props) {
if (!IS_SUPPORTED) return;
if(!IS_SUPPORTED) return;
if (!this.state.map) return;
if(!this.state.map) return
//Maplibre GL now does diffing natively so we don't need to calculate
//the necessary operations ourselves!
this.state.map.setStyle(this.props.replaceAccessTokens(props.mapStyle), {
diff: true,
});
this.state.map.setStyle(
this.props.replaceAccessTokens(props.mapStyle),
{diff: true}
)
}
shouldComponentUpdate(nextProps, nextState) {
let should = false;
try {
should =
JSON.stringify(this.props) !== JSON.stringify(nextProps) ||
JSON.stringify(this.state) !== JSON.stringify(nextState);
} catch (e) {
should = JSON.stringify(this.props) !== JSON.stringify(nextProps) || JSON.stringify(this.state) !== JSON.stringify(nextState);
} catch(e) {
// no biggie, carry on
}
return should;
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (!IS_SUPPORTED) return;
if(!IS_SUPPORTED) return;
const map = this.state.map;
this.updateMapFromProps(this.props);
if (
this.state.inspect &&
this.props.inspectModeEnabled !== this.state.inspect._showInspectMap
) {
if(this.state.inspect && this.props.inspectModeEnabled !== this.state.inspect._showInspectMap) {
// HACK: Fix for <https://github.com/maputnik/editor/issues/576>, while we wait for a proper fix.
// eslint-disable-next-line
this.state.inspect._popupBlocked = false;
this.state.inspect.toggleInspector();
this.state.inspect.toggleInspector()
}
if (map) {
if (this.props.inspectModeEnabled) {
@@ -125,7 +123,7 @@ export default class MapMaplibreGl extends React.Component {
// mapbox-gl-inspect.
try {
this.state.inspect.render();
} catch (err) {
} catch(err) {
console.error("FIXME: Caught error", err);
}
}
@@ -137,40 +135,40 @@ export default class MapMaplibreGl extends React.Component {
}
componentDidMount() {
if (!IS_SUPPORTED) return;
if(!IS_SUPPORTED) return;
const mapOpts = {
...this.props.options,
container: this.container,
style: this.props.mapStyle,
hash: true,
maxZoom: 24,
};
maxZoom: 24
}
const map = new MapLibreGl.Map(mapOpts);
const mapViewChange = () => {
const center = map.getCenter();
const zoom = map.getZoom();
this.props.onChange({ center, zoom });
};
this.props.onChange({center, zoom});
}
mapViewChange();
map.showTileBoundaries = mapOpts.showTileBoundaries;
map.showCollisionBoxes = mapOpts.showCollisionBoxes;
map.showOverdrawInspector = mapOpts.showOverdrawInspector;
const zoomControl = new ZoomControl();
map.addControl(zoomControl, "top-right");
const zoomControl = new ZoomControl;
map.addControl(zoomControl, 'top-right');
const nav = new MapLibreGl.NavigationControl({ visualizePitch: true });
map.addControl(nav, "top-right");
const nav = new MapLibreGl.NavigationControl({visualizePitch:true});
map.addControl(nav, 'top-right');
const tmpNode = document.createElement("div");
const tmpNode = document.createElement('div');
const inspect = new MapboxInspect({
popup: new MapLibreGl.Popup({
closeOnClick: false,
closeOnClick: false
}),
showMapPopup: true,
showMapPopupOnHover: false,
@@ -178,58 +176,41 @@ export default class MapMaplibreGl extends React.Component {
showInspectButton: false,
blockHoverPopupOnClick: true,
assignLayerColor: (layerId, alpha) => {
return Color(colors.brightColor(layerId, alpha))
.desaturate(0.5)
.string();
return Color(colors.brightColor(layerId, alpha)).desaturate(0.5).string()
},
buildInspectStyle: (originalMapStyle, coloredLayers) =>
buildInspectStyle(
originalMapStyle,
coloredLayers,
this.props.highlightedLayer
),
renderPopup: (features) => {
if (this.props.inspectModeEnabled) {
return renderPopup(
<MapMaplibreGlFeaturePropertyPopup features={features} />,
tmpNode
);
buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
renderPopup: features => {
if(this.props.inspectModeEnabled) {
return renderPopup(<MapMaplibreGlFeaturePropertyPopup features={features} />, tmpNode);
} else {
return renderPopup(
<MapMaplibreGlLayerPopup
features={features}
onLayerSelect={this.onLayerSelectById}
zoom={this.state.zoom}
/>,
tmpNode
);
return renderPopup(<MapMaplibreGlLayerPopup features={features} onLayerSelect={this.onLayerSelectById} zoom={this.state.zoom} />, tmpNode);
}
},
});
map.addControl(inspect);
}
})
map.addControl(inspect)
map.on("style.load", () => {
this.setState({
map,
inspect,
zoom: map.getZoom(),
zoom: map.getZoom()
});
});
})
map.on("data", (e) => {
if (e.dataType !== "tile") return;
map.on("data", e => {
if(e.dataType !== 'tile') return
this.props.onDataChange({
map: this.state.map,
});
});
map: this.state.map
})
})
map.on("error", (e) => {
map.on("error", e => {
console.log("ERROR", e);
});
})
map.on("zoom", (e) => {
map.on("zoom", e => {
this.setState({
zoom: map.getZoom(),
zoom: map.getZoom()
});
});
@@ -238,32 +219,29 @@ export default class MapMaplibreGl extends React.Component {
}
onLayerSelectById = (id) => {
const index = this.props.mapStyle.layers.findIndex(
(layer) => layer.id === id
);
const index = this.props.mapStyle.layers.findIndex(layer => layer.id === id);
this.props.onLayerSelect(index);
};
}
render() {
if (IS_SUPPORTED) {
return (
<div
className="maputnik-map__map"
role="region"
aria-label="Map view"
ref={(x) => (this.container = x)}
data-wd-key="maplibre:map"
></div>
);
} else {
return (
<div className="maputnik-map maputnik-map--error">
<div className="maputnik-map__error-message">
Error: Cannot load MaplibreGL, WebGL is either unsupported or
disabled
</div>
if(IS_SUPPORTED) {
return <div
className="maputnik-map__map"
role="region"
aria-label="Map view"
ref={x => this.container = x}
data-wd-key="maplibre:map"
></div>
}
else {
return <div
className="maputnik-map maputnik-map--error"
>
<div className="maputnik-map__error-message">
Error: Cannot load MaplibreGL, WebGL is either unsupported or disabled
</div>
);
</div>
}
}
}