aboutsummaryrefslogtreecommitdiff
path: root/src/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/views/nodes')
-rw-r--r--src/views/nodes/Annotation.tsx117
-rw-r--r--src/views/nodes/CollectionFreeFormDocumentView.tsx224
-rw-r--r--src/views/nodes/DocumentView.tsx154
-rw-r--r--src/views/nodes/FieldTextBox.scss14
-rw-r--r--src/views/nodes/FieldView.tsx56
-rw-r--r--src/views/nodes/FormattedTextBox.scss14
-rw-r--r--src/views/nodes/FormattedTextBox.tsx127
-rw-r--r--src/views/nodes/ImageBox.scss11
-rw-r--r--src/views/nodes/ImageBox.tsx20
-rw-r--r--src/views/nodes/NodeView.scss23
-rw-r--r--src/views/nodes/PDFNode.tsx452
-rw-r--r--src/views/nodes/Sticky.tsx84
-rw-r--r--src/views/nodes/TextNodeView.tsx28
-rw-r--r--src/views/nodes/TopBar.tsx46
-rw-r--r--src/views/nodes/VideoNodeView.scss5
-rw-r--r--src/views/nodes/VideoNodeView.tsx29
16 files changed, 0 insertions, 1404 deletions
diff --git a/src/views/nodes/Annotation.tsx b/src/views/nodes/Annotation.tsx
deleted file mode 100644
index a2c7be1a8..000000000
--- a/src/views/nodes/Annotation.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import "./ImageBox.scss";
-import React = require("react")
-import { observer } from "mobx-react"
-import { observable, action } from 'mobx';
-import 'react-pdf/dist/Page/AnnotationLayer.css'
-
-interface IProps{
- Span: HTMLSpanElement;
- X: number;
- Y: number;
- Highlights: any[];
- Annotations: any[];
- CurrAnno: any[];
-
-}
-
-/**
- * Annotation class is used to take notes on a particular highlight. You can also change highlighted span's color
- * Improvements to be made: Removing the annotation when onRemove is called. (Removing this, not just the highlighted span).
- * Also need to support multiline highlighting
- *
- * Written by: Andrew Kim
- */
-@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)"
- }
-
- }
-
- /**
- * 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;
- //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);
- }
- }
- })
-
- //removing from CurrAnno and Annotation array
- 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;
- nodesArray.forEach((e) => {
- if (e == this.props.Span){
- if (this.props.Span.parentElement){
- this.props.Highlights.forEach((item) => {
- if (item == e){
- item.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"}}>
- <button
- 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>
-
- </div>
- <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/views/nodes/CollectionFreeFormDocumentView.tsx b/src/views/nodes/CollectionFreeFormDocumentView.tsx
deleted file mode 100644
index 25d67d96a..000000000
--- a/src/views/nodes/CollectionFreeFormDocumentView.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import { action, computed } from "mobx";
-import { observer } from "mobx-react";
-import { Key, KeyStore } from "../../fields/Key";
-import { NumberField } from "../../fields/NumberField";
-import { DragManager } from "../../util/DragManager";
-import { SelectionManager } from "../../util/SelectionManager";
-import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
-import { ContextMenu } from "../ContextMenu";
-import "./NodeView.scss";
-import React = require("react");
-import { DocumentView, DocumentViewProps } from "./DocumentView";
-import { FieldWaiting } from "../../fields/Field";
-
-
-@observer
-export class CollectionFreeFormDocumentView extends DocumentView {
- private _contextMenuCanOpen = false;
- private _downX: number = 0;
- private _downY: number = 0;
-
- constructor(props: DocumentViewProps) {
- super(props);
- }
- get screenRect(): ClientRect | DOMRect {
- if (this._mainCont.current) {
- return this._mainCont.current.getBoundingClientRect();
- }
- return new DOMRect();
- }
-
- @computed
- get x(): number {
- return this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
- }
-
- @computed
- get y(): number {
- return this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
- }
-
- set x(x: number) {
- this.props.Document.SetData(KeyStore.X, x, NumberField)
- }
-
- set y(y: number) {
- this.props.Document.SetData(KeyStore.Y, y, NumberField)
- }
-
- @computed
- get transform(): string {
- return `translate(${this.x}px, ${this.y}px)`;
- }
-
- @computed
- get width(): number {
- return this.props.Document.GetData(KeyStore.Width, NumberField, Number(0));
- }
-
- set width(w: number) {
- this.props.Document.SetData(KeyStore.Width, w, NumberField)
- }
-
- @computed
- get height(): number {
- return this.props.Document.GetData(KeyStore.Height, NumberField, Number(0));
- }
-
- set height(h: number) {
- this.props.Document.SetData(KeyStore.Height, h, NumberField)
- }
-
- @computed
- get zIndex(): number {
- return this.props.Document.GetData(KeyStore.ZIndex, NumberField, Number(0));
- }
-
- set zIndex(h: number) {
- this.props.Document.SetData(KeyStore.ZIndex, h, NumberField)
- }
-
- @action
- dragComplete = (e: DragManager.DragCompleteEvent) => {
- }
-
- @computed
- get active(): boolean {
- return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined ||
- (this.props.ContainingCollectionView != FieldWaiting && this.props.ContainingCollectionView!.active);
- }
-
- @computed
- get topMost(): boolean {
- return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView;
- }
-
- onPointerDown = (e: React.PointerEvent): void => {
- this._downX = e.clientX;
- this._downY = e.clientY;
- var me = this;
- if (e.shiftKey && e.buttons === 1) {
- CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
- e.stopPropagation();
- return;
- }
- this._contextMenuCanOpen = e.button == 2;
- if (this.active && !e.isDefaultPrevented()) {
- e.stopPropagation();
- if (e.buttons === 2) {
- e.preventDefault();
- }
- document.removeEventListener("pointermove", this.onPointerMove)
- document.addEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp)
- document.addEventListener("pointerup", this.onPointerUp);
- }
- }
-
- onPointerMove = (e: PointerEvent): void => {
- if (e.cancelBubble) {
- this._contextMenuCanOpen = false;
- return;
- }
- if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
- this._contextMenuCanOpen = false;
- if (this._mainCont.current != null && !this.topMost) {
- this._contextMenuCanOpen = false;
- const rect = this.screenRect;
- let dragData: { [id: string]: any } = {};
- dragData["document"] = this;
- dragData["xOffset"] = e.x - rect.left;
- dragData["yOffset"] = e.y - rect.top;
- DragManager.StartDrag(this._mainCont.current, dragData, {
- handlers: {
- dragComplete: this.dragComplete,
- },
- hideSource: true
- })
- }
- }
- e.stopPropagation();
- e.preventDefault();
- }
-
- onPointerUp = (e: PointerEvent): void => {
- document.removeEventListener("pointermove", this.onPointerMove)
- document.removeEventListener("pointerup", this.onPointerUp)
- e.stopPropagation();
- if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
- SelectionManager.SelectDoc(this, e.ctrlKey);
- }
- }
-
- openRight = (e: React.MouseEvent): void => {
- CollectionDockingView.AddRightSplit(this.props.Document);
- }
-
- deleteClicked = (e: React.MouseEvent): void => {
- if (this.props.ContainingCollectionView instanceof CollectionFreeFormView) {
- this.props.ContainingCollectionView.removeDocument(this.props.Document)
- }
- }
- @action
- fullScreenClicked = (e: React.MouseEvent): void => {
- CollectionDockingView.OpenFullScreen(this.props.Document);
- ContextMenu.Instance.clearItems();
- ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
- }
- @action
- closeFullScreenClicked = (e: React.MouseEvent): void => {
- CollectionDockingView.CloseFullScreen();
- ContextMenu.Instance.clearItems();
- ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
- }
-
- @action
- onContextMenu = (e: React.MouseEvent): void => {
- if (!SelectionManager.IsSelected(this)) {
- return;
- }
- e.preventDefault()
-
- if (!this._contextMenuCanOpen) {
- return;
- }
-
- if (this.topMost) {
- ContextMenu.Instance.clearItems()
- ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
- }
- else {
- // DocumentViews should stop propogation of this event
- e.stopPropagation();
-
- ContextMenu.Instance.clearItems();
- ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
- ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight })
- ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
- SelectionManager.SelectDoc(this, e.ctrlKey);
- }
- }
-
- render() {
- var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
- return (
- <div className="node" ref={this._mainCont} style={{
- transform: freestyling ? this.transform : "",
- width: freestyling ? this.width : "100%",
- height: freestyling ? this.height : "100%",
- position: freestyling ? "absolute" : "relative",
- zIndex: freestyling ? this.zIndex : 0,
- }}
- onContextMenu={this.onContextMenu}
- onPointerDown={this.onPointerDown}>
-
- <DocumentView {...this.props} DocumentView={this} />
- </div>
- );
- }
-} \ No newline at end of file
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
deleted file mode 100644
index df97a0281..000000000
--- a/src/views/nodes/DocumentView.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { action, computed } from "mobx";
-import { observer } from "mobx-react";
-import { Document } from "../../fields/Document";
-import { Opt, FieldWaiting } from "../../fields/Field";
-import { Key, KeyStore } from "../../fields/Key";
-import { ListField } from "../../fields/ListField";
-import { NumberField } from "../../fields/NumberField";
-import { TextField } from "../../fields/TextField";
-import { Utils } from "../../Utils";
-import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
-import { CollectionSchemaView } from "../collections/CollectionSchemaView";
-import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase";
-import { FormattedTextBox } from "../nodes/FormattedTextBox";
-import { ImageBox } from "../nodes/ImageBox";
-import {PDFNode} from "../nodes/PDFNode";
-import "./NodeView.scss";
-import React = require("react");
-const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
-
-export interface DocumentViewProps {
- Document: Document;
- DocumentView: Opt<DocumentView> // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way?
- ContainingCollectionView: Opt<CollectionViewBase>;
-}
-@observer
-export class DocumentView extends React.Component<DocumentViewProps> {
-
- protected _mainCont = React.createRef<any>();
- get MainContent() {
- return this._mainCont;
- }
- @computed
- get layout(): string {
- return this.props.Document.GetData(KeyStore.Layout, TextField, String("<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>());
- }
-
- //
- // returns the cumulative scaling between the document and the screen
- //
- @computed
- public get ScalingToScreenSpace(): number {
- if (this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView != FieldWaiting &&
- this.props.ContainingCollectionView.props.ContainingDocumentView != undefined && this.props.ContainingCollectionView.props.ContainingDocumentView != FieldWaiting) {
- let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetData(KeyStore.Scale, NumberField, Number(1));
- return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss;
- }
- return 1;
- }
-
- //
- // Converts a coordinate in the screen space of the app into a local document coordinate.
- //
- public TransformToLocalPoint(screenX: number, screenY: number) {
- // if this collection view is nested within another collection view, then
- // first transform the screen point into the parent collection's coordinate space.
- let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView != FieldWaiting &&
- this.props.ContainingCollectionView.props.ContainingDocumentView != undefined && this.props.ContainingCollectionView.props.ContainingDocumentView != FieldWaiting ?
- this.props.ContainingCollectionView.props.ContainingDocumentView.TransformToLocalPoint(screenX, screenY) :
- { LocalX: screenX, LocalY: screenY };
- let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
- let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH;
-
- var Xx = this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
- var Yy = this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
- // CollectionDockingViews change the location of their children frames without using a Dash transformation.
- // They also ignore any transformation that may have been applied to their content document.
- // NOTE: this currently assumes CollectionDockingViews aren't nested.
- if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
- var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
- Xx = rx - COLLECTION_BORDER_WIDTH;
- Yy = ry - COLLECTION_BORDER_WIDTH;
- }
-
- let Ss = this.props.Document.GetData(KeyStore.Scale, NumberField, Number(1));
- let Panxx = this.props.Document.GetData(KeyStore.PanX, NumberField, Number(0));
- let Panyy = this.props.Document.GetData(KeyStore.PanY, NumberField, Number(0));
- let LocalX = (ContainerX - (Xx + Panxx)) / Ss;
- let LocalY = (ContainerY - (Yy + Panyy)) / Ss;
-
- return { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY };
- }
-
- //
- // Converts a point in the coordinate space of a document to a screen space coordinate.
- //
- public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0): { ScreenX: number, ScreenY: number } {
-
- var Xx = this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
- var Yy = this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
- // CollectionDockingViews change the location of their children frames without using a Dash transformation.
- // They also ignore any transformation that may have been applied to their content document.
- // NOTE: this currently assumes CollectionDockingViews aren't nested.
- if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
- var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
- Xx = rx - COLLECTION_BORDER_WIDTH;
- Yy = ry - COLLECTION_BORDER_WIDTH;
- }
-
- let W = COLLECTION_BORDER_WIDTH;
- let H = COLLECTION_BORDER_WIDTH;
- let parentX = (localX - W) * Ss + (Xx + Panxx) + W;
- let parentY = (localY - H) * Ss + (Yy + Panyy) + H;
-
- // if this collection view is nested within another collection view, then
- // first transform the local point into the parent collection's coordinate space.
- let containingDocView = this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView != FieldWaiting ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
- if (containingDocView != undefined && containingDocView != FieldWaiting) {
- let ss = containingDocView.props.Document.GetData(KeyStore.Scale, NumberField, Number(1));
- let panxx = containingDocView.props.Document.GetData(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
- let panyy = containingDocView.props.Document.GetData(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
- let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy);
- parentX = ScreenX;
- parentY = ScreenY;
- }
- return { ScreenX: parentX, ScreenY: parentY };
- }
-
-
- render() {
- let bindings = { ...this.props } as any;
- 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;
- }
- if (bindings.DocumentView === undefined) {
- bindings.DocumentView = this; // set the DocumentView to this if it hasn't already been set by a sub-class during its render method.
- }
- return (
- <div className="node" ref={this._mainCont} style={{ width: "100%", height: "100%", }}>
- <JsxParser
- components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, PDFNode}}
- bindings={bindings}
- jsx={this.layout}
- showWarnings={true}
- onError={(test: any) => { console.log(test) }}
- />
- </div>
- )
- }
-}
diff --git a/src/views/nodes/FieldTextBox.scss b/src/views/nodes/FieldTextBox.scss
deleted file mode 100644
index b6ce2fabc..000000000
--- a/src/views/nodes/FieldTextBox.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.ProseMirror {
- margin-top: -1em;
- width: 100%;
- height: 100%;
-}
-
-.ProseMirror:focus {
- outline: none !important
-}
-
-.fieldTextBox-cont {
- background: white;
- padding: 1vw;
-} \ No newline at end of file
diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx
deleted file mode 100644
index 05a7b91b9..000000000
--- a/src/views/nodes/FieldView.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React = require("react")
-import { Document } from "../../fields/Document";
-import { observer } from "mobx-react";
-import { computed } from "mobx";
-import { Field, Opt, FieldWaiting } from "../../fields/Field";
-import { TextField } from "../../fields/TextField";
-import { NumberField } from "../../fields/NumberField";
-import { RichTextField } from "../../fields/RichTextField";
-import { FormattedTextBox } from "./FormattedTextBox";
-import { ImageField } from "../../fields/ImageField";
-import { ImageBox } from "./ImageBox";
-import { Key } from "../../fields/Key";
-import { DocumentView } from "./DocumentView";
-
-//
-// these properties get assigned through the render() method of the DocumentView when it creates this node.
-// However, that only happens because the properties are "defined" in the markup for the field view.
-// See the LayoutString method on each field view : ImageBox, FormattedTextBox, etc.
-//
-export interface FieldViewProps {
- fieldKey: Key;
- doc: Document;
- DocumentViewForField: Opt<DocumentView>
-}
-
-@observer
-export class FieldView extends React.Component<FieldViewProps> {
- public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} />`; }
- @computed
- get field(): Opt<Field> {
- const { doc, fieldKey } = this.props;
- return doc.Get(fieldKey);
- }
- render() {
- const field = this.field;
- if (!field) {
- return <p>{'<null>'}</p>
- }
- if (field instanceof TextField) {
- return <p>{field.Data}</p>
- }
- else if (field instanceof RichTextField) {
- return <FormattedTextBox {...this.props} />
- }
- else if (field instanceof ImageField) {
- return <ImageBox {...this.props} />
- }
- else if (field instanceof NumberField) {
- return <p>{field.Data}</p>
- } else if (field != FieldWaiting) {
- return <p>{field.GetValue}</p>
- } else
- return <p> {"Waiting for server..."} </p>
- }
-
-} \ No newline at end of file
diff --git a/src/views/nodes/FormattedTextBox.scss b/src/views/nodes/FormattedTextBox.scss
deleted file mode 100644
index 492367fce..000000000
--- a/src/views/nodes/FormattedTextBox.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.ProseMirror {
- margin-top: -1em;
- width: 100%;
- height: 100%;
-}
-
-.ProseMirror:focus {
- outline: none !important
-}
-
-.formattedTextBox-cont {
- background: white;
- padding: 1vw;
-} \ No newline at end of file
diff --git a/src/views/nodes/FormattedTextBox.tsx b/src/views/nodes/FormattedTextBox.tsx
deleted file mode 100644
index 3e3e22e46..000000000
--- a/src/views/nodes/FormattedTextBox.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { action, IReactionDisposer, reaction } from "mobx";
-import { observer } from "mobx-react"
-import { baseKeymap } from "prosemirror-commands";
-import { history, redo, undo } from "prosemirror-history";
-import { keymap } from "prosemirror-keymap";
-import { schema } from "prosemirror-schema-basic";
-import { EditorState, Transaction } from "prosemirror-state";
-import { EditorView } from "prosemirror-view";
-import { Opt, FieldWaiting } from "../../fields/Field";
-import { SelectionManager } from "../../util/SelectionManager";
-import "./FormattedTextBox.scss";
-import React = require("react")
-import { RichTextField } from "../../fields/RichTextField";
-import { FieldViewProps, FieldView } from "./FieldView";
-import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
-
-
-// FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document
-//
-// HTML Markup: <FormattedTextBox Doc={Document's ID} FieldKey={Key's name + "Key"}
-//
-// In Code, the node's HTML is specified in the document's parameterized structure as:
-// document.SetField(KeyStore.Layout, "<FormattedTextBox doc={doc} fieldKey={<KEYNAME>Key} />");
-// and the node's binding to the specified document KEYNAME as:
-// document.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.<KEYNAME>]));
-// The Jsx parser at run time will bind:
-// 'fieldKey' property to the Key stored in LayoutKeys
-// and 'doc' property to the document that is being rendered
-//
-// When rendered() by React, this extracts the TextController from the Document stored at the
-// specified Key and assigns it to an HTML input node. When changes are made tot his node,
-// this will edit the document and assign the new value to that field.
-//]
-@observer
-export class FormattedTextBox extends React.Component<FieldViewProps> {
-
- public static LayoutString() { return FieldView.LayoutString("FormattedTextBox"); }
- private _ref: React.RefObject<HTMLDivElement>;
- private _editorView: Opt<EditorView>;
- private _reactionDisposer: Opt<IReactionDisposer>;
-
- constructor(props: FieldViewProps) {
- super(props);
-
- this._ref = React.createRef();
-
- this.onChange = this.onChange.bind(this);
- }
-
- dispatchTransaction = (tx: Transaction) => {
- if (this._editorView && this._editorView != FieldWaiting) {
- const state = this._editorView.state.apply(tx);
- this._editorView.updateState(state);
- const { doc, fieldKey } = this.props;
- doc.SetData(fieldKey, JSON.stringify(state.toJSON()), RichTextField);
- }
- }
-
- componentDidMount() {
- let state: EditorState;
- const { doc, fieldKey } = this.props;
- const config = {
- schema,
- plugins: [
- history(),
- keymap({ "Mod-z": undo, "Mod-y": redo }),
- keymap(baseKeymap)
- ]
- };
-
- let field = doc.GetT(fieldKey, RichTextField);
- if (field && field != FieldWaiting) { // bcz: don't think this works
- state = EditorState.fromJSON(config, JSON.parse(field.Data));
- } else {
- state = EditorState.create(config);
- }
- if (this._ref.current) {
- this._editorView = new EditorView(this._ref.current, {
- state,
- dispatchTransaction: this.dispatchTransaction
- });
- }
-
- this._reactionDisposer = reaction(() => {
- const field = this.props.doc.GetT(this.props.fieldKey, RichTextField);
- return field && field != FieldWaiting ? field.Data : undefined;
- }, (field) => {
- if (field && this._editorView && this._editorView != FieldWaiting) {
- this._editorView.updateState(EditorState.fromJSON(config, JSON.parse(field)));
- }
- })
- }
-
- componentWillUnmount() {
- if (this._editorView && this._editorView != FieldWaiting) {
- this._editorView.destroy();
- }
- if (this._reactionDisposer && this._reactionDisposer != FieldWaiting) {
- this._reactionDisposer();
- }
- }
-
- shouldComponentUpdate() {
- return false;
- }
-
- @action
- onChange(e: React.ChangeEvent<HTMLInputElement>) {
- const { fieldKey, doc } = this.props;
- doc.SetData(fieldKey, e.target.value, RichTextField);
- }
- onPointerDown = (e: React.PointerEvent): void => {
- let me = this;
- if (e.buttons === 1 && me.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(me.props.DocumentViewForField)) {
- e.stopPropagation();
- }
- }
- render() {
- return (<div className="formattedTextBox-cont"
- style={{
- color: "initial",
- whiteSpace: "initial"
- }}
- onPointerDown={this.onPointerDown}
- ref={this._ref} />)
- }
-} \ No newline at end of file
diff --git a/src/views/nodes/ImageBox.scss b/src/views/nodes/ImageBox.scss
deleted file mode 100644
index 136fda1d0..000000000
--- a/src/views/nodes/ImageBox.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-
-.imageBox-cont {
- padding: 0vw;
-}
-
-.imageBox-button {
- padding : 0vw;
- border: none;
- width : 100%;
- height: 100%;
-} \ No newline at end of file
diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
deleted file mode 100644
index 566e5716e..000000000
--- a/src/views/nodes/ImageBox.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import 'react-image-lightbox/style.css';
-import "./ImageBox.scss";
-import React = require("react")
-import { FieldViewProps, FieldView } from './FieldView';
-import { observer } from "mobx-react"
-import { observable, action } from 'mobx';
-import 'react-pdf/dist/Page/AnnotationLayer.css'
-//@ts-ignore
-import { Document, Page, PDFPageProxy, PageAnnotation} from "react-pdf";
-import { Utils } from '../../Utils';
-import { Sticky } from './Sticky';
-import { Annotation } from './Annotation';
-
-/** PDF has been moved to PDFNode now. This is now a dummy ImageBox that should be replaced with current
- * ImageBox.
- */
-@observer
-export class ImageBox extends React.Component<FieldViewProps> {
- public static LayoutString() { return FieldView.LayoutString("ImageBox"); }
-} \ No newline at end of file
diff --git a/src/views/nodes/NodeView.scss b/src/views/nodes/NodeView.scss
deleted file mode 100644
index dac1c0a8e..000000000
--- a/src/views/nodes/NodeView.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.node {
- position: absolute;
- background: #cdcdcd;
- overflow: hidden;
- &.minimized {
- width: 30px;
- height: 30px;
- }
- .top {
- background: #232323;
- height: 20px;
- cursor: pointer;
- }
- .content {
- padding: 20px 20px;
- height: auto;
- box-sizing: border-box;
- }
- .scroll-box {
- overflow-y: scroll;
- height: calc(100% - 20px);
- }
-} \ No newline at end of file
diff --git a/src/views/nodes/PDFNode.tsx b/src/views/nodes/PDFNode.tsx
deleted file mode 100644
index 8f30a3bec..000000000
--- a/src/views/nodes/PDFNode.tsx
+++ /dev/null
@@ -1,452 +0,0 @@
-import 'react-image-lightbox/style.css';
-import "./ImageBox.scss";
-import React = require("react")
-import { FieldViewProps, FieldView } from './FieldView';
-import { observer } from "mobx-react"
-import { observable, action } from 'mobx';
-import 'react-pdf/dist/Page/AnnotationLayer.css'
-//@ts-ignore
-import { Document, Page, PDFPageProxy, PageAnnotation} from "react-pdf";
-import { Utils } from '../../Utils';
-import { Sticky } from './Sticky'; //you should look at sticky and annotation, because they are used here
-import { Annotation } from './Annotation';
-import { ObjectPositionProperty } from 'csstype';
-import { keydownHandler } from 'prosemirror-keymap';
-
-/** ALSO LOOK AT: Annotation.tsx, Sticky.tsx
- * This method renders PDF and puts all kinds of functionalities such as annotation, highlighting,
- * area selection (I call it stickies), embedded ink node for directly annotating using a pen or
- * mouse, and pagination.
- *
- *
- * HOW TO USE:
- * AREA selection:
- * 1) Click on Area button.
- * 2) click on any part of the PDF, and drag to get desired sized area shape
- * 3) You can write on the area (hence the reason why it's called sticky)
- * 4) to make another area, you need to click on area button AGAIN.
- *
- * HIGHLIGHT: (Buggy. No multiline/multidiv text highlighting for now...)
- * 1) just click and drag on a text
- * 2) click highlight
- * 3) for annotation, just pull your cursor over to that text
- * 4) another method: click on highlight first and then drag on your desired text
- * 5) To make another highlight, you need to reclick on the button
- *
- * Draw:
- * 1) click draw and select color. then just draw like there's no tomorrow.
- * 2) once you finish drawing your masterpiece, just reclick on the draw button to end your drawing session.
- *
- * Pagination:
- * 1) click on arrows. You'll notice that stickies will stay in those page. But... highlights won't.
- * 2) to test this out, make few area/stickies and then click on next page then come back. You'll see that they are all saved.
- *
- *
- * written by: Andrew Kim
- */
-@observer
-export class PDFNode extends React.Component<FieldViewProps> {
- public static LayoutString() { return FieldView.LayoutString("PDFNode"); }
-
- private _mainDiv = React.createRef<HTMLDivElement>()
- private _pdf = React.createRef<HTMLCanvasElement>();
-
- //very useful for keeping track of X and y position throughout the PDF Canvas
- private initX:number = 0;
- private initY:number = 0;
-
- //checks if tool is on
- private _toolOn:boolean = false; //checks if tool is on
- private _pdfContext:any = null; //gets pdf context
- private bool:Boolean = false; //general boolean debounce
- private currSpan:any;//keeps track of current span (for highlighting)
-
- 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 _colorTool = React.createRef<HTMLButtonElement>(); //color button reference
- private _currColor:string = "black"; //current color that user selected (for ink/pen)
-
- private _highlightTool = React.createRef<HTMLButtonElement>(); //highlighter button reference
- private _highlightToolOn:boolean = false;
-
- @observable perPage:Object[] = []; //stores pageInfo
- @observable pageInfo:any = {area:[], divs:[], anno: []}; //divs is array of objects linked to anno
-
- @observable private page:number = 1; //default is the first page.
- @observable private numPage:number = 1; //default number of pages
- private _pdfCanvas:any;
-
- /**
- * for pagination backwards
- */
- @action
- onPageBack = () => {
- if (this.page > 1){
- this.page -= 1;
- this.currAnno = [];
- this.perPage[this.page] = this.pageInfo
- this.pageInfo = {area:[], divs:[], anno: []}; //resets the object to default
- if (this.perPage[this.page - 1]){
- this.pageInfo = this.perPage[this.page - 1];
- }
- }
- }
-
- /**
- * for pagination forwards
- */
- @action
- onPageForward = () => {
- if (this.page < this.numPage){
- this.page += 1;
- this.currAnno = [];
- this.perPage[this.page - 2] = this.pageInfo;
- this.pageInfo = {area:[], divs:[], anno: []}; //resets the object to default
- if (this.perPage[this.page - 1]){
- this.pageInfo = this.perPage[this.page - 1];
- }
- }
- }
-
- /**
- * selection tool used for area highlighting (stickies). Kinda temporary
- */
- selectionTool = () => {
- this._toolOn = true;
- }
- /**
- * when user draws on the canvas. When mouse pointer is down
- */
- drawDown = (e:PointerEvent) => {
- this.initX = e.offsetX;
- this.initY = e.offsetY;
- this._pdfContext.beginPath();
- this._pdfContext.lineTo(this.initX, this.initY);
- this._pdfContext.strokeStyle = this._currColor;
- this._pdfCanvas.addEventListener("pointermove", this.drawMove);
- this._pdfCanvas.addEventListener("pointerup", this.drawUp);
-
- }
- //when user drags
- drawMove = (e: PointerEvent):void =>{
- //x and y mouse movement
- let x = this.initX += e.movementX,
- y = this.initY += e.movementY;
- //connects the point
- this._pdfContext.lineTo(x, y);
- this._pdfContext.stroke();
- }
-
- drawUp = (e:PointerEvent) => {
- this._pdfContext.closePath();
- this._pdfCanvas.removeEventListener("pointermove", this.drawMove);
- this._pdfCanvas.removeEventListener("pointerdown", this.drawDown);
- this._pdfCanvas.addEventListener("pointerdown", this.drawDown);
- }
-
-
- /**
- * highlighting helper function
- */
- makeEditableAndHighlight = (colour:string) => {
- var range, sel = window.getSelection();
- if (sel.rangeCount && sel.getRangeAt) {
- range = sel.getRangeAt(0);
- }
- document.designMode = "on";
- if (!document.execCommand("HiliteColor", false, colour)) {
- document.execCommand("HiliteColor", false, colour);
- }
-
- if (range) {
- sel.removeAllRanges();
- sel.addRange(range);
-
- let obj:Object = {parentDivs:[], spans:[]};
- //@ts-ignore
- 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
- if (parentDiv){
- 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'){
- //@ts-ignore
- obj.parentDivs.push(parentDiv)
- //@ts-ignore
- child.id = "highlighted"
- //@ts-ignore
- obj.spans.push(child)
- child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler
- }
- })
- }
- }
- }
- this.pageInfo.divs.push(obj);
-
- }
- document.designMode = "off";
- }
-
- highlightNodes = (nodes:NodeListOf<ChildNode>) => {
- let temp = {parentDivs: [], spans: []}
- nodes.forEach((div) => {
- div.childNodes.forEach((child)=>{
- if (child.nodeName == 'SPAN'){
- //@ts-ignore
- temp.parentDivs.push(div)
- //@ts-ignore
- child.id = "highlighted"
- //@ts-ignore
- temp.spans.push(child)
- child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler
- }
- })
-
- })
- return temp;
- }
-
- /**
- * when the cursor enters the highlight, it pops out annotation. ONLY WORKS FOR SINGLE DIV LINES
- */
- @observable private currAnno:any = []
- @action
- onEnter = (e:any) => {
- let span:HTMLSpanElement = e.toElement;
- let index:any;
- this.pageInfo.divs.forEach((obj:any) =>{
- obj.spans.forEach((element:any) =>{
- if (element == span) {
- if (!index){
- index = this.pageInfo.divs.indexOf(obj);
- }
- }
- })
- })
-
- if (this.pageInfo.anno.length >= index + 1){
- if (this.currAnno.length == 0){
- this.currAnno.push(this.pageInfo.anno[index]);
- }
- }else{
- if (this.currAnno.length == 0){ //if there are no current annotation
- let div = span.offsetParent;
- //@ts-ignore
- let divX = div.style.left
- //@ts-ignore
- 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}/>
- this.pageInfo.anno.push(annotation);
- this.currAnno.push(annotation);
- }
- }
-
- }
-
- /**
- * highlight function for highlighting actual text. This works fine.
- */
- highlight = (color:string) => {
- if (window.getSelection()) {
- try {
- if (!document.execCommand("hiliteColor", false, color)) {
- this.makeEditableAndHighlight(color);
- }
- } catch (ex) {
- this.makeEditableAndHighlight(color)
- }
- }
- }
-
- /**
- * controls the area highlighting (stickies) Kinda temporary
- */
- onPointerDown = (e: React.PointerEvent) => {
- if (this._toolOn){
- let mouse = e.nativeEvent;
- this.initX = mouse.offsetX;
- this.initY = mouse.offsetY;
-
- }
- }
-
- /**
- * controls area highlighting and partially highlighting. Kinda temporary
- */
- @action
- onPointerUp = (e:React.PointerEvent) => {
-
- if (this._highlightToolOn){
- this.highlight("rgba(76, 175, 80, 0.3)"); //highlights to this default color.
- this._highlightToolOn = false;
- }
- if (this._toolOn){
- let mouse = e.nativeEvent;
- let finalX = mouse.offsetX;
- let finalY = mouse.offsetY;
- let width = Math.abs(finalX - this.initX); //width
- let height = Math.abs(finalY - this.initY); //height
-
- //these two if statements are bidirectional dragging. You can drag from any point to another point and generate sticky
- if (finalX < this.initX){
- this.initX = finalX;
- }
- if (finalY < this.initY){
- this.initY = finalY;
- }
-
- if (this._mainDiv.current){
- let sticky = <Sticky key ={Utils.GenerateGuid()} Height = {height} Width = {width} X = {this.initX} Y = {this.initY}/>
- this.pageInfo.area.push(sticky);
- }
- this._toolOn = false;
- }
-
- }
-
- /**
- * starts drawing the line when user presses down.
- */
- onDraw = () => {
- if (this._currTool != null){
- this._currTool.style.backgroundColor = "grey";
- }
-
- if (this._drawTool.current){
- this._currTool = this._drawTool.current;
- if (this._drawToolOn){
- this._drawToolOn = false;
- this._pdfCanvas.removeEventListener("pointerdown", this.drawDown);
- this._pdfCanvas.removeEventListener("pointerup", this.drawUp);
- this._pdfCanvas.removeEventListener("pointermove", this.drawMove);
- this._drawTool.current.style.backgroundColor = "grey";
- } else {
- this._drawToolOn = true;
- this._pdfCanvas.addEventListener("pointerdown", this.drawDown);
- this._drawTool.current.style.backgroundColor = "cyan";
- }
- }
- }
-
-
- /**
- * for changing color (for ink/pen)
- */
- onColorChange = (e:React.PointerEvent) => {
- if (e.currentTarget.innerHTML == "Red"){
- this._currColor = "red";
- } else if (e.currentTarget.innerHTML == "Blue"){
- this._currColor = "blue";
- } else if (e.currentTarget.innerHTML == "Green"){
- this._currColor = "green";
- } else if (e.currentTarget.innerHTML == "Black"){
- this._currColor = "black";
- }
-
- }
-
-
- /**
- * For highlighting (text drag highlighting)
- */
- onHighlight = () => {
- this._drawToolOn = false;
- if (this._currTool != null){
- this._currTool.style.backgroundColor = "grey";
- }
- if (this._highlightTool.current){
- this._currTool = this._drawTool.current;
- if (this._highlightToolOn){
- this._highlightToolOn = false;
- this._highlightTool.current.style.backgroundColor = "grey";
- } else {
- this._highlightToolOn = true;
- this._highlightTool.current.style.backgroundColor = "orange";
- }
- }
- }
-
-
- /**
- * renders whole lot of shets, including pdf, stickies, and annotations.
- */
-
- reHighlight = () =>{
- let div = document.getElementsByClassName("react-pdf__Page__textContent");
- if (div){
-
- }
-
- }
-
-
- render() {
- return (
- <div ref = {this._mainDiv}
- onPointerDown ={this.onPointerDown}
- onPointerUp = {this.onPointerUp}
- >
-
- {this.pageInfo.area.filter( () => {
- return this.pageInfo.area}).map((element: any) => {
- return element
- })
- }
- {this.currAnno.map((element:any) => {
- return element
- })}
-
- <button onClick = {this.onPageBack}>{"<"}</button>
- <button onClick = {this.onPageForward}>{">"}</button>
- <button onClick ={this.selectionTool}>{"Area"}</button>
- <button style ={{color: "white", backgroundColor: "grey"}} onClick = {this.onHighlight} ref = {this._highlightTool}>Highlight</button>
- <button style ={{color: "white", backgroundColor: "grey"}} ref = {this._drawTool} onClick = {this.onDraw}>{"Draw"}</button>
- <button ref = {this._colorTool} onPointerDown = {this.onColorChange}>{"Red"}</button>
- <button ref = {this._colorTool} onPointerDown = {this.onColorChange}>{"Blue"}</button>
- <button ref = {this._colorTool} onPointerDown = {this.onColorChange}>{"Green"}</button>
- <button ref = {this._colorTool} onPointerDown = {this.onColorChange}>{"Black"}</button>
-
- <Document file={Utils.pdf_example}>
- <Page
- pageNumber={this.page}
- onLoadSuccess={
- (page:any) => {
- if (this._mainDiv.current){
- this._mainDiv.current.childNodes.forEach((element) => {
- if (element.nodeName == "DIV"){
- element.childNodes[0].childNodes.forEach((e) => {
-
- if (e.nodeName == "CANVAS"){
- this._pdfCanvas = e;
- //@ts-ignore
- this._pdfContext = e.getContext("2d")
-
- }
-
- })
- }
- })
- }
- this.numPage = page.transport.numPages
- if (this.perPage.length == 0){ //Makes sure it only runs once
- this.perPage = [...Array(this.numPage)]
- }
- }
- }
- />
- </Document>
- </div>
- );
- }
-
-} \ No newline at end of file
diff --git a/src/views/nodes/Sticky.tsx b/src/views/nodes/Sticky.tsx
deleted file mode 100644
index ca25c9bdd..000000000
--- a/src/views/nodes/Sticky.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
-import { SelectionManager } from "../../util/SelectionManager";
-import React = require("react")
-import { observer } from "mobx-react"
-import { observable, action } from 'mobx';
-import 'react-pdf/dist/Page/AnnotationLayer.css'
-
-interface IProps{
- Height:number;
- Width:number;
- X:number;
- Y:number;
-}
-
-/**
- * Sticky, also known as area highlighting, is used to highlight large selection of the PDF file.
- * Improvements that could be made: maybe store line array and store that somewhere for future rerendering.
- *
- * Written By: Andrew Kim
- */
-@observer
-export class Sticky extends React.Component<IProps> {
-
- private initX:number = 0;
- private initY:number = 0;
-
- private _ref = React.createRef<HTMLCanvasElement>();
- private ctx:any; //context that keeps track of sticky canvas
-
- /**
- * drawing. Registers the first point that user clicks when mouse button is pressed down on canvas
- */
- drawDown = (e:React.PointerEvent) => {
- if (this._ref.current){
- this.ctx = this._ref.current.getContext("2d");
- let mouse = e.nativeEvent;
- this.initX = mouse.offsetX;
- this.initY = mouse.offsetY;
- this.ctx.beginPath();
- this.ctx.lineTo(this.initX, this.initY);
- this.ctx.strokeStyle = "black";
- document.addEventListener("pointermove", this.drawMove);
- document.addEventListener("pointerup", this.drawUp);
- }
- }
-
- //when user drags
- drawMove = (e: PointerEvent):void =>{
- //x and y mouse movement
- let x = this.initX += e.movementX,
- y = this.initY += e.movementY;
- //connects the point
- this.ctx.lineTo(x, y);
- this.ctx.stroke();
-
- }
-
- /**
- * when user lifts the mouse, the drawing ends
- */
- drawUp = (e:PointerEvent) => {
- this.ctx.closePath();
- console.log(this.ctx);
- document.removeEventListener("pointermove", this.drawMove);
- }
-
- render() {
- return (
- <div onPointerDown = {this.drawDown}>
- <canvas ref = {this._ref} height = {this.props.Height} width = {this.props.Width}
- style = {{position:"absolute",
- top: "20px",
- left: "0px",
- zIndex: 1,
- background: "yellow",
- transform: `translate(${this.props.X}px, ${this.props.Y}px)`,
- opacity: 0.4
- }}
- />
-
- </div>
- );
- }
-} \ No newline at end of file
diff --git a/src/views/nodes/TextNodeView.tsx b/src/views/nodes/TextNodeView.tsx
deleted file mode 100644
index ab762df12..000000000
--- a/src/views/nodes/TextNodeView.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import {observer} from "mobx-react";
-import {StaticTextNodeStore} from "../../stores/StaticTextNodeStore";
-import "./NodeView.scss";
-import {TopBar} from "./TopBar";
-import React = require("react");
-
-interface IProps {
- store: StaticTextNodeStore;
-}
-
-@observer
-export class TextNodeView extends React.Component<IProps> {
-
- render() {
- let store = this.props.store;
- return (
- <div className="node text-node" style={{transform: store.Transform}}>
- <TopBar store={store} />
- <div className="scroll-box">
- <div className="content">
- <h3 className="title">{store.Title}</h3>
- <p className="paragraph">{store.Text}</p>
- </div>
- </div>
- </div>
- );
- }
-} \ No newline at end of file
diff --git a/src/views/nodes/TopBar.tsx b/src/views/nodes/TopBar.tsx
deleted file mode 100644
index bb126e8b5..000000000
--- a/src/views/nodes/TopBar.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { observer } from "mobx-react";
-import { NodeStore } from "../../stores/NodeStore";
-import "./NodeView.scss";
-import React = require("react");
-
-interface IProps {
- store: NodeStore;
-}
-
-@observer
-export class TopBar extends React.Component<IProps> {
-
- private _isPointerDown = false;
-
- onPointerDown = (e: React.PointerEvent): void => {
- e.stopPropagation();
- e.preventDefault();
- this._isPointerDown = true;
- document.removeEventListener("pointermove", this.onPointerMove);
- document.addEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp);
- document.addEventListener("pointerup", this.onPointerUp);
- }
-
- onPointerUp = (e: PointerEvent): void => {
- e.stopPropagation();
- e.preventDefault();
- this._isPointerDown = false;
- document.removeEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp);
- }
-
- onPointerMove = (e: PointerEvent): void => {
- e.stopPropagation();
- e.preventDefault();
- if (!this._isPointerDown) {
- return;
- }
- this.props.store.X += e.movementX;
- this.props.store.Y += e.movementY;
- }
-
- render() {
- return <div className="top" onPointerDown={this.onPointerDown}></div>
- }
-}
diff --git a/src/views/nodes/VideoNodeView.scss b/src/views/nodes/VideoNodeView.scss
deleted file mode 100644
index f412c3519..000000000
--- a/src/views/nodes/VideoNodeView.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.node {
- video {
- width: 100%;
- }
-} \ No newline at end of file
diff --git a/src/views/nodes/VideoNodeView.tsx b/src/views/nodes/VideoNodeView.tsx
deleted file mode 100644
index 0a7b3d174..000000000
--- a/src/views/nodes/VideoNodeView.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { observer } from "mobx-react";
-import { VideoNodeStore } from "../../stores/VideoNodeStore";
-import "./NodeView.scss";
-import { TopBar } from "./TopBar";
-import "./VideoNodeView.scss";
-import React = require("react");
-
-interface IProps {
- store: VideoNodeStore;
-}
-
-@observer
-export class VideoNodeView extends React.Component<IProps> {
-
- render() {
- let store = this.props.store;
- return (
- <div className="node text-node" style={{ transform: store.Transform }}>
- <TopBar store={store} />
- <div className="scroll-box">
- <div className="content">
- <h3 className="title">{store.Title}</h3>
- <video src={store.Url} controls />
- </div>
- </div>
- </div>
- );
- }
-} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-08-17 00:00:07 +0000