You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
210 lines
7.7 KiB
210 lines
7.7 KiB
1 year ago
|
var currently_dragging = null; // if this is null, we have nothing being dragged. if it's not null, then it will represent the glyph object (as goes in the glyphs array) which is currently being dragged
|
||
|
|
||
|
const selection_thresh = 10;
|
||
|
var major_radius;
|
||
|
const glyphs = [];
|
||
|
|
||
|
var embed;
|
||
|
|
||
|
|
||
|
$(document).ready(function() {
|
||
|
svg = $('svg#arena')[0];
|
||
|
major_radius = parseFloat($('circle').attr('r'));
|
||
|
|
||
|
//$.each(glyphs, function(idx, glyph) {
|
||
|
// glyph.element.appendTo($(svg));
|
||
|
//})
|
||
|
|
||
|
$(document).on("mouseup", on_mouse_up);
|
||
|
$("#place_group").on("mousedown", omd_consonant);
|
||
|
$("#vowel_place_group").on("mousedown", omd_vowel);
|
||
|
|
||
|
// handle changing the consonants
|
||
|
$('#consonant_form input').on('change', function(event) {
|
||
|
let glyph = $("#consonant_form input[name='glyphs']:checked").val(); // checked value for the glyph should be here
|
||
|
let radical = $("#consonant_form input[name='radicals']:checked").val(); // checked value for the radical should be here
|
||
|
|
||
|
add_class($('svg #glyph-' + glyph + '-' + radical), 'chosen');
|
||
|
|
||
|
$('#place_group image.radical').attr("href", radical);
|
||
|
$('#place_group image.glyph').attr("href", glyph);
|
||
|
|
||
|
});
|
||
|
|
||
|
$('td > svg').on("click", function(event) {
|
||
|
let receptacle = $("#consonant_put_it_in_here");
|
||
|
let selected = $(this);
|
||
|
receptacle.html(selected.html());
|
||
|
})
|
||
|
|
||
|
// handle changing the vowels
|
||
|
$('.vowel-example > svg').on("click", function(event) {
|
||
|
let receptacle = $('#vowel_put_it_in_here');
|
||
|
let selected = $(this);
|
||
|
receptacle.html(selected.html());
|
||
|
});
|
||
|
|
||
|
var t = $("#testbed");
|
||
|
var glyphs = split_megaglyph(t.find(".angle-1"));
|
||
|
$.each(glyphs, function(idx, glyph) {
|
||
|
glyph.attr("transform", `translate(${100 + idx*100}, 0)`);
|
||
|
t.append(glyph);
|
||
|
});
|
||
|
|
||
|
populate_consonant_grid();
|
||
|
});
|
||
|
|
||
|
function populate_consonant_grid() {
|
||
|
// this function expects that there's a #consonant-grid table, where each row corresponds to a glyph set
|
||
|
// the cells of the row need to be filled with the various possible configurations of that glyph
|
||
|
// so like, the <th> in a given row should contain a .megaglyph svg group, which contains the base glyph plus all possible radicals.
|
||
|
// then we use the split_megaglyph function to generate the five possible configurations out of that megaglyph
|
||
|
// and insert the five configured glyphs into their corresponding (td) cells of the table
|
||
|
|
||
|
$("#consonant-grid tbody tr").each(function (asdf, row) { // iterate over the rows in the table
|
||
|
|
||
|
// row will now be something like <tr><th/><td/><td/><td/><td/><td/><th/></tr>
|
||
|
// that is, a tr containing one th on either end plus a td for each consonant in this row
|
||
|
var head = $(row).find("th:first-child svg"); // this is the header for the row, which should contain the .megaglyph object
|
||
|
var megaglyph = head.find(".megaglyph");
|
||
|
var glyphs = split_megaglyph(megaglyph); // now this is a list of the configured consonant symbols
|
||
|
|
||
|
$(row).find("td").each(function(idx, cell) { // iterate over the cells in the row
|
||
|
// cell will now be a <td> cell which contains the IPA for that cell's consonants, plus the <svg> canvas into which to insert the configured consonant symbol
|
||
|
|
||
|
$(cell).find("svg").append(glyphs[idx]);
|
||
|
});
|
||
|
});
|
||
|
}
|
||
|
|
||
|
|
||
|
function split_megaglyph(megaglyph) {
|
||
|
// megaglyph is an svg object which contains all the possible radicals at once.
|
||
|
// this should return a list of new glyphs, cloned frmo megaglyph, each of which contains only the radicals it wants.
|
||
|
var one = megaglyph.clone();
|
||
|
one.find('.line_1,.line_2,.line_3,.dot_2,.dot_3').remove(); // only .dot_1
|
||
|
remove_class(one, "megaglyph");
|
||
|
var two = megaglyph.clone();
|
||
|
two.find('.line_2,.line_3,.dot_1,.dot_2,.dot_3').remove(); // line 1 only
|
||
|
remove_class(two, "megaglyph");
|
||
|
var three = megaglyph.clone();
|
||
|
three.find('.line_1,.line_2,.line_3,.dot_1').remove(); // only dots 2 and 3
|
||
|
remove_class(three, "megaglyph");
|
||
|
var four = megaglyph.clone();
|
||
|
four.find('.line_1,.dot_1,.dot_2,.dot_3').remove(); //lines 2 and 3
|
||
|
remove_class(four, "megaglyph");
|
||
|
var five = megaglyph.clone();
|
||
|
five.find('.line_1,.line_2,.line_3').remove(); // all three dots
|
||
|
remove_class(five, "megaglyph");
|
||
|
|
||
|
return [one, two, three, four, five];
|
||
|
}
|
||
|
|
||
|
|
||
|
function on_mouse_down(event) {
|
||
|
// this is called on an element when the mouse is clicked down on it. event.data will contain the glyph object
|
||
|
|
||
|
currently_dragging = event.data;
|
||
|
}
|
||
|
|
||
|
function on_mouse_down_create_from(source) {
|
||
|
// call this with a source place (from which it should copy some svg) to get an onmousedown for creating that glyph
|
||
|
return function(event) {
|
||
|
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg);
|
||
|
var g = make_new_glyph(source);
|
||
|
g.position = mouse_position;
|
||
|
set_transform(g.element, mouse_position, appropriate_angle(mouse_position));
|
||
|
|
||
|
currently_dragging = g;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function omd_consonant(event) {
|
||
|
console.log("WHDSFLKJ");
|
||
|
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg);
|
||
|
var g = make_new_glyph($("#place_group"));
|
||
|
g.position = mouse_position;
|
||
|
set_transform(g.element, mouse_position, appropriate_angle(mouse_position));
|
||
|
|
||
|
currently_dragging = g;
|
||
|
}
|
||
|
|
||
|
function omd_vowel(event) {
|
||
|
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg);
|
||
|
var g = make_new_glyph($("#vowel_copy_from_here"));
|
||
|
g.position = mouse_position;
|
||
|
set_transform(g.element, mouse_position, appropriate_angle(mouse_position));
|
||
|
|
||
|
currently_dragging = g;
|
||
|
}
|
||
|
|
||
|
|
||
|
function omd_consonant(event) {
|
||
|
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg);
|
||
|
var g = make_new_glyph($("#place_group"));
|
||
|
g.position = mouse_position;
|
||
|
set_transform(g.element, mouse_position, appropriate_angle(mouse_position));
|
||
|
|
||
|
currently_dragging = g;
|
||
|
}
|
||
|
|
||
|
function make_new_glyph(source) {
|
||
|
// create a new glyph object by copying the elements pointed to by source
|
||
|
// this will add it to the svg and to the glyphs list
|
||
|
var x = {};
|
||
|
x.angle = 0;
|
||
|
x.element = source.clone().attr("id","").attr("onclick", "").attr("onmousedown", "");
|
||
|
x.position = {x:0, y:0};
|
||
|
set_transform(x.element, x.position, 0);
|
||
|
x.element.on("mousedown", x, on_mouse_down);
|
||
|
$(svg).append(x.element);
|
||
|
glyphs.push(x);
|
||
|
return x;
|
||
|
}
|
||
|
|
||
|
function on_mouse_up(event) {
|
||
|
// this is called on the whole document when the mouse is released on it. event.data is meaningless. this should handle releasing the current dragged element, if it exists.
|
||
|
if (currently_dragging != null && is_in_delete_region(currently_dragging.position)) {
|
||
|
remove(glyphs, currently_dragging);
|
||
|
currently_dragging.element.remove();
|
||
|
currently_dragging = null;
|
||
|
}
|
||
|
|
||
|
if (currently_dragging != null) {
|
||
|
currently_dragging.position = mul(norm(currently_dragging.position), major_radius);
|
||
|
set_transform(currently_dragging.element, currently_dragging.position, appropriate_angle(currently_dragging.position));
|
||
|
//currently_dragging.element.attr("x", currently_dragging.position.x);
|
||
|
//currently_dragging.element.attr("y", currently_dragging.position.y)
|
||
|
}
|
||
|
|
||
|
currently_dragging = null;
|
||
|
}
|
||
|
|
||
|
function is_in_delete_region(p) {
|
||
|
r = $("#delete");
|
||
|
first = {x:parseFloat(r.attr("x")), y:parseFloat(r.attr("y"))};
|
||
|
second = {x:parseFloat(r.attr("width"))+first.x, y:parseFloat(r.attr("height"))+first.y};
|
||
|
|
||
|
if (p.x > first.x && p.x < second.x && p.y > first.y && p.y < second.y) {
|
||
|
return true;
|
||
|
}
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
$(document).mousemove(function(event) {
|
||
|
|
||
|
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg);
|
||
|
const mouse_move = sub(mouse_position, previous_mouse_position);
|
||
|
|
||
|
$("#xthing").text("position is " + mouse_position.x + " " + mouse_position.y);
|
||
|
|
||
|
previous_mouse_position = mouse_position;
|
||
|
var s_position = mouse_position;
|
||
|
// get the position inside the svg tag for the mouse
|
||
|
|
||
|
if (currently_dragging != null) {
|
||
|
currently_dragging.position = add(currently_dragging.position, mouse_move);
|
||
|
set_transform(currently_dragging.element, currently_dragging.position, appropriate_angle(currently_dragging.position));
|
||
|
|
||
|
}
|
||
|
});
|