diff options
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/views/nodes/DocumentContentsView.tsx | 7 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/ImageBox.tsx | 83 | ||||
| -rw-r--r-- | src/client/views/nodes/PDFBox.tsx | 8 | ||||
| -rw-r--r-- | src/client/views/nodes/VideoBox.tsx | 37 | ||||
| -rw-r--r-- | src/client/views/pdf/PDFViewer.tsx | 63 |
6 files changed, 95 insertions, 105 deletions
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 7aed416f4..779d25cdd 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -56,6 +56,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & { hideOnLeave?: boolean }> { @computed get layout(): string { + if (!this.layoutDoc) return "<p>awaiting layout</p>"; const layout = Cast(this.layoutDoc[this.props.layoutKey], "string"); if (layout === undefined) { return this.props.Document.data ? @@ -69,14 +70,16 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & { } get dataDoc() { - if (this.props.DataDoc === undefined && (Doc.LayoutField(this.props.Document) instanceof Doc || this.props.Document instanceof Promise)) { + if (this.props.DataDoc === undefined && typeof Doc.LayoutField(this.props.Document) !== "string") { // if there is no dataDoc (ie, we're not rendering a template layout), but this document has a layout document (not a layout string), // then we render the layout document as a template and use this document as the data context for the template layout. return this.props.Document; } return this.props.DataDoc; } - get layoutDoc() { return Doc.Layout(this.props.Document); } + get layoutDoc() { + return this.props.DataDoc === undefined ? Doc.expandTemplateLayout(Doc.Layout(this.props.Document), this.props.Document) : Doc.Layout(this.props.Document); + } CreateBindings(): JsxBindings { let list = { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 2d13eeae4..a41a37e66 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -191,7 +191,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu let preventDefault = true; if (this._doubleTap && this.props.renderDepth && (!this.onClickHandler || !this.onClickHandler.script)) { // disable double-click to show full screen for things that have an on click behavior since clicking them twice can be misinterpreted as a double click let fullScreenAlias = Doc.MakeAlias(this.props.Document); - if (StrCast(fullScreenAlias.layoutKey) !== "layoutCustom" && fullScreenAlias["layoutCustom"] !== undefined) { + if (StrCast(fullScreenAlias.layoutKey) !== "layoutCustom" && fullScreenAlias.layoutCustom !== undefined) { fullScreenAlias.layoutKey = "layoutCustom"; } this.props.addDocTab(fullScreenAlias, undefined, "inTab"); diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index dc80af268..f3ba968f5 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -39,7 +39,8 @@ library.add(faFileAudio, faAsterisk); export const pageSchema = createSchema({ curPage: "number", - fitWidth: "boolean" + fitWidth: "boolean", + rotation: "number" }); interface Window { @@ -178,18 +179,17 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum }); } - get layoutDoc() { return Doc.Layout(this.props.Document); } @undoBatch rotate = action(() => { - let nw = this.layoutDoc.nativeWidth; - let nh = this.layoutDoc.nativeHeight; - let w = this.layoutDoc.width; - let h = this.layoutDoc.height; - this.layoutDoc.rotation = (NumCast(this.layoutDoc.rotation) + 90) % 360; - this.layoutDoc.nativeWidth = nh; - this.layoutDoc.nativeHeight = nw; - this.layoutDoc.width = h; - this.layoutDoc.height = w; + let nw = this.Document.nativeWidth; + let nh = this.Document.nativeHeight; + let w = this.Document.width; + let h = this.Document.height; + this.Document.rotation = ((this.Document.rotation || 0) + 90) % 360; + this.Document.nativeWidth = nh; + this.Document.nativeHeight = nw; + this.Document.width = h; + this.Document.height = w; }); specificContextMenu = (e: React.MouseEvent): void => { @@ -251,7 +251,7 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum } dots(paths: string[]) { - let nativeWidth = NumCast(this.layoutDoc.nativeWidth, 1); + let nativeWidth = (this.Document.nativeWidth || 1); let dist = Math.min(nativeWidth / paths.length, 40); let left = (nativeWidth - paths.length * dist) / 2; return paths.map((p, i) => @@ -291,17 +291,17 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum } _curSuffix = "_m"; - resize(srcpath: string, layoutdoc: Doc) { + resize = (srcpath: string) => { requestImageSize(srcpath) .then((size: any) => { let rotation = NumCast(this.dataDoc.rotation) % 180; let realsize = rotation === 90 || rotation === 270 ? { height: size.width, width: size.height } : size; let aspect = realsize.height / realsize.width; - if (layoutdoc.width && (Math.abs(1 - NumCast(layoutdoc.height) / NumCast(layoutdoc.width) / (realsize.height / realsize.width)) > 0.1)) { + if (this.Document.width && (Math.abs(1 - NumCast(this.Document.height) / NumCast(this.Document.width) / (realsize.height / realsize.width)) > 0.1)) { setTimeout(action(() => { - layoutdoc.height = layoutdoc[WidthSym]() * aspect; - layoutdoc.nativeHeight = realsize.height; - layoutdoc.nativeWidth = realsize.width; + this.Document.height = this.Document[WidthSym]() * aspect; + this.Document.nativeHeight = realsize.height; + this.Document.nativeWidth = realsize.width; }), 0); } }) @@ -346,41 +346,24 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum // } } - @action - audioDown = () => { - this.recordAudioAnnotation(); - } + audioDown = () => this.recordAudioAnnotation(); considerGooglePhotosLink = () => { const remoteUrl = StrCast(this.props.Document.googlePhotosUrl); - if (remoteUrl) { - return ( - <img - id={"google-photos"} - src={"/assets/google_photos.png"} - style={{ opacity: this.hoverActive ? 1 : 0 }} - onClick={() => window.open(remoteUrl)} - /> - ); - } - return (null); + return !remoteUrl ? (null) : (<img + id={"google-photos"} + src={"/assets/google_photos.png"} + style={{ opacity: this.hoverActive ? 1 : 0 }} + onClick={() => window.open(remoteUrl)} + />); } considerGooglePhotosTags = () => { const tags = StrCast(this.props.Document.googlePhotosTags); - if (tags) { - return ( - <img - id={"google-tags"} - src={"/assets/google_tags.png"} - /> - ); - } - return (null); + return !tags ? (null) : (<img id={"google-tags"} src={"/assets/google_tags.png"} />); } - content(layoutDoc: Doc) { - if (!layoutDoc) return (null); + @computed get content() { console.log("REDOING IMAGE CONTENT"); // let transform = this.props.ScreenToLocalTransform().inverse(); let pw = typeof this.props.PanelWidth === "function" ? this.props.PanelWidth() : typeof this.props.PanelWidth === "number" ? (this.props.PanelWidth as any) as number : 50; @@ -388,8 +371,8 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum // let [bptX, bptY] = transform.transformPoint(pw, this.props.PanelHeight()); // let w = bptX - sptX; - let nativeWidth = NumCast(layoutDoc.nativeWidth, pw); - let nativeHeight = NumCast(layoutDoc.nativeHeight, 0); + let nativeWidth = NumCast(this.Document.nativeWidth, pw); + let nativeHeight = NumCast(this.Document.nativeHeight, 0); let paths: string[] = [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")]; // this._curSuffix = ""; // if (w > 20) { @@ -403,13 +386,13 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum paths.push(...altpaths); // } let interactive = InkingControl.Instance.selectedTool || this.props.Document.isBackground ? "" : "-interactive"; - let rotation = NumCast(layoutDoc.rotation, 0); - let aspect = (rotation % 180) ? layoutDoc[HeightSym]() / layoutDoc[WidthSym]() : 1; + let rotation = NumCast(this.Document.rotation, 0); + let aspect = (rotation % 180) ? this.Document[HeightSym]() / this.Document[WidthSym]() : 1; let shift = (rotation % 180) ? (nativeHeight - nativeWidth / aspect) / 2 : 0; - let srcpath = paths[Math.min(paths.length - 1, NumCast(layoutDoc.curPage))]; + let srcpath = paths[Math.min(paths.length - 1, NumCast(this.Document.curPage))]; let fadepath = paths[Math.min(paths.length - 1, 1)]; - (!layoutDoc.ignoreAspect && !this.props.leaveNativeSize) && this.resize(srcpath, layoutDoc); + (!this.Document.ignoreAspect && !this.props.leaveNativeSize) && this.resize(srcpath); return ( <div className={`imageBox-cont${interactive}`} style={{ background: "transparent" }} @@ -470,7 +453,7 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum renderDepth={this.props.renderDepth + 1} ContainingCollectionDoc={this.props.ContainingCollectionDoc} chromeCollapsed={true}> - {() => [this.content(this.layoutDoc)]} + {() => [this.content]} </CollectionFreeFormView> </div >); } diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index f3ea8328b..4513117b2 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -65,13 +65,11 @@ export class PDFBox extends DocAnnotatableComponent<FieldViewProps, PdfDocument> }, { fireImmediately: true }); } - get layoutDoc() { return Doc.Layout(this.props.Document); } - loaded = (nw: number, nh: number, np: number) => { this.dataDoc.numPages = np; - this.layoutDoc.nativeWidth = nw * 96 / 72; - this.layoutDoc.nativeHeight = nh * 96 / 72; - !this.layoutDoc.fitWidth && !this.layoutDoc.ignoreAspect && (this.layoutDoc.height = this.layoutDoc[WidthSym]() * (nh / nw)); + this.Document.nativeWidth = nw * 96 / 72; + this.Document.nativeHeight = nh * 96 / 72; + !this.Document.fitWidth && !this.Document.ignoreAspect && (this.Document.height = this.Document[WidthSym]() * (nh / nw)); } public search(string: string, fwd: boolean) { this._pdfViewer && this._pdfViewer.search(string, fwd); } diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 4c01279ae..24f6cca9d 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -55,15 +55,14 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum return this._videoRef; } - get layoutDoc() { return Doc.Layout(this.props.Document); } videoLoad = () => { let aspect = this.player!.videoWidth / this.player!.videoHeight; - var nativeWidth = NumCast(this.layoutDoc.nativeWidth, 0); - var nativeHeight = NumCast(this.layoutDoc.nativeHeight, 0); + var nativeWidth = (this.Document.nativeWidth || 0); + var nativeHeight = (this.Document.nativeHeight || 0); if (!nativeWidth || !nativeHeight) { - if (!this.layoutDoc.nativeWidth) this.layoutDoc.nativeWidth = this.player!.videoWidth; - this.layoutDoc.nativeHeight = NumCast(this.layoutDoc.nativeWidth) / aspect; - this.layoutDoc.height = NumCast(this.layoutDoc.width, 0) / aspect; + if (!this.Document.nativeWidth) this.Document.nativeWidth = this.player!.videoWidth; + this.Document.nativeHeight = (this.Document.nativeWidth || 0) / aspect; + this.Document.height = (this.Document.width || 0) / aspect; } if (!this.Document.duration) this.Document.duration = this.player!.duration; } @@ -108,7 +107,7 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum let height = this.Document.height || 0; var canvas = document.createElement('canvas'); canvas.width = 640; - canvas.height = 640 * NumCast (this.layoutDoc.nativeHeight) / NumCast(this.layoutDoc.nativeWidth,1); + canvas.height = 640 * (this.Document.nativeHeight || 0) / (this.Document.nativeWidth || 1); var ctx = canvas.getContext('2d');//draw image to canvas. scale to target dimensions if (ctx) { ctx.rect(0, 0, canvas.width, canvas.height); @@ -154,12 +153,12 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum if (this.youtubeVideoId) { let youtubeaspect = 400 / 315; - var nativeWidth = NumCast(this.layoutDoc.nativeWidth); - var nativeHeight = NumCast(this.layoutDoc.nativeHeight); + var nativeWidth = (this.Document.nativeWidth || 0); + var nativeHeight = (this.Document.nativeHeight || 0); if (!nativeWidth || !nativeHeight) { - if (!this.layoutDoc.nativeWidth) this.layoutDoc.nativeWidth = 600; - this.layoutDoc.nativeHeight = NumCast(this.layoutDoc.nativeWidth) / youtubeaspect; - this.layoutDoc.height = NumCast(this.layoutDoc.width) / youtubeaspect; + if (!this.Document.nativeWidth) this.Document.nativeWidth = 600; + this.Document.nativeHeight = (this.Document.nativeWidth || 0) / youtubeaspect; + this.Document.height = (this.Document.width || 0) / youtubeaspect; } } } @@ -265,7 +264,7 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum } private get uIButtons() { let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().Scale); - let curTime = NumCast(this.layoutDoc.currentTimecode); + let curTime = (this.Document.currentTimecode || 0); return ([<div className="videoBox-time" key="time" onPointerDown={this.onResetDown} style={{ transform: `scale(${scaling})` }}> <span>{"" + Math.round(curTime)}</span> <span style={{ fontSize: 8 }}>{" " + Math.round((curTime - Math.trunc(curTime)) * 100)}</span> @@ -313,7 +312,7 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum @action onResetMove = (e: PointerEvent) => { this._isResetClick += Math.abs(e.movementX) + Math.abs(e.movementY); - this.Seek(Math.max(0, NumCast(this.layoutDoc.currentTimecode, 0) + Math.sign(e.movementX) * 0.0333)); + this.Seek(Math.max(0, (this.Document.currentTimecode || 0) + Math.sign(e.movementX) * 0.0333)); e.stopImmediatePropagation(); } @action @@ -321,10 +320,10 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum document.removeEventListener("pointermove", this.onResetMove, true); document.removeEventListener("pointerup", this.onResetUp, true); InkingControl.Instance.switchTool(InkTool.None); - this._isResetClick < 10 && (this.layoutDoc.currentTimecode = 0); + this._isResetClick < 10 && (this.Document.currentTimecode = 0); } @computed get fieldExtensionDoc() { return Doc.fieldExtensionDoc(this.dataDoc, this.props.fieldKey); } - @computed get dataDoc() { return this.props.DataDoc && this.layoutDoc.isTemplateField ? this.props.DataDoc : Doc.GetProto(this.props.Document); } + @computed get dataDoc() { return this.props.DataDoc && this.Document.isTemplateField ? this.props.DataDoc : Doc.GetProto(this.props.Document); } @computed get youtubeContent() { this._youtubeIframeId = VideoBox._youtubeIframeCounter++; @@ -332,20 +331,20 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum let style = "videoBox-content-YouTube" + (this._fullScreen ? "-fullScreen" : ""); let start = untracked(() => Math.round(this.Document.currentTimecode || 0)); return <iframe key={this._youtubeIframeId} id={`${this.youtubeVideoId + this._youtubeIframeId}-player`} - onLoad={this.youtubeIframeLoaded} className={`${style}`} width={NumCast(this.layoutDoc.nativeWidth, 640)} height={NumCast(this.layoutDoc.nativeHeigh, 390)} + onLoad={this.youtubeIframeLoaded} className={`${style}`} width={(this.Document.nativeWidth || 640)} height={(this.Document.nativeHeight || 390)} src={`https://www.youtube.com/embed/${this.youtubeVideoId}?enablejsapi=1&rel=0&showinfo=1&autoplay=1&mute=1&start=${start}&modestbranding=1&controls=${VideoBox._showControls ? 1 : 0}`} />; } @action.bound addDocumentWithTimestamp(doc: Doc): boolean { Doc.GetProto(doc).annotationOn = this.props.Document; - var curTime = NumCast(this.layoutDoc.currentTimecode, -1); + var curTime = (this.Document.currentTimecode || -1); curTime !== -1 && (doc.displayTimecode = curTime); return Doc.AddDocToList(this.fieldExtensionDoc, this.props.fieldExt, doc); } render() { - Doc.UpdateDocumentExtensionForField(this.dataDoc, this.props.fieldKey); + if (!Doc.UpdateDocumentExtensionForField(this.dataDoc, this.props.fieldKey)) return (null); return (<div className={"videoBox-container"} onContextMenu={this.specificContextMenu}> <CollectionFreeFormView {...this.props} PanelHeight={this.props.PanelHeight} diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 51f7829e8..72a08f35c 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -6,7 +6,7 @@ import { Dictionary } from "typescript-collections"; import { Doc, DocListCast, FieldResult, WidthSym, Opt, HeightSym } from "../../../new_fields/Doc"; import { Id } from "../../../new_fields/FieldSymbols"; import { List } from "../../../new_fields/List"; -import { makeInterface } from "../../../new_fields/Schema"; +import { makeInterface, createSchema } from "../../../new_fields/Schema"; import { ScriptField } from "../../../new_fields/ScriptField"; import { Cast, NumCast, StrCast } from "../../../new_fields/Types"; import { smoothScroll, Utils, emptyFunction, returnOne, intersectRect, addStyleSheet, addStyleSheetRule, clearStyleSheetRules } from "../../../Utils"; @@ -29,9 +29,18 @@ import { DocumentType } from "../../documents/DocumentTypes"; const PDFJSViewer = require("pdfjs-dist/web/pdf_viewer"); const pdfjsLib = require("pdfjs-dist"); +export const pageSchema = createSchema({ + curPage: "number", + fitWidth: "boolean", + rotation: "number", + scrollY: "number", + scrollHeight: "number", + search_string: "string" +}); + pdfjsLib.GlobalWorkerOptions.workerSrc = `/assets/pdf.worker.js`; -type PdfDocument = makeInterface<[typeof documentSchema]>; -const PdfDocument = makeInterface(documentSchema); +type PdfDocument = makeInterface<[typeof documentSchema, typeof pageSchema]>; +const PdfDocument = makeInterface(documentSchema, pageSchema); interface IViewerProps { pdf: Pdfjs.PDFDocumentProxy; @@ -113,10 +122,10 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument componentDidMount = async () => { // change the address to be the file address of the PNG version of each page // file address of the pdf - this._coverPath = JSON.parse(await rp.get(Utils.prepend(`/thumbnail${this.props.url.substring("files/".length, this.props.url.length - ".pdf".length)}-${NumCast(this.layoutDoc.curPage, 1)}.PNG`))); + this._coverPath = JSON.parse(await rp.get(Utils.prepend(`/thumbnail${this.props.url.substring("files/".length, this.props.url.length - ".pdf".length)}-${(this.Document.curPage || 1)}.PNG`))); runInAction(() => this._showWaiting = this._showCover = true); this.props.startupLive && this.setupPdfJsViewer(); - this._searchReactionDisposer = reaction(() => StrCast(this.props.Document.search_string), searchString => { + this._searchReactionDisposer = reaction(() => this.Document.search_string, searchString => { if (searchString) { this.search(searchString, true); this._lastSearch = searchString; @@ -131,14 +140,14 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument () => (SelectionManager.SelectedDocuments().length === 1) && this.setupPdfJsViewer(), { fireImmediately: true }); this._reactionDisposer = reaction( - () => this.layoutDoc.scrollY, + () => this.Document.scrollY, (scrollY) => { if (scrollY !== undefined) { if (this._showCover || this._showWaiting) { this.setupPdfJsViewer(); } - this._mainCont.current && smoothScroll(1000, this._mainCont.current, NumCast(this.layoutDoc.scrollY) || 0); - this.layoutDoc.scrollY = undefined; + this._mainCont.current && smoothScroll(1000, this._mainCont.current, (this.Document.scrollY || 0)); + this.Document.scrollY = undefined; } }, { fireImmediately: true } @@ -179,7 +188,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument i === this.props.pdf.numPages - 1 && this.props.loaded((page.view[page.rotate === 0 || page.rotate === 180 ? 2 : 3] - page.view[page.rotate === 0 || page.rotate === 180 ? 0 : 1]), (page.view[page.rotate === 0 || page.rotate === 180 ? 3 : 2] - page.view[page.rotate === 0 || page.rotate === 180 ? 1 : 0]), i); })))); - this.layoutDoc.scrollHeight = this._pageSizes.reduce((size, page) => size + page.height, 0) * 96 / 72; + this.Document.scrollHeight = this._pageSizes.reduce((size, page) => size + page.height, 0) * 96 / 72; } } @@ -197,7 +206,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument { fireImmediately: true }); this._filterReactionDisposer = reaction( - () => ({ scriptField: Cast(this.layoutDoc.filterScript, ScriptField), annos: this._annotations.slice() }), + () => ({ scriptField: Cast(this.Document.filterScript, ScriptField), annos: this._annotations.slice() }), action(({ scriptField, annos }: { scriptField: FieldResult<ScriptField>, annos: Doc[] }) => { let oldScript = this._script.originalScript; this._script = scriptField && scriptField.script.compiled ? scriptField.script : CompileScript("return true") as CompiledScript; @@ -224,7 +233,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument document.addEventListener("copy", this.copy); document.addEventListener("pagesinit", action(() => { this._pdfViewer.currentScaleValue = this._zoomed = 1; - this.gotoPage(NumCast(this.layoutDoc.curPage, 1)); + this.gotoPage(this.Document.curPage || 1); })); document.addEventListener("pagerendered", action(() => this._showCover = this._showWaiting = false)); var pdfLinkService = new PDFJSViewer.PDFLinkService(); @@ -254,7 +263,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument let minY = Number.MAX_VALUE; if ((this._savedAnnotations.values()[0][0] as any).marqueeing) { let anno = this._savedAnnotations.values()[0][0]; - let annoDoc = Docs.Create.FreeformDocument([], { backgroundColor: color, title: "Annotation on " + StrCast(this.props.Document.title) }); + let annoDoc = Docs.Create.FreeformDocument([], { backgroundColor: color, title: "Annotation on " + this.Document.title }); if (anno.style.left) annoDoc.x = parseInt(anno.style.left); if (anno.style.top) annoDoc.y = parseInt(anno.style.top); if (anno.style.height) annoDoc.height = parseInt(anno.style.height); @@ -287,7 +296,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument mainAnnoDocProto.type = DocumentType.PDFANNO; mainAnnoDocProto.annotations = new List<Doc>(annoDocs); } - mainAnnoDocProto.title = "Annotation on " + StrCast(this.props.Document.title); + mainAnnoDocProto.title = "Annotation on " + this.Document.title; mainAnnoDocProto.annotationOn = this.props.Document; this._savedAnnotations.clear(); this.Index = -1; @@ -335,7 +344,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument @action onScroll = (e: React.UIEvent<HTMLElement>) => { this._scrollTop = this._mainCont.current!.scrollTop; - this._pdfViewer && (this.layoutDoc.curPage = this._pdfViewer.currentPageNumber); + this._pdfViewer && (this.Document.curPage = this._pdfViewer.currentPageNumber); } // get the page index that the vertical offset passed in is on @@ -403,7 +412,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument this._downX = e.clientX; this._downY = e.clientY; addStyleSheetRule(PDFViewer._annotationStyle, "pdfAnnotation", { "pointer-events": "none" }); - if (NumCast(this.layoutDoc.scale, 1) !== 1) return; + if ((this.Document.scale || 1) !== 1) return; if ((e.button !== 0 || e.altKey) && this.active()) { this._setPreviewCursor && this._setPreviewCursor(e.clientX, e.clientY, true); } @@ -560,7 +569,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument DragManager.StartAnnotationDrag([ele], dragData, e.pageX, e.pageY, { handlers: { dragComplete: () => !(dragData as any).linkedToDoc && - DocUtils.MakeLink({ doc: annotationDoc }, { doc: dragData.dropDocument, ctx: dragData.targetContext }, `Annotation from ${StrCast(this.props.Document.title)}`, "link from PDF") + DocUtils.MakeLink({ doc: annotationDoc }, { doc: dragData.dropDocument, ctx: dragData.targetContext }, `Annotation from ${this.Document.title}`, "link from PDF") }, hideSource: false @@ -568,18 +577,16 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument } } - get layoutDoc() { return Doc.Layout(this.props.Document); } - createSnippet = (marquee: { left: number, top: number, width: number, height: number }): void => { let view = Doc.MakeAlias(this.props.Document); let data = Doc.MakeDelegate(Doc.GetProto(this.props.Document)); data.title = StrCast(data.title) + "_snippet"; view.proto = data; view.nativeHeight = marquee.height; - view.height = (this.layoutDoc[WidthSym]() / NumCast(this.layoutDoc.nativeWidth)) * marquee.height; - view.nativeWidth = this.layoutDoc.nativeWidth; + view.height = (this.Document[WidthSym]() / (this.Document.nativeWidth || 1)) * marquee.height; + view.nativeWidth = this.Document.nativeWidth; view.startY = marquee.top; - view.width = this.layoutDoc[WidthSym](); + view.width = this.Document[WidthSym](); DragManager.StartDocumentDrag([], new DragManager.DocumentDragData([view]), 0, 0); } @@ -600,12 +607,12 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument getCoverImage = () => { if (!this.props.Document[HeightSym]() || !this.props.Document.nativeHeight) { setTimeout((() => { - this.layoutDoc.height = this.layoutDoc[WidthSym]() * this._coverPath.height / this._coverPath.width; - this.layoutDoc.nativeHeight = nativeWidth * this._coverPath.height / this._coverPath.width; + this.Document.height = this.Document[WidthSym]() * this._coverPath.height / this._coverPath.width; + this.Document.nativeHeight = nativeWidth * this._coverPath.height / this._coverPath.width; }).bind(this), 0); } - let nativeWidth = NumCast(this.layoutDoc.nativeWidth); - let nativeHeight = NumCast(this.layoutDoc.nativeHeight); + let nativeWidth = (this.Document.nativeWidth || 0); + let nativeHeight = (this.Document.nativeHeight || 0); return <img key={this._coverPath.path} src={this._coverPath.path} onError={action(() => this._coverPath.path = "http://www.cs.brown.edu/~bcz/face.gif")} onLoad={action(() => this._showWaiting = false)} style={{ position: "absolute", display: "inline-block", top: 0, left: 0, width: `${nativeWidth}px`, height: `${nativeHeight}px` }} />; } @@ -621,14 +628,14 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument } @computed get annotationLayer() { - return <div className="pdfViewer-annotationLayer" style={{ height: NumCast(this.layoutDoc.nativeHeight) }} ref={this._annotationLayer}> + return <div className="pdfViewer-annotationLayer" style={{ height: (this.Document.nativeHeight || 0) }} ref={this._annotationLayer}> {this.nonDocAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map((anno, index) => <Annotation {...this.props} focus={this.props.focus} anno={anno} key={`${anno[Id]}-annotation`} />)} <div className="pdfViewer-overlay" id="overlay" style={{ transform: `scale(${this._zoomed})` }}> <CollectionFreeFormView {...this.props} setPreviewCursor={this.setPreviewCursor} - PanelHeight={() => NumCast(this.layoutDoc.scrollHeight, NumCast(this.layoutDoc.nativeHeight))} - PanelWidth={() => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : NumCast(this.layoutDoc.nativeWidth)} + PanelHeight={() => (this.Document.scrollHeight || this.Document.nativeHeight || 0)} + PanelWidth={() => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : (this.Document.nativeWidth || 0)} VisibleHeight={this.visibleHeight} focus={this.props.focus} isSelected={this.props.isSelected} |