lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-23 05:14:58 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

prepare new version. Update docs.

Browse Source
This commit is contained in:
Anton Lavrenov
2019-08-05 13:54:08 +07:00
parent f1846ba996
commit 519bd94a7c
13 changed files with 845 additions and 1717 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/BaseLayer.ts
View File

@@ -175,6 +175,9 @@ export abstract class BaseLayer extends Container<Group | Shape> {
getLayer() {
return this;
}
hitGraphEnabled() {
return true;
}
remove() {
var _canvas = this.getCanvas()._canvas;

18
src/Container.ts
View File

@@ -135,12 +135,6 @@ export abstract class Container<ChildType extends Node> extends Node<
this._fire('add', {
child: child
});
// if node under drag we need to update drag animation
if (child.isDragging()) {
DD.anim.setLayers(child.getLayer());
}
// chainable
return this;
}
@@ -443,9 +437,10 @@ export abstract class Container<ChildType extends Node> extends Node<
}
}
shouldDrawHit(canvas?) {
// TODO: set correct type
var layer = this.getLayer() as any;
if (canvas && canvas.isCache) {
return true;
}
var layer = this.getLayer();
var layerUnderDrag = false;
DD._dragElements.forEach(elem => {
if (elem.isDragging && elem.node.getLayer() === layer) {
@@ -454,10 +449,7 @@ export abstract class Container<ChildType extends Node> extends Node<
});
var dragSkip = !Konva.hitOnDragEnabled && layerUnderDrag;
return (
(canvas && canvas.isCache) ||
(layer && layer.hitGraphEnabled() && this.isVisible() && !dragSkip)
);
return layer && layer.hitGraphEnabled() && this.isVisible() && !dragSkip;
}
getClientRect(attrs): IRect {
attrs = attrs || {};

188
src/Context.ts
View File

@@ -66,13 +66,12 @@ var CONTEXT_PROPERTIES = [
'imageSmoothingEnabled'
];
// TODO: document all context methods
const traceArrMax = 100;
/**
* Konva wrapper around native 2d canvas context. It has almost the same API of 2d context with some additional functions.
* With core Konva shapes you don't need to use this object. But you have to use it if you want to create
* a custom shape or a custom hit regions.
* With core Konva shapes you don't need to use this object. But you will use it if you want to create
* a [custom shape](/docs/react/Custom_Shape.html) or a [custom hit regions](/docs/events/Custom_Hit_Region.html).
* For full information about each 2d context API use [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
* @constructor
* @memberof Konva
* @example
@@ -275,28 +274,67 @@ export class Context {
this._context[attr] = val;
}
// context pass through methods
/**
* arc function.
* @method
* @name Konva.Context#arc
*/
arc(a0, a1, a2, a3, a4, a5) {
this._context.arc(a0, a1, a2, a3, a4, a5);
}
/**
* arcTo function.
* @method
* @name Konva.Context#arcTo
*/
arcTo(a0, a1, a2, a3, a4, a5) {
this._context.arc(a0, a1, a2, a3, a4, a5);
}
/**
* beginPath function.
* @method
* @name Konva.Context#beginPath
*/
beginPath() {
this._context.beginPath();
}
/**
* bezierCurveTo function.
* @method
* @name Konva.Context#bezierCurveTo
*/
bezierCurveTo(a0, a1, a2, a3, a4, a5) {
this._context.bezierCurveTo(a0, a1, a2, a3, a4, a5);
}
/**
* clearRect function.
* @method
* @name Konva.Context#clearRect
*/
clearRect(a0, a1, a2, a3) {
this._context.clearRect(a0, a1, a2, a3);
}
/**
* clip function.
* @method
* @name Konva.Context#clip
*/
clip() {
this._context.clip();
}
/**
* closePath function.
* @method
* @name Konva.Context#closePath
*/
closePath() {
this._context.closePath();
}
/**
* createImageData function.
* @method
* @name Konva.Context#createImageData
*/
createImageData(a0, a1) {
var a = arguments;
if (a.length === 2) {
@@ -305,15 +343,35 @@ export class Context {
return this._context.createImageData(a0);
}
}
/**
* createLinearGradient function.
* @method
* @name Konva.Context#createLinearGradient
*/
createLinearGradient(a0, a1, a2, a3) {
return this._context.createLinearGradient(a0, a1, a2, a3);
}
/**
* createPattern function.
* @method
* @name Konva.Context#createPattern
*/
createPattern(a0, a1) {
return this._context.createPattern(a0, a1);
}
/**
* createRadialGradient function.
* @method
* @name Konva.Context#createRadialGradient
*/
createRadialGradient(a0, a1, a2, a3, a4, a5) {
return this._context.createRadialGradient(a0, a1, a2, a3, a4, a5);
}
/**
* drawImage function.
* @method
* @name Konva.Context#drawImage
*/
drawImage(a0, a1, a2, a3?, a4?, a5?, a6?, a7?, a8?) {
var a = arguments,
_context = this._context;
@@ -326,57 +384,147 @@ export class Context {
_context.drawImage(a0, a1, a2, a3, a4, a5, a6, a7, a8);
}
}
/**
* ellipse function.
* @method
* @name Konva.Context#ellipse
*/
ellipse(a0, a1, a2, a3, a4, a5, a6, a7) {
this._context.ellipse(a0, a1, a2, a3, a4, a5, a6, a7);
}
/**
* isPointInPath function.
* @method
* @name Konva.Context#isPointInPath
*/
isPointInPath(x, y) {
return this._context.isPointInPath(x, y);
}
/**
* fill function.
* @method
* @name Konva.Context#fill
*/
fill() {
this._context.fill();
}
/**
* fillRect function.
* @method
* @name Konva.Context#fillRect
*/
fillRect(x, y, width, height) {
this._context.fillRect(x, y, width, height);
}
/**
* strokeRect function.
* @method
* @name Konva.Context#strokeRect
*/
strokeRect(x, y, width, height) {
this._context.strokeRect(x, y, width, height);
}
/**
* fillText function.
* @method
* @name Konva.Context#fillText
*/
fillText(a0, a1, a2) {
this._context.fillText(a0, a1, a2);
}
/**
* measureText function.
* @method
* @name Konva.Context#measureText
*/
measureText(text) {
return this._context.measureText(text);
}
/**
* getImageData function.
* @method
* @name Konva.Context#getImageData
*/
getImageData(a0, a1, a2, a3) {
return this._context.getImageData(a0, a1, a2, a3);
}
/**
* lineTo function.
* @method
* @name Konva.Context#lineTo
*/
lineTo(a0, a1) {
this._context.lineTo(a0, a1);
}
/**
* moveTo function.
* @method
* @name Konva.Context#moveTo
*/
moveTo(a0, a1) {
this._context.moveTo(a0, a1);
}
/**
* rect function.
* @method
* @name Konva.Context#rect
*/
rect(a0, a1, a2, a3) {
this._context.rect(a0, a1, a2, a3);
}
/**
* putImageData function.
* @method
* @name Konva.Context#putImageData
*/
putImageData(a0, a1, a2) {
this._context.putImageData(a0, a1, a2);
}
/**
* quadraticCurveTo function.
* @method
* @name Konva.Context#quadraticCurveTo
*/
quadraticCurveTo(a0, a1, a2, a3) {
this._context.quadraticCurveTo(a0, a1, a2, a3);
}
/**
* restore function.
* @method
* @name Konva.Context#restore
*/
restore() {
this._context.restore();
}
/**
* rotate function.
* @method
* @name Konva.Context#rotate
*/
rotate(a0) {
this._context.rotate(a0);
}
/**
* save function.
* @method
* @name Konva.Context#save
*/
save() {
this._context.save();
}
/**
* scale function.
* @method
* @name Konva.Context#scale
*/
scale(a0, a1) {
this._context.scale(a0, a1);
}
/**
* setLineDash function.
* @method
* @name Konva.Context#setLineDash
*/
setLineDash(a0) {
// works for Chrome and IE11
if (this._context.setLineDash) {
@@ -391,21 +539,51 @@ export class Context {
// no support for IE9 and IE10
}
/**
* getLineDash function.
* @method
* @name Konva.Context#getLineDash
*/
getLineDash() {
return this._context.getLineDash();
}
/**
* setTransform function.
* @method
* @name Konva.Context#setTransform
*/
setTransform(a0, a1, a2, a3, a4, a5) {
this._context.setTransform(a0, a1, a2, a3, a4, a5);
}
/**
* stroke function.
* @method
* @name Konva.Context#stroke
*/
stroke() {
this._context.stroke();
}
/**
* strokeText function.
* @method
* @name Konva.Context#strokeText
*/
strokeText(a0, a1, a2, a3) {
this._context.strokeText(a0, a1, a2, a3);
}
/**
* transform function.
* @method
* @name Konva.Context#transform
*/
transform(a0, a1, a2, a3, a4, a5) {
this._context.transform(a0, a1, a2, a3, a4, a5);
}
/**
* translate function.
* @method
* @name Konva.Context#translate
*/
translate(a0, a1) {
this._context.translate(a0, a1);
}

61
src/DragAndDrop.ts
View File

@@ -1,22 +1,9 @@
import { Animation } from './Animation';
import { Konva } from './Global';
import { Node } from './Node';
import { Vector2d } from './types';
import { Util } from './Util';
// TODO: make better module,
// make sure other modules import it without global
export const DD = {
startPointerPos: {
x: 0,
y: 0
},
// properties
anim: new Animation(function() {
var b = this.dirty;
this.dirty = false;
return b;
}),
get isDragging() {
var flag = false;
DD._dragElements.forEach(elem => {
@@ -27,10 +14,6 @@ export const DD = {
return flag;
},
justDragged: false,
offset: {
x: 0,
y: 0
},
get node() {
// return first dragging node
var node: Node | undefined;
@@ -67,8 +50,9 @@ export const DD = {
const pos = stage._changedPointerPositions.find(
pos => pos.id === elem.pointerId
);
// not related pointer
if (!pos) {
console.error('Can not find pointer');
return;
}
if (!elem.isDragging) {
@@ -109,6 +93,9 @@ export const DD = {
);
});
},
// dragBefore and dragAfter allows us to set correct order of events
// setup all in dragbefore, and stop dragging only after pointerup triggered.
_endDragBefore(evt) {
DD._dragElements.forEach((elem, key) => {
const { node } = elem;
@@ -140,31 +127,6 @@ export const DD = {
drawNode.draw();
}
});
// var node = DD.node;
// if (node) {
// DD.anim.stop();
// // only fire dragend event if the drag and drop
// // operation actually started.
// if (DD.isDragging) {
// DD.isDragging = false;
// DD.justDragged = true;
// Konva.listenClickTap = false;
// if (evt) {
// evt.dragEndNode = node;
// }
// }
// DD.node = null;
// const drawNode =
// node.getLayer() || (node instanceof Konva['Stage'] && node);
// if (drawNode) {
// drawNode.draw();
// }
// }
},
_endDragAfter(evt) {
DD._dragElements.forEach((elem, key) => {
@@ -181,19 +143,6 @@ export const DD = {
DD._dragElements.delete(key);
}
});
// evt = evt || {};
// var dragEndNode = evt.dragEndNode;
// if (evt && dragEndNode) {
// dragEndNode.fire(
// 'dragend',
// {
// type: 'dragend',
// target: dragEndNode,
// evt: evt
// },
// true
// );
// }
}
};

6
src/Node.ts
View File

@@ -1036,7 +1036,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* @returns {Boolean}
*/
shouldDrawHit() {
var layer = this.getLayer() as any;
var layer = this.getLayer();
return (
(!layer && this.isListening() && this.isVisible()) ||
@@ -2242,10 +2242,6 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
pointerId,
dragStopped: false
});
DD.startPointerPos = pos;
DD.offset.x = pos.x - ap.x;
DD.offset.y = pos.y - ap.y;
// this._setDragPosition();
}
}

1
src/Shape.ts
View File

@@ -624,6 +624,7 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
if (!this.colorKey) {
console.log(this);
Util.warn(
'Looks like your canvas has a destroyed shape in it. Do not reuse shape after you destroyed it. See the shape in logs above. If you want to reuse shape you should call remove() instead of destroy()'
);

2
src/Stage.ts
View File

@@ -701,7 +701,7 @@ export class Stage extends Container<BaseLayer> {
}
_touchmove(evt) {
this.setPointersPositions(evt);
if (!DD.isDragging) {
if (!DD.isDragging || Konva.hitOnDragEnabled) {
var triggeredOnShape = false;
var processedShapesIds = {};
this._changedPointerPositions.forEach(pos => {