On clicking on the node with expand function , and then moving the cursor away from node the node moves along with cursor.
Whether or not a Node has a “Button” on it, a mouse-down and some mouse-move events will start dragging the node, if it allows moving or copying.
Perhaps a small annotated screenshot could illustrate your situation and what you want instead.
Here is what is happening in detail
- click on the expand button
- Click on the node to move and release the mose press
- Move the cursor away from the node
- Expectation is to Node stay on the moved position but Node starts moving along with cursor movement even after the press action is released
- Error it throws as Typeerror c is null.
Ah, so there was an error. You will need to debug. It would be easier if you used go-debug.js instead of go.js, because it will detect and report problems that go.js does not.
In react it is getting very difficult use o gojs-debug.
I have done code Splitting and there are few other files which has go object in it. So when I use gojs-debug in all of it still the issue occurs
To ensure all references to GoJS are using the same version/file, try updating the gojs package.json file in your node_modules folder, setting "main": "release/go-debug.js" while developing. Then you can continue to import as import * as go from "gojs" everywhere, and packages that depend on gojs will also be using the debug version.
Thanks for the reply, have started using the debug version, Still Im not able to rectify the error. any help to further debug
There weren’t any other warnings or error messages before that? Could you please show us more of the stack?
That’s weird – it seems like an infinite recursion. What’s near the bottom of the stack?
That does not appear to be showing the bottom of the stack.
It would be useful to understand what behavior is the immediate cause of the recursion.
It would definitely help if you could tell us how to reproduce the problem.
Hi Im sharing below the code steps to reproduce way to escape the continouse recursion
const baseDiagram = (
layout,
nodes,
links,
model = undefined,
setTotalResults = undefined,
setActiveClicked
) => {
const d = $(go.Diagram, {
initialAutoScale: go.Diagram.UniformToFill,
'undoManager.isEnabled': false,
allowLink: false,
'linkingTool.portGravity': 0,
allowDelete: false,
allowCopy: false,
contentAlignment: go.Spot.Center,
initialDocumentSpot: go.Spot.Top,
initialViewportSpot: go.Spot.Top,
grid: $(
go.Panel,
'Grid',
{ gridCellSize: new go.Size(8, 8) },
$(go.Shape, 'LineH', { stroke: '#F4F4F4', strokeWidth: 0.5 }),
$(go.Shape, 'LineV', { stroke: '#F4F4F4', strokeWidth: 0.5 })
),
model: model
? model
: $(go.GraphLinksModel, {
nodeDataArray: nodes,
linkDataArray: links,
linkKeyProperty: 'toText',
copiesArrays: true,
copiesArrayObjects: true,
// linkFromPortIdProperty: 'from', // necessary to remember portIds
// linkToPortIdProperty: 'to',
}),
layout: layout,
});
d.linkTemplate = $(
go.Link,
{
curve: go.Link.Bezier,
selectable: true,
layerName: 'Background',
},
$(
go.Shape,
new go.Binding('stroke', 'isHighlighted', function (h) {
return h ? '#ED7D31' : '#BCBCBC';
}).ofObject(),
new go.Binding('strokeWidth', 'isHighlighted', function (h) {
return h ? 3 : 1;
}).ofObject()
),
$(
go.Shape,
{ scale: 1, fill: '#160C28' },
new go.Binding('toArrow', 'to', function (r) {
return 'Triangle';
}),
new go.Binding('fill', 'isHighlighted', function (h) {
return h ? '#ED7D31' : '#BCBCBC';
}).ofObject(),
new go.Binding('stroke', 'isHighlighted', function (h) {
return h ? '#ED7D31' : '#BCBCBC';
}).ofObject()
),
$(
go.TextBlock,
{ font: '14px Uniphi, sans-serif', column: 3, margin: 3 },
new go.Binding('text', 'toText'),
new go.Binding('visible', 'isHighlighted', function (h) {
return !!h;
}).ofObject()
)
);
d.click = function (e) {
if (setTotalResults) setTotalResults(NaN);
if (setActiveClicked && setActiveClicked.length > 0) setActiveClicked([]);
e.diagram.commit(function (d) {
d.clearHighlighteds();
}, 'no highlights');
};
d.div = null;
return d;
};
const initDiagram = () => {
const menu = contextMenu(
nodeData,
setConnDetails,
setMetricsVisible,
setSampleDataNodes,
extractRequired,
setSampleVisible,
setExtractData,
setExtractVisible,
setEditNode,
setEditVisible,
addOrRemoveRequired
);
const propertyTemplate = $(
go.Panel,
'Horizontal',
{
stretch: go.GraphObject.Horizontal,
defaultAlignment: go.Spot.Left,
margin: 5,
name: 'PROPERTIES',
},
$(
go.TextBlock,
{
isMultiline: false,
editable: false,
font: '13px Uniphi, sans-serif',
stroke: '#160C28',
row: 0,
},
new go.Binding('text', 'name').makeTwoWay()
),
$(
go.TextBlock,
'',
new go.Binding('text', 'type', function (t) {
return t ? ': ' : '';
})
),
$(
go.TextBlock,
{
isMultiline: false,
editable: false,
font: '10px Uniphi, sans-serif',
stroke: '#757575',
},
new go.Binding('text', 'type').makeTwoWay()
),
$(
go.TextBlock,
{ isMultiline: false, editable: false },
new go.Binding('text', 'default', function (s) {
return s ? ` = ${s}` : '';
})
)
);
diagram.nodeTemplate = $(
go.Node,
'Auto',
{
contextMenu: menu,
},
{
locationSpot: go.Spot.Left,
avoidable: true,
resizable: false,
selectionAdornmentTemplate: $(
go.Adornment,
'Auto',
$(go.Shape, 'RoundedRectangle', {
fill: null,
stroke: '#ED7D31',
strokeWidth: 2,
}),
$(go.Placeholder)
),
click: (e, obj) => addClickedToActive(obj.part.data),
},
new go.Binding('selectionAdorned', 'isNested', function (isNested) {
return !isNested;
}),
new go.Binding('movable', 'isNested', function (isNested) {
return !isNested;
}),
$(
go.Shape,
'RoundedRectangle',
{
fill: 'white',
parameter1: 2, // set the rounded corner
spot1: go.Spot.TopLeft,
spot2: go.Spot.BottomRight, // make content go all the way to inside edges of rounded corners
desiredSize: new go.Size(300, NaN),
},
new go.Binding('stroke', 'isHighlighted', function (h) {
return h ? '#ED7D31' : '#757575';
}).ofObject(),
new go.Binding('strokeWidth', 'isHighlighted', function (h) {
return h ? 4 : 1;
}).ofObject(),
new go.Binding('visible', 'isNested', function (isNested) {
return !isNested;
})
),
$(
go.Panel,
'Vertical',
{
defaultRowSeparatorStroke: '#979797',
padding: 2,
minSize: new go.Size(200, 10),
defaultStretch: go.GraphObject.Horizontal,
desiredSize: new go.Size(300, NaN),
},
$(
go.Panel,
'Auto',
{ stretch: go.GraphObject.Horizontal },
$(
go.Shape,
'RoundedRectangle',
{
stroke: null,
parameter1: 2, // set the rounded corner
spot1: go.Spot.TopLeft,
spot2: go.Spot.BottomRight, // make content go all the way to inside edges of rounded corners
},
new go.Binding('fill', 'fill')
),
$(
go.TextBlock,
{
row: 0,
columnSpan: 3,
margin: 3,
alignment: go.Spot.Center,
font: '14px Uniphi, sans-serif',
stroke: '#ffffff',
isMultiline: true,
editable: false,
maxSize: new go.Size(300, NaN),
},
new go.Binding('text', 'source').makeTwoWay(),
new go.Binding('stroke', 'textColor'),
new go.Binding('alignment', 'isNested', function (isNested) {
return isNested ? go.Spot.Left : go.Spot.Center;
}),
new go.Binding('font', 'isNested', function (isNested) {
return isNested
? '12px Uniphi, sans-serif'
: 'Bold 14px Uniphi, sans-serif';
})
)
),
$(
go.Panel,
'Horizontal',
$(
go.TextBlock,
'Instance:',
{
row: 0,
font: 'Bold 14px Uniphi, sans-serif',
stroke: '#515052',
isMultiline: true,
alignment: go.Spot.Center,
margin: new go.Margin(10, 24, 10, 2),
column: 3,
maxSize: new go.Size(300, NaN),
},
new go.Binding('visible', 'isNested', function (isNested) {
return !isNested;
})
),
$(
go.TextBlock,
{
row: 0,
font: '14px Uniphi, sans-serif',
stroke: '#11091E',
isMultiline: true,
alignment: go.Spot.Center,
margin: new go.Margin(10, 24, 10, 2),
maxSize: new go.Size(300, NaN),
column: 3,
},
new go.Binding('text', 'instance').makeTwoWay(),
new go.Binding('visible', 'isNested', function (isNested) {
return !isNested;
})
)
),
$(
go.Panel,
'Horizontal',
$(
go.TextBlock,
'Node',
{
row: 0,
font: 'Bold 14px Uniphi, sans-serif',
stroke: '#515052',
isMultiline: true,
alignment: go.Spot.Center,
margin: new go.Margin(10, 24, 10, 2),
maxSize: new go.Size(300, NaN),
column: 3,
},
new go.Binding('visible', 'isNested', function (isNested) {
return !isNested;
})
),
$(
go.TextBlock,
{
row: 0,
font: '14px Uniphi, sans-serif',
stroke: '#11091E',
isMultiline: true,
alignment: go.Spot.Center,
margin: new go.Margin(10, 24, 10, 2),
maxSize: new go.Size(300, NaN),
column: 3,
},
new go.Binding('text', 'table').makeTwoWay(),
new go.Binding('visible', 'isNested', function (isNested) {
return !isNested;
})
)
),
// properties
$(
go.TextBlock,
'View node attributes',
{
row: 0,
font: '14px Uniphi, sans-serif',
stroke: '#757575',
alignment: go.Spot.Center,
margin: new go.Margin(10, 24, 10, 2),
maxSize: new go.Size(300, NaN),
column: 3,
},
new go.Binding('visible', 'visible', function (v) {
return !v;
}).ofObject('PROPERTIES'),
new go.Binding('visible', 'isNested', function (isNested) {
return !isNested && !expandAll;
})
),
$(
go.Panel,
'Vertical',
{ name: 'PROPERTIES', visible: expandAll },
new go.Binding('itemArray', 'properties'),
{
row: 0,
columnSpan: 2,
margin: 3,
background: 'white',
itemTemplate: propertyTemplate,
}
),
$(
'PanelExpanderButton',
'PROPERTIES',
{
padding: 5,
background: '#f4f4f4',
alignment: go.Spot.Center,
alignmentFocus: go.Spot.Center,
stretch: go.GraphObject.Horizontal,
},
new go.Binding('visible', 'name', function (arr) {
return arr.length > 0;
}),
new go.Binding('visible', 'isNested', function (isNested) {
return !isNested;
})
)
)
);
diagram.groupTemplate = $(
go.Group,
'Auto',
{
layout: $(go.TreeLayout, {
angle: 90,
arrangement: go.TreeLayout.ArrangementVertical,
isRealtime: false,
isOngoing: true,
isInitial: false,
}),
isSubGraphExpanded: expandAll,
selectionAdornmentTemplate: $(
go.Adornment,
'Auto',
$(go.Shape, 'RoundedRectangle', {
fill: null,
stroke: '#ED7D31',
strokeWidth: 2,
}),
$(go.Placeholder)
),
contextMenu: menu,
click: (e, obj) => addClickedToActive(obj.part.data),
},
$(
go.Shape,
'Rectangle',
{
fill: '#fff',
strokeWidth: 2,
parameter1: 14,
},
new go.Binding('stroke', 'fill'),
new go.Binding('stroke', 'isHighlighted', function (h) {
return h ? '#ED7D31' : '#757575';
}).ofObject(),
new go.Binding('strokeWidth', 'isHighlighted', function (h) {
return h ? 4 : 1;
}).ofObject()
),
$(
go.Panel,
'Vertical',
{
defaultAlignment: go.Spot.Left,
margin: 4,
},
$(
go.Panel,
'Vertical',
{ defaultAlignment: go.Spot.Top, stretch: go.GraphObject.Horizontal },
$(
go.Panel,
'Auto',
{ stretch: go.GraphObject.Horizontal },
$(
go.Shape,
'RoundedRectangle',
{
stroke: null,
parameter1: 2, // set the rounded corner
spot1: go.Spot.TopLeft,
spot2: go.Spot.BottomRight, // make content go all the way to inside edges of rounded corners
},
new go.Binding('fill', 'fill')
),
$(
go.TextBlock,
{ font: '14px Uniphi, sans-serif', margin: 5, column: 5 },
new go.Binding('text', 'name')
)
),
$('SubGraphExpanderButton', {
minSize: new go.Size(200, 5),
padding: 5,
background: '#f4f4f4',
alignment: go.Spot.Top,
alignmentFocus: go.Spot.Center,
})
),
$(go.Placeholder, { padding: new go.Margin(10, 10) })
)
);
try {
$(
go.Overview,
'myOverviewDiv', // the HTML DIV element for the Overview
{ observed: diagram, contentAlignment: go.Spot.Center }
);
} catch (e) {
console.log(e);
}
diagram.contextMenu = menu;
return diagram;
};
Given I click on the group template subexpander button
When Mouse is click and tried to move the node
Then the group node starts to continously move the cursor even after mouse release action
Pressing the escape key the group node moves back to original position and recursion stops
Above mentioned code are the two main files involved in the whole action
Thanks for providing more description of what the user is doing. However I am unable to reproduce any problem.
What does this function do?