diff options
Diffstat (limited to 'src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx | 129 |
1 files changed, 52 insertions, 77 deletions
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 |