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 | import { Component } from '@angular/core'; import store from '../../store'; import { setDisplayMode } from '../../actions'; @Component({ selector: 'display-mode', template: ` <span> <label for='thumbnailRadio'>Thumbnail</label> <input id="thumbnailRadio" style="cursor: pointer" type="radio" name="display_mode" value="Thumbnail" [checked]='displayMode === "THUMBNAIL"' (change)="setMode('THUMBNAIL')"/> <label for='listRadio'>List</label> <input id="listRadio" style="cursor: pointer" type="radio" name="display_mode" value="List" [checked]='displayMode === "LIST"' (change)="setMode('LIST')"/> </span> ` }) export default class DisplayMode { private displayMode: string; private unsubscribe: any; constructor() { this.unsubscribe = store.subscribe(() => { this.displayMode = store.getState().displayMode; }); } setMode(value) { store.dispatch(setDisplayMode(value)); } ngOnDestroy() { this.unsubscribe(); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import { Component } from '@angular/core'; @Component({ selector: 'history', template: ` <input type='range' #range style='cursor: pointer' min={1} (input)='setState(range.value)' [max]='maximum' [value]='value'/> <a href='#' style='text-decoration: none' (click)='previousState()' [innerHTML] = 'leftArrow'> </a> <a href='#' style='text-decoration: none' (click)='nextState()' [innerHTML] = 'rightArrow'> </a> ` }) |
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 | import { gotoState, redo, undo } from '../../actions'; import stateHistory from '../../statehistory'; import store from '../../store'; export default class History { private leftArrow: string; private rightArrow: string; private stateHistory: any; private topic: string; private unsubscribe: any; private value: number; private maximum: number; constructor() { this.leftArrow = '←'; this.rightArrow = '→'; this.stateHistory = stateHistory; this.unsubscribe = store.subscribe(() => { this.topic = store.getState().topic; this.maximum = this.max(); this.value = this.val(); }); } setState(stateIndex) { store.dispatch(gotoState(stateIndex)); } previousState() { store.dispatch(undo()); } nextState() { store.dispatch(redo()); } val() { return this.stateHistory.past ? this.stateHistory.past.length : 0; } max() { return (this.stateHistory.past ? this.stateHistory.past.length : 0) + (this.stateHistory.present ? 1 : 0) + (this.stateHistory.future ? this.stateHistory.future.length : 0) - 1; } ngOnDestroy() { this.unsubscribe(); } } |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |