Coloris icon indicating copy to clipboard operation
Coloris copied to clipboard

colorArea issue with CSS zoom

Open gabridego opened this issue 7 months ago • 1 comments

Describe the bug When the zoom or transform: scale() CSS properties are applied to the color picker, the color marker inside the color area is not updated correctly.

To Reproduce Steps to reproduce the behavior:

  1. In the demo page, add the zoom or transform: scale() property to the element of id clr-picker using the inspect tool
  2. Open the picker and try to move the color marker

Expected behavior The color marker should follow the cursor.

In my application, I only use the zoom property and fixed it for my use case updating the moveMarker function as follows, considering the zoom for the pointer position. However, it should take into account transform: scale() too.

function moveMarker(event) {
  const pointer = getPointerPosition(event);

  if (picker.style.zoom && picker.style.zoom != "") {
    let zoom = picker.style.zoom.trim();
    if (zoom.slice(-1) == "%") {
      // Convert percentage to decimal
      zoom = parseFloat(zoom) / 100;
    }
    zoom = parseFloat(zoom);

    if (!isNaN(zoom) && zoom > 0) {
      pointer.pageX = pointer.pageX / zoom;
      pointer.pageY = pointer.pageY / zoom;
    }
  }

  let x = pointer.pageX - colorAreaDims.x;
  let y = pointer.pageY - colorAreaDims.y;

  if (container) {
    y += container.scrollTop;
  }

  setMarkerPosition(x, y);

  // Prevent scrolling while dragging the marker
  event.preventDefault();
  event.stopPropagation();
}

Amazing library by the way, congrats for the great work!

gabridego avatar Jul 03 '24 12:07 gabridego