ugcinc-render 1.5.9 → 1.5.11

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 (5) hide show
  1. package/dist/index.d.mts +12 -12
  2. package/dist/index.d.ts +12 -12
  3. package/dist/index.js +53 -66
  4. package/dist/index.mjs +53 -66
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -290,10 +290,10 @@ interface ImageEditorElement {
290
290
  paddingRight?: number;
291
291
  paddingBottom?: number;
292
292
  paddingLeft?: number;
293
- multiLinePaddingTop?: number;
294
- multiLinePaddingRight?: number;
295
- multiLinePaddingBottom?: number;
296
- multiLinePaddingLeft?: number;
293
+ multiLineExtraPaddingTop?: number;
294
+ multiLineExtraPaddingRight?: number;
295
+ multiLineExtraPaddingBottom?: number;
296
+ multiLineExtraPaddingLeft?: number;
297
297
  /** When true, box shrinks to fit content (width becomes max width) */
298
298
  autoWidth?: boolean;
299
299
  /** Which side the box anchors to when autoWidth is true */
@@ -622,14 +622,14 @@ interface TextSegment extends VisualSegment {
622
622
  paddingBottom?: number;
623
623
  /** Left padding in pixels (overrides uniform padding) */
624
624
  paddingLeft?: number;
625
- /** Top padding for multi-line text (2+ lines) */
626
- multiLinePaddingTop?: number;
627
- /** Right padding for multi-line text (2+ lines) */
628
- multiLinePaddingRight?: number;
629
- /** Bottom padding for multi-line text (2+ lines) */
630
- multiLinePaddingBottom?: number;
631
- /** Left padding for multi-line text (2+ lines) */
632
- multiLinePaddingLeft?: number;
625
+ /** Extra top padding added when text has 2+ lines */
626
+ multiLineExtraPaddingTop?: number;
627
+ /** Extra right padding added when text has 2+ lines */
628
+ multiLineExtraPaddingRight?: number;
629
+ /** Extra bottom padding added when text has 2+ lines */
630
+ multiLineExtraPaddingBottom?: number;
631
+ /** Extra left padding added when text has 2+ lines */
632
+ multiLineExtraPaddingLeft?: number;
633
633
  /** Font family (default: 'arial') */
634
634
  fontType?: FontType;
635
635
  /** Font size in pixels (default: 40) */
package/dist/index.d.ts CHANGED
@@ -290,10 +290,10 @@ interface ImageEditorElement {
290
290
  paddingRight?: number;
291
291
  paddingBottom?: number;
292
292
  paddingLeft?: number;
293
- multiLinePaddingTop?: number;
294
- multiLinePaddingRight?: number;
295
- multiLinePaddingBottom?: number;
296
- multiLinePaddingLeft?: number;
293
+ multiLineExtraPaddingTop?: number;
294
+ multiLineExtraPaddingRight?: number;
295
+ multiLineExtraPaddingBottom?: number;
296
+ multiLineExtraPaddingLeft?: number;
297
297
  /** When true, box shrinks to fit content (width becomes max width) */
298
298
  autoWidth?: boolean;
299
299
  /** Which side the box anchors to when autoWidth is true */
@@ -622,14 +622,14 @@ interface TextSegment extends VisualSegment {
622
622
  paddingBottom?: number;
623
623
  /** Left padding in pixels (overrides uniform padding) */
624
624
  paddingLeft?: number;
625
- /** Top padding for multi-line text (2+ lines) */
626
- multiLinePaddingTop?: number;
627
- /** Right padding for multi-line text (2+ lines) */
628
- multiLinePaddingRight?: number;
629
- /** Bottom padding for multi-line text (2+ lines) */
630
- multiLinePaddingBottom?: number;
631
- /** Left padding for multi-line text (2+ lines) */
632
- multiLinePaddingLeft?: number;
625
+ /** Extra top padding added when text has 2+ lines */
626
+ multiLineExtraPaddingTop?: number;
627
+ /** Extra right padding added when text has 2+ lines */
628
+ multiLineExtraPaddingRight?: number;
629
+ /** Extra bottom padding added when text has 2+ lines */
630
+ multiLineExtraPaddingBottom?: number;
631
+ /** Extra left padding added when text has 2+ lines */
632
+ multiLineExtraPaddingLeft?: number;
633
633
  /** Font family (default: 'arial') */
634
634
  fontType?: FontType;
635
635
  /** Font size in pixels (default: 40) */
package/dist/index.js CHANGED
@@ -420,11 +420,11 @@ function TextElement({ segment, scale = 1 }) {
420
420
  const basePaddingRight = segment.paddingRight !== void 0 ? segment.paddingRight * scale : uniformPadding;
421
421
  const basePaddingBottom = segment.paddingBottom !== void 0 ? segment.paddingBottom * scale : uniformPadding;
422
422
  const basePaddingLeft = segment.paddingLeft !== void 0 ? segment.paddingLeft * scale : uniformPadding;
423
- const multiLinePaddingTop = segment.multiLinePaddingTop !== void 0 ? segment.multiLinePaddingTop * scale : void 0;
424
- const multiLinePaddingRight = segment.multiLinePaddingRight !== void 0 ? segment.multiLinePaddingRight * scale : void 0;
425
- const multiLinePaddingBottom = segment.multiLinePaddingBottom !== void 0 ? segment.multiLinePaddingBottom * scale : void 0;
426
- const multiLinePaddingLeft = segment.multiLinePaddingLeft !== void 0 ? segment.multiLinePaddingLeft * scale : void 0;
427
- const hasMultiLinePadding = multiLinePaddingTop !== void 0 || multiLinePaddingRight !== void 0 || multiLinePaddingBottom !== void 0 || multiLinePaddingLeft !== void 0;
423
+ const extraPaddingTop = (segment.multiLineExtraPaddingTop ?? 0) * scale;
424
+ const extraPaddingRight = (segment.multiLineExtraPaddingRight ?? 0) * scale;
425
+ const extraPaddingBottom = (segment.multiLineExtraPaddingBottom ?? 0) * scale;
426
+ const extraPaddingLeft = (segment.multiLineExtraPaddingLeft ?? 0) * scale;
427
+ const hasExtraPadding = extraPaddingTop > 0 || extraPaddingRight > 0 || extraPaddingBottom > 0 || extraPaddingLeft > 0;
428
428
  const x = segment.xOffset * scale;
429
429
  const y = segment.yOffset * scale;
430
430
  const width = segment.width * scale;
@@ -436,22 +436,22 @@ function TextElement({ segment, scale = 1 }) {
436
436
  const backgroundOpacity = segment.backgroundOpacity ?? TEXT_DEFAULTS.backgroundOpacity;
437
437
  const backgroundBorderRadius = segment.backgroundBorderRadius;
438
438
  const fontFamily = getFontFamily(fontType);
439
- const { autoWidthResult, finalPaddingTop, finalPaddingRight, finalPaddingBottom, finalPaddingLeft, isMultiLine } = (0, import_react.useMemo)(() => {
440
- let effectivePaddingTop = basePaddingTop;
441
- let effectivePaddingRight = basePaddingRight;
442
- let effectivePaddingBottom = basePaddingBottom;
443
- let effectivePaddingLeft = basePaddingLeft;
444
- if (!autoWidth && !hasMultiLinePadding) {
439
+ const { calculatedWidth, calculatedLines, paddingTop, paddingRight, paddingBottom, paddingLeft } = (0, import_react.useMemo)(() => {
440
+ let finalPaddingTop = basePaddingTop;
441
+ let finalPaddingRight = basePaddingRight;
442
+ let finalPaddingBottom = basePaddingBottom;
443
+ let finalPaddingLeft = basePaddingLeft;
444
+ if (!autoWidth && !hasExtraPadding) {
445
445
  return {
446
- autoWidthResult: null,
447
- finalPaddingTop: effectivePaddingTop,
448
- finalPaddingRight: effectivePaddingRight,
449
- finalPaddingBottom: effectivePaddingBottom,
450
- finalPaddingLeft: effectivePaddingLeft,
451
- isMultiLine: false
446
+ calculatedWidth: width,
447
+ calculatedLines: [segment.text],
448
+ paddingTop: finalPaddingTop,
449
+ paddingRight: finalPaddingRight,
450
+ paddingBottom: finalPaddingBottom,
451
+ paddingLeft: finalPaddingLeft
452
452
  };
453
453
  }
454
- const firstPassResult = calculateAutoWidthAndLines({
454
+ const baseResult = calculateAutoWidthAndLines({
455
455
  text: segment.text,
456
456
  maxWidth: width,
457
457
  paddingLeft: basePaddingLeft,
@@ -462,41 +462,34 @@ function TextElement({ segment, scale = 1 }) {
462
462
  letterSpacing,
463
463
  lineHeight
464
464
  });
465
- const multiLine = firstPassResult.lines.length >= 2;
466
- if (multiLine && hasMultiLinePadding) {
467
- effectivePaddingTop = multiLinePaddingTop ?? basePaddingTop;
468
- effectivePaddingRight = multiLinePaddingRight ?? basePaddingRight;
469
- effectivePaddingBottom = multiLinePaddingBottom ?? basePaddingBottom;
470
- effectivePaddingLeft = multiLinePaddingLeft ?? basePaddingLeft;
471
- if (effectivePaddingLeft !== basePaddingLeft || effectivePaddingRight !== basePaddingRight) {
472
- const secondPassResult = calculateAutoWidthAndLines({
473
- text: segment.text,
474
- maxWidth: width,
475
- paddingLeft: effectivePaddingLeft,
476
- paddingRight: effectivePaddingRight,
477
- fontSize,
478
- fontWeight,
479
- fontFamily,
480
- letterSpacing,
481
- lineHeight
482
- });
483
- return {
484
- autoWidthResult: autoWidth ? secondPassResult : null,
485
- finalPaddingTop: effectivePaddingTop,
486
- finalPaddingRight: effectivePaddingRight,
487
- finalPaddingBottom: effectivePaddingBottom,
488
- finalPaddingLeft: effectivePaddingLeft,
489
- isMultiLine: secondPassResult.lines.length >= 2
490
- };
491
- }
465
+ const isMultiLine = baseResult.lines.length >= 2;
466
+ if (isMultiLine) {
467
+ finalPaddingTop = basePaddingTop + extraPaddingTop;
468
+ finalPaddingRight = basePaddingRight + extraPaddingRight;
469
+ finalPaddingBottom = basePaddingBottom + extraPaddingBottom;
470
+ finalPaddingLeft = basePaddingLeft + extraPaddingLeft;
471
+ }
472
+ let finalResult = baseResult;
473
+ if (isMultiLine && (extraPaddingLeft > 0 || extraPaddingRight > 0)) {
474
+ finalResult = calculateAutoWidthAndLines({
475
+ text: segment.text,
476
+ maxWidth: width,
477
+ paddingLeft: finalPaddingLeft,
478
+ paddingRight: finalPaddingRight,
479
+ fontSize,
480
+ fontWeight,
481
+ fontFamily,
482
+ letterSpacing,
483
+ lineHeight
484
+ });
492
485
  }
493
486
  return {
494
- autoWidthResult: autoWidth ? firstPassResult : null,
495
- finalPaddingTop: effectivePaddingTop,
496
- finalPaddingRight: effectivePaddingRight,
497
- finalPaddingBottom: effectivePaddingBottom,
498
- finalPaddingLeft: effectivePaddingLeft,
499
- isMultiLine: multiLine
487
+ calculatedWidth: autoWidth ? finalResult.width : width,
488
+ calculatedLines: autoWidth ? finalResult.lines : [segment.text],
489
+ paddingTop: finalPaddingTop,
490
+ paddingRight: finalPaddingRight,
491
+ paddingBottom: finalPaddingBottom,
492
+ paddingLeft: finalPaddingLeft
500
493
  };
501
494
  }, [
502
495
  autoWidth,
@@ -506,23 +499,17 @@ function TextElement({ segment, scale = 1 }) {
506
499
  basePaddingRight,
507
500
  basePaddingBottom,
508
501
  basePaddingLeft,
509
- multiLinePaddingTop,
510
- multiLinePaddingRight,
511
- multiLinePaddingBottom,
512
- multiLinePaddingLeft,
513
- hasMultiLinePadding,
502
+ extraPaddingTop,
503
+ extraPaddingRight,
504
+ extraPaddingBottom,
505
+ extraPaddingLeft,
506
+ hasExtraPadding,
514
507
  fontSize,
515
508
  fontWeight,
516
509
  fontFamily,
517
510
  letterSpacing,
518
511
  lineHeight
519
512
  ]);
520
- const calculatedWidth = autoWidthResult?.width ?? width;
521
- const calculatedLines = autoWidthResult?.lines ?? [segment.text];
522
- const paddingTop = finalPaddingTop;
523
- const paddingRight = finalPaddingRight;
524
- const paddingBottom = finalPaddingBottom;
525
- const paddingLeft = finalPaddingLeft;
526
513
  const borderRadiusStyle = (0, import_react.useMemo)(() => {
527
514
  if (!backgroundBorderRadius) return void 0;
528
515
  const radii = getBorderRadii(backgroundBorderRadius);
@@ -1189,10 +1176,10 @@ function elementToTextSegment(elem) {
1189
1176
  paddingRight: elem.paddingRight,
1190
1177
  paddingBottom: elem.paddingBottom,
1191
1178
  paddingLeft: elem.paddingLeft,
1192
- multiLinePaddingTop: elem.multiLinePaddingTop,
1193
- multiLinePaddingRight: elem.multiLinePaddingRight,
1194
- multiLinePaddingBottom: elem.multiLinePaddingBottom,
1195
- multiLinePaddingLeft: elem.multiLinePaddingLeft,
1179
+ multiLineExtraPaddingTop: elem.multiLineExtraPaddingTop,
1180
+ multiLineExtraPaddingRight: elem.multiLineExtraPaddingRight,
1181
+ multiLineExtraPaddingBottom: elem.multiLineExtraPaddingBottom,
1182
+ multiLineExtraPaddingLeft: elem.multiLineExtraPaddingLeft,
1196
1183
  autoWidth: elem.autoWidth,
1197
1184
  boxAlign: elem.boxAlign
1198
1185
  };
package/dist/index.mjs CHANGED
@@ -336,11 +336,11 @@ function TextElement({ segment, scale = 1 }) {
336
336
  const basePaddingRight = segment.paddingRight !== void 0 ? segment.paddingRight * scale : uniformPadding;
337
337
  const basePaddingBottom = segment.paddingBottom !== void 0 ? segment.paddingBottom * scale : uniformPadding;
338
338
  const basePaddingLeft = segment.paddingLeft !== void 0 ? segment.paddingLeft * scale : uniformPadding;
339
- const multiLinePaddingTop = segment.multiLinePaddingTop !== void 0 ? segment.multiLinePaddingTop * scale : void 0;
340
- const multiLinePaddingRight = segment.multiLinePaddingRight !== void 0 ? segment.multiLinePaddingRight * scale : void 0;
341
- const multiLinePaddingBottom = segment.multiLinePaddingBottom !== void 0 ? segment.multiLinePaddingBottom * scale : void 0;
342
- const multiLinePaddingLeft = segment.multiLinePaddingLeft !== void 0 ? segment.multiLinePaddingLeft * scale : void 0;
343
- const hasMultiLinePadding = multiLinePaddingTop !== void 0 || multiLinePaddingRight !== void 0 || multiLinePaddingBottom !== void 0 || multiLinePaddingLeft !== void 0;
339
+ const extraPaddingTop = (segment.multiLineExtraPaddingTop ?? 0) * scale;
340
+ const extraPaddingRight = (segment.multiLineExtraPaddingRight ?? 0) * scale;
341
+ const extraPaddingBottom = (segment.multiLineExtraPaddingBottom ?? 0) * scale;
342
+ const extraPaddingLeft = (segment.multiLineExtraPaddingLeft ?? 0) * scale;
343
+ const hasExtraPadding = extraPaddingTop > 0 || extraPaddingRight > 0 || extraPaddingBottom > 0 || extraPaddingLeft > 0;
344
344
  const x = segment.xOffset * scale;
345
345
  const y = segment.yOffset * scale;
346
346
  const width = segment.width * scale;
@@ -352,22 +352,22 @@ function TextElement({ segment, scale = 1 }) {
352
352
  const backgroundOpacity = segment.backgroundOpacity ?? TEXT_DEFAULTS.backgroundOpacity;
353
353
  const backgroundBorderRadius = segment.backgroundBorderRadius;
354
354
  const fontFamily = getFontFamily(fontType);
355
- const { autoWidthResult, finalPaddingTop, finalPaddingRight, finalPaddingBottom, finalPaddingLeft, isMultiLine } = useMemo(() => {
356
- let effectivePaddingTop = basePaddingTop;
357
- let effectivePaddingRight = basePaddingRight;
358
- let effectivePaddingBottom = basePaddingBottom;
359
- let effectivePaddingLeft = basePaddingLeft;
360
- if (!autoWidth && !hasMultiLinePadding) {
355
+ const { calculatedWidth, calculatedLines, paddingTop, paddingRight, paddingBottom, paddingLeft } = useMemo(() => {
356
+ let finalPaddingTop = basePaddingTop;
357
+ let finalPaddingRight = basePaddingRight;
358
+ let finalPaddingBottom = basePaddingBottom;
359
+ let finalPaddingLeft = basePaddingLeft;
360
+ if (!autoWidth && !hasExtraPadding) {
361
361
  return {
362
- autoWidthResult: null,
363
- finalPaddingTop: effectivePaddingTop,
364
- finalPaddingRight: effectivePaddingRight,
365
- finalPaddingBottom: effectivePaddingBottom,
366
- finalPaddingLeft: effectivePaddingLeft,
367
- isMultiLine: false
362
+ calculatedWidth: width,
363
+ calculatedLines: [segment.text],
364
+ paddingTop: finalPaddingTop,
365
+ paddingRight: finalPaddingRight,
366
+ paddingBottom: finalPaddingBottom,
367
+ paddingLeft: finalPaddingLeft
368
368
  };
369
369
  }
370
- const firstPassResult = calculateAutoWidthAndLines({
370
+ const baseResult = calculateAutoWidthAndLines({
371
371
  text: segment.text,
372
372
  maxWidth: width,
373
373
  paddingLeft: basePaddingLeft,
@@ -378,41 +378,34 @@ function TextElement({ segment, scale = 1 }) {
378
378
  letterSpacing,
379
379
  lineHeight
380
380
  });
381
- const multiLine = firstPassResult.lines.length >= 2;
382
- if (multiLine && hasMultiLinePadding) {
383
- effectivePaddingTop = multiLinePaddingTop ?? basePaddingTop;
384
- effectivePaddingRight = multiLinePaddingRight ?? basePaddingRight;
385
- effectivePaddingBottom = multiLinePaddingBottom ?? basePaddingBottom;
386
- effectivePaddingLeft = multiLinePaddingLeft ?? basePaddingLeft;
387
- if (effectivePaddingLeft !== basePaddingLeft || effectivePaddingRight !== basePaddingRight) {
388
- const secondPassResult = calculateAutoWidthAndLines({
389
- text: segment.text,
390
- maxWidth: width,
391
- paddingLeft: effectivePaddingLeft,
392
- paddingRight: effectivePaddingRight,
393
- fontSize,
394
- fontWeight,
395
- fontFamily,
396
- letterSpacing,
397
- lineHeight
398
- });
399
- return {
400
- autoWidthResult: autoWidth ? secondPassResult : null,
401
- finalPaddingTop: effectivePaddingTop,
402
- finalPaddingRight: effectivePaddingRight,
403
- finalPaddingBottom: effectivePaddingBottom,
404
- finalPaddingLeft: effectivePaddingLeft,
405
- isMultiLine: secondPassResult.lines.length >= 2
406
- };
407
- }
381
+ const isMultiLine = baseResult.lines.length >= 2;
382
+ if (isMultiLine) {
383
+ finalPaddingTop = basePaddingTop + extraPaddingTop;
384
+ finalPaddingRight = basePaddingRight + extraPaddingRight;
385
+ finalPaddingBottom = basePaddingBottom + extraPaddingBottom;
386
+ finalPaddingLeft = basePaddingLeft + extraPaddingLeft;
387
+ }
388
+ let finalResult = baseResult;
389
+ if (isMultiLine && (extraPaddingLeft > 0 || extraPaddingRight > 0)) {
390
+ finalResult = calculateAutoWidthAndLines({
391
+ text: segment.text,
392
+ maxWidth: width,
393
+ paddingLeft: finalPaddingLeft,
394
+ paddingRight: finalPaddingRight,
395
+ fontSize,
396
+ fontWeight,
397
+ fontFamily,
398
+ letterSpacing,
399
+ lineHeight
400
+ });
408
401
  }
409
402
  return {
410
- autoWidthResult: autoWidth ? firstPassResult : null,
411
- finalPaddingTop: effectivePaddingTop,
412
- finalPaddingRight: effectivePaddingRight,
413
- finalPaddingBottom: effectivePaddingBottom,
414
- finalPaddingLeft: effectivePaddingLeft,
415
- isMultiLine: multiLine
403
+ calculatedWidth: autoWidth ? finalResult.width : width,
404
+ calculatedLines: autoWidth ? finalResult.lines : [segment.text],
405
+ paddingTop: finalPaddingTop,
406
+ paddingRight: finalPaddingRight,
407
+ paddingBottom: finalPaddingBottom,
408
+ paddingLeft: finalPaddingLeft
416
409
  };
417
410
  }, [
418
411
  autoWidth,
@@ -422,23 +415,17 @@ function TextElement({ segment, scale = 1 }) {
422
415
  basePaddingRight,
423
416
  basePaddingBottom,
424
417
  basePaddingLeft,
425
- multiLinePaddingTop,
426
- multiLinePaddingRight,
427
- multiLinePaddingBottom,
428
- multiLinePaddingLeft,
429
- hasMultiLinePadding,
418
+ extraPaddingTop,
419
+ extraPaddingRight,
420
+ extraPaddingBottom,
421
+ extraPaddingLeft,
422
+ hasExtraPadding,
430
423
  fontSize,
431
424
  fontWeight,
432
425
  fontFamily,
433
426
  letterSpacing,
434
427
  lineHeight
435
428
  ]);
436
- const calculatedWidth = autoWidthResult?.width ?? width;
437
- const calculatedLines = autoWidthResult?.lines ?? [segment.text];
438
- const paddingTop = finalPaddingTop;
439
- const paddingRight = finalPaddingRight;
440
- const paddingBottom = finalPaddingBottom;
441
- const paddingLeft = finalPaddingLeft;
442
429
  const borderRadiusStyle = useMemo(() => {
443
430
  if (!backgroundBorderRadius) return void 0;
444
431
  const radii = getBorderRadii(backgroundBorderRadius);
@@ -1105,10 +1092,10 @@ function elementToTextSegment(elem) {
1105
1092
  paddingRight: elem.paddingRight,
1106
1093
  paddingBottom: elem.paddingBottom,
1107
1094
  paddingLeft: elem.paddingLeft,
1108
- multiLinePaddingTop: elem.multiLinePaddingTop,
1109
- multiLinePaddingRight: elem.multiLinePaddingRight,
1110
- multiLinePaddingBottom: elem.multiLinePaddingBottom,
1111
- multiLinePaddingLeft: elem.multiLinePaddingLeft,
1095
+ multiLineExtraPaddingTop: elem.multiLineExtraPaddingTop,
1096
+ multiLineExtraPaddingRight: elem.multiLineExtraPaddingRight,
1097
+ multiLineExtraPaddingBottom: elem.multiLineExtraPaddingBottom,
1098
+ multiLineExtraPaddingLeft: elem.multiLineExtraPaddingLeft,
1112
1099
  autoWidth: elem.autoWidth,
1113
1100
  boxAlign: elem.boxAlign
1114
1101
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ugcinc-render",
3
- "version": "1.5.9",
3
+ "version": "1.5.11",
4
4
  "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",