Hi,
I have a node which in itself holds a textblock that is editable. On clicking of node it becomes editable to enter text. But its size is not as per my requirement.
How can I set the editable textbox’s height and width to a fixed size?
Note: It should not affect my non-editable node’s size.
Thanks & regards,
Ankit
Are you asking about the size of the HTML element (normally a TextArea) managed by the TextEditingTool to provide in-place editing?
Or are you asking about the size of the TextBlock? What is your node template? (You can excise pieces of the template that are unrelated to this question, if you wish.)
I’ve generated the textarea as per my requirements but facing another issue. When nodes re-align on my canvas, textareas remainon the same position where they opened but their node shifts to another position. How can I make it happen that textarea should also move with its container node?
What is causing the nodes to move (“re-align”)?
I’m unable to reproduce a problem in one of the samples. Can you help me reproduce the problem?
I’ve made my canvas elements center aligned. When the tree structure I prepared is not at the center position of canvas then on any operation in the canvas, it will get center aligned. In that case it moves and the scenario is been produced.
How did you initialize TextBlock.textEditor or TextEditingTool.defaultTextEditor?
In the given below format:
$(go.TextBlock, {
<span =“Apple-tab-span” style=“white-space:pre”> margin: new go.Margin(10, 15, 10, 10),
<span =“Apple-tab-span” style=“white-space:pre”> minSize: new go.Size(110, NaN),
<span =“Apple-tab-span” style=“white-space:pre”> maxSize: new go.Size(110, NaN),
<span =“Apple-tab-span” style=“white-space:pre”> wrap: go.TextBlock.WrapFit,
<span =“Apple-tab-span” style=“white-space:pre”> editable: true,
<span =“Apple-tab-span” style=“white-space:pre”> isMultiline: false
}, new go.Binding(“text”, “text”).makeTwoWay(), { name: “textBlockPanel” }, new go.Binding(“stroke”, “stroke”))
That is OK for the definition of the TextBlock’s other properties. But I thought you were talking about an HTML element acting as a text editor. That is why I was asking how you initialized either TextBlock.textEditor or TextEditingTool.defaultTextEditor.
Have you examined the two custom text editors (one each for these two choices) that are in http://gojs.net/latest/samples/customTextEditingTool.html ?
That is OK. I achieved this functionality. Thanks.
Is it possible to zoom and pan through the canvas when a node is in editable form?
During in-place text editing focus will be on that HTML element, the TextEditingTool.currentTextEditor. A mouse-down event in the Diagram/div/canvas for panning would cause the text editor element to lose focus. Normally a loss of focus causes the editing to be finished, which is what people usually want.
So I suppose you could implement that, but it’s probably tricky and might be confusing to users.
OK. Thanks for the update. I’ll look into that if required.
I’ve another scenario with panning. Suppose I click on a node that is half visible on the canvas and half of it’s area is out of canvas. Is it possible that canvas automatically pan to display whole node on the canvas?
You could implement either a Node.click event handler or a Diagram “ObjectSingleClicked” DiagramEvent listener to call Diagram.scrollToRect:
$(go.Node, . . .,
{
click: function(e, node) {
node.diagram.scrollToRect(node.actualBounds);
}
},
. . .)
You could alternatively call Diagram.centerRect, but that would recenter every time, which is more visually jarring/disconcerting than only doing it when the node is partly off screen.
When my textblock is in edit mode and some validation fails, it will remain open. When I resize the browser window or change orientation in mobile device, nodes move but editable textarea doesn’t. Any help?
Yes, a failing textValidation predicate will leave the editing window open so that the user can fix the entry without losing what they have typed.
I tried editing a TextBlock in four different browsers (Android, Firefox, Chrome, Opera) on my smartphone. I rotated the device mid-way through editing. In all four cases the text box rotated/repositioned/resized appropriately given the reflow/rescale of the page in the rotated screen. So at least on all four of those browsers, everything seemed to work just fine. Could you be more specific about how I could reproduce the problem?
I tried ‘Tournament’ sample and found that after loading of page, first time when I click on a node, it becomes editable, on resizing browser textarea shifts somewhere else and node remains in the structure it was before. When I second time make a node editable, issue doesn’t come with that one. Please confirm if you face the same issue.
It is working perfect if I check on you site but when I integrated same code in my HTML page, it produced the issue that I mentioned in my last post.
I just tried the Tournament sample on an Android tablet, and rotating during in-place text editing worked acceptably for me.
What customizations have you made that might affect text editing?
I’ve set “contentAlignment” to “go.Spot.Center” that doesn’t adjust textbox along with its node. Please suggest what needs to be done now.
Along with “contentAlignment” setting I’ve also set “layout” as “go.LayeredDigraphLayout”. I suppose these two are not working together. Any hit?
Please ignore previous posts. I tried “StateChart” sample. Added some nodes and navigated to last added node for which I had to scroll. I clicked on that node and it became editable. Then after I resized my browser window. Scroll bar appeared on browser and that textarea ran out of GoJS canvas, I found it at the end of page in right side. Please look into the issue. If any solution?