aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes')
-rw-r--r--src/client/views/nodes/Annotation.tsx128
-rw-r--r--src/client/views/nodes/AudioBox.tsx14
-rw-r--r--src/client/views/nodes/CollectionFreeFormDocumentView.tsx22
-rw-r--r--src/client/views/nodes/DocumentContentsView.tsx47
-rw-r--r--src/client/views/nodes/DocumentView.tsx189
-rw-r--r--src/client/views/nodes/FieldView.tsx82
-rw-r--r--src/client/views/nodes/FormattedTextBox.scss1
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx92
-rw-r--r--src/client/views/nodes/ImageBox.tsx20
-rw-r--r--src/client/views/nodes/KeyValueBox.tsx33
-rw-r--r--src/client/views/nodes/KeyValuePair.tsx37
-rw-r--r--src/client/views/nodes/LinkBox.tsx17
-rw-r--r--src/client/views/nodes/LinkEditor.tsx6
-rw-r--r--src/client/views/nodes/LinkMenu.tsx12
-rw-r--r--src/client/views/nodes/PDFBox.tsx122
-rw-r--r--src/client/views/nodes/Sticky.tsx6
-rw-r--r--src/client/views/nodes/VideoBox.tsx30
-rw-r--r--src/client/views/nodes/WebBox.tsx12
18 files changed, 439 insertions, 431 deletions
diff --git a/src/client/views/nodes/Annotation.tsx b/src/client/views/nodes/Annotation.tsx
index a2c7be1a8..3e4ed6bf1 100644
--- a/src/client/views/nodes/Annotation.tsx
+++ b/src/client/views/nodes/Annotation.tsx
@@ -1,16 +1,16 @@
import "./ImageBox.scss";
-import React = require("react")
-import { observer } from "mobx-react"
+import React = require("react");
+import { observer } from "mobx-react";
import { observable, action } from 'mobx';
-import 'react-pdf/dist/Page/AnnotationLayer.css'
+import 'react-pdf/dist/Page/AnnotationLayer.css';
-interface IProps{
+interface IProps {
Span: HTMLSpanElement;
- X: number;
- Y: number;
- Highlights: any[];
- Annotations: any[];
- CurrAnno: any[];
+ X: number;
+ Y: number;
+ Highlights: any[];
+ Annotations: any[];
+ CurrAnno: any[];
}
@@ -23,95 +23,95 @@ interface IProps{
*/
@observer
export class Annotation extends React.Component<IProps> {
-
+
/**
* changes color of the span (highlighted section)
*/
- onColorChange = (e:React.PointerEvent) => {
- if (e.currentTarget.innerHTML == "r"){
- this.props.Span.style.backgroundColor = "rgba(255,0,0, 0.3)"
- } else if (e.currentTarget.innerHTML == "b"){
- this.props.Span.style.backgroundColor = "rgba(0,255, 255, 0.3)"
- } else if (e.currentTarget.innerHTML == "y"){
- this.props.Span.style.backgroundColor = "rgba(255,255,0, 0.3)"
- } else if (e.currentTarget.innerHTML == "g"){
- this.props.Span.style.backgroundColor = "rgba(76, 175, 80, 0.3)"
+ onColorChange = (e: React.PointerEvent) => {
+ if (e.currentTarget.innerHTML === "r") {
+ this.props.Span.style.backgroundColor = "rgba(255,0,0, 0.3)";
+ } else if (e.currentTarget.innerHTML === "b") {
+ this.props.Span.style.backgroundColor = "rgba(0,255, 255, 0.3)";
+ } else if (e.currentTarget.innerHTML === "y") {
+ this.props.Span.style.backgroundColor = "rgba(255,255,0, 0.3)";
+ } else if (e.currentTarget.innerHTML === "g") {
+ this.props.Span.style.backgroundColor = "rgba(76, 175, 80, 0.3)";
}
-
+
}
/**
* removes the highlighted span. Supposed to remove Annotation too, but I don't know how to unmount this
*/
@action
- onRemove = (e:any) => {
- let index:number = -1;
+ onRemove = (e: any) => {
+ let index: number = -1;
//finding the highlight in the highlight array
this.props.Highlights.forEach((e) => {
- for (let i = 0; i < e.spans.length; i++){
- if (e.spans[i] == this.props.Span){
- index = this.props.Highlights.indexOf(e);
- this.props.Highlights.splice(index, 1);
+ for (const span of e.spans) {
+ if (span === this.props.Span) {
+ index = this.props.Highlights.indexOf(e);
+ this.props.Highlights.splice(index, 1);
}
}
- })
+ });
//removing from CurrAnno and Annotation array
- this.props.Annotations.splice(index, 1);
- this.props.CurrAnno.pop()
-
+ this.props.Annotations.splice(index, 1);
+ this.props.CurrAnno.pop();
+
//removing span from div
- if(this.props.Span.parentElement){
- let nodesArray = this.props.Span.parentElement.childNodes;
+ if (this.props.Span.parentElement) {
+ let nodesArray = this.props.Span.parentElement.childNodes;
nodesArray.forEach((e) => {
- if (e == this.props.Span){
- if (this.props.Span.parentElement){
+ if (e === this.props.Span) {
+ if (this.props.Span.parentElement) {
this.props.Highlights.forEach((item) => {
- if (item == e){
- item.remove();
+ if (item === e) {
+ item.remove();
}
- })
- e.remove();
+ });
+ e.remove();
}
}
- })
+ });
}
-
-
+
+
}
render() {
return (
- <div
- style = {{
- position: "absolute",
- top: "20px",
- left: "0px",
- zIndex: 1,
- transform: `translate(${this.props.X}px, ${this.props.Y}px)`,
-
- }}>
- <div style = {{width:"200px", height:"50px", backgroundColor: "orange"}}>
+ <div
+ style={{
+ position: "absolute",
+ top: "20px",
+ left: "0px",
+ zIndex: 1,
+ transform: `translate(${this.props.X}px, ${this.props.Y}px)`,
+
+ }}>
+ <div style={{ width: "200px", height: "50px", backgroundColor: "orange" }}>
<button
- style = {{borderRadius: "25px", width:"25%", height:"100%"}}
- onClick = {this.onRemove}
+ style={{ borderRadius: "25px", width: "25%", height: "100%" }}
+ onClick={this.onRemove}
>x</button>
- <div style = {{width:"75%", height: "100%" , display:"inline-block"}}>
- <button onPointerDown = {this.onColorChange} style = {{backgroundColor:"red", borderRadius:"50%", color: "transparent"}}>r</button>
- <button onPointerDown = {this.onColorChange} style = {{backgroundColor:"blue", borderRadius:"50%", color: "transparent"}}>b</button>
- <button onPointerDown = {this.onColorChange} style = {{backgroundColor:"yellow", borderRadius:"50%", color:"transparent"}}>y</button>
- <button onPointerDown = {this.onColorChange} style = {{backgroundColor:"green", borderRadius:"50%", color:"transparent"}}>g</button>
+ <div style={{ width: "75%", height: "100%", display: "inline-block" }}>
+ <button onPointerDown={this.onColorChange} style={{ backgroundColor: "red", borderRadius: "50%", color: "transparent" }}>r</button>
+ <button onPointerDown={this.onColorChange} style={{ backgroundColor: "blue", borderRadius: "50%", color: "transparent" }}>b</button>
+ <button onPointerDown={this.onColorChange} style={{ backgroundColor: "yellow", borderRadius: "50%", color: "transparent" }}>y</button>
+ <button onPointerDown={this.onColorChange} style={{ backgroundColor: "green", borderRadius: "50%", color: "transparent" }}>g</button>
</div>
-
+
</div>
- <div style = {{width:"200px", height:"200"}}>
- <textarea style = {{width: "100%", height: "100%"}}
- defaultValue = "Enter Text Here..."
-
+ <div style={{ width: "200px", height: "200" }}>
+ <textarea style={{ width: "100%", height: "100%" }}
+ defaultValue="Enter Text Here..."
+
></textarea>
</div>
</div>
-
+
);
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 6daf15f5f..1493ff25b 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -1,18 +1,18 @@
-import React = require("react")
+import React = require("react");
import { FieldViewProps, FieldView } from './FieldView';
import { FieldWaiting } from '../../../fields/Field';
-import { observer } from "mobx-react"
+import { observer } from "mobx-react";
import { ContextMenu } from "../../views/ContextMenu";
import { observable, action } from 'mobx';
import { KeyStore } from '../../../fields/KeyStore';
import { AudioField } from "../../../fields/AudioField";
-import "./AudioBox.scss"
+import "./AudioBox.scss";
import { NumberField } from "../../../fields/NumberField";
@observer
export class AudioBox extends React.Component<FieldViewProps> {
- public static LayoutString() { return FieldView.LayoutString(AudioBox) }
+ public static LayoutString() { return FieldView.LayoutString(AudioBox); }
constructor(props: FieldViewProps) {
super(props);
@@ -28,8 +28,8 @@ export class AudioBox extends React.Component<FieldViewProps> {
render() {
- let field = this.props.doc.Get(this.props.fieldKey)
- let path = field == FieldWaiting ? "http://techslides.com/demos/samples/sample.mp3" :
+ let field = this.props.Document.Get(this.props.fieldKey);
+ let path = field === FieldWaiting ? "http://techslides.com/demos/samples/sample.mp3" :
field instanceof AudioField ? field.Data.href : "http://techslides.com/demos/samples/sample.mp3";
return (
@@ -39,6 +39,6 @@ export class AudioBox extends React.Component<FieldViewProps> {
Not supported.
</audio>
</div>
- )
+ );
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 1a0f0cbbd..77f41105f 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -35,31 +35,29 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
@computed get nativeHeight(): number { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
set width(w: number) {
- this.props.Document.SetData(KeyStore.Width, w, NumberField)
+ this.props.Document.SetData(KeyStore.Width, w, NumberField);
if (this.nativeWidth && this.nativeHeight) {
- this.props.Document.SetNumber(KeyStore.Height, this.nativeHeight / this.nativeWidth * w)
+ this.props.Document.SetNumber(KeyStore.Height, this.nativeHeight / this.nativeWidth * w);
}
}
set height(h: number) {
this.props.Document.SetData(KeyStore.Height, h, NumberField);
if (this.nativeWidth && this.nativeHeight) {
- this.props.Document.SetNumber(KeyStore.Width, this.nativeWidth / this.nativeHeight * h)
+ this.props.Document.SetNumber(KeyStore.Width, this.nativeWidth / this.nativeHeight * h);
}
}
set zIndex(h: number) {
- this.props.Document.SetData(KeyStore.ZIndex, h, NumberField)
+ this.props.Document.SetData(KeyStore.ZIndex, h, NumberField);
}
- contentScaling = () => {
- return this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
- }
+ contentScaling = () => this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
- getTransform = (): Transform => {
- return this.props.ScreenToLocalTransform().
- translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)).scale(1 / this.contentScaling());
- }
+ getTransform = (): Transform =>
+ this.props.ScreenToLocalTransform()
+ .translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0))
+ .scale(1 / this.contentScaling())
@computed
get docView() {
@@ -68,7 +66,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
ScreenToLocalTransform={this.getTransform}
PanelWidth={this.panelWidth}
PanelHeight={this.panelHeight}
- />
+ />;
}
panelWidth = () => this.props.Document.GetBoolean(KeyStore.Minimized, false) ? 10 : this.props.PanelWidth();
panelHeight = () => this.props.Document.GetBoolean(KeyStore.Minimized, false) ? 10 : this.props.PanelHeight();
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 77551649c..5836da396 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -1,6 +1,6 @@
import { computed } from "mobx";
import { observer } from "mobx-react";
-import { FieldWaiting } from "../../../fields/Field";
+import { FieldWaiting, Field } from "../../../fields/Field";
import { Key } from "../../../fields/Key";
import { KeyStore } from "../../../fields/KeyStore";
import { ListField } from "../../../fields/ListField";
@@ -11,7 +11,7 @@ import { CollectionSchemaView } from "../collections/CollectionSchemaView";
import { CollectionVideoView } from "../collections/CollectionVideoView";
import { CollectionView } from "../collections/CollectionView";
import { AudioBox } from "./AudioBox";
-import { DocumentViewProps, JsxBindings } from "./DocumentView";
+import { DocumentViewProps } from "./DocumentView";
import "./DocumentView.scss";
import { FormattedTextBox } from "./FormattedTextBox";
import { ImageBox } from "./ImageBox";
@@ -21,8 +21,16 @@ import { VideoBox } from "./VideoBox";
import { WebBox } from "./WebBox";
import { HistogramBox } from "../../northstar/dash-nodes/HistogramBox";
import React = require("react");
+import { Document } from "../../../fields/Document";
+import { FieldViewProps } from "./FieldView";
+import { Without } from "../../../Utils";
const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
+type BindingProps = Without<FieldViewProps, 'fieldKey'>;
+export interface JsxBindings {
+ props: BindingProps;
+ [keyName: string]: BindingProps | Field;
+}
@observer
export class DocumentContentsView extends React.Component<DocumentViewProps & {
@@ -36,13 +44,40 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
CreateBindings(): JsxBindings {
- let bindings: JsxBindings = { ...this.props, };
+ let
+ {
+ Document,
+ isSelected,
+ select,
+ isTopMost,
+ selectOnLoad,
+ ScreenToLocalTransform,
+ addDocument,
+ removeDocument,
+ onActiveChanged,
+ parentActive: active,
+ } = this.props;
+ let bindings: JsxBindings = {
+ props: {
+ Document,
+ isSelected,
+ select,
+ isTopMost,
+ selectOnLoad,
+ ScreenToLocalTransform,
+ active,
+ onActiveChanged,
+ addDocument,
+ removeDocument,
+ focus,
+ }
+ };
for (const key of this.layoutKeys) {
bindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data
}
for (const key of this.layoutFields) {
let field = this.props.Document.Get(key);
- bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
+ bindings[key.Name] = field && field !== FieldWaiting ? field.GetValue() : field;
}
return bindings;
}
@@ -57,7 +92,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
bindings={this.CreateBindings()}
jsx={this.layout}
showWarnings={true}
- onError={(test: any) => { console.log(test) }}
- />
+ onError={(test: any) => { console.log(test); }}
+ />;
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 7514e782d..9c31a83c1 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,31 +8,35 @@ 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";
import { SelectionManager } from "../../util/SelectionManager";
import { Transform } from "../../util/Transform";
import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { CollectionView, CollectionViewType } from "../collections/CollectionView";
+import { CollectionView } from "../collections/CollectionView";
import { ContextMenu } from "../ContextMenu";
import { DocumentContentsView } from "./DocumentContentsView";
import "./DocumentView.scss";
import React = require("react");
+
export interface DocumentViewProps {
ContainingCollectionView: Opt<CollectionView>;
Document: Document;
- AddDocument?: (doc: Document, allowDuplicates: boolean) => boolean;
- RemoveDocument?: (doc: Document) => boolean;
+ addDocument?: (doc: Document, allowDuplicates?: boolean) => boolean;
+ removeDocument?: (doc: Document) => boolean;
+ moveDocument?: (doc: Document, targetCollection: Document, addDocument: (document: Document) => boolean) => boolean;
ScreenToLocalTransform: () => Transform;
isTopMost: boolean;
ContentScaling: () => number;
PanelWidth: () => number;
PanelHeight: () => number;
focus: (doc: Document) => void;
- SelectOnLoad: boolean;
+ selectOnLoad: boolean;
+ parentActive: () => boolean;
+ onActiveChanged: (isActive: boolean) => void;
}
export interface JsxArgs extends DocumentViewProps {
Keys: { [name: string]: Key };
@@ -58,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;
}
@@ -76,71 +80,32 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
return args;
}
-export interface JsxBindings {
- Document: Document;
- isSelected: () => boolean;
- select: (isCtrlPressed: boolean) => void;
- isTopMost: boolean;
- SelectOnLoad: boolean;
- [prop: string]: any;
-}
-
@observer
export class DocumentView extends React.Component<DocumentViewProps> {
private _mainCont = React.createRef<HTMLDivElement>();
+ public get ContentRef() {
+ return this._mainCont;
+ }
private _downX: number = 0;
private _downY: number = 0;
-
- private _reactionDisposer: Opt<IReactionDisposer>;
- @computed get active(): boolean {
- return (
- SelectionManager.IsSelected(this) ||
- !this.props.ContainingCollectionView ||
- this.props.ContainingCollectionView.active()
- );
- }
- @computed get topMost(): boolean {
- return (
- !this.props.ContainingCollectionView ||
- this.props.ContainingCollectionView.collectionViewType ==
- CollectionViewType.Docking
- );
- }
- @computed get layout(): string {
- return this.props.Document.GetText(
- KeyStore.Layout,
- "<p>Error loading layout data</p>"
- );
- }
- @computed get layoutKeys(): Key[] {
- return this.props.Document.GetData(
- KeyStore.LayoutKeys,
- ListField,
- new Array<Key>()
- );
- }
- @computed get layoutFields(): Key[] {
- return this.props.Document.GetData(
- KeyStore.LayoutFields,
- ListField,
- new Array<Key>()
- );
- }
- screenRect = (): ClientRect | DOMRect =>
- this._mainCont.current
- ? this._mainCont.current.getBoundingClientRect()
- : new DOMRect();
+ @computed get active(): boolean { return SelectionManager.IsSelected(this) || this.props.parentActive(); }
+ @computed get topMost(): boolean { return this.props.isTopMost; }
+ @computed get layout(): string { return this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>"); }
+ @computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>()); }
+ @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>()); }
+ screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect();
onPointerDown = (e: React.PointerEvent): void => {
this._downX = e.clientX;
this._downY = e.clientY;
if (e.shiftKey && e.buttons === 2) {
if (this.props.isTopMost) {
this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey);
- } else
+ } else {
CollectionDockingView.Instance.StartOtherDrag([this.props.Document], e);
+ }
e.stopPropagation();
} else {
- if (this.active && !e.isDefaultPrevented()) {
+ if (this.active) {
e.stopPropagation();
document.removeEventListener("pointermove", this.onPointerMove);
document.addEventListener("pointermove", this.onPointerMove);
@@ -148,7 +113,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
document.addEventListener("pointerup", this.onPointerUp);
}
}
- };
+ }
private dropDisposer?: DragManager.DragDropDisposer;
@@ -159,20 +124,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
});
}
runInAction(() => DocumentManager.Instance.DocumentViews.push(this));
- this._reactionDisposer = reaction(
- () =>
- this.props.ContainingCollectionView &&
- this.props.ContainingCollectionView.SelectedDocs.slice(),
- () => {
- if (
- this.props.ContainingCollectionView &&
- this.props.ContainingCollectionView.SelectedDocs.indexOf(
- this.props.Document.Id
- ) != -1
- )
- SelectionManager.SelectDoc(this, true);
- }
- );
}
componentDidUpdate() {
@@ -190,15 +141,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
if (this.dropDisposer) {
this.dropDisposer();
}
- runInAction(() =>
- DocumentManager.Instance.DocumentViews.splice(
- DocumentManager.Instance.DocumentViews.indexOf(this),
- 1
- )
- );
- if (this._reactionDisposer) {
- this._reactionDisposer();
- }
+ runInAction(() => DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1));
}
startDragging(x: number, y: number, dropAliasOfDraggedDoc: boolean) {
@@ -211,17 +154,10 @@ export class DocumentView extends React.Component<DocumentViewProps> {
dragData.aliasOnDrop = dropAliasOfDraggedDoc;
dragData.xOffset = x - left;
dragData.yOffset = y - top;
- dragData.removeDocument = (dropCollectionView: CollectionView) => {
- if (
- this.props.RemoveDocument &&
- this.props.ContainingCollectionView !== dropCollectionView
- ) {
- this.props.RemoveDocument(this.props.Document);
- }
- };
+ dragData.moveDocument = this.props.moveDocument;
DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, {
handlers: {
- dragComplete: action(() => { })
+ dragComplete: action(emptyFunction)
},
hideSource: !dropAliasOfDraggedDoc
});
@@ -238,42 +174,40 @@ export class DocumentView extends React.Component<DocumentViewProps> {
) {
document.removeEventListener("pointermove", this.onPointerMove);
document.removeEventListener("pointerup", this.onPointerUp);
- if (!this.topMost || e.buttons == 2 || e.altKey) {
+ if (!this.topMost || e.buttons === 2 || e.altKey) {
this.startDragging(this._downX, this._downY, e.ctrlKey || e.altKey);
}
}
e.stopPropagation();
e.preventDefault();
- };
+ }
onPointerUp = (e: PointerEvent): void => {
document.removeEventListener("pointermove", this.onPointerMove);
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
) {
SelectionManager.SelectDoc(this, e.ctrlKey);
}
- };
+ }
stopPropogation = (e: React.SyntheticEvent) => {
e.stopPropagation();
- };
+ }
deleteClicked = (): void => {
- if (this.props.RemoveDocument) {
- this.props.RemoveDocument(this.props.Document);
+ if (this.props.removeDocument) {
+ this.props.removeDocument(this.props.Document);
}
- };
+ }
fieldsClicked = (e: React.MouseEvent): void => {
- if (this.props.AddDocument) {
- this.props.AddDocument(
- Documents.KVPDocument(this.props.Document, { width: 300, height: 300 }),
- false
- );
+ if (this.props.addDocument) {
+ this.props.addDocument(Documents.KVPDocument(this.props.Document, { width: 300, height: 300 }), false);
}
- };
+ }
fullScreenClicked = (e: React.MouseEvent): void => {
CollectionDockingView.Instance.OpenFullScreen(this.props.Document);
ContextMenu.Instance.clearItems();
@@ -282,7 +216,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
event: this.closeFullScreenClicked
});
ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
- };
+ }
closeFullScreenClicked = (e: React.MouseEvent): void => {
CollectionDockingView.Instance.CloseFullScreen();
@@ -292,7 +226,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
event: this.fullScreenClicked
});
ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
- };
+ }
@action
public minimize = (): void => {
@@ -302,7 +236,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
BooleanField
);
SelectionManager.DeselectAll();
- };
+ }
@action
drop = (e: Event, de: DragManager.DropEvent) => {
@@ -344,7 +278,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
);
e.stopPropagation();
}
- };
+ }
onDrop = (e: React.DragEvent) => {
if (e.isDefaultPrevented()) {
@@ -358,7 +292,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
e.stopPropagation();
e.preventDefault();
}
- };
+ }
@action
onContextMenu = (e: React.MouseEvent): void => {
@@ -420,14 +354,14 @@ export class DocumentView extends React.Component<DocumentViewProps> {
});
ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
SelectionManager.SelectDoc(this, e.ctrlKey);
- };
+ }
isMinimized = () => {
let field = this.props.Document.GetT(KeyStore.Minimized, BooleanField);
if (field && field !== FieldWaiting) {
return field.Data;
}
- };
+ }
@action
expand = () => {
@@ -436,15 +370,25 @@ export class DocumentView extends React.Component<DocumentViewProps> {
false as boolean,
BooleanField
);
- };
+ }
- isSelected = () => {
- return SelectionManager.IsSelected(this);
- };
+ isSelected = () => SelectionManager.IsSelected(this);
select = (ctrlPressed: boolean) => {
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() {
+ return (<DocumentContentsView
+ {...this.props}
+ isSelected={this.isSelected}
+ select={this.select}
+ layoutKey={KeyStore.Layout}
+ />);
+ }
render() {
if (!this.props.Document) {
@@ -452,8 +396,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
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 (
@@ -489,12 +433,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
onContextMenu={this.onContextMenu}
onPointerDown={this.onPointerDown}
>
- <DocumentContentsView
- {...this.props}
- isSelected={this.isSelected}
- select={this.select}
- layoutKey={KeyStore.Layout}
- />
+ {this.contents}
</div>
);
}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 4e83ec7b9..40b44aae5 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -1,4 +1,4 @@
-import React = require("react")
+import React = require("react");
import { observer } from "mobx-react";
import { computed } from "mobx";
import { Field, FieldWaiting, FieldValue } from "../../../fields/Field";
@@ -7,7 +7,7 @@ import { TextField } from "../../../fields/TextField";
import { NumberField } from "../../../fields/NumberField";
import { RichTextField } from "../../../fields/RichTextField";
import { ImageField } from "../../../fields/ImageField";
-import { VideoField } from "../../../fields/VideoField"
+import { VideoField } from "../../../fields/VideoField";
import { Key } from "../../../fields/Key";
import { FormattedTextBox } from "./FormattedTextBox";
import { ImageBox } from "./ImageBox";
@@ -19,6 +19,7 @@ import { ListField } from "../../../fields/ListField";
import { DocumentContentsView } from "./DocumentContentsView";
import { Transform } from "../../util/Transform";
import { KeyStore } from "../../../fields/KeyStore";
+import { returnFalse, emptyFunction } from "../../../Utils";
//
@@ -28,80 +29,89 @@ import { KeyStore } from "../../../fields/KeyStore";
//
export interface FieldViewProps {
fieldKey: Key;
- doc: Document;
+ Document: Document;
isSelected: () => boolean;
- select: () => void;
+ select: (isCtrlPressed: boolean) => void;
isTopMost: boolean;
selectOnLoad: boolean;
- bindings: any;
+ addDocument?: (document: Document, allowDuplicates?: boolean) => boolean;
+ removeDocument?: (document: Document) => boolean;
+ moveDocument?: (document: Document, targetCollection: Document, addDocument: (document: Document) => boolean) => boolean;
+ ScreenToLocalTransform: () => Transform;
+ active: () => boolean;
+ onActiveChanged: (isActive: boolean) => void;
+ focus: (doc: Document) => void;
}
@observer
export class FieldView extends React.Component<FieldViewProps> {
public static LayoutString(fieldType: { name: string }, fieldStr: string = "DataKey") {
- return `<${fieldType.name} doc={Document} DocumentViewForField={DocumentView} bindings={bindings} fieldKey={${fieldStr}} isSelected={isSelected} select={select} selectOnLoad={SelectOnLoad} isTopMost={isTopMost} />`;
+ return `<${fieldType.name} {...props} fieldKey={${fieldStr}} />`;
}
@computed
get field(): FieldValue<Field> {
- const { doc, fieldKey } = this.props;
+ const { Document: doc, fieldKey } = this.props;
return doc.Get(fieldKey);
}
render() {
const field = this.field;
if (!field) {
- return <p>{'<null>'}</p>
+ return <p>{'<null>'}</p>;
}
if (field instanceof TextField) {
- return <p>{field.Data}</p>
+ return <p>{field.Data}</p>;
}
else if (field instanceof RichTextField) {
- return <FormattedTextBox {...this.props} />
+ return <FormattedTextBox {...this.props} />;
}
else if (field instanceof ImageField) {
- return <ImageBox {...this.props} />
+ return <ImageBox {...this.props} />;
}
else if (field instanceof VideoField) {
- return <VideoBox {...this.props} />
+ return <VideoBox {...this.props} />;
}
else if (field instanceof AudioField) {
- return <AudioBox {...this.props} />
+ return <AudioBox {...this.props} />;
}
else if (field instanceof Document) {
- return (<DocumentContentsView Document={field}
- AddDocument={undefined}
- RemoveDocument={undefined}
- ScreenToLocalTransform={() => Transform.Identity}
- ContentScaling={() => 1}
- PanelWidth={() => 100}
- PanelHeight={() => 100}
- isTopMost={true}
- SelectOnLoad={false}
- focus={() => { }}
- isSelected={() => false}
- select={() => false}
- layoutKey={KeyStore.Layout}
- ContainingCollectionView={undefined} />)
+ return (
+ <DocumentContentsView Document={field}
+ addDocument={undefined}
+ removeDocument={undefined}
+ ScreenToLocalTransform={Transform.Identity}
+ ContentScaling={() => 1}
+ PanelWidth={() => 100}
+ PanelHeight={() => 100}
+ isTopMost={true} //TODO Why is this top most?
+ selectOnLoad={false}
+ focus={emptyFunction}
+ isSelected={returnFalse}
+ select={returnFalse}
+ layoutKey={KeyStore.Layout}
+ ContainingCollectionView={undefined}
+ parentActive={this.props.active}
+ onActiveChanged={this.props.onActiveChanged} />
+ );
}
else if (field instanceof ListField) {
return (<div>
- {(field as ListField<Field>).Data.map(f => {
- return f instanceof Document ? f.Title : f.GetValue().toString();
- }).join(", ")}
- </div>)
+ {(field as ListField<Field>).Data.map(f => f instanceof Document ? f.Title : f.GetValue().toString()).join(", ")}
+ </div>);
}
// bcz: this belongs here, but it doesn't render well so taking it out for now
// else if (field instanceof HtmlField) {
// return <WebBox {...this.props} />
// }
else if (field instanceof NumberField) {
- return <p>{field.Data}</p>
+ return <p>{field.Data}</p>;
}
- else if (field != FieldWaiting) {
- return <p>{JSON.stringify(field.GetValue())}</p>
+ else if (field !== FieldWaiting) {
+ return <p>{JSON.stringify(field.GetValue())}</p>;
+ }
+ else {
+ return <p> {"Waiting for server..."} </p>;
}
- else
- return <p> {"Waiting for server..."} </p>
}
} \ No newline at end of file
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 fdb1b97be..08f94c820 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";
@@ -34,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);
}
@@ -42,6 +46,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
private _editorView: Opt<EditorView>;
private _reactionDisposer: Opt<IReactionDisposer>;
private _inputReactionDisposer: Opt<IReactionDisposer>;
+ private _proxyReactionDisposer: Opt<IReactionDisposer>;
constructor(props: FieldViewProps) {
super(props);
@@ -54,23 +59,20 @@ 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
);
// doc.SetData(fieldKey, JSON.stringify(state.toJSON()), RichTextField);
}
- };
-
- get FieldDoc() { return this.props.fieldKey === KeyStore.Archives ? Main.Instance._textDoc! : this.props.doc; }
- 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: [
+ plugins: this.props.isOverlay ? [
history(),
keymap({ "Mod-z": undo, "Mod-y": redo }),
keymap(baseKeymap),
@@ -80,24 +82,32 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
attributes: { class: "ProseMirror-example-setup-style" }
}
})
- ]
+ ] : [
+ history(),
+ keymap({ "Mod-z": undo, "Mod-y": redo }),
+ keymap(baseKeymap),
+ ]
};
- if (this.props.fieldKey === KeyStore.Archives) {
+ if (this.props.isOverlay) {
this._inputReactionDisposer = reaction(() => Main.Instance._textDoc && Main.Instance._textDoc.Id,
() => {
- if (this._editorView)
- this._editorView!.destroy();
+ if (this._editorView) {
+ this._editorView.destroy();
+ }
this.setupEditor(config);
}
- )
+ );
+ } else {
+ this._proxyReactionDisposer = reaction(() => this.props.isSelected(),
+ () => 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.GetT(this.FieldKey, RichTextField);
- return field && field != FieldWaiting ? field.Data : undefined;
+ const field = this.props.Document ? this.props.Document.GetT(this.props.fieldKey, RichTextField) : undefined;
+ return field && field !== FieldWaiting ? field.Data : undefined;
},
field => {
if (field && this._editorView) {
@@ -111,10 +121,9 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
}
private setupEditor(config: any) {
-
let state: EditorState;
- let field = this.FieldDoc.GetT(this.FieldKey, RichTextField);
- if (field && field != FieldWaiting && field.Data) {
+ 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 {
state = EditorState.create(config);
@@ -127,7 +136,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
}
if (this.props.selectOnLoad) {
- this.props.select();
+ this.props.select(false);
this._editorView!.focus();
}
}
@@ -142,6 +151,9 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
if (this._inputReactionDisposer) {
this._inputReactionDisposer();
}
+ if (this._proxyReactionDisposer) {
+ this._proxyReactionDisposer();
+ }
}
shouldComponentUpdate() {
@@ -150,30 +162,35 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
@action
onChange(e: React.ChangeEvent<HTMLInputElement>) {
- const { fieldKey, doc } = this.props;
- doc.SetOnPrototype(fieldKey, new RichTextField(e.target.value));
+ const { fieldKey, Document } = this.props;
+ Document.SetOnPrototype(fieldKey, new RichTextField(e.target.value));
// doc.SetData(fieldKey, e.target.value, RichTextField);
}
onPointerDown = (e: React.PointerEvent): void => {
- if (e.buttons === 1 && this.props.isSelected() && !e.altKey) {
+ console.log("pointer down");
+ if (e.button === 1 && this.props.isSelected() && !e.altKey && !e.ctrlKey && !e.metaKey) {
+ console.log("first");
e.stopPropagation();
}
- if (e.buttons === 1 && this.props.fieldKey !== KeyStore.Archives)
+ if (e.button === 2) {
+ console.log("second");
e.preventDefault();
- };
+ }
+ }
onPointerUp = (e: React.PointerEvent): void => {
+ console.log("pointer up");
if (e.buttons === 1 && this.props.isSelected() && !e.altKey) {
e.stopPropagation();
}
- if (this.props.fieldKey !== KeyStore.Archives) {
- e.preventDefault();
- Main.Instance.SetTextDoc(this.props.doc, this._ref.current!);
- }
- };
+ }
onFocused = (e: React.FocusEvent): void => {
- if (this.props.fieldKey !== KeyStore.Archives) {
- Main.Instance.SetTextDoc(this.props.doc, this._ref.current!);
+ 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;
+ }
}
}
@@ -198,16 +215,17 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
// ]
// })
// e.stopPropagation()
- };
+ }
onPointerWheel = (e: React.WheelEvent): void => {
e.stopPropagation();
- };
+ }
tooltipMenuPlugin() {
+ let myprops = this.props;
return new Plugin({
view(_editorView) {
- return new TooltipTextMenu(_editorView);
+ return new TooltipTextMenu(_editorView, myprops);
}
});
}
@@ -220,9 +238,11 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
render() {
return (
<div
- className="formattedTextBox-cont"
+ className={`formattedTextBox-cont`}
+ style={{ overflow: "visible" }}
onKeyDown={this.onKeyPress}
onKeyPress={this.onKeyPress}
+ onFocus={this.onFocused}
onPointerUp={this.onPointerUp}
onPointerDown={this.onPointerDown}
onContextMenu={this.specificContextMenu}
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 60d1f7214..6b0a3a799 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -9,13 +9,13 @@ import { KeyStore } from '../../../fields/KeyStore';
import { ContextMenu } from "../../views/ContextMenu";
import { FieldView, FieldViewProps } from './FieldView';
import "./ImageBox.scss";
-import React = require("react")
+import React = require("react");
import { Utils } from '../../../Utils';
@observer
export class ImageBox extends React.Component<FieldViewProps> {
- public static LayoutString() { return FieldView.LayoutString(ImageBox) }
+ public static LayoutString() { return FieldView.LayoutString(ImageBox); }
private _ref: React.RefObject<HTMLDivElement>;
private _imgRef: React.RefObject<HTMLImageElement>;
private _downX: number = 0;
@@ -39,7 +39,7 @@ export class ImageBox extends React.Component<FieldViewProps> {
onLoad = (target: any) => {
var h = this._imgRef.current!.naturalHeight;
var w = this._imgRef.current!.naturalWidth;
- this.props.doc.SetNumber(KeyStore.NativeHeight, this.props.doc.GetNumber(KeyStore.NativeWidth, 0) * h / w)
+ this.props.Document.SetNumber(KeyStore.NativeHeight, this.props.Document.GetNumber(KeyStore.NativeWidth, 0) * h / w);
}
componentDidMount() {
@@ -86,31 +86,31 @@ export class ImageBox extends React.Component<FieldViewProps> {
onMoveNextRequest={action(() =>
this._photoIndex = (this._photoIndex + 1) % images.length
)}
- />)
+ />);
}
}
specificContextMenu = (e: React.MouseEvent): void => {
- let field = this.props.doc.GetT(this.props.fieldKey, ImageField);
+ let field = this.props.Document.GetT(this.props.fieldKey, ImageField);
if (field && field !== FieldWaiting) {
let url = field.Data.href;
ContextMenu.Instance.addItem({
description: "Copy path", event: () => {
- Utils.CopyText(url)
+ Utils.CopyText(url);
}
});
}
}
render() {
- let field = this.props.doc.Get(this.props.fieldKey);
- let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
+ let field = this.props.Document.Get(this.props.fieldKey);
+ let path = field === FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
- let nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 1);
+ let nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 1);
return (
<div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} onContextMenu={this.specificContextMenu}>
<img src={path} width={nativeWidth} alt="Image not found" ref={this._imgRef} onLoad={this.onLoad} />
{this.lightbox(path)}
- </div>)
+ </div>);
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index 9bd6c1052..bcac113f0 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -7,7 +7,7 @@ import { KeyStore } from '../../../fields/KeyStore';
import { FieldView, FieldViewProps } from './FieldView';
import "./KeyValueBox.scss";
import { KeyValuePair } from "./KeyValuePair";
-import React = require("react")
+import React = require("react");
import { CompileScript, ToField } from "../../util/Scripting";
import { Key } from '../../../fields/Key';
import { observable, action } from "mobx";
@@ -15,7 +15,7 @@ import { observable, action } from "mobx";
@observer
export class KeyValueBox extends React.Component<FieldViewProps> {
- public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) }
+ public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr); }
@observable private _keyInput: string = "";
@observable private _valueInput: string = "";
@@ -32,11 +32,11 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
@action
onEnterKey = (e: React.KeyboardEvent): void => {
- if (e.key == 'Enter') {
+ if (e.key === 'Enter') {
if (this._keyInput && this._valueInput) {
- let doc = this.props.doc.GetT(KeyStore.Data, Document);
- if (!doc || doc == FieldWaiting) {
- return
+ let doc = this.props.Document.GetT(KeyStore.Data, Document);
+ if (!doc || doc === FieldWaiting) {
+ return;
}
let realDoc = doc;
@@ -55,8 +55,8 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
realDoc.Set(new Key(this._keyInput), dataField);
}
}
- this._keyInput = ""
- this._valueInput = ""
+ this._keyInput = "";
+ this._valueInput = "";
}
}
}
@@ -71,9 +71,9 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
}
createTable = () => {
- let doc = this.props.doc.GetT(KeyStore.Data, Document);
- if (!doc || doc == FieldWaiting) {
- return <tr><td>Loading...</td></tr>
+ let doc = this.props.Document.GetT(KeyStore.Data, Document);
+ if (!doc || doc === FieldWaiting) {
+ return <tr><td>Loading...</td></tr>;
}
let realDoc = doc;
@@ -84,13 +84,13 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
if (!(key in ids)) {
ids[key] = key;
}
- })
+ });
}
let rows: JSX.Element[] = [];
let i = 0;
for (let key in ids) {
- rows.push(<KeyValuePair doc={realDoc} rowStyle={"keyValueBox-" + (i++ % 2 ? "oddRow" : "evenRow")} fieldId={key} key={key} />)
+ rows.push(<KeyValuePair doc={realDoc} rowStyle={"keyValueBox-" + (i++ % 2 ? "oddRow" : "evenRow")} fieldId={key} key={key} />);
}
return rows;
}
@@ -105,14 +105,13 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
this._valueInput = e.currentTarget.value;
}
- newKeyValue = () => {
- return (
+ newKeyValue = () =>
+ (
<tr>
<td><input type="text" value={this._keyInput} placeholder="Key" onChange={this.keyChanged} /></td>
<td><input type="text" value={this._valueInput} placeholder="Value" onChange={this.valueChanged} onKeyPress={this.onEnterKey} /></td>
</tr>
)
- }
render() {
return (<div className="keyValueBox-cont" onWheel={this.onPointerWheel}>
@@ -126,6 +125,6 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
{this.newKeyValue()}
</tbody>
</table>
- </div>)
+ </div>);
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 5647f45bf..a1050dc6e 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -1,16 +1,18 @@
import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
import "./KeyValueBox.scss";
import "./KeyValuePair.scss";
-import React = require("react")
+import React = require("react");
import { FieldViewProps, FieldView } from './FieldView';
import { Opt, Field } from '../../../fields/Field';
-import { observer } from "mobx-react"
+import { observer } from "mobx-react";
import { observable, action } from 'mobx';
import { Document } from '../../../fields/Document';
import { Key } from '../../../fields/Key';
-import { Server } from "../../Server"
+import { Server } from "../../Server";
import { EditableView } from "../EditableView";
import { CompileScript, ToField } from "../../util/Scripting";
+import { Transform } from '../../util/Transform';
+import { returnFalse, emptyFunction } from '../../../Utils';
// Represents one row in a key value plane
@@ -23,7 +25,7 @@ export interface KeyValuePairProps {
export class KeyValuePair extends React.Component<KeyValuePairProps> {
@observable
- private key: Opt<Key>
+ private key: Opt<Key>;
constructor(props: KeyValuePairProps) {
super(props);
@@ -39,18 +41,21 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
render() {
if (!this.key) {
- return <tr><td>error</td><td></td></tr>
+ return <tr><td>error</td><td></td></tr>;
}
let props: FieldViewProps = {
- doc: this.props.doc,
+ Document: this.props.doc,
fieldKey: this.key,
- isSelected: () => false,
- select: () => { },
+ isSelected: returnFalse,
+ select: emptyFunction,
isTopMost: false,
- bindings: {},
selectOnLoad: false,
- }
+ active: returnFalse,
+ onActiveChanged: emptyFunction,
+ ScreenToLocalTransform: Transform.Identity,
+ focus: emptyFunction,
+ };
let contents = (
<FieldView {...props} />
);
@@ -61,15 +66,15 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
<div className="container">
<div>{this.key.Name}</div>
<button className="delete" onClick={() => {
- let field = props.doc.Get(props.fieldKey);
+ let field = props.Document.Get(props.fieldKey);
if (field && field instanceof Field) {
- props.doc.Set(props.fieldKey, undefined);
+ props.Document.Set(props.fieldKey, undefined);
}
}}>X</button>
</div>
</td>
<td><EditableView contents={contents} height={36} GetValue={() => {
- let field = props.doc.Get(props.fieldKey);
+ let field = props.Document.Get(props.fieldKey);
if (field && field instanceof Field) {
return field.ToScriptString();
}
@@ -84,18 +89,18 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
if (!res.success) return false;
const field = res.result;
if (field instanceof Field) {
- props.doc.Set(props.fieldKey, field);
+ props.Document.Set(props.fieldKey, field);
return true;
} else {
let dataField = ToField(field);
if (dataField) {
- props.doc.Set(props.fieldKey, dataField);
+ props.Document.Set(props.fieldKey, dataField);
return true;
}
}
return false;
}}></EditableView></td>
</tr>
- )
+ );
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index e81f8fec7..b016a3d48 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -2,8 +2,8 @@ import { observable, computed, action } from "mobx";
import React = require("react");
import { SelectionManager } from "../../util/SelectionManager";
import { observer } from "mobx-react";
-import './LinkBox.scss'
-import { KeyStore } from '../../../fields/KeyStore'
+import './LinkBox.scss';
+import { KeyStore } from '../../../fields/KeyStore';
import { props } from "bluebird";
import { DocumentView } from "./DocumentView";
import { Document } from "../../../fields/Document";
@@ -30,7 +30,7 @@ interface Props {
linkName: String;
pairedDoc: Document;
type: String;
- showEditor: () => void
+ showEditor: () => void;
}
@observer
@@ -49,15 +49,16 @@ export class LinkBox extends React.Component<Props> {
} else if (contextDoc instanceof Document) {
this.props.pairedDoc.GetTAsync(KeyStore.Page, NumberField).then((pfield: any) => {
contextDoc.GetTAsync(KeyStore.CurPage, NumberField).then((cfield: any) => {
- if (pfield != cfield)
+ if (pfield !== cfield) {
contextDoc.SetNumber(KeyStore.CurPage, pfield.Data);
+ }
let contextView = DocumentManager.Instance.getDocumentView(contextDoc);
if (contextView) {
contextView.props.focus(contextDoc);
} else {
CollectionDockingView.Instance.AddRightSplit(contextDoc);
}
- })
+ });
});
}
});
@@ -80,7 +81,7 @@ export class LinkBox extends React.Component<Props> {
if (field) {
field.Data.splice(field.Data.indexOf(this.props.linkDoc));
}
- })
+ });
}
});
this.props.linkDoc.GetTAsync(KeyStore.LinkedToDocs, Document, field => {
@@ -89,7 +90,7 @@ export class LinkBox extends React.Component<Props> {
if (field) {
field.Data.splice(field.Data.indexOf(this.props.linkDoc));
}
- })
+ });
}
});
}
@@ -117,6 +118,6 @@ export class LinkBox extends React.Component<Props> {
<FontAwesomeIcon className="fa-icon-delete" icon="times" size="sm" /></div>
</div>
</div>
- )
+ );
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/LinkEditor.tsx b/src/client/views/nodes/LinkEditor.tsx
index 3f7b4bf2d..bde50fed8 100644
--- a/src/client/views/nodes/LinkEditor.tsx
+++ b/src/client/views/nodes/LinkEditor.tsx
@@ -2,8 +2,8 @@ import { observable, computed, action } from "mobx";
import React = require("react");
import { SelectionManager } from "../../util/SelectionManager";
import { observer } from "mobx-react";
-import './LinkEditor.scss'
-import { KeyStore } from '../../../fields/KeyStore'
+import './LinkEditor.scss';
+import { KeyStore } from '../../../fields/KeyStore';
import { props } from "bluebird";
import { DocumentView } from "./DocumentView";
import { Document } from "../../../fields/Document";
@@ -43,7 +43,7 @@ export class LinkEditor extends React.Component<Props> {
<div className="save-button" onPointerDown={this.onSaveButtonPressed}>SAVE</div>
</div>
- )
+ );
}
@action
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 5eeb40772..ac09da305 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -13,7 +13,7 @@ import React = require("react");
interface Props {
docView: DocumentView;
- changeFlyout: () => void
+ changeFlyout: () => void;
}
@observer
@@ -24,10 +24,10 @@ export class LinkMenu extends React.Component<Props> {
renderLinkItems(links: Document[], key: Key, type: string) {
return links.map(link => {
let doc = link.GetT(key, Document);
- if (doc && doc != FieldWaiting) {
- return <LinkBox key={doc.Id} linkDoc={link} linkName={link.Title} pairedDoc={doc} showEditor={action(() => this._editingLink = link)} type={type} />
+ if (doc && doc !== FieldWaiting) {
+ return <LinkBox key={doc.Id} linkDoc={link} linkName={link.Title} pairedDoc={doc} showEditor={action(() => this._editingLink = link)} type={type} />;
}
- })
+ });
}
render() {
@@ -43,11 +43,11 @@ export class LinkMenu extends React.Component<Props> {
{this.renderLinkItems(linkFrom, KeyStore.LinkedFromDocs, "Source: ")}
</div>
</div>
- )
+ );
} else {
return (
<LinkEditor linkDoc={this._editingLink} showLinks={action(() => this._editingLink = undefined)}></LinkEditor>
- )
+ );
}
}
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 7039b0c41..81ceb37f6 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -17,7 +17,7 @@ import { FieldView, FieldViewProps } from './FieldView';
import "./ImageBox.scss";
import "./PDFBox.scss";
import { Sticky } from './Sticky'; //you should look at sticky and annotation, because they are used here
-import React = require("react")
+import React = require("react");
import { SelectionManager } from "../../util/SelectionManager";
/** ALSO LOOK AT: Annotation.tsx, Sticky.tsx
@@ -55,7 +55,7 @@ import { SelectionManager } from "../../util/SelectionManager";
export class PDFBox extends React.Component<FieldViewProps> {
public static LayoutString() { return FieldView.LayoutString(PDFBox); }
- private _mainDiv = React.createRef<HTMLDivElement>()
+ private _mainDiv = React.createRef<HTMLDivElement>();
private _pdf = React.createRef<HTMLCanvasElement>();
@observable private _renderAsSvg = true;
@@ -72,7 +72,7 @@ export class PDFBox extends React.Component<FieldViewProps> {
private _currTool: any; //keeps track of current tool button reference
private _drawToolOn: boolean = false; //boolean that keeps track of the drawing tool
- private _drawTool = React.createRef<HTMLButtonElement>()//drawing tool button reference
+ private _drawTool = React.createRef<HTMLButtonElement>();//drawing tool button reference
private _colorTool = React.createRef<HTMLButtonElement>(); //color button reference
private _currColor: string = "black"; //current color that user selected (for ink/pen)
@@ -85,18 +85,18 @@ export class PDFBox extends React.Component<FieldViewProps> {
@observable private _perPageInfo: Object[] = []; //stores pageInfo
@observable private _pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno
- @observable private _currAnno: any = []
+ @observable private _currAnno: any = [];
@observable private _interactive: boolean = false;
@observable private _loaded: boolean = false;
- @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, 1); }
- @computed private get thumbnailPage() { return this.props.doc.GetNumber(KeyStore.ThumbnailPage, -1); }
+ @computed private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, 1); }
+ @computed private get thumbnailPage() { return this.props.Document.GetNumber(KeyStore.ThumbnailPage, -1); }
componentDidMount() {
this._reactionDisposer = reaction(
() => [SelectionManager.SelectedDocuments().slice()],
() => {
- if (this.curPage > 0 && this.thumbnailPage > 0 && this.curPage != this.thumbnailPage && !this.props.isSelected()) {
+ if (this.curPage > 0 && this.thumbnailPage > 0 && this.curPage !== this.thumbnailPage && !this.props.isSelected()) {
this.saveThumbnail();
this._interactive = true;
}
@@ -167,25 +167,25 @@ export class PDFBox extends React.Component<FieldViewProps> {
let obj: Object = { parentDivs: [], spans: [] };
//@ts-ignore
- if (range.commonAncestorContainer.className == 'react-pdf__Page__textContent') { //multiline highlighting case
- obj = this.highlightNodes(range.commonAncestorContainer.childNodes)
+ if (range.commonAncestorContainer.className === 'react-pdf__Page__textContent') { //multiline highlighting case
+ obj = this.highlightNodes(range.commonAncestorContainer.childNodes);
} else { //single line highlighting case
- let parentDiv = range.commonAncestorContainer.parentElement
+ let parentDiv = range.commonAncestorContainer.parentElement;
if (parentDiv) {
- if (parentDiv.className == 'react-pdf__Page__textContent') { //when highlight is overwritten
- obj = this.highlightNodes(parentDiv.childNodes)
+ if (parentDiv.className === 'react-pdf__Page__textContent') { //when highlight is overwritten
+ obj = this.highlightNodes(parentDiv.childNodes);
} else {
parentDiv.childNodes.forEach((child) => {
- if (child.nodeName == 'SPAN') {
+ if (child.nodeName === 'SPAN') {
//@ts-ignore
- obj.parentDivs.push(parentDiv)
+ obj.parentDivs.push(parentDiv);
//@ts-ignore
- child.id = "highlighted"
+ child.id = "highlighted";
//@ts-ignore
- obj.spans.push(child)
+ obj.spans.push(child);
child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler
}
- })
+ });
}
}
}
@@ -196,21 +196,21 @@ export class PDFBox extends React.Component<FieldViewProps> {
}
highlightNodes = (nodes: NodeListOf<ChildNode>) => {
- let temp = { parentDivs: [], spans: [] }
+ let temp = { parentDivs: [], spans: [] };
nodes.forEach((div) => {
div.childNodes.forEach((child) => {
- if (child.nodeName == 'SPAN') {
+ if (child.nodeName === 'SPAN') {
//@ts-ignore
- temp.parentDivs.push(div)
+ temp.parentDivs.push(div);
//@ts-ignore
- child.id = "highlighted"
+ child.id = "highlighted";
//@ts-ignore
- temp.spans.push(child)
+ temp.spans.push(child);
child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler
}
- })
+ });
- })
+ });
return temp;
}
@@ -223,29 +223,29 @@ export class PDFBox extends React.Component<FieldViewProps> {
let index: any;
this._pageInfo.divs.forEach((obj: any) => {
obj.spans.forEach((element: any) => {
- if (element == span) {
+ if (element === span) {
if (!index) {
index = this._pageInfo.divs.indexOf(obj);
}
}
- })
- })
+ });
+ });
if (this._pageInfo.anno.length >= index + 1) {
- if (this._currAnno.length == 0) {
+ if (this._currAnno.length === 0) {
this._currAnno.push(this._pageInfo.anno[index]);
}
} else {
- if (this._currAnno.length == 0) { //if there are no current annotation
+ if (this._currAnno.length === 0) { //if there are no current annotation
let div = span.offsetParent;
//@ts-ignore
- let divX = div.style.left
+ let divX = div.style.left;
//@ts-ignore
- let divY = div.style.top
+ let divY = div.style.top;
//slicing "px" from the end
divX = divX.slice(0, divX.length - 2); //gets X of the DIV element (parent of Span)
divY = divY.slice(0, divY.length - 2); //gets Y of the DIV element (parent of Span)
- let annotation = <Annotation key={Utils.GenerateGuid()} Span={span} X={divX} Y={divY - 300} Highlights={this._pageInfo.divs} Annotations={this._pageInfo.anno} CurrAnno={this._currAnno} />
+ let annotation = <Annotation key={Utils.GenerateGuid()} Span={span} X={divX} Y={divY - 300} Highlights={this._pageInfo.divs} Annotations={this._pageInfo.anno} CurrAnno={this._currAnno} />;
this._pageInfo.anno.push(annotation);
this._currAnno.push(annotation);
}
@@ -263,7 +263,7 @@ export class PDFBox extends React.Component<FieldViewProps> {
this.makeEditableAndHighlight(color);
}
} catch (ex) {
- this.makeEditableAndHighlight(color)
+ this.makeEditableAndHighlight(color);
}
}
}
@@ -305,7 +305,7 @@ export class PDFBox extends React.Component<FieldViewProps> {
}
if (this._mainDiv.current) {
- let sticky = <Sticky key={Utils.GenerateGuid()} Height={height} Width={width} X={this.initX} Y={this.initY} />
+ let sticky = <Sticky key={Utils.GenerateGuid()} Height={height} Width={width} X={this.initX} Y={this.initY} />;
this._pageInfo.area.push(sticky);
}
this._toolOn = false;
@@ -317,7 +317,7 @@ export class PDFBox extends React.Component<FieldViewProps> {
* starts drawing the line when user presses down.
*/
onDraw = () => {
- if (this._currTool != null) {
+ if (this._currTool !== null) {
this._currTool.style.backgroundColor = "grey";
}
@@ -342,13 +342,13 @@ export class PDFBox extends React.Component<FieldViewProps> {
* for changing color (for ink/pen)
*/
onColorChange = (e: React.PointerEvent) => {
- if (e.currentTarget.innerHTML == "Red") {
+ if (e.currentTarget.innerHTML === "Red") {
this._currColor = "red";
- } else if (e.currentTarget.innerHTML == "Blue") {
+ } else if (e.currentTarget.innerHTML === "Blue") {
this._currColor = "blue";
- } else if (e.currentTarget.innerHTML == "Green") {
+ } else if (e.currentTarget.innerHTML === "Green") {
this._currColor = "green";
- } else if (e.currentTarget.innerHTML == "Black") {
+ } else if (e.currentTarget.innerHTML === "Black") {
this._currColor = "black";
}
@@ -360,7 +360,7 @@ export class PDFBox extends React.Component<FieldViewProps> {
*/
onHighlight = () => {
this._drawToolOn = false;
- if (this._currTool != null) {
+ if (this._currTool !== null) {
this._currTool.style.backgroundColor = "grey";
}
if (this._highlightTool.current) {
@@ -381,12 +381,12 @@ export class PDFBox extends React.Component<FieldViewProps> {
this._renderAsSvg = false;
setTimeout(() => {
var me = this;
- let nwidth = me.props.doc.GetNumber(KeyStore.NativeWidth, 0);
- let nheight = me.props.doc.GetNumber(KeyStore.NativeHeight, 0);
+ let nwidth = me.props.Document.GetNumber(KeyStore.NativeWidth, 0);
+ let nheight = me.props.Document.GetNumber(KeyStore.NativeHeight, 0);
htmlToImage.toPng(this._mainDiv.current!, { width: nwidth, height: nheight, quality: 1 })
.then(action((dataUrl: string) => {
- me.props.doc.SetData(KeyStore.Thumbnail, new URL(dataUrl), ImageField);
- me.props.doc.SetNumber(KeyStore.ThumbnailPage, me.props.doc.GetNumber(KeyStore.CurPage, -1));
+ me.props.Document.SetData(KeyStore.Thumbnail, new URL(dataUrl), ImageField);
+ me.props.Document.SetNumber(KeyStore.ThumbnailPage, me.props.Document.GetNumber(KeyStore.CurPage, -1));
me._renderAsSvg = true;
}))
.catch(function (error: any) {
@@ -399,24 +399,24 @@ export class PDFBox extends React.Component<FieldViewProps> {
onLoaded = (page: any) => {
if (this._mainDiv.current) {
this._mainDiv.current.childNodes.forEach((element) => {
- if (element.nodeName == "DIV") {
+ if (element.nodeName === "DIV") {
element.childNodes[0].childNodes.forEach((e) => {
if (e instanceof HTMLCanvasElement) {
this._pdfCanvas = e;
- this._pdfContext = e.getContext("2d")
+ this._pdfContext = e.getContext("2d");
}
- })
+ });
}
- })
+ });
}
// bcz: the number of pages should really be set when the document is imported.
- this.props.doc.SetNumber(KeyStore.NumPages, page._transport.numPages);
- if (this._perPageInfo.length == 0) { //Makes sure it only runs once
- this._perPageInfo = [...Array(page._transport.numPages)]
+ this.props.Document.SetNumber(KeyStore.NumPages, page._transport.numPages);
+ if (this._perPageInfo.length === 0) { //Makes sure it only runs once
+ this._perPageInfo = [...Array(page._transport.numPages)];
}
this._loaded = true;
}
@@ -426,11 +426,11 @@ export class PDFBox extends React.Component<FieldViewProps> {
// bcz: the nativeHeight should really be set when the document is imported.
// also, the native dimensions could be different for different pages of the PDF
// so this design is flawed.
- var nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 0);
- if (!this.props.doc.GetNumber(KeyStore.NativeHeight, 0)) {
+ var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
+ if (!this.props.Document.GetNumber(KeyStore.NativeHeight, 0)) {
var nativeHeight = nativeWidth * r.entry.height / r.entry.width;
- this.props.doc.SetNumber(KeyStore.Height, nativeHeight / nativeWidth * this.props.doc.GetNumber(KeyStore.Width, 0));
- this.props.doc.SetNumber(KeyStore.NativeHeight, nativeHeight);
+ this.props.Document.SetNumber(KeyStore.Height, nativeHeight / nativeWidth * this.props.Document.GetNumber(KeyStore.Width, 0));
+ this.props.Document.SetNumber(KeyStore.NativeHeight, nativeHeight);
}
}
@@ -438,8 +438,8 @@ export class PDFBox extends React.Component<FieldViewProps> {
get pdfContent() {
let page = this.curPage;
const renderHeight = 2400;
- let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField);
- let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight;
+ let pdfUrl = this.props.Document.GetT(this.props.fieldKey, PDFField);
+ let xf = this.props.Document.GetNumber(KeyStore.NativeHeight, 0) / renderHeight;
return <div className="pdfBox-contentContainer" key="container" style={{ transform: `scale(${xf}, ${xf})` }}>
<Document file={window.origin + RouteStore.corsProxy + `/${pdfUrl}`} renderMode={this._renderAsSvg ? "svg" : ""}>
<Measure onResize={this.setScaling}>
@@ -456,8 +456,8 @@ export class PDFBox extends React.Component<FieldViewProps> {
@computed
get pdfRenderer() {
let proxy = this._loaded ? (null) : this.imageProxyRenderer;
- let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField);
- if ((!this._interactive && proxy) || !pdfUrl || pdfUrl == FieldWaiting) {
+ let pdfUrl = this.props.Document.GetT(this.props.fieldKey, PDFField);
+ if ((!this._interactive && proxy) || !pdfUrl || pdfUrl === FieldWaiting) {
return proxy;
}
return [
@@ -470,9 +470,9 @@ export class PDFBox extends React.Component<FieldViewProps> {
@computed
get imageProxyRenderer() {
- let thumbField = this.props.doc.Get(KeyStore.Thumbnail);
+ let thumbField = this.props.Document.Get(KeyStore.Thumbnail);
if (thumbField) {
- let path = thumbField == FieldWaiting || this.thumbnailPage != this.curPage ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
+ let path = thumbField === FieldWaiting || this.thumbnailPage !== this.curPage ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
thumbField instanceof ImageField ? thumbField.Data.href : "http://cs.brown.edu/people/bcz/prairie.jpg";
return <img src={path} width="100%" />;
}
diff --git a/src/client/views/nodes/Sticky.tsx b/src/client/views/nodes/Sticky.tsx
index 4a4d69e90..11719831b 100644
--- a/src/client/views/nodes/Sticky.tsx
+++ b/src/client/views/nodes/Sticky.tsx
@@ -39,7 +39,7 @@ export class Sticky extends React.Component<IProps> {
document.addEventListener("pointermove", this.drawMove);
document.addEventListener("pointerup", this.drawUp);
}
- };
+ }
//when user drags
drawMove = (e: PointerEvent): void => {
@@ -49,7 +49,7 @@ export class Sticky extends React.Component<IProps> {
//connects the point
this.ctx.lineTo(x, y);
this.ctx.stroke();
- };
+ }
/**
* when user lifts the mouse, the drawing ends
@@ -58,7 +58,7 @@ export class Sticky extends React.Component<IProps> {
this.ctx.closePath();
console.log(this.ctx);
document.removeEventListener("pointermove", this.drawMove);
- };
+ }
render() {
return (
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 7c0db83a8..9d7c2bc56 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -1,4 +1,4 @@
-import React = require("react")
+import React = require("react");
import { observer } from "mobx-react";
import { FieldWaiting, Opt } from '../../../fields/Field';
import { VideoField } from '../../../fields/VideoField';
@@ -13,14 +13,14 @@ import { number } from "prop-types";
export class VideoBox extends React.Component<FieldViewProps> {
private _reactionDisposer: Opt<IReactionDisposer>;
- private _videoRef = React.createRef<HTMLVideoElement>()
- public static LayoutString() { return FieldView.LayoutString(VideoBox) }
+ private _videoRef = React.createRef<HTMLVideoElement>();
+ public static LayoutString() { return FieldView.LayoutString(VideoBox); }
constructor(props: FieldViewProps) {
super(props);
}
- @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, -1); }
+ @computed private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, -1); }
_loaded: boolean = false;
@@ -31,12 +31,12 @@ export class VideoBox extends React.Component<FieldViewProps> {
// bcz: the nativeHeight should really be set when the document is imported.
// also, the native dimensions could be different for different pages of the PDF
// so this design is flawed.
- var nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 0);
- var nativeHeight = this.props.doc.GetNumber(KeyStore.NativeHeight, 0);
+ var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
+ var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
var newNativeHeight = nativeWidth * r.entry.height / r.entry.width;
- if (!nativeHeight && newNativeHeight != nativeHeight && !isNaN(newNativeHeight)) {
- this.props.doc.SetNumber(KeyStore.Height, newNativeHeight / nativeWidth * this.props.doc.GetNumber(KeyStore.Width, 0));
- this.props.doc.SetNumber(KeyStore.NativeHeight, newNativeHeight);
+ if (!nativeHeight && newNativeHeight !== nativeHeight && !isNaN(newNativeHeight)) {
+ this.props.Document.SetNumber(KeyStore.Height, newNativeHeight / nativeWidth * this.props.Document.GetNumber(KeyStore.Width, 0));
+ this.props.Document.SetNumber(KeyStore.NativeHeight, newNativeHeight);
}
} else {
this._loaded = true;
@@ -50,15 +50,15 @@ export class VideoBox extends React.Component<FieldViewProps> {
@action
setVideoRef = (vref: HTMLVideoElement | null) => {
if (this.curPage >= 0 && vref) {
- vref!.currentTime = this.curPage;
- (vref! as any).AHackBecauseSomethingResetsTheVideoToZero = this.curPage;
+ vref.currentTime = this.curPage;
+ (vref as any).AHackBecauseSomethingResetsTheVideoToZero = this.curPage;
}
}
render() {
- let field = this.props.doc.GetT(this.props.fieldKey, VideoField);
+ let field = this.props.Document.GetT(this.props.fieldKey, VideoField);
if (!field || field === FieldWaiting) {
- return <div>Loading</div>
+ return <div>Loading</div>;
}
let path = field.Data.href;
trace();
@@ -66,13 +66,13 @@ export class VideoBox extends React.Component<FieldViewProps> {
<Measure onResize={this.setScaling}>
{({ measureRef }) =>
<div style={{ width: "100%", height: "auto" }} ref={measureRef}>
- <video className="videobox-cont" onClick={() => { }} ref={this.setVideoRef}>
+ <video className="videobox-cont" ref={this.setVideoRef}>
<source src={path} type="video/mp4" />
Not supported.
</video>
</div>
}
</Measure>
- )
+ );
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 2ca8d49ce..90ce72c41 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -1,9 +1,9 @@
import "./WebBox.scss";
-import React = require("react")
+import React = require("react");
import { WebField } from '../../../fields/WebField';
import { FieldViewProps, FieldView } from './FieldView';
import { FieldWaiting } from '../../../fields/Field';
-import { observer } from "mobx-react"
+import { observer } from "mobx-react";
import { computed } from 'mobx';
import { KeyStore } from '../../../fields/KeyStore';
@@ -16,11 +16,11 @@ export class WebBox extends React.Component<FieldViewProps> {
super(props);
}
- @computed get html(): string { return this.props.doc.GetHtml(KeyStore.Data, ""); }
+ @computed get html(): string { return this.props.Document.GetHtml(KeyStore.Data, ""); }
render() {
- let field = this.props.doc.Get(this.props.fieldKey);
- let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
+ let field = this.props.Document.Get(this.props.fieldKey);
+ let path = field === FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
field instanceof WebField ? field.Data.href : "https://crossorigin.me/" + "https://cs.brown.edu";
let content = this.html ?
@@ -33,6 +33,6 @@ export class WebBox extends React.Component<FieldViewProps> {
return (
<div className="webBox-cont" >
{content}
- </div>)
+ </div>);
}
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-23 16:59:24 +0000