diff --git a/src/Container.ts b/src/Container.ts index 36d257d9..b5fc5751 100644 --- a/src/Container.ts +++ b/src/Container.ts @@ -11,6 +11,7 @@ export type ClipFuncOutput = | void | [Path2D | CanvasFillRule] | [Path2D, CanvasFillRule]; + export interface ContainerConfig extends NodeConfig { clearBeforeDraw?: boolean; clipFunc?: (ctx: SceneContext) => ClipFuncOutput; @@ -32,7 +33,7 @@ export interface ContainerConfig extends NodeConfig { */ export abstract class Container< ChildType extends Node = Node, - Config extends ContainerConfig = ContainerConfig + Config extends ContainerConfig = ContainerConfig, > extends Node { children: Array = []; diff --git a/src/Node.ts b/src/Node.ts index b9103a1e..c68a8f93 100644 --- a/src/Node.ts +++ b/src/Node.ts @@ -135,7 +135,7 @@ type globalCompositeOperationType = | 'luminosity'; // allow any custom attribute -export type NodeConfig = {}> = Props & { +export type NodeConfig = { x?: number; y?: number; width?: number; @@ -161,7 +161,8 @@ export type NodeConfig = {}> = Props & { preventDefault?: boolean; globalCompositeOperation?: globalCompositeOperationType; filters?: Filters; -} + [string: string]: any; +}; // CONSTANTS const ABSOLUTE_OPACITY = 'absoluteOpacity', @@ -1024,7 +1025,9 @@ export abstract class Node { * @example * var x = node.getAttr('x'); */ - getAttr>(attr: K): K extends keyof AttrConfig ? AttrConfig[K] : any { + getAttr>( + attr: K + ): K extends keyof AttrConfig ? AttrConfig[K] : any { const method = 'get' + Util._capitalize(attr as string); if (Util._isFunction((this as any)[method])) { return (this as any)[method](); @@ -1060,7 +1063,7 @@ export abstract class Node { * @returns {Object} */ getAttrs(): Config { - return (this.attrs || {}); + return this.attrs || {}; } /** * set multiple attrs at once using an object literal @@ -1663,7 +1666,7 @@ export abstract class Node { delete attrs[key]; defaultValue = getter ? getter.call(this) : null; // restore attr value - attrs[key] = val; + (attrs as any)[key] = val; if (defaultValue !== val) { (obj.attrs as any)[key] = val; } @@ -2399,7 +2402,10 @@ export abstract class Node { * @example * node.setAttr('x', 5); */ - setAttr>(attr: K, val: K extends keyof AttrConfig ? AttrConfig[K] : any) { + setAttr>( + attr: K, + val: K extends keyof AttrConfig ? AttrConfig[K] : any + ) { const func = this[SET + Util._capitalize(attr as string)]; if (Util._isFunction(func)) { @@ -2416,7 +2422,10 @@ export abstract class Node { drawNode?.batchDraw(); } } - _setAttr>(key: K, val: K extends keyof AttrConfig ? AttrConfig[K] : any) { + _setAttr>( + key: K, + val: K extends keyof AttrConfig ? AttrConfig[K] : any + ) { const oldVal = this.attrs[key]; if (oldVal === val && !Util.isObject(val)) { return; @@ -2872,7 +2881,7 @@ export abstract class Node { } } -interface AnimTo extends NodeConfig> { +interface AnimTo extends NodeConfig { onFinish?: Function; onUpdate?: Function; duration?: number; diff --git a/src/Shape.ts b/src/Shape.ts index b300a642..1c849ea6 100644 --- a/src/Shape.ts +++ b/src/Shape.ts @@ -26,7 +26,7 @@ export type ShapeConfigHandler = { export type LineJoin = 'round' | 'bevel' | 'miter'; export type LineCap = 'butt' | 'round' | 'square'; -export type ShapeConfig = {}> = NodeConfig & { +export type ShapeConfig = NodeConfig & { fill?: string | CanvasGradient; fillPatternImage?: HTMLImageElement; fillPatternX?: number; @@ -82,7 +82,7 @@ export type ShapeConfig = {}> = NodeConfig = {}> = ShapeConfig & { +export type RectConfig = ShapeConfig & { cornerRadius?: number | number[]; -} +}; /** * Rect constructor @@ -30,7 +30,7 @@ export type RectConfig = {}> = ShapeConfig = {}> extends Shape> { +export class Rect extends Shape { _sceneFunc(context: Context) { const cornerRadius = this.cornerRadius(), width = this.width(),