Comparing version 2.1.7 to 2.1.8
@@ -8,2 +8,11 @@ # Change Log | ||
## [2.1.8][2018-08-01] | ||
## Fixed | ||
* Some `Konva.Transformer` fixes | ||
* Typescript fixes | ||
* `stage.toDataURL()` fixes when it has hidden layers | ||
* `shape.toDataURL()` automatically adjust position and size of resulted image | ||
## [2.1.7][2018-07-03] | ||
@@ -13,2 +22,8 @@ | ||
* `toObject` fixes | ||
## [2.1.7][2018-07-03] | ||
## Fixed | ||
* Some drag&drop fixes | ||
@@ -15,0 +30,0 @@ |
@@ -9,5 +9,48 @@ declare namespace Konva { | ||
type HandlerFunc = ( | ||
e: { target: Konva.Shape; evt: Event; currentTarget: Konva.Node } | ||
e: { target: Konva.Shape; evt: Event; currentTarget: Konva.Node; cancelBubble: boolean } | ||
) => void; | ||
enum KonvaNodeEvent { | ||
mouseover = 'mouseover', | ||
mouseout = 'mouseout', | ||
mousemove = 'mousemove', | ||
mouseleave = 'mouseleave', | ||
mouseenter = 'mouseenter', | ||
mousedown = 'mousedown', | ||
mouseup = 'mouseup', | ||
wheel = 'wheel', | ||
contextmenu = 'contextmenu', | ||
click = 'click', | ||
dblclick = 'dblclick', | ||
touchstart = 'touchstart', | ||
touchmove = 'touchmove', | ||
touchend = 'touchend', | ||
tap = 'tap', | ||
dbltap = 'dbltap', | ||
dragstart = 'dragstart', | ||
dragmove = 'dragmove', | ||
dragend = 'dragend', | ||
} | ||
enum KonvaStageEvent { | ||
contentMouseover = 'contentMouseover', | ||
contentMousemove = 'contentMousemove', | ||
contentMouseout = 'contentMouseout', | ||
contentMousedown = 'contentMousedown', | ||
contentMouseup = 'contentMouseup', | ||
contentWheel = 'contentWheel', | ||
contentContextmenu = 'contentContextmenu', | ||
contentClick = 'contentClick', | ||
contentDblclick = 'contentDblclick', | ||
contentTouchstart = 'contentTouchstart', | ||
contentTouchmove = 'contentTouchmove', | ||
contentTouchend = 'contentTouchend', | ||
contentTap = 'contentTap', | ||
contentDblTap = 'contentDblTap', | ||
} | ||
type KonvaEvent = KonvaNodeEvent & KonvaStageEvent; | ||
type KonvaEventString = KonvaEvent | string; | ||
type globalCompositeOperationType = | ||
@@ -100,3 +143,44 @@ | '' | ||
} | ||
interface KonvaNodeEventMap extends KonvaStageEventMap { | ||
'mouseover': MouseEvent, | ||
'mouseout': MouseEvent, | ||
'mousemove': MouseEvent, | ||
'mouseleave': MouseEvent, | ||
'mouseenter': MouseEvent, | ||
'mousedown': MouseEvent, | ||
'mouseup': MouseEvent, | ||
'wheel': WheelEvent, | ||
'contextmenu': PointerEvent, | ||
'click': MouseEvent, | ||
'dblclick': MouseEvent, | ||
'touchstart': TouchEvent, | ||
'touchmove': TouchEvent, | ||
'touchend': TouchEvent, | ||
'tap': Event, | ||
'dbltap': Event, | ||
'dragstart': DragEvent, | ||
'dragmove': DragEvent, | ||
'dragend': DragEvent, | ||
'dragover': DragEvent, | ||
'drop': DragEvent, | ||
} | ||
interface KonvaStageEventMap { | ||
'contentMouseover': MouseEvent, | ||
'contentMousemove': MouseEvent, | ||
'contentMouseout': MouseEvent, | ||
'contentMousedown': MouseEvent, | ||
'contentMouseup': MouseEvent, | ||
'contentWheel': WheelEvent, | ||
'contentContextmenu': PointerEvent, | ||
'contentClick': MouseEvent, | ||
'contentDblclick': MouseEvent, | ||
'contentTouchstart': TouchEvent, | ||
'contentTouchmove': TouchEvent, | ||
'contentTouchend': TouchEvent, | ||
'contentTap': Event, | ||
'contentDblTap': Event, | ||
} | ||
interface NodeConfig { | ||
@@ -210,2 +294,3 @@ x?: number; | ||
getAbsoluteZIndex(): number; | ||
getAbsoluteScale(): Vector2d; | ||
getAncestors(): Collection; | ||
@@ -217,3 +302,3 @@ getAttr(attr: string): any; | ||
getClassName(): string; | ||
getClientRect(): SizeConfig; | ||
getClientRect(attrs? : { skipTransform?: boolean, relativeTo?: object }): SizeConfig; | ||
getContent(): HTMLDivElement; | ||
@@ -268,3 +353,3 @@ getDepth(): number; | ||
noise(noise: number): this; | ||
off(evtStr: string): this; | ||
off(evtStr: KonvaEventString): this; | ||
offset(): Vector2d; | ||
@@ -276,3 +361,4 @@ offset(offset: Vector2d): this; | ||
offsetY(offsetY: number): this; | ||
on(evtStr: string, handler: HandlerFunc): this; | ||
on<K extends keyof KonvaNodeEventMap>(evtStr: K, handler: (e: { target: Konva.Shape; evt: KonvaNodeEventMap[K]; currentTarget: Konva.Node; cancelBubble: boolean }) => void): this; | ||
on(evtStr: KonvaEventString, handler: HandlerFunc): this; | ||
opacity(): number; | ||
@@ -906,2 +992,3 @@ opacity(opacity: number): this; | ||
wrap?: string; | ||
ellipsis?: boolean; | ||
} | ||
@@ -908,0 +995,0 @@ |
{ | ||
"name": "konva", | ||
"version": "2.1.7", | ||
"version": "2.1.8", | ||
"author": "Anton Lavrenov", | ||
@@ -5,0 +5,0 @@ "files": [ |
@@ -26,3 +26,3 @@ <p align="center"> | ||
```html | ||
<script src="https://cdn.rawgit.com/konvajs/konva/2.1.7/konva.min.js"></script> | ||
<script src="https://cdn.rawgit.com/konvajs/konva/2.1.8/konva.min.js"></script> | ||
<div id="container"></div> | ||
@@ -29,0 +29,0 @@ <script> |
(function(Konva) { | ||
'use strict'; | ||
var BASE_BOX_WIDTH = 10; | ||
var BASE_BOX_HEIGHT = 10; | ||
var ATTR_CHANGE_LIST = [ | ||
@@ -49,3 +52,3 @@ 'resizeEnabledChange', | ||
function getCursor(anchorName, rad) { | ||
function getCursor(anchorName, rad, isMirrored) { | ||
if (anchorName === 'rotater') { | ||
@@ -56,2 +59,7 @@ return 'crosshair'; | ||
rad += Konva.Util._degToRad(ANGLES[anchorName] || 0); | ||
// If we are mirrored, we need to mirror the angle (this is not the same as | ||
// rotate). | ||
if (isMirrored) { | ||
rad *= -1; | ||
} | ||
var angle = (Konva.Util._radToDeg(rad) % 360 + 360) % 360; | ||
@@ -135,4 +143,2 @@ | ||
var warningShowed = false; | ||
Konva.Transformer.prototype = { | ||
@@ -154,9 +160,2 @@ _centroid: false, | ||
if (!warningShowed) { | ||
Konva.Util.warn( | ||
'Konva.Transformer is currently experimental and may have bugs. Please report any issues to GitHub repo.' | ||
); | ||
warningShowed = true; | ||
} | ||
if (this.getNode()) { | ||
@@ -306,6 +305,6 @@ this.update(); | ||
name: name, | ||
width: 10, | ||
height: 10, | ||
offsetX: 5, | ||
offsetY: 5, | ||
width: BASE_BOX_WIDTH, | ||
height: BASE_BOX_HEIGHT, | ||
offsetX: BASE_BOX_WIDTH / 2, | ||
offsetY: BASE_BOX_HEIGHT / 2, | ||
dragDistance: 0 | ||
@@ -342,4 +341,6 @@ }); | ||
// var angle = -Math.atan2(-dy, dx) - Math.PI / 2; | ||
var cursor = getCursor(name, rad); | ||
var scale = tr.getNode().getAbsoluteScale(); | ||
// If scale.y < 0 xor scale.x < 0 we need to flip (not rotate). | ||
var isMirrored = scale.y * scale.x < 0; | ||
var cursor = getCursor(name, rad, isMirrored); | ||
anchor.getStage().content.style.cursor = cursor; | ||
@@ -607,3 +608,6 @@ layer.batchDraw(); | ||
this.fire('transformend'); | ||
this.getNode().fire('transformend'); | ||
var node = this.getNode(); | ||
if (node) { | ||
node.fire('transformend'); | ||
} | ||
} | ||
@@ -658,2 +662,11 @@ }, | ||
var attrs = this._getNodeRect(); | ||
var node = this.getNode(); | ||
var scale = { x: 1, y: 1 }; | ||
if (node && node.getParent()) { | ||
scale = node.getParent().getAbsoluteScale(); | ||
} | ||
var invertedScale = { | ||
x: 1 / scale.x, | ||
y: 1 / scale.y | ||
}; | ||
var width = attrs.width; | ||
@@ -669,2 +682,3 @@ var height = attrs.height; | ||
y: -padding, | ||
scale: invertedScale, | ||
visible: resizeEnabled && enabledHandlers.indexOf('top-left') >= 0 | ||
@@ -675,2 +689,3 @@ }); | ||
y: -padding, | ||
scale: invertedScale, | ||
visible: resizeEnabled && enabledHandlers.indexOf('top-center') >= 0 | ||
@@ -681,2 +696,3 @@ }); | ||
y: -padding, | ||
scale: invertedScale, | ||
visible: resizeEnabled && enabledHandlers.indexOf('top-right') >= 0 | ||
@@ -687,2 +703,3 @@ }); | ||
y: height / 2, | ||
scale: invertedScale, | ||
visible: resizeEnabled && enabledHandlers.indexOf('middle-left') >= 0 | ||
@@ -693,2 +710,3 @@ }); | ||
y: height / 2, | ||
scale: invertedScale, | ||
visible: resizeEnabled && enabledHandlers.indexOf('middle-right') >= 0 | ||
@@ -699,2 +717,3 @@ }); | ||
y: height + padding, | ||
scale: invertedScale, | ||
visible: resizeEnabled && enabledHandlers.indexOf('bottom-left') >= 0 | ||
@@ -705,2 +724,3 @@ }); | ||
y: height + padding, | ||
scale: invertedScale, | ||
visible: resizeEnabled && enabledHandlers.indexOf('bottom-center') >= 0 | ||
@@ -711,8 +731,12 @@ }); | ||
y: height + padding, | ||
scale: invertedScale, | ||
visible: resizeEnabled && enabledHandlers.indexOf('bottom-right') >= 0 | ||
}); | ||
var scaledRotateHandlerOffset = | ||
-this.rotateHandlerOffset() * Math.abs(invertedScale.y); | ||
this.findOne('.rotater').setAttrs({ | ||
x: width / 2, | ||
y: -this.rotateHandlerOffset() * Konva.Util._sign(height), | ||
y: scaledRotateHandlerOffset * Konva.Util._sign(height), | ||
scale: invertedScale, | ||
visible: this.rotateEnabled() | ||
@@ -722,4 +746,5 @@ }); | ||
this.findOne('.back').setAttrs({ | ||
width: width, | ||
height: height, | ||
width: width * scale.x, | ||
height: height * scale.y, | ||
scale: invertedScale, | ||
visible: this.lineEnabled() | ||
@@ -726,0 +751,0 @@ }); |
@@ -255,2 +255,5 @@ (function() { | ||
layers.each(function(layer) { | ||
if (!layer.isVisible()) { | ||
return; | ||
} | ||
var width = layer.getCanvas().getWidth(); | ||
@@ -257,0 +260,0 @@ var height = layer.getCanvas().getHeight(); |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1284505
36671