Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic How to change bounding rectangle size (canvas mode)? (Read 6452 times)
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
How to change bounding rectangle size (canvas mode)?
Oct 31st, 2016 at 12:30pm
Print Post  
I created my own shape library and loaded my shapes.

When I draw my custom rectangle, the shape of it it's good, but the bounding rectangle is way too big (pic. rectBounds),
is there a possibility to decrease the size of the bounding rectangle?

PS. I tried to increasing the size of my rectangle, but the rounded sides gets messed up.
I want to have rounded rectangle like in Silverlight diagraming version (pic. roundedRectangleFromSilverLight.png).
« Last Edit: Oct 31st, 2016 at 2:11pm by CrushJelly »  

rectBounds.PNG ( 7 KB | 165 Downloads )
rectBounds.PNG
roundedRectangleFromSilverLight.PNG ( 1 KB | 152 Downloads )
roundedRectangleFromSilverLight.PNG
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to change bounding rectangle size (canvas mode)?
Reply #1 - Oct 31st, 2016 at 6:18pm
Print Post  
Coordinates of shape definitions in shape libraries are specified as percentage of node's bounding rectangle, so it seems you've set something like 45% height. To get a non-square shape for nodes created by user's drag-and-drop, set the NodeListView.DefaultNodeSize property using standard Rectangle or RoundRect shapes, or resize the nodes from NodeCreatedScript event.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: How to change bounding rectangle size (canvas mode)?
Reply #2 - Nov 2nd, 2016 at 2:03pm
Print Post  
Slavcho wrote on Oct 31st, 2016 at 6:18pm:
Coordinates of shape definitions in shape libraries are specified as percentage of node's bounding rectangle, so it seems you've set something like 45% height. To get a non-square shape for nodes created by user's drag-and-drop, set the NodeListView.DefaultNodeSize property using standard Rectangle or RoundRect shapes, or resize the nodes from NodeCreatedScript event.

Regards,
Slavcho



Can I set node size through server side, like register event?


Because, I have custom property ShapeType, I try to get it on the NodeCreatedScript event, but there is nothing, I check serialization and seems that ShapeType is added to json Dictionary, but there is no value in the end.

The ShapeType property is set on server side, but I tried setting the property in js, got same result.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to change bounding rectangle size (canvas mode)?
Reply #3 - Nov 2nd, 2016 at 3:10pm
Print Post  
Quote:
I have custom property ShapeType

Check if your JavaScriptConverter code gets called (the one you register with RegisterConverters) - it's where the custom property should be serialized to send to client side. You must also override fromJson in JavaScript to read it.

Quote:
Can I set node size through server side, like register event?

With latest build of the script, you could set Bounds on server side, and set IconSize and DefaultNodeSize values of the NodeListView to null from client side, to make it use nodes' Bounds instead. We should have updated version of the .NET assemblies that will let you do that entirely from server side later today or tomorrow.
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: How to change bounding rectangle size (canvas mode)?
Reply #4 - Nov 3rd, 2016 at 7:54am
Print Post  
Quote:
Slavcho wrote on Nov 2nd, 2016 at 3:10pm:
Quote:
Can I set node size through server side, like register event?

With latest build of the script, you could set Bounds on server side, and set IconSize and DefaultNodeSize values of the NodeListView to null from client side, to make it use nodes' Bounds instead. We should have updated version of the .NET assemblies that will let you do that entirely from server side later today or tomorrow.



I need to set the shapeNode size when dragAndDroping the ShapeNode, I tried registering server-side event but it didn't work, it only worked if I set the JS event,
so it's not available on server-side, or I am doing something wrong?

Quote:
Slavcho wrote on Nov 2nd, 2016 at 3:10pm:
Quote:
I have custom property ShapeType

Check if your JavaScriptConverter code gets called (the one you register with RegisterConverters) - it's where the custom property should be serialized to send to client side. You must also override fromJson in JavaScript to read it.



Yes converter gets called:
Quote:
I checked serialization and seems that ShapeType is added to json Dictionary, but there is no value in the end.

It gets correct object type in javascript when I use "node.getType();"

What I did wrong?, I almost all the code is copied from Mindfusion sample IconNode,
but I just set the value of the property in the .cs.

Converter Code:

Code
Select All
 public class MyShapeNodeConverter : ShapeNodeConverter
    {
        public MyShapeNodeConverter (DiagramView view) : base(view)
        {
        }

        public MyShapeNodeConverter (DiagramView view, bool addInstanceId) : base(view, addInstanceId)
        {
        }

        public override IEnumerable<Type> SupportedTypes
        {
            get
            {
                return new List<Type>(new[] { typeof(DLXShapeNode) });
            }
        }

        public override object Deserialize(IDictionary<string, object> dictionary, Type type, JavaScriptSerializer serializer)
        {
            var customNode = (MyShapeNode)base.Deserialize(dictionary, type, serializer);

            return customNode;
        }

        public override IDictionary<string, object> Serialize(object obj, JavaScriptSerializer serializer)
        {
            var shapeNode = obj as MyShapeNode;
            if (shapeNode == null)
                return null;

            var json = base.Serialize(obj, serializer);

            if (json == null)
                return null;

             json.Add("ShapeType", shapeNode.ShapeType);

            return json;
        }

    }
 



JS class:

Code
Select All
MyShapeNode = function () {
    MyShapeNode.initializeBase(this);
}

MyShapeNode.prototype =
{
    initialize: function () {
        MyShapeNode.callBaseMethod(this, 'initialize');
    },

    dispose: function () {
        MyShapeNode.callBaseMethod(this, 'dispose');
    },

    //properties
    getTitle: function() {
        return this.Title;
    },

    setTitle: function(value) {
        if (this.Title !== value)
            this.Title = value;
    },

    getEmailSubject: function () {
        return this.EmailSubject;
    },

    setEmailSubject: function (value) {
        if (this.EmailSubject !== value)
            this.EmailSubject = value;
    },

    getShapeType: function () {
        return this.ShapeType;
    },

    setShapeType: function (value) {
        if (this.ShapeType !== value)
            this.ShapeType = value;
    },

    getEmailBody: function () {
        return this.EmailBody;
    },

    setEmailBody: function (value) {
        if (this.EmailBody !== value)
            this.EmailBody = value;
    },


    getDescription: function () {
        return this.Description;
    },

    setDescription: function (value) {
        if (this.Description !== value)
            this.Description = value;
    },


    toJson: function () {

        var data = MyShapeNode.callBaseMethod(this, "toJson");

        data.Title = this.Title;
        data.EmailSubject = this.EmailSubject;
        data.EmailBody = this.EmailBody;
        data.ShapeType = this.ShapeType;
        data.Description = this.Description;


        data.nodeType = this.nodeType;
        return data;
    },

    fromJson: function (json) {

        MyShapeNode.callBaseMethod(this, "fromJson", [json]);

        this.setTitle(json.Title);
        this.setShapeType(json.ShapeType);
        this.setEmailSubject(json.EmailSubject);
        this.setEmailBody(json.EmailSubject);
        this.setDescription(json.Description);

        return json;
    },

    updateCanvasElements: function (node) {
        MyShapeNode.callBaseMethod(this, 'updateCanvasElements');
    }

};

if (typeof (Sys) !== 'undefined')
    Sys.Application.notifyScriptLoaded();
 



My testing script:

Code
Select All
function onNodeCreated(sender, args) {
            var node = args.getNode();
            alert(node.getShapeType());
        }
 


« Last Edit: Nov 3rd, 2016 at 2:44pm by CrushJelly »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to change bounding rectangle size (canvas mode)?
Reply #5 - Nov 3rd, 2016 at 12:40pm
Print Post  
Quote:
rounded sides gets messed up. I want to have rounded rectangle like in Silverlight diagraming version (pic. roundedRectangleFromSilverLight.png).


This build no longer stretches the corner arcs when you resize a round-rect shape if that's what you meant -
https://mindfusion.eu/_beta/jsdiag271.zip
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: How to change bounding rectangle size (canvas mode)?
Reply #6 - Nov 3rd, 2016 at 1:24pm
Print Post  
Slavcho wrote on Nov 3rd, 2016 at 12:40pm:
Quote:
rounded sides gets messed up. I want to have rounded rectangle like in Silverlight diagraming version (pic. roundedRectangleFromSilverLight.png).


This build no longer stretches the corner arcs when you resize a round-rect shape if that's what you meant -
https://mindfusion.eu/_beta/jsdiag271.zip



Look my:
"Re: How to change bounding rectangle size (canvas mode)?
Reply #4 - Today at 8:54am"
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to change bounding rectangle size (canvas mode)?
Reply #7 - Nov 3rd, 2016 at 7:13pm
Print Post  
Quote:
I need to set the shapeNode size when dragAndDroping the ShapeNode, I tried registering server-side event but it didn't work, it only worked if I set the JS event, so it's not available on server-side, or I am doing something wrong?


Enable AutoPostback to get DiagramView.NodeCreated server event raised in Canvas mode.

Quote:
What I did wrong?, I almost all the code is copied from Mindfusion sample IconNode, but I just set the value of the property in the .cs.


I guess you might have to return typeof(MyShapeNode) instead of DLXShapeNode from SupportedTypes implementation. Please find my test project transferring the custom property correctly -

https://mindfusion.eu/_samples/MyShapeNode.zip

That will work if you create node on server side, and examine the property of corresponding JS instance. If you draw a MyCustomNode instance on client-side, you'll get undefined message from NodeCreatedScript=onNodeCreated because it does not run your C# constructor; you'd have to initialize fields from JS constructor instead.
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: How to change bounding rectangle size (canvas mode)?
Reply #8 - Nov 4th, 2016 at 8:36am
Print Post  
Slavcho wrote on Nov 3rd, 2016 at 7:13pm:
Quote:
I need to set the shapeNode size when dragAndDroping the ShapeNode, I tried registering server-side event but it didn't work, it only worked if I set the JS event, so it's not available on server-side, or I am doing something wrong?


Enable AutoPostback to get DiagramView.NodeCreated server event raised in Canvas mode.

Quote:
What I did wrong?, I almost all the code is copied from Mindfusion sample IconNode, but I just set the value of the property in the .cs.


I guess you might have to return typeof(MyShapeNode) instead of DLXShapeNode from SupportedTypes implementation. Please find my test project transferring the custom property correctly -

https://mindfusion.eu/_samples/MyShapeNode.zip

That will work if you create node on server side, and examine the property of corresponding JS instance. If you draw a MyCustomNode instance on client-side, you'll get undefined message from NodeCreatedScript=onNodeCreated because it does not run your C# constructor; you'd have to initialize fields from JS constructor instead.



I am setting ShapeType through constructor on server side and putting all the ShapeNodes in the nodeListView.
So I need to to create constructor with parameters in shapeNodes JS class and pass the ShapeType?..., I tried it and I get some random object that has items collection and fills it with ShapesNodes, but how I get individual node?


PS. How to turn off automatic mouse drag draw?, do I need to set custom behavior and override StartDraw?
« Last Edit: Nov 4th, 2016 at 9:50am by CrushJelly »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to change bounding rectangle size (canvas mode)?
Reply #9 - Nov 4th, 2016 at 10:11am
Print Post  
Ah, the NodeListView calls a clone() method when you drag and drop, so you'll need to copy your added properties from its override. Here's how ShapeNode implements it -

Code
Select All
clone: function ()
{
    var copy = mflayer.callBaseMethod(ShapeNode, this, "clone", []);

    copy.setShape(this.shape.id);
    copy.setImageLocation(this.imageLocation);
    copy.setTransparent(this.transparent);
    copy.setImageAlign(this.imageAlign);
    copy.setRotateText(this.rotateText);
    copy.setRotateImage(this.rotateImage);
    copy.setImageContent(this.imageContent);
    copy.setEnableStyledText(this.getEnableStyledText());

    return copy;
} 



Quote:
PS. How to turn off automatic mouse drag draw?, do I need to set custom behavior and override StartDraw?


Set the Behavior property to something like DrawLinks, Pan or SelectOnly.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint