Usage drawing tool

This tool is for drawing usage condition

How to install

For JQuery and original JS

Download js lib from npmjs

npm i usage-drawing-tool

add js/css to html

<link rel='stylesheet' href='assets/railroad-diagrams.css'>
<script type="text/javascript" src="/usage-drawing-tool.min.js"></script>

you can custom css style for your project

For TypeScript such as Angular Vue React

Install

npm i usage-drawing-tool

Import

import * as UsageDrawingTool from 'usage-drawing-tool';

Run

UsageDrawingTool.analyzeCode(expression)

Example

// init
UsageDrawingTool.init({
  category: {
    E6_AF00: { enDesc: 'E6' },
    E7_AF00: { enDesc: 'E7' },
    AC00: { enDesc: 'INT COL' },
    JD00: { enDesc: 'SIG PNL' },
    JE00: { enDesc: 'SEAT MTL' }
  },
  data: {
    E6_AF01: { category: 'E6_AF00', enDesc: 'G1.1' },
    E6_AF02: { category: 'E6_AF00', enDesc: 'G1.2' },
    E6_AF06: { category: 'E6_AF00', enDesc: 'G1.3' },
    E6_AF07: { category: 'E6_AF00', enDesc: 'G1.F' },
    E6_AF08: { category: 'E6_AF00', enDesc: 'G1.5' },
    E6_AF09: { category: 'E6_AF00', enDesc: 'G1.6' },
    E7_AF01: { category: 'E7_AF00', enDesc: 'G1.1' },
    E7_AF02: { category: 'E7_AF00', enDesc: 'G1.2' },
    E7_AF06: { category: 'E7_AF00', enDesc: 'G1.3' },
    E7_AF07: { category: 'E7_AF00', enDesc: 'G1.F' },
    E7_AF08: { category: 'E7_AF00', enDesc: 'G1.5' },
    E7_AF09: { category: 'E7_AF00', enDesc: 'G1.6' },
    AC02: { category: 'AC00', enDesc: 'HL GRY_INT BRN' },
    JD02: { category: 'JD00', enDesc: 'SIG PNL' },
    JE02: { category: 'JE00', enDesc: 'NAPPA' },
    JE01: { category: 'JE00', enDesc: 'FABRIC' }
  }
});

// analyze
var graph = UsageDrawingTool.analyzeCode('(E6_AF01||E6_AF02||E6_AF06||E6_AF07||E6_AF08||E6_AF09)&&JD02&&(JE01||JE02)||(E7_AF01||E7_AF02||E7_AF06||E7_AF07||E7_AF08||E7_AF09)');

How to display

// CASE1: Get HTML directly
var htmlCode = graph.toString();
// TODO set htmlCode as innerHtml to parent Element.

// CASE2: Append to Dom element
graph.addTo(domElement);

// CASE3: Get SVG element
var svgElement = graph.toSVG();
// TODO append svgElement to parent Element

Result

Release Note

V1.1.1

• Fix Bug: Exception when no operator in expression

V1.1.0

• Support group display by category

V1.0.7

• Original Version