core-graphics/lib/editor-state/tests/draw.spec.js

A core library for creating shape-based graphic editors

'use strict';

var _tap = require('tap');

var _editorStateReducer = require('../editor-state-reducer');

var _editorStateReducer2 = _interopRequireDefault(_editorStateReducer);

var _editorEvents = require('../editor-events');

var _modes = require('../../declarations/modes');

var _historyEvent = require('../../history/history-event');

var _editorAction = require('../../editor-state/editor-action');

var _editorState = require('../editor-state');

var _testHistorySpec = require('./test-history.spec.js');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var initialState = (0, _editorState.getInitialEditorState)({ shapesDeclarations: _testHistorySpec.SHAPES_DECLARATIONS, author: _testHistorySpec.ALICE });
var initialStateWithGrid = (0, _editorState.getInitialEditorState)({ shapesDeclarations: _testHistorySpec.SHAPES_DECLARATIONS, author: _testHistorySpec.ALICE, grid: {
    on: true, size: 8
  } });

(0, _tap.test)('draw : preview', function (t) {
  var downX = 10,
      downY = 10;
  var evs = [(0, _editorEvents.setMode)((0, _modes.modeDrawShape)(_testHistorySpec.LINE_DECLARATION)), (0, _editorEvents.canvasMouseDown)({ x: downX, y: downY, button: _editorEvents.ButtonType.Left })];

  var startedDrawing = evs.reduce(_editorStateReducer2.default, initialState);

  // mode state changed
  t.equal(startedDrawing.mode.payload.drawing, true);

  // shapesOrder has one 'previewed' shape
  t.equal(startedDrawing.scene.shapesOrder.length, 1);
  var previewId = startedDrawing.scene.shapesOrder[0];

  // scene has one shape with correct data
  var expectedLineData = { type: _testHistorySpec.LINE, id: previewId, keyPoints: [{ x: downX, y: downY }, { x: downX, y: downY }], graphicalContextData: {} };
  t.deepEqual(startedDrawing.scene.shapes[previewId], expectedLineData);

  t.end();
});

(0, _tap.test)('draw : process', function (t) {
  var downX = 10,
      downY = 20,
      moveX = 30,
      moveY = 40;

  var evs = [(0, _editorEvents.setMode)((0, _modes.modeDrawShape)(_testHistorySpec.LINE_DECLARATION)), (0, _editorEvents.canvasMouseDown)({ x: downX, y: downY, button: _editorEvents.ButtonType.Left }), (0, _editorEvents.canvasMouseMove)({ x: moveX, y: moveY })];

  var drawing = evs.reduce(_editorStateReducer2.default, initialState);

  // mode state : still drawing
  t.equal(drawing.mode.payload.drawing, true);

  // shapesOrder has one 'previewed' shape
  t.equal(drawing.scene.shapesOrder.length, 1);
  var previewId = drawing.scene.shapesOrder[0];

  // scene has one shape with correct data
  var expectedLineData = { type: _testHistorySpec.LINE, id: previewId, keyPoints: [{ x: downX, y: downY }, { x: moveX, y: moveY }], graphicalContextData: {} };
  t.deepEqual(drawing.scene.shapes[previewId], expectedLineData);

  t.end();
});

(0, _tap.test)('draw : process with grid', function (t) {
  var downX = 10,
      downY = 20,
      moveX = 30,
      moveY = 40;
  var gdownX = 8,
      gdownY = 24,
      gmoveX = 32,
      gmoveY = 40;

  var evs = [(0, _editorEvents.setMode)((0, _modes.modeDrawShape)(_testHistorySpec.LINE_DECLARATION)), (0, _editorEvents.canvasMouseDown)({ x: downX, y: downY, button: _editorEvents.ButtonType.Left }), (0, _editorEvents.canvasMouseMove)({ x: moveX, y: moveY })];

  var drawing = evs.reduce(_editorStateReducer2.default, initialStateWithGrid);

  // mode state : still drawing
  t.equal(drawing.mode.payload.drawing, true);

  // shapesOrder has one 'previewed' shape
  t.equal(drawing.scene.shapesOrder.length, 1);
  var previewId = drawing.scene.shapesOrder[0];

  // scene has one shape with correct data
  var expectedLineData = { type: _testHistorySpec.LINE, id: previewId, keyPoints: [{ x: gdownX, y: gdownY }, { x: gmoveX, y: gmoveY }], graphicalContextData: {} };
  t.deepEqual(drawing.scene.shapes[previewId], expectedLineData);

  t.end();
});

(0, _tap.test)('draw : process with grid and ignoreGrid in shape', function (t) {
  var downX = 10,
      downY = 20,
      moveX = 30,
      moveY = 40;

  var evs = [(0, _editorEvents.setMode)((0, _modes.modeDrawShape)(_testHistorySpec.LINE_IGNORE_GRID_DECLARATION)), (0, _editorEvents.canvasMouseDown)({ x: downX, y: downY, button: _editorEvents.ButtonType.Left }), (0, _editorEvents.canvasMouseMove)({ x: moveX, y: moveY })];

  var drawing = evs.reduce(_editorStateReducer2.default, initialStateWithGrid);

  // mode state : still drawing
  t.equal(drawing.mode.payload.drawing, true);

  // there is one 'previewed' shape
  t.equal(drawing.scene.shapesOrder.length, 1);
  var previewId = drawing.scene.shapesOrder[0];

  // scene has one shape with correct data
  var expectedLineData = {
    type: _testHistorySpec.LINE_IGNORE_GRID, id: previewId, keyPoints: [{ x: downX, y: downY }, { x: moveX, y: moveY }], graphicalContextData: {}
  };
  t.deepEqual(drawing.scene.shapes[previewId], expectedLineData);

  t.end();
});

(0, _tap.test)('draw : end', function (t) {
  var _initialContextData, _expectedContextData;

  var downX = 10,
      downY = 20,
      moveX = 30,
      moveY = 40,
      upX = 50,
      upY = 60;
  var initialContextData = (_initialContextData = {}, _defineProperty(_initialContextData, _testHistorySpec.STROKE_WIDTH, 2), _defineProperty(_initialContextData, _testHistorySpec.STROKE_COLOR, '#111'), _defineProperty(_initialContextData, 'someOther', 'context'), _initialContextData);
  var expectedContextData = (_expectedContextData = {}, _defineProperty(_expectedContextData, _testHistorySpec.STROKE_WIDTH, 2), _defineProperty(_expectedContextData, _testHistorySpec.STROKE_COLOR, '#111'), _expectedContextData);

  var evs = [(0, _editorEvents.setGraphicalContextData)(initialContextData), (0, _editorEvents.setMode)((0, _modes.modeDrawShape)(_testHistorySpec.LINE_DECLARATION)), (0, _editorEvents.canvasMouseDown)({ x: downX, y: downY, button: _editorEvents.ButtonType.Left }), (0, _editorEvents.canvasMouseMove)({ x: moveX, y: moveY }), (0, _editorEvents.canvasMouseUp)({ x: upX, y: upY })];
  var expectedLineData = {
    type: _testHistorySpec.LINE, id: 'some-id', keyPoints: [{ x: downX, y: downY }, { x: upX, y: upY }], graphicalContextData: expectedContextData
  };

  var finishedDrawing = evs.reduce(_editorStateReducer2.default, initialState);

  // mode is 'selected'
  t.assert((0, _modes.isSelectedMode)(finishedDrawing.mode));

  // one shape on the scene
  t.equal(finishedDrawing.scene.shapesOrder.length, 1);

  // editorActionsQueue has one action
  t.equal(finishedDrawing.editorActionsQueue.length, 1);
  var action = finishedDrawing.editorActionsQueue[0];

  t.assert((0, _editorAction.isPushHistoryEventAction)(action));

  var ev = action.payload.ev;
  t.assert((0, _historyEvent.isShapeAddEvent)(ev));

  var _ev$payload = ev.payload;
  var type = _ev$payload.type;
  var id = _ev$payload.id;
  var keyPoints = _ev$payload.keyPoints;
  var graphicalContextData = _ev$payload.graphicalContextData;


  t.equal(type, expectedLineData.type);
  t.assert(typeof id === 'string');
  t.deepEqual(keyPoints, expectedLineData.keyPoints);
  t.deepEqual(graphicalContextData, expectedLineData.graphicalContextData);

  // editorActionsQueue and scene gets reset after the next events
  var testEv = (0, _editorEvents.canvasMouseMove)({ x: moveX, y: moveY });

  var movedAfterFinished = (0, _editorStateReducer2.default)(finishedDrawing, testEv);

  t.assert(movedAfterFinished.editorActionsQueue.length === 0);
  t.deepEqual(movedAfterFinished.scene, movedAfterFinished.persistedScene);

  t.end();
});

(0, _tap.test)('draw : end with grid on', function (t) {
  var downX = 10,
      downY = 20,
      moveX = 30,
      moveY = 40,
      upX = 50,
      upY = 60;
  var gdownX = 8,
      gdownY = 24,
      gupX = 48,
      gupY = 64;

  var evs = [(0, _editorEvents.setMode)((0, _modes.modeDrawShape)(_testHistorySpec.LINE_DECLARATION)), (0, _editorEvents.canvasMouseDown)({ x: downX, y: downY, button: _editorEvents.ButtonType.Left }), (0, _editorEvents.canvasMouseMove)({ x: moveX, y: moveY }), (0, _editorEvents.canvasMouseUp)({ x: upX, y: upY })];
  var expectedLineData = { type: _testHistorySpec.LINE, id: 'some-id', keyPoints: [{ x: gdownX, y: gdownY }, { x: gupX, y: gupY }], graphicalContextData: {} };

  var finishedDrawing = evs.reduce(_editorStateReducer2.default, initialStateWithGrid);

  // mode is 'selected'
  t.assert((0, _modes.isSelectedMode)(finishedDrawing.mode));

  // one shape on the scene
  t.equal(finishedDrawing.scene.shapesOrder.length, 1);

  // editorActionsQueue has one action
  t.equal(finishedDrawing.editorActionsQueue.length, 1);
  var action = finishedDrawing.editorActionsQueue[0];

  t.assert((0, _editorAction.isPushHistoryEventAction)(action));

  var ev = action.payload.ev;
  t.assert((0, _historyEvent.isShapeAddEvent)(ev));

  var _ev$payload2 = ev.payload;
  var type = _ev$payload2.type;
  var id = _ev$payload2.id;
  var keyPoints = _ev$payload2.keyPoints;
  var graphicalContextData = _ev$payload2.graphicalContextData;


  t.equal(type, expectedLineData.type);
  t.assert(typeof id === 'string');
  t.deepEqual(keyPoints, expectedLineData.keyPoints);
  t.deepEqual(graphicalContextData, expectedLineData.graphicalContextData);

  // editorActionsQueue and scene gets reset after the next events
  var testEv = (0, _editorEvents.canvasMouseMove)({ x: moveX, y: moveY });
  var movedAfterFinished = (0, _editorStateReducer2.default)(finishedDrawing, testEv);

  t.assert(movedAfterFinished.editorActionsQueue.length === 0);
  t.deepEqual(movedAfterFinished.scene, movedAfterFinished.persistedScene);

  t.end();
});