#49 feat: componente genérico CytoscapeChart con evento select

src/components/graph/CytoscapeChart.vue

@@ -0,0 +1,75 @@
+<template>
+  <div
+    ref="containerRef"
+    class="cytoscape-chart"
+    :style="{ height: `${height}px` }"
+  />
+</template>
+
+<script setup>
+  import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+  import cytoscape from 'cytoscape'
+
+  const props = defineProps({
+    elements: {
+      type: Array,
+      default: () => [],
+    },
+    styles: {
+      type: Array,
+      default: () => [],
+    },
+    layout: {
+      type: Object,
+      default: () => ({ name: 'preset' }),
+    },
+    height: {
+      type: Number,
+      default: 400,
+    },
+  })
+
+  const emit = defineEmits(['select'])
+
+  const containerRef = ref(null)
+  let cy = null
+
+  function runLayout () {
+    cy.layout(props.layout).run()
+  }
+
+  onMounted(() => {
+    cy = cytoscape({
+      container: containerRef.value,
+      elements: props.elements,
+      style: props.styles,
+      layout: props.layout,
+    })
+    cy.on('tap', 'node', event => {
+      emit('select', event.target.data())
+    })
+  })
+
+  watch(
+    () => props.elements,
+    elements => {
+      if (!cy) return
+      cy.elements().remove()
+      cy.add(elements)
+      runLayout()
+    },
+    { deep: true }
+  )
+
+  onBeforeUnmount(() => {
+    if (cy) cy.destroy()
+    cy = null
+  })
+</script>
+
+<style scoped>
+.cytoscape-chart {
+  width: 100%;
+  min-height: 200px;
+}
+</style>