From eead07720f1f196e9ee81cd44b26759dc44e04f9 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 12 Dec 2019 21:00:36 -0500 Subject: fixed warnings. Limited the size of pasted text boxes --- src/client/documents/Documents.ts | 1 + src/client/util/DragManager.ts | 14 ++++++------- src/client/views/DocumentButtonBar.tsx | 2 +- src/client/views/PreviewCursor.tsx | 32 +++++++++++------------------ src/client/views/ScriptBox.tsx | 2 +- src/client/views/linking/LinkMenuGroup.tsx | 2 +- src/client/views/nodes/FormattedTextBox.tsx | 11 +++++++--- 7 files changed, 30 insertions(+), 34 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 5d5bdfcbd..7df08c7e6 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -112,6 +112,7 @@ export interface DocumentOptions { dropConverter?: ScriptField; // script to run when documents are dropped on this Document. strokeWidth?: number; color?: string; + limitHeight?:number; // maximum height for newly created (eg, from pasting) text documents // [key: string]: Opt; } diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 95529311a..326262895 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -101,10 +101,10 @@ export namespace DragManager { export class DragCompleteEvent { constructor(aborted: boolean, dragData: { [id: string]: any }) { this.aborted = aborted; - this.docDragData = dragData instanceof DocumentDragData ? dragData as DocumentDragData : undefined; - this.annoDragData = dragData instanceof PdfAnnoDragData ? dragData as PdfAnnoDragData : undefined; - this.linkDragData = dragData instanceof LinkDragData ? dragData as LinkDragData : undefined; - this.columnDragData = dragData instanceof ColumnDragData ? dragData as ColumnDragData : undefined; + this.docDragData = dragData instanceof DocumentDragData ? dragData : undefined; + this.annoDragData = dragData instanceof PdfAnnoDragData ? dragData : undefined; + this.linkDragData = dragData instanceof LinkDragData ? dragData : undefined; + this.columnDragData = dragData instanceof ColumnDragData ? dragData : undefined; } aborted: boolean; docDragData?: DocumentDragData; @@ -140,14 +140,12 @@ export namespace DragManager { linkSourceDocument: Doc; dontClearTextBox?: boolean; linkDocument?: Doc; - [id: string]: any; } export class ColumnDragData { constructor(colKey: SchemaHeaderField) { this.colKey = colKey; } colKey: SchemaHeaderField; - [id: string]: any; } // used by PDFs to conditionally (if the drop completes) create a text annotation when dragging from the PDF toolbar when a text region has been selected. // this is pretty clunky and should be rethought out using linkDrag or DocumentDrag @@ -216,7 +214,7 @@ export namespace DragManager { // drag links and drop link targets (aliasing them if needed) export async function StartLinkTargetsDrag(dragEle: HTMLElement, downX: number, downY: number, sourceDoc: Doc, specificLinks?: Doc[]) { - let draggedDocs = (specificLinks ? specificLinks : DocListCast(sourceDoc.links)).map(link => LinkManager.Instance.getOppositeAnchor(link, sourceDoc)).filter(l => l) as Doc[]; + const draggedDocs = (specificLinks ? specificLinks : DocListCast(sourceDoc.links)).map(link => LinkManager.Instance.getOppositeAnchor(link, sourceDoc)).filter(l => l) as Doc[]; if (draggedDocs.length) { const moddrag: Doc[] = []; @@ -225,7 +223,7 @@ export namespace DragManager { if (doc) moddrag.push(doc); } - let dragData = new DragManager.DocumentDragData(moddrag.length ? moddrag : draggedDocs); + const dragData = new DragManager.DocumentDragData(moddrag.length ? moddrag : draggedDocs); dragData.moveDocument = (doc: Doc, targetCollection: Doc | undefined, addDocument: (doc: Doc) => boolean): boolean => { const document = SelectionManager.SelectedDocuments()[0]; document && document.props.removeDocument && document.props.removeDocument(doc); diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index f014c1329..58728ab7f 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -114,7 +114,7 @@ export class DocumentButtonBar extends React.Component<{ views: DocumentView[], const proto = Doc.GetProto(linkDoc); proto.sourceContext = this.props.views[0].props.ContainingCollectionDoc; - const anchor2Title = linkDoc.anchor2 instanceof Doc ? StrCast((linkDoc.anchor2 as Doc).title) : "-untitled-"; + const anchor2Title = linkDoc.anchor2 instanceof Doc ? StrCast(linkDoc.anchor2.title) : "-untitled-"; const text = FormattedTextBox.ToolTipTextMenu.makeLink(linkDoc, anchor2Title, e.ctrlKey ? "onRight" : "inTab"); if (linkDoc.anchor2 instanceof Doc) { proto.title = text === "" ? proto.title : text + " to " + linkDoc.anchor2.title; // TODO open to more descriptive descriptions of following in text link diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index fd0287b6c..8adcf1220 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import "./PreviewCursor.scss"; import { Docs } from '../documents/Documents'; // import { Transform } from 'prosemirror-transform'; -import { Doc } from '../../new_fields/Doc'; +import { Doc, HeightSym } from '../../new_fields/Doc'; import { Transform } from "../util/Transform"; import { TraceMobx } from '../../new_fields/util'; @@ -27,61 +27,53 @@ export class PreviewCursor extends React.Component<{}> { if (PreviewCursor.Visible) { if (e.clipboardData) { const newPoint = PreviewCursor._getTransform().transformPoint(PreviewCursor._clickPoint[0], PreviewCursor._clickPoint[1]); - runInAction(() => { PreviewCursor.Visible = false; }); - + runInAction(() => PreviewCursor.Visible = false); if (e.clipboardData.getData("text/plain") !== "") { // tests for youtube and makes video document if (e.clipboardData.getData("text/plain").indexOf("www.youtube.com/watch") !== -1) { const url = e.clipboardData.getData("text/plain").replace("youtube.com/watch?v=", "youtube.com/embed/"); - PreviewCursor._addDocument(Docs.Create.VideoDocument(url, { + return PreviewCursor._addDocument(Docs.Create.VideoDocument(url, { title: url, width: 400, height: 315, nativeWidth: 600, nativeHeight: 472.5, x: newPoint[0], y: newPoint[1] })); - return; } // tests for URL and makes web document const re: any = /^https?:\/\//g; if (re.test(e.clipboardData.getData("text/plain"))) { const url = e.clipboardData.getData("text/plain"); - PreviewCursor._addDocument(Docs.Create.WebDocument(url, { - title: url, width: 300, height: 300, + return PreviewCursor._addDocument(Docs.Create.WebDocument(url, { + title: url, width: 500, height: 300, // nativeWidth: 300, nativeHeight: 472.5, x: newPoint[0], y: newPoint[1] })); - return; } // creates text document - const newBox = Docs.Create.TextDocument({ - width: 200, height: 100, + return PreviewCursor._addLiveTextDoc(Docs.Create.TextDocument({ + width: 500, + autoHeight: true, x: newPoint[0], y: newPoint[1], + limitHeight: 400, title: "-pasted text-" - }); - - newBox.proto!.autoHeight = true; - PreviewCursor._addLiveTextDoc(newBox); - return; + })); } //pasting in images if (e.clipboardData.getData("text/html") !== "" && e.clipboardData.getData("text/html").includes(" { return; } - var div = document.createElement("div"); + const div = document.createElement("div"); div.style.width = "90"; div.style.height = "20"; div.style.background = "gray"; diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx index da56435f2..abd17ec4d 100644 --- a/src/client/views/linking/LinkMenuGroup.tsx +++ b/src/client/views/linking/LinkMenuGroup.tsx @@ -46,7 +46,7 @@ export class LinkMenuGroup extends React.Component { document.removeEventListener("pointermove", this.onLinkButtonMoved); document.removeEventListener("pointerup", this.onLinkButtonUp); - let targets = this.props.group.map(l => LinkManager.Instance.getOppositeAnchor(l, this.props.sourceDoc)).filter(d => d) as Doc[]; + const targets = this.props.group.map(l => LinkManager.Instance.getOppositeAnchor(l, this.props.sourceDoc)).filter(d => d) as Doc[]; DragManager.StartLinkTargetsDrag(this._drag.current!, e.x, e.y, this.props.sourceDoc, targets); } e.stopPropagation(); diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index af09e57f4..a298fd6af 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -630,7 +630,7 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps & { fireImmediately: true } ); - setTimeout(() => this.tryUpdateHeight(), 0); + setTimeout(() => this.tryUpdateHeight(NumCast(this.layoutDoc.limitHeight, 0))); } pushToGoogleDoc = async () => { @@ -1087,10 +1087,15 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps & } @action - tryUpdateHeight() { - const scrollHeight = this._ref.current?.scrollHeight; + tryUpdateHeight(limitHeight?: number) { + let scrollHeight = this._ref.current?.scrollHeight; if (!this.layoutDoc.animateToPos && this.layoutDoc.autoHeight && scrollHeight && getComputedStyle(this._ref.current!.parentElement!).top === "0px") { // if top === 0, then the text box is growing upward (as the overlay caption) which doesn't contribute to the height computation + if (limitHeight && scrollHeight > limitHeight) { + scrollHeight = limitHeight; + this.layoutDoc.limitHeight = undefined; + this.layoutDoc.autoHeight = false; + } const nh = this.Document.isTemplateField ? 0 : NumCast(this.dataDoc.nativeHeight, 0); const dh = NumCast(this.layoutDoc.height, 0); const newHeight = Math.max(10, (nh ? dh / nh * scrollHeight : scrollHeight) + (this.props.ChromeHeight ? this.props.ChromeHeight() : 0)); -- cgit v1.2.3-70-g09d2 From e488f3b2ab8e664852697619a55a2f279488f456 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 12 Dec 2019 21:08:28 -0500 Subject: from last --- src/client/views/PreviewCursor.tsx | 90 ++++++++++++++++++-------------------- 1 file changed, 43 insertions(+), 47 deletions(-) (limited to 'src') diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index 8adcf1220..208bc2b70 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -1,11 +1,10 @@ -import { action, observable, runInAction, trace } from 'mobx'; +import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; import "normalize.css"; import * as React from 'react'; import "./PreviewCursor.scss"; import { Docs } from '../documents/Documents'; -// import { Transform } from 'prosemirror-transform'; -import { Doc, HeightSym } from '../../new_fields/Doc'; +import { Doc } from '../../new_fields/Doc'; import { Transform } from "../util/Transform"; import { TraceMobx } from '../../new_fields/util'; @@ -24,56 +23,53 @@ export class PreviewCursor extends React.Component<{}> { } paste = (e: ClipboardEvent) => { - if (PreviewCursor.Visible) { - if (e.clipboardData) { - const newPoint = PreviewCursor._getTransform().transformPoint(PreviewCursor._clickPoint[0], PreviewCursor._clickPoint[1]); - runInAction(() => PreviewCursor.Visible = false); + if (PreviewCursor.Visible && e.clipboardData) { + const newPoint = PreviewCursor._getTransform().transformPoint(PreviewCursor._clickPoint[0], PreviewCursor._clickPoint[1]); + PreviewCursor.Visible = false; - if (e.clipboardData.getData("text/plain") !== "") { - - // tests for youtube and makes video document - if (e.clipboardData.getData("text/plain").indexOf("www.youtube.com/watch") !== -1) { - const url = e.clipboardData.getData("text/plain").replace("youtube.com/watch?v=", "youtube.com/embed/"); - return PreviewCursor._addDocument(Docs.Create.VideoDocument(url, { - title: url, width: 400, height: 315, - nativeWidth: 600, nativeHeight: 472.5, - x: newPoint[0], y: newPoint[1] - })); - } - - // tests for URL and makes web document - const re: any = /^https?:\/\//g; - if (re.test(e.clipboardData.getData("text/plain"))) { - const url = e.clipboardData.getData("text/plain"); - return PreviewCursor._addDocument(Docs.Create.WebDocument(url, { - title: url, width: 500, height: 300, - // nativeWidth: 300, nativeHeight: 472.5, - x: newPoint[0], y: newPoint[1] - })); - } - - // creates text document - return PreviewCursor._addLiveTextDoc(Docs.Create.TextDocument({ - width: 500, - autoHeight: true, - x: newPoint[0], - y: newPoint[1], - limitHeight: 400, - title: "-pasted text-" + if (e.clipboardData.getData("text/plain") !== "") { + // tests for youtube and makes video document + if (e.clipboardData.getData("text/plain").indexOf("www.youtube.com/watch") !== -1) { + const url = e.clipboardData.getData("text/plain").replace("youtube.com/watch?v=", "youtube.com/embed/"); + return PreviewCursor._addDocument(Docs.Create.VideoDocument(url, { + title: url, width: 400, height: 315, + nativeWidth: 600, nativeHeight: 472.5, + x: newPoint[0], y: newPoint[1] })); } - //pasting in images - if (e.clipboardData.getData("text/html") !== "" && e.clipboardData.getData("text/html").includes("