Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic React component in ControlNode (Read 909 times)
jarv2003
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 7
Joined: Jan 21st, 2010
React component in ControlNode
Sep 14th, 2022 at 4:59pm
Print Post  
Is there a way to include a React component as a ControlNode in the diagram. In the winforms ,net I think we are able to include custom controls in the ControNode and CompositeNode,

Please let me know

Thanks
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: React component in ControlNode
Reply #1 - Sep 15th, 2022 at 8:34am
Print Post  
You could call ReactDOM.render from onNodeDomCreated handler:

Code
Select All
<DiagramView
    diagram={diagram}
    {...props}
    onControlLoaded={() => onControlLoaded()}
    onNodeDomCreated={(sender, args) => onNodeDomCreated(sender, args)}
    ref={diagramViewElement} />

const onControlLoaded = () => {
    setDiagramView(diagramViewElement.current);

    // ControlNode constructor needs DiagramView reference
    var node1 = new Diagramming.ControlNode(diagramViewElement.current);
    node1.template = (`<div></div>`);
    node1.bounds = new Drawing.Rect(50, 50, 40, 80);
    diagram.addItem(node1);
}

const onNodeDomCreated = (sender, args) => {
    ReactDOM.render(
        <NodeListView
            nodes={initNodeListView()[0]}
            captions={initNodeListView()[1]}>
        </NodeListView>,
        args.node.content, () => {
            document.querySelector(".mf_diagram_controlNodeContent").querySelector("canvas").dataset.interactive = true;
        })
} 



This is modification of the Samples/React/JavaScript/src/Controls.js example.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint