diff --git a/web/ascoltami/Light9AscoltamiTimeline.ts b/web/ascoltami/Light9AscoltamiTimeline.ts --- a/web/ascoltami/Light9AscoltamiTimeline.ts +++ b/web/ascoltami/Light9AscoltamiTimeline.ts @@ -2,7 +2,7 @@ import { css, html, LitElement, Property import { customElement, property, state } from "lit/decorators.js"; import Sylvester from "sylvester"; import { Zoom } from "../light9-timeline-audio"; -import { PlainViewState } from "../Light9CursorCanvas"; +import { PlainerViewState, PlainViewState } from "../Light9CursorCanvas"; import { getTopGraph } from "../RdfdbSyncedGraph"; import { show } from "../show_specific"; import { SyncedGraph } from "../SyncedGraph"; @@ -31,11 +31,11 @@ export class Light9AscoltamiTimeline ext position: relative; } #overview { - height: 60px; + height: 400px; } #zoomed { margin-top: 40px; - height: 80px; + height: 400px; } #cursor { position: absolute; @@ -44,6 +44,9 @@ export class Light9AscoltamiTimeline ext width: 100%; height: 100%; } + #timeSlider { + height: 0; + } `, ]; graph!: SyncedGraph; @@ -58,7 +61,7 @@ export class Light9AscoltamiTimeline ext @property() playerTime: number = 0; @state() zoom: Zoom; @state() overviewZoom: Zoom; - @state() viewState: PlainViewState | null = null; + @state() viewState: PlainerViewState | null = null; constructor() { super(); getTopGraph().then((g) => { @@ -87,15 +90,15 @@ export class Light9AscoltamiTimeline ext this.zoom = { duration: duration, t1, t2 }; const w = timeRow.offsetWidth; this.viewState = { - zoomSpec: { t1: () => t1, t2: () => t2 }, - cursor: { t: () => t }, - audioY: () => 0, - audioH: () => 60, - zoomedTimeY: () => 60, - zoomedTimeH: () => 40, + zoomSpec: { t1: t1, t2: t2 }, + cursor: { t: t }, + audioY: 0, + audioH: 400, + zoomedTimeY: 400, + zoomedTimeH: 40, fullZoomX: (sec: number) => (sec / duration) * w, zoomInX: (sec: number) => ((sec - t1) / (t2 - t1)) * w, - mouse: { pos: () => $V([0, 0]) }, + mouse: { pos: $V([0, 0]) }, }; }