remove NodeMap component
This commit is contained in:
axolotle
@@ -1,255 +0,0 @@
|
|||||||
<template>
|
|
||||||
<svg
|
|
||||||
width="100%" height="100%"
|
|
||||||
ref="svg" :id="id"
|
|
||||||
:view-box.camel="viewBox"
|
|
||||||
>
|
|
||||||
<g :id="id + '-map'" v-if="ready">
|
|
||||||
<g>
|
|
||||||
<path
|
|
||||||
v-for="(item, index) in links"
|
|
||||||
:key="`link_${index}`"
|
|
||||||
:d="lineGenerator([item.source, item.target])"
|
|
||||||
:class="['link', item.linkType || item.target.data.linkType]"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
|
|
||||||
<circle
|
|
||||||
v-for="(node, index) in nodes"
|
|
||||||
:key="'circle' + index"
|
|
||||||
:cx="node.x"
|
|
||||||
:cy="node.y"
|
|
||||||
class="svg-dot-btn"
|
|
||||||
:class="['svg-dot-btn-' + node.data.variant, { 'origin': node.parent === null }]"
|
|
||||||
tabindex="0"
|
|
||||||
@click="onNodeClick(node.data)"
|
|
||||||
@keyup.enter="onNodeClick(node.data)"
|
|
||||||
@mouseenter="activeNode = node"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<g>
|
|
||||||
<!-- rect for forcing full render -->
|
|
||||||
<rect
|
|
||||||
x="-50%" y="-50%" fill="transparent"
|
|
||||||
width="100%" height="100%" style="pointer-events: none;"
|
|
||||||
/>
|
|
||||||
<foreignObject
|
|
||||||
v-if="activeNode"
|
|
||||||
:x="activeNode.x"
|
|
||||||
:y="activeNode.y"
|
|
||||||
>
|
|
||||||
<dot-button
|
|
||||||
:variant="activeNode.data.variant"
|
|
||||||
class="active"
|
|
||||||
@click="onNodeClick(activeNode.data)"
|
|
||||||
@mouseleave="activeNode = null"
|
|
||||||
>
|
|
||||||
<template v-if="activeNode.data.variant !== 'depart'">
|
|
||||||
{{ $t('variants.' + activeNode.data.variant) }}<br>
|
|
||||||
</template>
|
|
||||||
{{ toCommaList(activeNode.data.authors) }},<br>
|
|
||||||
<span v-if="activeNode.data.preTitle" v-html="activeNode.data.preTitle + ','" />
|
|
||||||
<span v-html="activeNode.data.title || '<em>pas de titre ital</em>'" />
|
|
||||||
</dot-button>
|
|
||||||
</foreignObject>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { line } from 'd3-shape'
|
|
||||||
import { selectAll } from 'd3-selection'
|
|
||||||
import { select, zoom } from 'd3'
|
|
||||||
import { drag } from 'd3-drag'
|
|
||||||
import {
|
|
||||||
forceSimulation, forceLink, forceManyBody,
|
|
||||||
forceX, forceY
|
|
||||||
} from 'd3-force'
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
|
||||||
/*
|
|
||||||
This component uses vue as the svg renderer and the rest is handle with d3 functions
|
|
||||||
(events, data computing, etc.)
|
|
||||||
*/
|
|
||||||
name: 'NodeMap',
|
|
||||||
|
|
||||||
props: {
|
|
||||||
nodes: { type: Array, required: true },
|
|
||||||
links: { type: Array, required: true },
|
|
||||||
id: { type: String, default: 'node-map' }
|
|
||||||
},
|
|
||||||
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
ready: false,
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
simulation: forceSimulation(),
|
|
||||||
lineGenerator: line().x(node => node.x).y(node => node.y),
|
|
||||||
activeNode: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
viewBox () {
|
|
||||||
const { width, height } = this
|
|
||||||
return `-${width / 2} -${height / 2} ${width} ${height}`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
toCommaList (arr) {
|
|
||||||
// FIXME TEMP some texts doesn't have authors
|
|
||||||
try {
|
|
||||||
return arr.map(({ name }) => name).join(', ')
|
|
||||||
} catch {
|
|
||||||
return 'pas d\'auteur⋅rices'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
updateSize () {
|
|
||||||
const { width, height } = this.$el.getBoundingClientRect()
|
|
||||||
Object.assign(this.$data, { width, height })
|
|
||||||
},
|
|
||||||
|
|
||||||
init () {
|
|
||||||
this.updateSize()
|
|
||||||
|
|
||||||
this.nodes.forEach(node => {
|
|
||||||
this.$set(node, 'x', this.width * 0.5)
|
|
||||||
this.$set(node, 'y', this.height * 0.5)
|
|
||||||
})
|
|
||||||
|
|
||||||
this.setupForces()
|
|
||||||
// Wait for DOM update so d3 can select
|
|
||||||
this.$nextTick(this.initListeners)
|
|
||||||
this.ready = true
|
|
||||||
},
|
|
||||||
|
|
||||||
initListeners () {
|
|
||||||
// TODO replace with vue events ?
|
|
||||||
const svg = select('#' + this.id)
|
|
||||||
const map = select('#' + this.id + '-map')
|
|
||||||
svg.call(zoom()
|
|
||||||
.extent([[0, 0], [this.width, this.height]])
|
|
||||||
.scaleExtent([0.3, 1])
|
|
||||||
.on('zoom', ({ transform }) => {
|
|
||||||
map.attr('transform', transform)
|
|
||||||
}))
|
|
||||||
|
|
||||||
selectAll(`#${this.id} circle`)
|
|
||||||
.data(this.nodes)
|
|
||||||
.call(drag()
|
|
||||||
.on('start', this.onNodeDragStart)
|
|
||||||
.on('drag', this.onNodeDrag)
|
|
||||||
.on('end', this.onNodeDragEnd)
|
|
||||||
)
|
|
||||||
},
|
|
||||||
|
|
||||||
setupForces () {
|
|
||||||
this.simulation
|
|
||||||
.nodes(this.nodes)
|
|
||||||
.force('charge', forceManyBody().strength((d) => {
|
|
||||||
if (d.data.linkType === 'parents') return -2000
|
|
||||||
if (d.data.linkType === 'siblings') return -500
|
|
||||||
return -1000
|
|
||||||
}))
|
|
||||||
.force('link', forceLink(this.links).id(d => d.id).distance((d) => {
|
|
||||||
if (d.linkType === 'parents') return 200
|
|
||||||
if (d.linkType === 'siblings') return 100
|
|
||||||
return 0
|
|
||||||
}).strength(0.5))
|
|
||||||
.force('x', forceX())
|
|
||||||
.force('y', forceY())
|
|
||||||
},
|
|
||||||
|
|
||||||
// D3 DRAG EVENT HANDLERS
|
|
||||||
|
|
||||||
onNodeDragStart (e, node) {
|
|
||||||
if (!e.active) {
|
|
||||||
this.simulation.alphaTarget(0.8).restart()
|
|
||||||
}
|
|
||||||
node.fx = node.x
|
|
||||||
node.fy = node.y
|
|
||||||
},
|
|
||||||
|
|
||||||
onNodeDrag (e, node) {
|
|
||||||
node.fx = e.x
|
|
||||||
node.fy = e.y
|
|
||||||
},
|
|
||||||
|
|
||||||
onNodeDragEnd (e, node) {
|
|
||||||
if (!e.active) {
|
|
||||||
this.simulation.alphaTarget(0)
|
|
||||||
}
|
|
||||||
node.fx = null
|
|
||||||
node.fy = null
|
|
||||||
},
|
|
||||||
|
|
||||||
// BASIC HANDLERS
|
|
||||||
|
|
||||||
onNodeClick (nodeData) {
|
|
||||||
// FIXME CURRENT PROBLEM AS API TREATING TEXTPRODs as TEXTREFs (no `parents:`)
|
|
||||||
const { id, parents } = nodeData
|
|
||||||
if (parents) {
|
|
||||||
this.$emit('open-node', parents[0].id, id)
|
|
||||||
} else {
|
|
||||||
this.$emit('open-node', id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted () {
|
|
||||||
this.init()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.link {
|
|
||||||
stroke: grey;
|
|
||||||
vector-effect: non-scaling-stroke;
|
|
||||||
|
|
||||||
&.siblings {
|
|
||||||
stroke-dasharray: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.parents {
|
|
||||||
stroke: red;
|
|
||||||
opacity: .3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.svg-dot-btn {
|
|
||||||
r: 9.5px;
|
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
|
||||||
&-#{$color} {
|
|
||||||
fill: $value;
|
|
||||||
|
|
||||||
@if $color == 'depart' {
|
|
||||||
stroke: $black;
|
|
||||||
stroke-width: 3px;
|
|
||||||
vector-effect: non-scaling-stroke;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.origin {
|
|
||||||
r: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
foreignObject {
|
|
||||||
height: 1px;
|
|
||||||
width: 1px;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot-btn {
|
|
||||||
vertical-align: top;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user