Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Style custom DiagramLink not working (canvas mode) (Read 6137 times)
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Style custom DiagramLink not working (canvas mode)
Oct 25th, 2016 at 1:18pm
Print Post  
I registered my custom shape node and diagraming link.

I have registered controls :

Code
Select All
diagramViewControl.RegisterItemType(typeof(CustShapeNode), "local:CustShapeNode", "local:CustShapeNode", 1);
diagramViewControl.RegisterItemType(typeof(CustDiagramLink), "local:CustDiagramLink", "local:CustDiagramLink", 1);

            diagramViewControl.RegisterConverters(new JavaScriptConverter[]
            {
                new CustShapeNodeConverter(diagramViewControl),
                new CustDiagramLinkConverter(diagramViewControl)
            });

            diagramViewControl.CustomNodeType = typeof(CustShapeNode);
            diagramViewControl.CustomLinkType = typeof(CustDiagramLink);
 



Custom ShapeNode is working fine, but I cant draw my custom with my custom link style.
I've created CustDiagramingLink.js and .cs version too.

I set all the styles in the diagraming link .cs class, but it has no effect.
So maybe it's not even using my custom link.

What is the problem, maybe I need to set style separately?

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


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Style custom DiagramLink not working (canvas mode)
Reply #1 - Oct 26th, 2016 at 8:27am
Print Post  
If you are creating the links on server side, make sure the JavaScript constructor takes (diagram,origin,destination) arguments and passes them to base constructor as in http://mindfusion.eu/Forum/YaBB.pl?num=1475674482&3#3 or otherwise they won't deserialize correctly from JSON.

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


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: Style custom DiagramLink not working (canvas mode)
Reply #2 - Oct 28th, 2016 at 8:28am
Print Post  
Slavcho wrote on Oct 26th, 2016 at 8:27am:
If you are creating the links on server side, make sure the JavaScript constructor takes (diagram,origin,destination) arguments and passes them to base constructor as in http://mindfusion.eu/Forum/YaBB.pl?num=1475674482&3#3 or otherwise they won't deserialize correctly from JSON.

Regards,
Slavcho
Mindfusion


Constructor seems to be correct, but it's still drawing standart DiagramingLink, maybe I need to set something

My class js file:

Code
Select All
CustomDiagramLink = function (parent, origin, destination) {
    CustomDiagramLink .initializeBase(this, [parent, origin, destination]);
}

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

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

    toJson: function () {
        var data = CustomDiagramLink.callBaseMethod(this, "toJson");
        return data;
    }
};

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



My .cs Link class:

Code
Select All
    public class CustomDiagramLink : DiagramLink
    {
        private string _sqlCondition;
        public string SQLCondition
        {
            get
            {
                return _sqlCondition;
            }
            set
            {
                _sqlCondition = value;
            }
        }

        private string _bindableText;
        public string BindableText
        {
            get
            {
                return _bindableText;
            }
            set
            {
                Text = _bindableText = value;
            }
        }

        public CustomDiagramLink(Diagram parent) : base(parent)
        {
            Init();
        }

        public CustomDiagramLink(Diagram parent, DiagramNode origin, Point point)
            : base(parent, origin, point)
        {
            Init();
        }

        public CustomDiagramLink(Diagram parent, DiagramNode origin, DiagramNode destination)
            : base(parent, origin, destination)
        {
            Init();
        }

        private void Init()
        {
            SetStyle();
        }

        private void SetStyle()
        {
            MindFusion.Drawing.Brush defaultBrush = new MindFusion.Drawing.SolidBrush(Color.Black);

            Brush = defaultBrush; //arrow head background
            Pen = new MindFusion.Drawing.Pen(Color.Pink, 5); //arrow line
            BaseShape = Shapes.Alternative;
            HeadShape = Shapes.Alternative;
            HeadPen.Brush = defaultBrush; //arrow head border
            TextBrush = defaultBrush;
        }

        protected override void SaveToXml(XmlElement xmlElement, XmlPersistContext context)
        {
            base.SaveToXml(xmlElement, context);

            context.WriteString(SQLCondition, "SQLCondition", xmlElement);
            context.WriteObjectCollection(Actions, "Actions", xmlElement);
        }

        protected override void LoadFromXml(XmlElement xmlElement, XmlPersistContext context)
        {
            base.LoadFromXml(xmlElement, context);
            SQLCondition = context.ReadString("SQLCondition", xmlElement);

            Actions = context.ReadObjectCollection("Actions", xmlElement);

            SetStyle();
        }
    }
 


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


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Style custom DiagramLink not working (canvas mode)
Reply #3 - Oct 28th, 2016 at 10:54am
Print Post  
Our bad - interactive drawing with DiagramView.CustomLinkType was never implemented in Canvas mode. We'll fix that for upcoming release; for now you can implement it like this -

Code
Select All
MindFusion.Diagramming.BehaviorBase.prototype.createLink = function (origin, point)
{
	var link = new CustomDiagramLink(this.diagram, origin, point);
	link.originConnection.chooseBestAnchorPoint(point);
	return link;
}; 



https://mindfusion.eu/_samples/IconNodes.AspNet.zip

You must also change the registration code to have its third argument match the JavaScript class name, instead of adding a 'local:' prefix. The second argument is used as class identifier when saving to XML, and we usually add prefixes to these.

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


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: Style custom DiagramLink not working (canvas mode)
Reply #4 - Oct 28th, 2016 at 12:50pm
Print Post  
Slavcho wrote on Oct 28th, 2016 at 10:54am:
Our bad - interactive drawing with DiagramView.CustomLinkType was never implemented in Canvas mode. We'll fix that for upcoming release; for now you can implement it like this -

Code
Select All
MindFusion.Diagramming.BehaviorBase.prototype.createLink = function (origin, point)
{
	var link = new CustomDiagramLink(this.diagram, origin, point);
	link.originConnection.chooseBestAnchorPoint(point);
	return link;
}; 



https://mindfusion.eu/_samples/IconNodes.AspNet.zip

You must also change the registration code to have its third argument match the JavaScript class name, instead of adding a 'local:' prefix. The second argument is used as class identifier when saving to XML, and we usually add prefixes to these.

Regards,
Slavcho
Mindfusion



When the new version would be released?

So I tried sample, as I understand  the .cs class doesn't play any role, it's all in the javascript?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Style custom DiagramLink not working (canvas mode)
Reply #5 - Oct 29th, 2016 at 6:58am
Print Post  
Hi,

Quote:
When the new version would be released?


In a few days.

Quote:
So I tried sample, as I understand  the .cs class doesn't play any role, it's all in the javascript?


As it stands, the C# class plays a role only if you wish to create or examine your diagram model server side, and you want to add your own properties to links. If you need to add just a couple of pieces of data, you could as well use standard DiagramLinks and assign to their Tag and Id properties. You would do more in custom link C# class if you need to implement your own drawing, and need it to show in ImageMap mode or in exported image, PDF or SVG files - their rendering code runs in .NET on the server.

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


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: Style custom DiagramLink not working (canvas mode)
Reply #6 - Nov 14th, 2016 at 10:15am
Print Post  
Slavcho wrote on Oct 29th, 2016 at 6:58am:
Hi,

Quote:
When the new version would be released?


In a few days.

Quote:
So I tried sample, as I understand the .cs class doesn't play any role, it's all in the javascript?


As it stands, the C# class plays a role only if you wish to create or examine your diagram model server side, and you want to add your own properties to links. If you need to add just a couple of pieces of data, you could as well use standard DiagramLinks and assign to their Tag and Id properties. You would do more in custom link C# class if you need to implement your own drawing, and need it to show in ImageMap mode or in exported image, PDF or SVG files - their rendering code runs in .NET on the server.

Regards,
Slavcho


The beta has been released, so what's the situation with CustomLinkType?, can I create it through server side, with my custom class?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Style custom DiagramLink not working (canvas mode)
Reply #7 - Nov 14th, 2016 at 10:32am
Print Post  
The beta announcement lists a "DiagramView.CustomLinkType property now supported in Canvas mode" item so it's supposed to work now.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint