צופים בתצוגה מקדימה של החיבור

כלי לתצוגה מקדימה של החיבור יוצר תצוגה מקדימה ויזואלית של חיבור בהמתנה. הוא מציין לאן תחובר בלוק הגרירה כשהוא נופל.

בתצוגה המקדימה של החיבור המוגדר כברירת מחדל, אפשר לחבר סמני הכנסה למקומות שבהם הבלוקים יתחברו. הוא גם מדגיש חיבורים ויוצר אפקט של עמעום על בלוקים שיוחלפו וינותקו.

סוגים של חיבורים בהמתנה

יש שני סוגים של חיבורים בהמתנה. במקרה אחד, הבלוק שנפל מחליף בלוק קיים והבלוק הקיים מנותק. במקרה השני, הבלוק שנוצל מוכנס בלי לנתק בלוקים אחרים.

החלפה

ההחלפה מתרחשת כשחיבור בבלוק שגורר מתחבר לחיבור שכבר יש לו בלוק, ואין מקום לצירוף מחדש של הבלוק הקיים. כשמשחררים את הבלוק שגוררים, הבלוק המוחלף ינותק והבלוק שגורר מחובר למקומו.

כברירת מחדל, אנו מציינים זאת על ידי הוספת אפקט עמעום על הבלוק שמחליפים.

החדרה

ההוספה מתרחשת בשני מקרים. זה קורה כשחיבור בבלוק שגורר עומד להתחבר לחיבור ריק. זה קורה כשחיבור בבלוק שגורר עובר לחיבור שכבר יש לו בלוק, אבל ניתן להכניס אותו בין שני הבלוקים הקיימים, וכך הבלוק הקיים לא ינותק.

כברירת מחדל, אנחנו מציינים זאת על ידי יצירת סמני הוספה והדגשת החיבורים שיתחברו.

יצירת תצוגה מקדימה בהתאמה אישית

אם אתם רוצים להשתמש ברכיבים חזותיים אחרים כדי לראות תצוגה מקדימה של חיבורים בהמתנה, אתם יכולים ליצור הטמעה מותאמת אישית של IConnectionPreviewer.

בנייה והשלכה

צריך להטמיע בנאי ושיטת סילוק עבור IConnectionPreviewer.

ה-constructor נקרא בכל פעם שמתחילה גרירה של בלוק, והוא מועבר לבלוק שגוררים. אם צריך לאתחל מצב כלשהו על בסיס הבלוק, אפשר לעשות זאת במבנים.

class MyConnectionPreviewer implements IConnectionPreviewer {
  constructor(draggedBlock: Blockly.BlockSvg) {
    // Initialize state here.
  }
}

מתבצעת קריאה לשיטה dispose בכל פעם שמסתיימת גרירת בלוק. אם אתם צריכים לדחות מצב כלשהו כשהמכונה של IConnectionPreviewer נשלכת, כדאי לעשות זאת כאן.

dispose() {
  // Dispose of and dereference any state.
}

יצירת התצוגה המקדימה

השדה IConnectionPreviewer צריך להטמיע לוגיקה לתצוגה מקדימה ויזואלית של החיבורים.

החלפה

כדי לראות תצוגה מקדימה של ההחלפות, צריך להטמיע את השיטה previewReplacement.

previewReplacement(draggedConn, staticConn, replacedBlock) {
  // Visually indicate that the replacedBlock will be disconnected, and the
  // draggedConn will be connected to the staticConn.
}

החדרה

כדי לראות תצוגה מקדימה של הוספות, יש להטמיע את השיטה previewConnection.

previewConnection(draggedConn, staticConn) {
  // Visually indicate the draggedConn will be connected to the staticConn.
}

כדי לראות תצוגה מקדימה אחרת כאשר הבלוק שנגרר מחובר לקלט ריק או אם הוא מועבר בין בלוקים, ניתן לבדוק אם ה-staticConn מחובר כרגע לחיבור אחר. אם staticConn מחובר כרגע, ה-draggedConn מוכנס בין הבלוקים.

previewConnection(draggedConn, staticConn) {
  if (staticConn.targetConnection) {
    // The dragged block is being inserted between blocks.
  } else {
    // The dragged block is connecting to an empty input.
  }
}

תצוגות מקדימות של שירותי CSS

אפשר להציג תצוגה מקדימה של החיבורים על ידי החלת CSS על החסימה. לדוגמה, ברירת המחדל של עמעום ההחלפה (fade) שמוגדר כברירת מחדל, מוחלפת על ידי הוספת המחלקה blocklyReplaceable של CSS לבלוק.

previewReplacement(draggedConn, staticConn, replacedBlock) {
  Blockly.utils.dom.addClass(replacedblock.getSvgRoot(), 'my-custom-class');
}

תצוגות מקדימות של כלי הרינדור

כדי לראות תצוגה מקדימה של החיבורים אפשר להטמיע כלי לעיבוד מותאם אישית עם קטעי הוק (hooks) מיוחדים לתצוגה מקדימה.

previewReplacement(draggedConn, staticConn, replacedBlock) {
  const renderer = replacedBlock.workspace.getRenderer()
  if (renderer.addReplacementIndicator) {
    renderer.addReplacementIndicator(replacedBlock);
  }
}

הסתרת התצוגה המקדימה

צריך לאפשר ל-IConnectionPreviewer להסתיר תצוגות מקדימות. אפשר לקרוא לפונקציה הזו כשהבלוק שגוררים נמצא מחוץ לטווח של כל החיבורים, כך שלא תוצג תצוגה מקדימה. היא גם מופעלת ממש לפני סגירת התצוגה המקדימה.

hidePreview() {
  // Remove CSS classes, toggle renderer methods, etc.
}

רישום ושימוש

לבסוף, אחרי שתסיימו ליצור את IConnectionPreviewer, תצטרכו לרשום אותו. הפעולה הזו משייכת את כלי הרינדור למחרוזת, כדי שתוכלו להעביר אותה לתצורת ההזרקה. אתם יכולים גם להעביר את המחלקה IConnectionPreviewer (כלומר, constructor) ישירות אל הגדרות ההזרקה.

Blockly.registry.register(
  Blockly.registry.Type.CONNECTION_PREVIEWER,
  'MyConnectionPreviewer',
  MyConnectionPreviewer,
);

// You can use the string.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: 'myConnectionPreviewer',
  },
};

// Or you can pass the class / constructor directly.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: MyConnectionPreviewer,
  },
};

מידע נוסף על הרישום זמין במאמר הוספת מחלקות משנה.