Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic personalised Diagramming Behaviours (Read 1606 times)
Liam
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 3
Joined: Jan 21st, 2022
personalised Diagramming Behaviours
Feb 2nd, 2022 at 4:05pm
Print Post  
I am in the process of updating our Mindfusion library to the NPM version.

I am looking for some help with setting the diagramming behaviour to a custom set for our program.

I have found
diagram.setBehavior(MindFusion.Diagramming.Behavior.Custom);
and
Diagram.registerClass

whilst searching the internet, but am not sure how I would go about using these to customise the Behaviours of the Diagram.

thanks
Liam

  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: personalised Diagramming Behaviours
Reply #1 - Feb 3rd, 2022 at 8:13am
Print Post  
Custom behavior classes are used mostly in our libraries for strongly-typed languages to add support for drawing custom node types interactively. If that's what you are after with the JavaScript diagram, you shouldn't need a behavior class there, but instead set the customNodeType property as shown in the tutorial-3 example.

You might need a custom behavior class if you want to create different types of objects depending on mouse position. If that's the case, use the LinkNodesBehavior.js from diagram's code as a template and assign your instance to DiagramView.currentBehavior.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Liam
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 3
Joined: Jan 21st, 2022
Re: personalised Diagramming Behaviours
Reply #2 - Feb 3rd, 2022 at 11:22am
Print Post  
we used to compile a customized class, we made from LinkNodesBehavior.js, into the library.

How would we go about using that in the NPM version?

thanks,
Liam
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: personalised Diagramming Behaviours
Reply #3 - Feb 4th, 2022 at 8:45am
Print Post  
You should still be able to replace createController function in prototype of standard class with your old code, or better use inheritance, e.g. this shows drawing different types of nodes depending on mouse button -

Code
Select All
import * as Diagramming from '@mindfusion/diagramming';
import * as Drawing from '@mindfusion/drawing';

class CustomBehavior extends Diagramming.ModifyBehavior {

	createController(state) {

		var diagram = this.diagram;
		if (state.buttonDown)
		{
			var w = diagram.alignToGrid ? diagram.gridSizeX : 1;
			var h = diagram.alignToGrid ? diagram.gridSizeY : 1;

			var node = this.createNode(state.buttonDown, diagram);
			var alignedPoint = diagram.alignResize(
				node, state.pointerPosition, Diagramming.AdjustmentHandles.ResizeTopLeft);
			node.bounds = new Drawing.Rect(alignedPoint.x, alignedPoint.y, w, h);

			var controller = new Diagramming.CreateNodeController(diagram, node);
			return controller;
		}
		return super.createController(state);
	}

	createNode(state, diagram)
	{
		return (state == 1) ? new Diagramming.TableNode(diagram) : new Diagramming.TreeViewNode(diagram);
	}
}

var diagramView = Diagramming.DiagramView.create(document.getElementById("diagram"));
diagramView.currentBehavior = new CustomBehavior(diagramView);

 



Regards,
Slavcho
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: personalised Diagramming Behaviours
Reply #4 - Feb 4th, 2022 at 9:11am
Print Post  
We've also tried it from TypeScript -

Code
Select All
import * as Diagramming from '@mindfusion/diagramming';
import * as Drawing from '@mindfusion/drawing';

class CustomBehavior extends Diagramming.LinkNodesBehavior {

    createController(state) {

        var diagram = this.diagram;
        if (state.buttonDown) {
            var w = diagram.alignToGrid ? diagram.gridSizeX : 1;
            var h = diagram.alignToGrid ? diagram.gridSizeY : 1;

            var node = this.createCustomNode(state.buttonDown, diagram);
            var alignedPoint = diagram.alignResize(
                node, state.pointerPosition, Diagramming.AdjustmentHandles.ResizeTopLeft);
            node.bounds = new Drawing.Rect(alignedPoint.x, alignedPoint.y, w, h);

            var controller = new Diagramming.CreateNodeController(diagram, node);
            return controller;
        }
        return super.createController(state);
    }

    createCustomNode(state, diagram) {
        return (state == 1) ? new Diagramming.TableNode(diagram) : new Diagramming.TreeViewNode(diagram);
    }
}

var diagramView = Diagramming.DiagramView.create(<HTMLCanvasElement>document.getElementById("diagram"));
diagramView.currentBehavior = new CustomBehavior(diagramView, (diagramView) => { return new Diagramming.ShapeNode(diagramView.diagram); }, null); 



Regards,
Slavcho
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint