@tscircuit/schematic-viewer 1.4.2 → 2.0.0

package/src/schematic-components/SVGPathComponent.tsx

@@ -1,183 +0,0 @@
-import { useGlobalStore } from "lib/render-context"
-import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
-import { useState } from "react"
-import {
-  applyToPoint,
-  compose,
-  scale,
-  toSVG,
-  translate,
-} from "transformation-matrix"
-import "../pages/style.css"
-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
-}
-
-interface TextProps {
-  type: "text"
-  cx: number
-  cy: number
-  text: string
-  fontSize?: number
-  fill: string
-  anchor?: "start" | "middle" | "end"
-  rotation?: number
-  stroke?: string
-}
-
-export type SVGElement = PathProps | CircleProps | TextProps
-
-interface Props {
-  rotation: number
-  center: { x: number; y: number }
-  size: { width: number; height: number }
-  invertY?: boolean
-  shiftToBottom?: boolean
-  paths: SVGElement[]
-  zIndex?: number
-  hoverContent?: any
-}
-
-export const SVGPathComponent = ({
-  size,
-  center,
-  rotation,
-  paths,
-  zIndex,
-  invertY,
-  shiftToBottom,
-  hoverContent,
-}: Props) => {
-  const ct = useGlobalStore((s) => s.camera_transform)
-  const pathBounds = getSVGPathBounds(
-    paths
-      .filter((p): p is PathProps => p.type !== "circle" && p.type !== "text")
-      .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,
-  }
-  const [hovering, setHovering] = useState(false)
-  const svgLeft = absoluteCenter.x - fullSize.width / 2
-  const svgTop = absoluteCenter.y - fullSize.height / 2
-  const preferredRatio =
-    pathBounds.width === 0
-      ? innerSize.height / pathBounds.height
-      : innerSize.width / pathBounds.width
-  const svgToScreen = compose(
-    scale(
-      pathBounds.width === 0
-        ? preferredRatio
-        : fullSize.width / pathBounds.width,
-      pathBounds.height === 0
-        ? preferredRatio
-        : fullSize.height / pathBounds.height,
-    ),
-    translate(-pathBounds.minX, -pathBounds.minY),
-  )
-
-  const baseFontSize = 0.15 // Fixed base font size in schematic units
-
-  return (
-    // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
-    <svg
-      onMouseOver={() => setHovering(Boolean(hoverContent))}
-      onFocus={() => setHovering(Boolean(hoverContent))}
-      onMouseOut={() => setHovering(false)}
-      onBlur={() => 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) => {
-        if (p.type === "circle") {
-          return (
-            <circle
-              key={`${p.type}-${i}`}
-              transform={toSVG(compose(scale(1, 1), svgToScreen))}
-              cx={p.cx}
-              cy={p.cy}
-              r={p.r}
-              fill={"none"}
-              strokeWidth={2.25 * (p.strokeWidth || 1)}
-              stroke={p.stroke || "red"}
-            />
-          )
-        }
-        if (p.type === "text") {
-          const transformedPos = applyToPoint(svgToScreen, { x: p.cx, y: p.cy })
-          const scaleFactor = fullSize.width / pathBounds.width || 1
-
-          return (
-            <g key={`${p.type}-${i}`}>
-              <text
-                className="schematic-text"
-                x={transformedPos.x}
-                y={transformedPos.y}
-                fill={p.fill}
-                fontSize={baseFontSize * scaleFactor}
-                textAnchor={p.anchor || "middle"}
-                dominantBaseline="middle"
-                transform={`scale(1,-1) rotate(${p.rotation || 0})`}
-                style={{
-                  transformBox: "fill-box",
-                  transformOrigin: "center",
-                }}
-                stroke={p.stroke}
-              >
-                {p.text}
-              </text>
-            </g>
-          )
-        }
-        // Handle the "path" type directly
-        return (
-          <path
-            key={`${p.type}-${i}`}
-            transform={toSVG(svgToScreen)}
-            fill={p.fill ?? "none"}
-            strokeLinecap="round"
-            strokeWidth={1.5 * (p.strokeWidth || 1)}
-            stroke={p.stroke || "red"}
-            d={p.d || ""}
-          />
-        )
-      })}
-    </svg>
-  )
-}
-
-export default SVGPathComponent

package/src/schematic-components/SVGPathComponent2.tsx

@@ -1,76 +0,0 @@
-import { useGlobalStore } from "lib/render-context"
-import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
-import { useCallback, useState } from "react"
-
-import {
-  applyToPoint,
-  toSVG,
-  inverse,
-  compose,
-  translate,
-  scale,
-} from "transformation-matrix"
-
-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
-  }>
-  zIndex?: number
-  hoverContent?: any
-}
-
-export const SVGPathComponent2 = ({
-  size,
-  center,
-  rotation,
-  paths,
-  zIndex,
-  invertY,
-  shiftToBottom,
-  hoverContent,
-}: Props) => {
-  const ct = useGlobalStore((c) => c.camera_transform)
-  const pathBounds = getSVGPathBounds(paths.map((p) => p.d))
-  // Margin in SVG Space
-
-  return (
-    <svg
-      style={{
-        position: "absolute",
-        left: 0,
-        top: 0,
-        right: 0,
-        bottom: 0,
-        // backgroundColor: hovering ? "rgba(0, 0, 255, 0.5)" : "transparent",
-        pointerEvents: "none",
-        zIndex,
-        // overflow: "hidden",
-        // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.1)" : "transparent",
-        // backgroundColor: "rgba(255, 0, 0, 0.1)",
-      }}
-      overflow="visible"
-    >
-      {paths.map((p, i) => (
-        <path
-          key={i}
-          transform={toSVG(ct)}
-          fill={p.fill ?? "none"}
-          strokeLinecap="round"
-          strokeWidth={1.5 * (p.strokeWidth || 1)}
-          stroke={p.stroke || "red"}
-          d={p.d}
-        />
-      ))}
-    </svg>
-  )
-}
-
-export default SVGPathComponent2

package/src/schematic-components/SchematicChip.tsx

@@ -1,202 +0,0 @@
-import type {
-  AnyCircuitElement,
-  SchematicPort as OriginalSchematicPort,
-  SchematicComponent,
-} from "circuit-json"
-import type * as Type from "lib/types"
-import { colorMap } from "lib/utils/colors"
-import type React from "react"
-import SVGPathComponent from "./SVGPathComponent"
-import SchematicText from "./SchematicText"
-
-interface Props {
-  component: {
-    source: Type.SimpleBug
-    schematic: SchematicComponent
-    allElements: AnyCircuitElement[]
-  }
-}
-
-type ExtendedCenter = OriginalSchematicPort["center"] & {
-  side: "left" | "right" | "top" | "bottom" | "center"
-  pinNumber: number
-  distanceFromEdge: number
-  trueIndex: number
-}
-
-type SchematicPort = Omit<OriginalSchematicPort, "center"> & {
-  center: ExtendedCenter
-}
-
-export const SchematicChip: React.FC<Props> = ({
-  component: { source, schematic, allElements },
-}) => {
-  const { center, size, rotation, schematic_component_id } = schematic
-  const { manufacturerPartNumber, name } = source
-  const chipWidth = size.width
-  const chipHeight = size.height
-
-  const paths: Array<{
-    type: "path" | "circle" | "text"
-    strokeWidth: number
-    stroke: string
-    fill?: string
-    d?: string
-    cx?: number
-    cy?: number
-    r?: number
-    text?: string
-    anchor?: string
-    rotation?: number
-  }> = []
-
-  // Main chip rectangle
-  paths.push({
-    type: "path",
-    strokeWidth: 0.02,
-    stroke: colorMap.schematic.component_outline,
-    fill: colorMap.schematic.component_body,
-    d: `M ${-chipWidth / 2},${-chipHeight / 2} h ${chipWidth} v ${chipHeight} h ${-chipWidth} Z`,
-  })
-
-  const schematicPorts = allElements.filter(
-    (item): item is SchematicPort =>
-      item.type === "schematic_port" &&
-      item.schematic_component_id === schematic_component_id,
-  )
-
-  const portLength = 0.5
-  const circleRadius = 0.04
-  const labelOffset = 0.1
-
-  for (const port of schematicPorts) {
-    const { side, pinNumber, distanceFromEdge } = port.center
-    let x = 0
-    let y = 0
-    let endX = 0
-    let endY = 0
-    let pinX = 0
-    let pinY = 0
-    let textAnchor = "middle"
-    let rotation = 0
-
-    if (side === "center") {
-      continue
-    }
-
-    switch (side) {
-      case "left":
-        x = -chipWidth / 2
-        y = -chipHeight / 2 + distanceFromEdge
-        endX = x - portLength
-        endY = y
-        pinX = x - portLength / 2
-        pinY = y + labelOffset
-        textAnchor = "middle"
-        break
-      case "right":
-        x = chipWidth / 2
-        y = chipHeight / 2 - distanceFromEdge
-        endX = x + portLength
-        endY = y
-        pinX = x + portLength / 2 - labelOffset
-        pinY = y + labelOffset
-        textAnchor = "start"
-        break
-      case "bottom":
-        x = -chipWidth / 2 + distanceFromEdge
-        y = -chipHeight / 2
-        endX = x
-        endY = y - portLength
-        pinX = x - labelOffset
-        pinY = y - portLength / 2
-        rotation = -90
-        break
-      case "top":
-        x = chipWidth / 2 - distanceFromEdge
-        y = chipHeight / 2
-        endX = x
-        endY = y + portLength
-        pinX = x - labelOffset
-        pinY = y + portLength / 2
-        rotation = -90
-        break
-    }
-
-    // Port line
-    paths.push({
-      type: "path",
-      strokeWidth: 0.015,
-      stroke: colorMap.schematic.component_outline,
-      d: `M ${x},${y} L ${endX},${endY}`,
-    })
-
-    // Port circle at the end of the line
-    paths.push({
-      type: "circle",
-      cx: endX,
-      cy: endY,
-      r: circleRadius,
-      strokeWidth: 0.005,
-      stroke: colorMap.schematic.component_outline,
-      fill: colorMap.schematic.component_outline,
-    })
-
-    // Add pin number
-    if (pinNumber !== undefined) {
-      paths.push({
-        type: "text",
-        cx: pinX,
-        cy: pinY,
-        text: `${pinNumber}`,
-        anchor: textAnchor,
-        rotation: rotation,
-        strokeWidth: 0.005,
-        stroke: colorMap.schematic.pin_number,
-      })
-    }
-  }
-
-  return (
-    <>
-      <SVGPathComponent
-        rotation={rotation}
-        center={center}
-        size={size}
-        paths={paths as any}
-      />
-      <SchematicText
-        schematic_text={{
-          anchor: "right",
-          rotation: 0,
-          position: {
-            x: center.x,
-            y: center.y - chipHeight / 2 - 0.2,
-          },
-          schematic_component_id: "SYNTHETIC",
-          schematic_text_id: "SYNTHETIC_MPN",
-          text: manufacturerPartNumber,
-          type: "schematic_text",
-          color: colorMap.schematic.reference,
-        }}
-      />
-      <SchematicText
-        schematic_text={{
-          anchor: "right",
-          rotation: 0,
-          position: {
-            x: center.x,
-            y: center.y + chipHeight / 2 + 0.2,
-          },
-          schematic_component_id: "SYNTHETIC",
-          schematic_text_id: "SYNTHETIC_NAME",
-          text: name,
-          type: "schematic_text",
-          color: colorMap.schematic.reference,
-        }}
-      />
-    </>
-  )
-}
-
-export default SchematicChip

package/src/schematic-components/SchematicComponent.tsx

@@ -1,51 +0,0 @@
-import type {
-  AnyCircuitElement,
-  SchematicComponent as SchematicComponentType,
-} from "circuit-json"
-import * as Component from "./"
-
-interface Props {
-  component: {
-    source: any
-    schematic: SchematicComponentType
-    schematic_children: any[]
-    allElements: AnyCircuitElement[]
-  }
-}
-
-/**
- * @deprecated ftype-style rendering is being deprecated in favor of the builder
- * generating schematic lines directly
- */
-export const SchematicComponent = ({ component }: Props) => {
-  const { source, schematic, allElements } = component
-  if (!source.ftype) return null
-
-  switch (source.ftype) {
-    case "simple_resistor":
-    case "simple_capacitor":
-    case "simple_power_source":
-    case "simple_ground":
-    case "simple_inductor":
-    case "simple_diode": {
-      return (
-        <Component.SchematicComponentFromSymbol
-          component={{ source, schematic }}
-        />
-      )
-    }
-    case "simple_chip":
-    case "simple_bug": {
-      return (
-        <Component.SchematicChip
-          component={{ source, schematic, allElements }}
-        />
-      )
-    }
-    default: {
-      return <div>unknown ftype: {component.source.ftype}</div>
-    }
-  }
-}
-
-export default SchematicComponent

package/src/schematic-components/SchematicComponentFromSymbol.tsx

@@ -1,46 +0,0 @@
-import { SchematicComponent, SourceSimpleResistor } from "circuit-json"
-import { colorMap } from "lib/utils/colors"
-import { symbols } from "schematic-symbols"
-import SVGPathComponent from "./SVGPathComponent"
-
-interface Props {
-  component: {
-    source: SourceSimpleResistor
-    schematic: SchematicComponent
-  }
-}
-
-export const SchematicComponentFromSymbol = ({
-  component: { source, schematic },
-}: Props) => {
-  const { center, rotation } = schematic
-  // Get the resistor symbol paths
-  const symbol = symbols[schematic.symbol_name]
-  const paths = symbol.primitives
-    .filter((p: any) => p.type === "path")
-    .map((p: any) => ({
-      stroke: colorMap.schematic.component_outline,
-      strokeWidth: 0.02,
-      d: p.points.reduce(
-        (acc: string, point: { x: number; y: number }, index: number) => {
-          const command = index === 0 ? "M" : "L"
-          return `${acc} ${command} ${point.x} ${point.y}`
-        },
-        "",
-      ),
-    }))
-
-  return (
-    <SVGPathComponent
-      rotation={rotation}
-      center={center}
-      size={{
-        width: symbol?.size.width,
-        height: symbol?.size.height,
-      }}
-      paths={paths}
-    />
-  )
-}
-
-export default SchematicComponentFromSymbol

package/src/schematic-components/SchematicElement.tsx

@@ -1,43 +0,0 @@
-import { AnyCircuitElement } from "circuit-json"
-import { collectElementRefs } from "lib/utils/collect-element-refs"
-import SchematicComponent from "./SchematicComponent"
-import { SchematicNetLabel } from "./SchematicNetLabel"
-import SchematicText from "./SchematicText"
-import SchematicTrace from "./SchematicTrace"
-
-/**
- * Render any @tsbuilder/builder AnyElement that can be put on a schematic.
- */
-export const SchematicElement = ({
-  element,
-  allElements,
-}: {
-  element: AnyCircuitElement
-  allElements: AnyCircuitElement[]
-}) => {
-  // A lot of the split logic for element types into a project is here:
-  // https://github.com/tscircuit/builder/blob/7e7bef9c0aadd11999795003b8986f0d244c111f/src/lib/project/create-project-from-elements.ts#L13
-  if (element.type === "schematic_component") {
-    return (
-      <SchematicComponent
-        component={collectElementRefs(element, allElements) as any}
-      />
-    )
-  }
-
-  if (element.type === "schematic_trace") {
-    return (
-      <SchematicTrace trace={collectElementRefs(element, allElements) as any} />
-    )
-  }
-
-  if (element.type === "schematic_text") {
-    return <SchematicText schematic_text={element} />
-  }
-
-  if (element.type === "schematic_net_label") {
-    return <SchematicNetLabel net_label={element} />
-  }
-
-  return null
-}

package/src/schematic-components/SchematicGroup.tsx

@@ -1,3 +0,0 @@
-export const SchematicGroup = () => {
-  return null
-}

package/src/schematic-components/SchematicNetLabel.tsx

@@ -1,63 +0,0 @@
-import type { SchematicNetLabel as SchematicNetLabelObject } from "@tscircuit/soup"
-import SVGPathComponent from "./SVGPathComponent"
-import SchematicText from "./SchematicText"
-import { getRotationFromAnchorSide } from "lib/utils/get-rotation-from-anchor-side"
-import { getVecFromAnchorSide } from "lib/utils/get-vec-from-anchor-side"
-import { colorMap } from "lib/utils/colors"
-
-export const SchematicNetLabel = ({
-  net_label,
-}: {
-  net_label: SchematicNetLabelObject
-}) => {
-  const anchor_side = net_label.anchor_side
-  const is_vertical = anchor_side === "top" || anchor_side === "bottom"
-  const text_width = is_vertical ? 0.3 : net_label.text.length * 0.15
-  // TODO add text
-  const path_width = 31 + net_label.text.length * 5
-
-  const anchor_vec = getVecFromAnchorSide(anchor_side)
-  // const anchor_dist = 0 // text_width / 4 - 0.025
-  const anchor_dist = is_vertical ? 0.04 : text_width / 4 // - 0.025
-  anchor_vec.x *= anchor_dist
-  anchor_vec.y *= anchor_dist
-
-  return (
-    <>
-      <SVGPathComponent
-        rotation={getRotationFromAnchorSide(anchor_side)}
-        center={net_label.center}
-        // fixed size?
-        size={{
-          width: 0.05 + text_width,
-          height:
-            0.2 +
-            (is_vertical ? 0.1 * Math.max(1, net_label.text.length - 2) : 0),
-        }}
-        paths={[
-          {
-            stroke: "gray",
-            strokeWidth: 0.75,
-            // d: `M 0 15 L 5 15 L 11 9 L ${path_width} 9 L ${path_width} 21 L 11 21 L 5 15`,
-            d: `M 0 15 L 5 15 L 11 5 L ${path_width} 5 L ${path_width} 26 L 11 26 L 5 15`,
-          },
-        ]}
-      />
-      <SchematicText
-        schematic_text={{
-          rotation: is_vertical ? 0 : getRotationFromAnchorSide(anchor_side),
-          anchor: is_vertical ? "center" : anchor_side,
-          position: {
-            x: net_label.center.x + anchor_vec.x,
-            y: net_label.center.y + anchor_vec.y,
-          },
-          schematic_component_id: "SYNTHETIC",
-          schematic_text_id: "SYNTHETIC",
-          text: net_label.text,
-          type: "schematic_text",
-          color: colorMap.schematic.net_name,
-        }}
-      />
-    </>
-  )
-}