use renderer to check nearest points

[github-actions]

res.view.addEventListener('gl_mousemove', hdr);

res.view.addEventListener('gl_touchmove', hdr);

https://api.github.com/Kanaries/Rath/blob/c299d51963509a3926814e3015efaf4ab98d32e6/packages/rath-client/src/pages/painter/index.tsx#L288

            // @ts-ignore
            embed(container.current, painterSpec, {
                actions: painterMode === PAINTER_MODE.MOVE,
                renderer: 'painter',
            }).then((res) => {
                let changes = vega.changeset();
                let removes = new Set();
                res.view.change(
                    'dataSource',
                    changes
                        .remove(() => true)
                        .insert(viewData)
                ).runAsync().then((view) => {
                    // if (testConfig.printLog) { window.console.log("changes =", changes); }
                });

                
                setRealPainterSize((res.view as unknown as { _width: number })._width * painterSize);
                if (!(painterSpec.encoding.x && painterSpec.encoding.y)) return;
                // if(testConfig.printLog) {
                //     res.view.addDataListener('dataSource', (name, value) => {
                //         window.console.log("dataListener", name, value);
                //         window.console.log(testConfig);
                //     })
                // }
                const xField = painterSpec.encoding.x.field;
                const yField = painterSpec.encoding.y.field;
                const xFieldType = painterSpec.encoding.x.type as ISemanticType;
                const yFieldType = painterSpec.encoding.y.type as ISemanticType;
                const isContX = isContinuous(xFieldType), isContY = isContinuous(yFieldType);
                const limitFields: string[] = [];
                if (painterSpec.encoding.column) limitFields.push(painterSpec.encoding.column.field);
                if (painterSpec.encoding.row) limitFields.push(painterSpec.encoding.row.field);

                const [rotXField, rotYField] = !isContX ? [yField, xField] : [xField, yField];
                const [rotIsContX, rotIsContY] = !isContX ? [isContY, isContX] : [isContX, isContY];
                let hdr = (e: ScenegraphEvent, item: Item<any> | null | undefined) => {
                    // window.console.warn('hdr case', [xFieldType, yField], 'not implemented');
                };
                if (rotIsContX && rotIsContY) {
                    const xRange = getRange(viewData.map((r) => r[rotXField]));
                    const yRange = getRange(viewData.map((r) => r[rotYField]));
                    hdr = (e: ScenegraphEvent, item: Item<any> | null | undefined) => {
                        e.stopPropagation();
                        e.preventDefault();
                        // @ts-ignore
                        if (!isPainting.current && e.vegaType !== 'touchmove') return;
                        startPaint(res.view);
                        if (painting && item && item.datum) {
                            let limits: { [key: string]: any } = {};
                            for (let f of limitFields) {
                                limits[f] = item.datum[f];
                            }
                            /** directly setting 'fill' of scenegraph */
                            const result = paint({
                                view: res.view,
                                painterMode,
                                fields: [rotXField, rotYField],
                                point: [item.datum[rotXField], item.datum[rotYField]],
                                radius: painterSize / 2,
                                range: [xRange[1] - xRange[0], yRange[1] - yRange[0]],
                                limits: limits,
                                groupValue: mutFeatValues[mutFeatIndex],
                                indexKey: LABEL_INDEX,
                                newColor:  COLOR_CELLS[mutFeatIndex].color,
                            });
                            const { mutIndices, mutValues, view } = result;
                            res.view = view;
                            if (painterMode === PAINTER_MODE.COLOR) {
                                changes = changes
                                    .remove((r: any) => mutIndices.has(r[LABEL_INDEX]))
                                    .insert(mutValues)
                            } else if (painterMode === PAINTER_MODE.ERASE) {
                                changes = changes
                                    .remove((r: any) => mutIndices.has(r[LABEL_INDEX]));
                                for (let i of mutIndices) removes.add(i);
                            }
                        }
                    };
                } else if (rotIsContX && !rotIsContY) {
                    const xRange = getRange(viewData.map((r) => r[rotXField]));
                    hdr = (e: ScenegraphEvent, item: Item<any> | null | undefined) => {
                        e.stopPropagation();
                        e.preventDefault();
                        // @ts-ignore
                        if (!isPainting.current && e.vegaType !== 'touchmove') return;
                        startPaint(res.view);
                        if (painting && item && item.datum) {
                            const { mutIndices, mutValues, view } = paint({
                                view: res.view,
                                painterMode,
                                fields: [rotXField, rotYField],
                                point: [item.datum[rotXField], item.datum[rotYField]],
                                radius: painterSize / 2,
                                range: xRange[1] - xRange[0],
                                groupValue: mutFeatValues[mutFeatIndex],
                                indexKey: LABEL_INDEX,
                                newColor: COLOR_CELLS[mutFeatIndex].color,
                            });
                            res.view = view;
                            if (painterMode === PAINTER_MODE.COLOR) {
                                changes = changes
                                        .remove((r: any) => mutIndices.has(r[LABEL_INDEX]))
                                        .insert(mutValues)
                            } else if (painterMode === PAINTER_MODE.ERASE) {
                                changes = changes.remove((r: any) => mutIndices.has(r[LABEL_INDEX]));
                                for (let i of mutIndices) removes.add(i);
                            }
                        }
                    };
                }
                // else { /** !rotIsContX && !rotIsContY */ }
                res.view.addEventListener('mousedown', (e) => {
                    isPainting.current = true;
                    startPaint(res.view);
                });
                res.view.addEventListener('mouseup', () => {
                    isPainting.current = false;
                    stopPaint(res.view);
                    const curRemoves = removes, curChanges = changes;
                    removes = new Set();
                    changes = vega.changeset();
                    res.view.change('dataSource', curChanges).runAsync().then((view) => {
                        linkNearViz();
                        maintainViewDataRemove((r: any) => curRemoves.has(r[LABEL_INDEX]));
                    })
                });
                // TODO: use renderer to check nearest points
                // res.view.addEventListener('gl_mousemove', hdr);
                // res.view.addEventListener('gl_touchmove', hdr);
                res.view.addEventListener('mousemove', hdr);
                res.view.addEventListener('touchmove', hdr);
                res.view.resize();
                res.view.runAsync();
            });