lee/wanderer
1
0
Fork 0
mirror of https://github.com/wanderer-industries/wanderer synced 2025-12-11 18:26:04 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(Map): Added delete systems hotkey

Browse Source
This commit is contained in:
Dmitry Popov
2025-02-26 09:22:57 +01:00
parent e1e9b4c2e8
commit b052943e34
2 changed files with 29 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
assets/js/hooks/Mapper/components/map/Map.tsx
View File

@@ -2,7 +2,6 @@ import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo }
import ReactFlow, {
Background,
Edge,
EdgeChange,
MiniMap,
Node,
NodeChange,
@@ -79,11 +78,12 @@ const edgeTypes = {
floating: SolarSystemEdge,
};
export const MAP_ROOT_ID = 'MAP_ROOT_ID';
interface MapCompProps {
refn: ForwardedRef<MapHandlers>;
onCommand: OutCommandHandler;
onSelectionChange: OnMapSelectionChange;
onManualDelete(systems: string[]): void;
onConnectionInfoClick?(e: SolarSystemConnection): void;
onAddSystem?: OnMapAddSystemCallback;
onSelectionContextMenu?: NodeSelectionMouseHandler;
@@ -105,7 +105,6 @@ const MapComp = ({
onSystemContextMenu,
onConnectionInfoClick,
onSelectionContextMenu,
onManualDelete,
isShowMinimap,
showKSpaceBG,
isThickConnections,
@@ -114,7 +113,7 @@ const MapComp = ({
theme,
onAddSystem,
}: MapCompProps) => {
const { getNode, getNodes } = useReactFlow();
const { getNodes } = useReactFlow();
const [nodes, , onNodesChange] = useNodesState<Node<SolarSystemRawType>>(initialNodes);
const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>>(initialEdges);
@@ -187,8 +186,6 @@ const MapComp = ({
const handleNodesChange = useCallback(
(changes: NodeChange[]) => {
// const systemsIdsToRemove: string[] = [];
// prevents single node deselection on background / same node click
// allows deseletion of all nodes if multiple are currently selected
if (changes.length === 1 && changes[0].type == 'select' && changes[0].selected === false) {
@@ -197,30 +194,11 @@ const MapComp = ({
const nextChanges = changes.reduce((acc, change) => {
return [...acc, change];
// if (change.type !== 'remove') {
// }
// const node = getNode(change.id);
// if (!node) {
// return [...acc, change];
// }
// if (node.data.locked) {
// return acc;
// }
// systemsIdsToRemove.push(node.data.id);
// return [...acc, change];
}, [] as NodeChange[]);
// if (systemsIdsToRemove.length > 0) {
// onManualDelete(systemsIdsToRemove);
// }
onNodesChange(nextChanges);
},
[getNode, getNodes, onManualDelete, onNodesChange],
[getNodes, onNodesChange],
);
useEffect(() => {
@@ -233,7 +211,10 @@ const MapComp = ({
return (
<>
<div className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}>
<div
data-window-id={MAP_ROOT_ID}
className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}
>
<ReactFlow
nodes={nodes}
edges={edges}

27
assets/js/hooks/Mapper/components/mapWrapper/MapWrapper.tsx
View File

@@ -1,4 +1,4 @@
import { Map } from '@/hooks/Mapper/components/map/Map.tsx';
import { Map, MAP_ROOT_ID } from '@/hooks/Mapper/components/map/Map.tsx';
import { useCallback, useRef, useState } from 'react';
import { OutCommand, OutCommandHandler, SolarSystemConnection } from '@/hooks/Mapper/types';
import { MapRootData, useMapRootState } from '@/hooks/Mapper/mapRootProvider';
@@ -15,7 +15,7 @@ import { Connections } from '@/hooks/Mapper/components/mapRootContent/components
import { ContextMenuSystemMultiple, useContextMenuSystemMultipleHandlers } from '../contexts/ContextMenuSystemMultiple';
import { getSystemById } from '@/hooks/Mapper/helpers';
import { Commands } from '@/hooks/Mapper/types/mapHandlers.ts';
import { Node, XYPosition } from 'reactflow';
import { Node, useReactFlow, XYPosition } from 'reactflow';
import { useCommandsSystems } from '@/hooks/Mapper/mapRootProvider/hooks/api';
import { emitMapEvent, useMapEventListener } from '@/hooks/Mapper/events';
@@ -27,6 +27,7 @@ import {
AddSystemDialog,
SearchOnSubmitCallback,
} from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
import { useHotkey } from '../../hooks/useHotkey';
// TODO: INFO - this component needs for abstract work with Map instance
export const MapWrapper = () => {
@@ -46,6 +47,7 @@ export const MapWrapper = () => {
} = useMapRootState();
const { deleteSystems } = useDeleteSystems();
const { mapRef, runCommand } = useCommonMapEventProcessor();
const { getNodes } = useReactFlow();
const { updateLinkSignatureToSystem } = useCommandsSystems();
const { open, ...systemContextProps } = useContextMenuSystemHandlers({ systems, hubs, outCommand });
@@ -114,12 +116,14 @@ export const MapWrapper = () => {
const handleConnectionDbClick = useCallback((e: SolarSystemConnection) => setSelectedConnection(e), []);
const handleManualDelete = useCallback((toDelete: string[]) => {
const restDel = toDelete.filter(x => ref.current.systems.some(y => y.id === x));
const handleDeleteSelected = useCallback(() => {
const restDel = getNodes()
.filter(x => x.selected && !x.data.locked)
.map(x => x.data.id);
if (restDel.length > 0) {
ref.current.deleteSystems(restDel);
}
}, []);
}, [getNodes]);
const onAddSystem: OnMapAddSystemCallback = useCallback(({ coordinates }) => {
setOpenAddSystem(coordinates);
@@ -143,6 +147,18 @@ export const MapWrapper = () => {
[openAddSystem, outCommand],
);
useHotkey(false, ['Delete'], (event: KeyboardEvent) => {
const targetWindow = (event.target as HTMLHtmlElement)?.closest(`[data-window-id="${MAP_ROOT_ID}"]`);
if (!targetWindow) {
return;
}
event.preventDefault();
event.stopPropagation();
handleDeleteSelected();
});
return (
<>
<Map
@@ -155,7 +171,6 @@ export const MapWrapper = () => {
minimapClasses={!isShowMenu ? classes.MiniMap : undefined}
isShowMinimap={isShowMinimap}
showKSpaceBG={isShowKSpace}
onManualDelete={handleManualDelete}
isThickConnections={isThickConnections}
isShowBackgroundPattern={isShowBackgroundPattern}
isSoftBackground={isSoftBackground}