From ac580dab29fc5867680a54b2fbfd68f9d4e2a895 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 23 Aug 2024 15:23:07 -0400 Subject: changed keyword items to use a doc symbol for storage instead of a field. fixed sizing of docDecoartions around keyeword box to dynaically update accurately. Aded expand/collapse button for editing keywords --- src/client/views/DocumentDecorations.tsx | 4 +- src/client/views/KeywordBox.tsx | 91 ++++++++++++-------------------- src/client/views/StyleProvider.scss | 5 +- src/client/views/StyleProvider.tsx | 2 +- 4 files changed, 41 insertions(+), 61 deletions(-) (limited to 'src/client') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index ce1138b7a..19c4a097b 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -9,7 +9,7 @@ import { lightOrDark, returnFalse, setupMoveUpEvents } from '../../ClientUtils'; import { Utils, emptyFunction, numberValue } from '../../Utils'; import { DateField } from '../../fields/DateField'; import { Doc, DocListCast, Field, FieldType, HierarchyMapping, ReverseHierarchyMap } from '../../fields/Doc'; -import { AclAdmin, AclAugment, AclEdit, DocData } from '../../fields/DocSymbols'; +import { AclAdmin, AclAugment, AclEdit, DocData, KeywordsHeight } from '../../fields/DocSymbols'; import { Id } from '../../fields/FieldSymbols'; import { InkField } from '../../fields/InkField'; import { ScriptField } from '../../fields/ScriptField'; @@ -835,7 +835,7 @@ export class DocumentDecorations extends ObservableReactComponent DocumentView.Selected()} /> 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 { @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 { KeywordItem.RemoveLabel(this._props.doc, this._props.keyword, this._props.keywordDoc), `remove label ${this._props.keyword}`)} - icon={'X'} + icon={} style={{ width: '8px', height: '8px', marginLeft: '10px' }} /> )} @@ -207,7 +208,7 @@ export class KeywordItem extends ObservableReactComponent { } interface KeywordBoxProps { - Document: Doc; + View: DocumentView; } /** @@ -215,50 +216,28 @@ interface KeywordBoxProps { */ @observer export class KeywordBox extends ObservableReactComponent { - private _height: number = 0; private _ref: React.RefObject; 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): 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 { */ 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 : (
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 { }}>
+ {!keywordsList.length ? null : ( // + this.setToEditing(!this._isEditing)} icon={} /> + )} {keywordsList.map(keyword => ( - + ))}
{this.isEditing ? ( @@ -325,11 +307,6 @@ export class KeywordBox extends ObservableReactComponent { ); })}
-
- {!keywordsList.length ? null : ( // - (this._isEditing = false))} icon="x" /> - )} -
) : null} diff --git a/src/client/views/StyleProvider.scss b/src/client/views/StyleProvider.scss index 1d41697f5..6f6939d54 100644 --- a/src/client/views/StyleProvider.scss +++ b/src/client/views/StyleProvider.scss @@ -65,10 +65,13 @@ .keywords-list { display: flex; flex-wrap: wrap; + .iconButton-container { + min-height: unset !important; + } } .keyword { - padding: 5px 5px; + padding: 1px 5px; background-color: lightblue; border: 1px solid black; border-radius: 5px; diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 0fb4f7dd1..a841ec63a 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -363,7 +363,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt ); }; - const keywords = () => doc && CollectionFreeFormDocumentView.from(props?.DocumentView?.()) ? : null; + const keywords = () => props?.DocumentView?.() && CollectionFreeFormDocumentView.from(props.DocumentView()) ? : null; return ( <> {paint()} -- cgit v1.2.3-70-g09d2