[qml] Shape/Viewer: Change shape and name label in PointLayer

Author: gregoire-dl

meshroom/ui/qml/Shapes/Viewer/Layers/PointLayer.qml

@@ -1,4 +1,7 @@
 import QtQuick
+import QtQuick.Shapes
+
+import "Utils" as LayerUtils
 
 /**
 * PointLayer
@@ -15,65 +18,81 @@ import QtQuick
 BaseLayer {
     id: pointLayer
 
-    // Point size from scaled properties.size
-    property real pointSize: pointLayer.getScaledPointSize()
+    // Point size and half size
+    property real pointSize: Math.max(1.0, 12.0 * scaleRatio)
+    property real pointHalfSize: pointSize * 0.5
 
     // Point shape
-    Rectangle {
-        id: draggablePoint
-        x: pointLayer.observation.x - (pointSize * 0.5)
-        y: pointLayer.observation.y - (pointSize * 0.5)
-        width: pointSize
-        height: width
-        color: selected ? "#ffffff" : pointLayer.properties.color || pointLayer.defaultColor
-
-        // Selection click
-        TapHandler {
+    Shape {
+        id: draggableShape
+
+        // Center cross path
+        ShapePath {
+            fillColor: "transparent"
+            strokeColor: selected ? "#ffffff" : pointLayer.properties.color || pointLayer.defaultColor
+            strokeWidth: getScaledStrokeWidth()
+
+            PathMove { x: pointLayer.observation.x - pointSize; y: pointLayer.observation.y }
+            PathLine { x: pointLayer.observation.x + pointSize; y: pointLayer.observation.y }
+            PathMove { x: pointLayer.observation.x; y: pointLayer.observation.y - pointSize }
+            PathLine { x: pointLayer.observation.x; y: pointLayer.observation.y + pointSize }
+        }
+
+        // Selection area
+        MouseArea  {
+            x: handleCenter.x - pointSize
+            y: handleCenter.y - pointSize
+            width: pointSize * 2
+            height: pointSize * 2
             acceptedButtons: Qt.LeftButton
-            gesturePolicy: TapHandler.WithinBounds
-            grabPermissions: PointerHandler.CanTakeOverFromAnything
-            margin: pointSize
-            onTapped: selectionRequested()
+            cursorShape: pointLayer.editable ? Qt.PointingHandCursor : Qt.ArrowCursor
+            onClicked: selectionRequested()
             enabled: pointLayer.editable && !pointLayer.selected
         }
-        
-        // Selection hover
-        HoverHandler {
-            cursorShape: pointLayer.selected ? Qt.SizeAllCursor : Qt.PointingHandCursor
-            grabPermissions: PointerHandler.CanTakeOverFromAnything
-            margin: pointSize
-            enabled: pointLayer.editable
-        }
 
-        // Drag
-        DragHandler {
-            target: draggablePoint
+        // Handle for point center
+        LayerUtils.Handle {
+            id: handleCenter
+            x: pointLayer.observation.x || 0
+            y: pointLayer.observation.y || 0
+            size: getScaledHandleSize()
+            target: draggableShape
             cursorShape: Qt.SizeAllCursor
-            enabled: pointLayer.editable && pointLayer.selected
-            onActiveChanged: { 
-                if (!active) { 
-                    _reconstruction.setObservationFromName(pointLayer.name, _reconstruction.selectedViewId, { 
-                        x: draggablePoint.x + pointSize * 0.5, 
-                        y: draggablePoint.y + pointSize * 0.5
-                    })
-                }
+            visible: pointLayer.editable && pointLayer.selected
+            onMoved: {
+                _reconstruction.setObservationFromName(pointLayer.name, _reconstruction.selectedViewId, { 
+                    x: handleCenter.x + draggableShape.x, 
+                    y: handleCenter.y + draggableShape.y
+                })
             }
         }
 
         // Point name
-        Text {
-            x: pointSize
-            y: pointSize
-            text: {
-                const lastDotIndex = pointLayer.name.lastIndexOf('.')
-                if(lastDotIndex < 0)
-                    return pointLayer.name
-                return pointLayer.name.substring(lastDotIndex + 1);
+        Rectangle {
+            x: (pointLayer.observation.x || 0) + pointHalfSize
+            y: (pointLayer.observation.y || 0) + pointHalfSize
+            width: pointName.width
+            height: pointName.height
+            visible: pointLayer.editable && scaleRatio > 0.2
+            color: selected ? palette.shadow : palette.window
+
+            Text {
+                id: pointName
+                text: {
+                    if(pointLayer.properties.userName && pointLayer.properties.userName.length > 0)
+                        return pointLayer.properties.userName
+                    const lastDotIndex = pointLayer.name.lastIndexOf('.')
+                    if(lastDotIndex < 0)
+                        return pointLayer.name
+                    return pointLayer.name.substring(lastDotIndex + 1);
+                }
+                color: selected ? palette.highlightedText : palette.text
+                padding: 0
+                rightPadding: Math.max(1, 2 * scaleRatio)
+                leftPadding: rightPadding
+                wrapMode: Text.NoWrap 
+                font.pixelSize: getScaledFontSize()
             }
-            color: draggablePoint.color
-            wrapMode: Text.NoWrap 
-            font.pixelSize: getScaledFontSize()
-            visible: pointLayer.editable && scaleRatio > 0.1
         }
     }
 }