Sebastiankay/motion-graphics-webui

1// Center line reference2function initLines() {3  if (canvas.getItemById('center_h')) {4    canvas.remove(canvas.getItemById('center_h'));5    canvas.remove(canvas.getItemById('center_v'));6  }7  if (canvas.getItemById('line_h')) {8    canvas.remove(canvas.getItemById('line_h'));9    canvas.remove(canvas.getItemById('line_v'));10  }11 12  // Canvas center reference13  canvas.add(14    new fabric.Line(15      [16        canvas.get('width') / 2,17        0,18        canvas.get('width') / 2,19        canvas.get('height'),20      ],21      {22        opacity: 0,23        selectable: false,24        evented: false,25        id: 'center_h',26      }27    )28  );29  canvas.add(30    new fabric.Line(31      [32        0,33        canvas.get('height') / 2,34        canvas.get('width'),35        canvas.get('height') / 2,36      ],37      {38        opacity: 0,39        selectable: false,40        evented: false,41        id: 'center_v',42      }43    )44  );45 46  // Canvas alignemnt guides47  line_h = new fabric.Line(48    [49      canvas.get('width') / 2,50      artboard.get('top'),51      canvas.get('width') / 2,52      artboard.get('height') + artboard.get('top'),53    ],54    {55      stroke: 'red',56      opacity: 0,57      selectable: false,58      evented: false,59      id: 'line_h',60    }61  );62  line_v = new fabric.Line(63    [64      artboard.get('left'),65      canvas.get('height') / 2,66      artboard.get('width') + artboard.get('left'),67      canvas.get('height') / 2,68    ],69    {70      stroke: 'red',71      opacity: 0,72      selectable: false,73      evented: false,74      id: 'line_v',75    }76  );77  canvas.add(line_h);78  canvas.add(line_v);79}80 81function alignControls(object, type) {82  if (type == 'align-top') {83    object.set(84      'top',85      artboard.get('top') +86        (object.get('height') * object.get('scaleY')) / 287    );88  } else if (type == 'align-center-v') {89    object.set(90      'top',91      artboard.get('top') + artboard.get('height') / 292    );93  } else if (type == 'align-bottom') {94    object.set(95      'top',96      artboard.get('top') +97        artboard.get('height') -98        (object.get('height') * object.get('scaleY')) / 299    );100  } else if (type == 'align-left') {101    object.set(102      'left',103      artboard.get('left') +104        (object.get('width') * object.get('scaleX')) / 2105    );106  } else if (type == 'align-center-h') {107    object.set(108      'left',109      artboard.get('left') + artboard.get('width') / 2110    );111  } else {112    object.set(113      'left',114      artboard.get('left') +115        artboard.get('width') -116        (object.get('width') * object.get('scaleX')) / 2117    );118  }119}120 121// Align object122function alignObject() {123  const type = $(this).attr('id');124  const object = canvas.getActiveObject();125  console.log(canvas.getActiveObject().type);126  if (canvas.getActiveObject().type == 'activeSelection') {127    const tempselection = canvas.getActiveObject();128    canvas.discardActiveObject();129    tempselection._objects.forEach(function (object) {130      alignControls(object, type);131      canvas.renderAll();132      newKeyframe(133        'left',134        object,135        currenttime,136        object.get('left'),137        true138      );139      newKeyframe(140        'top',141        object,142        currenttime,143        object.get('top'),144        true145      );146    });147    reselect(tempselection);148  } else {149    alignControls(object, type);150    canvas.renderAll();151    newKeyframe(152      'left',153      object,154      currenttime,155      object.get('left'),156      true157    );158    newKeyframe('top', object, currenttime, object.get('top'), true);159  }160}161$(document).on('click', '.align', alignObject);162 163// Alignment guides164function centerLines(e) {165  if (!cropping) {166    line_h.opacity = 0;167    line_v.opacity = 0;168    canvas.renderAll();169    const snapZone = 5;170    const obj_left = e.target.left;171    const obj_top = e.target.top;172    const obj_width = e.target.get('width') * e.target.get('scaleX');173    const obj_height =174      e.target.get('height') * e.target.get('scaleY');175    canvas.forEachObject(function (obj, index, array) {176      // Check for horizontal snapping177      function checkHSnap(a, b, snapZone, e, type) {178        if (a > b - snapZone && a < b + snapZone) {179          line_h.opacity = 1;180          line_h.bringToFront();181          var value = b;182          if (type == 1) {183            value = b;184          } else if (type == 2) {185            value =186              b -187              (e.target.get('width') * e.target.get('scaleX')) / 2;188          } else if (type == 3) {189            value =190              b +191              (e.target.get('width') * e.target.get('scaleX')) / 2;192          }193          e.target194            .set({195              left: value,196            })197            .setCoords();198          line_h199            .set({200              x1: b,201              y1: artboard.get('top'),202              x2: b,203              y2: artboard.get('height') + artboard.get('top'),204            })205            .setCoords();206          canvas.renderAll();207        }208      }209 210      // Check for vertical snapping211      function checkVSnap(a, b, snapZone, e, type) {212        if (a > b - snapZone && a < b + snapZone) {213          line_v.opacity = 1;214          line_v.bringToFront();215          var value = b;216          if (type == 1) {217            value = b;218          } else if (type == 2) {219            value =220              b -221              (e.target.get('height') * e.target.get('scaleY')) / 2;222          } else if (type == 3) {223            value =224              b +225              (e.target.get('height') * e.target.get('scaleY')) / 2;226          }227          e.target228            .set({229              top: value,230            })231            .setCoords();232          line_v233            .set({234              y1: b,235              x1: artboard.get('left'),236              y2: b,237              x2: artboard.get('width') + artboard.get('left'),238            })239            .setCoords();240          canvas.renderAll();241        }242      }243      if (obj != e.target && obj != line_h && obj != line_v) {244        if (245          obj.get('id') == 'center_h' ||246          obj.get('id') == 'center_v'247        ) {248          var check1 = [[obj_left, obj.get('left'), 1]];249          var check2 = [[obj_top, obj.get('top'), 1]];250 251          for (var i = 0; i < check1.length; i++) {252            checkHSnap(253              check1[i][0],254              check1[i][1],255              snapZone,256              e,257              check1[i][2]258            );259            checkVSnap(260              check2[i][0],261              check2[i][1],262              snapZone,263              e,264              check2[i][2]265            );266          }267        } else {268          var check1 = [269            [obj_left, obj.get('left'), 1],270            [271              obj_left,272              obj.get('left') +273                (obj.get('width') * obj.get('scaleX')) / 2,274              1,275            ],276            [277              obj_left,278              obj.get('left') -279                (obj.get('width') * obj.get('scaleX')) / 2,280              1,281            ],282            [obj_left + obj_width / 2, obj.get('left'), 2],283            [284              obj_left + obj_width / 2,285              obj.get('left') +286                (obj.get('width') * obj.get('scaleX')) / 2,287              2,288            ],289            [290              obj_left + obj_width / 2,291              obj.get('left') -292                (obj.get('width') * obj.get('scaleX')) / 2,293              2,294            ],295            [obj_left - obj_width / 2, obj.get('left'), 3],296            [297              obj_left - obj_width / 2,298              obj.get('left') +299                (obj.get('width') * obj.get('scaleX')) / 2,300              3,301            ],302            [303              obj_left - obj_width / 2,304              obj.get('left') -305                (obj.get('width') * obj.get('scaleX')) / 2,306              3,307            ],308          ];309          var check2 = [310            [obj_top, obj.get('top'), 1],311            [312              obj_top,313              obj.get('top') +314                (obj.get('height') * obj.get('scaleY')) / 2,315              1,316            ],317            [318              obj_top,319              obj.get('top') -320                (obj.get('height') * obj.get('scaleY')) / 2,321              1,322            ],323            [obj_top + obj_height / 2, obj.get('top'), 2],324            [325              obj_top + obj_height / 2,326              obj.get('top') +327                (obj.get('height') * obj.get('scaleY')) / 2,328              2,329            ],330            [331              obj_top + obj_height / 2,332              obj.get('top') -333                (obj.get('height') * obj.get('scaleY')) / 2,334              2,335            ],336            [obj_top - obj_height / 2, obj.get('top'), 3],337            [338              obj_top - obj_height / 2,339              obj.get('top') +340                (obj.get('height') * obj.get('scaleY')) / 2,341              3,342            ],343            [344              obj_top - obj_height / 2,345              obj.get('top') -346                (obj.get('height') * obj.get('scaleY')) / 2,347              3,348            ],349          ];350 351          for (var i = 0; i < check1.length; i++) {352            checkHSnap(353              check1[i][0],354              check1[i][1],355              snapZone,356              e,357              check1[i][2]358            );359            checkVSnap(360              check2[i][0],361              check2[i][1],362              snapZone,363              e,364              check2[i][2]365            );366          }367        }368      }369    });370  }371}372