Skip to content

Commit

Permalink
Excise react-svg-pan-zoom
Browse files Browse the repository at this point in the history
  • Loading branch information
@trvrb
trvrb committed May 8, 2018
1 parent 21e6117 commit 56fbb8a
Show file tree
Hide file tree
Showing 5 changed files with 23 additions and 138 deletions.
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,6 @@
"react-markdown": "^2.5.0",
"react-redux": "^5.0.6",
"react-select": "^1.0.0-rc.5",
"react-svg-pan-zoom": "^2.16.1",
"react-tap-event-plugin": "^3.0.2",
"react-tweet-embed": "^1.1.0",
"redux": "^3.7.2",
Expand Down
34 changes: 10 additions & 24 deletions src/components/tree/infoPanels/hover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,21 +186,7 @@ const getBranchDescendents = (n) => {
return <span>{infoLineJSX("Number of descendants:", n.fullTipCount)}<p/></span>;
};

/**
* This maps tree coordinates to coordinates on the svg.
* @param {float} x x
* @param {float} y y
* @param {reactSVGpanZoom} V viewer state
* @return {[x,y]} point on plane
*/
const treePosToViewer = (x, y, V) => {
// const dx = (x * V.a + V.e); // this is the distance form the upper left corner
// const dy = (y * V.d + V.f); // at the current zoom level
return {x: x + V.e, y: y + V.f};
};

const getPanelStyling = (d, viewer, panelDims) => {
const viewerState = viewer.getValue();
const getPanelStyling = (d, panelDims) => {
const xOffset = 10;
const yOffset = 10;
const width = 200;
Expand All @@ -209,7 +195,7 @@ const getPanelStyling = (d, viewer, panelDims) => {
const xPos = d.that.params.orientation[0] === -1 ?
panelDims.width / 2 + panelDims.spaceBetweenTrees + d.xTip :
d.xTip;
const pos = treePosToViewer(xPos, d.yTip, viewerState);
const yPos = d.yTip;
const styles = {
container: {
position: "absolute",
Expand All @@ -228,15 +214,15 @@ const getPanelStyling = (d, viewer, panelDims) => {
wordBreak: "break-word"
}
};
if (pos.x < panelDims.width * 0.6) {
styles.container.left = pos.x + xOffset;
if (xPos < panelDims.width * 0.6) {
styles.container.left = xPos + xOffset;
} else {
styles.container.right = panelDims.width - pos.x + xOffset;
styles.container.right = panelDims.width - xPos + xOffset;
}
if (pos.y < panelDims.height * 0.55) {
styles.container.top = pos.y + 4 * yOffset;
if (yPos < panelDims.height * 0.55) {
styles.container.top = yPos + 4 * yOffset;
} else {
styles.container.bottom = panelDims.height - pos.y + yOffset;
styles.container.bottom = panelDims.height - yPos + yOffset;
}
return styles;
};
Expand Down Expand Up @@ -270,13 +256,13 @@ const displayVaccineInfo = (d) => {

/* the actual component - a pure function, so we can return early if needed */
const HoverInfoPanel = ({mutType, temporalConfidence, distanceMeasure,
hovered, viewer, colorBy, colorByConfidence, colorScale, panelDims}) => {
hovered, colorBy, colorByConfidence, colorScale, panelDims}) => {

if (!hovered) return null;

const tip = hovered.type === ".tip";
const d = hovered.d;
const styles = getPanelStyling(d, viewer, panelDims);
const styles = getPanelStyling(d, panelDims);
let inner;
if (tip) {
inner = (
Expand Down
75 changes: 0 additions & 75 deletions src/components/tree/reactD3Interface/callbacks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,81 +108,6 @@ export const clearSelectedTip = function clearSelectedTip(d) {
));
};


const visibleArea = function visibleArea(Viewer) {
const V = Viewer.getValue();
return {
left: -V.e / V.a,
top: -V.f / V.d,
right: (V.viewerWidth - V.e) / V.a,
bottom: (V.viewerHeight - V.f) / V.d
};
};

const resetGrid = function resetGrid() {
const layout = this.props.layout;
if (this.props.layout !== "unrooted") {
const tree = this.state.tree;
// const visibleArea = .visibleArea;
const viewer = this.Viewer;
window.setTimeout(() => {
const view = visibleArea(viewer);
tree.addGrid(layout, view.bottom, view.top);
}, 200);
}
};

export const onViewerChange = function onViewerChange() {
if (this.Viewer && this.ViewerToo) {
/* effectively disable pan when 2 trees are displayed.
You can't do this in the svg-pan-zoom settings
as there seems to be a bug whereby the onBranchClick behaviour dissapears */
if (this.Viewer.getValue().mode === "panning" || this.ViewerToo.getValue().mode === "panning") {
if (this.resetViewersAfterPanTimeoutRef) {
clearTimeout(this.resetViewersAfterPanTimeoutRef);
}
this.resetViewersAfterPanTimeoutRef = setTimeout(() => {
this.Viewer.fitToViewer();
this.ViewerToo.fitToViewer();
this.resetViewersAfterPanTimeoutRef = undefined;
}, 300);
}
return;
}
if (this.Viewer && this.state.tree) {
const V = this.Viewer.getValue();
if (V.mode === "panning") {
resetGrid.bind(this)();
} else if (V.mode === "idle") {
resetGrid.bind(this);
}
}
};

export const resetView = function resetView() {
this.Viewer.fitToViewer();
};

// export const handleIconClickHOF = function handleIconClickHOF(tool) {
// return () => {
// const V = this.Viewer.getValue();
// if (tool === "zoom-in") {
// this.Viewer.zoomOnViewerCenter(1.4);
// } else if (V.a > 1.0) { // if there is room to zoom out via the SVGPanZoom, do
// this.Viewer.zoomOnViewerCenter(0.71);
// } else { // otherwise reset view to have SVG fit the viewer
// resetView.bind(this)();
// // if we have clade zoom, zoom out to the parent clade
// if (this.state.selectedBranch && this.state.selectedBranch.n.arrayIdx) {
// this.props.dispatch(updateVisibleTipsAndBranchThicknesses({
// idxOfInViewRootNode: this.state.tree.zoomNode.parent.n.arrayIdx
// }));
// }
// }
// resetGrid.bind(this)();
// };
// };

/**
* @param {node} d tree node object
* @param {int} n total number of nodes in current view
Expand Down
3 changes: 1 addition & 2 deletions src/components/tree/reactD3Interface/change.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { rgb } from "d3-color";
import { calcBranchStrokeCols } from "../../../util/colorHelpers";

export const changePhyloTreeViaPropsComparison = (mainTree, phylotree, viewer, oldProps, newProps) => {
export const changePhyloTreeViaPropsComparison = (mainTree, phylotree, oldProps, newProps) => {
const args = {};
const newState = {};
/* do not use oldProps.tree or newTreeRedux */
Expand Down Expand Up @@ -70,7 +70,6 @@ export const changePhyloTreeViaPropsComparison = (mainTree, phylotree, viewer, o
if (oldTreeRedux.idxOfInViewRootNode !== newTreeRedux.idxOfInViewRootNode) {
const rootNode = phylotree.nodes[newTreeRedux.idxOfInViewRootNode];
args.zoomIntoClade = rootNode;
viewer.fitToViewer();
newState.selectedBranch = newTreeRedux.idxOfInViewRootNode === 0 ? null : rootNode;
newState.selectedTip = null;
newState.hovered = null;
Expand Down
48 changes: 12 additions & 36 deletions src/components/tree/tree.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from "react";
import { ReactSVGPanZoom } from "react-svg-pan-zoom";
import { updateVisibleTipsAndBranchThicknesses } from "../../actions/tree";
import Card from "../framework/card";
import Legend from "./legend/legend";
Expand All @@ -16,7 +15,6 @@ class Tree extends React.Component {
constructor(props) {
super(props);
this.tangleRef = undefined;
this.Viewer = null;
this.state = {
hover: null,
selectedBranch: null,
Expand All @@ -26,8 +24,6 @@ class Tree extends React.Component {
};
/* bind callbacks */
this.clearSelectedTip = callbacks.clearSelectedTip.bind(this);
this.resetView = callbacks.resetView.bind(this);
this.onViewerChange = callbacks.onViewerChange.bind(this);
// this.handleIconClickHOF = callbacks.handleIconClickHOF.bind(this);
this.redrawTree = () => {
this.props.dispatch(updateVisibleTipsAndBranchThicknesses({
Expand All @@ -39,12 +35,10 @@ class Tree extends React.Component {
if (this.props.tree.loaded) {
const tree = new PhyloTree(this.props.tree.nodes, "LEFT");
renderTree(this, true, tree, this.props);
this.Viewer.fitToViewer();
const newState = {tree};
if (this.props.showTreeToo) {
const treeToo = new PhyloTree(this.props.treeToo.nodes, "RIGHT");
renderTree(this, false, treeToo, this.props);
this.ViewerToo.fitToViewer();
newState.treeToo = treeToo;
}
this.setState(newState);
Expand All @@ -57,7 +51,7 @@ class Tree extends React.Component {
let _; // eslint-disable-line

if (this.state.tree) {
[newState, leftTreeUpdated] = changePhyloTreeViaPropsComparison(true, this.state.tree, this.Viewer, prevProps, this.props);
[newState, leftTreeUpdated] = changePhyloTreeViaPropsComparison(true, this.state.tree, prevProps, this.props);
if (prevProps.showTreeToo !== this.props.showTreeToo) {
this.state.tree.change({svgHasChangedDimensions: true});
if (this.props.showTreeToo) {
Expand All @@ -66,7 +60,6 @@ class Tree extends React.Component {
}
const treeToo = new PhyloTree(this.props.treeToo.nodes, "RIGHT");
renderTree(this, false, treeToo, this.props);
this.resetView(); // reset the position of the left tree
if (this.tangleRef) this.tangleRef.drawLines();
this.setState({treeToo});
} else {
Expand All @@ -80,11 +73,10 @@ class Tree extends React.Component {
if (!prevProps.showTreeToo && this.props.showTreeToo) {
newState.treeToo = new PhyloTree(this.props.treeToo.nodes, "RIGHT");
renderTree(this, false, newState.treeToo, this.props);
this.ViewerToo.fitToViewer();
} else if (!this.props.showTreeToo) {
newState.treeToo = null;
} else {
[_, rightTreeUpdated] = changePhyloTreeViaPropsComparison(false, this.state.treeToo, this.ViewerToo, prevProps, this.props);
[_, rightTreeUpdated] = changePhyloTreeViaPropsComparison(false, this.state.treeToo, prevProps, this.props);
}
}
/* we may need to (imperitively) tell the tangle to redraw */
Expand All @@ -93,35 +85,20 @@ class Tree extends React.Component {
}
if (newState) this.setState(newState);
}
renderTreeDiv({width, height, d3ref, viewerRef}) {
renderTreeDiv({width, height, d3ref}) {
return (
<ReactSVGPanZoom
<svg style={{pointerEvents: "auto"}}
width={width}
height={height}
ref={(Viewer) => {this[viewerRef] = Viewer;}}
style={{cursor: "default"}}
tool={"pan"}
detectWheel={false}
toolbarPosition={"none"}
detectAutoPan={false}
background={"#FFF"}
miniaturePosition={"none"}
onDoubleClick={this.resetView}
onChangeValue={this.onViewerChange}
>
<svg style={{pointerEvents: "auto"}}
<g
id={"d3TreeElement"}
width={width}
height={height}
>
<g
id={"d3TreeElement"}
width={width}
height={height}
style={{cursor: "default"}}
ref={(c) => {this[d3ref] = c;}}
/>
</svg>
</ReactSVGPanZoom>
style={{cursor: "default"}}
ref={(c) => {this[d3ref] = c;}}
/>
</svg>
);
}

Expand All @@ -136,7 +113,6 @@ class Tree extends React.Component {
temporalConfidence={this.props.temporalConfidence.display}
distanceMeasure={this.props.distanceMeasure}
hovered={this.state.hovered}
viewer={this.Viewer}
colorBy={this.props.colorBy}
colorByConfidence={this.props.colorByConfidence}
colorScale={this.props.colorScale}
Expand All @@ -162,10 +138,10 @@ class Tree extends React.Component {
spaceBetweenTrees={spaceBetweenTrees}
/>
) : null }
{this.renderTreeDiv({width: widthPerTree, height: this.props.height, d3ref: "d3ref", viewerRef: "Viewer"})}
{this.renderTreeDiv({width: widthPerTree, height: this.props.height, d3ref: "d3ref"})}
{this.props.showTreeToo ? <div style={{width: spaceBetweenTrees}}/> : null}
{this.props.showTreeToo ?
this.renderTreeDiv({width: widthPerTree, height: this.props.height, d3ref: "d3refToo", viewerRef: "ViewerToo"}) :
this.renderTreeDiv({width: widthPerTree, height: this.props.height, d3ref: "d3refToo"}) :
null
}
<button
Expand Down

0 comments on commit 56fbb8a

Please sign in to comment.