Source Code in the Demos

[Juan Acosta]

Hi,

I was looking some of the demos available. I found that the diagram builder has some functionality for a control I need to do.
http://mvc.syncfusion.com/demos/web/DiagramBuilder/Home/Index
I want to know what is the copyright status of this code, can use parts of it or it is private for Syncfusion.

Please let me know, otherwise, I will check for other free samples open source.

Kind regards,

Juan Acosta

[Juan Acosta]

As a matter of fact, I think the code there is a lot more that I really need.
Could you please tell me a tutorial, with some simple SVG canvas and dragging some specific items.
By the way, I think it is a quite nice implementation.

Kind regards,

Juan

[Juan Acosta]

I need some control that allows me to render an image and overlay other objects. I'm not quite sure if Syncfusion has something like that. I have attached some example images of what I'm trying to achieve.

Maybe you can give some direction.

Kind regards,

Juan

Attachment: example_2a6f87a.zip

[Shyam G]

Hi Juan, 

 

Query	Response
I was looking some of the demos available. I found that the diagram builder has some functionality for a control I need to do.  http://mvc.syncfusion.com/demos/web/DiagramBuilder/Home/Index I want to know what is the copyright status of this code, can use parts of it or it is private for Syncfusion.  Please let me know, otherwise, I will check for other free samples open source.	The MVC diagram builder is a part of Syncfusion. You can get the MVC diagram builder sample from the dashboard. Please refer to the below KB link in which we have shown how to get the samples from the dashboard.    KB link:https://www.syncfusion.com/kb/6328/how-to-get-the-diagram-builder-sample-code-from-the-dashboard    We have created a diagram builder sample and it is available in the below link for download.    Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/Diagrambuilder1919006096
As a matter of fact, I think the code there is a lot more that I really need. Could you please tell me a tutorial, with some simple SVG canvas and dragging some specific items.  By the way, I think it is a quite nice implementation.	We have created a simple in which we have rendered the symbol palette with some shapes and rendered the diagram.    Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/palettesample2009610329
I need some control that allows me to render an image and overlay other objects. I'm not quite sure if Syncfusion has something like that. I have attached some example images of what I'm trying to achieve.	Could you please confirm us whether you need to set the background image for the diagram and overlay other objects in it. If yes, we have created a sample and provided in the above row. If we misunderstood your requirement, please provide us more details such as video or screenshot.

 

 

Regards, 

Shyam G 

[Juan Acosta]

Hi Shyam,

I was looking the palette demo and It is the perfect star for what I need to create. I will add the zooming functionality from the diagram demo and modified the code.

Thank you so much for your help.  One additional question, the code in App_Data (MindMap.json, OrgChart.json). It is extra code no? I think it is not in use in the demo.

Kind regards,

Juan

[Shyam G]

Hi Juan, 

Sorry for the inconvenience 

Query: One additional question, the code in App_Data (MindMap.json, OrgChart.json). It is extra code no? I think it is not in use in the demo.  

 

Yes, we have not used that code(App_Data (MindMap.json, OrgChart.json)) in the demo/sample. We will avoid these mistakes in future. 

 

Regards, 

Shyam G 

[Juan Acosta]

Hi Shyam,

I was trying to redownload and run this solution Diagrambuilder1919006096.  However, I run into this issues:

1. Error not Syncfusion.JavaScript installed

 Added Install-Package Syncfusion.JavaScript

in the nuget packages and reinstall all option.

2. Error Cannot find module 'angular2/core'

Severity    Code    Description    Project    File    Line    Suppression State
Error    TS2307    Cannot find module 'angular2/core'.    SyncfusionMvcApplication2    D:\CodeBitbucket\SyncFusion Test Code\Diagrambuilder1919006096\SyncfusionMvcApplication2\Scripts\ej\common\ej.angular2.d.ts    2    Active

I was trying to solve it, however, the solution does not have tsconfig.json file.

Could you please help me. How can I solve and run this solution?

Kind regards,

Juan

[Shyam G]

Hi Juan, 

We have not included angular 2 related files in the sample which provided earlier to you in this incident and we are unable to reproduce the reported issue at our end. Please provide us more details such as use case in which you are facing the issue and how you have included the ej.angular2.d.ts file. 

Regards, 

Shyam G 

[Juan Acosta]

Hi Shyam,

Well I found the issue following this steps:
1. Download the code for the diagram builder.
2. Extract the code and open the solution with VS2015.
3. Rebuild solution.
4. Error with JavaScript.Syncfusion library not found.
5. Added library with

Install-Package Syncfusion.JavaScript
6. Then the project will be reload and asked you to use typescript, because it is the recommend option.
7. Click yes and then rebuild. Issue with the Agngular library. 

The strange thing is I updated my version of syncfusion to use the 

Essential Studio for ASP.NET MVC version v14.4.0.15

As soon as I installed, I tried to test again and the solution works perfectly. No javascript.syncfusion error.

That thing is worked now.

Anyway, I have other questions for you about the demo.

The demo has the ability to save files.

Where are those files saved in the system?

What is the standard filetype that used to save those files?

How is the menuControl used to save the files? The builder controller does not have any code. 

You kindly provided another code for the palette Sample that works fine and it has less code. It is possible to add the Menu control to that demo and it is possible to modify the method save to store in some specific path and filetype?

Could you please provide more information about the use of the menucontrols. 

Thanks for your help.

Kind regards,
Juan

[Shyam G]

Hi Juan, 

Query	Response
Anyway, I have other questions for you about the demo.   The demo has the ability to save files.  Where are those files saved in the system? What is the standard filetype that used to save those files?	In our diagram builder sample, we have saved the diagram as JSON string in browser’s local storage. Please refer to the screenshot below in which we have shown the saved diagram in browser’s local storage.  Screenshot:
How is the menuControl used to save the files? The builder controller does not have any code.    You kindly provided another code for the palette Sample that works fine and it has less code. It is possible to add the Menu control to that demo and it is possible to modify the method save to store in some specific path and filetype?	We have modified your sample in which we have added the menu control in it. The save options in the menu saves the diagram in local storage.  Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/Juansample406670626
Could you please provide more information about the use of the menucontrols.	You can easily configured with menu control into your project. Please refer the getting started documentation for Menu control : https://help.syncfusion.com/aspnetmvc/menu/overview  . The mentioned link also having a details with use case sample preparation guideline.       Menu samples link: http://mvc.syncfusion.com/demos/web/menu/default

  

Regards, 

Shyam G 

[Juan Acosta]

Hi Shyam,

I was looking the complete demo that you sent to me before.



I modified the code to achieve what I need.

However, I found some issues that I think are not correct.

1. I want to have an image in the background and paint objects over it.  The image is this.



As you can see the image in landscape. 

I modified the code to add the image in the background and modified the height and width accordingly.



However, when I rendered the image is compacted and it does not look as proper landscape.


Not correct the image should be long.

[Juan Acosta]

Continue with the last email.
If I hit zoom out or fit to page. The image is rendered as it was an square image. So, the control is changing the ratio of the image.







2. I modified the main frame to have width 800 and it appears as 1600. There is any other part that have that settings added?



3. I need to have the preview window.


But I cannot have if I don't let this error in js.


Can you tell me how to solve this.

[Juan Acosta]

 Finally,

I have to send the message in three parts. The page crash on me twice. I don't know why.

Anyway, I have attached the code.

Kind regards,

Juan

Attachment: syncfusioncompletepalette_Copy_39937795.7z

[Shyam G]

Hi Juan,

 

Query	Response
I want to have an image in the background and paint objects over it.  The image is this.  As you can see the image in landscape.   I modified the code to add the image in the background and modified the height and width accordingly. However, when I rendered the image is compacted and it does not look as proper landscape.	·         By default, the background image is drawn based on the pageSettings pageWidth and pageHeight property. ·         In your sample, you have set an pageSettings multiplePage property as true. So only the background image expanded in height. ·         Please set multiplePage as false to resolve your reported issue.           Code example:       _model.PageSettings.MultiplePage = false;
If I hit zoom out or fit to page. The image is rendered as it was an square image. So, the control is changing the ratio of the image.	·         By default, when we zoom the diagram, the diagram content and background image gets scaled based on the pageSize/diagram Size. ·         Please confirm us whether you need to restrict the scaling of background image while zooming the diagram? if we misunderstood your requirement, please provide us more details such as elaborate your requirement in detail.
I modified the main frame to have width 800 and it appears as 1600. There is any other part that have that settings added?	From your screenshot, the width 800 is an pageSettings pageWidth value and the width 1600 is an diagram model width value.  Please refer to the below code example and help documentation.   Code example: _model.Width = "600px"; _model.Height = "700px";   Help documentation:https://help.syncfusion.com/api/js/ejdiagram#members:width
I need to have the preview window. But I cannot have if I don't let this error in js. Can you tell me how to solve this.	The reported issue occurs due to an ID backgroundIcon is not present in your application. We have removed that line in your application. Also we have removed the unnecessary code from the control_DocumentPreview.js file and provided the sample below.

 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/syncfusioncompletepalettemodified871220771

 

Regards,

Shyam G

[Juan Acosta]

Hi Shyam,

Thanks for your help. I was checking you changes and I modified the code to fit more like this.




Now, I think is showing in the right ratio with the image in the background. However, I want to fix the canvas to stop growing. For instance, in this case if I move the objects the canvas will grow vertical or horizontal, accordingly.




I want the canvas size to be fix and does not allow to grow. So, the user have to modify or fix the components to fit into the canvas not the canvas fixing itself to fix the components.

There is any property to achieve this.

Kind regards,

Juan

[Shyam G]

Hi Juan,

 

Please use model’s width and height property to set the diagram size(canvas size). Also if you need a diagram object to be moved within the diagram alone, please set pageSettings scrollLimit as Diagram to achieve your requirement. Please refer to the code example and help documentation below.

 

Code example:

//set the diagram size

            _model.Width = "600px";

            _model.Height = "700px";

 

  //set a scrollLimit

            _model.PageSettings.ScrollLimit = ScrollLimit.Diagram;

 

Help documentation:

https://help.syncfusion.com/cr/aspnetmvc/Syncfusion.JavaScript.DataVisualization.DiagramEnums.ScrollLimit.html

https://help.syncfusion.com/cr/aspnetmvc/Syncfusion.JavaScript.DataVisualization.DiagramPropertiesBuilder.html#Syncfusion_JavaScript_DataVisualization_DiagramPropertiesBuilder_Width_System_String_

https://help.syncfusion.com/cr/aspnetmvc/Syncfusion.JavaScript.DataVisualization.DiagramPropertiesBuilder.html#Syncfusion_JavaScript_DataVisualization_DiagramPropertiesBuilder_Height_System_String_

 

 

Regards,

Shyam G