aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/SelectionManager.ts4
-rw-r--r--src/client/views/PropertiesView.tsx88
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx23
3 files changed, 99 insertions, 16 deletions
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 2cba2c1f2..6674f684d 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -4,6 +4,7 @@ import { Doc, Opt } from "../../fields/Doc";
import { DocumentType } from "../documents/DocumentTypes";
import { CollectionViewType } from "../views/collections/CollectionView";
import { DocumentView } from "../views/nodes/DocumentView";
+import { CurrentUserUtils } from "./CurrentUserUtils";
export namespace SelectionManager {
@@ -43,6 +44,9 @@ export namespace SelectionManager {
}
@action
DeselectAll(): void {
+ if (CurrentUserUtils.propertiesWidth > 0) {
+ CurrentUserUtils.propertiesWidth = 0;
+ }
manager.SelectedSchemaDocument = undefined;
Array.from(manager.SelectedViews.keys()).map(dv => dv.props.whenChildContentsActiveChanged(false));
manager.SelectedViews.clear();
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index ab9022a84..334a44b3b 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -57,6 +57,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
@computed get isPres(): boolean {
return this.selectedDoc?.type === DocumentType.PRES;
}
+ @computed get isLink(): boolean {
+ return this.selectedDoc?.type === DocumentType.LINK;
+ }
@computed get dataDoc() { return this.selectedDoc?.[DataSym]; }
@observable layoutFields: boolean = false;
@@ -146,8 +149,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
if (key[0] === "#") {
rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "2px" }} key={key}>
<span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key}</span>
- &nbsp;
- </div>);
+ &nbsp;
+ </div>);
} else {
const contentElement = <EditableView key="editableView"
contents={contents !== undefined ? Field.toString(contents as Field) : "null"}
@@ -214,8 +217,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "-1px" }} key={key}>
<span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key + ":"}</span>
- &nbsp;
- {contentElement}
+ &nbsp;
+ {contentElement}
</div>);
}
}
@@ -855,7 +858,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
onPointerDown={action(() => this.openOptions = !this.openOptions)}
style={{ backgroundColor: this.openOptions ? "black" : "" }}>
Options
- <div className="propertiesView-settings-title-icon">
+ <div className="propertiesView-settings-title-icon">
<FontAwesomeIcon icon={this.openOptions ? "caret-down" : "caret-right"} size="lg" color="white" />
</div>
</div>
@@ -872,7 +875,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
onPointerDown={action(() => this.openSharing = !this.openSharing)}
style={{ backgroundColor: this.openSharing ? "black" : "" }}>
Sharing {"&"} Permissions
- <div className="propertiesView-sharing-title-icon">
+ <div className="propertiesView-sharing-title-icon">
<FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="white" />
</div>
</div>
@@ -948,7 +951,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
onPointerDown={action(() => this.openFilters = !this.openFilters)}
style={{ backgroundColor: this.openFilters ? "black" : "" }}>
Filters
- <div className="propertiesView-filters-title-icon">
+ <div className="propertiesView-filters-title-icon">
<FontAwesomeIcon icon={this.openFilters ? "caret-down" : "caret-right"} size="lg" color="white" />
</div>
</div>
@@ -997,7 +1000,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
onPointerDown={action(() => this.openAppearance = !this.openAppearance)}
style={{ backgroundColor: this.openAppearance ? "black" : "" }}>
Appearance
- <div className="propertiesView-appearance-title-icon">
+ <div className="propertiesView-appearance-title-icon">
<FontAwesomeIcon icon={this.openAppearance ? "caret-down" : "caret-right"} size="lg" color="white" />
</div>
</div>
@@ -1012,7 +1015,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
onPointerDown={action(() => this.openTransform = !this.openTransform)}
style={{ backgroundColor: this.openTransform ? "black" : "" }}>
Transform
- <div className="propertiesView-transform-title-icon">
+ <div className="propertiesView-transform-title-icon">
<FontAwesomeIcon icon={this.openTransform ? "caret-down" : "caret-right"} size="lg" color="white" />
</div>
</div>
@@ -1029,7 +1032,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
onPointerDown={action(() => this.openFields = !this.openFields)}
style={{ backgroundColor: this.openFields ? "black" : "" }}>
Fields {"&"} Tags
- <div className="propertiesView-fields-title-icon">
+ <div className="propertiesView-fields-title-icon">
<FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
</div>
</div>
@@ -1050,7 +1053,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
onPointerDown={action(() => this.openContexts = !this.openContexts)}
style={{ backgroundColor: this.openContexts ? "black" : "" }}>
Contexts
- <div className="propertiesView-contexts-title-icon">
+ <div className="propertiesView-contexts-title-icon">
<FontAwesomeIcon icon={this.openContexts ? "caret-down" : "caret-right"} size="lg" color="white" />
</div>
</div>
@@ -1064,7 +1067,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
onPointerDown={action(() => this.openLayout = !this.openLayout)}
style={{ backgroundColor: this.openLayout ? "black" : "" }}>
Layout
- <div className="propertiesView-layout-title-icon">
+ <div className="propertiesView-layout-title-icon">
<FontAwesomeIcon icon={this.openLayout ? "caret-down" : "caret-right"} size="lg" color="white" />
</div>
</div>
@@ -1072,6 +1075,14 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
</div>;
}
+ toggleAnchor = () => {
+ this.selectedDoc.anchor = !this.selectedDoc.anchor
+ }
+
+ toggleArrow = () => {
+ this.selectedDoc.arrow = !this.selectedDoc.arrow
+ }
+
/**
@@ -1095,6 +1106,57 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
</div>;
} else {
+ if (this.selectedDoc && this.isLink) {
+ return <div className="propertiesView">
+ <div className="propertiesView-title">
+ Linking
+ </div>
+ <div className="properties-grid col propertiesView-textInfo">
+ Information
+ <div className="row" id="propertiesView-label">
+ <p>Label</p>
+ <input type="text" />
+ </div>
+ <div className="row" id="propertiesView-category">
+ <p>Label</p>
+ <input type="text" />
+ </div>
+ <div className="row" id="propertiesView-description">
+ <p>Description</p>
+ <input type="text" />
+ </div>
+ </div>
+ <div className="propertiesView-behavior">
+ Behavior
+ <div id="propertiesView-follow">
+ Follow
+ <select name="selectList" id="selectList">
+ <option value="default">Default</option>
+ <option value="newLeft">Open in new left pane</option>
+ <option value="newRight">Open in new right pane</option>
+ <option value="replaceLeft">Replace left tab</option>
+ <option value="replaceRight">Replace right tab</option>
+ <option value="openFull">Open full screen</option>
+ <option value="openTab">Open in new tab</option>
+ </select>
+ </div>
+ <div id="propertiesView-anchor">
+ Auto-move anchor
+ <button
+ style={{ backgroundColor: this.selectedDoc.anchor ? 'blue' : 'white', width: 50, height: 50 }}
+ onClick={this.toggleAnchor}
+ />
+ </div>
+ <div id="propertiesView-arrow">
+ Auto-move arrow
+ <button
+ style={{ backgroundColor: this.selectedDoc.arrow ? 'blue' : 'white', width: 50, height: 50 }}
+ onClick={this.toggleArrow}
+ />
+ </div>
+ </div>
+ </div>;
+ }
if (this.selectedDoc && !this.isPres) {
return <div className="propertiesView" style={{
width: this.props.width,
@@ -1148,7 +1210,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
onPointerDown={action(() => { this.openPresTransitions = !this.openPresTransitions; })}
style={{ backgroundColor: this.openPresTransitions ? "black" : "" }}>
&nbsp; <FontAwesomeIcon style={{ alignSelf: "center" }} icon={"rocket"} /> &nbsp; Transitions
- <div className="propertiesView-presTrails-title-icon">
+ <div className="propertiesView-presTrails-title-icon">
<FontAwesomeIcon icon={this.openPresTransitions ? "caret-down" : "caret-right"} size="lg" color="white" />
</div>
</div>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 9769453a0..d4ef76221 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -11,6 +11,7 @@ import { SnappingManager } from "../../../util/SnappingManager";
import { DocumentView } from "../../nodes/DocumentView";
import "./CollectionFreeFormLinkView.scss";
import React = require("react");
+import { CurrentUserUtils } from "../../../util/CurrentUserUtils";
export interface CollectionFreeFormLinkViewProps {
@@ -138,6 +139,20 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
return left; //top <= document.documentElement.clientHeight && getComputedStyle(document.documentElement).overflow === "hidden";
}
+ @action
+ toggleProperties = () => {
+ if (CurrentUserUtils.propertiesWidth > 0) {
+ CurrentUserUtils.propertiesWidth = 0;
+ } else {
+ CurrentUserUtils.propertiesWidth = 250;
+ }
+ }
+
+ onClickLine = () => {
+ SelectionManager.SelectSchemaViewDoc(this.props.LinkDocs[0], true)
+ this.toggleProperties()
+ }
+
@computed.struct get renderData() {
this._start; SnappingManager.GetIsDragging();
const { A, B, LinkDocs } = this.props;
@@ -198,9 +213,11 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
const strokeWidth = linkSize === -1 ? "3px" : Math.floor(2 + 10 * (linkSize / Math.max(...linkRelationshipSizes))) + "px";
return !a.width || !b.width || ((!this.props.LinkDocs[0].linkDisplay) && !aActive && !bActive) ? (null) : (<>
- <path className="collectionfreeformlinkview-linkLine" style={{ pointerEvents: "all", opacity: this._opacity, strokeDasharray: SelectionManager.SelectedSchemaDoc() === this.props.LinkDocs[0] ? "2 2" : undefined, stroke, strokeWidth }}
- onClick={() => SelectionManager.SelectSchemaViewDoc(this.props.LinkDocs[0], true)}
- d={`M ${pt1[0]} ${pt1[1]} C ${pt1[0] + pt1norm[0]} ${pt1[1] + pt1norm[1]}, ${pt2[0] + pt2norm[0]} ${pt2[1] + pt2norm[1]}, ${pt2[0]} ${pt2[1]}`} />
+ <path className="collectionfreeformlinkview-linkLine" style={{ pointerEvents: "all", opacity: this._opacity, stroke: SelectionManager.SelectedSchemaDoc() === this.props.LinkDocs[0] ? "red" : stroke, strokeWidth }}
+ onClick={this.onClickLine}
+ onPointerOver={() => {
+ console.log(this.props.LinkDocs[0].directed)
+ }} />
{textX === undefined ? (null) : <text className="collectionfreeformlinkview-linkText" x={textX} y={textY} onPointerDown={this.pointerDown} >
{Field.toString(this.props.LinkDocs[0].description as any as Field)}
</text>}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 18:05:57 +0000