fix: no interaction in edit

qlik-oss · Feb 12, 2020 · 810749d · 810749d
1 parent da275da
commit 810749d
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 9 deletions.
diff --git a/src/index.js b/src/index.js
@@ -9,6 +9,7 @@ import {
   useTheme,
   useSelections,
   useAction,
+  useConstraints,
 } from '@nebula.js/supernova';
 import properties from './object-properties';
 import data from './data';
@@ -36,6 +37,8 @@ export default function supernova(env) {
       const rect = useRect()[0];
       const Theme = useTheme();
       const selectionsAPI = useSelections();
+      const inEdit = useConstraints().passive;
+
       if (selectionsAPI) {
         selectionsAPI.refreshSelectionState = setSelState;
       }
@@ -122,18 +125,22 @@ export default function supernova(env) {
 
       useEffect(() => {
         if (objectData && expandedState && styling) {
-          paintTree({ objectData, expandedState, styling, setStateCallback, selectionsAPI });
+          paintTree({ objectData, expandedState, styling, setStateCallback, selectionsAPI, inEdit });
         }
       }, [objectData, selState]);
 
       useEffect(() => {
+        // console.log('env', env);
+        // console.log('constr', constraints);
+
         if (objectData && expandedState && styling) {
           paintTree({
             objectData,
             expandedState,
             styling,
             setStateCallback,
             selectionsAPI,
+            inEdit,
             useTransitions: expandedState.useTransitions,
           });
         }

diff --git a/src/tree/box.js b/src/tree/box.js
@@ -50,7 +50,16 @@ export const getNewUpState = (d, isExpanded) => ({
   isExpanded: true,
 });
 
-export default function box({ x, y }, divBox, nodes, cardStyling, expandedState, setStateCallback, selectionsAPI) {
+export default function box(
+  { x, y },
+  divBox,
+  nodes,
+  cardStyling,
+  expandedState,
+  setStateCallback,
+  selectionsAPI,
+  inEdit
+) {
   const { cardWidth, cardHeight, buttonWidth, buttonHeight, buttonMargin, rootDiameter } = constants;
   const { topId, isExpanded } = expandedState;
   function getStyle(d) {
@@ -70,7 +79,7 @@ export default function box({ x, y }, divBox, nodes, cardStyling, expandedState,
     .attr('style', getStyle)
     .attr('id', d => d.data.id)
     .on('click', node => {
-      if (node.data.id !== 'Root') {
+      if (!inEdit && node.data.id !== 'Root') {
         selections.select(node, selectionsAPI);
       }
     })
@@ -83,10 +92,17 @@ export default function box({ x, y }, divBox, nodes, cardStyling, expandedState,
     .enter()
     .append('div')
     .attr('class', 'node-rect')
-    .attr('style', d => `width:${buttonWidth}px;height:${buttonHeight}px;top:${y(d) + cardHeight + buttonMargin}px;left:${x(d) + (cardWidth - buttonWidth) / 2}px;`)
+    .attr(
+      'style',
+      d =>
+        `width:${buttonWidth}px;height:${buttonHeight}px;top:${y(d) + cardHeight + buttonMargin}px;left:${x(d) +
+          (cardWidth - buttonWidth) / 2}px;`
+    )
     .attr('id', d => `${d.data.id}-expand`)
     .on('click', d => {
-      setStateCallback(getNewState(d, expandedState));
+      if (!inEdit) {
+        setStateCallback(getNewState(d, expandedState));
+      }
     })
     .html(d => `<div class="org-traverse"> ${getSign(d, expandedState)} ${d.data.children.length}</div>`);
 
@@ -97,10 +113,17 @@ export default function box({ x, y }, divBox, nodes, cardStyling, expandedState,
     .enter()
     .append('div')
     .attr('class', 'node-rect')
-    .attr('style', d => `width:${buttonWidth}px;height:${buttonHeight}px;top:${y(d) - buttonHeight - buttonMargin}px;left:${x(d) + (cardWidth - buttonWidth) / 2}px;`)
+    .attr(
+      'style',
+      d =>
+        `width:${buttonWidth}px;height:${buttonHeight}px;top:${y(d) - buttonHeight - buttonMargin}px;left:${x(d) +
+          (cardWidth - buttonWidth) / 2}px;`
+    )
     .attr('id', d => `${d.data.id}-up`)
     .on('click', d => {
-      setStateCallback(getNewUpState(d, isExpanded));
+      if (!inEdit) {
+        setStateCallback(getNewUpState(d, isExpanded));
+      }
     })
     .html('<div class="org-traverse">↑</div>');
 }
diff --git a/src/tree/render.js b/src/tree/render.js
@@ -23,7 +23,15 @@ const filterTree = ({ topId, isExpanded, expandedChildren }, nodeTree) => {
   return subTree;
 };
 
-export const paintTree = ({ objectData, expandedState, styling, setStateCallback, selectionsAPI, useTransitions }) => {
+export const paintTree = ({
+  objectData,
+  expandedState,
+  styling,
+  setStateCallback,
+  selectionsAPI,
+  inEdit,
+  useTransitions,
+}) => {
   const { svg, divBox, allNodes, positioning, width, height } = objectData;
   divBox.selectAll('.node-rect').remove();
   svg.selectAll('g').remove();
@@ -37,7 +45,7 @@ export const paintTree = ({ objectData, expandedState, styling, setStateCallback
     .attr('class', 'nodeWrapper')
     .attr('id', d => d.data.id);
   // Create cards and naviagation buttons
-  box(positioning, divBox, nodes, styling, expandedState, setStateCallback, selectionsAPI);
+  box(positioning, divBox, nodes, styling, expandedState, setStateCallback, selectionsAPI, inEdit);
   // Create the lines (links) between the nodes
   createPaths(node, positioning, expandedState.topId);
   // Scale and translate