@twick/canvas 0.15.18 → 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.mjs
CHANGED
|
@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
4
|
import { Canvas, Control, controlsUtils, FabricImage, Rect, Textbox, Shadow, Group, Circle, ActiveSelection } from "fabric";
|
|
5
|
-
import { useState, useRef } from "react";
|
|
5
|
+
import { useState, useRef, useCallback } from "react";
|
|
6
6
|
const DEFAULT_TEXT_PROPS = {
|
|
7
7
|
/** Font family for text elements */
|
|
8
8
|
family: "Poppins",
|
|
@@ -16,8 +16,8 @@ const DEFAULT_TEXT_PROPS = {
|
|
|
16
16
|
lineWidth: 0
|
|
17
17
|
};
|
|
18
18
|
const DEFAULT_CAPTION_PROPS = {
|
|
19
|
-
/** Font family for caption elements */
|
|
20
|
-
family: "
|
|
19
|
+
/** Font family for caption elements (matches highlight_bg default) */
|
|
20
|
+
family: "Bangers",
|
|
21
21
|
/** Font size in pixels */
|
|
22
22
|
size: 48,
|
|
23
23
|
/** Text fill color */
|
|
@@ -817,40 +817,44 @@ const addCaptionElement = ({
|
|
|
817
817
|
canvasMetadata,
|
|
818
818
|
lockAspectRatio = false
|
|
819
819
|
}) => {
|
|
820
|
-
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;
|
|
820
|
+
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;
|
|
821
|
+
const applyToAll = (captionProps == null ? void 0 : captionProps.applyToAll) ?? false;
|
|
822
|
+
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);
|
|
821
823
|
const { x, y } = convertToCanvasPosition(
|
|
822
|
-
(
|
|
823
|
-
(
|
|
824
|
+
(applyToAll ? captionProps == null ? void 0 : captionProps.x : ((_c = element.props) == null ? void 0 : _c.x) ?? (captionProps == null ? void 0 : captionProps.x)) ?? 0,
|
|
825
|
+
(applyToAll ? captionProps == null ? void 0 : captionProps.y : ((_d = element.props) == null ? void 0 : _d.y) ?? (captionProps == null ? void 0 : captionProps.y)) ?? 0,
|
|
824
826
|
canvasMetadata
|
|
825
827
|
);
|
|
826
|
-
let width = ((
|
|
827
|
-
if ((
|
|
828
|
+
let width = ((_e = element.props) == null ? void 0 : _e.width) ? element.props.width * canvasMetadata.scaleX : canvasMetadata.width - 2 * MARGIN;
|
|
829
|
+
if ((_f = element.props) == null ? void 0 : _f.maxWidth) {
|
|
828
830
|
width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
|
|
829
831
|
}
|
|
830
|
-
const
|
|
832
|
+
const elementColors = (_g = element.props) == null ? void 0 : _g.colors;
|
|
833
|
+
const resolvedFill = (applyToAll ? captionTextColor : ((_h = element.props) == null ? void 0 : _h.fill) ?? (elementColors == null ? void 0 : elementColors.text) ?? captionTextColor) ?? DEFAULT_CAPTION_PROPS.fill;
|
|
834
|
+
const caption = new Textbox(((_i = element.props) == null ? void 0 : _i.text) || element.t || "", {
|
|
831
835
|
left: x,
|
|
832
836
|
top: y,
|
|
833
837
|
originX: "center",
|
|
834
838
|
originY: "center",
|
|
835
|
-
angle: ((
|
|
839
|
+
angle: ((_j = element.props) == null ? void 0 : _j.rotation) || 0,
|
|
836
840
|
fontSize: Math.round(
|
|
837
|
-
((
|
|
841
|
+
((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
|
|
838
842
|
),
|
|
839
|
-
fontFamily: (
|
|
840
|
-
fill:
|
|
841
|
-
fontWeight: (
|
|
842
|
-
stroke: (
|
|
843
|
-
opacity: (
|
|
843
|
+
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,
|
|
844
|
+
fill: resolvedFill,
|
|
845
|
+
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,
|
|
846
|
+
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,
|
|
847
|
+
opacity: (applyToAll ? captionProps == null ? void 0 : captionProps.opacity : ((_w = element.props) == null ? void 0 : _w.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity)) ?? 1,
|
|
844
848
|
width,
|
|
845
849
|
splitByGrapheme: false,
|
|
846
|
-
textAlign: ((
|
|
850
|
+
textAlign: ((_x = element.props) == null ? void 0 : _x.textAlign) ?? "center",
|
|
847
851
|
shadow: new Shadow({
|
|
848
|
-
offsetX: (
|
|
849
|
-
offsetY: (
|
|
850
|
-
blur: (
|
|
851
|
-
color: (
|
|
852
|
+
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]),
|
|
853
|
+
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]),
|
|
854
|
+
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,
|
|
855
|
+
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
|
|
852
856
|
}),
|
|
853
|
-
strokeWidth: (
|
|
857
|
+
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
|
|
854
858
|
});
|
|
855
859
|
caption.set("id", element.id);
|
|
856
860
|
caption.set("zIndex", index);
|
|
@@ -1941,10 +1945,18 @@ const useTwickCanvas = ({
|
|
|
1941
1945
|
const sendToBack = (elementId) => applyZOrder(elementId, "back");
|
|
1942
1946
|
const bringForward = (elementId) => applyZOrder(elementId, "forward");
|
|
1943
1947
|
const sendBackward = (elementId) => applyZOrder(elementId, "backward");
|
|
1948
|
+
const setBackgroundColor = useCallback((color) => {
|
|
1949
|
+
const canvas = twickCanvasRef.current;
|
|
1950
|
+
if (canvas) {
|
|
1951
|
+
canvas.backgroundColor = color;
|
|
1952
|
+
canvas.requestRenderAll();
|
|
1953
|
+
}
|
|
1954
|
+
}, []);
|
|
1944
1955
|
return {
|
|
1945
1956
|
twickCanvas,
|
|
1946
1957
|
buildCanvas,
|
|
1947
1958
|
resizeCanvas,
|
|
1959
|
+
setBackgroundColor,
|
|
1948
1960
|
onVideoSizeChange,
|
|
1949
1961
|
addWatermarkToCanvas,
|
|
1950
1962
|
addElementToCanvas,
|