- Welcome, Guest. Please Login or Register
MindFusion  
  We have released initial version of MindFusion.JavaScript pack. It includes chart, diagram, calendar, map, virtual keyboard, gauge and UI components. Here are more details and live demo for anyone interested.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Pages: 1 2 3  Send Topic Print  
To highlight a composite node/link/label when selected !
Read 1115 times

Kannan Thirumal   Offline
Junior Member
**
Posts: 90
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
To highlight a composite node/link/label 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
 
 
« Last Edit: Jun 26th, 2019 at 1:45pm by Kannan Thirumal »
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 302
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
Junior Member
**
Posts: 90
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
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: 302
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
Junior Member
**
Posts: 90
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
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: 1750
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: 302
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
Junior Member
**
Posts: 90
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
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: 1750
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
Junior Member
**
Posts: 90
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: To highlight a composite node when selected !
Reply #9 - Jun 17th, 2019 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
Junior Member
**
Posts: 90
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: To highlight a composite node when selected !
Reply #10 - Jun 17th, 2019 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: 302
Gender: male
MindFusion team


   
     
 
Re: To highlight a composite node when selected !
Reply #11 - Jun 17th, 2019 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
Junior Member
**
Posts: 90
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: To highlight a composite node when selected !
Reply #12 - Jun 17th, 2019 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: 302
Gender: male
MindFusion team


   
     
 
Re: To highlight a composite node when selected !
Reply #13 - Jun 17th, 2019 at 3:16pm
 
Kannan Thirumal wrote on Jun 17th, 2019 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    
 
     

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


   
     
 
Re: To highlight a composite node when selected !
Reply #14 - Jun 17th, 2019 at 5:13pm
 
Kannan Thirumal wrote on Jun 17th, 2019 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


Hi,

You can use standard TypeScript declaration merging like this:
Code (Javascript):
declare module "diagram-library"
{
	namespace Diagramming
	{
		class HandleUtils
		{
			drawSquareHandles(context: CanvasRenderingContext2D, item: MindFusion.Diagramming.DiagramItem): void;
			pointInHandle(point: MindFusion.Drawing.Point, item: MindFusion.Diagramming.DiagramItem) : number;
		}
	}
} 



If that doesn't work in your setup, you can always cast to any to avoid the compile-time errors, i.e. replace the HandleUtils calls in the example in the previous post with:
Code (Javascript):
//...

(MindFusion.Diagramming["HandleUtils"] as any).drawSquareHandles(context, args.node);

//...
var result = (MindFusion.Diagramming["HandleUtils"] as any).pointInHandle(mousePosition, node);
//... 



Regards,
Lyubo

 
 
 
IP Logged    
 
     
Pages: 1 2 3  Send Topic Print