sander/matrepl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed performance problem on resize

Browse source
This commit is contained in:
Sander Hautvast 2021-02-18 20:38:06 +01:00
parent bbbdacede0
commit 1ef889af68
2 changed files with 19 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/js/console.js
View file

@ -1,6 +1,6 @@
import {scan, token_types} from './scanner'; import {scan, token_types} from './scanner';
import {parse} from './parser'; import {parse} from './parser';
import {remove_vector, update_vector_arrow, add_vector_to_group} from "./index"; import {add_vector_to_group, remove_vector, update_vector_arrow, vectors} from "./index";
/** /**
* handles user input from the console div * handles user input from the console div
@ -9,15 +9,12 @@ const state = {};
const command_input_element = document.getElementById('command_input'); const command_input_element = document.getElementById('command_input');
const command_history_element = document.getElementById('command_history'); const command_history_element = document.getElementById('command_history');
command_input_element.value = ''; command_input_element.value = '';
let current_object_index = 0;
let command_history = ['']; let command_history = [''];
let command_history_index = 0; let command_history_index = 0;
export const update_lazy_objects = function () { export const update_lazy_objects = function () {
let lazy_objects = Object.values(state).filter(e => Object.prototype.hasOwnProperty.apply(e, ['lazy_expression'])); let lazy_objects = Object.values(state).filter(e => Object.prototype.hasOwnProperty.apply(e, ['lazy_expression']));
for (let index = 0; index < lazy_objects.length; index++) { lazy_objects.forEach(object => {
let object = lazy_objects[index];
let value = visit_expression(object.lazy_expression); let value = visit_expression(object.lazy_expression);
let existing_value = state[object.binding]; let existing_value = state[object.binding];
if (existing_value) { if (existing_value) {
@ -32,7 +29,7 @@ export const update_lazy_objects = function () {
description = state[object.binding]; description = state[object.binding];
} }
return {description: object.binding + ':' + description}; return {description: object.binding + ':' + description};
} });
} }
export const adjust_input_element_height = function () { export const adjust_input_element_height = function () {
@ -82,9 +79,10 @@ command_input_element.onkeyup = function handle_key_input(event) {
let object_wrapper = result.value; let object_wrapper = result.value;
if (object_wrapper.object.is_vector) { if (object_wrapper.object.is_vector) {
if (object_wrapper.previous){ if (object_wrapper.previous) {
update_vector_arrow(object_wrapper.previous.id, object_wrapper.object); update_vector_arrow(object_wrapper.previous.id, object_wrapper.object);
} else { } else {
vectors.push(result.value.object);
add_vector_to_group(result.value.object); add_vector_to_group(result.value.object);
} }
} }
@ -108,7 +106,7 @@ export let visit_expression = function (expr) {
case 'declaration': { case 'declaration': {
let value = visit_expression(expr.initializer); let value = visit_expression(expr.initializer);
value.binding = expr.var_name.value; value.binding = expr.var_name.value;
if (value.binding in state){ if (value.binding in state) {
value.previous = state[value.binding].object; value.previous = state[value.binding].object;
} }
state[value.binding] = value; state[value.binding] = value;
@ -245,7 +243,7 @@ const addition = function (left, right) {
} }
export const create_vector = function (vector) { //rename to create_vector export const create_vector = function (vector) { //rename to create_vector
vector.id = current_object_index++; vector.id = vectors.length;
vector.add = (other) => create_vector({ vector.add = (other) => create_vector({
x0: vector.x0 + other.x0, x0: vector.x0 + other.x0,
y0: vector.x0 + other.x0, y0: vector.x0 + other.x0,

26
src/js/index.js
View file

@ -8,7 +8,7 @@ import {update_lazy_objects} from "./console";
const SVG_NS = 'http://www.w3.org/2000/svg'; // program needs these to create svg elements const SVG_NS = 'http://www.w3.org/2000/svg'; // program needs these to create svg elements
let grid_size = 100; // this is the nr of pixels for the basis vector (1,0) (0,1) let grid_size = 100; // this is the nr of pixels for the basis vector (1,0) (0,1)
let half_grid_size = grid_size >> 1; // used to position the grid lines let half_grid_size = grid_size >> 1; // used to position the grid lines
let vectors = []; // collection of added vectors // maybe move to console.js export let vectors = []; // collection of added vectors // maybe move to console.js
let moving_vector; // user can move vector arrows. when moving, this refers to the arrow let moving_vector; // user can move vector arrows. when moving, this refers to the arrow
let width = window.innerWidth, height = window.innerHeight; let width = window.innerWidth, height = window.innerHeight;
let origin_x = Math.floor((width / grid_size) / 2) * grid_size + half_grid_size, let origin_x = Math.floor((width / grid_size) / 2) * grid_size + half_grid_size,
@ -185,7 +185,7 @@ const move_vector = function (event) {
* } * }
*/ */
const draw_vectors = function () { const draw_vectors = function () {
const vector_group = create_vector_group(); const vector_group = get_or_create_vector_group();
for (let i = 0; i < vectors.length; i++) { for (let i = 0; i < vectors.length; i++) {
add_vector_to_group(vectors[i]); add_vector_to_group(vectors[i]);
@ -194,13 +194,7 @@ const draw_vectors = function () {
} }
export const add_vector_to_group = function (vector) { export const add_vector_to_group = function (vector) {
vectors.push(vector); let vector_group = get_or_create_vector_group();
vector.is_visible = true;
let vector_group = document.getElementById('vectors');
if (vector_group === null || vector_group === undefined) {
vector_group = create_vector_group();
}
let vector_arrow = arrow(vector.id, vector.x0, vector.y0, vector.x, vector.y, 'vector'); let vector_arrow = arrow(vector.id, vector.x0, vector.y0, vector.x, vector.y, 'vector');
vector_arrow.onmousedown = function start_moving_vector(event) { vector_arrow.onmousedown = function start_moving_vector(event) {
moving_vector = event.target; moving_vector = event.target;
@ -209,10 +203,14 @@ export const add_vector_to_group = function (vector) {
vector_group.appendChild(vector_arrow); vector_group.appendChild(vector_arrow);
} }
const create_vector_group = function () { const get_or_create_vector_group = function () {
const vector_group = create("g"); let vector_group = document.getElementById('vectors');
vector_group.id = 'vectors'; if (vector_group === null || vector_group === undefined) {
svg.appendChild(vector_group); vector_group = create("g");
svg.appendChild(vector_group);
vector_group.id = 'vectors';
}
return vector_group; return vector_group;
} }
@ -296,4 +294,4 @@ const svg = create_svg();
document.body.appendChild(svg); document.body.appendChild(svg);
svg.appendChild(create_grid('grid', 'bg-grid')); svg.appendChild(create_grid('grid', 'bg-grid'));
svg.appendChild(create_axes()); svg.appendChild(create_axes());
create_vector_group(); get_or_create_vector_group();