Today’s Picture of the Day
- [Update with immer and test with Cypress Update group position
Update position of child element B
What should happen when a child element is moved after the group is created? Currently, bounding boxes are drawn properly, but the offset of child element drawing is misaligned.
A: One solution is to “modify the parent’s POSITION when the child element moves
- It looks muddled, but it’s actually straightforward, because the position of the child element has changed and the center of the parent element has moved.
- Of course, the group could be nested, so it needs to propagate upwards.
B: There is also a way to adjust at rendering time
- We know that the center is not zero when we calculate the bounding box of the child element, so we can shift the offset.
- In this case, the “position” of the “center” group of “child element center” on the screen is misaligned, so it is not folded in the center when it is folded.
- You could update the position when it’s folded, since it needs to be updated to the folded state anyway.
This is something that will be needed after “drag and move child elements after creating a group” is implemented, so let’s hold off and move on.
Margin if titled
- Hmmm, this is below.
I had the border white in Regroup.
- I’m not sure if this is the right way to go when it comes to titles.
- Expression especially when closed
- By leaving the border, we’re expressing that we’re a group, so if the border is white, it’s hard to tell us apart.
- Regroup
- Oh, right, you’re not leaving the border, you’re leaving the background.
- So it’s like this.
- This would make it irrelevant if there is a border or not.
This development is more secure when refactoring because I’m using Cypress to check the state I want to check, check the screen, see it’s what I expect, and then change the code to check it…and so on. But I still haven’t added event handlers or anything for human manipulation. Is this okay?
- From the viewpoint of “we should make something that users can actually use and have them use it and observe it as soon as possible,” is that a long way off?
Write down the functionality needed to make it actually usable. - MovideaFunctionality required to make it actually usable
I was going to put off the issue of offset shifting when moving a child element, but I thought I’d put it off. I thought it would be better to write the test in a simple state, so we’ll do that first thing tomorrow. If you want to change the way you do something later, it should be easier to do it if you have a test.
This page is auto-translated from /nishio/2021-07-13Movidea開発日記 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.