Configure handle size via CSS

[IlyaSemenov]

Currently, the handle size is configured via style attributes and manual pixel value calculations:

vue3-drag-resize-rotate/src/components/vue-drag-resize-rotate/index.vue

Lines 351 to 354 in 5b17bb4

	tm: {
	top: `${offset}px`,
	left: `calc(50% - ${center}px)`,
	},

That makes it very inconvenient to override it with CSS. For instance, I wanted the handle to increase slightly on hover, but that's not directly possible as you're not only hardcoding fixed width in a style but also use it to calculate fixed pixel offsets (see above).

I propose to get rid of handleInfo completely, and use CSS for handle size, and replace hardcoded values inside calc with translate for centering:

.handle {
  width: 8px;
  height: 8px;
  &-tl {
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
  }
  &-tr {
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
  }
  &-bl {
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
  }
  &-br {
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
  }
  &-rot {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

This is what I actually ended up doing, passing :handle-info="{ size: 0, offset: 0, switch: true }" to get rid of the hardcoded offsets. My point is that's how the library should work in the first place.