From d8a6895dc4347587244d1d220691431e1d7d638f Mon Sep 17 00:00:00 2001 From: ljungster Date: Tue, 26 Apr 2022 20:47:54 -0400 Subject: attempt with columnResizer. Not sure about how to handle resize events --- .../CollectionNoteTakingViewDivider.tsx | 28 ++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/client/views/collections/CollectionNoteTakingViewDivider.tsx (limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx') diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx new file mode 100644 index 000000000..11e1b5d62 --- /dev/null +++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx @@ -0,0 +1,28 @@ +import { auto } from "async"; +import { action } from "mobx"; +import * as React from "react"; +import { DragManager } from "../../util/DragManager"; + +interface DividerProps { + index: number + columnStartXCoords: number[] + xMargin: number +} + +export default class Divider extends React.Component{ + + + + render() { + return ( +
+ ) + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 28e636ef7d7ed541dd735ec5cb9e29a6505ac787 Mon Sep 17 00:00:00 2001 From: ljungster Date: Thu, 28 Apr 2022 09:57:21 -0400 Subject: making changes to array, but no visual ones --- .../views/collections/CollectionNoteTakingView.tsx | 27 +++++---- .../CollectionNoteTakingViewDivider.tsx | 67 ++++++++++++++++++---- 2 files changed, 72 insertions(+), 22 deletions(-) (limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx') diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 785732659..818c5b671 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -26,6 +26,7 @@ import { CollectionNoteTakingViewFieldColumn } from "./CollectionNoteTakingViewF import "./CollectionNoteTakingView.scss"; import { CollectionSubView } from "./CollectionSubView"; import { CollectionViewType } from "./CollectionView"; +import CollectionNoteTakingViewDivider from "./CollectionNoteTakingViewDivider"; const _global = (window /* browser */ || global /* node */) as any; @@ -659,18 +660,22 @@ export class CollectionNoteTakingView extends CollectionSubView -
this.onDividerPointerOver(e, i)} key={i} - style={{ - height: "95%", - width: 12, - borderRight: "4px solid #282828", - borderLeft: "4px solid #282828", - margin: "0px 10px" - }} + //
+ //
this.onDividerPointerOver(e, i)} key={i} + // style={{ + // height: "95%", + // width: 12, + // borderRight: "4px solid #282828", + // borderLeft: "4px solid #282828", + // margin: "0px 10px" + // }} + // /> + //
+ -
- ) } } diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx index 11e1b5d62..9b4af16ce 100644 --- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx @@ -1,7 +1,5 @@ -import { auto } from "async"; -import { action } from "mobx"; +import { action, observable } from "mobx"; import * as React from "react"; -import { DragManager } from "../../util/DragManager"; interface DividerProps { index: number @@ -10,19 +8,66 @@ interface DividerProps { } export default class Divider extends React.Component{ - + @observable private isHoverActive = false; + @observable private isResizingActive = false; + @action + private registerResizing = (e: React.PointerEvent) => { + e.stopPropagation(); + e.preventDefault(); + window.removeEventListener("pointermove", this.onPointerMove); + window.removeEventListener("pointerup", this.onPointerUp); + window.addEventListener("pointermove", this.onPointerMove); + window.addEventListener("pointerup", this.onPointerUp); + 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) => { + // if (DragManager.docsBeingDragged.length == 0) { + // //convert client X to how we're doing stuff + // const xPos = e.clientX + 2 * this.props.xMargin + // // get difference (-25 is because that's the center of the divider) + // const xDividerPos = this.props.columnStartXCoords[this.props.index + 1] - 25 + // const diff = xDividerPos - xPos + // // make a copy of the array + // const colXCoords : number[] = [] + // this.props.columnStartXCoords.forEach(val => colXCoords.push(val)) + this.props.columnStartXCoords[this.props.index + 1] += movementX + console.log(this.props.columnStartXCoords) + // this.props.columnStartXCoords = colXCoords + // } + } + render() { return ( -
+ onPointerEnter={action(() => this.isHoverActive = true)} + onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))} + > +
this.registerResizing(e)} + style={{ + height: "95%", + width: 12, + borderRight: "4px solid #282828", + borderLeft: "4px solid #282828", + margin: "0px 10px" + }} + /> +
) } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 6f17d019715ee20a29588edac94c790e57628be9 Mon Sep 17 00:00:00 2001 From: ljungster Date: Thu, 28 Apr 2022 10:18:53 -0400 Subject: still struggling --- .../views/collections/CollectionNoteTakingView.tsx | 40 ++++++++++++++-------- .../CollectionNoteTakingViewDivider.tsx | 10 +++--- 2 files changed, 31 insertions(+), 19 deletions(-) (limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx') diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 818c5b671..4bb16b01e 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -85,6 +85,9 @@ export class CollectionNoteTakingView extends CollectionSubView(); + // this.state = { + // columnStartXCoords: [0] + // } this.columnStartXCoords = [0] } else { //TODO instantiate columnStartXCoords and dividerXCoords @@ -628,20 +631,25 @@ export class CollectionNoteTakingView extends CollectionSubView { - if (DragManager.docsBeingDragged.length == 0) { - //convert client X to how we're doing stuff - const xPos = e.clientX + 2 * this.xMargin - // get difference (-25 is because that's the center of the divider) - const xDividerPos = this.columnStartXCoords[index + 1] - 25 - const diff = xDividerPos - xPos - // make a copy of the array - const colXCoords : number[] = [] - this.columnStartXCoords.forEach(val => colXCoords.push(val)) - colXCoords[index + 1] -= diff - this.columnStartXCoords = colXCoords - } + // @action + // onDividerPointerOver = (e: React.PointerEvent, index: number) => { + // if (DragManager.docsBeingDragged.length == 0) { + // //convert client X to how we're doing stuff + // const xPos = e.clientX + 2 * this.xMargin + // // get difference (-25 is because that's the center of the divider) + // const xDividerPos = this.columnStartXCoords[index + 1] - 25 + // const diff = xDividerPos - xPos + // // make a copy of the array + // const colXCoords : number[] = [] + // this.columnStartXCoords.forEach(val => colXCoords.push(val)) + // colXCoords[index + 1] -= diff + // this.columnStartXCoords = colXCoords + // } + // } + + setColumnStartXCoords = (newCoords: number[]) => { + this.columnStartXCoords = newCoords + console.log(this.columnStartXCoords) } // @@ -674,6 +682,7 @@ export class CollectionNoteTakingView extends CollectionSubView ) @@ -757,7 +766,8 @@ export class CollectionNoteTakingView extends CollectionSubView this.props.isContentActive(true) && e.stopPropagation()} > + onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} + > {this.renderedSections}
diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx index 9b4af16ce..3655c3f38 100644 --- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx @@ -5,6 +5,7 @@ interface DividerProps { index: number columnStartXCoords: number[] xMargin: number + setColumnStartXCoords: (newCoords: number[]) => void } export default class Divider extends React.Component{ @@ -39,10 +40,11 @@ export default class Divider extends React.Component{ // const xDividerPos = this.props.columnStartXCoords[this.props.index + 1] - 25 // const diff = xDividerPos - xPos // // make a copy of the array - // const colXCoords : number[] = [] - // this.props.columnStartXCoords.forEach(val => colXCoords.push(val)) - this.props.columnStartXCoords[this.props.index + 1] += movementX - console.log(this.props.columnStartXCoords) + const colXCoords : number[] = [] + this.props.columnStartXCoords.forEach(val => colXCoords.push(val)) + colXCoords[this.props.index + 1] += movementX + this.props.setColumnStartXCoords(colXCoords) + // console.log(this.props.columnStartXCoords) // this.props.columnStartXCoords = colXCoords // } } -- cgit v1.2.3-70-g09d2 From d9ac13fd73568c4ed4ec939a5d63dda455bc4e5f Mon Sep 17 00:00:00 2001 From: ljungster Date: Thu, 28 Apr 2022 12:35:34 -0400 Subject: pushing prior to sprint --- .../views/collections/CollectionNoteTakingView.tsx | 18 ++++-------------- .../collections/CollectionNoteTakingViewDivider.tsx | 10 +++++----- 2 files changed, 9 insertions(+), 19 deletions(-) (limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx') diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 4bb16b01e..79e3c5f4b 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -303,12 +303,13 @@ export class CollectionNoteTakingView extends CollectionSubView sh.heading === (castedSectionValue)); + const colStartXCoords = this.columnStartXCoords if (existingHeader) { const index = this.columnHeaders.indexOf(existingHeader) if (this.columnHeaders.length == 1) { - return this.props.PanelWidth() - this.columnStartXCoords[index] - 4 * this.gridGap - 100 + return this.props.PanelWidth() - colStartXCoords[index] - 4 * this.gridGap - 100 } - return this.columnStartXCoords[index + 1] - this.columnStartXCoords[index] - 2 * this.gridGap - 100 + return colStartXCoords[index + 1] - colStartXCoords[index] - 2 * this.gridGap - 100 } return 1000; } @@ -668,21 +669,10 @@ export class CollectionNoteTakingView extends CollectionSubView - //
this.onDividerPointerOver(e, i)} key={i} - // style={{ - // height: "95%", - // width: 12, - // borderRight: "4px solid #282828", - // borderLeft: "4px solid #282828", - // margin: "0px 10px" - // }} - // /> - //
) diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx index 3655c3f38..731ac556e 100644 --- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx @@ -40,11 +40,11 @@ export default class Divider extends React.Component{ // const xDividerPos = this.props.columnStartXCoords[this.props.index + 1] - 25 // const diff = xDividerPos - xPos // // make a copy of the array - const colXCoords : number[] = [] - this.props.columnStartXCoords.forEach(val => colXCoords.push(val)) - colXCoords[this.props.index + 1] += movementX - this.props.setColumnStartXCoords(colXCoords) - // console.log(this.props.columnStartXCoords) + // const colXCoords = [...this.props.columnStartXCoords] + // colXCoords[this.props.index + 1] += movementX + this.props.columnStartXCoords[this.props.index + 1] += movementX + // this.props.setColumnStartXCoords(colXCoords) + console.log(this.props.columnStartXCoords) // this.props.columnStartXCoords = colXCoords // } } -- cgit v1.2.3-70-g09d2 From a71c320db74ff4b3eb66a4981c035ae423c437ef Mon Sep 17 00:00:00 2001 From: ljungster Date: Thu, 28 Apr 2022 16:18:36 -0400 Subject: best yet? --- .../views/collections/CollectionNoteTakingView.tsx | 10 ++++++---- .../collections/CollectionNoteTakingViewDivider.tsx | 18 ++---------------- 2 files changed, 8 insertions(+), 20 deletions(-) (limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx') diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 79e3c5f4b..e7d7c15d2 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -648,8 +648,11 @@ export class CollectionNoteTakingView extends CollectionSubView { - this.columnStartXCoords = newCoords + @action + setColumnStartXCoords = (movementX: number, colIndex: number) => { + const coords = [...this.columnStartXCoords] + coords[colIndex] += movementX + this.columnStartXCoords = coords console.log(this.columnStartXCoords) } @@ -670,8 +673,7 @@ export class CollectionNoteTakingView extends CollectionSubView diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx index 731ac556e..ed5dc3715 100644 --- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx @@ -3,9 +3,8 @@ import * as React from "react"; interface DividerProps { index: number - columnStartXCoords: number[] xMargin: number - setColumnStartXCoords: (newCoords: number[]) => void + setColumnStartXCoords: (movementX: number, colIndex: number) => void } export default class Divider extends React.Component{ @@ -33,20 +32,7 @@ export default class Divider extends React.Component{ @action onPointerMove = ({ movementX }: PointerEvent) => { - // if (DragManager.docsBeingDragged.length == 0) { - // //convert client X to how we're doing stuff - // const xPos = e.clientX + 2 * this.props.xMargin - // // get difference (-25 is because that's the center of the divider) - // const xDividerPos = this.props.columnStartXCoords[this.props.index + 1] - 25 - // const diff = xDividerPos - xPos - // // make a copy of the array - // const colXCoords = [...this.props.columnStartXCoords] - // colXCoords[this.props.index + 1] += movementX - this.props.columnStartXCoords[this.props.index + 1] += movementX - // this.props.setColumnStartXCoords(colXCoords) - console.log(this.props.columnStartXCoords) - // this.props.columnStartXCoords = colXCoords - // } + this.props.setColumnStartXCoords(movementX, this.props.index) } render() { -- cgit v1.2.3-70-g09d2 From 55bac585fa0b8d6c3f513ccecb22456d1d361040 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 3 Aug 2022 13:33:38 -0400 Subject: fixes for dragging notes so that they highlight properly and go to the right place when embedded in freeform views. --- src/client/documents/Documents.ts | 9 +- src/client/util/CurrentUserUtils.ts | 3 +- src/client/util/DragManager.ts | 12 +- src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/StyleProvider.tsx | 8 +- .../views/collections/CollectionNoteTakingView.tsx | 91 +++--- .../collections/CollectionNoteTakingViewColumn.tsx | 358 +++++++++++---------- .../CollectionNoteTakingViewDivider.tsx | 112 +++---- .../views/collections/CollectionStackingView.tsx | 4 +- src/client/views/nodes/DocumentView.tsx | 30 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 6 +- 11 files changed, 332 insertions(+), 303 deletions(-) (limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 32d7152fd..9d00664ad 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1036,7 +1036,14 @@ export namespace Docs { } export function NoteTakingDocument(documents: Array, options: DocumentOptions, id?: string, protoId?: string) { - return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _viewType: CollectionViewType.NoteTaking }, id, undefined, protoId); + return InstanceFromProto( + Prototypes.get(DocumentType.COL), + new List(documents), + { columnHeaders: new List([new SchemaHeaderField('Untitled')]), ...options, _viewType: CollectionViewType.NoteTaking }, + id, + undefined, + protoId + ); } export function MulticolumnDocument(documents: Array, options: DocumentOptions) { diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 28dc44c25..7856c913b 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -135,7 +135,6 @@ export class CurrentUserUtils { return DocUtils.AssignOpts(tempClicks, reqdOpts, reqdClickList) ?? (doc[field] = Docs.Create.TreeDocument(reqdClickList, reqdOpts)); } - /// Initializes templates that can be applied to notes static setupNoteTemplates(doc: Doc, field="template-notes") { const tempNotes = DocCast(doc[field]); @@ -255,6 +254,7 @@ export class CurrentUserUtils { creator:(opts:DocumentOptions)=> any // how to create the empty thing if it doesn't exist }[] = [ {key: "Note", creator: opts => Docs.Create.TextDocument("", opts), opts: { _width: 200, _autoHeight: true }}, + {key: "Noteboard", creator: opts => Docs.Create.NoteTakingDocument([], opts), opts: { _width: 250, _height: 200 }}, {key: "Collection", creator: opts => Docs.Create.FreeformDocument([], opts), opts: { _width: 150, _height: 100 }}, {key: "Equation", creator: opts => Docs.Create.EquationDocument(opts), opts: { _width: 300, _height: 35, _fitWidth:false, _backgroundGridShow: true, }}, {key: "Webpage", creator: opts => Docs.Create.WebDocument("",opts), opts: { _width: 400, _height: 512, _nativeWidth: 850, useCors: true, }}, @@ -280,6 +280,7 @@ export class CurrentUserUtils { return [ { toolTip: "Tap or drag to create a note", title: "Note", icon: "sticky-note", dragFactory: doc.emptyNote as Doc, }, + { toolTip: "Tap or drag to create a note board", title: "Notes", icon: "folder", dragFactory: doc.emptyNoteboard as Doc, }, { toolTip: "Tap or drag to create a collection", title: "Col", icon: "folder", dragFactory: doc.emptyCollection as Doc, clickFactory: DocCast(doc.emptyTab), scripts: { onClick: 'openOnRight(copyDragFactory(this.clickFactory))', onDragStart: '{ return copyDragFactory(this.dragFactory);}'}, }, { toolTip: "Tap or drag to create an equation", title: "Math", icon: "calculator", dragFactory: doc.emptyEquation as Doc, }, { toolTip: "Tap or drag to create a webpage", title: "Web", icon: "globe-asia", dragFactory: doc.emptyWebpage as Doc, }, diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 3a1bb1673..f4987cf34 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -1,4 +1,4 @@ -import { action } from 'mobx'; +import { action, observable, runInAction } from 'mobx'; import { DateField } from '../../fields/DateField'; import { Doc, Field, Opt } from '../../fields/Doc'; import { List } from '../../fields/List'; @@ -320,7 +320,7 @@ export namespace DragManager { y: snapVal([yFromTop, yFromBottom], e.pageY, SnappingManager.horizSnapLines()), }; } - export let docsBeingDragged: Doc[] = []; + export let docsBeingDragged: Doc[] = observable([] as Doc[]); export let CanEmbed = false; export let DocDragData: DocumentDragData | undefined; export function StartDrag(eles: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: DragCompleteEvent) => void) { @@ -349,13 +349,13 @@ export namespace DragManager { xs: number[] = [], ys: number[] = []; - docsBeingDragged = dragData instanceof DocumentDragData ? dragData.draggedDocuments : dragData instanceof AnchorAnnoDragData ? [dragData.dragDocument] : []; const elesCont = { left: Number.MAX_SAFE_INTEGER, right: Number.MIN_SAFE_INTEGER, top: Number.MAX_SAFE_INTEGER, bottom: Number.MIN_SAFE_INTEGER, }; + const docsToDrag = dragData instanceof DocumentDragData ? dragData.draggedDocuments : dragData instanceof AnchorAnnoDragData ? [dragData.dragDocument] : []; const dragElements = eles.map(ele => { if (!ele.parentNode) dragDiv.appendChild(ele); const dragElement = ele.parentNode === dragDiv ? ele : (ele.cloneNode(true) as HTMLElement); @@ -405,7 +405,7 @@ export namespace DragManager { }); dragLabel.style.transform = `translate(${rect.left + (options?.offsetX || 0)}px, ${rect.top + (options?.offsetY || 0) - 20}px)`; - if (docsBeingDragged.length) { + if (docsToDrag.length) { const pdfBox = dragElement.getElementsByTagName('canvas'); const pdfBoxSrc = ele.getElementsByTagName('canvas'); Array.from(pdfBox) @@ -429,6 +429,8 @@ export namespace DragManager { return dragElement; }); + runInAction(() => docsBeingDragged.push(...docsToDrag)); + const hideDragShowOriginalElements = (hide: boolean) => { dragLabel.style.display = hide ? '' : 'none'; !hide && dragElements.map(dragElement => dragElement.parentNode === dragDiv && dragDiv.removeChild(dragElement)); @@ -456,7 +458,7 @@ export namespace DragManager { SnappingManager.SetIsDragging(false); SnappingManager.clearSnapLines(); batch.end(); - docsBeingDragged = []; + docsBeingDragged.length = 0; }); var startWindowDragTimer: any; const moveHandler = (e: PointerEvent) => { diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index c53e61699..0db9eab69 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -351,7 +351,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P @action onPointerDown = (e: React.PointerEvent): void => { - DragManager.docsBeingDragged = SelectionManager.Views().map(dv => dv.rootDoc); + DragManager.docsBeingDragged.push(...SelectionManager.Views().map(dv => dv.rootDoc)); this._inkDragDocs = DragManager.docsBeingDragged .filter(doc => doc.type === DocumentType.INK) .map(doc => { diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 692f7b98e..a83163eb0 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -110,8 +110,8 @@ export function DefaultStyleProvider(doc: Opt, props: Opt, props: Opt (props?.PanelHeight() || 0) ? 5 : 10) : 0; case StyleProp.HeaderMargin: - return ([CollectionViewType.Stacking, CollectionViewType.NoteTaking, CollectionViewType.Masonry, CollectionViewType.Tree].includes(doc?._viewType as any) || (doc?.type === DocumentType.RTF && !showTitle()?.includes('noMargin')) || doc?.type === DocumentType.LABEL) && + return ([CollectionViewType.Stacking, CollectionViewType.NoteTaking, CollectionViewType.Masonry, CollectionViewType.Tree].includes(doc?._viewType as any) || + (doc?.type === DocumentType.RTF && !showTitle()?.includes('noMargin')) || + doc?.type === DocumentType.LABEL) && showTitle() && !StrCast(doc?.showTitle).includes(':hover') ? 15 diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index f442559fb..1854a4213 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 } from 'mobx'; +import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { DataSym, Doc, HeightSym, Opt, WidthSym } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; @@ -21,10 +21,12 @@ import { ContextMenuProps } from '../ContextMenuItem'; import { LightboxView } from '../LightboxView'; import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView'; import { DocFocusOptions, DocumentView, DocumentViewProps, ViewAdjustment } from '../nodes/DocumentView'; +import { FieldViewProps } from '../nodes/FieldView'; +import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { StyleProp } from '../StyleProvider'; import './CollectionNoteTakingView.scss'; import { CollectionNoteTakingViewColumn } from './CollectionNoteTakingViewColumn'; -import CollectionNoteTakingViewDivider from './CollectionNoteTakingViewDivider'; +import { CollectionNoteTakingViewDivider } from './CollectionNoteTakingViewDivider'; import { CollectionSubView } from './CollectionSubView'; const _global = (window /* browser */ || global) /* node */ as any; @@ -40,7 +42,6 @@ export type collectionNoteTakingViewProps = { @observer export class CollectionNoteTakingView extends CollectionSubView>() { - _pivotFieldDisposer?: IReactionDisposer; _autoHeightDisposer?: IReactionDisposer; _masonryGridRef: HTMLDivElement | null = null; _draggerRef = React.createRef(); @@ -54,10 +55,10 @@ export class CollectionNoteTakingView extends CollectionSubView pair.layout instanceof Doc && !pair.layout.hidden).map(pair => pair.layout); @@ -90,7 +91,7 @@ export class CollectionNoteTakingView extends CollectionSubView([new SchemaHeaderField('New Column')]); + this.dataDoc.columnHeaders = new List([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 { @@ -126,18 +127,16 @@ export class CollectionNoteTakingView extends CollectionSubView { - docIdsToRemove.add(d[Id]); - }); + 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 => { - if (!d[this.pivotField]) { - d[this.pivotField] = columnHeaders.length > 0 ? columnHeaders[0].heading : `New Column`; + if (!d[this.notetakingCategoryField]) { + d[this.notetakingCategoryField] = columnHeaders.length > 0 ? columnHeaders[0].heading : `New Column`; } - const sectionValue = d[this.pivotField] as object; + const sectionValue = d[this.notetakingCategoryField] as object; // look for if header exists already const existingHeader = columnHeaders.find(sh => sh.heading === sectionValue.toString()); @@ -156,14 +155,15 @@ export class CollectionNoteTakingView extends CollectionSubView { + setTimeout( + action(() => (this.docsDraggedRowCol.length = 0)), + 100 + ); + }; componentDidMount() { super.componentDidMount?.(); - // reset section headers when a new filter is inputted - this._pivotFieldDisposer = reaction( - () => this.pivotField, - () => (this.layoutDoc._columnHeaders = new List()) - ); - + document.addEventListener('pointerup', this.removeDocDragHighlight, true); this._autoHeightDisposer = reaction( () => this.layoutDoc._autoHeight, autoHeight => autoHeight && this.props.setHeight?.(Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), this.headerMargin + Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace('px', '')))))) @@ -171,8 +171,8 @@ export class CollectionNoteTakingView extends CollectionSubView, property: string) => { + if (property === StyleProp.BoxShadow && doc && DragManager.docsBeingDragged.includes(doc)) { + return `#9c9396 ${StrCast(doc?.boxShadow, '10px 10px 0.9vw')}`; + } if (property === StyleProp.Opacity && doc) { if (this.props.childOpacity) { return this.props.childOpacity(); @@ -258,9 +261,9 @@ export class CollectionNoteTakingView extends CollectionSubView sh.heading === castedSectionValue); const colStartXCoords = this.columnStartXCoords; @@ -364,20 +367,14 @@ export class CollectionNoteTakingView extends CollectionSubView { - const noteTakingDocTransform = () => this.getDocTransform(doc); - let pos1 = noteTakingDocTransform() - .inverse() - .transformPoint(0, this.getDocHeight(doc) + 2 * this.gridGap)[1]; + let pos1 = this.getDocHeight(doc) + 2 * this.gridGap; pos1 += pos0; // updating drop position based on y coordinates const yCoordInBetween = clientY > pos0 && (clientY < pos1 || i == colDocs.length - 1); @@ -393,10 +390,10 @@ export class CollectionNoteTakingView extends CollectionSubView (d[this.pivotField] = colHeader)); + DragManager.docsBeingDragged.forEach(d => (d[this.notetakingCategoryField] = colHeader)); // used to notify sections to re-render - // console.log([dropInd, this.getColumnFromXCoord(xCoord)]) - this.docsDraggedRowCol = [dropInd, this.getColumnFromXCoord(xCoord)]; + this.docsDraggedRowCol.length = 0; + this.docsDraggedRowCol.push(dropInd, this.getColumnFromXCoord(xCoord)); } }; @@ -425,7 +422,7 @@ export class CollectionNoteTakingView extends CollectionSubView { if (d instanceof Promise) return; - const sectionValue = d[this.pivotField] as object; + const sectionValue = d[this.notetakingCategoryField] as object; if (sectionValue.toString() == colHeader) { docsMatchingHeader.push(d); } @@ -434,13 +431,24 @@ export class CollectionNoteTakingView extends CollectionSubView { + const docView = fieldProps.DocumentView?.(); + if (docView && (e.ctrlKey || docView.rootDoc._singleLine) && ['Enter'].includes(e.key)) { + e.stopPropagation?.(); + const newDoc = Doc.MakeCopy(docView.rootDoc, true); + Doc.GetProto(newDoc).text = undefined; + FormattedTextBox.SelectOnLoad = newDoc[Id]; + return this.addDocument?.(newDoc); + } + }; + @undoBatch @action onInternalDrop = (e: Event, de: DragManager.DropEvent) => { if (de.complete.docDragData) { if (super.onInternalDrop(e, de)) { - DragManager.docsBeingDragged = []; - // this.docsDraggedRowCol = [] // filter out the currently dragged docs from the child docs, since we will insert them later const rowCol = this.docsDraggedRowCol; const droppedDocs = this.childDocs.slice().filter((d: Doc, ind: number) => 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). @@ -456,10 +464,9 @@ export class CollectionNoteTakingView extends CollectionSubView object[]; renderChildren: (docs: Doc[]) => JSX.Element[]; addDocument: (doc: Doc | Doc[]) => boolean; @@ -48,37 +48,37 @@ interface CSVFieldColumnProps { observeHeight: (myref: any) => void; unobserveHeight: (myref: any) => void; editableViewProps: any; - resizeColumns: (n: number) => void - columnStartXCoords: number[] - PanelWidth: number - maxColWidth: number + resizeColumns: (n: number) => void; + columnStartXCoords: number[]; + PanelWidth: number; + maxColWidth: number; // docsByColumnHeader: Map // setDocsForColHeader: (key: string, docs: Doc[]) => void } @observer export class CollectionNoteTakingViewColumn extends React.Component { - @observable private _background = "inherit"; + @observable private _background = 'inherit'; @computed get columnWidth() { - // base cases - if (!this.props.columnHeaders || !this.props.headingObject || this.props.columnHeaders.length == 1) { - return this.props.maxColWidth - } - const i = this.props.columnHeaders.indexOf(this.props.headingObject) - if (i < 0) { - 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 + // base cases + if (!this.props.columnHeaders || !this.props.headingObject || this.props.columnHeaders.length == 1) { + return this.props.maxColWidth; + } + const i = this.props.columnHeaders.indexOf(this.props.headingObject); + if (i < 0) { + 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; private _headerRef: React.RefObject = React.createRef(); @observable _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading; - @observable _color = this.props.headingObject ? this.props.headingObject.color : "#f1efeb"; + @observable _color = this.props.headingObject ? this.props.headingObject.color : '#f1efeb'; _ele: HTMLElement | null = null; // This is likely similar to what we will be doing. Why do we need to make these refs? @@ -90,7 +90,7 @@ export class CollectionNoteTakingViewColumn extends React.Component { const parsed = parseInt(value); if (!isNaN(parsed)) return parsed; - if (value.toLowerCase().indexOf("true") > -1) return true; - if (value.toLowerCase().indexOf("false") > -1) return false; + if (value.toLowerCase().indexOf('true') > -1) return true; + if (value.toLowerCase().indexOf('false') > -1) return false; return value; - } + }; @action headingChanged = (value: string, shiftDown?: boolean) => { @@ -117,7 +117,7 @@ export class CollectionNoteTakingViewColumn extends React.Component i.heading).indexOf(castedValue.toString()) !== -1) { return false; } - this.props.docList.forEach(d => d[this.props.pivotField] = castedValue); + this.props.docList.forEach(d => (d[this.props.pivotField] = castedValue)); if (this.props.headingObject) { this.props.headingObject.setHeading(castedValue.toString()); this._heading = this.props.headingObject.heading; @@ -125,11 +125,11 @@ export class CollectionNoteTakingViewColumn extends React.Component SnappingManager.GetIsDragging() && (this._background = "#b4b4b4"); - @action pointerLeave = () => this._background = "inherit"; - textCallback = (char: string) => this.addNewTextDoc("-typed text-", false, true); + @action pointerEntered = () => SnappingManager.GetIsDragging() && (this._background = '#b4b4b4'); + @action pointerLeave = () => (this._background = 'inherit'); + textCallback = (char: string) => this.addNewTextDoc('-typed text-', false, true); @action addNewTextDoc = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => { @@ -139,46 +139,46 @@ export class CollectionNoteTakingViewColumn extends React.Component { if (!this.props.columnHeaders) { - return + return; } if (this.props.headingObject) { - const index = this.props.columnHeaders.indexOf(this.props.headingObject); - const newIndex = index == 0 ? 1 : index - 1 - const newHeader = this.props.columnHeaders[newIndex]; - this.props.docList.forEach(d => d[this.props.pivotField] = newHeader.heading.toString()) - this.props.columnHeaders.splice(index, 1); - this.props.resizeColumns(this.props.columnHeaders.length) + const index = this.props.columnHeaders.indexOf(this.props.headingObject); + const newIndex = index == 0 ? 1 : index - 1; + const newHeader = this.props.columnHeaders[newIndex]; + this.props.docList.forEach(d => (d[this.props.pivotField] = newHeader.heading.toString())); + this.props.columnHeaders.splice(index, 1); + this.props.resizeColumns(this.props.columnHeaders.length); } - } + }; headerDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); - //TODO: I think this is where I'm supposed to edit stuff + //TODO: I think this is where I'm supposed to edit stuff startDrag = (e: PointerEvent, down: number[], delta: number[]) => { - console.log('in startDrag') + console.log('in startDrag'); // is MakeAlias a way to make a copy of a doc without rendering it? const alias = Doc.MakeAlias(this.props.Document); // alias._width = this.props.columnWidth / (this.props.columnHeaders?.length || 1); alias._width = this.columnWidth; alias._pivotField = undefined; let value = this.getValue(this._heading); - value = typeof value === "string" ? `"${value}"` : value; + value = typeof value === 'string' ? `"${value}"` : value; alias.viewSpecScript = ScriptField.MakeFunction(`doc.${this.props.pivotField} === ${value}`, { doc: Doc.name }); if (alias.viewSpecScript) { - const options = {hideSource: false} + const options = { hideSource: false }; DragManager.StartDocumentDrag([this._headerRef.current!], new DragManager.DocumentDragData([alias]), e.clientX, e.clientY, options); - console.log('in startDrag') + console.log('in startDrag'); return true; } return false; - } + }; menuCallback = (x: number, y: number) => { ContextMenu.Instance.clearItems(); @@ -187,44 +187,62 @@ export class CollectionNoteTakingViewColumn extends React.Component { - const key = this.props.pivotField; - doc[key] = this.getValue(this.props.heading); - FormattedTextBox.SelectOnLoad = doc[Id]; - return this.props.addDocument?.(doc); - }, this.props.addDocument, x, y, true, this.props.pivotField, pivotValue); + DocUtils.addDocumentCreatorMenuItems( + doc => { + const key = this.props.pivotField; + doc[key] = this.getValue(this.props.heading); + FormattedTextBox.SelectOnLoad = doc[Id]; + return this.props.addDocument?.(doc); + }, + this.props.addDocument, + x, + y, + true, + this.props.pivotField, + pivotValue + ); - Array.from(Object.keys(Doc.GetProto(dataDoc))).filter(fieldKey => dataDoc[fieldKey] instanceof RichTextField || dataDoc[fieldKey] instanceof ImageField || typeof (dataDoc[fieldKey]) === "string").map(fieldKey => - docItems.push({ - description: ":" + fieldKey, event: () => { - const created = DocUtils.DocumentFromField(dataDoc, fieldKey, Doc.GetProto(this.props.Document)); - if (created) { - if (this.props.Document.isTemplateDoc) { - Doc.MakeMetadataFieldTemplate(created, this.props.Document); + Array.from(Object.keys(Doc.GetProto(dataDoc))) + .filter(fieldKey => dataDoc[fieldKey] instanceof RichTextField || dataDoc[fieldKey] instanceof ImageField || typeof dataDoc[fieldKey] === 'string') + .map(fieldKey => + docItems.push({ + description: ':' + fieldKey, + event: () => { + const created = DocUtils.DocumentFromField(dataDoc, fieldKey, Doc.GetProto(this.props.Document)); + if (created) { + if (this.props.Document.isTemplateDoc) { + Doc.MakeMetadataFieldTemplate(created, this.props.Document); + } + return this.props.addDocument?.(created); } - return this.props.addDocument?.(created); - } - }, icon: "compress-arrows-alt" - })); - Array.from(Object.keys(Doc.GetProto(dataDoc))).filter(fieldKey => DocListCast(dataDoc[fieldKey]).length).map(fieldKey => - docItems.push({ - description: ":" + fieldKey, event: () => { - const created = Docs.Create.CarouselDocument([], { _width: 400, _height: 200, title: fieldKey }); - if (created) { - const container = this.props.Document.resolvedDataDoc ? Doc.GetProto(this.props.Document) : this.props.Document; - if (container.isTemplateDoc) { - Doc.MakeMetadataFieldTemplate(created, container); - return Doc.AddDocToList(container, Doc.LayoutFieldKey(container), created); + }, + icon: 'compress-arrows-alt', + }) + ); + Array.from(Object.keys(Doc.GetProto(dataDoc))) + .filter(fieldKey => DocListCast(dataDoc[fieldKey]).length) + .map(fieldKey => + docItems.push({ + description: ':' + fieldKey, + event: () => { + const created = Docs.Create.CarouselDocument([], { _width: 400, _height: 200, title: fieldKey }); + if (created) { + const container = this.props.Document.resolvedDataDoc ? Doc.GetProto(this.props.Document) : this.props.Document; + if (container.isTemplateDoc) { + Doc.MakeMetadataFieldTemplate(created, container); + return Doc.AddDocToList(container, Doc.LayoutFieldKey(container), created); + } + return this.props.addDocument?.(created) || false; } - return this.props.addDocument?.(created) || false; - } - }, icon: "compress-arrows-alt" - })); - !Doc.UserDoc().noviceMode && ContextMenu.Instance.addItem({ description: "Doc Fields ...", subitems: docItems, icon: "eye" }); - !Doc.UserDoc().noviceMode && ContextMenu.Instance.addItem({ description: "Containers ...", subitems: layoutItems, icon: "eye" }); - ContextMenu.Instance.setDefaultItem("::", (name: string): void => { - Doc.GetProto(this.props.Document)[name] = ""; - const created = Docs.Create.TextDocument("", { title: name, _width: 250, _autoHeight: true }); + }, + icon: 'compress-arrows-alt', + }) + ); + !Doc.UserDoc().noviceMode && ContextMenu.Instance.addItem({ description: 'Doc Fields ...', subitems: docItems, icon: 'eye' }); + !Doc.UserDoc().noviceMode && ContextMenu.Instance.addItem({ description: 'Containers ...', subitems: layoutItems, icon: 'eye' }); + ContextMenu.Instance.setDefaultItem('::', (name: string): void => { + Doc.GetProto(this.props.Document)[name] = ''; + const created = Docs.Create.TextDocument('', { title: name, _width: 250, _autoHeight: true }); if (created) { if (this.props.Document.isTemplateDoc) { Doc.MakeMetadataFieldTemplate(created, this.props.Document); @@ -233,98 +251,100 @@ export class CollectionNoteTakingViewColumn extends React.Component -
- evContents} - SetValue={this.headingChanged} - contents={evContents} - oneLine={true} - /> +
+ evContents} SetValue={this.headingChanged} contents={evContents} oneLine={true} />
-
: (null); +
+ ) : null; // const templatecols = `${this.props.columnWidth / this.props.numGroupColumns}px `; const templatecols = `${this.columnWidth}px `; const type = this.props.Document.type; - return <> - {headingView} - {
-
- {this.props.renderChildren(this.props.docList)} -
+ return ( + <> + {headingView} + { +
+
+ {this.props.renderChildren(this.props.docList)} +
- {!this.props.chromeHidden && type !== DocumentType.PRES ? -
- style={{ width: this.columnWidth - 20, marginBottom: 10 }}> -
- -
-
- -
- {(this.props.columnHeaders?.length && this.props.columnHeaders.length > 1) && - - } -
- : null} -
- } - ; + {!this.props.chromeHidden && type !== DocumentType.PRES ? ( +
+ style={{ width: this.columnWidth - 20, marginBottom: 10 }}> +
+ +
+
+ +
+ {this.props.columnHeaders?.length && this.props.columnHeaders.length > 1 && ( + + )} +
+ ) : null} +
+ } + + ); } - render() { TraceMobx(); const heading = this._heading; return ( -
+ ref={this.createColumnDropRef} + onPointerEnter={this.pointerEntered} + onPointerLeave={this.pointerLeave}> {this.innards} -
+
); } -} \ No newline at end of file +} diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx index ed5dc3715..7d31b3193 100644 --- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx @@ -1,61 +1,63 @@ -import { action, observable } from "mobx"; -import * as React from "react"; +import { action, observable } from 'mobx'; +import * as React from 'react'; interface DividerProps { - index: number - xMargin: number - setColumnStartXCoords: (movementX: number, colIndex: number) => void + index: number; + xMargin: number; + setColumnStartXCoords: (movementX: number, colIndex: number) => void; } -export default class Divider extends React.Component{ - @observable private isHoverActive = false; - @observable private isResizingActive = false; - - @action - private registerResizing = (e: React.PointerEvent) => { - e.stopPropagation(); - e.preventDefault(); - window.removeEventListener("pointermove", this.onPointerMove); - window.removeEventListener("pointerup", this.onPointerUp); - window.addEventListener("pointermove", this.onPointerMove); - window.addEventListener("pointerup", this.onPointerUp); - this.isResizingActive = true; - } +export class CollectionNoteTakingViewDivider extends React.Component { + @observable private isHoverActive = false; + @observable private isResizingActive = false; - @action - private onPointerUp = () => { - this.isResizingActive = false; - this.isHoverActive = false; - window.removeEventListener("pointermove", this.onPointerMove); - window.removeEventListener("pointerup", this.onPointerUp); - } + @action + private registerResizing = (e: React.PointerEvent) => { + e.stopPropagation(); + e.preventDefault(); + window.removeEventListener('pointermove', this.onPointerMove); + window.removeEventListener('pointerup', this.onPointerUp); + window.addEventListener('pointermove', this.onPointerMove); + window.addEventListener('pointerup', this.onPointerUp); + this.isResizingActive = true; + }; - @action - onPointerMove = ({ movementX }: PointerEvent) => { - this.props.setColumnStartXCoords(movementX, this.props.index) - } - - render() { - return ( -
this.isHoverActive = true)} - onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))} - > -
this.registerResizing(e)} - style={{ - height: "95%", - width: 12, - borderRight: "4px solid #282828", - borderLeft: "4px solid #282828", - margin: "0px 10px" - }} - /> -
- ) - } -} \ No newline at end of file + @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 ( +
(this.isHoverActive = true))} + onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}> +
this.registerResizing(e)} + style={{ + height: '95%', + width: 12, + borderRight: '4px solid #282828', + borderLeft: '4px solid #282828', + margin: '0px 10px', + }} + /> +
+ ); + } +} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 1927db51e..ef68cadd7 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -447,8 +447,6 @@ export class CollectionStackingView extends CollectionSubView 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/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index afb618b34..1ee1aec5a 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -156,9 +156,7 @@ export interface DocumentViewSharedProps { scriptContext?: any; // can be assigned anything and will be passed as 'scriptContext' to any OnClick script that executes on this document createNewFilterDoc?: () => void; updateFilterDoc?: (doc: Doc) => void; - // Parker added both of these - originalBackgroundColor?: string; - isNoteTakingView?: boolean; + dontHideOnDrag?: boolean; } // these props are specific to DocuentViews @@ -494,12 +492,6 @@ export class DocumentViewInternal extends DocComponent { - doc.backgroundColor = "#C9DAEF"; - doc.opacity = 0.5; - }); - } const [left, top] = this.props.ScreenToLocalTransform().scale(this.NativeDimScaling).inverse().transformPoint(0, 0); dragData.offset = this.props .ScreenToLocalTransform() @@ -511,22 +503,16 @@ export class DocumentViewInternal extends DocComponent (ffview.ChildDrag = this.props.DocumentView())); - DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, { hideSource: hideSource || (!dropAction && !this.layoutDoc.onDragStar && !this.props.isNoteTakingView)}, - () => setTimeout(action(() => { - ffview && (ffview.ChildDrag = undefined) - //TODO: is there a better way than adding another field to the props? Not quite sure how "this" works tbh - if (this.props.isNoteTakingView) { - this.props.Document.backgroundColor = ""; - this.props.Document.opacity = 1; - } - }))); // this needs to happen after the drop event is processed. + ffview && runInAction(() => (ffview.ChildDrag = this.props.DocumentView())); + DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, { hideSource: hideSource || (!dropAction && !this.layoutDoc.onDragStart && !this.props.dontHideOnDrag) }, () => + setTimeout(action(() => ffview && (ffview.ChildDrag = undefined))) + ); // this needs to happen after the drop event is processed. ffview?.setupDragLines(false); } } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index b8ee89ef2..add83f4e0 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1001,7 +1001,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent ({ sidebarHeight: this.sidebarHeight, textHeight: this.textHeight, autoHeight: this.autoHeight, marginsHeight: this.autoHeightMargins }), ({ sidebarHeight, textHeight, autoHeight, marginsHeight }) => { const newHeight = this.contentScaling * (marginsHeight + Math.max(sidebarHeight, textHeight)); - autoHeight && newHeight && this.props.setHeight?.(newHeight); + if (autoHeight && newHeight && newHeight !== this.rootDoc.height) { + this.props.setHeight?.(newHeight); + } }, { fireImmediately: true } ); @@ -1695,7 +1697,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent (this.rootDoc[this.fieldKey + '-scrollHeight'] = scrollHeight); - if (this.rootDoc === this.layoutDoc.doc || this.layoutDoc.resolvedDataDoc) { + if (this.rootDoc === this.layoutDoc || this.layoutDoc.resolvedDataDoc) { setScrollHeight(); } else { setTimeout(setScrollHeight, 10); // if we have a template that hasn't been resolved yet, we can't set the height or we'd be setting it on the unresolved template. So set a timeout and hope its arrived... -- 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/client/views/collections/CollectionNoteTakingViewDivider.tsx') 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 b7c2e1081e4efe7167a86fb1d9f641bea8b93bba Mon Sep 17 00:00:00 2001 From: ljungster 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/client/views/collections/CollectionNoteTakingViewDivider.tsx') 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/client/views/collections/CollectionNoteTakingViewDivider.tsx') 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 ef2cd862c062556008a1897b408399dedaee8210 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 25 Aug 2022 17:04:53 -0400 Subject: fixed issues with reloading notetaking view and having columns be exactly the same. fixed adding columns so that changes are actually propagated to the DB. SchemaHeaderFields are bad news... --- .../collections/CollectionNoteTakingView.scss | 32 +++++--- .../views/collections/CollectionNoteTakingView.tsx | 42 +++++----- .../collections/CollectionNoteTakingViewColumn.tsx | 89 +++++++++------------- .../CollectionNoteTakingViewDivider.tsx | 1 - 4 files changed, 80 insertions(+), 84 deletions(-) (limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx') diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss index fe98f307e..5582fd391 100644 --- a/src/client/views/collections/CollectionNoteTakingView.scss +++ b/src/client/views/collections/CollectionNoteTakingView.scss @@ -1,7 +1,7 @@ @import '../global/globalCssVariables'; .collectionNoteTakingView-DocumentButtons { - display: flex; + display: none; justify-content: space-between; margin: auto; } @@ -51,6 +51,17 @@ display: flex; } +.collectionNoteTakingViewFieldColumn { + height: 100%; + display: flex; + flex-direction: colum; +} +.collectionNoteTakingViewFieldColumn:hover { + .collectionNoteTakingView-DocumentButtons { + display: flex; + } +} + // TODO:glr Turn this into a seperate class .documentButtonMenu { position: relative; @@ -82,7 +93,6 @@ top: 0; overflow-y: auto; overflow-x: hidden; - flex-wrap: wrap; transition: top 0.5s; > div { @@ -133,6 +143,16 @@ margin-left: -5; } + .collectionNoteTakingView-sectionDelete { + display: none; + position: absolute; + right: 0; + width: max-content; + height: max-content; + top: 10; + padding: 2; + } + // Documents in NoteTaking view .collectionNoteTakingView-columnDoc { display: flex; @@ -347,14 +367,6 @@ } } } - - .collectionNoteTakingView-sectionDelete { - position: absolute; - right: 25px; - top: 0; - height: 100%; - display: none; - } } .collectionNoteTakingView-sectionHeader:hover { diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 5a6d899ef..615141485 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -3,7 +3,7 @@ import { CursorProperty } from 'csstype'; 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'; +import { Copy, Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; @@ -42,7 +42,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { _masonryGridRef: HTMLDivElement | null = null; _draggerRef = React.createRef(); notetakingCategoryField = 'NotetakingCategory'; - dividerWidth = 16; + public DividerWidth = 16; @observable docsDraggedRowCol: number[] = []; @observable _cursor: CursorProperty = 'grab'; @observable _scroll = 0; @@ -53,10 +53,11 @@ export class CollectionNoteTakingView extends CollectionSubView() { @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')); - if (needsUnsetCategory) { + if (needsUnsetCategory || columnHeaders === undefined || columnHeaders.length === 0) { setTimeout(() => { + const columnHeaders = Cast(this.dataDoc.columnHeaders, listSpec(SchemaHeaderField), null); const needsUnsetCategory = this.childDocs.some(d => !d[this.notetakingCategoryField] && !columnHeaders?.find(sh => sh.heading === 'unset')); - if (needsUnsetCategory) { + if (needsUnsetCategory || columnHeaders === undefined || columnHeaders.length === 0) { if (columnHeaders) columnHeaders.push(new SchemaHeaderField('unset', undefined, undefined, 1)); else this.dataDoc.columnHeaders = new List(); } @@ -68,10 +69,10 @@ export class CollectionNoteTakingView extends CollectionSubView() { 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())); + return NumCast(this.layoutDoc._xMargin, 5); } @computed get yMargin() { - return this.props.yPadding || NumCast(this.layoutDoc._yMargin, 5); + return NumCast(this.layoutDoc._yMargin, 5); } @computed get gridGap() { return NumCast(this.layoutDoc._gridGap, 10); @@ -86,13 +87,13 @@ export class CollectionNoteTakingView extends CollectionSubView() { } // maxColWidth returns the maximum column width, which is slightly less than the total available space. @computed get maxColWidth() { - return this.props.PanelWidth() - 2 * this.xMargin; + return this.props.PanelWidth(); } // availableWidth is the total amount of non-divider width. Since widths are stored relatively, // we use availableWidth to convert from a percentage to a pixel count. @computed get availableWidth() { const numDividers = this.numGroupColumns - 1; - return this.maxColWidth - numDividers * this.dividerWidth; + return this.maxColWidth - numDividers * this.DividerWidth; } // children is passed as a prop to the NoteTakingField, which uses this function @@ -295,12 +296,9 @@ export class CollectionNoteTakingView extends CollectionSubView() { const heading = !d[this.notetakingCategoryField] ? 'unset' : Field.toString(d[this.notetakingCategoryField] as Field); const existingHeader = this.columnHeaders.find(sh => sh.heading === heading); const existingWidth = existingHeader?.width ? existingHeader.width : 0; - const maxWidth = existingWidth > 0 ? existingWidth * this.availableWidth - 2 * this.xMargin : this.maxColWidth - 2 * this.xMargin; - if (d.type === DocumentType.RTF) { - return maxWidth; - } - const width = d[WidthSym](); - return width < maxWidth ? width : maxWidth; + const maxWidth = existingWidth > 0 ? existingWidth * this.availableWidth : this.maxColWidth; + const width = d.fitWidth ? maxWidth : d[WidthSym](); + return Math.min(maxWidth - CollectionNoteTakingViewColumn.ColumnMargin, width < maxWidth ? width : maxWidth); } // how to get the height of a document. Nothing special here. @@ -312,8 +310,6 @@ export class CollectionNoteTakingView extends CollectionSubView() { 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.numGroupColumns; - // const docWid = this.layoutDoc._columnsFill ? colWid : Math.min(this.getDocWidth(d), colWid); const docWid = this.getDocWidth(d); return Math.min(maxHeight, (docWid * nh) / nw); } @@ -390,7 +386,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { let colStartXCoord = 0; for (let i = 0; i < numColumns; i++) { coords.push(colStartXCoord); - colStartXCoord += this.columnHeaders[i].width * this.availableWidth + this.dividerWidth; + colStartXCoord += this.columnHeaders[i].width * this.availableWidth + this.DividerWidth; } coords.push(this.PanelWidth); for (let i = 0; i < numColumns; i++) { @@ -543,7 +539,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { numGroupColumns={this.numGroupColumns} gridGap={this.gridGap} pivotField={this.notetakingCategoryField} - dividerWidth={this.dividerWidth} + dividerWidth={this.DividerWidth} maxColWidth={this.maxColWidth} availableWidth={this.availableWidth} PanelWidth={this.PanelWidth} @@ -576,7 +572,9 @@ export class CollectionNoteTakingView extends CollectionSubView() { } 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; + value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, newColWidth)) && this.resizeColumns(true, newColWidth, this.columnHeaders.length - 1); + this.dataDoc.columnHeaders = new List(columnHeaders.map(header => header[Copy]())); + return true; }; onContextMenu = (e: React.MouseEvent): void => { @@ -621,10 +619,10 @@ export class CollectionNoteTakingView extends CollectionSubView() { @computed get buttonMenu() { const menuDoc: Doc = Cast(this.rootDoc.buttonMenuDoc, Doc, null); if (menuDoc) { - const width: number = NumCast(menuDoc._width, 30); - const height: number = NumCast(menuDoc._height, 30); + const width = NumCast(menuDoc._width, 30); + const height = NumCast(menuDoc._height, 30); return ( -
+
= React.createRef(); + public static ColumnMargin = 10; @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; @@ -153,14 +144,14 @@ export class CollectionNoteTakingViewColumn extends React.Component(acolumnHeaders.map(header => header[Copy]())); // needed for undo to work properly. otherwise we end up changing field values in the undo stack since they are shared by reference + const columnHeaders = acolumnHeaders; // new List(acolumnHeaders.map(header => header[Copy]())); // needed for undo to work properly. otherwise we end up changing field values in the undo stack since they are shared by reference 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); - Doc.GetProto(this.props.Document).columnHeaders = columnHeaders; + //Doc.GetProto(this.props.Document).columnHeaders = columnHeaders; this.props.resizeColumns(false, colWidth, index); } }; @@ -251,9 +242,7 @@ export class CollectionNoteTakingViewColumn extends React.Component
evContents} SetValue={this.headingChanged} contents={evContents} oneLine={true} />
+ {(this.props.columnHeaders?.length ?? 0) > 1 && ( + + )}
) : null; - const templatecols = `${this.columnWidth}px `; + const templatecols = this.columnWidth; const type = this.props.Document.type; return ( <> {headingView} - { -
-
- {this.props.renderChildren(this.props.docList)} -
+
+
+ {this.props.renderChildren(this.props.docList)} +
- {!this.props.chromeHidden && type !== DocumentType.PRES ? ( -
-
- -
-
- -
- {this.props.columnHeaders?.length && this.props.columnHeaders.length > 1 && ( - - )} + {!this.props.chromeHidden && type !== DocumentType.PRES ? ( +
+
+
- ) : null} -
- } +
+ +
+
+ ) : null} +
); } diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx index 8d659f790..a1309b11f 100644 --- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx @@ -57,7 +57,6 @@ export class CollectionNoteTakingViewDivider extends React.Component
-- cgit v1.2.3-70-g09d2