Updating a StaveNote

[cortez]

Hi all,

In my app I have a requirement to update a StaveNote that has already been rendered - specifically, I want to be able to respell accidentals. Currently I am doing this by first removing the associated element from the DOM (I am using the SVG backend), then creating a new StaveNote with certain properties copied from the old one (since I am respelling the accidentals, the new note's keys, keyProps and modifiers arrays will have different contents). Finally I set the new note to the position in the tickables array occupied by the old note, and call its preFormat() and draw() methods.

My code sets the id, voice, stave, clef, duration, render context and tickContext for the new note. This works, bit it's a rather cumbersome process. I can't see another way to do it, however, since the new note needs to retain all of this information (and also formatting information, which preFormat() and draw() seem to take care of) from the old note.

Is there a better way to achieve what I want? Perhaps simply modify the original note in place? Or simply do a shallow copy by iterating over and copying the contents of all the original note's properties?

C

[Mohit Muthanna Cheppudira]

The best way to do stuff like this is to wrap your element in a model:

class NoteModel {

   attrs notes, accidentals, modifiers;

   function render()

}

The render function will destroy and recreate a new StaveNote with your attributes. This approach will 1) decouple your model from VexFlow, 2) protect you from the implementation details of VexFlow (so when it changes, you're still safe), 3) allow you serialize/deserialize your notation in a predictable way.

Shallow copying or in-place modifications may work initially, but there be dragons.

--
--
You received this message because you are subscribed to the Google
Groups "vexflow" group.
To post to this group, send email to vex...@googlegroups.com
To unsubscribe from this group, send email to
vexflow+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/vexflow?hl=en

---
You received this message because you are subscribed to the Google Groups "vexflow" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vexflow+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Mohit Muthanna [mohit (at) muthanna (uhuh) com]

[cortez]

Thanks Mohit. Is that an ES6 technique? I'm afraid I haven't 'upgraded', I'm still generally using IIFE modules (prefer them).

Where might something like that be defined?

[Mohit Muthanna Cheppudira]

On Fri, May 20, 2016 at 12:30 PM, cortez <relati...@hotmail.co.uk> wrote:

Thanks Mohit. Is that an ES6 technique? I'm afraid I haven't 'upgraded', I'm still generally using IIFE modules (prefer them).

That was just a language-agnostic syntax. The technique is a standard pattern, and you can implement it however (e.g., in a JS module.)

[cortez]

Indeed, got it. Thanks Mohit.

C