fix: limit animation (#55)

qlik-oss · Feb 12, 2020 · da275da · da275da
1 parent 69a9e4e
commit da275da
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 27 deletions.
diff --git a/src/index.js b/src/index.js
@@ -74,8 +74,9 @@ export default function supernova(env) {
         };
       }, []);
 
-      const setStateCallback = newNode => {
-        setExpandedState(newNode);
+      const setStateCallback = newState => {
+        newState.useTransitions = true;
+        setExpandedState(newState);
       };
 
       /*
@@ -98,7 +99,6 @@ export default function supernova(env) {
           return treeTransform({ layout, model }).then(transformed => {
             setDataTree(transformed);
             setStyling(stylingUtils.cardStyling({ Theme, layout }));
-            setExpandedState(null);
           });
         }
         return Promise.resolve();
@@ -122,9 +122,22 @@ export default function supernova(env) {
 
       useEffect(() => {
         if (objectData && expandedState && styling) {
-          paintTree({ objectData, expandedState, styling, setStateCallback, selectionsAPI, linked });
+          paintTree({ objectData, expandedState, styling, setStateCallback, selectionsAPI });
         }
-      }, [expandedState, objectData, selState]);
+      }, [objectData, selState]);
+
+      useEffect(() => {
+        if (objectData && expandedState && styling) {
+          paintTree({
+            objectData,
+            expandedState,
+            styling,
+            setStateCallback,
+            selectionsAPI,
+            useTransitions: expandedState.useTransitions,
+          });
+        }
+      }, [expandedState]);
     },
     ext: ext(env),
   };

diff --git a/src/tree/render.js b/src/tree/render.js
@@ -5,16 +5,8 @@ import createPaths from './path';
 import transform from './transform';
 import '../treeCss.css';
 
-const filterTree = ({ topId, isExpanded, expandedChildren }, nodeTree, setStateCallback) => {
-  const topNode = topId ? nodeTree.descendants().find(node => node.data.id === topId) : null;
-  if (!topNode) {
-    setStateCallback({
-      topId: nodeTree.data.id,
-      isExpanded: true,
-      expandedChildren: [],
-    });
-    return [];
-  }
+const filterTree = ({ topId, isExpanded, expandedChildren }, nodeTree) => {
+  const topNode = nodeTree.descendants().find(node => node.data.id === topId) || nodeTree;
   const subTree = [];
   subTree.push(topNode); // self
   if (isExpanded && topNode.children) {
@@ -31,13 +23,7 @@ const filterTree = ({ topId, isExpanded, expandedChildren }, nodeTree, setStateC
   return subTree;
 };
 
-export const paintTree = ({
-  objectData,
-  expandedState,
-  styling,
-  setStateCallback,
-  selectionsAPI,
-}) => {
+export const paintTree = ({ objectData, expandedState, styling, setStateCallback, selectionsAPI, useTransitions }) => {
   const { svg, divBox, allNodes, positioning, width, height } = objectData;
   divBox.selectAll('.node-rect').remove();
   svg.selectAll('g').remove();
@@ -55,7 +41,7 @@ export const paintTree = ({
   // Create the lines (links) between the nodes
   createPaths(node, positioning, expandedState.topId);
   // Scale and translate
-  transform(nodes, width, height, svg, divBox);
+  transform(nodes, width, height, svg, divBox, useTransitions);
 };
 
 export const getSize = ({ error, warn }, element) => {

diff --git a/src/tree/transform.js b/src/tree/transform.js
@@ -1,6 +1,6 @@
 import constants from './size-constants';
 
-const getBBoxOfNodes = (nodes) => {
+const getBBoxOfNodes = nodes => {
   const { cardWidth, cardHeight, buttonHeight, buttonMargin } = constants;
   const bbox = {
     left: Infinity,
@@ -22,7 +22,7 @@ const getBBoxOfNodes = (nodes) => {
   };
 };
 
-export default function transform(nodes, width, height, svg, divBox) {
+export default function transform(nodes, width, height, svg, divBox, useTransitions) {
   // Zooming and positioning of the tree
   const bBox = getBBoxOfNodes(nodes);
   const scaleToWidhth = bBox.width / width > bBox.height / height;
@@ -44,8 +44,8 @@ export default function transform(nodes, width, height, svg, divBox) {
   } else {
     // Transition using css, does not work in IE11
     svg.attr('style', `transform: scale(${1 / scaleFactor}) translate(${translation});`);
-    divBox.classed('org-disable-transition', false);
-    svg.classed('org-disable-transition', false);
+    divBox.classed('org-disable-transition', !useTransitions);
+    svg.classed('org-disable-transition', !useTransitions);
   }
 
   divBox.attr(