From 155f44b563c1338422de5f8f9a7429c69da1039d Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 6 Apr 2020 13:14:57 -0400 Subject: fixed sizing stacking views. fixed rotating images. fixed undo stacking drags. --- .../views/collections/CollectionStackingView.scss | 3 ++ .../views/collections/CollectionStackingView.tsx | 45 ++++------------------ .../CollectionStackingViewFieldColumn.tsx | 16 +++++++- src/client/views/nodes/ImageBox.tsx | 14 ++++--- 4 files changed, 33 insertions(+), 45 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index bfa5ea278..47faa9239 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -26,6 +26,9 @@ position: relative; display: block; } + .collectionStackingViewFieldColumn { + height:max-content; + } .collectionSchemaView-previewDoc { height: 100%; diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index d9183cdb6..84e6ecced 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -24,13 +24,13 @@ import "./CollectionStackingView.scss"; import { CollectionStackingViewFieldColumn } from "./CollectionStackingViewFieldColumn"; import { CollectionSubView } from "./CollectionSubView"; import { CollectionViewType } from "./CollectionView"; +import { SelectionManager } from "../../util/SelectionManager"; const _global = (window /* browser */ || global /* node */) as any; @observer export class CollectionStackingView extends CollectionSubView(doc => doc) { _masonryGridRef: HTMLDivElement | null = null; _draggerRef = React.createRef(); - _heightDisposer?: IReactionDisposer; _pivotFieldDisposer?: IReactionDisposer; _docXfs: any[] = []; _columnStart: number = 0; @@ -129,34 +129,6 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { } componentDidMount() { super.componentDidMount(); - // this._heightDisposer = reaction(() => { - // TraceMobx(); - // if (this.props.Document._autoHeight && !this.layoutDoc._nativeHeight) { - // const sectionsList = Array.from(this.Sections.size ? this.Sections.values() : [this.filteredChildren]); - // if (this.isStackingView) { - // const res = Math.max(...sectionsList.map((s, i) => { - // const secSize = (this.Sections.size ? 50 : 0) + s.reduce((height, d, i) => { - // const val = this.getSimpleDocHeight(d) + (i === s.length - 1 ? this.yMargin : this.gridGap); - // console.log(d.title + " " + val + " => " + (val + height)); - // return height + val; - // }, this.yMargin); - // console.log("Sec" + i + " = " + secSize); - // return secSize; - // })); - // return res * this.props.ContentScaling(); - // } else { - // const sum = Array.from(this._heightMap.values()).reduce((acc: number, curr: number) => acc += curr, 0); - // return this.props.ContentScaling() * (sum + (this.Sections.size ? (this.props.Document.miniHeaders ? 20 : 85) : -15)); - // } - // } - // return -1; - // }, - // (hgt: number) => { - // const doc = hgt === -1 ? undefined : this.props.DataDoc && this.props.DataDoc.layout === this.layoutDoc ? this.props.DataDoc : this.layoutDoc; - // doc && hgt > 0 && (Doc.Layout(doc)._height = hgt); - // }, - // { fireImmediately: true } - // ); // reset section headers when a new filter is inputted this._pivotFieldDisposer = reaction( @@ -166,7 +138,6 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { } componentWillUnmount() { super.componentWillUnmount(); - this._heightDisposer?.(); this._pivotFieldDisposer?.(); } @@ -307,7 +278,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { }); } headings = () => Array.from(this.Sections); - refList = new Map(); + refList: any[] = []; sectionStacking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => { const key = this.pivotField; let type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined = undefined; @@ -318,16 +289,14 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { const cols = () => this.isStackingView ? 1 : Math.max(1, Math.min(this.filteredChildren.length, Math.floor((this.props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap)))); return this.refList.splice(this.refList.indexOf(ref), 1)} observeHeight={(ref) => { if (ref) { - this.refList.set(ref, 0); + this.refList.push(ref); + const doc = this.props.DataDoc && this.props.DataDoc.layout === this.layoutDoc ? this.props.DataDoc : this.layoutDoc; this.observer = new _global.ResizeObserver(action((entries: any) => { - if (this.props.Document.autoHeight && ref) { - const doc = this.props.DataDoc && this.props.DataDoc.layout === this.layoutDoc ? this.props.DataDoc : this.layoutDoc; - for (const entry of entries) { - this.refList.set(ref, entry.contentRect.height); - } - Doc.Layout(doc)._height = Math.max(...Array.from(this.refList.entries()).map(entry => Number(getComputedStyle(entry[0]).height.replace("px", "")))); + if (this.props.Document._autoHeight && ref && !SelectionManager.GetIsDragging()) { + Doc.Layout(doc)._height = Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace("px", "")))); } })); this.observer.observe(ref); diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index dcaffe7af..5d926b7c7 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -40,6 +40,7 @@ interface CSVFieldColumnProps { createDropTarget: (ele: HTMLDivElement) => void; screenToLocalTransform: () => Transform; observeHeight: (myref: any) => void; + unobserveHeight: (myref: any) => void; } @observer @@ -51,13 +52,19 @@ export class CollectionStackingViewFieldColumn extends React.Component { this.dropDisposer?.(); if (ele) { + this._ele = ele; + this.props.observeHeight(ele); this.dropDisposer = DragManager.MakeDropTarget(ele, this.columnDrop.bind(this)); } } + componentWillUnmount() { + this.props.unobserveHeight(this._ele); + } @undoBatch columnDrop = action((e: Event, de: DragManager.DropEvent) => { @@ -354,12 +361,17 @@ export class CollectionStackingViewFieldColumn extends React.Component {this.props.parent.Document.hideHeadings ? (null) : headingView} { this.collapsed ? (null) : -
ref && this.props.observeHeight(ref)}> +
[this.content]; render() { TraceMobx(); - const rotation = NumCast(this.dataDoc[this.fieldKey + "-rotation"]); - const aspect = (rotation % 180) ? this.Document[HeightSym]() / this.Document[WidthSym]() : 1; + const { nativeWidth, nativeHeight } = this.nativeSize; + const aspect = nativeWidth / nativeHeight; const dragging = !SelectionManager.GetIsDragging() ? "" : "-dragging"; return (
-- cgit v1.2.3-70-g09d2