diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/client/util/CurrentUserUtils.ts | 3 | ||||
-rw-r--r-- | src/client/util/DragManager.ts | 2 | ||||
-rw-r--r-- | src/client/util/SettingsManager.tsx | 6 | ||||
-rw-r--r-- | src/client/util/SnappingManager.ts | 3 | ||||
-rw-r--r-- | src/client/views/DocumentDecorations.tsx | 2 | ||||
-rw-r--r-- | src/client/views/LightboxView.tsx | 7 | ||||
-rw-r--r-- | src/client/views/MainView.tsx | 6 | ||||
-rw-r--r-- | src/client/views/StyleProvider.tsx | 11 | ||||
-rw-r--r-- | src/client/views/collections/TabDocView.tsx | 2 | ||||
-rw-r--r-- | src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 3 | ||||
-rw-r--r-- | src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx | 5 | ||||
-rw-r--r-- | src/client/views/newlightbox/NewLightboxView.tsx | 3 | ||||
-rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 6 | ||||
-rw-r--r-- | src/client/views/topbar/TopBar.tsx | 7 |
14 files changed, 39 insertions, 27 deletions
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<Doc> = 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<Doc>) => 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<DocumentDecora } @computed get Bounds() { - return (LinkFollower.IsFollowing || DocumentView.ExploreMode) ? + return (LinkFollower.IsFollowing || SnappingManager.ExploreMode) ? { x: 0, y: 0, r: 0, b: 0 } : SelectionManager.Views .filter(dv => 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<LightboxViewProps> { 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<LightboxViewProps> { }; 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<LightboxViewProps> { {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)} </div> ); } 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<Doc>, props: Opt<DocumentViewProps '' ); case StyleProp.Color: - if (DocumentView.LastPressedSidebarBtn === doc) return SettingsManager.userBackgroundColor; + if (SettingsManager.Instance.LastPressedBtn === doc) return SettingsManager.userBackgroundColor; if (Doc.IsSystem(doc!)) return SettingsManager.userColor; if (doc?.type === DocumentType.FONTICON) return SettingsManager.userColor; const docColor: Opt<string> = StrCast(doc?.[fieldKey + 'color'], StrCast(doc?._color)); @@ -199,7 +200,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps ? titleHeight() : 0; case StyleProp.BackgroundColor: { - if (DocumentView.LastPressedSidebarBtn === doc) return SettingsManager.userColor; // hack to indicate active menu panel item + if (SettingsManager.Instance.LastPressedBtn === doc) return SettingsManager.userColor; // hack to indicate active menu panel item let docColor: Opt<string> = 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<Doc>, props: Opt<DocumentViewProps case StyleProp.PointerEvents: if (StrCast(doc?.pointerEvents) && !docProps?.LayoutTemplateString?.includes(KeyValueBox.name)) return StrCast(doc!.pointerEvents); // honor pointerEvents field (set by lock button usually) if it's not a keyValue view of the Doc if (docProps?.DocumentView?.()._props.LayoutTemplateString?.includes(KeyValueBox.name)) return 'all'; - if (DocumentView.ExploreMode || doc?.layout_unrendered) return isInk() ? 'visiblePainted' : 'all'; + if (SnappingManager.ExploreMode || doc?.layout_unrendered) return isInk() ? 'visiblePainted' : 'all'; if (props?.pointerEvents?.() === 'none') return 'none'; if (opacity() === 0) return 'none'; if (props?.isGroupActive?.() ) return isInk() ? 'visiblePainted': (doc?. diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 783817b06..ac0ce7a2a 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -435,7 +435,7 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> { 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<SubCollectionViewProps if (Utils.isClick(e.clientX, e.clientY, this._downX, this._downY, Date.now())) { if (Doc.ActiveTool === InkTool.None) { if (!this._props.trySelectCluster(e.shiftKey)) { - !DocumentView.ExploreMode && this.setPreviewCursor(e.clientX, e.clientY, false, false, this._props.Document); + !SnappingManager.ExploreMode && this.setPreviewCursor(e.clientX, e.clientY, false, false, this._props.Document); } else e.stopPropagation(); } // let the DocumentView stopPropagation of this event when it selects this document diff --git a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx index 3a95e5f74..72b63cf8f 100644 --- a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx +++ b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx @@ -8,6 +8,7 @@ import { DocumentView, OpenWhereMod } from '../../nodes/DocumentView'; import { NewLightboxView } from '../NewLightboxView'; import './ButtonMenu.scss'; import { IButtonMenu } from './utils'; +import { SnappingManager } from '../../../util/SnappingManager'; export const ButtonMenu = (props: IButtonMenu) => { return ( @@ -39,10 +40,10 @@ export const ButtonMenu = (props: IButtonMenu) => { <div className="newLightboxView-exploreBtn" title="toggle explore mode to navigate among documents only" - style={{ background: DocumentView.ExploreMode ? 'white' : undefined }} + style={{ background: SnappingManager.ExploreMode ? 'white' : undefined }} onClick={action(e => { e.stopPropagation(); - DocumentView.ExploreMode = !DocumentView.ExploreMode; + SnappingManager.SetExploreMode(!SnappingManager.ExploreMode); })}></div> </div> ); 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<LightboxViewProps> { 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<DocumentViewInternalProps } const cm = ContextMenu.Instance; - if (!cm || (e as any)?.nativeEvent?.SchemaHandled || DocumentView.ExploreMode) return; + if (!cm || (e as any)?.nativeEvent?.SchemaHandled || SnappingManager.ExploreMode) return; if (e && !(e.nativeEvent as any).dash) { const onDisplay = () => { @@ -1337,10 +1337,8 @@ export class DocumentView extends ObservableReactComponent<DocumentViewProps> { runInAction(() => (this._selected = val)); } @observable public static LongPress = false; - @observable public static ExploreMode = false; - @observable public static LastPressedSidebarBtn: Opt<Doc> = 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<string> = 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)} /> )} </div> |