|
55 | 55 |
|
56 | 56 | <hr> |
57 | 57 |
|
58 | | - <h2>Timeline</h2> |
| 58 | + <h2>Timeline (without groups)</h2> |
| 59 | + <timeline |
| 60 | + ref="timeline-withoutGroups" |
| 61 | + :items="timeline.items" |
| 62 | + :options="timeline.options" |
| 63 | + @click="timelineWithoutGroupsEvent('click')" |
| 64 | + @contextmenu="timelineWithoutGroupsEvent('contextmenu')" |
| 65 | + @current-time-tick="timelineWithoutGroupsEvent('currentTimeTick')" |
| 66 | + @double-click="timelineWithoutGroupsEvent('doubleClick')" |
| 67 | + @drop="timelineWithoutGroupsEvent('drop')" |
| 68 | + @mouse-over="timelineWithoutGroupsEvent('mouseOver')" |
| 69 | + @mouse-down="timelineWithoutGroupsEvent('mouseDown')" |
| 70 | + @mouse-up="timelineWithoutGroupsEvent('mouseUp')" |
| 71 | + @mouse-move="timelineWithoutGroupsEvent('mouseMove')" |
| 72 | + @group-dragged="timelineWithoutGroupsEvent('groupDragged')" |
| 73 | + @changed="timelineWithoutGroupsEvent('changed')" |
| 74 | + @rangechange="timelineWithoutGroupsEvent('rangechange')" |
| 75 | + @rangechanged="timelineWithoutGroupsEvent('rangechanged')" |
| 76 | + @select="timelineWithoutGroupsEvent('select')" |
| 77 | + @itemover="timelineWithoutGroupsEvent('itemover')" |
| 78 | + @itemout="timelineWithoutGroupsEvent('itemout')" |
| 79 | + @timechange="timelineWithoutGroupsEvent('timechange')" |
| 80 | + @timechanged="timelineWithoutGroupsEvent('timechanged')" |
| 81 | + @items-mounted="timelineWithoutGroupsEvent('items-mounted')" |
| 82 | + @items-add="timelineWithoutGroupsEvent('items-add')" |
| 83 | + @items-update="timelineWithoutGroupsEvent('items-update')" |
| 84 | + @items-remove="timelineWithoutGroupsEvent('items-remove')"> |
| 85 | + </timeline> |
| 86 | + <div class="events"><p>Timeline events: <br /> {{timelineWithoutGroupsEvents}}</p></div> |
| 87 | + |
| 88 | + <hr> |
| 89 | + |
| 90 | + <h2>Timeline (with groups)</h2> |
59 | 91 | <timeline |
60 | 92 | ref="timeline" |
61 | 93 | :items="timeline.items" |
@@ -126,6 +158,7 @@ import { Timeline, Graph2d, Network } from 'vue2vis'; |
126 | 158 | export default { |
127 | 159 | data: () => ({ |
128 | 160 | timelineEvents: '', |
| 161 | + timelineWithoutGroupsEvents: '', |
129 | 162 | timeline: { |
130 | 163 | groups: [ |
131 | 164 | { |
@@ -266,6 +299,10 @@ export default { |
266 | 299 | if (this.timelineEvents.length > 500) this.timelineEvents = ''; |
267 | 300 | this.timelineEvents += `${eventName}, `; |
268 | 301 | }, |
| 302 | + timelineWithoutGroupsEvent(eventName) { |
| 303 | + if (this.timelineWithoutGroupsEvents.length > 500) this.timelineWithoutGroupsEvents = ''; |
| 304 | + this.timelineWithoutGroupsEvents += `${eventName}, `; |
| 305 | + }, |
269 | 306 | graph2dEvent(eventName) { |
270 | 307 | if (this.graph2dEvents.length > 500) this.graph2dEvents = ''; |
271 | 308 | this.graph2dEvents += `${eventName}, `; |
|
0 commit comments