DefaultBaseTheme.js

export const DefaultColors = {
    strokeColor: '#444',
    defaultFillColor: '#fff',
    textColor: '#222',
    arrowFillColor: '#333',
    rectangleFillColor: '#90caf9',
    rectangleDotFillColor: '#ede7f6',
    functionFillColor: '#a5d6a7',
    rootCircleFillColor: '#fff59d',
    loopFillColor: '#b39ddb',
    conditionFillColor: '#ce93d8',
    destructedNodeFillColor: '#ffcc80',
    classFillColor: '#80cbc4',
    debuggerFillColor: '#EF5350',
    exportFillColor: '#81d4fa',
    throwFillColor: '#ef9a9a',
    tryFillColor: '#FFE082',
    objectFillColor: '#9fa8da',
    callFillColor: '#C5E1A5',
    debugModeFillColor: '#666'
};

export const buildTheme = config => {
    const BaseShape = {
        strokeColor: config.strokeColor,
        strokeWidth: 1,
        fillColor: config.defaultFillColor,
        textColor: config.textColor,
        fontFamily: 'monospace',
        fontSize: 13,
        lineHeight: 5, //depends on fontSize
        symbolHeight: 10, //depends on fontSize
        symbolWidth: 7.8, //depends on fontSize
        horizontalPadding: 15,
        verticalPadding: 10,
        childOffset: 37,
        margin: 10,
        roundBorder: 2,
        complexTypeExtraSpace: 15,

        debugFontSize: 8,
        debugTextColor: config.debugModeFillColor,
        ...config
    };

    return {
        BaseShape,
        ConnectionArrow: {
            arrow: {
                size: {
                    x: 8,
                    y: 6
                },
                fillColor: config.arrowFillColor
            },
            line: {
                strokeColor: config.strokeColor,
                strokeWidth: 1,
                curveTurnRadius: 4
            },
            lineTurnOffset: 20
        },

        Shape: {
            ...BaseShape
        },

        Rectangle: {
            ...BaseShape,
            fillColor: config.rectangleFillColor,
            dot: {
                ...BaseShape,
                offset: 4,
                radius: 2,
                fillColor: config.rectangleDotFillColor
            },
            roundBorder: 3
        },

        VerticalEdgedRectangle: {
            ...BaseShape,
            fillColor: config.functionFillColor,
            edgeOffset: 10
        },

        RootCircle: {
            ...BaseShape,
            radius: 15,
            padding: 3,
            fillColor: config.rootCircleFillColor
        },

        LoopRhombus: {
            ...BaseShape,
            fillColor: config.loopFillColor,
            thinPartOffset: 15,
            rhombusSize: 50,
            roundBorder: 3,
            doubleLayerOffsetA: 4,
            doubleLayerOffsetB: 8,
            childOffset: 20,
            positionTopShift: 20
        },

        ConditionRhombus: {
            ...BaseShape,
            fillColor: config.conditionFillColor,
            thinPartOffset: 15,
            roundBorder: 3,
            childOffset: 20,
            alternateBranchOffset: 40,
            markOffset: {
                x: 15,
                y: 5
            },
            margin: 20
        },

        RootStartPoint: {
            center: {
                x: 25,
                y: 25
            },
            childOffset: {
                x: 25,
                y: 65
            }
        },

        ReturnStatement: {
            ...BaseShape,
            roundBorder: 3,
            fillColor: config.rectangleFillColor,
            arrow: {
                ...BaseShape,
                handlerLength: 5,
                sizeX: 16,
                sizeY: 22,
                fillColor: config.functionFillColor
            }
        },

        DestructedNode: {
            ...BaseShape,
            fillColor: config.destructedNodeFillColor,
            roundBorder: 2,
            suffix: {
                ...BaseShape,
                roundBorder: 2,
                fillColor: config.destructedNodeFillColor,
                width: 8,
                space: 4
            }
        },

        ClassDeclaration: {
            ...BaseShape,
            fillColor: config.classFillColor,
            edgeOffset: 10
        },

        DebuggerStatement: {
            ...BaseShape,
            fillColor: config.debuggerFillColor,
            roundBorder: 2
        },

        ExportDeclaration: {
            ...BaseShape,
            roundBorder: 3,
            fillColor: config.exportFillColor,
            arrow: {
                ...BaseShape,
                handlerLength: 5,
                sizeX: 20,
                sizeY: 28,
                fillColor: config.defaultFillColor
            }
        },

        ImportDeclaration: {
            ...BaseShape,
            fillColor: config.defaultFillColor,
            edgeOffset: 5
        },

        ImportSpecifier: {
            ...BaseShape,
            fillColor: config.exportFillColor
        },

        ThrowStatement: {
            ...BaseShape,
            fillColor: config.throwFillColor
        },

        TryStatement: {
            ...BaseShape,
            fillColor: config.tryFillColor
        },

        CatchClause: {
            ...BaseShape,
            fillColor: config.throwFillColor,
            arrow: {
                ...BaseShape,
                handlerLength: 2,
                sizeX: 16,
                sizeY: 28,
                fillColor: config.throwFillColor
            }
        },

        SwitchStatement: {
            ...BaseShape,
            fillColor: config.conditionFillColor,
            thinPartOffset: 15,
            roundBorder: 3,
            childOffset: 20,
            alternateBranchOffset: 40,
            markOffset: {
                x: 15,
                y: 5
            },
            margin: 20
        },

        BreakStatement: {
            ...BaseShape,
            fillColor: config.rectangleFillColor,
            arrow: {
                ...BaseShape,
                handlerLength: 5,
                sizeX: 16,
                sizeY: 28,
                fillColor: config.conditionFillColor
            }
        },

        SwitchCase: {
            ...BaseShape,
            fillColor: config.conditionFillColor
        },

        ContinueStatement: {
            ...BaseShape,
            fillColor: config.rectangleFillColor,
            arrow: {
                ...BaseShape,
                handlerLength: 5,
                sizeX: 16,
                sizeY: 28,
                fillColor: config.loopFillColor
            }
        },

        ObjectProperty: {
            ...BaseShape,
            fillColor: config.rectangleFillColor
        },

        CallExpression: {
            ...BaseShape,
            dot: {
                ...BaseShape,
                offset: 6,
                radius: 4,
                fillColor: config.rectangleDotFillColor
            },
            fillColor: config.callFillColor
        }
    };
};

export default buildTheme(DefaultColors);

export const getAlignedColors = (theme, defaultColor) => {
    const themeCopy = { ...theme };
    Object.keys(themeCopy).forEach(color => {
        themeCopy[color] = defaultColor;
    });

    return themeCopy;
};