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


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

    
<section>

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

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

<div class="description">
    Base object class, implements all the object positioning and scalling features.

Stores all the base properties shared between all objects as the position, transformation properties, children etc.

Object2D should be used as a group to store all the other objects drawn.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line16">line 16</a>
    </li></ul></dd>
    

</dl>


    </div>

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

        
<h4 class="name" id="beingDragged"><span class="type-signature"></span>beingDragged<span class="type-signature"></span></h4>


<div class="description">
    Flag to indicate if the object is currently being dragged.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line142">line 142</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="children"><span class="type-signature"></span>children<span class="type-signature"></span></h4>


<div class="description">
    List of children objects attached to the object.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line26">line 26</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="draggable"><span class="type-signature"></span>draggable<span class="type-signature"></span></h4>


<div class="description">
    Indicates if its possible to drag the object around.

If true the onPointerDrag callback is used to update the state of the object.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line108">line 108</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="globalMatrix"><span class="type-signature"></span>globalMatrix<span class="type-signature"></span></h4>


<div class="description">
    Global transformation matrix multiplied by the parent matrix.

Used to transform the object before projecting into screen coordinates.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line82">line 82</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="ignoreViewport"><span class="type-signature"></span>ignoreViewport<span class="type-signature"></span></h4>


<div class="description">
    Flag to indicate wheter this objet ignores the viewport transformation.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line120">line 120</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="inverseGlobalMatrix"><span class="type-signature"></span>inverseGlobalMatrix<span class="type-signature"></span></h4>


<div class="description">
    Inverse of the global matrix.

Used to convert pointer input points into object coordinates.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line89">line 89</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="layer"><span class="type-signature"></span>layer<span class="type-signature"></span></h4>


<div class="description">
    Layer of this object, objects are sorted by layer value.

Lower layer value is draw first.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line70">line 70</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="level"><span class="type-signature"></span>level<span class="type-signature"></span></h4>


<div class="description">
    Depth level in the object tree, objects with higher depth are drawn on top.

The layer value is considered first.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line38">line 38</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="masks"><span class="type-signature"></span>masks<span class="type-signature"></span></h4>


<div class="description">
    Masks being applied to this object.

Multiple masks can be used simultaneously.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line96">line 96</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="matrix"><span class="type-signature"></span>matrix<span class="type-signature"></span></h4>


<div class="description">
    Local transformation matrix applied to the object.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line75">line 75</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="matrixNeedsUpdate"><span class="type-signature"></span>matrixNeedsUpdate<span class="type-signature"></span></h4>


<div class="description">
    If true the matrix is updated before rendering the object.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line101">line 101</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="onAdd"><span class="type-signature"></span>onAdd<span class="type-signature"></span></h4>


<div class="description">
    Method called when the object its added to a parent.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line316">line 316</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="onButtonDown"><span class="type-signature"></span>onButtonDown<span class="type-signature"></span></h4>


<div class="description">
    Callback method called when the pointer button is pressed down (single time).

Receives (pointer, viewport) as arguments.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line390">line 390</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="onButtonPressed"><span class="type-signature"></span>onButtonPressed<span class="type-signature"></span></h4>


<div class="description">
    Callback method called while the pointer button is pressed.

Receives (pointer, viewport) as arguments.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line370">line 370</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="onButtonUp"><span class="type-signature"></span>onButtonUp<span class="type-signature"></span></h4>


<div class="description">
    Callback method called when the pointer button is released (single time).

Receives (pointer, viewport) as arguments.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line400">line 400</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="onDoubleClick"><span class="type-signature"></span>onDoubleClick<span class="type-signature"></span></h4>


<div class="description">
    Callback method called while the pointer button is double clicked.

Receives (pointer, viewport) as arguments.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line380">line 380</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="onPointerEnter"><span class="type-signature"></span>onPointerEnter<span class="type-signature"></span></h4>


<div class="description">
    Callback method called when the pointer enters the object.

Receives (pointer, viewport) as arguments.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line340">line 340</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="onPointerLeave"><span class="type-signature"></span>onPointerLeave<span class="type-signature"></span></h4>


<div class="description">
    Callback method called when the was inside of the object and leaves the object.

Receives (pointer, viewport) as arguments.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line350">line 350</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="onPointerOver"><span class="type-signature"></span>onPointerOver<span class="type-signature"></span></h4>


<div class="description">
    Callback method while the pointer is over (inside) of the object.

Receives (pointer, viewport) as arguments.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line360">line 360</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="onRemove"><span class="type-signature"></span>onRemove<span class="type-signature"></span></h4>


<div class="description">
    Method called when the object gets removed from its parent
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line323">line 323</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="onUpdate"><span class="type-signature"></span>onUpdate<span class="type-signature"></span></h4>


<div class="description">
    Callback method called every time before the object is draw into the canvas.

Can be used to run preparation code, move the object, etc.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line330">line 330</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="origin"><span class="type-signature"></span>origin<span class="type-signature"></span></h4>


<div class="description">
    Origin of the object used as point of rotation.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line48">line 48</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="parent"><span class="type-signature"></span>parent<span class="type-signature"></span></h4>


<div class="description">
    Parent object, the object position is affected by its parent position.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line31">line 31</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="pointerEvents"><span class="type-signature"></span>pointerEvents<span class="type-signature"></span></h4>


<div class="description">
    Indicates if this object uses pointer events.

Can be set false to skip the pointer interaction events.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line115">line 115</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="pointerInside"><span class="type-signature"></span>pointerInside<span class="type-signature"></span></h4>


<div class="description">
    Flag indicating if the pointer is inside of the element.

Used to control object event.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line137">line 137</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="position"><span class="type-signature"></span>position<span class="type-signature"></span></h4>


<div class="description">
    Position of the object.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line43">line 43</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="restoreContextState"><span class="type-signature"></span>restoreContextState<span class="type-signature"></span></h4>


<div class="description">
    Flag to indicate if the context of canvas should be restored after render.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line130">line 130</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="rotation"><span class="type-signature"></span>rotation<span class="type-signature"></span></h4>


<div class="description">
    Rotation of the object relative to its center.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line58">line 58</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="saveContextState"><span class="type-signature"></span>saveContextState<span class="type-signature"></span></h4>


<div class="description">
    Flag to indicate if the context of canvas should be saved before render.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line125">line 125</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="scale"><span class="type-signature"></span>scale<span class="type-signature"></span></h4>


<div class="description">
    Scale of the object.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line53">line 53</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="uuid"><span class="type-signature"></span>uuid<span class="type-signature"></span></h4>


<div class="description">
    UUID of the object.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line21">line 21</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="visible"><span class="type-signature"></span>visible<span class="type-signature"></span></h4>


<div class="description">
    Indicates if the object is visible.
</div>


<dl class="details">

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

</dl>


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

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

<div class="description">
    Attach a children to this object.

The object is set as children of this object and the transformations applied to this object are traversed to its children.
</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>object</code></td>
            

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


            </td>

            
            <td class="description last">Object to attach to this object.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line190">line 190</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="draw"><span class="type-signature"></span>draw<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
    

<div class="description">
    Draw the object into the canvas.

Has to be implemented by underlying classes.
</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>context</code></td>
            

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


            </td>

            
            <td class="description last">Canvas 2d drawing context.</td>
        </tr>

    
        <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">Viewport applied to the canvas.</td>
        </tr>

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

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


            </td>

            
            <td class="description last">DOM canvas element where the content is being drawn.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line291">line 291</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="getChildByUUID"><span class="type-signature"></span>getChildByUUID<span class="signature">(uuid)</span><span class="type-signature"> &rarr; {<a href="Object2D.html">Object2D</a>}</span></h4>
    

<div class="description">
    Get a object from its children list by its UUID.
</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>uuid</code></td>
            

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


            </td>

            
            <td class="description last">UUID of the object to get.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line168">line 168</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    The object that has the UUID specified, null if the object was not found.
</div>


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


    </dd>
</dl>

    
    <h4 class="name" id="isInside"><span class="type-signature"></span>isInside<span class="signature">()</span><span class="type-signature"> &rarr; {boolean}</span></h4>
    

<div class="description">
    Check if a point is inside of the object.

Used to update the point events attached to the object.
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line240">line 240</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    True if the point is inside of the object.
</div>


<dl>
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">boolean</span>


    </dd>
</dl>

    
    <h4 class="name" id="onPointerDrag"><span class="type-signature"></span>onPointerDrag<span class="signature">(pointer, viewport, delta)</span><span class="type-signature"></span></h4>
    

<div class="description">
    Callback method while the object is being dragged across the screen.

By default is adds the delta value to the object position (making it follow the mouse movement).

Delta is the movement of the pointer already translated into local object coordinates.

Receives (pointer, viewport, delta) as arguments.
</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 object that receives the user input.</td>
        </tr>

    
        <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">Viewport where the object is drawn.</td>
        </tr>

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

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


            </td>

            
            <td class="description last">Pointer movement in world space.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line306">line 306</a>
    </li></ul></dd>
    

</dl>


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

<div class="description">
    Remove object from the children list.
</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>object</code></td>
            

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


            </td>

            
            <td class="description last">Object to be removed.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line211">line 211</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport)</span><span class="type-signature"></span></h4>
    

<div class="description">
    Apply the transform to the rendering context.

It is assumed that the viewport transform is pre-applied to the context.

Can also be used for pre rendering logic.
</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>context</code></td>
            

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


            </td>

            
            <td class="description last">Canvas 2d drawing context.</td>
        </tr>

    
        <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">Viewport applied to the canvas.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line277">line 277</a>
    </li></ul></dd>
    

</dl>


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

<div class="description">
    Traverse the object tree and run a function for all objects.
</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>callback</code></td>
            

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


            </td>

            
            <td class="description last">Callback function that receives the object as parameter.</td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line150">line 150</a>
    </li></ul></dd>
    

</dl>


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

<div class="description">
    Update the transformation matrix of the object.
</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>context</code></td>
            

            <td class="type">
            
                
<span class="param-type">CanvasContext</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="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line250">line 250</a>
    </li></ul></dd>
    

</dl>


</article>

</section>


</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><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="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</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="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="Renderer.html">Renderer</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>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Tue Jun 25 2019 14:27:21 GMT+0100 (Western European Summer Time)
</footer>

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