From 4003b309f5a274148a1cdd049e2178137aabad79 Mon Sep 17 00:00:00 2001
From: PopSlime <popslime@qq.com>
Date: Thu, 13 Oct 2022 12:40:08 +0800
Subject: [PATCH] Adapt skin editor to the new skin module and fix some bugs.
 Fix internal blocks being detached from literal blocks after sorting. Fix
 internal blocks not auto-sized. Fix sorting pointer offset. Code cleanup.

---
 Http/SkinEditor/app.js            | 658 +++++++++++++++---------------
 Http/SkinEditor/messages/en_US.js |  58 +--
 Http/SkinEditor/messages/zh_CN.js | 130 +++---
 3 files changed, 426 insertions(+), 420 deletions(-)

diff --git a/Http/SkinEditor/app.js b/Http/SkinEditor/app.js
index 19851fd..a234a7f 100644
--- a/Http/SkinEditor/app.js
+++ b/Http/SkinEditor/app.js
@@ -11,447 +11,445 @@ var cel;
 var clist;
 
 var blocklists = {
-    "block.element": ["statement.obj", "statement.comp", "statement.filter", "statement.prop"],
-    "block.filter": ["statement.filter.type", "statement.filter.flag", "statement.filter.flag.n", "statement.filter.prop", "statement.filter.prop.n"],
-    "block.root": ["statement.select", "statement.define"],
-    "block.select": ["statement.select.type", "statement.select.flag", "statement.select.flag.n", "statement.select.prop", "statement.select.prop.n"],
+	"block.element": ["statement.obj", "statement.select"],
+	"block.filter": ["statement.filter.type", "statement.filter.exp"],
+	"block.object": ["statement.comp", "statement.prop", "statement.filter"],
+	"block.root": ["statement.select", "statement.define"],
+	"block.select": ["statement.select.type", "statement.select.exp"],
 };
 
 var ilid = 0;
 var inputlists = {
-    "input.comp": ["image", "scale3", "rect", "polysec"],
-    "input.type": ["chart", "group", "track", "note"],
+	"input.comp": ["image", "polysec", "rect", "scale3", "text"],
+	"input.prop": [
+		"pos", "rot", "scale",
+		"image.fit", "image.frame", "image.transparent",
+		"polysec.body", "polysec.head", "polysec.shape", "polysec.tail",
+		"rect.color",
+		"scale3.border",
+		"sprite.bound", "sprite.opacity", "sprite.pivot", "sprite.scale", "sprite.ui", "sprite.zindex",
+		"text.frames", "text.size", "text.spacing", "text.value",
+	],
+	"input.type": ["chart", "group", "track", "note"],
 };
 
 var statementlists = {
-    "statement.comp": ["input.comp"],
-    "statement.define": ["input.ident", "exp"],
-    "statement.filter": ["block.filter", "block.element"],
-    "statement.filter.flag": ["input.flag"],
-    "statement.filter.flag.n": ["input.flag"],
-    "statement.filter.prop": ["input.prop", "exp"],
-    "statement.filter.prop.n": ["input.prop", "exp"],
-    "statement.filter.type": ["input.type"],
-    "statement.obj": ["block.element"],
-    "statement.prop": ["input.prop", "exp"],
-    "statement.select": ["block.select", "block.element"],
-    "statement.select.flag": ["input.flag"],
-    "statement.select.flag.n": ["input.flag"],
-    "statement.select.prop": ["input.prop", "exp"],
-    "statement.select.prop.n": ["input.prop", "exp"],
-    "statement.select.type": ["input.type"],
+	"statement.comp": ["input.comp"],
+	"statement.define": ["input.ident", "exp"],
+	"statement.filter": ["block.filter", "block.object"],
+	"statement.filter.exp": ["exp"],
+	"statement.filter.type": ["input.type"],
+	"statement.obj": ["block.object"],
+	"statement.prop": ["input.prop", "exp"],
+	"statement.select": ["block.select", "block.element"],
+	"statement.select.exp": ["exp"],
+	"statement.select.type": ["input.type"],
 }
 
-window.onload = function() {
-    lang = navigator.language.replace("-", "_");
-    if (!messages[lang])
-        lang = "en_US";
+window.onload = function () {
+	lang = navigator.language.replace("-", "_");
+	if (!messages[lang]) lang = "en_US";
 
-    app = $("#app");
-    tv = $("#treeview");
-    tree = $("#tree");
-    app.find("tbr").replaceWith(function() {
-        return msg($(this).text());
-    });
-    addAddButton(tree).on("click", function(event) {
-        if (clist)
-            clist.remove();
-    });
-    tv.on("mousemove", null, null, onMouseMove);
+	app = $("#app");
+	tv = $("#treeview");
+	tree = $("#tree");
+	app.find("tbr").replaceWith(function () {
+		return msg($(this).text());
+	});
+	addAddButton(tree).on("click", function (event) {
+		if (clist) clist.remove();
+	});
+	tv.on("mousemove", null, null, onMouseMove);
 
-    $(".tgbtn").on("click", function(event) {
-        var btn = $(this);
-        btn.toggleClass("tgbtn-active");
-        onToggleButtonClick(btn.attr("id"), btn.hasClass("tgbtn-active"));
-    });
-}
-;
+	$(".tgbtn").on("click", function (event) {
+		var btn = $(this);
+		btn.toggleClass("tgbtn-active");
+		onToggleButtonClick(btn.attr("id"), btn.hasClass("tgbtn-active"));
+	});
+};
 
 function addAddButton(el) {
-    return el.append($("<span></span>").addClass("btn btn-add").text("+").on("click", null, el, onAddButtonClick));
+	return el.append($("<span></span>").addClass("btn btn-add").text("+").on("click", null, el, onAddButtonClick));
 }
 
 function addAddExpButton(el) {
-    return el.append($("<span></span>").addClass("btn btn-add").text("+").on("click", null, el, onAddExpButtonClick));
+	return el.append($("<span></span>").addClass("btn btn-add").text("+").on("click", null, el, onAddExpButtonClick));
 }
 
 function addAddButtonLiteral(el) {
-    return el.append($("<span></span>").addClass("btn btn-add t-inline").text("+").on("click", null, el, onAddButtonLiteralClick));
+	return el.append($("<span></span>").addClass("btn btn-add t-inline").text("+").on("click", null, el, onAddButtonLiteralClick));
 }
 
 function addDeleteButton(el) {
-    return el.append($("<span></span>").addClass("btn btn-delete").text("x").on("click", null, el, onDeleteButtonClick));
+	return el.append($("<span></span>").addClass("btn btn-delete").text("x").on("click", null, el, onDeleteButtonClick));
 }
 
 function addDeleteButtonLiteral(el) {
-    return el.append($("<span></span>").addClass("btn btn-delete t-inline").text("x").on("click", null, el, onDeleteButtonLiteralClick));
+	return el.append($("<span></span>").addClass("btn btn-delete t-inline").text("x").on("click", null, el, onDeleteButtonLiteralClick));
 }
 
 function onAddButtonClick(event) {
-    cel = el = event.data;
-    generateAddList(event, blocklists[el.attr("key")]);
+	cel = el = event.data;
+	generateAddList(event, blocklists[el.attr("key")]);
 }
 
 function onAddExpButtonClick(event) {
-    cel = el = event.data;
-    generateAddExpList(event);
+	cel = el = event.data;
+	generateAddExpList(event);
 }
 
 function onAddButtonLiteralClick(event) {
-    var el = event.data.children(".t-internal");
-    if (!el.hasClass("t-node"))
-        el = el.children(".t-node");
-    event.data = el;
-    onAddButtonClick(event);
+	var el = event.data.children(".t-internal");
+	if (!el.hasClass("t-node"))
+		el = el.children(".t-node");
+	event.data = el;
+	onAddButtonClick(event);
 }
 
 function onDeleteButtonClick(event) {
-    event.data.remove();
+	var el = event.data.parents(".t-literal").first();
+	event.data.remove();
+	if (el) updateLiteral(el);
 }
 
 function onDeleteButtonLiteralClick(event) {
-    var el = event.data.parents(".t-literal").first();
-    fetchInternalStatements(el).eq(parseInt(event.data.attr("target"))).remove();
-    updateLiteral(el);
+	var el = event.data.parents(".t-literal").first();
+	fetchInternalStatements(el).eq(parseInt(event.data.attr("target"))).remove();
+	updateLiteral(el);
 }
 
 var tblist = {
-    "tb-debug": "mode-debug",
-    "tb-hide-add": "mode-hide-add",
-    "tb-hide-delete": "mode-hide-delete",
-    "tb-sort": "mode-sort",
+	"tb-debug": "mode-debug",
+	"tb-hide-add": "mode-hide-add",
+	"tb-hide-delete": "mode-hide-delete",
+	"tb-sort": "mode-sort",
 }
 function onToggleButtonClick(id, state) {
-    var cls = tblist[id];
-    if (state)
-        tv.addClass(cls);
-    else
-        tv.removeClass(cls);
-    if (cls == "mode-sort") {
-        var il = tv.find(".t-input");
-        var sl = tv.find(".t-statement").not(".t-inline");
-        if (state) {
-            il.each(function(i) {
-                $(il[i]).children("input").attr("disabled", "");
-            });
-            sl.each(function(i) {
-                $(sl[i]).on("click", null, $(sl[i]), onStatementSort);
-            });
-        } else {
-            il.each(function(i) {
-                var el = $(il[i]);
-                if (!el.parents(".t-internal").length)
-                    el.children("input").attr("disabled", null);
-            });
-            sl.each(function(i) {
-                $(sl[i]).off("click", null, onStatementSort);
-            });
-            tv.removeClass("state-grabbing");
-            if (grabbing) {
-                grabbing.removeClass("t-grabbing");
-                grabbing = null;
-                grabPointer.remove();
-            }
-        }
-    }
+	var cls = tblist[id];
+	if (state) tv.addClass(cls);
+	else tv.removeClass(cls);
+	if (cls == "mode-sort") {
+		var il = tv.find(".t-input");
+		var sl = tv.find(".t-statement").not(".t-inline");
+		if (state) {
+			il.each(function (i) {
+				$(il[i]).children("input").attr("disabled", "");
+			});
+			sl.each(function (i) {
+				$(sl[i]).on("click", null, $(sl[i]), onStatementSort);
+			});
+		}
+		else {
+			il.each(function (i) {
+				var el = $(il[i]);
+				if (!el.parents(".t-internal").length)
+					el.children("input").attr("disabled", null);
+			});
+			sl.each(function (i) {
+				$(sl[i]).off("click", null, onStatementSort);
+			});
+			tv.removeClass("state-grabbing");
+			if (grabbing) {
+				grabbing.removeClass("t-grabbing");
+				grabbing = null;
+				grabPointer.remove();
+			}
+		}
+	}
 }
 
 var grabbing;
 var grabPointer;
 function onStatementSort(event) {
-    event.stopPropagation();
-    if (grabbing) {
-        var l = grabbing.parent().children(".t-statement");
-        var i = getGrabPtrIndex(event.pageY);
-        if (i == l.length)
-            grabbing.insertAfter(l.last());
-        else
-            grabbing.insertBefore(l.eq(i));
-        tv.removeClass("state-grabbing");
-        grabbing.removeClass("t-grabbing");
-        updateLiteral(grabbing.parents(".t-literal").first());
-        grabbing = null;
-        grabPointer.remove();
-    } else {
-        grabbing = event.data;
-        grabbing.addClass("t-grabbing");
-        tv.addClass("state-grabbing");
-        grabPointer = $("<hr />").addClass("grab-ptr");
-    }
+	event.stopPropagation();
+	if (grabbing) {
+		var l = grabbing.parent().children(".t-statement");
+		var i = getGrabPtrIndex(event.pageY + tv.scrollTop() - tv[0].offsetTop);
+		if (i == l.length)
+			grabbing.insertAfter(l.last());
+		else
+			grabbing.insertBefore(l.eq(i));
+		tv.removeClass("state-grabbing");
+		grabbing.removeClass("t-grabbing");
+		grabPointer.remove();
+		updateLiteral(grabbing.parents(".t-literal").first());
+		grabbing = null;
+	}
+	else {
+		grabbing = event.data;
+		grabbing.addClass("t-grabbing");
+		tv.addClass("state-grabbing");
+		grabPointer = $("<hr />").addClass("grab-ptr");
+	}
 }
 
 function onMouseMove(event) {
-    if (grabbing) {
-        var l = grabbing.parent().children(".t-statement");
-        var i = getGrabPtrIndex(event.pageY);
-        if (i == l.length)
-            grabPointer.remove().insertAfter(l.last());
-        else
-            grabPointer.remove().insertBefore(l.eq(i));
-    }
+	if (grabbing) {
+		var l = grabbing.parent().children(".t-statement");
+		var i = getGrabPtrIndex(event.pageY + tv.scrollTop() - tv[0].offsetTop);
+		if (i == l.length)
+			grabPointer.remove().insertAfter(l.last());
+		else
+			grabPointer.remove().insertBefore(l.eq(i));
+	}
 }
 
 function getGrabPtrIndex(y) {
-    var l = grabbing.parent().children(".t-statement");
-    var tl = l.map(function(i) {
-        return l[i].offsetTop - tree.scrollTop() - y;
-    }).toArray();
-    tl.push(l.last()[0].offsetTop + l.last().height() - tree.scrollTop() - y);
-    return ArrayUtil.binarySearch(tl, 0, function(a, b) {
-        return a - b;
-    }, true);
+	var l = grabbing.parent().children(".t-statement");
+	var tl = l.map(function (i) {
+		return l[i].offsetTop - y;
+	}).toArray();
+	tl.push(l.last()[0].offsetTop + l.last().height() - y);
+	return ArrayUtil.binarySearch(tl, 0, function (a, b) {
+		return a - b;
+	}, true);
 }
 
 function generateAddList(event, items) {
-    event.stopPropagation();
-    if (clist)
-        clist.remove();
-    var ul = $("<ul></ul>").addClass("t-list");
-    for (var i in items) {
-        var item = items[i];
-        ul.append($("<li></li>").addClass("t-li").attr("key", item).text(msg("list." + item)).on("click", null, item, onAddItemClick));
-    }
-    popup(event, ul);
+	event.stopPropagation();
+	if (clist) clist.remove();
+	var ul = $("<ul></ul>").addClass("t-list");
+	for (var i in items) {
+		var item = items[i];
+		ul.append($("<li></li>").addClass("t-li").attr("key", item).text(msg("list." + item)).on("click", null, item, onAddItemClick));
+	}
+	popup(event, ul);
 }
 
 function generateAddExpList(event, items) {
-    event.stopPropagation();
-    if (clist)
-        clist.remove();
-    var ul = $("<ul></ul>").addClass("t-list t-exp-list");
-    for (var i in items) {
-        var item = items[i];
-        ul.append($("<li></li>").addClass("t-li").attr("key", item).text(msg("list." + item)).on("click", null, item, onAddItemClick));
-    }
-    popup(event, ul);
+	event.stopPropagation();
+	if (clist) clist.remove();
+	var ul = $("<ul></ul>").addClass("t-list t-exp-list");
+	for (var i in items) {
+		var item = items[i];
+		ul.append($("<li></li>").addClass("t-li").attr("key", item).text(msg("list." + item)).on("click", null, item, onAddItemClick));
+	}
+	popup(event, ul);
 }
 
 function popup(event, ul) {
-    clist = ul;
-    app.append(ul);
-    var left = event.pageX;
-    if (left + ul.outerWidth() > window.innerWidth)
-        left = Math.max(0, left - ul.outerWidth());
-    var top = event.pageY;
-    if (top + ul.outerHeight() > window.innerHeight)
-        top = Math.max(0, top - ul.outerHeight());
-    ul.css({
-        "left": left,
-        "top": top
-    });
+	clist = ul;
+	app.append(ul);
+	var left = event.pageX;
+	if (left + ul.outerWidth() > window.innerWidth)
+		left = Math.max(0, left - ul.outerWidth());
+	var top = event.pageY;
+	if (top + ul.outerHeight() > window.innerHeight)
+		top = Math.max(0, top - ul.outerHeight());
+	ul.css({
+		"left": left,
+		"top": top
+	});
 }
 
 function generateInputList(el, key) {
-    var il = inputlists[key];
-    if (!il)
-        return;
-    var id = "il-" + ilid.toString();
-    var dl = $("<datalist></datalist>").attr("id", id);
-    for (var i in il) {
-        var li = il[i];
-        dl.append($("<option />").attr({
-            "label": msg(key + "." + li),
-            "value": li,
-        }));
-    }
-    dl.insertAfter(el);
-    el.attr("list", id);
-    ilid++;
+	var il = inputlists[key];
+	if (!il) return;
+	var id = "il-" + ilid.toString();
+	var dl = $("<datalist></datalist>").attr("id", id);
+	for (var i in il) {
+		var li = il[i];
+		dl.append($("<option />").attr({
+			"label": msg(key + "." + li),
+			"value": li,
+		}));
+	}
+	dl.insertAfter(el);
+	el.attr("list", id);
+	ilid++;
 }
 
 function onAddItemClick(event) {
-    create(event.data).insertBefore(cel.children(":last"));
-    if (cel.parents(".t-node").first().hasClass("t-literal"))
-        updateLiteral(cel.parents(".t-node").first());
-    var il = cel.parents(".t-node").first().find(".t-input");
-    il.each(function(i) {
-        var iel = $(il[i]);
-        Stretchy.resize(iel.children("input")[0]);
-    });
-    cel = null;
-    clist.remove();
+	var nel = create(event.data).insertBefore(cel.children(":last"));
+	if (cel.parents(".t-node").first().hasClass("t-literal"))
+		updateLiteral(cel.parents(".t-node").first());
+	var il = nel.find(".t-input");
+	il.each(function (i) {
+		var iel = $(il[i]);
+		Stretchy.resize(iel.children("input")[0]);
+	});
+	cel = null;
+	clist.remove();
 }
 
 function onInputLiteralUpdate(event) {
-    var ib = event.data.children("input");
-    var el = event.data.parents(".t-literal").first();
-    fetchInternalStatements(el).eq(parseInt(event.data.attr("target"))).children("[pid=\"" + event.data.attr("pid") + "\"]").children("input").val(ib.val());
+	var ib = event.data.children("input");
+	var el = event.data.parents(".t-literal").first();
+	var lel = fetchInternalStatements(el).eq(parseInt(event.data.attr("target"))).children("[pid=\"" + event.data.attr("pid") + "\"]").children("input").val(ib.val());
+	Stretchy.resize(lel[0]);
 }
 
 function syncLiteral(iel) {
-    if (iel.attr("target") == -1)
-        return;
-    var ib = iel.children("input");
-    var el = iel.parents(".t-literal").first();
-    ib.val(fetchInternalStatements(el).eq(parseInt(iel.attr("target"))).children("[pid=\"" + iel.attr("pid") + "\"]").children("input").val());
+	if (iel.attr("target") == -1) return;
+	var ib = iel.children("input");
+	var el = iel.parents(".t-literal").first();
+	ib.val(fetchInternalStatements(el).eq(parseInt(iel.attr("target"))).children("[pid=\"" + iel.attr("pid") + "\"]").children("input").val());
 }
 
 function fetchInternalStatements(el, key) {
-    var l = el.children(".t-internal");
-    if (!l.hasClass("t-node"))
-        l = l.children(".t-node").first();
-    if (key)
-        return l.children("[key=\"" + key + "\"]");
-    else
-        return l.children();
+	var l = el.children(".t-internal");
+	if (!l.hasClass("t-node"))
+		l = l.children(".t-node").first();
+	if (key)
+		return l.children("[key=\"" + key + "\"]");
+	else
+		return l.children();
 }
 
 function create(key, target) {
-    var k0 = key.split(".")[0];
-    var flag = msg("literal." + key);
-    if (k0 == "input")
-        flag = true;
-    if (target != null && literal && flag)
-        switch (k0) {
-        case "block":
-            return createBlockLiteral(key, target);
-        case "input":
-            return createInput(key, target);
-        case "statement":
-            return createStatementLiteral(key, target);
-        }
-    else
-        switch (k0) {
-        case "block":
-            return createBlock(key);
-        case "statement":
-            return createStatement(key);
-        case "exp":
-            return createExp(key);
-        }
+	var k0 = key.split(".")[0];
+	var flag = msg("literal." + key);
+	if (k0 == "input") flag = true;
+	if (target != null && literal && flag)
+		switch (k0) {
+			case "block":
+				return createBlockLiteral(key, target);
+			case "input":
+				return createInput(key, target);
+			case "statement":
+				return createStatementLiteral(key, target);
+		}
+	else
+		switch (k0) {
+			case "block":
+				return createBlock(key);
+			case "statement":
+				return createStatement(key);
+			case "exp":
+				return createExp(key);
+		}
 }
 
 function createBlock(key) {
-    var m = msg(key);
-    var b = addAddButton($("<div></div>").attr("key", key).addClass("t-node t-block"));
-    if (!m)
-        return b;
-    else {
-        var n = $("<div></div>").addClass("t-node-sup t-block-sup").html(m);
-        n.children("tbr").replaceWith(b);
-        return n;
-    }
+	var m = msg(key);
+	var b = addAddButton($("<div></div>").attr("key", key).addClass("t-node t-block"));
+	if (!m) return b;
+	else {
+		var n = $("<div></div>").addClass("t-node-sup t-block-sup").html(m);
+		n.children("tbr").replaceWith(b);
+		return n;
+	}
 }
 
 function createBlockLiteral(key, target) {
-    var o = createBlock(key).addClass("t-internal");
-    var el = $("<div></div>").attr({
-        "key": key,
-        "target": target.index()
-    }).addClass("t-node t-literal");
-    el.append(o);
-    updateLiteral(el);
-    return el;
+	var o = createBlock(key).addClass("t-internal");
+	var el = $("<div></div>").attr({
+		"key": key,
+		"target": target.index()
+	}).addClass("t-node t-literal");
+	el.append(o);
+	updateLiteral(el);
+	return el;
 }
 
 function createExp(key) {
-    var m = msg(key);
-    var el = addAddExpButton($("<div></div>").attr("key", key).addClass("t-node t-exp t-inline").html(m));
-    return el;
+	var m = msg(key);
+	var el = addAddExpButton($("<div></div>").attr("key", key).addClass("t-node t-exp t-inline").html(m));
+	return el;
 }
 
 function createInput(key, target) {
-    var el = $("<input />").attr({
-        "type": "text",
-        "placeholder": msg(key + ".default")
-    });
-    var r = $("<span></span>").attr({
-        "key": key,
-        "target": target.index()
-    }).addClass("t-node t-input t-inline").append(el);
-    generateInputList(el, key);
-    applyResizeHandler(el);
-    el.on("change input", null, r, onInputLiteralUpdate);
-    return r;
+	var el = $("<input />").attr({
+		"type": "text",
+		"placeholder": msg(key + ".default")
+	});
+	var r = $("<span></span>").attr({
+		"key": key,
+		"target": target.index()
+	}).addClass("t-node t-input t-inline").append(el);
+	generateInputList(el, key);
+	applyResizeHandler(el);
+	el.on("change input", null, r, onInputLiteralUpdate);
+	return r;
 }
 
 function createStatement(key) {
-    var r = msg(key);
-    var el = addDeleteButton($("<div></div>").attr("key", key).addClass("t-node t-statement").html(r));
-    el.children("tbr").replaceWith(function() {
-        var m = $(this).text();
-        var id = parseInt(m);
-        if (isNaN(id))
-            return create(m, $(this).parent());
-        else
-            return create(statementlists[key][id], $(this).parent()).attr("pid", id);
-    });
-    return el;
+	var r = msg(key);
+	var el = addDeleteButton($("<div></div>").attr("key", key).addClass("t-node t-statement").html(r));
+	el.children("tbr").replaceWith(function () {
+		var m = $(this).text();
+		var id = parseInt(m);
+		if (isNaN(id))
+			return create(m, $(this).parent());
+		else
+			return create(statementlists[key][id], $(this).parent()).attr("pid", id);
+	});
+	return el;
 }
 
 function createStatementLiteral(key, target) {
-    var r = msg("literal." + key);
-    var el = addDeleteButtonLiteral($("<div></div>").attr({
-        "key": key,
-        "target": target.index()
-    }).addClass("t-node t-statement t-inline").html(r));
-    el.children("tbr").replaceWith(function() {
-        var m = $(this).text();
-        var id = parseInt(m);
-        if (isNaN(id))
-            return create(m, target);
-        else
-            return create(statementlists[key][id], target).attr("pid", id);
-    });
-    return el;
+	var r = msg("literal." + key);
+	var el = addDeleteButtonLiteral($("<div></div>").attr({
+		"key": key,
+		"target": target.index()
+	}).addClass("t-node t-statement t-inline").html(r));
+	el.children("tbr").replaceWith(function () {
+		var m = $(this).text();
+		var id = parseInt(m);
+		if (isNaN(id))
+			return create(m, target);
+		else
+			return create(statementlists[key][id], target).attr("pid", id);
+	});
+	return el;
 }
 
 function applyResizeHandler(el) {
-    el.on("change input", function() {
-        Stretchy.resize(this);
-    });
+	el.on("change input", function () {
+		Stretchy.resize(this);
+	});
 }
 
 function updateLiteral(el) {
-    var key = el.attr("key");
-    var m = msg("literal." + key);
-    var o = el.children(".t-internal");
-    tv.append(o); // Stashes the supplement blocks to prevent the event listeners from being detached
-    addAddButtonLiteral(el.html(m));
-    el.append(o); // Restores the blocks
-    el.children("tbr").replaceWith(function() {
-        var m = $(this).text().split("?");
-        var def;
-        if (m.length > 1) {
-            def = m[1];
-            m = m[0];
-        } else
-            m = m[0];
-        var l = fetchInternalStatements(el, m);
-        var s = l.map(function(si) {
-            return create(m, l.eq(si));
-        });
-        return conjAnd(s, def);
-    });
-    var il = el.find(".t-input");
-    il.each(function(i) {
-        var iel = $(il[i]);
-        if (iel.parents(".t-internal").length || tv.hasClass("mode-sort"))
-            iel.children("input").attr("disabled", "");
-        syncLiteral(iel);
-        Stretchy.resize(iel.children("input")[0]);
-    });
-    var cl = el.contents();
-    for (var t in cl) {
-        var ci = cl[t];
-        if (ci.nodeName == "#text" && ci.nodeValue == " ") {
-            ci.remove();
-        }
-    }
+	var key = el.attr("key");
+	var m = msg("literal." + key);
+	var o = el.children(".t-internal");
+	tv.append(o); // Stashes the supplement blocks to prevent the event listeners from being detached
+	addAddButtonLiteral(el.html(m));
+	el.append(o); // Restores the blocks
+	el.children("tbr").replaceWith(function () {
+		var m = $(this).text().split("?");
+		var def;
+		if (m.length > 1) {
+			def = m[1];
+			m = m[0];
+		}
+		else
+			m = m[0];
+		var l = fetchInternalStatements(el, m);
+		var s = l.map(function (si) {
+			return create(m, l.eq(si));
+		});
+		return conjAnd(s, def);
+	});
+	var il = el.find(".t-input");
+	il.each(function (i) {
+		var iel = $(il[i]);
+		if (iel.parents(".t-internal").length || tv.hasClass("mode-sort"))
+			iel.children("input").attr("disabled", "");
+		syncLiteral(iel);
+		Stretchy.resize(iel.children("input")[0]);
+	});
+	var cl = el.contents();
+	for (var t in cl) {
+		var ci = cl[t];
+		if (ci.nodeName == "#text" && ci.nodeValue == " ") {
+			ci.remove();
+		}
+	}
 }
 
 function conjAnd(list, def) {
-    var el = $("<div></div>").addClass("t-conj t-inline");
-    for (var i = 0; i < list.length; i++)
-        el.append(list[i]);
-    if (list.length == 0)
-        el.text(def);
-    return el;
+	var el = $("<div></div>").addClass("t-conj t-inline");
+	for (var i = 0; i < list.length; i++)
+		el.append(list[i]);
+	if (list.length == 0)
+		el.text(def);
+	return el;
 }
 
 function msg(key) {
-    var m = messages[lang][key];
-    if (!m)
-        return null;
-    return m.replace(/{(.*?)}/g, "<tbr>$1</tbr>");
+	var m = messages[lang][key];
+	if (!m) return null;
+	return m.replace(/{(.*?)}/g, "<tbr>$1</tbr>");
 }
diff --git a/Http/SkinEditor/messages/en_US.js b/Http/SkinEditor/messages/en_US.js
index d62c44b..47edd78 100644
--- a/Http/SkinEditor/messages/en_US.js
+++ b/Http/SkinEditor/messages/en_US.js
@@ -6,9 +6,31 @@ messages["en_US"] = {
     "input.comp.polysec": "polygon sectional mesh",
     "input.comp.rect": "colored rectangle",
     "input.comp.scale3": "scale3 sprite",
+    "input.comp.text": "text",
     "input.ident.default": "variable",
-    "input.flag.default": "flag",
     "input.prop.default": "property",
+    "input.prop.image.fit": "image sprite: scale mode",
+    "input.prop.image.frame": "image sprite: image name",
+    "input.prop.image.transparent": "image sprite: transparent mode",
+    "input.prop.polysec.body": "polygon sectional mesh: body image name",
+    "input.prop.polysec.head": "polygon sectional mesh: head image name",
+    "input.prop.polysec.shape": "polygon sectional mesh: section shape",
+    "input.prop.polysec.tail": "polygon sectional mesh: tail image name",
+    "input.prop.pos": "position",
+    "input.prop.rect.color": "colored rectangle: color",
+    "input.prop.rot": "rotation",
+    "input.prop.scale": "scale",
+    "input.prop.scale3.border": "scale3 sprite: unstretched area ratios",
+    "input.prop.sprite.bound": "sprite: secondary anchor position",
+    "input.prop.sprite.opacity": "sprite: opacity",
+    "input.prop.sprite.pivot": "sprite: anchor",
+    "input.prop.sprite.scale": "sprite: scale",
+    "input.prop.sprite.ui": "sprite: ui mode",
+    "input.prop.sprite.zindex": "sprite: layer order",
+    "input.prop.text.frames": "text: image mapping",
+    "input.prop.text.size": "text: font size",
+    "input.prop.text.spacing": "text: character spacing",
+    "input.prop.text.value": "text: content",
     "input.type.chart": "chart",
     "input.type.default": "element",
     "input.type.group": "track group",
@@ -17,46 +39,28 @@ messages["en_US"] = {
     "list.statement.comp": "Attach a component",
     "list.statement.define": "Define a variable",
     "list.statement.filter": "Filter element",
-    "list.statement.filter.flag": "Filter flag",
-    "list.statement.filter.flag.n": "Filter flag (negative)",
-    "list.statement.filter.prop": "Filter property",
-    "list.statement.filter.prop.n": "Filter property (negative)",
+    "list.statement.filter.exp": "Filter expression",
     "list.statement.filter.type": "Filter element type",
     "list.statement.obj": "Create a container",
     "list.statement.prop": "Set property",
     "list.statement.select": "Select elements",
-    "list.statement.select.flag": "Filter flag",
-    "list.statement.select.flag.n": "Filter flag (negative)",
-    "list.statement.select.prop": "Filter property",
-    "list.statement.select.prop.n": "Filter property (negative)",
+    "list.statement.select.exp": "Filter expression",
     "list.statement.select.type": "Filter element type",
-    "literal.block.filter": "If {statement.filter.flag} {statement.filter.flag.n} {statement.filter.type} {statement.filter.prop} {statement.filter.prop.n}",
-    "literal.block.select": "For each {statement.select.flag} {statement.select.flag.n} {statement.select.type?element} {statement.select.prop} {statement.select.prop.n}",
-    "literal.statement.filter.flag": "it is {0}",
-    "literal.statement.filter.flag.n": "it is not {0}",
-    "literal.statement.filter.prop": "its {0} is {1}",
-    "literal.statement.filter.prop.n": "its {0} is not {1}",
+    "literal.block.filter": "If {statement.filter.exp} {statement.filter.type}",
+    "literal.block.select": "For each {statement.select.type?element} {statement.select.exp}",
+    "literal.statement.filter.exp": "{0}",
     "literal.statement.filter.type": "it is a {0}",
-    "literal.statement.select.flag": "{0}",
-    "literal.statement.select.flag.n": "non-{0}",
-    "literal.statement.select.prop": "whose {0} is {1}",
-    "literal.statement.select.prop.n": "whose {0} is not {1}",
+    "literal.statement.select.exp": "that {0}",
     "literal.statement.select.type": "{0}",
     "statement.comp": "with a {0}",
     "statement.define": "Define {0} = {1}",
     "statement.filter": "{0} {1}",
-    "statement.filter.flag": "it is {0}",
-    "statement.filter.flag.n": "it is not {0}",
-    "statement.filter.prop": "its {0} is {1}",
-    "statement.filter.prop.n": "its {0} is not {1}",
+    "statement.filter.exp": "it matches the expression {0}",
     "statement.filter.type": "it is a {0}",
     "statement.obj": "Create a container {0}",
     "statement.prop": "Set its {0} to {1}",
     "statement.select": "{0} {1}",
-    "statement.select.flag": "that is {0}",
-    "statement.select.flag.n": "that is not {0}",
-    "statement.select.prop": "whose {0} is {1}",
-    "statement.select.prop.n": "whose {0} is not {1}",
+    "statement.select.exp": "it matches the expression {0}",
     "statement.select.type": "{0}",
     "tool.debug": "Debug",
     "tool.hideadd": "Hide Add",
diff --git a/Http/SkinEditor/messages/zh_CN.js b/Http/SkinEditor/messages/zh_CN.js
index 9c9c445..12ba573 100644
--- a/Http/SkinEditor/messages/zh_CN.js
+++ b/Http/SkinEditor/messages/zh_CN.js
@@ -1,65 +1,69 @@
 messages["zh_CN"] = {
-    "block.filter": "如果 {}",
-    "block.select": "选择 {}",
-    "input.comp.default": "组件",
-    "input.comp.image": "图片元件",
-    "input.comp.polysec": "多边形截面网格",
-    "input.comp.rect": "纯色矩形",
-    "input.comp.scale3": "三段拉伸元件",
-    "input.ident.default": "变量",
-    "input.flag.default": "标记",
-    "input.prop.default": "属性",
-    "input.type.chart": "谱面",
-    "input.type.default": "元素",
-    "input.type.group": "轨道组",
-    "input.type.note": "音符",
-    "input.type.track": "轨道",
-    "list.statement.comp": "附加组件",
-    "list.statement.define": "定义变量",
-    "list.statement.filter": "筛选元素",
-    "list.statement.filter.flag": "筛选标记",
-    "list.statement.filter.flag.n": "筛选标记（否定）",
-    "list.statement.filter.prop": "筛选属性",
-    "list.statement.filter.prop.n": "筛选属性（否定）",
-    "list.statement.filter.type": "筛选元素类型",
-    "list.statement.obj": "创建容器",
-    "list.statement.prop": "设置属性",
-    "list.statement.select": "选择元素",
-    "list.statement.select.flag": "筛选标记",
-    "list.statement.select.flag.n": "筛选标记（否定）",
-    "list.statement.select.prop": "筛选属性",
-    "list.statement.select.prop.n": "筛选属性（否定）",
-    "list.statement.select.type": "筛选元素类型",
-    "literal.block.filter": "如果 {statement.filter.flag} {statement.filter.flag.n} {statement.filter.type} {statement.filter.prop} {statement.filter.prop.n}",
-    "literal.block.select": "对于每个 {statement.select.prop} {statement.select.prop.n} {statement.select.flag} {statement.select.flag.n} {statement.select.type?元素}",
-    "literal.statement.filter.flag": "该元素带有标记 {0}",
-    "literal.statement.filter.flag.n": "该元素不带有标记 {0}",
-    "literal.statement.filter.prop": "该元素的 {0} {1}",
-    "literal.statement.filter.prop.n": "该元素的 {0} 不 {1}",
-    "literal.statement.filter.type": "该元素是 {0}",
-    "literal.statement.select.flag": "{0}",
-    "literal.statement.select.flag.n": "非{0}",
-    "literal.statement.select.prop": "{0} {1} 的",
-    "literal.statement.select.prop.n": "{0} 不 {1} 的",
-    "literal.statement.select.type": "{0}",
-    "statement.comp": "创建一个 {0} 组件",
-    "statement.define": "定义变量 {0} = {1}",
-    "statement.filter": "{0} {1}",
-    "statement.filter.flag": "该元素带有标记 {0}",
-    "statement.filter.flag.n": "该元素不带有标记 {0}",
-    "statement.filter.prop": "该元素的 {0} {1}",
-    "statement.filter.prop.n": "该元素的 {0} 不 {1}",
-    "statement.filter.type": "该元素是 {0}",
-    "statement.obj": "创建一个容器 {0}",
-    "statement.prop": "设置属性 {0} 为 {1}",
-    "statement.select": "{0} {1}",
-    "statement.select.flag": "{0}",
-    "statement.select.flag.n": "非{0}",
-    "statement.select.prop": "{0} {1} 的",
-    "statement.select.prop.n": "{0} 不 {1} 的",
-    "statement.select.type": "{0}",
-    "tool.debug": "调试",
-    "tool.hideadd": "隐藏添加按钮",
-    "tool.hidedelete": "隐藏删除按钮",
-    "tool.sort": "排序",
+	"block.filter": "如果 {}",
+	"block.select": "选择 {}",
+	"input.comp.default": "组件",
+	"input.comp.image": "图片",
+	"input.comp.polysec": "多边形截面网格",
+	"input.comp.rect": "纯色矩形",
+	"input.comp.scale3": "三段拉伸图片",
+	"input.comp.text": "文字",
+	"input.ident.default": "变量",
+	"input.prop.default": "属性",
+	"input.prop.image.fit": "图片：缩放模式",
+	"input.prop.image.frame": "图片：图片名",
+	"input.prop.image.transparent": "图片：透明模式",
+	"input.prop.polysec.body": "多边形截面网格：中部图片名",
+	"input.prop.polysec.head": "多边形截面网格：头部图片名",
+	"input.prop.polysec.shape": "多边形截面网格：截面形状",
+	"input.prop.polysec.tail": "多边形截面网格：尾部图片名",
+	"input.prop.pos": "位置",
+	"input.prop.rect.color": "纯色矩形：颜色",
+	"input.prop.rot": "旋转",
+	"input.prop.scale": "缩放",
+	"input.prop.scale3.border": "三段拉伸图片：非拉伸区域占比",
+	"input.prop.sprite.bound": "图像：副锚点位置",
+	"input.prop.sprite.opacity": "图像：不透明度",
+	"input.prop.sprite.pivot": "图像：锚点",
+	"input.prop.sprite.scale": "图像：缩放",
+	"input.prop.sprite.ui": "图像：界面模式",
+	"input.prop.sprite.zindex": "图像：叠加次序",
+	"input.prop.text.frames": "文字：图片映射",
+	"input.prop.text.size": "文字：字体大小",
+	"input.prop.text.spacing": "文字：字符间距",
+	"input.prop.text.value": "文字：内容",
+	"input.type.chart": "谱面",
+	"input.type.default": "元素",
+	"input.type.group": "轨道组",
+	"input.type.note": "按键",
+	"input.type.track": "轨道",
+	"list.statement.comp": "附加组件",
+	"list.statement.define": "定义变量",
+	"list.statement.filter": "条件分歧",
+	"list.statement.filter.exp": "判断表达式",
+	"list.statement.filter.type": "判断元素类型",
+	"list.statement.obj": "创建容器",
+	"list.statement.prop": "设置属性",
+	"list.statement.select": "选择元素",
+	"list.statement.select.exp": "筛选表达式",
+	"list.statement.select.type": "筛选元素类型",
+	"literal.block.filter": "如果 {statement.filter.exp} {statement.filter.type}",
+	"literal.block.select": "对于每个 {statement.select.exp} {statement.select.type?元素}",
+	"literal.statement.filter.exp": "{0}",
+	"literal.statement.filter.type": "元素的类型为 {0}",
+	"literal.statement.select.exp": "{0} 的",
+	"literal.statement.select.type": "{0}",
+	"statement.comp": "创建一个 {0} 组件",
+	"statement.define": "定义变量 {0} = {1}",
+	"statement.filter": "{0} {1}",
+	"statement.filter.exp": "元素符合表达式 {0}",
+	"statement.filter.type": "元素的类型为 {0}",
+	"statement.obj": "创建一个容器 {0}",
+	"statement.prop": "设置属性 {0} 为 {1}",
+	"statement.select": "{0} {1}",
+	"statement.select.exp": "元素符合表达式 {0}",
+	"statement.select.type": "元素的类型为 {0}",
+	"tool.debug": "调试",
+	"tool.hideadd": "隐藏添加按钮",
+	"tool.hidedelete": "隐藏删除按钮",
+	"tool.sort": "排序",
 };