From 5846222fe16ef1b0137b8a550e3058fb81760101 Mon Sep 17 00:00:00 2001 From: Simon Howe Date: Tue, 9 Aug 2016 14:57:13 +0200 Subject: [PATCH 1/5] Scale node labels with the node's size. - Within certain bounds. Still have min-label size, mainly effects nodes that get really big. - Set a max size on nodes too, really big ones lose their border. --- client/app/scripts/charts/node.js | 11 ++++++++++- client/app/scripts/charts/nodes-chart.js | 4 ++-- client/app/scripts/constants/styles.js | 8 ++++++++ client/app/styles/main.less | 7 +++---- 4 files changed, 23 insertions(+), 7 deletions(-) diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js index 4b243e8dd0..23ec46573e 100644 --- a/client/app/scripts/charts/node.js +++ b/client/app/scripts/charts/node.js @@ -16,6 +16,12 @@ import NodeShapeHex from './node-shape-hex'; import NodeShapeHeptagon from './node-shape-heptagon'; import NodeShapeCloud from './node-shape-cloud'; import NodeNetworksOverlay from './node-networks-overlay'; +import { MIN_NODE_LABEL_SIZE, BASE_NODE_LABEL_SIZE, BASE_NODE_SIZE } from '../constants/styles'; + + +function labelFontSize(nodeSize) { + return Math.max(MIN_NODE_LABEL_SIZE, (BASE_NODE_LABEL_SIZE / BASE_NODE_SIZE) * nodeSize); +} function stackedShape(Shape) { const factory = React.createFactory(NodeShapeStack); @@ -104,6 +110,7 @@ class Node extends React.Component { const NodeShapeType = getNodeShape(this.props); const useSvgLabels = exportingGraph; const size = nodeScale(scaleFactor); + const fontSize = labelFontSize(size); const networkOffset = focused ? nodeScale(scaleFactor * 0.67) : nodeScale(0.67); const mouseEvents = { onClick: this.handleMouseClick, @@ -120,7 +127,9 @@ class Node extends React.Component { -
+
diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js index 19f9491907..2a13d35eb2 100644 --- a/client/app/scripts/charts/nodes-chart.js +++ b/client/app/scripts/charts/nodes-chart.js @@ -8,7 +8,7 @@ import timely from 'timely'; import { clickBackground } from '../actions/app-actions'; import { EDGE_ID_SEPARATOR } from '../constants/naming'; -import { DETAILS_PANEL_WIDTH } from '../constants/styles'; +import { DETAILS_PANEL_WIDTH, MAX_NODE_SIZE } from '../constants/styles'; import Logo from '../components/logo'; import { doLayout } from './nodes-layout'; import NodesChartElements from './nodes-chart-elements'; @@ -370,7 +370,7 @@ class NodesChart extends React.Component { getNodeScale(nodes, width, height) { const expanse = Math.min(height, width); const nodeSize = expanse / 3; // single node should fill a third of the screen - const maxNodeSize = expanse / 10; + const maxNodeSize = Math.min(MAX_NODE_SIZE, expanse / 10); const normalizedNodeSize = Math.min(nodeSize / Math.sqrt(nodes.size), maxNodeSize); return this.state.nodeScale.copy().range([0, normalizedNodeSize]); } diff --git a/client/app/scripts/constants/styles.js b/client/app/scripts/constants/styles.js index c6f6d1c71b..290cc0043a 100644 --- a/client/app/scripts/constants/styles.js +++ b/client/app/scripts/constants/styles.js @@ -17,3 +17,11 @@ export const CANVAS_MARGINS = { right: 40, bottom: 100, }; + +// +// The base size the shapes were defined at matches nicely w/ a 14px font. +// +export const BASE_NODE_SIZE = 64; +export const MAX_NODE_SIZE = 96; +export const BASE_NODE_LABEL_SIZE = 14; +export const MIN_NODE_LABEL_SIZE = BASE_NODE_LABEL_SIZE; diff --git a/client/app/styles/main.less b/client/app/styles/main.less index cab55b3117..15c8fd8d0f 100644 --- a/client/app/styles/main.less +++ b/client/app/styles/main.less @@ -368,7 +368,6 @@ h2 { .node-label { color: @text-color; - font-size: 14px; } .node-label-wrapper { @@ -390,7 +389,7 @@ h2 { .node-sublabel { color: @text-secondary-color; - font-size: 12px; + font-size: 0.85em; } &.hovered { @@ -547,7 +546,7 @@ h2 { text-align: center; &-match { - font-size: 0.7rem; + font-size: 0.8rem; &-wrapper { display: inline-block; @@ -564,7 +563,7 @@ h2 { &-more { text-transform: uppercase; - font-size: 0.6rem; + font-size: 0.7rem; color: darken(@weave-blue, 10%); margin-top: -2px; } From 564c64ec211e605b3d58cc68c384903652576faf Mon Sep 17 00:00:00 2001 From: Simon Howe Date: Tue, 9 Aug 2016 16:07:25 +0200 Subject: [PATCH 2/5] Fixes truncating of labels --- client/app/scripts/charts/node.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js index 23ec46573e..29e08e6142 100644 --- a/client/app/scripts/charts/node.js +++ b/client/app/scripts/charts/node.js @@ -128,7 +128,7 @@ class Node extends React.Component {
From 8f4b3ab97dda41457f1939682287d58ec34c2c73 Mon Sep 17 00:00:00 2001 From: Simon Howe Date: Tue, 9 Aug 2016 20:00:39 +0200 Subject: [PATCH 3/5] Fixes animation of node labels on focus. Was a bit janky there for a bit. --- client/app/scripts/charts/node.js | 11 +++++------ client/app/styles/main.less | 6 ++++-- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js index 29e08e6142..146c876fb1 100644 --- a/client/app/scripts/charts/node.js +++ b/client/app/scripts/charts/node.js @@ -83,18 +83,18 @@ class Node extends React.Component { render() { const { blurred, focused, highlighted, label, matches = makeMap(), networks, - pseudo, rank, subLabel, scaleFactor, transform, zoomScale, exportingGraph, + pseudo, rank, subLabel, scaleFactor, transform, exportingGraph, showingNetworks, stack } = this.props; const { hovered, matched } = this.state; const nodeScale = focused ? this.props.selectedNodeScale : this.props.nodeScale; const color = getNodeColor(rank, label, pseudo); const truncate = !focused && !hovered; - const labelTransform = focused ? `scale(${1 / zoomScale})` : ''; const labelWidth = nodeScale(scaleFactor * 3); const labelOffsetX = -labelWidth / 2; const labelDy = (showingNetworks && networks) ? 0.75 : 0.60; - const labelOffsetY = focused ? nodeScale(labelDy) : nodeScale(labelDy * scaleFactor); + const labelOffsetY = nodeScale(labelDy * scaleFactor); + const networkOffset = nodeScale(scaleFactor * 0.67); const nodeClassName = classnames('node', { highlighted, @@ -111,7 +111,6 @@ class Node extends React.Component { const useSvgLabels = exportingGraph; const size = nodeScale(scaleFactor); const fontSize = labelFontSize(size); - const networkOffset = focused ? nodeScale(scaleFactor * 0.67) : nodeScale(0.67); const mouseEvents = { onClick: this.handleMouseClick, onMouseEnter: this.handleMouseEnter, @@ -126,9 +125,9 @@ class Node extends React.Component { svgLabels(label, subLabel, labelClassName, subLabelClassName, labelOffsetY) : + width={labelWidth} height="100em">
diff --git a/client/app/styles/main.less b/client/app/styles/main.less index 15c8fd8d0f..2dfdd7448b 100644 --- a/client/app/styles/main.less +++ b/client/app/styles/main.less @@ -546,7 +546,7 @@ h2 { text-align: center; &-match { - font-size: 0.8rem; + font-size: 0.8em; &-wrapper { display: inline-block; @@ -563,7 +563,7 @@ h2 { &-more { text-transform: uppercase; - font-size: 0.7rem; + font-size: 0.7em; color: darken(@weave-blue, 10%); margin-top: -2px; } @@ -1161,6 +1161,7 @@ h2 { } &-wrapper { + pointer-events: all; border-radius: @border-radius; border: 1px solid @background-darker-color; display: inline-block; @@ -1274,6 +1275,7 @@ h2 { font-size: .7rem; border-radius: 8px; border: 1px solid transparent; + pointer-events: none; } .sidebar-gridmode { From 4d5d0d5dc2ef2eff435759b732d14ec6861e39d5 Mon Sep 17 00:00:00 2001 From: Simon Howe Date: Tue, 9 Aug 2016 20:16:23 +0200 Subject: [PATCH 4/5] Fixes origin of node-details-panel expanding animation --- client/app/scripts/charts/node.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js index 146c876fb1..aa7e4cf392 100644 --- a/client/app/scripts/charts/node.js +++ b/client/app/scripts/charts/node.js @@ -62,6 +62,7 @@ class Node extends React.Component { this.handleMouseClick = this.handleMouseClick.bind(this); this.handleMouseEnter = this.handleMouseEnter.bind(this); this.handleMouseLeave = this.handleMouseLeave.bind(this); + this.saveShapeRef = this.saveShapeRef.bind(this); this.state = { hovered: false, matched: false @@ -139,7 +140,7 @@ class Node extends React.Component {
} - + Date: Wed, 10 Aug 2016 14:10:10 +0200 Subject: [PATCH 5/5] Move chrome-css-fix out of js into css w/ comment --- client/app/scripts/charts/node.js | 2 +- client/app/styles/main.less | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js index aa7e4cf392..6d969b37df 100644 --- a/client/app/scripts/charts/node.js +++ b/client/app/scripts/charts/node.js @@ -128,7 +128,7 @@ class Node extends React.Component {
diff --git a/client/app/styles/main.less b/client/app/styles/main.less index 2dfdd7448b..c03e953b7b 100644 --- a/client/app/styles/main.less +++ b/client/app/styles/main.less @@ -371,6 +371,12 @@ h2 { } .node-label-wrapper { + + // + // Base line height doesn't hop across foreignObject =/ + // + line-height: 150%; + // // inline-block so wrapper is only as wide as content. //