Smartcalls कैसे Voximplant Kit बने - रीब्रांडिंग और किलर फीचर्स

वास्तव में क्या बदल गया है?

लेकिन सबसे महत्वपूर्ण चीज है संपादक

• पूर्ववत करें / फिर से करें (नीचे दी गई छवि में 1);
• गर्म चाबियाँ (2);
• पॉप-अप मेनू जहां आप एक क्लिक के साथ ब्लॉक और लिंक को उनके बीच संरेखित कर सकते हैं, स्केल बदल सकते हैं, मिनी मैप के साथ काम कर सकते हैं, स्क्रिप्ट को पूर्ण स्क्रीन तक बढ़ा सकते हैं, और इसे साझा भी कर सकते हैं (कॉपी या पीएनजी के रूप में सहेज सकते हैं) (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);
 }