플러그인 - UI
UI 플러그인 사용하기
MATHCORE API에서는 Cube를 이용할때 기본적으로 Cube UI를 사용할 수 있도록 추가 플러그인을 제공합니다.
플러그인을 사용하기 위해서 mathcore.helper를 통해 UI 소스코드 로드가 필요합니다.
cemware.helper.load('plugin.ui_cube', { key: 'TESTKEY' });
cube 인스턴스로부터 cube.createUI()를 호출하여 ui 인스턴스를 생성하고, 이 ui 인스턴스를 통해 기본제공 UI를 생성할 수 있습니다.
모달 UI 추가하기
ui 인스턴스의 ui.modals.mount()를 통해 모달 UI를 추가할 수 있습니다.
추가한 UI를 제거하려면 ui.modals.unmount()를 호출하세요.
다음 예제에서 점을 우클릭 또는 더블클릭하여 모달이 생기는 것을 확인하세요.
- 실행 결과
- 코드 보기
<html>
<head>
<script
src="https://www.mathcore.co.kr/api/libs/latest/helper.js"
defer
onload="onLoadHelper();"
></script>
<script>
async function onLoadHelper() {
await mathcore.helper.load(["cube", "plugin.ui_cube"], {
key: "TESTKEY"
});
const cube = new mathcore.cube.Cube();
await cube.render("cube");
cube.objectManager.factory.plainCube([1, 2, 0]);
const ui = cube.createUI();
ui.modals.mount();
}
</script>
</head>
<body>
<div id="cube"></div>
<style>
html,body {
margin: 0;
overflow: hidden;
}
#cube {
position: absolute;
left: 0;
width: 100%;
height: 100%;
}
</style>
</body>
</html>
메인 버튼 UI 추가하기
ui 인스턴스의 ui.buttons.mount()를 통해 버튼 UI를 추가할 수 있습니다.
추가한 UI를 제거하려면 ui.buttons.unmount()를 호출하세요.
ui.buttons.mount()를 호출할 때, 매개변수를 통해 어느 버튼을 추가할지 설정할 수 있습니다.
- 실행 결과
- 코드 보기
<html>
<head>
<script
src="https://www.mathcore.co.kr/api/libs/latest/helper.js"
defer
onload="onLoadHelper();"
></script>
<script>
async function onLoadHelper() {
await mathcore.helper.load(["cube", "plugin.ui_cube"], {
key: "TESTKEY"
});
const cube = new mathcore.cube.Cube();
await cube.render("cube");
const ui = cube.createUI();
ui.buttons.mount({
move: true,
returned: true,
undoRedo: true,
orthographic: true,
form: true,
personal: true,
});
}
</script>
</head>
<body>
<div id="cube"></div>
<style>
html,body {
margin: 0;
overflow: hidden;
}
#cube {
position: absolute;
left: 0;
width: 100%;
height: 100%;
}
</style>
</body>
</html>
설정 인자의 기본값은 다음과 같습니다.
{
"move": true,
"returned": true,
"undoRedo": true,
"orthographic": true,
"form": true,
"personal": true
}
| 인자 | 설명 |
|---|---|
move | 이동모드 / 회전모드 / 크기모드 |
returned | 원점 복귀 |
undoRedo | 실행 취소 / 다시 실행 |
orthographic | 한 방향에서 보기 |
form | 서식 |
personal | 1인칭 모드 |
설정 UI 추가하기
ui 인스턴스의 ui.setting.mount()를 통해 사용자 환경설정 UI를 추가할 수 있습니다. 추가한 UI를 제거하려면 ui.setting.unmount()를 호출하세요.
ui.setting.mount()를 호출할 때, 매개변수를 통해 어느 설정을 추가할지 설정할 수 있습니다.
- 실행 결과
- 코드 보기
<html>
<head>
<script
src="https://www.mathcore.co.kr/api/libs/latest/helper.js"
defer
onload="onLoadHelper();"
></script>
<script>
async function onLoadHelper() {
await mathcore.helper.load(["cube", "plugin.ui_cube"], {
key: "TESTKEY"
});
const cube = new mathcore.cube.Cube();
await cube.render("cube");
const ui = cube.createUI();
ui.setting.mount({
grid: true,
background: true,
figure: true,
camera: true
});
}
</script>
</head>
<body>
<div id="cube"></div>
<style>
html,body {
margin: 0;
overflow: hidden;
}
#cube {
position: absolute;
left: 0;
width: 100%;
height: 100%;
}
</style>
</body>
</html>
설정 인자의 기본값은 다음과 같습니다.
{
"grid": true,
"background": true,
"figure": true,
"camera": true
}
| 인자 | 설명 |
|---|---|
grid | 그리드 설정 |
background | 배경 설정 |
figure | 도형 설정 |
camera | 카메라 설정 |
도구 UI 추가하기
도구 UI 사용을 위해 ui.toolbox.mount() 호출이 필요합니다. 호출시 인자로 도구 UI를 렌더링할 HTMLElement을 지정해야합니다.
두번째 인자를 통해 도구 UI에 표시할 도구목록을 커스터마이징할 수 있습니다.
- 실행 결과
- 코드 보기
<html>
<head>
<script
src="https://www.mathcore.co.kr/api/libs/latest/helper.js"
defer
onload="onLoadHelper();"
></script>
<script>
async function onLoadHelper() {
await mathcore.helper.load(["cube", "plugin.ui_cube"], {
key: "TESTKEY"
});
const cube = new mathcore.cube.Cube();
await cube.render("cube");
const toolboxConfig = {
basic: ['basic/select', 'basic/delete'],
measure: ['measure/surfaceArea', 'measure/volume'],
cube: ['cube/plain', 'cube/stack'],
planarFigure: ['planarFigure/planarFigure'],
};
const ui = cube.createUI();
ui.toolbox.mount("toolbox", toolboxConfig);
}
</script>
</head>
<body>
<div id="cube"></div>
<div id="toolbox"></div>
<style>
html,body {
margin: 0;
overflow: hidden;
}
#cube {
position: absolute;
left: 0;
width: 50%;
height: 100%;
}
#toolbox {
position: absolute;
left: 50%;
width: 50%;
height: 100%;
}
</style>
</body>
</html>
설정 인자의 기본값은 다음과 같습니다.
{
"basic": ["basic/select", "basic/delete"],
"cube": ["cube/plain", "cube/stack"],
"geometry": [
"geometry/prism",
"geometry/pyramid",
"geometry/truncatedPyramid",
"geometry/cylinder",
"geometry/cone",
"geometry/truncatedCone",
"geometry/sphere",
"geometry/regularTetrahedron",
"geometry/regularCube",
"geometry/regularOctahedron",
"geometry/regularDodecahedron",
"geometry/regularIcosahedron"
],
"planarFigure": ["planarFigure/polygon", "planarFigure/planarFigure", "planarFigure/foldFigure"],
"measure": ["measure/surfaceArea", "measure/volume"]
}
basic/translate, basic/rotate, basic/scale, basic/none 툴은 추가하실 수 없습니다.
ui.getDefaultToolBoxConfig()를 호출하여 toolboxConfig의 기본값을 직접 얻을 수 있습니다.
속성 변경 UI 추가하기
속성 변경 UI 사용을 위해 ui.propertybox.mount() 호출이 필요합니다. 호출시 인자로 속성 변경 UI를 렌더링할 HTMLElement을 지정해야합니다.
- 실행 결과
- 코드 보기
<html>
<head>
<script
src="https://www.mathcore.co.kr/api/libs/latest/helper.js"
defer
onload="onLoadHelper();"
></script>
<script>
async function onLoadHelper() {
await mathcore.helper.load(["cube", "plugin.ui_cube"], {
key: "TESTKEY"
});
const cube = new mathcore.cube.Cube();
await cube.render("cube");
cube.objectManager.factory.plainCube([1, 2, 0]);
const ui = cube.createUI();
ui.propertybox.mount("propertybox");
}
</script>
</head>
<body>
<div id="cube"></div>
<div id="propertybox"></div>
<style>
html,body {
margin: 0;
overflow: hidden;
}
#cube {
position: absolute;
left: 0;
width: 50%;
height: 100%;
}
#propertybox {
position: absolute;
left: 50%;
width: 50%;
height: 100%;
}
</style>
</body>
</html>
탭 UI 추가하기
탭 UI를 사용을 위해 ui.tabs.mount() 호출이 필요합니다. 호출시 인자로 속성 변경 UI를 렌더링할 HTMLElement을 지정해야합니다.
두번째 인자로 테마를 설정할 수 있으며 세번째 인자로 추가할 탭을 커스터마이징할 수 있습니다.
- 실행 결과
- 코드 보기
<html>
<head>
<script
src="https://www.mathcore.co.kr/api/libs/latest/helper.js"
defer
onload="onLoadHelper();"
></script>
<script>
async function onLoadHelper() {
await cemware.helper.load(["cube", "plugin.ui_cube", "plugin.blockcoding"], {
key: "TESTKEY"
});
const cube = new cemware.cube.Cube();
await cube.render("cube");
cube.objectManager.factory.plainCube([1, 2, 0]);
const ui = cube.createUI();
ui.tabs.mount('tabs', 'Landscape');
}
</script>
</head>
<body>
<div id="cube"></div>
<div id="tabs"></div>
<style>
html,body {
margin: 0;
overflow: hidden;
}
#cube {
position: absolute;
left: 0;
width: 50%;
height: 100%;
}
#tabs {
position: absolute;
left: 50%;
width: 50%;
height: 100%;
}
</style>
</body>
</html>
설정할 수 있는 테마는 다음과 같습니다.
Portrait | Landscape
tabs에는 블록코딩이 포함되어 있어 helper.load()에 plugin.blockcoding을 추가해야 합니다.