mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-09-12 23:01:07 +00:00
fix: add glow effect to all edge types, dashed style for extends
- All edge types now get a subtle glow pass (wider semi-transparent stroke behind the main line) for a luminous, ethereal look: - Derives: 0.25 alpha glow, +1.5px width - Updates: 0.4 alpha glow, +2px width (unchanged, strongest) - Extends: 0.25 alpha glow, +1.5px width, dashed pattern - Extends edges now render with dashed lines (6px dash, 4px gap) matching the legend's dashed line icon - Batch key now includes edge type for correct batch separation - Removed redundant setLineDash reset inside save/restore block - 928 nodes / 931 edges at 200 docs renders smoothly - All 107 tests pass, types clean
This commit is contained in:
parent
703ff09517
commit
3dcabe41bb
1 changed files with 24 additions and 9 deletions
|
|
@ -81,7 +81,7 @@ interface PreparedEdge {
|
|||
endY: number
|
||||
connected: boolean
|
||||
style: { color: string; width: number; opacity: number }
|
||||
isUpdates: boolean
|
||||
edgeType: string
|
||||
arrowSize: number
|
||||
}
|
||||
|
||||
|
|
@ -155,7 +155,7 @@ function drawEdges(
|
|||
endY: t.y - uy * tr,
|
||||
connected,
|
||||
style: edgeStyle(edge, colors),
|
||||
isUpdates: edge.edgeType === "updates",
|
||||
edgeType: edge.edgeType ?? "derives",
|
||||
arrowSize:
|
||||
edge.edgeType === "updates" ? Math.max(6, 8 * viewport.zoom) : 0,
|
||||
})
|
||||
|
|
@ -165,7 +165,7 @@ function drawEdges(
|
|||
edgeBatches.clear()
|
||||
for (const e of prepared) {
|
||||
const dimKey = hasDim ? (e.connected ? "|c" : "|d") : ""
|
||||
const key = batchKey(e.style) + dimKey
|
||||
const key = `${e.edgeType}|${batchKey(e.style)}${dimKey}`
|
||||
let batch = edgeBatches.get(key)
|
||||
if (!batch) {
|
||||
batch = []
|
||||
|
|
@ -179,14 +179,23 @@ function drawEdges(
|
|||
const first = batch[0]
|
||||
if (!first) continue
|
||||
const isDimmed = key.endsWith("|d")
|
||||
const batchEdgeType = first.edgeType
|
||||
|
||||
// Draw subtle glow pass behind updates edges
|
||||
const isUpdatesBatch = first.isUpdates
|
||||
if (isUpdatesBatch && !isDimmed) {
|
||||
// Draw subtle glow pass behind all edge types (stronger for updates)
|
||||
if (!isDimmed) {
|
||||
const glowAlpha =
|
||||
batchEdgeType === "updates"
|
||||
? first.style.opacity * 0.4
|
||||
: first.style.opacity * 0.25
|
||||
const glowWidth =
|
||||
batchEdgeType === "updates"
|
||||
? first.style.width + 2
|
||||
: first.style.width + 1.5
|
||||
ctx.save()
|
||||
ctx.globalAlpha = first.style.opacity * 0.4
|
||||
ctx.globalAlpha = glowAlpha
|
||||
ctx.strokeStyle = first.style.color
|
||||
ctx.lineWidth = first.style.width + 2
|
||||
ctx.lineWidth = glowWidth
|
||||
if (batchEdgeType === "extends") ctx.setLineDash([6, 4])
|
||||
ctx.beginPath()
|
||||
for (const e of batch) {
|
||||
ctx.moveTo(e.startX, e.startY)
|
||||
|
|
@ -203,6 +212,9 @@ function drawEdges(
|
|||
ctx.strokeStyle = first.style.color
|
||||
ctx.lineWidth = first.style.width
|
||||
|
||||
// Extends edges use dashed lines
|
||||
if (batchEdgeType === "extends") ctx.setLineDash([6, 4])
|
||||
|
||||
ctx.beginPath()
|
||||
for (const e of batch) {
|
||||
ctx.moveTo(e.startX, e.startY)
|
||||
|
|
@ -210,7 +222,10 @@ function drawEdges(
|
|||
}
|
||||
ctx.stroke()
|
||||
|
||||
if (isUpdatesBatch) {
|
||||
if (batchEdgeType === "extends") ctx.setLineDash([])
|
||||
|
||||
// Arrowheads for updates edges
|
||||
if (batchEdgeType === "updates") {
|
||||
ctx.globalAlpha = isDimmed
|
||||
? first.style.opacity * 0.6 * (1 - state.dimProgress * 0.8)
|
||||
: first.style.opacity * 0.6
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue