shooflenet/articles/circle_script/circle_setter.js

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
var major_radius;
const glyphs = [];
const vowels = [];
const consonants = [];

$(document).ready(function() {
	svg = $('svg#arena')[0];
	major_radius = parseFloat($('circle').attr('r'));
	
	$(document).on("mouseup", on_mouse_up);

	$('td > svg').on("mousedown", function(event) {
		let receptacle = $("#consonant_put_it_in_here");
		let selected = $(this);
		receptacle.html(selected.html());

		const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg);
		
		var g = make_new_glyph_from($("#consonant_copy_from_here"));
		g.position = mouse_position;
		set_transform(g.element, mouse_position, appropriate_angle(mouse_position));

		currently_dragging = g;
	})
	$('.vowel-example > svg').on("mousedown", function(event) {
		let receptacle = $('#vowel_put_it_in_here');
		let selected = $(this);
		receptacle.html(selected.html());
		
		const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg);
		
		var g = make_new_glyph_from($("#vowel_copy_from_here"));
		g.position = mouse_position;
		set_transform(g.element, mouse_position, appropriate_angle(mouse_position));

		currently_dragging = g;
	});

	$('td > svg').each(function() { this.setAttribute('viewBox',"0 30 40 100");});
	populate_consonant_grid();

	populate_vowels();
});

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 populate_vowels() {
	megaglyph = $(".vowel.megaglyph");
	$(".vowel-example svg").each((i, ex) => {
		let glyphs = $(ex).text().replace(/(\s|\n)+/g,",").split(",").filter((a) => a!="")
		$(ex).text("");

		$.each(glyphs, (i, e) => { 
			let wanted_class = "." + e;
			let glyph_original = megaglyph.find(wanted_class);
			let new_glyph = glyph_original.clone();
			$(ex).append(new_glyph);
		});
	});
}

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 make_new_consonant(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.element.find("#consonant_put_it_in_here").attr("id","");
	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);

	x.handles = [];
	x.handles.push($(ns_elem("circle", svg_ns)).attr("r",2))
	x.handles.push($(ns_elem("circle", svg_ns)).attr("r",2))
	$.each(x.handles, () => $(svg).append(this));
	update_handles(x);
	glyphs.push(x);
	return x;
}

function make_new_glyph_from(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.element.find("#consonant_put_it_in_here").attr("id","");
	x.element.find("#vowel_put_it_in_here").attr("id","");
	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);

	x.handles = [];
	x.handles.push($(ns_elem("circle", svg_ns)).attr("r",2))
	x.handles.push($(ns_elem("circle", svg_ns)).attr("r",2))
	$(svg).append(x.handles[0]).append(x.handles[1]);
	update_handles(x);
	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);
		$.each(currently_dragging.handles, function() { $(this).remove(); });
		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));
		update_handles(currently_dragging);
	}

	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);

	previous_mouse_position = mouse_position;
	var s_position = mouse_position;
	// get the position inside the svg tag for the mouse

	if (currently_dragging != null) {
		update_handles(currently_dragging);

		currently_dragging.position = add(currently_dragging.position, mouse_move);
		set_transform(currently_dragging.element, currently_dragging.position, appropriate_angle(currently_dragging.position));

	}
});

function update_handles(g) {
	set_loc(g.handles[0], get_global_point_at_length(svg, g.element.find('path.glyph,path.vowel-base')[0], 0))
	set_loc(g.handles[1], get_global_point_at_length(svg, g.element.find('path.glyph,path.vowel-base')[0], 1000))
}