remove Konva.names and Konva.ids. close #1073

CHANGELOG.md

@@ -17,6 +17,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - `textPath.getKerning()` is removed
 - Fix `a` command parsing for `Konva.Path`
 - Fix fill pattern for `Konva.Text` when the pattern has an offset or rotation
+- `Konva.names` and `Konva.ids` are removed
 
 ## 7.2.5
 

src/Node.ts

@@ -15,56 +15,6 @@ import { Context } from './Context';
 import { Shape } from './Shape';
 import { Layer } from './Layer';
 
-export const ids: any = {};
-export const names: any = {};
-
-const _addId = function (node: Node, id: string | undefined) {
-  if (!id) {
-    return;
-  }
-  ids[id] = node;
-};
-
-export const _removeId = function (id: string, node: any) {
-  // node has no id
-  if (!id) {
-    return;
-  }
-  // another node is registered (possible for duplicate ids)
-  if (ids[id] !== node) {
-    return;
-  }
-  delete ids[id];
-};
-
-export const _addName = function (node: any, name: string) {
-  if (name) {
-    if (!names[name]) {
-      names[name] = [];
-    }
-    names[name].push(node);
-  }
-};
-
-export const _removeName = function (name: string, _id: number) {
-  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 =
@@ -893,16 +843,6 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * node.destroy();
    */
   destroy() {
-    // remove from ids and names hashes
-    _removeId(this.id(), this);
-
-    // remove all names
-    var names = (this.name() || '').split(/\s/g);
-    for (var i = 0; i < names.length; i++) {
-      var subname = names[i];
-      _removeName(subname, this._id);
-    }
-
     this.remove();
     return this;
   }
@@ -1475,7 +1415,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * // move node from current layer into layer2
    * node.moveTo(layer2);
    */
-  moveTo(newContainer: Container) {
+  moveTo(newContainer: any) {
     // do nothing if new container is already parent
     if (this.getParent() !== newContainer) {
       this._remove();
@@ -2111,37 +2051,6 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       newVal: newVal,
     });
   }
-  setId(id) {
-    var oldId = this.id();
-
-    _removeId(oldId, this);
-    _addId(this, id);
-    this._setAttr('id', id);
-    return this;
-  }
-  setName(name) {
-    var oldNames = (this.name() || '').split(/\s/g);
-    var newNames = (name || '').split(/\s/g);
-    var subname, i;
-    // remove all subnames
-    for (i = 0; i < oldNames.length; i++) {
-      subname = oldNames[i];
-      if (newNames.indexOf(subname) === -1 && subname) {
-        _removeName(subname, this._id);
-      }
-    }
-
-    // add new names
-    for (i = 0; i < newNames.length; i++) {
-      subname = newNames[i];
-      if (oldNames.indexOf(subname) === -1 && subname) {
-        _addName(this, subname);
-      }
-    }
-
-    this._setAttr(NAME, name);
-    return this;
-  }
   /**
    * add name to node
    * @method
@@ -2157,7 +2066,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     if (!this.hasName(name)) {
       var oldName = this.name();
       var newName = oldName ? oldName + ' ' + name : name;
-      this.setName(newName);
+      this.name(newName);
     }
     return this;
   }
@@ -2202,7 +2111,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     var index = names.indexOf(name);
     if (index !== -1) {
       names.splice(index, 1);
-      this.setName(names.join(' '));
+      this.name(names.join(' '));
     }
     return this;
   }

src/_CoreInternals.ts

@@ -2,7 +2,7 @@
 import { Konva as Global } from './Global';
 
 import { Util, Transform } from './Util';
-import { Node, ids, names } from './Node';
+import { Node } from './Node';
 import { Container } from './Container';
 
 import { Stage, stages } from './Stage';
@@ -26,8 +26,6 @@ export const Konva = Util._assign(Global, {
   Util,
   Transform,
   Node,
-  ids,
-  names,
   Container,
   Stage,
   stages,

test/unit/Container-test.ts

@@ -709,71 +709,6 @@ describe('Container', function () {
     assert.equal(a, 2, 'listener should have fired for rect');
   });
 
-  // ======================================================
-  it('test ids and names hashes', function () {
-    var stage = addStage();
-    var layer = new Konva.Layer();
-    var circle = new Konva.Circle({
-      x: stage.width() / 2,
-      y: stage.height() / 2,
-      radius: 70,
-      fill: 'green',
-      stroke: 'black',
-      strokeWidth: 4,
-      id: 'myCircle3',
-    });
-
-    var rect = new Konva.Rect({
-      x: 300,
-      y: 100,
-      width: 100,
-      height: 50,
-      fill: 'purple',
-      stroke: 'black',
-      strokeWidth: 4,
-      name: 'myRect3',
-    });
-
-    layer.add(circle);
-    layer.add(rect);
-    stage.add(layer);
-
-    assert.equal(
-      Konva.ids['myCircle3'].getId(),
-      'myCircle3',
-      'circle id not in ids hash'
-    );
-    assert.equal(
-      Konva.names['myRect3'][0].getName(),
-      'myRect3',
-      'rect name not in names hash'
-    );
-
-    circle.setId('newCircleId');
-    assert.notEqual(
-      Konva.ids['newCircleId'],
-      undefined,
-      'circle not in ids hash'
-    );
-    assert.equal(
-      Konva.ids['myCircle3'],
-      undefined,
-      'old circle id key is still in ids hash'
-    );
-
-    rect.setName('newRectName');
-    assert.notEqual(
-      Konva.names['newRectName'][0],
-      undefined,
-      'new rect name not in names hash'
-    );
-    assert.equal(
-      Konva.names['myRect3'],
-      undefined,
-      'old rect name is still in names hash'
-    );
-  });
-
   // ======================================================
   it('remove all children from layer', function () {
     var stage = addStage();
@@ -816,68 +751,6 @@ describe('Container', function () {
     );
   });
 
-  // ======================================================
-  it('destroy all children from layer', function () {
-    var stage = addStage();
-    var layer = new Konva.Layer({
-      name: 'layerName',
-      id: 'layerId',
-    });
-    var group = new Konva.Group();
-    var circle1 = new Konva.Circle({
-      x: 100,
-      y: stage.height() / 2,
-      radius: 70,
-      fill: 'green',
-      stroke: 'black',
-      strokeWidth: 4,
-      name: 'circleName',
-      id: 'circleId',
-    });
-
-    var circle2 = new Konva.Circle({
-      x: 300,
-      y: stage.height() / 2,
-      radius: 70,
-      fill: 'green',
-      stroke: 'black',
-      strokeWidth: 4,
-    });
-
-    group.add(circle1);
-    group.add(circle2);
-    layer.add(group);
-    stage.add(layer);
-
-    assert.equal(layer.children.length, 1, 'layer should have 1 children');
-    assert.equal(group.children.length, 2, 'group should have 2 children');
-    assert(
-      Konva.names.circleName.length > 0,
-      'circleName should be in names hash'
-    );
-    assert.equal(
-      Konva.ids.circleId.getId(),
-      'circleId',
-      'layerId should be in ids hash'
-    );
-
-    layer.destroyChildren();
-    layer.draw();
-
-    assert.equal(layer.children.length, 0, 'layer should have 0 children');
-    assert.equal(group.children.length, 0, 'group should have 0 children');
-    assert.equal(
-      Konva.names.circleName,
-      undefined,
-      'circleName should not be in names hash'
-    );
-    assert.equal(
-      Konva.ids.circleId,
-      undefined,
-      'layerId should not be in ids hash'
-    );
-  });
-
   // ======================================================
   it('add group', function () {
     var stage = addStage();

test/unit/Node-test.ts

@@ -2745,32 +2745,6 @@ describe('Node', function () {
     assert.equal(circle.getParent(), undefined);
   });
 
-  // ======================================================
-  it('memory leak test for destroy and a shape with several names', function () {
-    var stage = addStage();
-    var layer = new Konva.Layer();
-    var circle = new Konva.Circle({
-      x: stage.width() / 2,
-      y: stage.height() / 2,
-      radius: 70,
-      fill: 'green',
-      stroke: 'black',
-      strokeWidth: 4,
-      name: 'my-new-shape my-new-circle',
-    });
-
-    layer.add(circle);
-    stage.add(layer);
-
-    assert.equal(Konva.names['my-new-shape'].length, 1);
-    assert.equal(Konva.names['my-new-circle'].length, 1);
-
-    circle.destroy();
-
-    assert.equal(Konva.names['my-new-shape'], undefined);
-    assert.equal(Konva.names['my-new-circle'], undefined);
-  });
-
   // ======================================================
   it('destroy shape without adding its parent to stage', function () {
     var stage = addStage();
@@ -3003,64 +2977,19 @@ describe('Node', function () {
     layer.add(rect);
     stage.add(layer);
 
-    assert.equal(Konva.ids.myCircle2._id, circle._id);
-    assert.equal(Konva.names.myRect2[0]._id, rect._id);
     assert.equal(Konva.shapes[circleColorKey]._id, circle._id);
     assert.equal(Konva.shapes[rectColorKey]._id, rect._id);
 
     circle.destroy();
 
-    assert.equal(Konva.ids.myCircle2, undefined);
-    assert.equal(Konva.names.myRect2[0]._id, rect._id);
     assert.equal(Konva.shapes[circleColorKey], undefined);
     assert.equal(Konva.shapes[rectColorKey]._id, rect._id);
 
     rect.destroy();
 
-    assert.equal(Konva.ids.myCircle2, undefined);
-    assert.equal(Konva.names.myRect2, undefined);
     assert.equal(Konva.shapes[circleColorKey], undefined);
     assert.equal(Konva.shapes[rectColorKey], undefined);
   });
-
-  // ======================================================
-  it('destroy should remove only required shape from ids regestry', function () {
-    var stage = addStage();
-    var layer = new Konva.Layer();
-    var circle = new Konva.Circle({
-      x: stage.width() / 2,
-      y: stage.height() / 2,
-      radius: 70,
-      fill: 'green',
-      stroke: 'black',
-      strokeWidth: 4,
-      id: 'shape',
-    });
-
-    var rect = new Konva.Rect({
-      x: 300,
-      y: 100,
-      width: 100,
-      height: 50,
-      fill: 'purple',
-      stroke: 'black',
-      strokeWidth: 4,
-      id: 'shape',
-    });
-
-    layer.add(circle);
-    layer.add(rect);
-    stage.add(layer);
-
-    // last shape is registered
-    assert.equal(Konva.ids.shape, rect);
-
-    // destroying circle should not remove rect from regiter
-    circle.destroy();
-
-    assert.equal(Konva.ids.shape, rect);
-  });
-
   // ======================================================
   it('hide stage', function () {
     var stage = addStage({

test/unit/Stage-test.ts

@@ -709,49 +709,8 @@ describe('Stage', function () {
     layer.add(circle);
     stage.add(layer);
 
-    assert.equal(
-      Konva.ids.stageFalconId._id,
-      stage._id,
-      'stage id should be in global ids map'
-    );
-    assert.equal(
-      Konva.names.stageFalconName[0]._id,
-      stage._id,
-      'stage name should be in global names map'
-    );
-    assert.equal(
-      Konva.ids.circleFalconId._id,
-      circle._id,
-      'circle id should be in global ids map'
-    );
-    assert.equal(
-      Konva.names.circleFalconName[0]._id,
-      circle._id,
-      'circle name should be in global names map'
-    );
-
     stage.destroy();
 
-    assert.equal(
-      Konva.ids.stageFalconId,
-      undefined,
-      'stage should no longer be in ids map'
-    );
-    assert.equal(
-      Konva.names.stageFalconName,
-      undefined,
-      'stage should no longer be in names map'
-    );
-    assert.equal(
-      Konva.ids.circleFalconId,
-      undefined,
-      'circle should no longer be in ids map'
-    );
-    assert.equal(
-      Konva.names.circleFalconName,
-      undefined,
-      'circle should no longer be in names map'
-    );
     assert.equal(
       Konva.stages.indexOf(stage) === -1,
       true,

test/unit/Text-test.ts

@@ -73,31 +73,17 @@ describe('Text', function () {
     var stage = addStage();
     var layer = new Konva.Layer();
 
-    var rect = new Konva.Rect({
-      x: stage.width() / 2,
-      y: stage.height() / 2,
-      stroke: '#555',
-      strokeWidth: 5,
-      fill: '#ddd',
-      width: 400,
-      height: 100,
-      shadowColor: 'black',
-      shadowBlur: 1,
-      shadowOffset: { x: 10, y: 10 },
-      shadowOpacity: 0.2,
-      cornerRadius: 10,
-    });
-
     var text = new Konva.Text({
-      x: stage.width() / 2,
-      y: stage.height() / 2,
+      x: 40,
+      y: 40,
       text: 'Hello World!',
       fontSize: 50,
-      fontFamily: 'Calibri',
+      fontFamily: 'Arial',
       fontStyle: 'normal',
       fill: '#888',
       stroke: '#333',
       align: 'right',
+      shadowForStrokeEnabled: false,
       lineHeight: 1.2,
       width: 400,
       height: 100,
@@ -112,14 +98,15 @@ describe('Text', function () {
       draggable: true,
     });
 
-    // center text box
-    rect.offsetX(text.getWidth() / 2);
-
-    group.add(rect);
     group.add(text);
     layer.add(group);
     stage.add(layer);
 
+    assert.equal(
+      layer.getContext().getTrace(false, true),
+      'clearRect(0,0,578,200);save();transform(1,0,0,1,40,40);shadowColor=rgba(255,0,0,0.2);shadowBlur=1;shadowOffsetX=10;shadowOffsetY=10;font=normal normal 50px Arial;textBaseline=middle;textAlign=left;translate(10,10);save();fillStyle=#888;fillText(Hello World!,108,30);lineWidth=2;shadowColor=rgba(0,0,0,0);strokeStyle=#333;strokeText(Hello World!,108,30);restore();restore();'
+    );
+
     assert.equal(text.getClassName(), 'Text', 'getClassName should be Text');
   });