WorkspaceSvg class
הכיתה של סביבת העבודה. זהו אזור במסך עם אפשרויות כמו פח אשפה, סרגלי גלילה, בועות וגרירה.
Signature:
export declare class WorkspaceSvg extends Workspace implements IContextMenu, IFocusableNode, IFocusableTree
הארכה: Workspace
ממשקים: IContextMenu, IFocusableNode, IFocusableTree
יצרנים
| יצרן | גורמי שינוי | תיאור |
|---|---|---|
| (constructor)(options) | יוצר מופע חדש של המחלקה WorkspaceSvg |
מאפיינים
| נכס | גורמי שינוי | סוג | תיאור |
|---|---|---|---|
| configureContextMenu | ((menuOptions: ContextMenuOption[], e: Event) => void) | null | מפתחים יכולים להגדיר את הפונקציה הזו כדי להוסיף אפשרויות לתפריט ההקשר של סביבת העבודה או לערוך את קבוצת האפשרויות בתפריט שנוצרה בסביבת העבודה. | |
| keyboardAccessibilityMode | בוליאני | True אם מצב הנגישות של המקלדת מופעל, אחרת False. | |
| keyboardMoveInProgress | בוליאני | הערך יהיה True אם מתבצעת הזזה (גרירה) שהופעלה באמצעות המקלדת. | |
| rendered | בוליאני | סטטוס העיבוד של סביבת עבודה ב-SVG. מחזירה false עבור סביבות עבודה ללא ממשק משתמש ו-true עבור מקרים של WorkspaceSvg. |
|
| scale | number | הקנה מידה הנוכחי. | |
| scrollbar | ScrollbarPair | null | אם יש פסי גלילה בסביבת העבודה הזו. | |
| scrollX | number | ההיסט הנוכחי של הגלילה האופקית ביחידות פיקסל, ביחס לנקודת המוצא של סביבת העבודה. כדאי לחשוב על התצוגה כעל בד ציור שנע מתחת לתצוגה. ככל שהאזור המשותף זז ימינה, הערך הזה הופך לחיובי יותר, ועכשיו התצוגה 'רואה' את הצד השמאלי של האזור המשותף. ככל שהאזור לתצוגה זז שמאלה, הערך הזה הופך לשלילי יותר, ועכשיו התצוגה 'רואה' את הצד הימני של האזור לתצוגה. הערך הזה עלול לבלבל כי הוא לא כולל את ההיסט absoluteLeft, ואסור שהוא יכלול אותו. הסיבה לכך היא שהערך הזה משמש לחישוב הערך viewLeft. הערך של viewLeft הוא יחסי לנקודת המוצא של סביבת העבודה (אף על פי שהוא מוגדר ביחידות של פיקסלים). המקור של סביבת העבודה הוא הפינה הימנית העליונה של סביבת העבודה (לפחות כשהיא מופעלת). הוא מוזז מהפינה השמאלית העליונה של רכיב ה-BlocklyDiv כדי שלא יהיה מתחת לתיבת הכלים. כשהסביבת העבודה מופעלת, המיקום האופקי של viewLeft ושל מקור סביבת העבודה זהה. כשהאזור לעריכה מחליק ימינה מתחת לתצוגה, הערך הזה (scrollX) הופך לחיובי יותר, והערך viewLeft הופך לשלילי יותר ביחס לנקודת המוצא של סביבת העבודה (דמיינו את נקודת המוצא של סביבת העבודה כנקודה באזור לעריכה שמחליקה ימינה כשהאזור לעריכה זז). לכן, אם scrollX היה כולל את absoluteLeft, זה היה גורם לשינוי של נקודת ההתחלה של סביבת העבודה. המשמעות היא שהערך של viewLeft ייצג את הקצה השמאלי של רכיב ה-BlocklyDiv, ולא את הקצה השמאלי של סביבת העבודה. |
|
| scrollY | number | ההיסט הנוכחי של הגלילה האנכית ביחידות של פיקסלים, ביחס לנקודת המוצא של סביבת העבודה. כדאי לחשוב על התצוגה כעל בד ציור שנע מתחת לתצוגה. ככל שהאזור לתצוגה זז למטה, הערך הזה הופך לחיובי יותר, ועכשיו התצוגה 'רואה' את החלק העליון של האזור לתצוגה. ככל שהקנבס עולה למעלה, הערך הזה הופך לשלילי יותר, והתצוגה 'רואה' את החלק התחתון של הקנבס. הדבר המבלבל לגבי הערך הזה הוא שהוא לא כולל את ההיסט של absoluteTop, ואסור לו לכלול אותו. הסיבה לכך היא שהערך הזה משמש לחישוב הערך viewTop. הערך של viewTop הוא יחסי לנקודת המוצא של סביבת העבודה (למרות שהוא מוגדר ביחידות של פיקסלים). המקור של סביבת העבודה הוא הפינה הימנית העליונה של סביבת העבודה (לפחות כשהיא מופעלת). הוא מוזז מהפינה השמאלית העליונה של רכיב ה-BlocklyDiv כדי שלא יהיה מתחת לתיבת הכלים. כשהסביבה הווירטואלית מופעלת, המיקום האנכי של viewTop ושל מקור הסביבה הווירטואלית זהה. כשהאזור לתצוגה נע כלפי מטה, הערך הזה (scrollY) הופך לחיובי יותר, והערך viewTop הופך לשלילי יותר ביחס לנקודת ההתחלה של סביבת העבודה (התמונה בנקודת ההתחלה של סביבת העבודה היא נקודה באזור לתצוגה שנע כלפי מטה כשהאזור לתצוגה זז). לכן, אם scrollY היה כולל את absoluteTop, זה היה גורם לשינוי של מיקום המקור של סביבת העבודה. כלומר, viewTop ייצג את הקצה העליון של רכיב ה-BlocklyDiv, ולא את הקצה העליון של סביבת העבודה. |
|
| startScrollX | number | ערך הגלילה האופקית כשהגלילה התחילה ביחידות פיקסל. | |
| startScrollY | number | ערך הגלילה האנכית כשהגלילה התחילה, ביחידות פיקסל. | |
| svgBackground_ | SVGElement | ||
| svgBlockCanvas_ | SVGElement | ||
| svgBubbleCanvas_ | SVGElement | ||
| svgGroup_ | SVGElement | ||
| themeManager_ | protected |
ThemeManager | |
| פח אשפה | פח אשפה | null | פח האשפה של סביבת העבודה (אם יש). | |
| zoomControls_ | ZoomControls | null |
Methods
| שיטה | גורמי שינוי | תיאור |
|---|---|---|
| addClass(className) | הוספת מחלקת CSS לסביבת העבודה. | |
| addTopBlock(block) | הוספת בלוק לרשימת הבלוקים העליונים. | |
| addTopBoundedElement(element) | הוספת אלמנט עם גבול לרשימת האלמנטים העליונים עם גבול. | |
| addTopComment(comment) | הוספת תגובה לרשימת התגובות המובילות. | |
| canBeFocused() | ראו IFocusableNode.canBeFocused. | |
| centerOnBlock(id, blockOnly) | גוללים בסביבת העבודה כדי למרכז את הבלוק הנתון. אם יש בלוקים אחרים מתחת לבלוק שנבחר, מרחב העבודה יתמקד בבלוקים האלה, אלא אם blockOnly מוגדר כ-True. | |
| cleanUp() | כדי לסדר את סביבת העבודה, מסדרים את כל הבלוקים בעמודה כך שלא יהיו חפיפות ביניהם. | |
| clear() | הסרת כל הבלוקים בסביבת העבודה, עם אופטימיזציה למניעת שינוי גודל. | |
| copyOptionsForFlyout() | יוצרת קבוצה חדשה של אפשרויות מהאפשרויות של סביבת העבודה הזו, רק עם הערכים שרלוונטיים לתפריט נפתח. | |
| createDom(opt_backgroundClass, injectionDiv) | יוצרים את רכיבי ה-DOM של סביבת העבודה. | |
| dispose() | להיפטר מסביבת העבודה הזו. כדי למנוע דליפות זיכרון, צריך לבטל את הקישור מכל רכיבי ה-DOM. | |
| getAbsoluteScale() | הפונקציה מחזירה את קנה המידה המוחלט של סביבת העבודה. השינוי של גודל סביבת העבודה הוא כפלי. אם סביבת עבודה B (למשל, עורך מוטציות) עם גודל Y מוטמעת בסביבת עבודה A ברמה הבסיסית עם גודל X, הגודל האפקטיבי של סביבת העבודה B הוא X * Y, כי בתור צאצא של A, היא כבר עוברת שינוי על ידי גורם השינוי של A, ואז היא עוברת שינוי נוסף על ידי גורם השינוי שלה. בדרך כלל זה פשוט עובד, אבל כדי שהרכיבים הגלובליים (למשל, עורכי שדות) שמשויכים חזותית לסביבת עבודה מסוימת אבל נמצאים ברמה העליונה של ה-DOM ולא כרכיבי צאצא של סביבת העבודה המשויכת שלהם, יוצגו בצורה תקינה, יכול להיות שיהיה צורך בסקאלה מוחלטת או אפקטיבית. |
|
| getAllBlocks(ordered) | חיפוש כל הבלוקים בסביבת העבודה. אפשר למיין את הבלוקים לפי מיקום, מלמעלה למטה (עם הטיה קלה משמאל לימין או מימין לשמאל). | |
| getAudioManager() | קבלת את כלי ניהול האודיו של סביבת העבודה הזו. | |
| getBlockById(id) | מחפשים את החסימה ב-Workspace עם המזהה שצוין. | |
| getBlocksBoundingBox() | חישוב תיבת התוחמת של הבלוקים בסביבת העבודה. מערכת קואורדינטות: קואורדינטות של סביבת העבודה. | |
| getBubbleCanvas() | מקבלים את רכיב ה-SVG שיוצר את פני השטח של הבועה. | |
| getButtonCallback(key) | מקבלים את פונקציית הקריאה החוזרת שמשויכת למפתח נתון, לקליקים על לחצנים ותוויות בחלונית הנפתחת. | |
| getCanvas() | קבלת רכיב ה-SVG שמהווה את משטח השרטוט. | |
| getCommentById(id) | מחזירה את התגובה בסביבת העבודה עם המזהה הנתון, אם יש כזו. | |
| getComponentManager() | מחזירה את מנהל הרכיבים של סביבת העבודה הזו. | |
| getCursor() | הסמן של סביבת העבודה הזו. | |
| getDragTarget(e) | מחזירה את יעד הגרירה שהאירוע של מצביע העכבר נמצא מעליו. | |
| getFlyout(opt_own) | פונקציית Getter לחלונית הנפתחת שמשויכת לסביבת העבודה הזו. התפריט הנפתח הזה יכול להיות בבעלות ארגז הכלים או סביבת העבודה, בהתאם להגדרות ארגז הכלים. אם אין חלונית צדדית, הערך יהיה null. | |
| getFocusableElement() | מידע נוסף מופיע במאמר בנושא IFocusableNode.getFocusableElement. | |
| getFocusableTree() | מידע נוסף מופיע במאמר בנושא IFocusableNode.getFocusableTree. | |
| getGrid() | מחזירה את אובייקט הרשת של סביבת העבודה הזו, או null אם אין כזה. | |
| getInverseScreenCTM() | Getter ל-CTM של המסך ההפוך. | |
| getMarkerManager() | קבלת הכלי לניהול סמנים של סביבת העבודה הזו. | |
| getMetricsManager() | מחזירה את מנהל המדדים של סביבת העבודה הזו. | |
| getNavigator() | מחזירה אובייקט שאחראי על תיאום תנועת המיקוד בין הפריטים בסביבת העבודה הזו בתגובה לפקודות ניווט במקלדת. | |
| getNestedTrees() | ראו IFocusableTree.getNestedTrees. | |
| getParentSvg() | מקבלים את רכיב ה-SVG שמכיל את סביבת העבודה הזו. הערה: אנחנו מניחים שהפונקציה הזו מופעלת רק אחרי שה-workspace מוזרק ל-DOM. | |
| getRenderer() | מקבלים את רכיב ה-renderer של הבלוק שמצורף לסביבת העבודה הזו. | |
| getRestoredFocusableNode(previousNode) | מידע נוסף מופיע במאמר בנושא IFocusableTree.getRestoredFocusableNode. | |
| getRootFocusableNode() | ראו IFocusableTree.getRootFocusableNode. | |
| getRootWorkspace() | ||
| getScale() | קבלת גורם הזום של סביבת העבודה. | |
| getSvgGroup() | מחזירה את קבוצת ה-SVG של סביבת העבודה. | |
| getTheme() | קבלת אובייקט של ערכת הנושא של סביבת העבודה. | |
| getToolbox() | פונקציית Getter לארגז הכלים שמשויך לסביבת העבודה הזו, אם קיים כזה. | |
| getToolboxCategoryCallback(key) | מקבלים את פונקציית הקריאה החוזרת שמשויכת למפתח נתון, כדי לאכלס קטגוריות מותאמות אישית של ארגז הכלים בסביבת העבודה הזו. | |
| getTopBlocks(ordered) | הפונקציה מוצאת את הבלוקים ברמה העליונה ומחזירה אותם. אפשר למיין את הבלוקים לפי מיקום, מלמעלה למטה (עם הטיה קלה משמאל לימין או מימין לשמאל). | |
| getTopBoundedElements(ordered) | הפונקציה מוצאת את הרכיבים המוגבלים ברמה העליונה ומחזירה אותם. | |
| getTopComments(ordered) | מחזירה רשימה של תגובות בסביבת העבודה הזו. | |
| getWidth() | הפונקציה מחזירה את ההיסט האופקי של סביבת העבודה. מיועד לתאימות LTR/RTL ב-XML. | |
| hideChaff(onlyClosePopups) | סגירת הסברים קצרים, תפריטי הקשר, בחירות בתפריטים נפתחים וכו'. | |
| hideComponents(onlyClosePopups) | הסתרת רכיבים שאפשר להסתיר באופן אוטומטי (כמו תפריט נפתח, פח אשפה וכל רכיב שרשום על ידי המשתמש). | |
| highlightBlock(id, opt_state) | מדגישים בלוק בסביבת העבודה או מבטלים את ההדגשה שלו. הדגשת בלוקים משמשת לעיתים קרובות לסימון חזותי של בלוקים שנמצאים כרגע בביצוע. | |
| isDraggable() | האם אפשר לגרור את סביבת העבודה הזו? | |
| isDragging() | הפונקציה מחזירה True אם המשתמש מבצע כרגע תנועת גרירה, או אם מתבצעת תנועת הזזה שהופעלה באמצעות המקלדת. מחוות גרירה בדרך כלל כוללות הזזה של בלוק או פריט אחר בסביבת העבודה, או גלילה של התפריט הנפתח או סביבת העבודה. תנועות שמבוצעות באמצעות המקלדת מיושמות באמצעות תשתית הגרירה, והן נועדו לחקות (חלק מ)תנועות גרירה. לכן, בדרך כלל צריך להתייחס אליהן כאילו הן גרירה שמבוססת על תנועה. |
|
| isMovable() | האם אפשר להזיז את סביבת העבודה הזו? המשמעות היא שהמשתמש יכול לשנות את מיקום הקואורדינטות X ו-Y של סביבת העבודה באמצעות קלט. אפשר לעשות זאת באמצעות סרגלי גלילה, גלגל גלילה, גרירה או זום עם גלגל הגלילה או צביטה (כי הזום מתבצע במרכז המיקום של העכבר). ההגדרה הזו לא כוללת שינוי גודל באמצעות אמצעי הבקרה לשינוי גודל, כי קואורדינטות ה-X וה-Y נקבעות באופן אוטומטי. |
|
| isMovableHorizontally() | האם אפשר להזיז את סביבת העבודה הזו אופקית? | |
| isMovableVertically() | האם אפשר להזיז את סביבת העבודה הזו אנכית? | |
| isVisible() | Getter ל-isVisible | |
| lookUpFocusableNode(id) | ראו IFocusableTree.lookUpFocusableNode. | |
| markFocused() | סימון סביבת העבודה הזו כסביבת העבודה הראשית שמוצגת כרגע. | |
| moveDrag(e) | מעקב אחרי גרירה של אובייקט בסביבת העבודה הזו. | |
| newBlock(prototypeName, opt_id) | מקבלים בלוק חדש שנוצר. | |
| newComment(id) | קבלת תגובה חדשה שנוצרה. | |
| onNodeBlur() | מידע נוסף מופיע במאמר בנושא IFocusableNode.onNodeBlur. | |
| onNodeFocus() | ראו IFocusableNode.onNodeFocus. | |
| onTreeBlur(nextTree) | ראו IFocusableTree.onTreeBlur. | |
| onTreeFocus(_node, _previousTree) | מידע נוסף זמין במאמר בנושא IFocusableTree.onTreeFocus. | |
| recordDragTargets() | יוצרים רשימה של כל האזורים שבהם מתבצעת מחיקה במרחב העבודה הזה. | |
| refreshTheme() | אחרי עדכון של ערכת נושא, צריך לרענן את כל הבלוקים בסביבת העבודה. | |
| registerButtonCallback(key, func) | רושמים פונקציית קריאה חוזרת שמשויכת למקש נתון, לקליקים על לחצנים ותוויות בחלון הנפתח. לדוגמה, כפתור שצוין באמצעות קוד ה-XML צריך להיות תואם לקריאה ל-registerButtonCallback("CREATE_VARIABLE", yourCallbackFunction). | |
| registerToolboxCategoryCallback(key, func) | כאן אפשר לרשום פונקציית קריאה חוזרת שמשויכת למקש מסוים, כדי לאכלס קטגוריות מותאמות אישית של ארגז הכלים בסביבת העבודה הזו. לדוגמה, אפשר לראות את הקטגוריות של המשתנים והפרוצדורות. | |
| removeButtonCallback(key) | הסרת קריאה חוזרת לקליק על לחצן בתפריט הנפתח. | |
| removeClass(className) | הסרת מחלקה של CSS מסביבת העבודה. | |
| removeToolboxCategoryCallback(key) | הסרת פונקציית callback ללחיצה על שם של קטגוריה מותאמת אישית בארגז הכלים. | |
| removeTopBlock(block) | הסרת חסימה מרשימת החסימות העיקריות. | |
| removeTopBoundedElement(element) | מסירה רכיב עם גבול מהרשימה של הרכיבים העליונים עם גבול. | |
| removeTopComment(comment) | התגובה תוסר מרשימת התגובות המובילות. | |
| render() | עיבוד כל הבלוקים בסביבת העבודה. | |
| resize() | שינוי הגודל והמיקום של כל רכיבי ה-Chrome בסביבת העבודה (ארגז הכלים, הפח, סרגלי הגלילה וכו') צריך להפעיל את הפונקציה הזו כשמשהו משתנה וצריך לחשב מחדש את המידות והמיקומים של הפח, הזום, ארגז הכלים וכו' (למשל, שינוי גודל החלון). | |
| scroll(x, y) | גלילה של סביבת העבודה להיסט שצוין (בפיקסלים), תוך שמירה על הגבולות של סביבת העבודה. אפשר לקרוא פרטים נוספים על המשמעות של הערכים האלה בהערה על workspaceSvg.scrollX. | |
| scrollCenter() | ממרכזים את סביבת העבודה. | |
| setIsReadOnly(readOnly) | ||
| setNavigator(newNavigator) | ההגדרה הזו קובעת את מופע Navigator שבו נעשה שימוש בסביבת העבודה הזו. | |
| setResizeHandlerWrapper(handler) | שמירת נתונים של נקודות אחיזה לשינוי גודל כדי שנוכל למחוק אותם מאוחר יותר בפונקציה dispose. | |
| setResizesEnabled(enabled) | עדכון ההגדרה של שינוי הגודל בסביבת העבודה. אם ההגדרה תופעל, גודל סביבת העבודה ישתנה כשצריך. אם ההגדרה מושבתת, גודל סביבת העבודה לא ישתנה עד שתפעילו אותה מחדש. השימוש באפשרות הזו מונע שינוי גודל במהלך פעולת אצווה, לשיפור הביצועים. | |
| setScale(newScale) | מגדירים את מקדם הזום של סביבת העבודה. | |
| setTheme(theme) | הגדרת אובייקט העיצוב של סביבת העבודה. אם לא מועבר עיצוב, ברירת המחדל היא העיצוב Classic. |
|
| setVisible(isVisible) | הצגה או הסתרה של סביבת העבודה. בשלב הזה, התכונה מיועדת רק למרחב העבודה הראשי. | |
| startDrag(e, xy) | מתחילים לעקוב אחרי גרירה של אובייקט בסביבת העבודה הזו. | |
| translate(x, y) | תרגום סביבת העבודה הזו לקואורדינטות חדשות. | |
| updateInverseScreenCTM() | סימון מסך CTM הפוך כלא נקי. | |
| updateToolbox(toolboxDef) | משנים את עץ הבלוקים בארגז הכלים הקיים. | |
| zoom(x, y, amount) | מגדיל או מקטין את התצוגה של סביבת העבודה ביחס לקואורדינטות (x, y) שצוינו או ביחס למרכז שלהן. | |
| zoomCenter(type) | התקרבות או התרחקות מהבלוקים שממוקמים במרכז התצוגה. | |
| zoomToFit() | אם אפשר, מגדילים את התצוגה של הבלוקים כך שיתאימו לסביבת העבודה. |