From d5e086e4c161e7d445f6d69faca8ffc7391ed3dd Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 9 Sep 2020 04:04:58 -0400 Subject: fixed doc decorations on selected treeview items to not overlap as much. fixed contentFitting's screentToLocalXf which wasn't wroking for nested tempaltes with native dimensions --- src/client/views/DocumentDecorations.tsx | 4 ++-- src/client/views/collections/CollectionSubView.tsx | 17 +++++++++++------ .../views/collections/CollectionTreeView.scss | 1 + src/client/views/collections/CollectionTreeView.tsx | 4 ++-- .../collections/collectionFreeForm/MarqueeView.tsx | 2 +- .../views/nodes/ContentFittingDocumentView.scss | 2 ++ .../views/nodes/ContentFittingDocumentView.tsx | 21 +++++++++++---------- src/client/views/nodes/ImageBox.tsx | 4 ++-- src/client/views/nodes/WebBox.tsx | 8 +++++++- 9 files changed, 39 insertions(+), 24 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index e5c6f0aa9..abad53b6d 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -647,8 +647,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> top: bounds.y - this._resizeBorderWidth / 2 - this._titleHeight, }}> {closeIcon} - {titleArea} - {SelectionManager.SelectedDocuments().length !== 1 || seldoc.Document.type === DocumentType.INK || minimal ? (null) : + {Object.keys(SelectionManager.SelectedDocuments()[0].props).includes("treeViewDoc") ? (null) : titleArea} + {SelectionManager.SelectedDocuments().length !== 1 || seldoc.Document.type === DocumentType.INK || minimal || Object.keys(SelectionManager.SelectedDocuments()[0].props).includes("treeViewDoc") ? (null) : {`${seldoc.finalLayoutKey.includes("icon") ? "De" : ""}Iconify Document`}} placement="top">
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 81f3ddad2..aff7e8000 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -270,6 +270,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: return; } + console.log("Html = ", html); if (html) { if (FormattedTextBox.IsFragment(html)) { const href = FormattedTextBox.GetHref(html); @@ -353,14 +354,15 @@ export function CollectionSubView(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; @@ -381,27 +383,30 @@ export function CollectionSubView(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 b0a791a21..e192f1760 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -109,6 +109,7 @@ .treeViewItem-border { 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 7b3e95404..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 { const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth; return
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/nodes/ContentFittingDocumentView.scss b/src/client/views/nodes/ContentFittingDocumentView.scss index 50562951a..679073d44 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.scss +++ b/src/client/views/nodes/ContentFittingDocumentView.scss @@ -3,6 +3,8 @@ .contentFittingDocumentView { position: relative; display: flex; + width: 100%; + height: 100%; .contentFittingDocumentView-previewDoc { position: relative; diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx index c0bcc0a6d..7cb27451f 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.tsx +++ b/src/client/views/nodes/ContentFittingDocumentView.tsx @@ -6,7 +6,7 @@ import { Doc, HeightSym, Opt, WidthSym } from "../../../fields/Doc"; import { ScriptField } from "../../../fields/ScriptField"; import { Cast, NumCast, StrCast } from "../../../fields/Types"; import { TraceMobx } from "../../../fields/util"; -import { emptyFunction, returnVal } from "../../../Utils"; +import { emptyFunction, returnVal, OmitKeys } from "../../../Utils"; import { dropActionType } from "../../util/DragManager"; import { CollectionView } from "../collections/CollectionView"; import { DocumentView, DocumentViewProps } from "../nodes/DocumentView"; @@ -34,8 +34,9 @@ export class ContentFittingDocumentView extends React.Component this.props.PanelHeight()) { - return (this.props.PanelHeight() / this.nativeHeight()) || 1; + return hscale || 1; } return wscale || 1; } @@ -47,7 +48,10 @@ export class ContentFittingDocumentView extends React.Component this.props.dontCenter ? this.props.ScreenToLocalTransform().scale(1 / this.contentScaling()) : this.props.ScreenToLocalTransform().translate(-this.centeringOffset, -this.centeringYOffset).scale(1 / this.contentScaling()); + @computed get childXf() { return this.props.DataDoc ? 1 : 1 / this.contentScaling(); } + private getTransform = () => this.props.dontCenter ? + this.props.ScreenToLocalTransform().scale(this.childXf) : + this.props.ScreenToLocalTransform().translate(-this.centeringOffset, -this.centeringYOffset).scale(this.childXf); private get centeringOffset() { return this.nativeWidth() && !this.props.Document._fitWidth ? (this.props.PanelWidth() - this.nativeWidth() * this.contentScaling()) / 2 : 0; } private get centeringYOffset() { return Math.abs(this.centeringOffset) < 0.001 ? (this.props.PanelHeight() - this.nativeHeight() * this.contentScaling()) / 2 : 0; } @@ -55,10 +59,7 @@ export class ContentFittingDocumentView extends React.Component 0.001 ? "auto" : this.props.PanelWidth(), - height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight(), - }}> + return (
{!this.props.Document || !this.props.PanelWidth ? (null) : (
0.001 ? `${100 * this.nativeHeight() / this.nativeWidth() * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(), width: Math.abs(this.centeringOffset) > 0.001 ? `${100 * (this.props.PanelWidth() - this.centeringOffset * 2) / this.props.PanelWidth()}%` : this.props.PanelWidth() }}> - - (); private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean) => void); + constructor(props: any) { + super(props); + this.dataDoc[this.fieldKey + "-nativeWidth"] = this.Document._nativeWidth = NumCast(this.dataDoc[this.props.fieldKey + "-nativeWidth"], NumCast(this.Document._nativeWidth, 850)); + this.dataDoc[this.fieldKey + "-nativeHeight"] = this.Document._nativeHeight = NumCast(this.dataDoc[this.props.fieldKey + "-nativeHeight"], NumCast(this.Document._nativeHeight, this.Document[HeightSym]() / this.Document[WidthSym]() * 850)); + } + iframeLoaded = action((e: any) => { const iframe = this._iframeRef.current; if (iframe && iframe.contentDocument) { -- cgit v1.2.3-70-g09d2