149 lines
5.1 KiB
HTML
149 lines
5.1 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;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="viewerContainer">
|
|
<div id="myCanvas" class="renderer-container"></div>
|
|
</div>
|
|
<script type="module">
|
|
import { DxfViewer, ViewerEvent } 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: true,
|
|
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 measurementData = [{
|
|
type: "Distance",
|
|
id: "measure_data_id_1",
|
|
layoutName: "Model",
|
|
points: [[0, -22000], [6000, -22000]],
|
|
}, {
|
|
type: "Area",
|
|
id: "measure_data_id_2",
|
|
layoutName: "Model",
|
|
points: [[0, -23000], [6000, -23000], [6000, -25000], [0, -25000], [0, -23000]],
|
|
}, {
|
|
type: "Angle",
|
|
id: "measure_data_id_3",
|
|
layoutName: "Model",
|
|
points: [[0, -26000], [6000, -26000], [4000, -29000]],
|
|
}, {
|
|
type: "Distance",
|
|
id: "measure_data_id_4",
|
|
layoutName: "Layout1",
|
|
points: [[0, -10000], [0, 10000]],
|
|
}];
|
|
|
|
const markupData = [{
|
|
type: "ArrowMarkup",
|
|
id: "c6ea70a3-ddb0-4dd0-87c8-bd2491936428",
|
|
lineWidth: 2,
|
|
lineColor: "#ff0000",
|
|
fillColor: "#ff000030",
|
|
layoutName: "Model",
|
|
points: [[-15000, -9000], [-11000, -4000]],
|
|
}, {
|
|
type: "RectMarkup",
|
|
id: "82aba74f-7cd6-40e7-bac0-78d95a7bbecd",
|
|
lineWidth: 2,
|
|
lineColor: "#ff0000",
|
|
fillColor: "#ff000030",
|
|
layoutName: "Model",
|
|
points: [[-7000, -1800], [-1000, -5000]],
|
|
}, {
|
|
type: "DotMarkup",
|
|
id: "82aba74f-7cd6-40e7-bac0-78d95a7bbece",
|
|
lineWidth: 2,
|
|
lineColor: "#ff0000",
|
|
fillColor: "#ff000030",
|
|
layoutName: "Model",
|
|
points: [[-7000, -8000]],
|
|
}];
|
|
|
|
viewer.setMeasurements(measurementData);
|
|
viewer.setMarkups(markupData);
|
|
|
|
viewer.addEventListener(ViewerEvent.MarkupClicked, (data) => {
|
|
if (data.markup) {
|
|
console.log("[Demo] Clicked on markup:", data);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |