Implement dynamic axis drawing.

Dynamic axis drawing saves the need to arbitrarily draw a rectangle size and hope it's large enough to support dragging and scaling.
ASxa86 · Feb 18, 2025 · 1a01603 · 1a01603
1 parent ce04bfa
commit 1a01603
Showing 1 changed file with 76 additions and 74 deletions.
diff --git a/module/aspire/ItemView.qml b/module/aspire/ItemView.qml
@@ -2,11 +2,19 @@ import QtQuick
 import Qt.labs.animation
 import aspire
 
-Item {
+// This becomes a Pane at some point?
+Rectangle {
     id: view
 
+    color: "darkcyan"
     clip: true
 
+    property int axisWidth: 2
+    property color axisColor: "darkkhaki"
+
+    property int windowWidth: 2
+    property color windowColor: "darkolivegreen"
+
     property alias sourceComponent: loader.sourceComponent
     property alias source: loader.source
     property alias item: loader.item
@@ -16,99 +24,81 @@ Item {
         Aspire.writeFile(view.item, file);
     }
 
-    Rectangle {
-        id: container
+    onWidthChanged: horizontal.update()
+    onHeightChanged: vertical.update()
 
-        color: "steelblue"
-        x: -center.x
-        y: -center.y
-        width: (parent.width / 0.005) * 3
-        height: (parent.height / 0.005) * 3
+    Item {
+        id: container
+        width: 1280
+        height: 720
 
-        property point center: Qt.point(width / 2, height / 2)
+        onXChanged: horizontal.update()
+        onYChanged: vertical.update()
 
         // Draw axis lines
         Rectangle {
             id: vertical
-            color: "darkturquoise"
-            width: 2 / parent.scale
-            height: parent.height
-            anchors.centerIn: parent
+            color: view.axisColor
+            width: view.axisWidth / parent.scale
+            anchors.left: parent.left
+
+            function update() {
+                vertical.y = container.mapFromItem(view, 0, 0).y;
+                vertical.height = container.mapFromItem(view, view.width, view.height).y - vertical.y;
+            }
         }
 
         Rectangle {
             id: horizontal
-            color: "darkturquoise"
-            width: parent.width
-            height: 2 / parent.scale
-            anchors.centerIn: parent
-        }
-
-
-        // Define a root item representing the window so that child items loaded by the loader
-        // will have positions defined relative to a window if/when they are loaded into a separate
-        // application.
-        Item {
-            id: window
-            width: 1280
-            height: 720
-
-            // Anchor the window representation's top left corner
-            // to the center of the container.
-            anchors.left: parent.left
-            anchors.leftMargin: parent.center.x
+            color: view.axisColor
+            height: view.axisWidth / parent.scale
             anchors.top: parent.top
-            anchors.topMargin: parent.center.y
-
-            // Draw the bounding box of the window.
-            Rectangle {
-                id: top
-                color: "darkslategray"
-                anchors.top: parent.top
-                width: parent.width
-                height: 2 / container.scale
-            }
 
-            Rectangle {
-                id: left
-                color: "darkslategray"
-                anchors.left: parent.left
-                width: 2 / container.scale
-                height: parent.height
-            }
-
-            Rectangle {
-                id: bottom
-                color: "darkslategray"
-                anchors.bottom: parent.bottom
-                width: parent.width
-                height: 2 / container.scale
+            function update() {
+                horizontal.x = container.mapFromItem(view, 0, 0).x;
+                horizontal.width = container.mapFromItem(view, view.width, view.height).x - horizontal.x;
             }
+        }
 
-            Rectangle {
-                id: right
-                color: "darkslategray"
-                anchors.right: parent.right
-                width: 2 / container.scale
-                height: parent.height
-            }
+        // Draw the bounding box of the window.
+        Rectangle {
+            id: top
+            color: view.windowColor
+            anchors.top: parent.top
+            width: parent.width
+            height: view.windowWidth / container.scale
+        }
 
-            Loader {
-                id: loader
+        Rectangle {
+            id: left
+            color: view.windowColor
+            anchors.left: parent.left
+            width: view.windowWidth / container.scale
+            height: parent.height
+        }
 
-                onLoaded: {
-                    console.log("Loaded: ", loader.source);
-                }
-            }
+        Rectangle {
+            id: bottom
+            color: view.windowColor
+            anchors.bottom: parent.bottom
+            width: parent.width
+            height: view.windowWidth / container.scale
         }
 
-        WheelHandler {
-            property: "scale"
+        Rectangle {
+            id: right
+            color: view.windowColor
+            anchors.right: parent.right
+            width: view.windowWidth / container.scale
+            height: parent.height
         }
 
-        DragHandler {
-            id: dragHandler
-            acceptedButtons: Qt.MiddleButton
+        Loader {
+            id: loader
+
+            onLoaded: {
+                console.log("Loaded: ", loader.source);
+            }
         }
 
         BoundaryRule on scale {
@@ -117,6 +107,18 @@ Item {
         }
     }
 
+    WheelHandler {
+        property: "scale"
+        target: container
+    }
+
+    DragHandler {
+        id: dragHandler
+        acceptedButtons: Qt.MiddleButton
+        target: container
+        snapMode: DragHandler.NoSnap
+    }
+
     MouseArea {
         id: mouseArea