From 199c4ceb324caa399b41d8f392ed74a9c6467c77 Mon Sep 17 00:00:00 2001 From: gitcpy <3073705449@qq.com> Date: Tue, 8 Oct 2024 06:00:50 +0800 Subject: [PATCH] feat:open popup button position setting --- manifest.json | 2 +- src/main.ts | 34 +++++++++++++++++- src/settings.ts | 94 ++++++++++++++++++++++++++++++++++++++++--------- styles.css | 26 +++++++++++--- 4 files changed, 133 insertions(+), 23 deletions(-) diff --git a/manifest.json b/manifest.json index 474837e..cbc733b 100644 --- a/manifest.json +++ b/manifest.json @@ -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", diff --git a/src/main.ts b/src/main.ts index beaa5fe..e85c8a0 100644 --- a/src/main.ts +++ b/src/main.ts @@ -18,6 +18,9 @@ interface MermaidPopupSetting { kvMapZoomRatio: Record; MoveStepValue:string; kvMapMoveStep: Record; + + open_btn_pos_x:string; + open_btn_pos_y:string; }; const DEFAULT_SETTINGS: MermaidPopupSetting = { @@ -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 { @@ -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); @@ -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) diff --git a/src/settings.ts b/src/settings.ts index 4ad7a87..a9734cd 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -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) @@ -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; @@ -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'); @@ -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'); @@ -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) { // 清除旧的显示内容 diff --git a/styles.css b/styles.css index 44d66fe..4bd539c 100644 --- a/styles.css +++ b/styles.css @@ -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; @@ -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; @@ -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%;