Addd scale slider

This commit is contained in:
Jaby 2025-03-03 20:28:46 +01:00
parent a62728db7b
commit 57f22a6d6c
2 changed files with 34 additions and 22 deletions

View File

@ -10,7 +10,7 @@ struct VRAMImage {
} }
export component MainTab inherits Rectangle { export component MainTab inherits Rectangle {
property <int> test_scale: 1; property <float> scale: 1.0;
in-out property <image> vram_bg; in-out property <image> vram_bg;
in-out property <[StandardListViewItem]> vram_files: []; in-out property <[StandardListViewItem]> vram_files: [];
in-out property <[VRAMImage]> vram_images: []; in-out property <[VRAMImage]> vram_images: [];
@ -30,8 +30,8 @@ export component MainTab inherits Rectangle {
VerticalLayout { VerticalLayout {
main_view := ScrollView { main_view := ScrollView {
width: rect.width/root.test_scale; width: rect.width/root.scale;
height: rect.height/root.test_scale; height: rect.height/root.scale;
viewport-x: 0; viewport-x: 0;
viewport-y: 0; viewport-y: 0;
viewport-width: rect.width; viewport-width: rect.width;
@ -49,7 +49,7 @@ export component MainTab inherits Rectangle {
img: vram_bg; img: vram_bg;
img_x: 0; img_x: 0;
img_y: 0; img_y: 0;
scale: test_scale; scale: scale;
} }
for vram_image[i] in root.vram_images: VRAMArea { for vram_image[i] in root.vram_images: VRAMArea {
@ -58,17 +58,17 @@ export component MainTab inherits Rectangle {
img: vram_image.img; img: vram_image.img;
img_x: vram_image.x; img_x: vram_image.x;
img_y: vram_image.y; img_y: vram_image.y;
scale: test_scale; scale: scale;
TouchArea { TouchArea {
x: ((parent.img_x + self.lines_crossed_x())*1px)*test_scale; x: ((parent.img_x + self.lines_crossed_x())*1px)*scale;
y: ((parent.img_y + self.lines_crossed_y())*1px)*test_scale; y: ((parent.img_y + self.lines_crossed_y())*1px)*scale;
width: ((parent.img.width + self.lines_crossed_width())*1px)*test_scale; width: ((parent.img.width + self.lines_crossed_width())*1px)*scale;
height: ((parent.img.height + self.lines_crossed_height())*1px)*test_scale; height: ((parent.img.height + self.lines_crossed_height())*1px)*scale;
mouse-cursor: grab; mouse-cursor: grab;
moved => { moved => {
self.mouse-cursor = MouseCursor.grabbing; self.mouse-cursor = MouseCursor.grabbing;
root.move_vram_image(i, ((self.mouse-x - self.pressed-x)/test_scale)/1px, ((self.mouse-y - self.pressed-y)/test_scale)/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_x.text = parent.img_x;
cur_sel_y.text = parent.img_y; cur_sel_y.text = parent.img_y;
} }
@ -105,14 +105,24 @@ 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 { HorizontalLayout {
padding: 4px; padding: 4px;
VerticalLayout { VerticalLayout {
alignment: center; alignment: center;
padding: 4px; padding-right: 4px;
Text { Text {
text: "Scale: " + slider.value; text: "Scale: " + round(slider.value) + "%";
} }
} }
slider := Slider { slider := Slider {
@ -122,7 +132,8 @@ export component MainTab inherits Rectangle {
value: 100.0; value: 100.0;
changed(value) => { changed(value) => {
root.test_scale = value/100.0; root.scale = round(value)/100.0;
main_view.update_viewport();
} }
} }
} }
@ -134,7 +145,7 @@ export component MainTab inherits Rectangle {
alignment: start; alignment: start;
padding: 4px; padding: 4px;
vram_files_list := StandardListView { vram_files_list := StandardListView {
width: background_image.width/root.test_scale/2; width: background_image.width/root.scale/2;
height: 128px; height: 128px;
model: root.vram_files; model: root.vram_files;

View File

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