made tablebox row height a css variable. fixed panmode so that left drag selects w/ marquee and two finger vertical pan isn't clamped.

6 files changed, 13 insertions, 8 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 676e96714..3a8e8f2ef 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1082,7 +1082,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             case freeformScrollMode.Pan:
                 // if ctrl is selected then zoom
                 if (!e.ctrlKey && this.props.isContentActive(true)) {
-                    this.scrollPan({ deltaX: -e.deltaX, deltaY: e.shiftKey ? 0 : -Math.max(-1, Math.min(1, e.deltaY)) });
+                    this.scrollPan({ deltaX: -e.deltaX, deltaY: e.shiftKey ? 0 : -e.deltaY });
                     break;
                 }
             default:
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 4c502021d..a6a3280eb 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -6,10 +6,9 @@ import { Id } from '../../../../fields/FieldSymbols';
 import { InkData, InkField, InkTool } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
 import { RichTextField } from '../../../../fields/RichTextField';
-import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField';
-import { Cast, DocCast, FieldValue, NumCast, StrCast } from '../../../../fields/Types';
+import { Cast, FieldValue, NumCast, StrCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
-import { distributeAcls, GetEffectiveAcl, SharingPermissions } from '../../../../fields/util';
+import { GetEffectiveAcl } from '../../../../fields/util';
 import { intersectRect, lightOrDark, returnFalse, Utils } from '../../../../Utils';
 import { CognitiveServices } from '../../../cognitive_services/CognitiveServices';
 import { Docs, DocumentOptions, DocUtils } from '../../../documents/Documents';
@@ -24,10 +23,10 @@ import { pasteImageBitmap } from '../../nodes/WebBoxRenderer';
 import { PreviewCursor } from '../../PreviewCursor';
 import { SubCollectionViewProps } from '../CollectionSubView';
 import { TabDocView } from '../TabDocView';
-import { TreeView } from '../TreeView';
 import { MarqueeOptionsMenu } from './MarqueeOptionsMenu';
 import './MarqueeView.scss';
 import React = require('react');
+import { freeformScrollMode } from '../../../util/SettingsManager';
 
 interface MarqueeViewProps {
     getContainerTransform: () => Transform;
@@ -223,7 +222,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
         if (!(e.nativeEvent as any).marqueeHit) {
             (e.nativeEvent as any).marqueeHit = true;
             // allow marquee if right click OR alt+left click OR in adding presentation slide & left key drag mode
-            if (e.button === 2 || (e.button === 0 && e.altKey)) {
+            if (e.button === 2 || (e.button === 0 && (e.altKey || Doc.UserDoc().freeformScrollMode === freeformScrollMode.Pan))) {
                 // if (e.altKey || (MarqueeView.DragMarquee && this.props.active(true))) {
                 this.setPreviewCursor(e.clientX, e.clientY, true, false, this.props.Document);
                 // (!e.altKey) && e.stopPropagation(); // bcz: removed so that you can alt-click on button in a collection to switch link following behaviors.
diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss
index ddd99c836..20ccd9ebd 100644
--- a/src/client/views/global/globalCssVariables.scss
+++ b/src/client/views/global/globalCssVariables.scss
@@ -74,6 +74,8 @@ $CAROUSEL3D_CENTER_SCALE: 1.3;
 $CAROUSEL3D_SIDE_SCALE: 0.6;
 $CAROUSEL3D_TOP: 15;
 
+$DATA_VIZ_TABLE_ROW_HEIGHT: 30;
+
 :export {
     contextMenuZindex: $contextMenu-zindex;
     SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH;
@@ -91,4 +93,5 @@ $CAROUSEL3D_TOP: 15;
     CAROUSEL3D_CENTER_SCALE: $CAROUSEL3D_CENTER_SCALE;
     CAROUSEL3D_SIDE_SCALE: $CAROUSEL3D_SIDE_SCALE;
     CAROUSEL3D_TOP: $CAROUSEL3D_TOP;
+    DATA_VIZ_TABLE_ROW_HEIGHT: $DATA_VIZ_TABLE_ROW_HEIGHT;
 }
diff --git a/src/client/views/global/globalCssVariables.scss.d.ts b/src/client/views/global/globalCssVariables.scss.d.ts
index efb702564..3db498e77 100644
--- a/src/client/views/global/globalCssVariables.scss.d.ts
+++ b/src/client/views/global/globalCssVariables.scss.d.ts
@@ -15,6 +15,7 @@ interface IGlobalScss {
     CAROUSEL3D_CENTER_SCALE: string;
     CAROUSEL3D_SIDE_SCALE: string;
     CAROUSEL3D_TOP: string;
+    DATA_VIZ_TABLE_ROW_HEIGHT: string;
 }
 declare const globalCssVariables: IGlobalScss;
 
diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index 3072d0907..a6ce0b88c 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -1,3 +1,4 @@
+@import '../../../global/globalCssVariables';
 .chart-container {
     display: flex;
     flex-direction: column;
@@ -103,7 +104,7 @@
     margin-right: 10px;
     margin-bottom: 0;
     tr td {
-        height: 40px !important; // bcz: hack.  you can't set a <tr> height directly, but you can set the height of all of it's <td>s.  So this is the height of a tableBox row.
+        height: $DATA_VIZ_TABLE_ROW_HEIGHT !important; // bcz: hack.  you can't set a <tr> height directly, but you can set the height of all of it's <td>s.  So this is the height of a tableBox row.
         padding: 0 !important;
         vertical-align: middle !important;
     }
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index b8f65cb7d..8f16df1dc 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -10,6 +10,7 @@ import { emptyFunction, setupMoveUpEvents, Utils } from '../../../../../Utils';
 import { DragManager } from '../../../../util/DragManager';
 import { DocumentView } from '../../DocumentView';
 import { DataVizView } from '../DataVizBox';
+import { DATA_VIZ_TABLE_ROW_HEIGHT } from '../../../global/globalCssVariables.scss';
 import './Chart.scss';
 
 interface TableBoxProps {
@@ -198,7 +199,7 @@ export class TableBox extends React.Component<TableBoxProps> {
                                     this._tableHeight = r?.getBoundingClientRect().height ?? 0;
                                 }
                             })}>
-                            <div style={{ height: this.startID * 40 }} />
+                            <div style={{ height: this.startID * Number(DATA_VIZ_TABLE_ROW_HEIGHT) }} />
                             <thead>
                                 <tr>
                                     {this.columns.map(col => (