{{ tl('display.translation') }}
-
replay
+
+ replay
-
-
+
+
-
+ value="0"
+ @input="change(axis, 'translation')"
+ @mousedown="start()"
+ @change="save"
+ />
+
{{ tl('display.scale') }}
-
flip
-
replay
+
+ flip
+
+
+ replay
+
-
-
'
+ )[0]
+ );
}
if (options.icon) {
let bar = jq_dialog.find('.dialog_bar');
@@ -935,9 +1002,14 @@ export class MessageBox extends Dialog {
let list = Interface.createElement('ul');
for (let id in options.commands) {
let command = options.commands[id];
- if (!command || (typeof command == 'object' && !Condition(command.condition))) continue;
+ if (!command || (typeof command == 'object' && !Condition(command.condition)))
+ continue;
let text = tl(typeof command == 'string' ? command : command.text);
- let entry = Interface.createElement('li', {class: 'dialog_message_box_command'}, text);
+ let entry = Interface.createElement(
+ 'li',
+ { class: 'dialog_message_box_command' },
+ text
+ );
if (typeof command == 'object') {
if (command.icon) {
entry.prepend(Blockbench.getIconNode(command.icon));
@@ -949,14 +1021,14 @@ export class MessageBox extends Dialog {
}
entry.addEventListener('click', e => {
this.close(id, results, e);
- })
+ });
list.append(entry);
}
content.append(list);
}
if (options.checkboxes) {
- let list = Interface.createElement('ul', {class: 'dialog_message_box_checkboxes'});
+ let list = Interface.createElement('ul', { class: 'dialog_message_box_checkboxes' });
results = {};
for (let id in options.checkboxes) {
let checkbox = options.checkboxes[id];
@@ -967,13 +1039,24 @@ export class MessageBox extends Dialog {
}
let text = tl(typeof checkbox == 'string' ? checkbox : checkbox.text);
- let entry = Interface.createElement('li', {class: 'dialog_message_box_checkbox'}, [
- Interface.createElement('input', {type: 'checkbox', id: 'dialog_message_box_checkbox_'+id}),
- Interface.createElement('label', {for: 'dialog_message_box_checkbox_'+id, checked: results[id]}, text)
- ])
+ let entry = Interface.createElement(
+ 'li',
+ { class: 'dialog_message_box_checkbox' },
+ [
+ Interface.createElement('input', {
+ type: 'checkbox',
+ id: 'dialog_message_box_checkbox_' + id,
+ }),
+ Interface.createElement(
+ 'label',
+ { for: 'dialog_message_box_checkbox_' + id, checked: results[id] },
+ text
+ ),
+ ]
+ );
entry.firstElementChild.addEventListener('change', e => {
results[id] = (e.target as HTMLInputElement).checked;
- })
+ });
list.append(entry);
}
content.append(list);
@@ -981,69 +1064,74 @@ export class MessageBox extends Dialog {
// Buttons
if (this.buttons.length) {
-
- let buttons = []
+ let buttons = [];
this.buttons.forEach((b, i) => {
- let btn = Interface.createElement('button', {type: 'button'}, tl(b));
+ let btn = Interface.createElement('button', { type: 'button' }, tl(b));
buttons.push(btn);
- btn.addEventListener('click', (event) => {
+ btn.addEventListener('click', event => {
this.close(i, results, event);
- })
- })
- buttons[this.confirmIndex] && buttons[this.confirmIndex].classList.add('confirm_btn')
- buttons[this.cancelIndex] && buttons[this.cancelIndex].classList.add('cancel_btn')
+ });
+ });
+ buttons[this.confirmIndex] && buttons[this.confirmIndex].classList.add('confirm_btn');
+ buttons[this.cancelIndex] && buttons[this.cancelIndex].classList.add('cancel_btn');
let button_bar = $('
');
buttons.forEach((button, i) => {
- button_bar.append(button)
- })
+ button_bar.append(button);
+ });
jq_dialog.append(button_bar[0]);
}
//Draggable
if (this.draggable !== false) {
- jq_dialog.addClass('draggable')
+ jq_dialog.addClass('draggable');
// @ts-ignore
jq_dialog.draggable({
- handle: ".dialog_handle",
- containment: '#page_wrapper'
- })
+ handle: '.dialog_handle',
+ containment: '#page_wrapper',
+ });
this.object.style.position = 'absolute';
}
- let x = (window.innerWidth-540)/2
- this.object.style.left = x+'px';
+ let x = (window.innerWidth - 540) / 2;
+ this.object.style.left = x + 'px';
this.object.style.position = 'absolute';
- this.object.style.top = limitNumber(window.innerHeight/2-jq_dialog.height()/2 - 140, 0, 2000)+'px';
+ this.object.style.top =
+ limitNumber(window.innerHeight / 2 - jq_dialog.height() / 2 - 140, 0, 2000) + 'px';
if (options.width) {
- this.object.style.width = options.width+'px'
+ this.object.style.width = options.width + 'px';
} else {
- this.object.style.width = limitNumber((options.buttons ? options.buttons.length : 1) * 170+44, 380, 894)+'px';
+ this.object.style.width =
+ limitNumber((options.buttons ? options.buttons.length : 1) * 170 + 44, 380, 894) +
+ 'px';
}
return this;
}
delete() {
- if (this.object) this.object.remove()
+ if (this.object) this.object.remove();
this.object = null;
}
}
-interface ConfigDialogOptions extends DialogOptions {
-
-}
+interface ConfigDialogOptions extends DialogOptions {}
export class ConfigDialog extends Dialog {
constructor(id: string, options: ConfigDialogOptions) {
super(id, options);
}
show(anchor: HTMLElement) {
- super.show()
+ super.show();
$('#blackout').hide();
-
+
if (anchor instanceof HTMLElement) {
let anchor_position = $(anchor).offset();
- this.object.style.top = (anchor_position.top+anchor.offsetHeight) + 'px';
- this.object.style.left = Math.clamp(anchor_position.left - 30, 0, window.innerWidth-this.object.clientWidth - (this.title ? 0 : 30)) + 'px';
+ this.object.style.top = anchor_position.top + anchor.offsetHeight + 'px';
+ this.object.style.left =
+ Math.clamp(
+ anchor_position.left - 30,
+ 0,
+ window.innerWidth - this.object.clientWidth - (this.title ? 0 : 30)
+ ) + 'px';
}
return this;
}
@@ -1057,7 +1145,11 @@ export class ConfigDialog extends Dialog {
let title_bar;
if (this.title) {
- title_bar = Interface.createElement('div', {class: 'config_dialog_title'}, tl(this.title));
+ title_bar = Interface.createElement(
+ 'div',
+ { class: 'config_dialog_title' },
+ tl(this.title)
+ );
this.object.append(title_bar);
}
@@ -1067,21 +1159,21 @@ export class ConfigDialog extends Dialog {
let content = document.createElement('content');
content.className = 'dialog_content';
this.object.append(wrapper);
-
+
wrapper.append(content);
this.form = new InputForm(this.form_config);
content.append(this.form.node);
this.max_label_width = Math.max(this.max_label_width, this.form.max_label_width);
if (this.form.uses_wide_inputs) this.uses_wide_inputs = true;
- this.form.on('change', ({result}) => {
+ this.form.on('change', ({ result }) => {
if (this.configuration) {
for (let key in result) {
this.configuration[key] = result[key];
}
}
if (this.onFormChange) this.onFormChange(result);
- })
+ });
if (this.toolbars) {
buildToolbars(this);
@@ -1090,9 +1182,9 @@ export class ConfigDialog extends Dialog {
let close_button = document.createElement('div');
close_button.classList.add('dialog_close_button');
close_button.innerHTML = '
clear';
- close_button.addEventListener('click', (e) => {
+ close_button.addEventListener('click', e => {
this.cancel();
- })
+ });
if (title_bar) {
title_bar.append(close_button);
} else {
@@ -1106,21 +1198,21 @@ export class ConfigDialog extends Dialog {
return this;
}
delete() {
- if (this.object) this.object.remove()
+ if (this.object) this.object.remove();
this.object = null;
}
}
export class ToolConfig extends ConfigDialog {
declare options: {
- [key: string]: FormResultValue
- }
+ [key: string]: FormResultValue;
+ };
constructor(id: string, options: ConfigDialogOptions) {
super(id, options);
this.options = {};
let config_saved_data: Record
;
try {
- let stored = localStorage.getItem(`tool_config.${this.id}`);;
+ let stored = localStorage.getItem(`tool_config.${this.id}`);
config_saved_data = JSON.parse(stored);
if (!config_saved_data) config_saved_data = {};
} catch (err) {
@@ -1132,7 +1224,8 @@ export class ToolConfig extends ConfigDialog {
this.options[key] = BarItem.constructing.value;
continue;
}
- this.options[key] = config_saved_data[key] ?? InputForm.getDefaultValue(options.form[key]);
+ this.options[key] =
+ config_saved_data[key] ?? InputForm.getDefaultValue(options.form[key]);
}
}
/**
@@ -1142,9 +1235,6 @@ export class ToolConfig extends ConfigDialog {
show(anchor?: HTMLElement): this {
super.show(anchor);
this.setFormValues(this.options, false);
- this.form.on('input', ({result, cause}) => {
- this.changeOptions(result)
- })
return this;
}
/**
@@ -1174,7 +1264,6 @@ export class ToolConfig extends ConfigDialog {
}
}
-
Object.assign(window, {
DialogSidebar,
Dialog,
diff --git a/js/interface/form.ts b/js/interface/form.ts
index 3ea4cd9e1..0fdb6035f 100644
--- a/js/interface/form.ts
+++ b/js/interface/form.ts
@@ -1,17 +1,17 @@
-import { Blockbench } from "../api"
-import { Clipbench } from "../copy_paste"
-import { Filesystem } from "../file_system"
-import { tl } from "../languages"
-import { EventSystem } from "../util/event_system"
-import { getStringWidth, pureMarked } from "../util/util"
-import { Interface } from "./interface"
+import { Blockbench } from '../api';
+import { Clipbench } from '../copy_paste';
+import { Filesystem } from '../file_system';
+import { tl } from '../languages';
+import { EventSystem } from '../util/event_system';
+import { getStringWidth, pureMarked } from '../util/util';
+import { Interface } from './interface';
-type ReadType = 'buffer' | 'binary' | 'text' | 'image'
+type ReadType = 'buffer' | 'binary' | 'text' | 'image';
interface FileResult {
- name: string
- path: string
- content: string | ArrayBuffer
- no_file?: boolean
+ name: string;
+ path: string;
+ content: string | ArrayBuffer;
+ no_file?: boolean;
}
export enum FormInputType {
Text = 'text',
@@ -35,145 +35,146 @@ export enum FormInputType {
}
export interface FormElementOptions {
- label?: string
+ label?: string;
/**
* Detailed description of the field, available behind the questionmark icon or on mouse hover
*/
- description?: string
+ description?: string;
/**
* Type of the input. If unspecified, defaults to text
*/
- type?: FormInputType | `${FormInputType}`
+ type?: FormInputType | `${FormInputType}`;
/**
* Stretch the input field across the whole width of the form
*/
- full_width?: boolean
+ full_width?: boolean;
/** Set the input to read-only */
- readonly?: boolean
+ readonly?: boolean;
/** Add buttons to allow copying and sharing the text or link */
- share_text?: boolean
+ share_text?: boolean;
/**
* The default value
*/
- value?: any
+ value?: any;
/**
* The default selected option for 'select', 'inline_select' and 'radio' types. Alias for 'value'
*/
- default?: any
- placeholder?: string
- list?: string[]
+ default?: any;
+ placeholder?: string;
+ list?: string[];
/**
* When using 'text' type, the text to display. Markdown is supported
*/
- text?: string
- condition?: ConditionResolvable
+ text?: string;
+ condition?: ConditionResolvable;
/**
* When using 'range' type, allow users to modify the numeric input
*/
- editable_range_label?: boolean
- colorpicker?: any
+ editable_range_label?: boolean;
+ colorpicker?: any;
/**
* On numeric inputs, the minimum possible value
*/
- min?: number
+ min?: number;
/**
* On numeric inputs, the maximum possible value
*/
- max?: number
+ max?: number;
/**
* The step in which the value can be increased / decreased
*/
- step?: number
+ step?: number;
/**
* On num slider inputs, The color of the slider
*/
- color?: string
+ color?: string;
/**
* If enabled, the value is forced to multiples of the "step" value. This can be used to create integer-only inputs etc.
*/
- force_step?: boolean
+ force_step?: boolean;
/**
* The number of dimensions when using a vector type
*/
- dimensions?: number
+ dimensions?: number;
/**
* The height of the input on textareas, in pixels
*/
- height?: number
+ height?: number;
/**
* Available options on select or inline_select inputs
*/
- options?: Record | (() => Record)
+ options?:
+ | Record
+ | (() => Record);
/**
* List of buttons for the button type
*/
- buttons?: string[]
+ buttons?: string[];
/**
* Function to get the interval value for a num_slider based on the input event
* @returns Interval value
*/
- getInterval?: (event: Event) => number
+ getInterval?: (event: Event) => number;
/**
* For num_sliders, the sliding interval mode
*/
- interval_type?: 'position' | 'rotation'
+ interval_type?: 'position' | 'rotation';
/**
* Allow users to toggle the entire option on or off
*/
- toggle_enabled?: boolean
+ toggle_enabled?: boolean;
/**
* Set whether the setting is toggled on or off by default. Requires 'toggle_enabled' field to be set to true
*/
- toggle_default?: boolean
+ toggle_default?: boolean;
/**
* Lock the ratio of a vector
*/
- linked_ratio?: boolean
+ linked_ratio?: boolean;
/**
* Set the return type of files on file inputs
*/
- return_as?: 'file'
+ return_as?: 'file';
/**
* Runs when any of the buttons is pressed
* @param button_index Index of the clicked button in the buttons list
*/
- click?: (button_index: number) => void
+ click?: (button_index: number) => void;
- readtype?: ReadType | ((file: string) => ReadType)
- resource_id?: string
- extensions?: string[]
- filetype?: string
+ readtype?: ReadType | ((file: string) => ReadType);
+ resource_id?: string;
+ extensions?: string[];
+ filetype?: string;
}
-export type FormResultValue = string | number | boolean | any[] | {}
+export type FormResultValue = string | number | boolean | any[] | {};
export type InputFormConfig = {
- [formElement: string]: '_' | FormElementOptions
-}
-type FormValues = Record
-
+ [formElement: string]: '_' | FormElementOptions;
+};
+type FormValues = Record;
// MARK: InputForm
export class InputForm extends EventSystem {
- uuid: string
- form_config: InputFormConfig
- form_data: { [formElement: string]: FormElement }
- node: HTMLDivElement
- max_label_width: number
- uses_wide_inputs: boolean
+ uuid: string;
+ form_config: InputFormConfig;
+ form_data: { [formElement: string]: FormElement };
+ node: HTMLDivElement;
+ max_label_width: number;
+ uses_wide_inputs: boolean;
constructor(form_config: InputFormConfig, options = {}) {
super();
this.uuid = guid();
this.form_config = form_config;
this.form_data = {};
- this.node = Interface.createElement('div', {class: 'form'}) as HTMLDivElement;
+ this.node = Interface.createElement('div', { class: 'form' }) as HTMLDivElement;
this.max_label_width = 0;
this.uses_wide_inputs = false;
this.buildForm();
- this.updateValues({cause: 'setup'});
+ this.updateValues({ cause: 'setup' });
}
buildForm() {
let jq_node = $(this.node);
@@ -186,8 +187,14 @@ export class InputForm extends EventSystem {
continue;
}
let InputType = FormElement.types[input_config.type] ?? FormElement.types.text;
- let form_element = this.form_data[form_id] = new InputType(form_id, input_config, this);
- let bar = Interface.createElement('div', {class: `dialog_bar bar form_bar form_bar_${form_id}`});
+ let form_element = (this.form_data[form_id] = new InputType(
+ form_id,
+ input_config,
+ this
+ ));
+ let bar = Interface.createElement('div', {
+ class: `dialog_bar bar form_bar form_bar_${form_id}`,
+ });
form_element.build(bar);
form_element.setup();
if (form_element.uses_wide_inputs) this.uses_wide_inputs = true;
@@ -203,11 +210,9 @@ export class InputForm extends EventSystem {
if (!form_element || (ignore_hidden && !Condition(form_element.condition))) continue;
if (form_element.uses_wide_inputs) this.uses_wide_inputs = true;
- if (form_element.label_width) {
- this.max_label_width = Math.max(form_element.label_width, this.max_label_width);
- }
+ this.max_label_width = Math.max(form_element.label_width, this.max_label_width);
}
- this.node.style.setProperty('--max_label_width', this.max_label_width+'px');
+ this.node.style.setProperty('--max_label_width', this.max_label_width + 'px');
}
update(form_result: FormValues) {
for (let form_id in this.form_config) {
@@ -219,14 +224,21 @@ export class InputForm extends EventSystem {
}
}
}
- updateValues(context: {cause?: string, changed_keys?: string[]} = {}) {
+ updateValues(context: { cause?: string; changed_keys?: string[] } = {}) {
let form_result = this.getResult();
this.update(form_result);
if (context.cause != 'setup') {
- this.dispatchEvent('change', {result: form_result, cause: context.cause, changed_keys: context.changed_keys});
+ this.dispatchEvent('change', {
+ result: form_result,
+ cause: context.cause,
+ changed_keys: context.changed_keys,
+ });
}
if (context.cause == 'input') {
- this.dispatchEvent('input', {result: form_result, changed_keys: context.changed_keys});
+ this.dispatchEvent('input', {
+ result: form_result,
+ changed_keys: context.changed_keys,
+ });
}
return form_result;
}
@@ -234,25 +246,38 @@ export class InputForm extends EventSystem {
for (let form_id in this.form_config) {
let form_element = this.form_data[form_id];
let input_config = this.form_config[form_id];
- if (form_element && 'setValue' in form_element && values[form_id] != undefined && typeof input_config == 'object') {
+ if (
+ form_element &&
+ 'setValue' in form_element &&
+ values[form_id] != undefined &&
+ typeof input_config == 'object'
+ ) {
form_element.setValue(values[form_id]);
}
}
- if (update) this.updateValues({cause: 'update_value'});
+ if (update) this.updateValues({ cause: 'update_value' });
}
setToggles(values: Record, update = true) {
for (let form_id in this.form_config) {
let input_config = this.form_config[form_id];
let form_element = this.form_data[form_id];
- if (values[form_id] != undefined && typeof input_config == 'object' && form_element.input_toggle && form_element.bar) {
+ if (
+ values[form_id] != undefined &&
+ typeof input_config == 'object' &&
+ form_element.input_toggle &&
+ form_element.bar
+ ) {
form_element.input_toggle.checked = values[form_id];
- form_element.bar.classList.toggle('form_toggle_disabled', !form_element.input_toggle.checked);
+ form_element.bar.classList.toggle(
+ 'form_toggle_disabled',
+ !form_element.input_toggle.checked
+ );
}
}
- if (update) this.updateValues({cause: 'update_toggle'});
+ if (update) this.updateValues({ cause: 'update_toggle' });
}
getResult(): FormValues {
- let result = {}
+ let result = {};
for (let form_id in this.form_data) {
let form_element = this.form_data[form_id];
if (form_element) {
@@ -271,7 +296,7 @@ export class InputForm extends EventSystem {
if (set_value) return set_value;
let type = FormElement.types[input_config.type];
if (type) {
- return type.prototype.getDefault.call({options: input_config});
+ return type.prototype.getDefault.call({ options: input_config });
}
return '';
}
@@ -279,13 +304,13 @@ export class InputForm extends EventSystem {
// MARK: FormElement
export class FormElement extends EventSystem {
- id: string
- form: InputForm
- condition: ConditionResolvable
- options: FormElementOptions
- bar: HTMLElement
- input_toggle?: HTMLInputElement
- label_width: number
+ id: string;
+ form: InputForm;
+ condition: ConditionResolvable;
+ options: FormElementOptions;
+ bar: HTMLElement;
+ input_toggle?: HTMLInputElement;
+ label_width: number;
constructor(id: string, options: FormElementOptions, form: InputForm) {
super();
this.id = id;
@@ -296,9 +321,16 @@ export class FormElement extends EventSystem {
build(bar: HTMLDivElement) {
this.bar = bar;
if (typeof this.options.label == 'string') {
- let label = Interface.createElement('label', {class: 'name_space_left', for: this.id}, tl(this.options.label))
+ let label = Interface.createElement(
+ 'label',
+ { class: 'name_space_left', for: this.id },
+ tl(this.options.label)
+ );
bar.append(label);
- if (!this.options.full_width && this.condition !== false/*Weed out inputs where the condition is always false*/) {
+ if (
+ !this.options.full_width &&
+ this.condition !== false /*Weed out inputs where the condition is always false*/
+ ) {
this.label_width = getStringWidth(label.textContent);
}
}
@@ -315,14 +347,13 @@ export class FormElement extends EventSystem {
getValue(): any {
return this.getDefault();
}
- setValue(value: any) {
- }
+ setValue(value: any) {}
getDefault(): any {
return null;
}
change() {
- this.dispatchEvent('change', {changed_keys: [this.id]});
- this.form.updateValues({cause: 'input', changed_keys: [this.id]});
+ this.dispatchEvent('change', { changed_keys: [this.id] });
+ this.form.updateValues({ cause: 'input', changed_keys: [this.id] });
}
setup() {
if (this.options.readonly && 'input' in this) {
@@ -333,7 +364,7 @@ export class FormElement extends EventSystem {
icon.className = 'fa fa-question dialog_form_description';
icon.onclick = () => {
Blockbench.showQuickMessage(this.options.description, 3600);
- }
+ };
this.bar.append(icon);
}
if (this.options.toggle_enabled) {
@@ -361,44 +392,50 @@ export class FormElement extends EventSystem {
// MARK: FormElement Types
FormElement.types.range = class FormElementRange extends FormElement {
- input: HTMLInputElement
- numeric_input?: {value: number}
+ input: HTMLInputElement;
+ numeric_input?: { value: number };
build(bar: HTMLDivElement) {
super.build(bar);
let scope = this;
let input_element = $(``)
+ value="${this.options.value || 0}" min="${this.options.min}" max="${this.options.max}" step="${this.options.step || 1}">`);
bar.append(input_element[0]);
this.input = input_element[0] as HTMLInputElement;
if (!this.options.editable_range_label) {
- let display = Interface.createElement('span', {class: 'range_input_label'}, (this.options.value||0).toString())
+ let display = Interface.createElement(
+ 'span',
+ { class: 'range_input_label' },
+ (this.options.value || 0).toString()
+ );
bar.append(display);
input_element.on('input', () => {
let result = this.form.getResult();
display.textContent = trimFloatNumber(result[this.id] as number);
- })
+ });
} else {
bar.classList.add('slider_input_combo');
let numeric_input = new Interface.CustomElements.NumericInput(this.id + '_number', {
value: this.options.value ?? 0,
- min: this.options.min, max: this.options.max, step: this.options.step,
+ min: this.options.min,
+ max: this.options.max,
+ step: this.options.step,
onChange() {
input_element.val(numeric_input.value);
scope.change();
- }
+ },
});
this.numeric_input = numeric_input;
bar.append(numeric_input.node);
input_element.on('input', () => {
let result = parseFloat(input_element.val() as string);
numeric_input.value = result;
- })
+ });
}
input_element.on('input', () => {
this.change();
- })
+ });
}
getValue(): number {
let result: number;
@@ -410,7 +447,7 @@ FormElement.types.range = class FormElementRange extends FormElement {
if (this.options.force_step && this.options.step) {
result = Math.round(result / this.options.step) * this.options.step;
}
- return Math.clamp(result||0, this.options.min, this.options.max);
+ return Math.clamp(result || 0, this.options.min, this.options.max);
}
setValue(value: number): void {
this.input.value = value.toString();
@@ -426,9 +463,16 @@ FormElement.types.info = class FormElementInfo extends FormElement {
build(bar: HTMLDivElement) {
this.bar = bar;
if (typeof this.options.label == 'string') {
- let label = Interface.createElement('label', {class: 'name_space_left', for: this.id}, tl(this.options.label))
+ let label = Interface.createElement(
+ 'label',
+ { class: 'name_space_left', for: this.id },
+ tl(this.options.label)
+ );
bar.append(label);
- if (!this.options.full_width && this.condition !== false/*Weed out inputs where the condition is always false*/) {
+ if (
+ !this.options.full_width &&
+ this.condition !== false /*Weed out inputs where the condition is always false*/
+ ) {
this.label_width = getStringWidth(label.textContent);
}
}
@@ -438,14 +482,14 @@ FormElement.types.info = class FormElementInfo extends FormElement {
if (this.options.description) {
bar.setAttribute('title', tl(this.options.description));
}
- let content = Interface.createElement('div', {class: 'small_text'});
+ let content = Interface.createElement('div', { class: 'small_text' });
content.innerHTML = pureMarked(tl(this.options.text));
bar.append(content);
}
};
FormElement.types.text = class FormElementText extends FormElement {
- password_toggle?: HTMLElement
- input: HTMLInputElement
+ password_toggle?: HTMLElement;
+ input: HTMLInputElement;
build(bar: HTMLDivElement) {
super.build(bar);
let scope = this;
@@ -453,19 +497,19 @@ FormElement.types.text = class FormElementText extends FormElement {
type: 'text',
className: 'dark_bordered half focusable_input',
id: this.id,
- value: this.options.value||'',
- placeholder: this.options.placeholder||'',
+ value: this.options.value || '',
+ placeholder: this.options.placeholder || '',
oninput() {
scope.change();
- }
+ },
});
this.input = input_element;
- bar.append(input_element)
+ bar.append(input_element);
if (this.options.list) {
let list_id = `${this.form.uuid}_${this.id}_list`;
input_element.setAttribute('list', list_id);
- let list = Interface.createElement('datalist', {id: list_id});
+ let list = Interface.createElement('datalist', { id: list_id });
for (let value of this.options.list) {
let node = document.createElement('option');
node.value = value;
@@ -474,10 +518,9 @@ FormElement.types.text = class FormElementText extends FormElement {
bar.append(list[0]);
}
if (this.options.type == 'password') {
-
bar.append(`
-
`)
+ `);
input_element.type = 'password';
let hidden = true;
let this_bar = $(bar);
@@ -485,43 +528,56 @@ FormElement.types.text = class FormElementText extends FormElement {
this_bar.find('.password_toggle').on('click', e => {
hidden = !hidden;
this_input_element.setAttribute('type', hidden ? 'password' : 'text');
- this_bar.find('.password_toggle i')[0].className = hidden ? 'fas fa-eye-slash' : 'fas fa-eye';
- })
+ this_bar.find('.password_toggle i')[0].className = hidden
+ ? 'fas fa-eye-slash'
+ : 'fas fa-eye';
+ });
}
if (this.options.share_text && this.options.value) {
let text = this.options.value.toString();
let is_url = text.startsWith('https://');
- let copy_button = Interface.createElement('div', {class: 'form_input_tool tool', title: tl('dialog.copy_to_clipboard')}, Blockbench.getIconNode('content_paste'));
+ let copy_button = Interface.createElement(
+ 'div',
+ { class: 'form_input_tool tool', title: tl('dialog.copy_to_clipboard') },
+ Blockbench.getIconNode('content_paste')
+ );
copy_button.addEventListener('click', e => {
if (isApp || navigator.clipboard) {
Clipbench.setText(text);
Blockbench.showQuickMessage('dialog.copied_to_clipboard');
input_element.focus();
document.execCommand('selectAll');
-
} else if (is_url) {
Blockbench.showMessageBox({
title: 'dialog.share_model.title',
message: `[${text}](${text})`,
- })
+ });
}
});
bar.append(copy_button);
if (is_url) {
- let open_button = Interface.createElement('div', {class: 'form_input_tool tool', title: tl('dialog.open_url')}, Blockbench.getIconNode('open_in_browser'));
+ let open_button = Interface.createElement(
+ 'div',
+ { class: 'form_input_tool tool', title: tl('dialog.open_url') },
+ Blockbench.getIconNode('open_in_browser')
+ );
open_button.addEventListener('click', e => {
Blockbench.openLink(text);
});
bar.append(open_button);
}
if (navigator.share) {
- let share_button = Interface.createElement('div', {class: 'form_input_tool tool', title: tl('generic.share')}, Blockbench.getIconNode('share'));
+ let share_button = Interface.createElement(
+ 'div',
+ { class: 'form_input_tool tool', title: tl('generic.share') },
+ Blockbench.getIconNode('share')
+ );
share_button.addEventListener('click', e => {
navigator.share({
title: this.options.label ? tl(this.options.label) : 'Share',
- [is_url ? 'url' : 'text']: text
+ [is_url ? 'url' : 'text']: text,
});
});
bar.append(share_button);
@@ -539,18 +595,18 @@ FormElement.types.text = class FormElementText extends FormElement {
}
};
FormElement.types.textarea = class FormElementTextarea extends FormElement {
- textarea: HTMLTextAreaElement
+ textarea: HTMLTextAreaElement;
build(bar: HTMLDivElement) {
super.build(bar);
let scope = this;
this.textarea = Object.assign(document.createElement('textarea'), {
className: 'focusable_input',
id: this.id,
- value: this.options.value||'',
- placeholder: this.options.placeholder||'',
+ value: this.options.value || '',
+ placeholder: this.options.placeholder || '',
oninput() {
scope.change();
- }
+ },
});
this.textarea.style.height = (this.options.height || 150) + 'px';
bar.append(this.textarea);
@@ -566,18 +622,20 @@ FormElement.types.textarea = class FormElementTextarea extends FormElement {
}
};
FormElement.types.number = class FormElementNumber extends FormElement {
- numeric_input: {value: number, node: HTMLElement}
+ numeric_input: { value: number; node: HTMLElement };
build(bar: HTMLDivElement) {
super.build(bar);
let scope = this;
this.numeric_input = new Interface.CustomElements.NumericInput(this.id, {
value: this.options.value,
- min: this.options.min, max: this.options.max, step: this.options.step,
+ min: this.options.min,
+ max: this.options.max,
+ step: this.options.step,
onChange() {
scope.change();
- }
+ },
});
- bar.append(this.numeric_input.node)
+ bar.append(this.numeric_input.node);
}
getValue() {
let result = Math.clamp(this.numeric_input.value, this.options.min, this.options.max);
@@ -594,7 +652,7 @@ FormElement.types.number = class FormElementNumber extends FormElement {
}
};
FormElement.types.select = class FormElementSelect extends FormElement {
- select_input: {node: HTMLElement, set: (value: string) => void}
+ select_input: { node: HTMLElement; set: (value: string) => void };
build(bar: HTMLDivElement) {
super.build(bar);
let scope = this;
@@ -603,7 +661,7 @@ FormElement.types.select = class FormElementSelect extends FormElement {
value: this.options.value || this.options.default,
onInput() {
scope.change();
- }
+ },
});
bar.append(this.select_input.node);
}
@@ -625,34 +683,43 @@ FormElement.types.inline_select = class FormElementInlineSelect extends FormElem
let i = 0;
for (let key in this.options.options) {
let is_selected = val ? key == val : i == 0;
- let text: string = typeof this.options.options[key] == 'string' ? this.options.options[key] : this.options.options[key].name;
- let node = Interface.createElement('li', {class: is_selected ? 'selected' : '', key: key}, tl(text));
+ let text: string =
+ typeof this.options.options[key] == 'string'
+ ? this.options.options[key]
+ : this.options.options[key].name;
+ let node = Interface.createElement(
+ 'li',
+ { class: is_selected ? 'selected' : '', key: key },
+ tl(text)
+ );
node.onclick = () => {
options.forEach(li => {
li.classList.toggle('selected', li == node);
- })
+ });
this.change();
- }
+ };
options.push(node);
i++;
}
- let wrapper = Interface.createElement('ul', {class: 'form_inline_select'}, options);
+ let wrapper = Interface.createElement('ul', { class: 'form_inline_select' }, options);
bar.append(wrapper);
}
getValue(): string {
return $(this.bar).find('li.selected')[0]?.getAttribute('key') || '';
}
setValue(value: string) {
- $(this.bar).find('li').each((i, el) => {
- el.classList.toggle('selected', el.getAttribute('key') == value);
- })
+ $(this.bar)
+ .find('li')
+ .each((i, el) => {
+ el.classList.toggle('selected', el.getAttribute('key') == value);
+ });
}
getDefault(): string {
return Object.keys(this.options.options)[0] ?? '';
}
};
FormElement.types.inline_multi_select = class FormElementInlineMultiSelect extends FormElement {
- value: Record
+ value: Record;
build(bar: HTMLDivElement) {
super.build(bar);
let val = this.options.value || this.options.default;
@@ -668,58 +735,76 @@ FormElement.types.inline_multi_select = class FormElementInlineMultiSelect exten
let is_selected = val && val[key];
let text = this.options.options[key];
if (typeof text != 'string') text = text.name;
- let node = Interface.createElement('li', {class: is_selected ? 'selected' : '', key: key}, tl(text));
+ let node = Interface.createElement(
+ 'li',
+ { class: is_selected ? 'selected' : '', key: key },
+ tl(text)
+ );
node.onclick = () => {
this.value[key] = !this.value[key];
node.classList.toggle('selected', this.value[key]);
this.change();
- }
+ };
options.push(node);
i++;
}
- let wrapper = Interface.createElement('ul', {class: 'form_inline_select multi_select'}, options);
- bar.append(wrapper)
+ let wrapper = Interface.createElement(
+ 'ul',
+ { class: 'form_inline_select multi_select' },
+ options
+ );
+ bar.append(wrapper);
}
getValue(): Record {
return this.value;
}
setValue(value: Record) {
for (let key in value) {
- if (this.value[key] !== undefined) {
+ if (this.value[key] !== undefined) {
this.value[key] = value[key];
}
}
- $(this.bar).find('li').each((i, el) => {
- el.classList.toggle('selected', !!this.value[el.getAttribute('key')]);
- })
+ $(this.bar)
+ .find('li')
+ .each((i, el) => {
+ el.classList.toggle('selected', !!this.value[el.getAttribute('key')]);
+ });
}
getDefault(): Record {
return {};
}
};
FormElement.types.radio = class FormElementRadio extends FormElement {
- input: HTMLInputElement
+ input: HTMLInputElement;
build(bar: HTMLDivElement) {
super.build(bar);
- let el = $(``)
+ let el = $(``);
for (let key in this.options.options) {
- let name = tl(typeof this.options.options[key] == 'string' ? this.options.options[key] : this.options.options[key].name)
+ let name = tl(
+ typeof this.options.options[key] == 'string'
+ ? this.options.options[key]
+ : this.options.options[key].name
+ );
el.append(`
-
`)
+ `);
this.input = el.find(`input#${key}`)[0] as HTMLInputElement;
- this.input.addEventListener('change', (args) => {
+ this.input.addEventListener('change', args => {
this.change();
- })
+ });
}
bar.append(el[0]);
}
getValue(): string {
- return $(this.bar).find('.form_part_radio#'+this.id+' input:checked').attr('id');
+ return $(this.bar)
+ .find('.form_part_radio#' + this.id + ' input:checked')
+ .attr('id');
}
setValue(value: string) {
- $(this.bar).find('.form_part_radio input#'+value).prop('checked', true);
+ $(this.bar)
+ .find('.form_part_radio input#' + value)
+ .prop('checked', true);
}
getDefault() {
return Object.keys(this.options.options)[0] ?? '';
@@ -738,14 +823,14 @@ FormElement.types.buttons = class FormElementButtons extends FormElement {
button.innerText = tl(button_text);
button.addEventListener('click', e => {
this.options.click(index);
- })
+ });
list.append(button);
- })
+ });
bar.append(list);
}
};
FormElement.types.num_slider = class FormElementNumSlider extends FormElement {
- slider: NumSlider
+ slider: NumSlider;
build(bar: HTMLDivElement) {
super.build(bar);
let getInterval = this.options.getInterval;
@@ -753,19 +838,19 @@ FormElement.types.num_slider = class FormElementNumSlider extends FormElement {
if (this.options.interval_type == 'position') getInterval = getSpatialInterval;
// @ts-ignore
if (this.options.interval_type == 'rotation') getInterval = getRotationInterval;
- this.slider = new NumSlider('form_slider_'+this.id, {
+ this.slider = new NumSlider('form_slider_' + this.id, {
private: true,
// @ts-ignore
onChange: () => {
this.change();
},
- color: this.options.color || "",
+ color: this.options.color || '',
getInterval,
settings: {
default: this.options.value || 0,
min: this.options.min,
max: this.options.max,
- step: this.options.step||1,
+ step: this.options.step || 1,
},
});
bar.append(this.slider.node);
@@ -782,7 +867,7 @@ FormElement.types.num_slider = class FormElementNumSlider extends FormElement {
}
};
FormElement.types.vector = class FormElementVector extends FormElement {
- linked_ratio: boolean
+ linked_ratio: boolean;
constructor(id: string, options: FormElementOptions, form: InputForm) {
super(id, options, form);
this.linked_ratio = false;
@@ -790,35 +875,40 @@ FormElement.types.vector = class FormElementVector extends FormElement {
build(bar: HTMLDivElement) {
super.build(bar);
let scope = this;
- let group = $(`
`)
- bar.append(group[0])
+ let group = $(`
`);
+ bar.append(group[0]);
let vector_inputs = [];
- let initial_value = this.options.value instanceof Array ? this.options.value.slice() : [1, 1, 1];
- let updateInputs = (changed_input) => {
+ let initial_value =
+ this.options.value instanceof Array ? this.options.value.slice() : [1, 1, 1];
+ let updateInputs = changed_input => {
let i2 = -1;
for (let vector_input_2 of vector_inputs) {
i2++;
if (vector_input_2 == changed_input) continue;
- let new_value = initial_value[i2] * (changed_input.value / initial_value[vector_inputs.indexOf(changed_input)]);
- new_value = Math.clamp(new_value, this.options.min, this.options.max)
+ let new_value =
+ initial_value[i2] *
+ (changed_input.value / initial_value[vector_inputs.indexOf(changed_input)]);
+ new_value = Math.clamp(new_value, this.options.min, this.options.max);
if (this.options.force_step && this.options.step) {
new_value = Math.round(new_value / this.options.step) * this.options.step;
}
vector_input_2.value = new_value;
}
- }
+ };
for (let i = 0; i < (this.options.dimensions || 3); i++) {
let numeric_input = new Interface.CustomElements.NumericInput(this.id + '_' + i, {
value: this.options.value ? this.options.value[i] : 0,
- min: this.options.min, max: this.options.max, step: this.options.step,
+ min: this.options.min,
+ max: this.options.max,
+ step: this.options.step,
onChange() {
if (scope.linked_ratio) {
updateInputs(numeric_input);
}
scope.change();
- }
+ },
});
- group.append(numeric_input.node)
+ group.append(numeric_input.node);
vector_inputs.push(numeric_input);
}
if (typeof this.options.linked_ratio == 'boolean') {
@@ -828,7 +918,11 @@ FormElement.types.vector = class FormElementVector extends FormElement {
};
this.linked_ratio = this.options.linked_ratio;
let icon = Blockbench.getIconNode('link');
- let linked_ratio_toggle = Interface.createElement('div', {class: 'tool linked_ratio_toggle'}, icon);
+ let linked_ratio_toggle = Interface.createElement(
+ 'div',
+ { class: 'tool linked_ratio_toggle' },
+ icon
+ );
linked_ratio_toggle.addEventListener('click', event => {
this.linked_ratio = !this.linked_ratio;
if (this.linked_ratio) {
@@ -837,19 +931,19 @@ FormElement.types.vector = class FormElementVector extends FormElement {
// scope.change()
}
updateState();
- })
+ });
updateState();
- group.append(linked_ratio_toggle)
+ group.append(linked_ratio_toggle);
}
}
getValue(): number[] {
let result: number[] = [];
for (let i = 0; i < (this.options.dimensions || 3); i++) {
let input_value = $(this.bar).find(`input#${this.id}_${i}`).val() as string;
- let num = Math.clamp(parseFloat(input_value)||0, this.options.min, this.options.max);
+ let num = Math.clamp(parseFloat(input_value) || 0, this.options.min, this.options.max);
if (this.options.force_step && this.options.step) {
num = Math.round(num / this.options.step) * this.options.step;
- };
+ }
result.push(num);
}
@@ -861,33 +955,35 @@ FormElement.types.vector = class FormElementVector extends FormElement {
}
}
getDefault(): number[] {
- return new Array(this.options.dimensions??3).fill(Math.clamp(0, this.options.min, this.options.max))
+ return new Array(this.options.dimensions ?? 3).fill(
+ Math.clamp(0, this.options.min, this.options.max)
+ );
}
};
FormElement.types.color = class FormElementColor extends FormElement {
- colorpicker: ColorPicker
+ colorpicker: ColorPicker;
build(bar: HTMLDivElement) {
super.build(bar);
if (this.options.colorpicker) this.colorpicker = this.options.colorpicker;
let scope = this;
if (!this.colorpicker) {
this.colorpicker = new ColorPicker({
- id: 'cp_'+this.id,
+ id: 'cp_' + this.id,
name: tl(this.options.label),
// @ts-ignore
label: false,
private: true,
- value: this.options.value
- })
+ value: this.options.value,
+ });
}
// @ts-ignore
- this.colorpicker.onChange = function() {
+ this.colorpicker.onChange = function () {
scope.change();
};
this.colorpicker.on('modify_color', () => {
scope.change();
- })
- bar.append(this.colorpicker.getNode())
+ });
+ bar.append(this.colorpicker.getNode());
}
getValue(): tinycolor.Instance {
return this.colorpicker.get();
@@ -900,19 +996,19 @@ FormElement.types.color = class FormElementColor extends FormElement {
}
};
FormElement.types.checkbox = class FormElementCheckbox extends FormElement {
- input: HTMLInputElement
+ input: HTMLInputElement;
build(bar: HTMLDivElement) {
super.build(bar);
this.input = Interface.createElement('input', {
type: 'checkbox',
class: 'focusable_input',
id: this.id,
- })
+ });
this.input.checked = this.options.value;
- bar.append(this.input)
+ bar.append(this.input);
this.input.addEventListener('change', () => {
this.change();
- })
+ });
}
setValue(value: boolean) {
this.input.checked = value;
@@ -926,30 +1022,42 @@ FormElement.types.checkbox = class FormElementCheckbox extends FormElement {
};
class FormElementFile extends FormElement {
- file: Filesystem.FileResult
- value: string
- content: any
- input: HTMLInputElement
+ file: Filesystem.FileResult;
+ value: string;
+ content: any;
+ input: HTMLInputElement;
build(bar: HTMLDivElement) {
super.build(bar);
if (this.options.type == 'folder' && !isApp) return;
this.value = this.options.value;
let scope = this;
- let input = $(`
`);
+ let input = $(
+ `
`
+ );
this.input = input[0] as HTMLInputElement;
- this.input.value = settings.streamer_mode.value ? `[${tl('generic.redacted')}]` : this.value || '';
+ this.input.value = settings.streamer_mode.value
+ ? `[${tl('generic.redacted')}]`
+ : this.value || '';
let input_wrapper = $('
');
input_wrapper.append(input);
bar.append(input_wrapper[0]);
bar.classList.add('form_bar_file');
switch (this.options.type) {
- case 'file': input_wrapper.append('
insert_drive_file'); break;
- case 'folder': input_wrapper.append('
folder'); break;
- case 'save': input_wrapper.append('
save'); break;
+ case 'file':
+ input_wrapper.append('
insert_drive_file');
+ break;
+ case 'folder':
+ input_wrapper.append('
folder');
+ break;
+ case 'save':
+ input_wrapper.append('
save');
+ break;
}
- let remove_button = $('
clear
');
+ let remove_button = $(
+ '
clear
'
+ );
bar.append(remove_button[0]);
remove_button.on('click', e => {
e.stopPropagation();
@@ -957,47 +1065,59 @@ class FormElementFile extends FormElement {
delete this.content;
delete this.file;
input.val('');
- })
+ });
input_wrapper.on('click', e => {
- const fileCB = (files) => {
+ const fileCB = files => {
this.value = files[0].path;
this.content = files[0].content;
this.file = files[0];
- input.val(settings.streamer_mode.value ? `[${tl('generic.redacted')}]` : this.value);
+ input.val(
+ settings.streamer_mode.value ? `[${tl('generic.redacted')}]` : this.value
+ );
scope.change();
- }
+ };
switch (this.options.type) {
case 'file':
- Blockbench.import({
- resource_id: this.options.resource_id,
- extensions: this.options.extensions,
- type: this.options.filetype,
- startpath: this.value,
- readtype: this.options.readtype
- }, fileCB);
+ Blockbench.import(
+ {
+ resource_id: this.options.resource_id,
+ extensions: this.options.extensions,
+ type: this.options.filetype,
+ startpath: this.value,
+ readtype: this.options.readtype,
+ },
+ fileCB
+ );
break;
case 'folder':
let path = Blockbench.pickDirectory({
startpath: this.value,
- })
- if (path) fileCB([{path}]);
+ });
+ if (path) fileCB([{ path }]);
break;
case 'save':
- Blockbench.export({
- resource_id: this.options.resource_id,
- extensions: this.options.extensions,
- type: this.options.filetype,
- startpath: this.value,
- custom_writer: () => {},
- }, path => {
- this.value = path;
- input.val(settings.streamer_mode.value ? `[${tl('generic.redacted')}]` : this.value);
- scope.change();
- });
+ Blockbench.export(
+ {
+ resource_id: this.options.resource_id,
+ extensions: this.options.extensions,
+ type: this.options.filetype,
+ startpath: this.value,
+ custom_writer: () => {},
+ },
+ path => {
+ this.value = path;
+ input.val(
+ settings.streamer_mode.value
+ ? `[${tl('generic.redacted')}]`
+ : this.value
+ );
+ scope.change();
+ }
+ );
break;
}
- })
+ });
}
getValue(): Filesystem.FileResult | string | any {
if (this.options.return_as == 'file') {
@@ -1016,15 +1136,16 @@ class FormElementFile extends FormElement {
} else {
this.content = value;
}
- $(this.input).val(settings.streamer_mode.value ? `[${tl('generic.redacted')}]` : this.value);
+ $(this.input).val(
+ settings.streamer_mode.value ? `[${tl('generic.redacted')}]` : this.value
+ );
}
getDefault() {
return '';
}
-};
+}
FormElement.types.file = FormElementFile;
FormElement.types.folder = FormElementFile;
FormElement.types.save = FormElementFile;
-
-Object.assign(window, {InputForm, FormElement});
+Object.assign(window, { InputForm, FormElement });
diff --git a/js/interface/panels.ts b/js/interface/panels.ts
index dd6b9cbf7..9655570e3 100644
--- a/js/interface/panels.ts
+++ b/js/interface/panels.ts
@@ -1,70 +1,74 @@
-import { Prop } from "../misc";
-import { EventSystem } from "../util/event_system";
-import { InputForm } from "./form";
-import { Interface, Panels, openTouchKeyboardModifierMenu, resizeWindow, updateInterface } from "./interface";
-import {Toolbar} from './toolbars'
-import { Vue } from "../lib/libs";
-import { Blockbench } from "../api";
+import { Prop } from '../misc';
+import { EventSystem } from '../util/event_system';
+import { InputForm } from './form';
+import {
+ Interface,
+ Panels,
+ openTouchKeyboardModifierMenu,
+ resizeWindow,
+ updateInterface,
+} from './interface';
+import { Toolbar } from './toolbars';
+import { Vue } from '../lib/libs';
+import { Blockbench } from '../api';
interface PanelPositionData {
- slot: PanelSlot
- float_position: [number, number]
- float_size: [number, number]
- height: number
- folded: boolean
- attached_to?: string
- attached_index?: number
- fixed_height: boolean
+ slot: PanelSlot;
+ float_position: [number, number];
+ float_size: [number, number];
+ height: number;
+ folded: boolean;
+ attached_to?: string;
+ attached_index?: number;
+ fixed_height: boolean;
}
-type PanelSlot = 'left_bar' | 'right_bar' | 'top' | 'bottom' | 'float' | 'hidden'
+type PanelSlot = 'left_bar' | 'right_bar' | 'top' | 'bottom' | 'float' | 'hidden';
interface PanelOptions {
- id?: string
- name?: string
- icon: string
- optional?: boolean
- plugin?: string
- min_height?: number
- menu?: any
+ id?: string;
+ name?: string;
+ icon: string;
+ optional?: boolean;
+ plugin?: string;
+ min_height?: number;
+ menu?: any;
/**
* If true, the panel can automatically become smaller or larger than its initial size in the sidebar
*/
- growable?: boolean
+ growable?: boolean;
/**
* When true, the height of the panel can be adjusted in the sidebar
*/
- resizable?: true
- selection_only?: boolean
- condition?: ConditionResolvable
- display_condition?: ConditionResolvable
+ resizable?: true;
+ selection_only?: boolean;
+ condition?: ConditionResolvable;
+ display_condition?: ConditionResolvable;
/**
* Adds a button to the panel that allows users to pop-out and expand the panel on click
*/
- expand_button?: boolean
+ expand_button?: boolean;
toolbars?:
| {
- [id: string]: Toolbar
+ [id: string]: Toolbar;
}
- | Toolbar[]
- default_position?:
- | Partial
- | number
- component?: Vue.Component
- form?: InputForm
- default_side?: 'right' | 'left'
+ | Toolbar[];
+ default_position?: Partial | number;
+ component?: Vue.Component;
+ form?: InputForm;
+ default_side?: 'right' | 'left';
/**
* Identifier of another panel to insert this one above
*/
- insert_before?: string
+ insert_before?: string;
/**
* Identifier of another panel to insert this one below
*/
- insert_after?: string
- onResize?(): void
- onFold?(): void
+ insert_after?: string;
+ onResize?(): void;
+ onFold?(): void;
}
-type PanelEvent = 'drag' | 'fold' | 'change_zindex' | 'move_to' | 'moved_to' | 'update'
+type PanelEvent = 'drag' | 'fold' | 'change_zindex' | 'move_to' | 'moved_to' | 'update';
const DEFAULT_POSITION_DATA: PanelPositionData = {
slot: 'left_bar',
@@ -74,42 +78,42 @@ const DEFAULT_POSITION_DATA: PanelPositionData = {
folded: false,
fixed_height: false,
attached_to: '',
- attached_index: undefined
-}
+ attached_index: undefined,
+};
export class Panel extends EventSystem {
- type: 'panel'
- id: string
- name: string
- icon: string
- menu: Menu
- condition: ConditionResolvable
- display_condition: ConditionResolvable
- resizable?: boolean
- growable: boolean
- min_height?: number
- optional: boolean
- plugin?: string
- onResize: () => void
- onFold: () => void
-
- default_position: PanelPositionData
- previous_slot: PanelSlot
- width: number
- height: number
-
- open_attached_panel: Panel
-
- node: HTMLElement
- container: HTMLElement
- handle: HTMLElement
- tab_bar: HTMLElement
- form?: InputForm
- vue?: Vue
- inside_vue?: Vue
- toolbars: Toolbar[]
- sidebar_resize_handle: HTMLElement
- resize_handles?: HTMLElement
+ type: 'panel';
+ id: string;
+ name: string;
+ icon: string;
+ menu: Menu;
+ condition: ConditionResolvable;
+ display_condition: ConditionResolvable;
+ resizable?: boolean;
+ growable: boolean;
+ min_height?: number;
+ optional: boolean;
+ plugin?: string;
+ onResize: () => void;
+ onFold: () => void;
+
+ default_position: PanelPositionData;
+ previous_slot: PanelSlot;
+ width: number;
+ height: number;
+
+ open_attached_panel: Panel;
+
+ node: HTMLElement;
+ container: HTMLElement;
+ handle: HTMLElement;
+ tab_bar: HTMLElement;
+ form?: InputForm;
+ vue?: Vue;
+ inside_vue?: Vue;
+ toolbars: Toolbar[];
+ sidebar_resize_handle: HTMLElement;
+ resize_handles?: HTMLElement;
constructor(id: string | PanelOptions, data: PanelOptions) {
super();
@@ -125,7 +129,8 @@ export class Panel extends EventSystem {
this.previous_slot = 'left_bar';
this.optional = data.optional ?? true;
// @ts-ignore "Plugins" is loaded after so it cannot be imported
- this.plugin = data.plugin || (typeof Plugins != 'undefined' ? Plugins.currently_loading : '');
+ this.plugin =
+ data.plugin || (typeof Plugins != 'undefined' ? Plugins.currently_loading : '');
this.growable = data.growable;
this.resizable = data.resizable;
@@ -140,20 +145,32 @@ export class Panel extends EventSystem {
if (!Interface.data.panels[this.id]) Interface.data.panels[this.id] = {};
if (!Interface.getModeData().panels[this.id]) Interface.getModeData().panels[this.id] = {};
this.default_position = data.default_position || ({} as any);
- if (this.default_position && this.default_position.slot) this.previous_slot = this.default_position.slot;
- this.updatePositionData({slot: (data.default_side ? (data.default_side+'_bar') : 'left_bar') as PanelSlot});
+ if (this.default_position && this.default_position.slot)
+ this.previous_slot = this.default_position.slot;
+ this.updatePositionData({
+ slot: (data.default_side ? data.default_side + '_bar' : 'left_bar') as PanelSlot,
+ });
for (let mode_id in Interface.data.modes) {
let mode_data = Interface.getModeData(mode_id);
- if (!mode_data.panels[this.id]) mode_data.panels[this.id] = JSON.parse(JSON.stringify(this.position_data));
+ if (!mode_data.panels[this.id])
+ mode_data.panels[this.id] = JSON.parse(JSON.stringify(this.position_data));
}
- this.handle = Interface.createElement('div', {class: 'panel_handle', panel_id: this.id}, Interface.createElement('span', {}, this.name));
- this.node = Interface.createElement('div', {class: 'panel', id: `panel_${this.id}`});
- this.tab_bar = Interface.createElement('div', {class: 'panel_tab_bar'}, [
- Interface.createElement('div', {class: 'panel_tab_list'}, this.handle)
+ this.handle = Interface.createElement(
+ 'div',
+ { class: 'panel_handle', panel_id: this.id },
+ Interface.createElement('span', {}, this.name)
+ );
+ this.node = Interface.createElement('div', { class: 'panel', id: `panel_${this.id}` });
+ this.tab_bar = Interface.createElement('div', { class: 'panel_tab_bar' }, [
+ Interface.createElement('div', { class: 'panel_tab_list' }, this.handle),
]);
- this.container = Interface.createElement('div', {class: 'panel_container', panel_id: this.id}, [this.tab_bar, this.node]);
+ this.container = Interface.createElement(
+ 'div',
+ { class: 'panel_container', panel_id: this.id },
+ [this.tab_bar, this.node]
+ );
this.handle.addEventListener('mousedown', (event: MouseEvent) => {
if (this.attached_to) {
@@ -167,16 +184,25 @@ export class Panel extends EventSystem {
this.container.classList.add('grow');
this.node.classList.add('grow');
}
-
+
// Toolbars
- let toolbars = data.toolbars instanceof Array ? data.toolbars : (data.toolbars ? Object.keys(data.toolbars) : []);
+ let toolbars =
+ data.toolbars instanceof Array
+ ? data.toolbars
+ : data.toolbars
+ ? Object.keys(data.toolbars)
+ : [];
for (let item of toolbars) {
let toolbar = item instanceof Toolbar ? item : this.toolbars[item];
if (toolbar instanceof Toolbar == false) continue;
if (toolbar.label) {
- let label = Interface.createElement('p', {class: 'panel_toolbar_label'}, tl(toolbar.name));
+ let label = Interface.createElement(
+ 'p',
+ { class: 'panel_toolbar_label' },
+ tl(toolbar.name)
+ );
this.node.append(label);
toolbar.label_node = label;
}
@@ -186,18 +212,15 @@ export class Panel extends EventSystem {
if (data.form) {
this.form = data.form instanceof InputForm ? data.form : new InputForm(data.form);
- this.node.append(this.form.node),
- this.form.buildForm();
+ (this.node.append(this.form.node), this.form.buildForm());
}
if (data.component) {
-
let component_mount = Interface.createElement('div');
this.node.append(component_mount);
let onmounted = data.component.mounted;
- data.component.mounted = function() {
+ data.component.mounted = function () {
Vue.nextTick(() => {
-
let toolbar_wrappers = this.$el.querySelectorAll('.toolbar_wrapper');
toolbar_wrappers.forEach((wrapper: HTMLElement) => {
let id = wrapper.getAttribute('toolbar');
@@ -205,51 +228,65 @@ export class Panel extends EventSystem {
if (toolbar) {
wrapper.append(toolbar.node);
}
- })
+ });
if (typeof onmounted == 'function') {
onmounted.call(this);
}
//updateInterfacePanels()
- })
- }
- this.vue = this.inside_vue = new Vue(data.component)
+ });
+ };
+ this.vue = this.inside_vue = new Vue(data.component);
this.vue.$mount(component_mount);
this.vue.$el.classList.add('panel_vue_wrapper');
}
if (!Blockbench.isMobile) {
if (data.expand_button) {
- let expand_button = Interface.createElement('div', {class: 'tool panel_control panel_expanding_button'}, Blockbench.getIconNode('fullscreen'))
+ let expand_button = Interface.createElement(
+ 'div',
+ { class: 'tool panel_control panel_expanding_button' },
+ Blockbench.getIconNode('fullscreen')
+ );
this.tab_bar.append(expand_button);
- expand_button.addEventListener('click', (e) => {
+ expand_button.addEventListener('click', e => {
if (this.slot == 'float') {
this.moveTo(this.previous_slot);
} else {
this.moveTo('float');
this.moveToFront();
}
- })
+ });
}
- let menu_button = Interface.createElement('div', {class: 'light_on_hover panel_menu_button'}, Blockbench.getIconNode('more_vert'))
+ let menu_button = Interface.createElement(
+ 'div',
+ { class: 'light_on_hover panel_menu_button' },
+ Blockbench.getIconNode('more_vert')
+ );
this.handle.append(menu_button);
- menu_button.addEventListener('click', (e) => {
+ menu_button.addEventListener('click', e => {
this.snap_menu.open(menu_button, this);
- })
+ });
- let fold_button = Interface.createElement('div', {class: 'tool panel_control panel_folding_button'}, Blockbench.getIconNode('expand_more'))
+ let fold_button = Interface.createElement(
+ 'div',
+ { class: 'tool panel_control panel_folding_button' },
+ Blockbench.getIconNode('expand_more')
+ );
this.tab_bar.append(fold_button);
- fold_button.addEventListener('click', (e) => {
+ fold_button.addEventListener('click', e => {
this.fold();
- })
+ });
this.tab_bar.firstElementChild.addEventListener('dblclick', e => {
this.fold();
- })
+ });
if (this.resizable) {
- this.sidebar_resize_handle = Interface.createElement('div', {class: 'panel_sidebar_resize_handle'})
+ this.sidebar_resize_handle = Interface.createElement('div', {
+ class: 'panel_sidebar_resize_handle',
+ });
this.container.append(this.sidebar_resize_handle);
let resize = (e1: MouseEvent | TouchEvent) => {
e1 = convertTouchEvent(e1);
@@ -258,13 +295,21 @@ export class Panel extends EventSystem {
let direction = this.container.classList.contains('bottommost_panel') ? -1 : 1;
let other_panel_height_before = {};
- let other_panels = this.slot == 'right_bar' ? Interface.getRightPanels() : Interface.getLeftPanels();
+ let other_panels =
+ this.slot == 'right_bar'
+ ? Interface.getRightPanels()
+ : Interface.getLeftPanels();
e1.preventDefault();
let drag = (e2: MouseEvent | TouchEvent) => {
e2 = convertTouchEvent(e2);
- if (!started && (Math.pow(e2.clientX - e1.clientX, 2) + Math.pow(e2.clientY - e1.clientY, 2)) > 12) {
+ if (
+ !started &&
+ Math.pow(e2.clientX - e1.clientX, 2) +
+ Math.pow(e2.clientY - e1.clientY, 2) >
+ 12
+ ) {
started = true;
this.sidebar_resize_handle.classList.add('dragging');
}
@@ -278,32 +323,47 @@ export class Panel extends EventSystem {
let height1 = this.position_data.height;
this.position_data.fixed_height = true;
- this.position_data.height = Math.max(height_before + change_amount, this.min_height);
+ this.position_data.height = Math.max(
+ height_before + change_amount,
+ this.min_height
+ );
this.update();
let height_difference = this.position_data.height - height1;
- let panel_b = other_panels.find(p => p != this && p.resizable && p.min_height < (p.height??p.container.clientHeight));
+ let panel_b = other_panels.find(
+ p =>
+ p != this &&
+ p.resizable &&
+ p.min_height < (p.height ?? p.container.clientHeight)
+ );
if (sidebar_gap < 1 && panel_b && change_amount > 0) {
- if (!other_panel_height_before[panel_b.id]) other_panel_height_before[panel_b.id] = (panel_b.height??panel_b.container.clientHeight);
+ if (!other_panel_height_before[panel_b.id])
+ other_panel_height_before[panel_b.id] =
+ panel_b.height ?? panel_b.container.clientHeight;
panel_b.position_data.fixed_height = true;
- panel_b.position_data.height = Math.max(panel_b.position_data.height - height_difference, this.min_height);
+ panel_b.position_data.height = Math.max(
+ panel_b.position_data.height - height_difference,
+ this.min_height
+ );
panel_b.update();
}
- }
+ };
let stop = e2 => {
convertTouchEvent(e2);
-
+
removeEventListeners(document, 'mousemove touchmove', drag);
removeEventListeners(document, 'mouseup touchend', stop);
this.sidebar_resize_handle.classList.remove('dragging');
- }
+ };
addEventListeners(document, 'mousemove touchmove', drag);
addEventListeners(document, 'mouseup touchend', stop);
- }
- addEventListeners(this.sidebar_resize_handle, 'mousedown touchstart', (event) => resize(event as MouseEvent));
+ };
+ addEventListeners(this.sidebar_resize_handle, 'mousedown touchstart', event =>
+ resize(event as MouseEvent)
+ );
}
- let getHostPanelUnderCursor: (event: MouseEvent) => Panel | undefined = (event) => {
+ let getHostPanelUnderCursor: (event: MouseEvent) => Panel | undefined = event => {
for (let panel_id in Panels) {
let panel: Panel = Panels[panel_id];
if (panel != this && panel.container.isConnected) {
@@ -316,16 +376,21 @@ export class Panel extends EventSystem {
}
}
}
- }
+ };
addEventListeners(this.handle, 'mousedown touchstart', (e1: MouseEvent) => {
- if (e1.target instanceof HTMLElement && e1.target.classList.contains('panel_menu_button')) return;
+ if (
+ e1.target instanceof HTMLElement &&
+ e1.target.classList.contains('panel_menu_button')
+ )
+ return;
if (e1.which == 2 || e1.which == 3) return;
convertTouchEvent(e1);
let started = false;
- let position_before = this.slot == 'float'
- ? this.position_data.float_position.slice()
- : [e1.clientX - e1.offsetX, e1.clientY - e1.offsetY - 55];
+ let position_before =
+ this.slot == 'float'
+ ? this.position_data.float_position.slice()
+ : [e1.clientX - e1.offsetX, e1.clientY - e1.offsetY - 55];
let original_show_left_bar = Prop.show_left_bar;
let original_show_right_bar = Prop.show_right_bar;
@@ -341,15 +406,26 @@ export class Panel extends EventSystem {
if (attach_to && target_panel) {
target_panel.container.classList.add('attach_target');
let panel_container_offset = $(target_panel.container).offset()?.left ?? 0;
- let attached_panels = [target_panel].concat(target_panel.getAttachedPanels());
- let target_handle_panel = attached_panels.findLast(handle_panel => {
- return event.clientX + 20 > panel_container_offset + handle_panel.handle.offsetLeft + handle_panel.handle.clientWidth;
- }) ?? attached_panels[0];
+ let attached_panels = [target_panel].concat(
+ target_panel.getAttachedPanels()
+ );
+ let target_handle_panel =
+ attached_panels.findLast(handle_panel => {
+ return (
+ event.clientX + 20 >
+ panel_container_offset +
+ handle_panel.handle.offsetLeft +
+ handle_panel.handle.clientWidth
+ );
+ }) ?? attached_panels[0];
if (target_handle_panel) {
target_handle_panel.handle.setAttribute('order', '1');
}
} else if (target_panel) {
- target_panel.container.setAttribute('order', (target_before ? -1 : 1).toString());
+ target_panel.container.setAttribute(
+ 'order',
+ (target_before ? -1 : 1).toString()
+ );
}
if (target_slot) {
@@ -357,21 +433,37 @@ export class Panel extends EventSystem {
} else {
Interface.center_screen.removeAttribute('snapside');
}
- if ((target_slot == 'right_bar' && Interface.right_bar_width) || (target_slot == 'left_bar' && Interface.left_bar_width)) {
+ if (
+ (target_slot == 'right_bar' && Interface.right_bar_width) ||
+ (target_slot == 'left_bar' && Interface.left_bar_width)
+ ) {
Interface.center_screen.removeAttribute('snapside');
}
Interface.left_bar.classList.toggle('drop_target', target_slot == 'left_bar');
Interface.right_bar.classList.toggle('drop_target', target_slot == 'right_bar');
- if (target_slot == 'left_bar' && !Prop.show_left_bar) Interface.toggleSidebar('left');
- if (target_slot == 'right_bar' && !Prop.show_right_bar) Interface.toggleSidebar('right');
- if (target_slot != 'left_bar' && Prop.show_left_bar && !original_show_left_bar) Interface.toggleSidebar('left');
- if (target_slot != 'right_bar' && Prop.show_right_bar && !original_show_right_bar) Interface.toggleSidebar('right');
+ if (target_slot == 'left_bar' && !Prop.show_left_bar)
+ Interface.toggleSidebar('left');
+ if (target_slot == 'right_bar' && !Prop.show_right_bar)
+ Interface.toggleSidebar('right');
+ if (target_slot != 'left_bar' && Prop.show_left_bar && !original_show_left_bar)
+ Interface.toggleSidebar('left');
+ if (
+ target_slot != 'right_bar' &&
+ Prop.show_right_bar &&
+ !original_show_right_bar
+ )
+ Interface.toggleSidebar('right');
}
let drag = e2 => {
convertTouchEvent(e2);
- if (!started && (Math.pow(e2.clientX - e1.clientX, 2) + Math.pow(e2.clientY - e1.clientY, 2)) > 15) {
+ if (
+ !started &&
+ Math.pow(e2.clientX - e1.clientX, 2) +
+ Math.pow(e2.clientY - e1.clientY, 2) >
+ 15
+ ) {
started = true;
let attached_panels = this.getAttachedPanels();
if (attached_panels.length && !move_attached_panels) {
@@ -387,69 +479,85 @@ export class Panel extends EventSystem {
}
this.node.classList.add('dragging');
- Interface.addSuggestedModifierKey('ctrl', 'modifier_actions.move_panel_without_docking');
+ Interface.addSuggestedModifierKey(
+ 'ctrl',
+ 'modifier_actions.move_panel_without_docking'
+ );
}
if (!started) return;
-
- this.position_data.float_position[0] = position_before[0] + e2.clientX - e1.clientX;
- this.position_data.float_position[1] = position_before[1] + e2.clientY - e1.clientY;
+
+ this.position_data.float_position[0] =
+ position_before[0] + e2.clientX - e1.clientX;
+ this.position_data.float_position[1] =
+ position_before[1] + e2.clientY - e1.clientY;
let threshold = 40;
let threshold_y = 64;
let host_target_panel;
- target_slot = null; target_panel = null; target_before = false; attach_to = false;
+ target_slot = null;
+ target_panel = null;
+ target_before = false;
+ attach_to = false;
if (e2.ctrlOrCmd) {
- } else if (host_target_panel = getHostPanelUnderCursor(e2)) {
+ } else if ((host_target_panel = getHostPanelUnderCursor(e2))) {
target_panel = host_target_panel;
attach_to = true;
target_slot = undefined;
-
} else if (e2.clientX < Math.max(Interface.left_bar_width, threshold)) {
-
target_slot = 'left_bar';
for (let child of Interface.left_bar.childNodes) {
if (!child.clientHeight) continue;
let y = $(child).offset()?.top;
if (!y) continue;
target_panel = Panels[child.getAttribute('panel_id')];
- if (e2.clientY < (y + child.clientHeight / 2)) {
+ if (e2.clientY < y + child.clientHeight / 2) {
target_before = true;
break;
}
}
-
- } else if (e2.clientX > document.body.clientWidth - Math.max(Interface.right_bar_width, threshold)) {
-
+ } else if (
+ e2.clientX >
+ document.body.clientWidth - Math.max(Interface.right_bar_width, threshold)
+ ) {
target_slot = 'right_bar';
for (let child of Interface.right_bar.childNodes) {
if (!child.clientHeight) continue;
let y = $(child).offset()?.top;
if (!y) continue;
target_panel = Panels[child.getAttribute('panel_id')];
- if (e2.clientY < (y + child.clientHeight / 2)) {
+ if (e2.clientY < y + child.clientHeight / 2) {
target_before = true;
break;
}
}
-
} else if (
- e2.clientY < (Interface.work_screen.offsetTop + 30 + threshold_y) &&
- e2.clientX > Interface.left_bar_width && e2.clientX < (Interface.work_screen.clientWidth - Interface.right_bar_width)
+ e2.clientY < Interface.work_screen.offsetTop + 30 + threshold_y &&
+ e2.clientX > Interface.left_bar_width &&
+ e2.clientX < Interface.work_screen.clientWidth - Interface.right_bar_width
) {
- target_slot = 'top'
-
+ target_slot = 'top';
} else if (
- e2.clientY > Interface.work_screen.offsetTop + Interface.work_screen.clientHeight - Interface.status_bar.vue.$el.clientHeight - threshold_y &&
- e2.clientX > Interface.left_bar_width && e2.clientX < (Interface.work_screen.clientWidth - Interface.right_bar_width)
+ e2.clientY >
+ Interface.work_screen.offsetTop +
+ Interface.work_screen.clientHeight -
+ Interface.status_bar.vue.$el.clientHeight -
+ threshold_y &&
+ e2.clientX > Interface.left_bar_width &&
+ e2.clientX < Interface.work_screen.clientWidth - Interface.right_bar_width
) {
- target_slot = 'bottom'
-
+ target_slot = 'bottom';
}
updateTargetHighlight(e2);
this.update(true);
- this.dispatchEvent('drag', {event: e2, target_before, attach_to, target_panel, target_slot});
- }
+ this.dispatchEvent('drag', {
+ event: e2,
+ target_before,
+ attach_to,
+ target_panel,
+ target_slot,
+ });
+ };
let stop = e2 => {
convertTouchEvent(e2);
this.node.classList.remove('dragging');
@@ -458,15 +566,18 @@ export class Panel extends EventSystem {
Interface.left_bar.classList.remove('drop_target');
Interface.right_bar.classList.remove('drop_target');
$(`.panel_container.attach_target`).removeClass('attach_target');
-
- Interface.removeSuggestedModifierKey('ctrl', 'modifier_actions.move_panel_without_docking');
+
+ Interface.removeSuggestedModifierKey(
+ 'ctrl',
+ 'modifier_actions.move_panel_without_docking'
+ );
if (attach_to) {
this.fixed_height = false;
target_panel.attachPanel(this);
} else if (target_slot) {
this.fixed_height = false;
- this.moveTo(target_slot, target_panel, target_before)
+ this.moveTo(target_slot, target_panel, target_before);
}
if (this.slot != 'float') {
@@ -475,72 +586,90 @@ export class Panel extends EventSystem {
}
this.update();
updateInterface();
-
+
removeEventListeners(document, 'mousemove touchmove', drag);
removeEventListeners(document, 'mouseup touchend', stop);
- }
+ };
addEventListeners(document, 'mousemove touchmove', drag);
addEventListeners(document, 'mouseup touchend', stop);
-
- })
- } else {
-
- let close_button = Interface.createElement('div', {class: 'tool panel_control'}, Blockbench.getIconNode('clear'))
+ });
+ } else {
+ let close_button = Interface.createElement(
+ 'div',
+ { class: 'tool panel_control' },
+ Blockbench.getIconNode('clear')
+ );
this.tab_bar.append(close_button);
- close_button.addEventListener('click', (e) => {
+ close_button.addEventListener('click', e => {
Interface.PanelSelectorVue.select(null);
- })
+ });
this.tab_bar.classList.add('single_tab');
-
- addEventListeners(this.handle.firstElementChild as HTMLElement, 'mousedown touchstart', (e1: MouseEvent) => {
- convertTouchEvent(e1);
- let started = false;
- let height_before = this.position_data.height;
- let max = Blockbench.isLandscape ? window.innerWidth - 50 : Interface.work_screen.clientHeight;
+ addEventListeners(
+ this.handle.firstElementChild as HTMLElement,
+ 'mousedown touchstart',
+ (e1: MouseEvent) => {
+ convertTouchEvent(e1);
+ let started = false;
+ let height_before = this.position_data.height;
+ let max = Blockbench.isLandscape
+ ? window.innerWidth - 50
+ : Interface.work_screen.clientHeight;
- let drag = e2 => {
- convertTouchEvent(e2);
- let diff = Blockbench.isLandscape ? e1.clientX - e2.clientX : e1.clientY - e2.clientY;
- if (!started && Math.abs(diff) > 4) {
- started = true;
- if (this.folded) this.fold();
- }
- if (!started) return;
-
- let sign = (Blockbench.isLandscape && settings.mobile_panel_side.value == 'left') ? -1 : 1;
- this.position_data.height = Math.clamp(height_before + diff * sign, 140, max);
+ let drag = e2 => {
+ convertTouchEvent(e2);
+ let diff = Blockbench.isLandscape
+ ? e1.clientX - e2.clientX
+ : e1.clientY - e2.clientY;
+ if (!started && Math.abs(diff) > 4) {
+ started = true;
+ if (this.folded) this.fold();
+ }
+ if (!started) return;
- this.update(true);
- resizeWindow();
+ let sign =
+ Blockbench.isLandscape && settings.mobile_panel_side.value == 'left'
+ ? -1
+ : 1;
+ this.position_data.height = Math.clamp(
+ height_before + diff * sign,
+ 140,
+ max
+ );
+
+ this.update(true);
+ resizeWindow();
+ };
+ let stop = e2 => {
+ convertTouchEvent(e2);
- }
- let stop = e2 => {
- convertTouchEvent(e2);
+ this.update();
- this.update();
-
- removeEventListeners(document, 'mousemove touchmove', drag);
- removeEventListeners(document, 'mouseup touchend', stop);
+ removeEventListeners(document, 'mousemove touchmove', drag);
+ removeEventListeners(document, 'mouseup touchend', stop);
+ };
+ addEventListeners(document, 'mousemove touchmove', drag);
+ addEventListeners(document, 'mouseup touchend', stop);
}
- addEventListeners(document, 'mousemove touchmove', drag);
- addEventListeners(document, 'mouseup touchend', stop);
-
- })
+ );
}
this.node.addEventListener('mousedown', event => {
setActivePanel(this.id);
this.moveToFront();
- })
+ });
this.handle.addEventListener('mousedown', event => {
setActivePanel(this.id);
this.moveToFront();
- })
-
+ });
+
// Add to slot
if (!Blockbench.isMobile && !this.attached_to) {
let reference_panel = Panels[data.insert_before || data.insert_after];
- this.moveTo(this.position_data.slot, reference_panel, reference_panel && !data.insert_after);
+ this.moveTo(
+ this.position_data.slot,
+ reference_panel,
+ reference_panel && !data.insert_after
+ );
}
if (this.folded) this.fold(true);
@@ -548,7 +677,11 @@ export class Panel extends EventSystem {
Panels[this.id] = this;
}
isVisible() {
- return !this.folded && this.node.parentElement && this.node.parentElement.style.display !== 'none';
+ return (
+ !this.folded &&
+ this.node.parentElement &&
+ this.node.parentElement.style.display !== 'none'
+ );
}
isInSidebar() {
return this.slot === 'left_bar' || this.slot === 'right_bar';
@@ -591,9 +724,10 @@ export class Panel extends EventSystem {
let position_data = this.position_data;
for (let key in DEFAULT_POSITION_DATA) {
if (position_data[key] == undefined) {
- position_data[key] = this.default_position[key]
- ?? data[key]
- ?? structuredClone(DEFAULT_POSITION_DATA[key]);
+ position_data[key] =
+ this.default_position[key] ??
+ data[key] ??
+ structuredClone(DEFAULT_POSITION_DATA[key]);
}
}
}
@@ -611,7 +745,7 @@ export class Panel extends EventSystem {
/**
* Get the host panel if this panel is attached to another panel
*/
- getHostPanel(): Panel|undefined {
+ getHostPanel(): Panel | undefined {
return Panels[this.attached_to];
}
/**
@@ -629,9 +763,9 @@ export class Panel extends EventSystem {
if (old_host_panel) {
old_host_panel.update();
}
- updateInterfacePanels()
+ updateInterfacePanels();
}
- selectTab(panel: Panel = this): this{
+ selectTab(panel: Panel = this): this {
if (this.open_attached_panel != panel) {
this.open_attached_panel = panel;
this.update();
@@ -645,7 +779,8 @@ export class Panel extends EventSystem {
for (let mode_id in Interface.data.modes) {
let mode_data = Interface.getModeData(mode_id);
- if (!mode_data.panels[this.id]) mode_data.panels[this.id] = JSON.parse(JSON.stringify(this.position_data));
+ if (!mode_data.panels[this.id])
+ mode_data.panels[this.id] = JSON.parse(JSON.stringify(this.position_data));
}
this.moveTo(this.slot);
this.fold(this.folded);
@@ -654,13 +789,17 @@ export class Panel extends EventSystem {
addToolbar(toolbar: Toolbar, position = this.toolbars.length): void {
let nodes = [];
if (toolbar.label) {
- let label = Interface.createElement('p', {class: 'panel_toolbar_label'}, tl(toolbar.name));
+ let label = Interface.createElement(
+ 'p',
+ { class: 'panel_toolbar_label' },
+ tl(toolbar.name)
+ );
nodes.push(label);
toolbar.label_node = label;
}
nodes.push(toolbar.node);
if (position == 0) {
- this.node.prepend(...nodes)
+ this.node.prepend(...nodes);
} else if (typeof position == 'string') {
let anchor = this.node.querySelector(`.toolbar[toolbar_id="${position}"]`);
if (anchor) {
@@ -688,16 +827,16 @@ export class Panel extends EventSystem {
}
setupFloatHandles(): this {
let sides = [
- Interface.createElement('div', {class: 'panel_resize_side resize_top'}),
- Interface.createElement('div', {class: 'panel_resize_side resize_bottom'}),
- Interface.createElement('div', {class: 'panel_resize_side resize_left'}),
- Interface.createElement('div', {class: 'panel_resize_side resize_right'}),
+ Interface.createElement('div', { class: 'panel_resize_side resize_top' }),
+ Interface.createElement('div', { class: 'panel_resize_side resize_bottom' }),
+ Interface.createElement('div', { class: 'panel_resize_side resize_left' }),
+ Interface.createElement('div', { class: 'panel_resize_side resize_right' }),
];
let corners = [
- Interface.createElement('div', {class: 'panel_resize_corner resize_top_left'}),
- Interface.createElement('div', {class: 'panel_resize_corner resize_top_right'}),
- Interface.createElement('div', {class: 'panel_resize_corner resize_bottom_left'}),
- Interface.createElement('div', {class: 'panel_resize_corner resize_bottom_right'}),
+ Interface.createElement('div', { class: 'panel_resize_corner resize_top_left' }),
+ Interface.createElement('div', { class: 'panel_resize_corner resize_top_right' }),
+ Interface.createElement('div', { class: 'panel_resize_corner resize_bottom_left' }),
+ Interface.createElement('div', { class: 'panel_resize_corner resize_bottom_right' }),
];
let resize = (e1, direction_x, direction_y) => {
let position_before = this.position_data.float_position.slice();
@@ -706,38 +845,50 @@ export class Panel extends EventSystem {
let drag = e2 => {
convertTouchEvent(e2);
- if (!started && (Math.pow(e2.clientX - e1.clientX, 2) + Math.pow(e2.clientY - e1.clientY, 2)) > 12) {
+ if (
+ !started &&
+ Math.pow(e2.clientX - e1.clientX, 2) + Math.pow(e2.clientY - e1.clientY, 2) > 12
+ ) {
started = true;
}
if (!started) return;
- this.position_data.float_size[0] = size_before[0] + (e2.clientX - e1.clientX) * direction_x;
- this.position_data.float_size[1] = size_before[1] + (e2.clientY - e1.clientY) * direction_y;
+ this.position_data.float_size[0] =
+ size_before[0] + (e2.clientX - e1.clientX) * direction_x;
+ this.position_data.float_size[1] =
+ size_before[1] + (e2.clientY - e1.clientY) * direction_y;
- if (direction_x == -1) this.position_data.float_position[0] = position_before[0] - this.position_data.float_size[0] + size_before[0];
- if (direction_y == -1) this.position_data.float_position[1] = position_before[1] - this.position_data.float_size[1] + size_before[1];
+ if (direction_x == -1)
+ this.position_data.float_position[0] =
+ position_before[0] - this.position_data.float_size[0] + size_before[0];
+ if (direction_y == -1)
+ this.position_data.float_position[1] =
+ position_before[1] - this.position_data.float_size[1] + size_before[1];
this.update();
- }
+ };
let stop = e2 => {
convertTouchEvent(e2);
-
+
removeEventListeners(document, 'mousemove touchmove', drag);
removeEventListeners(document, 'mouseup touchend', stop);
- }
+ };
addEventListeners(document, 'mousemove touchmove', drag);
addEventListeners(document, 'mouseup touchend', stop);
- }
- addEventListeners(sides[0], 'mousedown touchstart', (event) => resize(event, 0, -1));
- addEventListeners(sides[1], 'mousedown touchstart', (event) => resize(event, 0, 1));
- addEventListeners(sides[2], 'mousedown touchstart', (event) => resize(event, -1, 0));
- addEventListeners(sides[3], 'mousedown touchstart', (event) => resize(event, 1, 0));
- addEventListeners(corners[0], 'mousedown touchstart', (event) => resize(event, -1, -1));
- addEventListeners(corners[1], 'mousedown touchstart', (event) => resize(event, 1, -1));
- addEventListeners(corners[2], 'mousedown touchstart', (event) => resize(event, -1, 1));
- addEventListeners(corners[3], 'mousedown touchstart', (event) => resize(event, 1, 1));
-
- let handles = Interface.createElement('div', {class: 'panel_resize_handle_wrapper'}, [...sides, ...corners]);
+ };
+ addEventListeners(sides[0], 'mousedown touchstart', event => resize(event, 0, -1));
+ addEventListeners(sides[1], 'mousedown touchstart', event => resize(event, 0, 1));
+ addEventListeners(sides[2], 'mousedown touchstart', event => resize(event, -1, 0));
+ addEventListeners(sides[3], 'mousedown touchstart', event => resize(event, 1, 0));
+ addEventListeners(corners[0], 'mousedown touchstart', event => resize(event, -1, -1));
+ addEventListeners(corners[1], 'mousedown touchstart', event => resize(event, 1, -1));
+ addEventListeners(corners[2], 'mousedown touchstart', event => resize(event, -1, 1));
+ addEventListeners(corners[3], 'mousedown touchstart', event => resize(event, 1, 1));
+
+ let handles = Interface.createElement('div', { class: 'panel_resize_handle_wrapper' }, [
+ ...sides,
+ ...corners,
+ ]);
this.container.append(handles);
this.resize_handles = handles;
return this;
@@ -750,9 +901,9 @@ export class Panel extends EventSystem {
Panel.floating_panel_z_order.forEach(id => {
let panel = Panels[id];
panel.container.style.zIndex = zindex;
- panel.dispatchEvent('change_zindex', {zindex});
- zindex = Math.clamp(zindex-1, 14, 19);
- })
+ panel.dispatchEvent('change_zindex', { zindex });
+ zindex = Math.clamp(zindex - 1, 14, 19);
+ });
}
return this;
}
@@ -770,20 +921,27 @@ export class Panel extends EventSystem {
this.position_data.attached_index = 0;
this.container.append(this.node);
- this.dispatchEvent('move_to', {slot, ref_panel, before, previous_slot: this.previous_slot});
+ this.dispatchEvent('move_to', {
+ slot,
+ ref_panel,
+ before,
+ previous_slot: this.previous_slot,
+ });
this.node.classList.remove('floating');
if (slot == 'left_bar' || slot == 'right_bar') {
let change_panel_order = !!ref_panel;
if (!ref_panel && Interface.getModeData()[slot].includes(this.id)) {
- let panels = Interface.getModeData()[slot].filter(id => Panels[id] && Panels[id].slot == slot || id == this.id);
+ let panels = Interface.getModeData()[slot].filter(
+ id => (Panels[id] && Panels[id].slot == slot) || id == this.id
+ );
let index = panels.indexOf(this.id);
if (index == 0) {
ref_panel = Panels[panels[1]];
before = true;
} else {
- ref_panel = Panels[panels[index-1]];
+ ref_panel = Panels[panels[index - 1]];
before = false;
}
}
@@ -796,31 +954,40 @@ export class Panel extends EventSystem {
}
if (change_panel_order) {
Interface.getModeData()[slot].remove(this.id);
- Interface.getModeData()[slot].splice(Interface.getModeData()[slot].indexOf(ref_panel.id) + (before ? 0 : 1), 0, this.id);
+ Interface.getModeData()[slot].splice(
+ Interface.getModeData()[slot].indexOf(ref_panel.id) + (before ? 0 : 1),
+ 0,
+ this.id
+ );
}
} else {
document.getElementById(slot)!.append(this.container);
Interface.getModeData()[slot].safePush(this.id);
}
-
} else if (slot == 'top') {
let top_panel = Interface.getTopPanel();
- if (top_panel && top_panel !== this && !Condition.mutuallyExclusive(this.condition, top_panel.condition)) {
+ if (
+ top_panel &&
+ top_panel !== this &&
+ !Condition.mutuallyExclusive(this.condition, top_panel.condition)
+ ) {
top_panel.moveTo(top_panel.previous_slot);
}
document.getElementById('top_slot')!.append(this.container);
-
} else if (slot == 'bottom') {
let bottom_panel = Interface.getBottomPanel();
- if (bottom_panel && bottom_panel !== this && !Condition.mutuallyExclusive(this.condition, bottom_panel.condition)) {
+ if (
+ bottom_panel &&
+ bottom_panel !== this &&
+ !Condition.mutuallyExclusive(this.condition, bottom_panel.condition)
+ ) {
bottom_panel.moveTo(bottom_panel.previous_slot);
}
document.getElementById('bottom_slot')!.append(this.container);
-
} else if (slot == 'float' && !Blockbench.isMobile) {
Interface.work_screen.append(this.container);
this.node.classList.add('floating');
- this.dispatchEvent('change_zindex', {zindex: 14});
+ this.dispatchEvent('change_zindex', { zindex: 14 });
if (!this.resize_handles) {
this.setupFloatHandles();
}
@@ -830,13 +997,18 @@ export class Panel extends EventSystem {
if (slot !== 'float') {
Panel.floating_panel_z_order.remove(this.id);
this.node.style.zIndex = '';
- this.dispatchEvent('change_zindex', {zindex: null});
+ this.dispatchEvent('change_zindex', { zindex: null });
}
position_data.slot = slot;
-
+
this.updateSlot();
if (Panels[this.id]) {
- this.dispatchEvent('moved_to', {slot, ref_panel, before, previous_slot: this.previous_slot});
+ this.dispatchEvent('moved_to', {
+ slot,
+ ref_panel,
+ before,
+ previous_slot: this.previous_slot,
+ });
}
return this;
}
@@ -846,20 +1018,16 @@ export class Panel extends EventSystem {
this.container.classList.remove('floating');
if (slot == 'left_bar' || slot == 'right_bar') {
-
document.getElementById(slot)!.append(this.container);
Interface.getModeData()[slot].safePush(this.id);
-
} else if (slot == 'top') {
document.getElementById('top_slot')!.append(this.container);
-
} else if (slot == 'bottom') {
document.getElementById('bottom_slot')!.append(this.container);
-
} else if (slot == 'float' && !Blockbench.isMobile) {
Interface.work_screen.append(this.container);
this.container.classList.add('floating');
- this.dispatchEvent('change_zindex', {zindex: 14});
+ this.dispatchEvent('change_zindex', { zindex: 14 });
if (!this.resize_handles) {
this.setupFloatHandles();
}
@@ -869,7 +1037,7 @@ export class Panel extends EventSystem {
if (slot !== 'float') {
Panel.floating_panel_z_order.remove(this.id);
this.container.style.zIndex = '';
- this.dispatchEvent('change_zindex', {zindex: null});
+ this.dispatchEvent('change_zindex', { zindex: null });
}
if (this.folded != this.container.classList.contains('folded')) {
this.folded = !!this.folded;
@@ -880,7 +1048,7 @@ export class Panel extends EventSystem {
this.onFold();
}
}
-
+
this.update();
if (Panels[this.id]) {
@@ -903,14 +1071,30 @@ export class Panel extends EventSystem {
this.node.classList.remove('attached');
if (slot == 'float') {
if (!dragging && work_screen.clientWidth) {
- this.position_data.float_position[0] = Math.clamp(this.position_data.float_position[0], 0, work_screen.clientWidth - this.width);
- this.position_data.float_position[1] = Math.clamp(this.position_data.float_position[1], 0, work_screen.clientHeight - this.height);
- this.position_data.float_size[0] = Math.clamp(this.position_data.float_size[0], 200, work_screen.clientWidth - this.position_data.float_position[0]);
- this.position_data.float_size[1] = Math.clamp(this.position_data.float_size[1], 86, work_screen.clientHeight - this.position_data.float_position[1]);
+ this.position_data.float_position[0] = Math.clamp(
+ this.position_data.float_position[0],
+ 0,
+ work_screen.clientWidth - this.width
+ );
+ this.position_data.float_position[1] = Math.clamp(
+ this.position_data.float_position[1],
+ 0,
+ work_screen.clientHeight - this.height
+ );
+ this.position_data.float_size[0] = Math.clamp(
+ this.position_data.float_size[0],
+ 200,
+ work_screen.clientWidth - this.position_data.float_position[0]
+ );
+ this.position_data.float_size[1] = Math.clamp(
+ this.position_data.float_size[1],
+ 86,
+ work_screen.clientHeight - this.position_data.float_position[1]
+ );
}
this.container.style.left = this.position_data.float_position[0] + 'px';
this.container.style.top = this.position_data.float_position[1] + 'px';
- this.width = this.position_data.float_size[0];
+ this.width = this.position_data.float_size[0];
this.height = this.position_data.float_size[1];
if (this.folded) this.height = this.tab_bar.clientHeight;
this.container.style.width = this.width + 'px';
@@ -918,7 +1102,10 @@ export class Panel extends EventSystem {
this.container.classList.remove('bottommost_panel');
this.container.classList.remove('topmost_panel');
} else {
- this.container.style.width = this.container.style.left = this.container.style.top = null;
+ this.container.style.width =
+ this.container.style.left =
+ this.container.style.top =
+ null;
}
if (Blockbench.isMobile) {
this.width = this.container.clientWidth;
@@ -928,16 +1115,27 @@ export class Panel extends EventSystem {
this.width = Interface.right_bar_width;
}
if (slot == 'top' || slot == 'bottom') {
-
if (Blockbench.isMobile && Blockbench.isLandscape) {
this.height = center_screen.clientHeight;
- this.width = Math.clamp(this.position_data.height, 30, center_screen.clientWidth);
+ this.width = Math.clamp(
+ this.position_data.height,
+ 30,
+ center_screen.clientWidth
+ );
if (this.folded) this.width = 72;
} else {
- let opposite_panel = slot == 'top' ? Interface.getBottomPanel() : Interface.getTopPanel();
- this.height = Math.clamp(this.position_data.height, 30, center_screen.clientHeight - (opposite_panel ? opposite_panel.height : 0));
+ let opposite_panel =
+ slot == 'top' ? Interface.getBottomPanel() : Interface.getTopPanel();
+ this.height = Math.clamp(
+ this.position_data.height,
+ 30,
+ center_screen.clientHeight - (opposite_panel ? opposite_panel.height : 0)
+ );
if (this.folded) this.height = this.tab_bar.clientHeight;
- this.width = Interface.work_screen.clientWidth - Interface.left_bar_width - Interface.right_bar_width;
+ this.width =
+ Interface.work_screen.clientWidth -
+ Interface.left_bar_width -
+ Interface.right_bar_width;
}
this.container.style.width = this.width + 'px';
this.container.style.height = this.height + 'px';
@@ -946,7 +1144,11 @@ export class Panel extends EventSystem {
//let other_panels = slot == 'left_bar' ? Interface.getLeftPanels() : Interface.getRightPanels();
//let available_height = (slot == 'left_bar' ? Interface.left_bar : Interface.right_bar).clientHeight;
//let min_height = other_panels.reduce((sum, panel) => (panel == this ? sum : (sum - panel.node.clientHeight)), available_height);
- this.height = Math.clamp(this.position_data.height, 30, Interface.work_screen.clientHeight);
+ this.height = Math.clamp(
+ this.position_data.height,
+ 30,
+ Interface.work_screen.clientHeight
+ );
this.container.style.height = this.height + 'px';
this.container.classList.add('fixed_height');
} else {
@@ -956,31 +1158,47 @@ export class Panel extends EventSystem {
if (!this.fixed_height) this.container.classList.remove('fixed_height');
if (this.sidebar_resize_handle) {
- this.sidebar_resize_handle.style.display = (is_sidebar) ? 'block' : 'none';
+ this.sidebar_resize_handle.style.display = is_sidebar ? 'block' : 'none';
}
- if ((slot == 'right_bar' && Interface.getRightPanels().last() == this) || (slot == 'left_bar' && Interface.getLeftPanels().last() == this)) {
- this.node.parentElement?.childNodes.forEach((n: HTMLElement) => n.classList.remove('bottommost_panel'));
+ if (
+ (slot == 'right_bar' && Interface.getRightPanels().last() == this) ||
+ (slot == 'left_bar' && Interface.getLeftPanels().last() == this)
+ ) {
+ this.node.parentElement?.childNodes.forEach((n: HTMLElement) =>
+ n.classList.remove('bottommost_panel')
+ );
this.container.classList.add('bottommost_panel');
}
- if ((slot == 'right_bar' && Interface.getRightPanels()[0] == this) || (slot == 'left_bar' && Interface.getLeftPanels()[0] == this)) {
- this.node.parentElement?.childNodes.forEach((n: HTMLElement) => n.classList.remove('topmost_panel'));
+ if (
+ (slot == 'right_bar' && Interface.getRightPanels()[0] == this) ||
+ (slot == 'left_bar' && Interface.getLeftPanels()[0] == this)
+ ) {
+ this.node.parentElement?.childNodes.forEach((n: HTMLElement) =>
+ n.classList.remove('topmost_panel')
+ );
this.container.classList.add('topmost_panel');
}
if (this.node.clientHeight) {
- this.container.style.setProperty('--main-panel-height', this.node.clientHeight + 'px');
+ this.container.style.setProperty(
+ '--main-panel-height',
+ this.node.clientHeight + 'px'
+ );
}
- if (Panels[this.id] && this.onResize) this.onResize()
+ if (Panels[this.id] && this.onResize) this.onResize();
} else {
this.container.classList.add('hidden');
}
if (!this.attached_to && !Blockbench.isMobile) {
// This is a host panel. Update the tabs and attached panels
- if (this.open_attached_panel && this.getAttachedPanels().includes(this.open_attached_panel) == false) {
+ if (
+ this.open_attached_panel &&
+ this.getAttachedPanels().includes(this.open_attached_panel) == false
+ ) {
this.open_attached_panel = this;
}
- let tabs: Panel[] = [this]
+ let tabs: Panel[] = [this];
tabs.safePush(...this.getAttachedPanels());
$(this.tab_bar.firstElementChild).empty();
let tab_amount = 0;
@@ -989,9 +1207,9 @@ export class Panel extends EventSystem {
panel.handle.classList.toggle('selected', this.open_attached_panel == panel);
tab_amount++;
}
-
+
if (this.id == 'uv') {
- this.id = 'uv'
+ this.id = 'uv';
}
let panel_is_appended = false;
for (let panel_node of this.container.querySelectorAll('.panel')) {
@@ -1006,8 +1224,8 @@ export class Panel extends EventSystem {
this.tab_bar.classList.toggle('single_tab', tab_amount <= 1);
}
- this.dispatchEvent('update', {show});
- localStorage.setItem('interface_data', JSON.stringify(Interface.data))
+ this.dispatchEvent('update', { show });
+ localStorage.setItem('interface_data', JSON.stringify(Interface.data));
return this;
}
//Delete
@@ -1017,10 +1235,10 @@ export class Panel extends EventSystem {
this.container.remove();
updateInterfacePanels();
}
- static floating_panel_z_order: string[] = []
+ static floating_panel_z_order: string[] = [];
}
export interface Panel {
- snap_menu: Menu
+ snap_menu: Menu;
}
Panel.prototype.snap_menu = new Menu([
{
@@ -1028,64 +1246,64 @@ Panel.prototype.snap_menu = new Menu([
name: 'menu.panel.move_to',
icon: 'drag_handle',
condition: () => !Blockbench.isMobile,
- children: (panel: Panel) => ([
+ children: (panel: Panel) => [
{
name: 'menu.panel.move_to.left_bar',
icon: 'align_horizontal_left',
marked: panel => panel.slot == 'left_bar' && !panel.attached_to,
- click: (panel) => {
+ click: panel => {
panel.fixed_height = false;
panel.moveTo('left_bar');
- }
+ },
},
{
name: 'menu.panel.move_to.right_bar',
icon: 'align_horizontal_right',
marked: panel => panel.slot == 'right_bar' && !panel.attached_to,
- click: (panel) => {
+ click: panel => {
panel.fixed_height = false;
panel.moveTo('right_bar');
- }
+ },
},
{
name: 'menu.panel.move_to.top',
icon: 'align_vertical_top',
marked: panel => panel.slot == 'top' && !panel.attached_to,
- click: (panel) => {
+ click: panel => {
panel.fixed_height = false;
panel.moveTo('top');
- }
+ },
},
{
name: 'menu.panel.move_to.bottom',
icon: 'align_vertical_bottom',
marked: panel => panel.slot == 'bottom' && !panel.attached_to,
- click: (panel) => {
+ click: panel => {
panel.fixed_height = false;
panel.moveTo('bottom');
- }
+ },
},
{
name: 'menu.panel.move_to.float',
icon: 'web_asset',
marked: panel => panel.slot == 'float' && !panel.attached_to,
- click: (panel) => {
+ click: panel => {
panel.fixed_height = false;
panel.moveTo('float');
- }
+ },
},
'_',
{
name: 'menu.panel.move_to.hidden',
icon: 'web_asset_off',
marked: panel => panel.slot == 'hidden' && !panel.attached_to,
- condition: panel => (panel.optional && panel.slot != 'hidden'),
- click: (panel) => {
+ condition: panel => panel.optional && panel.slot != 'hidden',
+ click: panel => {
panel.fixed_height = false;
panel.moveTo('hidden');
- }
- }
- ])
+ },
+ },
+ ],
},
{
id: 'move_to',
@@ -1096,27 +1314,34 @@ Panel.prototype.snap_menu = new Menu([
let options: CustomMenuItem[] = [];
for (let id in Panels) {
let panel2: Panel = Panels[id];
- if (!Condition(panel2.condition) || panel2.attached_to || panel2.id == panel.attached_to || panel2 == panel) continue;
+ if (
+ !Condition(panel2.condition) ||
+ panel2.attached_to ||
+ panel2.id == panel.attached_to ||
+ panel2 == panel
+ )
+ continue;
options.push({
id: panel2.id,
name: panel2.name,
icon: panel2.icon,
click() {
panel2.attachPanel(panel);
- }
- })
+ },
+ });
}
return options;
- }
+ },
},
{
id: 'fold',
name: 'menu.panel.fold',
icon: (panel: Panel) => panel.getContainerPanel().folded == true,
- condition: (panel: Panel) => panel.getContainerPanel().slot != 'hidden' && !Blockbench.isMobile,
+ condition: (panel: Panel) =>
+ panel.getContainerPanel().slot != 'hidden' && !Blockbench.isMobile,
click(panel: Panel) {
panel.getContainerPanel().fold();
- }
+ },
},
{
id: 'enable',
@@ -1130,22 +1355,20 @@ Panel.prototype.snap_menu = new Menu([
} else {
panel.moveTo('hidden');
}
- }
- }
-])
-
+ },
+ },
+]);
export function setupPanels() {
- Interface.panel_definers.forEach((definer) => {
+ Interface.panel_definers.forEach(definer => {
if (typeof definer === 'function') {
- definer()
+ definer();
}
- })
+ });
updateSidebarOrder();
}
export function updateInterfacePanels() {
-
if (!Blockbench.isMobile) {
Interface.left_bar.style.display = Prop.show_left_bar ? 'flex' : 'none';
Interface.right_bar.style.display = Prop.show_right_bar ? 'flex' : 'none';
@@ -1153,20 +1376,24 @@ export function updateInterfacePanels() {
Interface.work_screen.style.setProperty(
'grid-template-columns',
- Interface.left_bar_width+'px auto '+ Interface.right_bar_width +'px'
- )
+ Interface.left_bar_width + 'px auto ' + Interface.right_bar_width + 'px'
+ );
for (var key in Interface.Panels) {
var panel: Panel = Panels[key];
panel.update();
}
- var left_width = Interface.left_bar.querySelector('.panel_container:not(.hidden)') ? Interface.left_bar_width : 0;
- var right_width = Interface.right_bar.querySelector('.panel_container:not(.hidden)') ? Interface.right_bar_width : 0;
+ var left_width = Interface.left_bar.querySelector('.panel_container:not(.hidden)')
+ ? Interface.left_bar_width
+ : 0;
+ var right_width = Interface.right_bar.querySelector('.panel_container:not(.hidden)')
+ ? Interface.right_bar_width
+ : 0;
if (!left_width || !right_width) {
Interface.work_screen.style.setProperty(
'grid-template-columns',
- left_width+'px auto '+ right_width +'px'
- )
+ left_width + 'px auto ' + right_width + 'px'
+ );
}
Interface.preview.style.visibility = Interface.preview.clientHeight > 80 ? 'visible' : 'hidden';
@@ -1174,14 +1401,14 @@ export function updateInterfacePanels() {
let height = document.getElementById('center')!.clientHeight;
height -= Interface.getBottomPanel()?.height || 0;
height -= Interface.getTopPanel()?.height || 0;
- Interface.preview.style.height = height > 0 ? (height + 'px') : '';
+ Interface.preview.style.height = height > 0 ? height + 'px' : '';
if (Preview.split_screen.enabled) {
- Preview.split_screen.updateSize()
+ Preview.split_screen.updateSize();
}
for (var key in Interface.Resizers) {
- var resizer = Interface.Resizers[key]
- resizer.update()
+ var resizer = Interface.Resizers[key];
+ resizer.update();
}
updateSidebarOrder();
}
@@ -1189,7 +1416,9 @@ export function updateInterfacePanels() {
export function updateSidebarOrder() {
['left_bar', 'right_bar'].forEach(bar => {
let bar_node = document.querySelector(`.sidebar#${bar}`);
- let current_panels = Array.from(bar_node.childNodes).map(panel_node => (panel_node as HTMLElement).getAttribute('panel_id'));
+ let current_panels = Array.from(bar_node.childNodes).map(panel_node =>
+ (panel_node as HTMLElement).getAttribute('panel_id')
+ );
let last_panel: Panel;
let panel_count = 0;
@@ -1215,7 +1444,7 @@ export function updateSidebarOrder() {
if (last_panel && panel_count > 1) {
last_panel.container.classList.add('bottommost_panel');
}
- })
+ });
}
export function updatePanelSelector() {
if (!Blockbench.isMobile) return;
@@ -1228,7 +1457,7 @@ export function updatePanelSelector() {
}
export function setActivePanel(panel) {
- Prop.active_panel = panel
+ Prop.active_panel = panel;
}
export function setupMobilePanelSelector() {
@@ -1237,16 +1466,19 @@ export function setupMobilePanelSelector() {
data: {
all_panels: Interface.Panels,
selected: null,
- modifiers: Pressing.overrides
- },
- computed: {
+ modifiers: Pressing.overrides,
},
+ computed: {},
methods: {
panels() {
let arr = [];
for (var id in this.all_panels) {
let panel = this.all_panels[id];
- if (Condition(panel.condition) && Condition(panel.display_condition) && panel.slot != 'hidden') {
+ if (
+ Condition(panel.condition) &&
+ Condition(panel.display_condition) &&
+ panel.slot != 'hidden'
+ ) {
arr.push(panel);
}
}
@@ -1271,7 +1503,7 @@ export function setupMobilePanelSelector() {
openTouchKeyboardModifierMenu(this.$refs.mobile_keyboard_menu);
},
Condition,
- getIconNode: Blockbench.getIconNode
+ getIconNode: Blockbench.getIconNode,
},
template: `
@@ -1284,8 +1516,8 @@ export function setupMobilePanelSelector() {
-
`
- })
+ `,
+ });
}
Object.assign(window, {
diff --git a/js/interface/settings.ts b/js/interface/settings.ts
index 12688a15b..d6a671432 100644
--- a/js/interface/settings.ts
+++ b/js/interface/settings.ts
@@ -1,8 +1,8 @@
-import { Vue } from "../lib/libs";
-import { Blockbench } from "../api";
-import { Dialog } from "./dialog";
-import { FormInputType } from "./form";
-import { ipcRenderer } from "../native_apis";
+import { Vue } from '../lib/libs';
+import { Blockbench } from '../api';
+import { Dialog } from './dialog';
+import { FormInputType } from './form';
+import { ipcRenderer } from '../native_apis';
export const settings: Record