- Welcome, Guest. Please Login or Register
MindFusion  
  We are soon releasing MindFusion.JavaScript pack. Initial version includes chart, diagram, calendar, map, virtual keyboard, gauge and UI components. Here are the beta version and live demo for anyone interested.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Page Index Toggle Pages: 1 Send Topic Print  
To highlight a composite node when selected !
Read 314 times

Kannan Thirumal   Offline
YaBB Newbies
*
Posts: 45
I Love MindFusion!


   
     
 
To highlight a composite node when selected !
Mar 15th, 2019 at 12:06pm
 
Hi,

I've defined a composite node like this.

OrgChartNode = CompositeNode.classFromTemplate("OrgChartNode",
    {
      component: "GridPanel",
      id: "id",
      rowDefinitions: ["*"],
      columnDefinitions: ["22"],
      children:
        [
          {
            component: "GridPanel",
            rowDefinitions: ["18", "5"],
            columnDefinitions: ["18", "5"],
            children:
              [
                {
                  gridColumn: 0,
                  component: "Image",
                  name: "MainImage",
                  autoProperty: true,
                  location: "MainImage.png",
                  margin: "3",
                  imageAlign: "TopLeft"
                },
                {
                  gridColumn: 0,
                  component: "Image",
                  name: "FirstImage",
                  autoProperty: true,
                  location: "FirstImage.png",
                  margin: "3, 3, 0, 0",
                  imageAlign: "TopLeft"
                },
                {
                  gridColumn: 0,
                  component: "Text",
                  name: "NoOfElementsText",
                  autoProperty: true,
                  text: "title",
                  margin: "3, 40, 0, 0",
                  font: "Verdana 12px",
                  textAlign: "BottomLeft"
                },
              ]
          },
    });

I want to highlight the node when selected. I tried setting stroke like this, but didn't work. Any idea?

    var node = new this.OrgChartNode();

    var compNode = node as CompositeNode;
    compNode.setStroke("#FFFFFF");
    compNode.setStrokeThickness(5);

Regards,
Kannan
 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 269
Gender: male
MindFusion team


   
     
 
Re: To highlight a composite node when selected !
Reply #1 - Mar 15th, 2019 at 1:48pm
 
Hi,

You can add a Rect component to the template, and set its pen and strokeThickness properties:

Code (Javascript):
//...
{   
    component: "Rect",
    name: "Background",
    pen: "#FFF",
    strokeThickness: 5
},
//... 



If you have more than 1 row/column in the template, you can set its rowSpan/columnSpan properties respectively.

Regards,
Lyubo
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
YaBB Newbies
*
Posts: 45
I Love MindFusion!


   
     
 
Re: To highlight a composite node when selected !
Reply #2 - Mar 15th, 2019 at 2:25pm
 
Hi,

I've defined like this but didn't work. Any idea?

OrgChartNode = CompositeNode.classFromTemplate("OrgChartNode",
    {
      component: "GridPanel",
      id: "id",
      rowDefinitions: ["*"],
      columnDefinitions: ["22"],
      children:
        [
          {
            component: "GridPanel",
            rowDefinitions: ["18", "5"],
            columnDefinitions: ["18", "5"],
            children:
              [
                {
                  gridColumn: 0,
                  component: "Rect",
                  name: "Background",
                  pen: "black",
                  //stroke: "black",
                  strokeThickness: 5,
                },
                {
                  gridColumn: 0,
                  component: "Image",
                  name: "MainImage",
                  autoProperty: true,
                  location: "MainImage.png",
                  margin: "3",
                  imageAlign: "TopLeft"
                },
                {
                  gridColumn: 0,
                  component: "Image",
                  name: "FirstImage",
                  autoProperty: true,
                  location: "FirstImage.png",
                  margin: "3, 3, 0, 0",
                  imageAlign: "TopLeft"
                },
                {
                  gridColumn: 0,
                  component: "Text",
                  name: "NoOfElementsText",
                  autoProperty: true,
                  text: "title",
                  margin: "3, 40, 0, 0",
                  font: "Verdana 12px",
                  textAlign: "BottomLeft"
                },
              ]
          },
    });

Regards,
Kannan
 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 269
Gender: male
MindFusion team


   
     
 
Re: To highlight a composite node when selected !
Reply #3 - Mar 19th, 2019 at 12:40pm
 
Hi,

We've adjusted the Tutorial3 sample from the JsDiagram package to show one way you can implement highlighting for CompositeNode. You can download it here.

Regards,
Lyubo
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
YaBB Newbies
*
Posts: 45
I Love MindFusion!


   
     
 
Re: To highlight a composite node when selected !
Reply #4 - Jun 11th, 2019 at 1:13pm
 
Hi,

I'm highlighting the node on selection by the following code,

this.diagram.addEventListener(Event.nodeSelected, (sender, args) => {
      var node = args.getNode();
      this.selectNode(node);
    });

    this.diagram.addEventListener(Event.nodeDeselected, (sender, args) => {
      var node = args.getNode();
      this.deselectNode(node);
    });
  }

  private selectedNode: any;

  private selectNode(node): void {

    var background = node.getComponent("Background");
    background.pen = "Orange";
    background.strokeThickness = 5;
    background.margin.right = -node.bounds.width + 18;
    background.margin.bottom = -node.bounds.height + 12;
    node.invalidate();
  }

  private deselectNode(node): void {
    var background = node.getComponent("Background");
    background.pen = "white";
    background.strokeThickness = 0;
    node.invalidate();
  }

This is working fine. But when selecting another node, the previous node selection is not clearing properly. Please check the attached screen shot Node Selection Background Issue.png.

Also when doing multiple select using mouse drag, the mouse drag is still continuing and it is not releasing. That is the selection rectangle is moving along with the mouse. Please check the attached screen shot Mouse Multi Select Issue.png.

I've uploaded the sample in the below path,

https://drive.google.com/open?id=1yu5xlJn3aqoBzXnKvcrUZ177vETo3M1i

Regards,
Kannan
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1700
Gender: male
tech.support


   
     
 
Re: To highlight a composite node when selected !
Reply #5 - Jun 11th, 2019 at 7:11pm
 
The "Background" rect from your node template does not fit inside node's Bounds due to the fixed row/column sizes, and latest version repaints only the area of node.Bounds, so the rect's part that sticks out doesn't get refreshed. Try using * instead of fixed sizes in row/col definitions to make the rows and columns resize with the node.

Actually I'm not seeing any reason for the nested grids in the template.txt and using two rows and columns if you only need to display a rectangle with image inside; try a single SimplePanel having the Rect and Image components as its children.

Alternatively if you really need the frame rectangle to be drawn outside of node.Bounds, you will have to override the DiagramNode.getRepaintBounds method and return a larger rectangle.

The selection will keep getting drawn if some error happens during processing of mouse-up events. Try enabling stop-on-error in your browser's debugger and check the top of the call stack to see what's wrong.

Regards,
Slavcho
Mindfusion
 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 269
Gender: male
MindFusion team


   
     
 
Re: To highlight a composite node when selected !
Reply #6 - Jun 12th, 2019 at 9:00am
 
Kannan Thirumal wrote on Jun 11th, 2019 at 1:13pm:
Also when doing multiple select using mouse drag, the mouse drag is still continuing and it is not releasing. That is the selection rectangle is moving along with the mouse. Please check the attached screen shot Mouse Multi Select Issue.png.


Hi,

The selection stops, because the interaction goes out of the bounds of the diagram canvas. To prevent that, set a bigger bounds rectangle for the diagram.

Regards,
Lyubo
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
YaBB Newbies
*
Posts: 45
I Love MindFusion!


   
     
 
Re: To highlight a composite node when selected !
Reply #7 - Jun 13th, 2019 at 12:49pm
 
Hi,

     I increased the width/height of canvas and tried. Still same is happening.

     Please check the sample to reproduce the issue: https://drive.google.com/open?id=1yu5xlJn3aqoBzXnKvcrUZ177vETo3M1i

Regards,
Kannan
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1700
Gender: male
tech.support


   
     
 
Re: To highlight a composite node when selected !
Reply #8 - Jun 14th, 2019 at 10:37am
 
Hi,

You can make the diagram's area larger by calling diagram.setBounds(new Rect(...)); Assigning canvas element's width and height will have no effect since the Bounds value overwrites them.

Regards,
Slavcho
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
YaBB Newbies
*
Posts: 45
I Love MindFusion!


   
     
 
Re: To highlight a composite node when selected !
Reply #9 - Today at 7:37am
 
Hi,

This is happening because of the node highlight-logic below,

this.diagram.addEventListener(Event.nodeSelected, (sender, args) => {
      var node = args.getNode();
      this.selectNode(node);
    });

    this.diagram.addEventListener(Event.nodeDeselected, (sender, args) => {
      var node = args.getNode();
      this.deselectNode(node);
    });
  }

  private selectNode(node): void {

    var background = node.getComponent("Background");
    background.pen = "Orange";
    background.strokeThickness = 5;
    background.margin.right = -node.bounds.width + 18;
    background.margin.bottom = -node.bounds.height + 12;
    node.invalidate();
  }

  private deselectNode(node): void {
    var background = node.getComponent("Background");
    background.pen = "white";
    background.strokeThickness = 0;
    node.invalidate();
  }

This was suggested on this post on Mar 19th, 2019 at 12:40pm.

Is there any other way to highlight a selected node?

I'm not sure the below code also not working for node selection?

    var compNode = node as CompositeNode;

    compNode.setStroke("#FFFFFF");
    compNode.setStrokeThickness(5);

Regards,
Kannan
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
YaBB Newbies
*
Posts: 45
I Love MindFusion!


   
     
 
Re: To highlight a composite node when selected !
Reply #10 - Today at 1:42pm
 
Hi,

After setting diagram bounds also I'm having the same issue. I've attached the sample to reproduce the issue. Please check it,

     https://drive.google.com/open?id=1LL3Ev1_gEdohu3kJGqW8UXNmWLJ2OnCw

Regards,
Kannan

Slavcho wrote on Jun 14th, 2019 at 10:37am:
Hi,

You can make the diagram's area larger by calling diagram.setBounds(new Rect(...)); Assigning canvas element's width and height will have no effect since the Bounds value overwrites them.

Regards,
Slavcho

 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 269
Gender: male
MindFusion team


   
     
 
Re: To highlight a composite node when selected !
Reply #11 - Today at 2:06pm
 
Hi,

You can make the highlight utilizing the custom drawing adjustment handles technique:

Code (Javascript):
// Subscribe to the drawAdjustmentHandles and hitTestAdjustmentHandles events.
diagram.addEventListener(MindFusion.Diagramming.Events.drawAdjustmentHandles, onDrawHandles);
diagram.addEventListener(MindFusion.Diagramming.Events.hitTestAdjustmentHandles, onHitTestHandles);

// ...

// drawAdjustmentHandles handler
function onDrawHandles(sender, args)
{
	var bounds = args.node.getBounds();
	var context = args.context;
	var size = args.node.parent.getAdjustmentHandlesSize();
	var halfsize = size / 2;

	// draw the highlight
	context.save();
	context.fillStyle = "#ce0000"; //highlight brush
	context.fillRect(bounds.x - halfsize, bounds.y - halfsize, bounds.width + size, size);
	context.fillRect(bounds.x - halfsize, bounds.y - halfsize, size, bounds.height + size);
	context.fillRect(bounds.x - halfsize, bounds.y + bounds.height - halfsize, bounds.width + size, size);
	context.fillRect(bounds.x + bounds.width - halfsize, bounds.y - halfsize, size, bounds.height + size);
	context.restore();

	// Draw the regular handles
	args.node.handlesStyle = MindFusion.Diagramming.HandlesStyle.SquareHandles;
	MindFusion.Diagramming.HandleUtils.drawSquareHandles(context, args.node);
	args.node.handlesStyle = MindFusion.Diagramming.HandlesStyle.Custom;
}

// hitTestAdjustmentHandles handler
function onHitTestHandles(sender, args)
{
	var node = args.node;
	var mousePosition = args.mousePosition;

	// Temporarily set the handles style to default to perform hit-testing
	args.node.handlesStyle = MindFusion.Diagramming.HandlesStyle.SquareHandles;
	var result = MindFusion.Diagramming.HandleUtils.pointInHandle(mousePosition, node);
	args.node.handlesStyle = MindFusion.Diagramming.HandlesStyle.Custom;

	if (result)
		return args.setAdjustmentHandle(result.index);
}

// ...

// set the item's handles style
node.setHandlesStyle(MindFusion.Diagramming.HandlesStyle.Custom); 



The HandleUtils class is currently not available in the TypeScript definitions file, so you'll need to add it via declaration merging.

Regards,
Lyubo
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
YaBB Newbies
*
Posts: 45
I Love MindFusion!


   
     
 
Re: To highlight a composite node when selected !
Reply #12 - Today at 2:33pm
 
Hi,

I'm getting this compile error,

ERROR in src/app/diagram/diagram.component.ts(85,28): error TS2339: Property 'HandleUtils' does not exist on type 'typeof Diagramming'.
src/app/diagram/diagram.component.ts(96,41): error TS2339: Property 'HandleUtils' does not exist on type 'typeof Diagramming'.

Please help me to fix this.

Regards,
Kannan
 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 269
Gender: male
MindFusion team


   
     
 
Re: To highlight a composite node when selected !
Reply #13 - Today at 3:16pm
 
Kannan Thirumal wrote Today at 1:42pm:
Hi,

After setting diagram bounds also I'm having the same issue. I've attached the sample to reproduce the issue. Please check it,

     https://drive.google.com/open?id=1LL3Ev1_gEdohu3kJGqW8UXNmWLJ2OnCw

Regards,
Kannan


Your application gives error, because you're calling getComponent method on DiagramNode and ShapeNode. This method is available only on CompositeNode. That's why the selection can't complete.
 
 
 
IP Logged    
 
     
Page Index Toggle Pages: 1 Send Topic Print