@liquid-js/qr-code-styling 5.6.1 → 5.7.0-0
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 +253 -231
- package/lib/border-plugin.js +1 -1
- package/lib/border-plugin.js.map +1 -1
- package/lib/color-dpqpq3zE.js +2 -0
- package/lib/color-dpqpq3zE.js.map +1 -0
- package/lib/core/qr-svg.d.ts +14 -1
- package/lib/event-plugin.js +1 -1
- package/lib/event-plugin.js.map +1 -1
- package/lib/image-BdYCSwfG.js +2 -0
- package/lib/image-BdYCSwfG.js.map +1 -0
- package/lib/image-mask-plugin.js +2 -0
- package/lib/image-mask-plugin.js.map +1 -0
- package/lib/index.d.ts +1 -1
- package/lib/node.d.ts +1 -1
- package/lib/plugin-utils.js +1 -1
- package/lib/plugin-utils.js.map +1 -1
- package/lib/plugins/image-mask/index.d.ts +63 -0
- package/lib/plugins/image-mask/raster.d.ts +58 -0
- package/lib/qr-code-styling-node.js +317 -112
- 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/image.d.ts +9 -0
- package/lib/utils/options.d.ts +48 -1
- package/lib/utils/svg.d.ts +32 -2
- package/package.json +6 -5
- package/lib/color-dXYWdVDW.js +0 -2
- package/lib/color-dXYWdVDW.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,231 +1,253 @@
|
|
|
1
|
-
# QR Code Styling
|
|
2
|
-
|
|
3
|
-
[](https://github.com/Liquid-JS/qr-code-styling/blob/master/LICENSE)
|
|
4
|
-
[](https://www.npmjs.com/package/@liquid-js/qr-code-styling)
|
|
5
|
-
[](https://www.npmjs.com/package/@liquid-js/qr-code-styling)
|
|
6
|
-
|
|
7
|
-
JavaScript library for generating QR codes with customizable styling.
|
|
8
|
-
|
|
9
|
-
Try it here <https://qrky.to/generator/>
|
|
10
|
-
|
|
11
|
-
> 🌟 Check out [qr-code-styling-cli](https://www.npmjs.com/package/@liquid-js/qr-code-styling-cli) if you're looking to automate your QR generation process
|
|
12
|
-
|
|
13
|
-
## Examples
|
|
14
|
-
|
|
15
|
-
<p float="left">
|
|
16
|
-
<img style="display:inline-block" src="https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/facebook.png" width="240" />
|
|
17
|
-
<img style="display:inline-block" src="https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/qr-styling.png" width="240" />
|
|
18
|
-
<img style="display:inline-block" src="https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/telegram.png" width="240" />
|
|
19
|
-
</p>
|
|
20
|
-
|
|
21
|
-
## Installation
|
|
22
|
-
|
|
23
|
-
npm install @liquid-js/qr-code-styling
|
|
24
|
-
|
|
25
|
-
## API Documentation
|
|
26
|
-
|
|
27
|
-
<https://liquid-js.github.io/qr-code-styling/>
|
|
28
|
-
|
|
29
|
-
## Usage
|
|
30
|
-
|
|
31
|
-
### Browser
|
|
32
|
-
|
|
33
|
-
```HTML
|
|
34
|
-
<!doctype html>
|
|
35
|
-
<html lang="en">
|
|
36
|
-
|
|
37
|
-
<head>
|
|
38
|
-
<meta charset="UTF-8" />
|
|
39
|
-
<title>QR Code Styling</title>
|
|
40
|
-
</head>
|
|
41
|
-
|
|
42
|
-
<body>
|
|
43
|
-
<div id="canvas"></div>
|
|
44
|
-
<button type="button"
|
|
45
|
-
id="dl">Download</button>
|
|
46
|
-
<script type="module">
|
|
47
|
-
import { QRCodeStyling, browserUtils } from 'https://unpkg.com/@liquid-js/qr-code-styling/lib/qr-code-styling.js'
|
|
48
|
-
|
|
49
|
-
const qrCode = new QRCodeStyling({
|
|
50
|
-
data: 'https://www.facebook.com/',
|
|
51
|
-
image: 'https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg',
|
|
52
|
-
dotsOptions: {
|
|
53
|
-
color: '#4267b2',
|
|
54
|
-
type: 'rounded',
|
|
55
|
-
size: 10
|
|
56
|
-
},
|
|
57
|
-
backgroundOptions: {
|
|
58
|
-
color: '#e9ebee',
|
|
59
|
-
margin: 1
|
|
60
|
-
},
|
|
61
|
-
imageOptions: {
|
|
62
|
-
crossOrigin: 'anonymous',
|
|
63
|
-
margin: 1,
|
|
64
|
-
imageSize: 0.5
|
|
65
|
-
}
|
|
66
|
-
})
|
|
67
|
-
|
|
68
|
-
qrCode.append(document.getElementById('canvas'))
|
|
69
|
-
|
|
70
|
-
document.getElementById('dl').addEventListener('click', () => {
|
|
71
|
-
browserUtils.download(qrCode, { extension: 'png' }, { width: 1200, height: 1200 })
|
|
72
|
-
})
|
|
73
|
-
</script>
|
|
74
|
-
</body>
|
|
75
|
-
|
|
76
|
-
</html>
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
### Plugins <img align="right" src="https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/border.png" width="240" />
|
|
80
|
-
|
|
81
|
-
Version `5.0.0` of the library introduces plugin support to replace the now-deprecated `QRCodeStyling.extension`, with the ability to customize the shape of dots and corners. Existing extensions can still be applied as `plugins: [{ postProcess: extensionFn }]`.
|
|
82
|
-
|
|
83
|
-
While the old API only supports a single extension, it is now possible to apply multiple plugins or even multiple instances of a single plugin. For example, to create a QR code with a complex border:
|
|
84
|
-
|
|
85
|
-
```ts
|
|
86
|
-
import BorderPlugin from '@liquid-js/qr-code-styling/border-plugin'
|
|
87
|
-
import FontFacesPlugin from '@liquid-js/qr-code-styling/font-faces-plugin'
|
|
88
|
-
|
|
89
|
-
const qrCode = new QRCodeStyling({
|
|
90
|
-
plugins: [
|
|
91
|
-
new BorderPlugin({
|
|
92
|
-
round: 1,
|
|
93
|
-
size: 2,
|
|
94
|
-
color: '#20c9dc'
|
|
95
|
-
}),
|
|
96
|
-
new BorderPlugin({
|
|
97
|
-
round: 1,
|
|
98
|
-
size: 60,
|
|
99
|
-
color: '#4267b2',
|
|
100
|
-
text: {
|
|
101
|
-
font: 'sans-serif',
|
|
102
|
-
color: '#e9ebee',
|
|
103
|
-
size: 30,
|
|
104
|
-
top: {
|
|
105
|
-
content: 'Scan the'.toUpperCase()
|
|
106
|
-
},
|
|
107
|
-
bottom: {
|
|
108
|
-
content: 'QR code'.toUpperCase()
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
}),
|
|
112
|
-
/**
|
|
113
|
-
* Embed fonts used with BorderPlugin
|
|
114
|
-
*
|
|
115
|
-
* Not needed when using standard or local fonts, but recommended for portability and consistency; use
|
|
116
|
-
* subsetting if possible to reduce the generated file size.
|
|
117
|
-
*/
|
|
118
|
-
new FontFacesPlugin([{
|
|
119
|
-
font: 'sans-serif',
|
|
120
|
-
src: `url(data:font/otf;base64,d09GMgABAA...)`
|
|
121
|
-
}])
|
|
122
|
-
]
|
|
123
|
-
// ...other options
|
|
124
|
-
})
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
####
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
```ts
|
|
132
|
-
import
|
|
133
|
-
|
|
134
|
-
const qrCode = new QRCodeStyling({
|
|
135
|
-
plugins: [
|
|
136
|
-
{
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
const
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
1
|
+
# QR Code Styling
|
|
2
|
+
|
|
3
|
+
[](https://github.com/Liquid-JS/qr-code-styling/blob/master/LICENSE)
|
|
4
|
+
[](https://www.npmjs.com/package/@liquid-js/qr-code-styling)
|
|
5
|
+
[](https://www.npmjs.com/package/@liquid-js/qr-code-styling)
|
|
6
|
+
|
|
7
|
+
JavaScript library for generating QR codes with customizable styling.
|
|
8
|
+
|
|
9
|
+
Try it here <https://qrky.to/generator/>
|
|
10
|
+
|
|
11
|
+
> 🌟 Check out [qr-code-styling-cli](https://www.npmjs.com/package/@liquid-js/qr-code-styling-cli) if you're looking to automate your QR generation process
|
|
12
|
+
|
|
13
|
+
## Examples
|
|
14
|
+
|
|
15
|
+
<p float="left">
|
|
16
|
+
<img style="display:inline-block" src="https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/facebook.png" width="240" />
|
|
17
|
+
<img style="display:inline-block" src="https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/qr-styling.png" width="240" />
|
|
18
|
+
<img style="display:inline-block" src="https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/telegram.png" width="240" />
|
|
19
|
+
</p>
|
|
20
|
+
|
|
21
|
+
## Installation
|
|
22
|
+
|
|
23
|
+
npm install @liquid-js/qr-code-styling
|
|
24
|
+
|
|
25
|
+
## API Documentation
|
|
26
|
+
|
|
27
|
+
<https://liquid-js.github.io/qr-code-styling/>
|
|
28
|
+
|
|
29
|
+
## Usage
|
|
30
|
+
|
|
31
|
+
### Browser
|
|
32
|
+
|
|
33
|
+
```HTML
|
|
34
|
+
<!doctype html>
|
|
35
|
+
<html lang="en">
|
|
36
|
+
|
|
37
|
+
<head>
|
|
38
|
+
<meta charset="UTF-8" />
|
|
39
|
+
<title>QR Code Styling</title>
|
|
40
|
+
</head>
|
|
41
|
+
|
|
42
|
+
<body>
|
|
43
|
+
<div id="canvas"></div>
|
|
44
|
+
<button type="button"
|
|
45
|
+
id="dl">Download</button>
|
|
46
|
+
<script type="module">
|
|
47
|
+
import { QRCodeStyling, browserUtils } from 'https://unpkg.com/@liquid-js/qr-code-styling/lib/qr-code-styling.js'
|
|
48
|
+
|
|
49
|
+
const qrCode = new QRCodeStyling({
|
|
50
|
+
data: 'https://www.facebook.com/',
|
|
51
|
+
image: 'https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg',
|
|
52
|
+
dotsOptions: {
|
|
53
|
+
color: '#4267b2',
|
|
54
|
+
type: 'rounded',
|
|
55
|
+
size: 10
|
|
56
|
+
},
|
|
57
|
+
backgroundOptions: {
|
|
58
|
+
color: '#e9ebee',
|
|
59
|
+
margin: 1
|
|
60
|
+
},
|
|
61
|
+
imageOptions: {
|
|
62
|
+
crossOrigin: 'anonymous',
|
|
63
|
+
margin: 1,
|
|
64
|
+
imageSize: 0.5
|
|
65
|
+
}
|
|
66
|
+
})
|
|
67
|
+
|
|
68
|
+
qrCode.append(document.getElementById('canvas'))
|
|
69
|
+
|
|
70
|
+
document.getElementById('dl').addEventListener('click', () => {
|
|
71
|
+
browserUtils.download(qrCode, { extension: 'png' }, { width: 1200, height: 1200 })
|
|
72
|
+
})
|
|
73
|
+
</script>
|
|
74
|
+
</body>
|
|
75
|
+
|
|
76
|
+
</html>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Plugins <img align="right" src="https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/border.png" width="240" />
|
|
80
|
+
|
|
81
|
+
Version `5.0.0` of the library introduces plugin support to replace the now-deprecated `QRCodeStyling.extension`, with the ability to customize the shape of dots and corners. Existing extensions can still be applied as `plugins: [{ postProcess: extensionFn }]`.
|
|
82
|
+
|
|
83
|
+
While the old API only supports a single extension, it is now possible to apply multiple plugins or even multiple instances of a single plugin. For example, to create a QR code with a complex border:
|
|
84
|
+
|
|
85
|
+
```ts
|
|
86
|
+
import BorderPlugin from '@liquid-js/qr-code-styling/border-plugin'
|
|
87
|
+
import FontFacesPlugin from '@liquid-js/qr-code-styling/font-faces-plugin'
|
|
88
|
+
|
|
89
|
+
const qrCode = new QRCodeStyling({
|
|
90
|
+
plugins: [
|
|
91
|
+
new BorderPlugin({
|
|
92
|
+
round: 1,
|
|
93
|
+
size: 2,
|
|
94
|
+
color: '#20c9dc'
|
|
95
|
+
}),
|
|
96
|
+
new BorderPlugin({
|
|
97
|
+
round: 1,
|
|
98
|
+
size: 60,
|
|
99
|
+
color: '#4267b2',
|
|
100
|
+
text: {
|
|
101
|
+
font: 'sans-serif',
|
|
102
|
+
color: '#e9ebee',
|
|
103
|
+
size: 30,
|
|
104
|
+
top: {
|
|
105
|
+
content: 'Scan the'.toUpperCase()
|
|
106
|
+
},
|
|
107
|
+
bottom: {
|
|
108
|
+
content: 'QR code'.toUpperCase()
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}),
|
|
112
|
+
/**
|
|
113
|
+
* Embed fonts used with BorderPlugin
|
|
114
|
+
*
|
|
115
|
+
* Not needed when using standard or local fonts, but recommended for portability and consistency; use
|
|
116
|
+
* subsetting if possible to reduce the generated file size.
|
|
117
|
+
*/
|
|
118
|
+
new FontFacesPlugin([{
|
|
119
|
+
font: 'sans-serif',
|
|
120
|
+
src: `url(data:font/otf;base64,d09GMgABAA...)`
|
|
121
|
+
}])
|
|
122
|
+
]
|
|
123
|
+
// ...other options
|
|
124
|
+
})
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
#### Image mask
|
|
128
|
+
|
|
129
|
+
`ImageMaskPlugin` fits the QR code into an area of an image outlined by a path, e.g. to fill a logo or a shape with QR code segments, and draws the image behind the code. The largest square inside the area (preferring squares closer to its center) holds the QR code itself, the rest of the area is filled with random segments. The image is independent of `options.image`, so the code can still have its own logo or background image.
|
|
130
|
+
|
|
131
|
+
```ts
|
|
132
|
+
import ImageMaskPlugin from '@liquid-js/qr-code-styling/image-mask-plugin'
|
|
133
|
+
|
|
134
|
+
const qrCode = new QRCodeStyling({
|
|
135
|
+
plugins: [
|
|
136
|
+
new ImageMaskPlugin({
|
|
137
|
+
image: 'https://example.com/heart.png',
|
|
138
|
+
// Area to fill with QR code segments, in the image coordinate space
|
|
139
|
+
path: 'M 256 464 C 120 360 32 280 32 176 A 112 112 0 0 1 256 128 A 112 112 0 0 1 480 176 C 480 280 392 360 256 464 Z',
|
|
140
|
+
fillRule: 'nonzero'
|
|
141
|
+
})
|
|
142
|
+
]
|
|
143
|
+
// ...other options
|
|
144
|
+
})
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
Background and border options are ignored, as the image defines the size of the output.
|
|
148
|
+
|
|
149
|
+
#### Plugin development
|
|
150
|
+
|
|
151
|
+
A simple plugin example to customize QR code dots:
|
|
152
|
+
|
|
153
|
+
```ts
|
|
154
|
+
import { svgAttr, DrawArgs } from '@liquid-js/qr-code-styling/plugin-utils'
|
|
155
|
+
|
|
156
|
+
const qrCode = new QRCodeStyling({
|
|
157
|
+
plugins: [
|
|
158
|
+
{
|
|
159
|
+
drawDot: (args: DrawArgs): SVGElement | undefined => {
|
|
160
|
+
const { size, x, y, document } = args
|
|
161
|
+
|
|
162
|
+
const element = document.createElementNS('http://www.w3.org/2000/svg', 'path')
|
|
163
|
+
// Insert your own SVG path definition, or implement neighbour-aware logic through args.getNeighbor()
|
|
164
|
+
element.setAttribute(
|
|
165
|
+
'd',
|
|
166
|
+
svgAttr`M ${x} ${y + (size - size) / 2}
|
|
167
|
+
v ${size}
|
|
168
|
+
h ${size / 2}
|
|
169
|
+
a ${size / 2} ${size / 2} 0 0 0 0 ${-size}
|
|
170
|
+
z`
|
|
171
|
+
)
|
|
172
|
+
|
|
173
|
+
return element
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
]
|
|
177
|
+
// ...other options
|
|
178
|
+
})
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
See [Border plugin](https://github.com/Liquid-JS/qr-code-styling/blob/master/src/plugins/border.ts) and [figures](https://github.com/Liquid-JS/qr-code-styling/tree/master/src/figures) for further reference.
|
|
182
|
+
|
|
183
|
+
### Node
|
|
184
|
+
|
|
185
|
+
> ⚠️ **Note**: make sure to install peer dependencies when running on Node (not needed for browser environments)
|
|
186
|
+
>
|
|
187
|
+
> npm install @liquid-js/qrcode-generator @xmldom/xmldom file-type sharp
|
|
188
|
+
|
|
189
|
+
```js
|
|
190
|
+
import { QRCodeStyling } from '@liquid-js/qr-code-styling'
|
|
191
|
+
import { writeFile } from 'fs/promises'
|
|
192
|
+
import PDFDocument from 'pdfkit'
|
|
193
|
+
import SVGtoPDF from 'svg-to-pdfkit'
|
|
194
|
+
|
|
195
|
+
const qrCode = new QRCodeStyling({
|
|
196
|
+
data: 'https://www.facebook.com/',
|
|
197
|
+
image: 'https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg',
|
|
198
|
+
dotsOptions: {
|
|
199
|
+
color: '#4267b2',
|
|
200
|
+
type: 'rounded',
|
|
201
|
+
size: 10
|
|
202
|
+
},
|
|
203
|
+
backgroundOptions: {
|
|
204
|
+
color: '#e9ebee',
|
|
205
|
+
margin: 1
|
|
206
|
+
},
|
|
207
|
+
imageOptions: {
|
|
208
|
+
crossOrigin: 'anonymous',
|
|
209
|
+
margin: 1,
|
|
210
|
+
imageSize: 0.5
|
|
211
|
+
}
|
|
212
|
+
})
|
|
213
|
+
|
|
214
|
+
const svgCode = await qrCode.serialize()
|
|
215
|
+
|
|
216
|
+
const { width, height } = qrCode.size
|
|
217
|
+
const buffers = []
|
|
218
|
+
const doc = new PDFDocument({ size: [width, height] })
|
|
219
|
+
doc.on('data', (v) => buffers.push(v))
|
|
220
|
+
const buffer = await new Promise((resolve) => {
|
|
221
|
+
doc.on('end', () => {
|
|
222
|
+
resolve(Buffer.concat(buffers))
|
|
223
|
+
})
|
|
224
|
+
SVGtoPDF(doc, svgCode, 0, 0, {
|
|
225
|
+
width,
|
|
226
|
+
height,
|
|
227
|
+
assumePt: true
|
|
228
|
+
})
|
|
229
|
+
doc.end()
|
|
230
|
+
})
|
|
231
|
+
await writeFile('qr.pdf', buffer)
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
### Kanji support
|
|
235
|
+
|
|
236
|
+
For Kanji mode to work, import `stringToBytesFuncs` from `@liquid-js/qr-code-styling/kanji` and inclue it with config.
|
|
237
|
+
|
|
238
|
+
```js
|
|
239
|
+
import { stringToBytesFuncs } from '@liquid-js/qr-code-styling/kanji'
|
|
240
|
+
|
|
241
|
+
const qrCode = new QRCodeStyling({
|
|
242
|
+
data: '漢字',
|
|
243
|
+
qrOptions: {
|
|
244
|
+
mode: Mode.kanji
|
|
245
|
+
},
|
|
246
|
+
stringToBytesFuncs
|
|
247
|
+
// ...other options
|
|
248
|
+
})
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
## License
|
|
252
|
+
|
|
253
|
+
[MIT License](https://github.com/Liquid-JS/qr-code-styling/blob/master/LICENSE)
|
package/lib/border-plugin.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{extendSVG as t,numToAttr as e,
|
|
1
|
+
import{extendSVG as t,numToAttr as e,svgAttr as i}from"./plugin-utils.js";import{c as s}from"./color-dpqpq3zE.js";var o,r=o||={};r.top="top",r.bottom="bottom",r.left="left",r.right="right";export default class{pluginOptions;idSuffix;constructor(t,e=Math.random().toFixed(10).substring(2)){this.pluginOptions=t,this.idSuffix=e}postProcess(r,n,a){var{document:p}=n,$=this.pluginOptions.proportional?n.size:1,h=this.pluginOptions.size*$,l=t(r,h+(this.pluginOptions.margin||0)*$);if(l){h=Math.abs(h);var d=(l.left+l.right)/2,u=(l.top+l.bottom)/2,g=n.size/2*(1-(this.pluginOptions.round||0)),f=Math.min(l.right-l.left-2*h,l.bottom-l.top-2*h)/2-g+h/2,w=this.pluginOptions.round?f:0,c=this.pluginOptions.round?g:g+f;(l=p.createElementNS("http://www.w3.org/2000/svg","rect")).setAttribute("width",e(2*(c+w))),l.setAttribute("height",e(2*(c+w))),l.setAttribute("x",e(d-c-w)),l.setAttribute("y",e(u-c-w)),l.setAttribute("rx",e(w)),l.setAttribute("fill","none");var m=t=>t.endsWith("%")?(parseFloat(t.substring(0,t.length-1))||0)*b/100:t,b=2*Math.PI*w+8*c,A=this.pluginOptions.dasharray?.split(/[,\s]+/g).map(t=>t.trim()).filter(t=>!!t).map(m);l.setAttribute("stroke-width",e(h)),A?.length&&(l.setAttribute("stroke-dasharray",A.map(e).join(" ")),"string"==typeof(h=this.pluginOptions.dasharrayOffset?.trim()?m(this.pluginOptions.dasharrayOffset?.trim()):0)&&(h=parseFloat(h)),(h-=c)&&l.setAttribute("stroke-dashoffset",e(h))),(n=s({options:this.pluginOptions.gradient,color:this.pluginOptions.color,additionalRotation:0,x:d-c-w,y:u-c-w,height:2*w,width:2*w,name:`border-color-${this.idSuffix}`,dotSize:n.dotsOptions.size,document:n.document}))?(n.gradient&&((a=Array.from(r.childNodes).find(t=>"DEFS"==t.tagName.toUpperCase()))||(a=p.createElementNS("http://www.w3.org/2000/svg","defs"),r.appendChild(a)),a.appendChild(n.gradient)),l.setAttribute("stroke",n.value),n.opacity<1&&l.setAttribute("stroke-opacity",n.opacity.toFixed(7))):a.dots&&(l.setAttribute("stroke",a.dots.value),a.dots.opacity<1&&l.setAttribute("stroke-opacity",a.dots.opacity.toFixed(7))),r.appendChild(l),[o.left,o.top,o.right,o.bottom].forEach(t=>{var s=this.pluginOptions.text,n=s?.[t];if(n){let a=Array.from(r.childNodes).find(t=>"DEFS"==t.tagName.toUpperCase());a||(a=p.createElementNS("http://www.w3.org/2000/svg","defs"),r.appendChild(a));let h=p.createElementNS("http://www.w3.org/2000/svg","path"),l=(n.size||s.size||1)*$;switch(w=this.pluginOptions.round?f-l/3:0,c=this.pluginOptions.round?g:g+(f-l/3),t){case o.top:h.setAttribute("d",i`M ${d} ${u+w+c} h ${-c} a ${w} ${w} 0 0 1 ${-w} ${-w} v ${-2*c} a ${w} ${w} 0 0 1 ${w} ${-w} h ${2*c} a ${w} ${w} 0 0 1 ${w} ${w} v ${2*c} a ${w} ${w} 0 0 1 ${-w} ${w} h ${-c}`);break;case o.bottom:this.pluginOptions.round?w+=2*l/3:c+=2*l/3,h.setAttribute("d",i`M ${d} ${u-w-c} h ${-c} a ${w} ${w} 0 0 0 ${-w} ${w} v ${2*c} a ${w} ${w} 0 0 0 ${w} ${w} h ${2*c} a ${w} ${w} 0 0 0 ${w} ${-w} v ${-2*c} a ${w} ${w} 0 0 0 ${-w} ${-w} h ${-c}`);break;case o.left:h.setAttribute("d",i`M ${d+w+c} ${u} v ${c} a ${w} ${w} 0 0 1 ${-w} ${w} h ${-2*c} a ${w} ${w} 0 0 1 ${-w} ${-w} v ${-2*c} a ${w} ${w} 0 0 1 ${w} ${-w} h ${2*c} a ${w} ${w} 0 0 1 ${w} ${w} v ${c}`);break;case o.right:h.setAttribute("d",i`M ${d-w-c} ${u} v ${-c} a ${w} ${w} 0 0 1 ${w} ${-w} h ${2*c} a ${w} ${w} 0 0 1 ${w} ${w} v ${2*c} a ${w} ${w} 0 0 1 ${-w} ${w} h ${-2*c} a ${w} ${w} 0 0 1 ${-w} ${-w} v ${-c}`)}t=`border-text-${t}-${this.idSuffix}`,h.setAttribute("id",t),h.setAttribute("fill","none");let m=p.createElementNS("http://www.w3.org/2000/svg","tspan");m.setAttribute("font-family",n.font||s.font||"sans-serif"),m.setAttribute("fill",n.color||s.color||"#000"),m.setAttribute("font-weight",e(n.fontWeight||s.fontWeight||"normal")),m.setAttribute("font-style",n.fontStyle||s.fontStyle||"normal"),m.setAttribute("font-size",e(l)),m.textContent=n.content,(s=p.createElementNS("http://www.w3.org/2000/svg","textPath")).setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#"+t),s.setAttribute("startOffset","50%"),s.setAttribute("text-anchor","middle"),s.appendChild(m),(n=p.createElementNS("http://www.w3.org/2000/svg","text")).appendChild(s),a.appendChild(h),r.appendChild(n)}}),this.pluginOptions.fontFaces&&((a=Array.from(r.childNodes).find(t=>"DEFS"==t.tagName.toUpperCase()))||(a=p.createElementNS("http://www.w3.org/2000/svg","defs"),r.appendChild(a)),(l=p.createElementNS("http://www.w3.org/2000/svg","style")).textContent=this.pluginOptions.fontFaces,a.appendChild(l))}}}
|
|
2
2
|
//# sourceMappingURL=border-plugin.js.map
|
package/lib/border-plugin.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"border-plugin.js","sources":["../src/plugins/border.ts"],"sourcesContent":["import { ColorElementValue, createColor } from '../utils/color.js'\r\nimport { Gradient } from '../utils/gradient.js'\r\nimport { Options, Plugin } from '../utils/options.js'\r\nimport { extendSVG, numToAttr, svgPath } from './utils.js'\r\n\r\nenum TextPosition {\r\n top = 'top',\r\n bottom = 'bottom',\r\n left = 'left',\r\n right = 'right'\r\n}\r\n\r\nexport interface TextConfig {\r\n font?: string\r\n color?: string\r\n size?: number\r\n fontWeight?: 'normal' | 'bold' | number\r\n fontStyle?: 'normal' | 'italic' | 'oblique'\r\n}\r\n\r\nexport interface BorderPluginOptions {\r\n /** Border roundnes, from 0 (square) to 1 (circle) */\r\n round?: number\r\n size: number\r\n color?: string\r\n gradient?: Gradient\r\n dasharray?: string\r\n dasharrayOffset?: string\r\n margin?: number\r\n /**\r\n * If true, all dimensions are proportional to the code size,\r\n * i.e. `size: 0.1` means the border thickness is 1/10 of the QR code size\r\n *\r\n * This is useful to keep the border visually consistent regardless of the amount of data\r\n *\r\n * Note: if using dasharray, use percentage values to maintain consistency\r\n */\r\n proportional?: boolean\r\n text?: TextConfig & {\r\n [key in TextPosition]?: TextConfig & {\r\n content: string\r\n }\r\n }\r\n /**\r\n * A string of embedded CSS \\@font-face rules\r\n *\r\n * @deprecated Use @liquid-js/qr-code-styling/font-faces-plugin\r\n */\r\n fontFaces?: string\r\n}\r\n\r\nexport default class BorderPlugin implements Plugin {\r\n\r\n constructor(\r\n private readonly pluginOptions: BorderPluginOptions,\r\n /** @ignore Create unique id for SVG elements to prevent naming collisions; specify your own if neccesary e.g. for testing */\r\n private readonly idSuffix = Math.random().toFixed(10).substring(2)\r\n ) { }\r\n\r\n postProcess(svg: SVGSVGElement, options: Options, colors: {\r\n dots?: ColorElementValue\r\n background?: ColorElementValue\r\n }) {\r\n const { document } = options\r\n const sizeFactor = this.pluginOptions.proportional ? options.size : 1\r\n\r\n const margin = (this.pluginOptions.margin || 0) * sizeFactor\r\n let thickness = (this.pluginOptions.size) * sizeFactor\r\n const drawArea = extendSVG(svg, thickness + margin)\r\n if (!drawArea)\r\n return\r\n\r\n thickness = Math.abs(thickness)\r\n\r\n const cx = (drawArea.left + drawArea.right) / 2\r\n const cy = (drawArea.top + drawArea.bottom) / 2\r\n const lineSize = options.size / 2 * (1 - (this.pluginOptions.round || 0))\r\n const r = (Math.min(drawArea.right - drawArea.left - 2 * thickness, drawArea.bottom - drawArea.top - 2 * thickness) / 2) - lineSize + thickness / 2\r\n\r\n let pathR = this.pluginOptions.round ? r : 0\r\n let pathL = this.pluginOptions.round ? lineSize : lineSize + r\r\n\r\n const borderEl = document.createElementNS('http://www.w3.org/2000/svg', 'rect')\r\n borderEl.setAttribute('width', numToAttr((pathL + pathR) * 2))\r\n borderEl.setAttribute('height', numToAttr((pathL + pathR) * 2))\r\n borderEl.setAttribute('x', numToAttr(cx - pathL - pathR))\r\n borderEl.setAttribute('y', numToAttr(cy - pathL - pathR))\r\n borderEl.setAttribute('rx', numToAttr(pathR))\r\n borderEl.setAttribute('fill', 'none')\r\n\r\n const percenToLength = (dim: string) => {\r\n if (dim.endsWith('%')) {\r\n const val = (parseFloat(dim.substring(0, dim.length - 1)) || 0) * strokeLen / 100\r\n return val\r\n }\r\n return dim\r\n }\r\n\r\n const strokeLen = 2 * Math.PI * pathR + 8 * pathL\r\n const dashArray = this.pluginOptions.dasharray?.split(/[,\\s]+/g).map(v => v.trim()).filter(v => !!v).map(percenToLength)\r\n\r\n borderEl.setAttribute('stroke-width', numToAttr(thickness))\r\n if (dashArray?.length) {\r\n borderEl.setAttribute('stroke-dasharray', dashArray.map(numToAttr).join(' '))\r\n let dashOffset = (this.pluginOptions.dasharrayOffset?.trim() ? percenToLength(this.pluginOptions.dasharrayOffset?.trim()) : 0)\r\n if (typeof dashOffset == 'string')\r\n dashOffset = parseFloat(dashOffset)\r\n dashOffset -= pathL\r\n if (dashOffset)\r\n borderEl.setAttribute('stroke-dashoffset', numToAttr(dashOffset))\r\n }\r\n\r\n const value = createColor({\r\n options: this.pluginOptions.gradient,\r\n color: this.pluginOptions.color,\r\n additionalRotation: 0,\r\n x: cx - pathL - pathR,\r\n y: cy - pathL - pathR,\r\n height: 2 * pathR,\r\n width: 2 * pathR,\r\n name: `border-color-${this.idSuffix}`,\r\n dotSize: options.dotsOptions.size,\r\n document: options.document\r\n })\r\n\r\n if (value) {\r\n if (value.gradient) {\r\n let defs = Array.from(svg.childNodes).find(v => (v as HTMLElement).tagName.toUpperCase() == 'DEFS')\r\n if (!defs) {\r\n defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')\r\n svg.appendChild(defs)\r\n }\r\n defs.appendChild(value.gradient)\r\n }\r\n borderEl.setAttribute('stroke', value.value)\r\n\r\n if (value.opacity < 1) borderEl.setAttribute('stroke-opacity', value.opacity.toFixed(7))\r\n } else if (colors.dots) {\r\n borderEl.setAttribute('stroke', colors.dots.value)\r\n\r\n if (colors.dots.opacity < 1) borderEl.setAttribute('stroke-opacity', colors.dots.opacity.toFixed(7))\r\n }\r\n\r\n svg.appendChild(borderEl);\r\n\r\n [TextPosition.left, TextPosition.top, TextPosition.right, TextPosition.bottom].forEach(postion => {\r\n const textCfg = this.pluginOptions.text\r\n const config = textCfg?.[postion]\r\n if (config) {\r\n let defs = Array.from(svg.childNodes).find(v => (v as HTMLElement).tagName.toUpperCase() == 'DEFS')\r\n if (!defs) {\r\n defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')\r\n svg.appendChild(defs)\r\n }\r\n const element = document.createElementNS('http://www.w3.org/2000/svg', 'path')\r\n const size = (config.size || textCfg.size || 1) * sizeFactor\r\n pathR = this.pluginOptions.round ? r - size / 3 : 0\r\n pathL = this.pluginOptions.round ? lineSize : lineSize + (r - size / 3)\r\n switch (postion) {\r\n case TextPosition.top:\r\n element.setAttribute(\r\n 'd',\r\n svgPath`M ${cx} ${cy + pathR + pathL}\r\n h ${-pathL}\r\n a ${pathR} ${pathR} 0 0 1 ${-pathR} ${-pathR}\r\n v ${-2 * pathL}\r\n a ${pathR} ${pathR} 0 0 1 ${pathR} ${-pathR}\r\n h ${2 * pathL}\r\n a ${pathR} ${pathR} 0 0 1 ${pathR} ${pathR}\r\n v ${2 * pathL}\r\n a ${pathR} ${pathR} 0 0 1 ${-pathR} ${pathR}\r\n h ${-pathL}`\r\n )\r\n break\r\n case TextPosition.bottom:\r\n if (this.pluginOptions.round)\r\n pathR += size * 2 / 3\r\n else\r\n pathL += size * 2 / 3\r\n element.setAttribute(\r\n 'd',\r\n svgPath`M ${cx} ${cy - pathR - pathL}\r\n h ${-pathL}\r\n a ${pathR} ${pathR} 0 0 0 ${-pathR} ${pathR}\r\n v ${2 * pathL}\r\n a ${pathR} ${pathR} 0 0 0 ${pathR} ${pathR}\r\n h ${2 * pathL}\r\n a ${pathR} ${pathR} 0 0 0 ${pathR} ${-pathR}\r\n v ${-2 * pathL}\r\n a ${pathR} ${pathR} 0 0 0 ${-pathR} ${-pathR}\r\n h ${-pathL}`\r\n )\r\n break\r\n case TextPosition.left:\r\n element.setAttribute(\r\n 'd',\r\n svgPath`M ${cx + pathR + pathL} ${cy}\r\n v ${pathL}\r\n a ${pathR} ${pathR} 0 0 1 ${-pathR} ${pathR}\r\n h ${-2 * pathL}\r\n a ${pathR} ${pathR} 0 0 1 ${-pathR} ${-pathR}\r\n v ${-2 * pathL}\r\n a ${pathR} ${pathR} 0 0 1 ${pathR} ${-pathR}\r\n h ${2 * pathL}\r\n a ${pathR} ${pathR} 0 0 1 ${pathR} ${pathR}\r\n v ${pathL}`\r\n )\r\n break\r\n case TextPosition.right:\r\n element.setAttribute(\r\n 'd',\r\n svgPath`M ${cx - pathR - pathL} ${cy}\r\n v ${-pathL}\r\n a ${pathR} ${pathR} 0 0 1 ${pathR} ${-pathR}\r\n h ${2 * pathL}\r\n a ${pathR} ${pathR} 0 0 1 ${pathR} ${pathR}\r\n v ${2 * pathL}\r\n a ${pathR} ${pathR} 0 0 1 ${-pathR} ${pathR}\r\n h ${-2 * pathL}\r\n a ${pathR} ${pathR} 0 0 1 ${-pathR} ${-pathR}\r\n v ${-pathL}`\r\n )\r\n break\r\n }\r\n const id = `border-text-${postion}-${this.idSuffix}`\r\n element.setAttribute('id', id)\r\n element.setAttribute('fill', 'none')\r\n\r\n const span = document.createElementNS('http://www.w3.org/2000/svg', 'tspan')\r\n span.setAttribute('font-family', config.font || textCfg.font || 'sans-serif')\r\n span.setAttribute('fill', config.color || textCfg.color || '#000')\r\n span.setAttribute('font-weight', numToAttr(config.fontWeight || textCfg.fontWeight || 'normal'))\r\n span.setAttribute('font-style', config.fontStyle || textCfg.fontStyle || 'normal')\r\n span.setAttribute('font-size', numToAttr(size))\r\n span.textContent = config.content\r\n\r\n const textPath = document.createElementNS('http://www.w3.org/2000/svg', 'textPath')\r\n textPath.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + id)\r\n textPath.setAttribute('startOffset', '50%')\r\n textPath.setAttribute('text-anchor', 'middle')\r\n textPath.appendChild(span)\r\n\r\n const text = document.createElementNS('http://www.w3.org/2000/svg', 'text')\r\n text.appendChild(textPath)\r\n\r\n defs.appendChild(element)\r\n svg.appendChild(text)\r\n }\r\n })\r\n\r\n // eslint-disable-next-line @typescript-eslint/no-deprecated\r\n if (this.pluginOptions.fontFaces) {\r\n let defs = Array.from(svg.childNodes).find(v => (v as HTMLElement).tagName.toUpperCase() == 'DEFS')\r\n if (!defs) {\r\n defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')\r\n svg.appendChild(defs)\r\n }\r\n const style = document.createElementNS('http://www.w3.org/2000/svg', 'style')\r\n // eslint-disable-next-line @typescript-eslint/no-deprecated\r\n style.textContent = this.pluginOptions.fontFaces\r\n defs.appendChild(style)\r\n }\r\n }\r\n}\r\n"],"names":["extendSVG","numToAttr","TextPosition","createColor","m","w","top","bottom","left","right","pluginOptions","idSuffix","constructor","Math","random","toFixed","substring","this","postProcess","svg","options","colors","document","sizeFactor","proportional","size","thickness","drawArea","margin","abs","cx","cy","round","min","lineSize","pathR","r","pathL","borderEl","createElementNS","setAttribute","percenToLength","dim","endsWith","parseFloat","length","strokeLen","PI","split","map","v","trim","filter","dashArray","join","dashOffset","dasharrayOffset","value","gradient","color","additionalRotation","x","y","height","width","name","dotSize","dotsOptions","defs","Array","from","childNodes","find","tagName","toUpperCase","appendChild","opacity","dots","forEach","postion","text","textCfg","config","element","svgPath","id","span","font","fontWeight","fontStyle","textContent","content","textPath","setAttributeNS","fontFaces","style"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"border-plugin.js","sources":["../src/plugins/border.ts"],"sourcesContent":["import { ColorElementValue, createColor } from '../utils/color.js'\nimport { Gradient } from '../utils/gradient.js'\nimport { Options, Plugin } from '../utils/options.js'\nimport { extendSVG, numToAttr, svgAttr } from './utils.js'\n\nenum TextPosition {\n top = 'top',\n bottom = 'bottom',\n left = 'left',\n right = 'right'\n}\n\nexport interface TextConfig {\n font?: string\n color?: string\n size?: number\n fontWeight?: 'normal' | 'bold' | number\n fontStyle?: 'normal' | 'italic' | 'oblique'\n}\n\nexport interface BorderPluginOptions {\n /** Border roundnes, from 0 (square) to 1 (circle) */\n round?: number\n size: number\n color?: string\n gradient?: Gradient\n dasharray?: string\n dasharrayOffset?: string\n margin?: number\n /**\n * If true, all dimensions are proportional to the code size,\n * i.e. `size: 0.1` means the border thickness is 1/10 of the QR code size\n *\n * This is useful to keep the border visually consistent regardless of the amount of data\n *\n * Note: if using dasharray, use percentage values to maintain consistency\n */\n proportional?: boolean\n text?: TextConfig & {\n [key in TextPosition]?: TextConfig & {\n content: string\n }\n }\n /**\n * A string of embedded CSS \\@font-face rules\n *\n * @deprecated Use @liquid-js/qr-code-styling/font-faces-plugin\n */\n fontFaces?: string\n}\n\nexport default class BorderPlugin implements Plugin {\n\n constructor(\n private readonly pluginOptions: BorderPluginOptions,\n /** @ignore Create unique id for SVG elements to prevent naming collisions; specify your own if neccesary e.g. for testing */\n private readonly idSuffix = Math.random().toFixed(10).substring(2)\n ) { }\n\n postProcess(svg: SVGSVGElement, options: Options, colors: {\n dots?: ColorElementValue\n background?: ColorElementValue\n }) {\n const { document } = options\n const sizeFactor = this.pluginOptions.proportional ? options.size : 1\n\n const margin = (this.pluginOptions.margin || 0) * sizeFactor\n let thickness = (this.pluginOptions.size) * sizeFactor\n const drawArea = extendSVG(svg, thickness + margin)\n if (!drawArea)\n return\n\n thickness = Math.abs(thickness)\n\n const cx = (drawArea.left + drawArea.right) / 2\n const cy = (drawArea.top + drawArea.bottom) / 2\n const lineSize = options.size / 2 * (1 - (this.pluginOptions.round || 0))\n const r = (Math.min(drawArea.right - drawArea.left - 2 * thickness, drawArea.bottom - drawArea.top - 2 * thickness) / 2) - lineSize + thickness / 2\n\n let pathR = this.pluginOptions.round ? r : 0\n let pathL = this.pluginOptions.round ? lineSize : lineSize + r\n\n const borderEl = document.createElementNS('http://www.w3.org/2000/svg', 'rect')\n borderEl.setAttribute('width', numToAttr((pathL + pathR) * 2))\n borderEl.setAttribute('height', numToAttr((pathL + pathR) * 2))\n borderEl.setAttribute('x', numToAttr(cx - pathL - pathR))\n borderEl.setAttribute('y', numToAttr(cy - pathL - pathR))\n borderEl.setAttribute('rx', numToAttr(pathR))\n borderEl.setAttribute('fill', 'none')\n\n const percenToLength = (dim: string) => {\n if (dim.endsWith('%')) {\n const val = (parseFloat(dim.substring(0, dim.length - 1)) || 0) * strokeLen / 100\n return val\n }\n return dim\n }\n\n const strokeLen = 2 * Math.PI * pathR + 8 * pathL\n const dashArray = this.pluginOptions.dasharray?.split(/[,\\s]+/g).map(v => v.trim()).filter(v => !!v).map(percenToLength)\n\n borderEl.setAttribute('stroke-width', numToAttr(thickness))\n if (dashArray?.length) {\n borderEl.setAttribute('stroke-dasharray', dashArray.map(numToAttr).join(' '))\n let dashOffset = (this.pluginOptions.dasharrayOffset?.trim() ? percenToLength(this.pluginOptions.dasharrayOffset?.trim()) : 0)\n if (typeof dashOffset == 'string')\n dashOffset = parseFloat(dashOffset)\n dashOffset -= pathL\n if (dashOffset)\n borderEl.setAttribute('stroke-dashoffset', numToAttr(dashOffset))\n }\n\n const value = createColor({\n options: this.pluginOptions.gradient,\n color: this.pluginOptions.color,\n additionalRotation: 0,\n x: cx - pathL - pathR,\n y: cy - pathL - pathR,\n height: 2 * pathR,\n width: 2 * pathR,\n name: `border-color-${this.idSuffix}`,\n dotSize: options.dotsOptions.size,\n document: options.document\n })\n\n if (value) {\n if (value.gradient) {\n let defs = Array.from(svg.childNodes).find(v => (v as HTMLElement).tagName.toUpperCase() == 'DEFS')\n if (!defs) {\n defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')\n svg.appendChild(defs)\n }\n defs.appendChild(value.gradient)\n }\n borderEl.setAttribute('stroke', value.value)\n\n if (value.opacity < 1) borderEl.setAttribute('stroke-opacity', value.opacity.toFixed(7))\n } else if (colors.dots) {\n borderEl.setAttribute('stroke', colors.dots.value)\n\n if (colors.dots.opacity < 1) borderEl.setAttribute('stroke-opacity', colors.dots.opacity.toFixed(7))\n }\n\n svg.appendChild(borderEl);\n\n [TextPosition.left, TextPosition.top, TextPosition.right, TextPosition.bottom].forEach(postion => {\n const textCfg = this.pluginOptions.text\n const config = textCfg?.[postion]\n if (config) {\n let defs = Array.from(svg.childNodes).find(v => (v as HTMLElement).tagName.toUpperCase() == 'DEFS')\n if (!defs) {\n defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')\n svg.appendChild(defs)\n }\n const element = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n const size = (config.size || textCfg.size || 1) * sizeFactor\n pathR = this.pluginOptions.round ? r - size / 3 : 0\n pathL = this.pluginOptions.round ? lineSize : lineSize + (r - size / 3)\n switch (postion) {\n case TextPosition.top:\n element.setAttribute(\n 'd',\n svgAttr`M ${cx} ${cy + pathR + pathL}\n h ${-pathL}\n a ${pathR} ${pathR} 0 0 1 ${-pathR} ${-pathR}\n v ${-2 * pathL}\n a ${pathR} ${pathR} 0 0 1 ${pathR} ${-pathR}\n h ${2 * pathL}\n a ${pathR} ${pathR} 0 0 1 ${pathR} ${pathR}\n v ${2 * pathL}\n a ${pathR} ${pathR} 0 0 1 ${-pathR} ${pathR}\n h ${-pathL}`\n )\n break\n case TextPosition.bottom:\n if (this.pluginOptions.round)\n pathR += size * 2 / 3\n else\n pathL += size * 2 / 3\n element.setAttribute(\n 'd',\n svgAttr`M ${cx} ${cy - pathR - pathL}\n h ${-pathL}\n a ${pathR} ${pathR} 0 0 0 ${-pathR} ${pathR}\n v ${2 * pathL}\n a ${pathR} ${pathR} 0 0 0 ${pathR} ${pathR}\n h ${2 * pathL}\n a ${pathR} ${pathR} 0 0 0 ${pathR} ${-pathR}\n v ${-2 * pathL}\n a ${pathR} ${pathR} 0 0 0 ${-pathR} ${-pathR}\n h ${-pathL}`\n )\n break\n case TextPosition.left:\n element.setAttribute(\n 'd',\n svgAttr`M ${cx + pathR + pathL} ${cy}\n v ${pathL}\n a ${pathR} ${pathR} 0 0 1 ${-pathR} ${pathR}\n h ${-2 * pathL}\n a ${pathR} ${pathR} 0 0 1 ${-pathR} ${-pathR}\n v ${-2 * pathL}\n a ${pathR} ${pathR} 0 0 1 ${pathR} ${-pathR}\n h ${2 * pathL}\n a ${pathR} ${pathR} 0 0 1 ${pathR} ${pathR}\n v ${pathL}`\n )\n break\n case TextPosition.right:\n element.setAttribute(\n 'd',\n svgAttr`M ${cx - pathR - pathL} ${cy}\n v ${-pathL}\n a ${pathR} ${pathR} 0 0 1 ${pathR} ${-pathR}\n h ${2 * pathL}\n a ${pathR} ${pathR} 0 0 1 ${pathR} ${pathR}\n v ${2 * pathL}\n a ${pathR} ${pathR} 0 0 1 ${-pathR} ${pathR}\n h ${-2 * pathL}\n a ${pathR} ${pathR} 0 0 1 ${-pathR} ${-pathR}\n v ${-pathL}`\n )\n break\n }\n const id = `border-text-${postion}-${this.idSuffix}`\n element.setAttribute('id', id)\n element.setAttribute('fill', 'none')\n\n const span = document.createElementNS('http://www.w3.org/2000/svg', 'tspan')\n span.setAttribute('font-family', config.font || textCfg.font || 'sans-serif')\n span.setAttribute('fill', config.color || textCfg.color || '#000')\n span.setAttribute('font-weight', numToAttr(config.fontWeight || textCfg.fontWeight || 'normal'))\n span.setAttribute('font-style', config.fontStyle || textCfg.fontStyle || 'normal')\n span.setAttribute('font-size', numToAttr(size))\n span.textContent = config.content\n\n const textPath = document.createElementNS('http://www.w3.org/2000/svg', 'textPath')\n textPath.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + id)\n textPath.setAttribute('startOffset', '50%')\n textPath.setAttribute('text-anchor', 'middle')\n textPath.appendChild(span)\n\n const text = document.createElementNS('http://www.w3.org/2000/svg', 'text')\n text.appendChild(textPath)\n\n defs.appendChild(element)\n svg.appendChild(text)\n }\n })\n\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n if (this.pluginOptions.fontFaces) {\n let defs = Array.from(svg.childNodes).find(v => (v as HTMLElement).tagName.toUpperCase() == 'DEFS')\n if (!defs) {\n defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')\n svg.appendChild(defs)\n }\n const style = document.createElementNS('http://www.w3.org/2000/svg', 'style')\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n style.textContent = this.pluginOptions.fontFaces\n defs.appendChild(style)\n }\n }\n}\n"],"names":["extendSVG","numToAttr","TextPosition","createColor","m","w","top","bottom","left","right","pluginOptions","idSuffix","constructor","Math","random","toFixed","substring","this","postProcess","svg","options","colors","document","sizeFactor","proportional","size","thickness","drawArea","margin","abs","cx","cy","round","min","lineSize","pathR","r","pathL","borderEl","createElementNS","setAttribute","percenToLength","dim","endsWith","parseFloat","length","strokeLen","PI","split","map","v","trim","filter","dashArray","join","dashOffset","dasharrayOffset","value","gradient","color","additionalRotation","x","y","height","width","name","dotSize","dotsOptions","defs","Array","from","childNodes","find","tagName","toUpperCase","appendChild","opacity","dots","forEach","postion","text","textCfg","config","element","svgAttr","id","span","font","fontWeight","fontStyle","textContent","content","textPath","setAttributeNS","fontFaces","style"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{numToAttr as t,svgAttr as a}from"./plugin-utils.js";var e,r=e||={};function i(t){var a=[],e=1;if("#"===(t=t.toLowerCase())[0]){let r=(t=t.slice(1)).length;r<=4?(a=[parseInt(t[0]+t[0],16),parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16)],4===r&&(e=parseInt(t[3]+t[3],16)/255)):(a=[parseInt(t[0]+t[1],16),parseInt(t[2]+t[3],16),parseInt(t[4]+t[5],16)],8===r&&(e=parseInt(t[6]+t[7],16)/255)),a[0]||(a[0]=0),a[1]||(a[1]=0),a[2]||(a[2]=0)}else{if(!(a=/^((?:rgba?))\s*\(([^)]*)\)/.exec(t)))return{value:t,alpha:e};e=(a=(a=a[2].trim().split(/\s*[,/]\s*|\s+/)).map((t,a)=>"%"===t[t.length-1]?(t=parseFloat(t)/100,3===a?t:255*t):"none"===t?0:parseFloat(t))).length>3?a.pop():1}return{value:"#"+a.map(t=>Math.max(0,Math.min(255,t)).toString(16).padStart(2,"0")).join(""),alpha:Math.max(0,Math.min(1,e))}}function o({options:r,color:o,additionalRotation:n,x:s,y:l,height:p,width:h,name:u,dotSize:c,document:M}){var d=h>p?h:p;if(s-=c,l-=c,h+=2*c,p+=2*c,r){let f;return r.type===e.radial?(f=M.createElementNS("http://www.w3.org/2000/svg","radialGradient"),f.setAttribute("id",u),f.setAttribute("gradientUnits","userSpaceOnUse"),f.setAttribute("fx",t(s+h/2)),f.setAttribute("fy",t(l+p/2)),f.setAttribute("cx",t(s+h/2)),f.setAttribute("cy",t(l+p/2)),f.setAttribute("r",t(d/2))):(c=s+h/2,d=l+p/2,s+=h/2,l+=p/2,(n=((o=((r.rotation||0)+n)%(2*Math.PI))+2*Math.PI)%(2*Math.PI))>=0&&n<=.25*Math.PI||n>1.75*Math.PI&&n<=2*Math.PI?(c-=h/2,d-=p/2*Math.tan(o),s+=h/2,l+=p/2*Math.tan(o)):n>.25*Math.PI&&n<=.75*Math.PI?(d-=p/2,c-=h/2/Math.tan(o),l+=p/2,s+=h/2/Math.tan(o)):n>.75*Math.PI&&n<=1.25*Math.PI?(c+=h/2,d+=p/2*Math.tan(o),s-=h/2,l-=p/2*Math.tan(o)):n>1.25*Math.PI&&n<=1.75*Math.PI&&(d+=p/2,c+=h/2/Math.tan(o),l-=p/2,s-=h/2/Math.tan(o)),f=M.createElementNS("http://www.w3.org/2000/svg","linearGradient"),f.setAttribute("id",u),f.setAttribute("gradientUnits","userSpaceOnUse"),f.setAttribute("x1",t(c)),f.setAttribute("y1",t(d)),f.setAttribute("x2",t(s)),f.setAttribute("y2",t(l))),r.colorStops.forEach(t=>{var e=M.createElementNS("http://www.w3.org/2000/svg","stop");e.setAttribute("offset",a`${100*t.offset}%`),t=i(t.color),e.setAttribute("stop-color",t.value),t.alpha<1&&e.setAttribute("stop-opacity",t.alpha.toFixed(7)),f.appendChild(e)}),{gradient:f,value:`url(#${u})`,opacity:1}}if(o)return{value:(r=i(o)).value,opacity:r.alpha}}function n(t){if(!(t={...t}).colorStops||!t.colorStops.length)throw Error("Field 'colorStops' is required in gradient");return t.rotation=t.rotation?Number(t.rotation):0,t.colorStops=t.colorStops.map(t=>({...t,offset:Number(t.offset)})),t}r.radial="radial",r.linear="linear";export{e as G,o as c,n as s};
|
|
2
|
+
//# sourceMappingURL=color-dpqpq3zE.js.map
|