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

A core library for creating shape-based graphic editors

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _tap = require('tap');

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

var _editorStateReducer2 = _interopRequireDefault(_editorStateReducer);

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

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

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

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

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

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

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

var ALICE_BOB_LINES_EDITOR_STATE = (0, _editorStateReducer2.default)((0, _editorState.getInitialEditorState)({ shapesDeclarations: {}, author: _testHistorySpec.ALICE }), (0, _editorEvents.updateHistory)(_testHistorySpec.ALICE_BOB_LINES));

// switching mode

(0, _tap.test)('moving: pressed mouse moves on selected shape -> moving mode', function (t) {
  var shapeId = _testHistorySpec.ALICE_LINE.id;
  var dx = 10,
      dy = 20,
      mx = 30,
      my = 40,
      button = _editorEvents.ButtonType.Left;

  var evs = [(0, _editorEvents.canvasShapeMouseDown)({ id: shapeId, button: button }), (0, _editorEvents.canvasMouseMove)({ x: dx, y: dy }), (0, _editorEvents.canvasMouseMove)({ x: mx, y: my })];
  var expectedMode = (0, _modes.modeMoving)({ ids: [shapeId], startX: dx, startY: dy, endX: mx, endY: my });

  var afterMoved = evs.reduce(_editorStateReducer2.default, ALICE_BOB_LINES_EDITOR_STATE);

  t.equal(afterMoved.mouse.down, true);
  t.assert((0, _modes.isMovingMode)(afterMoved.mode));
  t.deepEqual(afterMoved.mode, expectedMode);
  t.end();
});

(0, _tap.test)('moving: moving mode is updated on many mouse moves', function (t) {
  var shapeId = _testHistorySpec.ALICE_LINE.id;
  var dx = 10,
      dy = 20,
      mx = 30,
      my = 40,
      m2x = 50,
      m2y = 60,
      button = _editorEvents.ButtonType.Left;

  var evs = [(0, _editorEvents.canvasShapeMouseDown)({ id: shapeId, button: button }), (0, _editorEvents.canvasMouseMove)({ x: dx, y: dy }), (0, _editorEvents.canvasMouseMove)({ x: mx, y: my }), (0, _editorEvents.canvasMouseMove)({ x: m2x, y: m2y })];
  var expectedMode = (0, _modes.modeMoving)({ ids: [shapeId], startX: dx, startY: dy, endX: m2x, endY: m2y });

  var afterMoved = evs.reduce(_editorStateReducer2.default, ALICE_BOB_LINES_EDITOR_STATE);

  t.assert((0, _modes.isMovingMode)(afterMoved.mode));
  t.deepEqual(afterMoved.mode, expectedMode);
  t.end();
});

/*

test('moving: moving mode is updated on many mouse moves (with a grid)', t => {
  const shapeId = ALICE_LINE.id;
  const dx = 10, dy = 20, mx = 30, my = 40, m2x = 50, m2y = 60, button = ButtonType.Left;
  const gdx = 8, gdy = 24, gmx = 32, gmy = 40, gm2x = 48, gm2y = 64;

  const evs = [
    canvasShapeMouseDown({ id: shapeId, button }),
    canvasMouseMove({ x: dx, y: dy }),
    canvasMouseMove({ x: mx, y: my}),
    canvasMouseMove({ x: m2x, y: m2y })
  ];
  const expectedMode = modeMoving({ ids: [shapeId], startX: gdx, startY: gdy, endX: gm2x, endY: gm2y });


  const afterMoved = evs.reduce(editorStateReducer, GRID_ALICE_BOB_LINES_EDITOR_STATE);

  
  t.assert(isMovingMode(afterMoved.mode));
  t.deepEqual(afterMoved.mode, expectedMode);
  t.end();
});

*/

(0, _tap.test)('moving: moving mode is cancelled on mouse up', function (t) {
  var shapeId = _testHistorySpec.ALICE_LINE.id;
  var dx = 10,
      dy = 20,
      mx = 30,
      my = 40,
      ux = 50,
      uy = 60,
      button = _editorEvents.ButtonType.Left;

  var evs = [(0, _editorEvents.canvasShapeMouseDown)({ id: shapeId, button: button }), (0, _editorEvents.canvasMouseMove)({ x: dx, y: dy }), (0, _editorEvents.canvasMouseMove)({ x: mx, y: my }), (0, _editorEvents.canvasMouseUp)({ x: ux, y: uy })];
  var expectedMode = (0, _modes.modeSelected)([shapeId]);

  var afterUp = evs.reduce(_editorStateReducer2.default, ALICE_BOB_LINES_EDITOR_STATE);

  t.assert((0, _modes.isSelectedMode)(afterUp.mode));
  t.deepEqual(afterUp.mode, expectedMode);
  t.end();
});

// previewed events

(0, _tap.test)('moving: moving mode has correct preview events', function (t) {
  var shapeId = _testHistorySpec.ALICE_LINE.id;
  var dx = 10,
      dy = 20,
      mx = 30,
      my = 40,
      button = _editorEvents.ButtonType.Left;

  var evs = [(0, _editorEvents.canvasShapeMouseDown)({ id: shapeId, button: button }), (0, _editorEvents.canvasMouseMove)({ x: dx, y: dy }), (0, _editorEvents.canvasMouseMove)({ x: mx, y: my })];

  var _ALICE_LINE$keyPoints = _slicedToArray(_testHistorySpec.ALICE_LINE.keyPoints, 2);

  var _ALICE_LINE$keyPoints2 = _ALICE_LINE$keyPoints[0];
  var x1 = _ALICE_LINE$keyPoints2.x;
  var y1 = _ALICE_LINE$keyPoints2.y;
  var _ALICE_LINE$keyPoints3 = _ALICE_LINE$keyPoints[1];
  var x2 = _ALICE_LINE$keyPoints3.x;
  var y2 = _ALICE_LINE$keyPoints3.y;

  var delta = { x: mx - dx, y: my - dy };
  var expectedShapeKeyPoints = [{ x: x1 + delta.x, y: y1 + delta.y }, { x: x2 + delta.x, y: y2 + delta.y }];

  var afterMove = evs.reduce(_editorStateReducer2.default, ALICE_BOB_LINES_EDITOR_STATE);

  // scene's shape coords changed
  var scene = afterMove.scene;

  var shape = scene.shapes[_testHistorySpec.ALICE_LINE.id];

  t.assert(!!shape, 'shape is defined');

  t.deepEqual(shape.keyPoints, expectedShapeKeyPoints);
  t.end();
});

// persisting

(0, _tap.test)('moving: gets persisted after finished', function (t) {
  var shapeId = _testHistorySpec.ALICE_LINE.id;
  var dx = 10,
      dy = 20,
      mx = 30,
      my = 40,
      button = _editorEvents.ButtonType.Left;

  var evs = [(0, _editorEvents.canvasShapeMouseDown)({ id: shapeId, button: button }), (0, _editorEvents.canvasMouseMove)({ x: dx, y: dy }), (0, _editorEvents.canvasMouseMove)({ x: mx, y: my }), (0, _editorEvents.canvasMouseUp)({ x: mx, y: my })];

  var _ALICE_LINE$keyPoints4 = _slicedToArray(_testHistorySpec.ALICE_LINE.keyPoints, 2);

  var _ALICE_LINE$keyPoints5 = _ALICE_LINE$keyPoints4[0];
  var x1 = _ALICE_LINE$keyPoints5.x;
  var y1 = _ALICE_LINE$keyPoints5.y;
  var _ALICE_LINE$keyPoints6 = _ALICE_LINE$keyPoints4[1];
  var x2 = _ALICE_LINE$keyPoints6.x;
  var y2 = _ALICE_LINE$keyPoints6.y;

  var delta = { x: mx - dx, y: my - dy };
  var expectedShapeKeyPoints = [{ x: x1 + delta.x, y: y1 + delta.y }, { x: x2 + delta.x, y: y2 + delta.y }];
  var expectedShapeData = _extends({}, _testHistorySpec.ALICE_LINE, { keyPoints: expectedShapeKeyPoints
  });

  var afterMoved = evs.reduce(_editorStateReducer2.default, ALICE_BOB_LINES_EDITOR_STATE);

  // historyActiosQueue has one action
  var editorActionsQueue = afterMoved.editorActionsQueue;

  t.assert(editorActionsQueue.length === 1);

  // action
  var action = editorActionsQueue[0];
  t.assert((0, _editorAction.isPushHistoryEventAction)(action));

  // event
  var event = action.payload.ev;
  t.assert((0, _historyEvent.isShapeUpdateEvent)(event));

  // shape data
  var _event$payload = event.payload;
  var shapeData = _event$payload.shapeData;
  var id = _event$payload.id;

  t.equal(id, _testHistorySpec.ALICE_LINE.id);
  t.deepEqual(shapeData, expectedShapeData);

  t.end();
});

/*
test('moving: gets persisted after finished, with multiple shapes', t => {
  const initialState = ALICE_BOB_LINES_EDITOR_STATE;

  const shapeIds = [ ALICE_LINE.id, BOB_LINE.id ];
  const dx = 10, dy = 20, mx = 30, my = 40, button = ButtonType.Left;

  const evs = [
    modeSelected(shapeIds),
    canvasMouseDown({ x: dx, y: dy, button }),
    canvasMouseMove({ x: mx, y: my}),
    canvasMouseUp({ x: mx, y: my})
  ];

  const delta = { x: mx - dx, y: my - dy };
  const expectedShapesData = shapeIds.map(
    id => {
      const shapeData = initialState.persistedScene[id];
      const [ { x: x1, y: y1 }, { x: x2, y: y2 } ] = shapeData.keyPoints;

      const movedKeyPoints = [
        { x: x1 + delta.x, y: y1 + delta.y },
        { x: x2 + delta.x, y: y2 + delta.y }
      ];

      return {
        ...shapeData,
        keyPoints: movedKeyPoints
      };
    }
  );

  const afterMoved = evs.reduce(editorStateReducer, initialState);

  
  // historyActiosQueue has one action
  const { editorActionsQueue } = afterMoved;
  t.assert(editorActionsQueue.length === 1);

  // action
  const action = editorActionsQueue[0];
  t.assert(isPushHistoryEventAction(action));
  
  // event
  const event = action.payload.ev;
  t.assert(isHistoryEventsGroup(event));
  t.assert(event.evs.length === 2);

  // update events
  const events = event.payload;

  // shapes ids match
  const ids = events.map(event => event.payload.id);
  t.deepEqual(ids, shapesIds);

  // keypoints match
  events.forEach(event => {
    t.assert(isShapeUpdateEvent(event));
    const { shapeData, id } = event.payload;
    t.deepEqual(shapeData, expectedShapesData[id]);
  });

  t.end();
});
*/