From 3b3d135099efdcc4ed4afca92daf036a58912054 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Fri, 16 Oct 2020 14:34:14 +0800 Subject: [PATCH 1/2] export box and fix type problem --- src/Context.ts | 23 +++++++++++++++++++++-- src/Layer.ts | 37 +++++++++++++++++-------------------- src/Shape.ts | 4 ++-- src/Stage.ts | 2 +- src/shapes/Image.ts | 17 ++++++++--------- src/shapes/Transformer.ts | 4 ++-- src/types.ts | 2 +- 7 files changed, 52 insertions(+), 37 deletions(-) diff --git a/src/Context.ts b/src/Context.ts index ea1fa279..7f9f2a32 100644 --- a/src/Context.ts +++ b/src/Context.ts @@ -369,7 +369,17 @@ export class Context { * @method * @name Konva.Context#drawImage */ - drawImage(a0, a1, a2, a3?, a4?, a5?, a6?, a7?, a8?) { + drawImage( + a0: CanvasImageSource, + a1: number, + a2: number, + a3?: number, + a4?: number, + a5?: number, + a6?: number, + a7?: number, + a8?: number + ) { var a = arguments, _context = this._context; @@ -386,7 +396,16 @@ export class Context { * @method * @name Konva.Context#ellipse */ - ellipse(a0, a1, a2, a3, a4, a5, a6, a7) { + ellipse( + a0: number, + a1: number, + a2: number, + a3: number, + a4: number, + a5: number, + a6: number, + a7?: boolean + ) { this._context.ellipse(a0, a1, a2, a3, a4, a5, a6, a7); } /** diff --git a/src/Layer.ts b/src/Layer.ts index 5992ab15..86a3d3e7 100644 --- a/src/Layer.ts +++ b/src/Layer.ts @@ -326,9 +326,7 @@ export class Layer extends Container { * // or if you interested in shape parent: * var group = layer.getIntersection({x: 50, y: 50}, 'Group'); */ - getIntersection(pos: Vector2d, selector?: string) { - var obj, i, intersectionOffset, shape; - + getIntersection(pos: Vector2d, selector?: string): Node | null { if (!this.isListening() || !this.isVisible()) { return null; } @@ -337,13 +335,13 @@ export class Layer extends Container { var spiralSearchDistance = 1; var continueSearch = false; while (true) { - for (i = 0; i < INTERSECTION_OFFSETS_LEN; i++) { - intersectionOffset = INTERSECTION_OFFSETS[i]; - obj = this._getIntersection({ + for (let i = 0; i < INTERSECTION_OFFSETS_LEN; i++) { + const intersectionOffset = INTERSECTION_OFFSETS[i]; + const obj = this._getIntersection({ x: pos.x + intersectionOffset.x * spiralSearchDistance, y: pos.y + intersectionOffset.y * spiralSearchDistance, }); - shape = obj.shape; + const shape = obj.shape; if (shape && selector) { return shape.findAncestor(selector, true); } else if (shape) { @@ -365,21 +363,20 @@ export class Layer extends Container { } } } - _getIntersection(pos) { - var ratio = this.hitCanvas.pixelRatio; - var p = this.hitCanvas.context.getImageData( - Math.round(pos.x * ratio), - Math.round(pos.y * ratio), - 1, - 1 - ).data, - p3 = p[3], - colorKey, - shape; + _getIntersection(pos: Vector2d): { shape?: Shape; antialiased?: boolean } { + const ratio = this.hitCanvas.pixelRatio; + const p = this.hitCanvas.context.getImageData( + Math.round(pos.x * ratio), + Math.round(pos.y * ratio), + 1, + 1 + ).data; + const p3 = p[3]; + // fully opaque pixel if (p3 === 255) { - colorKey = Util._rgbToHex(p[0], p[1], p[2]); - shape = shapes[HASH + colorKey]; + const colorKey = Util._rgbToHex(p[0], p[1], p[2]); + const shape = shapes[HASH + colorKey]; if (shape) { return { shape: shape, diff --git a/src/Shape.ts b/src/Shape.ts index 3e49341d..879f08a4 100644 --- a/src/Shape.ts +++ b/src/Shape.ts @@ -91,7 +91,7 @@ function getDummyContext(): CanvasRenderingContext2D { return dummyContext; } -export const shapes = {}; +export const shapes: { [key: string]: Shape } = {}; // TODO: idea - use only "remove" (or destroy method) // how? on add, check that every inner shape has reference in konva store with color @@ -172,7 +172,7 @@ export class Shape extends Node< constructor(config?: Config) { super(config); // set colorKey - var key; + let key: string; while (true) { key = Util.getRandomColor(); diff --git a/src/Stage.ts b/src/Stage.ts index 554bc3b4..dc92ef1e 100644 --- a/src/Stage.ts +++ b/src/Stage.ts @@ -360,7 +360,7 @@ export class Stage extends Container { layer.draw(); }); } - add(layer) { + add(layer: Layer) { if (arguments.length > 1) { for (var i = 0; i < arguments.length; i++) { this.add(arguments[i]); diff --git a/src/shapes/Image.ts b/src/shapes/Image.ts index 7b9de439..cc5cffae 100644 --- a/src/shapes/Image.ts +++ b/src/shapes/Image.ts @@ -5,6 +5,7 @@ import { getNumberValidator } from '../Validators'; import { _registerNode } from '../Global'; import { GetSet, IRect } from '../types'; +import { Context } from '../Context'; export interface ImageConfig extends ShapeConfig { image: CanvasImageSource | undefined; @@ -38,17 +39,15 @@ export class Image extends Shape { _useBufferCanvas() { return super._useBufferCanvas(true); } - _sceneFunc(context) { - var width = this.getWidth(), - height = this.getHeight(), - image = this.attrs.image, - cropWidth, - cropHeight, - params; + _sceneFunc(context: Context) { + const width = this.getWidth(); + const height = this.getHeight(); + const image = this.attrs.image; + let params; if (image) { - cropWidth = this.attrs.cropWidth; - cropHeight = this.attrs.cropHeight; + const cropWidth = this.attrs.cropWidth; + const cropHeight = this.attrs.cropHeight; if (cropWidth && cropHeight) { params = [ image, diff --git a/src/shapes/Transformer.ts b/src/shapes/Transformer.ts index 6c62c038..dcff0c0b 100644 --- a/src/shapes/Transformer.ts +++ b/src/shapes/Transformer.ts @@ -11,7 +11,7 @@ import { _registerNode } from '../Global'; import { GetSet, IRect, Vector2d } from '../types'; -interface Box extends IRect { +export interface Box extends IRect { rotation: number; } @@ -1202,7 +1202,7 @@ export class Transformer extends Group { keepRatio: GetSet; centeredScaling: GetSet; ignoreStroke: GetSet; - boundBoxFunc: GetSet<(oldBox: IRect, newBox: IRect) => IRect, this>; + boundBoxFunc: GetSet<(oldBox: Box, newBox: Box) => Box, this>; shouldOverdrawWholeArea: GetSet; } diff --git a/src/types.ts b/src/types.ts index 1cdbe40f..741c5a7d 100644 --- a/src/types.ts +++ b/src/types.ts @@ -43,7 +43,7 @@ export enum KonvaNodeEvent { dbltap = 'dbltap', dragstart = 'dragstart', dragmove = 'dragmove', - dragend = 'dragend' + dragend = 'dragend', } export interface RGB { From ccb2dae37690839ca37408340e3f4a8ead9803c8 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Sun, 25 Oct 2020 19:15:34 +0800 Subject: [PATCH 2/2] type complement --- src/Shape.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/Shape.ts b/src/Shape.ts index 879f08a4..5406bec6 100644 --- a/src/Shape.ts +++ b/src/Shape.ts @@ -21,6 +21,9 @@ export type ShapeConfigHandler = { bivarianceHack(ctx: Context, shape: TTarget): void; }['bivarianceHack']; +export type LineJoin = 'round' | 'bevel' | 'miter'; +export type LineCap = 'butt' | 'round' | 'square'; + export interface ShapeConfig extends NodeConfig { fill?: string; fillPatternImage?: HTMLImageElement; @@ -58,8 +61,8 @@ export interface ShapeConfig extends NodeConfig { strokeScaleEnabled?: boolean; strokeHitEnabled?: boolean; strokeEnabled?: boolean; - lineJoin?: string; - lineCap?: string; + lineJoin?: LineJoin; + lineCap?: LineCap; sceneFunc?: (con: Context, shape: Shape) => void; hitFunc?: (con: Context, shape: Shape) => void; shadowColor?: string; @@ -789,8 +792,8 @@ export class Shape extends Node< fillPatternY: GetSet; fillPriority: GetSet; hitFunc: GetSet, this>; - lineCap: GetSet; - lineJoin: GetSet; + lineCap: GetSet; + lineJoin: GetSet; perfectDrawEnabled: GetSet; sceneFunc: GetSet, this>; shadowColor: GetSet;