@liquid-js/qr-code-styling 5.0.0-0 → 5.0.0-2
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/lib/figures/dot-elements.d.ts +13 -2
- package/lib/figures/square-elements.d.ts +2 -0
- package/lib/qr-code-styling-node.js +253 -253
- package/lib/qr-code-styling-node.js.map +1 -1
- package/lib/qr-code-styling.js +1 -1
- package/lib/qr-code-styling.js.map +1 -1
- package/lib/utils/options.d.ts +15 -3
- package/package.json +1 -1
|
@@ -45,14 +45,18 @@ function sanitizeGradient(gradient_newGradient) {
|
|
|
45
45
|
DotType.extraRounded = "extra-rounded", DotType.verticalLine = "vertical-line",
|
|
46
46
|
DotType.horizontalLine = "horizontal-line", DotType.classy = "classy", DotType.classyRounded = "classy-rounded",
|
|
47
47
|
DotType.square = "square", DotType.smallSquare = "small-square", DotType.tinySquare = "tiny-square",
|
|
48
|
-
DotType.diamond = "diamond", DotType.wave = "wave",
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
DotType.diamond = "diamond", DotType.wave = "wave", DotType.heart = "heart", DotType.star = "star",
|
|
49
|
+
DotType.weave = "weave", DotType.pentagon = "pentagon", DotType.hexagon = "hexagon",
|
|
50
|
+
DotType.zebraHorizontal = "zebra-horizontal", DotType.zebraVertical = "zebra-vertical",
|
|
51
|
+
(CornerDotType = CornerDotType ||= {}).dot = "dot", CornerDotType.square = "square",
|
|
52
|
+
CornerDotType.heart = "heart", CornerDotType.extraRounded = "extra-rounded", CornerDotType.classy = "classy",
|
|
53
|
+
CornerDotType.inpoint = "inpoint", CornerDotType.outpoint = "outpoint", CornerDotType.star = "star",
|
|
54
|
+
CornerDotType.pentagon = "pentagon", CornerDotType.hexagon = "hexagon", CornerDotType.diamond = "diamond",
|
|
51
55
|
(CornerSquareType = CornerSquareType ||= {}).dot = "dot", CornerSquareType.square = "square",
|
|
52
56
|
CornerSquareType.extraRounded = "extra-rounded", CornerSquareType.classy = "classy",
|
|
53
|
-
CornerSquareType.inpoint = "inpoint", CornerSquareType.outpoint = "outpoint",
|
|
54
|
-
ShapeType.circle = "circle", (ImageMode = ImageMode ||= {}).center = "center",
|
|
55
|
-
ImageMode.background = "background";
|
|
57
|
+
CornerSquareType.inpoint = "inpoint", CornerSquareType.outpoint = "outpoint", CornerSquareType.centerCircle = "center-circle",
|
|
58
|
+
(ShapeType = ShapeType ||= {}).square = "square", ShapeType.circle = "circle", (ImageMode = ImageMode ||= {}).center = "center",
|
|
59
|
+
ImageMode.overlay = "overlay", ImageMode.background = "background";
|
|
56
60
|
|
|
57
61
|
let defaultOptions = {
|
|
58
62
|
document: void 0,
|
|
@@ -142,40 +146,40 @@ let DotElements = {
|
|
|
142
146
|
args.setAttribute("cy", numToAttr(y + size / 2)), args.setAttribute("r", numToAttr(size / 2)),
|
|
143
147
|
args;
|
|
144
148
|
},
|
|
145
|
-
square: args => {
|
|
146
|
-
const {
|
|
147
|
-
return (args = document.createElementNS("http://www.w3.org/2000/svg", "rect")).setAttribute("x", numToAttr(x)),
|
|
148
|
-
args.setAttribute("y", numToAttr(y)), args.setAttribute("width", numToAttr(
|
|
149
|
-
args.setAttribute("height", numToAttr(
|
|
149
|
+
square: (args, {width = args.size, height = args.size} = {}) => {
|
|
150
|
+
const {x, y, size, document} = args;
|
|
151
|
+
return (args = document.createElementNS("http://www.w3.org/2000/svg", "rect")).setAttribute("x", numToAttr(x + (size - width) / 2)),
|
|
152
|
+
args.setAttribute("y", numToAttr(y + (size - height) / 2)), args.setAttribute("width", numToAttr(width)),
|
|
153
|
+
args.setAttribute("height", numToAttr(height)), args;
|
|
150
154
|
},
|
|
151
|
-
sideRounded: args => {
|
|
155
|
+
sideRounded: (args, {height = args.size} = {}) => {
|
|
152
156
|
const {size, x, y, document} = args;
|
|
153
|
-
return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", svgPath`M ${x} ${y} v ${
|
|
157
|
+
return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", svgPath`M ${x} ${y + (size - height) / 2} v ${height} h ${size / 2} a ${height / 2} ${height / 2} 0 0 0 0 ${-height} z`),
|
|
154
158
|
args;
|
|
155
159
|
},
|
|
156
160
|
cornerRounded: args => {
|
|
157
161
|
const {size, x, y, document} = args;
|
|
158
|
-
return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size} v ${-size / 2} a ${size / 2} ${size / 2}
|
|
162
|
+
return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size} v ${-size / 2} a ${size / 2} ${size / 2} 0 0 0 ${-size / 2} ${-size / 2} z`),
|
|
159
163
|
args;
|
|
160
164
|
},
|
|
161
165
|
cornerExtraRounded: args => {
|
|
162
166
|
const {size, x, y, document} = args;
|
|
163
|
-
return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size} a ${size} ${size}
|
|
167
|
+
return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size} a ${size} ${size} 0 0 0 ${-size} ${-size} z`),
|
|
164
168
|
args;
|
|
165
169
|
},
|
|
166
170
|
cornersRounded: args => {
|
|
167
171
|
const {size, x, y, document} = args;
|
|
168
|
-
return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", svgPath`M ${x} ${y} v ${size / 2} a ${size / 2} ${size / 2}
|
|
172
|
+
return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", svgPath`M ${x} ${y} v ${size / 2} a ${size / 2} ${size / 2} 0 0 0 ${size / 2} ${size / 2} h ${size / 2} v ${-size / 2} a ${size / 2} ${size / 2} 0 0 0 ${-size / 2} ${-size / 2} z`),
|
|
169
173
|
args;
|
|
170
174
|
},
|
|
171
175
|
wave: args => {
|
|
172
176
|
const {size, x, y, document} = args;
|
|
173
177
|
var a1_c23y = 5 * Math.PI / 180, a2_c31y = 65 * Math.PI / 180;
|
|
174
|
-
args = size * (
|
|
175
|
-
const c31x = -size * Math.
|
|
176
|
-
a2_c31y =
|
|
178
|
+
args = size * (1 - .65 * Math.sin(a1_c23y)), a1_c23y = -size * (.95 - .65 * Math.cos(a1_c23y));
|
|
179
|
+
const c31x = -size * Math.sin(a2_c31y) / 2;
|
|
180
|
+
a2_c31y = size * Math.cos(a2_c31y) / 2;
|
|
177
181
|
const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
178
|
-
return element.setAttribute("d", svgPath`M ${x} ${y} c
|
|
182
|
+
return element.setAttribute("d", svgPath`M ${x} ${y + size} c ${.65 * size} 0 ${args} ${a1_c23y} ${size} ${.95 * -size} c ${c31x} ${a2_c31y} ${-size / 2} ${size * (.95 - 1)} ${-size} ${size * (.95 - 1)} z`),
|
|
179
183
|
element;
|
|
180
184
|
},
|
|
181
185
|
heart: args => {
|
|
@@ -201,13 +205,23 @@ let DotElements = {
|
|
|
201
205
|
const {size, x, y, document} = args;
|
|
202
206
|
args = size / 7;
|
|
203
207
|
const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
204
|
-
return element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * args} v ${2 * args} a ${2.5 * args} ${2.5 * args}
|
|
208
|
+
return element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * args} v ${2 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * args} ${2.5 * args} h ${4.5 * args} v ${-4.5 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * -args} ${2.5 * -args} h ${-2 * args} H ${x} z`),
|
|
205
209
|
element;
|
|
206
210
|
},
|
|
207
211
|
inpoint: args => {
|
|
208
212
|
const {size, x, y, document} = args;
|
|
209
|
-
return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", svgPath`M ${x} ${y + size / 2} v ${size / 4} a ${size / 4}
|
|
213
|
+
return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", svgPath`M ${x} ${y + size / 2} v ${size / 4} a ${size / 4} ${size / 4} 0 0 0 ${size / 4} ${size / 4} h ${size / 4 * 3} v ${-size / 4 * 3} a ${size / 4} ${size / 4} 0 0 0 ${-size / 4} ${-size / 4} h ${-size / 2} a ${size / 4} ${size / 4} 0 0 0 ${-size / 4} ${size / 4} z`),
|
|
214
|
+
args;
|
|
215
|
+
},
|
|
216
|
+
star: (args, {spikes = 5, outerRadius = args.size / 2, innerRadius = args.size / 4} = {}) => {
|
|
217
|
+
const {size, x, y, document} = args, cx = x + size / 2, cy = y + size / 2, angle = Math.PI / spikes;
|
|
218
|
+
return (args = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("d", Array(2 * spikes).fill(0).map((__radius, i) => svgPath`${0 === i ? "M" : "L"} ${cx + (__radius = i % 2 == 0 ? outerRadius : innerRadius) * Math.sin(i * angle)} ${cy - __radius * Math.cos(i * angle)}`).join(" ")),
|
|
210
219
|
args;
|
|
220
|
+
},
|
|
221
|
+
weave: args => {
|
|
222
|
+
const {size, x, y, document} = args, notch = (size - (args = .6 * size)) / 2, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
223
|
+
return element.setAttribute("d", svgPath`M ${x + notch} ${y} l ${args} 0 l 0 ${notch} l ${notch} 0 l 0 ${args} l ${-notch} 0 l 0 ${notch} l ${-args} 0 l 0 ${-notch} l ${-notch} 0 l 0 ${-args} l ${notch} 0 z`),
|
|
224
|
+
element;
|
|
211
225
|
}
|
|
212
226
|
}, qrCornerDotFigures = {
|
|
213
227
|
[CornerDotType.dot]: args => rotateFigure({
|
|
@@ -235,6 +249,25 @@ let DotElements = {
|
|
|
235
249
|
...args,
|
|
236
250
|
rotation: (args.rotation || 0) + Math.PI,
|
|
237
251
|
draw: DotElements.inpoint
|
|
252
|
+
}),
|
|
253
|
+
[CornerDotType.star]: args => DotElements.star(args),
|
|
254
|
+
[CornerDotType.pentagon]: args => DotElements.star(args, {
|
|
255
|
+
spikes: 2.5,
|
|
256
|
+
outerRadius: args.size / 2,
|
|
257
|
+
innerRadius: args.size / 2
|
|
258
|
+
}),
|
|
259
|
+
[CornerDotType.hexagon]: args => DotElements.star(args, {
|
|
260
|
+
spikes: 3,
|
|
261
|
+
outerRadius: args.size / 2,
|
|
262
|
+
innerRadius: args.size / 2
|
|
263
|
+
}),
|
|
264
|
+
[CornerDotType.diamond]: args => rotateFigure({
|
|
265
|
+
...args,
|
|
266
|
+
rotation: Math.PI / 4,
|
|
267
|
+
draw: args2 => DotElements.square(args2, {
|
|
268
|
+
width: .85 * args2.size,
|
|
269
|
+
height: .85 * args2.size
|
|
270
|
+
})
|
|
238
271
|
})
|
|
239
272
|
}, SquareElements = {
|
|
240
273
|
dot: args => {
|
|
@@ -259,27 +292,47 @@ let DotElements = {
|
|
|
259
292
|
const {size, x, y, document} = args;
|
|
260
293
|
args = size / 7;
|
|
261
294
|
const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
262
|
-
element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * args} v ${2 * args} a ${2.5 * args} ${2.5 * args}
|
|
295
|
+
element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * args} v ${2 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * args} ${2.5 * args} h ${2 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * args} ${2.5 * -args} v ${-2 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * -args} ${2.5 * -args} h ${-2 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * -args} ${2.5 * args} z M ${x + 2.5 * args} ${y + args} h ${2 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * args} ${1.5 * args} v ${2 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * -args} ${1.5 * args} h ${-2 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * -args} ${1.5 * -args} v ${-2 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * args} ${1.5 * -args} z`);
|
|
263
296
|
const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
264
|
-
return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x - args} ${y + 2.5 * args} v ${2 * args} a ${3.5 * args} ${3.5 * args}
|
|
297
|
+
return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x - args} ${y + 2.5 * args} v ${2 * args} a ${3.5 * args} ${3.5 * args} 0 0 0 ${3.5 * args} ${3.5 * args} h ${2 * args} a ${3.5 * args} ${3.5 * args} 0 0 0 ${3.5 * args} ${3.5 * -args} v ${-2 * args} a ${3.5 * args} ${3.5 * args} 0 0 0 ${3.5 * -args} ${3.5 * -args} h ${-2 * args} a ${3.5 * args} ${3.5 * args} 0 0 0 ${3.5 * -args} ${3.5 * args} z`),
|
|
265
298
|
[ element, fill ];
|
|
266
299
|
},
|
|
267
300
|
classy: args => {
|
|
268
301
|
const {size, x, y, document} = args;
|
|
269
302
|
args = size / 7;
|
|
270
303
|
const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
271
|
-
element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * args} v ${2 * args} a ${2.5 * args} ${2.5 * args}
|
|
304
|
+
element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * args} v ${2 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * args} ${2.5 * args} h ${4.5 * args} v ${-4.5 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * -args} ${2.5 * -args} h ${-2 * args} H ${x} z M ${x + 2.5 * args} ${y + args} h ${2 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * args} ${1.5 * args} v ${3.5 * args} h ${-3.5 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * -args} ${1.5 * -args} v ${-3.5 * args} z`);
|
|
272
305
|
const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
273
|
-
return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x + .5 * args} ${y - args} h ${4 * args} a ${3.5 * args} ${3.5 * args}
|
|
306
|
+
return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x + .5 * args} ${y - args} h ${4 * args} a ${3.5 * args} ${3.5 * args} 0 0 1 ${3.5 * args} ${3.5 * args} v ${5.5 * args} h ${-5.5 * args} a ${3.5 * args} ${3.5 * args} 0 0 1 ${3.5 * -args} ${3.5 * -args} v ${-5.5 * args} z`),
|
|
274
307
|
[ element, fill ];
|
|
275
308
|
},
|
|
276
309
|
inpoint: args => {
|
|
277
310
|
const {size, x, y, document} = args;
|
|
278
311
|
args = size / 7;
|
|
279
312
|
const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
280
|
-
element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * args} v ${2 * args} a ${2.5 * args} ${2.5 * args}
|
|
313
|
+
element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * args} v ${2 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * args} ${2.5 * args} h ${4.5 * args} v ${-4.5 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * -args} ${2.5 * -args} h ${-2 * args} a ${2.5 * args} ${2.5 * args} 0 0 0 ${2.5 * -args} ${2.5 * args} z M ${x + 2.5 * args} ${y + args} h ${2 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * args} ${1.5 * args} v ${3.5 * args} h ${-3.5 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * -args} ${1.5 * -args} v ${-2 * args} a ${1.5 * args} ${1.5 * args} 0 0 1 ${1.5 * args} ${1.5 * -args} z`);
|
|
314
|
+
const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
315
|
+
return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x + .5 * args} ${y - args} h ${4 * args} a ${3.5 * args} ${3.5 * args} 0 0 1 ${3.5 * args} ${3.5 * args} v ${5.5 * args} h ${-5.5 * args} a ${3.5 * args} ${3.5 * args} 0 0 1 ${3.5 * -args} ${3.5 * -args} v ${-2 * args} a ${3.5 * args} ${3.5 * args} 0 0 1 ${3.5 * args} ${3.5 * -args} z`),
|
|
316
|
+
[ element, fill ];
|
|
317
|
+
},
|
|
318
|
+
centerCircle: args => {
|
|
319
|
+
const {x, y, size} = args;
|
|
320
|
+
var circleRadius_fill = size / 2.5;
|
|
321
|
+
const cx = x + size / 2, cy = y + size / 2;
|
|
322
|
+
args = size / 7;
|
|
323
|
+
const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
324
|
+
return element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y} h ${size} v ${size} h ${-size} z M ${cx - circleRadius_fill} ${cy} a ${circleRadius_fill} ${circleRadius_fill} 0 1 0 ${2 * circleRadius_fill} 0 a ${circleRadius_fill} ${circleRadius_fill} 0 1 0 ${2 * -circleRadius_fill} 0 z`),
|
|
325
|
+
(circleRadius_fill = document.createElementNS("http://www.w3.org/2000/svg", "path")).setAttribute("clip-rule", "evenodd"),
|
|
326
|
+
circleRadius_fill.setAttribute("d", svgPath`M ${x - args} ${y - args} h ${size + 2 * args} v ${size + 2 * args} h ${-size - 2 * args} z`),
|
|
327
|
+
[ element, circleRadius_fill ];
|
|
328
|
+
},
|
|
329
|
+
cornerCut: args => {
|
|
330
|
+
const {x, y, size} = args;
|
|
331
|
+
args = size / 8;
|
|
332
|
+
const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
333
|
+
element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", `M ${x} ${y} L ${x + size} ${y} L ${x + size} ${y + size - args} Q ${x + size} ${y + size} ${x + size - args} ${y + size} L ${x + args} ${y + size} Q ${x} ${y + size - args} ${x} ${y + size - args} Z M ${x + args} ${y + args} L ${x + size - args} ${y + args} L ${x + size - args} ${y + size - args} L ${x + args} ${y + size - args} Z`);
|
|
281
334
|
const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
282
|
-
return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x
|
|
335
|
+
return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x - args} ${y - args} h ${size + 2 * args} v ${size + 2 * args} h ${-size - 2 * args} z`),
|
|
283
336
|
[ element, fill ];
|
|
284
337
|
}
|
|
285
338
|
}, qrCornerSquareFigures = {
|
|
@@ -298,193 +351,134 @@ let DotElements = {
|
|
|
298
351
|
...args,
|
|
299
352
|
rotation: (rotation || 0) + Math.PI,
|
|
300
353
|
draw: SquareElements.inpoint
|
|
301
|
-
})
|
|
302
|
-
}, qrDotFigures = {
|
|
303
|
-
[DotType.dot]: args => DotElements.dot(args),
|
|
304
|
-
[DotType.randomDot]: ({size, ...args}) => DotElements.dot({
|
|
305
|
-
...args,
|
|
306
|
-
size: size * (.25 * Math.random() + .75)
|
|
307
354
|
}),
|
|
308
|
-
[
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
y,
|
|
377
|
-
size,
|
|
378
|
-
document
|
|
379
|
-
}) : topNeighbor && !bottomNeighbor ? rotateFigure({
|
|
380
|
-
x,
|
|
381
|
-
y,
|
|
382
|
-
size,
|
|
383
|
-
rotation: Math.PI / 2,
|
|
384
|
-
document,
|
|
385
|
-
draw: DotElements.sideRounded
|
|
386
|
-
}) : bottomNeighbor && !topNeighbor ? rotateFigure({
|
|
387
|
-
x,
|
|
388
|
-
y,
|
|
389
|
-
size,
|
|
390
|
-
rotation: -Math.PI / 2,
|
|
391
|
-
document,
|
|
392
|
-
draw: DotElements.sideRounded
|
|
393
|
-
}) : DotElements.dot({
|
|
394
|
-
x,
|
|
395
|
-
y,
|
|
396
|
-
size,
|
|
397
|
-
document
|
|
398
|
-
});
|
|
399
|
-
},
|
|
400
|
-
[DotType.horizontalLine]: ({x, y, size, document, getNeighbor}) => {
|
|
401
|
-
const leftNeighbor = getNeighbor ? +getNeighbor(-1, 0) : 0;
|
|
402
|
-
return getNeighbor = getNeighbor ? +getNeighbor(1, 0) : 0, leftNeighbor && getNeighbor ? DotElements.square({
|
|
403
|
-
x,
|
|
404
|
-
y,
|
|
405
|
-
size,
|
|
406
|
-
document
|
|
407
|
-
}) : leftNeighbor && !getNeighbor ? rotateFigure({
|
|
408
|
-
x,
|
|
409
|
-
y,
|
|
410
|
-
size,
|
|
411
|
-
rotation: 0,
|
|
412
|
-
document,
|
|
413
|
-
draw: DotElements.sideRounded
|
|
414
|
-
}) : getNeighbor && !leftNeighbor ? rotateFigure({
|
|
415
|
-
x,
|
|
416
|
-
y,
|
|
417
|
-
size,
|
|
418
|
-
rotation: Math.PI,
|
|
419
|
-
document,
|
|
420
|
-
draw: DotElements.sideRounded
|
|
421
|
-
}) : DotElements.dot({
|
|
422
|
-
x,
|
|
423
|
-
y,
|
|
424
|
-
size,
|
|
425
|
-
document
|
|
426
|
-
});
|
|
427
|
-
},
|
|
428
|
-
[DotType.classy]: ({x, y, size, document, getNeighbor: bottomNeighbor}) => {
|
|
429
|
-
const leftNeighbor = bottomNeighbor ? +bottomNeighbor(-1, 0) : 0, rightNeighbor = bottomNeighbor ? +bottomNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor ? +bottomNeighbor(0, -1) : 0;
|
|
430
|
-
return leftNeighbor + rightNeighbor + topNeighbor + (bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0) === 0 ? rotateFigure({
|
|
431
|
-
x,
|
|
432
|
-
y,
|
|
433
|
-
size,
|
|
434
|
-
rotation: Math.PI / 2,
|
|
435
|
-
document,
|
|
436
|
-
draw: DotElements.cornersRounded
|
|
437
|
-
}) : leftNeighbor || topNeighbor ? rightNeighbor || bottomNeighbor ? DotElements.square({
|
|
355
|
+
[CornerSquareType.centerCircle]: args => SquareElements.centerCircle(args)
|
|
356
|
+
}, compoundDots_rounded = ({x, y, size, document, getNeighbor: bottomNeighbor_getNeighbor}, {corner: corner_rotation = DotElements.cornerRounded, end = DotElements.sideRounded} = {}) => {
|
|
357
|
+
const leftNeighbor = bottomNeighbor_getNeighbor ? +bottomNeighbor_getNeighbor(-1, 0) : 0, rightNeighbor = bottomNeighbor_getNeighbor ? +bottomNeighbor_getNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor_getNeighbor ? +bottomNeighbor_getNeighbor(0, -1) : 0, neighborsCount = leftNeighbor + rightNeighbor + topNeighbor + (bottomNeighbor_getNeighbor = bottomNeighbor_getNeighbor ? +bottomNeighbor_getNeighbor(0, 1) : 0);
|
|
358
|
+
return 0 === neighborsCount ? DotElements.dot({
|
|
359
|
+
x,
|
|
360
|
+
y,
|
|
361
|
+
size,
|
|
362
|
+
document
|
|
363
|
+
}) : neighborsCount > 2 || leftNeighbor && rightNeighbor || topNeighbor && bottomNeighbor_getNeighbor ? DotElements.square({
|
|
364
|
+
x,
|
|
365
|
+
y,
|
|
366
|
+
size,
|
|
367
|
+
document
|
|
368
|
+
}) : 2 === neighborsCount ? (end = 0, leftNeighbor && topNeighbor ? end = Math.PI / 2 : topNeighbor && rightNeighbor ? end = Math.PI : rightNeighbor && bottomNeighbor_getNeighbor && (end = -Math.PI / 2),
|
|
369
|
+
rotateFigure({
|
|
370
|
+
x,
|
|
371
|
+
y,
|
|
372
|
+
size,
|
|
373
|
+
rotation: end,
|
|
374
|
+
document,
|
|
375
|
+
draw: corner_rotation
|
|
376
|
+
})) : (corner_rotation = 0, topNeighbor ? corner_rotation = Math.PI / 2 : rightNeighbor ? corner_rotation = Math.PI : bottomNeighbor_getNeighbor && (corner_rotation = -Math.PI / 2),
|
|
377
|
+
rotateFigure({
|
|
378
|
+
x,
|
|
379
|
+
y,
|
|
380
|
+
size,
|
|
381
|
+
rotation: corner_rotation,
|
|
382
|
+
document,
|
|
383
|
+
draw: end
|
|
384
|
+
}));
|
|
385
|
+
}, compoundDots_classy = ({x, y, size, document, getNeighbor: bottomNeighbor}, {corner = DotElements.cornerRounded} = {}) => {
|
|
386
|
+
const leftNeighbor = bottomNeighbor ? +bottomNeighbor(-1, 0) : 0, rightNeighbor = bottomNeighbor ? +bottomNeighbor(1, 0) : 0, topNeighbor = bottomNeighbor ? +bottomNeighbor(0, -1) : 0;
|
|
387
|
+
return leftNeighbor + rightNeighbor + topNeighbor + (bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0) === 0 ? rotateFigure({
|
|
388
|
+
x,
|
|
389
|
+
y,
|
|
390
|
+
size,
|
|
391
|
+
rotation: Math.PI / 2,
|
|
392
|
+
document,
|
|
393
|
+
draw: DotElements.cornersRounded
|
|
394
|
+
}) : leftNeighbor || topNeighbor ? rightNeighbor || bottomNeighbor ? DotElements.square({
|
|
395
|
+
x,
|
|
396
|
+
y,
|
|
397
|
+
size,
|
|
398
|
+
document
|
|
399
|
+
}) : rotateFigure({
|
|
400
|
+
x,
|
|
401
|
+
y,
|
|
402
|
+
size,
|
|
403
|
+
rotation: Math.PI / 2,
|
|
404
|
+
document,
|
|
405
|
+
draw: corner
|
|
406
|
+
}) : rotateFigure({
|
|
407
|
+
x,
|
|
408
|
+
y,
|
|
409
|
+
size,
|
|
410
|
+
rotation: -Math.PI / 2,
|
|
411
|
+
document,
|
|
412
|
+
draw: corner
|
|
413
|
+
});
|
|
414
|
+
}, compoundDots_line = ({x, y, size, document, getNeighbor: bottomNeighbor}, {stripe = size, rotation = 0} = {}) => {
|
|
415
|
+
const topNeighbor = bottomNeighbor ? +bottomNeighbor(0, -1) : 0;
|
|
416
|
+
return bottomNeighbor = bottomNeighbor ? +bottomNeighbor(0, 1) : 0, topNeighbor && bottomNeighbor ? rotateFigure({
|
|
417
|
+
x,
|
|
418
|
+
y,
|
|
419
|
+
size,
|
|
420
|
+
rotation,
|
|
421
|
+
document,
|
|
422
|
+
draw: () => DotElements.square({
|
|
438
423
|
x,
|
|
439
424
|
y,
|
|
440
425
|
size,
|
|
441
426
|
document
|
|
442
|
-
}
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
size,
|
|
427
|
+
}, {
|
|
428
|
+
width: stripe
|
|
429
|
+
})
|
|
430
|
+
}) : topNeighbor && !bottomNeighbor ? (rotation += Math.PI / 2, rotateFigure({
|
|
431
|
+
x,
|
|
432
|
+
y,
|
|
433
|
+
size,
|
|
434
|
+
rotation,
|
|
435
|
+
document,
|
|
436
|
+
draw: args => DotElements.sideRounded(args, {
|
|
437
|
+
height: stripe
|
|
438
|
+
})
|
|
439
|
+
})) : bottomNeighbor && !topNeighbor ? (rotation -= Math.PI / 2, rotateFigure({
|
|
440
|
+
x,
|
|
441
|
+
y,
|
|
442
|
+
size,
|
|
443
|
+
rotation,
|
|
444
|
+
document,
|
|
445
|
+
draw: args => DotElements.sideRounded(args, {
|
|
446
|
+
height: stripe
|
|
447
|
+
})
|
|
448
|
+
})) : rotateFigure({
|
|
449
|
+
x,
|
|
450
|
+
y,
|
|
451
|
+
size,
|
|
452
|
+
rotation,
|
|
453
|
+
document,
|
|
454
|
+
draw: () => DotElements.dot({
|
|
455
|
+
x: x + (size - stripe) / 2,
|
|
456
|
+
y: y + (size - stripe) / 2,
|
|
457
|
+
size: stripe,
|
|
471
458
|
document
|
|
472
|
-
})
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
459
|
+
})
|
|
460
|
+
});
|
|
461
|
+
}, qrDotFigures = {
|
|
462
|
+
[DotType.dot]: args => DotElements.dot(args),
|
|
463
|
+
[DotType.randomDot]: ({size, ...args}) => DotElements.dot({
|
|
464
|
+
...args,
|
|
465
|
+
size: size * (.25 * Math.random() + .75)
|
|
466
|
+
}),
|
|
467
|
+
[DotType.rounded]: args => compoundDots_rounded(args),
|
|
468
|
+
[DotType.extraRounded]: args => compoundDots_rounded(args, {
|
|
469
|
+
corner: DotElements.cornerExtraRounded
|
|
470
|
+
}),
|
|
471
|
+
[DotType.verticalLine]: args => compoundDots_line(args),
|
|
472
|
+
[DotType.horizontalLine]: ({getNeighbor, ...args}) => compoundDots_line({
|
|
473
|
+
...args,
|
|
474
|
+
getNeighbor: getNeighbor ? (x, y) => getNeighbor(y, x) : void 0
|
|
475
|
+
}, {
|
|
476
|
+
rotation: -Math.PI / 2
|
|
477
|
+
}),
|
|
478
|
+
[DotType.classy]: args => compoundDots_classy(args),
|
|
479
|
+
[DotType.classyRounded]: args => compoundDots_classy(args, {
|
|
480
|
+
corner: DotElements.cornerExtraRounded
|
|
481
|
+
}),
|
|
488
482
|
[DotType.square]: args => DotElements.square(args),
|
|
489
483
|
[DotType.smallSquare]: ({x, y, size, document}) => DotElements.square({
|
|
490
484
|
x: x += .15 * size,
|
|
@@ -501,39 +495,38 @@ let DotElements = {
|
|
|
501
495
|
[DotType.diamond]: args => rotateFigure({
|
|
502
496
|
...args,
|
|
503
497
|
rotation: Math.PI / 4,
|
|
504
|
-
draw: DotElements.square
|
|
498
|
+
draw: args2 => DotElements.square(args2, {
|
|
499
|
+
width: .85 * args2.size,
|
|
500
|
+
height: .85 * args2.size
|
|
501
|
+
})
|
|
505
502
|
}),
|
|
506
|
-
[DotType.wave]:
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
document,
|
|
534
|
-
draw: DotElements.wave
|
|
535
|
-
}));
|
|
536
|
-
}
|
|
503
|
+
[DotType.wave]: args => compoundDots_rounded(args, {
|
|
504
|
+
corner: DotElements.cornerExtraRounded,
|
|
505
|
+
end: DotElements.wave
|
|
506
|
+
}),
|
|
507
|
+
[DotType.heart]: args => DotElements.heart(args),
|
|
508
|
+
[DotType.star]: args => DotElements.star(args),
|
|
509
|
+
[DotType.weave]: args => DotElements.weave(args),
|
|
510
|
+
[DotType.pentagon]: args => DotElements.star(args, {
|
|
511
|
+
spikes: 2.5,
|
|
512
|
+
outerRadius: args.size / 2,
|
|
513
|
+
innerRadius: args.size / 2
|
|
514
|
+
}),
|
|
515
|
+
[DotType.hexagon]: args => DotElements.star(args, {
|
|
516
|
+
spikes: 3,
|
|
517
|
+
outerRadius: args.size / 2,
|
|
518
|
+
innerRadius: args.size / 2
|
|
519
|
+
}),
|
|
520
|
+
[DotType.zebraVertical]: args => compoundDots_line(args, {
|
|
521
|
+
stripe: .8 * args.size
|
|
522
|
+
}),
|
|
523
|
+
[DotType.zebraHorizontal]: ({getNeighbor, ...args}) => compoundDots_line({
|
|
524
|
+
...args,
|
|
525
|
+
getNeighbor: getNeighbor ? (x, y) => getNeighbor(y, x) : void 0
|
|
526
|
+
}, {
|
|
527
|
+
stripe: .8 * args.size,
|
|
528
|
+
rotation: -Math.PI / 2
|
|
529
|
+
})
|
|
537
530
|
};
|
|
538
531
|
|
|
539
532
|
function getQrDotFigure(type) {
|
|
@@ -892,7 +885,9 @@ class QRSVG {
|
|
|
892
885
|
this._element.appendChild(image);
|
|
893
886
|
}
|
|
894
887
|
createColor({options, color, additionalRotation: additionalRotation_positiveRotation, x, y, height, width, name}) {
|
|
895
|
-
var
|
|
888
|
+
var gradientSize_x0 = width > height ? width : height;
|
|
889
|
+
x -= this.options.dotsOptions.size, y -= this.options.dotsOptions.size, width += 2 * this.options.dotsOptions.size,
|
|
890
|
+
height += 2 * this.options.dotsOptions.size;
|
|
896
891
|
let rect = this.document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
|
897
892
|
if (rect.setAttribute("x", numToAttr(x)), rect.setAttribute("y", numToAttr(y)),
|
|
898
893
|
rect.setAttribute("height", numToAttr(height)), rect.setAttribute("width", numToAttr(width)),
|
|
@@ -902,17 +897,17 @@ class QRSVG {
|
|
|
902
897
|
gradient.setAttribute("id", name), gradient.setAttribute("gradientUnits", "userSpaceOnUse"),
|
|
903
898
|
gradient.setAttribute("fx", numToAttr(x + width / 2)), gradient.setAttribute("fy", numToAttr(y + height / 2)),
|
|
904
899
|
gradient.setAttribute("cx", numToAttr(x + width / 2)), gradient.setAttribute("cy", numToAttr(y + height / 2)),
|
|
905
|
-
gradient.setAttribute("r", numToAttr(
|
|
906
|
-
|
|
900
|
+
gradient.setAttribute("r", numToAttr(gradientSize_x0 / 2)); else {
|
|
901
|
+
gradientSize_x0 = x + width / 2;
|
|
907
902
|
let y0 = y + height / 2;
|
|
908
|
-
x += width / 2, y += height / 2, (additionalRotation_positiveRotation = ((color = ((options.rotation || 0) + additionalRotation_positiveRotation) % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI)) >= 0 && additionalRotation_positiveRotation <= .25 * Math.PI || additionalRotation_positiveRotation > 1.75 * Math.PI && additionalRotation_positiveRotation <= 2 * Math.PI ? (
|
|
903
|
+
x += width / 2, y += height / 2, (additionalRotation_positiveRotation = ((color = ((options.rotation || 0) + additionalRotation_positiveRotation) % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI)) >= 0 && additionalRotation_positiveRotation <= .25 * Math.PI || additionalRotation_positiveRotation > 1.75 * Math.PI && additionalRotation_positiveRotation <= 2 * Math.PI ? (gradientSize_x0 -= width / 2,
|
|
909
904
|
y0 -= height / 2 * Math.tan(color), x += width / 2, y += height / 2 * Math.tan(color)) : additionalRotation_positiveRotation > .25 * Math.PI && additionalRotation_positiveRotation <= .75 * Math.PI ? (y0 -= height / 2,
|
|
910
|
-
|
|
905
|
+
gradientSize_x0 -= width / 2 / Math.tan(color), y += height / 2, x += width / 2 / Math.tan(color)) : additionalRotation_positiveRotation > .75 * Math.PI && additionalRotation_positiveRotation <= 1.25 * Math.PI ? (gradientSize_x0 += width / 2,
|
|
911
906
|
y0 += height / 2 * Math.tan(color), x -= width / 2, y -= height / 2 * Math.tan(color)) : additionalRotation_positiveRotation > 1.25 * Math.PI && additionalRotation_positiveRotation <= 1.75 * Math.PI && (y0 += height / 2,
|
|
912
|
-
|
|
907
|
+
gradientSize_x0 += width / 2 / Math.tan(color), y -= height / 2, x -= width / 2 / Math.tan(color)),
|
|
913
908
|
gradient = this.document.createElementNS("http://www.w3.org/2000/svg", "linearGradient"),
|
|
914
909
|
gradient.setAttribute("id", name), gradient.setAttribute("gradientUnits", "userSpaceOnUse"),
|
|
915
|
-
gradient.setAttribute("x1", numToAttr(
|
|
910
|
+
gradient.setAttribute("x1", numToAttr(gradientSize_x0)), gradient.setAttribute("y1", numToAttr(y0)),
|
|
916
911
|
gradient.setAttribute("x2", numToAttr(x)), gradient.setAttribute("y2", numToAttr(y));
|
|
917
912
|
}
|
|
918
913
|
options.colorStops.forEach(parsed_stopCfg => {
|
|
@@ -996,14 +991,19 @@ let QRCodeStyling$1 = class {
|
|
|
996
991
|
this.options.imageOptions.mode == ImageMode.background && this.options.shape != ShapeType.circle && (count += 2),
|
|
997
992
|
(count = Math.ceil((this.options.shape == ShapeType.circle ? Math.sqrt(2) : 1) * count)) % 2 == 0 && --count;
|
|
998
993
|
var margin = this.options.backgroundOptions && this.options.backgroundOptions.margin || 0;
|
|
999
|
-
this.options.imageOptions.mode == ImageMode.background && (margin += this.options.imageOptions.margin || 0)
|
|
1000
|
-
|
|
994
|
+
this.options.imageOptions.mode == ImageMode.background && (margin += this.options.imageOptions.margin || 0);
|
|
995
|
+
var size = Math.ceil(this.options.dotsOptions.size * (count + 2 * margin));
|
|
996
|
+
this.qrSVG = new QRSVG({
|
|
1001
997
|
...this.options,
|
|
1002
|
-
width:
|
|
1003
|
-
height:
|
|
998
|
+
width: size,
|
|
999
|
+
height: size,
|
|
1004
1000
|
errorCorrectionPercent: ErrorCorrectionPercents[this.options.qrOptions.errorCorrectionLevel]
|
|
1005
1001
|
}), this.svgDrawingPromise = this.qrSVG.drawQR(this.qr).then(() => {
|
|
1006
|
-
this.qrSVG?.element && this.extension?.(this.qrSVG.element,
|
|
1002
|
+
this.qrSVG?.element && this.extension?.(this.qrSVG.element, {
|
|
1003
|
+
...this.options,
|
|
1004
|
+
width: size,
|
|
1005
|
+
height: size
|
|
1006
|
+
});
|
|
1007
1007
|
});
|
|
1008
1008
|
}
|
|
1009
1009
|
}
|