git.iko.soy/bridge
on master help sign in
add sigil generation on submit
a8dd29bLiam Fitzgerald
src/form/Inputs.js+3−1
compare with master
unifiedsplit
@@ -221,9 +221,11 @@ export const ColorInput = ({
221 htmlFor={name}>
221 htmlFor={name}>
222 {label}
222 {label}
223 </Flex.Item>
223 </Flex.Item>
224− <div className="flex">
224+ <div className="flex flex-wrap">
225 {colors.map(c => (
225 {colors.map(c => (
226 <button
226 <button
227+ type="button"
228+ key={c}
227 className={cn('m0 p0 h7 w7 p2 flex flex-center', {
229 className={cn('m0 p0 h7 w7 p2 flex flex-center', {
228 'b b-black': isWhite(c),
230 'b b-black': isWhite(c),
229 })}
231 })}
src/form/SubmitButton.js+3−1
@@ -14,6 +14,7 @@ export default function SubmitButton({
14 handleSubmit,
14 handleSubmit,
15 ...rest
15 ...rest
16}) {
16}) {
17+ const form = useFormState();
17 const {
18 const {
18 valid,
19 valid,
19 validating,
20 validating,
@@ -23,7 +24,8 @@ export default function SubmitButton({
23 dirtySinceLastSubmit,
24 dirtySinceLastSubmit,
24 submitErrors,
25 submitErrors,
25 submitSucceeded,
26 submitSucceeded,
26− } = useFormState();
27+ } = form;
28+ console.log(form);
27
29
28 const onlyWarningInSubmitErrors = onlyHasWarning(submitErrors);
30 const onlyWarningInSubmitErrors = onlyHasWarning(submitErrors);
29
31
src/lib/SigilDownloader.js+5
@@ -14,6 +14,11 @@ export const initCanvas = (canvas, size) => {
14 return canvas;
14 return canvas;
15};
15};
16
16
17+export const cleanupCanvas = canvas => {
18+ canvas.width = 0;
19+ canvas.height = 0;
20+};
21+
17export const loadImg = src =>
22export const loadImg = src =>
18 new Promise((resolve, reject) => {
23 new Promise((resolve, reject) => {
19 const img = new Image();
24 const img = new Image();
src/lib/useSigilDownloader.jsnew file+58
@@ -0,0 +1,58 @@
1+import { useCallback } from 'react';
2+import { saveAs } from 'file-saver';
3+import { sigil, stringRenderer } from 'urbit-sigil-js';
4+import * as ob from 'urbit-ob';
5+
6+import {
7+ dataURItoBlob,
8+ loadImg,
9+ initCanvas,
10+ cleanupCanvas,
11+} from 'lib/SigilDownloader';
12+
13+export default function useSigilDownloader(canvasRef) {
14+ const downloadSigil = useCallback(
15+ (point, colors, size) => {
16+ const patp = ob.patp(point);
17+
18+ const _size = size / window.devicePixelRatio;
19+
20+ const DATA_URI_PREFIX = 'data:image/svg+xml;base64,';
21+
22+ // initialize canvas element
23+ const canvas = initCanvas(canvasRef.current, { x: _size, y: _size });
24+ const ctx = canvas.getContext('2d');
25+
26+ // make sigil svg and encoded into base64
27+ const svg = sigil({
28+ patp,
29+ renderer: stringRenderer,
30+ size: _size,
31+ colors,
32+ margin: (54 / 256) * _size,
33+ });
34+
35+ // FF rendering hack
36+ const svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml');
37+ svgDocument.documentElement.width.baseVal.valueAsString = `${size}px`;
38+ svgDocument.documentElement.height.baseVal.valueAsString = `${size}px`;
39+ const svgText = new XMLSerializer().serializeToString(svgDocument);
40+ const svg64 = btoa(svgText);
41+
42+ return loadImg(DATA_URI_PREFIX + svg64, _size, _size)
43+ .then(img => {
44+ ctx.drawImage(img, 0, 0, _size, _size);
45+ const png = dataURItoBlob(canvas.toDataURL('image/png'));
46+ saveAs(png, `${patp.slice(1)}-sigil.png`);
47+ ctx.clearRect(0, 0, _size, _size);
48+ })
49+ .catch(() => 'Error generating sigil')
50+ .then(r => {
51+ cleanupCanvas(canvasRef.current);
52+ return r;
53+ });
54+ },
55+ [canvasRef]
56+ );
57+ return { downloadSigil };
58+}
src/views/SigilGenerator.js+28−4
@@ -1,6 +1,7 @@
1−import React from 'react';
1+import React, { useRef, useCallback } from 'react';
2import { Grid, Flex } from 'indigo-react';
2import { Grid, Flex } from 'indigo-react';
3import * as ob from 'urbit-ob';
3import * as ob from 'urbit-ob';
4+import { FORM_ERROR } from 'final-form';
4
5
5import { usePointCursor } from 'store/pointCursor';
6import { usePointCursor } from 'store/pointCursor';
6
7
@@ -9,6 +10,7 @@ import Sigil from 'components/Sigil';
9
10
10import * as need from 'lib/need';
11import * as need from 'lib/need';
11import { useLocalRouter } from 'lib/LocalRouter';
12import { useLocalRouter } from 'lib/LocalRouter';
13+import useSigilDownloader from 'lib/useSigilDownloader';
12
14
13import { composeValidator, buildNumberValidator } from 'form/validators';
15import { composeValidator, buildNumberValidator } from 'form/validators';
14import BridgeForm from 'form/BridgeForm';
16import BridgeForm from 'form/BridgeForm';
@@ -18,6 +20,7 @@ import { NumberInput, ColorInput } from 'form/Inputs';
18
20
19const BG_COLORS = [
21const BG_COLORS = [
20 '#000000',
22 '#000000',
23+ '#FFFFFF',
21 '#C80F34',
24 '#C80F34',
22 '#EE5432',
25 '#EE5432',
23 '#F8C134',
26 '#F8C134',
@@ -36,12 +39,26 @@ const BG_COLORS = [
36const FG_COLORS = ['#000000', '#FFFFFF'];
39const FG_COLORS = ['#000000', '#FFFFFF'];
37
40
38export default function SigilGenerator() {
41export default function SigilGenerator() {
39− const { pop, push, names } = useLocalRouter();
42+ const { pop } = useLocalRouter();
40 const { pointCursor } = usePointCursor();
43 const { pointCursor } = usePointCursor();
41
44
42 const validate = composeValidator({ size: buildNumberValidator(16) });
45 const validate = composeValidator({ size: buildNumberValidator(16) });
43 const point = need.point(pointCursor);
46 const point = need.point(pointCursor);
47+
48+ const canvasRef = useRef(null);
49+
50+ const { downloadSigil } = useSigilDownloader(canvasRef);
44− const onSubmit = () => {};
51+ const onSubmit = useCallback(
52+ async (values, form) => {
53+ const error = await downloadSigil(point, values.colors, values.size);
54+ if (error) {
55+ return { [FORM_ERROR]: error };
56+ }
57+ // reset on next tick
58+ setTimeout(() => form.reset(values));
59+ },
60+ [point, downloadSigil]
61+ );
45 return (
62 return (
46 <View pop={pop}>
63 <View pop={pop}>
47 <BridgeForm
64 <BridgeForm
@@ -69,7 +86,12 @@ export default function SigilGenerator() {
69 <Flex.Item className="mb1">Urbit ID</Flex.Item>
86 <Flex.Item className="mb1">Urbit ID</Flex.Item>
70 <Flex.Item className="mono">{ob.patp(point)}</Flex.Item>
87 <Flex.Item className="mono">{ob.patp(point)}</Flex.Item>
71 </Grid.Item>
88 </Grid.Item>
89+ <Grid.Item
90+ fourth={1}
72− <Grid.Item full as={NumberInput} name="size" label="Size (px)" />
91+ as={NumberInput}
92+ name="size"
93+ label="Size (px)"
94+ />
73 <Grid.Item
95 <Grid.Item
74 full
96 full
75 as={ColorInput}
97 as={ColorInput}
@@ -95,6 +117,8 @@ export default function SigilGenerator() {
95 </Grid>
117 </Grid>
96 )}
118 )}
97 </BridgeForm>
119 </BridgeForm>
120+
121+ <canvas style={{ display: 'none' }} ref={canvasRef} />
98 </View>
122 </View>
99 );
123 );
100}
124}