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/IconTagBox.tsx141
1 files changed, 16 insertions, 125 deletions
diff --git a/src/client/views/nodes/IconTagBox.tsx b/src/client/views/nodes/IconTagBox.tsx
index 8aa6bff2b..370ce51d1 100644
--- a/src/client/views/nodes/IconTagBox.tsx
+++ b/src/client/views/nodes/IconTagBox.tsx
@@ -1,13 +1,9 @@
import React from "react";
import { observer } from "mobx-react";
import { computed } from "mobx";
-
import { ObservableReactComponent } from "../ObservableReactComponent";
import { NumCast } from "../../../fields/Types";
-import { makeObservable } from "mobx";
import { Doc } from "../../../fields/Doc";
-import { Reaction } from "mobx";
-import { reaction } from "mobx";
import { numberRange } from "../../../Utils";
import { Tooltip } from "@mui/material";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -15,16 +11,9 @@ import { undoable } from "../../util/UndoManager";
import { BoolCast } from "../../../fields/Types";
import { DocCast } from "../../../fields/Types";
import './IconTagBox.scss';
-import { AclAdmin, AclAugment, AclEdit, DocData } from '../../../fields/DocSymbols';
+import {DocData } from '../../../fields/DocSymbols';
import { StrListCast } from "../../../fields/Doc";
import { StrCast } from "../../../fields/Types";
-import { DocListCast } from "../../../fields/Doc";
-import { List } from "../../../fields/List";
-import { action } from "mobx";
-import { DragManager } from "../../util/DragManager";
-import { setupMoveUpEvents } from "../../../ClientUtils";
-import { returnFalse } from "../../../ClientUtils";
-import { emptyFunction } from "../../../Utils";
import { CollectionViewType } from "../../documents/DocumentTypes";
import { SnappingManager } from "../../util/SnappingManager";
import { MainView } from "../MainView";
@@ -33,95 +22,28 @@ import { PropertiesView } from "../PropertiesView";
export interface IconTagProps {
doc: Doc;
-
-
}
+/**
+ * Renders the icon tags that rest under the document. The icons rendered are determined by the values of
+ * each icon in the userdoc.
+ */
@observer
export class IconTagBox extends ObservableReactComponent<IconTagProps> {
- private ref: React.RefObject<HTMLDivElement>;
- private height: number = 0;
-
-
@computed
get currentScale() {
- // console.log(NumCast((this._props.doc.embedContainer as Doc)?._freeform_scale, 1))
return NumCast((this._props.doc.embedContainer as Doc)?._freeform_scale, 1);
}
constructor(props: any) {
super(props);
- makeObservable(this);
- this.ref = React.createRef();
}
- // componentDidMount(): void {
- // this.height = this.ref.current?.getBoundingClientRect().height ? this.ref.current?.getBoundingClientRect().height : 0;
- // this._props.doc._keywordHeight = this.height;
-
- // reaction(
- // () => this.currentScale,
- // () => {
- // if (this.currentScale < 1) {
- // this.height = this.ref.current?.getBoundingClientRect().height ? this.ref.current?.getBoundingClientRect().height : 0;
- // this._props.doc._keywordHeight = this.height;
- // }
- // }
- // );
- // }
-
componentDidUpdate(prevProps: Readonly<IconTagProps>): void {
- // this.height = this.ref.current?.getBoundingClientRect().height ? this.ref.current?.getBoundingClientRect().height : 0;
this._props.doc[DocData].tagHeight = 36*this.currentScale;
}
- // createCollection = () => {
- // // Get the documents that contain the keyword.
- // const selected = DocListCast(this.getKeywordCollectionDocs()!);
- // const newEmbeddings = selected.map(doc => Doc.MakeEmbedding(doc));
-
- // // Create a new collection and set up configurations.
- // const newCollection = ((doc: Doc) => {
- // const docData = doc[DocData];
- // docData.data = new List<Doc>(newEmbeddings);
- // docData.title = this._props.keyword;
- // doc._freeform_panX = doc._freeform_panY = 0;
- // return doc;
- // })(Doc.MakeCopy(Doc.UserDoc().emptyCollection as Doc, true));
- // newEmbeddings.forEach(embed => (embed.embedContainer = newCollection));
- // newCollection._width = 900;
- // newCollection._height = 900;
- // newCollection.layout_fitWidth = true;
-
- // // Add the collection to the keyword document's list of associated smart collections.
- // this._props.keywordDoc.collections = new List<Doc>([...DocListCast(this._props.keywordDoc.collections), newCollection]);
- // newCollection[DocData].data_labels = new List<string>([this._props.keyword]);
- // newCollection[DocData][`${this._props.keyword}`] = true;
- // newCollection[DocData].showLabels = true;
- // return newCollection;
- // };
-
- // @action
- // handleDragStart = (e: React.PointerEvent) => {
- // if (this._props.isEditing) {
- // const clone = this.ref.current?.cloneNode(true) as HTMLElement;
- // if (!clone) return;
-
- // setupMoveUpEvents(
- // this,
- // e,
- // () => {
- // const dragData = new DragManager.DocumentDragData([this.createCollection()]);
- // DragManager.StartDocumentDrag([this.ref.current!], dragData, e.clientX, e.clientY, {});
- // return true;
- // },
- // returnFalse,
- // emptyFunction
- // );
- // e.preventDefault();
- // }
- // };
/**
* Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups
@@ -130,25 +52,10 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> {
* @returns
*/
renderButtons = (doc: Doc): JSX.Element | null => {
- // if (cardSort !== cardSortings.Custom) return null;
-
const amButtons = (StrListCast(Doc.UserDoc().myFilterHotKeyTitles).length) + 1
const keys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles)
-
-
- // const amButtons = Math.max(
- // 4,
- // this.childDocs?.reduce((set, d) => {
- // if (this.cardSort_customField) {
- // set.add(NumCast(d[this.cardSort_customField]));
- // }
- // return set;
- // }, new Set<number>()).size ?? 0
- // );
-
- // const activeButtonIndex = CollectionCardView.getButtonGroup(this.cardSort_customField, doc);
-
+
const totalWidth = (amButtons -1) * 35 + (amButtons -1) * 2 * 5 + 6;
const iconMap = (buttonID: number) => {
@@ -179,16 +86,14 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> {
</button>
</Tooltip>
))}
-
- {/* <Tooltip title={<div className="dash-tooltip">Click to customize these icons</div>}>
- <button type="button" onClick={() => this.openHotKeyMenu() }>
- <FontAwesomeIcon icon='gear' style={{ color: '#17438a', height: '30px', width: '30px'}} />
- </button>
- </Tooltip> */}
</div>
);
};
+ /**
+ * Opens the filter panel in the properties menu
+ */
+
openHotKeyMenu = () => {
SnappingManager.PropertiesWidth < 5 && SnappingManager.SetPropertiesWidth(0);
SnappingManager.SetPropertiesWidth(MainView.Instance.propertiesWidth() < 15 ? Math.min(MainView.Instance._dashUIWidth - 50, 250) : 0);
@@ -204,31 +109,19 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> {
* @param doc
*/
toggleButton = undoable((doc: Doc, icon: string) => {
-
-
-
- // this.cardSort_customField && (doc[this.cardSort_customField] = buttonID);
-
- // doc.cardSort_activeIcons = new List<string>()
-
-
- // const list = StrListCast(doc.cardSort_activeIcons);
- // doc.cardSort_activeIcons = new List<string>(list.includes(icon) ? list.filter(d => d !== icon) : [...list, icon]);
-
BoolCast(doc[icon]) ? doc[icon] = false : doc[icon] = true
-
-
- // StrListCast(doc.cardSort_activeIcons).push(iconMap[buttonID])
}, 'toggle card tag');
+ /**
+ * Determines whether or not the given icon is active depending on the doc's data
+ * @param doc
+ * @param icon
+ * @returns
+ */
getButtonIcon = (doc: Doc, icon: any): JSX.Element => {
-
- // const isActive = StrListCast(doc.cardSort_activeIcons).includes(icon)
const isActive = doc[icon]
-
- // console.log(StrListCast(doc.cardSort_activeIcons))
const color = isActive ? '#4476f7' : '#323232';
return <FontAwesomeIcon icon={icon} style={{ color , height: '30px', width: '30px'}} />;
@@ -244,8 +137,6 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> {
}
-
-
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-28 08:09:52 +0000