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 21323 times)
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 #15 - Jun 18th, 2019 at 4:34am
Print Post  
Oh. That is the root cause Sad Thank you LyuBO Smiley

Lyubo wrote on Jun 17th, 2019 at 2:16pm:
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
 
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 #16 - Jun 19th, 2019 at 7:19am
Print Post  
Hi,

May I know how to override the DiagramNode.getRepaintBounds method? I tried but didn't work. Please let me know.

this.DiagramNode = MyCompositeNode.classFromTemplate("DiagramNode", template);

class MyCompositeNode extends CompositeNode {

constructor() {

super();
}

getRepaintBounds(): MindFusion.Drawing.Rect {

var bounds = super.getRepaintBounds();

var newBounds = new Rect(bounds.x - 5, bounds.y - 5, bounds.width + 5, bounds.height + 5);

return newBounds;
}

static classFromTemplate(className: string, jsonTemplate: any): any {

var class1 = super.classFromTemplate(className, jsonTemplate);

return class1;
}
}

Also I'm not sure why the below code is not working?

var node = new this.DiagramNode();

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

Regards,
Kannan

Slavcho wrote on Jun 11th, 2019 at 6: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

  
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 #17 - Jun 19th, 2019 at 12:39pm
Print Post  
Hi,

You can override the getRepaintBounds method like this:
Code (Javascript)
Select All
// ...

// Call inside your ngAfterViewInit for example
var originalGetRotatedBounds = CompositeNode.prototype.getRepaintBounds;
CompositeNode.prototype.getRepaintBounds = function()
{
	var bounds = originalGetRotatedBounds.apply(this, []);
	var newBounds = new Rect(bounds.x - 5, bounds.y - 5, bounds.width + 10, bounds.height + 10);
	return newBounds;
};

//...
this.DiagramNode = CompositeNode.classFromTemplate("DiagramNode", template);
//... 



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 #18 - Jun 20th, 2019 at 9:46am
Print Post  
Hi,

Thank you. It works ! Like highlighting node, I need to highlight selected link too. ie when selected the link, need to change the size and color of the control points. May I know how to do that? Thank you !

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 #19 - Jun 20th, 2019 at 12:58pm
Print Post  
Hi,

Custom drawing of links' adjustment handles is not supported out of the box, but you can achieve it by overriding the DiagramLink.drawHandles method and customize the fill, stroke, thickness, size, etc. of the handles:
Code (Java)
Select All
MindFusion.Diagramming.DiagramLink.prototype["drawHandles"] = function (context)
{
    context.fillStyle = "yellow"; // handle background
    context.strokeStyle = "red"; // handle stroke
    if (context.setLineDash)
        context.setLineDash([]);
    context.lineWidth = 2 / context._mf_scale; // handle stroke thickness

    var size = this.getEffectiveHandlesSize() * 1.5; // handle size
    var hsize = size / 2;

    // the side and corner handles
    for (var i = 0; i < this.points.length; i++)
    {
        var point = this.points[i];

        if (i % 3 > 0 || this.shape != MindFusion.Diagramming.LinkShape.Bezier)
        {
            context.fillRect(point.x - hsize, point.y - hsize, size, size);
            context.strokeRect(point.x - hsize, point.y - hsize, size, size);
        }
        else
        {
            MindFusion.Diagramming.HandleUtils.drawCircle(context, point, hsize);
        }
    }
}; 



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 #20 - Jun 24th, 2019 at 7:36am
Print Post  
Hi,

I'm getting a weird behavior. ie selection is not happening for the FIRST created node.

Please see the attached screen shot.

Also please download the sample code from this path,

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

Regards,
Kannan

Lyubo wrote on Jun 19th, 2019 at 12:39pm:
Hi,

You can override the getRepaintBounds method like this:
Code (Javascript)
Select All
// ...

// Call inside your ngAfterViewInit for example
var originalGetRotatedBounds = CompositeNode.prototype.getRepaintBounds;
CompositeNode.prototype.getRepaintBounds = function()
{
	var bounds = originalGetRotatedBounds.apply(this, []);
	var newBounds = new Rect(bounds.x - 5, bounds.y - 5, bounds.width + 10, bounds.height + 10);
	return newBounds;
};

//...
this.DiagramNode = CompositeNode.classFromTemplate("DiagramNode", template);
//... 



Regards,
Lyubo

  

First_Node_Not_Selected.png ( 258 KB | 184 Downloads )
First_Node_Not_Selected.png
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 #21 - Jun 24th, 2019 at 7:43am
Print Post  
Kannan Thirumal wrote on Jun 24th, 2019 at 7:36am:
Hi,

I'm facing an odd behavior. ie selection is not happening for the FIRST created node.

Sample-1 :

    this.createCompositeNode(diagramElement1);
    this.createCompositeNode(diagramElement2);
    this.createCompositeNode(diagramElement3);
    this.createCompositeNode(diagramElement21);
    this.createCompositeNode(diagramElement22);
    this.createShapeNode(shapeElement1);
    this.createShapeNode(shapeElement2);

Sample-2:

    this.createCompositeNode(diagramElement2);
    this.createCompositeNode(diagramElement1);
    this.createCompositeNode(diagramElement3);
    this.createCompositeNode(diagramElement21);
    this.createCompositeNode(diagramElement22);
    this.createShapeNode(shapeElement1);
    this.createShapeNode(shapeElement2);

Please see the attached screen shot for Sample-1 and Sample-2.

Also please download the sample code from this path,

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

Regards,
Kannan

Lyubo wrote on Jun 19th, 2019 at 12:39pm:
Hi,

You can override the getRepaintBounds method like this:
Code (Javascript)
Select All
// ...

// Call inside your ngAfterViewInit for example
var originalGetRotatedBounds = CompositeNode.prototype.getRepaintBounds;
CompositeNode.prototype.getRepaintBounds = function()
{
	var bounds = originalGetRotatedBounds.apply(this, []);
	var newBounds = new Rect(bounds.x - 5, bounds.y - 5, bounds.width + 10, bounds.height + 10);
	return newBounds;
};

//...
this.DiagramNode = CompositeNode.classFromTemplate("DiagramNode", template);
//... 



Regards,
Lyubo


  

Sample1-First_Node_Not_Selected.png ( 258 KB | 170 Downloads )
Sample1-First_Node_Not_Selected.png
Sample2-First_Node_Not_Selected.png ( 254 KB | 175 Downloads )
Sample2-First_Node_Not_Selected.png
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 #22 - Jun 24th, 2019 at 8:40am
Print Post  
Hi,

Are you sure you've linked the correct sample code above? I've downloaded it and it appears it's the first version of the application we already had and I can't find or reproduce the issue you've described.

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 #23 - Jun 24th, 2019 at 8:54am
Print Post  
Sorry Lyubo, could you please check this?

https://drive.google.com/open?id=11O8F1N3c7ekyIUk5FX1-OrDDTd8jVU77

Lyubo wrote on Jun 24th, 2019 at 8:40am:
Hi,

Are you sure you've linked the correct sample code above? I've downloaded it and it appears it's the first version of the application we already had and I can't find or reproduce the issue you've described.

Regards,
Lyubo

  
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 #24 - Jun 24th, 2019 at 11:38am
Print Post  
Hi,

The first node gets deselected in your getCurrentSelectedDiagramElement method. You need to either refactor it to handle the multiple selection, or just rely on the NodeSelected and NodeDeselected event handling, that you already use.

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 #25 - Jun 24th, 2019 at 1:42pm
Print Post  
Hi Lyubo,

     Thank you for helping me to find the root cause. Will fix that!

Regards,
Kannan

Lyubo wrote on Jun 24th, 2019 at 11:38am:
Hi,

The first node gets deselected in your getCurrentSelectedDiagramElement method. You need to either refactor it to handle the multiple selection, or just rely on the NodeSelected and NodeDeselected event handling, that you already use.

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/link when selected !
Reply #26 - Jun 26th, 2019 at 7:40am
Print Post  
Hi Lyubo,

This works! Thank you!

When I click the link, the points are shown and I'm able to customize the points now. That is fine. But when I mouse hover the link, the points are not shown. May I know how to show link points on mouse over and how to customize those points?

Regards,
Kannan

Lyubo wrote on Jun 20th, 2019 at 12:58pm:
Hi,

Custom drawing of links' adjustment handles is not supported out of the box, but you can achieve it by overriding the DiagramLink.drawHandles method and customize the fill, stroke, thickness, size, etc. of the handles:
Code (Java)
Select All
MindFusion.Diagramming.DiagramLink.prototype["drawHandles"] = function (context)
{
    context.fillStyle = "yellow"; // handle background
    context.strokeStyle = "red"; // handle stroke
    if (context.setLineDash)
        context.setLineDash([]);
    context.lineWidth = 2 / context._mf_scale; // handle stroke thickness

    var size = this.getEffectiveHandlesSize() * 1.5; // handle size
    var hsize = size / 2;

    // the side and corner handles
    for (var i = 0; i < this.points.length; i++)
    {
        var point = this.points[i];

        if (i % 3 > 0 || this.shape != MindFusion.Diagramming.LinkShape.Bezier)
        {
            context.fillRect(point.x - hsize, point.y - hsize, size, size);
            context.strokeRect(point.x - hsize, point.y - hsize, size, size);
        }
        else
        {
            MindFusion.Diagramming.HandleUtils.drawCircle(context, point, hsize);
        }
    }
}; 



Regards,
Lyubo

« Last Edit: Jun 26th, 2019 at 11:17am 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 #27 - Jun 26th, 2019 at 12:23pm
Print Post  
Hi,

You can set the ModificationStart property to AutoHandles. That will show the handles on mouse hover:
Code (Javascript)
Select All
diagram.setModificationStart(MindFusion.Diagramming.ModificationStart.AutoHandles); 



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/link/label when selected !
Reply #28 - Jun 26th, 2019 at 12:44pm
Print Post  
Hi Lyubo,

Thank you! It works.

May I know how to customize the node label which I've attached to the node like this. Points are displayed on mouse over and selection. But, for points, I need to fill color on mouse over and need to change border color on selection of the label (similar to link selection).

private createCompositeNode(diagramElement: DiagramElement): CompositeNode {

var node = new this.DiagramNode();

node.setBounds(new Rect(diagramElement.x, diagramElement.y, diagramElement.width, diagramElement.height));
node.setMainImage(diagramElement.imageSource);
node.setHandlesStyle(common.Diagramming.HandlesStyle.EasyMove);

var compNode = node as CompositeNode;
var mainImageComponent = compNode.getComponent("MainImage") as any;
mainImageComponent.image.width = diagramElement.width;
mainImageComponent.image.height = diagramElement.height;

node.setHandlesStyle(MindFusion.Diagramming.HandlesStyle.Custom);

this.diagram.addItem(node);

var nodeName = this.addNodeName(this.diagram, diagramElement);

this.diagram.addItem(nodeName);
node.attach(nodeName);

return compNode;
}

private addNodeName(diagram: Diagram, diagramElement: DiagramElement): ShapeNode {

var nameNode = diagram.getFactory().createShapeNode(diagramElement.x, diagramElement.y + 60, 50, 20);

nameNode.setEnableStyledText(true);
nameNode.setText(diagramElement.name);
nameNode.setFont(new Font("Verdana", 10));
nameNode.setAllowOutgoingLinks(false);
nameNode.setAllowIncomingLinks(false);
nameNode.setTransparent(true);
nameNode.setHandlesStyle(common.Diagramming.HandlesStyle.EasyMove);
nameNode.setStroke("Orange");
nameNode.setStrokeThickness(5);

return nameNode;
}

Regards,
Kannan

Lyubo wrote on Jun 26th, 2019 at 12:23pm:
Hi,

You can set the ModificationStart property to AutoHandles. That will show the handles on mouse hover:
Code (Javascript)
Select All
diagram.setModificationStart(MindFusion.Diagramming.ModificationStart.AutoHandles); 



Regards,
Lyubo

« Last Edit: Jun 27th, 2019 at 9:36am by Kannan Thirumal »  

Node_Label_Selection.png ( 22 KB | 168 Downloads )
Node_Label_Selection.png
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 #29 - Jun 26th, 2019 at 1:08pm
Print Post  
Hi,

This works but the mouse over and selection are same. But I need different colors as attached sample image.

Mouse Over : Gray Filled
Selection : Orange Border

Regards,
Kannan

Lyubo wrote on Jun 26th, 2019 at 12:23pm:
Hi,

You can set the ModificationStart property to AutoHandles. That will show the handles on mouse hover:
Code (Javascript)
Select All
diagram.setModificationStart(MindFusion.Diagramming.ModificationStart.AutoHandles); 



Regards,
Lyubo

  

Node_Label-Mouse_Over.png ( 15 KB | 181 Downloads )
Node_Label-Mouse_Over.png
Node_Label-Selection.png ( 16 KB | 170 Downloads )
Node_Label-Selection.png
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1 [2] 3 4 
Send TopicPrint