Update README to match current API and examples

Author: tilladam

README.md

@@ -56,7 +56,7 @@ path = "path/to/slint-node-editor"
 
 ```slint
 // In your main .slint file
-import { NodeEditor, BaseNode, Pin, Link, LinkData } from "@slint-node-editor/node-editor.slint";
+import { NodeEditor, BaseNode, Pin, Link, LinkData, PinTypes } from "@slint-node-editor/node-editor.slint";
 ```
 
 ### 3. Configure build.rs
@@ -78,10 +78,14 @@ fn main() {
 
 ```slint
 component Node inherits BaseNode {
-    Text { text: "My Node"; }
+    Text { text: "My Node"; color: white; }
     Pin {
         pin-type: PinTypes.input;
-        node-id: root.id;
+        node-id: root.node-id;
+        // Pass required context for drag handling
+        zoom: root.zoom;
+        node-screen-x: root.screen-x;
+        node-screen-y: root.screen-y;
     }
 }
 ```
@@ -101,10 +105,14 @@ export component MainWindow inherits Window {
 
         // Provide your node data as @children
         for node in nodes: Node {
-            id: node.id;
-            world-x: node.x;
-            world-y: node.y;
-            // ... other bindings
+            node-id: node.id;
+            world-x: node.x * 1px; // Convert float to length
+            world-y: node.y * 1px;
+            
+            // Pass viewport state for local coordinate calculation
+            zoom: editor.zoom;
+            pan-x: editor.pan-x;
+            pan-y: editor.pan-y;
         }
 
         // Implement callbacks (see Callbacks section below)
@@ -159,55 +167,56 @@ The library handles all transformations transparently.
 
 **Properties:**
 ```slint
-in-out property <float> pan-x;           // Pan offset (x)
-in-out property <float> pan-y;           // Pan offset (y)
+in-out property <length> pan-x;          // Pan offset (x)
+in-out property <length> pan-y;          // Pan offset (y)
 in-out property <float> zoom;            // Zoom factor (1.0 = 100%)
-in-out property <float> min-zoom: 0.1;   // Minimum zoom level
-in-out property <float> max-zoom: 5.0;   // Maximum zoom level
+in property <float> min-zoom: 0.1;       // Minimum zoom level
+in property <float> max-zoom: 3.0;       // Maximum zoom level
 
 in property <length> grid-spacing: 24px;       // Grid cell size
 in property <bool> grid-snapping: true;        // Enable snap-to-grid
-in property <color> grid-color: #e0e0e0;      // Grid line color
-in property <color> background-color: #f5f5f5; // Background color
+in property <color> grid-color: #404040;       // Grid line color
+in property <brush> background-color: #1a1a1a; // Background color
 
-in property <float> link-hover-distance: 10.0;  // Click tolerance for links
-in property <int> link-hit-samples: 20;         // Bezier samples for hit-testing
-in property <float> bezier-min-offset: 50.0;    // Min horizontal offset for curves
+in property <length> link-hover-distance: 8px; // Click tolerance for links
+in property <length> pin-hit-radius: 10px;     // Hit radius for pins
+in property <int> link-hit-samples: 20;        // Bezier samples for hit-testing
+in property <float> bezier-min-offset: 50.0;   // Min horizontal offset for curves
 
 // Minimap
 in property <bool> minimap-enabled: false;
-in property <MinimapPosition> minimap-position: top-right;
+in property <MinimapPosition> minimap-position: bottom-right;
 
 // Data bindings
 in property <[LinkData]> links;                 // Links to render
 in-out property <[int]> selected-node-ids;      // Selected nodes
 in-out property <[int]> selected-link-ids;      // Selected links
-in property <[MinimapNode]> minimap-nodes;      // Minimap data
-in property <float> graph-min-x;                // Graph bounds
-in property <float> graph-max-x;
-in property <float> graph-min-y;
-in property <float> graph-max-y;
+in property <[MinimapNode]> minimap-nodes: [];  // Minimap data
+in-out property <length> graph-min-x;           // Graph bounds
+in-out property <length> graph-max-x;
+in-out property <length> graph-min-y;
+in-out property <length> graph-max-y;
 
 // State outputs (read-only)
 out property <bool> is-selecting;               // User is dragging selection box
-out property <float> selection-x;               // Selection box position
-out property <float> selection-y;
-out property <float> selection-width;           // Selection box size
-out property <float> selection-height;
+out property <length> selection-x;              // Selection box position
+out property <length> selection-y;
+out property <length> selection-width;          // Selection box size
+out property <length> selection-height;
 
 out property <bool> is-creating-link;           // User is dragging to create link
-out property <float> link-start-x;              // Link preview start
-out property <float> link-start-y;
-out property <float> link-end-x;                // Link preview end
-out property <float> link-end-y;
+out property <length> link-start-x;             // Link preview start
+out property <length> link-start-y;
+out property <length> link-end-x;               // Link preview end
+out property <length> link-end-y;
 out property <int> link-start-pin-id;           // Which pin started the link
 
 out property <bool> is-dragging;                // User is dragging nodes
-out property <float> drag-offset-x;             // Drag delta
-out property <float> drag-offset-y;
+out property <length> drag-offset-x;            // Drag delta
+out property <length> drag-offset-y;
 
-out property <int> context-menu-x;              // Right-click position
-out property <int> context-menu-y;
+out property <length> context-menu-x;           // Right-click position
+out property <length> context-menu-y;
 
 out property <int> hovered-link-id;             // Link under mouse
 out property <int> selection-version;           // Version counter for cache invalidation
@@ -219,21 +228,21 @@ All these callbacks delegate expensive operations to your Rust code:
 
 ```slint
 /// Compute which pin is at screen position (x, y)
-callback compute-pin-at(x: float, y: float) -> int;
+callback compute-pin-at(x: length, y: length) -> int;
 
 /// Compute which link is at screen position (x, y)
-callback compute-link-at(x: float, y: float) -> int;
+callback compute-link-at(x: length, y: length) -> int;
 
 /// Find all nodes in a selection box (world coordinates)
-callback compute-box-selection(x: float, y: float, w: float, h: float) -> [int];
+callback compute-box-selection(x: length, y: length, w: length, h: length) -> [int];
 
 /// Find all links in a selection box (world coordinates)
-callback compute-link-box-selection(x: float, y: float, w: float, h: float) -> [int];
+callback compute-link-box-selection(x: length, y: length, w: length, h: length) -> [int];
 
 /// Generate SVG path for link preview (during drag-to-link)
 callback compute-link-preview-path(
-    start-x: float, start-y: float,
-    end-x: float, end-y: float
+    start-x: length, start-y: length,
+    end-x: length, end-y: length
 ) -> string;
 
 /// Compute SVG path for a link between two pins
@@ -292,21 +301,21 @@ callback delete-selected();
 callback add-node-requested();
 
 /// User right-clicked (context menu)
-callback context-menu-requested(x: float, y: float);
+callback context-menu-requested();
 
 /// User finished dragging nodes
 callback node-drag-ended(delta-x: float, delta-y: float);
 
 /// Node geometry changed (position or size)
-callback node-rect-changed(id: int, x: float, y: float, w: float, h: float);
+callback node-rect-changed(id: int, x: length, y: length, w: length, h: length);
 
 /// Pin geometry changed (position relative to node)
 callback pin-position-changed(
     pin-id: int,
     node-id: int,
     pin-type: int,
-    rel-x: float,
-    rel-y: float
+    rel-x: length,
+    rel-y: length
 );
 ```
 
@@ -316,12 +325,13 @@ Base component for creating custom nodes. Provides drag handling and selection.
 
 **Properties:**
 ```slint
-in property <int> id;                  // Unique node ID
-in-out property <float> world-x;       // X position in graph space
-in-out property <float> world-y;       // Y position in graph space
-in property <float> width;             // Node width
-in property <float> height;            // Node height
+in property <int> node-id;             // Unique node ID
+in property <length> world-x;          // X position in graph space
+in property <length> world-y;          // Y position in graph space
 in property <bool> selected: false;    // Selection state
+in property <float> zoom;              // Required for view calculation
+in property <length> pan-x;            // Required for view calculation
+in property <length> pan-y;            // Required for view calculation
 ```
 
 ### Pin
@@ -330,12 +340,14 @@ Represents a connection point on a node.
 
 **Properties:**
 ```slint
-in property <int> id;           // Pin ID (encoded by application)
-in property <int> node-id;      // Parent node ID
-in property <int> pin-type;     // PinTypes.input or .output (or custom)
-in property <color> color: #999;
-in property <float> rel-x;      // Relative X (from node top-left)
-in property <float> rel-y;      // Relative Y (from node top-left)
+in property <int> pin-id;           // Pin ID (encoded by application)
+in property <int> node-id;          // Parent node ID
+in property <int> pin-type;         // PinTypes.input or .output (or custom)
+in property <color> base-color: #888;
+in property <color> hover-color: #aaa;
+in property <float> zoom;           // Required for scaling
+in property <length> node-screen-x; // Required for drag handling
+in property <length> node-screen-y; // Required for drag handling
 ```
 
 ### Link
@@ -345,7 +357,8 @@ Renders a Bezier curve between two pins. Used internally by `NodeEditor` but can
 **Properties:**
 ```slint
 in property <string> path-commands;        // SVG path (e.g., "M 0 0 C 50 50 100 100")
-in property <color> color: #666;
+in property <color> link-color: #888;
+in property <length> line-width: 2px;
 in property <bool> selected: false;
 in property <bool> hovered: false;
 ```