Crosshair

app/images/images.qrc

@@ -1,5 +1,10 @@
 <RCC>
     <qresource prefix="/images">
+        <file>CrosshairBackground.svg</file>
+        <file>CrosshairCenter.svg</file>
+        <file>CrosshairCircle.svg</file>
+        <file>CrosshairForeground.svg</file>
+        <file>CrosshairPlus.svg</file>
         <file>Direction.svg</file>
         <file>LutraLogo4x.png</file>
         <file>MapPin.svg</file>

app/mmstyle.h

@@ -79,6 +79,7 @@ class MMStyle: public QObject
     Q_PROPERTY( QColor nightAlphaColor READ nightAlphaColor CONSTANT ) // placeholder input color
     Q_PROPERTY( QColor errorBgInputColor READ errorBgInputColor CONSTANT ) // error bg input color
     Q_PROPERTY( QColor shadowColor READ shadowColor CONSTANT )
+    Q_PROPERTY( QColor snappingColor READ snappingColor CONSTANT )
 
     // Icons
     Q_PROPERTY( QUrl linkIcon READ linkIcon CONSTANT )
@@ -206,6 +207,11 @@ class MMStyle: public QObject
     Q_PROPERTY( QUrl streamingBootsImage READ streamingBootsImage CONSTANT )
     Q_PROPERTY( QUrl streamingBootsOrangeImage READ streamingBootsOrangeImage CONSTANT )
     Q_PROPERTY( QUrl noWifiImage READ noWifiImage CONSTANT )
+    Q_PROPERTY( QUrl crosshairBackgroundImage READ crosshairBackgroundImage CONSTANT )
+    Q_PROPERTY( QUrl crosshairCenterImage READ crosshairCenterImage CONSTANT )
+    Q_PROPERTY( QUrl crosshairCircleImage READ crosshairCircleImage CONSTANT )
+    Q_PROPERTY( QUrl crosshairForegroundImage READ crosshairForegroundImage CONSTANT )
+    Q_PROPERTY( QUrl crosshairPlusImage READ crosshairPlusImage CONSTANT )
 
     /*
      * Pixel sizes used across the app
@@ -308,6 +314,7 @@ class MMStyle: public QObject
     QColor nightAlphaColor() {return QColor::fromString( "#AA12181F" );}
     QColor errorBgInputColor() {return QColor::fromString( "#FEFAF9" );}
     QColor shadowColor() {return QColor::fromString( "#66777777" );}
+    QColor snappingColor() {return QColor::fromString( "#BD74FF" );}
 
     QUrl splitGeometryIcon() {return QUrl( "qrc:/SplitGeometry.svg" );}
     QUrl streamingIcon() {return QUrl( "qrc:/Streaming.svg" );}
@@ -426,6 +433,11 @@ class MMStyle: public QObject
     QUrl streamingBootsImage() {return QUrl( "qrc:/images/StreamingBoots.svg" );}
     QUrl streamingBootsOrangeImage() {return QUrl( "qrc:/images/StreamingBootsOrange.svg" );}
     QUrl noWifiImage() {return QUrl( "qrc:/images/NoWifi.svg" );}
+    QUrl crosshairBackgroundImage() {return QUrl( "qrc:/images/CrosshairBackground.svg" );}
+    QUrl crosshairCenterImage() {return QUrl( "qrc:/images/CrosshairCenter.svg" );}
+    QUrl crosshairCircleImage() {return QUrl( "qrc:/images/CrosshairCircle.svg" );}
+    QUrl crosshairForegroundImage() {return QUrl( "qrc:/images/CrosshairForeground.svg" );}
+    QUrl crosshairPlusImage() {return QUrl( "qrc:/images/CrosshairPlus.svg" );}
 
     static QUrl lineLayerImage() {return QUrl( "qrc:/images/mIconLineLayer.svg" );}
     static QUrl pointLayerImage() {return QUrl( "qrc:/images/mIconPointLayer.svg" );}

app/qml/CMakeLists.txt

@@ -20,7 +20,6 @@ set(MM_QML
     Notification.qml
     NotificationBanner.qml
     ProjectLimitDialog.qml
-    map/Crosshair.qml
     map/Highlight.qml
     map/SplittingTools.qml
     map/StakeoutTools.qml
@@ -132,6 +131,7 @@ set(MM_QML
     map/MapWrapper.qml
     map/MMPositionMarker.qml
     map/RecordingTools.qml
+    map/components/MMCrosshair.qml
     map/components/MMBlurBox.qml
     map/components/MMLoadingIndicator.qml
     map/components/MMMapBlurLabel.qml

app/qml/map/RecordingTools.qml

@@ -12,7 +12,7 @@ import QtQuick.Shapes
 import Input 0.1
 import lc 1.0
 import "../components"
-
+import "./components"
 import "../"
 
 /**
@@ -177,7 +177,7 @@ Item {
     accuracyRingSize: positionMarkerComponent.accuracyRingSize
   }
 
-  Crosshair {
+  MMCrosshair {
     id: crosshair
 
     anchors.fill: parent

app/qml/map/SplittingTools.qml

@@ -16,6 +16,7 @@ import lc 1.0
 
 import "../"
 import "../components"
+import "./components"
 
 /**
   * SplittingTools is a set of tools that are used during recording/editing of a geometry.
@@ -71,7 +72,7 @@ Item {
     geometry: __inputUtils.transformGeometryToMapWithLayer( mapTool.recordedGeometry, __activeLayer.vectorLayer, root.map.mapSettings )
   }
 
-  Crosshair {
+  MMCrosshair {
     id: crosshair
 
     anchors.fill: parent

app/qml/map/Crosshair.qml → app/qml/map/components/MMCrosshair.qml

@@ -65,7 +65,7 @@ Item {
       height: root.outerSize
       width: height
 
-      source: InputStyle.crosshairBakcgroundIcon
+      source: __style.crosshairBackgroundImage
       sourceSize.width: width
       sourceSize.height: height
     }
@@ -95,19 +95,19 @@ Item {
       height: root.outerSize
       width: height
 
-      source: InputStyle.crosshairForegroundIcon
+      source: __style.crosshairForegroundImage
       sourceSize.width: width
       sourceSize.height: height
     }
 
     ColorOverlay {
       anchors.fill: crosshairForeground
       source: crosshairForeground
-      color: snapUtils.snapped ? "#8a2be2" : __style.forestColor
+      color: snapUtils.snapped ? __style.snappingColor : __style.forestColor
     }
 
     Image {
-      id: crossCenterDot // Center dot - visible when not snapped
+      id: crossCenterDot // Center dot - visible when not snapped (green)
 
       x: root.screenPoint.x - width / 2
       y: root.screenPoint.y - height / 2
@@ -143,11 +143,11 @@ Item {
       sourceSize.width: width
       sourceSize.height: height
 
-      source: InputStyle.crosshairCenterDotIcon
+      source: __style.crosshairCenterImage
     }
 
     Image {
-      id: crossCenterPlus // Center dot - visible when not snapped
+      id: crossCenterPlus // Center plus - visible when not snapped (purple)
 
       x: root.screenPoint.x - width / 2
       y: root.screenPoint.y - height / 2
@@ -193,11 +193,12 @@ Item {
       sourceSize.width: width
       sourceSize.height: height
 
-      source: InputStyle.crosshairCenterPlusIcon
+      // Important: must be same color as __style.snappingColor
+      source: __style.crosshairPlusImage
     }
 
     Image {
-      id: crossCenterCircle // Center circle - visible when snapped to segment
+      id: crossCenterCircle // Center circle - visible when snapped to segment (purple)
 
       x: root.screenPoint.x - width / 2
       y: root.screenPoint.y - height / 2
@@ -233,7 +234,8 @@ Item {
       sourceSize.width: width
       sourceSize.height: height
 
-      source: InputStyle.crosshairCenterCircleIcon
+      // Important: must be same color as __style.snappingColor
+      source: __style.crosshairCircleImage
     }
 
     Connections {

gallery/qml/pages/ImagesPage.qml

@@ -95,6 +95,28 @@ ScrollView {
       }
     }
 
+    GroupBox {
+      title: "Crosshair components for MMCrosshair"
+      background: Rectangle {
+        color: __style.lightGreenColor
+        border.color: "gray"
+      }
+      label: Label {
+        color: "black"
+        text: parent.title
+        padding: 5
+      }
+
+      contentData: Column {
+        spacing: 10
+        Column { Image { source: __style.crosshairBackgroundImage } Text { text: "crosshairBackgroundImage" } }
+        Column { Image { source: __style.crosshairCenterImage } Text { text: "crosshairCenterImage" } }
+        Column { Image { source: __style.crosshairCircleImage } Text { text: "crosshairCircleImage" } }
+        Column { Image { source: __style.crosshairForegroundImage } Text { text: "crosshairForegroundImage" } }
+        Column { Image { source: __style.crosshairPlusImage } Text { text: "crosshairPlusImage" } }
+      }
+    }
+
     GroupBox {
       title: "Layers (QGIS)"
       background: Rectangle {

gallery/qml/pages/MapPage.qml

@@ -16,6 +16,7 @@ import QtPositioning
 import "../../app/qml/components"
 import "../../app/qml/map"
 import "../../app/qml/"
+import "../../app/qml/map/components"
 
 Page {
   id: pane