+
+
+
+ 
+
+ Upload media
+
+
+
+
+ 
+
+
+ Click to upload
+ Or drag and drop a file
+
+
+
+ Add
+
+
+ Download settings
+Formats
+Import & export
+Save this project locally, or load an existing one.
+Import a project
+
ImportExport this project
+
Export
Uploads
Objects
Images
Text
Videos
Audio
More
Upload Lottie
+ 
Clear project
+ Objects
Shapes
Emojis
+ 
+ 
+ 
+ 
+ 
+ Canvas settings
+| Preset | ++ |
|---|---|
| Size | ++ |
| Color | +
+
+
+
+
+
+ |
+
| Duration | ++ |
+ 
Reset
Undo Redo
+ 
Sponsor
+ Made by Alyssa X 
+ 
+ 
+ 
+
+ Keyframe easing
+ +
+ 
+
+ 
+ 
1.0x
+ 
+ 
+
+ 
Import & export Download Upload media"
+ );
+ $('#upload-button').removeClass('uploading');
+ if (place) {
+ loadImage(
+ file,
+ artboard.get('left') + artboard.get('width') / 2,
+ artboard.get('top') + artboard.get('height') / 2,
+ 200
+ );
+ }
+ save();
+}
+
+async function savePixabayImage(url, xpos, ypos, width) {
+ $('#load-image').addClass('loading-active');
+ fetch(url)
+ .then((res) => res.blob())
+ .then((blob) => {
+ url = blob;
+ var reader = new FileReader();
+ reader.readAsDataURL(blob);
+ reader.onloadend = function () {
+ url = reader.result;
+ var key = Math.random().toString(36).substr(2, 9);
+ db.collection('assets').add({
+ key: key,
+ src: url,
+ thumb: url,
+ name: 'test',
+ type: 'image',
+ hidden: true,
+ });
+ loadImage(url, xpos, ypos, width, false);
+ };
+ });
+}
+
+async function saveAudio(url) {
+ var reader = new FileReader();
+ reader.readAsDataURL(url);
+ reader.onloadend = function () {
+ var key = Math.random().toString(36).substr(2, 9);
+ db.collection('assets').add({
+ key: key,
+ src: reader.result,
+ name: 'test',
+ type: 'audio',
+ hidden: true,
+ });
+ newAudioLayer(reader.result);
+ };
+}
+
+async function savePixabayVideo(url, thumb, x, y) {
+ $('#load-video').addClass('loading-active');
+ fetch(url)
+ .then((res) => res.blob())
+ .then((blob) => {
+ var reader = new FileReader();
+ reader.readAsDataURL(blob);
+ reader.onloadend = function () {
+ fetch(thumb)
+ .then((res) => res.blob())
+ .then((blob2) => {
+ var reader2 = new FileReader();
+ reader2.readAsDataURL(blob2);
+ reader2.onloadend = function () {
+ url = reader.result;
+ thumb = reader2.result;
+ var key = Math.random().toString(36).substr(2, 9);
+ db.collection('assets').add({
+ key: key,
+ src: url,
+ thumb: thumb,
+ name: 'test',
+ type: 'video',
+ hidden: true,
+ });
+ loadVideo(url, x, y, false);
+ };
+ });
+ };
+ });
+}
+
+function deleteAsset(key) {
+ db.collection('assets')
+ .doc({ key: key })
+ .get()
+ .then((asset) => {
+ var temp = files.filter((x) => x.file == asset.src);
+ if (temp.length > 0) {
+ temp.forEach(function (file) {
+ deleteObject(canvas.getItemById(file.name));
+ files = $.grep(files, function (a) {
+ return a != file;
+ });
+ });
+ }
+ db.collection('assets').doc({ key: key }).delete();
+ if (asset.type == 'image') {
+ uploaded_images = uploaded_images.filter(function (obj) {
+ return obj.key !== key;
+ });
+ populateGrid('images-tab');
+ } else {
+ uploaded_videos = uploaded_videos.filter(function (obj) {
+ return obj.key !== key;
+ });
+ populateGrid('videos-tab');
+ }
+ });
+}
+
+function getAssets() {
+ db.collection('assets')
+ .get()
+ .then((assets) => {
+ // Sometimes the assets aren't ready when importing, really annoying
+ if (assets === undefined) {
+ getAssets();
+ } else if (assets.length > 0) {
+ assets.forEach(function (asset) {
+ if (asset.type == 'image') {
+ uploaded_images.push({
+ src: asset.src,
+ thumb: asset.thumb,
+ key: asset.key,
+ type: 'image',
+ hidden: asset.hidden,
+ });
+ } else if (asset.type == 'video') {
+ uploaded_videos.push({
+ src: asset.src,
+ thumb: asset.thumb,
+ key: asset.key,
+ type: 'video',
+ hidden: asset.hidden,
+ });
+ }
+ });
+ }
+ });
+}
+
+function readTextFile(file, callback) {
+ var rawFile = new XMLHttpRequest();
+ rawFile.overrideMimeType('application/json');
+ rawFile.open('GET', file, true);
+ rawFile.onreadystatechange = function () {
+ if (rawFile.readyState === 4 && rawFile.status == '200') {
+ callback(rawFile.responseText);
+ }
+ };
+ rawFile.send(null);
+}
+
+async function importProject(e) {
+ $('#import-project span').html('Importing...');
+ var file = e.target.files[0];
+ var path = (window.URL || window.webkitURL).createObjectURL(file);
+ readTextFile(path, function (text) {
+ var data = JSON.parse(text);
+ delete data.project[0].id;
+ if (data.project.length > 0) {
+ if (data.assets.length > 0) {
+ data.assets.forEach(function (asset) {
+ delete asset.id;
+ db.collection('assets').add(asset);
+ });
+ }
+ db.collection('projects')
+ .doc({ id: 1 })
+ .update(data.project[0])
+ .then((response) => {
+ $('#import-project span').html('Import');
+ hideModals();
+ loadProject();
+ });
+ } else {
+ alert('Wrong file type');
+ }
+ });
+}
+
+function importHandle() {
+ $('#import').click();
+}
+
+function exportProject() {
+ $('#export-project span').html('Exporting...');
+ db.collection('projects')
+ .get()
+ .then((project) => {
+ if (project.length > 0) {
+ db.collection('assets')
+ .get()
+ .then((assets) => {
+ var exportarr = { project: project, assets: assets };
+ $('', {
+ download: 'data.json',
+ href:
+ 'data:application/json,' +
+ encodeURIComponent(JSON.stringify(exportarr)),
+ })
+ .appendTo('body')
+ .click(function () {
+ $(this).remove();
+ $('#export-project span').html('Export');
+ })[0]
+ .click();
+ });
+ } else {
+ alert('Empty project');
+ $('#export-project span').html('Export');
+ }
+ });
+}
+
+$(document).on('click', '#import-project', importHandle);
+$(document).on('click', '#export-project', exportProject);
+$(document).on('change', '#import', importProject);
+
+function clearProject() {
+ if (
+ window.confirm(
+ 'Are you sure you want to clear this project? This action cannot be undone.'
+ )
+ ) {
+ db.collection('projects').delete();
+ db.collection('assets').delete();
+ window.setTimeout(function () {
+ location.reload();
+ }, 1000);
+ }
+ hideMore();
+}
+$(document).on('click', '#clear-project', clearProject);
diff --git a/src/js/encode-worker.js b/src/js/encode-worker.js
new file mode 100644
index 0000000..bcee815
--- /dev/null
+++ b/src/js/encode-worker.js
@@ -0,0 +1,96 @@
+importScripts('./webm-writer2.js');
+
+let webmWriter = null;
+let fileWritableStream = null;
+let frameReader = null;
+
+async function startRecording(
+ fileHandle,
+ frameStream,
+ trackSettings
+) {
+ let frameCounter = 0;
+
+ fileWritableStream = await fileHandle.createWritable();
+
+ webmWriter = new WebMWriter({
+ fileWriter: fileWritableStream,
+ codec: 'VP9',
+ width: trackSettings.width,
+ height: trackSettings.height,
+ });
+
+ frameReader = frameStream.getReader();
+
+ const init = {
+ output: (chunk) => {
+ webmWriter.addFrame(chunk);
+ },
+ error: (e) => {
+ console.log(e.message);
+ stopRecording();
+ },
+ };
+
+ const config = {
+ codec: 'vp09.00.10.08',
+ width: trackSettings.width,
+ height: trackSettings.height,
+ bitrate: 10e6,
+ };
+
+ let encoder = new VideoEncoder(init);
+ let support = await VideoEncoder.isConfigSupported(config);
+ console.assert(support.supported);
+ encoder.configure(config);
+
+ frameReader
+ .read()
+ .then(async function processFrame({ done, value }) {
+ let frame = value;
+
+ if (done) {
+ await encoder.flush();
+ encoder.close();
+ return;
+ }
+
+ if (encoder.encodeQueueSize <= 30) {
+ if (++frameCounter % 20 == 0) {
+ console.log(frameCounter + ' frames processed');
+ }
+
+ const insert_keyframe = frameCounter % 150 == 0;
+ encoder.encode(frame, { keyFrame: insert_keyframe });
+ } else {
+ console.log('dropping frame, encoder falling behind');
+ }
+
+ frame.close();
+ frameReader.read().then(processFrame);
+ });
+}
+
+async function stopRecording() {
+ await frameReader.cancel();
+ await webmWriter.complete();
+ fileWritableStream.close();
+ frameReader = null;
+ webmWriter = null;
+ fileWritableStream = null;
+}
+
+self.addEventListener('message', function (e) {
+ switch (e.data.type) {
+ case 'start':
+ startRecording(
+ e.data.fileHandle,
+ e.data.frameStream,
+ e.data.trackSettings
+ );
+ break;
+ case 'stop':
+ stopRecording();
+ break;
+ }
+});
diff --git a/src/js/events.js b/src/js/events.js
new file mode 100644
index 0000000..8dbed56
--- /dev/null
+++ b/src/js/events.js
@@ -0,0 +1,1022 @@
+$(document).ready(function () {
+ // An object is being moved in the canvas
+ canvas.on('object:moving', function (e) {
+ e.target.hasControls = false;
+ centerLines(e);
+ if (cropping) {
+ if (
+ canvas.getItemById('crop').isContainedWithinObject(cropobj)
+ ) {
+ cropleft = canvas.getItemById('crop').get('left');
+ croptop = canvas.getItemById('crop').get('top');
+ cropscalex = canvas.getItemById('crop').get('scaleX');
+ cropscaley = canvas.getItemById('crop').get('scaleY');
+ }
+ crop(canvas.getItemById('cropped'));
+ } else if (
+ lockmovement &&
+ e.e.shiftKey &&
+ canvas.getActiveObject()
+ ) {
+ if (canvasx < shiftx + 30 && canvasx > shiftx - 30) {
+ canvas.getActiveObject().set({ left: shiftx });
+ canvas.getActiveObject().lockMovementX = true;
+ canvas.getActiveObject().lockMovementY = false;
+ } else {
+ canvas.getActiveObject().set({ top: shifty });
+ canvas.getActiveObject().lockMovementX = false;
+ canvas.getActiveObject().lockMovementY = true;
+ }
+ } else if (canvas.getActiveObject() && !e.e.shiftKey) {
+ lockmovement = false;
+ canvas.getActiveObject().lockMovementX = false;
+ canvas.getActiveObject().lockMovementY = false;
+ }
+ });
+
+ // An object is being scaled in the canvas
+ canvas.on('object:scaling', function (e) {
+ e.target.hasControls = false;
+ centerLines(e);
+ if (cropping) {
+ if (
+ canvas.getItemById('crop').isContainedWithinObject(cropobj)
+ ) {
+ cropleft = canvas.getItemById('crop').get('left');
+ croptop = canvas.getItemById('crop').get('top');
+ cropscalex = canvas.getItemById('crop').get('scaleX');
+ cropscaley = canvas.getItemById('crop').get('scaleY');
+ }
+ crop(canvas.getItemById('cropped'));
+ }
+ });
+
+ // An object is being resized in the canvas
+ canvas.on('object:resizing', function (e) {
+ e.target.hasControls = false;
+ centerLines(e);
+ if (cropping) {
+ if (
+ canvas.getItemById('crop').isContainedWithinObject(cropobj)
+ ) {
+ cropleft = canvas.getItemById('crop').get('left');
+ croptop = canvas.getItemById('crop').get('top');
+ cropscalex = canvas.getItemById('crop').get('scaleX');
+ cropscaley = canvas.getItemById('crop').get('scaleY');
+ }
+ crop(canvas.getItemById('cropped'));
+ }
+ });
+
+ // An object is being rotated in the canvas
+ canvas.on('object:rotating', function (e) {
+ if (e.e.shiftKey) {
+ canvas.getActiveObject().snapAngle = 15;
+ } else {
+ canvas.getActiveObject().snapAngle = 0;
+ }
+ e.target.hasControls = false;
+ });
+
+ // An object has been modified in the canvas
+ canvas.on('object:modified', function (e) {
+ e.target.hasControls = true;
+ if (!editinggroup && !cropping) {
+ canvas.getActiveObject().lockMovementX = false;
+ canvas.getActiveObject().lockMovementY = false;
+ canvas.renderAll();
+ if (e.target.type == 'activeSelection') {
+ const tempselection = canvas.getActiveObject();
+ canvas.discardActiveObject();
+ e.target._objects.forEach(function (object) {
+ autoKeyframe(object, e, true);
+ });
+ reselect(tempselection);
+ } else {
+ autoKeyframe(e.target, e, false);
+ }
+ updatePanelValues();
+ save();
+ }
+ if (cropping) {
+ var obj = e.target;
+ checkCrop(obj);
+ }
+ });
+
+ // A selection has been updated in the canvas
+ canvas.on('selection:updated', function (e) {
+ updatePanel(true);
+ updatePanelValues();
+ updateSelection(e);
+ closeFilters();
+ });
+
+ // A selection has been made in the canvas
+ canvas.on('selection:created', function (e) {
+ shiftx = canvas.getActiveObject().get('left');
+ shifty = canvas.getActiveObject().get('top');
+ if (!editingpanel) {
+ updatePanel(true);
+ }
+ updateSelection(e);
+ canvas.renderAll();
+ closeFilters();
+ });
+
+ // A selection has been cleared in the canvas
+ canvas.on('selection:cleared', function (e) {
+ if (!editingpanel && !setting) {
+ updatePanel(false);
+ }
+ $('.layer-selected').removeClass('layer-selected');
+ if (cropping) {
+ crop(cropobj);
+ }
+ closeFilters();
+ });
+
+ function kFormatter(num) {
+ return Math.abs(num) > 999
+ ? Math.sign(num) * (Math.abs(num) / 1000).toFixed(1) + 'k'
+ : Math.sign(num) * Math.abs(num);
+ }
+
+ // Zoom in/out of the canvas
+ canvas.on('mouse:wheel', function (opt) {
+ var delta = opt.e.deltaY;
+ var zoom = canvas.getZoom();
+ zoom *= 0.999 ** delta;
+ $('#zoom-level span').html(
+ kFormatter((zoom * 100).toFixed(0)) + '%'
+ );
+ if (zoom > 20) zoom = 20;
+ if (zoom < 0.01) zoom = 0.01;
+ canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
+ opt.e.preventDefault();
+ opt.e.stopPropagation();
+ });
+
+ // Start panning if space is down or hand tool is enabled
+ canvas.on('mouse:down', function (opt) {
+ var e = opt.e;
+ if (spaceDown || handtool) {
+ this.isDragging = true;
+ this.selection = false;
+ this.lastPosX = e.clientX;
+ this.lastPosY = e.clientY;
+ }
+ if (opt.target) {
+ opt.target.hasControls = true;
+ wip = false;
+ }
+ });
+
+ // Pan while dragging mouse
+ canvas.on('mouse:move', function (opt) {
+ var pointer = canvas.getPointer(opt.e);
+ canvasx = pointer.x;
+ canvasy = pointer.y;
+ if (this.isDragging) {
+ var e = opt.e;
+ var vpt = this.viewportTransform;
+ vpt[4] += e.clientX - this.lastPosX;
+ vpt[5] += e.clientY - this.lastPosY;
+ this.requestRenderAll();
+ this.lastPosX = e.clientX;
+ this.lastPosY = e.clientY;
+ }
+ });
+
+ // Stop panning
+ canvas.on('mouse:up', function (opt) {
+ this.setViewportTransform(this.viewportTransform);
+ this.isDragging = false;
+ this.selection = true;
+ line_h.opacity = 0;
+ line_v.opacity = 0;
+ });
+
+ // Detect mouse over canvas (for dragging objects from the library)
+ canvas.on('mouse:move', function (e) {
+ overCanvas = true;
+ if (
+ e.target &&
+ !canvas.getActiveObject() &&
+ draggingPanel &&
+ e.target.type == 'image'
+ ) {
+ wip = true;
+ e.target.hasControls = false;
+ canvas.setActiveObject(e.target);
+ }
+ });
+ canvas.on('mouse:out', function (e) {
+ overCanvas = false;
+ if (wip) {
+ e.target.hasControls = true;
+ canvas.discardActiveObject();
+ wip = false;
+ canvas.renderAll();
+ }
+ });
+
+ // Double click on image to get into cropping mode
+ fabric.util.addListener(
+ canvas.upperCanvasEl,
+ 'dblclick',
+ function (e) {
+ var target = canvas.findTarget(e);
+ if (target) {
+ if (target.type == 'image') {
+ cropImage(target);
+ }
+ }
+ }
+ );
+
+ // Key event handling
+ $(document)
+ .keyup(function (e) {
+ // Space bar (panning and playback)
+ if (
+ e.keyCode == 32 &&
+ !editinglayer &&
+ !editingproject &&
+ $(e.target)[0].tagName != 'INPUT'
+ ) {
+ spacerelease = true;
+ spaceDown = false;
+ canvas.defaultCursor = 'default';
+ canvas.renderAll();
+ if (!spacehold) {
+ if (
+ !(
+ canvas.getActiveObject() &&
+ canvas.getActiveObject().isEditing
+ )
+ ) {
+ if (paused) {
+ play();
+ } else {
+ pause();
+ }
+ }
+ } else {
+ if (!handtool) {
+ $('#hand-tool').removeClass('hand-active');
+ $('#hand-tool')
+ .find('img')
+ .attr('src', 'assets/hand-tool.svg');
+ }
+ }
+ spacehold = false;
+ }
+ // Delete object/keyframe
+ if (
+ (e.keyCode == 46 ||
+ e.key == 'Delete' ||
+ e.code == 'Delete' ||
+ e.key == 'Backspace') &&
+ !focus &&
+ !editinglayer
+ ) {
+ if (
+ $('.show-properties').length > 0 ||
+ shiftkeys.length > 0
+ ) {
+ deleteKeyframe();
+ } else {
+ deleteSelection();
+ }
+ }
+ // Shift key is up (stop locking horizontal/vertical object movement)
+ if (e.keyCode == 16) {
+ lockmovement = false;
+ shiftdown = false;
+ }
+ })
+ .keydown(function (e) {
+ // Space bar (panning and playback)
+ if (
+ e.keyCode == 32 &&
+ !editinglayer &&
+ !editingproject &&
+ $(e.target)[0].tagName != 'INPUT'
+ ) {
+ spacerelease = false;
+ spaceDown = true;
+ canvas.defaultCursor = 'grab';
+ canvas.renderAll();
+ window.setTimeout(function () {
+ if (!spacerelease) {
+ spacehold = true;
+ if (!handtool) {
+ $('#hand-tool').addClass('hand-active');
+ $('#hand-tool')
+ .find('img')
+ .attr('src', 'assets/hand-tool-active.svg');
+ }
+ }
+ }, 1000);
+ }
+ // Redo
+ if (e.which === 90 && (e.ctrlKey || e.metaKey) && e.shiftKey) {
+ undoRedo(redo, undo, redoarr, undoarr);
+ }
+ // Undo
+ if (e.which === 90 && (e.ctrlKey || e.metaKey)) {
+ undoRedo(undo, redo, undoarr, redoarr);
+ }
+ // Duplicate object
+ if (e.which === 68 && (e.ctrlKey || e.metaKey)) {
+ e.preventDefault();
+ if (canvas.getActiveObject()) {
+ clipboard = canvas.getActiveObject();
+ copyObject();
+ }
+ }
+ // Shift key (Lock horizontal/vertical movement for objects)
+ if (e.shiftKey) {
+ shiftdown = true;
+ lockmovement = true;
+ if (canvas.getActiveObject()) {
+ shiftx = canvas.getActiveObject().get('left');
+ shifty = canvas.getActiveObject().get('top');
+ }
+ }
+ // Return (save layer name)
+ if (e.keyCode === 13 && editinglayer) {
+ saveLayerName();
+ }
+ // Return (save project name)
+ if (e.keyCode === 13 && editingproject) {
+ saveProjectName();
+ }
+ // Left arrow key (move object to the left)
+ if (e.keyCode === 37 && canvas.getActiveObject()) {
+ var obj = canvas.getActiveObject();
+ var step = 2;
+ // Bigger step if shift is down
+ if (e.shiftKey) {
+ step = 7;
+ }
+ obj.left = obj.left - step;
+ canvas.renderAll();
+ autoKeyframe(obj, { action: 'drag' }, false);
+ }
+ // Up arrow key (move object up)
+ if (e.keyCode === 38 && canvas.getActiveObject()) {
+ var obj = canvas.getActiveObject();
+ var step = 2;
+ // Bigger step if shift is down
+ if (e.shiftKey) {
+ step = 7;
+ }
+ obj.top = obj.top - step;
+ canvas.renderAll();
+ autoKeyframe(obj, { action: 'drag' }, false);
+ }
+ // Right arrow key (move object to the right)
+ if (e.keyCode === 39 && canvas.getActiveObject()) {
+ var obj = canvas.getActiveObject();
+ var step = 2;
+ // Bigger step if shift is down
+ if (e.shiftKey) {
+ step = 7;
+ }
+ obj.left = obj.left + step;
+ canvas.renderAll();
+ autoKeyframe(obj, { action: 'drag' }, false);
+ }
+ // Down arrow key (move object down)
+ if (e.keyCode === 40 && canvas.getActiveObject()) {
+ var obj = canvas.getActiveObject();
+ var step = 2;
+ // Bigger step if shift is down
+ if (e.shiftKey) {
+ step = 7;
+ }
+ obj.top = obj.top + step;
+ canvas.renderAll();
+ autoKeyframe(obj, { action: 'drag' }, false);
+ }
+
+ // Move object up layer list
+ if (
+ e.keyCode === 221 &&
+ canvas.getActiveObjects() &&
+ e.metaKey
+ ) {
+ if (canvas.getActiveObjects().length == 1) {
+ var obj = canvas.getActiveObject();
+ $(".layer[data-object='" + obj.id + "']")
+ .prev()
+ .insertAfter($(".layer[data-object='" + obj.id + "']"));
+ $('#' + obj.id)
+ .prev()
+ .insertAfter($('#' + obj.id));
+ orderLayers();
+ } else {
+ canvas.getActiveObjects().forEach(function (obj) {
+ $(".layer[data-object='" + obj.id + "']")
+ .prev()
+ .insertAfter($(".layer[data-object='" + obj.id + "']"));
+ $('#' + obj.id)
+ .prev()
+ .insertAfter($('#' + obj.id));
+ orderLayers();
+ });
+ }
+ }
+
+ // Move object down layer list
+ if (
+ e.keyCode === 219 &&
+ canvas.getActiveObjects() &&
+ e.metaKey
+ ) {
+ if (canvas.getActiveObjects().length == 1) {
+ var obj = canvas.getActiveObject();
+ $(".layer[data-object='" + obj.id + "']")
+ .next()
+ .insertBefore($(".layer[data-object='" + obj.id + "']"));
+ $('#' + obj.id)
+ .next()
+ .insertBefore($('#' + obj.id));
+ orderLayers();
+ } else {
+ canvas.getActiveObjects().forEach(function (obj) {
+ $(".layer[data-object='" + obj.id + "']")
+ .next()
+ .insertBefore(
+ $(".layer[data-object='" + obj.id + "']")
+ );
+ $('#' + obj.id)
+ .next()
+ .insertBefore($('#' + obj.id));
+ orderLayers();
+ });
+ }
+ }
+
+ // Move object top of layer list
+ if (
+ e.keyCode === 221 &&
+ canvas.getActiveObjects() &&
+ e.altKey
+ ) {
+ if (canvas.getActiveObjects().length == 1) {
+ var obj = canvas.getActiveObject();
+ $('#layer-inner-list').prepend(
+ $(".layer[data-object='" + obj.id + "']")
+ );
+ $('#inner-timeline').prepend($('#' + obj.id));
+ orderLayers();
+ } else {
+ canvas.getActiveObjects().forEach(function (obj) {
+ $('#layer-inner-list').prepend(
+ $(".layer[data-object='" + obj.id + "']")
+ );
+ $('#inner-timeline').prepend($('#' + obj.id));
+ orderLayers();
+ });
+ }
+ }
+
+ // Move object bottom of layer list
+ if (e.keyCode === 219 && canvas.getActiveObject() && e.altKey) {
+ if (canvas.getActiveObjects().length == 1) {
+ var obj = canvas.getActiveObject();
+ $('#layer-inner-list').append(
+ $(".layer[data-object='" + obj.id + "']")
+ );
+ $('#inner-timeline').append($('#' + obj.id));
+ orderLayers();
+ } else {
+ canvas.getActiveObjects().forEach(function (obj) {
+ $('#layer-inner-list').append(
+ $(".layer[data-object='" + obj.id + "']")
+ );
+ $('#inner-timeline').append($('#' + obj.id));
+ orderLayers();
+ });
+ }
+ }
+
+ // Zoom in
+ if (e.keyCode === 187 && e.shiftKey) {
+ var zoom = canvas.getZoom() + 0.2;
+ if (zoom > 20) zoom = 20;
+ if (zoom < 0.01) zoom = 0.01;
+ canvas.setZoom(1);
+ canvas.renderAll();
+ var vpw = canvas.width / zoom;
+ var vph = canvas.height / zoom;
+ var x = artboard.left + artboard.width / 2 - vpw / 2;
+ var y = artboard.top + artboard.height / 2 - vph / 2;
+ canvas.absolutePan({ x: x, y: y });
+ canvas.setZoom(zoom);
+ canvas.renderAll();
+ $('#zoom-level span').html(
+ (canvas.getZoom() * 100).toFixed(0) + '%'
+ );
+ }
+
+ // Zoom out
+ if (e.keyCode === 189 && e.shiftKey) {
+ var zoom = canvas.getZoom() - 0.2;
+ if (zoom > 20) zoom = 20;
+ if (zoom < 0.01) zoom = 0.01;
+ canvas.setZoom(1);
+ canvas.renderAll();
+ var vpw = canvas.width / zoom;
+ var vph = canvas.height / zoom;
+ var x = artboard.left + artboard.width / 2 - vpw / 2;
+ var y = artboard.top + artboard.height / 2 - vph / 2;
+ canvas.absolutePan({ x: x, y: y });
+ canvas.setZoom(zoom);
+ canvas.renderAll();
+ $('#zoom-level span').html(
+ (canvas.getZoom() * 100).toFixed(0) + '%'
+ );
+ }
+ });
+
+ // Copy event
+ window.addEventListener('copy', function (e) {
+ // Copy selected object
+ if (
+ canvas.getActiveObject() &&
+ shiftkeys.length == 0 &&
+ !canvas.getActiveObject().isEditing
+ ) {
+ var emptyInp = document.getElementById('emptyInput');
+ emptyInp.select();
+ emptyInp.focus();
+ setTimeout(function () {
+ document.execCommand('copy');
+ }, 0);
+ clipboard = canvas.getActiveObject();
+ cliptype = 'object';
+ // Copy selected keyframe(s)
+ } else if (
+ shiftkeys.length > 0 &&
+ !canvas.getActiveObject().isEditing
+ ) {
+ var emptyInp = document.getElementById('emptyInput');
+ emptyInp.select();
+ emptyInp.focus();
+ setTimeout(function () {
+ document.execCommand('copy');
+ }, 0);
+ clipboard = [];
+ shiftkeys.forEach(function (keyframe) {
+ var drag = $(keyframe.keyframe);
+ var keyarr = $.grep(keyframes, function (e) {
+ return (
+ e.t == drag.attr('data-time') &&
+ e.id == drag.attr('data-object') &&
+ e.name == drag.attr('data-property')
+ );
+ });
+ clipboard.push(keyarr[0]);
+ });
+ cliptype = 'keyframe';
+ }
+ });
+
+ // Paste event
+ window.addEventListener('paste', function (e) {
+ var imgs = e.clipboardData.items;
+ if (imgs == undefined) return false;
+
+ // Paste object or keyframe(s)
+ if (imgs.length == 1 && e.clipboardData.getData('text') == ' ') {
+ copyObject();
+ // Paste external image (by uploading it)
+ } else {
+ for (var i = 0; i < imgs.length; i++) {
+ if (imgs[i].type.indexOf('image') == -1) continue;
+ var imgObj = imgs[i].getAsFile();
+ if (imgObj.size / 1024 / 1024 <= 10) {
+ createThumbnail(imgObj, 250).then(function (data) {
+ saveFile(
+ dataURItoBlob(data),
+ imgObj,
+ imgObj['type'].split('/')[0],
+ 'temp',
+ true,
+ true
+ );
+ });
+ } else {
+ alert('Image is too big');
+ }
+ }
+ }
+ });
+
+ // Stop cropping when clicking on the blacked out properties panel
+ $(document).on('click', '#properties-overlay', function () {
+ if (cropping) {
+ canvas.discardActiveObject();
+ }
+ });
+
+ // Scroll horizontally through assets in the library
+ $(document).on('click', '.right-arrow', function () {
+ $(this).parent().animate({ scrollLeft: '+=1000' }, 500);
+ });
+ $(document).on('click', '.left-arrow', function () {
+ $(this).parent().animate({ scrollLeft: '-=1000' }, 500);
+ });
+
+ // Playback
+ $(document).on('click', '#play-button', function () {
+ if (paused) {
+ play();
+ } else {
+ pause();
+ }
+ });
+
+ // Detect when not clicking on certain elements
+ $(document).on('mousedown', function (e) {
+ // De-select keyframes
+ if (
+ !$('#keyframe-properties').is(e.target) &&
+ $('#keyframe-properties').has(e.target).length === 0 &&
+ !$('.keyframe').is(e.target) &&
+ $('.keyframe').has(e.target).length === 0
+ ) {
+ $('#keyframe-properties').removeClass('show-properties');
+ $('.keyframe-selected').removeClass('keyframe-selected');
+ shiftkeys = [];
+ }
+
+ // Hide color picker
+ if (
+ !$('.object-color').is(e.target) &&
+ $('.object-color').has(e.target).length === 0 &&
+ !$('.pcr-app').is(e.target) &&
+ $('.prc-app').has(e.target).length === 0 &&
+ !$('.pcr-selection').is(e.target) &&
+ $('.pcr-selection').has(e.target).length === 0 &&
+ !$('.pcr-swatches').is(e.target) &&
+ $('.pcr-swatches').has(e.target).length === 0 &&
+ !$('.pcr-interaction').is(e.target) &&
+ $('.pcr-interaction').has(e.target).length === 0
+ ) {
+ o_fill.hide();
+ }
+
+ // Hide zoom controls
+ if (
+ !$('#other-controls').is(e.target) &&
+ $('#other-controls').has(e.target).length === 0
+ ) {
+ $('#zoom-options').addClass('zoom-hidden');
+ $('#zoom-level img').removeClass('zoom-open');
+ }
+
+ // Hide speed settings
+ if (
+ !$('#speed').is(e.target) &&
+ $('#speed').has(e.target).length === 0
+ ) {
+ $('#speed-settings').removeClass('show-speed');
+ $('#speed-arrow').removeClass('arrow-on');
+ }
+
+ // Hide more menu
+ if (
+ !$('#more-tool').is(e.target) &&
+ $('#more-tool').has(e.target).length === 0 &&
+ !$('#more-over').is(e.target) &&
+ $('#more-over').has(e.target).length === 0
+ ) {
+ hideMore();
+ }
+ });
+
+ // Detect focus on an input in the properties
+ $(document)
+ .on('focus', '.property-input', function () {
+ focus = true;
+ })
+ .on('focusout', function () {
+ focus = false;
+ });
+
+ // Toggle zoom dropdown
+ $(document).on('click', '#zoom-level', function () {
+ $('#zoom-options').toggleClass('zoom-hidden');
+ $('#zoom-level img').toggleClass('zoom-open');
+ });
+
+ // Skip to the beginning or end
+ $(document).on('click', '#skip-backward', function () {
+ animate(false, 0);
+ $('#seekbar').offset({
+ left:
+ offset_left +
+ $('#inner-timeline').offset().left +
+ currenttime / timelinetime,
+ });
+ });
+ $(document).on('click', '#skip-forward', function () {
+ animate(false, duration);
+ $('#seekbar').offset({
+ left:
+ offset_left +
+ $('#inner-timeline').offset().left +
+ currenttime / timelinetime,
+ });
+ });
+
+ // Change layer name
+ $(document).on('dblclick', '.layer-custom-name', function () {
+ $(this).prop('readonly', false);
+ $(this).addClass('name-active');
+ $(this).focus();
+ document.execCommand('selectAll', false, null);
+ editinglayer = true;
+ });
+
+ // Trigger file picker when clicking the upload button
+ $(document).on('click', '#upload-button', function () {
+ $('#upload-popup').addClass('upload-show');
+ });
+
+ $(document).on('click', '#upload-overlay', function () {
+ $('.upload-show').removeClass('upload-show');
+ });
+
+ $(document).on('click', '#upload-popup-close', function () {
+ $('.upload-show').removeClass('upload-show');
+ });
+
+ $(document).on('click', '#upload-drop-area', function () {
+ $('#filepick').click();
+ });
+
+ $(document).on('dragover', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ });
+
+ $(document).on('dragover', '#upload-drop-area', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ $('#upload-drop-area').addClass('dropping');
+ });
+
+ $(document).on('dragenter', '#upload-drop-area', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ $('#upload-drop-area').addClass('dropping');
+ });
+
+ $(document).on('drop', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ $('#upload-drop-area').removeClass('dropping');
+ handleUpload(e);
+ });
+
+ $(document).on('dragleave', function () {
+ $('#upload-drop-area').removeClass('dropping');
+ });
+
+ $(document).on('dragend', function () {
+ $('#upload-drop-area').removeClass('dropping');
+ });
+
+ // Upload or remove background audio
+ $(document).on('click', '#audio-upload-button', function () {
+ $('#filepick2').click();
+ });
+
+ // Sync scrolling for the timeline
+ syncScroll($('#layer-inner-list'), $('#timeline'));
+ syncScrollHoz($('#timeline'), $('#seekarea'));
+
+ // Initialize layer sorting
+ sortable('#layer-inner-list', {
+ customDragImage: (draggedElement, elementOffset, event) => {
+ return {
+ element: document.getElementById('nothing'),
+ posX: event.pageX - elementOffset.left,
+ posY: event.pageY - elementOffset.top,
+ };
+ },
+ })[0].addEventListener('sortstop', function (e) {
+ const id = $(e.detail.item).attr('data-object');
+ const previd = $(e.detail.item).prev().attr('data-object');
+ if ($('.sortable-dragging').length == 1) {
+ $('.sortable-dragging').remove();
+ if (previd == undefined) {
+ $('#inner-timeline').prepend($('#' + id));
+ } else {
+ $('#' + id).insertAfter($('#' + previd));
+ }
+ orderLayers();
+ }
+ });
+
+ // Initialize dropdown for keyframe easing
+ $('#easing select').niceSelect();
+
+ // Initialize properties panel
+ updatePanel(false);
+
+ // Initialize library
+ updateBrowser('shape-tool');
+
+ function initFilterSliders() {
+ var filters = [
+ 'filter-brightness',
+ 'filter-contrast',
+ 'filter-saturation',
+ 'filter-hue',
+ 'filter-vibrance',
+ ];
+ filters.forEach(function (filter) {
+ var selectme = document.getElementById(filter);
+ var slider = new RangeSlider(selectme, {
+ design: '2d',
+ theme: 'default',
+ handle: 'round',
+ popup: null,
+ showMinMaxLabels: false,
+ unit: '%',
+ min: -100,
+ max: 100,
+ value: 0,
+ step: 1,
+ onmove: function (x) {
+ if (canvas.getActiveObject()) {
+ var obj = canvas.getActiveObject();
+ if (filter == 'filter-brightness') {
+ if (obj.filters.find((i) => i.type == 'Brightness')) {
+ obj.filters.find(
+ (i) => i.type == 'Brightness'
+ ).brightness = x / 100;
+ } else {
+ obj.filters.push(
+ new f.Brightness({ brightness: x / 100 })
+ );
+ }
+ } else if (filter == 'filter-contrast') {
+ if (obj.filters.find((i) => i.type == 'Contrast')) {
+ obj.filters.find(
+ (i) => i.type == 'Contrast'
+ ).contrast = x / 100;
+ } else {
+ obj.filters.push(
+ new f.Contrast({ contrast: x / 100 })
+ );
+ }
+ } else if (filter == 'filter-saturation') {
+ if (obj.filters.find((i) => i.type == 'Saturation')) {
+ obj.filters.find(
+ (i) => i.type == 'Saturation'
+ ).saturation = x / 100;
+ } else {
+ obj.filters.push(
+ new f.Saturation({ saturation: x / 100 })
+ );
+ }
+ } else if (filter == 'filter-vibrance') {
+ if (obj.filters.find((i) => i.type == 'Vibrance')) {
+ obj.filters.find(
+ (i) => i.type == 'Vibrance'
+ ).vibrance = x / 100;
+ } else {
+ obj.filters.push(
+ new f.Vibrance({ vibrance: x / 100 })
+ );
+ }
+ } else if (filter == 'filter-hue') {
+ if (obj.filters.find((i) => i.type == 'HueRotation')) {
+ obj.filters.find(
+ (i) => i.type == 'HueRotation'
+ ).rotation = x / 100;
+ } else {
+ obj.filters.push(
+ new f.HueRotation({ rotation: x / 100 })
+ );
+ }
+ }
+ obj.applyFilters();
+ canvas.renderAll();
+ }
+ },
+ onfinish: function (x) {
+ save();
+ },
+ });
+ sliders.push({ name: filter, slider: slider });
+ });
+ }
+
+ var selectchroma = document.getElementById('chroma-distance');
+ chromaslider = new RangeSlider(selectchroma, {
+ design: '2d',
+ theme: 'default',
+ handle: 'round',
+ popup: null,
+ showMinMaxLabels: false,
+ unit: '%',
+ min: 1,
+ max: 100,
+ value: 1,
+ step: 1,
+ onmove: function (x) {
+ if (canvas.getActiveObject()) {
+ var obj = canvas.getActiveObject();
+ if (obj.filters.find((x) => x.type == 'RemoveColor')) {
+ obj.filters.find((x) => x.type == 'RemoveColor').distance =
+ x / 100;
+ }
+ obj.applyFilters();
+ canvas.renderAll();
+ }
+ },
+ onfinish: function (x) {
+ save();
+ },
+ });
+
+ var selectnoise = document.getElementById('filter-noise');
+ noiseslider = new RangeSlider(selectnoise, {
+ design: '2d',
+ theme: 'default',
+ handle: 'round',
+ popup: null,
+ showMinMaxLabels: false,
+ unit: '%',
+ min: 0,
+ max: 1000,
+ value: 0,
+ step: 1,
+ onmove: function (x) {
+ if (canvas.getActiveObject()) {
+ var obj = canvas.getActiveObject();
+ if (obj.filters.find((x) => x.type == 'Noise')) {
+ obj.filters.find((x) => x.type == 'Noise').noise = x;
+ } else {
+ obj.filters.push(
+ new f.Noise({
+ noise: x,
+ })
+ );
+ }
+ obj.applyFilters();
+ canvas.renderAll();
+ }
+ },
+ onfinish: function (x) {
+ save();
+ },
+ });
+
+ var selectblur = document.getElementById('filter-blur');
+ blurslider = new RangeSlider(selectblur, {
+ design: '2d',
+ theme: 'default',
+ handle: 'round',
+ popup: null,
+ showMinMaxLabels: false,
+ unit: '%',
+ min: 0,
+ max: 100,
+ value: 0,
+ step: 1,
+ onmove: function (x) {
+ if (canvas.getActiveObject()) {
+ var obj = canvas.getActiveObject();
+ if (obj.filters.find((x) => x.type == 'Blur')) {
+ obj.filters.find((x) => x.type == 'Blur').blur = x / 100;
+ } else {
+ obj.filters.push(
+ new f.Blur({
+ blur: x / 100,
+ })
+ );
+ }
+ }
+ obj.applyFilters();
+ canvas.renderAll();
+ },
+ onfinish: function (x) {
+ save();
+ },
+ });
+
+ $('#filters-list').val('none');
+ $('#filters-list').niceSelect();
+
+ initFilterSliders();
+});
diff --git a/src/js/functions.js b/src/js/functions.js
new file mode 100644
index 0000000..11ad5ff
--- /dev/null
+++ b/src/js/functions.js
@@ -0,0 +1,5971 @@
+// Resize the canvas
+function resizeCanvas() {
+ canvas.discardActiveObject();
+ canvas.setHeight($('#canvas-area').height());
+ canvas.setWidth($('#canvas-area').width());
+ artboard.set({
+ left: canvas.get('width') / 2 - artboard.get('width') / 2,
+ top: canvas.get('height') / 2 - artboard.get('height') / 2,
+ });
+ canvas.renderAll();
+ animate(false, currenttime);
+ initLines();
+}
+window.addEventListener('resize', resizeCanvas, false);
+resizeCanvas();
+
+// Highlight layers when selecting objects in the canvas, scroll into view if needed
+function updateSelection(e) {
+ if (e.target.type == 'activeSelection') {
+ $('.layer-selected').removeClass('layer-selected');
+ canvas.getActiveObjects().forEach(function (object) {
+ if (
+ $('.layer').length > 0 &&
+ $(".layer[data-object='" + object.get('id') + "']").length > 0
+ ) {
+ $(".layer[data-object='" + object.get('id') + "']").addClass(
+ 'layer-selected'
+ );
+ if (e.e != undefined) {
+ document
+ .getElementsByClassName('layer-selected')[0]
+ .scrollIntoView();
+ }
+ }
+ });
+ } else {
+ if (
+ $('.layer').length > 0 &&
+ $(".layer[data-object='" + e.target.get('id') + "']").length > 0
+ ) {
+ $('.layer-selected').removeClass('layer-selected');
+ $(".layer[data-object='" + e.target.get('id') + "']").addClass(
+ 'layer-selected'
+ );
+ if (e.e != undefined) {
+ document
+ .getElementsByClassName('layer-selected')[0]
+ .scrollIntoView();
+ }
+ }
+ }
+}
+
+// Object has been modified, automatically add a keyframe
+function autoKeyframe(object, e, multi) {
+ if (e.action == 'drag') {
+ newKeyframe(
+ 'left',
+ object,
+ currenttime,
+ object.get('left'),
+ true
+ );
+ newKeyframe('top', object, currenttime, object.get('top'), true);
+ } else if (e.action == 'scale') {
+ newKeyframe(
+ 'scaleX',
+ object,
+ currenttime,
+ object.get('scaleX'),
+ true
+ );
+ newKeyframe(
+ 'scaleY',
+ object,
+ currenttime,
+ object.get('scaleY'),
+ true
+ );
+ newKeyframe(
+ 'left',
+ object,
+ currenttime,
+ object.get('left'),
+ true
+ );
+ newKeyframe('top', object, currenttime, object.get('top'), true);
+ newKeyframe(
+ 'width',
+ object,
+ currenttime,
+ object.get('width'),
+ true
+ );
+ newKeyframe(
+ 'height',
+ object,
+ currenttime,
+ object.get('height'),
+ true
+ );
+ } else if (e.action == 'rotate') {
+ newKeyframe(
+ 'angle',
+ object,
+ currenttime,
+ object.get('angle'),
+ true
+ );
+ if (multi) {
+ newKeyframe(
+ 'scaleX',
+ object,
+ currenttime,
+ object.get('scaleX'),
+ true
+ );
+ newKeyframe(
+ 'scaleY',
+ object,
+ currenttime,
+ object.get('scaleY'),
+ true
+ );
+ newKeyframe(
+ 'width',
+ object,
+ currenttime,
+ object.get('width'),
+ true
+ );
+ newKeyframe(
+ 'left',
+ object,
+ currenttime,
+ object.get('left'),
+ true
+ );
+ newKeyframe(
+ 'top',
+ object,
+ currenttime,
+ object.get('top'),
+ true
+ );
+ }
+ } else if (
+ e.action == 'resizing' ||
+ e.action == 'scaleX' ||
+ e.action == 'scaleY'
+ ) {
+ newKeyframe(
+ 'scaleX',
+ object,
+ currenttime,
+ object.get('scaleX'),
+ true
+ );
+ newKeyframe(
+ 'scaleY',
+ object,
+ currenttime,
+ object.get('scaleY'),
+ true
+ );
+ newKeyframe(
+ 'left',
+ object,
+ currenttime,
+ object.get('left'),
+ true
+ );
+ newKeyframe(
+ 'width',
+ object,
+ currenttime,
+ object.get('width'),
+ true
+ );
+ newKeyframe('top', object, currenttime, object.get('top'), true);
+ newKeyframe(
+ 'height',
+ object,
+ currenttime,
+ object.get('height'),
+ true
+ );
+ }
+}
+
+// Reselect
+function reselect(selection) {
+ tempselection = false;
+ if (selection.type == 'activeSelection') {
+ var objs = [];
+ for (let so of selection._objects) {
+ for (let obj of canvas.getObjects()) {
+ if (obj.get('id') === so.get('id')) {
+ objs.push(obj);
+ break;
+ }
+ }
+ }
+ canvas.setActiveObject(
+ new fabric.ActiveSelection(objs, {
+ canvas: canvas,
+ })
+ );
+ canvas.renderAll();
+ } else {
+ if (selection.get('type') == 'group') {
+ canvas.setActiveObject(canvas.getItemById(selection.get('id')));
+ } else {
+ canvas.setActiveObject(selection);
+ }
+ canvas.renderAll();
+ }
+}
+
+// Group objects
+function group() {
+ var objects = canvas.getActiveObjects();
+ var object_ids = [];
+ var newgroup = new fabric.Group();
+ objects.forEach(function (object) {
+ newgroup.addWithUpdate(object);
+ object.set({ inGroup: true });
+ $(".layer[data-object='" + object.get('id') + "']").remove();
+ object_ids.push(object.get('id'));
+ $('#' + object.get('id')).remove();
+ canvas.remove(object);
+ });
+ //var newgroup = canvas.getActiveObject().toGroup();
+ newgroup.set({
+ id: 'Group' + layer_count,
+ objectCaching: false,
+ isGroup: true,
+ color: '#F1890E',
+ type: 'group',
+ stroke: '#000',
+ strokeUniform: true,
+ strokeWidth: 0,
+ paintFirst: 'stroke',
+ absolutePositioned: true,
+ inGroup: false,
+ strokeDashArray: false,
+ objectCaching: true,
+ shadow: {
+ color: 'black',
+ offsetX: 0,
+ offsetY: 0,
+ blur: 0,
+ opacity: 0,
+ },
+ });
+ groups.push({ id: newgroup.get('id'), objects: object_ids });
+ canvas.renderAll();
+ newLayer(newgroup);
+ canvas.setActiveObject(newgroup);
+ keyframes.sort(function (a, b) {
+ if (a.id.indexOf('Group') >= 0 && b.id.indexOf('Group') == -1) {
+ return 1;
+ } else if (
+ b.id.indexOf('Group') >= 0 &&
+ a.id.indexOf('Group') == -1
+ ) {
+ return -1;
+ } else {
+ return 0;
+ }
+ });
+ save();
+}
+$(document).on('click', '#group-objects', group);
+
+// Ungroup SVG
+function unGroup(group) {
+ canvas.discardActiveObject();
+ canvas.renderAll();
+ tempgroup = group._objects;
+ group._restoreObjectsState();
+ $(".layer[data-object='" + group.get('id') + "']").remove();
+ $('#' + group.get('id')).remove();
+ canvas.remove(group);
+ keyframes = $.grep(keyframes, function (e) {
+ return e.id != group.get('id');
+ });
+ p_keyframes = $.grep(p_keyframes, function (e) {
+ return e.id != group.get('id');
+ });
+ objects = $.grep(objects, function (e) {
+ return e.id != group.get('id');
+ });
+ canvas.renderAll();
+ for (var i = 0; i < tempgroup.length; i++) {
+ if (tempgroup[i].inGroup) {
+ canvas.add(tempgroup[i]);
+ renderLayer(tempgroup[i]);
+ props.forEach(function (prop) {
+ if (
+ prop != 'top' &&
+ prop != 'scaleY' &&
+ prop != 'width' &&
+ prop != 'height' &&
+ prop != 'shadow.offsetX' &&
+ prop != 'shadow.offsetY' &&
+ prop != 'shadow.opacity' &&
+ prop != 'shadow.blur' &&
+ prop != 'lineHeight'
+ ) {
+ renderProp(prop, tempgroup[i]);
+ }
+ });
+ const keyarr = $.grep(keyframes, function (e) {
+ return e.id == tempgroup[i].id;
+ });
+ keyarr.forEach(function (keyframe) {
+ if (
+ keyframe.name != 'top' &&
+ keyframe.name != 'scaleY' &&
+ keyframe.name != 'width' &&
+ keyframe.name != 'height' &&
+ keyframe.name != 'shadow.offsetX' &&
+ keyframe.name != 'shadow.offsetY' &&
+ keyframe.name != 'shadow.opacity' &&
+ keyframe.name != 'shadow.blur' &&
+ keyframe.name != 'lineHeight'
+ ) {
+ renderKeyframe(
+ canvas.getItemById(keyframe.id),
+ keyframe.name,
+ keyframe.t
+ );
+ }
+ });
+ }
+ }
+ canvas.renderAll();
+ save();
+}
+$(document).on('click', '#ungroup-objects', function () {
+ if (canvas.getActiveObject()) {
+ unGroup(canvas.getActiveObject());
+ }
+});
+
+// Regroup SVG
+function reGroup(id) {
+ var group = [];
+ var objects = [];
+ groups
+ .find((x) => x.id == id)
+ .objects.forEach(function (object) {
+ objects.push(canvas.getItemById(object));
+ });
+ var activeselection = new fabric.ActiveSelection(objects);
+ var newgroup = activeselection.toGroup();
+ newgroup.set({
+ id: id,
+ objectCaching: false,
+ });
+ canvas.add(newgroup);
+ canvas.renderAll();
+}
+
+// Keep record canvas up to date
+function updateRecordCanvas() {
+ canvasrecord.setWidth(artboard.width);
+ canvasrecord.setHeight(artboard.height);
+ canvasrecord.width = artboard.width;
+ canvasrecord.height = artboard.height;
+ canvas.clipPath = null;
+ objects.forEach(async function (object) {
+ var obj = canvas.getItemById(object.id);
+ if (obj.filters) {
+ if (obj.filters.length > 0) {
+ object.filters = [];
+ obj.filters.forEach(function (filter) {
+ if (
+ filter.type == 'BlackWhite' ||
+ filter.type == 'Invert' ||
+ filter.type == 'Sepia' ||
+ filter.type == 'Kodachrome' ||
+ filter.type == 'Polaroid' ||
+ filter.type == 'Technicolor' ||
+ filter.type == 'Brownie' ||
+ filter.type == 'Vintage'
+ ) {
+ object.filters.push({ type: filter.type });
+ } else if (filter.type == 'Brightness') {
+ object.filters.push({
+ type: filter.type,
+ value: filter.brightness,
+ });
+ } else if (filter.type == 'Contrast') {
+ object.filters.push({
+ type: filter.type,
+ value: filter.contrast,
+ });
+ } else if (filter.type == 'Vibrance') {
+ object.filters.push({
+ type: filter.type,
+ value: filter.vibrance,
+ });
+ } else if (filter.type == 'Saturation') {
+ object.filters.push({
+ type: filter.type,
+ value: filter.saturation,
+ });
+ } else if (filter.type == 'HueRotation') {
+ object.filters.push({
+ type: filter.type,
+ value: filter.rotation,
+ });
+ } else if (filter.type == 'Blur') {
+ object.filters.push({
+ type: filter.type,
+ value: filter.blur,
+ });
+ } else if (filter.type == 'Noise') {
+ object.filters.push({
+ type: filter.type,
+ value: filter.noise,
+ });
+ } else if (filter.type == 'RemoveColor') {
+ object.filters.push({
+ type: filter.type,
+ distance: filter.distance,
+ color: filter.color,
+ });
+ }
+ });
+ obj.filters = [];
+ obj.applyFilters();
+ var backend = fabric.filterBackend;
+ if (backend && backend.evictCachesForKey) {
+ backend.evictCachesForKey(obj.cacheKey);
+ backend.evictCachesForKey(obj.cacheKey + '_filtered');
+ }
+ if (
+ obj.filters.length > 0 &&
+ obj.get('id').indexOf('Video') >= 0
+ ) {
+ await obj.setElement(obj.saveElem);
+ }
+ } else {
+ object.filters = [];
+ }
+ } else {
+ object.filters = [];
+ }
+ });
+ const canvassave = canvas.toJSON([
+ 'volume',
+ 'audioSrc',
+ 'defaultLeft',
+ 'defaultTop',
+ 'defaultScaleX',
+ 'defaultScaleY',
+ 'notnew',
+ 'starttime',
+ 'top',
+ 'left',
+ 'width',
+ 'height',
+ 'scaleX',
+ 'scaleY',
+ 'flipX',
+ 'flipY',
+ 'originX',
+ 'originY',
+ 'transformMatrix',
+ 'stroke',
+ 'strokeWidth',
+ 'strokeDashArray',
+ 'strokeLineCap',
+ 'strokeDashOffset',
+ 'strokeLineJoin',
+ 'strokeMiterLimit',
+ 'angle',
+ 'opacity',
+ 'fill',
+ 'globalCompositeOperation',
+ 'shadow',
+ 'clipTo',
+ 'visible',
+ 'backgroundColor',
+ 'skewX',
+ 'skewY',
+ 'fillRule',
+ 'paintFirst',
+ 'clipPath',
+ 'strokeUniform',
+ 'rx',
+ 'ry',
+ 'selectable',
+ 'hasControls',
+ 'subTargetCheck',
+ 'id',
+ 'hoverCursor',
+ 'defaultCursor',
+ 'isEditing',
+ 'source',
+ 'assetType',
+ 'duration',
+ 'inGroup',
+ ]);
+ canvas.clipPath = artboard;
+ canvasrecord.loadFromJSON(canvassave, function () {
+ if (canvasrecord.getItemById('center_h')) {
+ canvasrecord.remove(canvasrecord.getItemById('center_h'));
+ canvasrecord.remove(canvasrecord.getItemById('center_v'));
+ }
+ if (canvasrecord.getItemById('line_h')) {
+ canvasrecord.remove(canvasrecord.getItemById('line_h'));
+ canvasrecord.remove(canvasrecord.getItemById('line_v'));
+ }
+ canvasrecord.renderAll();
+ canvasrecord.setWidth(artboard.width);
+ canvasrecord.setHeight(artboard.height);
+ canvasrecord.width = artboard.width;
+ canvasrecord.height = artboard.height;
+ canvasrecord.renderAll();
+ objects.forEach(function (object) {
+ replaceSource(
+ canvasrecord.getItemById(object.id),
+ canvasrecord
+ );
+ replaceSource(canvas.getItemById(object.id), canvas);
+ });
+ });
+}
+
+// Download recording
+function downloadRecording(chunks) {
+ $('#download-real').html('Downloading...');
+ if ($('input[name=radio]:checked').val() == 'webm') {
+ var url = URL.createObjectURL(
+ new Blob(chunks, {
+ type: 'video/webm',
+ })
+ );
+ const a = document.createElement('a');
+ a.style.display = 'none';
+ a.href = url;
+ a.download = name;
+ document.body.appendChild(a);
+ a.click();
+ recording = false;
+ currenttime = 0;
+ animate(false, 0);
+ $('#seekbar').offset({
+ left:
+ offset_left +
+ $('#inner-timeline').offset().left +
+ currenttime / timelinetime,
+ });
+ canvas.renderAll();
+ resizeCanvas();
+ $('#download-real').html('Download');
+ $('#download-real').removeClass('downloading');
+ updateRecordCanvas();
+ } else if ($('input[name=radio]:checked').val() == 'mp4') {
+ type = 'video/mp4';
+ } else {
+ convertStreams(new Blob(chunks, { type: 'video/webm' }), 'gif');
+ }
+}
+
+$('#download-real').on('click', record);
+
+// Save everything in the canvas (for undo/redo/autosave)
+function save() {
+ redo = [];
+ redoarr = [];
+ if (state) {
+ undo.push(state);
+ undoarr.push(statearr);
+ }
+ canvas.clipPath = null;
+ state = canvas.toJSON([
+ 'volume',
+ 'audioSrc',
+ 'top',
+ 'left',
+ 'width',
+ 'height',
+ 'scaleX',
+ 'scaleY',
+ 'flipX',
+ 'flipY',
+ 'originX',
+ 'originY',
+ 'transformMatrix',
+ 'stroke',
+ 'strokeWidth',
+ 'strokeDashArray',
+ 'strokeLineCap',
+ 'strokeDashOffset',
+ 'strokeLineJoin',
+ 'strokeMiterLimit',
+ 'angle',
+ 'opacity',
+ 'fill',
+ 'globalCompositeOperation',
+ 'shadow',
+ 'clipTo',
+ 'visible',
+ 'backgroundColor',
+ 'skewX',
+ 'skewY',
+ 'fillRule',
+ 'paintFirst',
+ 'clipPath',
+ 'strokeUniform',
+ 'rx',
+ 'ry',
+ 'selectable',
+ 'hasControls',
+ 'subTargetCheck',
+ 'id',
+ 'hoverCursor',
+ 'defaultCursor',
+ 'isEditing',
+ 'source',
+ 'assetType',
+ 'duration',
+ 'inGroup',
+ 'filters',
+ ]);
+ canvas.clipPath = artboard;
+ statearr = {
+ keyframes: JSON.parse(JSON.stringify(keyframes)),
+ p_keyframes: JSON.parse(JSON.stringify(p_keyframes)),
+ objects: JSON.parse(JSON.stringify(objects)),
+ colormode: colormode,
+ duration: duration,
+ currenttime: currenttime,
+ };
+ if (undo.length >= 1) {
+ $('#undo').addClass('history-active');
+ } else {
+ $('#undo').removeClass('history-active');
+ }
+ if (redo.length >= 1) {
+ $('#redo').addClass('history-active');
+ } else {
+ $('#redo').removeClass('history-active');
+ }
+
+ updateRecordCanvas();
+ autoSave();
+}
+
+// Duplicate object
+function copyObject() {
+ if (clipboard) {
+ if (cliptype == 'object') {
+ if (clipboard.type == 'activeSelection') {
+ clipboard._objects.forEach(function (clone) {
+ clone.clone(function (cloned) {
+ cloned.set({
+ id: 'Shape' + layer_count,
+ });
+ canvas.add(cloned);
+ canvas.renderAll();
+ newLayer(cloned);
+ canvas.setActiveObject(cloned);
+ });
+ });
+ } else {
+ clipboard.clone(function (cloned) {
+ cloned.set({
+ id: 'Shape' + layer_count,
+ });
+ canvas.add(cloned);
+ canvas.renderAll();
+ newLayer(cloned);
+ canvas.setActiveObject(cloned);
+ });
+ }
+ save();
+ } else {
+ copyKeyframes();
+ }
+ }
+}
+
+// Replace the source of an object when reloading the canvas (since Fabric needs a DOM reference for the objects)
+function replaceSource(object, canvas) {
+ if (object == null) {
+ return false;
+ }
+ if (object.get('type') != 'group') {
+ if (object.type) {
+ if (object.type == 'image') {
+ if (object.get('id').indexOf('Video') >= 0) {
+ var vidObj = document.createElement('video');
+ var vidSrc = document.createElement('source');
+ vidSrc.src = object.get('source');
+ vidObj.crossOrigin = 'anonymous';
+ vidObj.appendChild(vidSrc);
+ vidObj.addEventListener('loadeddata', function () {
+ vidObj.width = this.videoWidth;
+ vidObj.height = this.videoHeight;
+ vidObj.currentTime = 0;
+ vidObj.muted = false;
+ async function waitLoad() {
+ if (vidObj.readyState >= 3) {
+ object.setElement(vidObj);
+ object.saveElem = vidObj;
+ await canvas.renderAll();
+ await animate(false, currenttime);
+ if (
+ objects.find((x) => x.id == object.get('id'))
+ .filters
+ ) {
+ if (
+ objects.find((x) => x.id == object.get('id'))
+ .filters.length > 0
+ ) {
+ objects
+ .find((x) => x.id == object.get('id'))
+ .filters.forEach(function (filter) {
+ if (filter.type == 'Sepia') {
+ object.filters.push(new f.Sepia());
+ } else if (filter.type == 'Invert') {
+ object.filters.push(new f.Invert());
+ } else if (filter.type == 'BlackWhite') {
+ object.filters.push(new f.BlackWhite());
+ } else if (filter.type == 'Kodachrome') {
+ object.filters.push(new f.Kodachrome());
+ } else if (filter.type == 'Polaroid') {
+ object.filters.push(new f.Polaroid());
+ } else if (filter.type == 'Technicolor') {
+ object.filters.push(new f.Technicolor());
+ } else if (filter.type == 'Vintage') {
+ object.filters.push(new f.Vintage());
+ } else if (filter.type == 'Brownie') {
+ object.filters.push(new f.Brownie());
+ } else if (filter.type == 'Brightness') {
+ object.filters.push(
+ new f.Brightness({
+ brightness: filter.value,
+ })
+ );
+ } else if (filter.type == 'Contrast') {
+ object.filters.push(
+ new f.Contrast({ contrast: filter.value })
+ );
+ } else if (filter.type == 'Saturation') {
+ object.filters.push(
+ new f.Saturation({
+ saturation: filter.value,
+ })
+ );
+ } else if (filter.type == 'Vibrance') {
+ object.filters.push(
+ new f.Vibrance({ vibrance: filter.value })
+ );
+ } else if (filter.type == 'HueRotation') {
+ object.filters.push(
+ new f.HueRotation({
+ rotation: filter.value,
+ })
+ );
+ } else if (filter.type == 'Noise') {
+ object.filters.push(
+ new f.Noise({ noise: filter.value })
+ );
+ } else if (filter.type == 'Blur') {
+ object.filters.push(
+ new f.Blur({ blur: filter.value })
+ );
+ } else if (filter.type == 'RemoveColor') {
+ object.filters.push(
+ new f.RemoveColor({
+ distance: filter.distance,
+ color: filter.color,
+ })
+ );
+ }
+ });
+ object.applyFilters();
+ canvas.renderAll();
+ }
+ }
+ } else {
+ window.setTimeout(function () {
+ waitLoad();
+ }, 100);
+ }
+ }
+ window.setTimeout(function () {
+ waitLoad();
+ }, 100);
+ });
+ vidObj.currentTime = 0;
+ } else {
+ //var img = new Image();
+ //img.onload = function(){
+ // object.setElement(img);
+ // canvas.renderAll();
+ if (objects.find((x) => x.id == object.get('id')).filters) {
+ if (
+ objects.find((x) => x.id == object.get('id')).filters
+ .length > 0
+ ) {
+ objects
+ .find((x) => x.id == object.get('id'))
+ .filters.forEach(function (filter) {
+ if (filter.type == 'Sepia') {
+ object.filters.push(new f.Sepia());
+ } else if (filter.type == 'Invert') {
+ object.filters.push(new f.Invert());
+ } else if (filter.type == 'BlackWhite') {
+ object.filters.push(new f.BlackWhite());
+ } else if (filter.type == 'Kodachrome') {
+ object.filters.push(new f.Kodachrome());
+ } else if (filter.type == 'Polaroid') {
+ object.filters.push(new f.Polaroid());
+ } else if (filter.type == 'Technicolor') {
+ object.filters.push(new f.Technicolor());
+ } else if (filter.type == 'Vintage') {
+ object.filters.push(new f.Vintage());
+ } else if (filter.type == 'Brownie') {
+ object.filters.push(new f.Brownie());
+ } else if (filter.type == 'Brightness') {
+ object.filters.push(
+ new f.Brightness({ brightness: filter.value })
+ );
+ } else if (filter.type == 'Contrast') {
+ object.filters.push(
+ new f.Contrast({ contrast: filter.value })
+ );
+ } else if (filter.type == 'Saturation') {
+ object.filters.push(
+ new f.Saturation({ saturation: filter.value })
+ );
+ } else if (filter.type == 'Vibrance') {
+ object.filters.push(
+ new f.Vibrance({ vibrance: filter.value })
+ );
+ } else if (filter.type == 'HueRotation') {
+ object.filters.push(
+ new f.HueRotation({ rotation: filter.value })
+ );
+ } else if (filter.type == 'Noise') {
+ object.filters.push(
+ new f.Noise({ noise: filter.value })
+ );
+ } else if (filter.type == 'Blur') {
+ object.filters.push(
+ new f.Blur({ blur: filter.value })
+ );
+ } else if (filter.type == 'RemoveColor') {
+ object.filters.push(
+ new f.RemoveColor({
+ distance: filter.distance,
+ color: filter.color,
+ })
+ );
+ }
+ });
+ object.applyFilters();
+ canvas.renderAll();
+ } else {
+ object.filters = [];
+ object.applyFilters();
+ canvas.renderAll();
+ }
+ }
+
+ //}
+ //img.src = window.URL.createObjectURL(new Blob(files.find(x => x.name == object.get("id")).file, {type:"image/png"}));
+ }
+ }
+ }
+ }
+}
+
+// Perform undo/redo
+function undoRedo(newState, saveState, newArrState, saveArrState) {
+ saveState.push(state);
+ saveArrState.push(statearr);
+ statearr = newArrState.pop();
+ state = newState.pop();
+ keyframes = statearr.keyframes;
+ p_keyframes = statearr.p_keyframes;
+ objects = statearr.objects;
+ colormode = statearr.colormode;
+ duration = statearr.duration;
+ currenttime = statearr.currenttime;
+ canvas.clipPath = null;
+ canvas.loadFromJSON(state, function () {
+ canvas.clipPath = artboard;
+ canvas.getItemById('line_h').set({ opacity: 0 });
+ canvas.getItemById('line_v').set({ opacity: 0 });
+ canvas.renderAll();
+ $('.object-props').remove();
+ $('.layer').remove();
+ objects.forEach(function (object) {
+ replaceSource(canvas.getItemById(object.id), canvas);
+ renderLayer(canvas.getItemById(object.id));
+ props.forEach(function (prop) {
+ if (
+ prop != 'top' &&
+ prop != 'scaleY' &&
+ prop != 'width' &&
+ prop != 'height' &&
+ prop != 'shadow.offsetX' &&
+ prop != 'shadow.offsetY' &&
+ prop != 'shadow.opacity' &&
+ prop != 'shadow.blur' &&
+ prop != 'lineHeight'
+ ) {
+ renderProp(prop, canvas.getItemById(object.id));
+ }
+ });
+ });
+ keyframes.forEach(function (keyframe) {
+ if (
+ keyframe.name != 'top' &&
+ keyframe.name != 'scaleY' &&
+ keyframe.name != 'width' &&
+ keyframe.name != 'height' &&
+ keyframe.name != 'shadow.offsetX' &&
+ keyframe.name != 'shadow.offsetY' &&
+ keyframe.name != 'shadow.opacity' &&
+ keyframe.name != 'shadow.blur' &&
+ keyframe.name != 'lineHeight'
+ ) {
+ renderKeyframe(
+ canvas.getItemById(keyframe.id),
+ keyframe.name,
+ keyframe.t
+ );
+ }
+ });
+ animate(false, currenttime);
+ });
+ if (undo.length >= 1) {
+ $('#undo').addClass('history-active');
+ } else {
+ $('#undo').removeClass('history-active');
+ }
+ if (redo.length >= 1) {
+ $('#redo').addClass('history-active');
+ } else {
+ $('#redo').removeClass('history-active');
+ }
+}
+
+// Undo/redo buttons
+$(document).on('click', '#undo', function () {
+ if (undo.length >= 1) {
+ undoRedo(undo, redo, undoarr, redoarr);
+ }
+});
+$(document).on('click', '#redo', function () {
+ if (undo.length >= 1) {
+ undoRedo(redo, undo, redoarr, undoarr);
+ }
+});
+
+// Generate keyframes
+function keyframeChanges(object, type, id, selection) {
+ if (object.get('type') == 'rect') {
+ object.set({
+ rx: parseFloat($('#object-corners input').val()),
+ ry: parseFloat($('#object-corners input').val()),
+ });
+ } else if (object.get('type') == 'textbox') {
+ object.set({
+ charSpacing: parseFloat($('#text-h input').val()) * 10,
+ lineHeight: parseFloat($('#text-v input').val() / 100),
+ });
+ canvas.renderAll();
+ }
+ canvas.renderAll();
+ if (type && type == 'opacity') {
+ newKeyframe(
+ 'opacity',
+ object,
+ currenttime,
+ object.get('opacity'),
+ true
+ );
+ } else if (type && type == 'opacity3') {
+ newKeyframe(
+ 'charSpacing',
+ object,
+ currenttime,
+ object.get('charSpacing'),
+ true
+ );
+ newKeyframe(
+ 'lineHeight',
+ object,
+ currenttime,
+ object.get('lineHeight'),
+ true
+ );
+ } else {
+ if (id == 'object-x' || id == 'object-y') {
+ newKeyframe(
+ 'left',
+ object,
+ currenttime,
+ object.get('left'),
+ true
+ );
+ newKeyframe(
+ 'top',
+ object,
+ currenttime,
+ object.get('top'),
+ true
+ );
+ } else if (id == 'object-w' || id == 'object-h') {
+ newKeyframe(
+ 'scaleX',
+ object,
+ currenttime,
+ object.get('scaleX'),
+ true
+ );
+ newKeyframe(
+ 'scaleY',
+ object,
+ currenttime,
+ object.get('scaleY'),
+ true
+ );
+ newKeyframe(
+ 'width',
+ object,
+ currenttime,
+ object.get('width'),
+ true
+ );
+ newKeyframe(
+ 'height',
+ object,
+ currenttime,
+ object.get('width'),
+ true
+ );
+ if (selection) {
+ newKeyframe(
+ 'left',
+ object,
+ currenttime,
+ object.get('left'),
+ true
+ );
+ newKeyframe(
+ 'top',
+ object,
+ currenttime,
+ object.get('top'),
+ true
+ );
+ }
+ } else if (id == 'object-r') {
+ newKeyframe(
+ 'angle',
+ object,
+ currenttime,
+ object.get('angle'),
+ true
+ );
+ if (selection) {
+ newKeyframe(
+ 'left',
+ object,
+ currenttime,
+ object.get('left'),
+ true
+ );
+ newKeyframe(
+ 'top',
+ object,
+ currenttime,
+ object.get('top'),
+ true
+ );
+ newKeyframe(
+ 'scaleX',
+ object,
+ currenttime,
+ object.get('scaleX'),
+ true
+ );
+ newKeyframe(
+ 'scaleY',
+ object,
+ currenttime,
+ object.get('scaleY'),
+ true
+ );
+ newKeyframe(
+ 'width',
+ object,
+ currenttime,
+ object.get('width'),
+ true
+ );
+ newKeyframe(
+ 'height',
+ object,
+ currenttime,
+ object.get('width'),
+ true
+ );
+ }
+ } else if (id == 'object-stroke') {
+ newKeyframe(
+ 'strokeWidth',
+ object,
+ currenttime,
+ object.get('strokeWidth'),
+ true
+ );
+ newKeyframe(
+ 'stroke',
+ object,
+ currenttime,
+ object.get('stroke'),
+ true
+ );
+ } else if (
+ id == 'object-shadow-x' ||
+ id == 'object-shadow-y' ||
+ id == 'object-blur' ||
+ id == 'object-color-stroke-opacity'
+ ) {
+ newKeyframe(
+ 'shadow.color',
+ object,
+ currenttime,
+ object.shadow.color,
+ true
+ );
+ newKeyframe(
+ 'shadow.opacity',
+ object,
+ currenttime,
+ object.shadow.opacity,
+ true
+ );
+ newKeyframe(
+ 'shadow.offsetX',
+ object,
+ currenttime,
+ object.shadow.offsetX,
+ true
+ );
+ newKeyframe(
+ 'shadow.offsetY',
+ object,
+ currenttime,
+ object.shadow.offsetY,
+ true
+ );
+ newKeyframe(
+ 'shadow.blur',
+ object,
+ currenttime,
+ object.shadow.blur,
+ true
+ );
+ }
+ }
+ save();
+}
+
+// Play video
+function play() {
+ paused = false;
+ animate(true, currenttime);
+ $('#play-button').attr('src', 'assets/pause-button.svg');
+}
+
+// Pause video
+function pause() {
+ paused = true;
+ $('#play-button').attr('src', 'assets/play-button.svg');
+}
+
+// Set object value (while animating)
+function setObjectValue(prop, object, value, inst) {
+ if (object.get('type') != 'group') {
+ if (object.group) {
+ var group = object.group;
+ tempgroup = group._objects;
+ group._restoreObjectsState();
+ canvas.setActiveObject(group);
+ inst.remove(canvas.getActiveObject());
+ canvas.discardActiveObject();
+ inst.renderAll();
+ for (var i = 0; i < tempgroup.length; i++) {
+ inst.add(tempgroup[i]);
+ }
+ }
+ }
+ if (prop == 'left' && !recording) {
+ object.set(prop, value + artboard.get('left'));
+ } else if (prop == 'top' && !recording) {
+ object.set(prop, value + artboard.get('top'));
+ } else if (prop == 'shadow.blur') {
+ object.shadow.blur = value;
+ } else if (prop == 'shadow.color') {
+ object.shadow.color = value;
+ } else if (prop == 'shadow.offsetX') {
+ object.shadow.offsetX = value;
+ } else if (prop == 'shadow.offsetY') {
+ object.shadow.offsetY = value;
+ } else if (prop == 'shadow.blur') {
+ object.shadow.blur = value;
+ } else if (object.get('type') != 'group') {
+ object.set(prop, value);
+ } else if (prop != 'width') {
+ object.set(prop, value);
+ }
+ inst.renderAll();
+}
+
+// Find last keyframe in time from same object & property
+function lastKeyframe(keyframe, index) {
+ var temparr = keyframes.slice();
+ temparr.sort(function (a, b) {
+ return a.t - b.t;
+ });
+ temparr.length = temparr.findIndex((x) => x === keyframe);
+ temparr.reverse();
+ if (temparr.length == 0) {
+ return false;
+ } else {
+ for (var i = 0; i < temparr.length; i++) {
+ if (
+ temparr[i].id == keyframe.id &&
+ temparr[i].name == keyframe.name
+ ) {
+ return temparr[i];
+ break;
+ } else if (i == temparr.length - 1) {
+ return false;
+ }
+ }
+ }
+}
+
+// Check whether any keyframe exists for a certain property
+function checkAnyKeyframe(id, prop, inst) {
+ const object = inst.getItemById(id);
+ if (object.get('assetType') == 'audio') {
+ return false;
+ }
+ if (
+ object.get('type') != 'textbox' &&
+ (prop == 'charSpacing' || prop == 'lineHeight')
+ ) {
+ return false;
+ }
+ if (
+ object.get('type') == 'group' &&
+ (prop == 'shadow.opacity' ||
+ prop == 'shadow.color' ||
+ prop == 'shadow.offsetX' ||
+ prop == 'shadow.offsetY' ||
+ prop == 'shadow.blur')
+ ) {
+ return false;
+ }
+ const keyarr2 = $.grep(keyframes, function (e) {
+ return e.id == id && e.name == prop;
+ });
+ if (keyarr2.length == 0) {
+ const value = objects
+ .find((x) => x.id == id)
+ .defaults.find((x) => x.name == prop).value;
+ setObjectValue(prop, object, value, inst);
+ }
+}
+
+// Check if parameter is a DOM element
+function isDomElem(el) {
+ return el instanceof HTMLElement || el[0] instanceof HTMLElement
+ ? true
+ : false;
+}
+
+// Play videos when seeking/playing
+async function playVideos(time) {
+ objects.forEach(async function (object) {
+ var object = canvas.getItemById(object.id);
+ if (object == null) {
+ return false;
+ }
+ var inst = canvas;
+ var start = false;
+ if (recording) {
+ object = canvasrecord.getItemById(object.id);
+ inst = canvasrecord;
+ }
+ if (
+ object.get('id').indexOf('Video') >= 0 &&
+ p_keyframes.find((x) => x.id == object.id).trimstart +
+ p_keyframes.find((x) => x.id == object.id).start <=
+ time &&
+ p_keyframes.find((x) => x.id == object.id).end >= time
+ ) {
+ var tempfilters = object.filters;
+ if (object.filters.length > 0) {
+ object.filters = [];
+ object.applyFilters();
+ var image = object;
+ var backend = fabric.filterBackend;
+ if (backend && backend.evictCachesForKey) {
+ backend.evictCachesForKey(image.cacheKey);
+ backend.evictCachesForKey(image.cacheKey + '_filtered');
+ }
+ await object.setElement(object.saveElem);
+ }
+ object.set('visible', true);
+ inst.renderAll();
+ if ($(object.getElement())[0].paused == true) {
+ $(object.getElement())[0].currentTime = parseFloat(
+ (
+ (time -
+ p_keyframes.find((x) => x.id == object.id).start +
+ p_keyframes.find((x) => x.id == object.id).trimstart) /
+ 1000
+ ).toFixed(2)
+ );
+ }
+ if (!recording) {
+ var animation = {
+ value: 0,
+ };
+ var instance = anime({
+ targets: animation,
+ value: [currenttime, duration],
+ delay: 0,
+ duration: duration,
+ easing: 'linear',
+ autoplay: true,
+ update: async function () {
+ if (!paused && start) {
+ if (object.filters.length > 0) {
+ object.filters = [];
+ object.applyFilters();
+ var image = object;
+ var backend = fabric.filterBackend;
+ if (backend && backend.evictCachesForKey) {
+ backend.evictCachesForKey(image.cacheKey);
+ backend.evictCachesForKey(
+ image.cacheKey + '_filtered'
+ );
+ }
+ await object.setElement(object.saveElem);
+ }
+ if ($(object.getElement())[0].tagName == 'VIDEO') {
+ $(object.getElement())[0].play();
+ }
+ await inst.renderAll();
+ if (tempfilters.length > 0) {
+ object.filters = tempfilters;
+ object.applyFilters();
+ inst.renderAll();
+ }
+ } else if (paused) {
+ if (
+ isDomElem($(object.getElement())[0]) &&
+ $(object.getElement())[0].tagName == 'VIDEO'
+ ) {
+ $(object.getElement())[0].pause();
+ }
+ animation.value = duration + 1;
+ anime.remove(animation);
+ }
+ },
+ changeBegin: function () {
+ start = true;
+ },
+ });
+ if (paused) {
+ $(object.getElement())[0].currentTime = parseFloat(
+ (
+ (time -
+ p_keyframes.find((x) => x.id == object.id).start +
+ p_keyframes.find((x) => x.id == object.id)
+ .trimstart) /
+ 1000
+ ).toFixed(2)
+ );
+ await inst.renderAll();
+ if (tempfilters.length > 0) {
+ object.filters = tempfilters;
+ object.applyFilters();
+ inst.renderAll();
+ }
+ }
+ } else {
+ if ($(object.getElement())[0].paused == true) {
+ $(object.getElement())[0].play();
+ inst.renderAll();
+ }
+ }
+ } else if (object.get('id').indexOf('Video') >= 0) {
+ $(object.getElement())[0].pause();
+ object.set('visible', false);
+ inst.renderAll();
+ }
+ });
+}
+
+// Play background audio
+function playAudio(time) {
+ objects.forEach(async function (object) {
+ var start = false;
+ var obj = canvas.getItemById(object.id);
+ if (obj.get('assetType') == 'audio') {
+ var flag = false;
+ var animation = {
+ value: 0,
+ };
+ var instance = anime({
+ targets: animation,
+ value: [currenttime, duration],
+ delay: 0,
+ duration: duration,
+ easing: 'linear',
+ autoplay: true,
+ update: async function () {
+ if (start && play && !paused) {
+ if (
+ !flag &&
+ p_keyframes.find((x) => x.id == object.id).start <=
+ currenttime &&
+ p_keyframes.find((x) => x.id == object.id).end >=
+ currenttime
+ ) {
+ if (obj.get('src')) {
+ obj.get('src').currentTime =
+ (p_keyframes.find((x) => x.id == object.id)
+ .trimstart -
+ p_keyframes.find((x) => x.id == object.id).start +
+ currenttime) /
+ 1000;
+ obj.get('src').volume = obj.get('volume');
+ obj.get('src').play();
+ flag = true;
+ } else {
+ var audio = new Audio(obj.get('audioSrc'));
+ obj.set('src', audio);
+ audio.volume = obj.get('volume');
+ audio.crossOrigin = 'anonymous';
+ audio.currentTime =
+ (p_keyframes.find((x) => x.id == object.id)
+ .trimstart -
+ p_keyframes.find((x) => x.id == object.id).start +
+ currenttime) /
+ 1000;
+ audio.play();
+ flag = true;
+ }
+ } else if (
+ p_keyframes.find((x) => x.id == object.id).start >=
+ currenttime ||
+ p_keyframes.find((x) => x.id == object.id).end <=
+ currenttime
+ ) {
+ if (obj.get('src')) {
+ obj.get('src').pause();
+ }
+ }
+ } else if (paused) {
+ if (obj.get('src')) {
+ obj.get('src').pause();
+ anime.remove(animation);
+ }
+ }
+ },
+ changeBegin: function () {
+ start = true;
+ },
+ });
+ }
+ });
+}
+
+// Temp animate with render callback
+async function recordAnimate(time) {
+ anime.speed = 1;
+ //return new Promise(function(resolve){
+ var inst = canvasrecord;
+ if (animatedtext.length > 0) {
+ animatedtext.forEach(function (text) {
+ text.seek(time, inst);
+ inst.renderAll();
+ });
+ }
+ keyframes.forEach(function (keyframe, index) {
+ // Regroup if needed (groups break to animate their children, then regroup after children have animated)
+ if (groups.find((x) => x.id == keyframe.id)) {
+ if (!canvas.getItemById(keyframe.id)) {
+ reGroup(keyframe.id);
+ }
+ const object = canvas.getItemById(keyframe.id);
+ if (
+ currenttime <
+ p_keyframes.find((x) => x.id == keyframe.id).trimstart +
+ p_keyframes.find((x) => x.id == keyframe.id).start
+ ) {
+ object.set('visible', false);
+ inst.renderAll();
+ } else if (
+ currenttime >
+ p_keyframes.find((x) => x.id == keyframe.id).end ||
+ currenttime > duration
+ ) {
+ object.set('visible', false);
+ inst.renderAll();
+ } else {
+ object.set('visible', true);
+ inst.renderAll();
+ }
+ if (
+ currenttime >=
+ p_keyframes.find((x) => x.id == keyframe.id).trimstart +
+ p_keyframes.find((x) => x.id == keyframe.id).start
+ ) {
+ props.forEach(function (prop) {
+ checkAnyKeyframe(keyframe.id, prop, inst);
+ });
+ }
+ }
+
+ // Copy of setObjectValue function, seems to perform better inside the function
+ function setValue(prop, object, value, inst) {
+ if (object.get('type') != 'group') {
+ if (object.group) {
+ var group = object.group;
+ tempgroup = group._objects;
+ group._restoreObjectsState();
+ canvas.setActiveObject(group);
+ inst.remove(canvas.getActiveObject());
+ canvas.discardActiveObject();
+ inst.renderAll();
+ for (var i = 0; i < tempgroup.length; i++) {
+ inst.add(tempgroup[i]);
+ }
+ }
+ }
+ if (prop == 'left' && !recording) {
+ object.set(prop, value + artboard.get('left'));
+ } else if (prop == 'top' && !recording) {
+ object.set(prop, value + artboard.get('top'));
+ } else if (prop == 'shadow.blur') {
+ object.shadow.blur = value;
+ } else if (prop == 'shadow.color') {
+ object.shadow.color = value;
+ } else if (prop == 'shadow.offsetX') {
+ object.shadow.offsetX = value;
+ } else if (prop == 'shadow.offsetY') {
+ object.shadow.offsetY = value;
+ } else if (prop == 'shadow.blur') {
+ object.shadow.blur = value;
+ } else if (object.get('type') != 'group') {
+ object.set(prop, value);
+ } else if (prop != 'width') {
+ object.set(prop, value);
+ }
+ inst.renderAll();
+ }
+
+ // Find next keyframe in time from same object & property
+ function nextKeyframe(keyframe, index) {
+ var temparr = keyframes.slice();
+ temparr.sort(function (a, b) {
+ return a.t - b.t;
+ });
+ temparr.splice(0, temparr.findIndex((x) => x === keyframe) + 1);
+ if (temparr.length == 0) {
+ return false;
+ } else {
+ for (var i = 0; i < temparr.length; i++) {
+ if (
+ temparr[i].id == keyframe.id &&
+ temparr[i].name == keyframe.name
+ ) {
+ return temparr[i];
+ break;
+ } else if (i == temparr.length - 1) {
+ return false;
+ }
+ }
+ }
+ }
+
+ var object = canvasrecord.getItemById(keyframe.id);
+ if (
+ keyframe.t >= time &&
+ currenttime >=
+ p_keyframes.find((x) => x.id == keyframe.id).trimstart +
+ p_keyframes.find((x) => x.id == keyframe.id).start
+ ) {
+ var delay = 0;
+ var start = false;
+ var lasttime, lastprop;
+ // Find last keyframe in time from same object & property
+ var lastkey = lastKeyframe(keyframe, index);
+ if (!lastkey) {
+ lasttime = 0;
+ lastprop = objects
+ .find((x) => x.id == keyframe.id)
+ .defaults.find((x) => x.name == keyframe.name).value;
+ } else {
+ lasttime = lastkey.t;
+ lastprop = lastkey.value;
+ }
+ if (lastkey && lastkey.t >= time && !play) {
+ return;
+ }
+
+ // Initiate the animation
+ var animation = {
+ value: lastprop,
+ };
+ var instance = anime({
+ targets: animation,
+ delay: delay,
+ value: keyframe.value,
+ duration: keyframe.t - lasttime,
+ easing: keyframe.easing,
+ autoplay: false,
+ update: function () {
+ if (start && paused) {
+ anime.remove(animation);
+ }
+ },
+ changeBegin: function () {
+ start = true;
+ },
+ });
+
+ if (time - lasttime <= 0) {
+ instance.seek(0);
+ } else {
+ instance.seek(time - lasttime);
+ }
+
+ if (
+ parseFloat(lasttime) <= parseFloat(time) &&
+ parseFloat(keyframe.t) >= parseFloat(time)
+ ) {
+ setValue(keyframe.name, object, animation.value, inst);
+ }
+ } else if (keyframe.t < time && !nextKeyframe(keyframe, index)) {
+ var prop = keyframe.name;
+ if (prop == 'shadow.blur') {
+ if (object.shadow.blur != keyframe.value) {
+ setValue(keyframe.name, object, keyframe.value, inst);
+ }
+ } else if (prop == 'shadow.color') {
+ if (object.shadow.color != keyframe.value) {
+ setValue(keyframe.name, object, keyframe.value, inst);
+ }
+ } else if (prop == 'shadow.offsetX') {
+ if (object.shadow.offsetX != keyframe.value) {
+ setValue(keyframe.name, object, keyframe.value, inst);
+ }
+ } else if (prop == 'shadow.offsetY') {
+ if (object.shadow.offsetY != keyframe.value) {
+ setValue(keyframe.name, object, keyframe.value, inst);
+ }
+ } else {
+ if (object.get(prop) != keyframe.value) {
+ setValue(keyframe.name, object, keyframe.value, inst);
+ }
+ }
+ }
+ });
+
+ objects.forEach(function (object) {
+ if (object.id.indexOf('Group') == -1) {
+ const object2 = canvas.getItemById(object.id);
+ if (
+ currenttime <
+ p_keyframes.find((x) => x.id == object.id).trimstart +
+ p_keyframes.find((x) => x.id == object.id).start
+ ) {
+ object2.set('visible', false);
+ } else if (
+ currenttime >
+ p_keyframes.find((x) => x.id == object.id).end ||
+ currenttime > duration
+ ) {
+ object2.set('visible', false);
+ } else {
+ object2.set('visible', true);
+ }
+ if (
+ currenttime >=
+ p_keyframes.find((x) => x.id == object.id).trimstart +
+ p_keyframes.find((x) => x.id == object.id).start
+ ) {
+ props.forEach(function (prop) {
+ checkAnyKeyframe(object.id, prop, inst);
+ });
+ }
+ }
+ });
+ inst.renderAll();
+
+ playVideos(time);
+ //});
+}
+
+// Animate timeline (or seek to specific point in time)
+async function animate(play, time) {
+ anime.speed = speed;
+ if (!draggingPanel) {
+ var starttime = new Date();
+ var offset = time;
+ var inst = canvas;
+ keyframes.forEach(function (keyframe, index) {
+ // Find next keyframe in time from same object & property
+ function nextKeyframe(keyframe, index) {
+ var temparr = keyframes.slice();
+ temparr.sort(function (a, b) {
+ return a.t - b.t;
+ });
+ temparr.splice(
+ 0,
+ temparr.findIndex((x) => x === keyframe) + 1
+ );
+ if (temparr.length == 0) {
+ return false;
+ } else {
+ for (var i = 0; i < temparr.length; i++) {
+ if (
+ temparr[i].id == keyframe.id &&
+ temparr[i].name == keyframe.name
+ ) {
+ return temparr[i];
+ break;
+ } else if (i == temparr.length - 1) {
+ return false;
+ }
+ }
+ }
+ }
+ // Regroup if needed (groups break to animate their children, then regroup after children have animated)
+ if (groups.find((x) => x.id == keyframe.id)) {
+ if (!canvas.getItemById(keyframe.id)) {
+ reGroup(keyframe.id);
+ }
+ const object = canvas.getItemById(keyframe.id);
+ if (
+ currenttime <
+ p_keyframes.find((x) => x.id == keyframe.id).trimstart +
+ p_keyframes.find((x) => x.id == keyframe.id).start
+ ) {
+ object.set('visible', false);
+ inst.renderAll();
+ } else if (
+ currenttime >
+ p_keyframes.find((x) => x.id == keyframe.id).end ||
+ currenttime > duration
+ ) {
+ object.set('visible', false);
+ inst.renderAll();
+ } else {
+ object.set('visible', true);
+ inst.renderAll();
+ }
+ if (
+ currenttime >=
+ p_keyframes.find((x) => x.id == keyframe.id).trimstart +
+ p_keyframes.find((x) => x.id == keyframe.id).start
+ ) {
+ props.forEach(function (prop) {
+ checkAnyKeyframe(keyframe.id, prop, inst);
+ });
+ }
+ }
+
+ // Copy of setObjectValue function, seems to perform better inside the function
+ function setValue(prop, object, value, inst) {
+ if (object.get('assetType') == 'audio' && play) {
+ if (object.get('src')) {
+ object.get('src').volume = value;
+ object.set('volume', value);
+ }
+ return false;
+ }
+ if (object.get('type') != 'group') {
+ if (object.group) {
+ /*
+ var group = object.group;
+ tempgroup = group._objects;
+ group._restoreObjectsState();
+ canvas.setActiveObject(group);
+ inst.remove(canvas.getActiveObject());
+ canvas.discardActiveObject();
+ inst.renderAll();
+ for (var i = 0; i < tempgroup.length; i++) {
+ inst.add(tempgroup[i]);
+ }
+ */
+ }
+ }
+ if (prop == 'left' && !recording) {
+ object.set(prop, value + artboard.get('left'));
+ } else if (prop == 'top' && !recording) {
+ object.set(prop, value + artboard.get('top'));
+ } else if (prop == 'shadow.blur') {
+ object.shadow.blur = value;
+ } else if (prop == 'shadow.color') {
+ object.shadow.color = value;
+ } else if (prop == 'shadow.offsetX') {
+ object.shadow.offsetX = value;
+ } else if (prop == 'shadow.offsetY') {
+ object.shadow.offsetY = value;
+ } else if (prop == 'shadow.blur') {
+ object.shadow.blur = value;
+ } else if (object.get('type') != 'group') {
+ object.set(prop, value);
+ } else if (prop != 'width') {
+ object.set(prop, value);
+ }
+ inst.renderAll();
+ }
+
+ var object = canvas.getItemById(keyframe.id);
+ if (
+ keyframe.t >= time &&
+ currenttime >=
+ p_keyframes.find((x) => x.id == keyframe.id).trimstart +
+ p_keyframes.find((x) => x.id == keyframe.id).start
+ ) {
+ var delay = 0;
+ var start = false;
+ var lasttime, lastprop;
+ // Find last keyframe in time from same object & property
+ var lastkey = lastKeyframe(keyframe, index);
+ if (!lastkey) {
+ lasttime = 0;
+ lastprop = objects
+ .find((x) => x.id == keyframe.id)
+ .defaults.find((x) => x.name == keyframe.name).value;
+ } else {
+ lasttime = lastkey.t;
+ lastprop = lastkey.value;
+ }
+ if (lastkey && lastkey.t >= time && !play) {
+ return;
+ }
+ // Set delay for the animation if playing
+ if (play) {
+ if (lasttime > currenttime) {
+ delay = lasttime - time;
+ }
+ }
+ // Initiate the animation
+ var animation = {
+ value: lastprop,
+ };
+ var instance = anime({
+ targets: animation,
+ delay: delay,
+ value: keyframe.value,
+ duration: keyframe.t - lasttime,
+ easing: keyframe.easing,
+ autoplay: false,
+ update: function () {
+ if (start && !paused) {
+ if (
+ currenttime <
+ p_keyframes.find((x) => x.id == keyframe.id)
+ .trimstart +
+ p_keyframes.find((x) => x.id == keyframe.id)
+ .start ||
+ currenttime >
+ p_keyframes.find((x) => x.id == keyframe.id).end ||
+ currenttime > duration
+ ) {
+ object.set('visible', false);
+ inst.renderAll();
+ } else {
+ setValue(
+ keyframe.name,
+ object,
+ animation.value,
+ inst
+ );
+ object.set('visible', true);
+ inst.renderAll();
+ }
+ } else if (start && paused) {
+ anime.remove(animation);
+ }
+ },
+ changeBegin: function () {
+ start = true;
+ },
+ });
+
+ if (time - lasttime <= 0) {
+ instance.seek(0);
+ } else {
+ instance.seek(time - lasttime);
+ }
+
+ if (play) {
+ instance.play();
+ } else if (
+ parseFloat(lasttime) <= parseFloat(time) &&
+ parseFloat(keyframe.t) >= parseFloat(time)
+ ) {
+ setValue(keyframe.name, object, animation.value, inst);
+ }
+ } else if (
+ keyframe.t < time &&
+ !nextKeyframe(keyframe, index)
+ ) {
+ var prop = keyframe.name;
+ if (prop == 'left' && !recording) {
+ if (
+ object.get('left') - artboard.get('left') !=
+ keyframe.value
+ ) {
+ setValue(keyframe.name, object, keyframe.value, inst);
+ }
+ } else if (prop == 'top' && !recording) {
+ if (
+ object.get('top') - artboard.get('top') !=
+ keyframe.value
+ ) {
+ setValue(keyframe.name, object, keyframe.value, inst);
+ }
+ } else if (prop == 'shadow.blur') {
+ if (object.shadow.blur != keyframe.value) {
+ setValue(keyframe.name, object, keyframe.value, inst);
+ }
+ } else if (prop == 'shadow.color') {
+ if (object.shadow.color != keyframe.value) {
+ setValue(keyframe.name, object, keyframe.value, inst);
+ }
+ } else if (prop == 'shadow.offsetX') {
+ if (object.shadow.offsetX != keyframe.value) {
+ setValue(keyframe.name, object, keyframe.value, inst);
+ }
+ } else if (prop == 'shadow.offsetY') {
+ if (object.shadow.offsetY != keyframe.value) {
+ setValue(keyframe.name, object, keyframe.value, inst);
+ }
+ } else {
+ if (object.get(prop) != keyframe.value) {
+ setValue(keyframe.name, object, keyframe.value, inst);
+ }
+ }
+ }
+ });
+ /*
+ if (play) {
+ p_keyframes.forEach(function(keyframe){
+ inst.getItemById(keyframe.id).set("visible", false);
+ window.setTimeout(function(){
+ if (!paused) {
+ inst.getItemById(keyframe.id).set("visible", true);
+ inst.renderAll();
+ }
+ }, keyframe.start-time)
+ window.setTimeout(function(){
+ if (!paused) {
+ inst.getItemById(keyframe.id).set("visible", false);
+ inst.renderAll();
+ }
+ }, keyframe.end-time)
+ })
+ }
+ */
+ objects.forEach(function (object) {
+ if (object.id.indexOf('Group') == -1) {
+ const object2 = canvas.getItemById(object.id);
+ if (
+ currenttime <
+ p_keyframes.find((x) => x.id == object.id).trimstart +
+ p_keyframes.find((x) => x.id == object.id).start
+ ) {
+ object2.set('visible', false);
+ } else if (
+ currenttime >
+ p_keyframes.find((x) => x.id == object.id).end ||
+ currenttime > duration
+ ) {
+ object2.set('visible', false);
+ } else {
+ object2.set('visible', true);
+ }
+ if (
+ currenttime >=
+ p_keyframes.find((x) => x.id == object.id).trimstart +
+ p_keyframes.find((x) => x.id == object.id).start
+ ) {
+ props.forEach(function (prop) {
+ checkAnyKeyframe(object.id, prop, inst);
+ });
+ }
+ }
+ var obj = canvas.getItemById(object.id);
+ if (obj.type == 'lottie') {
+ obj.goToSeconds(currenttime);
+ inst.renderAll();
+ }
+ });
+ inst.renderAll();
+
+ if (animatedtext.length > 0) {
+ animatedtext.forEach(function (text) {
+ text.seek(currenttime, canvas);
+ inst.renderAll();
+ });
+ }
+
+ playVideos(time);
+ if (play) {
+ playAudio(time);
+ }
+ if (play && !paused) {
+ var animation = {
+ value: 0,
+ };
+ var main_instance = anime({
+ targets: animation,
+ value: [currenttime, duration],
+ duration: duration - currenttime,
+ easing: 'linear',
+ autoplay: true,
+ update: function () {
+ if (!paused) {
+ currenttime = animation.value;
+ if (animatedtext.length > 0) {
+ animatedtext.forEach(function (text) {
+ text.seek(currenttime, canvas);
+ inst.renderAll();
+ });
+ }
+ objects.forEach(function (object) {
+ if (object.id.indexOf('Group') == -1) {
+ const object2 = inst.getItemById(object.id);
+ if (
+ currenttime <
+ p_keyframes.find((x) => x.id == object.id)
+ .trimstart +
+ p_keyframes.find((x) => x.id == object.id).start
+ ) {
+ object2.set('visible', false);
+ } else if (
+ currenttime >
+ p_keyframes.find((x) => x.id == object.id).end ||
+ currenttime > duration
+ ) {
+ object2.set('visible', false);
+ } else {
+ object2.set('visible', true);
+ }
+ if (
+ currenttime >=
+ p_keyframes.find((x) => x.id == object.id)
+ .trimstart +
+ p_keyframes.find((x) => x.id == object.id).start
+ ) {
+ props.forEach(function (prop) {
+ checkAnyKeyframe(object.id, prop, inst);
+ });
+ }
+ }
+ var obj = canvas.getItemById(object.id);
+ if (obj.type == 'lottie') {
+ obj.goToSeconds(currenttime);
+ inst.renderAll();
+ }
+ });
+ inst.renderAll();
+ if (!recording) {
+ renderTime();
+ $('#seekbar').css({
+ left: currenttime / timelinetime + offset_left,
+ });
+ }
+ } else {
+ pause();
+ animation.value = duration + 1;
+ anime.remove(animation);
+ }
+ },
+ complete: function () {
+ pause();
+ },
+ });
+ } else if (paused) {
+ currenttime = time;
+ }
+ }
+}
+
+// Render a keyframe
+function renderKeyframe(object, prop, time) {
+ const color = objects.find((x) => x.id == object.id).color;
+ if (prop == 'shadow.color') {
+ if (
+ $('#' + object.get('id'))
+ .find('.shadowcolor')
+ .is(':visible')
+ ) {
+ time =
+ time -
+ parseFloat(
+ p_keyframes.find((x) => x.id == object.get('id')).start
+ );
+ }
+ $('#' + object.get('id'))
+ .find('.shadowcolor')
+ .prepend(
+ ""
+ );
+ $('#' + object.get('id'))
+ .find('.shadowcolor')
+ .find("[data-time='" + time + "']")
+ .css({ left: time / timelinetime, background: color });
+ } else {
+ if (
+ $('#' + object.get('id'))
+ .find('.' + prop)
+ .is(':visible')
+ ) {
+ time =
+ time -
+ parseFloat(
+ p_keyframes.find((x) => x.id == object.get('id')).start
+ );
+ }
+ $('#' + object.get('id'))
+ .find('.' + prop)
+ .prepend(
+ ""
+ );
+ $('#' + object.get('id'))
+ .find('.' + prop)
+ .find("[data-time='" + time + "']")
+ .css({ left: time / timelinetime, background: color });
+ }
+}
+
+// Create a keyframe
+function newKeyframe(property, object, time, value, render) {
+ // Check if property can be animated
+ if (
+ $.inArray(
+ property,
+ objects.find((x) => x.id == object.get('id')).animate
+ ) != -1
+ ) {
+ const keyarr = $.grep(keyframes, function (e) {
+ return (
+ e.t == parseFloat(time) &&
+ e.id == object.get('id') &&
+ e.name == property
+ );
+ });
+ const keyarr2 = $.grep(keyframes, function (e) {
+ return e.id == object.get('id') && e.name == property;
+ });
+ if (keyarr2.length == 0) {
+ if (property == 'left') {
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == property).value =
+ object.get(property) - artboard.get('left');
+ } else if (property == 'top') {
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == property).value =
+ object.get(property) - artboard.get('top');
+ } else {
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == property).value = value;
+ }
+ }
+ if (keyarr.length == 0) {
+ if (property == 'left') {
+ keyframes.push({
+ t: time,
+ name: property,
+ value: value - artboard.get('left'),
+ id: object.get('id'),
+ easing: 'linear',
+ });
+ } else if (property == 'top') {
+ keyframes.push({
+ t: time,
+ name: property,
+ value: value - artboard.get('top'),
+ id: object.get('id'),
+ easing: 'linear',
+ });
+ } else {
+ keyframes.push({
+ t: time,
+ name: property,
+ value: value,
+ id: object.get('id'),
+ easing: 'linear',
+ });
+ }
+ if (
+ render &&
+ property != 'top' &&
+ property != 'scaleY' &&
+ property != 'width' &&
+ property != 'height' &&
+ property != 'stroke' &&
+ property != 'shadow.opacity' &&
+ property != 'shadow.offsetX' &&
+ property != 'shadow.offsetY' &&
+ property != 'shadow.blur' &&
+ property != 'lineHeight'
+ ) {
+ renderKeyframe(object, property, time);
+ }
+ keyframes.sort(function (a, b) {
+ if (
+ a.id.indexOf('Group') >= 0 &&
+ b.id.indexOf('Group') == -1
+ ) {
+ return 1;
+ } else if (
+ b.id.indexOf('Group') >= 0 &&
+ a.id.indexOf('Group') == -1
+ ) {
+ return -1;
+ } else {
+ return 0;
+ }
+ });
+ } else if (render) {
+ if (
+ property != 'top' &&
+ property != 'scaleY' &&
+ property != 'width' &&
+ property != 'height' &&
+ property != 'stroke' &&
+ property != 'shadow.opacity' &&
+ property != 'shadow.offsetX' &&
+ property != 'shadow.offsetY' &&
+ property != 'shadow.blur' &&
+ property != 'lineHeight'
+ ) {
+ updateKeyframe(
+ $('#' + object.get('id')).find(
+ ".keyframe[data-time='" +
+ time +
+ "'][data-property='" +
+ property +
+ "']"
+ ),
+ true
+ );
+ }
+ }
+ } else {
+ if (property == 'left') {
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == property).value =
+ object.get(property) - artboard.get('left');
+ } else if (property == 'top') {
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == property).value =
+ object.get(property) - artboard.get('top');
+ } else {
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == property).value = value;
+ }
+ }
+}
+
+// Create a keyframe (manually)
+function manualKeyframe() {
+ var prop = $(this).parent().attr('data-property');
+ const object = canvas.getItemById(
+ $(this).parent().parent().parent().attr('data-object')
+ );
+ if (prop == 'position') {
+ prop = 'left';
+ newKeyframe('top', object, currenttime, object.get('top'), true);
+ } else if (prop == 'scale') {
+ prop = 'scaleX';
+ newKeyframe(
+ 'scaleY',
+ object,
+ currenttime,
+ object.get('scaleY'),
+ true
+ );
+ newKeyframe(
+ 'width',
+ object,
+ currenttime,
+ object.get('width'),
+ true
+ );
+ newKeyframe(
+ 'height',
+ object,
+ currenttime,
+ object.get('height'),
+ true
+ );
+ } else if (prop == 'stroke') {
+ prop = 'strokeWidth';
+ newKeyframe(
+ 'stroke',
+ object,
+ currenttime,
+ object.get('stroke'),
+ true
+ );
+ } else if (prop == 'shadow') {
+ prop = 'shadow.color';
+ newKeyframe(
+ 'shadow.opacity',
+ object,
+ currenttime,
+ object.get('shadow.opacity'),
+ true
+ );
+ newKeyframe(
+ 'shadow.offsetX',
+ object,
+ currenttime,
+ object.get('shadow.offsetX'),
+ true
+ );
+ newKeyframe(
+ 'shadow.offsetY',
+ object,
+ currenttime,
+ object.get('shadow.offsetY'),
+ true
+ );
+ newKeyframe(
+ 'shadow.blur',
+ object,
+ currenttime,
+ object.get('shadow.blur'),
+ true
+ );
+ } else if (prop == 'text') {
+ prop = 'charSpacing';
+ newKeyframe(
+ 'lineHeight',
+ object,
+ currenttime,
+ object.get('lineHeight'),
+ true
+ );
+ }
+ newKeyframe(prop, object, currenttime, object.get(prop), true);
+ save();
+}
+$(document).on('click', '.property-keyframe', manualKeyframe);
+
+// Freeze all properties (this is counterintuitve because I initially programmed it to work the other way around)
+function toggleAnimate(e) {
+ e.stopPropagation();
+ const object = canvas.getItemById(
+ $(this).parent().parent().parent().attr('data-object')
+ );
+ // Turn off clock -> Stop animation
+ if ($(this).hasClass('frozen')) {
+ $(this).removeClass('frozen');
+ $(this).attr('src', 'assets/freeze.svg');
+ objects.find((x) => x.id == object.get('id')).animate = [];
+ // Turn on clock -> Start animation
+ } else {
+ $(this).addClass('frozen');
+ $(this).attr('src', 'assets/frozen.svg');
+ objects.find((x) => x.id == object.get('id')).animate = [];
+ if (object.get('assetType') == 'audio') {
+ objects
+ .find((x) => x.id == object.get('id'))
+ .animate.push('volume');
+ keyframes = $.grep(keyframes, function (e) {
+ return e.id != object.get('id');
+ });
+ $(".keyframe[data-object='" + object.get('id') + "']").remove();
+ $(this)
+ .parent()
+ .parent()
+ .parent()
+ .find('.freeze-prop')
+ .removeClass('frozen');
+ newKeyframe('volume', object, 0, 0.5, true);
+ } else {
+ props.forEach(function (prop) {
+ objects
+ .find((x) => x.id == object.get('id'))
+ .animate.push(prop);
+ });
+ keyframes = $.grep(keyframes, function (e) {
+ return e.id != object.get('id');
+ });
+ $(".keyframe[data-object='" + object.get('id') + "']").remove();
+ $(this)
+ .parent()
+ .parent()
+ .parent()
+ .find('.freeze-prop')
+ .removeClass('frozen');
+
+ props.forEach(function (prop) {
+ if (prop == 'lineHeight' || prop == 'charSpacing') {
+ if (object.get('type') == 'textbox') {
+ newKeyframe(prop, object, 0, object.get(prop), true);
+ }
+ } else if (
+ prop == 'shadow.opacity' ||
+ prop == 'shadow.blur' ||
+ prop == 'shadow.offsetX' ||
+ prop == 'shadow.offsetY' ||
+ prop == 'shadow.color'
+ ) {
+ if (object.get('type') != 'group') {
+ if (prop == 'shadow.color') {
+ newKeyframe(prop, object, 0, object.shadow.color, true);
+ } else if (prop == 'shadow.opacity') {
+ newKeyframe(
+ prop,
+ object,
+ 0,
+ object.shadow.opacity,
+ true
+ );
+ } else if (prop == 'shadow.offsetX') {
+ newKeyframe(
+ prop,
+ object,
+ 0,
+ object.shadow.offsetX,
+ true
+ );
+ } else if (prop == 'shadow.offsetY') {
+ newKeyframe(
+ prop,
+ object,
+ 0,
+ object.shadow.offsetY,
+ true
+ );
+ } else if (prop == 'shadow.blur') {
+ newKeyframe(prop, object, 0, object.shadow.blur, true);
+ }
+ }
+ } else {
+ newKeyframe(prop, object, 0, object.get(prop), true);
+ }
+ });
+ }
+ }
+ save();
+}
+$(document).on('click', '.freeze', toggleAnimate);
+
+function animateProp(prop, object) {
+ objects.find((x) => x.id == object.get('id')).animate.push(prop);
+
+ // Prop counterparts
+ if (prop == 'left') {
+ objects.find((x) => x.id == object.get('id')).animate.push('top');
+ newKeyframe(
+ 'left',
+ object,
+ currenttime,
+ object.get('left'),
+ true
+ );
+ newKeyframe('top', object, currenttime, object.get('top'), true);
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'left').value =
+ object.get('left') - artboard.get('left');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'top').value =
+ object.get('top') - artboard.get('top');
+ } else if (prop == 'scaleX') {
+ newKeyframe(
+ 'scaleY',
+ object,
+ currenttime,
+ object.get('scaleY'),
+ true
+ );
+ newKeyframe(
+ 'width',
+ object,
+ currenttime,
+ object.get('width'),
+ true
+ );
+ newKeyframe(
+ 'height',
+ object,
+ currenttime,
+ object.get('height'),
+ true
+ );
+ objects
+ .find((x) => x.id == object.get('id'))
+ .animate.push('scaleY');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .animate.push('width');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .animate.push('height');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'height').value =
+ object.get('height');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'width').value =
+ object.get('width');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'scaleY').value =
+ object.get('scaleY');
+ } else if (prop == 'strokeWidth') {
+ newKeyframe(
+ 'stroke',
+ object,
+ currenttime,
+ object.get('stroke'),
+ true
+ );
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'stroke').value =
+ object.get('stroke');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .animate.push('stroke');
+ } else if (prop == 'shadow.color') {
+ newKeyframe(
+ 'shadow.color',
+ object,
+ currenttime,
+ object.shadow.color,
+ true
+ );
+ newKeyframe(
+ 'shadow.opacity',
+ object,
+ currenttime,
+ object.shadow.opacity,
+ true
+ );
+ newKeyframe(
+ 'shadow.offsetX',
+ object,
+ currenttime,
+ object.shadow.offsetX,
+ true
+ );
+ newKeyframe(
+ 'shadow.offsetY',
+ object,
+ currenttime,
+ object.shadow.offsetY,
+ true
+ );
+ newKeyframe(
+ 'shadow.blur',
+ object,
+ currenttime,
+ object.shadow.blur,
+ true
+ );
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'shadow.color').value =
+ object.get('shadow.color');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'shadow.opacity').value =
+ object.get('shadow.opacity');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'shadow.offsetX').value =
+ object.get('shadow.offsetX');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'shadow.offsetY').value =
+ object.get('shadow.offsetY');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'shadow.blur').value =
+ object.get('shadow.blur');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .animate.push('shadow.opacity');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .animate.push('shadow.offsetX');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .animate.push('shadow.offsetY');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .animate.push('shadow.blur');
+ } else if (prop == 'charSpacing') {
+ newKeyframe(
+ 'lineHeight',
+ object,
+ currenttime,
+ object.get('lineHeight'),
+ true
+ );
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'lineHeight').value =
+ object.get('lineHeight');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .animate.push('lineHeight');
+ }
+
+ // Exception
+ if (prop != 'left' && prop != 'shadow.color') {
+ newKeyframe(prop, object, currenttime, object.get(prop), true);
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == prop).value = object.get(prop);
+ }
+}
+
+function freezeProp(prop, object) {
+ objects.find((x) => x.id == object.get('id')).animate = $.grep(
+ objects.find((x) => x.id == object.get('id')).animate,
+ function (e) {
+ return e != prop;
+ }
+ );
+ // Also add prop counterparts (should probably have done in a better way)
+ if (prop == 'left') {
+ objects.find((x) => x.id == object.get('id')).animate = $.grep(
+ objects.find((x) => x.id == object.get('id')).animate,
+ function (e) {
+ return e != 'top';
+ }
+ );
+ keyframes = $.grep(keyframes, function (e) {
+ return e.id != object.get('id') || e.name != 'top';
+ });
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'left').value =
+ object.get('left') - artboard.get('left');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'top').value =
+ object.get('top') - artboard.get('top');
+ } else if (prop == 'scaleX') {
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'height').value =
+ object.get('height');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'width').value =
+ object.get('width');
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'scaleY').value =
+ object.get('scaleY');
+ objects.find((x) => x.id == object.get('id')).animate = $.grep(
+ objects.find((x) => x.id == object.get('id')).animate,
+ function (e) {
+ return e != 'scaleY';
+ }
+ );
+ keyframes = $.grep(keyframes, function (e) {
+ return e.id != object.get('id') || e.name != 'scaleY';
+ });
+ objects.find((x) => x.id == object.get('id')).animate = $.grep(
+ objects.find((x) => x.id == object.get('id')).animate,
+ function (e) {
+ return e != 'width';
+ }
+ );
+ keyframes = $.grep(keyframes, function (e) {
+ return e.id != object.get('id') || e.name != 'width';
+ });
+ objects.find((x) => x.id == object.get('id')).animate = $.grep(
+ objects.find((x) => x.id == object.get('id')).animate,
+ function (e) {
+ return e != 'height';
+ }
+ );
+ keyframes = $.grep(keyframes, function (e) {
+ return e.id != object.get('id') || e.name != 'height';
+ });
+ } else if (prop == 'strokeWidth') {
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'stroke').value =
+ object.get('stroke');
+ objects.find((x) => x.id == object.get('id')).animate = $.grep(
+ objects.find((x) => x.id == object.get('id')).animate,
+ function (e) {
+ return e != 'stroke';
+ }
+ );
+ keyframes = $.grep(keyframes, function (e) {
+ return e.id != object.get('id') || e.name != 'stroke';
+ });
+ } else if (prop == 'shadow.color') {
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'shadow.opacity').value =
+ object.shadow.opacity;
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'shadow.offsetX').value =
+ object.shadow.offsetX;
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'shadow.offsetY').value =
+ object.shadow.offsetY;
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'shadow.blur').value =
+ object.shadow.blur;
+ keyframes = $.grep(keyframes, function (e) {
+ return e.id != object.get('id') || e.name != 'shadow.opacity';
+ });
+ objects.find((x) => x.id == object.get('id')).animate = $.grep(
+ objects.find((x) => x.id == object.get('id')).animate,
+ function (e) {
+ return e != 'shadow.opacity';
+ }
+ );
+ keyframes = $.grep(keyframes, function (e) {
+ return e.id != object.get('id') || e.name != 'shadow.offsetX';
+ });
+ objects.find((x) => x.id == object.get('id')).animate = $.grep(
+ objects.find((x) => x.id == object.get('id')).animate,
+ function (e) {
+ return e != 'shadow.offsetX';
+ }
+ );
+ keyframes = $.grep(keyframes, function (e) {
+ return e.id != object.get('id') || e.name != 'shadow.offsetY';
+ });
+ objects.find((x) => x.id == object.get('id')).animate = $.grep(
+ objects.find((x) => x.id == object.get('id')).animate,
+ function (e) {
+ return e != 'shadow.offsetY';
+ }
+ );
+ keyframes = $.grep(keyframes, function (e) {
+ return e.id != object.get('id') || e.name != 'shadow.blur';
+ });
+ objects.find((x) => x.id == object.get('id')).animate = $.grep(
+ objects.find((x) => x.id == object.get('id')).animate,
+ function (e) {
+ return e != 'shadow.blur';
+ }
+ );
+ } else if (prop == 'charSpacing') {
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == 'lineHeight').value =
+ object.get('lineHeight');
+ objects.find((x) => x.id == object.get('id')).animate = $.grep(
+ objects.find((x) => x.id == object.get('id')).animate,
+ function (e) {
+ return e != 'lineHeight';
+ }
+ );
+ keyframes = $.grep(keyframes, function (e) {
+ return e.id != object.get('id') || e.name != 'lineHeight';
+ });
+ }
+
+ keyframes = $.grep(keyframes, function (e) {
+ return e.id != object.get('id') || e.name != prop;
+ });
+
+ // Exception
+ if (prop != 'left' && prop != 'shadow.color') {
+ objects
+ .find((x) => x.id == object.get('id'))
+ .defaults.find((x) => x.name == prop).value = object.get(prop);
+ }
+
+ $(
+ ".keyframe[data-object='" +
+ object.get('id') +
+ "'][data-property='" +
+ prop +
+ "']"
+ ).remove();
+}
+
+// Toggle animation mode for property
+function toggleAnimateProp(e) {
+ e.stopPropagation();
+ var prop = $(this).parent().attr('data-property');
+ const object = canvas.getItemById(
+ $(this).parent().parent().parent().attr('data-object')
+ );
+ if (prop == 'position') {
+ prop = 'left';
+ } else if (prop == 'scale') {
+ prop = 'scaleX';
+ } else if (prop == 'stroke') {
+ prop = 'strokeWidth';
+ } else if (prop == 'shadow') {
+ prop = 'shadow.color';
+ } else if (prop == 'text') {
+ prop = 'charSpacing';
+ }
+
+ // Check layer global "freezing" state
+ if (
+ $(this)
+ .parent()
+ .parent()
+ .parent()
+ .find('.freeze')
+ .hasClass('frozen')
+ ) {
+ objects.find((x) => x.id == object.get('id')).animate = [];
+ $(this)
+ .parent()
+ .parent()
+ .parent()
+ .find('.freeze')
+ .removeClass('frozen');
+
+ // Stop animating all props except selected
+ var propmatch = [
+ prop,
+ 'scaleY',
+ 'width',
+ 'height',
+ 'top',
+ 'stroke',
+ 'shadow.opacity',
+ 'shadow.offsetX',
+ 'shadow.offsetY',
+ 'shadow.blur',
+ 'lineHeight',
+ ];
+ props.forEach(function (p) {
+ if ($.inArray(p, propmatch) == -1) {
+ if (
+ (object.get('type') == 'textbox' && p == 'charSpacing') ||
+ p == 'lineHeight'
+ ) {
+ freezeProp(p, object);
+ } else if (p != 'charSpacing' && p != 'lineHeight') {
+ freezeProp(p, object);
+ }
+ }
+ });
+ }
+
+ // Turn off clock -> Stop animating
+ if ($(this).hasClass('frozen')) {
+ $(this).removeClass('frozen');
+ $(this).attr('src', 'assets/freeze.svg');
+ freezeProp(prop, object);
+ // Turn on clock -> Animate
+ } else {
+ $(this).addClass('frozen');
+ $(this).attr('src', 'assets/frozen.svg');
+ animateProp(prop, object);
+ }
+ save();
+}
+$(document).on('click', '.freeze-prop', toggleAnimateProp);
+
+// Lock layer
+function lockLayer(e) {
+ e.stopPropagation();
+ const object = canvas.getItemById(
+ $(this).parent().parent().parent().attr('data-object')
+ );
+ if ($(this).hasClass('locked')) {
+ $(this).removeClass('locked');
+ $(this).attr('src', 'assets/lock.svg');
+ object.selectable = true;
+ $(this).parent().parent().parent().attr('draggable', true);
+ } else {
+ $(this).addClass('locked');
+ $(this).attr('src', 'assets/locked.svg');
+ object.selectable = false;
+ if (canvas.getActiveObject() == object) {
+ canvas.discardActiveObject();
+ canvas.renderAll();
+ }
+ $(this).parent().parent().parent().attr('draggable', false);
+ }
+ save();
+}
+$(document).on('click', '.lock', lockLayer);
+
+// Center an object in the canvas
+function centerObject(object) {
+ object.set('top', artboard.get('top') + artboard.get('height') / 2);
+ object.set(
+ 'left',
+ artboard.get('left') + artboard.get('width') / 2
+ );
+ canvas.renderAll();
+ save();
+}
+
+// Render a layer
+function renderLayer(object, animate = false) {
+ $('#nolayers').addClass('yaylayers');
+ const color = objects.find((x) => x.id == object.get('id')).color;
+ var src = '';
+ var classlock = '';
+ var srclock = 'lock';
+ var freeze = 'freeze';
+ if (object.get('type') == 'textbox') {
+ src = 'assets/text.svg';
+ } else if (
+ object.get('type') == 'rect' ||
+ object.get('type') == 'group' ||
+ object.get('type') == 'circle' ||
+ object.get('type') == 'path'
+ ) {
+ src = 'assets/star.svg';
+ if (object.get('assetType') == 'animatedText') {
+ src = 'assets/text.svg';
+ }
+ if (object.get('assetType') == 'audio') {
+ src = 'assets/audio.svg';
+ }
+ } else if (object.get('type') == 'image') {
+ if (
+ object.get('assetType') &&
+ object.get('assetType') == 'video'
+ ) {
+ src = 'assets/video.svg';
+ } else {
+ src = 'assets/image.svg';
+ }
+ } else if (object.get('type') == 'lottie') {
+ src = 'assets/zappy.svg';
+ } else if (object.get('assetType') == 'audio') {
+ src = 'assets/audio.svg';
+ }
+ if (object.selectable == false) {
+ classlock = 'locked';
+ srclock = 'locked';
+ }
+ if (animate != false) {
+ freeze = 'frozen';
+ }
+ const leftoffset =
+ p_keyframes.find((x) => x.id == object.get('id')).trimstart /
+ timelinetime;
+ const width =
+ (p_keyframes.find((x) => x.id == object.get('id')).end -
+ p_keyframes.find((x) => x.id == object.get('id')).trimstart) /
+ timelinetime;
+ $('#inner-timeline').prepend(
+ "
![](assets/" +
+ freeze +
+ ".svg "Toggle animation")
![](assets/" +
+ srclock +
+ ".svg "Lock layer")
![](assets/" +
+ srcfreeze +
+ ".svg "Toggle animation")
Uploading..."
+ );
+ $('#upload-button').addClass('uploading');
+ if (file['type'].split('/')[0] === 'image') {
+ $('.upload-show').removeClass('upload-show');
+ createThumbnail(file, 250).then(function (data) {
+ saveFile(
+ dataURItoBlob(data),
+ file,
+ file['type'].split('/')[0],
+ 'temp',
+ false,
+ false
+ );
+ });
+ } else if (file['type'].split('/')[0] === 'video') {
+ $('.upload-show').removeClass('upload-show');
+ createVideoThumbnail(file, 250, 0, false).then(function (
+ data
+ ) {
+ saveFile(
+ dataURItoBlob(data),
+ file,
+ file['type'].split('/')[0],
+ 'temp',
+ false,
+ false
+ );
+ });
+ } else {
+ alert('File type not accepted');
+ }
+ } else {
+ alert('File is too big');
+ }
+ });
+ if (files2.length == 1) {
+ if (files2[0]['type'].split('/')[0] === 'image') {
+ $('.upload-tab-active').removeClass('upload-tab-active');
+ $('#images-tab').addClass('upload-tab-active');
+ } else if (files2[0]['type'].split('/')[0] === 'video') {
+ $('.upload-tab-active').removeClass('upload-tab-active');
+ $('#videos-tab').addClass('upload-tab-active');
+ } else if (files2[0]['type'].split('/')[0] === 'audio') {
+ $('.upload-tab-active').removeClass('upload-tab-active');
+ $('#audio-tab').addClass('upload-tab-active');
+ }
+ }
+ }
+}
+$(document).on('change', '#filepick', function () {
+ handleUpload(false);
+});
+
+// Upload audio
+function audioUpload() {
+ const files = $('#filepick2').get(0).files;
+ if (files) {
+ if (files.length == 1) {
+ if (files[0]['type'].split('/')[0] === 'audio') {
+ if (files[0].size / 1024 / 1024 <= 10) {
+ $('#audio-upload-button').html('Uploading...');
+ $('#audio-upload-button').addClass('uploading');
+ saveAudio(files[0]);
+ } else {
+ alert('File is too big');
+ }
+ } else {
+ alert('Wrong file type');
+ }
+ }
+ }
+}
+$(document).on('change', '#filepick2', audioUpload);
+
+// Create a rectangle
+function newRectangle(color) {
+ var newrect = new fabric.Rect({
+ left: 0,
+ top: 0,
+ originX: 'center',
+ originY: 'center',
+ width: 200,
+ height: 200,
+ stroke: '#000',
+ strokeWidth: 0,
+ strokeUniform: true,
+ backgroundColor: 'rgba(255,255,255,0)',
+ rx: 0,
+ ry: 0,
+ fill: color,
+ cursorWidth: 1,
+ cursorDuration: 1,
+ paintFirst: 'stroke',
+ cursorDelay: 250,
+ strokeDashArray: false,
+ inGroup: false,
+ id: 'Shape' + layer_count,
+ shadow: {
+ color: '#000',
+ offsetX: 0,
+ offsetY: 0,
+ blur: 0,
+ opacity: 0,
+ },
+ });
+ canvas.add(newrect);
+ newLayer(newrect);
+ canvas.setActiveObject(newrect);
+ canvas.bringToFront(newrect);
+ canvas.renderAll();
+}
+
+// Change text format
+function formatText() {
+ var isselected = false;
+ if (!canvas.getActiveObject().isEditing) {
+ canvas.getActiveObject().enterEditing();
+ canvas.getActiveObject().selectAll();
+ isselected = true;
+ }
+ if ($(this).hasClass('format-text-active')) {
+ if ($(this).attr('id') == 'format-bold') {
+ $(this).find('img').attr('src', 'assets/bold.svg');
+ canvas
+ .getActiveObject()
+ .setSelectionStyles({ fontWeight: 'normal' });
+ } else if ($(this).attr('id') == 'format-italic') {
+ $(this).find('img').attr('src', 'assets/italic.svg');
+ canvas
+ .getActiveObject()
+ .setSelectionStyles({ fontStyle: 'normal' });
+ } else if ($(this).attr('id') == 'format-underline') {
+ $(this).find('img').attr('src', 'assets/underline.svg');
+ canvas
+ .getActiveObject()
+ .setSelectionStyles({ underline: false });
+ } else {
+ $(this).find('img').attr('src', 'assets/strike.svg');
+ canvas
+ .getActiveObject()
+ .setSelectionStyles({ linethrough: false });
+ }
+ $(this).removeClass('format-text-active');
+ } else {
+ $(this).addClass('format-text-active');
+ if ($(this).attr('id') == 'format-bold') {
+ $(this).find('img').attr('src', 'assets/bold-active.svg');
+ canvas
+ .getActiveObject()
+ .setSelectionStyles({ fontWeight: 'bold' });
+ } else if ($(this).attr('id') == 'format-italic') {
+ $(this).find('img').attr('src', 'assets/italic-active.svg');
+ canvas
+ .getActiveObject()
+ .setSelectionStyles({ fontStyle: 'italic' });
+ } else if ($(this).attr('id') == 'format-underline') {
+ $(this).find('img').attr('src', 'assets/underline-active.svg');
+ canvas
+ .getActiveObject()
+ .setSelectionStyles({ underline: true });
+ } else {
+ $(this).find('img').attr('src', 'assets/strike-active.svg');
+ canvas
+ .getActiveObject()
+ .setSelectionStyles({ linethrough: true });
+ }
+ }
+ if (isselected) {
+ canvas.getActiveObject().exitEditing();
+ }
+ canvas.renderAll();
+ save();
+}
+$(document).on('click', '.format-text', formatText);
+
+// Change stroke type (e.g. dashed), ignore naming (used to be for line join)
+function lineJoin() {
+ if ($('.line-join-active').attr('id') == 'miter') {
+ $('.line-join-active')
+ .find('img')
+ .attr('src', 'assets/miter.svg');
+ } else if ($('.line-join-active').attr('id') == 'bevel') {
+ $('.line-join-active')
+ .find('img')
+ .attr('src', 'assets/bevel.svg');
+ } else if ($('.line-join-active').attr('id') == 'round') {
+ $('.line-join-active')
+ .find('img')
+ .attr('src', 'assets/round.svg');
+ } else if ($('.line-join-active').attr('id') == 'small-dash') {
+ $('.line-join-active')
+ .find('img')
+ .attr('src', 'assets/dash2.svg');
+ }
+ $('.line-join-active').removeClass('line-join-active');
+ $(this).addClass('line-join-active');
+ if ($(this).attr('id') == 'miter') {
+ $(this).find('img').attr('src', 'assets/miter-active.svg');
+ canvas
+ .getActiveObject()
+ .set({ strokeWidth: 0, strokeDashArray: false });
+ canvas.renderAll();
+ updatePanelValues();
+ } else if ($(this).attr('id') == 'bevel') {
+ $(this).find('img').attr('src', 'assets/bevel-active.svg');
+ canvas.getActiveObject().set({ strokeDashArray: false });
+ if (canvas.getActiveObject().get('strokeWidth') == 0) {
+ canvas.getActiveObject().set({ strokeWidth: 1 });
+ canvas.renderAll();
+ updatePanelValues();
+ }
+ } else if ($(this).attr('id') == 'round') {
+ $(this).find('img').attr('src', 'assets/round-active.svg');
+ canvas.getActiveObject().set({ strokeDashArray: [10, 5] });
+ if (canvas.getActiveObject().get('strokeWidth') == 0) {
+ canvas.getActiveObject().set({ strokeWidth: 1 });
+ canvas.renderAll();
+ updatePanelValues();
+ }
+ } else {
+ $(this).find('img').attr('src', 'assets/dash2-active.svg');
+ canvas.getActiveObject().set({ strokeDashArray: [3, 3] });
+ if (canvas.getActiveObject().get('strokeWidth') == 0) {
+ canvas.getActiveObject().set({ strokeWidth: 1 });
+ canvas.renderAll();
+ updatePanelValues();
+ }
+ }
+ canvas.renderAll();
+ save();
+}
+$(document).on('click', '.line-join', lineJoin);
+
+// Change text alignment
+function alignText() {
+ var textalign;
+ if ($('.align-text-active').attr('id') == 'align-text-left') {
+ $('.align-text-active')
+ .find('img')
+ .attr('src', 'assets/align-text-left.svg');
+ } else if (
+ $('.align-text-active').attr('id') == 'align-text-center'
+ ) {
+ $('.align-text-active')
+ .find('img')
+ .attr('src', 'assets/align-text-center.svg');
+ } else if (
+ $('.align-text-active').attr('id') == 'align-text-right'
+ ) {
+ $('.align-text-active')
+ .find('img')
+ .attr('src', 'assets/align-text-right.svg');
+ } else {
+ $('.align-text-active')
+ .find('img')
+ .attr('src', 'assets/align-text-justify.svg');
+ }
+ $('.align-text-active').removeClass('align-text-active');
+ $(this).addClass('align-text-active');
+ if ($(this).attr('id') == 'align-text-left') {
+ textalign = 'left';
+ $(this)
+ .find('img')
+ .attr('src', 'assets/align-text-left-active.svg');
+ } else if ($(this).attr('id') == 'align-text-center') {
+ textalign = 'center';
+ $(this)
+ .find('img')
+ .attr('src', 'assets/align-text-center-active.svg');
+ } else if ($(this).attr('id') == 'align-text-right') {
+ textalign = 'right';
+ $(this)
+ .find('img')
+ .attr('src', 'assets/align-text-right-active.svg');
+ } else {
+ textalign = 'justify';
+ $(this)
+ .find('img')
+ .attr('src', 'assets/align-text-justify-active.svg');
+ }
+ canvas.getActiveObject().set({ textAlign: textalign });
+ canvas.renderAll();
+ save();
+}
+$(document).on('click', '.align-text', alignText);
+
+// Change font
+function changeFont() {
+ var font = $('#font-picker').val();
+ if (canvas.getActiveObject().get('assetType')) {
+ WebFont.load({
+ google: {
+ families: [font],
+ },
+ active: () => {
+ var object = canvas.getActiveObject();
+ animatedtext
+ .find((x) => x.id == object.id)
+ .reset(
+ animatedtext.find((x) => x.id == object.id).text,
+ $.extend(
+ animatedtext.find((x) => x.id == object.id).props,
+ { fontFamily: font }
+ ),
+ canvas
+ );
+ save();
+ },
+ });
+ save();
+ } else {
+ WebFont.load({
+ google: {
+ families: [font],
+ },
+ active: () => {
+ canvas.getActiveObject().set('fontFamily', font);
+ canvas.renderAll();
+ save();
+ },
+ });
+ }
+}
+$(document).on('change', '#font-picker', changeFont);
+
+// Calculate text width to display it in 1 line
+function calculateTextWidth(text, font) {
+ var ctx = canvas.getContext('2d');
+ ctx.font = font;
+ return ctx.measureText(text).width + 10;
+}
+
+// Create an audio layer
+function newAudioLayer(src) {
+ var audio = new Audio(src);
+ audio.crossOrigin = 'anonymous';
+ audio.addEventListener('loadeddata', () => {
+ var nullobject = new fabric.Rect({
+ id: 'Audio' + layer_count,
+ width: 10,
+ height: 10,
+ audioSrc: src,
+ duration: audio.duration * 1000,
+ opacity: 0,
+ selectable: false,
+ volume: 0.5,
+ assetType: 'audio',
+ shadow: {
+ color: '#000',
+ offsetX: 0,
+ offsetY: 0,
+ blur: 0,
+ opacity: 0,
+ },
+ });
+ canvas.add(nullobject);
+ newLayer(nullobject);
+ });
+}
+
+// Create a textbox
+function newTextbox(
+ fontsize,
+ fontweight,
+ text,
+ x,
+ y,
+ width,
+ center,
+ font
+) {
+ var newtext = new fabric.Textbox(text, {
+ left: x,
+ top: y,
+ originX: 'center',
+ originY: 'center',
+ fontFamily: 'Inter',
+ fill: '#000',
+ fontSize: fontsize,
+ fontWeight: fontweight,
+ textAlign: 'center',
+ cursorWidth: 1,
+ stroke: '#000',
+ strokeWidth: 0,
+ cursorDuration: 1,
+ paintFirst: 'stroke',
+ objectCaching: false,
+ absolutePositioned: true,
+ strokeUniform: true,
+ inGroup: false,
+ cursorDelay: 250,
+ strokeDashArray: false,
+ width: calculateTextWidth(
+ text,
+ fontweight + ' ' + fontsize + 'px Inter'
+ ),
+ id: 'Text' + layer_count,
+ shadow: {
+ color: '#000',
+ offsetX: 0,
+ offsetY: 0,
+ blur: 0,
+ opacity: 0,
+ },
+ });
+ newtext.setControlsVisibility({
+ mt: false,
+ mb: false,
+ });
+ canvas.add(newtext);
+ newLayer(newtext);
+ canvas.setActiveObject(newtext);
+ canvas.bringToFront(newtext);
+ newtext.enterEditing();
+ newtext.selectAll();
+ canvas.renderAll();
+ if (center) {
+ newtext.set(
+ 'left',
+ artboard.get('left') + artboard.get('width') / 2
+ );
+ newtext.set(
+ 'top',
+ artboard.get('top') + artboard.get('height') / 2
+ );
+ canvas.renderAll();
+ }
+ canvas.getActiveObject().set('fontFamily', font);
+ canvas.renderAll();
+}
+
+function deleteObject(object, def = true) {
+ if (object.get('assetType') == 'animatedText' && def) {
+ animatedtext = $.grep(animatedtext, function (a) {
+ return a.id != object.id;
+ });
+ }
+ if (object.type == 'image') {
+ var temp = files.find((x) => x.name == object.get('id'));
+ files = $.grep(files, function (a) {
+ return a != temp.name;
+ });
+ }
+ $(".layer[data-object='" + object.get('id') + "']").remove();
+ $('#' + object.get('id')).remove();
+ keyframes = $.grep(keyframes, function (e) {
+ return e.id != object.get('id');
+ });
+ p_keyframes = $.grep(p_keyframes, function (e) {
+ return e.id != object.get('id');
+ });
+ objects = $.grep(objects, function (e) {
+ return e.id != object.get('id');
+ });
+ canvas.remove(object);
+ canvas.renderAll();
+ canvas.discardActiveObject();
+ save();
+ if (objects.length == 0) {
+ $('#nolayers').removeClass('yaylayers');
+ }
+}
+
+// Delete selected object
+function deleteSelection() {
+ if (
+ canvas.getActiveObject() &&
+ !canvas.getActiveObject().isEditing
+ ) {
+ const selection = canvas.getActiveObject();
+ if (selection.type == 'activeSelection') {
+ canvas.discardActiveObject();
+ selection._objects.forEach(function (object) {
+ deleteObject(object);
+ });
+ } else {
+ deleteObject(canvas.getActiveObject());
+ }
+ }
+}
+
+// Expand / collapse layer
+function toggleLayer() {
+ const layerid = $(this).parent().parent().attr('data-object');
+ $(this).parent().parent().find('.properties').toggle();
+ $(this).parent().parent().find('.droparrow').toggleClass('layeron');
+ $(".keyframe-row[data-object='" + layerid + "']").toggle();
+ setTimelineZoom(timelinetime);
+}
+$(document).on('click', '.droparrow', toggleLayer);
+
+// Select layer
+function selectLayer(e) {
+ if (!$(e.target).hasClass('droparrow')) {
+ const layerid = $(this).parent().attr('data-object');
+ $('.layer-selected').removeClass('layer-selected');
+ $(this).parent().addClass('layer-selected');
+ canvas.setActiveObject(canvas.getItemById(layerid));
+ }
+}
+$(document).on('click', '.layer-name', selectLayer);
+
+// Set video duration
+function setDuration(length) {
+ $('#inner-timeline').css('width', length / timelinetime + 50);
+ $('#inner-seekarea').css('width', length / timelinetime + 50);
+ duration = length;
+ var minutes = Math.floor(duration / 1000 / 60);
+ var seconds = (duration / 1000 - minutes * 60).toFixed(2);
+ $('#total-time input').val(
+ ('0' + minutes).slice(-2) +
+ ':' +
+ ('0' + Math.floor(seconds)).slice(-2) +
+ ':' +
+ ('0' + Math.floor((seconds % 1) * 100)).slice(-2)
+ );
+ $('.object-props').each(function () {
+ $(this).css(
+ 'width',
+ duration / timelinetime -
+ p_keyframes.find((x) => x.id == $(this).attr('id')).start /
+ timelinetime +
+ 'px'
+ );
+ p_keyframes.find((x) => x.id == $(this).attr('id')).end =
+ duration;
+ if (
+ p_keyframes.find((x) => x.id == $(this).attr('id')).trimend >
+ p_keyframes.find((x) => x.id == $(this).attr('id')).end
+ ) {
+ p_keyframes.find((x) => x.id == $(this).attr('id')).trimend =
+ duration;
+ $(this)
+ .find('.trim-row')
+ .css(
+ 'width',
+ duration / timelinetime -
+ p_keyframes.find((x) => x.id == $(this).attr('id'))
+ .trimstart /
+ timelinetime +
+ 'px'
+ );
+ }
+ });
+ setTimelineZoom(timelinetime);
+ save();
+}
+
+// Render time markers
+function renderTimeMarkers() {
+ var renderoffset = 1000 / timelinetime - 20;
+ var timenumber = 0;
+ var modulo = 1;
+ if (timelinetime > 18) {
+ modulo = 5;
+ } else if (timelinetime > 12) {
+ modulo = 2;
+ }
+ $('#time-numbers').html('');
+ $('#time-numbers').append(
+ "Canvas settings
| Preset | |
|---|---|
| Size | |
| Color | |
| Duration |
Layout
| Position | |
|---|---|
| Size | |
| Rotation |
Layer
| Opacity | |
|---|---|
| Mask |
Layer
| Opacity | |
|---|---|
| Mask |
Layer
| Opacity | |
|---|---|
| Group | Group selection |
Layer
| Opacity | |
|---|---|
| Mask | |
| Group | Ungroup selection |
Layer
| Opacity | |
|---|---|
| Mask |
Rectangle
| Color | |
|---|---|
| Radius |
Shape
| Color |
|---|
Text
| Font | |
|---|---|
| Align |     |
| Format |     |
| Color | |
| Letter | |
| Line |
Stroke
| Type |     |
|---|---|
| Color | |
| Width |
Shadow
| Offset | |
|---|---|
| Color | |
| Blur |
Image
Edit filters
Crop imageVideo
Edit filtersText
| Content | Set |
|---|---|
| Font | |
| Color |
Start animation
| Preset | |
|---|---|
| Easing | |
| Order | Backward Forward |
| Order | Letters Words |
| Duration |
Audio
| Volume |
|---|
Objects
Shapes
Emojis
Images
Text
Basic text
Videos
Uploads
Upload mediaAudio
Upload audio
"
+ );
+ });
+
+var f = fabric.Image.filters;
+
+// Canvas recorder initialization
+var canvasrecord = new fabric.Canvas('canvasrecord', {
+ preserveObjectStacking: true,
+ backgroundColor: '#FFF',
+ width: artboard.width,
+ height: artboard.height,
+});
+
+var timelineslider = document.getElementById('timeline-zoom');
+var t_slider = new RangeSlider(timelineslider, {
+ design: '2d',
+ theme: 'default',
+ handle: 'round',
+ popup: null,
+ showMinMaxLabels: false,
+ unit: '%',
+ min: 5,
+ max: 47,
+ value: 47,
+ onmove: function (x) {
+ setTimelineZoom(-1 * (x - 51));
+ },
+ onfinish: function (x) {
+ setTimelineZoom(-1 * (x - 51));
+ },
+ onstart: function (x) {},
+});
+
+const selectbox = new SelectionArea({
+ class: 'selection-area',
+ selectables: ['.keyframe'],
+ container: '#timeline',
+ // Query selectors for elements from where a selection can be started from.
+ startareas: ['html'],
+
+ // Query selectors for elements which will be used as boundaries for the selection.
+ boundaries: ['#timeline'],
+
+ startThreshold: 10,
+
+ allowTouch: true,
+
+ intersect: 'touch',
+
+ overlap: 'invert',
+
+ // Configuration in case a selectable gets just clicked.
+ singleTap: {
+ allow: false,
+ intersect: 'native',
+ },
+
+ // Scroll configuration.
+ scrolling: {
+ speedDivider: 10,
+ manualSpeed: 750,
+ },
+});
+
+selectbox
+ .on('beforestart', (evt) => {
+ if (
+ $(evt.event.target).hasClass('keyframe') ||
+ $(evt.event.target).attr('id') == 'seekbar' ||
+ $(evt.event.target).parent().hasClass('main-row') ||
+ $(evt.event.target).hasClass('main-row') ||
+ $(evt.event.target).hasClass('trim-row') ||
+ evt.event.which === 3
+ ) {
+ return false;
+ }
+ })
+ .on('start', (evt) => {})
+ .on('move', (evt) => {})
+ .on('stop', (evt) => {
+ $('.keyframe-selected').removeClass('keyframe-selected');
+ shiftkeys = [];
+ if (evt.store.selected.length == 0) {
+ $('.keyframe-selected').removeClass('keyframe-selected');
+ } else {
+ canvas.discardActiveObject();
+ canvas.renderAll();
+ evt.store.selected.forEach(function (key) {
+ shiftkeys.push({
+ keyframe: key,
+ offset: $(key).offset().left,
+ });
+ $(key).addClass('keyframe-selected');
+ });
+ }
+ });
diff --git a/src/js/libraries/anime.min.js b/src/js/libraries/anime.min.js
new file mode 100644
index 0000000..7696a5b
--- /dev/null
+++ b/src/js/libraries/anime.min.js
@@ -0,0 +1,8 @@
+/*
+ * anime.js v3.2.1
+ * (c) 2020 Julian Garnier
+ * Released under the MIT license
+ * animejs.com
+ */
+
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var n={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},e={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},t=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective","matrix","matrix3d"],r={CSS:{},springs:{}};function a(n,e,t){return Math.min(Math.max(n,e),t)}function o(n,e){return n.indexOf(e)>-1}function u(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return o(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},nil:function(n){return i.und(n)||null===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(t){return!n.hasOwnProperty(t)&&!e.hasOwnProperty(t)&&"targets"!==t&&"keyframes"!==t}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var t=c(n),o=a(i.und(t[0])?1:t[0],.1,100),u=a(i.und(t[1])?100:t[1],.1,100),s=a(i.und(t[2])?10:t[2],.1,100),f=a(i.und(t[3])?0:t[3],.1,100),l=Math.sqrt(u/o),d=s/(2*Math.sqrt(u*o)),p=d<1?l*Math.sqrt(1-d*d):0,v=1,h=d<1?(d*l-f)/p:-f+l;function g(n){var t=e?e*n/1e3:n;return t=d<1?Math.exp(-t*d*l)*(v*Math.cos(p*t)+h*Math.sin(p*t)):(v+h*t)*Math.exp(-t*l),0===n||1===n?n:1-t}return e?g:function(){var e=r.springs[n];if(e)return e;for(var t=0,a=0;;)if(1===g(t+=1/6)){if(++a>=16)break}else a=0;var o=t*(1/6)*1e3;return r.springs[n]=o,o}}function f(n){return void 0===n&&(n=10),function(e){return Math.ceil(a(e,1e-6,1)*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function t(n,e){return 1-3*e+3*n}function r(n,e){return 3*e-6*n}function a(n){return 3*n}function o(n,e,o){return((t(e,o)*n+r(e,o))*n+a(e))*n}function u(n,e,o){return 3*t(e,o)*n*n+2*r(e,o)*n+a(e)}return function(t,r,a,i){if(0<=t&&t<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(t!==r||a!==i)for(var s=0;s