diff options
3 files changed, 126 insertions, 261 deletions
diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss index b6bb8ce2b..c0297a648 100644 --- a/src/client/views/collections/CollectionNoteTakingView.scss +++ b/src/client/views/collections/CollectionNoteTakingView.scss @@ -47,20 +47,10 @@ } } -.collectionMasonryView { - display: inline; -} - -.collectionStackingView { +.collectionNoteTakingView { display: flex; } -.collectionStackingMasonry-cont { - position: relative; - height: 100%; - width: 100%; -} - // TODO:glr Turn this into a seperate class .documentButtonMenu { position: relative; @@ -85,8 +75,7 @@ } } -.collectionStackingView, -.collectionMasonryView { +.collectionNoteTakingView { height: 100%; width: 100%; position: absolute; @@ -101,11 +90,11 @@ display: block; } - .collectionStackingViewFieldColumn { + .collectionNoteTakingViewFieldColumn { height: max-content; } - .collectionStackingViewFieldColumnDragging { + .collectionNoteTakingViewFieldColumnDragging { height: 100%; } @@ -114,41 +103,14 @@ position: absolute; } - .collectionStackingView-docView-container { + .collectionNoteTakingView-docView-container { width: 45%; margin: 5% 2.5%; padding-left: 2.5%; height: auto; } - .collectionStackingView-flexCont { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - } - - .collectionStackingView-masonrySingle, - .collectionStackingView-masonryGrid { - width: 100%; - display: grid; - top: 0; - left: 0; - } - - .collectionStackingView-masonrySingle { - height: 100%; - position: absolute; - } - - .collectionStackingView-masonryGrid { - margin: auto; - height: max-content; - position: relative; - grid-auto-rows: 0px; - } - - .collectionStackingView-masonrySingle { + .collectionNoteTakingView-Nodes { width: 100%; height: 100%; position: absolute; @@ -160,7 +122,7 @@ position: absolute; } - .collectionStackingView-description { + .collectionNoteTakingView-description { font-size: 100%; margin-bottom: 1vw; padding: 10px; @@ -171,15 +133,15 @@ color: $white; } - .collectionStackingView-columnDragger { + .collectionNoteTakingView-columnDragger { width: 15; height: 15; position: absolute; margin-left: -5; } - // Documents in stacking view - .collectionStackingView-columnDoc { + // Documents in NoteTaking view + .collectionNoteTakingView-columnDoc { display: flex; // margin: auto; // Removed auto so that it is no longer center aligned - this could be something we change position: relative; @@ -211,19 +173,7 @@ } } - .collectionStackingView-masonryDoc { - transform-origin: top left; - grid-column-end: span 1; - height: 100%; - margin: auto; - display: inline-grid; - } - - .collectionStackingView-masonrySection { - margin: auto; - } - - .collectionStackingView-collapseBar { + .collectionNoteTakingView-collapseBar { margin-left: 2px; margin-right: 2px; margin-top: 2px; @@ -237,7 +187,7 @@ } } - .collectionStackingView-miniHeader { + .collectionNoteTakingView-miniHeader { width: 100%; .editableView-container-editing-oneLine { @@ -276,7 +226,7 @@ } } - .collectionStackingView-sectionHeader { + .collectionNoteTakingView-sectionHeader { text-align: center; margin: auto; margin-bottom: 10px; @@ -293,7 +243,7 @@ cursor: text } - .collectionStackingView-sectionHeader-subCont { + .collectionNoteTakingView-sectionHeader-subCont { outline: none; border: 0px; width: 100%; @@ -329,7 +279,7 @@ } } - .collectionStackingView-sectionColor { + .collectionNoteTakingView-sectionColor { position: absolute; left: 0; top: 0; @@ -340,12 +290,12 @@ max-width: 102px; } - .collectionStackingView-sectionColorButton { + .collectionNoteTakingView-sectionColorButton { height: 30px; display: inherit; } - .collectionStackingView-colorPicker { + .collectionNoteTakingView-colorPicker { width: 78px; z-index: 10; position: relative; @@ -371,7 +321,7 @@ } } - .collectionStackingView-sectionOptions { + .collectionNoteTakingView-sectionOptions { position: absolute; right: 0; top: 0; @@ -382,11 +332,11 @@ max-width: 102px; } - .collectionStackingView-sectionOptionButton { + .collectionNoteTakingView-sectionOptionButton { height: 30px; } - .collectionStackingView-optionPicker { + .collectionNoteTakingView-optionPicker { .optionOptions { display: inline; @@ -406,7 +356,7 @@ } } - .collectionStackingView-sectionDelete { + .collectionNoteTakingView-sectionDelete { position: absolute; right: 25px; top: 0; @@ -415,22 +365,22 @@ } } - .collectionStackingView-sectionHeader:hover { - .collectionStackingView-sectionColor { + .collectionNoteTakingView-sectionHeader:hover { + .collectionNoteTakingView-sectionColor { display: unset; } - .collectionStackingView-sectionOptions { + .collectionNoteTakingView-sectionOptions { display: unset; } - .collectionStackingView-sectionDelete { + .collectionNoteTakingView-sectionDelete { display: unset; } } - .collectionStackingView-addDocumentButton, - .collectionStackingView-addGroupButton { + .collectionNoteTakingView-addDocumentButton, + .collectionNoteTakingView-addGroupButton { display: flex; overflow: hidden; margin: auto; @@ -459,7 +409,7 @@ } } - .collectionStackingView-addDocumentButton { + .collectionNoteTakingView-addDocumentButton { font-size: 75%; letter-spacing: 2px; cursor: pointer; @@ -473,7 +423,7 @@ } } - .collectionStackingView-addGroupButton { + .collectionNoteTakingView-addGroupButton { background: rgb(238, 238, 238); font-size: 75%; text-align: center; @@ -531,8 +481,8 @@ @media only screen and (max-device-width: 480px) { - .collectionStackingView .collectionStackingView-columnDragger, - .collectionMasonryView .collectionStackingView-columnDragger { + .collectionNoteTakingView .collectionNoteTakingView-columnDragger, + .collectionNoteTakingView-columnDragger { width: 0.1; height: 0.1; opacity: 0; diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 35f27a862..ff9e22ce1 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -45,14 +45,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti _autoHeightDisposer?: IReactionDisposer; //------------------------------------------------------------------------------------------------// _masonryGridRef: HTMLDivElement | null = null; - // used in a column dragger, likely due for the masonry grid view. We want to use this _draggerRef = React.createRef<HTMLDivElement>(); // keeping track of documents. Updated on internal and external drops. What's the difference? - _docXfs: { height: () => number, width: () => number, stackedDocTransform: () => Transform }[] = []; - // Doesn't look like this field is being used anywhere. Obsolete? - _columnStart: number = 0; - // map of node headers to their heights. Used in Masonry - @observable _heightMap = new Map<string, number>(); + _docXfs: { height: () => number, width: () => number, noteTakingDocTransform: () => Transform }[] = []; // Assuming that this is the current css cursor style @observable _cursor: CursorProperty = "grab"; // gets reset whenever we scroll. Not sure what it is @@ -71,19 +66,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti @computed get xMargin() { return NumCast(this.layoutDoc._xMargin, 2 * Math.min(this.gridGap, .05 * this.props.PanelWidth())); } @computed get yMargin() { return this.props.yPadding || NumCast(this.layoutDoc._yMargin, 5); } // 2 * this.gridGap)); } @computed get gridGap() { return NumCast(this.layoutDoc._gridGap, 10); } - // are we stacking or masonry? - @computed get isStackingView() { return (this.props.viewType ?? this.layoutDoc._viewType) === CollectionViewType.Stacking || (this.props.viewType ?? this.layoutDoc._viewType) === CollectionViewType.NoteTaking; } - // this is the number of StackingViewFieldColumns that we have - @computed get numGroupColumns() { return this.isStackingView ? Math.max(1, this.Sections.size + (this.showAddAGroup ? 1 : 0)) : 1; } - // reveals a button to add a group in masonry view - @computed get showAddAGroup() { return this.pivotField && !this.chromeHidden; } - // columnWidth handles the margin on the left and right side of the documents - @computed get columnWidth() { - return Math.min(this.props.PanelWidth() - 2 * this.xMargin, - this.isStackingView ? Number.MAX_VALUE : this.layoutDoc._columnWidth === -1 ? this.props.PanelWidth() - 2 * this.xMargin : NumCast(this.layoutDoc._columnWidth, 250)); - } - - @computed get NodeWidth() { return this.props.PanelWidth() - this.gridGap; } + @computed get numGroupColumns() { return this.Sections.size; } + @computed get columnWidth() {return this.props.PanelWidth() - 2 * this.xMargin;} //-------------------------------------------- Parker's Playground --------------------------------------------// draggedDocBackgroundColors: string[] = [] @@ -115,30 +99,16 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti return docs.map((d, i) => { const height = () => this.getDocHeight(d); const width = () => this.getDocWidth(d); - // assuming we need to get rowSpan because we might be dealing with many columns. Grid gap makes sense if multiple columns - const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap); - // added 50 to width. May need to change that elsewhere later - const style = this.isStackingView ? { width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` }; - // So we're choosing whether we're going to render a column or a masonry doc - return <div className={`collectionStackingView-${this.isStackingView ? "columnDoc" : "masonryDoc"}`} key={d[Id]} style={style} > + const style = { width: width(), marginTop: i ? this.gridGap : 0, height: height() }; + return <div className={`collectionNoteTakingView-columnDoc`} key={d[Id]} style={style} > {this.getDisplayDoc(d, width)} </div>; }); } - // @action - // setDocHeight = (key: string, sectionHeight: number) => { - // this._heightMap.set(key, sectionHeight); - // } get Sections() { // appears that pivot field IS actually for sorting if (!this.pivotField || this.columnHeaders instanceof Promise) return new Map<SchemaHeaderField, Doc[]>(); - - // Shouldn't need, since we instantiate them in the constructor - // if (this.columnHeaders === undefined) { - // setTimeout(() => this.layoutDoc._columnHeaders = new List<SchemaHeaderField>(), 0); - // return new Map<SchemaHeaderField, Doc[]>(); - // } const columnHeaders = Array.from(this.columnHeaders); const fields = new Map<SchemaHeaderField, Doc[]>(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []])); let changed = false; @@ -187,9 +157,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti //TODO: where the heck are we getting filters from? this._autoHeightDisposer = reaction(() => this.layoutDoc._autoHeight, autoHeight => autoHeight && this.props.setHeight(Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), - this.headerMargin + (this.isStackingView ? - Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace("px", "")))) : - this.refList.reduce((p, r) => p + Number(getComputedStyle(r).height.replace("px", "")), 0))))); + this.headerMargin + Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace("px", ""))))))); } componentWillUnmount() { @@ -262,8 +230,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti const height = () => this.getDocHeight(doc); let dref: Opt<DocumentView>; - const stackedDocTransform = () => this.getDocTransform(doc, dref); - this._docXfs.push({ stackedDocTransform, width, height }); + const noteTakingDocTransform = () => this.getDocTransform(doc, dref); + this._docXfs.push({ noteTakingDocTransform, width, height }); //DocumentView is how the node will be rendered return <DocumentView ref={r => dref = r || undefined} Document={doc} @@ -293,7 +261,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti dropAction={StrCast(this.layoutDoc.childDropAction) as dropActionType} onClick={this.onChildClickHandler} onDoubleClick={this.onChildDoubleClickHandler} - ScreenToLocalTransform={stackedDocTransform} + ScreenToLocalTransform={noteTakingDocTransform} focus={this.focusDocument} docFilters={this.childDocFilters} hideDecorationTitle={this.props.childHideDecorationTitle?.()} @@ -346,7 +314,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? d[WidthSym]() : 0); const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? d[HeightSym]() : 0); if (nw && nh) { - const colWid = this.columnWidth / (this.isStackingView ? this.numGroupColumns : 1); + const colWid = this.columnWidth / this.numGroupColumns; const docWid = this.layoutDoc._columnsFill ? colWid : Math.min(this.getDocWidth(d), colWid); return Math.min( maxHeight, @@ -368,12 +336,13 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti return false; } - @computed get columnDragger() { - return <div className="collectionStackingView-columnDragger" onPointerDown={this.columnDividerDown} ref={this._draggerRef} - style={{ cursor: this._cursor, left: `${this.columnWidth + this.xMargin}px`, top: `${Math.max(0, this.yMargin - 9)}px` }} > - <FontAwesomeIcon icon={"arrows-alt-h"} /> - </div>; - } + //TODO: currently unused. How can we make use of it? + // @computed get columnDragger() { + // return <div className="collectionNoteTakingView-columnDragger" onPointerDown={this.columnDividerDown} ref={this._draggerRef} + // style={{ cursor: this._cursor, left: `${this.columnWidth + this.xMargin}px`, top: `${Math.max(0, this.yMargin - 9)}px` }} > + // <FontAwesomeIcon icon={"arrows-alt-h"} /> + // </div>; + // } resizeColumns = (n: number) => { const totalWidth = this.props.PanelWidth() @@ -402,8 +371,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti //TODO get the nodes in the doc this._docXfs.forEach((cd, i) => { //TODO need to write your own function for this, or make sure you're properly updating the fields - const pos = cd.stackedDocTransform().inverse().transformPoint(0, -2 * this.gridGap); - const pos1 = cd.stackedDocTransform().inverse().transformPoint(0, cd.height()); + const pos = cd.noteTakingDocTransform().inverse().transformPoint(0, -2 * this.gridGap); + const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(0, cd.height()); // checking whethere the copied element is in between the top of the doc and the grid gap // (meaning that this is the index it will be taking) const yCoordInBetween = clientY > pos[1] && (clientY < pos1[1] || i == this._docXfs.length - 1) @@ -470,19 +439,18 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti if (de.complete.docDragData) { // going to re-add the docs to the _docXFs based on position of where we just dropped this._docXfs.map((cd, i) => { - const pos = cd.stackedDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap); - const pos1 = cd.stackedDocTransform().inverse().transformPoint(cd.width(), cd.height()); + const pos = cd.noteTakingDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap); + const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(cd.width(), cd.height()); // const top = cd.height(); - // const pos = cd.stackedDocTransform().transformPoint(0, cd.height()); + // const pos = cd.noteTakingDocTransform().transformPoint(0, cd.height()); // TODO: plan // Get the top of the box // Check if there could possibly be a box below - // const pos1 = cd.stackedDocTransform().transformPoint(0, cd.height()); + // const pos1 = cd.noteTakingDocTransform().transformPoint(0, cd.height()); // if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && (i === this._docXfs.length - 1 || where[1] < pos1[1])) { if (where[1] > pos[1] && (i === this._docXfs.length - 1 || where[1] < pos1[1])) { dropInd = i; - // const axis = this.isStackingView ? 1 : 0; const axis = 1; dropAfter = where[axis] > (pos[axis] + pos1[axis]) / 2 ? 1 : 0; } @@ -538,8 +506,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti const where = [e.clientX, e.clientY]; let targInd = -1; this._docXfs.map((cd, i) => { - const pos = cd.stackedDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap); - const pos1 = cd.stackedDocTransform().inverse().transformPoint(cd.width(), cd.height()); + const pos = cd.noteTakingDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap); + const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(cd.width(), cd.height()); if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && where[1] < pos1[1]) { targInd = i; } @@ -558,7 +526,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti // sections are important headings = () => Array.from(this.Sections); refList: any[] = []; - sectionStacking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => { + sectionNoteTaking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => { // const key = this.pivotField; const type = "number"; return <CollectionNoteTakingViewFieldColumn @@ -646,24 +614,22 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti const entries = Array.from(this.Sections.entries()); sections = this.layoutDoc._columnsSort ? entries.sort(this.sortFunc) : entries; } - // a section will have a header and a list of docs. Ok cool. - // return sections.map((section, i) => this.isStackingView ? this.sectionStacking(section[0], section[1]) : this.sectionMasonry(section[0], section[1], i === 0)); //TODO need to add the divs in const eles: JSX.Element[] = [] for (let i = 0; i < sections.length; i++) { - const col = this.sectionStacking(sections[i][0], sections[i][1]) + const col = this.sectionNoteTaking(sections[i][0], sections[i][1]) eles.push(col) //TODO make this look pretty // if (i < sections.length - 1) { // eles.push( - // <div className={"collectionStackingViewFieldColumn"}> + // <div className={"collectionNoteTakingViewFieldColumn"}> // new div // </div> // ) // } } return eles - // return sections.map((section) => this.sectionStacking(section[0], section[1])); + // return sections.map((section) => this.sectionNoteTaking(section[0], section[1])); } @computed get buttonMenu() { @@ -716,13 +682,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti observer: any; render() { TraceMobx(); - //TODO: need to make this inside the field view column - // const editableViewProps = { - // GetValue: () => "", - // SetValue: this.addGroup, - // // I don't recall ever seeing this add a group button - // contents: "+ ADD A COLUMN" - // }; const buttonMenu = this.rootDoc.buttonMenu; const noviceExplainer = this.rootDoc.explainer; return ( @@ -736,39 +695,20 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti : null } </div> : null} - <div className="collectionStackingMasonry-cont" > - <div className={this.isStackingView ? "collectionStackingView" : "collectionMasonryView"} - ref={this.createRef} - style={{ - overflowY: this.props.isContentActive() ? "auto" : "hidden", - background: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor), - pointerEvents: this.backgroundEvents ? "all" : undefined - }} - onScroll={action(e => this._scroll = e.currentTarget.scrollTop)} - onPointerOver={this.onPointerOver} - onPointerDown={this.onPointerDown} - onDrop={this.onExternalDrop.bind(this)} - onContextMenu={this.onContextMenu} - // Todo: what is wheel? Are we talking about a mouse wheel? - onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} > - {/* so it appears that we are actually rendering the sections. Maybe this is what we're looking for? */} - {this.renderedSections} - {/* I think that showAddGroup must be passed in as false, which is why we can't find what Mehek showed - Or it's because we aren't passing a pivot field */} - {/* {!this.showAddAGroup ? (null) : - <div key={`${this.props.Document[Id]}-addGroup`} className="collectionStackingView-addGroupButton" - style={{ width: !this.isStackingView ? "100%" : this.columnWidth / this.numGroupColumns - 10, marginTop: 10 }}> - <EditableView {...editableViewProps} /> - </div>} */} - {/* {this.chromeHidden || !this.props.isSelected() ? (null) : - <Switch - onChange={this.onToggle} - onClick={this.onToggle} - defaultChecked={true} - checkedChildren="edit" - unCheckedChildren="view" - />} */} - </div> + <div className="collectionNoteTakingView" + ref={this.createRef} + style={{ + overflowY: this.props.isContentActive() ? "auto" : "hidden", + background: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor), + pointerEvents: this.backgroundEvents ? "all" : undefined + }} + onScroll={action(e => this._scroll = e.currentTarget.scrollTop)} + onPointerOver={this.onPointerOver} + onPointerDown={this.onPointerDown} + onDrop={this.onExternalDrop.bind(this)} + onContextMenu={this.onContextMenu} + onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} > + {this.renderedSections} </div> </> diff --git a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx index 605ee4b41..b4e0aac60 100644 --- a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx @@ -3,13 +3,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { Doc, DocListCast, Opt } from "../../../fields/Doc"; +import { Id } from "../../../fields/FieldSymbols"; import { RichTextField } from "../../../fields/RichTextField"; -import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField"; +import { SchemaHeaderField } from "../../../fields/SchemaHeaderField"; import { ScriptField } from "../../../fields/ScriptField"; -import { Cast, NumCast, StrCast } from "../../../fields/Types"; +import { NumCast } from "../../../fields/Types"; import { ImageField } from "../../../fields/URLField"; import { TraceMobx } from "../../../fields/util"; -import { emptyFunction, setupMoveUpEvents, returnFalse, returnEmptyString } from "../../../Utils"; +import { emptyFunction, returnEmptyString, setupMoveUpEvents } from "../../../Utils"; import { Docs, DocUtils } from "../../documents/Documents"; import { DocumentType } from "../../documents/DocumentTypes"; import { DragManager } from "../../util/DragManager"; @@ -19,9 +20,8 @@ import { undoBatch } from "../../util/UndoManager"; import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from "../ContextMenuItem"; import { EditableView } from "../EditableView"; -import "./CollectionNoteTakingView.scss"; import { FormattedTextBox } from "../nodes/formattedText/FormattedTextBox"; -import { Id } from "../../../fields/FieldSymbols"; +import "./CollectionNoteTakingView.scss"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -42,7 +42,6 @@ interface CSVFieldColumnProps { gridGap: number; type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined; headings: () => object[]; - // I think that stacking view actually has a single column and then supposedly you can add more columns? Unsure renderChildren: (docs: Doc[]) => JSX.Element[]; addDocument: (doc: Doc | Doc[]) => boolean; createDropTarget: (ele: HTMLDivElement) => void; @@ -60,7 +59,6 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel private dropDisposer?: DragManager.DragDropDisposer; private _headerRef: React.RefObject<HTMLDivElement> = React.createRef(); - @observable _paletteOn = false; @observable _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading; @observable _color = this.props.headingObject ? this.props.headingObject.color : "#f1efeb"; _ele: HTMLElement | null = null; @@ -75,16 +73,17 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel this.dropDisposer = DragManager.MakeDropTarget(ele, this.columnDrop.bind(this)); } } + componentWillUnmount() { this.props.unobserveHeight(this._ele); } - //TODO: what is scripting? I found it in SetInPlace def but don't know what that is @undoBatch columnDrop = action((e: Event, de: DragManager.DropEvent) => { const drop = { docs: de.complete.docDragData?.droppedDocuments, val: this.getValue(this._heading) }; drop.docs?.forEach(d => Doc.SetInPlace(d, this.props.pivotField, drop.val, false)); }); + getValue = (value: string): any => { const parsed = parseInt(value); if (!isNaN(parsed)) return parsed; @@ -110,12 +109,6 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel return false; } - @action - changeColumnColor = (color: string) => { - this.props.headingObject?.setColor(color); - this._color = color; - } - @action pointerEntered = () => SnappingManager.GetIsDragging() && (this._background = "#b4b4b4"); @action pointerLeave = () => this._background = "inherit"; textCallback = (char: string) => this.addNewTextDoc("-typed text-", false, true); @@ -154,12 +147,6 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel } } - @action - collapseSection = () => { - this.props.headingObject?.setCollapsed(!this.props.headingObject.collapsed); - this.toggleVisibility(); - } - headerDown = (e: React.PointerEvent<HTMLDivElement>) => setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); //TODO: I think this is where I'm supposed to edit stuff @@ -181,10 +168,6 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel return false; } - @observable private collapsed: boolean = false; - - private toggleVisibility = action(() => this.collapsed = !this.collapsed); - menuCallback = (x: number, y: number) => { ContextMenu.Instance.clearItems(); const layoutItems: ContextMenuProps[] = []; @@ -234,9 +217,9 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel this.props.addDocument?.(created); } }); - const pt = this.props.screenToLocalTransform().inverse().transformPoint(x, y); ContextMenu.Instance.displayMenu(x, y, undefined, true); } + @computed get innards() { TraceMobx(); const key = this.props.pivotField; @@ -246,16 +229,13 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel const uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx); const evContents = heading ? heading : "25"; const headingView = this.props.headingObject ? - <div key={heading} className="collectionStackingView-sectionHeader" ref={this._headerRef} + <div key={heading} className="collectionNoteTakingView-sectionHeader" ref={this._headerRef} style={{ marginTop: this.props.yMargin, width: (this.props.columnWidth) / ((uniqueHeadings.length) || 1) }}> - {/* <div className={"collectionStackingView-collapseBar" + (this.props.headingObject.collapsed === true ? " active" : "")} onClick={this.collapseSection}></div> */} - {/* the default bucket (no key value) has a tooltip that describes what it is. - Further, it does not have a color and cannot be deleted. */} - <div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown} + <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" }}> @@ -264,57 +244,52 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel SetValue={this.headingChanged} contents={evContents} oneLine={true} - toggle={this.toggleVisibility} /> - {/* {evContents === `0` ? (null) : <></>} */} + /> </div> </div> : (null); const templatecols = `${this.props.columnWidth / this.props.numGroupColumns}px `; const type = this.props.Document.type; return <> - {this.props.Document._columnsHideIfEmpty ? (null) : headingView} - { - this.collapsed ? (null) : - <div> - <div key={`${heading}-stack`} className={`collectionStackingView-masonrySingle`} - style={{ - padding: `${columnYMargin}px ${0}px ${this.props.yMargin}px ${0}px`, - margin: "auto", - width: "max-content", //singleColumn ? undefined : `${cols * (style.columnWidth + style.gridGap) + 2 * style.xMargin - style.gridGap}px`, - height: 'max-content', - position: "relative", - gridGap: this.props.gridGap, - gridTemplateColumns: templatecols, - gridAutoRows: "0px" - }}> - {this.props.renderChildren(this.props.docList)} - </div> - - {!this.props.chromeHidden && type !== DocumentType.PRES ? - <div className="collectionNoteTakingView-DocumentButtons" - style={{ width: this.props.columnWidth / this.props.numGroupColumns, marginBottom: 10 }}> - <div key={`${heading}-add-document`} className="collectionNoteTakingView-addDocumentButton"> - <EditableView - GetValue={returnEmptyString} - SetValue={this.addNewTextDoc} - textCallback={this.textCallback} - placeholder={"Type ':' for commands"} - contents={"+ New Node"} - toggle={this.toggleVisibility} - menuCallback={this.menuCallback} - /> - </div> - <div key={`${this.props.Document[Id]}-addGroup`} className="collectionNoteTakingView-addDocumentButton"> - <EditableView {...this.props.editableViewProps} /> - </div> - {(this.props.columnHeaders?.length && this.props.columnHeaders.length > 1) && - <button className="collectionStackingView-sectionDelete" onClick={this.deleteColumn}> - <FontAwesomeIcon icon="trash" size="lg" /> - </button> - } - </div> - : null} + {headingView} + {<div> + <div key={`${heading}-stack`} className={`collectionNoteTakingView-Nodes`} + style={{ + padding: `${columnYMargin}px ${0}px ${this.props.yMargin}px ${0}px`, + margin: "auto", + width: "max-content", //singleColumn ? undefined : `${cols * (style.columnWidth + style.gridGap) + 2 * style.xMargin - style.gridGap}px`, + height: 'max-content', + position: "relative", + gridGap: this.props.gridGap, + gridTemplateColumns: templatecols, + gridAutoRows: "0px" + }}> + {this.props.renderChildren(this.props.docList)} + </div> - </div> + {!this.props.chromeHidden && type !== DocumentType.PRES ? + <div className="collectionNoteTakingView-DocumentButtons" + style={{ width: this.props.columnWidth / this.props.numGroupColumns, marginBottom: 10 }}> + <div key={`${heading}-add-document`} className="collectionNoteTakingView-addDocumentButton"> + <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} /> + </div> + {(this.props.columnHeaders?.length && this.props.columnHeaders.length > 1) && + <button className="collectionNoteTakingView-sectionDelete" onClick={this.deleteColumn}> + <FontAwesomeIcon icon="trash" size="lg" /> + </button> + } + </div> + : null} + </div> } </>; } @@ -326,9 +301,9 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel const heading = this._heading; const uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx); return ( - <div className={"collectionStackingViewFieldColumn" + (SnappingManager.GetIsDragging() ? "Dragging" : "")} key={heading} + <div className={"collectionNoteTakingViewFieldColumn" + (SnappingManager.GetIsDragging() ? "Dragging" : "")} key={heading} style={{ - // width: `${100 / (uniqueHeadings.length + (this.props.chromeHidden ? 0 : 1) || 1)}%`, + //TODO: change this to be slightly different width: `${100 / (uniqueHeadings.length || 1)}%`, height: undefined, // DraggingManager.GetIsDragging() ? "100%" : undefined, background: this._background |