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/util/DragManager.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/util/DragManager.ts') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 4849ae9f7..f7395578f 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -4,7 +4,7 @@ import { CollectionDockingView } from "../views/collections/CollectionDockingVie import { CollectionView } from "../views/collections/CollectionView"; import { DocumentDecorations } from "../views/DocumentDecorations"; import { DocumentView } from "../views/nodes/DocumentView"; -import { returnFalse } from "../../Utils"; +import { returnFalse, emptyFunction } from "../../Utils"; export function setupDrag(_reference: React.RefObject, docFunc: () => Document, moveFunc?: DragManager.MoveFunction, copyOnDrop: boolean = false) { let onRowMove = action((e: PointerEvent): void => { @@ -224,7 +224,7 @@ export namespace DragManager { CollectionDockingView.Instance.StartOtherDrag(docs, { pageX: e.pageX, pageY: e.pageY, - preventDefault: () => { }, + preventDefault: emptyFunction, button: 0 }); } -- 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/util/DragManager.ts') 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 e9cbcfa2a893572f8b92bba84dd0791e6f50be71 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 11 Apr 2019 09:34:46 -0400 Subject: cleaned up z-index stuff --- src/client/util/DragManager.ts | 3 +- src/client/views/ContextMenu.scss | 2 +- src/client/views/DocumentDecorations.scss | 33 +--------------------- src/client/views/Main.scss | 2 +- src/client/views/_global_variables.scss | 11 ++++++++ src/client/views/_global_variables.scss.d.ts | 10 +++++++ .../CollectionFreeFormRemoteCursors.scss | 24 ++++++++++++++++ .../CollectionFreeFormRemoteCursors.tsx | 32 ++++----------------- 8 files changed, 56 insertions(+), 61 deletions(-) create mode 100644 src/client/views/_global_variables.scss.d.ts create mode 100644 src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss (limited to 'src/client/util/DragManager.ts') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index b8a35a4d1..e500b0274 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -6,6 +6,7 @@ import { DocumentDecorations } from "../views/DocumentDecorations"; import { DocumentView } from "../views/nodes/DocumentView"; import { returnFalse, emptyFunction } from "../../Utils"; import { Main } from "../views/Main"; +import globalStyles from '../views/_global_variables.scss'; export function setupDrag(_reference: React.RefObject, docFunc: () => Document, moveFunc?: DragManager.MoveFunction, copyOnDrop: boolean = false) { let onRowMove = action((e: PointerEvent): void => { @@ -177,7 +178,7 @@ export namespace DragManager { dragElement.style.bottom = ""; dragElement.style.left = "0"; dragElement.style.transformOrigin = "0 0"; - dragElement.style.zIndex = "1000"; + dragElement.style.zIndex = "1000";// globalStyles.contextMenuZindex.toString(); dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`; dragElement.style.width = `${rect.width / scaleX}px`; dragElement.style.height = `${rect.height / scaleY}px`; diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index f6830d9cd..5acf598cf 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -2,7 +2,7 @@ .contextMenu-cont { position: absolute; display: flex; - z-index: 1000; + z-index: $contextMenu-zindex; box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw; flex-direction: column; } diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index b2096bccb..321bda384 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -8,7 +8,7 @@ top: 0; left:0; display: grid; - z-index: 1000; + z-index: $docDecorations-zindex; grid-template-rows: 20px 8px 1fr 8px; grid-template-columns: 8px 8px 1fr 8px 8px; pointer-events: none; @@ -93,37 +93,6 @@ opacity: 0.1; } -// position: absolute; -// display: grid; -// z-index: 1000; -// grid-template-rows: 20px 1fr 20px 0px; -// grid-template-columns: 20px 1fr 20px; -// pointer-events: none; -// #documentDecorations-centerCont { -// background: none; -// } -// .documentDecorations-resizer { -// pointer-events: auto; -// background: lightblue; -// opacity: 0.4; -// } -// #documentDecorations-topLeftResizer, -// #documentDecorations-bottomRightResizer { -// cursor: nwse-resize; -// } -// #documentDecorations-topRightResizer, -// #documentDecorations-bottomLeftResizer { -// cursor: nesw-resize; -// } -// #documentDecorations-topResizer, -// #documentDecorations-bottomResizer { -// cursor: ns-resize; -// } -// #documentDecorations-leftResizer, -// #documentDecorations-rightResizer { -// cursor: ew-resize; -// } -// } .linkFlyout { grid-column: 1/4; margin-left: 25px; diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index a68b90dd4..7329b8eb6 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -176,7 +176,7 @@ button:hover { overflow: visible; top: 0; left: 0; - z-index: 1000; + z-index: $mainTextInput-zindex; .formattedTextBox-cont { background-color: rgba(248, 6, 6, 0.001); width: 100%; diff --git a/src/client/views/_global_variables.scss b/src/client/views/_global_variables.scss index 44a819b79..238351a77 100644 --- a/src/client/views/_global_variables.scss +++ b/src/client/views/_global_variables.scss @@ -15,3 +15,14 @@ $sans-serif: "Noto Sans", sans-serif; $serif: "Crimson Text", serif; // misc values $border-radius: 0.3em; +// + + // dragged items +$contextMenu-zindex: 1000; // context menu shows up over everything +$mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc +$docDecorations-zindex: 998; // then doc decorations appear over everything else +$remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right? + +:export { + contextMenuZindex: $contextMenu-zindex +} \ No newline at end of file diff --git a/src/client/views/_global_variables.scss.d.ts b/src/client/views/_global_variables.scss.d.ts new file mode 100644 index 000000000..12008aeef --- /dev/null +++ b/src/client/views/_global_variables.scss.d.ts @@ -0,0 +1,10 @@ +export interface I_globalScss { + contextMenuZindex: number; // context menu shows up over everything + mainTextInputZindex: number; // then text input overlay so that it's context menu will appear over decorations, etc + docDecorationsZindex: number; // then doc decorations appear over everything else + remoteCursorsZindex: number; // ... not sure what level the remote cursors should go -- is this right? +} + +export const globalStyles: I_globalScss; + +export default globalStyles; \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss new file mode 100644 index 000000000..c38787802 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss @@ -0,0 +1,24 @@ +@import "global_variables"; + +.collectionFreeFormRemoteCursors-cont { + + position:absolute; + z-index: $remoteCursors-zindex; + transform-origin: 'center center'; +} +.collectionFreeFormRemoteCursors-canvas { + + position:absolute; + width: 20px; + height: 20px; + opacity: 0.5; + border-radius: 50%; + border: 2px solid black; +} +.collectionFreeFormRemoteCursors-symbol { + font-size: 14; + color: black; + // fontStyle: "italic", + margin-left: -12; + margin-top: 4; +} \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx index fc832264d..751ea8190 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx @@ -59,37 +59,17 @@ export class CollectionFreeFormRemoteCursors extends React.Component - { if (el) this.crosshairs = el; }} width={20} height={20} - style={{ - position: 'absolute', - width: "20px", - height: "20px", - opacity: 0.5, - borderRadius: "50%", - border: "2px solid black" - }} /> -

{email[0].toUpperCase()}

+

+ {email[0].toUpperCase()} +

); } -- cgit v1.2.3-70-g09d2 From 50be8cb7a93110821c972c679567ddb6aae8bc6f Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 11 Apr 2019 11:56:40 -0400 Subject: made css globals avabile from code. cleaned up formattedText overlay api.. --- src/client/util/DragManager.ts | 12 +- src/client/util/SelectionManager.ts | 2 +- src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/Main.tsx | 7 +- src/client/views/_global_variables.scss | 2 +- src/client/views/_global_variables.scss.d.ts | 11 +- src/client/views/_global_variables.ts | 8 + .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/FormattedTextBox.tsx | 31 ++-- tsconfig.json | 42 ++--- webpack.config.js | 180 ++++++++++----------- 11 files changed, 154 insertions(+), 145 deletions(-) create mode 100644 src/client/views/_global_variables.ts (limited to 'src/client/util/DragManager.ts') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index e500b0274..d66c6e90f 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -1,12 +1,12 @@ import { action } from "mobx"; import { Document } from "../../fields/Document"; +import { emptyFunction } from "../../Utils"; import { CollectionDockingView } from "../views/collections/CollectionDockingView"; -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"; -import globalStyles from '../views/_global_variables.scss'; +import { DocumentView } from "../views/nodes/DocumentView"; +import globalStyles from "../views/_global_variables"; +// import globalStyleVariables from "../views/_global_variables.scss"; // bcz: why doesn't this work? export function setupDrag(_reference: React.RefObject, docFunc: () => Document, moveFunc?: DragManager.MoveFunction, copyOnDrop: boolean = false) { let onRowMove = action((e: PointerEvent): void => { @@ -149,7 +149,7 @@ export namespace DragManager { dragDiv.className = "dragManager-dragDiv"; DragManager.Root().appendChild(dragDiv); } - Main.Instance.SetTextDoc(undefined, undefined, undefined); + Main.Instance.SetTextDoc(); let scaleXs: number[] = []; let scaleYs: number[] = []; @@ -178,7 +178,7 @@ export namespace DragManager { dragElement.style.bottom = ""; dragElement.style.left = "0"; dragElement.style.transformOrigin = "0 0"; - dragElement.style.zIndex = "1000";// globalStyles.contextMenuZindex.toString(); + dragElement.style.zIndex = globalStyles.contextMenuZindex;// "1000"; dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`; dragElement.style.width = `${rect.width / scaleX}px`; dragElement.style.height = `${rect.height / scaleY}px`; diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 2638e3b7d..2fa45a086 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -25,7 +25,7 @@ export namespace SelectionManager { DeselectAll(): void { manager.SelectedDocuments.map(dv => dv.props.onActiveChanged(false)); manager.SelectedDocuments = []; - Main.Instance.SetTextDoc(undefined, undefined, undefined); + Main.Instance.SetTextDoc(); } } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index fa521b7e2..29cca286d 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -322,7 +322,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> break; } - Main.Instance.SetTextDoc(undefined, undefined, undefined); + Main.Instance.SetTextDoc(); SelectionManager.SelectedDocuments().forEach(element => { const rect = element.screenRect(); if (rect.width !== 0) { diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 5fd778c7e..c4c4a6bf9 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -39,6 +39,7 @@ import "./Main.scss"; import { DocumentView } from './nodes/DocumentView'; import { FormattedTextBox } from './nodes/FormattedTextBox'; import { REPLCommand } from 'repl'; +import { Key } from '../../fields/Key'; @observer export class Main extends React.Component { @@ -208,17 +209,19 @@ export class Main extends React.Component { _textRect: any; _textXf: Transform = Transform.Identity(); _textScroll: number = 0; + _textFieldKey: Key = KeyStore.Data; _textColor: string | null = null; _textTargetDiv: HTMLDivElement | undefined; _textProxyDiv: React.RefObject; @action - SetTextDoc(textDoc?: Document, div?: HTMLDivElement, tx?: Transform) { + SetTextDoc(textDoc?: Document, textFieldKey?: Key, div?: HTMLDivElement, tx?: Transform) { if (this._textTargetDiv) { this._textTargetDiv.style.color = this._textColor; } this._textDoc = undefined; this._textDoc = textDoc; + this._textFieldKey = textFieldKey!; this._textXf = tx ? tx : Transform.Identity(); this._textTargetDiv = div; if (div) { @@ -277,7 +280,7 @@ export class Main extends React.Component { s[0] = Math.sqrt((s[0] - t[0]) * (s[0] - t[0]) + (s[1] - t[1]) * (s[1] - t[1])); return
- this._textXf} focus={(doc) => { }} /> + this._textXf} focus={(doc) => { }} />
; } diff --git a/src/client/views/_global_variables.scss b/src/client/views/_global_variables.scss index 238351a77..cd6af2dac 100644 --- a/src/client/views/_global_variables.scss +++ b/src/client/views/_global_variables.scss @@ -24,5 +24,5 @@ $docDecorations-zindex: 998; // then doc decorations appear over everything else $remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right? :export { - contextMenuZindex: $contextMenu-zindex + contextMenuZindex: $contextMenu-zindex; } \ No newline at end of file diff --git a/src/client/views/_global_variables.scss.d.ts b/src/client/views/_global_variables.scss.d.ts index 12008aeef..c902d473f 100644 --- a/src/client/views/_global_variables.scss.d.ts +++ b/src/client/views/_global_variables.scss.d.ts @@ -1,10 +1,7 @@ + export interface I_globalScss { - contextMenuZindex: number; // context menu shows up over everything - mainTextInputZindex: number; // then text input overlay so that it's context menu will appear over decorations, etc - docDecorationsZindex: number; // then doc decorations appear over everything else - remoteCursorsZindex: number; // ... not sure what level the remote cursors should go -- is this right? + contextMenuZindex: string; // context menu shows up over everything } +export const globalStyleVariables: I_globalScss; -export const globalStyles: I_globalScss; - -export default globalStyles; \ No newline at end of file +export default globalStyleVariables; \ No newline at end of file diff --git a/src/client/views/_global_variables.ts b/src/client/views/_global_variables.ts new file mode 100644 index 000000000..e70bfd56c --- /dev/null +++ b/src/client/views/_global_variables.ts @@ -0,0 +1,8 @@ +import * as globalStyleVariables from "../views/_global_variables.scss" + +export interface I_globalScss { + contextMenuZindex: string; // context menu shows up over everything +} +let globalStyles = globalStyleVariables as any as I_globalScss; + +export default globalStyles; \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index b40e36e77..01ebbe0e1 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -198,7 +198,7 @@ export class CollectionFreeFormView extends CollectionSubView { @action private SetPan(panX: number, panY: number) { - Main.Instance.SetTextDoc(undefined, undefined, undefined); + Main.Instance.SetTextDoc(); var x1 = this.getLocalTransform().inverse().Scale; const newPanX = Math.min((1 - 1 / x1) * this.nativeWidth, Math.max(0, panX)); const newPanY = Math.min((1 - 1 / x1) * this.nativeHeight, Math.max(0, panY)); diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 468cbcd1e..8ea747b1c 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -5,7 +5,6 @@ import { keymap } from "prosemirror-keymap"; import { EditorState, Plugin, Transaction } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; import { FieldWaiting, Opt } from "../../../fields/Field"; -import { KeyStore } from "../../../fields/KeyStore"; import { RichTextField } from "../../../fields/RichTextField"; import { inpRules } from "../../util/RichTextRules"; import { schema } from "../../util/RichTextSchema"; @@ -14,7 +13,6 @@ 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"); @@ -35,7 +33,12 @@ const { menuBar } = require("prosemirror-menu"); // specified Key and assigns it to an HTML input node. When changes are made to this node, // this will edit the document and assign the new value to that field. //] -export class FormattedTextBox extends React.Component { + +export interface FormattedTextBoxOverlay { + isOverlay?: boolean; +} + +export class FormattedTextBox extends React.Component<(FieldViewProps & FormattedTextBoxOverlay)> { public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(FormattedTextBox, fieldStr); } @@ -56,8 +59,8 @@ export class FormattedTextBox extends React.Component { if (this._editorView) { const state = this._editorView.state.apply(tx); this._editorView.updateState(state); - this.FieldDoc.SetDataOnPrototype( - this.FieldKey, + this.props.Document.SetDataOnPrototype( + this.props.fieldKey, JSON.stringify(state.toJSON()), RichTextField ); @@ -65,14 +68,11 @@ export class FormattedTextBox extends React.Component { } } - get FieldDoc() { return this.props.fieldKey === KeyStore.Archives ? Main.Instance._textDoc! : this.props.Document; } - get FieldKey() { return this.props.fieldKey === KeyStore.Archives ? KeyStore.Data : this.props.fieldKey; } - componentDidMount() { const config = { schema, inpRules, //these currently don't do anything, but could eventually be helpful - plugins: this.props.fieldKey === KeyStore.Archives ? [ + plugins: this.props.isOverlay ? [ history(), keymap({ "Mod-z": undo, "Mod-y": redo }), keymap(baseKeymap), @@ -84,7 +84,7 @@ export class FormattedTextBox extends React.Component { ] }; - if (this.props.fieldKey === KeyStore.Archives) { + if (this.props.isOverlay) { this._inputReactionDisposer = reaction(() => Main.Instance._textDoc && Main.Instance._textDoc.Id, () => { if (this._editorView) { @@ -96,12 +96,12 @@ 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())); + () => this.props.isSelected() && Main.Instance.SetTextDoc(this.props.Document, this.props.fieldKey, this._ref.current!, this.props.ScreenToLocalTransform())); } this._reactionDisposer = reaction( () => { - const field = this.FieldDoc ? this.FieldDoc.GetT(this.FieldKey, RichTextField) : undefined; + const field = this.props.Document ? this.props.Document.GetT(this.props.fieldKey, RichTextField) : undefined; return field && field !== FieldWaiting ? field.Data : undefined; }, field => { @@ -117,7 +117,7 @@ export class FormattedTextBox extends React.Component { private setupEditor(config: any) { let state: EditorState; - let field = this.FieldDoc ? this.FieldDoc.GetT(this.FieldKey, RichTextField) : undefined; + let field = this.props.Document ? this.props.Document.GetT(this.props.fieldKey, RichTextField) : undefined; if (field && field !== FieldWaiting && field.Data) { state = EditorState.fromJSON(config, JSON.parse(field.Data)); } else { @@ -176,8 +176,8 @@ 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()); + if (!this.props.isOverlay) { + Main.Instance.SetTextDoc(this.props.Document, this.props.fieldKey, this._ref.current!, this.props.ScreenToLocalTransform()); } else { if (this._ref.current) { this._ref.current.scrollTop = Main.Instance._textScroll; @@ -232,6 +232,7 @@ export class FormattedTextBox extends React.Component { className={`formattedTextBox-cont`} onKeyDown={this.onKeyPress} onKeyPress={this.onKeyPress} + onFocus={this.onFocused} onPointerUp={this.onPointerUp} onPointerDown={this.onPointerDown} onContextMenu={this.specificContextMenu} diff --git a/tsconfig.json b/tsconfig.json index 41db1d0a7..0d4d77002 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,23 +1,23 @@ { - "compilerOptions": { - "target": "es5", - "removeComments": true, - "experimentalDecorators": true, - "strict": true, - "jsx": "react", - "sourceMap": true, - "outDir": "dist", - "lib": [ - "dom", - "es2015" - ], - }, - // "exclude": [ - // "node_modules", - // "static" - // ], - "typeRoots": [ - "./node_modules/@types", - "./src/typings" - ] + "compilerOptions": { + "target": "es5", + "removeComments": true, + "experimentalDecorators": true, + "strict": true, + "jsx": "react", + "sourceMap": true, + "outDir": "dist", + "lib": [ + "dom", + "es2015" + ], + }, + // "exclude": [ + // "node_modules", + // "static" + // ], + "typeRoots": [ + "./node_modules/@types", + "./src/typings" + ] } \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 50079255f..574401807 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,95 +3,95 @@ var webpack = require('webpack'); const CopyWebpackPlugin = require("copy-webpack-plugin"); module.exports = { - mode: 'development', - entry: { - bundle: ["./src/client/views/Main.tsx", 'webpack-hot-middleware/client?reload=true'], - viewer: ["./src/debug/Viewer.tsx", 'webpack-hot-middleware/client?reload=true'], - test: ["./src/debug/Test.tsx", 'webpack-hot-middleware/client?reload=true'], - inkControls: ["./src/mobile/InkControls.tsx", 'webpack-hot-middleware/client?reload=true'], - imageUpload: ["./src/mobile/ImageUpload.tsx", 'webpack-hot-middleware/client?reload=true'], - }, - devtool: "source-map", - node: { - fs: 'empty', - module: 'empty', - dns: 'mock', - tls: 'mock', - net: 'mock' - }, - output: { - filename: "[name].js", - path: path.resolve(__dirname, "build"), - publicPath: "/" - }, - resolve: { - extensions: ['.js', '.ts', '.tsx'] - }, - module: { - rules: [ - { - test: [/\.tsx?$/, /\.ts?$/,], - enforce: 'pre', - use: [ - { - loader: "tslint-loader", - } - ] - }, { - test: [/\.tsx?$/, /\.ts?$/,], - loader: "awesome-typescript-loader", - include: path.join(__dirname, 'src') - }, - { - test: /\.scss|css$/, - use: [ - { - loader: "style-loader" - }, - { - loader: "css-loader" - }, - { - loader: "sass-loader" - } - ] - }, - { - test: /\.(jpg|png|pdf)$/, - use: [ - { - loader: 'file-loader' - } - ] - }, - { - test: /\.(png|jpg|gif)$/i, - use: [ - { - loader: 'url-loader', - options: { - limit: 8192 - } - } - ] - }] - }, - plugins: [ - new CopyWebpackPlugin([{ from: "deploy", to: path.join(__dirname, "build") }]), - new webpack.optimize.OccurrenceOrderPlugin(), - new webpack.HotModuleReplacementPlugin(), - new webpack.NoEmitOnErrorsPlugin() - ], - devServer: { - compress: false, - host: "localhost", - contentBase: path.join(__dirname, 'deploy'), - port: 4321, - hot: true, - https: false, - overlay: { - warnings: true, - errors: true + mode: 'development', + entry: { + bundle: ["./src/client/views/Main.tsx", 'webpack-hot-middleware/client?reload=true'], + viewer: ["./src/debug/Viewer.tsx", 'webpack-hot-middleware/client?reload=true'], + test: ["./src/debug/Test.tsx", 'webpack-hot-middleware/client?reload=true'], + inkControls: ["./src/mobile/InkControls.tsx", 'webpack-hot-middleware/client?reload=true'], + imageUpload: ["./src/mobile/ImageUpload.tsx", 'webpack-hot-middleware/client?reload=true'], + }, + devtool: "source-map", + node: { + fs: 'empty', + module: 'empty', + dns: 'mock', + tls: 'mock', + net: 'mock' + }, + output: { + filename: "[name].js", + path: path.resolve(__dirname, "build"), + publicPath: "/" + }, + resolve: { + extensions: ['.js', '.ts', '.tsx'] + }, + module: { + rules: [ + { + test: [/\.tsx?$/, /\.ts?$/,], + enforce: 'pre', + use: [ + { + loader: "tslint-loader", + } + ] + }, { + test: [/\.tsx?$/, /\.ts?$/,], + loader: "awesome-typescript-loader", + include: path.join(__dirname, 'src') + }, + { + test: /\.scss|css$/, + use: [ + { + loader: "style-loader" + }, + { + loader: "css-loader" + }, + { + loader: "sass-loader" + } + ] + }, + { + test: /\.(jpg|png|pdf)$/, + use: [ + { + loader: 'file-loader' + } + ] + }, + { + test: /\.(png|jpg|gif)$/i, + use: [ + { + loader: 'url-loader', + options: { + limit: 8192 + } + } + ] + }] + }, + plugins: [ + new CopyWebpackPlugin([{ from: "deploy", to: path.join(__dirname, "build") }]), + new webpack.optimize.OccurrenceOrderPlugin(), + new webpack.HotModuleReplacementPlugin(), + new webpack.NoEmitOnErrorsPlugin() + ], + devServer: { + compress: false, + host: "localhost", + contentBase: path.join(__dirname, 'deploy'), + port: 4321, + hot: true, + https: false, + overlay: { + warnings: true, + errors: true + } } - } }; \ No newline at end of file -- cgit v1.2.3-70-g09d2