diff --git a/tgui/packages/tgui/components/ByondUi.js b/tgui/packages/tgui/components/ByondUi.js index b1e50f208a36..7bd3cf884986 100644 --- a/tgui/packages/tgui/components/ByondUi.js +++ b/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], diff --git a/tgui/packages/tgui/components/NanoMap.js b/tgui/packages/tgui/components/NanoMap.js index 6b97353fdaab..cfe7ff5dace5 100644 --- a/tgui/packages/tgui/components/NanoMap.js +++ b/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} > - + ); }; +NanoMap.Marker = NanoMapMarker; + +const NanoMapZoomer = (props, context) => { + return ( + + + + v + 'x'} + value={props.zoom} + onDrag={(e, v) => props.onZoom(e, v)} + /> + + + + ); +}; + +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 (