diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js index 914bffa33..adb804830 100644 --- a/client/app/scripts/charts/nodes-chart.js +++ b/client/app/scripts/charts/nodes-chart.js @@ -5,6 +5,7 @@ import React from 'react'; import { Map as makeMap } from 'immutable'; import timely from 'timely'; +import { DETAILS_PANEL_WIDTH } from '../constants/styles'; import { clickBackground } from '../actions/app-actions'; import AppStore from '../stores/app-store'; import Edge from './edge'; @@ -302,9 +303,8 @@ export default class NodesChart extends React.Component { // move origin node to center of viewport const zoomScale = state.scale; - const detailsWidth = 420; const translate = state.panTranslate; - const centerX = (-translate[0] + (props.width + MARGINS.left - detailsWidth) / 2) / zoomScale; + const centerX = (-translate[0] + (props.width + MARGINS.left - DETAILS_PANEL_WIDTH) / 2) / zoomScale; const centerY = (-translate[1] + (props.height + MARGINS.top) / 2) / zoomScale; stateNodes = stateNodes.mergeIn([props.selectedNodeId], { x: centerX, diff --git a/client/app/scripts/components/details-card.js b/client/app/scripts/components/details-card.js index 256311213..b1f8694a0 100644 --- a/client/app/scripts/components/details-card.js +++ b/client/app/scripts/components/details-card.js @@ -1,13 +1,8 @@ import React from 'react'; import NodeDetails from './node-details'; - -// card dimensions in px -const marginTop = 24; -const marginBottom = 48; -const marginRight = 36; -const panelWidth = 420; -const offset = 8; +import { DETAILS_PANEL_WIDTH as WIDTH, DETAILS_PANEL_OFFSET as OFFSET, + DETAILS_PANEL_MARGINS as MARGINS } from '../constants/styles'; export default class DetailsCard extends React.Component { @@ -27,21 +22,21 @@ export default class DetailsCard extends React.Component { render() { let transform; const origin = this.props.origin; - const panelHeight = window.innerHeight - marginBottom - marginTop; + const panelHeight = window.innerHeight - MARGINS.bottom - MARGINS.top; if (origin && !this.state.mounted) { // render small panel near origin, will transition into normal panel after being mounted - const scaleY = origin.height / (window.innerHeight - marginBottom - marginTop) / 2; - const scaleX = origin.width / panelWidth / 2; - const centerX = window.innerWidth - marginRight - (panelWidth / 2); - const centerY = (panelHeight) / 2 + marginTop; + const scaleY = origin.height / (window.innerHeight - MARGINS.bottom - MARGINS.top) / 2; + const scaleX = origin.width / WIDTH / 2; + const centerX = window.innerWidth - MARGINS.right - (WIDTH / 2); + const centerY = (panelHeight) / 2 + MARGINS.top; const dx = (origin.left + origin.width / 2) - centerX; const dy = (origin.top + origin.height / 2) - centerY; transform = `translate(${dx}px, ${dy}px) scale(${scaleX},${scaleY})`; } else { // stack effect: shift top cards to the left, shrink lower cards vertically - const shiftX = -1 * this.props.index * offset; + const shiftX = -1 * this.props.index * OFFSET; const position = this.props.cardCount - this.props.index - 1; // reverse index - const scaleY = position === 0 ? 1 : (panelHeight - 2 * offset * position) / panelHeight; + const scaleY = position === 0 ? 1 : (panelHeight - 2 * OFFSET * position) / panelHeight; if (scaleY !== 1) { transform = `translateX(${shiftX}px) scaleY(${scaleY})`; } else { diff --git a/client/app/scripts/components/embedded-terminal.js b/client/app/scripts/components/embedded-terminal.js index bd7436bf1..e56094ba0 100644 --- a/client/app/scripts/components/embedded-terminal.js +++ b/client/app/scripts/components/embedded-terminal.js @@ -2,6 +2,7 @@ import React from 'react'; import { getNodeColor, getNodeColorDark } from '../utils/color-utils'; import Terminal from './terminal'; +import { DETAILS_PANEL_WIDTH, DETAILS_PANEL_MARGINS, DETAILS_PANEL_OFFSET } from '../constants/styles'; export default function EmeddedTerminal({pipe, nodeId, details}) { const node = details.get(nodeId); @@ -10,12 +11,17 @@ export default function EmeddedTerminal({pipe, nodeId, details}) { const statusBarColor = d && getNodeColor(d.rank, d.label_major); const title = d && d.label_major; + const style = { + right: DETAILS_PANEL_MARGINS.right + DETAILS_PANEL_WIDTH + 10 + + (details.size * DETAILS_PANEL_OFFSET) + }; + // React unmount/remounts when key changes, this is important for cleaning up // the term.js and creating a new one for the new pipe. return ( -
+
+ statusBarColor={statusBarColor} containerMargin={style.right} title={title} />
); } diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js index d87ff6774..e291ca5ec 100644 --- a/client/app/scripts/components/terminal.js +++ b/client/app/scripts/components/terminal.js @@ -52,16 +52,16 @@ function terminalCellSize(wrapperNode, rows, cols) { return {pixelPerCol, pixelPerRow}; } -function openNewWindow(url, minWidth = 200) { +function openNewWindow(url, bcr, minWidth = 200) { const screenLeft = window.screenX || window.screenLeft; const screenTop = window.screenY || window.screenTop; const popoutWindowToolbarHeight = 51; // TODO replace this stuff w/ looking up bounding box. const windowOptions = { - width: Math.max(minWidth, window.innerWidth - 420 - 36 - 36 - 10), - height: window.innerHeight - 24 - 48 - popoutWindowToolbarHeight, - left: screenLeft + 36, - top: screenTop + (window.outerHeight - window.innerHeight) + 24, + width: Math.max(minWidth, bcr.width), + height: bcr.height - popoutWindowToolbarHeight, + left: screenLeft + bcr.left, + top: screenTop + (window.outerHeight - window.innerHeight) + bcr.top, location: 'no', }; @@ -184,6 +184,14 @@ export default class Terminal extends React.Component { } } + componentWillReceiveProps(nextProps) { + const containerMarginChanged = nextProps.containerMargin !== this.props.containerMargin; + log(nextProps.containerMargin); + if (containerMarginChanged) { + this.handleResize(); + } + } + componentDidUpdate(prevProps, prevState) { const sizeChanged = ( prevState.cols !== this.state.cols || @@ -211,8 +219,9 @@ export default class Terminal extends React.Component { const paramString = JSON.stringify(this.props); clickCloseTerminal(this.getPipeId()); + const bcr = ReactDOM.findDOMNode(this).getBoundingClientRect(); const minWidth = this.state.pixelPerCol * 80 + (8 * 2); - openNewWindow(`terminal.html#!/state/${paramString}`, minWidth); + openNewWindow(`terminal.html#!/state/${paramString}`, bcr, minWidth); } handleResize() { diff --git a/client/app/scripts/constants/styles.js b/client/app/scripts/constants/styles.js new file mode 100644 index 000000000..44d3afc85 --- /dev/null +++ b/client/app/scripts/constants/styles.js @@ -0,0 +1,10 @@ + +export const DETAILS_PANEL_WIDTH = 420; + +export const DETAILS_PANEL_MARGINS = { + top: 24, + bottom: 48, + right: 36 +}; + +export const DETAILS_PANEL_OFFSET = 8; diff --git a/client/app/scripts/stores/app-store.js b/client/app/scripts/stores/app-store.js index f5428168a..58c261b66 100644 --- a/client/app/scripts/stores/app-store.js +++ b/client/app/scripts/stores/app-store.js @@ -110,7 +110,7 @@ function closeNodeDetails(nodeId) { const popNodeId = nodeId || nodeDetails.keySeq().last(); // remove pipe if it belongs to the node being closed controlPipes = controlPipes.filter(pipe => { - return pipe.nodeId !== popNodeId; + return pipe.get('nodeId') !== popNodeId; }); nodeDetails = nodeDetails.delete(popNodeId); } @@ -240,7 +240,7 @@ export class AppStore extends Store { } getTopCardNodeId() { - return nodeDetails.last().id; + return nodeDetails.last() && nodeDetails.last().id; } getNodes() { @@ -362,6 +362,7 @@ export class AppStore extends Store { case ActionTypes.CLICK_SHOW_TOPOLOGY_FOR_NODE: nodeDetails = nodeDetails.filter((v, k) => k === payload.nodeId); + controlPipes = controlPipes.clear(); selectedNodeId = payload.nodeId; if (payload.topologyId !== currentTopologyId) { setTopology(payload.topologyId);