Dfyjkt

How to bring rest not higher or lower (don't change key "r/4"). Link demo: JSFindle

Here is code demo:

// Create the notes

 new VF.StaveNote( keys: ["c/4", "e/4", "g/4"], duration: "q" )

It's not clear what you're trying to do musically, but looking at the JSFiddle, you have 2 voices on the same stave and the rest from the first voice is overlapping with the second note from the second voice.

One voice creates the rest with this code:

 new VF.StaveNote( keys: ["r/4"], duration: "qr" ),

and another voice has a note at the same position as the rest:

 new VF.StaveNote( keys: ["c/5"], duration: "h" )

Assuming that the note in the second voice is where you want it to be, you can control the vertical position of the rest in the first voice so that it doesn't overlap. You can do this by using a note letter indicating how high you want the rest to appear on the stave. For example replace this code:

 new VF.StaveNote( keys: ["r/4"], duration: "qr" ),

with this code:

 new VF.StaveNote( keys: ["c/4"], duration: "qr" ),

and your rest will appear at C4 below the C5 note that it currently overlaps with.

If you don't want to change key "r/4", you could change key "c/4" to avoid the overlap.

If you really want the rest and note to appear at the same height on the stave but not overlapping, I think you will end up with something that is not readable as music, but you can always take complete control over the position of a StaveNote (either the note or the rest) by deriving your own class from StaveNote and overriding getAbsoluteX:

class FixedStaveNote extends VF.StaveNote 
 getAbsoluteX() 
 return 72;
 
;

(You would need to do this for both of the overlapping StaveNotes and return different values. If you only do it for the first one, the formatter will align the second one to it).

And finally if you want to control the vertical position of the rest without changing key "r/4", you could override calculateKeyProps:

class FixedStaveNote extends VF.StaveNote 
 calculateKeyProps() 
 super.calculateKeyProps();

 for (let i = 0; i < this.keyProps.length; ++i) 
 const props = this.keyProps[i];
 if (props.key === 'R') 
 props.line = 0;
 
 
 

This changes the stave line at which the rest will appear.

Here's an updated JSFiddle with no overlap using the override of calculateKeyProps.