2ndbeam
1a1f6dde83
- Replaced TabWidget mode selection with ComboBox - Moved Timeline out of record/review widgets - Added TimelineState struct - Set slint style to cosmic
103 lines
3.2 KiB
Text
103 lines
3.2 KiB
Text
import { Palette } from "theme.slint";
|
|
import { TimeString, Const } from "global.slint";
|
|
|
|
export struct TimelineEvent {
|
|
start: int,
|
|
duration: int,
|
|
finished: bool,
|
|
label: string,
|
|
color-id: int,
|
|
}
|
|
|
|
export struct TimelineState {
|
|
visible-time: int,
|
|
offset: int,
|
|
events: [TimelineEvent],
|
|
}
|
|
|
|
export component Timeline inherits Rectangle {
|
|
callback clicked <=> ta.clicked;
|
|
|
|
background: Palette.background;
|
|
|
|
in-out property<TimelineState> state;
|
|
property<int> visible-offset: max(state.offset, state.visible-time);
|
|
out property<int> max-offset: Const.max-offset;
|
|
|
|
ta := TouchArea {
|
|
preferred-width: 100%;
|
|
preferred-height: 100%;
|
|
}
|
|
|
|
border-width: 1px;
|
|
border-color: black;
|
|
Rectangle {
|
|
x: 0;
|
|
y: parent.height / 4;
|
|
z: 0;
|
|
width: parent.width;
|
|
height: parent.height / 2;
|
|
border-color: black;
|
|
border-width: 1px;
|
|
background: Palette.timeline;
|
|
}
|
|
|
|
Text {
|
|
x: 0;
|
|
y: parent.height - self.height;
|
|
text: TimeString.from(visible-offset - state.visible-time);
|
|
color: Palette.background-text;
|
|
}
|
|
|
|
Text {
|
|
x: parent.width - self.width;
|
|
y: parent.height - self.height;
|
|
text: TimeString.from(visible-offset);
|
|
color: Palette.background-text;
|
|
}
|
|
|
|
for event in state.events: timeline-event := Rectangle {
|
|
property<length> real-x: ((state.visible-time - (visible-offset - event.start)) / state.visible-time) * parent.width;
|
|
property<length> real-width: event.duration / state.visible-time * parent.width + min(real-x, 0);
|
|
x: max(real-x, 0);
|
|
y: parent.height / 4;
|
|
z: 1;
|
|
width: event.finished ?
|
|
min(parent.width - self.x, real-width) :
|
|
parent.width - self.x;
|
|
height: parent.height / 2;
|
|
visible: self.width > 0 && self.real-x < parent.width;
|
|
border-color: black;
|
|
border-width: 1px;
|
|
background: Palette.event-colors[event.color-id];
|
|
|
|
Text {
|
|
x: 0;
|
|
y: -self.height;
|
|
text: event.label;
|
|
visible: timeline-event.visible;
|
|
color: Palette.background-text;
|
|
}
|
|
start-txt := Text {
|
|
x: 0;
|
|
y: root.height - self.height - timeline-event.height;
|
|
text: timeline-event.x == timeline-event.real-x ?
|
|
TimeString.from(event.start) :
|
|
TimeString.from(visible-offset - state.visible-time);
|
|
visible: timeline-event.visible &&
|
|
(self.width * 2 < timeline-event.width ||
|
|
(!end-txt.visible && self.width < timeline-event.width));
|
|
color: Palette.event-text[event.color-id];
|
|
}
|
|
end-txt := Text {
|
|
x: timeline-event.width - self.width;
|
|
y: root.height - self.height - timeline-event.height;
|
|
text: timeline-event.x + timeline-event.real-width <= root.width ?
|
|
TimeString.from(event.start + event.duration) :
|
|
TimeString.from(visible-offset);
|
|
visible: timeline-event.visible && timeline-event.width - self.width * 2 > 0;
|
|
color: Palette.event-text[event.color-id];
|
|
}
|
|
}
|
|
@children
|
|
}
|