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.
This commit is contained in:
2022-10-13 12:40:08 +08:00
parent cb51bb109b
commit 4003b309f5
3 changed files with 426 additions and 420 deletions

View File

@@ -11,61 +11,62 @@ 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.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.flag", "statement.select.flag.n", "statement.select.prop", "statement.select.prop.n"],
"block.select": ["statement.select.type", "statement.select.exp"],
};
var ilid = 0;
var inputlists = {
"input.comp": ["image", "scale3", "rect", "polysec"],
"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": ["block.filter", "block.object"],
"statement.filter.exp": ["exp"],
"statement.filter.type": ["input.type"],
"statement.obj": ["block.element"],
"statement.obj": ["block.object"],
"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.exp": ["exp"],
"statement.select.type": ["input.type"],
}
window.onload = function() {
window.onload = function () {
lang = navigator.language.replace("-", "_");
if (!messages[lang])
lang = "en_US";
if (!messages[lang]) lang = "en_US";
app = $("#app");
tv = $("#treeview");
tree = $("#tree");
app.find("tbr").replaceWith(function() {
app.find("tbr").replaceWith(function () {
return msg($(this).text());
});
addAddButton(tree).on("click", function(event) {
if (clist)
clist.remove();
addAddButton(tree).on("click", function (event) {
if (clist) clist.remove();
});
tv.on("mousemove", null, null, onMouseMove);
$(".tgbtn").on("click", function(event) {
$(".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));
@@ -106,7 +107,9 @@ function onAddButtonLiteralClick(event) {
}
function onDeleteButtonClick(event) {
var el = event.data.parents(".t-literal").first();
event.data.remove();
if (el) updateLiteral(el);
}
function onDeleteButtonLiteralClick(event) {
@@ -123,27 +126,26 @@ var tblist = {
}
function onToggleButtonClick(id, state) {
var cls = tblist[id];
if (state)
tv.addClass(cls);
else
tv.removeClass(cls);
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.each(function (i) {
$(il[i]).children("input").attr("disabled", "");
});
sl.each(function(i) {
sl.each(function (i) {
$(sl[i]).on("click", null, $(sl[i]), onStatementSort);
});
} else {
il.each(function(i) {
}
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.each(function (i) {
$(sl[i]).off("click", null, onStatementSort);
});
tv.removeClass("state-grabbing");
@@ -162,17 +164,18 @@ function onStatementSort(event) {
event.stopPropagation();
if (grabbing) {
var l = grabbing.parent().children(".t-statement");
var i = getGrabPtrIndex(event.pageY);
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;
grabPointer.remove();
} else {
}
else {
grabbing = event.data;
grabbing.addClass("t-grabbing");
tv.addClass("state-grabbing");
@@ -183,7 +186,7 @@ function onStatementSort(event) {
function onMouseMove(event) {
if (grabbing) {
var l = grabbing.parent().children(".t-statement");
var i = getGrabPtrIndex(event.pageY);
var i = getGrabPtrIndex(event.pageY + tv.scrollTop() - tv[0].offsetTop);
if (i == l.length)
grabPointer.remove().insertAfter(l.last());
else
@@ -193,19 +196,18 @@ function onMouseMove(event) {
function getGrabPtrIndex(y) {
var l = grabbing.parent().children(".t-statement");
var tl = l.map(function(i) {
return l[i].offsetTop - tree.scrollTop() - y;
var tl = l.map(function (i) {
return l[i].offsetTop - y;
}).toArray();
tl.push(l.last()[0].offsetTop + l.last().height() - tree.scrollTop() - y);
return ArrayUtil.binarySearch(tl, 0, function(a, b) {
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();
if (clist) clist.remove();
var ul = $("<ul></ul>").addClass("t-list");
for (var i in items) {
var item = items[i];
@@ -216,8 +218,7 @@ function generateAddList(event, items) {
function generateAddExpList(event, items) {
event.stopPropagation();
if (clist)
clist.remove();
if (clist) clist.remove();
var ul = $("<ul></ul>").addClass("t-list t-exp-list");
for (var i in items) {
var item = items[i];
@@ -243,8 +244,7 @@ function popup(event, ul) {
function generateInputList(el, key) {
var il = inputlists[key];
if (!il)
return;
if (!il) return;
var id = "il-" + ilid.toString();
var dl = $("<datalist></datalist>").attr("id", id);
for (var i in il) {
@@ -260,11 +260,11 @@ function generateInputList(el, key) {
}
function onAddItemClick(event) {
create(event.data).insertBefore(cel.children(":last"));
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 = cel.parents(".t-node").first().find(".t-input");
il.each(function(i) {
var il = nel.find(".t-input");
il.each(function (i) {
var iel = $(il[i]);
Stretchy.resize(iel.children("input")[0]);
});
@@ -275,12 +275,12 @@ function onAddItemClick(event) {
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 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;
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());
@@ -299,8 +299,7 @@ function fetchInternalStatements(el, key) {
function create(key, target) {
var k0 = key.split(".")[0];
var flag = msg("literal." + key);
if (k0 == "input")
flag = true;
if (k0 == "input") flag = true;
if (target != null && literal && flag)
switch (k0) {
case "block":
@@ -324,8 +323,7 @@ function create(key, target) {
function createBlock(key) {
var m = msg(key);
var b = addAddButton($("<div></div>").attr("key", key).addClass("t-node t-block"));
if (!m)
return b;
if (!m) return b;
else {
var n = $("<div></div>").addClass("t-node-sup t-block-sup").html(m);
n.children("tbr").replaceWith(b);
@@ -368,7 +366,7 @@ function createInput(key, target) {
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() {
el.children("tbr").replaceWith(function () {
var m = $(this).text();
var id = parseInt(m);
if (isNaN(id))
@@ -385,7 +383,7 @@ function createStatementLiteral(key, target) {
"key": key,
"target": target.index()
}).addClass("t-node t-statement t-inline").html(r));
el.children("tbr").replaceWith(function() {
el.children("tbr").replaceWith(function () {
var m = $(this).text();
var id = parseInt(m);
if (isNaN(id))
@@ -397,7 +395,7 @@ function createStatementLiteral(key, target) {
}
function applyResizeHandler(el) {
el.on("change input", function() {
el.on("change input", function () {
Stretchy.resize(this);
});
}
@@ -409,22 +407,23 @@ function updateLiteral(el) {
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() {
el.children("tbr").replaceWith(function () {
var m = $(this).text().split("?");
var def;
if (m.length > 1) {
def = m[1];
m = m[0];
} else
}
else
m = m[0];
var l = fetchInternalStatements(el, m);
var s = l.map(function(si) {
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) {
il.each(function (i) {
var iel = $(il[i]);
if (iel.parents(".t-internal").length || tv.hasClass("mode-sort"))
iel.children("input").attr("disabled", "");
@@ -451,7 +450,6 @@ function conjAnd(list, def) {
function msg(key) {
var m = messages[lang][key];
if (!m)
return null;
if (!m) return null;
return m.replace(/{(.*?)}/g, "<tbr>$1</tbr>");
}

View File

@@ -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",

View File

@@ -2,62 +2,66 @@ messages["zh_CN"] = {
"block.filter": "如果 {}",
"block.select": "选择 {}",
"input.comp.default": "组件",
"input.comp.image": "图片元件",
"input.comp.image": "图片",
"input.comp.polysec": "多边形截面网格",
"input.comp.rect": "纯色矩形",
"input.comp.scale3": "三段拉伸元件",
"input.comp.scale3": "三段拉伸图片",
"input.comp.text": "文字",
"input.ident.default": "变量",
"input.flag.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.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.filter": "条件分歧",
"list.statement.filter.exp": "判断表达式",
"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.exp": "筛选表达式",
"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.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.flag": "元素带有标记 {0}",
"statement.filter.flag.n": "元素不带有标记 {0}",
"statement.filter.prop": "该元素的 {0} {1}",
"statement.filter.prop.n": "该元素的 {0} 不 {1}",
"statement.filter.type": "该元素是 {0}",
"statement.filter.exp": "元素符合表达式 {0}",
"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}",
"statement.select.exp": "元素符合表达式 {0}",
"statement.select.type": "元素的类型为 {0}",
"tool.debug": "调试",
"tool.hideadd": "隐藏添加按钮",
"tool.hidedelete": "隐藏删除按钮",