diff options
-rw-r--r-- | src/client/util/DragManager.ts | 2 | ||||
-rw-r--r-- | src/client/views/DocumentDecorations.tsx | 2 | ||||
-rw-r--r-- | src/client/views/Main.scss | 4 | ||||
-rw-r--r-- | src/client/views/Main.tsx | 18 | ||||
-rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 2 | ||||
-rw-r--r-- | src/client/views/nodes/FormattedTextBox.tsx | 10 |
6 files changed, 28 insertions, 10 deletions
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index f7395578f..b8a35a4d1 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -5,6 +5,7 @@ import { CollectionView } from "../views/collections/CollectionView"; import { DocumentDecorations } from "../views/DocumentDecorations"; import { DocumentView } from "../views/nodes/DocumentView"; import { returnFalse, emptyFunction } from "../../Utils"; +import { Main } from "../views/Main"; export function setupDrag(_reference: React.RefObject<HTMLDivElement>, docFunc: () => Document, moveFunc?: DragManager.MoveFunction, copyOnDrop: boolean = false) { let onRowMove = action((e: PointerEvent): void => { @@ -147,6 +148,7 @@ export namespace DragManager { dragDiv.className = "dragManager-dragDiv"; DragManager.Root().appendChild(dragDiv); } + Main.Instance.SetTextDoc(undefined, undefined, undefined); let scaleXs: number[] = []; let scaleYs: number[] = []; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index b7bf727f1..fa521b7e2 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -16,6 +16,7 @@ import { LinkMenu } from "./nodes/LinkMenu"; import React = require("react"); import { FieldWaiting } from "../../fields/Field"; import { emptyFunction } from "../../Utils"; +import { Main } from "./Main"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -321,6 +322,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> break; } + Main.Instance.SetTextDoc(undefined, undefined, undefined); SelectionManager.SelectedDocuments().forEach(element => { const rect = element.screenRect(); if (rect.width !== 0) { diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index 8ef6b83f1..c4da47e0e 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -169,7 +169,7 @@ button:hover { overflow: scroll; } .mainDiv-textInput { - background-color: rgba(248, 6, 6, 0.1); + background-color: rgba(248, 6, 6, 0.001); width: 200px; height: 200px; position:absolute; @@ -177,7 +177,7 @@ button:hover { top: 0; left: 0; .formattedTextBox-cont { - background-color: rgba(248, 6, 6, 0.1); + background-color: rgba(248, 6, 6, 0.001); width: 100%; height: 100%; position:absolute; diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 2751b1899..e96e4cbf8 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -66,6 +66,7 @@ export class Main extends React.Component { constructor(props: Readonly<{}>) { super(props); + this._textProxyDiv = React.createRef(); Main.Instance = this; // causes errors to be generated when modifying an observable outside of an action configure({ enforceActions: "observed" }); @@ -205,13 +206,25 @@ export class Main extends React.Component { @observable _textDoc?: Document = undefined; _textRect: any; _textXf: Transform = Transform.Identity(); + _textScroll: number = 0; + _textTargetDiv: HTMLDivElement | undefined; + _textProxyDiv: React.RefObject<HTMLDivElement>; @action SetTextDoc(textDoc?: Document, div?: HTMLDivElement, tx?: Transform) { this._textDoc = undefined; this._textDoc = textDoc; this._textXf = tx ? tx : Transform.Identity(); + this._textTargetDiv = div; if (div) { this._textRect = div.getBoundingClientRect(); + this._textScroll = div.scrollTop; + } + } + + @action + textScroll = (e: React.UIEvent) => { + if (this._textProxyDiv.current && this._textTargetDiv) { + this._textTargetDiv.scrollTop = this._textScroll = this._textProxyDiv.current.children[0].scrollTop } } @@ -225,9 +238,8 @@ export class Main extends React.Component { let t = this._textXf.transformPoint(0, 0); let s = this._textXf.transformPoint(1, 0); s[0] = Math.sqrt((s[0] - t[0]) * (s[0] - t[0]) + (s[1] - t[1]) * (s[1] - t[1])); - return <div className="mainDiv-textInput" style={{ transform: `translate(${x}px, ${y}px) scale(${s[0]},${s[0]})` }} > - <div className="mainDiv-textInput" style={{ transform: `scale(${1 / s[0]}, ${1 / s[0]})`, width: `${w / s[0]}px`, height: `${h / s[0]}px` }}> - + return <div className="mainDiv-textInput" style={{ transform: `translate(${x}px, ${y}px) scale(${1 / s[0]},${1 / s[0]})`, width: "auto", height: "auto" }} > + <div className="mainDiv-textInput" ref={this._textProxyDiv} onScroll={this.textScroll} style={{ transform: `scale(${1}, ${1})`, width: `${w * s[0]}px`, height: `${h * s[0]}px` }}> <FormattedTextBox fieldKey={KeyStore.Archives} Document={this._textDoc} isSelected={returnTrue} select={emptyFunction} isTopMost={true} selectOnLoad={true} onActiveChanged={emptyFunction} active={returnTrue} ScreenToLocalTransform={Transform.Identity} focus={(doc) => { }} /> </div> diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 42967eb22..6b585ec4b 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -381,7 +381,6 @@ export class DocumentView extends React.Component<DocumentViewProps> { @computed get nativeHeight(): number { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); } @computed get contents() { - trace(); return (<DocumentContentsView {...this.props} isSelected={this.isSelected} @@ -394,7 +393,6 @@ export class DocumentView extends React.Component<DocumentViewProps> { if (!this.props.Document) { return null; } - trace(); var scaling = this.props.ContentScaling(); var nativeWidth = this.nativeWidth; diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index bb1bc4fb0..eb40a03a5 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -92,7 +92,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { this._reactionDisposer = reaction( () => { - const field = this.FieldDoc.GetT(this.FieldKey, RichTextField); + const field = this.FieldDoc ? this.FieldDoc.GetT(this.FieldKey, RichTextField) : undefined; return field && field !== FieldWaiting ? field.Data : undefined; }, field => { @@ -107,9 +107,8 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { } private setupEditor(config: any) { - let state: EditorState; - let field = this.FieldDoc.GetT(this.FieldKey, RichTextField); + let field = this.FieldDoc ? this.FieldDoc.GetT(this.FieldKey, RichTextField) : undefined; if (field && field !== FieldWaiting && field.Data) { state = EditorState.fromJSON(config, JSON.parse(field.Data)); } else { @@ -168,6 +167,10 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { onFocused = (e: React.FocusEvent): void => { if (this.props.fieldKey !== KeyStore.Archives) { Main.Instance.SetTextDoc(this.props.Document, this._ref.current!, this.props.ScreenToLocalTransform()); + } else { + if (this._ref.current) { + this._ref.current.scrollTop = Main.Instance._textScroll; + } } } @@ -219,6 +222,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { onKeyPress={this.onKeyPress} onPointerUp={this.onPointerUp} onPointerDown={this.onPointerDown} + onFocus={this.onFocused} onContextMenu={this.specificContextMenu} // tfs: do we need this event handler onWheel={this.onPointerWheel} |