diff options
| -rw-r--r-- | src/client/util/DragManager.ts | 12 | ||||
| -rw-r--r-- | src/client/util/SelectionManager.ts | 2 | ||||
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/Main.tsx | 7 | ||||
| -rw-r--r-- | src/client/views/_global_variables.scss | 2 | ||||
| -rw-r--r-- | src/client/views/_global_variables.scss.d.ts | 11 | ||||
| -rw-r--r-- | src/client/views/_global_variables.ts | 8 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/FormattedTextBox.tsx | 31 | ||||
| -rw-r--r-- | tsconfig.json | 42 | ||||
| -rw-r--r-- | webpack.config.js | 180 |
11 files changed, 154 insertions, 145 deletions
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<HTMLDivElement>, 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<HTMLDivElement>; @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 <div className="mainDiv-textInput" style={{ pointerEvents: "none", transform: `translate(${x}px, ${y}px) scale(${1 / s[0]},${1 / s[0]})`, width: "auto", height: "auto" }} > <div className="mainDiv-textInput" onPointerDown={this.textBoxDown} ref={this._textProxyDiv} onScroll={this.textScroll} style={{ pointerEvents: "none", 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={() => this._textXf} focus={(doc) => { }} /> + <FormattedTextBox fieldKey={this._textFieldKey!} isOverlay={true} Document={this._textDoc} isSelected={returnTrue} select={emptyFunction} isTopMost={true} selectOnLoad={true} onActiveChanged={emptyFunction} active={returnTrue} ScreenToLocalTransform={() => this._textXf} focus={(doc) => { }} /> </div> </ div>; } 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<FieldViewProps> { + +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<FieldViewProps> { 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<FieldViewProps> { } } - 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<FieldViewProps> { ] }; - 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<FieldViewProps> { ); } 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<FieldViewProps> { 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<FieldViewProps> { } 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<FieldViewProps> { 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 |