@aidinabedi/playcanvas

<!doctype html> <html lang="en"> <head> <title>pc.ElementComponent | PlayCanvas API Reference</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type="image/png" href="images/playcanvas-favicon.png"> <link href="styles/styles.css" rel="stylesheet"> <link href="styles/playcanvas-theme.css" rel="stylesheet"> <script src="scripts/interface.js"></script> <script src="scripts/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> </head> <body> <header> <nav class="header-width"> <a href="/" class="header-title"><img src="images/playcanvas-manual.png"></a> <ul class="header-menu"> <li class="user-manual"><a href="https://developer.playcanvas.com/en/user-manual/">User Manual</a></li> <li class="tutorials"><a href="https://developer.playcanvas.com/en/tutorials">Tutorials</a></li> <li class="forum"><a href="https://forum.playcanvas.com/" target="_blank">Forum</a></li> <li class="api active"><a href="/api/">API Reference</a></li> </ul> </nav> <div class="header-content header-page header-width"> <h1><span class="font-icon"></span>API Reference</h1> <input id="search" class="search" type="text" placeholder="Search"></input> </div> </header> <div class="container content-width"> <nav class="sidebar"> <div class="sidebarFilter"> <input id="filter-input" type="text" placeholder="Filter"> </div> <ul> <li id="nav-pc"><a href="pc.html">pc</a></li> <li id="nav-pc.callbacks"><a href="pc.callbacks.html">pc.callbacks</a></li> <li id="nav-pc.guid"><a href="pc.guid.html">pc.guid</a></li> <li id="nav-pc.math"><a href="pc.math.html">pc.math</a></li> <li id="nav-pc.path"><a href="pc.path.html">pc.path</a></li> <li id="nav-pc.platform"><a href="pc.platform.html">pc.platform</a></li> <li id="nav-pc.script"><a href="pc.script.html">pc.script</a></li> <li id="nav-pc.string"><a href="pc.string.html">pc.string</a></li> <li id="nav-pc.Animation"><a href="pc.Animation.html">Animation</a></li> <li id="nav-pc.AnimationComponent"><a href="pc.AnimationComponent.html">AnimationComponent</a></li> <li id="nav-pc.AnimationComponentSystem"><a href="pc.AnimationComponentSystem.html">AnimationComponentSystem</a></li> <li id="nav-pc.AnimationHandler"><a href="pc.AnimationHandler.html">AnimationHandler</a></li> <li id="nav-pc.AnimCache"><a href="pc.AnimCache.html">AnimCache</a></li> <li id="nav-pc.AnimClip"><a href="pc.AnimClip.html">AnimClip</a></li> <li id="nav-pc.AnimController"><a href="pc.AnimController.html">AnimController</a></li> <li id="nav-pc.AnimCurve"><a href="pc.AnimCurve.html">AnimCurve</a></li> <li id="nav-pc.AnimData"><a href="pc.AnimData.html">AnimData</a></li> <li id="nav-pc.AnimSnapshot"><a href="pc.AnimSnapshot.html">AnimSnapshot</a></li> <li id="nav-pc.AnimTarget"><a href="pc.AnimTarget.html">AnimTarget</a></li> <li id="nav-pc.AnimTrack"><a href="pc.AnimTrack.html">AnimTrack</a></li> <li id="nav-pc.Application"><a href="pc.Application.html">Application</a></li> <li id="nav-pc.Asset"><a href="pc.Asset.html">Asset</a></li> <li id="nav-pc.AssetReference"><a href="pc.AssetReference.html">AssetReference</a></li> <li id="nav-pc.AssetRegistry"><a href="pc.AssetRegistry.html">AssetRegistry</a></li> <li id="nav-pc.AudioHandler"><a href="pc.AudioHandler.html">AudioHandler</a></li> <li id="nav-pc.AudioListenerComponent"><a href="pc.AudioListenerComponent.html">AudioListenerComponent</a></li> <li id="nav-pc.AudioListenerComponentSystem"><a href="pc.AudioListenerComponentSystem.html">AudioListenerComponentSystem</a></li> <li id="nav-pc.BasicMaterial"><a href="pc.BasicMaterial.html">BasicMaterial</a></li> <li id="nav-pc.Batch"><a href="pc.Batch.html">Batch</a></li> <li id="nav-pc.BatchGroup"><a href="pc.BatchGroup.html">BatchGroup</a></li> <li id="nav-pc.BatchManager"><a href="pc.BatchManager.html">BatchManager</a></li> <li id="nav-pc.BoundingBox"><a href="pc.BoundingBox.html">BoundingBox</a></li> <li id="nav-pc.BoundingSphere"><a href="pc.BoundingSphere.html">BoundingSphere</a></li> <li id="nav-pc.ButtonComponent"><a href="pc.ButtonComponent.html">ButtonComponent</a></li> <li id="nav-pc.ButtonComponentSystem"><a href="pc.ButtonComponentSystem.html">ButtonComponentSystem</a></li> <li id="nav-pc.CameraComponent"><a href="pc.CameraComponent.html">CameraComponent</a></li> <li id="nav-pc.CameraComponentSystem"><a href="pc.CameraComponentSystem.html">CameraComponentSystem</a></li> <li id="nav-pc.CollisionComponent"><a href="pc.CollisionComponent.html">CollisionComponent</a></li> <li id="nav-pc.CollisionComponentSystem"><a href="pc.CollisionComponentSystem.html">CollisionComponentSystem</a></li> <li id="nav-pc.Color"><a href="pc.Color.html">Color</a></li> <li id="nav-pc.Component"><a href="pc.Component.html">Component</a></li> <li id="nav-pc.ComponentSystem"><a href="pc.ComponentSystem.html">ComponentSystem</a></li> <li id="nav-pc.ComponentSystemRegistry"><a href="pc.ComponentSystemRegistry.html">ComponentSystemRegistry</a></li> <li id="nav-pc.ContactPoint"><a href="pc.ContactPoint.html">ContactPoint</a></li> <li id="nav-pc.ContactResult"><a href="pc.ContactResult.html">ContactResult</a></li> <li id="nav-pc.ContainerHandler"><a href="pc.ContainerHandler.html">ContainerHandler</a></li> <li id="nav-pc.ContainerResource"><a href="pc.ContainerResource.html">ContainerResource</a></li> <li id="nav-pc.Controller"><a href="pc.Controller.html">Controller</a></li> <li id="nav-pc.CubemapHandler"><a href="pc.CubemapHandler.html">CubemapHandler</a></li> <li id="nav-pc.Curve"><a href="pc.Curve.html">Curve</a></li> <li id="nav-pc.CurveSet"><a href="pc.CurveSet.html">CurveSet</a></li> <li id="nav-pc.ElementComponent"><a href="pc.ElementComponent.html">ElementComponent</a></li> <li id="nav-pc.ElementComponentSystem"><a href="pc.ElementComponentSystem.html">ElementComponentSystem</a></li> <li id="nav-pc.ElementDragHelper"><a href="pc.ElementDragHelper.html">ElementDragHelper</a></li> <li id="nav-pc.ElementInput"><a href="pc.ElementInput.html">ElementInput</a></li> <li id="nav-pc.ElementInputEvent"><a href="pc.ElementInputEvent.html">ElementInputEvent</a></li> <li id="nav-pc.ElementMouseEvent"><a href="pc.ElementMouseEvent.html">ElementMouseEvent</a></li> <li id="nav-pc.ElementTouchEvent"><a href="pc.ElementTouchEvent.html">ElementTouchEvent</a></li> <li id="nav-pc.Entity"><a href="pc.Entity.html">Entity</a></li> <li id="nav-pc.EventHandler"><a href="pc.EventHandler.html">EventHandler</a></li> <li id="nav-pc.Font"><a href="pc.Font.html">Font</a></li> <li id="nav-pc.FontHandler"><a href="pc.FontHandler.html">FontHandler</a></li> <li id="nav-pc.ForwardRenderer"><a href="pc.ForwardRenderer.html">ForwardRenderer</a></li> <li id="nav-pc.Frustum"><a href="pc.Frustum.html">Frustum</a></li> <li id="nav-pc.GamePads"><a href="pc.GamePads.html">GamePads</a></li> <li id="nav-pc.GraphicsDevice"><a href="pc.GraphicsDevice.html">GraphicsDevice</a></li> <li id="nav-pc.GraphNode"><a href="pc.GraphNode.html">GraphNode</a></li> <li id="nav-pc.Http"><a href="pc.Http.html">Http</a></li> <li id="nav-pc.I18n"><a href="pc.I18n.html">I18n</a></li> <li id="nav-pc.IndexBuffer"><a href="pc.IndexBuffer.html">IndexBuffer</a></li> <li id="nav-pc.Keyboard"><a href="pc.Keyboard.html">Keyboard</a></li> <li id="nav-pc.KeyboardEvent"><a href="pc.KeyboardEvent.html">KeyboardEvent</a></li> <li id="nav-pc.Layer"><a href="pc.Layer.html">Layer</a></li> <li id="nav-pc.LayerComposition"><a href="pc.LayerComposition.html">LayerComposition</a></li> <li id="nav-pc.LayoutChildComponent"><a href="pc.LayoutChildComponent.html">LayoutChildComponent</a></li> <li id="nav-pc.LayoutChildComponentSystem"><a href="pc.LayoutChildComponentSystem.html">LayoutChildComponentSystem</a></li> <li id="nav-pc.LayoutGroupComponent"><a href="pc.LayoutGroupComponent.html">LayoutGroupComponent</a></li> <li id="nav-pc.LayoutGroupComponentSystem"><a href="pc.LayoutGroupComponentSystem.html">LayoutGroupComponentSystem</a></li> <li id="nav-pc.LightComponent"><a href="pc.LightComponent.html">LightComponent</a></li> <li id="nav-pc.LightComponentSystem"><a href="pc.LightComponentSystem.html">LightComponentSystem</a></li> <li id="nav-pc.Lightmapper"><a href="pc.Lightmapper.html">Lightmapper</a></li> <li id="nav-pc.Mat3"><a href="pc.Mat3.html">Mat3</a></li> <li id="nav-pc.Mat4"><a href="pc.Mat4.html">Mat4</a></li> <li id="nav-pc.Material"><a href="pc.Material.html">Material</a></li> <li id="nav-pc.MaterialHandler"><a href="pc.MaterialHandler.html">MaterialHandler</a></li> <li id="nav-pc.Mesh"><a href="pc.Mesh.html">Mesh</a></li> <li id="nav-pc.MeshInstance"><a href="pc.MeshInstance.html">MeshInstance</a></li> <li id="nav-pc.Model"><a href="pc.Model.html">Model</a></li> <li id="nav-pc.ModelComponent"><a href="pc.ModelComponent.html">ModelComponent</a></li> <li id="nav-pc.ModelComponentSystem"><a href="pc.ModelComponentSystem.html">ModelComponentSystem</a></li> <li id="nav-pc.ModelHandler"><a href="pc.ModelHandler.html">ModelHandler</a></li> <li id="nav-pc.Morph"><a href="pc.Morph.html">Morph</a></li> <li id="nav-pc.MorphInstance"><a href="pc.MorphInstance.html">MorphInstance</a></li> <li id="nav-pc.MorphTarget"><a href="pc.MorphTarget.html">MorphTarget</a></li> <li id="nav-pc.Mouse"><a href="pc.Mouse.html">Mouse</a></li> <li id="nav-pc.MouseEvent"><a href="pc.MouseEvent.html">MouseEvent</a></li> <li id="nav-pc.Node"><a href="pc.Node.html">Node</a></li> <li id="nav-pc.OrientedBox"><a href="pc.OrientedBox.html">OrientedBox</a></li> <li id="nav-pc.ParticleSystemComponent"><a href="pc.ParticleSystemComponent.html">ParticleSystemComponent</a></li> <li id="nav-pc.ParticleSystemComponentSystem"><a href="pc.ParticleSystemComponentSystem.html">ParticleSystemComponentSystem</a></li> <li id="nav-pc.Picker"><a href="pc.Picker.html">Picker</a></li> <li id="nav-pc.PostEffect"><a href="pc.PostEffect.html">PostEffect</a></li> <li id="nav-pc.PostEffectQueue"><a href="pc.PostEffectQueue.html">PostEffectQueue</a></li> <li id="nav-pc.Quat"><a href="pc.Quat.html">Quat</a></li> <li id="nav-pc.Ray"><a href="pc.Ray.html">Ray</a></li> <li id="nav-pc.RaycastResult"><a href="pc.RaycastResult.html">RaycastResult</a></li> <li id="nav-pc.RenderTarget"><a href="pc.RenderTarget.html">RenderTarget</a></li> <li id="nav-pc.ResourceHandler"><a href="pc.ResourceHandler.html">ResourceHandler</a></li> <li id="nav-pc.ResourceLoader"><a href="pc.ResourceLoader.html">ResourceLoader</a></li> <li id="nav-pc.RigidBodyComponent"><a href="pc.RigidBodyComponent.html">RigidBodyComponent</a></li> <li id="nav-pc.RigidBodyComponentSystem"><a href="pc.RigidBodyComponentSystem.html">RigidBodyComponentSystem</a></li> <li id="nav-pc.Scene"><a href="pc.Scene.html">Scene</a></li> <li id="nav-pc.SceneHandler"><a href="pc.SceneHandler.html">SceneHandler</a></li> <li id="nav-pc.ScopeId"><a href="pc.ScopeId.html">ScopeId</a></li> <li id="nav-pc.ScopeSpace"><a href="pc.ScopeSpace.html">ScopeSpace</a></li> <li id="nav-pc.ScreenComponent"><a href="pc.ScreenComponent.html">ScreenComponent</a></li> <li id="nav-pc.ScreenComponentSystem"><a href="pc.ScreenComponentSystem.html">ScreenComponentSystem</a></li> <li id="nav-pc.ScriptAttributes"><a href="pc.ScriptAttributes.html">ScriptAttributes</a></li> <li id="nav-pc.ScriptComponent"><a href="pc.ScriptComponent.html">ScriptComponent</a></li> <li id="nav-pc.ScriptComponentSystem"><a href="pc.ScriptComponentSystem.html">ScriptComponentSystem</a></li> <li id="nav-pc.ScriptHandler"><a href="pc.ScriptHandler.html">ScriptHandler</a></li> <li id="nav-pc.ScriptRegistry"><a href="pc.ScriptRegistry.html">ScriptRegistry</a></li> <li id="nav-pc.ScriptType"><a href="pc.ScriptType.html">ScriptType</a></li> <li id="nav-pc.ScrollbarComponent"><a href="pc.ScrollbarComponent.html">ScrollbarComponent</a></li> <li id="nav-pc.ScrollbarComponentSystem"><a href="pc.ScrollbarComponentSystem.html">ScrollbarComponentSystem</a></li> <li id="nav-pc.ScrollViewComponent"><a href="pc.ScrollViewComponent.html">ScrollViewComponent</a></li> <li id="nav-pc.ScrollViewComponentSystem"><a href="pc.ScrollViewComponentSystem.html">ScrollViewComponentSystem</a></li> <li id="nav-pc.Shader"><a href="pc.Shader.html">Shader</a></li> <li id="nav-pc.SingleContactResult"><a href="pc.SingleContactResult.html">SingleContactResult</a></li> <li id="nav-pc.Skeleton"><a href="pc.Skeleton.html">Skeleton</a></li> <li id="nav-pc.Skin"><a href="pc.Skin.html">Skin</a></li> <li id="nav-pc.SkinInstance"><a href="pc.SkinInstance.html">SkinInstance</a></li> <li id="nav-pc.Sound"><a href="pc.Sound.html">Sound</a></li> <li id="nav-pc.SoundComponent"><a href="pc.SoundComponent.html">SoundComponent</a></li> <li id="nav-pc.SoundComponentSystem"><a href="pc.SoundComponentSystem.html">SoundComponentSystem</a></li> <li id="nav-pc.SoundInstance"><a href="pc.SoundInstance.html">SoundInstance</a></li> <li id="nav-pc.SoundInstance3d"><a href="pc.SoundInstance3d.html">SoundInstance3d</a></li> <li id="nav-pc.SoundManager"><a href="pc.SoundManager.html">SoundManager</a></li> <li id="nav-pc.SoundSlot"><a href="pc.SoundSlot.html">SoundSlot</a></li> <li id="nav-pc.Sprite"><a href="pc.Sprite.html">Sprite</a></li> <li id="nav-pc.SpriteAnimationClip"><a href="pc.SpriteAnimationClip.html">SpriteAnimationClip</a></li> <li id="nav-pc.SpriteComponent"><a href="pc.SpriteComponent.html">SpriteComponent</a></li> <li id="nav-pc.SpriteComponentSystem"><a href="pc.SpriteComponentSystem.html">SpriteComponentSystem</a></li> <li id="nav-pc.SpriteHandler"><a href="pc.SpriteHandler.html">SpriteHandler</a></li> <li id="nav-pc.StandardMaterial"><a href="pc.StandardMaterial.html">StandardMaterial</a></li> <li id="nav-pc.StencilParameters"><a href="pc.StencilParameters.html">StencilParameters</a></li> <li id="nav-pc.Tags"><a href="pc.Tags.html">Tags</a></li> <li id="nav-pc.Texture"><a href="pc.Texture.html">Texture</a></li> <li id="nav-pc.TextureAtlas"><a href="pc.TextureAtlas.html">TextureAtlas</a></li> <li id="nav-pc.TextureAtlasHandler"><a href="pc.TextureAtlasHandler.html">TextureAtlasHandler</a></li> <li id="nav-pc.TextureHandler"><a href="pc.TextureHandler.html">TextureHandler</a></li> <li id="nav-pc.Touch"><a href="pc.Touch.html">Touch</a></li> <li id="nav-pc.TouchDevice"><a href="pc.TouchDevice.html">TouchDevice</a></li> <li id="nav-pc.TouchEvent"><a href="pc.TouchEvent.html">TouchEvent</a></li> <li id="nav-pc.TransformFeedback"><a href="pc.TransformFeedback.html">TransformFeedback</a></li> <li id="nav-pc.Vec2"><a href="pc.Vec2.html">Vec2</a></li> <li id="nav-pc.Vec3"><a href="pc.Vec3.html">Vec3</a></li> <li id="nav-pc.Vec4"><a href="pc.Vec4.html">Vec4</a></li> <li id="nav-pc.VertexAttributeDescription"><a href="pc.VertexAttributeDescription.html">VertexAttributeDescription</a></li> <li id="nav-pc.VertexAttributeElement"><a href="pc.VertexAttributeElement.html">VertexAttributeElement</a></li> <li id="nav-pc.VertexBuffer"><a href="pc.VertexBuffer.html">VertexBuffer</a></li> <li id="nav-pc.VertexFormat"><a href="pc.VertexFormat.html">VertexFormat</a></li> <li id="nav-pc.VertexIterator"><a href="pc.VertexIterator.html">VertexIterator</a></li> <li id="nav-pc.VertexIteratorAccessor"><a href="pc.VertexIteratorAccessor.html">VertexIteratorAccessor</a></li> <li id="nav-pc.XrInput"><a href="pc.XrInput.html">XrInput</a></li> <li id="nav-pc.XrInputSource"><a href="pc.XrInputSource.html">XrInputSource</a></li> <li id="nav-pc.XrManager"><a href="pc.XrManager.html">XrManager</a></li> </ul> </nav> <div class='sidebarToggle'><span></span>Class List</div> <main class="cls"> <h1>pc.ElementComponent</h1> <p class="extends">Extends: <a href="pc.Component.html">pc.Component</a></p> <p><p>Enables an Entity to be positioned using anchors and screen coordinates under a <a href="pc.ScreenComponent.html">pc.ScreenComponent</a> or under other ElementComponents. Depending on its type it can be used to render images, text or just as a layout mechanism to build 2D and 3D user interfaces. If the component is a descendant of a <a href="pc.ScreenComponent.html">pc.ScreenComponent</a>, then the Entity's pc.Entity.setLocalPosition is in the <a href="pc.ScreenComponent.html">pc.ScreenComponent</a>'s coordinate system.</p></p>  <h1>Summary</h1>     <h3>Properties</h3> <table class="properties"> <tr> <td><a href="#alignment">alignment</a></td><td><p>The horizontal and vertical alignment of the text.</td> </tr> <tr> <td><a href="#anchor">anchor</a></td><td><p>Specifies where the left, bottom, right and top edges of the component are anchored relative to its parent.</td> </tr> <tr> <td><a href="#autoFitHeight">autoFitHeight</a></td><td><p>When true the font size and line height will scale so that the text fits inside the height of the Element.</td> </tr> <tr> <td><a href="#autoFitWidth">autoFitWidth</a></td><td><p>When true the font size and line height will scale so that the text fits inside the width of the Element.</td> </tr> <tr> <td><a href="#autoHeight">autoHeight</a></td><td><p>Automatically set the height of the component to be the same as the textHeight.</td> </tr> <tr> <td><a href="#autoWidth">autoWidth</a></td><td><p>Automatically set the width of the component to be the same as the textWidth.</td> </tr> <tr> <td><a href="#batchGroupId">batchGroupId</a></td><td><p>Assign element to a specific batch group (see <a href="pc.BatchGroup.html">pc.BatchGroup</a>).</td> </tr> <tr> <td><a href="#bottom">bottom</a></td><td><p>The distance from the bottom edge of the anchor.</td> </tr> <tr> <td><a href="#calculatedHeight">calculatedHeight</a></td><td><p>The height at which the element will be rendered.</td> </tr> <tr> <td><a href="#calculatedWidth">calculatedWidth</a></td><td><p>The width at which the element will be rendered.</td> </tr> <tr> <td><a href="#canvasCorners">canvasCorners</a></td><td><p>An array of 4 <a href="pc.Vec2.html">pc.Vec2</a>s that represent the bottom left, bottom right, top right and top left corners of the component in canvas pixels.</td> </tr> <tr> <td><a href="#color">color</a></td><td><p>The color of the image for <a href="pc.html#ELEMENTTYPE_IMAGE">pc.ELEMENTTYPE_IMAGE</a> types or the color of the text for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</td> </tr> <tr> <td><a href="#drawOrder">drawOrder</a></td><td><p>The draw order of the component.</td> </tr> <tr> <td><a href="#enableMarkup">enableMarkup</a></td><td><p>Flag for enabling markup processing.</td> </tr> <tr> <td><a href="#font">font</a></td><td><p>The font used for rendering the text.</td> </tr> <tr> <td><a href="#fontAsset">fontAsset</a></td><td><p>The id of the font asset used for rendering the text.</td> </tr> <tr> <td><a href="#fontSize">fontSize</a></td><td><p>The size of the font.</td> </tr> <tr> <td><a href="#height">height</a></td><td><p>The height of the element as set in the editor.</td> </tr> <tr> <td><a href="#key">key</a></td><td><p>The localization key to use to get the localized text from <a href="pc.Application.html#i18n">pc.Application#i18n</a>.</td> </tr> <tr> <td><a href="#layers">layers</a></td><td><p>An array of layer IDs (pc.Layer#id) to which this element should belong.</td> </tr> <tr> <td><a href="#left">left</a></td><td><p>The distance from the left edge of the anchor.</td> </tr> <tr> <td><a href="#lineHeight">lineHeight</a></td><td><p>The height of each line of text.</td> </tr> <tr> <td><a href="#margin">margin</a></td><td><p>The distance from the left, bottom, right and top edges of the anchor.</td> </tr> <tr> <td><a href="#material">material</a></td><td><p>The material to use when rendering an image.</td> </tr> <tr> <td><a href="#materialAsset">materialAsset</a></td><td><p>The id of the material asset to use when rendering an image.</td> </tr> <tr> <td><a href="#maxFontSize">maxFontSize</a></td><td><p>The maximum size that the font can scale to when autoFitWidth or autoFitHeight are true.</td> </tr> <tr> <td><a href="#maxLines">maxLines</a></td><td><p>The maximum number of lines that the Element can wrap to.</td> </tr> <tr> <td><a href="#minFontSize">minFontSize</a></td><td><p>The minimum size that the font can scale to when autoFitWidth or autoFitHeight are true.</td> </tr> <tr> <td><a href="#opacity">opacity</a></td><td><p>The opacity of the image for <a href="pc.html#ELEMENTTYPE_IMAGE">pc.ELEMENTTYPE_IMAGE</a> types or the text for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</td> </tr> <tr> <td><a href="#outlineColor">outlineColor</a></td><td><p>The text outline effect color and opacity.</td> </tr> <tr> <td><a href="#outlineThickness">outlineThickness</a></td><td><p>The width of the text outline effect.</td> </tr> <tr> <td><a href="#pivot">pivot</a></td><td><p>The position of the pivot of the component relative to its anchor.</td> </tr> <tr> <td><a href="#pixelsPerUnit">pixelsPerUnit</a></td><td><p>The number of pixels that map to one PlayCanvas unit.</td> </tr> <tr> <td><a href="#rangeEnd">rangeEnd</a></td><td><p>Index of the last character to render.</td> </tr> <tr> <td><a href="#rangeStart">rangeStart</a></td><td><p>Index of the first character to render.</td> </tr> <tr> <td><a href="#rect">rect</a></td><td><p>Specifies which region of the texture to use in order to render an image.</td> </tr> <tr> <td><a href="#right">right</a></td><td><p>The distance from the right edge of the anchor.</td> </tr> <tr> <td><a href="#rtlReorder">rtlReorder</a></td><td><p>Reorder the text for RTL languages using a function registered by <code>app.</td> </tr> <tr> <td><a href="#screen">screen</a></td><td><p>The Entity with a <a href="pc.ScreenComponent.html">pc.ScreenComponent</a> that this component belongs to.</td> </tr> <tr> <td><a href="#screenCorners">screenCorners</a></td><td><p>An array of 4 <a href="pc.Vec3.html">pc.Vec3</a>s that represent the bottom left, bottom right, top right and top left corners of the component relative to its parent <a href="pc.ScreenComponent.html">pc.ScreenComponent</a>.</td> </tr> <tr> <td><a href="#shadowColor">shadowColor</a></td><td><p>The text shadow effect color and opacity.</td> </tr> <tr> <td><a href="#shadowOffset">shadowOffset</a></td><td><p>The text shadow effect shift amount from original text.</td> </tr> <tr> <td><a href="#spacing">spacing</a></td><td><p>The spacing between the letters of the text.</td> </tr> <tr> <td><a href="#sprite">sprite</a></td><td><p>The sprite to render.</td> </tr> <tr> <td><a href="#spriteAsset">spriteAsset</a></td><td><p>The id of the sprite asset to render.</td> </tr> <tr> <td><a href="#spriteFrame">spriteFrame</a></td><td><p>The frame of the sprite to render.</td> </tr> <tr> <td><a href="#text">text</a></td><td><p>The text to render.</td> </tr> <tr> <td><a href="#textHeight">textHeight</a></td><td><p>The height of the text rendered by the component.</td> </tr> <tr> <td><a href="#textWidth">textWidth</a></td><td><p>The width of the text rendered by the component.</td> </tr> <tr> <td><a href="#texture">texture</a></td><td><p>The texture to render.</td> </tr> <tr> <td><a href="#textureAsset">textureAsset</a></td><td><p>The id of the texture asset to render.</td> </tr> <tr> <td><a href="#top">top</a></td><td><p>The distance from the top edge of the anchor.</td> </tr> <tr> <td><a href="#type">type</a></td><td><p>The type of the ElementComponent.</td> </tr> <tr> <td><a href="#unicodeConverter">unicodeConverter</a></td><td><p>Convert unicode characters using a function registered by <code>app.</td> </tr> <tr> <td><a href="#useInput">useInput</a></td><td><p>If true then the component will receive Mouse or Touch input events.</td> </tr> <tr> <td><a href="#width">width</a></td><td><p>The width of the element as set in the editor.</td> </tr> <tr> <td><a href="#worldCorners">worldCorners</a></td><td><p>An array of 4 <a href="pc.Vec3.html">pc.Vec3</a>s that represent the bottom left, bottom right, top right and top left corners of the component in world space.</td> </tr> <tr> <td><a href="#wrapLines">wrapLines</a></td><td><p>Whether to automatically wrap lines based on the element width.</td> </tr> </table>   <h3>Events</h3> <table class="properties"> <tr> <td><a href="#event:click">click</a></td><td><p>Fired when the mouse is pressed and released on the component or when a touch starts and ends on the component.</td> </tr> <tr> <td><a href="#event:mousedown">mousedown</a></td><td><p>Fired when the mouse is pressed while the cursor is on the component.</td> </tr> <tr> <td><a href="#event:mouseenter">mouseenter</a></td><td><p>Fired when the mouse cursor enters the component.</td> </tr> <tr> <td><a href="#event:mouseleave">mouseleave</a></td><td><p>Fired when the mouse cursor leaves the component.</td> </tr> <tr> <td><a href="#event:mousemove">mousemove</a></td><td><p>Fired when the mouse cursor is moved on the component.</td> </tr> <tr> <td><a href="#event:mouseup">mouseup</a></td><td><p>Fired when the mouse is released while the cursor is on the component.</td> </tr> <tr> <td><a href="#event:mousewheel">mousewheel</a></td><td><p>Fired when the mouse wheel is scrolled on the component.</td> </tr> <tr> <td><a href="#event:touchcancel">touchcancel</a></td><td><p>Fired when a touch is cancelled on the component.</td> </tr> <tr> <td><a href="#event:touchend">touchend</a></td><td><p>Fired when a touch ends on the component.</td> </tr> <tr> <td><a href="#event:touchmove">touchmove</a></td><td><p>Fired when a touch moves after it started touching the component.</td> </tr> <tr> <td><a href="#event:touchstart">touchstart</a></td><td><p>Fired when a touch starts on the component.</td> </tr> </table> <h2>Inherited</h2>   <h3>Properties</h3> <table class="properties"> <tr> <td><a href="#enabled">enabled</a></td><td><p>Enables or disables the component.</td> </tr> <tr> <td><a href="#entity">entity</a></td><td><p>The Entity that this Component is attached to.</td> </tr> <tr> <td><a href="#system">system</a></td><td><p>The ComponentSystem used to create this Component.</td> </tr> </table>  <h3>Methods</h3> <table class="properties"> <tr> <td><a href="#fire">fire</a></td><td><p>Fire an event, all additional arguments are passed on to the event listener.</td> </tr> <tr> <td><a href="#hasEvent">hasEvent</a></td><td><p>Test if there are any handlers bound to an event name.</td> </tr> <tr> <td><a href="#off">off</a></td><td><p>Detach an event handler from an event.</td> </tr> <tr> <td><a href="#on">on</a></td><td><p>Attach an event handler to an event.</td> </tr> <tr> <td><a href="#once">once</a></td><td><p>Attach an event handler to an event.</td> </tr> </table>  <h1>Details</h1>    <h2>Constructor</h2>  <div id="ElementComponent"> <h3 class="methodname">ElementComponent(system, entity) <a class="font-icon" href="#ElementComponent"></a></h3> <p></p> <h4>Parameters</h4> <table> <tr> <td>system</td><td><a href="pc.ElementComponentSystem.html">pc.ElementComponentSystem</a></td><td><p>The ComponentSystem that created this Component.</p></td> </tr> <tr> <td>entity</td><td><a href="pc.Entity.html">pc.Entity</a></td><td><p>The Entity that this Component is attached to.</p></td> </tr> </table> </div>  <h2>Properties</h2> <div id="alignment"> <span class="property"><a href="pc.Vec2.html">pc.Vec2</a></span><span class="property">alignment <a class="font-icon" href="#alignment"></a></span> <p><p>The horizontal and vertical alignment of the text. Values range from 0 to 1 where [0,0] is the bottom left and [1,1] is the top right. Only works for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</p></p> </div> <div id="anchor"> <span class="property"><a href="pc.Vec4.html">pc.Vec4</a></span><span class="property">anchor <a class="font-icon" href="#anchor"></a></span> <p><p>Specifies where the left, bottom, right and top edges of the component are anchored relative to its parent. Each value ranges from 0 to 1. E.g. a value of [0,0,0,0] means that the element will be anchored to the bottom left of its parent. A value of [1, 1, 1, 1] means it will be anchored to the top right. A split anchor is when the left-right or top-bottom pairs of the anchor are not equal. In that case the component will be resized to cover that entire area. E.g. a value of [0,0,1,1] will make the component resize exactly as its parent.</p></p> </div> <div id="autoFitHeight"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">autoFitHeight <a class="font-icon" href="#autoFitHeight"></a></span> <p><p>When true the font size and line height will scale so that the text fits inside the height of the Element. The font size will be scaled between minFontSize and maxFontSize. The value of autoFitHeight will be ignored if autoHeight is true.</p></p> </div> <div id="autoFitWidth"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">autoFitWidth <a class="font-icon" href="#autoFitWidth"></a></span> <p><p>When true the font size and line height will scale so that the text fits inside the width of the Element. The font size will be scaled between minFontSize and maxFontSize. The value of autoFitWidth will be ignored if autoWidth is true.</p></p> </div> <div id="autoHeight"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">autoHeight <a class="font-icon" href="#autoHeight"></a></span> <p><p>Automatically set the height of the component to be the same as the textHeight. Only works for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</p></p> </div> <div id="autoWidth"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">autoWidth <a class="font-icon" href="#autoWidth"></a></span> <p><p>Automatically set the width of the component to be the same as the textWidth. Only works for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</p></p> </div> <div id="batchGroupId"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">batchGroupId <a class="font-icon" href="#batchGroupId"></a></span> <p><p>Assign element to a specific batch group (see <a href="pc.BatchGroup.html">pc.BatchGroup</a>). Default value is -1 (no group).</p></p> </div> <div id="bottom"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">bottom <a class="font-icon" href="#bottom"></a></span> <p><p>The distance from the bottom edge of the anchor. Can be used in combination with a split anchor to make the component's top edge always be 'top' units away from the top.</p></p> </div> <div id="calculatedHeight"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">calculatedHeight <a class="font-icon" href="#calculatedHeight"></a></span> <p><p>The height at which the element will be rendered. In most cases this will be the same as <code>height</code>. However, in some cases the engine may calculate a different height for the element, such as when the element is under the control of a <a href="pc.LayoutGroupComponent.html">pc.LayoutGroupComponent</a>. In these scenarios, <code>calculatedHeight</code> may be smaller or larger than the height that was set in the editor.</p></p> </div> <div id="calculatedWidth"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">calculatedWidth <a class="font-icon" href="#calculatedWidth"></a></span> <p><p>The width at which the element will be rendered. In most cases this will be the same as <code>width</code>. However, in some cases the engine may calculate a different width for the element, such as when the element is under the control of a <a href="pc.LayoutGroupComponent.html">pc.LayoutGroupComponent</a>. In these scenarios, <code>calculatedWidth</code> may be smaller or larger than the width that was set in the editor.</p></p> </div> <div id="canvasCorners"> <span class="property"><a href="pc.Vec2.html">pc.Vec2[]</a></span><span class="property">canvasCorners <a class="font-icon" href="#canvasCorners"></a></span> <p><p>An array of 4 <a href="pc.Vec2.html">pc.Vec2</a>s that represent the bottom left, bottom right, top right and top left corners of the component in canvas pixels. Only works for screen space ElementComponents.</p></p> </div> <div id="color"> <span class="property"><a href="pc.Color.html">pc.Color</a></span><span class="property">color <a class="font-icon" href="#color"></a></span> <p><p>The color of the image for <a href="pc.html#ELEMENTTYPE_IMAGE">pc.ELEMENTTYPE_IMAGE</a> types or the color of the text for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</p></p> </div> <div id="drawOrder"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">drawOrder <a class="font-icon" href="#drawOrder"></a></span> <p><p>The draw order of the component. A higher value means that the component will be rendered on top of other components.</p></p> </div> <div id="enableMarkup"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">enableMarkup <a class="font-icon" href="#enableMarkup"></a></span> <p><p>Flag for enabling markup processing. Only works for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</p></p> </div> <div id="font"> <span class="property"><a href="pc.Font.html">pc.Font</a></span><span class="property">font <a class="font-icon" href="#font"></a></span> <p><p>The font used for rendering the text. Only works for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</p></p> </div> <div id="fontAsset"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">fontAsset <a class="font-icon" href="#fontAsset"></a></span> <p><p>The id of the font asset used for rendering the text. Only works for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</p></p> </div> <div id="fontSize"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">fontSize <a class="font-icon" href="#fontSize"></a></span> <p><p>The size of the font. Only works for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</p></p> </div> <div id="height"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">height <a class="font-icon" href="#height"></a></span> <p><p>The height of the element as set in the editor. Note that in some cases this may not reflect the true height at which the element is rendered, such as when the element is under the control of a <a href="pc.LayoutGroupComponent.html">pc.LayoutGroupComponent</a>. See <code>calculatedHeight</code> in order to ensure you are reading the true height at which the element will be rendered.</p></p> </div> <div id="key"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span><span class="property">key <a class="font-icon" href="#key"></a></span> <p><p>The localization key to use to get the localized text from <a href="pc.Application.html#i18n">pc.Application#i18n</a>. Only works for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</p></p> </div> <div id="layers"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number[]</a></span><span class="property">layers <a class="font-icon" href="#layers"></a></span> <p><p>An array of layer IDs (pc.Layer#id) to which this element should belong. Don't push/pop/splice or modify this array, if you want to change it - set a new one instead.</p></p> </div> <div id="left"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">left <a class="font-icon" href="#left"></a></span> <p><p>The distance from the left edge of the anchor. Can be used in combination with a split anchor to make the component's left edge always be 'left' units away from the left.</p></p> </div> <div id="lineHeight"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">lineHeight <a class="font-icon" href="#lineHeight"></a></span> <p><p>The height of each line of text. Only works for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</p></p> </div> <div id="margin"> <span class="property"><a href="pc.Vec4.html">pc.Vec4</a></span><span class="property">margin <a class="font-icon" href="#margin"></a></span> <p><p>The distance from the left, bottom, right and top edges of the anchor. For example if we are using a split anchor like [0,0,1,1] and the margin is [0,0,0,0] then the component will be the same width and height as its parent.</p></p> </div> <div id="material"> <span class="property"><a href="pc.Material.html">pc.Material</a></span><span class="property">material <a class="font-icon" href="#material"></a></span> <p><p>The material to use when rendering an image. Only works for <a href="pc.html#ELEMENTTYPE_IMAGE">pc.ELEMENTTYPE_IMAGE</a> types.</p></p> </div> <div id="materialAsset"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">materialAsset <a class="font-icon" href="#materialAsset"></a></span> <p><p>The id of the material asset to use when rendering an image. Only works for <a href="pc.html#ELEMENTTYPE_IMAGE">pc.ELEMENTTYPE_IMAGE</a> types.</p></p> </div> <div id="maxFontSize"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">maxFontSize <a class="font-icon" href="#maxFontSize"></a></span> <p><p>The maximum size that the font can scale to when autoFitWidth or autoFitHeight are true.</p></p> </div> <div id="maxLines"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">maxLines <a class="font-icon" href="#maxLines"></a></span> <p><p>The maximum number of lines that the Element can wrap to. Any leftover text will be appended to the last line. Set this to null to allow unlimited lines.</p></p> </div> <div id="minFontSize"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">minFontSize <a class="font-icon" href="#minFontSize"></a></span> <p><p>The minimum size that the font can scale to when autoFitWidth or autoFitHeight are true.</p></p> </div> <div id="opacity"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">opacity <a class="font-icon" href="#opacity"></a></span> <p><p>The opacity of the image for <a href="pc.html#ELEMENTTYPE_IMAGE">pc.ELEMENTTYPE_IMAGE</a> types or the text for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</p></p> </div> <div id="outlineColor"> <span class="property"><a href="pc.Color.html">pc.Color</a></span><span class="property">outlineColor <a class="font-icon" href="#outlineColor"></a></span> <p><p>The text outline effect color and opacity. Only works for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</p></p> </div> <div id="outlineThickness"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">outlineThickness <a class="font-icon" href="#outlineThickness"></a></span> <p><p>The width of the text outline effect. Only works for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</p></p> </div> <div id="pivot"> <span class="property"><a href="pc.Vec2.html">pc.Vec2</a></span><span class="property">pivot <a class="font-icon" href="#pivot"></a></span> <p><p>The position of the pivot of the component relative to its anchor. Each value ranges from 0 to 1 where [0,0] is the bottom left and [1,1] is the top right.</p></p> </div> <div id="pixelsPerUnit"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">pixelsPerUnit <a class="font-icon" href="#pixelsPerUnit"></a></span> <p><p>The number of pixels that map to one PlayCanvas unit. Only works for <a href="pc.html#ELEMENTTYPE_IMAGE">pc.ELEMENTTYPE_IMAGE</a> types who have a sliced sprite assigned.</p></p> </div> <div id="rangeEnd"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">rangeEnd <a class="font-icon" href="#rangeEnd"></a></span> <p><p>Index of the last character to render. Only works for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</p></p> </div> <div id="rangeStart"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">rangeStart <a class="font-icon" href="#rangeStart"></a></span> <p><p>Index of the first character to render. Only works for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</p></p> </div> <div id="rect"> <span class="property"><a href="pc.Vec4.html">pc.Vec4</a></span><span class="property">rect <a class="font-icon" href="#rect"></a></span> <p><p>Specifies which region of the texture to use in order to render an image. Values range from 0 to 1 and indicate u, v, width, height. Only works for <a href="pc.html#ELEMENTTYPE_IMAGE">pc.ELEMENTTYPE_IMAGE</a> types.</p></p> </div> <div id="right"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">right <a class="font-icon" href="#right"></a></span> <p><p>The distance from the right edge of the anchor. Can be used in combination with a split anchor to make the component's right edge always be 'right' units away from the right.</p></p> </div> <div id="rtlReorder"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">rtlReorder <a class="font-icon" href="#rtlReorder"></a></span> <p><p>Reorder the text for RTL languages using a function registered by <code>app.systems.element.registerUnicodeConverter</code>.</p></p> </div> <div id="screen"> <span class="property"><a href="pc.Entity.html">pc.Entity</a></span><span class="property">screen <a class="font-icon" href="#screen"></a></span> <p><p>The Entity with a <a href="pc.ScreenComponent.html">pc.ScreenComponent</a> that this component belongs to. This is automatically set when the component is a child of a ScreenComponent.</p></p> </div> <div id="screenCorners"> <span class="property"><a href="pc.Vec3.html">pc.Vec3[]</a></span><span class="property">screenCorners <a class="font-icon" href="#screenCorners"></a></span> <p><p>An array of 4 <a href="pc.Vec3.html">pc.Vec3</a>s that represent the bottom left, bottom right, top right and top left corners of the component relative to its parent <a href="pc.ScreenComponent.html">pc.ScreenComponent</a>.</p></p> </div> <div id="shadowColor"> <span class="property"><a href="pc.Color.html">pc.Color</a></span><span class="property">shadowColor <a class="font-icon" href="#shadowColor"></a></span> <p><p>The text shadow effect color and opacity. Only works for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</p></p> </div> <div id="shadowOffset"> <span class="property"><a href="pc.Vec2.html">pc.Vec2</a></span><span class="property">shadowOffset <a class="font-icon" href="#shadowOffset"></a></span> <p><p>The text shadow effect shift amount from original text. Only works for <a href="pc.html#ELEMENTTYPE_TEXT">pc.ELEMENTTYPE_TEXT</a> types.</p></p> </div>