From 27f3ab0d5d263bfe6b17a95ab3ce9a2b5e8b81f3 Mon Sep 17 00:00:00 2001
From: Watermelon914 <37270891+Watermelon914@users.noreply.github.com>
Date: Fri, 30 Jul 2021 06:26:48 +0100
Subject: [PATCH] Refactors UI code of integrated circuits completely into
 separate folders and adds dragndrop functionality for the UI (#60514)

Co-authored-by: Watermelon914 <3052169-Watermelon914@users.noreply.gitlab.com>
---
 .../packages/tgui/components/InfinitePlane.js |  46 +-
 .../IntegratedCircuit/BasicInput.js           |  27 +
 .../IntegratedCircuit/Connections.js          |  57 ++
 .../IntegratedCircuit/DisplayName.js          |  60 ++
 .../IntegratedCircuit/FundamentalTypes.js     |  84 ++
 .../IntegratedCircuit/ObjectComponent.js      | 221 ++++++
 .../tgui/interfaces/IntegratedCircuit/Port.js | 111 +++
 .../interfaces/IntegratedCircuit/constants.js |   5 +
 .../interfaces/IntegratedCircuit/index.js     | 745 ++++--------------
 9 files changed, 760 insertions(+), 596 deletions(-)
 create mode 100644 tgui/packages/tgui/interfaces/IntegratedCircuit/BasicInput.js
 create mode 100644 tgui/packages/tgui/interfaces/IntegratedCircuit/Connections.js
 create mode 100644 tgui/packages/tgui/interfaces/IntegratedCircuit/DisplayName.js
 create mode 100644 tgui/packages/tgui/interfaces/IntegratedCircuit/FundamentalTypes.js
 create mode 100644 tgui/packages/tgui/interfaces/IntegratedCircuit/ObjectComponent.js
 create mode 100644 tgui/packages/tgui/interfaces/IntegratedCircuit/Port.js
 create mode 100644 tgui/packages/tgui/interfaces/IntegratedCircuit/constants.js

diff --git a/tgui/packages/tgui/components/InfinitePlane.js b/tgui/packages/tgui/components/InfinitePlane.js
index 55273137bbe..7d15a37e382 100644
--- a/tgui/packages/tgui/components/InfinitePlane.js
+++ b/tgui/packages/tgui/components/InfinitePlane.js
@@ -27,6 +27,8 @@ export class InfinitePlane extends Component {
 
     this.handleMouseDown = this.handleMouseDown.bind(this);
     this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleZoomIncrease = this.handleZoomIncrease.bind(this);
+    this.handleZoomDecrease = this.handleZoomDecrease.bind(this);
     this.onMouseUp = this.onMouseUp.bind(this);
 
     this.doOffsetMouse = this.doOffsetMouse.bind(this);
@@ -70,14 +72,46 @@ export class InfinitePlane extends Component {
     });
   }
 
+  handleZoomIncrease(event) {
+    const { onZoomChange } = this.props;
+    const { zoom } = this.state;
+    const newZoomValue = Math.min(zoom+ZOOM_INCREMENT, ZOOM_MAX_VAL);
+    this.setState({
+      zoom: newZoomValue,
+    });
+    if (onZoomChange) {
+      onZoomChange(newZoomValue);
+    }
+  }
+
+  handleZoomDecrease(event) {
+    const { onZoomChange } = this.props;
+    const { zoom } = this.state;
+    const newZoomValue = Math.max(zoom-ZOOM_INCREMENT, ZOOM_MIN_VAL);
+    this.setState({
+      zoom: newZoomValue,
+    });
+
+    if (onZoomChange) {
+      onZoomChange(newZoomValue);
+    }
+  }
+
   handleMouseMove(event) {
+    const { onBackgroundMoved } = this.props;
     if (this.state.mouseDown) {
+      let newX, newY;
       this.setState((state) => {
+        newX = event.clientX - state.lastLeft;
+        newY = event.clientY - state.lastTop;
         return {
-          left: event.clientX - state.lastLeft,
-          top: event.clientY - state.lastTop,
+          left: newX,
+          top: newY,
         };
       });
+      if (onBackgroundMoved) {
+        onBackgroundMoved(newX, newY);
+      }
     }
   }
 
@@ -140,9 +174,7 @@ export class InfinitePlane extends Component {
           <Stack.Item>
             <Button
               icon="minus"
-              onClick={() => this.setState({
-                zoom: Math.max(zoom-ZOOM_INCREMENT, ZOOM_MIN_VAL),
-              })}
+              onClick={this.handleZoomDecrease}
             />
           </Stack.Item>
           <Stack.Item grow={1}>
@@ -157,9 +189,7 @@ export class InfinitePlane extends Component {
           <Stack.Item>
             <Button
               icon="plus"
-              onClick={() => this.setState({
-                zoom: Math.min(zoom+ZOOM_INCREMENT, ZOOM_MAX_VAL),
-              })}
+              onClick={this.handleZoomIncrease}
             />
           </Stack.Item>
         </Stack>
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/BasicInput.js b/tgui/packages/tgui/interfaces/IntegratedCircuit/BasicInput.js
new file mode 100644
index 00000000000..4cc9de3e576
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/BasicInput.js
@@ -0,0 +1,27 @@
+import { Stack, Button } from '../../components';
+
+export const BasicInput = (props, context) => {
+  const { children, name, setValue, defaultValue, value } = props;
+  return (
+    (value !== null && (
+      <Stack onMouseDown={(e) => e.stopPropagation()}>
+        <Stack.Item>
+          <Button
+            color="transparent"
+            compact
+            icon="times"
+            onClick={() => setValue(null, { set_null: true })}
+          />
+        </Stack.Item>
+        <Stack.Item>{children}</Stack.Item>
+      </Stack>
+    )) || (
+      <Button
+        content={name}
+        color="transparent"
+        compact
+        onClick={() => setValue(defaultValue)}
+      />
+    )
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/Connections.js b/tgui/packages/tgui/interfaces/IntegratedCircuit/Connections.js
new file mode 100644
index 00000000000..42f51135815
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/Connections.js
@@ -0,0 +1,57 @@
+import { CSS_COLORS } from '../../constants';
+import { SVG_CURVE_INTENSITY } from './constants';
+import { classes } from '../../../common/react';
+
+export const Connections = (props, context) => {
+  const { connections } = props;
+
+  const isColorClass = (str) => {
+    if (typeof str === 'string') {
+      return CSS_COLORS.includes(str);
+    }
+  };
+
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      style={{
+        'position': 'absolute',
+        'pointer-events': 'none',
+        'z-index': -1,
+      }}>
+      {connections.map((val, index) => {
+        const from = val.from;
+        const to = val.to;
+        if (!to || !from) {
+          return;
+        }
+        // Starting point
+        let path = `M ${from.x} ${from.y}`;
+        // DEFAULT STYLE
+        path += `C ${from.x + SVG_CURVE_INTENSITY}, ${from.y},`;
+        path += `${to.x - SVG_CURVE_INTENSITY}, ${to.y},`;
+        path += `${to.x}, ${to.y}`;
+
+        // SUBWAY STYLE
+        // const yDiff = Math.abs(from.y - (to.y - 16));
+        // path += `L ${to.x - yDiff} ${from.y}`;
+        // path += `L ${to.x - 16} ${to.y}`;
+        // path += `L ${to.x} ${to.y}`;
+
+        val.color = val.color || 'blue';
+        return (
+          <path
+            className={classes([
+              isColorClass(val.color) && `color-stroke-${val.color}`,
+            ])}
+            key={index}
+            d={path}
+            fill="transparent"
+            stroke-width="2px"
+          />
+        );
+      })}
+    </svg>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/DisplayName.js b/tgui/packages/tgui/interfaces/IntegratedCircuit/DisplayName.js
new file mode 100644
index 00000000000..e4ab87b7855
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/DisplayName.js
@@ -0,0 +1,60 @@
+import { useBackend } from '../../backend';
+import {
+  Box,
+  Button, Flex,
+} from '../../components';
+import { FUNDAMENTAL_DATA_TYPES } from './FundamentalTypes';
+import { NULL_REF } from './constants';
+
+
+export const DisplayName = (props, context) => {
+  const { act } = useBackend(context);
+  const { port, isOutput, componentId, portIndex, ...rest } = props;
+
+  const InputComponent = FUNDAMENTAL_DATA_TYPES[port.type || 'any'];
+
+  const hasInput = !isOutput
+    && port.connected_to === NULL_REF
+    && InputComponent;
+
+  return (
+    <Box {...rest}>
+      <Flex direction="column">
+        <Flex.Item>
+          {(hasInput && (
+            <InputComponent
+              setValue={(val, extraParams) => act('set_component_input', {
+                component_id: componentId,
+                port_id: portIndex,
+                input: val,
+                ...extraParams,
+              })}
+              color={port.color}
+              name={port.name}
+              value={port.current_data} />
+          ))
+            || (isOutput && (
+              <Button
+                compact
+                color="transparent"
+                onClick={() => act('get_component_value', {
+                  component_id: componentId,
+                  port_id: portIndex,
+                })}>
+                <Box color="white">{port.name}</Box>
+              </Button>
+            ))
+            || port.name}
+        </Flex.Item>
+        <Flex.Item>
+          <Box
+            fontSize={0.75}
+            opacity={0.25}
+            textAlign={isOutput ? 'right' : 'left'}>
+            {port.type || 'any'}
+          </Box>
+        </Flex.Item>
+      </Flex>
+    </Box>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/FundamentalTypes.js b/tgui/packages/tgui/interfaces/IntegratedCircuit/FundamentalTypes.js
new file mode 100644
index 00000000000..1374fea1e99
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/FundamentalTypes.js
@@ -0,0 +1,84 @@
+import { BasicInput } from './BasicInput';
+import { NumberInput, Button, Stack, Input } from '../../components';
+
+export const FUNDAMENTAL_DATA_TYPES = {
+  'string': (props, context) => {
+    const { name, value, setValue, color } = props;
+    return (
+      <BasicInput name={name} setValue={setValue} value={value} defaultValue="">
+        <Input
+          placeholder={name}
+          value={value}
+          onChange={(e, val) => setValue(val)}
+        />
+      </BasicInput>
+    );
+  },
+  'number': (props, context) => {
+    const { name, value, setValue, color } = props;
+    return (
+      <BasicInput
+        name={name}
+        setValue={setValue}
+        value={value}
+        defaultValue={0}>
+        <NumberInput
+          value={value}
+          color={color}
+          onChange={(e, val) => setValue(val)}
+          unit={name}
+        />
+      </BasicInput>
+    );
+  },
+  'entity': (props, context) => {
+    const { name, setValue, color } = props;
+    return (
+      <Button
+        content={name}
+        color="transparent"
+        icon="upload"
+        compact
+        onClick={() => setValue(null, { marked_atom: true })}
+      />
+    );
+  },
+  'signal': (props, context) => {
+    const { name, setValue } = props;
+    return (
+      <Button
+        content={name}
+        color="transparent"
+        compact
+        onClick={() => setValue()}
+      />
+    );
+  },
+  'any': (props, context) => {
+    const { name, value, setValue, color } = props;
+    return (
+      <BasicInput
+        name={name}
+        setValue={setValue}
+        value={value}
+        defaultValue={''}>
+        <Stack>
+          <Stack.Item>
+            <Button
+              color={color}
+              icon="upload"
+              onClick={() => setValue(null, { marked_atom: true })}
+            />
+          </Stack.Item>
+          <Stack.Item>
+            <Input
+              placeholder={name}
+              value={value}
+              onChange={(e, val) => setValue(val)}
+            />
+          </Stack.Item>
+        </Stack>
+      </BasicInput>
+    );
+  },
+};
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/ObjectComponent.js b/tgui/packages/tgui/interfaces/IntegratedCircuit/ObjectComponent.js
new file mode 100644
index 00000000000..67e0b5b72aa
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/ObjectComponent.js
@@ -0,0 +1,221 @@
+import { useBackend } from '../../backend';
+import {
+  Box,
+  Stack, Button, Dropdown,
+} from '../../components';
+import { Component } from 'inferno';
+import { shallowDiffers } from '../../../common/react';
+import { ABSOLUTE_Y_OFFSET } from './constants';
+import { Port } from "./Port";
+
+
+export class ObjectComponent extends Component {
+  constructor() {
+    super();
+    this.state = {
+      isDragging: false,
+      dragPos: null,
+      startPos: null,
+      lastMousePos: null,
+    };
+
+    this.handleStartDrag = this.handleStartDrag.bind(this);
+    this.handleStopDrag = this.handleStopDrag.bind(this);
+    this.handleDrag = this.handleDrag.bind(this);
+  }
+
+  handleStartDrag(e) {
+    const { x, y } = this.props;
+    e.stopPropagation();
+    this.setState({
+      lastMousePos: null,
+      isDragging: true,
+      dragPos: { x: x, y: y },
+      startPos: { x: x, y: y },
+    });
+    window.addEventListener('mousemove', this.handleDrag);
+    window.addEventListener('mouseup', this.handleStopDrag);
+  }
+
+  handleStopDrag(e) {
+    const { act } = useBackend(this.context);
+    const { dragPos } = this.state;
+    const { index } = this.props;
+    if (dragPos) {
+      act('set_component_coordinates', {
+        component_id: index,
+        rel_x: dragPos.x,
+        rel_y: dragPos.y,
+      });
+    }
+
+    window.removeEventListener('mousemove', this.handleDrag);
+    window.removeEventListener('mouseup', this.handleStopDrag);
+    this.setState({ isDragging: false });
+  }
+
+  handleDrag(e) {
+    const { dragPos, isDragging, lastMousePos } = this.state;
+    if (dragPos && isDragging) {
+      e.preventDefault();
+      const { screenZoomX, screenZoomY, screenX, screenY } = e;
+      let xPos = screenZoomX || screenX;
+      let yPos = screenZoomY || screenY;
+      if (lastMousePos) {
+        this.setState({
+          dragPos: {
+            x: dragPos.x - (lastMousePos.x - xPos),
+            y: dragPos.y - (lastMousePos.y - yPos),
+          },
+        });
+      }
+      this.setState({
+        lastMousePos: { x: xPos, y: yPos },
+      });
+    }
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const { input_ports, output_ports } = this.props;
+
+    return (
+      shallowDiffers(this.props, nextProps)
+      || shallowDiffers(this.state, nextState)
+      || shallowDiffers(input_ports, nextProps.input_ports)
+      || shallowDiffers(output_ports, nextProps.output_ports)
+    );
+  }
+
+  render() {
+    const {
+      input_ports,
+      output_ports,
+      name,
+      x,
+      y,
+      index,
+      color = 'blue',
+      options,
+      option,
+      removable,
+      locations,
+      onPortUpdated,
+      onPortLoaded,
+      onPortMouseDown,
+      onPortRightClick,
+      onPortMouseUp,
+      ...rest
+    } = this.props;
+    const { act } = useBackend(this.context);
+    const { startPos, dragPos } = this.state;
+
+    let [x_pos, y_pos] = [x, y];
+    if (dragPos && startPos && startPos.x === x_pos && startPos.y === y_pos) {
+      x_pos = dragPos.x;
+      y_pos = dragPos.y;
+    }
+
+    // Assigned onto the ports
+    const PortOptions = {
+      onPortLoaded: onPortLoaded,
+      onPortUpdated: onPortUpdated,
+      onPortMouseDown: onPortMouseDown,
+      onPortRightClick: onPortRightClick,
+      onPortMouseUp: onPortMouseUp,
+    };
+
+    return (
+      <Box
+        {...rest}
+        position="absolute"
+        left={`${x_pos}px`}
+        top={`${y_pos}px`}
+        onMouseDown={this.handleStartDrag}
+        onMouseUp={this.handleStopDrag}
+        onComponentWillUnmount={this.handleDrag}>
+        <Box
+          backgroundColor={color}
+          py={1}
+          px={1}
+          className="ObjectComponent__Titlebar">
+          <Stack>
+            <Stack.Item grow={1} unselectable="on">
+              {name}
+            </Stack.Item>
+            {!!options && (
+              <Stack.Item>
+                <Dropdown
+                  color={color}
+                  nochevron
+                  over
+                  options={options}
+                  displayText={option}
+                  noscroll
+                  onSelected={(selected) => act('set_component_option', {
+                    component_id: index,
+                    option: selected,
+                  })} />
+              </Stack.Item>
+            )}
+            <Stack.Item>
+              <Button
+                color="transparent"
+                icon="info"
+                compact
+                onClick={(e) => act('set_examined_component', {
+                  component_id: index,
+                  x: e.pageX,
+                  y: e.pageY + ABSOLUTE_Y_OFFSET,
+                })} />
+            </Stack.Item>
+            {!!removable && (
+              <Stack.Item>
+                <Button
+                  color="transparent"
+                  icon="times"
+                  compact
+                  onClick={() => act('detach_component', { component_id: index })} />
+              </Stack.Item>
+            )}
+          </Stack>
+        </Box>
+        <Box
+          className="ObjectComponent__Content"
+          unselectable="on"
+          py={1}
+          px={1}>
+          <Stack>
+            <Stack.Item grow={1}>
+              <Stack vertical fill>
+                {input_ports.map((port, portIndex) => (
+                  <Stack.Item key={portIndex}>
+                    <Port
+                      port={port}
+                      portIndex={portIndex + 1}
+                      componentId={index}
+                      {...PortOptions}
+                    />
+                  </Stack.Item>
+                ))}
+              </Stack>
+            </Stack.Item>
+            <Stack.Item ml={5}>
+              <Stack vertical>
+                {output_ports.map((port, portIndex) => (
+                  <Stack.Item key={portIndex}>
+                    <Port
+                      port={port}
+                      portIndex={portIndex + 1}
+                      componentId={index}
+                      {...PortOptions}
+                      isOutput />
+                  </Stack.Item>
+                ))}
+              </Stack>
+            </Stack.Item>
+          </Stack>
+        </Box>
+      </Box>
+    );
+  }
+}
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/Port.js b/tgui/packages/tgui/interfaces/IntegratedCircuit/Port.js
new file mode 100644
index 00000000000..305a3c30d0d
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/Port.js
@@ -0,0 +1,111 @@
+import {
+  Stack,
+  Icon,
+} from '../../components';
+import { Component, createRef } from 'inferno';
+import { DisplayName } from "./DisplayName";
+
+
+export class Port extends Component {
+  constructor() {
+    super();
+    this.iconRef = createRef();
+    this.componentDidUpdate = this.componentDidUpdate.bind(this);
+    this.componentDidMount = this.componentDidMount.bind(this);
+    this.handlePortMouseDown = this.handlePortMouseDown.bind(this);
+    this.handlePortRightClick = this.handlePortRightClick.bind(this);
+    this.handlePortMouseUp = this.handlePortMouseUp.bind(this);
+  }
+
+  handlePortMouseDown(e) {
+    const {
+      port,
+      portIndex,
+      componentId,
+      isOutput,
+      onPortMouseDown,
+    } = this.props;
+    onPortMouseDown(portIndex, componentId, port, isOutput, e);
+  }
+
+  handlePortMouseUp(e) {
+    const {
+      port,
+      portIndex,
+      componentId,
+      isOutput,
+      onPortMouseUp,
+    } = this.props;
+    onPortMouseUp(portIndex, componentId, port, isOutput, e);
+  }
+
+  handlePortRightClick(e) {
+    const {
+      port,
+      portIndex,
+      componentId,
+      isOutput,
+      onPortRightClick,
+    } = this.props;
+    onPortRightClick(portIndex, componentId, port, isOutput, e);
+  }
+
+  componentDidUpdate() {
+    const { port, onPortUpdated } = this.props;
+    if (onPortUpdated) {
+      onPortUpdated(port, this.iconRef.current);
+    }
+  }
+
+  componentDidMount() {
+    const { port, onPortLoaded } = this.props;
+    if (onPortLoaded) {
+      onPortLoaded(port, this.iconRef.current);
+    }
+  }
+
+  render() {
+    const {
+      port,
+      portIndex,
+      componentId,
+      isOutput,
+      ...rest
+    } = this.props;
+
+    return (
+      <Stack {...rest} justify={isOutput ? 'flex-end' : 'flex-start'}>
+        {!!isOutput && (
+          <Stack.Item>
+            <DisplayName
+              port={port}
+              isOutput={isOutput}
+              componentId={componentId}
+              portIndex={portIndex} />
+          </Stack.Item>
+        )}
+        <Stack.Item>
+          <Icon
+            color={port.color || 'blue'}
+            name={'circle'}
+            position="relative"
+            onMouseDown={this.handlePortMouseDown}
+            onContextMenu={this.handlePortRightClick}
+            onMouseUp={this.handlePortMouseUp}
+          >
+            <span ref={this.iconRef} className="ObjectComponent__PortPos" />
+          </Icon>
+        </Stack.Item>
+        {!isOutput && (
+          <Stack.Item>
+            <DisplayName
+              port={port}
+              isOutput={isOutput}
+              componentId={componentId}
+              portIndex={portIndex} />
+          </Stack.Item>
+        )}
+      </Stack>
+    );
+  }
+}
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/constants.js b/tgui/packages/tgui/interfaces/IntegratedCircuit/constants.js
new file mode 100644
index 00000000000..77e34d11c84
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/constants.js
@@ -0,0 +1,5 @@
+export const NULL_REF = '[0x0]';
+export const ABSOLUTE_Y_OFFSET = -32;
+export const SVG_CURVE_INTENSITY = 64;
+
+export const MOUSE_BUTTON_LEFT = 0;
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/index.js b/tgui/packages/tgui/interfaces/IntegratedCircuit/index.js
index 3ef75b84014..2c6f2e61702 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/index.js
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/index.js
@@ -1,142 +1,41 @@
-import { useBackend, useLocalState } from '../../backend';
+import { useBackend } from '../../backend';
 import {
-  Box,
-  Stack,
-  Icon,
-  Button,
   Input,
-  Flex,
-  NumberInput,
-  Dropdown,
   InfinitePlane,
+  Stack,
+  Box,
+  Button,
 } from '../../components';
-import { Component, createRef } from 'inferno';
+import { Component } from 'inferno';
 import { Window } from '../../layouts';
-import { CSS_COLORS } from '../../constants';
-import { classes, shallowDiffers } from '../../../common/react';
 import { resolveAsset } from '../../assets';
 import { CircuitInfo } from './CircuitInfo';
-
-const NULL_REF = '[0x0]';
-const ABSOLUTE_Y_OFFSET = -32;
-const SVG_CURVE_INTENSITY = 64;
-
-const BasicInput = (props, context) => {
-  const { children, name, setValue, defaultValue, value } = props;
-  return (
-    (value !== null && (
-      <Stack onMouseDown={(e) => e.stopPropagation()}>
-        <Stack.Item>
-          <Button
-            color="transparent"
-            compact
-            icon="times"
-            onClick={() => setValue(null, { set_null: true })}
-          />
-        </Stack.Item>
-        <Stack.Item>{children}</Stack.Item>
-      </Stack>
-    )) || (
-      <Button
-        content={name}
-        color="transparent"
-        compact
-        onClick={() => setValue(defaultValue)}
-      />
-    )
-  );
-};
-
-const FUNDAMENTAL_DATA_TYPES = {
-  'string': (props, context) => {
-    const { name, value, setValue, color } = props;
-    return (
-      <BasicInput name={name} setValue={setValue} value={value} defaultValue="">
-        <Input
-          placeholder={name}
-          value={value}
-          onChange={(e, val) => setValue(val)}
-        />
-      </BasicInput>
-    );
-  },
-  'number': (props, context) => {
-    const { name, value, setValue, color } = props;
-    return (
-      <BasicInput
-        name={name}
-        setValue={setValue}
-        value={value}
-        defaultValue={0}>
-        <NumberInput
-          value={value}
-          color={color}
-          onChange={(e, val) => setValue(val)}
-          unit={name}
-        />
-      </BasicInput>
-    );
-  },
-  'entity': (props, context) => {
-    const { name, setValue, color } = props;
-    return (
-      <Button
-        content={name}
-        color="transparent"
-        icon="upload"
-        compact
-        onClick={() => setValue(null, { marked_atom: true })}
-      />
-    );
-  },
-  'signal': (props, context) => {
-    const { name, setValue } = props;
-    return (
-      <Button
-        content={name}
-        color="transparent"
-        compact
-        onClick={() => setValue()}
-      />
-    );
-  },
-  'any': (props, context) => {
-    const { name, value, setValue, color } = props;
-    return (
-      <BasicInput
-        name={name}
-        setValue={setValue}
-        value={value}
-        defaultValue={''}>
-        <Stack>
-          <Stack.Item>
-            <Button
-              color={color}
-              icon="upload"
-              onClick={() => setValue(null, { marked_atom: true })}
-            />
-          </Stack.Item>
-          <Stack.Item>
-            <Input
-              placeholder={name}
-              value={value}
-              onChange={(e, val) => setValue(val)}
-            />
-          </Stack.Item>
-        </Stack>
-      </BasicInput>
-    );
-  },
-};
+import { NULL_REF, ABSOLUTE_Y_OFFSET, MOUSE_BUTTON_LEFT } from './constants';
+import { Connections } from './Connections';
+import { ObjectComponent } from './ObjectComponent';
 
 export class IntegratedCircuit extends Component {
   constructor() {
     super();
     this.state = {
       locations: {},
+      selectedPort: null,
+      mouseX: null,
+      mouseY: null,
+      zoom: 1,
+      backgroundX: 0,
+      backgroundY: 0,
     };
     this.handlePortLocation = this.handlePortLocation.bind(this);
     this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handlePortClick = this.handlePortClick.bind(this);
+    this.handlePortRightClick = this.handlePortRightClick.bind(this);
+    this.handlePortUp = this.handlePortUp.bind(this);
+
+    this.handlePortDrag = this.handlePortDrag.bind(this);
+    this.handlePortRelease = this.handlePortRelease.bind(this);
+    this.handleZoomChange = this.handleZoomChange.bind(this);
+    this.handleBackgroundMoved = this.handleBackgroundMoved.bind(this);
   }
 
   // Helper function to get an element's exact position
@@ -179,6 +78,99 @@ export class IntegratedCircuit extends Component {
     this.setState({ locations: locations });
   }
 
+  handlePortClick(portIndex, componentId, port, isOutput, event) {
+    if (event.button !== MOUSE_BUTTON_LEFT) {
+      return;
+    }
+
+    event.stopPropagation();
+    this.setState({
+      selectedPort: {
+        index: portIndex,
+        component_id: componentId,
+        is_output: isOutput,
+        ref: port.ref,
+      },
+    });
+
+    this.handlePortDrag(event);
+
+    window.addEventListener('mousemove', this.handlePortDrag);
+    window.addEventListener('mouseup', this.handlePortRelease);
+  }
+
+  // mouse up called whilst over a port. This means we can check if selectedPort
+  // exists and do perform some actions if it does.
+  handlePortUp(portIndex, componentId, port, isOutput, event) {
+    const { act } = useBackend(this.context);
+    const {
+      selectedPort,
+    } = this.state;
+    if (!selectedPort) {
+      return;
+    }
+    if (selectedPort.is_output === isOutput) {
+      return;
+    }
+    let data;
+    if (isOutput) {
+      data = {
+        input_port_id: selectedPort.index,
+        output_port_id: portIndex,
+        input_component_id: selectedPort.component_id,
+        output_component_id: componentId,
+      };
+    } else {
+      data = {
+        input_port_id: portIndex,
+        output_port_id: selectedPort.index,
+        input_component_id: componentId,
+        output_component_id: selectedPort.component_id,
+      };
+    }
+    act("add_connection", data);
+  }
+
+  handlePortDrag(event) {
+    this.setState((state) => ({
+      mouseX: event.clientX - state.backgroundX,
+      mouseY: event.clientY - state.backgroundY,
+    }));
+  }
+
+  handlePortRelease(event) {
+    this.setState({
+      selectedPort: null,
+    });
+
+    window.removeEventListener('mousemove', this.handlePortDrag);
+    window.removeEventListener('mouseup', this.handlePortRelease);
+  }
+
+  handlePortRightClick(portIndex, componentId, port, isOutput, event) {
+    const { act } = useBackend(this.context);
+
+    event.preventDefault();
+    act('remove_connection', {
+      component_id: componentId,
+      is_input: !isOutput,
+      port_id: portIndex,
+    });
+  }
+
+  handleZoomChange(newZoom) {
+    this.setState({
+      zoom: newZoom,
+    });
+  }
+
+  handleBackgroundMoved(newX, newY) {
+    this.setState({
+      backgroundX: newX,
+      backgroundY: newY,
+    });
+  }
+
   componentDidMount() {
     window.addEventListener('mousedown', this.handleMouseDown);
   }
@@ -207,7 +199,40 @@ export class IntegratedCircuit extends Component {
       examined_rel_y,
       is_admin,
     } = data;
-    const { locations } = this.state;
+    const { locations, selectedPort } = this.state;
+    const connections = [];
+
+    for (const comp of components) {
+      if (comp === null) {
+        continue;
+      }
+
+      for (const port of comp.input_ports) {
+        if (port.connected_to === NULL_REF
+          || selectedPort?.ref === port.ref) continue;
+        const output_port = locations[port.connected_to];
+        connections.push({
+          color: (output_port && output_port.color) || 'blue',
+          from: output_port,
+          to: locations[port.ref],
+        });
+      }
+    }
+
+    if (selectedPort) {
+      const { mouseX, mouseY, zoom } = this.state;
+      const isOutput = selectedPort.is_output;
+      const portLocation = locations[selectedPort.ref];
+      const mouseCoords = {
+        x: (mouseX)*Math.pow(zoom, -1),
+        y: (mouseY + ABSOLUTE_Y_OFFSET)*Math.pow(zoom, -1),
+      };
+      connections.push({
+        color: (portLocation && portLocation.color) || 'blue',
+        from: isOutput? portLocation : mouseCoords,
+        to: isOutput? mouseCoords : portLocation,
+      });
+    }
 
     return (
       <Window
@@ -247,7 +272,10 @@ export class IntegratedCircuit extends Component {
             width="100%"
             height="100%"
             backgroundImage={resolveAsset('grid_background.png')}
-            imageWidth={900}>
+            imageWidth={900}
+            onZoomChange={this.handleZoomChange}
+            onBackgroundMoved={this.handleBackgroundMoved}
+          >
             {components.map(
               (comp, index) =>
                 comp && (
@@ -257,10 +285,13 @@ export class IntegratedCircuit extends Component {
                     index={index + 1}
                     onPortUpdated={this.handlePortLocation}
                     onPortLoaded={this.handlePortLocation}
+                    onPortMouseDown={this.handlePortClick}
+                    onPortRightClick={this.handlePortRightClick}
+                    onPortMouseUp={this.handlePortUp}
                   />
                 )
             )}
-            <Connections locations={locations} />
+            <Connections connections={connections} />
           </InfinitePlane>
           {!!examined_name && (
             <CircuitInfo
@@ -279,465 +310,3 @@ export class IntegratedCircuit extends Component {
   }
 }
 
-const Connections = (props, context) => {
-  const { data } = useBackend(context);
-  const { locations } = props;
-  const { components } = data;
-  const connections = [];
-
-  for (const comp of components) {
-    if (comp === null) {
-      continue;
-    }
-
-    for (const port of comp.input_ports) {
-      if (port.connected_to === NULL_REF) continue;
-      const output_port = locations[port.connected_to];
-      connections.push({
-        color: (output_port && output_port.color) || 'blue',
-        from: output_port,
-        to: locations[port.ref],
-      });
-    }
-  }
-
-  const isColorClass = (str) => {
-    if (typeof str === 'string') {
-      return CSS_COLORS.includes(str);
-    }
-  };
-
-  return (
-    <svg
-      width="100%"
-      height="100%"
-      style={{
-        'position': 'absolute',
-        'pointer-events': 'none',
-        'z-index': -1,
-      }}>
-      {connections.map((val, index) => {
-        const from = val.from;
-        const to = val.to;
-        if (!to || !from) {
-          return;
-        }
-        // Starting point
-        let path = `M ${from.x} ${from.y}`;
-        path += `C ${from.x + SVG_CURVE_INTENSITY}, ${from.y},`;
-        path += `${to.x - SVG_CURVE_INTENSITY}, ${to.y},`;
-        path += `${to.x}, ${to.y}`;
-
-        val.color = val.color || 'blue';
-        return (
-          <path
-            className={classes([
-              isColorClass(val.color) && `color-stroke-${val.color}`,
-            ])}
-            key={index}
-            d={path}
-            fill="transparent"
-            stroke-width="2px"
-          />
-        );
-      })}
-    </svg>
-  );
-};
-
-export class ObjectComponent extends Component {
-  constructor() {
-    super();
-    this.state = {
-      isDragging: false,
-      dragPos: null,
-      startPos: null,
-      lastMousePos: null,
-    };
-
-    this.handleStartDrag = this.handleStartDrag.bind(this);
-    this.handleStopDrag = this.handleStopDrag.bind(this);
-    this.handleDrag = this.handleDrag.bind(this);
-  }
-
-  handleStartDrag(e) {
-    const { x, y } = this.props;
-    e.stopPropagation();
-    this.setState({
-      lastMousePos: null,
-      isDragging: true,
-      dragPos: { x: x, y: y },
-      startPos: { x: x, y: y },
-    });
-    window.addEventListener('mousemove', this.handleDrag);
-    window.addEventListener('mouseup', this.handleStopDrag);
-  }
-
-  handleStopDrag(e) {
-    const { act } = useBackend(this.context);
-    const { dragPos } = this.state;
-    const { index } = this.props;
-    if (dragPos) {
-      act('set_component_coordinates', {
-        component_id: index,
-        rel_x: dragPos.x,
-        rel_y: dragPos.y,
-      });
-    }
-
-    window.removeEventListener('mousemove', this.handleDrag);
-    window.removeEventListener('mouseup', this.handleStopDrag);
-    this.setState({ isDragging: false });
-  }
-
-  handleDrag(e) {
-    const { dragPos, isDragging, lastMousePos } = this.state;
-    if (dragPos && isDragging) {
-      e.preventDefault();
-      const { screenZoomX, screenZoomY, screenX, screenY } = e;
-      let xPos = screenZoomX || screenX;
-      let yPos = screenZoomY || screenY;
-      if (lastMousePos) {
-        this.setState({
-          dragPos: {
-            x: dragPos.x - (lastMousePos.x - xPos),
-            y: dragPos.y - (lastMousePos.y - yPos),
-          },
-        });
-      }
-      this.setState({
-        lastMousePos: { x: xPos, y: yPos },
-      });
-    }
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    const { input_ports, output_ports } = this.props;
-
-    return (
-      shallowDiffers(this.props, nextProps)
-      || shallowDiffers(this.state, nextState)
-      || shallowDiffers(input_ports, nextProps.input_ports)
-      || shallowDiffers(output_ports, nextProps.output_ports)
-    );
-  }
-
-  render() {
-    const {
-      input_ports,
-      output_ports,
-      name,
-      x,
-      y,
-      index,
-      color = 'blue',
-      options,
-      option,
-      removable,
-      locations,
-      onPortUpdated,
-      onPortLoaded,
-      ...rest
-    } = this.props;
-    const { act } = useBackend(this.context);
-    const { startPos, dragPos } = this.state;
-
-    let [x_pos, y_pos] = [x, y];
-    if (dragPos && startPos && startPos.x === x_pos && startPos.y === y_pos) {
-      x_pos = dragPos.x;
-      y_pos = dragPos.y;
-    }
-
-    return (
-      <Box
-        {...rest}
-        position="absolute"
-        left={`${x_pos}px`}
-        top={`${y_pos}px`}
-        onMouseDown={this.handleStartDrag}
-        onMouseUp={this.handleStopDrag}
-        onComponentWillUnmount={this.handleDrag}>
-        <Box
-          backgroundColor={color}
-          py={1}
-          px={1}
-          className="ObjectComponent__Titlebar">
-          <Stack>
-            <Stack.Item grow={1} unselectable="on">
-              {name}
-            </Stack.Item>
-            {!!options && (
-              <Stack.Item>
-                <Dropdown
-                  color={color}
-                  nochevron
-                  over
-                  options={options}
-                  displayText={option}
-                  noscroll
-                  onSelected={(selected) =>
-                    act('set_component_option', {
-                      component_id: index,
-                      option: selected,
-                    })}
-                />
-              </Stack.Item>
-            )}
-            <Stack.Item>
-              <Button
-                color="transparent"
-                icon="info"
-                compact
-                onClick={(e) =>
-                  act('set_examined_component', {
-                    component_id: index,
-                    x: e.pageX,
-                    y: e.pageY + ABSOLUTE_Y_OFFSET,
-                  })}
-              />
-            </Stack.Item>
-            {!!removable && (
-              <Stack.Item>
-                <Button
-                  color="transparent"
-                  icon="times"
-                  compact
-                  onClick={() =>
-                    act('detach_component', { component_id: index })}
-                />
-              </Stack.Item>
-            )}
-          </Stack>
-        </Box>
-        <Box
-          className="ObjectComponent__Content"
-          unselectable="on"
-          py={1}
-          px={1}>
-          <Stack>
-            <Stack.Item grow={1}>
-              <Stack vertical fill>
-                {input_ports.map((port, portIndex) => (
-                  <Stack.Item key={portIndex}>
-                    <Port
-                      port={port}
-                      portIndex={portIndex + 1}
-                      componentId={index}
-                      onPortLoaded={onPortLoaded}
-                      onPortUpdated={onPortUpdated}
-                    />
-                  </Stack.Item>
-                ))}
-              </Stack>
-            </Stack.Item>
-            <Stack.Item ml={5}>
-              <Stack vertical>
-                {output_ports.map((port, portIndex) => (
-                  <Stack.Item key={portIndex}>
-                    <Port
-                      port={port}
-                      portIndex={portIndex + 1}
-                      componentId={index}
-                      onPortLoaded={onPortLoaded}
-                      onPortUpdated={onPortUpdated}
-                      isOutput
-                    />
-                  </Stack.Item>
-                ))}
-              </Stack>
-            </Stack.Item>
-          </Stack>
-        </Box>
-      </Box>
-    );
-  }
-}
-
-export class Port extends Component {
-  constructor() {
-    super();
-    this.iconRef = createRef();
-
-    this.componentDidUpdate = this.componentDidUpdate.bind(this);
-    this.componentDidMount = this.componentDidMount.bind(this);
-    this.handlePortClick = this.handlePortClick.bind(this);
-    this.handlePortRightClick = this.handlePortRightClick.bind(this);
-  }
-
-  handlePortClick() {
-    const { act } = useBackend(this.context);
-    const [selectedPort, setSelectedPort] = useLocalState(
-      this.context,
-      'selected_port',
-      null
-    );
-
-    const { port, portIndex, componentId, isOutput } = this.props;
-
-    if (selectedPort) {
-      if (selectedPort.ref === port.ref) {
-        setSelectedPort(null);
-        return;
-      } else {
-        if (selectedPort.is_output === isOutput) {
-          setSelectedPort(null);
-          return;
-        }
-        let data;
-        if (isOutput) {
-          data = {
-            input_port_id: selectedPort.index,
-            output_port_id: portIndex,
-            input_component_id: selectedPort.component_id,
-            output_component_id: componentId,
-          };
-        } else {
-          data = {
-            input_port_id: portIndex,
-            output_port_id: selectedPort.index,
-            input_component_id: componentId,
-            output_component_id: selectedPort.component_id,
-          };
-        }
-        act('add_connection', data);
-        setSelectedPort(null);
-        return;
-      }
-    }
-    setSelectedPort({
-      index: portIndex,
-      component_id: componentId,
-      is_output: isOutput,
-      ref: port.ref,
-    });
-  }
-
-  handlePortRightClick(e) {
-    const { act } = useBackend(this.context);
-    const { port, portIndex, componentId, isOutput, ...rest } = this.props;
-
-    e.preventDefault();
-    act('remove_connection', {
-      component_id: componentId,
-      is_input: !isOutput,
-      port_id: portIndex,
-    });
-  }
-
-  componentDidUpdate() {
-    const { port, onPortUpdated } = this.props;
-    if (onPortUpdated) {
-      onPortUpdated(port, this.iconRef.current);
-    }
-  }
-
-  componentDidMount() {
-    const { port, onPortLoaded } = this.props;
-    if (onPortLoaded) {
-      onPortLoaded(port, this.iconRef.current);
-    }
-  }
-
-  render() {
-    const { port, portIndex, componentId, isOutput, ...rest } = this.props;
-
-    const [selectedPort, setSelectedPort] = useLocalState(
-      this.context,
-      'selected_port',
-      null
-    );
-
-    return (
-      <Stack {...rest} justify={isOutput ? 'flex-end' : 'flex-start'}>
-        {!!isOutput && (
-          <Stack.Item>
-            <DisplayName
-              port={port}
-              isOutput={isOutput}
-              componentId={componentId}
-              portIndex={portIndex}
-            />
-          </Stack.Item>
-        )}
-        <Stack.Item>
-          <Icon
-            color={port.color || 'blue'}
-            name={
-              selectedPort && selectedPort.ref === port.ref
-                ? 'dot-circle'
-                : 'circle'
-            }
-            position="relative"
-            onClick={this.handlePortClick}
-            onContextMenu={this.handlePortRightClick}>
-            <span ref={this.iconRef} className="ObjectComponent__PortPos" />
-          </Icon>
-        </Stack.Item>
-        {!isOutput && (
-          <Stack.Item>
-            <DisplayName
-              port={port}
-              isOutput={isOutput}
-              componentId={componentId}
-              portIndex={portIndex}
-            />
-          </Stack.Item>
-        )}
-      </Stack>
-    );
-  }
-}
-
-const DisplayName = (props, context) => {
-  const { act } = useBackend(context);
-  const { port, isOutput, componentId, portIndex, ...rest } = props;
-
-  const InputComponent = FUNDAMENTAL_DATA_TYPES[port.type || 'any'];
-
-  const hasInput
-    = !isOutput && port.connected_to === NULL_REF && InputComponent;
-
-  return (
-    <Box {...rest}>
-      <Flex direction="column">
-        <Flex.Item>
-          {(hasInput && (
-            <InputComponent
-              setValue={(val, extraParams) =>
-                act('set_component_input', {
-                  component_id: componentId,
-                  port_id: portIndex,
-                  input: val,
-                  ...extraParams,
-                })}
-              color={port.color}
-              name={port.name}
-              value={port.current_data}
-            />
-          ))
-            || (isOutput && (
-              <Button
-                compact
-                color="transparent"
-                onClick={() =>
-                  act('get_component_value', {
-                    component_id: componentId,
-                    port_id: portIndex,
-                  })}>
-                <Box color="white">{port.name}</Box>
-              </Button>
-            ))
-            || port.name}
-        </Flex.Item>
-        <Flex.Item>
-          <Box
-            fontSize={0.75}
-            opacity={0.25}
-            textAlign={isOutput ? 'right' : 'left'}>
-            {port.type || 'any'}
-          </Box>
-        </Flex.Item>
-      </Flex>
-    </Box>
-  );
-};