@logicflow/core 1.2.27 → 2.0.0-beta.1

package/__tests__/logicflow.test.ts

@@ -0,0 +1,567 @@
+import { BaseNode, BaseNodeModel, Keyboard } from '../src';
+import LogicFlow from '../src/LogicFlow';
+import Tool from '../src/tool';
+/**
+ * @jest-environment jsdom
+ */
+describe('logicflow/initialize', () => {
+  test('init', () => {
+    const initContainer = jest.fn();
+    LogicFlow.prototype.initContainer = initContainer;
+    const dom = document.createElement('div');
+    dom.id = 'main-graph';
+    document.body.appendChild(dom);
+    const lf = new LogicFlow({
+      container: dom,
+    });
+    expect(initContainer).toBeCalled();
+    expect(lf).toBeDefined();
+  });
+
+  test('elements register', () => {
+    const defaultRegister = jest.fn();
+    LogicFlow.prototype.defaultRegister = defaultRegister;
+
+    const dom = document.createElement('div');
+    dom.id = 'main-graph';
+    document.body.appendChild(dom);
+    const lf = new LogicFlow({
+      container: dom,
+    });
+    lf.register({
+      type: 'test',
+      view: BaseNode,
+      model: BaseNodeModel,
+    });
+
+    lf.register('custom', ({ RectNode, RectNodeModel }) => {
+      class CustomView extends RectNode {}
+      class CustomModel extends RectNodeModel {}
+      return {
+        view: CustomView,
+        model: CustomModel,
+      };
+    });
+
+    expect(defaultRegister).toBeCalled();
+    expect(lf.getView('test')).toBeDefined();
+    expect(lf.getView('custom')).toBeDefined();
+    expect(lf.graphModel.getModel('test')).toBeDefined();
+    expect(lf.graphModel.getModel('custom')).toBeDefined();
+  });
+
+  test('register plugin by Logicflow.use', () => {
+    class Plugin {
+      static pluginName = 'test-use';
+      lf: LogicFlow;
+      constructor(lf: LogicFlow) {
+        this.lf = lf;
+      }
+      init() {}
+    }
+    LogicFlow.use(Plugin);
+    expect(LogicFlow.extensions.get('test-use')).toBeDefined();
+  });
+
+  test('shortcut', () => {
+    const initShortcuts = jest.fn();
+    const on = jest.fn();
+    Keyboard.prototype.initShortcuts = initShortcuts;
+    Keyboard.prototype.on = on;
+    const dom = document.createElement('div');
+    dom.id = 'main-graph';
+    document.body.appendChild(dom);
+    const lf = new LogicFlow({
+      container: dom,
+    });
+    expect(initShortcuts).toBeCalled();
+    expect(on).toBeCalledTimes(5);
+  });
+
+  test('not silent mode', () => {
+    const initShortcuts = jest.fn();
+    Keyboard.prototype.initShortcuts = initShortcuts;
+    const dom = document.createElement('div');
+    dom.id = 'main-graph';
+    document.body.appendChild(dom);
+    const lf = new LogicFlow({
+      container: dom,
+      isSilentMode: false,
+    });
+    expect(initShortcuts).toBeCalledTimes(1);
+  });
+});
+
+describe('logicflow/apis', () => {
+  const rawData = {
+    nodes: [
+      {
+        id: 'node1',
+        type: 'circle',
+        x: 100,
+        y: 100,
+        text: 'node1',
+      },
+      {
+        id: 'node2',
+        type: 'rect',
+        x: 200,
+        y: 200,
+        text: 'node2',
+      },
+      {
+        id: 'node3',
+        type: 'ellipse',
+        x: 300,
+        y: 300,
+        rx: 10,
+        ry: 5,
+        text: 'node3',
+      },
+      {
+        id: 'node4',
+        type: 'polygon',
+        x: 400,
+        y: 400,
+        text: 'node4',
+      },
+    ],
+    edges: [
+      {
+        id: 'edge1',
+        type: 'line',
+        sourceNodeId: 'node1',
+        targetNodeId: 'node2',
+      },
+      {
+        id: 'edge2',
+        type: 'polyline',
+        sourceNodeId: 'node2',
+        targetNodeId: 'node3',
+      },
+      {
+        id: 'edge3',
+        type: 'bezier',
+        sourceNodeId: 'node2',
+        targetNodeId: 'node4',
+      },
+    ],
+  };
+
+  describe('operations on node/edge model ', () => {
+    const dom = document.createElement('div');
+    dom.id = 'main-graph';
+    document.body.appendChild(dom);
+    const lf = new LogicFlow({
+      container: dom,
+      width: 1000,
+      height: 1000,
+      keyboard: {
+        enabled: true,
+      },
+      allowRotation: true,
+      metaKeyMultipleSelected: true,
+      grid: {
+        size: 10,
+        type: 'dot',
+      },
+      snapline: true,
+      guards: {
+        beforeClone: (data: any) => !['node1'].includes(data.id),
+        beforeDelete: (data: any) => !['node1', 'edge1'].includes(data.id),
+      },
+    });
+
+    test('render', () => {
+      lf.render(rawData);
+      expect(lf.graphModel.nodes.length).toBe(4);
+      expect(lf.graphModel.edges.length).toBe(3);
+    });
+
+    test('set default edge type', () => {
+      lf.setDefaultEdgeType('line');
+      expect(lf.graphModel.edgeType).toBe('line');
+    });
+
+    test('delete elements with guards', () => {
+      lf.render(rawData);
+      expect(lf.deleteElement('node1')).toBeFalsy();
+      expect(lf.deleteElement('node2')).toBeTruthy();
+      expect(lf.deleteElement('node5')).toBeFalsy();
+
+      expect(lf.graphModel.nodes.length).toBe(3);
+    });
+
+    test('add elements', () => {
+      lf.render(rawData);
+      lf.addElements({
+        nodes: [
+          {
+            id: 'node_1_1',
+            type: 'rect',
+            x: 100,
+            y: 100,
+          },
+          {
+            id: 'node_2_1',
+            type: 'rect',
+            x: 200,
+            y: 300,
+          },
+        ],
+        edges: [
+          {
+            id: 'edge_3_1',
+            type: 'polyline',
+            sourceNodeId: 'node_1_1',
+            targetNodeId: 'node_2_1',
+          },
+        ],
+      });
+      expect(lf.graphModel.nodes.length).toBe(6);
+      expect(lf.graphModel.edges.length).toBe(4);
+    });
+
+    test('add node', () => {
+      lf.render(rawData);
+      lf.addNode({
+        id: 'node5',
+        type: 'text',
+        x: 100,
+        y: 100,
+        text: 'node5',
+      });
+      expect(lf.graphModel.nodes.length).toBe(5);
+      lf.updateText('node5', 'node5_1');
+      lf.updateText('edge1', 'edge1');
+      expect(lf.getNodeModelById('node5').text.value).toBe('node5_1');
+      expect(lf.getEdgeModelById('edge1').text.value).toBe('edge1');
+    });
+
+    test('change node id', () => {
+      lf.render(rawData);
+      expect(lf.changeNodeId('node1', 'node1_1')).toBe('node1_1');
+      expect(lf.changeNodeId('node1_1', 'node2')).toBeFalsy();
+      expect(lf.changeNodeId('node1_1_1', 'node1_1_2')).toBeFalsy();
+    });
+
+    test('clone node with guards', () => {
+      lf.render(rawData);
+      expect(lf.cloneNode('node1')).toBeFalsy();
+      expect(lf.cloneNode('node2')).toBeTruthy();
+      expect(lf.graphModel.nodes.length).toBe(5);
+    });
+
+    test('get data by id', () => {
+      lf.render(rawData);
+      expect(lf.getDataById('node1')).toBeDefined();
+      expect(lf.getDataById('edge1')).toBeDefined();
+    });
+
+    test('get node data by id', () => {
+      lf.render(rawData);
+      expect(lf.getNodeDataById('node1')).toBeDefined();
+      expect(lf.getNodeDataById('node6')).toBeUndefined();
+    });
+
+    test('get edge data by id', () => {
+      lf.render(rawData);
+      expect(lf.getEdgeDataById('edge1')).toBeDefined();
+      expect(lf.getEdgeDataById('edge4')).toBeUndefined();
+    });
+
+    test('add edge', () => {
+      lf.render(rawData);
+      lf.addEdge({
+        id: 'edge4',
+        type: 'polyline',
+        sourceNodeId: 'node1',
+        targetNodeId: 'node2',
+      });
+      expect(lf.graphModel.edges.length).toBe(4);
+    });
+
+    test('delete edge with guards', () => {
+      lf.render(rawData);
+      expect(lf.deleteEdge('edge1')).toBeFalsy();
+      expect(lf.deleteEdge('edge2')).toBeTruthy();
+      expect(lf.graphModel.edges.length).toBe(2);
+    });
+
+    test('delete edge by nodeId', () => {
+      lf.render({
+        nodes: [
+          {
+            id: 'node1',
+            type: 'rect',
+            x: 100,
+            y: 100,
+            text: 'node1',
+          },
+          {
+            id: 'node2',
+            type: 'rect',
+            x: 200,
+            y: 200,
+            text: 'node2',
+          },
+          {
+            id: 'node3',
+            type: 'rect',
+            x: 300,
+            y: 300,
+            text: 'node3',
+          },
+          {
+            id: 'node4',
+            type: 'diamond',
+            x: 400,
+            y: 400,
+            text: 'node4',
+          },
+          {
+            id: 'node5',
+            type: 'diamond',
+            x: 500,
+            y: 500,
+            text: 'node5',
+          },
+        ],
+        edges: [
+          {
+            id: 'edge1',
+            type: 'polyline',
+            sourceNodeId: 'node1',
+            targetNodeId: 'node2',
+          },
+          {
+            id: 'edge2',
+            type: 'polyline',
+            sourceNodeId: 'node2',
+            targetNodeId: 'node3',
+          },
+          {
+            id: 'edge3',
+            type: 'polyline',
+            sourceNodeId: 'node2',
+            targetNodeId: 'node4',
+          },
+          {
+            id: 'edge4',
+            type: 'polyline',
+            sourceNodeId: 'node2',
+            targetNodeId: 'node5',
+          },
+        ],
+      });
+
+      lf.deleteEdgeByNodeId({
+        targetNodeId: 'node3',
+      });
+      expect(lf.graphModel.edges.length).toBe(3);
+      lf.deleteEdgeByNodeId({
+        sourceNodeId: 'node1',
+        targetNodeId: 'node2',
+      });
+      expect(lf.graphModel.edges.length).toBe(2);
+      lf.deleteEdgeByNodeId({
+        sourceNodeId: 'node2',
+      });
+      expect(lf.graphModel.edges.length).toBe(0);
+    });
+
+    test('change node type', () => {
+      lf.render(rawData);
+      lf.changeNodeType('node1', 'circle');
+      expect(lf.getNodeModelById('node1').type).toBe('circle');
+    });
+
+    test('change edge type', () => {
+      lf.render(rawData);
+      lf.changeEdgeType('edge1', 'line');
+      expect(lf.getEdgeModelById('edge1').type).toBe('line');
+    });
+
+    test('get incoming and outgoing edges of node', () => {
+      lf.render(rawData);
+      expect(lf.getNodeEdges('node2').length).toBe(3);
+    });
+
+    test('get incoming edges', () => {
+      lf.render(rawData);
+      expect(lf.getNodeIncomingEdge('node2').length).toBe(1);
+    });
+
+    test('get outgoing edges', () => {
+      lf.renderRawData(rawData);
+      expect(lf.getNodeOutgoingEdge('node2').length).toBe(2);
+    });
+
+    test('get incoming node', () => {
+      lf.renderRawData(rawData);
+      expect(lf.getNodeIncomingNode('node2').length).toBe(1);
+    });
+
+    test('get outgoing node', () => {
+      lf.renderRawData(rawData);
+      expect(lf.getNodeOutgoingNode('node2').length).toBe(2);
+    });
+
+    test('get edge model by filter', () => {
+      lf.render(rawData);
+      expect(
+        lf.getEdgeModels({
+          sourceNodeId: 'node2',
+        }).length,
+      ).toBe(2);
+
+      expect(
+        lf.getEdgeModels({
+          targetNodeId: 'node2',
+        }).length,
+      ).toBe(1);
+
+      expect(
+        lf.getEdgeModels({
+          sourceNodeId: 'node2',
+          targetNodeId: 'node3',
+        }).length,
+      ).toBe(1);
+    });
+
+    test('get elements in certain area', () => {
+      lf.render(rawData);
+      expect(lf.getAreaElement([0, 0], [1000, 1000]).length).toBe(7);
+    });
+
+    test('set properties', () => {
+      lf.renderRawData(rawData);
+      lf.setProperties('node1', {
+        a: {
+          b: undefined,
+          c: [],
+          d: {
+            e: 1,
+            f: null,
+          },
+        },
+      });
+      expect((lf.getProperties('node1') as any).a).toEqual({
+        b: undefined,
+        c: [],
+        d: {
+          e: 1,
+          f: null,
+        },
+      });
+    });
+
+    test('delete properties', () => {
+      lf.renderRawData(rawData);
+      lf.deleteProperty('node1', 'a');
+      expect(lf.getNodeModelById('node1').properties.a).toBeUndefined();
+    });
+
+    test('select and to front in overlapMode 0', () => {
+      lf.render(rawData);
+      lf.selectElementById('node1');
+      lf.selectElementById('node2', true);
+      const selectElements = lf.getSelectElements();
+      expect(selectElements.nodes.length).toBe(2);
+      expect(selectElements.nodes[0].id).toBe('node1');
+      expect(lf.getNodeModelById('node1').zIndex).toBe(9999);
+      lf.clearSelectElements();
+      expect(lf.getNodeModelById('node1').zIndex).toBe(1);
+    });
+
+    test('to front in overlapMode 0', () => {
+      lf.render(rawData);
+      lf.toFront('node1');
+      expect(lf.getNodeModelById('node1').zIndex).toBe(9999);
+    });
+
+    test('get graph data', () => {
+      lf.render(rawData);
+      const graphData = lf.getGraphData();
+      expect(lf.getGraphData()).toBeDefined();
+      expect(graphData.nodes.length).toBe(4);
+      expect(graphData.edges.length).toBe(3);
+    });
+
+    test('clear graph data', () => {
+      lf.render(rawData);
+      lf.clearData();
+      expect(lf.getGraphData()).toEqual({
+        nodes: [],
+        edges: [],
+      });
+    });
+  });
+
+  describe('transform', () => {
+    const resize = jest.fn();
+    const dom = document.createElement('div');
+    dom.id = 'main-graph';
+    document.body.appendChild(dom);
+    const lf = new LogicFlow({
+      container: dom,
+      stopScrollGraph: true,
+      stopZoomGraph: true,
+      metaKeyMultipleSelected: true,
+      width: 1000,
+      height: 1000,
+      overlapMode: 1,
+    });
+    lf.graphModel.resize = resize;
+
+    test('get transform information', () => {
+      expect(lf.getTransform()).toEqual({
+        SCALE_X: 1,
+        SCALE_Y: 1,
+        TRANSLATE_X: 0,
+        TRANSLATE_Y: 0,
+      });
+    });
+
+    test('resize', () => {
+      lf.resize(100, 100);
+      expect(resize).toBeCalled();
+      setTimeout(() => {
+        expect(lf.graphModel.width).toBe(100);
+        expect(lf.graphModel.height).toBe(100);
+      });
+    });
+
+    test('zoom', () => {
+      lf.zoom(0.5);
+      expect(lf.graphModel.transformModel.SCALE_X).toBe(0.5);
+      expect(lf.graphModel.transformModel.SCALE_Y).toBe(0.5);
+      lf.resetZoom();
+      expect(lf.graphModel.transformModel.SCALE_X).toBe(1);
+      expect(lf.graphModel.transformModel.SCALE_Y).toBe(1);
+    });
+
+    test('translate', () => {
+      lf.translate(100, 100);
+      expect(lf.graphModel.transformModel.TRANSLATE_X).toBe(100);
+      expect(lf.graphModel.transformModel.TRANSLATE_Y).toBe(100);
+      lf.resetTranslate();
+      expect(lf.graphModel.transformModel.TRANSLATE_X).toBe(0);
+      expect(lf.graphModel.transformModel.TRANSLATE_Y).toBe(0);
+    });
+
+    test('select and to front in overlapMode 1', () => {
+      lf.render(rawData);
+      lf.selectElementById('node1');
+      expect(lf.getNodeModelById('node1').zIndex).toBe(1008);
+      lf.clearSelectElements();
+      expect(lf.getNodeModelById('node1').zIndex).toBe(1008);
+    });
+
+    test('to front in overlapMode 1', () => {
+      lf.render(rawData);
+      lf.toFront('node1');
+      expect(lf.getNodeModelById('node1').zIndex).toBe(1016);
+    });
+  });
+});

package/__tests__/model/graphmodel.test.ts

@@ -0,0 +1,67 @@
+import type { NodeConfig, TextConfig } from '../../src/index';
+import { LogicFlow } from '../../src/index';
+
+type NodeConfigTextObj = NodeConfig & { text: TextConfig };
+describe('graphmodel', () => {
+  const dom = document.createElement('div');
+  dom.id = 'main-graph';
+  document.body.appendChild(dom);
+  const lf = new LogicFlow({
+    container: dom,
+    width: 1000,
+    height: 1000,
+    keyboard: {
+      enabled: true,
+    },
+    allowRotation: true,
+    metaKeyMultipleSelected: true,
+    grid: true,
+    snapline: true,
+  });
+
+  // 将node节点位置进行grid修正，同时处理node内文字的偏移量，返回一个位置修正过的复制节点NodeModel
+  test('getModelAfterSnapToGrid', () => {
+    const rawData = {
+      nodes: [
+        {
+          id: 'node1',
+          type: 'rect',
+          x: 111,
+          y: 123,
+          text: {
+            x: 32,
+            y: 19,
+            value: '文本1',
+          },
+        },
+      ],
+    };
+    lf.render(rawData);
+
+    const originNode = lf.getDataById('node1') as NodeConfigTextObj;
+
+    // grid=true 默认 gridSize=20
+    const newNode = lf.graphModel.getModelAfterSnapToGrid(originNode) as NodeConfigTextObj;
+    expect(originNode.x - originNode.text.x).toEqual(newNode.x - newNode.text.x);
+    expect(originNode.y - originNode.text.y).toEqual(newNode.y - newNode.text.y);
+    expect(originNode.text.value).toEqual(newNode.text.value);
+
+    lf.graphModel.gridSize = 40;
+    const newNode1 = lf.graphModel.getModelAfterSnapToGrid(originNode) as NodeConfigTextObj;
+    expect(originNode.x - originNode.text.x).toEqual(newNode1.x - newNode1.text.x);
+    expect(originNode.y - originNode.text.y).toEqual(newNode1.y - newNode1.text.y);
+    expect(originNode.text.value).toEqual(newNode1.text.value);
+
+    lf.graphModel.gridSize = 1;
+    const newNode2 = lf.graphModel.getModelAfterSnapToGrid(originNode) as NodeConfigTextObj;
+    expect(originNode.x - originNode.text.x).toEqual(newNode2.x - newNode2.text.x);
+    expect(originNode.y - originNode.text.y).toEqual(newNode2.y - newNode2.text.y);
+    expect(originNode.text.value).toEqual(newNode2.text.value);
+
+    lf.graphModel.gridSize = 17;
+    const newNode3 = lf.graphModel.getModelAfterSnapToGrid(originNode) as NodeConfigTextObj;
+    expect(originNode.x - originNode.text.x).toEqual(newNode3.x - newNode3.text.x);
+    expect(originNode.y - originNode.text.y).toEqual(newNode3.y - newNode3.text.y);
+    expect(originNode.text.value).toEqual(newNode3.text.value);
+  });
+});

package/__tests__/util/compatible.test.ts

@@ -0,0 +1,48 @@
+import { formatData } from '../../src/util/compatible';
+
+describe('util/compatible', () => {
+  test('formatData', () => {
+    const data = {
+      nodes: [
+        {
+          id: 'node1',
+          x: 100,
+          y: 100,
+        },
+      ],
+      edges: [
+        {
+          id: 'edge1',
+          source: 'node1',
+          target: 'node2',
+        },
+      ],
+      a: undefined,
+      b: {
+        c: null,
+        d: [],
+      },
+    };
+    expect(formatData(data)).toEqual({
+      nodes: [
+        {
+          id: 'node1',
+          x: 100,
+          y: 100,
+        },
+      ],
+      edges: [
+        {
+          id: 'edge1',
+          source: 'node1',
+          target: 'node2',
+        },
+      ],
+      a: undefined,
+      b: {
+        c: null,
+        d: [],
+      },
+    });
+  });
+});