editor_uievent_wrapper = function (editor) { // ------ UI预览 & 地图选点相关 ------ // var uievent = { elements: {}, values: {}, isOpen: false, mode: "" }; uievent.elements.div = document.getElementById('uieventDiv'); uievent.elements.title = document.getElementById('uieventTitle'); uievent.elements.yes = document.getElementById('uieventYes'); uievent.elements.no = document.getElementById('uieventNo'); uievent.elements.select = document.getElementById('uieventSelect'); uievent.elements.selectPoint = document.getElementById('selectPoint'); uievent.elements.selectFloor = document.getElementById('selectPointFloor'); uievent.elements.selectPointBox = document.getElementById('selectPointBox'); uievent.elements.body = document.getElementById('uieventBody'); uievent.elements.selectPointButtons = document.getElementById('selectPointButtons'); uievent.elements.canvas = document.getElementById('uievent'); uievent.elements.extraBody = document.getElementById('uieventExtraBody'); uievent.close = function () { uievent.isOpen = false; uievent.elements.div.style.display = 'none'; if (uievent.values.interval) { clearTimeout(uievent.values.interval); clearInterval(uievent.values.interval); } uievent.values = {}; } uievent.elements.no.onclick = uievent.close; uievent.drawPreviewUI = function () { core.setAlpha('uievent', 1); core.clearMap('uievent'); core.setFilter('uievent', null); // 绘制UI var background = uievent.elements.select.value; if (background == 'thumbnail') { core.drawThumbnail(editor.currentFloorId, null, { ctx: 'uievent' }); } else { core.fillRect('uievent', 0, 0, core.__PIXELS__, core.__PIXELS__, background); } if (uievent.values.list instanceof Array) { uievent.values.list.forEach(function (data) { if (typeof data == 'string') data = { "type": "text", "text": data }; var type = data.type; if (type == "text") { data.ctx = 'uievent'; core.saveCanvas('uievent'); core.drawTextBox(data.text, data); core.loadCanvas('uievent'); return; } else if (type == "choices") { for (var i = 0; i < data.choices.length; i++) { if (typeof data.choices[i] === 'string') data.choices[i] = { "text": data.choices[i] }; data.choices[i].text = core.replaceText(data.choices[i].text); } core.saveCanvas('uievent'); core.status.event.selection = data.selected || 0; core.drawChoices(core.replaceText(data.text), data.choices, data.width, 'uievent'); core.status.event.selection = null; core.loadCanvas('uievent'); return; } else if (type == "confirm") { core.saveCanvas('uievent'); core.drawConfirmBox(data.text, null, null, 'uievent'); core.loadCanvas('uievent'); } else if (core.ui["_uievent_" + type]) core.ui["_uievent_" + type](data); }) } } uievent.previewUI = function (list) { uievent.isOpen = true; uievent.elements.div.style.display = 'block'; uievent.mode = 'previewUI'; uievent.elements.selectPoint.style.display = 'none'; uievent.elements.yes.style.display = 'none'; uievent.elements.title.innerText = 'UI绘制预览'; uievent.elements.select.style.display = 'inline'; uievent.elements.selectFloor.style.display = 'none'; uievent.elements.selectPointBox.style.display = 'none'; uievent.elements.canvas.style.display = 'block'; uievent.elements.extraBody.style.display = 'none'; uievent.elements.body.style.overflow = "hidden"; uievent.elements.select.innerHTML = '' + '' + ''; uievent.elements.select.onchange = function () { uievent.drawPreviewUI(); } uievent.values.list = list; uievent.drawPreviewUI(); } uievent.selectPoint = function (floorId, x, y, bigmap, callback) { uievent.values.bigmap = bigmap; uievent.values.size = editor.isMobile ? window.innerWidth / core.__SIZE__ : 32 * 540 / core.__PIXELS__; uievent.isOpen = true; uievent.elements.div.style.display = 'block'; uievent.mode = 'selectPoint'; uievent.elements.selectPoint.style.display = 'block'; uievent.elements.yes.style.display = 'inline'; uievent.elements.select.style.display = 'none'; uievent.elements.selectFloor.style.display = 'inline'; uievent.elements.selectPointBox.style.display = 'block'; uievent.elements.canvas.style.display = 'block'; uievent.elements.extraBody.style.display = 'none'; uievent.elements.body.style.overflow = "hidden"; uievent.elements.yes.onclick = function () { var floorId = uievent.values.floorId, x = uievent.values.x, y = uievent.values.y; var multipoints = uievent.values.multipoints || []; uievent.close(); if (callback) { if (multipoints.length > 0) { callback(floorId, multipoints.map(function (one) { return one.split(',')[0] }).join(','), multipoints.map(function (one) { return one.split(',')[1] }).join(',')); } else { callback(floorId, x, y); } } } // Append children var floors = ""; core.floorIds.forEach(function (f) { floors += ""; }) uievent.elements.selectFloor.innerHTML = floors; // 检查多选点 if (/^\d+(,\d+)+$/.test(x) && /^\d+(,\d+)+$/.test(y)) { var xx = x.split(','), yy = y.split(','); uievent.values.multipoints = []; for (var i = 0; i < xx.length; ++i) { uievent.values.multipoints.push(xx[i] + "," + yy[i]); } x = xx[xx.length - 1]; y = yy[yy.length - 1]; } this.setPoint(floorId || editor.currentFloorId, core.calValue(x) || 0, core.calValue(y) || 0); } uievent.updateSelectPoint = function (redraw) { uievent.elements.title.innerText = '地图选点【右键多选】 (' + uievent.values.x + "," + uievent.values.y + ')'; // 计算size uievent.values.boxSize = uievent.values.size * (uievent.values.bigmap ? (core.__SIZE__ / Math.max(uievent.values.width, uievent.values.height)) : 1); uievent.values.boxLeft = uievent.values.bigmap ? (core.__PIXELS__ * Math.max(0, (1 - uievent.values.width / uievent.values.height) / 2)) : 0; uievent.values.boxTop = uievent.values.bigmap ? (core.__PIXELS__ * Math.max(0, (1 - uievent.values.height / uievent.values.width) / 2)) : 0; if (uievent.values.bigmap) { uievent.elements.selectPointBox.style.left = uievent.values.boxSize * uievent.values.x + uievent.values.boxLeft + "px"; uievent.elements.selectPointBox.style.top = uievent.values.boxSize * uievent.values.y + uievent.values.boxTop + "px"; } else { uievent.elements.selectPointBox.style.left = uievent.values.boxSize * (uievent.values.x - uievent.values.left) + "px"; uievent.elements.selectPointBox.style.top = uievent.values.boxSize * (uievent.values.y - uievent.values.top) + "px"; } uievent.elements.selectPointBox.style.width = uievent.values.boxSize - 6 + "px"; uievent.elements.selectPointBox.style.height = uievent.values.boxSize - 6 + "px"; if (redraw) { core.setAlpha('uievent', 1); core.clearMap('uievent'); core.drawThumbnail(uievent.values.floorId, null, { ctx: 'uievent', centerX: uievent.values.left + core.__HALF_SIZE__, centerY: uievent.values.top + core.__HALF_SIZE__, all: uievent.values.bigmap }); uievent.values.multipoints = uievent.values.multipoints || []; core.setTextAlign('uievent', 'right'); for (var i = 0; i < uievent.values.multipoints.length; ++i) { var xy = uievent.values.multipoints[i].split(","), x = parseInt(xy[0]), y = parseInt(xy[1]); core.fillBoldText('uievent', i + 1, 32 * (x - uievent.values.left) + 28, 32 * (y - uievent.values.top) + 26, '#FF7F00', null, '14px Verdana'); } core.setTextAlign('uievent', 'left'); } } uievent.setPoint = function (floorId, x, y) { if (core.floorIds.indexOf(floorId) == -1) floorId = editor.currentFloorId; uievent.values.floorId = floorId; uievent.elements.selectFloor.value = floorId; uievent.values.x = x != null ? x : (uievent.values.x || 0); uievent.values.y = y != null ? y : (uievent.values.y || 0); uievent.values.width = core.floors[uievent.values.floorId].width || core.__SIZE__; uievent.values.height = core.floors[uievent.values.floorId].height || core.__SIZE__; uievent.values.left = core.clamp(uievent.values.x - core.__HALF_SIZE__, 0, uievent.values.width - core.__SIZE__); uievent.values.top = core.clamp(uievent.values.y - core.__HALF_SIZE__, 0, uievent.values.height - core.__SIZE__); uievent.updateSelectPoint(true); } uievent.elements.selectFloor.onchange = function () { uievent.values.multipoints = []; uievent.setPoint(uievent.elements.selectFloor.value); } uievent.elements.selectPointBox.onclick = function (e) { e.preventDefault(); e.stopPropagation(); return false; } uievent.elements.body.onclick = function (e) { if (uievent.mode != 'selectPoint') return; if (uievent.values.bigmap) { uievent.values.x = core.clamp(Math.floor((e.offsetX - uievent.values.boxLeft) / uievent.values.boxSize), 0, uievent.values.width - 1); uievent.values.y = core.clamp(Math.floor((e.offsetY - uievent.values.boxTop) / uievent.values.boxSize), 0, uievent.values.height - 1); } else { uievent.values.x = uievent.values.left + Math.floor(e.offsetX / uievent.values.size); uievent.values.y = uievent.values.top + Math.floor(e.offsetY / uievent.values.size); } uievent.updateSelectPoint(false); } uievent.elements.body.oncontextmenu = function (e) { e.preventDefault(); e.stopPropagation(); if (uievent.mode != 'selectPoint' || uievent.values.bigmap) return; var x = uievent.values.left + Math.floor(e.offsetX / uievent.values.size); var y = uievent.values.top + Math.floor(e.offsetY / uievent.values.size); uievent.values.multipoints = uievent.values.multipoints || []; if (uievent.values.multipoints.indexOf(x + "," + y) >= 0) { uievent.values.multipoints = uievent.values.multipoints.filter(function (o) { return o != x + "," + y; }) } else { uievent.values.multipoints.push(x + "," + y); } uievent.values.x = x; uievent.values.y = y; uievent.updateSelectPoint(true); return false; } uievent.move = function (dx, dy) { if (uievent.mode != 'selectPoint') return; if (uievent.values.bigmap) return; uievent.values.left = core.clamp(uievent.values.left + dx, 0, uievent.values.width - core.__SIZE__); uievent.values.top = core.clamp(uievent.values.top + dy, 0, uievent.values.height - core.__SIZE__); this.updateSelectPoint(true); }; uievent.triggerBigmap = function () { if (uievent.mode != 'selectPoint') return; uievent.values.bigmap = !uievent.values.bigmap; uievent.values.multipoints = []; uievent.setPoint(uievent.values.floorId); }; (function () { var viewportButtons = uievent.elements.selectPointButtons; var pressTimer = null; for (var ii = 0, node; node = viewportButtons.children[ii]; ii++) { if (ii == 4) { node.onclick = uievent.triggerBigmap; continue; } if (ii == 5) { node.onclick = function () { alert(core.copy(uievent.values.floorId) ? ('楼层ID ' + uievent.values.floorId + ' 已成功复制到剪切板') : '无法复制楼层ID'); } } (function (x, y) { var move = function () { uievent.move(x, y); } node.onmousedown = function () { clearTimeout(pressTimer); pressTimer = setTimeout(function () { pressTimer = -1; var f = function () { if (pressTimer != null) { move(); setTimeout(f, 150); } } f(); }, 500); }; node.onmouseup = function () { if (pressTimer > 0) { clearTimeout(pressTimer); move(); } pressTimer = null; } })([-1, 0, 0, 1][ii], [0, -1, 1, 0][ii]); } })(); uievent.elements.div.onmousewheel = function (e) { if (uievent.mode != 'selectPoint') return; var index = core.floorIds.indexOf(uievent.values.floorId); try { if (e.wheelDelta) index += Math.sign(e.wheelDelta); else if (e.detail) index += Math.sign(e.detail); } catch (ee) { console.error(ee) } index = core.clamp(index, 0, core.floorIds.length - 1); uievent.values.multipoints = []; uievent.setPoint(core.floorIds[index]); } uievent.onKeyDown = function (e) { if (e.keyCode == 27) editor.uievent.close(); if (uievent.mode == 'selectPoint') { if (e.keyCode == 87) editor.uievent.move(0, -1) if (e.keyCode == 65) editor.uievent.move(-1, 0) if (e.keyCode == 83) editor.uievent.move(0, 1); if (e.keyCode == 68) editor.uievent.move(1, 0); } } // ------ 搜索变量出现的位置,也放在uievent好了 ------ // uievent.searchUsedFlags = function () { uievent.isOpen = true; uievent.elements.div.style.display = 'block'; uievent.mode = 'searchUsedFlags'; uievent.elements.selectPoint.style.display = 'none'; uievent.elements.yes.style.display = 'none'; uievent.elements.title.innerText = '搜索变量'; uievent.elements.select.style.display = 'inline'; uievent.elements.selectFloor.style.display = 'none'; uievent.elements.selectPointBox.style.display = 'none'; uievent.elements.canvas.style.display = 'none'; uievent.elements.extraBody.style.display = 'block'; uievent.elements.body.style.overflow = "auto"; // build flags var html = ""; Object.keys(editor.used_flags).sort().forEach(function (v) { v = "flag:" + v; html += ""; }); uievent.elements.select.innerHTML = html; uievent.elements.select.onchange = uievent.doSearchUsedFlags; uievent.doSearchUsedFlags(); } uievent.doSearchUsedFlags = function () { var flag = uievent.elements.select.value; var html = "
该变量出现的所有位置如下:
";
html += "搜索楼层:
"
html += '';
html += "
";
html += "" +
"
";
if (_isTileset) {
html += "警告!额外素材一旦注册成功将不可删除,否则可能会导致素材错位风险!如果你不再想用某个额外素材,"
+ "但又不想让它出现在素材区,可以考虑使用空气墙同名替换该额外素材文件。
"
}
data.forEach(function (one) {
var checked = value.indexOf(one) >= 0 ? 'checked' : '';
var disabled = _isTileset && value.indexOf(one) >= 0 ? 'disabled' : ''
html += ` ${one}`;
// 预览图片
if (one.endsWith('.png') || one.endsWith('.jpg') || one.endsWith('.jpeg') || one.endsWith('.gif')) {
html += "";
html += ' ';
}
// 试听音频
if (one.endsWith('.mp3') || one.endsWith('.ogg') || one.endsWith('.wav') || one.endsWith('.m4a') || one.endsWith('.flac')) {
html += ""
html += " 音调:";
html += `0:00 / 0:00
`;
}
// 预览动画
if (directory.indexOf('animates') >= 0) {
html += "";
html += "";
}
html += '
';
});
data2.forEach(function (one) {
var checked = value.indexOf(one) >= 0 ? 'checked' : '';
var disabled = _isTileset && value.indexOf(one) >= 0 ? 'disabled' : '';
html += ` ${one}`;
// 预览图片
if (one.endsWith('.png') || one.endsWith('.jpg') || one.endsWith('.jpeg') || one.endsWith('.gif')) {
html += "";
html += '
';
}
})
html += "
如果文件未在此列表显示,请检查文件名是否合法(只能由数字字母下划线横线和点组成),后缀名是否正确。
"; uievent.elements.extraBody.innerHTML = html; }); } uievent._selectAllMaterial = function (checked) { Array.from(document.getElementsByClassName('materialCheckbox')).forEach(function (one) { if (!one.disabled) one.checked = checked; }) } uievent._previewMaterialImage = function (button) { var br = button.nextElementSibling; var img = br.nextElementSibling; if (br.style.display == 'none') { button.innerText = '折叠'; br.style.display = 'block'; img.style.display = 'block'; img.src = img.getAttribute('key'); } else { button.innerText = '预览'; br.style.display = 'none'; img.style.display = 'none'; } } uievent._previewMaterialImage2 = function (button) { var br = button.nextElementSibling; if (br.style.display == 'none') { button.innerText = '折叠'; br.style.display = 'block'; br.parentElement.insertBefore(core.material.images.images[br.getAttribute('key')], br.nextElementSibling); } else { button.innerText = '预览'; br.style.display = 'none'; br.parentElement.removeChild(core.material.images.images[br.getAttribute('key')]); } } uievent._previewMaterialAudio = function (button) { var span = button.nextElementSibling.nextElementSibling; var br = span.nextElementSibling; var audio = br.nextElementSibling; var progress = audio.nextElementSibling; if (br.style.display == 'none') { button.innerText = '暂停'; br.style.display = 'block'; progress.style.display = 'block'; span.style.display = 'inline'; audio.play(); } else { button.innerText = '播放'; br.style.display = 'none'; progress.style.display = 'none'; span.style.display = 'none'; audio.pause(); } } uievent._previewMaterialAudio_onPitchChange = function (input) { var audio = input.parentElement.nextElementSibling.nextElementSibling.nextElementSibling; audio.preservesPitch = false; audio.playbackRate = core.clamp((parseInt(input.value) || 100) / 100, 0.3, 3.0); } uievent._previewMaterialAudio_onTimeUpdate = function (audio) { var _format = function (time) { return parseInt(time / 60) + ":" + core.setTwoDigits(parseInt(time) % 60); } if (audio.duration > 0) { audio.previousElementSibling.previousElementSibling.innerText = _format(audio.currentTime) + " / " + _format(audio.duration); audio.nextElementSibling.setAttribute('value', audio.currentTime / audio.duration); } } uievent._previewMaterialAudio_seek = function (element, event) { var audio = element.previousElementSibling; var value = event.offsetX * element.max / element.offsetWidth; element.setAttribute("value", value); audio.currentTime = audio.duration * value; if (audio.paused) audio.play(); } var _previewMaterialAnimate = function (span, content) { _previewMaterialAnimate_buildSounds(span, content); // 创建dom if (!uievent.values.dom) { var dom = document.createElement('span'); dom.style.position = "relative"; dom.style.marginLeft = "-10px"; var canvas = document.createElement('canvas'); canvas.width = canvas.height = core.__PIXELS__; canvas.style.position = 'absolute'; core.drawThumbnail(editor.currentFloorId, null, { ctx: canvas.getContext('2d') }); dom.appendChild(canvas); var canvas2 = document.createElement('canvas'); canvas2.style.position = 'absolute'; canvas2.width = canvas2.height = core.__PIXELS__; uievent.values.ctx = canvas2.getContext('2d'); dom.appendChild(canvas2); var canvas3 = document.createElement('canvas'); canvas3.width = canvas3.height = core.__PIXELS__; dom.appendChild(canvas3); uievent.values.dom = dom; } span.appendChild(uievent.values.dom); clearInterval(uievent.values.interval); var frame = 0; uievent.values.interval = setInterval(function () { if (span.style.display == 'none') { clearInterval(uievent.values.interval); uievent.values.interval = null; return; } core.clearMap(uievent.values.ctx); core.maps._drawAnimateFrame(uievent.values.ctx, content, core.__PIXELS__ / 2, core.__PIXELS__ / 2, frame++); }, 50); } var _previewMaterialAnimate_buildSounds = function (span, content) { var sounds = content.se || {}; if (typeof sounds == 'string') sounds = { 1: sounds }; var pitch = content.pitch || {}; span.appendChild(document.createElement('br')); var dom = document.createElement('span'); dom.setAttribute('frames', content.frame); var html = ""; Object.keys(sounds).forEach(function (frame) { html += "" + _previewMaterialAnimate_buildSoundRow(frame, sounds[frame], content.frame, pitch[frame]) + ""; }); html += ''; html += ''; html += "${prefixStrings[index]}= 0 ? 'checked' : ''}/> | `; if (index % 3 == 2) { table += '
" + table + "
"; } uievent.previewEditorMulti = function (mode, code) { if (mode == 'statusBar') return uievent.previewStatusBar(code); } // ------ 状态栏预览 ------ // uievent.previewStatusBar = function (code) { if (!/^function\s*\(\)\s*{/.test(code)) return; uievent.isOpen = true; uievent.elements.div.style.display = 'block'; uievent.mode = 'previewStatusBar'; uievent.elements.selectPoint.style.display = 'none'; uievent.elements.yes.style.display = 'none'; uievent.elements.title.innerText = '状态栏自绘预览'; uievent.elements.select.style.display = 'inline'; uievent.elements.selectFloor.style.display = 'none'; uievent.elements.selectPointBox.style.display = 'none'; uievent.elements.canvas.style.display = 'none'; uievent.elements.extraBody.style.display = 'block'; uievent.elements.body.style.overflow = "auto"; uievent.elements.select.innerHTML = '' uievent.elements.select.onchange = uievent._previewStatusBar; // 计算在自绘状态栏中使用到的所有flag var flags = {}; code.replace(/flag:([a-zA-Z0-9_\u4E00-\u9FCC\u3040-\u30FF\u2160-\u216B\u0391-\u03C9]+)/g, function (s0, s1) { flags[s1] = 0; return s0; }); code.replace(/(core\.)?flags.([a-zA-Z0-9_]+)/g, function (s0, s1, s2) { if (!s1) flags[s2] = 0; return s0; }); code.replace(/core\.(has|get|set|add|remove)Flag\('(.*?)'/g, function (s0, s1, s2) { flags[s2] = 0; return s0; }); code.replace(/core\.(has|get|set|add|remove)Flag\("(.*?)"/g, function (s0, s1, s2) { flags[s2] = 0; return s0; }); var html = ''; html += "注:此处预览效果与实际游戏内效果会有所出入,仅供参考,请以游戏内实际效果为准。
"; html += "";
html += "";
html += "属性设置:
"
html += "名称: 生命: 上限: 攻击: 防御: 护盾: ";
html += "魔力: 上限: 金币: 经验: 等级: ";
html += "
当前道具ID(以逗号分隔):
";
html += "
当前装备ID(以逗号分隔):
";
html += "
当前变量值(JSON格式):
";
html += "