@tscircuit/schematic-viewer 2.0.43 → 2.0.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,13 +4,21 @@ on:
4
4
  push:
5
5
  branches:
6
6
  - main
7
+ workflow_dispatch:
8
+
9
+ env:
10
+ UPSTREAM_REPO: "runframe" # for example: "eval"
11
+ PACKAGE_NAMES: "@tscircuit/schematic-viewer" # comma-separated list, e.g. "@tscircuit/core,@tscircuit/props"
12
+
7
13
  jobs:
8
14
  publish:
9
15
  runs-on: ubuntu-latest
10
16
  steps:
11
- - uses: actions/checkout@v3
17
+ - uses: actions/checkout@v4
18
+ with:
19
+ token: ${{ secrets.TSCIRCUIT_BOT_GITHUB_TOKEN }}
12
20
  - name: Setup bun
13
- uses: oven-sh/setup-bun@v1
21
+ uses: oven-sh/setup-bun@v2
14
22
  with:
15
23
  bun-version: latest
16
24
  - uses: actions/setup-node@v3
@@ -23,3 +31,13 @@ jobs:
23
31
  - run: pver release
24
32
  env:
25
33
  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
34
+ GITHUB_TOKEN: ${{ secrets.TSCIRCUIT_BOT_GITHUB_TOKEN }}
35
+ - name: Trigger upstream repo update
36
+ if: env.UPSTREAM_REPO && env.PACKAGE_NAMES
37
+ run: |
38
+ curl -X POST \
39
+ -H "Accept: application/vnd.github.v3+json" \
40
+ -H "Authorization: token ${{ secrets.TSCIRCUIT_BOT_GITHUB_TOKEN }}" \
41
+ -H "Content-Type: application/json" \
42
+ "https://api.github.com/repos/tscircuit/${{ env.UPSTREAM_REPO }}/actions/workflows/update-package.yml/dispatches" \
43
+ -d "{\"ref\":\"main\",\"inputs\":{\"package_names\":\"${{ env.PACKAGE_NAMES }}\"}}"
package/dist/index.js CHANGED
@@ -470,7 +470,7 @@ var enableDebug = () => {
470
470
  var debug_default = debug;
471
471
 
472
472
  // lib/components/SchematicViewer.tsx
473
- import { useEffect as useEffect11, useMemo as useMemo5, useRef as useRef7, useState as useState6 } from "react";
473
+ import { useCallback as useCallback5, useEffect as useEffect11, useMemo as useMemo5, useRef as useRef7, useState as useState6 } from "react";
474
474
  import {
475
475
  fromString,
476
476
  identity,
@@ -848,7 +848,7 @@ import { su as su5 } from "@tscircuit/soup-util";
848
848
  // package.json
849
849
  var package_default = {
850
850
  name: "@tscircuit/schematic-viewer",
851
- version: "2.0.42",
851
+ version: "2.0.44",
852
852
  main: "dist/index.js",
853
853
  type: "module",
854
854
  scripts: {
@@ -2004,6 +2004,7 @@ var SchematicComponentMouseTarget = ({
2004
2004
  svgDivRef,
2005
2005
  containerRef,
2006
2006
  onComponentClick,
2007
+ onHoverChange,
2007
2008
  showOutline,
2008
2009
  circuitJsonKey
2009
2010
  }) => {
@@ -2096,6 +2097,11 @@ var SchematicComponentMouseTarget = ({
2096
2097
  bounds,
2097
2098
  onClick: onComponentClick ? handleClick : void 0
2098
2099
  });
2100
+ useEffect10(() => {
2101
+ if (onHoverChange) {
2102
+ onHoverChange(componentId, hovering);
2103
+ }
2104
+ }, [hovering, componentId, onHoverChange]);
2099
2105
  if (!measurement || !hovering || !showOutline) {
2100
2106
  return null;
2101
2107
  }
@@ -2110,10 +2116,8 @@ var SchematicComponentMouseTarget = ({
2110
2116
  width: rect.width,
2111
2117
  height: rect.height,
2112
2118
  border: "1.5px solid rgba(51, 153, 255, 0.9)",
2113
- borderRadius: "6px",
2114
2119
  pointerEvents: "none",
2115
- zIndex: zIndexMap.schematicComponentHoverOutline,
2116
- boxShadow: "0 0 6px rgba(51, 153, 255, 0.35)"
2120
+ zIndex: zIndexMap.schematicComponentHoverOutline
2117
2121
  }
2118
2122
  }
2119
2123
  );
@@ -2189,6 +2193,19 @@ var SchematicViewer = ({
2189
2193
  if (disableGroups) return false;
2190
2194
  return getStoredBoolean("schematic_viewer_show_groups", false);
2191
2195
  });
2196
+ const [isHoveringClickableComponent, setIsHoveringClickableComponent] = useState6(false);
2197
+ const hoveringComponentsRef = useRef7(/* @__PURE__ */ new Set());
2198
+ const handleComponentHoverChange = useCallback5(
2199
+ (componentId, isHovering) => {
2200
+ if (isHovering) {
2201
+ hoveringComponentsRef.current.add(componentId);
2202
+ } else {
2203
+ hoveringComponentsRef.current.delete(componentId);
2204
+ }
2205
+ setIsHoveringClickableComponent(hoveringComponentsRef.current.size > 0);
2206
+ },
2207
+ []
2208
+ );
2192
2209
  const svgDivRef = useRef7(null);
2193
2210
  const touchStartRef = useRef7(null);
2194
2211
  const schematicComponentIds = useMemo5(() => {
@@ -2327,6 +2344,7 @@ var SchematicViewer = ({
2327
2344
  pointerEvents: clickToInteractEnabled ? isInteractionEnabled ? "auto" : "none" : "auto",
2328
2345
  transformOrigin: "0 0"
2329
2346
  },
2347
+ className: onSchematicComponentClicked ? "schematic-component-clickable" : void 0,
2330
2348
  onTouchStart: (e) => {
2331
2349
  if (editModeEnabled && isInteractionEnabled && !showSpiceOverlay) {
2332
2350
  handleComponentTouchStartRef.current(e);
@@ -2343,159 +2361,163 @@ var SchematicViewer = ({
2343
2361
  showSpiceOverlay
2344
2362
  ]
2345
2363
  );
2346
- return /* @__PURE__ */ jsx11(MouseTracker, { children: /* @__PURE__ */ jsxs6(
2347
- "div",
2348
- {
2349
- ref: containerRef,
2350
- style: {
2351
- position: "relative",
2352
- backgroundColor: containerBackgroundColor,
2353
- overflow: "hidden",
2354
- cursor: showSpiceOverlay ? "auto" : isDragging ? "grabbing" : clickToInteractEnabled && !isInteractionEnabled ? "pointer" : "grab",
2355
- minHeight: "300px",
2356
- ...containerStyle
2357
- },
2358
- onWheelCapture: (e) => {
2359
- if (showSpiceOverlay) {
2360
- e.stopPropagation();
2361
- }
2362
- },
2363
- onMouseDown: (e) => {
2364
- if (clickToInteractEnabled && !isInteractionEnabled) {
2365
- e.preventDefault();
2366
- e.stopPropagation();
2367
- return;
2368
- }
2369
- handleMouseDown(e);
2370
- },
2371
- onMouseDownCapture: (e) => {
2372
- if (clickToInteractEnabled && !isInteractionEnabled) {
2373
- e.preventDefault();
2374
- e.stopPropagation();
2375
- return;
2376
- }
2377
- },
2378
- onTouchStart: (e) => {
2379
- if (showSpiceOverlay) return;
2380
- handleTouchStart(e);
2381
- },
2382
- onTouchEnd: (e) => {
2383
- if (showSpiceOverlay) return;
2384
- handleTouchEnd(e);
2385
- },
2386
- children: [
2387
- !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx11(
2388
- "div",
2389
- {
2390
- onClick: (e) => {
2391
- e.preventDefault();
2392
- e.stopPropagation();
2393
- setIsInteractionEnabled(true);
2394
- },
2395
- style: {
2396
- position: "absolute",
2397
- inset: 0,
2398
- cursor: "pointer",
2399
- zIndex: zIndexMap.clickToInteractOverlay,
2400
- display: "flex",
2401
- alignItems: "center",
2402
- justifyContent: "center",
2403
- pointerEvents: "all",
2404
- touchAction: "pan-x pan-y pinch-zoom"
2405
- },
2406
- children: /* @__PURE__ */ jsx11(
2407
- "div",
2408
- {
2409
- style: {
2410
- backgroundColor: "rgba(0, 0, 0, 0.8)",
2411
- color: "white",
2412
- padding: "12px 24px",
2413
- borderRadius: "8px",
2414
- fontSize: "16px",
2415
- fontFamily: "sans-serif",
2416
- pointerEvents: "none"
2417
- },
2418
- children: typeof window !== "undefined" && ("ontouchstart" in window || navigator.maxTouchPoints > 0) ? "Touch to Interact" : "Click to Interact"
2419
- }
2420
- )
2421
- }
2422
- ),
2423
- /* @__PURE__ */ jsx11(
2424
- ViewMenuIcon,
2425
- {
2426
- active: showViewMenu,
2427
- onClick: () => setShowViewMenu(!showViewMenu)
2364
+ return /* @__PURE__ */ jsxs6(MouseTracker, { children: [
2365
+ onSchematicComponentClicked && /* @__PURE__ */ jsx11("style", { children: `.schematic-component-clickable [data-schematic-component-id]:hover { cursor: pointer !important; }` }),
2366
+ /* @__PURE__ */ jsxs6(
2367
+ "div",
2368
+ {
2369
+ ref: containerRef,
2370
+ style: {
2371
+ position: "relative",
2372
+ backgroundColor: containerBackgroundColor,
2373
+ overflow: "hidden",
2374
+ cursor: showSpiceOverlay ? "auto" : isDragging ? "grabbing" : clickToInteractEnabled && !isInteractionEnabled ? "pointer" : isHoveringClickableComponent && onSchematicComponentClicked ? "pointer" : "grab",
2375
+ minHeight: "300px",
2376
+ ...containerStyle
2377
+ },
2378
+ onWheelCapture: (e) => {
2379
+ if (showSpiceOverlay) {
2380
+ e.stopPropagation();
2428
2381
  }
2429
- ),
2430
- editingEnabled && /* @__PURE__ */ jsx11(
2431
- EditIcon,
2432
- {
2433
- active: editModeEnabled,
2434
- onClick: () => setEditModeEnabled(!editModeEnabled)
2382
+ },
2383
+ onMouseDown: (e) => {
2384
+ if (clickToInteractEnabled && !isInteractionEnabled) {
2385
+ e.preventDefault();
2386
+ e.stopPropagation();
2387
+ return;
2435
2388
  }
2436
- ),
2437
- editingEnabled && editModeEnabled && /* @__PURE__ */ jsx11(
2438
- GridIcon,
2439
- {
2440
- active: snapToGrid,
2441
- onClick: () => setSnapToGrid(!snapToGrid)
2389
+ handleMouseDown(e);
2390
+ },
2391
+ onMouseDownCapture: (e) => {
2392
+ if (clickToInteractEnabled && !isInteractionEnabled) {
2393
+ e.preventDefault();
2394
+ e.stopPropagation();
2395
+ return;
2442
2396
  }
2443
- ),
2444
- /* @__PURE__ */ jsx11(
2445
- ViewMenu,
2446
- {
2447
- circuitJson,
2448
- circuitJsonKey,
2449
- isVisible: showViewMenu,
2450
- onClose: () => setShowViewMenu(false),
2451
- showGroups: showSchematicGroups,
2452
- onToggleGroups: (value) => {
2453
- if (!disableGroups) {
2454
- setShowSchematicGroups(value);
2455
- setStoredBoolean("schematic_viewer_show_groups", value);
2397
+ },
2398
+ onTouchStart: (e) => {
2399
+ if (showSpiceOverlay) return;
2400
+ handleTouchStart(e);
2401
+ },
2402
+ onTouchEnd: (e) => {
2403
+ if (showSpiceOverlay) return;
2404
+ handleTouchEnd(e);
2405
+ },
2406
+ children: [
2407
+ !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx11(
2408
+ "div",
2409
+ {
2410
+ onClick: (e) => {
2411
+ e.preventDefault();
2412
+ e.stopPropagation();
2413
+ setIsInteractionEnabled(true);
2414
+ },
2415
+ style: {
2416
+ position: "absolute",
2417
+ inset: 0,
2418
+ cursor: "pointer",
2419
+ zIndex: zIndexMap.clickToInteractOverlay,
2420
+ display: "flex",
2421
+ alignItems: "center",
2422
+ justifyContent: "center",
2423
+ pointerEvents: "all",
2424
+ touchAction: "pan-x pan-y pinch-zoom"
2425
+ },
2426
+ children: /* @__PURE__ */ jsx11(
2427
+ "div",
2428
+ {
2429
+ style: {
2430
+ backgroundColor: "rgba(0, 0, 0, 0.8)",
2431
+ color: "white",
2432
+ padding: "12px 24px",
2433
+ borderRadius: "8px",
2434
+ fontSize: "16px",
2435
+ fontFamily: "sans-serif",
2436
+ pointerEvents: "none"
2437
+ },
2438
+ children: typeof window !== "undefined" && ("ontouchstart" in window || navigator.maxTouchPoints > 0) ? "Touch to Interact" : "Click to Interact"
2439
+ }
2440
+ )
2441
+ }
2442
+ ),
2443
+ /* @__PURE__ */ jsx11(
2444
+ ViewMenuIcon,
2445
+ {
2446
+ active: showViewMenu,
2447
+ onClick: () => setShowViewMenu(!showViewMenu)
2448
+ }
2449
+ ),
2450
+ editingEnabled && /* @__PURE__ */ jsx11(
2451
+ EditIcon,
2452
+ {
2453
+ active: editModeEnabled,
2454
+ onClick: () => setEditModeEnabled(!editModeEnabled)
2455
+ }
2456
+ ),
2457
+ editingEnabled && editModeEnabled && /* @__PURE__ */ jsx11(
2458
+ GridIcon,
2459
+ {
2460
+ active: snapToGrid,
2461
+ onClick: () => setSnapToGrid(!snapToGrid)
2462
+ }
2463
+ ),
2464
+ /* @__PURE__ */ jsx11(
2465
+ ViewMenu,
2466
+ {
2467
+ circuitJson,
2468
+ circuitJsonKey,
2469
+ isVisible: showViewMenu,
2470
+ onClose: () => setShowViewMenu(false),
2471
+ showGroups: showSchematicGroups,
2472
+ onToggleGroups: (value) => {
2473
+ if (!disableGroups) {
2474
+ setShowSchematicGroups(value);
2475
+ setStoredBoolean("schematic_viewer_show_groups", value);
2476
+ }
2456
2477
  }
2457
2478
  }
2458
- }
2459
- ),
2460
- spiceSimulationEnabled && /* @__PURE__ */ jsx11(SpiceSimulationIcon, { onClick: () => setShowSpiceOverlay(true) }),
2461
- showSpiceOverlay && /* @__PURE__ */ jsx11(
2462
- SpiceSimulationOverlay,
2463
- {
2464
- spiceString,
2465
- onClose: () => setShowSpiceOverlay(false),
2466
- plotData,
2467
- nodes,
2468
- isLoading: isSpiceSimLoading,
2469
- error: spiceSimError,
2470
- simOptions: spiceSimOptions,
2471
- onSimOptionsChange: (options) => {
2472
- setHasSpiceSimRun(true);
2473
- setSpiceSimOptions(options);
2474
- },
2475
- hasRun: hasSpiceSimRun
2476
- }
2477
- ),
2478
- onSchematicComponentClicked && schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx11(
2479
- SchematicComponentMouseTarget,
2480
- {
2481
- componentId,
2482
- svgDivRef,
2483
- containerRef,
2484
- showOutline: true,
2485
- circuitJsonKey,
2486
- onComponentClick: (id, event) => {
2487
- onSchematicComponentClicked?.({
2488
- schematicComponentId: id,
2489
- event
2490
- });
2479
+ ),
2480
+ spiceSimulationEnabled && /* @__PURE__ */ jsx11(SpiceSimulationIcon, { onClick: () => setShowSpiceOverlay(true) }),
2481
+ showSpiceOverlay && /* @__PURE__ */ jsx11(
2482
+ SpiceSimulationOverlay,
2483
+ {
2484
+ spiceString,
2485
+ onClose: () => setShowSpiceOverlay(false),
2486
+ plotData,
2487
+ nodes,
2488
+ isLoading: isSpiceSimLoading,
2489
+ error: spiceSimError,
2490
+ simOptions: spiceSimOptions,
2491
+ onSimOptionsChange: (options) => {
2492
+ setHasSpiceSimRun(true);
2493
+ setSpiceSimOptions(options);
2494
+ },
2495
+ hasRun: hasSpiceSimRun
2491
2496
  }
2492
- },
2493
- componentId
2494
- )),
2495
- svgDiv
2496
- ]
2497
- }
2498
- ) });
2497
+ ),
2498
+ onSchematicComponentClicked && schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx11(
2499
+ SchematicComponentMouseTarget,
2500
+ {
2501
+ componentId,
2502
+ svgDivRef,
2503
+ containerRef,
2504
+ showOutline: true,
2505
+ circuitJsonKey,
2506
+ onHoverChange: handleComponentHoverChange,
2507
+ onComponentClick: (id, event) => {
2508
+ onSchematicComponentClicked?.({
2509
+ schematicComponentId: id,
2510
+ event
2511
+ });
2512
+ }
2513
+ },
2514
+ componentId
2515
+ )),
2516
+ svgDiv
2517
+ ]
2518
+ }
2519
+ )
2520
+ ] });
2499
2521
  };
2500
2522
  export {
2501
2523
  MouseTracker,