क्या मैं किसी अन्य पुस्तकालय की तरह एक कोणीय जेएस मॉड्यूल के रूप में JointJS इंजेक्ट कर सकता हूं?

Question

मेरे पास कोणीय वाला एक ऐप है और मुझे इस लाइब्रेरी http://www.jointjs.com/ का उपयोग करने की आवश्यकता है, इसलिए मैंने jointइन.एम.एम.एस. और संयुक्त.एम.एम.एस.एस.एस. डाउनलोड किया और अपने मार्गों को index.html में रखा लेकिन मुझे नहीं पता कि क्या रखना है app.js में इंजेक्ट करने के लिए और मैं कोणीय से इंजेक्शन त्रुटि प्राप्त करता रहता हूं। क्या यह संभव है कि यह करने का तरीका नहीं है? मैंने बहुत कुछ किया लेकिन मुझे कोई दृष्टिकोण नहीं मिला। मैं किसी भी मदद की सराहना करता हूं, अग्रिम धन्यवाद!

Answer 1

यदि आप अपने कोणीय अनुप्रयोग में एक जॉइंटज आरेख प्रस्तुत करना चाहते हैं, तो यह करना बहुत आसान है। मेरे मामले में मैंने संयुक्त कोण कोड को कोणीय निर्देश के अंदर encapsulated और Jointjs ग्राफ ऑब्जेक्ट में पारित किया।

(function() { 
    'use strict'; 

    var app = angular.module('app'); 

    app.directive('jointDiagram', [function() { 

     var directive = { 
      link: link, 
      restrict: 'E', 
      scope: { 
       height: '=', 
       width: '=', 
       gridSize: '=', 
       graph: '=', 
      } 
     }; 

     return directive; 

     function link(scope, element, attrs) { 

      var diagram = newDiagram(scope.height, scope.width, scope.gridSize, scope.graph, element[0]; 

      //add event handlers to interact with the diagram 
      diagram.on('cell:pointerclick', function (cellView, evt, x, y) { 

       //your logic here e.g. select the element 

      }); 

      diagram.on('blank:pointerclick', function (evt, x, y) { 

       // your logic here e.g. unselect the element by clicking on a blank part of the diagram 
      }); 

      diagram.on('link:options', function (evt, cellView, x, y) { 

       // your logic here: e.g. select a link by its options tool 
      }); 
     } 

     function newDiagram(height, width, gridSize, graph, targetElement) { 

      var paper = new joint.dia.Paper({ 
       el: targetElement, 
       width: width, 
       height: height, 
       gridSize: gridSize, 
       model: graph, 
      }); 

      return paper; 
     } 

    }]); 

})(); 

आप चित्र के माध्यम से अपने मॉडल के साथ बातचीत करने की जरूरत है, Jointjs ईवेंट हैंडलर्स का उपयोग करें और निर्देश में अपने दायरे पर कार्यों के लिए उन्हें हुक (के रूप में में दिखाया गया है: (सरलीकृत) निर्देश इस तरह दिखता है उपरोक्त कोड)।

अपने ध्यान में रखते हुए इस का उपयोग करने के लिए:

<joint-diagram graph="vm.graph" width="800" height="600" grid-size="1" /> 

मेरे मामले में मैं अपने नियंत्रक से Jointjs graph.fromJSON फ़ंक्शन का उपयोग करके पहले मामले में ग्राफ़ बनाने में (कडाई के साथ इस एक डेटा सेवा घटक में है कि मेरे नियंत्रक से कहा जाता है) और फिर इसे दायरे में जोड़ें।

function getDiagram() { 
    return datacontext.getDiagram($routeParams.diagramId).then(function (data) { 
     vm.graph.fromJSON(JSON.parse(diagramJson)); 
    }); 
} 

यह दृष्टिकोण को जोड़ने और चित्र से तत्वों और लिंक को हटाने के लिए और चीजों को चारों ओर खींच लिए ठीक काम करता है। आपका कंट्रोलर कोड सिर्फ ग्राफ़ ऑब्जेक्ट पर काम करता है और आरेख प्रतिपादन के सभी अपडेट जियोट्ज द्वारा नियंत्रित किए जाते हैं।

function addCircle(x, y, label) { 

    var cell = new joint.shapes.basic.Circle({ 
     position: { x: x, y: y }, 
     size: { width: 100, height: 100 }, 
     attrs: { text: { text: label } } 
    }); 
    graph.addCell(cell); 
    return cell; 
}; 

जॉइंटज एक महान पुस्तकालय है, लेकिन यह डाटाबेसिंग के लिए बैकबोन.जेएस पर आधारित है। मुझे मिली एकमात्र समस्या यह है कि यह उन मामलों में कोणीय के साथ विशेष रूप से अच्छी तरह से नहीं खेलता है जहां आप कोणीय का उपयोग करके आरेख तत्व गुणों (जैसे निहित पाठ) को संपादित करना चाहते हैं। उदाहरण के लिए, मेरे पास एक गुण फलक (एक कोणीय दृश्य) है जिसका उपयोग चयनित आरेख तत्व गुणों को संपादित करने के लिए किया जाता है।

मैंने इस के लिए एक हैकी कामकाज किया है कि मैं एसओ को डालने में शर्मिंदा हूं; ओ) मैं अभी भी कोणीय/संयुक्त/रीढ़ की हड्डी के बारे में सीख रहा हूं, इसलिए जब तक मैं अपनी परियोजना पूरी नहीं कर पाता हूं, तब तक बेहतर दृष्टिकोण प्राप्त करने की उम्मीद है। अगर मैं करता हूं, तो मैं इसे यहां पोस्ट करूंगा। हो सकता है कि मेरे से कोई और विशेषज्ञ पहले से ही बेहतर कर सके - मुझे यहां पोस्ट किए गए एक बेहतर दृष्टिकोण को देखकर खुशी होगी।

कुल मिलाकर, यह निर्देश एक दृष्टिकोण के रूप में काम करता है, लेकिन यह कोणीय और संयुक्त राष्ट्रों के बीच एक सतही एकीकरण की तरह लगता है। अनिवार्य रूप से निर्देश कोणीय अनुप्रयोग के अंदर "संयुक्त राष्ट्र का द्वीप" बनाता है। मैं ऐसा करने के लिए एक और "कोणीय देशी" तरीका खोजना चाहता हूं, लेकिन हो सकता है कि बैकबोन के बजाय कोणीय का उपयोग करने के लिए संयुक्त राष्ट्र के पुन: लिखने की आवश्यकता होगी ...

पी।

http://www.jointjs.com/download

Answer 2

मिले एक महान GitHub repo को आपके पूछने करने की कोशिश करता है कि: आप पहले से ही अपने आवेदन में jQuery है, तो आप संयुक्त का एक संस्करण है कि Jointjs डाउनलोड पृष्ठ से jQuery शामिल नहीं मिल सकता है। यदि यह बिल्कुल ठीक नहीं है जो आप चाहते थे कि यह अभी भी एक महान प्रेरणा स्रोत है!