Refactored tree layout type

ekuiter · Aug 26, 2018 · 8290758 · 8290758
1 parent a485a0a
commit 8290758
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 23 deletions.
diff --git a/client/src/components/contextualMenuItems.js b/client/src/components/contextualMenuItems.js
@@ -1,7 +1,7 @@
 import i18n from '../i18n';
 import actions from '../store/actions';
 import {selectMultipleFeaturesContextualMenuItems} from './overlays/FeatureContextualMenu';
-import {overlayTypes} from '../types';
+import {layoutTypes, overlayTypes} from '../types';
 
 const contextualMenuItems = {
     settings: onShowOverlay => ({
@@ -41,14 +41,14 @@ const contextualMenuItems = {
                     key: 'verticalTree',
                     text: i18n.t('featureDiagram.commands.verticalTree'),
                     canCheck: true,
-                    isChecked: featureDiagramLayout === 'verticalTree',
-                    onClick: () => onSetFeatureDiagramLayout('verticalTree')
+                    isChecked: featureDiagramLayout === layoutTypes.verticalTree,
+                    onClick: () => onSetFeatureDiagramLayout(layoutTypes.verticalTree)
                 }, {
                     key: 'horizontalTree',
                     text: i18n.t('featureDiagram.commands.horizontalTree'),
                     canCheck: true,
-                    isChecked: featureDiagramLayout === 'horizontalTree',
-                    onClick: () => onSetFeatureDiagramLayout('horizontalTree')
+                    isChecked: featureDiagramLayout === layoutTypes.horizontalTree,
+                    onClick: () => onSetFeatureDiagramLayout(layoutTypes.horizontalTree)
                 }]
             }
         }),

diff --git a/client/src/components/featureDiagram/treeLayout/AbstractTreeLayout.js b/client/src/components/featureDiagram/treeLayout/AbstractTreeLayout.js
@@ -18,9 +18,8 @@ class AbstractTreeLayout extends React.Component {
     currentCoordinates = {};
     previousCoordinates = {};
 
-    constructor(props, direction, TreeNode, TreeLink) {
+    constructor(props, TreeNode, TreeLink) {
         super(props);
-        this.direction = direction;
         this.treeNode = new TreeNode(
             props.settings,
             props.isSelectMultipleFeatures,

diff --git a/client/src/components/featureDiagram/treeLayout/HorizontalTreeLayout.js b/client/src/components/featureDiagram/treeLayout/HorizontalTreeLayout.js
@@ -3,21 +3,22 @@ import HorizontalTreeLink from './HorizontalTreeLink';
 import HorizontalTreeNode from './HorizontalTreeNode';
 import {getSetting} from '../../../store/settings';
 import {estimateRectHeight, estimateXOffset, estimateYOffset} from './estimation';
+import {layoutTypes} from '../../../types';
 
 class HorizontalTreeLayout extends AbstractTreeLayout {
     widestTextOnLayer = {};
 
     constructor(props) {
-        super(props, 'horizontal', HorizontalTreeNode, HorizontalTreeLink);
+        super(props, HorizontalTreeNode, HorizontalTreeLink);
         this.treeNode.getWidestTextOnLayer = this.getWidestTextOnLayer.bind(this);
     }
 
     estimateXOffset(sgn, estimatedTextWidth) {
-        return estimateXOffset(this.props.settings, sgn, estimatedTextWidth, 'horizontal');
+        return estimateXOffset(this.props.settings, sgn, estimatedTextWidth, layoutTypes.horizontalTree);
     }
 
     estimateYOffset(sgn) {
-        return estimateYOffset(this.props.settings, sgn, 'horizontal');
+        return estimateYOffset(this.props.settings, sgn, layoutTypes.horizontalTree);
     }
 
     getSeparationFn(estimateTextWidth) {

diff --git a/client/src/components/featureDiagram/treeLayout/VerticalTreeLayout.js b/client/src/components/featureDiagram/treeLayout/VerticalTreeLayout.js
@@ -3,18 +3,19 @@ import {getSetting} from '../../../store/settings';
 import VerticalTreeLink from './VerticalTreeLink';
 import VerticalTreeNode from './VerticalTreeNode';
 import {estimateXOffset, estimateYOffset} from './estimation';
+import {layoutTypes} from '../../../types';
 
 class VerticalTreeLayout extends AbstractTreeLayout {
     constructor(props) {
-        super(props, 'vertical', VerticalTreeNode, VerticalTreeLink);
+        super(props, VerticalTreeNode, VerticalTreeLink);
     }
 
     estimateXOffset(sgn, estimatedTextWidth) {
-        return estimateXOffset(this.props.settings, sgn, estimatedTextWidth, 'vertical');
+        return estimateXOffset(this.props.settings, sgn, estimatedTextWidth, layoutTypes.verticalTree);
     }
 
     estimateYOffset(sgn) {
-        return estimateYOffset(this.props.settings, sgn, 'vertical');
+        return estimateYOffset(this.props.settings, sgn, layoutTypes.verticalTree);
     }
 
     getSeparationFn(estimateTextWidth) {

diff --git a/client/src/components/featureDiagram/treeLayout/estimation.js b/client/src/components/featureDiagram/treeLayout/estimation.js
@@ -1,4 +1,5 @@
 import {getSetting} from '../../../store/settings';
+import {layoutTypes} from '../../../types';
 
 // estimates the width of a node's rectangle
 export function estimateRectWidth(settings, estimatedTextWidth) {
@@ -17,7 +18,7 @@ export function estimateRectHeight(settings) {
 // estimates the x coordinate of a node's rectangle left or right side
 export function estimateXOffset(settings, sgn, estimatedTextWidth, layout) {
     const nodeSettings = getSetting(settings, 'featureDiagram.treeLayout.node');
-    return sgn * (estimatedTextWidth * (layout === 'vertical' ? 0.5 : sgn === 1 ? 1 : 0) +
+    return sgn * (estimatedTextWidth * (layout === layoutTypes.verticalTree ? 0.5 : sgn === 1 ? 1 : 0) +
         nodeSettings.paddingX + nodeSettings.strokeWidth + nodeSettings.bboxPadding);
 }
 

diff --git a/client/src/components/overlays/FeatureCallout.js b/client/src/components/overlays/FeatureCallout.js
@@ -4,7 +4,7 @@ import {getSetting} from '../../store/settings';
 import contextualMenuItems from '../contextualMenuItems';
 import {CommandBar} from 'office-ui-fabric-react/lib/CommandBar';
 import PropTypes from 'prop-types';
-import {FeatureModelType} from '../../types';
+import {FeatureModelType, layoutTypes} from '../../types';
 import {LayoutType, SettingsType} from '../../types';
 
 class FeatureCallout extends React.Component {
@@ -31,7 +31,7 @@ class FeatureCallout extends React.Component {
                      gapSpace={gapSpace}
                      calloutWidth={width}
                      directionalHint={
-                         this.props.featureDiagramLayout === 'verticalTree'
+                         this.props.featureDiagramLayout === layoutTypes.verticalTree
                              ? DirectionalHint.bottomCenter
                              : DirectionalHint.rightCenter}>
                 <div className="callout">

diff --git a/client/src/components/overlays/FeatureContextualMenu.js b/client/src/components/overlays/FeatureContextualMenu.js
@@ -4,7 +4,7 @@ import {ContextualMenu, ContextualMenuItemType} from 'office-ui-fabric-react/lib
 import contextualMenuItems from '../contextualMenuItems';
 import {getSetting} from '../../store/settings';
 import PropTypes from 'prop-types';
-import {FeatureModelType} from '../../types';
+import {FeatureModelType, layoutTypes} from '../../types';
 import {LayoutType, SettingsType} from '../../types';
 
 export const selectMultipleFeaturesContextualMenuItems = (selectedFeatureNames, onSelectAllFeatures, onDeselectAllFeatures, featureModel) => [
@@ -42,7 +42,7 @@ class FeatureContextualMenu extends React.Component {
                 isBeakVisible={!isSelectMultipleFeatures}
                 gapSpace={isSelectMultipleFeatures ? 2 * gapSpace : gapSpace}
                 directionalHint={
-                    this.props.featureDiagramLayout === 'verticalTree'
+                    this.props.featureDiagramLayout === layoutTypes.verticalTree
                         ? DirectionalHint.bottomCenter
                         : DirectionalHint.rightCenter}
                 items={isSelectMultipleFeatures

diff --git a/client/src/components/overlays/SettingsPanel.js b/client/src/components/overlays/SettingsPanel.js
@@ -10,7 +10,7 @@ import {DialogContextualMenu} from '../../helpers/Dialog';
 import {DefaultButton} from 'office-ui-fabric-react/lib/Button';
 import PropTypes from 'prop-types';
 import exact from 'prop-types-exact';
-import {LayoutType, SettingsType} from '../../types';
+import {LayoutType, layoutTypes, SettingsType} from '../../types';
 
 const getLabel = path => i18n.t('panels.settingsPanel.labels', path);
 
@@ -182,7 +182,7 @@ class SettingsPanel extends React.Component {
                     path="featureDiagram.font.size"
                     min={5} max={50} suffix=" px"/>
 
-                {(featureDiagramLayout === 'verticalTree' || featureDiagramLayout === 'horizontalTree') &&
+                {(featureDiagramLayout === layoutTypes.verticalTree || featureDiagramLayout === layoutTypes.horizontalTree) &&
                 <React.Fragment>
                     <Setting.Toggle
                         {...props}
@@ -234,7 +234,7 @@ class SettingsPanel extends React.Component {
                         {...props}
                         paths={['featureDiagram.treeLayout.link.stroke']}/>
 
-                    {featureDiagramLayout === 'verticalTree'
+                    {featureDiagramLayout === layoutTypes.verticalTree
                         ? <React.Fragment>
                             <h4>{i18n.t('panels.settingsPanel.headings.verticalTree')}</h4>
                             <Setting.SpinButton
@@ -257,7 +257,7 @@ class SettingsPanel extends React.Component {
                                 min={0} max={50} step={0.5} suffix=" px"/>
                         </React.Fragment>
 
-                        : featureDiagramLayout === 'horizontalTree'
+                        : featureDiagramLayout === layoutTypes.horizontalTree
                             ? <React.Fragment>
                                 <h4>{i18n.t('panels.settingsPanel.headings.horizontalTree')}</h4>
                                 <Setting.SpinButton

diff --git a/client/src/constants.js b/client/src/constants.js
@@ -1,4 +1,5 @@
 import {defaultSettings} from './store/settings';
+import {layoutTypes} from './types';
 
 const constants = {
     panels: {
@@ -14,7 +15,7 @@ const constants = {
             },
             settings: defaultSettings,
             ui: {
-                featureDiagramLayout: 'verticalTree',
+                featureDiagramLayout: layoutTypes.verticalTree,
                 isSelectMultipleFeatures: false,
                 selectedFeatureNames: [],
                 overlay: null,