Selecto Drag effect not in pointer position

Question

Selecto Drag effect not in pointer position

MuhammadFadhil10 opened this issue a year ago · comments

Muhammad Fadhil Akbar commented a year ago

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 (Younkue Choi) · Answer 1 · Tue Jun 06 2023 14:27:11 GMT+0800 (China Standard Time)

Could you try setting the rootContainer to no scaled container?

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

/>
</div>

Muhammad Fadhil Akbar · Answer 2 · Tue Jun 06 2023 14:38:48 GMT+0800 (China Standard Time)

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