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?