pencil.js/dist/modules/component/component.d.ts

Nice modular interactive 2D drawing library.

/**
 * @module Component
 */
/**
 * Abstract class for visual component
 * @abstract
 * @class
 * @extends Container
 */
export default class Component extends Container {
    /**
     * @typedef {Object} ShadowOptions
     * @prop {Number} [blur=0] - Spread of the shadow around the component
     * @prop {PositionDefinition} [position=new Position()] - Position of the shadow relative to the component
     * @prop {String|ColorDefinition} [color=null] - Color of the shadow
     */
    /**
     * @typedef {Object} ComponentOptions
     * @extends ContainerOptions
     * @prop {String|ColorDefinition} [fill="#000"] - Color used to fill, set to null for transparent
     * @prop {String|ColorDefinition} [stroke=null] - Color used to stroke, set to null for transparent
     * @prop {Number} [strokeWidth=2] - Stroke line thickness in pixels
     * @prop {String} [cursor=Component.cursors.default] - Cursor to use when hover
     * @prop {String} [join=Component.joins.miter] - How lines join between them
     * @prop {PositionDefinition} [origin=new Position()] - Relative offset
     * @prop {ShadowOptions} [shadow] - Set of options to set a shadow
     */
    /**
     * @type {ComponentOptions}
     */
    static get defaultOptions(): any;
    /**
     * @typedef {Object} Cursors
     * @enum {String}
     * @prop {String} default - Normal behavior
     * @prop {String} none - No visible cursor
     * @prop {String} contextMenu - Possible to extends context-menu
     * @prop {String} help - Display help
     * @prop {String} pointer - Can be clicked
     * @prop {String} progress - Process running in background
     * @prop {String} wait - Process running in foreground
     * @prop {String} cell - Table cell selection
     * @prop {String} crosshair - Precise selection
     * @prop {String} text - Text selection
     * @prop {String} textVertical - Vertical test selection
     * @prop {String} alias - Can create a shortcut
     * @prop {String} copy - Can be copied
     * @prop {String} move - Move around
     * @prop {String} noDrop - Drop not allowed
     * @prop {String} notAllowed - Action not allowed
     * @prop {String} grab - Can be grabbed
     * @prop {String} grabbing - Currently grabbing
     * @prop {String} allScroll - Scroll in all direction
     * @prop {String} colResize - Horizontal resize
     * @prop {String} rowResize - Vertical resize
     * @prop {String} nResize - Resize the north border
     * @prop {String} eResize - Resize the east border
     * @prop {String} sResize - Resize the south border
     * @prop {String} wResize - Resize the west border
     * @prop {String} neResize - Resize the north-east corner
     * @prop {String} seResize - Resize the south-east corner
     * @prop {String} swResize - Resize the north-west corner
     * @prop {String} nwResize - Resize the north-west corner
     * @prop {String} ewResize - Horizontal resize
     * @prop {String} nsResize - Vertical resize
     * @prop {String} neswResize - Diagonal resize (top-right to bottom-left)
     * @prop {String} nwseResize - Diagonal resize (top-left to bottom-right)
     * @prop {String} zoomIn - Zoom in
     * @prop {String} zoomOut - Zoom out
     * @prop {String} link - Alias for "alias"
     * @prop {String} verticalResize - Alias for "rowResize"
     * @prop {String} horizontalResize - Alias for "colResize"
     * @prop {String} topResize - Alias for "nResize"
     * @prop {String} rightResize - Alias for "eResize"
     * @prop {String} bottomResize - Alias for "sResize"
     * @prop {String} leftResize - Alias for "wResize"
     */
    /**
     * All available cursors
     * {@link https://www.w3.org/TR/2017/WD-css-ui-4-20171222/#cursor}
     * @type {Cursors}
     */
    static get cursors(): any;
    /**
     * @typedef {Object} LineJoins
     * @enum {String}
     * @prop {String} miter - Join segment by extending the line edges until they meet
     * @prop {String} round - Join with a circle tangent to line edges
     * @prop {String} bevel - Join with a straight line between the line edges
     */
    /**
     * @type {LineJoins}
     */
    static get joins(): any;
    /**
     * Component constructor
     * @param {PositionDefinition} positionDefinition - Position in space
     * @param {ComponentOptions} [options] - Drawing options
     */
    constructor(positionDefinition: any, options?: ComponentOptions);
    /**
     * @type {Path2D}
     */
    path: Path2D;
    /**
     * @type {Boolean}
     */
    isClicked: boolean;
    /**
     * @type {Boolean}
     */
    isHovered: boolean;
    /**
     * Return the relative origin position of draw
     * @return {Position}
     */
    getOrigin(): Position;
    /**
     * Tell if a component will need to be filled
     * @return {Boolean}
     */
    get willFill(): boolean;
    /**
     * Tell if a component will need to be stroked
     * @return {*|boolean}
     */
    get willStroke(): any;
    /**
     * Every component should have a trace function
     * @throws {ReferenceError}
     */
    trace(): void;
}
export type ShadowOptions = {
    /**
     * - Spread of the shadow around the component
     */
    blur?: number;
    /**
     * - Position of the shadow relative to the component
     */
    position?: any;
    /**
     * - Color of the shadow
     */
    color?: string | any;
};
export type ComponentOptions = any;
export type Cursors = any;
export type LineJoins = any;
import Container from "@pencil.js/container";
import Position from "@pencil.js/position";