ADD: added context menu

webapp/package-lock.json

@@ -12,6 +12,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "bootstrap": "^5.3.2",
+        "leaflet-contextmenu": "^1.4.0",
         "milsymbol": "^2.2.0",
         "react": "^18.2.0",
         "react-bootstrap": "^2.9.0",
@@ -11837,6 +11838,11 @@
       "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
       "peer": true
     },
+    "node_modules/leaflet-contextmenu": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/leaflet-contextmenu/-/leaflet-contextmenu-1.4.0.tgz",
+      "integrity": "sha512-BXASCmJ5bLkuJGDCpWmvGqhZi5AzeOY0IbQalfkgBcMAMfAOFSvD4y0gIQxF/XzEyLkjXaRiUpibVj4+Cf3tUA=="
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",

webapp/package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.3.2",
+    "leaflet-contextmenu": "^1.4.0",
     "milsymbol": "^2.2.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.0",

webapp/public/index.html

@@ -9,6 +9,8 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link rel="stylesheet" href="https://rawgit.com/aratcliffe/Leaflet.contextmenu/master/dist/leaflet.contextmenu.css"> 
+
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

webapp/src/App.jsx

@@ -46,42 +46,20 @@ class App extends Component {
 
       if(dataFromServer.Data === "COP")
       {
-
+        
+        // console.log(this.state.EntityOnFocus);
         this.setState((state) => ({
-         Entities: dataFromServer.Entities 
+         Entities: structuredClone(dataFromServer.Entities)
         })
         
         )
       }
       
     }
-
+    setInterval(() => {
-      // connect((msg) => {
+      // this.updateEntities();
-      //     console.log("New Message")
+    }, 1000);
-          
-      //     var jsonMSG;
-      //     try {
-      //       jsonMSG = JSON.parse(msg.data);
-      //     } catch (error) {
-      //       console.log(error);
-      //     }
-          
-      //     if(jsonMSG["Type"] == "COP"){
-      //       console.log(msg.data)
-      //       var Entities =  Array.from(jsonMSG["Entities"])
-      //       if(Array.isArray(Entities))
-      //       {
-      //         this.setState({
-      //           Entities:Entities
-      //         });
-      //       }
-      //     }
-
   
-  
-    //   console.log(this.state.Entities);
-    // });
-    
 
   }
 
@@ -96,13 +74,34 @@ class App extends Component {
       client.send(JSON.stringify(msg));
     }
 
-    setEntityOnFocus(Entity)
+    getEntityFromID(Entities, SelectedEntity)
     {
+      // console.log(Entities);
+    }
 
+    setEntityOnFocus(Entity) 
+    {
+      this.getEntityFromID(this.state.Entities,Entity)
       // console.log(Entity);
       this.setState({
         EntityOnFocus: Entity
       });
+      this.state.Entities.forEach((element, index) => {
+        console.log(element);
+        if(element.id === Entity.EntityID)
+        {
+          var tmpList = structuredClone(this.state.Entities);
+          tmpList[index].onFocus = true;  
+          if(Entity.NewPos !== undefined)
+          {
+            tmpList[index].Position = Entity.NewPos        
+          }
+          this.setState({
+            Entities: structuredClone(tmpList)
+          });
+        }
+      });
+
     }
 
     

webapp/src/components/OpenSeaMap/Index.js

@@ -1,3 +1,4 @@
 import OpenSeaMap from "./OpenSeaMap.jsx.js";
 
+
 export default OpenSeaMap;

webapp/src/components/OpenSeaMap/OpenSeaMap.jsx

@@ -1,11 +1,12 @@
 
 // import { useMapEvents } from 'react-leaflet/hooks'
 import React, { Component } from "react";
-import { MapContainer, TileLayer,Marker, Popup, Tooltip,useMapEvents } from 'react-leaflet'
+import { MapContainer, TileLayer,Marker, Popup, Tooltip,useMapEvents,contextmenu } from 'react-leaflet'
 import { friend,Hostile, iconShip,createIcon } from "./icon";
 import "./OpenSeaMap.scss";
 import {w3cwebsocket as W3CWebSocket} from "websocket";
 import ContainerDimensions  from 'react-container-dimensions';
+import {} from "leaflet-contextmenu";
 
 
 class OpenSeaMap extends Component {
@@ -24,6 +25,7 @@ class OpenSeaMap extends Component {
 
   componentDidMount() {
     window.addEventListener("resize", this.updateDimensions.bind(this))
+    console.log(this.state.EntityOnFocus);
 
 
   }
@@ -42,44 +44,72 @@ class OpenSeaMap extends Component {
     console.log("hello world");
   }
 
+  
 
-  // MarkerEventHandler = useMemo(
+  makeIcon(index, entity,props,state)
-  //   (e) => ({
-  //     dragend() {
-  //       // const marker = markerRef.current
-  //       // if (marker != null) {
-  //       //   // setPosition(marker.getLatLng())
-  //       // }
-  //       console.log(e)
-  //     },
-  //     click: (e) =>
-  //     {
-  //       this.props.setEntityOnFocus(e.target.options.data);
-
-  //     }
-  //   }),
-  //   [],
-
-  //  )
-
-  makeIcon(index, entity)
   {
+    var isOnFocus = false;
+    if(this.state.EntityOnFocus !== undefined){
+      console.log(entity.id+ " " , this.state.EntityOnFocus);
+
+      if(entity.id === this.state.EntityOnFocus.EntityID)
+      {isOnFocus = true
+        // if(this.state.EntityOnFocus.NewPos !== undefined)
+        // {
+        //  entity.pos =  this.state.EntityOnFocus.NewPos;
+        // }
+      
+      }
+
+    }
     var icon;
     icon = createIcon(entity.Type,entity.Side)
     return (
       <Marker name={entity.Name} key={index} icon={icon} position={entity.Position} data={entity.id}
-      draggable={true} 
+      draggable={isOnFocus? true : false}
-      
+      contextmenu={true}
+      contextmenuWidth={140}
+
+      contextmenuItems={[{
+        text:"Edit",
+        index:0,
+        callback: function() {
+          // this.setState({
+          //   EntityOnFocus:entity.id
+          // })
+          var Ent = {
+            EntityID : entity.id,
+            NewPos : undefined   
+          }
+          state.EntityOnFocus = Ent;
+          props.setEntityOnFocus(Ent)
+          console.log(state.EntityOnFocus);
+        }
+      }, {
+        text:"Delete",
+        // separator: true,
+        index: 1
+    }, {
+      text:"Exit",
+      // separator: true,
+      index: 2
+  }]}
+  //     contextmenuItems: [{
+  //   text: 'Circle 1',
+  //   callback: function() {
+  //     circleContextClick(circle1);
+  //   }
+  // }]
       eventHandlers={{
         click: (e) => {
-          // console.log(e.target.options.data);  // will print 'FooBar' in console
+          console.log(e.target);  
           var Ent = {
-            Name :  e.target.options.data,
+            EntityID :  e.target.options.data,
             NewPos : undefined
 
           }
           this.setState((state) =>({
-            EntityOnFocus: e.target.options.data
+            EntityOnFocus: Ent
           }))
           this.props.setEntityOnFocus(Ent);
 
@@ -88,20 +118,24 @@ class OpenSeaMap extends Component {
         dragend: (e) =>
         { 
           var Ent = {
-            Name :  e.target.options.data,
+            EntityID :  e.target.options.data,
             NewPos : [e.target._latlng.lat,e.target._latlng.lng]
 
           }
           this.setState((state) =>({
-            EntityOnFocus: e.target.options.data
+            EntityOnFocus: Ent
           }))
+          
           this.props.setEntityOnFocus(Ent);
-
           // console.log(e.target);
-
+          
           // console.log(e.target._latlng);
-
+          
-        }
+        },
+        // contextmenu: (e) => 
+        // {
+        //   console.log("right click");
+        // }
       }} 
       // eventHandlers={this.MarkerEventHandler}
        >
@@ -142,8 +176,11 @@ const  LocationFinderDummy = (props) => {
     // ));
 
     return (
+      
       <div className='map' style={{ height: this.state.height }} >
-       <MapContainer MapContainer center={[54, 11]} zoom={6} scrollWheelZoom={true}>
+       <MapContainer  center={[54, 11]} zoom={6} scrollWheelZoom={true} contextmenu={false}
+       
+       >
        <LocationFinderDummy props ={this.props} />
 
         <TileLayer
@@ -152,7 +189,7 @@ const  LocationFinderDummy = (props) => {
           url="https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png" />    
           {/* {positions} */}
           {this.props.Entities.map((pos, index) => (
-            this.makeIcon(index,pos)
+            this.makeIcon(index,pos,this.props,this.state)
         ))}
       </MapContainer>
        </div>

webapp/src/components/control/controls.jsx

@@ -53,7 +53,7 @@ state = {
         // console.log(tmp);
 
         Entities.map((val) => {
-          if(val.id === SelectedEntity.Name)
+          if(val.id === SelectedEntity.EntityID)
           {
              tmp = val
             // tmp = JSON.parse(JSON.stringify(val));