jrtechs-sugarizer-lite/activities/Paint.activity/js/modes/modes-pen.js

/* Pen mode is made to draw points and lines */

define([], function() {

  function initGui() {
    PaintApp.elements.penButton = document.getElementById('pen-button');
    PaintApp.paletteModesButtons.push(PaintApp.elements.penButton);
    PaintApp.elements.penButton.addEventListener('click', function() {
      PaintApp.paletteRemoveActiveClass();
      PaintApp.addActiveClassToElement(PaintApp.elements.penButton);
      PaintApp.switchMode('Pen');
    });
  }

  var Pen = {
    initGui: initGui,
    point: undefined,

    onMouseDown: function(event) {
      PaintApp.modes.Pen.point = event.point;
      var ctx = PaintApp.elements.canvas.getContext('2d');

      /* We draw a single point on mouse down */
      ctx.beginPath();
      ctx.strokeStyle = PaintApp.data.color.fill;
      ctx.lineCap = 'round';
      ctx.lineWidth = PaintApp.data.size;
      ctx.moveTo(event.point.x + 1, event.point.y + 1);
      ctx.lineTo(event.point.x, event.point.y);
      ctx.stroke();

      /* If the activity is shared, we send the point to everyone */
      if (PaintApp.data.isShared) {
        PaintApp.collaboration.sendMessage({
          action: 'path',
          data: {
            lineWidth: PaintApp.data.size,
            lineCap: 'round',
            strokeStyle: PaintApp.data.color.fill,
            from: {
              x: event.point.x + 1,
              y: event.point.y + 1
            },
            to: {
              x: event.point.x,
              y: event.point.y
            }
          }
        });
      }
    },

    onMouseDrag: function(event) {
      if (!PaintApp.modes.Pen.point) {
        return;
      }

      var ctx = PaintApp.elements.canvas.getContext('2d');

      /* We draw the move between points on mouse drag */
      ctx.beginPath();
      ctx.strokeStyle = PaintApp.data.color.fill;
      ctx.lineWidth = PaintApp.data.size;
      ctx.moveTo(PaintApp.modes.Pen.point.x, PaintApp.modes.Pen.point.y);
      ctx.lineTo(event.point.x, event.point.y);
      ctx.stroke();

      /* If the activity is shared, we send the move to everyone */
      if (PaintApp.data.isShared) {
        PaintApp.collaboration.sendMessage({
          action: 'path',
          data: {
            lineWidth: PaintApp.data.size,
            lineCap: 'round',
            strokeStyle: PaintApp.data.color.fill,
            from: {
              x: PaintApp.modes.Pen.point.x,
              y: PaintApp.modes.Pen.point.y
            },
            to: {
              x: event.point.x,
              y: event.point.y
            }
          }
        });
      }
      PaintApp.modes.Pen.point = event.point;
    },

    onMouseUp: function(event) {
      PaintApp.saveCanvas();
    }
  };
  return Pen;
});