Documentation

Description

The Line Number module is used to draw the X-axis ranges.

Properties

The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.

Supported commands

Events

The Line Number addon sends ValueChanged type events to Event Bus when a user selects the range or a point on the axis.

If you are using Advanced Connector, please note that due to the Regular Expression syntax which has special meaning for "-" and "." characters, you need to escape them with backshlash.

When a user draws all ranges properly without any error, the addon sends the 'ALL OK' event.

CSS classes

Please note that most of these propeties refer to svg css capabilities described here.

If you define your own CSS class for this addon, you have to provide the style definition for all elements because the default styles are not provided in such a case. For example:

.Line_Number_demo {
}

.Line_Number_demo .outer .infinity-left,.Line_Number_demo .outer .infinity-right {
    height: 100%;
    width: 5%;
    position: absolute;
    z-index: 9;
}

.Line_Number_demo .outer .infinity-left {
    left: 0px;
}

.Line_Number_demo .outer .infinity-right {
    right: 0px;
}

.Line_Number_demo .outer {
    width: 100%;
    height: 100%;
    background-color: #f3f3f3;
    position: relative;
}

.Line_Number_demo .inner {
    width: 90%;
    height: 100%;
    position: absolute;
    left: 5%;
    background-color: #fefefe;
}

.Line_Number_demo .x-axis {
    width: 100%;
    height: 2px;
    min-height: 2px;
    max-height: 2px;
    position: absolute;
    z-index: 12;
    top: 50%;
    background-color: #111;
}

.Line_Number_demo .stepLine {
    width: 2px;
    height: 8px;
    min-height: 8px;
    background-color: #111;
    position: absolute;
    top: 50%;
    margin-top: -4px;
}

.Line_Number_demo .rangeImage, .Line_Number_demo .currentMousePosition {
    background-repeat: no-repeat;
    width: 12px;
    height: 12px;
    position: absolute;
    left: -5px;
    top: -1px;
    z-index: 11;
    background-size: 12px 12px;
}

.Line_Number_demo .exclude {
    background-image: url('resources/range_exclude.svg');
}

.Line_Number_demo .include {
    background-image: url('resources/range_include.svg');
}

.Line_Number_demo .correctRangeExclude {
    background-image: url('resources/correct_range_exclude.svg');
}

.Line_Number_demo .correctRangeInclude {
    background-image: url('resources/correct_range_include.svg');
}

.Line_Number_demo .wrongRangeExclude {
    background-image: url('resources/wrong_range_exclude.svg');
}

.Line_Number_demo .wrongRangeInclude {
    background-image: url('resources/wrong_range_include.svg');
}

.Line_Number_demo .clickArea {
    width: 10px;
    height: 50px;
    top: -25px;
    min-height: 10px;
    min-width: 10px;
    position: absolute;
    z-index: 12;
    overflow: hidden;
}

.Line_Number_demo .stepText {
    position: absolute;
    font-size: 12px;
    top: 10px;
    white-space: nowrap;
}

.Line_Number_demo .x-arrow {
    border-bottom: 6px solid transparent;
    border-left: 6px solid black;
    border-top: 6px solid transparent;
    right: -5px;
    top: -5px;
    position: absolute;
}

.Line_Number_demo .clickArea:hover,.Line_Number_demo .outer .infinity-left:hover,.Line_Number_demo .outer .infinity-right:hover {
    cursor: pointer;
}

.Line_Number_demo .selectedRange {
    background-color: #00bb44;
    box-shadow: 0px 0px 1px #111;
    min-height: 10px;
    height: 10px;
    min-width: 2px;
    width: 2px;
    top: -7px;
    position: absolute;
    z-index: 10;
    border-radius: 5px 5px 0px 0px;
}

.Line_Number_demo .currentSelectedRange {
    background-color: #00aaff;
}

.Line_Number_demo .correct {
    background-color: #00ff44;
}

.Line_Number_demo .wrong {
    background-color: #ff3344;
}

.Line_Number_demo .currentMousePosition {
    background-image: url('resources/current_mouse_pos.svg');
}

.Line_Number_demo .infinityLeft {
    border-radius: 0px 5px 0px 0px;
}

.Line_Number_demo .infinityRight {
    border-radius: 5px 0px 0px 0px;
}

.Line_Number_demo .infinityBoth {
    border-radius: 0px;
}

.Line_Number_demo .infinity-hover {
    background-color: #d8d8d8;
}

Ranges

Range pattern:

< or ( x; y ) or >; 0 or 1

Examples:

Demo presentation

Demo presentation contains examples on how to use the Line Number addon.