feat(parameter-pane): create components for parameter pane (#52)

* feat(parameter-pane): create components for parameter pane

* feat(parameter-pane): replace antd components with custom styled components

- also reindent using space

* fix(parameter-pane): fix styling

---------

Co-authored-by: Chenzhu <[email protected]>

package.json

@@ -15,6 +15,7 @@
     "format-check": "prettier --check \"src/**/*.{ts,tsx}\""
   },
   "dependencies": {
+    "@ant-design/icons": "^5.2.5",
     "@react-three/drei": "^9.64.0",
     "@react-three/fiber": "^8.13.7",
     "@vitejs/plugin-react": "^4.0.4",
@@ -64,4 +65,4 @@
   "volta": {
     "node": "18.15.0"
   }
-}
+}

src/components/ParameterComponents/ChoiceParameter.tsx

@@ -0,0 +1,49 @@
+
+import styled from 'styled-components';
+import { useState } from "react";
+
+const Container = styled.div`
+  margin: 5px 0;
+`
+const Row = styled.div``
+const Col = styled.span``
+const Button = styled.button`
+  -webkit-appearance: none;
+  appearance: none;
+  border:none;
+  padding: 5px 15px;
+  border-radius: calc(1rem + 5px);
+  color: black;
+  background: rgb(217,217,217);
+  margin-right: 15px;
+
+  &.primary {
+    background: rgb(42,40,161);
+    color: white;
+  }
+`
+
+export default function ChoiceParameter(props: {
+  onChange: (value: string)=> void,
+  values: string[],
+  initValue?: string,
+}): React.ReactElement {
+
+  const [value, setValue] = useState(props.values[0])
+  if (props.initValue) {
+    setValue(props.initValue)
+  }
+  // split values into rows of 3
+  const rows: string[][] = []
+  for (let i=0; i<props.values.length; i+=3) {
+    rows.push(props.values.slice(i*3, i*3+3))
+  }
+
+  return (
+  <Container>
+    {rows.map((row, i) => (<Row key={`row-${i}`}>{row.map((val, i) => (<Col key={`col-${i}`}>
+      <Button data-value={val} onClick={() => {setValue(val), props.onChange(val)}} className={val === value ? 'primary' : 'default'}>{val}</Button>
+    </Col>))}</Row>))}
+  </Container>
+  );
+}

src/components/ParameterComponents/DropdownParameter.tsx

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { useState } from "react";
+
+const Select = styled.select`
+  -webkit-appearance: none;
+  appearance: none;
+  width: 15rem;
+  display: block;
+  border: black 1px solid;
+  background: rgb(217,217,217);
+  margin: 5px 0;
+  padding: 0 5px;
+  height: 24px;
+`
+
+export default function DropdownParameter(props: {
+  onChange: (value: string)=> void,
+  values: string[],
+  initValue?: string,
+}): React.ReactElement {
+
+  const [value, setValue] = useState(props.values[0])
+  if (props.initValue) {
+    setValue(props.initValue)
+  }
+  return (
+  <Select value={value} onChange={e => (setValue(e.target.value), props.onChange(e.target.value))}>
+    {props.values.map((val, i) => (
+      <option key={i} value={val} >{val}</option>
+    ))}
+  </Select>
+  );
+}

src/components/ParameterComponents/ParameterLabel.tsx

@@ -0,0 +1,15 @@
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import { Tooltip } from "antd"
+
+
+export default function ParameterLabel(props: {
+  title: string,
+  tooltip?: string,
+}): React.ReactElement {
+  const tooltip: React.ReactElement[] = []
+  if (props.tooltip) {
+    tooltip.push(<Tooltip placement="right" title={props.tooltip}><QuestionCircleOutlined /></Tooltip>)
+  }
+  const label = (<div>{props.title}&nbsp;&nbsp;{tooltip}</div>)
+  return label;
+}

src/components/ParameterComponents/SliderParameter.tsx

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+import { useState } from "react";
+
+const Slider = styled.input`
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  width: 15rem;
+  height: 24px;
+  display: block;
+  margin: 5px 0;
+
+  &::-webkit-slider-runnable-track{
+    -webkit-appearance: none;
+    background: rgb(217,217,217);
+    height:100%;
+  }
+  &::-moz-range-track {
+    -webkit-appearance: none;
+    background: rgb(217,217,217);
+    height:100%;
+  }
+  &::-webkit-slider-thumb{
+    -webkit-appearance: none;
+    background: rgb(32,32,32);
+    height:100%;
+    width:10px;
+    border:none;
+    border-radius:0;
+  }
+  &::-moz-range-thumb {
+    -webkit-appearance: none;
+    background: rgb(32,32,32);
+    height:100%;
+    width:10px;
+    border:none;
+    border-radius:0;
+  }
+`
+
+export default function SliderParameter(props: {
+  onChange: (value: number)=> void,
+  lowerBound: number,
+  upperBound: number,
+  initValue?: number,
+}): React.ReactElement {
+
+  const [value, setValue] = useState(props.lowerBound)
+  if (props.initValue) {
+    setValue(props.initValue)
+  }
+
+  return (
+  <>
+    <Slider type="range" min={props.lowerBound} max={props.upperBound} defaultValue={value} onChange={(e) => {const val = parseFloat(e.target.value); setValue(val), props.onChange(val)}} />
+  </>
+  );
+}