mirror/blockbench
2
0
Fork 0
mirror of https://github.com/JannisX11/blockbench.git synced 2025-04-12 17:41:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'new-start-screen' into next

Browse Source
This commit is contained in:
JannisX11 2022-06-05 17:35:10 +02:00
commit a9f9e54d25
16 changed files with 282 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/start_screen/generic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

4
css/general.css
View File

@ -336,6 +336,10 @@
.tool:active .icon.fa_big {
padding-top: 2px;
}
img.icon {
height: 26px;
image-rendering: pixelated;
}
.tool.enabled {
border-bottom: 3px solid var(--color-accent);

111
css/window.css
View File

@ -661,11 +661,6 @@
#start_screen h3 {
margin: 0;
}
#start_screen #start-files h3 {
padding-bottom: 0;
height: auto;
font-size: 18px;
}
#start_screen .bar.next_to_title {
position: absolute;
right: 8px;
@ -756,7 +751,7 @@
color: var(--color-accent_text);
background-color: transparent;
}
#start-files ul.redact li.recent_project.thumbnail .thumbnail_image {
#start_files ul.redact li.recent_project.thumbnail .thumbnail_image {
background: transparent !important;
}
#start_screen .recent_project.thumbnail:hover .icon_wrapper {
@ -789,12 +784,12 @@
#start_screen > content > section.vertical {
flex-direction: column;
}
#start_screen section div.start_screen_left, #start_screen section div.start_screen_right {
div.start_screen_left, div.start_screen_right {
display: block;
padding: 24px;
max-height: 606px;
}
#start_screen section div.start_screen_right > ul {
div.start_screen_right > ul {
max-height: 470px;
padding-right: 5px;
overflow-y: auto;
@ -821,7 +816,7 @@
}
#start_screen div.start_screen_right {
flex-grow: 1;
width: 62%;
width: 70%;
}
#start_screen section.vertical div.start_screen_right {
width: auto;
@ -895,44 +890,108 @@
#start-files li:hover {
color: var(--color-light);
}
#start_screen section#start-files div.start_screen_left {
width: 38%;
padding: 20px 24px 0px 24px;
#start_files div.start_screen_left {
width: 30%;
padding: 20px 0 0px 0;
position: relative;
display: flex;
flex-direction: column;
background-color: var(--color-back);
}
#start-files div.start_screen_right {
border-left: 1px solid var(--color-border);
#start_files div.start_screen_right {
position: relative;
min-height: 250px;
}
#start_screen div.start_screen_left > ul {
#start_files div.start_screen_left h2 {
margin-left: 24px;
}
#start_files div.start_screen_left > ul {
margin-bottom: 16px;
overflow-y: auto;
}
#start_screen div.start_screen_right i {
#start_files div.start_screen_right i {
vertical-align: sub;
}
#start-files div.start_screen_left li {
.tool.quickstart_button i {
font-size: 17pt;
}
#start_files li.format_category {
margin-top: 16px;
}
#start_files li.format_category > label {
color: var(--color-subtle_text);
font-size: 18px;
margin-left: 24px;
}
#start_files li.format_entry {
padding: 4px 0;
cursor: pointer;
font-size: 18px;
padding-left: 24px;
}
#start-files div.start_screen_left span.icon_wrapper {
#start_files li.format_entry span.icon_wrapper {
height: 22px;
width: 32px;
}
#start-files div.start_screen_left li p {
font-size: 0.94em;
line-height: normal;
color: var(--color-subtle_text);
#start_files li.format_entry > * {
cursor: inherit;
}
#start-files div.start_screen_left i {
#start_files li.format_entry:hover {
color: var(--color-light);
}
#start_files li.format_entry.selected {
background-color: var(--color-accent);
color: var(--color-accent_text);
}
#start_files li.format_entry.selected::after {
float: right;
content: "\f105";
font-family: 'Font Awesome 6 Free';
font-weight: 900;
margin-right: 10px;
}
.format_entry i {
font-size: 18pt;
height: 22px;
margin: 2px 8px 0px 0;
display: inline-block;
}
.format_entry i.fa_big {
font-size: 16pt;
}
.format_entry.start_screen_link:hover {
text-decoration: underline;
}
.format_entry.start_screen_link::after {
float: right;
content: "\f08e";
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: var(--color-subtle_text);
font-size: 15px;
margin-right: 10px;
}
.format_target {
padding: 10px 0;
}
.format_target span {
padding: 2px 4px;
margin: 0 2px;
background-color: var(--color-accent);
border-radius: 5px;
color: var(--color-accent_text);
}
#start_files .button_bar {
text-align: left;
padding-right: 14px;
}
#start_files .format_page_close_button {
margin-top: 8px;
margin-left: -2px;
cursor: pointer;
width: 28px;
}
section#keymap_preference {
display: block !important;

1
index.html
View File

@ -137,6 +137,7 @@
<script src="js/io/format.js"></script>
<script src="js/io/project.js"></script>
<script src="js/io/io.js"></script>
<script src="js/io/formats/generic.js"></script>
<script src="js/io/formats/bbmodel.js"></script>
<script src="js/io/formats/java_block.js"></script>
<script src="js/io/formats/bedrock.js"></script>

156
js/interface/start_screen.js
View File

@ -1,4 +1,6 @@
const StartScreen = {};
const StartScreen = {
loaders: {}
};
function addStartScreenSection(id, data) {
if (typeof id == 'object') {
@ -129,14 +131,18 @@ onVueSetup(function() {
StartScreen.vue = new Vue({
el: '#start_screen',
components: {},
data: {
formats: Formats,
loaders: ModelLoader.loaders,
selected_format_id: '',
recent: isApp ? recent_projects : [],
list_type: StateMemory.start_screen_list_type || 'grid',
redact_names: settings.streamer_mode.value,
redacted: tl('generic.redacted'),
search_term: '',
isApp,
mobile_layout: Blockbench.isMobile,
getIconNode: Blockbench.getIconNode
},
methods: {
@ -172,6 +178,38 @@ onVueSetup(function() {
StateMemory.start_screen_list_type = type;
StateMemory.save('start_screen_list_type')
},
getFormatCategories() {
let categories = {};
function add(key, format) {
if (!categories[format.category]) {
categories[format.category] = {
name: tl('format_category.' + format.category),
entries: []
}
}
categories[format.category].entries.push(format);
}
for (let key in this.formats) {
add(key, this.formats[key])
}
for (let key in this.loaders) {
add(key, this.loaders[key])
}
return categories;
},
loadFormat(format_entry) {
this.selected_format_id = format_entry.id;
if (format_entry.onSetup) format_entry.onSetup();
},
confirmSetupScreen(format_entry) {
this.selected_format_id = '';
if (format_entry.onStart) format_entry.onStart();
if (typeof format_entry.new == 'function') format_entry.new();
},
openLink(link) {
Blockbench.openLink(link);
},
tl
},
computed: {
@ -189,24 +227,81 @@ onVueSetup(function() {
template: `
<div id="start_screen">
<content>
<section id="start-files">
<div class="start_screen_left">
<section id="start_files">
<div class="start_screen_left" v-if="!(selected_format_id && mobile_layout)">
<h2>${tl('mode.start.new')}</h2>
<div class="bar next_to_title">
<div class="tool" onclick="Blockbench.openLink('https://blockbench.net/quickstart/')">
<div class="tooltip">${tl('menu.help.quickstart')}</div>
<i class="fas fa-question-circle"></i>
</div>
</div>
<ul>
<li v-for="format in formats" v-if="format.show_on_start_screen && (!redact_names || !format.confidential)" v-on:click="format.new()">
<span class="icon_wrapper f_left" v-html="getIconNode(format.icon).outerHTML"></span>
<h3>{{ format.name }}</h3>
<p>{{ format.description }}</p>
<li v-for="(category, key) in getFormatCategories()" class="format_category" :key="key">
<label>{{ category.name }}</label>
<ul>
<li
v-for="format_entry in category.entries" :key="format_entry.id"
class="format_entry" :class="{[format_entry instanceof ModelFormat ? 'format' : 'loader']: true, selected: format_entry.id == selected_format_id}"
:title="format_entry.description"
:format="format_entry.id"
v-if="format_entry.show_on_start_screen && (!redact_names || !format_entry.confidential)"
@click="loadFormat(format_entry)"
@dblclick="confirmSetupScreen(format_entry)"
>
<span class="icon_wrapper f_left" v-html="getIconNode(format_entry.icon).outerHTML"></span>
<label>{{ format_entry.name }}</label>
</li>
</ul>
</li>
<li class="format_category">
<label>${tl('mode.start.info')}</label>
<ul>
<li class="format_entry start_screen_link" @click="openLink('https://blockbench.net/quickstart')">
<span class="icon_wrapper f_left"><i class="material-icons">help</i></span>
<label>${tl('menu.help.quickstart')}</label>
</li>
<li class="format_entry start_screen_link" @click="openLink('https://blockbench.net/wiki')">
<span class="icon_wrapper f_left"><i class="material-icons">menu_book</i></span>
<label>Blockbench Wiki</label>
</li>
</ul>
</li>
</ul>
</div>
<div class="start_screen_right">
<div class="start_screen_right start_screen_format_page" v-if="viewed_format = (selected_format_id && (formats[selected_format_id] || loaders[selected_format_id]) )" :id="'format_page_'+selected_format_id">
<div class="tool format_page_close_button" @click="selected_format_id = ''"><i class="material-icons">arrow_back_ios</i></div>
<h2 style="margin-bottom: 12px;">{{ viewed_format.name }}</h2>
<template v-if="viewed_format.format_page && viewed_format.format_page.component">
<component :is="'format_page_' + selected_format_id" />
</template>
<template v-else>
<p class="format_description" v-if="viewed_format.description">{{ viewed_format.description }}</p>
<p class="format_target" v-if="viewed_format.target">
<b>${tl('mode.start.target')}</b>:
<template v-if="viewed_format.target instanceof Array">
<span v-for="target in viewed_format.target">{{ target }}</span>
</template>
<span v-else>{{ viewed_format.target }}</span>
</p>
<content v-if="viewed_format.format_page && viewed_format.format_page.content">
<template v-for="item in viewed_format.format_page.content">
<img v-if="item.type == 'image'" :src="item.source" :width="item.width" :height="item.height">
<h2 v-if="item.type == 'h2'" v-html="marked(item.text.replace(/\\n/g, '\\n\\n'))"></h2>
<label v-if="item.type == 'label'" v-html="marked(item.text.replace(/\\n/g, '\\n\\n'))"></label>
<p v-else v-html="marked((item.text || item).replace(/\\n/g, '\\n\\n'))"></p>
</template>
</content>
<div class="button_bar">
<button style="margin-top: 20px;" @click="confirmSetupScreen(viewed_format)">${tl('mode.start.start')}</button>
</div>
</template>
</div>
<div class="start_screen_right" v-else>
<h2 class="tl">${tl('mode.start.recent')}</h2>
<div id="start_screen_view_menu" v-if="isApp && !redact_names">
<search-bar :hide="true" v-model="search_term"></search-bar>
@ -233,8 +328,11 @@ onVueSetup(function() {
<span class="icon_wrapper" v-html="getIconNode(project.icon).outerHTML"></span>
</li>
</ul>
<button style="margin-top: 20px;" onclick="BarItems.open_model.trigger()">${tl('action.open_model')}</button>
<div class="button_bar">
<button style="margin-top: 20px;" onclick="BarItems.open_model.trigger()">${tl('action.open_model')}</button>
</div>
</div>
</section>
</content>
</div>
@ -243,6 +341,34 @@ onVueSetup(function() {
});
class ModelLoader {
constructor(id, options) {
this.id = id;
this.name = tl(options.name);
this.description = options.description ? tl(options.description) : '';
this.icon = options.icon || 'arrow_forward';
this.category = options.category || 'loaders';
this.target = options.target || '';
this.show_on_start_screen = true;
this.confidential = options.confidential || false;
this.condition = options.condition;
this.format_page = options.format_page;
this.onSetup = options.onSetup;
this.onStart = options.onStart;
Vue.set(ModelLoader.loaders, id, this);
if (this.format_page && this.format_page.component) {
Vue.component(`format_page_${this.id}`, this.format_page.component)
}
}
delete() {
delete ModelLoader.loaders[this.id];
}
}
ModelLoader.loaders = {};
(function() {
/*$.getJSON('./content/news.json').then(data => {
addStartScreenSection('new_version', data.new_version)

30
js/io/format.js
View File

@ -3,11 +3,17 @@ const Formats = {};
//Formats
class ModelFormat {
constructor(data) {
Formats[data.id] = this;
this.id = data.id;
constructor(id, data) {
if (typeof id == 'object') {
data = id;
id = data.id;
}
Formats[id] = this;
this.id = id;
this.name = data.name || tl('format.'+this.id);
this.description = data.description || tl('format.'+this.id+'.desc');
this.category = data.category || 'other';
this.target = data.target;
this.show_on_start_screen = true;
this.can_convert_to = true;
this.confidential = false;
@ -20,6 +26,7 @@ class ModelFormat {
this.codec = data.codec;
this.onActivation = data.onActivation;
this.onDeactivation = data.onDeactivation;
this.format_page = data.format_page;
Merge.string(this, data, 'icon');
Merge.boolean(this, data, 'show_on_start_screen');
Merge.boolean(this, data, 'can_convert_to');
@ -28,6 +35,9 @@ class ModelFormat {
for (let id in ModelFormat.properties) {
ModelFormat.properties[id].merge(this, data);
}
if (this.format_page && this.format_page.component) {
Vue.component(`format_page_${this.id}`, this.format_page.component)
}
if (Blockbench.setup_successful && StartScreen.vue) {
StartScreen.vue.$forceUpdate();
}
@ -233,17 +243,3 @@ new Property(ModelFormat, 'boolean', 'pose_mode');
new Property(ModelFormat, 'boolean', 'display_mode');
new Property(ModelFormat, 'boolean', 'animation_mode');
new Property(ModelFormat, 'boolean', 'texture_folder');
new ModelFormat({
id: 'free',
icon: 'icon-format_free',
meshes: true,
rotate_cubes: true,
bone_rig: true,
centered_grid: true,
optional_box_uv: true,
uv_rotation: true,
animation_mode: true,
animated_textures: true,
locators: true,
})

2
js/io/formats/bedrock.js
View File

@ -1059,6 +1059,8 @@ var format = new ModelFormat({
id: 'bedrock',
extension: 'json',
icon: 'icon-format_bedrock',
category: 'minecraft',
target: 'Minecraft: Bedrock Edition',
rotate_cubes: true,
box_uv: true,
optional_box_uv: true,

1
js/io/formats/bedrock_old.js
View File

@ -490,6 +490,7 @@ var format = new ModelFormat({
id: 'bedrock_old',
extension: 'json',
icon: 'icon-format_bedrock_legacy',
category: 'minecraft',
show_on_start_screen: false,
box_uv: true,
single_texture: true,

16
js/io/formats/generic.js Normal file
View File

@ -0,0 +1,16 @@
new ModelFormat({
id: 'free',
icon: 'icon-format_free',
category: 'low_poly',
target: ['Blender', 'Unity', 'Unreal Engine', 'Sketchfab'],
meshes: true,
rotate_cubes: true,
bone_rig: true,
centered_grid: true,
optional_box_uv: true,
uv_rotation: true,
animation_mode: true,
animated_textures: true,
locators: true,
})

2
js/io/formats/java_block.js
View File

@ -454,6 +454,8 @@ var format = new ModelFormat({
id: 'java_block',
extension: 'json',
icon: 'icon-format_block',
category: 'minecraft',
target: 'Minecraft: Java Edition',
render_sides() {
if (Modes.display && ['thirdperson_righthand', 'thirdperson_lefthand', 'head'].includes(display_slot)) {
return 'double';

2
js/io/formats/modded_entity.js
View File

@ -876,6 +876,8 @@ Object.defineProperty(codec, 'remember', {
var format = new ModelFormat({
id: 'modded_entity',
icon: 'icon-format_java',
category: 'minecraft',
target: 'Minecraft: Java Edition',
codec,
box_uv: true,
single_texture: true,

2
js/io/formats/optifine_jem.js
View File

@ -301,6 +301,8 @@ var format = new ModelFormat({
id: 'optifine_entity',
extension: 'jem',
icon: 'icon-format_optifine',
category: 'minecraft',
target: 'Minecraft: Java Edition with OptiFine',
model_identifier: false,
box_uv: true,
optional_box_uv: true,

1
js/io/formats/optifine_jpm.js
View File

@ -218,6 +218,7 @@ var part_format = new ModelFormat({
id: 'optifine_part',
extension: 'jpm',
icon: 'icon-format_optifine',
category: 'minecraft',
show_on_start_screen: false,
model_identifier: false,
single_texture: true,

5
js/io/formats/skin.js
View File

@ -153,9 +153,10 @@ const codec = new Codec('skin_model', {
codec.export = null;
const format = new ModelFormat({
id: 'skin',
const format = new ModelFormat('skin', {
icon: 'icon-player',
category: 'minecraft',
target: ['Minecraft: Java Edition', 'Minecraft: Bedrock Edition'],
can_convert_to: false,
model_identifier: false,
bone_rig: true,

2
js/webpack/bundle.js
View File

File diff suppressed because one or more lines are too long

8
lang/en.json
View File

@ -85,6 +85,9 @@
"mode.start.new": "New",
"mode.start.recent": "Recent",
"mode.start.no_recents": "No recently opened models",
"mode.start.info": "Info",
"mode.start.target": "Target",
"mode.start.start": "Start",
"mode.start.quick_setup": "Quick Setup",
"mode.start.keymap_preference.desc": "If you are new to Blockbench and you are coming from another 3D program, you can select a keymap to make your transition easier. You can change the keymap or individual keybindings later in the settings.",
"mode.start.keymap": "Keymap",
@ -110,6 +113,11 @@
"format.optifine_part": "OptiFine Part",
"format.optifine_part.desc": "JPM part for OptiFine entity models",
"format_category.low_poly": "Low-Poly",
"format_category.minecraft": "Minecraft",
"format_category.other": "Other",
"format_category.loaders": "Loaders",
"keys.mouse": "Mouse Button %0",
"keys.ctrl": "Ctrl",
"keys.shift": "Shift",