React-zoom-pan-pinch: Issue with wheel.excluded props in TransformWrapper - Not excluding as expected

Question

I am working on a project using the react-zoom-pan-pinch library to create a zoomable and draggable canvas. I have elements with the class name 'drag-exclude' that I want to exclude from panning, pinching, and wheel events. I'm encountering an issue with the wheel.excluded the panning.excluded and pinch.excluded props in the TransformWrapper as they are not working at all in excluding the div.

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"

  <TransformWrapper
        panning={{ excluded: ['drag-exclude'] }}
        pinch={{ excluded: ['drag-exclude'] }}
        wheel={{ excluded: ['drag-exclude'] }}
      >
        <TransformComponent>
          <div
            className="canvas position-relative"
            ref={drop}
            style={{
              width: `${canvasSize.width}px`,
              height: `${canvasSize.height}px`,
              overflow: 'hidden'
            }}
          >
          {draggedComponents.map((component, index) => (
            <div className='drag-exclude'>
              <DraggableItem
                key={index}
                index={index}
                component={component}
                onDrag={handleDrag}
                onDelete={handleDelete}
              />
            </div>
          ))}
          </div>
        </TransformComponent>
      </TransformWrapper>`

The Above excluding method didn't work, I wanted my DraggableItem to be not be pannable. There are no error messages in the console. I am using "react-zoom-pan-pinch": "^3.3.0"

Answer 1

As I can see in this issue:

And I can see in the code source

export const isExcludedNode = (
  node: HTMLElement,
  excluded: string[],
): boolean => {
  const targetTagName = node.tagName.toUpperCase();
  const isExcludedTag = excluded.find(
    (tag) => tag.toUpperCase() === targetTagName,
  );

  if (isExcludedTag) return true;

  const isExcludedClassName = excluded.find((className) =>
    node.classList.contains(className),
  );

  if (isExcludedClassName) return true;

  return false;
};

The only way you have to exclude nested component is to set the excluded class to each one... Sorry

Or second way :

You have to intercept the onWheel and those you want to check the e.target.closest('.excludedClass') and cancel the event if found.