aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/nodes/LinkBox.tsx38
-rw-r--r--src/client/views/nodes/LinkEditor.scss32
-rw-r--r--src/client/views/nodes/LinkEditor.tsx250
-rw-r--r--src/client/views/nodes/LinkMenu.scss2
-rw-r--r--src/client/views/nodes/LinkMenu.tsx33
5 files changed, 171 insertions, 184 deletions
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index ebca1dc69..5597bb1aa 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -41,23 +41,23 @@ export class LinkBox extends React.Component<Props> {
this.props.showEditor();
}
- @action
- onDeleteButtonPressed = async (e: React.PointerEvent): Promise<void> => {
- e.stopPropagation();
- const [linkedFrom, linkedTo] = await Promise.all([Cast(this.props.linkDoc.linkedFrom, Doc), Cast(this.props.linkDoc.linkedTo, Doc)]);
- if (linkedFrom) {
- const linkedToDocs = Cast(linkedFrom.linkedToDocs, listSpec(Doc));
- if (linkedToDocs) {
- linkedToDocs.splice(linkedToDocs.indexOf(this.props.linkDoc), 1);
- }
- }
- if (linkedTo) {
- const linkedFromDocs = Cast(linkedTo.linkedFromDocs, listSpec(Doc));
- if (linkedFromDocs) {
- linkedFromDocs.splice(linkedFromDocs.indexOf(this.props.linkDoc), 1);
- }
- }
- }
+ // @action
+ // onDeleteButtonPressed = async (e: React.PointerEvent): Promise<void> => {
+ // e.stopPropagation();
+ // const [linkedFrom, linkedTo] = await Promise.all([Cast(this.props.linkDoc.linkedFrom, Doc), Cast(this.props.linkDoc.linkedTo, Doc)]);
+ // if (linkedFrom) {
+ // const linkedToDocs = Cast(linkedFrom.linkedToDocs, listSpec(Doc));
+ // if (linkedToDocs) {
+ // linkedToDocs.splice(linkedToDocs.indexOf(this.props.linkDoc), 1);
+ // }
+ // }
+ // if (linkedTo) {
+ // const linkedFromDocs = Cast(linkedTo.linkedFromDocs, listSpec(Doc));
+ // if (linkedFromDocs) {
+ // linkedFromDocs.splice(linkedFromDocs.indexOf(this.props.linkDoc), 1);
+ // }
+ // }
+ // }
render() {
@@ -80,8 +80,8 @@ export class LinkBox extends React.Component<Props> {
<FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" /></div>
<div title="Edit Link" className="button" onPointerDown={this.onEditButtonPressed}>
<FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div>
- <div title="Delete Link" className="button" onPointerDown={this.onDeleteButtonPressed}>
- <FontAwesomeIcon className="fa-icon" icon="times" size="sm" /></div>
+ {/* <div title="Delete Link" className="button" onPointerDown={this.onDeleteButtonPressed}>
+ <FontAwesomeIcon className="fa-icon" icon="times" size="sm" /></div> */}
</div>
</div>
);
diff --git a/src/client/views/nodes/LinkEditor.scss b/src/client/views/nodes/LinkEditor.scss
index d3ac8cf19..b56f3046a 100644
--- a/src/client/views/nodes/LinkEditor.scss
+++ b/src/client/views/nodes/LinkEditor.scss
@@ -74,6 +74,7 @@
}
.linkEditor-group-row {
display: flex;
+ margin-bottom: 6px;
.linkEditor-group-row-label {
margin-right: 6px;
}
@@ -81,8 +82,17 @@
.linkEditor-metadata-row {
display: flex;
justify-content: space-between;
+ margin-bottom: 6px;
input {
- width: calc(50% - 2px);
+ width: calc(50% - 18px);
+ height: 20px;
+ }
+ button {
+ width: 20px;
+ height: 20px;
+ margin-left: 6px;
+ padding: 0;
+ font-size: 14px;
}
}
}
@@ -90,6 +100,7 @@
.linkEditor-dropdown {
width: 100%;
position: relative;
+ z-index: 999;
.linkEditor-options-wrapper {
width: 100%;
position: absolute;
@@ -107,4 +118,23 @@
background-color: $light-color-secondary;
}
}
+}
+
+.linkEditor-group-buttons {
+ height: 20px;
+ display: flex;
+ justify-content: space-between;
+ button {
+ width: 31%;
+ height: 20px;
+ margin-left: 6px;
+ padding: 0;
+ font-size: 10px;
+ &:first-child { // delete
+ font-size: 14px;
+ }
+ &:disabled { // delete
+ background-color: gray;
+ }
+ }
} \ No newline at end of file
diff --git a/src/client/views/nodes/LinkEditor.tsx b/src/client/views/nodes/LinkEditor.tsx
index 8d12bc30f..05e05c2ee 100644
--- a/src/client/views/nodes/LinkEditor.tsx
+++ b/src/client/views/nodes/LinkEditor.tsx
@@ -1,11 +1,7 @@
import { observable, computed, action } from "mobx";
import React = require("react");
-import { SelectionManager } from "../../util/SelectionManager";
import { observer } from "mobx-react";
import './LinkEditor.scss';
-import { props } from "bluebird";
-import { DocumentView } from "./DocumentView";
-import { link } from "fs";
import { StrCast, Cast } from "../../../new_fields/Types";
import { Doc } from "../../../new_fields/Doc";
import { List } from "../../../new_fields/List";
@@ -21,7 +17,7 @@ import { string } from "prop-types";
library.add(faArrowLeft);
library.add(faEllipsisV);
-// this dropdown could be generalizeds
+// this dropdown could be generalized
@observer
class LinkGroupsDropdown extends React.Component<{ groupId: string, groupType: string, setGroup: (groupId: string, group: string) => void }> {
@observable private _searchTerm: string = "";
@@ -63,7 +59,7 @@ class LinkGroupsDropdown extends React.Component<{ groupId: string, groupType: s
if (!exactFound && this._searchTerm !== "") {
options.push(<div key={""} className="linkEditor-option"
- onClick={() => { this.createGroup(this._searchTerm); this.setGroupType(this._searchTerm); this.setSearchTerm("") }}>Create new "{this._searchTerm}" group</div>)
+ onClick={() => { this.createGroup(this._searchTerm); this.setGroupType(this._searchTerm); this.setSearchTerm("") }}>Define new "{this._searchTerm}" relationship</div>)
}
return options;
@@ -82,6 +78,8 @@ class LinkGroupsDropdown extends React.Component<{ groupId: string, groupType: s
}
}
+
+
@observer
class LinkMetadataEditor extends React.Component<{ groupType: string, mdDoc: Doc, mdKey: string, mdValue: string }> {
@observable private _key: string = this.props.mdKey;
@@ -111,11 +109,28 @@ class LinkMetadataEditor extends React.Component<{ groupType: string, mdDoc: Doc
this._value = value;
}
+ @action
+ removeMetadata = (): void => {
+ let groupMdKeys = new Array(...LinkManager.Instance.allGroups.get(this.props.groupType)!);
+ if (groupMdKeys) {
+ let index = groupMdKeys.indexOf(this._key);
+ if (index > -1) {
+ groupMdKeys.splice(index, 1);
+ }
+ else {
+ console.log("OLD KEY WAS NOT FOUND", ...groupMdKeys)
+ }
+ }
+ this._key = "";
+ LinkManager.Instance.allGroups.set(this.props.groupType, groupMdKeys);
+ }
+
render() {
return (
<div className="linkEditor-metadata-row">
<input type="text" value={this._key} placeholder="key" onChange={e => this.editMetadataKey(e.target.value)}></input>:
<input type="text" value={this._value} placeholder="value" onChange={e => this.editMetadataValue(e.target.value)}></input>
+ <button onClick={() => this.removeMetadata()}>X</button>
</div>
)
}
@@ -131,85 +146,129 @@ interface LinkEditorProps {
@observer
export class LinkEditor extends React.Component<LinkEditorProps> {
- @observable private _groups: Map<string, Doc> = new Map();
- @observable private _metadata: Map<string, Map<string, Doc>> = new Map();
+ @observable private _groups: Map<string, Doc> = new Map(); // map of temp group id to the corresponding group doc
constructor(props: LinkEditorProps) {
super(props);
let groups = new Map<string, Doc>();
- let metadata: Map<string, Map<string, Doc>> = new Map();
let groupList = (Doc.AreProtosEqual(props.sourceDoc, Cast(props.linkDoc.anchor1, Doc, new Doc))) ?
Cast(props.linkDoc.anchor1Groups, listSpec(Doc), []) : Cast(props.linkDoc.anchor2Groups, listSpec(Doc), []);
groupList.forEach(groupDoc => {
if (groupDoc instanceof Doc) {
let id = Utils.GenerateGuid();
groups.set(id, groupDoc);
-
- let metadataMap = new Map<string, Doc>();
- let metadataDocs = Cast(groupDoc.proto!.metadata, listSpec(Doc), []);
- metadataDocs.forEach(mdDoc => {
- if (mdDoc && mdDoc instanceof Doc) { // TODO: handle promise doc
- metadataMap.set(Utils.GenerateGuid(), mdDoc);
- }
- })
- metadata.set(id, metadataMap);
} else {
// promise doc
}
})
this._groups = groups;
- this._metadata = metadata;
}
- // @action
- // editGroup(groupId: string, value: string) {
- // let linkDoc = this.props.linkDoc.proto ? this.props.linkDoc.proto : this.props.linkDoc;
- // let groupDoc = this._groups.get(groupId);
- // if (groupDoc) {
- // groupDoc.proto!.type = value;
- // LinkUtils.setAnchorGroups(linkDoc, this.props.sourceDoc, [groupDoc]);
- // }
- // }
-
@action
- addGroup = (e: React.MouseEvent): void => {
- // create new document for group
- let groupDoc = Docs.TextDocument();
- groupDoc.proto!.title = "";
- groupDoc.proto!.metadata = new List<Doc>([]);
+ addGroup = (): void => {
+ console.log("before adding", ...Array.from(this._groups.keys()));
+
+ let index = Array.from(this._groups.values()).findIndex(groupDoc => {
+ return groupDoc["type"] === "New Group";
+ })
+ if (index === -1) {
+ // create new document for group
+ let groupDoc = Docs.TextDocument();
+ groupDoc.proto!.type = "New Group";
+ groupDoc.proto!.metadata = Docs.TextDocument();
- this._groups.set(Utils.GenerateGuid(), groupDoc);
+ this._groups.set(Utils.GenerateGuid(), groupDoc);
- let linkDoc = this.props.linkDoc.proto ? this.props.linkDoc.proto : this.props.linkDoc;
- LinkUtils.setAnchorGroups(linkDoc, this.props.sourceDoc, Array.from(this._groups.values()));
+ let linkDoc = this.props.linkDoc.proto ? this.props.linkDoc.proto : this.props.linkDoc;
+ LinkUtils.setAnchorGroups(linkDoc, this.props.sourceDoc, Array.from(this._groups.values()));
+ }
+
+
+ // console.log("set anchor groups for", this.props.sourceDoc["title"]);
+ console.log("after adding", ...Array.from(this._groups.keys()));
}
@action
- setGroup = (groupId: string, group: string): void => {
+ setGroupType = (groupId: string, groupType: string): void => {
+ console.log("setting for ", groupId);
let linkDoc = this.props.linkDoc.proto ? this.props.linkDoc.proto : this.props.linkDoc;
let groupDoc = this._groups.get(groupId);
if (groupDoc) {
- groupDoc.proto!.type = group;
- LinkUtils.setAnchorGroups(linkDoc, this.props.sourceDoc, [groupDoc]);
+ console.log("found group doc");
+ groupDoc.proto!.type = groupType;
+
+ this._groups.set(groupId, groupDoc);
+
+ let gd = this._groups.get(groupId);
+ if (gd)
+ console.log("just created", StrCast(gd["type"]));
+
+ LinkUtils.setAnchorGroups(linkDoc, this.props.sourceDoc, Array.from(this._groups.values()));
+ console.log("set", Array.from(this._groups.values()).length)
+ }
+
+ let anchor1groups: string[] = [];
+ Cast(this.props.linkDoc.anchor1Groups, listSpec(Doc), []).forEach(doc => {
+ if (doc instanceof Doc) {
+ anchor1groups.push(StrCast(doc.proto!.type));
+ } else {
+ console.log("promise");
+ }
+ })
+ let anchor2groups: string[] = [];
+ Cast(this.props.linkDoc.anchor2Groups, listSpec(Doc), []).forEach(doc => {
+ if (doc instanceof Doc) {
+ anchor2groups.push(StrCast(doc.proto!.type));
+ } else {
+ console.log("promise");
+ }
+ })
+ console.log("groups for anchors; anchor1: [", ...anchor1groups, "] ; anchor2: [", ...anchor2groups, "]")
+ }
+
+ removeGroupFromLink = (groupId: string, groupType: string) => {
+ // this._groups.delete(groupId);
+ let groupDoc = this._groups.get(groupId);
+ if (groupDoc) {
+ LinkUtils.removeGroupFromAnchor(this.props.linkDoc, this.props.sourceDoc, groupType);
+ this._groups.delete(groupId);
+ }
+ // LinkUtils.setAnchorGroups(this.props.linkDoc, this.props.sourceDoc, Array.from(this._groups.values()));
+ console.log("\nremoved", groupId, "remaining", ...Array.from(this._groups.keys()), "\n");
+ }
+
+ deleteGroup = (groupId: string, groupType: string) => {
+ let groupDoc = this._groups.get(groupId);
+ if (groupDoc) {
+ LinkManager.Instance.deleteGroup(groupType);
+ this._groups.delete(groupId);
}
}
renderGroup(groupId: string, groupDoc: Doc) {
- return (
- <div key={groupId} className="linkEditor-group">
- <div className="linkEditor-group-row">
- <p className="linkEditor-group-row-label">type:</p>
- <LinkGroupsDropdown groupId={groupId} groupType={StrCast(groupDoc.proto!.type)} setGroup={this.setGroup} />
- {/* <input key={groupId + "-type"} type="text" value={StrCast(groupDoc.proto!.type)} onChange={e => this.editGroup(groupId, e.target.value)}></input> */}
- {/* <input key={groupId + "-type"} type="text" value={StrCast(groupDoc.proto!.type)} onChange={e => this.editGroup(groupId, e.target.value)}></input> */}
+ let type = StrCast(groupDoc["type"]);
+ if ((type && LinkManager.Instance.allGroups.get(type)) || type === "New Group") {
+ return (
+ <div key={groupId} className="linkEditor-group">
+ <div className="linkEditor-group-row">
+ <p className="linkEditor-group-row-label">type:</p>
+ <LinkGroupsDropdown groupId={groupId} groupType={StrCast(groupDoc.proto!.type)} setGroup={this.setGroupType} />
+ </div>
+ {this.renderMetadata(groupId)}
+ <div className="linkEditor-group-buttons">
+ {groupDoc["type"] === "New Group" ? <button disabled={true} title="Add KVP">+</button> :
+ <button onClick={() => this.addMetadata(StrCast(groupDoc.proto!.type))} title="Add KVP">+</button>}
+ {/* <button onClick={this.viewGroupAsTable}>view group as table</button> */}
+ <button onClick={() => this.copyGroup(groupId, type)} title="Copy group to opposite anchor">↔</button>
+ <button onClick={() => this.removeGroupFromLink(groupId, type)} title="Remove group from link">x</button>
+ <button onClick={() => this.deleteGroup(groupId, type)} title="Delete group">xx</button>
+ </div>
</div>
- {this.renderMetadata(groupId)}
- {groupDoc["type"] === "*" ? <></> : <button onClick={() => this.addMetadata(StrCast(groupDoc.proto!.type))}>add kvp</button>}
- <button onClick={this.viewGroupAsTable}>view group as table</button>
- {/* <button onClick={() => this.addMetadata(StrCast(groupDoc.proto!.type))}>+</button> */}
- </div>
- )
+ )
+ } else {
+ return <></>
+ }
}
viewGroupAsTable = (): void => {
@@ -228,65 +287,6 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
}
LinkManager.Instance.allGroups.set(groupType, mdKeys);
- // // create new metadata doc
- // let mdDoc = Docs.TextDocument();
- // mdDoc.proto!.title = "";
- // mdDoc.proto!.value = "";
-
- // // append to map
- // let mdMap = this._metadata.get(groupId);
- // if (mdMap) {
- // mdMap.set(Utils.GenerateGuid(), mdDoc);
- // } else {
- // mdMap = new Map();
- // mdMap.set(Utils.GenerateGuid(), mdDoc);
- // }
-
- // // add to internal representation of metadata
- // this._metadata.set(groupId, mdMap);
-
- // // add to internatal representation of group
- // let groupDoc = this._groups.get(groupId);
- // if (groupDoc) {
- // groupDoc.proto!.metadata = new List<Doc>(Array.from(mdMap.values()));
- // this._groups.set(groupId, groupDoc);
- // }
-
- // // add to link doc
- // let linkDoc = this.props.linkDoc.proto ? this.props.linkDoc.proto : this.props.linkDoc;
- // LinkUtils.setAnchorGroups(linkDoc, this.props.sourceDoc, Array.from(this._groups.values()));
- }
-
- // @action
- // editMetadataTitle(groupId: string, mdId: string, value: string) {
- // let groupMd = this._metadata.get(groupId);
- // if (groupMd) {
- // let mdDoc = groupMd.get(mdId);
- // if (mdDoc) {
- // mdDoc.proto!.title = value;
- // }
- // }
- // // set group and link?
- // }
-
- // @action
- // editMetadataValue(groupId: string, mdId: string, value: string) {
- // let groupMd = this._metadata.get(groupId);
- // if (groupMd) {
- // let mdDoc = groupMd.get(mdId);
- // if (mdDoc) {
- // mdDoc.proto!.value = value;
- // }
- // }
- // // set group and link?
- // }
-
- @action
- editMetadataKey(groupId: string, value: string) {
- let groupDoc = this._groups.get(groupId);
- if (groupDoc) {
-
- }
}
renderMetadata(groupId: string) {
@@ -300,30 +300,10 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
groupMdKeys.forEach((key, index) => {
metadata.push(
<LinkMetadataEditor key={"mded-" + index} groupType={groupType} mdDoc={mdDoc} mdKey={key} mdValue={(mdDoc[key] === undefined) ? "" : StrCast(mdDoc[key])} />
- // <div key={key} className="linkEditor-metadata-row">
- // <input type="text" value={key} placeholder="key"></input>
- // :
- // <input type="text" value={(mdDoc[key] === undefined) ? "" : StrCast(mdDoc[key])} placeholder="value"></input>
- // </div>
)
})
}
}
-
-
- // let metadataMap = this._metadata.get(groupId);
- // if (metadataMap) {
- // metadataMap.forEach((mdDoc, mdId) => {
- // metadata.push(
- // <div key={mdId} className="linkEditor-metadata-row">
- // <input type="text" value={StrCast(mdDoc.proto!.title)} placeholder="key" onChange={e => this.editMetadataTitle(groupId, mdId, e.target.value)}></input>
- // :
- // <input type="text" value={StrCast(mdDoc.proto!.value)} placeholder="value" onChange={e => this.editMetadataValue(groupId, mdId, e.target.value)}></input>
- // </div>
- // )
- // })
- // }
-
return metadata;
}
@@ -340,10 +320,10 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
<button className="linkEditor-back" onPointerDown={() => this.props.showLinks()}><FontAwesomeIcon icon="arrow-left" size="sm" /></button>
<p className="linkEditor-linkedTo">editing link to: <b>{destination.proto!.title}</b></p>
<div className="linkEditor-groupsLabel">
- <b>Groups:</b>
- <button onClick={this.addGroup} title="Add Group">+</button>
+ <b>Relationships:</b>
+ <button onClick={() => this.addGroup()} title="Add Group">+</button>
</div>
- {groups}
+ {groups.length > 0 ? groups : <div className="linkEditor-group">There are currently no relationships associated with this link.</div>}
</div>
);
diff --git a/src/client/views/nodes/LinkMenu.scss b/src/client/views/nodes/LinkMenu.scss
index 860f31d8a..7e031b897 100644
--- a/src/client/views/nodes/LinkMenu.scss
+++ b/src/client/views/nodes/LinkMenu.scss
@@ -40,7 +40,7 @@
display: flex;
}
&:hover .link-menu-item-content {
- width: calc(100% - 72px);
+ width: calc(100% - 42px);
}
}
.link-menu-item-buttons {
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 21b5807ae..47bd6c3eb 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -32,7 +32,7 @@ export class LinkMenu extends React.Component<Props> {
// });
// }
- renderLinkGroupItems(links: Doc[]) {
+ renderGroup(links: Doc[]) {
let source = this.props.docView.Document;
return links.map(link => {
let destination = LinkUtils.findOppositeAnchor(link, source);
@@ -43,7 +43,7 @@ export class LinkMenu extends React.Component<Props> {
});
}
- renderLinkItems = (links: Map<string, Array<Doc>>): Array<JSX.Element> => {
+ renderLinks = (links: Map<string, Array<Doc>>): Array<JSX.Element> => {
let linkItems: Array<JSX.Element> = [];
links.forEach((links, group) => {
@@ -51,7 +51,7 @@ export class LinkMenu extends React.Component<Props> {
<div key={group} className="link-menu-group">
<p className="link-menu-group-name">{group}:</p>
<div className="link-menu-group-wrapper">
- {this.renderLinkGroupItems(links)}
+ {this.renderGroup(links)}
</div>
</div>
)
@@ -65,10 +65,7 @@ export class LinkMenu extends React.Component<Props> {
}
render() {
- //get list of links from document
- // let linkFrom = DocListCast(this.props.docView.props.Document.linkedFromDocs);
- // let linkTo = DocListCast(this.props.docView.props.Document.linkedToDocs);
- let related = LinkManager.Instance.findRelatedGroupedLinks(this.props.docView.props.Document);
+ let related: Map<string, Doc[]> = LinkManager.Instance.findRelatedGroupedLinks(this.props.docView.props.Document);
if (this._editingLink === undefined) {
return (
<div id="linkMenu-container">
@@ -76,31 +73,11 @@ export class LinkMenu extends React.Component<Props> {
<div id="linkMenu-list">
{/* {this.renderLinkItems(linkTo, "linkedTo", "Destination: ")}
{this.renderLinkItems(linkFrom, "linkedFrom", "Source: ")} */}
- {this.renderLinkItems(related)}
+ {this.renderLinks(related)}
</div>
</div>
);
} else {
- // let groups = new Map<string, Doc>();
- // let metadata: Map<string, Map<string, Doc>> = new Map();
- // let groupList = (Doc.AreProtosEqual(this.props.docView.props.Document, Cast(this._editingLink.anchor1, Doc, new Doc))) ?
- // Cast(this._editingLink.anchor1Groups, listSpec(Doc), []) : Cast(this._editingLink.anchor2Groups, listSpec(Doc), []);
- // groupList.forEach(groupDoc => {
- // if (groupDoc instanceof Doc) {
- // let id = Utils.GenerateGuid();
- // groups.set(id, groupDoc);
-
- // let metadataMap = new Map<string, Doc>();
- // let metadataDocs = Cast(groupDoc.proto!.metadata, listSpec(Doc), []);
- // metadataDocs.forEach(mdDoc => {
- // if (mdDoc && mdDoc instanceof Doc) { // TODO: handle promise doc
- // metadataMap.set(Utils.GenerateGuid(), mdDoc);
- // }
- // })
- // metadata.set(id, metadataMap);
- // }
- // })
-
return (
<LinkEditor sourceDoc={this.props.docView.props.Document} linkDoc={this._editingLink} showLinks={action(() => this._editingLink = undefined)}></LinkEditor>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-25 19:05:30 +0000