Skip to content

Commit

Permalink
Merge pull request #71 from DCMLab/layers
Browse files Browse the repository at this point in the history 
Layers
  • Loading branch information
@pettter
pettter authored Mar 30, 2021
2 parents 06798cf + 44b99bb commit 913d465
Show file tree
Hide file tree
Showing 10 changed files with 1,307 additions and 772 deletions.
29 changes: 29 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,14 @@ select.instance-select {
transform: translate3d(0,0,0);
filter: url("#glowFilter");
}

.note {
stroke-opacity: 0;
stroke-width: 150;
stroke: black;
}


.extraselectednote {
fill: red;
}
Expand Down Expand Up @@ -367,10 +375,31 @@ select.instance-select {
visibility: hidden
}

.none {
display: none;
}



.svg_container {
display: flex;
align-items: center;
height: auto
}

.layer {
border-style: solid;
border-width: 2px;
}

.view {
border-style: dashed;
border-width: 1px;
}

.main_buttons {
position:fixed;
bottom:0;
z-index:2;
}

32 changes: 17 additions & 15 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
<script src="js/draw.js" type="text/javascript"></script>
<script src="js/graph.js" type="text/javascript"></script>
<script src="js/reductions.js" type="text/javascript"></script>
<script src="js/layers.js" type="text/javascript"></script>
<script src="js/old.js" type="text/javascript"></script>
<script src="js/conf.js" type="text/javascript"></script>
<script src="js/wildwebmidi.js" type="text/javascript"></script>
<script src="js/midiplayer.js" type="text/javascript"></script>
Expand Down Expand Up @@ -60,14 +62,15 @@

<script src="js/main.js" type="text/javascript">
</script>
<div id="selected_things" style="position:fixed; fill-opacity: 0.5;
stroke-opacity: 0.5">Primaries:<br/>Secondaries:</div>
<div id="hidden_buttons" style="position:fixed; bottom:0; z-index:2 ; display:none">
<div id="selected_things"><!-- style="position:fixed; fill-opacity: 0.5;
stroke-opacity: 0.5"-->Primaries:<br/>Secondaries:</div>
<div id="hidden_buttons" class="main_buttons hidden"><!-- style="position:fixed; bottom:0;
z-index:2 ; display:none"-->
<input type=button id="showbutton" value="Show" onclick="show_buttons()">
</div>
<div id="load_save" style="position:fixed; bottom:0; z-index:2">
<div id="load_save" class="main_buttons"><!--style="position:fixed; bottom:0; z-index:2"-->
<div id="player"></div>
<div id="meta_buttons" style="display:none">
<div id="meta_buttons" class="none">
<input type="button" class="metarelationbutton" id="custommetarelationbutton" value="Add metarelation with custom type:" onclick="do_metarelation($('#meta_custom_type')[0].value, arg)" >
<input type="text" id="meta_custom_type" onfocus="texton()" onblur="textoff()">
</div>
Expand All @@ -78,36 +81,35 @@
<input type="button" class="relationbutton" id="relationbutton" value="Add untyped relation" onclick="do_relation("",arg)" >
<input type="button" class="relationbutton" id="customrelationbutton" value="Add relation with custom type:" onclick="do_relation($('#custom_type')[0].value, arg)" >
<input type="text" id="custom_type" onfocus="texton()" onblur="textoff()">
<input type="button" id="midibutton" value="Play original" onclick="play_midi()" >
<input type="button" id="midireducebutton" value="Play reduction" onclick="play_midi_reduction()" >
<div id="relation_buttons">
</div>
<input type="button" id="hidebutton" value="Hide" onclick="hide_buttons()">
<input type="file" id="fileupload" value="Load" onchange="load()" >
<!--input type="button" id="uploadbutton" value="Load" onclick="load()" -->
<!--input type="button" id="downloadbutton" value="Save" onclick="save()" -->
<input type="button" id="downloadbutton" value="Save" onclick="save_orig()" >
<input type="button" id="svgdownloadbutton" value="Save SVG" onclick="savesvg()" >
<input type="button" id="reducebutton" value="(R)educe Relations" onclick="do_reduce()" >
<input type="button" id="undoreducebutton" value="Undo Reduction" onclick="undo_reduce()" >
<!--input type="button" id="reducebutton" value="(R)educe Relations" onclick="do_reduce()" >
<input type="button" id="undoreducebutton" value="Undo Reduction" onclick="undo_reduce()" -->
<input type="button" id="equalizebutton" value="Toggle (s)tems etc." onclick="toggle_equalize()" >
<input type="button" id="shadesbutton" value="Toggle type s(h)ades." onclick="toggle_shades()" >
<input type="button" id="rerenderbutton" value="Create new view" onclick="rerender()" >
<input type="button" id="midibutton" value="Play original" onclick="play_midi()" >
<input type="button" id="midireducebutton" value="Play reduction" onclick="play_midi_reduction()" >
<!--input type="button" id="rerenderbutton" value="Create new view" onclick="rerender()" >
<input type="button" id="layerbutton" value="Create new layer" onclick="new_layer()" -->
<!--input type="button" id="selectifybutton" value="Select similar notes" onclick="select_samenote()" --> <br/>

</div>
<div id="zoom buttons" style="position:fixed; top:0; right:0; z-index:2">
<!--div id="zoom buttons" style="position:fixed; top:0; right:0; z-index:2">
<input type="button" id="zoominbutton" class="zoombutton" value="+" onclick="zoom_in()"><br/>
<input type="button" id="zoomoutbutton" class="zoombutton" value="-" onclick="zoom_out()"><br/>
</div>
</div-->


<!--//////////////////////////////////////////////-->
<!-- The div where we are going to insert the SVG -->
<!--//////////////////////////////////////////////-->

<div style="transform-origin: top left; z-index:-1" id="svg_outputs">
<div id="svg_output0"></div>
<div id="layers">
</div>
</body>
</html>
8 changes: 4 additions & 4 deletions index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,12 +82,12 @@ describe('reductive_analysis_test_suite', () => {
button_test('hidebutton');
button_test('downloadbutton');
button_test('svgdownloadbutton');
button_test('reducebutton');
// button_test('reducebutton');
button_test('equalizebutton');
button_test('shadesbutton');
button_test('rerenderbutton');
button_test('zoominbutton', {'class': 'zoombutton'});
button_test('zoomoutbutton', {'class': 'zoombutton'});
// button_test('rerenderbutton');
// button_test('zoominbutton', {'class': 'zoombutton'});
// button_test('zoomoutbutton', {'class': 'zoombutton'});
});

it('should load the example MEI', async function() {
Expand Down
131 changes: 15 additions & 116 deletions js/draw.js
View file
Original file line number Diff line number Diff line change
@@ -1,134 +1,33 @@
// Draw a series of edges (TODO: make it much much much better)
function draw_edges() {
console.debug("Using globals: selected");
var added = [];
if(selected.includes(undefined))
return [];
for(var i = 1; i < selected.length; i++) {
note1 = note_coords(selected[i-1]);
note2 = note_coords(selected[i]);
//added.push(line(note1,note2));
var elem = roundedHull([note1,note2]);
add_to_svg_bg(elem);
added.push(elem);
// TODO: Add selectability on edge.
}
return added;
}

// Draw a relation as a series of edges (TODO: make it much much much better)
// New version below as draw_relation_arg. It will draw based on
// an already MEI-encoded relation rather than this ad-hoc
// stuff.
function draw_relation(id,type) {
console.debug("Using globals: selected, extraselected, mei, mei_graph, shades");
var added = [];
var notes = selected.concat(extraselected);
if(notes.includes(undefined)) {
console.log("Note missing, relation not drawn");
return [];
}
var secondaries = selected;
var primaries = extraselected;

notes.sort((a,b) => {
var p1= note_coords(a);
var p2= note_coords(b);
return (p1[0] - p2[0]) ? (p1[0] - p2[0]) : (p1[1] - p2[1]);
});


var elem = roundedHull(notes.map(note_coords));
elem.setAttribute("id",id);
elem.classList.add("relation");
elem.setAttribute("type",type);
elem.onwheel = (e) => {
var elem1 = e.target;
var paren = elem1.parentElement;
paren.removeChild(elem1);
paren.insertBefore(elem1,paren.children[0]);
elem.onmouseout();
return false;
};
if(shades)
toggle_shade(elem);
add_to_svg_bg(elem);
added.push(elem);
elem.onclick = function(ev) {toggle_selected(elem,ev.shiftKey);};
elem.onmouseover = function (ev) {
primaries.forEach((item) => { item.classList.add("extrahover");});
secondaries.forEach((item) => { item.classList.add("selecthover");});
}
elem.onmouseout = function (ev) {
primaries.forEach((item) => { item.classList.remove("extrahover");});
secondaries.forEach((item) => { item.classList.remove("selecthover");});
}

return added;
}

function draw_metarelation(id,type) {
console.debug("Using globals: selected, extraselected, document, shades");
var added = [];
var targets =selected.concat(extraselected);
var coords = targets.map(get_metarelation_target);
var x = average(coords.map((e) => e[0]));
// Above
var y =
targets.concat([document.getElementsByClassName("system")[0]]).map((b) => b.getBBox().y).sort((a,b) => a > b)[0] - 500;

coords.push([x,y]);
var g_elem = g();
var elem = roundedHull(coords);
g_elem.setAttribute("id",id);
g_elem.classList.add("metarelation");
g_elem.setAttribute("type",type);
g_elem.onwheel = (e) => {
var elem1 = e.target;
var paren = elem1.parentElement;
paren.removeChild(elem1);
paren.insertBefore(elem1,paren.children[0]);
return false;
};
coords.forEach((crds) => { var line_elem = line([x,y],crds);
g_elem.appendChild(line_elem);});
g_elem.appendChild(circle([x,y],200));
if(shades)
toggle_shade(g_elem);
add_to_svg_bg(g_elem);
added.push(g_elem);
g_elem.onclick = function(ev) {toggle_selected(g_elem,ev.shiftKey);};
g_elem.onmouseover = function (ev) {
targets.forEach((item) => { item.classList.add("relationhover"); });
}
g_elem.onmouseout = function (ev) {
targets.forEach((item) => { item.classList.remove("relationhover"); });
}
return added;


}

function draw_relation_arg(draw_context, mei_graph, g_elem) {
var added = [];
var mei = draw_context.mei;
var svg_elem = draw_context.svg_elem;
var id_prefix = draw_context.id_prefix;
var primaries = relation_primaries_arg(mei_graph,g_elem).map(
(e) => svg_find_from_mei_elem(svg_elem, id_prefix, get_by_id(mei, note_get_sameas(e))));
(e) => document.getElementById(id_in_svg(draw_context,node_to_note_id(e)))
);
var secondaries = relation_secondaries_arg(mei_graph,g_elem).map(
(e) => svg_find_from_mei_elem(svg_elem, id_prefix, get_by_id(mei, note_get_sameas(e))));
var notes = primaries.concat(secondaries)
(e) => document.getElementById(id_in_svg(draw_context,node_to_note_id(e)))
);
var notes = primaries.concat(secondaries);
notes.sort((a,b) => {
if(!a) return -1;
if(!b) return 1;
var p1= note_coords(a);
var p2= note_coords(b);
return (p1[0] - p2[0]) ? (p1[0] - p2[0]) : (p1[1] - p2[1]);
});
if(!notes[0]) {
console.log("Note missing, relation not drawn");
return null;
}

var id = id_prefix + g_elem.getAttribute("xml:id");
var type = relation_type(g_elem);

var elem = roundedHull(notes.map(note_coords));
elem.setAttribute("id",id);
if(id_prefix != "")
elem.setAttribute("oldid",g_elem.getAttribute("xml:id"));
elem.classList.add("relation");
elem.setAttribute("type",type);
elem.onwheel = (ev) => {
Expand Down Expand Up @@ -165,7 +64,7 @@ function draw_metarelation_arg(draw_context, mei_graph, g_elem) {
var id = id_prefix + g_elem.getAttribute("xml:id");
var type = relation_type(g_elem);
var targets = relation_allnodes_arg(mei_graph, g_elem).map(
(e) => svg_find_from_mei_elem(svg_elem, id_prefix, e));
(e) => document.getElementById(draw_context.id_prefix+get_id(e)));
if(targets.indexOf(null) != -1){
console.log("Missing relation, not drawing metarelation");
return [];
Expand Down
Loading

0 comments on commit 913d465

Please sign in to comment.