javascript
/
tentone.escher.js
mirror of https://github.com/tentone/escher.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Class: ViewportControls</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Class: ViewportControls</h1>

    
<section>

<header>
    
        <h2><span class="attribs"><span class="type-signature"></span></span>ViewportControls<span class="signature">(viewport)</span><span class="type-signature"></span></h2>
        
    
</header>

<article>
    <div class="container-overview">
    
        
    <h4 class="name" id="ViewportControls"><span class="type-signature"></span>new ViewportControls<span class="signature">(viewport)</span><span class="type-signature"></span></h4>
    

<div class="description">
    Viewport controls are used to allow the user to control the viewport.

The user controls the viewport using pointer input (e.g. mouse, touchscreen)
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>viewport</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Viewport.html">Viewport</a></span>


            </td>

            
            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line13">line 13</a>
    </li></ul></dd>
    

</dl>


    </div>

    
        <h3 class="subsection-title">Members</h3>

        
<h4 class="name" id=".RECENTER_CANVAS"><span class="type-signature">(static) </span>RECENTER_CANVAS<span class="type-signature"> :number</span></h4>


<div class="description">
    Recenter the viewport automatically to the canvas.

This will ensure that rotation and scaling will not cause the viewport to move around.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">number</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line102">line 102</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id=".RECENTER_NONE"><span class="type-signature">(static) </span>RECENTER_NONE<span class="type-signature"> :number</span></h4>


<div class="description">
    Viewport is not automatically recentered.

The center point can be set manually by the developer.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">number</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line93">line 93</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id=".RECENTER_POINTER"><span class="type-signature">(static) </span>RECENTER_POINTER<span class="type-signature"> :number</span></h4>


<div class="description">
    Viewport should automatically cente ron the pointer position.

The viewport will simulataniously move to the pointer position while scalling.

For some application its easier to focus the target if the viewport moves to the pointer location while scalling.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">number</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line113">line 113</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="allowRotation"><span class="type-signature"></span>allowRotation<span class="type-signature"> :boolean</span></h4>


<div class="description">
    If true allows the viewport to be rotated.

Rotation is performed by holding the RIGHT and LEFT pointer buttons and rotating around the initial point.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">boolean</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line63">line 63</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="allowScale"><span class="type-signature"></span>allowScale<span class="type-signature"> :boolean</span></h4>


<div class="description">
    Is set to true allow the viewport to be scalled.

Scaling is performed using the pointer scroll.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">boolean</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line45">line 45</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="dragButton"><span class="type-signature"></span>dragButton<span class="type-signature"> :number</span></h4>


<div class="description">
    Button used to drag and viewport around.

On touch enabled devices the touch event is represented as a LEFT button.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">number</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line29">line 29</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="recenterViewport"><span class="type-signature"></span>recenterViewport<span class="type-signature"> :number</span></h4>


<div class="description">
    Flag to indicate if the viewport should automatically be recentered.

This will cause the viewport center property to be automatically set based on an heuristic defined by the user.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">number</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line54">line 54</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="rotateButton"><span class="type-signature"></span>rotateButton<span class="type-signature"> :number</span></h4>


<div class="description">
    Button used to rotate the viewport.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">number</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line36">line 36</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="rotationInitial"><span class="type-signature"></span>rotationInitial<span class="type-signature"> :number</span></h4>


<div class="description">
    Initial rotation of the viewport.

Is set to the current rotation of the viewport when the rotation starts.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">number</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line83">line 83</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="rotationPoint"><span class="type-signature"></span>rotationPoint<span class="type-signature"> :<a href="Vector2.html">Vector2</a>|null</span></h4>


<div class="description">
    Value of the initial point of rotation if the viewport is being rotated.

Is the value of the pointer position when the rotation starts.

Is set to null when the viewport is not being rotated.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><a href="Vector2.html">Vector2</a></span>
|

<span class="param-type">null</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line74">line 74</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="viewport"><span class="type-signature"></span>viewport<span class="type-signature"> :<a href="Viewport.html">Viewport</a></span></h4>


<div class="description">
    Viewport being controlled by this object.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><a href="Viewport.html">Viewport</a></span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line20">line 20</a>
    </li></ul></dd>
    

</dl>


        <h3 class="subsection-title">Methods</h3>

        
    <h4 class="name" id="update"><span class="type-signature"></span>update<span class="signature">(pointer)</span><span class="type-signature"></span></h4>
    

<div class="description">
    Update the viewport controls using the pointer object.

Should be called every frame before rendering.
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>pointer</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Pointer.html">Pointer</a></span>


            </td>

            
            <td class="description last">Pointer used to control the viewport.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line122">line 122</a>
    </li></ul></dd>
    

</dl>


</article>

</section>


</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="AnimationTimer.html">AnimationTimer</a></li><li><a href="BarGraph.html">BarGraph</a></li><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="ColorStyle.html">ColorStyle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Gauge.html">Gauge</a></li><li><a href="GradientColorStop.html">GradientColorStop</a></li><li><a href="GradientStyle.html">GradientStyle</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="LinearGradientStyle.html">LinearGradientStyle</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Path.html">Path</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="PatternStyle.html">PatternStyle</a></li><li><a href="PieChart.html">PieChart</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="RadialGradientStyle.html">RadialGradientStyle</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="ScatterGraph.html">ScatterGraph</a></li><li><a href="Style.html">Style</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sat Sep 17 2022 14:24:36 GMT+0100 (Hora de verão da Europa Ocidental)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>