Show floating menu on selection

src/components/JSONNode.js

@@ -8,7 +8,7 @@ import FloatingMenu from './menu/FloatingMenu'
 import { escapeHTML, unescapeHTML } from '../utils/stringUtils'
 import { getInnerText, insideRect, findParentWithAttribute } from '../utils/domUtils'
 import { stringConvert, valueType, isUrl } from  '../utils/typeUtils'
-import { compileJSONPointer } from  '../eson'
+import { compileJSONPointer, SELECTED, SELECTED_END } from  '../eson'
 
 import type { ESONObjectProperty, ESON, SearchResultStatus, Path } from '../types'
 
@@ -18,6 +18,7 @@ export default class JSONNode extends PureComponent {
   state = {
     menu: null,       // can contain object {anchor, root}
     appendMenu: null, // can contain object {anchor, root}
+    hover: false
   }
 
   render () {
@@ -45,16 +46,9 @@ export default class JSONNode extends PureComponent {
       this.renderExpandButton(),
       // this.renderActionMenu('update', this.state.menu, this.handleCloseActionMenu),
       // this.renderActionMenuButton(),
-      this.renderFloatingMenu([
-        {type: 'sort'},
-        {type: 'duplicate'},
-        {type: 'cut'},
-        {type: 'copy'},
-        {type: 'paste'},
-        {type: 'remove'}
-      ]),
       this.renderProperty(prop, index, data, options),
       this.renderReadonly(`{${childCount}}`, `Array containing ${childCount} items`),
+      // this.renderFloatingMenuButton(),
       this.renderError(data.error)
     ])
 
@@ -62,7 +56,7 @@ export default class JSONNode extends PureComponent {
     if (data.expanded) {
       if (data.props.length > 0) {
         const props = data.props.map(prop => {
-          return h('li', { key: prop.id, className: (prop.value.selected ? ' jsoneditor-selected' : '') },
+          return h('li', { key: prop.id, className: JSONNode.selectedClassName(prop.value.selected) },
             h(this.constructor, {
               path: this.props.path.concat(prop.name),
               prop,
@@ -84,7 +78,28 @@ export default class JSONNode extends PureComponent {
       }
     }
 
-    return h('div', {}, [node, childs])
+    const floatingMenu = this.renderFloatingMenu([
+      {type: 'sort'},
+      {type: 'duplicate'},
+      {type: 'cut'},
+      {type: 'copy'},
+      {type: 'paste'},
+      {type: 'remove'}
+    ])
+
+    return h('div', {
+      className: 'jsoneditor-node-container ' + (this.state.hover ? ' jsoneditor-node-hover': ''),
+      onMouseOver: this.handleMouseOver,
+      onMouseLeave: this.handleMouseLeave
+    }, [node, floatingMenu, childs])
+  }
+
+  static selectedClassName(selected: number) {
+    return (selected === SELECTED)
+        ? ' jsoneditor-selected'
+        : (selected === SELECTED_END)
+          ? 'jsoneditor-selected jsoneditor-selected-end'
+          : ''
   }
 
   // TODO: extract a function renderChilds shared by both renderJSONObject and renderJSONArray (rename .props and .items to .childs?)
@@ -99,16 +114,9 @@ export default class JSONNode extends PureComponent {
       this.renderExpandButton(),
       // this.renderActionMenu('update', this.state.menu, this.handleCloseActionMenu),
       // this.renderActionMenuButton(),
-      this.renderFloatingMenu([
-        {type: 'sort'},
-        {type: 'duplicate'},
-        {type: 'cut'},
-        {type: 'copy'},
-        {type: 'paste'},
-        {type: 'remove'}
-      ]),
       this.renderProperty(prop, index, data, options),
       this.renderReadonly(`[${childCount}]`, `Array containing ${childCount} items`),
+      // this.renderFloatingMenuButton(),
       this.renderError(data.error)
     ])
 
@@ -116,7 +124,7 @@ export default class JSONNode extends PureComponent {
     if (data.expanded) {
       if (data.items.length > 0) {
         const items = data.items.map((item, index) => {
-          return h('li', { key : item.id, className: (item.value.selected ? ' jsoneditor-selected' : '')},
+          return h('li', { key : item.id, className: JSONNode.selectedClassName(prop.value.selected)},
             h(this.constructor, {
               path: this.props.path.concat(String(index)),
               index,
@@ -137,11 +145,25 @@ export default class JSONNode extends PureComponent {
       }
     }
 
-    return h('div', {}, [node, childs])
+    const floatingMenu = this.renderFloatingMenu([
+      {type: 'sort'},
+      {type: 'duplicate'},
+      {type: 'cut'},
+      {type: 'copy'},
+      {type: 'paste'},
+      {type: 'remove'}
+    ])
+
+    return h('div', {
+      className: 'jsoneditor-node-container ' + (this.state.hover ? ' jsoneditor-node-hover': ''),
+      onMouseOver: this.handleMouseOver,
+      onMouseLeave: this.handleMouseLeave
+    }, [node, floatingMenu, childs])
   }
 
   renderJSONValue ({prop, index, data, options}) {
-    return h('div', {
+    const node = h('div', {
+        key: 'value',
         'data-path': compileJSONPointer(this.props.path),
         onKeyDown: this.handleKeyDown,
         className: 'jsoneditor-node'
@@ -149,19 +171,27 @@ export default class JSONNode extends PureComponent {
       this.renderPlaceholder(),
       // this.renderActionMenu('update', this.state.menu, this.handleCloseActionMenu),
       // this.renderActionMenuButton(),
-      this.renderFloatingMenu([
+      this.renderProperty(prop, index, data, options),
+      this.renderSeparator(),
+      this.renderValue(data.value, data.searchResult, options),
+      // this.renderFloatingMenuButton(),
+      this.renderError(data.error)
+    ])
+
+    const floatingMenu = this.renderFloatingMenu([
       // {text: 'String', onClick: this.props.events.onChangeType, type: 'checkbox', checked: false},
       {type: 'duplicate'},
       {type: 'cut'},
       {type: 'copy'},
       {type: 'paste'},
       {type: 'remove'}
-      ]),
-      this.renderProperty(prop, index, data, options),
-      this.renderSeparator(),
-      this.renderValue(data.value, data.searchResult, options),
-      this.renderError(data.error)
     ])
+
+    return h('div', {
+      className: 'jsoneditor-node-container ' + (this.state.hover ? ' jsoneditor-node-hover': ''),
+      onMouseOver: this.handleMouseOver,
+      onMouseLeave: this.handleMouseLeave
+    }, [node, floatingMenu])
   }
 
   /**
@@ -427,6 +457,20 @@ export default class JSONNode extends PureComponent {
     ])
   }
 
+  // TODO: cleanup
+  renderFloatingMenuButton () {
+    const className = 'jsoneditor-button jsoneditor-floatingmenu' +
+        ((this.state.open) ? ' jsoneditor-visible' : '')
+
+    return h('div', {className: 'jsoneditor-button-container', key: 'action'}, [
+      h('button', {
+        key: 'button',
+        className,
+        onClick: this.handleOpenActionMenu
+      })
+    ])
+  }
+
   renderFloatingMenu (items) {
     return h(FloatingMenu, {
       key: 'menu',
@@ -450,6 +494,26 @@ export default class JSONNode extends PureComponent {
     ])
   }
 
+  handleMouseOver = (event) => {
+    event.stopPropagation()
+
+    if (hoveredNode !== this) {
+
+      if (hoveredNode) {
+        // FIXME: this may give issues when the hovered node doesn't exist anymore. check whether mounted
+        hoveredNode.setState({hover: false})
+      }
+
+      this.setState({hover: true})
+      hoveredNode = this
+    }
+  }
+
+  handleMouseLeave = (event) => {
+    event.stopPropagation()
+    this.setState({hover: false})
+  }
+
   handleOpenActionMenu = (event) => {
     // TODO: don't use refs, find root purely via DOM?
     const root = findParentWithAttribute(this.refs.actionMenuButton, 'data-jsoneditor', 'true')
@@ -612,3 +676,6 @@ export default class JSONNode extends PureComponent {
         : stringConvert(stringValue)
   }
 }
+
+// singleton holding the node that's currently being hovered
+let hoveredNode = null

src/components/TreeMode.js

@@ -662,8 +662,9 @@ export default class TreeMode extends Component {
   }
 
   handleTap = (event) => {
+    const path = this.findDataPathFromElement(event.target.firstChild)
     if (this.state.selection) {
-      this.setState({ selection: null })
+      this.setState({ selection: {start: {path}, end: {path}}})
     }
   }
 

src/components/menu/FloatingMenu.js

@@ -3,7 +3,6 @@
 import { createElement as h, PureComponent } from 'react'
 import { keyComboFromEvent } from '../../utils/keyBindings'
 
-const MENU_CONTAINER_CLASS_NAME = 'jsoneditor-floating-menu-container'
 const MENU_CLASS_NAME = 'jsoneditor-floating-menu'
 const MENU_ITEM_CLASS_NAME = 'jsoneditor-floating-menu-item'
 
@@ -89,8 +88,7 @@ const CREATE_TYPE = {
 
 export default class FloatingMenu extends PureComponent {
   render () {
-    return h('div', {className: MENU_CONTAINER_CLASS_NAME},
+    return h('div', {className: MENU_CLASS_NAME}, this.props.items.map(item => {
-      h('div', {className: MENU_CLASS_NAME}, this.props.items.map(item => {
       const type = typeof item === 'string' ? item : item.type
       const createType = CREATE_TYPE[type]
       if (createType) {
@@ -99,7 +97,6 @@ export default class FloatingMenu extends PureComponent {
       else {
         throw new Error('Unknown type of menu item for floating menu: ' + JSON.stringify(item))
       }
-      })
+    }))
-    ))
   }
 }

src/eson.js

@@ -20,6 +20,9 @@ import type {
 
 type RecurseCallback = (value: ESON, path: Path, root: ESON) => ESON
 
+export const SELECTED = 1
+export const SELECTED_END = 2
+
 /**
  * Expand function which will expand all nodes
  * @param {Path} path
@@ -363,7 +366,8 @@ export function applySelection (eson: ESON, selection: ESONSelection) {
 
   if (rootPath.length === selection.start.path.length || rootPath.length === selection.end.path.length) {
     // select a single node
-    return setIn(eson, rootEsonPath.concat(['selected']), true)
+    return setIn(eson, rootEsonPath.concat(['selected']), SELECTED_END)
+    // FIXME: actually mark the end index as SELECTED_END, currently we select the first index
   }
   else {
     // select multiple childs of an object or array
@@ -375,8 +379,9 @@ export function applySelection (eson: ESON, selection: ESONSelection) {
       const childsKey = (root.type === 'Object') ? 'props' : 'items' // property name of the array with props/items
       const childsBefore = root[childsKey].slice(0, minIndex)
       const childsUpdated = root[childsKey].slice(minIndex, maxIndex)
-          .map(child => setIn(child, ['value', 'selected'], true))
+          .map((child, index) => setIn(child, ['value', 'selected'], index === 0 ? SELECTED_END : SELECTED))
       const childsAfter = root[childsKey].slice(maxIndex)
+      // FIXME: actually mark the end index as SELECTED_END, currently we select the first index
 
       return setIn(root, [childsKey], childsBefore.concat(childsUpdated, childsAfter))
     })

src/jsoneditor.less

@@ -7,7 +7,9 @@
 @theme-color: #3883fa;
 @floating-menu-background: #4d4d4d;
 @floating-menu-color: #fff;
-@selectedColor: #e5e5e5;
+// @selectedColor: #e5e5e5;
+@selectedColor: #ffed99;
+@hoverColor: rgba(10, 10, 10, 0.05);
 
 .jsoneditor {
   border: 1px solid @theme-color;
@@ -561,16 +563,17 @@ button.jsoneditor-type-Array.jsoneditor-selected span.jsoneditor-icon {
 
 /******************************* Floatting Menu **********************************/
 
-div.jsoneditor-node {
+div.jsoneditor-node-container {
+  position: relative;
+  transition: background-color 100ms ease-in;
 
-  div.jsoneditor-floating-menu-container {
+  div.jsoneditor-floating-menu {
     display: none;
     position: absolute;
     bottom: 100%;
-    left: 50%;
+    right: 0;
     z-index: 999;
 
-    div.jsoneditor-floating-menu {
     margin: 10px;
     white-space: nowrap;
     border-radius: 5px;
@@ -580,9 +583,8 @@ div.jsoneditor-node {
         content:'';
         position: absolute;
         top: 100%;
-          left: 10%;
+        left: 35px;
         margin-left: -10px;
-          margin-top: -10px;
         width: 0;
         height: 0;
         border-top: solid 10px @floating-menu-background;
@@ -614,17 +616,15 @@ div.jsoneditor-node {
       }
     }
   }
-  }
 
-  &:hover {
+  &.jsoneditor-node-hover {
-    background-color: @selectedColor;
+    background-color: @hoverColor;
-
-    div.jsoneditor-floating-menu-container {
-      display: inherit;
-    }
   }
 }
 
+.jsoneditor-selected-end > .jsoneditor-node-container > div.jsoneditor-floating-menu {
+  display: inherit;
+}
 
 /*******************************  **********************************/
 div.jsoneditor-modes {

test/eson.test.js

@@ -5,7 +5,8 @@ import {
     jsonToEson, esonToJson, toEsonPath, toJsonPath, pathExists, transform, traverse,
     parseJSONPointer, compileJSONPointer,
     expand, addErrors, search, applySearchResults, nextSearchResult, previousSearchResult,
-    applySelection, pathsFromSelection
+    applySelection, pathsFromSelection,
+    SELECTED, SELECTED_END
 } from '../src/eson'
 
 const JSON1 = loadJSON('./resources/json1.json')
@@ -281,9 +282,9 @@ test('selection (object)', t => {
   const actual = applySelection(ESON1, selection)
 
   let expected = ESON1
-  expected = setIn(expected, toEsonPath(ESON1, ['obj']).concat(['selected']), true)
+  expected = setIn(expected, toEsonPath(ESON1, ['obj']).concat(['selected']), SELECTED_END)
-  expected = setIn(expected, toEsonPath(ESON1, ['str']).concat(['selected']), true)
+  expected = setIn(expected, toEsonPath(ESON1, ['str']).concat(['selected']), SELECTED)
-  expected = setIn(expected, toEsonPath(ESON1, ['nill']).concat(['selected']), true)
+  expected = setIn(expected, toEsonPath(ESON1, ['nill']).concat(['selected']), SELECTED)
 
   t.deepEqual(actual, expected)
 })
@@ -296,9 +297,10 @@ test('selection (array)', t => {
 
   const actual = applySelection(ESON1, selection)
 
+  // FIXME: SELECTE_END should be selection.start, not the first
   let expected = ESON1
-  expected = setIn(expected, toEsonPath(ESON1, ['obj', 'arr', '0']).concat(['selected']), true)
+  expected = setIn(expected, toEsonPath(ESON1, ['obj', 'arr', '0']).concat(['selected']), SELECTED_END)
-  expected = setIn(expected, toEsonPath(ESON1, ['obj', 'arr', '1']).concat(['selected']), true)
+  expected = setIn(expected, toEsonPath(ESON1, ['obj', 'arr', '1']).concat(['selected']), SELECTED)
 
   t.deepEqual(actual, expected)
 })
@@ -310,7 +312,7 @@ test('selection (value)', t => {
   }
 
   const actual = applySelection(ESON1, selection)
-  const expected = setIn(ESON1, toEsonPath(ESON1, ['obj', 'arr', '2', 'first']).concat(['selected']), true)
+  const expected = setIn(ESON1, toEsonPath(ESON1, ['obj', 'arr', '2', 'first']).concat(['selected']), SELECTED_END)
   t.deepEqual(actual, expected)
 })
 
@@ -321,7 +323,7 @@ test('selection (node)', t => {
   }
 
   const actual = applySelection(ESON1, selection)
-  const expected = setIn(ESON1, toEsonPath(ESON1, ['obj', 'arr']).concat(['selected']), true)
+  const expected = setIn(ESON1, toEsonPath(ESON1, ['obj', 'arr']).concat(['selected']), SELECTED_END)
   t.deepEqual(actual, expected)
 })