Hi,
I have a palette from which I can drag a node and drop it onto the canvas. While dragging the node I want it to look translucent. And once I release the mouse and drop the node I want it to solidify with the white background and a blue border around it to show that it is selected.
Please see this image for reference:
How do we achieve this in GoJS?
For a custom appearance when selected that does not use Adornments, please read GoJS Selection -- Northwoods Software.
For translucent dragged parts, see the sample Flowgrammer, which includes this line:
// Parts dragged in from the Palette will be partly translucent
myDiagram.findLayer("Tool").opacity = 0.5;
But note this applies to all Parts that are in the “Tool” Layer. That includes all Parts that are copied within a Diagram by control-mouse-drag and Parts such as the LinkingTool.temporaryLink, if such tools and behavior are enabled in your main Diagram. If you want such translucency only to apply when dragging between diagrams (such as from Palette to main Diagram), you will need override two methods on the Palette’s DraggingTool.
Instead of reducing drag tool opacity, how can apply strokeWidth to node that is currently being dragged from palette?
Drag-and-drop is fundamentally a rather complicated protocol between several bits of code, primarily the DraggingTool of the source Diagram and the DraggingTool of the target Diagram.
One possibility is to override an undocumented method on the target DraggingTool. Here’s an example using an old-fashioned JavaScript “override”; if you have defined your own subclass of DraggingTool, you can override the method in the usual ES6 manner.
$(go.Diagram, "myDiagramDiv",
{
"draggingTool.doSimulatedDragOver": function() {
// do normal behavior first, to make sure copiedParts exist
go.DraggingTool.prototype.doSimulatedDragOver.call(this);
// change the appearance of those temporary Parts that appear when dragged in
if (this.copiedParts) {
this.copiedParts.each(kvp => {
const node = kvp.key;
if (node instanceof go.Node) {
node.elt(0).stroke = "red"; // this depends on your node template!
node.elt(0).strokeWidth = 4;
}
})
}
},
. . .
@walter tried above code, cannot see stroke and strokeWidth, when i console node.elt(0).stroke and node.elt(0).strokeWidth before changing and after changing i could see new value in console but not on diagram. What could be the reason ?
Also, "draggingTool.doSimulatedDragOver" this method is not getting called, when we override it.
What works for me is draggingTool.computeEffectiveCollection method. So is this usage is correct ?
Below is the code what i tried.
Solution 1:
function CustomDraggingTool() {
return go.DraggingTool.call(this);
}
go.Diagram.inherit(CustomDraggingTool, go.DraggingTool);
CustomDraggingTool.prototype.computeEffectiveCollection = function (parts) {
const coll = new go.Set(/* go.Part */).addAll(parts);
const tool = this;
parts.each((p) => {
tool.changeStyling(p, coll);
});
return go.DraggingTool.prototype.computeEffectiveCollection.call(this, coll);
};
CustomDraggingTool.prototype.changeStyling = function (sup, coll) {
if (sup === null) return;
console.log(sup.elt(0).strokeWidth);
sup.elt(0).stroke = 'red';
sup.elt(0).strokeWidth = 4;
coll.add(sup);
};
Solution 2:
function CustomDraggingTool() {
return go.DraggingTool.call(this);
}
go.Diagram.inherit(CustomDraggingTool, go.DraggingTool);
CustomDraggingTool.prototype.computeEffectiveCollection = function (parts) {
parts.each((node) => {
if (node instanceof go.Node) {
node.elt(0).strokeWidth = 4;
node.elt(0).stroke = 'red';
}
});
return go.DraggingTool.prototype.computeEffectiveCollection.call(this, parts);
}
Does your node template have a Shape as the first element?
Yes. node template have shapes
I tried the above code in a sample where the node template had a Shape as the first element of the Node. Adapt that example code for your own situation.