Detect type automatically when uploading texture

resources/assets/src/views/skinlib/Upload.vue

@@ -101,6 +101,7 @@
 <script>
 import Vue from 'vue'
 import FileUpload from 'vue-upload-component'
+import { isSlimSkin } from 'skinview3d'
 import 'element-ui/lib/theme-chalk/radio.css'
 import Radio from 'element-ui/lib/radio'
 
@@ -188,7 +189,10 @@ export default {
 
       const image = new Image()
       image.src = this.texture
-      image.onload = () => (this.width2d = image.width > 400 ? 400 : image.width)
+      image.onload = () => {
+        this.width2d = image.width > 400 ? 400 : image.width
+        this.type = isSlimSkin(image) ? 'alex' : 'steve'
+      }
     },
     remove() {
       this.$refs.upload.clear()

resources/assets/tests/__mocks__/skinview3d.ts

@@ -49,3 +49,7 @@ export function createOrbitControls() {}
 export const WalkingAnimation = { paused: false }
 export const RunningAnimation = { paused: false }
 export const RotatingAnimation = { paused: false }
+
+export function isSlimSkin() {
+  return false
+}

resources/assets/tests/setup.js

@@ -5,6 +5,7 @@ import Vue from 'vue'
 import {
   Button,
   Input,
+  Radio,
   Switch,
 } from 'element-ui'
 
@@ -52,6 +53,7 @@ Vue.prototype.$http = {
 
 Vue.use(Button)
 Vue.use(Input)
+Vue.use(Radio)
 Vue.use(Switch)
 Vue.prototype.$message = {
   info: jest.fn(),

resources/assets/tests/views/skinlib/Upload.test.ts

@@ -1,6 +1,8 @@
 /* eslint-disable accessor-pairs */
 import Vue from 'vue'
 import { mount } from '@vue/test-utils'
+import { Radio } from 'element-ui'
+import * as skinview3d from 'skinview3d'
 import Upload from '@/views/skinlib/Upload.vue'
 import { flushPromises } from '../../utils'
 
@@ -83,6 +85,9 @@ test('process input file', () => {
         set: fn => fn(),
       })
     })
+  jest.spyOn(skinview3d, 'isSlimSkin')
+    .mockReturnValueOnce(true)
+    .mockReturnValue(false)
   const blob = new Blob()
   type Component = Vue & {
     name: string
@@ -92,15 +97,18 @@ test('process input file', () => {
   const wrapper = mount<Component>(Upload, {
     stubs: ['file-upload'],
   })
+  const radioes = wrapper.findAll(Radio)
 
   wrapper.vm.inputFile()
   expect(wrapper.vm.name).toBe('')
 
   wrapper.vm.inputFile({ file: blob, name: '123.png' })
   expect(wrapper.vm.name).toBe('123')
+  expect(radioes.at(1).classes()).toContain('is-checked')
 
   wrapper.vm.inputFile({ file: blob, name: '456.png' })
   expect(wrapper.vm.name).toBe('123')
+  expect(radioes.at(0).classes()).toContain('is-checked')
 
   wrapper.setData({ name: '' })
   wrapper.vm.inputFile({ file: blob, name: '789' })

resources/misc/changelogs/en/4.1.4.md

@@ -1,3 +1,7 @@
+## Added
+
+- Detect type automatically when uploading texture.
+
 ## Fixed
 
 - Fixed dropdown menu of skin library for mobile users.

resources/misc/changelogs/zh_CN/4.1.4.md

@@ -1,3 +1,7 @@
+## 新增
+
+- 上传皮肤时自动检测类型
+
 ## 修复
 
 - 修复移动端下皮肤库下拉菜单失效的问题