Edit Text Box If its empty

GoJS
1

Hi,
I want to edit text on double click of text block its working if text block is not empty but its not working if its empty.

  1. Edit functionality on double click
  2. How we can add Text Box not Text Block as Text Block is multiline text box I do not need multiline text box. I need only single line text box.
    Here is the code which I am using to make editable,

myDiagram.nodeTemplateMap.add(“UnitMember”,
GO(go.Node, “Auto”, {
mouseDrop: fnNodeDrop,
mouseHold: fnNodeDrag,
movable: false,
//fromLinkable: true,
//toLinkable: true,
mouseEnter: function (e, node) {

            nodeMouseIn(node, node);
            model.startTransaction("modified ");
            var x = node.findMainElement();
            x.stroke = "#ff0000";

            model.commitTransaction("modified ");
            //console.log(e, node);
        },
        mouseLeave: function (e, node) {
            nodeMouseOut(node);
            ////;
            model.startTransaction("modified ");
            var x = node.findMainElement();
            x.stroke = "#000";

            model.commitTransaction("modified ");
            //console.log(e, node);
        }
    },
 //new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

        GO(go.Shape, "Rectangle", {
            width: OrgChartConfig.GroupWidth,
            // height: OrgChartConfig.UnitMemberHeight,
            strokeWidth: 1,
            stroke: "#555",
            fromLinkable: false,
            toLinkable: false
        },
           // new go.Binding("width", "width", function (w) { return scaleWidth(w); }),
            new go.Binding("fill", "color")),
        GO(go.Panel, "Table", {
            alignment: go.Spot.Left,
            margin: 2
        },
             GO(go.TextBlock, {
                 row: 0,
                 column: 0,
                 editable: true,
                 alignment: go.Spot.Left,
                 width: OrgChartConfig.GroupWidth,
                 wrap: go.TextBlock.WrapFit,
                 columnSpan: 5,
                 margin: 2,
             }, {
                 font: "normal 14pt sans-serif"
             },
                new go.Binding("text", "Name").makeTwoWay()),

            GO(go.TextBlock, {
                row: 1,
                column: 0,
                editable: true,
                alignment: go.Spot.Left,
                width: OrgChartConfig.GroupWidth,
                wrap: go.TextBlock.WrapFit,
                margin: 1,
                columnSpan: 5,
            }, {
                font: "normal 14pt sans-serif",
            },
                new go.Binding("text", "Title").makeTwoWay()),
            GO(go.Picture, {
                row: 2,
                column: 0,
                source: "../../images/OrgChartGojs/call6.png",
                width: OrgChartConfig.ActionIconDimension,
                height: OrgChartConfig.ActionIconDimension,
                alignment: go.Spot.Left,
                margin: 1,
                name: "PhoneIcon",
                visible: false,
            }),

            GO(go.TextBlock, {
                row: 2,
                column: 1,
                editable: true,
                width: parseInt(OrgChartConfig.GroupWidth) - 85,
                wrap: go.TextBlock.WrapFit,
                margin: 1,
            },
            {
                font: "normal 14pt sans-serif"
            },
                new go.Binding("text", "Contact").makeTwoWay()
            ),

             GO(go.Panel, "Horizontal",
           {
               row: 2,
               column: 2,
               name: "AddIcon",
               alignment: go.Spot.Right,
               width: OrgChartConfig.ActionIconDimension,
               height: OrgChartConfig.ActionIconDimension,
               visible: false,
           },
           GO(go.Picture, {
               source: "../../images/OrgChartGojs/add.png",
               width: OrgChartConfig.ActionIconDimension,
               height: OrgChartConfig.ActionIconDimension,
               cursor: "pointer",
               click: AddChildIconClick,
               alignment: go.Spot.Right,
           })
          ),

             GO(go.Panel, "Horizontal",
           {
               row: 2,
               column: 3,
               name: "EditIcon",
               defaultAlignment: go.Spot.Right,
               width: OrgChartConfig.ActionIconDimension,
               height: OrgChartConfig.ActionIconDimension,
               visible: false,
           },
           GO(go.Picture, {
               //margin: new go.Margin(0, 10),
               source: "../../images/OrgChartGojs/edit.png",
               width: OrgChartConfig.ActionIconDimension,
               height: OrgChartConfig.ActionIconDimension,
               cursor: "pointer",
               click: editIconClick,
               alignment: go.Spot.Right,
           })
          ),
            GO(go.Panel, "Horizontal",
           {
               row: 2,
               column: 4,
               name: "DeleteIcon",
               defaultAlignment: go.Spot.Right,
               width: OrgChartConfig.ActionIconDimension,
               height: OrgChartConfig.ActionIconDimension,
               visible: false
           },
           GO(go.Picture, {

               source: "../../images/OrgChartGojs/delete.png",
               width: OrgChartConfig.ActionIconDimension,
               height: OrgChartConfig.ActionIconDimension,
               cursor: "pointer",
               click: deleteIconClick,
               alignment: go.Spot.Right,
           })
          )
          // using a function in the Binding allows the value to
      // change when Diagram.updateAllTargetBindings is called
      //new go.Binding("location", "loc",
                    // function (l) { return new go.Point(scaleWidth(l.x), l.y); })
    ),

      GO("TreeExpanderButton", {
          alignment: go.Spot.Bottom,
          alignmentFocus: go.Spot.Top
      }
    )
    //,
    //GO("TreeExpanderButton", {
    //    alignment: go.Spot.Bottom,
    //    alignmentFocus: go.Spot.Top
    //}
    //)
  )
);

Please see attached image.

2
  1. In the debugger, check the size of the empty TextBlock that you seemingly cannot start editing. Or temporarily just change the background color so you can see how big it actually is. You may need to have the TextBlock stretch to fill the whole Table Panel cell: set TextBlock.stretch to go.GraphObject.Fill. Then the second click anywhere in the TextBlock, not just where there are characters, will start editing.

Currently the TextEditingTool.starting property only has single-click options, but by default if the node is not selected it requires two clicks – one to select and one to start editing.

  1. Set TextBlock.isMultiline to false, and probably set TextBlock.wrap to TextBlock.None, depending on what you want.
3

Hi,
isMultiline=false is not working. Below is the code,

GO(go.TextBlock, {
row: 0,
column: 0,
editable: true,
alignment: go.Spot.Left,
width: OrgChartConfig.GroupWidth,
wrap: go.TextBlock.WrapFit,
columnSpan: 5,
margin: 2,
isMultiline:false,
}, {
font: “normal 14pt sans-serif”
},
new go.Binding(“text”, “Name”).makeTwoWay()),

            GO(go.TextBlock, {
                row: 1,
                column: 0,
                editable: true,
                alignment: go.Spot.Left,
                width: OrgChartConfig.GroupWidth,
                wrap: go.TextBlock.WrapFit,
                margin: 1,
                columnSpan: 5,
                isMultiline: false,
            }
4

How is it not working? It ought to make sure any lines of text after the first newline to be clipped, and when editing the user cannot enter a newline – the Enter key finishes editing.

5

Both are not working, isMultiple and strech for textblock. Below is the code and snapshot,

GO(go.Panel, “Auto”,
{
background: “transparent”,
},
GO(go.Shape, {
width: OrgChartConfig.RootNodeMemberNameWidth,
height: 25,
margin: 3,
strokeWidth: 1,
stroke: “#ddd”,
figure: “Rectangle”,
fill: “#fff”,
}),
GO(go.TextBlock,
{
alignment: go.Spot.Left,
textAlign: “left”,
editable: true,
font: “10pt helvetica, arial, sans-serif”,
stroke: “#ddd”,
margin: 4,
stretch: go.GraphObject.Fill,
isMultiline: false,
width: OrgChartConfig.RootNodeMemberNameWidth,
background: “red”
},
new go.Binding(“text”, “Name”),
new go.Binding(“stroke”, “TextColorName”)
)
),

Thanks,

6

Wait – are you talking about the TextBlock itself or about the HTMLTextArea that the TextEditingTool uses for performing in-place editing?

And I just checked the behavior of the HTMLTextArea created by the TextEditingTool when TextBlock.isMultiline == false. On all three browsers pressing the Enter key terminated the editing and accepted whatever I had changed. Try editing the text in the Basic sample, http://gojs.net/latest/samples/basic.html, and see if you don’t get the same result. Have you set TextBlock.wrap to TextBlock.None as I suggested?

Regarding the other issue of where the user can click to start editing, did you find out how large the TextBlock actually is? If you had not set width or desiredSize but had set stretch to GraphObject.Fill or GraphObject.Horizontal, then the TextBlock’s width ought to be as wide as that column no matter how short the text string actually occupies. Read more at: http://gojs.net/latest/intro/sizing.html.

By the way, setting the same width on both the Shape that is supposed to surround the TextBlock and on the TextBlock that is inside the Shape will cause the Shape to be clipped, because the Shape really wants to be bigger in order to surround the TextBlock. You should only set the width on one of the two when you use an “Auto” Panel, if you set it at all on either. If you set the width on the “Auto” Panel, it may cause the TextBlock to be clipped.

7

I am talking about both, There should be only single line text box

8

Hi,
I am using the same thing I think. Can you please check the code which I posted?

9

Hi,
IsMultiLine== false is working if there in no width given of textbox. Otherwise its not working.

Thanks,

10

Re: multiline, doesn’t the text editing in the Basic sample do what you are asking for?

Re: clicking, OK, then, don’t set the width of any of your objects (related to the TextBlock).