Using TreeView as palette

@ashish_singh wrote:

Hi,

I am trying to use GoJS treeview as a palette.

i have modified the code here https://gojs.net/latest/samples/treeView.html.

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.

Posts: 1

Participants: 1

Read full topic