Skip to content

Commit

Permalink
Adjust spacing and animation for mini sidebar and blank fields
Browse files Browse the repository at this point in the history 
Refactor some function names
  • Loading branch information
@acweathersby
acweathersby committed Oct 7, 2024
1 parent abfa7d5 commit 9a42018
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 100 deletions.
26 changes: 13 additions & 13 deletions site/assets/js/lab/dragndrop_operations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,20 +248,20 @@ export class MoveFieldDragOperation extends DragOperation {
this.drag_field.ele.style.width = ``;
this.drag_field.ele.style.height = ``;

this.nb.addField(this.drag_field, this.drag_target_col, this.drag_target_row);
this.nb.add_field(this.drag_field, this.drag_target_col, this.drag_target_row);

if (this.placeholder) {
this.nb.removeField(this.placeholder);
this.nb.remove_field(this.placeholder);
this.placeholder = null;
}


this.getTargetColumn().distributeHeight([{ index: this.drag_field.v_row, height: this.start_height }]);
this.getTargetColumn().distribute_height([{ index: this.drag_field.v_row, height: this.start_height }]);
}

protected commit() {

this.nb.calculateHeights();
this.nb.calculate_heights();

this.drag_field.add_class("dragging");
this.updateDragPos(this.drag_field);
Expand Down Expand Up @@ -293,7 +293,7 @@ export class MoveFieldDragOperation extends DragOperation {

if (!this.swap_mode) {

if (insert_data = this.nb.mini_col.pointInside(this.curr_pos_x, this.curr_pos_y, 100)) {
if (insert_data = this.nb.mini_col.is_point_inside(this.curr_pos_x, this.curr_pos_y, 100)) {
const different_col = this.drag_target_col != -1;
const different_pos = (this.drag_target_row != insert_data.insert_row);

Expand All @@ -302,10 +302,10 @@ export class MoveFieldDragOperation extends DragOperation {
this.placeholder.delete();
this.placeholder = null;
let target_col = this.getTargetColumn();
target_col.distributeHeight();
target_col.distribute_height();

if (target_col.cell_count == 0) {
this.nb.removeCol(this.drag_target_col);
this.nb.remove_column(this.drag_target_col);
}
}

Expand All @@ -322,7 +322,7 @@ export class MoveFieldDragOperation extends DragOperation {

for (const col of this.nb.columns) {

if (insert_data = col.pointInside(this.curr_pos_x, this.curr_pos_y, edge_size)) {
if (insert_data = col.is_point_inside(this.curr_pos_x, this.curr_pos_y, edge_size)) {
const swap_mode = this.swap_mode
const different_pos = (this.drag_target_col != col.index || this.drag_target_row != insert_data.insert_row);
const insert_column = (insert_data.alignment > 0 && col.cell_count > 0);
Expand Down Expand Up @@ -369,10 +369,10 @@ export class MoveFieldDragOperation extends DragOperation {

this.placeholder.delete();
this.placeholder = null;
target_col.distributeHeight();
target_col.distribute_height();

if (target_col.cell_count == 0) {
this.nb.removeCol(this.drag_target_col);
this.nb.remove_column(this.drag_target_col);
exiting_empty = true;
}

Expand All @@ -382,7 +382,7 @@ export class MoveFieldDragOperation extends DragOperation {

if (insert_data.alignment > 0 && !exiting_empty && !max_columns) {
let insertion_index = insert_data.alignment == 1 ? col.index : col.index + 1;
this.nb.insertCol(insertion_index);
this.nb.insert_column(insertion_index);
this.drag_target_col = insertion_index;
this.drag_target_row = 0;
new_col = true;
Expand All @@ -396,7 +396,7 @@ export class MoveFieldDragOperation extends DragOperation {
this.placeholder = new NBBlankField(this.start_width, this.start_height);
const height = new_col ? col.max_free() : Math.min(this.start_height, col.max_free());
col.add(this.placeholder, this.drag_target_row);
col.distributeHeight([{ index: this.placeholder.r_row, height }]);
col.distribute_height([{ index: this.placeholder.r_row, height }]);
}
}
}
Expand Down Expand Up @@ -529,7 +529,7 @@ export class ResizeFieldOperation extends DragOperation {
protected end(): void {
for (const set of this.sets) {
set.col.latchHeights()
set.col.distributeHeight();
set.col.distribute_height();
set.top.ele.style.transition = ""
set.bottom.ele.style.transition = ""
}
Expand Down
64 changes: 32 additions & 32 deletions site/assets/js/lab/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,25 +16,25 @@ export async function init(compiler_worker_path: string) {

let nb = new NB(2);

let grammar_input_field = nb.addField(new NBEditorField("Grammar"), 0)
let grammar_input_field = nb.add_field(new NBEditorField("Grammar"), 0)
grammar_input_field.set_content_visible(true);
grammar_input_field.setText("");
grammar_input_field.setIcon(`<i class="fa-solid fa-chart-gantt"></i>`);
grammar_input_field.set_text("");
grammar_input_field.set_icon(`<i class="fa-solid fa-chart-gantt"></i>`);

let parser_info_field = nb.addField(new NBContentField("Parser Info"), 1);
let parser_info_field = nb.add_field(new NBContentField("Parser Info"), 1);
parser_info_field.set_content_visible(false);
parser_info_field.setIcon(`<i class="fa-solid fa-circle-info"></i>`);
parser_info_field.set_icon(`<i class="fa-solid fa-circle-info"></i>`);
let parser_info = new ParserView(parser_info_field);

pipeline.GrammarDB.worker_path = compiler_worker_path;

let parser_input_field = nb.addField(new NBEditorField("Parser Input"), -1);
let parser_input_field = nb.add_field(new NBEditorField("Parser Input"), -1);
parser_input_field.set_content_visible(true)
parser_input_field.setIcon(`<i class="fa-solid fa-quote-left"></i>`);
parser_input_field.set_icon(`<i class="fa-solid fa-quote-left"></i>`);


let ast_field = nb.addField(new NBContentField("AST Nodes"), -1);
ast_field.setIcon(`<i class="fa-solid fa-share-nodes"></i>`);
let ast_field = nb.add_field(new NBContentField("AST Nodes"), -1);
ast_field.set_icon(`<i class="fa-solid fa-share-nodes"></i>`);
{
let parent = ast_field.body;

Expand All @@ -45,8 +45,8 @@ export async function init(compiler_worker_path: string) {
parent.appendChild(canvas);
}

let cst_field = nb.addField(new NBContentField("CST Nodes"), -1);
cst_field.setIcon(`<i class="fa-solid fa-sitemap"></i>`);
let cst_field = nb.add_field(new NBContentField("CST Nodes"), -1);
cst_field.set_icon(`<i class="fa-solid fa-sitemap"></i>`);
let cst_view = new CSTView(cst_field)

let formatting_rules_field = new NBEditorField("Formatting Rules");
Expand All @@ -62,22 +62,22 @@ export async function init(compiler_worker_path: string) {


let grammar_input_debounce = new Debounce(() => {
let text = grammar_input_field.getText();
let text = grammar_input_field.get_text();
if (text) {
setLocalValue(LocalStoreKeys.GrammarInput, text);
grammar_input.update(text)
grammar_input_field.removeHighlight();
grammar_input_field.removeMsgs();
grammar_input_field.remove_highlight();
grammar_input_field.remove_messages();
}
});

let parser_input_debounce = new Debounce(() => {
let text = parser_input_field.getText();
let text = parser_input_field.get_text();
if (text) {
setLocalValue(LocalStoreKeys.ParserInput, text);
parser_input.update(text)
parser_input_field.removeHighlight();
parser_input_field.removeMsgs();
parser_input_field.remove_highlight();
parser_input_field.remove_messages();
}
});

Expand All @@ -90,7 +90,7 @@ export async function init(compiler_worker_path: string) {
})

parser_input_field.addListener("text_changed", parser_input => {
let text = parser_input.getText();
let text = parser_input.get_text();
if (text) {
setLocalValue(LocalStoreKeys.ParserInput, text);
//parser.restart(text);
Expand All @@ -111,8 +111,8 @@ export async function init(compiler_worker_path: string) {
if (error.origin == radlr.ErrorOrigin.Grammar) {
//alert(error.msg);
error_reporter.innerText = (`Unhandled Error: \n${radlr.ErrorOrigin[error.origin]}\n${error.msg}\n${error.line}:${error.col}`);
grammar_input_field.addHighlight(error.start_offset, error.end_offset, "red");
grammar_input_field.addMsg(error.start_offset, error.end_offset, error.msg);
grammar_input_field.add_highlight(error.start_offset, error.end_offset, "red");
grammar_input_field.add_message(error.start_offset, error.end_offset, error.msg);
} else {
//alert(error.msg);
}
Expand Down Expand Up @@ -167,17 +167,17 @@ export async function init(compiler_worker_path: string) {
parser.addListener("execute_instruction", debug_info => {
let ctx = debug_info.ctx;

parser_input_field.removeCharacterClasses();
parser_input_field.addCharacterClass(ctx.input_ptr, ctx.input_ptr + 1, "dbg-input-pos");
parser_input_field.addCharacterClass(ctx.anchor_ptr, ctx.anchor_ptr + 1, "dbg-anchor-pos");
parser_input_field.addCharacterClass(ctx.begin_ptr, ctx.begin_ptr + 1, "dbg-begin-pos");
parser_input_field.addCharacterClass(ctx.end_ptr, ctx.end_ptr + 1, "dbg-end-pos");
parser_input_field.remove_character_classes();
parser_input_field.add_character_class(ctx.input_ptr, ctx.input_ptr + 1, "dbg-input-pos");
parser_input_field.add_character_class(ctx.anchor_ptr, ctx.anchor_ptr + 1, "dbg-anchor-pos");
parser_input_field.add_character_class(ctx.begin_ptr, ctx.begin_ptr + 1, "dbg-begin-pos");
parser_input_field.add_character_class(ctx.end_ptr, ctx.end_ptr + 1, "dbg-end-pos");

if (debug_info.is_scanner) {
parser_input_field.addCharacterClass(ctx.sym_ptr, ctx.sym_ptr + 1, "dbg-sym-pos");
parser_input_field.addCharacterClass(ctx.sym_ptr, ctx.input_ptr, "dbg-sym");
parser_input_field.add_character_class(ctx.sym_ptr, ctx.sym_ptr + 1, "dbg-sym-pos");
parser_input_field.add_character_class(ctx.sym_ptr, ctx.input_ptr, "dbg-sym");
} else if (ctx.sym_len > 0) {
parser_input_field.addCharacterClass(ctx.sym_ptr, ctx.sym_ptr + ctx.sym_len, "dbg-sym");
parser_input_field.add_character_class(ctx.sym_ptr, ctx.sym_ptr + ctx.sym_len, "dbg-sym");
}
});

Expand All @@ -194,7 +194,7 @@ export async function init(compiler_worker_path: string) {
});

controls.addListener("reset", () => {
parser_input_field.removeCharacterClasses();
parser_input_field.remove_character_classes();
parser.reset();
});

Expand All @@ -204,19 +204,19 @@ export async function init(compiler_worker_path: string) {

await pipeline.sleep(10);

nb.calculateHeights();
nb.calculate_heights();


await rad_init;

let { grammar: example_grammar, input: example_input } = grammar_examples[Math.round(Math.random() * (grammar_examples.length - 1))];

var text = getLocalValue(LocalStoreKeys.ParserInput) || example_input;
parser_input_field.setText(text);
parser_input_field.set_text(text);


var text = getLocalValue(LocalStoreKeys.GrammarInput) || example_grammar;
grammar_input_field.setText(text);
grammar_input_field.set_text(text);
grammar_input.update(text)

setupConfig(config => {
Expand Down
Loading

0 comments on commit 9a42018

Please sign in to comment.