From 1638527259a072dfc2ab286bd27bbb1751e8434e Mon Sep 17 00:00:00 2001 From: ljungster Date: Fri, 5 Aug 2022 08:30:35 -0500 Subject: stashing to look at master --- .../views/collections/CollectionNoteTakingView.tsx | 27 ++++++++++++++++++++-- .../collections/CollectionNoteTakingViewColumn.tsx | 4 ++++ 2 files changed, 29 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 9519e9aaa..3e2b8b762 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -74,7 +74,8 @@ export class CollectionNoteTakingView extends CollectionSubView([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 { + } + else { const numHeaders = this.columnHeaders.length this.resizeColumns(numHeaders) } @@ -457,6 +458,27 @@ export class CollectionNoteTakingView extends CollectionSubView { + // if (!this.columnHeaders) { + // return + // } + // if (headingObject) { + // const index = this.columnHeaders.indexOf(headingObject); + // const newIndex = index == 0 ? 1 : index - 1 + // const newHeader = this.columnHeaders[newIndex]; + // docList.forEach(d => d[this.pivotField] = newHeader.heading.toString()) + // // this.props.columnHeaders.splice(index, 1); + // const newHeaders = this.columnHeaders; + // newHeaders.splice(index, 1); + // const test = this.layoutDoc._columnHeaders; + // this.columnHeaders = newHeaders; + // this.resizeColumns(newHeaders.length) + // } + // } + // when dropping outside of the current noteTaking context (like a new tab, freeform view, etc...) @undoBatch @action @@ -554,12 +576,13 @@ export class CollectionNoteTakingView extends CollectionSubView { if (value && this.columnHeaders) { - this.resizeColumns(this.columnHeaders.length + 1) const schemaHdrField = new SchemaHeaderField(value); this.columnHeaders.push(schemaHdrField); DocUtils.addFieldEnumerations(undefined, this.pivotField, [{ title: value, _backgroundColor: "schemaHdrField.color" }]); + this.resizeColumns(this.columnHeaders.length + 1) return true; } return false; diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx index bdcb9c399..0ee5985bb 100644 --- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx @@ -144,6 +144,7 @@ export class CollectionNoteTakingViewColumn extends React.Component { if (!this.props.columnHeaders) { return @@ -154,6 +155,9 @@ export class CollectionNoteTakingViewColumn extends React.Component d[this.props.pivotField] = newHeader.heading.toString()) this.props.columnHeaders.splice(index, 1); + // const newHeaders = this.props.columnHeaders; + // newHeaders.splice(index, 1); + // this.props.columnHeaders = newHeaders; this.props.resizeColumns(this.props.columnHeaders.length) } } -- cgit v1.2.3-70-g09d2 From 92ccfc514a15b03e5a1c0cb7ccbe9c1fe5ce82ad Mon Sep 17 00:00:00 2001 From: ljungster Date: Thu, 11 Aug 2022 07:37:03 -0500 Subject: cc --- package-lock.json | 39 ++++++++++++++++++++++ package.json | 7 ++-- .../collections/CollectionNoteTakingViewColumn.tsx | 19 +++++++---- 3 files changed, 55 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/package-lock.json b/package-lock.json index 3b9cda8bb..6149d9314 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5059,6 +5059,16 @@ "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=", "dev": true }, + "d": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", + "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==", + "dev": true, + "requires": { + "es5-ext": "^0.10.50", + "type": "^1.0.1" + } + }, "d3-array": { "version": "2.12.1", "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", @@ -6208,6 +6218,28 @@ "is-symbol": "^1.0.2" } }, + "es5-ext": { + "version": "0.10.62", + "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz", + "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==", + "dev": true, + "requires": { + "es6-iterator": "^2.0.3", + "es6-symbol": "^3.1.3", + "next-tick": "^1.1.0" + } + }, + "es6-iterator": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz", + "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==", + "dev": true, + "requires": { + "d": "1", + "es5-ext": "^0.10.35", + "es6-symbol": "^3.1.1" + } + }, "es6-promise": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz", @@ -6219,6 +6251,7 @@ "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==", "dev": true, "requires": { + "d": "^1.0.1", "ext": "^1.1.2" } }, @@ -20715,6 +20748,12 @@ "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=" }, + "type": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz", + "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==", + "dev": true + }, "type-check": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", diff --git a/package.json b/package.json index 2e3ef0a07..177d3a5e6 100644 --- a/package.json +++ b/package.json @@ -66,17 +66,17 @@ "@types/prosemirror-view": "^1.23.1", "@types/rc-switch": "^1.9.2", "@types/react": "^18.0.15", - "@types/react-icons": "^3.0.0", - "@types/react-reconciler": "^0.26.4", - "@types/react-transition-group": "^4.4.5", "@types/react-autosuggest": "^9.3.14", "@types/react-color": "^2.17.6", "@types/react-datepicker": "^3.1.8", "@types/react-dom": "^18.0.6", "@types/react-grid-layout": "^1.3.2", + "@types/react-icons": "^3.0.0", "@types/react-measure": "^2.0.8", + "@types/react-reconciler": "^0.26.4", "@types/react-select": "^3.1.2", "@types/react-table": "^6.8.9", + "@types/react-transition-group": "^4.4.5", "@types/request": "^2.48.8", "@types/request-promise": "^4.1.48", "@types/rimraf": "^2.0.5", @@ -84,6 +84,7 @@ "@types/shelljs": "^0.8.11", "@types/socket.io": "^2.1.13", "@types/socket.io-client": "^1.4.36", + "@types/socket.io-parser": "^3.0.0", "@types/typescript": "^2.0.0", "@types/uuid": "^3.4.10", "@types/valid-url": "^1.0.3", diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx index 4286da2e2..f58d8e937 100644 --- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx @@ -51,8 +51,8 @@ interface CSVFieldColumnProps { unobserveHeight: (myref: any) => void; //setDraggedCol:(clonedDiv:any, header:SchemaHeaderField, xycoors: ) editableViewProps: () => any; - resizeColumns: (n: number) => void; - columnStartXCoords: number[]; + // resizeColumns: (n: number) => void; + // columnStartXCoords: number[]; PanelWidth: number; maxColWidth: number; // docsByColumnHeader: Map @@ -69,12 +69,16 @@ export class CollectionNoteTakingViewColumn extends React.Component this.props.columnStartXCoords.length - 1) { - return this.props.maxColWidth; + if (i >= 0 && this.props.columnHeaders[i].width > 0) { + return this.props.columnHeaders[i].width; } - const endColValue = i == this.props.numGroupColumns - 1 ? this.props.PanelWidth : this.props.columnStartXCoords[i + 1]; - // TODO make the math work here. 35 is half of 70, which is the current width of the divider - return endColValue - this.props.columnStartXCoords[i] - 30; + return this.props.maxColWidth; + // if (i < 0 || i > this.props.columnStartXCoords.length - 1) { + // return this.props.maxColWidth; + // } + // const endColValue = i == this.props.numGroupColumns - 1 ? this.props.PanelWidth : this.props.columnStartXCoords[i + 1]; + // // TODO make the math work here. 35 is half of 70, which is the current width of the divider + // return endColValue - this.props.columnStartXCoords[i] - 30; } private dropDisposer?: DragManager.DragDropDisposer; @@ -156,6 +160,7 @@ export class CollectionNoteTakingViewColumn extends React.Component (d[this.props.pivotField] = 'unset')); columnHeaders.splice(index, 1); } + // probably need to add something here for sizing purposes }; menuCallback = (x: number, y: number) => { -- cgit v1.2.3-70-g09d2 From 08ac7a2006027147ce15f18433318ae3cf789c9f Mon Sep 17 00:00:00 2001 From: ljungster Date: Thu, 11 Aug 2022 10:07:43 -0500 Subject: persistent header widths --- .../views/collections/CollectionNoteTakingView.tsx | 84 ++++++++++++++-------- 1 file changed, 53 insertions(+), 31 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 96db23142..b3e154dac 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -45,7 +45,7 @@ export class CollectionNoteTakingView extends CollectionSubView(); // change to relative widths for deleting. change storage from columnStartXCoords to columnHeaders (schemaHeaderFields has a widgth alrady) - @observable columnStartXCoords: number[] = []; // columnHeaders -- SchemaHeaderField -- widht + // @observable columnStartXCoords: number[] = []; // columnHeaders -- SchemaHeaderField -- widht @observable docsDraggedRowCol: number[] = []; @observable _cursor: CursorProperty = 'grab'; @observable _scroll = 0; // used to force the document decoration to update when scrolling @@ -72,7 +72,7 @@ export class CollectionNoteTakingView extends CollectionSubView([new SchemaHeaderField('New Column')]); + this.dataDoc.columnHeaders = new List([new SchemaHeaderField('New Column', undefined, undefined, this.maxColWdith)]); + // add all of the docs that have not been added to a column to this new column } } @@ -179,11 +183,12 @@ export class CollectionNoteTakingView extends CollectionSubView 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 } - ); + // this._disposers.headers = reaction( + // () => this.columnHeaders.slice(), + // // TODO: is this correct? + // headers => this.resizeColumns(headers.length, true), + // { fireImmediately: true } + // ); } componentWillUnmount() { @@ -328,9 +333,11 @@ export class CollectionNoteTakingView extends CollectionSubView sh.heading === heading); - 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; + const existingWidth = existingHeader?.width ? existingHeader.width : 0; + const maxWidth = existingWidth > 0 ? existingWidth : this.maxColWdith - 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; if (d.type === DocumentType.RTF) { return maxWidth; } @@ -359,18 +366,21 @@ export class CollectionNoteTakingView extends CollectionSubView { - const totalWidth = this.PanelWidth; - const dividerWidth = 32; - const totaldividerWidth = (n - 1) * dividerWidth; - const colWidth = (totalWidth - totaldividerWidth) / n; - const newColXCoords: number[] = []; - let colStart = 0; - for (let i = 0; i < n; i++) { - newColXCoords.push(colStart); - colStart += colWidth + dividerWidth; - } - this.columnStartXCoords = newColXCoords; + resizeColumns = (n: number, isAdd: boolean) => { + let scaleFactor = isAdd ? Math.floor((n - 1)) / n : Math.floor((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); + }); + // if we're adding, need to + + // const newColXCoords: number[] = []; + // let colStart = 0; + // for (let i = 0; i < n; i++) { + // newColXCoords.push(colStart); + // colStart += colWidth + dividerWidth; + // } + // this.columnStartXCoords = newColXCoords; }; // This function is used to preview where a document will drop in a column once a drag is complete. @@ -410,7 +420,13 @@ export class CollectionNoteTakingView extends CollectionSubView { const numColumns = this.columnHeaders.length; - const coords = this.columnStartXCoords.slice(); + const coords = []; + let colStartXCoord = 0; + for (let i = 0; i < numColumns; i++) { + coords.push(colStartXCoord); + colStartXCoord += this.columnHeaders[i].width + this.dividerWidth; + } + coords.push(this.PanelWidth); let colIndex = 0; for (let i = 0; i < numColumns; i++) { @@ -584,12 +600,12 @@ export class CollectionNoteTakingView extends CollectionSubView { const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null); - return value && columnHeaders?.push(new SchemaHeaderField(value)) ? true : false; + 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; }; sortFunc = (a: [SchemaHeaderField, Doc[]], b: [SchemaHeaderField, Doc[]]): 1 | -1 => { @@ -636,9 +654,13 @@ export class CollectionNoteTakingView extends CollectionSubView { - const coords = [...this.columnStartXCoords]; - coords[colIndex] += movementX; - this.columnStartXCoords = coords; + const leftHeader = this.columnHeaders[colIndex]; + const rightHeader = this.columnHeaders[colIndex + 1]; + leftHeader.setWidth(leftHeader.width + movementX); + rightHeader.setWidth(rightHeader.width - movementX); + // const coords = [...this.columnStartXCoords]; + // coords[colIndex] += movementX; + // this.columnStartXCoords = coords; }; @computed get renderedSections() { @@ -655,7 +677,7 @@ export class CollectionNoteTakingView extends CollectionSubView); + eles.push(); } } return eles; -- cgit v1.2.3-70-g09d2 From 6f7a94b0fa65729f03b49e8aecf9eb3c8a2461ff Mon Sep 17 00:00:00 2001 From: ljungster Date: Fri, 12 Aug 2022 14:43:41 -0700 Subject: sizing works but undo redo no longer does --- .../views/collections/CollectionNoteTakingView.tsx | 40 ++++++++++++++-------- .../collections/CollectionNoteTakingViewColumn.tsx | 23 ++++++++----- 2 files changed, 40 insertions(+), 23 deletions(-) (limited to 'src') 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([new SchemaHeaderField('New Column', undefined, undefined, this.maxColWdith)]); + this.dataDoc.columnHeaders = new List([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 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 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 { - 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 { 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 { 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 // setDocsForColHeader: (key: string, docs: Doc[]) => void } @@ -63,16 +65,22 @@ interface CSVFieldColumnProps { export class CollectionNoteTakingViewColumn extends React.Component { @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 { @@ -158,9 +165,9 @@ export class CollectionNoteTakingViewColumn extends React.Component (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) => { -- cgit v1.2.3-70-g09d2 From 5655589d46c01af74c959c2d365d3eeb15feb407 Mon Sep 17 00:00:00 2001 From: ljungster Date: Fri, 19 Aug 2022 06:48:46 -0500 Subject: persistent resizing undo/redo issues --- .../views/collections/CollectionNoteTakingView.tsx | 30 ++++++++++++++-------- .../collections/CollectionNoteTakingViewColumn.tsx | 6 +++-- 2 files changed, 23 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 0aa1b6839..447e1f0c8 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -368,18 +368,27 @@ export class CollectionNoteTakingView extends CollectionSubView { + resizeColumns = (isAdd: boolean, colWidth: number, colIndex: number) => { + const n = this.columnHeaders.length; if (n == 1) { - this.columnHeaders[0].setWidth(1); - return; + this.columnHeaders[0].setWidth(1); + return true; } - let scaleFactor = isAdd ? (n - 1) / n : (n + 1) / n; - // if (isAdd && n == 1) scaleFactor = 1; - this.columnHeaders.forEach(h => { - h.width < 0 ? h.setWidth(1 / n) : h.setWidth(h.width * scaleFactor); + const scaleFactor = isAdd ? 1 - colWidth : 1 / (1 - colWidth); + this.columnHeaders.forEach((h, i) => { + if (!(isAdd && i == colIndex)) { + h.width < 0 ? h.setWidth(1 / n) : h.setWidth(h.width * scaleFactor); + } }); + return true; + // let scaleFactor = isAdd ? (n - 1) / n : (n + 1) / n; + // // if (isAdd && n == 1) scaleFactor = 1; + // this.columnHeaders.forEach(h => { + // h.width < 0 ? h.setWidth(1 / n) : h.setWidth(h.width * scaleFactor); + // }); // if we're adding, need to // const newColXCoords: number[] = []; @@ -638,9 +647,8 @@ export class CollectionNoteTakingView extends CollectionSubView { const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null); - // 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, 1 / (this.numGroupColumns + 1))) ? true : false; + const newColWidth = 1 / (this.numGroupColumns + 1); + return value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, newColWidth)) && this.resizeColumns(true, newColWidth, this.columnHeaders.length - 1) ? true : false; }; sortFunc = (a: [SchemaHeaderField, Doc[]], b: [SchemaHeaderField, Doc[]]): 1 | -1 => { diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx index 8ad684cec..11a0e69ac 100644 --- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx @@ -51,7 +51,7 @@ interface CSVFieldColumnProps { unobserveHeight: (myref: any) => void; //setDraggedCol:(clonedDiv:any, header:SchemaHeaderField, xycoors: ) editableViewProps: () => any; - resizeColumns: (n: number, isAdd: boolean) => void; + resizeColumns: (isAdd: boolean, colWidth: number, colIndex: number) => boolean; // columnStartXCoords: number[]; PanelWidth: number; maxColWidth: number; @@ -165,8 +165,10 @@ export class CollectionNoteTakingViewColumn extends React.Component (d[this.props.pivotField] = 'unset')); - this.props.resizeColumns(columnHeaders.length - 1, false) + // should never be 0, currently placeholder + const colWidth = this.props.columnHeaders ? this.props.columnHeaders[index].width : 0; columnHeaders.splice(index, 1); + this.props.resizeColumns(false, colWidth, index); } }; -- cgit v1.2.3-70-g09d2 From 53dc1ae6077774a7235f2fe7f56ffa03f8a9aa5a Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 19 Aug 2022 09:21:28 -0400 Subject: fixed undo bug in dragManager where batches weren't being closed. fixed schemaheader copy method to copy all parameters. fixed notetaking columnresizer to create an UndoBatch. fixed notetakingview's columnHeaders to return the actual headers list, not a copy. fixed document decorations to not modify docsBeingDragged --- src/client/util/DragManager.ts | 2 +- src/client/views/DocumentDecorations.tsx | 4 +- .../views/collections/CollectionNoteTakingView.tsx | 20 ++--- .../CollectionNoteTakingViewDivider.tsx | 37 +++++---- .../views/collections/CollectionStackingView.tsx | 2 - src/client/views/nodes/trails/PresElementBox.tsx | 5 +- src/fields/SchemaHeaderField.ts | 92 +++++++++++----------- 7 files changed, 75 insertions(+), 87 deletions(-) (limited to 'src') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 947882958..eef5b9ce1 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -457,7 +457,7 @@ export namespace DragManager { document.removeEventListener('pointerup', upHandler, true); SnappingManager.SetIsDragging(false); SnappingManager.clearSnapLines(); - if (undo && batch.end()) UndoManager.Undo(); + if (batch.end() && undo) UndoManager.Undo(); docsBeingDragged.length = 0; }); var startWindowDragTimer: any; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 0db9eab69..a8dacff51 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -351,8 +351,8 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P @action onPointerDown = (e: React.PointerEvent): void => { - DragManager.docsBeingDragged.push(...SelectionManager.Views().map(dv => dv.rootDoc)); - this._inkDragDocs = DragManager.docsBeingDragged + const views = SelectionManager.Views().map(dv => dv.rootDoc); + this._inkDragDocs = views .filter(doc => doc.type === DocumentType.INK) .map(doc => { if (InkStrokeProperties.Instance._lock) { diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 447e1f0c8..0c5f69db0 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -53,7 +53,7 @@ export class CollectionNoteTakingView extends CollectionSubView !d[this.notetakingCategoryField] && !columnHeaders.find(sh => sh.heading === 'unset')); // @#Oberable draggedColIndex = ... @@ -142,17 +142,11 @@ export class CollectionNoteTakingView extends CollectionSubView !DragManager.docsBeingDragged.includes(d)); const sections = new Map(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []])); const rowCol = this.docsDraggedRowCol; - // filter out the currently dragged docs from the child docs, since we will insert them later - if (rowCol.length && DragManager.docsBeingDragged.length) { - const docIdsToRemove = new Set(); - DragManager.docsBeingDragged.forEach(d => docIdsToRemove.add(d[Id])); - docs = docs.filter(d => !docIdsToRemove.has(d[Id])); - } - // this will sort the docs into the correct columns (minus the ones you're currently dragging) docs.map(d => { const sectionValue = (d[this.notetakingCategoryField] as object) ?? `unset`; @@ -165,11 +159,10 @@ export class CollectionNoteTakingView extends CollectionSubView { + setColumnStartXCoords = (movementXScreen: number, colIndex: number) => { + const movementX = this.props.ScreenToLocalTransform().transformDirection(movementXScreen, 0)[0]; const leftHeader = this.columnHeaders[colIndex]; const rightHeader = this.columnHeaders[colIndex + 1]; leftHeader.setWidth(leftHeader.width + movementX / this.availableWidth); diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx index 7d31b3193..2633bffeb 100644 --- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx @@ -1,5 +1,8 @@ import { action, observable } from 'mobx'; import * as React from 'react'; +import { emptyFunction, setupMoveUpEvents } from '../../../Utils'; +import { Transform } from '../../util/Transform'; +import { UndoManager } from '../../util/UndoManager'; interface DividerProps { index: number; @@ -13,28 +16,24 @@ export class CollectionNoteTakingViewDivider extends React.Component) => { - e.stopPropagation(); - e.preventDefault(); - window.removeEventListener('pointermove', this.onPointerMove); - window.removeEventListener('pointerup', this.onPointerUp); - window.addEventListener('pointermove', this.onPointerMove); - window.addEventListener('pointerup', this.onPointerUp); + const batch = UndoManager.StartBatch('resizing'); + setupMoveUpEvents( + this, + e, + (e, down, delta) => { + this.props.setColumnStartXCoords(delta[0], this.props.index); + return false; + }, + action(() => { + this.isResizingActive = false; + this.isHoverActive = false; + batch.end(); + }), + emptyFunction + ); this.isResizingActive = true; }; - @action - private onPointerUp = () => { - this.isResizingActive = false; - this.isHoverActive = false; - window.removeEventListener('pointermove', this.onPointerMove); - window.removeEventListener('pointerup', this.onPointerUp); - }; - - @action - onPointerMove = ({ movementX }: PointerEvent) => { - this.props.setColumnStartXCoords(movementX, this.props.index); - }; - render() { return (
docs.indexOf(ndoc) !== -1).forEach(ndoc => docs.splice(docs.indexOf(ndoc), 1)); docs.splice(insertInd - offset, 0, ...newDocs); } - // reset drag manager docs, because we just dropped - DragManager.docsBeingDragged.length = 0; } } else if (de.complete.linkDragData?.dragDocument.context === this.props.Document && de.complete.linkDragData?.linkDragView?.props.CollectionFreeFormDocumentView?.()) { const source = Docs.Create.TextDocument('', { _width: 200, _height: 75, _fitWidth: true, title: 'dropped annotation' }); diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index 0cf15d297..c578f8bcf 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -250,10 +250,7 @@ export class PresElementBox extends ViewBoxBaseComponent() { onPointerMove = (e: PointerEvent) => { const slide = this._itemRef.current!; - let dragIsPresItem: boolean = DragManager.docsBeingDragged.length > 0 ? true : false; - for (const doc of DragManager.docsBeingDragged) { - if (!doc.presentationTargetDoc) dragIsPresItem = false; - } + const dragIsPresItem = DragManager.docsBeingDragged.some(d => d.presentationTargetDoc); if (slide && dragIsPresItem) { const rect = slide.getBoundingClientRect(); const y = e.clientY - rect.top; //y position within the element. diff --git a/src/fields/SchemaHeaderField.ts b/src/fields/SchemaHeaderField.ts index 3b02d0cfe..1321bc327 100644 --- a/src/fields/SchemaHeaderField.ts +++ b/src/fields/SchemaHeaderField.ts @@ -1,60 +1,60 @@ -import { Deserializable } from "../client/util/SerializationHelper"; -import { serializable, primitive } from "serializr"; -import { ObjectField } from "./ObjectField"; -import { Copy, ToScriptString, ToString, OnUpdate } from "./FieldSymbols"; -import { scriptingGlobal } from "../client/util/ScriptingGlobals"; -import { ColumnType } from "../client/views/collections/collectionSchema/CollectionSchemaView"; +import { Deserializable } from '../client/util/SerializationHelper'; +import { serializable, primitive } from 'serializr'; +import { ObjectField } from './ObjectField'; +import { Copy, ToScriptString, ToString, OnUpdate } from './FieldSymbols'; +import { scriptingGlobal } from '../client/util/ScriptingGlobals'; +import { ColumnType } from '../client/views/collections/collectionSchema/CollectionSchemaView'; export const PastelSchemaPalette = new Map([ // ["pink1", "#FFB4E8"], - ["pink2", "#ff9cee"], - ["pink3", "#ffccf9"], - ["pink4", "#fcc2ff"], - ["pink5", "#f6a6ff"], - ["purple1", "#b28dff"], - ["purple2", "#c5a3ff"], - ["purple3", "#d5aaff"], - ["purple4", "#ecd4ff"], + ['pink2', '#ff9cee'], + ['pink3', '#ffccf9'], + ['pink4', '#fcc2ff'], + ['pink5', '#f6a6ff'], + ['purple1', '#b28dff'], + ['purple2', '#c5a3ff'], + ['purple3', '#d5aaff'], + ['purple4', '#ecd4ff'], // ["purple5", "#fb34ff"], - ["purple6", "#dcd3ff"], - ["purple7", "#a79aff"], - ["purple8", "#b5b9ff"], - ["purple9", "#97a2ff"], - ["bluegreen1", "#afcbff"], - ["bluegreen2", "#aff8db"], - ["bluegreen3", "#c4faf8"], - ["bluegreen4", "#85e3ff"], - ["bluegreen5", "#ace7ff"], + ['purple6', '#dcd3ff'], + ['purple7', '#a79aff'], + ['purple8', '#b5b9ff'], + ['purple9', '#97a2ff'], + ['bluegreen1', '#afcbff'], + ['bluegreen2', '#aff8db'], + ['bluegreen3', '#c4faf8'], + ['bluegreen4', '#85e3ff'], + ['bluegreen5', '#ace7ff'], // ["bluegreen6", "#6eb5ff"], - ["bluegreen7", "#bffcc6"], - ["bluegreen8", "#dbffd6"], - ["yellow1", "#f3ffe3"], - ["yellow2", "#e7ffac"], - ["yellow3", "#ffffd1"], - ["yellow4", "#fff5ba"], + ['bluegreen7', '#bffcc6'], + ['bluegreen8', '#dbffd6'], + ['yellow1', '#f3ffe3'], + ['yellow2', '#e7ffac'], + ['yellow3', '#ffffd1'], + ['yellow4', '#fff5ba'], // ["red1", "#ffc9de"], - ["red2", "#ffabab"], - ["red3", "#ffbebc"], - ["red4", "#ffcbc1"], - ["orange1", "#ffd5b3"], - ["gray", "#f1efeb"] + ['red2', '#ffabab'], + ['red3', '#ffbebc'], + ['red4', '#ffcbc1'], + ['orange1', '#ffd5b3'], + ['gray', '#f1efeb'], ]); export const RandomPastel = () => Array.from(PastelSchemaPalette.values())[Math.floor(Math.random() * PastelSchemaPalette.size)]; export const DarkPastelSchemaPalette = new Map([ - ["pink2", "#c932b0"], - ["purple4", "#913ad6"], - ["bluegreen1", "#3978ed"], - ["bluegreen7", "#2adb3e"], - ["bluegreen5", "#21b0eb"], - ["yellow4", "#edcc0c"], - ["red2", "#eb3636"], - ["orange1", "#f2740f"], + ['pink2', '#c932b0'], + ['purple4', '#913ad6'], + ['bluegreen1', '#3978ed'], + ['bluegreen7', '#2adb3e'], + ['bluegreen5', '#21b0eb'], + ['yellow4', '#edcc0c'], + ['red2', '#eb3636'], + ['orange1', '#f2740f'], ]); @scriptingGlobal -@Deserializable("schemaheader") +@Deserializable('schemaheader') export class SchemaHeaderField extends ObjectField { @serializable(primitive()) heading: string; @@ -69,7 +69,7 @@ export class SchemaHeaderField extends ObjectField { @serializable(primitive()) desc: boolean | undefined; // boolean determines sort order, undefined when no sort - constructor(heading: string = "", color: string = RandomPastel(), type?: ColumnType, width?: number, desc?: boolean, collapsed?: boolean) { + constructor(heading: string = '', color: string = RandomPastel(), type?: ColumnType, width?: number, desc?: boolean, collapsed?: boolean) { super(); this.heading = heading; @@ -111,7 +111,7 @@ export class SchemaHeaderField extends ObjectField { } [Copy]() { - return new SchemaHeaderField(this.heading, this.color, this.type); + return new SchemaHeaderField(this.heading, this.color, this.type, this.width, this.desc, this.collapsed); } [ToScriptString]() { @@ -120,4 +120,4 @@ export class SchemaHeaderField extends ObjectField { [ToString]() { return `SchemaHeaderField`; } -} \ No newline at end of file +} -- cgit v1.2.3-70-g09d2 From 73e5ac3b651d92a3755db7d8376fc84d199be066 Mon Sep 17 00:00:00 2001 From: ljungster Date: Mon, 22 Aug 2022 05:13:57 -0500 Subject: commented CollectionNoteTakingView --- .../views/collections/CollectionNoteTakingView.tsx | 160 +++++++-------------- 1 file changed, 49 insertions(+), 111 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 0c5f69db0..a2f05c031 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -37,45 +37,34 @@ export type collectionNoteTakingViewProps = { NativeHeight?: () => number; }; -//TODO: somehow need to update the mapping and then have everything else rerender. Maybe with a refresh boolean like -// in Hypermedia? - +/** + * CollectionNoteTakingView is a column-based view for displaying documents. In this view, the user can (1) + * add and remove columns (2) change column sizes and (3) move documents within and between columns. This + * view is reminiscent of Kanban-style web apps like Trello, or the 'Board' view in Notion. Each column is + * headed by a SchemaHeaderField followed by the column's documents. SchemaHeaderFields are NOT present in + * the rest of Dash, so it may be worthwhile to transition the headers to simple documents. + */ @observer export class CollectionNoteTakingView extends CollectionSubView>() { _disposers: { [key: string]: IReactionDisposer } = {}; _masonryGridRef: HTMLDivElement | null = null; - _draggerRef = React.createRef(); // change to relative widths for deleting. change storage from columnStartXCoords to columnHeaders (schemaHeaderFields has a widgth alrady) - // @observable columnStartXCoords: number[] = []; // columnHeaders -- SchemaHeaderField -- widht + _draggerRef = React.createRef(); @observable docsDraggedRowCol: number[] = []; @observable _cursor: CursorProperty = 'grab'; - @observable _scroll = 0; // used to force the document decoration to update when scrolling + @observable _scroll = 0; @computed get chromeHidden() { return this.props.chromeHidden || BoolCast(this.layoutDoc.chromeHidden); } + // columnHeaders() returns the list of SchemaHeaderFields currently being used by the layout doc to render the columns @computed get columnHeaders() { const columnHeaders = Cast(this.dataDoc.columnHeaders, listSpec(SchemaHeaderField), null); const needsUnsetCategory = this.childDocs.some(d => !d[this.notetakingCategoryField] && !columnHeaders.find(sh => sh.heading === 'unset')); - - // @#Oberable draggedColIndex = ... - //@observable cloneDivXYcoords - // @observable clonedDiv... - - // render() { - // { this.clonedDiv ?
([new SchemaHeaderField('New Column', undefined, undefined, 1)]); - // add all of the docs that have not been added to a column to this new column } } @@ -137,6 +125,8 @@ export class CollectionNoteTakingView extends CollectionSubView !DragManager.docsBeingDragged.includes(d)); const sections = new Map(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []])); const rowCol = this.docsDraggedRowCol; - // this will sort the docs into the correct columns (minus the ones you're currently dragging) docs.map(d => { const sectionValue = (d[this.notetakingCategoryField] as object) ?? `unset`; - // look for if header exists already const existingHeader = columnHeaders.find(sh => sh.heading === sectionValue.toString()); if (existingHeader) { sections.get(existingHeader)!.push(d); } }); - // now we add back in the docs that we're dragging if (rowCol.length) { - // TODO: get the actual offset that occurs if the docs were in that column const offset = 0; sections.get(columnHeaders[rowCol[1]])?.splice(rowCol[0] - offset, 0, ...DragManager.docsBeingDragged); } @@ -173,6 +159,7 @@ export class CollectionNoteTakingView extends CollectionSubView 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(), - // // TODO: is this correct? - // headers => this.resizeColumns(headers.length, false), - // { fireImmediately: true } - // ); } componentWillUnmount() { @@ -207,6 +188,7 @@ export class CollectionNoteTakingView extends CollectionSubView this.props.childClickScript || ScriptCast(this.Document.onChildClick); } + @computed get onChildDoubleClickHandler() { return () => this.props.childDoubleClickScript || ScriptCast(this.Document.onChildDoubleClick); } @@ -226,7 +208,6 @@ export class CollectionNoteTakingView extends CollectionSubView { Doc.BrushDoc(doc); - let focusSpeed = 0; const found = this._mainCont && Array.from(this._mainCont.getElementsByClassName('documentView-node')).find((node: any) => node.id === doc[Id]); if (found) { @@ -261,7 +242,7 @@ export class CollectionNoteTakingView extends CollectionSubView this.props.isSelected() || this.props.isContentActive(); - // rules for displaying the documents + // getDisplayDoc returns the rules for displaying a document in this view (ie. DocumentView) getDisplayDoc(doc: Doc, width: () => number) { const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS ? undefined : this.props.DataDoc; const height = () => this.getDocHeight(doc); @@ -317,7 +298,7 @@ export class CollectionNoteTakingView extends CollectionSubView sh.heading === heading); const existingWidth = existingHeader?.width ? existingHeader.width : 0; 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; if (d.type === DocumentType.RTF) { return maxWidth; } @@ -361,8 +339,15 @@ export class CollectionNoteTakingView extends CollectionSubView user deletes the final column --> column widths are [0.625, 0.375]. + // Adding example: column widths are [0.6, 0.4] --> user adds column at end --> column widths are [0.4, 0.267, 0.33] @action resizeColumns = (isAdd: boolean, colWidth: number, colIndex: number) => { const n = this.columnHeaders.length; @@ -377,28 +362,13 @@ export class CollectionNoteTakingView extends CollectionSubView { - // h.width < 0 ? h.setWidth(1 / n) : h.setWidth(h.width * scaleFactor); - // }); - // if we're adding, need to - - // const newColXCoords: number[] = []; - // let colStart = 0; - // for (let i = 0; i < n; i++) { - // newColXCoords.push(colStart); - // colStart += colWidth + dividerWidth; - // } - // this.columnStartXCoords = newColXCoords; }; - // This function is used to preview where a document will drop in a column once a drag is complete. + // onPointerMove is used to preview where a document will drop in a column once a drag is complete. @action onPointerMove = (force: boolean, ex: number, ey: number) => { if (this.childDocList && (this.childDocList.includes(DragManager.DocDragData?.draggedDocuments.lastElement()!) || force || this.isContentActive())) { // 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; const colDocs = this.getDocsFromXCoord(xCoord); // get the index for where you need to insert the doc you are currently dragging @@ -427,7 +397,8 @@ export class CollectionNoteTakingView extends CollectionSubView { const numColumns = this.columnHeaders.length; const coords = []; @@ -436,7 +407,6 @@ export class CollectionNoteTakingView extends CollectionSubView { const colIndex = this.getColumnFromXCoord(xCoord); const colHeader = StrCast(this.columnHeaders[colIndex].heading); @@ -480,6 +450,8 @@ export class CollectionNoteTakingView extends CollectionSubView { @@ -489,14 +461,11 @@ export class CollectionNoteTakingView extends CollectionSubView ind >= this.childDocs.length); // if the drop operation adds something to the end of the list, then use that as the new document (may be different than what was dropped e.g., in the case of a button which is dropped but which creates say, a note). const newDocs = droppedDocs.length ? droppedDocs : de.complete.docDragData.droppedDocuments; - - // const docs = this.childDocs const docs = this.childDocList; if (docs && newDocs.length) { // remove the dragged documents from the childDocList newDocs.filter(d => docs.indexOf(d) !== -1).forEach(d => docs.splice(docs.indexOf(d), 1)); // if the doc starts a columnm (or the drop index is undefined), we can just push it to the front. Otherwise we need to add it to the column properly - //TODO: you need to update childDocList instead. It seems that childDocs is a copy of the actual array we want to modify if (rowCol[0] <= 0) { docs.splice(0, 0, ...newDocs); } else { @@ -507,7 +476,7 @@ export class CollectionNoteTakingView extends CollectionSubView { - // if (!this.columnHeaders) { - // return - // } - // if (headingObject) { - // const index = this.columnHeaders.indexOf(headingObject); - // const newIndex = index == 0 ? 1 : index - 1 - // const newHeader = this.columnHeaders[newIndex]; - // docList.forEach(d => d[this.pivotField] = newHeader.heading.toString()) - // // this.props.columnHeaders.splice(index, 1); - // const newHeaders = this.columnHeaders; - // newHeaders.splice(index, 1); - // const test = this.layoutDoc._columnHeaders; - // this.columnHeaders = newHeaders; - // this.resizeColumns(newHeaders.length) - // } - // } - - // when dropping outside of the current noteTaking context (like a new tab, freeform view, etc...) + // onExternalDrop is used when dragging a document out from a CollectionNoteTakingView + // to another tab/view/collection onExternalDrop = async (e: React.DragEvent): Promise => { const targInd = this.docsDraggedRowCol?.[0] || 0; const colInd = this.docsDraggedRowCol?.[1] || 0; @@ -576,12 +525,14 @@ export class CollectionNoteTakingView extends CollectionSubView Array.from(this.Sections); refList: any[] = []; + editableViewProps = () => ({ GetValue: () => '', SetValue: this.addGroup, contents: '+ New Column', }); + // sectionNoteTaking returns a CollectionNoteTakingViewColumn (which is an individual column) sectionNoteTaking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => { const type = 'number'; return ( @@ -604,8 +555,6 @@ export class CollectionNoteTakingView extends CollectionSubView { - const descending = StrCast(this.layoutDoc._columnsSort) === 'descending'; - const firstEntry = descending ? b : a; - const secondEntry = descending ? a : b; - return firstEntry[0].heading > secondEntry[0].heading ? 1 : -1; - }; - onContextMenu = (e: React.MouseEvent): void => { // need to test if propagation has stopped because GoldenLayout forces a parallel react hierarchy to be created for its top-level layout if (!e.isPropagationStopped()) { @@ -662,7 +604,7 @@ export class CollectionNoteTakingView extends CollectionSubView { const movementX = this.props.ScreenToLocalTransform().transformDirection(movementXScreen, 0)[0]; @@ -670,20 +612,15 @@ export class CollectionNoteTakingView extends CollectionSubView Date: Mon, 22 Aug 2022 05:51:13 -0500 Subject: commented all NoteTakingView files --- .../views/collections/CollectionNoteTakingView.tsx | 17 ++++++---- .../collections/CollectionNoteTakingViewColumn.tsx | 38 ++++++---------------- .../CollectionNoteTakingViewDivider.tsx | 6 +++- 3 files changed, 25 insertions(+), 36 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index a2f05c031..9e40356d6 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -1,6 +1,6 @@ import React = require('react'); import { CursorProperty } from 'csstype'; -import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; +import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import { DataSym, Doc, Field, HeightSym, Opt, WidthSym } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; @@ -55,7 +55,7 @@ export class CollectionNoteTakingView extends CollectionSubView !d[this.notetakingCategoryField] && !columnHeaders.find(sh => sh.heading === 'unset')); @@ -64,19 +64,17 @@ export class CollectionNoteTakingView extends CollectionSubView pair.layout instanceof Doc && !pair.layout.hidden).map(pair => pair.layout); - } @computed get headerMargin() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin); } @computed get xMargin() { return NumCast(this.layoutDoc._xMargin, 2 * Math.min(this.gridGap, 0.05 * this.props.PanelWidth())); } + // dividerWidth returns the width of a CollectionNoteTakingViewDivider @computed get dividerWidth() { return 32; } @@ -86,15 +84,20 @@ export class CollectionNoteTakingView extends CollectionSubView { TraceMobx(); diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx index 11a0e69ac..a866373a9 100644 --- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx @@ -5,11 +5,12 @@ import { observer } from 'mobx-react'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; import { RichTextField } from '../../../fields/RichTextField'; +import { listSpec } from '../../../fields/Schema'; import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; -import { ScriptField } from '../../../fields/ScriptField'; +import { Cast } from '../../../fields/Types'; import { ImageField } from '../../../fields/URLField'; import { TraceMobx } from '../../../fields/util'; -import { emptyFunction, returnEmptyString, setupMoveUpEvents } from '../../../Utils'; +import { returnEmptyString } from '../../../Utils'; import { Docs, DocUtils } from '../../documents/Documents'; import { DocumentType } from '../../documents/DocumentTypes'; import { DragManager } from '../../util/DragManager'; @@ -21,13 +22,10 @@ import { ContextMenuProps } from '../ContextMenuItem'; import { EditableView } from '../EditableView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import './CollectionNoteTakingView.scss'; -import { listSpec } from '../../../fields/Schema'; -import { Cast } from '../../../fields/Types'; const higflyout = require('@hig/flyout'); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; -// So this is how we are storing a column interface CSVFieldColumnProps { Document: Doc; DataDoc: Opt; @@ -38,7 +36,6 @@ interface CSVFieldColumnProps { columnHeaders: SchemaHeaderField[] | undefined; headingObject: SchemaHeaderField | undefined; yMargin: number; - // columnWidth: number; numGroupColumns: number; gridGap: number; type: 'string' | 'number' | 'bigint' | 'boolean' | 'symbol' | 'undefined' | 'object' | 'function' | undefined; @@ -49,44 +46,32 @@ interface CSVFieldColumnProps { screenToLocalTransform: () => Transform; observeHeight: (myref: any) => void; unobserveHeight: (myref: any) => void; - //setDraggedCol:(clonedDiv:any, header:SchemaHeaderField, xycoors: ) editableViewProps: () => any; resizeColumns: (isAdd: boolean, colWidth: number, colIndex: number) => boolean; - // columnStartXCoords: number[]; PanelWidth: number; maxColWidth: number; dividerWidth: number; availableWidth: number; - // docsByColumnHeader: Map - // setDocsForColHeader: (key: string, docs: Doc[]) => void } +/** + * CollectionNoteTakingViewColumn represents an individual column rendered in CollectionNoteTakingView. The + * majority of functions here are for rendering styles. + */ @observer export class CollectionNoteTakingViewColumn extends React.Component { @observable private _background = 'inherit'; - // the "width" property of headers is relative (a percentage of available space) + // columnWidth returns the width of a column in absolute pixels @computed get columnWidth() { - // base cases if (!this.props.columnHeaders || !this.props.headingObject) { return this.props.maxColWidth; } if (this.props.columnHeaders.length == 1) { - // this.props.columnHeaders[0].setWidth(1); 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; - // } - // const endColValue = i == this.props.numGroupColumns - 1 ? this.props.PanelWidth : this.props.columnStartXCoords[i + 1]; - // // TODO make the math work here. 35 is half of 70, which is the current width of the divider - // return endColValue - this.props.columnStartXCoords[i] - 30; } private dropDisposer?: DragManager.DragDropDisposer; @@ -96,8 +81,6 @@ export class CollectionNoteTakingViewColumn extends React.Component { this.dropDisposer?.(); if (ele) { @@ -146,6 +129,7 @@ export class CollectionNoteTakingViewColumn extends React.Component (this._background = 'inherit'); textCallback = (char: string) => this.addNewTextDoc('-typed text-', false, true); + // addNewTextDoc is called when a user starts typing in a column to create a new node @action addNewTextDoc = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => { if (!value && !forceEmptyNote) return false; @@ -158,6 +142,7 @@ export class CollectionNoteTakingViewColumn extends React.Component { @@ -270,7 +255,6 @@ export class CollectionNoteTakingViewColumn extends React.Component
) : null; - // const templatecols = `${this.props.columnWidth / this.props.numGroupColumns}px `; const templatecols = `${this.columnWidth}px `; const type = this.props.Document.type; return ( @@ -297,7 +281,6 @@ export class CollectionNoteTakingViewColumn extends React.Component style={{ width: this.columnWidth - 20, marginBottom: 10 }}>
@@ -326,7 +309,6 @@ export class CollectionNoteTakingViewColumn extends React.Component void; } +/** + * CollectionNoteTakingViewDivider is a divider between CollectionNoteTakingViewColumns, + * 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. + */ export class CollectionNoteTakingViewDivider extends React.Component { @observable private isHoverActive = false; @observable private isResizingActive = false; -- cgit v1.2.3-70-g09d2 From 3cf60a6118a5994e43c8ac9d00092992d6c83700 Mon Sep 17 00:00:00 2001 From: ljungster Date: Mon, 22 Aug 2022 11:03:31 -0400 Subject: can't add column if name in use --- src/client/views/collections/CollectionNoteTakingView.tsx | 9 +++++++-- .../views/collections/CollectionNoteTakingViewColumn.tsx | 14 ++++++++------ .../views/collections/CollectionNoteTakingViewDivider.tsx | 2 +- 3 files changed, 16 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 9e40356d6..16fefc55a 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -587,10 +587,15 @@ export class CollectionNoteTakingView extends CollectionSubView { + for (const header of this.columnHeaders) { + if (header.heading == value) { + alert('You cannot use an existing column name. Please try a new column name'); + return value; + } + } const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null); const newColWidth = 1 / (this.numGroupColumns + 1); return value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, newColWidth)) && this.resizeColumns(true, newColWidth, this.columnHeaders.length - 1) ? true : false; @@ -607,7 +612,7 @@ export class CollectionNoteTakingView extends CollectionSubView { const movementX = this.props.ScreenToLocalTransform().transformDirection(movementXScreen, 0)[0]; diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx index a866373a9..e619b084b 100644 --- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx @@ -142,15 +142,19 @@ export class CollectionNoteTakingViewColumn extends React.Component { const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null); if (columnHeaders && this.props.headingObject) { const index = columnHeaders.indexOf(this.props.headingObject); - this.props.docList.forEach(d => (d[this.props.pivotField] = 'unset')); - // should never be 0, currently placeholder + const newColIndex = index > 0 ? index - 1 : 1; + const newColHeader = this.props.columnHeaders ? this.props.columnHeaders[newColIndex] : undefined; + const newHeading = newColHeader ? newColHeader.heading : 'unset'; + this.props.docList.forEach(d => (d[this.props.pivotField] = newHeading)); const colWidth = this.props.columnHeaders ? this.props.columnHeaders[index].width : 0; columnHeaders.splice(index, 1); this.props.resizeColumns(false, colWidth, index); @@ -279,9 +283,7 @@ export class CollectionNoteTakingViewColumn extends React.Component {!this.props.chromeHidden && type !== DocumentType.PRES ? ( -
+
diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx index 7defeb031..8d659f790 100644 --- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx @@ -10,7 +10,7 @@ interface DividerProps { } /** - * CollectionNoteTakingViewDivider is a divider between CollectionNoteTakingViewColumns, + * CollectionNoteTakingViewDivider are dividers between CollectionNoteTakingViewColumns, * 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. */ -- cgit v1.2.3-70-g09d2 From 1404b81b7ef679b12a4b99cd5c82da4339a8efaf Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 22 Aug 2022 13:17:41 -0400 Subject: fixed undo of add/remove column in notetaking view by reordering @action @undoBatch to @undoBatch @action --- .../views/collections/CollectionNoteTakingView.tsx | 31 +++++++++++----------- .../collections/CollectionNoteTakingViewColumn.tsx | 2 +- 2 files changed, 16 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 16fefc55a..81ca4dd98 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -40,7 +40,7 @@ export type collectionNoteTakingViewProps = { /** * CollectionNoteTakingView is a column-based view for displaying documents. In this view, the user can (1) * add and remove columns (2) change column sizes and (3) move documents within and between columns. This - * view is reminiscent of Kanban-style web apps like Trello, or the 'Board' view in Notion. Each column is + * view is reminiscent of Kanban-style web apps like Trello, or the 'Board' view in Notion. Each column is * headed by a SchemaHeaderField followed by the column's documents. SchemaHeaderFields are NOT present in * the rest of Dash, so it may be worthwhile to transition the headers to simple documents. */ @@ -51,7 +51,7 @@ export class CollectionNoteTakingView extends CollectionSubView(); @observable docsDraggedRowCol: number[] = []; @observable _cursor: CursorProperty = 'grab'; - @observable _scroll = 0; + @observable _scroll = 0; @computed get chromeHidden() { return this.props.chromeHidden || BoolCast(this.layoutDoc.chromeHidden); } @@ -96,7 +96,7 @@ export class CollectionNoteTakingView extends CollectionSubView user deletes the final column --> column widths are [0.625, 0.375]. @@ -400,7 +400,7 @@ export class CollectionNoteTakingView extends CollectionSubView { const numColumns = this.columnHeaders.length; @@ -479,8 +479,7 @@ export class CollectionNoteTakingView extends CollectionSubView { const type = 'number'; return ( @@ -585,16 +584,16 @@ export class CollectionNoteTakingView extends CollectionSubView { for (const header of this.columnHeaders) { - if (header.heading == value) { - alert('You cannot use an existing column name. Please try a new column name'); - return value; - } + if (header.heading == value) { + alert('You cannot use an existing column name. Please try a new column name'); + return value; + } } const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null); const newColWidth = 1 / (this.numGroupColumns + 1); @@ -623,7 +622,7 @@ export class CollectionNoteTakingView extends CollectionSubView { const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null); if (columnHeaders && this.props.headingObject) { -- cgit v1.2.3-70-g09d2 From 007cc5159e3e624352bdb686c82b11d1173a5ad7 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 22 Aug 2022 13:44:05 -0400 Subject: from last --- src/fields/util.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/fields/util.ts b/src/fields/util.ts index d87bb6656..b3cbbe241 100644 --- a/src/fields/util.ts +++ b/src/fields/util.ts @@ -445,8 +445,13 @@ export function updateFunction(target: any, prop: any, value: any, receiver: any undo: action(() => { // console.log("undo $add: " + prop, diff.items) // bcz: uncomment to log undo diff.items.forEach((item: any) => { - const ind = receiver[prop].indexOf(item.value ? item.value() : item); - ind !== -1 && receiver[prop].splice(ind, 1); + if (item instanceof SchemaHeaderField) { + const ind = receiver[prop].findIndex((ele: any) => ele instanceof SchemaHeaderField && ele.heading === item.heading); + ind !== -1 && receiver[prop].splice(ind, 1); + } else { + const ind = receiver[prop].indexOf(item.value ? item.value() : item); + ind !== -1 && receiver[prop].splice(ind, 1); + } }); lastValue = ObjectField.MakeCopy(receiver[prop]); }), -- cgit v1.2.3-70-g09d2