issue with click event

[VisileanAnujS]

Hello, i am facing issues with click event , after changing the geometry of the shape and updating the layer click events are not firing and they fire only when i click the vertex of the shape ? how can i make the whole shape clickable ?

[w8r]

I don't understand your question. Can you please make an example on codepen or a similar tool?

[VisileanAnujS]

Hello @w8r , thank you for replying , here's the code

export default function ImageOverlayRotation({ shape }: ImageOverlayRotationProps) { const imageUrl = ${process.env.REACT_APP_API_DOMAIN}/map/image/${shape?.guid}/fileDownload/${shape?.properties?.name}; const map = useMap(); const rectangleRef = useRef(); const dispatch = useDispatch();

const [rotation, setRotation] = useState(0);
const [image, setImage] = useState<any>();
const [imageBoundsOverlay, setImageBoundsOverlay] = useState<[number, number][]>(
    shape?.geometry?.coordinates ?? [
        [0, 0],
        [0, 0]
    ]
);
const [latlngs, setlatlngs] = useState();

const {
    selectedLayer,
    selectionToolEnabled,
    selectedPinColor,
    mapReportViewState,
    drawMode,
    hiddenLayers
}: L.Layer | any = useSelector((state: RootState) => state.mapData);

useEffect(() => {
    // Initialize the ImageOverlayWithRotation and add it to the map
    const overlay = new ImageOverlayWithRotation(imageUrl, imageBoundsOverlay, {
        rotationAngle: rotation,
        pmIgnore: true,
        shape
    });

    const hiddenLayerGuids = hiddenLayers
        .map((item: any) => item.options.shape.guid)
        .filter(Boolean);
    if (!hiddenLayerGuids.includes(shape.guid)) {
        overlay.addTo(map);
    }

    setImage(overlay);
    return () => {
        map.removeLayer(overlay);
    };
}, [map, hiddenLayers]);

useEffect(() => {
    if (image) {
        image.setBounds(imageBoundsOverlay);
        image.setRotation(rotation);
    }
}, [imageBoundsOverlay, image, rotation]);

useEffect(() => {
    const convertRadiansToDegrees = (radians: number) => {
        const pi = Math.PI;
        return radians * (180 / pi);
    };

    const handleTransformations = (e: any) => {
        const layerBounds: any = e.layer.getBounds();
        const transformedBounds: any = [[layerBounds.getNorthEast()], [layerBounds.getSouthWest()]];
        setImageBoundsOverlay(transformedBounds);
        setlatlngs(e.layer.getLatLngs());
        // setRotation(convertRadiansToDegrees(e?.rotation));
        e.target.transform.reset();
    };

    const handleDrag = (e: any) => {
        const layerBounds: any = e.target.getBounds();
        const transformedBounds: any = [[layerBounds.getNorthEast()], [layerBounds.getSouthWest()]];
        setImageBoundsOverlay(transformedBounds);
        setlatlngs(e.target.getLatLngs());
    };

    const handleRotate = (e: any) => {
        setRotation(convertRadiansToDegrees(e.rotation));
    };

    if (rectangleRef.current) {
        const rect = rectangleRef.current;
        rect.on('rotate', handleRotate);
        rect.on('transformed', handleTransformations);
        rect.on('dragend', handleDrag);
    }

    return () => {
        map.off('rotate', handleRotate);
        map.off('transformed', handleTransformations);
        map.off('dragend', handleDrag);
    };
}, [rotation, rectangleRef]);

useEffect(() => {
    if (shape) {
        setImageBoundsOverlay(shape.geometry.coordinates);
    }
}, [shape]);

useEffect(() => {
    if (rectangleRef.current) {
        if (latlngs) {
            rectangleRef.current.setLatLngs(latlngs);
        }
    }
}, [rotation, latlngs]);

const handleRectangleClick = (event: LeafletMouseEvent) => {
    try {
        if (
            selectionToolEnabled &&
            mapReportViewState !== Views.Tasks &&
            !drawModesArr.includes(drawMode)
        ) {
            if (selectedLayer) {
                selectedLayer?.pm?.disable();
                selectedLayer?.pm?.disableRotate();
                if (selectedLayer?.pm?.layerDragEnabled()) {
                    selectedLayer?.pm?.disableLayerDrag();
                }
            }

            // revert selected style for last selected pin
            if (
                selectedLayer?.feature?.geometry?.type === 'Point' &&
                !selectedLayer?.feature?.properties?.radius
            ) {
                const icon = pinStyleRevert(selectedPinColor);
                selectedLayer.setIcon(icon);
            }

            event.target.transform.enable({ scaling: true, rotation: false, uniformScaling: true });
            // event.target.dragging.enable();
            dispatch(setSelectedLayer(event.target));
        }
    } catch (error) {
        console.log(error);
    }
};

return (
    <Rectangle
        ref={rectangleRef}
        eventHandlers={{ click: handleRectangleClick }}
        bounds={imageBoundsOverlay as L.LatLngBoundsExpression}
        pathOptions={{ fillOpacity: 0 }}
        {...{ transform: true, draggable: true, pmIgnore: true, shape }}
    />
);

}

here the code, basically after updating the shape the click event handler is not working . click event is only going to fire when i click on the vertex .

[w8r]

Sorry that doesn't give me an idea of what environment you are on, besides that this is React. What are you using, react-leaflet? Can you create a codesandbox starting with something like this?