// Assemble the interface elements viewof app = { var dom = html`

`; var app = new PIXI.Application(width, height, { transparent: false, antialias: true, resolution: 1, backgroundColor }); let control_panel_div = html`

`; let guide_map = map.node(); let eye_crossed = control_panel_div.appendChild( html`

Hide Control Panel

${eye_crossed_icon}

` ); eye_crossed.addEventListener("click", function hide() { d3.select("#control_panel_div") .style("opacity", 1) .transition() .duration(500) .style("opacity", 0) .on("end", function () { d3.select("#control_panel_div").style("display", "none"); }); }); control_panel_div.appendChild(guide_map); let table = html``, row1 = html``, row1_l = html``, row2_l = html`

`, row1_r = html`

`, row2 = html`

`, row2_r = html`

`; row1.appendChild(row1_l); row1.appendChild(row1_r); row2.appendChild(row2_l); row2.appendChild(row2_r); row2_l.appendChild(viewof colour_undigitised_toggle); let time_step_div = html`

${viewof time_step}

year time step

`; row1_l.appendChild(time_step_div); row1_r.appendChild(viewof outlines_toggle); row2_r.appendChild(viewof tooltip_toggle); table.appendChild(row1); table.appendChild(row2); control_panel_div.appendChild(table); let sheet_table_header = html`

Sheet image links`; control_panel_div.appendChild(sheet_table_header); let div = html`

`; control_panel_div.appendChild(div); sheet_table_header.addEventListener("click", function hide_show() { if (d3.select("#chevron").attr("data-state") == "hidden") { d3.select("#chevron").attr("src", chevron_down); d3.select("#sheet_table_wrapper") .style("display", "block") .style("opacity", 0) .transition() .duration(500) .style("opacity", 1); d3.select("#chevron").attr("data-state", "shown"); } else { d3.select("#chevron").attr("src", chevron_up); d3.select("#sheet_table_wrapper") .style("opacity", 1) .transition() .duration(500) .style("opacity", 0) .on("end", function () { d3.select("#sheet_table_wrapper").style("display", "none"); }); d3.select("#chevron").attr("data-state", "hidden"); } }); dom.appendChild(control_panel_div); dom.appendChild(mutable svg); let eye_open = dom.appendChild( html`

Show Control Panel

${eye_icon}

` ); eye_open.addEventListener("click", function show() { d3.select("#control_panel_div") .style("display", "block") .style("opacity", 0) .transition() .duration(500) .style("opacity", 1); }); dom.appendChild(mutable svg_tooltip); dom.appendChild(app.view); dom.value = app; yield dom; invalidation.then(() => { app.destroy(); }); }