| 1 | import { Transform } from './Util.js';
|
|---|
| 2 | import { SceneCanvas, Canvas } from './Canvas.js';
|
|---|
| 3 | import { Container } from './Container.js';
|
|---|
| 4 | import { GetSet, Vector2d, IRect } from './types.js';
|
|---|
| 5 | import { Stage } from './Stage.js';
|
|---|
| 6 | import { Context } from './Context.js';
|
|---|
| 7 | import { Shape } from './Shape.js';
|
|---|
| 8 | import { Layer } from './Layer.js';
|
|---|
| 9 | export type Filter = (this: Node, imageData: ImageData) => void;
|
|---|
| 10 | type globalCompositeOperationType = '' | 'source-over' | 'source-in' | 'source-out' | 'source-atop' | 'destination-over' | 'destination-in' | 'destination-out' | 'destination-atop' | 'lighter' | 'copy' | 'xor' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity';
|
|---|
| 11 | export interface NodeConfig {
|
|---|
| 12 | [index: string]: any;
|
|---|
| 13 | x?: number;
|
|---|
| 14 | y?: number;
|
|---|
| 15 | width?: number;
|
|---|
| 16 | height?: number;
|
|---|
| 17 | visible?: boolean;
|
|---|
| 18 | listening?: boolean;
|
|---|
| 19 | id?: string;
|
|---|
| 20 | name?: string;
|
|---|
| 21 | opacity?: number;
|
|---|
| 22 | scale?: Vector2d;
|
|---|
| 23 | scaleX?: number;
|
|---|
| 24 | skewX?: number;
|
|---|
| 25 | skewY?: number;
|
|---|
| 26 | scaleY?: number;
|
|---|
| 27 | rotation?: number;
|
|---|
| 28 | rotationDeg?: number;
|
|---|
| 29 | offset?: Vector2d;
|
|---|
| 30 | offsetX?: number;
|
|---|
| 31 | offsetY?: number;
|
|---|
| 32 | draggable?: boolean;
|
|---|
| 33 | dragDistance?: number;
|
|---|
| 34 | dragBoundFunc?: (this: Node, pos: Vector2d) => Vector2d;
|
|---|
| 35 | preventDefault?: boolean;
|
|---|
| 36 | globalCompositeOperation?: globalCompositeOperationType;
|
|---|
| 37 | filters?: Array<Filter>;
|
|---|
| 38 | }
|
|---|
| 39 | type NodeEventMap = GlobalEventHandlersEventMap & {
|
|---|
| 40 | [index: string]: any;
|
|---|
| 41 | };
|
|---|
| 42 | export interface KonvaEventObject<EventType> {
|
|---|
| 43 | type: string;
|
|---|
| 44 | target: Shape | Stage;
|
|---|
| 45 | evt: EventType;
|
|---|
| 46 | pointerId: number;
|
|---|
| 47 | currentTarget: Node;
|
|---|
| 48 | cancelBubble: boolean;
|
|---|
| 49 | child?: Node;
|
|---|
| 50 | }
|
|---|
| 51 | export type KonvaEventListener<This, EventType> = (this: This, ev: KonvaEventObject<EventType>) => void;
|
|---|
| 52 | export declare abstract class Node<Config extends NodeConfig = NodeConfig> {
|
|---|
| 53 | _id: number;
|
|---|
| 54 | eventListeners: {
|
|---|
| 55 | [index: string]: Array<{
|
|---|
| 56 | name: string;
|
|---|
| 57 | handler: Function;
|
|---|
| 58 | }>;
|
|---|
| 59 | };
|
|---|
| 60 | attrs: any;
|
|---|
| 61 | index: number;
|
|---|
| 62 | _allEventListeners: null | Array<Function>;
|
|---|
| 63 | parent: Container | null;
|
|---|
| 64 | _cache: Map<string, any>;
|
|---|
| 65 | _attachedDepsListeners: Map<string, boolean>;
|
|---|
| 66 | _lastPos: Vector2d | null;
|
|---|
| 67 | _attrsAffectingSize: string[];
|
|---|
| 68 | _batchingTransformChange: boolean;
|
|---|
| 69 | _needClearTransformCache: boolean;
|
|---|
| 70 | _filterUpToDate: boolean;
|
|---|
| 71 | _isUnderCache: boolean;
|
|---|
| 72 | nodeType: string;
|
|---|
| 73 | className: string;
|
|---|
| 74 | _dragEventId: number | null;
|
|---|
| 75 | _shouldFireChangeEvents: boolean;
|
|---|
| 76 | constructor(config?: Config);
|
|---|
| 77 | hasChildren(): boolean;
|
|---|
| 78 | _clearCache(attr?: string): void;
|
|---|
| 79 | _getCache(attr: string, privateGetter: Function): any;
|
|---|
| 80 | _calculate(name: string, deps: Array<string>, getter: Function): any;
|
|---|
| 81 | _getCanvasCache(): any;
|
|---|
| 82 | _clearSelfAndDescendantCache(attr?: string): void;
|
|---|
| 83 | clearCache(): this;
|
|---|
| 84 | cache(config?: {
|
|---|
| 85 | x?: number;
|
|---|
| 86 | y?: number;
|
|---|
| 87 | width?: number;
|
|---|
| 88 | height?: number;
|
|---|
| 89 | drawBorder?: boolean;
|
|---|
| 90 | offset?: number;
|
|---|
| 91 | pixelRatio?: number;
|
|---|
| 92 | imageSmoothingEnabled?: boolean;
|
|---|
| 93 | hitCanvasPixelRatio?: number;
|
|---|
| 94 | }): this | undefined;
|
|---|
| 95 | isCached(): boolean;
|
|---|
| 96 | abstract drawScene(canvas?: Canvas, top?: Node, bufferCanvas?: Canvas): void;
|
|---|
| 97 | abstract drawHit(canvas?: Canvas, top?: Node): void;
|
|---|
| 98 | getClientRect(config?: {
|
|---|
| 99 | skipTransform?: boolean;
|
|---|
| 100 | skipShadow?: boolean;
|
|---|
| 101 | skipStroke?: boolean;
|
|---|
| 102 | relativeTo?: Container;
|
|---|
| 103 | }): {
|
|---|
| 104 | x: number;
|
|---|
| 105 | y: number;
|
|---|
| 106 | width: number;
|
|---|
| 107 | height: number;
|
|---|
| 108 | };
|
|---|
| 109 | _transformedRect(rect: IRect, top?: Node | null): {
|
|---|
| 110 | x: number;
|
|---|
| 111 | y: number;
|
|---|
| 112 | width: number;
|
|---|
| 113 | height: number;
|
|---|
| 114 | };
|
|---|
| 115 | _drawCachedSceneCanvas(context: Context): void;
|
|---|
| 116 | _drawCachedHitCanvas(context: Context): void;
|
|---|
| 117 | _getCachedSceneCanvas(): any;
|
|---|
| 118 | on<K extends keyof NodeEventMap>(evtStr: K, handler: KonvaEventListener<this, NodeEventMap[K]>): void | this;
|
|---|
| 119 | off(evtStr?: string, callback?: Function): this;
|
|---|
| 120 | dispatchEvent(evt: any): this;
|
|---|
| 121 | addEventListener(type: string, handler: (e: Event) => void): this;
|
|---|
| 122 | removeEventListener(type: string): this;
|
|---|
| 123 | _delegate(event: string, selector: string, handler: (e: Event) => void): void;
|
|---|
| 124 | remove(): this;
|
|---|
| 125 | _clearCaches(): void;
|
|---|
| 126 | _remove(): void;
|
|---|
| 127 | destroy(): this;
|
|---|
| 128 | getAttr(attr: string): any;
|
|---|
| 129 | getAncestors(): Node<NodeConfig>[];
|
|---|
| 130 | getAttrs(): Config & Record<string, any>;
|
|---|
| 131 | setAttrs(config: any): this;
|
|---|
| 132 | isListening(): any;
|
|---|
| 133 | _isListening(relativeTo?: Node): boolean;
|
|---|
| 134 | isVisible(): any;
|
|---|
| 135 | _isVisible(relativeTo?: Node): boolean;
|
|---|
| 136 | shouldDrawHit(top?: Node, skipDragCheck?: boolean): any;
|
|---|
| 137 | show(): this;
|
|---|
| 138 | hide(): this;
|
|---|
| 139 | getZIndex(): number;
|
|---|
| 140 | getAbsoluteZIndex(): number;
|
|---|
| 141 | getDepth(): number;
|
|---|
| 142 | _batchTransformChanges(func: any): void;
|
|---|
| 143 | setPosition(pos: Vector2d): this;
|
|---|
| 144 | getPosition(): {
|
|---|
| 145 | x: number;
|
|---|
| 146 | y: number;
|
|---|
| 147 | };
|
|---|
| 148 | getRelativePointerPosition(): {
|
|---|
| 149 | x: number;
|
|---|
| 150 | y: number;
|
|---|
| 151 | } | null;
|
|---|
| 152 | getAbsolutePosition(top?: Node): {
|
|---|
| 153 | x: number;
|
|---|
| 154 | y: number;
|
|---|
| 155 | };
|
|---|
| 156 | setAbsolutePosition(pos: Vector2d): this;
|
|---|
| 157 | _setTransform(trans: any): void;
|
|---|
| 158 | _clearTransform(): {
|
|---|
| 159 | x: number;
|
|---|
| 160 | y: number;
|
|---|
| 161 | rotation: number;
|
|---|
| 162 | scaleX: number;
|
|---|
| 163 | scaleY: number;
|
|---|
| 164 | offsetX: number;
|
|---|
| 165 | offsetY: number;
|
|---|
| 166 | skewX: number;
|
|---|
| 167 | skewY: number;
|
|---|
| 168 | };
|
|---|
| 169 | move(change: Vector2d): this;
|
|---|
| 170 | _eachAncestorReverse(func: any, top: any): void;
|
|---|
| 171 | rotate(theta: number): this;
|
|---|
| 172 | moveToTop(): boolean;
|
|---|
| 173 | moveUp(): boolean;
|
|---|
| 174 | moveDown(): boolean;
|
|---|
| 175 | moveToBottom(): boolean;
|
|---|
| 176 | setZIndex(zIndex: any): this;
|
|---|
| 177 | getAbsoluteOpacity(): any;
|
|---|
| 178 | _getAbsoluteOpacity(): number;
|
|---|
| 179 | moveTo(newContainer: any): this;
|
|---|
| 180 | toObject(): {
|
|---|
| 181 | attrs: Config & Record<string, any>;
|
|---|
| 182 | className: string;
|
|---|
| 183 | children?: any[] | undefined;
|
|---|
| 184 | };
|
|---|
| 185 | toJSON(): string;
|
|---|
| 186 | getParent(): Container<Node<NodeConfig>> | null;
|
|---|
| 187 | findAncestors(selector: string | Function, includeSelf?: boolean, stopNode?: Node): Node<NodeConfig>[];
|
|---|
| 188 | isAncestorOf(node: Node): boolean;
|
|---|
| 189 | findAncestor(selector: string | Function, includeSelf?: boolean, stopNode?: Container): Node<NodeConfig>;
|
|---|
| 190 | _isMatch(selector: string | Function): any;
|
|---|
| 191 | getLayer(): Layer | null;
|
|---|
| 192 | getStage(): Stage | null;
|
|---|
| 193 | _getStage(): Stage | null;
|
|---|
| 194 | fire(eventType: string, evt?: any, bubble?: boolean): this;
|
|---|
| 195 | getAbsoluteTransform(top?: Node | null): Transform;
|
|---|
| 196 | _getAbsoluteTransform(top?: Node): Transform;
|
|---|
| 197 | getAbsoluteScale(top?: Node): {
|
|---|
| 198 | x: number;
|
|---|
| 199 | y: number;
|
|---|
| 200 | };
|
|---|
| 201 | getAbsoluteRotation(): number;
|
|---|
| 202 | getTransform(): Transform;
|
|---|
| 203 | _getTransform(): Transform;
|
|---|
| 204 | clone(obj?: any): any;
|
|---|
| 205 | _toKonvaCanvas(config: any): SceneCanvas;
|
|---|
| 206 | toCanvas(config?: any): HTMLCanvasElement;
|
|---|
| 207 | toDataURL(config?: {
|
|---|
| 208 | x?: number;
|
|---|
| 209 | y?: number;
|
|---|
| 210 | width?: number;
|
|---|
| 211 | height?: number;
|
|---|
| 212 | pixelRatio?: number;
|
|---|
| 213 | mimeType?: string;
|
|---|
| 214 | quality?: number;
|
|---|
| 215 | callback?: (str: string) => void;
|
|---|
| 216 | }): string;
|
|---|
| 217 | toImage(config?: {
|
|---|
| 218 | x?: number;
|
|---|
| 219 | y?: number;
|
|---|
| 220 | width?: number;
|
|---|
| 221 | height?: number;
|
|---|
| 222 | pixelRatio?: number;
|
|---|
| 223 | mimeType?: string;
|
|---|
| 224 | quality?: number;
|
|---|
| 225 | callback?: (img: HTMLImageElement) => void;
|
|---|
| 226 | }): Promise<unknown>;
|
|---|
| 227 | toBlob(config?: {
|
|---|
| 228 | x?: number;
|
|---|
| 229 | y?: number;
|
|---|
| 230 | width?: number;
|
|---|
| 231 | height?: number;
|
|---|
| 232 | pixelRatio?: number;
|
|---|
| 233 | mimeType?: string;
|
|---|
| 234 | quality?: number;
|
|---|
| 235 | callback?: (blob: Blob | null) => void;
|
|---|
| 236 | }): Promise<unknown>;
|
|---|
| 237 | setSize(size: any): this;
|
|---|
| 238 | getSize(): {
|
|---|
| 239 | width: number;
|
|---|
| 240 | height: number;
|
|---|
| 241 | };
|
|---|
| 242 | getClassName(): string;
|
|---|
| 243 | getType(): string;
|
|---|
| 244 | getDragDistance(): number;
|
|---|
| 245 | _off(type: any, name?: any, callback?: any): void;
|
|---|
| 246 | _fireChangeEvent(attr: any, oldVal: any, newVal: any): void;
|
|---|
| 247 | addName(name: any): this;
|
|---|
| 248 | hasName(name: any): boolean;
|
|---|
| 249 | removeName(name: any): this;
|
|---|
| 250 | setAttr(attr: any, val: any): this;
|
|---|
| 251 | _requestDraw(): void;
|
|---|
| 252 | _setAttr(key: any, val: any): void;
|
|---|
| 253 | _setComponentAttr(key: any, component: any, val: any): void;
|
|---|
| 254 | _fireAndBubble(eventType: any, evt: any, compareShape?: any): void;
|
|---|
| 255 | _getProtoListeners(eventType: any): any;
|
|---|
| 256 | _fire(eventType: any, evt: any): void;
|
|---|
| 257 | draw(): this;
|
|---|
| 258 | _createDragElement(evt: any): void;
|
|---|
| 259 | startDrag(evt?: any, bubbleEvent?: boolean): void;
|
|---|
| 260 | _setDragPosition(evt: any, elem: any): void;
|
|---|
| 261 | stopDrag(evt?: any): void;
|
|---|
| 262 | setDraggable(draggable: any): void;
|
|---|
| 263 | isDragging(): boolean;
|
|---|
| 264 | _listenDrag(): void;
|
|---|
| 265 | _dragChange(): void;
|
|---|
| 266 | _dragCleanup(): void;
|
|---|
| 267 | isClientRectOnScreen(margin?: {
|
|---|
| 268 | x: number;
|
|---|
| 269 | y: number;
|
|---|
| 270 | }): boolean;
|
|---|
| 271 | preventDefault: GetSet<boolean, this>;
|
|---|
| 272 | blue: GetSet<number, this>;
|
|---|
| 273 | brightness: GetSet<number, this>;
|
|---|
| 274 | contrast: GetSet<number, this>;
|
|---|
| 275 | blurRadius: GetSet<number, this>;
|
|---|
| 276 | luminance: GetSet<number, this>;
|
|---|
| 277 | green: GetSet<number, this>;
|
|---|
| 278 | alpha: GetSet<number, this>;
|
|---|
| 279 | hue: GetSet<number, this>;
|
|---|
| 280 | kaleidoscopeAngle: GetSet<number, this>;
|
|---|
| 281 | kaleidoscopePower: GetSet<number, this>;
|
|---|
| 282 | levels: GetSet<number, this>;
|
|---|
| 283 | noise: GetSet<number, this>;
|
|---|
| 284 | pixelSize: GetSet<number, this>;
|
|---|
| 285 | red: GetSet<number, this>;
|
|---|
| 286 | saturation: GetSet<number, this>;
|
|---|
| 287 | threshold: GetSet<number, this>;
|
|---|
| 288 | value: GetSet<number, this>;
|
|---|
| 289 | dragBoundFunc: GetSet<(this: Node, pos: Vector2d, event: any) => Vector2d, this>;
|
|---|
| 290 | draggable: GetSet<boolean, this>;
|
|---|
| 291 | dragDistance: GetSet<number, this>;
|
|---|
| 292 | embossBlend: GetSet<boolean, this>;
|
|---|
| 293 | embossDirection: GetSet<string, this>;
|
|---|
| 294 | embossStrength: GetSet<number, this>;
|
|---|
| 295 | embossWhiteLevel: GetSet<number, this>;
|
|---|
| 296 | enhance: GetSet<number, this>;
|
|---|
| 297 | filters: GetSet<Filter[], this>;
|
|---|
| 298 | position: GetSet<Vector2d, this>;
|
|---|
| 299 | absolutePosition: GetSet<Vector2d, this>;
|
|---|
| 300 | size: GetSet<{
|
|---|
| 301 | width: number;
|
|---|
| 302 | height: number;
|
|---|
| 303 | }, this>;
|
|---|
| 304 | id: GetSet<string, this>;
|
|---|
| 305 | listening: GetSet<boolean, this>;
|
|---|
| 306 | name: GetSet<string, this>;
|
|---|
| 307 | offset: GetSet<Vector2d, this>;
|
|---|
| 308 | offsetX: GetSet<number, this>;
|
|---|
| 309 | offsetY: GetSet<number, this>;
|
|---|
| 310 | opacity: GetSet<number, this>;
|
|---|
| 311 | rotation: GetSet<number, this>;
|
|---|
| 312 | zIndex: GetSet<number, this>;
|
|---|
| 313 | scale: GetSet<Vector2d | undefined, this>;
|
|---|
| 314 | scaleX: GetSet<number, this>;
|
|---|
| 315 | scaleY: GetSet<number, this>;
|
|---|
| 316 | skew: GetSet<Vector2d, this>;
|
|---|
| 317 | skewX: GetSet<number, this>;
|
|---|
| 318 | skewY: GetSet<number, this>;
|
|---|
| 319 | to: (params: AnimTo) => void;
|
|---|
| 320 | transformsEnabled: GetSet<string, this>;
|
|---|
| 321 | visible: GetSet<boolean, this>;
|
|---|
| 322 | width: number;
|
|---|
| 323 | height: GetSet<number, this>;
|
|---|
| 324 | x: GetSet<number, this>;
|
|---|
| 325 | y: GetSet<number, this>;
|
|---|
| 326 | globalCompositeOperation: GetSet<globalCompositeOperationType, this>;
|
|---|
| 327 | static create(data: any, container?: any): any;
|
|---|
| 328 | static _createNode(obj: any, container?: any): any;
|
|---|
| 329 | }
|
|---|
| 330 | interface AnimTo extends NodeConfig {
|
|---|
| 331 | onFinish?: Function;
|
|---|
| 332 | onUpdate?: Function;
|
|---|
| 333 | duration?: number;
|
|---|
| 334 | }
|
|---|
| 335 | export {};
|
|---|
