Options
All
  • Public
  • Public/Protected
  • All
Menu

The Arrow Component allows you to easily add arrows to your project. The ability to change the rotation and curve of the arrow, allows you to find the prefect fit.

var uComps = require('u-components');
var uActions = require('u-actions');
var Action = uActions.Action;
new Action('Arrow Demo', arrowDemo)
.addParameter('Arrow', uActions.ParamType.ARROW)
.register();
function arrowDemo(comp) {
var arrowComp = uComps.cast.toArrow(comp);
arrowComp.filename = 'Clip Art/arrow/arrow_tail.png';
arrowComp.rotate = 45;
}

Hierarchy

Index

Constructors

Properties

alpha: number

The alpha transparency of the Component. Range from 0 to 100.

arrowTint: string

The color to apply on top of the arrow image. Works best for white images. Default tint #eaeaea.

var arrowComp = uComps.cast.toArrow(comp);
arrowComp.arrowTint = '#6477e2';
clippingType: ClippingType

Clip the components contents using one of the options in ClippingType.

components: ComponentList

Access this Component's sub-components.

curve: number

Display the arrow as a smooth curve from end to end. Range -1 to 1. Default 0.

var arrowComp = uComps.cast.toArrow(comp);
arrowComp.curve = -0.2;
filename: string

This is the image the arrow is based on.

var arrowComp = uComps.cast.toArrow(comp);
arrowComp.filename = 'Clip Art/arrow/arrow_tail.png';
arrowComp.strokeWidth = 12;
formEnabled: boolean

Whether or not is component is enabled for the parent form. Only relevant when inside a Form Component.

formFieldName: string

Label used to identify the field this Component belongs to in a form. Only relevant when inside a Form Component.

height: number

The height of the Component.

leftSlice: number

The percentage of the overall image, from the left, that is used to make the arrow head. Range 0 to 0.5. Default 0.2.

var arrowComp = uComps.cast.toArrow(comp);
arrowComp.leftSlice = 0.5;

Shape component to be used as a mask. Can be either a Rectangle or Circle Component.

name: string

Name of the component.

parent: Component

Access this Component's parent component.

passedFormValidation: boolean

Whether or not the Component has passed form validation. Only relevant when inside a Form Component.

rightSlice: number

The percentage of the overall image, from the right, that is used to make the arrow head. Range 0 to 0.5. Default 0.2.

var arrowComp = uComps.cast.toArrow(comp);
arrowComp.rightSlice = 0;
rotate: number

Angle to draw arrow, in degrees. Range -180 to 180. Default 0.

var arrowComp = uComps.cast.toArrow(comp);
arrowComp.rotate = 45;
strokeWidth: number

Changes the stroke width used to draw the arrow. Range 0 to 100. Default 20.

var arrowComp = uComps.cast.toArrow(comp);
arrowComp.strokeWidth = 12;
type: string

Type of the component.

uniqueId: string

Unique ID of the component.

visible: boolean

Whether or not the Component is visible.

width: number

The width of the Component.

x: number

The x position of the Component relative to its parent.

y: number

The y position of the Component relative to its parent.

Methods

  • emit(eventType: string, data: Object): void
  • Call each callback that is registered for the given eventType, in the order they were registered, passing the supplied data to each.

    Parameters

    • eventType: string

      The type of the event to emit.

    • data: Object

      Data object to pass to each callback.

    Returns void

  • focus(): void
  • Set the keyboard focus to this component.

    new uActions.Action('set focus', setFocus)
    .addParameter('text entry',uActions.ParamType.TEXT_ENTRY)
    .register();
    function setFocus(textEntry) {
    textEntry.focus();
    }

    Returns void

  • get(propertyName: string): any
  • Get a property by name.

    var uActions = require('u-actions');
    new uActions.Action('get fontsize',getFontSize).register();
    function getFontSize() {
    var text1=uPages.current.components.getText('Text 1');
    console.log(text1.get('font_size'));
    }

    Parameters

    • propertyName: string

      The name of the property to get.

    Returns any

    Returned value can be of any type, or even null.

  • on(eventType: string, callback: Function): void
  • Adds the callback function to the end of the listeners array for eventType.

    Parameters

    • eventType: string

      The type of the event.

    • callback: Function

      The callback function

    Returns void

  • refresh(): void
  • Refresh this component to force it to be re-rendered, or for its dynamic data to be updated.

    Returns void

  • set(propertyName: string, value: any): void
  • set(data: Object): void
  • Set a properties value by name.

    var uActions = require('u-actions');
    new uActions.Action('set text color',setTextColor).register();
    function setTextColor() {
    uPages.get('follow').components.getText('Text 1').set('font_color','0x0000FFFF');
    }

    Parameters

    • propertyName: string

      The name of the property to set.

    • value: any

      The value to set. Can be of any type.

    Returns void

  • Set a number properties at once.

    Parameters

    • data: Object

      Data object containing property name and value pairs to set on this component.

    Returns void

  • tween(seconds: number, params: Object, type?: TweenType): void
  • Tween a component property over time.

    Parameters

    • seconds: number

      The number of seconds to tween for.

    • params: Object

      An objects that contains key/value pairs of the properties and values to tween.

    • Optional type: TweenType

      (Optional) Tween type can be any type from "Tween.type"

    Returns void