Hi,
I have a Border on my palette node onmouseover. This border is implemented with mouseEnter and mouseLeave functions. This is how my palette looks when I drag a node from it:
I want to reduce the opacity of the dragged node, and i also want the border to be dragged with it.
This is how i expect it to be:
How can i do this?
Also, i do not want that no-drop pointer while dragging. I want it to remain a normal mouse pointer. How can this be done?
Was what we suggested in Drag and drop of nodes inadequate in providing translucency for dragged nodes?
We’ll look into a better way of having the border appear in the dragged copy, as well as controlling the cursor. I hope you realize that the user is not allowed to drop there because that diagram (a Palette) is read-only. But it should be possible to set the cursor to be something else.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<script src="https://unpkg.com/gojs"></script>
<script>
function init() {
var $ = go.GraphObject.make;
// initialize main Diagram
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true
});
myDiagram.findLayer("Tool").opacity = 0.5;
myDiagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
{
mouseEnter: function(e, node) { node.findObject("BORDER").stroke = "green"; },
mouseLeave: function(e, node) { node.findObject("BORDER").stroke = null; }
},
$(go.Shape,
{ name: "BORDER", fill: "transparent", stroke: null, strokeWidth: 3 },
new go.Binding("stroke", "layerName", function(l) { return (l === "Tool") ? "green" : null; }).ofObject()),
$(go.Panel, "Vertical",
$(go.Shape, "Triangle",
{ width: 50, height: 50, fill: "gray", strokeWidth: 0, portId:"" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ editable: true },
new go.Binding("text").makeTwoWay())
)
);
// initialize Palette
myPalette =
$(go.Palette, "myPaletteDiv",
{
nodeTemplateMap: myDiagram.nodeTemplateMap,
"draggingTool.doDragOver": function(pt, obj) {
this.diagram.currentCursor = '';
}
});
myPalette.findLayer("Tool").opacity = 0.5;
// now add the initial contents of the Palette
myPalette.model.nodeDataArray = [
{ text: "blue node", color: "blue" },
{ text: "orange node", color: "orange" }
];
// initialize Overview
myOverview =
$(go.Overview, "myOverviewDiv",
{
observed: myDiagram,
contentAlignment: go.Spot.Center
});
load();
}
// save a model to and load a model from Json text, displayed below the Diagram
function save() {
var str = myDiagram.model.toJson();
document.getElementById("mySavedModel").value = str;
}
function load() {
var str = document.getElementById("mySavedModel").value;
myDiagram.model = go.Model.fromJson(str);
}
</script>
</head>
<body onload="init()">
<div style="width: 100%; display: flex; justify-content: space-between">
<div style="display: flex; flex-direction: column; margin: 0 2px 0 0">
<div id="myPaletteDiv" style="flex-grow: 1; width: 100px; background-color: whitesmoke; border: solid 1px black"></div>
<div id="myOverviewDiv" style="margin: 2px 0 0 0; width: 100px; height: 100px; background-color: lightgray; border: solid 1px black"></div>
</div>
<div id="myDiagramDiv" style="flex-grow: 1; height: 400px; border: solid 1px black"></div>
</div>
<div id="buttons">
<button id="loadModel" onclick="load()">Load</button>
<button id="saveModel" onclick="save()">Save</button>
</div>
<textarea id="mySavedModel" style="width:100%;height:200px">
{ "class": "go.GraphLinksModel",
"nodeDataArray": [
{"key":1, "text":"hello", "color":"green", "location":"0 0"},
{"key":2, "text":"world", "color":"red", "location":"70 0"}
],
"linkDataArray": [
{"from":1, "to":2}
]}
</textarea>
</body>
</html>