New Feature - Shift Tag

Shift + ScrollWheel to move tags around

README.md

@@ -26,10 +26,11 @@ Sometimes, when you type too fast or copy prompts from all over the places, you
 - [x] Toggle between auto formatting and manual formatting
   - In `Auto`: The process is ran whenever you press **Generate**
   - In `Manual`: The process is only ran when you press the **Format** button
-- [x] **[New]** Toggle between auto updating prompts or not[^1]
+- [x] Toggle between auto updating prompts or not[^1]
   - Some Extensions *(**eg.** [tagcomplete](https://github.com/DominikDoom/a1111-sd-webui-tagcomplete))* listen to the text editing event, which means the formatting causes them to trigger
   - You only really need to disable this if you have the above Extension
     - You can open `prompt_format.js` and edit this line at the top `static updateInput = true;` to `static updateInput = false;` to save the setting
   - When `disabled`, the formatting is purely visual. It will only update once you manually edit the prompt again
+- [x] **[New]** Use `Shift + ScrollWheel` to quickly shift the hovered tag in the prompt
 
-[^1]: Due to the implementation being in `JavaScript` instead pf `Python`, the image's metadata will still only be updated in the next generation. This toggle mainly affects when you click `Send to img2img`, will the prompt be already formatted or not, etc.
+[^1]: Due to the implementation being in `JavaScript` instead of `Python`, the image's metadata will still only be updated in the next generation. This toggle mainly affects when you click `Send to img2img`, will the prompt be already formatted or not, etc.

README_ZH.md

@@ -10,7 +10,7 @@
 有時候打字太快，或是從各地東拼西湊咒語，常造成多個重複的空格或逗點。這項插件可以幫忙移除它們。
 
 ## 功能實作
-- [x] **[New]** 你可以打開`prompt_format.js`並把上面的`static UseCN = false;`改成`static UseCN = true;`來套用中文翻譯
+- [x] 你可以打開`prompt_format.js`並把上面的`static UseCN = false;`改成`static UseCN = true;`來套用中文翻譯
 - [x] 在`txt2img`和`img2img`都有用
 - [x] 移除多餘**空格**和**逗點**
 - [x] 修改錯誤的**括弧**
@@ -27,10 +27,11 @@
 - [x] 按下`Auto Format`以在手動與自動間切換
   - `自動`: 每次按下 **生成 (Generate)** 時處裡
   - `手動`: 手動按下`Format`時才處裡
-- [x] **[New]** 按下`Update Input`以開/關格式套用[^1]
+- [x] 按下`Update Input`以開/關格式套用[^1]
   - 有些擴充 *(**如.** [tagcomplete](https://github.com/DominikDoom/a1111-sd-webui-tagcomplete))* 訂閱文字的編輯事件，意即我的格式化會導致它們啟動
   - 基本上，只有在有安裝上述擴充時才需要關閉這個功能
     - 你可以打開`prompt_format.js`並把上面的`static updateInput = true;`改成`static updateInput = false;`來永久關閉
   - 在`關閉`時，前述的美化只是視覺效果。唯有再次手動編輯後，咒語才會更新
+- [x] **[New]** 使用`Shift + 滾輪`來橫移目前游標所在的單字
 
 [^1]: 由於透過`JavaScript`而非`Python`撰寫，生成圖片的內部資料只會在下一次生成才更新。這個選項主要影響，當你按下`Send to img2img`時所傳送的咒語是否已美化過等等。

javascript/prompt_format.js

@@ -124,6 +124,72 @@
 			return null
 	}
 
+	static injectTagShift(id) {
+		const textarea = gradioApp().getElementById(id).querySelector('textarea')
+
+		textarea.addEventListener('wheel', (event) => {
+			if (event.shiftKey) {
+				event.preventDefault()
+
+				if (textarea.selectionStart !== textarea.selectionEnd)
+					return;
+
+				if (event.deltaY === 0)
+					return;
+
+				const shift = event.deltaY < 0 ? 1 : -1
+				const tags = textarea.value.split(',').map(t => t.trim())
+
+				var cursor = textarea.selectionStart
+
+				var index = 0
+
+				for (let i = 0; i < textarea.selectionStart; i++) {
+					if (textarea.value[i] === ',')
+						index++
+				}
+
+				if (index === 0 && shift === -1)
+					return;
+				if (index === tags.length - 1 && shift === 1)
+					return;
+
+				const shifted = []
+
+				if (shift < 0) {
+					for (let i = 0; i < index - 1; i++)
+						shifted.push(tags[i])
+
+					shifted.push(tags[index])
+					shifted.push(tags[index - 1])
+
+					cursor -= tags[index - 1].length + 2
+
+					for (let i = index + 1; i < tags.length; i++)
+						shifted.push(tags[i])
+				} else {
+					for (let i = 0; i < index; i++)
+						shifted.push(tags[i])
+
+					shifted.push(tags[index + 1])
+					shifted.push(tags[index])
+
+					cursor -= tags[index + 1].length * -1 - 2
+
+					for (let i = index + 2; i < tags.length; i++)
+						shifted.push(tags[i])
+				}
+
+				textarea.value = shifted.join(', ')
+
+				textarea.selectionStart = cursor
+				textarea.selectionEnd = cursor
+
+				updateInput(textarea)
+			}
+		})
+	}
+
 	static injectBracketEscape(id) {
 		const textarea = gradioApp().getElementById(id).querySelector('textarea')
 
@@ -158,7 +224,7 @@
 		})
 	}
 
-} 
+}
 
 onUiLoaded(async () => {
 	const Modes = ['txt', 'img']
@@ -195,11 +261,11 @@ onUiLoaded(async () => {
 		}
 	})
 
-	const dedupeCB = LeFormatter.checkbox((LeFormatter.UseCN ? '去除重複':'Remove Duplicates'), dedupe, {
+	const dedupeCB = LeFormatter.checkbox((LeFormatter.UseCN ? '去除重複' : 'Remove Duplicates'), dedupe, {
 		onChange: (checked) => { dedupe = checked }
 	})
 
-	const underlineCB = LeFormatter.checkbox((LeFormatter.UseCN ? '去除底線':'Remove Underscores'), removeUnderscore, {
+	const underlineCB = LeFormatter.checkbox((LeFormatter.UseCN ? '去除底線' : 'Remove Underscores'), removeUnderscore, {
 		onChange: (checked) => { removeUnderscore = checked }
 	})
 
@@ -248,6 +314,8 @@ onUiLoaded(async () => {
 
 		LeFormatter.injectBracketEscape(mode + '2img_prompt')
 		LeFormatter.injectBracketEscape(mode + '2img_neg_prompt')
+		LeFormatter.injectTagShift(mode + '2img_prompt')
+		LeFormatter.injectTagShift(mode + '2img_neg_prompt')
 
 	})
-})
+})