pencil.js
Version:
Nice modular interactive 2D drawing library.
326 lines (325 loc) • 9.28 kB
TypeScript
/**
* Container class
* @class
* @extends {module:EventEmitter}
*/
export default class Container {
/**
* Define context opacity
* @param {CanvasRenderingContext2D} ctx - Drawing context
* @param {Number} opacity - Opacity value
*/
static setOpacity(ctx: CanvasRenderingContext2D, opacity: number): void;
/**
* Return an instance from a generic object
* @param {Object} definition - Container definition
* @return {Container}
*/
static from(definition: any): Container;
/**
* @typedef {Object} ContainerOptions
* @prop {Boolean} [shown=true] - Is shown
* @prop {Number} [opacity=null] - Opacity level from 0 to 1 (null mean inherited from parent)
* @prop {Number} [rotation=0] - Rotation ratio from 0 to 1 (clockwise)
* @prop {PositionDefinition} [rotationCenter=new Position()] - Center of rotation relative to this position
* @prop {Number|PositionDefinition} [scale=1] - Scaling ratio or a pair of value for horizontal and vertical scaling
* @prop {Number} [zIndex=1] - Depth ordering
* @prop {Component} [clip=null] - Other component used to clip the rendering
*/
/**
* @type {ContainerOptions}
*/
static get defaultOptions(): {
/**
* - Is shown
*/
/**
* - Is shown
*/
shown?: boolean;
/**
* - Opacity level from 0 to 1 (null mean inherited from parent)
*/
/**
* - Opacity level from 0 to 1 (null mean inherited from parent)
*/
opacity?: number;
/**
* - Rotation ratio from 0 to 1 (clockwise)
*/
/**
* - Rotation ratio from 0 to 1 (clockwise)
*/
rotation?: number;
/**
* - Center of rotation relative to this position
*/
/**
* - Center of rotation relative to this position
*/
rotationCenter?: PositionDefinition;
/**
* - Scaling ratio or a pair of value for horizontal and vertical scaling
*/
/**
* - Scaling ratio or a pair of value for horizontal and vertical scaling
*/
scale?: number | PositionDefinition;
/**
* - Depth ordering
*/
/**
* - Depth ordering
*/
zIndex?: number;
/**
* - Other component used to clip the rendering
*/
/**
* - Other component used to clip the rendering
*/
clip?: Component;
};
/**
* @typedef {Object} ContainerEvent
* @extends EventEmitterEvents
* @prop {String} attach - Container is append to a new parent
* @prop {String} detach - Container remove from it's parent
* @prop {String} draw - Container is drawn
* @prop {String} hide -
* @prop {String} show -
*/
/**
* @type {ContainerEvent}
*/
static get events(): any;
/**
* Container constructor
* @param {PositionDefinition} [positionDefinition] - Position in its container
* @param {ContainerOptions} [options] - Specific options
*/
constructor(positionDefinition?: PositionDefinition, options?: {
/**
* - Is shown
*/
shown?: boolean;
/**
* - Opacity level from 0 to 1 (null mean inherited from parent)
*/
opacity?: number;
/**
* - Rotation ratio from 0 to 1 (clockwise)
*/
rotation?: number;
/**
* - Center of rotation relative to this position
*/
rotationCenter?: PositionDefinition;
/**
* - Scaling ratio or a pair of value for horizontal and vertical scaling
*/
scale?: number | PositionDefinition;
/**
* - Depth ordering
*/
zIndex?: number;
/**
* - Other component used to clip the rendering
*/
clip?: Component;
});
/**
* @type {Position}
*/
position: Position;
/**
* @type {ContainerOptions}
*/
options: {
/**
* - Is shown
*/
shown?: boolean;
/**
* - Opacity level from 0 to 1 (null mean inherited from parent)
*/
opacity?: number;
/**
* - Rotation ratio from 0 to 1 (clockwise)
*/
rotation?: number;
/**
* - Center of rotation relative to this position
*/
rotationCenter?: PositionDefinition;
/**
* - Scaling ratio or a pair of value for horizontal and vertical scaling
*/
scale?: number | PositionDefinition;
/**
* - Depth ordering
*/
zIndex?: number;
/**
* - Other component used to clip the rendering
*/
clip?: Component;
};
/**
* @type {Array<Container>}
*/
children: Array<Container>;
/**
* @type {Container}
*/
parent: Container;
/**
* @type {Number}
*/
frameCount: number;
/**
* Define options for this container
* @param {ContainerOptions} [options={}] - Options to override
* @return {Container} Itself
*/
setOptions(options?: {
/**
* - Is shown
*/
shown?: boolean;
/**
* - Opacity level from 0 to 1 (null mean inherited from parent)
*/
opacity?: number;
/**
* - Rotation ratio from 0 to 1 (clockwise)
*/
rotation?: number;
/**
* - Center of rotation relative to this position
*/
rotationCenter?: PositionDefinition;
/**
* - Scaling ratio or a pair of value for horizontal and vertical scaling
*/
scale?: number | PositionDefinition;
/**
* - Depth ordering
*/
zIndex?: number;
/**
* - Other component used to clip the rendering
*/
clip?: Component;
}): Container;
/**
* Container can't be hovered
* @return {Boolean}
*/
isHover(): boolean;
/**
* Add another container as a child
* @param {...Container} child - Another container
* @return {Container} Itself
*/
add(...child: Container[]): Container;
/**
* Remove a child from the list
* @param {...Container} child - Child to remove
* @return {Container} Itself
*/
remove(...child: Container[]): Container;
/**
* Remove all its children
* @return {Container} Itself
*/
empty(): Container;
/**
* Remove itself from its parent
* @return {Container} Itself
*/
delete(): Container;
/**
* Return a promise for the associated scene
* @return {Promise<Scene>}
*/
getScene(): Promise<Scene>;
/**
* Return its highest parent
* @return {Container} Itself
*/
getRoot(): Container;
/**
* Get this container's absolute position (up to it's utmost parent)
* @return {Position}
*/
getAbsolutePosition(): Position;
/**
* Bubble the event to its parent
* @param {BaseEvent} event - Event to fire
* @return {Container} Itself
*/
fire(event: BaseEvent): Container;
/**
* Find the target at a position
* @param {Position} position - Any position
* @param {CanvasRenderingContext2D} ctx - Drawing context to apply paths
* @return {Container} Itself
*/
getTarget(position: Position, ctx: CanvasRenderingContext2D): Container;
/**
* Set variables of the context according to specified options
* @param {CanvasRenderingContext2D} ctx - Drawing context
* @return {Container} Itself
*/
setContext(ctx: CanvasRenderingContext2D): Container;
/**
* Call the render method of all children
* @param {CanvasRenderingContext2D} ctx - Drawing context
* @return {Container} Itself
*/
render(ctx: CanvasRenderingContext2D): Container;
/**
* Do nothing on Container, override it to add behavior
* @return {Container} Itself
*/
makePath(): Container;
/**
* Display it
* @return {Container} Itself
*/
show(): Container;
/**
* Hide it
* @return {Container} Itself
*/
hide(): Container;
/**
* Define if this is an ancestor of another container
* @param {Container} container - Any container
* @return {Boolean}
*/
isAncestorOf(container: Container): boolean;
/**
* @callback ancestryCallback
* @param {Container} ancestor
*/
/**
* Execute an action on every ancestor of this
* @param {ancestryCallback} callback - Function to execute on each ancestor
* @param {Container} [until=null] - Define a ancestor where to stop the climbing
*/
climbAncestry(callback: (ancestor: Container) => any, until?: Container): void;
/**
* Return a json ready object
* @return {Object}
*/
toJSON(): any;
/**
* Create a copy of any descendant of Container
* @return {Container}
*/
clone(): Container;
}
import Position from "@pencil.js/position";
import BaseEvent from "@pencil.js/base-event";