<commit_before>(function() {
  
  var canvas = new fabric.Element('test'),
      fpsEl = document.getElementById('fps'),
      complexityEl = document.getElementById('complexity'),
      changeShapeEl = document.forms[0],
      shapePathEl = document.getElementById('shape-path'),
      scaleObjectEl = document.getElementById('scale-object'),
      scaleObjectOutputEl = document.getElementById('scale-object-output'),
      scaleCanvasEl = document.getElementById('scale-canvas'),
      scaleCanvasOutputEl = document.getElementById('scale-canvas-output'),
      canvasObjects,
      shapePath = '1.svg',
      coords = [{ x: 150, y: 150 }, { x: 450, y: 150 }, { x: 150, y: 450 }, { x: 450, y: 450 }],
      interval,
      shouldAbort = false;
      
  canvas.onFpsUpdate = function(value) {
    fpsEl.innerHTML = value;
  };
  
  changeShapeEl.onsubmit = function() {
    if (shapePathEl.value) {
      shapePath = shapePathEl.value;
    }
    shouldAbort = true;
    canvas.clear();
    
    setTimeout(function() {
      loadShape();
      shouldAbort = false;
    }, 100);
    
    return false;
  };
  
  function scaleObjects() {
    scaleObjectOutputEl.firstChild.nodeValue = fabric.util.toFixed(scaleObjectEl.value, 2);
    for (var canvasObjects = canvas.getObjects(), i = canvasObjects.length; i--; ) {
      canvasObjects[i].scaleX = scaleObjectEl.value;
      canvasObjects[i].scaleY = scaleObjectEl.value;
    }
  }
  
  scaleObjectEl.onchange = scaleObjects;
  
  scaleCanvasEl.onchange = function() {
    var scaleValue = fabric.util.toFixed(scaleCanvasEl.value, 2);
    scaleCanvasOutputEl.firstChild.nodeValue = scaleValue;
    
    canvas.setWidth(scaleValue).setHeight(scaleValue);
    canvas.renderAll();
  };
  
  function loadSVGFromURL(url, callback) {
    new fabric.util.request(url, {
      method: 'get',
      onComplete: function(r) {
        var xml = r.responseXML;
        if (!xml) return;
        var doc = xml.documentElement;
        if (!doc) return;
        fabric.parseSVGDocument(doc, callback);
      }
    });
  }
  
  function animate() {
    fabric.util.animate({
      startValue: 0,
      endValue: 360,
      duration: 3000,
      easing: function(value) { 
        return value;
      },
      onChange: function(value) {
        if (canvas._objects.length) {
          canvas._objects[0].setAngle(value);
          canvas._objects[1].setAngle(value);
          canvas._objects[2].setAngle(value);
          canvas._objects[3].setAngle(value);
        }
        canvas.renderAll();
      },
      onComplete: function() {
        if (!shouldAbort) {
          animate();
        }
      },
      abort: function() {
        return shouldAbort;
      }
    });
  }
  
  function loadShape() {
    for (var i = coords.length; i--; ) {
      (function(i){
        loadSVGFromURL('../demo/assets/' + shapePath, function(objects, options) {
          var pathGroup = new fabric.PathGroup(objects, options);

          pathGroup
            .set('left', coords[i].x)
            .set('top', coords[i].y)
            .set('angle', 30)
            .set('fill', '#ff5555')
            .scale(scaleObjectEl.value)
            .setCoords();

          canvas.add(pathGroup);

          if (i === 0) {
            canvasObjects = canvas.getObjects();
            if (canvasObjects.length > 0) {
              animate();
            }
            setTimeout(function() {
              complexityEl.innerHTML = canvas.complexity();
            }, 50);
          }
        });
      })(i);
    }
  }
  
  loadShape();
  
})();<commit_msg>Try using requestAnimationFrame for animation test.<commit_after>(function() {
  
  // polyfill by @paulirish
  if (!window.requestAnimationFrame ) {
    window.requestAnimationFrame = (function() {
      return window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
        window.setTimeout( callback, 1000 / 60 );
      };
    })();
  }
  
  var canvas = new fabric.Element('test'),
      fpsEl = document.getElementById('fps'),
      complexityEl = document.getElementById('complexity'),
      changeShapeEl = document.forms[0],
      shapePathEl = document.getElementById('shape-path'),
      scaleObjectEl = document.getElementById('scale-object'),
      scaleObjectOutputEl = document.getElementById('scale-object-output'),
      scaleCanvasEl = document.getElementById('scale-canvas'),
      scaleCanvasOutputEl = document.getElementById('scale-canvas-output'),
      canvasObjects,
      shapePath = '1.svg',
      coords = [{ x: 150, y: 150 }, { x: 450, y: 150 }, { x: 150, y: 450 }, { x: 450, y: 450 }],
      interval,
      shouldAbort = false;
      
  canvas.onFpsUpdate = function(value) {
    fpsEl.innerHTML = value;
  };
  
  changeShapeEl.onsubmit = function() {
    if (shapePathEl.value) {
      shapePath = shapePathEl.value;
    }
    shouldAbort = true;
    canvas.clear();
    
    setTimeout(function() {
      loadShape();
      shouldAbort = false;
    }, 100);
    
    return false;
  };
  
  function scaleObjects() {
    scaleObjectOutputEl.firstChild.nodeValue = fabric.util.toFixed(scaleObjectEl.value, 2);
    for (var canvasObjects = canvas.getObjects(), i = canvasObjects.length; i--; ) {
      canvasObjects[i].scaleX = scaleObjectEl.value;
      canvasObjects[i].scaleY = scaleObjectEl.value;
    }
  }
  
  scaleObjectEl.onchange = scaleObjects;
  
  scaleCanvasEl.onchange = function() {
    var scaleValue = fabric.util.toFixed(scaleCanvasEl.value, 2);
    scaleCanvasOutputEl.firstChild.nodeValue = scaleValue;
    
    canvas.setWidth(scaleValue).setHeight(scaleValue);
    canvas.renderAll();
  };
  
  function loadSVGFromURL(url, callback) {
    new fabric.util.request(url, {
      method: 'get',
      onComplete: function(r) {
        var xml = r.responseXML;
        if (!xml) return;
        var doc = xml.documentElement;
        if (!doc) return;
        fabric.parseSVGDocument(doc, callback);
      }
    });
  }
  
  var angle = 0; 
  function animate() {
    angle += 2;
    if (angle === 360) {
      angle = 0;
    }
    canvas.item(0).setAngle(angle);
    canvas.item(1).setAngle(angle);
    canvas.item(2).setAngle(angle);
    canvas.item(3).setAngle(angle);
    
    canvas.renderAll();
    
    if (!shouldAbort) {
      window.requestAnimationFrame(animate, canvas.upperCanvasEl);
    }
  }
  
  function loadShape() {
    for (var i = coords.length; i--; ) {
      (function(i){
        loadSVGFromURL('../demo/assets/' + shapePath, function(objects, options) {
          var pathGroup = new fabric.PathGroup(objects, options);

          pathGroup
            .set('left', coords[i].x)
            .set('top', coords[i].y)
            .set('angle', 30)
            .set('fill', '#ff5555')
            .scale(scaleObjectEl.value)
            .setCoords();

          canvas.add(pathGroup);

          if (i === 0) {
            canvasObjects = canvas.getObjects();
            if (canvasObjects.length > 0) {
              animate();
            }
            setTimeout(function() {
              complexityEl.innerHTML = canvas.complexity();
            }, 50);
          }
        });
      })(i);
    }
  }
  
  loadShape();
  
})();
{'fraction_non_alphanumeric': 0.13712737127371274, 'fraction_numerical': 0.014905149051490514, 'mean_word_length': 2.3039391226499553, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 6}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2202391', 'n_tokens_mistral': 2289, 'n_tokens_neox': 2183, 'n_words': 398}