|
2062
|
1 import * as ko from "knockout";
|
|
|
2 import * as d3 from "d3";
|
|
|
3 import debug from "debug";
|
|
1733
|
4
|
|
2062
|
5 const log = debug("viewstate");
|
|
|
6 export class ViewState {
|
|
|
7 zoomSpec: {
|
|
|
8 duration: ko.Observable<number>; // current song duration
|
|
|
9 t1: ko.Observable<number>;
|
|
|
10 t2: ko.Observable<number>;
|
|
|
11 };
|
|
|
12 cursor: { t: ko.Observable<number> };
|
|
|
13 mouse: { pos: ko.Observable<Vector> };
|
|
|
14 width: ko.Observable<number>;
|
|
|
15 coveredByDiagramTop: ko.Observable<number>;
|
|
|
16 audioY: ko.Observable<number>;
|
|
|
17 audioH: ko.Observable<number>;
|
|
|
18 zoomedTimeY: ko.Observable<number>;
|
|
|
19 zoomedTimeH: ko.Observable<number>;
|
|
|
20 rowsY: ko.Observable<number>;
|
|
|
21 fullZoomX: d3.ScaleLinear<number, number>;
|
|
|
22 zoomInX: d3.ScaleLinear<number, number>;
|
|
|
23 zoomAnimSec: number;
|
|
|
24 constructor() {
|
|
|
25 // caller updates all these observables
|
|
|
26 this.zoomSpec = {
|
|
|
27 duration: ko.observable(100), // current song duration
|
|
|
28 t1: ko.observable(0),
|
|
|
29 t2: ko.observable(100),
|
|
|
30 };
|
|
|
31 this.cursor = { t: ko.observable(20) }; // songTime
|
|
|
32 this.mouse = { pos: ko.observable($V([0, 0])) };
|
|
|
33 this.width = ko.observable(500);
|
|
|
34 this.coveredByDiagramTop = ko.observable(0); // page coords
|
|
|
35 // all these are relative to #coveredByDiagram:
|
|
|
36 this.audioY = ko.observable(0);
|
|
|
37 this.audioH = ko.observable(0);
|
|
|
38 this.zoomedTimeY = ko.observable(0);
|
|
|
39 this.zoomedTimeH = ko.observable(0);
|
|
|
40 this.rowsY = ko.observable(0);
|
|
1733
|
41
|
|
2062
|
42 this.fullZoomX = d3.scaleLinear();
|
|
|
43 this.zoomInX = d3.scaleLinear();
|
|
|
44
|
|
|
45 this.zoomAnimSec = 0.1;
|
|
|
46
|
|
|
47 ko.computed(this.maintainZoomLimitsAndScales.bind(this));
|
|
|
48 }
|
|
1733
|
49
|
|
2062
|
50 setWidth(w: any) {
|
|
|
51 this.width(w);
|
|
|
52 this.maintainZoomLimitsAndScales(); // before other handlers run
|
|
|
53 }
|
|
1733
|
54
|
|
2062
|
55 maintainZoomLimitsAndScales() {
|
|
|
56 // not for cursor updates
|
|
|
57
|
|
|
58 if (this.zoomSpec.t1() < 0) {
|
|
|
59 this.zoomSpec.t1(0);
|
|
|
60 }
|
|
|
61 if (this.zoomSpec.duration() && this.zoomSpec.t2() > this.zoomSpec.duration()) {
|
|
|
62 this.zoomSpec.t2(this.zoomSpec.duration());
|
|
|
63 }
|
|
1733
|
64
|
|
2062
|
65 const rightPad = 5; // don't let time adjuster fall off right edge
|
|
|
66 this.fullZoomX.domain([0, this.zoomSpec.duration()]);
|
|
|
67 this.fullZoomX.range([0, this.width() - rightPad]);
|
|
1733
|
68
|
|
2062
|
69 this.zoomInX.domain([this.zoomSpec.t1(), this.zoomSpec.t2()]);
|
|
|
70 this.zoomInX.range([0, this.width() - rightPad]);
|
|
|
71 }
|
|
|
72
|
|
|
73 latestMouseTime(): number {
|
|
|
74 return this.zoomInX.invert(this.mouse.pos().e(1));
|
|
|
75 }
|
|
1733
|
76
|
|
2062
|
77 onMouseWheel(deltaY: any) {
|
|
|
78 const zs = this.zoomSpec;
|
|
1733
|
79
|
|
2062
|
80 const center = this.latestMouseTime();
|
|
|
81 const left = center - zs.t1();
|
|
|
82 const right = zs.t2() - center;
|
|
|
83 const scale = Math.pow(1.005, deltaY);
|
|
|
84
|
|
|
85 zs.t1(center - left * scale);
|
|
|
86 zs.t2(center + right * scale);
|
|
|
87 log("view to", ko.toJSON(this));
|
|
|
88 }
|
|
1733
|
89
|
|
2062
|
90 frameCursor() {
|
|
|
91 const zs = this.zoomSpec;
|
|
|
92 const visSeconds = zs.t2() - zs.t1();
|
|
|
93 const margin = visSeconds * 0.4;
|
|
|
94 // buggy: really needs t1/t2 to limit their ranges
|
|
|
95 if (this.cursor.t() < zs.t1() || this.cursor.t() > zs.t2() - visSeconds * 0.6) {
|
|
|
96 const newCenter = this.cursor.t() + margin;
|
|
|
97 this.animatedZoom(newCenter - visSeconds / 2, newCenter + visSeconds / 2, this.zoomAnimSec);
|
|
|
98 }
|
|
|
99 }
|
|
|
100 frameToEnd() {
|
|
|
101 this.animatedZoom(this.cursor.t() - 2, this.zoomSpec.duration(), this.zoomAnimSec);
|
|
|
102 }
|
|
|
103 frameAll() {
|
|
|
104 this.animatedZoom(0, this.zoomSpec.duration(), this.zoomAnimSec);
|
|
|
105 }
|
|
|
106 animatedZoom(newT1: number, newT2: number, secs: number) {
|
|
|
107 const fps = 30;
|
|
|
108 const oldT1 = this.zoomSpec.t1();
|
|
|
109 const oldT2 = this.zoomSpec.t2();
|
|
|
110 let lastTime = 0;
|
|
|
111 for (let step = 0; step < secs * fps; step++) {
|
|
|
112 const frac = step / (secs * fps);
|
|
|
113 ((frac) => {
|
|
|
114 const gotoStep = () => {
|
|
|
115 this.zoomSpec.t1((1 - frac) * oldT1 + frac * newT1);
|
|
|
116 return this.zoomSpec.t2((1 - frac) * oldT2 + frac * newT2);
|
|
|
117 };
|
|
|
118 const delay = frac * secs * 1000;
|
|
|
119 setTimeout(gotoStep, delay);
|
|
|
120 lastTime = delay;
|
|
|
121 })(frac);
|
|
|
122 }
|
|
|
123 setTimeout(() => {
|
|
|
124 this.zoomSpec.t1(newT1);
|
|
|
125 return this.zoomSpec.t2(newT2);
|
|
|
126 }, lastTime + 10);
|
|
|
127 }
|
|
|
128 }
|
