// Copyright © SixtyFPS GmbH // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial import { ListItem, ScrollView } from "std-widgets-impl.slint"; export component ListView inherits ScrollView { @children } component StandardListViewBase inherits ListView { in property <[StandardListViewItem]> model; in-out property current-item: -1; callback current-item-changed(/* current-item */ int); callback item-pointer-event( /* item-index */ int, /* event */ PointerEvent, /* absolute mouse position */ Point); public function set-current-item(index: int) { if (index < 0 || index >= model.length) { return; } bring-into-view(index); current-item = index; focus-item = index; current-item-changed(current-item); } private property item-height: self.viewport-height / self.model.length; private property into-view-item: 0; private property into-view-item-y: root.item-y(root.into-view-item); private property current-item-y: root.item-y(root.focus-item); private property focus-item: 0; pure function first-visible-item() -> int { return min(root.model.length - 1, max(0, round(-root.viewport-y / root.item-height))); } pure function item-y(index: int) -> length { return root.viewport-y + index * root.item-height; } function bring-into-view(index: int) { if (index < 0 || index >= model.length) { return; } into-view-item = index; if (into-view-item-y < 0) { self.viewport-y += 0 - into-view-item-y; } if (into-view-item-y + item-height > self.visible-height) { self.viewport-y -= into-view-item-y + item-height - self.visible-height; } } protected function focus-up() { root.set-focus-item(root.focus-item - 1); } protected function focus-down() { root.set-focus-item(root.focus-item + 1); } protected function select-focus-item() { root.set-current-item(root.focus-item); } protected function focus-current-item() { root.focus-item = max(0, root.current-item); if (root.current-item-y + root.item-height < 0 || root.current-item-y > root.height) { root.focus-item = root.first-visible-item(); } } protected function set-focus-item(index: int) { root.focus-item = min(root.model.length - 1, max(0, index)); root.bring-into-view(root.focus-item); } for item[index] in root.model : ListItem { height: self.min-height; item: item; index: index; is-selected: index == root.current-item; has-focus: root.has-focus && index == root.focus-item; has-hover: i-touch-area.has-hover; pressed: i-touch-area.pressed; pressed-x: i-touch-area.pressed-x; pressed-y: i-touch-area.pressed-y; i-touch-area := TouchArea { clicked => { root.set-current-item(index); } pointer-event(pe) => { root.item-pointer-event(index, pe, { x: self.absolute-position.x + self.mouse-x - root.absolute-position.x, y: self.absolute-position.y + self.mouse-y - root.absolute-position.y, }); } } } } export component StandardListView inherits StandardListViewBase { forward-focus: i-focus-scope; i-focus-scope := FocusScope { x: 0; width: 0; // Do not react on clicks focus-changed-event => { root.focus-current-item(); root.has-focus = self.has-focus; } key-pressed(event) => { if (event.text == Key.UpArrow) { root.focus-up(); return accept; } else if (event.text == Key.DownArrow) { root.focus-down(); return accept; }else if (event.text == Key.Return) { root.select-focus-item(); return accept; } reject } } }