Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic diagram component for React, beta version (Read 1435 times)
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
diagram component for React, beta version
Feb 19th, 2020 at 2:23pm
Print Post  
We are beta testing a React DiagramView component. It renders a MindFusion.Diagramming.Diagram instance assigned to "diagram" prop as its model. At this time the following properties can be set from JSX too: allowInplaceEdit, autoResize, backBrush, behavior, defaultShape, enabled, linkHeadShapeSize, linkShape, roundedLinks, routeLinks, showAnchors, showGrid. All diagram events can be handled through JSX syntax as well:

Code
Select All
this.state.diagram = new mf.Diagramming.Diagram();
...
<DiagramView
    diagram={this.state.diagram}
    {...props}
    onNodeClicked={(diagram, args) => this.onDiagramNodeClicked(diagram, args)}
    onLinkCreating={(diagram, args) => this.onDiagramLinkCreating(diagram, args)}
    onDiagramChanged={diagram => this.onDiagramChanged(diagram)} /> 



If anyone is interested in trying this out, please install the library from npm:
Code
Select All
npm i diagram-library-react@1.0.0-beta.2 



Several examples are available here:
https://mindfusion.eu/_beta/react-diagram-samples.zip

Any comments, questions and general feedback are welcome.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: diagram component for React, beta version
Reply #1 - Apr 23rd, 2020 at 5:14am
Print Post  
The helper diagram UI controls are now available as React components too:

Overview
The Overview component provides following props: id, diagram, enabled, backColor, dimColor, scaleFactor, scaleMode, allowZoom, autoScrollAmount

NodeListView
NodeListView provides following props: id, enabled, iconSize, defaultNodeSize, padding, orientation, tooltipDelay, shapeLibraryLocation, nodes, captions. It raises nodeSelected event when a node is selected in the view. The addNode(node, caption) method can be used to add nodes from code-behind, while nodes and captions props can be set to arrays of nodes and their captions.

ZoomControl
ZoomContro provides following props: id, diagram, enabled, cornerRadius, padding, snapToZoomStep, tickPosition, showLabel, textColor, shadowColor, innerColor, borderColor, activeColor, fill, backColor, scrollStep, zoomStep, maxZoomFactor, minZoomFactor, zoomFactor.

Ruler
Ruler provides following props: id, unit, enableGuides, projectRotatedBounds, negatedY, negatedX, verticalScaleVisible, horizontalScaleVisible, pointerColor, textColor, guideColor, projectionColor, backColor, foreColor. The Ruler should be set as the parent component of DiagramView:

Code
Select All
<Ruler>
    <DiagramView diagram={this.state.diagram} ... />
</Ruler> 



The new components are available in diagram-library-react@1.0.0 version on npm. Updated sample project here shows them on last tab page:
https://mindfusion.eu/_beta/react-diagram-samples.zip
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint