Hi,
I have a palette with multiple nodes which I can drag onto a canvas. When I hover over the node in the palette, I want a white border to appear which also drops a shadow. Please see the following image for reference:
But, this border and shadow must disappear when I click on a particular node and select it to drag onto the canvas.
How can I achieve this?
You could do something like this in your node template:
{
shadowColor: "white",
mouseEnter: function(e, node) { if (!node.isSelected) node.isShadowed = true; },
mouseLeave: function(e, node) { node.isShadowed = false; },
click: function(e, node) { node.isShadowed = false; }
},
You can use the same techniques to make other appearance changes, if you like.
This is the structure of my node:
$(go.Node, 'Vertical',
{
locationObjectName: 'BODY',
locationSpot: go.Spot.Center,
selectionObjectName: 'ICON',
selectionAdorned: false,
mouseEnter: (e, obj) => {
var shape = obj.findObject("ICON");
shape.stroke = "#ffffff";
},
mouseLeave: (e, obj) => {
var shape = obj.findObject("ICON");
shape.stroke = null;
}
},
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, 'Auto',
$(go.Shape, 'RoundedRectangle',
{
stroke: null,
strokeWidth: 3,
name: 'ICON',
fill: 'transparent',
width: 55, height: 55
},
),
$(go.Picture, {
width: 45, height: 45, background: 'transparent',
imageStretch: go.GraphObject.Uniform
}, new go.Binding('source', 'paletteSource')),
),
$(go.TextBlock, {
margin: 4,
maxSize: new go.Size(80, NaN),
wrap: go.TextBlock.WrapFit,
editable: true,
stroke: 'white'
},
new go.Binding('text')),
);
I do not want a shadow on the entire node. As seen in the picture, when I mouse over, only the graph object “ICON” which has a white stroke, should also drop a shadow.
How can i do this?
You can control the presence of a shadow on individual GraphObjects by setting GraphObject | GoJS API.
Also, within a particular Shape, you can control visibility of individual PathFigures by setting PathFigure | GoJS API.
I am using the built-in shape “Rounded Rectangle”. How do i add the shadow to it? Could you please give an example?
Do what I said above – set or bind Part.isShadowed to turn shadows on or off. Set GraphObject.shadowVisible false on those objects within the Part that you do not want to cast a shadow.
$(go.Node, 'Vertical',
{
locationObjectName: 'BODY',
locationSpot: go.Spot.Center,
selectionObjectName: 'ICON',
selectionAdorned: false,
isShadowed: true,
shadowColor: 'white',
shadowOffset: new go.Point(2,2),
mouseEnter: (e, obj) => {
var shape = obj.findObject("ICON");
shape.stroke = "#ffffff";
},
mouseLeave: (e, obj) => {
var shape = obj.findObject("ICON");
shape.stroke = null;
}
},
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, 'Auto',
$(go.Shape, 'RoundedRectangle',
{
stroke: null,
strokeWidth: 3,
name: 'ICON',
fill: 'transparent',
width: 55, height: 55,
shadowVisible: true,
},
),
$(go.Picture, {
width: 45, height: 45, background: 'transparent',
imageStretch: go.GraphObject.Uniform
}, new go.Binding('source', 'paletteSource')),
),
$(go.TextBlock, {
margin: 4,
maxSize: new go.Size(80, NaN),
wrap: go.TextBlock.WrapFit,
editable: true,
stroke: 'white',
shadowVisible: false
},
new go.Binding('text')),
);
Did that. Still doesnt work. Is there something that im missing?
What do you see?
Just the Rounded rectangle on hover. Nothing else. Please see the above image.
You have set both Shape.stroke and Shape.fill on the “RoundedRectangle” Shape not to draw anything. So if there’s nothing to draw, there’s no shadow that it can cast.
If you remove the assignment fill: 'transparent', you will always see the fuzzy white shadow, since you have permanently set Part.isShadowed to true.
Hmmm, we’ll investigate if there’s a bug there.
removing the transparent fill worked for me. Thanks