fixed performance problem on resize

src/js/console.js

@@ -1,6 +1,6 @@
 import {scan, token_types} from './scanner';
 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
@@ -9,15 +9,12 @@ const state = {};
 const command_input_element = document.getElementById('command_input');
 const command_history_element = document.getElementById('command_history');
 command_input_element.value = '';
-let current_object_index = 0;
 let command_history = [''];
 let command_history_index = 0;
 
 export const update_lazy_objects = function () {
     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 existing_value = state[object.binding];
         if (existing_value) {
@@ -32,7 +29,7 @@ export const update_lazy_objects = function () {
             description = state[object.binding];
         }
         return {description: object.binding + ':' + description};
-    }
+    });
 }
 
 export const adjust_input_element_height = function () {
@@ -85,6 +82,7 @@ command_input_element.onkeyup = function handle_key_input(event) {
                         if (object_wrapper.previous) {
                             update_vector_arrow(object_wrapper.previous.id, object_wrapper.object);
                         } else {
+                            vectors.push(result.value.object);
                             add_vector_to_group(result.value.object);
                         }
                     }
@@ -245,7 +243,7 @@ const addition = function (left, right) {
 }
 
 export const create_vector = function (vector) { //rename to create_vector
-    vector.id = current_object_index++;
+    vector.id = vectors.length;
     vector.add = (other) => create_vector({
         x0: vector.x0 + other.x0,
         y0: vector.x0 + other.x0,

src/js/index.js

@@ -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
 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 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 width = window.innerWidth, height = window.innerHeight;
 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 vector_group = create_vector_group();
+    const vector_group = get_or_create_vector_group();
 
     for (let i = 0; i < vectors.length; i++) {
         add_vector_to_group(vectors[i]);
@@ -194,13 +194,7 @@ const draw_vectors = function () {
 }
 
 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');
     vector_arrow.onmousedown = function start_moving_vector(event) {
         moving_vector = event.target;
@@ -209,10 +203,14 @@ export const add_vector_to_group = function (vector) {
     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) {
+        vector_group = create("g");
         svg.appendChild(vector_group);
+        vector_group.id = 'vectors';
+    }
+
     return vector_group;
 }
 
@@ -296,4 +294,4 @@ const svg = create_svg();
 document.body.appendChild(svg);
 svg.appendChild(create_grid('grid', 'bg-grid'));
 svg.appendChild(create_axes());
-create_vector_group();
+get_or_create_vector_group();