test: shortcuts-call test spec; test: drag-node-spec

src/types/index.ts

@@ -149,6 +149,8 @@ export interface ModeOption {
   }>;
   key?: string | undefined;
   edgeConfig?: EdgeConfig;
+  functionName?: string;
+  functionParams?: any[];
   shouldUpdate?: (e: IG6GraphEvent) => boolean;
   shouldBegin?: (e: IG6GraphEvent) => boolean;
   shouldEnd?: (e: IG6GraphEvent) => boolean;

tests/unit/behavior/drag-node-spec.ts

@@ -433,11 +433,12 @@ describe('drag-node', () => {
     graph.destroy();
   });
 
-  it('prevent default', () => {
+  it('prevent default, enabledStack', () => {
     const graph = new Graph({
       container: div,
       width: 500,
       height: 500,
+      enabledStack: true,
       modes: {
         default: [
           {
@@ -465,6 +466,9 @@ describe('drag-node', () => {
     expect(matrix[0]).toEqual(1);
     expect(matrix[6]).toEqual(50);
     expect(matrix[7]).toEqual(50);
+    graph.emit('node:dragend', { x: 120, y: 120, item: node });
+    const stack = graph.getUndoStack();
+    expect(stack.linkedList.head).not.toBe(null);
     graph.destroy();
   });
   it('prevent begin', () => {
@@ -710,6 +714,66 @@ describe('drag-node', () => {
     graph.destroy();
   });
 
+  it('drop on combo, drop on canvas', () => {
+    const graph: Graph = new Graph({
+      container: div,
+      width: 500,
+      height: 500,
+      modes: {
+        default: [
+          {
+            type: 'drag-node',
+            enableDelegate: false,
+          },
+        ],
+      },
+    });
+    const data = {
+      nodes: [
+        {
+          id: 'node',
+          x: 50,
+          y: 50,
+          linkPoints: {
+            right: true,
+          },
+          style: {
+            fill: '#f00',
+          },
+        },
+        {
+          id: 'node2',
+          x: 50,
+          y: 150,
+          linkPoints: {
+            right: true,
+          },
+        },
+      ],
+      combos: [
+        { id: 'combo1' }
+      ]
+    };
+    graph.data(data);
+    graph.render();
+
+    const node = graph.getNodes()[0];
+    const combo = graph.getCombos()[0];
+
+    graph.emit('node:dragstart', { x: 100, y: 100, item: node });
+    graph.emit('node:drag', { x: 120, y: 120, item: node });
+    graph.emit('combo:drop', { x: 120, y: 120, item: combo });
+    graph.emit('node:dragend', { x: 120, y: 120, item: node });
+    expect(combo.getChildren().nodes.length).toBe(1);
+
+    graph.emit('node:dragstart', { x: 100, y: 100, item: node });
+    graph.emit('node:drag', { x: 120, y: 120, item: node });
+    graph.emit('canvas:drop', { x: 120, y: 120 });
+    graph.emit('node:dragend', { x: 120, y: 120, item: node });
+    expect(combo.getChildren().nodes.length).toBe(0);
+    graph.destroy();
+  });
+
   xit('temperal!! test for dragover, dragleave', () => {
     const graph: Graph = new Graph({
       container: div,

tests/unit/behavior/shortcuts-call-spec.ts

@@ -0,0 +1,66 @@
+import '../../../src/behavior';
+import '../../../src/shape';
+import Graph from '../../../src/graph/graph';
+
+const div = document.createElement('div');
+div.id = 'shortcuts-spec';
+document.body.appendChild(div);
+
+describe('shortcuts-call', () => {
+  it('default shortcuts-call', () => {
+    const graph = new Graph({
+      container: div,
+      width: 500,
+      height: 500,
+      modes: {
+        default: ['shortcuts-call'],
+      },
+    });
+    const node = graph.addItem('node', {
+      color: '#666',
+      x: 50,
+      y: 50,
+      size: 20,
+      style: { lineWidth: 2, fill: '#666' },
+    });
+
+    graph.emit('keydown', { key: 'ctrl' });
+    graph.emit('keydown', { key: '1' });
+    graph.emit('keyup');
+    const matrix = graph.getGroup().getMatrix();
+    expect(matrix[6]).toBe(200);
+    expect(matrix[7]).toBe(200);
+
+    graph.destroy();
+  });
+  it('Zoom 2', () => {
+    const graph = new Graph({
+      container: div,
+      width: 500,
+      height: 500,
+      modes: {
+        default: [{
+          type: 'shortcuts-call',
+          functionName: 'zoom',
+          functionParams: [2]
+        }],
+      },
+    });
+    const node = graph.addItem('node', {
+      color: '#666',
+      x: 50,
+      y: 50,
+      size: 20,
+      style: { lineWidth: 2, fill: '#666' },
+    });
+
+    graph.emit('keydown', { key: 'ctrl' });
+    graph.emit('keydown', { key: '1' });
+    graph.emit('keyup');
+    const matrix = graph.getGroup().getMatrix();
+    expect(matrix[0]).toBe(2);
+    expect(matrix[4]).toBe(2);
+
+    graph.destroy();
+  });
+});