OK, we’ll look into this for you.
Thank you, Walter. We’re getting close to our release, and this issue is a significant blocker for us. Could you please keep us updated as soon as there’s any progress?
I’m still unable to reproduce the problem. Here’s a sample where the main Diagram is in a shadow DOM. Drag-and-drop from the Palette to the main Diagram works well in both Firefox and Safari.
EDIT: I’ve put the Palette into a separate shadow host as well; everything still works.
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Editor</title>
<!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
</head>
<body>
<div style="width: 100%; display: flex; justify-content: space-between">
<div style="display: flex; flex-direction: column; margin: 0 2px 0 0">
<div id="myPaletteHost" style="flex-grow: 1; width: 140px; background-color: floralwhite">
<template shadowrootmode="open">
<div id="myPaletteDiv" style="width: 140px; height: 100%; border: solid 1px black"></div>
</template>
</div>
<div id="myOverviewDiv" style="margin: 2px 0 0 0; width: 140px; height: 100px; background-color: whitesmoke; border: solid 1px black"></div>
</div>
<div id="myShadowHost" style="flex-grow: 1">
<template shadowrootmode="open">
<div id="myDiagramDiv" style="width: 100%; height: 400px; border: solid 1px black"></div>
</template>
</div>
</div>
<div>
<button id="myLoadButton">Load</button>
<button id="mySaveButton">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>
<script src="https://cdn.jsdelivr.net/npm/gojs/release/go-debug.js"></script>
<script id="code">
// initialize main Diagram
const myShadowHost = document.getElementById("myShadowHost");
const myDiagramDiv = myShadowHost.shadowRoot.getElementById("myDiagramDiv");
const myDiagram =
new go.Diagram(myDiagramDiv, {
"undoManager.isEnabled": true
});
myDiagram.nodeTemplate =
new go.Node("Auto", { locationSpot: go.Spot.Center })
.bindTwoWay("location", "location", go.Point.parse, go.Point.stringify)
.add(
new go.Shape({
fill: "white", stroke: "gray", strokeWidth: 2,
portId: "", fromLinkable: true, toLinkable: true,
fromLinkableDuplicates: true, toLinkableDuplicates: true,
fromLinkableSelfNode: true, toLinkableSelfNode: true
})
.bind("stroke", "color"),
new go.TextBlock({
margin: new go.Margin(5, 5, 3, 5), font: "10pt sans-serif",
minSize: new go.Size(16, 16), maxSize: new go.Size(120, NaN),
editable: true
})
.bindTwoWay("text")
);
// initialize Palette
myPalette =
new go.Palette(document.getElementById("myPaletteHost").shadowRoot.getElementById("myPaletteDiv"), {
nodeTemplateMap: myDiagram.nodeTemplateMap,
model: new go.GraphLinksModel([
{ text: "red node", color: "red" },
{ text: "green node", color: "green" },
{ text: "blue node", color: "blue" },
{ text: "orange node", color: "orange" }
])
});
// initialize Overview
myOverview =
new go.Overview("myOverviewDiv", {
observed: myDiagram,
contentAlignment: go.Spot.Center
});
// save a model to and load a model from Json text, displayed below the Diagram
function save() {
const str = myDiagram.model.toJson();
document.getElementById("mySavedModel").value = str;
}
document.getElementById("mySaveButton").addEventListener("click", save);
function load() {
const str = document.getElementById("mySavedModel").value;
myDiagram.model = go.Model.fromJson(str);
}
document.getElementById("myLoadButton").addEventListener("click", load);
load();
</script>
</body>
</html>
Hi @walter,
We managed to replicate the issue using the sample you provided. The problem appears to be related to the shadowRoot structure. In your sample, both paletteDiv and diagramDiv are each placed inside their own shadowRoot.
To simulate the structure used in our application, we modified the sample by nesting the diagramDiv within two shadowRoots. This change reproduces the issue: the node becomes hidden while being dragged onto the canvas and only reappears once it is dropped.
To ensure consistency in the shadowRoot structure for both the palette and the diagram, we also attempted to place the paletteDiv inside two shadowRoots. However, in this case, the palette rendered as blank, with no nodes visible. You can find this code in the commented part of the below modified code.
Below is the modified code that replicates the issue.
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Editor</title>
<!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
</head>
<body>
<div style="width: 100%; display: flex; justify-content: space-between">
<div style="display: flex; flex-direction: column; margin: 0 2px 0 0">
<div id="myPaletteHost" style="flex-grow: 1; width: 140px; background-color: floralwhite">
<template shadowrootmode="open">
<!-- <div>
<p> in pallete shadow root</p>
<template shadowrootmode="open"> -->
<div id="myPaletteDiv" style="width: 140px; height: 100%; border: solid 1px black"></div>
<!-- </template>
</div> -->
</template>
</div>
<div id="myOverviewDiv"
style="margin: 2px 0 0 0; width: 140px; height: 100px; background-color: whitesmoke; border: solid 1px black">
</div>
</div>
<div id="myShadowHost" style="flex-grow: 1">
<template shadowrootmode="open">
<div>
<p> in first shadow root</p>
<template shadowrootmode="open">
<div id="myDiagramDiv" style="width: 100%; height: 400px; border: solid 1px black"></div>
</template>
</div>
</template>
</div>
</div>
<div>
<button id="myLoadButton">Load</button>
<button id="mySaveButton">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>
<script src="https://cdn.jsdelivr.net/npm/gojs/release/go-debug.js"></script>
<script id="code">
// initialize main Diagram
const myShadowHost = document.getElementById("myShadowHost");
//const myDiagramDiv = myShadowHost.shadowRoot.getElementById("myDiagramDiv");
const myDiagramDiv = myShadowHost.shadowRoot.querySelector("div").shadowRoot.querySelector("#myDiagramDiv")
const myDiagram =
new go.Diagram(myDiagramDiv, {
"undoManager.isEnabled": true
});
myDiagram.nodeTemplate =
new go.Node("Auto", { locationSpot: go.Spot.Center })
.bindTwoWay("location", "location", go.Point.parse, go.Point.stringify)
.add(
new go.Shape({
fill: "white", stroke: "gray", strokeWidth: 2,
portId: "", fromLinkable: true, toLinkable: true,
fromLinkableDuplicates: true, toLinkableDuplicates: true,
fromLinkableSelfNode: true, toLinkableSelfNode: true
})
.bind("stroke", "color"),
new go.TextBlock({
margin: new go.Margin(5, 5, 3, 5), font: "10pt sans-serif",
minSize: new go.Size(16, 16), maxSize: new go.Size(120, NaN),
editable: true
})
.bindTwoWay("text")
);
// initialize Palette
const myPalleteHost = document.getElementById("myPaletteHost");
const myPalleteDiv = myPalleteHost.shadowRoot.querySelector("#myPaletteDiv");
// const myPalleteDiv = myPalleteHost.shadowRoot.querySelector("div").shadowRoot.querySelector("#myPaletteDiv");
myPalette =
new go.Palette(myPalleteDiv, {
nodeTemplateMap: myDiagram.nodeTemplateMap,
model: new go.GraphLinksModel([
{ text: "red node", color: "red" },
{ text: "green node", color: "green" },
{ text: "blue node", color: "blue" },
{ text: "orange node", color: "orange" }
])
});
// initialize Overview
myOverview =
new go.Overview("myOverviewDiv", {
observed: myDiagram,
contentAlignment: go.Spot.Center
});
// save a model to and load a model from Json text, displayed below the Diagram
function save() {
const str = myDiagram.model.toJson();
document.getElementById("mySavedModel").value = str;
}
document.getElementById("mySaveButton").addEventListener("click", save);
function load() {
const str = document.getElementById("mySavedModel").value;
myDiagram.model = go.Model.fromJson(str);
}
document.getElementById("myLoadButton").addEventListener("click", load);
load();
</script>
</body>
</html>
Could you please have a look at this and let me know if there is any workaround for this or how this can be fixed?
Thanks.
Thanks. We’ll investigate, although it may take a while due to end-of-year holidays.
Thank you. I think we have a fix, which will be out in the next release.
Thanks for the update, Simon.
As we are nearing the end of our development cycle for this release, is there any workaround we can implement until the fix is available? This would help ensure minimal disruption to our timelines. Looking forward to your suggestions.
The build should be coming out next year – in a few days when we are back from holidays.
In the meantime, please upgrade to latest.
We’ve just released 3.0.18, which should fix this issue.
Thanks Simon, verified just now and the issue is fixed.
Hi @simon ,
We are currently using GoJS version 2.3.5, and there have been significant changes in the framework up to the latest 3.0.x version. Upgrading to the latest version is not straightforward for us, as it would require multiple approvals for a third-party upgrade and involve considerable time and effort. Could you please confirm if it would be possible to backport the fix to version 2 of GoJS as this is an very important fix for us?
We’ll consider it. What is your order number? Please update your forum profile.