WorkspaceSvg 클래스
작업공간의 클래스입니다. 화면에 휴지통, 스크롤바, 풍선, 드래그 기능이 선택적으로 포함되어 있습니다.
서명:
export declare class WorkspaceSvg extends Workspace implements IASTNodeLocationSvg
확장: Workspace
생성자
생성자 | 수정자 | 설명 |
---|---|---|
(생성자)(옵션) | WorkspaceSvg 클래스의 새 인스턴스를 생성합니다. |
속성
속성 | 수정자 | 유형 | 설명 |
---|---|---|---|
configureContextMenu | ((menuOptions: ContextMenuOption[], e: Event) => void) | 없음 | 개발자는 이 함수를 정의하여 작업공간의 컨텍스트 메뉴에 맞춤 메뉴 옵션을 추가하거나 작업공간에서 생성한 메뉴 옵션 집합을 수정할 수 있습니다. | |
keyboardAccessibilityMode | 부울 | 키보드 접근성 모드가 사용 설정되어 있으면 true, 그렇지 않은 경우 false입니다. | |
렌더링된 | 부울 | SVG 작업공간의 렌더링 상태입니다. 헤드리스 작업공간의 경우 false 를 반환하고 WorkspaceSvg 인스턴스의 경우 true를 반환합니다. |
|
규모 | 숫자 | 현재 체중계입니다. | |
스크롤바 | ScrollbarPair | 없음 | 이 작업공간의 스크롤바(있는 경우)입니다. | |
scrollX | 숫자 | 작업공간 원점을 기준으로 한 픽셀 단위의 현재 가로 스크롤 오프셋입니다. 뷰와 그 뷰 아래에서 이동하는 캔버스를 생각하는 것이 유용합니다. 캔버스가 오른쪽으로 이동하면 이 값이 더 양수가 되고 뷰가 이제 '보는' 상태가 됩니다. 3D 작업을 할 수 있습니다. 캔버스가 왼쪽으로 이동하면 이 값이 더 음수가 되고 뷰가 이제 '보이는' 상태가 됩니다. 드래그 앤 드롭합니다. 이 값에 대한 혼동을 주는 점은 이 값이 AbsoluteLeft 오프셋을 포함하지 않으며 포함해서도 안 된다는 점입니다. 이는 viewLeft 값을 계산하는 데 사용되기 때문입니다. viewLeft는 작업공간 원점을 기준으로 합니다 (픽셀 단위 사용). 작업공간 원점은 작업공간의 왼쪽 상단입니다 (최소 사용 설정된 경우). 도구 상자 아래에 있지 않도록 blocklyDiv의 왼쪽 상단에서 이동합니다. 작업공간이 사용 설정되면 viewLeft 및 작업공간 원점이 동일한 X 위치에 있습니다. 캔버스가 뷰 아래의 오른쪽을 향해 슬라이드하면 이 값 (scrollX)이 더 양수가 되고 viewLeft는 작업공간 원점에 대해 더 음수가 됩니다 (작업공간 원점을 캔버스가 이동할 때 오른쪽으로 슬라이드되는 캔버스의 점으로 상상해 보세요). 스크롤 X에 AbsoluteLeft를 포함하면 'unshift'가 됩니다. 확인할 수 있습니다 즉, viewLeft가 작업공간의 왼쪽 가장자리가 아닌 blocklyDiv의 왼쪽 가장자리를 나타냅니다. |
|
scrollY | 숫자 | 작업공간 원점을 기준으로 한 픽셀 단위의 현재 세로 스크롤 오프셋입니다. 뷰와 그 뷰 아래에서 이동하는 캔버스를 생각하는 것이 유용합니다. 캔버스가 아래로 내려가면 이 값이 더 양수가 되고 뷰가 이제 '보이는' 상태가 됩니다. 드래그 앤 드롭합니다. 캔버스가 위로 이동함에 따라 이 값은 더 음수가 되고 뷰가 '보는' 상태입니다. 한 번 더 보겠습니다. 이 값과 관련해 혼동을 주는 점은 이 값이 AbsoluteTop 오프셋을 포함하지 않으며 포함하면 안 된다는 점입니다. 이는 viewTop 값을 계산하는 데 사용되기 때문입니다. viewTop은 픽셀 단위라도 작업공간 원점을 기준으로 합니다. 작업공간 원점은 작업공간의 왼쪽 상단입니다 (최소 사용 설정된 경우). 도구 상자 아래에 있지 않도록 blocklyDiv의 왼쪽 상단에서 이동합니다. 작업공간이 사용 설정되면 viewTop과 작업공간 원점이 동일한 Y 위치에 있습니다. 캔버스가 하단을 향해 슬라이드하면 이 값 (scrollY)이 더 양수가 되고 viewTop은 작업공간 원점에 대해 더 음수가 됩니다 (작업공간 원점의 이미지는 캔버스가 이동할 때 아래로 슬라이드됨). 따라서 스크롤 Y에 절대 상단을 포함하면 '이동 취소'가 되고 확인할 수 있습니다 즉, viewTop은 작업공간의 상단 가장자리가 아닌 blocklyDiv의 상단 가장자리를 나타냅니다. |
|
startScrollX | 숫자 | 스크롤 시작 시 가로 스크롤 값(픽셀 단위)입니다. | |
startScrollY | 숫자 | 스크롤이 시작되었을 때의 세로 스크롤 값입니다(단위: 픽셀). | |
svgBackground_ | SVGElement | ||
svgBlockCanvas_ | SVGElement | ||
svgBubbleCanvas_ | SVGElement | ||
svgGroup_ | SVGElement | ||
themeManager_ | protected |
ThemeManager | |
휴지통 | 휴지통 | 없음 | 작업공간의 휴지통 (있는 경우)입니다. | |
zoomControls_ | ZoomControls | 없음 |
메서드
메서드 | 수정자 | 설명 |
---|---|---|
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입니다. | |
getLayerManager() | ||
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() | 이 작업공간은 이동할 수 있나요? 즉, 사용자가 입력을 통해 작업공간의 XY 좌표를 재배치할 수 있습니다. 스크롤바, 스크롤 휠, 드래그, 스크롤 휠 또는 손가락을 모으거나 벌리는 확대/축소 (확대/축소가 마우스 위치의 중앙에 위치하므로)를 통해 이를 사용할 수 있습니다. 여기에는 XY 좌표가 프로그래밍 방식으로 결정되기 때문에 확대/축소 컨트롤을 사용한 확대/축소는 포함되지 않습니다. |
|
isMovableHorizontally() | 이 작업공간은 수평으로 이동할 수 있나요? | |
isMovableVertically() | 이 작업공간은 수직으로 이동할 수 있나요? | |
isVisible() | isVisible의 getter | |
markFocused() | 이 작업공간을 현재 포커스가 맞춰진 기본 작업공간으로 표시합니다. | |
moveDrag(e) | 이 작업공간에서 객체의 드래그를 추적합니다. | |
newBlock(prototypeName, opt_id) | 새로 생성된 블록을 가져옵니다. | |
newComment(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) | 변수 맵에서 이름을 업데이트하여 변수 이름을 바꿉니다. 이름이 변경된 변수를 즉시 표시하도록 플라이아웃을 업데이트합니다. | |
render() | 작업공간의 모든 블록을 렌더링합니다. | |
resize() | 모든 Workspace Chrome (도구 상자, 휴지통, 스크롤바 등)의 크기 조절 및 위치 변경 이 메서드는 휴지통, 확대/축소, 도구 상자 등의 크기와 위치를 다시 계산해야 하는 변경(예: 창 크기 조절)이 있을 때 호출되어야 합니다. | |
scrollCenter() | 작업공간의 중심을 맞춥니다. | |
setResizeHandlerWrapper(handler) | 나중에 삭제할 수 있도록 크기 조절 핸들러 데이터를 저장합니다. | |
setResizesEnabled(enabled) | 이 작업공간에 크기 조절이 사용 설정되었는지 여부를 업데이트합니다. 사용 설정하면 적절한 경우에 작업공간의 크기가 조절됩니다. 사용 중지하면 다시 사용 설정할 때까지 작업공간의 크기가 조절되지 않습니다. 일괄 작업 중에 성능을 위해 크기 조절을 피하려는 경우에 사용합니다. | |
setScale(newScale) | 작업공간의 확대/축소 배율을 설정합니다. | |
setTheme(theme) | 작업공간 테마 객체를 설정합니다. 전달된 테마가 없으면 기본적으로 Classic 테마로 설정됩니다. |
|
setVisible(isVisible) | 작업공간의 공개 상태를 전환합니다. 현재는 기본 작업공간에만 사용됩니다. | |
startDrag(e, xy) | 이 작업공간에서 객체의 드래그 추적을 시작합니다. | |
translate(x, y) | 이 작업공간을 새 좌표로 변환합니다. | |
updateInverseScreenCTM() | 반전 화면 CTM을 더러움으로 표시합니다. | |
updateToolbox(toolboxDef) | 기존 도구 상자에서 블록 트리를 수정합니다. | |
확대/축소(x, y, 양) | 지정된 (x, y) 좌표를 기준으로 작업공간을 확대하거나 축소합니다. | |
zoomCenter(type) | 확대 또는 축소를 사용하여 보기 중심에 있는 블록을 확대/축소합니다. | |
zoomToFit() | 가능한 경우 작업공간에 맞게 블록을 확대/축소합니다. |