Mercurial > code > home > repos > light9

comparison web/timeline/timeline-elements.ts @ 2376:4556eebe5d73

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
topdir reorgs; let pdm have its src/ dir; separate vite area from light9/
author drewp@bigasterisk.com
date Sun, 12 May 2024 19:02:10 -0700
parents light9/web/timeline/timeline-elements.ts@486cb74f54df
children
comparison
equal deleted inserted replaced
2375:623836db99af 2376:4556eebe5d73
1 console.log("hi tl")
2 import { debug } from "debug";
3 import { css, html, LitElement, TemplateResult } from "lit";
4 import { customElement, property } from "lit/decorators.js";
5 export {Light9TimelineAudio} from "../light9-timeline-audio"
6 debug.enable("*");
7 /*
8 <link rel="import" href="/lib/polymer/polymer.html">
9 <link rel="import" href="/lib/polymer/lib/utils/render-status.html">
10 <link rel="import" href="/lib/iron-resizable-behavior/iron-resizable-behavior.html">
11 <link rel="import" href="/lib/iron-ajax/iron-ajax.html">
12 <link rel="import" href="light9-timeline-audio.html">
13 <link rel="import" href="../rdfdb-synced-graph.html">
14 <link rel="import" href="../light9-music.html">
15 <link rel="import" href="../edit-choice.html">
16 <link rel="import" href="inline-attrs.html">
17 <script src="/websocket.js"></script>
18 <script type="module" src="/light9-vidref-replay.js"></script>
19
20 <script type="module" src="/light9-vidref-replay-stack.js"></script>
21
22 */
23
24 // Whole editor- include this on your page.
25 // Most coordinates are relative to this element.
26 @customElement("light9-timeline-editor")
27 export class Light9TimelineEditor extends LitElement {
28 render() {
29 return html`
30 <style>
31 :host {
32 background: #444;
33 display: flex;
34 flex-direction: column;
35 position: relative;
36 border: 1px solid black;
37 overflow: hidden;
38 }
39 light9-timeline-audio {
40 width: 100%;
41 height: 30px;
42 }
43 light9-timeline-time-zoomed {
44 flex-grow: 1;
45 }
46 #coveredByDiagram {
47 position: relative;
48 display: flex;
49 flex-direction: column;
50 height: 100%;
51 }
52 #dia, #adjusters, #cursorCanvas, #adjustersCanvas {
53 position: absolute;
54 left: 0; top: 0; right: 0; bottom: 0;
55 }
56 #debug {
57 background: white;
58 font-family: monospace;
59 font-size: 125%;
60 height: 15px;
61 }
62 light9-vidref-replay-stack {
63 position: absolute;
64 bottom: 10px;
65 width: 50%;
66 background: gray;
67 box-shadow: 6px 10px 12px #0000006b;
68 display: inline-block;
69 }
70 </style>
71 <div>
72 <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>
73 <light9-music id="music"
74 song="{{playerSong}}"
75 t="{{songTime}}"
76 playing="{{songPlaying}}"
77 duration="{{songDuration}}"></light9-music>
78 timeline editor: song <edit-choice graph="{{graph}}" uri="{{song}}"></edit-choice>
79 <label><input type="checkbox" checked="{{followPlayerSong::change}}" > follow player song choice</label>
80 </div>
81 <div id="debug">[[debug]]</div>
82 <iron-ajax id="vidrefTime" url="/vidref/time" method="PUT" content-type="application/json"></iron-ajax>
83 <div id="coveredByDiagram">
84 <light9-timeline-audio id="audio"
85 graph="{{graph}}"
86 show="{{show}}"
87 song="{{song}}"></light9-timeline-audio>
88 <light9-timeline-time-zoomed id="zoomed"
89 graph="{{graph}}"
90 project="{{project}}"
91 selection="{{selection}}"
92 set-adjuster="{{setAdjuster}}"
93 song="{{song}}"
94 show="{{show}}"
95 view-state="{{viewState}}">
96 </light9-timeline-time-zoomed>
97 <light9-adjusters-canvas id="adjustersCanvas" set-adjuster="{{setAdjuster}}">
98 </light9-adjusters-canvas>
99 <light9-cursor-canvas id="cursorCanvas" view-state="{{viewState}}"></light9-cursor-canvas>
100 <light9-vidref-replay-stack size="small"></light9-vidref-replay-stack>
101 </div>
102 `;
103 }
104 }
105
106 // the whole section that pans/zooms in time (most of the editor)
107 @customElement("light9-timeline-time-zoomed")
108 export class Light9TimelineTimeZoomed extends LitElement {
109 render() {
110 return html`
111 <style>
112 :host {
113 display: flex;
114 height: 100%;
115 flex-direction: column;
116 }
117 #top {
118 }
119 #rows {
120 height: 100%;
121 overflow: hidden;
122 }
123 #rows.dragging {
124 background: rgba(126, 52, 245, 0.0784);
125 }
126 light9-timeline-time-axis {
127 }
128 light9-timeline-audio {
129 width: 100%;
130 height: 100px;
131 }
132 light9-timeline-graph-row {
133 flex-grow: 1;
134 }
135 </style>
136 <div id="top">
137 <light9-timeline-time-axis id="time" view-state="{{viewState}}"></light9-timeline-time-axis>
138 <light9-timeline-audio id="audio"
139 graph="{{graph}}"
140 song="{{song}}"
141 show="{{show}}"
142 zoom="{{zoomFlattened}}">
143 </light9-timeline-audio>
144 </div>
145 <div id="rows"></div>
146 <template is="dom-repeat" items="{{imageSamples}}">
147 <img src="/show/dance2019/anim/rainbow1.png">
148 </template>
149 <template is="dom-repeat" items="{{inlineAttrConfigs}}">
150 <light9-timeline-note-inline-attrs graph="{{graph}}"
151 project="{{project}}"
152 selection="{{selection}}"
153 song="{{song}}"
154 config="{{item}}">
155 </light9-timeline-note-inline-attrs>
156 </template>
157 `;
158 }
159 }
160
161 @customElement("light9-cursor-canvas")
162 export class Light9CursorCanvas extends LitElement {
163 render() {
164 return html`
165 <style>
166 #canvas,
167 :host {
168 pointer-events: none;
169 }
170 </style>
171 <canvas id="canvas"></canvas>
172 `;
173 }
174 }
175
176 @customElement("light9-adjusters-canvas")
177 export class Light9AdjustersCanvas extends LitElement {
178 render() {
179 return html`
180 <style>
181 :host {
182 pointer-events: none;
183 }
184 </style>
185 <canvas id="canvas"></canvas>
186 `;
187 }
188 }
189
190 // seconds labels
191 @customElement("light9-timeline-time-axis")
192 export class Light9TimelineTimeAxis extends LitElement {
193 render() {
194 return html`
195 <style>
196 :host {
197 display: block;
198 }
199 div {
200 width: 100%;
201 height: 31px;
202 }
203 svg {
204 width: 100%;
205 height: 30px;
206 }
207 </style>
208 <svg id="timeAxis" xmlns="http://www.w3.org/2000/svg">
209 <style>
210 text {
211 fill: white;
212 color: white;
213 font-size: 135%;
214 font-weight: bold;
215 }
216 </style>
217 <g id="axis" transform="translate(0,30)"></g>
218 </svg>
219 `;
220 }
221 }
222
223 // All the adjusters you can edit or select. Tells a light9-adjusters-canvas how to draw them. Probabaly doesn't need to be an element.
224 // This element manages their layout and suppresion.
225 // Owns the selection.
226 // Maybe includes selecting things that don't even have adjusters.
227 // Maybe manages the layout of other labels and text too, to avoid overlaps.
228 @customElement("light9-timeline-adjusters")
229 export class Light9TimelineAdjusters extends LitElement {
230 render() {
231 return html`
232 <style>
233 :host {
234 pointer-events: none; /* restored on the individual adjusters */
235 }
236 </style>
237 `;
238 }
239 }
240
241 /*
242 <script src="/lib/async/dist/async.js"></script>
243 <script src="/lib/shortcut/index.js"></script>
244 <script src="/lib/underscore/underscore-min.js"></script>
245 <script src="/node_modules/n3/n3-browser.js"></script>
246 <script src="/node_modules/pixi.js/dist/pixi.min.js"></script>
247 <script src="/node_modules/tinycolor2/dist/tinycolor-min.js"></script>
248 */