<commit_before><!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@2.4.2/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Load Complex Stage Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <button id="create-yoda">Create yoda</button>
    <button id="create-darth">Create darth</button>
    <button id="undo">Undo</button>
    <button id="redo">Redo</button>
    <div id="container"></div>
    <script>
      var possibleFilters = ['', 'blur', 'invert'];

      function createObject(attrs) {
        return Object.assign({}, attrs, {
          // define position
          x: 0,
          y: 0,
          // here should be url to image
          src: '',
          // and define filter on it, let's define that we can have only
          // "blur", "invert" or "" (none)
          filter: 'blur'
        });
      }
      function createYoda(attrs) {
        return Object.assign(createObject(attrs), {
          src: '/assets/yoda.jpg'
        });
      }

      function createDarth(attrs) {
        return Object.assign(createObject(attrs), {
          src: '/assets/darth-vader.jpg'
        });
      }

      // initial state
      var state = [createYoda({ x: 50, y: 50 })];

      // our history
      var appHistory = [state];
      var appHistoryStep = 0;

      var width = window.innerWidth;
      var height = window.innerHeight;
      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      // create function will destroy previous drawing
      // then it will created required nodes and attach all events
      function create(state) {
        layer.destroyChildren();
        state.forEach((item, index) => {
          var node = new Konva.Image({
            draggable: true,
            name: 'item-' + index
          });
          layer.add(node);
          node.on('dragend', () => {
            // make new state
            state = state.slice();
            // update object data
            state[index] = Object.assign({}, state[index], {
              x: node.x(),
              y: node.y()
            });
            // save it into history
            saveStateToHistory(state);
            // don't need to call update here
            // because changes already in node
          });

          node.on('click', () => {
            // find new filter
            var oldFilterIndex = possibleFilters.indexOf(item.filter);
            var nextIndex = (oldFilterIndex + 1) % possibleFilters.length;
            var filter = possibleFilters[nextIndex];

            // apply state changes
            state = state.slice();
            state[index] = Object.assign({}, state[index], {
              filter: filter
            });
            // save state to history
            saveStateToHistory(state);
            // update canvas from state
            update(state);
          });

          var img = new window.Image();
          img.onload = function() {
            node.image(img);
            update(state);
            layer.batchDraw();
          };
          img.src = item.src;
        });
        update(state);
      }

      function update(state) {
        state.forEach(function(item, index) {
          var node = stage.findOne('.item-' + index);
          node.setAttrs({
            x: item.x,
            y: item.y
          });

          if (!node.image()) {<commit_msg>update 2019-02-09<commit_after><!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@2.4.2/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Load Complex Stage Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <button id="create-yoda">Create yoda</button>
    <button id="create-darth">Create darth</button>
    <button id="undo">Undo</button>
    <button id="redo">Redo</button>
    <div id="container"></div>
    <script>
      var possibleFilters = ['', 'blur', 'invert'];

      function createObject(attrs) {
        return Object.assign({}, attrs, {
          // define position
          x: 0,
          y: 0,
          // here should be url to image
          src: '',
          // and define filter on it, let's define that we can have only
          // "blur", "invert" or "" (none)
          filter: 'blur'
        });
      }
      function createYoda(attrs) {
        return Object.assign(createObject(attrs), {
          src: '/assets/yoda.jpg'
        });
      }

      function createDarth(attrs) {
        return Object.assign(createObject(attrs), {
          src: '/assets/darth-vader.jpg'
        });
      }

      // initial state
      var state = [createYoda({ x: 50, y: 50 })];

      // our history
      var appHistory = [state];
      var appHistoryStep = 0;

      var width = window.innerWidth;
      var height = window.innerHeight;
      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      // create function will destroy previous drawing
      // then it will created required nodes and attach all events
      function create() {
        layer.destroyChildren();
        state.forEach((item, index) => {
          var node = new Konva.Image({
            draggable: true,
            name: 'item-' + index,
            // make it smaller
            scaleX: 0.5,
            scaleY: 0.5
          });
          layer.add(node);
          node.on('dragend', () => {
            // make new state
            state = state.slice();
            // update object data
            state[index] = Object.assign({}, state[index], {
              x: node.x(),
              y: node.y()
            });
            // save it into history
            saveStateToHistory(state);
            // don't need to call update here
            // because changes already in node
          });

          node.on('click', () => {
            // find new filter
            var oldFilterIndex = possibleFilters.indexOf(state[index].filter);
            var nextIndex = (oldFilterIndex + 1) % possibleFilters.length;
            var filter = possibleFilters[nextIndex];

            // apply state changes
            state = state.slice();
            state[index] = Object.assign({}, state[index], {
              filter: filter
            });
            // save state to history
            saveStateToHistory(state);
            // update canvas from state
            update(state);
          });

          var img = new window.Image();
          img.onload = function() {
            node.image(img);
            update(state);
            layer.batchDraw();
          };
          img.src = item.src;
        });
        update(state);
      }

      function update() {
        state.forEach(function(item, index) {
          var node = stage.findOne('.item-' + index);
          node.setAttrs({
            x: item.x,
            y: item.y
          });

          if (!node.image()) {
{'fraction_non_alphanumeric': 0.1325350387807865, 'fraction_numerical': 0.006259355014287658, 'mean_word_length': 1.5344827586206897, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 55, 'https://': 2, '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': '4640283', 'n_tokens_mistral': 2084, 'n_tokens_neox': 2021, 'n_words': 516}