core-graphics/lib/editor-state/tests/rubber-band-select.spec.js

A core library for creating shape-based graphic editors

'use strict';

var _tap = require('tap');

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

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

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

var _editorStateReducer2 = _interopRequireDefault(_editorStateReducer);

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

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

// const initialState = getInitialEditorState({ shapesDeclarations: SHAPES_DECLARATIONS, author: ALICE, persistedHistory: ALICE_BOB_LINES });

(0, _tap.test)('rubberband selection: entering mode', function (t) {
  var downX = 10,
      downY = 10,
      moveX = 20,
      moveY = 20,
      button = _editorEvents.ButtonType.Left;
  var evs = [(0, _editorEvents.canvasMouseDown)({ x: downX, y: downY, button: button }), (0, _editorEvents.canvasBackgroundMouseDown)(_editorEvents.ButtonType.Left), (0, _editorEvents.canvasMouseMove)({ x: moveX, y: moveY })];

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

  // mode state changed
  var mode = startedSelecting.mode;

  t.assert((0, _modes.isRubberBandSelectionMode)(mode));

  // mode params are correct
  var _mode$payload = mode.payload;
  var pStart = _mode$payload.pStart;
  var pEnd = _mode$payload.pEnd;


  t.deepEqual(pStart, { x: downX, y: downY });
  t.deepEqual(pEnd, { x: moveX, y: moveY });

  t.end();
});
// import { getInitialEditorState } from '../editor-state';


(0, _tap.test)('rubberband selection: entering with shift and already selected shapes', function (t) {
  var aliceShapeId = _testHistorySpec.ALICE_LINE.id;
  var bobShapeId = _testHistorySpec.BOB_LINE.id;

  var downX = 25,
      downY = 25,
      moveX = 35,
      moveY = 35,
      button = _editorEvents.ButtonType.Left;
  var evs = [(0, _editorEvents.setMode)((0, _modes.modeSelected)([aliceShapeId])), (0, _editorEvents.canvasModifierKeyDown)(_editorEvents.SceneModifierKey.Shift), (0, _editorEvents.canvasMouseDown)({ x: downX, y: downY, button: button }), (0, _editorEvents.canvasBackgroundMouseDown)(_editorEvents.ButtonType.Left), (0, _editorEvents.canvasMouseMove)({ x: moveX, y: moveY })
  // canvasMouseUp({ x: moveX, y: moveY })
  ];
  var expectedPreviouslySelectedShapes = [aliceShapeId];
  var expectedNewlySelectedShapes = [bobShapeId];

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

  // mode state changed
  var mode = startedSelecting.mode;

  t.assert((0, _modes.isRubberBandSelectionMode)(mode));
  t.deepEqual(mode.payload.newlySelectedShapes, expectedNewlySelectedShapes);
  t.deepEqual(mode.payload.previouslySelectedShapes, expectedPreviouslySelectedShapes);
  t.end();
});

(0, _tap.test)('rubberband selection: updating mode coordinates', function (t) {
  var dX = 10,
      dY = 10,
      mX = 20,
      mY = 20,
      m2X = 30,
      m2Y = 40,
      button = _editorEvents.ButtonType.Left;
  var evs = [(0, _editorEvents.canvasMouseDown)({ x: dX, y: dY, button: button }), (0, _editorEvents.canvasBackgroundMouseDown)(_editorEvents.ButtonType.Left), (0, _editorEvents.canvasMouseMove)({ x: mX, y: mY }), (0, _editorEvents.canvasMouseMove)({ x: m2X, y: m2Y })];

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

  // mode params are correct
  var mode = selectingState.mode;
  var _mode$payload2 = mode.payload;
  var pStart = _mode$payload2.pStart;
  var pEnd = _mode$payload2.pEnd;


  t.deepEqual(pStart, { x: dX, y: dY });
  t.deepEqual(pEnd, { x: m2X, y: m2Y });

  t.end();
});

(0, _tap.test)('rubberband selection: updating mode selected shapes', function (t) {
  var dX = 10,
      dY = 10,
      mX = 15,
      mY = 15,
      button = _editorEvents.ButtonType.Left;
  var evs = [(0, _editorEvents.canvasMouseDown)({ x: dX, y: dY, button: button }), (0, _editorEvents.canvasBackgroundMouseDown)(_editorEvents.ButtonType.Left), (0, _editorEvents.canvasMouseMove)({ x: mX, y: mY })];

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

  // selected alice's line
  var newlySelectedShapes = selectingState.mode.payload.newlySelectedShapes;


  t.deepEqual(newlySelectedShapes, [_testHistorySpec.ALICE_LINE.id]);

  t.end();
});

(0, _tap.test)('rubberband selection: finishing ', function (t) {
  var dX = 10,
      dY = 10,
      mX = 25,
      mY = 25,
      button = _editorEvents.ButtonType.Left;
  var evs = [(0, _editorEvents.canvasMouseDown)({ x: dX, y: dY, button: button }), (0, _editorEvents.canvasBackgroundMouseDown)(_editorEvents.ButtonType.Left), (0, _editorEvents.canvasMouseMove)({ x: mX, y: mY }), (0, _editorEvents.canvasMouseUp)({ x: mX, y: mY })];
  var expectedIds = [_testHistorySpec.ALICE_LINE.id, _testHistorySpec.BOB_LINE.id];

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

  // mode is "selected"
  var mode = finishedState.mode;

  t.assert((0, _modes.isSelectedMode)(mode));

  // the ids are correct
  var ids = mode.payload.ids;

  t.deepEqual(ids, expectedIds);

  t.end();
});

(0, _tap.test)('rubberband selection: finishing with shift and already selected shapes', function (t) {
  var aliceShapeId = _testHistorySpec.ALICE_LINE.id;
  var bobShapeId = _testHistorySpec.BOB_LINE.id;

  var downX = 25,
      downY = 25,
      moveX = 35,
      moveY = 35,
      button = _editorEvents.ButtonType.Left;
  var evs = [(0, _editorEvents.setMode)((0, _modes.modeSelected)([aliceShapeId])), (0, _editorEvents.canvasModifierKeyDown)(_editorEvents.SceneModifierKey.Shift), (0, _editorEvents.canvasMouseDown)({ x: downX, y: downY, button: button }), (0, _editorEvents.canvasBackgroundMouseDown)(_editorEvents.ButtonType.Left), (0, _editorEvents.canvasMouseMove)({ x: moveX, y: moveY }), (0, _editorEvents.canvasMouseUp)({ x: moveX, y: moveY })];
  var expectedMode = (0, _modes.modeSelected)([aliceShapeId, bobShapeId]);

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

  // mode state changed
  var mode = startedSelecting.mode;

  t.deepEqual(mode, expectedMode);
  t.end();
});