From 1a3aa8a4e79deb501fce0c89ace8ea960003d8cd Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 29 Dec 2023 10:50:42 -0500 Subject: fixed sidebar button highoighting. fixed explore mode. --- src/client/util/CurrentUserUtils.ts | 3 ++- src/client/util/DragManager.ts | 2 +- src/client/util/SettingsManager.tsx | 6 +++++- src/client/util/SnappingManager.ts | 3 +++ src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/LightboxView.tsx | 7 ++++--- src/client/views/MainView.tsx | 6 +++--- src/client/views/StyleProvider.tsx | 11 ++++++----- src/client/views/collections/TabDocView.tsx | 2 +- .../views/collections/collectionFreeForm/MarqueeView.tsx | 3 ++- src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx | 5 +++-- src/client/views/newlightbox/NewLightboxView.tsx | 3 ++- src/client/views/nodes/DocumentView.tsx | 6 ++---- src/client/views/topbar/TopBar.tsx | 7 ++++--- 14 files changed, 39 insertions(+), 27 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index dd72051fa..c1d74c398 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -30,6 +30,7 @@ import { LinkManager } from "./LinkManager"; import { ScriptingGlobals } from "./ScriptingGlobals"; import { ColorScheme } from "./SettingsManager"; import { UndoManager } from "./UndoManager"; +import { SnappingManager } from "./SnappingManager"; interface Button { // DocumentOptions fields a button can set @@ -1018,7 +1019,7 @@ export class CurrentUserUtils { } ScriptingGlobals.add(function MySharedDocs() { return Doc.MySharedDocs; }, "document containing all shared Docs"); -ScriptingGlobals.add(function IsExploreMode() { return DocumentView.ExploreMode; }, "is Dash in exploration mode"); +ScriptingGlobals.add(function IsExploreMode() { return SnappingManager.ExploreMode; }, "is Dash in exploration mode"); ScriptingGlobals.add(function IsNoviceMode() { return Doc.noviceMode; }, "is Dash in novice mode"); ScriptingGlobals.add(function toggleComicMode() { Doc.UserDoc().renderStyle = Doc.UserDoc().renderStyle === "comic" ? undefined : "comic"; }, "switches between comic and normal document rendering"); ScriptingGlobals.add(function importDocument() { return CurrentUserUtils.importDocument(); }, "imports files from device directly into the import sidebar"); diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index c711db31a..fe3a52be7 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -333,7 +333,7 @@ export namespace DragManager { export let CanEmbed = false; export let DocDragData: DocumentDragData | undefined; export function StartDrag(eles: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: DragCompleteEvent) => void, dragUndoName?: string) { - if (dragData.dropAction === 'none' || DocumentView.ExploreMode) return; + if (dragData.dropAction === 'none' || SnappingManager.ExploreMode) return; DocDragData = dragData as DocumentDragData; const batch = UndoManager.StartBatch(dragUndoName ?? 'document drag'); eles = eles.filter(e => e); diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index ccf6fb820..0233c4051 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -5,7 +5,7 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { BsGoogle } from 'react-icons/bs'; import { FaFillDrip, FaPalette } from 'react-icons/fa'; -import { Doc } from '../../fields/Doc'; +import { Doc, Opt } from '../../fields/Doc'; import { DashVersion } from '../../fields/DocSymbols'; import { BoolCast, Cast, NumCast, StrCast } from '../../fields/Types'; import { addStyleSheet, addStyleSheetRule, Utils } from '../../Utils'; @@ -43,6 +43,7 @@ export class SettingsManager extends React.Component<{}> { @observable private curr_password = ''; @observable private new_password = ''; @observable private new_confirm = ''; + @observable private _lastPressedSidebarBtn: Opt = undefined; // bcz: this is a hack to handle highlighting buttons in the leftpanel menu .. need to find a cleaner approach @observable activeTab = 'Accounts'; @observable public propertiesWidth: number = 0; @@ -94,6 +95,9 @@ export class SettingsManager extends React.Component<{}> { return StrCast(Doc.UserDoc().userBackgroundColor); } + public get LastPressedBtn() { return this._lastPressedSidebarBtn; } // prettier-ignore + public SetLastPressedBtn = (state?:Doc) => runInAction(() => (this._lastPressedSidebarBtn = state)); // prettier-ignore + @undoBatch selectUserMode = action((mode: string) => (Doc.noviceMode = mode === 'Novice')); @undoBatch changelayout_showTitle = action((e: React.ChangeEvent) => (Doc.UserDoc().layout_showTitle = (e.currentTarget as any).value ? 'title' : undefined)); @undoBatch changeFontFamily = action((font: string) => (Doc.UserDoc().fontFamily = font)); diff --git a/src/client/util/SnappingManager.ts b/src/client/util/SnappingManager.ts index b8bd90983..c4d299fa1 100644 --- a/src/client/util/SnappingManager.ts +++ b/src/client/util/SnappingManager.ts @@ -14,6 +14,7 @@ export class SnappingManager { @observable _canEmbed: boolean = false; @observable _horizSnapLines: number[] = []; @observable _vertSnapLines: number[] = []; + @observable _exploreMode = false; private constructor() { SnappingManager._manager = this; @@ -33,9 +34,11 @@ export class SnappingManager { public static get IsDragging() { return this.Instance._isDragging; } // prettier-ignore public static get IsResizing() { return this.Instance._isResizing; } // prettier-ignore public static get CanEmbed() { return this.Instance._canEmbed; } // prettier-ignore + public static get ExploreMode() { return this.Instance._exploreMode; } // prettier-ignore public static SetShiftKey = (down: boolean) => runInAction(() => (this.Instance._shiftKey = down)); // prettier-ignore public static SetCtrlKey = (down: boolean) => runInAction(() => (this.Instance._ctrlKey = down)); // prettier-ignore public static SetIsDragging = (drag: boolean) => runInAction(() => (this.Instance._isDragging = drag)); // prettier-ignore public static SetIsResizing = (doc: Opt) => runInAction(() => (this.Instance._isResizing = doc)); // prettier-ignore public static SetCanEmbed = (embed:boolean) => runInAction(() => (this.Instance._canEmbed = embed)); // prettier-ignore + public static SetExploreMode= (state:boolean) => runInAction(() => (this.Instance._exploreMode = state)); // prettier-ignore } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index f3da133c3..d2f23c2f3 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -97,7 +97,7 @@ export class DocumentDecorations extends ObservableReactComponent dv._props.renderDepth > 0) diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx index 7577f2935..ab3be3d7a 100644 --- a/src/client/views/LightboxView.tsx +++ b/src/client/views/LightboxView.tsx @@ -22,6 +22,7 @@ import './LightboxView.scss'; import { DocumentView, OpenWhere, OpenWhereMod } from './nodes/DocumentView'; import { DefaultStyleProvider, wavyBorderPath } from './StyleProvider'; import { ObservableReactComponent } from './ObservableReactComponent'; +import { SnappingManager } from '../util/SnappingManager'; interface LightboxViewProps { PanelWidth: number; @@ -77,7 +78,7 @@ export class LightboxView extends ObservableReactComponent { this._future = []; this._history = []; Doc.ActiveTool = InkTool.None; - DocumentView.ExploreMode = false; + SnappingManager.SetExploreMode(false); } SelectionManager.DeselectAll(); if (future) { @@ -172,7 +173,7 @@ export class LightboxView extends ObservableReactComponent { }; toggleFitWidth = () => this._doc && (this._doc._layout_fitWidth = !this._doc._layout_fitWidth); togglePen = () => (Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen); - toggleExplore = () => (DocumentView.ExploreMode = !DocumentView.ExploreMode); + toggleExplore = () => SnappingManager.SetExploreMode(!SnappingManager.ExploreMode); lightboxDoc = () => this._doc; lightboxWidth = () => this._props.PanelWidth - this.leftBorder * 2; @@ -286,7 +287,7 @@ export class LightboxView extends ObservableReactComponent { {toggleBtn('lightboxView-navBtn', 'toggle reading view', this._doc?._layout_fitWidth, 'book-open', 'book', this.toggleFitWidth)} {toggleBtn('lightboxView-tabBtn', 'open document in a tab', false, 'file-download', '', this.downloadDoc)} {toggleBtn('lightboxView-penBtn', 'toggle pen annotation', Doc.ActiveTool === InkTool.Pen, 'pen', '', this.togglePen)} - {toggleBtn('lightboxView-exploreBtn', 'toggle navigate only mode', DocumentView.ExploreMode, 'globe-americas', '', this.toggleExplore)} + {toggleBtn('lightboxView-exploreBtn', 'toggle navigate only mode', SnappingManager.ExploreMode, 'globe-americas', '', this.toggleExplore)} ); } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f2a1ca57e..094bd2adb 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -593,7 +593,7 @@ export class MainView extends ObservableReactComponent<{}> { Doc.AddDocToList(Doc.MyFilesystem, 'data', folder); }; - waitForDoubleClick = () => (DocumentView.ExploreMode ? 'never' : undefined); + waitForDoubleClick = () => (SnappingManager.ExploreMode ? 'never' : undefined); headerBarScreenXf = () => new Transform(-this.leftScreenOffsetOfMainDocView - this.leftMenuFlyoutWidth(), -this.headerBarDocHeight(), 1); mainScreenToLocalXf = () => new Transform(-this.leftScreenOffsetOfMainDocView - this.leftMenuFlyoutWidth(), -this.topOfMainDocContent, 1); addHeaderDoc = (doc: Doc | Doc[], annotationKey?: string) => (doc instanceof Doc ? [doc] : doc).reduce((done, doc) => Doc.AddDocToList(this.headerBarDoc, 'data', doc), true); @@ -873,11 +873,11 @@ export class MainView extends ObservableReactComponent<{}> { //setTimeout(action(() => (this._leftMenuFlyoutWidth += 0.5))); this._sidebarContent.proto = DocCast(button.target); - DocumentView.LastPressedSidebarBtn = button; + SettingsManager.Instance.SetLastPressedBtn(button); }); closeFlyout = action(() => { - DocumentView.LastPressedSidebarBtn = undefined; + SettingsManager.Instance.SetLastPressedBtn(undefined); this._panelContent = 'none'; this._sidebarContent.proto = undefined; this._leftMenuFlyoutWidth = 0; diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 3e7e4be90..c8f6d6013 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -4,6 +4,7 @@ import { Tooltip } from '@mui/material'; import { Dropdown, DropdownType, IconButton, IListItemProps, Shadows, Size, Type } from 'browndash-components'; import { action, runInAction, untracked } from 'mobx'; import { extname } from 'path'; +import * as React from 'react'; import { BsArrowDown, BsArrowDownUp, BsArrowUp } from 'react-icons/bs'; import { FaFilter } from 'react-icons/fa'; import { Doc, Opt, StrListCast } from '../../fields/Doc'; @@ -15,15 +16,15 @@ import { DocFocusOrOpen, DocumentManager } from '../util/DocumentManager'; import { IsFollowLinkScript } from '../util/LinkFollower'; import { LinkManager } from '../util/LinkManager'; import { SettingsManager } from '../util/SettingsManager'; +import { SnappingManager } from '../util/SnappingManager'; import { undoBatch, UndoManager } from '../util/UndoManager'; import { TreeSort } from './collections/TreeSort'; import { Colors } from './global/globalEnums'; -import { DocumentView, DocumentViewProps } from './nodes/DocumentView'; +import { DocumentViewProps } from './nodes/DocumentView'; import { FieldViewProps } from './nodes/FieldView'; import { KeyValueBox } from './nodes/KeyValueBox'; import { PropertiesView } from './PropertiesView'; import './StyleProvider.scss'; -import * as React from 'react'; export enum StyleProp { TreeViewIcon = 'treeView_Icon', @@ -164,7 +165,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt = StrCast(doc?.[fieldKey + 'color'], StrCast(doc?._color)); @@ -199,7 +200,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt = StrCast(doc?.[fieldKey + '_backgroundColor'], StrCast(doc?._backgroundColor, isCaption ? 'rgba(0,0,0,0.4)' : '')); // prettier-ignore switch (doc?.type) { @@ -266,7 +267,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt { disableMinimap = () => !this._document; whenChildContentActiveChanges = (isActive: boolean) => (this._isAnyChildContentActive = isActive); isContentActive = () => this._isContentActive; - waitForDoubleClick = () => (DocumentView.ExploreMode ? 'never' : undefined); + waitForDoubleClick = () => (SnappingManager.ExploreMode ? 'never' : undefined); @computed get docView() { return !this._activated || !this._document ? null : ( <> diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 2c65726b2..b22fdfa19 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -27,6 +27,7 @@ import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { SubCollectionViewProps } from '../CollectionSubView'; import { MarqueeOptionsMenu } from './MarqueeOptionsMenu'; import './MarqueeView.scss'; +import { SnappingManager } from '../../../util/SnappingManager'; interface MarqueeViewProps { getContainerTransform: () => Transform; @@ -321,7 +322,7 @@ export class MarqueeView extends ObservableReactComponent { return ( @@ -39,10 +40,10 @@ export const ButtonMenu = (props: IButtonMenu) => {
{ e.stopPropagation(); - DocumentView.ExploreMode = !DocumentView.ExploreMode; + SnappingManager.SetExploreMode(!SnappingManager.ExploreMode); })}>
); diff --git a/src/client/views/newlightbox/NewLightboxView.tsx b/src/client/views/newlightbox/NewLightboxView.tsx index f3cde3f5a..6980e31c1 100644 --- a/src/client/views/newlightbox/NewLightboxView.tsx +++ b/src/client/views/newlightbox/NewLightboxView.tsx @@ -23,6 +23,7 @@ import { emptyBounds, IBounds } from './ExploreView/utils'; import { NewLightboxHeader } from './Header'; import './NewLightboxView.scss'; import { RecommendationList } from './RecommendationList'; +import { SnappingManager } from '../../util/SnappingManager'; enum LightboxStatus { RECOMMENDATIONS = 'recommendations', @@ -126,7 +127,7 @@ export class NewLightboxView extends React.Component { this._docFilters && (this._docFilters.length = 0); this._future = this._history = []; Doc.ActiveTool = InkTool.None; - DocumentView.ExploreMode = false; + SnappingManager.SetExploreMode(false); } else { const l = DocUtils.MakeLinkToActiveAudio(() => doc).lastElement(); l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen'); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 336f65b85..cc7fca8d2 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -712,7 +712,7 @@ export class DocumentViewInternal extends DocComponent { @@ -1337,10 +1337,8 @@ export class DocumentView extends ObservableReactComponent { runInAction(() => (this._selected = val)); } @observable public static LongPress = false; - @observable public static ExploreMode = false; - @observable public static LastPressedSidebarBtn: Opt = undefined; // bcz: this is a hack to handle highlighting buttons in the leftpanel menu .. need to find a cleaner approach @computed public static get exploreMode() { - return () => (DocumentView.ExploreMode ? ScriptField.MakeScript('CollectionBrowseClick(documentView, clientX, clientY)', { documentView: 'any', clientX: 'number', clientY: 'number' })! : undefined); + return () => (SnappingManager.ExploreMode ? ScriptField.MakeScript('CollectionBrowseClick(documentView, clientX, clientY)', { documentView: 'any', clientX: 'number', clientY: 'number' })! : undefined); } @observable public docView: DocumentViewInternal | undefined | null = undefined; @observable public textHtmlOverlay: Opt = undefined; diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index d1c039d95..0f3487cd1 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -24,6 +24,7 @@ import { Colors } from '../global/globalEnums'; import { DocumentView, DocumentViewInternal } from '../nodes/DocumentView'; import { DefaultStyleProvider } from '../StyleProvider'; import './TopBar.scss'; +import { SnappingManager } from '../../util/SnappingManager'; /** * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user @@ -84,9 +85,9 @@ export class TopBar extends React.Component { type={Type.TERT} tooltip="Browsing mode for directly navigating to documents" size={Size.SMALL} - color={DocumentView.ExploreMode ? this.variantColor : this.color} - background={DocumentView.ExploreMode ? this.color : 'transparent'} - onClick={action(() => (DocumentView.ExploreMode = !DocumentView.ExploreMode))} + color={SnappingManager.ExploreMode ? this.variantColor : this.color} + background={SnappingManager.ExploreMode ? this.color : 'transparent'} + onClick={() => SnappingManager.SetExploreMode(!SnappingManager.ExploreMode)} /> )} -- cgit v1.2.3-70-g09d2