@shotstack/shotstack-canvas 1.3.6 → 1.3.8

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/entry.node.cjs +13 -6
  2. package/dist/entry.node.d.cts +1 -1
  3. package/dist/entry.node.d.ts +1 -1
  4. package/dist/entry.node.js +13 -6
  5. package/dist/entry.web.d.ts +1 -1
  6. package/dist/entry.web.js +13 -6
  7. package/package.json +1 -1
package/dist/entry.node.cjs CHANGED
@@ -48,7 +48,7 @@ var CANVAS_CONFIG = {
48
48
  fontFamily: "Roboto",
49
49
  fontSize: 48,
50
50
  color: "#000000",
51
- textAlign: "left"
51
+ textAlign: "center"
52
52
  },
53
53
  LIMITS: {
54
54
  minWidth: 1,
@@ -777,18 +777,21 @@ async function buildDrawOps(p) {
777
777
  if (p.lines.length === 0) return ops;
778
778
  const upem = Math.max(1, await p.getUnitsPerEm());
779
779
  const scale = p.font.size / upem;
780
- const blockHeight = p.lines[p.lines.length - 1].y;
780
+ const numLines = p.lines.length;
781
+ const lineHeightPx = p.font.size * p.style.lineHeight;
781
782
  let blockY;
782
783
  switch (p.align.vertical) {
783
784
  case "top":
784
785
  blockY = p.font.size;
785
786
  break;
786
787
  case "bottom":
787
- blockY = p.textRect.height - blockHeight + p.font.size;
788
+ blockY = p.textRect.height - (numLines - 1) * lineHeightPx;
788
789
  break;
789
790
  case "middle":
790
791
  default:
791
- blockY = (p.textRect.height - blockHeight) / 2 + p.font.size;
792
+ const capHeightRatio = 0.35;
793
+ const visualOffset = p.font.size * capHeightRatio;
794
+ blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset;
792
795
  break;
793
796
  }
794
797
  const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
@@ -809,7 +812,8 @@ async function buildDrawOps(p) {
809
812
  break;
810
813
  }
811
814
  let xCursor = lineX;
812
- const baselineY = blockY + line.y - p.font.size;
815
+ const lineIndex = p.lines.indexOf(line);
816
+ const baselineY = blockY + lineIndex * lineHeightPx;
813
817
  for (const glyph of line.glyphs) {
814
818
  const path = await p.glyphPathProvider(glyph.id);
815
819
  if (!path || path === "M 0 0") {
@@ -2119,7 +2123,10 @@ async function createTextEngine(opts = {}) {
2119
2123
  },
2120
2124
  stroke: asset.stroke,
2121
2125
  shadow: asset.shadow,
2122
- align: asset.align ?? { horizontal: "left", vertical: "middle" },
2126
+ align: {
2127
+ horizontal: asset.align?.horizontal ?? "center",
2128
+ vertical: asset.align?.vertical ?? "middle"
2129
+ },
2123
2130
  background: asset.background,
2124
2131
  glyphPathProvider: (gid) => fonts.glyphPath(desc, gid),
2125
2132
  getUnitsPerEm: () => fonts.getUnitsPerEm(desc)
package/dist/entry.node.d.cts CHANGED
@@ -6,7 +6,7 @@ declare const CANVAS_CONFIG: {
6
6
  fontFamily: string;
7
7
  fontSize: number;
8
8
  color: string;
9
- textAlign: "left";
9
+ textAlign: "center";
10
10
  };
11
11
  LIMITS: {
12
12
  minWidth: number;
package/dist/entry.node.d.ts CHANGED
@@ -6,7 +6,7 @@ declare const CANVAS_CONFIG: {
6
6
  fontFamily: string;
7
7
  fontSize: number;
8
8
  color: string;
9
- textAlign: "left";
9
+ textAlign: "center";
10
10
  };
11
11
  LIMITS: {
12
12
  minWidth: number;
package/dist/entry.node.js CHANGED
@@ -10,7 +10,7 @@ var CANVAS_CONFIG = {
10
10
  fontFamily: "Roboto",
11
11
  fontSize: 48,
12
12
  color: "#000000",
13
- textAlign: "left"
13
+ textAlign: "center"
14
14
  },
15
15
  LIMITS: {
16
16
  minWidth: 1,
@@ -738,18 +738,21 @@ async function buildDrawOps(p) {
738
738
  if (p.lines.length === 0) return ops;
739
739
  const upem = Math.max(1, await p.getUnitsPerEm());
740
740
  const scale = p.font.size / upem;
741
- const blockHeight = p.lines[p.lines.length - 1].y;
741
+ const numLines = p.lines.length;
742
+ const lineHeightPx = p.font.size * p.style.lineHeight;
742
743
  let blockY;
743
744
  switch (p.align.vertical) {
744
745
  case "top":
745
746
  blockY = p.font.size;
746
747
  break;
747
748
  case "bottom":
748
- blockY = p.textRect.height - blockHeight + p.font.size;
749
+ blockY = p.textRect.height - (numLines - 1) * lineHeightPx;
749
750
  break;
750
751
  case "middle":
751
752
  default:
752
- blockY = (p.textRect.height - blockHeight) / 2 + p.font.size;
753
+ const capHeightRatio = 0.35;
754
+ const visualOffset = p.font.size * capHeightRatio;
755
+ blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset;
753
756
  break;
754
757
  }
755
758
  const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
@@ -770,7 +773,8 @@ async function buildDrawOps(p) {
770
773
  break;
771
774
  }
772
775
  let xCursor = lineX;
773
- const baselineY = blockY + line.y - p.font.size;
776
+ const lineIndex = p.lines.indexOf(line);
777
+ const baselineY = blockY + lineIndex * lineHeightPx;
774
778
  for (const glyph of line.glyphs) {
775
779
  const path = await p.glyphPathProvider(glyph.id);
776
780
  if (!path || path === "M 0 0") {
@@ -2080,7 +2084,10 @@ async function createTextEngine(opts = {}) {
2080
2084
  },
2081
2085
  stroke: asset.stroke,
2082
2086
  shadow: asset.shadow,
2083
- align: asset.align ?? { horizontal: "left", vertical: "middle" },
2087
+ align: {
2088
+ horizontal: asset.align?.horizontal ?? "center",
2089
+ vertical: asset.align?.vertical ?? "middle"
2090
+ },
2084
2091
  background: asset.background,
2085
2092
  glyphPathProvider: (gid) => fonts.glyphPath(desc, gid),
2086
2093
  getUnitsPerEm: () => fonts.getUnitsPerEm(desc)
package/dist/entry.web.d.ts CHANGED
@@ -6,7 +6,7 @@ declare const CANVAS_CONFIG: {
6
6
  fontFamily: string;
7
7
  fontSize: number;
8
8
  color: string;
9
- textAlign: "left";
9
+ textAlign: "center";
10
10
  };
11
11
  LIMITS: {
12
12
  minWidth: number;
package/dist/entry.web.js CHANGED
@@ -14,7 +14,7 @@ var CANVAS_CONFIG = {
14
14
  fontFamily: "Roboto",
15
15
  fontSize: 48,
16
16
  color: "#000000",
17
- textAlign: "left"
17
+ textAlign: "center"
18
18
  },
19
19
  LIMITS: {
20
20
  minWidth: 1,
@@ -743,18 +743,21 @@ async function buildDrawOps(p) {
743
743
  if (p.lines.length === 0) return ops;
744
744
  const upem = Math.max(1, await p.getUnitsPerEm());
745
745
  const scale = p.font.size / upem;
746
- const blockHeight = p.lines[p.lines.length - 1].y;
746
+ const numLines = p.lines.length;
747
+ const lineHeightPx = p.font.size * p.style.lineHeight;
747
748
  let blockY;
748
749
  switch (p.align.vertical) {
749
750
  case "top":
750
751
  blockY = p.font.size;
751
752
  break;
752
753
  case "bottom":
753
- blockY = p.textRect.height - blockHeight + p.font.size;
754
+ blockY = p.textRect.height - (numLines - 1) * lineHeightPx;
754
755
  break;
755
756
  case "middle":
756
757
  default:
757
- blockY = (p.textRect.height - blockHeight) / 2 + p.font.size;
758
+ const capHeightRatio = 0.35;
759
+ const visualOffset = p.font.size * capHeightRatio;
760
+ blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset;
758
761
  break;
759
762
  }
760
763
  const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
@@ -775,7 +778,8 @@ async function buildDrawOps(p) {
775
778
  break;
776
779
  }
777
780
  let xCursor = lineX;
778
- const baselineY = blockY + line.y - p.font.size;
781
+ const lineIndex = p.lines.indexOf(line);
782
+ const baselineY = blockY + lineIndex * lineHeightPx;
779
783
  for (const glyph of line.glyphs) {
780
784
  const path = await p.glyphPathProvider(glyph.id);
781
785
  if (!path || path === "M 0 0") {
@@ -1801,7 +1805,10 @@ async function createTextEngine(opts = {}) {
1801
1805
  },
1802
1806
  stroke: asset.stroke,
1803
1807
  shadow: asset.shadow,
1804
- align: asset.align ?? { horizontal: "center", vertical: "middle" },
1808
+ align: {
1809
+ horizontal: asset.align?.horizontal ?? "center",
1810
+ vertical: asset.align?.vertical ?? "middle"
1811
+ },
1805
1812
  background: asset.background,
1806
1813
  glyphPathProvider: (gid) => fonts.glyphPath(desc, gid),
1807
1814
  getUnitsPerEm: () => fonts.getUnitsPerEm(desc)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shotstack/shotstack-canvas",
3
- "version": "1.3.6",
3
+ "version": "1.3.8",
4
4
  "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
5
5
  "type": "module",
6
6
  "main": "./dist/entry.node.cjs",