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/DocumentView.tsx66
-rw-r--r--src/client/views/nodes/LinkBox.scss39
-rw-r--r--src/client/views/nodes/LinkBox.tsx83
-rw-r--r--src/client/views/nodes/LinkEditor.scss16
-rw-r--r--src/client/views/nodes/LinkEditor.tsx37
-rw-r--r--src/client/views/nodes/LinkMenu.scss20
-rw-r--r--src/client/views/nodes/LinkMenu.tsx58
7 files changed, 318 insertions, 1 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 263bb31d7..6d903b955 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,4 +1,4 @@
-import { action, computed } from "mobx";
+import { action, computed, runInAction } from "mobx";
import { observer } from "mobx-react";
import { Document } from "../../../fields/Document";
import { Field, FieldWaiting, Opt } from "../../../fields/Field";
@@ -24,6 +24,8 @@ import { WebBox } from "../nodes/WebBox";
import { PDFBox } from "../nodes/PDFBox";
import "./DocumentView.scss";
import React = require("react");
+import { TextField } from "../../../fields/TextField";
+import { DocumentManager } from "../../util/DocumentManager";
const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
@@ -113,6 +115,40 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
}
}
+
+ private dropDisposer?: DragManager.DragDropDisposer;
+ protected createDropTarget = (ele: HTMLDivElement) => {
+
+ }
+
+ componentDidMount() {
+ if (this._mainCont.current) {
+ this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, { handlers: { drop: this.drop.bind(this) } });
+ }
+ runInAction(() => {
+ DocumentManager.Instance.DocumentViews.push(this);
+ })
+ }
+
+ componentDidUpdate() {
+ if (this.dropDisposer) {
+ this.dropDisposer();
+ }
+ if (this._mainCont.current) {
+ this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, { handlers: { drop: this.drop.bind(this) } });
+ }
+ }
+
+ componentWillUnmount() {
+ if (this.dropDisposer) {
+ this.dropDisposer();
+ }
+ runInAction(() => {
+ DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1);
+
+ })
+ }
+
onPointerMove = (e: PointerEvent): void => {
if (e.cancelBubble) {
return;
@@ -172,6 +208,34 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
@action
+ drop = (e: Event, de: DragManager.DropEvent) => {
+ console.log("drop");
+ const sourceDocView: DocumentView = de.data["linkSourceDoc"];
+ if (!sourceDocView) {
+ return;
+ }
+ let sourceDoc: Document = sourceDocView.props.Document;
+ let destDoc: Document = this.props.Document;
+ if (this.props.isTopMost) {
+ return;
+ }
+ let linkDoc: Document = new Document();
+
+ linkDoc.Set(KeyStore.Title, new TextField("New Link"));
+ linkDoc.Set(KeyStore.LinkDescription, new TextField(""));
+ linkDoc.Set(KeyStore.LinkTags, new TextField("Default"));
+
+ sourceDoc.GetOrCreateAsync(KeyStore.LinkedToDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) });
+ linkDoc.Set(KeyStore.LinkedToDocs, destDoc);
+ destDoc.GetOrCreateAsync(KeyStore.LinkedFromDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) });
+ linkDoc.Set(KeyStore.LinkedFromDocs, sourceDoc);
+
+
+
+ e.stopPropagation();
+ }
+
+ @action
onContextMenu = (e: React.MouseEvent): void => {
e.stopPropagation();
let moved = Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3;
diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss
new file mode 100644
index 000000000..00e5ebb3d
--- /dev/null
+++ b/src/client/views/nodes/LinkBox.scss
@@ -0,0 +1,39 @@
+.link-container {
+ width: 100%;
+ height: 30px;
+ display: flex;
+ flex-direction: row;
+ border-top: 0.5px solid #bababa;
+}
+
+.info-container {
+ width: 60%;
+ padding-top: 5px;
+ padding-left: 5px;
+ display: flex;
+ flex-direction: column
+}
+
+.link-name {
+ font-size: 11px;
+}
+
+.doc-name {
+ font-size: 8px;
+}
+
+.button-container {
+ width: 40%;
+ display: flex;
+ flex-direction: row;
+}
+
+.button {
+ height: 15px;
+ width: 15px;
+ margin: 8px 5px;
+ border-radius: 50%;
+ opacity: 0.6;
+ pointer-events: auto;
+ background-color: #2B6091;
+} \ No newline at end of file
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
new file mode 100644
index 000000000..fcfb2fcb5
--- /dev/null
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -0,0 +1,83 @@
+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 { props } from "bluebird";
+import { DocumentView } from "./DocumentView";
+import { Document } from "../../../fields/Document";
+import { ListField } from "../../../fields/ListField";
+import { DocumentManager } from "../../util/DocumentManager";
+import { LinkEditor } from "./LinkEditor";
+
+interface Props {
+ linkDoc: Document;
+ linkName: String;
+ pairedDoc: Document;
+ type: String;
+}
+
+@observer
+export class LinkBox extends React.Component<Props> {
+
+ onViewButtonPressed = (e: React.PointerEvent): void => {
+ console.log("view down");
+ e.stopPropagation();
+ let docView = DocumentManager.Instance.getDocumentView(this.props.pairedDoc);
+ if (docView) {
+ docView.props.focus(this.props.pairedDoc);
+ }
+ }
+
+ onEditButtonPressed = (e: React.PointerEvent): void => {
+ console.log("edit down");
+ e.stopPropagation();
+ }
+
+ onDeleteButtonPressed = (e: React.PointerEvent): void => {
+ console.log("delete down");
+ e.stopPropagation();
+ this.props.linkDoc.GetTAsync(KeyStore.LinkedFromDocs, Document, field => {
+ if (field) {
+ field.GetTAsync<ListField<Document>>(KeyStore.LinkedToDocs, ListField, field => {
+ if (field) {
+ field.Data.splice(field.Data.indexOf(this.props.linkDoc));
+ }
+ })
+ }
+ });
+ this.props.linkDoc.GetTAsync(KeyStore.LinkedToDocs, Document, field => {
+ if (field) {
+ field.GetTAsync<ListField<Document>>(KeyStore.LinkedFromDocs, ListField, field => {
+ if (field) {
+ field.Data.splice(field.Data.indexOf(this.props.linkDoc));
+ }
+ })
+ }
+ });
+ }
+
+ render() {
+
+ return (
+ <LinkEditor linkBox={this} />
+ // <div className="link-container">
+ // <div className="info-container">
+ // <div className="link-name">
+ // <p>{this.props.linkName}</p>
+ // </div>
+ // <div className="doc-name">
+ // <p>{this.props.type}{this.props.pairedDoc.Title}</p>
+ // </div>
+ // </div>
+
+ // <div className="button-container">
+ // <div className="button" onPointerDown={this.onViewButtonPressed}></div>
+ // <div className="button" onPointerDown={this.onEditButtonPressed}></div>
+ // <div className="button" onPointerDown={this.onDeleteButtonPressed}></div>
+ // </div>
+ // </div>
+ )
+ }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/LinkEditor.scss b/src/client/views/nodes/LinkEditor.scss
new file mode 100644
index 000000000..b5db19b65
--- /dev/null
+++ b/src/client/views/nodes/LinkEditor.scss
@@ -0,0 +1,16 @@
+.edit-container {
+ width: 100%;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+}
+
+.name-input {
+ margin-bottom: 10px;
+ font-size: 12px;
+}
+
+.description-input {
+ height: 100px;
+ font-size: 10px;
+} \ No newline at end of file
diff --git a/src/client/views/nodes/LinkEditor.tsx b/src/client/views/nodes/LinkEditor.tsx
new file mode 100644
index 000000000..38cfef239
--- /dev/null
+++ b/src/client/views/nodes/LinkEditor.tsx
@@ -0,0 +1,37 @@
+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 { props } from "bluebird";
+import { DocumentView } from "./DocumentView";
+import { Document } from "../../../fields/Document";
+import { ListField } from "../../../fields/ListField";
+import { DocumentManager } from "../../util/DocumentManager";
+import { LinkBox } from "./LinkBox";
+
+interface Props {
+ linkBox: LinkBox;
+}
+
+@observer
+export class LinkEditor extends React.Component<Props> {
+
+ onSaveButtonPressed = (e: React.PointerEvent): void => {
+ console.log("view down");
+ e.stopPropagation();
+
+ }
+
+ render() {
+
+ return (
+ <div className="edit-container">
+ <input className="name-input" type="text" placeholder="Name..."></input>
+ <input className="description-input" type="text" placeholder="Description"></input>
+ </div>
+
+ )
+ }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/LinkMenu.scss b/src/client/views/nodes/LinkMenu.scss
new file mode 100644
index 000000000..af5b84ec6
--- /dev/null
+++ b/src/client/views/nodes/LinkMenu.scss
@@ -0,0 +1,20 @@
+#menu-container {
+ width: 100%;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+}
+
+#search-bar {
+ width: 100%;
+ padding: 5px;
+ margin-bottom: 10px;
+ font-size: 12px;
+}
+
+#link-list {
+ margin-top: 5px;
+ width: 100%;
+ height: 100px;
+ overflow-y: scroll;
+} \ No newline at end of file
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
new file mode 100644
index 000000000..577aba398
--- /dev/null
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -0,0 +1,58 @@
+import { observable, computed, action } from "mobx";
+import React = require("react");
+import { SelectionManager } from "../../util/SelectionManager";
+import { observer } from "mobx-react";
+import './LinkMenu.scss'
+import { KeyStore } from '../../../fields/KeyStore'
+import { props } from "bluebird";
+import { DocumentView } from "./DocumentView";
+import { LinkBox } from "./LinkBox"
+import { Document } from "../../../fields/Document";
+import { ListField } from "../../../fields/ListField";
+import { TextField } from "../../../fields/TextField";
+import { FieldWaiting } from "../../../fields/Field";
+
+interface Props {
+ docView: DocumentView;
+ changeFlyout: () => void
+}
+
+@observer
+export class LinkMenu extends React.Component<Props> {
+
+ render() {
+ //get list of links from document
+ let linkFrom: Document[] = this.props.docView.props.Document.GetData(KeyStore.LinkedFromDocs, ListField, []);
+ let linkTo: Document[] = this.props.docView.props.Document.GetData(KeyStore.LinkedToDocs, ListField, []);
+
+ return (
+ <div id="menu-container">
+ <input id="search-bar" type="text" placeholder="Search..."></input>
+ <div id="link-list">
+
+ {linkTo.map(link => {
+ let name = link.GetData(KeyStore.Title, TextField, new String);
+ let doc = link.GetT(KeyStore.LinkedToDocs, Document);
+ if (doc && doc != FieldWaiting) {
+ return <LinkBox linkDoc={link} linkName={name} pairedDoc={doc} type={"Destination: "} />
+ } else {
+ return <div></div>
+ }
+
+ })}
+
+ {linkFrom.map(link => {
+ let name = link.GetData(KeyStore.Title, TextField, new String);
+ let doc = link.GetT(KeyStore.LinkedFromDocs, Document);
+ if (doc && doc != FieldWaiting) {
+ return <LinkBox linkDoc={link} linkName={name} pairedDoc={doc} type={"Source: "} />
+ } else {
+ return <div></div>
+ }
+ })}
+ </div>
+
+ </div>
+ )
+ }
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-06 07:38:33 +0000