Skip to content
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

Jump to bottom

feat: improve SVG exportation #2882

Merged
merged 5 commits into from
Feb 2, 2024
Merged

feat: improve SVG exportation #2882

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5802722
feat: improve SVG exportation
lpatiny Feb 1, 2024
96301ec
chore: fix spelling of JCAMP-DX
lpatiny Feb 1, 2024
60ae855
chore: correct removed px in css transform
lpatiny Feb 1, 2024
99e6b1c
test: fix peak deletion test
targos Feb 2, 2024
aa95f11
chore: simplify
targos Feb 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions src/component/1d/Chart1D.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ function Chart1D({ mode, width, height, margin, displayerKey }) {
return (
<PeakEditionProvider>
<svg
style={{ fontFamily: 'Arial, Helvetica, sans-serif' }}
viewBox={`0 0 ${width} ${height}`}
width={width}
height={height}
Expand Down
2 changes: 1 addition & 1 deletion src/component/1d/SpectraLegends.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ function InnerSpectraLegends({
fill: (spectrum as Spectrum1D).display.color,
}}
/>
<SVGGroup space={5} style={{ transform: 'translate(12px,0)' }}>
<SVGGroup space={5} transform="translate(12 0)">
{legendsFields.map((field) => {
const predefinedField = field as PredefinedLegendField;

Expand Down
7 changes: 2 additions & 5 deletions src/component/1d/jCouplingGraph/JsCoupling.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,7 @@ export default function JsCoupling({ value }: JsCouplingProps) {
if (!scaleY) return null;

return (
<g
className="coupling"
style={{ transform: `translate(0px,${scaleY(value)}px)` }}
>
<g className="coupling" transform={`translate(0 ${scaleY(value)})`}>
<circle
onMouseEnter={() => setOver(true)}
onMouseLeave={() => setOver(false)}
Expand All @@ -27,7 +24,7 @@ export default function JsCoupling({ value }: JsCouplingProps) {
pointerEvents="all"
/>
{isOver && (
<g style={{ transform: `translate(0px,15px)` }}>
<g transform="translate(0 15)">
<text
pointerEvents="none"
stroke="white"
Expand Down
5 changes: 4 additions & 1 deletion src/component/2d/Chart2D.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,10 @@ function chart2DInner({
height={height}
id="nmrSVG"
shapeRendering={SpectraRendering}
style={{ position: 'absolute' }}
style={{
position: 'absolute',
fontFamily: 'Arial, Helvetica, sans-serif',
}}
>
<defs>
<clipPath id={`${displayerKey}clip-chart-2d`}>
Expand Down
2 changes: 1 addition & 1 deletion src/component/elements/NextPrev.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ function NextPrev(props: NextPrevProps) {
>
<div
css={css`
transform: translateX(-${translation}px);
transform: translateX(-${translation});
lpatiny marked this conversation as resolved.
Show resolved Hide resolved
transition: transform ease-out ${transition}s;
height: 100%;
width: ${slidersWidth}px;
Expand Down
4 changes: 2 additions & 2 deletions src/component/elements/SVGGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ export function SVGGroup(props: SVGGroupProps) {
if (element) {
const boundary = element.getBoundingClientRect();
if (direction === 'row') {
element.style.transform = `translate(${shift}px,0)`;
element.setAttribute('transform', `translate(${shift},0)`);
shift += boundary.width + space;
} else {
element.style.transform = `translate(0,${shift}px)`;
element.setAttribute('transform', `translate(0,${shift})`);
shift += boundary.height + space;
}
}
Expand Down
7 changes: 6 additions & 1 deletion src/component/elements/linearAxis/LinearVerticalAxis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,12 @@ const VerticalAxis = forwardRef<SVGGElement | null, VerticalRenderProps>(
/>
)}
<line y1={position} y2={position} x1={15} x2={10} stroke="black" />
<text y={position} dominantBaseline="middle" textAnchor="end">
<text
y={position}
dominantBaseline="middle"
textAnchor="end"
fill="black"
>
{label}
</text>
</g>
Expand Down
2 changes: 1 addition & 1 deletion src/component/elements/resizer/SVGResizer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ function SVGResizerHandle(props: {
<g
onPointerDown={props.onPointerDown}
css={styles.container}
style={{ transform: `translateX(${props.position}px)` }}
transform={`translate(${props.position})`}
data-no-export="true"
>
<rect x="-5px" style={style.innerContainer} />
Expand Down
2 changes: 1 addition & 1 deletion src/component/modal/ExportAsJcampModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ function ExportAsJcampModal(props: ExportAsJCAMPProps) {
function submitHandler(options) {
void (async () => {
const hideLoading = await alert.showLoading(
'export as JCAMP in progress',
'export as JCAMP-DX in progress',
);
try {
exportAsJcamp(spectrum, options);
Expand Down
4 changes: 2 additions & 2 deletions src/component/panels/SpectrumsPanel/SpectraTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const Spectra2DContextMenuOptions: ContextMenuItem[] = [
data: { id: SpectraContextMenuOptionsKeys.Delete },
},
{
text: 'Export as jcamp',
text: 'Export as JCAMP-DX',
icon: <FaFileExport />,
data: { id: SpectraContextMenuOptionsKeys.ExportAsJcamp },
},
Expand All @@ -90,7 +90,7 @@ const Spectra2DContextMenuOptions: ContextMenuItem[] = [
const Spectra1DContextMenuOptions: ContextMenuItem[] = [
...Spectra2DContextMenuOptions,
{
text: 'Export as jcamp',
text: 'Export as JCAMP-DX',
icon: <FaFileExport />,
data: { id: SpectraContextMenuOptionsKeys.ExportAsJcamp },
},
Expand Down
4 changes: 2 additions & 2 deletions src/component/reducer/actions/utilities/__tests__/data/test.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1194,13 +1194,13 @@
"format": ""
},
{
"label": "Number Of Scan",
"label": "Number of scans",
"jpath": ["info", "numberOfScans"],
"visible": true,
"format": "0"
},
{
"label": "Pulse Sequence",
"label": "Pulse sequence",
"jpath": ["info", "pulseSequence"],
"visible": true,
"format": ""
Expand Down
3 changes: 3 additions & 0 deletions src/component/utility/export.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,9 @@ function getBlob(
_svg.append(floatingMoleculesGroup);

const nmrCss = `
* {
font-family: Arial, Helvetica, sans-serif;
}
.grid line,.grid path{stroke:none;} .peaks-text{fill:#730000} .x path{stroke-width:1px} .x text{
font-size: 12px;
font-weight: bold;
Expand Down
6 changes: 3 additions & 3 deletions src/component/workspaces/workspaceDefaultProperties.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,16 +99,16 @@ export const workspaceDefaultProperties: Required<WorkspacePreferences> = {
infoBlock: {
visible: false,
fields: [
{ label: 'name', jpath: ['info', 'name'], visible: true, format: '' },
{ label: 'Name', jpath: ['info', 'name'], visible: true, format: '' },
{
label: 'Number Of Scan',
label: 'Number of scans',
jpath: ['info', 'numberOfScans'],
visible: true,
format: '0',
},

{
label: 'Pulse Sequence',
label: 'Pulse sequence',
jpath: ['info', 'pulseSequence'],
visible: true,
format: '',
Expand Down
6 changes: 3 additions & 3 deletions src/demo/views/CustomWorkspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,16 +94,16 @@ const customWorkspaces: CustomWorkspaces = {
infoBlock: {
visible: false,
fields: [
{ label: 'name', jpath: ['info', 'name'], visible: true, format: '' },
{ label: 'Name', jpath: ['info', 'name'], visible: true, format: '' },
{
label: 'Number Of Scan',
label: 'Number of scans',
jpath: ['info', 'numberOfScans'],
visible: true,
format: '0',
},

{
label: 'Pulse Sequence',
label: 'Pulse sequence',
jpath: ['info', 'pulseSequence'],
visible: true,
format: '',
Expand Down
6 changes: 3 additions & 3 deletions src/demo/views/SnapshotView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,16 +389,16 @@ const customWorkspaces: CustomWorkspaces = {
infoBlock: {
visible: false,
fields: [
{ label: 'name', jpath: ['info', 'name'], visible: true, format: '' },
{ label: 'Name', jpath: ['info', 'name'], visible: true, format: '' },
{
label: 'Number Of Scan',
label: 'Number of scans',
jpath: ['info', 'numberOfScans'],
visible: true,
format: '0',
},

{
label: 'Pulse Sequence',
label: 'Pulse sequence',
jpath: ['info', 'pulseSequence'],
visible: true,
format: '',
Expand Down