--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/timeline/timeline-elements.ts	Sun May 12 19:02:10 2024 -0700
@@ -0,0 +1,248 @@
+console.log("hi tl")
+import { debug } from "debug";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+export {Light9TimelineAudio} from "../light9-timeline-audio"
+debug.enable("*");
+/*
+ <link rel="import" href="/lib/polymer/polymer.html">
+<link rel="import" href="/lib/polymer/lib/utils/render-status.html">
+<link rel="import" href="/lib/iron-resizable-behavior/iron-resizable-behavior.html">
+<link rel="import" href="/lib/iron-ajax/iron-ajax.html">
+<link rel="import" href="light9-timeline-audio.html">
+<link rel="import" href="../rdfdb-synced-graph.html">
+<link rel="import" href="../light9-music.html">
+<link rel="import" href="../edit-choice.html">
+<link rel="import" href="inline-attrs.html">
+    <script src="/websocket.js"></script>
+<script type="module" src="/light9-vidref-replay.js"></script>
+
+<script type="module" src="/light9-vidref-replay-stack.js"></script>
+
+*/
+
+// Whole editor- include this on your page.
+// Most coordinates are relative to this element.
+@customElement("light9-timeline-editor")
+export class Light9TimelineEditor extends LitElement {
+  render() {
+    return html`
+    <style>
+     :host {
+         background: #444;
+         display: flex;
+         flex-direction: column;
+         position: relative;
+         border: 1px solid black;
+         overflow: hidden;
+     }
+     light9-timeline-audio {
+         width: 100%;
+         height: 30px;
+     }
+     light9-timeline-time-zoomed {
+         flex-grow: 1;
+     }
+     #coveredByDiagram {
+         position: relative;
+         display: flex;
+         flex-direction: column;
+         height: 100%;
+     }
+     #dia, #adjusters, #cursorCanvas, #adjustersCanvas {
+         position: absolute;
+         left: 0; top: 0; right: 0; bottom: 0;
+     }
+     #debug {
+         background: white;
+         font-family: monospace;
+         font-size: 125%;
+         height: 15px;
+     }
+     light9-vidref-replay-stack {
+             position: absolute;
+             bottom: 10px;
+             width: 50%;
+             background: gray;
+             box-shadow: 6px 10px 12px #0000006b;
+             display: inline-block;
+     }
+    </style>
+    <div>
+      <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>
+      <light9-music id="music"
+                    song="{{playerSong}}"
+                    t="{{songTime}}"
+                    playing="{{songPlaying}}"
+                    duration="{{songDuration}}"></light9-music>
+      timeline editor: song <edit-choice graph="{{graph}}" uri="{{song}}"></edit-choice>
+      <label><input type="checkbox" checked="{{followPlayerSong::change}}" > follow player song choice</label>
+    </div>
+    <div id="debug">[[debug]]</div>
+    <iron-ajax id="vidrefTime" url="/vidref/time" method="PUT" content-type="application/json"></iron-ajax>
+    <div id="coveredByDiagram">
+      <light9-timeline-audio id="audio"
+                             graph="{{graph}}"
+                             show="{{show}}"
+                             song="{{song}}"></light9-timeline-audio>
+      <light9-timeline-time-zoomed id="zoomed"
+                                   graph="{{graph}}"
+                                   project="{{project}}"
+                                   selection="{{selection}}"
+                                   set-adjuster="{{setAdjuster}}"
+                                   song="{{song}}"
+                                   show="{{show}}"
+                                   view-state="{{viewState}}">
+      </light9-timeline-time-zoomed>
+      <light9-adjusters-canvas id="adjustersCanvas" set-adjuster="{{setAdjuster}}">
+      </light9-adjusters-canvas>
+      <light9-cursor-canvas id="cursorCanvas" view-state="{{viewState}}"></light9-cursor-canvas>
+      <light9-vidref-replay-stack size="small"></light9-vidref-replay-stack>
+    </div>
+`;
+  }
+}
+
+// the whole section that pans/zooms in time (most of the editor)
+@customElement("light9-timeline-time-zoomed")
+export class Light9TimelineTimeZoomed extends LitElement {
+  render() {
+    return html`
+    <style>
+     :host {
+         display: flex;
+         height: 100%;
+         flex-direction: column;
+     }
+     #top {
+     }
+     #rows {
+         height: 100%;
+         overflow: hidden;
+     }
+     #rows.dragging {
+         background: rgba(126, 52, 245, 0.0784);
+     }
+     light9-timeline-time-axis {
+     }
+     light9-timeline-audio {
+         width: 100%;
+         height: 100px;
+     }
+     light9-timeline-graph-row {
+         flex-grow: 1;
+     }
+    </style>
+    <div id="top">
+      <light9-timeline-time-axis id="time" view-state="{{viewState}}"></light9-timeline-time-axis>
+      <light9-timeline-audio id="audio"
+                             graph="{{graph}}"
+                             song="{{song}}"
+                             show="{{show}}"
+                             zoom="{{zoomFlattened}}">
+      </light9-timeline-audio>
+    </div>
+    <div id="rows"></div>
+    <template is="dom-repeat" items="{{imageSamples}}">
+      <img src="/show/dance2019/anim/rainbow1.png">
+    </template>
+    <template is="dom-repeat" items="{{inlineAttrConfigs}}">
+      <light9-timeline-note-inline-attrs graph="{{graph}}"
+                                         project="{{project}}"
+                                         selection="{{selection}}"
+                                         song="{{song}}"
+                                         config="{{item}}">
+      </light9-timeline-note-inline-attrs>
+    </template>
+`;
+  } 
+}
+
+@customElement("light9-cursor-canvas")
+export class Light9CursorCanvas extends LitElement {
+  render() {
+    return html`
+      <style>
+        #canvas,
+        :host {
+          pointer-events: none;
+        }
+      </style>
+      <canvas id="canvas"></canvas>
+    `;
+  }
+}
+
+@customElement("light9-adjusters-canvas")
+export class Light9AdjustersCanvas extends LitElement {
+  render() {
+    return html`
+      <style>
+        :host {
+          pointer-events: none;
+        }
+      </style>
+      <canvas id="canvas"></canvas>
+    `;
+  }
+}      
+
+// seconds labels
+@customElement("light9-timeline-time-axis")
+export class Light9TimelineTimeAxis extends LitElement {
+  render() {
+    return html`
+      <style>
+        :host {
+          display: block;
+        }
+        div {
+          width: 100%;
+          height: 31px;
+        }
+        svg {
+          width: 100%;
+          height: 30px;
+        }
+      </style>
+      <svg id="timeAxis" xmlns="http://www.w3.org/2000/svg">
+        <style>
+          text {
+            fill: white;
+            color: white;
+            font-size: 135%;
+            font-weight: bold;
+          }
+        </style>
+        <g id="axis" transform="translate(0,30)"></g>
+      </svg>
+    `;
+  }
+}
+
+// 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.
+//  This element manages their layout and suppresion.
+//  Owns the selection.
+//  Maybe includes selecting things that don't even have adjusters.
+//  Maybe manages the layout of other labels and text too, to avoid overlaps.
+@customElement("light9-timeline-adjusters")
+export class Light9TimelineAdjusters extends LitElement {
+  render() {
+    return html`
+      <style>
+        :host {
+          pointer-events: none; /* restored on the individual adjusters */
+        }
+      </style>
+    `;
+  }
+}
+
+/*
+<script src="/lib/async/dist/async.js"></script>
+<script src="/lib/shortcut/index.js"></script>
+<script src="/lib/underscore/underscore-min.js"></script>
+<script src="/node_modules/n3/n3-browser.js"></script> 
+<script src="/node_modules/pixi.js/dist/pixi.min.js"></script>
+<script src="/node_modules/tinycolor2/dist/tinycolor-min.js"></script>
+*/