Selecto Drag effect not in pointer position

[MuhammadFadhil10]

Environments

• Framework name: React.js
• Framework version: 18.2.0
• Component name:
• Component version:
• Testable Address(optional):

Description

selecto drag effect is far from pointer when the selecto container is scaled?

[daybrush]

Could you try setting the rootContainer to no scaled container?

<div class="container" style={{
  transform: "scale(1.5)"
}}>
<Selecto
    rootCotnainer={document.body}

/>
</div>

[MuhammadFadhil10]

Its still same, here's my code:

• selecto:

  <Selecto
          ref={selectoRef}
          boundContainer={true}
          rootContainer={document.body}
          selectableTargets={[".items"]}
          hitRate={0}
          selectByClick={true}
          selectFromInside={false}
          toggleContinueSelect={["shift"]}
          ratio={0}
          onDragStart={(e) => {
            const moveable = moveableRef.current!;
            const target = e.inputEvent.target;
            if (
              moveable.isMoveableElement(target) ||
              targets.some((t) => t === target || t.contains(target))
            ) {
              e.stop();
            }
          }}
          onSelect={(e) => {
            setTargets(e.selected);
  
            if (!e.added[0]?.dataset) return setActiveId("");
  
            setActiveId(e.added[0].dataset.id as string);
          }}
          onSelectEnd={(e) => {
            if (e.selected.length === 0) return;
  
            const moveable = moveableRef.current!;
            if (e.isDragStart) {
              e.inputEvent.preventDefault();
  
              moveable.waitToChangeTarget().then(() => {
                moveable.dragStart(e.inputEvent);
              });
            }
          }}
        />

• selecto scaled container:

   <Stack
    component="section"
    ref={drop}
    className="container"
    sx={{
      width: "100vw",
      minHeight: "100vh",
      // alignSelf: "center",
      position: "relative",
      overflowX: "hidden",
      boxShadow: 5,
      backgroundColor: "white",
      scale: "0.7",
    }}
  >
    <div
      ref={droppableContainerRef}
      style={{ width: "100%", height: "100%" }}
    >
      <MoveableRender ref={droppableContainerRef} />
    </div>
  </Stack>

demo video:

https://github.com/daybrush/selecto/assets/82107511/37333090-675a-4a89-abb6-210164b4a3f8

[daybrush]

@MuhammadFadhil10

Could you try using transform: scale(value) instead of the scale property?

[daybrush]

@MuhammadFadhil10

If it doesn't work, is there any codesandbox I can test?

[MuhammadFadhil10]

@MuhammadFadhil10

Could you try using transform: scale(value) instead of the scale property?

this is work, now the selecto effect back to normal

[hqiaozhang]

I also encountered the same problem, but using transform: scale (value) install of the scale property? Failed to solve the problem

[daybrush]

@hqiaozhang

So did you use rootContainer together?

Transform should not be used outside of the rootContainer.