Skip to content

Commit 2dbe6c8

Browse files
atapasatapas
committed
feat: Export as png jpeg and svg is done
1 parent 3cddb9c commit 2dbe6c8

5 files changed

Lines changed: 159 additions & 78 deletions

File tree

‎components/core/ExportShape.js‎

Lines changed: 92 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from "react";
1+
import React, { useState, useEffect } from "react";
22

33
// dynamic from Next.js
44
import dynamic from "next/dynamic";
@@ -24,97 +24,114 @@ import download from "downloadjs";
2424
// misc utilities
2525
import { getShapeId } from "../../utils/misc";
2626

27+
// Radios
28+
import { Radios } from "..";
29+
2730
const ExportShape = ({ show, setShow, shape }) => {
2831
console.log({ shape });
29-
const [exportType, setExportType] = useState('png');
32+
const [exportType, setExportType] = useState();
33+
34+
useEffect(() => {
35+
setExportType('png');
36+
}, [show])
37+
38+
const handleTypeChange = (event) => {
39+
const { value } = event.target;
40+
41+
console.log(`selected export type ${value}`);
42+
setExportType(value);
43+
};
3044

3145
const doExport = (id, name) => {
32-
console.log("Save as Png");
33-
switch(exportType) {
34-
case "png":
35-
exportAsPNG(id, name);
36-
break;
37-
case "jpeg":
38-
exportAsJPEG(id, name);
39-
break;
40-
case "svg":
41-
exportAsSVG(id, name);
42-
break;
43-
case "canvas":
44-
exportAsCanvas(id, name);
45-
break;
46-
default:
47-
exportAsPNG(id, name);
48-
break;
46+
console.log(`Save as ${exportType}`);
47+
switch (exportType) {
48+
case "png":
49+
exportAsPNG(id, name);
50+
break;
51+
case "jpeg":
52+
exportAsJPEG(id, name);
53+
break;
54+
case "svg":
55+
exportAsSVG(id, name);
56+
break;
57+
default:
58+
exportAsPNG(id, name);
59+
break;
4960
}
50-
5161
};
5262

5363
const exportAsPNG = (id, name) => {
5464
toPng(document.getElementById(id)).then(function (dataUrl) {
55-
console.log(dataUrl);
56-
download(dataUrl, `${name}.png`);
57-
toast.success(`${name}.png has been exported sucessfully!`);
58-
});
59-
}
60-
const exportAsCanvas = (id, name) => {
61-
toCanvas(document.getElementById(id)).then(function (dataUrl) {
62-
console.log(dataUrl);
63-
download(dataUrl, `${name}.png`);
64-
toast.success(`${name}.png has been exported sucessfully!`);
65+
console.log(dataUrl);
66+
download(dataUrl, `${name}.png`);
67+
toast.success(`${name}.png has been exported sucessfully!`);
6568
});
66-
}
69+
};
70+
6771
const exportAsJPEG = (id, name) => {
68-
toJpeg(document.getElementById(id)).then(function (dataUrl) {
69-
console.log(dataUrl);
70-
download(dataUrl, `${name}.png`);
71-
toast.success(`${name}.png has been exported sucessfully!`);
72+
toJpeg(document.getElementById(id), { quality: 0.95 }).then(function (
73+
dataUrl
74+
) {
75+
console.log(dataUrl);
76+
download(dataUrl, `${name}.jpeg`);
77+
toast.success(`${name}.jpeg has been exported sucessfully!`);
7278
});
73-
}
79+
};
7480
const exportAsSVG = (id, name) => {
7581
toSvg(document.getElementById(id)).then(function (dataUrl) {
76-
console.log(dataUrl);
77-
download(dataUrl, `${name}.png`);
78-
toast.success(`${name}.png has been exported sucessfully!`);
82+
console.log(dataUrl);
83+
download(dataUrl, `${name}.svg`);
84+
toast.success(`${name}.svg has been exported sucessfully!`);
7985
});
80-
}
86+
};
8187
return (
82-
<>
83-
{shape &&
84-
<Modal
85-
size="lg"
86-
aria-labelledby="contained-modal-title-vcenter"
87-
show={show}
88-
onHide={() => setShow(false)}
89-
centered
90-
>
91-
<Modal.Header closeButton>
92-
<Modal.Title>Export {shape.name} </Modal.Title>
93-
</Modal.Header>
94-
<Modal.Body>
95-
<div>
96-
<Shape
97-
name={shape.name}
98-
formula={shape.formula}
99-
width="300px"
100-
height="300px"
101-
backgroundColor={shape.backgroundColor}
102-
id={getShapeId(shape.name, true)}
103-
/>
104-
</div>
105-
<div>
106-
107-
</div>
108-
</Modal.Body>
109-
110-
<Modal.Footer>
111-
<Button
112-
onClick={() => doExport(getShapeId(shape.name, true), shape.name)}
88+
<>
89+
{shape && (
90+
<Modal
91+
size="lg"
92+
aria-labelledby="contained-modal-title-vcenter"
93+
show={show}
94+
onHide={() => setShow(false)}
95+
centered
11396
>
114-
Export
115-
</Button>
116-
</Modal.Footer>
117-
</Modal>}
97+
<Modal.Header closeButton>
98+
<Modal.Title>Export {shape.name} </Modal.Title>
99+
</Modal.Header>
100+
<Modal.Body>
101+
<div>
102+
<Shape
103+
name={shape.name}
104+
formula={shape.formula}
105+
width="300px"
106+
height="300px"
107+
backgroundColor={shape.backgroundColor}
108+
id={getShapeId(shape.name, true)}
109+
/>
110+
</div>
111+
<div>
112+
<Radios
113+
groupName="export-type"
114+
heading="Export as:"
115+
options={[
116+
{ value: "png", displayValue: "png" },
117+
{ value: "jpeg", displayValue: "jpeg" },
118+
{ value: "svg", displayValue: "svg" },
119+
]}
120+
selectedOption={exportType}
121+
onValueChange={handleTypeChange}
122+
/>
123+
</div>
124+
</Modal.Body>
125+
126+
<Modal.Footer>
127+
<Button
128+
onClick={() => doExport(getShapeId(shape.name, true), shape.name)}
129+
>
130+
Export
131+
</Button>
132+
</Modal.Footer>
133+
</Modal>
134+
)}
118135
</>
119136
);
120137
};

‎components/core/Landing.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ const Landing = ({ setOpen, user, setUser }) => {
1515

1616
return(
1717
<div>
18-
<Header setOpen={setOpen} user={user} setUser={setUser} />
1918
<div>
2019
<h1>Landing</h1>
2120
</div>

‎components/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@ export { default as ExportShape } from "./core/ExportShape";
66

77
// utils
88
export { default as Header } from "./utils/Header";
9-
export { default as ShapeList } from './utils/ShapeList';
9+
export { default as ShapeList } from './utils/ShapeList';
10+
export { default as Radios } from './utils/Radios';

‎components/utils/Radios.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
4+
const RadioGroup = styled.div`
5+
margin-top: 5px;
6+
`;
7+
8+
const Radio = styled.span`
9+
margin-right: 24px;
10+
`;
11+
12+
const RadioBtn = props => {
13+
const value = props.value;
14+
const groupName = props.groupName;
15+
const displayValue = props.displayValue;
16+
const onValueChange = props.onValueChange;
17+
const selectedOption = props.selectedOption;
18+
19+
return(
20+
<Radio className="form-radio">
21+
<label>
22+
<input
23+
style={{marginRight: '2px'}}
24+
type="radio"
25+
name={ groupName }
26+
value={ value }
27+
checked={ selectedOption === value }
28+
onChange={ onValueChange }
29+
/>
30+
<span>{ displayValue }</span>
31+
</label>
32+
</Radio>
33+
)
34+
}
35+
36+
const Radios = props => {
37+
38+
const groupName = props.groupName;
39+
const options = props.options;
40+
const onValueChange = props.onValueChange;
41+
const selectedOption = props.selectedOption;
42+
const heading = props.heading;
43+
44+
return(
45+
<>
46+
{ heading && <span>{ heading }</span> } {' '}
47+
<RadioGroup className="form-radio-group">
48+
{
49+
options && options.length > 0 && options.map((option, index) => (
50+
<RadioBtn
51+
key={ index }
52+
groupName={ groupName }
53+
value={ option.value }
54+
displayValue={ option.displayValue }
55+
selectedOption={ selectedOption }
56+
onValueChange={ onValueChange } />
57+
))
58+
}
59+
</RadioGroup>
60+
</>
61+
)
62+
}
63+
64+
export default Radios;

‎components/utils/ShapeList.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ const ShapeList = ({ setOpen, user, data }) => {
171171
height="300px"
172172
name={shape.name}
173173
id={getShapeId(shape.name)}
174-
backgroundColor="#eb3d86"
174+
backgroundColor= {shape.backgroundColor || "#eb3d86"}
175175
showShadow={shape.showAdvanced}
176176
/>
177177

0 commit comments

Comments
 (0)