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. Image for the cookie policy date
close icon

Diagram pallet dragging offset and change detection

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

4 Replies

GA Gabriel Axel June 11, 2016 07:56 AM UTC

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.


SK Senthil Kumar M Syncfusion Team June 13, 2016 12:39 PM UTC

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 



GA Gabriel Axel June 22, 2016 05:37 AM UTC

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.


SG Shyam G Syncfusion Team June 23, 2016 12:41 PM UTC

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 


Loader.
Up arrow icon