feat: support multipolyline

.idea/workspace.xml

@@ -6,8 +6,10 @@
   <component name="ChangeListManager">
     <list default="true" id="3c7078e7-6f30-4d92-9696-11496f9e6dff" name="Changes" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/api/click.js" beforeDir="false" afterPath="$PROJECT_DIR$/api/click.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/Networking.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/Networking.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/UMap.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/UMap.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -81,7 +83,7 @@
       <workItem from="1700814808669" duration="47000" />
       <workItem from="1700822693197" duration="9493000" />
       <workItem from="1701004587189" duration="3578000" />
-      <workItem from="1701042611758" duration="637000" />
+      <workItem from="1701042611758" duration="3355000" />
     </task>
     <servers />
   </component>

api/click.js

@@ -1,7 +1,9 @@
 const getArgs=(s)=>s.split('@@')
 
 export default function handler(req,res){
+    const {body}=req;
     res.status(200).json({
-        log: `Method: click\nArgs: ${getArgs(req.query.query)}\nStatus: test service, nothing done`,
+        log: `Method: click\nArgs: ${body}\nStatus: returned the raw polylines`,
+        multipolyline: body,
     });
 }

src/App.js

@@ -21,7 +21,7 @@ export default function App() {
     const [version, setVersion] = useState('');
     const [intro, setIntro] = useState('');
     const hs = setInterval(() => {
-        post('handshake', []).then((response) => {
+        post('GET','handshake', []).then((response) => {
             const {version, intro} = response;
             setVersion(version);
             setIntro(intro);

src/Networking.js

@@ -1,11 +1,18 @@
-export function post(method,args) {
+export function post(type,method,args) {
-    const payload=args.join('@@');
     let res = '';
     let ft = async () => {
-        const response = await fetch(`/api/${method}${payload.length?"?query=":""}${payload}`, {
+        let response;
+        if(type==='GET'){
+            const payload=args.join('@@');
+            response = await fetch(`/api/${method}${payload.length?"?query=":""}${payload}`, {
                 method: 'GET',
-            // body: data
             });
+        }else if(type==='POST'){
+            response = await fetch(`/api/${method}`, {
+                method: 'POST',
+                body: JSON.stringify(args),
+            });
+        }
         const response_data = await response.json();
         console.log(`Request "${method}" finished:\n  ${response_data.log.replaceAll('\n','\n  ')}`);
         return response_data;

src/UMap.js

@@ -1,7 +1,6 @@
 import React, {Component, useEffect, useRef, useState} from 'react';
-import * as L from 'leaflet';
 import SearchIcon from '@mui/icons-material/Search';
-import {MapContainer, TileLayer, Marker, Popup, useMap, LayersControl} from 'react-leaflet';
+import {MapContainer, TileLayer, Marker, useMap, Polyline} from 'react-leaflet';
 import {useMapEvents} from 'react-leaflet/hooks';
 import {post} from './Networking';
 import {Autocomplete, CircularProgress, Sheet} from "@mui/joy";
@@ -11,22 +10,30 @@ const AppleParkLoc=[37.334835049999995,-122.01139165956805];
 class Markers extends Component {
     constructor(props) {
         super(props);
-        this.state = {markers: [], candMarkers: [], candEmpty: true};
+        this.state = {markers: [], candMarkers: [], candEmpty: true, polylines: []};
     }
 
     render() {
+        const fillBlueOptions = { fillColor: 'blue' };
+        const pl=this.state.polylines;
         const mks=this.state.markers.map((p, i) => (
-            <Marker interactive={false} position={[p[0], p[1]]} opacity={1.0} />
+            <Marker key={`m`+i} interactive={false} position={[p[0], p[1]]} opacity={1.0} />
         ));
         const cmks=this.state.candMarkers.map((p, i) => (
-            <Marker interactive={false} position={[p[0], p[1]]} opacity={0.5} />
+            <Marker key={`c`+i} interactive={false} position={[p[0], p[1]]} opacity={0.5} />
         ));
-        return mks.concat(cmks);
+        return [
+            ...mks.concat(cmks),
+            pl&&pl.length>1?<Polyline pathOptions={fillBlueOptions} positions={pl} />:<div/>
+        ];
     }
 
     addMarker(lat, lng) {
         this.setState((prev) => ({
-            markers: [...prev.markers, [lat, lng]], candMarkers: prev.candMarkers,candEmpty: prev.candEmpty
+            markers: [...prev.markers, [lat, lng]],
+            candMarkers: prev.candMarkers,
+            candEmpty: prev.candEmpty,
+            polylines: [],  // automatically clear polylines when marker changes
         }));
         this.getFocus();
     }
@@ -35,18 +42,29 @@ class Markers extends Component {
         this.setState((prev) => ({
             candMarkers: [...prev.candMarkers, [lat, lng]],
             markers: prev.markers,
-            candEmpty: false
+            candEmpty: false,
+            polylines: prev.polylines,
         }));
         this.getFocus();
     }
 
     clearMarkers() {
-        this.setState((prev) => ({markers: [], candMarkers: prev.candMarkers, candEmpty: prev.candMarkers}));
+        this.setState((prev) => ({
+            markers: [],
+            candMarkers: prev.candMarkers,
+            candEmpty: prev.candEmpty,
+            polylines: [],
+        }));
         this.getFocus();
     }
 
     clearCandMarkers(){
-        this.setState((prev) => ({markers: prev.markers, candMarkers: [], candEmpty: true}));
+        this.setState((prev) => ({
+            markers: prev.markers,
+            candMarkers: [],
+            candEmpty: true,
+            polylines: prev.polylines,
+        }));
         this.getFocus();
     }
 
@@ -61,6 +79,16 @@ class Markers extends Component {
         }
         this.props.focusUpdater(currentFocus);
     }
+
+    flushPolylines(pl){
+        this.setState((prev)=>({
+            markers: prev.markers,
+            candMarkers: prev.candMarkers,
+            candEmpty: prev.candEmpty,
+            polylines: pl,
+        }));
+        // TODO
+    }
 }
 
 function MapClickHandler({mks}) {
@@ -70,11 +98,13 @@ function MapClickHandler({mks}) {
             const lat = e.latlng.lat, lng = e.latlng.lng;
             console.info(`Clicking on ${lat} ${lng}`);
             mks.current.addMarker(lat, lng);
-            post('click', [lat, lng]).then((response)=>{
+            post('POST','click', mks.current.state.markers).then((response)=>{
-                // TODO
+                // TODO: real functionality
+                const pl=JSON.parse(response.multipolyline);
+                mks.current.flushPolylines(pl);
             }).catch((e)=>{
                 console.error(e);
-                location.reload();
+                // location.reload();
             });
         },
         // TODO