useLasso

Demo

Usage

export function LassoUsage() {
    const ref = useRef();

    const xScale = useMemo(() => {
        return scaleLinear().domain(dinoDomainX).range([0, 300]);
    }, []);

    const yScale = useMemo(() => {
        return scaleLinear().domain(dinoDomainY).range([300, 0]);
    }, []);

    const { value } = useLasso(ref, {
        onChangeEnd: (lasso) => {
            const selection = [];
            dinoData.forEach((point, i) => {
                if (checkForInclusion(lasso, { x: xScale(point.x), y: yScale(point.y) })) {
                    selection.push(i);
                }
            });
            setSelection(selection);
        }
    });

    const [selection, setSelection] = useState<number[]>();


    
    return <Center>
        <Brushable ref={ref}>
            <DinoData xScale={xScale} yScale={yScale} selection={selection} />
            { value ? <path d={lassoToSvgPath(value)} fill="none" stroke="black" strokeDasharray="4" strokeWidth={2} /> : null }
        </Brushable>
    </Center>
}

API

value

value?: LassoValue

Optional value that can be used to control the useLasso hook in conjunction with onChange.

onChange

onChange?: (value: LassoValue) => void

Event that is fired whenever the lasso changes. This is useful for controlling the state of this hook. If you want to react when the user has finished drawing the lasso use onChangeEnd instead.

onChangeEnd

onChangeEnd?: (value: LassoValue) => void

Event that is fired when the user stops drawing the lasso. Use this event for selection purposes.

minDistanceToCreatePoint

minDistanceToCreatePoint?: number

Amount of pixels that have to be dragged to create a new control point for the lasso.