assets/js/functions.js

// 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(
        "<div class='keyframe' data-time='" +
          time +
          "' data-object='" +
          object.get('id') +
          "' data-property='" +
          prop +
          "'></div>"
      );
    $('#' + 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(
        "<div class='keyframe' data-time='" +
          time +
          "' data-object='" +
          object.get('id') +
          "' data-property='" +
          prop +
          "'></div>"
      );
    $('#' + 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(
    "<div class='object-props' id='" +
      object.get('id') +
      "' style='width:" +
      (p_keyframes.find((x) => x.id == object.get('id')).end -
        p_keyframes.find((x) => x.id == object.get('id')).start) /
        timelinetime +
      "px'><div class='row main-row'><div class='row-el' style='background-color:" +
      color +
      "'><div class='trim-row' style='left:" +
      leftoffset +
      'px;width:' +
      width +
      "px'></div></div></div></div>"
  );
  if (object.get('assetType') == 'audio') {
    object.setControlsVisibility({
      mt: false,
      mb: false,
      ml: false,
      mr: false,
    });
    $('#layer-inner-list').prepend(
      "<div class='layer' data-object='" +
        object.get('id') +
        "'><div class='layer-name'><img class='droparrow' src='assets/drop-arrow.svg' ><img class='layer-icon' src=" +
        src +
        "><input class='layer-custom-name' value='" +
        objects.find((x) => x.id == object.get('id')).label +
        "' readonly></span><div class='layer-options'><img class='" +
        freeze +
        "' src='assets/" +
        freeze +
        ".svg' title='Toggle animation'></div></div><div class='properties'></div></div>"
    );
  } else {
    $('#layer-inner-list').prepend(
      "<div class='layer' data-object='" +
        object.get('id') +
        "'><div class='layer-name'><img class='droparrow' src='assets/drop-arrow.svg' ><img class='layer-icon' src=" +
        src +
        "><input class='layer-custom-name' value='" +
        objects.find((x) => x.id == object.get('id')).label +
        "' readonly></span><div class='layer-options'><img class='lock " +
        classlock +
        "' src='assets/" +
        srclock +
        ".svg' title='Lock layer'><img class='" +
        freeze +
        "' src='assets/" +
        freeze +
        ".svg' title='Toggle animation'></div></div><div class='properties'></div></div>"
    );
  }
  $(".layer[data-object='" + object.get('id') + "']")
    .find('.properties')
    .toggle();
  setTimelineZoom(timelinetime);
  sortable('#layer-inner-list', {
    placeholderClass: 'hovering',
    copy: true,
    customDragImage: (draggedElement, elementOffset, event) => {
      return {
        element: document.getElementById('nothing'),
        posX: event.pageX - elementOffset.left,
        posY: event.pageY - elementOffset.top,
      };
    },
  });
  if (object.selectable == false) {
    $(".layer[data-object='" + object.get('id') + "']").attr(
      'draggable',
      false
    );
  }
}

// Render a property
function renderProp(prop, object) {
  var classfreeze = '';
  srcfreeze = 'freeze';
  if (
    $.inArray(
      prop,
      objects.find((x) => x.id == object.get('id')).animate
    ) != -1
  ) {
    classfreeze = 'frozen';
    srcfreeze = 'frozen';
  }
  if (prop == 'shadow.color') {
    prop = 'shadowcolor';
  }
  $('#' + object.get('id')).append(
    "<div class='row " +
      prop +
      " keyframe-row' data-object='" +
      object.get('id') +
      "'><div class='row-el'></div></div>"
  );
  if (prop == 'left') {
    $(".layer[data-object='" + object.get('id') + "']")
      .find('.properties')
      .append(
        "<div class='property-name' data-property='position'><span class='property-keyframe' title='Create a new keyframe'></span>Position<img class='freeze-prop " +
          classfreeze +
          "' src='assets/" +
          srcfreeze +
          ".svg' title='Toggle animation'></div>"
      );
  } else if (prop == 'scaleX') {
    $(".layer[data-object='" + object.get('id') + "']")
      .find('.properties')
      .append(
        "<div class='property-name' data-property='scale'><span class='property-keyframe' title='Create a new keyframe'></span>Scale<img class='freeze-prop " +
          classfreeze +
          "' src='assets/" +
          srcfreeze +
          ".svg' title='Toggle animation'></div>"
      );
  } else if (prop == 'strokeWidth') {
    $(".layer[data-object='" + object.get('id') + "']")
      .find('.properties')
      .append(
        "<div class='property-name' data-property='stroke'><span class='property-keyframe' title='Create a new keyframe'></span>Stroke<img class='freeze-prop " +
          classfreeze +
          "' src='assets/" +
          srcfreeze +
          ".svg' title='Toggle animation'></div>"
      );
  } else if (prop == 'shadowcolor') {
    $(".layer[data-object='" + object.get('id') + "']")
      .find('.properties')
      .append(
        "<div class='property-name' data-property='shadow'><span class='property-keyframe' title='Create a new keyframe'></span>Shadow<img class='freeze-prop " +
          classfreeze +
          "' src='assets/" +
          srcfreeze +
          ".svg' title='Toggle animation'></div>"
      );
  } else if (prop == 'charSpacing') {
    $(".layer[data-object='" + object.get('id') + "']")
      .find('.properties')
      .append(
        "<div class='property-name' data-property='text'><span class='property-keyframe' title='Create a new keyframe'></span>Text<img class='freeze-prop " +
          classfreeze +
          "' src='assets/" +
          srcfreeze +
          ".svg' title='Toggle animation'></div>"
      );
  } else {
    $(".layer[data-object='" + object.get('id') + "']")
      .find('.properties')
      .append(
        "<div class='property-name' data-property='" +
          prop +
          "'><span class='property-keyframe' title='Create a new keyframe'></span>" +
          prop +
          "<img class='freeze-prop " +
          classfreeze +
          "' src='assets/" +
          srcfreeze +
          ".svg' title='Toggle animation'></div>"
      );
  }
  $('#' + object.get('id'))
    .find('.keyframe-row' + '.' + prop)
    .toggle();
}

// Create a layer
function newLayer(object) {
  layer_count++;
  var color;
  if (object.get('type') == 'image') {
    if (
      object.get('assetType') &&
      object.get('assetType') == 'video'
    ) {
      color = '#106CF6';
    } else {
      color = '#92F711';
    }
  } else if (object.get('type') == 'textbox') {
    color = '#F7119B';
  } else if (
    object.get('type') == 'rect' ||
    object.get('type') == 'group' ||
    object.get('type') == 'circle' ||
    object.get('type') == 'path'
  ) {
    color = '#9211F7';
    if (object.get('assetType') == 'animatedText') {
      color = '#F7119B';
    } else if (object.get('assetType') == 'audio') {
      color = '#11C0F7';
    }
  }
  if (
    (object.get('assetType') && object.get('assetType') == 'video') ||
    object.get('type') == 'lottie' ||
    object.get('assetType') == 'audio'
  ) {
    objects.push({
      object: object,
      id: object.get('id'),
      label: object.get('id'),
      color: color,
      defaults: [],
      locked: [],
      mask: 'none',
      start: 0,
      end: object.get('duration'),
    });
    if (object.get('duration') < duration) {
      p_keyframes.push({
        start: currenttime,
        end: object.get('duration') + currenttime,
        trimstart: 0,
        trimend: object.get('duration') + currenttime,
        object: object,
        id: object.get('id'),
      });
    } else {
      p_keyframes.push({
        start: currenttime,
        end: duration - currenttime,
        trimstart: 0,
        trimend: duration - currenttime,
        object: object,
        id: object.get('id'),
      });
    }
  } else {
    objects.push({
      object: object,
      id: object.get('id'),
      label: object.get('id'),
      color: color,
      defaults: [],
      locked: [],
      mask: 'none',
    });
    if (object.get('notnew')) {
      p_keyframes.push({
        start: object.get('starttime'),
        end: duration - object.get('starttime'),
        trimstart: 0,
        trimend: duration - currenttime,
        object: object,
        id: object.get('id'),
      });
    } else {
      p_keyframes.push({
        start: currenttime,
        end: duration - currenttime,
        trimstart: 0,
        trimend: duration - currenttime,
        object: object,
        id: object.get('id'),
      });
    }
  }
  renderLayer(object);
  if (
    !object.get('assetType') ||
    object.get('assetType') != 'audio'
  ) {
    props.forEach(function (prop) {
      if (prop == 'lineHeight' || prop == 'charSpacing') {
        if (object.get('type') == 'textbox') {
          if (prop != 'lineHeight') {
            renderProp(prop, object);
          }
          objects
            .find((x) => x.id == object.id)
            .defaults.push({ name: prop, value: object.get(prop) });
        }
      } 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') {
            renderProp(prop, object);
            objects
              .find((x) => x.id == object.id)
              .defaults.push({
                name: prop,
                value: object.shadow.color,
              });
          } else if (prop == 'shadow.blur') {
            objects
              .find((x) => x.id == object.id)
              .defaults.push({
                name: prop,
                value: object.shadow.blur,
              });
          } else if (prop == 'shadow.offsetX') {
            objects
              .find((x) => x.id == object.id)
              .defaults.push({
                name: prop,
                value: object.shadow.offsetX,
              });
          } else if (prop == 'shadow.offsetY') {
            objects
              .find((x) => x.id == object.id)
              .defaults.push({
                name: prop,
                value: object.shadow.offsetY,
              });
          } else if (prop == 'shadow.opacity') {
            objects
              .find((x) => x.id == object.id)
              .defaults.push({
                name: prop,
                value: object.shadow.opacity,
              });
          }
        }
      } else {
        if (
          prop != 'top' &&
          prop != 'scaleY' &&
          prop != 'stroke' &&
          prop != 'width' &&
          prop != 'height'
        ) {
          renderProp(prop, object);
        }
        objects
          .find((x) => x.id == object.id)
          .defaults.push({ name: prop, value: object.get(prop) });
      }
    });
  } else {
    renderProp('volume', object);
    objects
      .find((x) => x.id == object.id)
      .defaults.push({ name: 'volume', value: 0 });
  }
  $('.layer-selected').removeClass('layer-selected');
  $(".layer[data-object='" + object.get('id') + "']").addClass(
    'layer-selected'
  );
  document
    .getElementsByClassName('layer-selected')[0]
    .scrollIntoView();
  objects.find((x) => x.id == object.id).animate = [];
  animate(false, currenttime);
  save();
  checkFilter();
}

// Add a (complex) SVG shape to the canvas
function newSVG(svg, x, y, width, center) {
  var svggroup = [];
  fabric.loadSVGFromURL(svg, function (objects, options) {
    var newsvg = objects[0];
    if (objects.length > 1) {
      newsvg = fabric.util.groupSVGElements(objects, options);
    }
    newsvg.set({
      id: 'Shape' + layer_count,
      stroke: '#000',
      left: x,
      top: y,
      strokeWidth: 0,
      strokeUniform: true,
      originX: 'center',
      originY: 'center',
      strokeDashArray: false,
      absolutePositioned: true,
      paintFirst: 'stroke',
      objectCaching: true,
      sourcePath: svg,
      inGroup: false,
      shadow: {
        color: '#000',
        offsetX: 0,
        offsetY: 0,
        blur: 0,
        opacity: 0,
      },
    });
    newsvg.scaleToWidth(width);
    newsvg.set({
      scaleX: parseFloat(newsvg.get('scaleX').toFixed(2)),
      scaleY: parseFloat(newsvg.get('scaleY').toFixed(2)),
    });
    canvas.add(newsvg);
    newLayer(newsvg);
    canvas.setActiveObject(newsvg);
    canvas.bringToFront(newsvg);
    canvas.renderAll();
    if (center) {
      newsvg.set(
        'left',
        artboard.get('left') + artboard.get('width') / 2
      );
      newsvg.set(
        'top',
        artboard.get('top') + artboard.get('height') / 2
      );
      canvas.renderAll();
    }
  });
}

// Add a video to the canvas
function newVideo(file, src, x, y, duration, center) {
  var newvid = new fabric.Image(file, {
    left: x,
    top: y,
    width: file.width,
    height: file.height,
    originX: 'center',
    originY: 'center',
    backgroundColor: 'rgba(255,255,255,0)',
    cursorWidth: 1,
    stroke: '#000',
    strokeUniform: true,
    paintFirst: 'stroke',
    strokeWidth: 0,
    cursorDuration: 1,
    cursorDelay: 250,
    source: src,
    duration: duration * 1000,
    assetType: 'video',
    id: 'Video' + layer_count,
    objectCaching: false,
    strokeDashArray: false,
    inGroup: false,
    shadow: {
      color: '#000',
      offsetX: 0,
      offsetY: 0,
      blur: 0,
      opacity: 0,
    },
  });
  files.push({ name: newvid.get('id'), file: src });
  newvid.saveElem = newvid.getElement();
  canvas.add(newvid);
  if (newvid.get('width') > artboard.get('width')) {
    newvid.scaleToWidth(artboard.get('width'));
  }
  newvid.scaleToWidth(150);
  canvas.renderAll();
  if (window.duration < newvid.duration + currenttime) {
    window.duration =
      ((newvid.duration + currenttime) / 1000).toFixed(2) * 1000;
  }
  newLayer(newvid);
  canvas.setActiveObject(newvid);
  canvas.bringToFront(newvid);
  if (center) {
    newvid.set(
      'left',
      artboard.get('left') + artboard.get('width') / 2
    );
    newvid.set(
      'top',
      artboard.get('top') + artboard.get('height') / 2
    );
    canvas.renderAll();
  }
  $('#load-video').removeClass('loading-active');
}

// Load a video
function loadVideo(src, x, y, center) {
  var vidObj = document.createElement('video');
  var vidSrc = document.createElement('source');
  vidSrc.src = src;
  vidObj.crossOrigin = 'anonymous';
  vidObj.appendChild(vidSrc);
  vidObj.addEventListener('loadeddata', function () {
    vidObj.width = this.videoWidth;
    vidObj.height = this.videoHeight;
    vidObj.currentTime = 0;
    vidObj.muted = false;
    function waitLoad() {
      if (vidObj.readyState >= 3) {
        newVideo(vidObj, src, x, y, vidObj.duration, center);
      } else {
        window.setTimeout(function () {
          waitLoad();
        }, 100);
      }
    }
    window.setTimeout(function () {
      waitLoad();
    }, 100);
  });
  vidObj.currentTime = 0;
}

// Check that crop controls are inside image
function checkCrop(obj) {
  if (obj.isContainedWithinObject(cropobj)) {
    croptop = obj.get('top');
    cropleft = obj.get('left');
    cropscalex = obj.get('scaleX');
    cropscaley = obj.get('scaleY');
  } else {
    obj.top = croptop;
    obj.left = cropleft;
    obj.scaleX = cropscalex;
    obj.scaleY = cropscaley;
    obj.setCoords();
    obj.saveState();
  }
  obj.set({
    borderColor: '#51B9F9',
  });
  canvas.renderAll();
  crop(canvas.getItemById('cropped'));
}

// Perform a crop
function crop(obj) {
  var crop = canvas.getItemById('crop');
  cropobj.setCoords();
  crop.setCoords();
  var cleft =
    crop.get('left') - (crop.get('width') * crop.get('scaleX')) / 2;
  var ctop =
    crop.get('top') - (crop.get('height') * crop.get('scaleY')) / 2;
  var height =
    (crop.get('height') / cropobj.get('scaleY')) * crop.get('scaleY');
  var width =
    (crop.get('width') / cropobj.get('scaleX')) * crop.get('scaleX');
  var img_height = cropobj.get('height') * cropobj.get('scaleY');
  var img_width = cropobj.get('width') * cropobj.get('scaleX');
  var left =
    cleft -
    (cropobj.get('left') -
      (cropobj.get('width') * cropobj.get('scaleX')) / 2);
  var top =
    ctop -
    (cropobj.get('top') -
      (cropobj.get('height') * cropobj.get('scaleY')) / 2);
  if (left < 0 && top > 0) {
    obj
      .set({ cropY: top / cropobj.get('scaleY'), height: height })
      .setCoords();
    canvas.renderAll();
    obj.set({
      top: ctop + (obj.get('height') * obj.get('scaleY')) / 2,
    });
    canvas.renderAll();
  } else if (top < 0 && left > 0) {
    obj
      .set({ cropX: left / cropobj.get('scaleX'), width: width })
      .setCoords();
    canvas.renderAll();
    obj.set({
      left: cleft + (obj.get('width') * obj.get('scaleX')) / 2,
    });
    canvas.renderAll();
  } else if (top > 0 && left > 0) {
    obj
      .set({
        cropX: left / cropobj.get('scaleX'),
        cropY: top / cropobj.get('scaleY'),
        height: height,
        width: width,
      })
      .setCoords();
    canvas.renderAll();
    obj.set({
      left: cleft + (obj.get('width') * obj.get('scaleX')) / 2,
      top: ctop + (obj.get('height') * obj.get('scaleY')) / 2,
    });
    canvas.renderAll();
  }
  if (obj.get('id') != 'cropped') {
    canvas.remove(crop);
    canvas.remove(canvas.getItemById('overlay'));
    canvas.remove(canvas.getItemById('cropped'));
    cropping = false;
    resetControls();
    canvas.uniformScaling = true;
    canvas.renderAll();
    newKeyframe('scaleX', obj, currenttime, obj.get('scaleX'), true);
    newKeyframe('scaleY', obj, currenttime, obj.get('scaleY'), true);
    newKeyframe('width', obj, currenttime, obj.get('width'), true);
    newKeyframe('height', obj, currenttime, obj.get('width'), true);
    newKeyframe('left', obj, currenttime, obj.get('left'), true);
    newKeyframe('top', obj, currenttime, obj.get('top'), true);
    $('#properties-overlay').removeClass('properties-disabled');
    save();
  }
  canvas.renderAll();
}

var tlcrop = new Image();
tlcrop.src = 'assets/tlcrop.svg';
var trcrop = new Image();
trcrop.src = 'assets/trcrop.svg';
var blcrop = new Image();
blcrop.src = 'assets/blcrop.svg';
var brcrop = new Image();
brcrop.src = 'assets/brcrop.svg';

function overlay() {
  canvas.add(
    new fabric.Rect({
      left: artboard.left,
      top: artboard.top,
      originX: 'left',
      originY: 'top',
      width: artboard.width,
      height: artboard.height,
      fill: 'rgba(0,0,0,0.5)',
      selectable: false,
      id: 'overlay',
    })
  );
}

// Start cropping an image
function cropImage(object) {
  if (!cropping) {
    $('#properties-overlay').addClass('properties-disabled');
    cropping = true;
    cropobj = object;
    canvas.uniformScaling = false;
    cropobj.setCoords();
    var left =
      cropobj.get('left') -
      (cropobj.get('width') * cropobj.get('scaleX')) / 2;
    var top =
      cropobj.get('top') -
      (cropobj.get('height') * cropobj.get('scaleY')) / 2;
    var cropx = cropobj.get('cropX');
    var cropy = cropobj.get('cropY');
    overlay();
    var cropUI = new fabric.Rect({
      left: object.get('left'),
      top: object.get('top'),
      width: object.get('width') * object.get('scaleX') - 5,
      height: object.get('height') * object.get('scaleY') - 5,
      originX: 'center',
      originY: 'center',
      id: 'crop',
      fill: 'rgba(0,0,0,0)',
      shadow: {
        color: 'black',
        offsetX: 0,
        offsetY: 0,
        blur: 0,
        opacity: 0,
      },
    });
    cropobj.clone(function (cloned) {
      cloned.set({
        id: 'cropped',
        selectable: false,
        originX: 'center',
        originY: 'center',
      });
      canvas.add(cloned);
      canvas.bringToFront(cloned);
      canvas.bringToFront(cropUI);
      canvas.renderAll();
      cropobj = object;
    });
    cropobj
      .set({
        cropX: 0,
        cropY: 0,
        width: cropobj.get('ogWidth'),
        height: cropobj.get('ogHeight'),
      })
      .setCoords();
    canvas.renderAll();
    cropobj.set({
      left:
        left +
        (cropobj.get('width') * cropobj.get('scaleX')) / 2 -
        cropx * cropobj.get('scaleX'),
      top:
        top +
        (cropobj.get('height') * cropobj.get('scaleY')) / 2 -
        cropy * cropobj.get('scaleY'),
    });
    cropUI.setControlsVisibility({
      mt: false,
      mb: false,
      mr: false,
      ml: false,
      mtr: false,
    });
    cropUI.controls.tl = new fabric.Control({
      x: -0.5,
      y: -0.5,
      offsetX: 3,
      offsetY: 3,
      cursorStyleHandler:
        fabric.controlsUtils.scaleCursorStyleHandler,
      actionHandler: fabric.controlsUtils.scalingEqually,
      render: function (ctx, left, top, styleOverride, fabricObject) {
        const wsize = 27;
        const hsize = 27;
        ctx.save();
        ctx.translate(left, top);
        ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
        ctx.drawImage(tlcrop, -wsize / 2, -hsize / 2, wsize, hsize);
        ctx.restore();
      },
    });
    cropUI.controls.tr = new fabric.Control({
      x: 0.5,
      y: -0.5,
      offsetX: -3,
      offsetY: 3,
      cursorStyleHandler:
        fabric.controlsUtils.scaleCursorStyleHandler,
      actionHandler: fabric.controlsUtils.scalingEqually,
      render: function (ctx, left, top, styleOverride, fabricObject) {
        const wsize = 27;
        const hsize = 27;
        ctx.save();
        ctx.translate(left, top);
        ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
        ctx.drawImage(trcrop, -wsize / 2, -hsize / 2, wsize, hsize);
        ctx.restore();
      },
    });
    cropUI.controls.bl = new fabric.Control({
      x: -0.5,
      y: 0.5,
      offsetX: 3,
      offsetY: -3,
      cursorStyleHandler:
        fabric.controlsUtils.scaleCursorStyleHandler,
      actionHandler: fabric.controlsUtils.scalingEqually,
      render: function (ctx, left, top, styleOverride, fabricObject) {
        const wsize = 27;
        const hsize = 27;
        ctx.save();
        ctx.translate(left, top);
        ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
        ctx.drawImage(blcrop, -wsize / 2, -hsize / 2, wsize, hsize);
        ctx.restore();
      },
    });
    cropUI.controls.br = new fabric.Control({
      x: 0.5,
      y: 0.5,
      offsetX: -3,
      offsetY: -3,
      cursorStyleHandler:
        fabric.controlsUtils.scaleCursorStyleHandler,
      actionHandler: fabric.controlsUtils.scalingEqually,
      render: function (ctx, left, top, styleOverride, fabricObject) {
        const wsize = 27;
        const hsize = 27;
        ctx.save();
        ctx.translate(left, top);
        ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
        ctx.drawImage(brcrop, -wsize / 2, -hsize / 2, wsize, hsize);
        ctx.restore();
      },
    });
    canvas.add(cropUI);
    canvas.setActiveObject(cropUI);
    canvas.renderAll();
    cropleft = cropUI.get('left');
    croptop = cropUI.get('top');
    cropscalex = cropUI.get('scaleX') - 0.03;
    cropscaley = cropUI.get('scaleY') - 0.03;
  }
}
$(document).on('click', '#crop-image', function () {
  if (canvas.getActiveObject()) {
    cropImage(canvas.getActiveObject());
  }
});

// Add an image to the canvas
function newImage(file, x, y, width, center) {
  var newimg = new fabric.Image(file, {
    left: x,
    top: y,
    originX: 'center',
    originY: 'center',
    stroke: '#000',
    strokeUniform: true,
    strokeWidth: 0,
    paintFirst: 'stroke',
    absolutePositioned: true,
    id: 'Image' + layer_count,
    inGroup: false,
    strokeDashArray: false,
    objectCaching: true,
    shadow: {
      color: 'black',
      offsetX: 0,
      offsetY: 0,
      blur: 0,
      opacity: 0,
    },
  });
  files.push({ name: newimg.get('id'), file: file.src });
  canvas.add(newimg);
  newimg.scaleToWidth(width);
  newimg.set({
    scaleX: parseFloat(newimg.get('scaleX').toFixed(2)),
    scaleY: parseFloat(newimg.get('scaleY').toFixed(2)),
    ogWidth: newimg.get('width'),
    ogHeight: newimg.get('height'),
  });
  canvas.bringToFront(newimg);
  canvas.renderAll();
  newLayer(newimg);
  canvas.setActiveObject(newimg);
  if (center) {
    newimg.set(
      'left',
      artboard.get('left') + artboard.get('width') / 2
    );
    newimg.set(
      'top',
      artboard.get('top') + artboard.get('height') / 2
    );
    canvas.renderAll();
  }
  $('#load-image').removeClass('loading-active');
}

function loadImage(src, x, y, width, center) {
  var image = new Image();
  image.onload = function (img) {
    newImage(image, x, y, width, center);
  };
  image.src = src;
}

function createVideoThumbnail(file, max, seekTo = 0.0, isURL) {
  return new Promise((resolve, reject) => {
    const videoPlayer = document.createElement('video');
    if (isURL) {
      videoPlayer.setAttribute('src', file);
    } else {
      videoPlayer.setAttribute('src', URL.createObjectURL(file));
    }
    videoPlayer.setAttribute('crossorigin', 'anonymous');
    videoPlayer.load();
    videoPlayer.addEventListener('error', (ex) => {
      reject('error when loading video file', ex);
    });
    videoPlayer.addEventListener('loadedmetadata', () => {
      if (videoPlayer.duration < seekTo) {
        reject('video is too short.');
        return;
      }
      setTimeout(() => {
        videoPlayer.currentTime = seekTo;
      }, 200);
      videoPlayer.addEventListener('seeked', () => {
        var oc = document.createElement('canvas');
        var octx = oc.getContext('2d');
        oc.width = videoPlayer.videoWidth;
        oc.height = videoPlayer.videoheight;
        octx.drawImage(videoPlayer, 0, 0);
        if (videoPlayer.videoWidth > videoPlayer.videoHeight) {
          oc.height =
            (videoPlayer.videoHeight / videoPlayer.videoWidth) * max;
          oc.width = max;
        } else {
          oc.width =
            (videoPlayer.videoWidth / videoPlayer.videoHeight) * max;
          oc.height = max;
        }
        octx.drawImage(oc, 0, 0, oc.width, oc.height);
        octx.drawImage(videoPlayer, 0, 0, oc.width, oc.height);
        resolve(oc.toDataURL());
      });
    });
  });
}

function createThumbnail(file, max) {
  return new Promise(function (resolve, reject) {
    var reader = new FileReader();
    reader.onload = function (event) {
      var img = new Image();
      img.onload = function () {
        if (img.width > max) {
          var oc = document.createElement('canvas');
          var octx = oc.getContext('2d');
          oc.width = img.width;
          oc.height = img.height;
          octx.drawImage(img, 0, 0);
          if (img.width > img.height) {
            oc.height = (img.height / img.width) * max;
            oc.width = max;
          } else {
            oc.width = (img.width / img.height) * max;
            oc.height = max;
          }
          octx.drawImage(oc, 0, 0, oc.width, oc.height);
          octx.drawImage(img, 0, 0, oc.width, oc.height);
          resolve(oc.toDataURL());
        } else {
          resolve(img.src);
        }
      };
      img.src = event.target.result;
    };
    reader.readAsDataURL(file);
  });
}

function dataURItoBlob(dataURI) {
  var byteString = atob(dataURI.split(',')[1]);
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  var blob = new Blob([ab], { type: mimeString });
  return blob;
}

async function uploadFromURL() {
  var url = $('#upload-link-input').val();
  let file = await fetch(url).then((r) => r.blob());
  if (file.type.split('/')[0] === 'image') {
    $('#upload-link-input').val('');
    $('.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
      );
    });
    $('#upload-link-input').val('');
  } else {
    alert('File type not accepted');
  }
}
$(document).on('click', '#upload-link-add', uploadFromURL);

function handleUpload(custom = false) {
  var files2;
  if (custom == false) {
    files2 = $('#filepick').get(0).files;
  } else {
    files2 = custom.originalEvent.dataTransfer.files;
  }
  if (files2) {
    Array.from(files2).forEach((file) => {
      uploading = true;
      if (file.size / 1024 / 1024 <= 10) {
        $('#upload-button').html(
          "<img src='assets/upload.svg'> 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(
    "<div class='time-number' style='margin-left:" +
      offset_left +
      "px'>" +
      timenumber +
      's<span></span></div>'
  );
  timenumber++;
  while (timenumber * 1000 <= duration) {
    $('#time-numbers').append(
      "<div class='time-number' style='margin-left:" +
        renderoffset +
        "px'>" +
        timenumber +
        's<span></span></div>'
    );
    if (timenumber % modulo != 0) {
      $('.time-number:last-child()').css('opacity', '0');
    }
    timenumber++;
  }
}

// Change timeline zoom level
function setTimelineZoom(time) {
  $('.object-props').each(function () {
    $(this).offset({
      left:
        p_keyframes.find((x) => x.id == $(this).attr('id')).start /
          time +
        $('#inner-timeline').offset().left +
        offset_left,
    });
    $(this).css({ width: ($(this).width() * timelinetime) / time });
    $(this)
      .find('.trim-row')
      .css({
        left:
          p_keyframes.find((x) => x.id == $(this).attr('id'))
            .trimstart / time,
      });
    $(this)
      .find('.trim-row')
      .css({
        width:
          ($(this).find('.trim-row').width() * timelinetime) / time,
      });
  });
  timelinetime = time;
  $('.keyframe').each(function () {
    $(this).offset({
      left:
        $(this).attr('data-time') / timelinetime +
        $('#inner-timeline').offset().left +
        offset_left,
    });
  });
  $('#seekbar').offset({
    left:
      $('#inner-timeline').offset().left +
      currenttime / timelinetime +
      offset_left,
  });
  $('#inner-timeline').css({ width: duration / timelinetime + 50 });
  $('#inner-seekarea').css({
    minWidth: duration / timelinetime + 50,
  });
  renderTimeMarkers();
}
$(document).on('input', '#timeline-zoom', function () {
  setTimelineZoom($('#timeline-zoom').val());
});

function removeKeyframe() {
  keyframes = $.grep(keyframes, function (e) {
    return (
      e.t != selectedkeyframe.attr('data-time') ||
      e.id != selectedkeyframe.attr('data-object') ||
      e.name != selectedkeyframe.attr('data-property')
    );
  });
  if (selectedkeyframe.attr('data-property') == 'left') {
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != selectedkeyframe.attr('data-time') ||
        e.id != selectedkeyframe.attr('data-object') ||
        e.name != 'top'
      );
    });
  } else if (selectedkeyframe.attr('data-property') == 'scaleX') {
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != selectedkeyframe.attr('data-time') ||
        e.id != selectedkeyframe.attr('data-object') ||
        e.name != 'scaleY'
      );
    });
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != selectedkeyframe.attr('data-time') ||
        e.id != selectedkeyframe.attr('data-object') ||
        e.name != 'width'
      );
    });
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != selectedkeyframe.attr('data-time') ||
        e.id != selectedkeyframe.attr('data-object') ||
        e.name != 'height'
      );
    });
  } else if (
    selectedkeyframe.attr('data-property') == 'strokeWidth'
  ) {
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != selectedkeyframe.attr('data-time') ||
        e.id != selectedkeyframe.attr('data-object') ||
        e.name != 'stroke'
      );
    });
  } else if (
    selectedkeyframe.attr('data-property') == 'shadow.color'
  ) {
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != selectedkeyframe.attr('data-time') ||
        e.id != selectedkeyframe.attr('data-object') ||
        e.name != 'shadow.blur'
      );
    });
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != selectedkeyframe.attr('data-time') ||
        e.id != selectedkeyframe.attr('data-object') ||
        e.name != 'shadow.offsetX'
      );
    });
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != selectedkeyframe.attr('data-time') ||
        e.id != selectedkeyframe.attr('data-object') ||
        e.name != 'shadow.offsetY'
      );
    });
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != selectedkeyframe.attr('data-time') ||
        e.id != selectedkeyframe.attr('data-object') ||
        e.name != 'shadow.opacity'
      );
    });
  } else if (
    selectedkeyframe.attr('data-property') == 'charSpacing'
  ) {
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != selectedkeyframe.attr('data-time') ||
        e.id != selectedkeyframe.attr('data-object') ||
        e.name != 'lineHeight'
      );
    });
  }
  selectedkeyframe.remove();
  $('#keyframe-properties').removeClass('show-properties');
}

// Delete a keyframe
function deleteKeyframe() {
  if (shiftkeys.length > 0) {
    shiftkeys.forEach(function (key) {
      selectedkeyframe = $(key.keyframe);
      removeKeyframe();
    });
    shiftkeys = [];
  } else {
    removeKeyframe();
  }
  animate(false, currenttime);
  save();
}
$(document).on('click', '#delete-keyframe', deleteKeyframe);

// Copy keyframes
function copyKeyframes() {
  clipboard.sort(function (a, b) {
    return a.t - b.t;
  });
  var inittime = clipboard[0].t;
  clipboard.forEach(function (keyframe) {
    var newtime = keyframe.t - inittime + currenttime;
    newKeyframe(
      keyframe.name,
      canvas.getItemById(keyframe.id),
      newtime,
      keyframe.value,
      true
    );
    var keyprop = keyframe.name;
    if (keyprop == 'left') {
      const keyarr2 = $.grep(keyframes, function (e) {
        return (
          e.t == keyframe.t && e.id == keyframe.id && e.name == 'top'
        );
      });
      newKeyframe(
        'top',
        canvas.getItemById(keyframe.id),
        newtime,
        keyarr2[0].value,
        true
      );
    } else if (keyprop == 'scaleX') {
      var keyarr2 = $.grep(keyframes, function (e) {
        return (
          e.t == keyframe.t &&
          e.id == keyframe.id &&
          e.name == 'scaleY'
        );
      });
      newKeyframe(
        'scaleY',
        canvas.getItemById(keyframe.id),
        newtime,
        keyarr2[0].value,
        true
      );
      var keyarr2 = $.grep(keyframes, function (e) {
        return (
          e.t == keyframe.t &&
          e.id == keyframe.id &&
          e.name == 'width'
        );
      });
      if (keyarr2.length > 0) {
        newKeyframe(
          'width',
          canvas.getItemById(keyframe.id),
          newtime,
          keyarr2[0].value,
          true
        );
      }
      var keyarr2 = $.grep(keyframes, function (e) {
        return (
          e.t == keyframe.t &&
          e.id == keyframe.id &&
          e.name == 'height'
        );
      });
      if (keyarr2.length > 0) {
        newKeyframe(
          'height',
          canvas.getItemById(keyframe.id),
          newtime,
          keyarr2[0].value,
          true
        );
      }
    } else if (keyprop == 'strokeWidth') {
      const keyarr2 = $.grep(keyframes, function (e) {
        return (
          e.t == keyframe.t &&
          e.id == keyframe.id &&
          e.name == 'stroke'
        );
      });
      newKeyframe(
        'stroke',
        canvas.getItemById(keyframe.id),
        newtime,
        keyarr2[0].value,
        true
      );
    } else if (keyprop == 'charSpacing') {
      const keyarr2 = $.grep(keyframes, function (e) {
        return (
          e.t == keyframe.t &&
          e.id == keyframe.id &&
          e.name == 'lineHeight'
        );
      });
      newKeyframe(
        'lineHeight',
        canvas.getItemByid(keyframe.id),
        newtime,
        keyarr2[0].value,
        true
      );
    } else if (keyprop == 'shadow.color') {
      var keyarr2 = $.grep(keyframes, function (e) {
        return (
          e.t == keyframe.t &&
          e.id == keyframe.id &&
          e.name == 'shadow.opacity'
        );
      });
      newKeyframe(
        'shadow.opacity',
        canvas.getItemById(keyframe.id),
        newtime,
        keyarr2[0].value,
        true
      );
      var keyarr2 = $.grep(keyframes, function (e) {
        return (
          e.t == keyframe.t &&
          e.id == keyframe.id &&
          e.name == 'shadow.offsetX'
        );
      });
      newKeyframe(
        'shadow.offsetX',
        canvas.getItemById(keyframe.id),
        newtime,
        keyarr2[0].value,
        true
      );
      var keyarr2 = $.grep(keyframes, function (e) {
        return (
          e.t == keyframe.t &&
          e.id == keyframe.id &&
          e.name == 'shadow.offsetY'
        );
      });

      newKeyframe(
        'shadow.offsetY',
        canvas.getItemById(keyframe.id),
        newtime,
        keyarr2[0].value,
        true
      );
      var keyarr2 = $.grep(keyframes, function (e) {
        return (
          e.t == keyframe.t &&
          e.id == keyframe.id &&
          e.name == 'shadow.blur'
        );
      });
      newKeyframe(
        'shadow.blur',
        canvas.getItemById(keyframe.id),
        newtime,
        keyarr2[0].value,
        true
      );
    }
    save();
  });
}

// Update keyframe (after dragging)
function updateKeyframe(drag, newval, offset) {
  var time = parseFloat(
    (drag.position().left * timelinetime).toFixed(1)
  );
  const keyprop = drag.attr('data-property');
  const keytime = drag.attr('data-time');
  const keyarr = $.grep(keyframes, function (e) {
    return (
      e.t == parseFloat(keytime) &&
      e.id == drag.attr('data-object') &&
      e.name == keyprop
    );
  });
  const keyobj = canvas.getItemById(keyarr[0].id);
  time =
    parseFloat(
      p_keyframes.find((x) => x.id == keyobj.get('id')).start
    ) + time;
  if (newval) {
    time = currenttime;
  }
  var keyval = keyarr[0].value;
  if (newval) {
    if (keyprop == 'shadow.color') {
      keyval = keyobj.shadow.color;
    } else if (keyprop == 'volume') {
      keyval = parseFloat($('#object-volume input').val() / 200);
    } else {
      keyval = keyobj.get(keyprop);
    }
  } else if (keyprop == 'left') {
    keyval = keyval + artboard.get('left');
  }
  keyframes = $.grep(keyframes, function (e) {
    return (
      e.t != parseFloat(keytime) ||
      e.id != drag.attr('data-object') ||
      e.name != keyprop
    );
  });
  newKeyframe(keyprop, keyobj, time, keyval, false);
  if (keyprop == 'left') {
    const keyarr2 = $.grep(keyframes, function (e) {
      return (
        e.t == parseFloat(keytime) &&
        e.id == drag.attr('data-object') &&
        e.name == 'top'
      );
    });
    var keyval2 = keyarr2[0].value + artboard.get('top');
    if (newval) {
      keyval2 = canvas.getItemById(keyarr2[0].id).get('top');
    }
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != parseFloat(keytime) ||
        e.id != drag.attr('data-object') ||
        e.name != 'top'
      );
    });
    newKeyframe('top', keyobj, time, keyval2, false);
  } else if (keyprop == 'scaleX') {
    var keyarr2 = $.grep(keyframes, function (e) {
      return (
        e.t == parseFloat(keytime) &&
        e.id == drag.attr('data-object') &&
        e.name == 'scaleY'
      );
    });
    var keyval2 = keyarr2[0].value;
    if (newval) {
      keyval2 = canvas.getItemById(keyarr2[0].id).get('scaleY');
    }
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != parseFloat(keytime) ||
        e.id != drag.attr('data-object') ||
        e.name != 'scaleY'
      );
    });
    newKeyframe('scaleY', keyobj, time, keyval2, false);
    var keyarr2 = $.grep(keyframes, function (e) {
      return (
        e.t == parseFloat(keytime) &&
        e.id == drag.attr('data-object') &&
        e.name == 'width'
      );
    });
    if (keyarr2.length > 0) {
      var keyval2 = keyarr2[0].value;
      if (newval) {
        keyval2 = canvas.getItemById(keyarr2[0].id).get('width');
      }
      keyframes = $.grep(keyframes, function (e) {
        return (
          e.t != parseFloat(keytime) ||
          e.id != drag.attr('data-object') ||
          e.name != 'width'
        );
      });
      newKeyframe('width', keyobj, time, keyval2, false);
    }
    var keyarr2 = $.grep(keyframes, function (e) {
      return (
        e.t == parseFloat(keytime) &&
        e.id == drag.attr('data-object') &&
        e.name == 'height'
      );
    });
    if (keyarr2.length > 0) {
      var keyval2 = keyarr2[0].value;
      if (newval) {
        keyval2 = canvas.getItemById(keyarr2[0].id).get('height');
      }
      keyframes = $.grep(keyframes, function (e) {
        return (
          e.t != parseFloat(keytime) ||
          e.id != drag.attr('data-object') ||
          e.name != 'height'
        );
      });
      newKeyframe('height', keyobj, time, keyval2, false);
    }
  } else if (keyprop == 'strokeWidth') {
    const keyarr2 = $.grep(keyframes, function (e) {
      return (
        e.t == parseFloat(keytime) &&
        e.id == drag.attr('data-object') &&
        e.name == 'stroke'
      );
    });
    var keyval2 = keyarr2[0].value;
    if (newval) {
      keyval2 = canvas.getItemById(keyarr2[0].id).get('stroke');
    }
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != parseFloat(keytime) ||
        e.id != drag.attr('data-object') ||
        e.name != 'stroke'
      );
    });
    newKeyframe('stroke', keyobj, time, keyval2, false);
  } else if (keyprop == 'charSpacing') {
    const keyarr2 = $.grep(keyframes, function (e) {
      return (
        e.t == parseFloat(keytime) &&
        e.id == drag.attr('data-object') &&
        e.name == 'lineHeight'
      );
    });
    var keyval2 = keyarr2[0].value;
    if (newval) {
      keyval2 = canvas.getItemById(keyarr2[0].id).get('lineHeight');
    }
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != parseFloat(keytime) ||
        e.id != drag.attr('data-object') ||
        e.name != 'lineHeight'
      );
    });
    newKeyframe('lineHeight', keyobj, time, keyval2, false);
  } else if (keyprop == 'shadow.color') {
    var keyarr2 = $.grep(keyframes, function (e) {
      return (
        e.t == parseFloat(keytime) &&
        e.id == drag.attr('data-object') &&
        e.name == 'shadow.opacity'
      );
    });
    var keyval2 = keyarr2[0].value;
    if (newval) {
      keyval2 = canvas.getItemById(keyarr2[0].id).shadow.opacity;
    }
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != parseFloat(keytime) ||
        e.id != drag.attr('data-object') ||
        e.name != 'shadow.opacity'
      );
    });
    newKeyframe('shadow.opacity', keyobj, time, keyval2, false);
    var keyarr2 = $.grep(keyframes, function (e) {
      return (
        e.t == parseFloat(keytime) &&
        e.id == drag.attr('data-object') &&
        e.name == 'shadow.offsetX'
      );
    });
    var keyval2 = keyarr2[0].value;
    if (newval) {
      keyval2 = canvas.getItemById(keyarr2[0].id).shadow.offsetX;
    }
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != parseFloat(keytime) ||
        e.id != drag.attr('data-object') ||
        e.name != 'shadow.offsetX'
      );
    });
    newKeyframe('shadow.offsetX', keyobj, time, keyval2, false);
    var keyarr2 = $.grep(keyframes, function (e) {
      return (
        e.t == parseFloat(keytime) &&
        e.id == drag.attr('data-object') &&
        e.name == 'shadow.offsetY'
      );
    });
    var keyval2 = keyarr2[0].value;
    if (newval) {
      keyval2 = canvas.getItemById(keyarr2[0].id).shadow.offsetY;
    }
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != parseFloat(keytime) ||
        e.id != drag.attr('data-object') ||
        e.name != 'shadow.offsetY'
      );
    });
    newKeyframe('shadow.offsetY', keyobj, time, keyval2, false);
    var keyarr2 = $.grep(keyframes, function (e) {
      return (
        e.t == parseFloat(keytime) &&
        e.id == drag.attr('data-object') &&
        e.name == 'shadow.blur'
      );
    });
    var keyval2 = keyarr2[0].value;
    if (newval) {
      keyval2 = canvas.getItemById(keyarr2[0].id).shadow.blur;
    }
    keyframes = $.grep(keyframes, function (e) {
      return (
        e.t != parseFloat(keytime) ||
        e.id != drag.attr('data-object') ||
        e.name != 'shadow.blur'
      );
    });
    newKeyframe('shadow.blur', keyobj, time, keyval2, false);
  }
  if (offset) {
    drag.attr('data-time', time);
  } else {
    drag.attr(
      'data-time',
      time + p_keyframes.find((x) => x.id == keyarr[0].id).start
    );
  }
  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;
    }
  });
}

function keyframeSnap(drag) {
  if (shiftkeys.length == 0) {
    if (
      drag.offset().left > $('#seekbar').offset().left - 5 &&
      drag.offset().left < $('#seekbar').offset().left + 5
    ) {
      drag.offset({ left: $('#seekbar').offset().left });
      $('#line-snap').offset({
        left: $('#seekbar').offset().left,
        top: drag.parent().parent().offset().top,
      });
      $('#line-snap').css({
        height: drag.parent().parent().height(),
      });
      $('#line-snap').addClass('line-active');
    } else {
      drag
        .parent()
        .parent()
        .find('.keyframe')
        .each(function (index) {
          if (!drag.is($(this))) {
            if (
              drag.offset().left > $(this).offset().left - 5 &&
              drag.offset().left < $(this).offset().left + 5
            ) {
              drag.offset({ left: $(this).offset().left });
              $('#line-snap').offset({
                left: $(this).offset().left,
                top: drag.parent().parent().offset().top,
              });
              $('#line-snap').css({
                height: drag.parent().parent().height(),
              });
              $('#line-snap').addClass('line-active');
              return false;
            }
          }
          if (index == $('.keyframe').length - 1) {
            $('#line-snap').removeClass('line-active');
          }
        });
    }
  }
}

// Dragging a keyframe
function dragKeyframe(e) {
  if (e.which == 3) {
    return false;
  }
  e.stopPropagation();
  e.preventDefault();
  var inst = this;
  var drag = $(this);
  var pageX = e.pageX;
  var offset = $(this).offset();
  var move = false;
  if (e.shiftKey) {
    if (!$(this).hasClass('keyframe-selected')) {
      shiftkeys.push({
        keyframe: this,
        offset: $(this).offset().left,
      });
      $(this).addClass('keyframe-selected');
    } else {
      shiftkeys = $.grep(shiftkeys, function (e) {
        return e.keyframe != this;
      });
      $(this).removeClass('keyframe-selected');
    }
  }
  if (shiftkeys.length > 0) {
    shiftkeys.forEach(function (key) {
      key.offset = $(key.keyframe).offset().left;
    });
  }
  function draggingKeyframe(e) {
    move = true;
    var left = offset.left + (e.pageX - pageX);
    if (shiftkeys.length == 0) {
      if (left > $('#timearea').offset().left + offset_left) {
        drag.offset({ left: left });
      } else {
        drag.offset({
          left: $('#timearea').offset().left + offset_left,
        });
      }
      keyframeSnap(drag);
    } else {
      shiftkeys.forEach(function (key) {
        if (key.keyframe != inst) {
          $(key.keyframe).offset({
            left: key.offset + (e.pageX - pageX),
          });
          keyframeSnap($(key.keyframe));
        } else {
          drag.offset({ left: left });
          keyframeSnap(drag);
        }
      });
    }
  }
  function releasedKeyframe(e) {
    $('body')
      .off('mousemove', draggingKeyframe)
      .off('mouseup', releasedKeyframe);
    $('#line-snap').removeClass('line-active');
    if (move) {
      if (shiftkeys.length == 0) {
        // Check for 60FPS playback, 16ms "slots"
        var time = parseFloat(
          (drag.position().left * timelinetime).toFixed(1)
        );
        if (time % 16.666 != 0) {
          drag.offset({
            left:
              (Math.ceil(time / 16.666) * 16.666) / timelinetime +
              drag.parent().offset().left,
          });
          updateKeyframe(drag, false);
        } else {
          updateKeyframe(drag, false);
        }
      } else {
        shiftkeys.forEach(function (key) {
          // Check for 60FPS playback, 16ms "slots"
          var time = parseFloat(
            ($(key.keyframe).position().left * timelinetime).toFixed(
              1
            )
          );
          if (time % 16.666 != 0) {
            $(key.keyframe).offset({
              left:
                (Math.ceil(time / 16.666) * 16.666) / timelinetime +
                $(key.keyframe).parent().offset().left,
            });
            updateKeyframe($(key.keyframe), false);
          } else {
            updateKeyframe($(key.keyframe), false);
          }
        });
      }
    } else if (!e.shiftDown) {
      keyframeProperties(inst);
    }
    move = false;
    $('.line-active').removeClass('line-active');
    save();
  }
  $('body')
    .on('mouseup', releasedKeyframe)
    .on('mousemove', draggingKeyframe);
}
$(document).on('mousedown', '.keyframe', dragKeyframe);

// Render current time in the playback area
function renderTime() {
  var minutes = Math.floor(currenttime / 1000 / 60);
  var seconds = (currenttime / 1000 - minutes * 60).toFixed(2);
  $('#current-time input').val(
    ('0' + minutes).slice(-2) +
      ':' +
      ('0' + Math.floor(seconds)).slice(-2) +
      ':' +
      ('0' + Math.floor((seconds % 1) * 100)).slice(-2)
  );
}

// Update current time (and account for frame "slots")
function updateTime(drag, check) {
  if ($('#timeline').scrollLeft() > offset_left) {
    currenttime = parseFloat(
      (
        (drag.position().left +
          $('#timeline').scrollLeft() -
          offset_left) *
        timelinetime
      ).toFixed(1)
    );
  } else {
    currenttime = parseFloat(
      (
        (drag.position().left +
          $('#timeline').scrollLeft() -
          offset_left) *
        timelinetime
      ).toFixed(1)
    );
  }
  // Check for 60FPS playback, 16ms "slots"
  if (currenttime % 16.666 != 0 && !check) {
    currenttime = Math.ceil(currenttime / 16.666) * 16.666;
  }
  renderTime();
  pause();
  animate(false, currenttime);
}

// Dragging the seekbar
function dragSeekBar(e) {
  if (e.which == 3) {
    return false;
  }
  var drag = $(this);
  var pageX = e.pageX;
  var offset = $(this).offset();
  tempselection = canvas.getActiveObject();
  canvas.discardActiveObject();
  function dragging(e) {
    paused = true;
    var left = offset.left + (e.pageX - pageX);
    if (
      left > $('#timearea').offset().left + offset_left &&
      left - $('#timearea').offset().left <
        duration / timelinetime + offset_left
    ) {
      drag.offset({ left: left });
    } else if (left < $('#timearea').offset().left + offset_left) {
      drag.offset({
        left: offset_left + $('#timearea').offset().left,
      });
    }
    if ($('#timeline').scrollLeft() > offset_left) {
      currenttime = parseFloat(
        (
          (drag.position().left +
            $('#timeline').scrollLeft() -
            offset_left) *
          timelinetime
        ).toFixed(1)
      );
    } else {
      currenttime = parseFloat(
        (
          (drag.position().left +
            $('#timeline').scrollLeft() -
            offset_left) *
          timelinetime
        ).toFixed(1)
      );
    }
    animate(false, currenttime);
    seeking = true;
    renderTime();
  }
  function released(e) {
    $('body').off('mousemove', dragging).off('mouseup', released);
    updateTime(drag, false);
    seeking = false;
    if (tempselection && tempselection.type != 'activeSelection') {
      reselect(tempselection);
    }
    updatePanelValues();
  }
  $('body').on('mouseup', released).on('mousemove', dragging);
}
$(document).on('mousedown', '#seekbar', dragSeekBar);

// Dragging layer horizontally
function dragObjectProps(e) {
  if (e.which == 3) {
    return false;
  }
  var drag = $(this).parent();
  var drag2 = $(this).find('.trim-row');
  var target = e.target;
  var pageX = e.pageX;
  var offset = drag.offset();
  var offset2 = drag2.offset();
  var initwidth = drag2.width();
  var initpos = drag2.position().left;
  var opened = false;
  var trim = 'no';
  // Trim layer to hovered area
  if (e.metaKey) {
    if (e.shiftKey) {
      if (drag2.position().left + e.pageX >= 0) {
        drag2.offset({
          left:
            hovertime / timelinetime -
            p_keyframes.find((x) => x.id == drag.attr('id'))
              .trimstart /
              timelinetime +
            offset2.left,
        });
        const leftval = parseFloat(
          (drag2.position().left * timelinetime).toFixed(1)
        );
        p_keyframes.find((x) => x.id == drag.attr('id')).trimstart =
          leftval;
        drag2.css({
          width:
            (p_keyframes.find((x) => x.id == drag.attr('id'))
              .trimend -
              p_keyframes.find((x) => x.id == drag.attr('id'))
                .trimstart) /
            timelinetime,
        });
        return false;
      }
    } else {
      if (
        hovertime +
          p_keyframes.find((x) => x.id == drag.attr('id')).start <
        duration
      ) {
        drag2.css({
          width:
            hovertime / timelinetime -
            p_keyframes.find((x) => x.id == drag.attr('id'))
              .trimstart /
              timelinetime,
        });
        save();
        p_keyframes.find((x) => x.id == drag.attr('id')).end =
          hovertime;
        p_keyframes.find((x) => x.id == drag.attr('id')).trimend =
          hovertime;
      }
      return false;
    }
  }
  if (pageX - $(this).find('.trim-row').offset().left < 7) {
    trim = 'left';
  } else if (
    pageX - $(this).find('.trim-row').offset().left >
    $(this).find('.trim-row').width() - 7
  ) {
    trim = 'right';
  }
  function dragging(e) {
    if (trim == 'no') {
      var left = offset.left + (e.pageX - pageX);
      if (
        left >
        $('#timearea').offset().left +
          offset_left -
          $('#timeline').scrollLeft()
      ) {
        drag.offset({ left: left });
      } else if (
        left + $('#timeline').scrollLeft() <
        $('#timearea').offset().left + offset_left
      ) {
        drag.css({ left: offset_left });
      }
      p_keyframes.find((x) => x.id == drag.attr('id')).start =
        parseFloat(
          (
            (drag.position().left -
              offset_left +
              $('#timeline').scrollLeft()) *
            timelinetime
          ).toFixed(1)
        );
      p_keyframes.find((x) => x.id == drag.attr('id')).end =
        parseFloat(
          (
            (drag.position().left +
              drag.width() -
              offset_left +
              $('#timeline').scrollLeft()) *
            timelinetime
          ).toFixed(1)
        );
      if (
        $(".keyframe-row[data-object='" + drag.attr('id') + "']").is(
          ':hidden'
        )
      ) {
        opened = true;
        $(".layer[data-object='" + drag.attr('id') + "']")
          .find('.properties')
          .toggle();
        $(".layer[data-object='" + drag.attr('id') + "']")
          .find('.properties')
          .toggleClass('layeron');
        $(
          ".keyframe-row[data-object='" + drag.attr('id') + "']"
        ).toggle();
        setTimelineZoom(timelinetime);
      }
      drag.find('.keyframe').each(function () {
        updateKeyframe($(this), false, true);
      });
      animate(false, currenttime);
    } else if (trim == 'left') {
      if (drag2.position().left + (e.pageX - pageX) >= 0) {
        drag2.offset({
          left: offset2.left + (e.pageX - pageX),
        });
        drag2.css({
          width: initwidth - (-initpos + drag2.position().left),
        });
        const leftval = parseFloat(
          (drag2.position().left * timelinetime).toFixed(1)
        );
        p_keyframes.find((x) => x.id == drag.attr('id')).trimstart =
          leftval;
      }
    } else if (trim == 'right') {
      if (initwidth + (e.pageX - pageX) < duration / timelinetime) {
        drag2.css({
          width: initwidth + (e.pageX - pageX),
        });
      } else {
        drag2.css({
          width:
            duration / timelinetime -
            drag.position().left -
            $('#timeline').scrollLeft() +
            offset_left,
        });
      }
      const rightval = parseFloat(
        (
          (drag2.position().left + drag2.width()) *
          timelinetime
        ).toFixed(1)
      );
      p_keyframes.find((x) => x.id == drag.attr('id')).end = rightval;
      p_keyframes.find((x) => x.id == drag.attr('id')).trimend =
        rightval;
    }
  }
  function released(e) {
    $('body').off('mousemove', dragging).off('mouseup', released);
    if (opened) {
      $(".layer[data-object='" + drag.attr('id') + "']")
        .find('.properties')
        .toggle();
      $(".layer[data-object='" + drag.attr('id') + "']")
        .find('.properties')
        .toggleClass('layeron');
      $(
        ".keyframe-row[data-object='" + drag.attr('id') + "']"
      ).toggle();
      setTimelineZoom(timelinetime);
    }
    animate(false, currenttime);
    save();
  }
  $('body').on('mouseup', released).on('mousemove', dragging);
}
$(document).on('mousedown', '.main-row', dragObjectProps);

function resetHeight() {
  var top = $(window).height() - oldtimelinepos - 92;
  if ($('#upload-tool').hasClass('tool-active')) {
    $('#browser').css('top', '150px');
    $('#browser').css(
      'height',
      'calc(100% - ' + (top + 97 + 150) + 'px)'
    );
  } else {
    $('#browser').css('top', '110px');
    $('#browser').css(
      'height',
      'calc(100% - ' + (top + 97 + 100) + 'px)'
    );
  }
  $('#timearea').css('height', top);
  $('#layer-list').css('height', top);
  $('#toolbar').css('height', 'calc(100% - ' + (top + 97) + 'px)');
  $('#canvas-area').css(
    'height',
    'calc(100% - ' + (top + 97) + 'px)'
  );
  $('#properties').css('height', 'calc(100% - ' + (top + 97) + 'px)');
  $('#timeline-handle').css('bottom', top + 95);
  resizeCanvas();
}

// Dragging timeline vertically
function dragTimeline(e) {
  const disableselect = (e) => {  
    return false  
  }  
  document.onselectstart = disableselect  
  document.onmousedown = disableselect
  
  oldtimelinepos = e.pageY;
  if (e.which == 3) {
    return false;
  }
  function draggingKeyframe(e) {
    oldtimelinepos = e.pageY;
    resetHeight(e);
  }
  function releasedKeyframe(e) {
    $('body')
      .off('mousemove', draggingKeyframe)
      .off('mouseup', releasedKeyframe);
  }
  $('body')
    .on('mouseup', releasedKeyframe)
    .on('mousemove', draggingKeyframe);
}

$(document).on('mousedown', '#timeline-handle', dragTimeline);

oldtimelinepos = $(window).height() - 92 - $('#timearea').height();

// Sync scrolling (vertical)
function syncScroll(el1, el2) {
  var $el1 = $(el1);
  var $el2 = $(el2);
  var forcedScroll = false;
  $el1.scroll(function () {
    performScroll($el1, $el2);
  });
  $el2.scroll(function () {
    performScroll($el2, $el1);
  });

  function performScroll($scrolled, $toScroll) {
    if (forcedScroll) return (forcedScroll = false);
    var percent =
      ($scrolled.scrollTop() /
        ($scrolled[0].scrollHeight - $scrolled.outerHeight())) *
      100;
    setScrollTopFromPercent($toScroll, percent);
  }

  function setScrollTopFromPercent($el, percent) {
    var scrollTopPos =
      (percent / 100) * ($el[0].scrollHeight - $el.outerHeight());
    forcedScroll = true;
    $el.scrollTop(scrollTopPos);
  }
}

// Sync scrolling (horizontal)
function syncScrollHoz(el1, el2) {
  var $el1 = $(el1);
  var $el2 = $(el2);
  var forcedScroll = false;
  $el1.scroll(function () {
    performScroll($el1, $el2);
  });
  $el2.scroll(function () {
    performScroll($el2, $el1);
  });

  function performScroll($scrolled, $toScroll) {
    if (forcedScroll) return (forcedScroll = false);
    var percent =
      ($scrolled.scrollLeft() / $scrolled.outerWidth()) * 100;
    setScrollLeftFromPercent($toScroll, percent);
  }

  function setScrollLeftFromPercent($el, percent) {
    var scrollLeftPos = (percent / 100) * $el.outerWidth();
    forcedScroll = true;
    $el.scrollLeft(scrollLeftPos);
  }
}

// Show keyframe properties
function keyframeProperties(inst) {
  if (!shiftdown) {
    selectedkeyframe = $(inst);
    const popup = $('#keyframe-properties');
    var keyarr = keyframes.filter(function (e) {
      return (
        e.t == selectedkeyframe.attr('data-time') &&
        e.id == selectedkeyframe.attr('data-object') &&
        e.name == selectedkeyframe.attr('data-property')
      );
    });
    $('#easing select').val(keyarr[0].easing);
    $('#easing select').niceSelect('update');
    popup.css({
      left: $(inst).offset().left - popup.width() / 2,
      top: $(inst).offset().top - popup.height() - 20,
    });
    popup.addClass('show-properties');
    $(inst).addClass('keyframe-selected');
  }
}

// Apply easing to keyframe
function applyEasing() {
  var keyarr = keyframes.filter(function (e) {
    return (
      e.t == selectedkeyframe.attr('data-time') &&
      e.id == selectedkeyframe.attr('data-object') &&
      e.name == selectedkeyframe.attr('data-property')
    );
  });
  keyarr[0].easing = $(this).attr('data-value');
  if (selectedkeyframe.attr('data-property') == 'left') {
    var keyarr = keyframes.filter(function (e) {
      return (
        e.t == selectedkeyframe.attr('data-time') &&
        e.id == selectedkeyframe.attr('data-object') &&
        e.name == 'top'
      );
    });
    keyarr[0].easing = $('#easing select').val();
  } else if (selectedkeyframe.attr('data-property') == 'scaleX') {
    var keyarr = keyframes.filter(function (e) {
      return (
        e.t == selectedkeyframe.attr('data-time') &&
        e.id == selectedkeyframe.attr('data-object') &&
        e.name == 'scaleY'
      );
    });
    keyarr[0].easing = $('#easing select').val();
    var keyarr = keyframes.filter(function (e) {
      return (
        e.t == selectedkeyframe.attr('data-time') &&
        e.id == selectedkeyframe.attr('data-object') &&
        e.name == 'width'
      );
    });
    keyarr[0].easing = $('#easing select').val();
    var keyarr = keyframes.filter(function (e) {
      return (
        e.t == selectedkeyframe.attr('data-time') &&
        e.id == selectedkeyframe.attr('data-object') &&
        e.name == 'height'
      );
    });
    keyarr[0].easing = $('#easing select').val();
  } else if (
    selectedkeyframe.attr('data-property') == 'strokeWidth'
  ) {
    var keyarr = keyframes.filter(function (e) {
      return (
        e.t == selectedkeyframe.attr('data-time') &&
        e.id == selectedkeyframe.attr('data-object') &&
        e.name == 'stroke'
      );
    });
    keyarr[0].easing = $('#easing select').val();
  } else if (
    selectedkeyframe.attr('data-property') == 'shadow.color'
  ) {
    var keyarr = keyframes.filter(function (e) {
      return (
        e.t == selectedkeyframe.attr('data-time') &&
        e.id == selectedkeyframe.attr('data-object') &&
        e.name == 'shadow.opacity'
      );
    });
    keyarr[0].easing = $('#easing select').val();
    var keyarr = keyframes.filter(function (e) {
      return (
        e.t == selectedkeyframe.attr('data-time') &&
        e.id == selectedkeyframe.attr('data-object') &&
        e.name == 'shadow.offsetX'
      );
    });
    keyarr[0].easing = $('#easing select').val();
    var keyarr = keyframes.filter(function (e) {
      return (
        e.t == selectedkeyframe.attr('data-time') &&
        e.id == selectedkeyframe.attr('data-object') &&
        e.name == 'shadow.offsetY'
      );
    });
    keyarr[0].easing = $('#easing select').val();
    var keyarr = keyframes.filter(function (e) {
      return (
        e.t == selectedkeyframe.attr('data-time') &&
        e.id == selectedkeyframe.attr('data-object') &&
        e.name == 'shadow.blur'
      );
    });
    keyarr[0].easing = $('#easing select').val();
  } else if (
    selectedkeyframe.attr('data-property') == 'charSpacing'
  ) {
    var keyarr = keyframes.filter(function (e) {
      return (
        e.t == selectedkeyframe.attr('data-time') &&
        e.id == selectedkeyframe.attr('data-object') &&
        e.name == 'lineHeight'
      );
    });
    keyarr[0].easing = $('#easing select').val();
  }
  $('#keyframe-properties').removeClass('show-properties');
  selectedkeyframe.removeClass('keyframe-selected');
  save();
}
$(document).on('mouseup', '#easing li', applyEasing);

// Click on seek area to seek (still not working properly)
function seekTo(e) {
  if ($(e.target).hasClass('keyframe')) {
    return false;
  }
  paused = true;
  if ($('#seekarea').scrollLeft() > offset_left) {
    currenttime = parseFloat(
      (
        (e.pageX +
          $('#seekarea').scrollLeft() -
          $('#timearea').offset().left -
          offset_left) *
        timelinetime
      ).toFixed(1)
    );
  } else {
    currenttime = parseFloat(
      (
        (e.pageX +
          $('#seekarea').scrollLeft() -
          $('#timearea').offset().left -
          offset_left) *
        timelinetime
      ).toFixed(1)
    );
  }
  if (currenttime < 0) {
    currenttime = 0;
  }
  // Check for 60FPS playback, 16ms "slots"
  if (currenttime % 16.666 != 0) {
    currenttime = Math.ceil(currenttime / 16.666) * 16.666;
  }
  renderTime();
  $('#seekbar').offset({
    left:
      offset_left +
      $('#inner-timeline').offset().left +
      currenttime / timelinetime,
  });
  animate(false, currenttime);
  updatePanelValues();
}
$(document).on('click', '#seekevents', seekTo);
$(document).on('click', '#timearea', seekTo);

function hideSeekbar() {
  $('#seek-hover').css({ opacity: 0 });
}
function followCursor(e) {
  $('#seek-hover').css({ opacity: 0.3 });
  if ($('#seekarea').scrollLeft() > offset_left) {
    hovertime = parseFloat(
      (
        (e.pageX +
          $('#seekarea').scrollLeft() -
          $('#timearea').offset().left -
          offset_left) *
        timelinetime
      ).toFixed(1)
    );
  } else {
    hovertime = parseFloat(
      (
        (e.pageX +
          $('#seekarea').scrollLeft() -
          $('#timearea').offset().left -
          offset_left) *
        timelinetime
      ).toFixed(1)
    );
  }
  if (e.pageX >= offset_left + $('#inner-timeline').offset().left) {
    $('#seek-hover').offset({ left: e.pageX });
  }
}
$(document).on('mousemove', '#timearea', followCursor);
$(document).on('mousemove', '#seekevents', followCursor);
$(document).on('mousemove', '#toolbar', hideSeekbar);
$(document).on('mousemove', '#canvas-area', hideSeekbar);
$(document).on('mousemove', '#browser', hideSeekbar);
$(document).on('mousemove', '#properties', hideSeekbar);
$(document).on('mousemove', '#controls', hideSeekbar);

function orderLayers() {
  $('.layer').each(function (index) {
    const object = canvas.getItemById($(this).attr('data-object'));
    canvas.sendToBack(object);
    canvas.renderAll();
    objects.splice(
      $('.layer').length - index - 1,
      0,
      objects.splice(
        objects.findIndex((x) => x.id == object.get('id')),
        1
      )[0]
    );
  });
  save();
}

function handTool() {
  if ($(this).hasClass('hand-active')) {
    $(this).removeClass('hand-active');
    $(this).find('img').attr('src', 'assets/hand-tool.svg');
    handtool = false;
    canvas.defaultCursor = 'default';
    canvas.renderAll();
  } else {
    $(this).addClass('hand-active');
    $(this).find('img').attr('src', 'assets/hand-tool-active.svg');
    handtool = true;
    canvas.defaultCursor = 'grab';
    canvas.renderAll();
  }
}
$(document).on('click', '#hand-tool', handTool);
// Set defaults
setDuration(10000);
checkDB();