Use with React / React-native?

[davidfloegel]

Hi there,

Is it possible to use vexflow with react (react-native) at all?
I've used this library before for a phonegap based app but switching to react and would love to keep using this one!

Cheers
david

[mturley]

+1! Would be very nice. Was about to look into this myself.

[marcoalkema]

Doesn't React also use a canvas? I've been using VexFlow with Pux, which is an interface to React for the language Purescript and I'm drawing my notation on a Canvas through that. Unless I'm not fully comprehending the workings behind Pux, I assume it should be possible.

[davidfloegel]

@marcoalkema Using the canvas is not the issue - it's more including the library and rendering things.. Do you have an example of how you're doing it?

[panarch]

If you use react-dom, there's no problem at all to use vexflow.
But if you consider react-native, it's totally different. Currently it is not possible because of a single issue which is about calculating text size.(only this is the thing, if vexflow removes this dom dependency, you can generate svg file and it means you can use vexflow with react-native directly)

If there's no other volunteers, I will may handle in the future. I'm currently considering to use this (https://github.com/nodebox/opentype.js & https://github.com/icons8/svg-path-bounding-box)

[mlennon3]

I am trying to use vexflow with react-native. It's a struggle, as I'm having to do it within a WebView component. I can get a 'hello-world' type example to render, but I don't know how I can do things more dynamically. Very interested in this discussion.

[mturley]

Can we figure out what we'd need to change in Vexflow to get it working
without the DOM? That sounds like a great option.

[davidfloegel]

Oh wow, quite a few responses!

It would be great if we could look into it. I think it would be a great feature!

[panarch]

It looks many of you want this kind of standalone feature, so I changed my mind to do earlier.

I spent today and... I'm happy to share this, now vexflow can successfully generate svg files without DOM!
I used opentype.js to convert all text to svg path, and replaced getBBox to svg-path-bounding-box.
And then, for rendering svg strings I used react.
(I also considered jsdom rather than react but in my previous exp, it was too heavy and slow to use because it's purpose is covering all the dom functions, not performance.)

I added new context named SVGStringContext which extends SVGContext.

• Do you have any better name suggestion for the new context? It would be nice to use better naming but I don't have idea.

I'll clean up the codes and push to my fork and share with you tomorrow with details.

[0xfe]

That's great Taehoon. Thanks!

How about naming it TextSVGContext?

On Wed, May 4, 2016 at 2:24 PM, Taehoon Moon notifications@github.com
wrote:

It looks many of you want this kind of standalone feature, so I changed my
mind to do earlier.

I spent today and... I'm happy to share this, now vexflow can successfully
generate svg files without DOM!
I used opentype.js https://github.com/nodebox/opentype.js to convert
all text to svg path, and replaced getBBox to svg-path-bounding-box
https://github.com/icons8/svg-path-bounding-box.
And then, for rendering svg strings I used react.
(I also considered jsdom https://github.com/tmpvar/jsdom rather than
react but in my previous exp, it was too heavy and slow to use because it's
purpose is covering all the dom functions, not performance.)

I added new context named SVGStringContext which extends SVGContext.

• Do you have any better name suggestion for the new context? It would
  be nice to use better naming but I don't have idea.

I'll clean up the codes and push to my fork and share with you tomorrow
with details.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#338 (comment)

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

[davidfloegel]

Wicked!! That was fast. Any chance you can provide a basic codesample as well??

[panarch]

I push to my fork with "standalone" branch.
https://github.com/panarch/vexflow/commits/standalone
panarch@c6727ef
panarch@89c4341

grunt concat && npm run generate:current
will work.

But one more thing to fix.
I'm currently using NotoSans & NotoSerif fonts to render texts but they don't have some symbols for music notations below,

Vex.Flow.unicode = {
  // Unicode accidentals
  "sharp": String.fromCharCode(parseInt('266F', 16)),
  "flat" : String.fromCharCode(parseInt('266D', 16)),
  "natural": String.fromCharCode(parseInt('266E', 16)),
  // Major Chord
  "triangle": String.fromCharCode(parseInt('25B3', 16)),
  // half-diminished
  "o-with-slash": String.fromCharCode(parseInt('00F8', 16)),
   // Diminished
  "degrees": String.fromCharCode(parseInt('00B0', 16)),
  "circle": String.fromCharCode(parseInt('25CB', 16))
};

Because of that, I found that a single test case broken
"TextNote.TextNote_Superscript_and_Subscript"

The first one is blessed image and second thing is rendered by current fork.

For rendering musical chord symbols properly, we need special font for chord which should have sharp, flat, other symbols and latin characters.

Anyone knows any of license-free font for rendering music chord notations?

[panarch]

@0xfe I like TextSVGContext, thanks! I renamed :)

[mturley]

@taehoon, that first image is considered correct? Even though that first
superscript has the +5 occluding with the other characters? Looks broken
to me

[0xfe]

@mturley You're right, that first image is not correct, but it is blessed. It's probably an uncaught regression that originated before we had the visual regression tests. Given that the second image has the "+5" properly positioned, it seems like the bug related to measureText (as usual.)

[davidfloegel]

ah this is awesome! :)
I still don't get how to include and render something in react though.. Can someone give me a hint?

[mlennon3]

Yes this seems great, thanks for such fast response! A bit of example will really help to get started.

[infojunkie]

@panarch re open licensed font, how about Bravura? It implements SMuFL which includes chord symbols.

[panarch]

@infojunkie Yes it includes chord symbols but the issue is it does not have latin characters.
May be these are good examples,
http://www.myriad-online.com/resources/docs/melody/english/fonts.htm
https://www.myfonts.com/fonts/tijs-krammer/chord-symbols/

@davidfloegel Yeah current state may not be kind enough to refer if you are not familiar with vexflow test scripts because I just applied it to inside current test scripts. I will add code examples after fixing current chord notation font issue. After that you can easily figure out how to use.

[infojunkie]

@panarch re: fonts, it's my understanding that engraving systems typically use two fonts: one for music symbols and another for text, so it would make sense for VexFlow to follow suit. The advantage is that the engraver has the flexibility to choose any regular text font, without being limited to those that also contain music symbols. That's the idea of Bravura, Norfolk, etc.

[0xfe]

I have no problem with using multiple fonts, so long as they're public domain and license unencumbered. Feel free to add new glyphs into src/fonts/ if you need to. (I would love to have full support for Bravura in VexFlow.)

[infojunkie]

@0xfe yes, supporting multiple fonts and maybe even allowing app developers to specify their own - that don't need to be shipped with VF.

[infojunkie]

Regarding the creation of a React component for VexFlow, I think @mlennon3 and others are wondering, as I do, about how to design such a component to be reusable: the VF tests are of course trivial to wrap in a React component (the DOM/SVG issue above notwithstanding), but how would a reusable component look like? In other words, what kind of API would a generic VF React component expose to allow the app developer to dynamically specify the music to display?

To give examples of dynamic VexFlow generation:

• VexTab parses a text-based notation format to generate a VexFlow engraving
• VexFlow MusicXML parses a MusicXML file to do the same
• Varese has a React component to display chords using VF

A reusable React component would ideally expose all core VF functionality (e.g., via props) and conform to the React rendering workflow.

[panarch]

@infojunkie @0xfe I got it. My description was not enough for this. The issue is... for running vexflow without web browser, we cannot get web browser's pleasant font system support. So the alternative is opentype.js, it's really nice but currently it does not support using multiple fonts feature. So developers should manually handle fonts.
That's why I wanted to find the font which includes both latin characters and chord symbols.
It looks not too hard to contribute opentype.js to support multiple fonts but... not for now.

So I think this new TextSVGContext may not fit for many of light users because it requires users to do additional configurations. Users should manage fonts themselves, not convenient as CanvasContext or SVGContext which can use directly without any settings. TextSVGContext would be good choice for developers who wants to use vexflow in node.js or something like react-native, or better rendering performance (Because no more synchronous getBBox calling is required)

[panarch]

Possible hotfix is that I can bring chord symbols like sharp, flat, etc from BravuraText and merge into current existing fonts(NotoSans, NotoSerif). So, if there looks hard to get proper chord notation font for now, I will modify existing fonts to fit into currently broken test case; "TextNote.TextNote_Superscript_and_Subscript"

[SalahAdDin]

👍

[panarch]

@infojunkie And about React component, I'm not sure that I understand correctly. Although new TextSVGContext uses React library but it is not for providing users to make React component easily or somewhat related to React. It just need to use some kind of virtual-dom system to generate svg string and I thought ReactDOM was the best so I just used.
It's totally independent issue between TextSVGContext and reusable React component.

In case of making ideal React component which have all core VF functionality, I think it's hard for now.
For making that..., what we should do before is that I think it is making Builder API.
After we build a VexFlow builder api which is clearly divided between formatting and rendering.
Then we can try making proper VF React component which take a rendering part of the builder.

[infojunkie]

@panarch re: React component, yes I agree VF itself lacks a clear programming model. Your idea of Builder API sounds good. I will be looking into the examples I mentioned above to emulate or expand on their approaches. Re: fonts, I guess it's an ongoing area of discussion for VF...

Thanks for TextSVGContext, I'm looking forward to using it in my upcoming app project!

[dannyid]

@davidfloegel I've actually just yesterday starting playing around with getting VexFlow to dynamically update using React. My approach so far is to just destroy all the VexFlow created SVGs in willComponentReceiveProps() and redraw the entire thing based on Redux state. Have a look and let me know if you have any ideas.

https://github.com/dannyid/music-tutor/blob/master/js/components/Tutor.js

[davidfloegel]

Any progress on the use with react native? :)

[remon-nashid]

As per this post in Vexflow google group, @panarch has thankfully introduced an SVG rendering context (TextSVGContext) that works with react-native.

The context could be found in Taehoon's fork of Vexflow repo https://github.com/panarch/vexflow/commits/standalone

I tried to run the included tools/demo.js on android emulator, after making few unrelated changes. Unfortunately, I hit an error at this line:

import ReactDOMServer from 'react-dom/server';

Error message:
EventPluginRegistry: Cannot inject event plugin ordering more than once. You are likely trying to load more than one copy of React.
The error is not entirely clear to me, but I wonder how useful ReactDOM(Server) is in react-native. Same issue was reported here, and is still unresolved.

Could someone give that demo a try? Hope it works.

[gristow]

Sounds like maybe react-native-svg isn't processing absolute vs relative move commands in paths correctly. (Absolute is capital M, relative is lower case m.)

[panarch]

Hi everyone, I have a good news.

Now VexFlow runs with React Native including font rendering.
You can use this, https://github.com/panarch/standalone-vexflow-context
and seed project url is here, https://github.com/panarch/react-native-vexflow-seed
I think it will work fine for any cases, but I didn't integrate VexFlow tests with this new context yet so it may have some bugs.

I wanted to participate since @matt-gardner reactivated but huh, I was having quite tough schedule on my 6 weeks trip so... now it's the last week of my long vacation and I made some work.
Thanks @matt-gardner for participation, I was able to avoid the absolute path of react-native-svg bug easily because of you.

At first, I thought making VexFlow run with React Native might be similar with Node.js, but it was very different issue.

What I did first was replacing my previous TextSVGContext render function to use react-native-svg rather than react server-side rendering function.

Then, other big issue was font.
Because we cannot use powerful font feature of web browsers in Node.js & React Native, I used some tricks for making VexFlow run on Node.js.(far above on this thread I mentioned)

It was easy to use file system in Node.js, but in React Native... it looked little bit messy to use file system directly for loading font files.
So, for making the issue simple, I just converted raw font files to base64 to solve.
(Similar work what https://github.com/mudcube/MIDI.js/ does for soundfont)

standalone-vexflow-context currently only supports react native for now.
I'll add Node.js context later.

[davidfloegel]

That is amazing!! Thank you so much :)

[SalahAdDin]

@panarch, thank you very much, why will you add Node.js context?

[panarch]

@SalahAdDin I just want to run VexFlow in my server without browser emulation. With Node.js context, we can render VexFlow without browser so it can make sense in may purposes.

[msand]

@panarch @davidfloegel @0xfe I've done a lot of work to improve the svg spec conformance and rendering accuracy of react-native-svg on android. You might want to try testing my fork, until it gets ported to ios and merged into master.

software-mansion/react-native-svg#406

https://github.com/msand/react-native-svg/tree/5.3.0-conformance

[msand]

I'm currently implementing and improving
https://drafts.csswg.org/css-inline/#propdef-alignment-baseline and
https://svgwg.org/svg2-draft/text.html#AlignmentBaselineProperty

Therefore, I need access to the os2 and hhea baseline tables from all the glyphs in the used fonts.
https://www.microsoft.com/typography/otspec/base.htm
https://www.microsoft.com/typography/otspec/os2.htm
https://www.microsoft.com/typography/otspec/hhea.htm
https://developer.apple.com/fonts/TrueType-Reference-Manual/RM06/Chap6bsln.html

Which is probably highly relevant to your use cases as well. Related material:
http://bl.ocks.org/eweitnauer/7325338
http://apike.ca/prog_svg_text_style.html
http://christopheraue.net/2014/03/05/vertical-align/
http://vanseodesign.com/web-design/svg-text-baseline-alignment/
https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
https://stackoverflow.com/questions/19856094/computing-font-truetype-hhea-values-ascender-descender

I'm now in the choice of opentype.js and something like:
https://software.intel.com/en-us/articles/building-freetype-libraries-for-x86-devices-using-the-android-ndk

opentype.js would allow keeping all the logic in js, instead of both java + obj-c, but might have a performance impact. While building on and bundling freetype probably adds more to the app size and requires the NDK. Then again, the data only needs to be parsed once per configured font. Any suggestions/input?

[msand]

@matt-gardner you should probably get a mention about the fork/pull request as well

[msand]

I've forked the seed project, updated react, react-native, and, react-native-svg (using both master and my fork), ported the code to android, and updated the android build setup. If anyone is interested you can check it out here: https://github.com/msand/react-native-vexflow-seed

[msand]

[0xfe]

Wow, looks great Mike! Thanks for doing this. Would you mind adding some instructions to the Wiki?

[njwest]

Happy to find this thread! You guys have done some awesome work

I get the following error after I git clone, npm i, and react-native run-ios@msand's fork of https://github.com/msand/react-native-vexflow-seed

[msand]

@njwest Haven't touched this for quite some time, I guess there's newer/more changes in react-native-svg that I need to adapt the code to, or then I had monkey-patched it to work around that problem. Might look at it in the weekend.

[njwest]

@msand Many thanks for the response -- could you post the package versions your fork works with?

[ulisinn]

"dependencies": { "lodash": "^4.17.4", "midiutils": "0.0.4", "mobx": "^3.3.2", "mobx-react": "^4.3.5", "react": "16.0.0", "react-native": "0.50.4", "react-native-svg": "^6.0.1-rc.1", "standalone-vexflow-context": "^0.1.1", "tonal": "^1.1.0", "vexflow": "^1.2.84" }

[ulisinn]

https://github.com/panarch/standalone-vexflow-context

[SalahAdDin]

@ulisinn, hi man, it's your project a open source project?

[njwest]

Sweet project! I am also a trumpet player :P

[sschmidTU]

You can simply create a Vexflow component for React.
It works for OSMD, which has the same setup as Vexflow (handing it a div container).
Here's example code, you can pretty much just exchange the OpenSheetMusicDisplay.jsx in the lib folder:
https://github.com/opensheetmusicdisplay/react-opensheetmusicdisplay/tree/master/src

Maybe this will still help someone.

[RemyNtshaykolo]

https://github.com/panarch/standalone-vexflow-context

Thank you so much for this!

[obinnanprogrammed]

standalone-vexflow-context is fantastic, however, it cannot work with the latest version of Vexflow, as its peer dependencies require a Vexflow version prior to version 2 (which has gotta be extremely old), and the latest version of Vexflow requires calls to the DOM. I may fork standalone-vexflow-context and try to modify it so it can work with Vexflow 4.x.y, though I don't imagine it will be easy if it's even possible.

[DaveGeneral]

这是来自QQ邮箱的假期自动回复邮件。已收到，-_-

[SalahAdDin]

这是来自QQ邮箱的假期自动回复邮件。已收到，-_-

what?

[obinnanprogrammed]

Update: turns out altering standard-vexflow-context won't do anything. What allowed for standard-vexflow-context to work with Vexflow all the way back then will not work now as Vexflow is written is TypeScript, and the element property for the renderer has to be an HTML element. Honestly, it's easier to use a WebView at this point, but having to write the HTML as a string is...not ideal.