Fix boundaries when rotating pedals

[eridal]

Hi all, I've been messing with the CSS for rotating the pedals for a bit I have a working version. I cannot clone the repo due to disk space so I thought on adding the details here.

My current approach has only one downside, when the item is being dragged it will be shown as non-rotated. Once the drag finish the item will be placed in the right position, but you can't visually target the right place as the pedal will be drawn in a different position. This is caused by the drag library which uses the transform property, which overrides the rotation that we have put in place.

Since I can't clone this repo I cannot debug/change the script that controls the draggable element, so it's not clear to me if this can be solved by a simple config when setting up the drag handler.

Another approach would be introduce a wrapper div so that the artwork and the controls sit in a separate div than the one being dragged, however this approach requires being able to run the code locally.

Maybe anyone with access to the code locally can pick from where I left. Please find below the CSS rules to fix boundary when rotating the pedals. Anyone wants to continue on this?, more than glad if you submit the PR on your name!

---

Fix boundaries when rotating pedals:

[1] Add the transition effect to the item, it we will rotate the element itself so the boundary gets rotated accordingly.

  .item {
    position: absolute;
+   transition: transform 0.4s;
+   transform-style: preserve-3D;
  }

[2] Problem 1**: the item needs to be draggable, so remove the animation effect

+ .item.is-dragging {
+   transition: none;
+ }

[3] Allow items to be rotated:

+ .item.rotate-90 {
+   transform: rotate(90deg);
+ }
+ .item.rotate-180 {
+   transform: rotate(180deg);
+ }
+ .item.rotate-270 {
+   transform: rotate(270deg);
+ }

[4] Correct the action labels placements when rotated:

+ .item.rotate-90 .actions {
+   transform: rotate(-90deg);
+   top: 0;
+   left: 0;
+ }
+ .item.rotate-180 .actions {
+   transform: rotate(-180deg);
+   top: 100%;
+   left: 0;
+ }
+ .item.rotate-270 .actions {
+   transform: rotate(-270deg);
+   top: 100%;
+   left: 100%;
+ }

[5] Remove the transition effect to the artwork

  .item .artwork {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: 1;
    position: relative;
-   transition: all 0.4s;
    -webkit-filter: drop-shadow(3px 5px 7px rgba(0, 0, 0, 0.34));
    filter: drop-shadow(3px 5px 7px rgba(0, 0, 0, 0.34));
  }

[6] Remove these unused styles

- .item.rotate-90 .artwork {
- .item.rotate-180 .artwork {
- .item.rotate-270 .artwork {
- .item.pedal--custom.rotate-90, .item.pedalboard--custom.rotate-90 {
- .item.pedal--custom.rotate-180, .item.pedalboard--custom.rotate-180 {
- .item.pedal--custom.rotate-270, .item.pedalboard--custom.rotate-270 {
- .pedal.rotate-90 .artwork {
- .pedal.rotate-180 .artwork {
- .pedal.rotate-270 .artwork {

[ArislanShiva]

@tehtrav Would this be a viable solution?