feat: Added floating inputs

They do not yet change the 3D model, but that is a planned feature.
vantaboard · Sep 21, 2021 · 70049b4 · 70049b4
1 parent 3a18d53
commit 70049b4
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 34 deletions.
diff --git a/src/components/Builder/Workspace/Book/Frame/index.tsx b/src/components/Builder/Workspace/Book/Frame/index.tsx
@@ -20,4 +20,4 @@ export default (props: FrameProps) => {
       <Material />
     </mesh>
   );
-};
+};
diff --git a/src/components/Builder/Workspace/Slider/index.tsx b/src/components/Builder/Workspace/Slider/index.tsx
@@ -1,20 +1,20 @@
 import { Html } from '@react-three/drei';
 import React from 'react';
 import { TitleCase } from '../../../../helpers/typography';
-import { Box } from '../../../Box/styles';
+import Input from '../../../Input';
 import { book } from '../Book';
 import { SliderProps } from './interface';
-import { Input, Prefix, Suffix } from './styles';
 
 export default (props: SliderProps) => {
   const { name, value, pos } = props;
   return (
     <Html center position={pos}>
-      <Box>
-        <Prefix>{TitleCase(name)}</Prefix>
-        <Input name={name} placeholder={value}></Input>
-        <Suffix>{TitleCase(book.units)}</Suffix>
-      </Box>
+      <Input
+        name={name}
+        value={value}
+        prefix={TitleCase(name)}
+        suffix={book.units}
+      ></Input>
     </Html>
   );
 };
diff --git a/src/components/Builder/Workspace/Slider/styles.ts b/src/components/Builder/Workspace/Slider/styles.ts
diff --git a/src/components/Builder/Workspace/index.tsx b/src/components/Builder/Workspace/index.tsx
@@ -5,29 +5,32 @@ import Slider from './Slider';
 
 const Camera = () => <PerspectiveCamera position={[20, 2, 2]} makeDefault />;
 
+const sliderValues: [string, number, number][] = [
+  ['width', book.width, 1],
+  ['height', book.height, 0.75],
+  ['length', book.length, 0.5],
+  ['lip', book.lip, 0.25],
+];
+
+const sliders: Array<JSX.Element> = [];
+sliderValues.forEach((_) => {
+  const name: string = _[0];
+  const value: number = _[1];
+  const percent: number = _[2];
+  sliders.push(
+    <Slider
+      name={name}
+      value={value}
+      pos={[book.length, (book.height / 2) * percent, book.width]}
+    />
+  );
+});
+const Sliders = () => <>{sliders}</>;
+
 export default () => {
   return (
     <>
-      <Slider
-        name={'width'}
-        value={book.width}
-        pos={[book.length, (book.height / 2) * 1, book.width]}
-      />
-      <Slider
-        name={'height'}
-        value={book.height}
-        pos={[book.length, (book.height / 2) * 0.75, book.width]}
-      />
-      <Slider
-        name={'length'}
-        value={book.length}
-        pos={[book.length, (book.height / 2) * 0.5, book.width]}
-      />
-      <Slider
-        name={'lip'}
-        value={book.lip}
-        pos={[book.length, (book.height / 2) * 0.25, book.width]}
-      />
+      <Sliders />
       <Book />
       <ambientLight />
       <Camera />

diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { InputProps } from './interface';
+import { Prefix, StyledInput, Suffix, Wrapper } from './styles';
+
+export default (props: InputProps) => {
+  const { prefix, suffix, name, value } = props;
+  return (
+    <Wrapper>
+      <Prefix>{prefix}</Prefix>
+      <StyledInput name={name} placeholder={value} />
+      <Suffix>{suffix}</Suffix>
+    </Wrapper>
+  );
+};
diff --git a/src/components/Input/interface.ts b/src/components/Input/interface.ts
@@ -0,0 +1,6 @@
+export interface InputProps {
+  name: string;
+  value: string;
+  prefix?: string;
+  suffix?: string;
+}
diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts
@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+export const Wrapper = styled('div')`
+  border-top: 2px;
+  border-bottom: 2px;
+  border-left: 2px;
+  border-right: 2px;
+  border-radius: 5px;
+  border-style: solid;
+  border-color: grey;
+  display: flex;
+  margin-left: 0;
+  padding-left: 0;
+  justify-content: space-around;
+  background-color: white;
+  width: calc(100% + 2rem);
+  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.25);
+`;
+
+export const Prefix = styled('span')`
+  background-color: grey;
+  border: 0;
+  padding-left: 6px;
+  padding-right: 6px;
+  pointer-events: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+`;
+export const StyledInput = styled('input')`
+  border: 0;
+  border-right-width: 1px;
+  border-right-color: black;
+  border-right-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: black;
+  border-bottom-style: solid;
+  margin-top: auto;
+  margin-bottom: auto;
+  height: auto;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: calc(100% + 2rem);
+  margin: 0;
+  background-color: unset;
+  padding-top: 3px;
+  padding-bottom: 3px;
+`;
+export const Suffix = styled('span')`
+  border: 0;
+  background-color: grey;
+  padding-top: 0;
+  margin-top: 0;
+  padding-left: 6px;
+  padding-right: 6px;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+`;
diff --git a/src/data/classes.ts b/src/data/classes.ts
@@ -4,7 +4,7 @@ export class Book {
   width: number;
   lip: number;
   unitSystem: 'metric' | 'imperial';
-  units: 'inches' | 'millimeters';
+  units: 'in' | 'mm';
 
   constructor(
     length: number,
@@ -18,6 +18,6 @@ export class Book {
     this.width = width;
     this.lip = lip;
     this.unitSystem = unitSystem;
-    this.units = unitSystem === 'metric' ? 'millimeters' : 'inches';
+    this.units = unitSystem === 'metric' ? 'mm' : 'in';
   }
 }