إنشاء مجموعات إجراءات مخصّصة

يتطلب إنشاء مجموعات الإجراءات المخصّصة ما يلي:

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.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 على تطبيق 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);