Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

konva

Package Overview
Dependencies
Maintainers
1
Versions
212
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

konva - npm Package Compare versions

Comparing version 2.1.7 to 2.1.8

15

CHANGELOG.md

@@ -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 @@

95

konva.d.ts

@@ -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 @@

2

package.json
{
"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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc