Skip to content

preserve whitespace in svg text elements, when used in a reactor window #574

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

preserve whitespace in svg text elements, when used in a reactor window #574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4fb6a56
preserve whitespace in svg text elements, when used in a reactor wind…
Jan 16, 2025
b14772c
non-working attempt to set a custom class on SVG text elements
Feb 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/web/css/editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1584,6 +1584,8 @@ code div {
background: none;
}

.whitespace-pre { white-space: pre; }

/* From internet: http://stackoverflow.com/questions/5663137/jquery-modal-dialog-is-hidden-by-overlay-div-if-dialogs-parent-has-fixed-positi */
.ui-widget-overlay{
position:fixed;
Expand Down
29 changes: 24 additions & 5 deletions src/web/js/trove/chart-lib.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1275,7 +1275,8 @@ ${labelRow}`;
currentRow[4*i + 2] = `<p>${legends[i]}</p>
<p>x: <b>${r0}</b></p>
<p>y: <b>${r1}</b></p>
<p>y': <b>${r2}</b></p>`;
<p>ŷ: <b>${r2}</b></p>
<p>y - ŷ: <b>${r1 - r2}</b></p>`;
currentRow[4*i + 3] = r1;
currentRow[4*i + 4] = r2;
}
Expand Down Expand Up @@ -1307,7 +1308,8 @@ ${labelRow}`;
// ASSERT: if we're using custom images, *every* series will have idx 3 defined
const hasImage = combined.every(p => get(p, 'ps').filter(p => p[3]).length > 0);
const dotChartP = combined.some(p => get(p, 'dot-chart'));
const replaceDefaultSVG = (hasImage || dotChartP);
const intervalP = intervals.length > 0;
const replaceDefaultSVG = (hasImage || dotChartP || intervalP);

const options = {
tooltip: {isHtml: true},
Expand Down Expand Up @@ -1542,8 +1544,9 @@ ${labelRow}`;
selectMultipleMutator,
dotPlotAxesMutator],
overlay: (overlay, restarter, chart, container) => {

if(!dotChartP) {
overlay.css({
overlay.css({
width: '30%',
position: 'absolute',
right: '0px',
Expand Down Expand Up @@ -1639,10 +1642,20 @@ ${labelRow}`;
}

if (!replaceDefaultSVG) { return; } // If we don't have images, our work is done!


// if a title exists which contains __TITLE__, apply a special class
console.log('checking title');
var chartTitle = $('svg text').filter(':contains("__TITLE__")');
console.log(chartTitle)
if(chartTitle) {
console.log('setting class');
chartTitle.attr('class', 'whitespace-pre');
}

// if custom images are defined, use the image at that location
// and overlay it atop each dot
google.visualization.events.addListener(chart, 'ready', function () {

// HACK(Emmanuel):
// The only way to hijack marker events is to walk the DOM here
// If Google changes the DOM, these lines will likely break
Expand All @@ -1662,6 +1675,12 @@ ${labelRow}`;
} else {
markers = svgRoot.children[1].children[2].children;
}

if(intervalP) {
console.log('this is an intervalChart');
chart.setSelection([{row:0,column:1}]);
}

if (hasImage) {

// for each point, (1) find the x,y location, (2) render the SVGImage,
Expand Down Expand Up @@ -1733,8 +1752,8 @@ ${labelRow}`;
Object.assign(circleElt, circle); // we should probably not steal *everything*...
svgRoot.appendChild(circleElt);
});

}

});
},
};
Expand Down