- {typeof action === "string" || typeof action === "number" ? action : }
+ {typeof action === "string" || typeof action === "number" ? (
+ action
+ ) : (
+
+ )}
{idx < control.actions.length - 1 && typeof control.actions[idx + 1] === "string" &&
+
}
{idx < control.actions.length - 1 && typeof control.actions[idx + 1] === "number" &&
x
}
diff --git a/frontend/react/src/ui/panels/maptoolbar.tsx b/frontend/react/src/ui/panels/maptoolbar.tsx
new file mode 100644
index 00000000..5061b0ed
--- /dev/null
+++ b/frontend/react/src/ui/panels/maptoolbar.tsx
@@ -0,0 +1,275 @@
+import React, { useEffect, useRef, useState } from "react";
+import { ContextActionSet } from "../../unit/contextactionset";
+import { OlStateButton } from "../components/olstatebutton";
+import { getApp } from "../../olympusapp";
+import { ContextAction, ContextActionOptions } from "../../unit/contextaction";
+import { CONTEXT_ACTION_COLORS, ContextActionTarget, MAP_OPTIONS_DEFAULTS } from "../../constants/constants";
+import { FaChevronDown, FaChevronUp } from "react-icons/fa6";
+import { OlympusState } from "../../constants/constants";
+import {
+ AppStateChangedEvent,
+ ContextActionChangedEvent,
+ ContextActionSetChangedEvent,
+ CopiedUnitsEvents,
+ MapOptionsChangedEvent,
+ PasteEnabledChangedEvent,
+ SelectedUnitsChangedEvent,
+ SelectionClearedEvent,
+ SelectionEnabledChangedEvent,
+ ShortcutsChangedEvent,
+} from "../../events";
+import { faCopy, faObjectGroup, faPaste } from "@fortawesome/free-solid-svg-icons";
+import { Shortcut } from "../../shortcut/shortcut";
+import { ShortcutOptions, UnitData } from "../../interfaces";
+import { Unit } from "../../unit/unit";
+
+export function MapToolBar(props: {}) {
+ const [appState, setAppState] = useState(OlympusState.IDLE);
+ const [contextActionSet, setcontextActionSet] = useState(null as ContextActionSet | null);
+ const [contextAction, setContextAction] = useState(null as ContextAction | null);
+ const [scrolledTop, setScrolledTop] = useState(true);
+ const [scrolledBottom, setScrolledBottom] = useState(false);
+ const [mapOptions, setMapOptions] = useState(MAP_OPTIONS_DEFAULTS);
+ const [selectionEnabled, setSelectionEnabled] = useState(false);
+ const [pasteEnabled, setPasteEnabled] = useState(false);
+ const [controller, setController] = useState(new AbortController());
+ const [shortcuts, setShortcuts] = useState(
+ {} as {
+ [key: string]: Shortcut;
+ }
+ );
+ const [selectedUnits, setSelectedUnits] = useState([] as Unit[]);
+ const [copiedUnitsData, setCopiedUnitsData] = useState([] as UnitData[]);
+
+ /* Initialize the "scroll" position of the element */
+ var scrollRef = useRef(null);
+ useEffect(() => {
+ if (scrollRef.current) onScroll(scrollRef.current);
+ });
+
+ useEffect(() => {
+ AppStateChangedEvent.on((state, subState) => setAppState(state));
+ ContextActionSetChangedEvent.on((contextActionSet) => setcontextActionSet(contextActionSet));
+ ContextActionChangedEvent.on((contextAction) => setContextAction(contextAction));
+ MapOptionsChangedEvent.on((mapOptions) => setMapOptions(mapOptions));
+ SelectionEnabledChangedEvent.on((selectionEnabled) => setSelectionEnabled(selectionEnabled));
+ PasteEnabledChangedEvent.on((pasteEnabled) => setPasteEnabled(pasteEnabled));
+ ShortcutsChangedEvent.on((shortcuts) => setShortcuts({ ...shortcuts }));
+ SelectedUnitsChangedEvent.on((selectedUnits) => setSelectedUnits(selectedUnits));
+ SelectionClearedEvent.on(() => setSelectedUnits([]));
+ CopiedUnitsEvents.on((unitsData) => setCopiedUnitsData(unitsData));
+ }, []);
+
+ function onScroll(el) {
+ const sl = el.scrollTop;
+ const sr = el.scrollHeight - el.scrollTop - el.clientHeight;
+
+ sl < 1 && !scrolledTop && setScrolledTop(true);
+ sl > 1 && scrolledTop && setScrolledTop(false);
+
+ sr < 1 && !scrolledBottom && setScrolledBottom(true);
+ sr > 1 && scrolledBottom && setScrolledBottom(false);
+ }
+
+ function shortcutCombination(options: ShortcutOptions | ContextActionOptions) {
+ if (options === undefined) return <>;
+ return (
+ <>
+ {options.ctrlKey && (
+
+ Ctrl
+
+ )}
+ {options.altKey && (
+
+ Alt
+
+ )}
+ {options.shiftKey && (
+
+ Shift
+
+ )}
+
+ {options.code && (
+
+ {options.code?.replace("Key", "")}
+
+ )}
+
+ );
+ }
+
+ let reorderedActions: ContextAction[] = contextActionSet
+ ? Object.values(contextActionSet.getContextActions()).sort((a: ContextAction, b: ContextAction) => (a.getOptions().type < b.getOptions().type ? -1 : 1))
+ : [];
+
+ return (
+ <>
+ <>
+
+ {!scrolledTop && (
+
+ )}
+
onScroll(ev.target)} ref={scrollRef}>
+ <>
+
+
+ {shortcutCombination(shortcuts["toggleSelectionEnabled"]?.getOptions())}
+ Box selection
+
+ }
+ tooltipPosition="side"
+ onClick={() => {
+ getApp().getMap().setSelectionEnabled(!selectionEnabled);
+ if (!selectionEnabled) {
+ getApp()
+ .getMap()
+ .getContainer()
+ .addEventListener(
+ "mouseup",
+ () => {
+ getApp().getMap().setSelectionEnabled(false);
+ },
+ { once: true, signal: controller.signal }
+ );
+ } else {
+ controller.abort();
+ }
+ }}
+ />
+
+ {selectedUnits.length > 0 && (
+
+
+ {shortcutCombination(shortcuts["copyUnits"]?.getOptions())}
+ Copy selected units
+
+ }
+ tooltipPosition="side"
+ onClick={() => {
+ getApp().getUnitsManager().copy(selectedUnits);
+ }}
+ />
+
+ )}
+ {copiedUnitsData.length > 0 && (
+
+
+ {shortcutCombination(shortcuts["pasteUnits"]?.getOptions())}
+ Paste copied units
+
+ } tooltipPosition="side" onClick={() => {
+ getApp().getMap().setPasteEnabled(!pasteEnabled)
+ }} />
+
+ )}
+
+
+ {reorderedActions.map((contextActionIt: ContextAction) => {
+ return (
+
+ }
+ tooltipPosition="side"
+ buttonColor={CONTEXT_ACTION_COLORS[contextActionIt.getOptions().type ?? 0]}
+ onClick={() => {
+ if (contextActionIt.getTarget() === ContextActionTarget.NONE) {
+ contextActionIt.executeCallback(null, null);
+ } else {
+ contextActionIt !== contextAction ? getApp().getMap().setContextAction(contextActionIt) : getApp().getMap().setContextAction(null);
+ }
+ }}
+ />
+