ByoungSooPark/gemini-viewer-examples
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added example for customized markup toolbar

Browse Source
This commit is contained in:
yanzexuan
2022-11-11 16:02:53 +08:00
parent fbd78f4b8b
commit dbe4a61e7a
5 changed files with 148 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/config.json
View File

@ -30,6 +30,9 @@
}, {
"title": "多屏图纸对比",
"url": "./demo/dxf_4.html"
}, {
"title": "批注",
"url": "./demo/dxf_5.html"
}]
}, {
"title": "全景图",

143
public/demo/dxf_5.html Normal file
View 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>

BIN
public/demo/images/snapshots/load_and_view.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.0 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

2
public/demo/layerManager/LayerManager.js
View File

@ -135,7 +135,7 @@ export default class LayerManager {
this.closeBtn?.addEventListener("click", this.hide.bind(this));
const layersBtn = document.querySelector("#Layers");
layersBtn.addEventListener("click", () => {
layersBtn && layersBtn.addEventListener("click", () => {
if (layersBtn.classList.contains("active")) {
if (!this.viewer.layerManager) {
this.viewer.layerManager = new LayerManager(this.viewer);

2
public/demo/settings/DxfSettingsPanel.js
View File

@ -105,7 +105,7 @@ export default class DxfSettingsPanel {
});
const settingsToolbarBtn = document.querySelector("#Settings");
settingsToolbarBtn.addEventListener("click", () => {
settingsToolbarBtn && settingsToolbarBtn.addEventListener("click", () => {
if (settingsToolbarBtn.classList.contains("active")) {
if (!window.dxfSettingsPanel) {
window.dxfSettingsPanel = new DxfSettingsPanel(this.viewer);