We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Diagram pallet dragging offset and change detection

Thread ID:

Created:

Updated:

Platform:

Replies:

124459 Jun 11,2016 03:09 AM Jun 23,2016 08:41 AM JavaScript 4
loading
Tags: ejDiagram
Gabriel Axel
Asked On June 11, 2016 03:09 AM

Hello,

I have two question about the diagram component.

In this example http://js.syncfusion.com/demos/web/#!/azure/diagram/gettingstarted/symbolpalette when starting to drag a shape from the pallet, it has an offset to the top left. Is it possible to configure that the dragged shape will first appear closer to the shape preview in the pallet?

I am trying to detect changes to a user-editable diagram. I see there are events for detecting specific changes, but it would be helpful to have a single "diagram changed" event that would fire whenever any node or connection is added, removed, moved or any of its properties are changed. Is there such an event that I missed?

Thanks,

Gabi

Gabriel Axel
Replied On June 11, 2016 03:56 AM

Another question: is it possible to convert the diagram's JSON to SVG or image without rendering the diagram component? This is useful when the conversion needs to happen in non-browser environment where we don't have a DOM, or even if we have a DOM but don't really need the diagram component and just want to export a previously saved JSON.

Senthil Kumar M [Syncfusion]
Replied On June 13, 2016 08:39 AM

Hi Gabriel, 
 
Thanks for Contacting Syncfusion support. 

Is it possible to configure that the dragged shape will first appear closer to the shape preview in the pallet? 
Please use SymbolPalette’s “previewOffset” property to achieve your requirement. Please refer to the below code example. 
 
$("#symbolpalette").ejSymbolPalette({ 
      palettes: palettes, height: "500px", width:"300px", previewOffset: { x: 50, y: 50 } 
}); 
 
Here is the playground link for your reference, 
 
I am trying to detect changes to a user-editable diagram. I see there are events for detecting specific changes, but it would be helpful to have a single "diagram changed" event that would fire whenever any node or connection is added, removed, moved or any of its properties are changed. Is there such an event that I missed? 
To achieve your requirement, define propertyChange event to the diagram. This event will satisfy most of the situation when interacting with diagram or else you can use the same method for all events and you can do your own logics in the method based on the event type. Please refer to the below code example. 
 
$("#diagram").ejDiagram({ 
   width: "100%", 
   height: "600px", 
   propertyChange: eventChange, 
   selectionChange: eventChange 
}); 
 
function eventChange(args) { 
  if (args.type === "selectionChange") { 
      //do your own logics here 
     console.log(args.type); 
  } 
  if (args.type === "propertyChange") { 
      //do your own logics here 
       console.log(args.type); 
   } 
} 
 
If the provided solution does not meet your needs, then share more details about your requirement to analyze further.  
Another question: is it possible to convert the diagram's JSON to SVG or image without rendering the diagram component? This is useful when the conversion needs to happen in non-browser environment where we don't have a DOM, or even if we have a DOM but don't really need the diagram component and just want to export a previously saved JSON. 
We couldn’t convert the diagram into SVG or image format without rendering the diagram control. However, we can achieve your requirement by using phantomjs which is used to convert the specified region to image format by specifying the URL link and region. Could you please confirm that phantomjs will satisfy your requirement? if so, we will provide a sample using phantomjs with console application. 
 

Regards, 
Senthilkumar M 


Gabriel Axel
Replied On June 22, 2016 01:37 AM

Thanks for the explanations.

The previewOffset property and propertyChange event satisfy my requirements.

I suppose using a headless browser could work, but for now I'm using a sandboxed environment on the server where I can't run external processes. For now I can use the same diagram control on the client that I use to generate the JSON. Having the option to generate SVG directly from the JSON could be a nice performance enhancement since it could save dealing with the DOM (whether on the client or the server) which is relatively expensive compared to other JS operations, but for now it's not something that is really noticeable in my case. I wold tag such feature as "nice to have" for now, not a blocker.

Shyam G [Syncfusion]
Replied On June 23, 2016 08:41 AM

Hi Gabriel, 

We have an option to export the diagram into the image format(png,jpeg..) and the exporting is based on the canvas. Also we can perform exporting only after the diagram is rendered. So currently it is not possible to export without rendering diagram in a browser. As mentioned, you can use phantomjs which is used to convert the specified region to image format by specifying the URL link and region. 

Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;