simon987/music-graph-ui
1
0
Fork 0
mirror of https://github.com/simon987/music-graph-ui.git synced 2025-04-19 01:56:42 +00:00
Code Issues Projects Releases Wiki Activity

menu tweaks

Browse Source
This commit is contained in:
simon 2019-05-21 14:38:19 -04:00
parent abd052ab8c
commit 6cc15d6865
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
music_graph/src/MusicGraph.js
View File

@ -47,6 +47,7 @@ export function MusicGraph(data) {
d.fy = null d.fy = null
d.menu = null d.menu = null
}) })
this.svg.classed('menu-mode', false)
} }
this.svg = d3.select('#mm') this.svg = d3.select('#mm')
@ -97,6 +98,9 @@ export function MusicGraph(data) {
} }
this.dragEnded = (d) => { this.dragEnded = (d) => {
if (d.menu) {
return
}
if (!d3.event.active) { if (!d3.event.active) {
this.simulation.alphaTarget(0) this.simulation.alphaTarget(0)
} }
@ -150,10 +154,10 @@ export function MusicGraph(data) {
this.makeMenu = function (d) { this.makeMenu = function (d) {
// Todo global const? // Todo global const?
const items = [ const items = [
{idx: 0, icon: icons.expand}, {idx: 0, icon: icons.expand, title: 'Related'},
{idx: 1, icon: icons.release}, {idx: 1, icon: icons.release, title: 'Releases'},
{idx: 2, icon: icons.hash}, {idx: 2, icon: icons.hash, title: 'Tags'},
{idx: 3, icon: icons.guitar} {idx: 3, icon: icons.guitar, title: 'Members'}
] ]
const tr = `translate(${d.x},${d.y})` const tr = `translate(${d.x},${d.y})`
@ -165,9 +169,10 @@ export function MusicGraph(data) {
.classed('menu-item', true) .classed('menu-item', true)
.attr('transform', tr) .attr('transform', tr)
this.menu const path = this.menu
.append('path') .append('path')
.attr('d', item => arc(35, item.idx, items.length, 1)()) .attr('d', item => arc(35, item.idx, items.length, 1)())
path
.on('mouseover', d => { .on('mouseover', d => {
this.menu.classed('hover', item => item.idx === d.idx) this.menu.classed('hover', item => item.idx === d.idx)
}) })
@ -175,6 +180,9 @@ export function MusicGraph(data) {
.transition() .transition()
.duration(200) .duration(200)
.attr('d', item => arc(35, item.idx, items.length, 30)()) .attr('d', item => arc(35, item.idx, items.length, 30)())
path
.append('title')
.text(item => item.title)
const angleOffset = items.length === 3 ? 3.72 : 3.927 // Don't ask const angleOffset = items.length === 3 ? 3.72 : 3.927 // Don't ask
this.menu this.menu
@ -195,7 +203,7 @@ export function MusicGraph(data) {
} }
this.nodeDbClick = (d) => { this.nodeDbClick = (d) => {
if (d.menu) { if (this.svg.classed('menu-mode')) {
return return
} }