blockly > WorkspaceSvg

WorkspaceSvg 클래스

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

서명:

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

확장: Workspace

구현: IContextMenu, IFocusableNode, IFocusableTree

생성자

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

속성

속성	수정자	유형	설명
configureContextMenu		((menuOptions: ContextMenuOption[], e: Event) => void) | null	개발자는 이 함수를 정의하여 워크스페이스의 컨텍스트 메뉴에 맞춤 메뉴 옵션을 추가하거나 워크스페이스에서 만든 메뉴 옵션 세트를 수정할 수 있습니다.
keyboardAccessibilityMode		부울	키보드 접근성 모드가 사용 설정된 경우 true이고, 그렇지 않으면 false입니다.
keyboardMoveInProgress		부울	키보드에서 시작한 이동 ('드래그')이 진행 중인 경우에만 true입니다.
렌더링됨		부울	SVG 워크스페이스의 렌더링 상태입니다. 헤드리스 워크스페이스의 경우 false을, WorkspaceSvg 인스턴스의 경우 true를 반환합니다.
규모		숫자	현재 크기입니다.
scrollbar		ScrollbarPair | null	이 작업공간의 스크롤바(있는 경우)
scrollX		숫자	작업공간 원점을 기준으로 현재 수평 스크롤 오프셋(단위: 픽셀)입니다. 뷰와 그 아래에서 움직이는 캔버스를 생각해 보면 유용합니다. 캔버스가 오른쪽으로 이동하면 이 값이 더 양수가 되고 뷰는 이제 캔버스의 왼쪽을 '보게' 됩니다. 캔버스가 왼쪽으로 이동하면 이 값이 더 음수로 변하고 뷰는 이제 캔버스의 오른쪽을 '보게' 됩니다. 이 값에 관해 혼란스러운 점은 absoluteLeft 오프셋이 포함되지 않으며 포함되어서는 안 된다는 것입니다. viewLeft 값을 계산하는 데 사용되기 때문입니다. viewLeft는 워크스페이스 원점에 상대적입니다 (단위는 픽셀). 작업공간 원점은 작업공간의 왼쪽 상단입니다 (적어도 사용 설정된 경우). 툴박스 아래에 있지 않도록 blocklyDiv의 왼쪽 상단에서 이동합니다. 워크스페이스가 사용 설정되면 viewLeft와 워크스페이스 원점이 동일한 X 위치에 있습니다. 캔버스가 뷰 아래에서 오른쪽으로 미끄러지면서 이 값 (scrollX)은 더 양수가 되고 viewLeft는 워크스페이스 원점에 비해 더 음수가 됩니다 (워크스페이스 원점을 캔버스가 이동할 때 오른쪽으로 미끄러지는 캔버스의 점으로 생각해 보세요). 따라서 scrollX에 absoluteLeft가 포함되면 작업공간 원점이 'unshift'됩니다. 즉, viewLeft는 워크스페이스의 왼쪽 가장자리가 아닌 blocklyDiv의 왼쪽 가장자리를 나타냅니다.
scrollY		숫자	작업공간 원점을 기준으로 현재 수직 스크롤 오프셋(단위: 픽셀)입니다. 뷰와 그 아래에서 움직이는 캔버스를 생각해 보면 유용합니다. 캔버스가 아래로 이동하면 이 값이 더 양수가 되고 뷰는 이제 캔버스의 상단을 '보게' 됩니다. 캔버스가 위로 이동하면 이 값이 더 음수가 되고 뷰는 캔버스의 하단을 '보게' 됩니다. 이 값에 관해 혼란스러운 점은 absoluteTop 오프셋을 포함하지 않으며 포함해서는 안 된다는 것입니다. viewTop 값을 계산하는 데 사용되기 때문입니다. viewTop은 픽셀 단위로 작업공간 원점에 상대적입니다. 작업공간 원점은 작업공간의 왼쪽 상단입니다 (적어도 사용 설정된 경우). 툴박스 아래에 있지 않도록 blocklyDiv의 왼쪽 상단에서 이동합니다. 워크스페이스가 사용 설정되면 viewTop과 워크스페이스 원점이 동일한 Y 위치에 있습니다. 캔버스가 아래쪽으로 슬라이드하면 이 값 (scrollY)은 더 양수가 되고 viewTop은 워크스페이스 원점 (캔버스가 이동함에 따라 아래쪽으로 슬라이딩하는 캔버스의 점으로서의 워크스페이스 원점의 이미지)을 기준으로 더 음수가 됩니다. 따라서 scrollY에 absoluteTop이 포함되면 작업공간 원점이 'unshift'됩니다. 즉, viewTop은 작업공간의 상단 가장자리가 아닌 blocklyDiv의 상단 가장자리를 나타냅니다.
startScrollX		숫자	스크롤이 시작된 시점의 수평 스크롤 값(단위: 픽셀)입니다.
startScrollY		숫자	스크롤이 시작된 시점의 수직 스크롤 값(단위: 픽셀)입니다.
svgBackground_		SVGElement
svgBlockCanvas_		SVGElement
svgBubbleCanvas_		SVGElement
svgGroup_		SVGElement
themeManager_	protected	ThemeManager
휴지통		휴지통 | null	워크스페이스의 휴지통 (있는 경우)
zoomControls_		ZoomControls | null

메서드

메서드	수정자	설명
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()		작업공간의 절대 배율을 반환합니다. 작업공간 크기 조정은 곱셈입니다.크기가 Y인 작업공간 B (예: 변형 편집기)가 크기가 X인 루트 작업공간 A 내에 중첩된 경우 작업공간 B의 유효 크기는 X * Y입니다. A의 하위 요소이기 때문에 이미 A의 크기 조정 계수로 변환된 후 자체 크기 조정 계수로 다시 변환되기 때문입니다. 일반적으로 이 작업은 자동으로 실행되지만, 특정 워크스페이스와 시각적으로 연결되어 있지만 연결된 워크스페이스의 하위 요소가 아닌 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입니다.
getFocusableElement()		IFocusableNode.getFocusableElement를 참고하세요.
getFocusableTree()		IFocusableNode.getFocusableTree를 참고하세요.
getGrid()		이 워크스페이스의 그리드 객체를 가져오거나 객체가 없는 경우 null을 가져옵니다.
getInverseScreenCTM()		반전된 화면 CTM의 getter입니다.
getMarkerManager()		이 워크스페이스의 마커 관리자를 가져옵니다.
getMetricsManager()		이 워크스페이스의 측정항목 관리자를 가져옵니다.
getNavigator()		키보드 탐색 명령어에 대한 응답으로 이 워크스페이스의 항목 간에 포커스 이동을 조정하는 객체를 반환합니다.
getNestedTrees()		IFocusableTree.getNestedTrees를 참고하세요.
getParentSvg()		이 워크스페이스가 포함된 SVG 요소를 가져옵니다. 참고: 이는 작업공간이 DOM에 삽입된 후에만 호출된다고 가정합니다.
getRenderer()		이 작업공간에 연결된 블록 렌더러를 가져옵니다.
getRestoredFocusableNode(previousNode)		IFocusableTree.getRestoredFocusableNode를 참고하세요.
getRootFocusableNode()		IFocusableTree.getRootFocusableNode를 참고하세요.
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()		사용자가 현재 드래그 동작을 하고 있거나 키보드에서 시작된 이동이 진행 중인 경우에만 true를 반환합니다. 드래그 동작은 일반적으로 작업공간에서 블록이나 기타 항목을 이동하거나 플라이아웃/작업공간을 스크롤하는 것을 의미합니다. 키보드에서 시작된 움직임은 드래그 인프라를 사용하여 구현되며 드래그 동작의 하위 집합을 에뮬레이션하기 위한 것이므로 일반적으로 동작 기반 드래그인 것처럼 처리해야 합니다.
isMovable()		이 작업공간은 이동할 수 있나요? 즉, 사용자는 입력을 통해 워크스페이스의 XY 좌표를 재배치할 수 있습니다. 스크롤바, 스크롤 휠, 드래그 또는 스크롤 휠이나 손가락 모으기로 확대/축소할 수 있습니다 (확대/축소가 마우스 위치를 중심으로 이루어지기 때문). XY 좌표는 프로그래매틱 방식으로 결정되므로 확대/축소 컨트롤을 사용한 확대/축소는 여기에 포함되지 않습니다.
isMovableHorizontally()		이 작업공간을 가로로 이동할 수 있나요?
isMovableVertically()		이 작업공간은 세로로 이동할 수 있나요?
isVisible()		isVisible의 getter
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)		툴박스에서 맞춤 카테고리 이름을 클릭할 때의 콜백을 삭제합니다.
removeTopBlock(block)		인기 블록 목록에서 블록을 삭제합니다.
removeTopBoundedElement(element)		상위 경계 요소 목록에서 경계 요소를 삭제합니다.
removeTopComment(comment)		인기 댓글 목록에서 댓글을 삭제합니다.
render()		워크스페이스의 모든 블록을 렌더링합니다.
resize()		모든 워크스페이스 크롬 (도구 상자, 휴지통, 스크롤바 등)의 크기를 조절하고 위치를 변경합니다. 휴지통, 확대/축소, 도구 상자 등의 크기와 위치를 다시 계산해야 하는 상황이 변경될 때 호출해야 합니다(예: 창 크기 조절).
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()		가능하면 블록을 작업공간에 맞게 확대합니다.