@tscircuit/schematic-viewer 2.0.26 → 2.0.28

package/lib/components/SchematicViewer.tsx

@@ -4,6 +4,7 @@ import {
 } from "circuit-to-svg"
 import { useChangeSchematicComponentLocationsInSvg } from "lib/hooks/useChangeSchematicComponentLocationsInSvg"
 import { useChangeSchematicTracesForMovedComponents } from "lib/hooks/useChangeSchematicTracesForMovedComponents"
+import { useSchematicGroupsOverlay } from "lib/hooks/useSchematicGroupsOverlay"
 import { enableDebug } from "lib/utils/debug"
 import { useEffect, useMemo, useRef, useState } from "react"
 import {
@@ -17,6 +18,8 @@ import { useComponentDragging } from "../hooks/useComponentDragging"
 import type { ManualEditEvent } from "../types/edit-events"
 import { EditIcon } from "./EditIcon"
 import { GridIcon } from "./GridIcon"
+import { ViewMenuIcon } from "./ViewMenuIcon"
+import { ViewMenu } from "./ViewMenu"
 import type { CircuitJson } from "circuit-json"
 import { SpiceSimulationIcon } from "./SpiceSimulationIcon"
 import { SpiceSimulationOverlay } from "./SpiceSimulationOverlay"
@@ -87,6 +90,8 @@ export const SchematicViewer = ({
   const [isInteractionEnabled, setIsInteractionEnabled] = useState<boolean>(
     !clickToInteractEnabled,
   )
+  const [showViewMenu, setShowViewMenu] = useState(false)
+  const [showSchematicGroups, setShowSchematicGroups] = useState(false)
   const svgDivRef = useRef<HTMLDivElement>(null)
   const touchStartRef = useRef<{ x: number; y: number } | null>(null)
 
@@ -219,6 +224,14 @@ export const SchematicViewer = ({
     editEvents: editEventsWithUnappliedEditEvents,
   })
 
+  // Add group overlays when enabled
+  useSchematicGroupsOverlay({
+    svgDivRef,
+    circuitJson,
+    circuitJsonKey,
+    showGroups: showSchematicGroups,
+  })
+
   const svgDiv = useMemo(
     () => (
       <div
@@ -321,6 +334,10 @@ export const SchematicViewer = ({
           </div>
         </div>
       )}
+      <ViewMenuIcon
+        active={showViewMenu}
+        onClick={() => setShowViewMenu(!showViewMenu)}
+      />
       {editingEnabled && (
         <EditIcon
           active={editModeEnabled}
@@ -333,6 +350,14 @@ export const SchematicViewer = ({
           onClick={() => setSnapToGrid(!snapToGrid)}
         />
       )}
+      <ViewMenu
+        circuitJson={circuitJson}
+        circuitJsonKey={circuitJsonKey}
+        isVisible={showViewMenu}
+        onClose={() => setShowViewMenu(false)}
+        showGroups={showSchematicGroups}
+        onToggleGroups={setShowSchematicGroups}
+      />
       {spiceSimulationEnabled && (
         <SpiceSimulationIcon onClick={() => setShowSpiceOverlay(true)} />
       )}

package/lib/components/SpiceSimulationIcon.tsx

@@ -12,7 +12,7 @@ export const SpiceSimulationIcon = ({
       style={{
         position: "absolute",
         top: "16px",
-        right: "56px",
+        right: "112px",
         backgroundColor: "#fff",
         color: "#000",
         padding: "8px",

package/lib/components/ViewMenu.tsx

@@ -0,0 +1,147 @@
+import { useMemo } from "react"
+import { su } from "@tscircuit/soup-util"
+import type { CircuitJson } from "circuit-json"
+import { zIndexMap } from "../utils/z-index-map"
+
+interface ViewMenuProps {
+  circuitJson: CircuitJson
+  circuitJsonKey: string
+  isVisible: boolean
+  onClose: () => void
+  showGroups: boolean
+  onToggleGroups: (show: boolean) => void
+}
+
+export const ViewMenu = ({
+  circuitJson,
+  circuitJsonKey,
+  isVisible,
+  onClose,
+  showGroups,
+  onToggleGroups,
+}: ViewMenuProps) => {
+  const hasGroups = useMemo(() => {
+    if (!circuitJson || circuitJson.length === 0) return false
+
+    try {
+      // Check if there are explicit groups
+      const sourceGroups = su(circuitJson).source_group?.list() || []
+      if (sourceGroups.length > 0) return true
+
+      // Check if we can create virtual groups by component type
+      const schematicComponents =
+        su(circuitJson).schematic_component?.list() || []
+      if (schematicComponents.length > 1) {
+        const componentTypes = new Set()
+        for (const comp of schematicComponents) {
+          const sourceComp = su(circuitJson).source_component.get(
+            comp.source_component_id,
+          )
+          if (sourceComp?.ftype) {
+            componentTypes.add(sourceComp.ftype)
+          }
+        }
+        return componentTypes.size > 1 // Only show if there are multiple types
+      }
+
+      return false
+    } catch (error) {
+      console.error("Error checking for groups:", error)
+      return false
+    }
+  }, [circuitJsonKey])
+
+  if (!isVisible) return null
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        onClick={onClose}
+        style={{
+          position: "absolute",
+          inset: 0,
+          backgroundColor: "transparent",
+          zIndex: zIndexMap.viewMenuBackdrop,
+        }}
+      />
+
+      {/* Menu */}
+      <div
+        style={{
+          position: "absolute",
+          top: "56px",
+          right: "16px",
+          backgroundColor: "#ffffff",
+          color: "#000000",
+          border: "1px solid #ccc",
+          borderRadius: "4px",
+          boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+          minWidth: "200px",
+          zIndex: zIndexMap.viewMenu,
+        }}
+      >
+        {/* Groups Toggle Option */}
+        <div
+          onClick={() => {
+            if (hasGroups) {
+              onToggleGroups(!showGroups)
+            }
+          }}
+          style={{
+            padding: "8px 12px",
+            cursor: hasGroups ? "pointer" : "not-allowed",
+            opacity: hasGroups ? 1 : 0.5,
+            fontSize: "13px",
+            color: "#000000",
+            fontFamily: "sans-serif",
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+          }}
+          onMouseEnter={(e) => {
+            if (hasGroups) {
+              e.currentTarget.style.backgroundColor = "#f0f0f0"
+            }
+          }}
+          onMouseLeave={(e) => {
+            if (hasGroups) {
+              e.currentTarget.style.backgroundColor = "transparent"
+            }
+          }}
+        >
+          <div
+            style={{
+              width: "16px",
+              height: "16px",
+              border: "2px solid #000",
+              borderRadius: "2px",
+              backgroundColor: "transparent",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "10px",
+              fontWeight: "bold",
+            }}
+          >
+            {showGroups && "✓"}
+          </div>
+          View Schematic Groups
+        </div>
+
+        {!hasGroups && (
+          <div
+            style={{
+              padding: "8px 12px",
+              fontSize: "11px",
+              color: "#666",
+              fontStyle: "italic",
+            }}
+          >
+            No groups found in this schematic
+          </div>
+        )}
+      </div>
+    </>
+  )
+}

package/lib/components/ViewMenuIcon.tsx

@@ -0,0 +1,40 @@
+import { zIndexMap } from "../utils/z-index-map"
+
+export const ViewMenuIcon = ({
+  onClick,
+  active,
+}: { onClick: () => void; active: boolean }) => {
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        position: "absolute",
+        top: "16px",
+        right: "16px",
+        backgroundColor: active ? "#4CAF50" : "#fff",
+        color: active ? "#fff" : "#000",
+        padding: "8px",
+        borderRadius: "4px",
+        cursor: "pointer",
+        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        zIndex: zIndexMap.viewMenuIcon,
+      }}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+      >
+        <circle cx="12" cy="12" r="1" />
+        <circle cx="12" cy="5" r="1" />
+        <circle cx="12" cy="19" r="1" />
+      </svg>
+    </div>
+  )
+}

package/lib/hooks/useSchematicGroupsOverlay.ts

@@ -0,0 +1,223 @@
+import { useEffect } from "react"
+import { su } from "@tscircuit/soup-util"
+import type { CircuitJson } from "circuit-json"
+
+interface UseSchematicGroupsOverlayOptions {
+  svgDivRef: React.RefObject<HTMLDivElement | null>
+  circuitJson: CircuitJson
+  circuitJsonKey: string
+  showGroups: boolean
+}
+
+export const useSchematicGroupsOverlay = (
+  options: UseSchematicGroupsOverlayOptions,
+) => {
+  const { svgDivRef, circuitJson, circuitJsonKey, showGroups } = options
+  
+  useEffect(() => {
+    if (
+      !svgDivRef.current ||
+      !showGroups ||
+      !circuitJson ||
+      circuitJson.length === 0
+    ) {
+      // Remove any existing group overlays
+      if (svgDivRef.current) {
+        const existingOverlays = svgDivRef.current.querySelectorAll(
+          ".schematic-group-overlay",
+        )
+        existingOverlays.forEach((overlay) => overlay.remove())
+      }
+      return
+    }
+
+    const svg = svgDivRef.current.querySelector("svg")
+    if (!svg) {
+      return
+    }
+
+    // Remove existing overlays first
+    const existingOverlays = svg.querySelectorAll(".schematic-group-overlay")
+    existingOverlays.forEach((overlay) => overlay.remove())
+
+    try {
+      // Get explicit groups first
+      const sourceGroups = su(circuitJson).source_group?.list() || []
+      const schematicComponents =
+        su(circuitJson).schematic_component?.list() || []
+
+      let groupsToRender: Array<{
+        id: string
+        name: string
+        components: any[]
+        color: string
+      }> = []
+
+      // Check if we have meaningful explicit groups (not just auto-generated default groups)
+      const hasMeaningfulGroups = sourceGroups.length > 0 && 
+        sourceGroups.some(group => group.name && group.name.trim() !== "")
+
+      if (hasMeaningfulGroups) {
+        // Use explicit groups
+        const groupMap = new Map<string, any[]>()
+
+        for (const comp of schematicComponents) {
+          const sourceComp = su(circuitJson).source_component.get(
+            comp.source_component_id,
+          )
+          if (sourceComp?.source_group_id) {
+            if (!groupMap.has(sourceComp.source_group_id)) {
+              groupMap.set(sourceComp.source_group_id, [])
+            }
+            groupMap.get(sourceComp.source_group_id)!.push(comp)
+          }
+        }
+
+        groupsToRender = Array.from(groupMap.entries()).map(
+          ([groupId, components], index) => {
+            const group = sourceGroups.find(
+              (g) => g.source_group_id === groupId,
+            )
+            return {
+              id: groupId,
+              name: group?.name || `Group ${index + 1}`,
+              components,
+              color: getGroupColor(index),
+            }
+          },
+        )
+      } else {
+        // Create virtual groups by component type
+        const componentTypeGroups = new Map<string, any[]>()
+
+        for (const comp of schematicComponents) {
+          const sourceComp = su(circuitJson).source_component.get(
+            comp.source_component_id,
+          )
+          if (sourceComp) {
+            const componentType = sourceComp.ftype || "other"
+            if (!componentTypeGroups.has(componentType)) {
+              componentTypeGroups.set(componentType, [])
+            }
+            componentTypeGroups.get(componentType)!.push(comp)
+          }
+        }
+
+        groupsToRender = Array.from(componentTypeGroups.entries()).map(
+          ([type, components], index) => ({
+            id: `type_${type}`,
+            name: `${type.charAt(0).toUpperCase() + type.slice(1)}s`,
+            components,
+            color: getGroupColor(index),
+          }),
+        )
+      }
+
+      // Render group overlays
+      groupsToRender.forEach((group, groupIndex) => {
+        if (group.components.length === 0) return
+
+        // Calculate bounding box for the group
+        const groupBounds = calculateGroupBounds(group.components, svg)
+        if (!groupBounds) return
+
+        // Create group overlay rectangle
+        const groupOverlay = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "rect",
+        )
+        groupOverlay.setAttribute("class", "schematic-group-overlay")
+        groupOverlay.setAttribute("x", (groupBounds.minX - 25).toString())
+        groupOverlay.setAttribute("y", (groupBounds.minY - 25).toString())
+        groupOverlay.setAttribute(
+          "width",
+          (groupBounds.maxX - groupBounds.minX + 50).toString(),
+        )
+        groupOverlay.setAttribute(
+          "height",
+          (groupBounds.maxY - groupBounds.minY + 50).toString(),
+        )
+        groupOverlay.setAttribute("fill", "none")
+        groupOverlay.setAttribute("stroke", group.color)
+        groupOverlay.setAttribute("stroke-width", "3")
+        groupOverlay.setAttribute("stroke-dasharray", "8,4")
+        groupOverlay.setAttribute("opacity", "0.8")
+        groupOverlay.setAttribute("rx", "4")
+        groupOverlay.setAttribute("ry", "4")
+
+        // Create group label
+        const groupLabel = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "text",
+        )
+        groupLabel.setAttribute("class", "schematic-group-overlay")
+        groupLabel.setAttribute("x", (groupBounds.minX - 10).toString())
+        groupLabel.setAttribute("y", (groupBounds.minY - 8).toString())
+        groupLabel.setAttribute("fill", group.color)
+        groupLabel.setAttribute("font-size", "14")
+        groupLabel.setAttribute("font-family", "Arial, sans-serif")
+        groupLabel.setAttribute("font-weight", "bold")
+        groupLabel.setAttribute("stroke", "#fff")
+        groupLabel.setAttribute("stroke-width", "0.5")
+        groupLabel.setAttribute("paint-order", "stroke fill")
+        groupLabel.textContent = group.name
+
+        // Add overlays to the SVG (use appendChild to ensure they're on top)
+        svg.appendChild(groupOverlay)
+        svg.appendChild(groupLabel)
+      })
+    } catch (error) {
+      console.error("Error creating group overlays:", error)
+    }
+  }, [svgDivRef, circuitJsonKey, showGroups])
+}
+
+function getGroupColor(index: number): string {
+  const colors = [
+    "#FF6B6B", // Red
+    "#4ECDC4", // Teal
+    "#45B7D1", // Blue
+    "#96CEB4", // Green
+    "#FF8C42", // Orange
+    "#DDA0DD", // Plum
+    "#98D8C8", // Mint
+    "#F7DC6F", // Light Yellow
+  ]
+  return colors[index % colors.length]
+}
+
+function calculateGroupBounds(components: any[], svg: SVGElement) {
+  let minX = Infinity,
+    minY = Infinity,
+    maxX = -Infinity,
+    maxY = -Infinity
+
+  for (const component of components) {
+    // Look for the component group element (based on circuit-to-svg documentation)
+    let componentElement = svg.querySelector(
+      `g[data-schematic-component-id="${component.schematic_component_id}"]`,
+    )
+    
+    if (!componentElement) {
+      // Fallback to any element with the data attribute
+      componentElement = svg.querySelector(
+        `[data-schematic-component-id="${component.schematic_component_id}"]`,
+      )
+    }
+    
+    if (componentElement) {
+      const bbox = (componentElement as SVGGraphicsElement).getBBox()
+      minX = Math.min(minX, bbox.x)
+      minY = Math.min(minY, bbox.y)
+      maxX = Math.max(maxX, bbox.x + bbox.width)
+      maxY = Math.max(maxY, bbox.y + bbox.height)
+    }
+  }
+
+  if (minX === Infinity) {
+    return null
+  }
+
+  const bounds = { minX, minY, maxX, maxY }
+  return bounds
+}

package/lib/utils/z-index-map.ts

@@ -2,5 +2,8 @@ export const zIndexMap = {
   schematicEditIcon: 50,
   schematicGridIcon: 49,
   spiceSimulationIcon: 51,
+  viewMenuIcon: 48,
+  viewMenu: 55,
+  viewMenuBackdrop: 54,
   clickToInteractOverlay: 100,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "2.0.26",
+  "version": "2.0.28",
   "main": "dist/index.js",
   "type": "module",
   "scripts": {