henry/CloudSimWebApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: added context menu

Browse Source
This commit is contained in:
hwinkel
2023-10-17 22:42:12 +02:00
parent f0f968b28b
commit 32fc4ba9df
7 changed files with 110 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
webapp/package-lock.json generated
View File

@@ -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",

1
webapp/package.json
View File

@@ -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",

2
webapp/public/index.html
View File

@@ -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

55
webapp/src/App.jsx
View File

@@ -47,40 +47,18 @@ class App extends Component {
if(dataFromServer.Data === "COP")
{
// console.log(this.state.EntityOnFocus);
this.setState((state) => ({
Entities: dataFromServer.Entities
Entities: structuredClone(dataFromServer.Entities)
})
)
}
}
// connect((msg) => {
// console.log("New Message")
// 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);
// });
setInterval(() => {
// this.updateEntities();
}, 1000);
}
@@ -96,13 +74,34 @@ class App extends Component {
client.send(JSON.stringify(msg));
}
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)
});
}
});
}

1
webapp/src/components/OpenSeaMap/Index.js
View File

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

97
webapp/src/components/OpenSeaMap/OpenSeaMap.jsx
View File

@@ -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);
}
@@ -43,43 +45,71 @@ class OpenSeaMap extends Component {
}
// MarkerEventHandler = useMemo(
// (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)
makeIcon(index, entity,props,state)
{
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);
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>

2
webapp/src/components/control/controls.jsx
View File

@@ -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));