allow plated holes to be either horizontal or vertical (#44)

* allow plated holes to be either horizontal or vertical and fixed the error * added biome.json
tscircuit · Nov 19, 2024 · 37d6d16 · 37d6d16
1 parent 22b6c48
commit 37d6d16
Show file tree

Hide file tree

Showing 16 changed files with 249 additions and 280 deletions.
diff --git a/biome.json b/biome.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
   "organizeImports": {
     "enabled": true
   },
@@ -28,8 +28,13 @@
       "suspicious": {
         "noExplicitAny": "off"
       },
+      "complexity": {
+        "noForEach": "info"
+      },
       "style": {
+        "noUselessElse": "off",
         "noNonNullAssertion": "off",
+        "useNumberNamespace": "off",
         "useFilenamingConvention": {
           "level": "error",
           "options": {

diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
     "prepublish": "npm run build",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "format": "biome format . --write"
   },
   "dependencies": {
     "@jscad/modeling": "^2.12.2",

diff --git a/src/CadViewerContainer.tsx b/src/CadViewerContainer.tsx
@@ -1,15 +1,15 @@
-import { Grid, OrbitControls } from "@react-three/drei";
-import { Canvas, useFrame } from "@react-three/fiber";
-import packageJson from "../package.json";
-import { CubeWithLabeledSides } from "./three-components/cube-with-labeled-sides";
+import { Grid, OrbitControls } from "@react-three/drei"
+import { Canvas, useFrame } from "@react-three/fiber"
+import packageJson from "../package.json"
+import { CubeWithLabeledSides } from "./three-components/cube-with-labeled-sides"
 
 export const RotationTracker = () => {
   useFrame(({ camera }) => {
-    window.TSCI_MAIN_CAMERA_ROTATION = camera.rotation;
-  });
+    window.TSCI_MAIN_CAMERA_ROTATION = camera.rotation
+  })
 
-  return <></>;
-};
+  return <></>
+}
 
 export const CadViewerContainer = ({ children }: { children: any }) => {
   return (
@@ -73,5 +73,5 @@ export const CadViewerContainer = ({ children }: { children: any }) => {
         @{packageJson.version}
       </div>
     </div>
-  );
-};
+  )
+}
diff --git a/src/geoms/plated-hole.ts b/src/geoms/plated-hole.ts
@@ -8,7 +8,7 @@ import type { GeomContext } from "../GeomContext"
 
 export const platedHole = (
   plated_hole: PCBPlatedHole,
-  ctx: GeomContext
+  ctx: GeomContext,
 ): Geom3 => {
   if (!(plated_hole as PCBPlatedHole).shape) plated_hole.shape = "circle"
   if (plated_hole.shape === "circle") {
@@ -30,104 +30,146 @@ export const platedHole = (
             center: [plated_hole.x, plated_hole.y, -1.2 / 2],
             radius: plated_hole.outer_diameter / 2,
             height: M,
-          })
+          }),
         ),
         cylinder({
           center: [plated_hole.x, plated_hole.y, 0],
           radius: plated_hole.hole_diameter / 2 - M,
           height: 1.5,
-        })
-      )
+        }),
+      ),
     )
-  }  if (plated_hole.shape === "pill") {
-    const holeWidth = plated_hole.hole_width
-    const holeHeight = plated_hole.hole_height
-    const outerWidth = plated_hole.outer_width || holeWidth + 0.2
-    const outerHeight = plated_hole.outer_height || holeHeight + 0.2
+  }
+  if (plated_hole.shape === "pill") {
+    const shouldRotate = plated_hole.hole_height! > plated_hole.hole_width!
+
+    const holeWidth = shouldRotate
+      ? plated_hole.hole_height!
+      : plated_hole.hole_width!
+    const holeHeight = shouldRotate
+      ? plated_hole.hole_width!
+      : plated_hole.hole_height!
+    const outerHeight = shouldRotate
+      ? plated_hole.outer_width || holeWidth + 0.2
+      : plated_hole.outer_height || holeHeight + 0.2
+
     const holeRadius = holeHeight / 2
-    const outerRadius = outerHeight / 2
+    const rectLength = Math.abs(holeWidth - holeHeight)
 
-    // Create inner hole pill shape
     const mainRect = cuboid({
-      center: [plated_hole.x, plated_hole.y, 0],
-      size: [holeWidth - holeHeight, holeHeight, 1.2]
+      center: shouldRotate
+        ? [plated_hole.x, plated_hole.y, 0]
+        : [plated_hole.x, plated_hole.y, 0],
+      size: shouldRotate
+        ? [holeHeight, rectLength, 1.2]
+        : [rectLength, holeHeight, 1.2],
     })
-    
+
     const leftCap = cylinder({
-      center: [plated_hole.x - (holeWidth - holeHeight)/2, plated_hole.y, 0],
+      center: shouldRotate
+        ? [plated_hole.x, plated_hole.y - rectLength / 2, 0]
+        : [plated_hole.x - rectLength / 2, plated_hole.y, 0],
       radius: holeRadius,
-      height: 1.2
+      height: 1.2,
     })
 
     const rightCap = cylinder({
-      center: [plated_hole.x + (holeWidth - holeHeight)/2, plated_hole.y, 0],
+      center: shouldRotate
+        ? [plated_hole.x, plated_hole.y + rectLength / 2, 0]
+        : [plated_hole.x + rectLength / 2, plated_hole.y, 0],
       radius: holeRadius,
-      height: 1.2
+      height: 1.2,
     })
 
-    // Create outer pads
     const outerMainRect = cuboid({
-      center: [plated_hole.x, plated_hole.y, 1.2/2],
-      size: [outerWidth - outerHeight, outerHeight, M]
+      center: shouldRotate
+        ? [plated_hole.x, plated_hole.y, 1.2 / 2]
+        : [plated_hole.x, plated_hole.y, 1.2 / 2],
+      size: shouldRotate
+        ? [outerHeight, rectLength, M]
+        : [rectLength, outerHeight, M],
     })
 
     const outerLeftCap = cylinder({
-      center: [plated_hole.x - (outerWidth - outerHeight)/2, plated_hole.y, 1.2/2],
-      radius: outerRadius,
-      height: M
+      center: shouldRotate
+        ? [plated_hole.x, plated_hole.y - rectLength / 2, 1.2 / 2]
+        : [plated_hole.x - rectLength / 2, plated_hole.y, 1.2 / 2],
+      radius: outerHeight / 2,
+      height: M,
     })
 
     const outerRightCap = cylinder({
-      center: [plated_hole.x + (outerWidth - outerHeight)/2, plated_hole.y, 1.2/2],
-      radius: outerRadius,
-      height: M
+      center: shouldRotate
+        ? [plated_hole.x, plated_hole.y + rectLength / 2, 1.2 / 2]
+        : [plated_hole.x + rectLength / 2, plated_hole.y, 1.2 / 2],
+      radius: outerHeight / 2,
+      height: M,
     })
 
-    // Bottom pads
     const bottomMainRect = cuboid({
-      center: [plated_hole.x, plated_hole.y, -1.2/2],
-      size: [outerWidth - outerHeight, outerHeight, M]
+      center: shouldRotate
+        ? [plated_hole.x, plated_hole.y, -1.2 / 2]
+        : [plated_hole.x, plated_hole.y, -1.2 / 2],
+      size: shouldRotate
+        ? [outerHeight, rectLength, M]
+        : [rectLength, outerHeight, M],
     })
 
     const bottomLeftCap = cylinder({
-      center: [plated_hole.x - (outerWidth - outerHeight)/2, plated_hole.y, -1.2/2],
-      radius: outerRadius,
-      height: M
+      center: shouldRotate
+        ? [plated_hole.x, plated_hole.y - rectLength / 2, -1.2 / 2]
+        : [plated_hole.x - rectLength / 2, plated_hole.y, -1.2 / 2],
+      radius: outerHeight / 2,
+      height: M,
     })
 
     const bottomRightCap = cylinder({
-      center: [plated_hole.x + (outerWidth - outerHeight)/2, plated_hole.y, -1.2/2],
-      radius: outerRadius,
-      height: M
+      center: shouldRotate
+        ? [plated_hole.x, plated_hole.y + rectLength / 2, -1.2 / 2]
+        : [plated_hole.x + rectLength / 2, plated_hole.y, -1.2 / 2],
+      radius: outerHeight / 2,
+      height: M,
     })
-
     return colorize(
       colors.copper,
       subtract(
         union(
-          mainRect, leftCap, rightCap,
-          outerMainRect, outerLeftCap, outerRightCap,
-          bottomMainRect, bottomLeftCap, bottomRightCap
-        ),[
+          mainRect,
+          leftCap,
+          rightCap,
+          outerMainRect,
+          outerLeftCap,
+          outerRightCap,
+          bottomMainRect,
+          bottomLeftCap,
+          bottomRightCap,
+        ),
+        union(
           cuboid({
             center: [plated_hole.x, plated_hole.y, 0],
-            size: [holeWidth - holeHeight - M*2, holeHeight - M*2, 1.5]
+            size: shouldRotate
+              ? [holeHeight - M, rectLength, 1.5]
+              : [rectLength, holeHeight - M, 1.5],
           }),
           cylinder({
-            center: [plated_hole.x - (holeWidth - holeHeight)/2, plated_hole.y, 0],
+            center: shouldRotate
+              ? [plated_hole.x, plated_hole.y - rectLength / 2, 0]
+              : [plated_hole.x - rectLength / 2, plated_hole.y, 0],
             radius: holeRadius - M,
-            height: 1.5
+            height: 1.5,
           }),
           cylinder({
-            center: [plated_hole.x + (holeWidth - holeHeight)/2, plated_hole.y, 0],
+            center: shouldRotate
+              ? [plated_hole.x, plated_hole.y + rectLength / 2, 0]
+              : [plated_hole.x + rectLength / 2, plated_hole.y, 0],
             radius: holeRadius - M,
-            height: 1.5
-          })
-        ]
-      )
+            height: 1.5,
+          }),
+        ),
+      ),
     )
-  // biome-ignore lint/style/noUselessElse: <explanation>
+    // biome-ignore lint/style/noUselessElse: <explanation>
   } else {
     throw new Error(`Unsupported plated hole shape: ${plated_hole.shape}`)
   }
-}
+}
diff --git a/src/hooks/render/hooks.tsx b/src/hooks/render/hooks.tsx
@@ -1,41 +1,41 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from "react"
 
 // Based off a tweet and codesandbox:
 // https://mobile.twitter.com/hieuhlc/status/1164369876825169920
 
 function useKeyPress(
   targetKey: string,
   onKeyDown: () => void,
-  onKeyUp: () => void
+  onKeyUp: () => void,
 ): void {
   const downHandler = useCallback(
     ({ key }: KeyboardEvent) => {
       if (key === targetKey) onKeyDown()
     },
-    [onKeyDown, targetKey]
+    [onKeyDown, targetKey],
   )
 
   const upHandler = useCallback(
     ({ key }: KeyboardEvent) => {
       if (key === targetKey) onKeyUp()
     },
-    [onKeyUp, targetKey]
+    [onKeyUp, targetKey],
   )
 
   useEffect(() => {
-    window.addEventListener('keydown', downHandler)
-    window.addEventListener('keyup', upHandler)
+    window.addEventListener("keydown", downHandler)
+    window.addEventListener("keyup", upHandler)
     return () => {
-      window.removeEventListener('keydown', downHandler)
-      window.removeEventListener('keyup', upHandler)
+      window.removeEventListener("keydown", downHandler)
+      window.removeEventListener("keyup", upHandler)
     }
   }, [downHandler, upHandler])
 }
 
 const useAnimationFrame = (
   enabled: boolean,
   callback: (time: number, delta: number) => void,
-  deps: React.DependencyList
+  deps: React.DependencyList,
 ): void => {
   const frame = useRef<number>()
   const last = useRef(performance.now())

diff --git a/src/hooks/render/index.tsx b/src/hooks/render/index.tsx
@@ -252,22 +252,22 @@ const Renderer = React.forwardRef<HTMLDivElement, RendererProps>(
             payload: [event.delta[0], -event.delta[1]],
           })
       },
-      { domTarget: ref || forwardRef }
+      { domTarget: ref || forwardRef },
     )
 
     usePinch(
       (event) => {
         if (event.touches === 2)
           dispatch({ type: "SET_ZOOM_DELTA", payload: -event.delta[0] })
       },
-      { domTarget: ref || forwardRef }
+      { domTarget: ref || forwardRef },
     )
 
     useWheel(
       (event) => {
         dispatch({ type: "SET_ZOOM_DELTA", payload: event.delta[1] })
       },
-      { domTarget: ref || forwardRef }
+      { domTarget: ref || forwardRef },
     )
 
     const onShiftDown = React.useCallback(() => {
@@ -350,7 +350,7 @@ const Renderer = React.forwardRef<HTMLDivElement, RendererProps>(
           camera: state.camera,
           speed: options?.viewerOptions?.panSpeed,
         },
-        state.panDelta
+        state.panDelta,
       )
       dispatch({
         type: "SET_CONTROLS",
@@ -379,7 +379,7 @@ const Renderer = React.forwardRef<HTMLDivElement, RendererProps>(
           camera: state.camera,
           speed: options?.viewerOptions?.rotateSpeed,
         },
-        state.rotateDelta
+        state.rotateDelta,
       )
       dispatch({
         type: "SET_CONTROLS",
@@ -403,7 +403,7 @@ const Renderer = React.forwardRef<HTMLDivElement, RendererProps>(
           camera: state.camera,
           speed: options?.viewerOptions?.zoomSpeed,
         },
-        state.zoomDelta
+        state.zoomDelta,
       )
       dispatch({
         type: "SET_CONTROLS",
@@ -431,7 +431,7 @@ const Renderer = React.forwardRef<HTMLDivElement, RendererProps>(
 
     if (!forwardRef) return <div ref={ref} style={{ touchAction: "none" }} />
     return <div ref={forwardRef} style={{ touchAction: "none" }} />
-  }
+  },
 )
 
 Renderer.displayName = "Renderer"