Page Index Toggle Pages: [1] 2 3 4 Send TopicPrint
Very Hot Topic (More than 25 Replies) To highlight a composite node/link/label when selected ! (Read 21326 times)
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
To highlight a composite node/link/label when selected !
Mar 15th, 2019 at 11:06am
Print Post  
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 12:45pm by Kannan Thirumal »  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: To highlight a composite node when selected !
Reply #1 - Mar 15th, 2019 at 12:48pm
Print Post  
Hi,

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

Code (Javascript)
Select All
//...
{
    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
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: To highlight a composite node when selected !
Reply #2 - Mar 15th, 2019 at 1:25pm
Print Post  
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
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: To highlight a composite node when selected !
Reply #3 - Mar 19th, 2019 at 11:40am
Print Post  
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
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: To highlight a composite node when selected !
Reply #4 - Jun 11th, 2019 at 12:13pm
Print Post  
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
  

Node_Selection_Background_Issue.png ( 220 KB | 174 Downloads )
Node_Selection_Background_Issue.png
Mouse_Multi_Select_Issue.png ( 192 KB | 188 Downloads )
Mouse_Multi_Select_Issue.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: To highlight a composite node when selected !
Reply #5 - Jun 11th, 2019 at 6:11pm
Print Post  
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
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: To highlight a composite node when selected !
Reply #6 - Jun 12th, 2019 at 8:00am
Print Post  
Kannan Thirumal wrote on Jun 11th, 2019 at 12: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
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: To highlight a composite node when selected !
Reply #7 - Jun 13th, 2019 at 11:49am
Print Post  
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
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: To highlight a composite node when selected !
Reply #8 - Jun 14th, 2019 at 9:37am
Print Post  
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
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: To highlight a composite node when selected !
Reply #9 - Jun 17th, 2019 at 6:37am
Print Post  
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
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: To highlight a composite node when selected !
Reply #10 - Jun 17th, 2019 at 12:42pm
Print Post  
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 9: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

  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: To highlight a composite node when selected !
Reply #11 - Jun 17th, 2019 at 1:06pm
Print Post  
Hi,

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

Code (Javascript)
Select All
// 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
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: To highlight a composite node when selected !
Reply #12 - Jun 17th, 2019 at 1:33pm
Print Post  
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
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: To highlight a composite node when selected !
Reply #13 - Jun 17th, 2019 at 2:16pm
Print Post  
Kannan Thirumal wrote on Jun 17th, 2019 at 12: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.
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: To highlight a composite node when selected !
Reply #14 - Jun 17th, 2019 at 4:13pm
Print Post  
Kannan Thirumal wrote on Jun 17th, 2019 at 1: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)
Select All
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)
Select All
//...

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

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



Regards,
Lyubo

  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 3 4
Send TopicPrint