diff --git a/articles/circle_script/circle_setter.html b/articles/circle_script/circle_setter.html index a201fa4..06e3926 100644 --- a/articles/circle_script/circle_setter.html +++ b/articles/circle_script/circle_setter.html @@ -10,13 +10,21 @@ - - - - -
@@ -140,34 +107,27 @@ -
- + - - - - - - - + + + + @@ -408,280 +365,105 @@
-
+
+
+ + + + + + + + + + + + + +
- - - - - - [ɑ, a], box or bah + base-omega dot-outer emphasis-outer [ɑ, a], box or bah
- - - - - [ʌ, ə], but or schwa + base-omega dot-outer [ʌ, ə], but or schwa
- - - - - - [i], beat + base-mound dot-inner emphasis-inner [i], beat
- - - - - [ɪ], bit + base-mound dot-inner [ɪ], bit
- - - - - - [u], boot + base-mound triangle-inner emphasis-inner [u], boot
- - - - - [ʊ], book + base-mound triangle-inner [ʊ], book
- - - - - - [ɛi, e], bait + base-mound dot-outer emphasis-outer [ɛi, e], bait
- - - - - [ɛ], bet + base-mound dot-outer [ɛ], bet
- - - - - - [o, ɔu], won't, boat + base-omega dot-inner emphasis-inner [o, ɔu], won't, boat
- - - - - [ɔ], bawk + base-omega dot-inner [ɔ], bawk
- - - - - [æ], bat + base-omega dot-on [æ], bat
- - - - - [au], cow + base-loop dot-outer [au], cow
- - - - - [ai, aɪ], by + base-loop dot-on [ai, aɪ], by
- - - - - [ɔi, ɔɪ], boy + base-loop dot-inner [ɔi, ɔɪ], boy
@@ -689,7 +471,5 @@
-

x value is something

- \ No newline at end of file diff --git a/articles/circle_script/circle_setter.js b/articles/circle_script/circle_setter.js index cdaa3de..2504632 100644 --- a/articles/circle_script/circle_setter.js +++ b/articles/circle_script/circle_setter.js @@ -1,57 +1,46 @@ 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; - +const vowels = []; +const consonants = []; $(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) { + $('td > svg').on("mousedown", 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) { + 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)); - 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); + currently_dragging = g; }); + $('td > svg').each(function() { this.setAttribute('viewBox',"0 30 40 100");}); populate_consonant_grid(); + + populate_vowels(); }); function populate_consonant_grid() { @@ -77,7 +66,6 @@ function populate_consonant_grid() { }); } - 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. @@ -100,6 +88,20 @@ function split_megaglyph(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 @@ -107,57 +109,45 @@ function on_mouse_down(event) { 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)); +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); - currently_dragging = g; + 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(source) { +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; } @@ -166,6 +156,7 @@ 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; } @@ -173,8 +164,7 @@ function on_mouse_up(event) { 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) + update_handles(currently_dragging); } currently_dragging = null; @@ -192,19 +182,23 @@ function is_in_delete_region(p) { } $(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) { + 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)); } -}); \ No newline at end of file +}); + +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)) +} \ No newline at end of file diff --git a/articles/circle_script/circle_setter_utils.js b/articles/circle_script/circle_setter_utils.js index 49523b4..a6fc05f 100644 --- a/articles/circle_script/circle_setter_utils.js +++ b/articles/circle_script/circle_setter_utils.js @@ -1,3 +1,9 @@ +SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) { + + return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM()); + +}; + function ns_elem () { if (typeof arguments[0] === "undefined") { console.log('There was an error in the element assist function. Called with no valid tag name!');} var elem; if (typeof arguments[1] === "string") { elem = document.createElementNS(arguments[1], arguments[0]); for (var i=2; i