diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/client/util/DragManager.ts | 1 | ||||
-rw-r--r-- | src/client/views/DocumentDecorations.tsx | 16 | ||||
-rw-r--r-- | src/client/views/collections/CollectionBaseView.tsx | 12 | ||||
-rw-r--r-- | src/client/views/collections/CollectionSubView.tsx | 4 | ||||
-rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 64 | ||||
-rw-r--r-- | src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 2 | ||||
-rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 5 | ||||
-rw-r--r-- | src/client/views/nodes/VideoBox.tsx | 7 | ||||
-rw-r--r-- | src/client/views/nodes/WebBox.tsx | 13 |
9 files changed, 62 insertions, 62 deletions
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 46658867b..465b97981 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -174,6 +174,7 @@ export namespace DragManager { if (!dragDiv) { dragDiv = document.createElement("div"); dragDiv.className = "dragManager-dragDiv"; + dragDiv.style.pointerEvents = "none"; DragManager.Root().appendChild(dragDiv); } MainOverlayTextBox.Instance.SetTextDoc(); diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 2af6cb353..d704b6c47 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -25,8 +25,8 @@ export const Flyout = higflyout.default; @observer export class DocumentDecorations extends React.Component<{}, { value: string }> { static Instance: DocumentDecorations; - private _resizer = ""; private _isPointerDown = false; + private _resizing = ""; private keyinput: React.RefObject<HTMLInputElement>; private _documents: DocumentView[] = SelectionManager.SelectedDocuments(); private _resizeBorderWidth = 16; @@ -45,6 +45,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> @observable private _opacity = 1; @observable private _dragging = false; @observable private _iconifying = false; + @observable public Interacting = false; constructor(props: Readonly<{}>) { @@ -140,12 +141,12 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> dragData.yOffset = e.y - top; let move = SelectionManager.SelectedDocuments()[0].props.moveDocument; dragData.moveDocument = move; - this._dragging = true; + this.Interacting = this._dragging = true; document.removeEventListener("pointermove", this.onBackgroundMove); document.removeEventListener("pointerup", this.onBackgroundUp); DragManager.StartDocumentDrag(SelectionManager.SelectedDocuments().map(docView => docView.ContentDiv!), dragData, e.x, e.y, { handlers: { - dragComplete: action(() => this._dragging = false), + dragComplete: action(() => this.Interacting = this._dragging = false), }, hideSource: true }); @@ -255,11 +256,13 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> }); } + @action onPointerDown = (e: React.PointerEvent): void => { e.stopPropagation(); if (e.button === 0) { this._isPointerDown = true; - this._resizer = e.currentTarget.id; + this._resizing = e.currentTarget.id; + this.Interacting = true; document.removeEventListener("pointermove", this.onPointerMove); document.addEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); @@ -328,7 +331,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> let dX = 0, dY = 0, dW = 0, dH = 0; - switch (this._resizer) { + switch (this._resizing) { case "": break; case "documentDecorations-topLeftResizer": @@ -398,8 +401,11 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> }); } + @action onPointerUp = (e: PointerEvent): void => { e.stopPropagation(); + this._resizing = ""; + this.Interacting = false; if (e.button === 0) { e.preventDefault(); this._isPointerDown = false; diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index eec01bb3f..b19f01350 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -93,16 +93,16 @@ export class CollectionBaseView extends React.Component<CollectionViewProps> { if (curPage >= 0) { doc.SetOnPrototype(KeyStore.AnnotationOn, this.props.Document); } - if (this.props.Document.Get(this.props.fieldKey) instanceof Field) { - const value = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); - if (!this.createsCycle(doc, this.props.Document)) { - if (!value.some(v => v.Id === doc.Id) || allowDuplicates) { - value.push(doc); + this.props.Document.GetOrCreateAsync(this.props.fieldKey, ListField, (value: ListField<Document>) => { + if (value && !this.createsCycle(doc, this.props.Document)) { + if (!value.Data.some(v => v.Id === doc.Id) || allowDuplicates) { + value.Data.push(doc); doc.SetNumber(KeyStore.ZoomBasis, this.props.Document.GetNumber(KeyStore.Scale, 1)); } return true; } - } + }); + return true; // bcz: What is this code trying to do? // else { // let proto = props.Document.GetPrototype(); diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index ead559bd9..f9fc7be5a 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -141,7 +141,7 @@ export class CollectionSubView extends React.Component<SubCollectionViewProps> { return undefined; } ctor = Documents.WebDocument; - options = { height: options.width, ...options, title: path }; + options = { height: options.width, ...options, title: path, nativeWidth: undefined }; } return ctor ? ctor(path, options) : undefined; } @@ -174,7 +174,7 @@ export class CollectionSubView extends React.Component<SubCollectionViewProps> { let prom = new Promise<string>(resolve => e.dataTransfer.items[i].getAsString(resolve)) .then(action((s: string) => rp.head(ServerUtils.prepend(RouteStore.corsProxy + "/" + (str = s))))) .then(result => { - let type = result.headers["content-type"]; + let type = result["content-type"]; if (type) { this.getDocumentFromType(type, str, { ...options, width: 300, nativeWidth: 300 }) .then(doc => doc && this.props.addDocument(doc, false)); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 2d1982b0a..642aa7d50 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1,4 +1,4 @@ -import { action, computed, observable, trace } from "mobx"; +import { action, computed } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../../fields/Document"; import { KeyStore } from "../../../../fields/KeyStore"; @@ -10,7 +10,6 @@ import { Transform } from "../../../util/Transform"; import { undoBatch } from "../../../util/UndoManager"; import { COLLECTION_BORDER_WIDTH } from "../../../views/globalCssVariables.scss"; import { InkingCanvas } from "../../InkingCanvas"; -import { MainOverlayTextBox } from "../../MainOverlayTextBox"; import { CollectionFreeFormDocumentView } from "../../nodes/CollectionFreeFormDocumentView"; import { DocumentContentsView } from "../../nodes/DocumentContentsView"; import { DocumentViewProps } from "../../nodes/DocumentView"; @@ -21,7 +20,7 @@ import "./CollectionFreeFormView.scss"; import { MarqueeView } from "./MarqueeView"; import React = require("react"); import v5 = require("uuid/v5"); -import { BooleanField } from "../../../../fields/BooleanField"; +import { MainOverlayTextBox } from "../../MainOverlayTextBox"; @observer export class CollectionFreeFormView extends CollectionSubView { @@ -35,7 +34,6 @@ export class CollectionFreeFormView extends CollectionSubView { @computed get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); } private get borderWidth() { return this.isAnnotationOverlay ? 0 : COLLECTION_BORDER_WIDTH; } private get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey.Id === KeyStore.Annotations.Id; } // bcz: ? Why do we need to compare Id's? - private childViews = () => this.views; private panX = () => this.props.Document.GetNumber(KeyStore.PanX, 0); private panY = () => this.props.Document.GetNumber(KeyStore.PanY, 0); private zoomScaling = () => this.props.Document.GetNumber(KeyStore.Scale, 1); @@ -48,8 +46,14 @@ export class CollectionFreeFormView extends CollectionSubView { this._selectOnLoaded = newBox.Id;// track the new text box so we can give it a prop that tells it to focus itself when it's displayed this.addDocument(newBox, false); } + @action private addDocument = (newBox: Document, allowDuplicates: boolean) => { - return this.props.addDocument(this.bringToFront(newBox), false); + if (this.isAnnotationOverlay) { + newBox.SetNumber(KeyStore.ZoomBasis, this.props.Document.GetNumber(KeyStore.Scale, 1)); + } + this.props.addDocument(newBox, false); + this.bringToFront(newBox); + return newBox; } private selectDocuments = (docs: Document[]) => { SelectionManager.DeselectAll; @@ -71,27 +75,20 @@ export class CollectionFreeFormView extends CollectionSubView { @action drop = (e: Event, de: DragManager.DropEvent) => { if (super.drop(e, de) && de.data instanceof DragManager.DocumentDragData) { + const [x, y] = this.getTransform().transformPoint(de.x - de.data.xOffset, de.y - de.data.yOffset); if (de.data.droppedDocuments.length) { - let dragDoc = de.data.droppedDocuments[0]; - let zoom = dragDoc.GetNumber(KeyStore.ZoomBasis, 1); - let [xp, yp] = this.getTransform().transformPoint(de.x, de.y); - let x = xp - de.data.xOffset / zoom; - let y = yp - de.data.yOffset / zoom; - - let dropX = dragDoc.GetNumber(KeyStore.X, 0); - let dropY = dragDoc.GetNumber(KeyStore.Y, 0); + let dropX = de.data.droppedDocuments[0].GetNumber(KeyStore.X, 0); + let dropY = de.data.droppedDocuments[0].GetNumber(KeyStore.Y, 0); de.data.droppedDocuments.map(d => { - d.SetNumber(KeyStore.X, x + (d.GetNumber(KeyStore.X, 0)) - dropX); - d.SetNumber(KeyStore.Y, y + (d.GetNumber(KeyStore.Y, 0)) - dropY); - if (!d.GetBoolean(KeyStore.IsMinimized, false)) { - if (!d.GetNumber(KeyStore.Width, 0)) { - d.SetNumber(KeyStore.Width, 300); - } - if (!d.GetNumber(KeyStore.Height, 0)) { - let nw = d.GetNumber(KeyStore.NativeWidth, 0); - let nh = d.GetNumber(KeyStore.NativeHeight, 0); - d.SetNumber(KeyStore.Height, nw && nh ? nh / nw * d.Width() : 300); - } + d.SetNumber(KeyStore.X, x + (d.GetNumber(KeyStore.X, 0) - dropX)); + d.SetNumber(KeyStore.Y, y + (d.GetNumber(KeyStore.Y, 0) - dropY)); + if (!d.GetNumber(KeyStore.Width, 0)) { + d.SetNumber(KeyStore.Width, 300); + } + if (!d.GetNumber(KeyStore.Height, 0)) { + let nw = d.GetNumber(KeyStore.NativeWidth, 0); + let nh = d.GetNumber(KeyStore.NativeHeight, 0); + d.SetNumber(KeyStore.Height, nw && nh ? nh / nw * d.Width() : 300); } this.bringToFront(d); }); @@ -123,6 +120,7 @@ export class CollectionFreeFormView extends CollectionSubView { document.addEventListener("pointerup", this.onPointerUp); this._lastX = e.pageX; this._lastY = e.pageY; + e.stopPropagation(); } } @@ -193,22 +191,21 @@ export class CollectionFreeFormView extends CollectionSubView { // if (modes[e.deltaMode] === 'pixels') coefficient = 50; // else if (modes[e.deltaMode] === 'lines') coefficient = 1000; // This should correspond to line-height?? let deltaScale = (1 - (e.deltaY / coefficient)); - if (deltaScale < 0) deltaScale = -deltaScale; if (deltaScale * this.zoomScaling() < 1 && this.isAnnotationOverlay) { deltaScale = 1 / this.zoomScaling(); } let [x, y] = this.getTransform().transformPoint(e.clientX, e.clientY); let localTransform = this.getLocalTransform().inverse().scaleAbout(deltaScale, x, y); - let safeScale = Math.abs(localTransform.Scale); - this.props.Document.SetNumber(KeyStore.Scale, Math.abs(safeScale)); - this.setPan(-localTransform.TranslateX / safeScale, -localTransform.TranslateY / safeScale); + this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale); + this.setPan(-localTransform.TranslateX / localTransform.Scale, -localTransform.TranslateY / localTransform.Scale); e.stopPropagation(); } } @action setPan(panX: number, panY: number) { + MainOverlayTextBox.Instance.SetTextDoc(); var scale = this.getLocalTransform().inverse().Scale; const newPanX = Math.min((1 - 1 / scale) * this.nativeWidth, Math.max(0, panX)); const newPanY = Math.min((1 - 1 / scale) * this.nativeHeight, Math.max(0, panY)); @@ -227,12 +224,13 @@ export class CollectionFreeFormView extends CollectionSubView { @action bringToFront(doc: Document) { - this.props.Document.GetList(this.props.fieldKey, [] as Document[]).slice().sort((doc1, doc2) => { + let docs = this.props.Document.GetList(this.props.fieldKey, [] as Document[]).slice(); + docs.sort((doc1, doc2) => { if (doc1 === doc) return 1; if (doc2 === doc) return -1; return doc1.GetNumber(KeyStore.ZIndex, 0) - doc2.GetNumber(KeyStore.ZIndex, 0); }).map((doc, index) => doc.SetNumber(KeyStore.ZIndex, index + 1)); - return doc; + doc.SetNumber(KeyStore.ZIndex, docs.length + 1); } focusDocument = (doc: Document) => { @@ -267,9 +265,7 @@ export class CollectionFreeFormView extends CollectionSubView { let docviews = this.props.Document.GetList(this.props.fieldKey, [] as Document[]).filter(doc => doc).reduce((prev, doc) => { var page = doc.GetNumber(KeyStore.Page, -1); if (page === curPage || page === -1) { - let minim = doc.GetT(KeyStore.IsMinimized, BooleanField); - if (minim === undefined || (minim && !minim.Data)) - prev.push(<CollectionFreeFormDocumentView key={doc.Id} {...this.getDocumentViewProps(doc)} />); + prev.push(<CollectionFreeFormDocumentView key={doc.Id} {...this.getDocumentViewProps(doc)} />); } return prev; }, [] as JSX.Element[]); @@ -284,6 +280,7 @@ export class CollectionFreeFormView extends CollectionSubView { super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY)); } + private childViews = () => [...this.views, <CollectionFreeFormBackgroundView key="backgroundView" {...this.getDocumentViewProps(this.props.Document)} />]; render() { const containerName = `collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`; return ( @@ -294,7 +291,6 @@ export class CollectionFreeFormView extends CollectionSubView { getContainerTransform={this.getContainerTransform} getTransform={this.getTransform}> <CollectionFreeFormViewPannableContents centeringShiftX={this.centeringShiftX} centeringShiftY={this.centeringShiftY} zoomScaling={this.zoomScaling} panX={this.panX} panY={this.panY}> - <CollectionFreeFormBackgroundView {...this.getDocumentViewProps(this.props.Document)} /> <CollectionFreeFormLinksView {...this.props} key="freeformLinks"> <InkingCanvas getScreenTransform={this.getTransform} Document={this.props.Document} > {this.childViews} diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 12e5bdf1f..9fa6a4f51 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -72,7 +72,7 @@ export class CollectionFreeFormDocumentView extends React.Component<CollectionFr render() { let zoomFade = 1; - //var zoom = doc.GetNumber(KeyStore.Zoom, 1); + //var zoom = doc.GetNumber(KeyStore.ZoomBasis, 1); // let transform = this.getTransform().scale(this.contentScaling()).inverse(); // var [sptX, sptY] = transform.transformPoint(0, 0); // let [bptX, bptY] = transform.transformPoint(this.props.PanelWidth(), this.props.PanelHeight()); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 0d396fd66..c82b86ea9 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -5,6 +5,8 @@ import { Field, Opt } from "../../../fields/Field"; import { Key } from "../../../fields/Key"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; +import { NumberField } from "../../../fields/NumberField"; +import { TextField } from "../../../fields/TextField"; import { ServerUtils } from "../../../server/ServerUtil"; import { emptyFunction, Utils } from "../../../Utils"; import { Documents } from "../../documents/Documents"; @@ -21,9 +23,6 @@ import { ContextMenu } from "../ContextMenu"; import { DocumentContentsView } from "./DocumentContentsView"; import "./DocumentView.scss"; import React = require("react"); -import { TextField } from "../../../fields/TextField"; -import { string } from "prop-types"; -import { NumberField } from "../../../fields/NumberField"; export interface DocumentViewProps { ContainingCollectionView: Opt<CollectionView | CollectionPDFView | CollectionVideoView>; diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 9d7c2bc56..1e6bc58c9 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -1,13 +1,12 @@ import React = require("react"); +import { action, computed, IReactionDisposer, trace } from "mobx"; import { observer } from "mobx-react"; +import Measure from "react-measure"; import { FieldWaiting, Opt } from '../../../fields/Field'; +import { KeyStore } from "../../../fields/KeyStore"; import { VideoField } from '../../../fields/VideoField'; import { FieldView, FieldViewProps } from './FieldView'; import "./VideoBox.scss"; -import Measure from "react-measure"; -import { action, trace, observable, IReactionDisposer, computed, reaction } from "mobx"; -import { KeyStore } from "../../../fields/KeyStore"; -import { number } from "prop-types"; @observer export class VideoBox extends React.Component<FieldViewProps> { diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 1edb4d826..f7f5e31e6 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -2,20 +2,17 @@ import "./WebBox.scss"; import React = require("react"); import { WebField } from '../../../fields/WebField'; import { FieldViewProps, FieldView } from './FieldView'; -import { FieldWaiting } from '../../../fields/Field'; +import { FieldWaiting, Opt } from '../../../fields/Field'; import { observer } from "mobx-react"; -import { computed } from 'mobx'; +import { computed, reaction, IReactionDisposer } from 'mobx'; import { KeyStore } from '../../../fields/KeyStore'; +import { DocumentDecorations } from "../DocumentDecorations"; @observer export class WebBox extends React.Component<FieldViewProps> { public static LayoutString() { return FieldView.LayoutString(WebBox); } - constructor(props: FieldViewProps) { - super(props); - } - @computed get html(): string { return this.props.Document.GetHtml(KeyStore.Data, ""); } _ignore = 0; @@ -46,12 +43,14 @@ export class WebBox extends React.Component<FieldViewProps> { <iframe src={path} style={{ position: "absolute", width: "100%", height: "100%" }} />} </div>; + let frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting; + return ( <> <div className="webBox-cont" > {content} </div> - {this.props.isSelected() ? (null) : <div onWheel={this.onPreWheel} onPointerDown={this.onPrePointer} onPointerMove={this.onPrePointer} onPointerUp={this.onPrePointer} style={{ width: "100%", height: "100%", position: "absolute" }} />} + {!frozen ? (null) : <div onWheel={this.onPreWheel} onPointerDown={this.onPrePointer} onPointerMove={this.onPrePointer} onPointerUp={this.onPrePointer} style={{ width: "100%", height: "100%", position: "absolute" }} />} </>); } }
\ No newline at end of file |