function highlightCard(event) {
if (panel.highlightCards) {
let color = d3.select(event.target).style("fill");
let highlightColor = d3.color(color).darker(2);
let strokeColor = d3.color(color).brighter(4);
let current_card = d3.select(event.target);
tooltip.originalFillColor = color;
current_card.style("fill", highlightColor)
.style("stroke", strokeColor)
.style("stroke-width", 1);
}
}
export function reWriteCircle(x: number, y: number) {
/** get d3 object */
var circle = d3.select('.fr__sample-circle');
var test = d3.select('.fr__sample-text');
circle
.attr("cx", x)
.attr("cy", y);
test
.attr("x", x - 20)
.attr("y", y + 10);
}
/** A method to bind a pan and zoom behaviour to an svg element */
applyZoomableBehaviour(svgElement, containerElement) {
let svg, container, zoomed, zoom;
svg = d3.select(svgElement);
container = d3.select(containerElement);
zoomed = () => {
const transform = d3.event.transform;
container.attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')');
}
zoom = d3.zoom().on('zoom', zoomed);
svg.call(zoom);
}
static draw(systemEffect : SystemEffect, systemEffectNode, pedalboardView : PedalboardView) {
let size = pedalboardView.size;
size.width = Math.max(size.width, size.height) - 20;
size.height = Math.min(size.width, size.height);
systemEffect.x = size.width/2;
systemEffect.y = 400;//size.bottom/2 + 20;
systemEffectNode = systemEffectNode.data([systemEffect])
.attr("transform", this.effectPosition());
const inputs = systemEffectNode.append("g").classed('inputs', true);
const outputs = systemEffectNode.append("g").classed('outputs', true);
new InputPlugDrawer(size)
.drawIn(inputs, true)
.classed('input', true)
.classed('connection-target', true);
new OutputPlugDrawer(pedalboardView, size)
.drawIn(outputs, true)
.classed('output', true);
systemEffect.view = d3.select(systemEffectNode);
return systemEffectNode;
}
function resetCardHighLight(event) {
if (panel.highlightCards) {
d3.select(event.target).style("fill", tooltip.originalFillColor)
.style("stroke", tooltip.originalFillColor)
.style("stroke-width", 0);
}
}
scoreFunctionRenderer.userContainers.nodes().forEach((userContainer: SVGAElement, i: number) => {
let bars = d3.select(userContainer).selectAll('.' + defs.BAR).nodes();
let barTops = d3.select(userContainer).selectAll('.' + defs.BAR_TOP).nodes()
bars.forEach((bar: SVGElement, j: number) => {
let barSelection = d3.select(bar);
let score = u.scoreFunctions[i].getScore(elements[j]);
expect(+barSelection.attr(dimension)).to.equal(Math.max(u.heightScale(score), 2));
let barTopSelection = d3.select(barTops[j]);
expect(+barTopSelection.attr(dimension)).to.equal(u.rendererConfig.labelOffset);
});
});
function drawColorLegend(elem, colorScheme, rangeFrom, rangeTo, maxValue, minValue) {
const legendElem = $(elem).find('svg');
const legend = d3.select(legendElem.get(0));
clearLegend(elem);
const legendWidth = Math.floor(legendElem.outerWidth()) - 30;
const legendHeight = legendElem.attr('height');
const rangeStep = ((rangeTo - rangeFrom) / legendWidth) * LEGEND_SEGMENT_WIDTH;
const widthFactor = legendWidth / (rangeTo - rangeFrom);
const valuesRange = d3.range(rangeFrom, rangeTo, rangeStep);
const colorScale = getColorScale(colorScheme, contextSrv.user.lightTheme, maxValue, minValue);
legend
.append('g')
.attr('class', 'legend-color-bar')
.attr('transform', 'translate(' + LEGEND_PADDING_LEFT + ',0)')
.selectAll('.heatmap-color-legend-rect')
.data(valuesRange)
.enter()
.append('rect')
.attr('x', d => Math.round((d - rangeFrom) * widthFactor))
.attr('y', 0)
.attr('width', Math.round(rangeStep * widthFactor + 1)) // Overlap rectangles to prevent gaps
.attr('height', legendHeight)
.attr('stroke-width', 0)
.attr('fill', d => colorScale(d));
drawLegendValues(elem, rangeFrom, rangeTo, maxValue, minValue, legendWidth, valuesRange);
}
fretboard._drawFretNumbers = function(el, dim, frets) {
var g = d3.select(el).selectAll('.d3-fret-numbers');
var num = g.selectAll('text')
.data(frets, function(f : any){return f.n;});
num.exit()
.remove();
num
.transition()
.duration(ANIMATION_DURATION)
.attr("x", dim.getFretPosition())
.attr("y", dim.tpad - 15)
.text(function(d,i) {return d.n;});
num.enter().append('text')
.transition()
.duration(ANIMATION_DURATION)
.attr("x", dim.getFretPosition())
.attr("y", dim.tpad - 15)
.text(function(d,i) {return d.n;});
};
function drawColorLegend(elem, colorScheme, rangeFrom, rangeTo, maxValue, minValue) {
const legendElem = $(elem).find('svg');
const legend = d3.select(legendElem.get(0));
clearLegend(elem);
const legendWidth = Math.floor(legendElem.outerWidth()) - 30;
const legendHeight = legendElem.attr('height');
let rangeStep = 1;
if (rangeTo - rangeFrom > legendWidth) {
rangeStep = Math.floor((rangeTo - rangeFrom) / legendWidth);
}
const widthFactor = legendWidth / (rangeTo - rangeFrom);
const valuesRange = d3.range(rangeFrom, rangeTo, rangeStep);
const colorScale = getColorScale(colorScheme, contextSrv.user.lightTheme, maxValue, minValue);
legend
.selectAll('.heatmap-color-legend-rect')
.data(valuesRange)
.enter()
.append('rect')
.attr('x', d => d * widthFactor)
.attr('y', 0)
.attr('width', rangeStep * widthFactor + 1) // Overlap rectangles to prevent gaps
.attr('height', legendHeight)
.attr('stroke-width', 0)
.attr('fill', d => colorScale(d));
drawLegendValues(elem, colorScale, rangeFrom, rangeTo, maxValue, minValue, legendWidth);
}
fretboard._drawStringNoteMarkerText = function(el,dim,markers : Array<NoteMarker> ,strings : Array<Note>) {
var g = d3.select(el).selectAll('.d3-note-marker-text');
var nstrings = strings.length;
var note = g.selectAll('text')
.data(markers, function(m ,i) {return m.id});
note
.transition()
.duration(ANIMATION_DURATION)
.attr('x', dim.getNoteMarkerPosition())
.attr('y', function(d,i) {return aligny(strings.indexOf(d.string)*(dim.bheight/(nstrings - 1)) + dim.tpad);})
.text( function(d : NoteMarker ,i) { return d.note.pitch.name });
note.enter().append('text')
.transition()
.duration(ANIMATION_DURATION)
.attr('x', dim.getNoteMarkerPosition())
.attr('y', function(d,i) {return aligny(strings.indexOf(d.string)*(dim.bheight/(nstrings - 1)) + dim.tpad);})
.text( function(d : NoteMarker ,i) { return d.note.pitch.name });
note.exit()
.remove();
}
