Perfect Wires


Role

  • Developer
  • Project Type

  • Personal Project
  • Web Library
  • Overview

    I was interested in creating a small library for drawing wires. I wanted to improve some development skills but also learn a few new things like:

    • Library development and publishing on NPM
    • Semantic versioning
    • Automated tooling
    • Unit testing

    It serves a pretty basic purpose of creating a “wire” between two objects. I intend to use this for a larger diagramming project I would like to build, but this is a good start.

    You give it a start and end, it return an SVG path that is the wire.

    ///Syntax
    getWire(sx, sy, ex, ey)
    
    //Example
    const pathData = getWire(400, 400, 500, 500);
    
    ///Returns
    'M400,400 L400,450 a 50,50 90 0 0 50,50 L500,500'
    

    I still have some work to do since there is some “Pay no attention to that (wire) behind the curtain” trickery going on.

    Github repo

    NPM

    StackBlitz Example