-
-
+
+
+
+
+
+
+
+
+
+
+
Show units vertical offset
{setShowVerticalOffset(!showVerticalOffset)}} toggled={showVerticalOffset} />
+
{
+ showVerticalOffset={showVerticalOffset}
+ onPositionChange={({ x, y, z }) => {
+ if (idx === 0) return;
props.unitPositions[idx] = {
x: ((x - props.unitPositions[0].x - dragDelta.x - containerCenter.x) * zoom) / FT_TO_PX - props.unitPositions[0].x,
y: ((y - props.unitPositions[0].y - dragDelta.y - containerCenter.y) * zoom) / FT_TO_PX - props.unitPositions[0].y,
+ z: z,
};
props.setUnitPositions([...props.unitPositions]);
}}
@@ -226,12 +295,12 @@ export function FormationCanvas(props: {
);
})}
- {zoom > 3 && (
+
-
-
Silhouettes not to scale!
+
+
Double click to reset view
- )}
+
{referenceDistance === 5280 &&
1 NM
}
- {referenceDistance === 5280 * 2 && (
-
- 2 NM
-
- )}
+ {referenceDistance === 5280 * 2 &&
2 NM
}
{referenceDistance < 5280 &&
{referenceDistance} ft
}
diff --git a/frontend/react/src/ui/panels/formationmenu.tsx b/frontend/react/src/ui/panels/formationmenu.tsx
index da7cc8f5..081d9d73 100644
--- a/frontend/react/src/ui/panels/formationmenu.tsx
+++ b/frontend/react/src/ui/panels/formationmenu.tsx
@@ -1,11 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
import { Menu } from "./components/menu";
import { OlDropdown, OlDropdownItem } from "../components/oldropdown";
import { Unit } from "../../unit/unit";
-import { OlRangeSlider } from "../components/olrangeslider";
import { FormationCreationRequestEvent } from "../../events";
-import { computeStandardFormationOffset } from "../../other/utils";
-import { formationTypes } from "../../constants/constants";
+import { computeStandardFormationOffset, fromDCSFormationOffset, toDCSFormationOffset } from "../../other/utils";
+import { formationTypes, UnitState } from "../../constants/constants";
import { FormationCanvas } from "./components/formationcanvas";
export function FormationMenu(props: { open: boolean; onClose: () => void; children?: JSX.Element | JSX.Element[] }) {
@@ -14,10 +13,11 @@ export function FormationMenu(props: { open: boolean; onClose: () => void; child
/* Init state variables */
const [formationType, setFormationType] = useState("echelon-lh");
- const [verticalScale, setVerticalScale] = useState(30);
- const [unitPositions, setUnitPositions] = useState([] as { x: number; y: number }[]);
+ const [unitPositions, setUnitPositions] = useState([] as { x: number; y: number, z: number }[]);
- const verticalRatio = (verticalScale - 50) / 50;
+ useEffect(() => {
+ setFormationType("echelon-lh");
+ }, [props.open])
/* Listen for the setting of a new leader and wingmen and check if the formation is too big */
useEffect(() => {
@@ -40,6 +40,23 @@ export function FormationMenu(props: { open: boolean; onClose: () => void; child
}, [formationType]);
useEffect(setStandardFormation, [formationType]);
+ const setCurrentFormation = useCallback(() => {
+ if (
+ wingmen.every((unit: Unit) => {
+ return unit.getState() === UnitState.FOLLOW && unit.getLeader() === leader;
+ })
+ ) {
+ setUnitPositions([
+ { x: 0, y: 0, z: 0 },
+ ...wingmen.map((unit, idx) => {
+ return fromDCSFormationOffset(unit.getFormationOffset());
+ }),
+ ]);
+ setFormationType("custom");
+ }
+ }, [leader, wingmen]);
+ useEffect(setCurrentFormation, [leader, wingmen]);
+
if (leader && unitPositions.length < [leader, ...wingmen].length) {
/* If more units are added to the group keep the existing positions */
setUnitPositions(
@@ -120,18 +137,6 @@ export function FormationMenu(props: { open: boolean; onClose: () => void; child
Load