Changing to Position absolute from fixed, shows unexpected behaviour

[rajanverma-me]

I have set up all corrected. But I want the div to become relatively aligned. But when I try to change class "ptro-holder" from fixed to absolute, all drawings shift to the top position. No matter where my cursor is , it always draws on top.

You can see here, https://prnt.sc/g9fr79
I have cursor at middle of canvas area, but it drew the ellipse on top of drawing portion

[ivictbor]

@Rajan4436 Hi, did you tried to pass your own holder? Something like

<div id='my-holder' style='width:700px;height:500px'></div> 

In js:

Painterro({
   id: 'my-holder' 
})

Then your #my-holder will be used instead of .ptro-holder and you will be able to change it style/position as you want.

[rajanverma-me]

Hii, I have tried but it doesn't look like a fix. Here is my structure
<div class="generator-wrapper" style="position:relative;"> <div id='my-holder' style='width:700px;height:500px;'></div> </div>

This structure aligns the canvas area according to the dom layout but doesn't allow me to draw anything.
I can see only plain area. I think canvas is still relative to the window instead of parent div no matter how much deep I nest it, because I can still draw only on top area. I m using Chrome 59 btw.

[ivictbor]

@Rajan4436 Hi.
Thanks, I noticed some issue when content appears on page before painterro, so some scroll appears on page (or in any holding components), I fixed this in 0.2.29, the fiddle is here: https://jsfiddle.net/vanbrosh/Lnvrhnt2/1/ . Maybe this was your case. If this still not well, you can try to create a fiddle which will help reproduce the issue.

[ivictbor]

seems like this change leads to some new issues when working on scrolled area, which will require more time to resolve. Currently, I restored old behavior in 0.2.30 and will publish 0.2.31 after resolving.

[rajanverma-me]

@ivictbor thanks for the resolve. Can you tell me the new issues that you are facing after fixing the scroll? I m not able to find them. Probably I would not have to encounter those issues in my scenario, so 0.2.29 will be fine for me, until the final solution. Also, I have some doubts if you can check-

I want to add an image in the drawing area, the available options are paste and import. But I want the image to be added by dragging over to it. Check here for better understanding. http://jsfiddle.net/Rajan4436/srg6F/86/
Let me know if it is possible.

[ivictbor]

@Rajan4436 There were issues when you zoom image (ctrl+mouse wheel) and start paint/select/etc, which have already been fixed in the latest version. Also, you can drag image from img tag to painterro now: https://jsfiddle.net/vanbrosh/Lnvrhnt2/2/
But due to browser security limitations you can drag only images from your domain, or data-images or images from other domains with CORS headers (like that image in an example from gstatic):

Also, toolbar currently may not look well for small-sized holders which may affect your use-case. I am not sure for best way how to hide buttons and controls where there is no space for them. On mobile screen they just scrollable by finger, maybe something can be implemented on the desktop, but without a scrollbar.

[rajanverma-me]

@ivictbor thanks a lot and yes images will be from my domain only.
Toolbar is not an issue right now. It will be a desktop app. One thing more, I want to give users more flexibility.. like an option to load painterro with preselected image on it. they don't have to drag or select every time. Like I provide an option over any image that says "EDIT THIS IMAGE" then after his click I'll load the image in painterro and he can directly edit from there. Is it possible?
Hope you get what I m saying.

[ivictbor]

@Rajan4436 You can pass url when call .show() method, e.g.

p = Painterro({
   id: 'my-holder' 
})

p.show('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRJElqPkfV5Ja9KcfL5uC-lmQgtQgrkfW10P4R1PqOhXytBDZyCw')

[rajanverma-me]

@ivictbor thanks a lot for resolve. Please update the wiki with latest changes. I am closing the issue now.