lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

better modules

Browse Source
This commit is contained in:
Anton Lavrenov 2019-03-06 22:19:32 -05:00
parent 26d09b5b88
commit e88a485458
24 changed files with 572 additions and 583 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

550
konva.js
View File

@ -8,7 +8,7 @@
* Konva JavaScript Framework v3.1.6 * Konva JavaScript Framework v3.1.6
* http://konvajs.org/ * http://konvajs.org/
* Licensed under the MIT * Licensed under the MIT
* Date: Wed Feb 27 2019 * Date: Wed Mar 06 2019
* *
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -19,19 +19,13 @@
/** /**
* @namespace Konva * @namespace Konva
*/ */
var version = '3.1.6'; function detectBrowser() {
var isBrowser = typeof window !== 'undefined' && return (typeof window !== 'undefined' &&
// browser case // browser case
({}.toString.call(window) === '[object Window]' || ({}.toString.call(window) === '[object Window]' ||
// electron case // electron case
{}.toString.call(window) === '[object global]'); {}.toString.call(window) === '[object global]'));
var isUnminified = /comment/.test(function () { }
/* comment */
}.toString());
var dblClickWindow = 400;
var getAngle = function (angle) {
return _getGlobalKonva().angleDeg ? angle * PI_OVER_180 : angle;
};
var _detectIE = function (ua) { var _detectIE = function (ua) {
var msie = ua.indexOf('msie '); var msie = ua.indexOf('msie ');
if (msie > 0) { if (msie > 0) {
@ -80,25 +74,103 @@
: typeof WorkerGlobalScope !== 'undefined' : typeof WorkerGlobalScope !== 'undefined'
? self ? self
: {}; : {};
// user agent var Konva = {
var UA = _parseUA((glob.navigator && glob.navigator.userAgent) || ''); version: '3.1.6',
var document = glob.document; isBrowser: detectBrowser(),
// get global Konva instance isUnminified: /comment/.test(function () {
var _getGlobalKonva = function () { /* comment */
return glob.Konva; }.toString()),
dblClickWindow: 400,
getAngle: function (angle) {
return Konva.angleDeg ? angle * PI_OVER_180 : angle;
},
enableTrace: false,
// TODO: move that to stage?
listenClickTap: false,
inDblClickWindow: false,
/**
* Global pixel ratio configuration. KonvaJS automatically detect pixel ratio of current device.
* But you may override such property, if you want to use your value.
* @property pixelRatio
* @default undefined
* @name pixelRatio
* @memberof Konva
* @example
* Konva.pixelRatio = 1;
*/
pixelRatio: undefined,
/**
* Drag distance property. If you start to drag a node you may want to wait until pointer is moved to some distance from start point,
* only then start dragging. Default is 3px.
* @property dragDistance
* @default 0
* @memberof Konva
* @example
* Konva.dragDistance = 10;
*/
dragDistance: 3,
/**
* Use degree values for angle properties. You may set this property to false if you want to use radiant values.
* @property angleDeg
* @default true
* @memberof Konva
* @example
* node.rotation(45); // 45 degrees
* Konva.angleDeg = false;
* node.rotation(Math.PI / 2); // PI/2 radian
*/
angleDeg: true,
/**
* Show different warnings about errors or wrong API usage
* @property showWarnings
* @default true
* @memberof Konva
* @example
* Konva.showWarnings = false;
*/
showWarnings: true,
/**
* Configure what mouse buttons can be used for drag and drop.
* Default value is [0] - only left mouse button.
* @property dragButtons
* @default true
* @memberof Konva
* @example
* // enable left and right mouse buttons
* Konva.dragButtons = [0, 2];
*/
dragButtons: [0, 1],
/**
* returns whether or not drag and drop is currently active
* @method
* @memberof Konva
*/
isDragging: function () {
return Konva['DD'].isDragging;
},
/**
* returns whether or not a drag and drop operation is ready, but may
* not necessarily have started
* @method
* @memberof Konva
*/
isDragReady: function () {
return !!Konva['DD'].node;
},
// user agent
UA: _parseUA((glob.navigator && glob.navigator.userAgent) || ''),
document: glob.document,
// insert Konva into global namaspace (window)
// it is required for npm packages
_injectGlobal: function (Konva) {
glob.Konva = Konva;
},
_parseUA: _parseUA
}; };
var _NODES_REGISTRY = {}; var _NODES_REGISTRY = {};
var globalKonva = {};
// insert Konva into global namaspace (window)
// it is required for npm packages
var _injectGlobal = function (Konva) {
globalKonva = Konva;
glob.Konva = Konva;
Object.assign(Konva, _NODES_REGISTRY);
};
var _registerNode = function (NodeClass) { var _registerNode = function (NodeClass) {
_NODES_REGISTRY[NodeClass.prototype.getClassName()] = NodeClass; _NODES_REGISTRY[NodeClass.prototype.getClassName()] = NodeClass;
globalKonva[NodeClass.prototype.getClassName()] = NodeClass; Konva[NodeClass.prototype.getClassName()] = NodeClass;
}; };
/** /**
@ -595,9 +667,9 @@
} }
}, },
createCanvasElement: function () { createCanvasElement: function () {
var canvas = isBrowser var canvas = Konva.isBrowser
? document.createElement('canvas') ? document.createElement('canvas')
: new (_getGlobalKonva()._nodeCanvas())(); : new (Konva['_nodeCanvas']())();
// on some environments canvas.style is readonly // on some environments canvas.style is readonly
try { try {
canvas.style = canvas.style || {}; canvas.style = canvas.style || {};
@ -839,7 +911,7 @@
console.error(KONVA_ERROR + str); console.error(KONVA_ERROR + str);
}, },
warn: function (str) { warn: function (str) {
if (!_getGlobalKonva().showWarnings) { if (!Konva.showWarnings) {
return; return;
} }
console.warn(KONVA_WARNING + str); console.warn(KONVA_WARNING + str);
@ -1013,7 +1085,7 @@
return Math.round(val); return Math.round(val);
} }
function getNumberValidator() { function getNumberValidator() {
if (isUnminified) { if (Konva.isUnminified) {
return function (val, attr) { return function (val, attr) {
if (!Util._isNumber(val)) { if (!Util._isNumber(val)) {
Util.warn(_formatValue(val) + Util.warn(_formatValue(val) +
@ -1026,7 +1098,7 @@
} }
} }
function getNumberOrAutoValidator() { function getNumberOrAutoValidator() {
if (isUnminified) { if (Konva.isUnminified) {
return function (val, attr) { return function (val, attr) {
var isNumber = Util._isNumber(val); var isNumber = Util._isNumber(val);
var isAuto = val === 'auto'; var isAuto = val === 'auto';
@ -1041,7 +1113,7 @@
} }
} }
function getStringValidator() { function getStringValidator() {
if (isUnminified) { if (Konva.isUnminified) {
return function (val, attr) { return function (val, attr) {
if (!Util._isString(val)) { if (!Util._isString(val)) {
Util.warn(_formatValue(val) + Util.warn(_formatValue(val) +
@ -1054,7 +1126,7 @@
} }
} }
function getNumberArrayValidator() { function getNumberArrayValidator() {
if (isUnminified) { if (Konva.isUnminified) {
return function (val, attr) { return function (val, attr) {
if (!Util._isArray(val)) { if (!Util._isArray(val)) {
Util.warn(_formatValue(val) + Util.warn(_formatValue(val) +
@ -1078,7 +1150,7 @@
} }
} }
function getBooleanValidator() { function getBooleanValidator() {
if (isUnminified) { if (Konva.isUnminified) {
return function (val, attr) { return function (val, attr) {
var isBool = val === true || val === false; var isBool = val === true || val === false;
if (!isBool) { if (!isBool) {
@ -1092,7 +1164,7 @@
} }
} }
function getComponentValidator(components) { function getComponentValidator(components) {
if (isUnminified) { if (Konva.isUnminified) {
return function (val, attr) { return function (val, attr) {
if (!Util.isObject(val)) { if (!Util.isObject(val)) {
Util.warn(_formatValue(val) + Util.warn(_formatValue(val) +
@ -1336,7 +1408,7 @@
function Context(canvas) { function Context(canvas) {
this.canvas = canvas; this.canvas = canvas;
this._context = canvas._canvas.getContext('2d'); this._context = canvas._canvas.getContext('2d');
if (_getGlobalKonva().enableTrace) { if (Konva.enableTrace) {
this.traceArr = []; this.traceArr = [];
this._enableTrace(); this._enableTrace();
} }
@ -1681,7 +1753,7 @@
shape._fillFunc(this); shape._fillFunc(this);
}; };
SceneContext.prototype._fillPattern = function (shape) { SceneContext.prototype._fillPattern = function (shape) {
var fillPatternX = shape.getFillPatternX(), fillPatternY = shape.getFillPatternY(), fillPatternScaleX = shape.getFillPatternScaleX(), fillPatternScaleY = shape.getFillPatternScaleY(), fillPatternRotation = getAngle(shape.getFillPatternRotation()), fillPatternOffsetX = shape.getFillPatternOffsetX(), fillPatternOffsetY = shape.getFillPatternOffsetY(); var fillPatternX = shape.getFillPatternX(), fillPatternY = shape.getFillPatternY(), fillPatternScaleX = shape.getFillPatternScaleX(), fillPatternScaleY = shape.getFillPatternScaleY(), fillPatternRotation = Konva.getAngle(shape.getFillPatternRotation()), fillPatternOffsetX = shape.getFillPatternOffsetX(), fillPatternOffsetY = shape.getFillPatternOffsetY();
if (fillPatternX || fillPatternY) { if (fillPatternX || fillPatternY) {
this.translate(fillPatternX || 0, fillPatternY || 0); this.translate(fillPatternX || 0, fillPatternY || 0);
} }
@ -1870,7 +1942,7 @@
this.height = 0; this.height = 0;
this.isCache = false; this.isCache = false;
var conf = config || {}; var conf = config || {};
var pixelRatio = conf.pixelRatio || _getGlobalKonva().pixelRatio || getDevicePixelRatio(); var pixelRatio = conf.pixelRatio || Konva.pixelRatio || getDevicePixelRatio();
this.pixelRatio = pixelRatio; this.pixelRatio = pixelRatio;
this._canvas = Util.createCanvasElement(); this._canvas = Util.createCanvasElement();
// set inline styles // set inline styles
@ -2277,23 +2349,23 @@
} }
}, },
_endDragBefore: function (evt) { _endDragBefore: function (evt) {
var node = DD.node, layer; var node = DD.node;
if (node) { if (node) {
layer = node.getLayer();
DD.anim.stop(); DD.anim.stop();
// only fire dragend event if the drag and drop // only fire dragend event if the drag and drop
// operation actually started. // operation actually started.
if (DD.isDragging) { if (DD.isDragging) {
DD.isDragging = false; DD.isDragging = false;
DD.justDragged = true; DD.justDragged = true;
_getGlobalKonva().listenClickTap = false; Konva.listenClickTap = false;
if (evt) { if (evt) {
evt.dragEndNode = node; evt.dragEndNode = node;
} }
} }
DD.node = null; DD.node = null;
if (layer || node instanceof _getGlobalKonva().Stage) { var drawNode = node.getLayer() || (node instanceof Konva['Stage'] && node);
(layer || node).draw(); if (drawNode) {
drawNode.draw();
} }
} }
}, },
@ -2309,7 +2381,7 @@
} }
} }
}; };
if (isBrowser) { if (Konva.isBrowser) {
window.addEventListener('mouseup', DD._endDragBefore, true); window.addEventListener('mouseup', DD._endDragBefore, true);
window.addEventListener('touchend', DD._endDragBefore, true); window.addEventListener('touchend', DD._endDragBefore, true);
window.addEventListener('mousemove', DD._drag); window.addEventListener('mousemove', DD._drag);
@ -2915,12 +2987,6 @@
return this; return this;
}; };
Node.prototype._remove = function () { Node.prototype._remove = function () {
var parent = this.getParent();
if (parent && parent.children) {
parent.children.splice(this.index, 1);
parent._setChildrenIndices();
this.parent = null;
}
// every cached attr that is calculated via node tree // every cached attr that is calculated via node tree
// traversal must be cleared when removing a node // traversal must be cleared when removing a node
this._clearSelfAndDescendantCache(STAGE); this._clearSelfAndDescendantCache(STAGE);
@ -2928,6 +2994,12 @@
this._clearSelfAndDescendantCache(VISIBLE); this._clearSelfAndDescendantCache(VISIBLE);
this._clearSelfAndDescendantCache(LISTENING); this._clearSelfAndDescendantCache(LISTENING);
this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY); this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
var parent = this.getParent();
if (parent && parent.children) {
parent.children.splice(this.index, 1);
parent._setChildrenIndices();
this.parent = null;
}
}; };
/** /**
* remove and destroy a node. Kill it and delete forever! You should not reuse node after destroy(). * remove and destroy a node. Kill it and delete forever! You should not reuse node after destroy().
@ -3659,7 +3731,7 @@
var at = new Transform(); var at = new Transform();
// start with stage and traverse downwards to self // start with stage and traverse downwards to self
this._eachAncestorReverse(function (node) { this._eachAncestorReverse(function (node) {
var transformsEnabled = node.transformsEnabled(); var transformsEnabled = node.getTransformsEnabled();
if (transformsEnabled === 'all') { if (transformsEnabled === 'all') {
at.multiply(node.getTransform()); at.multiply(node.getTransform());
} }
@ -3716,7 +3788,7 @@
return this._getCache(TRANSFORM, this._getTransform); return this._getCache(TRANSFORM, this._getTransform);
}; };
Node.prototype._getTransform = function () { Node.prototype._getTransform = function () {
var m = new Transform(), x = this.x(), y = this.y(), rotation = _getGlobalKonva().getAngle(this.rotation()), scaleX = this.scaleX(), scaleY = this.scaleY(), skewX = this.skewX(), skewY = this.skewY(), offsetX = this.offsetX(), offsetY = this.offsetY(); var m = new Transform(), x = this.x(), y = this.y(), rotation = Konva.getAngle(this.rotation()), scaleX = this.scaleX(), scaleY = this.scaleY(), skewX = this.skewX(), skewY = this.skewY(), offsetX = this.offsetX(), offsetY = this.offsetY();
if (x !== 0 || y !== 0) { if (x !== 0 || y !== 0) {
m.translate(x, y); m.translate(x, y);
} }
@ -3928,7 +4000,7 @@
return this.parent.getDragDistance(); return this.parent.getDragDistance();
} }
else { else {
return _getGlobalKonva().dragDistance; return Konva.dragDistance;
} }
}; };
Node.prototype._get = function (selector) { Node.prototype._get = function (selector) {
@ -4057,7 +4129,7 @@
* node.setAttr('x', 5); * node.setAttr('x', 5);
*/ */
Node.prototype.setAttr = function (attr, val) { Node.prototype.setAttr = function (attr, val) {
var method = SET$1 + Util._capitalize(attr), func = this[method]; var func = this[SET$1 + Util._capitalize(attr)];
if (Util._isFunction(func)) { if (Util._isFunction(func)) {
func.call(this, val); func.call(this, val);
} }
@ -4068,10 +4140,8 @@
return this; return this;
}; };
Node.prototype._setAttr = function (key, val) { Node.prototype._setAttr = function (key, val) {
var oldVal; var oldVal = this.attrs[key];
oldVal = this.attrs[key]; if (oldVal === val && !Util.isObject(val)) {
var same = oldVal === val;
if (same && !Util.isObject(val)) {
return; return;
} }
if (val === undefined || val === null) { if (val === undefined || val === null) {
@ -4095,23 +4165,14 @@
} }
}; };
Node.prototype._fireAndBubble = function (eventType, evt, compareShape) { Node.prototype._fireAndBubble = function (eventType, evt, compareShape) {
var okayToRun = true;
if (evt && this.nodeType === SHAPE) { if (evt && this.nodeType === SHAPE) {
evt.target = this; evt.target = this;
} }
if (eventType === MOUSEENTER && var shouldStop = (eventType === MOUSEENTER || eventType === MOUSELEAVE) &&
compareShape && compareShape &&
(this._id === compareShape._id || (this._id === compareShape._id ||
(this.isAncestorOf && this.isAncestorOf(compareShape)))) { (this.isAncestorOf && this.isAncestorOf(compareShape)));
okayToRun = false; if (!shouldStop) {
}
else if (eventType === MOUSELEAVE &&
compareShape &&
(this._id === compareShape._id ||
(this.isAncestorOf && this.isAncestorOf(compareShape)))) {
okayToRun = false;
}
if (okayToRun) {
this._fire(eventType, evt); this._fire(eventType, evt);
// simulate event bubbling // simulate event bubbling
var stopBubble = (eventType === MOUSEENTER || eventType === MOUSELEAVE) && var stopBubble = (eventType === MOUSEENTER || eventType === MOUSELEAVE) &&
@ -4134,10 +4195,10 @@
}; };
Node.prototype._fire = function (eventType, evt) { Node.prototype._fire = function (eventType, evt) {
var events = this.eventListeners[eventType], i; var events = this.eventListeners[eventType], i;
evt = evt || {};
evt.currentTarget = this;
evt.type = eventType;
if (events) { if (events) {
evt = evt || {};
evt.currentTarget = this;
evt.type = eventType;
for (i = 0; i < events.length; i++) { for (i = 0; i < events.length; i++) {
events[i].handler.call(this, evt); events[i].handler.call(this, evt);
} }
@ -4221,8 +4282,7 @@
this._dragCleanup(); this._dragCleanup();
this.on('mousedown.konva touchstart.konva', function (evt) { this.on('mousedown.konva touchstart.konva', function (evt) {
var shouldCheckButton = evt.evt.button !== undefined; var shouldCheckButton = evt.evt.button !== undefined;
var canDrag = !shouldCheckButton || var canDrag = !shouldCheckButton || Konva.dragButtons.indexOf(evt.evt.button) >= 0;
_getGlobalKonva().dragButtons.indexOf(evt.evt.button) >= 0;
if (!canDrag) { if (!canDrag) {
return; return;
} }
@ -5469,7 +5529,7 @@
Collection.mapMethods(Container); Collection.mapMethods(Container);
// CONSTANTS // CONSTANTS
var STAGE$1 = 'Stage', STRING = 'string', PX = 'px', MOUSEOUT = 'mouseout', MOUSELEAVE$1 = 'mouseleave', MOUSEOVER = 'mouseover', MOUSEENTER$1 = 'mouseenter', MOUSEMOVE = 'mousemove', MOUSEDOWN = 'mousedown', MOUSEUP = 'mouseup', CONTEXTMENU = 'contextmenu', CLICK = 'click', DBL_CLICK = 'dblclick', TOUCHSTART = 'touchstart', TOUCHEND = 'touchend', TAP = 'tap', DBL_TAP = 'dbltap', TOUCHMOVE = 'touchmove', WHEEL = 'wheel', CONTENT_MOUSEOUT = 'contentMouseout', CONTENT_MOUSEOVER = 'contentMouseover', CONTENT_MOUSEMOVE = 'contentMousemove', CONTENT_MOUSEDOWN = 'contentMousedown', CONTENT_MOUSEUP = 'contentMouseup', CONTENT_CONTEXTMENU = 'contentContextmenu', CONTENT_CLICK = 'contentClick', CONTENT_DBL_CLICK = 'contentDblclick', CONTENT_TOUCHSTART = 'contentTouchstart', CONTENT_TOUCHEND = 'contentTouchend', CONTENT_DBL_TAP = 'contentDbltap', CONTENT_TAP = 'contentTap', CONTENT_TOUCHMOVE = 'contentTouchmove', CONTENT_WHEEL = 'contentWheel', DIV = 'div', RELATIVE = 'relative', KONVA_CONTENT = 'konvajs-content', SPACE$1 = ' ', UNDERSCORE = '_', CONTAINER = 'container', MAX_LAYERS_NUMBER = 5, EMPTY_STRING$1 = '', EVENTS = [ var STAGE$1 = 'Stage', STRING = 'string', PX = 'px', MOUSEOUT = 'mouseout', MOUSELEAVE$1 = 'mouseleave', MOUSEOVER = 'mouseover', MOUSEENTER$1 = 'mouseenter', MOUSEMOVE = 'mousemove', MOUSEDOWN = 'mousedown', MOUSEUP = 'mouseup', CONTEXTMENU = 'contextmenu', CLICK = 'click', DBL_CLICK = 'dblclick', TOUCHSTART = 'touchstart', TOUCHEND = 'touchend', TAP = 'tap', DBL_TAP = 'dbltap', TOUCHMOVE = 'touchmove', WHEEL = 'wheel', CONTENT_MOUSEOUT = 'contentMouseout', CONTENT_MOUSEOVER = 'contentMouseover', CONTENT_MOUSEMOVE = 'contentMousemove', CONTENT_MOUSEDOWN = 'contentMousedown', CONTENT_MOUSEUP = 'contentMouseup', CONTENT_CONTEXTMENU = 'contentContextmenu', CONTENT_CLICK = 'contentClick', CONTENT_DBL_CLICK = 'contentDblclick', CONTENT_TOUCHSTART = 'contentTouchstart', CONTENT_TOUCHEND = 'contentTouchend', CONTENT_DBL_TAP = 'contentDbltap', CONTENT_TAP = 'contentTap', CONTENT_TOUCHMOVE = 'contentTouchmove', CONTENT_WHEEL = 'contentWheel', RELATIVE = 'relative', KONVA_CONTENT = 'konvajs-content', UNDERSCORE = '_', CONTAINER = 'container', MAX_LAYERS_NUMBER = 5, EMPTY_STRING$1 = '', EVENTS = [
MOUSEDOWN, MOUSEDOWN,
MOUSEMOVE, MOUSEMOVE,
MOUSEUP, MOUSEUP,
@ -5610,7 +5670,7 @@
if (!obj) { if (!obj) {
obj = {}; obj = {};
} }
obj.container = document.createElement(DIV); obj.container = document.createElement('div');
return Container.prototype.clone.call(this, obj); return Container.prototype.clone.call(this, obj);
}; };
Stage.prototype.destroy = function () { Stage.prototype.destroy = function () {
@ -5720,7 +5780,7 @@
layer._setCanvasSize(this.width(), this.height()); layer._setCanvasSize(this.width(), this.height());
// draw layer and append canvas to container // draw layer and append canvas to container
layer.draw(); layer.draw();
if (isBrowser) { if (Konva.isBrowser) {
this.content.appendChild(layer.canvas._canvas); this.content.appendChild(layer.canvas._canvas);
} }
// chainable // chainable
@ -5741,7 +5801,7 @@
return this.getChildren(); return this.getChildren();
}; };
Stage.prototype._bindContentEvents = function () { Stage.prototype._bindContentEvents = function () {
if (!isBrowser) { if (!Konva.isBrowser) {
return; return;
} }
for (var n = 0; n < eventsLength; n++) { for (var n = 0; n < eventsLength; n++) {
@ -5766,7 +5826,7 @@
}; };
Stage.prototype._mousemove = function (evt) { Stage.prototype._mousemove = function (evt) {
// workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
if (UA.ieMobile) { if (Konva.UA.ieMobile) {
return this._touchmove(evt); return this._touchmove(evt);
} }
this.setPointersPositions(evt); this.setPointersPositions(evt);
@ -5820,12 +5880,12 @@
}; };
Stage.prototype._mousedown = function (evt) { Stage.prototype._mousedown = function (evt) {
// workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
if (UA.ieMobile) { if (Konva.UA.ieMobile) {
return this._touchstart(evt); return this._touchstart(evt);
} }
this.setPointersPositions(evt); this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition()); var shape = this.getIntersection(this.getPointerPosition());
_getGlobalKonva().listenClickTap = true; Konva.listenClickTap = true;
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
this.clickStartShape = shape; this.clickStartShape = shape;
shape._fireAndBubble(MOUSEDOWN, { evt: evt }); shape._fireAndBubble(MOUSEDOWN, { evt: evt });
@ -5848,32 +5908,32 @@
}; };
Stage.prototype._mouseup = function (evt) { Stage.prototype._mouseup = function (evt) {
// workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
if (UA.ieMobile) { if (Konva.UA.ieMobile) {
return this._touchend(evt); return this._touchend(evt);
} }
this.setPointersPositions(evt); this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition()), clickStartShape = this.clickStartShape, clickEndShape = this.clickEndShape, fireDblClick = false, dd = _getGlobalKonva().DD; var shape = this.getIntersection(this.getPointerPosition()), clickStartShape = this.clickStartShape, clickEndShape = this.clickEndShape, fireDblClick = false;
if (_getGlobalKonva().inDblClickWindow) { if (Konva.inDblClickWindow) {
fireDblClick = true; fireDblClick = true;
clearTimeout(this.dblTimeout); clearTimeout(this.dblTimeout);
// Konva.inDblClickWindow = false; // Konva.inDblClickWindow = false;
} }
else if (!dd || !dd.justDragged) { else if (!DD.justDragged) {
// don't set inDblClickWindow after dragging // don't set inDblClickWindow after dragging
_getGlobalKonva().inDblClickWindow = true; Konva.inDblClickWindow = true;
clearTimeout(this.dblTimeout); clearTimeout(this.dblTimeout);
} }
else if (dd) { else if (DD) {
dd.justDragged = false; DD.justDragged = false;
} }
this.dblTimeout = setTimeout(function () { this.dblTimeout = setTimeout(function () {
_getGlobalKonva().inDblClickWindow = false; Konva.inDblClickWindow = false;
}, _getGlobalKonva().dblClickWindow); }, Konva.dblClickWindow);
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
this.clickEndShape = shape; this.clickEndShape = shape;
shape._fireAndBubble(MOUSEUP, { evt: evt }); shape._fireAndBubble(MOUSEUP, { evt: evt });
// detect if click or double click occurred // detect if click or double click occurred
if (_getGlobalKonva().listenClickTap && if (Konva.listenClickTap &&
clickStartShape && clickStartShape &&
clickStartShape._id === shape._id) { clickStartShape._id === shape._id) {
shape._fireAndBubble(CLICK, { evt: evt }); shape._fireAndBubble(CLICK, { evt: evt });
@ -5884,7 +5944,7 @@
} }
else { else {
this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this }); this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this });
if (_getGlobalKonva().listenClickTap) { if (Konva.listenClickTap) {
this._fire(CLICK, { evt: evt, target: this, currentTarget: this }); this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
} }
if (fireDblClick) { if (fireDblClick) {
@ -5897,13 +5957,13 @@
} }
// content events // content events
this._fire(CONTENT_MOUSEUP, { evt: evt }); this._fire(CONTENT_MOUSEUP, { evt: evt });
if (_getGlobalKonva().listenClickTap) { if (Konva.listenClickTap) {
this._fire(CONTENT_CLICK, { evt: evt }); this._fire(CONTENT_CLICK, { evt: evt });
if (fireDblClick) { if (fireDblClick) {
this._fire(CONTENT_DBL_CLICK, { evt: evt }); this._fire(CONTENT_DBL_CLICK, { evt: evt });
} }
} }
_getGlobalKonva().listenClickTap = false; Konva.listenClickTap = false;
// always call preventDefault for desktop events because some browsers // always call preventDefault for desktop events because some browsers
// try to drag and drop the canvas element // try to drag and drop the canvas element
if (evt.cancelable) { if (evt.cancelable) {
@ -5928,7 +5988,7 @@
Stage.prototype._touchstart = function (evt) { Stage.prototype._touchstart = function (evt) {
this.setPointersPositions(evt); this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition()); var shape = this.getIntersection(this.getPointerPosition());
_getGlobalKonva().listenClickTap = true; Konva.listenClickTap = true;
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
this.tapStartShape = shape; this.tapStartShape = shape;
shape._fireAndBubble(TOUCHSTART, { evt: evt }); shape._fireAndBubble(TOUCHSTART, { evt: evt });
@ -5950,22 +6010,22 @@
Stage.prototype._touchend = function (evt) { Stage.prototype._touchend = function (evt) {
this.setPointersPositions(evt); this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition()), fireDblClick = false; var shape = this.getIntersection(this.getPointerPosition()), fireDblClick = false;
if (_getGlobalKonva().inDblClickWindow) { if (Konva.inDblClickWindow) {
fireDblClick = true; fireDblClick = true;
clearTimeout(this.dblTimeout); clearTimeout(this.dblTimeout);
// _getGlobalKonva().inDblClickWindow = false; // Konva.inDblClickWindow = false;
} }
else { else {
_getGlobalKonva().inDblClickWindow = true; Konva.inDblClickWindow = true;
clearTimeout(this.dblTimeout); clearTimeout(this.dblTimeout);
} }
this.dblTimeout = setTimeout(function () { this.dblTimeout = setTimeout(function () {
_getGlobalKonva().inDblClickWindow = false; Konva.inDblClickWindow = false;
}, _getGlobalKonva().dblClickWindow); }, Konva.dblClickWindow);
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
shape._fireAndBubble(TOUCHEND, { evt: evt }); shape._fireAndBubble(TOUCHEND, { evt: evt });
// detect if tap or double tap occurred // detect if tap or double tap occurred
if (_getGlobalKonva().listenClickTap && if (Konva.listenClickTap &&
this.tapStartShape && this.tapStartShape &&
shape._id === this.tapStartShape._id) { shape._id === this.tapStartShape._id) {
shape._fireAndBubble(TAP, { evt: evt }); shape._fireAndBubble(TAP, { evt: evt });
@ -5980,7 +6040,7 @@
} }
else { else {
this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this }); this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this });
if (_getGlobalKonva().listenClickTap) { if (Konva.listenClickTap) {
this._fire(TAP, { evt: evt, target: this, currentTarget: this }); this._fire(TAP, { evt: evt, target: this, currentTarget: this });
} }
if (fireDblClick) { if (fireDblClick) {
@ -5993,17 +6053,17 @@
} }
// content events // content events
this._fire(CONTENT_TOUCHEND, { evt: evt }); this._fire(CONTENT_TOUCHEND, { evt: evt });
if (_getGlobalKonva().listenClickTap) { if (Konva.listenClickTap) {
this._fire(CONTENT_TAP, { evt: evt }); this._fire(CONTENT_TAP, { evt: evt });
if (fireDblClick) { if (fireDblClick) {
this._fire(CONTENT_DBL_TAP, { evt: evt }); this._fire(CONTENT_DBL_TAP, { evt: evt });
} }
} }
_getGlobalKonva().listenClickTap = false; Konva.listenClickTap = false;
}; };
Stage.prototype._touchmove = function (evt) { Stage.prototype._touchmove = function (evt) {
this.setPointersPositions(evt); this.setPointersPositions(evt);
var dd = _getGlobalKonva().DD, shape; var shape;
if (!DD.isDragging) { if (!DD.isDragging) {
shape = this.getIntersection(this.getPointerPosition()); shape = this.getIntersection(this.getPointerPosition());
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
@ -6022,12 +6082,8 @@
} }
this._fire(CONTENT_TOUCHMOVE, { evt: evt }); this._fire(CONTENT_TOUCHMOVE, { evt: evt });
} }
if (dd) { if (DD.isDragging && DD.node.preventDefault() && evt.cancelable) {
if (DD.isDragging && evt.preventDefault();
_getGlobalKonva().DD.node.preventDefault() &&
evt.cancelable) {
evt.preventDefault();
}
} }
}; };
Stage.prototype._wheel = function (evt) { Stage.prototype._wheel = function (evt) {
@ -6103,7 +6159,7 @@
// not setting it to 1 will result in an over compensation // not setting it to 1 will result in an over compensation
this.bufferCanvas = new SceneCanvas(); this.bufferCanvas = new SceneCanvas();
this.bufferHitCanvas = new HitCanvas({ pixelRatio: 1 }); this.bufferHitCanvas = new HitCanvas({ pixelRatio: 1 });
if (!isBrowser) { if (!Konva.isBrowser) {
return; return;
} }
var container = this.container(); var container = this.container();
@ -6113,7 +6169,7 @@
// clear content inside container // clear content inside container
container.innerHTML = EMPTY_STRING$1; container.innerHTML = EMPTY_STRING$1;
// content // content
this.content = document.createElement(DIV); this.content = document.createElement('div');
this.content.style.position = RELATIVE; this.content.style.position = RELATIVE;
this.content.style.userSelect = 'none'; this.content.style.userSelect = 'none';
this.content.className = KONVA_CONTENT; this.content.className = KONVA_CONTENT;
@ -6121,13 +6177,6 @@
container.appendChild(this.content); container.appendChild(this.content);
this._resizeDOM(); this._resizeDOM();
}; };
Stage.prototype._onContent = function (typesStr, handler) {
var types = typesStr.split(SPACE$1), len = types.length, n, baseEvent;
for (n = 0; n < len; n++) {
baseEvent = types[n];
this.content.addEventListener(baseEvent, handler, false);
}
};
// currently cache function is now working for stage, because stage has no its own canvas element // currently cache function is now working for stage, because stage has no its own canvas element
Stage.prototype.cache = function () { Stage.prototype.cache = function () {
Util.warn('Cache function is not allowed for stage. You may use cache only for layers, groups and shapes.'); Util.warn('Cache function is not allowed for stage. You may use cache only for layers, groups and shapes.');
@ -8518,7 +8567,7 @@
this.node = node; this.node = node;
this._id = idCounter$1++; this._id = idCounter$1++;
var layers = node.getLayer() || var layers = node.getLayer() ||
(node instanceof _getGlobalKonva().Stage ? node.getLayers() : null); (node instanceof Konva['Stage'] ? node.getLayers() : null);
if (!layers) { if (!layers) {
Util.error('Tween constructor have `node` that is not in a layer. Please add node into layer first.'); Util.error('Tween constructor have `node` that is not in a layer. Please add node into layer first.');
} }
@ -9052,80 +9101,26 @@
} }
}; };
var DD$1 = DD; // what is core parts of Konva?
var enableTrace = false; var Konva$1 = Object.assign(Konva, {
// TODO: move that to stage? Collection: Collection,
var listenClickTap = false; Util: Util,
var inDblClickWindow = false; Node: Node,
/** ids: ids,
* Global pixel ratio configuration. KonvaJS automatically detect pixel ratio of current device. names: names,
* But you may override such property, if you want to use your value. Container: Container,
* @property pixelRatio Stage: Stage,
* @default undefined stages: stages,
* @name pixelRatio Layer: Layer,
* @memberof Konva FastLayer: FastLayer,
* @example Group: Group,
* Konva.pixelRatio = 1; DD: DD,
*/ Shape: Shape,
var pixelRatio = undefined; shapes: shapes,
/** Animation: Animation,
* Drag distance property. If you start to drag a node you may want to wait until pointer is moved to some distance from start point, Tween: Tween,
* only then start dragging. Default is 3px. Easings: Easings
* @property dragDistance });
* @default 0
* @memberof Konva
* @example
* Konva.dragDistance = 10;
*/
var dragDistance = 3;
/**
* Use degree values for angle properties. You may set this property to false if you want to use radiant values.
* @property angleDeg
* @default true
* @memberof Konva
* @example
* node.rotation(45); // 45 degrees
* Konva.angleDeg = false;
* node.rotation(Math.PI / 2); // PI/2 radian
*/
var angleDeg = true;
/**
* Show different warnings about errors or wrong API usage
* @property showWarnings
* @default true
* @memberof Konva
* @example
* Konva.showWarnings = false;
*/
var showWarnings = true;
/**
* Configure what mouse buttons can be used for drag and drop.
* Default value is [0] - only left mouse button.
* @property dragButtons
* @default true
* @memberof Konva
* @example
* // enable left and right mouse buttons
* Konva.dragButtons = [0, 2];
*/
var dragButtons = [0, 1];
/**
* returns whether or not drag and drop is currently active
* @method
* @memberof Konva
*/
var isDragging = function () {
return DD.isDragging;
};
/**
* returns whether or not a drag and drop operation is ready, but may
* not necessarily have started
* @method
* @memberof Konva
*/
var isDragReady = function () {
return !!DD.node;
};
/** /**
* Arc constructor * Arc constructor
@ -9226,7 +9221,7 @@
return _super !== null && _super.apply(this, arguments) || this; return _super !== null && _super.apply(this, arguments) || this;
} }
Arc.prototype._sceneFunc = function (context) { Arc.prototype._sceneFunc = function (context) {
var angle = getAngle(this.angle()), clockwise = this.clockwise(); var angle = Konva.getAngle(this.angle()), clockwise = this.clockwise();
context.beginPath(); context.beginPath();
context.arc(0, 0, this.outerRadius(), 0, angle, clockwise); context.arc(0, 0, this.outerRadius(), 0, angle, clockwise);
context.arc(0, 0, this.innerRadius(), angle, 0, !clockwise); context.arc(0, 0, this.innerRadius(), angle, 0, !clockwise);
@ -12753,7 +12748,7 @@
// bold was not working // bold was not working
// removing font variant will solve // removing font variant will solve
// fix for: https://github.com/konvajs/konva/issues/94 // fix for: https://github.com/konvajs/konva/issues/94
if (UA.isIE) { if (Konva.UA.isIE) {
return (this.fontStyle() + return (this.fontStyle() +
SPACE$2 + SPACE$2 +
this.fontSize() + this.fontSize() +
@ -14003,7 +13998,7 @@
skipShadow: true, skipShadow: true,
skipStroke: this.ignoreStroke() skipStroke: this.ignoreStroke()
}); });
var rotation = getAngle(node.rotation()); var rotation = Konva.getAngle(node.rotation());
var dx = rect.x * node.scaleX() - node.offsetX() * node.scaleX(); var dx = rect.x * node.scaleX() - node.offsetX() * node.scaleX();
var dy = rect.y * node.scaleY() - node.offsetY() * node.scaleY(); var dy = rect.y * node.scaleY() - node.offsetY() * node.scaleY();
return { return {
@ -14061,7 +14056,7 @@
// add hover styling // add hover styling
anchor.on('mouseenter', function () { anchor.on('mouseenter', function () {
var tr = this.getParent(); var tr = this.getParent();
var rad = getAngle(tr.rotation()); var rad = Konva.getAngle(tr.rotation());
var scale = tr.getNode().getAbsoluteScale(); var scale = tr.getNode().getAbsoluteScale();
// If scale.y < 0 xor scale.x < 0 we need to flip (not rotate). // If scale.y < 0 xor scale.x < 0 we need to flip (not rotate).
var isMirrored = scale.y * scale.x < 0; var isMirrored = scale.y * scale.x < 0;
@ -14202,14 +14197,14 @@
if (attrs.height < 0) { if (attrs.height < 0) {
dAlpha -= Math.PI; dAlpha -= Math.PI;
} }
var rot = getAngle(this.rotation()); var rot = Konva.getAngle(this.rotation());
var newRotation = Util._radToDeg(rot) + Util._radToDeg(dAlpha); var newRotation = Util._radToDeg(rot) + Util._radToDeg(dAlpha);
var alpha = getAngle(this.getNode().rotation()); var alpha = Konva.getAngle(this.getNode().rotation());
var newAlpha = Util._degToRad(newRotation); var newAlpha = Util._degToRad(newRotation);
var snaps = this.rotationSnaps(); var snaps = this.rotationSnaps();
var offset = 0.1; var offset = 0.1;
for (var i = 0; i < snaps.length; i++) { for (var i = 0; i < snaps.length; i++) {
var angle = getAngle(snaps[i]); var angle = Konva.getAngle(snaps[i]);
var dif = Math.abs(angle - Util._degToRad(newRotation)) % (Math.PI * 2); var dif = Math.abs(angle - Util._degToRad(newRotation)) % (Math.PI * 2);
if (dif < offset) { if (dif < offset) {
newRotation = Util._radToDeg(angle); newRotation = Util._radToDeg(angle);
@ -14219,9 +14214,7 @@
var dx = padding; var dx = padding;
var dy = padding; var dy = padding;
this._fitNodeInto({ this._fitNodeInto({
rotation: _getGlobalKonva().angleDeg rotation: Konva.angleDeg ? newRotation : Util._degToRad(newRotation),
? newRotation
: Util._degToRad(newRotation),
x: attrs.x + x: attrs.x +
(attrs.width / 2 + padding) * (attrs.width / 2 + padding) *
(Math.cos(alpha) - Math.cos(newAlpha)) + (Math.cos(alpha) - Math.cos(newAlpha)) +
@ -14312,7 +14305,7 @@
var padding = this.padding(); var padding = this.padding();
var scaleX = (newAttrs.width - padding * 2) / pure.width; var scaleX = (newAttrs.width - padding * 2) / pure.width;
var scaleY = (newAttrs.height - padding * 2) / pure.height; var scaleY = (newAttrs.height - padding * 2) / pure.height;
var rotation = getAngle(node.rotation()); var rotation = Konva.getAngle(node.rotation());
var dx = pure.x * scaleX - padding - node.offsetX() * scaleX; var dx = pure.x * scaleX - padding - node.offsetX() * scaleX;
var dy = pure.y * scaleY - padding - node.offsetY() * scaleY; var dy = pure.y * scaleY - padding - node.offsetY() * scaleY;
this.getNode().setAttrs({ this.getNode().setAttrs({
@ -14879,7 +14872,7 @@
} }
Wedge.prototype._sceneFunc = function (context) { Wedge.prototype._sceneFunc = function (context) {
context.beginPath(); context.beginPath();
context.arc(0, 0, this.radius(), 0, getAngle(this.angle()), this.clockwise()); context.arc(0, 0, this.radius(), 0, Konva.getAngle(this.angle()), this.clockwise());
context.lineTo(0, 0); context.lineTo(0, 0);
context.closePath(); context.closePath();
context.fillStrokeShape(this); context.fillStrokeShape(this);
@ -17004,94 +16997,55 @@
* @returns {Number} * @returns {Number}
*/ */
/** // we need to import core of the Konva and then extend it with all additional objects
* @namespace Filters var Konva$2 = Object.assign(Konva$1, {
* @memberof Konva Arc: Arc,
*/ Arrow: Arrow,
var Filters = { Circle: Circle,
Blur: Blur, Ellipse: Ellipse,
Brighten: Brighten, Image: Image,
Contrast: Contrast, Label: Label,
Emboss: Emboss, Tag: Tag,
Enhance: Enhance, Line: Line,
Grayscale: Grayscale, Path: Path,
HSL: HSL, Rect: Rect,
HSV: HSV, RegularPolygon: RegularPolygon,
Invert: Invert, Ring: Ring,
Kaleidoscope: Kaleidoscope, Sprite: Sprite,
Mask: Mask, Star: Star,
Noise: Noise, Text: Text,
Pixelate: Pixelate, TextPath: TextPath,
Posterize: Posterize, Transformer: Transformer,
RGB: RGB, Wedge: Wedge,
RGBA: RGBA, /**
Sepia: Sepia, * @namespace Filters
Solarize: Solarize, * @memberof Konva
Threshold: Threshold */
}; Filters: {
Blur: Blur,
var Konva = ({ Brighten: Brighten,
Filters: Filters, Contrast: Contrast,
Arc: Arc, Emboss: Emboss,
Arrow: Arrow, Enhance: Enhance,
Circle: Circle, Grayscale: Grayscale,
Ellipse: Ellipse, HSL: HSL,
Image: Image, HSV: HSV,
Label: Label, Invert: Invert,
Tag: Tag, Kaleidoscope: Kaleidoscope,
Line: Line, Mask: Mask,
Path: Path, Noise: Noise,
Rect: Rect, Pixelate: Pixelate,
RegularPolygon: RegularPolygon, Posterize: Posterize,
Ring: Ring, RGB: RGB,
Sprite: Sprite, RGBA: RGBA,
Star: Star, Sepia: Sepia,
Text: Text, Solarize: Solarize,
TextPath: TextPath, Threshold: Threshold
Transformer: Transformer, }
Wedge: Wedge,
DD: DD$1,
enableTrace: enableTrace,
listenClickTap: listenClickTap,
inDblClickWindow: inDblClickWindow,
pixelRatio: pixelRatio,
dragDistance: dragDistance,
angleDeg: angleDeg,
showWarnings: showWarnings,
dragButtons: dragButtons,
isDragging: isDragging,
isDragReady: isDragReady,
Collection: Collection,
Util: Util,
Node: Node,
ids: ids,
names: names,
Container: Container,
Stage: Stage,
stages: stages,
Layer: Layer,
FastLayer: FastLayer,
Group: Group,
Shape: Shape,
shapes: shapes,
Animation: Animation,
Tween: Tween,
Easings: Easings,
version: version,
isBrowser: isBrowser,
isUnminified: isUnminified,
dblClickWindow: dblClickWindow,
getAngle: getAngle,
_parseUA: _parseUA,
glob: glob,
UA: UA,
document: document,
_getGlobalKonva: _getGlobalKonva,
_NODES_REGISTRY: _NODES_REGISTRY,
_injectGlobal: _injectGlobal,
_registerNode: _registerNode
}); });
return Konva; // main entry for umd build for rollup
return Konva$2;
})); }));

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

13
package.json
View File

@ -11,13 +11,13 @@
"lib" "lib"
], ],
"main": "./lib/index.js", "main": "./lib/index.js",
"typings": "./types/index.d.ts", "typings": "./types/index-types.d.ts",
"scripts": { "scripts": {
"start": "npm run watch & gulp", "start": "npm run watch & gulp",
"lint": "gulp lint", "lint": "gulp lint",
"build": "npm run compile && gulp build", "build": "npm run compile && gulp build",
"full-build": "npm run build && npm t", "full-build": "npm run build && npm t",
"test": "mocha-headless-chrome -f ./test/runner.html -a disable-web-security", "test": "node ./test/import-test.js && mocha-headless-chrome -f ./test/runner.html -a disable-web-security",
"prettier": "prettier --write \"src/**/*.js\" \"test/**/*.js\" --single-quote", "prettier": "prettier --write \"src/**/*.js\" \"test/**/*.js\" --single-quote",
"tsc": "tsc -d --declarationDir ./types --removeComments --module CommonJS || echo \"tsc faild for some file(s).\"", "tsc": "tsc -d --declarationDir ./types --removeComments --module CommonJS || echo \"tsc faild for some file(s).\"",
"rollup": "rollup -c", "rollup": "rollup -c",
@ -26,6 +26,7 @@
"watch": "rollup -c -w" "watch": "rollup -c -w"
}, },
"devDependencies": { "devDependencies": {
"@pika/plugin-ts-standard-pkg": "^0.3.12",
"chai": "4.2.0", "chai": "4.2.0",
"gulp": "^4.0.0", "gulp": "^4.0.0",
"gulp-concat": "^2.6.1", "gulp-concat": "^2.6.1",
@ -67,6 +68,7 @@
}, },
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@pika/pack": "^0.3.3",
"gulp-exec": "^3.0.2", "gulp-exec": "^3.0.2",
"gulp-typescript": "^5.0.0", "gulp-typescript": "^5.0.0",
"rollup": "^1.1.2", "rollup": "^1.1.2",
@ -74,5 +76,12 @@
"rollup-plugin-node-resolve": "^4.0.0", "rollup-plugin-node-resolve": "^4.0.0",
"rollup-plugin-sourcemaps": "^0.4.2", "rollup-plugin-sourcemaps": "^0.4.2",
"rollup-plugin-typescript2": "^0.19.2" "rollup-plugin-typescript2": "^0.19.2"
},
"@pika/pack": {
"pipeline": [
[
"@pika/plugin-ts-standard-pkg"
]
]
} }
} }

4
src/Canvas.ts
View File

@ -1,6 +1,6 @@
import { Util } from './Util'; import { Util } from './Util';
import { SceneContext, HitContext, Context } from './Context'; import { SceneContext, HitContext, Context } from './Context';
import { glob, _getGlobalKonva } from './Global'; import { glob, Konva } from './Global';
import { Factory } from './Factory'; import { Factory } from './Factory';
import { getNumberValidator } from './Validators'; import { getNumberValidator } from './Validators';
@ -56,7 +56,7 @@ export class Canvas {
var conf = config || {}; var conf = config || {};
var pixelRatio = var pixelRatio =
conf.pixelRatio || _getGlobalKonva().pixelRatio || getDevicePixelRatio(); conf.pixelRatio || Konva.pixelRatio || getDevicePixelRatio();
this.pixelRatio = pixelRatio; this.pixelRatio = pixelRatio;

6
src/Context.ts
View File

@ -1,5 +1,5 @@
import { Util } from './Util'; import { Util } from './Util';
import { getAngle, _getGlobalKonva } from './Global'; import { Konva } from './Global';
import { Canvas } from './Canvas'; import { Canvas } from './Canvas';
var COMMA = ',', var COMMA = ',',
@ -97,7 +97,7 @@ export class Context {
this.canvas = canvas; this.canvas = canvas;
this._context = canvas._canvas.getContext('2d') as CanvasRenderingContext2D; this._context = canvas._canvas.getContext('2d') as CanvasRenderingContext2D;
if (_getGlobalKonva().enableTrace) { if (Konva.enableTrace) {
this.traceArr = []; this.traceArr = [];
this._enableTrace(); this._enableTrace();
} }
@ -483,7 +483,7 @@ export class SceneContext extends Context {
fillPatternY = shape.getFillPatternY(), fillPatternY = shape.getFillPatternY(),
fillPatternScaleX = shape.getFillPatternScaleX(), fillPatternScaleX = shape.getFillPatternScaleX(),
fillPatternScaleY = shape.getFillPatternScaleY(), fillPatternScaleY = shape.getFillPatternScaleY(),
fillPatternRotation = getAngle(shape.getFillPatternRotation()), fillPatternRotation = Konva.getAngle(shape.getFillPatternRotation()),
fillPatternOffsetX = shape.getFillPatternOffsetX(), fillPatternOffsetX = shape.getFillPatternOffsetX(),
fillPatternOffsetY = shape.getFillPatternOffsetY(); fillPatternOffsetY = shape.getFillPatternOffsetY();

4
src/Core.ts
View File

@ -1,7 +1,5 @@
var Konva = require('./_FullInternals'); var Konva = require('./_CoreInternals').Konva;
// add Konva to global variable // add Konva to global variable
// umd build will actually do it
// but it may now it case of modules and bundlers
Konva._injectGlobal(Konva); Konva._injectGlobal(Konva);
exports['default'] = Konva; exports['default'] = Konva;
Konva.default = Konva; Konva.default = Konva;

17
src/DragAndDrop.ts
View File

@ -1,6 +1,5 @@
import { Animation } from './Animation'; import { Animation } from './Animation';
import { isBrowser, _getGlobalKonva } from './Global'; import { Konva } from './Global';
// TODO: make better module, // TODO: make better module,
// make sure other modules import it without global // make sure other modules import it without global
@ -77,11 +76,9 @@ export const DD = {
} }
}, },
_endDragBefore(evt) { _endDragBefore(evt) {
var node = DD.node, var node = DD.node;
layer;
if (node) { if (node) {
layer = node.getLayer();
DD.anim.stop(); DD.anim.stop();
// only fire dragend event if the drag and drop // only fire dragend event if the drag and drop
@ -89,7 +86,7 @@ export const DD = {
if (DD.isDragging) { if (DD.isDragging) {
DD.isDragging = false; DD.isDragging = false;
DD.justDragged = true; DD.justDragged = true;
_getGlobalKonva().listenClickTap = false; Konva.listenClickTap = false;
if (evt) { if (evt) {
evt.dragEndNode = node; evt.dragEndNode = node;
@ -98,8 +95,10 @@ export const DD = {
DD.node = null; DD.node = null;
if (layer || node instanceof _getGlobalKonva().Stage) { const drawNode =
(layer || node).draw(); node.getLayer() || (node instanceof Konva['Stage'] && node);
if (drawNode) {
drawNode.draw();
} }
} }
}, },
@ -121,7 +120,7 @@ export const DD = {
} }
}; };
if (isBrowser) { if (Konva.isBrowser) {
window.addEventListener('mouseup', DD._endDragBefore, true); window.addEventListener('mouseup', DD._endDragBefore, true);
window.addEventListener('touchend', DD._endDragBefore, true); window.addEventListener('touchend', DD._endDragBefore, true);

142
src/Global.ts
View File

@ -13,26 +13,16 @@ var PI_OVER_180 = Math.PI / 180;
/** /**
* @namespace Konva * @namespace Konva
*/ */
export const version = '@@version';
export const isBrowser = function detectBrowser() {
typeof window !== 'undefined' && return (
// browser case typeof window !== 'undefined' &&
({}.toString.call(window) === '[object Window]' || // browser case
// electron case ({}.toString.call(window) === '[object Window]' ||
{}.toString.call(window) === '[object global]'); // electron case
{}.toString.call(window) === '[object global]')
export const isUnminified = /comment/.test( );
function() { }
/* comment */
}.toString()
);
export const dblClickWindow = 400;
export const getAngle = function(angle) {
return _getGlobalKonva().angleDeg ? angle * PI_OVER_180 : angle;
};
const _detectIE = function(ua) { const _detectIE = function(ua) {
var msie = ua.indexOf('msie '); var msie = ua.indexOf('msie ');
@ -96,28 +86,110 @@ export const glob: any =
? self ? self
: {}; : {};
// user agent export const Konva = {
export const UA = _parseUA((glob.navigator && glob.navigator.userAgent) || ''); version: '@@version',
isBrowser: detectBrowser(),
isUnminified: /comment/.test(
function() {
/* comment */
}.toString()
),
dblClickWindow: 400,
getAngle(angle) {
return Konva.angleDeg ? angle * PI_OVER_180 : angle;
},
enableTrace: false,
export const document = glob.document; // TODO: move that to stage?
listenClickTap: false,
inDblClickWindow: false,
// get global Konva instance /**
export const _getGlobalKonva = () => { * Global pixel ratio configuration. KonvaJS automatically detect pixel ratio of current device.
return glob.Konva; * But you may override such property, if you want to use your value.
* @property pixelRatio
* @default undefined
* @name pixelRatio
* @memberof Konva
* @example
* Konva.pixelRatio = 1;
*/
pixelRatio: undefined,
/**
* Drag distance property. If you start to drag a node you may want to wait until pointer is moved to some distance from start point,
* only then start dragging. Default is 3px.
* @property dragDistance
* @default 0
* @memberof Konva
* @example
* Konva.dragDistance = 10;
*/
dragDistance: 3,
/**
* Use degree values for angle properties. You may set this property to false if you want to use radiant values.
* @property angleDeg
* @default true
* @memberof Konva
* @example
* node.rotation(45); // 45 degrees
* Konva.angleDeg = false;
* node.rotation(Math.PI / 2); // PI/2 radian
*/
angleDeg: true,
/**
* Show different warnings about errors or wrong API usage
* @property showWarnings
* @default true
* @memberof Konva
* @example
* Konva.showWarnings = false;
*/
showWarnings: true,
/**
* Configure what mouse buttons can be used for drag and drop.
* Default value is [0] - only left mouse button.
* @property dragButtons
* @default true
* @memberof Konva
* @example
* // enable left and right mouse buttons
* Konva.dragButtons = [0, 2];
*/
dragButtons: [0, 1],
/**
* returns whether or not drag and drop is currently active
* @method
* @memberof Konva
*/
isDragging() {
return Konva['DD'].isDragging;
},
/**
* returns whether or not a drag and drop operation is ready, but may
* not necessarily have started
* @method
* @memberof Konva
*/
isDragReady() {
return !!Konva['DD'].node;
},
// user agent
UA: _parseUA((glob.navigator && glob.navigator.userAgent) || ''),
document: glob.document,
// insert Konva into global namaspace (window)
// it is required for npm packages
_injectGlobal(Konva) {
glob.Konva = Konva;
},
_parseUA
}; };
export const _NODES_REGISTRY = {}; export const _NODES_REGISTRY = {};
let globalKonva = {};
// insert Konva into global namaspace (window)
// it is required for npm packages
export const _injectGlobal = Konva => {
globalKonva = Konva;
glob.Konva = Konva;
Object.assign(Konva, _NODES_REGISTRY);
};
export const _registerNode = NodeClass => { export const _registerNode = NodeClass => {
_NODES_REGISTRY[NodeClass.prototype.getClassName()] = NodeClass; _NODES_REGISTRY[NodeClass.prototype.getClassName()] = NodeClass;
globalKonva[NodeClass.prototype.getClassName()] = NodeClass; Konva[NodeClass.prototype.getClassName()] = NodeClass;
}; };

30
src/Node.ts
View File

@ -1,7 +1,7 @@
import { Util, Collection, Transform, RectConf, Point } from './Util'; import { Util, Collection, Transform, RectConf } from './Util';
import { Factory } from './Factory'; import { Factory } from './Factory';
import { SceneCanvas, HitCanvas } from './Canvas'; import { SceneCanvas, HitCanvas } from './Canvas';
import { _getGlobalKonva, _NODES_REGISTRY } from './Global'; import { Konva, _NODES_REGISTRY } from './Global';
import { Container } from './Container'; import { Container } from './Container';
import { GetSet, Vector2d } from './types'; import { GetSet, Vector2d } from './types';
import { DD } from './DragAndDrop'; import { DD } from './DragAndDrop';
@ -755,14 +755,6 @@ export abstract class Node {
return this; return this;
} }
_remove() { _remove() {
var parent = this.getParent();
if (parent && parent.children) {
parent.children.splice(this.index, 1);
parent._setChildrenIndices();
this.parent = null;
}
// every cached attr that is calculated via node tree // every cached attr that is calculated via node tree
// traversal must be cleared when removing a node // traversal must be cleared when removing a node
this._clearSelfAndDescendantCache(STAGE); this._clearSelfAndDescendantCache(STAGE);
@ -770,6 +762,13 @@ export abstract class Node {
this._clearSelfAndDescendantCache(VISIBLE); this._clearSelfAndDescendantCache(VISIBLE);
this._clearSelfAndDescendantCache(LISTENING); this._clearSelfAndDescendantCache(LISTENING);
this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY); this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
var parent = this.getParent();
if (parent && parent.children) {
parent.children.splice(this.index, 1);
parent._setChildrenIndices();
this.parent = null;
}
} }
/** /**
* remove and destroy a node. Kill it and delete forever! You should not reuse node after destroy(). * remove and destroy a node. Kill it and delete forever! You should not reuse node after destroy().
@ -1632,7 +1631,7 @@ export abstract class Node {
var m = new Transform(), var m = new Transform(),
x = this.x(), x = this.x(),
y = this.y(), y = this.y(),
rotation = _getGlobalKonva().getAngle(this.rotation()), rotation = Konva.getAngle(this.rotation()),
scaleX = this.scaleX(), scaleX = this.scaleX(),
scaleY = this.scaleY(), scaleY = this.scaleY(),
skewX = this.skewX(), skewX = this.skewX(),
@ -1868,7 +1867,7 @@ export abstract class Node {
} else if (this.parent) { } else if (this.parent) {
return this.parent.getDragDistance(); return this.parent.getDragDistance();
} else { } else {
return _getGlobalKonva().dragDistance; return Konva.dragDistance;
} }
} }
_get(selector) { _get(selector) {
@ -2019,7 +2018,7 @@ export abstract class Node {
} }
_setAttr(key, val) { _setAttr(key, val) {
var oldVal = this.attrs[key]; var oldVal = this.attrs[key];
if ((oldVal === val) && !Util.isObject(val)) { if (oldVal === val && !Util.isObject(val)) {
return; return;
} }
if (val === undefined || val === null) { if (val === undefined || val === null) {
@ -2048,7 +2047,7 @@ export abstract class Node {
evt.target = this; evt.target = this;
} }
var shouldStop = var shouldStop =
(eventType === MOUSEENTER || eventType === MOUSELEAVE) && (eventType === MOUSEENTER || eventType === MOUSELEAVE) &&
compareShape && compareShape &&
(this._id === compareShape._id || (this._id === compareShape._id ||
@ -2195,8 +2194,7 @@ export abstract class Node {
this.on('mousedown.konva touchstart.konva', function(evt) { this.on('mousedown.konva touchstart.konva', function(evt) {
var shouldCheckButton = evt.evt.button !== undefined; var shouldCheckButton = evt.evt.button !== undefined;
var canDrag = var canDrag =
!shouldCheckButton || !shouldCheckButton || Konva.dragButtons.indexOf(evt.evt.button) >= 0;
_getGlobalKonva().dragButtons.indexOf(evt.evt.button) >= 0;
if (!canDrag) { if (!canDrag) {
return; return;
} }

79
src/Stage.ts
View File

@ -1,7 +1,7 @@
import { Util, Collection } from './Util'; import { Util, Collection } from './Util';
import { Factory } from './Factory'; import { Factory } from './Factory';
import { Container } from './Container'; import { Container } from './Container';
import { document, isBrowser, _getGlobalKonva, UA } from './Global'; import { Konva } from './Global';
import { SceneCanvas, HitCanvas } from './Canvas'; import { SceneCanvas, HitCanvas } from './Canvas';
import { GetSet, Vector2d } from './types'; import { GetSet, Vector2d } from './types';
import { Shape } from './Shape'; import { Shape } from './Shape';
@ -43,7 +43,6 @@ var STAGE = 'Stage',
CONTENT_TAP = 'contentTap', CONTENT_TAP = 'contentTap',
CONTENT_TOUCHMOVE = 'contentTouchmove', CONTENT_TOUCHMOVE = 'contentTouchmove',
CONTENT_WHEEL = 'contentWheel', CONTENT_WHEEL = 'contentWheel',
DIV = 'div',
RELATIVE = 'relative', RELATIVE = 'relative',
KONVA_CONTENT = 'konvajs-content', KONVA_CONTENT = 'konvajs-content',
SPACE = ' ', SPACE = ' ',
@ -201,7 +200,7 @@ export class Stage extends Container {
if (!obj) { if (!obj) {
obj = {}; obj = {};
} }
obj.container = document.createElement(DIV); obj.container = document.createElement('div');
return Container.prototype.clone.call(this, obj); return Container.prototype.clone.call(this, obj);
} }
@ -346,7 +345,7 @@ export class Stage extends Container {
// draw layer and append canvas to container // draw layer and append canvas to container
layer.draw(); layer.draw();
if (isBrowser) { if (Konva.isBrowser) {
this.content.appendChild(layer.canvas._canvas); this.content.appendChild(layer.canvas._canvas);
} }
@ -368,7 +367,7 @@ export class Stage extends Container {
return this.getChildren(); return this.getChildren();
} }
_bindContentEvents() { _bindContentEvents() {
if (!isBrowser) { if (!Konva.isBrowser) {
return; return;
} }
for (var n = 0; n < eventsLength; n++) { for (var n = 0; n < eventsLength; n++) {
@ -395,7 +394,7 @@ export class Stage extends Container {
} }
_mousemove(evt) { _mousemove(evt) {
// workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
if (UA.ieMobile) { if (Konva.UA.ieMobile) {
return this._touchmove(evt); return this._touchmove(evt);
} }
this.setPointersPositions(evt); this.setPointersPositions(evt);
@ -450,13 +449,13 @@ export class Stage extends Container {
} }
_mousedown(evt) { _mousedown(evt) {
// workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
if (UA.ieMobile) { if (Konva.UA.ieMobile) {
return this._touchstart(evt); return this._touchstart(evt);
} }
this.setPointersPositions(evt); this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition()); var shape = this.getIntersection(this.getPointerPosition());
_getGlobalKonva().listenClickTap = true; Konva.listenClickTap = true;
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
this.clickStartShape = shape; this.clickStartShape = shape;
@ -481,31 +480,30 @@ export class Stage extends Container {
} }
_mouseup(evt) { _mouseup(evt) {
// workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
if (UA.ieMobile) { if (Konva.UA.ieMobile) {
return this._touchend(evt); return this._touchend(evt);
} }
this.setPointersPositions(evt); this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition()), var shape = this.getIntersection(this.getPointerPosition()),
clickStartShape = this.clickStartShape, clickStartShape = this.clickStartShape,
clickEndShape = this.clickEndShape, clickEndShape = this.clickEndShape,
fireDblClick = false, fireDblClick = false;
dd = _getGlobalKonva().DD;
if (_getGlobalKonva().inDblClickWindow) { if (Konva.inDblClickWindow) {
fireDblClick = true; fireDblClick = true;
clearTimeout(this.dblTimeout); clearTimeout(this.dblTimeout);
// Konva.inDblClickWindow = false; // Konva.inDblClickWindow = false;
} else if (!dd || !dd.justDragged) { } else if (!DD.justDragged) {
// don't set inDblClickWindow after dragging // don't set inDblClickWindow after dragging
_getGlobalKonva().inDblClickWindow = true; Konva.inDblClickWindow = true;
clearTimeout(this.dblTimeout); clearTimeout(this.dblTimeout);
} else if (dd) { } else if (DD) {
dd.justDragged = false; DD.justDragged = false;
} }
this.dblTimeout = setTimeout(function() { this.dblTimeout = setTimeout(function() {
_getGlobalKonva().inDblClickWindow = false; Konva.inDblClickWindow = false;
}, _getGlobalKonva().dblClickWindow); }, Konva.dblClickWindow);
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
this.clickEndShape = shape; this.clickEndShape = shape;
@ -513,7 +511,7 @@ export class Stage extends Container {
// detect if click or double click occurred // detect if click or double click occurred
if ( if (
_getGlobalKonva().listenClickTap && Konva.listenClickTap &&
clickStartShape && clickStartShape &&
clickStartShape._id === shape._id clickStartShape._id === shape._id
) { ) {
@ -525,7 +523,7 @@ export class Stage extends Container {
} }
} else { } else {
this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this }); this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this });
if (_getGlobalKonva().listenClickTap) { if (Konva.listenClickTap) {
this._fire(CLICK, { evt: evt, target: this, currentTarget: this }); this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
} }
@ -539,14 +537,14 @@ export class Stage extends Container {
} }
// content events // content events
this._fire(CONTENT_MOUSEUP, { evt: evt }); this._fire(CONTENT_MOUSEUP, { evt: evt });
if (_getGlobalKonva().listenClickTap) { if (Konva.listenClickTap) {
this._fire(CONTENT_CLICK, { evt: evt }); this._fire(CONTENT_CLICK, { evt: evt });
if (fireDblClick) { if (fireDblClick) {
this._fire(CONTENT_DBL_CLICK, { evt: evt }); this._fire(CONTENT_DBL_CLICK, { evt: evt });
} }
} }
_getGlobalKonva().listenClickTap = false; Konva.listenClickTap = false;
// always call preventDefault for desktop events because some browsers // always call preventDefault for desktop events because some browsers
// try to drag and drop the canvas element // try to drag and drop the canvas element
@ -573,7 +571,7 @@ export class Stage extends Container {
this.setPointersPositions(evt); this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition()); var shape = this.getIntersection(this.getPointerPosition());
_getGlobalKonva().listenClickTap = true; Konva.listenClickTap = true;
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
this.tapStartShape = shape; this.tapStartShape = shape;
@ -598,25 +596,25 @@ export class Stage extends Container {
var shape = this.getIntersection(this.getPointerPosition()), var shape = this.getIntersection(this.getPointerPosition()),
fireDblClick = false; fireDblClick = false;
if (_getGlobalKonva().inDblClickWindow) { if (Konva.inDblClickWindow) {
fireDblClick = true; fireDblClick = true;
clearTimeout(this.dblTimeout); clearTimeout(this.dblTimeout);
// _getGlobalKonva().inDblClickWindow = false; // Konva.inDblClickWindow = false;
} else { } else {
_getGlobalKonva().inDblClickWindow = true; Konva.inDblClickWindow = true;
clearTimeout(this.dblTimeout); clearTimeout(this.dblTimeout);
} }
this.dblTimeout = setTimeout(function() { this.dblTimeout = setTimeout(function() {
_getGlobalKonva().inDblClickWindow = false; Konva.inDblClickWindow = false;
}, _getGlobalKonva().dblClickWindow); }, Konva.dblClickWindow);
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
shape._fireAndBubble(TOUCHEND, { evt: evt }); shape._fireAndBubble(TOUCHEND, { evt: evt });
// detect if tap or double tap occurred // detect if tap or double tap occurred
if ( if (
_getGlobalKonva().listenClickTap && Konva.listenClickTap &&
this.tapStartShape && this.tapStartShape &&
shape._id === this.tapStartShape._id shape._id === this.tapStartShape._id
) { ) {
@ -632,7 +630,7 @@ export class Stage extends Container {
} }
} else { } else {
this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this }); this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this });
if (_getGlobalKonva().listenClickTap) { if (Konva.listenClickTap) {
this._fire(TAP, { evt: evt, target: this, currentTarget: this }); this._fire(TAP, { evt: evt, target: this, currentTarget: this });
} }
if (fireDblClick) { if (fireDblClick) {
@ -645,19 +643,18 @@ export class Stage extends Container {
} }
// content events // content events
this._fire(CONTENT_TOUCHEND, { evt: evt }); this._fire(CONTENT_TOUCHEND, { evt: evt });
if (_getGlobalKonva().listenClickTap) { if (Konva.listenClickTap) {
this._fire(CONTENT_TAP, { evt: evt }); this._fire(CONTENT_TAP, { evt: evt });
if (fireDblClick) { if (fireDblClick) {
this._fire(CONTENT_DBL_TAP, { evt: evt }); this._fire(CONTENT_DBL_TAP, { evt: evt });
} }
} }
_getGlobalKonva().listenClickTap = false; Konva.listenClickTap = false;
} }
_touchmove(evt) { _touchmove(evt) {
this.setPointersPositions(evt); this.setPointersPositions(evt);
var dd = _getGlobalKonva().DD, var shape;
shape;
if (!DD.isDragging) { if (!DD.isDragging) {
shape = this.getIntersection(this.getPointerPosition()); shape = this.getIntersection(this.getPointerPosition());
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
@ -675,14 +672,8 @@ export class Stage extends Container {
} }
this._fire(CONTENT_TOUCHMOVE, { evt: evt }); this._fire(CONTENT_TOUCHMOVE, { evt: evt });
} }
if (dd) { if (DD.isDragging && DD.node.preventDefault() && evt.cancelable) {
if ( evt.preventDefault();
DD.isDragging &&
_getGlobalKonva().DD.node.preventDefault() &&
evt.cancelable
) {
evt.preventDefault();
}
} }
} }
_wheel(evt) { _wheel(evt) {
@ -763,7 +754,7 @@ export class Stage extends Container {
this.bufferCanvas = new SceneCanvas(); this.bufferCanvas = new SceneCanvas();
this.bufferHitCanvas = new HitCanvas({ pixelRatio: 1 }); this.bufferHitCanvas = new HitCanvas({ pixelRatio: 1 });
if (!isBrowser) { if (!Konva.isBrowser) {
return; return;
} }
var container = this.container(); var container = this.container();
@ -774,7 +765,7 @@ export class Stage extends Container {
container.innerHTML = EMPTY_STRING; container.innerHTML = EMPTY_STRING;
// content // content
this.content = document.createElement(DIV); this.content = document.createElement('div');
this.content.style.position = RELATIVE; this.content.style.position = RELATIVE;
this.content.style.userSelect = 'none'; this.content.style.userSelect = 'none';
this.content.className = KONVA_CONTENT; this.content.className = KONVA_CONTENT;

4
src/Tween.ts
View File

@ -1,7 +1,7 @@
import { Util } from './Util'; import { Util } from './Util';
import { Animation } from './Animation'; import { Animation } from './Animation';
import { Node } from './Node'; import { Node } from './Node';
import { _getGlobalKonva } from './Global'; import { Konva } from './Global';
var blacklist = { var blacklist = {
node: 1, node: 1,
@ -200,7 +200,7 @@ export class Tween {
var layers = var layers =
node.getLayer() || node.getLayer() ||
(node instanceof _getGlobalKonva().Stage ? node.getLayers() : null); (node instanceof Konva['Stage'] ? node.getLayers() : null);
if (!layers) { if (!layers) {
Util.error( Util.error(
'Tween constructor have `node` that is not in a layer. Please add node into layer first.' 'Tween constructor have `node` that is not in a layer. Please add node into layer first.'

8
src/Util.ts
View File

@ -1,4 +1,4 @@
import { isBrowser, document, glob, _getGlobalKonva } from './Global'; import { glob, Konva } from './Global';
import { Node } from './Node'; import { Node } from './Node';
export type Point = { export type Point = {
@ -563,9 +563,9 @@ export const Util = {
} }
}, },
createCanvasElement() { createCanvasElement() {
var canvas = isBrowser var canvas = Konva.isBrowser
? document.createElement('canvas') ? document.createElement('canvas')
: new (_getGlobalKonva()._nodeCanvas())(); : new (Konva['_nodeCanvas']())();
// on some environments canvas.style is readonly // on some environments canvas.style is readonly
try { try {
canvas.style = canvas.style || {}; canvas.style = canvas.style || {};
@ -811,7 +811,7 @@ export const Util = {
console.error(KONVA_ERROR + str); console.error(KONVA_ERROR + str);
}, },
warn(str) { warn(str) {
if (!_getGlobalKonva().showWarnings) { if (!Konva.showWarnings) {
return; return;
} }
console.warn(KONVA_WARNING + str); console.warn(KONVA_WARNING + str);

16
src/Validators.ts
View File

@ -1,4 +1,4 @@
import { isUnminified } from './Global'; import { Konva } from './Global';
import { Util } from './Util'; import { Util } from './Util';
function _formatValue(val) { function _formatValue(val) {
@ -34,7 +34,7 @@ export function alphaComponent(val) {
} }
export function getNumberValidator() { export function getNumberValidator() {
if (isUnminified) { if (Konva.isUnminified) {
return function(val, attr) { return function(val, attr) {
if (!Util._isNumber(val)) { if (!Util._isNumber(val)) {
Util.warn( Util.warn(
@ -49,7 +49,7 @@ export function getNumberValidator() {
} }
} }
export function getNumberOrAutoValidator() { export function getNumberOrAutoValidator() {
if (isUnminified) { if (Konva.isUnminified) {
return function(val, attr) { return function(val, attr) {
var isNumber = Util._isNumber(val); var isNumber = Util._isNumber(val);
var isAuto = val === 'auto'; var isAuto = val === 'auto';
@ -67,7 +67,7 @@ export function getNumberOrAutoValidator() {
} }
} }
export function getStringValidator() { export function getStringValidator() {
if (isUnminified) { if (Konva.isUnminified) {
return function(val, attr) { return function(val, attr) {
if (!Util._isString(val)) { if (!Util._isString(val)) {
Util.warn( Util.warn(
@ -82,7 +82,7 @@ export function getStringValidator() {
} }
} }
export function getFunctionValidator() { export function getFunctionValidator() {
if (isUnminified) { if (Konva.isUnminified) {
return function(val, attr) { return function(val, attr) {
if (!Util._isFunction(val)) { if (!Util._isFunction(val)) {
Util.warn( Util.warn(
@ -97,7 +97,7 @@ export function getFunctionValidator() {
} }
} }
export function getNumberArrayValidator() { export function getNumberArrayValidator() {
if (isUnminified) { if (Konva.isUnminified) {
return function(val, attr) { return function(val, attr) {
if (!Util._isArray(val)) { if (!Util._isArray(val)) {
Util.warn( Util.warn(
@ -124,7 +124,7 @@ export function getNumberArrayValidator() {
} }
} }
export function getBooleanValidator() { export function getBooleanValidator() {
if (isUnminified) { if (Konva.isUnminified) {
return function(val, attr) { return function(val, attr) {
var isBool = val === true || val === false; var isBool = val === true || val === false;
if (!isBool) { if (!isBool) {
@ -140,7 +140,7 @@ export function getBooleanValidator() {
} }
} }
export function getComponentValidator(components) { export function getComponentValidator(components) {
if (isUnminified) { if (Konva.isUnminified) {
return function(val, attr) { return function(val, attr) {
if (!Util.isObject(val)) { if (!Util.isObject(val)) {
Util.warn( Util.warn(

122
src/_CoreInternals.ts
View File

@ -1,99 +1,41 @@
export * from './Global'; // what is core parts of Konva?
export { Collection, Util } from './Util'; import { Konva as Global } from './Global';
export { Node, ids, names } from './Node';
export { Container } from './Container';
export { Stage, stages } from './Stage'; import { Collection, Util } from './Util';
import { Node, ids, names } from './Node';
import { Container } from './Container';
export { Layer } from './Layer'; import { Stage, stages } from './Stage';
export { FastLayer } from './FastLayer';
export { Group } from './Group'; import { Layer } from './Layer';
import { FastLayer } from './FastLayer';
import { DD as dd } from './DragAndDrop'; import { Group } from './Group';
export const DD = dd; import { DD } from './DragAndDrop';
export { Shape, shapes } from './Shape';
export { Animation } from './Animation'; import { Shape, shapes } from './Shape';
export { Tween, Easings } from './Tween';
export const enableTrace = false; import { Animation } from './Animation';
import { Tween, Easings } from './Tween';
// TODO: move that to stage? export const Konva = Object.assign(Global, {
export const listenClickTap = false; Collection,
export const inDblClickWindow = false; Util,
Node,
/** ids,
* Global pixel ratio configuration. KonvaJS automatically detect pixel ratio of current device. names,
* But you may override such property, if you want to use your value. Container,
* @property pixelRatio Stage,
* @default undefined stages,
* @name pixelRatio Layer,
* @memberof Konva FastLayer,
* @example Group,
* Konva.pixelRatio = 1; DD,
*/ Shape,
export const pixelRatio = undefined; shapes,
Animation,
/** Tween,
* Drag distance property. If you start to drag a node you may want to wait until pointer is moved to some distance from start point, Easings
* only then start dragging. Default is 3px. });
* @property dragDistance
* @default 0
* @memberof Konva
* @example
* Konva.dragDistance = 10;
*/
export const dragDistance = 3;
/**
* Use degree values for angle properties. You may set this property to false if you want to use radiant values.
* @property angleDeg
* @default true
* @memberof Konva
* @example
* node.rotation(45); // 45 degrees
* Konva.angleDeg = false;
* node.rotation(Math.PI / 2); // PI/2 radian
*/
export const angleDeg = true;
/**
* Show different warnings about errors or wrong API usage
* @property showWarnings
* @default true
* @memberof Konva
* @example
* Konva.showWarnings = false;
*/
export const showWarnings = true;
/**
* Configure what mouse buttons can be used for drag and drop.
* Default value is [0] - only left mouse button.
* @property dragButtons
* @default true
* @memberof Konva
* @example
* // enable left and right mouse buttons
* Konva.dragButtons = [0, 2];
*/
export const dragButtons = [0, 1];
/**
* returns whether or not drag and drop is currently active
* @method
* @memberof Konva
*/
export const isDragging = function() {
return dd.isDragging;
};
/**
* returns whether or not a drag and drop operation is ready, but may
* not necessarily have started
* @method
* @memberof Konva
*/
export const isDragReady = function() {
return !!dd.node;
};

108
src/_FullInternals.ts
View File

@ -1,23 +1,25 @@
export * from './_CoreInternals'; // we need to import core of the Konva and then extend it with all additional objects
import { Konva as Core } from './_CoreInternals';
// shapes // shapes
export { Arc } from './shapes/Arc'; import { Arc } from './shapes/Arc';
export { Arrow } from './shapes/Arrow'; import { Arrow } from './shapes/Arrow';
export { Circle } from './shapes/Circle'; import { Circle } from './shapes/Circle';
export { Ellipse } from './shapes/Ellipse'; import { Ellipse } from './shapes/Ellipse';
export { Image } from './shapes/Image'; import { Image } from './shapes/Image';
export { Label, Tag } from './shapes/Label'; import { Label, Tag } from './shapes/Label';
export { Line } from './shapes/Line'; import { Line } from './shapes/Line';
export { Path } from './shapes/Path'; import { Path } from './shapes/Path';
export { Rect } from './shapes/Rect'; import { Rect } from './shapes/Rect';
export { RegularPolygon } from './shapes/RegularPolygon'; import { RegularPolygon } from './shapes/RegularPolygon';
export { Ring } from './shapes/Ring'; import { Ring } from './shapes/Ring';
export { Sprite } from './shapes/Sprite'; import { Sprite } from './shapes/Sprite';
export { Star } from './shapes/Star'; import { Star } from './shapes/Star';
export { Text } from './shapes/Text'; import { Text } from './shapes/Text';
export { TextPath } from './shapes/TextPath'; import { TextPath } from './shapes/TextPath';
export { Transformer } from './shapes/Transformer'; import { Transformer } from './shapes/Transformer';
export { Wedge } from './shapes/Wedge'; import { Wedge } from './shapes/Wedge';
// filters // filters
import { Blur } from './filters/Blur'; import { Blur } from './filters/Blur';
@ -40,28 +42,48 @@ import { Sepia } from './filters/Sepia';
import { Solarize } from './filters/Solarize'; import { Solarize } from './filters/Solarize';
import { Threshold } from './filters/Threshold'; import { Threshold } from './filters/Threshold';
/** export const Konva = Object.assign(Core, {
* @namespace Filters Arc,
* @memberof Konva Arrow,
*/ Circle,
export const Filters = { Ellipse,
Blur, Image,
Brighten, Label,
Contrast, Tag,
Emboss, Line,
Enhance, Path,
Grayscale, Rect,
HSL, RegularPolygon,
HSV, Ring,
Invert, Sprite,
Kaleidoscope, Star,
Mask, Text,
Noise, TextPath,
Pixelate, Transformer,
Posterize, Wedge,
RGB, /**
RGBA, * @namespace Filters
Sepia, * @memberof Konva
Solarize, */
Threshold Filters: {
}; Blur,
Brighten,
Contrast,
Emboss,
Enhance,
Grayscale,
HSL,
HSV,
Invert,
Kaleidoscope,
Mask,
Noise,
Pixelate,
Posterize,
RGB,
RGBA,
Sepia,
Solarize,
Threshold
}
});

5
src/_UMD.ts
View File

@ -1,3 +1,6 @@
import * as Konva from './_FullInternals'; // main entry for umd build for rollup
// and for typescript generation
import { Konva } from './_FullInternals';
export default Konva; export default Konva;

3
src/index-types.ts Normal file
View File

@ -0,0 +1,3 @@
import { Konva as Core } from './_FullInternals';
export default Core;

5
src/index.ts
View File

@ -1,8 +1,5 @@
var Konva = require('./_FullInternals'); var Konva = require('./_FullInternals').Konva;
// add Konva to global variable // add Konva to global variable
// umd build will actually do it
// but it may now it case of modules and bundlers
Konva._injectGlobal(Konva); Konva._injectGlobal(Konva);
exports['default'] = Konva; exports['default'] = Konva;
Konva.default = Konva;
module.exports = exports['default']; module.exports = exports['default'];

4
src/shapes/Arc.ts
View File

@ -1,7 +1,7 @@
import { Collection } from '../Util'; import { Collection } from '../Util';
import { Factory } from '../Factory'; import { Factory } from '../Factory';
import { Shape } from '../Shape'; import { Shape } from '../Shape';
import { getAngle } from '../Global'; import { Konva } from '../Global';
import { GetSet } from '../types'; import { GetSet } from '../types';
import { getNumberValidator, getBooleanValidator } from '../Validators'; import { getNumberValidator, getBooleanValidator } from '../Validators';
import { _registerNode } from '../Global'; import { _registerNode } from '../Global';
@ -32,7 +32,7 @@ import { _registerNode } from '../Global';
*/ */
export class Arc extends Shape { export class Arc extends Shape {
_sceneFunc(context) { _sceneFunc(context) {
var angle = getAngle(this.angle()), var angle = Konva.getAngle(this.angle()),
clockwise = this.clockwise(); clockwise = this.clockwise();
context.beginPath(); context.beginPath();

4
src/shapes/Text.ts
View File

@ -1,7 +1,7 @@
import { Util, Collection } from '../Util'; import { Util, Collection } from '../Util';
import { Factory } from '../Factory'; import { Factory } from '../Factory';
import { Shape } from '../Shape'; import { Shape } from '../Shape';
import { UA } from '../Global'; import { Konva } from '../Global';
import { import {
getNumberValidator, getNumberValidator,
getStringValidator, getStringValidator,
@ -335,7 +335,7 @@ export class Text extends Shape {
// bold was not working // bold was not working
// removing font variant will solve // removing font variant will solve
// fix for: https://github.com/konvajs/konva/issues/94 // fix for: https://github.com/konvajs/konva/issues/94
if (UA.isIE) { if (Konva.UA.isIE) {
return ( return (
this.fontStyle() + this.fontStyle() +
SPACE + SPACE +

18
src/shapes/Transformer.ts
View File

@ -4,7 +4,7 @@ import { Node } from '../Node';
import { Shape } from '../Shape'; import { Shape } from '../Shape';
import { Rect } from './Rect'; import { Rect } from './Rect';
import { Group } from '../Group'; import { Group } from '../Group';
import { getAngle, _getGlobalKonva } from '../Global'; import { Konva } from '../Global';
import { getNumberValidator } from '../Validators'; import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global'; import { _registerNode } from '../Global';
@ -254,7 +254,7 @@ export class Transformer extends Group {
skipShadow: true, skipShadow: true,
skipStroke: this.ignoreStroke() skipStroke: this.ignoreStroke()
}); });
var rotation = getAngle(node.rotation()); var rotation = Konva.getAngle(node.rotation());
var dx = rect.x * node.scaleX() - node.offsetX() * node.scaleX(); var dx = rect.x * node.scaleX() - node.offsetX() * node.scaleX();
var dy = rect.y * node.scaleY() - node.offsetY() * node.scaleY(); var dy = rect.y * node.scaleY() - node.offsetY() * node.scaleY();
@ -320,7 +320,7 @@ export class Transformer extends Group {
anchor.on('mouseenter', function() { anchor.on('mouseenter', function() {
var tr = this.getParent(); var tr = this.getParent();
var rad = getAngle(tr.rotation()); var rad = Konva.getAngle(tr.rotation());
var scale = tr.getNode().getAbsoluteScale(); var scale = tr.getNode().getAbsoluteScale();
// If scale.y < 0 xor scale.x < 0 we need to flip (not rotate). // If scale.y < 0 xor scale.x < 0 we need to flip (not rotate).
@ -494,17 +494,17 @@ export class Transformer extends Group {
dAlpha -= Math.PI; dAlpha -= Math.PI;
} }
var rot = getAngle(this.rotation()); var rot = Konva.getAngle(this.rotation());
var newRotation = Util._radToDeg(rot) + Util._radToDeg(dAlpha); var newRotation = Util._radToDeg(rot) + Util._radToDeg(dAlpha);
var alpha = getAngle(this.getNode().rotation()); var alpha = Konva.getAngle(this.getNode().rotation());
var newAlpha = Util._degToRad(newRotation); var newAlpha = Util._degToRad(newRotation);
var snaps = this.rotationSnaps(); var snaps = this.rotationSnaps();
var offset = 0.1; var offset = 0.1;
for (var i = 0; i < snaps.length; i++) { for (var i = 0; i < snaps.length; i++) {
var angle = getAngle(snaps[i]); var angle = Konva.getAngle(snaps[i]);
var dif = Math.abs(angle - Util._degToRad(newRotation)) % (Math.PI * 2); var dif = Math.abs(angle - Util._degToRad(newRotation)) % (Math.PI * 2);
@ -519,9 +519,7 @@ export class Transformer extends Group {
this._fitNodeInto( this._fitNodeInto(
{ {
rotation: _getGlobalKonva().angleDeg rotation: Konva.angleDeg ? newRotation : Util._degToRad(newRotation),
? newRotation
: Util._degToRad(newRotation),
x: x:
attrs.x + attrs.x +
(attrs.width / 2 + padding) * (attrs.width / 2 + padding) *
@ -640,7 +638,7 @@ export class Transformer extends Group {
var scaleX = (newAttrs.width - padding * 2) / pure.width; var scaleX = (newAttrs.width - padding * 2) / pure.width;
var scaleY = (newAttrs.height - padding * 2) / pure.height; var scaleY = (newAttrs.height - padding * 2) / pure.height;
var rotation = getAngle(node.rotation()); var rotation = Konva.getAngle(node.rotation());
var dx = pure.x * scaleX - padding - node.offsetX() * scaleX; var dx = pure.x * scaleX - padding - node.offsetX() * scaleX;
var dy = pure.y * scaleY - padding - node.offsetY() * scaleY; var dy = pure.y * scaleY - padding - node.offsetY() * scaleY;

4
src/shapes/Wedge.ts
View File

@ -1,7 +1,7 @@
import { Collection } from '../Util'; import { Collection } from '../Util';
import { Factory } from '../Factory'; import { Factory } from '../Factory';
import { Shape } from '../Shape'; import { Shape } from '../Shape';
import { getAngle } from '../Global'; import { Konva } from '../Global';
import { getNumberValidator } from '../Validators'; import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global'; import { _registerNode } from '../Global';
@ -37,7 +37,7 @@ export class Wedge extends Shape {
0, 0,
this.radius(), this.radius(),
0, 0,
getAngle(this.angle()), Konva.getAngle(this.angle()),
this.clockwise() this.clockwise()
); );
context.lineTo(0, 0); context.lineTo(0, 0);

3
test/import-test.js
View File

@ -13,6 +13,7 @@ equal(Konva.Rect, undefined, 'no external shapes');
let Rect = require('../lib/shapes/Rect').Rect; let Rect = require('../lib/shapes/Rect').Rect;
equal(Rect !== undefined, true, 'Rect is defined'); equal(Rect !== undefined, true, 'Rect is defined');
equal(Konva.Rect, Rect, 'Rect is injected');
// now import from package.json // now import from package.json
let NewKonva = require('../'); let NewKonva = require('../');
@ -21,3 +22,5 @@ equal(NewKonva.Rect, Rect, 'Same rects');
// check global injection // check global injection
equal(global.Konva, NewKonva, 'injected'); equal(global.Konva, NewKonva, 'injected');
equal(NewKonva, Konva, 'Full package is the same as core.');

2
tsconfig.json
View File

@ -1,7 +1,7 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "lib", "outDir": "lib",
"module": "ES2015", "module": "es2015",
"target": "es5", "target": "es5",
"noEmitOnError": true, "noEmitOnError": true,
"lib": ["es2015", "dom"] "lib": ["es2015", "dom"]