|
| 1 | +<script setup lang="ts"> |
| 2 | +import type { HierarchyLink, HierarchyNode } from 'd3-hierarchy' |
| 3 | +import type { ModuleListItem, SessionContext } from '../../types/data' |
| 4 | +import { hierarchy, tree } from 'd3-hierarchy' |
| 5 | +import { linkHorizontal, linkVertical } from 'd3-shape' |
| 6 | +import { computed, nextTick, onMounted, reactive, ref, shallowReactive, shallowRef, useTemplateRef, watch } from 'vue' |
| 7 | +
|
| 8 | +const props = defineProps<{ |
| 9 | + session: SessionContext |
| 10 | + modules: ModuleListItem[] |
| 11 | +}>() |
| 12 | +
|
| 13 | +type Link = HierarchyLink<ModuleListItem> & { |
| 14 | + id: string |
| 15 | +} |
| 16 | +
|
| 17 | +const graphRender = ref<'normal' | 'mini'>('normal') |
| 18 | +
|
| 19 | +const SPACING = reactive({ |
| 20 | + width: computed(() => graphRender.value === 'normal' ? 400 : 10), |
| 21 | + height: computed(() => graphRender.value === 'normal' ? 55 : 20), |
| 22 | + linkOffset: computed(() => graphRender.value === 'normal' ? 20 : 0), |
| 23 | + margin: computed(() => 800), |
| 24 | + gap: computed(() => graphRender.value === 'normal' ? 150 : 100), |
| 25 | +}) |
| 26 | +
|
| 27 | +const container = useTemplateRef<HTMLDivElement>('container') |
| 28 | +const isGrabbing = ref(false) |
| 29 | +const width = ref(window.innerWidth) |
| 30 | +const height = ref(window.innerHeight) |
| 31 | +const scale = ref(1) |
| 32 | +const nodesRefMap = shallowReactive(new Map<string, HTMLDivElement>()) |
| 33 | +
|
| 34 | +const nodes = shallowRef<HierarchyNode<ModuleListItem>[]>([]) |
| 35 | +const links = shallowRef<Link[]>([]) |
| 36 | +const nodesMap = shallowReactive(new Map<string, HierarchyNode<ModuleListItem>>()) |
| 37 | +const linksMap = shallowReactive(new Map<string, Link>()) |
| 38 | +
|
| 39 | +const modulesMap = computed(() => { |
| 40 | + const map = new Map<string, ModuleListItem>() |
| 41 | + for (const module of props.modules) { |
| 42 | + map.set(module.id, module) |
| 43 | + } |
| 44 | + return map |
| 45 | +}) |
| 46 | +
|
| 47 | +const rootModules = computed(() => { |
| 48 | + return props.modules.filter(x => x.importers.length === 0) |
| 49 | +}) |
| 50 | +
|
| 51 | +const createLinkHorizontal = linkHorizontal() |
| 52 | + .x(d => d[0]) |
| 53 | + .y(d => d[1]) |
| 54 | +
|
| 55 | +const createLinkVertical = linkVertical() |
| 56 | + .x(d => d[0]) |
| 57 | + .y(d => d[1]) |
| 58 | +
|
| 59 | +function calculateGraph() { |
| 60 | + // Unset the canvas size, and recalculate again after nodes are rendered |
| 61 | + width.value = window.innerWidth |
| 62 | + height.value = window.innerHeight |
| 63 | +
|
| 64 | + const seen = new Set<ModuleListItem>() |
| 65 | + const root = hierarchy<ModuleListItem>( |
| 66 | + { id: '~root' } as any, |
| 67 | + (node) => { |
| 68 | + if (node.id === '~root') { |
| 69 | + rootModules.value.forEach(x => seen.add(x)) |
| 70 | + return rootModules.value |
| 71 | + } |
| 72 | + const modules = node.imports.map((x) => { |
| 73 | + const module = modulesMap.value.get(x) |
| 74 | + if (module) { |
| 75 | + if (seen.has(module)) { |
| 76 | + return undefined |
| 77 | + } |
| 78 | + seen.add(module) |
| 79 | + } |
| 80 | + return module |
| 81 | + }).filter(x => x !== undefined) |
| 82 | + return modules |
| 83 | + }, |
| 84 | + ) |
| 85 | +
|
| 86 | + // Calculate the layout |
| 87 | + const layout = tree<ModuleListItem>() |
| 88 | + .nodeSize([SPACING.height, SPACING.width + SPACING.gap]) |
| 89 | + layout(root) |
| 90 | +
|
| 91 | + // Rotate the graph from top-down to left-right |
| 92 | + const _nodes = root.descendants() |
| 93 | + for (const node of _nodes) { |
| 94 | + [node.x, node.y] = [node.y! - SPACING.width, node.x!] |
| 95 | + } |
| 96 | +
|
| 97 | + // Offset the graph and adding margin |
| 98 | + const minX = Math.min(..._nodes.map(n => n.x!)) |
| 99 | + const minY = Math.min(..._nodes.map(n => n.y!)) |
| 100 | + if (minX < SPACING.margin) { |
| 101 | + for (const node of _nodes) { |
| 102 | + node.x! += Math.abs(minX) + SPACING.margin |
| 103 | + } |
| 104 | + } |
| 105 | + if (minY < SPACING.margin) { |
| 106 | + for (const node of _nodes) { |
| 107 | + node.y! += Math.abs(minY) + SPACING.margin |
| 108 | + } |
| 109 | + } |
| 110 | +
|
| 111 | + nodes.value = _nodes |
| 112 | + nodesMap.clear() |
| 113 | + for (const node of _nodes) { |
| 114 | + nodesMap.set(node.data.id, node) |
| 115 | + } |
| 116 | + const _links = root.links() |
| 117 | + .filter(x => x.source.data.id !== '~root') |
| 118 | + .map((x) => { |
| 119 | + return { |
| 120 | + ...x, |
| 121 | + id: `${x.source.data.id}|${x.target.data.id}`, |
| 122 | + } |
| 123 | + }) |
| 124 | + linksMap.clear() |
| 125 | + for (const link of _links) { |
| 126 | + linksMap.set(link.id, link) |
| 127 | + } |
| 128 | + links.value = _links |
| 129 | +
|
| 130 | + nextTick(() => { |
| 131 | + width.value = (container.value!.scrollWidth / scale.value + SPACING.margin) |
| 132 | + height.value = (container.value!.scrollHeight / scale.value + SPACING.margin) |
| 133 | + focusOn(rootModules.value[0].id, false) |
| 134 | + }) |
| 135 | +} |
| 136 | +
|
| 137 | +function focusOn(id: string, animated = true) { |
| 138 | + const el = nodesRefMap.get(id) |
| 139 | + el?.scrollIntoView({ |
| 140 | + block: 'center', |
| 141 | + inline: 'center', |
| 142 | + behavior: animated ? 'smooth' : 'instant', |
| 143 | + }) |
| 144 | +} |
| 145 | +
|
| 146 | +function generateLink(link: Link) { |
| 147 | + if (link.target.x! <= link.source.x!) { |
| 148 | + return createLinkVertical({ |
| 149 | + source: [link.source.x! + SPACING.width / 2 - SPACING.linkOffset, link.source.y!], |
| 150 | + target: [link.target.x! - SPACING.width / 2 + SPACING.linkOffset, link.target.y!], |
| 151 | + }) |
| 152 | + } |
| 153 | + return createLinkHorizontal({ |
| 154 | + source: [link.source.x! + SPACING.width / 2 - SPACING.linkOffset, link.source.y!], |
| 155 | + target: [link.target.x! - SPACING.width / 2 + SPACING.linkOffset, link.target.y!], |
| 156 | + }) |
| 157 | +} |
| 158 | +
|
| 159 | +function getLinkColor(_link: Link) { |
| 160 | + return 'stroke-#8882' |
| 161 | +} |
| 162 | +
|
| 163 | +onMounted(() => { |
| 164 | + watch( |
| 165 | + () => [props.modules, graphRender.value], |
| 166 | + calculateGraph, |
| 167 | + { immediate: true }, |
| 168 | + ) |
| 169 | +}) |
| 170 | +</script> |
| 171 | + |
| 172 | +<template> |
| 173 | + <div |
| 174 | + ref="container" |
| 175 | + w-screen h-screen of-scroll relative select-none |
| 176 | + :class="isGrabbing ? 'cursor-grabbing' : ''" |
| 177 | + > |
| 178 | + <svg pointer-events-none absolute left-0 top-0 z-graph-link :width="width" :height="height"> |
| 179 | + <g> |
| 180 | + <path |
| 181 | + v-for="link of links" |
| 182 | + :key="link.id" |
| 183 | + :d="generateLink(link)!" |
| 184 | + :class="getLinkColor(link)" |
| 185 | + fill="none" |
| 186 | + /> |
| 187 | + </g> |
| 188 | + </svg> |
| 189 | + <!-- <svg pointer-events-none absolute left-0 top-0 z-graph-link-active :width="width" :height="height"> |
| 190 | + <g> |
| 191 | + <path |
| 192 | + v-for="link of links" |
| 193 | + :key="link.id" |
| 194 | + :d="generateLink(link)!" |
| 195 | + fill="none" |
| 196 | + class="stroke-primary:75" |
| 197 | + /> |
| 198 | + </g> |
| 199 | + </svg> --> |
| 200 | + <template |
| 201 | + v-for="node of nodes" |
| 202 | + :key="node.data.id" |
| 203 | + > |
| 204 | + <template v-if="node.data.id !== '~root'"> |
| 205 | + <DisplayModuleId |
| 206 | + :id="node.data.id" |
| 207 | + :ref="(el: any) => nodesRefMap.set(node.data.id, el?.$el)" |
| 208 | + absolute hover="bg-active" block px2 p1 bg-glass z-graph-node |
| 209 | + border="~ base rounded" |
| 210 | + :link="true" |
| 211 | + :session="session" |
| 212 | + :pkg="node.data" |
| 213 | + :minimal="true" |
| 214 | + :style="{ |
| 215 | + left: `${node.x}px`, |
| 216 | + top: `${node.y}px`, |
| 217 | + minWidth: graphRender === 'normal' ? `${SPACING.width}px` : undefined, |
| 218 | + transform: 'translate(-50%, -50%)', |
| 219 | + maxWidth: '400px', |
| 220 | + maxHeight: '50px', |
| 221 | + overflow: 'hidden', |
| 222 | + }" |
| 223 | + /> |
| 224 | + </template> |
| 225 | + </template> |
| 226 | + </div> |
| 227 | +</template> |
0 commit comments