dulimarta / spherical-easel

https://spherical-easel.vercel.app
Other
3 stars 7 forks source link

Rotate Shortcut Icon Doesn't work #88

Closed dickinson0718 closed 4 months ago

dickinson0718 commented 4 months ago

I created a line and then tried the rotate shortcut icon and it didn't change the current tool. The move, create line, circle and segment shortcut icons work. I also notice that when you hover over the rotate shortcut icon, a tool top doesn't display (unlike the others)

dulimarta commented 4 months ago

While investigating this issue, I notice that the tooltips do not show up on shortcut icons in the upper right corner main canvas. They do show up on icons in the upper left group.

I tested by placing the "Rotate" shortcut in both corners. Only the rotate shortcut in the upper left works.

dulimarta commented 4 months ago

The StyleDrawer.vue component has a parent box with zIndex set to 1 and the box spans the entire height of the canvas and thus "covers" the shortcut icon group on the upper left corner. Hence, click events on these shortcut icons can't go through.

Setting the zIndex of StyleDrawer.vue parent to 0 causes another issue; the style drawer icon cannot listen to click events. My attempt to place the icon group at a higher zIndex did not seem to work.

dulimarta commented 4 months ago

The following solution seems hacky, but it works. Add extra wide top and bottom margins around the parent box of StyleDrawer.vue:

<div style="margin-top: 120px; margin-bottom: 180px; .....">
  <StyleDrawer />
</div>

The 120-pixel top margin is taller than the height of the upper right icon group.