Kopyala ve yapıştır

Blockly, bloklar, çalışma alanı yorumları ve balonlar gibi yerleşik bileşenlerinin birçoğunda kopyalama, kesme ve yapıştırma işlemlerini destekler.

Varsayılan pano davranışı

Blockly Core, blokları, çalışma alanı yorumlarını ve ICopyable arayüzünü uygulayan diğer tüm bileşenleri kesmek, kopyalamak veya yapıştırmak için kullanılabilecek klavye kısayollarıyla birlikte gelir. Ayrıca, bir bloğu çoğaltmak için bağlam menüsü seçeneği de sunar. Bu varsayılan kısayolları ve menü öğelerini gerektiği gibi değiştirebilir veya kaldırabilirsiniz.

Varsayılan pano uygulamasında, kopyalanabilir nesneler yalnızca kopyalandıkları çalışma alanına veya bir açılır listeden kopyalandılarsa hedef çalışma alanına yapıştırılabilir. Bu nedenle, bir blok öğesini bir açılır listeden bu açılır listenin hedef çalışma alanına kopyalayabilirsiniz ancak bir blok öğesini bir ana çalışma alanından diğerine kopyalayamazsınız.

Çalışma alanları ve sekmeler arasında kopyalama ve yapıştırma

Kullanıcıların blokları bir çalışma alanından kopyalayıp başka bir çalışma alanına, hatta başka bir sekmede çalışan uygulamanızın bir kopyasındaki çalışma alanına yapıştırmasına izin vermek istiyorsanız @blockly/plugin-cross-tab-copy-paste eklentisini yükleyebilirsiniz.

Özel pano davranışı

Farklı bir davranış istiyorsanız Blockly ile birlikte gelen klavye kısayollarını kaldırıp farklı şekilde çalışan diğer kısayolları yükleyerek özel bir pano uygulayabilirsiniz. Bunu kolaylaştırmak için kopyalama, yapıştırma veya daha ayrıntılı kontrol (ör. bir nesnenin kopyalandığı çalışma alanını ayarlama) amacıyla Blockly.clipboard ad alanındaki yöntemleri kullanabilirsiniz.

Özel kopyalanabilir nesneler

Üç arayüz kullanılarak rastgele öğeler kopyalama/yapıştırma sistemiyle uyumlu hale getirilebilir: Kopyalanabilen nesneleri temsil etmek için ICopyable, kopyalanan nesneleri temsil etmek için ICopyData ve kopyalama verilerini tekrar kopyalanabilir nesnelere dönüştürebilen nesneleri temsil etmek için IPaster. Her ICopyable türü için bu verileri yapıştırabilecek ilişkili bir IPaster gerekir.

Karşılık gelen ICopyable ve IPaster olan tüm ICopyData nesneleri, varsayılan pano sistemiyle otomatik olarak çalışır.

Kopyalanabilir nesneler oluşturulduğu ve Blockly'ye yeni oluşturulmuş nesneler ekleyemediğiniz için özel bir kopyalanabilir veya özel bir yapıştırıcı (ör. çoklu seçim eklentisi) uygulamak isteyeceğiniz çok az durum vardır. Çalışma alanında yalnızca bloklar, balonlar ve çalışma alanı yorumları oluşturulabilir.

Kopyalanabilir öğe uygulama

Kopyalanabilir bir nesne oluşturmak için ICopyable arayüzünü uygulamanız gerekir.

Seçilebilir

ICopyable arayüzü, ISelectable arayüzünü genişletir. Bu nedenle, bu yöntemleri ve özellikleri de uygulamanız gerekir.

Klavye kısayolları, neyin kopyalanacağını belirlemek için seçili nesneye baktığından seçilebilir olması gerekir.

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.
  }
}

Kopyalanabilir

ICopyable arayüzünün kendisinde yalnızca bir yöntem vardır: toCopyData. Bu yöntem, kopyalanabilir nesnenin durumunun JSON olarak serileştirilebilir bir gösterimini döndürür. Bu gösterim, kopyalanabilir nesneyi yeniden oluşturmak için kullanılabilir.

Kopyalama verileri, bu kopyalama verilerini yapıştırması gereken yapıştırıcıyla ilişkili kayıtlı dize adını tutan bir paster özelliği de içermelidir. Paster'lar hakkında daha fazla bilgi için Paster uygulama başlıklı makaleyi inceleyin.

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,
    };
  }
}

Paster'ı uygulama

Paster oluşturmak için IPaster arayüzünü uygulamanız gerekir. Yalnızca bir yöntemi paste vardır. Bu yöntem, yapıştırdığı öğenin kopyalama verilerini, öğenin yapıştırılacağı çalışma alanını ve isteğe bağlı bir koordinatı (öğenin yapıştırılacağı konum) alır.

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.
  }
}

Kayıt

Bir yapıştırıcıyı uyguladıktan sonra, belirli bir kopyalama verileriyle ilişkili yapıştırıcıyı paster mülkünden bulabilmek için yapıştırıcıyı kaydetmeniz gerekir.

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