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
|
// Copyright 2018 the V8 project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {GraphView} from "./graph-view.js"
import {ScheduleView} from "./schedule-view.js"
import {SequenceView} from "./sequence-view.js"
import {SourceResolver} from "./source-resolver.js"
import {SelectionBroker} from "./selection-broker.js"
import {View, PhaseView} from "./view.js"
export class GraphMultiView extends View {
sourceResolver: SourceResolver;
selectionBroker: SelectionBroker;
graph: GraphView;
schedule: ScheduleView;
sequence: SequenceView;
selectMenu: HTMLSelectElement;
currentPhaseView: View & PhaseView;
createViewElement() {
const pane = document.createElement('div');
pane.setAttribute('id', "multiview");
return pane;
}
constructor(id, selectionBroker, sourceResolver) {
super(id);
const view = this;
view.sourceResolver = sourceResolver;
view.selectionBroker = selectionBroker;
const searchInput = document.getElementById("search-input") as HTMLInputElement;
searchInput.addEventListener("keyup", e => {
if (!view.currentPhaseView) return;
view.currentPhaseView.searchInputAction(searchInput, e)
});
searchInput.setAttribute("value", window.sessionStorage.getItem("lastSearch") || "");
this.graph = new GraphView(id, selectionBroker,
(phaseName) => view.displayPhaseByName(phaseName));
this.schedule = new ScheduleView(id, selectionBroker);
this.sequence = new SequenceView(id, selectionBroker);
this.selectMenu = (<HTMLSelectElement>document.getElementById('display-selector'));
}
initializeSelect() {
const view = this;
view.selectMenu.innerHTML = '';
view.sourceResolver.forEachPhase((phase) => {
const optionElement = document.createElement("option");
optionElement.text = phase.name;
view.selectMenu.add(optionElement);
});
this.selectMenu.onchange = function (this: HTMLSelectElement) {
window.sessionStorage.setItem("lastSelectedPhase", this.selectedIndex.toString());
view.displayPhase(view.sourceResolver.getPhase(this.selectedIndex));
}
}
show(data, rememberedSelection) {
super.show(data, rememberedSelection);
this.initializeSelect();
const lastPhaseIndex = +window.sessionStorage.getItem("lastSelectedPhase");
const initialPhaseIndex = this.sourceResolver.repairPhaseId(lastPhaseIndex);
this.selectMenu.selectedIndex = initialPhaseIndex;
this.displayPhase(this.sourceResolver.getPhase(initialPhaseIndex));
}
initializeContent() { }
displayPhase(phase) {
if (phase.type == 'graph') {
this.displayPhaseView(this.graph, phase.data);
} else if (phase.type == 'schedule') {
this.displayPhaseView(this.schedule, phase);
} else if (phase.type == 'sequence') {
this.displayPhaseView(this.sequence, phase);
}
}
displayPhaseView(view, data) {
const rememberedSelection = this.hideCurrentPhase();
view.show(data, rememberedSelection);
document.getElementById("middle").classList.toggle("scrollable", view.isScrollable());
this.currentPhaseView = view;
}
displayPhaseByName(phaseName) {
const phaseId = this.sourceResolver.getPhaseIdByName(phaseName);
this.selectMenu.selectedIndex = phaseId - 1;
this.displayPhase(this.sourceResolver.getPhase(phaseId));
}
hideCurrentPhase() {
let rememberedSelection = null;
if (this.currentPhaseView != null) {
rememberedSelection = this.currentPhaseView.detachSelection();
this.currentPhaseView.hide();
this.currentPhaseView = null;
}
return rememberedSelection;
}
onresize() {
if (this.currentPhaseView) this.currentPhaseView.onresize();
}
deleteContent() {
this.hideCurrentPhase();
}
detachSelection() {
return null;
}
}
|
