@versa_ai/vmml-editor 1.0.2 → 1.0.3
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 +19 -19
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +19 -19
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/index.tsx +1 -1
package/dist/index.mjs
CHANGED
|
@@ -295,7 +295,7 @@ var SeekBar = ({ player, vmmlRef, frame, durationInFrames, intoEdit, setDragStat
|
|
|
295
295
|
if (e.button !== 0) {
|
|
296
296
|
return;
|
|
297
297
|
}
|
|
298
|
-
const { left, width } = (_a = containerRef.current) == null ?
|
|
298
|
+
const { left, width } = (_a = containerRef.current) == null ? undefined : _a.getBoundingClientRect();
|
|
299
299
|
const _frame = getFrameFromX(
|
|
300
300
|
e.clientX - left,
|
|
301
301
|
durationInFrames,
|
|
@@ -315,7 +315,7 @@ var SeekBar = ({ player, vmmlRef, frame, durationInFrames, intoEdit, setDragStat
|
|
|
315
315
|
if (!dragging.dragging) {
|
|
316
316
|
return;
|
|
317
317
|
}
|
|
318
|
-
const { left, width } = (_a = containerRef.current) == null ?
|
|
318
|
+
const { left, width } = (_a = containerRef.current) == null ? undefined : _a.getBoundingClientRect();
|
|
319
319
|
const _frame = getFrameFromX(
|
|
320
320
|
e.clientX - left,
|
|
321
321
|
durationInFrames,
|
|
@@ -653,7 +653,7 @@ var VmmlConverter = class {
|
|
|
653
653
|
existClip = originClip;
|
|
654
654
|
} else {
|
|
655
655
|
const editorTrack = this.tracks.find((track) => track.editorType === type);
|
|
656
|
-
existClip = ((editorTrack == null ?
|
|
656
|
+
existClip = ((editorTrack == null ? undefined : editorTrack.clips) || []).find((clip) => clip.id === id);
|
|
657
657
|
}
|
|
658
658
|
if (existClip) {
|
|
659
659
|
!originClip && (existClip.fObj = fObj);
|
|
@@ -792,11 +792,11 @@ var VmmlConverter = class {
|
|
|
792
792
|
};
|
|
793
793
|
var VmmlConverter_default = VmmlConverter;
|
|
794
794
|
function drawImg(ctx, left, top, img, wSize, hSize, angle) {
|
|
795
|
-
if (angle ===
|
|
795
|
+
if (angle === undefined) return;
|
|
796
796
|
ctx.save();
|
|
797
797
|
ctx.translate(left, top);
|
|
798
798
|
ctx.rotate(fabric.util.degreesToRadians(angle));
|
|
799
|
-
ctx.drawImage(img, -
|
|
799
|
+
ctx.drawImage(img, -28 / 2, -28 / 2, wSize, hSize);
|
|
800
800
|
ctx.restore();
|
|
801
801
|
}
|
|
802
802
|
function usePeekControl(canvas) {
|
|
@@ -837,7 +837,7 @@ function usePeekControl(canvas) {
|
|
|
837
837
|
const renderMuteIcon = (ctx, left, top, styleOverride, fabricObject) => {
|
|
838
838
|
if (!fabricObject.clipData) return false;
|
|
839
839
|
if (fabricObject.clipData.type === "\u8868\u60C5\u5305") {
|
|
840
|
-
if (fabricObject.clipData.isMute === null || fabricObject.clipData.isMute ===
|
|
840
|
+
if (fabricObject.clipData.isMute === null || fabricObject.clipData.isMute === undefined) return false;
|
|
841
841
|
if (fabricObject.clipData.isMute) {
|
|
842
842
|
drawImg(ctx, left, top, muteImg, 28, 28, fabricObject.angle);
|
|
843
843
|
} else {
|
|
@@ -980,10 +980,10 @@ var EditorCanvas = forwardRef(
|
|
|
980
980
|
const objects = fc.getObjects();
|
|
981
981
|
objects.forEach((item) => {
|
|
982
982
|
var _a, _b, _c;
|
|
983
|
-
if (((_a = item == null ?
|
|
983
|
+
if (((_a = item == null ? undefined : item.clipData) == null ? undefined : _a.type) === "\u6587\u5B57") {
|
|
984
984
|
item.set("visible", ns >= item.clipData.inPoint && ns < item.clipData.inPoint + (item.clipData.duration || vmml.template.duration));
|
|
985
985
|
} else {
|
|
986
|
-
item.set("visible", ns >= item.clipData.inPoint && ns < item.clipData.inPoint + ((_c = (_b = item.clipData) == null ?
|
|
986
|
+
item.set("visible", ns >= item.clipData.inPoint && ns < item.clipData.inPoint + ((_c = (_b = item.clipData) == null ? undefined : _b.fileUrl) == null ? undefined : _c.duration));
|
|
987
987
|
}
|
|
988
988
|
});
|
|
989
989
|
fc.discardActiveObject();
|
|
@@ -1117,7 +1117,7 @@ var EditorCanvas = forwardRef(
|
|
|
1117
1117
|
if (canvas) {
|
|
1118
1118
|
const imgs = canvas.getObjects().filter((item) => {
|
|
1119
1119
|
var _a;
|
|
1120
|
-
return ((_a = item == null ?
|
|
1120
|
+
return ((_a = item == null ? undefined : item.clipData) == null ? undefined : _a.type) === "\u8868\u60C5\u5305";
|
|
1121
1121
|
});
|
|
1122
1122
|
const target = imgs.find((item) => item.clipData.id === id);
|
|
1123
1123
|
if (target) {
|
|
@@ -1127,7 +1127,7 @@ var EditorCanvas = forwardRef(
|
|
|
1127
1127
|
});
|
|
1128
1128
|
}
|
|
1129
1129
|
} else {
|
|
1130
|
-
waitFcTasks.current.push(updateImage.bind(
|
|
1130
|
+
waitFcTasks.current.push(updateImage.bind(undefined, id, base64));
|
|
1131
1131
|
}
|
|
1132
1132
|
};
|
|
1133
1133
|
const createImageFromClip = (clip, fc2) => {
|
|
@@ -1174,7 +1174,7 @@ var EditorCanvas = forwardRef(
|
|
|
1174
1174
|
});
|
|
1175
1175
|
});
|
|
1176
1176
|
} else {
|
|
1177
|
-
waitFcTasks.current.push(createImageFromClip.bind(
|
|
1177
|
+
waitFcTasks.current.push(createImageFromClip.bind(undefined, clip));
|
|
1178
1178
|
}
|
|
1179
1179
|
};
|
|
1180
1180
|
const handleRedo = () => {
|
|
@@ -1254,7 +1254,7 @@ var EditorCanvas = forwardRef(
|
|
|
1254
1254
|
canvas.add(imgData).renderAll();
|
|
1255
1255
|
});
|
|
1256
1256
|
} else {
|
|
1257
|
-
waitFcTasks.current.push(createTextFromClip.bind(
|
|
1257
|
+
waitFcTasks.current.push(createTextFromClip.bind(undefined, clip));
|
|
1258
1258
|
}
|
|
1259
1259
|
};
|
|
1260
1260
|
const embedFontInSVG = async (svgString, url) => {
|
|
@@ -1293,7 +1293,7 @@ var EditorCanvas = forwardRef(
|
|
|
1293
1293
|
container.style.padding = "6.5px 7px 6.5px 7px";
|
|
1294
1294
|
container.style.borderRadius = "5px";
|
|
1295
1295
|
document.body.appendChild(container);
|
|
1296
|
-
const { width, height } = container == null ?
|
|
1296
|
+
const { width, height } = container == null ? undefined : container.getBoundingClientRect();
|
|
1297
1297
|
const dataurl = await toSvg(container);
|
|
1298
1298
|
document.body.removeChild(container);
|
|
1299
1299
|
const base64Image = await embedFontInSVG(dataurl, fontAssetUrl);
|
|
@@ -1716,14 +1716,14 @@ var stopMove = () => {
|
|
|
1716
1716
|
const currentTouchPositionY = e.touches[0].clientY;
|
|
1717
1717
|
const deltaX = currentTouchPositionX - lastTouchPositionX;
|
|
1718
1718
|
const deltaY = currentTouchPositionY - lastTouchPositionY;
|
|
1719
|
-
if (["text-header", "overlay", "text_bg_change"].includes((_a = e.target) == null ?
|
|
1719
|
+
if (["text-header", "overlay", "text_bg_change"].includes((_a = e.target) == null ? undefined : _a.className)) {
|
|
1720
1720
|
e.preventDefault();
|
|
1721
1721
|
}
|
|
1722
1722
|
if (element) {
|
|
1723
1723
|
const willOverflow = element.scrollHeight > element.clientHeight;
|
|
1724
1724
|
if (willOverflow) {
|
|
1725
1725
|
return;
|
|
1726
|
-
} else if (((_b = e.target) == null ?
|
|
1726
|
+
} else if (((_b = e.target) == null ? undefined : _b.className.split(" ").includes("color-item")) || ((_c = e.target) == null ? undefined : _c.className) === "text_color_change") {
|
|
1727
1727
|
if (deltaX < 0 || deltaX > 0) {
|
|
1728
1728
|
return;
|
|
1729
1729
|
} else {
|
|
@@ -1902,7 +1902,7 @@ var ColorSelector_default = ColorSelector;
|
|
|
1902
1902
|
var formatText = (text, maxLengthBase = 40) => {
|
|
1903
1903
|
var _a;
|
|
1904
1904
|
const newlineRegex = /(\r\n|\r|\n)/g;
|
|
1905
|
-
const matches = ((_a = text.match(newlineRegex)) == null ?
|
|
1905
|
+
const matches = ((_a = text.match(newlineRegex)) == null ? undefined : _a.length) || 0;
|
|
1906
1906
|
const maxLength = maxLengthBase + matches;
|
|
1907
1907
|
let trimmedText = text.substring(0, maxLength);
|
|
1908
1908
|
if (text.length - matches === maxLengthBase) {
|
|
@@ -2227,7 +2227,7 @@ var EditorFn = ({
|
|
|
2227
2227
|
const [frame, setFrame] = useState(pauseFrame);
|
|
2228
2228
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
2229
2229
|
const [showCanvas, setShowCanvas] = useState(false);
|
|
2230
|
-
const [durationInFrames, setDurationInFrames] = useState(getFrames(((_a = vmml == null ?
|
|
2230
|
+
const [durationInFrames, setDurationInFrames] = useState(getFrames(((_a = vmml == null ? undefined : vmml.template) == null ? undefined : _a.duration) || 1, fps));
|
|
2231
2231
|
const [previewState, setPreviewState] = useState(true);
|
|
2232
2232
|
const [menuState, setMenuState] = useState("");
|
|
2233
2233
|
const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0, top: 0 });
|
|
@@ -2515,8 +2515,8 @@ var EditorFn = ({
|
|
|
2515
2515
|
if (player) {
|
|
2516
2516
|
const parent = player.getContainerNode();
|
|
2517
2517
|
if (!canvasSize.width) {
|
|
2518
|
-
const playerElement = parent == null ?
|
|
2519
|
-
const { width, height } = (playerElement == null ?
|
|
2518
|
+
const playerElement = parent == null ? undefined : parent.children[0];
|
|
2519
|
+
const { width, height } = (playerElement == null ? undefined : playerElement.getBoundingClientRect()) || {};
|
|
2520
2520
|
setCanvasSize({ width, height, top: playerElement.offsetTop });
|
|
2521
2521
|
}
|
|
2522
2522
|
player.addEventListener("play", onPlay);
|