git.iko.soy/bridge
on master help sign in
add sigil download on passport
cdfa387Liam Fitzgerald
src/components/SigilDownloader.js+8−7
compare with master
unifiedsplit
@@ -1,12 +1,14 @@
1−import React, { useRef } from 'react';
1+import React, { useRef, useState } from 'react';
2import * as ob from 'urbit-ob';
2import * as ob from 'urbit-ob';
3import { saveAs } from 'file-saver';
3import { saveAs } from 'file-saver';
4import { sigil, stringRenderer } from 'urbit-sigil-js';
4import { sigil, stringRenderer } from 'urbit-sigil-js';
5
5
6import { dataURItoBlob, loadImg, initCanvas } from 'lib/SigilDownloader';
6import { dataURItoBlob, loadImg, initCanvas } from 'lib/SigilDownloader';
7
7
8−// const attachClickHandler = (children, handler) => Array.isArray(children) ? children.map((Child,key) => (<Child key={key} onClick={handler} />)) : (<children onClick={handler}>);
8+import WithTooltip from 'components/WithTooltip';
9+
9export default function SigilDownloader({ point, children }) {
10export default function SigilDownloader({ point, children }) {
11+ const [downloaded, setDownloaded] = useState(false);
10 const downloadSigil = () => {
12 const downloadSigil = () => {
11 const patp = ob.patp(point);
13 const patp = ob.patp(point);
12
14
@@ -36,14 +38,13 @@ export default function SigilDownloader({ point, children }) {
36 const svgText = new XMLSerializer().serializeToString(svgDocument);
38 const svgText = new XMLSerializer().serializeToString(svgDocument);
37 const svg64 = btoa(svgText);
39 const svg64 = btoa(svgText);
38
40
39− const svgBlob = new Blob([svgText], { type: 'image/svg+xml' });
40− saveAs(svgBlob, `${patp}.svg`);
41−
42 const pngTask = loadImg(DATA_URI_PREFIX + svg64, _size, _size).then(img => {
41 const pngTask = loadImg(DATA_URI_PREFIX + svg64, _size, _size).then(img => {
43 ctx.drawImage(img, 0, 0, _size, _size);
42 ctx.drawImage(img, 0, 0, _size, _size);
44 const png = dataURItoBlob(canvas.toDataURL('image/png'));
43 const png = dataURItoBlob(canvas.toDataURL('image/png'));
45 saveAs(png, `${patp}.png`);
44 saveAs(png, `${patp}.png`);
46 ctx.clearRect(0, 0, pngSize, pngSize);
45 ctx.clearRect(0, 0, pngSize, pngSize);
46+
47+ setDownloaded(true);
47 });
48 });
48
49
49 return pngTask;
50 return pngTask;
@@ -51,11 +52,11 @@ export default function SigilDownloader({ point, children }) {
51 const canvasRef = useRef(null);
52 const canvasRef = useRef(null);
52
53
53 return (
54 return (
54− <>
55+ <WithTooltip content={downloaded ? 'Downloaded!' : 'Download'}>
55 {React.Children.map(children, child =>
56 {React.Children.map(children, child =>
56 React.cloneElement(child, { onClick: downloadSigil })
57 React.cloneElement(child, { onClick: downloadSigil })
57 )}
58 )}
58 <canvas style={{ display: 'none' }} ref={canvasRef} />
59 <canvas style={{ display: 'none' }} ref={canvasRef} />
59− </>
60+ </WithTooltip>
60 );
61 );
61}
62}
src/lib/SigilDownloader.js−1
@@ -17,7 +17,6 @@ export const initCanvas = (canvas, size) => {
17export const loadImg = src =>
17export const loadImg = src =>
18 new Promise((resolve, reject) => {
18 new Promise((resolve, reject) => {
19 const img = new Image();
19 const img = new Image();
20− debugger;
21 img.onload = () => resolve(img);
20 img.onload = () => resolve(img);
22 img.onerror = () => reject(`Error loading image. src: ${src}`);
21 img.onerror = () => reject(`Error loading image. src: ${src}`);
23 img.src = src;
22 img.src = src;