Using TreeView as palette

GoJS
1

Hi,

I am trying to use GoJS treeview as a palette.

i have modified the code here GoJS Tree View.

To make it work as a palette. i have modified the mydiagram to.

  myDiagram =
      $(go.Palette, "myDiagramDiv",
      {
       /* allowMove: false,
       // allowCopy: false,
        allowDelete: false,
        allowHorizontalScroll: false,*/
        layout:
          $(go.TreeLayout,
            {
              alignment: go.TreeLayout.AlignmentStart,
              angle: 0,
              compaction: go.TreeLayout.CompactionNone,
              layerSpacing: 16,
              layerSpacingParentOverlap: 1,
              nodeIndentPastParent: 1.0,
              nodeSpacing: 0,
              setsPortSpot: false,
              setsChildPortSpot: false
            })
       });

myDiagram.nodeTemplate =
    $(go.Node,
      { // no Adornment: instead change panel background color by binding to Node.isSelected
        selectionAdorned: false,
        // a custom function to allow expanding/collapsing on double-click
        // this uses similar logic to a TreeExpanderButton
        doubleClick: function(e, node) {
          var cmd = myDiagram.commandHandler;
          if (node.isTreeExpanded) {
            if (!cmd.canCollapseTree(node)) return;
          } else {
            if (!cmd.canExpandTree(node)) return;
          }
          e.handled = true;
          if (node.isTreeExpanded) {
				alert('expanded');
				console.log("1");
            cmd.collapseTree(node);
          } else {
				console.log("2");
				alert('collapsed');
            cmd.expandTree(node);
          }
        }
      },
      $("TreeExpanderButton",
        {
          "ButtonBorder.fill": "whitesmoke",
          "ButtonBorder.stroke": null,
          "_buttonFillOver": "rgba(0,128,255,0.25)",
          "_buttonStrokeOver": null
        }),
      $(go.Panel, "Horizontal",
        { position: new go.Point(18, 0) },
        new go.Binding("background", "isSelected", function(s) { return (s ? "lightblue" : "white"); }).ofObject(),
        $(go.Picture,
          {
            width: 18, height: 18,
            margin: new go.Margin(0, 4, 0, 0),
            imageStretch: go.GraphObject.Uniform
          },
          // bind the picture source on two properties of the Node
          // to display open folder, closed folder, or document
          new go.Binding("source", "isTreeExpanded", imageConverter).ofObject(),
          new go.Binding("source", "isTreeLeaf", imageConverter).ofObject()),
        $(go.TextBlock,
          { font: '12pt Verdana, sans-serif' },
		  {},
          new go.Binding("text", "key", function(s) { return "item " + s; }))
      )  // end Horizontal Panel
    );  // end Node

  // without lines
  myDiagram.linkTemplate = $(go.Link);

 
  // create a random tree
  var nodeDataArray = [{ key: 0 }];
  var max = 50;
  var count = 0;
  while (count < max) {
    count = makeTree(1, count, max, nodeDataArray, nodeDataArray[0]);
  }
  myDiagram.model = new go.TreeModel(nodeDataArray);
}

function makeTree(level, count, max, nodeDataArray, parentdata) {
  var numchildren = 4;
  for (var i = 0; i < numchildren; i++) {
    if (count >= max) return count;
    count++;
    var childdata = { key: count, parent: parentdata.key };
    nodeDataArray.push(childdata);
    if (level > 0 ) {
      count = makeTree(level - 1, count, max, nodeDataArray, childdata);
    }
  }
  return count;
}

// takes a property change on either isTreeLeaf or isTreeExpanded and selects the correct image to use
function imageConverter(prop, picture) {
  var node = picture.part;
  if (node.isTreeLeaf) {
    return "images/gear.svg";
  } else {
    if (node.isTreeExpanded) {
      return "images/folder_open.svg";
    } else {
      return "images/folder.svg";
    }
  }
}

I have my codepen link here.

My issues:

  • once i modify the existing diagram to palette, the expand tree and close tree stops working.

  • I need to limit the drag and drop to leaf nodes only. How can i limit that.

2

The first issue is due to Palette.isReadOnly being true. You’ll need to set that to false and instead set other properties to prevent the user from moving or deleting nodes. For more discussion of the possibilities, please read GoJS User Permissions -- Northwoods Software

The second issue can be addressed by adding to your node template:
new go.Binding("copyable", "isTreeLeaf").ofObject()

3

thanks Walter, It resolved my issue.