gemma: client/src/store/map.js comparison

comparison client/src/store/map.js @ 3062:87e0422cffa7

client: draw/cut tools work now with multiple maps

author	Markus Kottlaender <markus@intevation.de>
date	Tue, 16 Apr 2019 12:49:29 +0200
parents	1ef2f4179d30
children	333aff79197d

comparison

equal deleted inserted replaced

-:563176194d74
+:87e0422cffa7
 zoom: 11
 },
 identifyToolEnabled: true, // event binding (singleclick, dblclick)
 identifiedFeatures: [], // map features identified by clicking on the map
 currentMeasurement: null, // distance or area from line-/polygon-/cutTool
-lineTool: null, // open layers interaction object (Draw)
+lineToolEnabled: false,
-polygonTool: null, // open layers interaction object (Draw)
+polygonToolEnabled: false,
-cutTool: null, // open layers interaction object (Draw)
+cutToolEnabled: false,
 isolinesLegendImgDataURL: "",
 differencesLegendImgDataURL: ""
 };
 };
 );
 },
 setCurrentMeasurement: (state, measurement) => {
 state.currentMeasurement = measurement;
 },
-lineTool: (state, lineTool) => {
+lineToolEnabled: (state, enabled) => {
-state.lineTool = lineTool;
+state.lineToolEnabled = enabled;
-},
+state.openLayersMaps.forEach(m => {
-polygonTool: (state, polygonTool) => {
+let tool = m
-state.polygonTool = polygonTool;
+.getInteractions()
-},
+.getArray()
-cutTool: (state, cutTool) => {
+.find(i => i.get("id") === "linetool");
-state.cutTool = cutTool;
+if (tool) {
+tool.setActive(enabled);
+}
+});
+},
+polygonToolEnabled: (state, enabled) => {
+state.polygonToolEnabled = enabled;
+state.openLayersMaps.forEach(m => {
+let tool = m
+.getInteractions()
+.getArray()
+.find(i => i.get("id") === "polygontool");
+if (tool) {
+tool.setActive(enabled);
+}
+});
+},
+cutToolEnabled: (state, enabled) => {
+state.cutToolEnabled = enabled;
+state.openLayersMaps.forEach(m => {
+let tool = m
+.getInteractions()
+.getArray()
+.find(i => i.get("id") === "cuttool");
+if (tool) {
+tool.setActive(enabled);
+}
+});
 },
 isolinesLegendImgDataURL: (state, isolinesLegendImgDataURL) => {
 state.isolinesLegendImgDataURL = isolinesLegendImgDataURL;
 },
 differencesLegendImgDataURL: (state, differencesLegendImgDataURL) => {
 state.differencesLegendImgDataURL = differencesLegendImgDataURL;
 }
 },
 actions: {
-openLayersMap({ commit, dispatch }, map) {
+openLayersMap({ state, commit, dispatch }, map) {
 const drawVectorSrc = map.getLayer("DRAWTOOL").getSource();
 const cutVectorSrc = map.getLayer("CUTTOOL").getSource();
 // init line tool
 const lineTool = new Draw({
 source: drawVectorSrc,
 type: "LineString",
 maxPoints: 2
 });
+lineTool.set("id", "linetool");
 lineTool.setActive(false);
 lineTool.on("drawstart", () => {
-drawVectorSrc.clear();
+state.openLayersMaps.forEach(m => {
+m.getLayer("DRAWTOOL")
+.getSource()
+.clear();
+});
 commit("setCurrentMeasurement", null);
 });
 lineTool.on("drawend", event => {
 commit("setCurrentMeasurement", {
 quantity: app.$gettext("Length"),
 const polygonTool = new Draw({
 source: drawVectorSrc,
 type: "Polygon",
 maxPoints: 50
 });
+polygonTool.set("id", "polygontool");
 polygonTool.setActive(false);
 polygonTool.on("drawstart", () => {
-drawVectorSrc.clear();
+state.openLayersMaps.forEach(m => {
+m.getLayer("DRAWTOOL")
+.getSource()
+.clear();
+});
 commit("setCurrentMeasurement", null);
 });
 polygonTool.on("drawend", event => {
 const areaSize = getArea(event.feature.getGeometry());
 commit("setCurrentMeasurement", {
 stroke: new Stroke({ color: "#fff", width: 1.5 }),
 radius: 6
 })
 })
 });
+cutTool.set("id", "cuttool");
 cutTool.setActive(false);
 cutTool.on("drawstart", () => {
 commit("identifyToolEnabled", false);
-cutVectorSrc.clear();
+state.openLayersMaps.forEach(m => {
+m.getLayer("CUTTOOL")
+.getSource()
+.clear();
+});
 });
 cutTool.on("drawend", event => {
 commit("fairwayprofile/selectedCut", null, { root: true });
 dispatch("fairwayprofile/cut", event.feature, { root: true }).then(() =>
 // This setTimeout is an ugly workaround. If we would enable the
 map.addInteraction(lineTool);
 map.addInteraction(cutTool);
 map.addInteraction(polygonTool);
-commit("lineTool", lineTool);
+// If there are multiple maps and you enable one of the draw tools, when
-commit("polygonTool", polygonTool);
+// moving the mouse to another map, the cursor for the draw tool stays
-commit("cutTool", cutTool);
+// visible in the first map, right next to the edge where the cursor left
+// the map. So here we disable all draw layers except the ones in the map
+// that the user currently hovering with the mouse.
+map.getTargetElement().addEventListener("mouseenter", () => {
+if (
+state.lineToolEnabled ||
+state.polygonToolEnabled ||
+state.cutToolEnabled
+) {
+state.openLayersMaps.forEach(m => {
+let lineTool = m
+.getInteractions()
+.getArray()
+.find(i => i.get("id") === "linetool");
+let polygonTool = m
+.getInteractions()
+.getArray()
+.find(i => i.get("id") === "polygontool");
+let cutTool = m
+.getInteractions()
+.getArray()
+.find(i => i.get("id") === "cuttool");
+if (lineTool) lineTool.setActive(false);
+if (polygonTool) polygonTool.setActive(false);
+if (cutTool) cutTool.setActive(false);
+});
+let lineTool = map
+.getInteractions()
+.getArray()
+.find(i => i.get("id") === "linetool");
+let polygonTool = map
+.getInteractions()
+.getArray()
+.find(i => i.get("id") === "polygontool");
+let cutTool = map
+.getInteractions()
+.getArray()
+.find(i => i.get("id") === "cuttool");
+if (lineTool && state.lineToolEnabled) lineTool.setActive(true);
+if (polygonTool && state.polygonToolEnabled)
+polygonTool.setActive(true);
+if (cutTool && state.cutToolEnabled) cutTool.setActive(true);
+}
+});
 commit("addOpenLayersMap", map);
 },
 initIdentifyTool({ state, rootState, commit, dispatch }, map) {
 map.on(["singleclick", "dblclick"], event => {
 if (!state.identifyToolEnabled) return;