---
layout: apidoc
title:  "Connectors.Straight - jsplumb API documentation"
date:   2014-01-01 00:00:00
yuiGridsUrl: http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css
yuiSeedUrl: http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js
projectAssets: ../assets
base: "../.."
---



<div id="doc">
    <div id="bd" class="yui3-g">
        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/Anchors.Assign.html">Anchors.Assign</a></li>
            
                <li><a href="../classes/Anchors.AutoDefault.html">Anchors.AutoDefault</a></li>
            
                <li><a href="../classes/Anchors.Bottom.html">Anchors.Bottom</a></li>
            
                <li><a href="../classes/Anchors.BottomCenter.html">Anchors.BottomCenter</a></li>
            
                <li><a href="../classes/Anchors.BottomLeft.html">Anchors.BottomLeft</a></li>
            
                <li><a href="../classes/Anchors.BottomRight.html">Anchors.BottomRight</a></li>
            
                <li><a href="../classes/Anchors.Center.html">Anchors.Center</a></li>
            
                <li><a href="../classes/Anchors.Continuous.html">Anchors.Continuous</a></li>
            
                <li><a href="../classes/Anchors.ContinuousBottom.html">Anchors.ContinuousBottom</a></li>
            
                <li><a href="../classes/Anchors.ContinuousLeft.html">Anchors.ContinuousLeft</a></li>
            
                <li><a href="../classes/Anchors.ContinuousRight.html">Anchors.ContinuousRight</a></li>
            
                <li><a href="../classes/Anchors.ContinuousTop.html">Anchors.ContinuousTop</a></li>
            
                <li><a href="../classes/Anchors.Left.html">Anchors.Left</a></li>
            
                <li><a href="../classes/Anchors.LeftMiddle.html">Anchors.LeftMiddle</a></li>
            
                <li><a href="../classes/Anchors.Perimeter.html">Anchors.Perimeter</a></li>
            
                <li><a href="../classes/Anchors.Right.html">Anchors.Right</a></li>
            
                <li><a href="../classes/Anchors.RightMiddle.html">Anchors.RightMiddle</a></li>
            
                <li><a href="../classes/Anchors.Top.html">Anchors.Top</a></li>
            
                <li><a href="../classes/Anchors.TopCenter.html">Anchors.TopCenter</a></li>
            
                <li><a href="../classes/Anchors.TopLeft.html">Anchors.TopLeft</a></li>
            
                <li><a href="../classes/Anchors.TopRight.html">Anchors.TopRight</a></li>
            
                <li><a href="../classes/Connection.html">Connection</a></li>
            
                <li><a href="../classes/Connector.html">Connector</a></li>
            
                <li><a href="../classes/Connectors.Bezier.html">Connectors.Bezier</a></li>
            
                <li><a href="../classes/Connectors.Flowchart.html">Connectors.Flowchart</a></li>
            
                <li><a href="../classes/Connectors.StateMachine.html">Connectors.StateMachine</a></li>
            
                <li><a href="../classes/Connectors.Straight.html">Connectors.Straight</a></li>
            
                <li><a href="../classes/Endpoint.html">Endpoint</a></li>
            
                <li><a href="../classes/Endpoints.Blank.html">Endpoints.Blank</a></li>
            
                <li><a href="../classes/Endpoints.Dot.html">Endpoints.Dot</a></li>
            
                <li><a href="../classes/Endpoints.Image.html">Endpoints.Image</a></li>
            
                <li><a href="../classes/Endpoints.Rectangle.html">Endpoints.Rectangle</a></li>
            
                <li><a href="../classes/jsPlumb.html">jsPlumb</a></li>
            
                <li><a href="../classes/jsPlumbInstance.html">jsPlumbInstance</a></li>
            
                <li><a href="../classes/jsPlumbUIComponent.html">jsPlumbUIComponent</a></li>
            
                <li><a href="../classes/jsPlumbUtil.html">jsPlumbUtil</a></li>
            
                <li><a href="../classes/jsPlumbUtil.EventGenerator.html">jsPlumbUtil.EventGenerator</a></li>
            
                <li><a href="../classes/Overlay.html">Overlay</a></li>
            
                <li><a href="../classes/OverlayCapableJsPlumbUIComponent.html">OverlayCapableJsPlumbUIComponent</a></li>
            
                <li><a href="../classes/Overlays.Arrow.html">Overlays.Arrow</a></li>
            
                <li><a href="../classes/Overlays.Diamond.html">Overlays.Diamond</a></li>
            
                <li><a href="../classes/Overlays.Label.html">Overlays.Label</a></li>
            
                <li><a href="../classes/Overlays.PlainArrow.html">Overlays.PlainArrow</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1>Connectors.Straight Class</h1>
<div class="box meta">
    

    

    
        <div class="foundat">
            Defined in: <a href="../files/doc_api_connectors.js.html#l67"><code>doc&#x2F;api&#x2F;connectors.js:67</code></a>
        </div>
    

    

    
</div>



<div class="box intro">
    <p>The Straight connector draws a simple straight line between the two anchor points.</p>

</div>


    <div class="constructor">
        <h2>Constructor</h2>
        <div id="method_Connectors.Straight" class="method item">
    <h3 class="name"><code>Connectors.Straight</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>params</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connectors.js.html#l67"><code>doc&#x2F;api&#x2F;connectors.js:67</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        
    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">params</code>
                        <span class="type">Object</span>
                    

                    

                    <div class="param-description">
                        <p>Constructor parameters.</p>

                    </div>

                    
                        <ul class="params-list">
                            
                            <li class="param">
                                
                                    <code class="param-name optional">[stub=0]</code>
                                    <span class="type">Integer</span>
                                    <span class="flag optional" title="This parameter is optional.">optional</span>
                                

                                <div class="param-description">
                                    <p>Optional distance to travel from each endpoint before making the connection between the two.</p>

                                </div>

                                
                            </li>
                            
                            <li class="param">
                                
                                    <code class="param-name optional">[sourceStub]</code>
                                    <span class="type">Integer</span>
                                    <span class="flag optional" title="This parameter is optional.">optional</span>
                                

                                <div class="param-description">
                                    <p>Optional stub for the source endpoint only.</p>

                                </div>

                                
                            </li>
                            
                            <li class="param">
                                
                                    <code class="param-name optional">[targetStub]</code>
                                    <span class="type">Integer</span>
                                    <span class="flag optional" title="This parameter is optional.">optional</span>
                                

                                <div class="param-description">
                                    <p>Optional stub for the target endpoint only.</p>

                                </div>

                                
                            </li>
                            
                            <li class="param">
                                
                                    <code class="param-name optional">[gap=0]</code>
                                    <span class="type">Integer</span>
                                    <span class="flag optional" title="This parameter is optional.">optional</span>
                                

                                <div class="param-description">
                                    <p>Optional gap to leave between the endpoints and the start of the connector.</p>

                                </div>

                                
                            </li>
                            
                            <li class="param">
                                
                                    <code class="param-name optional">[sourceGap]</code>
                                    <span class="type">Integer</span>
                                    <span class="flag optional" title="This parameter is optional.">optional</span>
                                

                                <div class="param-description">
                                    <p>Optional gap for the source endpoint only.</p>

                                </div>

                                
                            </li>
                            
                            <li class="param">
                                
                                    <code class="param-name optional">[targetGap]</code>
                                    <span class="type">Integer</span>
                                    <span class="flag optional" title="This parameter is optional.">optional</span>
                                

                                <div class="param-description">
                                    <p>Optional gap for the target endpoint only.</p>

                                </div>

                                
                            </li>
                            
                        </ul>
                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

    </div>


<div id="classdocs" class="tabview">
    <ul class="api-class-tabs">
        <li class="api-class-tab index"><a href="#index">Index</a></li>

        
        
        
        
    </ul>

    <div>
        <div id="index" class="api-class-tabpanel index">
            <h2 class="off-left">Item Index</h2>

            

            

            

            
        </div>

        

        

        

        
    </div>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>