refactoring

src/Container.ts

@@ -1,7 +1,7 @@
 import { Util, Collection } from './Util';
 import { Factory, Validators } from './Factory';
-import { Node, ids } from './Node';
-import { getGlobalKonva, names } from './Global';
+import { Node, ids, names } from './Node';
+import { getGlobalKonva } from './Global';
 
 import { GetSet, IRect } from './types';
 

src/Context.ts

@@ -64,6 +64,9 @@ var CONTEXT_PROPERTIES = [
   'globalCompositeOperation'
 ];
 
+// TODO: document all context methods
+
+const traceArrMax = 100;
 /**
  * Konva wrapper around native 2d canvas context. It has almost the same API of 2d context with some additional functions.
  * With core Konva shapes you don't need to use this object. But you have to use it if you want to create
@@ -196,7 +199,7 @@ export class Context {
     traceArr.push(str);
     len = traceArr.length;
 
-    if (len >= getGlobalKonva().traceArrMax) {
+    if (len >= traceArrMax) {
       traceArr.shift();
     }
   }

src/DragAndDrop.ts

@@ -1,6 +1,9 @@
 import { Animation } from './Animation';
 import { isBrowser, getGlobalKonva } from './Global';
 
+
+// TODO: make better module,
+// make sure other modules import it without global
 export const DD = {
   startPointerPos: {
     x: 0,

src/Global.ts

@@ -1,6 +1,6 @@
 /*
  * Konva JavaScript Framework v@@version
- * http://konvajs.github.io/
+ * http://konvajs.org/
  * Licensed under the MIT
  * Date: @@date
  *
@@ -15,9 +15,6 @@ var PI_OVER_180 = Math.PI / 180;
  */
 export const version = '@@version';
 
-export const names = {};
-export const shapes = {};
-
 export const isBrowser =
   typeof window !== 'undefined' &&
   // browser case
@@ -65,34 +62,6 @@ export const isDragReady = function() {
   return false;
 };
 
-export const _addName = function(node: any, name) {
-  if (name) {
-    if (!names[name]) {
-      names[name] = [];
-    }
-    names[name].push(node);
-  }
-};
-
-export const _removeName = function(name, _id) {
-  if (!name) {
-    return;
-  }
-  var nodes = names[name];
-  if (!nodes) {
-    return;
-  }
-  for (var n = 0; n < nodes.length; n++) {
-    var no = nodes[n];
-    if (no._id === _id) {
-      nodes.splice(n, 1);
-    }
-  }
-  if (nodes.length === 0) {
-    delete names[name];
-  }
-};
-
 export const getAngle = function(angle) {
   return getGlobalKonva().angleDeg ? angle * PI_OVER_180 : angle;
 };

src/Layer.ts

@@ -3,7 +3,7 @@ import { Container } from './Container';
 import { Factory, Validators } from './Factory';
 import { BaseLayer } from './BaseLayer';
 import { HitCanvas } from './Canvas';
-import { shapes } from './Global';
+import { shapes } from './Shape';
 
 import { GetSet } from './types';
 

src/Node.ts

@@ -1,12 +1,13 @@
 import { Util, Collection, Transform, RectConf, Point } from './Util';
 import { Factory, Validators } from './Factory';
 import { SceneCanvas, HitCanvas } from './Canvas';
-import { _removeName, _addName, getGlobalKonva } from './Global';
+import { getGlobalKonva } from './Global';
 import { Container } from './Container';
 import { GetSet, Vector2d } from './types';
 import { DD } from './DragAndDrop';
 
 export const ids = {};
+export const names = {};
 
 const ID_WARNING = `Duplicate id "{id}".
 Please do not use same id several times, it will break find() method look up.
@@ -35,6 +36,34 @@ export const _removeId = function(id: string, node: any) {
   delete ids[id];
 };
 
+export const _addName = function(node: any, name) {
+  if (name) {
+    if (!names[name]) {
+      names[name] = [];
+    }
+    names[name].push(node);
+  }
+};
+
+export const _removeName = function(name, _id) {
+  if (!name) {
+    return;
+  }
+  var nodes = names[name];
+  if (!nodes) {
+    return;
+  }
+  for (var n = 0; n < nodes.length; n++) {
+    var no = nodes[n];
+    if (no._id === _id) {
+      nodes.splice(n, 1);
+    }
+  }
+  if (nodes.length === 0) {
+    delete names[name];
+  }
+};
+
 export type Filter = (this: Node, imageData: ImageData) => void;
 
 type globalCompositeOperationType =
@@ -215,7 +244,7 @@ export abstract class Node {
    *  cache node to improve drawing performance, apply filters, or create more accurate
    *  hit regions. For all basic shapes size of cache canvas will be automatically detected.
    *  If you need to cache your custom `Konva.Shape` instance you have to pass shape's bounding box
-   *  properties. Look at [https://konvajs.github.io/docs/performance/Shape_Caching.html](https://konvajs.github.io/docs/performance/Shape_Caching.html) for more information.
+   *  properties. Look at [https://konvajs.org/docs/performance/Shape_Caching.html](https://konvajs.org/docs/performance/Shape_Caching.html) for more information.
    * @method
    * @name Konva.Node#cache
    * @param {Object} [config]

src/Shape.ts

@@ -1,6 +1,5 @@
 import { Util, Collection } from './Util';
 import { Factory, Validators } from './Factory';
-import { shapes } from './Global';
 import { Node } from './Node';
 
 import { GetSet, Vector2d } from './types';
@@ -21,6 +20,8 @@ function getDummyContext() {
   return dummyContext;
 }
 
+export const shapes = {};
+
 // TODO: idea - use only "remove" (or destroy method)
 // how? on add, check that every inner shape has reference in konva store with color
 // on remove - clear that reference
@@ -783,7 +784,7 @@ Factory.addGetterSetter(
 
 /**
  * get/set perfectDrawEnabled. If a shape has fill, stroke and opacity you may set `perfectDrawEnabled` to false to improve performance.
- * See http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html for more information.
+ * See http://konvajs.org/docs/performance/Disable_Perfect_Draw.html for more information.
  * Default value is true
  * @name Konva.Shape#perfectDrawEnabled
  * @method

src/internals.ts

@@ -1,7 +1,7 @@
 export * from './Global';
 
 export { Collection, Util } from './Util';
-export { Node, ids } from './Node';
+export { Node, ids, names } from './Node';
 export { Container } from './Container';
 
 export { Stage, stages } from './Stage';
@@ -12,13 +12,14 @@ export { FastLayer } from './FastLayer';
 export { Group } from './Group';
 
 export { DD } from './DragAndDrop';
-export { Shape } from './Shape';
+export { Shape, shapes } from './Shape';
 
 export { Animation } from './Animation';
 export { Tween, Easings } from './Tween';
 
 export const enableTrace = false;
-export const traceArrMax = 100;
+
+// TODO: move that to stage?
 export const listenClickTap = false;
 export const inDblClickWindow = false;
 
@@ -97,8 +98,8 @@ export { Text } from './shapes/Text';
 export { TextPath } from './shapes/TextPath';
 export { Transformer } from './shapes/Transformer';
 export { Wedge } from './shapes/Wedge';
-// filters
 
+// filters
 import { Blur } from './filters/Blur';
 import { Brighten } from './filters/Brighten';
 import { Contrast } from './filters/Contrast';

src/shapes/Text.ts

@@ -55,10 +55,10 @@ function getDummyContext() {
 }
 
 function _fillFunc(context) {
-  context.fillText(this.partialText, this._textX, this._textY);
+  context.fillText(this._partialText, this._partialTextX, this._partialTextY);
 }
 function _strokeFunc(context) {
-  context.strokeText(this.partialText, this._textX, this._textY);
+  context.strokeText(this._partialText, this._partialTextX, this._partialTextY);
 }
 
 function checkDefaultFill(config) {
@@ -107,9 +107,9 @@ function checkDefaultFill(config) {
  */
 export class Text extends Shape {
   textArr: Array<{ text: string; width: number }>;
-  partialText: string;
-  _textX = 0;
-  _textY = 0;
+  _partialText: string;
+  _partialTextX = 0;
+  _partialTextY = 0;
 
   textWidth: number;
   textHeight: number;
@@ -240,17 +240,17 @@ export class Text extends Shape {
             //   0
             // );
           }
-          this._textX = lineTranslateX;
-          this._textY = translateY + lineTranslateY;
-          this.partialText = letter;
+          this._partialTextX = lineTranslateX;
+          this._partialTextY = translateY + lineTranslateY;
+          this._partialText = letter;
           context.fillStrokeShape(this);
           lineTranslateX +=
             Math.round(this.measureSize(letter).width) + letterSpacing;
         }
       } else {
-        this._textX = lineTranslateX;
-        this._textY = translateY + lineTranslateY;
-        this.partialText = text;
+        this._partialTextX = lineTranslateX;
+        this._partialTextY = translateY + lineTranslateY;
+        this._partialText = text;
 
         context.fillStrokeShape(this);
       }