unspeakably many changes
This commit is contained in:
parent
06cdda7925
commit
a469213658
@ -10,13 +10,21 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
path, circle {
|
||||||
|
fill: none;
|
||||||
|
stroke: #aaa;
|
||||||
|
stroke-width: 3px;
|
||||||
|
}
|
||||||
|
svg { draggable: false; }
|
||||||
#testbed { display: none; }
|
#testbed { display: none; }
|
||||||
td svg {
|
td svg {
|
||||||
width: 100px;
|
width: 3.5em;
|
||||||
|
height: 3.5em;
|
||||||
}
|
}
|
||||||
th label svg {
|
th label svg {
|
||||||
display: none;
|
display: none;
|
||||||
|
width:3.5em;
|
||||||
|
height:3.5em;
|
||||||
}
|
}
|
||||||
#consonant-grid, #vowel-grid {
|
#consonant-grid, #vowel-grid {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
@ -36,18 +44,8 @@
|
|||||||
height: 50%;
|
height: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
svg#arena circle, svg#arena path { fill: none; stroke: #600; }
|
svg#arena circle, svg#arena path { fill: none; stroke: #600; }
|
||||||
svg#arena .consonant { stroke: #600; fill: none; }
|
|
||||||
svg#arena .radical { stroke: #004; }
|
|
||||||
svg#arena circle.radical { fill: black; }
|
|
||||||
svg#arena circle { stroke: #044; }
|
svg#arena circle { stroke: #044; }
|
||||||
.highlit { fill: red; }
|
|
||||||
.veryhighlit { fill: green; }
|
|
||||||
.clicked { fill: darkgreen; }
|
|
||||||
.placeholder { fill: lightblue; }
|
|
||||||
|
|
||||||
.chosen { fill: blue;stroke: red; }
|
|
||||||
|
|
||||||
rect { fill:transparent; }
|
rect { fill:transparent; }
|
||||||
#delete { fill:pink; }
|
#delete { fill:pink; }
|
||||||
@ -74,37 +72,6 @@
|
|||||||
color: lightgray;
|
color: lightgray;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<svg id="testbed" width=800><g
|
|
||||||
inkscape:label="Layer 1"
|
|
||||||
inkscape:groupmode="layer"
|
|
||||||
class="angle-1" class="megaglyph"><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>
|
|
||||||
<div class="row-fluid">
|
<div class="row-fluid">
|
||||||
|
|
||||||
<div class="span4"><!-- consonants -->
|
<div class="span4"><!-- consonants -->
|
||||||
@ -146,28 +113,21 @@
|
|||||||
inkscape:groupmode="layer"
|
inkscape:groupmode="layer"
|
||||||
class="mound-1 megaglyph"
|
class="mound-1 megaglyph"
|
||||||
transform="translate(25,0)"><path
|
transform="translate(25,0)"><path
|
||||||
style="fill:none;stroke:#000000;stroke-width:3.38618;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
d="M -22.108869,113.14142 C -14.825778,68.277574 38.195123,67.792033 47.420373,112.9472"
|
d="M -22.108869,113.14142 C -14.825778,68.277574 38.195123,67.792033 47.420373,112.9472"
|
||||||
class="glyph"
|
class="glyph"
|
||||||
sodipodi:nodetypes="cc" /><path
|
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 12.100818,78.237112 c 0.463923,-33.247812 0,-74.2276752 0,-74.2276752"
|
d="m 12.100818,78.237112 c 0.463923,-33.247812 0,-74.2276752 0,-74.2276752"
|
||||||
class="line_1" /><path
|
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.5161518,80.328763 C 3.9800748,47.08095 -2.3602059,3.9361133 -2.3602059,3.9361133"
|
d="M 3.5161518,80.328763 C 3.9800748,47.08095 -2.3602059,3.9361133 -2.3602059,3.9361133"
|
||||||
class="line_2"
|
class="line_2"
|
||||||
sodipodi:nodetypes="cc" /><path
|
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 20.887406,80.249008 C 21.351329,47.001196 26.763764,4.1656416 26.763764,4.1656416"
|
d="M 20.887406,80.249008 C 21.351329,47.001196 26.763764,4.1656416 26.763764,4.1656416"
|
||||||
class="line_3"
|
class="line_3"
|
||||||
sodipodi:nodetypes="cc" /><path
|
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 -6.9323217,68.201226 C 6.3668024,51.190717 8.8410588,52.582486 12.397801,55.829947"
|
d="M -6.9323217,68.201226 C 6.3668024,51.190717 8.8410588,52.582486 12.397801,55.829947"
|
||||||
class="dot_2" /><path
|
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.0618415,47.554015 C 17.360965,30.543506 19.835221,31.935275 23.391964,35.182736"
|
d="M 4.0618415,47.554015 C 17.360965,30.543506 19.835221,31.935275 23.391964,35.182736"
|
||||||
class="dot_1" /><path
|
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 15.195992,69.203753 C 28.495116,52.193245 30.969373,53.585014 34.526115,56.832475"
|
d="M 15.195992,69.203753 C 28.495116,52.193245 30.969373,53.585014 34.526115,56.832475"
|
||||||
class="dot_3" /></g>
|
class="dot_3" /></g>
|
||||||
</svg></label>
|
</svg></label>
|
||||||
@ -387,13 +347,10 @@
|
|||||||
<div class="span4 ">
|
<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" >
|
<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" >
|
||||||
<rect x="-200" y="-1" width="400" height="2"/>
|
<rect x="-200" y="-1" width="400" height="2"/>
|
||||||
<defs>
|
<g transform="translate(-100,0)" id="consonant_place_group">
|
||||||
</defs>
|
<g id="consonant_copy_from_here">
|
||||||
<g transform="translate(-100,0)" id="place_group">
|
<rect x="-15" y="-35" width="30" height="35"/>
|
||||||
<g transform="scale(0.5)" >
|
<g id="consonant_put_it_in_here" transform="translate(-12,-45) scale(0.3)"></g>
|
||||||
<rect x="-30" y="-70" width="60" height="70"/>
|
|
||||||
<image x="-25" y="-70" class="radical placeholder"/>
|
|
||||||
<image x="-25" y="-50" class="glyph placeholder"/>
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
@ -408,280 +365,105 @@
|
|||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="span4">
|
<div class="span4"><!-- vowels -->
|
||||||
<div id="vowel-grid">
|
<div id="vowel-grid">
|
||||||
<div class="vowel-sequence">
|
<div class="vowel megaglyph">
|
||||||
<div class="vowel-example">
|
<svg>
|
||||||
<svg viewBox="0 0 24 80" >
|
|
||||||
<path
|
<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"
|
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"
|
||||||
id="base-omega"
|
class="base-omega vowel-base" />
|
||||||
sodipodi:nodetypes="cczzzcc" />
|
<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
|
<circle
|
||||||
id="dot-outer"
|
class="dot-outer"
|
||||||
cx="12.504731"
|
cx="12.504731"
|
||||||
cy="50.600185"
|
cy="50.600185"
|
||||||
r="7.9595795" />
|
r="7.9595795" />
|
||||||
<path
|
<path
|
||||||
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
|
|
||||||
d="m 12.50473,58.701897 c 0,15.634887 0,15.634887 0,15.634887"
|
d="m 12.50473,58.701897 c 0,15.634887 0,15.634887 0,15.634887"
|
||||||
id="emphasis-outer" />
|
class="emphasis-outer" />
|
||||||
</svg>
|
|
||||||
[ɑ, a], box or bah
|
|
||||||
</div>
|
|
||||||
<div class="vowel-example">
|
|
||||||
<svg viewBox="0 0 24 80" >
|
|
||||||
<path
|
|
||||||
style="fill:none;stroke:#000000;stroke-width:3.48083;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
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"
|
|
||||||
id="base-omega"
|
|
||||||
sodipodi:nodetypes="cczzzcc" />
|
|
||||||
<circle
|
<circle
|
||||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
class="dot-inner"
|
||||||
id="dot-outer"
|
|
||||||
cx="12.504731"
|
|
||||||
cy="50.600185"
|
|
||||||
r="7.9595795" />
|
|
||||||
</svg>
|
|
||||||
[ʌ, ə], but or schwa
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="vowel-sequence">
|
|
||||||
<div class="vowel-example">
|
|
||||||
<svg viewBox="0 -12 24 80" >
|
|
||||||
<path
|
|
||||||
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
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"
|
|
||||||
id="base-mound"
|
|
||||||
sodipodi:nodetypes="cczcc" />
|
|
||||||
<circle
|
|
||||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
id="dot-inner"
|
|
||||||
cx="12.50473"
|
cx="12.50473"
|
||||||
cy="14.924212"
|
cy="14.924212"
|
||||||
r="7.9595795" />
|
r="7.9595795" />
|
||||||
<path
|
<path
|
||||||
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
|
|
||||||
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181"
|
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181"
|
||||||
id="emphasis-inner" />
|
class="emphasis-inner" />
|
||||||
</svg>
|
|
||||||
[i], beat
|
|
||||||
</div>
|
|
||||||
<div class="vowel-example">
|
|
||||||
<svg viewBox="0 -12 24 80" >
|
|
||||||
<path
|
<path
|
||||||
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
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"
|
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"
|
||||||
id="base-mound"
|
class="base-mound" />
|
||||||
sodipodi:nodetypes="cczcc" />
|
|
||||||
<circle
|
|
||||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
id="dot-inner"
|
|
||||||
cx="12.50473"
|
|
||||||
cy="14.924212"
|
|
||||||
r="7.9595795" />
|
|
||||||
</svg>
|
|
||||||
[ɪ], bit
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="vowel-sequence">
|
|
||||||
<div class="vowel-example">
|
|
||||||
<svg viewBox="0 -12 24 80" >
|
|
||||||
<path
|
<path
|
||||||
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
class="triangle-inner"
|
||||||
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"
|
d="M 12.646867,6.822496 20.187878,20.036981 4.9732929,19.960446 Z" />
|
||||||
id="base-mound"
|
|
||||||
sodipodi:nodetypes="cczcc" />
|
|
||||||
<path
|
<path
|
||||||
sodipodi:type="star"
|
|
||||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
id="triangle-inner"
|
|
||||||
sodipodi:sides="3"
|
|
||||||
sodipodi:cx="12.602679"
|
|
||||||
sodipodi:cy="15.606641"
|
|
||||||
sodipodi:r1="8.7842556"
|
|
||||||
sodipodi:r2="8.4311752"
|
|
||||||
sodipodi:arg1="-1.565766"
|
|
||||||
sodipodi:arg2="-0.51856839"
|
|
||||||
inkscape:flatsided="true"
|
|
||||||
inkscape:rounded="0"
|
|
||||||
inkscape:randomized="0"
|
|
||||||
d="M 12.646867,6.822496 20.187878,20.036981 4.9732929,19.960446 Z"
|
|
||||||
inkscape:transform-center-x="0.11044414"
|
|
||||||
inkscape:transform-center-y="-0.12140727" />
|
|
||||||
<path
|
|
||||||
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
|
|
||||||
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181"
|
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181"
|
||||||
id="emphasis-inner" />
|
class="emphasis-inner" />
|
||||||
</svg>
|
|
||||||
[u], boot
|
|
||||||
</div>
|
|
||||||
<div class="vowel-example">
|
|
||||||
<svg viewBox="0 -12 24 80" >
|
|
||||||
<path
|
|
||||||
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
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"
|
|
||||||
id="base-mound"
|
|
||||||
sodipodi:nodetypes="cczcc" />
|
|
||||||
<path
|
|
||||||
sodipodi:type="star"
|
|
||||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
id="triangle-inner"
|
|
||||||
sodipodi:sides="3"
|
|
||||||
sodipodi:cx="12.602679"
|
|
||||||
sodipodi:cy="15.606641"
|
|
||||||
sodipodi:r1="8.7842556"
|
|
||||||
sodipodi:r2="8.4311752"
|
|
||||||
sodipodi:arg1="-1.565766"
|
|
||||||
sodipodi:arg2="-0.51856839"
|
|
||||||
inkscape:flatsided="true"
|
|
||||||
inkscape:rounded="0"
|
|
||||||
inkscape:randomized="0"
|
|
||||||
d="M 12.646867,6.822496 20.187878,20.036981 4.9732929,19.960446 Z"
|
|
||||||
inkscape:transform-center-x="0.11044414"
|
|
||||||
inkscape:transform-center-y="-0.12140727" />
|
|
||||||
</svg>
|
|
||||||
[ʊ], book
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="vowel-sequence">
|
|
||||||
<div class="vowel-example">
|
|
||||||
<svg viewBox="0 -12 24 80" >
|
|
||||||
<path
|
|
||||||
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
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"
|
|
||||||
id="base-mound"
|
|
||||||
sodipodi:nodetypes="cczcc" />
|
|
||||||
<circle
|
<circle
|
||||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
class="dot-on"
|
||||||
id="dot-outer"
|
|
||||||
cx="12.504731"
|
|
||||||
cy="50.600185"
|
|
||||||
r="7.9595795" />
|
|
||||||
<path
|
|
||||||
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
|
|
||||||
d="m 12.50473,58.701897 c 0,15.634887 0,15.634887 0,15.634887"
|
|
||||||
id="emphasis-outer" />
|
|
||||||
</svg>
|
|
||||||
[ɛi, e], bait
|
|
||||||
</div>
|
|
||||||
<div class="vowel-example">
|
|
||||||
<svg viewBox="0 -12 24 80" >
|
|
||||||
<path
|
|
||||||
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
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"
|
|
||||||
id="base-mound"
|
|
||||||
sodipodi:nodetypes="cczcc" />
|
|
||||||
<circle
|
|
||||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
id="dot-outer"
|
|
||||||
cx="12.504731"
|
|
||||||
cy="50.600185"
|
|
||||||
r="7.9595795" />
|
|
||||||
</svg>
|
|
||||||
[ɛ], bet
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="vowel-sequence">
|
|
||||||
<div class="vowel-example">
|
|
||||||
<svg viewBox="0 0 24 80" >
|
|
||||||
<path
|
|
||||||
style="fill:none;stroke:#000000;stroke-width:3.48083;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
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"
|
|
||||||
id="base-omega"
|
|
||||||
sodipodi:nodetypes="cczzzcc" />
|
|
||||||
<circle
|
|
||||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
id="dot-inner"
|
|
||||||
cx="12.50473"
|
|
||||||
cy="14.924212"
|
|
||||||
r="7.9595795" />
|
|
||||||
<path
|
|
||||||
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
|
|
||||||
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181"
|
|
||||||
id="emphasis-inner" />
|
|
||||||
</svg>
|
|
||||||
[o, ɔu], won't, boat
|
|
||||||
</div>
|
|
||||||
<div class="vowel-example">
|
|
||||||
<svg viewBox="0 0 24 80" >
|
|
||||||
<path
|
|
||||||
style="fill:none;stroke:#000000;stroke-width:3.48083;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
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"
|
|
||||||
id="base-omega"
|
|
||||||
sodipodi:nodetypes="cczzzcc" />
|
|
||||||
<circle
|
|
||||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
id="dot-inner"
|
|
||||||
cx="12.50473"
|
|
||||||
cy="14.924212"
|
|
||||||
r="7.9595795" />
|
|
||||||
</svg>
|
|
||||||
[ɔ], bawk
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="vowel-sequence">
|
|
||||||
<div class="vowel-example">
|
|
||||||
<svg viewBox="0 0 24 80" >
|
|
||||||
<path
|
|
||||||
style="fill:none;stroke:#000000;stroke-width:3.48083;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
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"
|
|
||||||
id="base-omega"
|
|
||||||
sodipodi:nodetypes="cczzzcc" />
|
|
||||||
<circle
|
|
||||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
id="dot-on"
|
|
||||||
cx="12.646866"
|
cx="12.646866"
|
||||||
cy="31.411909"
|
cy="31.411909"
|
||||||
r="7.9595795" />
|
r="7.9595795" />
|
||||||
</svg>
|
</svg>
|
||||||
[æ], bat
|
</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>
|
</div>
|
||||||
<div class="vowel-sequence">
|
<div class="vowel-sequence">
|
||||||
<div class="vowel-example">
|
<div class="vowel-example">
|
||||||
<svg viewBox="0 0 24 80" >
|
<svg viewBox="0 -12 24 80" >base-mound dot-inner emphasis-inner</svg> [i], beat
|
||||||
<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"
|
|
||||||
id="base-loop"
|
|
||||||
sodipodi:nodetypes="ccssc" />
|
|
||||||
<circle
|
|
||||||
id="dot-outer"
|
|
||||||
cx="12.504731"
|
|
||||||
cy="50.600185"
|
|
||||||
r="7.9595795" />
|
|
||||||
</svg>
|
|
||||||
[au], cow
|
|
||||||
</div>
|
</div>
|
||||||
<div class="vowel-example">
|
<div class="vowel-example">
|
||||||
<svg viewBox="0 0 24 80" >
|
<svg viewBox="0 -12 24 80" >base-mound dot-inner</svg> [ɪ], bit
|
||||||
<path
|
</div>
|
||||||
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"
|
</div>
|
||||||
id="base-loop"
|
<div class="vowel-sequence">
|
||||||
sodipodi:nodetypes="ccssc" />
|
<div class="vowel-example">
|
||||||
<circle
|
<svg viewBox="0 -12 24 80" >base-mound triangle-inner emphasis-inner</svg> [u], boot
|
||||||
id="dot-on"
|
|
||||||
cx="12.646866"
|
|
||||||
cy="31.411909"
|
|
||||||
r="7.9595795" />
|
|
||||||
</svg>
|
|
||||||
[ai, aɪ], by
|
|
||||||
</div>
|
</div>
|
||||||
<div class="vowel-example">
|
<div class="vowel-example">
|
||||||
<svg viewBox="0 0 24 80" >
|
<svg viewBox="0 -12 24 80" >base-mound triangle-inner</svg> [ʊ], book
|
||||||
<path
|
</div>
|
||||||
|
</div>
|
||||||
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"
|
<div class="vowel-sequence">
|
||||||
id="base-loop"
|
<div class="vowel-example">
|
||||||
sodipodi:nodetypes="ccssc" />
|
<svg viewBox="0 -12 24 80" >base-mound dot-outer emphasis-outer</svg> [ɛi, e], bait
|
||||||
<circle
|
</div>
|
||||||
|
<div class="vowel-example">
|
||||||
id="dot-inner"
|
<svg viewBox="0 -12 24 80" >base-mound dot-outer</svg> [ɛ], bet
|
||||||
cx="12.50473"
|
</div>
|
||||||
cy="14.924212"
|
</div>
|
||||||
r="7.9595795" />
|
<div class="vowel-sequence">
|
||||||
</svg>
|
<div class="vowel-example">
|
||||||
[ɔi, ɔɪ], boy
|
<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>
|
</div>
|
||||||
@ -689,7 +471,5 @@
|
|||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h2 id="xthing">x value is something</h2>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -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
|
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;
|
var major_radius;
|
||||||
const glyphs = [];
|
const glyphs = [];
|
||||||
|
const vowels = [];
|
||||||
var embed;
|
const consonants = [];
|
||||||
|
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
svg = $('svg#arena')[0];
|
svg = $('svg#arena')[0];
|
||||||
major_radius = parseFloat($('circle').attr('r'));
|
major_radius = parseFloat($('circle').attr('r'));
|
||||||
|
|
||||||
//$.each(glyphs, function(idx, glyph) {
|
|
||||||
// glyph.element.appendTo($(svg));
|
|
||||||
//})
|
|
||||||
|
|
||||||
$(document).on("mouseup", on_mouse_up);
|
$(document).on("mouseup", on_mouse_up);
|
||||||
$("#place_group").on("mousedown", omd_consonant);
|
|
||||||
$("#vowel_place_group").on("mousedown", omd_vowel);
|
|
||||||
|
|
||||||
// handle changing the consonants
|
$('td > svg').on("mousedown", function(event) {
|
||||||
$('#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 receptacle = $("#consonant_put_it_in_here");
|
||||||
let selected = $(this);
|
let selected = $(this);
|
||||||
receptacle.html(selected.html());
|
receptacle.html(selected.html());
|
||||||
})
|
|
||||||
|
|
||||||
// handle changing the vowels
|
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg);
|
||||||
$('.vowel-example > svg').on("click", function(event) {
|
|
||||||
|
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 receptacle = $('#vowel_put_it_in_here');
|
||||||
let selected = $(this);
|
let selected = $(this);
|
||||||
receptacle.html(selected.html());
|
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;
|
||||||
});
|
});
|
||||||
|
|
||||||
var t = $("#testbed");
|
$('td > svg').each(function() { this.setAttribute('viewBox',"0 30 40 100");});
|
||||||
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();
|
populate_consonant_grid();
|
||||||
|
|
||||||
|
populate_vowels();
|
||||||
});
|
});
|
||||||
|
|
||||||
function populate_consonant_grid() {
|
function populate_consonant_grid() {
|
||||||
@ -77,7 +66,6 @@ function populate_consonant_grid() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function split_megaglyph(megaglyph) {
|
function split_megaglyph(megaglyph) {
|
||||||
// megaglyph is an svg object which contains all the possible radicals at once.
|
// 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.
|
// 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];
|
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) {
|
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
|
// 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;
|
currently_dragging = event.data;
|
||||||
}
|
}
|
||||||
|
|
||||||
function on_mouse_down_create_from(source) {
|
function make_new_consonant(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
|
// 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
|
// this will add it to the svg and to the glyphs list
|
||||||
var x = {};
|
var x = {};
|
||||||
x.angle = 0;
|
x.angle = 0;
|
||||||
x.element = source.clone().attr("id","").attr("onclick", "").attr("onmousedown", "");
|
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};
|
x.position = {x:0, y:0};
|
||||||
set_transform(x.element, x.position, 0);
|
set_transform(x.element, x.position, 0);
|
||||||
x.element.on("mousedown", x, on_mouse_down);
|
x.element.on("mousedown", x, on_mouse_down);
|
||||||
$(svg).append(x.element);
|
$(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);
|
glyphs.push(x);
|
||||||
return 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.
|
// 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)) {
|
if (currently_dragging != null && is_in_delete_region(currently_dragging.position)) {
|
||||||
remove(glyphs, currently_dragging);
|
remove(glyphs, currently_dragging);
|
||||||
|
$.each(currently_dragging.handles, function() { $(this).remove(); });
|
||||||
currently_dragging.element.remove();
|
currently_dragging.element.remove();
|
||||||
currently_dragging = null;
|
currently_dragging = null;
|
||||||
}
|
}
|
||||||
@ -173,8 +164,7 @@ function on_mouse_up(event) {
|
|||||||
if (currently_dragging != null) {
|
if (currently_dragging != null) {
|
||||||
currently_dragging.position = mul(norm(currently_dragging.position), major_radius);
|
currently_dragging.position = mul(norm(currently_dragging.position), major_radius);
|
||||||
set_transform(currently_dragging.element, currently_dragging.position, appropriate_angle(currently_dragging.position));
|
set_transform(currently_dragging.element, currently_dragging.position, appropriate_angle(currently_dragging.position));
|
||||||
//currently_dragging.element.attr("x", currently_dragging.position.x);
|
update_handles(currently_dragging);
|
||||||
//currently_dragging.element.attr("y", currently_dragging.position.y)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
currently_dragging = null;
|
currently_dragging = null;
|
||||||
@ -192,19 +182,23 @@ function is_in_delete_region(p) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
$(document).mousemove(function(event) {
|
$(document).mousemove(function(event) {
|
||||||
|
|
||||||
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg);
|
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg);
|
||||||
const mouse_move = sub(mouse_position, previous_mouse_position);
|
const mouse_move = sub(mouse_position, previous_mouse_position);
|
||||||
|
|
||||||
$("#xthing").text("position is " + mouse_position.x + " " + mouse_position.y);
|
|
||||||
|
|
||||||
previous_mouse_position = mouse_position;
|
previous_mouse_position = mouse_position;
|
||||||
var s_position = mouse_position;
|
var s_position = mouse_position;
|
||||||
// get the position inside the svg tag for the mouse
|
// get the position inside the svg tag for the mouse
|
||||||
|
|
||||||
if (currently_dragging != null) {
|
if (currently_dragging != null) {
|
||||||
|
update_handles(currently_dragging);
|
||||||
|
|
||||||
currently_dragging.position = add(currently_dragging.position, mouse_move);
|
currently_dragging.position = add(currently_dragging.position, mouse_move);
|
||||||
set_transform(currently_dragging.element, currently_dragging.position, appropriate_angle(currently_dragging.position));
|
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))
|
||||||
|
}
|
||||||
@ -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<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 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;
|
var svg;
|
||||||
@ -71,3 +77,12 @@ function remove(list, element) {
|
|||||||
function appropriate_angle(point) {
|
function appropriate_angle(point) {
|
||||||
return -Math.atan2(point.x, point.y);
|
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));
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user