hi, please i’m trying to combine between gojs and reactjs … i ve been using the Diagram object and Palette everything is good , but when i wanted to use Inspector i did exactly the same thing as the documentation of the sample but i get this error … i 've tried also to create the inspector with the go.GraphObject.make; but didnt work , thank you .
It’s hard to tell since you haven’t pasted and formatted your code, but it appears that your parentheses do not match.
"use strict";
import React, { Component } from 'react';
import {Bar, Line} from 'react-chartjs-2';
import {
Badge,
Row,
Col,
Progress,
Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
Card,
CardHeader,
CardBody,
CardFooter,
CardTitle,
Button,
ButtonToolbar,
ButtonGroup,
ButtonDropdown,
Label,
Input,
Table
} from 'reactstrap';
import go, {Palette,Spot, GraphLinkModel , Inspector ,DebugInspector} from 'gojs';
import $ from 'jquery';
const GO = go.GraphObject.make;
class Dashboard extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.renderCanvas = this.renderCanvas.bind(this);
this.state = {
dropdownOpen: false,
radioSelected: 2,
};
}
toggle() {
this.setState({
dropdownOpen: !this.state.dropdownOpen
});
}
renderCanvas() {
var fill1 = "rgb(105,210,231)";
var brush1 = "rgb(65,180,181)";
let myDiagram = GO (go.Diagram ,
"diagramDiv",
{ allowDrop: true,
"grid.visible" : true,
"draggingTool.isGridSnapEnabled": false,
//"resizingTool.isGridSnapEnabled": true,
"draggingTool.dragsLink": true,
"linkingTool.isUnconnectedLinkValid": true,
"linkingTool.portGravity": 20,
"relinkingTool.isUnconnectedLinkValid": true,
"relinkingTool.portGravity": 20,
"relinkingTool.fromHandleArchetype":
GO (go.Shape, "Diamond", { segmentIndex: 0, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "tomato", stroke: "darkred" }),
"relinkingTool.toHandleArchetype":
GO (go.Shape, "Diamond", { segmentIndex: -1, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "darkred", stroke: "tomato" }),
"linkReshapingTool.handleArchetype":
GO (go.Shape, "Diamond", { desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
"rotatingTool.snapAngleMultiple": 15,
"rotatingTool.snapAngleEpsilon": 15,
"undoManager.isEnabled": true,
initialAutoScale: go.Diagram.Uniform,
"grid.gridCellSize": new go.Size(30, 20) });
/* myDiagram.nodeTemplate =
GO(go.Node, "Vertical",
GO(go.Picture,
{
width:70,
height:70,
portId:"",
fromSpot:go.Spot.Right,
toSpot:go.Spot.Left,
},
new go.Binding("source")
),
GO(go.TextBlock,
{margin:0, stroke:"black", font:"bold 16px sans-serif"},
new go.Binding("text", "name")
),
{
click : function(e,obj){
console.log("clicked on ",obj.part.data.key);
},
}
);
*/
myDiagram.nodeTemplate =
GO(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
GO(go.Shape, "Rectangle",
{
stroke: null, strokeWidth: 0,
fill: "white", // the default fill, if there is no data-binding
portId: "", cursor: "pointer", // the Shape is the port, not the whole Node
// allow all kinds of links from and to this port
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
},
new go.Binding("fill", "color")),
GO(go.TextBlock,
{
font: "bold 18px sans-serif",
stroke: '#111',
margin: 8, // make some extra space for the shape around the text
isMultiline: false, // don't allow newlines in text
editable: true // allow in-place editing by user
},
new go.Binding("text", "text").makeTwoWay())
);
// The link shape and arrowhead have their stroke brush data bound to the "color" property
myDiagram.linkTemplate =
GO(go.Link,
{ toShortLength: 3, relinkableFrom: true, relinkableTo: true }, // allow the user to relink existing links
GO(go.Shape,
{ strokeWidth: 2 },
new go.Binding("stroke", "color")),
GO(go.Shape,
{ toArrow: "Standard", stroke: null },
new go.Binding("fill", "color"))
);
var nodeDataArray = [
{ key: 1, text: "Alpha", color: "#B2DFDB", state: "one" },
{ key: 2, text: "Beta", color: "#B2B2DB", state: "two", password: "1234" },
{ key: 3, text: "Gamma", color: "#1DE9B6", state: 2, group: 5, flag: false, choices: [1, 2, 3, 4, 5] },
{ key: 4, text: "Delta", color: "#00BFA5", state: "three", group: 5, flag: true },
{ key: 5, text: "Epsilon", color: "#00BFA5", isGroup: true }
];
var linkDataArray = [
{ from: 1, to: 2, color: "#5E35B1" },
{ from: 2, to: 2, color: "#5E35B1" },
{ from: 3, to: 4, color: "#6200EA" },
{ from: 3, to: 1, color: "#6200EA" }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
// some shared model data
myDiagram.model.modelData = { test: true, hello: "world", version: 42 };
// select a Node, so that the first Inspector shows something
myDiagram.select(myDiagram.nodes.first());
var inspector = new Inspector('myInspectorDiv', myDiagram,
{
// uncomment this line to only inspect the named properties below instead of all properties on each object:
// includesOwnProperties: false,
properties: {
"text": { },
// key would be automatically added for nodes, but we want to declare it read-only also:
"key": { readOnly: true, show: Inspector.showIfPresent },
// color would be automatically added for nodes, but we want to declare it a color also:
"color": { show: Inspector.showIfPresent, type: 'color' },
// Comments and LinkComments are not in any node or link data (yet), so we add them here:
"Comments": { show: Inspector.showIfNode },
"LinkComments": { show: Inspector.showIfLink },
"isGroup": { readOnly: true, show: Inspector.showIfPresent },
"flag": { show: Inspector.showIfNode, type: 'checkbox' },
"state": {
show: Inspector.showIfNode,
type: "select",
choices: function(node, propName) {
if (Array.isArray(node.data.choices)) return node.data.choices;
return ["one", "two", "three", "four", "five"];
}
},
"choices": { show: false }, // must not be shown at al
}
});
}
componentDidMount(){
this.renderCanvas();
}
render() {
return (
<div>
<Card>
<div /*Grid Network*/
id="diagramDiv"
style={{
marginTop: "12px",
width: "100%",
display: "flex",
justifyContent: "space-between",
flexGrow: "1",
height: "1000px",
border: "solid 1px black"
}}
/>
<div id="myInspectorDiv" className="inspector"></div>
</Card>
<div id="sample">
<span style={{"display": "inline-block", "verticalAlign": "top" }}>
<div id="myInspector" className="inspector-container"> </div>
</span>
</div>
</div>
)
}
}
export default Dashboard;
here is my code … thank you for helping !
And what is the code that is causing the exception?
If you do not use JSX, do you get the exception?
var inspector = new Inspector('myInspectorDiv', myDiagram,
{
// uncomment this line to only inspect the named properties below instead of all properties on each object:
// includesOwnProperties: false,
properties: {
"text": { },
// key would be automatically added for nodes, but we want to declare it read-only also:
"key": { readOnly: true, show: Inspector.showIfPresent },
// color would be automatically added for nodes, but we want to declare it a color also:
"color": { show: Inspector.showIfPresent, type: 'color' },
// Comments and LinkComments are not in any node or link data (yet), so we add them here:
"Comments": { show: Inspector.showIfNode },
"LinkComments": { show: Inspector.showIfLink },
"isGroup": { readOnly: true, show: Inspector.showIfPresent },
"flag": { show: Inspector.showIfNode, type: 'checkbox' },
"state": {
show: Inspector.showIfNode,
type: "select",
choices: function(node, propName) {
if (Array.isArray(node.data.choices)) return node.data.choices;
return ["one", "two", "three", "four", "five"];
}
},
"choices": { show: false }, // must not be shown at al
}
});
here is the code causing exception ! its like Inspector couldnt be instantiate that way !
In a debugger could you confirm that the value of Inspector at the time the code is executed is actually the definition that was loaded from extensions/DataInspector.js? Have you verified that that code has even been loaded?