From e0b3c759880639bf56f9b8b39ea2e38c5cbad8a6 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 10 Apr 2019 14:28:25 -0400 Subject: fixed extra rendering for collections. --- src/client/views/nodes/DocumentView.tsx | 35 +++++++++++++++++++++------------ 1 file changed, 22 insertions(+), 13 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 9670ca6b2..42967eb22 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,4 +1,4 @@ -import { action, computed, IReactionDisposer, reaction, runInAction } from "mobx"; +import { action, computed, IReactionDisposer, reaction, runInAction, trace } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { Field, FieldWaiting, Opt } from "../../../fields/Field"; @@ -8,7 +8,7 @@ import { ListField } from "../../../fields/ListField"; import { BooleanField } from "../../../fields/BooleanField"; import { TextField } from "../../../fields/TextField"; import { ServerUtils } from "../../../server/ServerUtil"; -import { Utils } from "../../../Utils"; +import { Utils, emptyFunction } from "../../../Utils"; import { Documents } from "../../documents/Documents"; import { DocumentManager } from "../../util/DocumentManager"; import { DragManager } from "../../util/DragManager"; @@ -62,12 +62,12 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs { let Keys: { [name: string]: any } = {}; let Fields: { [name: string]: any } = {}; for (const key of keys) { - let fn = () => { }; + let fn = emptyFunction; Object.defineProperty(fn, "name", { value: key + "Key" }); Keys[key] = fn; } for (const field of fields) { - let fn = () => { }; + let fn = emptyFunction; Object.defineProperty(fn, "name", { value: field }); Fields[field] = fn; } @@ -157,7 +157,7 @@ export class DocumentView extends React.Component { dragData.moveDocument = this.props.moveDocument; DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, { handlers: { - dragComplete: action(() => { }) + dragComplete: action(emptyFunction) }, hideSource: !dropAliasOfDraggedDoc }); @@ -377,14 +377,28 @@ export class DocumentView extends React.Component { SelectionManager.SelectDoc(this, ctrlPressed); } + @computed get nativeWidth(): number { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); } + @computed get nativeHeight(): number { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); } + @computed + get contents() { + trace(); + return (); + } + render() { if (!this.props.Document) { return null; } + trace(); var scaling = this.props.ContentScaling(); - var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); - var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); + var nativeWidth = this.nativeWidth; + var nativeHeight = this.nativeHeight; if (this.isMinimized()) { return ( @@ -420,12 +434,7 @@ export class DocumentView extends React.Component { onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} > - + {this.contents} ); } -- cgit v1.2.3-70-g09d2 From d4326a225f3e801c98e4acdc6558af1c3fe6ae07 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 10 Apr 2019 15:18:10 -0400 Subject: improved text editing. --- src/client/util/DragManager.ts | 2 ++ src/client/views/DocumentDecorations.tsx | 2 ++ src/client/views/Main.scss | 4 ++-- src/client/views/Main.tsx | 18 +++++++++++++++--- src/client/views/nodes/DocumentView.tsx | 2 -- src/client/views/nodes/FormattedTextBox.tsx | 10 +++++++--- 6 files changed, 28 insertions(+), 10 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') 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, 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; @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
-
- + return
+
{ }} />
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 { @computed get nativeHeight(): number { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); } @computed get contents() { - trace(); return ( { 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 { 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 { } 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 { 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 { 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} -- cgit v1.2.3-70-g09d2 From e5411598c4d2ecc7a0b4d8584b576ff5f45ad2a0 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 11 Apr 2019 01:05:12 -0400 Subject: tried to fix some context menu and other conflicting interactions --- src/client/util/SelectionManager.ts | 2 +- src/client/views/Main.tsx | 4 ++-- .../collectionFreeForm/CollectionFreeFormView.tsx | 3 --- src/client/views/nodes/DocumentView.tsx | 3 ++- src/client/views/nodes/FormattedTextBox.scss | 1 + src/client/views/nodes/FormattedTextBox.tsx | 12 ++++++++---- 6 files changed, 14 insertions(+), 11 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index c6b8c7b0d..2638e3b7d 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -25,6 +25,7 @@ export namespace SelectionManager { DeselectAll(): void { manager.SelectedDocuments.map(dv => dv.props.onActiveChanged(false)); manager.SelectedDocuments = []; + Main.Instance.SetTextDoc(undefined, undefined, undefined); } } @@ -48,7 +49,6 @@ export namespace SelectionManager { manager.DeselectAll(); if (found) manager.SelectDoc(found, false); - Main.Instance.SetTextDoc(undefined, undefined, undefined); } export function SelectedDocuments(): Array { diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 8153250c7..b9e209b3c 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -274,8 +274,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
-
+ return
+
this._textXf} focus={(doc) => { }} />
; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index db8c370df..4e1164ee5 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -135,9 +135,6 @@ export class CollectionFreeFormView extends CollectionSubView { document.addEventListener("pointerup", this.onPointerUp); this._lastX = this.DownX = e.pageX; this._lastY = this.DownY = e.pageY; - if (this.props.isSelected()) { - e.stopPropagation(); - } } } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 6b585ec4b..1465d589c 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -105,7 +105,7 @@ export class DocumentView extends React.Component { } e.stopPropagation(); } else { - if (this.active && !e.isDefaultPrevented()) { + if (this.active) { e.stopPropagation(); document.removeEventListener("pointermove", this.onPointerMove); document.addEventListener("pointermove", this.onPointerMove); @@ -186,6 +186,7 @@ export class DocumentView extends React.Component { document.removeEventListener("pointerup", this.onPointerUp); e.stopPropagation(); if (!SelectionManager.IsSelected(this) && + e.button != 2 && Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4 ) { diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss index 32da2632e..d2ba52cf9 100644 --- a/src/client/views/nodes/FormattedTextBox.scss +++ b/src/client/views/nodes/FormattedTextBox.scss @@ -22,6 +22,7 @@ overflow-x: hidden; color: initial; height: 100%; + pointer-events: all; } .menuicon { diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 17125a298..14b22e9f5 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -14,6 +14,7 @@ import { ContextMenu } from "../../views/ContextMenu"; import { Main } from "../Main"; import { FieldView, FieldViewProps } from "./FieldView"; import "./FormattedTextBox.scss"; +import { emptyFunction } from '../../../Utils'; import React = require("react"); const { buildMenuItems } = require("prosemirror-example-setup"); const { menuBar } = require("prosemirror-menu"); @@ -95,8 +96,10 @@ export class FormattedTextBox extends React.Component { ); } else { this._proxyReactionDisposer = reaction(() => this.props.isSelected(), - () => - this.props.isSelected() && Main.Instance.SetTextDoc(this.props.Document, this._ref.current!, this.props.ScreenToLocalTransform()) + () => { + if (this.props.isSelected()) + Main.Instance.SetTextDoc(this.props.Document, this._ref.current!, this.props.ScreenToLocalTransform()); + } ); } @@ -166,6 +169,8 @@ export class FormattedTextBox extends React.Component { if (e.button === 1 && this.props.isSelected() && !e.altKey && !e.ctrlKey && !e.metaKey) { e.stopPropagation(); } + if (e.button === 2) + e.preventDefault(); } onPointerUp = (e: React.PointerEvent): void => { if (e.buttons === 1 && this.props.isSelected() && !e.altKey) { @@ -227,12 +232,11 @@ export class FormattedTextBox extends React.Component { render() { return (
Date: Thu, 11 Apr 2019 08:51:39 -0400 Subject: fixed zoom not always rendering. fixed documents (images, pdfs) not appearing. fixed lint warnings. --- src/client/views/Main.tsx | 7 ++++--- .../collectionFreeForm/CollectionFreeFormView.tsx | 12 +++++++----- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/FormattedTextBox.tsx | 9 +++------ 4 files changed, 15 insertions(+), 15 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index b9e209b3c..5fd778c7e 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -213,8 +213,9 @@ export class Main extends React.Component { _textProxyDiv: React.RefObject; @action SetTextDoc(textDoc?: Document, div?: HTMLDivElement, tx?: Transform) { - if (this._textTargetDiv) + if (this._textTargetDiv) { this._textTargetDiv.style.color = this._textColor; + } this._textDoc = undefined; this._textDoc = textDoc; @@ -231,12 +232,12 @@ export class Main extends React.Component { @action textScroll = (e: React.UIEvent) => { if (this._textProxyDiv.current && this._textTargetDiv) { - this._textTargetDiv.scrollTop = this._textScroll = this._textProxyDiv.current.children[0].scrollTop + this._textTargetDiv.scrollTop = this._textScroll = this._textProxyDiv.current.children[0].scrollTop; } } textBoxDown = (e: React.PointerEvent) => { - if (e.button != 0 || e.metaKey || e.altKey) { + if (e.button !== 0 || e.metaKey || e.altKey) { document.addEventListener("pointermove", this.textBoxMove); document.addEventListener('pointerup', this.textBoxUp); } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 4e1164ee5..b40e36e77 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -304,10 +304,12 @@ export class CollectionFreeFormView extends CollectionSubView { childViews = () => this.views; render() { - let [dx, dy] = [this.centeringShiftX, this.centeringShiftY]; - + const [dx, dy] = [this.centeringShiftX, this.centeringShiftY]; const panx: number = -this.props.Document.GetNumber(KeyStore.PanX, 0); const pany: number = -this.props.Document.GetNumber(KeyStore.PanY, 0); + const zoom: number = this.zoomScaling; + const blay = this.backgroundView; + const olay = this.overlayView; return ( runInAction(() => { this._pwidth = r.entry.width; this._pheight = r.entry.height; })}> @@ -323,8 +325,8 @@ export class CollectionFreeFormView extends CollectionSubView {
- {this.backgroundView} + style={{ transform: `translate(${dx}px, ${dy}px) scale(${zoom}, ${zoom}) translate(${panx}px, ${pany}px)` }}> + {blay} {this.childViews} @@ -332,7 +334,7 @@ export class CollectionFreeFormView extends CollectionSubView {
- {this.overlayView} + {olay}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 1465d589c..9c31a83c1 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -186,7 +186,7 @@ export class DocumentView extends React.Component { document.removeEventListener("pointerup", this.onPointerUp); e.stopPropagation(); if (!SelectionManager.IsSelected(this) && - e.button != 2 && + e.button !== 2 && Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4 ) { diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 14b22e9f5..468cbcd1e 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -96,11 +96,7 @@ export class FormattedTextBox extends React.Component { ); } else { this._proxyReactionDisposer = reaction(() => this.props.isSelected(), - () => { - if (this.props.isSelected()) - Main.Instance.SetTextDoc(this.props.Document, this._ref.current!, this.props.ScreenToLocalTransform()); - } - ); + () => this.props.isSelected() && Main.Instance.SetTextDoc(this.props.Document, this._ref.current!, this.props.ScreenToLocalTransform())); } this._reactionDisposer = reaction( @@ -169,8 +165,9 @@ export class FormattedTextBox extends React.Component { if (e.button === 1 && this.props.isSelected() && !e.altKey && !e.ctrlKey && !e.metaKey) { e.stopPropagation(); } - if (e.button === 2) + if (e.button === 2) { e.preventDefault(); + } } onPointerUp = (e: React.PointerEvent): void => { if (e.buttons === 1 && this.props.isSelected() && !e.altKey) { -- cgit v1.2.3-70-g09d2