userZooming with custom limits does break on touch devices

userZooming with custom limits does break on touch devices

Posted by: davide.vago on 19 February 2020, 6:31 am EST

• 

  davide.vago

  • Post Options:
  • Link
    Copy

  Posted 19 February 2020, 6:31 am EST

  Good morning/afternoon.

  I’ve recently opened few posts on this forum regarding the possibility to set limits on the zoom slider of the Status bar and I did implement your suggested solutions to achieve my requirement.

  However, I noticed that userZooming event doesn’t get triggered when the user use touch gestures to control the zoom of a spreadsheet instance.

  Also, I noticed that whenever the user tries to use the Status bar zoom slider clicking on - or + or even within the zooming line the touch device (iPad) does trigger the virtual keyboard.

  Looking forward to solve these issue.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 February 2020, 7:22 am EST

  Hi,
  
  We tried to zoom the spreadsheet in the attached sample using the fingers and the userZooming event gets triggered.
  
  The device used for testing is iPhone-10.
  
  Please refer to the following attached sample for reference.
  
  features_worksheet_sheet-zoom_PureJS.zip
  
  Regards,
  
  Manish Gupta

• 

  davide.vago

  • Post Options:
  • Link
    Copy

  Posted 20 February 2020, 7:41 am EST

  We are currently using the native statusBar which contains the zoom slider.
  
  Please review the above using your component: https://www.grapecity.com/spreadjs/docs/v13/online/SpreadJS~GC.Spread.Sheets.StatusBar~StatusBar.html

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 24 February 2020, 2:28 am EST

  Hi Davide,

  We are sorry but we are unable to replicate the issue using the statusBar too. We used the following sample to test the zoom behavior on an iPad(6th generation) running iOS 13.3.1:
  
  https://codesandbox.io/s/spread-js-starter-74gt0
  
  Please test with the above sample at your end and if the issue persists for you please let us know about the exact spread version you are using, and your device configration like model name/number, OS version, browser used etc so that we may test on a similar environment.

  Regards
  
  Sharad

• 

  davide.vago

  • Post Options:
  • Link
    Copy

  Posted 24 February 2020, 5:14 am EST

  The sample you sent on code sandbox doesn’t apply the min/max limit range of the slider but does use the default 25-400%, would you mind attach a limit of 75-125% and re test?

  As mentioned on the first post I was flagging the issue of touch devices not triggering the userZooming event, therefore we were not able to stick on the custom min/max limit range of the native statusBar.

  Given the previous posts this is how we implemented the limits:

  Bind the onZooming function to the GC Event:

  
  this.spreadSheet.bind(GC.Spread.Sheets.Events.UserZooming, this.onZooming)
  
  

  onZooming:

  
  onZooming(e, args) {
        const zoomLevel = this.clamp(
          args.newZoomFactor,
          this.defaults.minZoomLevel / 100,
          this.defaults.maxZoomLevel / 100,
        )
  
        if (args.newZoomFactor !== zoomLevel) {
          args.sheet.zoom(zoomLevel)
  
          Promise.resolve().then(() => {
            this.statusBar.update()
          })
        }
      },
  
  

  Set limits:

  
  setStatusBar() {
        this.statusBar.get('min').visible = true
        this.statusBar.get('max').visible = true
        this.statusBar.get('zoomSlider').min = this.defaults.minZoomLevel
        this.statusBar.get('zoomSlider').max = this.defaults.maxZoomLevel
        this.statusBar.update()
        this.statusBar.bind(this.spreadSheet)
      },
  
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 26 February 2020, 1:54 am EST

  Hi Davide,

  After adding the code to limit the zoom level, I could observe that UserZooming is getting triggered when zooming using touch gestures but the user is able to zoom beyond the specified 75-125% zoom limit, please confirm that if this is the same issue that are you facing or you are facing a different issue?
  
  In any case, we have escalated it to the dev team(SJS-3284) and will keep you posted with updates regarding the same.

  Regards

• 

  davide.vago

  • Post Options:
  • Link
    Copy

  Posted 26 February 2020, 5:16 am EST

  Yes, that’s the major breaking experience we are facing.
  
  Thanks for escalating this issue to the dev team,

  I look forward for a fix for it.
  
  Regards