js2flowchart/build/render/svg/connections/ConnectionArrow.js

> Why? While I've been working on [Under-the-hood-ReactJS](https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS) I spent enormous amount of time on creating schemes. Each change in code or flowchart affects all entire scheme instantly, forcing you t

import { assignState, mergeObjectStructures } from 'shared/utils/composition';
import { getCurvedPath, getClosedPath } from 'shared/utils/svgPrimitives';
import { addOffsetToPoints } from 'shared/utils/geometry';
import { ARROW_TYPE } from 'shared/constants';
var ENTITY_FIELD_NAME = 'ConnectionArrow';
export var getFieldName = function getFieldName() {
  return ENTITY_FIELD_NAME;
};
var setupSelectors = function setupSelectors(state) {
  return {
    getFieldName: getFieldName
  };
};
var setupUpdateBehaviour = function setupUpdateBehaviour(state) {
  return {
    updateTheme: function updateTheme(newTheme) {
      state.theme = mergeObjectStructures(state.theme, newTheme);
    }
  };
};
var setupPrintBehaviour = function setupPrintBehaviour(state) {
  return {
    printLine: function printLine(points) {
      return getCurvedPath(points, state.theme.line);
    },
    printArrow: function printArrow(point, arrowPoints) {
      return getClosedPath(addOffsetToPoints(arrowPoints, point), state.theme.arrow);
    },
    printArrowByType: function printArrowByType(type, _ref) {
      var x = _ref.x,
        y = _ref.y;
      var arrowSize = state.theme.arrow.size;
      var point;

      //TODO: move to svgPrimitives
      switch (type) {
        case ARROW_TYPE.RIGHT:
          point = {
            x: x - arrowSize.x,
            y: y - arrowSize.y / 2
          };
          return this.printArrow(point, [{
            x: 0,
            y: 0
          }, {
            x: arrowSize.x,
            y: arrowSize.y / 2
          }, {
            x: 0,
            y: arrowSize.y
          }]);
        case ARROW_TYPE.LEFT:
          point = {
            x: x,
            y: y - arrowSize.y / 2
          };
          return this.printArrow(point, [{
            x: 0,
            y: arrowSize.y / 2
          }, {
            x: arrowSize.x,
            y: 0
          }, {
            x: arrowSize.x,
            y: arrowSize.y
          }]);
        case ARROW_TYPE.DOWN:
          point = {
            x: x - arrowSize.y / 2,
            y: y - arrowSize.x
          };
          return this.printArrow(point, [{
            x: 0,
            y: 0
          }, {
            x: arrowSize.y / 2,
            y: arrowSize.x
          }, {
            x: arrowSize.y,
            y: 0
          }]);
        default:
          return '';
      }
    },
    print: function print() {
      var _state$config = state.config,
        linePoints = _state$config.linePoints,
        arrowPoint = _state$config.arrowPoint,
        arrowType = _state$config.arrowType,
        noArrow = _state$config.noArrow;
      if (noArrow) {
        linePoints[linePoints.length - 1].x += state.theme.arrow.size.x;
      }
      return "\n            <g>\n               ".concat(this.printLine(linePoints), "\n               ").concat(!noArrow && this.printArrowByType(arrowType, arrowPoint), "\n            </g>");
    }
  };
};
export var ConnectionArrow = function ConnectionArrow(state) {
  return assignState(state, [setupUpdateBehaviour, setupPrintBehaviour, setupSelectors]);
};
export default (function (config, theme) {
  return ConnectionArrow({
    config: config,
    theme: theme,
    originalTheme: theme
  });
});