कॉपी करें और चिपकाएं

Blockly में, कई बिल्ट-इन कॉम्पोनेंट के लिए कॉपी, कट, और चिपकाने की सुविधा उपलब्ध है. जैसे, ब्लॉक, वर्कस्पेस में की गई टिप्पणियां, और बबल्स.

क्लिपबोर्ड का डिफ़ॉल्ट बिहेवियर

Blockly कोर में कीबोर्ड शॉर्टकट होते हैं. इनकी मदद से, ब्लॉक, वर्कस्पेस की टिप्पणियां, और ICopyable, IDraggable, और IDeletable इंटरफ़ेस लागू करने वाले अन्य कॉम्पोनेंट को काटा, कॉपी किया या चिपकाया जा सकता है. इसमें ब्लॉक को डुप्लीकेट करने के लिए, कॉन्टेक्स्ट मेन्यू का विकल्प भी मिलता है. अपनी ज़रूरत के हिसाब से, डिफ़ॉल्ट शॉर्टकट और मेन्यू आइटम में बदलाव किया जा सकता है या उन्हें हटाया जा सकता है.

डिफ़ॉल्ट क्लिपबोर्ड की सुविधा में, कॉपी किए जा सकने वाले ऑब्जेक्ट को सिर्फ़ उस वर्कस्पेस में चिपकाया जा सकता है जहां से उन्हें कॉपी किया गया था. इसके अलावा, अगर उन्हें फ़्लायआउट से कॉपी किया गया था, तो उन्हें टारगेट वर्कस्पेस में चिपकाया जा सकता है. इसका मतलब है कि किसी फ़्लायआउट से ब्लॉक को कॉपी करके, उस फ़्लायआउट के टारगेट वर्कस्पेस में चिपकाया जा सकता है. हालांकि, किसी ब्लॉक को एक मुख्य वर्कस्पेस से दूसरे मुख्य वर्कस्पेस में कॉपी नहीं किया जा सकता.

अलग-अलग वर्कस्पेस और टैब में कॉपी करके चिपकाना

अगर आपको उपयोगकर्ताओं को एक वर्कस्पेस से ब्लॉक कॉपी करके दूसरे वर्कस्पेस में चिपकाने की अनुमति देनी है, तो @blockly/plugin-cross-tab-copy-paste प्लगिन इंस्टॉल करें. इसके अलावा, उन्हें किसी दूसरे टैब में चल रहे आपके ऐप्लिकेशन की कॉपी के वर्कस्पेस में भी ब्लॉक चिपकाने की अनुमति दी जा सकती है.

क्लिपबोर्ड के लिए कस्टम सेटिंग

अगर आपको क्लिपबोर्ड के लिए कोई दूसरा तरीका इस्तेमाल करना है, तो Blockly के साथ आने वाले कीबोर्ड शॉर्टकट को अनइंस्टॉल करें. इसके बाद, ऐसे शॉर्टकट इंस्टॉल करें जो अलग तरीके से काम करते हों. इसके लिए, कॉपी करने, चिपकाने या ज़्यादा बेहतर कंट्रोल के लिए, Blockly.clipboard नेमस्पेस में दिए गए तरीकों का इस्तेमाल किया जा सकता है. जैसे, उस वर्कस्पेस को सेट करना जिससे किसी ऑब्जेक्ट को कॉपी किया गया था.

कॉपी किए जा सकने वाले कस्टम ऑब्जेक्ट

पांच इंटरफ़ेस का इस्तेमाल करके, किसी भी आइटम को कॉपी/चिपकाने वाले सिस्टम के साथ काम करने लायक बनाया जा सकता है: ICopyable, IDraggable, और IDeletable का इस्तेमाल उन ऑब्जेक्ट को दिखाने के लिए किया जाता है जिन्हें कॉपी किया जा सकता है. ICopyData का इस्तेमाल कॉपी किए गए ऑब्जेक्ट को दिखाने के लिए किया जाता है. साथ ही, IPaster का इस्तेमाल उन ऑब्जेक्ट को दिखाने के लिए किया जाता है जो कॉपी किए गए डेटा को वापस कॉपी किए जा सकने वाले ऑब्जेक्ट में बदल सकते हैं. हर तरह के ICopyable के लिए, उससे जुड़ा IPaster होना ज़रूरी है, ताकि वह डेटा को चिपका सके.

ICopyable,IDraggable, और IDeletable को लागू करने वाला कोई भी ऑब्जेक्ट, डिफ़ॉल्ट क्लिपबोर्ड सिस्टम के साथ अपने-आप काम करेगा. साथ ही, उसके पास IPaster और ICopyData होना चाहिए.

कुछ ही मामलों में, आपको कॉपी किए जा सकने वाले कस्टम ऑब्जेक्ट या कस्टम पस्टर (जैसे, मल्टीसिलेक्ट प्लगिन) को लागू करना चाहिए.ऐसा इसलिए, क्योंकि कॉपी किए जा सकने वाले ऑब्जेक्ट रेंडर किए जाते हैं. साथ ही, Blockly में नए रेंडर किए गए ऑब्जेक्ट नहीं जोड़े जा सकते. वर्कस्पेस में सिर्फ़ ब्लॉक, बबल, और वर्कस्पेस में की गई टिप्पणियां रेंडर की जा सकती हैं.

कॉपी की जा सकने वाली सुविधा लागू करना

कॉपी किया जा सकने वाला ऑब्जेक्ट बनाने के लिए, आपको ICopyable, IDraggable, और IDeletable इंटरफ़ेस लागू करने होंगे. बाद के दो इंटरफ़ेस ज़रूरी हैं, ताकि चिपकाए गए ऑब्जेक्ट में बदलाव किया जा सके और उसे मिटाया जा सके.

चुना जा सकता है

ICopyable इंटरफ़ेस, ISelectable इंटरफ़ेस को बढ़ाता है. इसका मतलब है कि आपको उन तरीकों और प्रॉपर्टी को भी लागू करना होगा.

किसी ऑब्जेक्ट को चुना जा सकना ज़रूरी है, क्योंकि कीबोर्ड शॉर्टकट, चुने गए ऑब्जेक्ट को देखकर यह तय करते हैं कि क्या कॉपी करना है.

class MyCopyable implements ISelectable {
  constructor(workspace) {
    this.id = Blockly.utils.idGenerator.genUid();
    this.workspace = workspace;
  }

  select() {
    // Visually indicate this draggable is selected.
  }

  unselect() {
    // Visually indicate this draggable is not selected.
  }
}

कॉपी किया जा सकता है

ICopyable इंटरफ़ेस में सिर्फ़ एक ज़रूरी तरीका होता है, toCopyData. यह कॉपी किए जा सकने वाले ऑब्जेक्ट की स्थिति का JSON-सीरियलाइज़ेबल वर्शन दिखाता है. इसका इस्तेमाल, कॉपी किए जा सकने वाले ऑब्जेक्ट को फिर से बनाने के लिए किया जा सकता है.

कॉपी किए गए डेटा में paster प्रॉपर्टी भी शामिल होनी चाहिए. इसमें, चिपकाने वाले व्यक्ति से जुड़ा रजिस्टर किया गया स्ट्रिंग-नेम होता है. यह वही व्यक्ति होना चाहिए जिसे कॉपी किया गया डेटा चिपकाना है. पेस्टर के बारे में ज़्यादा जानकारी के लिए, पेस्टर लागू करना लेख पढ़ें.

class MyCopyable implements ICopyable {
  constructor(workspace, state) {
    this.workspace = workspace;
    this.myState = state;
  }

  toCopyData() {
    return {
      // This string matches the string used to register the paster.
      paster: 'MY_PASTER',
      state: this.myState,
    };
  }
}

ICopyable में एक वैकल्पिक तरीका, isCopyable भी होता है. इससे यह पता चलता है कि कोई ऑब्जेक्ट फ़िलहाल कॉपी किया जा सकता है या नहीं.

खींची और मिटाई जा सकती हैं

IDraggable और IDeletable को लागू करने के बारे में जानकारी पाने के लिए, कस्टम ड्रैग किए जा सकने वाले एलिमेंट लेख पढ़ें.

पेस्टर लागू करना

पेस्टर बनाने के लिए, आपको IPaster इंटरफ़ेस लागू करना होगा. इसमें सिर्फ़ एक तरीका paste होता है. यह उस चीज़ का डेटा कॉपी करता है जिसे चिपकाना है. साथ ही, यह उस वर्कस्पेस का डेटा कॉपी करता है जिसमें चीज़ को चिपकाना है. इसके अलावा, यह एक वैकल्पिक कोऑर्डिनेट का डेटा कॉपी करता है. यह वह जगह होती है जहां चीज़ को चिपकाना है.

class MyPaster implements IPaster {
  paste(copyData, workspace, coordinate) {
    return new MyCopyable(workspace, copyData.state);
    // Optionally position the copyable at the passed coordinate.
    // Optionally select the copyable after it is pasted.
  }
}

रजिस्ट्रेशन

पेस्टर को लागू करने के बाद, आपको इसे रजिस्टर करना होगा. इससे आपको किसी कॉपी किए गए डेटा से जुड़े पेस्टर को उसकी paster प्रॉपर्टी से ढूंढने में मदद मिलेगी.

// This string matches the string assigned to the 'paster' property.
Blockly.clipboard.registry.register('MY_PASTER', new MyPaster());