@sutton-signwriting/font-ttf
Version:
a javascript package for the web components and browser that generates SVG and PNG images for individual symbols and complete signs
1,140 lines (970 loc) âĒ 34.7 kB
JavaScript
/**
* Sutton SignWriting TrueType Font Module v1.2.0 (https://github.com/sutton-signwriting/font-ttf)
* Author: Steve Slevinski (https://SteveSlevinski.me)
* swu.mjs is released under the MIT License.
*/
/**
* Sutton SignWriting Core Module v1.2.0 (https://github.com/sutton-signwriting/core)
* Author: Steve Slevinski (https://SteveSlevinski.me)
* convert.mjs is released under the MIT License.
*/
/**
* Function to convert a number to an SWU number character
* @function convert.num2swu
* @param {number} num - Integer value for number
* @returns {string} SWU number character
* @example
* convert.num2swu(500)
*
* return 'ðĪ'
*/
const num2swu = num => String.fromCodePoint(0x1D80C + parseInt(num) - 250);
/**
* Function to convert an array of x,y integers to two SWU number characters
* @function convert.coord2swu
* @param {number[]} coord - Array of x,y integers
* @returns {string} Two SWU number character
* @example
* convert.coord2swu([500, 500])
*
* return 'ðĪðĪ'
*/
const coord2swu = coord => coord.map(num => num2swu(num)).join('');
/**
* Function to convert an SWU symbol character to a code point on plane 4
* @function convert.swu2code
* @param {string} swuSym - SWU symbol character
* @returns {number} Code point on plane 4
* @example
* convert.swu2code('ņ')
*
* return 0x40001
*/
const swu2code = swuSym => parseInt(swuSym.codePointAt(0));
/**
* Function to convert an SWU symbol character to a 16-bit ID
* @function convert.swu2id
* @param {string} swuSym - SWU symbol character
* @returns {number} 16-bit ID
* @example
* convert.swu2id('ņ')
*
* return 1
*/
const swu2id = swuSym => swu2code(swuSym) - 0x40000;
/* support ongoing development on https://patreon.com/signwriting */
let sizes = {};
const zoom = 2;
const bound = 76 * zoom;
const canvaser = document.createElement("canvas");
canvaser.width = bound;
canvaser.height = bound;
const context = canvaser.getContext("2d");
/**
* Function that returns the size of a symbol using an id
* @function font.symbolSize
* @param {number} id - a 16-bit number of a symbol
* @example
* font.symbolSize(1)
*
* return [15,30]
*/
const symbolSize = function (id) {
if (id in sizes) {
return [...sizes[id]];
}
context.clearRect(0, 0, bound, bound);
context.font = 30 * zoom + "px 'SuttonSignWritingLine'";
context.fillText(String.fromCodePoint(id + 0xF0000), 0, 0);
const imgData = context.getImageData(0, 0, bound, bound).data;
let w, h, i, s;
wloop: for (w = bound - 1; w >= 0; w--) {
for (h = 0; h < bound; h += 1) {
for (s = 0; s < 4; s += 1) {
i = w * 4 + h * 4 * bound + s;
if (imgData[i]) {
break wloop;
}
}
}
}
var width = w;
hloop: for (h = bound - 1; h >= 0; h--) {
for (w = 0; w < width; w += 1) {
for (s = 0; s < 4; s += 1) {
i = w * 4 + h * 4 * bound + s;
if (imgData[i]) {
break hloop;
}
}
}
}
var height = h + 1;
width = Math.ceil(width / zoom);
height = Math.ceil(height / zoom); // Rounding error in chrome. Manual fixes.
if (14394 == id) {
width = 19;
}
if ([10468, 10480, 10496, 10512, 10500, 10532, 10548, 10862, 10878, 10894, 11058, 11074, 11476, 11488, 11492, 11504, 11508, 11520, 10516, 10910, 10926, 11042, 11082, 10942].includes(id)) {
width = 20;
}
if (31921 == id) {
width = 22;
}
if (38460 == id) {
width = 23;
}
if ([20164, 20212].includes(id)) {
width = 25;
}
if (31894 == id) {
width = 28;
}
if (46698 == id) {
width = 29;
}
if (29606 == id) {
width = 30;
}
if (44855 == id) {
width = 40;
}
if (32667 == id) {
width = 50;
}
if ([11088, 11474, 11490, 11506].includes(id)) {
height = 20;
}
if (6285 == id) {
height = 21;
}
if (40804 == id) {
height = 31;
}
if (41475 == id) {
height = 36;
} // Error in chrome. Manual fix.
// if (width==0 && height==0) {
if (width == 0 && height == 0) {
const sizefix = {
9: [15, 30],
10: [21, 30],
11: [30, 15],
12: [30, 21],
13: [15, 30],
14: [21, 30]
};
if (id in sizefix) {
width = sizefix[id][0];
height = sizefix[id][1];
}
}
if (width == 0 && height == 0) {
return undefined;
}
sizes[id] = [width, height];
return [width, height];
};
/**
* Function that returns the size of a symbol using an SWU symbol character
* @function swu.symbolSize
* @param {string} swu - an SWU symbol character
* @example
* swu.symbolSize("ņ")
*
* return [15,30]
*/
const symbolSize$1 = function (swu) {
return symbolSize(swu2id(swu));
};
/**
* Function that returns a plane 15 character for a symbol line using an id
* @function font.symbolLine
* @param {number} id - a 16-bit number of a symbol
* @example
* font.symbolLine(1)
*
* return 'ó°'
*/
const symbolLine = function (id) {
return String.fromCodePoint(id + 0xF0000);
};
/**
* Function that returns a plane 16 character for a symbol fill using an id
* @function font.symbolFill
* @param {number} id - a 16-bit number of a symbol
* @example
* font.symbolFill(1)
*
* return 'ô'
*/
const symbolFill = function (id) {
return String.fromCodePoint(id + 0x100000);
};
/**
* Function that creates two text elements for a symbol using an id
* @function font.symbolText
* @param {number} id - a 16-bit number of a symbol
* @example
* font.symbolText(1)
*
* return ` <text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;">ô</text>
* <text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;">ó°</text>`
*/
const symbolText = function (id) {
return ` <text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;">${symbolFill(id)}</text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;">${symbolLine(id)}</text>`;
};
/**
* Function that returns a plane 15 character for a symbol line using an SWU symbol character
* @function swu.symbolLine
* @param {string} swu - an SWU symbol character
* @example
* swu.symbolLine('ņ')
*
* return 'ó°'
*/
const symbolLine$1 = function (swu) {
return symbolLine(swu2id(swu));
};
/**
* Function that returns a plane 165 character for a symbol fill using an SWU symbol character
* @function swu.symbolFill
* @param {string} swu - an SWU symbol character
* @example
* swu.symbolFill('ņ')
*
* return 'ô'
*/
const symbolFill$1 = function (swu) {
return symbolFill(swu2id(swu));
};
/**
* Function that creates two text elements for a symbol using an SWU symbol character
* @function swu.symbolText
* @param {string} swu - an SWU symbol character
* @example
* swu.symbolText('ņ')
*
* return ` <text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;">ô</text>
* <text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;">ó°</text>`
*/
const symbolText$1 = function (swu) {
return symbolText(swu2id(swu));
};
/**
* Sutton SignWriting Core Module v1.2.0 (https://github.com/sutton-signwriting/core)
* Author: Steve Slevinski (https://SteveSlevinski.me)
* style.mjs is released under the MIT License.
*/
/**
* Object of regular expressions for style strings
*
* { colorize, colorhex, colorname, padding, zoom, zoomsym, classbase, id, colorbase, color, colors, background, detail, detailsym, classes, full }
* @alias style.re
* @type {object}
*/
let re = {
'colorize': 'C',
'colorhex': '(?:[0-9a-fA-F]{3}){1,2}',
'colorname': '[a-zA-Z]+',
'padding': 'P[0-9]{2}',
'zoom': 'Z(?:[0-9]+(?:\\.[0-9]+)?|x)',
'zoomsym': 'Z[0-9]{2},[0-9]+(?:\\.[0-9]+)?(?:,[0-9]{3}x[0-9]{3})?',
'classbase': '-?[_a-zA-Z][_a-zA-Z0-9-]{0,100}',
'id': '[a-zA-Z][_a-zA-Z0-9-]{0,100}'
};
re.colorbase = `(?:${re.colorhex}|${re.colorname})`;
re.color = `_${re.colorbase}_`;
re.colors = `_${re.colorbase}(?:,${re.colorbase})?_`;
re.background = `G${re.color}`;
re.detail = `D${re.colors}`;
re.detailsym = `D[0-9]{2}${re.colors}`;
re.classes = `${re.classbase}(?: ${re.classbase})*`;
re.full = `-(${re.colorize})?(${re.padding})?(${re.background})?(${re.detail})?(${re.zoom})?(?:-((?:${re.detailsym})*)((?:${re.zoomsym})*))?(?:-(${re.classes})?!(?:(${re.id})!)?)?`;
const prefixColor = color => {
const regex = new RegExp(`^${re.colorhex}$`);
return (regex.test(color) ? '#' : '') + color;
};
/**
* Function to parse style string to object
* @function style.parse
* @param {string} styleString - a style string
* @returns {object} elements of style string
* @example
* style.parse('-CP10G_blue_D_red,Cyan_')
*
* return {
* 'colorize': true,
* 'padding': 10,
* 'background': 'blue',
* 'detail': ['red', 'Cyan']
* }
*/
const parse = styleString => {
const regex = `^${re.full}`;
const m = (typeof styleString === 'string' ? styleString.match(new RegExp(regex)) : []) || [];
return {
'colorize': !m[1] ? undefined : !!m[1],
'padding': !m[2] ? undefined : parseInt(m[2].slice(1)),
'background': !m[3] ? undefined : prefixColor(m[3].slice(2, -1)),
'detail': !m[4] ? undefined : m[4].slice(2, -1).split(',').map(prefixColor),
'zoom': !m[5] ? undefined : m[5] === 'Zx' ? 'x' : parseFloat(m[5].slice(1)),
'detailsym': !m[6] ? undefined : m[6].match(new RegExp(re.detailsym, 'g')).map(val => {
const parts = val.split('_');
const detail = parts[1].split(',').map(prefixColor);
return {
'index': parseInt(parts[0].slice(1)),
'detail': detail
};
}),
'zoomsym': !m[7] ? undefined : m[7].match(new RegExp(re.zoomsym, 'g')).map(val => {
const parts = val.split(',');
return {
'index': parseInt(parts[0].slice(1)),
'zoom': parseFloat(parts[1]),
'offset': !parts[2] ? undefined : parts[2].split('x').map(val => parseInt(val) - 500)
};
}),
'classes': !m[8] ? undefined : m[8],
'id': !m[9] ? undefined : m[9]
};
};
/* support ongoing development on https://patreon.com/signwriting */
/**
* Sutton SignWriting Core Module v1.2.0 (https://github.com/sutton-signwriting/core)
* Author: Steve Slevinski (https://SteveSlevinski.me)
* swu.mjs is released under the MIT License.
*/
/**
* Object of regular expressions for SWU strings in UTF-16
*
* { symbol, coord, sort, box, prefix, spatial, signbox, sign, sortable }
* @alias swu.re
* @type {object}
*/
let re$1 = {
'symbol': '(?:(?:\uD8C0[\uDC01-\uDFFF])|(?:[\uD8C1-\uD8FC][\uDC00-\uDFFF])|(?:\uD8FD[\uDC00-\uDC80]))',
'coord': '(?:\uD836[\uDC0C-\uDDFF]){2}',
'sort': '\uD836\uDC00',
'box': '\uD836[\uDC01-\uDC04]'
};
re$1.prefix = `(?:${re$1.sort}(?:${re$1.symbol})+)`;
re$1.spatial = `${re$1.symbol}${re$1.coord}`;
re$1.signbox = `${re$1.box}${re$1.coord}(?:${re$1.spatial})*`;
re$1.sign = `${re$1.prefix}?${re$1.signbox}`;
re$1.sortable = `${re$1.prefix}${re$1.signbox}`;
/**
* Object of regular expressions for style strings
*
* { colorize, colorhex, colorname, padding, zoom, zoomsym, classbase, id, colorbase, color, colors, background, detail, detailsym, classes, full }
* @alias style.re
* @type {object}
*/
let re$1$1 = {
'colorize': 'C',
'colorhex': '(?:[0-9a-fA-F]{3}){1,2}',
'colorname': '[a-zA-Z]+',
'padding': 'P[0-9]{2}',
'zoom': 'Z(?:[0-9]+(?:\\.[0-9]+)?|x)',
'zoomsym': 'Z[0-9]{2},[0-9]+(?:\\.[0-9]+)?(?:,[0-9]{3}x[0-9]{3})?',
'classbase': '-?[_a-zA-Z][_a-zA-Z0-9-]{0,100}',
'id': '[a-zA-Z][_a-zA-Z0-9-]{0,100}'
};
re$1$1.colorbase = `(?:${re$1$1.colorhex}|${re$1$1.colorname})`;
re$1$1.color = `_${re$1$1.colorbase}_`;
re$1$1.colors = `_${re$1$1.colorbase}(?:,${re$1$1.colorbase})?_`;
re$1$1.background = `G${re$1$1.color}`;
re$1$1.detail = `D${re$1$1.colors}`;
re$1$1.detailsym = `D[0-9]{2}${re$1$1.colors}`;
re$1$1.classes = `${re$1$1.classbase}(?: ${re$1$1.classbase})*`;
re$1$1.full = `-(${re$1$1.colorize})?(${re$1$1.padding})?(${re$1$1.background})?(${re$1$1.detail})?(${re$1$1.zoom})?(?:-((?:${re$1$1.detailsym})*)((?:${re$1$1.zoomsym})*))?(?:-(${re$1$1.classes})?!(?:(${re$1$1.id})!)?)?`;
/** The convert module contains functions to convert between Formal SignWriitng in ASCII (FSW) and SignWriting in Unicode (SWU) characters, along with other types of data.
* [Characters set definitions](https://tools.ietf.org/id/draft-slevinski-formal-signwriting-07.html#rfc.section.2.2)
* @module convert
*/
/**
* Function to convert an SWU number character to an integer
* @function convert.swu2num
* @param {string} swuNum - SWU number character
* @returns {number} Integer value for number
* @example
* convert.swu2num('ðĪ')
*
* return 500
*/
const swu2num = swuNum => parseInt(swuNum.codePointAt(0)) - 0x1D80C + 250;
/**
* Function to convert two SWU number characters to an array of x,y integers
* @function convert.swu2coord
* @param {string} swuCoord - Two SWU number character
* @returns {number[]} Array of x,y integers
* @example
* convert.swu2coord('ðĪðĪ')
*
* return [500, 500]
*/
const swu2coord = swuCoord => [swu2num(swuCoord.slice(0, 2)), swu2num(swuCoord.slice(2, 4))];
/**
* Function to convert an SWU symbol character to a code point on plane 4
* @function convert.swu2code
* @param {string} swuSym - SWU symbol character
* @returns {number} Code point on plane 4
* @example
* convert.swu2code('ņ')
*
* return 0x40001
*/
const swu2code$1 = swuSym => parseInt(swuSym.codePointAt(0));
const parse$1 = {
/**
* Function to parse an swu symbol with optional coordinate and style string
* @function swu.parse.symbol
* @param {string} swuSym - an swu symbol
* @returns {object} elements of swu symbol
* @example
* swu.parse.symbol('ņðĪðĪ-C')
*
* return {
* 'symbol': 'ņ',
* 'coord': [500, 500],
* 'style': '-C'
* }
*/
symbol: swuSym => {
const regex = `^(${re$1.symbol})(${re$1.coord})?(${re$1$1.full})?`;
const symbol = typeof swuSym === 'string' ? swuSym.match(new RegExp(regex)) : undefined;
return {
'symbol': symbol ? symbol[1] : undefined,
'coord': symbol && symbol[2] ? swu2coord(symbol[2]) : undefined,
'style': symbol ? symbol[3] : undefined
};
},
/**
* Function to parse an swu sign with style string
* @function swu.parse.sign
* @param {string} swuSign - an swu sign
* @returns {object} elements of swu sign
* @example
* swu.parse.sign('ð ņņņĨņĐð ðĪðĪĐņĐðĢĩðĪņðĪðĢĪņĨðĪðĪņðĢŪðĢ-C')
*
* return {
* sequence: ['ņ','ņ','ņĨ','ņĐ''],
* box: 'ð ',
* max: [525, 535],
* spatials: [
* {
* symbol: 'ņĐ',
* coord: [483, 510]
* },
* {
* symbol: 'ņ',
* coord: [501, 466]
* },
* {
* symbol: 'ņĨ',
* coord: [510, 500]
* },
* {
* symbol: 'ņ',
* coord: [476, 475]
* }
* ],
* style: '-C'
* }
*/
sign: swuSign => {
const regex = `^(${re$1.prefix})?(${re$1.signbox})(${re$1$1.full})?`;
const sign = typeof swuSign === 'string' ? swuSign.match(new RegExp(regex)) : undefined;
if (sign) {
return {
'sequence': sign[1] ? sign[1].slice(2).match(/.{2}/g) : undefined,
'box': sign[2].slice(0, 2),
'max': swu2coord(sign[2].slice(2, 6)),
'spatials': sign[2].length < 7 ? undefined : sign[2].slice(6).match(/(.{6})/g).map(m => {
return {
symbol: m.slice(0, 2),
coord: swu2coord(m.slice(2))
};
}),
'style': sign[3]
};
} else {
return {};
}
}
};
/**
* Array of plane 4 code points for categories of symbols: hand, movement, dynamics, head, trunk & limb, location, and punctuation.
* @alias swu.category
* @type {array}
*/
const category = [0x40001, 0x461e1, 0x4bca1, 0x4bfa1, 0x4e8e1, 0x4efa1, 0x4f2a1];
/**
* Object of symbol ranges with starting and ending code points on plane 4.
*
* { all, writing, hand, movement, dynamic, head, hcenter, vcenter, trunk, limb, location, punctuation }
* @alias swu.ranges
* @type {object}
*/
const ranges = {
'all': [0x40001, 0x4f480],
'writing': [0x40001, 0x4efa0],
'hand': [0x40001, 0x461e0],
'movement': [0x461e1, 0x4bca0],
'dynamic': [0x4bca1, 0x4bfa0],
'head': [0x4bfa1, 0x4e8e0],
'hcenter': [0x4bfa1, 0x4e8e0],
'vcenter': [0x4bfa1, 0x4ec40],
'trunk': [0x4e8e1, 0x4ec40],
'limb': [0x4ec41, 0x4efa0],
'location': [0x4efa1, 0x4f2a0],
'punctuation': [0x4f2a1, 0x4f480]
};
/**
* Array of colors associated with the seven symbol categories.
* @alias swu.colors
* @type {array}
*/
const colors = ['#0000CC', '#CC0000', '#FF0099', '#006600', '#000000', '#884411', '#FF9900'];
/**
* Function that returns the standardized color for a symbol.
* @function swu.colorize
* @param {string} swuSym - an SWU symbol character
* @returns {string} name of standardized color for symbol
* @example
* swu.colorize('ņ')
*
* return '#0000CC'
*/
const colorize = swuSym => {
const parsed = parse$1.symbol(swuSym);
let color = '#000000';
if (parsed.symbol) {
const code = swu2code$1(parsed.symbol);
const index = category.findIndex(val => val > code);
color = colors[index < 0 ? 6 : index - 1];
}
return color;
};
/* support ongoing development on https://patreon.com/signwriting */
/**
* Function that creates an SVG image from an SWU symbol character with an optional style string
* @function swu.symbolSvg
* @param {string} swuSym - an SWU symbol character with optional style string
* @example
* swu.symbolSvg('ņ-CP10G_green_Z2')
*
* return `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="70" height="100" viewBox="490 490 35 50">
* <text font-size="0">ņ-CP10G_green_Z2</text>
* <rect x="490" y="490" width="35" height="50" style="fill:green;" />
* <g transform="translate(500,500)">
* <text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;">ô</text>
* <text class="sym-line" fill="#0000CC" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;">ó°</text>
* </g>
* </svg>`
*/
const symbolSvg = swuSym => {
const parsed = parse$1.symbol(swuSym);
const blank = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1" height="1"></svg>';
if (parsed.symbol) {
let size = symbolSize$1(parsed.symbol);
if (size) {
let styling = parse(parsed.style);
let line;
let symSvg = symbolText$1(parsed.symbol);
symSvg = ` <g transform="translate(500,500)">
${symSvg}
</g>`;
if (styling.colorize) {
line = colorize(parsed.symbol);
} else if (styling.detail) {
line = styling.detail[0];
}
if (line) {
symSvg = symSvg.replace(/class="sym-line" fill="black"/, `class="sym-line" fill="${line}"`);
}
let fill = styling.detail && styling.detail[1];
if (fill) {
symSvg = symSvg.replace(/class="sym-fill" fill="white"/, `class="sym-fill" fill="${fill}"`);
}
let x1 = 500;
let y1 = 500;
let background = '';
if (styling.padding) {
x1 -= styling.padding;
y1 -= styling.padding;
size[0] += styling.padding * 2;
size[1] += styling.padding * 2;
}
if (styling.background) {
background = `\n <rect x="${x1}" y="${y1}" width="${size[0]}" height="${size[1]}" style="fill:${styling.background};" />`;
}
let sizing = '';
if (styling.zoom != 'x') {
sizing = ` width="${size[0] * (styling.zoom ? styling.zoom : 1)}" height="${size[1] * (styling.zoom ? styling.zoom : 1)}"`;
}
let classes = '';
if (styling.classes) {
classes = ` class="${styling.classes}"`;
}
let id = '';
if (styling.id) {
id = ` id="${styling.id}"`;
}
return `<svg${classes}${id} version="1.1" xmlns="http://www.w3.org/2000/svg"${sizing} viewBox="${x1} ${y1} ${size[0]} ${size[1]}">
<text font-size="0">${swuSym}</text>${background}
${symSvg}
</svg>`;
}
}
return blank;
};
const symbolCanvas = function (swuSym) {
const parsed = parse$1.symbol(swuSym);
if (parsed.symbol) {
let size = symbolSize$1(parsed.symbol);
if (size) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
let styling = parse(parsed.style);
let line = 'black';
if (styling.colorize) {
line = colorize(parsed.symbol);
} else if (styling.detail) {
line = styling.detail[0];
}
let fill = styling.detail && styling.detail[1] || 'white';
let x1 = 500;
let x2 = x1 + size[0];
let y1 = 500;
let y2 = y1 + size[1];
if (styling.padding) {
x1 -= styling.padding;
y1 -= styling.padding;
x2 += styling.padding;
y2 += styling.padding;
}
let sizing = 1;
if (styling.zoom != 'x') {
sizing = styling.zoom;
}
let w = (x2 - x1) * sizing;
let h = (y2 - y1) * sizing;
canvas.width = w ? w : 1;
canvas.height = h ? h : 1;
if (styling.background) {
context.rect(0, 0, w, h);
context.fillStyle = styling.background;
context.fill();
}
context.font = 30 * sizing + "px 'SuttonSignWritingFill'";
context.fillStyle = fill;
context.fillText(symbolFill$1(parsed.symbol), (500 - x1) * sizing, (500 - y1) * sizing);
context.font = 30 * sizing + "px 'SuttonSignWritingLine'";
context.fillStyle = line;
context.fillText(symbolLine$1(parsed.symbol), (500 - x1) * sizing, (500 - y1) * sizing);
return canvas;
}
}
};
/**
* Function that creates a binary PNG image from an SWU symbol character with an optional stle string
* @function swu.symbolPng
* @param {string} swuSym - an SWU symbol character with optional style string
* @example
* swu.symbolPng('ņ-CP10G_green_Z2')
*
* return 'data:image/png;base64,iVBORw...'
*/
const symbolPng = swuSym => {
const canvas = symbolCanvas(swuSym);
const png = canvas.toDataURL("image/png");
canvas.remove();
return png;
};
const blank = null;
/**
* Function that normalizes a symbol with a minimum coordinate for a center of 500,500
* @function swu.symbolNormalize
* @param {string} swuSym - an SWU symbol character with optional coordinate and style string
* @example
* swu.symbolNormalize('ņ')
*
* return 'ņðĢŋðĢ·'
*/
const symbolNormalize = swuSym => {
const parsed = parse$1.symbol(swuSym);
if (parsed.symbol) {
let size = symbolSize$1(parsed.symbol);
if (size) {
return `${parsed.symbol}${coord2swu([500 - parseInt(size[0] / 2), 500 - parseInt(size[1] / 2)])}${parsed.style || ''}`;
}
} else {
return blank;
}
};
/**
* Function that creates an SVG image from an SWU sign with an optional style string
* @function swu.signSvg
* @param {string} swuSign - an SWU sign with optional style string
* @example
* swu.signSvg('ð ņņņĨņĐð ðĪðĪĐņĐðĢĩðĪņðĪðĢĪņĨðĪðĪņðĢŪðĢ-P10G_green_D_yellow,ff0ff0_Z2')
*
* return `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="138" height="178" viewBox="466 456 69 89">
* <text font-size="0">ð ņņņĨņĐð ðĪðĪĐņĐðĢĩðĪņðĪðĢĪņĨðĪðĪņðĢŪðĢ-P10G_green_D_yellow,ff0ff0_Z2</text>
* <rect x="466" y="456" width="69" height="89" style="fill:green;" />
* <g transform="translate(483,510)">
* <text class="sym-fill" fill="#ff0ff0" style="pointer-events:none;font-family:\'SuttonSignWritingFill\';font-size:30px;">ôĐ</text>
* <text class="sym-line" fill="yellow" style="pointer-events:none;font-family:\'SuttonSignWritingLine\';font-size:30px;">óŧĐ</text>
* </g>
* <g transform="translate(501,466)">
* <text class="sym-fill" fill="#ff0ff0" style="pointer-events:none;font-family:\'SuttonSignWritingFill\';font-size:30px;">ô</text>
* <text class="sym-line" fill="yellow" style="pointer-events:none;font-family:\'SuttonSignWritingLine\';font-size:30px;">ó°</text>
* </g>
* <g transform="translate(510,500)">
* <text class="sym-fill" fill="#ff0ff0" style="pointer-events:none;font-family:\'SuttonSignWritingFill\';font-size:30px;">ôĨ</text>
* <text class="sym-line" fill="yellow" style="pointer-events:none;font-family:\'SuttonSignWritingLine\';font-size:30px;">óŧĨ</text>
* </g>
* <g transform="translate(476,475)">
* <text class="sym-fill" fill="#ff0ff0" style="pointer-events:none;font-family:\'SuttonSignWritingFill\';font-size:30px;">ô</text>
* <text class="sym-line" fill="yellow" style="pointer-events:none;font-family:\'SuttonSignWritingLine\';font-size:30px;">ó°</text>
* </g>
* </svg>`
*/
const signSvg = swuSign => {
let parsed = parse$1.sign(swuSign);
const blank = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1" height="1"></svg>';
if (parsed.spatials) {
let styling = parse(parsed.style);
if (styling.detailsym) {
styling.detailsym.forEach(sym => {
if (parsed.spatials[sym.index - 1]) {
parsed.spatials[sym.index - 1].detail = sym.detail;
}
});
}
let x1 = Math.min(...parsed.spatials.map(spatial => spatial.coord[0]));
let y1 = Math.min(...parsed.spatials.map(spatial => spatial.coord[1]));
let x2 = parsed.max[0];
let y2 = parsed.max[1];
if (styling.zoomsym) {
styling.zoomsym.forEach(sym => {
if (parsed.spatials[sym.index - 1]) {
parsed.spatials[sym.index - 1].zoom = sym.zoom;
if (sym.offset) {
parsed.spatials[sym.index - 1].coord[0] += sym.offset[0];
parsed.spatials[sym.index - 1].coord[1] += sym.offset[1];
}
let size = symbolSize$1(parsed.spatials[sym.index - 1].symbol);
x2 = Math.max(x2, parsed.spatials[sym.index - 1].coord[0] + size[0] * sym.zoom);
y2 = Math.max(y2, parsed.spatials[sym.index - 1].coord[1] + size[1] * sym.zoom);
}
});
}
let classes = '';
if (styling.classes) {
classes = ` class="${styling.classes}"`;
}
let id = '';
if (styling.id) {
id = ` id="${styling.id}"`;
}
let background = '';
if (styling.padding) {
x1 -= styling.padding;
y1 -= styling.padding;
x2 += styling.padding;
y2 += styling.padding;
}
if (styling.background) {
background = `\n <rect x="${x1}" y="${y1}" width="${x2 - x1}" height="${y2 - y1}" style="fill:${styling.background};" />`;
}
let sizing = '';
if (styling.zoom != 'x') {
sizing = ` width="${(x2 - x1) * (styling.zoom ? styling.zoom : 1)}" height="${(y2 - y1) * (styling.zoom ? styling.zoom : 1)}"`;
}
let svg = `<svg${classes}${id} version="1.1" xmlns="http://www.w3.org/2000/svg"${sizing} viewBox="${x1} ${y1} ${x2 - x1} ${y2 - y1}">
<text font-size="0">${swuSign}</text>${background}`;
const line = styling.detail && styling.detail[0];
const fill = styling.detail && styling.detail[1];
svg += '\n' + parsed.spatials.map(spatial => {
let svg = symbolText$1(spatial.symbol, spatial.coord);
let symLine = line;
if (spatial.detail) {
symLine = spatial.detail[0];
} else if (styling.colorize) {
symLine = colorize(spatial.symbol);
}
if (symLine) {
svg = svg.replace(/class="sym-line" fill="black"/, `class="sym-line" fill="${symLine}"`);
}
let symFill = fill;
if (spatial.detail && spatial.detail[1]) {
symFill = spatial.detail[1];
}
if (symFill) {
svg = svg.replace(/class="sym-fill" fill="white"/, `class="sym-fill" fill="${symFill}"`);
}
if (spatial.zoom) {
svg = `<g transform="scale(${spatial.zoom})">${svg}</g>`;
}
return ` <g transform="translate(${spatial.coord[0]},${spatial.coord[1]})">
${svg}
</g>`;
}).join('\n');
svg += '\n</svg>';
return svg;
}
return blank;
};
const signCanvas = function (swuSign) {
const parsed = parse$1.sign(swuSign);
if (parsed.spatials) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
let styling = parse(parsed.style);
if (styling.detailsym) {
styling.detailsym.forEach(sym => {
if (parsed.spatials[sym.index - 1]) {
parsed.spatials[sym.index - 1].detail = sym.detail;
}
});
}
let x1 = Math.min(...parsed.spatials.map(spatial => spatial.coord[0]));
let y1 = Math.min(...parsed.spatials.map(spatial => spatial.coord[1]));
let x2 = parsed.max[0];
let y2 = parsed.max[1];
if (styling.zoomsym) {
styling.zoomsym.forEach(sym => {
if (parsed.spatials[sym.index - 1]) {
parsed.spatials[sym.index - 1].zoom = sym.zoom;
if (sym.offset) {
parsed.spatials[sym.index - 1].coord[0] += sym.offset[0];
parsed.spatials[sym.index - 1].coord[1] += sym.offset[1];
}
let size = symbolSize$1(parsed.spatials[sym.index - 1].symbol);
x2 = Math.max(x2, parsed.spatials[sym.index - 1].coord[0] + size[0] * sym.zoom);
y2 = Math.max(y2, parsed.spatials[sym.index - 1].coord[1] + size[1] * sym.zoom);
}
});
}
if (styling.padding) {
x1 -= styling.padding;
y1 -= styling.padding;
x2 += styling.padding;
y2 += styling.padding;
}
let sizing = 1;
if (styling.zoom != 'x') {
sizing = styling.zoom;
}
let w = (x2 - x1) * sizing;
let h = (y2 - y1) * sizing;
canvas.width = w ? w : 1;
canvas.height = h ? h : 1;
if (styling.background) {
context.rect(0, 0, w, h);
context.fillStyle = styling.background;
context.fill();
}
const line = styling.detail && styling.detail[0] || "black";
const fill = styling.detail && styling.detail[1] || "white";
parsed.spatials.forEach(spatial => {
let symLine = line;
if (spatial.detail) {
symLine = spatial.detail[0];
} else if (styling.colorize) {
symLine = colorize(spatial.symbol);
}
let symFill = fill;
if (spatial.detail && spatial.detail[1]) {
symFill = spatial.detail[1];
}
let symZoom = spatial.zoom || 1;
context.font = 30 * sizing * symZoom + "px 'SuttonSignWritingFill'";
context.fillStyle = symFill;
context.fillText(symbolFill$1(spatial.symbol), (spatial.coord[0] - x1) * sizing, (spatial.coord[1] - y1) * sizing);
context.font = 30 * sizing * symZoom + "px 'SuttonSignWritingLine'";
context.fillStyle = symLine;
context.fillText(symbolLine$1(spatial.symbol), (spatial.coord[0] - x1) * sizing, (spatial.coord[1] - y1) * sizing);
});
return canvas;
}
};
/**
* Function that creates a binary PNG image from an SWU sign with an optional style string
* @function swu.signPng
* @param {string} swuSign - an SWU sign with optional style string
* @example
* swu.signPng('ð ņņņĨņĐð ðĪðĪĐņĐðĢĩðĪņðĪðĢĪņĨðĪðĪņðĢŪðĢ')
*
* return 'data:image/png;base64,iVBORw...'
*/
const signPng = swuSign => {
const canvas = signCanvas(swuSign);
const png = canvas.toDataURL("image/png");
canvas.remove();
return png;
};
/**
* Function that normalizes an SWU sign for a center of 500,500
* @function swu.signNormalize
* @param {string} swuSign - an SWU sign with optional style string
* @example
* swu.signNormalize('ð ņņņĨņĐð ðĪðĪĐņĐðĢĩðĪņðĪðĢĪņĨðĪðĪņðĢŪðĢ')
*
* return 'ð ņņņĨņĐð ðĪðĪĐņĐðĢĩðĪņðĪðĢĪņĨðĪðĪņðĢŪðĢ'
*/
const signNormalize = swuSign => {
const parsed = parse$1.sign(swuSign);
if (parsed.spatials) {
const symbolsizes = parsed.spatials.reduce((output, spatial) => {
const size = symbolSize$1(spatial.symbol);
output[spatial.symbol] = {
width: size[0],
height: size[1]
};
return output;
}, {});
const bbox = symbols => {
const x1 = Math.min(...symbols.map(spatial => spatial.coord[0]));
const y1 = Math.min(...symbols.map(spatial => spatial.coord[1]));
const x2 = Math.max(...symbols.map(spatial => spatial.coord[0] + parseInt(symbolsizes[spatial.symbol].width)));
const y2 = Math.max(...symbols.map(spatial => spatial.coord[1] + parseInt(symbolsizes[spatial.symbol].height)));
return {
x1: x1,
y1: y1,
x2: x2,
y2: y2
};
};
const hrange = ranges['hcenter'];
const hsyms = parsed.spatials.filter(spatial => {
const dec = parseInt(spatial.symbol.slice(1, 4), 16);
return hrange[0] <= dec && hrange[1] >= dec;
});
const vrange = ranges['vcenter'];
const vsyms = parsed.spatials.filter(spatial => {
const dec = parseInt(spatial.symbol.slice(1, 4), 16);
return vrange[0] <= dec && vrange[1] >= dec;
});
let abox = bbox(parsed.spatials);
let max = [abox.x2, abox.y2];
if (hsyms.length) {
const hbox = bbox(hsyms);
abox.x1 = hbox.x1;
abox.x2 = hbox.x2;
}
if (vsyms.length) {
const vbox = bbox(vsyms);
abox.y1 = vbox.y1;
abox.y2 = vbox.y2;
}
const offset = [parseInt((abox.x2 + abox.x1) / 2) - 500, parseInt((abox.y2 + abox.y1) / 2) - 500];
const swuout = (parsed.sequence ? 'ð ' + parsed.sequence.join('') : '') + parsed.box + coord2swu([max[0] - offset[0], max[1] - offset[1]]) + parsed.spatials.map(spatial => spatial.symbol + coord2swu([spatial.coord[0] - offset[0], spatial.coord[1] - offset[1]])).join('') + (parsed.style || '');
return swuout;
}
};
export { signNormalize, signPng, signSvg, symbolFill$1 as symbolFill, symbolLine$1 as symbolLine, symbolNormalize, symbolPng, symbolSize$1 as symbolSize, symbolSvg, symbolText$1 as symbolText };
/* support ongoing development on https://patreon.com/signwriting */