Passing DOM element to Factory's renderer.elementId param

[devboell]

I am wondering about the EasyScore example, and how you configure the renderer by means of the Factory.

Because I am using React I don't want to use getElementById, but get the DOM element with React Component's ref attribute

Although the Factory explicitly asks for a elementId, I see in Renderer that it is still ok to pass the element itself.

    this.element = document.getElementById(elementId);
    if (!this.element) this.element = elementId;

Can I safely assume this option will remain available in the future?

[allan-simon]

wouldn't it be best to add a new option "element" to make it more explicit (while keeping the possibility to give element as elementId ?, so that you don't break backward compatibility )

[alindsay55661]

I also would like to use (rely on) this option so would appreciate a formal acknowledgment in the API. Even the ability to pass a Renderer directly (instead of renderer configuration) would be great. Either of these would be great:

// Factory 'renderer' config accepts an 'element' property as a DOM element
const vf = new Vex.Flow.Factory({renderer: { element: vexElementRef.current }});

// Factory 'renderer' option accepts a vex renderer instance
const renderer = new Renderer(vexElementRef.current, Renderer.Backends.SVG);
const vf = new Vex.Flow.Factory({renderer});

[rvilarl]

Looking into that we do have a inconsistency between the parameter used by:

• Factory which is defined as string | null , and
• Renderer which is defined as string | HTMLCanvasElement | HTMLDivElement | RenderContext

It would make sense to accept the same possibilities in Factory, wouldn't it?