From bcb3bfc8fd13d2b85d7743a8120ecb03d3b02a12 Mon Sep 17 00:00:00 2001 From: oc Date: Mon, 3 Jun 2019 01:10:07 +0800 Subject: [PATCH] expand / fold materials --- _server/css/editor.css | 7 ++ _server/css/editor_mobile.css | 9 ++- _server/editor.js | 127 +++++++++++++++++----------------- _server/editor_unsorted_1.js | 40 ++++++++--- editor-mobile.html | 1 + editor.html | 1 + libs/utils.js | 7 +- 7 files changed, 116 insertions(+), 76 deletions(-) diff --git a/_server/css/editor.css b/_server/css/editor.css index e053cafd..df5e2670 100644 --- a/_server/css/editor.css +++ b/_server/css/editor.css @@ -287,6 +287,13 @@ body { 0 0 0 3px #000; } +#iconExpandBtn { + position: absolute; + left: 10px; + bottom: 30px; + display: none; +} + .warnText { color: #D50000; font-weight: 700; diff --git a/_server/css/editor_mobile.css b/_server/css/editor_mobile.css index ef6d2f72..4a46198b 100644 --- a/_server/css/editor_mobile.css +++ b/_server/css/editor_mobile.css @@ -272,6 +272,13 @@ body { 0 0 0 3px #000; } +#iconExpandBtn { + position: absolute; + left: 10px; + bottom: 30px; + display: none; +} + .warnText { color: #D50000; font-weight: 700; @@ -433,7 +440,7 @@ div.row .rowtd .rowtext{ font: normal 2.5vw Arial, sans-serif; list-style: none; margin: 0; - padding: 4px 7em 4px 28px; + padding: 4px 7em 4px 4px; white-space: nowrap; /* padding-left: 12px; */ diff --git a/_server/editor.js b/_server/editor.js index b8c770e4..24401e84 100644 --- a/_server/editor.js +++ b/_server/editor.js @@ -267,7 +267,7 @@ editor.prototype.setViewport=function (x, y) { } editor.prototype.moveViewport=function(x,y){ - this.setViewport(core.bigmap.offsetX+32*x, core.bigmap.offsetY+32*y); + editor.setViewport(core.bigmap.offsetX+32*x, core.bigmap.offsetY+32*y); } /////////// 界面交互相关 /////////// @@ -278,6 +278,9 @@ editor.prototype.drawInitData = function (icons) { var maxHeight = 700; var sumWidth = 0; editor.widthsX = {}; + editor.folded = core.getLocalStorage('folded', false); + // editor.folded = true; + editor.foldPerCol = 30; // var imgNames = Object.keys(images); //还是固定顺序吧； var imgNames = ["terrains", "animates", "enemys", "enemy48", "items", "npcs", "npc48", "autotile"]; @@ -288,20 +291,21 @@ editor.prototype.drawInitData = function (icons) { for (var im in autotiles) { tempy += autotiles[im].height; } - editor.widthsX[img] = [img, sumWidth / 32, (sumWidth + 3 * 32) / 32, tempy]; - sumWidth += 3 * 32; + var tempx = editor.folded ? 32 : 3 * 32; + editor.widthsX[img] = [img, sumWidth / 32, (sumWidth + tempx) / 32, tempy]; + sumWidth += tempx; maxHeight = Math.max(maxHeight, tempy); continue; } - if (img == 'terrains') { - editor.widthsX[img] = [img, sumWidth / 32, (sumWidth + images[img].width) / 32, images[img].height + 32*2] - sumWidth += images[img].width; - maxHeight = Math.max(maxHeight, images[img].height + 32*2); - continue; + var width = images[img].width, height = images[img].height, mh = height; + if (editor.folded) { + var per_height = (img == 'enemy48' || img == 'npc48' ? 48 : 32); + width = Math.ceil(height / per_height / editor.foldPerCol) * 32; + if (width > 32) mh = per_height * editor.foldPerCol; } - editor.widthsX[img] = [img, sumWidth / 32, (sumWidth + images[img].width) / 32, images[img].height]; - sumWidth += images[img].width; - maxHeight = Math.max(maxHeight, images[img].height); + editor.widthsX[img] = [img, sumWidth / 32, (sumWidth + width) / 32, height]; + sumWidth += width; + maxHeight = Math.max(maxHeight, mh + 64); } var tilesets = images.tilesets; for (var ii in core.tilesets) { @@ -318,82 +322,75 @@ editor.prototype.drawInitData = function (icons) { if (fullWidth > edata.width) edata.style.width = (edata.width = fullWidth) / ratio + 'px'; edata.style.height = (edata.height = fullHeight) / ratio + 'px'; */ + var iconImages = document.getElementById('iconImages'); iconImages.style.width = (iconImages.width = fullWidth) / ratio + 'px'; iconImages.style.height = (iconImages.height = fullHeight) / ratio + 'px'; - var dc = {drawImage:function(){ - var image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight; - var a=Array.prototype.slice.call(arguments) - if(arguments.length==3){ - // [image, dx, dy]=arguments - // [sx, sy, sWidth, sHeight, dWidth, dHeight]=[0,0,image.width,image.height,image.width,image.height] - image=a[0] - a=[a[0],0,0,image.width,image.height,a[1],a[2],image.width,image.height] - } - if(arguments.length==5){ - // [image, dx, dy, dWidth, dHeight]=arguments - // [sx, sy, sWidth, sHeight]=[0,0,image.width,image.height] - image=a[0] - a=[a[0],0,0,image.width,image.height,a[1],a[2],a[3],a[4]] - } - if(arguments.length==9){ - // [image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight]=arguments - } - image=a[0]; - sx=a[1]; - sy=a[2]; - sWidth=a[3]; - sHeight=a[4]; - dx=a[5]; - dy=a[6]; - dWidth=a[7]; - dHeight=a[8]; - //放弃对 dWidth, dHeight 的支持, 始终画一样大的 - var dimg=new Image() - dimg.src = image.src; - dimg.style.clip=['rect(',sy,'px,',sx+sWidth,'px,',sy+sHeight,'px,',sx,'px)'].join('') - dimg.style.top=dy-sy+'px' - dimg.style.left=dx-sx+'px' - dimg.width=image.width/ratio - dimg.height=image.height/ratio - iconImages.appendChild(dimg) - }} - // var dc = edata.getContext('2d'); - var nowx = 0; - var nowy = 0; + var drawImage = function (image, x, y) { + image.style.left = x + 'px'; + image.style.top = y + 'px'; + iconImages.appendChild(image); + } + + var nowx = 0, nowy = 0; for (var ii = 0; ii < imgNames.length; ii++) { var img = imgNames[ii]; if (img == 'terrains') { - (function(image,dc,nowx){ + (function(image,nowx){ if (image.complete) { - dc.drawImage(image, nowx, 32); + drawImage(image, nowx, 32); core.material.images.airwall = image; delete(editor.airwallImg); } else image.onload = function () { - dc.drawImage(image, nowx, 32); + drawImage(image, nowx, 32); core.material.images.airwall = image; delete(editor.airwallImg); editor.updateMap(); } - })(editor.airwallImg,dc,nowx); - dc.drawImage(images[img], nowx, 32*2); - nowx += images[img].width; + })(editor.airwallImg,nowx); + if (editor.folded) { + // --- 单列 & 折行 + var subimgs = core.splitImage(images[img], 32, editor.foldPerCol * 32); + var frames = images[img].width / 32; + for (var i = 0; i < subimgs.length; i+=frames) { + drawImage(subimgs[i], nowx, i==0?2*32:0); + nowx += 32; + } + } + else { + drawImage(images[img], nowx, 32*2); + nowx += images[img].width; + } continue; } if (img == 'autotile') { var autotiles = images[img]; + var tempx = editor.folded ? 32 : 96; for (var im in autotiles) { - dc.drawImage(autotiles[im], 0, 0, 96, 128, nowx, nowy, 96, 128); + var subimgs = core.splitImage(autotiles[im], tempx, autotiles[im].height); + drawImage(subimgs[0], nowx, nowy); nowy += autotiles[im].height; } - nowx += 3 * 32; + nowx += tempx; continue; } - dc.drawImage(images[img], nowx, 0) - nowx += images[img].width; + if (editor.folded) { + // --- 单列 & 折行 + var per_height = img.endsWith('48') ? 48 : 32; + var subimgs = core.splitImage(images[img], 32, editor.foldPerCol * per_height); + var frames = images[img].width / 32; + for (var i = 0; i < subimgs.length; i+=frames) { + drawImage(subimgs[i], nowx, 0); + nowx += 32; + } + } + else { + drawImage(images[img], nowx, 0); + nowx += images[img].width; + } } for (var ii in core.tilesets) { var img = core.tilesets[ii]; - dc.drawImage(tilesets[img], nowx, 0) + drawImage(tilesets[img], nowx, 0); nowx += tilesets[img].width; } //editor.mapInit(); @@ -467,8 +464,12 @@ editor.prototype.setSelectBoxFromInfo=function(thisevent){ pos.x=editor.widthsX[thisevent.images][1]; pos.y=thisevent.y; if(thisevent.x)pos.x+=thisevent.x; - if(thisevent.images=='terrains')pos.y+=2; ysize = thisevent.images.endsWith('48') ? 48 : 32; + if (editor.folded) { + pos.x += Math.floor(pos.y / editor.foldPerCol); + pos.y %= editor.foldPerCol; + } + if(pos.x == 0) pos.y+=2; } var dataSelection = document.getElementById('dataSelection'); dataSelection.style.left = pos.x * 32 + 'px'; diff --git a/_server/editor_unsorted_1.js b/_server/editor_unsorted_1.js index 6eec656c..b31510d6 100644 --- a/_server/editor_unsorted_1.js +++ b/_server/editor_unsorted_1.js @@ -444,11 +444,22 @@ editor.constructor.prototype.listen=function () { } var scrollBarHeight = getScrollBarHeight(); + var iconExpandBtn = document.getElementById('iconExpandBtn'); + iconExpandBtn.style.display = 'block'; + iconExpandBtn.innerText = editor.folded ? "展开" : "折叠"; + iconExpandBtn.onclick = function () { + if (confirm(editor.folded ? "你想要展开素材吗？\n展开模式下将显示全素材内容。" + : ("你想要折叠素材吗？\n折叠模式下每个素材将仅显示单列，并且每"+editor.foldPerCol+"个自动换列。"))) { + core.setLocalStorage('folded', !editor.folded); + window.location.reload(); + } + } + var dataSelection = document.getElementById('dataSelection'); var iconLib=document.getElementById('iconLib'); iconLib.onmousedown = function (e) { e.stopPropagation(); - if (!editor.isMobile && e.clientY>=((core.__SIZE__==13?630:655) - scrollBarHeight)) return; + if (!editor.isMobile && e.clientY>=iconLib.offsetHeight - scrollBarHeight) return; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var loc = { @@ -460,11 +471,11 @@ editor.constructor.prototype.listen=function () { var pos = locToPos(loc); for (var spriter in editor.widthsX) { if (pos.x >= editor.widthsX[spriter][1] && pos.x < editor.widthsX[spriter][2]) { - var ysize = spriter.indexOf('48') === -1 ? 32 : 48; + var ysize = spriter.endsWith('48') ? 48 : 32; loc.ysize = ysize; pos.images = editor.widthsX[spriter][0]; pos.y = ~~(loc.y / loc.ysize); - if(core.tilesets.indexOf(pos.images)==-1)pos.x = editor.widthsX[spriter][1]; + if(!editor.folded && core.tilesets.indexOf(pos.images)==-1) pos.x = editor.widthsX[spriter][1]; var autotiles = core.material.images['autotile']; if (pos.images == 'autotile') { var imNames = Object.keys(autotiles); @@ -478,8 +489,15 @@ editor.constructor.prototype.listen=function () { } } } - } else if ((pos.y + 1) * ysize > editor.widthsX[spriter][3]) - pos.y = ~~(editor.widthsX[spriter][3] / ysize) - 1; + } + else { + var height = editor.widthsX[spriter][3], col = height / ysize; + if (editor.folded) { + col = (pos.x == editor.widthsX[spriter][2] - 1) ? ((col - 1) % editor.foldPerCol + 1) : editor.foldPerCol; + } + if (spriter == 'terrains' && pos.x == editor.widthsX[spriter][1]) col += 2; + pos.y = Math.min(pos.y, col - 1); + } selectBox.isSelected(true); // console.log(pos,core.material.images[pos.images].height) @@ -493,10 +511,16 @@ editor.constructor.prototype.listen=function () { } else if(pos.x == 0 && pos.y == 1){ editor.info = editor.ids[editor.indexs[17]]; } else { - if (Object.prototype.hasOwnProperty.call(autotiles, pos.images)) editor.info = {'images': pos.images, 'y': 0}; - else if (pos.images == 'terrains') editor.info = {'images': pos.images, 'y': pos.y - 2}; + if (autotiles[pos.images]) editor.info = {'images': pos.images, 'y': 0}; else if (core.tilesets.indexOf(pos.images)!=-1) editor.info = {'images': pos.images, 'y': pos.y, 'x': pos.x-editor.widthsX[spriter][1]}; - else editor.info = {'images': pos.images, 'y': pos.y}; + else { + var y = pos.y; + if (editor.folded) { + y += editor.foldPerCol * (pos.x-editor.widthsX[spriter][1]); + } + if (pos.images == 'terrains' && pos.x == 0) y -= 2; + editor.info = {'images': pos.images, 'y': y} + } for (var ii = 0; ii < editor.ids.length; ii++) { if ((core.tilesets.indexOf(pos.images)!=-1 && editor.info.images == editor.ids[ii].images diff --git a/editor-mobile.html b/editor-mobile.html index d76491b1..e12accb8 100644 --- a/editor-mobile.html +++ b/editor-mobile.html @@ -308,6 +308,7 @@ +
diff --git a/editor.html b/editor.html index 0a0f0d96..7ffc7df3 100644 --- a/editor.html +++ b/editor.html @@ -352,6 +352,7 @@
+