diff --git a/src/components/Node.js b/src/components/Node.js
index 61ca5eb..93401fc 100644
--- a/src/components/Node.js
+++ b/src/components/Node.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
import memoize from 'memoize-one';
import _ from 'underscore';
import { traceNodePathAndRun } from './parsing-functions';
+import { roundScaled } from '../utilities';
/** @todo separate methods out into functional components */
@@ -72,7 +73,7 @@ export class DefaultNodeElement extends React.PureComponent {
render(){
const { node, title, columnWidth } = this.props;
const style = node.nodeType === 'input' || node.nodeType === 'output' ?
- { width : (columnWidth || 100) }
+ { width : columnWidth || 100 }
: null;
return (
1 && lastActiveContextNode === node))
@@ -215,21 +219,21 @@ export default class Node extends React.Component {
return false;
}
- render(){
- var { node, isNodeDisabled, className, columnWidth, renderNodeElement, selectedNode, forwardedRef } = this.props,
- disabled = typeof node.disabled !== 'undefined' ? node.disabled : this.isDisabled(node, isNodeDisabled),
- isCurrentContext = typeof node.isCurrentContext !== 'undefined' ? node.isCurrentContext : null,
- classNameList = ["node", "node-type-" + node.nodeType],
- selected = (!disabled && Node.isSelected(node, selectedNode)) || false,
- related = (!disabled && this.isRelated(node, selectedNode)) || false,
- inSelectionPath = selected || (!disabled && this.isInSelectionPath(node, selectedNode)) || false;
-
- if (disabled) classNameList.push('disabled');
- if (isCurrentContext) classNameList.push('current-context');
- if (typeof className === 'function') classNameList.push(className(node));
- else if (typeof className === 'string' ) classNameList.push(className);
-
- var visibleNodeProps = _.extend(
+ render() {
+ const { node, isNodeDisabled, className, columnWidth, renderNodeElement, selectedNode, forwardedRef, scale = 1 } = this.props;
+ const disabled = typeof node.disabled !== 'undefined' ? node.disabled : this.isDisabled(node, isNodeDisabled);
+ const isCurrentContext = typeof node.isCurrentContext !== 'undefined' ? node.isCurrentContext : null;
+ const classNameList = ["node", "node-type-" + node.nodeType];
+ const selected = (!disabled && Node.isSelected(node, selectedNode)) || false;
+ const related = (!disabled && this.isRelated(node, selectedNode)) || false;
+ const inSelectionPath = selected || (!disabled && this.isInSelectionPath(node, selectedNode)) || false;
+
+ if (disabled) classNameList.push('disabled');
+ if (isCurrentContext) classNameList.push('current-context');
+ if (typeof className === 'function') classNameList.push(className(node));
+ else if (typeof className === 'string') classNameList.push(className);
+
+ const visibleNodeProps = _.extend(
_.omit(this.props, 'children', 'onMouseEnter', 'onMouseLeave', 'onClick', 'className', 'nodeElement'),
{ disabled, selected, related, isCurrentContext, inSelectionPath }
);
@@ -240,10 +244,11 @@ export default class Node extends React.Component {
data-node-selected={selected} data-node-in-selection-path={inSelectionPath}
data-node-related={related} data-node-type-detail={node.ioType && node.ioType.toLowerCase()}
data-node-column={node.column} style={{
- 'top' : node.y,
- 'left' : node.x,
- 'width' : columnWidth || 100,
- 'zIndex' : 2 + (node.indexInColumn || 0)
+ top: node.y,
+ left: node.x + ((scale - 1) * columnWidth) / 2,
+ width: columnWidth || 100,
+ zIndex: 2 + (node.indexInColumn || 0),
+ transform: `scale(${scale})`
}} ref={forwardedRef}>
diff --git a/src/components/NodesLayer.js b/src/components/NodesLayer.js
index e8cae9d..e8514d0 100644
--- a/src/components/NodesLayer.js
+++ b/src/components/NodesLayer.js
@@ -6,6 +6,7 @@ import memoize from 'memoize-one';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import Node from './Node';
+import { roundScaled } from '../utilities';
export default class NodesLayer extends React.PureComponent {
@@ -73,9 +74,17 @@ export default class NodesLayer extends React.PureComponent {
}
render(){
- var { innerMargin, innerWidth, outerHeight, contentWidth } = this.props,
- fullWidth = innerWidth + innerMargin.left + innerMargin.right,
- layerStyle = { 'width' : Math.max(contentWidth, fullWidth), 'height' : outerHeight };
+ const { innerMargin: propInnerMargin, innerWidth, outerHeight, contentWidth, scale } = this.props;
+
+ const innerMargin = {
+ top: roundScaled(propInnerMargin.top, scale),
+ right: roundScaled(propInnerMargin.right, scale),
+ bottom: roundScaled(propInnerMargin.bottom, scale),
+ left: roundScaled(propInnerMargin.left, scale),
+ };
+
+ const fullWidth = innerWidth + innerMargin.left + innerMargin.right;
+ const layerStyle = { 'width': Math.max(contentWidth, fullWidth), 'height': outerHeight };
return (
diff --git a/src/components/ScaleController.js b/src/components/ScaleController.js
new file mode 100644
index 0000000..7782b07
--- /dev/null
+++ b/src/components/ScaleController.js
@@ -0,0 +1,394 @@
+'use strict';
+
+import React from 'react';
+import { requestAnimationFrame, cancelAnimationFrame, roundScaled } from '../utilities'
+
+
+/**
+ * @deprecated Moved most of the functionality into Graph
+ */
+export class ScaleController extends React.PureComponent {
+
+ static defaultProps = {
+ minScale: 0.01,
+ maxScale: 1.25,
+ initialScale: 1,
+ zoomToExtentsOnMount: true
+ };
+
+ constructor(props){
+ super(props);
+ this.handleWheelMove = this.handleWheelMove.bind(this);
+ this.handleInnerContainerMounted = this.handleInnerContainerMounted.bind(this);
+ this.handleInnerContainerWillUnmount = this.handleInnerContainerWillUnmount.bind(this);
+ this.innerElemReference = null;
+ }
+
+ componentDidMount(){
+ // const {
+ // containerWidth,
+ // containerHeight,
+ // minScale: propMinScale,
+ // maxScale,
+ // graphWidth,
+ // graphHeight,
+ // zoomToExtentsOnMount = true
+ // } = this.props;
+
+ // if (typeof containerWidth !== "number" || typeof containerHeight !== "number") {
+ // // Maybe will become set in componentDidUpdate later.
+ // return false;
+ // }
+
+ // if (isNaN(containerWidth) || isNaN(containerHeight)) {
+ // throw new Error("Width or height is NaN.");
+ // }
+
+ // const minScaleUnbounded = Math.min(
+ // (containerWidth / graphWidth),
+ // (containerHeight / graphHeight)
+ // );
+
+ // // Decrease by 5% for scrollbars, etc.
+ // const nextMinScale = Math.floor(
+ // Math.min(1, maxScale, Math.max(propMinScale, minScaleUnbounded))
+ // * 95) / 100;
+ // const retObj = { minScale: nextMinScale };
+
+ // // First time that we've gotten dimensions -- set scale to fit.
+ // // Also, if nextMinScale > scale or we had scale === minScale before.
+ // // TODO: Maybe do this onMount also
+ // if (zoomToExtentsOnMount) {
+ // retObj.scale = nextMinScale;
+ // }
+ // requestAnimationFrame(() => {
+ // this.setState(retObj);
+ // });
+ }
+
+ componentDidUpdate(pastProps, pastState){
+ const {
+ enableMouseWheelZoom,
+ enablePinchZoom,
+ zoomToExtentsOnMount,
+ containerWidth,
+ containerHeight,
+ graphWidth,
+ graphHeight,
+ minScale: propMinScale,
+ maxScale
+ } = this.props;
+ // const { scale, minScale: stateMinScale } = this.state;
+ // const {
+ // enableMouseWheelZoom: pastWheelEnabled,
+ // enablePinchZoom: pastPinchEnabled,
+ // containerWidth: pastWidth,
+ // containerHeight: pastHeight,
+ // graphWidth: pastGraphWidth,
+ // graphHeight: pastGraphHeight
+ // } = pastProps;
+
+ // // Remove or attach listeners if needed.
+ // const listenNow = (enableMouseWheelZoom || enablePinchZoom);
+ // const listenBefore = (pastWheelEnabled || pastPinchEnabled);
+
+ // if (this.innerElemReference){
+ // if (listenNow && !listenBefore){
+ // this.innerElemReference.addEventListener("wheel", this.handleWheelMove, { "passive": false, "capture": true });
+ // } else if (!listenNow && listenBefore){
+ // this.innerElemReference.removeEventListener("wheel", this.handleWheelMove);
+ // }
+ // }
+
+ // // Update minScale (& possibly scale itself)
+ // // We read `pastState` here before updating set
+ // // vs using functional updater because want to avoid
+ // // React's state change queuing mechanisms / reading
+ // // most accurate prev value not important.
+ // if (containerWidth !== pastWidth ||
+ // containerHeight !== pastHeight ||
+ // graphWidth !== pastGraphWidth ||
+ // graphHeight !== pastGraphHeight
+ // ){
+ // const minScaleUnbounded = Math.min(
+ // (containerWidth / graphWidth),
+ // (containerHeight / graphHeight)
+ // );
+
+ // // Decrease by 5% for scrollbars, etc.
+ // const nextMinScale = Math.floor(
+ // Math.min(1, maxScale, Math.max(propMinScale, minScaleUnbounded))
+ // * 95) / 100;
+ // const retObj = { minScale: nextMinScale };
+
+ // // First time that we've gotten dimensions -- set scale to fit.
+ // // Also, if nextMinScale > scale or we had scale === minScale before.
+ // // TODO: Maybe do this onMount also
+ // if (nextMinScale > scale || stateMinScale === scale || (zoomToExtentsOnMount && (!pastHeight || !pastWidth))) {
+ // retObj.scale = nextMinScale;
+ // }
+ // requestAnimationFrame(() => {
+ // this.setState(retObj);
+ // });
+ // }
+ }
+
+
+ /**
+ * If `enableMouseWheelZoom` or `enablePinchZoom` are enabled, will
+ * zoom in response to mouse wheel events or ctrl+mousewheel & touchpad
+ * pinch events, respectively.
+ */
+ handleWheelMove(evt){
+ const { deltaY, deltaX, ctrlKey } = evt;
+ const { enableMouseWheelZoom, enablePinchZoom, scale, setScale } = this.props;
+
+ if (!enableMouseWheelZoom && !enablePinchZoom) {
+ return false;
+ }
+
+ // Chrome registers touchpad-based pinching as scrollwheel with ctrlKey.
+ if (enablePinchZoom && !enableMouseWheelZoom && !ctrlKey) {
+ return false;
+ }
+
+ if (!enablePinchZoom && enableMouseWheelZoom && ctrlKey) {
+ return false;
+ }
+
+ if (enableMouseWheelZoom && Math.abs(deltaX) > 0){
+ // Not perfect --
+ // Make sure is mousewheel and not bidirectional touchpad,
+ // for which we might still wanna allow left/right movement.
+ return false;
+ }
+
+ evt.preventDefault();
+ evt.stopPropagation();
+
+ // `ctrlKey=true` implies 2nd ctrl key being pressed -or- touchpad pinching
+ const deltaMultiplier = ctrlKey ? 0.01 : 0.0005;
+
+ // React uses own state change queuing system, which guessing
+ // gets bypassed w. raf, so below line might work better, since
+ // `state.scale` unchanged.. (vs. functional updater)
+ setScale(scale - (deltaY * deltaMultiplier));
+ }
+
+ handleInnerContainerMounted(innerElem){
+ const { onMount, enableMouseWheelZoom, enablePinchZoom } = this.props;
+ if (typeof onMount === "function"){
+ onMount(...arguments);
+ }
+ this.innerElemReference = innerElem;
+ // We need to listen to `wheel` events directly (not thru React)
+ // as react doesn't handle these (it seems / afaik).
+ if (enableMouseWheelZoom || enablePinchZoom) {
+ // Chrome & some other browsers set passive:true by default.
+ innerElem.addEventListener("wheel", this.handleWheelMove, { "passive": false, "capture": true });
+ }
+ }
+
+ handleInnerContainerWillUnmount(innerElem){
+ const { onWillUnmount } = this.props;
+ if (typeof onMount === "function"){
+ onWillUnmount(...arguments);
+ }
+ if (this.innerElemReference === null) {
+ console.error("No inner elem, exiting");
+ return;
+ }
+ if (this.innerElemReference !== innerElem) {
+ throw new Error("Inner elem is different, exiting");
+ }
+ this.innerElemReference.removeEventListener("wheel", this.handleWheelMove);
+ this.innerElemReference = null;
+ }
+
+ render(){
+ const { children, initialScale = null, scale, setScale, minScale, ...passProps } = this.props;
+ const childProps = {
+ ...passProps,
+ scale: scale || 1,
+ minScale: minScale,
+ setScale: setScale,
+ onMount: this.handleInnerContainerMounted,
+ onWillUnmount: this.handleInnerContainerWillUnmount
+ };
+ return React.Children.map(children, (child) => child && React.cloneElement(child, childProps) );
+ }
+
+}
+
+/**
+ * Component which provides UI for adjusting scale and
+ * calls `ScaleController`'s `setScale` function.
+ *
+ * Uses `requestAnimationFrame` (`raf`) for smooth and performant
+ * zooming transitions.
+ *
+ * To assert whether `raf` makes a meaningful difference, try to comment out
+ * the `raf`-related lines in `onSliderChange` method (except for `setScale(nextVal)`)
+ * and compare performance/smoothness :-D
+ *
+ * React _does_ seem to use requestAnimationFrame under the hood but maybe only
+ * for batched updates, as animation frames aren't always requested (Chrome dev
+ * tools > performance > profiling).
+ *
+ * We're getting performance gain from using `raf` in onSliderChange potentially
+ * because we're listening to `SyntheticEvent`s passed in from React element, which
+ * may be throttled or deferred until after state changes (vs native events).
+ */
+export class ScaleControls extends React.PureComponent {
+
+ static defaultProps = {
+ scaleChangeInterval: 15, // milliseconds
+ scaleChangeUpFactor: 1.025,
+ scaleChangeDownFactor: 0.975
+ };
+
+ constructor(props){
+ super(props);
+ this.onZoomOutDown = this.onZoomOutDown.bind(this);
+ this.onZoomOutUp = this.onZoomOutUp.bind(this);
+ this.onZoomInDown = this.onZoomInDown.bind(this);
+ this.onZoomInUp = this.onZoomInUp.bind(this);
+ this.cancelAnimationFrame = this.cancelAnimationFrame.bind(this);
+ this.onSliderChange = this.onSliderChange.bind(this);
+ this.state = {
+ zoomOutPressed: false,
+ zoomInPressed: false
+ };
+ this.nextAnimationFrame = null;
+ }
+
+ cancelAnimationFrame(){
+ if (this.nextAnimationFrame !== null) {
+ cancelAnimationFrame(this.nextAnimationFrame);
+ this.nextAnimationFrame = null;
+ }
+ }
+
+ onZoomOutDown(evt){
+ evt.preventDefault();
+ evt.stopPropagation();
+ const { setScale, scaleChangeInterval, scaleChangeDownFactor, scale: initScale } = this.props;
+ this.setState({ zoomOutPressed: true }, ()=>{
+ const start = Date.now();
+ //const diff = (scaleChangeDownFactor * initScale) - initScale;
+
+ const performZoom = () => {
+ const { scale, minScale } = this.props;
+ if (scale <= minScale){ // Button becomes disabled so `onZoomOutUp` is not guaranteed to be called.
+ this.setState({ zoomOutPressed: false });
+ this.nextAnimationFrame = null;
+ return;
+ }
+ setScale(
+ //initScale + (diff * Math.floor((Date.now() - start) / scaleChangeInterval))
+ initScale *
+ (scaleChangeDownFactor ** Math.floor((Date.now() - start) / scaleChangeInterval))
+ );
+ this.nextAnimationFrame = requestAnimationFrame(performZoom);
+ };
+
+ this.nextAnimationFrame = requestAnimationFrame(performZoom);
+ });
+ }
+
+ onZoomOutUp(evt){
+ evt.preventDefault();
+ evt.stopPropagation();
+ this.cancelAnimationFrame();
+ this.setState({ zoomOutPressed: false });
+ }
+
+ onZoomInDown(evt){
+ evt.preventDefault();
+ evt.stopPropagation();
+ const { setScale, scaleChangeInterval, scaleChangeUpFactor, scale: initScale } = this.props;
+ this.setState({ zoomInPressed: true }, ()=>{
+ const start = Date.now();
+ //const diff = (scaleChangeUpFactor * initScale) - initScale;
+
+ const performZoom = () => {
+ const { scale, maxScale } = this.props;
+ if (scale >= maxScale){ // Button becomes disabled so `onZoomOutUp` is not guaranteed to be called.
+ this.setState({ zoomInPressed: false });
+ this.nextAnimationFrame = null;
+ return;
+ }
+ setScale(
+ //initScale + (diff * Math.floor((Date.now() - start) / scaleChangeInterval))
+ initScale *
+ (scaleChangeUpFactor ** Math.floor((Date.now() - start) / scaleChangeInterval))
+ );
+ this.nextAnimationFrame = requestAnimationFrame(performZoom);
+ };
+
+ this.nextAnimationFrame = requestAnimationFrame(performZoom);
+ });
+ }
+
+ onZoomInUp(evt){
+ evt.preventDefault();
+ evt.stopPropagation();
+ this.cancelAnimationFrame();
+ this.setState({ zoomInPressed: false });
+ }
+
+ onSliderChange(evt){
+ evt.preventDefault();
+ evt.stopPropagation();
+ const { setScale } = this.props;
+ const nextVal = parseFloat(evt.target.value);
+ this.cancelAnimationFrame();
+ this.nextAnimationFrame = requestAnimationFrame(() => {
+ setScale(nextVal);
+ this.nextAnimationFrame = null;
+ });
+ }
+
+ render(){
+ const { scale, setScale, minScale, maxScale } = this.props;
+
+ if (typeof setScale !== "function" || typeof scale !== "number" || isNaN(scale)) {
+ return null;
+ }
+
+ return (
+
+
+
+
+ { Math.round(scale * 100) }
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export function scaledStyle(graphHeight, graphWidth, scale){
+ return {
+ width: roundScaled(graphWidth, scale),
+ height: roundScaled(graphHeight, scale),
+ transform : "scale3d(" + scale + "," + scale + ",1)"
+ };
+}
diff --git a/src/styles.scss b/src/styles.scss
index 47ab005..cc3d179 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -536,7 +536,7 @@ $workflow-node-color-type-global-context: #ffb3b3 !default;
}
.scroll-container {
-
+ display: flex;
position: relative;
box-sizing: content-box;
transition:
@@ -624,4 +624,79 @@ $workflow-node-color-type-global-context: #ffb3b3 !default;
@include workflow-edge-layer;
}
}
+}
+
+.zoom-controls-container {
+ display: flex;
+ position: absolute;
+ z-index: 999;
+ top: 8px;
+ left: 50%;
+ transform: translateX(-50%);
+ > .zoom-buttons-row {
+ display: flex;
+ align-items: flex-start;
+ > .zoom-btn,
+ > .zoom-value {
+ box-sizing: content-box;
+ text-align: center;
+ padding: 1px 4px;
+ height: 25px;
+ color: #555;
+ background-color: #fff;
+ }
+ > .zoom-btn {
+ border: 1px solid #999;
+ width: 24px;
+
+ &.zoom-out { // Left btn
+ border-radius: 5px 0 0 5px;
+ border-right-color: #ddd !important;
+ }
+ &.zoom-in { // Right btn
+ border-radius: 0 5px 5px 0;
+ border-left-color : #ddd !important;
+ }
+
+ &:disabled {
+ color: #999;
+ pointer-events: none;
+ }
+ &:hover:not(:disabled),
+ &:focus:not(:disabled), &:active:not(:disabled) {
+ color: #000;
+ border-color: #555;
+ outline: none;
+ }
+ &:focus:not(:disabled), &:active:not(:disabled) {
+ box-shadow: inset 0px 0px 2px 0px #333;
+ }
+ }
+ > .zoom-value {
+ border-top: 1px solid #999999;
+ border-bottom: 1px solid #999999;
+ width: 36px;
+ font-size: 0.875em;
+ line-height: 25px;
+ white-space: nowrap;
+ text-align: right;
+ }
+ }
+ > .zoom-slider {
+ width: 112px;
+ padding-top: 3px;
+ padding-left: 3px;
+ > input[type="range"] {
+ width: inherit;
+ // If we want to make it vertical later:
+ //&[orient="vertical"] {
+ // writing-mode: bt-lr; /* IE */
+ // -webkit-appearance: slider-vertical; /* WebKit */
+ // height: 120px;
+ //}
+ }
+ }
+ + div.state-container {
+ margin-top: 40px;
+ }
}
\ No newline at end of file
diff --git a/src/utilities.js b/src/utilities.js
new file mode 100644
index 0000000..74ba619
--- /dev/null
+++ b/src/utilities.js
@@ -0,0 +1,36 @@
+'use strict';
+
+import React from 'react';
+
+/**
+ * Helper function for window.requestAnimationFrame. Falls back to browser-prefixed versions if default not available, or falls back to setTimeout with 0ms delay if no requestAnimationFrame available at all.
+ *
+ * @param {function} cb - Callback method.
+ * @returns {undefined|string} Undefined or timeout ID if falling back to setTimeout.
+ */
+export function requestAnimationFrame(cb){
+ if (/*!isServerSide() && */typeof window !== 'undefined'){
+ if (typeof window.requestAnimationFrame !== 'undefined') return window.requestAnimationFrame(cb);
+ if (typeof window.webkitRequestAnimationFrame !== 'undefined') return window.webkitRequestAnimationFrame(cb);
+ if (typeof window.mozRequestAnimationFrame !== 'undefined') return window.mozRequestAnimationFrame(cb);
+ }
+ return setTimeout(cb, 0); // Mock it for old browsers and server-side.
+}
+
+export function cancelAnimationFrame(identifier){
+ if (/*!isServerSide() && */typeof window !== 'undefined'){
+ if (typeof window.cancelAnimationFrame !== 'undefined') return window.cancelAnimationFrame(identifier);
+ if (typeof window.webkitCancelAnimationFrame !== 'undefined') return window.webkitCancelAnimationFrame(identifier);
+ if (typeof window.mozCancelAnimationFrame !== 'undefined') return window.mozCancelAnimationFrame(identifier);
+ }
+ return clearTimeout(identifier); // Mock it for old browsers and server-side.
+}
+
+export function roundScaled(value, scale, decimals = 2) {
+ //shortcut - useful for most cases
+ if (scale === 1) return value;
+
+ const factor = Math.pow(10, decimals);
+ const result = value * scale;
+ return Math.round(result * factor) / factor;
+}
\ No newline at end of file
diff --git a/webpack.config.demo.js b/webpack.config.demo.js
index 26b0c8a..f460e63 100644
--- a/webpack.config.demo.js
+++ b/webpack.config.demo.js
@@ -64,6 +64,22 @@ module.exports = [{
loader: 'babel-loader'
}
]
+ },
+ {
+ test: /\.css$/,
+ use: ['style-loader', 'css-loader']
+ },
+ {
+ test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
+ use: [
+ {
+ loader: 'file-loader',
+ options: {
+ name: '[name].[ext]',
+ outputPath: 'webfonts/',
+ }
+ }
+ ]
}
]
},