Feat: cross-page single-pod copy-paste in mouse-bound `ctrl`-`v` way #158

li-xin-yi · 2022-12-20T11:29:34Z

[Done] This PR is finished, ready to review now.

(Only support one single code pod by now, Ctrl-C is not supported yet)

Related to: #155

I gave up clipboard.read/write, removed the paste option in right-click menu, tested on Chrome, Edges, and Firefox, all works well.

How to use:

Copy a pod (either in this page or other pages) via the copy button
Click (or right-click) on the canvas (pane) once to make sure the pane is focused
Press Ctrl -V, a duplicated pod shows up in the center of the canvas (FIXME: because the cursor may not be in the canvas when pasting, so I just choose the center as the initial position, we can discuss the detailed rule for the initial position later)
Move your mouse inside the canvas, the half-transparent pasted pod will move together, but the collaborator will never see this half-transparent pod. (To be exactly, the top-left corner position of this pod comes following the mouse, we may discuss the anchor point later, which point do you prefer? The center of the pod? Or the top-left?)
Click on the destination position, then the pasted pod completely shows up, others can also see it on their pages.

~~Don't merge, just a demo to convey my idea and for test usages from others. The code is too dirty now, if you agree on this idea, I can continue to improve the implementation.~~

lihebi · 2022-12-20T17:09:51Z

ui/src/components/Canvas.tsx

+        style,
+      };
+
+      addPod(apolloClient, {


In the future, we can defer the write to DB until the final drop of the node (when we allow a user to press Esc to cancel the paste). No need to implement that now because that seems to require non-trivial logic. Adding a TODO comment is good enough.

Also, since we called addPod in observer.YMapEvent.changes:

codepod/ui/src/lib/nodes.tsx

Lines 106 to 111 in a67b5c8

const observer = (YMapEvent) => {

YMapEvent.changes.keys.forEach((change, key) => {

if (change.action === "add") {

const node = nodesMap.get(key);

if (!node) return;

addPod(null, {

I think all addPod calls in Canvas.tsx are duplicate, right? Should we remove them? I.e. this line (Line 1170 in this PR) and the following line (Line 901 in main):

codepod/ui/src/components/Canvas.tsx

Line 901 in a67b5c8

addPod(apolloClient, {

addPod calls in Canvas.tsx are duplicate, right?

That depends on the behavior of ymap.observe. It is triggered if "other users" make the change. Would it get triggered as well if the "local user" makes the change?

In the future, we can defer the write to DB until the final drop of the node

In fact, when a user press the shortcut, the half-transparent node is immediately added to the pods array in local store, and nodesMap, but have not been synced to the DB (see the addpod arguments, I set the dirty false, doRemoteAdd will not be executed.

When the user determines the destination by clicking, I delete the temporary transparent node in nodesMap, and add a new formal node with everything identical but style.opacity and clientId removed, then write it formally to the DB.

ymap.observe on adding events here serves like the way in which we use useEffect to sync pod.name and pod.position before, only sync the data in nodesMap with local store.pods on each user's own side.

To avoid the duplicated pod adding in local store, I check if the pod is already in store.pods here: https://github.com/li-xin-yi/codepod-1/blob/experimental%2Fpaste-on-canvas/ui/src/lib/nodes.tsx#L114

Sorry, my bad, I noticed that I set the dirty=true for the temporary pod adding just now. I will fix it.

lihebi · 2022-12-20T17:11:30Z

ui/src/components/Canvas.tsx

+      nodesMap.set(id, newNode as any);
+      setPasting(id);


If we set nodesMap, it would automatically sync with collaborators, right? UPDATE resolved; I saw that you checked clientID in various places in lib/nodes.tsx. That's a clever trick, looks good to me!

Yes, it is an adding event in nodesMap, usually, ymap.observe triggers a addPod call without remote DB writing, just adds it to the store.pods in each user's side. In this case, since I add the checking statement for clientId, collaborators will ignore it and won't call addPod until we delete the temporary floating transparent node and re-add the formal node.

lihebi · 2022-12-20T17:43:39Z

ui/src/components/Canvas.tsx

+      node.position = position;
+      nodesMap.set(pasting, node);
+    };
+    const mouseClick = (event) => {


It would be helpful if the user could cancel the pasting before the drop by pressing Esc.

I agree, sounds great, I will work on this feature later.

lihebi · 2022-12-20T17:49:09Z

because the cursor may not be in the canvas when pasting, so I just choose the center as the initial position

LGTM

the top-left corner position of this pod comes following the mouse

LGTM

lihebi · 2022-12-20T17:50:02Z

I gave up clipboard.read/write, removed the paste option in right-click menu, tested on Chrome, Edges, and Firefox, all works well.

LGTM. Let's forget about the right-click context menu for now.

li-xin-yi · 2022-12-21T00:04:34Z

Update:

Fix the immediate adding to DB issue (see this comment)
Add onClick listener to tooltip of codeNode to set the pane focus, then you can paste right after clicking on the copy button without additional clicking on the pane.
Press Esc to cancel the in-progress pasting.
If the destination is located inside a scope, drop this codeNode into the scope like what we did in onNodeDragStop.
If there is already data on the yjs server for this code editor, reversely initialize pod.content to current code on when mounting the Monaco editor. Because collaborators pulled new node info from nodesMap, in which nodes don't have the information of code content, the store.pods[id].content will be initialized as null and kept until the code changes. This is a horrible data inconsistent issue between front-end code display <-> store.pods[id].content <-> pods[id].content in DB, for example, if you copy and paste a pod in canvas, everything looks normal, but actually the new pasted pod has an empty pod.content field, if you copy this new pod and then paste, you can see nothing on the new pasted pod.

Code still needs cleaning up and performance improvement.

li-xin-yi · 2022-12-21T03:32:33Z

Update:

The reverse initialization of a temporary pod makes the pod dirty, but it won't have a truth source in DB until determined, so the cloud uploading must fail with error. Fix it by initialize the content without setting the pod dirty.

To-do:

clean up the code
improve the performance
after pressing esc, a black inner block shows up in the pane, indicating the whole pane is selected. The event is triggered by esc by default (see this source code, the enter and space have the same effect on pane). I have to figure out a solution to prevent or un-select it.

lihebi · 2022-12-21T16:04:47Z

Thanks, all look and work great!

li-xin-yi · 2022-12-21T19:10:12Z

Updata:

Clean up the code

Disable duplicated pasting when a pasting is not finished.
Fix the tab selection black border issue there
Unselect all pods when a pasting starts, make sure the processing pods always in the front-most, never shadowed by others.

lihebi

Awesome, thanks!

lihebi · 2023-01-06T19:28:42Z

ui/src/components/Canvas.tsx

@@ -907,6 +957,7 @@ export function Canvas() {
        y: position.y,
        width: style.width,
        height: style.height,
+        dirty: true,


why do we need dirty: true here? It will cause a updatePod request, which might reach server before addPod, causing errors.

The dirty parameter is removed in store.addPod but somehow remains here. It's a bug but shouldn't have any effect on addPod. Can you show me how to reproduce the error?

It does not reproduce on localhost. If you go to app.codepod.io, creating pods would sometime fail to sync.

But never mind, I've fixed it.

draft: go back to clipboardData

a22c41b

li-xin-yi marked this pull request as draft December 20, 2022 11:32

li-xin-yi mentioned this pull request Dec 20, 2022

Position to paste cells in ctrl-v way #155

Closed

4 tasks

lihebi reviewed Dec 20, 2022

View reviewed changes

li-xin-yi and others added 2 commits December 20, 2022 17:37

Merge branch 'codepod-io:main' into experimental/paste-on-canvas

dde30f5

fix some issues

47f2c4c

fix content init

357d128

code clean up

2385b9f

li-xin-yi marked this pull request as ready for review December 21, 2022 19:10

li-xin-yi changed the title ~~[WIP] A demo to show the pasted pod following the mouse~~ Feat: cross-page single-pod copy-paste in mouse-bound ctrl-v way Dec 21, 2022

fix: ban pasting from guests

b8e4f75

lihebi approved these changes Dec 21, 2022

View reviewed changes

lihebi merged commit efc7e7c into codepod-io:main Dec 21, 2022

lihebi linked an issue Dec 21, 2022 that may be closed by this pull request

Position to paste cells in ctrl-v way #155

Closed

4 tasks

lihebi reviewed Jan 6, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: cross-page single-pod copy-paste in mouse-bound `ctrl`-`v` way #158

Feat: cross-page single-pod copy-paste in mouse-bound `ctrl`-`v` way #158

li-xin-yi commented Dec 20, 2022 •

edited

Loading

lihebi Dec 20, 2022 •

edited

Loading

lihebi Dec 20, 2022

lihebi Dec 20, 2022

li-xin-yi Dec 20, 2022 •

edited

Loading

li-xin-yi Dec 20, 2022

lihebi Dec 20, 2022

li-xin-yi Dec 20, 2022 •

edited

Loading

lihebi Dec 20, 2022

li-xin-yi Dec 20, 2022

lihebi commented Dec 20, 2022

lihebi commented Dec 20, 2022

li-xin-yi commented Dec 21, 2022

li-xin-yi commented Dec 21, 2022 •

edited

Loading

lihebi commented Dec 21, 2022

li-xin-yi commented Dec 21, 2022

lihebi left a comment

lihebi Jan 6, 2023

li-xin-yi Jan 6, 2023

lihebi Jan 7, 2023

	const observer = (YMapEvent) => {
	YMapEvent.changes.keys.forEach((change, key) => {
	if (change.action === "add") {
	const node = nodesMap.get(key);
	if (!node) return;
	addPod(null, {

Feat: cross-page single-pod copy-paste in mouse-bound ctrl-v way #158

Feat: cross-page single-pod copy-paste in mouse-bound ctrl-v way #158

Conversation

li-xin-yi commented Dec 20, 2022 • edited Loading

lihebi Dec 20, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

li-xin-yi Dec 20, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

li-xin-yi Dec 20, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lihebi commented Dec 20, 2022

lihebi commented Dec 20, 2022

li-xin-yi commented Dec 21, 2022

li-xin-yi commented Dec 21, 2022 • edited Loading

lihebi commented Dec 21, 2022

li-xin-yi commented Dec 21, 2022

lihebi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Feat: cross-page single-pod copy-paste in mouse-bound `ctrl`-`v` way #158

Feat: cross-page single-pod copy-paste in mouse-bound `ctrl`-`v` way #158

li-xin-yi commented Dec 20, 2022 •

edited

Loading

lihebi Dec 20, 2022 •

edited

Loading

li-xin-yi Dec 20, 2022 •

edited

Loading

li-xin-yi Dec 20, 2022 •

edited

Loading

li-xin-yi commented Dec 21, 2022 •

edited

Loading