blockly > WorkspaceSvg

WorkspaceSvg 클래스

작업공간의 클래스입니다. 이 영역은 휴지통, 스크롤 막대, 풍선, 드래그가 선택적으로 표시되는 화면 영역입니다.

서명:

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

확장: Workspace

구현: IContextMenu, IFocusableNode, IFocusableTree

생성자

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

속성

속성	수정자	유형	설명
configureContextMenu		((menuOptions: ContextMenuOption[], e: Event) => void) | null	개발자는 이 함수를 정의하여 워크스페이스의 컨텍스트 메뉴에 맞춤 메뉴 옵션을 추가하거나 워크스페이스에서 생성된 메뉴 옵션 집합을 수정할 수 있습니다.
keyboardAccessibilityMode		부울	키보드 접근성 모드가 사용 설정된 경우 true, 그렇지 않은 경우 false입니다.
keyboardMoveInProgress		부울	키보드에서 시작된 이동 ('드래그')이 진행 중인 경우에만 true입니다.
rendered		부울	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
trashcan		휴지통 | 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 요소를 가져옵니다.
getCommentById(id)		지정된 ID가 있는 작업공간 댓글을 반환합니다(있는 경우).
getComponentManager()		이 작업공간의 구성요소 관리자를 가져옵니다.
getCursor()		이 작업공간의 커서입니다.
getDragTarget(e)		포인터 이벤트가 발생한 드래그 타겟을 반환합니다.
getFlyout(opt_own)		이 작업공간과 연결된 플라이아웃의 게터입니다. 이 플라이아웃은 도구 상자 구성에 따라 도구 상자 또는 작업 공간이 소유할 수 있습니다. 플라이아웃이 없으면 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(ordered)		최상위 경계 요소를 찾아 반환합니다.
getTopComments(ordered)		이 작업공간의 댓글 목록을 반환합니다.
getWidth()		작업공간의 가로 오프셋을 반환합니다. XML에서 LTR/RTL 호환성을 위해 사용됩니다.
hideChaff(onlyClosePopups)		도움말, 컨텍스트 메뉴, 드롭다운 선택 등을 닫습니다.
hideComponents(onlyClosePopups)		자동 숨김 가능한 구성요소 (예: 플라이아웃, 휴지통, 사용자 등록 구성요소)를 숨깁니다.
highlightBlock(id, opt_state)		작업공간에서 블록을 강조 표시하거나 강조 표시를 해제합니다. 블록 강조 표시는 현재 실행 중인 블록을 시각적으로 표시하는 데 자주 사용됩니다.
isDraggable()		이 작업공간을 드래그할 수 있나요?
isDragging()		사용자가 현재 드래그 동작을 하고 있거나 키보드에서 시작된 이동이 진행 중인 경우 true를 반환합니다. 드래그 동작은 일반적으로 작업공간에서 블록이나 다른 항목을 이동하거나 플라이아웃/작업공간을 스크롤하는 것을 의미합니다. 키보드로 시작된 움직임은 드래그 인프라를 사용하여 구현되며 드래그 동작의 일부를 에뮬레이션하기 위한 것이므로 일반적으로 동작 기반 드래그인 것처럼 처리해야 합니다.
isMovable()		이 작업공간을 이동할 수 있나요? 즉, 사용자는 입력을 통해 워크스페이스의 X Y 좌표를 재배치할 수 있습니다. 스크롤바, 스크롤 휠, 드래그 또는 스크롤 휠이나 손가락 모으기를 사용한 확대/축소 (마우스 위치를 중심으로 확대/축소됨)를 통해 이 작업을 수행할 수 있습니다. X Y 좌표는 프로그래매틱 방식으로 결정되므로 확대/축소 컨트롤을 사용한 확대/축소는 포함되지 않습니다.
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()		작업 공간 Chrome (도구 상자, 휴지통, 스크롤 막대 등)의 크기를 조정하고 위치를 변경합니다. 이 함수는 휴지통, 확대/축소, 도구 상자 등의 크기와 위치를 다시 계산해야 하는 항목이 변경될 때 호출해야 합니다(예: 창 크기 조절).
scroll(x, y)		작업공간을 지정된 오프셋 (픽셀)으로 스크롤하여 작업공간 경계를 유지합니다. 이러한 값의 의미에 관한 자세한 내용은 workspaceSvg.scrollX에 관한 설명을 참고하세요.
scrollCenter()		작업공간을 가운데로 배치합니다.
setIsReadOnly(readOnly)
setNavigator(newNavigator)		이 작업공간에서 사용하는 탐색기 인스턴스를 설정합니다.
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()		가능하면 블록이 작업공간에 맞게 확대합니다.