Merge branch 'master' into gh-pages

Author: JannisX11

css/dialogs.css

@@ -1453,7 +1453,11 @@
 	.plugin_compatibility_issue {
 		color: var(--color-error);
 	}
-	.plugin_compatibility_issue > .icon {
+	.plugin_deprecation_note {
+		color: var(--color-warning);
+	}
+	.plugin_compatibility_issue > .icon,
+	.plugin_deprecation_note > .icon {
 		vertical-align: text-bottom;
 	}
 	#plugin_list > li button {
@@ -1941,6 +1945,7 @@
 		width: 340px;
 		margin-left: 45px;
 		box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+		border-radius: 5px;
 	}
 	#action_selector ul {
 		background-color: var(--color-bright_ui);
@@ -1950,6 +1955,7 @@
 		max-height: 400px;
 		overflow-y: auto;
 		overflow-x: hidden;
+		border-radius: 5px;
 	}
 	#action_selector > #action_selector_list > div {
 		background-color: var(--color-ui);

css/general.css

@@ -417,8 +417,13 @@
 	.toolbar_wrapper.narrow > .toolbar {
 		width: fit-content;
 		display: flex;
+		flex-direction: row-reverse;
+		justify-content: space-between;
 		height: 100%;
 	}
+	body.is_mobile .toolbar_wrapper.narrow > .toolbar:not(.vertical) {
+		width: 100%;
+	}
 	.toolbar_wrapper > .toolbar.no_wrap {
 		width: fit-content;
 		display: flex;

css/panels.css

@@ -98,6 +98,9 @@
 		height: calc(100% - 3px);
 		margin-top: 3px;
 	}
+	body.is_mobile .panel_tab_list {
+		flex-grow: 1;
+	}
 	.panel_tab_list > .panel_handle {
 		display: flex;
 		flex: 1 1 auto;
@@ -3126,7 +3129,6 @@ span.controller_state_section_info {
 	#palette_list {
 		padding: 2px;
 		min-height: 160px;
-		max-height: 232px;
 		line-height: 0;
 	}
 	#palette_list .color {

css/setup.css

@@ -1,4 +1,4 @@
-@layer reset, lib, base, theme, theme-override;
+@layer reset, lib, base, plugin, theme, theme-override;
 @layer reset {
 	* {
 		margin: 0;

js/animations/animation.js

@@ -2,6 +2,7 @@ import { Blockbench } from "../api";
 import { Filesystem } from "../file_system";
 import { openMolangEditor } from "./molang_editor";
 import { clipboard, currentwindow, dialog, fs, ipcRenderer } from "../native_apis";
+import { invertMolang } from "../util/molang";
 
 export class AnimationItem {
 	constructor() {}
@@ -215,6 +216,8 @@ export class Animation extends AnimationItem {
 								let value = [0, 1, 2].map(axis => {
 									return kf.getBezierLerp(kf, next_keyframe, getAxisLetter(axis), lerp);
 								})
+								if (channel == 'position' || channel == 'rotation') value[0] = -value[0];
+								if (channel == 'rotation') value[1] = -value[1];
 								interpolated_values[itimecode] = value;
 							}
 							// Optimize data
@@ -268,6 +271,8 @@ export class Animation extends AnimationItem {
 				if (!timecode.includes('.')) {
 					timecode += '.0';
 				}
+				rotation.array[0] = invertMolang(rotation.array[0]);
+				rotation.array[1] = invertMolang(rotation.array[1]);
 				bone_tag.rotation[timecode] = rotation.array;
 			})
 		}

js/animations/animation_mode.js

@@ -404,6 +404,10 @@ export const Animator = {
 
 		Animator.updateOnionSkin();
 
+		Billboard.all.forEach(billboard => {
+			Billboard.preview_controller.updateFacingCamera(billboard);
+		})
+
 		if (Interface.Panels.variable_placeholders.inside_vue.text.match(/^\s*preview\.texture\s*=/mi)) {
 			let tex_index = Animator.MolangParser.variableHandler('preview.texture');
 			let texture = Texture.all[tex_index % Texture.all.length];

js/animations/keyframe.js

@@ -330,7 +330,7 @@ export class Keyframe {
 				let previous = this.getPreviousKeyframe();
 				if (previous && previous.interpolation == 'step') {
 					return new oneLiner({
-						pre:  previous.getArray(1),
+						pre:  flipArray(previous.getArray(1)),
 						post: flipArray(this.getArray()),
 					})
 				} else {

js/animations/timeline.js

@@ -296,7 +296,8 @@ export const Timeline = {
 		return 1/Math.clamp(Animation.selected ? Animation.selected.snapping : settings.animation_snap.value, 1, 120);
 	},
 	setup() {
-		document.getElementById('timeline_body').addEventListener('mousedown', e => {
+		let timeline_body = Panels.timeline.node.querySelector('#timeline_body');
+		timeline_body.addEventListener('mousedown', e => {
 			if (e.which === 2 || (Keybinds.extra.preview_drag.keybind.isTriggered(e) && e.which !== 1)) {
 				let pos = [e.clientX, e.clientY];
 				let timeline = e.currentTarget;
@@ -322,7 +323,8 @@ export const Timeline = {
 			}
 		})
 
-		$('#timeline_time').on('mousedown touchstart', e => {
+		let timeline_time = Panels.timeline.node.querySelector('#timeline_time');
+		addEventListeners(timeline_time, 'mousedown touchstart', e => {
 			if (e.which !== 1 && !event.changedTouches) return;
 			if (e.target.classList.contains('timeline_marker')) return;
 
@@ -377,7 +379,7 @@ export const Timeline = {
 				}
 			}
 		})
-		$(document).on('mousemove touchmove', e => {
+		addEventListeners(document, 'mousemove touchmove', e => {
 			if (Timeline.dragging_playhead) {
 
 				convertTouchEvent(e);
@@ -419,8 +421,8 @@ export const Timeline = {
 					Blockbench.setCursorTooltip(Math.roundTo(time, 2));
 				}
 			}
-		})
-		.on('mouseup touchend', e => {
+		});
+		addEventListeners(document, 'mouseup touchend', e => {
 			if (Timeline.dragging_playhead) {
 				delete Timeline.dragging_playhead;
 				Interface.removeSuggestedModifierKey('ctrl', 'modifier_actions.drag_without_snapping');
@@ -434,10 +436,11 @@ export const Timeline = {
 				delete Timeline.dragging_onion_skin_point
 			}
 			Blockbench.setCursorTooltip();
-		})
+		});
 
 		//Enter Time
-		$('#timeline_timestamp').click(e => {
+		let timestamp = Panels.timeline.node.querySelector('#timeline_timestamp');
+		addEventListeners(timestamp, 'click', e => {
 			if ($('#timeline_timestamp').attr('contenteditable') == 'true') return;
 
 			$('#timeline_timestamp').attr('contenteditable', true).focus().select()
@@ -464,13 +467,13 @@ export const Timeline = {
 			selection.removeAllRanges();
 			selection.addRange(range);
 		})
-		.on('focusout keydown', e => {
+		addEventListeners(timestamp, 'focusout keydown', e => {
 			if (e.type === 'focusout' || Keybinds.extra.confirm.keybind.isTriggered(e) || Keybinds.extra.cancel.keybind.isTriggered(e)) {
 				$('#timeline_timestamp').attr('contenteditable', false)
 				Timeline.setTimecode(Timeline.time)
 			}
 		})
-		.on('keyup', e => {
+		addEventListeners(timestamp, 'keyup', e => {
 			var times = $('#timeline_timestamp').text().split(':')
 			times.forEach((t, i) => {
 				times[i] = parseInt(t)
@@ -492,18 +495,19 @@ export const Timeline = {
 			}
 		})
 		//Enter Frame
-		$('#timeline_framenumber').click(e => {
+		let framenumber = Panels.timeline.node.querySelector('#timeline_framenumber');
+		framenumber.addEventListener('click', e => {
 			if ($('#timeline_framenumber').attr('contenteditable') == 'true') return;
 
 			$('#timeline_framenumber').attr('contenteditable', true).trigger('focus');
 			document.execCommand('selectAll');
 		})
-		.on('focusout keydown', e => {
+		addEventListeners(framenumber, 'focusout keydown', e => {
 			if (e.type === 'focusout' || Keybinds.extra.confirm.keybind.isTriggered(e) || Keybinds.extra.cancel.keybind.isTriggered(e)) {
 				$('#timeline_framenumber').attr('contenteditable', false)
 			}
 		})
-		.on('keyup', e => {
+		addEventListeners(framenumber, 'keyup', e => {
 			let frame = parseInt($('#timeline_framenumber').text())
 			let seconds = frame * Timeline.getStep();
 			if (Math.abs(seconds-Timeline.time) > 1e-3 ) {
@@ -512,9 +516,9 @@ export const Timeline = {
 			}
 		})
 
-		$('#timeline_vue').on('mousewheel scroll', function(e) {
-			e.preventDefault()
-			let event = e.originalEvent;
+		let timeline_vue = Panels.timeline.node.querySelector('#timeline_vue');
+		addEventListeners(timeline_vue, 'mousewheel scroll', function(event) {
+			event.preventDefault()
 			let body = document.getElementById('timeline_body');
 
 			body.scrollLeft += event.deltaX/2;
@@ -1705,7 +1709,7 @@ Interface.definePanels(() => {
 											<i class="icon-open-state fa" v-bind:class="{'fa-angle-right': !animator.expanded, 'fa-angle-down': animator.expanded}"></i>
 										</div>
 										<dynamic-icon v-if="animator.node" :icon="animator.node.icon.replace('fa ', '').replace(/ /g, '.')" :color="getNodeColor(animator.node)" />
-										<dynamic-icon v-else-if="animator.particle" :icon="wand_shine" />
+										<dynamic-icon v-else-if="animator.particle" :icon="'wand_shine'" />
 										<dynamic-icon v-else :icon="'help'" style="color: var(--color-error)" />
 										<span class="timeline_animator_name" v-on:click.stop="animator.clickSelect();" @mousedown="dragAnimator(animator, $event)" @touchstart="dragAnimator(animator, $event)">
 											{{animator.name}}

js/api.ts

@@ -5,7 +5,7 @@ import { EventSystem } from "./util/event_system";
 import VersionUtil from './util/version_util';
 import { Filesystem } from "./file_system";
 import { MessageBoxOptions } from "./interface/dialog";
-import { currentwindow, shell, SystemInfo } from "./native_apis";
+import { currentwindow, electron, shell, SystemInfo } from "./native_apis";
 
 declare const appVersion: string;
 declare let Format: ModelFormat
@@ -53,6 +53,7 @@ export const Blockbench = {
 	events: {},
 	openTime: new Date(),
 	setup_successful: null as null | true,
+	argv: isApp ? electron.process?.argv?.slice() : null,
 	/**
 	 * @deprecated Use Undo.initEdit and Undo.finishEdit instead
 	 */
@@ -304,9 +305,10 @@ export const Blockbench = {
 		})
 	},
 	//CSS
-	addCSS(css: string): Deletable {
+	addCSS(css: string, layer: string = 'plugin'): Deletable {
 		let style_node = document.createElement('style');
-		style_node.type ='text/css';
+		style_node.setAttribute('type', 'text/css');
+		if (layer != '') css = `@layer ${layer} {${css}}`;
 		style_node.appendChild(document.createTextNode(css));
 		document.getElementsByTagName('head')[0].appendChild(style_node);
 		function deletableStyle(node) {

js/file_system.ts

@@ -25,7 +25,7 @@ export namespace Filesystem {
 	/**
 	 * The resource identifier group, used to allow the file dialog (open and save) to remember where it was last used
 	 */
-	type ResourceID =
+	export type ResourceID =
 		| string
 		| 'texture'
 		| 'minecraft_skin'
@@ -43,14 +43,14 @@ export namespace Filesystem {
 
 	// MARK: Import
 	type ReadType = 'buffer' | 'binary' | 'text' | 'image' | 'none'
-	interface ReadOptions {
+	export interface ReadOptions {
 		readtype?: ReadType | ((file: string) => ReadType)
 		errorbox?: boolean
 		/** File Extensions
 		 */
 		extensions?: string[]
 	}
-	interface ImportOptions extends ReadOptions {
+	export interface ImportOptions extends ReadOptions {
 		/** Name of the file type
 		 */
 		type: string
@@ -304,7 +304,7 @@ export namespace Filesystem {
 
 
 	// MARK: Pick Directory
-	interface PickDirOptions {
+	export interface PickDirOptions {
 		/**Location where the file dialog starts off
 		 */
 		startpath?: string
@@ -350,7 +350,7 @@ export namespace Filesystem {
 	}
 
 	// MARK: Export
-	interface ExportOptions extends WriteOptions {
+	export interface ExportOptions extends WriteOptions {
 		/**
 		 * Name of the file type
 		 */
@@ -460,7 +460,7 @@ export namespace Filesystem {
 
 	// MARK: Write
 	type WriteType = 'text' | 'buffer' | 'binary' | 'zip' | 'image'
-	interface WriteOptions {
+	export interface WriteOptions {
 		content?: string | ArrayBuffer | Blob
 		savetype?: WriteType | ((file: string) => WriteType)
 		custom_writer?: (content: string | ArrayBuffer | Blob, file_path: string, callback?: (file_path: string) => void) => void
@@ -525,7 +525,7 @@ export namespace Filesystem {
 
 
 	// MARK: Find
-	interface FindFileOptions {
+	export interface FindFileOptions {
 		recursive: boolean
 		filter_regex: RegExp
 		priority_regex?: RegExp
@@ -599,7 +599,7 @@ export namespace Filesystem {
 
 
 	// MARK: Drag & Drop
-	interface DragHandlerOptions {
+	export interface DragHandlerOptions {
 		/**
 		 * Allowed file extensions
 		 */