@twick/canvas 0.15.19 → 0.15.20
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.
- package/dist/index.js +33 -21
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +34 -22
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -18,8 +18,8 @@ const DEFAULT_TEXT_PROPS = {
|
|
|
18
18
|
lineWidth: 0
|
|
19
19
|
};
|
|
20
20
|
const DEFAULT_CAPTION_PROPS = {
|
|
21
|
-
/** Font family for caption elements */
|
|
22
|
-
family: "
|
|
21
|
+
/** Font family for caption elements (matches highlight_bg default) */
|
|
22
|
+
family: "Bangers",
|
|
23
23
|
/** Font size in pixels */
|
|
24
24
|
size: 48,
|
|
25
25
|
/** Text fill color */
|
|
@@ -819,40 +819,44 @@ const addCaptionElement = ({
|
|
|
819
819
|
canvasMetadata,
|
|
820
820
|
lockAspectRatio = false
|
|
821
821
|
}) => {
|
|
822
|
-
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;
|
|
822
|
+
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, _K;
|
|
823
|
+
const applyToAll = (captionProps == null ? void 0 : captionProps.applyToAll) ?? false;
|
|
824
|
+
const captionTextColor = ((_a = captionProps == null ? void 0 : captionProps.colors) == null ? void 0 : _a.text) ?? ((_b = captionProps == null ? void 0 : captionProps.color) == null ? void 0 : _b.text);
|
|
823
825
|
const { x, y } = convertToCanvasPosition(
|
|
824
|
-
(
|
|
825
|
-
(
|
|
826
|
+
(applyToAll ? captionProps == null ? void 0 : captionProps.x : ((_c = element.props) == null ? void 0 : _c.x) ?? (captionProps == null ? void 0 : captionProps.x)) ?? 0,
|
|
827
|
+
(applyToAll ? captionProps == null ? void 0 : captionProps.y : ((_d = element.props) == null ? void 0 : _d.y) ?? (captionProps == null ? void 0 : captionProps.y)) ?? 0,
|
|
826
828
|
canvasMetadata
|
|
827
829
|
);
|
|
828
|
-
let width = ((
|
|
829
|
-
if ((
|
|
830
|
+
let width = ((_e = element.props) == null ? void 0 : _e.width) ? element.props.width * canvasMetadata.scaleX : canvasMetadata.width - 2 * MARGIN;
|
|
831
|
+
if ((_f = element.props) == null ? void 0 : _f.maxWidth) {
|
|
830
832
|
width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
|
|
831
833
|
}
|
|
832
|
-
const
|
|
834
|
+
const elementColors = (_g = element.props) == null ? void 0 : _g.colors;
|
|
835
|
+
const resolvedFill = (applyToAll ? captionTextColor : ((_h = element.props) == null ? void 0 : _h.fill) ?? (elementColors == null ? void 0 : elementColors.text) ?? captionTextColor) ?? DEFAULT_CAPTION_PROPS.fill;
|
|
836
|
+
const caption = new fabric.Textbox(((_i = element.props) == null ? void 0 : _i.text) || element.t || "", {
|
|
833
837
|
left: x,
|
|
834
838
|
top: y,
|
|
835
839
|
originX: "center",
|
|
836
840
|
originY: "center",
|
|
837
|
-
angle: ((
|
|
841
|
+
angle: ((_j = element.props) == null ? void 0 : _j.rotation) || 0,
|
|
838
842
|
fontSize: Math.round(
|
|
839
|
-
((
|
|
843
|
+
((applyToAll ? (_k = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _k.size : ((_m = (_l = element.props) == null ? void 0 : _l.font) == null ? void 0 : _m.size) ?? ((_n = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _n.size)) ?? DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
|
|
840
844
|
),
|
|
841
|
-
fontFamily: (
|
|
842
|
-
fill:
|
|
843
|
-
fontWeight: (
|
|
844
|
-
stroke: (
|
|
845
|
-
opacity: (
|
|
845
|
+
fontFamily: (applyToAll ? (_o = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _o.family : ((_q = (_p = element.props) == null ? void 0 : _p.font) == null ? void 0 : _q.family) ?? ((_r = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _r.family)) ?? DEFAULT_CAPTION_PROPS.family,
|
|
846
|
+
fill: resolvedFill,
|
|
847
|
+
fontWeight: (applyToAll ? (_s = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _s.weight : ((_t = element.props) == null ? void 0 : _t.fontWeight) ?? ((_u = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _u.weight)) ?? DEFAULT_CAPTION_PROPS.fontWeight,
|
|
848
|
+
stroke: (applyToAll ? captionProps == null ? void 0 : captionProps.stroke : ((_v = element.props) == null ? void 0 : _v.stroke) ?? (captionProps == null ? void 0 : captionProps.stroke)) ?? DEFAULT_CAPTION_PROPS.stroke,
|
|
849
|
+
opacity: (applyToAll ? captionProps == null ? void 0 : captionProps.opacity : ((_w = element.props) == null ? void 0 : _w.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity)) ?? 1,
|
|
846
850
|
width,
|
|
847
851
|
splitByGrapheme: false,
|
|
848
|
-
textAlign: ((
|
|
852
|
+
textAlign: ((_x = element.props) == null ? void 0 : _x.textAlign) ?? "center",
|
|
849
853
|
shadow: new fabric.Shadow({
|
|
850
|
-
offsetX: (
|
|
851
|
-
offsetY: (
|
|
852
|
-
blur: (
|
|
853
|
-
color: (
|
|
854
|
+
offsetX: (applyToAll ? (_y = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _y[0] : ((_A = (_z = element.props) == null ? void 0 : _z.shadowOffset) == null ? void 0 : _A[0]) ?? ((_B = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _B[0])) ?? ((_C = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _C[0]),
|
|
855
|
+
offsetY: (applyToAll ? (_D = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _D[1] : ((_F = (_E = element.props) == null ? void 0 : _E.shadowOffset) == null ? void 0 : _F[1]) ?? ((_G = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _G[1])) ?? ((_H = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _H[1]),
|
|
856
|
+
blur: (applyToAll ? captionProps == null ? void 0 : captionProps.shadowBlur : ((_I = element.props) == null ? void 0 : _I.shadowBlur) ?? (captionProps == null ? void 0 : captionProps.shadowBlur)) ?? DEFAULT_CAPTION_PROPS.shadowBlur,
|
|
857
|
+
color: (applyToAll ? captionProps == null ? void 0 : captionProps.shadowColor : ((_J = element.props) == null ? void 0 : _J.shadowColor) ?? (captionProps == null ? void 0 : captionProps.shadowColor)) ?? DEFAULT_CAPTION_PROPS.shadowColor
|
|
854
858
|
}),
|
|
855
|
-
strokeWidth: (
|
|
859
|
+
strokeWidth: (applyToAll ? captionProps == null ? void 0 : captionProps.lineWidth : ((_K = element.props) == null ? void 0 : _K.lineWidth) ?? (captionProps == null ? void 0 : captionProps.lineWidth)) ?? DEFAULT_CAPTION_PROPS.lineWidth
|
|
856
860
|
});
|
|
857
861
|
caption.set("id", element.id);
|
|
858
862
|
caption.set("zIndex", index);
|
|
@@ -1943,10 +1947,18 @@ const useTwickCanvas = ({
|
|
|
1943
1947
|
const sendToBack = (elementId) => applyZOrder(elementId, "back");
|
|
1944
1948
|
const bringForward = (elementId) => applyZOrder(elementId, "forward");
|
|
1945
1949
|
const sendBackward = (elementId) => applyZOrder(elementId, "backward");
|
|
1950
|
+
const setBackgroundColor = react.useCallback((color) => {
|
|
1951
|
+
const canvas = twickCanvasRef.current;
|
|
1952
|
+
if (canvas) {
|
|
1953
|
+
canvas.backgroundColor = color;
|
|
1954
|
+
canvas.requestRenderAll();
|
|
1955
|
+
}
|
|
1956
|
+
}, []);
|
|
1946
1957
|
return {
|
|
1947
1958
|
twickCanvas,
|
|
1948
1959
|
buildCanvas,
|
|
1949
1960
|
resizeCanvas,
|
|
1961
|
+
setBackgroundColor,
|
|
1950
1962
|
onVideoSizeChange,
|
|
1951
1963
|
addWatermarkToCanvas,
|
|
1952
1964
|
addElementToCanvas,
|