Compare commits
No commits in common. "22c9e579956c4d936c4e86637fc8755603111dc9" and "86d0853693b271a794898bebf55aa53e24f95da9" have entirely different histories.
22c9e57995
...
86d0853693
8 changed files with 111 additions and 322 deletions
11
README.md
11
README.md
|
|
@ -18,16 +18,13 @@ The repl has the following syntax (It's work in progress, new capabilities will
|
|||
* and then ```@0```
|
||||
> > vector@0{x0:0, y0: 1, x:1, y:1}
|
||||
* method calls:
|
||||
```a = vector(12, 1)``` works as well. The start is now the origin.
|
||||
```a = vector(12, 1)```
|
||||
> > vector@0{x0:0, y0: 2, x:12, y:1}
|
||||
* ```vector(1 2)``` works as well. The start is now the origin.
|
||||
commas are not mandatory. I'm planning to add a more mathematical notation for vectors: ```[1 2]```
|
||||
|
||||
```vector(-1 -1)``` != ```vector(-1-1)``` and the latter would mean ```vector(-2)``` which is not legal.
|
||||
* arrays: \[i<sub>0</sub>, i<sub>1</sub>, i<sub>2</sub>, ... i<sub>n</sub>] creates an array.
|
||||
* \[i<sub>0</sub>, i<sub>1</sub>] is special: it is a shorthand for creating a 2-dimensional vector. I'll have to think of another way to create an array of length 2...
|
||||
|
||||
* ```id()`` adds a 2d identity matrix, which is also the two basis vectors.
|
||||
* properties
|
||||
* ```a = [1,2]```
|
||||
* ```a = vector(12, 1)```
|
||||
* ```a.type```
|
||||
> > vector
|
||||
* ```a.x+1```
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
describe('draw a vector', () => {
|
||||
it('adds the svg vector', () => {
|
||||
cy.visit('http://localhost:8080');
|
||||
cy.get('#command_input').type("{enter}");
|
||||
|
||||
cy.get('#command_input').type("a = vector(0,0,0.5,0.5){enter}");
|
||||
cy.get('#0').invoke('attr','d').should('eq','M550 350 L600 300');
|
||||
cy.get('#0').invoke('attr','class').should('eq','vector');
|
||||
cy.get('#0').invoke('attr','marker-end').should('eq','url(#vector_arrow)');
|
||||
cy.get('#0').invoke('attr','marker-end').should('eq','url(#arrow)');
|
||||
|
||||
cy.get('#command_input').type("b = vector(0,0,-1,1){enter}");
|
||||
cy.get('#1').invoke('attr','d').should('eq','M550 350 L450 250');
|
||||
|
|
@ -19,12 +18,11 @@ describe('draw a vector', () => {
|
|||
describe('draw a lazy vector', () => {
|
||||
it('adds the svg vector', () => {
|
||||
cy.visit('http://localhost:8080');
|
||||
cy.get('#command_input').type("{enter}");
|
||||
|
||||
cy.get('#command_input').type("a = [0.5,0.5]{enter}");
|
||||
cy.get('#command_input').type("a = vector(0,0,0.5,0.5){enter}");
|
||||
cy.get('#0').invoke('attr','d').should('eq','M550 350 L600 300');
|
||||
cy.get('#0').invoke('attr','class').should('eq','vector');
|
||||
cy.get('#0').invoke('attr','marker-end').should('eq','url(#vector_arrow)');
|
||||
cy.get('#0').invoke('attr','marker-end').should('eq','url(#arrow)');
|
||||
|
||||
cy.get('#command_input').type("b = vector(0,0,-1,1){enter}");
|
||||
cy.get('#1').invoke('attr','d').should('eq','M550 350 L450 250');
|
||||
|
|
|
|||
|
|
@ -4,13 +4,11 @@ body {
|
|||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.right {
|
||||
.right{
|
||||
color: gray;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -47,21 +45,12 @@ svg {
|
|||
right: 10px;
|
||||
bottom: 0;
|
||||
width: 40%;
|
||||
height: 20em;
|
||||
height: 10em;
|
||||
border: 2px solid darkgray;
|
||||
border-radius: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#slider {
|
||||
position: absolute;
|
||||
left: calc(50% - 1.5em);
|
||||
top: -1em;
|
||||
color: darkgray;
|
||||
cursor: row-resize;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.axis {
|
||||
stroke-width: 1.5;
|
||||
stroke: lightpink;
|
||||
|
|
@ -73,25 +62,12 @@ svg {
|
|||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.matrix {
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.matrix.i {
|
||||
stroke: green;
|
||||
}
|
||||
|
||||
.matrix.j {
|
||||
stroke: red;
|
||||
}
|
||||
|
||||
#prompt {
|
||||
#prompt{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.multiline {
|
||||
.multiline{
|
||||
border-top: 1px slategray solid;
|
||||
border-left: 1px slategray solid;
|
||||
border-right: 1px slategray solid;
|
||||
|
|
@ -100,11 +76,11 @@ svg {
|
|||
border-top-right-radius: 3px;
|
||||
}
|
||||
|
||||
.single_line {
|
||||
.single_line{
|
||||
border: none transparent;
|
||||
}
|
||||
|
||||
#command_input {
|
||||
#command_input{
|
||||
background: #111;
|
||||
color: greenyellow;
|
||||
outline: none;
|
||||
|
|
@ -112,12 +88,12 @@ svg {
|
|||
height: 1em;
|
||||
}
|
||||
|
||||
#command_history {
|
||||
#command_history{
|
||||
font-size: 12px;
|
||||
color: greenyellow;
|
||||
position: absolute;
|
||||
bottom: 1.5em;
|
||||
max-height: 20em;
|
||||
max-height: 9em;
|
||||
width: 100%;
|
||||
overflow-y: visible;
|
||||
overflow-x: hidden;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
<body>
|
||||
<a class="right" href="https://github.com/shautvast/matrepl" target="_blank">https://github.com/shautvast/matrepl</a>
|
||||
<div id="console">
|
||||
<div id="slider">___</div>
|
||||
<div id="command_history">
|
||||
<div id="bottom"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,9 +11,6 @@ export const functions = {
|
|||
return create_vector(args[0], args[1], args[2], args[3]);
|
||||
}
|
||||
},
|
||||
id: () => {
|
||||
return create_2d_id_matrix()
|
||||
},
|
||||
hide: (args) => {
|
||||
return hide(args[0]);
|
||||
},
|
||||
|
|
@ -62,26 +59,13 @@ export const show = function (vector) {
|
|||
const help = function () {
|
||||
return {
|
||||
description:
|
||||
`- vector(x0, y0, x,y): draws a vector from x0,y0 to x,y
|
||||
x0 and y0 default to 0 (the origin)
|
||||
- [x,y] also draws a vector, but generally, [i,j,k...] defines an array
|
||||
- remove(<identifier>|<ref>): removes an object,
|
||||
a ref is @n where n is the reference number asigned to the object
|
||||
- "..." is a lazy expression
|
||||
|
||||
Try the following:
|
||||
a = [0.5, 0.5]
|
||||
b = [-1,1]
|
||||
c = "a+b"
|
||||
a = a*2
|
||||
=> when a is updated, c is too.
|
||||
Now try dragging a vector using the mouse pointer and see what happens.
|
||||
(NB dragging c won't work, because it is lazy)`
|
||||
|
||||
`- vector(<x0>, <y0>, <x>, <y>): draws a vector from x0,y0 to x,y
|
||||
- remove(<identifier>|<ref>): removes an object,
|
||||
a ref is @n where n is the reference number asigned to the object`
|
||||
}
|
||||
}
|
||||
|
||||
export const create_vector = function (x0, y0, x, y) { //rename to create_vector
|
||||
const create_vector = function (x0, y0, x, y) { //rename to create_vector
|
||||
const vector = {
|
||||
id: index_sequence++,
|
||||
x0: x0,
|
||||
|
|
@ -106,8 +90,7 @@ export const create_vector = function (x0, y0, x, y) { //rename to create_vector
|
|||
return show(this);
|
||||
},
|
||||
equals: function (other) {
|
||||
return (this.id === other.id ||
|
||||
(this.type === other.type && this.x0 === other.x0 && this.y0 === other.y0 && this.x === other.x && this.y === other.y));
|
||||
return (this.id === other.id || (this.x0 === other.x0 && this.y0 === other.y0 && this.x === other.x && this.y === other.y));
|
||||
}
|
||||
};
|
||||
return vector;
|
||||
|
|
@ -175,36 +158,4 @@ export const logical_and = function (left, right) {
|
|||
|
||||
export const logical_or = function (left, right) {
|
||||
return left || right;
|
||||
}
|
||||
|
||||
const create_2d_id_matrix = function () {
|
||||
return {
|
||||
data: [[1, 0], [0, 1]],
|
||||
id: index_sequence++,
|
||||
is_visual: true,
|
||||
is_vector: false, // for type comparison
|
||||
is_matrix: true,
|
||||
type: 'matrix', // for showing type to user
|
||||
is_new: true, // to determine view action
|
||||
visible: true,
|
||||
toString: function () {
|
||||
return `matrix@${this.id}`;
|
||||
},
|
||||
hide: function () {
|
||||
return hide(this);
|
||||
},
|
||||
label: function (text) {
|
||||
return label(this, text);
|
||||
},
|
||||
show: function () {
|
||||
return show(this);
|
||||
},
|
||||
equals: function (other) {
|
||||
return (this.id === other.id || (this.type === other.type && this.data === other.data)); // TODO
|
||||
},
|
||||
row: function (index) {
|
||||
return this.data[index];
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
102
src/js/index.js
102
src/js/index.js
|
|
@ -1,10 +1,9 @@
|
|||
import '../css/app.css';
|
||||
import {scan, token_types} from './scanner';
|
||||
import {parse} from './parser';
|
||||
import {add_matrix_view, add_vector_arrow, add_vector_arrow_to_svg, update_vector_arrow,} from "./svg_functions";
|
||||
import {add_vector_arrow, add_vector_arrow_to_svg, update_vector_arrow} from "./svg_functions";
|
||||
import {
|
||||
addition,
|
||||
create_vector,
|
||||
division,
|
||||
functions,
|
||||
label,
|
||||
|
|
@ -20,7 +19,7 @@ const bindings = {}; // binding -> {name:binding_name, evaluated: evaluated_l
|
|||
const references = {}; // for retrieval of objects by reference (@n, where n is a number)
|
||||
const command_input_element = document.getElementById('command_input');
|
||||
const command_history_element = document.getElementById('command_history');
|
||||
command_input_element.value = 'help()';
|
||||
command_input_element.value = '';
|
||||
let command_history = [''];
|
||||
let command_history_index = 0;
|
||||
|
||||
|
|
@ -28,8 +27,7 @@ const keywords = {
|
|||
'true': true,
|
||||
'false': false,
|
||||
'pi': Math.PI,
|
||||
'PI': Math.PI,
|
||||
'e': Math.E
|
||||
'PI': Math.PI
|
||||
}
|
||||
|
||||
export const update_visible_objects = function () {
|
||||
|
|
@ -97,9 +95,6 @@ command_input_element.onkeypress = function handle_key_input(event) {
|
|||
|
||||
command_input_element.onkeyup = function handle_key_input(event) {
|
||||
adjust_input_element_height();
|
||||
if (event.key === 'c' && event.ctrlKey) {
|
||||
command_input_element.value = '';
|
||||
}
|
||||
if (event.key === 'ArrowUp' && !event.shiftKey) {
|
||||
if (command_history_index > -1) {
|
||||
command_input_element.value = command_history[command_history_index];
|
||||
|
|
@ -138,41 +133,41 @@ const handle_enter = function () {
|
|||
let tokens = scan(command);
|
||||
let statement = parse(tokens);
|
||||
value = visit(statement);
|
||||
if (value !== undefined) {
|
||||
let binding;
|
||||
if (value.is_binding) { // if it's declaration work with the initializer
|
||||
binding = value.name; // but we also need the name of the bound variable
|
||||
value = state[binding]; // lookup the value for the binding
|
||||
} else if (Object.prototype.hasOwnProperty.call(value, ['id'])) {
|
||||
references['@' + value.id] = value;
|
||||
}
|
||||
while (value.lazy_expression) {
|
||||
value = value.get();
|
||||
}
|
||||
if (binding) {
|
||||
bindings[binding].evaluated = value; // store evaluation result
|
||||
}
|
||||
let binding;
|
||||
if (value.is_binding) { // if it's declaration work with the initializer
|
||||
binding = value.name; // but we also need the name of the bound variable
|
||||
value = state[binding]; // lookup the value for the binding
|
||||
} else if (Object.prototype.hasOwnProperty.call(value, ['id'])) {
|
||||
references['@' + value.id] = value;
|
||||
}
|
||||
while (value.lazy_expression) {
|
||||
value = value.get();
|
||||
}
|
||||
if (binding) {
|
||||
bindings[binding].evaluated = value; // store evaluation result
|
||||
}
|
||||
|
||||
if (value.is_visual) {
|
||||
if (value.is_vector) {
|
||||
create_or_update_vector(binding, value);
|
||||
} else if (value.is_matrix) {
|
||||
create_or_update_matrix(binding, value);
|
||||
}
|
||||
if (value.is_visual) {
|
||||
if (binding && bindings[binding].previous && bindings[binding].previous.is_visual) {
|
||||
update_vector_arrow(bindings[binding].previous.id, value);
|
||||
} else {
|
||||
if (binding && bindings[binding].previous && bindings[binding].previous.is_visual) {
|
||||
label(bindings[binding].previous, '@' + bindings[binding].previous.id);
|
||||
if (value.is_new) {
|
||||
value.label_text = binding ? binding : "";
|
||||
value.is_new = false;
|
||||
add_vector_arrow(value);
|
||||
}
|
||||
}
|
||||
update_visible_objects();
|
||||
if (value.description) {
|
||||
value = value.description;
|
||||
}
|
||||
} else {
|
||||
value = 'value is undefined';
|
||||
if (binding && bindings[binding].previous && bindings[binding].previous.is_visual) {
|
||||
label(bindings[binding].previous, '@' + bindings[binding].previous.id);
|
||||
}
|
||||
}
|
||||
} catch (exception) {
|
||||
value = exception.message;
|
||||
update_visible_objects();
|
||||
if (value.description) {
|
||||
value = value.description;
|
||||
}
|
||||
} catch (e) {
|
||||
value = e.message;
|
||||
}
|
||||
command_history_element.innerText += value.toString() + "\n";
|
||||
command_history.push(command);
|
||||
|
|
@ -274,15 +269,6 @@ const visit = function (expr) {
|
|||
case 'reference': {
|
||||
return references[expr.name];
|
||||
}
|
||||
case 'array': { //unsure this is what I want
|
||||
let array = expr.elements.map(x => visit(x));
|
||||
if (array.length === 2) {
|
||||
return create_vector(0, 0, array[0], array[1]);
|
||||
} else {
|
||||
return array;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -322,28 +308,4 @@ const resolve_arguments = function (argument_exprs) {
|
|||
}
|
||||
return value;
|
||||
});
|
||||
}
|
||||
|
||||
function create_or_update_vector(binding, value) {
|
||||
if (binding && bindings[binding].previous && bindings[binding].previous.is_visual) {
|
||||
update_vector_arrow(bindings[binding].previous.id, value);
|
||||
} else {
|
||||
if (value.is_new) {
|
||||
value.label_text = binding ? binding : "";
|
||||
value.is_new = false;
|
||||
add_vector_arrow(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function create_or_update_matrix(binding, value) {
|
||||
if (binding && bindings[binding].previous && bindings[binding].previous.is_visual) {
|
||||
// update_matrix_view(bindings[binding].previous.id, value);
|
||||
} else {
|
||||
if (value.is_new) {
|
||||
value.label_text = binding ? binding : "";
|
||||
value.is_new = false;
|
||||
add_matrix_view(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -110,6 +110,7 @@ export const parse = function (tokens) {
|
|||
return {type: 'call', name: callee, arguments: arguments_list};
|
||||
}
|
||||
|
||||
|
||||
function primary() {
|
||||
if (match([token_types.NUMERIC, token_types.STRING])) {
|
||||
return {type: 'literal', value: previous_token().value, value_type: previous_token().type};
|
||||
|
|
@ -146,23 +147,6 @@ export const parse = function (tokens) {
|
|||
};
|
||||
advance();
|
||||
return result;
|
||||
} else if (match([token_types.LEFT_BRACKET])) {
|
||||
let array = [];
|
||||
if (!check(token_types.RIGHT_BRACKET, token_index)) {
|
||||
let result;
|
||||
do {
|
||||
result = expression();
|
||||
if (result) {
|
||||
array.push(result);
|
||||
} else {
|
||||
throw {message: "Expect ']' after array elements."};
|
||||
}
|
||||
match([token_types.COMMA]);
|
||||
} while (!match([token_types.RIGHT_BRACKET]));
|
||||
}
|
||||
|
||||
return {type: 'array', elements: array};
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
import {update_visible_objects} from "./index";
|
||||
|
||||
let vectors_by_id = {};
|
||||
let matrices_by_id = {};
|
||||
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
|
||||
const slider = document.getElementById('slider');
|
||||
const console_element = document.getElementById('console');
|
||||
|
||||
let moving_vector; // user can move vector arrows. when moving, this refers to the arrow
|
||||
let window_width = window.innerWidth, window_height = window.innerHeight;
|
||||
let origin_x = Math.floor((window_width / grid_size) / 2) * grid_size + half_grid_size,
|
||||
origin_y = Math.floor((window_height / grid_size) / 2) * grid_size + half_grid_size;
|
||||
let slider_start_Y, slider_start_height;
|
||||
let width = window.innerWidth, height = window.innerHeight;
|
||||
let origin_x = Math.floor((width / grid_size) / 2) * grid_size + half_grid_size,
|
||||
origin_y = Math.floor((height / grid_size) / 2) * grid_size + half_grid_size;
|
||||
|
||||
/**
|
||||
* Creates an svg element
|
||||
* @param element_type path,g, etc
|
||||
|
|
@ -91,16 +89,15 @@ const create_line = function (x0, y0, x1, y1, css_class) {
|
|||
* @param x1 end_x
|
||||
* @param y1 end_y
|
||||
* @param css_class class attribute
|
||||
* @param arrow_def SVG definition of the arrow head
|
||||
* @returns {SVGPathElement}
|
||||
*/
|
||||
const create_arrow = function (id, x0, y0, x1, y1, css_class, arrow_def) {
|
||||
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;
|
||||
path.setAttribute('class', css_class);
|
||||
path.setAttribute('marker-end', arrow_def);
|
||||
path.setAttribute('marker-end', 'url(#arrow)');
|
||||
return path;
|
||||
}
|
||||
|
||||
|
|
@ -121,27 +118,31 @@ export const create_grid = function (css_class, bg_css_class) {
|
|||
group.setAttribute('id', 'grid');
|
||||
const horizontal = create_svg_element('g');
|
||||
horizontal.setAttribute('id', 'horizontal');
|
||||
for (let y = 0; y < window_height; y += grid_size) {
|
||||
horizontal.appendChild(create_line(0, y + half_grid_size, window_width, y + half_grid_size, css_class));
|
||||
horizontal.appendChild(create_line(0, y, window_width, y, bg_css_class));
|
||||
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_svg_element('g');
|
||||
vertical.setAttribute('id', 'vertical');
|
||||
for (let x = 0; x < window_width; x += grid_size) {
|
||||
vertical.appendChild(create_line(x + half_grid_size, 0, x + half_grid_size, window_height, css_class));
|
||||
vertical.appendChild(create_line(x, 0, x, window_height, bg_css_class));
|
||||
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));
|
||||
vertical.appendChild(create_line(x, 0, x, height, bg_css_class));
|
||||
}
|
||||
group.appendChild(vertical);
|
||||
return group;
|
||||
}
|
||||
|
||||
export const add_vector_arrow = function (vector) {
|
||||
vectors_by_id[vector.id] = vector;
|
||||
add_vector_arrow_to_svg(vector);
|
||||
}
|
||||
|
||||
function create_label(vector, color) {
|
||||
function create_label(vector) {
|
||||
let label = create_svg_element('text');
|
||||
label.setAttribute('x', (calc_screen_x(vector.x) - 5).toString());
|
||||
label.setAttribute('y', (calc_screen_y(vector.y) + 15).toString());
|
||||
label.setAttribute('fill', color);
|
||||
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_node = document.createTextNode(vector.label_text);
|
||||
label.appendChild(text_node);
|
||||
|
|
@ -162,49 +163,26 @@ export const update_label_text = function (id, text) {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
export const add_vector_arrow_to_svg = function (vector) {
|
||||
let vector_group = get_or_create_vector_group();
|
||||
let vector_arrow = create_arrow(vector.id, vector.x0, vector.y0, vector.x, vector.y, 'vector', 'url(#vector_arrow)');
|
||||
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;
|
||||
|
||||
window.onmousemove = move;
|
||||
|
||||
window.onmouseup = function () {
|
||||
window.onmousemove = undefined;
|
||||
window.onmouseup = undefined;
|
||||
};
|
||||
};
|
||||
vector_group.appendChild(vector_arrow);
|
||||
|
||||
let label = create_label(vector, 'yellow');
|
||||
let label = create_label(vector);
|
||||
vector_group.appendChild(label);
|
||||
}
|
||||
|
||||
export const add_matrix_to_svg = function (matrix) {
|
||||
let matricesGroup = get_or_create_matrices_group();
|
||||
let vector_arrow_i = create_arrow(matrix.id, 0, 0, matrix.row(0)[0], matrix.row(0)[1], 'matrix i', 'url(#matrix_i_arrow)');
|
||||
let vector_arrow_j = create_arrow(matrix.id, 0, 0, matrix.row(1)[0], matrix.row(1)[1], 'matrix j', 'url(#matrix_j_arrow)');
|
||||
matricesGroup.appendChild(vector_arrow_i);
|
||||
matricesGroup.appendChild(vector_arrow_j);
|
||||
|
||||
matricesGroup.appendChild(create_label({
|
||||
x: matrix.row(0)[0],
|
||||
y: matrix.row(0)[1],
|
||||
id: matrix.id + "i",
|
||||
label_text: 'i'
|
||||
}, 'green'));
|
||||
matricesGroup.appendChild(create_label({
|
||||
x: matrix.row(1)[0],
|
||||
y: matrix.row(1)[1],
|
||||
id: matrix.id + "j",
|
||||
label_text: 'j'
|
||||
}, 'red'));
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Draws all the vectors.
|
||||
*
|
||||
* vector {
|
||||
* x0,y0 origin
|
||||
* x,y coordinates
|
||||
* }
|
||||
*/
|
||||
const draw_vectors = function () {
|
||||
const vector_group = get_or_create_vector_group();
|
||||
|
|
@ -218,21 +196,6 @@ const draw_vectors = function () {
|
|||
svg.appendChild(vector_group);
|
||||
}
|
||||
|
||||
/**
|
||||
* Draws all the matrices.
|
||||
*/
|
||||
const draw_matrices = function () {
|
||||
const matrices_group = get_or_create_matrices_group();
|
||||
|
||||
let matrices = Object.values(matrices_by_id);
|
||||
for (let i = 0; i < matrices.length; i++) {
|
||||
if (matrices[i].visible) {
|
||||
add_matrix_to_svg(matrices[i]);
|
||||
}
|
||||
}
|
||||
svg.appendChild(matrices_group);
|
||||
}
|
||||
|
||||
const get_or_create_vector_group = function () {
|
||||
let vector_group = document.getElementById('vectors');
|
||||
if (vector_group === null || vector_group === undefined) {
|
||||
|
|
@ -244,17 +207,6 @@ const get_or_create_vector_group = function () {
|
|||
return vector_group;
|
||||
}
|
||||
|
||||
const get_or_create_matrices_group = function () {
|
||||
let matrices_group = document.getElementById('matrices');
|
||||
if (matrices_group === null || matrices_group === undefined) {
|
||||
matrices_group = create_svg_element("g");
|
||||
svg.appendChild(matrices_group);
|
||||
matrices_group.id = 'matrices';
|
||||
}
|
||||
|
||||
return matrices_group;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes all vectors in the svg and calls draw_vectors to draw updated versions.
|
||||
*/
|
||||
|
|
@ -262,14 +214,6 @@ const redraw_vectors = function () {
|
|||
remove_child(svg, 'vectors');
|
||||
draw_vectors();
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes all vectors in the svg and calls draw_vectors to draw updated versions.
|
||||
*/
|
||||
const redraw_matrices = function () {
|
||||
remove_child(svg, 'matrices');
|
||||
draw_matrices();
|
||||
}
|
||||
/**
|
||||
* removes the grid from the DOM and adds an updated one.
|
||||
*/
|
||||
|
|
@ -300,16 +244,15 @@ export const update_vector_arrow = function (existing_id, new_vector) {
|
|||
export const redraw = function () {
|
||||
redraw_grid();
|
||||
redraw_vectors();
|
||||
redraw_matrices();
|
||||
}
|
||||
|
||||
const create_axes = function () {
|
||||
let axes_group = create_svg_element('g');
|
||||
axes_group.setAttribute('id', 'axes');
|
||||
let x = create_line(0, origin_y, window_width, origin_y, 'axis');
|
||||
let x = create_line(0, origin_y, width, origin_y, 'axis');
|
||||
x.id = 'x-axis';
|
||||
axes_group.appendChild(x);
|
||||
let y = create_line(origin_x, 0, origin_x, window_height, 'axis');
|
||||
let y = create_line(origin_x, 0, origin_x, height, 'axis');
|
||||
y.id = 'y-axis';
|
||||
axes_group.appendChild(y);
|
||||
return axes_group;
|
||||
|
|
@ -319,10 +262,10 @@ const create_axes = function () {
|
|||
* setup the arrow head for the vector
|
||||
* @returns {SVGDefsElement}
|
||||
*/
|
||||
const create_defs = function (type, color) {
|
||||
const create_defs = function () {
|
||||
let defs = create_svg_element('defs');
|
||||
let marker = create_svg_element('marker');
|
||||
marker.id = type;
|
||||
marker.id = 'arrow';
|
||||
marker.setAttribute('orient', 'auto');
|
||||
marker.setAttribute('viewBox', '0 0 10 10');
|
||||
marker.setAttribute('markerWidth', '3');
|
||||
|
|
@ -332,25 +275,30 @@ const create_defs = function (type, color) {
|
|||
marker.setAttribute('refY', '5');
|
||||
let polyline = create_svg_element('polyline');
|
||||
polyline.setAttribute('points', '0,0 10,5 0,10 1,5');
|
||||
polyline.setAttribute('fill', color);
|
||||
polyline.setAttribute('fill', 'yellow');
|
||||
marker.appendChild(polyline);
|
||||
defs.appendChild(marker);
|
||||
return defs;
|
||||
}
|
||||
|
||||
const move = function (event) {
|
||||
let current_x = event.offsetX;
|
||||
let current_y = event.offsetY;
|
||||
let vector = vectors_by_id[parseInt(moving_vector.id)];
|
||||
if (vector) {
|
||||
vector.x = (current_x - origin_x) / grid_size;
|
||||
vector.y = (origin_y - current_y) / grid_size;
|
||||
moving_vector.setAttribute('d', create_d(origin_x, origin_y, current_x, current_y));
|
||||
update_label(moving_vector.id, moving_vector.id, current_x + 5, current_y + 5);
|
||||
update_visible_objects();
|
||||
/**
|
||||
* The moving operation. Called by onmousemove on the svg ('canvas')
|
||||
* @param event
|
||||
*/
|
||||
const move_vector = function (event) {
|
||||
if (moving_vector) {
|
||||
let current_x = event.offsetX;
|
||||
let current_y = event.offsetY;
|
||||
let vector = vectors_by_id[parseInt(moving_vector.id)];
|
||||
if (vector) {
|
||||
vector.x = (current_x - origin_x) / grid_size;
|
||||
vector.y = (origin_y - current_y) / grid_size;
|
||||
moving_vector.setAttribute('d', create_d(origin_x, origin_y, current_x, current_y));
|
||||
update_label(moving_vector.id, moving_vector.id, current_x + 5, current_y + 5);
|
||||
update_visible_objects();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the SVG
|
||||
* @returns {SVGElement}
|
||||
|
|
@ -358,32 +306,21 @@ const move = function (event) {
|
|||
const create_svg = function () {
|
||||
let svg = create_svg_element('svg');
|
||||
|
||||
svg.onmousemove = move;
|
||||
svg.onmouseup = function stop_moving() {
|
||||
svg.onmousemove = move_vector;
|
||||
svg.onmouseup = function stop_moving_vector() {
|
||||
moving_vector = undefined;
|
||||
};
|
||||
|
||||
svg.appendChild(create_defs('vector_arrow', 'yellow'));
|
||||
svg.appendChild(create_defs('matrix_i_arrow', 'green'));
|
||||
svg.appendChild(create_defs('matrix_j_arrow', 'red'));
|
||||
let defs = create_defs();
|
||||
svg.appendChild(defs);
|
||||
return svg;
|
||||
}
|
||||
|
||||
export const add_vector_arrow = function (vector) {
|
||||
vectors_by_id[vector.id] = vector;
|
||||
add_vector_arrow_to_svg(vector);
|
||||
}
|
||||
|
||||
export const add_matrix_view = function (matrix) {
|
||||
matrices_by_id[matrix.id] = matrix;
|
||||
add_matrix_to_svg(matrix);
|
||||
}
|
||||
|
||||
document.body.onresize = function recalculate_window_dimensions() {
|
||||
window_width = window.innerWidth;
|
||||
window_height = window.innerHeight;
|
||||
origin_x = Math.floor((window_width / grid_size) / 2) * grid_size + half_grid_size;
|
||||
origin_y = Math.floor((window_height / grid_size) / 2) * grid_size + half_grid_size;
|
||||
width = window.innerWidth;
|
||||
height = window.innerHeight;
|
||||
origin_x = Math.floor((width / grid_size) / 2) * grid_size + half_grid_size;
|
||||
origin_y = Math.floor((height / grid_size) / 2) * grid_size + half_grid_size;
|
||||
redraw();
|
||||
}
|
||||
|
||||
|
|
@ -392,18 +329,3 @@ document.body.appendChild(svg);
|
|||
svg.appendChild(create_grid('grid', 'bg-grid'));
|
||||
svg.appendChild(create_axes());
|
||||
get_or_create_vector_group();
|
||||
get_or_create_matrices_group();
|
||||
|
||||
slider.onmousedown = function (event) {
|
||||
slider_start_Y = event.clientY;
|
||||
slider_start_height = parseInt(document.defaultView.getComputedStyle(console_element).height, 10);
|
||||
|
||||
window.onmousemove = function (event) {
|
||||
console_element.style.height = (slider_start_height - (event.clientY - slider_start_Y)) + 'px';
|
||||
}
|
||||
|
||||
window.onmouseup = function () {
|
||||
window.onmousemove = undefined;
|
||||
window.onmouseup = undefined;
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue