291 lines
8.0 KiB
Vue
291 lines
8.0 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
notesRelations,
|
|
getNoteById,
|
|
activeNote,
|
|
setActiveNote,
|
|
rootNote
|
|
} from '@/composables/useNotes'
|
|
import cytoscape from 'cytoscape'
|
|
import shortid from 'shortid'
|
|
|
|
const renderMindmap = () => {
|
|
const mindmapCanvas = mindmapElement.value
|
|
if (!mindmapCanvas) return
|
|
const style = {
|
|
contextedBlue: '#1e4bc4',
|
|
nodeBackground: '#6c757d',
|
|
edge: '#ced4da'
|
|
}
|
|
|
|
const boundingBox = {
|
|
x1: 0,
|
|
y1: 0,
|
|
w: mindmapCanvas.clientWidth,
|
|
h: mindmapCanvas.clientHeight
|
|
}
|
|
const elements = {
|
|
nodes: nodes.value,
|
|
edges: [
|
|
...links.value.map((link) => ({ data: { id: `${link.source}-${link.target}`, ...link } }))
|
|
]
|
|
}
|
|
const cy = cytoscape({
|
|
container: mindmapCanvas,
|
|
elements,
|
|
layout: {
|
|
name: 'cose',
|
|
|
|
// Called on `layoutready`
|
|
ready: function () {},
|
|
|
|
// Called on `layoutstop`
|
|
stop: function () {},
|
|
|
|
// Whether to animate while running the layout
|
|
// true : Animate continuously as the layout is running
|
|
// false : Just show the end result
|
|
// 'end' : Animate with the end result, from the initial positions to the end positions
|
|
animate: false,
|
|
|
|
// Easing of the animation for animate:'end'
|
|
animationEasing: undefined,
|
|
|
|
// The duration of the animation for animate:'end'
|
|
animationDuration: undefined,
|
|
|
|
// A function that determines whether the node should be animated
|
|
// All nodes animated by default on animate enabled
|
|
// Non-animated nodes are positioned immediately when the layout starts
|
|
// animateFilter: function (node, i) {
|
|
animateFilter: function () {
|
|
return true
|
|
},
|
|
|
|
// The layout animates only after this many milliseconds for animate:true
|
|
// (prevents flashing on fast runs)
|
|
animationThreshold: 250,
|
|
|
|
// Number of iterations between consecutive screen positions update
|
|
refresh: 20,
|
|
|
|
// Whether to fit the network view after when done
|
|
fit: true,
|
|
|
|
// Padding on fit
|
|
padding: 30,
|
|
|
|
// Constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
|
|
// boundingBox: undefined,
|
|
boundingBox,
|
|
|
|
// Excludes the label when calculating node bounding boxes for the layout algorithm
|
|
nodeDimensionsIncludeLabels: false,
|
|
|
|
// Randomize the initial positions of the nodes (true) or use existing positions (false)
|
|
randomize: false,
|
|
|
|
// Extra spacing between components in non-compound graphs
|
|
componentSpacing: 40,
|
|
|
|
// Node repulsion (non overlapping) multiplier
|
|
// nodeRepulsion: function (node) {
|
|
nodeRepulsion: function () {
|
|
return 2048
|
|
},
|
|
|
|
// Node repulsion (overlapping) multiplier
|
|
nodeOverlap: 4,
|
|
|
|
// Ideal edge (non nested) length
|
|
// idealEdgeLength: function (edge) {
|
|
idealEdgeLength: function () {
|
|
return 32
|
|
},
|
|
|
|
// Divisor to compute edge forces
|
|
// edgeElasticity: function (edge) {
|
|
edgeElasticity: function () {
|
|
return 32
|
|
},
|
|
|
|
// Nesting factor (multiplier) to compute ideal edge length for nested edges
|
|
nestingFactor: 1.2,
|
|
|
|
// Gravity force (constant)
|
|
gravity: 1,
|
|
|
|
// Maximum number of iterations to perform
|
|
numIter: 1000,
|
|
|
|
// Initial temperature (maximum node displacement)
|
|
initialTemp: 1000,
|
|
|
|
// Cooling factor (how the temperature is reduced between consecutive iterations
|
|
coolingFactor: 0.99,
|
|
|
|
// Lower temperature threshold (below this point the layout will end)
|
|
minTemp: 1.0
|
|
},
|
|
// userZoomingEnabled: false,
|
|
userPanningEnabled: false,
|
|
pixelRatio: window.devicePixelRatio ? window.devicePixelRatio * 1.5 : 'auto',
|
|
style: [
|
|
// the stylesheet for the graph
|
|
{
|
|
selector: 'node',
|
|
style: {
|
|
'background-color': style.nodeBackground,
|
|
label: 'data(title)',
|
|
'font-family': 'Source Sans Pro, sans-serif',
|
|
'font-weight': 400,
|
|
'font-size': '1.5em',
|
|
'text-events': 'yes'
|
|
}
|
|
},
|
|
{
|
|
selector: '.current',
|
|
style: {
|
|
'background-color': style.contextedBlue
|
|
}
|
|
},
|
|
{
|
|
selector: '.mouseover',
|
|
style: {
|
|
'background-color': style.contextedBlue,
|
|
color: style.contextedBlue
|
|
}
|
|
},
|
|
{
|
|
selector: 'edge',
|
|
style: {
|
|
width: 3,
|
|
'line-color': style.edge,
|
|
'target-arrow-color': style.edge,
|
|
'target-arrow-shape': 'triangle',
|
|
'curve-style': 'bezier'
|
|
}
|
|
}
|
|
]
|
|
})
|
|
cy.nodes().forEach((node) => {
|
|
if (node.data('id') === activeNote.value?.id) node.addClass('current')
|
|
})
|
|
cy.nodes().on('tap', (event) => {
|
|
setActiveNote(event.target.data('id'))
|
|
})
|
|
cy.on('mouseover', 'node', (event) => {
|
|
event.target.addClass('mouseover')
|
|
mindmapCanvas.classList.add('mouseover')
|
|
})
|
|
cy.on('mouseout', 'node', (event) => {
|
|
event.target.removeClass('mouseover')
|
|
mindmapCanvas.classList.remove('mouseover')
|
|
})
|
|
}
|
|
|
|
const mindmapElement = ref<HTMLInputElement | null>(null)
|
|
|
|
interface Mindmap {
|
|
id: string
|
|
notes: string[]
|
|
isRoot: boolean
|
|
}
|
|
const selectedMindmap = ref<Mindmap>()
|
|
const mindmaps = computed<Mindmap[]>(() => {
|
|
const mindmaps = Object.entries(notesRelations.value).reduce((mindmaps, [noteId, relations]) => {
|
|
const atomicMindmap = [noteId, ...relations.to, ...relations.from]
|
|
const indices = mindmaps
|
|
.filter(
|
|
(mindmap) => [...mindmap].filter((noteId) => atomicMindmap.includes(noteId)).length > 0
|
|
)
|
|
.map((mindmap) => mindmaps.indexOf(mindmap))
|
|
if (indices.length > 0) {
|
|
const index = indices[0]
|
|
const currentMindmap = indices.reduce(
|
|
(mindmap, index) => mindmap.concat(mindmaps[index]),
|
|
[] as string[]
|
|
)
|
|
indices.forEach((index, i) => {
|
|
if (i !== 0) mindmaps.splice(index, 1)
|
|
})
|
|
mindmaps[index] = [...currentMindmap, ...atomicMindmap].filter(
|
|
(item, index, arr) => arr.indexOf(item) === index
|
|
)
|
|
} else {
|
|
mindmaps.push(atomicMindmap)
|
|
}
|
|
return mindmaps
|
|
}, [] as string[][])
|
|
return mindmaps
|
|
.filter((mindmap) => mindmap.length > 1)
|
|
.sort((a, b) => {
|
|
return a.includes(rootNote.value?.id || '') ? b.length - a.length : 1
|
|
})
|
|
.slice(0, 5)
|
|
.map((mindmap): Mindmap => {
|
|
const isRoot = mindmap.includes(rootNote.value?.id || '')
|
|
return { id: shortid.generate(), notes: mindmap, isRoot }
|
|
})
|
|
})
|
|
watch(
|
|
mindmaps,
|
|
() => {
|
|
if (!selectedMindmap.value) selectedMindmap.value = mindmaps.value[0]
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
watch(selectedMindmap, () => setTimeout(() => renderMindmap(), 0), { immediate: true })
|
|
|
|
const nodes = computed(() => {
|
|
return (
|
|
Object.entries(notesRelations.value)
|
|
// .filter(([, relations]) => relations.to.length > 0)
|
|
.filter(([noteId]) => selectedMindmap.value?.notes.includes(noteId))
|
|
.map(([noteId]) => {
|
|
return {
|
|
data: {
|
|
id: noteId,
|
|
title: getNoteById(noteId)?.title
|
|
}
|
|
}
|
|
})
|
|
)
|
|
})
|
|
|
|
const links = computed(() => {
|
|
return Object.entries(notesRelations.value)
|
|
.filter(([noteId]) => selectedMindmap.value?.notes.includes(noteId))
|
|
.filter(([, relations]) => relations.to.length > 0)
|
|
.map(([noteId, relations]) => {
|
|
return relations.to.map((to) => ({
|
|
source: noteId,
|
|
target: to
|
|
}))
|
|
})
|
|
.reduce((arr, elem) => arr.concat(elem), [])
|
|
})
|
|
</script>
|
|
<template>
|
|
<div class="flex h-full flex-grow flex-col">
|
|
<div class="tabs">
|
|
<a
|
|
class="tab-bordered tab-lifted tab tab-md"
|
|
:class="mindmap.id === selectedMindmap?.id && 'tab-active !border-primary text-primary'"
|
|
v-for="mindmap in mindmaps"
|
|
:key="mindmap.id"
|
|
@click="selectedMindmap = mindmap"
|
|
>
|
|
<i class="fas fa-fw fa-home root mr-1" v-if="mindmap.isRoot" />
|
|
{{ mindmap.notes.length }} notes
|
|
</a>
|
|
</div>
|
|
<div id="mindmap" ref="mindmapElement" class="h-full"></div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.mouseover {
|
|
@apply hover:cursor-pointer;
|
|
}
|
|
</style>
|