aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/views/collections/CollectionNoteTakingView.tsx52
-rw-r--r--src/client/views/collections/CollectionNoteTakingViewColumn.tsx39
2 files changed, 32 insertions, 59 deletions
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index f24b98621..1bf5b7d86 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -42,12 +42,10 @@ export type collectionNoteTakingViewProps = {
@observer
export class CollectionNoteTakingView extends CollectionSubView<Partial<collectionNoteTakingViewProps>>() {
- _autoHeightDisposer?: IReactionDisposer;
+ _disposers: { [key: string]: IReactionDisposer } = {};
_masonryGridRef: HTMLDivElement | null = null;
_draggerRef = React.createRef<HTMLDivElement>();
- // _docXfs: { height: () => number, width: () => number, noteTakingDocTransform: () => Transform }[] = [];
- // @observable _docsByColumnHeader = new Map<string, Doc[]>();
- //TODO: need to make sure that we save the mapping
+ @observable columnStartXCoords: number[] = [];
@observable docsDraggedRowCol: number[] = [];
@observable _cursor: CursorProperty = 'grab';
@observable _scroll = 0; // used to force the document decoration to update when scrolling
@@ -86,7 +84,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
@computed get numGroupColumns() {
return this.columnHeaders.length;
}
- @observable columnStartXCoords: number[] = [];
@computed get PanelWidth() {
return this.props.PanelWidth();
}
@@ -100,11 +97,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
super(props);
if (this.columnHeaders === undefined) {
this.dataDoc.columnHeaders = new List<SchemaHeaderField>([new SchemaHeaderField('New Column')]);
- this.columnStartXCoords = [0];
// add all of the docs that have not been added to a column to this new column
} else {
- const numHeaders = this.columnHeaders.length;
- this.resizeColumns(numHeaders);
+ this.resizeColumns(this.columnHeaders.length);
}
}
@@ -126,7 +121,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
// [CAVEATS] (1) keep track of the offsetting
// (2) documentView gets unmounted as you remove it from the list
- get Sections() {
+ @computed get Sections() {
+ TraceMobx();
const columnHeaders = this.columnHeaders;
let docs = this.childDocs;
const sections = new Map<SchemaHeaderField, Doc[]>(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []]));
@@ -169,16 +165,21 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
componentDidMount() {
super.componentDidMount?.();
document.addEventListener('pointerup', this.removeDocDragHighlight, true);
- this._autoHeightDisposer = reaction(
+ this._disposers.autoHeight = reaction(
() => this.layoutDoc._autoHeight,
autoHeight => autoHeight && this.props.setHeight?.(Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), this.headerMargin + Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace('px', ''))))))
);
+ this._disposers.headers = reaction(
+ () => this.columnHeaders.slice(),
+ headers => this.resizeColumns(headers.length),
+ { fireImmediately: true }
+ );
}
componentWillUnmount() {
document.removeEventListener('pointerup', this.removeDocDragHighlight, true);
super.componentWillUnmount();
- this._autoHeightDisposer?.();
+ Object.keys(this._disposers).forEach(key => this._disposers[key]());
}
@action
@@ -315,9 +316,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
// how to get the width of a document. Currently returns the width of the column (minus margins)
// if a note doc. Otherwise, returns the normal width (for graphs, images, etc...)
getDocWidth(d: Doc) {
- const heading = (d[this.notetakingCategoryField] as object) ?? 'unset';
- const castedSectionValue = heading.toString();
- const existingHeader = this.columnHeaders.find(sh => sh.heading === castedSectionValue);
+ const heading = StrCast(d[this.notetakingCategoryField], 'unset');
+ const existingHeader = this.columnHeaders.find(sh => sh.heading === heading);
const colStartXCoords = this.columnStartXCoords;
if (!existingHeader) {
return 1000;
@@ -352,6 +352,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
}
// called when a column is either added or deleted. This function creates n evenly spaced columns
+ @action
resizeColumns = (n: number) => {
const totalWidth = this.PanelWidth;
const dividerWidth = 32;
@@ -368,8 +369,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
// This function is used to preview where a document will drop in a column once a drag is complete.
@action
- onPointerOver = (ex: number, ey: number) => {
- if (this.childDocList) {
+ onPointerOver = (buttons: boolean, ex: number, ey: number) => {
+ if (this.childDocList && buttons) {
// get the current docs for the column based on the mouse's x coordinate
// will use again later, which is why we're saving as local
const xCoord = this.props.ScreenToLocalTransform().transformPoint(ex, ey)[0] - 2 * this.gridGap;
@@ -500,7 +501,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
onExternalDrop = async (e: React.DragEvent): Promise<void> => {
const targInd = this.docsDraggedRowCol?.[0] || 0;
super.onExternalDrop(e, {}, docus => {
- this.onPointerOver(e.clientX, e.clientY);
+ this.onPointerOver(true, e.clientX, e.clientY);
docus?.map(doc => this.addDocument(doc));
const newDoc = this.childDocs.lastElement();
const docs = this.childDocList;
@@ -515,6 +516,11 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
headings = () => Array.from(this.Sections);
refList: any[] = [];
+ editableViewProps = () => ({
+ GetValue: () => '',
+ SetValue: this.addGroup,
+ contents: '+ New Column',
+ });
sectionNoteTaking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => {
const type = 'number';
@@ -544,7 +550,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
columnHeaders={this.columnHeaders}
Document={this.props.Document}
DataDoc={this.props.DataDoc}
- resizeColumns={this.resizeColumns.bind(this)}
+ resizeColumns={this.resizeColumns}
renderChildren={this.children}
numGroupColumns={this.numGroupColumns}
gridGap={this.gridGap}
@@ -561,11 +567,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
type={type}
createDropTarget={this.createDashEventsTarget}
screenToLocalTransform={this.props.ScreenToLocalTransform}
- editableViewProps={{
- GetValue: () => '',
- SetValue: this.addGroup,
- contents: '+ New Column',
- }}
+ editableViewProps={this.editableViewProps}
/>
);
};
@@ -622,7 +624,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
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 + 1} setColumnStartXCoords={this.setColumnStartXCoords.bind(this)} xMargin={this.xMargin} />);
+ eles.push(<CollectionNoteTakingViewDivider key={`divider${i}`} index={i + 1} setColumnStartXCoords={this.setColumnStartXCoords} xMargin={this.xMargin} />);
}
}
return eles;
@@ -705,7 +707,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
}}
onScroll={action(e => (this._scroll = e.currentTarget.scrollTop))}
onPointerLeave={action(e => (this.docsDraggedRowCol.length = 0))}
- onPointerOver={e => this.onPointerOver(e.clientX, e.clientY)}
+ onPointerOver={e => this.onPointerOver(e.buttons ? true : false, e.clientX, e.clientY)}
onDrop={this.onExternalDrop.bind(this)}
onContextMenu={this.onContextMenu}
onWheel={e => this.props.isContentActive(true) && e.stopPropagation()}>
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index 8452d895f..9b7518c60 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -47,7 +47,7 @@ interface CSVFieldColumnProps {
screenToLocalTransform: () => Transform;
observeHeight: (myref: any) => void;
unobserveHeight: (myref: any) => void;
- editableViewProps: any;
+ editableViewProps: () => any;
resizeColumns: (n: number) => void;
columnStartXCoords: number[];
PanelWidth: number;
@@ -112,7 +112,6 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
@action
headingChanged = (value: string, shiftDown?: boolean) => {
- console.log('HEADING CH');
const castedValue = this.getValue(value);
if (castedValue) {
if (this.props.columnHeaders?.map(i => i.heading).indexOf(castedValue.toString()) !== -1) {
@@ -144,43 +143,17 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
return this.props.addDocument?.(newDoc) || false;
};
+ @undoBatch
@action
deleteColumn = () => {
- if (!this.props.columnHeaders) {
- return;
- }
- if (this.props.headingObject) {
+ if (this.props.columnHeaders && this.props.headingObject) {
const index = this.props.columnHeaders.indexOf(this.props.headingObject);
- const newIndex = index == 0 ? 1 : index - 1;
- const newHeader = this.props.columnHeaders[newIndex];
- this.props.docList.forEach(d => (d[this.props.pivotField] = newHeader.heading.toString()));
+ this.props.docList.forEach(d => (d[this.props.pivotField] = 'unset'));
this.props.columnHeaders.splice(index, 1);
this.props.resizeColumns(this.props.columnHeaders.length);
}
};
- headerDown = (e: React.PointerEvent<HTMLDivElement>) => setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction);
-
- //TODO: I think this is where I'm supposed to edit stuff
- startDrag = (e: PointerEvent, down: number[], delta: number[]) => {
- console.log('in startDrag');
- // is MakeAlias a way to make a copy of a doc without rendering it?
- const alias = Doc.MakeAlias(this.props.Document);
- // alias._width = this.props.columnWidth / (this.props.columnHeaders?.length || 1);
- alias._width = this.columnWidth;
- alias._pivotField = undefined;
- let value = this.getValue(this._heading);
- value = typeof value === 'string' ? `"${value}"` : value;
- alias.viewSpecScript = ScriptField.MakeFunction(`doc.${this.props.pivotField} === ${value}`, { doc: Doc.name });
- if (alias.viewSpecScript) {
- const options = { hideSource: false };
- DragManager.StartDocumentDrag([this._headerRef.current!], new DragManager.DocumentDragData([alias]), e.clientX, e.clientY, options);
- console.log('in startDrag');
- return true;
- }
- return false;
- };
-
menuCallback = (x: number, y: number) => {
ContextMenu.Instance.clearItems();
const layoutItems: ContextMenuProps[] = [];
@@ -256,7 +229,6 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
@computed get innards() {
TraceMobx();
- console.log('INNARD START');
const key = this.props.pivotField;
const heading = this._heading;
const columnYMargin = this.props.headingObject ? 0 : this.props.yMargin;
@@ -274,7 +246,6 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
}}>
<div
className="collectionNoteTakingView-sectionHeader-subCont"
- onPointerDown={this.headerDown}
title={evContents === `No Value` ? `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ''}
style={{ background: evContents !== `No Value` ? this._color : 'inherit' }}>
<EditableView GetValue={() => evContents} SetValue={this.headingChanged} contents={evContents} oneLine={true} />
@@ -314,7 +285,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
<EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} textCallback={this.textCallback} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} />
</div>
<div key={`${this.props.Document[Id]}-addGroup`} className="collectionNoteTakingView-addDocumentButton">
- <EditableView {...this.props.editableViewProps} />
+ <EditableView {...this.props.editableViewProps()} />
</div>
{this.props.columnHeaders?.length && this.props.columnHeaders.length > 1 && (
<button className="collectionNoteTakingView-sectionDelete" onClick={this.deleteColumn}>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 13:05:40 +0000