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:

web-edit-google-chrome-2023-06-06-13-28-54_uBumEH4S.mp4

[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.