Fix: Atmos nanomap markers

tgui/packages/tgui/components/ByondUi.js

@@ -56,8 +56,7 @@ window.addEventListener('beforeunload', () => {
 /**
  * Get the bounding box of the DOM element.
  */
-export const getBoundingBox = (element) => {
-  // SS220 EDIT - ORIGINAL: const getBoundingBox = element => {
+const getBoundingBox = (element) => {
   const rect = element.getBoundingClientRect();
   return {
     pos: [rect.left, rect.top],

tgui/packages/tgui/components/NanoMap.js

@@ -3,7 +3,6 @@ import { Box, Icon, Tooltip, Button } from '.';
 import { useBackend } from '../backend';
 import { LabeledList } from './LabeledList';
 import { Slider } from './Slider';
-import { getBoundingBox } from './ByondUi';
 
 const pauseEvent = (e) => {
   if (e.stopPropagation) {
@@ -22,12 +21,12 @@ export class NanoMap extends Component {
     super(props);
 
     // Auto center based on window size
-    const Xcenter = 0;
+    const Xcenter = window.innerWidth / 2 - 256;
     const Ycenter = window.innerHeight / 2 - 256;
 
     this.state = {
-      offsetX: Xcenter,
-      offsetY: Ycenter,
+      offsetX: 128,
+      offsetY: 48,
       transform: 'none',
       dragging: false,
       originX: null,
@@ -80,22 +79,10 @@ export class NanoMap extends Component {
     this.handleZoom = (_e, value) => {
       this.setState((state) => {
         const newZoom = Math.min(Math.max(value, 1), 8);
-        const zoomDiff = newZoom / state.zoom;
-        if (zoomDiff === 1) {
-          return;
-        }
-
+        let zoomDiff = (newZoom - state.zoom) * 1.5;
         state.zoom = newZoom;
-
-        const container = document.getElementsByClassName('NanoMap__container');
-        if (container.length) {
-          const bounds = getBoundingBox(container[0]);
-          const currentCenterX = bounds.size[0] / 2 - state.offsetX;
-          const currentCenterY = bounds.size[1] / 2 - state.offsetY;
-          state.offsetX += currentCenterX - currentCenterX * zoomDiff;
-          state.offsetY += currentCenterY - currentCenterY * zoomDiff;
-        }
-
+        state.offsetX = state.offsetX - 262 * zoomDiff;
+        state.offsetY = state.offsetY - 256 * zoomDiff;
         if (props.onZoom) {
           props.onZoom(state.zoom);
         }
@@ -145,8 +132,8 @@ export class NanoMap extends Component {
   }
 }
 
-const NanoMapMarker = (props) => {
-  const { x, y, zoom = 1, icon, tooltip, color, onClick, size = 6 } = props;
+const NanoMapMarker = (props, context) => {
+  const { x, y, zoom = 1, icon, tooltip, color } = props;
   const rx = x * 2 * zoom - zoom - 3;
   const ry = y * 2 * zoom - zoom - 3;
   return (
@@ -157,15 +144,37 @@ const NanoMapMarker = (props) => {
         lineHeight="0"
         bottom={ry + 'px'}
         left={rx + 'px'}
-        onClick={onClick}
       >
-        <Icon name={icon} color={color} fontSize={size + 'px'} />
+        <Icon name={icon} color={color} fontSize="6px" />
         <Tooltip content={tooltip} />
       </Box>
     </div>
   );
 };
 
+NanoMap.Marker = NanoMapMarker;
+
+const NanoMapZoomer = (props, context) => {
+  return (
+    <Box className="NanoMap__zoomer">
+      <LabeledList>
+        <LabeledList.Item label="Zoom">
+          <Slider
+            minValue="1"
+            maxValue="8"
+            stepPixelSize="10"
+            format={(v) => v + 'x'}
+            value={props.zoom}
+            onDrag={(e, v) => props.onZoom(e, v)}
+          />
+        </LabeledList.Item>
+      </LabeledList>
+    </Box>
+  );
+};
+
+NanoMap.Zoomer = NanoMapZoomer;
+
 let ActiveButton;
 class NanoButton extends Component {
   constructor(props) {
@@ -192,7 +201,6 @@ class NanoButton extends Component {
   render() {
     let rx = this.props.x * 2 * this.props.zoom - this.props.zoom - 3;
     let ry = this.props.y * 2 * this.props.zoom - this.props.zoom - 3;
-
     return (
       <Button
         key={this.props.key}
@@ -211,25 +219,3 @@ class NanoButton extends Component {
   }
 }
 NanoMap.NanoButton = NanoButton;
-NanoMap.Marker = NanoMapMarker;
-
-const NanoMapZoomer = (props) => {
-  return (
-    <Box className="NanoMap__zoomer">
-      <LabeledList>
-        <LabeledList.Item label="Zoom">
-          <Slider
-            minValue="1"
-            maxValue="8"
-            stepPixelSize="10"
-            format={(v) => v + 'x'}
-            value={props.zoom}
-            onDrag={(e, v) => props.onZoom(e, v)}
-          />
-        </LabeledList.Item>
-      </LabeledList>
-    </Box>
-  );
-};
-
-NanoMap.Zoomer = NanoMapZoomer;

tgui/packages/tgui/interfaces/AtmosControl.js

@@ -117,7 +117,7 @@ const AtmosControlMapView = (_properties, context) => {
     <Box height="526px" mb="0.5rem" overflow="hidden">
       <NanoMap onZoom={(v) => setZoom(v)}>
         {alarms
-          .filter((a) => a.z === 2)
+          .filter((a) => a.z === 3) // SS220 EDIT - ORIGIN: 2
           .map((aa) => (
             // The AA means air alarm, and nothing else
             <NanoMap.Marker

tgui/packages/tgui/interfaces/CameraConsole220.js

@@ -67,14 +67,14 @@ export const CameraConsole220 = (props, context) => {
           <Tabs>
             <Tabs.Tab
               key="Map"
-              selected={0 === tabIndex}
+              selected={tabIndex === 0}
               onClick={() => setTabIndex(0)}
             >
               <Icon name="map-marked-alt" /> Карта
             </Tabs.Tab>
             <Tabs.Tab
               key="List"
-              selected={1 === tabIndex}
+              selected={tabIndex === 1}
               onClick={() => setTabIndex(1)}
             >
               <Icon name="table" /> Список
@@ -119,9 +119,9 @@ export const CameraConsoleMapContent = (props, context) => {
             ))}
         </NanoMap>
       </Box>
-      <Box height="100%" resizable className="CameraConsole__new__right">
+      <Box height="96%" resizable className="CameraConsole__right_map">
         <div className="CameraConsole__header">
-          <div className="CameraConsole__title">
+          <div className="CameraConsole__toolbar">
             <b>Камера: </b>
             {(activeCamera && activeCamera.name) || '—'}
           </div>

tgui/packages/tgui/styles/interfaces/CameraConsole.scss

@@ -2,7 +2,7 @@ $color-background: rgba(0, 0, 0, 0.33) !default;
 
 .CameraConsole__left {
   position: absolute;
-  top: 23px;
+  top: 25px;
   bottom: 0;
   left: 0;
   width: 220px;
@@ -17,29 +17,47 @@ $color-background: rgba(0, 0, 0, 0.33) !default;
   background-color: $color-background;
 }
 
-.CameraConsole__new__right {
-  position: relative;
-  display: flex;
-  flex: 1;
-  height: 90%;
-  flex-direction: column;
-  background-color: $color-background;
+.CameraConsole__toolbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 24px;
+  line-height: 24px;
+  margin: 3px 12px 0;
+  // background-color: #0a0;
 }
 
-.CameraConsole__header {
-  display: flex;
-  justify-content: space-between;
+.CameraConsole__toolbarRight {
+  position: absolute;
+  top: 0;
+  right: 0;
   height: 24px;
   line-height: 24px;
   margin: 4px 6px 0;
+  // background-color: #aa0;
 }
 
 .CameraConsole__map {
-  display: flex;
-  overflow: hidden;
-  background-color: #00a;
+  position: absolute;
+  top: 26px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  // background-color: #00a;
+  margin: 6px;
+  text-align: center;
 
   .NoticeBox {
     margin-top: calc(50% - 24px);
   }
 }
+
+.CameraConsole__right_map {
+  position: relative;
+  display: flex;
+  flex: 1;
+  height: 90%;
+  flex-direction: column;
+  background-color: $color-background;
+}