@shotstack/shotstack-canvas 1.5.9 → 1.6.1

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 (4) hide show
  1. package/dist/entry.node.cjs +11 -8
  2. package/dist/entry.node.js +11 -8
  3. package/dist/entry.web.js +11 -8
  4. package/package.json +1 -1
package/dist/entry.node.cjs CHANGED
@@ -903,19 +903,20 @@ async function buildDrawOps(p) {
903
903
  const scale = p.font.size / upem;
904
904
  const numLines = p.lines.length;
905
905
  const lineHeightPx = p.font.size * p.style.lineHeight;
906
+ const textOffsetY = borderWidth + padding.top;
906
907
  let blockY;
907
908
  switch (p.align.vertical) {
908
909
  case "top":
909
- blockY = p.font.size + padding.top;
910
+ blockY = p.font.size + textOffsetY;
910
911
  break;
911
912
  case "bottom":
912
- blockY = p.textRect.height - (numLines - 1) * lineHeightPx + padding.top;
913
+ blockY = p.textRect.height - (numLines - 1) * lineHeightPx + textOffsetY;
913
914
  break;
914
915
  case "middle":
915
916
  default:
916
917
  const capHeightRatio = 0.35;
917
918
  const visualOffset = p.font.size * capHeightRatio;
918
- blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + padding.top;
919
+ blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + textOffsetY;
919
920
  break;
920
921
  }
921
922
  const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
@@ -924,17 +925,18 @@ async function buildDrawOps(p) {
924
925
  const highlighterOps = [];
925
926
  let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
926
927
  for (const line of p.lines) {
928
+ const textOffsetX = borderWidth + padding.left;
927
929
  let lineX;
928
930
  switch (p.align.horizontal) {
929
931
  case "left":
930
- lineX = padding.left;
932
+ lineX = textOffsetX;
931
933
  break;
932
934
  case "right":
933
- lineX = p.textRect.width - line.width + padding.left;
935
+ lineX = p.textRect.width - line.width + textOffsetX;
934
936
  break;
935
937
  case "center":
936
938
  default:
937
- lineX = (p.textRect.width - line.width) / 2 + padding.left;
939
+ lineX = (p.textRect.width - line.width) / 2 + textOffsetX;
938
940
  break;
939
941
  }
940
942
  let xCursor = lineX;
@@ -2514,8 +2516,9 @@ async function createTextEngine(opts = {}) {
2514
2516
  width: asset.width ?? width,
2515
2517
  height: asset.height ?? height
2516
2518
  };
2517
- const canvasW = (asset.width ?? width) + padding.left + padding.right;
2518
- const canvasH = (asset.height ?? height) + padding.top + padding.bottom;
2519
+ const borderWidth = asset.border?.width ?? 0;
2520
+ const canvasW = (asset.width ?? width) + padding.left + padding.right + borderWidth * 2;
2521
+ const canvasH = (asset.height ?? height) + padding.top + padding.bottom + borderWidth * 2;
2519
2522
  const canvasPR = pixelRatio;
2520
2523
  let ops0;
2521
2524
  try {
package/dist/entry.node.js CHANGED
@@ -864,19 +864,20 @@ async function buildDrawOps(p) {
864
864
  const scale = p.font.size / upem;
865
865
  const numLines = p.lines.length;
866
866
  const lineHeightPx = p.font.size * p.style.lineHeight;
867
+ const textOffsetY = borderWidth + padding.top;
867
868
  let blockY;
868
869
  switch (p.align.vertical) {
869
870
  case "top":
870
- blockY = p.font.size + padding.top;
871
+ blockY = p.font.size + textOffsetY;
871
872
  break;
872
873
  case "bottom":
873
- blockY = p.textRect.height - (numLines - 1) * lineHeightPx + padding.top;
874
+ blockY = p.textRect.height - (numLines - 1) * lineHeightPx + textOffsetY;
874
875
  break;
875
876
  case "middle":
876
877
  default:
877
878
  const capHeightRatio = 0.35;
878
879
  const visualOffset = p.font.size * capHeightRatio;
879
- blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + padding.top;
880
+ blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + textOffsetY;
880
881
  break;
881
882
  }
882
883
  const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
@@ -885,17 +886,18 @@ async function buildDrawOps(p) {
885
886
  const highlighterOps = [];
886
887
  let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
887
888
  for (const line of p.lines) {
889
+ const textOffsetX = borderWidth + padding.left;
888
890
  let lineX;
889
891
  switch (p.align.horizontal) {
890
892
  case "left":
891
- lineX = padding.left;
893
+ lineX = textOffsetX;
892
894
  break;
893
895
  case "right":
894
- lineX = p.textRect.width - line.width + padding.left;
896
+ lineX = p.textRect.width - line.width + textOffsetX;
895
897
  break;
896
898
  case "center":
897
899
  default:
898
- lineX = (p.textRect.width - line.width) / 2 + padding.left;
900
+ lineX = (p.textRect.width - line.width) / 2 + textOffsetX;
899
901
  break;
900
902
  }
901
903
  let xCursor = lineX;
@@ -2475,8 +2477,9 @@ async function createTextEngine(opts = {}) {
2475
2477
  width: asset.width ?? width,
2476
2478
  height: asset.height ?? height
2477
2479
  };
2478
- const canvasW = (asset.width ?? width) + padding.left + padding.right;
2479
- const canvasH = (asset.height ?? height) + padding.top + padding.bottom;
2480
+ const borderWidth = asset.border?.width ?? 0;
2481
+ const canvasW = (asset.width ?? width) + padding.left + padding.right + borderWidth * 2;
2482
+ const canvasH = (asset.height ?? height) + padding.top + padding.bottom + borderWidth * 2;
2480
2483
  const canvasPR = pixelRatio;
2481
2484
  let ops0;
2482
2485
  try {
package/dist/entry.web.js CHANGED
@@ -869,19 +869,20 @@ async function buildDrawOps(p) {
869
869
  const scale = p.font.size / upem;
870
870
  const numLines = p.lines.length;
871
871
  const lineHeightPx = p.font.size * p.style.lineHeight;
872
+ const textOffsetY = borderWidth + padding.top;
872
873
  let blockY;
873
874
  switch (p.align.vertical) {
874
875
  case "top":
875
- blockY = p.font.size + padding.top;
876
+ blockY = p.font.size + textOffsetY;
876
877
  break;
877
878
  case "bottom":
878
- blockY = p.textRect.height - (numLines - 1) * lineHeightPx + padding.top;
879
+ blockY = p.textRect.height - (numLines - 1) * lineHeightPx + textOffsetY;
879
880
  break;
880
881
  case "middle":
881
882
  default:
882
883
  const capHeightRatio = 0.35;
883
884
  const visualOffset = p.font.size * capHeightRatio;
884
- blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + padding.top;
885
+ blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + textOffsetY;
885
886
  break;
886
887
  }
887
888
  const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
@@ -890,17 +891,18 @@ async function buildDrawOps(p) {
890
891
  const highlighterOps = [];
891
892
  let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
892
893
  for (const line of p.lines) {
894
+ const textOffsetX = borderWidth + padding.left;
893
895
  let lineX;
894
896
  switch (p.align.horizontal) {
895
897
  case "left":
896
- lineX = padding.left;
898
+ lineX = textOffsetX;
897
899
  break;
898
900
  case "right":
899
- lineX = p.textRect.width - line.width + padding.left;
901
+ lineX = p.textRect.width - line.width + textOffsetX;
900
902
  break;
901
903
  case "center":
902
904
  default:
903
- lineX = (p.textRect.width - line.width) / 2 + padding.left;
905
+ lineX = (p.textRect.width - line.width) / 2 + textOffsetX;
904
906
  break;
905
907
  }
906
908
  let xCursor = lineX;
@@ -2186,8 +2188,9 @@ async function createTextEngine(opts = {}) {
2186
2188
  width: asset.width ?? width,
2187
2189
  height: asset.height ?? height
2188
2190
  };
2189
- const canvasW = (asset.width ?? width) + padding.left + padding.right;
2190
- const canvasH = (asset.height ?? height) + padding.top + padding.bottom;
2191
+ const borderWidth = asset.border?.width ?? 0;
2192
+ const canvasW = (asset.width ?? width) + padding.left + padding.right + borderWidth * 2;
2193
+ const canvasH = (asset.height ?? height) + padding.top + padding.bottom + borderWidth * 2;
2191
2194
  const canvasPR = pixelRatio;
2192
2195
  let ops0;
2193
2196
  try {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shotstack/shotstack-canvas",
3
- "version": "1.5.9",
3
+ "version": "1.6.1",
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",