feat: 0.2.0

Author: birkir

.vscode/settings.json

@@ -1,15 +1,6 @@
 {
   "editor.formatOnSave": true,
-  "[typescript]": {
-    "editor.codeActionsOnSave": {
-      "source.organizeImports": true,
-      "source.fixAll": true
-    }
-  },
-  "[typescriptreact]": {
-    "editor.codeActionsOnSave": {
-      "source.organizeImports": true,
-      "source.fixAll": true
-    }
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
   }
-}
+}

example/package.json

@@ -9,8 +9,9 @@
   },
   "dependencies": {
     "react-app-polyfill": "^1.0.0",
-    "react-three-fiber": "^2.4.3",
-    "three": "^0.108.0"
+    "react-three-fiber": "^4.2.20",
+    "three": "^0.119.1",
+    "trim-right": "^1.0.1"
   },
   "alias": {
     "react": "../node_modules/react",
@@ -21,7 +22,7 @@
   "devDependencies": {
     "@types/react": "^16.8.15",
     "@types/react-dom": "^16.8.4",
-    "parcel": "^1.12.3",
-    "typescript": "^3.4.5"
+    "parcel": "^1.12.4",
+    "typescript": "^3.9.7"
   }
 }

example/yarn.lock

@@ -1,6 +1,6 @@
 {
   "name": "react-three-gui",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "main": "dist/index.js",
   "module": "dist/react-three-gui.esm.js",
   "typings": "dist/index.d.ts",
@@ -33,20 +33,20 @@
     "@types/react-color": "^3.0.1",
     "@types/react-dom": "^16.9.1",
     "@types/styled-components": "^4.1.19",
-    "eslint-config-react-app": "5.0.1",
+    "eslint-config-react-app": "^5.2.1",
     "husky": "^3.0.5",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-three-fiber": "^3.0.0-beta.16",
     "three": "^0.109.0",
-    "tsdx": "^0.9.3",
-    "tslib": "^1.10.0",
-    "typescript": "^3.6.3"
+    "tsdx": "^0.13.2",
+    "tslib": "^2.0.1",
+    "typescript": "^3.9.7"
   },
   "dependencies": {
     "react-color": "^2.17.3",
     "react-spring": "next",
     "react-use-gesture": "^6.0.1",
     "styled-components": "^4.4.0"
   }
-}
+}

package.json

@@ -51,23 +51,30 @@ const groupByGroup = (items: any): any => {
     acc[groupName].push(item);
     return acc;
   }, {} as { [key: string]: any });
-}
+};
 
 interface ControlsProps {
-  defaultClosedGroups?: string[]
+  defaultClosedGroups?: string[];
 }
 
 export const Controls = React.memo((props?: ControlsProps) => {
   const [{ pos }, setPos] = useSpring(() => ({ pos: [0, 0] }));
-  const bind = useDrag(({ movement, memo = ((pos as any).getValue ? (pos as any).getValue() : (pos as any).get()) }) => {
-    setPos({
-      pos: [
-        clamp(movement[0] + memo[0], -window.innerWidth + WIDTH + 32, 1),
-        clamp(movement[1] + memo[1], 0, window.innerHeight - 350),
-      ],
-    });
-    return memo;
-  });
+  const bind = useDrag(
+    ({
+      movement,
+      memo = (pos as any).getValue
+        ? (pos as any).getValue()
+        : (pos as any).get(),
+    }) => {
+      setPos({
+        pos: [
+          clamp(movement[0] + memo[0], -window.innerWidth + WIDTH + 32, 1),
+          clamp(movement[1] + memo[1], 0, window.innerHeight - 350),
+        ],
+      });
+      return memo;
+    }
+  );
   const [, set] = useState<number>(0);
 
   useEffect(() => {
@@ -79,9 +86,9 @@ export const Controls = React.memo((props?: ControlsProps) => {
 
   const getGroupConfig = (groupName: string): any => {
     return {
-      defaultClosed: props?.defaultClosedGroups?.includes(groupName) ?? false
-    }
-  }
+      defaultClosed: props?.defaultClosedGroups?.includes(groupName) ?? false,
+    };
+  };
 
   return (
     <Float
@@ -94,9 +101,16 @@ export const Controls = React.memo((props?: ControlsProps) => {
     >
       <Header {...bind()} />
       <Items>
-        {Object.entries(groupByGroup(controls)).map(([groupName, items]: any) => (
-          <ControlGroup key={groupName} title={groupName} controls={items} config={getGroupConfig(groupName)} />
-        ))}
+        {Object.entries(groupByGroup(controls)).map(
+          ([groupName, items]: any) => (
+            <ControlGroup
+              key={groupName}
+              title={groupName}
+              controls={items}
+              config={getGroupConfig(groupName)}
+            />
+          )
+        )}
       </Items>
     </Float>
   );

src/Controls.tsx

@@ -14,7 +14,7 @@ const Heading = styled.h2<{ open: boolean }>`
 
   &:before,
   &:after {
-    content: "";
+    content: '';
     position: absolute;
     top: 8px;
     right: 16px;
@@ -24,18 +24,18 @@ const Heading = styled.h2<{ open: boolean }>`
     /* transition: transform 0.25s ease-out; */
   }
   &:before {
-    transform: rotate(${props => props.open ? 0 : 90}deg);
+    transform: rotate(${props => (props.open ? 0 : 90)}deg);
   }
 
-  &:after{
-    transform: rotate(${props => props.open ? 0 : 180}deg);
+  &:after {
+    transform: rotate(${props => (props.open ? 0 : 180)}deg);
   }
 `;
 
-const Container = styled.div<{ open: boolean, bg: boolean }>`
-  background: ${props => props.bg ? '#f9f9f9' : '#fff'};
+const Container = styled.div<{ open: boolean; bg: boolean }>`
+  background: ${props => (props.bg ? '#f9f9f9' : '#fff')};
   padding: 16px;
-  display: ${props => props.open ? 'block' : 'none'};
+  display: ${props => (props.open ? 'block' : 'none')};
   margin-bottom: 8px;
 `;
 
@@ -44,12 +44,16 @@ export const ControlGroup = ({ title, controls, config }: any) => {
   const isDefault = title !== 'DEFAULT_GROUP';
   return (
     <div>
-      {isDefault && <Heading open={open} onClick={() => setOpen(o => !o)}>{title}</Heading>}
+      {isDefault && (
+        <Heading open={open} onClick={() => setOpen(o => !o)}>
+          {title}
+        </Heading>
+      )}
       <Container open={open} bg={isDefault}>
         {Array.from(controls).map(([id, control]: any) => (
           <ControlItem key={id.current} control={control} />
         ))}
       </Container>
     </div>
-  )
-}
+  );
+};

src/components/ControlGroup.tsx

@@ -27,4 +27,4 @@ export function ControlItem({ control }: any) {
   }, []);
   if (!Control) return null;
   return <Control key={control.id.current} control={control} value={value} />;
-}
+}

src/components/ControlItem.tsx

@@ -47,14 +47,16 @@ export function NumberControl({ control, value }: any) {
   const { config } = control;
   const {
     min = config.scrub ? -Infinity : 0,
-    max = config.scrub ? Infinity : Math.PI
+    max = config.scrub ? Infinity : Math.PI,
   } = config;
 
   let distance = config.distance;
   if (!distance) {
     distance = config.scrub ? 2 : max - min;
   }
-  const [val, setVal] = useState(config.scrub ? CENTER : map(value, min, max, 0, PRECISION));
+  const [val, setVal] = useState(
+    config.scrub ? CENTER : map(value, min, max, 0, PRECISION)
+  );
 
   const handleChange = useCallback(() => {
     if (config.scrub) {

src/controls/NumberControl.tsx

@@ -16,25 +16,26 @@ export const XYPadControl = React.memo(({ control, value }: any) => {
       x: value.x,
       y: value.y,
     },
-    onFrame({ x, y }: any) {
-      if (!scrub) {
-        const vx = clamp(map(x, 0, width / 2, 0, distance), -distance, distance) || 0;
-        const vy = clamp(map(y, 0, height / 2, 0, distance), -distance, distance) || 0
-        control.set(() => ({
-          x: vx < THRESHOLD && vx > -THRESHOLD ? 0 : vx,
-          y: vy < THRESHOLD && vy > -THRESHOLD ? 0 : vy,
-        }));
-      }
+
+    onChange(value: any, b: any) {
+      const v =
+        clamp(map(value, 0, width / 2, 0, distance), -distance, distance) || 0;
+      control.set((prev: any) => ({
+        ...prev,
+        [b.key]: v < THRESHOLD && v > -THRESHOLD ? 0 : v,
+      }));
     },
-  }));
+  })) as any;
 
   const bind = useDrag(({ down, movement }) => {
     if (down && !stage.current) {
       stage.current = value;
     } else if (!down) {
       stage.current = null;
     }
+
     setCursor({ x: down ? movement[0] : 0, y: down ? movement[1] : 0 });
+
     if (scrub && down) {
       control.set(() => ({
         x:
@@ -48,7 +49,9 @@ export const XYPadControl = React.memo(({ control, value }: any) => {
   });
 
   const x = cursor.x.interpolate((n: number) => clamp(n + width / 2, 0, width));
-  const y = cursor.y.interpolate((n: number) => clamp(n + height / 2, 0, height));
+  const y = cursor.y.interpolate((n: number) =>
+    clamp(n + height / 2, 0, height)
+  );
 
   return (
     <BaseControl
@@ -73,7 +76,10 @@ export const XYPadControl = React.memo(({ control, value }: any) => {
         <animated.line x1={0} x2="100%" y1={y} y2={y} stroke="#ccc" />
         <animated.g
           style={{
-            transform: interpolate([x, y], (x, y) => `translate(${x}px, ${y}px)`),
+            transform: interpolate(
+              [x, y],
+              (x, y) => `translate(${x}px, ${y}px)`
+            ),
           }}
         >
           <circle r={8} fill="#ccc" />
@@ -84,4 +90,4 @@ export const XYPadControl = React.memo(({ control, value }: any) => {
   );
 });
 
-// (XYPadControl as any).skipEvents = true;
+// (XYPadControl as any).skipEvents = true;

src/controls/XYPadControl.tsx

@@ -92,4 +92,5 @@ export type ControlConfig = ControlConfigBase &
     | ControlConfigButton
     | ControlConfigColor
     | ControlConfigSelect
-    | ControlConfigXYPad);
+    | ControlConfigXYPad
+  );