This commit is contained in:
Connor Turland 2017-09-19 10:16:14 -04:00
parent c4d0bf8ce4
commit 0d6963ebb0
4 changed files with 40 additions and 50 deletions

View file

@ -1,15 +1,10 @@
/* global $, Image, CanvasLoader */ /* global $, Image */
import _ from 'lodash' import _ from 'lodash'
import outdent from 'outdent'
import clipboard from 'clipboard-js' import clipboard from 'clipboard-js'
import React from 'react'
import ReactDOM from 'react-dom'
import $jit from '../patched/JIT' import $jit from '../patched/JIT'
import MetacodeSelect from '../components/MetacodeSelect'
import Active from './Active' import Active from './Active'
import ContextMenu from './Views/ContextMenu' import ContextMenu from './Views/ContextMenu'
import Control from './Control' import Control from './Control'
@ -1347,16 +1342,11 @@ const JIT = {
selectNodeOnRightClickHandler: function(node, e) { selectNodeOnRightClickHandler: function(node, e) {
// the 'node' variable is a JIT node, the one that was clicked on // the 'node' variable is a JIT node, the one that was clicked on
// the 'e' variable is the click event // the 'e' variable is the click event
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
if (Visualize.mGraph.busy) return if (Visualize.mGraph.busy) return
// select the node
Control.selectNode(node, e) Control.selectNode(node, e)
ContextMenu.selectNode(ReactApp.render, node, {x: e.clientX, y: e.clientY}) ContextMenu.selectNode(ReactApp.render, node, {x: e.clientX, y: e.clientY})
}, // selectNodeOnRightClickHandler, }, // selectNodeOnRightClickHandler,
selectEdgeOnClickHandler: function(adj, e) { selectEdgeOnClickHandler: function(adj, e) {
if (Visualize.mGraph.busy) return if (Visualize.mGraph.busy) return

View file

@ -1,3 +1,4 @@
/* global $ */
import Control from '../Control' import Control from '../Control'
import DataModel from '../DataModel' import DataModel from '../DataModel'
import Selected from '../Selected' import Selected from '../Selected'

View file

@ -1,4 +1,4 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import ContextMenu from '../common/ContextMenu' import ContextMenu from '../common/ContextMenu'
@ -10,7 +10,6 @@ import VisualizationControls from '../common/VisualizationControls'
import MapChat from './MapChat' import MapChat from './MapChat'
import TopicCard from '../TopicCard' import TopicCard from '../TopicCard'
export default class MapView extends Component { export default class MapView extends Component {
static propTypes = { static propTypes = {

View file

@ -78,9 +78,9 @@ class ContextMenu extends Component {
hide = () => { hide = () => {
const { contextHide } = this.props const { contextHide } = this.props
return <li className="rc-hide" onClick={contextHide}> return <li className='rc-hide' onClick={contextHide}>
<div className="rc-icon" />Hide until refresh <div className='rc-icon' />Hide until refresh
<div className="rc-keyboard">Ctrl+H</div> <div className='rc-keyboard'>Ctrl+H</div>
</li> </li>
} }
@ -90,9 +90,9 @@ class ContextMenu extends Component {
if (!canEditMap) { if (!canEditMap) {
return null return null
} }
return <li className="rc-remove" onClick={contextRemove}> return <li className='rc-remove' onClick={contextRemove}>
<div className="rc-icon" />Remove from map <div className='rc-icon' />Remove from map
<div className="rc-keyboard">Ctrl+M</div> <div className='rc-keyboard'>Ctrl+M</div>
</li> </li>
} }
@ -102,9 +102,9 @@ class ContextMenu extends Component {
if (!canEditMap) { if (!canEditMap) {
return null return null
} }
return <li className="rc-delete" onClick={contextDelete}> return <li className='rc-delete' onClick={contextDelete}>
<div className="rc-icon" />Delete <div className='rc-icon' />Delete
<div className="rc-keyboard">Ctrl+D</div> <div className='rc-keyboard'>Ctrl+D</div>
</li> </li>
} }
@ -113,10 +113,10 @@ class ContextMenu extends Component {
if (!(contextNode && topicId)) { if (!(contextNode && topicId)) {
return null return null
} }
return <li className="rc-center" return <li className='rc-center'
onClick={() => contextCenterOn(contextNode.id)}> onClick={() => contextCenterOn(contextNode.id)}>
<div className="rc-icon" />Center this topic <div className='rc-icon' />Center this topic
<div className="rc-keyboard">Alt+E</div> <div className='rc-keyboard'>Alt+E</div>
</li> </li>
} }
@ -125,9 +125,9 @@ class ContextMenu extends Component {
if (!contextNode) { if (!contextNode) {
return null return null
} }
return <li className="rc-popout" return <li className='rc-popout'
onClick={() => contextPopoutTopic(contextNode.id)}> onClick={() => contextPopoutTopic(contextNode.id)}>
<div className="rc-icon" />Open in new tab <div className='rc-icon' />Open in new tab
</li> </li>
} }
@ -136,23 +136,23 @@ class ContextMenu extends Component {
if (!currentUser) { if (!currentUser) {
return null return null
} }
return <li className="rc-permission"> return <li className='rc-permission'>
<div className="rc-icon" />Change permissions <div className='rc-icon' />Change permissions
<ul> <ul>
<li className="changeP toCommons" <li className='changeP toCommons'
onClick={() => contextUpdatePermissions('commons')}> onClick={() => contextUpdatePermissions('commons')}>
<div className="rc-perm-icon" />commons <div className='rc-perm-icon' />commons
</li> </li>
<li className="changeP toPublic" <li className='changeP toPublic'
onClick={() => contextUpdatePermissions('public')}> onClick={() => contextUpdatePermissions('public')}>
<div className="rc-perm-icon" />public <div className='rc-perm-icon' />public
</li> </li>
<li className="changeP toPrivate" <li className='changeP toPrivate'
onClick={() => contextUpdatePermissions('private')}> onClick={() => contextUpdatePermissions('private')}>
<div className="rc-perm-icon" />private <div className='rc-perm-icon' />private
</li> </li>
</ul> </ul>
<div className="expandLi" /> <div className='expandLi' />
</li> </li>
} }
@ -162,16 +162,16 @@ class ContextMenu extends Component {
if (!currentUser) { if (!currentUser) {
return null return null
} }
return <li className="rc-metacode"> return <li className='rc-metacode'>
<div className="rc-icon" />Change metacode <div className='rc-icon' />Change metacode
<div id="metacodeOptionsWrapper"> <div id='metacodeOptionsWrapper'>
<MetacodeSelect <MetacodeSelect
onMetacodeSelect={id => { onMetacodeSelect={id => {
contextOnMetacodeSelect(contextNode && contextNode.id, id) contextOnMetacodeSelect(contextNode && contextNode.id, id)
}} }}
metacodeSets={metacodeSets} /> metacodeSets={metacodeSets} />
</div> </div>
<div className="expandLi" /> <div className='expandLi' />
</li> </li>
} }
@ -188,13 +188,13 @@ class ContextMenu extends Component {
if (!(contextNode && topicId)) { if (!(contextNode && topicId)) {
return null return null
} }
return <li className="rc-siblings" return <li className='rc-siblings'
onMouseOver={populateSiblings}> onMouseOver={populateSiblings}>
<div className="rc-icon" />Reveal siblings <div className='rc-icon' />Reveal siblings
<ul id="fetchSiblingList"> <ul id='fetchSiblingList'>
<li className="fetchAll" <li className='fetchAll'
onClick={() => contextFetchSiblings(contextNode)}>All onClick={() => contextFetchSiblings(contextNode)}>All
<div className="rc-keyboard">Alt+R</div> <div className='rc-keyboard'>Alt+R</div>
</li> </li>
{contextSiblingsData && Object.keys(contextSiblingsData).map(key => { {contextSiblingsData && Object.keys(contextSiblingsData).map(key => {
return <li key={key} return <li key={key}
@ -202,27 +202,27 @@ class ContextMenu extends Component {
{contextSiblingsData[key]} {contextSiblingsData[key]}
</li> </li>
})} })}
{contextFetchingSiblingsData && <li id="loadingSiblings">loading...</li>} {contextFetchingSiblingsData && <li id='loadingSiblings'>loading...</li>}
</ul> </ul>
<div className="expandLi" /> <div className='expandLi' />
</li> </li>
} }
render () { render() {
const { contextNode, currentUser, topicId } = this.props const { contextNode, currentUser, topicId } = this.props
const positionData = this.getPositionData() const positionData = this.getPositionData()
const style = Object.assign({}, {position: 'absolute'}, positionData.pos) const style = Object.assign({}, {position: 'absolute'}, positionData.pos)
const showSpacer = currentUser || (contextNode && topicId) const showSpacer = currentUser || (contextNode && topicId)
return <div style={style} return <div style={style}
className={"rightclickmenu " + positionData.extraClasses.join(' ')}> className={'rightclickmenu ' + positionData.extraClasses.join(' ')}>
<ul> <ul>
{this.hide()} {this.hide()}
{this.remove()} {this.remove()}
{this.delete()} {this.delete()}
{this.center()} {this.center()}
{this.popout()} {this.popout()}
{showSpacer && <li className="rc-spacer" />} {showSpacer && <li className='rc-spacer' />}
{this.permission()} {this.permission()}
{this.metacode()} {this.metacode()}
{this.siblings()} {this.siblings()}