@lightningjs/renderer 0.9.3 → 1.0.0-rc.0

package/dist/src/main-api/INode.d.ts

@@ -1,483 +1,63 @@
-import type { IEventEmitter } from '@lightningjs/threadx';
 import type { IAnimationController } from '../common/IAnimationController.js';
-import type { ShaderRef, TextureRef } from './RendererMain.js';
-import type { TextRendererMap, TrProps } from '../core/text-rendering/renderers/TextRenderer.js';
+import { CoreNode, type CoreNodeAnimateProps, type CoreNodeProps } from '../core/CoreNode.js';
+import type { CoreTextNode, CoreTextNodeProps } from '../core/CoreTextNode.js';
 import type { AnimationSettings } from '../core/animations/CoreAnimation.js';
+import type { BaseShaderController } from './ShaderController.js';
 /**
- * Writable properties of a Node.
- */
-export interface INodeWritableProps {
-    /**
-     * The x coordinate of the Node's Mount Point.
-     *
-     * @remarks
-     * See {@link mountX} and {@link mountY} for more information about setting
-     * the Mount Point.
-     *
-     * @default `0`
-     */
-    x: number;
-    /**
-     * The y coordinate of the Node's Mount Point.
-     *
-     * @remarks
-     * See {@link mountX} and {@link mountY} for more information about setting
-     * the Mount Point.
-     *
-     * @default `0`
-     */
-    y: number;
-    /**
-     * The width of the Node.
-     *
-     * @default `0`
-     */
-    width: number;
-    /**
-     * The height of the Node.
-     *
-     * @default `0`
-     */
-    height: number;
-    /**
-     * The alpha opacity of the Node.
-     *
-     * @remarks
-     * The alpha value is a number between 0 and 1, where 0 is fully transparent
-     * and 1 is fully opaque.
-     *
-     * @default `1`
-     */
-    alpha: number;
-    /**
-     * Autosize mode
-     *
-     * @remarks
-     * When enabled, when a texture is loaded into the Node, the Node will
-     * automatically resize to the dimensions of the texture.
-     *
-     * Text Nodes are always autosized based on their text content regardless
-     * of this mode setting.
-     *
-     * @default `false`
-     */
-    autosize: boolean;
-    /**
-     * Clipping Mode
-     *
-     * @remarks
-     * Enable Clipping Mode when you want to prevent the drawing of a Node and
-     * its descendants from overflowing outside of the Node's x/y/width/height
-     * bounds.
-     *
-     * For WebGL, clipping is implemented using the high-performance WebGL
-     * operation scissor. As a consequence, clipping does not work for
-     * non-rectangular areas. So, if the element is rotated
-     * (by itself or by any of its ancestors), clipping will not work as intended.
-     *
-     * TODO: Add support for non-rectangular clipping either automatically or
-     * via Render-To-Texture.
-     *
-     * @default `false`
-     */
-    clipping: boolean;
-    /**
-     * The color of the Node.
-     *
-     * @remarks
-     * The color value is a number in the format 0xRRGGBBAA, where RR is the red
-     * component, GG is the green component, BB is the blue component, and AA is
-     * the alpha component.
-     *
-     * Gradient colors may be set by setting the different color sub-properties:
-     * {@link colorTop}, {@link colorBottom}, {@link colorLeft}, {@link colorRight},
-     * {@link colorTl}, {@link colorTr}, {@link colorBr}, {@link colorBl} accordingly.
-     *
-     * @default `0xffffffff` (opaque white)
-     */
-    color: number;
-    /**
-     * The color of the top edge of the Node for gradient rendering.
-     *
-     * @remarks
-     * See {@link color} for more information about color values and gradient
-     * rendering.
-     */
-    colorTop: number;
-    /**
-     * The color of the bottom edge of the Node for gradient rendering.
-     *
-     * @remarks
-     * See {@link color} for more information about color values and gradient
-     * rendering.
-     */
-    colorBottom: number;
-    /**
-     * The color of the left edge of the Node for gradient rendering.
-     *
-     * @remarks
-     * See {@link color} for more information about color values and gradient
-     * rendering.
-     */
-    colorLeft: number;
-    /**
-     * The color of the right edge of the Node for gradient rendering.
-     *
-     * @remarks
-     * See {@link color} for more information about color values and gradient
-     * rendering.
-     */
-    colorRight: number;
-    /**
-     * The color of the top-left corner of the Node for gradient rendering.
-     *
-     * @remarks
-     * See {@link color} for more information about color values and gradient
-     * rendering.
-     */
-    colorTl: number;
-    /**
-     * The color of the top-right corner of the Node for gradient rendering.
-     *
-     * @remarks
-     * See {@link color} for more information about color values and gradient
-     * rendering.
-     */
-    colorTr: number;
-    /**
-     * The color of the bottom-right corner of the Node for gradient rendering.
-     *
-     * @remarks
-     * See {@link color} for more information about color values and gradient
-     * rendering.
-     */
-    colorBr: number;
-    /**
-     * The color of the bottom-left corner of the Node for gradient rendering.
-     *
-     * @remarks
-     * See {@link color} for more information about color values and gradient
-     * rendering.
-     */
-    colorBl: number;
-    /**
-     * The Node's parent Node.
-     *
-     * @remarks
-     * The value `null` indicates that the Node has no parent. This may either be
-     * because the Node is the root Node of the scene graph, or because the Node
-     * has been removed from the scene graph.
-     *
-     * In order to make sure that a Node can be rendered on the screen, it must
-     * be added to the scene graph by setting it's parent property to a Node that
-     * is already in the scene graph such as the root Node.
-     *
-     * @default `null`
-     */
-    parent: INode | null;
-    /**
-     * The Node's z-index.
-     *
-     * @remarks
-     * TBD
-     */
-    zIndex: number;
-    /**
-     * The Node's Texture.
-     *
-     * @remarks
-     * The `texture` defines a rasterized image that is contained within the
-     * {@link width} and {@link height} dimensions of the Node. If null, the
-     * Node will use an opaque white {@link ColorTexture} when being drawn, which
-     * essentially enables colors (including gradients) to be drawn.
-     *
-     * If set, by default, the texture will be drawn, as is, stretched to the
-     * dimensions of the Node. This behavior can be modified by setting the TBD
-     * and TBD properties.
-     *
-     * To create a Texture in order to set it on this property, call
-     * {@link RendererMain.createTexture}.
-     *
-     * If the {@link src} is set on a Node, the Node will use the
-     * {@link ImageTexture} by default and the Node will simply load the image at
-     * the specified URL.
-     *
-     * Note: If this is a Text Node, the Texture will be managed by the Node's
-     * {@link TextRenderer} and should not be set explicitly.
-     */
-    texture: TextureRef | null;
-    /**
-     * The Node's shader
-     *
-     * @remarks
-     * The `shader` defines a {@link Shader} used to draw the Node. By default,
-     * the Default Shader is used which simply draws the defined {@link texture}
-     * or {@link color}(s) within the Node without any special effects.
-     *
-     * To create a Shader in order to set it on this property, call
-     * {@link RendererMain.createShader}.
-     *
-     * Note: If this is a Text Node, the Shader will be managed by the Node's
-     * {@link TextRenderer} and should not be set explicitly.
-     */
-    shader: ShaderRef | null;
-    /**
-     * Image URL
-     *
-     * @remarks
-     * When set, the Node's {@link texture} is automatically set to an
-     * {@link ImageTexture} using the source image URL provided (with all other
-     * settings being defaults)
-     */
-    src: string;
-    zIndexLocked: number;
-    /**
-     * Scale to render the Node at
-     *
-     * @remarks
-     * The scale value multiplies the provided {@link width} and {@link height}
-     * of the Node around the Node's Pivot Point (defined by the {@link pivot}
-     * props).
-     *
-     * Behind the scenes, setting this property sets both the {@link scaleX} and
-     * {@link scaleY} props to the same value.
-     *
-     * NOTE: When the scaleX and scaleY props are explicitly set to different values,
-     * this property returns `null`. Setting `null` on this property will have no
-     * effect.
-     *
-     * @default 1.0
-     */
-    scale: number | null;
-    /**
-     * Scale to render the Node at (X-Axis)
-     *
-     * @remarks
-     * The scaleX value multiplies the provided {@link width} of the Node around
-     * the Node's Pivot Point (defined by the {@link pivot} props).
-     *
-     * @default 1.0
-     */
-    scaleX: number;
-    /**
-     * Scale to render the Node at (Y-Axis)
-     *
-     * @remarks
-     * The scaleY value multiplies the provided {@link height} of the Node around
-     * the Node's Pivot Point (defined by the {@link pivot} props).
-     *
-     * @default 1.0
-     */
-    scaleY: number;
-    /**
-     * Combined position of the Node's Mount Point
-     *
-     * @remarks
-     * The value can be any number between `0.0` and `1.0`:
-     * - `0.0` defines the Mount Point at the top-left corner of the Node.
-     * - `0.5` defines it at the center of the Node.
-     * - `1.0` defines it at the bottom-right corner of the node.
-     *
-     * Use the {@link mountX} and {@link mountY} props seperately for more control
-     * of the Mount Point.
-     *
-     * When assigned, the same value is also passed to both the {@link mountX} and
-     * {@link mountY} props.
-     *
-     * @default 0 (top-left)
-     */
-    mount: number;
-    /**
-     * X position of the Node's Mount Point
-     *
-     * @remarks
-     * The value can be any number between `0.0` and `1.0`:
-     * - `0.0` defines the Mount Point's X position as the left-most edge of the
-     *   Node
-     * - `0.5` defines it as the horizontal center of the Node
-     * - `1.0` defines it as the right-most edge of the Node.
-     *
-     * The combination of {@link mountX} and {@link mountY} define the Mount Point
-     *
-     * @default 0 (left-most edge)
-     */
-    mountX: number;
-    /**
-     * Y position of the Node's Mount Point
-     *
-     * @remarks
-     * The value can be any number between `0.0` and `1.0`:
-     * - `0.0` defines the Mount Point's Y position as the top-most edge of the
-     *   Node
-     * - `0.5` defines it as the vertical center of the Node
-     * - `1.0` defines it as the bottom-most edge of the Node.
-     *
-     * The combination of {@link mountX} and {@link mountY} define the Mount Point
-     *
-     * @default 0 (top-most edge)
-     */
-    mountY: number;
-    /**
-     * Combined position of the Node's Pivot Point
-     *
-     * @remarks
-     * The value can be any number between `0.0` and `1.0`:
-     * - `0.0` defines the Pivot Point at the top-left corner of the Node.
-     * - `0.5` defines it at the center of the Node.
-     * - `1.0` defines it at the bottom-right corner of the node.
-     *
-     * Use the {@link pivotX} and {@link pivotY} props seperately for more control
-     * of the Pivot Point.
-     *
-     * When assigned, the same value is also passed to both the {@link pivotX} and
-     * {@link pivotY} props.
-     *
-     * @default 0.5 (center)
-     */
-    pivot: number;
-    /**
-     * X position of the Node's Pivot Point
-     *
-     * @remarks
-     * The value can be any number between `0.0` and `1.0`:
-     * - `0.0` defines the Pivot Point's X position as the left-most edge of the
-     *   Node
-     * - `0.5` defines it as the horizontal center of the Node
-     * - `1.0` defines it as the right-most edge of the Node.
-     *
-     * The combination of {@link pivotX} and {@link pivotY} define the Pivot Point
-     *
-     * @default 0.5 (centered on x-axis)
-     */
-    pivotX: number;
-    /**
-     * Y position of the Node's Pivot Point
-     *
-     * @remarks
-     * The value can be any number between `0.0` and `1.0`:
-     * - `0.0` defines the Pivot Point's Y position as the top-most edge of the
-     *   Node
-     * - `0.5` defines it as the vertical center of the Node
-     * - `1.0` defines it as the bottom-most edge of the Node.
-     *
-     * The combination of {@link pivotX} and {@link pivotY} define the Pivot Point
-     *
-     * @default 0.5 (centered on y-axis)
-     */
-    pivotY: number;
-    /**
-     * Rotation of the Node (in Radians)
-     *
-     * @remarks
-     * Sets the amount to rotate the Node by around it's Pivot Point (defined by
-     * the {@link pivot} props). Positive values rotate the Node clockwise, while
-     * negative values rotate it counter-clockwise.
-     *
-     * Example values:
-     * - `-Math.PI / 2`: 90 degree rotation counter-clockwise
-     * - `0`: No rotation
-     * - `Math.PI / 2`: 90 degree rotation clockwise
-     * - `Math.PI`: 180 degree rotation clockwise
-     * - `3 * Math.PI / 2`: 270 degree rotation clockwise
-     * - `2 * Math.PI`: 360 rotation clockwise
-     */
-    rotation: number;
-    /**
-     * Whether the Node is rendered to a texture
-     *
-     * @remarks
-     * TBD
-     *
-     * @default false
-     */
-    rtt: boolean;
-    /**
-     * Node data element for custom data storage (optional)
-     *
-     * @remarks
-     * This property is used to store custom data on the Node as a key/value data store.
-     * Data values are limited to string, numbers, booleans. Strings will be truncated
-     * to a 2048 character limit for performance reasons.
-     *
-     * This is not a data storage mechanism for large amounts of data please use a
-     * dedicated data storage mechanism for that.
-     *
-     * The custom data will be reflected in the inspector as part of `data-*` attributes
-     *
-     * @default `undefined`
-     */
-    data?: CustomDataMap;
-}
-/**
- * A custom data map which can be stored on the INode
- *
- * @remarks
- * This is a map of key-value pairs that can be stored on an INode. It is used
- * to store custom data that can be used by the application.
- * The data stored can only be of type string, number or boolean.
- */
-export type CustomDataMap = {
-    [key: string]: string | number | boolean | undefined;
-};
-export type INodeAnimatableProps = {
-    [Key in keyof INodeWritableProps as NonNullable<INodeWritableProps[Key]> extends number ? Key : never]: number;
-};
-export interface INodeEvents {
-    [s: string]: (target: INode, data: any) => void;
-}
-/**
- * Main API interface representing a Node in the Renderer scene graph.
+ * A visual Node in the Renderer scene graph.
  *
  * @remarks
  * A Node is a basic building block of the Renderer scene graph. It can be a
  * container for other Nodes, or it can be a leaf Node that renders a solid
  * color, gradient, image, or specific texture, using a specific shader.
  *
- * For text rendering, see {@link ITextNode}.
+ * For text rendering Nodes, see {@link ITextNode}.
+ *
+ * ## INode vs CoreNode
+ * CoreNode is the name of the class for a Renderer Node and is only directly
+ * used internally by the Renderer. INode describes the public API of a
+ * Renderer Node including the ability to be tied to a specific Shader.
  *
- * Nodes are represented by an interface since they may be implemented in
- * different ways depending on the Core Driver. For example, the MainCoreDriver
- * implements it with it's `MainOnlyNode` while the ThreadXCoreDriver implements
- * it with it's `ThreadXMainNode`.
+ * Users of the Renderer API, should generally interact with INode objects
+ * instead of CoreNode objects.
  */
-export interface INode extends INodeWritableProps, IEventEmitter<INodeEvents> {
-    id: number;
-    readonly children: INode[];
-    animate(props: Partial<INodeAnimatableProps>, settings: Partial<AnimationSettings>): IAnimationController;
-    destroy(): void;
-    flush(): void;
+export interface INode<SC extends BaseShaderController = BaseShaderController> extends Omit<CoreNode, 'shader' | 'animate' | 'parent'> {
+    shader: SC;
+    animate(props: Partial<INodeAnimateProps<SC>>, settings: Partial<AnimationSettings>): IAnimationController;
+    parent: INode | null;
 }
-export interface ITextNodeWritableProps extends INodeWritableProps, TrProps {
-    /**
-     * Force Text Node to use a specific Text Renderer
-     *
-     * @remarks
-     * By default, Text Nodes resolve the Text Renderer to use based on the font
-     * that is matched using the font family and other font selection properties.
-     *
-     * If two fonts supported by two separate Text Renderers are matched setting
-     * this override forces the Text Node to resolve to the Text Renderer defined
-     * here.
-     *
-     * @default null
-     */
-    textRendererOverride: keyof TextRendererMap | null;
+/**
+ * Properties used to animate() a Node
+ */
+export interface INodeAnimateProps<SC extends BaseShaderController> extends Omit<CoreNodeAnimateProps, 'shaderProps'> {
+    shaderProps: Partial<SC['props']>;
 }
 /**
- * Main API interface representing a Node in the Renderer scene graph that renders text.
+ * Properties used to create a new Node
+ */
+export interface INodeProps<SC extends BaseShaderController = BaseShaderController> extends Omit<CoreNodeProps, 'shader' | 'parent'> {
+    shader: SC;
+    parent: INode | null;
+}
+/**
+ * A visual Node in the Renderer scene graph that renders text.
  *
  * @remarks
- * A Text Node is the second graphical building block of the Renderer scene
- * graph. It renders text using a specific text renderer that is automatically
- * chosen based on the font requested and what type of fonts are installed
- * into an app via a CoreExtension.
- *
- * The text renderer can be overridden by setting the `textRendererOverride`
- *
- * The `texture` and `shader` properties are managed by loaded text renderer and
- * should not be set directly.
+ * A Text Node is a special type of Node that renders text using a specific
+ * text renderer, such as Web/Canvas or Signed Distance Field (SDF) text.
  *
  * For non-text rendering, see {@link INode}.
+ *
+ * Users of the Renderer API, should generally interact with ITextNode objects
+ * instead of CoreTextNode objects.
+ */
+export interface ITextNode extends Omit<CoreTextNode, 'animate' | 'parent'> {
+    animate(props: Partial<INodeAnimateProps<BaseShaderController>>, settings: Partial<AnimationSettings>): IAnimationController;
+    parent: INode | null;
+}
+/**
+ * Properties used to create a new Text Node
  */
-export interface ITextNode extends INode, ITextNodeWritableProps {
+export interface ITextNodeProps extends Omit<CoreTextNodeProps, 'parent'> {
+    parent: INode | null;
 }

package/dist/src/main-api/INode.js

@@ -1,20 +1,2 @@
-/*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2023 Comcast Cable Communications Management, LLC.
- *
- * Licensed under the Apache License, Version 2.0 (the License);
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export {};
+import { CoreNode, } from '../core/CoreNode.js';
 //# sourceMappingURL=INode.js.map

package/dist/src/main-api/INode.js.map

@@ -1 +1 @@
-{"version":3,"file":"INode.js","sourceRoot":"","sources":["../../../src/main-api/INode.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG"}
+{"version":3,"file":"INode.js","sourceRoot":"","sources":["../../../src/main-api/INode.ts"],"names":[],"mappings":"AAmBA,OAAO,EACL,QAAQ,GAGT,MAAM,qBAAqB,CAAC"}

package/dist/src/main-api/Inspector.d.ts

@@ -1,7 +1,7 @@
-import type { INode, INodeAnimatableProps, INodeWritableProps, ITextNode, ITextNodeWritableProps } from './INode.js';
-import type { ICoreDriver } from './ICoreDriver.js';
-import { type RendererMainSettings } from './RendererMain.js';
+import { CoreNode, type CoreNodeAnimateProps, type CoreNodeProps } from '../core/CoreNode.js';
+import { type RendererMainSettings } from './Renderer.js';
 import type { AnimationSettings } from '../core/animations/CoreAnimation.js';
+import type { CoreTextNode, CoreTextNodeProps } from '../core/CoreTextNode.js';
 export declare class Inspector {
     private root;
     private canvas;
@@ -11,11 +11,11 @@ export declare class Inspector {
     private scaleY;
     constructor(canvas: HTMLCanvasElement, settings: RendererMainSettings);
     setRootPosition(): void;
-    createDiv(node: INode | ITextNode, properties: INodeWritableProps | ITextNodeWritableProps): HTMLElement;
-    createNode(driver: ICoreDriver, properties: INodeWritableProps): INode;
-    createTextNode(driver: ICoreDriver, properties: ITextNodeWritableProps): ITextNode;
-    createProxy(node: INode | ITextNode, div: HTMLElement): INode | ITextNode;
-    destroyNode(node: INode | ITextNode): void;
-    updateNodeProperty(div: HTMLElement, property: keyof INodeWritableProps | keyof ITextNodeWritableProps, value: any): void;
-    animateNode(div: HTMLElement, node: INode, props: INodeAnimatableProps, settings: AnimationSettings): void;
+    createDiv(id: number, properties: CoreNodeProps | CoreTextNodeProps): HTMLElement;
+    createNode(node: CoreNode): CoreNode;
+    createTextNode(node: CoreNode): CoreTextNode;
+    createProxy(node: CoreNode | CoreTextNode, div: HTMLElement): CoreNode | CoreTextNode;
+    destroyNode(id: number): void;
+    updateNodeProperty(div: HTMLElement, property: keyof CoreNodeProps | keyof CoreTextNodeProps, value: any): void;
+    animateNode(div: HTMLElement, props: CoreNodeAnimateProps, settings: AnimationSettings): void;
 }

package/dist/src/main-api/Inspector.js

@@ -1,4 +1,5 @@
-import {} from './RendererMain.js';
+import { CoreNode, } from '../core/CoreNode.js';
+import {} from './Renderer.js';
 import { isProductionEnvironment } from '../utils.js';
 const stylePropertyMap = {
     alpha: (v) => {
@@ -150,10 +151,10 @@ export class Inspector {
         this.root.style.overflow = 'hidden';
         this.root.style.zIndex = '65534';
     }
-    createDiv(node, properties) {
+    createDiv(id, properties) {
         const div = document.createElement('div');
         div.style.position = 'absolute';
-        div.id = node.id.toString();
+        div.id = id.toString();
         // set initial properties
         for (const key in properties) {
             this.updateNodeProperty(div, 
@@ -162,18 +163,16 @@ export class Inspector {
         }
         return div;
     }
-    createNode(driver, properties) {
-        const node = driver.createNode(properties);
-        const div = this.createDiv(node, properties);
+    createNode(node) {
+        const div = this.createDiv(node.id, node.props);
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
         div.node = node;
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
         node.div = div;
         return this.createProxy(node, div);
     }
-    createTextNode(driver, properties) {
-        const node = driver.createTextNode(properties);
-        const div = this.createDiv(node, properties);
+    createTextNode(node) {
+        const div = this.createDiv(node.id, node.props);
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
         div.node = node;
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
@@ -188,7 +187,7 @@ export class Inspector {
             },
             get: (target, property, receiver) => {
                 if (property === 'destroy') {
-                    this.destroyNode(target);
+                    this.destroyNode(target.id);
                 }
                 if (property === 'animate') {
                     return (props, settings) => {
@@ -197,7 +196,7 @@ export class Inspector {
                         return new Proxy(anim, {
                             get: (target, property, receiver) => {
                                 if (property === 'start') {
-                                    this.animateNode(div, node, props, settings);
+                                    this.animateNode(div, props, settings);
                                 }
                                 return Reflect.get(target, property, receiver);
                             },
@@ -208,8 +207,8 @@ export class Inspector {
             },
         });
     }
-    destroyNode(node) {
-        const div = document.getElementById(node.id.toString());
+    destroyNode(id) {
+        const div = document.getElementById(id.toString());
         div?.remove();
     }
     updateNodeProperty(div, property, 
@@ -272,7 +271,11 @@ export class Inspector {
         }
         // DOM properties
         if (domPropertyMap[property]) {
-            div.setAttribute(String(stylePropertyMap[property]), String(value));
+            const domProperty = domPropertyMap[property];
+            if (!domProperty) {
+                return;
+            }
+            div.setAttribute(String(domProperty), String(value));
             return;
         }
         // custom data properties
@@ -291,7 +294,7 @@ export class Inspector {
         }
     }
     // simple animation handler
-    animateNode(div, node, props, settings) {
+    animateNode(div, props, settings) {
         const { duration = 1000, delay = 0,
         // easing = 'linear',
         // repeat = 0,