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

make Konva modular

Browse Source
This commit is contained in:
Anton Lavrenov 2019-02-27 08:06:04 -05:00
parent 886e94585f
commit 8962164096
40 changed files with 511 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

334
konva.js
View File

@ -8,7 +8,7 @@
* Konva JavaScript Framework v3.0.0
* http://konvajs.org/
* Licensed under the MIT
* Date: Mon Feb 25 2019
* Date: Tue Feb 26 2019
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -30,7 +30,7 @@
}.toString());
var dblClickWindow = 400;
var getAngle = function (angle) {
return getGlobalKonva().angleDeg ? angle * PI_OVER_180 : angle;
return _getGlobalKonva().angleDeg ? angle * PI_OVER_180 : angle;
};
var _detectIE = function (ua) {
var msie = ua.indexOf('msie ');
@ -83,8 +83,22 @@
// user agent
var UA = _parseUA((glob.navigator && glob.navigator.userAgent) || '');
var document = glob.document;
var getGlobalKonva = function () {
// get global Konva instance
var _getGlobalKonva = function () {
return glob.Konva;
};
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(glob.Konva, _NODES_REGISTRY);
};
var _registerNode = function (NodeClass) {
_NODES_REGISTRY[NodeClass.prototype.getClassName()] = NodeClass;
globalKonva[NodeClass.prototype.getClassName()] = NodeClass;
};
/**
@ -583,7 +597,7 @@
createCanvasElement: function () {
var canvas = isBrowser
? document.createElement('canvas')
: new (getGlobalKonva()._nodeCanvas())();
: new (_getGlobalKonva()._nodeCanvas())();
// on some environments canvas.style is readonly
try {
canvas.style = canvas.style || {};
@ -825,7 +839,7 @@
console.error(KONVA_ERROR + str);
},
warn: function (str) {
if (!getGlobalKonva().showWarnings) {
if (!_getGlobalKonva().showWarnings) {
return;
}
console.warn(KONVA_WARNING + str);
@ -1322,7 +1336,7 @@
function Context(canvas) {
this.canvas = canvas;
this._context = canvas._canvas.getContext('2d');
if (getGlobalKonva().enableTrace) {
if (_getGlobalKonva().enableTrace) {
this.traceArr = [];
this._enableTrace();
}
@ -1856,7 +1870,7 @@
this.height = 0;
this.isCache = false;
var conf = config || {};
var pixelRatio = conf.pixelRatio || getGlobalKonva().pixelRatio || getDevicePixelRatio();
var pixelRatio = conf.pixelRatio || _getGlobalKonva().pixelRatio || getDevicePixelRatio();
this.pixelRatio = pixelRatio;
this._canvas = Util.createCanvasElement();
// set inline styles
@ -2272,13 +2286,13 @@
if (DD.isDragging) {
DD.isDragging = false;
DD.justDragged = true;
getGlobalKonva().listenClickTap = false;
_getGlobalKonva().listenClickTap = false;
if (evt) {
evt.dragEndNode = node;
}
}
DD.node = null;
if (layer || node instanceof getGlobalKonva().Stage) {
if (layer || node instanceof _getGlobalKonva().Stage) {
(layer || node).draw();
}
}
@ -2776,7 +2790,7 @@
* // with event delegations
* layer.on('click', 'Group', function(evt) {
* var shape = evt.target;
* var group = evtn.currentTarger;
* var group = evt.currentTarget;
* });
*/
Node.prototype.on = function (evtStr, handler) {
@ -3702,7 +3716,7 @@
return this._getCache(TRANSFORM, this._getTransform);
};
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 = _getGlobalKonva().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) {
m.translate(x, y);
}
@ -3914,7 +3928,7 @@
return this.parent.getDragDistance();
}
else {
return getGlobalKonva().dragDistance;
return _getGlobalKonva().dragDistance;
}
};
Node.prototype._get = function (selector) {
@ -4206,7 +4220,7 @@
Node.prototype._listenDrag = function () {
this._dragCleanup();
this.on('mousedown.konva touchstart.konva', function (evt) {
var canDrag = getGlobalKonva().dragButtons.indexOf(evt.evt.button) >= 0;
var canDrag = _getGlobalKonva().dragButtons.indexOf(evt.evt.button) >= 0;
if (!canDrag) {
return;
}
@ -4263,13 +4277,13 @@
if (container) {
obj.attrs.container = container;
}
if (!getGlobalKonva()[className]) {
if (!_NODES_REGISTRY[className]) {
Util.warn('Can not find a node with class name "' +
className +
'". Fallback to "Shape".');
className = 'Shape';
}
var Class = getGlobalKonva()[className];
var Class = _NODES_REGISTRY[className];
no = new Class(obj.attrs);
if (children) {
len = children.length;
@ -5531,7 +5545,10 @@
return _this;
}
Stage.prototype._validateAdd = function (child) {
if (child.getType() !== 'Layer') {
var isLayer = child.getType() === 'Layer';
var isFastLayer = child.getType() === 'FastLayer';
var valid = isLayer || isFastLayer;
if (!valid) {
Util.throw('You may only add layers to the stage.');
}
};
@ -5806,7 +5823,7 @@
}
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition());
getGlobalKonva().listenClickTap = true;
_getGlobalKonva().listenClickTap = true;
if (shape && shape.isListening()) {
this.clickStartShape = shape;
shape._fireAndBubble(MOUSEDOWN, { evt: evt });
@ -5833,28 +5850,28 @@
return this._touchend(evt);
}
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition()), clickStartShape = this.clickStartShape, clickEndShape = this.clickEndShape, fireDblClick = false, dd = getGlobalKonva().DD;
if (getGlobalKonva().inDblClickWindow) {
var shape = this.getIntersection(this.getPointerPosition()), clickStartShape = this.clickStartShape, clickEndShape = this.clickEndShape, fireDblClick = false, dd = _getGlobalKonva().DD;
if (_getGlobalKonva().inDblClickWindow) {
fireDblClick = true;
clearTimeout(this.dblTimeout);
// Konva.inDblClickWindow = false;
}
else if (!dd || !dd.justDragged) {
// don't set inDblClickWindow after dragging
getGlobalKonva().inDblClickWindow = true;
_getGlobalKonva().inDblClickWindow = true;
clearTimeout(this.dblTimeout);
}
else if (dd) {
dd.justDragged = false;
}
this.dblTimeout = setTimeout(function () {
getGlobalKonva().inDblClickWindow = false;
}, getGlobalKonva().dblClickWindow);
_getGlobalKonva().inDblClickWindow = false;
}, _getGlobalKonva().dblClickWindow);
if (shape && shape.isListening()) {
this.clickEndShape = shape;
shape._fireAndBubble(MOUSEUP, { evt: evt });
// detect if click or double click occurred
if (getGlobalKonva().listenClickTap &&
if (_getGlobalKonva().listenClickTap &&
clickStartShape &&
clickStartShape._id === shape._id) {
shape._fireAndBubble(CLICK, { evt: evt });
@ -5865,7 +5882,7 @@
}
else {
this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this });
if (getGlobalKonva().listenClickTap) {
if (_getGlobalKonva().listenClickTap) {
this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
}
if (fireDblClick) {
@ -5878,13 +5895,13 @@
}
// content events
this._fire(CONTENT_MOUSEUP, { evt: evt });
if (getGlobalKonva().listenClickTap) {
if (_getGlobalKonva().listenClickTap) {
this._fire(CONTENT_CLICK, { evt: evt });
if (fireDblClick) {
this._fire(CONTENT_DBL_CLICK, { evt: evt });
}
}
getGlobalKonva().listenClickTap = false;
_getGlobalKonva().listenClickTap = false;
// always call preventDefault for desktop events because some browsers
// try to drag and drop the canvas element
if (evt.cancelable) {
@ -5909,7 +5926,7 @@
Stage.prototype._touchstart = function (evt) {
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition());
getGlobalKonva().listenClickTap = true;
_getGlobalKonva().listenClickTap = true;
if (shape && shape.isListening()) {
this.tapStartShape = shape;
shape._fireAndBubble(TOUCHSTART, { evt: evt });
@ -5931,22 +5948,22 @@
Stage.prototype._touchend = function (evt) {
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition()), fireDblClick = false;
if (getGlobalKonva().inDblClickWindow) {
if (_getGlobalKonva().inDblClickWindow) {
fireDblClick = true;
clearTimeout(this.dblTimeout);
// getGlobalKonva().inDblClickWindow = false;
// _getGlobalKonva().inDblClickWindow = false;
}
else {
getGlobalKonva().inDblClickWindow = true;
_getGlobalKonva().inDblClickWindow = true;
clearTimeout(this.dblTimeout);
}
this.dblTimeout = setTimeout(function () {
getGlobalKonva().inDblClickWindow = false;
}, getGlobalKonva().dblClickWindow);
_getGlobalKonva().inDblClickWindow = false;
}, _getGlobalKonva().dblClickWindow);
if (shape && shape.isListening()) {
shape._fireAndBubble(TOUCHEND, { evt: evt });
// detect if tap or double tap occurred
if (getGlobalKonva().listenClickTap &&
if (_getGlobalKonva().listenClickTap &&
this.tapStartShape &&
shape._id === this.tapStartShape._id) {
shape._fireAndBubble(TAP, { evt: evt });
@ -5961,7 +5978,7 @@
}
else {
this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this });
if (getGlobalKonva().listenClickTap) {
if (_getGlobalKonva().listenClickTap) {
this._fire(TAP, { evt: evt, target: this, currentTarget: this });
}
if (fireDblClick) {
@ -5974,17 +5991,17 @@
}
// content events
this._fire(CONTENT_TOUCHEND, { evt: evt });
if (getGlobalKonva().listenClickTap) {
if (_getGlobalKonva().listenClickTap) {
this._fire(CONTENT_TAP, { evt: evt });
if (fireDblClick) {
this._fire(CONTENT_DBL_TAP, { evt: evt });
}
}
getGlobalKonva().listenClickTap = false;
_getGlobalKonva().listenClickTap = false;
};
Stage.prototype._touchmove = function (evt) {
this.setPointersPositions(evt);
var dd = getGlobalKonva().DD, shape;
var dd = _getGlobalKonva().DD, shape;
if (!DD.isDragging) {
shape = this.getIntersection(this.getPointerPosition());
if (shape && shape.isListening()) {
@ -6005,7 +6022,7 @@
}
if (dd) {
if (DD.isDragging &&
getGlobalKonva().DD.node.preventDefault() &&
_getGlobalKonva().DD.node.preventDefault() &&
evt.cancelable) {
evt.preventDefault();
}
@ -6132,6 +6149,7 @@
return Stage;
}(Container));
Stage.prototype.nodeType = STAGE$1;
_registerNode(Stage);
/**
* get/set container DOM element
* @method
@ -6413,7 +6431,7 @@
};
return BaseLayer;
}(Container));
BaseLayer.prototype.nodeType = 'Layer';
BaseLayer.prototype.nodeType = 'BaseLayer';
/**
* get/set clearBeforeDraw flag which determines if the layer is cleared or not
* before drawing
@ -7002,6 +7020,7 @@
Shape.prototype._strokeFuncHit = _strokeFuncHit;
Shape.prototype._centroid = false;
Shape.prototype.nodeType = 'Shape';
_registerNode(Shape);
// add getters and setters
Factory.addGetterSetter(Shape, 'stroke', undefined, getStringValidator());
/**
@ -8203,6 +8222,8 @@
};
return Layer;
}(BaseLayer));
Layer.prototype.nodeType = 'Layer';
_registerNode(Layer);
Factory.addGetterSetter(Layer, 'hitGraphEnabled', true, getBooleanValidator());
/**
* get/set hitGraphEnabled flag. Disabling the hit graph will greatly increase
@ -8280,6 +8301,8 @@
};
return FastLayer;
}(BaseLayer));
FastLayer.prototype.nodeType = 'FastLayer';
_registerNode(FastLayer);
Collection.mapMethods(FastLayer);
/**
@ -8332,6 +8355,7 @@
return Group;
}(Container));
Group.prototype.nodeType = 'Group';
_registerNode(Group);
Collection.mapMethods(Group);
var blacklist = {
@ -8492,7 +8516,7 @@
this.node = node;
this._id = idCounter$1++;
var layers = node.getLayer() ||
(node instanceof getGlobalKonva().Stage ? node.getLayers() : null);
(node instanceof _getGlobalKonva().Stage ? node.getLayers() : null);
if (!layers) {
Util.error('Tween constructor have `node` that is not in a layer. Please add node into layer first.');
}
@ -9026,6 +9050,81 @@
}
};
var DD$1 = DD;
var enableTrace = false;
// TODO: move that to stage?
var listenClickTap = false;
var 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;
*/
var 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;
*/
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
* @constructor
@ -9149,6 +9248,7 @@
Arc.prototype._centroid = true;
Arc.prototype.className = 'Arc';
Arc.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
_registerNode(Arc);
// add getters setters
Factory.addGetterSetter(Arc, 'innerRadius', 0, getNumberValidator());
/**
@ -9424,6 +9524,7 @@
}(Shape));
Line.prototype.className = 'Line';
Line.prototype._attrsAffectingSize = ['points', 'bezier', 'tension'];
_registerNode(Line);
// add getters setters
Factory.addGetterSetter(Line, 'closed', false);
/**
@ -9654,6 +9755,7 @@
return Arrow;
}(Line));
Arrow.prototype.className = 'Arrow';
_registerNode(Arrow);
/**
* get/set pointerLength
* @name Konva.Arrow#pointerLength
@ -9818,6 +9920,7 @@
Circle.prototype._centroid = true;
Circle.prototype.className = 'Circle';
Circle.prototype._attrsAffectingSize = ['radius'];
_registerNode(Circle);
/**
* get/set radius
* @name Konva.Arrow#radius
@ -9954,6 +10057,7 @@
Ellipse.prototype.className = 'Ellipse';
Ellipse.prototype._centroid = true;
Ellipse.prototype._attrsAffectingSize = ['radiusX', 'radiusY'];
_registerNode(Ellipse);
// add getters setters
Factory.addComponentsGetterSetter(Ellipse, 'radius', ['x', 'y']);
/**
@ -10180,6 +10284,7 @@
return Image;
}(Shape));
Image.prototype.className = 'Image';
_registerNode(Image);
/**
* get/set image source. It can be image, canvas or video element
* @name Konva.Image#image
@ -10433,6 +10538,7 @@
return Label;
}(Group));
Label.prototype.className = 'Label';
_registerNode(Label);
Collection.mapMethods(Label);
/**
* Tag constructor.  A Tag can be configured
@ -10535,6 +10641,7 @@
return Tag;
}(Shape));
Tag.prototype.className = 'Tag';
_registerNode(Tag);
/**
* get/set pointer direction
* @name Konva.Tag#pointerDirection
@ -11330,6 +11437,7 @@
}(Shape));
Path.prototype.className = 'Path';
Path.prototype._attrsAffectingSize = ['data'];
_registerNode(Path);
/**
* get/set SVG path data string. This method
* also automatically parses the data string
@ -11467,6 +11575,7 @@
return Rect;
}(Shape));
Rect.prototype.className = 'Rect';
_registerNode(Rect);
/**
* get/set corner radius
* @method
@ -11607,6 +11716,7 @@
RegularPolygon.prototype.className = 'RegularPolygon';
RegularPolygon.prototype._centroid = true;
RegularPolygon.prototype._attrsAffectingSize = ['radius'];
_registerNode(RegularPolygon);
/**
* get/set radius
* @method
@ -11757,6 +11867,7 @@
Ring.prototype.className = 'Ring';
Ring.prototype._centroid = true;
Ring.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
_registerNode(Ring);
/**
* get/set innerRadius
* @method
@ -12021,6 +12132,7 @@
return Sprite;
}(Shape));
Sprite.prototype.className = 'Sprite';
_registerNode(Sprite);
// add getters setters
Factory.addGetterSetter(Sprite, 'animation');
/**
@ -12280,6 +12392,7 @@
Star.prototype.className = 'Star';
Star.prototype._centroid = true;
Star.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
_registerNode(Star);
/**
* get/set number of points
* @name Konva.Ring#numPoints
@ -12794,6 +12907,7 @@
'wrap',
'lineHeight'
];
_registerNode(Text);
/**
* get/set width of text area, which includes padding.
* @name Konva.Text#width
@ -13487,6 +13601,7 @@
TextPath.prototype._strokeFuncHit = _strokeFunc$2;
TextPath.prototype.className = 'TextPath';
TextPath.prototype._attrsAffectingSize = ['text', 'fontSize', 'data'];
_registerNode(TextPath);
/**
* get/set SVG path data string. This method
* also automatically parses the data string
@ -14103,7 +14218,7 @@
var dx = padding;
var dy = padding;
this._fitNodeInto({
rotation: getGlobalKonva().angleDeg
rotation: _getGlobalKonva().angleDeg
? newRotation
: Util._degToRad(newRotation),
x: attrs.x +
@ -14372,6 +14487,7 @@
return val || [];
}
Transformer.prototype.className = 'Transformer';
_registerNode(Transformer);
/**
* get/set enabled handlers
* @name Konva.Transformer#enabledAnchors
@ -14784,6 +14900,7 @@
Wedge.prototype.className = 'Wedge';
Wedge.prototype._centroid = true;
Wedge.prototype._attrsAffectingSize = ['radius'];
_registerNode(Wedge);
/**
* get/set radius
* @name Konva.Wedge#radius
@ -16886,80 +17003,6 @@
* @returns {Number}
*/
var DD$1 = DD;
var enableTrace = false;
// TODO: move that to stage?
var listenClickTap = false;
var 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;
*/
var 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;
*/
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;
};
/**
* @namespace Filters
* @memberof Konva
@ -16987,34 +17030,7 @@
};
var Konva = ({
DD: DD$1,
enableTrace: enableTrace,
listenClickTap: listenClickTap,
inDblClickWindow: inDblClickWindow,
pixelRatio: pixelRatio,
dragDistance: dragDistance,
angleDeg: angleDeg,
showWarnings: showWarnings,
dragButtons: dragButtons,
isDragging: isDragging,
isDragReady: isDragReady,
Filters: Filters,
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,
Arc: Arc,
Arrow: Arrow,
Circle: Circle,
@ -17033,6 +17049,33 @@
TextPath: TextPath,
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,
@ -17042,13 +17085,16 @@
glob: glob,
UA: UA,
document: document,
getGlobalKonva: getGlobalKonva
_getGlobalKonva: _getGlobalKonva,
_NODES_REGISTRY: _NODES_REGISTRY,
_injectGlobal: _injectGlobal,
_registerNode: _registerNode
});
// add Konva to global viriable
// umd build will actually do it
// but it may now it case of modules and bundlers
glob.Konva = Konva;
_injectGlobal(Konva);
return Konva;

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
package.json
View File

@ -7,10 +7,10 @@
"konva.js",
"konva.min.js",
"konva.d.ts",
"types"
"types",
"lib"
],
"main": "konva.js",
"module": "konva.esm.js",
"main": "./lib/Full.js",
"typings": "./types/index.d.ts",
"scripts": {
"start": "npm run watch & gulp",
@ -19,7 +19,7 @@
"full-build": "npm run build && npm t",
"test": "mocha-headless-chrome -f ./test/runner.html -a disable-web-security",
"prettier": "prettier --write \"src/**/*.js\" \"test/**/*.js\" --single-quote",
"tsc": "tsc -d --declarationDir ./types --removeComments --noEmit || 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",
"compile": "npm run tsc && npm run rollup",
"watch": "rollup -c -w"

22
rollup.config.js
View File

@ -1,27 +1,5 @@
// import commonjs from 'rollup-plugin-commonjs';
// import resolve from 'rollup-plugin-node-resolve';
// import pkg from './package.json';
// export default [
// // browser-friendly UMD build
// {
// input: './lib/index.js',
// output: {
// name: 'Konva',
// file: pkg.main,
// format: 'umd'
// },
// plugins: [
// resolve(),
// commonjs() // so Rollup can convert `ms` to an ES module
// ]
// }
// ];
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import sourceMaps from 'rollup-plugin-sourcemaps';
import typescript from 'rollup-plugin-typescript2';
const pkg = require('./package.json');

2
src/BaseLayer.ts
View File

@ -270,7 +270,7 @@ export abstract class BaseLayer extends Container {
clearBeforeDraw: GetSet<boolean, this>;
}
BaseLayer.prototype.nodeType = 'Layer';
BaseLayer.prototype.nodeType = 'BaseLayer';
/**
* get/set clearBeforeDraw flag which determines if the layer is cleared or not

4
src/Canvas.ts
View File

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

4
src/Context.ts
View File

@ -1,5 +1,5 @@
import { Util } from './Util';
import { getAngle, getGlobalKonva } from './Global';
import { getAngle, _getGlobalKonva } from './Global';
import { Canvas } from './Canvas';
var COMMA = ',',
@ -97,7 +97,7 @@ export class Context {
this.canvas = canvas;
this._context = canvas._canvas.getContext('2d') as CanvasRenderingContext2D;
if (getGlobalKonva().enableTrace) {
if (_getGlobalKonva().enableTrace) {
this.traceArr = [];
this._enableTrace();
}

8
src/Core.ts Normal file
View File

@ -0,0 +1,8 @@
import * as Konva from './_CoreInternals';
// add Konva to global viriable
// umd build will actually do it
// but it may now it case of modules and bundlers
Konva._injectGlobal(Konva);
export default Konva;

6
src/DragAndDrop.ts
View File

@ -1,5 +1,5 @@
import { Animation } from './Animation';
import { isBrowser, getGlobalKonva } from './Global';
import { isBrowser, _getGlobalKonva } from './Global';
// TODO: make better module,
@ -89,7 +89,7 @@ export const DD = {
if (DD.isDragging) {
DD.isDragging = false;
DD.justDragged = true;
getGlobalKonva().listenClickTap = false;
_getGlobalKonva().listenClickTap = false;
if (evt) {
evt.dragEndNode = node;
@ -98,7 +98,7 @@ export const DD = {
DD.node = null;
if (layer || node instanceof getGlobalKonva().Stage) {
if (layer || node instanceof _getGlobalKonva().Stage) {
(layer || node).draw();
}
}

4
src/FastLayer.ts
View File

@ -1,6 +1,7 @@
import { Util, Collection } from './Util';
import { Container } from './Container';
import { BaseLayer } from './BaseLayer';
import { _registerNode } from './Global';
/**
* FastLayer constructor. Layers are tied to their own canvas element and are used
@ -53,4 +54,7 @@ export class FastLayer extends BaseLayer {
}
}
FastLayer.prototype.nodeType = 'FastLayer';
_registerNode(FastLayer);
Collection.mapMethods(FastLayer);

67
src/Full.ts Normal file
View File

@ -0,0 +1,67 @@
export * from './_CoreInternals';
// shapes
export { Arc } from './shapes/Arc';
export { Arrow } from './shapes/Arrow';
export { Circle } from './shapes/Circle';
export { Ellipse } from './shapes/Ellipse';
export { Image } from './shapes/Image';
export { Label, Tag } from './shapes/Label';
export { Line } from './shapes/Line';
export { Path } from './shapes/Path';
export { Rect } from './shapes/Rect';
export { RegularPolygon } from './shapes/RegularPolygon';
export { Ring } from './shapes/Ring';
export { Sprite } from './shapes/Sprite';
export { Star } from './shapes/Star';
export { Text } from './shapes/Text';
export { TextPath } from './shapes/TextPath';
export { Transformer } from './shapes/Transformer';
export { Wedge } from './shapes/Wedge';
// filters
import { Blur } from './filters/Blur';
import { Brighten } from './filters/Brighten';
import { Contrast } from './filters/Contrast';
import { Emboss } from './filters/Emboss';
import { Enhance } from './filters/Enhance';
import { Grayscale } from './filters/Grayscale';
import { HSL } from './filters/HSL';
import { HSV } from './filters/HSV';
import { Invert } from './filters/Invert';
import { Kaleidoscope } from './filters/Kaleidoscope';
import { Mask } from './filters/Mask';
import { Noise } from './filters/Noise';
import { Pixelate } from './filters/Pixelate';
import { Posterize } from './filters/Posterize';
import { RGB } from './filters/RGB';
import { RGBA } from './filters/RGBA';
import { Sepia } from './filters/Sepia';
import { Solarize } from './filters/Solarize';
import { Threshold } from './filters/Threshold';
/**
* @namespace Filters
* @memberof Konva
*/
export const Filters = {
Blur,
Brighten,
Contrast,
Emboss,
Enhance,
Grayscale,
HSL,
HSV,
Invert,
Kaleidoscope,
Mask,
Noise,
Pixelate,
Posterize,
RGB,
RGBA,
Sepia,
Solarize,
Threshold
};

21
src/Global.ts
View File

@ -31,7 +31,7 @@ export const isUnminified = /comment/.test(
export const dblClickWindow = 400;
export const getAngle = function(angle) {
return getGlobalKonva().angleDeg ? angle * PI_OVER_180 : angle;
return _getGlobalKonva().angleDeg ? angle * PI_OVER_180 : angle;
};
const _detectIE = function(ua) {
@ -101,6 +101,23 @@ export const UA = _parseUA((glob.navigator && glob.navigator.userAgent) || '');
export const document = glob.document;
export const getGlobalKonva = () => {
// get global Konva instance
export const _getGlobalKonva = () => {
return glob.Konva;
};
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(glob.Konva, _NODES_REGISTRY);
};
export const _registerNode = NodeClass => {
_NODES_REGISTRY[NodeClass.prototype.getClassName()] = NodeClass;
globalKonva[NodeClass.prototype.getClassName()] = NodeClass;
};

2
src/Group.ts
View File

@ -1,5 +1,6 @@
import { Util, Collection } from './Util';
import { Container } from './Container';
import { _registerNode } from './Global';
/**
* Group constructor. Groups are used to contain shapes or other groups.
@ -22,5 +23,6 @@ export class Group extends Container {
}
Group.prototype.nodeType = 'Group';
_registerNode(Group);
Collection.mapMethods(Group);

4
src/Layer.ts
View File

@ -5,6 +5,7 @@ import { BaseLayer } from './BaseLayer';
import { HitCanvas } from './Canvas';
import { shapes } from './Shape';
import { getBooleanValidator } from './Validators';
import { _registerNode } from './Global';
import { GetSet } from './types';
@ -234,6 +235,9 @@ export class Layer extends BaseLayer {
hitGraphEnabled: GetSet<boolean, this>;
}
Layer.prototype.nodeType = 'Layer';
_registerNode(Layer);
Factory.addGetterSetter(Layer, 'hitGraphEnabled', true, getBooleanValidator());
/**
* get/set hitGraphEnabled flag. Disabling the hit graph will greatly increase

14
src/Node.ts
View File

@ -1,7 +1,7 @@
import { Util, Collection, Transform, RectConf, Point } from './Util';
import { Factory } from './Factory';
import { SceneCanvas, HitCanvas } from './Canvas';
import { getGlobalKonva } from './Global';
import { _getGlobalKonva, _NODES_REGISTRY } from './Global';
import { Container } from './Container';
import { GetSet, Vector2d } from './types';
import { DD } from './DragAndDrop';
@ -612,7 +612,7 @@ export abstract class Node {
* // with event delegations
* layer.on('click', 'Group', function(evt) {
* var shape = evt.target;
* var group = evtn.currentTarger;
* var group = evt.currentTarget;
* });
*/
on(evtStr, handler) {
@ -1632,7 +1632,7 @@ export abstract class Node {
var m = new Transform(),
x = this.x(),
y = this.y(),
rotation = getGlobalKonva().getAngle(this.rotation()),
rotation = _getGlobalKonva().getAngle(this.rotation()),
scaleX = this.scaleX(),
scaleY = this.scaleY(),
skewX = this.skewX(),
@ -1868,7 +1868,7 @@ export abstract class Node {
} else if (this.parent) {
return this.parent.getDragDistance();
} else {
return getGlobalKonva().dragDistance;
return _getGlobalKonva().dragDistance;
}
}
_get(selector) {
@ -2207,7 +2207,7 @@ export abstract class Node {
this._dragCleanup();
this.on('mousedown.konva touchstart.konva', function(evt) {
var canDrag = getGlobalKonva().dragButtons.indexOf(evt.evt.button) >= 0;
var canDrag = _getGlobalKonva().dragButtons.indexOf(evt.evt.button) >= 0;
if (!canDrag) {
return;
}
@ -2335,7 +2335,7 @@ export abstract class Node {
obj.attrs.container = container;
}
if (!getGlobalKonva()[className]) {
if (!_NODES_REGISTRY[className]) {
Util.warn(
'Can not find a node with class name "' +
className +
@ -2344,7 +2344,7 @@ export abstract class Node {
className = 'Shape';
}
const Class = getGlobalKonva()[className];
const Class = _NODES_REGISTRY[className];
no = new Class(obj.attrs);
if (children) {

2
src/Shape.ts
View File

@ -9,6 +9,7 @@ import {
import { GetSet, Vector2d } from './types';
import { Context } from './Context';
import { _registerNode } from './Global';
var HAS_SHADOW = 'hasShadow';
var SHADOW_RGBA = 'shadowRGBA';
@ -703,6 +704,7 @@ Shape.prototype._strokeFuncHit = _strokeFuncHit;
Shape.prototype._centroid = false;
Shape.prototype.nodeType = 'Shape';
_registerNode(Shape);
// add getters and setters
Factory.addGetterSetter(Shape, 'stroke', undefined, getStringValidator());

53
src/Stage.ts
View File

@ -1,12 +1,13 @@
import { Util, Collection } from './Util';
import { Factory } from './Factory';
import { Container } from './Container';
import { document, isBrowser, getGlobalKonva, UA } from './Global';
import { document, isBrowser, _getGlobalKonva, UA } from './Global';
import { SceneCanvas, HitCanvas } from './Canvas';
import { GetSet, Vector2d } from './types';
import { Shape } from './Shape';
import { BaseLayer } from './BaseLayer';
import { DD } from './DragAndDrop';
import { _registerNode } from './Global';
// CONSTANTS
var STAGE = 'Stage',
@ -134,7 +135,10 @@ export class Stage extends Container {
}
_validateAdd(child) {
if (child.getType() !== 'Layer') {
const isLayer = child.getType() === 'Layer';
const isFastLayer = child.getType() === 'FastLayer';
const valid = isLayer || isFastLayer;
if (!valid) {
Util.throw('You may only add layers to the stage.');
}
}
@ -452,7 +456,7 @@ export class Stage extends Container {
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition());
getGlobalKonva().listenClickTap = true;
_getGlobalKonva().listenClickTap = true;
if (shape && shape.isListening()) {
this.clickStartShape = shape;
@ -485,23 +489,23 @@ export class Stage extends Container {
clickStartShape = this.clickStartShape,
clickEndShape = this.clickEndShape,
fireDblClick = false,
dd = getGlobalKonva().DD;
dd = _getGlobalKonva().DD;
if (getGlobalKonva().inDblClickWindow) {
if (_getGlobalKonva().inDblClickWindow) {
fireDblClick = true;
clearTimeout(this.dblTimeout);
// Konva.inDblClickWindow = false;
} else if (!dd || !dd.justDragged) {
// don't set inDblClickWindow after dragging
getGlobalKonva().inDblClickWindow = true;
_getGlobalKonva().inDblClickWindow = true;
clearTimeout(this.dblTimeout);
} else if (dd) {
dd.justDragged = false;
}
this.dblTimeout = setTimeout(function() {
getGlobalKonva().inDblClickWindow = false;
}, getGlobalKonva().dblClickWindow);
_getGlobalKonva().inDblClickWindow = false;
}, _getGlobalKonva().dblClickWindow);
if (shape && shape.isListening()) {
this.clickEndShape = shape;
@ -509,7 +513,7 @@ export class Stage extends Container {
// detect if click or double click occurred
if (
getGlobalKonva().listenClickTap &&
_getGlobalKonva().listenClickTap &&
clickStartShape &&
clickStartShape._id === shape._id
) {
@ -521,7 +525,7 @@ export class Stage extends Container {
}
} else {
this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this });
if (getGlobalKonva().listenClickTap) {
if (_getGlobalKonva().listenClickTap) {
this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
}
@ -535,14 +539,14 @@ export class Stage extends Container {
}
// content events
this._fire(CONTENT_MOUSEUP, { evt: evt });
if (getGlobalKonva().listenClickTap) {
if (_getGlobalKonva().listenClickTap) {
this._fire(CONTENT_CLICK, { evt: evt });
if (fireDblClick) {
this._fire(CONTENT_DBL_CLICK, { evt: evt });
}
}
getGlobalKonva().listenClickTap = false;
_getGlobalKonva().listenClickTap = false;
// always call preventDefault for desktop events because some browsers
// try to drag and drop the canvas element
@ -569,7 +573,7 @@ export class Stage extends Container {
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition());
getGlobalKonva().listenClickTap = true;
_getGlobalKonva().listenClickTap = true;
if (shape && shape.isListening()) {
this.tapStartShape = shape;
@ -594,25 +598,25 @@ export class Stage extends Container {
var shape = this.getIntersection(this.getPointerPosition()),
fireDblClick = false;
if (getGlobalKonva().inDblClickWindow) {
if (_getGlobalKonva().inDblClickWindow) {
fireDblClick = true;
clearTimeout(this.dblTimeout);
// getGlobalKonva().inDblClickWindow = false;
// _getGlobalKonva().inDblClickWindow = false;
} else {
getGlobalKonva().inDblClickWindow = true;
_getGlobalKonva().inDblClickWindow = true;
clearTimeout(this.dblTimeout);
}
this.dblTimeout = setTimeout(function() {
getGlobalKonva().inDblClickWindow = false;
}, getGlobalKonva().dblClickWindow);
_getGlobalKonva().inDblClickWindow = false;
}, _getGlobalKonva().dblClickWindow);
if (shape && shape.isListening()) {
shape._fireAndBubble(TOUCHEND, { evt: evt });
// detect if tap or double tap occurred
if (
getGlobalKonva().listenClickTap &&
_getGlobalKonva().listenClickTap &&
this.tapStartShape &&
shape._id === this.tapStartShape._id
) {
@ -628,7 +632,7 @@ export class Stage extends Container {
}
} else {
this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this });
if (getGlobalKonva().listenClickTap) {
if (_getGlobalKonva().listenClickTap) {
this._fire(TAP, { evt: evt, target: this, currentTarget: this });
}
if (fireDblClick) {
@ -641,18 +645,18 @@ export class Stage extends Container {
}
// content events
this._fire(CONTENT_TOUCHEND, { evt: evt });
if (getGlobalKonva().listenClickTap) {
if (_getGlobalKonva().listenClickTap) {
this._fire(CONTENT_TAP, { evt: evt });
if (fireDblClick) {
this._fire(CONTENT_DBL_TAP, { evt: evt });
}
}
getGlobalKonva().listenClickTap = false;
_getGlobalKonva().listenClickTap = false;
}
_touchmove(evt) {
this.setPointersPositions(evt);
var dd = getGlobalKonva().DD,
var dd = _getGlobalKonva().DD,
shape;
if (!DD.isDragging) {
shape = this.getIntersection(this.getPointerPosition());
@ -674,7 +678,7 @@ export class Stage extends Container {
if (dd) {
if (
DD.isDragging &&
getGlobalKonva().DD.node.preventDefault() &&
_getGlobalKonva().DD.node.preventDefault() &&
evt.cancelable
) {
evt.preventDefault();
@ -819,6 +823,7 @@ export class Stage extends Container {
}
Stage.prototype.nodeType = STAGE;
_registerNode(Stage);
/**
* get/set container DOM element

4
src/Tween.ts
View File

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

6
src/Util.ts
View File

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

99
src/_CoreInternals.ts Normal file
View File

@ -0,0 +1,99 @@
export * from './Global';
export { Collection, Util } from './Util';
export { Node, ids, names } from './Node';
export { Container } from './Container';
export { Stage, stages } from './Stage';
export { Layer } from './Layer';
export { FastLayer } from './FastLayer';
export { Group } from './Group';
import { DD as dd } from './DragAndDrop';
export const DD = dd;
export { Shape, shapes } from './Shape';
export { Animation } from './Animation';
export { Tween, Easings } from './Tween';
export const enableTrace = false;
// TODO: move that to stage?
export const listenClickTap = false;
export const 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;
*/
export const 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;
*/
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;
};

4
src/index.ts
View File

@ -1,8 +1,8 @@
import * as Konva from './internals';
import * as Konva from './Full';
// add Konva to global viriable
// umd build will actually do it
// but it may now it case of modules and bundlers
Konva.glob.Konva = Konva;
Konva._injectGlobal(Konva);
export default Konva;

2
src/shapes/Arc.ts
View File

@ -4,6 +4,7 @@ import { Shape } from '../Shape';
import { getAngle } from '../Global';
import { GetSet } from '../types';
import { getNumberValidator, getBooleanValidator } from '../Validators';
import { _registerNode } from '../Global';
/**
* Arc constructor
@ -62,6 +63,7 @@ export class Arc extends Shape {
Arc.prototype._centroid = true;
Arc.prototype.className = 'Arc';
Arc.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
_registerNode(Arc);
// add getters setters
Factory.addGetterSetter(Arc, 'innerRadius', 0, getNumberValidator());

2
src/shapes/Arrow.ts
View File

@ -3,6 +3,7 @@ import { Factory } from '../Factory';
import { Line } from './Line';
import { GetSet } from '../types';
import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global';
/**
* Arrow constructor
@ -108,6 +109,7 @@ export class Arrow extends Line {
}
Arrow.prototype.className = 'Arrow';
_registerNode(Arrow);
/**
* get/set pointerLength

2
src/shapes/Circle.ts
View File

@ -3,6 +3,7 @@ import { Factory } from '../Factory';
import { Shape } from '../Shape';
import { GetSet } from '../types';
import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global';
/**
* Circle constructor
@ -52,6 +53,7 @@ export class Circle extends Shape {
Circle.prototype._centroid = true;
Circle.prototype.className = 'Circle';
Circle.prototype._attrsAffectingSize = ['radius'];
_registerNode(Circle);
/**
* get/set radius

2
src/shapes/Ellipse.ts
View File

@ -2,6 +2,7 @@ import { Collection } from '../Util';
import { Factory } from '../Factory';
import { Shape } from '../Shape';
import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global';
import { GetSet, Vector2d } from '../types';
@ -58,6 +59,7 @@ export class Ellipse extends Shape {
Ellipse.prototype.className = 'Ellipse';
Ellipse.prototype._centroid = true;
Ellipse.prototype._attrsAffectingSize = ['radiusX', 'radiusY'];
_registerNode(Ellipse);
// add getters setters
Factory.addComponentsGetterSetter(Ellipse, 'radius', ['x', 'y']);

3
src/shapes/Image.ts
View File

@ -2,6 +2,7 @@ import { Util, Collection } from '../Util';
import { Factory } from '../Factory';
import { Shape } from '../Shape';
import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global';
import { GetSet, IRect } from '../types';
@ -130,7 +131,7 @@ export class Image extends Shape {
}
Image.prototype.className = 'Image';
_registerNode(Image);
/**
* get/set image source. It can be image, canvas or video element
* @name Konva.Image#image

3
src/shapes/Label.ts
View File

@ -3,6 +3,7 @@ import { Factory } from '../Factory';
import { Shape } from '../Shape';
import { Group } from '../Group';
import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global';
import { GetSet } from '../types';
@ -165,6 +166,7 @@ export class Label extends Group {
}
Label.prototype.className = 'Label';
_registerNode(Label);
Collection.mapMethods(Label);
@ -313,6 +315,7 @@ export class Tag extends Shape {
}
Tag.prototype.className = 'Tag';
_registerNode(Tag);
/**
* get/set pointer direction

2
src/shapes/Line.ts
View File

@ -2,6 +2,7 @@ import { Util, Collection } from '../Util';
import { Factory } from '../Factory';
import { Shape } from '../Shape';
import { getNumberValidator, getNumberArrayValidator } from '../Validators';
import { _registerNode } from '../Global';
import { GetSet } from '../types';
@ -209,6 +210,7 @@ export class Line extends Shape {
Line.prototype.className = 'Line';
Line.prototype._attrsAffectingSize = ['points', 'bezier', 'tension'];
_registerNode(Line);
// add getters setters
Factory.addGetterSetter(Line, 'closed', false);

2
src/shapes/Path.ts
View File

@ -1,6 +1,7 @@
import { Util, Collection } from '../Util';
import { Factory } from '../Factory';
import { Shape } from '../Shape';
import { _registerNode } from '../Global';
import { GetSet } from '../types';
@ -870,6 +871,7 @@ export class Path extends Shape {
Path.prototype.className = 'Path';
Path.prototype._attrsAffectingSize = ['data'];
_registerNode(Path);
/**
* get/set SVG path data string. This method

2
src/shapes/Rect.ts
View File

@ -2,6 +2,7 @@ import { Collection } from '../Util';
import { Factory } from '../Factory';
import { Shape } from '../Shape';
import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global';
import { GetSet } from '../types';
@ -83,6 +84,7 @@ export class Rect extends Shape {
}
Rect.prototype.className = 'Rect';
_registerNode(Rect);
/**
* get/set corner radius

2
src/shapes/RegularPolygon.ts
View File

@ -3,6 +3,7 @@ import { Factory } from '../Factory';
import { Shape } from '../Shape';
import { GetSet } from '../types';
import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global';
/**
* RegularPolygon constructor. Examples include triangles, squares, pentagons, hexagons, etc.
@ -64,6 +65,7 @@ export class RegularPolygon extends Shape {
RegularPolygon.prototype.className = 'RegularPolygon';
RegularPolygon.prototype._centroid = true;
RegularPolygon.prototype._attrsAffectingSize = ['radius'];
_registerNode(RegularPolygon)
/**
* get/set radius

2
src/shapes/Ring.ts
View File

@ -3,6 +3,7 @@ import { Factory } from '../Factory';
import { Shape } from '../Shape';
import { GetSet } from '../types';
import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global';
var PIx2 = Math.PI * 2;
/**
@ -54,6 +55,7 @@ export class Ring extends Shape {
Ring.prototype.className = 'Ring';
Ring.prototype._centroid = true;
Ring.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
_registerNode(Ring);
/**
* get/set innerRadius

3
src/shapes/Sprite.ts
View File

@ -3,6 +3,7 @@ import { Factory } from '../Factory';
import { Shape } from '../Shape';
import { Animation } from '../Animation';
import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global';
import { GetSet } from '../types';
@ -213,6 +214,8 @@ export class Sprite extends Shape {
}
Sprite.prototype.className = 'Sprite';
_registerNode(Sprite);
// add getters setters
Factory.addGetterSetter(Sprite, 'animation');

2
src/shapes/Star.ts
View File

@ -2,6 +2,7 @@ import { Collection } from '../Util';
import { Factory } from '../Factory';
import { Shape } from '../Shape';
import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global';
import { GetSet } from '../types';
@ -68,6 +69,7 @@ export class Star extends Shape {
Star.prototype.className = 'Star';
Star.prototype._centroid = true;
Star.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
_registerNode(Star);
/**
* get/set number of points

2
src/shapes/Text.ts
View File

@ -7,6 +7,7 @@ import {
getStringValidator,
getNumberOrAutoValidator
} from '../Validators';
import { _registerNode } from '../Global';
import { GetSet } from '../types';
@ -530,6 +531,7 @@ Text.prototype._attrsAffectingSize = [
'wrap',
'lineHeight'
];
_registerNode(Text);
/**
* get/set width of text area, which includes padding.

2
src/shapes/TextPath.ts
View File

@ -4,6 +4,7 @@ import { Shape } from '../Shape';
import { Path } from './Path';
import { Text } from './Text';
import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global';
import { GetSet, Vector2d } from '../types';
@ -538,6 +539,7 @@ TextPath.prototype._fillFuncHit = _fillFunc;
TextPath.prototype._strokeFuncHit = _strokeFunc;
TextPath.prototype.className = 'TextPath';
TextPath.prototype._attrsAffectingSize = ['text', 'fontSize', 'data'];
_registerNode(TextPath);
/**
* get/set SVG path data string. This method

6
src/shapes/Transformer.ts
View File

@ -4,8 +4,9 @@ import { Node } from '../Node';
import { Shape } from '../Shape';
import { Rect } from './Rect';
import { Group } from '../Group';
import { getAngle, getGlobalKonva } from '../Global';
import { getAngle, _getGlobalKonva } from '../Global';
import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global';
import { GetSet, IRect } from '../types';
@ -520,7 +521,7 @@ export class Transformer extends Group {
this._fitNodeInto(
{
rotation: getGlobalKonva().angleDeg
rotation: _getGlobalKonva().angleDeg
? newRotation
: Util._degToRad(newRotation),
x:
@ -847,6 +848,7 @@ function validateAnchors(val) {
}
Transformer.prototype.className = 'Transformer';
_registerNode(Transformer);
/**
* get/set enabled handlers

2
src/shapes/Wedge.ts
View File

@ -3,6 +3,7 @@ import { Factory } from '../Factory';
import { Shape } from '../Shape';
import { getAngle } from '../Global';
import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global';
import { GetSet } from '../types';
@ -64,6 +65,7 @@ export class Wedge extends Shape {
Wedge.prototype.className = 'Wedge';
Wedge.prototype._centroid = true;
Wedge.prototype._attrsAffectingSize = ['radius'];
_registerNode(Wedge);
/**
* get/set radius

20
test/import-test.js Normal file
View File

@ -0,0 +1,20 @@
function equal(val1, val2, message) {
if (val1 !== val2) {
throw new Error('Not passed: ' + message);
}
}
// try to import only core
let Konva = require('../lib/Core');
// no external shapes
equal(Konva.Rect, undefined, 'no external shapes');
let Rect = require('../lib/shapes/Rect').Rect;
equal(Rect !== undefined, true, 'Rect is defined');
// now import from package.json
let NewKonva = require('../');
equal(NewKonva.Rect, Rect, 'Same rects');

64
tsconfig.json
View File

@ -2,72 +2,10 @@
"compilerOptions": {
"outDir": "lib",
"module": "ES2015",
// "allowJs": true,
"target": "es5",
"noEmitOnError": true,
"lib": ["es2015", "dom"]
// "strict": true
},
"include": [
"src/index.ts"
// core
// "ts/Global.ts",
// "ts/Util.ts",
// "ts/Canvas.ts",
// "ts/Context.ts",
// "ts/Factory.ts",
// "ts/Node.ts",
// // filters
// "ts/filters/Grayscale.ts",
// "ts/filters/Brighten.ts",
// "ts/filters/Invert.ts",
// "ts/filters/Blur.ts",
// "ts/filters/Mask.ts",
// "ts/filters/RGB.ts",
// "ts/filters/RGBA.ts",
// "ts/filters/HSV.ts",
// "ts/filters/HSL.ts",
// "ts/filters/Emboss.ts",
// "ts/filters/Enhance.ts",
// "ts/filters/Posterize.ts",
// "ts/filters/Noise.ts",
// "ts/filters/Pixelate.ts",
// "ts/filters/Threshold.ts",
// "ts/filters/Sepia.ts",
// "ts/filters/Solarize.ts",
// "ts/filters/Kaleidoscope.ts",
// "ts/filters/Contrast.ts",
// // core
// "ts/Container.ts",
// "ts/Shape.ts",
// "ts/Stage.ts",
// "ts/BaseLayer.ts",
// "ts/Layer.ts",
// "ts/FastLayer.ts",
// "ts/Group.ts",
// "ts/Animation.ts",
// "ts/Tween.ts",
// "ts/DragAndDrop.ts",
// // shapes
// "ts/shapes/Rect.ts",
// "ts/shapes/Circle.ts",
// "ts/shapes/Ellipse.ts",
// "ts/shapes/Ring.ts",
// "ts/shapes/Wedge.ts",
// "ts/shapes/Arc.ts",
// "ts/shapes/Image.ts",
// "ts/shapes/Text.ts",
// "ts/shapes/Line.ts",
// "ts/shapes/Sprite.ts",
// "ts/shapes/Path.ts",
// "ts/shapes/TextPath.ts",
// "ts/shapes/RegularPolygon.ts",
// "ts/shapes/Star.ts",
// "ts/shapes/Label.ts",
// "ts/shapes/Arrow.ts",
// "ts/shapes/Transformer.ts"
]
"include": ["src/index.ts", "src/Core.ts"]
}