changeset 1197:49740dcba52c

changed cut tool style to better distinguish from line/polygon tool
author Markus Kottlaender <markus@intevation.de>
date Mon, 19 Nov 2018 08:26:02 +0100
parents a397b52981b8
children c636ce754148
files client/src/drawtool/Drawtool.vue client/src/map/Maplayer.vue client/src/store/map.js
diffstat 3 files changed, 23 insertions(+), 5 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/drawtool/Drawtool.vue	Mon Nov 19 08:24:47 2018 +0100
+++ b/client/src/drawtool/Drawtool.vue	Mon Nov 19 08:26:02 2018 +0100
@@ -46,6 +46,7 @@
 import { mapState, mapGetters } from "vuex";
 import { getLength, getArea } from "ol/sphere.js";
 import Draw from "ol/interaction/Draw.js";
+import { Stroke, Style, Circle, Fill } from "ol/style.js";
 
 export default {
   name: "drawtool",
@@ -144,7 +145,19 @@
       const cutTool = new Draw({
         source: cutVectorSrc,
         type: "LineString",
-        maxPoints: 2
+        maxPoints: 2,
+        style: new Style({
+          stroke: new Stroke({
+            color: "#444",
+            width: 2,
+            lineDash: [7,7]
+          }),
+          image: new Circle({
+            fill: new Fill({ color: "#333" }),
+            stroke: new Stroke({ color: "#fff", width: 1.5 }),
+            radius: 6,
+          })
+        })
       });
       cutTool.on("drawstart", () => {
         cutVectorSrc.clear();
--- a/client/src/map/Maplayer.vue	Mon Nov 19 08:24:47 2018 +0100
+++ b/client/src/map/Maplayer.vue	Mon Nov 19 08:26:02 2018 +0100
@@ -3,6 +3,9 @@
 </template>
 
 <style lang="sass" scoped>
+.nocursor
+  cursor: none
+
 .mapsplit
   height: 50vh
 
@@ -60,7 +63,8 @@
     mapStyle() {
       return {
         mapfull: !this.split,
-        mapsplit: this.split
+        mapsplit: this.split,
+        nocursor: this.drawMode || this.cutMode
       };
     }
   },
--- a/client/src/store/map.js	Mon Nov 19 08:24:47 2018 +0100
+++ b/client/src/store/map.js	Mon Nov 19 08:26:02 2018 +0100
@@ -295,8 +295,9 @@
               // linestring
               new Style({
                 stroke: new Stroke({
-                  color: "#369aca",
-                  width: 2
+                  color: "#333333",
+                  width: 2,
+                  lineDash: [7, 7]
                 })
               })
             ];
@@ -312,7 +313,7 @@
                     geometry: new Point(end),
                     image: new Icon({
                       // we need to make sure the image is loaded by Vue Loader
-                      src: require("../application/assets/linestring_arrow.png"),
+                      src: require("../application/assets/linestring_arrow_grey.png"),
                       // fiddling with the anchor's y value does not help to
                       // position the image more centered on the line ending, as the
                       // default line style seems to be slightly uncentered in the