Developing react menu for annotation options.

src/app/src/components/annotations/annotationoptionsmenu.tsx

@@ -1,30 +1,39 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Menu, MenuItem } from '@blueprintjs/core';
 import styles from './annotationoptionsmenu.module.css';
+import { PolylineObjectType } from './utils/annotation';
 
 interface OptionsMenuProps {
   x: number;
   y: number;
+  layer: L.Layer | any,
   onIntersect: () => void;
   onClose: () => void;
 }
 
-const AnnotationOptionsMenu: React.FC<OptionsMenuProps> = ({ x, y, onIntersect, onClose }) => {
+const AnnotationOptionsMenu: React.FC<OptionsMenuProps> = ({ x, y, layer, onIntersect, onClose}) => {
+  const [selectedAnnotation, setSelectedAnnotation] = useState<PolylineObjectType>();
+  const [otherAnnotation, setOtherAnnotation] = useState<PolylineObjectType>();
+
+  const handleIntersect = () => {
+    onIntersect();
+  }
+  const handleClose = () => {
+    document.removeChild(layer);
+    onClose();
+  }
   return (
     <div className={styles.Menu} style={{ top: y, left: x }}>
         <Menu>
             <MenuItem
                 icon="intersection"
                 text="Intersect"
-                onClick={() => {
-                onIntersect();
-                onClose();
-                }}
+                onClick={handleIntersect}
             />
             <MenuItem
                 icon="cross"
                 text="Close"
-                onClick={onClose}
+                onClick={handleClose}
                 style={{ position: 'absolute', top: '0', right: '0' }}
             />
         </Menu>

src/app/src/components/annotations/utils/annotation.tsx

@@ -86,6 +86,7 @@ function GetAnnotationIntersection(
 //   return layer;
 // };
 
+
 export const AttachAnnotationHandlers = (
   drawmap: L.DrawMap,
   annotationGroup: L.FeatureGroup,
@@ -94,46 +95,54 @@ export const AttachAnnotationHandlers = (
   annotationID: string | undefined
 ): PolylineObjectType => {
   let selectedAnnotation: PolylineObjectType | null = null;
-  let intersectedAnnotation: PolylineObjectType | null = null;
+  let otherAnnotation: PolylineObjectType | null = null;
+
+  // Prompt user to select another annotation to check for intersection
+  function handleIntersect(node) {
+    selectedAnnotation = layer;
+    alert("Select another annotation for Annotation Intersection");
+    handleClose(node)
+  };
+
+  // Unmount annotation options menu
+  function handleClose(node) {
+    document.removeChild(node)
+  };
 
-  // Add right-click event listener to the layer
-  layer.on("contextmenu", (event) => {
-    const menu = (
-      <AnnotationOptionsMenu
-        x={event.layerX}
-        y={event.layerY}
-        onIntersect={() => handleIntersect(selectedAnnotation, intersectedAnnotation)}
-        onClose={handleClose}
-      />
-    );
 
-    ReactDOM.render(menu, document.body);
+  // Add right-click event listener to the layer
+  layer.on("contextmenu", (event: L.LeafletMouseEvent) => {
+    const menu = <AnnotationOptionsMenu x={event.latlng.lng} y={event.latlng.lat} onIntersection={handleIntersect} onClose={handleClose} annotation={layer} />;
+    // FIXME
+    document.appendChild(menu);
   });
 
   // Add click event listener to the layer
-  layer.on("click", (event) => {
-    if (!selectedAnnotation) {
-      selectedAnnotation = layer;
-    } else {
-      intersectedAnnotation = layer;
-      const intersectionArea = GetAnnotationIntersection(selectedAnnotation, intersectedAnnotation);
-
-      if (intersectionArea > 0) {
-        // Highlight the intersection area with red
-        intersectedAnnotation.setStyle({ color: "red" });
+  layer.on("click", (event: L.LeafletMouseEvent) => {
+    if (selectedAnnotation) {
+      otherAnnotation = layer;
+      const intersection = GetAnnotationIntersection(
+        selectedAnnotation,
+        otherAnnotation!
+      );
+
+      if (intersection) {
+        // FIXME: Highlight the intersection area with red border on the polygon
+        intersection.setStyle({ color: "red" });
       } else {
         alert("No intersection found");
       }
 
       // Reset selectedAnnotation and intersectedAnnotation for next selection
       selectedAnnotation = null;
-      intersectedAnnotation = null;
+      otherAnnotation = null;
     }
   });
-  
+
   /**
    * Obtain Annotation ID from Layer Attribution of AnnotationID is Undefined
    */
+
   // eslint-disable-next-line no-param-reassign
   (layer.options as any).annotationID = annotationID;