diff options
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/TableBox.tsx | 8 | ||||
| -rw-r--r-- | src/client/views/nodes/LabelBox.tsx | 32 |
2 files changed, 24 insertions, 16 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index d422a7536..0e766e5f0 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -1,5 +1,5 @@ import { Button, Type } from 'browndash-components'; -import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; +import { action, computed, IReactionDisposer, observable, reaction, trace } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, Field, NumListCast } from '../../../../../fields/Doc'; @@ -12,7 +12,7 @@ import { DocumentView } from '../../DocumentView'; import { DataVizView } from '../DataVizBox'; import './Chart.scss'; //import { DATA_VIZ_TABLE_ROW_HEIGHT } from '../../../global/globalCssVariables.scss'; -const DATA_VIZ_TABLE_ROW_HEIGHT = '30px'; +const DATA_VIZ_TABLE_ROW_HEIGHT = '30'; interface TableBoxProps { Document: Doc; @@ -80,12 +80,14 @@ export class TableBox extends React.Component<TableBoxProps> { return this.props.docView?.()?.props.ScreenToLocalTransform().Scale || 1; } @computed get rowHeight() { + console.log('scale = ' + this.viewScale + ' table = ' + this._tableHeight + ' ids = ' + this._tableDataIds.length); return (this.viewScale * this._tableHeight) / this._tableDataIds.length; } @computed get startID() { return this.rowHeight ? Math.floor(this._scrollTop / this.rowHeight) : 0; } @computed get endID() { + console.log('start = ' + this.startID + ' container = ' + this._tableContainerHeight + ' scale = ' + this.viewScale + ' row = ' + this.rowHeight); return Math.ceil(this.startID + (this._tableContainerHeight * this.viewScale) / (this.rowHeight || 1)); } @action handleScroll = () => { @@ -160,6 +162,8 @@ export class TableBox extends React.Component<TableBoxProps> { }; render() { + console.log(this.endID); + trace(); if (this._tableData.length > 0) { return ( <div diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx index 71f9c000b..f8140af93 100644 --- a/src/client/views/nodes/LabelBox.tsx +++ b/src/client/views/nodes/LabelBox.tsx @@ -84,18 +84,22 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp return this._mouseOver ? StrCast(this.layoutDoc._hoverBackgroundColor) : this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor); } - fitTextToBox = (r: any): NodeJS.Timeout | { - rotateText: null; - fontSizeFactor: number; - minimumFontSize: number; - maximumFontSize: number; - limitingDimension: string; - horizontalAlign: string; - verticalAlign: string; - textAlign: string; - singleLine: boolean; - whiteSpace: string; - } => { + fitTextToBox = ( + r: any + ): + | NodeJS.Timeout + | { + rotateText: null; + fontSizeFactor: number; + minimumFontSize: number; + maximumFontSize: number; + limitingDimension: string; + horizontalAlign: string; + verticalAlign: string; + textAlign: string; + singleLine: boolean; + whiteSpace: string; + } => { const singleLine = BoolCast(this.layoutDoc._singleLine, true); const params = { rotateText: null, @@ -154,9 +158,9 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp paddingBottom: NumCast(this.layoutDoc._yPadding), width: this.props.PanelWidth(), height: this.props.PanelHeight(), - whiteSpace: !(boxParams instanceof NodeJS.Timeout) && boxParams.singleLine ? 'pre' : 'pre-wrap', + whiteSpace: 'singleLine' in boxParams && boxParams.singleLine ? 'pre' : 'pre-wrap', }}> - <span style={{ width: !(boxParams instanceof NodeJS.Timeout) && boxParams.singleLine ? '' : '100%' }} ref={action((r: any) => this.fitTextToBox(r))}> + <span style={{ width: 'singleLine' in boxParams ? '' : '100%' }} ref={action((r: any) => this.fitTextToBox(r))}> {label.startsWith('#') ? null : label.replace(/([^a-zA-Z])/g, '$1\u200b')} </span> </div> |