2021-07-01

Today’s Picture of the Day

I haven’t actually wrapped the group div in a sticky div yet.

In the normal DOM, the position of the content is determined first, and then the size of the parent element is determined to wrap the content, so it was necessary to calculate the bounding box by oneself.

• At any rate, I’ve confirmed that that bounding box calculation worked.

I set the center of the group to 0, thinking that the calculation of the displacement caused by DOM inclusions could be done later, but when I thought about it, the starting point of the position was the upper left corner of the parent element.

Once the bounding box of the parent element is determined, we know the position of the starting point, so I guess we can propagate that to the child elements.

2021-07-02 I tested the chitin coordinates. The group has not yet encompassed stickies. Group.tsx

<>
  <GroupDiv style={style} key={value.id} data-testid={value.id}></GroupDiv>
  {idsToDom(value.items, offset)}
</>

Inclusion will naturally lead to misalignment. Group.tsx

<GroupDiv style={style} key={value.id} data-testid={value.id}>
  {idsToDom(value.items, offset)}
</GroupDiv>

If I change the offset to propagate here… hey, it looks right, but the test is rubbish, it’s off by 5px.

I see, so it’s only the thickness of the border that’s displaced.

safely restored to normal

---

Import stiff complex groups from Regroup The drawing position of the contents is misaligned. This is due to, well, the difference in the way Regroup and Movidea have their coordinates. Regroup also has absolute coordinates for branch stickies, but Movidea’s coordinates are relative to the parent. I have to fix it only when importing from Regroup.

With the relative coordinate style, the coordinates of the child elements need to be rewritten when grouping. This is not necessary when dragging a group.

Oh, and the sticky’s magnification feature was not yet implemented in the first place. Oh, and “group within a group” sounds odd. Let’s try something simpler to see if the import is wrong or the drawing is wrong.

scaled It’s done.

nested This is a crazy offset for a group within a group. Cured.

I’ll check again. Visibility in Regroup It’s much better. Hey, isn’t this because the aspect ratio of the stickies and the margins of the groups are different in the first place?

Fixed. Hmmm, this isn’t the same bounding box of stickies that expanded unrelated to the group’s nesting.

Minimized. Ah, I see, the height and width are reversed in the bounding box calculation.

Hmmm, still a little funny. This is a compounding problem, so I think I’ll put aside importing from Regroup for now. This is going to be resolved in a simpler way while using this stand-alone function.

What to do next

• Update with immer
  • Moving and adding stickies
    • Update with immer and test with Cypress
• After that, such operations are exposed as JS API

--- this week done ・Cypress and ReactN can be combined for testing. Parallel translation and scaling with touchpad Group drawing (basic) Import from Regroup JSON doing When importing from JSON of Regroup, the position of stickies in a group is not correct. The function to display enlarged stickies was not yet available.

---

This page is auto-translated from /nishio/2021-07-01 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.