refactoring

CHANGELOG.md

@@ -7,25 +7,24 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Breaking
 
-It is not possible to make custom build of `Konva` from npm installation, like `import Konva from 'konva/src/Core';`
+Customs builds are removed from npm package. You can not use `import Konva from 'konva/src/Core';`.
-The issue will be resolved later.
+This feature will be added back later.
 
 ### Possibly breaking
 
 That changes are private and internal specific. They should not break most of `Konva` apps.
 
-* `Konva.Util.addMethods`
+* `Konva.Util.addMethods` is removed
-* `Konva.Util._removeLastLetter`
+* `Konva.Util._removeLastLetter`  is removed
-* `Konva.Util._getImage`
+* `Konva.Util._getImage`  is removed
-* `Konv.Util._getRGBAString`
+* `Konv.Util._getRGBAString`  is removed
-* `Konv.Util._merge`
+* `Konv.Util._merge`  is removed
 * Removed polyfill for `requestAnimationFrame`.
 * `id` and `name` properties defaults are empty strings, not `undefined`
 * internal `_cache` property was updated to use es2015 `Map` instead of `{}`.
 
 
 
-
 ### Added
 * Show a warning when a stage has too many layers
 * Show a warning on duplicate ids
@@ -627,8 +626,8 @@ That changes are private and internal specific. They should not break most of `K
 ### Added
 
 * new methods for working with node's name: `addName`, `removeName`, `hasName`.
-* new `perfectDrawEnabled` property for shape. See [http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html](http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html)
+* new `perfectDrawEnabled` property for shape. See [http://konvajs.org/docs/performance/Disable_Perfect_Draw.html](http://konvajs.org/docs/performance/Disable_Perfect_Draw.html)
-* new `shadowForStrokeEnabled` property for shape. See [http://konvajs.github.io/docs/performance/All_Performance_Tips.html](http://konvajs.github.io/docs/performance/All_Performance_Tips.html)
+* new `shadowForStrokeEnabled` property for shape. See [http://konvajs.org/docs/performance/All_Performance_Tips.html](http://konvajs.org/docs/performance/All_Performance_Tips.html)
 * new `getClientRect` method.
 * new `to` method for every node for shorter tweening
 

README.md

@@ -16,8 +16,8 @@ You can draw things onto the stage, add event listeners to them, move them, scal
 
 This repository began as a GitHub fork of [ericdrowell/KineticJS](https://github.com/ericdrowell/KineticJS).
 
-* **Visit:** The [Home Page](http://konvajs.github.io/) and follow on [Twitter](https://twitter.com/lavrton)
+* **Visit:** The [Home Page](http://konvajs.org/) and follow on [Twitter](https://twitter.com/lavrton)
-* **Discover:** [Tutorials](http://konvajs.github.io/docs), [API Documentation](http://konvajs.github.io/api)
+* **Discover:** [Tutorials](http://konvajs.org/docs), [API Documentation](http://konvajs.org/api)
 * **Help:** [StackOverflow](http://stackoverflow.com/questions/tagged/konvajs), [Chat](https://gitter.im/konvajs/konva)
 
 # Quick Look

bower.json

@@ -3,7 +3,7 @@
   "authors": [
     "Anton Lavrenov", "Eric Rowell"
   ],
-  "homepage": "http://konvajs.github.io",
+  "homepage": "http://konvajs.org",
   "description": "Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.",
   "keywords": [
     "canvas",

konva-node/package.json

@@ -18,7 +18,7 @@
   "bugs": {
     "url": "https://github.com/konvajs/konva/issues"
   },
-  "homepage": "http://konvajs.github.io/",
+  "homepage": "http://konvajs.org/",
   "repository": {
     "type": "git",
     "url": "git://github.com/konvajs/konva.git"

package.json

@@ -57,7 +57,7 @@
   "bugs": {
     "url": "https://github.com/konvajs/konva/issues"
   },
-  "homepage": "http://konvajs.github.io/",
+  "homepage": "http://konvajs.org/",
   "readmeFilename": "README.md",
   "repository": {
     "type": "git",

src/Container.ts

@@ -1,7 +1,7 @@
 import { Util, Collection } from './Util';
 import { Factory, Validators } from './Factory';
-import { Node, ids } from './Node';
+import { Node, ids, names } from './Node';
-import { getGlobalKonva, names } from './Global';
+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;
+  _partialText: string;
-  _textX = 0;
+  _partialTextX = 0;
-  _textY = 0;
+  _partialTextY = 0;
 
   textWidth: number;
   textHeight: number;
@@ -240,17 +240,17 @@ export class Text extends Shape {
             //   0
             // );
           }
-          this._textX = lineTranslateX;
+          this._partialTextX = lineTranslateX;
-          this._textY = translateY + lineTranslateY;
+          this._partialTextY = translateY + lineTranslateY;
-          this.partialText = letter;
+          this._partialText = letter;
           context.fillStrokeShape(this);
           lineTranslateX +=
             Math.round(this.measureSize(letter).width) + letterSpacing;
         }
       } else {
-        this._textX = lineTranslateX;
+        this._partialTextX = lineTranslateX;
-        this._textY = translateY + lineTranslateY;
+        this._partialTextY = translateY + lineTranslateY;
-        this.partialText = text;
+        this._partialText = text;
 
         context.fillStrokeShape(this);
       }