diff options
Diffstat (limited to 'src')
6 files changed, 109 insertions, 97 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 21b6bfac5..04a948a27 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -123,7 +123,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { return this.selectedDoc?.type === DocumentType.INK; } @computed get isStack() { - return this.selectedDoc?.type_collection === CollectionViewType.Stacking; + return [CollectionViewType.Stacking, CollectionViewType.NoteTaking].includes(this.selectedDoc?.type_collection as any); } rtfWidth = () => (!this.selectedDoc ? 0 : Math.min(this.selectedDoc?.[Width](), this.props.width - 20)); diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 53a42d2a6..a69049b59 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -1,10 +1,10 @@ import React = require('react'); import { CursorProperty } from 'csstype'; -import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; +import { action, computed, IReactionDisposer, observable, reaction, trace } from 'mobx'; import { observer } from 'mobx-react'; import { Doc, Field, Opt } from '../../../fields/Doc'; import { DocData, Height, Width } from '../../../fields/DocSymbols'; -import { Id } from '../../../fields/FieldSymbols'; +import { Copy, Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; @@ -93,7 +93,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { // we use availableWidth to convert from a percentage to a pixel count. @computed get availableWidth() { const numDividers = this.numGroupColumns - 1; - return this.maxColWidth - numDividers * this.DividerWidth; + return this.maxColWidth - numDividers * this.DividerWidth - 2 * NumCast(this.layoutDoc.xMargin); } // children is passed as a prop to the NoteTakingField, which uses this function @@ -216,7 +216,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { return this.props.styleProvider?.(doc, props, property); }; - isContentActive = () => this.props.isSelected() || this.props.isContentActive(); + isContentActive = () => this.props.isContentActive(); blockPointerEventsWhenDragging = () => (this.docsDraggedRowCol.length ? 'none' : undefined); // getDisplayDoc returns the rules for displaying a document in this view (ie. DocumentView) @@ -521,6 +521,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { this.observer.observe(ref); } }} + PanelWidth={this.props.PanelWidth} select={this.props.select} addDocument={this.addDocument} chromeHidden={this.chromeHidden} @@ -589,6 +590,8 @@ export class CollectionNoteTakingView extends CollectionSubView() { const rightHeader = this.colHeaderData[colIndex + 1]; leftHeader.setWidth(leftHeader.width + movementX / this.availableWidth); rightHeader.setWidth(rightHeader.width - movementX / this.availableWidth); + const headers = Cast(this.dataDoc[this.fieldKey + '_columnHeaders'], listSpec(SchemaHeaderField), null); + headers.splice(headers.indexOf(leftHeader), 1, leftHeader[Copy]()); }; // renderedSections returns a list of all of the JSX elements used (columns and dividers). If the view @@ -596,17 +599,15 @@ export class CollectionNoteTakingView extends CollectionSubView() { // allows the user to adjust the column widths. @computed get renderedSections() { TraceMobx(); - const entries = Array.from(this.Sections.entries()); - const sections = entries; - const eles: JSX.Element[] = []; - for (let i = 0; i < sections.length; i++) { - const col = this.sectionNoteTaking(sections[i][0], sections[i][1]); - eles.push(col); - if (i < sections.length - 1) { - eles.push(<CollectionNoteTakingViewDivider key={`divider${i}`} index={i} setColumnStartXCoords={this.setColumnStartXCoords} xMargin={this.xMargin} />); - } - } - return eles; + const sections = Array.from(this.Sections.entries()); + return sections.map((sec, i) => ( + <> + {this.sectionNoteTaking(sec[0], sec[1])} + {i === sections.length - 1 ? null : ( // + <CollectionNoteTakingViewDivider key={`divider${i}`} isContentActive={this.isContentActive} index={i} setColumnStartXCoords={this.setColumnStartXCoords} xMargin={this.xMargin} /> + )} + </> + )); } @computed get nativeWidth() { @@ -621,7 +622,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { } @computed get backgroundEvents() { - return this.props.isContentActive() === false ? 'none' : undefined; + return this.isContentActive() === false ? 'none' : undefined; } observer: any; @@ -636,7 +637,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { style={{ overflowY: this.props.isContentActive() ? 'auto' : 'hidden', background: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor), - pointerEvents: this.backgroundEvents ? 'all' : undefined, + pointerEvents: this.backgroundEvents, }} onScroll={action(e => (this._scroll = e.currentTarget.scrollTop))} onPointerLeave={action(e => (this.docsDraggedRowCol.length = 0))} diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx index 3286d60bd..52cc21903 100644 --- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx @@ -1,13 +1,13 @@ import React = require('react'); import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable } from 'mobx'; +import { action, computed, observable, trace } from 'mobx'; import { observer } from 'mobx-react'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { Copy, Id } from '../../../fields/FieldSymbols'; import { RichTextField } from '../../../fields/RichTextField'; import { listSpec } from '../../../fields/Schema'; import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; -import { Cast } from '../../../fields/Types'; +import { Cast, NumCast } from '../../../fields/Types'; import { ImageField } from '../../../fields/URLField'; import { TraceMobx } from '../../../fields/util'; import { returnEmptyString } from '../../../Utils'; @@ -50,6 +50,7 @@ interface CSVFieldColumnProps { maxColWidth: number; dividerWidth: number; availableWidth: number; + PanelWidth: () => number; } /** @@ -62,9 +63,9 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu // columnWidth returns the width of a column in absolute pixels @computed get columnWidth() { - if (!this.props.colHeaderData || !this.props.headingObject || this.props.colHeaderData.length === 1) return '100%'; + if (!this.props.colHeaderData || !this.props.headingObject || this.props.colHeaderData.length === 1) return `${(this.props.availableWidth / this.props.PanelWidth()) * 100}%`; const i = this.props.colHeaderData.indexOf(this.props.headingObject); - return this.props.colHeaderData[i].width * 100 + '%'; + return ((this.props.colHeaderData[i].width * this.props.availableWidth) / this.props.PanelWidth()) * 100 + '%'; } private dropDisposer?: DragManager.DragDropDisposer; @@ -297,6 +298,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu style={{ width: this.columnWidth, background: this._background, + marginLeft: this.props.headings().findIndex((h: any) => h[0] === this.props.headingObject) === 0 ? NumCast(this.props.Document.xMargin) : 0, }} ref={this.createColumnDropRef} onPointerEnter={this.pointerEntered} diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx index a1309b11f..af822d917 100644 --- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx @@ -1,4 +1,5 @@ -import { action, observable } from 'mobx'; +import { action, observable, trace } from 'mobx'; +import { observer } from 'mobx-react'; import * as React from 'react'; import { emptyFunction, setupMoveUpEvents } from '../../../Utils'; import { UndoManager } from '../../util/UndoManager'; @@ -7,6 +8,7 @@ interface DividerProps { index: number; xMargin: number; setColumnStartXCoords: (movementX: number, colIndex: number) => void; + isContentActive: () => boolean | undefined; } /** @@ -14,24 +16,26 @@ interface DividerProps { * which only appear when there is more than 1 column in CollectionNoteTakingView. Dividers * are two simple vertical lines that allow the user to alter the widths of CollectionNoteTakingViewColumns. */ +@observer export class CollectionNoteTakingViewDivider extends React.Component<DividerProps> { @observable private isHoverActive = false; @observable private isResizingActive = false; @action private registerResizing = (e: React.PointerEvent<HTMLDivElement>) => { - const batch = UndoManager.StartBatch('resizing'); + let batch: UndoManager.Batch | undefined; setupMoveUpEvents( this, e, (e, down, delta) => { + if (!batch) batch = UndoManager.StartBatch('resizing'); this.props.setColumnStartXCoords(delta[0], this.props.index); return false; }, action(() => { this.isResizingActive = false; this.isHoverActive = false; - batch.end(); + batch?.end(); }), emptyFunction ); @@ -46,6 +50,7 @@ export class CollectionNoteTakingViewDivider extends React.Component<DividerProp display: 'flex', alignItems: 'center', cursor: 'col-resize', + pointerEvents: this.props.isContentActive() ? 'all' : 'none', }} onPointerEnter={action(() => (this.isHoverActive = true))} onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}> diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx index 273e609ca..868b1140d 100644 --- a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx +++ b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx @@ -1,12 +1,12 @@ -import * as React from "react"; -import { observer } from "mobx-react"; -import { observable, action } from "mobx"; -import { Doc } from "../../../../fields/Doc"; -import { NumCast, StrCast } from "../../../../fields/Types"; -import { DimUnit } from "./CollectionMulticolumnView"; -import { UndoManager } from "../../../util/UndoManager"; -import { StyleProviderFunc } from "../../nodes/DocumentView"; -import { StyleProp } from "../../StyleProvider"; +import * as React from 'react'; +import { observer } from 'mobx-react'; +import { observable, action } from 'mobx'; +import { Doc } from '../../../../fields/Doc'; +import { NumCast, StrCast } from '../../../../fields/Types'; +import { DimUnit } from './CollectionMulticolumnView'; +import { UndoManager } from '../../../util/UndoManager'; +import { StyleProviderFunc } from '../../nodes/DocumentView'; +import { StyleProp } from '../../StyleProvider'; interface ResizerProps { width: number; @@ -31,13 +31,13 @@ export default class ResizeBar extends React.Component<ResizerProps> { this.props.select(false); e.stopPropagation(); e.preventDefault(); - window.removeEventListener("pointermove", this.onPointerMove); - window.removeEventListener("pointerup", this.onPointerUp); - window.addEventListener("pointermove", this.onPointerMove); - window.addEventListener("pointerup", this.onPointerUp); + window.removeEventListener('pointermove', this.onPointerMove); + window.removeEventListener('pointerup', this.onPointerUp); + window.addEventListener('pointermove', this.onPointerMove); + window.addEventListener('pointerup', this.onPointerUp); this.isResizingActive = true; - this._resizeUndo = UndoManager.StartBatch("multcol resizing"); - } + this._resizeUndo = UndoManager.StartBatch('multcol resizing'); + }; private onPointerMove = ({ movementX }: PointerEvent) => { const { toLeft, toRight, columnUnitLength } = this.props; @@ -47,30 +47,30 @@ export default class ResizeBar extends React.Component<ResizerProps> { const unitLength = columnUnitLength(); if (unitLength) { if (toNarrow) { - const scale = StrCast(toNarrow._dimUnit, "*") === DimUnit.Ratio ? unitLength : 1; + const scale = StrCast(toNarrow._dimUnit, '*') === DimUnit.Ratio ? unitLength : 1; toNarrow._dimMagnitude = Math.max(0.05, NumCast(toNarrow._dimMagnitude, 1) - Math.abs(movementX) / scale); } if (toWiden) { - const scale = StrCast(toWiden._dimUnit, "*") === DimUnit.Ratio ? unitLength : 1; + const scale = StrCast(toWiden._dimUnit, '*') === DimUnit.Ratio ? unitLength : 1; toWiden._dimMagnitude = Math.max(0.05, NumCast(toWiden._dimMagnitude, 1) + Math.abs(movementX) / scale); } } - } + }; private get isActivated() { const { toLeft, toRight } = this.props; if (toLeft && toRight) { - if (StrCast(toLeft._dimUnit, "*") === DimUnit.Pixel && StrCast(toRight._dimUnit, "*") === DimUnit.Pixel) { + if (StrCast(toLeft._dimUnit, '*') === DimUnit.Pixel && StrCast(toRight._dimUnit, '*') === DimUnit.Pixel) { return false; } return true; } else if (toLeft) { - if (StrCast(toLeft._dimUnit, "*") === DimUnit.Pixel) { + if (StrCast(toLeft._dimUnit, '*') === DimUnit.Pixel) { return false; } return true; } else if (toRight) { - if (StrCast(toRight._dimUnit, "*") === DimUnit.Pixel) { + if (StrCast(toRight._dimUnit, '*') === DimUnit.Pixel) { return false; } return true; @@ -82,23 +82,25 @@ export default class ResizeBar extends React.Component<ResizerProps> { private onPointerUp = () => { this.isResizingActive = false; this.isHoverActive = false; - window.removeEventListener("pointermove", this.onPointerMove); - window.removeEventListener("pointerup", this.onPointerUp); + window.removeEventListener('pointermove', this.onPointerMove); + window.removeEventListener('pointerup', this.onPointerUp); this._resizeUndo?.end(); this._resizeUndo = undefined; - } + }; render() { - return <div className="multiColumnResizer" - style={{ - width: this.props.width, - backgroundColor: !this.props.isContentActive?.() ? "" : this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor) - }} - onPointerEnter={action(() => this.isHoverActive = true)} - onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))} - > - <div className={"multiColumnResizer-hdl"} onPointerDown={e => this.registerResizing(e)} /> - </div>; + return ( + <div + className="multiColumnResizer" + style={{ + pointerEvents: this.props.isContentActive?.() ? 'all' : 'none', + width: this.props.width, + backgroundColor: !this.props.isContentActive?.() ? '' : this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor), + }} + onPointerEnter={action(() => (this.isHoverActive = true))} + onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}> + <div className={'multiColumnResizer-hdl'} onPointerDown={e => this.registerResizing(e)} /> + </div> + ); } - -}
\ No newline at end of file +} diff --git a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx index 006ef4df6..5a9d6a82c 100644 --- a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx +++ b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx @@ -1,12 +1,12 @@ -import * as React from "react"; -import { observer } from "mobx-react"; -import { observable, action } from "mobx"; -import { Doc } from "../../../../fields/Doc"; -import { NumCast, StrCast } from "../../../../fields/Types"; -import { DimUnit } from "./CollectionMultirowView"; -import { UndoManager } from "../../../util/UndoManager"; -import { StyleProp } from "../../StyleProvider"; -import { StyleProviderFunc } from "../../nodes/DocumentView"; +import * as React from 'react'; +import { observer } from 'mobx-react'; +import { observable, action } from 'mobx'; +import { Doc } from '../../../../fields/Doc'; +import { NumCast, StrCast } from '../../../../fields/Types'; +import { DimUnit } from './CollectionMultirowView'; +import { UndoManager } from '../../../util/UndoManager'; +import { StyleProp } from '../../StyleProvider'; +import { StyleProviderFunc } from '../../nodes/DocumentView'; interface ResizerProps { height: number; @@ -29,13 +29,13 @@ export default class ResizeBar extends React.Component<ResizerProps> { private registerResizing = (e: React.PointerEvent<HTMLDivElement>) => { e.stopPropagation(); e.preventDefault(); - window.removeEventListener("pointermove", this.onPointerMove); - window.removeEventListener("pointerup", this.onPointerUp); - window.addEventListener("pointermove", this.onPointerMove); - window.addEventListener("pointerup", this.onPointerUp); + window.removeEventListener('pointermove', this.onPointerMove); + window.removeEventListener('pointerup', this.onPointerUp); + window.addEventListener('pointermove', this.onPointerMove); + window.addEventListener('pointerup', this.onPointerUp); this.isResizingActive = true; - this._resizeUndo = UndoManager.StartBatch("multcol resizing"); - } + this._resizeUndo = UndoManager.StartBatch('multcol resizing'); + }; private onPointerMove = ({ movementY }: PointerEvent) => { const { toTop: toTop, toBottom: toBottom, columnUnitLength } = this.props; @@ -45,30 +45,30 @@ export default class ResizeBar extends React.Component<ResizerProps> { const unitLength = columnUnitLength(); if (unitLength) { if (toNarrow) { - const scale = StrCast(toNarrow._dimUnit, "*") === DimUnit.Ratio ? unitLength : 1; + const scale = StrCast(toNarrow._dimUnit, '*') === DimUnit.Ratio ? unitLength : 1; toNarrow._dimMagnitude = Math.max(0.05, NumCast(toNarrow._dimMagnitude, 1) - Math.abs(movementY) / scale); } if (toWiden) { - const scale = StrCast(toWiden._dimUnit, "*") === DimUnit.Ratio ? unitLength : 1; + const scale = StrCast(toWiden._dimUnit, '*') === DimUnit.Ratio ? unitLength : 1; toWiden._dimMagnitude = Math.max(0.05, NumCast(toWiden._dimMagnitude, 1) + Math.abs(movementY) / scale); } } - } + }; private get isActivated() { const { toTop, toBottom } = this.props; if (toTop && toBottom) { - if (StrCast(toTop._dimUnit, "*") === DimUnit.Pixel && StrCast(toBottom._dimUnit, "*") === DimUnit.Pixel) { + if (StrCast(toTop._dimUnit, '*') === DimUnit.Pixel && StrCast(toBottom._dimUnit, '*') === DimUnit.Pixel) { return false; } return true; } else if (toTop) { - if (StrCast(toTop._dimUnit, "*") === DimUnit.Pixel) { + if (StrCast(toTop._dimUnit, '*') === DimUnit.Pixel) { return false; } return true; } else if (toBottom) { - if (StrCast(toBottom._dimUnit, "*") === DimUnit.Pixel) { + if (StrCast(toBottom._dimUnit, '*') === DimUnit.Pixel) { return false; } return true; @@ -80,23 +80,25 @@ export default class ResizeBar extends React.Component<ResizerProps> { private onPointerUp = () => { this.isResizingActive = false; this.isHoverActive = false; - window.removeEventListener("pointermove", this.onPointerMove); - window.removeEventListener("pointerup", this.onPointerUp); + window.removeEventListener('pointermove', this.onPointerMove); + window.removeEventListener('pointerup', this.onPointerUp); this._resizeUndo?.end(); this._resizeUndo = undefined; - } + }; render() { - return <div className="multiRowResizer" - style={{ - height: this.props.height, - backgroundColor: !this.props.isContentActive?.() ? "" : this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor) - }} - onPointerEnter={action(() => this.isHoverActive = true)} - onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))} - > - <div className={"multiRowResizer-hdl"} onPointerDown={e => this.registerResizing(e)} /> - </div>; + return ( + <div + className="multiRowResizer" + style={{ + pointerEvents: this.props.isContentActive?.() ? 'all' : 'none', + height: this.props.height, + backgroundColor: !this.props.isContentActive?.() ? '' : this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor), + }} + onPointerEnter={action(() => (this.isHoverActive = true))} + onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}> + <div className={'multiRowResizer-hdl'} onPointerDown={e => this.registerResizing(e)} /> + </div> + ); } - -}
\ No newline at end of file +} |