Addd scale slider

src/Tools/tim_tool/ui/tab/main-tab.slint

@@ -1,5 +1,5 @@
 import { VRAMArea } from "../vram-components.slint";
-import { Button, ComboBox, GroupBox, StandardListView, LineEdit } from "std-widgets.slint";
+import { Button, ComboBox, GroupBox, StandardListView, LineEdit, ScrollView, Slider } from "std-widgets.slint";
 
 struct VRAMImage {
     img:           image,
@@ -10,6 +10,7 @@ struct VRAMImage {
 }
 
 export component MainTab inherits Rectangle {
+    property        <float>                  scale: 1.0;
     in-out property <image>                  vram_bg;
     in-out property <[StandardListViewItem]> vram_files:  [];
     in-out property <[VRAMImage]>            vram_images: [];
@@ -25,9 +26,18 @@ export component MainTab inherits Rectangle {
         title: "VRAM Layout";
         x:      4px;
         y:      4px;
+        width:  main_view.width  + 2*main_view.x;
         
         VerticalLayout {
-            background_rect := Rectangle {
+            main_view := ScrollView {
+                width:           rect.width/root.scale;
+                height:          rect.height/root.scale;
+                viewport-x:      0;
+                viewport-y:      0;
+                viewport-width:  rect.width;
+                viewport-height: rect.height;
+
+                rect := Rectangle {
                     width:  background_image.width  + root.get_border_width()*2px;
                     height: background_image.height + root.get_border_width()*2px;
                     border-width: root.get_border_width()*1px;
@@ -39,6 +49,7 @@ export component MainTab inherits Rectangle {
                         img:   vram_bg;
                         img_x: 0;
                         img_y: 0;
+                        scale: scale;
                     }
     
                     for vram_image[i] in root.vram_images: VRAMArea {
@@ -47,15 +58,17 @@ export component MainTab inherits Rectangle {
                         img:   vram_image.img;
                         img_x: vram_image.x;
                         img_y: vram_image.y;
+                        scale: scale;
+    
                         TouchArea {
-                        x:      (parent.img_x + self.lines_crossed_x())*1px;
+                            x:      ((parent.img_x + self.lines_crossed_x())*1px)*scale;
-                        y:      (parent.img_y + self.lines_crossed_y())*1px;
+                            y:      ((parent.img_y + self.lines_crossed_y())*1px)*scale;
-                        width:  (parent.img.width  + self.lines_crossed_width())*1px;
+                            width:  ((parent.img.width  + self.lines_crossed_width())*1px)*scale;
-                        height: (parent.img.height + self.lines_crossed_height())*1px;
+                            height: ((parent.img.height + self.lines_crossed_height())*1px)*scale;
                             mouse-cursor: grab;
                             moved => {
                                 self.mouse-cursor = MouseCursor.grabbing;
-                            root.move_vram_image(i, (self.mouse-x - self.pressed-x)/1px, (self.mouse-y - self.pressed-y)/1px);
+                                root.move_vram_image(i, ((self.mouse-x - self.pressed-x)/scale)/1px, ((self.mouse-y - self.pressed-y)/scale)/1px);
                                 cur_sel_x.text = parent.img_x;
                                 cur_sel_y.text = parent.img_y;
                             }
@@ -92,6 +105,38 @@ export component MainTab inherits Rectangle {
                         }
                     }
                 }
+
+                function update_viewport() {
+                    if abs(self.viewport-x) + self.width > self.viewport-width {
+                        self.viewport-x = 0;
+                    }
+
+                    if abs(self.viewport-y) + self.height > self.viewport-height {
+                        self.viewport-y = 0;
+                    }
+                }
+            }
+            HorizontalLayout {
+                padding: 4px;
+                VerticalLayout {
+                    alignment:     center;
+                    padding-right: 4px;
+                    Text {
+                        text: "Scale: " + round(slider.value) + "%";
+                    }    
+                }
+                slider := Slider {
+                    minimum: 100.0;
+                    maximum: 400.0;
+                    step:    1.0;
+                    value:   100.0;
+
+                    changed(value) => {
+                        root.scale = round(value)/100.0;
+                        main_view.update_viewport();
+                    }
+                }
+            }
             HorizontalLayout {
                 padding: 4px;
                 GroupBox {
@@ -100,7 +145,7 @@ export component MainTab inherits Rectangle {
                         alignment: start;
                         padding: 4px;
                         vram_files_list := StandardListView {
-                            width:  background_image.width/2;
+                            width:  background_image.width/root.scale/2;
                             height: 128px;
                             model:  root.vram_files;
 

src/Tools/tim_tool/ui/vram-components.slint

@@ -3,14 +3,18 @@ component VRAMSegment inherits Rectangle {
     in property <image> img;
     in property <int>   clip_x;
     in property <int>   clip_y;
+    in property <float> scale: 1.0;
 
-    width:  64px;
+    width:  64px*scale;
-    height: 256px;
+    height: 256px*scale;
     clip:   true;
     Image {
         source:          img;
-        x:      -root.clip_x*1px;
+        x:               -root.clip_x*1px*scale;
-        y:      -root.clip_y*1px;
+        y:               -root.clip_y*1px*scale;
+        width:           img.width*1px*scale;
+        height:          img.height*1px*scale;
+        image-rendering: pixelated;
     }
 }
 
@@ -18,17 +22,19 @@ export component VRAMArea inherits Rectangle {
     in property <image> img;
     in property <int>   img_x;
     in property <int>   img_y;
+    in property <float> scale: 1.0;
 
-    width:  (64*16+15)*1px;
+    width:  ((64*16+15)*1px)*scale;
-    height: (256*2+1)*1px;
+    height: ((256*2+1)*1px)*scale;
 
     for idx in 32 : VRAMSegment {
-        x: root.get_x(idx)*(64px  + 1px);
+        x: (root.get_x(idx)*(64px  + 1px))*scale;
-        y: root.get_y(idx)*(256px + 1px);
+        y: (root.get_y(idx)*(256px + 1px))*scale;
 
         img: img;
         clip_x: (root.get_x(idx)*64)  - root.img_x;
         clip_y: (root.get_y(idx)*256) - root.img_y;
+        scale:  root.scale;
     }
 
     function get_x(idx: int) -> int {