this.onSelect(item.path)}
+ onMouseOver={this.onItemMouseOver(suggestion)}
+ >
+
(
-
+
{children}
)}
- ref={this.storeInputReference}
+ ref={this.storeRef}
/>
);
@@ -158,19 +205,18 @@ class Suggester extends React.Component {
}
Suggester.defaultProps = {
- addClassName: '',
+ extraClassName: '',
onBlur: () => {},
onHighlight: () => {},
- onInitialFocus: () => {},
};
Suggester.propTypes = {
- addClassName: PropTypes.string,
+ extraClassName: PropTypes.string,
index: PropTypes.object,
onAddNode: PropTypes.func.isRequired,
onHighlight: PropTypes.func,
onBlur: PropTypes.func,
- onInitialFocus: PropTypes.func,
+ showHelpbox: PropTypes.func,
};
export default Suggester;
diff --git a/packages/xod-client/src/editor/components/SuggesterContainer.jsx b/packages/xod-client/src/editor/components/SuggesterContainer.jsx
index a4a4e1de..26dbd740 100644
--- a/packages/xod-client/src/editor/components/SuggesterContainer.jsx
+++ b/packages/xod-client/src/editor/components/SuggesterContainer.jsx
@@ -41,13 +41,13 @@ class SuggesterContainer extends React.Component {
const containerHeight = contentWrapper.clientHeight;
const scrollPos = this.scrollRef.state.scrollPos;
- const isOutsideUp = (top - height <= scrollPos);
- const isOutsideDown = (top + height >= (scrollPos + containerHeight) - height);
+ const isOutsideUp = (top < scrollPos);
+ const isOutsideDown = (top + height > (scrollPos + containerHeight));
if (isOutsideDown) {
- return (top + height + height) - containerHeight;
+ return (top + height) - containerHeight;
} else if (isOutsideUp) {
- return top - height;
+ return top;
}
// If it’s inside container do nothing at all
@@ -72,10 +72,12 @@ class SuggesterContainer extends React.Component {
{this.props.children}
@@ -84,9 +86,16 @@ class SuggesterContainer extends React.Component {
}
}
+SuggesterContainer.defaultProps = {
+ onScroll: () => {},
+ onMouseMove: () => {},
+};
+
SuggesterContainer.propTypes = {
containerProps: PropTypes.object,
children: PropTypes.object,
+ onScroll: PropTypes.func,
+ onMouseMove: PropTypes.func,
};
export default SuggesterContainer;
diff --git a/packages/xod-client/src/editor/constants.js b/packages/xod-client/src/editor/constants.js
index 90084492..af64e3fe 100644
--- a/packages/xod-client/src/editor/constants.js
+++ b/packages/xod-client/src/editor/constants.js
@@ -97,5 +97,7 @@ export const SIDEBAR_IDS = {
export const PANEL_CONTEXT_MENU_ID = 'PANEL_CONTEXT_MENU_ID';
// Event name for pub/sub to update position of Helpbox
-// while User scrolls ProjectBrowser or selects another Patch
+// while User:
+// - scrolls ProjectBrowser or selects another Patch by click
+// - highlights (arrows/mouse over) or scrolls Node Suggester
export const UPDATE_HELPBOX_POSITION = 'UPDATE_HELPBOX_POSITION';
diff --git a/packages/xod-client/src/editor/containers/Editor.jsx b/packages/xod-client/src/editor/containers/Editor.jsx
index f1525faa..c2323e67 100644
--- a/packages/xod-client/src/editor/containers/Editor.jsx
+++ b/packages/xod-client/src/editor/containers/Editor.jsx
@@ -48,7 +48,6 @@ class Editor extends React.Component {
this.hideSuggester = this.hideSuggester.bind(this);
this.onWorkareaFocus = this.onWorkareaFocus.bind(this);
- this.onNodeSuggesterFocus = this.onNodeSuggesterFocus.bind(this);
this.onLibSuggesterFocus = this.onLibSuggesterFocus.bind(this);
this.patchSize = this.props.size;
@@ -75,9 +74,6 @@ class Editor extends React.Component {
onWorkareaFocus() {
this.props.actions.setFocusedArea(FOCUS_AREAS.WORKAREA);
}
- onNodeSuggesterFocus() {
- this.props.actions.setFocusedArea(FOCUS_AREAS.NODE_SUGGESTER);
- }
onLibSuggesterFocus() {
this.props.actions.setFocusedArea(FOCUS_AREAS.LIB_SUGGESTER);
}
@@ -169,18 +165,17 @@ class Editor extends React.Component {
const suggester = (this.props.suggesterIsVisible) ? (
) : null;
const libSuggester = (this.props.isLibSuggesterVisible) ? (
({
movePanel: Actions.movePanel,
togglePanelAutohide: Actions.togglePanelAutohide,
hideHelpbox: Actions.hideHelpbox,
+ showHelpbox: Actions.showHelpbox,
}, dispatch),
});
diff --git a/packages/xod-client/src/editor/containers/Helpbox.jsx b/packages/xod-client/src/editor/containers/Helpbox.jsx
index 927099ec..2aaaec09 100644
--- a/packages/xod-client/src/editor/containers/Helpbox.jsx
+++ b/packages/xod-client/src/editor/containers/Helpbox.jsx
@@ -10,14 +10,17 @@ import cn from 'classnames';
import CustomScroll from 'react-custom-scroll';
import * as Actions from '../actions';
-import { isHelpboxVisible } from '../selectors';
+import { isHelpboxVisible, getFocusedArea } from '../selectors';
import { getPatchForHelpbox } from '../../core/selectors';
import PatchDocs from '../components/PatchDocs';
import sanctuaryPropType from '../../utils/sanctuaryPropType';
import CloseButton from '../../core/components/CloseButton';
-import { UPDATE_HELPBOX_POSITION } from '../constants';
-import { triggerUpdateHelpboxPosition } from '../utils';
+import { UPDATE_HELPBOX_POSITION, FOCUS_AREAS } from '../constants';
+import {
+ triggerUpdateHelpboxPositionViaProjectBrowser,
+ triggerUpdateHelpboxPositionViaSuggester,
+} from '../utils';
class Helpbox extends React.Component {
constructor(props) {
@@ -27,13 +30,13 @@ class Helpbox extends React.Component {
this.state = {
isVisible: true,
- top: 50,
+ top: 0,
+ left: 0,
pointerTop: 0,
height: 0,
};
this.updateRef = this.updateRef.bind(this);
- this.updatePosition = this.updatePosition.bind(this);
this.getHelpboxOffset = this.getHelpboxOffset.bind(this);
this.getPointerOffset = this.getPointerOffset.bind(this);
@@ -41,7 +44,7 @@ class Helpbox extends React.Component {
}
componentDidMount() {
window.addEventListener(UPDATE_HELPBOX_POSITION, this.onUpdatePosition);
- triggerUpdateHelpboxPosition();
+ this.triggerUpdatePosition();
}
componentDidUpdate(prevProps, prevState) {
if (prevState.isVisible && !this.state.isVisible) {
@@ -49,7 +52,7 @@ class Helpbox extends React.Component {
return;
}
if (prevState.height !== this.helpboxRef.clientHeight) {
- triggerUpdateHelpboxPosition();
+ this.triggerUpdatePosition();
}
}
componentWillUnmount() {
@@ -59,27 +62,40 @@ class Helpbox extends React.Component {
this.setState({
isVisible: event.detail.isVisible,
});
- this.updatePosition(event.detail.top);
- }
- getHelpboxOffset() {
- return { transform: `translateY(${this.state.top}px)` };
- }
- getPointerOffset() {
- return { transform: `translateY(${this.state.pointerTop}px)` };
- }
- updatePosition(elTop) {
+
+ const top = event.detail.top;
+ // set `right` property to `left` constant, cause
+ // `right` is a position of right side of target element,
+ // so it will be left side of helpbox
+ const left = event.detail.right;
+
const windowHeight = window.innerHeight;
const elHeight = this.helpboxRef.clientHeight;
- const isFitWindow = (elTop + elHeight < windowHeight);
- const newTop = isFitWindow ? elTop : windowHeight - elHeight;
- const newPointer = isFitWindow ? 0 : elTop - newTop;
+ const isFitWindow = (top + elHeight < windowHeight);
+ const newTop = isFitWindow ? top : windowHeight - elHeight;
+ const newPointer = isFitWindow ? 0 : top - newTop;
this.setState({
+ left,
top: newTop,
pointerTop: newPointer,
height: elHeight,
});
}
+ getHelpboxOffset() {
+ return { transform: `translate(${this.state.left}px, ${this.state.top}px)` };
+ }
+ getPointerOffset() {
+ return { transform: `translateY(${this.state.pointerTop}px)` };
+ }
+ triggerUpdatePosition() {
+ if (this.props.focusedArea === FOCUS_AREAS.PROJECT_BROWSER) {
+ triggerUpdateHelpboxPositionViaProjectBrowser();
+ }
+ if (this.props.focusedArea === FOCUS_AREAS.NODE_SUGGESTER) {
+ triggerUpdateHelpboxPositionViaSuggester();
+ }
+ }
updateRef(el) {
this.helpboxRef = el;
}
@@ -89,7 +105,8 @@ class Helpbox extends React.Component {
const isHidden = (
!isVisible ||
Maybe.isNothing(maybeSelectedPatch) ||
- !this.state.isVisible
+ !this.state.isVisible ||
+ this.state.top === 0
);
const docs = maybeSelectedPatch
@@ -108,7 +125,7 @@ class Helpbox extends React.Component {
onClick={actions.hideHelpbox}
/>
-
+
{docs}
@@ -120,6 +137,7 @@ class Helpbox extends React.Component {
Helpbox.propTypes = {
maybeSelectedPatch: sanctuaryPropType($Maybe(PatchType)),
isVisible: PropTypes.bool,
+ focusedArea: PropTypes.oneOf(R.values(FOCUS_AREAS)),
actions: PropTypes.shape({
// eslint-disable-next-line react/no-unused-prop-types
hideHelpbox: PropTypes.func.isRequired,
@@ -129,6 +147,7 @@ Helpbox.propTypes = {
const mapStateToProps = R.applySpec({
isVisible: isHelpboxVisible,
maybeSelectedPatch: getPatchForHelpbox,
+ focusedArea: getFocusedArea,
});
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators({
diff --git a/packages/xod-client/src/editor/reducer.js b/packages/xod-client/src/editor/reducer.js
index e2d338c3..b50e6f1d 100644
--- a/packages/xod-client/src/editor/reducer.js
+++ b/packages/xod-client/src/editor/reducer.js
@@ -569,12 +569,15 @@ const editorReducer = (state = {}, action) => {
if (R.path(['suggester', 'visible'], state) === true) return state;
return R.compose(
+ R.over(R.lensProp('isHelpboxVisible'), R.T),
+ R.assoc('focusedArea', FOCUS_AREAS.NODE_SUGGESTER),
R.assocPath(['suggester', 'visible'], true),
R.assocPath(['suggester', 'placePosition'], action.payload)
)(state);
}
case EAT.HIDE_SUGGESTER:
return R.compose(
+ R.over(R.lensProp('isHelpboxVisible'), R.F),
R.assocPath(['suggester', 'visible'], false),
R.assocPath(['suggester', 'highlightedPatchPath'], null),
R.assocPath(['suggester', 'placePosition'], null)
diff --git a/packages/xod-client/src/editor/utils.js b/packages/xod-client/src/editor/utils.js
index fd4eb7b0..6ced6682 100644
--- a/packages/xod-client/src/editor/utils.js
+++ b/packages/xod-client/src/editor/utils.js
@@ -11,7 +11,11 @@ import {
subtractPoints,
} from '../project/nodeLayout';
-import { SELECTION_ENTITY_TYPE, PANEL_IDS, UPDATE_HELPBOX_POSITION } from './constants';
+import {
+ SELECTION_ENTITY_TYPE,
+ PANEL_IDS,
+ UPDATE_HELPBOX_POSITION,
+} from './constants';
export const getTabByPatchPath = R.curry(
(patchPath, tabs) => R.compose(
@@ -282,36 +286,53 @@ export const getMaximizedPanelsBySidebarId = R.compose(
getPanelsBySidebarId
);
-export const triggerUpdateHelpboxPosition = (event) => {
+const calculateHelpboxPosition = (container, item) => {
+ const scrollTop = container.scrollTop;
+ const height = container.offsetHeight;
+ const viewBottom = scrollTop + height;
+
+ const elHeight = item.offsetHeight;
+ const elTop = item.offsetTop;
+ const elBottom = elHeight + elTop;
+ const elVisible = (
+ (elBottom <= viewBottom) && elTop >= scrollTop
+ );
+ const elBox = item.getClientRects()[0];
+
+ return {
+ isVisible: elVisible,
+ top: Math.ceil(elBox.top),
+ right: Math.ceil(elBox.right),
+ };
+};
+
+export const triggerUpdateHelpboxPositionViaProjectBrowser = (event) => {
const container = document.getElementById('ProjectBrowser').getElementsByClassName('inner-container')[0];
const selectedElement = (event && event.type === 'click')
? event.target.closest('.PatchGroupItem')
: container.getElementsByClassName('isSelected')[0];
if (container && selectedElement) {
- const scrollTop = container.scrollTop;
- const height = container.offsetHeight;
- const viewBottom = scrollTop + height;
-
- const elHeight = selectedElement.offsetHeight;
- const elTop = selectedElement.offsetTop;
- const elBottom = elHeight + elTop;
-
- const elVisible = (
- (elBottom <= viewBottom) && elTop >= scrollTop
- );
-
- const elAbsTop = selectedElement.getClientRects()[0].top;
-
window.dispatchEvent(
new window.CustomEvent(
UPDATE_HELPBOX_POSITION,
- {
- detail: {
- isVisible: elVisible,
- top: elAbsTop,
- },
- }
+ { detail: calculateHelpboxPosition(container, selectedElement) }
+ )
+ );
+ }
+};
+
+export const triggerUpdateHelpboxPositionViaSuggester = () => {
+ const suggester = document.getElementById('Suggester');
+ if (!suggester) return;
+ const container = suggester.getElementsByClassName('inner-container')[0];
+ const item = suggester.getElementsByClassName('is-highlighted')[0];
+
+ if (container && item) {
+ window.dispatchEvent(
+ new window.CustomEvent(
+ UPDATE_HELPBOX_POSITION,
+ { detail: calculateHelpboxPosition(container, item) }
)
);
}
diff --git a/packages/xod-client/src/projectBrowser/containers/ProjectBrowser.jsx b/packages/xod-client/src/projectBrowser/containers/ProjectBrowser.jsx
index 36e2e46f..b1764229 100644
--- a/packages/xod-client/src/projectBrowser/containers/ProjectBrowser.jsx
+++ b/packages/xod-client/src/projectBrowser/containers/ProjectBrowser.jsx
@@ -37,7 +37,7 @@ import PatchGroupItemContextMenu from '../components/PatchGroupItemContextMenu';
import { PATCH_GROUP_CONTEXT_MENU_ID } from '../constants';
import { PANEL_IDS, SIDEBAR_IDS } from '../../editor/constants';
-import { triggerUpdateHelpboxPosition } from '../../editor/utils';
+import { triggerUpdateHelpboxPositionViaProjectBrowser } from '../../editor/utils';
const pickPatchPartsForComparsion = R.map(R.pick(['dead', 'path']));
@@ -187,7 +187,7 @@ class ProjectBrowser extends React.Component {
onBeginDrag={startDraggingPatch}
isSelected={path === selectedPatchPath}
onClick={(event) => {
- triggerUpdateHelpboxPosition(event);
+ triggerUpdateHelpboxPositionViaProjectBrowser(event);
setSelection(path);
}}
collectPropsFn={collectPropsFn}
@@ -308,7 +308,7 @@ class ProjectBrowser extends React.Component {
sidebarId={this.props.sidebarId}
autohide={this.props.autohide}
additionalButtons={this.renderToolbarButtons()}
- onScroll={triggerUpdateHelpboxPosition}
+ onScroll={triggerUpdateHelpboxPositionViaProjectBrowser}
>
{this.renderPatches()}