<commit_before><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Complex shape 2</title>
    <style>
      svg {
        border: 1px solid #000;
      }
      .canvas_container {
        border: 1px solid #000;
        position: relative;
      }
      #holder {
        height: 760px;
        width: 380px;
        left: 500px;
        position: absolute;
      }
    </style>
    <script src="raphael-min.js"></script>
    <script src="../../dist/all.js"></script>
    <script src="dragon.js"></script>
    <script>
          
      window.onload = function() {
        var width = 380,
            height = 760;
            
        var logEl = document.getElementById('log');
        
        /*(function testRaphael() {
          
          var start = function () {
            // storing original coordinates
            this.ox = this.attr("cx");
            this.oy = this.attr("cy");
            this.attr({opacity: .5});
          },
          move = function (dx, dy) {
            // move will be called with dx and dy
            this.attr({cx: this.ox + dx, cy: this.oy + dy});
          },
          up = function () {
            // restoring state
            this.attr({opacity: 1});
          };
          
          var startTime = new Date();
          
          var r = Raphael("holder", width, height);
          r.dragon();
          
          // r.drag(start, move, up);
          
          logEl.innerHTML = 'Raphael: <b>' + (new Date() - startTime) + '</b>ms<br>';
          
        })();
        */
        
        (function testFabric() {
          
          var canvas = window.__canvas = new fabric.Element('canvas', { 
                renderOnAddition: false, 
                stateful: false 
              });

          
          canvas.loadSVGFromURL('dragon.svg', function(objects) {
            
            var startTime = new Date();
            
            var group = new fabric.PathGroup(objects, {
              left: 185,
              top: 380,
              width: 371,
              height: 760
            });
            canvas.add(group);
            canvas.renderAll();
            
            var renderingTime = new Date() - startTime;
            
            logEl.innerHTML += 'fabric: <b>' + (fabric.documentParsingTime + renderingTime) + '</b>ms (parsing: '+fabric.documentParsingTime+', rendering: '+ renderingTime +')';
              
            document.getElementById('description').appendChild(document.createTextNode(' (' + group.complexity() + ' paths)'))<commit_msg>Uncomment raphael test in complex_shape_2.<commit_after><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Complex shape 2</title>
    <style>
      svg {
        border: 1px solid #000;
      }
      .canvas_container {
        border: 1px solid #000;
        position: relative;
      }
      #holder {
        height: 760px;
        width: 380px;
        left: 500px;
        position: absolute;
      }
    </style>
    <script src="raphael-min.js"></script>
    <script src="../../dist/all.js"></script>
    <script src="dragon.js"></script>
    <script>
          
      window.onload = function() {
        var width = 380,
            height = 760;
            
        var logEl = document.getElementById('log');
        
        (function testRaphael() {
          
          var start = function () {
            // storing original coordinates
            this.ox = this.attr("cx");
            this.oy = this.attr("cy");
            this.attr({opacity: .5});
          },
          move = function (dx, dy) {
            // move will be called with dx and dy
            this.attr({cx: this.ox + dx, cy: this.oy + dy});
          },
          up = function () {
            // restoring state
            this.attr({opacity: 1});
          };
          
          var startTime = new Date();
          
          var r = Raphael("holder", width, height);
          r.dragon();
          
          // r.drag(start, move, up);
          
          logEl.innerHTML = 'Raphael: <b>' + (new Date() - startTime) + '</b>ms<br>';
          
        })();
        
        (function testFabric() {
          
          var canvas = window.__canvas = new fabric.Element('canvas', { 
                renderOnAddition: false, 
                stateful: false 
              });

          
          canvas.loadSVGFromURL('dragon.svg', function(objects) {
            
            var startTime = new Date();
            
            var group = new fabric.PathGroup(objects, {
              left: 185,
              top: 380,
              width: 371,
              height: 760
            });
            canvas.add(group);
            canvas.renderAll();
            
            var renderingTime = new Date() - startTime;
            
            logEl.innerHTML += 'fabric: <b>' + (fabric.documentParsingTime + renderingTime) + '</b>ms (parsing: '+fabric.documentParsingTime+', rendering: '+ renderingTime +')';
              
            document.getElementById('description').appendChild(document.createTextNode(' (' + group.complexity() + ' paths)'))
{'fraction_non_alphanumeric': 0.1343312597200622, 'fraction_numerical': 0.015357698289269051, 'mean_word_length': 1.3568483737975263, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 43, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, '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': '7579099', 'n_tokens_mistral': 1482, 'n_tokens_neox': 1377, 'n_words': 315}