tldraw/components/controls-panel/control.tsx

import state, { useSelector } from "state"
import styled from "styles"
import {
  ControlType,
  NumberCodeControl,
  SelectCodeControl,
  TextCodeControl,
  VectorCodeControl,
} from "types"

export default function Control({ id }: { id: string }) {
  const control = useSelector((s) => s.data.codeControls[id])

  if (!control) return null

  return (
    <>
      <label>{control.label}</label>
      {control.type === ControlType.Number ? (
        <NumberControl {...control} />
      ) : control.type === ControlType.Vector ? (
        <VectorControl {...control} />
      ) : control.type === ControlType.Text ? (
        <TextControl {...control} />
      ) : control.type === ControlType.Select ? (
        <SelectControl {...control} />
      ) : null}
    </>
  )
}

function NumberControl({ id, min, max, step, value }: NumberCodeControl) {
  return (
    <Inputs>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(e) =>
          state.send("CHANGED_CODE_CONTROL", {
            [id]: Number(e.currentTarget.value),
          })
        }
      />
      <input
        type="number"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(e) =>
          state.send("CHANGED_CODE_CONTROL", {
            [id]: Number(e.currentTarget.value),
          })
        }
      />
    </Inputs>
  )
}

function VectorControl({ id, value, isNormalized }: VectorCodeControl) {
  return (
    <Inputs>
      <input
        type="range"
        min={isNormalized ? -1 : -Infinity}
        max={isNormalized ? 1 : Infinity}
        step={0.01}
        value={value[0]}
        onChange={(e) =>
          state.send("CHANGED_CODE_CONTROL", {
            [id]: [Number(e.currentTarget.value), value[1]],
          })
        }
      />
      <input
        type="number"
        min={isNormalized ? -1 : -Infinity}
        max={isNormalized ? 1 : Infinity}
        step={0.01}
        value={value[0]}
        onChange={(e) =>
          state.send("CHANGED_CODE_CONTROL", {
            [id]: [Number(e.currentTarget.value), value[1]],
          })
        }
      />
      <input
        type="range"
        min={isNormalized ? -1 : -Infinity}
        max={isNormalized ? 1 : Infinity}
        step={0.01}
        value={value[1]}
        onChange={(e) =>
          state.send("CHANGED_CODE_CONTROL", {
            [id]: [value[0], Number(e.currentTarget.value)],
          })
        }
      />
      <input
        type="number"
        min={isNormalized ? -1 : -Infinity}
        max={isNormalized ? 1 : Infinity}
        step={0.01}
        value={value[1]}
        onChange={(e) =>
          state.send("CHANGED_CODE_CONTROL", {
            [id]: [value[0], Number(e.currentTarget.value)],
          })
        }
      />
    </Inputs>
  )
}

function TextControl({}: TextCodeControl) {
  return <></>
}

function SelectControl({}: SelectCodeControl) {
  return <></>
}

const Inputs = styled("div", {
  display: "flex",
  gap: "8px",
  height: "100%",

  "& input": {
    font: "$ui",
    width: "64px",
    fontSize: "$1",
    border: "1px solid $inputBorder",
    backgroundColor: "$input",
    color: "$text",
    height: "100%",
    padding: "0px 6px",
  },
  "& input[type='range']": {
    padding: 0,
    flexGrow: 2,
  },
})