import React from 'react' ; import { observer } from 'mobx-react' ; import { Note as NoteModel } from '../core/note' ; import { editor } from '../core' ; import { Group } from './group' ; import { Note } from './note' ; export interface NotesProps { width : number ; noteHeight : number ; } @ observer export class Notes extends React . Component < NotesProps > { getNoteProps ( note ) { const { noteHeight , width } = this . props ; const sixteenthWidth = width / editor . totalSixteenths ; const indexFromMax = editor . scaleMax - note . pitch ; const y = noteHeight * indexFromMax ; const x = note . position * sixteenthWidth ; const noteWidth = note . duration * sixteenthWidth ; const isMuted = editor . isVoiceMuted ( note . voice ) ; return { x , y , height : noteHeight , width : noteWidth , isMuted } ; } render ( ) { return ( < Group > { editor . allNotes . map ( note => ( < Note key = { note . id } note = { note } { ... this . getNoteProps ( note ) } / > ) ) } < /Group>); } }