1 |
|
2 | const { db } = require('../db/db');
|
3 | const { style, fsw } = require('@sutton-signwriting/core');
|
4 | const { symbolNormalize } = require('./fsw-symbol-normalize')
|
5 | const fs = require('fs');
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 | const symbolSvgBody = async (fswSym) => {
|
22 | const parsed = fsw.parse.symbol(fswSym);
|
23 | const blank = '';
|
24 |
|
25 | if (!parsed.symbol) return blank;
|
26 |
|
27 | const res = await db.query('select svg,width,height from symbol where symkey=?', [parsed.symbol]);
|
28 | const sym = res[0];
|
29 | if (!sym) return blank;
|
30 |
|
31 | let styling = style.parse(parsed.style);
|
32 |
|
33 | let x1, y1, x2, y2;
|
34 | if (parsed.coord) {
|
35 | x1 = parsed.coord[0];
|
36 | y1 = parsed.coord[1];
|
37 | x2 = 500 + (500-x1);
|
38 | y2 = 500 + (500-y1);
|
39 | } else {
|
40 | x1 = parseInt( 500 - (sym.width+1)/2 );
|
41 | y1 = parseInt( 500 - (sym.height+1)/2 );
|
42 | x2 = 500 + (500-x1);
|
43 | y2 = 500 + (500-y1);
|
44 | }
|
45 |
|
46 | sym.svg = ` <svg x="${x1}" y="${y1}">${sym.svg}</svg>`;
|
47 |
|
48 | let line;
|
49 | if (styling.colorize) {
|
50 | line = fsw.colorize(parsed.symbol);
|
51 | } else if (styling.detail) {
|
52 | line = styling.detail[0]
|
53 | }
|
54 | if (line) {
|
55 | sym.svg = sym.svg.replace(/class="sym-line"/, `class="sym-line" fill="${line}"`);
|
56 | }
|
57 |
|
58 | let fill = styling.detail && styling.detail[1];
|
59 | if (fill) {
|
60 | sym.svg = sym.svg.replace(/class="sym-fill" fill="#ffffff"/, `class="sym-fill" fill="${fill}"`);
|
61 | }
|
62 |
|
63 | let background = '';
|
64 | if (styling.padding) {
|
65 | x1 -= styling.padding;
|
66 | y1 -= styling.padding;
|
67 | x2 += styling.padding;
|
68 | y2 += styling.padding;
|
69 | }
|
70 | if (styling.background) {
|
71 | background = `\n <rect x="${x1}" y="${y1}" width="${x2 - x1}" height="${y2 - y1}" style="fill:${styling.background};" />`
|
72 | }
|
73 |
|
74 | return ` <text font-size="0">${fswSym}</text>${background}
|
75 | ${sym.svg}`;
|
76 | }
|
77 |
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 | const symbolSvg = async (fswSym) => {
|
93 | let parsed = fsw.parse.symbol(fswSym);
|
94 | const blank = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1" height="1"></svg>';
|
95 | if (!parsed.symbol) return blank;
|
96 |
|
97 | if (!parsed.coord) {
|
98 | norm = await symbolNormalize(fswSym);
|
99 | parsed = fsw.parse.symbol(norm);
|
100 | if (!parsed.symbol) return blank;
|
101 | }
|
102 |
|
103 | let styling = style.parse(parsed.style);
|
104 |
|
105 | let x1, y1, x2, y2;
|
106 | x1 = parsed.coord[0];
|
107 | y1 = parsed.coord[1];
|
108 | x2 = 500 + (500-x1);
|
109 | y2 = 500 + (500-y1);
|
110 |
|
111 | let classes = '';
|
112 | if (styling.classes) {
|
113 | classes = ` class="${styling.classes}"`
|
114 | }
|
115 | let id = '';
|
116 | if (styling.id) {
|
117 | id = ` id="${styling.id}"`
|
118 | }
|
119 |
|
120 | if (styling.padding) {
|
121 | x1 -= styling.padding;
|
122 | y1 -= styling.padding;
|
123 | x2 += styling.padding;
|
124 | y2 += styling.padding;
|
125 | }
|
126 |
|
127 | let sizing = '';
|
128 | if (styling.zoom != 'x') {
|
129 | sizing = ` width="${(x2 - x1) * (styling.zoom ? styling.zoom : 1)}" height="${(y2 - y1) * (styling.zoom ? styling.zoom : 1)}"`;
|
130 | }
|
131 |
|
132 | let svg = `<svg${classes}${id} version="1.1" xmlns="http://www.w3.org/2000/svg"${sizing} viewBox="${x1} ${y1} ${(x2 - x1)} ${(y2 - y1)}">
|
133 | `
|
134 |
|
135 | const body = await symbolSvgBody(fswSym);
|
136 |
|
137 | return svg + body + '\n</svg>';
|
138 | ;
|
139 | }
|
140 |
|
141 | if (require.main === module) {
|
142 | symbolSvg(process.argv[2]).then( res => {
|
143 | if (process.argv[3]) {
|
144 | fs.writeFileSync(process.argv[3], res)
|
145 | } else {
|
146 | console.log(res);
|
147 | }
|
148 | })
|
149 | } else {
|
150 | module.exports = { symbolSvgBody, symbolSvg }
|
151 | }
|