@metamask-previews/design-system-react-native 0.0.0-preview.1701705 → 0.0.0-preview.232346e
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -0
- package/dist/components/AvatarBase/AvatarBase.js +1 -1
- package/dist/components/AvatarBase/AvatarBase.js.map +1 -1
- package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.ts.map +1 -1
- package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.js +13 -10
- package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.js.map +1 -1
- package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.js +5 -5
- package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.js.map +1 -1
- package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.js +6 -6
- package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.d.ts +17 -0
- package/dist/components/Checkbox/Checkbox.d.ts.map +1 -0
- package/dist/components/Checkbox/Checkbox.js +122 -0
- package/dist/components/Checkbox/Checkbox.js.map +1 -0
- package/dist/components/Checkbox/Checkbox.types.d.ts +57 -0
- package/dist/components/Checkbox/Checkbox.types.d.ts.map +1 -0
- package/dist/components/Checkbox/Checkbox.types.js +3 -0
- package/dist/components/Checkbox/Checkbox.types.js.map +1 -0
- package/dist/components/Checkbox/index.d.ts +3 -0
- package/dist/components/Checkbox/index.d.ts.map +1 -0
- package/dist/components/Checkbox/index.js +6 -0
- package/dist/components/Checkbox/index.js.map +1 -0
- package/dist/components/TextButton/TextButton.js +1 -1
- package/dist/components/TextButton/TextButton.js.map +1 -1
- package/dist/components/index.d.ts +3 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +5 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/temp-components/Blockies/Blockies.utilities.d.ts +24 -0
- package/dist/components/temp-components/Blockies/Blockies.utilities.d.ts.map +1 -0
- package/dist/components/temp-components/Blockies/Blockies.utilities.js +428 -426
- package/dist/components/temp-components/Blockies/Blockies.utilities.js.map +1 -0
- package/dist/types/index.d.ts +8 -8
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/index.js +8 -8
- package/dist/types/index.js.map +1 -1
- package/package.json +12 -7
|
@@ -1,490 +1,492 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
function write(buffer, offs) {
|
|
27
|
-
for (let i = 2; i < arguments.length; i++) {
|
|
28
|
-
for (let j = 0; j < arguments[i].length; j++) {
|
|
29
|
-
buffer[offs++] = arguments[i].charAt(j);
|
|
30
|
-
}
|
|
1
|
+
"use strict";
|
|
2
|
+
/**
|
|
3
|
+
* A handy class to calculate color values and generate PNG images.
|
|
4
|
+
*
|
|
5
|
+
* @version 1.0.0
|
|
6
|
+
* @author Robert Eisele <robert@xarg.org>
|
|
7
|
+
* @copyright Copyright (c) 2010, Robert Eisele
|
|
8
|
+
* @see {@link http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/}
|
|
9
|
+
* @license BSD-3-Clause
|
|
10
|
+
*/
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
exports.toDataUrl = exports.Blockies = void 0;
|
|
13
|
+
/**
|
|
14
|
+
* Writes string arguments to a buffer starting at the specified offset.
|
|
15
|
+
*
|
|
16
|
+
* @param buffer - The buffer to write to
|
|
17
|
+
* @param offs - The offset to start writing at
|
|
18
|
+
* @param args - The string arguments to write
|
|
19
|
+
*/
|
|
20
|
+
function write(buffer, offs, ...args) {
|
|
21
|
+
for (const arg of args) {
|
|
22
|
+
for (let j = 0; j < arg.length; j += 1) {
|
|
23
|
+
// eslint-disable-next-line no-plusplus
|
|
24
|
+
buffer[offs++] = arg.charAt(j);
|
|
25
|
+
}
|
|
31
26
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Converts a 16-bit number to a 2-byte string.
|
|
30
|
+
*
|
|
31
|
+
* @param w - The number to convert
|
|
32
|
+
* @returns A 2-byte string representation
|
|
33
|
+
*/
|
|
34
|
+
function byte2(w) {
|
|
35
|
+
// eslint-disable-next-line no-bitwise
|
|
39
36
|
return String.fromCharCode((w >> 8) & 255, w & 255);
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Converts a 32-bit number to a 4-byte string.
|
|
40
|
+
*
|
|
41
|
+
* @param w - The number to convert
|
|
42
|
+
* @returns A 4-byte string representation
|
|
43
|
+
*/
|
|
44
|
+
function byte4(w) {
|
|
47
45
|
return String.fromCharCode(
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
46
|
+
// eslint-disable-next-line no-bitwise
|
|
47
|
+
(w >> 24) & 255,
|
|
48
|
+
// eslint-disable-next-line no-bitwise
|
|
49
|
+
(w >> 16) & 255,
|
|
50
|
+
// eslint-disable-next-line no-bitwise
|
|
51
|
+
(w >> 8) & 255,
|
|
52
|
+
// eslint-disable-next-line no-bitwise
|
|
53
|
+
w & 255);
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Converts a 16-bit number to a 2-byte string in little-endian format.
|
|
57
|
+
*
|
|
58
|
+
* @param w - The number to convert
|
|
59
|
+
* @returns A 2-byte string representation in little-endian format
|
|
60
|
+
*/
|
|
61
|
+
function byte2lsb(w) {
|
|
62
|
+
// eslint-disable-next-line no-bitwise
|
|
60
63
|
return String.fromCharCode(w & 255, (w >> 8) & 255);
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
// initialize buffer with zero bytes
|
|
95
|
-
for (var i = 0; i < this.buffer_size; i++) {
|
|
96
|
-
this.buffer[i] = '\x00';
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
// initialize non-zero elements
|
|
100
|
-
write(
|
|
101
|
-
this.buffer,
|
|
102
|
-
this.ihdr_offs,
|
|
103
|
-
byte4(this.ihdr_size - 12),
|
|
104
|
-
'IHDR',
|
|
105
|
-
byte4(width),
|
|
106
|
-
byte4(height),
|
|
107
|
-
'\x08\x03',
|
|
108
|
-
);
|
|
109
|
-
write(this.buffer, this.plte_offs, byte4(this.plte_size - 12), 'PLTE');
|
|
110
|
-
write(this.buffer, this.trns_offs, byte4(this.trns_size - 12), 'tRNS');
|
|
111
|
-
write(this.buffer, this.idat_offs, byte4(this.idat_size - 12), 'IDAT');
|
|
112
|
-
write(this.buffer, this.iend_offs, byte4(this.iend_size - 12), 'IEND');
|
|
113
|
-
|
|
114
|
-
// initialize deflate header
|
|
115
|
-
let header = ((8 + (7 << 4)) << 8) | (3 << 6);
|
|
116
|
-
header += 31 - (header % 31);
|
|
117
|
-
|
|
118
|
-
write(this.buffer, this.idat_offs + 8, byte2(header));
|
|
119
|
-
|
|
120
|
-
// initialize deflate block headers
|
|
121
|
-
for (var i = 0; (i << 16) - 1 < this.pix_size; i++) {
|
|
122
|
-
var size, bits;
|
|
123
|
-
if (i + 0xffff < this.pix_size) {
|
|
124
|
-
size = 0xffff;
|
|
125
|
-
bits = '\x00';
|
|
126
|
-
} else {
|
|
127
|
-
size = this.pix_size - (i << 16) - i;
|
|
128
|
-
bits = '\x01';
|
|
129
|
-
}
|
|
130
|
-
write(
|
|
131
|
-
this.buffer,
|
|
132
|
-
this.idat_offs + 8 + 2 + (i << 16) + (i << 2),
|
|
133
|
-
bits,
|
|
134
|
-
byte2lsb(size),
|
|
135
|
-
byte2lsb(~size),
|
|
136
|
-
);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
/* Create crc32 lookup table */
|
|
140
|
-
for (var i = 0; i < 256; i++) {
|
|
141
|
-
let c = i;
|
|
142
|
-
for (let j = 0; j < 8; j++) {
|
|
143
|
-
if (c & 1) {
|
|
144
|
-
c = -306674912 ^ ((c >> 1) & 0x7fffffff);
|
|
145
|
-
} else {
|
|
146
|
-
c = (c >> 1) & 0x7fffffff;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
_crc32[i] = c;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
// compute the index into a png for a given pixel
|
|
153
|
-
this.index = function (x, y) {
|
|
154
|
-
const i = y * (this.width + 1) + x + 1;
|
|
155
|
-
const j = this.idat_offs + 8 + 2 + 5 * Math.floor(i / 0xffff + 1) + i;
|
|
156
|
-
return j;
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
// convert a color and build up the palette
|
|
160
|
-
this.color = function (red, green, blue, alpha) {
|
|
161
|
-
alpha = alpha >= 0 ? alpha : 255;
|
|
162
|
-
const color = (((((alpha << 8) | red) << 8) | green) << 8) | blue;
|
|
163
|
-
|
|
164
|
-
if (typeof this.palette[color] === 'undefined') {
|
|
165
|
-
if (this.pindex == this.depth) {
|
|
166
|
-
return '\x00';
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* PNG class for generating PNG images
|
|
67
|
+
*/
|
|
68
|
+
class PNG {
|
|
69
|
+
constructor(width, height, depth) {
|
|
70
|
+
this.width = width;
|
|
71
|
+
this.height = height;
|
|
72
|
+
this.depth = depth;
|
|
73
|
+
// pixel data and row filter identifier size
|
|
74
|
+
this.pix_size = height * (width + 1);
|
|
75
|
+
// deflate header, pix_size, block headers, adler32 checksum
|
|
76
|
+
this.data_size =
|
|
77
|
+
2 + this.pix_size + 5 * Math.floor((0xfffe + this.pix_size) / 0xffff) + 4;
|
|
78
|
+
// offsets and sizes of Png chunks
|
|
79
|
+
this.ihdr_offs = 0; // IHDR offset and size
|
|
80
|
+
this.ihdr_size = 4 + 4 + 13 + 4;
|
|
81
|
+
this.plte_offs = this.ihdr_offs + this.ihdr_size; // PLTE offset and size
|
|
82
|
+
this.plte_size = 4 + 4 + 3 * depth + 4;
|
|
83
|
+
this.trns_offs = this.plte_offs + this.plte_size; // tRNS offset and size
|
|
84
|
+
this.trns_size = 4 + 4 + depth + 4;
|
|
85
|
+
this.idat_offs = this.trns_offs + this.trns_size; // IDAT offset and size
|
|
86
|
+
this.idat_size = 4 + 4 + this.data_size + 4;
|
|
87
|
+
this.iend_offs = this.idat_offs + this.idat_size; // IEND offset and size
|
|
88
|
+
this.iend_size = 4 + 4 + 4;
|
|
89
|
+
this.buffer_size = this.iend_offs + this.iend_size; // total PNG size
|
|
90
|
+
this.buffer = new Array(this.buffer_size);
|
|
91
|
+
this.palette = {};
|
|
92
|
+
this.pindex = 0;
|
|
93
|
+
this._crc32 = new Array(256);
|
|
94
|
+
// initialize buffer with zero bytes
|
|
95
|
+
for (let i = 0; i < this.buffer_size; i += 1) {
|
|
96
|
+
this.buffer[i] = '\x00';
|
|
167
97
|
}
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
this.buffer
|
|
172
|
-
this.buffer
|
|
173
|
-
this.buffer
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
c3 = s.charCodeAt(i + 2);
|
|
199
|
-
if (l < i + 2) {
|
|
200
|
-
e3 = 64;
|
|
201
|
-
} else {
|
|
202
|
-
e3 = ((c2 & 0xf) << 2) | (c3 >> 6);
|
|
98
|
+
// initialize non-zero elements
|
|
99
|
+
write(this.buffer, this.ihdr_offs, byte4(this.ihdr_size - 12), 'IHDR', byte4(width), byte4(height), '\x08\x03');
|
|
100
|
+
write(this.buffer, this.plte_offs, byte4(this.plte_size - 12), 'PLTE');
|
|
101
|
+
write(this.buffer, this.trns_offs, byte4(this.trns_size - 12), 'tRNS');
|
|
102
|
+
write(this.buffer, this.idat_offs, byte4(this.idat_size - 12), 'IDAT');
|
|
103
|
+
write(this.buffer, this.iend_offs, byte4(this.iend_size - 12), 'IEND');
|
|
104
|
+
// initialize deflate header
|
|
105
|
+
// eslint-disable-next-line no-bitwise
|
|
106
|
+
let header = ((8 + (7 << 4)) << 8) | (3 << 6);
|
|
107
|
+
header += 31 - (header % 31);
|
|
108
|
+
write(this.buffer, this.idat_offs + 8, byte2(header));
|
|
109
|
+
// initialize deflate block headers
|
|
110
|
+
// eslint-disable-next-line no-bitwise
|
|
111
|
+
for (let i = 0; (i << 16) - 1 < this.pix_size; i += 1) {
|
|
112
|
+
let size;
|
|
113
|
+
let bits;
|
|
114
|
+
if (i + 0xffff < this.pix_size) {
|
|
115
|
+
size = 0xffff;
|
|
116
|
+
bits = '\x00';
|
|
117
|
+
}
|
|
118
|
+
else {
|
|
119
|
+
// eslint-disable-next-line no-bitwise
|
|
120
|
+
size = this.pix_size - (i << 16) - i;
|
|
121
|
+
bits = '\x01';
|
|
122
|
+
}
|
|
123
|
+
write(this.buffer,
|
|
124
|
+
// eslint-disable-next-line no-bitwise
|
|
125
|
+
this.idat_offs + 8 + 2 + (i << 16) + (i << 2), bits, byte2lsb(size),
|
|
126
|
+
// eslint-disable-next-line no-bitwise
|
|
127
|
+
byte2lsb(~size));
|
|
203
128
|
}
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
129
|
+
/* Create crc32 lookup table */
|
|
130
|
+
for (let i = 0; i < 256; i += 1) {
|
|
131
|
+
let c = i;
|
|
132
|
+
for (let j = 0; j < 8; j += 1) {
|
|
133
|
+
// eslint-disable-next-line no-bitwise
|
|
134
|
+
if (c & 1) {
|
|
135
|
+
// eslint-disable-next-line no-bitwise
|
|
136
|
+
c = -306674912 ^ ((c >> 1) & 0x7fffffff);
|
|
137
|
+
}
|
|
138
|
+
else {
|
|
139
|
+
// eslint-disable-next-line no-bitwise
|
|
140
|
+
c = (c >> 1) & 0x7fffffff;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
this._crc32[i] = c;
|
|
208
144
|
}
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
145
|
+
}
|
|
146
|
+
/**
|
|
147
|
+
* Computes the index into a png for a given pixel.
|
|
148
|
+
*
|
|
149
|
+
* @param x - The x coordinate
|
|
150
|
+
* @param y - The y coordinate
|
|
151
|
+
* @returns The buffer index for the pixel
|
|
152
|
+
*/
|
|
153
|
+
index(x, y) {
|
|
154
|
+
const i = y * (this.width + 1) + x + 1;
|
|
155
|
+
const j = this.idat_offs + 8 + 2 + 5 * Math.floor(i / 0xffff + 1) + i;
|
|
156
|
+
return j;
|
|
157
|
+
}
|
|
158
|
+
/**
|
|
159
|
+
* Converts a color and builds up the palette.
|
|
160
|
+
*
|
|
161
|
+
* @param red - Red component (0-255)
|
|
162
|
+
* @param green - Green component (0-255)
|
|
163
|
+
* @param blue - Blue component (0-255)
|
|
164
|
+
* @param alpha - Alpha component (0-255)
|
|
165
|
+
* @returns The palette color string
|
|
166
|
+
*/
|
|
167
|
+
color(red, green, blue, alpha = 255) {
|
|
168
|
+
// eslint-disable-next-line no-bitwise
|
|
169
|
+
const color = (((((alpha << 8) | red) << 8) | green) << 8) | blue;
|
|
170
|
+
if (typeof this.palette[color] === 'undefined') {
|
|
171
|
+
if (this.pindex === this.depth) {
|
|
172
|
+
return '\x00';
|
|
173
|
+
}
|
|
174
|
+
const ndx = this.plte_offs + 8 + 3 * this.pindex;
|
|
175
|
+
this.buffer[ndx + 0] = String.fromCharCode(red);
|
|
176
|
+
this.buffer[ndx + 1] = String.fromCharCode(green);
|
|
177
|
+
this.buffer[ndx + 2] = String.fromCharCode(blue);
|
|
178
|
+
this.buffer[this.trns_offs + 8 + this.pindex] =
|
|
179
|
+
String.fromCharCode(alpha);
|
|
180
|
+
// eslint-disable-next-line no-plusplus
|
|
181
|
+
this.palette[color] = String.fromCharCode(this.pindex++);
|
|
232
182
|
}
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
183
|
+
return this.palette[color];
|
|
184
|
+
}
|
|
185
|
+
/**
|
|
186
|
+
* Outputs a PNG string, Base64 encoded.
|
|
187
|
+
*
|
|
188
|
+
* @returns A Base64 encoded PNG string
|
|
189
|
+
*/
|
|
190
|
+
getBase64() {
|
|
191
|
+
const s = this.getDump();
|
|
192
|
+
const ch = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
|
|
193
|
+
let c1;
|
|
194
|
+
let c2;
|
|
195
|
+
let c3;
|
|
196
|
+
let e1;
|
|
197
|
+
let e2;
|
|
198
|
+
let e3;
|
|
199
|
+
let e4;
|
|
200
|
+
const l = s.length;
|
|
201
|
+
let i = 0;
|
|
202
|
+
let r = '';
|
|
203
|
+
do {
|
|
204
|
+
c1 = s.charCodeAt(i);
|
|
205
|
+
// eslint-disable-next-line no-bitwise
|
|
206
|
+
e1 = c1 >> 2;
|
|
207
|
+
c2 = s.charCodeAt(i + 1);
|
|
208
|
+
// eslint-disable-next-line no-bitwise
|
|
209
|
+
e2 = ((c1 & 3) << 4) | (c2 >> 4);
|
|
210
|
+
c3 = s.charCodeAt(i + 2);
|
|
211
|
+
if (l < i + 2) {
|
|
212
|
+
e3 = 64;
|
|
213
|
+
}
|
|
214
|
+
else {
|
|
215
|
+
// eslint-disable-next-line no-bitwise
|
|
216
|
+
e3 = ((c2 & 0xf) << 2) | (c3 >> 6);
|
|
217
|
+
}
|
|
218
|
+
if (l < i + 3) {
|
|
219
|
+
e4 = 64;
|
|
220
|
+
}
|
|
221
|
+
else {
|
|
222
|
+
// eslint-disable-next-line no-bitwise
|
|
223
|
+
e4 = c3 & 0x3f;
|
|
224
|
+
}
|
|
225
|
+
r += ch.charAt(e1) + ch.charAt(e2) + ch.charAt(e3) + ch.charAt(e4);
|
|
226
|
+
i += 3;
|
|
227
|
+
} while (i < l);
|
|
228
|
+
return r;
|
|
229
|
+
}
|
|
230
|
+
/**
|
|
231
|
+
* Outputs a PNG string.
|
|
232
|
+
*
|
|
233
|
+
* @returns A PNG string
|
|
234
|
+
*/
|
|
235
|
+
getDump() {
|
|
236
|
+
// compute adler32 of output pixels + row filter bytes
|
|
237
|
+
const BASE = 65521; /* largest prime smaller than 65536 */
|
|
238
|
+
const NMAX = 5552; /* NMAX is the largest n such that 255n(n+1)/2 + (n+1)(BASE-1) <= 2^32-1 */
|
|
239
|
+
let s1 = 1;
|
|
240
|
+
let s2 = 0;
|
|
241
|
+
let n = NMAX;
|
|
242
|
+
for (let y = 0; y < this.height; y += 1) {
|
|
243
|
+
for (let x = -1; x < this.width; x += 1) {
|
|
244
|
+
s1 += this.buffer[this.index(x, y)].charCodeAt(0);
|
|
245
|
+
s2 += s1;
|
|
246
|
+
n -= 1;
|
|
247
|
+
if (n === 0) {
|
|
248
|
+
s1 %= BASE;
|
|
249
|
+
s2 %= BASE;
|
|
250
|
+
n = NMAX;
|
|
251
|
+
}
|
|
252
|
+
}
|
|
255
253
|
}
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
254
|
+
s1 %= BASE;
|
|
255
|
+
s2 %= BASE;
|
|
256
|
+
write(this.buffer, this.idat_offs + this.idat_size - 8,
|
|
257
|
+
// eslint-disable-next-line no-bitwise
|
|
258
|
+
byte4((s2 << 16) | s1));
|
|
259
|
+
// compute crc32 of the PNG chunks
|
|
260
|
+
const crc32 = (png, offs, size) => {
|
|
261
|
+
let crc = -1;
|
|
262
|
+
for (let i = 4; i < size - 4; i += 1) {
|
|
263
|
+
crc =
|
|
264
|
+
// eslint-disable-next-line no-bitwise
|
|
265
|
+
this._crc32[(crc ^ png[offs + i].charCodeAt(0)) & 0xff] ^
|
|
266
|
+
// eslint-disable-next-line no-bitwise
|
|
267
|
+
((crc >> 8) & 0x00ffffff);
|
|
268
|
+
}
|
|
269
|
+
// eslint-disable-next-line no-bitwise
|
|
270
|
+
write(png, offs + size - 4, byte4(crc ^ -1));
|
|
271
|
+
};
|
|
272
|
+
crc32(this.buffer, this.ihdr_offs, this.ihdr_size);
|
|
273
|
+
crc32(this.buffer, this.plte_offs, this.plte_size);
|
|
274
|
+
crc32(this.buffer, this.trns_offs, this.trns_size);
|
|
275
|
+
crc32(this.buffer, this.idat_offs, this.idat_size);
|
|
276
|
+
crc32(this.buffer, this.iend_offs, this.iend_size);
|
|
277
|
+
// convert PNG to string
|
|
278
|
+
return `\x89PNG\r\n\x1A\n${this.buffer.join('')}`;
|
|
279
|
+
}
|
|
280
|
+
/**
|
|
281
|
+
* Fills a rectangle with the specified color.
|
|
282
|
+
*
|
|
283
|
+
* @param x - The x coordinate
|
|
284
|
+
* @param y - The y coordinate
|
|
285
|
+
* @param w - The width
|
|
286
|
+
* @param h - The height
|
|
287
|
+
* @param color - The color to fill with
|
|
288
|
+
*/
|
|
289
|
+
fillRect(x, y, w, h, color) {
|
|
290
|
+
for (let i = 0; i < w; i += 1) {
|
|
291
|
+
for (let j = 0; j < h; j += 1) {
|
|
292
|
+
this.buffer[this.index(x + i, y + j)] = color;
|
|
293
|
+
}
|
|
273
294
|
}
|
|
274
|
-
}
|
|
275
|
-
};
|
|
276
|
-
};
|
|
277
|
-
|
|
278
|
-
// https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
|
|
279
|
-
/**
|
|
280
|
-
* Converts an HSL color value to RGB. Conversion formula
|
|
281
|
-
* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
|
|
282
|
-
* Assumes h, s, and l are contained in the set [0, 1] and
|
|
283
|
-
* returns r, g, and b in the set [0, 255].
|
|
284
|
-
*
|
|
285
|
-
* @param {number} h - The hue
|
|
286
|
-
* @param {number} s - The saturation
|
|
287
|
-
* @param {number} l - The lightness
|
|
288
|
-
* @returns {Array} The RGB representation
|
|
289
|
-
*/
|
|
290
|
-
|
|
291
|
-
/**
|
|
292
|
-
*
|
|
293
|
-
* @param p
|
|
294
|
-
* @param q
|
|
295
|
-
* @param t
|
|
296
|
-
*/
|
|
297
|
-
function hue2rgb(p, q, t) {
|
|
298
|
-
if (t < 0) {
|
|
299
|
-
t += 1;
|
|
300
295
|
}
|
|
301
|
-
|
|
302
|
-
|
|
296
|
+
}
|
|
297
|
+
/**
|
|
298
|
+
* Converts HSL color to RGB helper function.
|
|
299
|
+
*
|
|
300
|
+
* @param p - First parameter
|
|
301
|
+
* @param q - Second parameter
|
|
302
|
+
* @param t - Third parameter
|
|
303
|
+
* @returns RGB value component
|
|
304
|
+
*/
|
|
305
|
+
function hue2rgb(p, q, t) {
|
|
306
|
+
let tValue = t;
|
|
307
|
+
if (tValue < 0) {
|
|
308
|
+
tValue += 1;
|
|
303
309
|
}
|
|
304
|
-
if (
|
|
305
|
-
|
|
310
|
+
if (tValue > 1) {
|
|
311
|
+
tValue -= 1;
|
|
306
312
|
}
|
|
307
|
-
if (
|
|
308
|
-
|
|
313
|
+
if (tValue < 1 / 6) {
|
|
314
|
+
return p + (q - p) * 6 * tValue;
|
|
309
315
|
}
|
|
310
|
-
if (
|
|
311
|
-
|
|
316
|
+
if (tValue < 1 / 2) {
|
|
317
|
+
return q;
|
|
318
|
+
}
|
|
319
|
+
if (tValue < 2 / 3) {
|
|
320
|
+
return p + (q - p) * (2 / 3 - tValue) * 6;
|
|
312
321
|
}
|
|
313
322
|
return p;
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
323
|
+
}
|
|
324
|
+
/**
|
|
325
|
+
* Converts HSL color values to RGBA.
|
|
326
|
+
*
|
|
327
|
+
* @param h - Hue (0-1)
|
|
328
|
+
* @param s - Saturation (0-1)
|
|
329
|
+
* @param l - Lightness (0-1)
|
|
330
|
+
* @returns RGBA color array
|
|
331
|
+
*/
|
|
332
|
+
function hsl2rgb(h, s, l) {
|
|
333
|
+
let r;
|
|
334
|
+
let g;
|
|
335
|
+
let b;
|
|
336
|
+
if (s === 0) {
|
|
337
|
+
r = l;
|
|
338
|
+
g = l;
|
|
339
|
+
b = l; // achromatic
|
|
340
|
+
}
|
|
341
|
+
else {
|
|
342
|
+
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
343
|
+
const p = 2 * l - q;
|
|
344
|
+
r = hue2rgb(p, q, h + 1 / 3);
|
|
345
|
+
g = hue2rgb(p, q, h);
|
|
346
|
+
b = hue2rgb(p, q, h - 1 / 3);
|
|
333
347
|
}
|
|
334
|
-
|
|
335
348
|
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), 255];
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
randseed[i] = 0;
|
|
349
|
+
}
|
|
350
|
+
// Random number generation
|
|
351
|
+
const randseed = new Array(4); // Xorshift: [x, y, z, w] 32 bit values
|
|
352
|
+
/**
|
|
353
|
+
* Seeds the random number generator.
|
|
354
|
+
*
|
|
355
|
+
* @param seed - The seed string
|
|
356
|
+
*/
|
|
357
|
+
function seedrand(seed) {
|
|
358
|
+
for (let i = 0; i < randseed.length; i += 1) {
|
|
359
|
+
randseed[i] = 0;
|
|
348
360
|
}
|
|
349
|
-
for (
|
|
350
|
-
|
|
351
|
-
|
|
361
|
+
for (let i = 0; i < seed.length; i += 1) {
|
|
362
|
+
randseed[i % 4] =
|
|
363
|
+
// eslint-disable-next-line no-bitwise
|
|
364
|
+
(randseed[i % 4] << 5) - randseed[i % 4] + seed.charCodeAt(i);
|
|
352
365
|
}
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
366
|
+
}
|
|
367
|
+
/**
|
|
368
|
+
* Generates a random number using Xorshift algorithm.
|
|
369
|
+
*
|
|
370
|
+
* @returns A random number between 0 and 1
|
|
371
|
+
*/
|
|
372
|
+
function rand() {
|
|
359
373
|
// based on Java's String.hashCode(), expanded to 4 32bit values
|
|
374
|
+
// eslint-disable-next-line no-bitwise
|
|
360
375
|
const t = randseed[0] ^ (randseed[0] << 11);
|
|
361
|
-
|
|
362
376
|
randseed[0] = randseed[1];
|
|
363
377
|
randseed[1] = randseed[2];
|
|
364
378
|
randseed[2] = randseed[3];
|
|
379
|
+
// eslint-disable-next-line no-bitwise
|
|
365
380
|
randseed[3] = randseed[3] ^ (randseed[3] >> 19) ^ t ^ (t >> 8);
|
|
366
|
-
|
|
381
|
+
// eslint-disable-next-line no-bitwise
|
|
367
382
|
return (randseed[3] >>> 0) / ((1 << 31) >>> 0);
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
383
|
+
}
|
|
384
|
+
/**
|
|
385
|
+
* Creates a random HSL color.
|
|
386
|
+
*
|
|
387
|
+
* @returns HSL color array
|
|
388
|
+
*/
|
|
389
|
+
function createColor() {
|
|
374
390
|
// saturation is the whole color spectrum
|
|
375
391
|
const h = Math.floor(rand() * 360);
|
|
376
392
|
// saturation goes from 40 to 100, it avoids greyish colors
|
|
377
393
|
const s = rand() * 60 + 40;
|
|
378
394
|
// lightness can be anything from 0 to 100, but probabilities are a bell curve around 50%
|
|
379
395
|
const l = (rand() + rand() + rand() + rand()) * 25;
|
|
380
|
-
|
|
381
396
|
return [h / 360, s / 100, l / 100];
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
397
|
+
}
|
|
398
|
+
/**
|
|
399
|
+
* Creates image data for the Blockies pattern.
|
|
400
|
+
*
|
|
401
|
+
* @param size - The size of the image
|
|
402
|
+
* @returns Array of pixel data
|
|
403
|
+
*/
|
|
404
|
+
function createImageData(size) {
|
|
389
405
|
const width = size; // Only support square icons for now
|
|
390
406
|
const height = size;
|
|
391
|
-
|
|
392
407
|
const dataWidth = Math.ceil(width / 2);
|
|
393
408
|
const mirrorWidth = width - dataWidth;
|
|
394
|
-
|
|
395
409
|
const data = [];
|
|
396
|
-
for (let y = 0; y < height; y
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
}
|
|
410
|
+
for (let y = 0; y < height; y += 1) {
|
|
411
|
+
let row = [];
|
|
412
|
+
for (let x = 0; x < dataWidth; x += 1) {
|
|
413
|
+
// this makes foreground and background color to have a 43% (1/2.3) probability
|
|
414
|
+
// spot color has 13% chance
|
|
415
|
+
row[x] = Math.floor(rand() * 2.3);
|
|
416
|
+
}
|
|
417
|
+
const r = row.slice(0, mirrorWidth);
|
|
418
|
+
r.reverse();
|
|
419
|
+
row = row.concat(r);
|
|
420
|
+
for (const value of row) {
|
|
421
|
+
data.push(value);
|
|
422
|
+
}
|
|
410
423
|
}
|
|
411
|
-
|
|
412
424
|
return data;
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
425
|
+
}
|
|
426
|
+
/**
|
|
427
|
+
* Builds options for Blockies generation with defaults.
|
|
428
|
+
*
|
|
429
|
+
* @param opts - Partial options object
|
|
430
|
+
* @returns Complete options object
|
|
431
|
+
*/
|
|
432
|
+
function buildOpts(opts) {
|
|
420
433
|
if (!opts.seed) {
|
|
421
|
-
|
|
434
|
+
throw new Error('No seed provided');
|
|
422
435
|
}
|
|
423
|
-
|
|
424
436
|
seedrand(opts.seed);
|
|
425
|
-
|
|
426
|
-
return Object.assign(
|
|
427
|
-
{
|
|
437
|
+
return {
|
|
428
438
|
size: 8,
|
|
429
439
|
scale: 16,
|
|
430
440
|
color: createColor(),
|
|
431
441
|
bgcolor: createColor(),
|
|
432
442
|
spotcolor: createColor(),
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
+
...opts,
|
|
444
|
+
seed: opts.seed,
|
|
445
|
+
};
|
|
446
|
+
}
|
|
447
|
+
/**
|
|
448
|
+
* Utility class with the single responsibility
|
|
449
|
+
* of caching Blockies Data URIs
|
|
450
|
+
*/
|
|
451
|
+
class Blockies {
|
|
452
|
+
}
|
|
453
|
+
exports.Blockies = Blockies;
|
|
454
|
+
Blockies.cache = {};
|
|
455
|
+
/**
|
|
456
|
+
* Generate a Blockies data URL for a given address
|
|
457
|
+
*
|
|
458
|
+
* @param address The address to generate a Blockies for
|
|
459
|
+
* @returns A data URL string containing the Blockies image
|
|
460
|
+
*/
|
|
461
|
+
function toDataUrl(address) {
|
|
443
462
|
const cache = Blockies.cache[address];
|
|
444
463
|
if (address && cache) {
|
|
445
|
-
|
|
464
|
+
return cache;
|
|
446
465
|
}
|
|
447
|
-
|
|
448
466
|
const opts = buildOpts({ seed: address.toLowerCase() });
|
|
449
|
-
|
|
450
467
|
const imageData = createImageData(opts.size);
|
|
451
468
|
const width = Math.sqrt(imageData.length);
|
|
452
|
-
|
|
453
469
|
const p = new PNG(opts.size * opts.scale, opts.size * opts.scale, 3);
|
|
470
|
+
// Register background color in PNG palette (needed for pixels with value 0)
|
|
471
|
+
// This call adds the background color as the first palette entry, which is
|
|
472
|
+
// essential for proper rendering of background pixels in the Blockies
|
|
473
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
454
474
|
const bgcolor = p.color(...hsl2rgb(...opts.bgcolor));
|
|
455
475
|
const color = p.color(...hsl2rgb(...opts.color));
|
|
456
476
|
const spotcolor = p.color(...hsl2rgb(...opts.spotcolor));
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
col * opts.scale,
|
|
467
|
-
row * opts.scale,
|
|
468
|
-
opts.scale,
|
|
469
|
-
opts.scale,
|
|
470
|
-
pngColor,
|
|
471
|
-
);
|
|
472
|
-
}
|
|
477
|
+
for (let i = 0; i < imageData.length; i += 1) {
|
|
478
|
+
const row = Math.floor(i / width);
|
|
479
|
+
const col = i % width;
|
|
480
|
+
// if data is 0, leave the background
|
|
481
|
+
if (imageData[i]) {
|
|
482
|
+
// if data is 2, choose spot color, if 1 choose foreground
|
|
483
|
+
const pngColor = imageData[i] === 1 ? color : spotcolor;
|
|
484
|
+
p.fillRect(col * opts.scale, row * opts.scale, opts.scale, opts.scale, pngColor);
|
|
485
|
+
}
|
|
473
486
|
}
|
|
474
487
|
const ret = `data:image/png;base64,${p.getBase64()}`;
|
|
475
488
|
Blockies.cache[address] = ret;
|
|
476
489
|
return ret;
|
|
477
|
-
}
|
|
478
|
-
|
|
479
|
-
exports.toDataUrl = toDataUrl;
|
|
480
|
-
|
|
481
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
482
|
-
});
|
|
483
|
-
|
|
484
|
-
/**
|
|
485
|
-
* Utility class with the single responsibility
|
|
486
|
-
* of caching Blockies Data URIs
|
|
487
|
-
*/
|
|
488
|
-
class Blockies {
|
|
489
|
-
static cache = {};
|
|
490
490
|
}
|
|
491
|
+
exports.toDataUrl = toDataUrl;
|
|
492
|
+
//# sourceMappingURL=Blockies.utilities.js.map
|