diff options
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.tsx | 30 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionStackingView.tsx | 64 |
2 files changed, 74 insertions, 20 deletions
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 10db6e0bb..11d71d023 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -20,7 +20,7 @@ import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; import { CollectionSubView } from "./CollectionSubView"; import { Opt, Field, Doc, DocListCastAsync, DocListCast } from "../../../new_fields/Doc"; -import { Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types"; +import { Cast, FieldValue, NumCast, StrCast, BoolCast } from "../../../new_fields/Types"; import { listSpec } from "../../../new_fields/Schema"; import { List } from "../../../new_fields/List"; import { Id } from "../../../new_fields/FieldSymbols"; @@ -30,6 +30,8 @@ import { ContextMenu } from "../ContextMenu"; import { CollectionView } from "./CollectionView"; import { CollectionPDFView } from "./CollectionPDFView"; import { CollectionVideoView } from "./CollectionVideoView"; +import { SelectionManager } from "../../util/SelectionManager"; +import { undoBatch } from "../../util/UndoManager"; library.add(faCog); @@ -392,11 +394,11 @@ interface CollectionSchemaPreviewProps { whenActiveChanged: (isActive: boolean) => void; addDocTab: (document: Doc, where: string) => void; setPreviewScript: (script: string) => void; - previewScript: string; + previewScript?: string; } @observer -class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewProps>{ +export class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewProps>{ private get nativeWidth() { return NumCast(this.props.Document!.nativeWidth, this.props.width()); } private get nativeHeight() { return NumCast(this.props.Document!.nativeHeight, this.props.height()); } private contentScaling = () => { @@ -414,9 +416,26 @@ class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewPro onPreviewScriptChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.props.setPreviewScript(e.currentTarget.value); } + @undoBatch + @action + public collapseToPoint = (scrpt: number[], expandedDocs: Doc[] | undefined): void => { + SelectionManager.DeselectAll(); + if (expandedDocs) { + let isMinimized: boolean | undefined; + expandedDocs.map(d => Doc.GetProto(d)).map(maximizedDoc => { + if (isMinimized === undefined) { + isMinimized = BoolCast(maximizedDoc.isMinimized, false); + } + maximizedDoc.isMinimized = !isMinimized; + }); + } + } render() { trace(); console.log(this.props.Document); + let input = this.props.previewScript === undefined ? (null) : + <input className="collectionSchemaView-input" value={this.props.previewScript} onChange={this.onPreviewScriptChange} + style={{ left: `calc(50% - ${Math.min(75, (this.props.Document ? this.PanelWidth() / 2 : 75))}px)` }} />; return (<div className="collectionSchemaView-previewRegion" style={{ width: this.props.width() }}> {!this.props.Document || !this.props.width ? (null) : ( <div className="collectionSchemaView-previewDoc" style={{ transform: `translate(${this.centeringOffset}px, 0px)` }}> @@ -431,11 +450,10 @@ class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewPro whenActiveChanged={this.props.whenActiveChanged} bringToFront={emptyFunction} addDocTab={this.props.addDocTab} - toggleMinimized={emptyFunction} + collapseToPoint={this.collapseToPoint} /> </div>)} - <input className="collectionSchemaView-input" value={this.props.previewScript} onChange={this.onPreviewScriptChange} - style={{ left: `calc(50% - ${Math.min(75, (this.props.Document ? this.PanelWidth() / 2 : 75))}px)` }} /> + {input} </div>); } }
\ No newline at end of file diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 62af92633..25cc55be9 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -10,6 +10,7 @@ import { undoBatch } from "../../util/UndoManager"; import { DocumentView } from "../nodes/DocumentView"; import "./CollectionStackingView.scss"; import { CollectionSubView } from "./CollectionSubView"; +import { CollectionSchemaPreview } from "./CollectionSchemaView"; @observer export class CollectionStackingView extends CollectionSubView(doc => doc) { @@ -21,17 +22,15 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { get columnWidth() { return this.singleColumn ? this.props.PanelWidth() - 2 * this.gridSize - this.gridGap : NumCast(this.props.Document.columnWidth, 250); } componentDidMount() { - this._heightDisposer = reaction(() => [this.childDocs.map(d => [d[HeightSym](), d.isMinimized]), this.props.PanelWidth()], + this._heightDisposer = reaction(() => [this.childDocs.map(d => [d[HeightSym](), d.isMinimized]), this.props.PanelHeight(), this.props.PanelWidth()], () => { if (this.singleColumn) { - this.childDocs.filter(d => !d.isMinimized).map(d => { - d.width = this.props.PanelWidth(); + this.props.Document.height = this.childDocs.filter(d => !d.isMinimized).reduce((height, d) => { + let hgt = d[HeightSym](); let nw = NumCast(d.nativeWidth); let nh = NumCast(d.nativeHeight); - if (nw && nh) d.height = nh / nw * d.width; - }); - this.props.Document.height = this.childDocs.filter(d => !d.isMinimized).reduce((height, d) => { - let rowSpan = Math.ceil((this.columnWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this.gridSize + this.gridGap)); + if (nw && nh) hgt = nh / nw * Math.min(this.columnWidth, d[WidthSym]()); + let rowSpan = Math.ceil((hgt + this.gridGap) / (this.gridSize + this.gridGap)); return height + rowSpan * (this.gridSize + this.gridGap); }, 10); } @@ -71,13 +70,49 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { }); } } + + @computed + get singleColumnChildren() { + return this.childDocs.filter(d => !d.isMinimized).map(d => { + let dref = React.createRef<HTMLDivElement>(); + let script = undefined; + let colWidth = () => this.columnWidth; + let rowHeight = () => { + let hgt = d[HeightSym](); + let nw = NumCast(d.nativeWidth); + let nh = NumCast(d.nativeHeight); + if (nw && nh) hgt = nh / nw * Math.min(this.columnWidth, d[WidthSym]()); + return hgt; + } + let dxf = () => this.getDocTransform(d, dref.current!).scale(this.columnWidth / d[WidthSym]()); + return <div className="colletionStackingView-masonryDoc" + key={d[Id]} + ref={dref} + style={{ width: colWidth(), height: rowHeight() }} > + <CollectionSchemaPreview + Document={d} + width={colWidth} + height={rowHeight} + getTransform={dxf} + CollectionView={this.props.CollectionView} + addDocument={this.props.addDocument} + removeDocument={this.props.removeDocument} + active={this.props.active} + whenActiveChanged={this.props.whenActiveChanged} + addDocTab={this.props.addDocTab} + setPreviewScript={emptyFunction} + previewScript={script}> + </CollectionSchemaPreview> + </div>; + }); + } @computed get children() { return this.childDocs.filter(d => !d.isMinimized).map(d => { - let colSpan = Math.ceil((this.columnWidth + this.gridGap) / (this.gridSize + this.gridGap)); - let rowSpan = Math.ceil((this.columnWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this.gridSize + this.gridGap)); let dref = React.createRef<HTMLDivElement>(); let dxf = () => this.getDocTransform(d, dref.current!); + let colSpan = Math.ceil((this.columnWidth + this.gridGap) / (this.gridSize + this.gridGap)); + let rowSpan = Math.ceil((this.columnWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this.gridSize + this.gridGap)); let childFocus = (doc: Doc) => { doc.libraryBrush = true; this.props.focus(this.props.Document); // just focus on this collection, not the underlying document because the API doesn't support adding an offset to focus on and we can't pan zoom our contents to be centered. @@ -120,20 +155,21 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { let itemCols = Math.ceil(this.columnWidth / (this.gridSize + this.gridGap)); let cells = Math.floor((this.props.PanelWidth() - leftMargin) / (itemCols * (this.gridSize + this.gridGap))); return ( - <div className="collectionStackingView" style={{ height: this.singleColumn ? "auto" : "100%" }} + <div className="collectionStackingView" style={{ height: "100%" }} ref={this.createRef} onWheel={(e: React.WheelEvent) => e.stopPropagation()}> <div className="collectionStackingView-masonryGrid" style={{ padding: `${topMargin}px 0px 0px ${leftMargin}px`, width: `${cells * itemCols * (this.gridSize + this.gridGap) + leftMargin}`, - height: this.singleColumn ? "auto" : "100%", + height: "100%", + overflow: "hidden", marginLeft: "auto", marginRight: "auto", position: "relative", gridGap: this.gridGap, - gridTemplateColumns: `repeat(auto-fill, minmax(${this.gridSize}px,1fr))`, - gridAutoRows: `${this.gridSize}px` + gridTemplateColumns: this.singleColumn ? undefined : `repeat(auto-fill, minmax(${this.gridSize}px,1fr))`, + gridAutoRows: this.singleColumn ? undefined : `${this.gridSize}px` }} > - {this.children} + {this.singleColumn ? this.singleColumnChildren : this.children} </div> </div> ); |