From 70e79356ce89f4afb47220393c541f74eada62fc Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 11 Nov 2020 02:09:18 -0500 Subject: turned off selection highlighting in TreeView because it is way too inefficient. more fixes to laying out fitWidth and other documents in ContentFittingDocViews. testing against GridViews and TreeViews things seem to work. --- .../views/collections/CollectionTreeView.tsx | 3 ++- src/client/views/collections/TreeView.tsx | 22 ++++++++++++---------- .../collectionGrid/CollectionGridView.tsx | 9 ++++++--- 3 files changed, 20 insertions(+), 14 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index a7c8a7cdc..be31ca6e5 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -26,6 +26,7 @@ import { TreeView } from "./TreeView"; import React = require("react"); import { DocumentManager } from '../../util/DocumentManager'; import { FormattedTextBoxComment } from '../nodes/formattedText/FormattedTextBoxComment'; +import { DocumentView } from '../nodes/DocumentView'; export type collectionTreeViewProps = { treeViewHideTitle?: boolean; @@ -158,7 +159,7 @@ export class CollectionTreeView extends CollectionSubView - { @computed get childDocs() { TraceMobx(); return this.childDocList(this.fieldKey); } @computed get childLinks() { return this.childDocList("links"); } @computed get childAnnos() { return this.childDocList(this.fieldKey + "-annotations"); } - @computed get boundsOfCollectionDocument() { - return StrCast(this.props.document.type).indexOf(DocumentType.COL) === -1 || !DocListCast(this.props.document[this.fieldKey]).length ? undefined : - Doc.ComputeContentBounds(DocListCast(this.props.document[this.fieldKey])); + @computed get isCollectionDoc() { + return !StrCast(this.props.document.type).includes(DocumentType.COL) || !DocListCast(this.props.document[this.fieldKey]).length ? false : true } @undoBatch openRight = () => this.props.addDocTab(this.doc, "add:right"); @@ -284,6 +283,7 @@ export class TreeView extends React.Component { docWidth = () => { const layoutDoc = this.layoutDoc; const aspect = Doc.NativeAspect(layoutDoc); + if (layoutDoc._fitWidth) return Math.min(this.props.panelWidth() - 20, layoutDoc[WidthSym]()); if (aspect) return Math.min(layoutDoc[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT * aspect, this.props.panelWidth() - 20)); return Doc.NativeWidth(layoutDoc) ? Math.min(layoutDoc[WidthSym](), this.props.panelWidth() - 20) : Math.min(this.layoutDoc[WidthSym](), this.props.panelWidth() - 20); } @@ -356,12 +356,14 @@ export class TreeView extends React.Component { rtfWidth = () => Math.min(this.layoutDoc?.[WidthSym](), this.props.panelWidth() - 20); rtfHeight = () => this.rtfWidth() <= this.layoutDoc?.[WidthSym]() ? Math.min(this.layoutDoc?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT; rtfOutlineHeight = () => Math.max(this.layoutDoc?.[HeightSym](), 20); - docFinalHeight = () => { + expandPanelHeight = () => { + if (this.layoutDoc._fitWidth) return this.docHeight(); const aspect = this.layoutDoc[WidthSym]() / this.layoutDoc[HeightSym](); const docAspect = this.docWidth() / this.docHeight(); return (docAspect < aspect) ? this.docWidth() / aspect : this.docHeight(); } - docFinalWidth = () => { + expandPanelWidth = () => { + if (this.layoutDoc._fitWidth) return this.docWidth(); const aspect = this.layoutDoc[WidthSym]() / this.layoutDoc[HeightSym](); const docAspect = this.docWidth() / this.docHeight(); return (docAspect > aspect) ? this.docHeight() * aspect : this.docWidth(); @@ -397,8 +399,8 @@ export class TreeView extends React.Component { ; } else { const layoutDoc = this.layoutDoc; - const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.docFinalHeight; - const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docFinalWidth; + const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.expandPanelHeight; + const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.expandPanelWidth; return
{ rootSelected={returnTrue} treeViewDoc={undefined} backgroundColor={this.props.backgroundColor} - fitToBox={this.boundsOfCollectionDocument !== undefined} + fitToBox={this.isCollectionDoc !== undefined} FreezeDimensions={true} NativeWidth={layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined} NativeHeight={layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined} @@ -567,7 +569,7 @@ export class TreeView extends React.Component { } } else this._editMaxWidth = ""; - const selected = SelectionManager.IsSelected(DocumentManager.Instance.getFirstDocumentView(this.doc)); + const selected = false;// SelectionManager.IsSelected(DocumentManager.Instance.getFirstDocumentView(this.doc)); // bcz: need to fix so that this doesn't get called for every selection/view creation. this is used to highlight bullet items in Slide views return this.doc.treeViewHideHeader || this.outlineMode ? !StrCast(Doc.LayoutField(this.doc)).includes("CollectionView") ? this.renderContent @@ -597,7 +599,7 @@ export class TreeView extends React.Component { rootSelected={returnTrue} treeViewDoc={undefined} backgroundColor={this.props.backgroundColor} - fitToBox={this.boundsOfCollectionDocument !== undefined} + fitToBox={this.isCollectionDoc !== undefined} PanelWidth={this.rtfWidth} PanelHeight={this.rtfOutlineHeight} focus={this.refocus} diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index d31427829..57f845961 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -1,12 +1,12 @@ import { action, computed, Lambda, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from "react"; -import { Doc, Opt, WidthSym } from '../../../../fields/Doc'; +import { Doc, Opt } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; import { Id } from '../../../../fields/FieldSymbols'; import { makeInterface } from '../../../../fields/Schema'; import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; -import { emptyFunction, returnFalse, returnZero, setupMoveUpEvents, OmitKeys } from '../../../../Utils'; +import { emptyFunction, OmitKeys, returnFalse, returnOne, setupMoveUpEvents } from '../../../../Utils'; import { Docs } from '../../../documents/Documents'; import { DragManager } from '../../../util/DragManager'; import { SnappingManager } from '../../../util/SnappingManager'; @@ -169,11 +169,14 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { ContainingCollectionDoc={this.props.Document} PanelWidth={width} PanelHeight={height} + ContentScaling={returnOne} + fitToBox={false} + FreezeDimensions={true} ScreenToLocalTransform={dxf} onClick={this.onChildClickHandler} renderDepth={this.props.renderDepth + 1} parentActive={this.props.active} - dontCenter={true} + dontCenter={false} />; } -- cgit v1.2.3-70-g09d2