Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Center element on paste #248

Merged
merged 5 commits into from
Jan 9, 2020
Merged

Center element on paste #248

merged 5 commits into from
Jan 9, 2020

Conversation

Fausto95
Copy link
Member

@Fausto95 Fausto95 commented Jan 7, 2020

Fixes #164

@vercel
Copy link

vercel bot commented Jan 7, 2020

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/vjeux/excalidraw/h13i758js
✅ Preview: https://excalidraw-git-paste-in-center.vjeux.now.sh

@Fausto95
Copy link
Member Author

Fausto95 commented Jan 7, 2020

@dwelle I hope this one should work

@dwelle
Copy link
Member

dwelle commented Jan 7, 2020

Alright, this one works. Although, when you copy/paste several times, it pastes over the same position which may be hard to notice. Some older implem did offset it a bit, what do you think? (You'd still need to check that it doesn't move off-screen by the offset).

@Fausto95
Copy link
Member Author

Fausto95 commented Jan 7, 2020

Well, I'm using Sketch right now and it has the same behavior, if we offset if, we might end being off-screen. So I think the current implementation is just fine!

if (x == null) x = 10 - this.state.scrollX;
if (y == null) y = 10 - this.state.scrollY;
const minX = Math.min(...parsedElements.map(element => element.x));
const minY = Math.min(...parsedElements.map(element => element.y));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can't remove this. It is useful for pasting multiple elements

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😬just realized it

@vjeux
Copy link
Contributor

vjeux commented Jan 7, 2020

Doesn't seem to be working as expected, it pastes on the bottom-left'ish corner

image

@dwelle
Copy link
Member

dwelle commented Jan 7, 2020

Doesn't seem to be working as expected, it pastes on the bottom-left'ish corner

Bottom-right'ish, you mean?

@Fausto95 I'd simply compute the selection's bounding area (check my algo in exportAsPNG, but use only selected elems), and paste them at the same location + offset, except when the bounding area would get off-screen, in which case decrease the offset so that it doesn't (there might be an edge case where you can't offset at all without screen-overflow, in which case I'd offset anyway -- the offset shouldn't be much more than +-10px, anyway).

I'm actually not sure what was wrong with previous implem from @vjeux (apart from pasted position possibly being off-screen by a few px)?

@Fausto95
Copy link
Member Author

Fausto95 commented Jan 7, 2020

Doesn't seem to be working as expected, it pastes on the bottom-left'ish corner

Bottom-right'ish, you mean?

@Fausto95 I'd simply compute the selection's bounding area (check my algo in exportAsPNG, but use only selected elems), and paste them at the same location + offset, except when the bounding area would get off-screen, in which case decrease the offset so that it doesn't (there might be an edge case where you can't offset at all without screen-overflow, in which case I'd offset anyway -- the offset shouldn't be much more than +-10px, anyway).

It's correctly centered with your algo, but when it comes to pasting multiple elements, it completely messes up the position they were when copied

EDITED:
@dwelle Turns out it worked with the canvas offset

@Fausto95
Copy link
Member Author

Fausto95 commented Jan 7, 2020

Now it is pasting under(well, right next) the mouse position

@vjeux let me know if this seems ok-ish.

@vjeux
Copy link
Contributor

vjeux commented Jan 8, 2020

It doesn't seem to be working as intended. It takes the delta between top left of screen and element, and reproduces this to cursor to element. So if you have an element outside of the top left, it's going to be pasted far away from the cursor.

What we want is to take the center of the element(s) we're pasting, and make this be at the position of the mouse.

ezgif-2-f007f044cb16

@vjeux
Copy link
Contributor

vjeux commented Jan 8, 2020

Would be great to ship this relatively soon, the current behavior of moving the element at the top left is very annoying

@Fausto95
Copy link
Member Author

Fausto95 commented Jan 9, 2020

It's working now

@vjeux
Copy link
Contributor

vjeux commented Jan 9, 2020

Nice, just tested and it's working well!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Paste should always go inside viewport
4 participants