Skip to content

GeekyAnts/line-segment-slider-input

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

58 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

2D Line Segment Slider Input. Originally built for BuilderX.io

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •