{"action":"closed","issue":{"url":"https://api.github.com/repos/0xfe/vexflow/issues/340","repository_url":"https://api.github.com/repos/0xfe/vexflow","labels_url":"https://api.github.com/repos/0xfe/vexflow/issues/340/labels{/name}","comments_url":"https://api.github.com/repos/0xfe/vexflow/issues/340/comments","events_url":"https://api.github.com/repos/0xfe/vexflow/issues/340/events","html_url":"https://github.com/0xfe/vexflow/issues/340","id":153629273,"number":340,"title":"How do I dynamically position voices based on key signature width?","user":{"login":"dannyid","id":2874913,"avatar_url":"https://avatars.githubusercontent.com/u/2874913?v=3","gravatar_id":"","url":"https://api.github.com/users/dannyid","html_url":"https://github.com/dannyid","followers_url":"https://api.github.com/users/dannyid/followers","following_url":"https://api.github.com/users/dannyid/following{/other_user}","gists_url":"https://api.github.com/users/dannyid/gists{/gist_id}","starred_url":"https://api.github.com/users/dannyid/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dannyid/subscriptions","organizations_url":"https://api.github.com/users/dannyid/orgs","repos_url":"https://api.github.com/users/dannyid/repos","events_url":"https://api.github.com/users/dannyid/events{/privacy}","received_events_url":"https://api.github.com/users/dannyid/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/0xfe/vexflow/labels/question","name":"question","color":"c5def5"}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-05-08T01:44:10Z","updated_at":"2016-08-21T19:07:21Z","closed_at":"2016-08-21T19:07:21Z","body":"I'm working on a web app that will dynamically update a vexflow generated score based on user input. \r\n\r\nMy approach so far is to destroy all the vexflow created SVGs and redraw the whole canvas from scratch at every change. \r\n\r\nAn issue I'm running into is that based on what key signature I've chosen to display, I have to re-calculate \r\n\r\n-The total width of the staves\r\n-The width for the voice formatter\r\n-The `noteStartX` values for my voices\r\n\r\nIs there a best approach for this? The way I'm currently doing it is by \r\n\r\n-Drawing a staff with a key signature\r\n-Measuring its `start_x`\r\n-Subtracting `79.4353` that value from value, which is the value of `start_x` for C Major\r\n-Destroying the dummy staff and then\r\n-Using the newly calculated offset to push the aforementioned three values to the right that far on a new staff\r\n\r\nIt feels a little gross. A segment of my code below. \r\n\r\n```javascript\r\n    this.topStaff = new Vex.Flow.Stave(20, 0, this.staveWidth)\r\n      .addClef(\"treble\")\r\n      .addTimeSignature(this.props.timeSig)\r\n      .addKeySignature(this.props.keySig)\r\n      .setContext(this.ctx)\r\n      .draw();\r\n\r\n    // The staff is drawn above, then the offset width is gotten below.\r\n    // 79.4353 is the default width for C Major so that's what the\r\n    // start_x is with no keySig selected\r\n    this.offsetX = this.topStaff.start_x - 79.4353;\r\n\r\n    // Then the dummy staff is cleared to make room for the real staves\r\n    this.clearCanvas();\r\n\r\n    // Now put real staves in with offset included in staff width\r\n    this.topStaff = new Vex.Flow.Stave(20, 0, this.staveWidth + this.offsetX)\r\n      .addClef(\"treble\")\r\n      .addTimeSignature(this.props.timeSig)\r\n      .addKeySignature(this.props.keySig)\r\n      .setContext(this.ctx)\r\n      .draw();\r\n```\r\nlater...\r\n```javascript\r\n    // adding voices\r\n    this.topVoice.addTickables(this.props.topNotes);\r\n    this.bottomVoice.addTickables(this.props.bottomNotes);\r\n\r\n    const formatter = new Vex.Flow.Formatter();\r\n    formatter.joinVoices([this.topVoice])\r\n    formatter.joinVoices([this.bottomVoice])\r\n    formatter.format([this.topVoice, this.bottomVoice], this.staveWidth + this.offsetX);\r\n\r\n    const maxX = Math.max(this.topStaff.getNoteStartX(), this.bottomStaff.getNoteStartX());\r\n    this.topStaff.setNoteStartX(maxX + 24);\r\n    this.bottomStaff.setNoteStartX(maxX + 24);\r\n\r\n    this.topVoice.draw(this.ctx, this.topStaff);\r\n    this.bottomVoice.draw(this.ctx, this.bottomStaff);\r\n```\r\nUpdate: The notes do seem to themselves account for time signature presence, but not key signature as far as I can tell. "}}
{"actor":{"display_login":"0xfe"}}