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

Upgrade gemini-viewer sdk

Browse Source
This commit is contained in:
yanzexuan
2023-06-27 13:12:18 +08:00
parent 3f9466219e
commit 3ba37afe15
6 changed files with 14 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/config.json
View File

@ -28,14 +28,11 @@
"title": "Doors & windows", "title": "Doors & windows",
"url": "./demo/dxf_2.html" "url": "./demo/dxf_2.html"
}, { }, {
"title": "Drawing comparison", "title": "Drawing comparison with 1 viewport",
"url": "./demo/dxf_3.html" "url": "./demo/dxf_3.html"
}, { }, {
"title": "Drawing comparison with 2 viewports", "title": "Drawing comparison with 2 viewports",
"url": "./demo/dxf_8.html" "url": "./demo/dxf_8.html"
}, {
"title": "Drawing comparison with 3 viewports",
"url": "./demo/dxf_4.html"
}, { }, {
"title": "Upload files and compare with 2 viewports", "title": "Upload files and compare with 2 viewports",
"url": "./demo/dxf_10.html" "url": "./demo/dxf_10.html"

4
public/demo/compare/dxfComparePanel.js
View File

@ -29,7 +29,7 @@ export default class DxfComparePanel {
panelContainer.appendChild(compareDetail); panelContainer.appendChild(compareDetail);
this.compareDetail = compareDetail; this.compareDetail = compareDetail;
const changes = this.viewer.getCompareChanges(); const changes = this.viewer.getChanges();
if (!changes) { if (!changes) {
return; return;
} }
@ -98,7 +98,7 @@ export default class DxfComparePanel {
lists.forEach((list) => { lists.forEach((list) => {
list.addEventListener("click", (e) => { list.addEventListener("click", (e) => {
if (e.target.tagName.toUpperCase() === "LI" && e.target.dataset.id) { if (e.target.tagName.toUpperCase() === "LI" && e.target.dataset.id) {
this.viewer.zoomToCompareChange(e.target.dataset.id); this.viewer.zoomToChange(e.target.dataset.id);
} }
}); });
}); });

2
public/demo/dxf_10.html
View File

@ -102,7 +102,7 @@
const fontFiles = ["./demo/three/fonts/hztxt.shx", "./demo/three/fonts/simplex.shx"]; const fontFiles = ["./demo/three/fonts/hztxt.shx", "./demo/three/fonts/simplex.shx"];
await compareHelper.setFont(fontFiles); await compareHelper.setFont(fontFiles);
compareHelper.viewer1.toolbar.updateMenus( compareHelper.viewer.toolbar.updateMenus(
overrideToolbarConfig(compareHelper.viewer1) overrideToolbarConfig(compareHelper.viewer1)
); );
compareHelper.viewer2.toolbar.updateMenus( compareHelper.viewer2.toolbar.updateMenus(

18
public/demo/dxf_3.html
View File

@ -20,7 +20,7 @@
<div id="myCanvas" class="container"></div> <div id="myCanvas" class="container"></div>
</div> </div>
<script type="module"> <script type="module">
import { DxfViewer, ToolbarMenuId } from "./demo/libs/gemini-viewer.esm.min.js"; import { BaseDxfCompareHelper, DxfViewer, ToolbarMenuId } from "./demo/libs/gemini-viewer.esm.min.js";
import DxfComparePanel from "./demo/compare/dxfComparePanel.js" import DxfComparePanel from "./demo/compare/dxfComparePanel.js"
import DxfSettingsPanel from "./demo/settings/DxfSettingsPanel.js"; import DxfSettingsPanel from "./demo/settings/DxfSettingsPanel.js";
import LayerManager from "./demo/layerManager/LayerManager.js"; import LayerManager from "./demo/layerManager/LayerManager.js";
@ -39,14 +39,14 @@
onActive: () => { onActive: () => {
console.log("[Toolbar]", "Activate Settings"); console.log("[Toolbar]", "Activate Settings");
if (!window.dxfSettingsPanel) { if (!window.dxfSettingsPanel) {
window.dxfSettingsPanel = new DxfSettingsPanel(window.viewer); window.dxfSettingsPanel = new DxfSettingsPanel(window.compareHelper.viewer);
} }
window.dxfSettingsPanel.show(); window.dxfSettingsPanel.show();
}, },
onDeactive: () => { onDeactive: () => {
console.log("[Toolbar]", "Deactivate Settings"); console.log("[Toolbar]", "Deactivate Settings");
if (!window.dxfSettingsPanel) { if (!window.dxfSettingsPanel) {
window.dxfSettingsPanel = new DxfSettingsPanel(window.viewer); window.dxfSettingsPanel = new DxfSettingsPanel(window.compareHelper.viewer);
} }
window.dxfSettingsPanel.hide(); window.dxfSettingsPanel.hide();
}, },
@ -55,31 +55,31 @@
onActive: () => { onActive: () => {
console.log("[Toolbar]", "Activate Layers"); console.log("[Toolbar]", "Activate Layers");
if (!window.layerManager) { if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer); window.layerManager = new LayerManager(window.compareHelper.viewer);
} }
window.layerManager.show(); window.layerManager.show();
}, },
onDeactive: () => { onDeactive: () => {
console.log("[Toolbar]", "Deactivate Layers"); console.log("[Toolbar]", "Deactivate Layers");
if (!window.layerManager) { if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer); window.layerManager = new LayerManager(window.compareHelper.viewer);
} }
window.layerManager.hide(); window.layerManager.hide();
}, },
}, },
}, },
}; };
const viewer = new DxfViewer(config); const compareHelper = new BaseDxfCompareHelper(config);
// const fontFiles = ["./demo/three/fonts/Microsoft_YaHei_Regular.typeface.json"]; // const fontFiles = ["./demo/three/fonts/Microsoft_YaHei_Regular.typeface.json"];
const fontFiles = ["./demo/three/fonts/hztxt.shx", "./demo/three/fonts/simplex.shx"]; const fontFiles = ["./demo/three/fonts/hztxt.shx", "./demo/three/fonts/simplex.shx"];
await viewer.setFont(fontFiles); await compareHelper.setFont(fontFiles);
window.viewer = viewer; window.compareHelper = compareHelper;
const onProgress = (event) => { const onProgress = (event) => {
const progress = ((event.loaded * 100) / event.total).toFixed(1); const progress = ((event.loaded * 100) / event.total).toFixed(1);
console.log(`[Demo] Loading progress: ${progress}%`); console.log(`[Demo] Loading progress: ${progress}%`);
}; };
await viewer.compare({src: url1, modelId: "doors_and_windows.dxf"}, {src: url2, modelId: "doors_and_windows_mopdified.dxf"}, onProgress).then(() => { await compareHelper.compare({src: url1, modelId: "doors_and_windows.dxf"}, {src: url2, modelId: "doors_and_windows_mopdified.dxf"}, onProgress).then(() => {
console.log(`[Demo] Compared models: ${url1}, ${url2}`); console.log(`[Demo] Compared models: ${url1}, ${url2}`);
}); });

142
public/demo/dxf_4.html
View File

@ -1,142 +0,0 @@
<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/compare/dxfComparePanel.css" />
<link rel="stylesheet" href="./demo/layerManager/layerManager.css" />
<link rel="stylesheet" href="./demo/settings/SettingsPanel.css" />
<style>
#myCanvas1 {
width: 40%;
height: 50%;
top: 0;
left: 0;
position: absolute;
border: 1px #dddddd solid;
}
#myCanvas2 {
width: 40%;
top: 50% !important;
height: 50%;
left: 0;
position: absolute;
border: 1px #dddddd solid;
}
#myCanvas3 {
width: 60%;
height: 100%;
top: 0;
right: 0;
position: absolute;
border: 1px #dddddd solid;
}
.title {
font-size: 18px;
z-index: 3;
position: absolute;
margin-top: 8px;
color: white;
top: 0%;
left: 18%;
}
.title2 {
top: 50%;
left: 18%;
}
.title3 {
left: 68%;
}
</style>
</head>
<body>
<div id="app">
<span class="title">File 1</span>
<div id="myCanvas1" class="container"></div>
<span class="title title2">File 2</span>
<div id="myCanvas2" class="container"></div>
<span class="title title3">Comparison result</span>
<!-- myCanvas3 is the one for compare -->
<div id="myCanvas3" class="container"></div>
</div>
<script type="module">
import { DxfViewer, ToolbarMenuId } from "./demo/libs/gemini-viewer.esm.min.js";
import DxfComparePanel from "./demo/compare/dxfComparePanel.js"
import DxfSettingsPanel from "./demo/settings/DxfSettingsPanel.js";
import LayerManager from "./demo/layerManager/LayerManager.js";
const url1 = "./demo/models/dxf/doors_and_windows.dxf";
const url2 = "./demo/models/dxf/doors_and_windows_mopdified.dxf";
const modelConfig1 = { modelId: "doors_and_windows", name: "dxf 1", src: url1, ignorePaperSpace: true };
const modelConfig2 = { modelId: "doors_and_windows_mopdified", name: "dxf 2", src: url2, ignorePaperSpace: true };
const config = {
containerId: "myCanvas3",
enableAxisGizmo: true,
enableToolbar: 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 viewer1 = new DxfViewer({ containerId: "myCanvas1"});
const viewer2 = new DxfViewer({ containerId: "myCanvas2"});
const viewer3 = new DxfViewer(config);
const fontFiles = ["./demo/three/fonts/hztxt.shx", "./demo/three/fonts/simplex.shx"];
await viewer1.setFont(fontFiles);
await viewer2.setFont(fontFiles);
await viewer3.setFont(fontFiles);
window.viewer = viewer3;
const onProgress = (event) => {
const progress = ((event.loaded * 100) / event.total).toFixed(1);
console.log(`[Demo] Loading progress: ${progress}%`);
};
await viewer1.loadModelAsync(modelConfig1, onProgress);
await viewer2.loadModelAsync(modelConfig2, onProgress);
await viewer3.compare(modelConfig1, modelConfig2, onProgress).then(() => {
console.log(`[Demo] Compared models: ${url1}, ${url2}`);
if (!viewer.dxfComparePanel) {
viewer.dxfComparePanel = new DxfComparePanel(viewer);
}
});
</script>
</body>
</html>

2
public/demo/dxf_8.html
View File

@ -86,7 +86,7 @@
const fontFiles = ["./demo/three/fonts/hztxt.shx", "./demo/three/fonts/simplex.shx"]; const fontFiles = ["./demo/three/fonts/hztxt.shx", "./demo/three/fonts/simplex.shx"];
await compareHelper.setFont(fontFiles); await compareHelper.setFont(fontFiles);
compareHelper.viewer1.toolbar?.updateMenus( compareHelper.viewer.toolbar?.updateMenus(
overrideToolbarConfig(compareHelper.viewer1) overrideToolbarConfig(compareHelper.viewer1)
); );
compareHelper.viewer2.toolbar?.updateMenus( compareHelper.viewer2.toolbar?.updateMenus(