fix: limit zooming and keep state

qlik-oss · Feb 12, 2020 · 294cb49 · 294cb49
1 parent 978596e
commit 294cb49
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 24 deletions.
diff --git a/src/extension/ext-raw.js b/src/extension/ext-raw.js
@@ -6,11 +6,12 @@ const colorOptions = [
   { value: 'byExpression', translation: 'properties.colorMode.byExpression' },
 ];
 
-const navigationOptions = [
-  { value: 'regular', translation: '$Unlimited sizing' },
-  { value: 'scroll', translation: '$SCroll thing' },
-  { value: 'free', translation: '$Free pan and zoom' },
-];
+// Navigation options only needed when adding new option
+// const navigationOptions = [
+//   { value: 'regular', translation: '$Unlimited sizing' },
+//   { value: 'scroll', translation: '$SCroll thing' },
+//   { value: 'free', translation: '$Free pan and zoom' },
+// ];
 
 export default {
   definition: {
@@ -107,19 +108,19 @@ export default {
               backgroundColor: {
                 type: 'items',
                 items: {
-                  navigation: {
-                    type: 'items',
-                    items: {
-                      navigtaionMode: {
-                        ref: 'navigationMode',
-                        type: 'string',
-                        translation: '$Navigationmode',
-                        component: 'dropdown',
-                        default: 'scroll',
-                        options: navigationOptions,
-                      },
-                    },
-                  },
+                  // Dropdown for navigation options. Should only be activated when adding new options
+                  // navigation: {
+                  //   type: 'items',
+                  //   items: {
+                  //     navigtaionMode: {
+                  //       ref: 'navigationMode',
+                  //       type: 'string',
+                  //       translation: '$Navigationmode',
+                  //       component: 'dropdown',
+                  //       options: navigationOptions,
+                  //     },
+                  //   },
+                  // },
                   useColorExpression: {
                     ref: 'style.backgroundColor.colorType',
                     type: 'string',

diff --git a/src/index.js b/src/index.js
@@ -3,7 +3,6 @@ import {
   useEffect,
   useElement,
   useModel,
-  useRect,
   useState,
   usePromise,
   useTheme,
@@ -34,7 +33,6 @@ export default function supernova(env) {
       const layout = useStaleLayout();
       const model = useModel();
       const element = useElement();
-      const rect = useRect()[0];
       const Theme = useTheme();
       const selectionsAPI = useSelections();
       selectionsAPI.refreshSelectionState = setSelState;
@@ -115,7 +113,7 @@ export default function supernova(env) {
               });
           }
         }
-      }, [element, dataTree, rect]);
+      }, [element, dataTree]);
 
       useEffect(() => {
         if (objectData && expandedState && styling) {

diff --git a/src/tree/position.js b/src/tree/position.js
@@ -15,7 +15,7 @@ export default function position(orientation, nodeSize, element) {
         ? d.parent[axis] + nodeMargin / 2
         : d.parent[axis] + (d.data.childNumber - (d.parent.children.length - 1) / 2) * widthSpacing;
     } else if (!d.children) {
-      d[axis] = 0;
+      d[axis] = (element.clientWidth - nodeSize.width) / 2;
     } else {
       // In case of zoom mode we need to have the tree moved to the right from the start
       const neededWidth = (nodeSize.width + nodeMargin) * d.children.length - nodeMargin;

diff --git a/src/tree/transform.js b/src/tree/transform.js
@@ -46,7 +46,9 @@ export function applyTransform(eventTransform, svg, divBox, width, height) {
 
 export function setZooming(objectData) {
   const { svg, divBox, width, height, element, allNodes } = objectData;
-  const scaleFactor = allNodes.zoomFactor;
+  const maxZoom = 6;
+  const minZoom = 0.2;
+  const scaleFactor = Math.max(Math.min(maxZoom, allNodes.zoomFactor), minZoom);
 
   const zoomed = () => {
     applyTransform(
@@ -57,13 +59,14 @@ export function setZooming(objectData) {
       height
     );
   };
+
   select(element).call(
     zoom()
       .extent([
         [0, 0],
         [width, height],
       ])
-      .scaleExtent([0.05, 8])
+      .scaleExtent([minZoom, maxZoom])
       .on('zoom', zoomed)
   );