blockbench/index.html

605 lines
26 KiB
HTML
Raw Normal View History

2017-10-31 21:49:01 +08:00
<!DOCTYPE html>
2019-12-16 03:04:31 +08:00
<html lang="en">
2017-10-31 21:49:01 +08:00
<head>
2019-01-09 22:54:35 +08:00
<title>Blockbench</title>
2020-04-26 02:25:07 +08:00
<meta charset="utf-8" />
2019-01-09 22:54:35 +08:00
<meta name="viewport" content="width=device-width, initial-scale=1">
2019-07-18 00:02:07 +08:00
<meta name="theme-color" content="#181a1f">
2019-04-13 00:44:18 +08:00
<meta name="robots" content="noindex">
2021-02-10 06:56:40 +08:00
<link rel="manifest" href="manifest.webmanifest">
2019-01-09 22:54:35 +08:00
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
2020-12-25 19:38:45 +08:00
<link rel="apple-touch-icon" href="icon_full.png">
2019-01-09 22:54:35 +08:00
<link rel="stylesheet" href="css/w3.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
2019-07-18 00:02:07 +08:00
<link rel="stylesheet" href="css/fontawesome.css">
2019-01-09 22:54:35 +08:00
<link rel="stylesheet" href="css/spectrum.css">
2019-12-16 03:04:31 +08:00
<link rel="stylesheet" href="css/prism.css">
2019-07-18 00:02:07 +08:00
<link rel="stylesheet" href="css/setup.css">
<link rel="stylesheet" href="css/general.css">
2020-04-26 02:25:07 +08:00
<link rel="stylesheet" href="css/window.css">
2019-07-18 00:02:07 +08:00
<link rel="stylesheet" href="css/panels.css">
<link rel="stylesheet" href="css/dialogs.css">
2019-12-16 03:04:31 +08:00
<style type="text/css" id="theme_css"></style>
2017-10-31 21:49:01 +08:00
</head>
<body spellcheck="false">
2019-01-09 22:54:35 +08:00
<script>
if (typeof module === 'object') {window.module = module; module = undefined;}//jQuery Fix
const isApp = typeof require !== 'undefined';
const appVersion = '4.0.0-beta.0';
window.onerror = (message, file, line) => {
if (typeof Blockbench != 'undefined' && Blockbench.setup_successful) return;
let error_element = document.querySelector('#loading_error_detail');
if (error_element && !error_element.innerText) {
error_element.innerText = `${message}\nIn .${file.split(location.origin).join('')}:${line}`
}
}
2019-01-09 22:54:35 +08:00
</script>
2020-03-05 03:56:17 +08:00
<div id="loading_error_message" style="display: none;">
<div>An error occurred while loading Blockbench</div>
<div id="loading_error_detail" style="color: var(--color-subtle_text);"></div>
2020-03-05 03:56:17 +08:00
<button onclick="isApp ? Blockbench.reload() : window.location.reload(true)" class="large" style="margin-right: auto; margin-left: auto;">Reload</button>
<button onclick="window.close()" class="large" style="margin-right: auto; margin-left: auto;">Quit</button>
</div>
2019-01-09 22:54:35 +08:00
<script src="lib/vue.min.js"></script>
<script src="lib/vue_sortable.js"></script>
<script src="lib/jquery.js"></script>
<script src="lib/jquery-ui.min.js"></script>
<script src="lib/targa.js"></script>
<script src="lib/jimp.min.js"></script>
2019-03-10 05:06:35 +08:00
<script src="lib/jszip.min.js"></script>
2019-01-09 22:54:35 +08:00
<script src="lib/gif.js"></script>
2021-04-11 21:58:24 +08:00
<script src="lib/FileSaver.js"></script>
2019-12-16 03:04:31 +08:00
<script src="lib/prism.js"></script>
<script src="lib/VuePrismEditor.min.js"></script>
<script src="lib/molang-prism-syntax.js"></script>
2019-07-18 00:02:07 +08:00
<script src="lib/lzutf8.js"></script>
2019-04-08 00:53:33 +08:00
<script src="lib/peer.min.js"></script>
2019-07-18 00:02:07 +08:00
<script src="lib/marked.min.js"></script>
2019-01-09 22:54:35 +08:00
<script src="lib/spectrum.js"></script>
2020-03-05 03:56:17 +08:00
<script src="lib/three.min.js"></script>
2019-01-09 22:54:35 +08:00
<script src="lib/three_custom.js"></script>
2020-03-05 03:56:17 +08:00
<script src="lib/GLTFExporter.js"></script>
2020-07-16 15:32:59 +08:00
<script src="lib/CanvasFrame.js"></script>
2020-08-30 21:00:41 +08:00
<script src="lib/fik.min.js"></script>
2020-10-05 05:26:30 +08:00
<script src="lib/molang.umd.js"></script>
2020-10-09 20:14:29 +08:00
<script src="lib/wintersky.umd.js"></script>
2019-01-09 22:54:35 +08:00
2021-02-10 05:26:52 +08:00
<script src="js/webpack/bundle.js"></script>
2021-01-30 23:00:58 +08:00
<script src="js/preview/OrbitControls.js"></script>
2019-01-09 22:54:35 +08:00
<script src="js/util.js"></script>
2020-07-16 15:32:59 +08:00
<script src="js/property.js"></script>
2019-07-18 00:02:07 +08:00
<script src="js/interface/menu.js"></script>
<script src="js/interface/actions.js"></script>
2019-12-16 03:04:31 +08:00
<script src="js/interface/themes.js"></script>
2019-01-09 22:54:35 +08:00
<script src="js/blockbench.js"></script>
2020-03-11 05:19:17 +08:00
<script src="js/modes.js"></script>
<script src="js/api.js"></script>
<script src="js/file_system.js"></script>
<script src="js/interface/panels.js"></script>
<script src="js/interface/interface.js"></script>
2019-07-18 00:02:07 +08:00
<script src="js/interface/keyboard.js"></script>
<script src="js/interface/settings.js"></script>
<script src="js/interface/dialog.js"></script>
2019-12-16 03:04:31 +08:00
<script src="js/copy_paste.js"></script>
2019-01-09 22:54:35 +08:00
<script src="js/undo.js"></script>
<script type="text/javascript">
if (isApp === true) {
2019-07-18 00:02:07 +08:00
document.write("<script src='js/desktop.js'><\/script>");
2019-01-09 22:54:35 +08:00
} else {
document.write("<script src='js/web.js'><\/script>");
}
</script>
2020-09-22 05:23:42 +08:00
<script src="js/edit_sessions.js"></script>
2019-07-18 00:02:07 +08:00
<script src="js/outliner/outliner.js"></script>
<script src="js/outliner/group.js"></script>
<script src="js/outliner/cube.js"></script>
<script src="js/outliner/locator.js"></script>
2021-01-04 20:45:33 +08:00
<script src="js/outliner/null_object.js"></script>
2019-07-18 00:02:07 +08:00
<script src="js/preview/preview.js"></script>
<script src="js/preview/canvas.js"></script>
<script src="js/preview/transformer.js"></script>
2019-01-09 22:54:35 +08:00
<script src="js/transform.js"></script>
2019-12-16 03:04:31 +08:00
<script src="js/texturing/textures.js"></script>
<script src="js/texturing/uv.js"></script>
<script src="js/texturing/painter.js"></script>
2020-03-05 03:56:17 +08:00
<script src="js/texturing/texture_generator.js"></script>
2019-12-16 03:04:31 +08:00
<script src="js/texturing/color.js"></script>
2019-08-18 00:26:14 +08:00
<script src="js/display_mode.js"></script>
<script src="js/animations/animation.js"></script>
<script src="js/animations/keyframe.js"></script>
<script src="js/animations/timeline.js"></script>
2019-01-09 22:54:35 +08:00
<script src="js/plugin_loader.js"></script>
<script src="js/io/codec.js"></script>
<script src="js/io/format.js"></script>
<script src="js/io/project.js"></script>
<script src="js/io/io.js"></script>
2020-07-16 15:32:59 +08:00
<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>
<script src="js/io/formats/bedrock_old.js"></script>
<script src="js/io/formats/obj.js"></script>
<script src="js/io/formats/gltf.js"></script>
<script src="js/io/formats/modded_entity.js"></script>
<script src="js/io/formats/optifine_jem.js"></script>
<script src="js/io/formats/optifine_jpm.js"></script>
<script src="js/io/formats/skin.js"></script>
2019-01-09 22:54:35 +08:00
2019-07-18 00:02:07 +08:00
<script>if (window.module) module = window.module;</script>
2019-01-09 22:54:35 +08:00
2019-07-18 00:02:07 +08:00
<div style="display: none;"></div>
2019-01-09 22:54:35 +08:00
2019-03-10 05:06:35 +08:00
<div id="overlay_message_box" style="display: none;">
<div>
<h3><i class="material-icons">keyboard</i><span class="tl">keybindings.recording</span></h3>
<p class="tl">keybindings.press</p>
2019-08-18 00:26:14 +08:00
<button class="tl" onclick="Keybinds.recording.stopRecording()">dialog.cancel</button>
<button class="tl" onclick="Keybinds.recording.clear().stopRecording()">keybindings.clear</button>
2019-03-10 05:06:35 +08:00
<div id="keybind_input_box" contenteditable="true" style="font-size: 0"></div>
</div>
</div>
<dialog class="dialog draggable" id="entity_import">
2021-08-14 18:57:17 +08:00
<div class="dialog_handle">
<div class="dialog_title tl">dialog.entitylist.title</div>
</div>
<div class="dialog_content">
<div class="dialog_bar narrow tl">dialog.entitylist.text</div>
<div class="search_bar">
<input type="text" class="dark_bordered" id="pe_search_bar" oninput="pe_list._data.search_term = $(this).val().toUpperCase()">
<i class="material-icons" id="plugin_search_bar_icon">search</i>
</div>
<ul id="pe_list" class="list">
<li v-for="item in searched" v-bind:class="{ selected: item.selected }" v-on:click="selectE(item, $event)" v-on:dblclick="open(item)">
<img class="pe_icon" v-if="item.icon" v-bind:src="item.icon">
<div class="pe_icon" v-else></div>
<h4>{{ item.title }} <span>({{ item.name }})</span></h4>
<p>{{ item.bonecount+' '+tl('dialog.entitylist.bones') }}, {{ item.cubecount+' '+tl('dialog.entitylist.cubes') }}</p>
</li>
</ul>
</div>
2019-01-09 22:54:35 +08:00
2020-07-16 15:32:59 +08:00
<div class="dialog_bar button_bar">
2019-08-18 00:26:14 +08:00
<button type="button" class="tl confirm_btn" onclick="">dialog.import</button>
2020-07-16 15:32:59 +08:00
<button type="button" class="cancel_btn tl" onclick="hideDialog();BarItems.close_project.click()">dialog.cancel</button>
2019-01-09 22:54:35 +08:00
</div>
2021-05-22 05:48:39 +08:00
<div class="dialog_close_button" onclick="hideDialog();BarItems.close_project.click()"><i class="material-icons">clear</i></div>
2019-07-18 00:02:07 +08:00
</dialog>
2019-01-09 22:54:35 +08:00
<dialog class="dialog draggable" id="image_extruder">
2021-08-14 18:57:17 +08:00
<div class="dialog_handle">
<div class="dialog_title tl">dialog.extrude.title</div>
2019-01-09 22:54:35 +08:00
</div>
2021-08-14 18:57:17 +08:00
<div class="dialog_content">
<div class="dialog_bar">
<label class="tl">dialog.extrude.mode</label>
<div class="bar_select f_left">
<select id="scan_mode" name="scan_mode">
<option class="tl" id="areas" selected>dialog.extrude.mode.areas</option>
<option class="tl" id="lines">dialog.extrude.mode.lines</option>
<option class="tl" id="columns">dialog.extrude.mode.columns</option>
<option class="tl" id="pixels">dialog.extrude.mode.pixels</option>
</select>
</div>
</div>
<div class="dialog_bar">
<label class="tl">dialog.extrude.opacity</label>
<input class="tool" type="range" id="scan_tolerance" value="255" min="1" max="255">
<label id="scan_tolerance_label">255</label>
</div>
2019-01-09 22:54:35 +08:00
2021-08-14 18:57:17 +08:00
<canvas height="256" width="256" id="extrusion_canvas"></canvas>
</div>
2019-01-09 22:54:35 +08:00
2020-07-16 15:32:59 +08:00
<div class="dialog_bar button_bar">
2019-07-18 00:02:07 +08:00
<button type="button" class="confirm_btn tl" onclick="Extruder.startConversion()">Scan and Import</button>
<button type="button" class="cancel_btn tl" onclick="hideDialog()">dialog.cancel</button>
2019-01-09 22:54:35 +08:00
</div>
2021-05-22 05:48:39 +08:00
<div class="dialog_close_button" onclick="hideDialog()"><i class="material-icons">clear</i></div>
2019-07-18 00:02:07 +08:00
</dialog>
2019-01-09 22:54:35 +08:00
<dialog class="dialog draggable" id="scaling">
2021-08-14 18:57:17 +08:00
<div class="dialog_handle">
<div class="dialog_title tl">dialog.scale.title</div>
</div>
2019-01-09 22:54:35 +08:00
2021-08-14 18:57:17 +08:00
<div class="dialog_content">
<label class="tl">dialog.scale.axis</label>
2019-01-09 22:54:35 +08:00
2021-08-14 18:57:17 +08:00
<div class="dialog_bar" style="height: 32px;">
<input type="checkbox" class="toggle_panel" id="model_scale_x_axis" onchange="scaleAll()" checked>
<label class="toggle_panel" for="model_scale_x_axis">X</label>
<input type="checkbox" class="toggle_panel" id="model_scale_y_axis" onchange="scaleAll()" checked>
<label class="toggle_panel" for="model_scale_y_axis">Y</label>
<input type="checkbox" class="toggle_panel" id="model_scale_z_axis" onchange="scaleAll()" checked>
<label class="toggle_panel" for="model_scale_z_axis">Z</label>
</div>
2019-01-09 22:54:35 +08:00
2021-08-14 18:57:17 +08:00
<label class="tl">data.origin</label>
<div class="dialog_bar">
<label for="scaling_origin_x" class="inline_label tl">X</label>
<input type="number" id="scaling_origin_x" class="dark_bordered medium_width" oninput="scaleAll()">
<label for="scaling_origin_y" class="inline_label tl">Y</label>
<input type="number" id="scaling_origin_y" class="dark_bordered medium_width" oninput="scaleAll()">
<label for="scaling_origin_z" class="inline_label tl">Z</label>
<input type="number" id="scaling_origin_z" class="dark_bordered medium_width" oninput="scaleAll()">
<div class="tool" style="float: none" onclick="setScaleAllPivot('origin')">
<div class="tooltip tl">dialog.scale.element_pivot</div>
<i class="material-icons">center_focus_strong</i>
</div>
<div class="tool" style="float: none" onclick="setScaleAllPivot('selection')">
<div class="tooltip tl">dialog.scale.selection_center</div>
<i class="material-icons">filter_tilt_shift</i>
</div>
2020-03-05 03:56:17 +08:00
</div>
2021-08-14 18:57:17 +08:00
<label class="tl">dialog.scale.scale</label>
<div class="dialog_bar" style="height: 32px;">
<input type="range" id="model_scale_range" value="1" min="0" max="4" step="0.02" oninput="modelScaleSync()">
<input type="number" class="f_left dark_bordered" id="model_scale_label" min="0" max="4" step="0.02" value="1" oninput="modelScaleSync(true)">
2020-03-05 03:56:17 +08:00
</div>
2019-01-09 22:54:35 +08:00
2021-08-14 18:57:17 +08:00
<div class="dialog_bar narrow" id="scaling_clipping_warning"></div>
2019-01-09 22:54:35 +08:00
</div>
2019-04-08 00:53:33 +08:00
2020-07-16 15:32:59 +08:00
<div class="dialog_bar button_bar">
2019-04-08 00:53:33 +08:00
<button type="button" onclick="scaleAll(true)" class="confirm_btn tl">dialog.scale.confirm</button>
<button type="button" class="cancel_btn tl" onclick="cancelScaleAll()">dialog.cancel</button>
2019-04-13 00:44:18 +08:00
<button type="button" class="minor hidden tl" id="scale_overflow_btn" onclick="scaleAllSelectOverflow()">dialog.scale.select_overflow</button>
2019-01-09 22:54:35 +08:00
</div>
2021-05-22 05:48:39 +08:00
<div class="dialog_close_button" onclick="cancelScaleAll()"><i class="material-icons">clear</i></div>
2019-07-18 00:02:07 +08:00
</dialog>
2019-01-09 22:54:35 +08:00
<dialog class="dialog draggable" id="create_preset">
2021-08-14 18:57:17 +08:00
<div class="dialog_handle">
<div class="dialog_title tl">dialog.display_presets.title</div>
2019-01-09 22:54:35 +08:00
</div>
2021-08-14 18:57:17 +08:00
<div class="dialog_content">
<div class="dialog_bar tl">dialog.display_preset.message</div>
<div class="dialog_bar">
<input type="checkbox" id="thirdperson_righthand_save" checked>
<label for="thirdperson_righthand_save" class="tl">display.slot.third_right</label>
</div>
<div class="dialog_bar">
<input type="checkbox" id="thirdperson_lefthand_save" checked>
<label for="thirdperson_lefthand_save" class="tl">display.slot.third_left</label>
</div>
<div class="dialog_bar">
<input type="checkbox" id="firstperson_righthand_save" checked>
<label for="firstperson_righthand_save" class="tl">display.slot.first_right</label>
</div>
<div class="dialog_bar">
<input type="checkbox" id="firstperson_lefthand_save" checked>
<label for="firstperson_lefthand_save" class="tl">display.slot.first_left</label>
</div>
<div class="dialog_bar">
<input type="checkbox" id="head_save" checked>
<label for="head_save" class="tl">display.slot.head</label>
</div>
<div class="dialog_bar">
<input type="checkbox" id="ground_save" checked>
<label for="ground_save" class="tl">display.slot.ground</label>
</div>
<div class="dialog_bar">
<input type="checkbox" id="fixed_save" checked>
<label for="fixed_save" class="tl">display.slot.frame</label>
</div>
<div class="dialog_bar">
<input type="checkbox" id="gui_save" checked>
<label for="gui_save" class="tl">display.slot.gui</label>
</div>
<div class="dialog_bar narrow">
<label class="tl">generic.name</label>
</div>
<div class="dialog_bar">
<input type="text" id="preset_name" class="input_wide" id="new preset">
</div>
2019-01-09 22:54:35 +08:00
</div>
2020-07-16 15:32:59 +08:00
<div class="dialog_bar button_bar">
2019-08-18 00:26:14 +08:00
<button type="button" class="tl confirm_btn" onclick="DisplayMode.createPreset()">dialog.display_preset.create</button>
<button type="button" class="tl cancel_btn" onclick="hideDialog()">dialog.cancel</button>
2019-01-09 22:54:35 +08:00
</div>
2021-05-22 05:48:39 +08:00
<div class="dialog_close_button" onclick="hideDialog()"><i class="material-icons">clear</i></div>
2019-07-18 00:02:07 +08:00
</dialog>
2019-01-09 22:54:35 +08:00
2019-07-18 00:02:07 +08:00
<dialog class="dialog draggable" id="uv_dialog">
<div class="dialog_handle tl">uv_editor.title</div>
2019-08-18 00:26:14 +08:00
<div class="dialog_bar borderless tab_bar" id="uv_tab_bar">
2019-01-09 22:54:35 +08:00
<div onclick="uv_dialog.openTab('all')" id="all" class="tab open tl">uv_editor.all_faces</div>
<div onclick="uv_dialog.openTab('north')" id="north" class="tab tl">face.north</div>
<div onclick="uv_dialog.openTab('south')" id="south" class="tab tl">face.south</div>
<div onclick="uv_dialog.openTab('west')" id="west" class="tab tl">face.west</div>
<div onclick="uv_dialog.openTab('east')" id="east" class="tab tl">face.east</div>
<div onclick="uv_dialog.openTab('up')" id="up" class="tab tl">face.up</div>
<div onclick="uv_dialog.openTab('down')" id="down" class="tab tl">face.down</div>
</div>
<div id="uv_dialog_all" class="uv_dialog_content uv_dialog_all_only">
</div>
2019-07-18 00:02:07 +08:00
2019-01-09 22:54:35 +08:00
<div id="uv_dialog_single" class="uv_dialog_content">
</div>
2019-07-18 00:02:07 +08:00
<div class="bar" id="uv_dialog_toolbar">
2019-01-09 22:54:35 +08:00
<div class="toolbar_wrapper uv_dialog"></div>
</div>
2019-07-18 00:02:07 +08:00
2020-07-16 15:32:59 +08:00
<div class="dialog_bar button_bar">
<button type="button" onclick="hideDialog()" class="confirm_btn cancel_btn hidden">dialog.close</button>
</div>
2019-01-09 22:54:35 +08:00
2021-05-22 05:48:39 +08:00
<div class="dialog_close_button" onclick="hideDialog()"><i class="material-icons">clear</i></div>
2019-07-18 00:02:07 +08:00
</dialog>
2019-01-09 22:54:35 +08:00
<dialog class="dialog draggable" id="text_input">
2021-08-14 18:57:17 +08:00
<div class="dialog_handle">
<div class="dialog_title tl">dialog.input.title</div>
</div>
2019-01-09 22:54:35 +08:00
2021-08-14 18:57:17 +08:00
<div class="dialog_content">
2019-01-09 22:54:35 +08:00
<input type="text" id="text_input_field" class="dark_bordered input_wide">
</div>
2020-07-16 15:32:59 +08:00
<div class="dialog_bar button_bar">
2019-08-18 00:26:14 +08:00
<button type="button" class="confirm_btn tl" onclick="hideDialog()">dialog.confirm</button>
<button type="button" class="cancel_btn tl" onclick="hideDialog()">dialog.cancel</button>
2019-01-09 22:54:35 +08:00
</div>
2021-05-22 05:48:39 +08:00
<div class="dialog_close_button" onclick="hideDialog()"><i class="material-icons">clear</i></div>
2019-07-18 00:02:07 +08:00
</dialog>
2019-01-09 22:54:35 +08:00
2021-02-20 20:21:11 +08:00
<div id="dialog_wrapper"></div>
2019-01-09 22:54:35 +08:00
<header>
2019-07-18 00:02:07 +08:00
<ul id="mac_window_menu" hidden></ul>
2021-05-25 03:39:15 +08:00
<div id="corner_logo" class="app-drag-region">
<img src="assets/logo_text_white.svg" />
2019-01-09 22:54:35 +08:00
</div>
2019-07-18 00:02:07 +08:00
<ul id="menu_bar" class="scroll_horizontal"></ul>
<div class="app-drag-region" id="header_free_bar"></div>
<div id="update_menu"></div>
2019-07-18 00:02:07 +08:00
<ul id="windows_window_menu" hidden>
2019-12-16 03:04:31 +08:00
<li onclick="currentwindow.minimize()"><i class="material-icons" style="margin-top: 4px;">remove</i></li>
<li onclick="currentwindow.isMaximized() ? currentwindow.unmaximize() : currentwindow.maximize()"><i class="material-icons">crop_square</i><!--🗖--></li>
<li class="wwm_r" onclick="currentwindow.close()"><i class="material-icons">clear</i></li>
2019-07-18 00:02:07 +08:00
</ul>
<button id="web_download_button" hidden><a class="tl" href="https://blockbench.net/downloads">web.download_app</a></button>
</header>
2021-05-05 19:54:41 +08:00
2021-07-07 19:08:56 +08:00
<div id="page_wrapper" class="invisible start_screen">
2021-07-07 19:08:56 +08:00
<div id="blackout"></div>
2019-07-18 00:02:07 +08:00
<div id="tab_bar" :class="{drag_mode: drag_target_index !== null}">
<div
class="project_tab"
v-for="(project, index) in tabs" :key="project.uuid"
:class="{
selected: project.selected,
new_tab: project.is_new_tab,
dragging: index == drag_target_index,
move_back: (drag_position_index !== null && index > drag_target_index && drag_position_index >= index),
move_forth: (drag_position_index !== null && index < drag_target_index && drag_position_index <= index)
}"
:title="project.name || project.geometry_name"
@dblclick="project.openSettings()"
@mousedown="mouseDown(project, $event)"
@mouseup="mouseUp(project, $event)"
>
<label class="project_tab_session_badge" v-if="project.EditSession"><i class="material-icons">group</i>{{ project.EditSession.client_count }}</label>
<label>{{ project.name || project.geometry_name || project.format.name }}</label>
<div class="project_tab_close_button" :class="{unsaved: !project.saved}" :title="close_tab_label" @click="project.close()">
<i class="material-icons">{{ project.saved ? 'clear' : 'fiber_manual_record' }}</i>
</div>
</div>
<div id="new_tab_button" @click="openNewTab()" :title="new_tab.name">
<i class="material-icons">add</i>
</div>
</div>
<dialog id="action_selector"></dialog>
2021-07-07 19:08:56 +08:00
<div id="start_screen">
<content>
<section id="start-files">
<left>
<h2 class="tl">mode.start.new</h2>
2021-07-20 18:07:47 +08:00
<div class="bar next_to_title">
2021-07-07 19:08:56 +08:00
<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 ? 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 ? 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>
<div id="work_screen" hidden>
<div id="main_toolbar">
<div class="toolbar_wrapper narrow tools"></div>
<div class="toolbar_wrapper narrow tool_options"></div>
<ul id="mode_selector">
<li
v-for="mode in options"
v-if="Condition(mode.condition)"
v-bind:class="{selected: mode.selected}"
v-on:click="mode.select()"
>{{ mode.name }}</li>
</ul>
<div class="toolbar_wrapper narrow mobile_side"></div>
</div>
<div id="left_bar" class="sidebar">
2020-07-16 15:32:59 +08:00
2021-07-07 19:08:56 +08:00
<div id="uv" class="panel selection_only">
<div class="panel_inside">
<div class="bar next_to_title" id="uv_title_bar">
<div id="project_resolution_status" onclick="BarItems.project_window.trigger()"></div>
</div>
<div id="uv_panel_sides" onclick="main_uv.loadSelectedFace()" class="bar tabs_small">
2019-01-09 22:54:35 +08:00
2021-07-07 19:08:56 +08:00
<input type="radio" name="side" id="north_radio" checked>
<label class="tl" for="north_radio">face.north</label>
2019-01-09 22:54:35 +08:00
2021-07-07 19:08:56 +08:00
<input type="radio" name="side" id="south_radio">
<label class="tl" for="south_radio">face.south</label>
<input type="radio" name="side" id="west_radio">
<label class="tl" for="west_radio">face.west</label>
2019-01-09 22:54:35 +08:00
2021-07-07 19:08:56 +08:00
<input type="radio" name="side" id="east_radio">
<label class="tl" for="east_radio">face.east</label>
2019-01-09 22:54:35 +08:00
2021-07-07 19:08:56 +08:00
<input type="radio" name="side" id="up_radio">
<label class="tl" for="up_radio">face.up</label>
2019-01-09 22:54:35 +08:00
2021-07-07 19:08:56 +08:00
<input type="radio" name="side" id="down_radio">
<label class="tl" for="down_radio">face.down</label>
</div>
</div>
2021-01-13 07:18:36 +08:00
</div>
2020-07-16 15:32:59 +08:00
2021-01-13 07:18:36 +08:00
</div>
2021-07-07 19:08:56 +08:00
<div id="right_bar" class="sidebar">
<div id="element" class="panel selection_only">
<div class="panel_inside">
<p class="tl">panel.element.position</p>
<div class="toolbar_wrapper element_position"></div>
<p class="tl">panel.element.size</p>
<div class="toolbar_wrapper element_size"></div>
<p class="tl">panel.element.origin</p>
<div class="toolbar_wrapper element_origin"></div>
<p class="tl">panel.element.rotation</p>
<div class="toolbar_wrapper element_rotation"></div>
2019-12-16 03:04:31 +08:00
</div>
</div>
2021-07-07 19:08:56 +08:00
<div id="color" class="panel">
<div id="color_panel_wrapper" class="panel_inside">
<div id="color_panel_head">
<div class="main" v-bind:style="{'background-color': hover_color || main_color}"></div>
<div class="side">
<input type="text" v-model="color_code" @focusout="validateMainColor()">
<div id="color_history">
<li
v-for="(color, i) in history" v-if="i || color != main_color"
:key="color"
v-bind:style="{'background-color': color}"
v-bind:title="color" @click="setColor(color)"
></li>
</div>
</div>
</div>
<div id="uv_panel_sides" class="bar tabs_small">
2019-12-16 03:04:31 +08:00
2021-07-07 19:08:56 +08:00
<input type="radio" name="tab" id="radio_color_picker" value="picker" v-model="open_tab">
<label class="tl" for="radio_color_picker">panel.color.picker</label>
2019-12-16 03:04:31 +08:00
2021-07-07 19:08:56 +08:00
<input type="radio" name="tab" id="radio_color_palette" value="palette" v-model="open_tab">
<label class="tl" for="radio_color_palette">panel.color.palette</label>
2019-12-16 03:04:31 +08:00
2021-07-07 19:08:56 +08:00
<input type="radio" name="tab" id="radio_color_both" value="both" v-model="open_tab">
<label class="tl" for="radio_color_both">panel.color.both</label>
2020-03-05 03:56:17 +08:00
2021-07-07 19:08:56 +08:00
</div>
<div v-show="open_tab == 'picker' || open_tab == 'both'">
<input id="main_colorpicker">
<div class="toolbar_wrapper color_picker"></div>
</div>
<div v-show="open_tab == 'palette' || open_tab == 'both'">
<div class="toolbar_wrapper palette"></div>
<ul id="palette_list" class="list" v-sortable="{onUpdate: sort, onEnd: drop, fallbackTolerance: 10}" @contextmenu="ColorPanel.menu.open($event)">
<li
class="color" v-for="color in palette"
:title="color" :key="color"
:class="{selected: color == main_color, contrast: isDarkColor(color)}"
@click="setColor(color)"
@mouseenter="hover_color = color"
@mouseleave="hover_color = ''"
>
<div class="color_inner" v-bind:style="{'background-color': color}"></div>
</li>
</ul>
</div>
</div>
2019-12-16 03:04:31 +08:00
</div>
2021-07-07 19:08:56 +08:00
</div>
<div id="center">
<ul id="toast_notification_list">
</ul>
<div id="preview" class="center_window">
2019-12-16 03:04:31 +08:00
</div>
2021-07-07 19:08:56 +08:00
<div id="timeline" class="center_window">
<div class="toolbar_wrapper timeline"></div>
<div id="timeline_vue"></div>
2019-12-16 03:04:31 +08:00
</div>
2019-07-19 23:31:22 +08:00
2021-07-07 19:08:56 +08:00
<div id="mobile_panel_overlay" hidden></div>
</div>
<div id="status_bar"></div>
2020-12-22 20:32:49 +08:00
2021-07-07 19:08:56 +08:00
<div id="panel_selector_bar"></div>
2021-07-07 19:08:56 +08:00
</div>
2019-07-18 00:02:07 +08:00
</div>
2019-12-16 03:04:31 +08:00
<script src="js/boot_loader.js"></script>
2019-01-09 22:54:35 +08:00
<script>
if (!Blockbench || !Blockbench.setup_successful) {
document.getElementById('loading_error_message').style.display = 'block'
2020-10-26 22:27:07 +08:00
if (window.require) {
2019-01-09 22:54:35 +08:00
require('electron').remote.getCurrentWindow().webContents.openDevTools()
}
2019-07-18 00:02:07 +08:00
} else {
document.getElementById('loading_error_message').innerHTML = 'No loading errors...'
2019-01-09 22:54:35 +08:00
}
</script>
2017-10-31 21:49:01 +08:00
</body>
</html>