generated from city-unit/st-extension-example
-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathtimeline.html
206 lines (204 loc) · 17.5 KB
/
timeline.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<div class="timeline-view-settings">
<div class="inline-drawer">
<div class="inline-drawer-toggle inline-drawer-header">
<b>Timelines</b>
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
</div>
<div class="inline-drawer-content">
<div class="timeline-view-settings_block flex-container">
<label for="tl_hover_tooltip_fixed" title="Always show the node tooltip at the bottom left of the timeline view. When off, show it near the node." data-i18n="[title]Always show the node tooltip at the bottom left of the timeline view. When off, show it near the node.">Fixed Position for Tooltip</label>
<input id="tl_hover_tooltip_fixed" type="checkbox" />
</div>
<div class="timeline-view-settings_block flex-container">
<label for="tl_tooltip_fixed" title="Always show the node full info panel at the bottom left of the timeline view. When off, show it near the node." data-i18n="[title]Always show the node full info panel at the bottom left of the timeline view. When off, show it near the node.">Fixed Position for Full Info Panel</label>
<input id="tl_tooltip_fixed" type="checkbox" />
</div>
<div class="timeline-view-settings_block flex-container">
<label for="tl_gpu_acceleration" title="Use GPU acceleration for positioning the full info panel that appears when you click a node. If the tooltip arrow tends to disappear, turning this off may help." data-i18n="[title]Use GPU acceleration for positioning the full info panel that appears when you click a node. If the tooltip arrow tends to disappear, turning this off may help.">GPU Accelerated Full Info Panel</label>
<input id="tl_gpu_acceleration" type="checkbox" />
</div>
<div class="timeline-view-settings_block flex-container">
<input value="Style Settings" class="menu_button" type="submit" id="toggleStyleSettings" title="Settings for the visual appearance of the Timelines graph." data-i18n="[title]Settings for the visual appearance of the Timelines graph.">
</div>
<!-- The collapsible style settings section -->
<div id="styleSettingsArea" class="hidden">
<div class="timeline-view-settings_block flex-container">
<label for="tl_use_chat_colors" title="Use the colors of the ST GUI theme, instead of the colors configured in Color Settings specifically for this extension." data-i18n="[title]Use the colors of the ST GUI theme, instead of the colors configured in Color Settings specifically for this extension.">Use UI Theme</label>
<input id="tl_use_chat_colors" type="checkbox" />
</div>
<div class="timeline-view-settings_block flex-container">
<label for="tl_show_legend" title="Show a legend for colors corresponding to different characters and chat checkpoints." data-i18n="[title]Show a legend for colors corresponding to different characters and chat checkpoints.">Show Legend</label>
<input id="tl_show_legend" type="checkbox" />
</div>
<div class="timeline-view-settings_block flex-container">
<label for="tl_auto_expand_swipes" title="Expand swipe nodes when the timeline view first opens, and whenever the graph is refreshed. When off, you can expand them by long-pressing a node, or by pressing the Toggle Swipes button." data-i18n="[title]Expand swipe nodes when the timeline view first opens, and whenever the graph is refreshed. When off, you can expand them by long-pressing a node, or by pressing the Toggle Swipes button.">Auto-expand Swipe Nodes</label>
<input id="tl_auto_expand_swipes" type="checkbox" />
</div>
<div class="timeline-view-settings_block flex-container">
<label for="tl_swipe_scale" title="When enabled, nodes that have swipes splitting off of them will appear subtly larger, in addition to having the double border." data-i18n="[title]When enabled, nodes that have swipes splitting off of them will appear subtly larger, in addition to having the double border.">Scale Swipe Parent Nodes</label>
<input id="tl_swipe_scale" type="checkbox" />
</div>
<div class="timeline-view-settings_block flex-container">
<label for="tl_avatar_as_root" title="Show the AI character's avatar as the graph root node. When off, the root node is blank." data-i18n="[title]Show the AI character's avatar as the graph root node. When off, the root node is blank.">Avatar As Root Node</label>
<input id="tl_avatar_as_root" type="checkbox" />
</div>
<!-- DANGER Will Robinson: `onInputChange` in `index.js` depends on some specific things here to update the Timelines settings GUI correctly:
- The specific element IDs for the zoom settings trigger special handling; this is a group of five settings with non-trivial logic between them.
- The 'floatingpoint' class disables integer rounding for displaying the value of a setting.
-->
<div class="timeline-view-settings_block flex-container">
<label for="tl_zoom_current_chat">Zoom level when zooming to current chat (<span id="tl_zoom_current_chat_value"></span>)</label>
<input id="tl_zoom_current_chat" type="range" class="floatingpoint" min="0.1" max="10.0" step="0.1" />
</div>
<div class="timeline-view-settings_block flex-container">
<input id="tl_zoom_min_cb" type="checkbox" />
<label for="tl_zoom_min">Minimum zoom level (<span id="tl_zoom_min_value"></span>)</label>
<input id="tl_zoom_min" type="range" class="floatingpoint" min="0.1" max="10.0" step="0.1" />
</div>
<div class="timeline-view-settings_block flex-container">
<input id="tl_zoom_max_cb" type="checkbox" />
<label for="tl_zoom_max">Maximum zoom level (<span id="tl_zoom_max_value"></span>)</label>
<input id="tl_zoom_max" type="range" class="floatingpoint" min="0.1" max="10.0" step="0.1" />
</div>
<small>
All sizes are specified in pixels at zoom level 1.0. The size set here multiplied by the zoom level is the final on-screen size. <!-- See <a href="https://js.cytoscape.org/">Cytoscape documentation</a> for the exact meanings of the settings. -->
</small>
<div class="timeline-view-settings_block flex-container">
<label for="tl_node_width" title="Width of a node, in pixels at zoom level 1.0." data-i18n="[title]Width of a node, in pixels at zoom level 1.0.">Node Width (<span id="tl_node_width_value"></span>)</label>
<input id="tl_node_width" type="range" min="1" max="100" />
</div>
<div class="timeline-view-settings_block flex-container">
<label for="tl_node_height" title="Height of a node, in pixels at zoom level 1.0." data-i18n="[title]Height of a node, in pixels at zoom level 1.0.">Node Height (<span id="tl_node_height_value"></span>)</label>
<input id="tl_node_height" type="range" min="1" max="100" />
</div>
<div class="timeline-view-settings_block flex-container">
<label for="tl_node_separation" title="Separation between adjacent nodes in the same rank." data-i18n="[title]Separation between adjacent nodes in the same rank.">Node Separation (<span id="tl_node_separation_value"></span>)</label>
<input id="tl_node_separation" type="range" min="1" max="100" />
</div>
<div class="timeline-view-settings_block flex-container">
<label for="tl_edge_separation" title="Separation between adjacent edges in the same rank." data-i18n="[title]Separation between adjacent edges in the same rank.">Edge Separation (<span id="tl_edge_separation_value"></span>)</label>
<input id="tl_edge_separation" type="range" min="1" max="100" />
</div>
<div class="timeline-view-settings_block flex-container">
<label for="tl_rank_separation" title="Separation between each rank in the layout." data-i18n="[title]Separation between each rank in the layout.">Rank Separation (<span id="tl_rank_separation_value"></span>)</label>
<input id="tl_rank_separation" type="range" min="1" max="100" />
</div>
<div class="timeline-view-settings_block flex-container">
<label for="tl_spacing_factor" title="A multiplicative factor to expand the overall area that the nodes take up." data-i18n="[title]A multiplicative factor to expand the overall area that the nodes take up.">Spacing Factor (<span id="tl_spacing_factor_value"></span>)</label>
<input id="tl_spacing_factor" type="range" min="1" max="100" />
</div>
<div class="timeline-view-settings_block flex-container">
<label for="tl_node_ranker" title="How the automatic graph builder assigns a rank (layout depth) to graph nodes." data-i18n="[title]How the automatic graph builder assigns a rank (layout depth) to graph nodes.">Node Ranking Algorithm</label>
<select id="tl_node_ranker">
<option value="tight-tree">Tight Tree</option>
<option value="network-simplex">Network Simplex</option>
<option value="longest-path">Longest Path</option>
</select>
</div>
<div class="timeline-view-settings_block flex-container">
<label for="tl_node_shape" title="The visual appearance of a node in the graph." data-i18n="[title]The visual appearance of a node in the graph.">Node Shape</label>
<select id="tl_node_shape">
<option value="ellipse">Ellipse</option>
<option value="triangle">Triangle</option>
<option value="round-triangle">Round-Triangle</option>
<option value="rectangle">Rectangle</option>
<option value="round-rectangle">Round-Rectangle</option>
<option value="bottom-round-rectangle">Bottom-Round-Rectangle</option>
<option value="cut-rectangle">Cut-Rectangle</option>
<option value="barrel">Barrel</option>
<option value="rhomboid">Rhomboid</option>
<option value="right-rhomboid">Right-Rhomboid</option>
<option value="diamond">Diamond</option>
<option value="round-diamond">Round-Diamond</option>
<option value="pentagon">Pentagon</option>
<option value="round-pentagon">Round-Pentagon</option>
<option value="hexagon">Hexagon</option>
<option value="round-hexagon">Round-Hexagon</option>
<option value="concave-hexagon">Concave-Hexagon</option>
<option value="heptagon">Heptagon</option>
<option value="round-heptagon">Round-Heptagon</option>
<option value="octagon">Octagon</option>
<option value="round-octagon">Round-Octagon</option>
<option value="star">Star</option>
<option value="tag">Tag</option>
<option value="round-tag">Round-Tag</option>
<option value="vee">Vee</option>
</select>
</div>
<div class="timeline-view-settings_block flex-container">
<label for="tl_curve_style" title="Style and routing of graph edges." data-i18n="[title]Style and routing of graph edges.">Curve Style</label>
<select id="tl_curve_style">
<option value="haystack">Haystack</option>
<option value="straight">Straight</option>
<option value="straight-triangle">Straight-Triangle</option>
<option value="bezier">Bezier</option>
<option value="unbundled-bezier">Unbundled-Bezier</option>
<option value="segments">Segments</option>
<option value="taxi">Taxi</option>
</select>
</div>
<div class="timeline-view-settings_block flex-container">
<!-- Whatever that means. The phrase comes from the Cytoscape-Dagre README:
https://github.com/cytoscape/cytoscape.js-dagre
https://js.cytoscape.org/#layouts
-->
<label for="tl_align" title="Alignment for rank nodes." data-i18n="[title]Alignment for rank nodes.">Alignment</label>
<select id="tl_align">
<option value="UL">Upper Left</option>
<option value="UR">Upper Right</option>
<option value="DL">Down Left</option>
<option value="DR">Down Right</option>
</select>
</div>
<div class="timeline-view-settings_block flex-container">
<input value="Reset Settings" class="menu_button" type="submit" id="resetSettingsBtn" title="Reset all Timelines settings to their default values." data-i18n="[title]Reset all Timelines settings to their default values.">
</div>
</div>
<div class="timeline-view-settings_block flex-container">
<input value="Color Settings" class="menu_button" type="submit" id="toggleColorSettings" title="Color configuration for Timelines when 'Use UI Theme' in Style Settings is off." data-i18n="[title]Color configuration for Timelines when 'Use UI Theme' in Style Settings is off.">
</div>
<div id="colorSettingsArea" class="hidden">
<div class="timeline-view-settings_block flex-container">
<toolcool-color-picker id="bookmark-color-picker" value="#ff0000"></toolcool-color-picker>
<span data-i18n="Checkpoint Color">Checkpoint Node Border Color</span>
</div>
<div class="timeline-view-settings_block flex-container">
<toolcool-color-picker id="char-node-color-picker" value="#FFFFFF"></toolcool-color-picker>
<span data-i18n="Character Node Color">Character Node Color</span>
</div>
<div class="timeline-view-settings_block flex-container">
<toolcool-color-picker id="user-node-color-picker" value="#ADD8E6"></toolcool-color-picker>
<span data-i18n="User Node Color">User Node Color</span>
</div>
<div class="timeline-view-settings_block flex-container">
<toolcool-color-picker id="edge-color-picker" value="#555"></toolcool-color-picker>
<span data-i18n="Edge Color">Edge Color</span>
</div>
</div>
<div class="timeline-view-settings_block flex-container">
<input id="show_timeline_view" class="menu_button" type="submit" value="Show Timeline" title="Open the timeline view. Same as the slash command '/tl'." data-i18n="[title]Open the timeline view. Same as the slash command '/tl'." />
</div>
<!-- The Modal -->
<div class="timelines-modal-storage hidden"> <!-- A place in the DOM to store the modal when not in use -->
<div id="timelinesModal" class="modal"> <!-- The transparent outer modal, covering the whole viewport -->
<div id="networkContainer"> <!-- The inner modal, i.e. the actual content -->
<button class="close fa-solid fa-x" title="Close"></button>
<button class="rotate fa-solid fa-rotate-right" title="Rotate Graph"></button>
<button class="expand fa-solid fa-expand" title="Toggle Expand Swipes"></button>
<button class="reload fa-solid fa-sync" title="Reload Graph [/tl r]"></button>
<button class="zoomtofit fa-solid fa-magnifying-glass-plus" title="Zoom to Fit"></button>
<button class="zoomtocurrent fa-solid fa-magnifying-glass-location" title="Zoom to Current Chat"></button>
<input id="transparent-search" type="text" placeholder="Search [Ctrl+Shift+F]..." />
<div class="graph-container">
<!-- Relative positioned container -->
<div id="timelinesDiagramDiv"></div>
<div id="legendDiv" class="legend-bottom-right"></div>
<div id="fixedReference" style="position: fixed; bottom: 0; left: 0; width: 0; height: 0;"></div>
<!-- Legend with absolute positioning -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>