कस्टम प्रोसेस ब्लॉक बनाएं

कस्टम प्रोसेस ब्लॉक बनाने के लिए, आपको:

1. @blockly/block-shareable-procedures इंस्टॉल करें प्लगिन, जैसा कि इस्तेमाल की प्रोसेस में बताया गया है पेज पर जाएं.
2. JSON को क्रम से लगाने वाले सिस्टम का इस्तेमाल करें. इसके बारे में, खास जानकारी में बताया गया है पेज पर जाएं.

ध्यान दें: अगर आपने लेगसी प्रोसेस के साथ काम करने के लिए, कस्टम प्रोसेस ब्लॉक तय किए हैं सिस्टम (@blockly/block-shareable-procedures से पहले उपलब्ध है) आप उन्हें अपग्रेड करके @blockly/block-shareable-procedures ब्लॉक करने के लिए, इन्हें फ़ॉलो करें उसके बाद, कौनसे चरणों को पूरा किया जा सकता है.

फ़ाइल फ़ोल्डर में डेटा मॉडल जोड़ना

प्रोसेस की परिभाषा और प्रोसेस कॉलर, दोनों में ही बैकिंग डेटा का रेफ़रंस मिलता है जो प्रोसेस के सिग्नेचर (नाम, पैरामीटर, और रिटर्न). यह आपके ऐप्लिकेशन को डिज़ाइन करने के तरीके को और ज़्यादा आसान बनाता है (उदाहरण के लिए, तो आप प्रक्रियाओं को एक फ़ाइल फ़ोल्डर में परिभाषित करने और उसका संदर्भ देने की अनुमति दे सकते हैं अन्य).

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

@blockly/block-shareable-procedures यह ऐसा करता है जिनमें प्रोसेस-डेफ़िनिशन ब्लॉक होने की वजह से, डाइनैमिक तरीके से बैकिंग डेटा मॉडल बनाए जाते हैं जब वे फ़ाइल फ़ोल्डर में इंस्टैंशिएट हो जाते हैं. इसे खुद लागू करने के लिए, आपको init में मॉडल बनाएं और destroy में जाकर इसे मिटाएं.

import {ObservableProcedureModel} from '@blockly/block-shareable-procedures';

Blockly.Blocks['my_procedure_def'] = {
  init: function() {
    this.model = new ObservableProcedureModel('default name');
    this.workspace.getProcedureMap().add(model);
    // etc...
  }

  destroy: function() {
    // (Optionally) Destroy the model when the definition block is deleted.

    // Insertion markers reference the model of the original block.
    if (this.isInsertionMarker()) return;
    this.workpace.getProcedureMap().delete(model.getId());
  }
}

ब्लॉक के बारे में जानकारी दिखाएं

आपकी प्रक्रिया की परिभाषा और प्रक्रिया कॉल ब्लॉक को getProcedureModel, isProcedureDef, और getVarModels तरीके. ये हैं हुक Blockly कोड का इस्तेमाल करके, आपकी प्रोसेस के ब्लॉक के बारे में जानकारी हासिल करता है.

Blockly.Blocks['my_procedure_def'] = {
  getProcedureModel() {
    return this.model;
  },

  isProcedureDef() {
    return true;
  },

  getVarModels() {
    // If your procedure references variables
    // then you should return those models here.
    return [];
  },
};

Blockly.Blocks['my_procedure_call'] = {
  getProcedureModel() {
    return this.model;
  },

  isProcedureDef() {
    return false;
  },

  getVarModels() {
    // If your procedure references variables
    // then you should return those models here.
    return [];
  },
};

अपडेट को फिर से रेंडर करना ट्रिगर करें

आपकी प्रक्रिया की परिभाषा और प्रक्रिया कॉल ब्लॉक को doProcedureUpdate तरीका. डेटा मॉडल आपकी ओर से खुद को फिर से रेंडर करने के लिए प्रोसेस ब्लॉक करती हैं.

Blockly.Blocks['my_procedure_def'] = {
  doProcedureUpdate() {
    this.setFieldValue('NAME', this.model.getName());
    this.setFieldValue(
        'PARAMS',
        this.model.getParameters()
            .map((p) => p.getName())
            .join(','));
    this.setFieldValue(
        'RETURN', this.model.getReturnTypes().join(',');
  }
};

Blockly.Blocks['my_procedure_call'] = {
  doProcedureUpdate() {
    // Similar to the def block above...
  }
};

पसंद के मुताबिक क्रम से लगाने की सुविधा जोड़ें

प्रोसेस ब्लॉक के लिए सीरियलाइज़ेशन को दो अलग-अलग काम करने होंगे.

1. JSON से लोड करते समय, आपके ब्लॉक को बैकिंग डेटा मॉडल की पहचान कर सकते हैं, क्योंकि ब्लॉक और मॉडल अलग-अलग क्रम में लगाए जाते हैं.
2. प्रक्रिया ब्लॉक को कॉपी करके चिपकाते समय, ब्लॉक को सीरियल के लिए डालना होगा उसके प्रोसेस मॉडल की पूरी स्थिति को प्रोसेस करना ज़रूरी है, ताकि इसकी कॉपी बनाई जा सके.

ये दोनों चीज़ें saveExtraState और loadExtraState की मदद से मैनेज की जाती हैं. ध्यान दें कि कस्टम प्रोसेस ब्लॉक सिर्फ़ JSON का इस्तेमाल करते समय काम करते हैं सीरियलाइज़ेशन सिस्टम की पुष्टि करें, इसलिए हमें सिर्फ़ JSON को क्रम से लगाने वाले हुक तय करने होंगे.

import {
    ObservableProcedureModel,
    ObservableParameterModel,
    isProcedureBlock
} from '@blockly/block-shareable-procedures';

Blockly.Blocks['my_procedure_def'] = {
  // When doFullSerialization is true, we should serialize the full state of
  // the model.
  saveExtraState(doFullSerialization) {
    const state = Object.create(null);
    state['procedureId']: this.model.getId();

    if (doFullSerialization) {
      state['name'] = this.model.getName();
      state['parameters'] = this.model.getParameters().map((p) => {
        return {name: p.getName(), p.getId()};
      });
      state['returnTypes'] = this.model.getReturnTypes();

      // Flag for deserialization.
      state['createNewModel'] = true;
    }

    return state;
  },

  loadExtraState(state) {
    const id = state['procedureId']
    const map = this.workspace.getProcedureMap();

    if (map.has(id) && !state['createNewModel']) {
      // Delete the existing model (created in init).
      map.delete(this.model.getId());
      // Grab a reference to the model we're supposed to reference.
      this.model = map.get(id);
      this.doProcedureUpdate();
      return;
    }

    // There is no existing procedure model (we are likely pasting), so
    // generate it from JSON.
    this.model
        .setName(state['name'])
        .setReturnTypes(state['returnTypes']);
    for (const [i, param] of state['parameters'].entries()) {
      this.model.insertParameter(
          i,
          new ObservableParameterModel(
              this.workspace, param['name'], param['id']));
    }
    this.doProcedureUpdate();
  },
};

Blockly.Blocks['my_procedure_call'] = {
  saveExtraState() {
    return {
      'procedureId': this.model.getId(),
    };
  },

  loadExtraState(state) {
    // Delete our existing model (created in init).
    this.workspace.getProcedureMap().delete(model.getId());
    // Grab a reference to the new model.
    this.model = this.workspace.getProcedureMap()
        .get(state['procedureId']);
    if (this.model) this.doProcedureUpdate();
  },

  // Handle pasting after the procedure definition has been deleted.
  onchange(event) {
    if (event.type === Blockly.Events.BLOCK_CREATE &&
        event.blockId === this.id) {
      if(!this.model) { // Our procedure definition doesn't exist =(
        this.dispose();
      }
    }
  }
};

विकल्प के तौर पर, प्रोसेस मॉडल में बदलाव करें

साथ ही, उपयोगकर्ताओं के लिए प्रोसेस मॉडल में बदलाव करने की सुविधा भी जोड़ी जा सकती है. कॉल से जुड़ी सुविधा insertParameter, deleteParameter या setReturnTypes तरीके आपकी अनुमति के ब्लॉक को फिर से रेंडर करने के लिए, उन्हें अपने-आप ट्रिगर कर दिया जाएगा. ऐसा doProcedureUpdate के ज़रिए किया जाएगा.

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

टूलबॉक्स में ब्लॉक जोड़ें

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

const proceduresFlyoutCallback = function(workspace) {
  const blockList = [];
  blockList.push({
    'kind': 'block',
    'type': 'my_procedure_def',
  });
  for (const model of
        workspace.getProcedureMap().getProcedures()) {
    blockList.push({
      'kind': 'block',
      'type': 'my_procedure_call',
      'extraState': {
        'procedureId': model.getId(),
      },
    });
  }
  return blockList;
};

myWorkspace.registerToolboxCategoryCallback(
    'MY_PROCEDURES', proceduresFlyoutCallback);