blockly > WorkspaceSvg

کلاس WorkspaceSvg

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

امضا:

export declare class WorkspaceSvg extends Workspace implements IContextMenu, IFocusableNode, IFocusableTree 

گسترش می دهد: فضای کاری

پیاده سازی: IContextMenu IFocusableNode IFocusableTree

سازندگان

سازنده اصلاح کننده ها توضیحات
(سازنده) (گزینه ها) یک نمونه جدید از کلاس WorkspaceSvg می سازد

خواص

اموال اصلاح کننده ها تایپ کنید توضیحات
configureContextMenu ((گزینه های منو: ContextMenuOption[]، e: رویداد) => void) | تهی توسعه دهندگان ممکن است این عملکرد را برای اضافه کردن گزینه های منوی سفارشی به منوی زمینه فضای کاری یا ویرایش مجموعه ای از گزینه های منو ایجاد شده توسط فضای کاری تعریف کنند.
حالت دسترسی به صفحه کلید بولی اگر حالت دسترسی به صفحه کلید روشن باشد درست است، در غیر این صورت نادرست است.
keyboardMoveInProgress بولی درست است اگر یک حرکت آغاز شده با صفحه کلید ("کشیدن") در حال انجام باشد.
ارائه شده است بولی وضعیت رندر یک فضای کاری SVG. برای فضاهای کاری بدون سر، false و برای نمونه‌هایی از WorkspaceSvg درست است.
مقیاس شماره مقیاس فعلی.
نوار پیمایش ScrollbarPair | تهی نوارهای پیمایش این فضای کاری، در صورت وجود.
scrollX شماره

پیمایش افقی فعلی در واحدهای پیکسل، نسبت به مبدأ فضای کاری جابه‌جا می‌شود.

فکر کردن به یک منظره و یک بوم که در زیر آن منظره حرکت می کند مفید است. همانطور که بوم به سمت راست حرکت می کند، این مقدار مثبت تر می شود و نمای اکنون سمت چپ بوم را "دیدن" می کند. همانطور که بوم به سمت چپ حرکت می کند، این مقدار منفی تر می شود و نما اکنون سمت راست بوم را "دیدن" می کند.

نکته گیج کننده در مورد این مقدار این است که شامل offset absoluteLeft نیست و نباید باشد. این به این دلیل است که برای محاسبه مقدار viewLeft استفاده می شود.

viewLeft نسبت به مبدا فضای کاری است (اگرچه در واحد پیکسل). مبدا فضای کاری گوشه سمت چپ بالای فضای کاری است (حداقل زمانی که فعال باشد). از سمت چپ بالای blocklyDiv جابجا می شود تا زیر جعبه ابزار قرار نگیرد.

هنگامی که فضای کاری فعال است، viewLeft و مبدا فضای کاری در یک مکان X هستند. با لغزش بوم به سمت راست در زیر نما، این مقدار (scrollX) مثبت‌تر می‌شود و viewLeft نسبت به مبدا فضای کاری منفی‌تر می‌شود (تصور کنید مبدأ فضای کاری به صورت نقطه‌ای روی بوم با حرکت بوم به سمت راست می‌لغزد).

بنابراین اگر scrollX بخواهد absolutLeft را شامل شود، به نوعی مبدا فضای کاری را تغییر می دهد. این بدان معنی است که viewLeft به جای لبه سمت چپ فضای کاری، لبه سمت چپ blocklyDiv را نشان می دهد.

پیمایش کنید شماره

پیمایش عمودی فعلی در واحدهای پیکسل، نسبت به مبدأ فضای کاری جابه‌جا می‌شود.

فکر کردن به یک منظره و یک بوم که در زیر آن منظره حرکت می کند مفید است. همانطور که بوم به سمت پایین حرکت می کند، این مقدار مثبت تر می شود و نمای اکنون قسمت بالایی بوم را "دیدن" می کند. با بالا رفتن بوم، این مقدار منفی تر می شود و نمای قسمت پایینی بوم را "دیدن" می کند.

نکته گیج کننده در مورد این مقدار این است که این مقدار را شامل نمی شود و نباید offset absoluteTop را شامل شود. این به این دلیل است که برای محاسبه مقدار viewTop استفاده می شود.

ViewTop نسبت به مبدا فضای کاری است (البته در واحد پیکسل). مبدا فضای کاری گوشه سمت چپ بالای فضای کاری است (حداقل زمانی که فعال باشد). از سمت چپ بالای blocklyDiv جابجا می شود تا زیر جعبه ابزار قرار نگیرد.

وقتی فضای کاری فعال است، viewTop و مبدا فضای کاری در یک مکان Y هستند. با لغزش بوم به سمت پایین، این مقدار (scrollY) مثبت‌تر می‌شود و viewTop نسبت به مبدا فضای کاری منفی‌تر می‌شود (تصویر در مبدا فضای کار به صورت نقطه‌ای روی بوم که با حرکت بوم به سمت پایین می‌لغزد).

بنابراین، اگر ScrollY شامل AbsoluteTop باشد، به نوعی مبدا فضای کاری را تغییر می دهد. این بدان معنی است که viewTop به جای لبه بالای فضای کاری، لبه بالایی blocklyDiv را نشان می دهد.

startScrollX شماره مقدار اسکرول افقی هنگام شروع پیمایش در واحد پیکسل.
startScrollY شماره مقدار پیمایش عمودی هنگام شروع پیمایش در واحدهای پیکسل.
svgBackground_ SVGElement
svgBlockCanvas_ SVGElement
svgBubbleCanvas_ SVGElement
svgGroup_ SVGElement
themeManager_ protected مدیریت تم
سطل زباله سطل زباله | تهی سطل زباله فضای کار (در صورت وجود).
zoomControls_ ZoomControls | تهی

روش ها

روش اصلاح کننده ها توضیحات
addClass(classname) یک کلاس CSS به فضای کاری اضافه می کند.
addTopBlock(block) یک بلوک را به لیست بلوک های برتر اضافه می کند.
addTopBoundedElement(عنصر) یک عنصر محدود را به لیست عناصر محدود بالا اضافه می کند.
addTopComment (نظر) یک نظر به لیست نظرات برتر اضافه می کند.
canBeFocused() IFocusableNode.canBeFocused را ببینید.
centerOnBlock (ID, blockOnly) فضای کاری را به مرکز بلوک داده شده اسکرول کنید. اگر بلوک دارای بلوک های دیگری در زیر آن باشد، فضای کاری روی پشته متمرکز می شود، مگر اینکه blockOnly درست باشد.
پاکسازی () با مرتب کردن تمام بلوک‌ها در یک ستون، فضای کاری را تمیز کنید تا هیچ کدام روی هم قرار نگیرند.
واضح () با بهینه سازی برای جلوگیری از تغییر اندازه، تمام بلوک ها را در فضای کاری دور بریزید.
copyOptionsForFlyout() مجموعه جدیدی از گزینه‌ها را از گزینه‌های این فضای کاری فقط با مقادیری که به یک پرواز مرتبط هستند ایجاد می‌کند.
createDom(opt_backgroundClass، injectionDiv) عناصر DOM فضای کاری را ایجاد کنید.
در معرض قرار دادن() این فضای کاری را دور بریزید. برای جلوگیری از نشت حافظه، همه عناصر DOM را قطع کنید.
getAbsoluteScale()

مقیاس مطلق فضای کاری را برمی گرداند.

مقیاس بندی فضای کاری ضربی است. اگر یک فضای کاری B (مثلاً یک ویرایشگر جهش‌یافته) با مقیاس Y در داخل یک فضای کاری ریشه A با مقیاس X تودرتو باشد، مقیاس مؤثر فضای کاری B X *Y است، زیرا، به عنوان فرزند A، قبلاً توسط ضریب مقیاس‌گذاری A تغییر شکل می‌دهد و سپس خود را بیشتر با ضریب مقیاس‌پذیری خود تغییر می‌دهد. معمولاً این فقط کار می‌کند، اما برای عناصر سراسری (مثلاً ویرایشگرهای فیلد) که از نظر بصری با یک فضای کاری خاص مرتبط هستند اما به جای اینکه فرزند فضای کاری مرتبط با آنها باشند در سطح بالای DOM زندگی می‌کنند، ممکن است مقیاس مطلق/موثر برای ارائه مناسب مورد نیاز باشد.

getAllBlocks (سفارش شده) همه بلوک ها را در فضای کاری پیدا کنید. بلوک ها به صورت اختیاری بر اساس موقعیت مرتب می شوند. از بالا به پایین (با کمی تعصب LTR یا RTL).
getAudioManager() مدیر صوتی این فضای کاری را دریافت کنید.
getBlockById(id) بلوک را در این فضای کاری با شناسه مشخص شده پیدا کنید.
getBlocksBoundingBox() کادر محدود کننده بلوک های فضای کاری را محاسبه کنید. سیستم مختصات: مختصات فضای کاری.
getBubbleCanvas() عنصر SVG را که سطح حباب را تشکیل می دهد، دریافت کنید.
getButtonCallback (کلید) برای کلیک بر روی دکمه‌ها و برچسب‌ها، تابع تماس مرتبط با یک کلید مشخص را دریافت کنید.
getCanvas() عنصر SVG را که سطح طراحی را تشکیل می دهد، دریافت کنید.
getComponentManager() مدیر مؤلفه این فضای کاری را دریافت می کند.
getCursor() مکان نما برای این فضای کاری.
getDragTarget(e) هدف کشیدن را برمی‌گرداند که رویداد نشانگر به پایان رسیده است.
getFlyout (opt_own) دریافت کننده برای پرواز مرتبط با این فضای کاری. بسته به پیکربندی جعبه ابزار ممکن است متعلق به جعبه ابزار یا فضای کاری باشد. در صورت عدم وجود پرواز باطل خواهد بود.
getFocusableElement() به IFocusableNode.getFocusableElement مراجعه کنید.
getFocusableTree() به IFocusableNode.getFocusableTree مراجعه کنید.
getGrid() شی grid را برای این فضای کاری دریافت کنید یا اگر وجود ندارد، آن را خالی کنید.
getInverseScreenCTM() دریافت کننده برای CTM صفحه معکوس.
getMarkerManager() مدیر نشانگر را برای این فضای کاری دریافت کنید.
getMetricsManager() مدیر معیارهای این فضای کاری را دریافت می کند.
getNavigator() یک شی را که مسئول هماهنگی حرکت فوکوس بین موارد در این فضای کاری در پاسخ به دستورات پیمایش صفحه کلید است، برمی‌گرداند.
getNestedTrees() به IFocusableTree.getNestedTrees مراجعه کنید.
getParentSvg() عنصر SVG را دریافت کنید که حاوی این فضای کاری است. توجه: ما فرض می کنیم که این فقط پس از تزریق فضای کاری به DOM فراخوانی می شود.
getRenderer() رندر بلوک متصل به این فضای کاری را دریافت کنید.
getRestoredFocusableNode (گره قبلی) به IFocusableTree.getRestoredFocusableNode مراجعه کنید.
getRootFocusableNode() به IFocusableTree.getRootFocusableNode مراجعه کنید.
getRootWorkspace()
getScale() فاکتور بزرگنمایی فضای کاری را دریافت کنید.
getSvgGroup() گروه SVG را برای فضای کاری برمی گرداند.
getTheme() شی موضوع فضای کاری را دریافت کنید.
getToolbox() در صورت وجود، جعبه ابزار مرتبط با این فضای کاری را دریافت کنید.
getToolboxCategoryCallback (کلید) برای پر کردن دسته‌های جعبه ابزار سفارشی در این فضای کاری، تابع پاسخ به تماس مرتبط با یک کلید مشخص را دریافت کنید.
getTopBlocks (سفارش شده) بلوک های سطح بالا را پیدا کرده و آنها را برمی گرداند. بلوک ها به صورت اختیاری بر اساس موقعیت مرتب می شوند. از بالا به پایین (با کمی تعصب LTR یا RTL).
getTopBoundedElements() عناصر محدود شده سطح بالا را پیدا کرده و آنها را برمی گرداند.
getWidth() افست افقی فضای کاری را برمی گرداند. برای سازگاری LTR/RTL در XML در نظر گرفته شده است.
hideChaff (فقط ClosePopups) نکات ابزار، منوهای زمینه، انتخاب های کشویی و غیره را ببندید.
hideComponents (فقطClosePopups) هر مؤلفه‌ای که به‌طور خودکار پنهان می‌شوند (مانند flyout، trashcan و هر مؤلفه‌ای که کاربر ثبت کرده است) را پنهان کنید.
highlightBlock(id, opt_state) یک بلوک در فضای کاری را برجسته یا حذف کنید. برجسته سازی بلوک اغلب برای علامت گذاری بصری بلوک هایی که در حال حاضر اجرا می شوند استفاده می شود.
isDraggable() آیا این فضای کاری قابل کشیدن است؟
isDragging()

اگر کاربر در حال حاضر درگیر ژست کشیدن باشد یا حرکتی که با صفحه کلید آغاز شده باشد، درست برمی‌گردد.

کشیدن حرکات معمولاً مستلزم جابجایی یک بلوک یا سایر موارد در فضای کاری یا پیمایش در فضای پرواز/فضای کاری است.

حرکات آغاز شده با صفحه کلید با استفاده از زیرساخت کشیدن اجرا می شوند و برای تقلید (زیرمجموعه ای از) ژست های درگ در نظر گرفته شده اند و بنابراین معمولاً باید به گونه ای رفتار شوند که انگار یک درگ مبتنی بر ژست هستند.

isMovable()

آیا این فضای کاری متحرک است؟

این بدان معنی است که کاربر می تواند مختصات XY فضای کاری را از طریق ورودی تغییر مکان دهد. این می تواند از طریق نوارهای پیمایش، چرخ اسکرول، کشیدن، یا از طریق بزرگنمایی با چرخ پیمایش یا خرج کردن باشد (زیرا بزرگنمایی روی موقعیت ماوس متمرکز است). این شامل بزرگنمایی با کنترل‌های بزرگنمایی نمی‌شود، زیرا مختصات XY به صورت برنامه‌ریزی تعیین می‌شوند.

isMovableHorizontally() آیا این فضای کاری به صورت افقی قابل جابجایی است؟
isMovableVertically() آیا این فضای کاری به صورت عمودی قابل جابجایی است؟
isVisible() دریافت کننده برای isVisible
LookUpFocusableNode(id) به IFocusableTree.lookUpFocusableNode مراجعه کنید.
markFocused() این فضای کاری را به عنوان فضای کاری اصلی متمرکز فعلی علامت گذاری کنید.
moveDrag(e) کشیدن یک شی را در این فضای کاری ردیابی کنید.
newBlock(PrototypeName, opt_id) یک بلوک جدید ایجاد کنید.
نظر جدید (شناسه) نظر تازه ایجاد شده را دریافت کنید.
onNodeBlur() IFocusableNode.onNodeBlur را ببینید.
onNodeFocus() به IFocusableNode.onNodeFocus مراجعه کنید.
onTreeBlur (NextTree) IFocusableTree.onTreeBlur را ببینید.
onTreeFocus(_node، _previousTree) IFocusableTree.onTreeFocus را ببینید.
recordDragTargets() فهرستی از تمام مناطق حذف شده برای این فضای کاری تهیه کنید.
refreshTheme() پس از به‌روزرسانی تم، همه بلوک‌های موجود در فضای کاری را بازخوانی کنید.
registerButtonCallback (کلید، تابع) برای کلیک بر روی دکمه‌ها و برچسب‌ها در پرواز، یک تابع تماس مرتبط با یک کلید مشخص را ثبت کنید. به عنوان مثال، دکمه ای که توسط XML مشخص شده است باید با یک فراخوانی به registerButtonCallback ("CREATE_VARIABLE"، yourCallbackFunction) مطابقت داده شود.
registerToolboxCategoryCallback (کلید، تابع) برای پر کردن دسته‌های جعبه ابزار سفارشی در این فضای کاری، یک تابع پاسخ به تماس مرتبط با یک کلید مشخص را ثبت کنید. به عنوان مثال، دسته بندی متغیر و رویه را ببینید.
removeButtonCallback (کلید) برای کلیک بر روی یک دکمه در پرواز، پاسخ تماس را حذف کنید.
removeClass(classname) یک کلاس CSS را از فضای کاری حذف می کند.
removeToolboxCategoryCallback(کلید) برای کلیک بر روی نام دسته سفارشی در جعبه ابزار، پاسخ تماس را حذف کنید.
removeTopBlock(block) یک بلوک را از لیست بلوک های برتر حذف می کند.
removeTopBoundedElement(عنصر) یک عنصر محدود را از لیست عناصر محدود بالا حذف می کند.
removeTopComment (نظر) یک نظر را از لیست نظرات برتر حذف می کند.
render() همه بلوک ها را در فضای کاری رندر کنید.
تغییر اندازه () تغییر اندازه و تغییر مکان تمام فضای کاری کروم (جعبه ابزار، سطل زباله، نوارهای پیمایش و غیره) زمانی که چیزی تغییر می کند که نیاز به محاسبه مجدد ابعاد و موقعیت های سطل زباله، بزرگنمایی، جعبه ابزار و غیره دارد (مثلاً تغییر اندازه پنجره) این مورد باید فراخوانی شود.
اسکرول (x, y) فضای کاری را به یک افست مشخص (بر حسب پیکسل) پیمایش کنید و محدوده های فضای کاری را حفظ کنید. برای جزئیات بیشتر در مورد معنای این مقادیر به نظر در workspaceSvg.scrollX مراجعه کنید.
scrollCenter() فضای کاری را در مرکز قرار دهید.
setIsReadOnly(readOnly)
setNavigator (newNavigator) نمونه Navigator استفاده شده توسط این فضای کاری را تنظیم می کند.
setResizeHandlerWrapper(handler) داده های کنترل کننده تغییر اندازه را ذخیره کنید تا بتوانیم بعداً آن را حذف کنیم.
setResizesEnabled(فعال) به‌روزرسانی کنید که آیا این فضای کاری تغییر اندازه را فعال کرده است یا خیر. در صورت فعال بودن، اندازه فضای کاری در صورت لزوم تغییر می کند. اگر غیرفعال باشد، اندازه فضای کاری تا زمانی که دوباره فعال نشود تغییر نخواهد کرد. برای جلوگیری از تغییر اندازه در طول عملیات دسته ای، برای عملکرد استفاده کنید.
setScale (newScale) ضریب بزرگنمایی فضای کاری را تنظیم کنید.
setTheme (موضوع) شی موضوع فضای کاری را تنظیم کنید. اگر هیچ طرح زمینه ای ارسال نشد، به طور پیش فرض طرح زمینه Classic را انتخاب کنید.
setVisible (isVisible) قابلیت مشاهده فضای کاری را تغییر می دهد. در حال حاضر فقط برای فضای کار اصلی در نظر گرفته شده است.
startDrag (e، xy) ردیابی کشیدن یک شی را در این فضای کاری شروع کنید.
ترجمه (x، y) این فضای کاری را به مختصات جدید ترجمه کنید.
updateInverseScreenCTM() CTM صفحه معکوس را به عنوان کثیف علامت بزنید.
updateToolbox(toolboxDef) درخت بلوک را در جعبه ابزار موجود تغییر دهید.
بزرگنمایی (x، y، مقدار) فضای کاری را نسبت به/مرکز مختصات داده شده (x,y) بزرگ‌نمایی یا کوچک‌نمایی می‌کند.
ZoomCenter(نوع) بزرگنمایی بلوک ها در مرکز دید با بزرگنمایی یا کوچکنمایی.
zoomToFit() در صورت امکان بلوک‌ها را بزرگ‌نمایی کنید تا در فضای کاری قرار بگیرند.