@blockspoon/cert-badge-renderer 1.0.46 → 1.0.49

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.
Files changed (7) hide show
  1. package/dist/cjs/utils/generateAchievementHTML.js +15 -9
  2. package/dist/cjs/utils/generateDesignHTML.js +15 -1
  3. package/dist/esm/utils/generateAchievementHTML.js +15 -9
  4. package/dist/esm/utils/generateDesignHTML.js +15 -1
  5. package/package.json +1 -1
  6. package/src/utils/generateAchievementHTML.ts +11 -11
  7. package/src/utils/generateDesignHTML.ts +11 -1
package/dist/cjs/utils/generateAchievementHTML.js CHANGED
@@ -34,6 +34,19 @@ async function generateAchievementHTML(achievementInfo, options = {}) {
34
34
  return false;
35
35
  return !componentsDirection_js_1.portraitComponents.includes(name);
36
36
  }
37
+ function getAlignItems(element) {
38
+ if (element.bindingKey === "badge")
39
+ return "flex-start";
40
+ if (element.verticalAlign === "bottom")
41
+ return "flex-end";
42
+ if (element.verticalAlign === "middle")
43
+ return "center";
44
+ if (element.verticalAlign === "top")
45
+ return "flex-start";
46
+ if (element.controlType === "svg")
47
+ return "center";
48
+ return "flex-start";
49
+ }
37
50
  const templateComponentName = achievementForm?.achievementCertificateDesign?.template_type;
38
51
  const height = type == "badge" ? 600 : isHorizontal(templateComponentName) ? 810 : 1152;
39
52
  const width = type == "badge" ? 600 : isHorizontal(templateComponentName) ? 1152 : 810;
@@ -153,12 +166,9 @@ async function generateAchievementHTML(achievementInfo, options = {}) {
153
166
  color: ${element.color || "black"};
154
167
  border: none;
155
168
  padding: 0;
169
+ line-height: 1.3;
156
170
  display: flex;
157
- align-items: ${element.textAlign === "center"
158
- ? "center"
159
- : element.textAlign === "left"
160
- ? "flex-start"
161
- : "flex-end"};
171
+ align-items: ${getAlignItems(element)};
162
172
  justify-content: ${element.textAlign === "center"
163
173
  ? "center"
164
174
  : element.textAlign === "left"
@@ -196,13 +206,9 @@ async function generateAchievementHTML(achievementInfo, options = {}) {
196
206
  left: ${element.x}px;
197
207
  width: ${element.width}px;
198
208
  height: ${element.height}px;
199
- isolation: isolate;
200
209
  display: flex;
201
210
  align-items: center;
202
211
  justify-content: center;
203
- will-change: transform, contents;
204
- transform: translateZ(0);
205
- backface-visibility: hidden;
206
212
  `;
207
213
  html += `<div style="${optimizedStyles}">`;
208
214
  const svgString = template.Component({
package/dist/cjs/utils/generateDesignHTML.js CHANGED
@@ -24,6 +24,19 @@ async function generateDesignHTML(data, options = {}) {
24
24
  return false;
25
25
  return !componentsDirection_js_1.portraitComponents.includes(name);
26
26
  }
27
+ function getAlignItems(element) {
28
+ if (element.bindingKey === "badge")
29
+ return "flex-start";
30
+ if (element.verticalAlign === "bottom")
31
+ return "flex-end";
32
+ if (element.verticalAlign === "middle")
33
+ return "center";
34
+ if (element.verticalAlign === "top")
35
+ return "flex-start";
36
+ if (element.controlType === "svg")
37
+ return "center";
38
+ return "flex-start";
39
+ }
27
40
  const templateComponentName = data?.template_type;
28
41
  const isBadge = data?.template_type.includes("Badge");
29
42
  const height = isBadge
@@ -153,8 +166,9 @@ async function generateDesignHTML(data, options = {}) {
153
166
  color: ${element.color || "black"};
154
167
  border: none;
155
168
  padding: 0;
169
+ line-height: 1.3;
156
170
  display: flex;
157
- align-items: start;
171
+ align-items: ${getAlignItems(element)};
158
172
  justify-content: ${element.textAlign === "center"
159
173
  ? "center"
160
174
  : element.textAlign === "left"
package/dist/esm/utils/generateAchievementHTML.js CHANGED
@@ -34,6 +34,19 @@ async function generateAchievementHTML(achievementInfo, options = {}) {
34
34
  return false;
35
35
  return !componentsDirection_js_1.portraitComponents.includes(name);
36
36
  }
37
+ function getAlignItems(element) {
38
+ if (element.bindingKey === "badge")
39
+ return "flex-start";
40
+ if (element.verticalAlign === "bottom")
41
+ return "flex-end";
42
+ if (element.verticalAlign === "middle")
43
+ return "center";
44
+ if (element.verticalAlign === "top")
45
+ return "flex-start";
46
+ if (element.controlType === "svg")
47
+ return "center";
48
+ return "flex-start";
49
+ }
37
50
  const templateComponentName = achievementForm?.achievementCertificateDesign?.template_type;
38
51
  const height = type == "badge" ? 600 : isHorizontal(templateComponentName) ? 810 : 1152;
39
52
  const width = type == "badge" ? 600 : isHorizontal(templateComponentName) ? 1152 : 810;
@@ -153,12 +166,9 @@ async function generateAchievementHTML(achievementInfo, options = {}) {
153
166
  color: ${element.color || "black"};
154
167
  border: none;
155
168
  padding: 0;
169
+ line-height: 1.3;
156
170
  display: flex;
157
- align-items: ${element.textAlign === "center"
158
- ? "center"
159
- : element.textAlign === "left"
160
- ? "flex-start"
161
- : "flex-end"};
171
+ align-items: ${getAlignItems(element)};
162
172
  justify-content: ${element.textAlign === "center"
163
173
  ? "center"
164
174
  : element.textAlign === "left"
@@ -196,13 +206,9 @@ async function generateAchievementHTML(achievementInfo, options = {}) {
196
206
  left: ${element.x}px;
197
207
  width: ${element.width}px;
198
208
  height: ${element.height}px;
199
- isolation: isolate;
200
209
  display: flex;
201
210
  align-items: center;
202
211
  justify-content: center;
203
- will-change: transform, contents;
204
- transform: translateZ(0);
205
- backface-visibility: hidden;
206
212
  `;
207
213
  html += `<div style="${optimizedStyles}">`;
208
214
  const svgString = template.Component({
package/dist/esm/utils/generateDesignHTML.js CHANGED
@@ -24,6 +24,19 @@ async function generateDesignHTML(data, options = {}) {
24
24
  return false;
25
25
  return !componentsDirection_js_1.portraitComponents.includes(name);
26
26
  }
27
+ function getAlignItems(element) {
28
+ if (element.bindingKey === "badge")
29
+ return "flex-start";
30
+ if (element.verticalAlign === "bottom")
31
+ return "flex-end";
32
+ if (element.verticalAlign === "middle")
33
+ return "center";
34
+ if (element.verticalAlign === "top")
35
+ return "flex-start";
36
+ if (element.controlType === "svg")
37
+ return "center";
38
+ return "flex-start";
39
+ }
27
40
  const templateComponentName = data?.template_type;
28
41
  const isBadge = data?.template_type.includes("Badge");
29
42
  const height = isBadge
@@ -153,8 +166,9 @@ async function generateDesignHTML(data, options = {}) {
153
166
  color: ${element.color || "black"};
154
167
  border: none;
155
168
  padding: 0;
169
+ line-height: 1.3;
156
170
  display: flex;
157
- align-items: start;
171
+ align-items: ${getAlignItems(element)};
158
172
  justify-content: ${element.textAlign === "center"
159
173
  ? "center"
160
174
  : element.textAlign === "left"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockspoon/cert-badge-renderer",
3
- "version": "1.0.46",
3
+ "version": "1.0.49",
4
4
  "description": "Render certificate and badge designs from Kolleges achievement data into HTML, PNG, or Base64.",
5
5
  "main": "./dist/esm/index.js",
6
6
  "exports": {
package/src/utils/generateAchievementHTML.ts CHANGED
@@ -52,6 +52,15 @@ export async function generateAchievementHTML(
52
52
  return !portraitComponents.includes(name);
53
53
  }
54
54
 
55
+ function getAlignItems(element: ElementStyle) {
56
+ if (element.bindingKey === "badge") return "flex-start";
57
+ if (element.verticalAlign === "bottom") return "flex-end";
58
+ if (element.verticalAlign === "middle") return "center";
59
+ if (element.verticalAlign === "top") return "flex-start";
60
+ if (element.controlType === "svg") return "center";
61
+ return "flex-start";
62
+ }
63
+
55
64
  const templateComponentName =
56
65
  achievementForm?.achievementCertificateDesign?.template_type;
57
66
 
@@ -201,14 +210,9 @@ export async function generateAchievementHTML(
201
210
  color: ${element.color || "black"};
202
211
  border: none;
203
212
  padding: 0;
213
+ line-height: 1.3;
204
214
  display: flex;
205
- align-items: ${
206
- element.textAlign === "center"
207
- ? "center"
208
- : element.textAlign === "left"
209
- ? "flex-start"
210
- : "flex-end"
211
- };
215
+ align-items: ${getAlignItems(element)};
212
216
  justify-content: ${
213
217
  element.textAlign === "center"
214
218
  ? "center"
@@ -255,13 +259,9 @@ export async function generateAchievementHTML(
255
259
  left: ${element.x}px;
256
260
  width: ${element.width}px;
257
261
  height: ${element.height}px;
258
- isolation: isolate;
259
262
  display: flex;
260
263
  align-items: center;
261
264
  justify-content: center;
262
- will-change: transform, contents;
263
- transform: translateZ(0);
264
- backface-visibility: hidden;
265
265
  `;
266
266
 
267
267
  html += `<div style="${optimizedStyles}">`;
package/src/utils/generateDesignHTML.ts CHANGED
@@ -37,6 +37,15 @@ export async function generateDesignHTML(
37
37
  return !portraitComponents.includes(name);
38
38
  }
39
39
 
40
+ function getAlignItems(element: ElementStyle) {
41
+ if (element.bindingKey === "badge") return "flex-start";
42
+ if (element.verticalAlign === "bottom") return "flex-end";
43
+ if (element.verticalAlign === "middle") return "center";
44
+ if (element.verticalAlign === "top") return "flex-start";
45
+ if (element.controlType === "svg") return "center";
46
+ return "flex-start";
47
+ }
48
+
40
49
  const templateComponentName = data?.template_type;
41
50
 
42
51
  const isBadge = data?.template_type.includes("Badge");
@@ -187,8 +196,9 @@ export async function generateDesignHTML(
187
196
  color: ${element.color || "black"};
188
197
  border: none;
189
198
  padding: 0;
199
+ line-height: 1.3;
190
200
  display: flex;
191
- align-items: start;
201
+ align-items: ${getAlignItems(element)};
192
202
  justify-content: ${
193
203
  element.textAlign === "center"
194
204
  ? "center"