Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 1 | // Copyright (C) 2018 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 | import * as m from 'mithril'; |
| 16 | |
| 17 | import {moveTrack} from '../common/actions'; |
| 18 | import {TrackState} from '../common/state'; |
| 19 | |
| 20 | import {globals} from './globals'; |
| 21 | import {drawGridLines} from './gridline_helper'; |
Deepanjan Roy | 1f658fe | 2018-09-11 08:38:17 -0400 | [diff] [blame] | 22 | import {Panel, PanelSize} from './panel'; |
Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 23 | import {Track} from './track'; |
| 24 | import {trackRegistry} from './track_registry'; |
| 25 | |
Hector Dearman | 3ae7eb7 | 2018-08-14 17:51:14 +0100 | [diff] [blame] | 26 | // TODO(hjd): We should remove the constant where possible. |
| 27 | // If any uses can't be removed we should read this constant from CSS. |
Primiano Tucci | dc3dbcb | 2018-08-10 00:34:33 +0100 | [diff] [blame] | 28 | export const TRACK_SHELL_WIDTH = 300; |
Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 29 | |
| 30 | const TrackShell = { |
| 31 | view({attrs}) { |
| 32 | return m( |
| 33 | '.track-shell', |
Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 34 | m('h1', attrs.trackState.name), |
Hector Dearman | 3ae7eb7 | 2018-08-14 17:51:14 +0100 | [diff] [blame] | 35 | m(TrackMoveButton, { |
| 36 | direction: 'up', |
| 37 | trackId: attrs.trackState.id, |
| 38 | }), |
| 39 | m(TrackMoveButton, { |
| 40 | direction: 'down', |
| 41 | trackId: attrs.trackState.id, |
| 42 | })); |
Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 43 | }, |
| 44 | } as m.Component<{trackState: TrackState}>; |
| 45 | |
| 46 | const TrackContent = { |
| 47 | view({attrs}) { |
| 48 | return m('.track-content', { |
Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 49 | onmousemove: (e: MouseEvent) => { |
Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 50 | attrs.track.onMouseMove({x: e.layerX, y: e.layerY}); |
Deepanjan Roy | f190cb2 | 2018-08-28 10:43:07 -0400 | [diff] [blame] | 51 | globals.rafScheduler.scheduleRedraw(); |
Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 52 | }, |
| 53 | onmouseout: () => { |
| 54 | attrs.track.onMouseOut(); |
Deepanjan Roy | f190cb2 | 2018-08-28 10:43:07 -0400 | [diff] [blame] | 55 | globals.rafScheduler.scheduleRedraw(); |
Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 56 | }, |
| 57 | }, ); |
| 58 | } |
| 59 | } as m.Component<{track: Track}>; |
| 60 | |
| 61 | const TrackComponent = { |
| 62 | view({attrs}) { |
| 63 | return m('.track', [ |
| 64 | m(TrackShell, {trackState: attrs.trackState}), |
| 65 | m(TrackContent, {track: attrs.track}) |
Hector Dearman | 3ae7eb7 | 2018-08-14 17:51:14 +0100 | [diff] [blame] | 66 | ]); |
Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 67 | } |
| 68 | } as m.Component<{trackState: TrackState, track: Track}>; |
| 69 | |
| 70 | const TrackMoveButton = { |
| 71 | view({attrs}) { |
| 72 | return m( |
| 73 | 'i.material-icons.track-move-icons', |
| 74 | { |
Deepanjan Roy | 112ff6a | 2018-09-10 08:31:43 -0400 | [diff] [blame] | 75 | onclick: () => |
| 76 | globals.dispatch(moveTrack(attrs.trackId, attrs.direction)), |
Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 77 | }, |
| 78 | attrs.direction === 'up' ? 'arrow_upward_alt' : 'arrow_downward_alt'); |
| 79 | } |
| 80 | } as m.Component<{ |
| 81 | direction: 'up' | 'down', |
| 82 | trackId: string, |
Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 83 | }, |
| 84 | {}>; |
| 85 | |
Deepanjan Roy | 1f658fe | 2018-09-11 08:38:17 -0400 | [diff] [blame] | 86 | interface TrackPanelAttrs { |
| 87 | id: string; |
| 88 | } |
| 89 | |
| 90 | export class TrackPanel extends Panel<TrackPanelAttrs> { |
Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 91 | private track: Track; |
Deepanjan Roy | 1f658fe | 2018-09-11 08:38:17 -0400 | [diff] [blame] | 92 | private trackState: TrackState; |
| 93 | constructor(vnode: m.CVnode<TrackPanelAttrs>) { |
Deepanjan Roy | abd79aa | 2018-08-28 07:29:15 -0400 | [diff] [blame] | 94 | super(); |
Deepanjan Roy | 1f658fe | 2018-09-11 08:38:17 -0400 | [diff] [blame] | 95 | this.trackState = globals.state.tracks[vnode.attrs.id]; |
Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 96 | const trackCreator = trackRegistry.get(this.trackState.kind); |
| 97 | this.track = trackCreator.create(this.trackState); |
| 98 | } |
| 99 | |
Deepanjan Roy | 1f658fe | 2018-09-11 08:38:17 -0400 | [diff] [blame] | 100 | view() { |
| 101 | return m( |
| 102 | '.track', |
| 103 | { |
| 104 | style: { |
| 105 | height: `${this.track.getHeight()}px`, |
| 106 | } |
| 107 | }, |
| 108 | [ |
| 109 | m(TrackShell, {trackState: this.trackState}), |
| 110 | m(TrackContent, {track: this.track}) |
| 111 | ]); |
| 112 | return m(TrackComponent, {trackState: this.trackState, track: this.track}); |
Primiano Tucci | 9b5f13e | 2018-08-10 00:36:19 +0100 | [diff] [blame] | 113 | } |
| 114 | |
Deepanjan Roy | 1f658fe | 2018-09-11 08:38:17 -0400 | [diff] [blame] | 115 | renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize) { |
Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 116 | ctx.translate(TRACK_SHELL_WIDTH, 0); |
Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 117 | drawGridLines( |
| 118 | ctx, |
| 119 | globals.frontendLocalState.timeScale, |
Primiano Tucci | f30cd9c | 2018-08-13 01:53:26 +0200 | [diff] [blame] | 120 | globals.frontendLocalState.visibleWindowTime, |
Deepanjan Roy | 1f658fe | 2018-09-11 08:38:17 -0400 | [diff] [blame] | 121 | size.height); |
Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 122 | |
Deepanjan Roy | 9d95a25 | 2018-08-09 10:10:19 -0400 | [diff] [blame] | 123 | this.track.renderCanvas(ctx); |
| 124 | } |
Deepanjan Roy | abd79aa | 2018-08-28 07:29:15 -0400 | [diff] [blame] | 125 | } |