blockly > WorkspaceSvg

WorkspaceSvg 클래스

워크스페이스의 클래스입니다. 화면 영역이며 휴지통, 스크롤바, 풍선, 드래그(선택사항)를 사용할 수 있습니다.

Signature:

export declare class WorkspaceSvg extends Workspace implements IASTNodeLocationSvg 

확장: Workspace

구현: IASTNodeLocationSvg

생성자

생성자 수정자 설명
(생성자)(옵션) WorkspaceSvg 클래스의 새 인스턴스를 구성합니다.

속성

속성 수정자 유형 설명
configureContextMenu ((menuOptions: ContextMenuOption[], e: Event) => void) | null 개발자는 이 함수를 정의하여 작업공간의 컨텍스트 메뉴에 맞춤 메뉴 옵션을 추가하거나 작업공간에서 생성한 메뉴 옵션 세트를 수정할 수 있습니다.
keyboardAccessibilityMode boolean 키보드 접근성 모드가 사용 설정된 경우 true, 그렇지 않은 경우 false입니다.
렌더링된 boolean SVG 작업공간의 렌더링 상태입니다. 헤드리스 작업공간의 경우 false을, WorkspaceSvg의 인스턴스에는 true를 반환합니다.
배율 숫자 현재 스케일.
스크롤바 ScrollbarPair | null 작업공간의 스크롤바(있는 경우)입니다.
scrollX 숫자

작업공간 원점을 기준으로 한 현재 가로 스크롤 오프셋(픽셀 단위)입니다.

뷰와 이 뷰 아래로 움직이는 캔버스를 고려하는 것이 좋습니다. 캔버스가 오른쪽으로 이동하면 이 값은 더 양수가 되고 이제 뷰에 캔버스의 왼쪽이 '표시'됩니다. 캔버스가 왼쪽으로 이동하면 이 값은 더 음수가 되어 이제 뷰에 캔버스의 오른쪽이 '표시'됩니다.

이 값에 대해 혼동되는 점은 이 값이 절대 왼쪽 오프셋을 포함하지 않고 포함해서는 안 된다는 것입니다. 이는 viewLeft 값을 계산하는 데 사용되기 때문입니다.

viewLeft는 작업공간 원점을 기준으로 합니다 (픽셀 단위). 작업공간 원점은 작업공간의 왼쪽 상단입니다 (적어도 사용 설정된 경우에는). 도구 상자 아래에 있지 않도록 blocklyDiv의 왼쪽 상단에서 이동합니다.

작업공간이 사용 설정되면 viewLeft와 작업공간 원점이 동일한 X 위치에 있습니다. 캔버스가 뷰 아래의 오른쪽으로 슬라이드하면 이 값 (scrollX)이 더 양수가 되고 viewLeft는 작업공간 원점에 비해 더 음의 값이 됩니다 (캔버스가 이동할 때 캔버스에서 오른쪽으로 슬라이드하는 점으로 작업공간 원점을 상상해 보세요).

따라서 scrollX에 absoluteLeft가 포함되면 작업공간 원점의 이동을 '취소'합니다. 즉, viewLeft는 작업공간의 왼쪽 가장자리가 아니라 blocklyDiv의 왼쪽 가장자리를 나타냅니다.

scrollY 숫자

작업공간 원점을 기준으로 한 현재 세로 스크롤 오프셋(픽셀 단위)입니다.

뷰와 이 뷰 아래로 움직이는 캔버스를 고려하는 것이 좋습니다. 캔버스가 아래로 이동할수록 이 값은 더 양수가 되고 이제 뷰에 캔버스의 상단이 '보입니다'. 캔버스가 위로 이동할수록 이 값은 더 음수가 되어 뷰에 캔버스의 아래쪽이 '표시'됩니다.

이 값에 대해 혼란을 야기하는 점은 이 값이 절대 Top 오프셋을 포함하지 않고 포함해서는 안 된다는 것입니다. 이는 viewTop 값을 계산하는 데 사용되기 때문입니다.

viewTop은 작업공간 원점을 기준으로 합니다 (픽셀 단위 포함). 작업공간 원점은 작업공간의 왼쪽 상단입니다 (적어도 사용 설정된 경우에는). 도구 상자 아래에 있지 않도록 blocklyDiv의 왼쪽 상단에서 이동합니다.

작업공간이 사용 설정되면 viewTop과 작업공간 원점이 동일한 Y 위치에 있습니다. 캔버스가 하단으로 이동할수록 이 값 (scrollY)이 양수가 되고 viewTop은 작업공간 원점에 대해 더 음의 값이 됩니다 (작업공간 원점의 이미지는 캔버스가 이동함에 따라 아래로 슬라이드되는 점으로 표시됨).

따라서 scrollY에 absoluteTop을 포함하면 작업공간 원점을 '이동 취소'합니다. 즉, viewTop은 작업공간의 상단 가장자리가 아닌 blocklyDiv의 상단 가장자리를 나타냅니다.

startScrollX 숫자 픽셀 단위로 표시된 스크롤이 시작될 때의 가로 스크롤 값입니다.
startScrollY 숫자 스크롤이 픽셀 단위로 시작될 때의 세로 스크롤 값입니다.
svgBackground_ SVGElement
svgBlockCanvas_ SVGElement
svgBubbleCanvas_ SVGElement
svgGroup_ SVGElement
themeManager_ protected ThemeManager
휴지통 휴지통 | null 작업공간의 휴지통 (있는 경우)입니다.
zoomControls_ ZoomControls | null

방법

메서드 수정자 설명
addTopBlock(block) 최상위 블록 목록에 블록을 추가합니다.
addTopBoundedElement(element) 제한된 요소를 상단 제한 요소 목록에 추가합니다.
addTopComment(comment) 인기 댓글 목록에 댓글을 추가합니다.
centerOnBlock(id, blockOnly) 작업공간을 스크롤하여 주어진 블록의 가운데에 배치합니다. 블록 아래에 다른 블록이 쌓여 있는 경우 blockOnly가 true인 경우를 제외하고 작업공간은 스택의 중앙에 배치됩니다.
cleanUp()을 호출했습니다. 열의 모든 블록을 정렬하여 작업공간을 정리합니다.
clear() 크기 조절을 방지하기 위한 최적화와 함께 작업공간의 모든 블록을 폐기합니다.
createDom(opt_backgroundClass, insertDiv) 작업공간 DOM 요소를 만듭니다.
createVariable(name, opt_type, opt_id) 지정된 이름으로 새 변수를 만듭니다. 새 변수가 즉시 표시되도록 플라이아웃을 업데이트합니다.
deleteVariableById(id) 전달된 ID로 변수를 삭제합니다. 변수가 즉시 삭제되도록 플라이아웃을 업데이트합니다.
dispose() 이 작업공간을 폐기합니다. 모든 DOM 요소에서 연결을 해제하여 메모리 누수를 방지합니다.
getAllBlocks(ordered) 작업공간의 모든 블록을 찾습니다. 블록은 원하는 경우 위에서 아래로 위치를 기준으로 정렬됩니다 (LTR 또는 RTL 편향이 약간 있음).
getAudioManager() 이 작업공간의 오디오 관리자를 다운로드합니다.
getBlockById(id)를 참조하세요. 이 작업공간에서 지정된 ID가 있는 블록을 찾습니다.
getBlocksBoundingBox() 작업공간에서 블록의 경계 상자를 계산합니다. 좌표계: 작업공간 좌표입니다.
getBubbleCanvas() 풍선 표면을 형성하는 SVG 요소를 가져옵니다.
getButtonCallback(key) 플라이아웃에서 버튼과 라벨을 클릭한 경우 특정 키와 연결된 콜백 함수를 가져옵니다.
getCanvas() 그리기 표면을 형성하는 SVG 요소를 가져옵니다.
getComponentManager() 이 작업공간의 구성요소 관리자를 가져옵니다.
getCursor() 이 작업공간의 커서입니다.
getDragTarget(e) 포인터 이벤트가 종료된 드래그 타겟을 반환합니다.
getFlyout(opt_own) 이 작업공간과 연결된 플라이아웃의 getter입니다. 이 플라이아웃은 도구 상자 구성에 따라 도구 상자 또는 작업공간에서 소유할 수 있습니다. 플라이아웃이 없으면 null이 됩니다.
getGrid() 이 작업공간의 그리드 객체를 가져오거나, 그리드 객체가 없는 경우 null을 가져옵니다.
getInverseScreenCTM() 반전된 화면 CTM의 getter입니다.
getMarkerManager() 이 작업공간의 마커 관리자를 가져옵니다.
getMetricsManager() 이 작업공간의 측정항목 관리자를 가져옵니다.
getParentSvg()를 참고하세요. 이 작업공간이 포함된 SVG 요소를 가져옵니다. 참고: 이 메서드는 작업공간이 DOM에 삽입된 후에만 호출된다고 가정합니다.
getRenderer() 이 작업공간에 연결된 블록 렌더기를 가져옵니다.
getRootWorkspace()
getScale() 작업공간의 확대/축소 배율을 가져옵니다. 작업공간에 상위 요소가 있는 경우 상위 요소를 호출하여 작업공간 배율을 가져옵니다.
getSvgGroup() 작업공간의 SVG 그룹을 반환합니다.
getTheme() 작업공간 테마 객체를 가져옵니다.
getToolbox() 이 작업공간과 연결된 도구 상자의 getter입니다(있는 경우).
getToolboxCategoryCallback(key) 이 작업공간의 맞춤 도구 상자 카테고리를 채우려면 지정된 키와 연결된 콜백 함수를 가져옵니다.
getTopBlocks(ordered) 최상위 블록을 찾아 반환합니다. 블록은 원하는 경우 위에서 아래로 위치를 기준으로 정렬됩니다 (LTR 또는 RTL 편향이 약간 있음).
getTopBoundedElements() 최상위 수준의 제한된 요소를 찾아 반환합니다.
getWidth() 작업공간의 가로 오프셋을 반환합니다. XML의 LTR/RTL 호환성을 위한 것입니다.
hideChaff(onlyClosePopups) 도움말, 컨텍스트 메뉴, 드롭다운 선택 항목 등을 닫습니다.
hideComponents(onlyClosePopups) 자동 숨기기 가능한 구성요소 (예: 플라이아웃, 휴지통, 사용자가 등록한 구성요소)를 숨깁니다.
highlightBlock(id, opt_state) 작업공간에서 블록을 강조 표시하거나 강조 표시 해제합니다. 블록 강조표시는 현재 실행 중인 블록을 시각적으로 표시하는 데 자주 사용됩니다.
isDraggable() 이 작업공간은 드래그할 수 있나요?
isDragging() 사용자가 현재 블록을 드래그하거나 플라이아웃/작업공간을 스크롤하고 있나요?
isMovable()

이 작업공간은 이전 가능한가요?

즉, 사용자가 입력을 통해 작업공간의 X Y 좌표를 재배치할 수 있습니다. 스크롤바, 스크롤 휠, 드래그, 스크롤 휠 또는 손가락을 모으거나 벌려서 확대/축소 (확대/축소가 마우스 위치의 중심에 있기 때문에)할 수 있습니다. X Y 좌표는 프로그래밍 방식으로 결정되므로 확대/축소 컨트롤을 사용한 확대/축소는 여기에 포함되지 않습니다.

isMovableHorizontally() 이 작업공간은 수평으로 이동할 수 있나요?
isMovableVertically() 이 작업공간은 수직으로 이동할 수 있나요?
isVisible() isVisible의 getter
markFocused() 이 작업공간을 현재 포커스가 설정된 기본 작업공간으로 표시합니다.
moveDrag(e) 이 작업공간에서 객체의 드래그를 추적합니다.
newBlock(prototypeName, opt_id) 새로 만든 블록을 가져옵니다.
붙여넣기(상태) 제공된 블록 또는 작업공간 주석을 작업공간에 붙여넣습니다. 객체에 남은 용량이 있는지는 확인하지 않습니다. 이 메서드를 호출하기 전에 해야 합니다.
recordDragTargets() 이 워크스페이스의 모든 삭제 영역의 목록을 만듭니다.
refreshTheme() 테마 업데이트 후 작업공간의 모든 블록을 새로고침합니다.
registerButtonCallback(key, func) 플라이아웃에서 버튼과 라벨을 클릭하는 경우 특정 키와 연결된 콜백 함수를 등록합니다. 예를 들어, XML 로 지정된 버튼은 registerButtonCallback("CREATE_VARIABLE", yourCallbackFunction) 호출과 일치해야 합니다.
registerToolboxCategoryCallback(key, func) 이 작업공간의 맞춤 도구 상자 카테고리를 채우려면 지정된 키와 연결된 콜백 함수를 등록합니다. 변수와 프로시져 카테고리를 예로 참조하세요.
removeButtonCallback(key) 플라이아웃에서 버튼 클릭에 대한 콜백을 삭제합니다.
removeToolboxCategoryCallback(key) 도구 상자에서 맞춤 카테고리 이름 클릭에 대한 콜백을 삭제합니다.
removeTopBlock(block) 최상위 블록 목록에서 블록을 삭제합니다.
removeTopBoundedElement(element) 상단 제한 요소 목록에서 제한된 요소를 제거합니다.
removeTopComment(comment) 인기 댓글 목록에서 댓글을 삭제합니다.
renameVariableById(id, newName) 변수 맵에서 이름을 업데이트하여 변수 이름을 바꿉니다. 이름이 변경된 변수가 즉시 표시되도록 플라이아웃을 업데이트합니다.
렌더() 작업공간의 모든 블록을 렌더링합니다.
resize() 모든 작업공간 Chrome (도구 상자, 휴지통, 스크롤바 등)의 크기 조절 및 위치 변경 이는 휴지통, 확대/축소, 도구 상자 등의 크기와 위치를 다시 계산해야 하는 변경사항이 있는 경우 호출해야 합니다(예: 창 크기 조절).
scrollCenter() 작업공간을 중앙에 배치합니다.
setResizeHandlerWrapper(handler) 나중에 폐기할 때 삭제할 수 있도록 크기 조절 핸들러 데이터를 저장합니다.
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() 가능하면 작업공간에 맞도록 블록을 확대/축소합니다.