Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: refactored the positioning system of the toolbar in the "following". #150

Merged
merged 9 commits into from
Apr 10, 2024
Merged

refactor: refactored the positioning system of the toolbar in the "following". #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
52a6eb4
refactor: refactored the positioning system of the toolbar in the
s4my Apr 6, 2024
c016bc0
refactor: refactored the positioning system of the toolbar in the
s4my Apr 6, 2024
7b869ee
Merge branch 'refactor/position' of https://github.com/s4my/obsidian-…
cumany Apr 7, 2024
6d9cabe
refactor: refactored the positioning system of the toolbar in the
s4my Apr 6, 2024
676f8e1
refactor: refactored getModestate() into isSource().
s4my Apr 7, 2024
8b21366
fix: set the height of the toolbar in createFollowingbar().
s4my Apr 7, 2024
ed2bbec
Merge branch 'refactor/position' of https://github.com/s4my/obsidian-…
cumany Apr 7, 2024
b975d9c
refactor: refactored how the toolbar's position is calculated when the
s4my Apr 6, 2024
033d24c
Merge branch 'refactor/position' of https://github.com/s4my/obsidian-…
cumany Apr 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 50 additions & 90 deletions src/modals/cMenuToolbarModal.ts
View file
Open in desktop
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 @@ -148,7 +144,8 @@ function getHotkey(app: App, cmdid: string, highlight = true) {


export const getCoords = (editor: any) => {
const cursorFrom = editor.getCursor("head");
let cursorFrom = editor.getCursor("head");
if (editor.getCursor("head").ch !== editor.getCursor("from").ch) cursorFrom.ch = Math.max(0, cursorFrom.ch - 1);

let coords;
if (editor.cursorCoords) coords = editor.cursorCoords(true, "window");
Expand All @@ -160,21 +157,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 +466,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
Open in desktop
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