Safari Mobile iOS 6 = partial view, no scrolling possible

[juliendorra]

If you start a drawing on a desktop browser and then try to access it on an iPhone 5 with Safari Mobile, you can only view/draw on the top-left corner of the space.

There is no way to use double-touch to scroll or pinch-in / pinch-out. You are stuck seeing only a portion of the drawing space.

[tranek]

This is a problem with desktop browsers too (and the etherpad draw plugin). If someone has a higher resolution, they have access to more canvas space and can draw in parts where people with lower resolutions cannot see.

I don't know of a good solution for this. Maybe allow scrolling? Only allow scrolling for the farthest position drawn to? If someone new comes along with a higher resolution, does it have to change the scrolling bounds for everyone else?

Maybe zooming in/out is the way to go.

[JohnMcLear]

See how we solved this on PrimaryWall http://primarywall.com

There is no golden bullet for this problem, canvas sizes change, one might consider a drawing creator being given the option to set a canvas size, one might prefer unlimited..

[tranek]

These guys did it an interesting way. Just scroll/zoom to see more and everything is on a giant grid. http://thread.meteor.com/

[JohnMcLear]

The way they did it has major flaws a) you can't see if other content is visible b) you can't use scroll wheel without control to zoom c) you don't have any buttons / controls to zoom

another option might be to have an overview of the entire drawing in teh bottom right corne ror so, this would be thumbnail representation of the entire drawing.

[theoryshaw]

IMHO, should be...

• scroll wheel should only zoom in/out. (io-pinch)
• hold scroll wheel down and drag to pan (io-two finger drag)
• current zoom/pan location is synced across all concurrent users. (perhaps a preference, to turn this off)

The first two, are common UI patterns for CAD programs.

[JohnMcLear]

http://www.jacklmoore.com/wheelzoom/ https://github.com/timmywil/jquery.panzoom <-- looks like it might be a quick win

[JohnMcLear]

http://matthiasberth.com/articles/stable-zoom-and-pan-in-paperjs/

[JohnMcLear]

https://github.com/timmywil/jquery.panzoom/issues/129

I don't have a Safari device to test on btw.

[JohnMcLear]

An update on this.

1) When you zoom out it changes x/y co-ords of drawings making it no longer inline 2) I disabled middle mouse so this doesn't get used for drawings 3) I agree w/ the common use but it's tricky to implement, you need to get the XY position and update that to the drawing event (when panned), zoom is a whole world of pain, something paper.js seems reluctant to deal with.

[JohnMcLear]

https://github.com/paperjs/paper.js/issues/525

[JohnMcLear]

So here is a snippit that might work using panZoom

$ContainerPanZoom.on('mousewheel.focal', function(e) {
        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
        $ContainerPanZoom.panzoom('zoom', zoomOut, {
          cursor: "move",
          startTransform: 'scale(1)',
          increment: 0.2,
          minScale: 0.4,
          maxScale: 3.0,
          contain: 'invert',
          animate: false,
          focal: e
        });
      });

Thanks to @LuoboTiX posted on https://github.com/timmywil/jquery.panzoom/issues/129#issuecomment-55871091

[JohnMcLear]

Afaik to get panning on touch devices you would need to support a button or set of ui features that allow for panning around a UI. Possibly just de-selecting any drawing tool would be enough? That way you could pan the UI using your finger as if you were drawing.

[bytesnz]

This has mostly been solved now with the panning/scaling I added. Only thing would be to add an indication that more of the drawing is not being seen. Will look into.