How to provide a PowerPoint-like canvas where user can drag shapes "outside" of formal canvas

[Jim Jacobs]

Hi,

Here's what we'd like to do.
Provide a "fixed" region on the canvas in which the user can drag shapes that will be exported/printed.
Provide a "gray" region outside of the fixed section in which the user can drag shapes that ARE NOT exported/printed.
This is similar to how PowerPoint works (see attached screenshot).

I'm looking for any technique that would allow a visual cue where the fixed region ends and the gray regions starts.
I would also appreciate any suggestions on how to export/save/print just what's in the fixed region.

Thanks for any advice.

Jim

Attachment: PowerPoint_Canvas_Example_580814a2.zip

[Shyam G]

Hi Jim, 

 

• We have created a sample in which we have rendered some nodes within the page boundary(gray color) and some nodes outside of the page boundary. When you export the diagram, the nodes within the page boundary(gray color) alone will be exported.
• In our diagram pageSettings pageWidth and pageHeight draws from 0,0 to user defined position. Could you please confirm us whether an fixed region should start from middle of the diagram to specified region as shown in your screenshot and remaining area should be gray? Also please confirm us when you drag a node in the fixed region and once it ends that region, the visual cue should appear and then the nodes should start dragging in the gray region. If yes, we will validate and provide a better solution.

 

Here is the playground link 

 

JSPlayground link: http://jsplayground.syncfusion.com/q15x5w52 

 

Regards, 

Shyam G 

[Jim Jacobs]

Hi Shyam,

Thanks for the playground mockup - it was very helpful.
Regarding your second bulleted item:
 - Yes, we would like the fixed region to be centered (middle)
 - Yes, the fixed region should have a white background and the surrounding area be gray
 - Yes, once a shape is dragged beyond the fixed region, it should start dragging in the gray (surrounding) area

I look forward to seeing a similar playground link with these changes.

Thanks for all your efforts during 2017 :)

Jim

[Kameshwaran R]

Hi Jim, 

We have achieved the following requirement. 

1. Fixed region positioned at middle.
2. Fixed region with while and other region as gray in color.
3. Once a shape is dragged beyond the fixed region, it should start dragging in the gray (surrounding) area with visual cue.

 

Here is the playground link  

  

JSPlayground link:  http://jsplayground.syncfusion.com/wnopl3vg. 

 

You can achieve the required behavior using page settings. Please refer the below help link. 

 

https://help.syncfusion.com/js/diagram/page-settings  

                 

Regards, 

Kameshwaran R.