Line Segment Slider Input

A line rendering tool that can be repositioned and resized by drag and drop. Stop points may also be added in between and can be moved along the line.

Installation

$ npm install --save line-segment-slider-input

Usage

import * as React from "react";
import * as ReactDOM from "react-dom";
import LineSegmentSliderInput from "../src/index";

type Stop = {
  position: number;
  color: string;
};

type StateType = {
  from: Array<number>;
  to: Array<number>;
  stops: Array<Stop>;
  index: number;
};
class App extends React.Component<{}, StateType> {
  constructor(props) {
    super(props);

    this.state = {
      from: [0.2, 0.2],
      to: [0.8, 0.8],
      index: -1,
      stops: [
        {
          position: 0,
          color: "white",
        },
        {
          position: 0.2,
          color: "white",
        },
        {
          position: 1,
          color: "white",
        },
      ],
    };
  }

  handleMove(type, handle) {
    if (type === "from") {
      this.setState({ from: handle });
    } else if (type === "to") {
      this.setState({ to: handle });
    } else {
      this.setState({ stops: handle });
    }
  }

  removeHandle() {
    if (this.state.index) {
      let stops = this.state.stops;

      if (!(this.state.index === 0 || this.state.index === stops.length - 1)) {
        stops.splice(this.state.index, 1);
      }

      this.setState({ stops });
    }
  }

  changeIndex(index) {
    this.setState({ index });
  }

  render() {
    return (
      <LineSegmentSliderInput
        width={500}
        height={500}
        from={this.state.from}
        to={this.state.to}
        stops={this.state.stops}
        index={this.state.index}
        changeIndex={this.changeIndex.bind(this)}
        handleMove={this.handleMove.bind(this)}
        removeHandle={this.removeHandle.bind(this)}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Property	Type	Description
width	number	Takes a numerical input which represents the width of canvas on which this svg will render.
height	number	Takes a numerical input which represents the height of canvas on which this svg will render.
from	Array	Takes an array of numbers of size 2 that represent the starting point of the line in fraction of the total width and height.
to	Array	Takes an array of numbers of size 2 that represent the ending point of the line in fraction of the total width and height.
stops	Array	Takes an array of objects that have properties ** position ** and ** color **. Position represents the ratio of distance between the start point and that point to that of the total length of the line.
index	number	It represents the index of circle that is currently active
changeIndex	function(index)	This can be used to change the active index in the parent component
handleMove	function(type, handle)	This can be used to change the value of stops or the edges. type can be from, to or other. other returns an array of stops and can be used to change the array of stops.
removeHandle	function()	This removes the active handle if it isn't the start or the end point. It is triggered when someone pressed delete key.