From d3ed10ff3ff9f2e7dec577d81a98318c941c9bdc Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 21 May 2019 22:49:23 -0400 Subject: fixed problems with link drawing to doc centers, and wraparound panning caused by zoomBasis --- .../collections/collectionFreeForm/CollectionFreeFormLinkView.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index 63d2f7642..f646c7bde 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -40,10 +40,10 @@ export class CollectionFreeFormLinkView extends React.Component Date: Thu, 23 May 2019 03:53:00 -0400 Subject: Made link lines bigger --- .../collections/collectionFreeForm/CollectionFreeFormLinkView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index f646c7bde..d6097b9a3 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -47,11 +47,11 @@ export class CollectionFreeFormLinkView extends React.Component + cx={(x1 + x2) / 2} cy={(y1 + y2) / 2} r={8} onPointerDown={this.onPointerDown} /> ); } -- cgit v1.2.3-70-g09d2 From 01d172a91d9a140129d2dd938c3289d7a0d25f16 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 24 May 2019 14:10:32 -0400 Subject: cleaned up nativewidth/height for Image and Video and some PDF stuff. --- package.json | 1 + src/client/documents/Documents.ts | 12 +++- .../CollectionFreeFormLinkView.tsx | 4 +- .../CollectionFreeFormLinksView.tsx | 7 ++- .../collectionFreeForm/CollectionFreeFormView.tsx | 5 +- src/client/views/nodes/ImageBox.tsx | 15 +---- src/client/views/nodes/PDFBox.scss | 4 ++ src/client/views/nodes/PDFBox.tsx | 2 +- src/client/views/nodes/VideoBox.tsx | 68 +++++++--------------- 9 files changed, 53 insertions(+), 65 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx') diff --git a/package.json b/package.json index aa4abb0a5..d5abc808e 100644 --- a/package.json +++ b/package.json @@ -167,6 +167,7 @@ "react-split-pane": "^0.1.85", "react-table": "^6.9.2", "request": "^2.88.0", + "request-image-size": "^2.1.0", "request-promise": "^4.2.4", "serializr": "^1.5.1", "sharp": "^0.22.1", diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index ae190a989..1f4b76384 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -34,6 +34,7 @@ import { StrokeData, InkField } from "../../new_fields/InkField"; import { dropActionType } from "../util/DragManager"; import { DateField } from "../../new_fields/DateField"; import { UndoManager } from "../util/UndoManager"; +var requestImageSize = require('request-image-size'); export interface DocumentOptions { x?: number; @@ -216,7 +217,16 @@ export namespace Docs { } export function ImageDocument(url: string, options: DocumentOptions = {}) { - return CreateInstance(imageProto, new ImageField(new URL(url)), options); + let inst = CreateInstance(imageProto, new ImageField(new URL(url)), options); + requestImageSize(url) + .then((size: any) => { + if (!inst.proto!.nativeWidth) { + inst.proto!.nativeWidth = size.width; + } + inst.proto!.nativeHeight = Number(inst.proto!.nativeWidth!) * size.height / size.width; + }) + .catch((err: any) => console.log(err)); + return inst; // let doc = SetInstanceOptions(GetImagePrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }, // [new URL(url), ImageField]); // doc.SetText(KeyStore.Caption, "my caption..."); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index d6097b9a3..61de83f57 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -46,11 +46,11 @@ export class CollectionFreeFormLinkView extends React.Component - - ); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx index c5f7ad0d1..85556fb90 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx @@ -113,8 +113,11 @@ export class CollectionFreeFormLinksView extends React.Component ); + return connections.map(c => { + let x = c.l.reduce((p, l) => p + l[Id], ""); + return ; + }); } render() { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 8be0766eb..d1c4fb72d 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -323,7 +323,10 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY)); } - private childViews = () => [...this.views, ]; + private childViews = () => [ + , + ...this.views + ]; render() { const containerName = `collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`; const easing = () => this.props.Document.panTransformType === "Ease"; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index cc0dc8220..128f3c6f8 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -12,7 +12,7 @@ import React = require("react"); import { createSchema, makeInterface, listSpec } from '../../../new_fields/Schema'; import { DocComponent } from '../DocComponent'; import { positionSchema } from './DocumentView'; -import { FieldValue, Cast, StrCast } from '../../../new_fields/Types'; +import { FieldValue, Cast, StrCast, PromiseValue } from '../../../new_fields/Types'; import { ImageField } from '../../../new_fields/URLField'; import { List } from '../../../new_fields/List'; import { InkingControl } from '../InkingControl'; @@ -21,6 +21,7 @@ import { faImage } from '@fortawesome/free-solid-svg-icons'; import { library } from '@fortawesome/fontawesome-svg-core'; var path = require('path'); + library.add(faImage); @@ -43,15 +44,6 @@ export class ImageBox extends DocComponent(ImageD @observable private _isOpen: boolean = false; private dropDisposer?: DragManager.DragDropDisposer; - @action - onLoad = (target: any) => { - var h = this._imgRef.current!.naturalHeight; - var w = this._imgRef.current!.naturalWidth; - if (this._photoIndex === 0 && (this.props as any).id !== "isExpander" && (!this.Document.nativeWidth || !this.Document.nativeHeight || Math.abs(this.Document.nativeWidth / this.Document.nativeHeight - w / h) > 0.05)) { - Doc.SetOnPrototype(this.Document, "nativeHeight", FieldValue(this.Document.nativeWidth, 0) * h / w); - this.Document.height = FieldValue(this.Document.width, 0) * h / w; - } - } protected createDropTarget = (ele: HTMLDivElement) => { @@ -217,8 +209,7 @@ export class ImageBox extends DocComponent(ImageD // style={{ objectFit: (this._photoIndex === 0 ? undefined : "contain") }} width={nativeWidth} ref={this._imgRef} - onError={this.onError} - onLoad={this.onLoad} /> + onError={this.onError} /> {paths.length > 1 ? this.dots(paths) : (null)} {/* {this.lightbox(paths)} */} ); diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 3760e378a..449408a61 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -17,6 +17,10 @@ z-index: 25; pointer-events: all; } +.pdfBox-thumbnail { + position: absolute; + width: 100%; +} .pdfButton { pointer-events: all; width: 100px; diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 733bc920f..aa29a7170 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -375,7 +375,7 @@ export class PDFBox extends DocComponent(PdfDocumen // else if (this._largeRetryCount < 10) this._curSuffix = "_l"; if (field instanceof ImageField) path = this.choosePath(field.url); // } - return ; + return ; } return (null); } diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index ab57b4b04..35ecf12f6 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -10,10 +10,10 @@ import { makeInterface } from "../../../new_fields/Schema"; import { pageSchema } from "./ImageBox"; import { Cast, FieldValue, NumCast } from "../../../new_fields/Types"; import { VideoField } from "../../../new_fields/URLField"; -import Measure from "react-measure"; import "./VideoBox.scss"; import { RouteStore } from "../../../server/RouteStore"; import { DocServer } from "../../DocServer"; +import { actionFieldDecorator } from "mobx/lib/internal"; type VideoDocument = makeInterface<[typeof positionSchema, typeof pageSchema]>; const VideoDocument = makeInterface(positionSchema, pageSchema); @@ -22,30 +22,23 @@ const VideoDocument = makeInterface(positionSchema, pageSchema); export class VideoBox extends DocComponent(VideoDocument) { private _reactionDisposer?: IReactionDisposer; private _videoRef: HTMLVideoElement | null = null; - private _loaded: boolean = false; @observable _playTimer?: NodeJS.Timeout = undefined; @observable _fullScreen = false; @observable public Playing: boolean = false; public static LayoutString() { return FieldView.LayoutString(VideoBox); } - public get player(): HTMLVideoElement | undefined { - if (this._videoRef) { - return this._videoRef; - } + public get player(): HTMLVideoElement | null { + return this._videoRef; } - @action - setScaling = (r: any) => { - if (this._loaded) { - // bcz: the nativeHeight should really be set when the document is imported. - var nativeWidth = FieldValue(this.Document.nativeWidth, 0); - var nativeHeight = FieldValue(this.Document.nativeHeight, 0); - var newNativeHeight = nativeWidth * r.offset.height / r.offset.width; - if (!nativeHeight && newNativeHeight !== nativeHeight && !isNaN(newNativeHeight)) { - this.Document.height = newNativeHeight / nativeWidth * FieldValue(this.Document.width, 0); - this.Document.nativeHeight = newNativeHeight; - } - } else { - this._loaded = true; + + videoLoad = () => { + let aspect = this.player!.videoWidth / this.player!.videoHeight; + var nativeWidth = FieldValue(this.Document.nativeWidth, 0); + var nativeHeight = FieldValue(this.Document.nativeHeight, 0); + if (!nativeWidth || !nativeHeight) { + if (!this.Document.nativeWidth) this.Document.nativeWidth = this.player!.videoWidth; + this.Document.nativeHeight = this.Document.nativeWidth / aspect; + this.Document.height = FieldValue(this.Document.width, 0) / aspect; } } @@ -88,22 +81,12 @@ export class VideoBox extends DocComponent(VideoD if (vref) { vref.onfullscreenchange = action((e) => this._fullScreen = vref.webkitDisplayingFullscreen); if (this._reactionDisposer) this._reactionDisposer(); - this._reactionDisposer = reaction(() => this.props.Document.curPage, () => { - if (!this.Playing) { - vref.currentTime = NumCast(this.props.Document.curPage, 0); - } - }, { fireImmediately: true }); + this._reactionDisposer = reaction(() => this.props.Document.curPage, () => + !this.Playing && (vref.currentTime = this.Document.curPage || 0) + , { fireImmediately: true }); } } - videoContent(path: string) { - let style = "videoBox-cont" + (this._fullScreen ? "-fullScreen" : ""); - return ; - } - getMp4ForVideo(videoId: string = "JN5beCVArMs") { return new Promise(async (resolve, reject) => { const videoInfoRequestConfig = { @@ -111,7 +94,6 @@ export class VideoBox extends DocComponent(VideoD connection: 'keep-alive', "user-agent": 'Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/46.0', }, - }; try { let responseSchema: any = {}; @@ -145,9 +127,6 @@ export class VideoBox extends DocComponent(VideoD render() { let field = Cast(this.Document[this.props.fieldKey], VideoField); - if (!field) { - return
Loading
; - } // this.getMp4ForVideo().then((mp4) => { // console.log(mp4); @@ -155,15 +134,12 @@ export class VideoBox extends DocComponent(VideoD // console.log("") // }); // // - let content = this.videoContent(field.url.href); - return NumCast(this.props.Document.nativeHeight) ? - content : - - {({ measureRef }) => -
- {content} -
- } - ; + + let style = "videoBox-cont" + (this._fullScreen ? "-fullScreen" : ""); + return !field ?
Loading
: + ; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 4c0c0f4ee984c8c785661a5d363444e0209925e9 Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 4 Jun 2019 10:27:04 -0400 Subject: added link text to link display --- .../collectionFreeForm/CollectionFreeFormLinkView.scss | 6 ++++++ .../collectionFreeForm/CollectionFreeFormLinkView.tsx | 14 ++++++++++---- 2 files changed, 16 insertions(+), 4 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss index 737ffba7d..7a0fd2b31 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss @@ -10,3 +10,9 @@ transform: translate(10000px,10000px); pointer-events: all; } +.collectionfreeformlinkview-linkText { + stroke: rgb(0,0,0); + opacity: 0.5; + transform: translate(10000px,10000px); + pointer-events: all; +} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index 61de83f57..73256ee91 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -44,14 +44,20 @@ export class CollectionFreeFormLinkView extends React.Component text += StrCast(l.title) + ", "); + text = text.substr(0, text.length - 2); return ( <> - - + {/* */} + + {text} + ); } -- cgit v1.2.3-70-g09d2 From f2c4b71abc29d3416944eee539041ff324632417 Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 4 Jun 2019 10:35:47 -0400 Subject: from last --- .../views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index 73256ee91..7af4f1682 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -55,7 +55,7 @@ export class CollectionFreeFormLinkView extends React.Component {/* */} - + {text} -- cgit v1.2.3-70-g09d2 From 7d3ef1c914cc1cc0b6c05b14773a8b83e1b95c96 Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 4 Jun 2019 13:55:10 -0400 Subject: drop prosemirror text w/ links --- src/client/views/collections/CollectionSubView.tsx | 8 ++++++++ .../CollectionFreeFormLinkView.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 20 +++++++++++++++++++- 3 files changed, 28 insertions(+), 2 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx') diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index fe9e12640..be37efd3d 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -17,6 +17,7 @@ import { Cast, PromiseValue, FieldValue, ListSpec } from "../../../new_fields/Ty import { List } from "../../../new_fields/List"; import { DocServer } from "../../DocServer"; import CursorField from "../../../new_fields/CursorField"; +import { DocumentManager } from "../../util/DocumentManager"; export interface CollectionViewProps extends FieldViewProps { addDocument: (document: Doc, allowDuplicates?: boolean) => boolean; @@ -166,6 +167,13 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T) { e.stopPropagation(); e.preventDefault(); + if (html && html.indexOf(document.location.origin)) { // prosemirror text containing link to dash document + let start = html.indexOf(window.location.origin); + let path = html.substr(start, html.length - start); + let docid = path.substr(0, path.indexOf("\">")).replace(DocServer.prepend("/doc/"), "").split("?")[0]; + DocServer.GetRefField(docid).then(f => (f instanceof Doc) && this.props.addDocument(f, false)); + return; + } if (html && html.indexOf(" text += StrCast(l.title) + ", "); + this.props.LinkDocs.map(l => text += StrCast(l.title) + "(" + StrCast(l.linkDescription) + "), "); text = text.substr(0, text.length - 2); return ( <> diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 1a1614ac7..9d19df540 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -25,6 +25,7 @@ import { pageSchema } from "../../nodes/ImageBox"; import { InkField, StrokeData } from "../../../../new_fields/InkField"; import { HistoryUtil } from "../../../util/History"; import { Id } from "../../../../new_fields/FieldSymbols"; +import { DocServer } from "../../../DocServer"; export const panZoomSchema = createSchema({ panX: "number", @@ -228,7 +229,24 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { @action onDrop = (e: React.DragEvent): void => { var pt = this.getTransform().transformPoint(e.pageX, e.pageY); - super.onDrop(e, { x: pt[0], y: pt[1] }); + let html = e.dataTransfer.getData("text/html"); + if (html && html.indexOf(document.location.origin)) { // prosemirror text containing link to dash document + e.stopPropagation(); + e.preventDefault(); + let start = html.indexOf(window.location.origin); + let path = html.substr(start, html.length - start); + let docid = path.substr(0, path.indexOf("\">")).replace(DocServer.prepend("/doc/"), "").split("?")[0]; + DocServer.GetRefField(docid).then(f => { + if (f instanceof Doc) { + f.x = pt[0]; + f.y = pt[1]; + (f instanceof Doc) && this.props.addDocument(f, false); + } + }); + return; + } else { + super.onDrop(e, { x: pt[0], y: pt[1] }); + } } onDragOver = (): void => { -- cgit v1.2.3-70-g09d2