line-segment-slider-input
TypeScript icon, indicating that this package has built-in type declarations

0.1.18 • Public • Published

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.

Line Segment Slider Input demo

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.

Package Sidebar

Install

npm i line-segment-slider-input

Weekly Downloads

1

Version

0.1.18

License

ISC

Unpacked Size

123 kB

Total Files

12

Last publish

Collaborators

  • surajahmedc
  • aditya_jamuar
  • theankurkedia
  • garganurag893