✨ Revano of the asset viewer: it now supports grouping your assets wi…

…th categories, as well as displays handy information in forms of small icons. Besides that, every tab now supports three display modes: list/table view, regular cards, and large grid of cards.

app/data/i18n/English.json

@@ -24,6 +24,7 @@
         "done": "Done!",
         "duplicate": "Duplicate",
         "exit": "Exit",
+        "edit": "Edit",
         "fastimport": "Fast Import",
         "filter": "Filter:",
         "loading": "Loading…",
@@ -34,6 +35,7 @@
         "none": "None",
         "norooms": "You need at least one room to compile your app.",
         "notfoundorunknown": "Unknown file. Make sure the file really exists",
+        "nothingToShowFiller": "There is nothing to show here!",
         "ok": "Ok",
         "open": "Open",
         "openproject": "Open project…",
@@ -84,12 +86,11 @@
         "value": "Value",
         "delete": "Delete"
     },
-    "copyCustomProperties": {
-        "customProperties": "Custom Properties",
-        "addProperty": "Add Property",
-        "property": "Property",
-        "value": "Value",
-        "delete": "Delete"
+    "assetViewer": {
+        "addNewGroup": "New Group",
+        "ungrouped": "Show ungrouped",
+        "newGroupName": "New group",
+        "groupDeletionConfirmation": "Are you sure you want to delete this group? All its assets will be ungrouped."
     },
     "colorPicker": {
         "current": "New",
@@ -139,6 +140,11 @@
         "noEntries": "No entries yet.",
         "addRow": "Add a row"
     },
+    "groupEditor": {
+        "groupEditor": "Group Editor",
+        "icon": "Icon:",
+        "color": "Color:"
+    },
     "intro": {
         "loading": "Please wait: kittens are gathering speed of light!",
         "newProject": {
@@ -447,7 +453,9 @@
         "testtext": "Test text 0123 +",
         "textWrap": "Word wrap",
         "textWrapWidth": "Max width:",
-        "useCustomFont": "Use custom font…"
+        "useCustomFont": "Use custom font…",
+        "code": "Code",
+        "copyCode": "Copy"
     },
     "fonts": {
         "fonts": "Fonts",

src/js/projectMigrationScripts/1.8.0.js

@@ -4,6 +4,15 @@ window.migrationProcess.push({
     version: '1.8.0',
     process: project => new Promise(resolve => {
         project.contentTypes = project.contentTypes || [];
+        project.groups = project.groups || {
+            fonts: [],
+            textures: [],
+            styles: [],
+            rooms: [],
+            types: [],
+            sounds: [],
+            emitterTandems: []
+        };
 
         resolve();
     })

src/node_requires/resources/IAsset.d.ts

@@ -0,0 +1,5 @@
+interface IAsset {
+    readonly type: resourceType;
+    readonly uid: string;
+    lastmod: number;
+}

src/node_requires/resources/commonTypes.d.ts

@@ -0,0 +1,5 @@
+type resourceType = 'type' | 'room' | 'sound' | 'style' | 'skeleton' | 'texture' | 'tandem';
+
+type fontWeight = '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+
+type assetRef = -1 | string; // Either an empty string or a UID

src/node_requires/resources/fonts/index.js

@@ -61,7 +61,7 @@ const fontGenPreview = async function fontGenPreview(font) {
     await fs.writeFile(getFontPreview(font, true), buf);
 };
 
-const importTtfToFont = async function importTtfToFont(src) {
+const importTtfToFont = async function importTtfToFont(src, group) {
     const fs = require('fs-extra'),
           path = require('path');
     if (path.extname(src).toLowerCase() !== '.ttf') {
@@ -81,6 +81,7 @@ const importTtfToFont = async function importTtfToFont(src) {
         bitmapFontLineHeight: 18,
         charsets: ['allInFont'],
         customCharset: '',
+        group,
         uid
     };
     global.currentProject.fonts.push(obj);

src/node_requires/resources/projects/index.ts

@@ -59,7 +59,7 @@ const getProjectIct = function (projPath: string): string {
     return projPath;
 };
 
-module.exports = {
+export {
     defaultProject,
     getDefaultProjectDir,
     getProjectThumbnail,

src/node_requires/resources/rooms/IRoom.d.ts

@@ -0,0 +1,54 @@
+type canvasPatternRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
+
+interface IRoomBackground {
+    depth: number,
+    texture: assetRef,
+    extends: {
+        parallaxX?: number,
+        parallaxY?: number,
+        shiftX?: number,
+        shiftY?: number,
+        repeat: canvasPatternRepeat
+        [key: string]: unknown
+    }
+}
+
+interface IRoomCopy {
+    x: number,
+    y: number,
+    uid: assetRef,
+    tx?: number,
+    ty?: number,
+    exts: {
+        [key: string]: unknown
+    }
+}
+
+interface ITileTemplate {
+    x: number;
+    y: number;
+}
+
+interface ITileLayerTemplate {
+    depth: number;
+    tiles: Array<ITileTemplate>
+}
+
+interface IRoom extends IAsset {
+    // Currently just stick to the old structure
+    width: number,
+    height: number,
+    backgrounds: Array<IRoomBackground>,
+    copies: Array<IRoomCopy>,
+    tiles: Array<ITileLayerTemplate>
+    gridX: number,
+    gridY: number,
+    oncreate: string,
+    onstep: string,
+    ondraw: string,
+    onleave: string,
+    thumbnail: string,
+    extends: {
+        [key: string]: unknown
+    }
+}

src/node_requires/resources/rooms/defaultRoom.ts

@@ -0,0 +1,30 @@
+const generateGUID = require('./../../generateGUID');
+
+const room = {
+    type: 'room' as resourceType,
+    oncreate: '',
+    onstep: '',
+    ondraw: '',
+    onleave: '',
+    gridX: 64,
+    gridY: 64,
+    width: 1280,
+    height: 720
+};
+
+const get = function (): IRoom {
+    const uid = generateGUID();
+    const newRoom = Object.assign({}, room, {
+        name: 'Room_' + uid.slice(-6),
+        backgrounds: [],
+        copies: [],
+        tiles: [],
+        extends: {},
+        lastmod: Number(new Date()),
+        thumbnail: uid,
+        uid
+    });
+    return newRoom;
+};
+
+export {get};

src/node_requires/resources/rooms/index.ts

@@ -0,0 +1,55 @@
+const getDefaultRoom = require('./defaultRoom').get;
+const fs = require('fs-extra');
+const path = require('path');
+
+const createNewRoom = async function createNewRoom(name: string): Promise<IRoom> {
+    const room = getDefaultRoom();
+    await fs.copy('./data/img/notexture.png', path.join((global as any).projdir, '/img/r' + room.uid + '.png'));
+    if (name) {
+        room.name = String(name);
+    }
+    window.currentProject.rooms.push(room);
+    window.signals.trigger('roomsChanged');
+    return room;
+};
+
+/**
+ * Gets the ct.js room object by its id.
+ * @param {string} id The id of the ct.js room
+ * @returns {IRoom} The ct.js room object
+ */
+const getRoomFromId = function getRoomFromId(id: string): IRoom {
+    const room = global.currentProject.rooms.find((r: IRoom) => r.uid === id);
+    if (!room) {
+        throw new Error(`Attempt to get a non-existent room with ID ${id}`);
+    }
+    return room;
+};
+
+/**
+ * Retrieves the full path to a thumbnail of a given room.
+ * @param {string|IRoom} room Either the id of the room, or its ct.js object
+ * @param {boolean} [x2] If set to true, returns a 340x256 image instead of 64x64.
+ *                       (Not implemented, actually!)
+ * @param {boolean} [fs] If set to true, returns a file system path, not a URI.
+ * @returns {string} The full path to the thumbnail.
+ */
+const getRoomPreview = (room: assetRef | IRoom, x2: boolean, fs: boolean): string => {
+    void x2;
+    if (room === -1) {
+        return 'data/img/notexture.png';
+    }
+    if (typeof room === 'string') {
+        room = getRoomFromId(room);
+    }
+    if (fs) {
+        return `${(global as any).projdir}/img/r${room.thumbnail}.png`;
+    }
+    return `file://${(global as any).projdir}/img/r${room.thumbnail}.png?${room.lastmod}`;
+};
+
+export {
+    createNewRoom,
+    getRoomFromId,
+    getRoomPreview
+};

src/node_requires/resources/skeletons.js

@@ -73,7 +73,7 @@ const skeletonGenPreview = function (skeleton) {
     });
 };
 
-const importSkeleton = async function importSkeleton(source) {
+const importSkeleton = async function importSkeleton(source, group) {
     const generateGUID = require('./../generateGUID');
     const fs = require('fs-extra');
 

src/node_requires/resources/textures/index.js

@@ -201,7 +201,7 @@ const isBgPostfixTester = /@bg$/;
  * @returns {Promise<object>} A promise that resolves into the resulting texture object.
  */
 // eslint-disable-next-line max-lines-per-function
-const importImageToTexture = async (src, name) => {
+const importImageToTexture = async (src, name, group) => {
     const fs = require('fs-extra'),
           path = require('path'),
           generateGUID = require('./../../generateGUID');
@@ -256,7 +256,8 @@ const importImageToTexture = async (src, name) => {
         top: 0,
         bottom: image.height,
         uid: id,
-        padding: 1
+        padding: 1,
+        group
     };
     if (!(src instanceof Buffer)) {
         obj.source = src;

src/riotTags/dnd-processor.tag

@@ -46,6 +46,8 @@ dnd-processor
             e.stopPropagation();
         };
         this.onDrop = e => {
+            this.dropping = false;
+            this.update();
             e.stopPropagation();
         };
         this.onDragLeave = e => {
@@ -65,4 +67,4 @@ dnd-processor
             document.removeEventListener('dragover', this.onDragOver);
             document.removeEventListener('dragleave', this.onDragLeave);
             document.removeEventListener('drop', this.onDrop);
-        });
+        });

src/riotTags/fonts-panel.tag

@@ -2,14 +2,14 @@ fonts-panel.flexfix.tall.fifty
     asset-viewer(
         collection="{global.currentProject.fonts}"
         contextmenu="{onFontContextMenu}"
-        vocspace="fonts"
         namespace="fonts"
+        assettype="fonts"
         click="{openFont}"
         thumbnails="{thumbnails}"
         names="{names}"
         ref="fonts"
         class="tall"
-        h1 {voc.fonts}
+    )
         h1 {parent.voc.fonts}
         .toleft
             label.file.flexfix-header
@@ -18,7 +18,7 @@ fonts-panel.flexfix.tall.fifty
                     onchange="{parent.fontImport}")
                 .button
                     svg.feather
-                    span {voc.import}
+                        use(xlink:href="#download")
                     span {parent.voc.import}
     context-menu(menu="{fontMenu}" ref="fontMenu")
     font-editor(if="{editingFont}" fontobj="{editedFont}")
@@ -116,7 +116,7 @@ fonts-panel.flexfix.tall.fifty
             const {importTtfToFont} = require('./data/node_requires/resources/fonts');
             for (let i = 0; i < files.length; i++) {
                 if (/\.ttf/gi.test(files[i])) {
-                    importTtfToFont(files[i])
+                    importTtfToFont(files[i], this.refs.fonts.currentGroup.uid)
                     .then(() => {
                         this.refs.fonts.updateList();
                         this.update();

src/riotTags/main-menu/icon-panel.tag

@@ -3,14 +3,16 @@ icon-panel.aView.pad
         button(onclick="{opts.onclose}") {vocGlob.close}
     .clear
     ul.Cards
-        li(
+        li.aCard(
             each="{icon in iconList}"
             onclick="{copy(icon)}"
             no-reorder
         )
-            span {icon}
-            svg.feather
-                use(xlink:href="#{icon}")
+            .aCard-aThumbnail
+                svg.feather
+                    use(xlink:href="#{icon}")
+            .aCard-Properties
+                span {icon}
     script.
         this.namespace = 'common';
         this.mixin(window.riotVoc);