Hi I am getting error when i trying to use gojs in my project. I am attaching my error below.
Please check and let me know the solution
Node version :- v20.8.1
“vue”: “^3.3.4” (latest version)
“gojs”: “^2.3.11”,
What is your code that is causing the exception?
The Shape.geometryStretch property, as documented: Shape | GoJS API , should accept a value such as go.GraphObject.Default. Although I do not know why you would want to set that property to that value rather than one of the other possible values, since that is the initial value for that property.
I am not getting you could you please tell me why i am getting this issue ?
If you would please show us the code causing the exception, I might be able to tell you.
You can check below code
This below code is causing problem
){throw Error(a);}function va(a,b){a=“The object is frozen, so its properties cannot be set: “+a.toString();void 0!==b&&(a+=” to value: “+b);C(a)}function xa(a,b,c,d){c=null===c?”*”:“string”===typeof c?c:“function”===typeof c&&“string”===typeof c.className?c.className:“”;void 0!==d&&(c+=“.”+d);C(c+" is not in the range “+b+”: “+a)}function ya(a){x.console&&x.console.log(a)}function za(a){return"object”===typeof a&&null!==a}
function Aa(a){return Array.isArray(a)||x.NodeList&&a instanceof x.NodeList||x.HTMLCollection&&a instanceof x.HTMLCollection}function Ba(a){return Array.prototype.slice.call(a)}function Ca(a,b,c){Array.isArray(a)?b>=a.length?a.push(c):a.splice(b,0,c):C("Cannot insert an object into an HTMLCollection or NodeList: “+c+” at "+b)}function Da(a,b){Array.isArray(a)?b>=a.length?a.pop():a.splice(b,1):C("Cannot remove an object from an HTMLCollection or NodeList at "+b)}
I meant your code. And what is the stack trace?
Please check my below code which is in Vue.js 3
let me know why i am getting the error. You can check below i have declared graphData in which i have mentioned dummy json data.
let me know why i am getting error
export default {
name: “Test”,
components: {},
props: {},
data() {
return {
loading: true,
node: null,
myDiagram: [],
nodeDataArray: null,
linkDataArray: null,
tblNodeFlag: false,
zoomIn: 0,
zoomFlag: 0,
graphList:[],
graphData:{
“unknownNodeIds”: [],
“nodeIds”: [
192080
],
“nodeDataArray”: [
{
“packageName”: “test.testexample.testdemo.stestervice”,
“name”: “HelloServicetest”,
“type”: “CLASS”,
“key”: “group_0”,
“fields”: [
{
“name”: “gtestreeting(test.lang.String)”,
“type”: “METHOD”,
“key”: “192080”,
“colorFlag”: false
}
],
“colorFlag”: false
},
{
“packageName”: “comtest.exampletest.demotest.domaintest”,
“name”: “Greetingtest”,
“type”: “CLASS”,
“key”: “group_1”,
“fields”: [
{
“name”: “greettest()”,
“type”: “METHOD”,
“key”: “192081”,
“colorFlag”: false
}
],
“colorFlag”: false
},
{
“packageName”: “com.example.demo.service”,
“name”: “HelloServiceImpl”,
“type”: “CLASS”,
“key”: “group_2”,
“fields”: [
{
“name”: “greeting(java.lang.String)”,
“type”: “METHOD”,
“key”: “192086”,
“colorFlag”: false
}
],
“colorFlag”: false
},
{
“packageName”: “com.example.demo.controller”,
“name”: “HelloController”,
“type”: “CLASS”,
“key”: “group_3”,
“fields”: [
{
“name”: “index()”,
“type”: “METHOD”,
“key”: “192074”,
“colorFlag”: false
}
],
“colorFlag”: false
},
{
“name”: “”,
“type”: “URI”,
“key”: “group_4”,
“fields”: [
{
“name”: “/:GET”,
“type”: “URI”,
“key”: “192075”,
“colorFlag”: false
}
],
“colorFlag”: false
}
],
“linkDataArray”: [
{
“from”: “group_0”,
“fromPort”: “192080”,
“to”: “group_2”,
“toPort”: “192086”
},
{
“from”: “group_2”,
“fromPort”: “192086”,
“to”: “group_1”,
“toPort”: “192081”
},
{
“from”: “group_4”,
“fromPort”: “192075”,
“to”: “group_3”,
“toPort”: “192074”
},
{
“from”: “group_3”,
“fromPort”: “192074”,
“to”: “group_0”,
“toPort”: “192080”
}
]
}
};
},
computed: {},
watch: {
graphList(newValue, oldValue) {
if (newValue !== oldValue) {
this.graphList = newValue;
this.myDiagram.div = null;
if (this.graphList != null || this.graphList != undefined) {
this.nodeDataArray = this.graphList.nodeDataArray;
this.linkDataArray = this.graphList.linkDataArray;
this.selectNode = this.nodeId;
this.zoomFlag = 0;
this.zoomIn = 0.5;
this.graphRender();
}
}
},
},
created() {
this.graphList = this.graphData;
console.log("Created ", this.graphList.nodeDataArray);
},
methods: {
onClickZoomOut() {
if (this.zoomFlag == 0) {
this.zoomIn = this.myDiagram.scale;
}
if (this.zoomIn > 0.1002) {
if (this.myDiagram.minScale > 0) {
if (this.myDiagram.maxScale > 0) {
this.zoomIn -= 0.3;
this.myDiagram.maxScale = this.zoomIn;
this.zoomFlag = 1;
}
}
}
},
onClickZoomIn() {
if (this.zoomFlag == 0) {
this.zoomIn = this.myDiagram.scale;
}
this.zoomIn += 0.3;
this.myDiagram.minScale = this.zoomIn;
this.myDiagram.maxScale = this.zoomIn;
this.zoomFlag = 1;
//document.body.style.zoom = “110%”
},
resetWindow() {
this.myDiagram.model = $(go.GraphLinksModel, {
copiesArrays: true,
copiesArrayObjects: true,
linkFromPortIdProperty: "fromPort",
linkToPortIdProperty: "toPort",
nodeDataArray: [],
linkDataArray: [],
});
this.selectNode = null;
},
graphRender() {
let _this = this;
const $ = go.GraphObject.make;
this.myDiagram = go.Diagram.licenseKey ="Test"
this.myDiagram = $(go.Diagram, "myDiagramDiv", {
allowCopy: false,
allowZoom: true,
allowMove: true,
layout: $(go.TreeLayout),
minScale: 0.3,
maxScale: 3,
initialAutoScale: go.Diagram.Uniform,
contentAlignment: go.Spot.Center,
scale: go.Diagram.documentBounds,
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
maxSelectionCount: 1,
ChangedSelection: (e) => {
const node = e.subject.first();
if (node instanceof go.Node) {
const coll = new go.Set(node.findTreeParentChain());
coll.addAll(node.findTreeParts());
e.diagram.highlightCollection(coll);
e.diagram.nodes.each((n) => (n.opacity = coll.has(n) ? 1 : 0.75));
e.diagram.links.each((l) => (l.opacity = coll.has(l) ? 1 : 0.75));
} else {
// back to normal
e.diagram.clearHighlighteds();
e.diagram.nodes.each((n) => (n.opacity = 0.9));
e.diagram.links.each((l) => (l.opacity = 0.9));
}
},
"undoManager.isEnabled": true,
});
var bluegrad = $(go.Brush, "Linear", { 0: "#7479a2", 1: "#7479a2" });
var selectgrad = $(go.Brush, "Linear", { 0: "#6a75d4", 1: "#6a75d4" });
var fieldTemplate = $(
go.Panel,
"TableRow",
new go.Binding("portId", "key"),
{
background: "transparent",
fromSpot: go.Spot.LeftRightSides,
toSpot: go.Spot.LeftRightSides,
fromLinkable: true,
toLinkable: true,
},
{
click: (e, item) => {
item.panel.elements.each((it) => {
it.background = "transparent";
});
_this.subNodeName = item.data;
if (item.background === "transparent") {
item.background = "lightblue";
} else {
item.background = "transparent";
}
},
},
$(
go.TextBlock,
{
margin: new go.Margin(5, 0, 0, 0),
column: 2,
stroke: "black",
font: "normal 12px",
alignment: go.Spot.Left,
// and disallow drawing links from or to this text:
fromLinkable: false,
toLinkable: false,
},
new go.Binding("text", "name")
)
);
function findColor(highlight, shape) {
if (!highlight) return "#666666";
const node = shape.diagram.selection.first();
if (!node) return "#666666";
return node.findTreeParentChain().has(shape.part)
? "royalblue"
: "green";
}
this.myDiagram.nodeTemplate = // the default node template
$(
go.Node,
"Horizontal",
{ margin: 2 },
// { toolTip: tooltiptemplate },
new go.Binding("isTreeExpanded").makeTwoWay(),
new go.Binding("wasTreeExpanded").makeTwoWay(),
{ selectionObjectName: "BODY" },
$(
go.Panel,
"Auto",
{ name: "BODY" },
$(
go.Shape,
"Rectangle",
{ fill: bluegrad, stroke: "white", strokeWidth: 0.0 },
new go.Binding("fill", "color"),
new go.Binding("fill", "isSelected", function (sel) {
if (sel) return selectgrad;
else return bluegrad;
}).ofObject(""),
new go.Binding("stroke", "isHighlighted", findColor).ofObject()
),
$(
go.Panel,
"Vertical",
{ margin: 3, padding: 1 },
$(
go.TextBlock,
{
stroke: "#d3dae8",
margin: new go.Margin(8, 16, 3, 16),
stretch: go.GraphObject.Horizontal,
font: "bold 12pt white",
textAlign: "center",
},
new go.Binding("text", "type", (s) => "<< " + s + " >>")
),
$(
go.TextBlock,
{
stroke: "#d3dae8",
margin: new go.Margin(0, 16, 0, 16),
stretch: go.GraphObject.Horizontal,
font: "bold 12pt white",
textAlign: "center",
},
new go.Binding("text", "packageName")
),
$(
go.TextBlock,
{
stroke: "#d3dae8",
stretch: go.GraphObject.Horizontal,
font: "bold 12pt white ",
textAlign: "center",
},
new go.Binding("text", "name")
),
$(
go.Panel,
"Vertical",
{ stretch: go.GraphObject.Horizontal, visible: false }, // not visible unless there is more than one action
new go.Binding(
"visible",
"fields",
(acts) => Array.isArray(acts) && acts.length > 0
),
// headered by a label and a PanelExpanderButton inside a Table
$(
go.Panel,
"Vertical",
{ stretch: go.GraphObject.Horizontal },
$(go.TextBlock, {
alignment: go.Spot.Left,
stroke: "#d3dae8",
font: "15pt",
})
), // end Table panel
// with the list data bound in the Vertical Panel
$(
go.Panel,
"Table",
{
name: "COLLAPSIBLE", // identify to the PanelExpanderButton
padding: 1,
stretch: go.GraphObject.Horizontal, // take up whole available width
background: "white", // to distinguish from the node's body
//defaultAlignment: go.Spot.Left, // thus no need to specify alignment on each element
itemTemplate: fieldTemplate, // the Panel created for each item in Panel.itemArray
},
new go.Binding("itemArray", "fields")
) // end action list Vertical Panel
) // end optional Vertical Panel
) // end outer Vertical Panel
) // end "BODY" Auto Panel
);
this.myDiagram.linkTemplate = $(
go.Link,
{
routing: go.Link.AvoidsNodes,
relinkableFrom: true,
relinkableTo: true,
toShortLength: 4,
fromShortLength: 4,
curve: go.Link.Bezier,
adjusting: go.Link.Stretch,
},
new go.Binding("fromSpot", "fromSpot", go.Spot.Right),
new go.Binding("toSpot", "toSpot", go.Spot.Right),
$(
go.Shape,
{ strokeWidth: 2 },
new go.Binding("stroke", "isHighlighted", findColor).ofObject()
),
$(
go.Shape,
{ toArrow: "OpenTriangle" },
new go.Binding("stroke", "isHighlighted", findColor).ofObject()
),
$(go.Shape, { toArrow: "Standard", fill: "#666666", stroke: "#666666" })
);
console.log(" this.graphList.nodeDataArray", this.graphList.nodeDataArray)
this.myDiagram.model = $(go.GraphLinksModel, {
copiesArrays: true,
copiesArrayObjects: true,
linkFromPortIdProperty: “fromPort”,
linkToPortIdProperty: “toPort”,
nodeDataArray: this.graphList.nodeDataArray,
linkDataArray: this.graphList.linkDataArray,
});
if (this.selectNode != undefined) {
var nodeId = this.selectNode.toString();
this.graphList.nodeDataArray.forEach((element) => {
if (element.fields.length > 0) {
element.fields.forEach((s) => {
if (s.key == nodeId) {
var selectNode = this.myDiagram.findNodeForKey(element.key);
this.myDiagram.select(selectNode);
}
});
} else {
if (element.key == nodeId) {
var selectNode = this.myDiagram.findNodeForKey(element.key);
this.myDiagram.select(selectNode);
}
}
});
this.zoomIn = this.myDiagram.minScale;
}
},
},
};
Did you intend to declare this issue “Solved”?
What is the stack trace?
I don’t see any use of geometryStretch or Default in your code. Perhaps there is more code?
My issue is not resolved yet.
I am getting this error only on my console
I have share with you above code. There is no more code.
Is there no more stack?
Yes , Correct no more stack trace
Have there been any console messages from the GoJS library before this?
Can you confirm that the library has only been loaded once?
Could you try substituting the go-module-debug.js file for the go-module.js file, to see if there are any warnings or error messages?
You can check above graphRender method is only loaded once. One one error message is render on the console which is :-
Uncaught Error: EnumValue.Default is not a valid geometryStretch.
I have used the same library 2-3 times in vue 2 version. I never faced this type of error. But in vue 3 i am getting this error.
So you have searched all of the code in your app for all import statements that load some version of the GoJS library? Sometimes subtle problems are introduced when a library is loaded more than once, or different versions of the library are loaded.
I cannot explain why Vue 3 is a problem. Could you confirm in the debugger that the GoJS library classes haven’t been modified by Vue, replacing data properties with getters and setters?
I tried to use getters and setters but still getting the same error .
Actually my code is breaking at this point, even i am not using geometryStretch anywhere in my code.
Can you guide me how i can fix this error?
can you tell whether “vue”: “^3.3.4”, version is supporting gojs this version “gojs”: “^2.3.11”,
this.myDiagram.model = $(go.GraphLinksModel, {
copiesArrays: true,
copiesArrayObjects: true,
linkFromPortIdProperty: "fromPort",
linkToPortIdProperty: "toPort",
nodeDataArray: this.callGraph.nodeDataArray,
linkDataArray: this.callGraph.linkDataArray,
});
We will investigate this. However I don’t know how long it will take.
I’ve sent you a project demonstrating the use of GoJS in a Vue 3 app, in a ZIP file.
I saw your zip folder,one thing is clear Gojs also work with Vue 3 or latest version.
But i am not getting why my issue is comming even i am not using geometryStretch
I don’t know why that is happening in your code.
My first guess was that your app is loading the library twice.
My second guess is that the incompatibilities between Vue 2 and Vue 3 are the cause. Vue 3 uses JavaScript Proxies instead of replacing data properties with accessors, and if any reference to a Diagram or GraphObject or Tool or Layout or EnumValue (or other GoJS class) were in your props data, that would rewrite the whole implementation of GoJS to use proxies. And new Proxy(obj, handler) !== obj.
Yes you are correct here, in my code Vue3 uses JavaScript Proxies directly instead of replacing data properties.
So i think this is creating a problem here.
for this do u have any solution or suggestion