aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorljungster <parkerljung@gmail.com>2022-08-12 14:43:41 -0700
committerljungster <parkerljung@gmail.com>2022-08-12 14:43:41 -0700
commit6f7a94b0fa65729f03b49e8aecf9eb3c8a2461ff (patch)
tree2741a689af6ba514227ecc2aa5ac5229635465ef /src
parent08ac7a2006027147ce15f18433318ae3cf789c9f (diff)
sizing works but undo redo no longer does
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/CollectionNoteTakingView.tsx40
-rw-r--r--src/client/views/collections/CollectionNoteTakingViewColumn.tsx23
2 files changed, 40 insertions, 23 deletions
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index b3e154dac..0aa1b6839 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -72,7 +72,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
// return 3 2 1 4 56
// }
if (needsUnsetCategory) {
- columnHeaders.push(new SchemaHeaderField('unset', undefined, undefined, this.maxColWdith));
+ columnHeaders.push(new SchemaHeaderField('unset', undefined, undefined, 1));
}
return columnHeaders;
}
@@ -103,16 +103,20 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
@computed get PanelWidth() {
return this.props.PanelWidth();
}
- @computed get maxColWdith() {
+ @computed get maxColWidth() {
return this.props.PanelWidth() - 2 * this.xMargin;
}
+ @computed get availableWidth() {
+ const numDividers = this.columnHeaders.length - 1;
+ return this.maxColWidth - numDividers * this.dividerWidth;
+ }
// If the user has not yet created any docs (in another view), this will create a single column. Otherwise,
// it will adjust according to the
constructor(props: any) {
super(props);
if (this.columnHeaders === undefined) {
- this.dataDoc.columnHeaders = new List<SchemaHeaderField>([new SchemaHeaderField('New Column', undefined, undefined, this.maxColWdith)]);
+ this.dataDoc.columnHeaders = new List<SchemaHeaderField>([new SchemaHeaderField('New Column', undefined, undefined, 1)]);
// add all of the docs that have not been added to a column to this new column
}
}
@@ -186,7 +190,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
// this._disposers.headers = reaction(
// () => this.columnHeaders.slice(),
// // TODO: is this correct?
- // headers => this.resizeColumns(headers.length, true),
+ // headers => this.resizeColumns(headers.length, false),
// { fireImmediately: true }
// );
}
@@ -334,7 +338,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
const heading = !d[this.notetakingCategoryField] ? 'unset' : Field.toString(d[this.notetakingCategoryField] as Field);
const existingHeader = this.columnHeaders.find(sh => sh.heading === heading);
const existingWidth = existingHeader?.width ? existingHeader.width : 0;
- const maxWidth = existingWidth > 0 ? existingWidth : this.maxColWdith - 2 * this.xMargin;
+ const maxWidth = existingWidth > 0 ? existingWidth * this.availableWidth - 2 * this.xMargin : this.maxColWidth - 2 * this.xMargin;
// const index = existingHeader ? this.columnHeaders.indexOf(existingHeader) : 0;
// const endColValue = index === this.columnHeaders.length - 1 || index > this.columnStartXCoords.length - 1 ? this.PanelWidth : this.columnStartXCoords[index + 1];
// const maxWidth = index > this.columnStartXCoords.length - 1 ? this.PanelWidth : endColValue - this.columnStartXCoords[index] - 3 * this.xMargin;
@@ -367,10 +371,14 @@ 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, isAdd: boolean) => {
- let scaleFactor = isAdd ? Math.floor((n - 1)) / n : Math.floor((n + 1) / n);
- if (isAdd && n == 1) scaleFactor = 1;
+ if (n == 1) {
+ this.columnHeaders[0].setWidth(1);
+ return;
+ }
+ let scaleFactor = isAdd ? (n - 1) / n : (n + 1) / n;
+ // if (isAdd && n == 1) scaleFactor = 1;
this.columnHeaders.forEach(h => {
- h.width < 0 ? h.setWidth((this.maxColWdith - this.dividerWidth) / n) : h.setWidth(h.width * scaleFactor);
+ h.width < 0 ? h.setWidth(1 / n) : h.setWidth(h.width * scaleFactor);
});
// if we're adding, need to
@@ -424,7 +432,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
let colStartXCoord = 0;
for (let i = 0; i < numColumns; i++) {
coords.push(colStartXCoord);
- colStartXCoord += this.columnHeaders[i].width + this.dividerWidth;
+ colStartXCoord += this.columnHeaders[i].width * this.availableWidth + this.dividerWidth;
}
coords.push(this.PanelWidth);
@@ -600,13 +608,15 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
columnHeaders={this.columnHeaders}
Document={this.props.Document}
DataDoc={this.props.DataDoc}
- // resizeColumns={this.resizeColumns}
+ resizeColumns={this.resizeColumns}
renderChildren={this.children}
numGroupColumns={this.numGroupColumns}
gridGap={this.gridGap}
pivotField={this.notetakingCategoryField}
// columnStartXCoords={this.columnStartXCoords}
- maxColWidth={this.maxColWdith}
+ dividerWidth={this.dividerWidth}
+ maxColWidth={this.maxColWidth}
+ availableWidth={this.availableWidth}
PanelWidth={this.PanelWidth}
key={heading?.heading ?? ''}
headings={this.headings}
@@ -628,9 +638,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
@undoBatch
addGroup = (value: string) => {
const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null);
- const colWidth = (this.PanelWidth - this.numGroupColumns * this.dividerWidth) / (this.numGroupColumns + 1);
+ // const colWidth = (this.PanelWidth - this.numGroupColumns * this.dividerWidth) / (this.numGroupColumns + 1);
this.resizeColumns(this.numGroupColumns + 1, true);
- return value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, colWidth)) ? true : false;
+ return value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, 1 / (this.numGroupColumns + 1))) ? true : false;
};
sortFunc = (a: [SchemaHeaderField, Doc[]], b: [SchemaHeaderField, Doc[]]): 1 | -1 => {
@@ -656,8 +666,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
setColumnStartXCoords = (movementX: number, colIndex: number) => {
const leftHeader = this.columnHeaders[colIndex];
const rightHeader = this.columnHeaders[colIndex + 1];
- leftHeader.setWidth(leftHeader.width + movementX);
- rightHeader.setWidth(rightHeader.width - movementX);
+ leftHeader.setWidth(leftHeader.width + movementX / this.availableWidth);
+ rightHeader.setWidth(rightHeader.width - movementX / this.availableWidth);
// const coords = [...this.columnStartXCoords];
// coords[colIndex] += movementX;
// this.columnStartXCoords = coords;
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index f58d8e937..8ad684cec 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -51,10 +51,12 @@ interface CSVFieldColumnProps {
unobserveHeight: (myref: any) => void;
//setDraggedCol:(clonedDiv:any, header:SchemaHeaderField, xycoors: )
editableViewProps: () => any;
- // resizeColumns: (n: number) => void;
+ resizeColumns: (n: number, isAdd: boolean) => void;
// columnStartXCoords: number[];
PanelWidth: number;
maxColWidth: number;
+ dividerWidth: number;
+ availableWidth: number;
// docsByColumnHeader: Map<string, Doc[]>
// setDocsForColHeader: (key: string, docs: Doc[]) => void
}
@@ -63,16 +65,22 @@ interface CSVFieldColumnProps {
export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColumnProps> {
@observable private _background = 'inherit';
+ // the "width" property of headers is relative (a percentage of available space)
@computed get columnWidth() {
// base cases
- if (!this.props.columnHeaders || !this.props.headingObject || this.props.columnHeaders.length == 1) {
+ if (!this.props.columnHeaders || !this.props.headingObject) {
return this.props.maxColWidth;
}
- const i = this.props.columnHeaders.indexOf(this.props.headingObject);
- if (i >= 0 && this.props.columnHeaders[i].width > 0) {
- return this.props.columnHeaders[i].width;
+ if (this.props.columnHeaders.length == 1) {
+ // this.props.columnHeaders[0].setWidth(1);
+ return this.props.maxColWidth;
}
- return this.props.maxColWidth;
+ const i = this.props.columnHeaders.indexOf(this.props.headingObject);
+ return this.props.columnHeaders[i].width * this.props.availableWidth;
+ // if (i >= 0 && this.props.columnHeaders[i].width > 0) {
+ // return this.props.columnHeaders[i].width;
+ // }
+ // return this.props.maxColWidth;
// if (i < 0 || i > this.props.columnStartXCoords.length - 1) {
// return this.props.maxColWidth;
// }
@@ -150,7 +158,6 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
return this.props.addDocument?.(newDoc) || false;
};
- @undoBatch
@action
@undoBatch
deleteColumn = () => {
@@ -158,9 +165,9 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
if (columnHeaders && this.props.headingObject) {
const index = columnHeaders.indexOf(this.props.headingObject);
this.props.docList.forEach(d => (d[this.props.pivotField] = 'unset'));
+ this.props.resizeColumns(columnHeaders.length - 1, false)
columnHeaders.splice(index, 1);
}
- // probably need to add something here for sizing purposes
};
menuCallback = (x: number, y: number) => {