Make TGUINanoMap actually somewhat as good as old NanoMap

code/modules/tgui/modules/crew_monitor.dm

@@ -1,5 +1,6 @@
 /datum/tgui_module/crew_monitor
 	name = "Crew monitor"
+	var/mapZoom = 1
 
 /datum/tgui_module/crew_monitor/tgui_act(action, params)
 	if(..())
@@ -18,6 +19,10 @@
 				if(hassensorlevel(H, SUIT_SENSOR_TRACKING))
 					AI.ai_actual_track(H)
 			return TRUE
+		if("changeZoom")
+			var/newZoom = params["newZoom"]
+			mapZoom = newZoom
+			return TRUE
 
 
 /datum/tgui_module/crew_monitor/tgui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = 0, datum/tgui/master_ui = null, datum/tgui_state/state = GLOB.tgui_default_state)
@@ -51,4 +56,8 @@
 	for(var/zlevel in map_levels)
 		data["crewmembers"] += crew_repository.health_data(zlevel)
 
+	data["zoomLevels"] = list(1, 1.25, 1.5, 1.75, 2)
+
+	data["mapZoom"] = mapZoom
+
 	return data

tgui/packages/tgui/components/NanoMap.js

@@ -1,29 +1,102 @@
 import { Box, Icon, Tooltip } from '.';
+import { Component } from 'inferno';
 import { useBackend } from "../backend";
 
-export const NanoMap = (props, context) => {
-  const { config } = useBackend(context);
-  const { onClick } = props;
-  return (
-    <Box className="NanoMap__container">
-      <Box
-        as="img"
-        src={config.map+"_nanomap_z"+config.mapZLevel+".png"} 
-        style={{
-          width: '600px',
-          height: '600px',
-          'margin-top': '-91px',
-          '-ms-interpolation-mode': 'nearest-neighbor',
-        }}
-        onClick={onClick} />
-    </Box>
-  );
-};
+export class NanoMap extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      offsetX: 0,
+      offsetY: 0,
+      transform: 'none',
+      dragging: false,
+      originX: null,
+      originY: null,
+    };
+
+    this.handleDragStart = e => {
+      document.body.style['pointer-events'] = 'none';
+      this.ref = e.target;
+      this.setState({
+        dragging: false,
+        originX: e.screenX,
+        originY: e.screenY,
+      });
+      this.timer = setTimeout(() => {
+        this.setState({
+          dragging: true,
+        });
+      }, 250);
+      document.addEventListener('mousemove', this.handleDragMove);
+      document.addEventListener('mouseup', this.handleDragEnd);
+    };
+
+    this.handleDragMove = e => {
+      this.setState(prevState => {
+        const state = { ... prevState };
+        const newOffsetX = e.screenX - state.originX;
+        const newOffsetY = e.screenY - state.originY;
+        if (prevState.dragging) {
+          state.offsetX += newOffsetX;
+          state.offsetY += newOffsetY;
+          state.originX = e.screenX;
+          state.originY = e.screenY;
+        } else {
+          state.dragging = true;
+        }
+        return state;
+      });
+    };
+
+    this.handleDragEnd = e => {
+      document.body.style['pointer-events'] = 'auto';
+      clearTimeout(this.timer);
+      this.setState({
+        dragging: false,
+        originX: null,
+        originY: null,
+      });
+      document.removeEventListener('mousemove', this.handleDragMove);
+      document.removeEventListener('mouseup', this.handleDragEnd);
+    };
+  }
+
+  render() {
+    const { config } = useBackend(this.context);
+    const { offsetX, offsetY } = this.state;
+    const { children, zoom } = this.props;
+
+    const newStyle = {
+      width: 508 * zoom + 'px',
+      height: 508 * zoom + 'px',
+      "margin-top": offsetY + 'px',
+      "margin-left": offsetX + 'px',
+      "overflow": "hidden",
+      "position": "relative",
+      "padding": "0px",
+      "background-image":
+        "url("+config.map+"_nanomap_z"+config.mapZLevel+".png)",
+      "background-size": "cover",
+    };
+
+    return (
+      <Box className="NanoMap__container">
+        <Box
+          style={newStyle}
+          onMouseDown={this.handleDragStart}>
+          { children }
+        </Box>
+      </Box>
+    );
+  }
+}
 
 const NanoMapMarker = props => {
   const {
     x,
     y,
+    zoom,
     icon,
     tooltip,
     color,
@@ -32,8 +105,8 @@ const NanoMapMarker = props => {
     <Box
       position="absolute"
       className="NanoMap__marker"
-      top={(((263 - y) * 2) + 2) + 'px'}
-      left={((x * 2) + 1) + 'px'}>
+      top={((255 - y) * 2 * zoom) - 8 + 'px'}
+      left={((x * 2 * zoom)) - 8 + 'px'} >
       <Icon
         name={icon}
         color={color}

tgui/packages/tgui/interfaces/CrewMonitor.js

@@ -21,21 +21,30 @@ export const CrewMonitor = (props, context) => {
               "mapZLevel": level,
             })} />
         ))}
-        {crew
-          .filter(x => 
-            (x.sensor_type === 3 && ~~x.realZ === ~~config.mapZLevel)
-          )
-          .map(crewmember => (
-            <NanoMap.Marker
-              key={crewmember.ref}
-              x={crewmember.x}
-              y={crewmember.y}
-              icon="circle"
-              tooltip={crewmember.name}
-              color={crewmember.dead ? 'red' : 'green'}
-            />
-          ))}
-        <NanoMap />
+        {data.zoomLevels.map(zoomLevel => (
+          <Button
+            key={zoomLevel}
+            selected={Number(data.mapZoom) === Number(zoomLevel)}
+            content={zoomLevel}
+            onClick={() => act("changeZoom", { "newZoom": zoomLevel })} />
+        ))}
+        <NanoMap zoom={data.mapZoom}>
+          {crew
+            .filter(x => 
+              (x.sensor_type === 3 && ~~x.realZ === ~~config.mapZLevel)
+            )
+            .map(crewmember => (
+              <NanoMap.Marker
+                key={crewmember.ref}
+                x={crewmember.x}
+                y={crewmember.y}
+                zoom={data.mapZoom}
+                icon="circle"
+                tooltip={crewmember.name}
+                color={crewmember.dead ? 'red' : 'green'}
+              />
+            ))}
+        </NanoMap>
         <Box className="NanoMap__contentOffset">
           <Box bold m={2}>
             <Table>

tgui/packages/tgui/styles/components/NanoMap.scss

@@ -6,6 +6,8 @@ $color-background: rgba(0, 0, 0, 0.33) !default;
   bottom: 0;
   left: 524px;
   right: 0;
+  padding: 0px;
+  margin: 0px;
   background-color: $color-background;
   overflow-y: scroll;
 }
@@ -20,4 +22,6 @@ $color-background: rgba(0, 0, 0, 0.33) !default;
 
 .NanoMap__marker {
   z-index: 10;
+  padding: 0px;
+  margin: 0px;
 }