From bb62b8677f66cb4baf414a2e0e93c70c269d3140 Mon Sep 17 00:00:00 2001 From: Sander Hautvast Date: Thu, 18 Feb 2021 22:11:09 +0100 Subject: [PATCH] added vector labels --- src/js/console.js | 7 +++--- src/js/index.js | 64 ++++++++++++++++++++++++++++++++--------------- 2 files changed, 48 insertions(+), 23 deletions(-) diff --git a/src/js/console.js b/src/js/console.js index 2077e09..f1f6937 100644 --- a/src/js/console.js +++ b/src/js/console.js @@ -1,6 +1,6 @@ import {scan, token_types} from './scanner'; import {parse} from './parser'; -import {add_vector_to_group, remove_vector, update_vector_arrow, vectors} from "./index"; +import {add_vector_arrow_to_svg, remove_vector, update_vector_arrow, vectors} from "./index"; /** * handles user input from the console div @@ -77,13 +77,14 @@ command_input_element.onkeyup = function handle_key_input(event) { try { result = visit_expression(statement); let object_wrapper = result.value; - + result.value.object.label = object_wrapper.binding; if (object_wrapper.object.is_vector) { 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); + + add_vector_arrow_to_svg(result.value.object); } } diff --git a/src/js/index.js b/src/js/index.js index 782ad84..98655d7 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -16,7 +16,7 @@ let origin_x = Math.floor((width / grid_size) / 2) * grid_size + half_grid_size, * @param element_type path,g, etc * @returns SVG element */ -const create = function (element_type) { +const create_svg_element = function (element_type) { return document.createElementNS(SVG_NS, element_type); } @@ -29,8 +29,15 @@ const create = function (element_type) { * @returns {string} to put in an SVG path */ const calculate_d = function (x0, y0, x1, y1) { - return create_d(origin_x + x0 * grid_size, origin_y - y0 * grid_size, - +origin_x + x1 * grid_size, origin_y - y1 * grid_size); + return create_d(calc_screen_x(x0), calc_screen_y(y0), calc_screen_x(x1), calc_screen_y(y1)); +} + +const calc_screen_x = function (x) { + return origin_x + x * grid_size; +} + +const calc_screen_y = function (y) { + return origin_y - y * grid_size; } /** * create a d attribute from screen coordinates @@ -54,7 +61,7 @@ const create_d = function (s_x0, s_y0, s_x1, s_y1) { * @returns an SVG path element */ const create_line = function (x0, y0, x1, y1, css_class) { - let path = create('path'); + let path = create_svg_element('path'); path.setAttribute('d', create_d(x0, y0, x1, y1)); path.setAttribute('class', css_class); return path; @@ -70,8 +77,8 @@ const create_line = function (x0, y0, x1, y1, css_class) { * @param css_class class attribute * @returns {SVGPathElement} */ -const arrow = function (id, x0, y0, x1, y1, css_class) { - let path = create('path'); +const create_arrow = function (id, x0, y0, x1, y1, css_class) { + let path = create_svg_element('path'); path.setAttribute('d', calculate_d(x0, y0, x1, y1)); path.id = id; @@ -87,16 +94,16 @@ const arrow = function (id, x0, y0, x1, y1, css_class) { * @returns {SVGGElement} */ const create_grid = function (css_class, bg_css_class) { - const group = create('g'); + const group = create_svg_element('g'); group.setAttribute('id', 'grid'); - const horizontal = create('g'); + const horizontal = create_svg_element('g'); horizontal.setAttribute('id', 'horizontal'); for (let y = 0; y < height; y += grid_size) { horizontal.appendChild(create_line(0, y + half_grid_size, width, y + half_grid_size, css_class)); horizontal.appendChild(create_line(0, y, width, y, bg_css_class)); } group.appendChild(horizontal); - const vertical = create('g'); + const vertical = create_svg_element('g'); vertical.setAttribute('id', 'vertical'); for (let x = 0; x < width; x += grid_size) { vertical.appendChild(create_line(x + half_grid_size, 0, x + half_grid_size, height, css_class)); @@ -133,8 +140,14 @@ const redraw_grid = function () { export const update_vector_arrow = function (id, vector) { let d = calculate_d(vector.x0, vector.y0, vector.x, vector.y); - let v = document.getElementById(id.toString()); - v.setAttribute('d', d); + document.getElementById(id.toString()).setAttribute('d', d); + update_label_position(id, calc_screen_x(vector.x) + 5, calc_screen_y(vector.y) + 5); +} + +const update_label_position = function (id, x, y) { + let label = document.getElementById('l' + id); + label.setAttribute('x', x.toString()); + label.setAttribute('y', y.toString()); } export const remove_vector = function (vector_or_index) { @@ -170,6 +183,7 @@ const move_vector = function (event) { vectors[moving_vector.id].x = (current_x - origin_x) / grid_size; vectors[moving_vector.id].y = (origin_y - current_y) / grid_size; moving_vector.setAttribute('d', create_d(origin_x, origin_y, current_x, current_y)); + update_label_position(moving_vector.id, current_x + 5, current_y + 5); update_lazy_objects(); } } @@ -186,25 +200,35 @@ const draw_vectors = function () { const vector_group = get_or_create_vector_group(); for (let i = 0; i < vectors.length; i++) { - add_vector_to_group(vectors[i]); + add_vector_arrow_to_svg(vectors[i]); } svg.appendChild(vector_group); } -export const add_vector_to_group = function (vector) { +export const add_vector_arrow_to_svg = function (vector) { let vector_group = get_or_create_vector_group(); - let vector_arrow = arrow(vector.id, vector.x0, vector.y0, vector.x, vector.y, 'vector'); + let vector_arrow = create_arrow(vector.id, vector.x0, vector.y0, vector.x, vector.y, 'vector'); vector_arrow.onmousedown = function start_moving_vector(event) { moving_vector = event.target; }; vector_group.appendChild(vector_arrow); + let label = create_svg_element('text'); + label.setAttribute('x', (calc_screen_x(vector.x) + 5).toString()); + label.setAttribute('y', (calc_screen_y(vector.y) + 5).toString()); + label.setAttribute('fill', 'yellow'); + label.setAttribute('id', 'l' + vector.id); + let text = document.createTextNode(vector.label); + label.appendChild(text); + + vector_group.appendChild(label); + } const get_or_create_vector_group = function () { let vector_group = document.getElementById('vectors'); if (vector_group === null || vector_group === undefined) { - vector_group = create("g"); + vector_group = create_svg_element("g"); svg.appendChild(vector_group); vector_group.id = 'vectors'; } @@ -229,7 +253,7 @@ const redraw = function () { } const create_axes = function () { - let axes_group = create('g'); + let axes_group = create_svg_element('g'); axes_group.setAttribute('id', 'axes'); let x = create_line(0, origin_y, width, origin_y, 'axis'); x.id = 'x-axis'; @@ -245,8 +269,8 @@ const create_axes = function () { * @returns {SVGDefsElement} */ function create_defs() { - let defs = create('defs'); - let marker = create('marker'); + let defs = create_svg_element('defs'); + let marker = create_svg_element('marker'); marker.id = 'arrow'; marker.setAttribute('orient', 'auto'); marker.setAttribute('viewBox', '0 0 10 10'); @@ -255,7 +279,7 @@ function create_defs() { marker.setAttribute('markerUnits', 'strokeWidth'); marker.setAttribute('refX', '6'); marker.setAttribute('refY', '5'); - let polyline = create('polyline'); + let polyline = create_svg_element('polyline'); polyline.setAttribute('points', '0,0 10,5 0,10 1,5'); polyline.setAttribute('fill', 'yellow'); marker.appendChild(polyline); @@ -268,7 +292,7 @@ function create_defs() { * @returns {SVGElement} */ const create_svg = function () { - let svg = create('svg'); + let svg = create_svg_element('svg'); svg.onmousemove = move_vector; svg.onmouseup = function stop_moving_vector() {