From abacdb311ee658b74f009106f4e7751fc216af4b Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Thu, 18 Jul 2024 11:24:12 -0400 Subject: boutta get silly --- src/client/views/DocumentButtonBar.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'src/client/views/DocumentButtonBar.scss') diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index 11614d627..374d6ecd3 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -153,6 +153,10 @@ $linkGap: 3px; &:hover { background-color: $black; + + .documentButtonBar-pinTypes { + display: flex; + } } } -- cgit v1.2.3-70-g09d2 From a882dc6899a6b11e2e972f3e2a2ae991caeea094 Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Tue, 6 Aug 2024 14:48:49 -0400 Subject: locking into hotkey buttons --- src/client/util/CurrentUserUtils.ts | 24 +-- src/client/views/DocumentButtonBar.scss | 5 + src/client/views/DocumentButtonBar.tsx | 43 ++--- src/client/views/DocumentDecorations.tsx | 9 +- src/client/views/FilterPanel.scss | 64 +++++++ src/client/views/FilterPanel.tsx | 285 ++++++++++++++++++++++++++----- src/client/views/MainView.tsx | 3 +- src/client/views/nodes/IconTagBox.tsx | 38 +++-- 8 files changed, 380 insertions(+), 91 deletions(-) (limited to 'src/client/views/DocumentButtonBar.scss') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 67f8dafc4..0d8955ced 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -44,6 +44,7 @@ export interface Button { title?: string; toolTip?: string; icon?: string; + isSystem?: boolean; btnType?: ButtonType; numBtnMin?: number; numBtnMax?: number; @@ -713,14 +714,14 @@ pie title Minerals in my tap water // ] // } static tagGroupTools(): Button[] { - return [ - { title: "Star", icon: StrCast(Doc.UserDoc().myFilterHotKeyIcons) ?? "Star", toolTip:"Click to toggle the star group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"star", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, - { title: "Heart", icon: "heart", toolTip:"Click to toggle the heart group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"heart", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, - { title: "Bolt", icon: "bolt", toolTip:"Click to toggle the bolt group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"bolt", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, - { title: "Cloud", icon: "cloud", toolTip:"Click to toggle the cloud group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"cloud", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, - { title: "Options", icon: "gear", toolTip:"Click to customize your filter panel", btnType: ButtonType.ClickButton, expertMode: false, toolType:"opts", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, - - + // hack: if there's no dashboard, create default filters. otherwise, just make sure that the Options button is preserved + return (Doc.UserDoc().activeDashboard ? [] : [ + { title: "Star", isSystem: false, icon: "star", toolTip:"Click to toggle the star group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"star", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, + { title: "Heart", isSystem: false,icon: "heart", toolTip:"Click to toggle the heart group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"heart", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, + { title: "Bolt", isSystem: false,icon: "bolt", toolTip:"Click to toggle the bolt group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"bolt", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, + { title: "Cloud", isSystem: false,icon: "cloud", toolTip:"Click to toggle the cloud group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"cloud", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}, + + // { title: "Group 1", icon, toolTip:"Click to toggle group 1's visibility", btnType: ButtonType.ToggleButton, width: 40, expertMode: false, toolType:"1", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // { title: "Group 2", icon, toolTip:"Click to toggle group 2's visibility", btnType: ButtonType.ToggleButton, width: 40, expertMode: false, toolType:"2", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // { title: "Group 3", icon, toolTip:"Click to toggle group 3's visibility", btnType: ButtonType.ToggleButton, width: 40, expertMode: false, toolType:"3", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, @@ -728,7 +729,9 @@ pie title Minerals in my tap water // { title: "", icon, toolTip:"Click to toggle group 5's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"5", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // { title: "", icon, toolTip:"Click to toggle group 6's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"6", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // { title: "", icon, toolTip:"Click to toggle group 7's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"7", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - ] + ]).concat([ + { title: "Options", isSystem: true,icon: "gear", toolTip:"Click to customize your filter panel", btnType: ButtonType.ClickButton, expertMode: false, toolType:"opts", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}} + ]) } static viewTools(): Button[] { return [ @@ -871,8 +874,9 @@ pie title Minerals in my tap water /// initializes a context menu button for the top bar context menu static setupContextMenuButton(params:Button, btnDoc?:Doc, btnContainer?:Doc) { const reqdOpts:DocumentOptions = { + isSystem: true, ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit, - color: Colors.WHITE, isSystem: true, + color: Colors.WHITE, _nativeWidth: params.width ?? 30, _width: params.width ?? 30, _height: 30, _nativeHeight: 30, linearBtnWidth: params.linearBtnWidth, toolType: params.toolType, expertMode: params.expertMode, diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index 374d6ecd3..ede277aae 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -29,6 +29,11 @@ $linkGap: 3px; background: black; height: 20px; align-items: center; + + .tags { + width: 40px; + + } } .documentButtonBar-followTypes { width: 20px; diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index c8df66535..c61ebfb4c 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -288,7 +288,7 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => ( const targetDoc = this.view0?.Document; const metaBtn = (name: string, icon: IconProp) => { - const tooltip = `Show ${name}`; + const tooltip = `Toggle ${name}`; return ( {tooltip}}>
@@ -298,18 +298,16 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => ( key={icon.toString()} size="sm" icon={icon} - // onPointerEnter={action(() => { - // this.subPin = - // (pinLayoutView ? 'Layout' : '') + - // (pinLayoutView && pinContentView ? ' &' : '') + - // (pinContentView ? ' Content View' : '') + - // (pinLayoutView && pinContentView ? '(shift+alt)' : pinLayoutView ? '(shift)' : pinContentView ? '(alt)' : ''); - // })} - // onPointerLeave={action(() => { - // this.subPin = ''; - // })} onClick={e => { - name === 'tags' ? targetDoc && (targetDoc[DocData].showIconTags = !targetDoc[DocData].showIconTags) : 'hi' + // console.log('wtfff') + // name === 'tags' ?? + if (name === 'tags'){ + (targetDoc && (targetDoc[DocData].showIconTags = !targetDoc[DocData].showIconTags)) + } else { + (targetDoc && (targetDoc[DocData].showLabels = !targetDoc[DocData].showLabels)) + } + + }} @@ -323,24 +321,27 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => ( return !targetDoc ? null : ( +
+
+ {metaBtn('tags', 'star')} + {metaBtn("keywords", 'id-card')} +
+ Open keyword menu
}>
{ - targetDoc[DocData].showLabels = !targetDoc[DocData].showLabels; - }}> + // targetDoc[DocData].showIconTags = !targetDoc[DocData].showIconTags; + }} + > -
- { - metaBtn('tags', "tag") - /* {pinBtn(true, false, 'window-maximize')} - {pinBtn(false, true, 'address-card')} - {pinBtn(true, true, 'id-card')} */} -
+
+
+ ); } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index b5d819b97..f3b4013f7 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -703,6 +703,7 @@ export class DocumentDecorations extends ObservableReactComponent CollectionFreeFormDocumentView.from(v)); + + + const keyWordTrans = doc[DocData].showLabels ? NumCast(doc[DocData].keywordHeight) : 0 + const tagTrans = doc[DocData].showIconTags ? NumCast(doc[DocData].tagHeight) : 0 + + return (
DocumentView.Selected()} /> diff --git a/src/client/views/FilterPanel.scss b/src/client/views/FilterPanel.scss index d6d2956aa..1877cc78b 100644 --- a/src/client/views/FilterPanel.scss +++ b/src/client/views/FilterPanel.scss @@ -1,3 +1,4 @@ + .filterBox-flyout { display: block; text-align: left; @@ -228,6 +229,69 @@ vertical-align: middle; } +.filterHotKey-button { + pointer-events: auto; + // padding-right: 8px; //5px; + width: 100%; //width: 25px; + border-radius: 5px; + // margin-right: 20px; + margin-bottom: 8px; + border-color: #d3d3d3; + border-style: solid; + border-width: thin; + transition: all 0.3s ease-out; + + &:hover{ + border-color: #e9e9e9; + background-color: #878484 + } + + + + &.active { + background-color: #878484; + + + + .icon-panel{ + display: flex + } + } +} + +.hotKeyButtons { + position: relative; + width: 100%; + // margin-top: 3px; + // // grid-column: 1/4; + // width: 100%; + // height: auto; + // display: flex; + // // flex-direction: row; + // // flex-wrap: wrap; + // padding-bottom: 5.5px; +} + +.hotKey-icon-button { + // pointer-events: auto; /* Re-enable pointer events for the buttons */ + + // width: 30px; + // height: 30px; + // border-color: $medium-blue; + background-color: transparent; + &.active{ + + + } + +} + +.icon-panel { + bottom: -14px; + + + +} // .sliderBox-outerDiv { // width: 30%;// width: calc(100% - 14px); // 14px accounts for handles that are at the max value of the slider that would extend outside the box // height: 40; // height: 100%; diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx index 332a89a96..e5f9fdb51 100644 --- a/src/client/views/FilterPanel.tsx +++ b/src/client/views/FilterPanel.tsx @@ -28,6 +28,19 @@ import { CurrentUserUtils } from '../util/CurrentUserUtils'; import { DocumentOptions } from '../documents/Documents'; import { DocUtils } from '../documents/DocUtils'; import { dropActionType } from '../util/DropActionTypes'; +import { Toggle } from 'browndash-components'; +import { SettingsManager } from '../util/SettingsManager'; +import { StrCast } from '../../fields/Types'; +import { ToggleType } from 'browndash-components'; +import { MultiToggle } from 'browndash-components'; +import { Type } from 'browndash-components'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { DocData } from '../../fields/DocSymbols'; +import { DocumentType } from '../documents/DocumentTypes'; +import { Tooltip } from '@mui/material'; +import { useLocalObservable } from 'mobx-react'; +import { useRef } from 'react'; +import { useEffect } from 'react'; interface filterProps { @@ -228,11 +241,14 @@ export class FilterPanel extends ObservableReactComponent { }; addHotkey() { - const buttons = DocCast(Doc.UserDoc().myContextMenuBtns); - const filter = buttons['Filter'] - const filter2 = DocCast(filter) - const but2 = Doc.UserDoc().myContextMenuBtns + const filter = DocCast(buttons.Filter); + const filter2 = DocCast(filter); + const but2 = Doc.UserDoc().myContextMenuBtns; + + console.log(DocCast(filter).data); + + //[idToDoc("0bec0963-95ac-4978-8606-8af4c7b9badd"),idToDoc("f740e910-bf83-4ee3-b13a-1e63c49dd254"),idToDoc("61db82b0-025a-4cb9-937b-97b1290e8f1a"),idToDoc("1046859f-34ac-4421-bc07-ee2f2cf812e2"),idToDoc("badaff47-3c3a-4b78-a7d6-f2cbc8e45ba0")] // const newCol = Docs.Create.CarouselDocument(DocListCast(doc[Doc.LayoutFieldKey(doc)]), { // _width: 250, @@ -251,59 +267,135 @@ export class FilterPanel extends ObservableReactComponent { // DocumentView.getDocumentView(DocCast(buttons['Card']))?.ComponentView?.addDocument?.(hm) - const hi = CurrentUserUtils.contextMenuTools() - - const newKey: Button = { title: "Cloud", icon: "cloud", toolTip:"Click to toggle the cloud group's visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"cloud", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}} - - - const heyy = [...hi, newKey] - - Doc.UserDoc().myFilterHotKeyIcons = "palette" - Doc.UserDoc().myFilterHotKeyTitles = "hi" - - CurrentUserUtils.setupContextMenuButtons(Doc.UserDoc()); - - - - Doc.UserDoc().hi = Docs.Create.FontIconDocument( - { title: '', - icon: 'map-pin', - - backgroundColor: '#ACCEF7', - layout_hideAllLinks: true, - _width: 15, - _height: 15, - _xPadding: 0, - } - ) - - - // buttons['Filter'] + // const hi = CurrentUserUtils.contextMenuTools() + + const newKey: Button = { + title: 'Bob', + icon: 'cloud', + toolTip: "Click to toggle the cloud group's visibility", + btnType: ButtonType.ToggleButton, + expertMode: false, + toolType: 'cloud', + funcs: {}, + scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}' }, + }; + + // const heyy = [...hi, newKey] + + Doc.UserDoc().myFilterHotKeyTitles = new List(['hi hi', 'supppp']) + + Doc.UserDoc()['hi hi'] = 'heart' + Doc.UserDoc()['supppp'] = 'star' + + // CurrentUserUtils.setupContextMenuButtons(Doc.UserDoc()); + + // Doc.UserDoc().hi = Docs.Create.FontIconDocument( + // { title: '', + // icon: 'map-pin', + + // backgroundColor: '#ACCEF7', + // layout_hideAllLinks: true, + // _width: 15, + // _height: 15, + // _xPadding: 0, + // } + // ) + + // // buttons['Filter'] + + // const reqdCtxtOpts: DocumentOptions = { + // title: 'Filter', + // undoIgnoreFields: new List(['width', 'linearView_IsOpen']), + // flexGap: 0, + // childDragAction: dropActionType.embed, + // childDontRegisterViews: true, + // linearView_IsOpen: true, + // ignoreClick: true, + // linearView_Expandable: false, + // _height: 35, + // }; + const ctxtMenuBtn = CurrentUserUtils.setupContextMenuBtn(newKey, filter); + ctxtMenuBtn.isSystem = ctxtMenuBtn[DocData].isSystem = undefined; + Doc.AddDocToList(filter, 'data', ctxtMenuBtn); + // // // DocUtils.AssignOpts(buttons, reqdCtxtOpts, ctxtMenuBtns); + + // DocUtils.AssignOpts(DocCast(buttons['Filter']), reqdCtxtOpts, [ctxtMenuBtns]); + // newCol && dv.ComponentView?.addDocument?.(newCol); + // console.log(but2 + "omgg") + // doc.cardSort_activeIcons = new List(list.includes(icon) ? list.filter(d => d !== icon) : [...list, icon]); - const reqdCtxtOpts:DocumentOptions = { title: "hi", undoIgnoreFields:new List(['width', "linearView_IsOpen"]), flexGap: 0, childDragAction: dropActionType.embed, childDontRegisterViews: true, linearView_IsOpen: true, ignoreClick: true, linearView_Expandable: false, _height: 35 }; - const ctxtMenuBtns = CurrentUserUtils.setupContextMenuBtn(newKey, buttons); - // DocUtils.AssignOpts(buttons, reqdCtxtOpts, ctxtMenuBtns); + // Doc.UserDoc().myContextMenuBtns = new List([...buttons, newKey as Doc]) + } + hotKeyButtons() { + const selected = DocumentView.SelectedDocs().lastElement(); - DocUtils.AssignOpts(DocCast(buttons['Filter']), reqdCtxtOpts, [ctxtMenuBtns]); + function isAttrFiltered(attr: string) { + if (selected && selected._childFilters != undefined && selected.type === DocumentType.COL) { + return StrListCast(selected._childFilters).some(filter => filter.includes(attr)); + } else { + return false; + } + // return selected._childFilters ? StrListCast(selected._childFilters).some(filter => filter.includes(attr)) : false; + } + const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles); - // newCol && dv.ComponentView?.addDocument?.(newCol); + console.log(hotKeys + 'hiihihi'); - // console.log(but2 + "omgg") + const hi = ['star', 'heart', 'bolt']; + - // doc.cardSort_activeIcons = new List(list.includes(icon) ? list.filter(d => d !== icon) : [...list, icon]); + //selecting a button should make t so that the the icon on the top filter panel becomes said icon + const buttons = hotKeys.map((hotKey, i) => ( + //
{ + // // if (e.target === e.currentTarget){ + // isAttrFiltered(hotKey) ? Doc.setDocFilter(selected, hotKey, true, 'remove') : Doc.setDocFilter(selected, hotKey, true, 'match'); + // // } + // }, hotKey)} - // Doc.UserDoc().myContextMenuBtns = new List([...buttons, newKey as Doc]) + // // style = {{backgroundColor: `${isAttrFiltered(hotKey) ? '#878484' : SettingsManager.userBackgroundColor}`}} + + + // > + {/* } + iconPlacement="left" + align="flex-start" + fillWidth + toggleType={ToggleType.BUTTON} + onClick={undoable(() => { + isAttrFiltered(hotKey) ? Doc.setDocFilter(selected, hotKey, true, 'remove') : Doc.setDocFilter(selected, hotKey, true, 'match'); + }, hotKey)} + /> */} + <> + + Click to customize this hotkey's icon
}> + + + + + + )); + + return buttons; } + // @observable iconPanelMap: Map = new Map(); + render() { return (
@@ -376,8 +468,9 @@ export class FilterPanel extends ObservableReactComponent {
-
+ +
{this.hotKeyButtons()}
); } @@ -486,3 +579,113 @@ export class FilterPanel extends ObservableReactComponent { return undefined; } } + + + +interface HotKeyButtonProps { + hotKey: string; + selected?: Doc +} + +const HotKeyIconButton: React.FC = observer(({ hotKey, selected}) => { + const state = useLocalObservable(() => ({ + isActive: false, + toggleActive() { + this.isActive = !this.isActive; + }, + deactivate() { + this.isActive = false; + } + })); + + const panelRef = useRef(null); + + const handleClick = () => { + state.toggleActive(); + + console.log(state.isActive + "hmmm") + }; + + const handleClickOutside = (event: MouseEvent) => { + if (panelRef.current && !panelRef.current.contains(event.target as Node)) { + state.deactivate(); + } + }; + + useEffect(() => { + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); + + const iconOpts = ['star', 'heart', 'bolt']; + + const iconPanel = iconOpts.map((icon, i) => ( + + )); + + const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles) + + return ( + <> + +
{ + + // if (e.target === e.currentTarget){ + isAttrFiltered(hotKey) ? Doc.setDocFilter(selected, hotKey, true, 'remove') : Doc.setDocFilter(selected, hotKey, true, 'match'); + // } + }, hotKey)} + + // style = {{backgroundColor: `${isAttrFiltered(hotKey) ? '#878484' : SettingsManager.userBackgroundColor}`}} + + + > +
+ Click to customize this hotkey's icon
}> + + + {state.isActive && ( +
+ {iconPanel} +
+ )} + + +
+ +

{hotKey.toUpperCase()}

+ + + + + + + + + + + ); +}); + + diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f552540b8..9da359e1b 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -551,7 +551,8 @@ export class MainView extends ObservableReactComponent<{}> { fa.faStar, fa.faCloud, fa.faBolt, - fa.faLightbulb + fa.faLightbulb, + fa.faX ] ); } diff --git a/src/client/views/nodes/IconTagBox.tsx b/src/client/views/nodes/IconTagBox.tsx index 9a2273c3a..73360b684 100644 --- a/src/client/views/nodes/IconTagBox.tsx +++ b/src/client/views/nodes/IconTagBox.tsx @@ -41,24 +41,24 @@ export class IconTagBox extends ObservableReactComponent { 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; - } - } - ); - } + // 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): void { - this.height = this.ref.current?.getBoundingClientRect().height ? this.ref.current?.getBoundingClientRect().height : 0; - this._props.doc._keywordHeight = this.height; + // this.height = this.ref.current?.getBoundingClientRect().height ? this.ref.current?.getBoundingClientRect().height : 0; + this._props.doc[DocData].tagHeight = 36*this.currentScale; } /** @@ -93,12 +93,16 @@ export class IconTagBox extends ObservableReactComponent { 3: 'bolt' }; + + return (