pencil.js

/** * @module Component */ /** * Abstract class for visual component * @abstract * @class * @extends {module:Container} */ export default class Component { /** * @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 {Boolean|Array} [dashed=false] - Should the line be dashed, you can also specify the dash pattern (ex: [4, 4] or Component.dashes.dots) * @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 * @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(): { /** * - Normal behavior */ default: string; /** * - No visible cursor */ none: string; /** * - Possible to extends context-menu */ contextMenu: string; /** * - Display help */ help: string; /** * - Can be clicked */ pointer: string; /** * - Process running in background */ progress: string; /** * - Process running in foreground */ wait: string; /** * - Table cell selection */ cell: string; /** * - Precise selection */ crosshair: string; /** * - Text selection */ text: string; /** * - Vertical test selection */ textVertical: string; /** * - Can create a shortcut */ alias: string; /** * - Can be copied */ copy: string; /** * - Move around */ move: string; /** * - Drop not allowed */ noDrop: string; /** * - Action not allowed */ notAllowed: string; /** * - Can be grabbed */ grab: string; /** * - Currently grabbing */ grabbing: string; /** * - Scroll in all direction */ allScroll: string; /** * - Horizontal resize */ colResize: string; /** * - Vertical resize */ rowResize: string; /** * - Resize the north border */ nResize: string; /** * - Resize the east border */ eResize: string; /** * - Resize the south border */ sResize: string; /** * - Resize the west border */ wResize: string; /** * - Resize the north-east corner */ neResize: string; /** * - Resize the south-east corner */ seResize: string; /** * - Resize the north-west corner */ swResize: string; /** * - Resize the north-west corner */ nwResize: string; /** * - Horizontal resize */ ewResize: string; /** * - Vertical resize */ nsResize: string; /** * - Diagonal resize (top-right to bottom-left) */ neswResize: string; /** * - Diagonal resize (top-left to bottom-right) */ nwseResize: string; /** * - Zoom in */ zoomIn: string; /** * - Zoom out */ zoomOut: string; /** * - Alias for "alias" */ link: string; /** * - Alias for "rowResize" */ verticalResize: string; /** * - Alias for "colResize" */ horizontalResize: string; /** * - Alias for "nResize" */ topResize: string; /** * - Alias for "eResize" */ rightResize: string; /** * - Alias for "sResize" */ bottomResize: string; /** * - Alias for "wResize" */ leftResize: string; }; /** * @typedef {Object} LineJoins * @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(): { /** * - Join segment by extending the line edges until they meet */ miter: string; /** * - Join with a circle tangent to line edges */ round: string; /** * - Join with a straight line between the line edges */ bevel: string; }; /** * @typedef {Object} DashPatterns * @prop {Array<Number>} default - Simple dash * @prop {Array<Number>} dots - Simple dots * @prop {Array<Number>} long - Longer dash * @prop {Array<Number>} sewing - Alternating pattern of short and long dash */ /** * @type {DashPatterns} */ static get dashes(): { /** * - Simple dash */ default: Array<number>; /** * - Simple dots */ dots: Array<number>; /** * - Longer dash */ long: Array<number>; /** * - Alternating pattern of short and long dash */ sewing: Array<number>; }; /** * Component constructor * @param {PositionDefinition} positionDefinition - Position in space * @param {ComponentOptions} [options] - Drawing options */ constructor(positionDefinition: PositionDefinition, options?: any); /** * @type {Path2D} */ path: Path2D; /** * @type {Boolean} */ isClicked: boolean; /** * @type {Boolean} */ isHovered: boolean; /** * Return the relative origin position of draw * @return {Position} */ getOrigin(): Position; /** * Define options for this component * @param {ComponentOptions} [options={}] - Options to override * @return {Component} Itself */ setOptions(options?: any): Component; /** * 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; /** * @inheritDoc * @return {Component} Itself */ setContext(ctx: any): Component; /** * Make the path and trace it * @param {CanvasRenderingContext2D} ctx - Drawing context * @return {Component} Itself */ makePath(ctx: CanvasRenderingContext2D): Component; /** * Every component should have a trace function * @throws {ReferenceError} */ trace(): void; /** * Define if is hover a position * @param {PositionDefinition} positionDefinition - Any position * @param {CanvasRenderingContext2D} [ctx] - Context use for calculation * @return {Boolean} */ isHover(positionDefinition: PositionDefinition, ctx?: CanvasRenderingContext2D): boolean; } import Position from "@pencil.js/position";