1<!-- Copyright (C) 2017 The Android Open Source Project
2
3     Licensed under the Apache License, Version 2.0 (the "License");
4     you may not use this file except in compliance with the License.
5     You may obtain a copy of the License at
6
7          http://www.apache.org/licenses/LICENSE-2.0
8
9     Unless required by applicable law or agreed to in writing, software
10     distributed under the License is distributed on an "AS IS" BASIS,
11     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12     See the License for the specific language governing permissions and
13     limitations under the License.
14-->
15<template>
16  <div class="timeline-container">
17    <div class="tag-timeline" v-if="flickerMode" :style="maxOverlap">
18      <transition-container
19        class="container"
20        v-for="transition in timelineTransitions"
21        :key="transition.type"
22        :startPos="transition.startPos"
23        :startTime="transition.startTime"
24        :endTime="transition.endTime"
25        :width="transition.width"
26        :color="transition.color"
27        :overlap="transition.overlap"
28        :tooltip="transition.tooltip"
29        :store="store"
30      />
31    </div>
32    <svg
33      width="100%"
34      height="20"
35      class="timeline-svg"
36      :class="{disabled: disabled}"
37      ref="timeline"
38    >
39      <rect
40        :x="`${block.startPos}%`"
41        y="0"
42        :width="`${block.width}%`"
43        :height="pointHeight"
44        :rx="corner"
45        v-for="(block, idx) in timelineBlocks"
46        :key="idx"
47        @click="onBlockClick"
48        class="point"
49      />
50      <rect
51        :x="`${position(selected)}%`"
52        y="0"
53        :width="`${pointWidth}%`"
54        :height="pointHeight"
55        :rx="corner"
56        class="point selected"
57      />
58      <line
59        v-for="error in errorPositions"
60        :key="error.pos"
61        :x1="`${error.pos}%`"
62        :x2="`${error.pos}%`"
63        y1="0"
64        y2="18px"
65        class="error"
66        @click="onErrorClick(error.ts)"
67      />
68    </svg>
69  </div>
70</template>
71<script>
72import TimelineMixin from "./mixins/Timeline.js";
73import TransitionContainer from './components/TagDisplay/TransitionContainer.vue';
74
75export default {
76  name: "timeline",
77  // TODO: Add indication of trim, at least for collasped timeline
78  components: {
79    'transition-container': TransitionContainer,
80  },
81  props: ["selectedIndex", "crop", "disabled", "store"],
82  data() {
83    return {
84      pointHeight: 15,
85      corner: 2
86    };
87  },
88  mixins: [TimelineMixin],
89  computed: {
90    timestamps() {
91      if (this.timeline.length == 1) {
92        return [0];
93      }
94      return this.timeline;
95    },
96    selected() {
97      return this.timeline[this.selectedIndex];
98    },
99    maxOverlap() {
100      if (!this.timelineTransitions) {
101        return {
102          marginTop: '0px',
103        }
104      }
105      var overlaps = [];
106      for (const transition in this.timelineTransitions) {
107        overlaps.push(this.timelineTransitions[transition].overlap);
108      }
109      return {
110        marginTop: (Math.max(...overlaps)+1)*10 + 'px',
111      }
112    },
113  }
114};
115</script>
116<style scoped>
117.timeline-container {
118  width: 100%;
119}
120.container:hover {
121  cursor: pointer;
122}
123.tag-timeline {
124  width: 100%;
125  position: relative;
126  height: 10px;
127}
128.timeline-svg .point {
129  cursor: pointer;
130}
131.timeline-svg.disabled .point {
132  fill: #BDBDBD;
133  cursor: not-allowed;
134}
135.timeline-svg:not(.disabled) .point.selected {
136  fill: #b2f6faff;
137}
138.timeline-svg.disabled .point.selected {
139  fill: rgba(240, 59, 59, 0.596);
140}
141.error {
142  stroke: rgb(255, 0, 0);
143  stroke-width: 8px;
144  cursor: pointer;
145}
146</style>