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 7564 times)
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 509
Joined: Jun 17th, 2010
Re: To highlight a composite node when selected !
Reply #30 - Jun 27th, 2019 at 5:56am
Print Post  
Kannan Thirumal wrote on Jun 26th, 2019 at 1:08pm:
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


Hi,

Just check if the link is selected in your drawHandles override and apply the needed fill/stroke brushes:
Code (Java)
Select All
if (this.getSelected())
{
    context.fillStyle = "yellow"; // handle background
    context.strokeStyle = "orange"; // handle stroke
}
else
{
    context.fillStyle = "gray"; // handle background
    context.strokeStyle = "black"; // handle stroke
} 



The above code will work only if the ModificationStart property is set to AutoHandles - or the handles will show only for selection - so the else condition will never be fulfilled if not set.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 266
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: To highlight a composite node/link/label when selected !
Reply #31 - Jun 27th, 2019 at 2:17pm
Print Post  
Hi Lyubo,

Thanks ! It works ! I tried the same for node label like this. But I couldn't find similar to "this.points". May I know how to fix this? I need the similar behavior which is attached with this.

ShapeNode.prototype["drawHandles"] = function (context) {

if (this.getSelected()) {
context.fillStyle = "Transparent"; // handle background
context.strokeStyle = "Orange"; // handle stroke
}
else {
context.fillStyle = "LightGray"; // handle background
context.strokeStyle = "LightGray"; // handle stroke
}

if (context.setLineDash)
context.setLineDash([]);
context.lineWidth = 1.5; // 2 / context._mf_scale; // handle stroke thickness

var size = this.getEffectiveHandlesSize() * 2; // 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"] as any).drawCircle(context, point, hsize);
}
}
};

I've attached a label (another ShapeNode) for the node like this,

  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.Invisible);

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

    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.SquareHandles);
    nameNode.setStroke("Blue");
    nameNode.setStrokeThickness(5);

    return nameNode;
  }

Regards,
Kannan
« Last Edit: Jun 28th, 2019 at 4:15am by Kannan Thirumal »  

Node_Label-Mouse_Over_001.png ( 15 KB | 66 Downloads )
Node_Label-Mouse_Over_001.png
Node_Label-Selection_001.png ( 16 KB | 63 Downloads )
Node_Label-Selection_001.png
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 509
Joined: Jun 17th, 2010
Re: To highlight a composite node/link/label when selected !
Reply #32 - Jul 1st, 2019 at 5:37am
Print Post  
Hi,

A ShapeNode instance doesn't have a points member, as it doesn't have control points like links do. It uses entirely different method to draw the adjustment handles, and that's the method you need to override.

Try this:
Code (Javascript)
Select All
var originalDrawSH = MindFusion.Diagramming.HandleUtils["drawSquareHandles"];
MindFusion.Diagramming.HandleUtils["drawSquareHandles"] = function (context, item)
{
	if (!MindFusion.AbstractionLayer.isInstanceOfType(MindFusion.Diagramming.ShapeNode, item))
	{
		originalDrawSH.apply(this, [context, item]);
		return;
	}

	var AdjustmentHandles = MindFusion.Diagramming.AdjustmentHandles;
	var HandlesStyle = MindFusion.Diagramming.HandlesStyle;

	var bounds = item.getBounds();
	var diagram = item.getParent();
	var showDisabled = diagram.getShowDisabledHandles();
	var center = bounds.center();
	var size = item.getEffectiveHandlesSize();
	var hsize = size / 2;
	var style = item.getHandlesStyle();
	var mask = item.getEnabledHandles();

	// Calculate selection handles coordinates
	var mm = MindFusion.Drawing.GraphicsUnit.getMillimeter(diagram.measureUnit);
	var handlePoints = MindFusion.Diagramming.HandleUtils.getHandlePositions(bounds, mm);

	if (item.getSelected())
	{
		context.fillStyle = "Transparent"; // handle background
		context.strokeStyle = "Orange"; // handle stroke
	}
	else
	{
		context.fillStyle = "LightGray"; // handle background
		context.strokeStyle = "LightGray"; // handle stroke
	}
	context.lineWidth = 1 / context._mf_scale;

	// the rotation handle first, so the line connecting top center and rotation is below
	if ((mask & AdjustmentHandles.Rotate) != 0)
		MindFusion.Diagramming.HandleUtils["drawRotationHandle"](context, item);

	// The side and corner handles
	for (var h = 0; h < 9; h++)
	{
		var disabled = (mask & (1 << h)) == 0;
		if (disabled && !showDisabled)
			continue;

		var point = handlePoints[h];

		if (h == 8)
		{
			if (style == HandlesStyle.EasyMove)
			{
				MindFusion.Diagramming.HandleUtils["drawCircle"](context, point, size);
				continue;
			}
			if (style != HandlesStyle.SquareHandles)
				continue;
		}

		context.fillRect(point.x - hsize, point.y - hsize, size, size);
		context.strokeRect(point.x - hsize, point.y - hsize, size, size);
	}
}; 



Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 266
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: To highlight a composite node/link/label when selected !
Reply #33 - Jul 1st, 2019 at 6:09am
Print Post  
Thank you Lyubo ! It works !
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 266
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: To highlight a composite node when selected !
Reply #34 - Jul 1st, 2019 at 6:16am
Print Post  
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


Hi,

I did this and it works. But after that, when mouse over on the NODE, the mouse pointer changes to "Move" style. May I know why?

Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 509
Joined: Jun 17th, 2010
Re: To highlight a composite node/link/label when selected !
Reply #35 - Jul 1st, 2019 at 7:25am
Print Post  
Hi,

You've probably set the nodes' handles style to EasyMove. The purpose of the adjustment handles is to allow users to interact with items. The move cursor shows, because when EasyMove is in effect, any point of the interior of a node enables moving the node, except a small area in the center that allows creating links.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 266
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: To highlight a composite node/link/label when selected !
Reply #36 - Jul 1st, 2019 at 7:37am
Print Post  
Hi,

No, I've set the handle style as Invisible like this,

node.setHandlesStyle(common.Diagramming.HandlesStyle.Invisible);

I've uploaded sample code,

https://drive.google.com/open?id=1_9cJaNeL-tezTR4IQmUFb3siWaIlEvgC

Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 509
Joined: Jun 17th, 2010
Re: To highlight a composite node/link/label when selected !
Reply #37 - Jul 1st, 2019 at 10:35am
Print Post  
Hi,

Invisible handles behave in the same way - they are not shown, but users can still interact with the nodes - hence you see the move cursor. If you want to not show the handles and preserve the interactions, you can use Custom handles and custom drawing we showed you several posts back. Just don't call the original square handles drawing code that our example showed.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 266
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: To highlight a composite node/link/label when selected !
Reply #38 - Jul 29th, 2019 at 12:21pm
Print Post  
Hi,

In some cases, I don't want to do multiple selection of nodes on mouse drag. ie don't need to show the selection rectangle which moves along with mouse pointer.

But multi selection should happen on Ctrl + Click on nodes.

Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 509
Joined: Jun 17th, 2010
Re: To highlight a composite node/link/label when selected !
Reply #39 - Jul 29th, 2019 at 1:34pm
Print Post  
Hi,

Are you using Behavior.Modify? It shows the selection rectangle on mouse down+move. You can override the createController method, check if a selection controller will be returned and return it only when you want to show the selection:
Code (Javascript)
Select All
var originalCreate = MindFusion.Diagramming.ModifyBehavior.prototype.createController;
MindFusion.Diagramming.ModifyBehavior.prototype.createController = function (state)
{
	var controller = originalCreate.apply(this, [state]);

	if (MindFusion.AbstractionLayer.isInstanceOfType(MindFusion.Diagramming.CreateSelectionController, controller))
	{
		// determine if the selection rectangle needs to be shown and return the controller
		if (makeSelectRect)
			return controller;
		else
			return null;
	}

        return controller;
}; 



Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 266
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: To highlight a composite node/link/label when selected !
Reply #40 - Jul 30th, 2021 at 6:38pm
Print Post  
Hi,

I've two components FlowDiagramComponent and TreeDiagramComponent displayed in two tabs.

In the first tab component FlowDiagramComponent, I've defined the drawSquareHandles.

When I do something on the TreeDiagramComponent (second tab) like mouse over on the text "Node # 1" or drag the child node "P1" or the whole node itself, I'm getting the below error in drawSquareHandles of first component FlowDiagramComponent .

core.js:4002 ERROR TypeError: Cannot read property 'handleStroke' of undefined
    at Object.drawSquareHandles (MindFusion.Diagramming.js:6)
    at Object.MindFusion.Diagramming.HandleUtils.drawSquareHandles (diagram.component.ts:454)
    at Object.drawAdjustmentHandles (MindFusion.Diagramming.js:6)
    at InputParametersNode.drawHandles (MindFusion.Diagramming.js:6)
    at adH.<computed>.drawForeground (MindFusion.Diagramming.js:6)
    at adH.<computed>.repaint (MindFusion.Common.js:6)
    at cQ (MindFusion.Common.js:6)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:26247)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)

May I know how to fix this?

I've uploaded the sample app to reproduce this issue:

https://drive.google.com/file/d/17q1JNEzEi2tqHA2c1PhtD1aGUomBlDyB/view?usp=shari
ng

Regards,
Kannan
  

Error_handleStroke.png ( 106 KB | 4 Downloads )
Error_handleStroke.png
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 509
Joined: Jun 17th, 2010
Re: To highlight a composite node/link/label when selected !
Reply #41 - Aug 2nd, 2021 at 6:11am
Print Post  
Hi,

The HandleUtils.drawSquareHandles method expects a third parameter, which is omitted from the declaration override.

Adding the missing parameter and passing it to the original function would look like this in your code:
Code (Javascript)
Select All
declare module "diagram-library"
{
  namespace Diagramming {
    class HandleUtils {
      static drawSquareHandles(context: CanvasRenderingContext2D, item: MindFusion.Diagramming.DiagramItem, handlesVisualStyle: any): void;

//...

 var originalDrawSquareHandles = MindFusion.Diagramming.HandleUtils.drawSquareHandles;
    MindFusion.Diagramming.HandleUtils.drawSquareHandles = function (context: any, item: any, handlesVisualStyle: any) {
      if (!MindFusion.AbstractionLayer.isInstanceOfType(MindFusion.Diagramming.ShapeNode, item)) {
        originalDrawSquareHandles.apply(this, [context, item, handlesVisualStyle]);
        return;
      }

// ... 



Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 266
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: To highlight a composite node/link/label when selected !
Reply #42 - Aug 2nd, 2021 at 10:36am
Print Post  
Hi,

This looks fine. No 'undefined handleStroke' error now. But still the event is raised in first component when ui operation happens in second component. Is there a way to avoid this?

Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 509
Joined: Jun 17th, 2010
Re: To highlight a composite node/link/label when selected !
Reply #43 - Aug 2nd, 2021 at 10:59am
Print Post  
Hi,

Which event is raised? Or do you mean the drawSquareHandles method? If you mean the latter, your override in the FlowDiagramComponent will be called in each instance, since you override the library function itself.

If you need it to execute only for your FlowDiagramComponent and not for your TreeDiagramComponent, you can check the context argument (this is the canvas element 2d context), or the item's parent - this will be the diagram instance in your case.

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 266
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: To highlight a composite node/link/label when selected !
Reply #44 - Aug 2nd, 2021 at 11:10am
Print Post  
Hi,

Yes, I mean the drawSquareHandles method. This is overridden inside the FlowDiagramComponent (ngAfterViewInit method). But this method is called when ui node changes happens in the TreeDiagramComponent. Is this method override is common for all the code in the app? Is there any way to restrict to one component? For example, in the future, if I want to do drawSquareHandles in a different way for different component.

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