image It is now possible to move in and out of groups, which was previously too difficult! The stacking order is perfect, with the last one moved on top. The lesson learned is that it’s too hard to update the tree with React’s “don’t do destructive updates bind”, so let’s use immer to free ourselves from the bind.

After this, I fixed the group’s background not being translucent. I also found that it can drop on itself, so I added a process to avoid inconsistencies.

What happens if I drop a selection into a group?

  • Thought it would be a good idea to add each sticky to a group.
  • The display is wrong after adding, for some reason.
  • Only top-level elements are selected” is incompatible with “the selection is not deselected after moving the selection”.
    • Both stickies in a group and stickies in a selection are drawn.
  • Deselected when dropped into a group.
    • At first glance, it seems natural, but won’t the user be caught in this inconsistency?
    • This operation is difficult to redo, so you’ll need to be able to Undo

Add to the diagram

  • image
  • I was just going to do C.
  • A Bug
    • DragDropAPI can also drop to itself.
    • If a group can be dragged and a group can be a drop target, then of course there can be a “drop on itself”, which is a problem!
    • So when there is a drop to itself, it transfers the process to a drop to canvas.
  • B Specifications
    • Dragging a selection to a group will deselect it, unlike other cases

Testing in and out of groups image

Tried the “if there’s a group within a group” thing and found a nasty problem.

  • The element being dragged is displayed in full size even when zoomed out

  • image
  • I tried cloneNode and event.dataTransfer.setDragImage but transform: scale seems to have no effect
  • This is browser implementation-dependent behavior not specified in the specification
  • Wife: “It may not be optimal, but it’s not so much that it’s seriously damaging to what we want to achieve with this program as that it may be convenient to check the magnified view by pressing and holding the mouse without zooming.
    • Well
 let’s hold off for now then.

Aside from that, it’s rather buggy to begin with.

  • The bounding box when there’s a title is a little off, too.
  • Fixed.
    • image
    • I saw this result with the naked eye and thought it looked misaligned, but it just feels that way because of the menu bar and the group titles, and the stickies are centered.
      • I wrote the coordinate values in the test case and checked them.
  • image

Your bounding box is out of alignment by the amount of FUSEN_BORDER.

  • image
  • fixed

What to do next

  • Add a sticky when you press the button in the Add Sticky dialog.

This page is auto-translated from /nishio/2021-07-27Movidea開ç™ș旄蚘 using DeepL. If you looks something interesting but the auto-translated English is not good enough to understand it, feel free to let me know at @nishio_en. I’m very happy to spread my thought to non-Japanese readers.