Added example for customized markup toolbar
This commit is contained in:
yanzexuan
@ -30,6 +30,9 @@
|
|||||||
}, {
|
}, {
|
||||||
"title": "多屏图纸对比",
|
"title": "多屏图纸对比",
|
||||||
"url": "./demo/dxf_4.html"
|
"url": "./demo/dxf_4.html"
|
||||||
|
}, {
|
||||||
|
"title": "批注",
|
||||||
|
"url": "./demo/dxf_5.html"
|
||||||
}]
|
}]
|
||||||
}, {
|
}, {
|
||||||
"title": "全景图",
|
"title": "全景图",
|
||||||
|
|||||||
143
public/demo/dxf_5.html
Normal file
143
public/demo/dxf_5.html
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
<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: 60px;
|
||||||
|
top: 10%;
|
||||||
|
}
|
||||||
|
.markup-toolbar-btn {
|
||||||
|
min-width: 50px;
|
||||||
|
height: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
.btn-active {
|
||||||
|
background-color: cornflowerblue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="viewerContainer">
|
||||||
|
<div id="myCanvas" class="renderer-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 } from "./demo/libs/gemini-viewer.esm.min.js";
|
||||||
|
import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
|
||||||
|
import LayerManager from './demo/layerManager/LayerManager.js';
|
||||||
|
|
||||||
|
const models= [{
|
||||||
|
modelId: "dxf_0",
|
||||||
|
name: "dxf_0",
|
||||||
|
src: "./demo/models/dxf/rac_basic_sample_project.dxf",
|
||||||
|
merge: true,
|
||||||
|
visible: true,
|
||||||
|
}];
|
||||||
|
const config = {
|
||||||
|
containerId: "myCanvas",
|
||||||
|
enableAxisGizmo: true,
|
||||||
|
enableStats: true,
|
||||||
|
enableToolbar: false,
|
||||||
|
enableSpinner: true,
|
||||||
|
enableProgressBar: true,
|
||||||
|
enableBottomBar: true,
|
||||||
|
enableLayoutBar: true,
|
||||||
|
enableSelection: true,
|
||||||
|
};
|
||||||
|
const viewer = new DxfViewer(config);
|
||||||
|
// const fontFiles = ["three/fonts/Microsoft_YaHei_Regular.typeface.json"];
|
||||||
|
const fontFiles = ["./demo/three/fonts/hztxt.shx", "./demo/three/fonts/simplex.shx"];
|
||||||
|
await viewer.setFont(fontFiles);
|
||||||
|
|
||||||
|
window.viewer = viewer;
|
||||||
|
|
||||||
|
// loadProjectModel
|
||||||
|
let counter = 0; // to indicate how many models are loading
|
||||||
|
models.forEach((modelCfg) => {
|
||||||
|
if (modelCfg.visible === false) {
|
||||||
|
// visible is true by default
|
||||||
|
return; // only load visible ones
|
||||||
|
}
|
||||||
|
counter++;
|
||||||
|
const onProgress = (event) => {
|
||||||
|
let type = "Loading progress";
|
||||||
|
if (event.type === "parseProgress") {
|
||||||
|
type = "Parsing progress";
|
||||||
|
}
|
||||||
|
const progress = ((event.loaded * 100) / event.total).toFixed(2);
|
||||||
|
console.log(`[Demo] ${type}: ${progress}%`);
|
||||||
|
};
|
||||||
|
try {
|
||||||
|
viewer.loadModelAsync(modelCfg, onProgress).then(() => {
|
||||||
|
console.log(`[Demo] Loaded model ${modelCfg.src}`);
|
||||||
|
if (!viewer.layerManager) {
|
||||||
|
viewer.layerManager = new LayerManager(viewer);
|
||||||
|
}
|
||||||
|
}).finally(() => {
|
||||||
|
counter--;
|
||||||
|
});
|
||||||
|
} catch (ex) {
|
||||||
|
console.log(ex);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// as a demo page, add dxfSettingsPanel to window!
|
||||||
|
window.dxfSettingsPanel = new DxfSettingsPanel(viewer);
|
||||||
|
|
||||||
|
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");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 MiB After Width: | Height: | Size: 1.5 MiB |
@ -135,7 +135,7 @@ export default class LayerManager {
|
|||||||
this.closeBtn?.addEventListener("click", this.hide.bind(this));
|
this.closeBtn?.addEventListener("click", this.hide.bind(this));
|
||||||
|
|
||||||
const layersBtn = document.querySelector("#Layers");
|
const layersBtn = document.querySelector("#Layers");
|
||||||
layersBtn.addEventListener("click", () => {
|
layersBtn && layersBtn.addEventListener("click", () => {
|
||||||
if (layersBtn.classList.contains("active")) {
|
if (layersBtn.classList.contains("active")) {
|
||||||
if (!this.viewer.layerManager) {
|
if (!this.viewer.layerManager) {
|
||||||
this.viewer.layerManager = new LayerManager(this.viewer);
|
this.viewer.layerManager = new LayerManager(this.viewer);
|
||||||
|
|||||||
@ -105,7 +105,7 @@ export default class DxfSettingsPanel {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const settingsToolbarBtn = document.querySelector("#Settings");
|
const settingsToolbarBtn = document.querySelector("#Settings");
|
||||||
settingsToolbarBtn.addEventListener("click", () => {
|
settingsToolbarBtn && settingsToolbarBtn.addEventListener("click", () => {
|
||||||
if (settingsToolbarBtn.classList.contains("active")) {
|
if (settingsToolbarBtn.classList.contains("active")) {
|
||||||
if (!window.dxfSettingsPanel) {
|
if (!window.dxfSettingsPanel) {
|
||||||
window.dxfSettingsPanel = new DxfSettingsPanel(this.viewer);
|
window.dxfSettingsPanel = new DxfSettingsPanel(this.viewer);
|
||||||
|
|||||||
Reference in New Issue
Block a user