Wick.Layer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Class: Layer</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: Layer</h1>

    
<section>

<header>
    
        <h2><span class="attribs"><span class="type-signature"></span></span>
            <span class="ancestors"><a href="global.html#Wick">Wick</a>.</span>Layer<span class="signature">(locked, hideen)</span><span class="type-signature"></span></h2>
        
            <div class="class-description">Represents a Wick Layer.</div>
        
    
</header>

<article>
    <div class="container-overview">
    
        
    <h2>Constructor</h2>
    

    <h4 class="name" id="Layer"><span class="type-signature"></span>new Layer<span class="signature">(locked, hideen)</span><span class="type-signature"></span></h4>
    

<div class="description">
    Called when creating a Wick Layer.
</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>locked</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            </td>

            
            <td class="description last">Is the layer locked?</td>
        </tr>

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

            <td class="type">
            
                
<span class="param-type">boolean</span>


            </td>

            
            <td class="description last">Is the layer hidden?</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

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

</dl>


    </div>

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

        
<h4 class="name" id="activeFrame"><span class="type-signature"></span>activeFrame<span class="type-signature"> :<a href="Wick.Frame.html">Wick.Frame</a></span></h4>


<div class="description">
    The active frame on the layer.
</div>


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


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line107">line 107</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="frames"><span class="type-signature"></span>frames<span class="type-signature"> :Array.&lt;<a href="Wick.Frame.html">Wick.Frame</a>></span></h4>


<div class="description">
    The frames belonging to this layer.
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">Array.&lt;<a href="Wick.Frame.html">Wick.Frame</a>></span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line62">line 62</a>
    </li></ul></dd>
    

</dl>


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


<div class="description">
    The order of the Layer in the timeline.
</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="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line70">line 70</a>
    </li></ul></dd>
    

</dl>


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


<div class="description">
    True if this layer is the active layer in its timeline.
</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="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line85">line 85</a>
    </li></ul></dd>
    

</dl>


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


<div class="description">
    The length of the layer in frames.
</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="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line93">line 93</a>
    </li></ul></dd>
    

</dl>


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

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

<div class="description">
    Set this layer to be the active layer in its timeline.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line77">line 77</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="addFrame"><span class="type-signature"></span>addFrame<span class="signature">(frame)</span><span class="type-signature"></span></h4>
    

<div class="description">
    Adds a frame to the layer.
</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>frame</code></td>
            

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


            </td>

            
            <td class="description last">The frame to add to the Layer.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line131">line 131</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="addTween"><span class="type-signature"></span>addTween<span class="signature">(tween)</span><span class="type-signature"></span></h4>
    

<div class="description">
    Adds a tween to the active frame of this layer (if one exists).
</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>tween</code></td>
            

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


            </td>

            
            <td class="description last">the tween to add</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line141">line 141</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="findGaps"><span class="type-signature"></span>findGaps<span class="signature">()</span><span class="type-signature"> &rarr; {Array.&lt;Object>}</span></h4>
    

<div class="description">
    Generate a list of positions where there is empty space between frames.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line303">line 303</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    An array of objects with start/end positions describing gaps.
</div>


<dl>
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">Array.&lt;Object></span>


    </dd>
</dl>

    
    <h4 class="name" id="getFrameAtPlayheadPosition"><span class="type-signature"></span>getFrameAtPlayheadPosition<span class="signature">(playheadPosition)</span><span class="type-signature"> &rarr; {<a href="Wick.Frame.html">Wick.Frame</a>}</span></h4>
    

<div class="description">
    Gets the frame at a specific playhead position.
</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>playheadPosition</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last">Playhead position to search for frame at.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line186">line 186</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    The frame at the given playheadPosition.
</div>


<dl>
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type"><a href="Wick.Frame.html">Wick.Frame</a></span>


    </dd>
</dl>

    
    <h4 class="name" id="getFramesContainedWithin"><span class="type-signature"></span>getFramesContainedWithin<span class="signature">(playheadPositionStart, playheadPositionEnd)</span><span class="type-signature"> &rarr; {Array.&lt;<a href="Wick.Frame.html">Wick.Frame</a>>}</span></h4>
    

<div class="description">
    Gets all frames in the layer that are contained within the two given playhead positions.
</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>playheadPositionStart</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last">The start of the range to search</td>
        </tr>

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

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last">The end of the range to search</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line210">line 210</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    The frames contained in the given range.
</div>


<dl>
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">Array.&lt;<a href="Wick.Frame.html">Wick.Frame</a>></span>


    </dd>
</dl>

    
    <h4 class="name" id="getFramesInRange"><span class="type-signature"></span>getFramesInRange<span class="signature">(playheadPositionStart, playheadPositionEnd)</span><span class="type-signature"> &rarr; {Array.&lt;<a href="Wick.Frame.html">Wick.Frame</a>>}</span></h4>
    

<div class="description">
    Gets all frames in the layer that are between the two given playhead positions.
</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>playheadPositionStart</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last">The start of the range to search</td>
        </tr>

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

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last">The end of the range to search</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line198">line 198</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    The frames in the given range.
</div>


<dl>
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">Array.&lt;<a href="Wick.Frame.html">Wick.Frame</a>></span>


    </dd>
</dl>

    
    <h4 class="name" id="insertBlankFrame"><span class="type-signature"></span>insertBlankFrame<span class="signature">(playheadPosition)</span><span class="type-signature"></span></h4>
    

<div class="description">
    Adds a frame to the layer. If there is an existing frame where the new frame is
inserted, then the existing frame will be cut, and the new frame will fill the
gap created by that cut.
</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>playheadPosition</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last">Where to add the blank frame.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line151">line 151</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="move"><span class="type-signature"></span>move<span class="signature">(index)</span><span class="type-signature"></span></h4>
    

<div class="description">
    Moves this layer to a different position, inserting it before/after other layers if needed.
</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>index</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last">the new position to move the layer to.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line116">line 116</a>
    </li></ul></dd>
    

</dl>


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

<div class="description">
    Remove this layer from its timeline.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line123">line 123</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="removeFrame"><span class="type-signature"></span>removeFrame<span class="signature">(frame)</span><span class="type-signature"></span></h4>
    

<div class="description">
    Removes a frame from the Layer.
</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>frame</code></td>
            

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


            </td>

            
            <td class="description last">Frame to remove.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line176">line 176</a>
    </li></ul></dd>
    

</dl>


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

<div class="description">
    Prevents gaps between frames by extending frames to fill empty space between themselves.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line263">line 263</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="resolveOverlap"><span class="type-signature"></span>resolveOverlap<span class="signature">(newOrModifiedFrames)</span><span class="type-signature"></span></h4>
    

<div class="description">
    Prevents frames from overlapping each other by removing pieces of frames that are touching.
</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>newOrModifiedFrames</code></td>
            

            <td class="type">
            
                
<span class="param-type">Array.&lt;<a href="Wick.Frame.html">Wick.Frame</a>></span>


            </td>

            
            <td class="description last">the frames that should take precedence when determining which frames should get "eaten".</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="base_Layer.js.html">base/Layer.js</a>, <a href="base_Layer.js.html#line220">line 220</a>
    </li></ul></dd>
    

</dl>


</article>

</section>


</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BuiltinAssets.html">BuiltinAssets</a></li><li><a href="GlobalAPI.html">GlobalAPI</a></li><li><a href="paper.SelectionGUI.html">SelectionGUI</a></li><li><a href="paper-paper.Selection.html">Selection</a></li><li><a href="SelectionWidget.html">SelectionWidget</a></li><li><a href="Wick.AutoSave.html">AutoSave</a></li><li><a href="Wick.Base.html">Base</a></li><li><a href="Wick.Button.html">Button</a></li><li><a href="Wick.Clip.html">Clip</a></li><li><a href="Wick.Clipboard.html">Clipboard</a></li><li><a href="Wick.FileCache.html">FileCache</a></li><li><a href="Wick.Frame.html">Frame</a></li><li><a href="Wick.GUIElement.Project.html">Project</a></li><li><a href="Wick.GUIElement.Timeline.html">Timeline</a></li><li><a href="Wick.GUIElement-Wick.GUIElement.Breadcrumbs.html">Breadcrumbs</a></li><li><a href="Wick.GUIElement-Wick.GUIElement.Button.html">Button</a></li><li><a href="Wick.History.html">History</a></li><li><a href="Wick.HTMLExport.html">HTMLExport</a></li><li><a href="Wick.HTMLPreview.html">HTMLPreview</a></li><li><a href="Wick.ImageSequence.html">ImageSequence</a></li><li><a href="Wick.Layer.html">Layer</a></li><li><a href="Wick.Path.html">Path</a></li><li><a href="Wick.Project.html">Project</a></li><li><a href="Wick.Selection.html">Selection</a></li><li><a href="Wick.Tickable.html">Tickable</a></li><li><a href="Wick.Timeline.html">Timeline</a></li><li><a href="Wick.Tools-Wick.Tools.Brush.html">Brush</a></li><li><a href="Wick.Tools-Wick.Tools.Cursor.html">Cursor</a></li><li><a href="Wick.Tools-Wick.Tools.Ellipse.html">Ellipse</a></li><li><a href="Wick.Tools-Wick.Tools.Eraser.html">Eraser</a></li><li><a href="Wick.Tools-Wick.Tools.Eyedropper.html">Eyedropper</a></li><li><a href="Wick.Tools-Wick.Tools.FillBucket.html">FillBucket</a></li><li><a href="Wick.Tools-Wick.Tools.Interact.html">Interact</a></li><li><a href="Wick.Tools-Wick.Tools.Line.html">Line</a></li><li><a href="Wick.Tools-Wick.Tools.None.html">None</a></li><li><a href="Wick.Tools-Wick.Tools.Pan.html">Pan</a></li><li><a href="Wick.Tools-Wick.Tools.Pencil.html">Pencil</a></li><li><a href="Wick.Tools-Wick.Tools.Rectangle.html">Rectangle</a></li><li><a href="Wick.Tools-Wick.Tools.Text.html">Text</a></li><li><a href="Wick.Tools-Wick.Tools.Zoom.html">Zoom</a></li><li><a href="Wick.Transformation.html">Transformation</a></li><li><a href="Wick.Tween.html">Tween</a></li><li><a href="Wick.View-Wick.View.Clip.html">Clip</a></li><li><a href="Wick.View-Wick.View.Frame.html">Frame</a></li><li><a href="Wick.View-Wick.View.Path.html">Path</a></li><li><a href="Wick.View-Wick.View.Selection.html">Selection</a></li><li><a href="Wick.WickFile.html">WickFile</a></li><li><a href="Wick.WickObjectFile.html">WickObjectFile</a></li><li><a href="Wick.ZIPExport.html">ZIPExport</a></li><li><a href="WickObjectCache.html">WickObjectCache</a></li><li><a href="Wick-Wick.Asset.html">Asset</a></li><li><a href="Wick-Wick.AudioTrack.html">AudioTrack</a></li><li><a href="Wick-Wick.ClipAsset.html">ClipAsset</a></li><li><a href="Wick-Wick.Color.html">Color</a></li><li><a href="Wick-Wick.FileAsset.html">FileAsset</a></li><li><a href="Wick-Wick.FontAsset.html">FontAsset</a></li><li><a href="Wick-Wick.GIFAsset.html">GIFAsset</a></li><li><a href="Wick-Wick.GUIElement.html">GUIElement</a></li><li><a href="Wick-Wick.ImageAsset.html">ImageAsset</a></li><li><a href="Wick-Wick.SoundAsset.html">SoundAsset</a></li><li><a href="Wick-Wick.SVGAsset.html">SVGAsset</a></li><li><a href="Wick-Wick.Tool.html">Tool</a></li><li><a href="Wick-Wick.ToolSettings.html">ToolSettings</a></li><li><a href="Wick-Wick.View.html">View</a></li></ul><h3>Global</h3><ul><li><a href="global.html#type">type</a></li><li><a href="global.html#Wick">Wick</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Fri Apr 24 2020 15:26:13 GMT-0400 (Eastern Daylight Time)
</footer>

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