사용자 고유의 기능 추가
HTML, JavaScript 및 CSS 패널 내부
플러그인 플레이그라운드 샘플 플러그인에서 편집을 클릭하면 HTML, JS(JavaScript) 및 CSS 패널이 표시됩니다. HTML 패널(왼쪽)을 사용하면 플러그인의 사용자 인터페이스를 수정할 수 있습니다. JS 패널(가운데)을 사용하면 FormIt JS 플러그인 API를 사용하여 FormIt과 통신할 수 있는 함수를 작성할 수 있습니다. 마지막으로 CSS 패널(오른쪽)은 HTML의 스타일을 결정합니다.
함수를 추가하여 원통 작성
이 플러그인에 원통을 작성하기 위한 기능을 추가해 보겠습니다.
먼저 HTML 패널에서 입력 필드와 UI 버튼을 구성합니다. 다음 코드를 복사하여 23번 행 뒤와 <!-- Do not remove below scripts unless you know what you're doing- - > 앞에 붙여넣습니다.
이렇게 하면 플러그인에 몇 가지 기본 UI 요소가 추가됩니다.
<p>Cylinder: Create a cylinder at the origin.</p>
<div>
<input id="Radius" type=number value=2 />
<label>Radius</label>
</div>
<div>
<input id="CHeight" type=number value =0.5 />
<label>Height</label>
</div>
<input id="CreateCylinderBtn" type=button value="Create Cylinder" />
다음으로, JS 패널에 두 개의 함수를 추가해 보겠습니다. 다음 코드를 복사하여 파일 끝에 붙여넣습니다(16번 행 뒤).
그러면 FormIt 작업공간에 원통이 작성됩니다
// Create cylinder
const createCylinder = async (r,h) =>
{
const posCenter = await WSM.Geom.Point3d(0,0,0);
const histID = await FormIt.GroupEdit.GetEditingHistoryID();
console.log(histID,posCenter,r,h);
const cyl = await WSM.APICreateCylinder(histID,posCenter,r,h);
}
// Execute function when 'create cylinder' button is clicked
document.getElementById("CreateCylinderBtn").addEventListener("click", ()=>
{
console.log('create cylinder clicked')
const r = Number(document.getElementById("Radius").value);
const h = Number(document.getElementById("CHeight").value);
createCylinder(r,h);
});
실행 및 미리보기
결과를 볼 준비가 되면 재생 버튼 
을 다시 클릭합니다. 그러면 플러그인에 대한 업데이트가 동일한 패널에 표시됩니다.
FormIt 플러그인 API
FormIt 플러그인 API에 대한 전체 설명서는 유용한 링 섹션을 참고하십시오.
Last updated