pipeline-editor-s5

    0.2.1 • Public • Published

    pipeline-editor-s5

    Total alerts Language grade: JavaScript npm deepcode

    Pipeline Editor s5 (just ui-editor)

    example-editor

    Alt text

    Integration

    <div style="overflow: scroll; height: 400px; min-height: 400px;">
        <canvas id="pipeline_diagram_canvas"></canvas>
    </div>
    <script src="./pipeline-editor-s5.js?ver=1"></script>
    <script>
        window.render1 = new RenderPipelineEditor('pipeline_diagram_canvas', {
            // HERE configs
        });
        render1.set_data({
            "title": "Some",
            "description": "Some description",
            "nodes": {
                "aCaqNjY": {
                    "n": "One",
                    "d": "...",
                    "i": {},
                    "x": 1,
                    "y": 0,
                    "c": "#ffffff"
                },
                "kB3Cu9b": {
                    "n": "Two",
                    "d": "...",
                    "i": {
                        "aCaqNjY": ""
                    },
                    "x": 2,
                    "y": 2,
                    "c": "#ffffff"
                }
            }
        });
    </script>

    Integration to angular project

    $ npm install --save pipeline-editor-s5
    

    angular.json:

    ...
        "scripts": [
            ...,
            "node_modules/pipeline-editor-s5/html/pipeline-editor-s5.js"
        ]
    ...
    

    add to html-template:

    ...
    <div class="pipeline-viewer-container">
        <canvas id="pipeline_viewer"></canvas>
    </div>
    ...
    

    add to css:

    .pipeline-viewer-container {
        display: none;
        overflow: scroll;
        max-height: 10px;
        height: 10px;
        min-height: 10px;
    }
    

    add to ts file:

    ...
    declare var RenderPipelineEditor: any;
    ...
    
        show_data() : void {
            this.pipelineEditorInst = new RenderPipelineEditor(
              'pipeline_viewer'
            );
            this.pipelineEditorInst.set_data(this.pipelineData);
        }
    

    Documentation

    Events

    • onselectedblock(blockid) - when user selected a block
    • onchanged() - when changed something in scheme

    Enums

    PIPELINE_EDITOR_S5_STATE_*:

    • PIPELINE_EDITOR_S5_STATE_MOVING_BLOCKS = 0;
    • PIPELINE_EDITOR_S5_STATE_REMOVING_BLOCKS = 1;
    • PIPELINE_EDITOR_S5_STATE_ADDING_BLOCKS = 2;
    • PIPELINE_EDITOR_S5_STATE_ADDING_CONNECTIONS = 3;

    Line orientation:

    • RPL_LINE_ORIENT_NONE = 0;
    • RPL_LINE_ORIENT_VERTICAL = 1;
    • RPL_LINE_ORIENT_HORIZONTAL = 2;
    • RPL_LINE_ORIENT_POINT = 3;

    Line angel:

    • RPL_LINE_ANGEL_END_LEFT = 0;
    • RPL_LINE_ANGEL_END_RIGHT = 1;
    • RPL_LINE_ANGEL_RIGHT_DOWN = 2;
    • RPL_LINE_ANGEL_LEFT_DOWN = 3;

    Class RenderPipelineEditor

    Constructor, example:

    window.render = new RenderPipelineEditor(element_id_canvas);

    • constructor(canvas_id, cfg)
    • get_editor_state() - will return from enum PIPELINE_EDITOR_S5_STATE_*
    • init_font_size()
    • clone_object(obj)
    • set_data(data) - set new data-json,
    • get_data() - will return data-json
    • get_data_share() - get_data and packed with LZString
    • set_data_share(data) - data-json unpacked with LZString and set_data()
    • change_state_to_removing_blocks()
    • change_state_to_moving_blocks()
    • change_state_to_adding_blocks()
    • change_state_to_adding_connections()
    • canvas_onmouseover(event)
    • canvas_onmouseout(event)
    • canvas_onmouseup(event)
    • canvas_onmousedown(event)
    • find_block_id(x0, y0)
    • canvas_onmousemove(event)
    • update_meansures() - Update meansures (like a width of blocks)
    • update_image_size()
    • calcX_in_px(cell_x)
    • calcY_in_px(cell_y)
    • clear_canvas()
    • draw_menu_scaling_buttons() - Draw scaling value and buttons for it changing
    • draw_grid()
    • draw_diagram_name()
    • draw_blocks()
    • call_onselectedblock - private method for call function onselectedblock (only if defined by user)
    • correct_line(line)
    • check_error(line, out_nodeid, in_nodeid)
    • add_to_draw_connection(x0, x2, y0, y1, y2, out_nodeid, in_nodeid)
    • auto_placement()
    • draw_connections()
    • debug_print_connection_info(obj)
    • update_pipeline_diagram()
    • do_connection_blocks()
    • generate_new_blockid() - will be generate uniq blockid with fixed possible collisions
    • add_block(_block_info_json) - add new block by example json {"n": "edit me", "d": "edit me", "i": {}, "x": t_x, "y": t_y}
    • prepare_data_cards_one_cells()
    • prepare_lines_out()

    Class RenderPipelineBlock

    • constructor(nodeid, _conf)
    • to_json()
    • copy_from_json(_json)
    • update_cell_xy(pos_x, pos_y)
    • get_hash_cell_xy()
    • get_cell_x()
    • get_cell_y()
    • set_color(val)
    • get_color()
    • set_name(name)
    • get_name()
    • set_description(description)
    • get_description()
    • update_block_meansures(_ctx)
    • nodes_in_same_cells_reset()
    • nodes_in_same_cells_add(node_id)
    • get_paralax_in_cell()
    • outcoming_reset()
    • outcoming_add(nodeid)
    • get_paralax_for_line(node_id)
    • update_incoming_sort(pl_data_render)
    • draw_block(_ctx, selectedBlockIdEditing)

    Class RenderPipelineConfig

    • constructor()
    • set_max_cell_xy(x,y) - set max x and y coordinates block (in cells)
    • set_cell_size(width, height)
    • get_cell_width()
    • get_cell_height()
    • get_diagram_padding_left() - left padding for diagram
    • get_diagram_padding_top() - top padding for diagram
    • set_card_size(width, height)
    • get_card_width()
    • get_card_height()
    • get_radius_for_angels()
    • get_scale_value() - scaling value (1.0 == 100%)
    • set_scale_value(val) - set new scale value (1.0 == 100%)
    • get_font_px_suffix() - return suffix for set font in canvas like px monospace,monospace

    Class RenderPipelineDrawedLinesCache

    • constructor()
    • add(line)
    • has_collision(line)
    • clear()

    Class RenderPipelineConnection

    • constructor(line1, line2, line3, conf, out_nodeid, in_nodeid)
    • draw(_ctx)

    Class RenderPipelineLine

    • constructor(x0, y0, x1, y1)
    • set_x0(val)
    • set_x1(val)
    • set_y0(val)
    • set_y1(val)
    • has_collision(line)
    • draw_out_circle(_ctx, radius)
    • draw_line(_ctx)
    • draw_arrow(_ctx, radius)
    • draw_arc(_ctx, radius, angle)

    Other pipeline editors

    Nice diagram and something else:

    Block-scheme editor:

    https://draw.io

    Plugin for Jenkins

    https://www.jenkins.io/doc/book/blueocean/pipeline-editor/

    PlantUML

    Install

    npm i pipeline-editor-s5

    DownloadsWeekly Downloads

    8

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    284 kB

    Total Files

    20

    Last publish

    Collaborators

    • sea5kg