[DrawingCanvas] Scroll issue and drawing breaks in IOS
drawingcanvas
Reactive icon
Forge component by Sadanobu Kodan
Application Type
Reactive

I have found an issue that seems to be a common issue with fabric.Js and IOS compatibility in general, the work around/fixes I have found on google searches i am finding difficult to implement in Outsystems. 

The problem is caused if the DrawingCanvas can be toggled in and out of view ie in our application we have a gallery of images and a button the user can press which opens the DrawingCanvas to allow annotation upon the images. Once the user has finished we recover the binary from the canvas, save it and close the drawing canvas. If the user should open the DrawingCanvas again the first tool selected becomes locked/stays highlighted after the first interaction and the screen scroll becomes locked. It is possible to still exit the Canvas and the new annotation is there but the scroll of the screen is still locked up until the time the app is closed. 

I have identified the screen lock is being caused by a setting in fabric.Js line #3875 if the code has been prettified-

allowTouchScrolling: !1,

changing this to true allows the screen to scroll but breaks the drawingCanvas. I would be looking for a solution based around toggling this setting to true in the onDestroy of the drawingCanvas but have yet to work out how to implement it.

As for the issue with the first drawing tool getting locked on the second rendering of the drawingCanvas I am still lost for any idea how this is happening.


Any help with this issue will be hugely appreciated.

DrawingCanvasIOSbug.oml

Solution

@Sadanobu Kodan  Thank you for your responses, 

I uninstalled the DrawingCanvas and reinstalled and the problems have now gone. Could you please tell me how I should be handling image scaling when defining a backgroundImageUrl in the input parameters


Regards


Rob Marshall

Hi,

I am trying to reproduce this issue.

First, is this happening in Safari on IOS?

Also, what are the steps to reproduce, e.g.

1. open https://domain/DrawingCanvas/DrawingDetail

2. edit the canvas

3. save and go to https://kodan.outsystemscloud.com/DrawingCanvas/Drawings

4. open https://domain/DrawingCanvas/DrawingDetail again


Can I reproduce this procedure?

I have not been able to reproduce the issue using safari. 

I am using iphone iOS 15.4.1.



Hi @Sadanobu Kodan


Thank you for your quick response. I am experiencing the issue only when installed as an application on the device. It seems running it via a browser everything works as it should. We need to use this within our application with offline capabilities if possible.


I have just also downloaded the app to an android device and all works as expected there, this has isolated the bug to IOS applications only as per the fabric.js issue documented here.

https://github.com/fabricjs/fabric.js/issues/3756

Please see the video below. You will notice that upon the first opening of the canvas when a line is drawn on the touchEnd the tool selected defaults back to the pointer. This seems to be the default and allows a new tool to be selected. On the second opening of the canvas on touchEnd does not default the tool back to the pointer, if any other tool is selected it is not recognized up until the point the user selects the pointer manually and only then is another tool allowed to be selected.

RPReplay_Final1652365694.MOV

In this video I have placed two alerts in the touchEnd function of the arrow tool. As we can see after the second render of the canvas the second alert does not get hit, this seems to be the part of the function which fires the pointer tool default selection.

canvasWithAlerts.mov

I have generated an iOS app from the attached module and checked it, but could not get it to reproduce. 

Do I need anything else?

DrawingCanvasBug.oml

Here is the video.

RPReplay-Final1652371234.MP4

Solution

@Sadanobu Kodan  Thank you for your responses, 

I uninstalled the DrawingCanvas and reinstalled and the problems have now gone. Could you please tell me how I should be handling image scaling when defining a backgroundImageUrl in the input parameters


Regards


Rob Marshall

I'm glad the issue was solved.

May I ask you to post a new question in a new post?

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.