goJS让节点在按键时进入编辑模式
goJS get node into edit mode on key press
我正在使用 goJS 制作一些图表。尝试提供更好的用户体验,以便当用户选择一个节点并按下键盘上的任何字母数字键、标点符号或 space 栏时,该节点会自动进入编辑模式。
之后用户将写入一些文本,当按下回车键或在节点外部单击鼠标时,文本将保留在节点内。
到目前为止,我制作了这个 nodeClicked 函数,如果用户按住 Shift 键并单击鼠标,它会成功注册事件。但我无法进入编辑模式,我需要帮助。
这是我的 nodeClicked 函数:
function nodeClicked(e, obj) { // executed by click and doubleclick handlers
var evt = e.copy();
var node = obj.part;
if(evt.diagram.lastInput.shift){
evt.diagram.commandHandler.editTextBlock(node.findObject("TEXTBLOCK"));
}
}
这是我的节点模板:
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{click: nodeClicked},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// define the node's outer shape, which will surround the TextBlock
$(go.Shape, "RoundedRectangle",
{
parameter1: 20, // the corner has a large radius
fill: "#cce6ff", // the default fill, if there is no data-binding
stroke: null,
portId: "", // this Shape is the Node's port, not the whole Node
fromLinkable: false, fromLinkableDuplicates: true,
toLinkable: false, toLinkableDuplicates: true,
cursor: "pointer"
},
new go.Binding("fill", "fill"),
new go.Binding("strokeDashArray", "dash"),
new go.Binding("strokeWidth", "width")),
$(go.TextBlock,
{
font: "bold 11pt helvetica, bold arial, sans-serif",
textValidation: okName,
isMultiline: false,
editable: true // editing the text automatically updates the model data
//textEditor: window.TextEditorRadioButtons, // defined in textEditorRadioButtons.js
// this specific TextBlock has its own choices:
},
new go.Binding("editable", "text", function(t, e) {
return t === "?";
}),
new go.Binding("editable", "text", isFeEditable).makeTwoWay(fromLocation),
new go.Binding("text").makeTwoWay())
);
我也阅读了有关 InputEvent 的文档class,但我找不到任何使用它的示例,所以我对如何实现它有点困惑。
您的 nodeClicked
函数假设有一个名为 "TEXTBLOCK" 的 TextBlock,但您没有在任何对象上设置 name
Node 模板中的 TextBlock。
我正在使用 goJS 制作一些图表。尝试提供更好的用户体验,以便当用户选择一个节点并按下键盘上的任何字母数字键、标点符号或 space 栏时,该节点会自动进入编辑模式。
之后用户将写入一些文本,当按下回车键或在节点外部单击鼠标时,文本将保留在节点内。
到目前为止,我制作了这个 nodeClicked 函数,如果用户按住 Shift 键并单击鼠标,它会成功注册事件。但我无法进入编辑模式,我需要帮助。 这是我的 nodeClicked 函数:
function nodeClicked(e, obj) { // executed by click and doubleclick handlers
var evt = e.copy();
var node = obj.part;
if(evt.diagram.lastInput.shift){
evt.diagram.commandHandler.editTextBlock(node.findObject("TEXTBLOCK"));
}
}
这是我的节点模板:
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{click: nodeClicked},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// define the node's outer shape, which will surround the TextBlock
$(go.Shape, "RoundedRectangle",
{
parameter1: 20, // the corner has a large radius
fill: "#cce6ff", // the default fill, if there is no data-binding
stroke: null,
portId: "", // this Shape is the Node's port, not the whole Node
fromLinkable: false, fromLinkableDuplicates: true,
toLinkable: false, toLinkableDuplicates: true,
cursor: "pointer"
},
new go.Binding("fill", "fill"),
new go.Binding("strokeDashArray", "dash"),
new go.Binding("strokeWidth", "width")),
$(go.TextBlock,
{
font: "bold 11pt helvetica, bold arial, sans-serif",
textValidation: okName,
isMultiline: false,
editable: true // editing the text automatically updates the model data
//textEditor: window.TextEditorRadioButtons, // defined in textEditorRadioButtons.js
// this specific TextBlock has its own choices:
},
new go.Binding("editable", "text", function(t, e) {
return t === "?";
}),
new go.Binding("editable", "text", isFeEditable).makeTwoWay(fromLocation),
new go.Binding("text").makeTwoWay())
);
我也阅读了有关 InputEvent 的文档class,但我找不到任何使用它的示例,所以我对如何实现它有点困惑。
您的 nodeClicked
函数假设有一个名为 "TEXTBLOCK" 的 TextBlock,但您没有在任何对象上设置 name
Node 模板中的 TextBlock。