یک نوع نماد جدید ایجاد کنید

برای ایجاد یک نماد سفارشی باید رابط IIcon را پیاده سازی کنید. این به Blockly می‌گوید که می‌خواهید نماد شما چگونه رندر شود، اگر روی آن کلیک شود چه کاری انجام دهد و غیره.

ما توصیه می کنیم کلاس انتزاعی Icon را زیر کلاس بندی کنید، زیرا از قبل پیاده سازی های پیش فرض بسیاری از روش ها را در رابط IIcon ارائه می دهد.

class MyIcon extends Blockly.icons.Icon {
  // The constructor should always take in the source block so that svg elements
  // can be properly created.
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

نوع آیکون را مشخص کنید

متد getType مقداری را برمی گرداند که نشان دهنده نوع نماد است. برای ثبت نماد برای سریال سازی و بازیابی نماد از getIcon استفاده می شود.

جاوا اسکریپت

  getType() {
    return new Blockly.icons.IconType('my_icon');
  }

TypeScript

  getType(): Blockly.icons.IconType<MyIcon> {
    return new Blockly.icons.IconType<MyIcon>('my_icon');
  }

نمای نماد را ایجاد کنید

نمای نماد به عناصر SVG اشاره دارد که در بلوک زندگی می کنند.

نمای را اولیه کنید

روش initView جایی است که شما عناصر SVG آیکون خود را که در بلوک قرار دارند ایجاد می کنید. عناصر جدید باید فرزندان عنصر this.svgRoot باشند تا زمانی که نماد از بین رفت، به طور خودکار پاک شوند.

ماژول Blockly.utils.dom یک رابط تمیز برای نمونه سازی SVG ها ارائه می دهد.

initView(pointerdownListener) {
  if (this.svgRoot) return;  // Already initialized.

  // This adds the pointerdownListener to the svgRoot element.
  // If you do not call `super` you must do this yourself.
  super.initView(pointerdownListener);

  Blockly.utils.dom.createSvgElement(
    Blockly.utils.Svg.CIRCLE,
    {
      'class': 'my-css-class',
      'r': '8',
      'cx': '8',
      'cy': '8',
    },
    this.svgRoot  // Append to the svgRoot.
  );
}

اندازه را برگردانید

متد getSize اندازه نماد را برمی‌گرداند تا رندرکننده بتواند بلوک را به اندازه کافی پهن کند.

اندازه در "واحدهای فضای کاری" دلخواه است (که با تغییر مقیاس فضای کاری تغییر نمی کند).

getSize() {
  return new Blockly.utils.Size(16, 16);
}

ترتیب را تنظیم کنید

آیکون ها دارای نظم ایستا در داخل بلوک هستند. به عنوان مثال، نمادهای mutator داخلی همیشه در جلوی نمادهای نظرات نشان داده می شوند که در مقابل نمادهای هشدار نشان داده می شوند.

ترتیب با مقدار بازگردانده شده توسط روش getWeight کنترل می شود. نمادهایی با وزن مثبت بیشتر پس از نمادهایی با وزن مثبت کمتر ارائه می شوند.

getWeight() {
  return 10;
}

توجه: وزن فقط زمانی بررسی می شود که نماد به بلوک اضافه شود، بنابراین وزن های پویا پشتیبانی نمی شوند.

رفتار onclick را پیاده سازی کنید

بسیاری از نمادها تعاملی هستند و زمانی که روی آنها کلیک می شود کاری انجام می دهند. به عنوان مثال، آیکون های ساخته شده در هنگام کلیک کردن، همگی یک حباب نشان می دهند. برای پیاده سازی می توانید از روش onClick استفاده کنید.

onClick() {
  // Do something when clicked.
}

به تغییرات بلوک پاسخ دهید

برخی از نمادها همچنین می‌خواهند به تغییرات بلوک، به‌ویژه تغییرات ویرایش‌پذیری و فروپاشی پاسخ دهند.

قابلیت ویرایش

اگر آیکون شما بسته به اینکه بلوک قابل ویرایش است یا نه باید رفتار متفاوتی داشته باشد (مثلاً وقتی بلوک قابل ویرایش نیست قابل کلیک نیست)، روش updateEditable را اجرا کنید. هنگامی که وضعیت قابل ویرایش بلوک تغییر می کند، این روش به طور خودکار فراخوانی می شود.

updateEditable() {
  if (this.sourceBlock.isEditable()) {
    // Do editable things.
  } else {
    // Do non-editable things.
  }
}

فروپاشی

برخی از نمادها زمانی که بلوک جمع می شود نشان داده می شوند، اما به طور پیش فرض اینگونه نیستند. اگر می‌خواهید نماد شما نشان داده شود، روش isShownWhenCollapsed را لغو کنید تا true برگردانید.

isShownWhenCollapsed() {
  return true;
}

و سپس متد updateCollapsed را لغو کنید.

updateCollapsed() {
  // By default icons are hidden when the block is collapsed. We want it to
  // be shown, so do nothing.
}

نماد را دور بریزید

نمادها باید هر عنصر dom یا مرجع خارجی را هنگام دور ریختن پاک کنند. به‌طور پیش‌فرض، هر چیزی که به this.svgRoot اضافه می‌شود از بین می‌رود، اما سایر مراجع باید به صورت دستی پاک شوند. این باید در روش dispose انجام شود.

dispose() {
  // Always call super!
  super.dispose();

  this.myBubble?.dispose();
  this.myOtherReference?.dispose();
}