From 0bc57c368f1f28db6aa49b1a105fe16ced8cbc7a Mon Sep 17 00:00:00 2001
From: PopSlime <popslime@qq.com>
Date: Wed, 15 Mar 2023 15:39:31 +0800
Subject: [PATCH] Improve scaling logic of popup list in skin editor..

---
 Http/SkinEditor/app.css | 14 ++++++++++----
 Http/SkinEditor/app.js  | 19 ++++++++++++-------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/Http/SkinEditor/app.css b/Http/SkinEditor/app.css
index c196682..51554eb 100644
--- a/Http/SkinEditor/app.css
+++ b/Http/SkinEditor/app.css
@@ -45,15 +45,21 @@ body {
 	overflow: auto;
 }
 
-.t-list {
+.t-list-container {
 	position: absolute;
-	max-width: 100vw;
-	max-height: 100vh;
 	overflow: auto;
 	background-color: floralwhite;
 	box-sizing: border-box;
 	border: solid 1px gray;
 	border-radius: 4px;
+}
+
+.t-list-composed {
+	max-width: 100vw;
+	max-height: 100vh;
+}
+
+.t-list {
 	padding: 2px;
 	margin: 0;
 }
@@ -294,7 +300,7 @@ input {
 		background-color: black;
 		color: white;
 	}
-	.t-list {
+	.t-list-container {
 		background-color: darkslategray;
 	}
 	.t-li:hover {
diff --git a/Http/SkinEditor/app.js b/Http/SkinEditor/app.js
index 24bb880..57a60f1 100644
--- a/Http/SkinEditor/app.js
+++ b/Http/SkinEditor/app.js
@@ -332,18 +332,23 @@ function generateAddExpList(event, item) {
 }
 
 function popup(event, ul) {
-	clist = ul;
-	app.append(ul);
+	clist = $("<div></div>").addClass("t-list-container").append(ul);
+	app.append(clist);
+	ul.css("column-count", Math.max(1, Math.min(
+		Math.floor(0.6 * window.innerWidth / clist.outerWidth()),
+		Math.ceil((clist.outerHeight() + 256) / window.innerHeight)
+	)));
 	var left = event.pageX;
-	if (left + ul.outerWidth() > window.innerWidth)
-		left = Math.max(0, left - ul.outerWidth());
+	if (left + clist.outerWidth() > window.innerWidth)
+		left = Math.max(0, left - clist.outerWidth());
 	var top = event.pageY;
-	if (top + ul.outerHeight() > window.innerHeight)
-		top = Math.max(0, top - ul.outerHeight());
-	ul.css({
+	if (top + clist.outerHeight() > window.innerHeight)
+		top = Math.max(0, top - clist.outerHeight());
+	clist.css({
 		"left": left,
 		"top": top
 	});
+	clist.addClass("t-list-composed");
 }
 
 function generateInputList(el, key) {