GoJS with React, gojs-react

throughgojs-reactSimplified use of Gojs in react projects,gojs-reactprovidesReactDiagram ，ReactPalette ，ReactOverviewFor use,gojs-react-basicSample usage is provided.
  1. The installationnpm install gojs gojs-react
  2. To set the canvas style, specify the width/height.
    /* App.css */
.diagram-component {
  width: 400px;
  height: 400px;
  border: solid 1px black;
  background-color: white;
}
Copy the code
  3. The base application
    // App.js import React from 'react'; import * as go from 'gojs'; import { ReactDiagram } from 'gojs-react'; import './App.css'; /** * Initialize chart method, this method is used to create chart initialization model template; */ function initDiagram() {const $= go.graphobject.make; const diagram = $(go.Diagram, { 'undoManager.isEnabled': // UndoManager should always be enabled to allow transactions to occur, But it is possible to UndoManager. MaxHistoryLength set to zero in order to prevent the undo and redo / / 'UndoManager. MaxHistoryLength' : 0, / / uncomment to disable the undo/redo function 'clickCreatingTool. ArchetypeNodeData' : {text: 'new node, color:' lightblue}, model: $(go.graphlinksModel, {linkKeyProperty: 'key'})}); diagram.nodeTemplate = $(go.Node, 'Auto', new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), $(go.Shape, 'RoundedRectangle', { name: 'SHAPE', fill: New go.binding ('fill', 'color')), $(go.textBlock, {margin: 8, editable: true }, new go.Binding('text').makeTwoWay() ) ); return diagram; } function handleModelChange(changes) { alert('GoJS model changed! '); Function App() {return (<div>... <ReactDiagram initDiagram={initDiagram} divClassName='diagram-component' nodeDataArray={[ { key: 0, text: 'Alpha', color: 'lightblue', loc: '0 0' }, { key: 1, text: 'Beta', color: 'orange', loc: '150 0' }, { key: 2, text: 'Gamma', color: 'lightgreen', loc: '0 150' }, { key: 3, text: 'Delta', color: 'pink', loc: '150 150' } ]} linkDataArray={[ { key: -1, from: 0, to: 1 }, { key: -2, from: 0, to: 2 }, { key: -3, from: 1, to: 1 }, { key: -4, from: 2, to: 3 }, { key: -5, from: 3, to: 0 } ]} onModelChange={handleModelChange} /> ... </div> ); }Copy the code

    Drawing fishbone diagram is realized by referring to Vue + Gojs drawing fishbone diagram, which needs to introduce fishbonelayout.js

  4. Get photo
    • makeImagereturn<img src='... base64... '>

    • MakeImageData returns a Base64 string (if displayed as black, without lines, try to change background: ‘white’)

      This method uses HTMLCanvasElement’s toDataURL method to create a data URL, or Canvas Context’s getImageData method. Unlike toDataURL, this method does not throw an error if cross-domain images are drawn on the canvas, but instead returns the data URL of the bitmap that ignores those images

    According to the above official provided by the basic case and the method of obtaining pictures, will subconsciously think to write ininitDiagramThe corresponding method is actually written here to fetch data null, presumably because no Dom elements are generated at this step.
    withuseRefSet variables ininitDiagramThe corresponding method is going to bediagramAssign to the corresponding variable, and then inonModelChangeCorresponding method to obtain the corresponding value by the method of obtaining pictures.
    Import React, {useRef} from 'React '; / /... Omit other import introduce... const Diagram = ({}) => { const diagramRef = useRef(null); const initDiagram = () => { const $ = go.GraphObject.make; const diagram = $(go.Diagram, { isReadOnly: true }); . diagramRef.current = diagram; return diagram; }; const handleModelChange = (changes) => { diagramRef.current.makeImageData({ background: 'white', type:'image/jpeg' }); }; / /... Omit other setting methods... return ( <ReactDiagram initDiagram={initDiagram} onModelChange={handleModelChange} // ... Omit other Settings... / >); } export default Diagram; ```react + gojsCopy the code

GoJS with React, gojs-react

throughgojs-reactSimplified use of Gojs in react projects,gojs-reactprovidesReactDiagram ，ReactPalette ，ReactOverviewFor use,gojs-react-basicSample usage is provided.
  1. The installationnpm install gojs gojs-react
  2. To set the canvas style, specify the width/height.
    /* App.css */
.diagram-component {
  width: 400px;
  height: 400px;
  border: solid 1px black;
  background-color: white;
}
Copy the code
  3. The base application
    // App.js import React from 'react'; import * as go from 'gojs'; import { ReactDiagram } from 'gojs-react'; import './App.css'; /** * Initialize chart method, this method is used to create chart initialization model template; */ function initDiagram() {const $= go.graphobject.make; const diagram = $(go.Diagram, { 'undoManager.isEnabled': // UndoManager should always be enabled to allow transactions to occur, But it is possible to UndoManager. MaxHistoryLength set to zero in order to prevent the undo and redo / / 'UndoManager. MaxHistoryLength' : 0, / / uncomment to disable the undo/redo function 'clickCreatingTool. ArchetypeNodeData' : {text: 'new node, color:' lightblue}, model: $(go.graphlinksModel, {linkKeyProperty: 'key'})}); diagram.nodeTemplate = $(go.Node, 'Auto', new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), $(go.Shape, 'RoundedRectangle', { name: 'SHAPE', fill: New go.binding ('fill', 'color')), $(go.textBlock, {margin: 8, editable: true }, new go.Binding('text').makeTwoWay() ) ); return diagram; } function handleModelChange(changes) { alert('GoJS model changed! '); Function App() {return (<div>... <ReactDiagram initDiagram={initDiagram} divClassName='diagram-component' nodeDataArray={[ { key: 0, text: 'Alpha', color: 'lightblue', loc: '0 0' }, { key: 1, text: 'Beta', color: 'orange', loc: '150 0' }, { key: 2, text: 'Gamma', color: 'lightgreen', loc: '0 150' }, { key: 3, text: 'Delta', color: 'pink', loc: '150 150' } ]} linkDataArray={[ { key: -1, from: 0, to: 1 }, { key: -2, from: 0, to: 2 }, { key: -3, from: 1, to: 1 }, { key: -4, from: 2, to: 3 }, { key: -5, from: 3, to: 0 } ]} onModelChange={handleModelChange} /> ... </div> ); }Copy the code

    Drawing fishbone diagram is realized by referring to Vue + Gojs drawing fishbone diagram, which needs to introduce fishbonelayout.js

  4. Get photo
    • makeImagereturn<img src='... base64... '>

    • MakeImageData returns a Base64 string (if displayed as black, without lines, try to change background: ‘white’)

      This method uses HTMLCanvasElement’s toDataURL method to create a data URL, or Canvas Context’s getImageData method. Unlike toDataURL, this method does not throw an error if cross-domain images are drawn on the canvas, but instead returns the data URL of the bitmap that ignores those images

    According to the above official provided by the basic case and the method of obtaining pictures, will subconsciously think to write ininitDiagramThe corresponding method is actually written here to fetch data null, presumably because no Dom elements are generated at this step.
    withuseRefSet variables ininitDiagramThe corresponding method is going to bediagramAssign to the corresponding variable, and then inonModelChangeCorresponding method to obtain the corresponding value by the method of obtaining pictures.
    Import React, {useRef} from 'React '; / /... Omit other import introduce... const Diagram = ({}) => { const diagramRef = useRef(null); const initDiagram = () => { const $ = go.GraphObject.make; const diagram = $(go.Diagram, { isReadOnly: true }); . diagramRef.current = diagram; return diagram; }; const handleModelChange = (changes) => { diagramRef.current.makeImageData({ background: 'white', type:'image/jpeg' }); }; / /... Omit other setting methods... return ( <ReactDiagram initDiagram={initDiagram} onModelChange={handleModelChange} // ... Omit other Settings... / >); } export default Diagram;Copy the code