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

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

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

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

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

החלפה

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

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

החדרה

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

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

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

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

בנייה והשלכה

תצטרכו להטמיע constructor ושיטת סילוק IConnectionPreviewer

מתבצעת קריאה ל-constructor בכל פעם שמתחילה גרירה של בלוק, ומעבירה אותו של בלוק שגוררים. אם צריך לאתחל מצב כלשהו שמבוסס על אפשר לעשות את זה ב-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 על הבלוק. לדוגמה, האפשרות 'עמעום ההחלפה' שמוגדרת כברירת מחדל מוחלפת על ידי הוספת מחלקה של CSS blocklyReplaceable לבלוק.

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

ניתן למצוא מידע נוסף על רישום בכתובת החדרת כיתות משנה.