Not Responsive

[tutuconkoch]

I tried to use this component to one of my application, but I found out that this component is not responsive. Is there any way to make this component responsive to different screen sizes, mostly I am focusing on to get it responsive in 4k resolution screens. I tried css transform scale property but in that case, the outer circle control behaves weirdly, please let me the solution, Thank you.

[luncheon]

As you said, this library does not work with CSS transform. I'd like to fix it when I have time.

Currently, you can use window.matchMedia() for responsiveness like follows.

const colorWheelSizes = {
  large: {
    wheelDiameter: 400,
    wheelThickness: 40,
    handleDiameter: 32,
  },
  small: {
    wheelDiameter: 200,
    wheelThickness: 20,
    handleDiameter: 16,
  },
};

const media4k = matchMedia("(min-width: 3840px)");

const colorWheel = new ReinventedColorWheel({
  appendTo: document.getElementById("color-wheel-container"),
  ...(media4k.matches ? colorWheelSizes.large : colorWheelSizes.small),
});

media4k.onchange = ({ matches }) => {
  Object.assign(colorWheel, matches ? colorWheelSizes.large : colorWheelSizes.small);
  colorWheel.redraw();
};

Thank you.

[tutuconkoch]

Thanks for your quick response, the above solution will also be helpful for now, but please look into the responsiveness asap.

[luncheon]

I fixed the CSS 2D transform behavior on v0.2.7!