blockbench/js/modes.js
2020-12-22 13:32:49 +01:00

289 lines
8.5 KiB
JavaScript

class Mode extends KeybindItem {
constructor(id, data) {
if (typeof id == 'object') {
data = id;
id = data.id;
}
super(data)
this.id = id;
this.name = data.name || tl('mode.'+this.id);
this.selected = false
this.default_tool = data.default_tool;
this.selectCubes = data.selectCubes !== false
this.center_windows = data.center_windows||[];
this.hide_toolbars = data.hide_toolbars
this.hide_sidebars = data.hide_sidebars
this.condition = data.condition;
this.onSelect = data.onSelect;
this.onUnselect = data.onUnselect;
Modes.options[this.id] = this;
if (data.component) {
let node = document.createElement('div');
let mount = document.createElement('div');
node.id = 'mode_screen_' + this.id;
node.classList.add('center_window');
node.appendChild(mount);
document.getElementById('center').appendChild(node);
this.vue = new Vue(data.component)
this.vue.$mount(mount);
this.center_windows.safePush(node.id);
} else {
this.center_windows.safePush('preview');
}
}
select() {
if (Modes.selected) {
delete Modes[Modes.selected.id];
Modes.previous_id = Modes.selected.id;
}
if (typeof Modes.selected.onUnselect === 'function') {
Blockbench.dispatchEvent('unselect_mode', {mode: Modes.selected})
Modes.selected.onUnselect()
}
if (Modes.selected.selected) {
Modes.selected.selected = false
}
this.selected = true;
Mode.selected = this;
Modes.selected = this;
Modes[Modes.selected.id] = true;
document.body.setAttribute('mode', this.id);
$('#center > .center_window').each((i, obj) => {
$(obj).toggle(this.center_windows.includes(obj.id));
})
if (this.hide_toolbars) {
$('#main_toolbar .toolbar_wrapper').css('visibility', 'hidden')
} else {
$('#main_toolbar .toolbar_wrapper').css('visibility', 'visible')
}
if (typeof this.onSelect === 'function') {
this.onSelect()
}
if (Blockbench.isMobile) {
Interface.PanelSelectorVue.$forceUpdate();
Interface.PanelSelectorVue.select(null);
}
updateInterface()
Canvas.updateRenderSides()
if (BarItems[this.default_tool]) {
BarItems[this.default_tool].select()
} else {
BarItems.move_tool.select()
}
TickUpdates.selection = true;
Blockbench.dispatchEvent('select_mode', {mode: this})
}
trigger() {
if (Condition(this.condition)) {
this.select()
}
}
delete() {
if (Mode.selected == this) {
Modes.options.start.select();
}
delete Modes.options[this.id];
}
}
const Modes = {
get id() {
return Mode.selected ? Mode.selected.id : 'edit'
},
selected: false,
options: {},
};
onVueSetup(function() {
Modes.vue = new Vue({
el: '#mode_selector',
data: {
options: Modes.options
}
})
});
BARS.defineActions(function() {
StateMemory.init('start_screen_list_type', 'string')
StartScreen = new Mode('start', {
category: 'navigate',
hide_toolbars: true,
hide_sidebars: true,
component: {
data: {
formats: Formats,
recent: isApp ? recent_projects : [],
list_type: StateMemory.start_screen_list_type || 'list',
redact_names: settings.streamer_mode.value,
isApp
},
methods: {
getDate(p) {
if (p.day) {
var diff = (365e10 + Blockbench.openTime.dayOfYear() - p.day) % 365;
if (diff <= 0) {
return tl('dates.today');
} else if (diff == 1) {
return tl('dates.yesterday');
} else if (diff <= 7) {
return tl('dates.this_week');
} else {
return tl('dates.weeks_ago', [Math.ceil(diff/7)]);
}
} else {
return '-'
}
},
openProject: function(p, event) {
Blockbench.read([p.path], {}, files => {
loadModelFile(files[0]);
})
},
getThumbnail(model_path) {
let hash = model_path.hashCode().toString().replace(/^-/, '0');
let path = PathModule.join(app.getPath('userData'), 'thumbnails', `${hash}.png`);
if (!fs.existsSync(path)) return 'none'
path = `url('${path.replace(/\\/g, '/')}?${Math.round(Math.random()*255)}')`;
return path;
},
setListType(type) {
this.list_type = type;
StateMemory.start_screen_list_type = type;
StateMemory.save('start_screen_list_type')
}
},
template: `
<div id="start_screen">
<content>
<section id="start-files">
<left>
<h2 class="tl">mode.start.new</h2>
<div class="bar next_to_title" id="uv_title_bar">
<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" v-on:click="format.new()">
<span class="icon_wrapper f_left" v-html="Blockbench.getIconNode(format.icon).outerHTML"></span>
<h3>{{ format.name }}</h3>
<p>{{ format.description }}</p>
</li>
</ul>
</left>
<right>
<h2 class="tl">mode.start.recent</h2>
<div id="start_screen_list_type" v-if="isApp && !redact_names">
<li class="tool" v-bind:class="{selected: list_type == 'list'}" v-on:click="setListType('list')">
<i class="material-icons">list</i>
</li>
<li class="tool" v-bind:class="{selected: list_type == 'grid'}" v-on:click="setListType('grid')">
<i class="material-icons">view_module</i>
</li>
</div>
<div v-if="redact_names">{{ '['+tl('generic.redacted')+']' }}</div>
<ul v-else-if="list_type == 'list'">
<li v-on:click="openProject(project, $event)" v-for="project in recent" v-key="project.path" v-bind:title="redact_names ? '' : project.path" class="recent_project">
<span class="icon_wrapper" v-html="Blockbench.getIconNode(project.icon).outerHTML"></span>
<span class="recent_project_name">{{ redact_names ? '[${tl('generic.redacted')}]' : project.name }}</span>
<span class="recent_project_date">{{ getDate(project) }}</span>
</li>
<div v-if="recent.length == 0">{{ tl('mode.start.no_recents') }}</div>
</ul>
<ul :class="{redact: redact_names}" v-else>
<li v-on:click="openProject(project, $event)" v-for="project in recent" v-key="project.path" v-bind:title="redact_names ? '' : project.path" class="recent_project thumbnail">
<div class="thumbnail_image" :style="{'background-image': getThumbnail(project.path)}"></div>
<span class="recent_project_name">{{ redact_names ? '[${tl('generic.redacted')}]' : project.name }}</span>
<span class="icon_wrapper" v-html="Blockbench.getIconNode(project.icon).outerHTML"></span>
</li>
<div v-if="recent.length == 0">{{ tl('mode.start.no_recents') }}</div>
</ul>
<button class="tl" style="margin-top: 20px;" onclick="BarItems.open_model.trigger()">action.open_model</button>
</right>
</section>
</content>
</div>
`
},
onSelect: function () {
if (Format && isApp) updateRecentProjectThumbnail()
},
onUnselect: function () {
}
})
new Mode('edit', {
default_tool: 'move_tool',
category: 'navigate',
condition: () => Format,
keybind: new Keybind({key: 49})
})
new Mode('paint', {
default_tool: 'brush_tool',
category: 'navigate',
condition: () => Format,
keybind: new Keybind({key: 50}),
onSelect: () => {
if (Modes.previous_id == 'animate') {
Animator.preview();
}
Cube.all.forEach(cube => {
Canvas.buildGridBox(cube)
})
$('#main_colorpicker').spectrum('set', ColorPanel.vue._data.main_color);
BarItems.slider_color_h.update();
BarItems.slider_color_s.update();
BarItems.slider_color_v.update();
$('.UVEditor').find('#uv_size').hide()
three_grid.visible = false;
},
onUnselect: () => {
Cube.all.forEach(cube => {
Canvas.buildGridBox(cube)
})
$('.UVEditor').find('#uv_size').show();
three_grid.visible = true;
},
})
new Mode('display', {
selectCubes: false,
default_tool: 'move_tool',
category: 'navigate',
keybind: new Keybind({key: 51}),
condition: () => Format.display_mode,
onSelect: () => {
enterDisplaySettings()
},
onUnselect: () => {
exitDisplaySettings()
},
})
new Mode('animate', {
default_tool: 'move_tool',
category: 'navigate',
center_windows: ['preview', 'timeline'],
keybind: new Keybind({key: 52}),
condition: () => Format.animation_mode,
onSelect: () => {
Animator.join()
},
onUnselect: () => {
Animator.leave()
}
})
//Update to 3.2.0
if (Modes.options.animate.keybind.key == 51) {
Modes.options.animate.keybind.set({key: 52})
}
})