Smartcalls如何成为Voximplant Kit的品牌-品牌重塑和杀手features

实际发生了什么变化？

但是最重​​要的是编辑

• 撤消/重做（下图中的1）；
• 热键（2）;
• 弹出菜单，您可以一键式对齐块和块之间的链接，更改比例，使用miniMap，将脚本展开为全屏显示并共享（复制或另存为png）（3）；
• 右键单击上下文菜单；
• 复制块-不仅在同一脚本内，而且在不同脚本之间，甚至（！）不同的帐户之间；
• 锁定/解锁块-可以移动锁定的块，但是无法进行编辑以避免不必要的更改；
• 颜色变化-在视觉上，您可以选择几个“相关”块；
• 按使用块的名称和内容进行搜索；
• “交互式菜单”块-只需拖放即可交换位置中的端口（答案选项）的功能。

我们揭示卡片

• 时间戳
• idSource-初始块；
• idTarget-最后一块；
• 端口-端口（1个块中可能有多个输出）。

const link = this.editor.getTestLink(sourceCell, portId);

if (link) this.setLinkAnimation(link);

setTimeout(this.selectBlock, 700);

建立联系

link = this.graph.getConnectedLinks(cell, {outbound : true}).find(item => {
     return item.get('source').port === portId;

return link ? (link.toFront() && link) : null;

getTestLink(sourceCell: Cell, portId: string): Link {
  let link = null;
  if (sourceCell && sourceCell.id) {
    let cell = null;
    if (sourceCell.type === 'ScenarioStart' || sourceCell.type === 'IncomingStart') {
      cell = this.getStartCell()
    } else {
      cell = this.graph.getCell(sourceCell.id);
    }
    link = this.graph.getConnectedLinks(cell, {outbound : true}).find(item => {
      return item.get('source').port === portId;
    });
  }
  return link ? (link.toFront() && link) : null;
}
 

我们移到当前区块

const center = cell.getBBox().center();

editor.tester.setTestCell(cell);

editor.paperController.zoomToCell(center, 1, false);

selectTestBlock(id: string): Cell {
 const cell = (id === 'ScenarioStart') ? editor.tester.getStartCell() : editor.graph.getCell(id);
 if (cell) {
   const center = cell.getBBox().center();
   editor.tester.setTestCell(cell);
   editor.paperController.zoomToCell(center, 1, false);
 }
 return cell;
}

setTestCell(cell: Cell): void {
 const view = cell.findView(this.paper);
 if (view) view.el.classList.add('is-tested');
}

平滑缩放

.animate-viewport {
 will-change: transform;
 transition: transform 0.5s ease-in-out;

public zoomToCell(center: g.Point, zoom: number, offset: boolean = true): void {
   this.updateGridSize();
   const currentMatrix = this.paper.layers.getAttribute('transform');
   //   svg-,        center
   //   ,     style
   const { a, b, c, d, e, f } = this.zoomMatrix(zoom, center, offset);
   //  FireFox    ,       
   this.paper.layers.style.transform = currentMatrix;
   //    FF  ,     ,    
   setTimeout(() => {
     //  CSS- .animate-viewport,    - transition;
     //    style      - transition
     this.paper.layers.classList.add('animate-viewport');
     this.paper.layers.style.transform = `matrix(${ a }, ${ b }, ${ c }, ${ d }, ${ e }, ${ f })`;
     const duration = parseFloat(getComputedStyle(this.paper.layers)['transitionDuration']) * 1000;
     //        style;
     //      joint
     setTimeout(() => {
       this.paper.layers.classList.remove('animate-viewport');
       this.paper.layers.style.transform = null;
       this.paper.matrix(newMatrix);
       this.paper.trigger('paper:zoom');
       this.updateGridSize();
       this.paper.trigger('paper:update');
     }, duration);
   }, 100);
 }