Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) Problem describing client-side JS custom object (Read 6803 times)
Gravity
Junior Member
**
Offline


I Love MindFusion!

Posts: 52
Joined: Sep 21st, 2016
Problem describing client-side JS custom object
Sep 23rd, 2016 at 4:01pm
Print Post  
Hello,

After following example which is found in sample dir\Diagraming.IconNodes. It is not really clear how to describe custom object in JS. Is there a reference to a documention on how to describe custom object on client-side?

I am getting this error:
this.setBounds(new e(o.bounds.x,o.bounds.y,o.bounds.width,o.bounds.height))

and the "o" is my custom object, which is basically clean. and yes it does not has this bounds property in it.
my js object:
Code (Javascript)
Select All
MyCustomShapeNode = function () {
    MyCustomShapeNode.initializeBase(this);
}

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

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

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

    //properties
    getLabel: function () {
        return this.label;
    },

    setLabel: function (value) {
        if (this.label !== value) {
            this.label = value;
        }
    }


};

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



have a same model in .net(well more parameters ofcorse, but just not using it)
also for testing i am using provided sample "flowchart.xml" file as a test(only replaced classes to my custom types)

I think problem arises when i am using it with custom CustomDiagramLink object (which i have not found how to describe in js)

on my web control i have set these properties:
   EnableItemsDOM="True"  // as i understant this is important for obj serialization
   Behavior="Custom"


Please gime some light on this.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Problem describing client-side JS custom object
Reply #1 - Sep 26th, 2016 at 8:38am
Print Post  
Hi,

Are you calling the registerClass method shown in aspx file? It also specifies the base type for your class, and would let you inherit the Bounds property from base.

Quote:
It is not really clear how to describe custom object in JS. Is there a reference to a documentation on how to describe custom object on client-side?


The client-side diagram control was initially based on Microsoft Ajax library and its type system. You can find more about custom MS Ajax classes and inheritance here -
https://msdn.microsoft.com/en-us/library/bb386453.aspx

We've later abstracted it away and it's now possible to substitute MS Ajax for JQuery, but for compatibility we still use similar API as MS Ajax one. In ASP.NET control we still use MS Ajax as default, and the ScriptManager tag on the sample pages is used to load it.

Quote:
EnableItemsDOM="True"


This is used only in the older ImageMap mode. In ImageMap drawing was done on server side without using any JavaScript code, but EnableItemsDOM would let you send JS model of the diagram if you need to inspect it on client side. In Canvas mode it's not necessary, as the control sends the serialized model in any case to be able to draw it with JavaScript canvas API.

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


I Love MindFusion!

Posts: 52
Joined: Sep 21st, 2016
Re: Problem describing client-side JS custom object
Reply #2 - Sep 26th, 2016 at 9:21am
Print Post  
Yes, i think i have declared that properly

Code (C++)
Select All
 diagramView.RegisterItemType(typeof(MyCustomNode), "ns:MyCustomNode", "ns:MyCustomNode", 1);
diagramView.RegisterItemType(typeof(MyCustomDiagramLink), "ns:MyCustomDiagramLink", "ns:MyCustomDiagramLink", 1);

diagramView.RegisterConverters(new JavaScriptConverter[]
{
    new MyCustomNodeConverter(diagramView),
    new MyCustomDiagramLinkonverter(diagramView)
});

diagramView.CustomNodeType = typeof(MyCustomNode);
diagramView.CustomLinkType = typeof(MyCustomDiagramLink);
 



and yes its base is MindFusion.Diagraming.ShapeNode

Ok that problem with bounds solved. Do i need to also register custom diagram link in js? Because sample "Diagramming.IconNodes" did not register that...

I am getting "Line: 784
Error: Sys.ArgumentException: Value is not the name of the type being registered or the name is a reserved word.
Parameter name: typeName"

the typeName is "MyCustomDiagramLink" : /
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Problem describing client-side JS custom object
Reply #3 - Sep 26th, 2016 at 10:09am
Print Post  
Quote:
Do i need to also register custom diagram link in js? Because sample "Diagramming.IconNodes" did not register that...


If you create a custom link class in C#, you will need equivalent one in JavaScript, so the control can preserve the type and additional fields during round-trips in Canvas mode (see the ClientSideMode property). If you don't need to add new link fields or custom drawing code, remove the C# class altogether. In the sample project it is used only in ImageMap mode, where JavaScript classes aren't necessary, unless you want to inspect fields using EnableItemsDOM you mentioned earlier. That example doesn't seem very clear to me, we should probably split it in two projects showing how to set up custom classes in ImageMap and Canvas modes separately.

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


I Love MindFusion!

Posts: 52
Joined: Sep 21st, 2016
Re: Problem describing client-side JS custom object
Reply #4 - Sep 26th, 2016 at 11:59am
Print Post  
Well defiantly for clarity reasons it would be way better, since on the first investigation of controls it is difficult to distinguish what is used for what. Right now what i got from that example, that i do not need to declare custom diagramlink object in js.


But still, is there an example how to define custom DiagramLink in javaScript when using canvas mode?
I used this "MyCustomDiagramLink.registerClass('MyCustomDiagramLink', MindFusion.Diagramming.DiagramLink);" to register and kept the same as MyCustomNode js declaration. Still getting an error: "Unable to get property 'measureString' of undefined or null reference"

that happening in this line: "this.textSize=this.parent.measureString(this.text,this.getEffectiveFont());"
well parent object is null, and a "this" object is custom diagram link
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Problem describing client-side JS custom object
Reply #5 - Sep 26th, 2016 at 2:01pm
Print Post  
Try passing a parent Diagram argument to the constructor -

Code
Select All
var MyCustomDiagramLink = function (parent)
{
	MyCustomDiagramLink.initializeBase(this, [parent]);
	... 



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


I Love MindFusion!

Posts: 52
Joined: Sep 21st, 2016
Re: Problem describing client-side JS custom object
Reply #6 - Sep 27th, 2016 at 9:00am
Print Post  
Slavcho wrote on Sep 26th, 2016 at 2:01pm:
Try passing a parent Diagram argument to the constructor -

Code
Select All
var MyCustomDiagramLink = function (parent)
{
	MyCustomDiagramLink.initializeBase(this, [parent]);
	... 



Regards,
Slavcho
Mindfusion



Thanks, that helped. But still it is unclear the part, how to...would be great if there were some documentation with an example.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Problem describing client-side JS custom object
Reply #7 - Sep 27th, 2016 at 9:18am
Print Post  
Quote:
how to describe custom object in JS


Do you mean how to add custom properties and serialize them in JSON format?
  
Back to top
 
IP Logged
 
Gravity
Junior Member
**
Offline


I Love MindFusion!

Posts: 52
Joined: Sep 21st, 2016
Re: Problem describing client-side JS custom object
Reply #8 - Sep 27th, 2016 at 11:16am
Print Post  
Slavcho wrote on Sep 27th, 2016 at 9:18am:
Quote:
how to describe custom object in JS


Do you mean how to add custom properties and serialize them in JSON format?


No no no, what you need to describe custom object in js?
How would i know that i need to add such line
".initializeBase(this, [parent]);" ???
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Problem describing client-side JS custom object
Reply #9 - Sep 27th, 2016 at 1:02pm
Print Post  
Well, that's the way to call base constructor in MS Ajax type system, which was popular enough back in the day. Now that Microsoft has abandoned it, I guess we should document the stuff ourselves indeed. We'll try to add some help topics for next release.
  
Back to top
 
IP Logged
 
Gravity
Junior Member
**
Offline


I Love MindFusion!

Posts: 52
Joined: Sep 21st, 2016
Re: Problem describing client-side JS custom object
Reply #10 - Oct 4th, 2016 at 11:42am
Print Post  
Slavcho wrote on Sep 27th, 2016 at 1:02pm:
Well, that's the way to call base constructor in MS Ajax type system, which was popular enough back in the day. Now that Microsoft has abandoned it, I guess we should document the stuff ourselves indeed. We'll try to add some help topics for next release.



Yes yes...but how one does know what constructors it has. For example I've found that "MindFusion WebForms\Client side DOM" folder in samples has some js in it, after investigating DiagramLink.js i have not found such constructor...

Anyways, what is this folder about?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Problem describing client-side JS custom object
Reply #11 - Oct 4th, 2016 at 1:38pm
Print Post  
You could check function arguments in Canvas Library Reference part of the help file. Scripts from "Client side DOM" folder are loaded only in ImageMap mode when the EnableItemsDOM property is enabled.

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