✨ Jump to a texture from texture inputs

app/data/i18n/English.json

@@ -624,6 +624,10 @@
             "is elegant and beautiful 🎩"
         ]
     },
+    "textureInput": {
+        "jumpToTexture": "Jump to the texture",
+        "changeTexture": "Change texture"
+    },
     "writableFolderPrompt": {
         "headerSelectFolderForData": "Select a folder for ct.js data",
         "paragraphCouldNotPickDirectory": "Oh noes! Ct.js could not find a folder for your projects, package builds, and for debugging. Ct.js usually finds one automatically, but this time all the folders it was looking for are read-only!",

src/pug/index.pug

@@ -81,6 +81,7 @@ html
                     }, 1000);
 
                     window.signals = window.signals || riot.observable({});
+                    window.orders = window.orders || riot.observable({});
                     window.signals.trigger('monacoBooted');
                 });
             })();

src/riotTags/main-menu.tag

@@ -24,7 +24,7 @@ main-menu.flexcol
                 svg.feather
                     use(xlink:href="data/icons.svg#sliders")
                 span {voc.project}
-            li(onclick="{changeTab('texture')}" class="{active: tab === 'texture'}" data-hotkey="Control+2" title="Control+2")
+            li(onclick="{changeTab('textures')}" class="{active: tab === 'textures'}" data-hotkey="Control+2" title="Control+2")
                 svg.feather
                     use(xlink:href="data/icons.svg#texture")
                 span {voc.texture}
@@ -51,7 +51,7 @@ main-menu.flexcol
     div.flexitem.relative(if="{global.currentProject}")
         debugger-screen-embedded(if="{tab === 'debug'}" params="{debugParams}" data-hotkey-scope="play" ref="debugger")
         project-settings(show="{tab === 'project'}" data-hotkey-scope="project")
-        textures-panel(show="{tab === 'texture'}" data-hotkey-scope="texture")
+        textures-panel(show="{tab === 'textures'}" data-hotkey-scope="textures")
         ui-panel(show="{tab === 'ui'}" data-hotkey-scope="ui")
         fx-panel(show="{tab === 'fx'}" data-hotkey-scope="fx")
         sounds-panel(show="{tab === 'sounds'}" data-hotkey-scope="sounds")
@@ -78,6 +78,15 @@ main-menu.flexcol
             window.signals.trigger('globalTabChanged');
             window.signals.trigger(`${tab}Focus`);
         };
+        const assetListener = asset => {
+            const [assetType] = asset.split('/');
+            this.changeTab(assetType)();
+            this.update();
+        };
+        window.orders.on('openAsset', assetListener);
+        this.on('unmount', () => {
+            window.orders.off('openAsset', assetListener);
+        });
 
         const languageSubmenu = {
             items: [],

src/riotTags/shared/texture-input.tag

@@ -7,15 +7,28 @@
         Current input's value
     @attribute header (string)
         Passed to the texture selector, showing a header in the top-left corner.
+    @attribute large (atomic)
+        Shows a larger texture selector with additional buttons
     @attribute onselected (riot function)
         A callback that is called when a texture is selected.
         Passes the texture object and its ID as two arguments.
-texture-input
-    button(onclick="{openSelector}")
-        img(src="{getTexturePreview(val || -1)}")
-        span(if="{val === -1}") {voc.select}
-        span(if="{val !== -1}") {getTextureFromId(val).name}
-
+texture-input(class="{large: opts.large} {opts.class}")
+    .aButtonGroup.nml(if="{!opts.large}")
+        button(onclick="{openSelector}" title="{voc.changeTexture}")
+            img(src="{getTexturePreview(val || -1)}")
+            br(if="{opts.large}")
+            span(if="{val === -1}") {vocGlob.select}
+            span(if="{val !== -1}") {getTextureFromId(val).name}
+        button.square(if="{val !== -1}" title="{voc.jumpToTexture}" onclick="{openTexture}")
+            svg.feather
+                use(xlink:href="data/icons.svg#external-link")
+    .texture-input-aBigInput(if="{opts.large}" onclick="{openSelector}" title="{voc.changeTexture}")
+        img(src="{getTexturePreview(val || -1, true)}")
+        div(if="{val === -1}") {vocGlob.select}
+        div(if="{val !== -1}") {getTextureFromId(val).name}
+    button.square(if="{val !== -1 && opts.large}" title="{voc.jumpToTexture}" onclick="{openTexture}")
+        svg.feather
+            use(xlink:href="data/icons.svg#external-link")
     texture-selector(
         if="{selectingTexture}"
         showempty="{opts.showempty}"
@@ -24,7 +37,7 @@ texture-input
         header="{opts.header}"
     )
     script.
-        this.namespace = 'common';
+        this.namespace = 'textureInput';
         this.mixin(window.riotVoc);
 
         const {getTexturePreview, getTextureFromId} = require('./data/node_requires/resources/textures');
@@ -47,6 +60,9 @@ texture-input
             this.selectingTexture = false;
             this.update();
         };
+        this.openTexture = () => {
+            window.orders.trigger('openAsset', `textures/${this.val}`);
+        };
 
         this.on('update', () => {
             if (this.val !== this.opts.val) {

src/riotTags/textures/textures-panel.tag

@@ -117,6 +117,26 @@ textures-panel.panel.view
             window.signals.off('skeletonImported', this.updateTextureData);
         });
 
+        const assetListener = asset => {
+            const [assetType, assetId] = asset.split('/');
+            if (assetType !== 'textures') {
+                return;
+            }
+            if (this.editing) {
+                // Reset texture editor
+                this.editing = this.currentTexture = this.currentTextureId = false;
+                this.update();
+            }
+            this.editing = true;
+            this.currentTexture = window.currentProject.textures.find(t => t.uid === assetId);
+            this.currentTextureId = assetId;
+            this.update();
+        };
+        window.orders.on('openAsset', assetListener);
+        this.on('unmount', () => {
+            window.orders.off('openAsset', assetListener);
+        });
+
         /**
          * An event fired when user attempts to add files from a file manager
          * (by clicking an "Import" button)

src/riotTags/type-editor.tag

@@ -2,9 +2,11 @@ type-editor.panel.view.flexrow
     .type-editor-Properties
         .tall.flexfix.panel.pad
             .flexfix-header
-                .type-editor-aTexturePicker.panel(onclick="{changeSprite}")
-                    img.ohchangeme(src="{type.texture === -1? 'data/img/notexture.png' : (glob.texturemap[type.texture].src.split('?')[0] + '[email protected]?' + getTypeTextureRevision(type)) + getTypeTextureRevision(type)}")
-                    div {voc.change}
+                texture-input.wide(
+                    large="yup" showempty="da"
+                    val="{type.texture}"
+                    onselected="{applyTexture}"
+                )
                 b {voc.name}
                 input.wide(type="text" onchange="{wire('this.type.name')}" value="{type.name}")
                 .anErrorNotice(if="{nameTaken}" ref="errorNotice") {vocGlob.nametaken}
@@ -49,7 +51,6 @@ type-editor.panel.view.flexrow
                     .aCodeEditor(ref="typeondraw")
                 #typeondestroy.tabbed(show="{tab === 'typeondestroy'}")
                     .aCodeEditor(ref="typeondestroy")
-    texture-selector(if="{selectingTexture}" onselected="{applyTexture}" oncancelled="{cancelTexture}" ref="textureselector" showempty="sure")
     script.
         const glob = require('./data/node_requires/glob');
         this.glob = glob;
@@ -171,7 +172,7 @@ type-editor.panel.view.flexrow
         this.changeSprite = () => {
             this.selectingTexture = true;
         };
-        this.applyTexture = texture => () => {
+        this.applyTexture = texture => {
             if (texture === -1) {
                 this.type.texture = -1;
             } else {

src/styl/inputs.styl

@@ -183,7 +183,7 @@ input[type="reset"],
         &:after
             background error
 
-.button-stack
+.button-stack, .aButtonGroup
     display inline-flex
     margin 0 0.5em
     button, .button

src/styl/tags/shared/texture-input.styl

@@ -1,5 +1,40 @@
 texture-input
-    & > button img
+    & > .aButtonGroup img
         width 2rem
         margin-right 1rem
         vertical-align bottom
+    .texture-input-aBigInput
+        @extends .panel
+        margin 0 auto
+        padding 0.5rem 0.5rem 1rem
+        text-align center
+        position relative
+        cursor pointer
+        {trans}
+        background backgroundDeeper
+        div
+            position absolute
+            left 0
+            right 0
+            text-align center
+            bottom 0
+            font-size 80%
+            opacity 0.5
+            {trans}
+        &:hover
+            border-color act
+            div
+                opacity 1
+    &.large
+        position relative
+        display inline-block
+        & > button
+            margin 0
+            position absolute
+            right 0.5rem
+            top 0.5rem
+            width auto
+            font-size 0.5rem
+            svg
+                width 1rem
+                height 1rem

src/styl/tags/types/type-editor.styl

@@ -44,32 +44,3 @@ type-editor
         margin-right 1rem
     .type-editor-aCodeEditor
         flex 1 1 auto
-
-.type-editor-aTexturePicker
-    width 130px
-    height 130px
-    margin 0.5em auto
-    position relative
-    cursor pointer
-    {trans}
-    background backgroundDeeper
-    div
-        position absolute
-        left 0
-        right 0
-        text-align center
-        bottom 0
-        font-size 80%
-        opacity 0.5
-        {trans}
-    &:hover
-        border-color act
-        div
-            opacity 1
-    img
-        position absolute
-        left 50%
-        top 50%
-        transform translate(-50%, -50%)
-        max-width 128px
-        max-height 128px