사용자 정의 움직이는 개체
사용자 정의 움직이는 개체를 생성할 수 있습니다.
움직이는 개체에 HTML 요소를 넣을 수 있습니다. 다음 이미지는 움직이는 개체 안에 버튼 요소를 표시한 예시입니다.
움직이는 개체가 보이도록 할지 또는 잠금을 설정할 지를 isVisible 또는 isLocked 메서드로 지정할 수 있습니다. isLocked 메서드는 시트가 보호된 상태일 때만 효과가 있습니다. dynamicMove 메서드를 사용하여 행이나 열을 숨기거나 표시, 크기 조정 또는 이동할 때 움직이는 개체를 함께 이동할 지를 지정할 수 있습니다. 마찬가지로, dynamicSize 메서드를 통해 행이나 열을 숨기거나 표시, 크기 조정 또는 이동할 때 움직이는 개체 크기가 변경될 지를 지정할 수 있습니다.
fixedPosition 메서드가 true로 설정된 경우, 스크롤, 숨기기, 표시, 크기 조정 또는 행/열 이동 후에도 움직이는 개체의 위치는 고정됩니다. 이 경우 dynamicMove 및 dynamicSize 메서드는 비활성화됩니다. 단, fixedPosition이 true이더라도 움직이는 개체는 이동 및 크기 조정이 가능합니다.
fixedPosition이 true일 경우에도 다음 메서드들은 기존과 동일하게 동작합니다:
움직이는 개체는 마우스로 크기 조정 또는 이동할 수 있습니다. 또한 width, height, x, y 메서드를 사용하여 너비, 높이 및 위치를 설정할 수 있습니다. startColumn 및 startRow 메서드를 사용하여 행과 열 인덱스로 위치를 지정할 수 있으며, startColumnOffset 및 startRowOffset 메서드를 사용하여 오프셋도 설정할 수 있습니다. endColumn, endRow, endColumnOffset, endRowOffset 메서드도 설정 가능합니다.
다음 이미지는 startColumn, startRow, startColumnOffset, startRowOffset 메서드를 사용한 사용자 정의 움직이는 개체 예시입니다.
움직이는 개체는 마우스 좌클릭 또는 우클릭으로 선택할 수 있으며, isSelected 메서드를 통해 선택 상태를 확인할 수 있습니다. 여러 개의 움직이는 개체 사이를 Tab 키 또는 Shift+Tab으로 이동할 수 있습니다. Ctrl 또는 Shift 키를 누른 채 우클릭하면 여러 움직이는 개체를 동시에 선택할 수 있습니다.
표준 단축키를 사용하여 움직이는 개체를 잘라내기, 복사 또는 붙여넣기 할 수 있습니다. 실행 취소(undo) 및 다시 실행(redo)도 지원됩니다.
다음은 시트에 사용자 정의 움직이는 개체를 추가하는 코드 샘플입니다:
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);HTML 요소를 움직이는 개체의 콘텐츠로 설정할 경우, 복제되면서 움직이는 개체의 복잡한 정책으로 인해 해당 요소의 속성이 손실됩니다.
HTML 요소의 속성은 움직이는 개체의 콘텐츠가 로드된 후 FloatingObjectLoaded 이벤트를 통해 적용할 수 있습니다. 다음 코드는 로드된 움직이는 개체 콘텐츠에 ID와 이벤트 리스너를 추가하는 예시입니다:
activeSheet.bind(GC.Spread.Sheets.Events.FloatingObjectLoaded, (_, args) => {
args.element.id = 'some_id';
args.element.addEventListener('click', () => alert('clicking'));
});