Skip to content

Commit

Permalink
feat:open popup button position setting
Browse files Browse the repository at this point in the history
  • Loading branch information
gitcpy committed Oct 7, 2024
1 parent 354ed42 commit 199c4ce
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 23 deletions.
2 changes: 1 addition & 1 deletion manifest.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"id": "diagram-popup",
"name": "Diagram Popup",
"version": "0.2.56",
"version": "0.2.57",
"minAppVersion": "0.12.0",
"description": "Show diagrams, from mermaid, plantuml, graphviz and so on, in a draggable and zoomable popup",
"author": "ChenPengyuan",
Expand Down
34 changes: 33 additions & 1 deletion src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ interface MermaidPopupSetting {
kvMapZoomRatio: Record<string, string>;
MoveStepValue:string;
kvMapMoveStep: Record<string, string>;

open_btn_pos_x:string;
open_btn_pos_y:string;
};

const DEFAULT_SETTINGS: MermaidPopupSetting = {
Expand Down Expand Up @@ -56,7 +59,9 @@ const DEFAULT_SETTINGS: MermaidPopupSetting = {
'40':'40',
'50':'60',
'60':'60',
},
},
open_btn_pos_x:'90',
open_btn_pos_y:'90',
};

export default class MermaidPopupPlugin extends Plugin {
Expand Down Expand Up @@ -232,6 +237,7 @@ export default class MermaidPopupPlugin extends Plugin {
target.appendChild(popupButton);

this.adjustDiagramWidthAndHeight_ToContainer(target);
this.setPopupBtnPos(popupButton, target);

// bind click to popup
this.registerDomEvent(target, 'click', this.handleMermaidClick);
Expand All @@ -255,6 +261,32 @@ export default class MermaidPopupPlugin extends Plugin {
});
}

setPopupBtnPos(btn: HTMLElement, target: HTMLElement){
let w_b = btn.offsetWidth;
let h_b = btn.offsetHeight;
console.log('w_b', w_b, 'h_b', h_b);

let w = target.offsetWidth;
let h = target.offsetHeight;

let x_setting = this.settings.open_btn_pos_x;
let y_setting = this.settings.open_btn_pos_y;

let left = this.getWidth(target) * parseFloat(x_setting) / 100;
let top = this.getHeight(target) * parseFloat(y_setting) / 100

left = (left+w_b) > w ? (left-w_b) : left;
top = (top+h_b) > h ? (top-h_b) : top;

left = left < 0 ? 0 : left;
top = top < 0 ? 0 : top;

btn.setCssStyles({
left: left + 'px',
top: top + 'px'
});
}

adjustDiagramWidthAndHeight_ToContainer(container: HTMLElement){
let desEle = this.getDiagramElement(container) as HTMLElement;
if (!desEle)
Expand Down
94 changes: 77 additions & 17 deletions src/settings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ class MermaidPopupSettingTab extends PluginSettingTab {

const td_01_1_popup_sz_title = row_01_popup_sz_and_dg_h_title.createEl('td');
let popup_sz_title = td_01_1_popup_sz_title.createEl('h2', { text: 'Popup Size Init' });
popup_sz_title.classList.add('config-text');
popup_sz_title.classList.add('config-text');

const td_02_1_popup_sz = row_02_popup_sz_and_dg_h_val.createEl('td');
// 弹窗初始化
new Setting(td_02_1_popup_sz)
Expand All @@ -42,7 +43,8 @@ class MermaidPopupSettingTab extends PluginSettingTab {

let td_01_2_dg_h= row_01_popup_sz_and_dg_h_title.createEl('td');
let td_02_1_dg_h_title = td_01_2_dg_h.createEl('h2', { text: 'Original Diagram Height' });
td_02_1_dg_h_title.classList.add('config-text');
td_02_1_dg_h_title.classList.add('config-text');

const td_02_2_dg_h_val = row_02_popup_sz_and_dg_h_val.createEl('td');
td_02_2_dg_h_val.classList.add('ori_diagram_height');
let dg_h_val = this.plugin.settings.DiagramHeightVal;
Expand Down Expand Up @@ -75,23 +77,14 @@ class MermaidPopupSettingTab extends PluginSettingTab {
this.plugin.settings.DiagramHeightVal = value;
this.plugin.saveSettings();
});
const addSettings = new Setting(td_02_2_dg_h_val);
addSettings.addExtraButton((extra) => {
extra.setIcon('info');
extra.setTooltip(
'Click for tips on Original Diagram Height Setting.'
);
extra.onClick(() => {
let msgModal = new Modal(this.app);
msgModal.setTitle('Original Diagram Height Setting');
msgModal.setContent('Under proportional scaling, ' +

this.setInfo(td_02_2_dg_h_val, 'Click for tips on Original Diagram Height Setting.',
'Original Diagram Height Setting',
'Under proportional scaling, ' +
'adapt to the width of editor, ' +
'and then if the height is still greater than the value of \'Original Diagram Height\',' +
'it will adapt again. ');
msgModal.open();
});
extra.extraSettingsEl.closest('.setting-item')?.classList.add('settings-icon');
});
'it will adapt again. '
)

const row_1 = tbody.createEl('tr');
const row_2 = tbody.createEl('tr');
Expand Down Expand Up @@ -141,6 +134,20 @@ class MermaidPopupSettingTab extends PluginSettingTab {
)
});

// 开启弹窗按钮位置
let title_btn_pos = containerEl.createEl('h2', { text: 'Open Popup Button Relative Position Init' });
title_btn_pos.classList.add('config-text');

const kvRow_open_btn = containerEl.createDiv({ cls: 'kv-row open_btn_pos' });
this.slideInput(kvRow_open_btn, "x:", this.plugin.settings.open_btn_pos_x, (val)=>{this.plugin.settings.open_btn_pos_x=val});
this.slideInput(kvRow_open_btn, "y:", this.plugin.settings.open_btn_pos_y, (val)=>{this.plugin.settings.open_btn_pos_y=val});

this.setInfo(kvRow_open_btn, 'Click for tips on Open Popup Button Relative Position Init Setting.',
'Open Popup Button Relative Position Init Setting',
'The origin of open popup button relative position, is at top left of the diagram container.' +
'In the setting, x represents the width ratio from the origin, and y represents the height ratio from that.'
)

let title = containerEl.createEl('h2', { text: 'Add New Diagram' });
title.classList.add('config-text');

Expand Down Expand Up @@ -216,6 +223,59 @@ class MermaidPopupSettingTab extends PluginSettingTab {
containerEl.createEl('p', { text: 'if you add it to the class list of your target container, it will get the functionality.' });
}

setInfo(containerEl: HTMLElement, tip:string, title:string, msg:string){
const addSettings = new Setting(containerEl);
addSettings.addExtraButton((extra) => {
extra.setIcon('info');
extra.setTooltip(tip);
extra.onClick(() => {
let msgModal = new Modal(this.app);
msgModal.setTitle(title);
msgModal.setContent(msg);
msgModal.open();
});
extra.extraSettingsEl.closest('.setting-item')?.classList.add('settings-icon');
});
}

slideInput(containerEl: HTMLElement, title:string, value: string, saveVal:(newVal:string)=>void){
let input_title = containerEl.createEl('p');
input_title.classList.add('open_btn_pos_slide_title');
input_title.setText(title);

let input_val_min = containerEl.createEl('p');
input_val_min.setText('0');

let input = containerEl.createEl('input');
input.classList.add('open_btn_pos_slide_width');

input.setAttribute('type','range');
input.setAttribute('min','0');
input.setAttribute('max','100');
input.setAttribute('step','10');
input.setAttribute('value',value);

let input_val_max = containerEl.createEl('p');
input_val_max.setText('100%');

let input_val_cur_title = containerEl.createEl('p', {text:'current:'});
input_val_cur_title.classList.add('open_btn_pos_cur_title');
let input_val_cur = containerEl.createEl('p');
input_val_cur.classList.add('open_btn_pos_cur_val');
input_val_cur.setText(value);
let input_val_cur_per = containerEl.createEl('p');
input_val_cur_per.setText('%');
input_val_cur_per.classList.add('open_btn_pos_cur_per');

// 监听 input 事件
input.addEventListener('input', (event) => {
const value = input.value; // 获取当前值
input_val_cur.setText(value + ''); // 更新显示
saveVal(value);
this.plugin.saveSettings();
});
}

// 在页面下方显示所有保存的键值对(以表格形式)
displayKvMap(containerEl: HTMLElement) {
// 清除旧的显示内容
Expand Down
26 changes: 22 additions & 4 deletions styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,6 @@ cursor: grabbing; /* 拖动时鼠标变为抓手 */

button.mermaid-popup-button {
position: fixed;;
bottom: 10px;
right: 10px;
background-color: rgba(0, 0, 0, 0.1); /* 半透明 */
color: var(--text-normal);
border: none;
Expand All @@ -92,8 +90,6 @@ button.mermaid-popup-button:hover {

button.mermaid-popup-button-reading {
position: absolute;;
bottom: 10px;
right: 10px;
background-color: rgba(0, 0, 0, 0.1); /* 半透明 */
color: var(--text-normal);
border: none;
Expand Down Expand Up @@ -202,6 +198,28 @@ button.mermaid-popup-button-reading:hover {
border-top: 0px;
}

.open_btn_pos_slide_title{
margin-right: 5px !important;
}

.open_btn_pos_slide_width{
width: 20% !important;
}
.open_btn_pos_cur_title{
margin-left: 20px;
}
.open_btn_pos_cur_val{
width: 30px;
}
.open_btn_pos_cur_per{
margin-right: 30px;
}

.open_btn_pos .settings-icon{
display: block;
border-top: 0px;
}

/* 表格样式 */
.kv-display table {
width: 100%;
Expand Down

0 comments on commit 199c4ce

Please sign in to comment.