aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx3
-rw-r--r--src/client/views/collections/TabDocView.tsx143
-rw-r--r--src/client/views/collections/TreeView.tsx1
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx1
-rw-r--r--src/client/views/nodes/ContentFittingDocumentView.tsx27
-rw-r--r--src/client/views/nodes/DocumentView.tsx5
-rw-r--r--src/client/views/nodes/FieldView.tsx1
7 files changed, 76 insertions, 105 deletions
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 973cd5d3c..e87fdef1e 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -24,6 +24,7 @@ import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"
import "./CollectionSchemaView.scss";
import { CollectionSubView } from "./CollectionSubView";
import { SchemaTable } from "./SchemaTable";
+import { DefaultStyleProvider } from "../StyleProvider";
// bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
export enum ColumnType {
@@ -401,6 +402,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
Document={this.previewDocument}
DataDoc={undefined}
fitDocToPanel={true}
+ fitContentsToDoc={true}
freezeDimensions={true}
dontCenter={"y"}
focus={emptyFunction}
@@ -412,6 +414,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
docFilters={this.docFilters}
docRangeFilters={this.docRangeFilters}
searchFilterDocs={this.searchFilterDocs}
+ styleProvider={DefaultStyleProvider}
ContainingCollectionDoc={this.props.CollectionView?.props.Document}
ContainingCollectionView={this.props.CollectionView}
moveDocument={this.props.moveDocument}
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index fc2f7c522..9c77792a0 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -34,6 +34,7 @@ import { DocumentType } from '../../documents/DocumentTypes';
import Color = require('color');
import { StyleProp, DefaultStyleProvider, DefaultLayerProvider, StyleLayers } from '../StyleProvider';
import { FieldViewProps } from '../nodes/FieldView';
+import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView';
const _global = (window /* browser */ || global /* node */) as any;
interface TabDocViewProps {
@@ -50,7 +51,17 @@ export class TabDocView extends React.Component<TabDocViewProps> {
@observable private _panelHeight = 0;
@observable private _isActive: boolean = false;
@observable private _document: Doc | undefined;
- @observable private _view: DocumentView | undefined;
+ @observable private _view: ContentFittingDocumentView | undefined;
+
+ @computed get layoutDoc() { return this._document && Doc.Layout(this._document); }
+ @computed get tabColor() { return StrCast(this._document?._backgroundColor, StrCast(this._document?.backgroundColor, DefaultStyleProvider(this._document, undefined, StyleProp.BackgroundColor))); }
+ @computed get renderBounds() {
+ const bounds = this._document ? Cast(this._document._renderContentBounds, listSpec("number"), [0, 0, this.returnMiniSize(), this.returnMiniSize()]) : [0, 0, 0, 0];
+ const xbounds = bounds[2] - bounds[0];
+ const ybounds = bounds[3] - bounds[1];
+ const dim = Math.max(xbounds, ybounds);
+ return { l: bounds[0] + xbounds / 2 - dim / 2, t: bounds[1] + ybounds / 2 - dim / 2, cx: bounds[0] + xbounds / 2, cy: bounds[1] + ybounds / 2, dim };
+ }
get stack() { return (this.props as any).glContainer.parent.parent; }
get tab() { return (this.props as any).glContainer.tab; }
@@ -106,14 +117,15 @@ export class TabDocView extends React.Component<TabDocViewProps> {
};
// select the tab document when the tab is directly clicked and activate the tab whenver the tab document is selected
- titleEle.onpointerdown = (e: any) => {
- if (e.target.className !== "lm_close_tab" && this.view) {
- SelectionManager.SelectDoc(this.view, false);
+ titleEle.onpointerdown = action((e: any) => {
+ if (e.target.className !== "lm_close_tab") {
+ if (this.view?.docView) SelectionManager.SelectDoc(this.view.docView, false);
+ else this._activated = true;
if (Date.now() - titleEle.lastClick < 1000) titleEle.select();
titleEle.lastClick = Date.now();
(document.activeElement !== titleEle) && titleEle.focus();
}
- };
+ });
tab._disposers.selectionDisposer = reaction(() => SelectionManager.SelectedDocuments().some(v => v.topMost && v.props.Document === doc),
action((selected) => {
if (selected) this._activated = true;
@@ -128,7 +140,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
const stack = tab.contentItem.parent;
const dragHdl = document.createElement("div");
dragHdl.className = "lm_drag_tab";
- tab._disposers.buttonDisposer = reaction(() => this.view, view =>
+ tab._disposers.buttonDisposer = reaction(() => this.view?.docView, view =>
view && [ReactDOM.render(<span className="tabDocView-drag" onPointerDown={dragBtnDown}><CollectionDockingViewMenu views={() => [view]} Stack={stack} /></span>, dragHdl), tab._disposers.buttonDisposer?.()],
{ fireImmediately: true });
tab.reactComponents = [dragHdl];
@@ -240,48 +252,6 @@ export class TabDocView extends React.Component<TabDocViewProps> {
}
}
- NativeAspect = () => this.nativeAspect;
- PanelWidth = () => this.panelWidth;
- PanelHeight = () => this.panelHeight;
- nativeWidth = () => this._nativeWidth;
- nativeHeight = () => this._nativeHeight;
- ContentScaling = () => this.contentScaling;
-
- ScreenToLocalTransform = () => {
- if (this._mainCont?.children) {
- const { translateX, translateY } = Utils.GetScreenTransform(this._mainCont.children[0]?.firstChild as HTMLElement);
- const scale = Utils.GetScreenTransform(this._mainCont).scale;
- return CollectionDockingView.Instance?.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(1 / this.ContentScaling() / scale);
- }
- return Transform.Identity();
- }
- @computed get nativeAspect() {
- return this.nativeWidth() ? this.nativeWidth() / this.nativeHeight() : 0;
- }
- @computed get panelHeight() {
- return this.NativeAspect() && this.NativeAspect() > this._panelWidth / this._panelHeight ? this._panelWidth / this.NativeAspect() : this._panelHeight;
- }
- @computed get panelWidth() {
- return this.layoutDoc?.maxWidth ? Math.min(Math.max(NumCast(this.layoutDoc._width), Doc.NativeWidth(this.layoutDoc)), this._panelWidth) :
- (this.NativeAspect() && this.NativeAspect() < this._panelWidth / this._panelHeight ? this._panelHeight * this.NativeAspect() : this._panelWidth);
- }
- @computed get _nativeWidth() { return !this.layoutDoc?._fitWidth ? Doc.NativeWidth(this.layoutDoc) || this._panelWidth : 0; }
- @computed get _nativeHeight() { return !this.layoutDoc?._fitWidth ? Doc.NativeHeight(this.layoutDoc) || this._panelHeight : 0; }
- @computed get contentScaling() {
- const nativeW = Doc.NativeWidth(this.layoutDoc);
- const nativeH = Doc.NativeHeight(this.layoutDoc);
- let scaling = 1;
- if (nativeW && (this.layoutDoc?._fitWidth || this._panelHeight / nativeH > this._panelWidth / nativeW)) {
- scaling = this._panelWidth / nativeW; // width-limited or fitWidth
- } else if (nativeW && nativeH) {
- scaling = this._panelHeight / nativeH; // height-limited
- }
- return scaling;
- }
- @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; }
- @computed get layoutDoc() { return this._document && Doc.Layout(this._document); }
-
// 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,
// add[:{left,right,top,bottom}] - e.g., "add" will add a tab to the current stack, "add:right" will add a tab on the right
@@ -304,14 +274,6 @@ export class TabDocView extends React.Component<TabDocViewProps> {
}
}
- @computed get tabColor() { return StrCast(this._document?._backgroundColor, StrCast(this._document?.backgroundColor, DefaultStyleProvider(this._document, undefined, StyleProp.BackgroundColor))); }
- @computed get renderBounds() {
- const bounds = this._document ? Cast(this._document._renderContentBounds, listSpec("number"), [0, 0, this.returnMiniSize(), this.returnMiniSize()]) : [0, 0, 0, 0];
- const xbounds = bounds[2] - bounds[0];
- const ybounds = bounds[3] - bounds[1];
- const dim = Math.max(xbounds, ybounds);
- return { l: bounds[0] + xbounds / 2 - dim / 2, t: bounds[1] + ybounds / 2 - dim / 2, cx: bounds[0] + xbounds / 2, cy: bounds[1] + ybounds / 2, dim };
- }
childLayoutTemplate = () => Cast(this._document?.childLayoutTemplate, Doc, null);
returnMiniSize = () => NumCast(this._document?._miniMapSize, 150);
miniDown = (e: React.PointerEvent) => {
@@ -355,7 +317,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
removeDocument={returnFalse}
PanelWidth={this.returnMiniSize}
PanelHeight={this.returnMiniSize}
- ScreenToLocalTransform={this.ScreenToLocalTransform}
+ ScreenToLocalTransform={Transform.Identity}
renderDepth={0}
whenActiveChanged={emptyFunction}
focus={emptyFunction}
@@ -387,9 +349,14 @@ export class TabDocView extends React.Component<TabDocViewProps> {
afterFocus?.(false);
}
active = () => this._isActive;
+ ScreenToLocalTransform = () => {
+ const { translateX, translateY } = Utils.GetScreenTransform(this._mainCont?.children?.[0]?.firstChild as HTMLElement);
+ return CollectionDockingView.Instance?.props.ScreenToLocalTransform().translate(-translateX, -translateY);
+ }
+ PanelWidth = () => this._panelWidth;
+ PanelHeight = () => this._panelHeight;
-
- public static miniStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps | FieldViewProps>, property: string): any => {
+ static miniStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps | FieldViewProps>, property: string): any => {
if (doc) {
switch (property.split(":")[0]) {
default: return DefaultStyleProvider(doc, props, property);
@@ -406,33 +373,33 @@ export class TabDocView extends React.Component<TabDocViewProps> {
@computed get layerProvider() { return this._document && DefaultLayerProvider(this._document); }
@computed get docView() {
TraceMobx();
+ console.log("" + this._document?.title + " " + (!this._activated || !this._document || this._document._viewType === CollectionViewType.Docking))
return !this._activated || !this._document || this._document._viewType === CollectionViewType.Docking ? (null) :
- <><DocumentView key={this._document[Id]} ref={action((r: DocumentView) => this._view = r)}
+ <><ContentFittingDocumentView key={this._document[Id]} ref={action((r: ContentFittingDocumentView) => console.log(this._view = r))}
+ renderDepth={0}
Document={this._document}
DataDoc={!Doc.AreProtosEqual(this._document[DataSym], this._document) ? this._document[DataSym] : undefined}
- bringToFront={emptyFunction}
- rootSelected={returnTrue}
+ ContainingCollectionView={undefined}
+ ContainingCollectionDoc={undefined}
+ PanelWidth={this.PanelWidth}
+ PanelHeight={this.PanelHeight}
layerProvider={this.layerProvider}
+ styleProvider={DefaultStyleProvider}
+ docFilters={CollectionDockingView.Instance.docFilters}
+ docRangeFilters={CollectionDockingView.Instance.docRangeFilters}
+ searchFilterDocs={CollectionDockingView.Instance.searchFilterDocs}
addDocument={undefined}
removeDocument={undefined}
- ContentScaling={this.ContentScaling}
- PanelWidth={this.PanelWidth}
- PanelHeight={this.PanelHeight}
- NativeHeight={this.nativeHeight() ? this.nativeHeight : undefined}
- NativeWidth={this.nativeWidth() ? this.nativeWidth : undefined}
+ addDocTab={this.addDocTab}
ScreenToLocalTransform={this.ScreenToLocalTransform}
- renderDepth={0}
+ ContentScaling={returnOne}
+ dontCenter={"y"}
+ rootSelected={returnTrue}
parentActive={this.active}
whenActiveChanged={emptyFunction}
focus={this.focusFunc}
- styleProvider={DefaultStyleProvider}
- addDocTab={this.addDocTab}
- pinToPres={TabDocView.PinDoc}
- docFilters={CollectionDockingView.Instance.docFilters}
- docRangeFilters={CollectionDockingView.Instance.docRangeFilters}
- searchFilterDocs={CollectionDockingView.Instance.searchFilterDocs}
- ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined} />
+ bringToFront={emptyFunction}
+ pinToPres={TabDocView.PinDoc} />
{this._document._viewType !== CollectionViewType.Freeform ? (null) :
<>{this._document.hideMinimap ? (null) : this.renderMiniMap()}
<Tooltip key="ttip" title={<div className="dash-tooltip">{"toggle minimap"}</div>}>
@@ -445,18 +412,16 @@ export class TabDocView extends React.Component<TabDocViewProps> {
}
render() {
- return (<div className="collectionDockingView-content" ref={ref => {
- if (this._mainCont = ref) {
- (this._mainCont as any).InitTab = (tab: any) => this.init(tab, this._document);
- DocServer.GetRefField(this.props.documentId).then(action(doc => doc instanceof Doc && (this._document = doc) && this.tab && this.init(this.tab, this._document)));
- }
- }}
- style={{
- transform: `translate(${this.previewPanelCenteringOffset}px, 0px)`,
- height: this.layoutDoc?._fitWidth ? undefined : "100%",
- width: this.widthpercent
- }}>
- {this.docView}
- </div >);
+ console.log("tab", this._document)
+ return (
+ <div className="collectionDockingView-content" style={{ height: "100%", width: "100%" }} ref={ref => {
+ if (this._mainCont = ref) {
+ (this._mainCont as any).InitTab = (tab: any) => this.init(tab, this._document);
+ DocServer.GetRefField(this.props.documentId).then(action(doc => doc instanceof Doc && (this._document = doc) && this.tab && this.init(this.tab, this._document)));
+ }
+ }} >
+ {this.docView}
+ </div >
+ );
}
} \ No newline at end of file
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index c03041214..dd6f21998 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -618,6 +618,7 @@ export class TreeView extends React.Component<TreeViewProps> {
NativeWidth={!asText && this.layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined}
NativeHeight={!asText && this.layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined}
fitDocToPanel={!asText && this.isCollectionDoc !== undefined}
+ fitContentsToDoc={true}
hideTitle={asText}
LayoutTemplateString={asText ? FormattedTextBox.LayoutString("text") : undefined}
focus={asText ? this.refocus : returnFalse}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 403c20ba2..6d5f97367 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -76,7 +76,6 @@ export type collectionFreeformViewProps = {
forceScaling?: boolean; // whether to force scaling of content (needed by ImageBox)
viewDefDivClick?: ScriptField;
childPointerEvents?: boolean;
- fitContentsToDoc?: boolean;
parentActive: (outsideReaction: boolean) => boolean;
scaleField?: string;
noOverlay?: boolean; // used to suppress docs in the overlay (z) layer (ie, for minimap since overlay doesn't scale)
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx
index f2540dfa7..098e422b8 100644
--- a/src/client/views/nodes/ContentFittingDocumentView.tsx
+++ b/src/client/views/nodes/ContentFittingDocumentView.tsx
@@ -7,11 +7,9 @@ import { emptyFunction, OmitKeys, returnOne, returnVal } from "../../../Utils";
import { DocumentView, DocumentViewProps } from "../nodes/DocumentView";
import { StyleProp } from "../StyleProvider";
import "./ContentFittingDocumentView.scss";
-
interface ContentFittingDocumentViewProps {
dontCenter?: "x" | "y" | "xy";
}
-
@observer
export class ContentFittingDocumentView extends React.Component<DocumentViewProps & ContentFittingDocumentViewProps> {
public get displayName() { return "DocumentView(" + this.props.Document?.title + ")"; } // this makes mobx trace() statements more descriptive
@@ -20,23 +18,27 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
@observable public docView: DocumentView | undefined | null;
@computed get layoutDoc() { return Doc.Layout(this.props.Document, this.props.LayoutTemplate?.()); }
- @computed get nativeWidth() { return this.layoutDoc._fitWidth ? 0 : returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions)); }
+
+ @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions)); }
@computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions) || 0); }
@computed get nativeScaling() {
- if (!this.nativeWidth || !this.nativeHeight) return 1;
- const wscale = this.props.PanelWidth() / this.nativeWidth;
- const hscale = this.props.PanelHeight() / this.nativeHeight;
- if (wscale * this.nativeHeight > this.props.PanelHeight()) {
- return hscale || 1;
+ const nativeW = this.nativeWidth;
+ const nativeH = this.nativeHeight;
+ let scaling = 1;
+ if (nativeW && (this.layoutDoc?._fitWidth || this.props.PanelHeight() / nativeH > this.props.PanelWidth() / nativeW)) {
+ scaling = this.props.PanelWidth() / nativeW; // width-limited or fitWidth
+ } else if (nativeW && nativeH) {
+ scaling = this.props.PanelHeight() / nativeH; // height-limited
}
- return wscale || 1;
+ return scaling;
}
@computed get panelWidth() { return this.nativeWidth ? this.nativeWidth * this.nativeScaling : this.props.PanelWidth(); }
@computed get panelHeight() {
if (this.nativeHeight) {
- if (this.props.Document._fitWidth) return Math.min(this.props.PanelHeight(), this.panelWidth / Doc.NativeAspect(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions) || 1);
- return Math.min(this.props.PanelHeight(), this.nativeHeight * this.nativeScaling);
+ if (this.props.Document._fitWidth)
+ return Math.min(this.props.PanelHeight(), this.panelWidth / Doc.NativeAspect(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions) || 1);
+ else return Math.min(this.props.PanelHeight(), this.nativeHeight * this.nativeScaling);
}
return this.props.PanelHeight();
}
@@ -67,8 +69,7 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
LayoutTemplate={this.props.LayoutTemplate}
PanelWidth={this.PanelWidth}
PanelHeight={this.PanelHeight}
- ContentScaling={returnOne}
- contentFittingScaling={this.NativeScaling}
+ ContentScaling={this.NativeScaling}
ScreenToLocalTransform={this.screenToLocalTransform}
focus={this.props.focus || emptyFunction}
bringToFront={emptyFunction}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 6ca3ffbee..56472625b 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -54,6 +54,7 @@ export interface DocumentViewSharedProps {
DataDoc?: Doc;
DocumentView?: DocumentView;
ContainingCollectionView: Opt<CollectionView>;
+ fitContentsToDoc?: boolean;
ContainingCollectionDoc: Opt<Doc>;
CollectionFreeFormDocumentView?: () => CollectionFreeFormDocumentView;
PanelWidth: () => number;
@@ -96,7 +97,6 @@ export interface DocumentViewProps extends DocumentViewSharedProps {
LayoutTemplateString?: string;
LayoutTemplate?: () => Opt<Doc>;
ContentScaling: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal
- contentFittingScaling?: () => number;// scaling done outside the document view (eg in ContentFittingDocumentView) to fit contents into panel (needed for ScreenToLocal but not needed by DocumentView to scale its content)
contextMenuItems?: () => { script: ScriptField, label: string }[];
onDoubleClick?: () => ScriptField;
onPointerDown?: () => ScriptField;
@@ -131,7 +131,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
(this.dataDoc.author === Doc.CurrentUserEmail ? StrCast(Doc.UserDoc().showTitle) : "author;creationDate") :
undefined);
}
- @computed get LocalScaling() { return this.props.ContentScaling() * (this.props.contentFittingScaling?.() || 1); }
+ @computed get LocalScaling() { return this.props.ContentScaling(); }
@computed get topMost() { return this.props.renderDepth === 0; }
@computed get freezeDimensions() { return this.props.freezeDimensions; }
@computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.dataDoc, this.freezeDimensions)); }
@@ -917,6 +917,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
DocumentView={this}
Document={this.props.Document}
DataDoc={this.props.DataDoc}
+ fitContentsToDoc={this.props.fitContentsToDoc}
ContainingCollectionView={this.props.ContainingCollectionView}
ContainingCollectionDoc={this.props.ContainingCollectionDoc}
NativeWidth={this.NativeWidth}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index fd2193bd8..2e79ba7b0 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -17,6 +17,7 @@ export interface FieldViewProps extends DocumentViewSharedProps {
// FieldView specific props that are not part of DocumentView props
fieldKey: string;
overflow?: boolean; // bcz: would like to think this can be avoided -- need to look at further
+
active: (outsideReaction?: boolean) => boolean;
select: (isCtrlPressed: boolean) => void;
isSelected: (outsideReaction?: boolean) => boolean;