Upgrade dependencies

Added combine feature to Map
cedbossneo · Jun 21, 2024 · 424675a · 424675a
1 parent 110bb56
commit 424675a
Show file tree

Hide file tree

Showing 11 changed files with 1,877 additions and 2,230 deletions.
diff --git a/web/package.json b/web/package.json
@@ -11,44 +11,46 @@
     "generate:api": "swagger-typescript-api -p ../docs/swagger.json -o src/api"
   },
   "dependencies": {
-    "@formily/antd-v5": "^1.1.7",
-    "@formily/core": "^2.3.0",
-    "@formily/react": "^2.3.0",
-    "@mapbox/mapbox-gl-draw": "^1.3.0",
+    "@formily/antd-v5": "^1.2.1",
+    "@formily/core": "^2.3.1",
+    "@formily/react": "^2.3.1",
+    "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@microsoft/fetch-event-source": "^2.0.1",
-    "@turf/area": "^6.5.0",
-    "@turf/centroid": "^6.5.0",
-    "@types/mapbox-gl": "^2.7.12",
-    "@types/mapbox__mapbox-gl-draw": "^1.2.3",
-    "antd": "^5.10.1",
+    "@turf/area": "^7.0.0",
+    "@turf/centroid": "^7.0.0",
+    "@turf/union": "^7.0.0",
+    "@types/mapbox-gl": "^3.1.0",
+    "@types/mapbox__mapbox-gl-draw": "^1.4.6",
+    "antd": "^5.18.3",
     "localforage": "^1.10.0",
-    "mapbox-gl": "^2.15.0",
-    "match-sorter": "^6.3.1",
-    "moment": "^2.29.4",
+    "mapbox-gl": "^3.4.0",
+    "match-sorter": "^6.3.4",
+    "moment": "^2.30.1",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
     "react-joystick-component": "^6.2.1",
-    "react-map-gl": "^7.1.3",
-    "react-router-dom": "^6.14.1",
-    "react-terminal-ui": "^1.0.5",
-    "react-use-websocket": "4.0.0",
-    "styled-components": "^6.0.4",
+    "react-map-gl": "^7.1.7",
+    "react-router-dom": "^6.23.1",
+    "react-terminal-ui": "^1.3.0",
+    "react-use-websocket": "4.8.1",
+    "styled-components": "^6.1.11",
     "usng.js": "^0.4.5"
   },
   "devDependencies": {
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@types/three": "^0.154.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/three": "^0.165.0",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
-    "@vitejs/plugin-react": "^4.0.1",
-    "@welldone-software/why-did-you-render": "^7.0.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@welldone-software/why-did-you-render": "^8.0.3",
     "eslint": "^8.44.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.1",
-    "swagger-typescript-api": "^13.0.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.0"
+    "swagger-typescript-api": "^13.0.8",
+    "typescript": "^5.5.2",
+    "vite": "^5.3.1"
   }
 }
diff --git a/web/src/components/DrawControl.tsx b/web/src/components/DrawControl.tsx
@@ -10,6 +10,7 @@ type DrawControlProps = ConstructorParameters<typeof MapboxDraw>[0] & {
 
     onCreate: (evt: any) => void;
     onUpdate: (evt: any) => void;
+    onCombine: (evt: any) => void;
     onDelete: (evt: any) => void;
 };
 
@@ -19,11 +20,13 @@ export default function DrawControl(props: DrawControlProps) {
         ({map}) => {
             map.on('draw.create', props.onCreate);
             map.on('draw.update', props.onUpdate);
+            map.on('draw.combine', props.onCombine);
             map.on('draw.delete', props.onDelete);
         },
         ({map}) => {
             map.off('draw.create', props.onCreate);
             map.off('draw.update', props.onUpdate);
+            map.off('draw.combine', props.onCombine);
             map.off('draw.delete', props.onDelete);
         }
         ,
@@ -59,5 +62,7 @@ DrawControl.defaultProps = {
     onUpdate: () => {
     },
     onDelete: () => {
-    }
+    },
+    onCombine: () => {
+    },
 };
diff --git a/web/src/components/FlashBoardComponent.tsx b/web/src/components/FlashBoardComponent.tsx
@@ -1,8 +1,18 @@
 import {App, Button, Col, Modal, Row} from "antd";
-import {useEffect, useState} from "react";
+import {useEffect, useMemo, useState} from "react";
 import {fetchEventSource} from "@microsoft/fetch-event-source";
-import {createSchemaField, FormProvider} from "@formily/react";
-import {Checkbox, FormButtonGroup, FormItem, FormLayout, Input, NumberPicker, Select, Submit} from "@formily/antd-v5";
+import {createSchemaField} from "@formily/react";
+import {
+    Checkbox,
+    Form,
+    FormButtonGroup,
+    FormItem,
+    FormLayout,
+    Input,
+    NumberPicker,
+    Select,
+    Submit
+} from "@formily/antd-v5";
 import {StyledTerminal} from "./StyledTerminal.tsx";
 import Terminal, {ColorMode, TerminalOutput} from "react-terminal-ui";
 import {createForm, onFieldValueChange} from "@formily/core";
@@ -44,21 +54,22 @@ type Config = {
     perimeterWire: boolean
 }
 
-const form = createForm<Config>({
-    effects() {
-        onFieldValueChange('boardType', (field) => {
-            form.setFieldState('*(panelType,tickPerM,wheelBase,branch,repository,debugType,disableEmergency,maxMps,maxChargeCurrent,limitVoltage150MA,maxChargeVoltage,batChargeCutoffVoltage,oneWheelLiftEmergencyMillis,bothWheelsLiftEmergencyMillis,tiltEmergencyMillis,stopButtonEmergencyMillis,playButtonClearEmergencyMillis,externalImuAcceleration,externalImuAngular,masterJ18,perimeterWire)', (state) => {
-                //For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
-                state.display = field.value !== "BOARD_VERMUT_YARDFORCE500" ? "visible" : "hidden";
-            })
-            form.setFieldState('*(version,file)', (state) => {
-                //For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
-                state.display = field.value === "BOARD_VERMUT_YARDFORCE500" ? "visible" : "hidden";
-            })
-        })
-    },
-})
 export const FlashBoardComponent = (props: { onNext: () => void }) => {
+    const form = useMemo(() => createForm({
+        validateFirst: true,
+        effects: (form) => {
+            onFieldValueChange('boardType', (field) => {
+                form.setFieldState('*(panelType,tickPerM,wheelBase,branch,repository,debugType,disableEmergency,maxMps,maxChargeCurrent,limitVoltage150MA,maxChargeVoltage,batChargeCutoffVoltage,oneWheelLiftEmergencyMillis,bothWheelsLiftEmergencyMillis,tiltEmergencyMillis,stopButtonEmergencyMillis,playButtonClearEmergencyMillis,externalImuAcceleration,externalImuAngular,masterJ18,perimeterWire)', (state) => {
+                    //For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
+                    state.display = field.value !== "BOARD_VERMUT_YARDFORCE500" ? "visible" : "hidden";
+                })
+                form.setFieldState('*(version,file)', (state) => {
+                    //For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
+                    state.display = field.value === "BOARD_VERMUT_YARDFORCE500" ? "visible" : "hidden";
+                })
+            })
+        },
+    }), [])
     const guiApi = useApi();
     const {notification} = App.useApp();
     const [data, setData] = useState<string[]>()
@@ -159,7 +170,7 @@ export const FlashBoardComponent = (props: { onNext: () => void }) => {
             form.setLoading(false)
         }
     };
-    return <FormProvider form={form}>
+    return <Form form={form}>
         <Row>
             <Col span={24} style={{height: "55vh", overflowY: "auto"}}>
                 <FormLayout layout="vertical">
@@ -462,5 +473,5 @@ export const FlashBoardComponent = (props: { onNext: () => void }) => {
                     <Button onClick={props.onNext}>Skip</Button>
                 </FormButtonGroup>
             </Col> </Row>
-    </FormProvider>;
+    </Form>;
 };
diff --git a/web/src/components/MowerStatus.tsx b/web/src/components/MowerStatus.tsx
@@ -9,11 +9,13 @@ export const MowerStatus = () => {
         <Col><Statistic valueStyle={{color: "#3f8600", fontSize: "14px"}}
                         value={stateRenderer(highLevelStatus.StateName)}/></Col>
         <Col><Statistic
-            prefix={<WifiOutlined style={{color: (highLevelStatus.GpsQualityPercent ?? 0) > 0 ? "green" : "red"}}/>}
+            prefix={<WifiOutlined style={{color: (highLevelStatus.GpsQualityPercent ?? 0) > 0 ? "green" : "red"}}
+            />}
             valueStyle={{fontSize: "14px"}} precision={0}
             value={(highLevelStatus.GpsQualityPercent ?? 0) * 100}
             suffix={"%"}/></Col>
-        <Col><Statistic prefix={<PoweroffOutlined style={{color: highLevelStatus.IsCharging ? "green" : undefined}}/>}
+        <Col><Statistic prefix={<PoweroffOutlined style={{color: highLevelStatus.IsCharging ? "green" : undefined}}
+        />}
                         valueStyle={{fontSize: "14px"}} precision={2}
                         value={(highLevelStatus.BatteryPercent ?? 0) * 100}
                         formatter={progressFormatterSmall}/></Col>

diff --git a/web/src/components/SettingsComponent.tsx b/web/src/components/SettingsComponent.tsx
@@ -122,49 +122,16 @@ export OM_WHEEL_TICKS_PER_M=300.0
 # Heatmap UNSET or om_gps_accuracy
 export OM_HEATMAP_SENSOR_IDS=om_gps_accuracy
  */
-import {createSchemaField, FormProvider} from "@formily/react";
-import {FormButtonGroup, FormItem, FormLayout, Input, NumberPicker, Select, Switch} from "@formily/antd-v5";
+import {createSchemaField} from "@formily/react";
+import {Form, FormButtonGroup, FormItem, FormLayout, Input, NumberPicker, Select, Switch} from "@formily/antd-v5";
 import {useApi} from "../hooks/useApi.ts";
 import {App, Card, Col, Row} from "antd";
-import React, {CSSProperties, useEffect} from "react";
-import {createForm, Form, onFieldValueChange} from "@formily/core";
+import React, {CSSProperties, useEffect, useMemo} from "react";
+import type {Form as FormType} from "@formily/core";
+import {createForm, onFieldValueChange} from "@formily/core";
 
 import {SettingsConfig, SettingsDesc, SettingValueType, useSettings} from "../hooks/useSettings.ts";
 
-const form = createForm<SettingsConfig>({
-    effects() {
-        onFieldValueChange('OM_MQTT_ENABLE', (field) => {
-            form.setFieldState('*(OM_MQTT_HOSTNAME,OM_MQTT_PORT,OM_MQTT_USER,OM_MQTT_PASSWORD)', (state) => {
-                //For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
-                state.display = field.value ? "visible" : "hidden";
-            })
-        })
-        onFieldValueChange('system.mqtt.enabled', (field) => {
-            form.setFieldState('*(system.mqtt.host,system.mqtt.prefix)', (state) => {
-                //For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
-                state.display = field.value ? "visible" : "hidden";
-            })
-        })
-        onFieldValueChange('system.homekit.enabled', (field) => {
-            form.setFieldState('*(system.homekit.pincode)', (state) => {
-                //For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
-                state.display = field.value ? "visible" : "hidden";
-            })
-        })
-        onFieldValueChange('system.map.enabled', (field) => {
-            form.setFieldState('*(system.map.tileServer,system.map.tileUri)', (state) => {
-                //For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
-                state.display = field.value ? "visible" : "hidden";
-            })
-        })
-        onFieldValueChange('OM_USE_NTRIP', (field) => {
-            form.setFieldState('*(OM_NTRIP_PORT,OM_NTRIP_USER,OM_NTRIP_PASSWORD,OM_NTRIP_ENDPOINT)', (state) => {
-                //For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
-                state.display = field.value ? "visible" : "hidden";
-            })
-        })
-    },
-})
 const SchemaField = createSchemaField({
     components: {
         Input,
@@ -174,7 +141,50 @@ const SchemaField = createSchemaField({
         NumberPicker,
     },
 })
-export const SettingsComponent: React.FC<{ actions?: (form: Form<SettingsConfig>, save: (values: SettingsConfig) => Promise<void>, restartOM: () => Promise<void>, restartGUI: () => Promise<void>) => React.ReactElement[], contentStyle?: CSSProperties }> = (props) => {
+export const SettingsComponent: React.FC<{
+    actions?: (form: FormType<SettingsConfig>, save: (values: SettingsConfig) => Promise<void>, restartOM: () => Promise<void>, restartGUI: () => Promise<void>) => React.ReactElement[],
+    contentStyle?: CSSProperties
+}> = (props) => {
+    const form = useMemo(
+        () =>
+            createForm<SettingsConfig>({
+                validateFirst: true,
+                effects: (form) => {
+                    onFieldValueChange('OM_MQTT_ENABLE', (field) => {
+                        form.setFieldState('*(OM_MQTT_HOSTNAME,OM_MQTT_PORT,OM_MQTT_USER,OM_MQTT_PASSWORD)', (state) => {
+                            //For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
+                            state.display = field.value ? "visible" : "hidden";
+                        })
+                    })
+                    onFieldValueChange('system.mqtt.enabled', (field) => {
+                        form.setFieldState('*(system.mqtt.host,system.mqtt.prefix)', (state) => {
+                            //For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
+                            state.display = field.value ? "visible" : "hidden";
+                        })
+                    })
+                    onFieldValueChange('system.homekit.enabled', (field) => {
+                        form.setFieldState('*(system.homekit.pincode)', (state) => {
+                            //For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
+                            state.display = field.value ? "visible" : "hidden";
+                        })
+                    })
+                    onFieldValueChange('system.map.enabled', (field) => {
+                        form.setFieldState('*(system.map.tileServer,system.map.tileUri)', (state) => {
+                            //For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
+                            state.display = field.value ? "visible" : "hidden";
+                        })
+                    })
+                    onFieldValueChange('OM_USE_NTRIP', (field) => {
+                        form.setFieldState('*(OM_NTRIP_PORT,OM_NTRIP_USER,OM_NTRIP_PASSWORD,OM_NTRIP_ENDPOINT)', (state) => {
+                            //For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
+                            state.display = field.value ? "visible" : "hidden";
+                        })
+                    })
+                },
+            }),
+        [],
+    )
+
     const guiApi = useApi()
     const {notification} = App.useApp();
     const {settings, setSettings, loading} = useSettings()
@@ -249,7 +259,7 @@ export const SettingsComponent: React.FC<{ actions?: (form: Form<SettingsConfig>
     }, {} as Record<string, string[]>)
 
     return <Row>
-        <FormProvider form={form}>
+        <Form form={form} style={{width: '100%'}}>
             <Col span={24} style={{height: '80vh', overflowY: 'auto', ...props.contentStyle}}>
                 <FormLayout layout="vertical">
                     {
@@ -336,10 +346,10 @@ export const SettingsComponent: React.FC<{ actions?: (form: Form<SettingsConfig>
                 </FormLayout>
             </Col>
             <Col span={24} style={{position: "fixed", bottom: 20}}>
-                <FormButtonGroup>
+                <FormButtonGroup.FormItem>
                     {props.actions && props.actions(form, setSettings, restartOpenMower, restartGui)}
-                </FormButtonGroup>
+                </FormButtonGroup.FormItem>
             </Col>
-        </FormProvider>
+        </Form>
     </Row>
 }
diff --git a/web/src/components/utils.tsx b/web/src/components/utils.tsx
@@ -2,9 +2,11 @@ import {CheckCircleTwoTone, CloseCircleTwoTone} from "@ant-design/icons";
 import {Progress} from "antd";
 
 export const booleanFormatter = (value: any) => (value === "On" || value === "Yes") ?
-    <CheckCircleTwoTone twoToneColor={"#01d30d"}/> : <CloseCircleTwoTone twoToneColor={"red"}/>;
+    <CheckCircleTwoTone twoToneColor={"#01d30d"}/> : <CloseCircleTwoTone
+        twoToneColor={"red"}/>;
 export const booleanFormatterInverted = (value: any) => (value === "On" || value === "Yes") ?
-    <CheckCircleTwoTone twoToneColor={"red"}/> : <CloseCircleTwoTone twoToneColor={"#01d30d"}/>;
+    <CheckCircleTwoTone twoToneColor={"red"}/> : <CloseCircleTwoTone
+        twoToneColor={"#01d30d"}/>;
 export const stateRenderer = (value: string | undefined) => {
     switch (value) {
         case "IDLE":

diff --git a/web/src/global.d.ts b/web/src/global.d.ts
@@ -0,0 +1,13 @@
+import 'react'
+
+declare module 'react' {
+    interface HTMLAttributes<T> {
+        onPointerEnterCapture?: (e: React.PointerEvent<T>) => void
+        onPointerLeaveCapture?: (e: React.PointerEvent<T>) => void
+    }
+
+    interface RefAttributes<T> {
+        onPointerEnterCapture?: (e: React.PointerEvent<T>) => void
+        onPointerLeaveCapture?: (e: React.PointerEvent<T>) => void
+    }
+}