Heights & transitioning

Author: alexkb0009

dist/react-workflow-viz.min.css

@@ -21554,7 +21554,7 @@ var ScrollContainer_ScrollContainer = function (_React$PureComponent) {
     _this = ScrollContainer_possibleConstructorReturn(this, ScrollContainer_getPrototypeOf(ScrollContainer).call(this, props));
     _this.state = {
       'mounted': false,
-      'isHeightDecreasing': false,
+      'isHeightDecreasing': null,
       'outerHeight': props.outerHeight,
       'pastHeight': null
     };
@@ -21577,34 +21577,21 @@ var ScrollContainer_ScrollContainer = function (_React$PureComponent) {
 
       var updateOuterHeight = this.props.outerHeight;
 
-      if (updateOuterHeight < prevProps.outerHeight) {
-        this.setState(function (_ref) {
-          _ref.isHeightDecreasing;
-          return {
-            'isHeightDecreasing': true,
-            'pastHeight': prevProps.outerHeight,
-            outerHeight: updateOuterHeight
-          };
+      if (updateOuterHeight !== prevProps.outerHeight) {
+        var isHeightDecreasing = updateOuterHeight < prevProps.outerHeight;
+        this.setState({
+          'isHeightDecreasing': isHeightDecreasing,
+          'pastHeight': isHeightDecreasing ? prevProps.outerHeight : null,
+          'outerHeight': updateOuterHeight
         }, function () {
           _this2.heightTimer && clearTimeout(_this2.heightTimer);
           _this2.heightTimer = setTimeout(function () {
             _this2.setState({
-              'isHeightDecreasing': false,
-              'pastHeight': null,
-              outerHeight: updateOuterHeight
+              'isHeightDecreasing': null,
+              'pastHeight': null
             });
           }, 500);
         });
-        return;
-      }
-
-      if (updateOuterHeight > prevProps.outerHeight) {
-        this.heightTimer && clearTimeout(this.heightTimer);
-        this.setState({
-          'isHeightDecreasing': false,
-          'pastHeight': null,
-          outerHeight: updateOuterHeight
-        });
       }
     }
   }, {
@@ -21624,12 +21611,17 @@ var ScrollContainer_ScrollContainer = function (_React$PureComponent) {
           pastHeight = _this$state.pastHeight,
           isHeightDecreasing = _this$state.isHeightDecreasing,
           mounted = _this$state.mounted;
-      var innerCls = 'scroll-container' + (isHeightDecreasing ? ' height-decreasing' : '');
+      var innerCls = 'scroll-container' + (isHeightDecreasing ? ' height-decreasing' : '') + (isHeightDecreasing === false ? ' height-increasing' : '');
       var innerStyle = {
         'width': Math.max(contentWidth, width),
         'height': outerHeight,
         'overflowY': outerHeight < minHeight ? "hidden" : null
       };
+
+      if (minHeight > outerHeight) {
+        innerStyle.paddingTop = innerStyle.paddingBottom = Math.floor((minHeight - outerHeight) / 2);
+      }
+
       return external_commonjs_react_commonjs2_react_amd_react_root_React_default.a.createElement("div", {
         className: "scroll-container-wrapper",
         ref: this.containerRef,

dist/react-workflow-viz.min.js

@@ -1,6 +1,6 @@
 {
   "name": "@hms-dbmi-bgm/react-workflow-viz",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "React component for visualizing CWL-like workflows and provenance graphs.",
   "main": "dist/react-workflow-viz.min.js",
   "module": "dist/react-workflow-viz.node.js",

dist/react-workflow-viz.min.js.map

@@ -11,7 +11,7 @@ export default class ScrollContainer extends React.PureComponent {
         super(props);
         this.state = {
             'mounted' : false,
-            'isHeightDecreasing' : false,
+            'isHeightDecreasing' : null,
             'outerHeight' : props.outerHeight,
             'pastHeight' : null
         };
@@ -25,35 +25,39 @@ export default class ScrollContainer extends React.PureComponent {
 
     componentDidUpdate(prevProps, pastState){
         const { outerHeight: updateOuterHeight } = this.props;
-        if (updateOuterHeight < prevProps.outerHeight){
-            this.setState(({ isHeightDecreasing })=>{
-                return { 'isHeightDecreasing' : true, 'pastHeight' : prevProps.outerHeight, outerHeight: updateOuterHeight };
+        if (updateOuterHeight !== prevProps.outerHeight){
+            const isHeightDecreasing = updateOuterHeight < prevProps.outerHeight;
+            this.setState({
+                'isHeightDecreasing' : isHeightDecreasing,
+                'pastHeight' : isHeightDecreasing ? prevProps.outerHeight : null,
+                'outerHeight': updateOuterHeight
             }, ()=>{
                 this.heightTimer && clearTimeout(this.heightTimer);
                 this.heightTimer = setTimeout(()=>{
-                    this.setState({ 'isHeightDecreasing' : false, 'pastHeight' : null, outerHeight: updateOuterHeight });
+                    this.setState({ 'isHeightDecreasing' : null, 'pastHeight' : null });
                 }, 500);
             });
-            return;
-        }
-
-        if (updateOuterHeight > prevProps.outerHeight){
-            this.heightTimer && clearTimeout(this.heightTimer);
-            this.setState({ 'isHeightDecreasing' : false, 'pastHeight' : null, outerHeight: updateOuterHeight });
-            return;
         }
     }
 
     render(){
         const { innerMargin, innerWidth, children, contentWidth, width, minHeight } = this.props;
         const { outerHeight, pastHeight, isHeightDecreasing, mounted } = this.state;
-        const innerCls = 'scroll-container' + (isHeightDecreasing ? ' height-decreasing' : '');
+        const innerCls = (
+            'scroll-container'
+            + (isHeightDecreasing ? ' height-decreasing' : '')
+            + (isHeightDecreasing === false ? ' height-increasing' : '')
+        );
         const innerStyle = {
             'width' : Math.max(contentWidth, width),
             'height': outerHeight,
             'overflowY' : outerHeight < minHeight ? "hidden" : null
         };
 
+        if (minHeight > outerHeight){
+            innerStyle.paddingTop = innerStyle.paddingBottom = Math.floor((minHeight - outerHeight) / 2);
+        }
+
         return (
             <div className="scroll-container-wrapper" ref={this.containerRef} style={{ width, minHeight }}>
                 <div className={innerCls} style={innerStyle}>

dist/react-workflow-viz.node.js

@@ -528,24 +528,36 @@ $workflow-node-color-type-global-context:           #ffb3b3 !default;
 
                 display: flex;
                 justify-content: center;
-                align-items: center;
+                //align-items: center;
 
             }
 
             .scroll-container {
 
                 position: relative;
-                transition: height .5s ease-out, width .5s ease-out;
+                box-sizing: content-box;
+                transition:
+                    height .5s ease-out,
+                    width 0s .5s ease-out,
+                    padding-top .5s ease-out,
+                    padding-bottom .5s ease-out;
 
                 &.height-decreasing {
-                    transition: height .5s .5s ease-out, width .5s ease-out;
+                    transition:
+                        height .5s ease-out,
+                        width 0s .5s ease-out,
+                        padding-top .5s ease-out,
+                        padding-bottom .5s ease-out;
+                }
+
+                &.height-decreasing,
+                &.height-increasing {
+                    overflow: hidden;
                 }
 
                 .nodes-layer-wrapper,
                 .edges-layer-wrapper {
                     position: absolute;
-                    left: 0;
-                    top: 0;
                 }
 
                 .nodes-layer-wrapper {