js2flowchart/src/render/svg/shapes/Rectangle.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 { getRoundedRectangle, getCircle } from 'shared/utils/svgPrimitives';
import { assignState } from 'shared/utils/composition';

import {
    setupCompleteState,
    setupBasicBehaviour,
    setupInitialSelectors,
    delegateInit
} from './BaseShape';

const ENTITY_FIELD_NAME = 'Rectangle';

const setupRectangleBehavior = state => ({
    print(config = {}) {
        const theme = state.theme,
            dotTheme = theme.dot;
        const { x, y } = state.position,
            { w, h } = state.dimensions,
            node = state.node;

        return `
                <g>
                   ${getRoundedRectangle(x, y, w, h, theme)}
                   ${this.printName()}
                   ${node.chain
                       ? getCircle(
                             x + dotTheme.offset,
                             y + h - dotTheme.offset,
                             dotTheme.radius,
                             dotTheme
                         )
                       : ''}
                   ${this.printDebugInfo(config)}
                </g>`;
    }
});

export const Rectangle = initialState => {
    const state = setupCompleteState(initialState);

    return assignState(state, [setupInitialSelectors, setupBasicBehaviour, setupRectangleBehavior]);
};

export default delegateInit(Rectangle, ENTITY_FIELD_NAME);