Compare commits
3 Commits
84c4fce3ff
...
9d0e9e0eb7
| Author | SHA1 | Date |
|---|---|---|
 Shoofle
|
9d0e9e0eb7 | 1 month ago |
|
Shoofle
|
a469213658 | 1 month ago |
|
Shoofle
|
06cdda7925 | 1 month ago |
@ -1,162 +1,440 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<script src="../../static/jquery.min.js" type="text/javascript"></script> |
||||
<link href="../../static/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||
<link href="../../static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css"> |
||||
<link href="../../static/shoofle.css" rel="stylesheet" type="text/css"> |
||||
<script src="circle_setter_utils.js" type="text/javascript"></script> |
||||
<script src="circle_setter.js" type="text/javascript"></script> |
||||
</head> |
||||
<body> |
||||
<style type="text/css"> |
||||
svg circle, svg path { fill: none; } |
||||
svg .glyph { stroke: #600; fill: none; } |
||||
svg .vowel { stroke: #044; } |
||||
svg .radical { stroke: #004; } |
||||
svg circle.radical { fill: black; } |
||||
svg circle { stroke: #044; } |
||||
.highlit { fill: red; } |
||||
.veryhighlit { fill: green; } |
||||
.clicked { fill: darkgreen; } |
||||
|
||||
svg .enclosure { stroke: #000; } |
||||
</style> |
||||
<div class="row-fluid"> |
||||
<div class="span6 offset3"> |
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="400px" preserveAspectRatio="xMidYMax" id="arena" viewBox="-105 -105 210 210"> |
||||
<defs> |
||||
<path id="mound" d="M-10,0 H-8 A9,8 0,0,1 8,0 H10" class="glyph"></path> |
||||
<g id="mound2"> |
||||
<path d="M-10,0 H-8 A9,8 0 0,1 8,0 H10" class="glyph"></path> |
||||
<path d="M-6,0 A7,6 0,0,1 6,0" class="glyph"></path> |
||||
</g> |
||||
<path id="omega" d="M-10,0 H-4 A7,7 0,1,1 4,0 H10" class="glyph"></path> |
||||
<g id="omega2"> |
||||
<path d="M-10,0 H-4 A7,7 0,1,1 4,0 H10" class="glyph"></path> |
||||
<path d="M-1,-1 A4.5,4.5 0,1,1 1,-1" class="glyph"></path> |
||||
</g> |
||||
<path id="angle" d="M-10,0 H-6 L0,-8 L6,0 H10" class="glyph"></path> |
||||
<g id="angle2"> |
||||
<path d="M-10,0 H-6 L0,-8 L6,0 H10" class="glyph"></path> |
||||
<path d="M-4,0 L0,-5.3333 L4,0" class="glyph"></path> |
||||
</g> |
||||
<path id="chalice" d="M-10,0 H-6 A15,15 0,0,1 -10,-6 A15,10 0,0,0 10,-6 A15,15 0,0,1 6,0 H10" class="glyph"></path> |
||||
<g id="chalice2"> |
||||
<path d="M-10,0 H-6 A15,15 0,0,1 -10,-6 A15,10 0,0,0 10,-6 A15,15 0,0,1 6,0 H10" class="glyph"></path> |
||||
<path d="M-8.5,-3 A 14,9 0,0,0 8.5,-3" class="glyph"></path> |
||||
</g> |
||||
<path id="loop" d="M-10,0 H-8 C6,0 6,-10 0,-10 C-6,-10 -6,0 6,0 H10" class="glyph"></path> |
||||
<g id="loop2"> |
||||
<path d="M-10,0 H-8 C6,0 6,-10 0,-10 C-6,-10 -6,0 6,0 H10" class="glyph"></path> |
||||
<circle r="2" cx="0" cy="-6" class="glyph"></circle> |
||||
</g> |
||||
<path id="weird_up" d="M -4,-4 A 4,6 0,0,0 0,-8 A 4,6 0,0,0 4,-4" class="vowel"></path> |
||||
<path id="weird_down" d="M -4,-8 A 4,6 0,0,0 0,-4 A 4,6 0,0,0 4,-8" class="vowel"></path> |
||||
</defs> |
||||
</svg> |
||||
</div> |
||||
</div> |
||||
<hr> |
||||
<input type="text" value="shoof~l ihs ~ bihg dohrk" /> |
||||
<h3>Available Sounds:</h3> |
||||
<p id="sounds_list"></p> |
||||
<script type="text/javascript"> |
||||
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<arguments.length; i+=2) { if (typeof arguments[i+1] === "undefined") { for (var key in arguments[i]) { elem.setAttribute(key, arguments[i][key]); } break; } else { for (var key in arguments[i]) { elem.setAttributeNS(arguments[i+1], key, arguments[i][key]); } } } } else { elem = document.createElement(arguments[0]); for (var i=1; i<arguments.length; i+=2) { if (typeof arguments[i+1] === "undefined") { for (var key in arguments[i]) { elem.setAttribute(key, arguments[i][key]); } break; } else { for (var key in arguments[i]) { elem.setAttributeNS(arguments[i+1], key, arguments[i][key]); } } } } return elem;} |
||||
|
||||
function svg_from_dom(point, svg) { |
||||
const pt = svg.createSVGPoint(); |
||||
pt.x = point.x; |
||||
pt.y = point.y; |
||||
|
||||
return pt.matrixTransform(svg.getScreenCTM().inverse()); |
||||
|
||||
#consonant-grid, #vowel-grid { |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
} |
||||
function point_from_circle(circle) { |
||||
return {x:parseFloat(circle.attr('cx')), y:parseFloat(circle.attr('cy'))}; |
||||
|
||||
/* consonants */ |
||||
td svg { |
||||
width: 3.5em; |
||||
height: 3.5em; |
||||
} |
||||
</script> |
||||
<script type="text/javascript"> |
||||
var svg_ns = "http://www.w3.org/2000/svg"; |
||||
var xlink_ns = "http://www.w3.org/1999/xlink"; |
||||
var svg; |
||||
|
||||
var current_selection = null; |
||||
$(document).ready(function() { |
||||
svg = $('svg')[0]; |
||||
}); |
||||
|
||||
function norm (vector) { |
||||
var norm = Math.sqrt(vector.x*vector.x + vector.y*vector.y); |
||||
return {x: vector.x / norm, y: vector.y / norm}; |
||||
th svg { |
||||
display: none; |
||||
width:3.5em; |
||||
height:3.5em; |
||||
} |
||||
function len (vector) { |
||||
return Math.sqrt(vector.x*vector.x + vector.y*vector.y); |
||||
td { |
||||
padding: 0.25em; |
||||
} |
||||
function sub (a, b) { return {x: a.x-b.x, y: a.y-b.y}; } |
||||
function add (a, b) { return {x: a.x+b.x, y: a.y+b.y}; } |
||||
function mul (a, b) { |
||||
if ("x" in a) { return {x: a.x*b, y: a.y*b}; } |
||||
return a*b; |
||||
td, .vowel-sequence { |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
const selection_thresh = 10; |
||||
const major_radius = 60; |
||||
var angles = [0, 1.5, 4]; |
||||
var points = $.map(angles, function(elem, index) { |
||||
return {x:major_radius * Math.cos(elem), y:major_radius * Math.sin(elem)}; |
||||
}); |
||||
console.log('points!', points); |
||||
const circles = $.map(points, function(point, index) { |
||||
return $(ns_elem('circle', svg_ns)).attr('cx', point.x).attr('cy', point.y).attr('r', 10); |
||||
}); |
||||
|
||||
$(document).ready(function() { |
||||
$.each(circles, function(idx, circ) { |
||||
$(svg).append(circ); |
||||
}) |
||||
}); |
||||
|
||||
function highlight_nearest(mouse) { |
||||
var testmag = 900000000; |
||||
var closest_idx = 0; |
||||
|
||||
$.each(circles, function(idx, circ) { |
||||
const mag = len(sub(point_from_circle(circ), mouse)); |
||||
if (mag < testmag) { |
||||
testmag = mag; |
||||
closest_idx = idx; |
||||
/* vowels */ |
||||
#vowel-grid { |
||||
display: block; |
||||
} |
||||
.vowel-sequence { |
||||
display: block; |
||||
} |
||||
.vowel-example { |
||||
display: inline-block; |
||||
padding: 1em; |
||||
} |
||||
.vowel-example * { |
||||
vertical-align: middle; |
||||
} |
||||
.vowel-example > svg { |
||||
width: 3.5em; |
||||
height: 3.5em; |
||||
} |
||||
}); |
||||
|
||||
$.each(circles, function(idx, circle) { |
||||
$(circle).removeClass('highlit').removeClass('veryhighlit'); |
||||
}); |
||||
|
||||
current_selection = null; |
||||
/* svg stuff */ |
||||
svg { draggable: false; } |
||||
|
||||
if (testmag < selection_thresh) { |
||||
$(circles[closest_idx]).attr('class', 'veryhighlit'); |
||||
current_selection = circles[closest_idx]; |
||||
} else { |
||||
$(circles[closest_idx]).attr('class', 'highlit'); |
||||
} |
||||
svg path, svg circle { |
||||
fill: none; |
||||
stroke: red; |
||||
stroke-width: 4px; |
||||
} |
||||
|
||||
$(document).mousemove(function(event) { |
||||
const mouse_position = {x:event.clientX, y:event.clientY}; |
||||
var s_position = svg_from_dom(mouse_position, svg); |
||||
// get the position inside the svg tag for the mouse |
||||
#word_circle { stroke: transparent; } |
||||
|
||||
highlight_nearest(s_position); |
||||
}); |
||||
|
||||
$(document).on('mousedown', function(event) { |
||||
if (current_selection) { |
||||
$(current_selection).attr('class', 'clicked'); |
||||
.vowel-base, .glyph, .line_1, .line_2, .line_3, .dot_1, .dot_2, .dot_3{ |
||||
stroke: #000; |
||||
stroke-width: 2px; |
||||
} |
||||
}); |
||||
$(document).on('dragstop', function(event) { |
||||
.handle { display: none; } |
||||
.click_target { fill:transparent; } |
||||
#delete { fill:pink; } |
||||
|
||||
}); |
||||
|
||||
</script> |
||||
/* this is styling rather than layout, not sure where it should go */ |
||||
.unverified { |
||||
color: lightgray; |
||||
} |
||||
.megaglyph { display: none; } |
||||
|
||||
.intervowel { stroke-width: 1px; stroke: #000; } |
||||
|
||||
</style> |
||||
<div class="row-fluid"> |
||||
|
||||
<div class="span4"><!-- consonants --> |
||||
<form id="consonant_form"> |
||||
<table id="consonant-grid"> |
||||
<tbody> |
||||
<tr> |
||||
<th scope="row" class="consonant-shape"> |
||||
<svg > |
||||
<g |
||||
inkscape:label="Layer 1" |
||||
inkscape:groupmode="layer" |
||||
class="mound-1 megaglyph" |
||||
transform="translate(25,0)"><path |
||||
d="M -22.108869,113.14142 C -14.825778,68.277574 38.195123,67.792033 47.420373,112.9472" |
||||
class="glyph" |
||||
sodipodi:nodetypes="cc" /><path |
||||
d="m 12.100818,78.237112 c 0.463923,-33.247812 0,-74.2276752 0,-74.2276752" |
||||
class="line_1" /><path |
||||
d="M 3.5161518,80.328763 C 3.9800748,47.08095 -2.3602059,3.9361133 -2.3602059,3.9361133" |
||||
class="line_2" |
||||
sodipodi:nodetypes="cc" /><path |
||||
d="M 20.887406,80.249008 C 21.351329,47.001196 26.763764,4.1656416 26.763764,4.1656416" |
||||
class="line_3" |
||||
sodipodi:nodetypes="cc" /><path |
||||
d="M -6.9323217,68.201226 C 6.3668024,51.190717 8.8410588,52.582486 12.397801,55.829947" |
||||
class="dot_2" /><path |
||||
d="M 4.0618415,47.554015 C 17.360965,30.543506 19.835221,31.935275 23.391964,35.182736" |
||||
class="dot_1" /><path |
||||
d="M 15.195992,69.203753 C 28.495116,52.193245 30.969373,53.585014 34.526115,56.832475" |
||||
class="dot_3" /></g> |
||||
</svg> |
||||
</th> |
||||
<td>[m]<svg/></td> |
||||
<td>[n]<svg/></td> |
||||
<td class="unverified">[ñ]</td> |
||||
<td>[ŋ]<svg/></td> |
||||
<td></td> |
||||
<th scope="row" class="consonant-shape"> |
||||
<img src="consonant-mound-2.svg" /> |
||||
</th> |
||||
</tr> |
||||
<tr> |
||||
<th scope="row" class="consonant-shape"> |
||||
<svg> |
||||
<g |
||||
inkscape:label="Layer 1" |
||||
inkscape:groupmode="layer" |
||||
class="omega-1 megaglyph" |
||||
transform="translate(25,0)"> |
||||
<path |
||||
d="m -20.755057,77.343458 c 0,0 0,30.618622 0.380829,46.994252 C -23.040029,95.204323 -6.4362494,84.506425 8.6829945,92.576601 23.802242,100.64678 20.107856,123.61413 -0.07606316,123.80455 H 44.10006" |
||||
class="glyph" |
||||
sodipodi:nodetypes="cczcc" /> |
||||
<path |
||||
d="m -1.7099346,89.222829 c 0.46392,-33.24781 0,-74.22767 0,-74.22767" |
||||
class="line_1" /> |
||||
<path |
||||
d="M 23.690919,125.15467 C 24.154842,91.90686 17.814561,48.76203 17.814561,48.76203" |
||||
class="line_2" |
||||
sodipodi:nodetypes="cc" /> |
||||
<path |
||||
d="m 41.062172,125.07492 c 0.46392,-33.24781 5.87636,-76.08337 5.87636,-76.08337" |
||||
class="line_3" |
||||
sodipodi:nodetypes="cc" /> |
||||
<path |
||||
d="M -12.402587,73.540483 C -5.9076651,66.117713 20.07202,31.787413 34.91756,47.251513" |
||||
class="dot_1" |
||||
inkscape:label="dot_1" /> |
||||
<path |
||||
d="M 0.413012,80.253857 C 13.712136,63.243348 16.186393,64.635117 19.743135,67.882578" |
||||
class="dot_2" |
||||
inkscape:label="dot_2" /> |
||||
<path |
||||
d="M 22.541326,81.256384 C 35.84045,64.245876 38.314707,65.637645 41.871449,68.885106" |
||||
id="path1720-1" |
||||
class="dot_3" /> |
||||
</g> |
||||
</svg> |
||||
</th> |
||||
<td>[p], [b]<svg/></td> |
||||
<td>[t], [d]<svg/></td> |
||||
<td></td> |
||||
<td>[k], [g]<svg/></td> |
||||
<td class="unverified">[q], [ɢ]</td> |
||||
<th scope="row" class="consonant-shape"> |
||||
<img src="consonant-ohm-2.svg" /> |
||||
</th> |
||||
</tr> |
||||
<tr> |
||||
<th scope="row" class="consonant-shape"> |
||||
<svg> |
||||
<g |
||||
inkscape:label="Layer 1" |
||||
inkscape:groupmode="layer" |
||||
class="angle-1 megaglyph" |
||||
transform="translate(25,0)"> |
||||
<path |
||||
style="opacity:1;fill:none;stroke:#000000;stroke-width:2.88527;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M -14.06223,75.917879 H 39.968325 L 39.843832,126.71158" |
||||
class="glyph" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 5.6174494,75.22561 C 6.0813724,41.977797 -0.2589083,-1.1670398 -0.2589083,-1.1670398" |
||||
class="line_2" |
||||
sodipodi:nodetypes="cc" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 22.988704,75.145855 C 23.452627,41.898043 28.865062,-0.93751155 28.865062,-0.93751155" |
||||
class="line_3" |
||||
sodipodi:nodetypes="cc" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m 14.502302,74.634887 c 0.463923,-33.247813 0,-74.22767555 0,-74.22767555" |
||||
class="line_1" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M -6.0317653,62.94798 C 7.2673588,45.937471 9.7416152,47.32924 13.298357,50.576701" |
||||
id="path1720" class="dot_2"/> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 4.9623979,42.300769 C 18.261522,25.29026 20.735778,26.682029 24.292521,29.92949" |
||||
id="path1720-7" class="dot_1"/> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 16.096549,63.950507 C 29.395673,46.939999 31.86993,48.331768 35.426672,51.579229" |
||||
id="path1720-1" class="dot_3"/> |
||||
</g> |
||||
</svg> |
||||
</th> |
||||
<td>[f], [v]<svg></svg></td> |
||||
<td>[s], [z]<svg></svg></td> |
||||
<td>[ʃ], [ʒ]<svg></svg></td> |
||||
<td></td> |
||||
<td class="unverified">[ʔ], [ʡ]<svg></svg></td> |
||||
<th scope="row" class="consonant-shape"> |
||||
<img src="consonant-angle-2.svg" /> |
||||
</th> |
||||
</tr> |
||||
<tr> |
||||
<th scope="row" class="consonant-shape"> |
||||
<svg> |
||||
<g |
||||
inkscape:label="Layer 1" |
||||
inkscape:groupmode="layer" |
||||
class="loop-1 megaglyph" |
||||
transform="translate(25,0)"><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.47853;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m -17.664457,111.5189 c 17.71094207,0 50.4325,2.83413 56.735052,-9.45585 C 43.573377,93.28263 38.467691,81.072874 30.440263,79.305245 19.108262,76.809953 6.7206019,82.850589 6.8006582,96.359531 c 0.093399,15.760439 0.600371,39.624479 0.600371,39.624479" |
||||
class="path1628" |
||||
sodipodi:nodetypes="csssc" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m 23.808051,77.786834 c 0.463923,-33.247812 0,-74.2276754 0,-74.2276754" |
||||
class="line_1" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 15.223385,80.178675 C 15.687308,46.930858 9.347027,3.7860214 9.347027,3.7860214" |
||||
class="line_2" |
||||
sodipodi:nodetypes="cc" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 32.594639,80.098915 C 33.058562,46.851104 38.470997,4.0155494 38.470997,4.0155494" |
||||
class="line_3" |
||||
sodipodi:nodetypes="cc" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 4.774911,69.552061 C 18.074035,52.541552 20.548292,53.933321 24.105034,57.180782" |
||||
class="dot_2" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 15.769074,48.90485 C 29.068198,31.894341 31.542454,33.28611 35.099197,36.533571" |
||||
class="dot_1" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 26.903225,70.554588 C 40.202349,53.54408 42.676606,54.935849 46.233348,58.18331" |
||||
class="dot_3" /></g> |
||||
</svg> |
||||
</th> |
||||
<td>[θ], [ð]<svg/></td> |
||||
<td class="unverified">[ts]<svg/></td> |
||||
<td>[tʃ], [dʒ]<svg/></td> |
||||
<td>[x~χ], <span class="unverified">[ʁ]</span><svg/></td> |
||||
<td></td> |
||||
<th scope="row" class="consonant-shape"> |
||||
<img src="consonant-loop-2.svg" /> |
||||
</th> |
||||
</tr> |
||||
<tr> |
||||
<th scope="row" class="consonant-shape"> |
||||
<svg> |
||||
<g |
||||
inkscape:label="Layer 1" |
||||
inkscape:groupmode="layer" |
||||
class="wave-1 megaglyph" |
||||
transform="translate(25,0)"><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.47853;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M -22.617516,106.41574 C -10.15982,87.804245 -3.4056477,76.397198 -3.4056477,76.397198 c 0,0 -3.1519473,26.266232 11.2569551,26.116132 C 22.260209,102.36324 26.913083,76.847476 26.913083,76.847476 l 23.414466,29.868454" |
||||
class="glyph" |
||||
sodipodi:nodetypes="ccscc" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m 8.1984075,103.1525 c 0.463923,-33.247807 0,-74.22767 0,-74.22767" |
||||
class="line_1" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M -3.3881142,77.627094 C -2.9241912,44.379281 -9.2644719,1.2344442 -9.2644719,1.2344442" |
||||
class="line_2" |
||||
sodipodi:nodetypes="cc" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 26.891115,78.748081 C 27.355038,45.500269 32.767473,2.6647142 32.767473,2.6647142" |
||||
class="line_3" |
||||
sodipodi:nodetypes="cc" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M -7.8328782,68.651504 C 5.4662459,51.640995 7.9405023,53.032764 11.497244,56.280225" |
||||
class="dot_2" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 3.161285,48.004293 C 16.460409,30.993784 18.934665,32.385553 22.491408,35.633014" |
||||
class="dot_1" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 14.295436,69.654031 C 27.59456,52.643523 30.068817,54.035292 33.625559,57.282753" |
||||
class="dot_3" /></g> |
||||
</svg> |
||||
</th> |
||||
<td>[w]<svg/></td> |
||||
<td>[ɹ], [l]<svg/></td> |
||||
<td>[ɾ~r], <span class="unverified">[ɬ]</span><svg/></td> |
||||
<td>[j]<svg/></td> |
||||
<td>[h]<svg/></td> |
||||
<th scope="row" class="consonant-shape"> |
||||
<img src="consonant-wave-2.svg" /> |
||||
</th> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</form> |
||||
</div> |
||||
<div class="span4 "> |
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="400px" preserveAspectRatio="xMidYMax" id="arena" viewBox="-75 -105 150 210" draggable="false" > |
||||
<g transform="translate(-300,0)" id="consonant_place_group"> |
||||
<g id="consonant_copy_from_here"> |
||||
<rect class="click_target" x="-15" y="-35" width="30" height="35"/> |
||||
<g id="consonant_put_it_in_here" transform="translate(-12,-45) scale(0.3)"></g> |
||||
</g> |
||||
</g> |
||||
|
||||
<circle cx="0" cy="0" r="100" id="word_circle" /> |
||||
<rect x="80" id="delete" y="80" width="40" height="40"/> |
||||
|
||||
<g transform="translate(300,0)" id="vowel_place_group"> |
||||
<g id="vowel_copy_from_here"> |
||||
<rect class="click_target" x="-15" y="-35" width="30" height="35"/> |
||||
<g id="vowel_put_it_in_here" transform="translate(-6,-30) scale(0.5)"></g> |
||||
</g> |
||||
</g> |
||||
<g id="connections" /> |
||||
</svg> |
||||
</div> |
||||
<div class="span4"><!-- vowels --> |
||||
<div id="vowel-grid"> |
||||
<div class="vowel megaglyph"> |
||||
<svg> |
||||
<path |
||||
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137" |
||||
class="base-omega vowel-base" /> |
||||
<path |
||||
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135" |
||||
class="base-mound vowel-base" /> |
||||
<path |
||||
d="m -24.143392,69.705313 c 21.9728073,0 54.541558,-0.600371 58.120012,-22.089973 C 35.199043,37.798618 21.290897,32.244199 12.511064,32.347864 3.742928,32.451391 -10.546513,37.771707 -8.5599175,48.096898 -4.5769567,68.798058 27.981866,69.673483 49.560097,69.531345" |
||||
class="base-loop vowel-base" /> |
||||
<circle |
||||
class="dot-outer" |
||||
cx="12.504731" |
||||
cy="50.600185" |
||||
r="7.9595795" /> |
||||
<path |
||||
d="m 12.50473,58.701897 c 0,15.634887 0,15.634887 0,15.634887" |
||||
class="emphasis-outer" /> |
||||
<circle |
||||
class="dot-inner" |
||||
cx="12.50473" |
||||
cy="14.924212" |
||||
r="7.9595795" /> |
||||
<path |
||||
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181" |
||||
class="emphasis-inner" /> |
||||
<path |
||||
class="triangle-inner" |
||||
d="M 12.646867,6.822496 20.187878,20.036981 4.9732929,19.960446 Z" /> |
||||
<path |
||||
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181" |
||||
class="emphasis-inner" /> |
||||
<circle |
||||
class="dot-on" |
||||
cx="12.646866" |
||||
cy="31.411909" |
||||
r="7.9595795" /> |
||||
</svg> |
||||
</div> |
||||
<div class="vowel-sequence"> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 0 24 80" >base-omega dot-outer emphasis-outer</svg> [ɑ, a], box or bah |
||||
</div> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 0 24 80" >base-omega dot-outer</svg> [ʌ, ə], but or schwa |
||||
</div> |
||||
</div> |
||||
<div class="vowel-sequence"> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 -12 24 80" >base-mound dot-inner emphasis-inner</svg> [i], beat |
||||
</div> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 -12 24 80" >base-mound dot-inner</svg> [ɪ], bit |
||||
</div> |
||||
</div> |
||||
<div class="vowel-sequence"> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 -12 24 80" >base-mound triangle-inner emphasis-inner</svg> [u], boot |
||||
</div> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 -12 24 80" >base-mound triangle-inner</svg> [ʊ], book |
||||
</div> |
||||
</div> |
||||
<div class="vowel-sequence"> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 -12 24 80" >base-mound dot-outer emphasis-outer</svg> [ɛi, e], bait |
||||
</div> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 -12 24 80" >base-mound dot-outer</svg> [ɛ], bet |
||||
</div> |
||||
</div> |
||||
<div class="vowel-sequence"> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 0 24 80" >base-omega dot-inner emphasis-inner</svg> [o, ɔu], won't, boat |
||||
</div> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 0 24 80" >base-omega dot-inner</svg> [ɔ], bawk |
||||
</div> |
||||
</div> |
||||
<div class="vowel-sequence"> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 0 24 80" >base-omega dot-on</svg> [æ], bat |
||||
</div> |
||||
</div> |
||||
<div class="vowel-sequence"> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 0 24 80" >base-loop dot-outer</svg> [au], cow |
||||
</div> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 0 24 80" >base-loop dot-on</svg> [ai, aɪ], by |
||||
</div> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 0 24 80" >base-loop dot-inner</svg> [ɔi, ɔɪ], boy |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<hr> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,290 @@ |
||||
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 = []; |
||||
|
||||
var svg; |
||||
var connections_container; |
||||
|
||||
$(document).ready(function() { |
||||
svg = $('svg#arena')[0]; |
||||
connections_container = $('svg#arena #connections'); |
||||
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_consonant(); |
||||
set_location(g, 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()); |
||||
|
||||
var g = make_new_vowel(); |
||||
|
||||
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg); |
||||
set_location(g, 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 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 = $("#consonant_copy_from_here").clone().attr("id","").attr("onclick", "").attr("onmousedown", ""); |
||||
x.element.find("#consonant_put_it_in_here").attr("id",""); |
||||
x.position = {x:0, y:0}; |
||||
x.element.on("mousedown", x, (event) => { currently_dragging = event.data }); |
||||
$(svg).append(x.element); |
||||
|
||||
x.handles = []; |
||||
x.handles.push($(ns_elem("circle", svg_ns))) |
||||
x.handles.push($(ns_elem("circle", svg_ns))) |
||||
$.each(x.handles, function() { |
||||
$(svg).append(this) |
||||
this.attr("r", 2); |
||||
add_class(this, "handle"); |
||||
}); |
||||
update_handles(x); |
||||
glyphs.push(x); |
||||
x.vowel = false; |
||||
return x; |
||||
} |
||||
|
||||
function make_new_vowel(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 = $("#vowel_copy_from_here").clone().attr("id","").attr("onclick", "").attr("onmousedown", ""); |
||||
x.element.find("#vowel_put_it_in_here").attr("id",""); |
||||
x.position = {x:0, y:0}; |
||||
x.element.on("mousedown", x, (event) => { currently_dragging = event.data }); |
||||
$(svg).append(x.element); |
||||
|
||||
x.handles = []; |
||||
x.handles.push($(ns_elem("circle", svg_ns))); |
||||
x.handles.push($(ns_elem("circle", svg_ns))); |
||||
$.each(x.handles, function() { |
||||
$(svg).append(this) |
||||
this.attr("r", 2); |
||||
add_class(this, "handle"); |
||||
}); |
||||
update_handles(x); |
||||
glyphs.push(x); |
||||
x.vowel = true; |
||||
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; |
||||
connect_vowels(); |
||||
} |
||||
|
||||
if (currently_dragging != null) { |
||||
set_location(currently_dragging, mul(norm(currently_dragging.position), major_radius)); |
||||
} |
||||
|
||||
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) { |
||||
set_location(currently_dragging, add(currently_dragging.position, mouse_move)); |
||||
update_handles(currently_dragging); |
||||
} |
||||
}); |
||||
|
||||
function update_handles(g) { |
||||
if (g.element.find('path.glyph,path.vowel-base').length != 0) { |
||||
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)); |
||||
} |
||||
connect_vowels(); |
||||
} |
||||
|
||||
function set_location(glyph, point) { |
||||
glyph.position = point; |
||||
glyph.angle = Math.atan2(point.y, point.x); |
||||
set_transform(glyph.element, glyph.position, appropriate_angle(point)); |
||||
update_handles(glyph); |
||||
} |
||||
|
||||
function connect_vowels() { |
||||
let vowels = $.grep(glyphs, (v) => v.vowel); |
||||
vowels.sort((a, b) => b.angle - a.angle); |
||||
console.log($.map(vowels, (a)=>a.angle)); |
||||
|
||||
|
||||
// clear oout the old connections
|
||||
|
||||
connections_container.html(""); |
||||
|
||||
if (vowels.length == 0) { |
||||
// if there's no vowels, we should have just a bare circle
|
||||
/*} else if (vowels.length == 1) { |
||||
// make a fake point on the other side to connect
|
||||
let connection = ns_elem("path", svg_ns); |
||||
add_class(connection, "intervowel"); |
||||
|
||||
let path = `M ${start_x} ${start_y} `; |
||||
path += `A ${}` |
||||
|
||||
$(connection).attr("d", `M ${start_x} ${start_y} A ${major_radius} ${major_radius} 0 ${sweep} ${large} ${end_x} ${end_y}`); |
||||
|
||||
connections_container.append(connection);*/ |
||||
} else { |
||||
// otherwise iterate over them and connect one to the next
|
||||
for (let i=0; i < vowels.length; i++) { |
||||
//connections_container.append($(ns_elem("circle", svg_ns)).attr("r",1).attr("cx",Math.cos(vowels[i].angle)*major_radius).attr("cy",major_radius*Math.sin(vowels[i].angle)));
|
||||
let connection = ns_elem("path", svg_ns); |
||||
add_class(connection, "intervowel"); |
||||
|
||||
let first = vowels[i]; |
||||
let second = vowels[(i+1)%vowels.length]; |
||||
|
||||
let start_x = parseFloat(first.handles[1].attr("cx")); |
||||
let start_y = parseFloat(first.handles[1].attr("cy")); |
||||
|
||||
/* abandoned quadratic approach |
||||
let roundness = 0.2*Math.abs(first.angle - second.angle); |
||||
roundness = first.angle > second.angle ? 1 : 0; |
||||
|
||||
let s_dx = start_x + (Math.sin(first.angle) * major_radius * roundness); |
||||
let s_dy = start_y - (Math.cos(first.angle) * major_radius * roundness); |
||||
*/ |
||||
let end_x = parseFloat(second.handles[0].attr("cx")); |
||||
let end_y = parseFloat(second.handles[0].attr("cy")); |
||||
/* |
||||
let e_dx = end_x - (Math.sin(second.angle) * major_radius * roundness); |
||||
let e_dy = end_y + (Math.cos(second.angle) * major_radius * roundness); |
||||
|
||||
// $(connection).attr("d", `M ${start_x} ${start_y} C ${s_dx} ${s_dy} ${e_dx} ${e_dy} ${end_x} ${end_y}`);
|
||||
*/ |
||||
|
||||
let distance = -(second.angle - first.angle); |
||||
if (vowels.length == 1) { |
||||
distance = 1.5*Math.PI; |
||||
} |
||||
let midpoint; |
||||
let sweep = "0"; |
||||
let large = "0"; |
||||
if (distance < 0) { |
||||
distance += 2*Math.PI; |
||||
} |
||||
if (distance < Math.PI) { |
||||
sweep = "0" |
||||
large = "0" |
||||
} else if (distance < 2*Math.PI) { |
||||
sweep = "1" |
||||
large = "0" |
||||
} |
||||
|
||||
$(connection).attr("d", `M ${start_x} ${start_y} A ${major_radius} ${major_radius} 0 ${sweep} ${large} ${end_x} ${end_y}`); |
||||
|
||||
connections_container.append(connection); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,87 @@ |
||||
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<arguments.length; i+=2) { if (typeof arguments[i+1] === "undefined") { for (var key in arguments[i]) { elem.setAttribute(key, arguments[i][key]); } break; } else { for (var key in arguments[i]) { elem.setAttributeNS(arguments[i+1], key, arguments[i][key]); } } } } else { elem = document.createElement(arguments[0]); for (var i=1; i<arguments.length; i+=2) { if (typeof arguments[i+1] === "undefined") { for (var key in arguments[i]) { elem.setAttribute(key, arguments[i][key]); } break; } else { for (var key in arguments[i]) { elem.setAttributeNS(arguments[i+1], key, arguments[i][key]); } } } } return elem;} |
||||
|
||||
|
||||
var svg_ns = "http://www.w3.org/2000/svg"; |
||||
var xlink_ns = "http://www.w3.org/1999/xlink"; |
||||
|
||||
function norm (vector) { |
||||
var norm = Math.sqrt(vector.x*vector.x + vector.y*vector.y); |
||||
return {x: vector.x / norm, y: vector.y / norm}; |
||||
} |
||||
function len (vector) { |
||||
return Math.sqrt(vector.x*vector.x + vector.y*vector.y); |
||||
} |
||||
function sub (a, b) { return {x: a.x-b.x, y: a.y-b.y}; } |
||||
function add (a, b) { return {x: a.x+b.x, y: a.y+b.y}; } |
||||
function mul (a, b) { |
||||
if ("x" in a) { return {x: a.x*b, y: a.y*b}; } |
||||
return a*b; |
||||
} |
||||
|
||||
function remove_class(element, classname) { |
||||
var classlist = $(element).attr("class"); |
||||
if (classlist) { |
||||
classlist = classlist.split(" "); |
||||
} |
||||
var newclasslist = ""; |
||||
for (const x in classlist) { |
||||
newclasslist += (classname != classlist[x]) ? " " + classlist[x] : ""; |
||||
} |
||||
$(element).attr("class", newclasslist); |
||||
} |
||||
|
||||
function add_class(element, classname) { |
||||
const classlist = $(element).attr("class"); |
||||
$(element).attr("class", classlist + " " + classname); |
||||
} |
||||
|
||||
function svg_from_dom(point, svg) { |
||||
const pt = svg.createSVGPoint(); |
||||
pt.x = point.x; |
||||
pt.y = point.y; |
||||
|
||||
return pt.matrixTransform(svg.getScreenCTM().inverse()); |
||||
} |
||||
function dom_from_svg(point, svg) { |
||||
const pt = svg.createSVGPoint(); |
||||
pt.x = point.x; |
||||
pt.y = point.y; |
||||
|
||||
return pt.matrixTransform(svg.getScreenCTM()); |
||||
} |
||||
function point_from_circle(circle) { |
||||
return {x:parseFloat(circle.attr('cx')), y:parseFloat(circle.attr('cy'))}; |
||||
} |
||||
var previous_mouse_position = {x:0,y:0}; |
||||
|
||||
function set_transform(element, point, rotation) { |
||||
const transform_string = `translate(${point.x},${point.y}) rotate(${180*rotation/Math.PI})`; |
||||
|
||||
return $(element).attr("transform", transform_string); |
||||
} |
||||
|
||||
function remove(list, element) { |
||||
const index = list.indexOf(element); |
||||
if (index > -1) { // only splice array when item is found
|
||||
list.splice(index, 1); // 2nd parameter means remove one item only
|
||||
} |
||||
} |
||||
|
||||
function appropriate_angle(point) { |
||||
return -Math.atan2(point.x, point.y); |
||||
} |
||||
|
||||
function newsvg(element) { |
||||
document.createElementNS(svg_ns, element); |
||||
} |
||||
function set_loc(elem, point) { return $(elem).attr("cx", point.x).attr("cy",point.y)} |
||||
|
||||
function get_global_point_at_length(svg, path, distance) { |
||||
return path.getPointAtLength(distance).matrixTransform(path.getTransformToElement(svg)); |
||||
} |
||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.7 KiB |
Loading…
Reference in new issue