core-graphics/lib/editor-state/tests/resize.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 _tap = require('tap');

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

var _editorStateReducer2 = _interopRequireDefault(_editorStateReducer);

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

var _declarations = require('../../declarations');

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

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

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

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

(0, _tap.test)('resizing: entering mode', function (t) {
  var handle = { relX: -1, relY: -1 };
  var shapeId = _testHistorySpec.ALICE_LINE.id;
  var dx = 10,
      dy = 20;
  var evs = [(0, _editorEvents.canvasMouseMove)({ x: dx, y: dy }), (0, _editorEvents.canvasShapeMouseDown)({ id: shapeId, button: _editorEvents.ButtonType.Left }), (0, _editorEvents.canvasShapeResizeHandleMouseDown)({ handle: handle, button: _editorEvents.ButtonType.Left })];

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

  var mode = _evs$reduce.mode;


  t.assert((0, _declarations.isResizingMode)(mode));
  t.end();
});

(0, _tap.test)('resizing: updating mode', function (t) {
  var handle = { relX: -1, relY: -1 };
  var shapeId = _testHistorySpec.ALICE_LINE.id;
  var dx = 8,
      dy = 20,
      mx = 30,
      my = 40;
  var evs = [(0, _editorEvents.canvasMouseMove)({ x: dx, y: dy }), (0, _editorEvents.canvasShapeMouseDown)({ id: shapeId, button: _editorEvents.ButtonType.Left }), (0, _editorEvents.canvasShapeResizeHandleMouseDown)({ handle: handle, button: _editorEvents.ButtonType.Left }), (0, _editorEvents.canvasMouseMove)({ x: mx, y: my })];
  var expectedBB = {
    x1: 10, y1: 10, x2: 20, y2: 20,
    width: 10, height: 10
  };
  // pStart is handle's coords
  var expectedMode = (0, _declarations.modeResizing)({
    ids: [shapeId], handle: handle, bb: expectedBB,
    pStart: { x: 10, y: 10 }, pEnd: { x: mx, y: my },
    forceProportional: false
  });

  var _evs$reduce2 = evs.reduce(_editorStateReducer2.default, _testHistorySpec.ALICE_BOB_LINES_EDITOR_STATE);

  var mode = _evs$reduce2.mode;


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

(0, _tap.test)('resizing: updating preview events', function (t) {
  var handle = { relX: -1, relY: -1 };
  var shapeId = _testHistorySpec.ALICE_LINE.id;
  var dx = 7,
      dy = 8,
      mx = 5,
      my = 0;
  var evs = [(0, _editorEvents.canvasMouseMove)({ x: dx, y: dy }), (0, _editorEvents.canvasShapeMouseDown)({ id: shapeId, button: _editorEvents.ButtonType.Left }), (0, _editorEvents.canvasShapeMouseUp)({ id: shapeId, button: _editorEvents.ButtonType.Left }), (0, _editorEvents.canvasShapeResizeHandleMouseDown)({ handle: handle, button: _editorEvents.ButtonType.Left }), (0, _editorEvents.canvasMouseMove)({ x: mx, y: my })];
  var expectedEvents = [(0, _historyEvent.shapeUpdateEvent)(shapeId, _extends({}, _testHistorySpec.ALICE_LINE, { keyPoints: [{ x: 5, y: 0 }, { x: 20, y: 20 }] }))];

  var _evs$reduce3 = evs.reduce(_editorStateReducer2.default, _testHistorySpec.ALICE_BOB_LINES_EDITOR_STATE);

  var previewedHistoryEvents = _evs$reduce3.previewedHistoryEvents;


  t.assert(previewedHistoryEvents, expectedEvents);
  t.end();
});

(0, _tap.test)('resizing: persisting history events', function (t) {
  var handle = { relX: -1, relY: -1 };
  var shapeId = _testHistorySpec.ALICE_LINE.id;
  var dx = 7,
      dy = 8,
      mx = 5,
      my = 0;
  var evs = [(0, _editorEvents.canvasMouseMove)({ x: dx, y: dy }), (0, _editorEvents.canvasShapeMouseDown)({ id: shapeId, button: _editorEvents.ButtonType.Left }), (0, _editorEvents.canvasShapeMouseUp)({ id: shapeId, button: _editorEvents.ButtonType.Left }), (0, _editorEvents.canvasShapeResizeHandleMouseDown)({ handle: handle, button: _editorEvents.ButtonType.Left }), (0, _editorEvents.canvasMouseMove)({ x: mx, y: my }), (0, _editorEvents.canvasMouseUp)({ x: mx, y: my })];
  var expectedMode = (0, _declarations.modeSelected)([shapeId]);
  var expectedQueue = [(0, _editorAction.pushHistoryEventAction)((0, _historyEvent.shapeUpdateEvent)(shapeId, _extends({}, _testHistorySpec.ALICE_LINE, { keyPoints: [{ x: 5, y: 0 }, { x: 20, y: 20 }] })))];

  var _evs$reduce4 = evs.reduce(_editorStateReducer2.default, _testHistorySpec.ALICE_BOB_LINES_EDITOR_STATE);

  var mode = _evs$reduce4.mode;
  var editorActionsQueue = _evs$reduce4.editorActionsQueue;

  // selected mode

  t.deepEqual(mode, expectedMode);

  t.deepEqual(editorActionsQueue, expectedQueue);
  t.end();
});