jrtechs-sugarizer-lite/activities/Paint.activity/js/paint-app.js

/* PaintApp is a big object containing UI stuff, libraries and helpers */
define([], function() {
  /* Function to disable all active class inside the toolbar */
  function paletteRemoveActiveClass() {
    for (var i = 0; i < PaintApp.paletteModesButtons.length; i++) {
      PaintApp.paletteModesButtons[i].className = PaintApp.paletteModesButtons[i].className.replace(/(?:^|\s)active(?!\S)/g, '');
    }
  }

  /* Function to add active class to a specific element */
  function addActiveClassToElement(element) {
    element.className += ' active';
  }

  /* Switch current drawing mode */
  function switchMode(newMode) {
    saveCanvas();

    PaintApp.data.mode = newMode;
    PaintApp.handleCurrentFloatingElement();

    PaintApp.data.tool.onMouseDown = PaintApp.modes[newMode].onMouseDown;
    PaintApp.data.tool.onMouseDrag = PaintApp.modes[newMode].onMouseDrag;
    PaintApp.data.tool.onMouseUp = PaintApp.modes[newMode].onMouseUp;
  }

  /* Clear the canvas */
  function clearCanvas() {
    var ctx = PaintApp.elements.canvas.getContext('2d');
    ctx.fillStyle = "#ffffff"
    ctx.fillRect(0, 0, parseInt(PaintApp.elements.canvas.style.width), parseInt(PaintApp.elements.canvas.style.height));
    PaintApp.saveCanvas();
  }

  /* Trigger undo click, undo using the history */
  function undoCanvas() {
    //Removing any floating element
    PaintApp.handleCurrentFloatingElement();
    if (PaintApp.data.history.undo.length < 2) {
      return;
    }

    PaintApp.modes.Pen.point = undefined;
    var canvas = PaintApp.elements.canvas;
    var ctx = canvas.getContext('2d');
    var img = new Image();
    var imgSrc = PaintApp.data.history.undo[PaintApp.data.history.undo.length - 2];
    var imgSrc2 = PaintApp.data.history.undo[PaintApp.data.history.undo.length - 1];

    /* Loading of the image stored in history */
    img.onload = function() {
      ctx.save();
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0);
      ctx.restore();

      /* If the activity is shared, will send the instruction to everyone */
      if (PaintApp.data.isShared) {
        try {
          PaintApp.collaboration.sendMessage({
            action: 'toDataURL',
            data: {
              width: PaintApp.elements.canvas.width / window.devicePixelRatio,
              height: PaintApp.elements.canvas.height / window.devicePixelRatio,
              src: PaintApp.collaboration.compress(PaintApp.elements.canvas.toDataURL())
            }
          });
        } catch (e) {
          return;
        }
      }

    };
    img.src = imgSrc;

    PaintApp.data.history.redo.push(imgSrc2);
    PaintApp.data.history.undo.pop();

    /* Update the availability of undo/redo */
    displayUndoRedoButtons();

    return imgSrc;
  }

  /* Trigger redo click, undo using the history */
  function redoCanvas() {
    //Removing any floating element
    handleCurrentFloatingElement();
    if (PaintApp.data.history.redo.length === 0) {
      return;
    }

    PaintApp.modes.Pen.point = undefined;
    var canvas = PaintApp.elements.canvas;
    var ctx = canvas.getContext('2d');
    var img = new Image();
    var imgSrc = PaintApp.data.history.redo[PaintApp.data.history.redo.length - 1];

    /* Loading of the image stored in history */
    img.onload = function() {
      ctx.save();
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0);
      ctx.restore();

      /* If the activity is shared, will send the instruction to everyone */
      if (PaintApp.data.isShared) {
        try {
          PaintApp.collaboration.sendMessage({
            action: 'toDataURL',
            data: {
              width: PaintApp.elements.canvas.width / window.devicePixelRatio,
              height: PaintApp.elements.canvas.height / window.devicePixelRatio,
              src: PaintApp.collaboration.compress(PaintApp.elements.canvas.toDataURL())
            }
          });
        } catch (e) {}
      }
    };
    img.src = imgSrc;

    PaintApp.data.history.undo.push(imgSrc);
    PaintApp.data.history.redo.pop();

    /* Update the availability of undo/redo */
    displayUndoRedoButtons();

    return imgSrc;
  }

  /* Update the availability of undo/redo */
  function displayUndoRedoButtons() {
    var notAvailableOpacity = '0.4';
    var availableOpacity = '1';

    /* If activity is shared and we are not the host we cannot do undo/redo */
    if (PaintApp.data.isShared && !PaintApp.data.isHost) {
      PaintApp.elements.redoButton.style.opacity = notAvailableOpacity;
      PaintApp.elements.undoButton.style.opacity = notAvailableOpacity;
      return;
    }

    /* Check of the ability to use redo */
    if (PaintApp.data.history.redo.length === 0) {
      PaintApp.elements.redoButton.style.opacity = notAvailableOpacity;
    } else {
      PaintApp.elements.redoButton.style.opacity = availableOpacity;
    }

    /* Check of the ability to do use undo */
    if (PaintApp.data.history.undo.length <= 1) {
      PaintApp.elements.undoButton.style.opacity = notAvailableOpacity;
    } else {
      PaintApp.elements.undoButton.style.opacity = availableOpacity;
    }
  }

  /* Storing canvas onto history */
  function saveCanvas() {
    var canvas = PaintApp.elements.canvas;
    try {
      var image = canvas.toDataURL();
    } catch (e) {}

    /* If doing a new action, setting redo to an empty list */
    if ((PaintApp.data.history.undo.length > 0 && PaintApp.data.history.undo[PaintApp.data.history.undo.length - 1] !== image) || (PaintApp.data.history.undo.length === 0)) {
      PaintApp.data.history.undo.push(image);
      PaintApp.data.history.redo = [];
    }

    /* Limiting history size*/
    if (PaintApp.data.history.redo.length > PaintApp.data.history.limit) {
      PaintApp.data.history.redo = PaintApp.data.history.redo.slice(1);
    }

    /* Limiting history size*/
    if (PaintApp.data.history.undo.length > PaintApp.data.history.limit) {
      PaintApp.data.history.undo = PaintApp.data.history.undo.slice(1);
    }

    /* Refreshing undo / redo */
    displayUndoRedoButtons();

    /* If sharedActivity and not the host, tell the host to save his copy of the canvas */
    if (PaintApp.data.isShared && !PaintApp.data.isHost) {
      PaintApp.collaboration.sendMessage({
        action: 'saveCanvas'
      });
    }
  }

  /* Removing floating elements used by copy/paste, stamps, text */
  function handleCurrentFloatingElement() {
    if (PaintApp.data.currentElement !== undefined) {
      if (PaintApp.data.currentElement.type != 'copy/paste') {
        PaintApp.data.currentElement.element.parentElement.removeChild(PaintApp.data.currentElement.element);
        PaintApp.data.currentElement = undefined;
      } else {
        if (PaintApp.data.mode != 'Copy' && PaintApp.data.mode != 'Paste') {
          PaintApp.data.currentElement.element.parentElement.removeChild(PaintApp.data.currentElement.element);
          PaintApp.data.currentElement = undefined;
        }
      }
    }
  }


  /* PaintApp, contains the context of the application */
  var PaintApp = {
    libs: {},
    palettes: {},
    elements: {},
    buttons: {},
    paletteModesButtons: [],
    data: {
      isCompressEnabled: true,
      isHost: true,
      history: {
        limit: 15,
        undo: [],
        redo: []
      },
      size: 5,
      color: {
        stroke: '#1500A7',
        fill: '#ff0000'
      },
      tool: undefined
    },
    modes: {},
    switchMode: switchMode,
    undoCanvas: undoCanvas,
    redoCanvas: redoCanvas,
    displayUndoRedoButtons: displayUndoRedoButtons,
    saveCanvas: saveCanvas,
    clearCanvas: clearCanvas,
    paletteRemoveActiveClass: paletteRemoveActiveClass,
    addActiveClassToElement: addActiveClassToElement,
    handleCurrentFloatingElement: handleCurrentFloatingElement
  };
  return PaintApp;
});