@twick/canvas 0.15.8 → 0.15.10

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.js +25 -17
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +26 -18
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -595,6 +595,7 @@ const getObjectFitSize = (objectFit, elementSize, containerSize) => {
595
595
  };
596
596
  }
597
597
  };
598
+ const MARGIN = 10;
598
599
  const addTextElement = ({
599
600
  element,
600
601
  index,
@@ -607,7 +608,7 @@ const addTextElement = ({
607
608
  ((_b = element.props) == null ? void 0 : _b.y) || 0,
608
609
  canvasMetadata
609
610
  );
610
- let width = ((_c = element.props) == null ? void 0 : _c.width) ? element.props.width * canvasMetadata.scaleX : canvasMetadata.width;
611
+ let width = ((_c = element.props) == null ? void 0 : _c.width) ? element.props.width * canvasMetadata.scaleX : canvasMetadata.width - 2 * MARGIN;
611
612
  if ((_d = element.props) == null ? void 0 : _d.maxWidth) {
612
613
  width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
613
614
  }
@@ -683,33 +684,40 @@ const addCaptionElement = ({
683
684
  captionProps,
684
685
  canvasMetadata
685
686
  }) => {
686
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G;
687
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J;
687
688
  const { x, y } = convertToCanvasPosition(
688
- ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.x : (_a = element.props) == null ? void 0 : _a.x) ?? 0,
689
- ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.y : (_b = element.props) == null ? void 0 : _b.y) ?? 0,
689
+ ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.x : ((_a = element.props) == null ? void 0 : _a.x) ?? (captionProps == null ? void 0 : captionProps.x)) ?? 0,
690
+ ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.y : ((_b = element.props) == null ? void 0 : _b.y) ?? (captionProps == null ? void 0 : captionProps.y)) ?? 0,
690
691
  canvasMetadata
691
692
  );
692
- const caption = new fabric.FabricText(((_c = element.props) == null ? void 0 : _c.text) || element.t || "", {
693
+ let width = ((_c = element.props) == null ? void 0 : _c.width) ? element.props.width * canvasMetadata.scaleX : canvasMetadata.width - 2 * MARGIN;
694
+ if ((_d = element.props) == null ? void 0 : _d.maxWidth) {
695
+ width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
696
+ }
697
+ const caption = new fabric.Textbox(((_e = element.props) == null ? void 0 : _e.text) || element.t || "", {
693
698
  left: x,
694
699
  top: y,
695
700
  originX: "center",
696
701
  originY: "center",
697
- angle: ((_d = element.props) == null ? void 0 : _d.rotation) || 0,
702
+ angle: ((_f = element.props) == null ? void 0 : _f.rotation) || 0,
698
703
  fontSize: Math.round(
699
- (((captionProps == null ? void 0 : captionProps.applyToAll) ? (_e = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _e.size : ((_g = (_f = element.props) == null ? void 0 : _f.font) == null ? void 0 : _g.size) ?? ((_h = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _h.size)) ?? DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
704
+ (((captionProps == null ? void 0 : captionProps.applyToAll) ? (_g = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _g.size : ((_i = (_h = element.props) == null ? void 0 : _h.font) == null ? void 0 : _i.size) ?? ((_j = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _j.size)) ?? DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
700
705
  ),
701
- fontFamily: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_i = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _i.family : ((_k = (_j = element.props) == null ? void 0 : _j.font) == null ? void 0 : _k.family) ?? ((_l = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _l.family)) ?? DEFAULT_CAPTION_PROPS.family,
702
- fill: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_m = captionProps.color) == null ? void 0 : _m.text : ((_n = element.props) == null ? void 0 : _n.fill) ?? ((_o = captionProps.color) == null ? void 0 : _o.text)) ?? DEFAULT_CAPTION_PROPS.fill,
703
- fontWeight: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_p = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _p.weight : ((_q = element.props) == null ? void 0 : _q.fontWeight) ?? ((_r = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _r.weight)) ?? DEFAULT_CAPTION_PROPS.fontWeight,
704
- stroke: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.stroke : ((_s = element.props) == null ? void 0 : _s.stroke) ?? (captionProps == null ? void 0 : captionProps.stroke)) ?? DEFAULT_CAPTION_PROPS.stroke,
705
- opacity: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.opacity : ((_t = element.props) == null ? void 0 : _t.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity)) ?? 1,
706
+ fontFamily: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_k = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _k.family : ((_m = (_l = element.props) == null ? void 0 : _l.font) == null ? void 0 : _m.family) ?? ((_n = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _n.family)) ?? DEFAULT_CAPTION_PROPS.family,
707
+ fill: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_o = captionProps.color) == null ? void 0 : _o.text : ((_p = element.props) == null ? void 0 : _p.fill) ?? ((_q = captionProps.color) == null ? void 0 : _q.text)) ?? DEFAULT_CAPTION_PROPS.fill,
708
+ fontWeight: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_r = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _r.weight : ((_s = element.props) == null ? void 0 : _s.fontWeight) ?? ((_t = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _t.weight)) ?? DEFAULT_CAPTION_PROPS.fontWeight,
709
+ stroke: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.stroke : ((_u = element.props) == null ? void 0 : _u.stroke) ?? (captionProps == null ? void 0 : captionProps.stroke)) ?? DEFAULT_CAPTION_PROPS.stroke,
710
+ opacity: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.opacity : ((_v = element.props) == null ? void 0 : _v.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity)) ?? 1,
711
+ width,
712
+ splitByGrapheme: false,
713
+ textAlign: ((_w = element.props) == null ? void 0 : _w.textAlign) ?? "center",
706
714
  shadow: new fabric.Shadow({
707
- offsetX: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_u = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _u[0] : ((_w = (_v = element.props) == null ? void 0 : _v.shadowOffset) == null ? void 0 : _w[0]) ?? ((_x = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _x[0])) ?? ((_y = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _y[0]),
708
- offsetY: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_z = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _z[1] : ((_B = (_A = element.props) == null ? void 0 : _A.shadowOffset) == null ? void 0 : _B[1]) ?? ((_C = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _C[1])) ?? ((_D = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _D[1]),
709
- blur: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.shadowBlur : ((_E = element.props) == null ? void 0 : _E.shadowBlur) ?? (captionProps == null ? void 0 : captionProps.shadowBlur)) ?? DEFAULT_CAPTION_PROPS.shadowBlur,
710
- color: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.shadowColor : ((_F = element.props) == null ? void 0 : _F.shadowColor) ?? (captionProps == null ? void 0 : captionProps.shadowColor)) ?? DEFAULT_CAPTION_PROPS.shadowColor
715
+ offsetX: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_x = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _x[0] : ((_z = (_y = element.props) == null ? void 0 : _y.shadowOffset) == null ? void 0 : _z[0]) ?? ((_A = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _A[0])) ?? ((_B = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _B[0]),
716
+ offsetY: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_C = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _C[1] : ((_E = (_D = element.props) == null ? void 0 : _D.shadowOffset) == null ? void 0 : _E[1]) ?? ((_F = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _F[1])) ?? ((_G = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _G[1]),
717
+ blur: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.shadowBlur : ((_H = element.props) == null ? void 0 : _H.shadowBlur) ?? (captionProps == null ? void 0 : captionProps.shadowBlur)) ?? DEFAULT_CAPTION_PROPS.shadowBlur,
718
+ color: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.shadowColor : ((_I = element.props) == null ? void 0 : _I.shadowColor) ?? (captionProps == null ? void 0 : captionProps.shadowColor)) ?? DEFAULT_CAPTION_PROPS.shadowColor
711
719
  }),
712
- strokeWidth: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.lineWidth : ((_G = element.props) == null ? void 0 : _G.lineWidth) ?? (captionProps == null ? void 0 : captionProps.lineWidth)) ?? DEFAULT_CAPTION_PROPS.lineWidth
720
+ strokeWidth: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.lineWidth : ((_J = element.props) == null ? void 0 : _J.lineWidth) ?? (captionProps == null ? void 0 : captionProps.lineWidth)) ?? DEFAULT_CAPTION_PROPS.lineWidth
713
721
  });
714
722
  caption.set("id", element.id);
715
723
  caption.set("zIndex", index);