Skip to content

Commit

Permalink
refactor: refactored the positioning system of the toolbar in the
Browse files Browse the repository at this point in the history 
"following".

- Refactored isExistoolbar() to get rid of deprecated code
  (i.e., `activeLeaf`), and to simplify the code.

- Refactor the way the toolbar's position is calculated for the
  "following" mode, to make sure the toolbar:
  - Is always visible, even when we the user selects the last
    or first line in the editor.
  - To try not to overflow over the File Explorer or the Outline.

- Refactored getModestate() into isSource().
  Since getModestate() doesn't really get the mode state but rather
  returns whether the MarkdownView mode state is "source" or not, I
  renamed it to isSource(), and simplified the function in the process.
  • Loading branch information
@s4my
s4my committed Apr 9, 2024
1 parent 26703ef commit b38e265
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 93 deletions.
137 changes: 48 additions & 89 deletions src/modals/cMenuToolbarModal.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,16 +102,12 @@ export function selfDestruct() {
}

export function isExistoolbar(app: App, settings: cMenuToolbarSettings): HTMLElement {
const position = settings.positionStyle;
let container;
requireApiVersion("0.15.0") ? activeDocument = activeWindow.document : activeDocument = window.document;
position == "top" ? container = app.workspace.activeLeaf?.view.containerEl?.querySelector("#cMenuToolbarModalBar")
: container = activeDocument.getElementById("cMenuToolbarModalBar");
if (container) {
return container as HTMLElement;
} else {
return null
}
let container = settings.positionStyle == "top" ?
app.workspace.getActiveViewOfType(MarkdownView).containerEl?.querySelector("#cMenuToolbarModalBar") :
activeDocument.getElementById("cMenuToolbarModalBar");

return (container) ? container as HTMLElement : null;
}


Expand Down Expand Up @@ -160,21 +156,11 @@ export const getCoords = (editor: any) => {
return coords;
};

export function getModestate(app: App) {
export function isSource(app: App) {
const activePane = app.workspace.getActiveViewOfType(MarkdownView);
// const view = app.workspace.getActiveViewOfType(ItemView);
//console.log(view?.getState().mode,"getState")

if (activePane) {
let currentmode = activePane?.getMode();
if (currentmode == "preview") {
return false;
} else
if (currentmode == "source") {
return true;
} else
return false;
}

if (activePane) return activePane.getMode() === "source";
return false;
}

export function checkHtml(htmlStr: string) {
Expand Down Expand Up @@ -479,81 +465,54 @@ export function setFormateraser(app: App, plugin: cMenuToolbarPlugin) {
app.commands.executeCommandById("editor:focus");

}

}
export const createFollowingbar = (app: App, settings: cMenuToolbarSettings) => {

let isource = getModestate(app);

let cMenuToolbarModalBar = isExistoolbar(app, settings);
//console.log(activeLeaf.getViewState().state.mode)
if (isource) {
const activeLeaf = app.workspace.getActiveViewOfType(MarkdownView);
const view = activeLeaf;
const editor = view.editor;


if (isSource(app)) {
if (cMenuToolbarModalBar) {
const editor = app.workspace.getActiveViewOfType(MarkdownView).editor;

cMenuToolbarModalBar.style.visibility = editor.somethingSelected() ? "visible" : "hidden";
cMenuToolbarModalBar.style.height = (settings.aestheticStyle === "tiny") ? 30 + "px" : 40 + "px";
cMenuToolbarModalBar.addClass("cMenuToolbarFlex");
cMenuToolbarModalBar.removeClass("cMenuToolbarGrid");

if (cMenuToolbarModalBar.style.visibility === "visible") {
// @ts-ignore
const editorRect = editor.containerEl.getBoundingClientRect();
const toolbarWidth = cMenuToolbarModalBar.offsetWidth;
const toolbarHeight = cMenuToolbarModalBar.offsetHeight;
const coords = getCoords(editor);
const isSelectionFromBottomToTop = editor.getCursor("head").ch == editor.getCursor("from").ch;
const rightMargin = 12;

const sideDockWidth = activeDocument.getElementsByClassName("mod-left-split")[0]?.clientWidth ?? 0;
const sideDockRibbonWidth = activeDocument.getElementsByClassName("side-dock-ribbon mod-left")[0]?.clientWidth ?? 0;
const leftSideDockWidth = sideDockWidth + sideDockRibbonWidth;

let leftPosition = coords.left - leftSideDockWidth;
if (leftPosition + toolbarWidth + rightMargin >= editorRect.right)
leftPosition = Math.max(0, editorRect.right - toolbarWidth - leftSideDockWidth - rightMargin);

let topPosition = 0;

if (isSelectionFromBottomToTop) {
topPosition = coords.top - toolbarHeight - 10;
if (topPosition <= editorRect.top) topPosition = editorRect.top + toolbarHeight;
} else {
topPosition = coords.top + 25;
if (topPosition >= editorRect.bottom - toolbarHeight) topPosition = editorRect.bottom - 2 * toolbarHeight;
}

let selection = editor.somethingSelected();
// let cMenuToolbarRows = settings.cMenuNumRows;
selection
? (cMenuToolbarModalBar.style.visibility = "visible")
: (cMenuToolbarModalBar.style.visibility = "hidden");

// let ElementCount = cMenuToolbarModalBar.childElementCount;
// if (ElementCount) {
// ElementCount == cMenuToolbarRows
// ? (cMenuToolbarModalBar.addClass("cMenuToolbarGrid"), cMenuToolbarModalBar.removeClass("cMenuToolbarFlex"))
cMenuToolbarModalBar.addClass("cMenuToolbarFlex")
cMenuToolbarModalBar.removeClass("cMenuToolbarGrid")

// let cmheight = Math.ceil(ElementCount / cMenuToolbarRows);
let cmheight = 1;
cMenuToolbarModalBar.style.height = 40 * cmheight + "px";
if (settings.aestheticStyle == "tiny") {
cMenuToolbarModalBar.style.height = 25 * cmheight + "px";
cMenuToolbarModalBar.style.left = leftPosition + "px";
cMenuToolbarModalBar.style.top = topPosition + "px";
}
let rleftwidth =
activeDocument.getElementsByClassName("side-dock-ribbon mod-left")[0]
?.clientWidth ?? 0;

let leftwidth =
activeDocument.getElementsByClassName("mod-left-split")[0]
?.clientWidth ?? 0;

let barwidth = activeDocument.getElementById(
"cMenuToolbarModalBar"
).offsetWidth;
let barHeight = activeDocument.getElementById(
"cMenuToolbarModalBar"
).offsetHeight;

let bodywidth = activeDocument.body.offsetWidth;
let coords = getCoords(editor);
let cursor_head = editor.getCursor("head").ch
let cursor_from = editor.getCursor("from").ch

let toppx = 0;
/*添加判断边界 */
let leftpx = coords.left - leftwidth - rleftwidth + 20;
if (coords.left + barwidth + 15 > bodywidth)
leftpx = coords.left - leftwidth - rleftwidth - barwidth / 1.3 - 60;
if (requireApiVersion("1.0.0"))
cursor_head == cursor_from ?
toppx = coords.top - barHeight - 10 : (toppx = coords.top + 25, leftpx = leftpx - 40);
else cursor_head == cursor_from ?
toppx = coords.top - barHeight - 30 : (toppx = coords.top, leftpx = leftpx - 40);
if (leftpx < 0) leftpx = 0;
cMenuToolbarModalBar.style.visibility == "visible" ?
(cMenuToolbarModalBar.style.left = leftpx + "px", cMenuToolbarModalBar.style.top = toppx + "px") : true;

}


} else
cMenuToolbarModalBar.style.visibility = "hidden"
} else cMenuToolbarModalBar.style.visibility = "hidden"
}

export function cMenuToolbarPopover(
app: App,
plugin: cMenuToolbarPlugin
Expand Down
8 changes: 4 additions & 4 deletions src/plugin/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { wait } from "src/util/util";
import { appIcons } from "src/icons/appIcons";
import { CommandPicker, openSlider } from "src/modals/suggesterModals";
import { cMenuToolbarSettingTab } from "src/settings/settingsTab";
import { selfDestruct, cMenuToolbarPopover, getModestate, quiteFormatbrushes, setFontcolor, setBackgroundcolor, setHeader, createFollowingbar, setFormateraser, isExistoolbar, resetToolbar } from "src/modals/cMenuToolbarModal";
import { selfDestruct, cMenuToolbarPopover, isSource, quiteFormatbrushes, setFontcolor, setBackgroundcolor, setHeader, createFollowingbar, setFormateraser, isExistoolbar, resetToolbar } from "src/modals/cMenuToolbarModal";
import { cMenuToolbarSettings, DEFAULT_SETTINGS } from "src/settings/settingsData";
import addIcons, {
// addFeatherIcons,
Expand Down Expand Up @@ -803,13 +803,13 @@ export default class cMenuToolbarPlugin extends Plugin {
// console.log(cMenuToolbarModalBar,"cMenuToolbarModalBar" )
//let view = this.app.workspace.getActiveViewOfType(MarkdownView) || true
let view = true
if ((getModestate(app) === false) || (!view)) //no source mode
if (!isSource(app) || (!view)) //no source mode
{
if (cMenuToolbarModalBar) {
cMenuToolbarModalBar.style.visibility = "hidden"
}
}
else if (getModestate(app) === true) {
else if (isSource(app)) {
if (cMenuToolbarModalBar) {
if (this.settings.positionStyle == "following")
cMenuToolbarModalBar.style.visibility = "hidden"
Expand Down Expand Up @@ -838,7 +838,7 @@ export default class cMenuToolbarPlugin extends Plugin {
// console.log(type,"handlecMenuToolbar_layout" )
//requireApiVersion("0.15.0") ? activeDocument = activeWindow.document : activeDocument = window.document;
if (this.settings.cMenuVisibility == true && this.settings.positionStyle == "top") {
if (getModestate(app)) {
if (isSource(app)) {
let leafwidth = this.app.workspace.activeLeaf.view.leaf.width ?? 0
//let leafwidth = view.containerEl?.querySelector<HTMLElement>(".markdown-source-view").offsetWidth ?? 0
if (this.Leaf_Width == leafwidth) return false;
Expand Down

0 comments on commit b38e265

Please sign in to comment.