expand / fold materials

2019-06-03 01:10:07 +08:00 · 2019-06-03 01:10:07 +08:00 · bcb3bfc8fd
commit bcb3bfc8fd
parent 4753b47eb4
7 changed files with 116 additions and 76 deletions
--- 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;
--- 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; */
--- 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';
--- 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
--- a/editor-mobile.html
+++ b/editor-mobile.html
@ -308,6 +308,7 @@
                <div id='dataSelection' style="display:none"></div>
            </div>
        </div>
+        <button id="iconExpandBtn"></button>
    </div>
    <div id="down">
        <div style="margin:0.5rem">
--- a/editor.html
+++ b/editor.html
@ -352,6 +352,7 @@
                <div id='dataSelection' style="display:none"></div>
            </div>
        </div>
+        <button id="iconExpandBtn"></button>
    </div>
    <div id="menuDiv">
        <div id="midMenu" style="display:none">
--- a/libs/utils.js
+++ b/libs/utils.js
@ -317,16 +317,15 @@ utils.prototype.splitImage = function (image, width, height) {
    height = height || width;
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
-    canvas.width = width;
-    canvas.height = height;
    var ans = [];
    for (var j = 0; j < image.height; j += height) {
        for (var i = 0; i < image.width; i += width) {
-            context.drawImage(image, i, j, width, height, 0, 0, width, height);
+            var w = Math.min(width, image.width - i), h = Math.min(height, image.height - j);
+            canvas.width = w; canvas.height = h;
+            context.drawImage(image, i, j, w, h, 0, 0, w, h);
            var img = new Image();
            img.src = canvas.toDataURL("image/png");
            ans.push(img);
-            context.clearRect(0, 0, width, height);
        }
    }
    return ans;