core-graphics/lib/editor-state/tests/test-history.spec.js

A core library for creating shape-based graphic editors

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.EMPTY_ALICE_STATE = exports.ALICE_BOB_EVE_LINES_EDITOR_STATE = exports.ALICE_BOB_LINES_EDITOR_STATE = exports.ALICE_BOB_EVE_LINES = exports.ALICE_BOB_LINES = exports.EVE_LINE = exports.BOB_LINE = exports.ALICE_UPDATED_LINE = exports.ALICE_LINE = exports.EVE_LINE_ID = exports.BOB_LINE_ID = exports.ALICE_LINE_ID = exports.EVE = exports.BOB = exports.ALICE = exports.SHAPES_DECLARATIONS = exports.LINE_IGNORE_GRID_DECLARATION = exports.LINE_DECLARATION = exports.STROKE_COLOR = exports.STROKE_WIDTH = exports.DRAW_2_POINTS = exports.getRectBoundingBox = exports.LINE_IGNORE_GRID = exports.LINE = undefined;

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 _SHAPES_DECLARATIONS, _graphicalContextData, _graphicalContextData2, _graphicalContextData3, _graphicalContextData4;

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 _historyEvent = require('../../history/history-event');

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

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

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

var _editorStateReducer2 = _interopRequireDefault(_editorStateReducer);

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 LINE = exports.LINE = 'LINE';
var LINE_IGNORE_GRID = exports.LINE_IGNORE_GRID = 'LINE_IGNORE_GRID';

var getRectBoundingBox = exports.getRectBoundingBox = function getRectBoundingBox(shapeData) {
  var keyPoints = shapeData.keyPoints;
  var _keyPoints$ = keyPoints[0];
  var x1 = _keyPoints$.x;
  var y1 = _keyPoints$.y;
  var _keyPoints$2 = keyPoints[1];
  var x2 = _keyPoints$2.x;
  var y2 = _keyPoints$2.y;


  var width = Math.abs(x1 - x2);
  var height = Math.abs(y1 - y2);

  return {
    x1: x1, y1: y1, x2: x2, y2: y2,
    width: width, height: height
  };
};

var DRAW_2_POINTS = exports.DRAW_2_POINTS = regeneratorRuntime.mark(function DRAW_2_POINTS(_ref) {
  var startX = _ref.startX;
  var startY = _ref.startY;

  var mouseCoords, event, _event$payload, x, y, _event$payload2, endX, endY;

  return regeneratorRuntime.wrap(function DRAW_2_POINTS$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          mouseCoords = { x: startX, y: startY };

        case 1:
          if (!true) {
            _context.next = 13;
            break;
          }

          _context.next = 4;
          return [{ x: startX, y: startY }, { x: mouseCoords.x, y: mouseCoords.y }];

        case 4:
          event = _context.sent;


          if ((0, _editorEvents.isMouseMoveEvent)(event)) {
            _event$payload = event.payload;
            x = _event$payload.x;
            y = _event$payload.y;

            mouseCoords.x = x;
            mouseCoords.y = y;
          }

          if (!(0, _editorEvents.isMouseUpEvent)(event)) {
            _context.next = 11;
            break;
          }

          _event$payload2 = event.payload;
          endX = _event$payload2.x;
          endY = _event$payload2.y;
          return _context.abrupt('return', [{ x: startX, y: startY }, { x: endX, y: endY }]);

        case 11:
          _context.next = 1;
          break;

        case 13:
        case 'end':
          return _context.stop();
      }
    }
  }, DRAW_2_POINTS, this);
});

var STROKE_WIDTH = exports.STROKE_WIDTH = 'STROKE_WIDTH';
var STROKE_COLOR = exports.STROKE_COLOR = 'STROKE_COLOR';

var LINE_DECLARATION = exports.LINE_DECLARATION = {
  type: LINE,
  displayName: 'Line',
  draw: DRAW_2_POINTS,

  graphicalContextParams: [STROKE_WIDTH, STROKE_COLOR],
  drawingModeCanvasCursor: 'crosshair',
  minResizeWidth: 0,
  minResizeHeight: 0,

  render: function render(shapeData, _ref2, graphicalContext, _ref3) {
    var onMouseUp = _ref2.onMouseUp;
    var onMouseDown = _ref2.onMouseDown;
    var cursor = _ref3.cursor;
    var keyPoints = shapeData.keyPoints;
    var _keyPoints$3 = keyPoints[0];
    var x1 = _keyPoints$3.x;
    var y1 = _keyPoints$3.y;
    var _keyPoints$4 = keyPoints[1];
    var x2 = _keyPoints$4.x;
    var y2 = _keyPoints$4.y;


    return React.createElement('line', _extends({
      style: { cursor: cursor },
      onMouseDown: onMouseDown,
      onMouseUp: onMouseUp
    }, { x1: x1, y1: y1, x2: x2, y2: y2 }, {
      stroke: 'green', strokeWidth: '2'
    }));
  },
  getBoundingBox: getRectBoundingBox
};

var LINE_IGNORE_GRID_DECLARATION = exports.LINE_IGNORE_GRID_DECLARATION = _extends({}, LINE_DECLARATION, { type: LINE_IGNORE_GRID, ignoreGrid: true });

var SHAPES_DECLARATIONS = exports.SHAPES_DECLARATIONS = (_SHAPES_DECLARATIONS = {}, _defineProperty(_SHAPES_DECLARATIONS, LINE, LINE_DECLARATION), _defineProperty(_SHAPES_DECLARATIONS, LINE_IGNORE_GRID, LINE_IGNORE_GRID_DECLARATION), _SHAPES_DECLARATIONS);

// export const INITIAL_STATE = getInitialEditorState

var ALICE = exports.ALICE = 'ALICE';
var BOB = exports.BOB = 'BOB';
var EVE = exports.EVE = 'EVE';

var ALICE_LINE_ID = exports.ALICE_LINE_ID = '0';
var BOB_LINE_ID = exports.BOB_LINE_ID = '1';
var EVE_LINE_ID = exports.EVE_LINE_ID = '2';

var ALICE_LINE = exports.ALICE_LINE = {
  type: LINE, id: ALICE_LINE_ID, keyPoints: [{ x: 10, y: 10 }, { x: 20, y: 20 }],
  graphicalContextData: (_graphicalContextData = {}, _defineProperty(_graphicalContextData, STROKE_WIDTH, 2), _defineProperty(_graphicalContextData, STROKE_COLOR, '#000'), _graphicalContextData)
};
var ALICE_UPDATED_LINE = exports.ALICE_UPDATED_LINE = {
  type: LINE, id: ALICE_LINE_ID, keyPoints: [{ x: 30, y: 30 }, { x: 40, y: 40 }],
  graphicalContextData: (_graphicalContextData2 = {}, _defineProperty(_graphicalContextData2, STROKE_WIDTH, 2), _defineProperty(_graphicalContextData2, STROKE_COLOR, '#000'), _graphicalContextData2)
};
var BOB_LINE = exports.BOB_LINE = {
  type: LINE, id: BOB_LINE_ID, keyPoints: [{ x: 20, y: 20 }, { x: 30, y: 30 }], graphicalContextData: {},
  graphicalContextData: (_graphicalContextData3 = {}, _defineProperty(_graphicalContextData3, STROKE_WIDTH, 4), _defineProperty(_graphicalContextData3, STROKE_COLOR, '#111'), _graphicalContextData3)
};
var EVE_LINE = exports.EVE_LINE = {
  type: LINE, id: EVE_LINE_ID, keyPoints: [{ x: 10, y: 10 }, { x: 20, y: 10 }],
  graphicalContextData: (_graphicalContextData4 = {}, _defineProperty(_graphicalContextData4, STROKE_WIDTH, 6), _defineProperty(_graphicalContextData4, STROKE_COLOR, '#222'), _graphicalContextData4)
};

exports.default = [[{ id: '0', author: ALICE, applied: true }, (0, _historyEvent.shapeAddEvent)(ALICE_LINE)], [{ id: '1', author: BOB, applied: false }, (0, _historyEvent.shapeAddEvent)(BOB_LINE)], [{ id: '2', author: BOB, applied: false }, (0, _historyEvent.shapeRemoveEvent)(BOB_LINE.id)], [{ id: '3', author: ALICE, applied: true }, (0, _historyEvent.shapeUpdateEvent)(ALICE_UPDATED_LINE)], [{ id: '4', author: ALICE, applied: false }, (0, _historyEvent.eraseAllEvent)()], [{ id: '5', author: EVE, applied: true }, (0, _historyEvent.shapeChangeOrderEvent)({ shapeId: ALICE_LINE.id, value: 1, relative: true })], [{ id: '6', author: EVE, applied: true }, (0, _historyEvent.shapeUpdateEvent)(ALICE_LINE)]].map(function (_ref4) {
  var _ref5 = _slicedToArray(_ref4, 2);

  var params = _ref5[0];
  var ev = _ref5[1];
  return (0, _historyEvent.getPersistedHistoryEvent)(params, ev);
});
var ALICE_BOB_LINES = exports.ALICE_BOB_LINES = [[{ id: '0', author: ALICE, applied: true }, (0, _historyEvent.shapeAddEvent)(ALICE_LINE)], [{ id: '1', author: BOB, applied: true }, (0, _historyEvent.shapeAddEvent)(BOB_LINE)]].map(function (_ref6) {
  var _ref7 = _slicedToArray(_ref6, 2);

  var params = _ref7[0];
  var ev = _ref7[1];
  return (0, _historyEvent.getPersistedHistoryEvent)(params, ev);
});

var ALICE_BOB_EVE_LINES = exports.ALICE_BOB_EVE_LINES = [[{ id: '0', author: ALICE, applied: true }, (0, _historyEvent.shapeAddEvent)(ALICE_LINE)], [{ id: '1', author: BOB, applied: true }, (0, _historyEvent.shapeAddEvent)(BOB_LINE)], [{ id: '2', author: EVE, applied: true }, (0, _historyEvent.shapeAddEvent)(EVE_LINE)]].map(function (_ref8) {
  var _ref9 = _slicedToArray(_ref8, 2);

  var params = _ref9[0];
  var ev = _ref9[1];
  return (0, _historyEvent.getPersistedHistoryEvent)(params, ev);
});

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

var ALICE_BOB_EVE_LINES_EDITOR_STATE = exports.ALICE_BOB_EVE_LINES_EDITOR_STATE = (0, _editorStateReducer2.default)((0, _editorState.getInitialEditorState)({
  shapesDeclarations: SHAPES_DECLARATIONS, author: ALICE
}), (0, _editorEvents.updateHistory)(ALICE_BOB_EVE_LINES));

var EMPTY_ALICE_STATE = exports.EMPTY_ALICE_STATE = (0, _editorState.getInitialEditorState)({
  shapesDeclarations: SHAPES_DECLARATIONS, author: ALICE
});