Alignment of Image and Title

GoJS
1

Hi,
I want to Align the Image in right bottom corner in node and also want to title center align in node. Please see attached image,
here is code for image icon,

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,
           })
          )<img src="http://forum.nwoods.com/forum/uploads/5803/ImageAlignment.png" height="369" width="843" border="0" />
2

Do your Horizontal Panels only have single elements inside them? That is unnecessary – just use the element without the containing Panel, and move those panel properties down onto that one element. But it probably makes sense for you to put the “add” and “edit” icons together in a single Horizontal Panel.

It sounds like you should not be using multiple columns. To position a Panel (containing two Pictures) on the right side of the cell, set its alignment to be go.Spot.Right or go.Spot.BottomRight.

For the title, set the alignment to be go.Spot.MiddleTop. That title could be a Panel holding both the expander button as well as the TextBlock, or it could be just the TextBlock by itself, depending on how you want to position the expander button.

There appears to be an “S” at the top-left corner. That TextBlock (or Panel containing a TextBlock) could have alignment either go.Spot.Left or go.Spot.TopLeft.

You could use a Spot Panel instead of a Table Panel. http://gojs.net/latest/samples/shopFloorMonitor.html or http://gojs.net/latest/intro/nodes.html provide examples of what you could do instead of using a Table Panel. Use a Spot Panel when you want small objects to be positioned in front of a big object. Use a Table Panel when you want to partition objects in a table-like fashion.

3

Hi
I want to set the Title in meddle horizontaly as well.Please do let me know how can we set that its not working which said to set the property.

4

Have you tried my suggestions? What are you using? What result are you getting?

5

Hi,
I did the same thing here I am sending the work around,

// define the group template
myDiagram.groupTemplateMap.add(“CommandSectionGroup”,
GO(go.Group, “Auto”, { // define the group’s internal layout

      //portId: "",
      //cursor: "pointer",
      //fromLinkable: true,
      //toLinkable: true,

      mouseDrop: fnGroupDrop,
      mouseEnter: function (e, node) {

          groupMouseIn(node);
      },
      mouseLeave: function (e, node) {

          groupMouseOut(node);
      },
      ungroupable: false,
      layout: GO(go.GridLayout,
                { wrappingColumn: 1, spacing: 1, alignment: go.GridLayout.Position }),
      // the group begins unexpanded;
      // upon expansion, a Diagram Listener will generate contents for the group
      isSubGraphExpanded: true,
      // when a group is expanded, if it contains no parts, generate a subGraph inside of it
      subGraphExpandedChanged: function (group) {
          if (group.memberParts.count === 0) {
              //randomGroup(group.data.key);
          }
      }
  },
    GO(go.Shape, "Rectangle",
      {
          stroke: "#fff",
          strokeWidth: 1,
          fill: "#fff",
          portId: "",
          cursor: "pointer",
          fromLinkable: true,
          toLinkable: true,
          stretch: go.GraphObject.Fill,
      }

      ),
    GO(go.Panel, "Vertical",
      { defaultAlignment: go.Spot.Center, margin: 0, stretch: go.GraphObject.Fill },
      GO(go.Panel, "Horizontal",
        { defaultAlignment: go.Spot.Top, width: OrgChartConfig.GroupWidth },
        // the SubGraphExpanderButton is a panel that functions as a button to expand or collapse the subGraph
        //GO("SubGraphExpanderButton"),
        GO(go.Panel, "Horizontal",
           { defaultAlignment: go.Spot.Top, width: 16, margin: 3, },
        GO(go.TextBlock, "center",
              { font: "Bold 18px Sans-Serif", margin: 1, stroke: "#000", alignment: go.Spot.Center, isMultiline: false, },

              new go.Binding("text", "CommandSectionType", function (CommandSectionType) {
                  //;
                  return CommandSectionType.slice(0, 1);
              })

          ),
          new go.Binding("background", "CommandSectionType", function (CommandSectionType) {
              return commandSectionColorMap[CommandSectionType].bodyColor.toString();
          })
          ),
          //


 <b>       GO(go.Panel, "Horizontal",</b>

{
defaultAlignment: go.Spot.MiddleTop,
width:155,
},
GO(“SubGraphExpanderButton”),
GO(go.TextBlock, “center”, // background: “red”,
{font: “normal 18px Sans-Serif”, margin: 4, stroke: “#fff”, editable: true, isMultiline: false, alignment: go.Spot.Center },
new go.Binding(“text”, “CommandSectionType”)
)


),

        GO(go.Panel, "Horizontal",
           {
               name: "groupAddChildButton",
               defaultAlignment: go.Spot.Top, width: 20,
               visible: false
           },
           GO(go.Picture, {
               margin: 4,
               width: 10,
               height: 10,
               source: "../../images/OrgChartGojs/arrow.png",
               cursor: "pointer",
               click: showAddChildPanel
           })

          ),


          // binding color based on CommandSection type
          new go.Binding("background", "color")// function (CommandSectionType) {
            // Is better to use switch here only if there are approx 1000 or more cases
            // http: //jsperf.com/switch-from-switches/2
            // http: //stackoverflow.com/questions/13383798/using-object-literal-rather-than-switch-statement
              //return commandSectionColorMap[CommandSectionType].headerColor.toString();
          //})
      ),
      GO(go.Panel, "Vertical",
        {
            name: "commandSectionPanel",
            defaultAlignment: go.Spot.Top,
            margin: 2,
            //height: OrgChartConfig.GroupHeight,
            //width: OrgChartConfig.GroupWidth,
            minSize: new go.Size(OrgChartConfig.GroupWidth, OrgChartConfig.GroupHeight)
        },
          // binding color based on CommandSection type
          new go.Binding("background", "CommandSectionType", function (CommandSectionType) {
              // Is better to use switch here only if there are approx 1000 or more cases
              // http: //jsperf.com/switch-from-switches/2
              // http: //stackoverflow.com/questions/13383798/using-object-literal-rather-than-switch-statement
              return commandSectionColorMap[CommandSectionType].bodyColor.toString();
          }),
          // create a placeholder to represent the area where the contents of the group are
       GO(go.Placeholder,
        {
            name: "commandSectionPlaceHolder",
            margin: 1,
            background: "transparent",
            alignment: go.Spot.TopLeft,
            minSize: new go.Size(OrgChartConfig.GroupWidth, OrgChartConfig.GroupHeight)
        }
       )
      )
    )  // end Vertical Panel

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

  ) // End Group
  );// End GroupTemplateMap
6

You appear to be forcing the width to be fairly wide, which limits how far the alignment property can position the object (the Panel, in this case).

Furthermore I am speculating that you are over-relying on Horizontal and Vertical Panels. Keeping it much simpler will help you understand what is going on. (I can’t tell from the code that you posted because the indentation isn’t effective in a proportional font.)

7

Here you go:

Here’s the complete code:

[code] function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, “myDiagram”,
{
initialContentAlignment: go.Spot.Center,
layout: $(go.TreeLayout, { angle: 90 })
});

myDiagram.nodeTemplate =
  $(go.Node, "Vertical",
    $(go.Panel, "Spot",
      $(go.Shape,
        { fill: "green", stroke: "green", width: 150, height: 20 }),
      $(go.TextBlock, "S",
        { alignment: new go.Spot(0, 0.5, 2, 0), alignmentFocus: go.Spot.Left, background: "lightgreen" }),
      $(go.Panel, "Horizontal",
        $("TreeExpanderButton"),
        $(go.TextBlock, "Section",
          { stroke: "white" }
        )
      )
    ),
    $(go.Panel, "Spot",
      $(go.Shape,
        { fill: "lightgreen", stroke: "orange", width: 150, height: 60 }),
      $(go.TextBlock, "Section Chief",
        { alignment: go.Spot.Left, alignmentFocus: go.Spot.Left }),
      $(go.Panel, "Horizontal",
        { alignment: new go.Spot(1, 1, -2, -2), alignmentFocus: go.Spot.BottomRight },
        $(go.Picture, "images/HSnopic.png",
          { width: 16, height: 16 }),
        $(go.Picture, "images/50x40.png",
          { width: 16, height: 16 })
      )
    )
  );

myDiagram.model = new go.GraphLinksModel(
  [
    { key: 1 },
    { key: 2 },
    { key: 3 }
  ],
  [
    { from: 1, to: 2 },
    { from: 1, to: 3 }
  ]
);

}[/code]
Obviously to make things clearer I took out all data binding and event handlers and a link template, and I used image files in the samples/images directory.