151 lines
5.8 KiB
HTML
151 lines
5.8 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<link rel="icon" href="./demo/favicon.ico">
|
|
<link rel="stylesheet" type="text/css" href="./demo/global.css">
|
|
<link rel="stylesheet" type="text/css" href="./demo/iconfont/iconfont.css">
|
|
<link rel="stylesheet" href="./demo/layerManager/layerManager.css">
|
|
<link rel="stylesheet" href="./demo/settings/SettingsPanel.css">
|
|
<style>
|
|
/* #myCanvas {
|
|
position: absolute;
|
|
width: calc(100% - 100px);
|
|
width: -moz-calc(100% - 100px);
|
|
width: -webkit-calc(100% - 100px);
|
|
height: calc(100% - 80px);
|
|
height: -moz-calc(100% - 80px);
|
|
height: -webkit-calc(100vh - 80px);
|
|
left: 50px;
|
|
top: 40px;
|
|
} */
|
|
.markup-toolbar {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 20px;
|
|
}
|
|
.markup-toolbar-btn {
|
|
min-width: 50px;
|
|
height: 30px;
|
|
cursor: pointer;
|
|
padding: 2px;
|
|
}
|
|
.btn-active {
|
|
background-color: cornflowerblue;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div id="myCanvas" class="container"></div>
|
|
<div class="markup-toolbar">
|
|
<button id="ArrowMarkup" class="markup-toolbar-btn">Arrow</button>
|
|
<button id="RectMarkup" class="markup-toolbar-btn">Rect</button>
|
|
<button id="CircleMarkup" class="markup-toolbar-btn">Circle</button>
|
|
<button id="DotMarkup" class="markup-toolbar-btn">Dot</button>
|
|
<button id="ClearMarkups" class="markup-toolbar-btn" title="Clear all markups">Clear</button>
|
|
</div>
|
|
</div>
|
|
<script type="module">
|
|
import { DxfViewer, ViewerEvent, ToolbarMenuId } from "./demo/libs/gemini-viewer.esm.min.js";
|
|
import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
|
|
import LayerManager from './demo/layerManager/LayerManager.js';
|
|
|
|
const filename = "rac_basic_sample_project";
|
|
const modelCfg = {
|
|
modelId: filename,
|
|
name: filename,
|
|
src: `./demo/models/dxf/${filename}.dxf`,
|
|
merge: true,
|
|
};
|
|
const viewerCfg = {
|
|
containerId: "myCanvas",
|
|
enableAxisGizmo: true,
|
|
enableSpinner: true,
|
|
enableProgressBar: true,
|
|
enableLayoutBar: true,
|
|
toolbarMenuConfig: {
|
|
[ToolbarMenuId.Settings]: {
|
|
onActive: () => {
|
|
console.log("[Toolbar]", "Activate Settings");
|
|
if (!window.dxfSettingsPanel) {
|
|
window.dxfSettingsPanel = new DxfSettingsPanel(window.viewer);
|
|
}
|
|
window.dxfSettingsPanel.show();
|
|
},
|
|
onDeactive: () => {
|
|
console.log("[Toolbar]", "Deactivate Settings");
|
|
if (!window.dxfSettingsPanel) {
|
|
window.dxfSettingsPanel = new DxfSettingsPanel(window.viewer);
|
|
}
|
|
window.dxfSettingsPanel.hide();
|
|
},
|
|
},
|
|
[ToolbarMenuId.Layers]: {
|
|
onActive: () => {
|
|
console.log("[Toolbar]", "Activate Layers");
|
|
if (!window.layerManager) {
|
|
window.layerManager = new LayerManager(window.viewer);
|
|
}
|
|
window.layerManager.show();
|
|
},
|
|
onDeactive: () => {
|
|
console.log("[Toolbar]", "Deactivate Layers");
|
|
if (!window.layerManager) {
|
|
window.layerManager = new LayerManager(window.viewer);
|
|
}
|
|
window.layerManager.hide();
|
|
},
|
|
},
|
|
},
|
|
};
|
|
const viewer = new DxfViewer(viewerCfg);
|
|
const fontFiles = ["./demo/three/fonts/hztxt.shx", "./demo/three/fonts/simplex.shx"];
|
|
await viewer.setFont(fontFiles);
|
|
window.viewer = viewer;
|
|
|
|
const onProgress = (event) => {
|
|
const progress = ((event.loaded * 100) / event.total).toFixed(1);
|
|
console.log(`[Demo] Loading progress: ${progress}%`);
|
|
};
|
|
await viewer.loadModelAsync(modelCfg, onProgress);
|
|
console.log(`[Demo] Loaded model ${modelCfg.src}`);
|
|
|
|
const markupButtonClicked = (markupType, btn) => {
|
|
// deactive current markup
|
|
const activeMarkupType = viewer.getActiveMarkupType();
|
|
if (activeMarkupType) {
|
|
let activeBtn = document.getElementById(activeMarkupType);
|
|
activeBtn.classList.remove("btn-active");
|
|
viewer.deactivateMarkup(activeMarkupType);
|
|
}
|
|
if (markupType === "ClearMarkups") {
|
|
viewer.clearMarkups();
|
|
return;
|
|
}
|
|
// active new markup if a different type is clicked
|
|
if (activeMarkupType !== markupType) {
|
|
btn.classList.add("btn-active");
|
|
viewer.activateMarkup(markupType);
|
|
}
|
|
};
|
|
const registerClickEvent = (markupType) => {
|
|
let btn = document.getElementById(markupType);
|
|
btn.onclick = () => markupButtonClicked(markupType, btn);
|
|
};
|
|
|
|
registerClickEvent("ArrowMarkup");
|
|
registerClickEvent("RectMarkup");
|
|
registerClickEvent("CircleMarkup");
|
|
registerClickEvent("DotMarkup");
|
|
registerClickEvent("ClearMarkups");
|
|
|
|
viewer.addEventListener(ViewerEvent.MarkupClicked, (data) => {
|
|
if (data.markup) {
|
|
console.log("[Demo] Clicked on markup:", data);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |