@jh wrote:
Hi,
I've encountered strange behaviour during dragging a node from the palette.
In my project, i overloaded a dragging tool to update some nodes templates during dragging over a node. Because of that, the diagram get's resized.
The issue occurs only if we drag a node from the palette. If we drag a node from the diagram, everything is just fine.
Is there any option to block this kind of behaviour, so the diagram size doesn't change?
There is a short video
https://share.vidyard.com/watch/3UsZGg3reA9SEe9rTWCvT3and the example code
<html> <head> <script src="https://gojs.net/latest/release/go-debug.js"></script> <script id="code"/> function init() { var $ = go.GraphObject.make; myDiagram = $(go.Diagram, "myDiagramDiv", { initialContentAlignment: go.Spot.Center, allowDrop: true, allowVerticalScroll: false, allowHorizontalScroll: true }); var templates = new go.Map("string", go.Panel); templates.add('cat1', $(go.Node, "Auto", $(go.Shape, "RoundedRectangle", { fill: "red"}))); templates.add('cat2', $(go.Node, "Auto", $(go.Shape, "RoundedRectangle", { fill: "green"}))); myDiagram.nodeTemplateMap = templates; myPalette = $(go.Palette, "myPaletteDiv", { nodeTemplateMap: myDiagram.nodeTemplateMap, model: new go.GraphLinksModel([{ key: "1", category: 'cat1' }]) }); var draggingTool = myDiagram.toolManager.draggingTool; draggingTool.doDragOver = function(pt, obj) { var category = myDiagram.model.nodeDataArray[0].category; myDiagram.model.setCategoryForNodeData(myDiagram.model.nodeDataArray[0], category === 'cat1' ? 'cat2' : 'cat1'); }; } </script> </head> <body onload="init()"> <div style="display: flex; margin-top: 100px"> <div id="myPaletteDiv" style="width: 200px; margin-left: 10px; background-color: whitesmoke; border: solid 1px black"></div> <div id="myDiagramDiv" style="width: 600px; height: 300px; border: solid 1px black"></div> </div> </body> </html>
Posts: 1
Participants: 1