From 5f999d6fa4dcc8a8994a4c97f7ce6e0d66d67411 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 14 Dec 2020 18:46:22 -0500 Subject: renamed ContentFittingDocumentView as DocumentView. Renamed DocmentView as DocumentViewInternal --- src/client/views/collections/CollectionMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/collections/CollectionMenu.tsx') diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 833fc0007..896b10360 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -11,6 +11,7 @@ import { Id } from "../../../fields/FieldSymbols"; import { InkTool } from "../../../fields/InkField"; import { List } from "../../../fields/List"; import { ObjectField } from "../../../fields/ObjectField"; +import { RichTextField } from "../../../fields/RichTextField"; import { listSpec } from "../../../fields/Schema"; import { ScriptField } from "../../../fields/ScriptField"; import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types"; @@ -33,7 +34,6 @@ import { PresBox } from "../nodes/PresBox"; import "./CollectionMenu.scss"; import { CollectionViewType, COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { TabDocView } from "./TabDocView"; -import { RichTextField } from "../../../fields/RichTextField"; @observer export class CollectionMenu extends AntimodeMenu { -- cgit v1.2.3-70-g09d2 From 83f4a468cb2b97908771d3f7e26e9ca283df4230 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 14 Dec 2020 20:49:31 -0500 Subject: minor cleanup --- src/client/views/GlobalKeyHandler.ts | 2 +- src/client/views/StyleProvider.tsx | 6 +- src/client/views/collections/CollectionMenu.tsx | 2 +- src/client/views/collections/TreeView.tsx | 2 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 1 - src/client/views/nodes/DocumentLinksButton.tsx | 12 +-- src/client/views/nodes/DocumentView.tsx | 89 ++++++++++------------ .../views/nodes/formattedText/DashDocView.tsx | 1 - .../views/nodes/formattedText/RichTextSchema.tsx | 5 +- 9 files changed, 52 insertions(+), 68 deletions(-) (limited to 'src/client/views/collections/CollectionMenu.tsx') diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index a727e58a4..a391bb550 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -180,7 +180,7 @@ export class KeyManager { case "ƒ": case "f": const dv = SelectionManager.SelectedDocuments()?.[0]; - dv && DocumentView.FloatDoc(dv); + UndoManager.RunInBatch(() => dv?.float(), "float"); } return { diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index d22f34cd0..9ed8a2924 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -61,14 +61,14 @@ function toggleBackground(doc: Doc) { } export function testDocProps(toBeDetermined: any): toBeDetermined is DocumentViewProps { - return (toBeDetermined?.select) ? false : true; + return (toBeDetermined?.active) ? undefined : toBeDetermined; } // // a preliminary implementation of a dash style sheet for setting rendering properties of documents nested within a Tab // export function DefaultStyleProvider(doc: Opt, props: Opt, property: string): any { - const docProps = testDocProps(props); + const docProps = testDocProps(props) ? props : undefined; const selected = property.includes(":selected"); switch (property.split(":")[0]) { case StyleProp.DocContents: return undefined; @@ -133,7 +133,7 @@ export function DefaultStyleProvider(doc: Opt, props: OptToggle Overlay Layer} placement="bottom"> } diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 31a1a2b99..e289f24a9 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -503,7 +503,7 @@ export class TreeView extends React.Component { switch (property.split(":")[0]) { case StyleProp.Opacity: return this.outlineMode ? undefined : 1; case StyleProp.BackgroundColor: return StrCast(doc._backgroundColor, StrCast(doc.backgroundColor)); - case StyleProp.DocContents: return testDocProps(props) && !props?.treeViewDoc ? (null) : + case StyleProp.DocContents: return testDocProps(props) && props?.treeViewDoc ? (null) :
this.props.View._link = linkDoc); - setTimeout(action(() => this.props.View._link = undefined), 0); + runInAction(() => this.props.View.LinkBeingCreated = linkDoc); + setTimeout(action(() => this.props.View.LinkBeingCreated = undefined), 0); } linkDrag?.end(); }, @@ -164,11 +164,11 @@ export class DocumentLinksButton extends React.Component { - DocumentLinksButton.StartLinkView && (DocumentLinksButton.StartLinkView._link = undefined); - endLinkView._link = undefined; + DocumentLinksButton.StartLinkView && (DocumentLinksButton.StartLinkView.LinkBeingCreated = undefined); + endLinkView.LinkBeingCreated = undefined; }), 0); } LinkManager.currentLink = linkDoc; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 61e17082a..9405b1ed5 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -90,17 +90,17 @@ export interface DocumentViewProps extends DocumentViewSharedProps { radialMenu?: String[]; LayoutTemplateString?: string; dontCenter?: "x" | "y" | "xy"; + ContentScaling?: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal NativeWidth?: () => number; NativeHeight?: () => number; LayoutTemplate?: () => Opt; - ContentScaling?: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal contextMenuItems?: () => { script: ScriptField, label: string }[]; onDoubleClick?: () => ScriptField; onPointerDown?: () => ScriptField; onPointerUp?: () => ScriptField; } -export interface DocumentViewInternalProps { +export interface DocumentViewInternalProps extends DocumentViewProps { NativeWidth: () => number; NativeHeight: () => number; isSelected: (outsideReaction?: boolean) => boolean; @@ -109,7 +109,7 @@ export interface DocumentViewInternalProps { } @observer -export class DocumentViewInternal extends DocComponent(Document) { +export class DocumentViewInternal extends DocComponent(Document) { @observable _animateScalingTo = 0; private _downX: number = 0; private _downY: number = 0; @@ -134,7 +134,7 @@ export class DocumentViewInternal extends DocComponent
); } - captionStyleProvider = (doc: Doc | undefined, props: Opt, property: string) => { + captionStyleProvider = (doc: Doc | undefined, props: Opt, property: string) => { if (property === StyleProp.Color) return "white"; if (property === StyleProp.BackgroundColor) return "rgba(0,0,0 ,0.4)"; return this.props?.styleProvider?.(doc, props, property); @@ -951,7 +951,6 @@ export class DocumentViewInternal extends DocComponent; } - @computed get renderDoc() { TraceMobx(); if (!(this.props.Document instanceof Doc) || GetEffectiveAcl(this.props.Document[DataSym]) === AclPrivate || this.hidden) return null; @@ -996,6 +995,7 @@ export class DocumentViewInternal extends DocComponent { public static ROOT_DIV = "documentView-effectsWrapper"; public get displayName() { return "DocumentView(" + this.props.Document?.title + ")"; } // this makes mobx trace() statements more descriptive public ContentRef = React.createRef(); - @observable _link: Opt; // see DocumentButtonBar for explanation of how this works + @observable LinkBeingCreated: Opt; // see DocumentLinksButton for explanation of how this works @observable public docView: DocumentViewInternal | undefined | null; get rootDoc() { return this.docView?.rootDoc || this.Document; } @@ -1035,7 +1029,6 @@ export class DocumentView extends React.Component { toggleNativeDimensions = () => this.docView?.toggleNativeDimensions(); contentsActive = () => this.docView?.contentsActive(); - // follows a link - if the target is on screen, it highlights/pans to it. // if the target isn't onscreen, then it will open up the target in a tab, on the right, or in place // depending on the followLinkLocation property of the source (or the link itself as a fallback); @@ -1070,9 +1063,8 @@ export class DocumentView extends React.Component { await DocumentManager.Instance.FollowLink(linkDoc, sourceDoc, createViewFunc, BoolCast(sourceDoc.followLinkZoom, false), docView.ContainingCollectionDoc, batch.end, altKey ? true : undefined); } - @undoBatch @action - public static FloatDoc(topDocView: DocumentView) { - const { Document: topDoc, ContainingCollectionView: container } = topDocView.props; + @action public float = () => { + const { Document: topDoc, ContainingCollectionView: container } = this.props; const screenXf = container?.screenToLocalTransform(); if (screenXf) { SelectionManager.DeselectAll(); @@ -1081,10 +1073,10 @@ export class DocumentView extends React.Component { topDoc.z = 0; topDoc.x = spt[0]; topDoc.y = spt[1]; - topDocView.props.removeDocument?.(topDoc); - topDocView.props.addDocTab(topDoc, "inParent"); + this.props.removeDocument?.(topDoc); + this.props.addDocTab(topDoc, "inParent"); } else { - const spt = topDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + const spt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); const fpt = screenXf.transformPoint(spt[0], spt[1]); topDoc.z = 1; topDoc.x = fpt[0]; @@ -1129,22 +1121,14 @@ export class DocumentView extends React.Component { @computed get centeringY() { return this.props.Document._fitWidth || this.props.dontCenter?.includes("y") ? 0 : this.YShift; } getBounds = () => { - if (!this.docView || - !this.docView.ContentDiv || - this.docView.props.renderDepth === 0 || - this.docView.props.treeViewDoc || - Doc.AreProtosEqual(this.props.Document, Doc.UserDoc())) { + if (!this.docView || !this.docView.ContentDiv || this.docView.props.renderDepth === 0 || this.docView.props.treeViewDoc || Doc.AreProtosEqual(this.props.Document, Doc.UserDoc())) { return undefined; } - const xf = this.docView?.props.ScreenToLocalTransform(); - const transform = (xf.scale(this.nativeScaling)).inverse(); - var [left, top] = transform.transformPoint(0, 0); - let [right, bottom] = transform.transformPoint(this.PanelWidth(), this.PanelHeight()); + const xf = (this.docView?.props.ScreenToLocalTransform().scale(this.nativeScaling)).inverse(); + const [[left, top], [right, bottom]] = [xf.transformPoint(0, 0), xf.transformPoint(this.panelWidth, this.panelHeight)]; if (this.docView.props.LayoutTemplateString?.includes("LinkAnchorBox")) { const docuBox = this.docView.ContentDiv.getElementsByClassName("linkAnchorBox-cont"); - if (docuBox.length) { - return docuBox[0].getBoundingClientRect(); - } + if (docuBox.length) return docuBox[0].getBoundingClientRect(); } return { left, top, right, bottom }; } @@ -1185,9 +1169,7 @@ export class DocumentView extends React.Component { screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(-this.centeringX, -this.centeringY).scale(1 / this.nativeScaling); componentDidMount() { - if (!BoolCast(this.props.Document.dontRegisterView, this.props.dontRegisterView)) { - DocumentManager.Instance.AddView(this); - } + !BoolCast(this.props.Document.dontRegisterView, this.props.dontRegisterView) && DocumentManager.Instance.AddView(this); } componentWillUnmount() { !this.props.dontRegisterView && DocumentManager.Instance.RemoveView(this); @@ -1195,30 +1177,37 @@ export class DocumentView extends React.Component { render() { TraceMobx(); + const internalProps = { + ...this.props, + DocumentView: this, + PanelWidth: this.PanelWidth, + PanelHeight: this.PanelHeight, + NativeWidth: this.NativeWidth, + NativeHeight: this.NativeHeight, + isSelected: this.isSelected, + select: this.select, + ContentScaling: this.ContentScale, + ScreenToLocalTransform: this.screenToLocalTransform, + focus: this.props.focus || emptyFunction, + bringToFront: emptyFunction, + } return (
{!this.props.Document || !this.props.PanelWidth() ? (null) : (
0.001 ? `${100 * (this.props.PanelWidth() - this.Xshift * 2) / this.props.PanelWidth()}%` : this.props.PanelWidth(), height: Math.abs(this.YShift) > 0.001 ? this.props.Document._fitWidth ? `${this.panelHeight}px` : `${100 * this.nativeHeight / this.nativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(), }}> - this.docView = r)} - PanelWidth={this.PanelWidth} - PanelHeight={this.PanelHeight} - NativeWidth={this.NativeWidth} - NativeHeight={this.NativeHeight} - isSelected={this.isSelected} - select={this.select} - ContentScaling={this.ContentScale} - ScreenToLocalTransform={this.screenToLocalTransform} - focus={this.props.focus || emptyFunction} - bringToFront={emptyFunction} - /> + this.docView = r)} />
)}
); } } + + +Scripting.addGlobal(function toggleDetail(doc: any, layoutKey: string, otherKey: string = "layout") { + const dv = DocumentManager.Instance.getDocumentView(doc); + if (dv?.props.Document.layoutKey === layoutKey) dv?.switchViews(otherKey !== "layout", otherKey.replace("layout_", "")); + else dv?.switchViews(true, layoutKey.replace("layout_", "")); +}); \ No newline at end of file diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx index d834276c7..1fbd3af5c 100644 --- a/src/client/views/nodes/formattedText/DashDocView.tsx +++ b/src/client/views/nodes/formattedText/DashDocView.tsx @@ -246,7 +246,6 @@ export class DashDocView extends React.Component { searchFilterDocs={this.props.tbox?.props.searchFilterDocs || returnEmptyDoclist} ContainingCollectionView={this._textBox.props.ContainingCollectionView} ContainingCollectionDoc={this._textBox.props.ContainingCollectionDoc} - ContentScaling={this.contentScaling} /> diff --git a/src/client/views/nodes/formattedText/RichTextSchema.tsx b/src/client/views/nodes/formattedText/RichTextSchema.tsx index 2f180a228..d272b6b8c 100644 --- a/src/client/views/nodes/formattedText/RichTextSchema.tsx +++ b/src/client/views/nodes/formattedText/RichTextSchema.tsx @@ -26,11 +26,9 @@ export class DashDocView { //moved getDocTransform = () => { const { scale, translateX, translateY } = Utils.GetScreenTransform(this._outer); - return new Transform(-translateX, -translateY, 1).scale(1 / this.contentScaling() / scale); + return new Transform(-translateX, -translateY, 1).scale(1 / scale); } - //moved - contentScaling = () => Doc.NativeWidth(this._dashDoc) > 0 ? this._dashDoc![WidthSym]() / Doc.NativeWidth(this._dashDoc) : 1; //moved outerFocus = (target: Doc) => this._textBox.props.focus(this._textBox.props.Document); // ideally, this would scroll to show the focus target @@ -155,7 +153,6 @@ export class DashDocView { searchFilterDocs={this._textBox.props.searchFilterDocs} ContainingCollectionView={this._textBox.props.ContainingCollectionView} ContainingCollectionDoc={this._textBox.props.ContainingCollectionDoc} - ContentScaling={this.contentScaling} />, this._dashSpan); if (node.attrs.width !== dashDoc._width + "px" || node.attrs.height !== dashDoc._height + "px") { -- cgit v1.2.3-70-g09d2