Building drag to pan

this keeps coming up a bunch (not just in these posts), I guess if you use a desktop pc that only has a vertical scrollwheel being able to drag comes in handy. So I’m working on this now

1 Like

normally on a website (on mac at least), pressing space scrolls the page down. But I don’t think it’s a common thing to do when navigating kinopio spaces so I’ll have to cancel the default spacebar behaviour to implement this

2 Likes

:100: I have never considered hitting space bar in a Kinopio space to scroll. This is the first time I tried it and hey look, it scrolls vertically :slight_smile:

This makes sense to build – many canvas-based apps use this paradigm. If I didn’t have a Magic Mouse (with a touch surface that lets me scroll horizontally), I would probably be clamoring for this too.

1 Like

This made me ask “how do I pan?” (PC user) and it turns out I press down the middle mouse button to get the little scroll-anywhere thingy

Personally do this on loads of sites, apps, and games so it makes sense to me. But space bar + left-click (?) drag is inoffensive, doesn’t break anything… so let them eat cake I say.

4 Likes

just shipped this out, i’ll make a marketing tweet for it tmrw

let me know how it goes, I can adjust the pan speed. right now it’s at 2 (so for every px you drag, it moves the page by at least 2x. In my testing that felt the closest to what figma does.

You’ll may also notice the cursor flickering on safari and ff, that’s a result of a lower system/app things (also happens on figma in these browsers). On chrome/vivaldi/edge you’ll see no cursor flicker.

2 Likes

Cool.

If I put my cursor over a card, then hold spacebar and drag. Then if I release the spacebar, I am still in a panning mode. I can’t get out of it until hit Esc or click (which creates a new card).

i can’t repro that. when you release the spacebar are you over a card still? does the the release point change things for you? what browser(s) are you seeing this on?

1 Like

I’ve tried on the mac app, Safari, Firefox. Here is one case I isolated:

  • Press down spacebar
  • Drag my cursor
  • Release spacebar
  • Drag my cursor
  • Observe that I’m still panning with my drag

If I’m over empty space and I stop dragging, then after 1-2 seconds, things go back to normal. If I’m over a card when I release the spacebar, and then I drag some while over the card (still in panning mode), then stop dragging, I get the card edit dialog. At this point, I’m still in panning mode, and no longer how long I wait, I remain in this mode. I can get out by clicking.

In general, it’s very easy reproduce some behavior that feels janky. I’m surprised you can’t repro. To clarify, when I say drag, I am doing a click-and-drag, which I’m pretty sure is what conventional behavior is for illustrator, photoshop, I assume figma?

Misc:

  • I noticed that sometimes hitting spacebar still scrolls down a page. It seems mainly disabled, but I saw this behavior here and there when I was testing the feature.
1 Like

Maybe one thing I’m doing differently is, I am using 3-finger drag on mac to “emulate” a click-and-drag.

But I can also reproduce with a traditional click-and-drag…

1 Like

just to rule it out, when you open the console do get 🐢 kinopio-client build – "758d7cecb04bb0c5e262"?

1 Like

Yes, that’s what I’m getting.

1 Like

I still can’t repro. Maybe this is a case of needing to restart your computer (really grasping at straws here)

This is what I see, when i press space and drag on safari, I guess this is/was different for you?

1 Like

I reproed on my work computer in the mac app. Here is a video:

I’m using a mouse here too, rather than a trackpad.

  • Press down spacebar
  • Click and drag
  • Release spacebar
  • Continue dragging
  • Release mouse press
  • The card dialog opens, and I’m in panning mode, even though I don’t have mousedown.

(i’m also using mouse)
i still can’t repro , but I added temp debugging code, let me know what you see in the console when the card opens during panning

Screen Shot 2021-08-30 at 11.21.57 AM

1 Like

image

(same behavior on mac app and Vivaldi)

super helpful, just shipped a fix that should prevent the card opening up during pan in this scenario.

If it still doesn’t work, let me know what the :crab: msg is

2 Likes

Great, that seemed to fix all the immediate jankiness I was seeing. I’ll test some more later, but looks and feels a lot better :slight_smile:

2 Likes