TypeScript spring-flo.EditorComponent類代碼示例

describe('Task RenderService', () => {

  const loggerService = new LoggerService();
  const METAMODEL_SERVICE = new MetamodelService(new MockSharedAppService(), loggerService, new MockToolsService());
  const RENDER_SERVICE = new RenderService(METAMODEL_SERVICE, null, null, null, null);
  const EDITOR_SERVICE = new EditorService(null);

  let METAMODEL: Map<string, Map<string, Flo.ElementMetadata>>;
  let component: EditorComponent;
  let fixture: ComponentFixture<EditorComponent>;
  let flo: Flo.EditorContext;

  beforeEach(async(() => {
    METAMODEL_SERVICE.load().then(metamodel => METAMODEL = metamodel);
    TestBed.configureTestingModule({
      imports: [
        FloModule
      ],
      providers: [
        { provide: MetamodelService, useValue: METAMODEL_SERVICE },
        { provide: RenderService, useValue: RENDER_SERVICE },
        { provide: EditorService, useValue: EDITOR_SERVICE }
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(EditorComponent);
    component = fixture.componentInstance;
    component.metamodel = METAMODEL_SERVICE;
    component.renderer = RENDER_SERVICE;
    component.editor = EDITOR_SERVICE;
    const subscription = component.floApi.subscribe((f) => {
      subscription.unsubscribe();
      flo = f;
    });
    // FF needs flo editor to have size otherwise `TypeError: a.getScreenCTM(...) is null`
    const floViewElemnt = $('#flow-view');
    floViewElemnt.css({
      'height': '800px'
    });
    fixture.detectChanges();
  });

  function dropNodeFromPaletteOnCanvas(metadata: Flo.ElementMetadata, location?: dia.Point): dia.Element {
    const node = flo.createNode(metadata, null, location);
    component.setDragDescriptor({
      sourceComponent: Constants.PALETTE_CONTEXT,
      source: {
        view: flo.getPaper().findViewByModel(node)
      }
    });
    component.handleNodeDropping();
    return node;
  }

  function dropNodeFromPaletteOnCanvasLink(metadata: Flo.ElementMetadata, target: dia.Link): dia.Element {
    const node = flo.createNode(metadata, null);
    component.setDragDescriptor({
      sourceComponent: Constants.PALETTE_CONTEXT,
      source: {
        view: flo.getPaper().findViewByModel(node)
      },
      target: {
        view: flo.getPaper().findViewByModel(target),
      }
    });
    component.handleNodeDropping();
    return node;
  }

  function createLink(from: dia.Element, to: dia.Element): dia.Link {
    return flo.createLink({
      'id': from.id, 'port': 'output', 'selector': '.output-port'
    }, {
      'id': to.id, 'port': 'input', 'selector': '.input-port'
    });
  }


  it('default content', () => {
    EDITOR_SERVICE.setDefaultContent(flo, METAMODEL);
    const nodes = flo.getGraph().getElements();
    expect(nodes.length).toBe(2);
    expect(nodes[0].attr('metadata/name')).toBe('START');
    expect(nodes[1].attr('metadata/name')).toBe('END');
    expect(flo.getGraph().getLinks().length).toBe(0);
  });

  it('create handles for task', () => {
    const taskA = flo.createNode(METAMODEL.get('task').get('a'));
    const taskAView = flo.getPaper().findViewByModel(taskA);
    EDITOR_SERVICE.createHandles(flo,
      (owner, kind, action, location) => component.createHandle(owner, kind, action, location),
      taskAView);
    const embeds = taskA.getEmbeddedCells();
    expect(embeds.length).toBe(2);
    const deleteHandle = embeds[0];
    expect(deleteHandle.attr('./kind')).toBe(Constants.REMOVE_HANDLE_TYPE);
//.........這裏部分代碼省略.........

describe('editor.service : Auto-Link', () => {
  let component: EditorComponent;
  let fixture: ComponentFixture<EditorComponent>;
  const metamodelService = new MetamodelService(new MockSharedAppService());
  const renderService = new RenderService(metamodelService);
  const editorService = new EditorService(null);
  let metamodel: Map<string, Map<string, Flo.ElementMetadata>>;

  let flo: Flo.EditorContext;

  beforeEach(async(() => {
    metamodelService.load().then(data => metamodel = data);
    TestBed.configureTestingModule({
      imports: [
        FloModule
      ],
      providers: [
        {provide: MetamodelService, useValue: metamodelService},
        {provide: RenderService, useValue: renderService},
        {provide: EditorService, useValue: editorService}
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(EditorComponent);
    component = fixture.componentInstance;
    component.metamodel = metamodelService;
    component.renderer = renderService;
    component.editor = editorService;
    const subscription = component.floApi.subscribe((f) => {
      subscription.unsubscribe();
      flo = f;
    });
    // FF needs flo editor to have size otherwise `TypeError: a.getScreenCTM(...) is null`
    const floViewElemnt = $('#flow-view');
    floViewElemnt.css({
      'height': '800px'
    });
    fixture.detectChanges();
  });

  function dropOnCanvas(metadata: Flo.ElementMetadata, location?: dia.Point): void {
    const node = flo.createNode(metadata, null, location);
    component.setDragDescriptor({
      sourceComponent: Constants.PALETTE_CONTEXT,
      source: {
        view: flo.getPaper().findViewByModel(node)
      }
    });
    component.handleNodeDropping();
  }

  it('DnD on empty canvas', () => {
    dropOnCanvas(metamodel.get('source').get('http'));
    expect(flo.getGraph().getElements().length).toEqual(1);
    expect(flo.getGraph().getElements()[0].attr('metadata/name')).toEqual('http');
  });

  it('Auto-Link: OFF. Drop processor with available source port', () => {
    flo.createNode(metamodel.get('source').get('http'));
    expect(flo.getGraph().getElements().length).toEqual(1);
    dropOnCanvas(metamodel.get('processor').get('filter'));
    expect(flo.getGraph().getElements().length).toEqual(2);
    expect(flo.getGraph().getLinks().length).toEqual(0);
  });

  it('Auto-Link: ON. Drop processor with available source port', () => {
    flo.autolink = true;
    flo.createNode(metamodel.get('source').get('http'));
    expect(flo.getGraph().getElements().length).toEqual(1);
    dropOnCanvas(metamodel.get('processor').get('filter'));
    expect(flo.getGraph().getElements().length).toEqual(2);
    expect(flo.getGraph().getLinks().length).toEqual(1);
  });

  it('Auto-Link: ON. Drop processor with sink on canvas', () => {
    flo.autolink = true;
    const sinkNode = flo.createNode(metamodel.get('sink').get('null'));
    expect(flo.getGraph().getElements().length).toEqual(1);
    dropOnCanvas(metamodel.get('processor').get('filter'));
    expect(flo.getGraph().getElements().length).toEqual(2);
    expect(flo.getGraph().getLinks().length).toEqual(1);
    const l = flo.getGraph().getLinks()[0];
    expect(l.get('target').id).toEqual(sinkNode.id);
    expect(l.get('target').port).toEqual('input');
  });

  it('Auto-Link: ON. Drop processor but no available ports', () => {
    flo.autolink = true;
    const httpNode = flo.createNode(metamodel.get('source').get('http'));
    const nullNode = flo.createNode(metamodel.get('sink').get('null'));
    flo.createLink({
      id: httpNode.id,
      selector: '.output-port',
      port: 'output'
    }, {
      id: nullNode.id,
      selector: '.input-port',
//.........這裏部分代碼省略.........

 function dropOnCanvas(metadata: Flo.ElementMetadata, location?: dia.Point): void {
   const node = flo.createNode(metadata, null, location);
   component.setDragDescriptor({
     sourceComponent: Constants.PALETTE_CONTEXT,
     source: {
       view: flo.getPaper().findViewByModel(node)
     }
   });
   component.handleNodeDropping();
 }

 function dropNodeFromPaletteOnCanvasLink(metadata: Flo.ElementMetadata, target: dia.Link): dia.Element {
   const node = flo.createNode(metadata, null);
   component.setDragDescriptor({
     sourceComponent: Constants.PALETTE_CONTEXT,
     source: {
       view: flo.getPaper().findViewByModel(node)
     },
     target: {
       view: flo.getPaper().findViewByModel(target),
     }
   });
   component.handleNodeDropping();
   return node;
 }

 (owner, kind, action, location) => component.createHandle(owner, kind, action, location),