From 2cddc1cd6012a1c71c919124f640ce1d04593ec8 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 23 Feb 2021 22:36:52 -0500 Subject: removed _renderContentBounds and updated miniMap view. --- src/client/views/collections/TabDocView.tsx | 186 +++++++++++++++------------- 1 file changed, 103 insertions(+), 83 deletions(-) (limited to 'src/client/views/collections/TabDocView.tsx') diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index c1a1a6f04..c7eb9ef48 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -9,7 +9,6 @@ import * as ReactDOM from 'react-dom'; import { DataSym, Doc, DocListCast, DocListCastAsync, HeightSym, Opt, WidthSym } from "../../../fields/Doc"; import { Id } from '../../../fields/FieldSymbols'; import { FieldId } from "../../../fields/RefField"; -import { listSpec } from '../../../fields/Schema'; import { Cast, NumCast, StrCast } from "../../../fields/Types"; import { TraceMobx } from '../../../fields/util'; import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents, Utils } from "../../../Utils"; @@ -55,13 +54,7 @@ export class TabDocView extends React.Component { @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; } @@ -290,76 +283,9 @@ export class TabDocView extends React.Component { } } - childLayoutTemplate = () => Cast(this._document?.childLayoutTemplate, Doc, null); - returnMiniSize = () => NumCast(this._document?._miniMapSize, 150); - miniDown = (e: React.PointerEvent) => { - const doc = this._document; - const miniSize = this.returnMiniSize(); - doc && setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { - doc._panX = clamp(NumCast(doc._panX) + delta[0] / miniSize * this.renderBounds.dim, this.renderBounds.l, this.renderBounds.l + this.renderBounds.dim); - doc._panY = clamp(NumCast(doc._panY) + delta[1] / miniSize * this.renderBounds.dim, this.renderBounds.t, this.renderBounds.t + this.renderBounds.dim); - return false; - }), emptyFunction, emptyFunction); - } getCurrentFrame = () => { return NumCast(Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex].presentationTargetDoc, Doc, null)._currentFrame); } - renderMiniMap() { - const miniWidth = this.PanelWidth() / NumCast(this._document?._viewScale, 1) / this.renderBounds.dim * 100; - const miniHeight = this.PanelHeight() / NumCast(this._document?._viewScale, 1) / this.renderBounds.dim * 100; - const miniLeft = 50 + (NumCast(this._document?._panX) - this.renderBounds.cx) / this.renderBounds.dim * 100 - miniWidth / 2; - const miniTop = 50 + (NumCast(this._document?._panY) - this.renderBounds.cy) / this.renderBounds.dim * 100 - miniHeight / 2; - const miniSize = this.returnMiniSize(); - return <> -
- -
-
-
-
- - {"toggle minimap"}
}> -
e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} - style={{ background: DefaultStyleProvider(this._document, undefined, StyleProp.BackgroundColor) }} > - -
- - ; - } @action focusFunc = (doc: Doc, options?: DocFocusOptions) => { const vals = (!options?.originalTarget || options?.originalTarget === this._document) && this.view?.ComponentView?.freeformData?.(true); @@ -402,6 +328,10 @@ export class TabDocView extends React.Component { } } } + miniMapColor = () => this.tabColor; + miniPanelWidth = () => this.PanelWidth(); + miniPanelHeight = () => this.PanelHeight(); + tabView = () => this._view; @computed get layerProvider() { return this._document && DefaultLayerProvider(this._document); } @computed get docView() { TraceMobx(); @@ -431,14 +361,18 @@ export class TabDocView extends React.Component { docViewPath={returnEmptyDoclist} bringToFront={emptyFunction} pinToPres={TabDocView.PinDoc} /> - {this._document._viewType !== CollectionViewType.Freeform ? (null) : - <>{this._document.hideMinimap ? (null) : this.renderMiniMap()} - {"toggle minimap"}}> -
e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} > - -
- - } + + {"toggle minimap"}}> +
e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} > + +
+ ; } @@ -454,4 +388,90 @@ export class TabDocView extends React.Component { ); } +} + +interface TabMinimapViewProps { + document: Doc; + tabView: () => DocumentView | undefined; + addDocTab: (doc: Doc, where: string) => boolean; + PanelWidth: () => number; + PanelHeight: () => number; + background: () => string; +} +@observer +export class TabMinimapView extends React.Component { + @computed get renderBounds() { + const bounds = this.props.tabView()?.ComponentView?.freeformData?.()?.bounds ?? { x: 0, y: 0, r: this.returnMiniSize(), b: this.returnMiniSize() }; + const xbounds = bounds.r - bounds.x; + const ybounds = bounds.b - bounds.y; + const dim = Math.max(xbounds, ybounds); + return { l: bounds.x + xbounds / 2 - dim / 2, t: bounds.y + ybounds / 2 - dim / 2, cx: bounds.x + xbounds / 2, cy: bounds.y + ybounds / 2, dim }; + } + childLayoutTemplate = () => Cast(this.props.document.childLayoutTemplate, Doc, null); + returnMiniSize = () => NumCast(this.props.document._miniMapSize, 150); + miniDown = (e: React.PointerEvent) => { + const doc = this.props.document; + const miniSize = this.returnMiniSize(); + doc && setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { + doc._panX = clamp(NumCast(doc._panX) + delta[0] / miniSize * this.renderBounds.dim, this.renderBounds.l, this.renderBounds.l + this.renderBounds.dim); + doc._panY = clamp(NumCast(doc._panY) + delta[1] / miniSize * this.renderBounds.dim, this.renderBounds.t, this.renderBounds.t + this.renderBounds.dim); + return false; + }), emptyFunction, emptyFunction); + } + render() { + const miniWidth = this.props.PanelWidth() / NumCast(this.props.document._viewScale, 1) / this.renderBounds.dim * 100; + const miniHeight = this.props.PanelHeight() / NumCast(this.props.document._viewScale, 1) / this.renderBounds.dim * 100; + const miniLeft = 50 + (NumCast(this.props.document._panX) - this.renderBounds.cx) / this.renderBounds.dim * 100 - miniWidth / 2; + const miniTop = 50 + (NumCast(this.props.document._panY) - this.renderBounds.cy) / this.renderBounds.dim * 100 - miniHeight / 2; + const miniSize = this.returnMiniSize(); + return this.props.document._viewType !== CollectionViewType.Freeform || this.props.document.hideMinimap ? (null) : <> +
+ +
+
+
+
+ + {"toggle minimap"}
}> +
e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this.props.document.hideMinimap = !this.props.document.hideMinimap; })} + style={{ background: DefaultStyleProvider(this.props.document, undefined, StyleProp.BackgroundColor) }} > + +
+ + ; + } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 69fe731b5de047684dc31deff84590de34bba0b5 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 23 Feb 2021 22:56:24 -0500 Subject: minimap cleanup --- src/client/views/collections/TabDocView.tsx | 65 +++++++++++------------------ 1 file changed, 24 insertions(+), 41 deletions(-) (limited to 'src/client/views/collections/TabDocView.tsx') diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index c7eb9ef48..9ddc13644 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -45,17 +45,15 @@ export class TabDocView extends React.Component { _mainCont: HTMLDivElement | null = null; _tabReaction: IReactionDisposer | undefined; @observable _activated: boolean = false; - - @observable private _panelWidth = 0; - @observable private _panelHeight = 0; - @observable private _isActive: boolean = false; - @observable private _document: Doc | undefined; - @observable private _view: DocumentView | undefined; + @observable _panelWidth = 0; + @observable _panelHeight = 0; + @observable _isActive: boolean = false; + @observable _document: Doc | undefined; + @observable _view: DocumentView | 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))); } - get stack() { return (this.props as any).glContainer.parent.parent; } get tab() { return (this.props as any).glContainer.tab; } get view() { return this._view; } @@ -214,19 +212,6 @@ export class TabDocView extends React.Component { } } - /** - * Adds a document to the presentation view - **/ - @undoBatch - @action - public static UnpinDoc(doc: Doc) { - const curPres = CurrentUserUtils.ActivePresentation; - if (curPres) { - const ind = DocListCast(curPres.data).findIndex((val) => Doc.AreProtosEqual(val, doc)); - ind !== -1 && Doc.RemoveDocFromList(curPres, "data", DocListCast(curPres.data)[ind]); - } - } - componentDidMount() { const selected = () => SelectionManager.Views().some(v => v.props.Document === this._document); new _global.ResizeObserver(action((entries: any) => { @@ -313,25 +298,9 @@ export class TabDocView extends React.Component { } PanelWidth = () => this._panelWidth; PanelHeight = () => this._panelHeight; - - static miniStyleProvider = (doc: Opt, props: Opt, property: string): any => { - if (doc) { - switch (property.split(":")[0]) { - default: return DefaultStyleProvider(doc, props, property); - case StyleProp.PointerEvents: return "none"; - case StyleProp.DocContents: - const background = doc.type === DocumentType.PDF ? "red" : doc.type === DocumentType.IMG ? "blue" : doc.type === DocumentType.RTF ? "orange" : - doc.type === DocumentType.VID ? "purple" : doc.type === DocumentType.WEB ? "yellow" : "gray"; - return doc.type === DocumentType.COL ? - undefined : -
; - } - } - } miniMapColor = () => this.tabColor; - miniPanelWidth = () => this.PanelWidth(); - miniPanelHeight = () => this.PanelHeight(); tabView = () => this._view; + @computed get layerProvider() { return this._document && DefaultLayerProvider(this._document); } @computed get docView() { TraceMobx(); @@ -363,8 +332,8 @@ export class TabDocView extends React.Component { pinToPres={TabDocView.PinDoc} /> @@ -400,6 +369,20 @@ interface TabMinimapViewProps { } @observer export class TabMinimapView extends React.Component { + static miniStyleProvider = (doc: Opt, props: Opt, property: string): any => { + if (doc) { + switch (property.split(":")[0]) { + default: return DefaultStyleProvider(doc, props, property); + case StyleProp.PointerEvents: return "none"; + case StyleProp.DocContents: + const background = doc.type === DocumentType.PDF ? "red" : doc.type === DocumentType.IMG ? "blue" : doc.type === DocumentType.RTF ? "orange" : + doc.type === DocumentType.VID ? "purple" : doc.type === DocumentType.WEB ? "yellow" : "gray"; + return doc.type === DocumentType.COL ? + undefined : +
; + } + } + } @computed get renderBounds() { const bounds = this.props.tabView()?.ComponentView?.freeformData?.()?.bounds ?? { x: 0, y: 0, r: this.returnMiniSize(), b: this.returnMiniSize() }; const xbounds = bounds.r - bounds.x; @@ -424,7 +407,7 @@ export class TabMinimapView extends React.Component { const miniLeft = 50 + (NumCast(this.props.document._panX) - this.renderBounds.cx) / this.renderBounds.dim * 100 - miniWidth / 2; const miniTop = 50 + (NumCast(this.props.document._panY) - this.renderBounds.cy) / this.renderBounds.dim * 100 - miniHeight / 2; const miniSize = this.returnMiniSize(); - return this.props.document._viewType !== CollectionViewType.Freeform || this.props.document.hideMinimap ? (null) : <> + return this.props.document.type !== DocumentType.COL || this.props.document._viewType !== CollectionViewType.Freeform || this.props.document.hideMinimap ? (null) : <>
{ renderDepth={0} whenActiveChanged={emptyFunction} focus={DocUtils.DefaultFocus} - styleProvider={TabDocView.miniStyleProvider} + styleProvider={TabMinimapView.miniStyleProvider} layerProvider={undefined} addDocTab={this.props.addDocTab} pinToPres={TabDocView.PinDoc} -- cgit v1.2.3-70-g09d2 From 667e0a8cfc12a86e953f0382a36254ff9afbdcf3 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 23 Feb 2021 23:24:30 -0500 Subject: fixes for toggling minimap icon display/behavior. --- src/client/views/collections/TabDocView.tsx | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) (limited to 'src/client/views/collections/TabDocView.tsx') diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 9ddc13644..80ddf2f48 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -337,7 +337,7 @@ export class TabDocView extends React.Component { background={this.miniMapColor} document={this._document} tabView={this.tabView} /> - {"toggle minimap"}
}> + {"toggle minimap"}
}>
e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} >
@@ -384,7 +384,8 @@ export class TabMinimapView extends React.Component { } } @computed get renderBounds() { - const bounds = this.props.tabView()?.ComponentView?.freeformData?.()?.bounds ?? { x: 0, y: 0, r: this.returnMiniSize(), b: this.returnMiniSize() }; + const bounds = this.props.tabView()?.ComponentView?.freeformData?.(true)?.bounds; + if (!bounds) return undefined; const xbounds = bounds.r - bounds.x; const ybounds = bounds.b - bounds.y; const dim = Math.max(xbounds, ybounds); @@ -394,20 +395,22 @@ export class TabMinimapView extends React.Component { returnMiniSize = () => NumCast(this.props.document._miniMapSize, 150); miniDown = (e: React.PointerEvent) => { const doc = this.props.document; + const renderBounds = this.renderBounds ?? { l: 0, r: 0, t: 0, b: 0, dim: 1 }; const miniSize = this.returnMiniSize(); doc && setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { - doc._panX = clamp(NumCast(doc._panX) + delta[0] / miniSize * this.renderBounds.dim, this.renderBounds.l, this.renderBounds.l + this.renderBounds.dim); - doc._panY = clamp(NumCast(doc._panY) + delta[1] / miniSize * this.renderBounds.dim, this.renderBounds.t, this.renderBounds.t + this.renderBounds.dim); + doc._panX = clamp(NumCast(doc._panX) + delta[0] / miniSize * renderBounds.dim, renderBounds.l, renderBounds.l + renderBounds.dim); + doc._panY = clamp(NumCast(doc._panY) + delta[1] / miniSize * renderBounds.dim, renderBounds.t, renderBounds.t + renderBounds.dim); return false; }), emptyFunction, emptyFunction); } render() { + if (!this.renderBounds) return (null); const miniWidth = this.props.PanelWidth() / NumCast(this.props.document._viewScale, 1) / this.renderBounds.dim * 100; const miniHeight = this.props.PanelHeight() / NumCast(this.props.document._viewScale, 1) / this.renderBounds.dim * 100; const miniLeft = 50 + (NumCast(this.props.document._panX) - this.renderBounds.cx) / this.renderBounds.dim * 100 - miniWidth / 2; const miniTop = 50 + (NumCast(this.props.document._panY) - this.renderBounds.cy) / this.renderBounds.dim * 100 - miniHeight / 2; const miniSize = this.returnMiniSize(); - return this.props.document.type !== DocumentType.COL || this.props.document._viewType !== CollectionViewType.Freeform || this.props.document.hideMinimap ? (null) : <> + return this.props.document.hideMinimap ? (null) :
{
-
- - {"toggle minimap"}
}> -
e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this.props.document.hideMinimap = !this.props.document.hideMinimap; })} - style={{ background: DefaultStyleProvider(this.props.document, undefined, StyleProp.BackgroundColor) }} > - -
- - ; +
; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 260744fb08aca76f5c1810e0af815df3f851a853 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 25 Feb 2021 01:25:36 -0500 Subject: cleaned up DoccomponentView to just have general api fields. fixed lightbox to animate back properly & shinkwrap. --- src/client/views/LightboxView.tsx | 34 +++++++++------------- src/client/views/collections/TabDocView.tsx | 8 ++--- .../collectionFreeForm/CollectionFreeFormView.tsx | 14 +++++---- src/client/views/nodes/DocumentView.tsx | 5 ++-- 4 files changed, 28 insertions(+), 33 deletions(-) (limited to 'src/client/views/collections/TabDocView.tsx') diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx index e967a5b07..1b21bd073 100644 --- a/src/client/views/LightboxView.tsx +++ b/src/client/views/LightboxView.tsx @@ -13,7 +13,7 @@ import { SelectionManager } from '../util/SelectionManager'; import { Transform } from '../util/Transform'; import { TabDocView } from './collections/TabDocView'; import "./LightboxView.scss"; -import { DocumentView } from './nodes/DocumentView'; +import { DocumentView, ViewAdjustment } from './nodes/DocumentView'; import { DefaultStyleProvider } from './StyleProvider'; interface LightboxViewProps { @@ -103,8 +103,7 @@ export class LightboxView extends React.Component { [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + "-annotations"]), ...(LightboxView._future ?? []) - ] - .sort((a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow))); + ].sort((a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow))); } docFilters = () => LightboxView._docFilters || []; addDocTab = LightboxView.AddDocTab; @@ -113,8 +112,8 @@ export class LightboxView extends React.Component { const target = LightboxView._docTarget = LightboxView._future?.pop(); const docView = target && DocumentManager.Instance.getLightboxDocumentView(target); if (docView && target) { - docView.focus(target, { willZoom: true, scale: 0.9 }); - if (LightboxView._history?.lastElement().target !== target) LightboxView._history?.push({ doc, target: LightboxView._docTarget }); + docView.focus(target, { originalTarget: target, willZoom: true, scale: 0.9 }); + if (LightboxView._history?.lastElement().target !== target) LightboxView._history?.push({ doc, target }); } else { if (!target && LightboxView.path.length) { const saved = LightboxView._savedState; @@ -149,16 +148,14 @@ export class LightboxView extends React.Component { return; } const { doc, target } = LightboxView._history?.lastElement(); - const docView = target && DocumentManager.Instance.getLightboxDocumentView(target); - if (docView && target) { - LightboxView._doc = doc; - LightboxView._docTarget = target || doc; - if (LightboxView._future?.lastElement() !== previous.target || previous.doc) LightboxView._future?.push(previous.target || previous.doc); - docView.focus(target, { willZoom: true, scale: 0.9 }); - } else { - LightboxView._doc = doc; - LightboxView._docTarget = target || doc; - } + const docView = DocumentManager.Instance.getLightboxDocumentView(target || doc); + const focusSpeed = 1000; + doc._viewTransition = `transform ${focusSpeed}ms`; + LightboxView._doc = doc; + LightboxView._docTarget = target || doc; + docView?.focus(doc, { willZoom: true, scale: 0.9 }); + setTimeout(() => doc._viewTransition = undefined, focusSpeed); + if (LightboxView._future?.lastElement() !== previous.target || previous.doc) LightboxView._future?.push(previous.target || previous.doc); LightboxView._tourMap = DocListCast(LightboxView._docTarget?.links).map(link => { const opp = LinkManager.getOppositeAnchor(link, LightboxView._docTarget!); return opp?.TourMap ? opp : undefined; @@ -208,11 +205,8 @@ export class LightboxView extends React.Component { { LightboxView._docView = r !== null ? r : undefined; setTimeout(action(() => { - const vals = r?.ComponentView?.freeformData?.(); - if (vals && r) { - r.layoutDoc._panX = vals.panX; - r.layoutDoc._panY = vals.panY; - r.layoutDoc._viewScale = vals.scale; + if (r && LightboxView._docTarget === r.props.Document) { + r.ComponentView?.shrinkWrap?.(); } r && (LightboxView._docTarget = undefined); })); diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 80ddf2f48..3f8794665 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -273,12 +273,10 @@ export class TabDocView extends React.Component { } @action focusFunc = (doc: Doc, options?: DocFocusOptions) => { - const vals = (!options?.originalTarget || options?.originalTarget === this._document) && this.view?.ComponentView?.freeformData?.(true); - if (vals && this._document) { + const shrinkwrap = options?.originalTarget === this._document && this.view?.ComponentView?.shrinkWrap; + if (shrinkwrap && this._document) { const focusSpeed = 1000; - this._document._panX = vals.panX; - this._document._panY = vals.panY; - this._document._viewScale = vals.scale; + shrinkwrap(); this._document._viewTransition = `transform ${focusSpeed}ms`; setTimeout(action(() => { this._document!._viewTransition = undefined; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 92c09ff3f..dfca2ba07 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -120,9 +120,7 @@ export class CollectionFreeFormView extends CollectionSubView this.props.childDoubleClickScript || ScriptCast(this.Document.onChildDoubleClick); parentActive = (outsideReaction: boolean) => this.props.active(outsideReaction) || this.props.parentActive?.(outsideReaction) || this.backgroundActive || this.layoutDoc._viewType === CollectionViewType.Pile ? true : false; elementFunc = () => this._layoutElements; + shrinkWrap = () => { + const vals = this.fitToContentVals; + this.layoutDoc._panX = vals.bounds.cx; + this.layoutDoc._panY = vals.bounds.cy; + this.layoutDoc._viewScale = vals.scale; + } freeformData = (force?: boolean) => this.fitToContent || force ? this.fitToContentVals : undefined; freeformDocFilters = () => this._focusFilters || this.docFilters(); freeformRangeDocFilters = () => this._focusRangeFilters || this.docRangeFilters(); reverseNativeScaling = () => this.fitToContent ? true : false; - panX = () => this.freeformData()?.panX ?? NumCast(this.Document._panX); - panY = () => this.freeformData()?.panY ?? NumCast(this.Document._panY); + panX = () => this.freeformData()?.bounds.cx ?? NumCast(this.Document._panX); + panY = () => this.freeformData()?.bounds.cy ?? NumCast(this.Document._panY); zoomScaling = () => (this.freeformData()?.scale ?? NumCast(this.Document[this.scaleFieldKey], 1)); contentTransform = () => `translate(${this.cachedCenteringShiftX}px, ${this.cachedCenteringShiftY}px) scale(${this.zoomScaling()}) translate(${-this.panX()}px, ${-this.panY()}px)`; getTransform = () => this.cachedGetTransform.copy(); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index ec2c77a82..01d799255 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -80,9 +80,8 @@ export interface DocComponentView { scrollFocus?: (doc: Doc, smooth: boolean) => Opt; // returns the duration of the focus setViewSpec?: (anchor: Doc, preview: boolean) => void; // sets viewing information for a componentview, typically when following a link. 'preview' tells the view to use the values without writing to the document reverseNativeScaling?: () => boolean; // DocumentView's setup screenToLocal based on the doc having a nativeWidth/Height. However, some content views (e.g., FreeFormView w/ fitToBox set) may ignore the native dimensions so this flags the DocumentView to not do Nativre scaling. - menuControls?: any; // controls to display in the top menu bar when the document is selected. - // this is kind of hacky since it's not really a generic interface. need to think about how to do this better (it's used to fit a tab's contents to view when shown in a lightbox and to setup the minimap) - freeformData?: (force?: boolean) => Opt<{ panX: number, panY: number, scale: number, bounds: { x: number, y: number, r: number, b: number } }>; // the content bounds, pan position and zoom scale of a content view (typically for FreeformViews) + shrinkWrap?: () => boolean; // requests a document to display all of its contents with no white space. currently only implemented (needed?) for freeform views + menuControls?: () => JSX.Element; // controls to display in the top menu bar when the document is selected. } export interface DocumentViewSharedProps { renderDepth: number; -- cgit v1.2.3-70-g09d2