The MindFusion Forums

Please download video from given URL. In this video when ever i collapse the container node heading text for every node i.e. text in caption goes out of the box as you can see in video. And also when i expand it again you can see the diagram please let me know how can i solve these issues.

https://goo.gl/A0saNX

If you are custom-drawing that text using MindFusion.Drawing.Text in onUpdateVisuals, I guess you aren't updating its bounds on subsequent onUpdateVisuals calls after creating it the first time.

If second issue you mention is that child tree nodes do not offset when container�gets folded, you will need to handle the containerUnfolded event too and move child nodes with offset in the other direction this time (http://mindfusion.eu/Forum/YaBB.pl?num=1491205900/5#5)

I tried to use� MindFusion.Drawing.Text in onUpdateVisuals. but facing the problem that text in every container node i.e. heading text is same for all container node present in that diagram. As per my requirement Heading text will be changed accordingly for every custom container. To avoid this problem I have created a separate shape Node and assign text to that then adding it to container node using attachNode api.

the below code is for Container node� UpdateVisuals.

Code (javascript):

MindFusion.Diagramming.ContainerNode.prototype.onUpdateVisuals = (item: MindFusion.Diagramming.DiagramItem) => {
� �� var rect = item.bounds;
� �� //rect.height = 40;
� �� rect.width = this._conatinerAtt.width
� �� item.setBounds(rect);
� �� item.setFoldable(true);
� �� item.setFoldIconSize(10);
� �� var rectPath = new MindFusion.Drawing.Path();
� �� let tempWidth = this._conatinerAtt.height - 4;
� �� rectPath.addRect(rect.x + 2, rect.y + 2, 4, tempWidth);
� �� rectPath.setPen(this._conatinerAtt.headingColor);
� �� rectPath.setBrush(this._conatinerAtt.headingColor);
� �� item.getGraphicsContent().push(rectPath);

� �� //var nodeText = new MindFusion.Drawing.Text(this._conatinerAtt.headingText, new MindFusion.Drawing.Rect(rect.x + 30, rect.y + 2, rect.width / 2, rect.width/2));
� �� //nodeText.setFont(new MindFusion.Drawing.Font("sans-serif", 4, false, true, false));
� �� //item.getGraphicsContent().push(nodeText);

� �� var image = new MindFusion.Drawing.Image(new Rect(rect.x + 10, rect.y + 5, 15, 15));
� �� image.image.src = this._conatinerAtt.imageUrl;
� �� image.image.width = 10;
� �� image.image.height = 10;
� �� image.loaded = true;
� �� item.getGraphicsContent().push(image);

� �� image = new MindFusion.Drawing.Image(new Rect(rect.x + 20, rect.y + 20, 8, 8));
� �� image.image.src = this._conatinerAtt.incomingLnkImg;
� �� image.image.width = 10;
� �� image.image.height = 10;
� �� image.loaded = true;
� �� item.getGraphicsContent().push(image);

� �� image = new MindFusion.Drawing.Image(new Rect(rect.x + 35, rect.y + 20, 8, 8));
� �� image.image.src = this._conatinerAtt.outgoingLnkImg;
� �� image.image.width = 10;
� �� image.image.height = 10;
� �� image.loaded = true;
� �� item.getGraphicsContent().push(image);
� �� };

Code for adding heading text

Code (javascript):

private addHeaderLabel(x, y){
� �� let l1 = this._factory.createShapeNode(x + 30, y - 8, this._conatinerAtt.height, this._conatinerAtt.height);
� �� l1.setFont(new Font(this._conatinerAtt.fontName, this._conatinerAtt.fontSize, false, false, false));
� �� l1.setTextColor(this._conatinerAtt.headingColor);
� �� l1.setText(this._conatinerAtt.headingText);
� �� l1.setTransparent(true);
� �� l1.setLocked(true);
� �� this.attachNode(l1);
� � }

Code For adding Nodes child nodes in container node

Code (javascript):

addNode(x, y, columnText, columnTextColor, columnImageSrcUrl) {
� �� let row = this._factory.createShapeNode(x, y + this._conatinerAtt.height + this._i, this._conatinerAtt.width, 10);
� �� let image = this._factory.createShapeNode(x + 4, y + this._conatinerAtt.height + 2 + this._i, 5, 5);
� �� image.setBrush(this._conatinerAtt.brushColor);
� �� image.setPen(this._conatinerAtt.penColor);
� �� //image.setShape(shape.fromId("Circle"));
� �� image.setImageLocation(columnImageSrcUrl);
� �� image.setLocked(true);
� �� this._ctr.add(image);
� �� //this.attachNode(image);
� �� row.setText(columnText);
� �� row.setBrush("White");
� �� this._i += 10;
� �� row.setTextColor(columnTextColor);
� ��
� �� this._ctr.add(row);
� � }

For your Ref. i am adding custom-conatiner.component.ts file

custom-container_component.zip (Attachment deleted)

The way you set ContainerNode.prototype.onUpdateVisuals to e nested function -

Code (]
private createCustomTableTableNode() {
� � MindFusion.Diagramming.ContainerNode.prototype.onUpdateVisuals = (item: MindFusion.Diagramming.DiagramItem) => {
� � ... };}[/code):

The nested function gets the "this" reference from the closure of last called createCustomTableTableNode(), and it gets shared by all containers when you assign it to a prototype. Try moving the ContainerNode.prototype.onUpdateVisual function declaration to a global context, or otherwise assign it to separate node instances instead of ContainerNode.prototype, so each instance remembers "this" from respective createCustomTableTableNode call -

[code]
var node = this._factory.createContainerNode(bounds.x, bounds.y, bounds.width, bounds.height);
node.onUpdateVisuals = (item: MindFusion.Diagramming.DiagramItem) =>
{
var rect = item.bounds;
console.log(this.id);
var nodeText = new MindFusion.Drawing.Text(this._conatinerAtt.text, new MindFusion.Drawing.Rect(rect.x + 30, rect.y + 2, rect.width / 2, rect.width / 2));
nodeText.setFont(new MindFusion.Drawing.Font("sans-serif", 4, false, true, false));
item.getGraphicsContent().push(nodeText);
}

Thanks this resolved the issue.

Now I am facing problem wierd problem Please have a look at the Pic 1 which in expanded state. If collapsed the root node tree appears like this in pic 2.Please let me know where i am going wrong.

Child table nodes in whole tree disappear when you fold the root container? You were handling containerFolded event to offset descendant containers in the tree, are you doing anything else from the event handler?

yes Child nodes in tree disappears.
Code for Folded Event

Code (javascript):

this.diagram.addEventListener(Events.containerFolded, (sender, args) => {
                  console.log("diagram clicked");
                  var node = args.getNode();
                  this.offsetChildNodesFolded(node, node.unfoldedSize.height - node.captionHeight);
                  var r = node.getBounds();
                  r.height = nodeAtt.height;
                  r.width = nodeAtt.width;
                  node.setBounds(r);
                  node.updateLinks();
                  //this.rearrangeDiagram(this.diagram);
            });
private offsetChildNodesFolded(node, offset) {
      var links = node.getOutgoingLinks();
      for (var l = 0; l < links.length; l++) {
         var link = links[l];
         var child = link.getDestination();
         var rect = child.getBounds().clone();
         rect.y -= offset;
         child.setBounds(rect, true);
         this.offsetChildNodesFolded(child, offset);
      }
}

Code For Unfolded Event

Code (javascript):

this.diagram.addEventListener(Events.containerUnfolded, (sender, args) => {
                  console.log("diagram clicked");
                  var node = args.getNode();
                  this.offsetChildNodesUnFolded(node, node.unfoldedSize.height - node.captionHeight);

                  node.updateLinks();
                  //this.rearrangeDiagram(this.diagram);
            });
private offsetChildNodesUnFolded(node, offset) {
      var links = node.getOutgoingLinks();
      for (var l = 0; l < links.length; l++) {
         var link = links[l];
         var child = link.getDestination();
         var rect = child.getBounds().clone();
         rect.y += offset;
         child.setBounds(rect, true);
         this.offsetChildNodesUnFolded(child, offset);
      }
}

Right, node.setBounds(r) only moves specified node and not child nodes and connected links. So in version 2.8 there are optional parameters like setBounds: function(rect, updateLinks, updateChildren) and you'd need to call it with true for updateChildren to automatically offset the table too. In version 3 it's a single bool parameter - setBounds: function(rect, updateDependencies). We haven't added these to Typescript definitions, you can either add them to d.ts file depending on what version you are using, or call setBounds(rect) for the child table too when offsetting its container. We'll add the updateDependencies argument for v3 Typescript definitions next week.

This resolved my issue. Please let me know when are you going to release the typescript definitions files
One more problem i am facing now please have look at the pics.
Please let me know how can i solve this issue.

As we discussed before node.setBounds only offsets end points of connected links, and if your links consist of more than one segments you'll need to apply same offset to their points too. E.g. add this to offsetChildNodesFolded after the child.setBounds call -

Code (]
for (var c = 1; c < link.getControlPoints().length - 1; c++)
link.getControlPoints()[c):

.y -= offset;
link.updateFromPoints();

and same in Unfolded variant but adding the offset to y instead.

In below diagram i need to drag the node highlighted in red� and drop in to parent node and It should get appended to parent node in blue section. Here comes my problem

1.� When ever we dragging node i need to show ghost image of the node which we are dragging in tooltip which is not happening right now please have a look at the code.
We are using Angular 2 and not able to find out the definitions of get_element and Dispose

Code (javascript):

� � getNodeUnderCursor(event) {
� �� var localPoint = this.getLocalPoint(event);
� �� return this.diagram.getNodeAt(localPoint, true, true);
� � }
� � getLocalPoint(event) {
� �� // Get the relative coordinates
� �� var offset = $('#diagram').offset();
� �� var x = (event.pageX - offset.left) + $(window).scrollLeft();
� �� var y = (event.pageY - offset.top) + $(window).scrollTop();

� �� return this.diagram.clientToDoc(new Point(x, y));
� � }
� � onDragStartEvent(e) {
� �� let node = this.tngc.getNodeUnderCursor(e);
� �� if (node != null) {
� �� if (e.dataTransfer.setDragImage) {
� �� let ghost = <MindFusion.Diagramming.Diagram>this.createDragShape(node);
� �� if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
� �� let img = new Image();
� �� img.src = ghost.get_element().toDataURL();
� �� e.dataTransfer.setDragImage(img, 0, 0);
� �� }
� �� else
� �� e.dataTransfer.setDragImage(ghost.get_element(), 0, 0);
� �� ghost.dispose();
� �� ghost = null;
� �� }
� �� e.dataTransfer.setData("text", node.getText());

� �� }
� � }

� � onDragEnterEvent(event) {
� �� console.log(event);
� � }

� � createDragShape(node) {
� �� var bounds = new Rect(0, 0, node.getBounds().width, node.getBounds().height);

� �� var canvasElement = document.createElement('canvas');
� �� canvasElement.id = 'ghost';
� �� canvasElement.width = bounds.width;
� �� canvasElement.height = bounds.height;

� �� var canvas = MindFusion.Diagramming.Diagram.create(canvasElement);
� �� canvas.setBounds(bounds);

� �� var cnode = node.clone();
� �� cnode.shadowColor = 'transparent';
� �� cnode.parent = canvas;
� �� cnode.setBounds(bounds);
� �� cnode.addCanvasElements();

� �� return canvas;
� � }

Can you please let me know what is going wrong over here?

Comparing with our code above, you have changed MindFusion.Drawing.Canvas to MindFusion.Diagramming.Diagram and have removed the lines that call repaint and set canvas.scale. Return these back and it will work.

[code]
var canvas = MindFusion.AbstractionLayer.createControl(MindFusion.Drawing.Canvas, null, null, null, canvasElement);
canvas.scale = 1;
canvas.setBounds(bounds);

var cnode = node.clone();
cnode.shadowColor = 'transparent';
cnode.parent = canvas;
cnode.setBounds(bounds);
cnode.addCanvasElements();

canvas.repaint();[/code]

The MindFusion Forums
Flow Diagramming Components >> Html Canvas & JavaScript >> Custom Conatiner Node https://mindfusion.eu/Forum/YaBB.pl?num=1492524225 Message started by Ankur shah on Apr 18^th, 2017 at 2:03pm