@tscircuit/schematic-viewer 1.3.0 → 1.4.1

package/src/lib/utils/colors.ts

@@ -0,0 +1,235 @@
+// Kicad-2020 color scheme
+export const colorMap = {
+  "3d_viewer": {
+    background_bottom: "rgb(102, 102, 128)",
+    background_top: "rgb(204, 204, 230)",
+    board: "rgb(51, 43, 23)",
+    copper: "rgb(179, 156, 0)",
+    silkscreen_bottom: "rgb(230, 230, 230)",
+    silkscreen_top: "rgb(230, 230, 230)",
+    soldermask: "rgb(20, 51, 36)",
+    solderpaste: "rgb(128, 128, 128)",
+  },
+  board: {
+    anchor: "rgb(255, 38, 226)",
+    aux_items: "rgb(255, 255, 255)",
+    b_adhes: "rgb(0, 0, 132)",
+    b_crtyd: "rgb(255, 38, 226)",
+    b_fab: "rgb(88, 93, 132)",
+    b_mask: "rgba(2, 255, 238, 0.400)",
+    b_paste: "rgb(0, 194, 194)",
+    b_silks: "rgb(232, 178, 167)",
+    background: "rgb(0, 16, 35)",
+    cmts_user: "rgb(89, 148, 220)",
+    copper: {
+      b: "rgb(77, 127, 196)",
+      f: "rgb(200, 52, 52)",
+      in1: "rgb(127, 200, 127)",
+      in10: "rgb(237, 124, 51)",
+      in11: "rgb(91, 195, 235)",
+      in12: "rgb(247, 111, 142)",
+      in13: "rgb(167, 165, 198)",
+      in14: "rgb(40, 204, 217)",
+      in15: "rgb(232, 178, 167)",
+      in16: "rgb(242, 237, 161)",
+      in17: "rgb(237, 124, 51)",
+      in18: "rgb(91, 195, 235)",
+      in19: "rgb(247, 111, 142)",
+      in2: "rgb(206, 125, 44)",
+      in20: "rgb(167, 165, 198)",
+      in21: "rgb(40, 204, 217)",
+      in22: "rgb(232, 178, 167)",
+      in23: "rgb(242, 237, 161)",
+      in24: "rgb(237, 124, 51)",
+      in25: "rgb(91, 195, 235)",
+      in26: "rgb(247, 111, 142)",
+      in27: "rgb(167, 165, 198)",
+      in28: "rgb(40, 204, 217)",
+      in29: "rgb(232, 178, 167)",
+      in3: "rgb(79, 203, 203)",
+      in30: "rgb(242, 237, 161)",
+      in4: "rgb(219, 98, 139)",
+      in5: "rgb(167, 165, 198)",
+      in6: "rgb(40, 204, 217)",
+      in7: "rgb(232, 178, 167)",
+      in8: "rgb(242, 237, 161)",
+      in9: "rgb(141, 203, 129)",
+    },
+    cursor: "rgb(255, 255, 255)",
+    drc: "rgb(194, 194, 194)",
+    drc_error: "rgba(215, 91, 107, 0.800)",
+    drc_exclusion: "rgb(255, 255, 255)",
+    drc_warning: "rgba(255, 208, 66, 0.902)",
+    dwgs_user: "rgb(194, 194, 194)",
+    eco1_user: "rgb(180, 219, 210)",
+    eco2_user: "rgb(216, 200, 82)",
+    edge_cuts: "rgb(208, 210, 205)",
+    f_adhes: "rgb(132, 0, 132)",
+    f_crtyd: "rgb(255, 0, 245)",
+    f_fab: "rgb(175, 175, 175)",
+    f_mask: "rgba(216, 100, 255, 0.400)",
+    f_paste: "rgba(180, 160, 154, 0.902)",
+    f_silks: "rgb(242, 237, 161)",
+    footprint_text_back: "rgb(0, 0, 132)",
+    footprint_text_front: "rgb(194, 194, 194)",
+    footprint_text_invisible: "rgb(132, 132, 132)",
+    grid: "rgb(132, 132, 132)",
+    grid_axes: "rgb(194, 194, 194)",
+    margin: "rgb(255, 38, 226)",
+    microvia: "rgb(0, 132, 132)",
+    no_connect: "rgb(0, 0, 132)",
+    pad_back: "rgb(77, 127, 196)",
+    pad_front: "rgb(200, 52, 52)",
+    pad_plated_hole: "rgb(194, 194, 0)",
+    pad_through_hole: "rgb(227, 183, 46)",
+    plated_hole: "rgb(26, 196, 210)",
+    ratsnest: "rgba(245, 255, 213, 0.702)",
+    select_overlay: "rgb(4, 255, 67)",
+    through_via: "rgb(236, 236, 236)",
+    user_1: "rgb(194, 194, 194)",
+    user_2: "rgb(89, 148, 220)",
+    user_3: "rgb(180, 219, 210)",
+    user_4: "rgb(216, 200, 82)",
+    user_5: "rgb(194, 194, 194)",
+    user_6: "rgb(89, 148, 220)",
+    user_7: "rgb(180, 219, 210)",
+    user_8: "rgb(216, 200, 82)",
+    user_9: "rgb(232, 178, 167)",
+    via_blind_buried: "rgb(187, 151, 38)",
+    via_hole: "rgb(227, 183, 46)",
+    via_micro: "rgb(0, 132, 132)",
+    via_through: "rgb(236, 236, 236)",
+    worksheet: "rgb(200, 114, 171)",
+  },
+  gerbview: {
+    axes: "rgb(0, 0, 132)",
+    background: "rgb(0, 0, 0)",
+    dcodes: "rgb(255, 255, 255)",
+    grid: "rgb(132, 132, 132)",
+    layers: [
+      "rgb(132, 0, 0)",
+      "rgb(194, 194, 0)",
+      "rgb(194, 0, 194)",
+      "rgb(194, 0, 0)",
+      "rgb(0, 132, 132)",
+      "rgb(0, 132, 0)",
+      "rgb(0, 0, 132)",
+      "rgb(132, 132, 132)",
+      "rgb(132, 0, 132)",
+      "rgb(194, 194, 194)",
+      "rgb(132, 0, 132)",
+      "rgb(132, 0, 0)",
+      "rgb(132, 132, 0)",
+      "rgb(194, 194, 194)",
+      "rgb(0, 0, 132)",
+      "rgb(0, 132, 0)",
+      "rgb(132, 0, 0)",
+      "rgb(194, 194, 0)",
+      "rgb(194, 0, 194)",
+      "rgb(194, 0, 0)",
+      "rgb(0, 132, 132)",
+      "rgb(0, 132, 0)",
+      "rgb(0, 0, 132)",
+      "rgb(132, 132, 132)",
+      "rgb(132, 0, 132)",
+      "rgb(194, 194, 194)",
+      "rgb(132, 0, 132)",
+      "rgb(132, 0, 0)",
+      "rgb(132, 132, 0)",
+      "rgb(194, 194, 194)",
+      "rgb(0, 0, 132)",
+      "rgb(0, 132, 0)",
+      "rgb(132, 0, 0)",
+      "rgb(194, 194, 0)",
+      "rgb(194, 0, 194)",
+      "rgb(194, 0, 0)",
+      "rgb(0, 132, 132)",
+      "rgb(0, 132, 0)",
+      "rgb(0, 0, 132)",
+      "rgb(132, 132, 132)",
+      "rgb(132, 0, 132)",
+      "rgb(194, 194, 194)",
+      "rgb(132, 0, 132)",
+      "rgb(132, 0, 0)",
+      "rgb(132, 132, 0)",
+      "rgb(194, 194, 194)",
+      "rgb(0, 0, 132)",
+      "rgb(0, 132, 0)",
+      "rgb(132, 0, 0)",
+      "rgb(194, 194, 0)",
+      "rgb(194, 0, 194)",
+      "rgb(194, 0, 0)",
+      "rgb(0, 132, 132)",
+      "rgb(0, 132, 0)",
+      "rgb(0, 0, 132)",
+      "rgb(132, 132, 132)",
+      "rgb(132, 0, 132)",
+      "rgb(194, 194, 194)",
+      "rgb(132, 0, 132)",
+      "rgb(132, 0, 0)",
+    ],
+    negative_objects: "rgb(132, 132, 132)",
+    worksheet: "rgb(0, 0, 132)",
+  },
+  meta: {
+    filename: "kicad_2020",
+    name: "KiCad 2020",
+    version: 2,
+  },
+  palette: [
+    "rgb(132, 0, 0)",
+    "rgb(194, 194, 0)",
+    "rgb(194, 0, 194)",
+    "rgb(194, 0, 0)",
+    "rgb(0, 132, 132)",
+    "rgb(0, 132, 0)",
+    "rgb(0, 0, 132)",
+    "rgb(132, 132, 132)",
+    "rgb(132, 0, 132)",
+    "rgb(194, 194, 194)",
+    "rgb(132, 0, 132)",
+    "rgb(132, 0, 0)",
+    "rgb(132, 132, 0)",
+    "rgb(194, 194, 194)",
+    "rgb(0, 0, 132)",
+    "rgb(0, 132, 0)",
+  ],
+  schematic: {
+    aux_items: "rgb(46, 46, 46)",
+    background: "rgb(245, 241, 237)",
+    brightened: "rgb(255, 0, 255)",
+    bus: "rgb(0, 0, 132)",
+    bus_junction: "rgb(0, 0, 132)",
+    component_body: "rgb(255, 255, 194)",
+    component_outline: "rgb(132, 0, 0)",
+    cursor: "rgb(15, 15, 15)",
+    erc_error: "rgba(230, 9, 13, 0.800)",
+    erc_warning: "rgba(209, 146, 0, 0.800)",
+    fields: "rgb(132, 0, 132)",
+    grid: "rgb(181, 181, 181)",
+    grid_axes: "rgb(0, 0, 132)",
+    hidden: "rgb(194, 194, 194)",
+    junction: "rgb(0, 150, 0)",
+    label_global: "rgb(132, 0, 0)",
+    label_hier: "rgb(114, 86, 0)",
+    label_local: "rgb(15, 15, 15)",
+    net_name: "rgb(132, 132, 132)",
+    no_connect: "rgb(0, 0, 132)",
+    note: "rgb(0, 0, 194)",
+    override_item_colors: false,
+    pin: "rgb(132, 0, 0)",
+    pin_name: "rgb(0, 100, 100)",
+    pin_number: "rgb(169, 0, 0)",
+    reference: "rgb(0, 100, 100)",
+    shadow: "rgba(102, 179, 255, 0.800)",
+    sheet: "rgb(132, 0, 0)",
+    sheet_background: "rgba(253, 255, 231, 0.000)",
+    sheet_fields: "rgb(132, 0, 132)",
+    sheet_filename: "rgb(114, 86, 0)",
+    sheet_label: "rgb(0, 100, 100)",
+    sheet_name: "rgb(0, 100, 100)",
+    value: "rgb(0, 100, 100)",
+    wire: "rgb(0, 150, 0)",
+    worksheet: "rgb(132, 0, 0)",
+  },
+}

package/src/lib/utils/direction-to-vec.ts

@@ -17,7 +17,7 @@ export const vecToDirection = ({ x, y }: { x: number; y: number }) => {
 }
 
 export const rotateClockwise = (
-  direction: "up" | "down" | "left" | "right"
+  direction: "up" | "down" | "left" | "right",
 ) => {
   if (direction === "up") return "right"
   else if (direction === "right") return "down"
@@ -26,7 +26,7 @@ export const rotateClockwise = (
 }
 
 export const rotateCounterClockwise = (
-  direction: "up" | "down" | "left" | "right"
+  direction: "up" | "down" | "left" | "right",
 ) => {
   if (direction === "up") return "left"
   else if (direction === "left") return "down"
@@ -36,7 +36,7 @@ export const rotateCounterClockwise = (
 
 export const rotateDirection = (
   direction: "up" | "down" | "left" | "right",
-  num90DegreeClockwiseTurns: number
+  num90DegreeClockwiseTurns: number,
 ) => {
   while (num90DegreeClockwiseTurns > 0) {
     direction = rotateClockwise(direction)

package/src/schematic-components/SVGPathComponent.tsx

@@ -1,28 +1,41 @@
 import { useGlobalStore } from "lib/render-context"
 import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
-import { useCallback, useState } from "react"
-
+import { useState } from "react"
 import {
   applyToPoint,
-  toSVG,
-  inverse,
   compose,
-  translate,
   scale,
+  toSVG,
+  translate,
 } from "transformation-matrix"
 
+interface PathProps {
+  type?: "path"
+  strokeWidth: number
+  stroke: string
+  fill?: string
+  d: string
+}
+
+interface CircleProps {
+  type: "circle"
+  cx: number
+  cy: number
+  r: number
+  strokeWidth: number
+  stroke: string
+  fill?: string
+}
+
+export type SVGElement = PathProps | CircleProps
+
 interface Props {
   rotation: number
   center: { x: number; y: number }
   size: { width: number; height: number }
   invertY?: boolean
   shiftToBottom?: boolean
-  paths: Array<{
-    strokeWidth: number
-    stroke: string
-    fill?: string
-    d: string
-  }>
+  paths: SVGElement[]
   zIndex?: number
   hoverContent?: any
 }
@@ -38,36 +51,16 @@ export const SVGPathComponent = ({
   hoverContent,
 }: Props) => {
   const ct = useGlobalStore((s) => s.camera_transform)
-  const pathBounds = getSVGPathBounds(paths.map((p) => p.d))
-  // Margin in SVG Space
-  const badRatio =
-    Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) >
-    0.01
-  if (badRatio) {
-    // console.warn(
-    //   `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`
-    // )
-  }
-  // pathBounds.height = Math.max(pathBounds.height, 0.01)
-  // pathBounds.width = Math.max(pathBounds.width, 0.01)
-
-  // Three sizes:
-  // pathBound size (the size of the path in "d")
-  // innerSize (the screen-space size of the path)
-  // fullSize (the screen-space size of the svg element, innerSize plus padding)
-
-  const padding = {
-    x: 0,
-    y: 0,
-  }
+  const pathBounds = getSVGPathBounds(
+    paths.filter((p): p is PathProps => p.type !== "circle").map((p) => p.d),
+  )
 
+  const padding = { x: 0, y: 0 }
   const absoluteCenter = applyToPoint(ct, center)
-
   const innerSize = {
     width: size.width * ct.a,
     height: size.height * Math.abs(ct.d),
   }
-
   const fullSize = {
     width: innerSize.width + padding.x * 2,
     height: innerSize.height + padding.y * 2,
@@ -78,95 +71,61 @@ export const SVGPathComponent = ({
   const svgLeft = absoluteCenter.x - fullSize.width / 2
   const svgTop = absoluteCenter.y - fullSize.height / 2
 
-  // const viewBox = `${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`
-  // const viewBox2 = `${svgLeft} ${svgTctualAbsWidth} ${actualAbsHeight}`
-
-  // console.log(
-  //   pathBounds,
-  //   fullSize,
-  //   fullSize.width / pathBounds.width,
-  //   fullSize.height / pathBounds.height
-  // )
   const preferredRatio =
     pathBounds.width === 0
       ? innerSize.height / pathBounds.height
       : innerSize.width / pathBounds.width
+
   const svgToScreen = compose(
-    // translate(0, 0)
     scale(
       pathBounds.width === 0
         ? preferredRatio
         : fullSize.width / pathBounds.width,
       pathBounds.height === 0
         ? preferredRatio
-        : fullSize.height / pathBounds.height
+        : fullSize.height / pathBounds.height,
     ),
-    translate(-pathBounds.minX, -pathBounds.minY)
-    // translate(center.x, center.y)
+    translate(-pathBounds.minX, -pathBounds.minY),
   )
-  // console.log(svgToScreen)
-  // console.log(toSVG(svgToScreen))
-  // console.log(paths[0].d)
-  // translate(..., ...),
 
   return (
-    <>
-      {hovering && (
-        <>
-          <div
-            style={{
-              position: "absolute",
-              left: svgLeft - 6,
-              top: svgTop - 6,
-              pointerEvents: "none",
-              width: fullSize.width + 12,
-              height: fullSize.height + 12,
-              border: "1px red solid",
-              mixBlendMode: "difference",
-              zIndex: 1000,
-            }}
+    <svg
+      onMouseOver={() => setHovering(Boolean(hoverContent))}
+      onMouseOut={() => setHovering(false)}
+      style={{
+        position: "absolute",
+        cursor: hovering ? "pointer" : undefined,
+        zIndex,
+        transform: [
+          invertY ? "scale(1, 1)" : "scale(1, -1)",
+          shiftToBottom ? "translate(0, 100%)" : "",
+          rotation === 0 ? "" : `rotate(${rotation}deg)`,
+        ].join(" "),
+        left: svgLeft,
+        top: svgTop,
+      }}
+      overflow="visible"
+      width={fullSize.width}
+      height={fullSize.height}
+    >
+      {paths.map((p, i) =>
+        p.type === "circle" ? (
+          <circle
+            key={i}
+            transform={toSVG(
+              compose(
+                scale(1, 1), // Add a smaller scale factor for circles
+                svgToScreen,
+              ),
+            )}
+            cx={p.cx}
+            cy={p.cy}
+            r={p.r}
+            fill={"none"}
+            strokeWidth={2.25 * (p.strokeWidth || 1)}
+            stroke={p.stroke || "red"}
           />
-          <div
-            style={{
-              position: "absolute",
-              left: svgLeft + fullSize.width + 10,
-              pointerEvents: "none",
-              zIndex: 1000,
-              color: "red",
-              mixBlendMode: "difference",
-              top: svgTop,
-              fontFamily: "monospace",
-              fontSize: 14,
-            }}
-          >
-            {hoverContent}
-          </div>
-        </>
-      )}
-      <svg
-        onMouseOver={() => setHovering(Boolean(hoverContent))}
-        onMouseOut={() => setHovering(false)}
-        style={{
-          position: "absolute",
-          // backgroundColor: hovering ? "rgba(0, 0, 255, 0.5)" : "transparent",
-          cursor: hovering ? "pointer" : undefined,
-          zIndex,
-          transform: [
-            invertY ? "scale(1, 1)" : "scale(1, -1)", // TODO based on ct.d
-            shiftToBottom ? "translate(0, 100%)" : "",
-            rotation === 0 ? "" : `rotate(${rotation}rad)`,
-          ].join(" "),
-          left: svgLeft,
-          top: svgTop,
-          // overflow: "hidden",
-          // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.1)" : "transparent",
-          // backgroundColor: "rgba(255, 0, 0, 0.1)",
-        }}
-        overflow="visible"
-        width={fullSize.width}
-        height={fullSize.height}
-      >
-        {paths.map((p, i) => (
+        ) : (
           <path
             key={i}
             transform={toSVG(svgToScreen)}
@@ -174,11 +133,11 @@ export const SVGPathComponent = ({
             strokeLinecap="round"
             strokeWidth={1.5 * (p.strokeWidth || 1)}
             stroke={p.stroke || "red"}
-            d={p.d}
+            d={p.d || ""}
           />
-        ))}
-      </svg>
-    </>
+        ),
+      )}
+    </svg>
   )
 }