I have two diagrams and have some nodes on those diagrams.
When editing two diagrams the first one does not lose focus automatically.
When I try it with two separate Diagrams, I find that the current text editor in each diagram stays open when I start editing in the other one. That does cause the other text editor to lose focus. So if I am understanding your situation, I cannot reproduce any problem.
Could you describe the problem more precisely please, and tell us how to reproduce it?
First I enter left one to edit mode to open the text box, then go to the right diagram click the node enter the edit mode, but can not get focus to the right diagram. If I continue to hit the keyboard, then the left textbox will get the input, instead of the right textbox which I want to.
the problem is why two diagrams get edit mode simultaneously,
why focus won’t move to the next diagram.
I use Google Chrome.
import go from ‘gojs’;
function showContent() {
////////////////////////////////////////////////////////////////////////////
// Diagram //
////////////////////////////////////////////////////////////////////////////
var $go = go.GraphObject.make; // for conciseness in defining templates
//go.licenseKey = ...; // not shiiiii
let diagramA = $go(go.Diagram, "d1", // must name or refer to the DIV HTML element
{
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
"linkingTool.portGravity": 0, "relinkingTool.portGravity": 0,
"undoManager.isEnabled": true,
"animationManager.isEnabled": false,
allowDrop: true,
allowDragOut: true
});
let diagramB = $go(go.Diagram, "d2", // must name or refer to the DIV HTML element
{
initialContentAlignment: go.Spot.Center,
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
"linkingTool.portGravity": 0, "relinkingTool.portGravity": 0,
"undoManager.isEnabled": true,
"animationManager.isEnabled": false,
allowDrop: true,
allowDragOut: true
});
// define the Node template
diagramA.nodeTemplate =
$go(go.Node, "Auto", { resizable: true },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$go(go.Shape, "RoundedRectangle",
{
parameter1: 20, // the corner has a large radius
fill: $go(go.Brush, "Linear", { 0: "rgb(254, 201, 0)", 1: "rgb(254, 162, 0)" }),
stroke: null,
portId: "", // this Shape is the Node's port, not the whole Node
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
cursor: "pointer"
}),
$go(go.TextBlock,
{
font: "bold 11pt helvetica, bold arial, sans-serif",
editable: true // editing the text automatically updates the model data
},
new go.Binding("text").makeTwoWay())
);
diagramB.nodeTemplate =
$go(go.Node, "Auto", { resizable: true },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$go(go.Shape, "RoundedRectangle",
{
parameter1: 20, // the corner has a large radius
fill: $go(go.Brush, "Linear", { 0: "rgb(254, 201, 0)", 1: "rgb(254, 162, 0)" }),
stroke: null,
portId: "", // this Shape is the Node's port, not the whole Node
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
cursor: "pointer"
}),
$go(go.TextBlock,
{
font: "bold 11pt helvetica, bold arial, sans-serif",
editable: true // editing the text automatically updates the model data
},
new go.Binding("text").makeTwoWay())
);
// unlike the normal selection Adornment, this one includes a Button
diagramA.nodeTemplate.selectionAdornmentTemplate =
$go(go.Adornment, "Spot",
$go(go.Panel, "Auto",
$go(go.Shape, { fill: null, stroke: "blue", strokeWidth: 2 }),
$go(go.Placeholder) // a Placeholder sizes itself to the selected Node
),
$go("Button",
{
alignment: go.Spot.TopRight,
},
$go(go.Shape, "PlusLine", { width: 6, height: 6 })
) // end button
); // end Adornment
let diagramJSON = `{ "class": "go.GraphLinksModel",
"nodeKeyProperty": "key",
"nodeDataArray": [
{"key":-1, "loc":"155 -138", "category":"Start"},
{"key":0, "loc":"190 15", "text":"Shopping"},
{"key":1, "loc":"353 32", "text":"Browse Items"},
{"key":2, "loc":"353 166", "text":"Search Items"},
{"key":3, "loc":"512 12", "text":"View Item"},
{"key":4, "loc":"661 17", "text":"View Cart"},
{"key":5, "loc":"644 171", "text":"Update Cart"},
{"key":6, "loc":"800 96", "text":"Checkout"},
{"key":-2, "loc":"757 229", "category":"End"}
],
"linkDataArray": [
{ "from": -1, "to": 0, "text": "Visit online store" },
{ "from": 0, "to": 1, "progress": "true", "text": "Browse" },
{ "from": 0, "to": 2, "progress": "true", "text": "Use search bar" },
{ "from": 1, "to": 2, "progress": "true", "text": "Use search bar" },
{ "from": 2, "to": 3, "progress": "true", "text": "Click item" },
{ "from": 2, "to": 2, "text": "Another search", "curviness": 20 },
{ "from": 1, "to": 3, "progress": "true", "text": "Click item" },
{ "from": 3, "to": 0, "text": "Not interested", "curviness": -100 },
{ "from": 3, "to": 4, "progress": "true", "text": "Add to cart" },
{ "from": 4, "to": 0, "text": "More shopping", "curviness": -150 },
{ "from": 4, "to": 5, "text": "Update needed", "curviness": -50 },
{ "from": 5, "to": 4, "text": "Update made" },
{ "from": 4, "to": 6, "progress": "true", "text": "Proceed" },
{ "from": 6, "to": 5, "text": "Update needed" },
{ "from": 6, "to": -2, "progress": "true", "text": "Purchase made" }
]
}`;
diagramA.model = go.Model.fromJson(diagramJSON);
diagramB.model = go.Model.fromJson('{"nodeKeyProperty": "id","linkKeyProperty": "id"}');
$("#bbb").click(function(){
diagramB.model = go.Model.fromJson(diagramJSON);
});
}
This is the test code.
Maybe GOJS target on the one HTML DIV so there is “maybe” No diagram collection to trace all diagram ? I don’t know.
When I try your code, I am not able to encounter any problems. Everything relating to text-editing is behaving as expected.
Here is my test video, focus don’t come back!!
This is JSfiddle
also, focus doesn’t come back!!
Ah, I was using Firefox, which does not have that problem. But Chrome does. We’ll investigate.
Thank you walter, Maybe lose focus stop the editing mode better. If possible.
Would it be OK if we changed the default text editor so that it wouldn’t allow text editors be active in two different diagrams at the same time? (It’s always been the case that you couldn’t have two active in the same diagram at the same time.) That would prevent the situation that you have. Our testing also noticed a severe problem with Internet Explorer 11 with the situation that you reported, which would also be avoided with the change that we are proposing.
I’d like very much this motion “wouldn’t allow text editors be active in two different diagrams at the same time”! actually, we don’t need to activate two or more input at the same time, right?
you mean you will fix it in the future release of gojs, or give a workaround solution for me ?
The change will be in version 2.1.7. But you can implement it yourself by overriding TextEditingTool.doActivate to check and set a static/global variable, and to clear it in an override of TextEditingTool.doDeactivate.
Note that the problem can still arise with multiple diagrams running in multiple frames or windows. If handling that becomes necessary, you can replace the static variable flag with local storage state or something similar.
We have released 2.1.7. Please see if the situation is avoided in your app.
I tried new version, but it did not work. When I active in the first diagram , then click to the second diagram’s node to edit it did not get to edit mode. The first diagram keep the edit mode it do not Deactivate .
That is correct. The user must first finish the old editor if they want to start a new editor.
What ? how to finish ? click other diagram it MUST finish automatically, this is natural.
you mean every time user click the out side of node in diagram finish the editing then go to second diagram do same thing , and on and on … , I think it is not good design of GUI. look Excel or Other GUI design please.
One problem is that textValidation might return false, so the text editing cannot finish.
Also, when we used to automatically accept the edit when the user clicked outside the diagram, people complained – we should leave the editor in its editing state. Maybe the user wants to copy some text from elsewhere to paste into the editor.
You could try implementing a GoJS Events -- Northwoods Software that calls TextEditingTool | GoJS API on the first diagram’s Diagram.currentTool if it is a TextEditingTool.
“Doing so is only covering up the actual problem”. You said that before to me. So I found the real problem here but see it didn’t fixed.
See, I did not edit just active to edit, I hope there is have a good solution.
There is a new problem that occurs, If I active editing on the first diagram then double click the second diagram’s node, the second diagram will freeze, it can’t get focus.
We’ll investigate.