[ ] I have added additional features that should now be part of the PR template. I made the necessary changes to the template.
[ ] I have fixed a bug/the added functionality should not be part of the PR template.
- [x] I added a test/ tests.
[x] I have run all our tests and they still work.

PR Template

Features that still work in a new world

Interactive

[x] can be opened in the world
[x] is scrollable
[x] mouseDown on the leaves makes them darker, the cursor changes to a pointer
[x] mouseUp on the leaves makes them lighter again (it is expected that the color is not green anymore)
[x] hovering over the leaves shows a tooltip after a while, which goes away when moving away
[x] hovering over the clouds blurs them
[x] moving the mouse away from the clouds removes the blur
[x] the interactive can be resized by a fixed aspect ratio
[x] after resizing to have a bigger interactive the sun is bigger and still moves to about half of the interactive width
[x] can be saved
[x] can be bundled

Interactive and editor

[x] a new scrollytelling can be created with a button
[x] can be loaded in the editor via drag and drop
[x] an interactive can be grabbed out of the editor and placed in the world with both the editor and interactive still working. The editor is cleared

TimelineLayer

[x] one can bring the background layer to the front via drag and drop and the tree is not visible afterwards
[x] the info labels change accordingly
[x] the background layer can now be moved down via the context menu of the layer info
[x] a layer may be removed, its sequences will not be visible anymore and the layer is removed from the editor
[x] a layer can be hidden with a click on the eye icon. The sequences in that layer will no longer be shown in the interactive
[x] a new layer can be created, it will appear at the top
[x] the sky sequence can be dragged into the new layer
[x] the layer can be dragged under the background layer

TimelineCursor

[x] scrolls when scrolling in the interactive
[x] with open interactive, scroll position (and cursor position) may be changed with arrow keys
[x] the number in the menubar is consistent with the cursor position
[x] there is a scale beneath the cursor head
- [x] the length is consistent with the active area
- [x] the scale will adapt to the current zoom
[x] the cursor head will always be visible
[x] the cursor is only visible when the scroll position is in the displayed scroll interval

Sequences

Selection of Sequences

[x] an unselected (default) sequence can be selected by clicking on it
[x] the selected sequence can be moved by one scroll unit with the left/right arrows and by 10 scroll units when holding shift simultaneously
[x] when clicking another sequence, the first sequence is no longer selected, but the second one is
[x] when selecting a sequence with the Alt key pressed, the previous selection is not removed
[x] when clicking while pressing Alt on a selected sequence, the sequence is deselected
[x] all sequences can be selected with Ctrl + A
[x] when all sequences are selected, Ctrl + A deselects all sequences
[x] in the standard sequence setup, clicking on the night background and then clicking on the tree sequence while pressing Shift selects tree sequence, night background and day background
[x] selected Sequences can be deleted with Del
[x] when multiple sequences are selected the context menu renames all of them
[x] having multiple sequences selected dragging one drags all and they snap in all possible positions

Sequences in GlobalTimeline

[x] the tree sequence is resizable both left and right, this can be reversed
[x] when 3 sequences are selected and one tries to resize all get deselected except the one that gets resized
[x] the day background sequence can't be dragged or resized onto the night sequence, instead it will snap to the night sequence and the snap indicator is shown
- [x] snapping may be disabled with the snap toggle button in the menu bar
- [x] toggling the button again enables snapping
[x] the day background sequence can be dragged to the middle layer onto a free spot
[x] the night sequence can't be dragged or resized beyond the left timeline bounds
[x] when clicking the "Add Sequence" button a sequence is in the hand, which can only be dropped on a timelineLayer and changes color when you are not able to place the sequence
- [x] this can be cancelled by pressing ESC
[x] right clicking on a sequence brings up a context menu
[x] clicking the buttons in the MenuBar sets the ScrollPosition to the beginning/end of the interactive/beginning/end of the next/previous sequence
[x] moving a sequence to the right will make the active area (light grey) larger
[x] when changing the zoom factor with the input field, the length of the sequences adapt accordingly, the cursor updates its position and the whole scrollytelling can still be scrolled through
[x] a sequence may be copied, and pasted at another spot in the timeline
- [x] pasting fails if there would not be enough space
- [x] otherwise pasting succeeds, the new sequence has copies of the old sequences morphs and animations, while the old sequence is untouched
[x] double clicking on the sky sequence brings you to a new tab named 'sky sequence' containing the sequence view

Sequence View

[x] there are three OverviewLayers (one per Morph in the sky sequence)
[x] they hold two to three keyframelines each
- [x] when changing the zoom, the keyframelines update accordingly
[x] clicking on the triangle expands those into two new layers with keyframes
[x] right-clicking a keyframe shows a context menu
- [x] right-clicking on the last keyframe of the sun's position animation, an option to select easing is shown
- [x] when clicked, a list of easings appears
- [x] when outBack is selected as the easing, the sun moves a little back at the end of the animation
[x] when expanding all three morphs the cursor is still visible over all layers
[x] creating a new keyframe (with the inspector) will update the layers accordingly
[x] clicking on a layer will select the corresponding morph in the inspector
[x] clicking on the first tab brings you back to the global timeline
[x] after scrolling in the sequence timeline, the cursor position in the global timeline has updated as well, when changing to this tab
[x] when changing to a sequence timelines tab, the scrollposition is always set to the beginning of this sequence
[x] when clicking on a single keyframe this one is highlighted with a blue border
[x] clicking the buttons in the MenuBar sets the ScrollPosition to the beginning/end of the sequence and to the prev/next keyframe
[x] when changing the zoom factor with the input field, the length of the active area adapt accordingly as well as the position of the keyframes and the cursor updates its position
[x] hovering over a property layer that animates position (e.g. position on sun), a graph in the interactive holder is shown that displays the positions of the keyframes and lines between them
[x] it is possible to select more than one keyframe using Alt
[x] when more than two keyframes are selected, the context menu allows changing of relative positions, where entering a relative position changes the position of all selected keyframes - this works with all menu items and is undoable as expected (one undo for all selected keyframes)
[x] having more than one keyframe selected and dragging one moves all keyframes, this is undoable
- [x] keyframes will snap to other keyframes, this can be disabled with the snap toggle in the menu bar
[x] it is possible to add a new morph to the interactive using the top bar
- [x] it is possible to add a lottie morph with the top bar
- [x] newly added lottie morphs already have an animation on the property "progress"
- [x] newly created lottie morphs visually show an animation
- [x] the newly created morph is also added to the timeline as an own layer
[x] it is possible to add a new morph to the interactive by grab-and-drop
- [x] when a morph is grabbed onto the interactive while the global timeline is active, an error message appears and the morph returns to its original position
[x] it is still possible to draw morphs in the world
[x] it is possible to remove a morph using the layer info context menu
[x] it is possible to remove a morph from the interactive by grabbing it
[x] it is possible to rename a morph
- [x] using the halo
- [x] using the context menu on the layer info (both these options affect labels and tooltips)
[x] context menu of OverviewLayers holds a Cut Morph Option and a Copy Morph Option
- [x] clicking cut morph will remove the layer and the morph immediately
- [x] in another sequenceview as well as on a layer-info, paste morph can be clicked in a context menu
- [x] the morph, its layers and keyframes appear
- [x] the interactive can still be scrolled and a keyframe in the pasted morph can be moved
- [x] the same morph can be pasted multiple times
[x] Through the layer info context menu, morphs may be rearranged so that the sun is in front of the cloud
- [x] Layers (Overview and Propertylayers) change accordingly

Inspector

[x] there is one tab for animations and one for styling
- [x] with no morph selected, the styling buttons are disabled
[x] when selecting a morph in the sequence via halo, that morph is shown in the inspector
- [x] the styling buttons in the styling tab work as expected
[x] when setting two keyframes for different position values at different scroll positions, an animation is created and can be viewed
[x] when scrolling in the scrollytelling, created keyframes are shown by a different icon in the inspector
[x] a keyframe can be overwritten in the inspector by navigating to the same scroll position (most easily done at scroll position 0) and adding a new keyframe

Interactive graph

[x] there is an interactive graph in the upper left corner
[x] clicking on any item takes you to it
- [x] clicking on a sequence takes you to the sequence tab
- [x] clicking on a keyframe takes you to that keyframe
- [x] clicking on a morph selects that morph with the inspector and takes you to the sequence tab
[x] typing in "sun" into the search field, sunrise (a keyframe) and sun (an Ellipse) are highlighted and visible (the hierarchy is exposed to show them)
- [x] when deleting the search term, the collapse state is restored to what it was when last there was no search term
[x] the search field is disabled when no interactive is loaded

Tabs

[x] the first tab can be renamed to 'aScrollytelling', this will also rename the interactive to 'aScrollytelling'
[x] the second tab can be renamed to 'sunrise', this will also rename the sequence in the global timeline to 'sunrise' and the respective timeline to 'sunrise timeline'
[x] the second tab can be closed with the 'X'
[x] timelines in different tabs can have different zoom factors that are reapplied when changing the tab

Timeline

[x] when scrolling in the interactive, the cursor indicator in the scrollbar of the timeline moves accordingly
[x] when the zoom factor of a timeline is changed, the scroller in the scrollbar changes its width accordingly
[x] moving in the scrolled timeline with Alt+Wheel changes the scroller position
[x] in a scrollable timeline normal scrolling will always move the layers and their information and nothing else

Search

[ ] searching for a keyframe takes you to that keyframe
- [ ] this works for keyframes in another tab
- [ ] this works for keyframes in a sequence with no tab
- [ ] this works for keyframes in another tab with zoom and expanded layers (so scrolling is necessary in both directions)

Features that still work when loading a saved editor

Interactive

[x] can be opened in the world
[x] is scrollable
[x] mouseDown on the leaves makes them darker, the cursor changes to a pointer
[x] mouseUp on the leaves makes them lighter again (it is expected that the color is not green anymore)
[x] hovering over the leaves shows a tooltip after a while, which goes away when moving away
[x] hovering over the clouds blurs them
[x] moving the mouse away from the clouds removes the blur
[x] the interactive can be resized by a fixed aspect ratio
[x] after resizing to have a bigger interactive the sun is bigger and still moves to about half of the interactive width
[x] can be saved
[x] can be bundled

Interactive and editor

[x] a new scrollytelling can be created with a button
[x] can be loaded in the editor via drag and drop
[x] an interactive can be grabbed out of the editor and placed in the world with both the editor and interactive still working. The editor is cleared

TimelineLayer

[x] one can bring the background layer to the front via drag and drop and the tree is not visible afterwards
[x] the info labels change accordingly
[x] the background layer can now be moved down via the context menu of the layer info
[x] a layer may be removed, its sequences will not be visible anymore and the layer is removed from the editor
[x] a layer can be hidden with a click on the eye icon. The sequences in that layer will no longer be shown in the interactive
[x] a new layer can be created, it will appear at the top
[x] the sky sequence can be dragged into the new layer
[x] the layer can be dragged under the background layer

TimelineCursor

[x] scrolls when scrolling in the interactive
[x] with open interactive, scroll position (and cursor position) may be changed with arrow keys
[x] the number in the menubar is consistent with the cursor position
[x] there is a scale beneath the cursor head
- [x] the length is consistent with the active area
- [x] the scale will adapt to the current zoom
[x] the cursor head will always be visible
[x] the cursor is only visible when the scroll position is in the displayed scroll interval

Sequences

Selection of Sequences

[x] an unselected (default) sequence can be selected by clicking on it
[x] the selected sequence can be moved by one scroll unit with the left/right arrows and by 10 scroll units when holding shift simultaneously
[x] when clicking another sequence, the first sequence is no longer selected, but the second one is
[x] when selecting a sequence with the Alt key pressed, the previous selection is not removed
[x] when clicking while pressing Alt on a selected sequence, the sequence is deselected
[x] all sequences can be selected with Ctrl + A
[x] when all sequences are selected, Ctrl + A deselects all sequences
[x] in the standard sequence setup, clicking on the night background and then clicking on the tree sequence while pressing Shift selects tree sequence, night background and day background
[x] selected Sequences can be deleted with Del
[x] when multiple sequences are selected the context menu renames all of them
[x] having multiple sequences selected dragging one drags all and they snap in all possible positions

Sequences in GlobalTimeline

[x] the tree sequence is resizable both left and right, this can be reversed
[x] when 3 sequences are selected and one tries to resize all get deselected except the one that gets resized
[x] the day background sequence can't be dragged or resized onto the night sequence, instead it will snap to the night sequence and the snap indicator is shown
- [x] snapping may be disabled with the snap toggle button in the menu bar
- [x] toggling the button again enables snapping
[x] the day background sequence can be dragged to the middle layer onto a free spot
[x] the night sequence can't be dragged or resized beyond the left timeline bounds
[x] when clicking the "Add Sequence" button a sequence is in the hand, which can only be dropped on a timelineLayer and changes color when you are not able to place the sequence
- [x] this can be cancelled by pressing ESC
[x] right clicking on a sequence brings up a context menu
[x] clicking the buttons in the MenuBar sets the ScrollPosition to the beginning/end of the interactive/beginning/end of the next/previous sequence
[x] moving a sequence to the right will make the active area (light grey) larger
[x] when changing the zoom factor with the input field, the length of the sequences adapt accordingly, the cursor updates its position and the whole scrollytelling can still be scrolled through
[x] a sequence may be copied, and pasted at another spot in the timeline
- [x] pasting fails if there would not be enough space
- [x] otherwise pasting succeeds, the new sequence has copies of the old sequences morphs and animations, while the old sequence is untouched
[x] double clicking on the sky sequence brings you to a new tab named 'sky sequence' containing the sequence view

Sequence View

[x] there are three OverviewLayers (one per Morph in the sky sequence)
[x] they hold two to three keyframelines each
- [x] when changing the zoom, the keyframelines update accordingly
[x] clicking on the triangle expands those into two new layers with keyframes
[x] right-clicking a keyframe shows a context menu
- [x] right-clicking on the last keyframe of the sun's position animation, an option to select easing is shown
- [x] when clicked, a list of easings appears
- [x] when outBack is selected as the easing, the sun moves a little back at the end of the animation
[x] when expanding all three morphs the cursor is still visible over all layers
[x] creating a new keyframe (with the inspector) will update the layers accordingly
[x] clicking on a layer will select the corresponding morph in the inspector
[x] clicking on the first tab brings you back to the global timeline
[x] after scrolling in the sequence timeline, the cursor position in the global timeline has updated as well, when changing to this tab
[x] when changing to a sequence timelines tab, the scrollposition is always set to the beginning of this sequence
[x] when clicking on a single keyframe this one is highlighted with a blue border
[x] clicking the buttons in the MenuBar sets the ScrollPosition to the beginning/end of the sequence and to the prev/next keyframe
[x] when changing the zoom factor with the input field, the length of the active area adapt accordingly as well as the position of the keyframes and the cursor updates its position
[x] hovering over a property layer that animates position (e.g. position on sun), a graph in the interactive holder is shown that displays the positions of the keyframes and lines between them
[x] it is possible to select more than one keyframe using Alt
[x] when more than two keyframes are selected, the context menu allows changing of relative positions, where entering a relative position changes the position of all selected keyframes - this works with all menu items and is undoable as expected (one undo for all selected keyframes)
[x] having more than one keyframe selected and dragging one moves all keyframes, this is undoable
- [x] keyframes will snap to other keyframes, this can be disabled with the snap toggle in the menu bar
[x] it is possible to add a new morph to the interactive using the top bar
- [x] it is possible to add a lottie morph with the top bar
- [x] newly added lottie morphs already have an animation on the property "progress"
- [x] newly created lottie morphs visually show an animation
- [x] the newly created morph is also added to the timeline as an own layer
[x] it is possible to add a new morph to the interactive by grab-and-drop
- [x] when a morph is grabbed onto the interactive while the global timeline is active, an error message appears and the morph returns to its original position
[x] it is still possible to draw morphs in the world
[x] it is possible to remove a morph using the layer info context menu
[x] it is possible to remove a morph from the interactive by grabbing it
[x] it is possible to rename a morph
- [x] using the halo
- [x] using the context menu on the layer info (both these options affect labels and tooltips)
[x] context menu of OverviewLayers holds a Cut Morph Option and a Copy Morph Option
- [x] clicking cut morph will remove the layer and the morph immediately
- [x] in another sequenceview as well as on a layer-info, paste morph can be clicked in a context menu
- [x] the morph, its layers and keyframes appear
- [x] the interactive can still be scrolled and a keyframe in the pasted morph can be moved
- [x] the same morph can be pasted multiple times
[x] Through the layer info context menu, morphs may be rearranged so that the sun is in front of the cloud
- [x] Layers (Overview and Propertylayers) change accordingly

Inspector

[x] there is one tab for animations and one for styling
- [x] with no morph selected, the styling buttons are disabled
[x] when selecting a morph in the sequence via halo, that morph is shown in the inspector
- [x] the styling buttons in the styling tab work as expected
[x] when setting two keyframes for different position values at different scroll positions, an animation is created and can be viewed
[x] when scrolling in the scrollytelling, created keyframes are shown by a different icon in the inspector
[x] a keyframe can be overwritten in the inspector by navigating to the same scroll position (most easily done at scroll position 0) and adding a new keyframe

Interactive graph

[x] there is an interactive graph in the upper left corner
[x] clicking on any item takes you to it
- [x] clicking on a sequence takes you to the sequence tab
- [x] clicking on a keyframe takes you to that keyframe
- [x] clicking on a morph selects that morph with the inspector and takes you to the sequence tab
[x] typing in "sun" into the search field, sunrise (a keyframe) and sun (an Ellipse) are highlighted and visible (the hierarchy is exposed to show them)
- [x] when deleting the search term, the collapse state is restored to what it was when last there was no search term
[x] the search field is disabled when no interactive is loaded

Tabs

[x] the first tab can be renamed to 'aScrollytelling', this will also rename the interactive to 'aScrollytelling'
[x] the second tab can be renamed to 'sunrise', this will also rename the sequence in the global timeline to 'sunrise' and the respective timeline to 'sunrise timeline'
[x] the second tab can be closed with the 'X'
[x] timelines in different tabs can have different zoom factors that are reapplied when changing the tab

Timeline

[x] when scrolling in the interactive, the cursor indicator in the scrollbar of the timeline moves accordingly
[x] when the zoom factor of a timeline is changed, the scroller in the scrollbar changes its width accordingly
[x] moving in the scrolled timeline with Alt+Wheel changes the scroller position
[x] in a scrollable timeline normal scrolling will always move the layers and their information and nothing else

Search

[ ] searching for a keyframe takes you to that keyframe
- [ ] this works for keyframes in another tab
- [ ] this works for keyframes in a sequence with no tab
- [ ] this works for keyframes in another tab with zoom and expanded layers (so scrolling is necessary in both directions)

hpi-swa-lab / qinoq

Sidebar integration #1056

PR Template

Features that still work in a new world

Interactive

Interactive and editor

TimelineLayer

TimelineCursor

Sequences

Selection of Sequences

Sequences in GlobalTimeline

Sequence View

Inspector

Interactive graph

Tabs

Timeline

Search

Features that still work when loading a saved editor

Interactive

Interactive and editor

TimelineLayer

TimelineCursor

Sequences

Selection of Sequences

Sequences in GlobalTimeline

Sequence View

Inspector

Interactive graph

Tabs

Timeline

Search