lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +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
Download Patch File Download Diff File Expand all files Collapse all files

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, Konva } 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 || Konva.pixelRatio || getDevicePixelRatio();
this.pixelRatio = pixelRatio;

6
src/Context.ts
View File

@@ -1,5 +1,5 @@
import { Util } from './Util';
import { getAngle, _getGlobalKonva } from './Global';
import { Konva } 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 (Konva.enableTrace) {
this.traceArr = [];
this._enableTrace();
}
@@ -483,7 +483,7 @@ export class SceneContext extends Context {
fillPatternY = shape.getFillPatternY(),
fillPatternScaleX = shape.getFillPatternScaleX(),
fillPatternScaleY = shape.getFillPatternScaleY(),
fillPatternRotation = getAngle(shape.getFillPatternRotation()),
fillPatternRotation = Konva.getAngle(shape.getFillPatternRotation()),
fillPatternOffsetX = shape.getFillPatternOffsetX(),
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
// umd build will actually do it
// but it may now it case of modules and bundlers
Konva._injectGlobal(Konva);
exports['default'] = Konva;
Konva.default = Konva;

17
src/DragAndDrop.ts
View File

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

142
src/Global.ts
View File

@@ -13,26 +13,16 @@ var PI_OVER_180 = Math.PI / 180;
/**
* @namespace Konva
*/
export const version = '@@version';
export const isBrowser =
typeof window !== 'undefined' &&
// browser case
({}.toString.call(window) === '[object Window]' ||
// 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;
};
function detectBrowser() {
return (
typeof window !== 'undefined' &&
// browser case
({}.toString.call(window) === '[object Window]' ||
// electron case
{}.toString.call(window) === '[object global]')
);
}
const _detectIE = function(ua) {
var msie = ua.indexOf('msie ');
@@ -96,28 +86,110 @@ export const glob: any =
? self
: {};
// user agent
export const UA = _parseUA((glob.navigator && glob.navigator.userAgent) || '');
export const Konva = {
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 = () => {
return glob.Konva;
/**
* 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() {
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 = {};
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 => {
_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 { SceneCanvas, HitCanvas } from './Canvas';
import { _getGlobalKonva, _NODES_REGISTRY } from './Global';
import { Konva, _NODES_REGISTRY } from './Global';
import { Container } from './Container';
import { GetSet, Vector2d } from './types';
import { DD } from './DragAndDrop';
@@ -755,14 +755,6 @@ export abstract class Node {
return this;
}
_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
// traversal must be cleared when removing a node
this._clearSelfAndDescendantCache(STAGE);
@@ -770,6 +762,13 @@ export abstract class Node {
this._clearSelfAndDescendantCache(VISIBLE);
this._clearSelfAndDescendantCache(LISTENING);
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().
@@ -1632,7 +1631,7 @@ export abstract class Node {
var m = new Transform(),
x = this.x(),
y = this.y(),
rotation = _getGlobalKonva().getAngle(this.rotation()),
rotation = Konva.getAngle(this.rotation()),
scaleX = this.scaleX(),
scaleY = this.scaleY(),
skewX = this.skewX(),
@@ -1868,7 +1867,7 @@ export abstract class Node {
} else if (this.parent) {
return this.parent.getDragDistance();
} else {
return _getGlobalKonva().dragDistance;
return Konva.dragDistance;
}
}
_get(selector) {
@@ -2019,7 +2018,7 @@ export abstract class Node {
}
_setAttr(key, val) {
var oldVal = this.attrs[key];
if ((oldVal === val) && !Util.isObject(val)) {
if (oldVal === val && !Util.isObject(val)) {
return;
}
if (val === undefined || val === null) {
@@ -2048,7 +2047,7 @@ export abstract class Node {
evt.target = this;
}
var shouldStop =
var shouldStop =
(eventType === MOUSEENTER || eventType === MOUSELEAVE) &&
compareShape &&
(this._id === compareShape._id ||
@@ -2195,8 +2194,7 @@ export abstract class Node {
this.on('mousedown.konva touchstart.konva', function(evt) {
var shouldCheckButton = evt.evt.button !== undefined;
var canDrag =
!shouldCheckButton ||
_getGlobalKonva().dragButtons.indexOf(evt.evt.button) >= 0;
!shouldCheckButton || Konva.dragButtons.indexOf(evt.evt.button) >= 0;
if (!canDrag) {
return;
}

79
src/Stage.ts
View File

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

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 { Konva } 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 Konva['Stage'] ? node.getLayers() : null);
if (!layers) {
Util.error(
'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';
export type Point = {
@@ -563,9 +563,9 @@ export const Util = {
}
},
createCanvasElement() {
var canvas = isBrowser
var canvas = Konva.isBrowser
? document.createElement('canvas')
: new (_getGlobalKonva()._nodeCanvas())();
: new (Konva['_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 (!Konva.showWarnings) {
return;
}
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';
function _formatValue(val) {
@@ -34,7 +34,7 @@ export function alphaComponent(val) {
}
export function getNumberValidator() {
if (isUnminified) {
if (Konva.isUnminified) {
return function(val, attr) {
if (!Util._isNumber(val)) {
Util.warn(
@@ -49,7 +49,7 @@ export function getNumberValidator() {
}
}
export function getNumberOrAutoValidator() {
if (isUnminified) {
if (Konva.isUnminified) {
return function(val, attr) {
var isNumber = Util._isNumber(val);
var isAuto = val === 'auto';
@@ -67,7 +67,7 @@ export function getNumberOrAutoValidator() {
}
}
export function getStringValidator() {
if (isUnminified) {
if (Konva.isUnminified) {
return function(val, attr) {
if (!Util._isString(val)) {
Util.warn(
@@ -82,7 +82,7 @@ export function getStringValidator() {
}
}
export function getFunctionValidator() {
if (isUnminified) {
if (Konva.isUnminified) {
return function(val, attr) {
if (!Util._isFunction(val)) {
Util.warn(
@@ -97,7 +97,7 @@ export function getFunctionValidator() {
}
}
export function getNumberArrayValidator() {
if (isUnminified) {
if (Konva.isUnminified) {
return function(val, attr) {
if (!Util._isArray(val)) {
Util.warn(
@@ -124,7 +124,7 @@ export function getNumberArrayValidator() {
}
}
export function getBooleanValidator() {
if (isUnminified) {
if (Konva.isUnminified) {
return function(val, attr) {
var isBool = val === true || val === false;
if (!isBool) {
@@ -140,7 +140,7 @@ export function getBooleanValidator() {
}
}
export function getComponentValidator(components) {
if (isUnminified) {
if (Konva.isUnminified) {
return function(val, attr) {
if (!Util.isObject(val)) {
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';
export { Node, ids, names } from './Node';
export { Container } from './Container';
import { Konva as Global } from './Global';
export { Stage, stages } from './Stage';
import { Collection, Util } from './Util';
import { Node, ids, names } from './Node';
import { Container } from './Container';
export { Layer } from './Layer';
export { FastLayer } from './FastLayer';
import { Stage, stages } from './Stage';
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;
export { Shape, shapes } from './Shape';
import { DD } from './DragAndDrop';
export { Animation } from './Animation';
export { Tween, Easings } from './Tween';
import { Shape, shapes } from './Shape';
export const enableTrace = false;
import { Animation } from './Animation';
import { Tween, Easings } from './Tween';
// 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;
};
export const Konva = Object.assign(Global, {
Collection,
Util,
Node,
ids,
names,
Container,
Stage,
stages,
Layer,
FastLayer,
Group,
DD,
Shape,
shapes,
Animation,
Tween,
Easings
});

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
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';
import { Arc } from './shapes/Arc';
import { Arrow } from './shapes/Arrow';
import { Circle } from './shapes/Circle';
import { Ellipse } from './shapes/Ellipse';
import { Image } from './shapes/Image';
import { Label, Tag } from './shapes/Label';
import { Line } from './shapes/Line';
import { Path } from './shapes/Path';
import { Rect } from './shapes/Rect';
import { RegularPolygon } from './shapes/RegularPolygon';
import { Ring } from './shapes/Ring';
import { Sprite } from './shapes/Sprite';
import { Star } from './shapes/Star';
import { Text } from './shapes/Text';
import { TextPath } from './shapes/TextPath';
import { Transformer } from './shapes/Transformer';
import { Wedge } from './shapes/Wedge';
// filters
import { Blur } from './filters/Blur';
@@ -40,28 +42,48 @@ 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
};
export const Konva = Object.assign(Core, {
Arc,
Arrow,
Circle,
Ellipse,
Image,
Label,
Tag,
Line,
Path,
Rect,
RegularPolygon,
Ring,
Sprite,
Star,
Text,
TextPath,
Transformer,
Wedge,
/**
* @namespace Filters
* @memberof Konva
*/
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;

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
// umd build will actually do it
// but it may now it case of modules and bundlers
Konva._injectGlobal(Konva);
exports['default'] = Konva;
Konva.default = Konva;
module.exports = exports['default'];

4
src/shapes/Arc.ts
View File

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

4
src/shapes/Text.ts
View File

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

18
src/shapes/Transformer.ts
View File

@@ -4,7 +4,7 @@ import { Node } from '../Node';
import { Shape } from '../Shape';
import { Rect } from './Rect';
import { Group } from '../Group';
import { getAngle, _getGlobalKonva } from '../Global';
import { Konva } from '../Global';
import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global';
@@ -254,7 +254,7 @@ export class Transformer extends Group {
skipShadow: true,
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 dy = rect.y * node.scaleY() - node.offsetY() * node.scaleY();
@@ -320,7 +320,7 @@ export class Transformer extends Group {
anchor.on('mouseenter', function() {
var tr = this.getParent();
var rad = getAngle(tr.rotation());
var rad = Konva.getAngle(tr.rotation());
var scale = tr.getNode().getAbsoluteScale();
// 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;
}
var rot = getAngle(this.rotation());
var rot = Konva.getAngle(this.rotation());
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 snaps = this.rotationSnaps();
var offset = 0.1;
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);
@@ -519,9 +519,7 @@ export class Transformer extends Group {
this._fitNodeInto(
{
rotation: _getGlobalKonva().angleDeg
? newRotation
: Util._degToRad(newRotation),
rotation: Konva.angleDeg ? newRotation : Util._degToRad(newRotation),
x:
attrs.x +
(attrs.width / 2 + padding) *
@@ -640,7 +638,7 @@ export class Transformer extends Group {
var scaleX = (newAttrs.width - padding * 2) / pure.width;
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 dy = pure.y * scaleY - padding - node.offsetY() * scaleY;

4
src/shapes/Wedge.ts
View File

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