js2flowchart/src/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 const ShapesTreeEditor = svgObjectsTree => {
    const updateShapeTheme = (shape, shapeStyles, connectionArrowStyles) => {
        if (shapeStyles) {
            shape.updateTheme(shapeStyles);
        }

        if (connectionArrowStyles) {
            shape.getAssignedConnectionArrow().updateTheme(connectionArrowStyles);
            shape.getLoopedConnectionArrow &&
                shape.getLoopedConnectionArrow().updateTheme(connectionArrowStyles);
        }
    };

    return {
        findShape(fnTest, startIndex = 0) {
            return svgObjectsTree
                .getShapes()
                .filter((shape, index) => index >= startIndex && fnTest(shape));
        },

        applyShapeStyles(fn, shapeStyles, connectionArrowStyles) {
            this.findShape(fn).forEach(shape => {
                updateShapeTheme(shape, shapeStyles, connectionArrowStyles);
            });
        },

        blur(fn) {
            const blurredTheme = getBlurredTheme();

            this.findShape(fn).forEach(shape => {
                const connectionArrow = shape.getAssignedConnectionArrow();

                updateShapeTheme(
                    shape,
                    blurredTheme[shape.getShapeType()],
                    connectionArrow ? blurredTheme[connectionArrow.getFieldName()] : null
                );
            });
        },

        focus(fn) {
            this.blur(shape => !fn(shape));
        },

        blurShapeBranch(fn) {
            const blurredTheme = getBlurredTheme();

            this.findShape(fn).forEach(shapeBranch =>
                traversal(
                    shapeBranch,
                    shape => {
                        const connectionArrow = shape.getAssignedConnectionArrow();

                        updateShapeTheme(
                            shape,
                            blurredTheme[shape.getShapeType()],
                            connectionArrow ? blurredTheme[connectionArrow.getFieldName()] : null
                        );
                    },
                    shape => shape.state.body
                )
            );
        },

        focusShapeBranch(fns) {
            const blurredTheme = getBlurredTheme();

            [].concat(fns).forEach((fn, index) => {
                this.findShape(fn).forEach(shapeBranch => {
                    const flatShape = flatTree(shapeBranch, shape => shape.state.body);
                    let branchIndex = svgObjectsTree.getShapes().indexOf(shapeBranch);

                    this.findShape(
                        shape => !flatShape.includes(shape),
                        index > 0 ? branchIndex : 0
                    ).forEach(shape => {
                        const connectionArrow = shape.getAssignedConnectionArrow();

                        updateShapeTheme(
                            shape,
                            blurredTheme[shape.getShapeType()],
                            connectionArrow ? blurredTheme[connectionArrow.getFieldName()] : null
                        );
                    });
                });
            });
        },

        print(config) {
            return svgObjectsTree && svgObjectsTree.print(config);
        }
    };
};

export default (customStyleTheme = {}) => {
    let theme = applyStyleToTheme(getDefaultTheme(), customStyleTheme);

    return {
        buildShapesTree(flowTree) {
            let shapes = [];

            try {
                shapes = buildSVGObjectsTree(flowTree, theme);
            } catch (e) {
                logError('Error at buildShapesTree' + e.message, e.stack);
                throw e;
            }

            return shapes;
        },

        applyTheme(newThemeStyles) {
            theme = applyStyleToTheme(theme, newThemeStyles);
        },

        applyDefaultTheme() {
            this.applyTheme(getDefaultTheme());
        },
        applyBlackAndWhiteTheme() {
            this.applyTheme(getBlackAndWhiteTheme());
        },
        applyBlurredTheme() {
            this.applyTheme(getBlurredTheme());
        },
        applyLightTheme() {
            this.applyTheme(getLightTheme());
        },

        applyColorBasedTheme(colors) {
            this.applyTheme(buildColorsBasedTheme(colors));
        }
    };
};