f.Component().element

f.Component(fid, sectorObject).element

개요

특정 컴포넌트의 HTML 요소를 반환받을 수 있습니다. 커스텀 이벤트를 생성하거나 스타일을 제어할 수 있습니다.

이벤트 스크립트에서만 사용가능합니다.

예시

// 섹터 미지정
const  layout1 = f.Component("f_1").element;
console.log(layout1)
//섹터 지정 
const sectors = f.Component("f_1").getSectors(); // 해당 컴포넌트와 관련된 섹터 배열
const  layout2 = f.Component("f_1", sectors[2]).element; // 타켓 섹터 지정

브라우저 콘솔창 결과

활용

• 스크립트 도우미 기능을 활용하여 메서드들을 사용할 수 있는 컴포넌트 리스트를 한눈에 확인하고, fid값에 쉽게 접근 할 수 있습니다.

• click이벤트로 활용하기

스텝 버튼 컴포넌트를 찾아 클릭하는 이벤트 스크립트

스크립트로 요소에 클릭 이벤트를 발생시켜 이벤트 처리를 핸들링할 수 있습니다.

• 커스텀 이벤트 사용하기

const draggable = f.Component("f_12").element
_v.isDragging = false;
_v.offsetX = null;
_v.offsetY = null;

function startDrag(event) {
    _v.isDragging = true;
    const rect = draggable.getBoundingClientRect();
    _v.offsetX = event.clientX - (rect.left + rect.width / 2); // 요소의 중심과 마우스 클릭한 위치의 차이를 계산
    _v.offsetY = event.clientY - (rect.top + rect.height / 2); // 요소의 중심과 마우스 클릭한 위치의 차이를 계산
}

function endDrag() {
    _v.isDragging = false;
    _v.offsetX = null;
		_v.offsetY = null;
}

function drag(event) {
    if (_v.isDragging) {
        const x = event.clientX - _v.offsetX;
        const y = event.clientY - _v.offsetY;
        draggable.style.transform = `translate(${x}px, ${y}px)`;
    }
}

draggable.addEventListener('mousedown', startDrag);
draggable.addEventListener('mouseup', endDrag);
document.addEventListener('mousemove', drag);
//앱 이벤트를  위한 처리
...

f.Component(fid).element이 Dom element임을 활용한 커스텀 이벤트 예제입니다.

addEventListener로 이벤트에 따른 요소의 움직임을 구현할 수 있습니다.