mindmap

src/components/ViewModes/Mindmap.vue

@@ -0,0 +1,286 @@
+<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) {
+        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) {
+        return 2048
+      },
+
+      // Node repulsion (overlapping) multiplier
+      nodeOverlap: 4,
+
+      // Ideal edge (non nested) length
+      idealEdgeLength: function (edge) {
+        return 32
+      },
+
+      // Divisor to compute edge forces
+      edgeElasticity: function (edge) {
+        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 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>