From 2194afbd13099ab7e6f78e8c69b703282275f607 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 2 Jun 2019 15:42:07 -0400 Subject: better stacking view for single column --- .../views/collections/CollectionSchemaView.tsx | 30 ++++++++-- .../views/collections/CollectionStackingView.tsx | 64 +++++++++++++++++----- 2 files changed, 74 insertions(+), 20 deletions(-) (limited to 'src') 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{ +export class CollectionSchemaPreview extends React.Component{ 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) => { 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) : + ; return (
{!this.props.Document || !this.props.width ? (null) : (
@@ -431,11 +450,10 @@ class CollectionSchemaPreview extends React.Component
)} - + {input}
); } } \ 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(); + 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
+ + +
; + }); + } @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(); 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 ( -
e.stopPropagation()}>
- {this.children} + {this.singleColumn ? this.singleColumnChildren : this.children}
); -- cgit v1.2.3-70-g09d2