aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/KeywordBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/KeywordBox.tsx')
-rw-r--r--src/client/views/KeywordBox.tsx91
1 files changed, 34 insertions, 57 deletions
diff --git a/src/client/views/KeywordBox.tsx b/src/client/views/KeywordBox.tsx
index 1460501db..841c5394b 100644
--- a/src/client/views/KeywordBox.tsx
+++ b/src/client/views/KeywordBox.tsx
@@ -1,19 +1,22 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Button, Colors, IconButton } from 'browndash-components';
-import { action, computed, makeObservable, observable, reaction } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
import { returnFalse, setupMoveUpEvents } from '../../ClientUtils';
import { Utils, emptyFunction } from '../../Utils';
import { Doc, DocListCast, StrListCast } from '../../fields/Doc';
-import { DocData } from '../../fields/DocSymbols';
+import { DocData, KeywordsHeight } from '../../fields/DocSymbols';
import { List } from '../../fields/List';
import { NumCast, StrCast } from '../../fields/Types';
import { DocumentType } from '../documents/DocumentTypes';
import { DragManager } from '../util/DragManager';
-import { SelectionManager } from '../util/SelectionManager';
import { SnappingManager } from '../util/SnappingManager';
import { undoable } from '../util/UndoManager';
import { ObservableReactComponent } from './ObservableReactComponent';
+import { DocumentView } from './nodes/DocumentView';
+import { FontIconBox } from './nodes/FontIconBox/FontIconBox';
interface KeywordItemProps {
doc: Doc;
@@ -163,20 +166,18 @@ export class KeywordItem extends ObservableReactComponent<KeywordItemProps> {
@action
handleDragStart = (e: React.PointerEvent) => {
- if (this._props.isEditing) {
- 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();
- }
+ 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();
};
render() {
@@ -197,7 +198,7 @@ export class KeywordItem extends ObservableReactComponent<KeywordItemProps> {
<IconButton
tooltip="Remove label"
onPointerDown={undoable(() => KeywordItem.RemoveLabel(this._props.doc, this._props.keyword, this._props.keywordDoc), `remove label ${this._props.keyword}`)}
- icon={'X'}
+ icon={<FontAwesomeIcon icon="times" size="sm" />}
style={{ width: '8px', height: '8px', marginLeft: '10px' }}
/>
)}
@@ -207,7 +208,7 @@ export class KeywordItem extends ObservableReactComponent<KeywordItemProps> {
}
interface KeywordBoxProps {
- Document: Doc;
+ View: DocumentView;
}
/**
@@ -215,50 +216,28 @@ interface KeywordBoxProps {
*/
@observer
export class KeywordBox extends ObservableReactComponent<KeywordBoxProps> {
- private _height: number = 0;
private _ref: React.RefObject<HTMLDivElement>;
constructor(props: any) {
super(props);
makeObservable(this);
this._ref = React.createRef();
-
- reaction(
- () => this.cur_height,
- () => {
- this._props.Document[DocData].keywordHeight = this._height;
- }
- );
}
@observable _currentInput = '';
- @observable _isEditing = !StrListCast(this._props.Document[DocData].tags).length;
+ @observable _isEditing = !StrListCast(this._props.View.dataDoc.tags).length;
@computed get currentScale() {
- return NumCast((this._props.Document.embedContainer as Doc)?._freeform_scale, 1);
+ return NumCast((this._props.View.Document.embedContainer as Doc)?._freeform_scale, 1);
}
-
- @computed get cur_height() {
- return this._ref.current?.offsetHeight ?? 0;
- }
-
@computed get isEditing() {
- return this._isEditing && SelectionManager.Docs().includes(this._props.Document);
- }
-
- componentDidMount() {
- this._height = this._ref.current?.offsetHeight ?? 0;
- this._props.Document[DocData].keywordHeight = this._height;
- }
-
- componentDidUpdate(prevProps: Readonly<KeywordBoxProps>): void {
- this._height = this._ref.current?.offsetHeight ?? 0;
- this._props.Document[DocData].keywordHeight = this._height;
+ return this._isEditing && DocumentView.SelectedDocs().includes(this._props.View.Document);
}
@action
- setToEditing = () => {
- this._isEditing = true;
+ setToEditing = (editing = true) => {
+ this._isEditing = editing;
+ editing && this._props.View.select(false);
};
/**
@@ -267,17 +246,17 @@ export class KeywordBox extends ObservableReactComponent<KeywordBoxProps> {
*/
submitLabel = undoable((keyword: string) => {
const submittedLabel = keyword.trim();
- submittedLabel && KeywordItem.addLabelToDoc(this._props.Document, '#' + submittedLabel.replace(/^#/, ''));
+ submittedLabel && KeywordItem.addLabelToDoc(this._props.View.Document, '#' + submittedLabel.replace(/^#/, ''));
this._currentInput = ''; // Clear the input box
}, 'added doc label');
render() {
- const keywordsList = StrListCast(this._props.Document[DocData].tags);
+ const keywordsList = StrListCast(this._props.View.dataDoc.tags);
- return !this._props.Document.showLabels ? null : (
+ return !this._props.View.Document.showLabels ? null : (
<div
className="keywords-container"
- ref={this._ref}
+ ref={r => r && new ResizeObserver(action(() => (this._props.View.Document[KeywordsHeight] = r?.getBoundingClientRect().height ?? 0))).observe(r)}
style={{
transformOrigin: 'top left',
maxWidth: `${100 * this.currentScale}%`,
@@ -288,8 +267,11 @@ export class KeywordBox extends ObservableReactComponent<KeywordBoxProps> {
}}>
<div className="keywords-content" style={{ width: '100%' }}>
<div className="keywords-list">
+ {!keywordsList.length ? null : ( //
+ <IconButton style={{ width: '8px' }} tooltip="Close Menu" onPointerDown={() => this.setToEditing(!this._isEditing)} icon={<FontAwesomeIcon icon={this._isEditing ? 'chevron-up' : 'chevron-down'} size="sm" />} />
+ )}
{keywordsList.map(keyword => (
- <KeywordItem key={keyword} doc={this._props.Document} keyword={keyword} keywordDoc={KeywordItem.findKeywordCollectionDoc(keyword)} setToEditing={this.setToEditing} isEditing={this.isEditing} />
+ <KeywordItem key={keyword} doc={this._props.View.Document} keyword={keyword} keywordDoc={KeywordItem.findKeywordCollectionDoc(keyword)} setToEditing={this.setToEditing} isEditing={this.isEditing} />
))}
</div>
{this.isEditing ? (
@@ -325,11 +307,6 @@ export class KeywordBox extends ObservableReactComponent<KeywordBoxProps> {
);
})}
</div>
- <div className="keyword-buttons">
- {!keywordsList.length ? null : ( //
- <IconButton style={{ width: '4px' }} tooltip="Close Menu" onPointerDown={action(() => (this._isEditing = false))} icon="x" />
- )}
- </div>
</div>
) : null}
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 01:50:45 +0000