diff options
Diffstat (limited to 'src/client/views/collections')
16 files changed, 85 insertions, 120 deletions
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 8a27f8102..c5910b0be 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 } from '../../../Utils'; +import { returnFalse, returnZero, OmitKeys } from '../../../Utils'; import { ScriptField } from '../../../fields/ScriptField'; type CarouselDocument = makeInterface<[typeof documentSchema, typeof collectionSchema]>; @@ -45,17 +45,18 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) onContentClick = () => ScriptCast(this.layoutDoc.onChildClick); @computed get content() { const index = NumCast(this.layoutDoc._itemIndex); - return !(this.childLayoutPairs?.[index]?.layout instanceof Doc) ? (null) : + const curDoc = this.childLayoutPairs?.[index]; + return !(curDoc?.layout instanceof Doc) ? (null) : <> <div className="collectionCarouselView-image" key="image"> - <ContentFittingDocumentView {...this.props} + <ContentFittingDocumentView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit} onDoubleClick={this.onContentDoubleClick} onClick={this.onContentClick} renderDepth={this.props.renderDepth + 1} LayoutTemplate={this.props.ChildLayoutTemplate} LayoutTemplateString={this.props.ChildLayoutString} - Document={this.childLayoutPairs[index].layout} - DataDoc={this.childLayoutPairs[index].data} + Document={curDoc.layout} + DataDoc={curDoc.data} PanelHeight={this.panelHeight} ScreenToLocalTransform={this.props.ScreenToLocalTransform} bringToFront={returnFalse} @@ -71,7 +72,7 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) <FormattedTextBox key={index} {...this.props} xMargin={NumCast(this.layoutDoc["_carousel-caption-xMargin"])} yMargin={NumCast(this.layoutDoc["_carousel-caption-yMargin"])} - Document={this.childLayoutPairs[index].layout} DataDoc={undefined} fieldKey={"caption"} /> + Document={curDoc.layout} DataDoc={undefined} fieldKey={"caption"} /> </div> </>; } diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx index ea050011a..22c1f51a6 100644 --- a/src/client/views/collections/CollectionLinearView.tsx +++ b/src/client/views/collections/CollectionLinearView.tsx @@ -153,8 +153,6 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { onClick={undefined} ScreenToLocalTransform={this.getTransform(dref)} ContentScaling={returnOne} - NativeHeight={returnZero} - NativeWidth={returnZero} PanelWidth={nested ? pair.layout[WidthSym] : () => this.dimension()}// ugh - need to get rid of this inline function to avoid recomputing PanelHeight={nested ? pair.layout[HeightSym] : () => this.dimension()} renderDepth={this.props.renderDepth + 1} diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 1b68c0e1a..332a2001f 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -429,8 +429,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { <ContentFittingDocumentView Document={this.previewDocument} DataDoc={undefined} - NativeHeight={returnZero} - NativeWidth={returnZero} fitToBox={true} FreezeDimensions={true} focus={emptyFunction} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index fb0bce53e..cbc62be91 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -12,7 +12,7 @@ import { listSpec, makeInterface } from "../../../fields/Schema"; import { SchemaHeaderField } from "../../../fields/SchemaHeaderField"; import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Types"; import { TraceMobx } from "../../../fields/util"; -import { emptyFunction, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils, smoothScroll } from "../../../Utils"; +import { emptyFunction, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils, smoothScroll, returnVal } from "../../../Utils"; import { DragManager, dropActionType } from "../../util/DragManager"; import { Transform } from "../../util/Transform"; import { undoBatch } from "../../util/UndoManager"; @@ -77,12 +77,9 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) const dxf = () => this.getDocTransform(d, dref.current!); this._docXfs.push({ dxf, width, height }); const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap); - if (height() < 5) { - console.log("here" + height()); - } const style = this.isStackingView ? { width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` }; return <div className={`collectionStackingView-${this.isStackingView ? "columnDoc" : "masonryDoc"}`} key={d[Id]} ref={dref} style={style} > - {this.getDisplayDoc(d, (!d.isTemplateDoc && !d.isTemplateForField && !d.PARAMS) ? undefined : this.props.DataDoc, dxf, width)} + {this.getDisplayDoc(d, dxf, width)} </div>; }); } @@ -131,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?.(); @@ -197,7 +181,8 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) }, 500); } - getDisplayDoc(doc: Doc, dataDoc: Doc | undefined, dxf: () => Transform, width: () => number) { + getDisplayDoc(doc: Doc, dxf: () => Transform, width: () => number) { + const dataDoc = (!doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS) ? undefined : this.props.DataDoc; const height = () => this.getDocHeight(doc); const opacity = () => this.Document._currentFrame === undefined ? this.props.childOpacity?.() : CollectionFreeFormDocumentView.getValues(doc, NumCast(this.Document._currentFrame))?.opacity; return <ContentFittingDocumentView @@ -211,10 +196,11 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - NativeHeight={returnZero} - NativeWidth={returnZero} + 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={BoolCast(this.layoutDoc.dontRegisterChildViews, this.props.dontRegisterView)} + dontRegisterView={dataDoc ? true : BoolCast(this.layoutDoc.dontRegisterChildViews, this.props.dontRegisterView)} rootSelected={this.rootSelected} dropAction={StrCast(this.layoutDoc.childDropAction) as dropActionType} onClick={this.onChildClickHandler} @@ -247,13 +233,15 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) } getDocHeight(d?: Doc) { if (!d) return 0; + const dataDoc = (!d.isTemplateDoc && !d.isTemplateForField && !d.PARAMS) ? undefined : this.props.DataDoc; const layoutDoc = Doc.Layout(d, this.props.ChildLayoutTemplate?.()); - const nw = NumCast(layoutDoc._nativeWidth); - const nh = NumCast(layoutDoc._nativeHeight); + const layoutField = Doc.LayoutFieldKey(layoutDoc); + const nw = NumCast(layoutDoc._nativeWidth) || NumCast(dataDoc?.[`${layoutField}-nativeWidth`]); + const nh = NumCast(layoutDoc._nativeHeight) || NumCast(dataDoc?.[`${layoutField}-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); + if (!(this.layoutDoc._columnsFill)) wid = Math.min(this.getDocWidth(d), wid); return wid * aspect; } return layoutDoc._fitWidth ? @@ -481,8 +469,8 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) } - @computed get nativeWidth() { return NumCast(this.layoutDoc._nativeWidth) || this.props.NativeWidth() || 0; } - @computed get nativeHeight() { return NumCast(this.layoutDoc._nativeHeight) || this.props.NativeHeight() || 0; } + @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), NumCast(this.layoutDoc._nativeWidth)); } + @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), NumCast(this.layoutDoc._nativeHeight)); } @computed get scaling() { return !this.nativeWidth ? 1 : this.props.PanelHeight() / this.nativeHeight; } diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 94cd7052a..c79547bb4 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -31,8 +31,8 @@ export interface CollectionViewProps extends FieldViewProps { setPreviewCursor?: (func: (x: number, y: number, drag: boolean) => void) => void; rootSelected: (outsideReaction?: boolean) => boolean; fieldKey: string; - NativeWidth: () => number; - NativeHeight: () => number; + NativeWidth?: () => number; + NativeHeight?: () => number; } export interface SubCollectionViewProps extends CollectionViewProps { @@ -40,6 +40,7 @@ export interface SubCollectionViewProps extends CollectionViewProps { children?: never | (() => JSX.Element[]) | React.ReactNode; ChildLayoutTemplate?: () => Doc; childOpacity?: () => number; + childIgnoreNativeSize?: boolean; ChildLayoutString?: string; childClickScript?: ScriptField; childDoubleClickScript?: ScriptField; @@ -331,7 +332,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?: Doc.GetProto(htmlDoc)["data-text"] = Doc.GetProto(htmlDoc).text = text; this.props.addDocument(htmlDoc); if (srcWeb) { - const focusNode = (SelectionManager.SelectedDocuments()[0].ContentDiv?.getElementsByTagName("iframe")?.[0].contentDocument?.getSelection()?.focusNode as any); + const focusNode = (SelectionManager.SelectedDocuments()[0].ContentDiv?.getElementsByTagName("iframe")?.[0]?.contentDocument?.getSelection()?.focusNode as any); if (focusNode) { const rect = "getBoundingClientRect" in focusNode ? focusNode.getBoundingClientRect() : focusNode?.parentElement.getBoundingClientRect(); const x = (rect?.x || 0); @@ -352,14 +353,15 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?: if (uriList || text) { if ((uriList || text).includes("www.youtube.com/watch") || text.includes("www.youtube.com/embed")) { const url = (uriList || text).replace("youtube.com/watch?v=", "youtube.com/embed/").split("&")[0]; - this.addDocument(Docs.Create.VideoDocument(url, { + console.log("Video URI = ", uriList); + console.log("Add:" + this.addDocument(Docs.Create.VideoDocument(url, { ...options, title: url, _width: 400, _height: 315, _nativeWidth: 600, _nativeHeight: 472.5 - })); + }))); return; } // let matches: RegExpExecArray | null; @@ -380,27 +382,29 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?: // } } if (uriList) { + console.log("Web URI = ", uriList); const existingWebDoc = await Hypothesis.findWebDoc(uriList); if (existingWebDoc) { const alias = Doc.MakeAlias(existingWebDoc); alias.x = options.x; alias.y = options.y; alias._nativeWidth = 850; - alias._nativeHeight = 962; + alias._height = 512; alias._width = 400; this.addDocument(alias); } else { + console.log("Adding ..."); const newDoc = Docs.Create.WebDocument(uriList, { ...options, title: uriList.split("#annotations:")[0], _width: 400, - _height: 315, + _height: 512, _nativeWidth: 850, - _nativeHeight: 962, useCors: true }); + console.log(" ... " + newDoc.title); newDoc.data = new WebField(uriList.split("#annotations:")[0]); // clean hypothes.is URLs that reference a specific annotation (eg. https://en.wikipedia.org/wiki/Cartoon#annotations:t7qAeNbCEeqfG5972KR2Ig) - this.addDocument(newDoc); + console.log(" ... " + this.addDocument(newDoc) + " " + newDoc.title); } return; } diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index f96a5c4f0..e192f1760 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -107,8 +107,9 @@ } .treeViewItem-border { - display: inherit; + display: flex; border-left: dashed 1px #00000042; + overflow: hidden; } .treeViewItem-header-editing, diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index f13fee776..6c3fb56e2 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -348,8 +348,8 @@ class TreeView extends React.Component<TreeViewProps> { const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth; return <div ref={this._dref} style={{ display: "inline-block", height: panelHeight() }} key={this.doc[Id]}> <ContentFittingDocumentView - Document={layoutDoc} - DataDoc={this.dataDoc} + Document={this.doc} + DataDoc={undefined} LibraryPath={emptyPath} renderDepth={this.props.renderDepth + 1} rootSelected={returnTrue} @@ -357,8 +357,8 @@ class TreeView extends React.Component<TreeViewProps> { backgroundColor={this.props.backgroundColor} fitToBox={this.boundsOfCollectionDocument !== undefined} FreezeDimensions={true} - NativeWidth={layoutDoc.type === DocumentType.RTF ? this.rtfWidth : returnZero} - NativeHeight={layoutDoc.type === DocumentType.RTF ? this.rtfHeight : returnZero} + NativeWidth={layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined} + NativeHeight={layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined} PanelWidth={panelWidth} PanelHeight={panelHeight} focus={returnFalse} @@ -464,8 +464,6 @@ class TreeView extends React.Component<TreeViewProps> { ContentScaling={returnOne} PanelWidth={this.truncateTitleWidth} PanelHeight={returnZero} - NativeHeight={returnZero} - NativeWidth={returnZero} contextMenuItems={this.contextMenuItems} opacity={returnOne} renderDepth={1} diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index e0c40ce77..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 { @@ -367,37 +368,6 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus bodyPanelWidth = () => this.props.PanelWidth(); facetWidth = () => Math.max(0, Math.min(this.props.PanelWidth() - 25, this._facetWidth)); - - @computed get dataDoc() { - return (this.props.DataDoc && this.props.Document.isTemplateForField ? Doc.GetProto(this.props.DataDoc) : - this.props.Document.resolvedDataDoc ? this.props.Document : Doc.GetProto(this.props.Document)); // if the layout document has a resolvedDataDoc, then we don't want to get its parent which would be the unexpanded template - } - // The data field for rendering this collection will be on the this.props.Document unless we're rendering a template in which case we try to use props.DataDoc. - // When a document has a DataDoc but it's not a template, then it contains its own rendering data, but needs to pass the DataDoc through - // to its children which may be templates. - // If 'annotationField' is specified, then all children exist on that field of the extension document, otherwise, they exist directly on the data document under 'fieldKey' - @computed get dataField() { - return this.dataDoc[this.props.fieldKey]; - } - - get childLayoutPairs(): { layout: Doc; data: Doc; }[] { - const { Document, DataDoc } = this.props; - const validPairs = this.childDocs.map(doc => Doc.GetLayoutDataDocPair(Document, DataDoc, doc)).filter(pair => pair.layout); - return validPairs.map(({ data, layout }) => ({ data: data as Doc, layout: layout! })); // this mapping is a bit of a hack to coerce types - } - - get childDocList() { - return Cast(this.dataField, listSpec(Doc)); - } - - get childDocs() { - const dfield = this.dataField; - const rawdocs = (dfield instanceof Doc) ? [dfield] : Cast(dfield, listSpec(Doc), Cast(this.props.Document.rootDocument, Doc, null) ? [Cast(this.props.Document.rootDocument, Doc, null)] : []); - const docs = rawdocs.filter(d => d && !(d instanceof Promise)).map(d => d as Doc); - const viewSpecScript = ScriptCast(this.props.Document.viewSpecScript); - return viewSpecScript ? docs.filter(d => viewSpecScript.script.run({ doc: d }, console.log).result) : docs; - } - onPointerDown = (e: React.PointerEvent) => { setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { this._facetWidth = this.props.PanelWidth() - Math.max(this.props.ScreenToLocalTransform().transformPoint(e.clientX, 0)[0], 0); diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 1fb7aa04a..854254195 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -570,8 +570,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> { ref="overlay"><ContentFittingDocumentView Document={this._showDoc} DataDoc={this._showDataDoc} - NativeHeight={returnZero} - NativeWidth={returnZero} fitToBox={true} FreezeDimensions={true} focus={emptyFunction} diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index fb4f5c366..589649ad9 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -68,7 +68,6 @@ export class TabDocView extends React.Component<TabDocViewProps> { tab.element[0].onmouseenter = (e: MouseEvent) => { if (SnappingManager.GetIsDragging() && tab.contentItem !== tab.header.parent.getActiveContentItem()) { tab.header.parent.setActiveContentItem(tab.contentItem); - console.log("Seetting " + titleEle.value); tab.setActive(true); } }; @@ -88,7 +87,7 @@ export class TabDocView extends React.Component<TabDocViewProps> { (document.activeElement !== titleEle) && titleEle.focus(); } }; - tab._disposers.selectionDisposer = reaction(() => SelectionManager.SelectedDocuments().some(v => v.topMost && v.props.Document === doc), + tab._disposers.selectionDisposer = reaction(() => SelectionManager.SelectedDocuments().some(v => (v.topMost || v.props.treeViewDoc) && v.props.Document === doc), (selected) => selected && tab.contentItem !== tab.header.parent.getActiveContentItem() && UndoManager.RunInBatch(() => tab.header.parent.setActiveContentItem(tab.contentItem), "tab switch")); @@ -190,9 +189,9 @@ export class TabDocView extends React.Component<TabDocViewProps> { private onActiveContentItemChanged() { if (this.props.glContainer.tab && this._isActive !== this.props.glContainer.tab.isActive) { this._isActive = this.props.glContainer.tab.isActive; - this._isActive && setTimeout(() => this.view && SelectionManager.SelectDoc(this.view, false), 0); (CollectionDockingView.Instance as any)._goldenLayout?.isInitialised && CollectionDockingView.Instance.stateChanged(); !this._isActive && this._document && Doc.UnBrushDoc(this._document); // bcz: bad -- trying to simulate a pointer leave event when a new tab is opened up on top of an existing one. + this._isActive && this.view && SelectionManager.SelectDoc(this.view, false); } } @@ -228,8 +227,8 @@ export class TabDocView extends React.Component<TabDocViewProps> { } 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, @@ -306,8 +305,6 @@ export class TabDocView extends React.Component<TabDocViewProps> { ContentScaling={returnOne} PanelWidth={this.returnMiniSize} PanelHeight={this.returnMiniSize} - NativeHeight={returnZero} - NativeWidth={returnZero} ScreenToLocalTransform={this.ScreenToLocalTransform} renderDepth={0} whenActiveChanged={emptyFunction} @@ -332,6 +329,7 @@ export class TabDocView extends React.Component<TabDocViewProps> { } focusFunc = (doc: Doc, willZoom: boolean, scale?: number, afterFocus?: () => void) => afterFocus?.(); setView = action((view: DocumentView) => this._view = view); + active = () => this._isActive; @computed get docView() { TraceMobx(); return !this._document || this._document._viewType === CollectionViewType.Docking ? (null) : @@ -347,11 +345,11 @@ export class TabDocView extends React.Component<TabDocViewProps> { 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} + parentActive={this.active} whenActiveChanged={emptyFunction} focus={this.focusFunc} backgroundColor={CollectionDockingView.Instance.props.backgroundColor} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index 3a2979696..417b4c1ff 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -103,8 +103,24 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo // showLinks={action(() => { })} // />, { x: 300, y: 300 }); }); + + } + visibleY = (el: any) => { + var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height, + el = el.parentNode; + do { + rect = el.getBoundingClientRect(); + if (top <= rect.bottom === false && getComputedStyle(el).overflow === "hidden") return rect.bottom; + // Check if the element is out of view due to a container scrolling + if ((top + height) <= rect.top && getComputedStyle(el).overflow === "hidden") return rect.top; + el = el.parentNode; + } while (el != document.body); + // Check its within the document viewport + return top;//top <= document.documentElement.clientHeight && getComputedStyle(document.documentElement).overflow === "hidden"; + }; + @computed get renderData() { this._start; if (SnappingManager.GetIsDragging() || !this.props.A.ContentDiv || !this.props.B.ContentDiv || !this.props.LinkDocs.length) { @@ -115,16 +131,18 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo const bcont = this.props.B.ContentDiv.getElementsByClassName("linkAnchorBox-cont"); const a = (acont.length ? acont[0] : this.props.A.ContentDiv).getBoundingClientRect(); const b = (bcont.length ? bcont[0] : this.props.B.ContentDiv).getBoundingClientRect(); - const apt = Utils.closestPtBetweenRectangles(a.left, a.top, a.width, a.height, - b.left, b.top, b.width, b.height, + const atop = this.visibleY(this.props.A.ContentDiv); + const btop = this.visibleY(this.props.B.ContentDiv); + const apt = Utils.closestPtBetweenRectangles(a.left, atop, a.width, a.height, + b.left, btop, b.width, b.height, a.left + a.width / 2, a.top + a.height / 2); - const bpt = Utils.closestPtBetweenRectangles(b.left, b.top, b.width, b.height, - a.left, a.top, a.width, a.height, + const bpt = Utils.closestPtBetweenRectangles(b.left, btop, b.width, b.height, + a.left, atop, a.width, a.height, apt.point.x, apt.point.y); const pt1 = [apt.point.x, apt.point.y]; const pt2 = [bpt.point.x, bpt.point.y]; - const pt1vec = [pt1[0] - (a.left + a.width / 2), pt1[1] - (a.top + a.height / 2)]; - const pt2vec = [pt2[0] - (b.left + b.width / 2), pt2[1] - (b.top + b.height / 2)]; + const pt1vec = [pt1[0] - (a.left + a.width / 2), pt1[1] - (atop + a.height / 2)]; + const pt2vec = [pt2[0] - (b.left + b.width / 2), pt2[1] - (btop + b.height / 2)]; const pt1len = Math.sqrt((pt1vec[0] * pt1vec[0]) + (pt1vec[1] * pt1vec[1])); const pt2len = Math.sqrt((pt2vec[0] * pt2vec[0]) + (pt2vec[1] * pt2vec[1])); const ptlen = Math.sqrt((pt1[0] - pt2[0]) * (pt1[0] - pt2[0]) + (pt1[1] - pt2[1]) * (pt1[1] - pt2[1])) / 2; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 86460eee1..aa334df6c 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -12,7 +12,7 @@ import { ScriptField } from "../../../../fields/ScriptField"; import { BoolCast, Cast, FieldValue, NumCast, ScriptCast, StrCast } from "../../../../fields/Types"; import { TraceMobx } from "../../../../fields/util"; import { GestureUtils } from "../../../../pen-gestures/GestureUtils"; -import { aggregateBounds, intersectRect, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils } from "../../../../Utils"; +import { aggregateBounds, intersectRect, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils, returnVal } from "../../../../Utils"; import { CognitiveServices } from "../../../cognitive_services/CognitiveServices"; import { DocServer } from "../../../DocServer"; import { Docs, DocUtils } from "../../../documents/Documents"; @@ -107,8 +107,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P @computed get fitToContent() { return (this.props.fitToBox || this.Document._fitToBox) && !this.isAnnotationOverlay; } @computed get parentScaling() { return this.props.ContentScaling && this.fitToContent && !this.isAnnotationOverlay ? this.props.ContentScaling() : 1; } @computed get contentBounds() { return aggregateBounds(this._layoutElements.filter(e => e.bounds && !e.bounds.z).map(e => e.bounds!), NumCast(this.layoutDoc._xPadding, 10), NumCast(this.layoutDoc._yPadding, 10)); } - @computed get nativeWidth() { return this.fitToContent ? 0 : NumCast(this.Document._nativeWidth, this.props.NativeWidth()); } - @computed get nativeHeight() { return this.fitToContent ? 0 : NumCast(this.Document._nativeHeight, this.props.NativeHeight()); } + @computed get nativeWidth() { return this.fitToContent ? 0 : returnVal(this.props.NativeWidth?.(), NumCast(this.Document._nativeWidth)); } + @computed get nativeHeight() { return this.fitToContent ? 0 : returnVal(this.props.NativeHeight?.(), NumCast(this.Document._nativeHeight)); } private get isAnnotationOverlay() { return this.props.isAnnotationOverlay; } private get scaleFieldKey() { return this.props.scaleField || "_viewScale"; } private get borderWidth() { return this.isAnnotationOverlay ? 0 : COLLECTION_BORDER_WIDTH; } @@ -942,8 +942,6 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P moveDocument: this.props.moveDocument, pinToPres: this.props.pinToPres, whenActiveChanged: this.props.whenActiveChanged, - NativeHeight: returnZero, - NativeWidth: returnZero, fitToBox: false, DataDoc: childData, Document: childLayout, @@ -1218,7 +1216,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P @undoBatch @action toggleNativeDimensions = () => { - Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.NativeWidth(), this.props.NativeHeight()); + Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0); } @undoBatch @@ -1411,8 +1409,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P @computed get contentScaling() { if (this.props.annotationsKey && !this.props.forceScaling) return 0; - const nw = NumCast(this.Document._nativeWidth, this.props.NativeWidth()); - const nh = NumCast(this.Document._nativeHeight, this.props.NativeHeight()); + const nw = returnVal(this.props.NativeWidth?.(), NumCast(this.Document._nativeWidth)); + const nh = returnVal(this.props.NativeHeight?.(), NumCast(this.Document._nativeHeight)); const hscale = nh ? this.props.PanelHeight() / nh : 1; const wscale = nw ? this.props.PanelWidth() / nw : 1; return wscale < hscale ? wscale : hscale; diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index d8e1bcc9c..deb7e68e8 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -76,7 +76,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque const [x, y] = this.props.getTransform().transformPoint(this._downX, this._downY); if (e.key === "?") { cm.setDefaultItem("?", (str: string) => this.props.addDocTab( - Docs.Create.WebDocument(`https://bing.com/search?q=${str}`, { _width: 200, x, y, _nativeHeight: 962, _nativeWidth: 850, isAnnotating: false, title: "bing", useCors: true }), "add:right")); + Docs.Create.WebDocument(`https://bing.com/search?q=${str}`, { _width: 400, x, y, _height: 512, _nativeWidth: 850, isAnnotating: false, title: "bing", useCors: true }), "add:right")); cm.displayMenu(this._downX, this._downY); e.stopPropagation(); diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index df4d71526..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,11 +162,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { */ getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { return <ContentFittingDocumentView - {...this.props} + {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit} Document={layout} DataDoc={layout.resolvedDataDoc as Doc} - NativeHeight={returnZero} - NativeWidth={returnZero} backgroundColor={this.props.backgroundColor} ContainingCollectionDoc={this.props.Document} PanelWidth={width} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index 0afcab5a3..0e4785d36 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -213,9 +213,10 @@ 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 <ContentFittingDocumentView Document={layout} - DataDoc={layout.resolvedDataDoc as Doc} + DataDoc={layout.resolvedDataDoc as Doc || (layoutTemp ? layout : undefined)} backgroundColor={this.props.backgroundColor} LayoutTemplate={this.props.ChildLayoutTemplate} LayoutTemplateString={this.props.ChildLayoutString} @@ -224,8 +225,6 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - NativeHeight={returnZero} - NativeWidth={returnZero} fitToBox={false} rootSelected={this.rootSelected} dropAction={StrCast(this.props.Document.childDropAction) as dropActionType} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx index 53825eece..9a4fb0627 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx @@ -224,8 +224,6 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - NativeHeight={returnZero} - NativeWidth={returnZero} fitToBox={false} rootSelected={this.rootSelected} dropAction={StrCast(this.props.Document.childDropAction) as dropActionType} |