blockly > WorkspaceSvg

Lớp WorkspaceSvg

Lớp học cho một không gian làm việc. Đây là một vùng trên màn hình có thùng rác, thanh cuộn, bong bóng và thao tác kéo (không bắt buộc).

Chữ ký:

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

Mở rộng: Workspace

Triển khai: IContextMenu, IFocusableNode, IFocusableTree

Hàm khởi tạo

Hàm dựng	Đối tượng sửa đổi	Mô tả
(constructor)(options)		Tạo một thực thể mới của lớp WorkspaceSvg

Thuộc tính

Thuộc tính	Đối tượng sửa đổi	Loại	Mô tả
configureContextMenu		((menuOptions: ContextMenuOption[], e: Event) => void) | null	Nhà phát triển có thể xác định hàm này để thêm các lựa chọn tuỳ chỉnh vào trình đơn theo bối cảnh của không gian làm việc hoặc chỉnh sửa bộ lựa chọn trình đơn do không gian làm việc tạo.
keyboardAccessibilityMode		boolean	True nếu chế độ hỗ trợ tiếp cận bằng bàn phím đang bật, false nếu không.
keyboardMoveInProgress		boolean	True iff a keyboard-initiated move ("drag") is in progress.
rendered		boolean	Trạng thái kết xuất của một không gian làm việc SVG. Trả về false cho các không gian làm việc không có giao diện người dùng và trả về true cho các phiên bản của WorkspaceSvg.
scale		số	Quy mô hiện tại.
scrollbar		ScrollbarPair | null	Thanh cuộn của không gian làm việc này (nếu có).
scrollX		số	Độ lệch cuộn ngang hiện tại theo đơn vị pixel, so với gốc của không gian làm việc. Bạn nên nghĩ về một khung hiển thị và một canvas di chuyển bên dưới khung hiển thị đó. Khi canvas di chuyển sang phải, giá trị này sẽ dương hơn và khung hiển thị hiện đang "nhìn thấy" phía bên trái của canvas. Khi canvas di chuyển sang trái, giá trị này sẽ âm hơn và khung hiển thị hiện đang "nhìn thấy" phía bên phải của canvas. Điều gây nhầm lẫn về giá trị này là nó không được bao gồm độ lệch absoluteLeft. Điều này là do giá trị này được dùng để tính giá trị viewLeft. viewLeft có liên quan đến nguồn gốc của không gian làm việc (mặc dù tính bằng đơn vị pixel). Điểm bắt đầu của không gian làm việc là góc trên cùng bên trái của không gian làm việc (ít nhất là khi không gian làm việc được bật). Nó được chuyển từ phía trên cùng bên trái của blocklyDiv để không nằm bên dưới hộp công cụ. Khi không gian làm việc được bật, viewLeft và nguồn gốc của không gian làm việc sẽ ở cùng một vị trí X. Khi canvas trượt sang phải bên dưới khung hiển thị, giá trị này (scrollX) sẽ dương hơn và viewLeft sẽ âm hơn so với gốc của không gian làm việc (hãy tưởng tượng gốc của không gian làm việc là một dấu chấm trên canvas trượt sang phải khi canvas di chuyển). Vì vậy, nếu scrollX bao gồm absoluteLeft, thì điều này sẽ theo một cách nào đó "unshift" nguồn gốc của không gian làm việc. Điều này có nghĩa là viewLeft sẽ biểu thị cạnh trái của blocklyDiv, thay vì cạnh trái của không gian làm việc.
scrollY		số	Độ lệch cuộn dọc hiện tại theo đơn vị pixel, so với gốc của không gian làm việc. Bạn nên nghĩ về một khung hiển thị và một canvas di chuyển bên dưới khung hiển thị đó. Khi canvas di chuyển xuống, giá trị này sẽ trở nên dương hơn và khung hiển thị hiện đang "nhìn thấy" phần trên của canvas. Khi canvas di chuyển lên, giá trị này sẽ âm hơn và khung hiển thị sẽ "nhìn thấy" phần dưới của canvas. Điều gây nhầm lẫn về giá trị này là giá trị này không bao gồm và không được bao gồm độ lệch absoluteTop. Điều này là do thuộc tính này được dùng để tính giá trị viewTop. viewTop có liên quan đến gốc của không gian làm việc (mặc dù tính bằng đơn vị pixel). Điểm bắt đầu của không gian làm việc là góc trên cùng bên trái của không gian làm việc (ít nhất là khi không gian làm việc được bật). Nó được chuyển từ phía trên cùng bên trái của blocklyDiv để không nằm bên dưới hộp công cụ. Khi không gian làm việc được bật, viewTop và nguồn gốc của không gian làm việc sẽ ở cùng một vị trí Y. Khi canvas trượt xuống dưới cùng, giá trị này (scrollY) sẽ trở nên dương hơn và viewTop sẽ trở nên âm hơn so với nguồn gốc của không gian làm việc (hình ảnh trong nguồn gốc của không gian làm việc dưới dạng một dấu chấm trên canvas trượt xuống khi canvas di chuyển). Vì vậy, nếu scrollY bao gồm absoluteTop, thì điều này sẽ theo một cách nào đó "unshift" nguồn gốc của không gian làm việc. Điều này có nghĩa là viewTop sẽ đại diện cho cạnh trên của blocklyDiv, chứ không phải cạnh trên của không gian làm việc.
startScrollX		số	Giá trị cuộn theo chiều ngang khi bắt đầu cuộn theo đơn vị pixel.
startScrollY		số	Giá trị cuộn theo chiều dọc khi bắt đầu cuộn theo đơn vị pixel.
svgBackground_		SVGElement
svgBlockCanvas_		SVGElement
svgBubbleCanvas_		SVGElement
svgGroup_		SVGElement
themeManager_	protected	ThemeManager
trashcan		Thùng rác | null	Thùng rác của không gian làm việc (nếu có).
zoomControls_		ZoomControls | null

Phương thức

Phương thức	Đối tượng sửa đổi	Mô tả
addClass(className)		Thêm một lớp CSS vào không gian làm việc.
addTopBlock(block)		Thêm một khối vào danh sách các khối hàng đầu.
addTopBoundedElement(element)		Thêm một phần tử có ranh giới vào danh sách các phần tử có ranh giới trên cùng.
addTopComment(comment)		Thêm một bình luận vào danh sách bình luận hàng đầu.
canBeFocused()		Xem IFocusableNode.canBeFocused.
centerOnBlock(id, blockOnly)		Di chuyển không gian làm việc để đặt khối đã cho vào giữa. Nếu khối có các khối khác xếp chồng bên dưới, thì không gian làm việc sẽ được căn giữa theo ngăn xếp, trừ phi blockOnly là true.
cleanUp()		Dọn dẹp không gian làm việc bằng cách sắp xếp tất cả các khối theo cột sao cho không có khối nào chồng lên nhau.
clear()		Xoá tất cả các khối trong không gian làm việc, đồng thời tối ưu hoá để ngăn chặn việc đổi kích thước.
copyOptionsForFlyout()		Tạo một nhóm lựa chọn mới từ các lựa chọn của không gian làm việc này chỉ với những giá trị phù hợp với một trình đơn bật lên.
createDom(opt_backgroundClass, injectionDiv)		Tạo các phần tử DOM của không gian làm việc.
dispose()		Xoá không gian làm việc này. Huỷ liên kết khỏi tất cả các phần tử DOM để ngăn tình trạng rò rỉ bộ nhớ.
getAbsoluteScale()		Trả về tỷ lệ tuyệt đối của không gian làm việc. Thao tác mở rộng không gian làm việc có tính chất nhân; nếu không gian làm việc B (ví dụ: trình chỉnh sửa đột biến) có tỷ lệ Y được lồng trong không gian làm việc gốc A có tỷ lệ X, thì tỷ lệ hiệu quả của không gian làm việc B là X * Y, vì là thành phần con của A, nên không gian làm việc này đã được chuyển đổi theo hệ số tỷ lệ của A, sau đó tự chuyển đổi thêm theo hệ số tỷ lệ của chính nó. Thông thường, điều này sẽ hoạt động, nhưng đối với các phần tử chung (ví dụ: trình chỉnh sửa trường) được liên kết trực quan với một không gian làm việc cụ thể nhưng nằm ở cấp cao nhất của DOM thay vì là thành phần con của không gian làm việc được liên kết, bạn có thể cần đến tỷ lệ tuyệt đối/hiệu quả để hiển thị một cách phù hợp.
getAllBlocks(ordered)		Tìm tất cả các khối trong không gian làm việc. Các khối được sắp xếp theo vị trí (không bắt buộc); từ trên xuống dưới (có độ lệch nhỏ từ trái sang phải hoặc từ phải sang trái).
getAudioManager()		Lấy trình quản lý âm thanh cho không gian làm việc này.
getBlockById(id)		Tìm khối trên không gian làm việc này có mã nhận dạng được chỉ định.
getBlocksBoundingBox()		Tính toán hộp giới hạn cho các khối trên không gian làm việc. Hệ toạ độ: toạ độ không gian làm việc.
getBubbleCanvas()		Lấy phần tử SVG tạo thành bề mặt bong bóng.
getButtonCallback(key)		Lấy hàm gọi lại được liên kết với một khoá nhất định, cho các lượt nhấp vào nút và nhãn trong bảng chọn.
getCanvas()		Lấy phần tử SVG tạo thành bề mặt vẽ.
getCommentById(id)		Trả về bình luận trong không gian làm việc có mã nhận dạng đã cho (nếu có).
getComponentManager()		Lấy trình quản lý thành phần cho không gian làm việc này.
getCursor()		Con trỏ cho không gian làm việc này.
getDragTarget(e)		Trả về đích kéo mà sự kiện con trỏ đang ở trên.
getFlyout(opt_own)		Phương thức getter cho trình đơn bật lên được liên kết với không gian làm việc này. Thanh công cụ hoặc không gian làm việc có thể sở hữu trình đơn bật lên này, tuỳ thuộc vào cấu hình của thanh công cụ. Giá trị này sẽ là giá trị rỗng nếu không có cửa sổ bật lên.
getFocusableElement()		Xem IFocusableNode.getFocusableElement.
getFocusableTree()		Xem IFocusableNode.getFocusableTree.
getGrid()		Lấy đối tượng lưới cho không gian làm việc này hoặc giá trị rỗng nếu không có.
getInverseScreenCTM()		Phương thức getter cho CTM màn hình đảo ngược.
getMarkerManager()		Nhận trình quản lý điểm đánh dấu cho không gian làm việc này.
getMetricsManager()		Lấy trình quản lý chỉ số cho không gian làm việc này.
getNavigator()		Trả về một đối tượng chịu trách nhiệm điều phối chuyển động tiêu điểm giữa các mục trên không gian làm việc này để phản hồi các lệnh điều hướng bằng bàn phím.
getNestedTrees()		Xem IFocusableTree.getNestedTrees.
getParentSvg()		Lấy phần tử SVG chứa không gian làm việc này. Lưu ý: Chúng tôi giả định rằng phương thức này chỉ được gọi sau khi không gian làm việc được chèn vào DOM.
getRenderer()		Lấy trình kết xuất khối được đính kèm vào không gian làm việc này.
getRestoredFocusableNode(previousNode)		Xem IFocusableTree.getRestoredFocusableNode.
getRootFocusableNode()		Xem IFocusableTree.getRootFocusableNode.
getRootWorkspace()
getScale()		Lấy hệ số thu phóng của không gian làm việc.
getSvgGroup()		Trả về nhóm SVG cho không gian làm việc.
getTheme()		Lấy đối tượng giao diện không gian làm việc.
getToolbox()		Getter cho hộp công cụ được liên kết với không gian làm việc này (nếu có).
getToolboxCategoryCallback(key)		Nhận hàm gọi lại được liên kết với một khoá nhất định để điền sẵn các danh mục hộp công cụ tuỳ chỉnh trong không gian làm việc này.
getTopBlocks(ordered)		Tìm các khối cấp cao nhất và trả về các khối đó. Các khối được sắp xếp theo vị trí (không bắt buộc); từ trên xuống dưới (có độ lệch nhỏ từ trái sang phải hoặc từ phải sang trái).
getTopBoundedElements(ordered)		Tìm các phần tử bị giới hạn cấp cao nhất và trả về các phần tử đó.
getTopComments(ordered)		Trả về danh sách bình luận về không gian làm việc này.
getWidth()		Trả về độ lệch ngang của không gian làm việc. Dành cho khả năng tương thích LTR/RTL trong XML.
hideChaff(onlyClosePopups)		Đóng chú thích, trình đơn theo bối cảnh, lựa chọn trong trình đơn thả xuống, v.v.
hideComponents(onlyClosePopups)		Ẩn mọi thành phần có thể tự động ẩn (chẳng hạn như thành phần bật lên, thùng rác và mọi thành phần do người dùng đăng ký).
highlightBlock(id, opt_state)		Đánh dấu hoặc bỏ đánh dấu một khối trong không gian làm việc. Tính năng làm nổi bật khối thường được dùng để đánh dấu trực quan các khối đang được thực thi.
isDraggable()		Không gian làm việc này có thể kéo được không?
isDragging()		Trả về giá trị true nếu người dùng hiện đang thực hiện cử chỉ kéo hoặc nếu đang diễn ra thao tác di chuyển do bàn phím khởi tạo. Thao tác kéo thường liên quan đến việc di chuyển một khối hoặc mục khác trên không gian làm việc, hoặc cuộn bảng chọn/không gian làm việc. Các chuyển động do bàn phím khởi tạo được triển khai bằng cách sử dụng cơ sở hạ tầng kéo và nhằm mục đích mô phỏng (một phần) cử chỉ kéo, do đó, thường nên được coi như thể chúng là một thao tác kéo dựa trên cử chỉ.
isMovable()		Không gian làm việc này có di chuyển được không? Điều này có nghĩa là người dùng có thể đặt lại vị trí toạ độ X Y của không gian làm việc thông qua dữ liệu đầu vào. Bạn có thể thực hiện thao tác này thông qua thanh cuộn, con lăn chuột, thao tác kéo hoặc thu phóng bằng con lăn chuột hoặc cử chỉ chụm (vì thao tác thu phóng được đặt ở vị trí chuột). Điều này không bao gồm thao tác thu phóng bằng các chế độ thu phóng vì toạ độ X Y được xác định theo phương thức lập trình.
isMovableHorizontally()		Không gian làm việc này có thể di chuyển theo chiều ngang không?
isMovableVertically()		Không gian làm việc này có thể di chuyển theo chiều dọc không?
isVisible()		Phương thức getter cho isVisible
lookUpFocusableNode(id)		Xem IFocusableTree.lookUpFocusableNode.
markFocused()		Đánh dấu không gian làm việc này là không gian làm việc chính hiện đang được tập trung.
moveDrag(e)		Theo dõi thao tác kéo một đối tượng trên không gian làm việc này.
newBlock(prototypeName, opt_id)		Lấy một khối mới tạo.
newComment(id)		Lấy một bình luận mới tạo.
onNodeBlur()		Xem IFocusableNode.onNodeBlur.
onNodeFocus()		Xem IFocusableNode.onNodeFocus.
onTreeBlur(nextTree)		Xem IFocusableTree.onTreeBlur.
onTreeFocus(_node, _previousTree)		Xem IFocusableTree.onTreeFocus.
recordDragTargets()		Lập danh sách tất cả các khu vực cần xoá cho không gian làm việc này.
refreshTheme()		Làm mới tất cả các khối trên không gian làm việc sau khi cập nhật giao diện.
registerButtonCallback(key, func)		Đăng ký một hàm gọi lại được liên kết với một khoá nhất định, cho các lượt nhấp vào nút và nhãn trong bảng chọn. Ví dụ: một nút được chỉ định bằng XML phải được so khớp bằng một lệnh gọi đến registerButtonCallback("CREATE_VARIABLE", yourCallbackFunction).
registerToolboxCategoryCallback(key, func)		Đăng ký một hàm gọi lại được liên kết với một khoá nhất định để điền sẵn các danh mục hộp công cụ tuỳ chỉnh trong không gian làm việc này. Xem các danh mục biến và quy trình làm ví dụ.
removeButtonCallback(key)		Xoá một lệnh gọi lại cho lượt nhấp vào nút trong trình đơn bật lên.
removeClass(className)		Xoá một lớp CSS khỏi không gian làm việc.
removeToolboxCategoryCallback(key)		Xoá một lệnh gọi lại cho một lượt nhấp vào tên danh mục tuỳ chỉnh trong hộp công cụ.
removeTopBlock(block)		Xoá một khối khỏi danh sách các khối hàng đầu.
removeTopBoundedElement(element)		Xoá một phần tử có đường viền khỏi danh sách các phần tử có đường viền hàng đầu.
removeTopComment(comment)		Xoá một bình luận khỏi danh sách bình luận hàng đầu.
render()		Kết xuất tất cả các khối trong không gian làm việc.
resize()		Thay đổi kích thước và đặt lại vị trí của tất cả các thành phần Chrome trong không gian làm việc (hộp công cụ, thùng rác, thanh cuộn, v.v.) Bạn nên gọi phương thức này khi có thay đổi cần tính toán lại kích thước và vị trí của thùng rác, công cụ thu phóng, hộp công cụ, v.v. (ví dụ: đổi kích thước cửa sổ).
scroll(x, y)		Di chuyển không gian làm việc đến một khoảng cách cụ thể (tính bằng pixel), trong phạm vi của không gian làm việc. Xem nhận xét về workspaceSvg.scrollX để biết thêm thông tin chi tiết về ý nghĩa của các giá trị này.
scrollCenter()		Đặt không gian làm việc ở giữa.
setIsReadOnly(readOnly)
setNavigator(newNavigator)		Đặt thực thể Navigator mà không gian làm việc này sử dụng.
setResizeHandlerWrapper(handler)		Lưu dữ liệu của trình xử lý thay đổi kích thước để chúng ta có thể xoá dữ liệu đó sau trong quá trình loại bỏ.
setResizesEnabled(enabled)		Cập nhật xem không gian làm việc này có bật tính năng đổi kích thước hay không. Nếu được bật, không gian làm việc sẽ đổi kích thước khi thích hợp. Nếu bạn tắt chế độ này, không gian làm việc sẽ không thay đổi kích thước cho đến khi bạn bật lại. Sử dụng để tránh đổi kích thước trong một thao tác hàng loạt, nhằm tăng hiệu suất.
setScale(newScale)		Đặt hệ số thu phóng của không gian làm việc.
setTheme(theme)		Đặt đối tượng giao diện không gian làm việc. Nếu không có giao diện nào được truyền, hãy chuyển về giao diện Classic theo mặc định.
setVisible(isVisible)		Bật/tắt chế độ hiển thị của không gian làm việc. Hiện tại, tính năng này chỉ dành cho không gian làm việc chính.
startDrag(e, xy)		Bắt đầu theo dõi thao tác kéo một đối tượng trên không gian làm việc này.
translate(x, y)		Chuyển không gian làm việc này sang toạ độ mới.
updateInverseScreenCTM()		Đánh dấu CTM màn hình nghịch đảo là không hợp lệ.
updateToolbox(toolboxDef)		Sửa đổi cây khối trên hộp công cụ hiện có.
zoom(x, y, amount)		Phóng to hoặc thu nhỏ không gian làm việc tương ứng với/tập trung vào toạ độ (x, y) đã cho.
zoomCenter(type)		Phóng to các khối ở giữa khung hiển thị bằng cách phóng to hoặc thu nhỏ.
zoomToFit()		Phóng to các khối để vừa với không gian làm việc nếu có thể.