@tscircuit/schematic-viewer 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "dist/index.js",
   "license": "MIT",
   "repository": {
@@ -17,8 +17,6 @@
     "chromatic": "npx chromatic --project-token=chpt_d88a6beb0734bbe"
   },
   "peerDependencies": {
-    "@tscircuit/builder": "*",
-    "@tscircuit/react-fiber": "*",
     "@tscircuit/table-viewer": "*",
     "react": "*"
   },
@@ -35,8 +33,6 @@
     "@storybook/nextjs": "^8.1.3",
     "@storybook/react": "^8.1.3",
     "@storybook/testing-library": "^0.0.14-next.2",
-    "@tscircuit/builder": "^1.5.126",
-    "@tscircuit/react-fiber": "^1.1.29",
     "@tscircuit/routing": "^1.3.0",
     "@tscircuit/table-viewer": "^0.0.6",
     "@types/node": "^18.6.0",
@@ -67,12 +63,15 @@
   },
   "dependencies": {
     "@storybook/react-vite": "^8.1.3",
+    "@tscircuit/core": "^0.0.125",
     "@tscircuit/layout": "^0.0.25",
     "@tscircuit/props": "^0.0.23",
-    "@tscircuit/soup-util": "^0.0.13",
+    "@tscircuit/soup-util": "^0.0.38",
+    "circuit-to-svg": "^0.0.40",
     "convert-units": "^2.3.4",
     "react-error-boundary": "^4.0.4",
     "react-supergrid": "^1.0.10",
+    "schematic-symbols": "^0.0.78",
     "use-mouse-matrix-transform": "^1.1.12"
   },
   "bugs": {

package/src/Schematic.tsx

@@ -1,20 +1,21 @@
-import {
-  AnyElement,
-  createProjectBuilder,
-  createProjectFromElements,
-  findBoundsAndCenter,
-} from "@tscircuit/builder"
-import TscReactFiber, { createRoot } from "@tscircuit/react-fiber"
-import { AnyCircuitElement } from "circuit-json"
+import { useRenderedCircuit } from "@tscircuit/core"
+import { findBoundsAndCenter } from "@tscircuit/soup-util"
+import type { AnyCircuitElement } from "circuit-json"
 import { useGlobalStore } from "lib/render-context"
-import { useCallback, useEffect, useState } from "react"
+import React, { useCallback, useEffect, useRef, useState } from "react"
 import { ErrorBoundary as TypedErrorBoundary } from "react-error-boundary"
 import { SuperGrid, toMMSI } from "react-supergrid"
 import useMeasure from "react-use-measure"
 import { ContextProviders } from "schematic-components"
 import { SchematicElement } from "schematic-components/SchematicElement"
-import { compose, scale, translate } from "transformation-matrix"
-import { useMouseMatrixTransform } from "use-mouse-matrix-transform"
+import {
+  applyToPoint,
+  compose,
+  inverse,
+  Matrix,
+  scale,
+  translate,
+} from "transformation-matrix"
 import { TableViewer } from "./schematic-components/TableViewer"
 
 const ErrorBoundary = TypedErrorBoundary as any
@@ -34,16 +35,9 @@ const toMMSINeg = (v: number, z: number) =>
 
 export interface SchematicProps {
   children?: any
-
-  /** @deprecated use soup */
-  elements?: any
-
   soup?: AnyCircuitElement[]
-
-  style?: any
-
+  style?: React.CSSProperties
   showTable?: boolean
-
   _soupPostProcessor?: (soup: AnyCircuitElement[]) => AnyCircuitElement[]
 }
 
@@ -57,28 +51,54 @@ export const Schematic = (props: SchematicProps) => {
 
 export const SchematicWithoutContext = ({
   children,
-  elements: initialElements,
-  soup: initialSoup,
+  soup,
   style,
   showTable = false,
   _soupPostProcessor,
 }: SchematicProps) => {
-  initialSoup = initialSoup ?? initialElements ?? []
-
-  const [elements, setElements] = useState<any>(initialSoup ?? [])
-  const [project, setProject] = useState<any>(null)
-  const { setCameraTransform, camera_transform: cameraTransform } =
-    useGlobalStore()
+  const {
+    circuitJson: circuitJsonFromChildren,
+    error: errorFromChildren,
+    isLoading,
+  } = useRenderedCircuit(children)
+
+  const [elements, setElements] = useState<AnyCircuitElement[]>([])
+  const { setCameraTransform } = useGlobalStore()
   const [boundsRef, bounds] = useMeasure()
-  const { ref, setTransform } = useMouseMatrixTransform({
-    onSetTransform: (transform) => {
-      setCameraTransform(transform)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const transformRef = useRef<Matrix>(compose(translate(0, 0), scale(1, 1)))
+  const isDraggingRef = useRef(false)
+  const lastMousePosRef = useRef({ x: 0, y: 0 })
+  const [, forceUpdate] = useState({})
+
+  const updateTransform = useCallback(
+    (newTransform: Matrix) => {
+      transformRef.current = newTransform
+      setCameraTransform(newTransform)
+      forceUpdate({})
     },
-    // initialTransform: compose(scale(100, 100, 0, 0)),
-  })
-  const setElementsAndCamera = useCallback(
-    (elements: Array<AnyElement>) => {
-      const elmBounds = (ref.current as HTMLDivElement).getBoundingClientRect()
+    [setCameraTransform],
+  )
+
+  useEffect(() => {
+    let processedElements: AnyCircuitElement[] = []
+    if (circuitJsonFromChildren && (!soup || soup.length === 0)) {
+      processedElements = circuitJsonFromChildren as AnyCircuitElement[]
+    } else if (soup && soup.length > 0) {
+      processedElements = soup
+    }
+
+    if (processedElements.length > 0) {
+      if (_soupPostProcessor) {
+        processedElements = _soupPostProcessor(processedElements)
+      }
+      setElements(processedElements)
+    }
+  }, [circuitJsonFromChildren, soup, _soupPostProcessor])
+
+  useEffect(() => {
+    if (elements.length > 0 && containerRef.current) {
+      const elmBounds = containerRef.current.getBoundingClientRect()
 
       const { center, width, height } = elements.some((e) =>
         e.type.startsWith("schematic_"),
@@ -93,38 +113,88 @@ export const SchematicWithoutContext = ({
         (elmBounds.height ?? 0) / height,
         100,
       )
-      setElements(elements)
-      setProject(createProjectFromElements(elements))
-      setTransform(
-        compose(
-          translate((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
-          scale(scaleFactor, -scaleFactor, 0, 0),
-          translate(-center.x, -center.y),
-        ),
+
+      const newTransform = compose(
+        translate((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
+        scale(scaleFactor, -scaleFactor, 0, 0),
+        translate(-center.x, -center.y),
       )
+
+      updateTransform(newTransform)
+    }
+  }, [elements, bounds.width, bounds.height, updateTransform])
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    isDraggingRef.current = true
+    lastMousePosRef.current = { x: e.clientX, y: e.clientY }
+  }, [])
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isDraggingRef.current) return
+
+      const dx = e.clientX - lastMousePosRef.current.x
+      const dy = e.clientY - lastMousePosRef.current.y
+      lastMousePosRef.current = { x: e.clientX, y: e.clientY }
+
+      const scale = transformRef.current.a // Assuming uniform scaling
+      const dragSensitivity = 150 / scale // Adjust this value to change drag speed
+
+      const newTransform = compose(
+        translate(dx * dragSensitivity, dy * dragSensitivity),
+        transformRef.current,
+      )
+      updateTransform(newTransform)
     },
-    [setElements, setTransform],
+    [updateTransform],
+  )
+
+  const handleMouseUp = useCallback(() => {
+    isDraggingRef.current = false
+  }, [])
+
+  const handleWheel = useCallback(
+    (e: WheelEvent) => {
+      e.preventDefault()
+      const scaleMultiplier = Math.pow(0.999, e.deltaY)
+
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect()
+        const mouseX = e.clientX - rect.left
+        const mouseY = e.clientY - rect.top
+
+        const inverseTransform = inverse(transformRef.current)
+        const transformedPoint = applyToPoint(inverseTransform, {
+          x: mouseX,
+          y: mouseY,
+        })
+
+        const newTransform = compose(
+          transformRef.current,
+          translate(transformedPoint.x, transformedPoint.y),
+          scale(scaleMultiplier, scaleMultiplier),
+          translate(-transformedPoint.x, -transformedPoint.y),
+        )
+
+        updateTransform(newTransform)
+      }
+    },
+    [updateTransform],
   )
 
   useEffect(() => {
-    if (initialSoup.length > 0) {
-      setElementsAndCamera(initialSoup as any)
-      return
+    const container = containerRef.current
+    if (container) {
+      container.addEventListener("wheel", handleWheel, { passive: false })
+      return () => {
+        container.removeEventListener("wheel", handleWheel)
+      }
     }
-    const projectBuilder = createProjectBuilder()
-    ;((createRoot ?? TscReactFiber.createRoot) as any)()
-      .render(children, projectBuilder as any)
-      .then(async (elements) => {
-        if (_soupPostProcessor) {
-          elements = _soupPostProcessor(elements)
-        }
-        setElementsAndCamera(elements)
-      })
-      .catch((e) => {
-        console.error("ERROR RENDERING CIRCUIT")
-        throw e
-      })
-  }, [children])
+  }, [handleWheel])
+
+  if (errorFromChildren) {
+    return <div>Error: {errorFromChildren.message}</div>
+  }
 
   return (
     <>
@@ -136,13 +206,17 @@ export const SchematicWithoutContext = ({
           overflow: "hidden",
           position: "relative",
           isolation: "isolate",
-          cursor: "grab",
+          cursor: isDraggingRef.current ? "grabbing" : "grab",
           ...style,
         }}
         ref={(el) => {
-          ref.current = el
+          containerRef.current = el
           boundsRef(el)
         }}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
       >
         <SuperGrid
           stringifyCoord={(x, y, z) => {
@@ -151,7 +225,7 @@ export const SchematicWithoutContext = ({
           }}
           width={bounds.width}
           height={bounds.height}
-          transform={cameraTransform}
+          transform={transformRef.current}
         />
         {elements?.map((elm, i) => (
           <ErrorBoundary key={i} fallbackRender={fallbackRender(elm)}>
@@ -163,7 +237,7 @@ export const SchematicWithoutContext = ({
           </ErrorBoundary>
         ))}
       </div>
-      {showTable !== false && elements && <TableViewer elements={elements} />}
+      {showTable !== false && elements && <TableViewer elements={elements as any} />}
     </>
   )
 }

package/src/lib/types/core.ts

@@ -1,19 +1,17 @@
 import { AnySourceComponent, SourceComponent } from "./source-component"
+import {
+  Size,
+  Point,
+  PcbTrace,
+  PcbComponent,
+  PcbPort,
+  SourceGroup,
+} from "circuit-json"
 
 export interface SchematicConfig {
   type: "schematic_config"
 }
 
-export interface Point {
-  x: number
-  y: number
-}
-
-export interface Size {
-  width: number
-  height: number
-}
-
 export interface SourceConfig {
   type: "source_config"
 }
@@ -111,32 +109,6 @@ export interface SchematicPort {
   facing_direction?: "up" | "down" | "left" | "right"
 }
 
-export interface PCBTrace {
-  type: "pcb_trace"
-  source_trace_id: string
-  pcb_trace_id: string
-  route: Array<{
-    x: number
-    y: number
-    strokeWidth: number
-    cap: "butt" | "round" | "square"
-    start_pcb_port_id?: string
-    end_pcb_port_id?: string
-  }>
-}
-
-export interface PCBComponent {
-  type: "pcb_component"
-  pcb_component_id: string
-  source_component_id: string
-}
-
-export interface PCBPort {
-  type: "pcb_port"
-  pcb_port_id: string
-  source_port_id: string
-}
-
 export interface PCBGroup {
   type: "pcb_group"
   source_group_id: string
@@ -153,13 +125,6 @@ export interface SourceTrace {
   connected_source_port_ids: string[]
 }
 
-export interface SourceGroup {
-  type: "source_group"
-  source_group_id: string
-  name: string
-  children_source_component_ids: string[]
-}
-
 export interface SourcePort {
   type: "source_port"
   name: string
@@ -178,9 +143,9 @@ export interface Project {
   schematic_ports: SchematicPort[]
   pcb_config: PCBConfig
   pcb_groups: PCBGroup[]
-  pcb_components: PCBComponent[]
-  pcb_traces: PCBTrace[]
-  pcb_ports: PCBPort[]
+  pcb_components: PcbComponent[]
+  pcb_traces: PcbTrace[]
+  pcb_ports: PcbPort[]
   source_config: SourceConfig
   source_traces: SourceTrace[]
   source_groups: SourceGroup[]
@@ -195,11 +160,11 @@ export type AnyElement =
   | SourceGroup
   | SourceTrace
   | SourcePort
-  | PCBTrace
-  | PCBComponent
+  | PcbTrace
+  | PcbComponent
   | PCBGroup
   | PCBConfig
-  | PCBPort
+  | PcbPort
   | SchematicGroup
   | SchematicComponent
   | SchematicTrace

package/src/lib/types/source-component.ts

@@ -38,6 +38,10 @@ export interface SimpleBug extends SourceComponentBase {
   manufacturerPartNumber: any
   ftype: "simple_bug"
 }
+export interface SimpleChip extends SourceComponentBase {
+  manufacturerPartNumber: any
+  ftype: "simple_chip"
+}
 
 export interface SimplePowerSource extends SourceComponentBase {
   ftype: "simple_power_source"
@@ -52,6 +56,7 @@ export type AnySourceComponent =
   | SimpleResistor
   | SimpleCapacitor
   | SimpleBug
+  | SimpleChip
   | SimpleInductor
   | SimplePowerSource
   | SimpleGround

package/src/lib/utils/collect-element-refs.ts

@@ -38,6 +38,7 @@ export const collectElementRefs = (
       source: source_component,
       source_component,
       source_port,
+      allElements: allElms,
     }
   }
   return null

package/src/lib/utils/colors.ts

@@ -0,0 +1,236 @@
+// 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)",
+    },
+  }
+