From 483a4d35ba2c522b889c7bd9b839a0af131ec0bb Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 8 Sep 2020 19:26:24 -0400 Subject: updated the way NativeWidth/Height props work so that, when specified, they override locally specified values --- .../collectionMulticolumn/CollectionMulticolumnView.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx') diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index 0afcab5a3..b3f5d1c0f 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -213,19 +213,19 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu return this.props.addDocTab(doc, where); } getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { + const layoutTemp = this.props.DataDoc ? true : undefined; return ; } + @computed get rootDoc() { return Cast(this.props.Document.rootDocument, Doc, null) || this.props.Document; } /** * @returns the resolved list of rendered child documents, displayed * at their resolved pixel widths, each separated by a resizer. @@ -257,6 +258,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu const { childLayoutPairs } = this; const { Document, PanelHeight } = this.props; const collector: JSX.Element[] = []; + const layoutTemp = this.props.DataDoc ? true : undefined; for (let i = 0; i < childLayoutPairs.length; i++) { const { layout } = childLayoutPairs[i]; const dxf = () => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin)); -- cgit v1.2.3-70-g09d2 From e50297237ee3dfa1e652c0d46cb9d860e5cd5b20 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 8 Sep 2020 21:20:47 -0400 Subject: fixes to make nativesize work for all collections and templates. --- src/client/views/collections/CollectionCarouselView.tsx | 7 ++++--- src/client/views/collections/CollectionStackingView.tsx | 2 ++ src/client/views/collections/CollectionSubView.tsx | 2 ++ src/client/views/collections/collectionGrid/CollectionGridView.tsx | 2 ++ .../collectionMulticolumn/CollectionMulticolumnView.tsx | 1 - src/client/views/nodes/PresBox.tsx | 3 ++- 6 files changed, 12 insertions(+), 5 deletions(-) (limited to 'src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx') diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index f93993e2a..3fbc6ec45 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -13,7 +13,7 @@ import { Doc } from '../../../fields/Doc'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { ContextMenu } from '../ContextMenu'; import { ObjectField } from '../../../fields/ObjectField'; -import { returnFalse, returnZero } from '../../../Utils'; +import { returnFalse, returnZero, OmitKeys } from '../../../Utils'; import { ScriptField } from '../../../fields/ScriptField'; type CarouselDocument = makeInterface<[typeof documentSchema, typeof collectionSchema]>; @@ -50,13 +50,14 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) return !(curDoc?.layout instanceof Doc) ? (null) : <>
- number; PanelHeight: () => number; VisibleHeight?: () => number; + childIgnoreNativeSize?: boolean; setPreviewCursor?: (func: (x: number, y: number, drag: boolean) => void) => void; rootSelected: (outsideReaction?: boolean) => boolean; fieldKey: string; @@ -40,6 +41,7 @@ export interface SubCollectionViewProps extends CollectionViewProps { children?: never | (() => JSX.Element[]) | React.ReactNode; ChildLayoutTemplate?: () => Doc; childOpacity?: () => number; + childIgnoreNativeSize?: boolean; ChildLayoutString?: string; childClickScript?: ScriptField; childDoubleClickScript?: ScriptField; diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index bc04c79f9..ad9497b71 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -163,6 +163,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { return ContainingCollectionDoc={this.props.Document} PanelWidth={this.props.PanelWidth} PanelHeight={this.panelHeight} + childIgnoreNativeSize={true} moveDocument={returnFalse} childOpacity={returnOne} childLayoutTemplate={this.childLayoutTemplate} -- cgit v1.2.3-70-g09d2 From a0a139eed60251c1a4ab3da374c548774c1e8585 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 8 Sep 2020 21:39:42 -0400 Subject: from last --- src/client/views/collections/collectionGrid/CollectionGridView.tsx | 6 ++---- .../collections/collectionMulticolumn/CollectionMulticolumnView.tsx | 1 - 2 files changed, 2 insertions(+), 5 deletions(-) (limited to 'src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index ad9497b71..ba9c02b5c 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -6,7 +6,7 @@ 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 } from '../../../../Utils'; +import { emptyFunction, returnFalse, returnZero, setupMoveUpEvents, OmitKeys } from '../../../../Utils'; import { Docs } from '../../../documents/Documents'; import { DragManager } from '../../../util/DragManager'; import { SnappingManager } from '../../../util/SnappingManager'; @@ -162,9 +162,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { */ getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { return ; } - @computed get rootDoc() { return Cast(this.props.Document.rootDocument, Doc, null) || this.props.Document; } /** * @returns the resolved list of rendered child documents, displayed * at their resolved pixel widths, each separated by a resizer. -- cgit v1.2.3-70-g09d2 From f5c00261d8d936abdec22abfae94dd972c0f9e4a Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 8 Sep 2020 22:57:51 -0400 Subject: fixed presbox, videobox and some others to set NativeWidth/Height properly. --- src/client/views/MainView.tsx | 4 ---- src/client/views/PropertiesView.tsx | 21 +++++---------------- .../views/collections/CollectionStackingView.tsx | 16 ++-------------- src/client/views/collections/CollectionSubView.tsx | 1 - src/client/views/collections/CollectionView.tsx | 1 + src/client/views/collections/TabDocView.tsx | 8 ++++---- .../CollectionMulticolumnView.tsx | 1 - .../views/nodes/ContentFittingDocumentView.scss | 1 - .../views/nodes/ContentFittingDocumentView.tsx | 2 +- src/client/views/nodes/ScreenshotBox.tsx | 4 ++-- src/client/views/nodes/VideoBox.tsx | 4 ++-- src/client/views/nodes/WebBox.tsx | 4 ++-- .../views/nodes/formattedText/FormattedTextBox.tsx | 6 +++--- src/client/views/pdf/PDFViewer.tsx | 4 ++-- 14 files changed, 24 insertions(+), 53 deletions(-) (limited to 'src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index d017de457..bdf8c83e5 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -581,8 +581,6 @@ export class MainView extends React.Component { focus={returnFalse} PanelWidth={() => 500} PanelHeight={() => 800} - NativeHeight={() => 500} - NativeWidth={() => 800} ContentScaling={returnOne} docFilters={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} @@ -648,8 +646,6 @@ export class MainView extends React.Component { focus={returnFalse} PanelWidth={() => 500} PanelHeight={() => 800} - NativeHeight={() => 500} - NativeWidth={() => 800} ContentScaling={returnOne} docFilters={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 7da56721a..d70f4b332 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -80,21 +80,11 @@ export class PropertiesView extends React.Component { @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; } - @action rtfWidth = () => { - if (this.selectedDoc) { - return Math.min(this.selectedDoc?.[WidthSym](), this.props.width - 20); - } else { - return 0; - } + return !this.selectedDoc ? 0 : Math.min(this.selectedDoc?.[WidthSym](), this.props.width - 20); } - @action rtfHeight = () => { - if (this.selectedDoc) { - return this.rtfWidth() <= this.selectedDoc?.[WidthSym]() ? Math.min(this.selectedDoc?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT; - } else { - return 0; - } + return !this.selectedDoc ? 0 : this.rtfWidth() <= this.selectedDoc?.[WidthSym]() ? Math.min(this.selectedDoc?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT; } @action @@ -286,10 +276,9 @@ export class PropertiesView extends React.Component { backgroundColor={this.previewBackground} fitToBox={true} FreezeDimensions={true} - NativeWidth={layoutDoc.type === - StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : undefined} - NativeHeight={layoutDoc.type === - StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : undefined} + dontCenter={true} + NativeWidth={layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined} + NativeHeight={layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined} PanelWidth={panelWidth} PanelHeight={panelHeight} focus={returnFalse} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index a7276a962..cbc62be91 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -128,19 +128,6 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) return fields; } - getSimpleDocHeight(d?: Doc) { - if (!d) return 0; - const layoutDoc = Doc.Layout(d, this.props.ChildLayoutTemplate?.()); - const nw = NumCast(layoutDoc._nativeWidth); - const nh = NumCast(layoutDoc._nativeHeight); - let wid = this.columnWidth / (this.isStackingView ? this.numGroupColumns : 1); - if (!layoutDoc._fitWidth && nw && nh) { - const aspect = nw && nh ? nh / nw : 1; - if (!(this.layoutDoc._columnsFill)) wid = Math.min(layoutDoc[WidthSym](), wid); - return wid * aspect; - } - return layoutDoc._fitWidth ? wid * NumCast(layoutDoc.scrollHeight, nh) / (nw || 1) : layoutDoc[HeightSym](); - } componentDidMount() { super.componentDidMount?.(); @@ -209,8 +196,9 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - NativeWidth={this.props.childIgnoreNativeSize ? returnZero : undefined} + NativeWidth={this.props.childIgnoreNativeSize ? returnZero : undefined} // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox NativeHeight={this.props.childIgnoreNativeSize ? returnZero : undefined} + dontCenter={this.props.childIgnoreNativeSize ? true : false} fitToBox={false} dontRegisterView={dataDoc ? true : BoolCast(this.layoutDoc.dontRegisterChildViews, this.props.dontRegisterView)} rootSelected={this.rootSelected} diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 37212a0fa..81f3ddad2 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -28,7 +28,6 @@ export interface CollectionViewProps extends FieldViewProps { PanelWidth: () => number; PanelHeight: () => number; VisibleHeight?: () => number; - childIgnoreNativeSize?: boolean; setPreviewCursor?: (func: (x: number, y: number, drag: boolean) => void) => void; rootSelected: (outsideReaction?: boolean) => boolean; fieldKey: string; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index ef3128bc0..6939399e6 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -73,6 +73,7 @@ export interface CollectionViewCustomProps { filterAddDocument?: (doc: Doc | Doc[]) => boolean; // allows a document that renders a Collection view to filter or modify any documents added to the collection (see PresBox for an example) childOpacity?: () => number; hideFilter?: true; + childIgnoreNativeSize?: boolean; } export interface CollectionRenderProps { diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 93d830b8a..f3d2aaa8f 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -228,8 +228,8 @@ export class TabDocView extends React.Component { } return Transform.Identity(); } - get previewPanelCenteringOffset() { return this.nativeWidth() ? (this._panelWidth - this.nativeWidth() * this.contentScaling()) / 2 : 0; } - get widthpercent() { return this.nativeWidth() ? `${(this.nativeWidth() * this.contentScaling()) / this._panelWidth * 100}% ` : undefined; } + @computed get previewPanelCenteringOffset() { return this.nativeWidth() ? (this._panelWidth - this.nativeWidth() * this.contentScaling()) / 2 : 0; } + @computed get widthpercent() { return this.nativeWidth() ? `${(this.nativeWidth() * this.contentScaling()) / this._panelWidth * 100}% ` : undefined; } // adds a tab to the layout based on the locaiton parameter which can be: // close[:{left,right,top,bottom}] - e.g., "close" will close the tab, "close:left" will close the left tab, @@ -345,8 +345,8 @@ export class TabDocView extends React.Component { ContentScaling={this.contentScaling} PanelWidth={this.panelWidth} PanelHeight={this.panelHeight} - NativeHeight={this.nativeHeight} - NativeWidth={this.nativeWidth} + NativeHeight={this.nativeHeight() ? this.nativeHeight : undefined} + NativeWidth={this.nativeWidth() ? this.nativeWidth : undefined} ScreenToLocalTransform={this.ScreenToLocalTransform} renderDepth={0} parentActive={returnTrue} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index 556cf79cd..0e4785d36 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -256,7 +256,6 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu const { childLayoutPairs } = this; const { Document, PanelHeight } = this.props; const collector: JSX.Element[] = []; - const layoutTemp = this.props.DataDoc ? true : undefined; for (let i = 0; i < childLayoutPairs.length; i++) { const { layout } = childLayoutPairs[i]; const dxf = () => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin)); diff --git a/src/client/views/nodes/ContentFittingDocumentView.scss b/src/client/views/nodes/ContentFittingDocumentView.scss index eb2d93b9a..50562951a 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.scss +++ b/src/client/views/nodes/ContentFittingDocumentView.scss @@ -3,7 +3,6 @@ .contentFittingDocumentView { position: relative; display: flex; - align-items: center; .contentFittingDocumentView-previewDoc { position: relative; diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx index 1fe7e6207..55149a44b 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.tsx +++ b/src/client/views/nodes/ContentFittingDocumentView.tsx @@ -62,7 +62,7 @@ export class ContentFittingDocumentView extends React.Component 0.001 ? `${100 * this.nativeHeight() / this.nativeWidth() * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(), width: Math.abs(this.centeringOffset) > 0.001 ? `${100 * (this.props.PanelWidth() - this.centeringOffset * 2) / this.props.PanelWidth()}%` : this.props.PanelWidth() diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx index 34ad7f3be..f13f373d0 100644 --- a/src/client/views/nodes/ScreenshotBox.tsx +++ b/src/client/views/nodes/ScreenshotBox.tsx @@ -9,7 +9,7 @@ import { InkTool } from "../../../fields/InkField"; import { listSpec, makeInterface } from "../../../fields/Schema"; import { Cast, NumCast } from "../../../fields/Types"; import { VideoField } from "../../../fields/URLField"; -import { emptyFunction, returnFalse, returnOne, returnZero, Utils } from "../../../Utils"; +import { emptyFunction, returnFalse, returnOne, returnZero, Utils, OmitKeys, OmitKeys } from "../../../Utils"; import { Docs } from "../../documents/Documents"; import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; import { ContextMenu } from "../ContextMenu"; @@ -169,7 +169,7 @@ export class ScreenshotBox extends ViewBoxBaseComponent
-
- - { - Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.NativeWidth?.()||0, this.props.NativeHeight?.()||0); + Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0); } public static get DefaultLayout(): Doc | string | undefined { @@ -1562,7 +1562,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
:
- -