Renamed compareSidePanel to dxfComparePanel

public/demo/compare/dxfComparePanel.css

@@ -9,7 +9,7 @@ b {
 .compare-panel-container {
     position: absolute;
     top: 80px;
-    right: 0;
+    right: 10px;
     width: 160px;
     height: auto;
     min-height: 200px;

public/demo/compare/dxfComparePanel.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-export default class CompareSidePanel {
+export default class DxfComparePanel {
     compareDetail;
     container;
     viewer;
@@ -29,13 +29,16 @@ export default class CompareSidePanel {
         panelContainer.appendChild(compareDetail);
         this.compareDetail = compareDetail;
 
-        const changes = this.viewer.changes;
+        const changes = this.viewer.getCompareChanges();
+        if (!changes) {
+            return;
+        }
         const changesValues = Object.values(changes);
 
         header.innerHTML = `差异列表(${changesValues.length})`;
 
         const addedChangesValues = changesValues.filter((val) => val.type === "Added");
-        const deletedChangeValues = changesValues.filter((val) => val.type === "Deleted");
+        const deletedChangeValues = changesValues.filter((val) => val.type === "Removed");
         const modifiedChanageValues = changesValues.filter((val) => val.type === "Modified");
 
         if (addedChangesValues.length > 0) {
@@ -62,7 +65,7 @@ export default class CompareSidePanel {
 
         let listFragment = "";
         changesValues.forEach((val) => {
-            listFragment += `<li class="list-item">${val.handle}</li>`;
+            listFragment += `<li data-id=${val.id} class="list-item">${val.handle}</li>`;
         });
         listEle.innerHTML = listFragment;
     }
@@ -94,8 +97,15 @@ export default class CompareSidePanel {
         const lists = document.querySelectorAll(".list");
         lists.forEach((list) => {
             list.addEventListener("click", (e) => {
-                this.viewer.zoomToCompareChange(e.target.innerHTML);
+                if (e.target.tagName.toUpperCase() === "LI" && e.target.dataset.id) {
+                    this.viewer.zoomToCompareChange(e.target.dataset.id);
+                }
             });
         });
     }
+
+    destroy() {
+        this.container.remove();
+        this.container = undefined;
+    }
 }

public/demo/dxf_3.html

@@ -4,7 +4,7 @@
     <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/compareSidePanel.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" />
 </head>
@@ -15,12 +15,12 @@
     </div>
     <script type="module">
         import { DxfViewer } from "./demo/libs/gemini-viewer.esm.min.js";
-        import DxfCompareSidePanel from "./demo/compare/compareSidePanel.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/dxf_3.dxf";
+        const url1 = "./demo/models/dxf/doors_and_windows.dxf";
-        const url2 = "./demo/models/dxf/dxf_3_1.dxf";
+        const url2 = "./demo/models/dxf/doors_and_windows_mopdified.dxf";
         const config = {
             containerId: "myCanvas",
             enableAxisGizmo: true,
@@ -38,13 +38,13 @@
             const progress = ((event.loaded * 100) / event.total).toFixed(1);
             console.log(`[Demo] Loading progress: ${progress}%`);
         };
-        await viewer.compare({src: url1, modelId: "dxf_3.dxf"}, {src: url2, modelId: "dxf_3_1.dxf"}, onProgress).then(() => {
+        await viewer.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}`);
             if (!viewer.layerManager) {
                 viewer.layerManager = new LayerManager(viewer);
             }
-            if (!viewer.dxfCompareSidePanel) {
+            if (!viewer.dxfComparePanel) {
-                viewer.dxfCompareSidePanel = new DxfCompareSidePanel(viewer);
+                viewer.dxfComparePanel = new DxfComparePanel(viewer);
             }
         });
 

public/demo/dxf_4.html

@@ -4,7 +4,7 @@
     <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/compareSidePanel.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>
@@ -63,14 +63,14 @@
     </div>
     <script type="module">
         import { DxfViewer } from "./demo/libs/gemini-viewer.esm.min.js";
-        import DxfCompareSidePanel from "./demo/compare/compareSidePanel.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/dxf_3.dxf";
+        const url1 = "./demo/models/dxf/doors_and_windows.dxf";
-        const url2 = "./demo/models/dxf/dxf_3_1.dxf";
+        const url2 = "./demo/models/dxf/doors_and_windows_mopdified.dxf";
-        const modelConfig1 = { modelId: "dxf_3", name: "dxf 1", src: url1, ignorePaperSpace: true };
+        const modelConfig1 = { modelId: "doors_and_windows", name: "dxf 1", src: url1, ignorePaperSpace: true };
-        const modelConfig2 = { modelId: "dxf_3_1", name: "dxf 2", src: url2, ignorePaperSpace: true };
+        const modelConfig2 = { modelId: "doors_and_windows_mopdified", name: "dxf 2", src: url2, ignorePaperSpace: true };
         const config = {
             containerId: "myCanvas3",
             enableAxisGizmo: true,
@@ -98,8 +98,8 @@
             if (!viewer3.layerManager) {
                 viewer3.layerManager = new LayerManager(viewer3);
             }
-            if (!viewer3.dxfCompareSidePanel) {
+            if (!viewer3.dxfComparePanel) {
-                viewer3.dxfCompareSidePanel = new DxfCompareSidePanel(viewer3);
+                viewer3.dxfComparePanel = new DxfComparePanel(viewer3);
             }
         });
 

public/demo/layerManager/layerManager.css

@@ -23,7 +23,7 @@ input[type="color"] {
 .popup-container {
     position: absolute;
     top: 76px;
-    left: calc(5%);
+    right: 10px;
     width: 330px;
     height: 600px;
     max-height: 90%; /* fix the issue when canvas's height is less than 600px */