js2flowchart/build/render/svg/SVGRender.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 { getDefaultTheme, getBlurredTheme, getBlackAndWhiteTheme, getLightTheme, applyStyleToTheme, buildColorsBasedTheme } from './appearance/StyleThemeFactory';
import { buildSVGObjectsTree } from './svgObjectsBuilder';
import { traversal } from 'shared/utils/traversal';
import { flatTree } from 'shared/utils/flatten';
import { logError } from 'shared/utils/logger';
export var ShapesTreeEditor = function ShapesTreeEditor(svgObjectsTree) {
  var updateShapeTheme = function updateShapeTheme(shape, shapeStyles, connectionArrowStyles) {
    if (shapeStyles) {
      shape.updateTheme(shapeStyles);
    }
    if (connectionArrowStyles) {
      shape.getAssignedConnectionArrow().updateTheme(connectionArrowStyles);
      shape.getLoopedConnectionArrow && shape.getLoopedConnectionArrow().updateTheme(connectionArrowStyles);
    }
  };
  return {
    findShape: function findShape(fnTest) {
      var startIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
      return svgObjectsTree.getShapes().filter(function (shape, index) {
        return index >= startIndex && fnTest(shape);
      });
    },
    applyShapeStyles: function applyShapeStyles(fn, shapeStyles, connectionArrowStyles) {
      this.findShape(fn).forEach(function (shape) {
        updateShapeTheme(shape, shapeStyles, connectionArrowStyles);
      });
    },
    blur: function blur(fn) {
      var blurredTheme = getBlurredTheme();
      this.findShape(fn).forEach(function (shape) {
        var connectionArrow = shape.getAssignedConnectionArrow();
        updateShapeTheme(shape, blurredTheme[shape.getShapeType()], connectionArrow ? blurredTheme[connectionArrow.getFieldName()] : null);
      });
    },
    focus: function focus(fn) {
      this.blur(function (shape) {
        return !fn(shape);
      });
    },
    blurShapeBranch: function blurShapeBranch(fn) {
      var blurredTheme = getBlurredTheme();
      this.findShape(fn).forEach(function (shapeBranch) {
        return traversal(shapeBranch, function (shape) {
          var connectionArrow = shape.getAssignedConnectionArrow();
          updateShapeTheme(shape, blurredTheme[shape.getShapeType()], connectionArrow ? blurredTheme[connectionArrow.getFieldName()] : null);
        }, function (shape) {
          return shape.state.body;
        });
      });
    },
    focusShapeBranch: function focusShapeBranch(fns) {
      var _this = this;
      var blurredTheme = getBlurredTheme();
      [].concat(fns).forEach(function (fn, index) {
        _this.findShape(fn).forEach(function (shapeBranch) {
          var flatShape = flatTree(shapeBranch, function (shape) {
            return shape.state.body;
          });
          var branchIndex = svgObjectsTree.getShapes().indexOf(shapeBranch);
          _this.findShape(function (shape) {
            return !flatShape.includes(shape);
          }, index > 0 ? branchIndex : 0).forEach(function (shape) {
            var connectionArrow = shape.getAssignedConnectionArrow();
            updateShapeTheme(shape, blurredTheme[shape.getShapeType()], connectionArrow ? blurredTheme[connectionArrow.getFieldName()] : null);
          });
        });
      });
    },
    print: function print(config) {
      return svgObjectsTree && svgObjectsTree.print(config);
    }
  };
};
export default (function () {
  var customStyleTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var theme = applyStyleToTheme(getDefaultTheme(), customStyleTheme);
  return {
    buildShapesTree: function buildShapesTree(flowTree) {
      var shapes = [];
      try {
        shapes = buildSVGObjectsTree(flowTree, theme);
      } catch (e) {
        logError('Error at buildShapesTree' + e.message, e.stack);
        throw e;
      }
      return shapes;
    },
    applyTheme: function applyTheme(newThemeStyles) {
      theme = applyStyleToTheme(theme, newThemeStyles);
    },
    applyDefaultTheme: function applyDefaultTheme() {
      this.applyTheme(getDefaultTheme());
    },
    applyBlackAndWhiteTheme: function applyBlackAndWhiteTheme() {
      this.applyTheme(getBlackAndWhiteTheme());
    },
    applyBlurredTheme: function applyBlurredTheme() {
      this.applyTheme(getBlurredTheme());
    },
    applyLightTheme: function applyLightTheme() {
      this.applyTheme(getLightTheme());
    },
    applyColorBasedTheme: function applyColorBasedTheme(colors) {
      this.applyTheme(buildColorsBasedTheme(colors));
    }
  };
});