code-graph-cli 3.0.3

Code intelligence engine for TypeScript/JavaScript/Rust/Python/Go — query the dependency graph instead of reading source files.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<script lang="ts">
  interface Props {
    position: 'left' | 'right';
    onResize: (delta: number) => void;
    onResizeEnd?: () => void;
  }

  let { position, onResize, onResizeEnd }: Props = $props();

  let isDragging = $state(false);

  function handleMouseDown(e: MouseEvent) {
    e.preventDefault();
    isDragging = true;
    let startX = e.clientX;

    const onMove = (me: MouseEvent) => {
      const deltaX = me.clientX - startX;
      startX = me.clientX;
      onResize(deltaX);
    };

    const onUp = () => {
      isDragging = false;
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
      document.body.style.userSelect = '';
      onResizeEnd?.();
    };

    document.body.style.userSelect = 'none';
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
  }
</script>

<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<div
  class="divider {isDragging ? 'divider-active' : ''}"
  role="separator"
  aria-label="{position === 'left' ? 'Resize sidebar' : 'Resize code panel'}"
  onmousedown={handleMouseDown}
></div>

<style>
  .divider {
    width: 4px;
    flex-shrink: 0;
    background: transparent;
    cursor: col-resize;
    position: relative;
    z-index: 10;
    transition: background 150ms ease;
  }

  .divider:hover,
  .divider-active {
    background: var(--color-accent, #3B82F6);
  }
</style>