Skip to content

Commit 1ce46d1

Browse files
ZhangQiankun2025yanzexuan1egghuntersKevinZh0913
authored
Update (#18)
* Initial Commit * Initial commit * Remove vue, use js instead * Update image links in readme * Implement a new index page * Implement a new index page --------- Merge request URL: https://gemdale.coding.net/p/panda/d/dxf-viewer-examples/git/merge/1336?initial=true Co-authored-by: EvanYan * Delete x-viewer/x-viewer from package * Update x-viewer packages * Change dxf compare panel to English * Update icon * Update wording * Update script * Add example link to readme * Add example link to readme --------- Merge request URL: https://gemdale.coding.net/p/panda/d/dxf-viewer-examples/git/merge/1352 Co-authored-by: EvanYan * Add lisence info * Refine index page style * Upgrade x-viewer sdk * Upgrade x-viewer sdk --------- Co-authored-by: EvanYan <[email protected]> Co-authored-by: egghunters <[email protected]> Co-authored-by: ZhangQiankun <[email protected]>
1 parent 16e5abf commit 1ce46d1

File tree

14 files changed

+18710
-1815
lines changed

14 files changed

+18710
-1815
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
# dxf-viewer-examples
22
Examples for viewing DXF files using Three.js.
3+
- [Online examples](https://dxf.thingraph.site/)
34

45
## Run examples
56
```

‎compare/dxfComparePanel.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,22 +35,22 @@ export default class DxfComparePanel {
3535
}
3636
const changesValues = Object.values(changes);
3737

38-
header.innerHTML = `差异列表(${changesValues.length})`;
38+
header.innerHTML = `Changes(${changesValues.length})`;
3939

4040
const addedChangesValues = changesValues.filter((val) => val.type === "Added");
4141
const deletedChangeValues = changesValues.filter((val) => val.type === "Removed");
4242
const modifiedChanageValues = changesValues.filter((val) => val.type === "Modified");
4343

4444
if (addedChangesValues.length > 0) {
45-
this.buildList(addedChangesValues, "新增");
45+
this.buildList(addedChangesValues, "Added");
4646
}
4747

4848
if (deletedChangeValues.length > 0) {
49-
this.buildList(deletedChangeValues, "删除");
49+
this.buildList(deletedChangeValues, "Removed");
5050
}
5151

5252
if (modifiedChanageValues.length > 0) {
53-
this.buildList(modifiedChanageValues, "修改");
53+
this.buildList(modifiedChanageValues, "Modified");
5454
}
5555
}
5656

‎dxf_0.html‎

Lines changed: 15 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,10 @@
88
minimum-scale=1.0,
99
maximum-scale=1.0,
1010
user-scalable=no">
11-
<link rel="icon" href="/favicon.ico">
11+
<link rel="icon" href="./favicon.ico">
1212
<link rel="stylesheet" type="text/css" href="./global.css">
1313
<link rel="stylesheet" type="text/css" href="./iconfont/iconfont.css" />
1414
<link rel="stylesheet" type="text/css" href="./iconfont/iconfont2.css" />
15-
<link rel="stylesheet" href="./settings/SettingsPanel.css">
1615

1716
<style>
1817
#app {
@@ -122,24 +121,24 @@
122121
MarkupPlugin,
123122
MeasurementPlugin,
124123
ScreenshotPlugin,
124+
Settings2dPlugin,
125125
StatsPlugin,
126126
ToolbarMenuId,
127127
} from "@x-viewer/plugins";
128-
import Viewer2dSettingsPanel from './settings/Viewer2dSettingsPanel.js';
129128

130129
const models = [{
131130
modelId: "dxf_0",
132131
name: "dxf_0",
133132
src: "./models/dxf/dxf_0.dxf",
134133
merge: true,
135134
visible: true,
136-
}, /*{
135+
}, {
137136
modelId: "dxf_0_1",
138137
name: "dxf_0_1",
139138
src: "./models/dxf/dxf_0_1.dxf",
140139
merge: true,
141140
visible: true,
142-
}*/];
141+
}];
143142
const language = "en"; // "en" or "cn"
144143
const viewerCfg = {
145144
containerId: "myCanvas",
@@ -157,40 +156,24 @@
157156
window.viewer = viewer;
158157

159158
const menuConfig = {
160-
[ToolbarMenuId.Settings]: {
161-
onActive: () => {
162-
console.log("[Toolbar]", "Activate Settings");
163-
if (!window.settingsPanel) {
164-
window.settingsPanel = new Viewer2dSettingsPanel(window.viewer);
165-
}
166-
window.settingsPanel.show();
167-
},
168-
onDeactive: () => {
169-
console.log("[Toolbar]", "Deactivate Settings");
170-
window.settingsPanel.hide();
171-
},
172-
mutexIds: [
173-
ToolbarMenuId.Measure,
174-
ToolbarMenuId.MeasureDistance,
175-
ToolbarMenuId.MeasureArea,
176-
ToolbarMenuId.MeasureAngle,
177-
ToolbarMenuId.MeasureCoordinate,
178-
],
179-
},
180159
[ToolbarMenuId.Layers]: {
181160
onActive: () => {
182161
console.log("[Toolbar]", "Activate Layers");
183162
if (!window.layerManager) {
184-
window.layerManager = new LayerManagerPlugin(window.viewer)
185-
window.layerManager.addEventListener("Visibilitychange", (visible) => {
186-
window.toolbar.setActive("Layers", visible);
163+
window.layerManager = new LayerManagerPlugin(window.viewer);
164+
window.layerManager.addEventListener("visibilitychange", (visible) => {
165+
const isActive = toolbarPlugin.isActive(ToolbarMenuId.Layers);
166+
// do this check to avoid recursive call
167+
if (isActive !== visible) {
168+
toolbarPlugin.setActive(ToolbarMenuId.Layers, visible);
169+
}
187170
});
188171
}
189-
window.layerManager.show();
172+
window.layerManager.setVisible(true);
190173
},
191174
onDeactive: () => {
192175
console.log("[Toolbar]", "Deactivate Layers");
193-
window.layerManager.hide();
176+
window.layerManager.setVisible(false);
194177
},
195178
mutexIds: [
196179
ToolbarMenuId.Measure,
@@ -206,9 +189,10 @@
206189
const markupPlugin = new MarkupPlugin(viewer);
207190
const measurementPlugin = new MeasurementPlugin(viewer, { language });
208191
new ScreenshotPlugin(viewer);
192+
new Settings2dPlugin(viewer, { language, visible: false });
209193
new StatsPlugin(viewer);
210194
const hotpointPlugin = new HotpointPlugin(viewer);
211-
window.toolbar = new Viewer2dToolbarPlugin(viewer, { menuConfig, language });
195+
window.toolbarPlugin = new Viewer2dToolbarPlugin(viewer, { menuConfig, language });
212196

213197
let counter = 0; // to indicate how many models are loading
214198
models.forEach((modelCfg) => {

‎dxf_1.html‎

Lines changed: 13 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
<html>
22

33
<head>
4-
<link rel="icon" href="/favicon.ico" />
4+
<link rel="icon" href="./favicon.ico" />
55
<link rel="stylesheet" type="text/css" href="./global.css" />
66
<link rel="stylesheet" type="text/css" href="./iconfont/iconfont.css" />
77
<link rel="stylesheet" type="text/css" href="./iconfont/iconfont2.css" />
8-
<link rel="stylesheet" href="./settings/SettingsPanel.css">
98
<style>
109
#myCanvas {
1110
width: 100%;
@@ -41,10 +40,10 @@
4140
MarkupPlugin,
4241
MeasurementPlugin,
4342
ScreenshotPlugin,
43+
Settings2dPlugin,
4444
StatsPlugin,
4545
ToolbarMenuId,
4646
} from "@x-viewer/plugins";
47-
import Viewer2dSettingsPanel from './settings/Viewer2dSettingsPanel.js';
4847
const models = [{
4948
modelId: "dxf_1",
5049
name: "dxf_1",
@@ -68,40 +67,24 @@
6867
window.viewer = viewer;
6968

7069
const menuConfig = {
71-
[ToolbarMenuId.Settings]: {
72-
onActive: () => {
73-
console.log("[Toolbar]", "Activate Settings");
74-
if (!window.settingsPanel) {
75-
window.settingsPanel = new Viewer2dSettingsPanel(window.viewer);
76-
}
77-
window.settingsPanel.show();
78-
},
79-
onDeactive: () => {
80-
console.log("[Toolbar]", "Deactivate Settings");
81-
window.settingsPanel.hide();
82-
},
83-
mutexIds: [
84-
ToolbarMenuId.Measure,
85-
ToolbarMenuId.MeasureDistance,
86-
ToolbarMenuId.MeasureArea,
87-
ToolbarMenuId.MeasureAngle,
88-
ToolbarMenuId.MeasureCoordinate,
89-
],
90-
},
9170
[ToolbarMenuId.Layers]: {
9271
onActive: () => {
9372
console.log("[Toolbar]", "Activate Layers");
9473
if (!window.layerManager) {
95-
window.layerManager = new LayerManagerPlugin(window.viewer)
96-
window.layerManager.addEventListener("Visibilitychange", (visible) => {
97-
window.toolbar.setActive("Layers", visible);
74+
window.layerManager = new LayerManagerPlugin(window.viewer);
75+
window.layerManager.addEventListener("visibilitychange", (visible) => {
76+
const isActive = toolbarPlugin.isActive(ToolbarMenuId.Layers);
77+
// do this check to avoid recursive call
78+
if (isActive !== visible) {
79+
toolbarPlugin.setActive(ToolbarMenuId.Layers, visible);
80+
}
9881
});
9982
}
100-
window.layerManager.show();
83+
window.layerManager.setVisible(true);
10184
},
10285
onDeactive: () => {
10386
console.log("[Toolbar]", "Deactivate Layers");
104-
window.layerManager.hide();
87+
window.layerManager.setVisible(false);
10588
},
10689
mutexIds: [
10790
ToolbarMenuId.Measure,
@@ -118,8 +101,9 @@
118101
new MarkupPlugin(viewer);
119102
new MeasurementPlugin(viewer, { language });
120103
new ScreenshotPlugin(viewer);
104+
new Settings2dPlugin(viewer, { language, visible: false });
121105
new StatsPlugin(viewer);
122-
window.toolbar = new Viewer2dToolbarPlugin(viewer, { menuConfig, language });
106+
window.toolbarPlugin = new Viewer2dToolbarPlugin(viewer, { menuConfig, language });
123107

124108
let counter = 0; // to indicate how many models are loading
125109
models.forEach((modelCfg) => {

‎dxf_2.html‎

Lines changed: 12 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
<link rel="stylesheet" type="text/css" href="./global.css" />
66
<link rel="stylesheet" type="text/css" href="./iconfont/iconfont.css" />
77
<link rel="stylesheet" type="text/css" href="./iconfont/iconfont2.css" />
8-
<link rel="stylesheet" href="./settings/SettingsPanel.css">
98
<style>
109
#myCanvas {
1110
width: 100%;
@@ -41,10 +40,10 @@
4140
MarkupPlugin,
4241
MeasurementPlugin,
4342
ScreenshotPlugin,
43+
Settings2dPlugin,
4444
StatsPlugin,
4545
ToolbarMenuId,
4646
} from "@x-viewer/plugins";
47-
import Viewer2dSettingsPanel from './settings/Viewer2dSettingsPanel.js';
4847

4948
const models = [{
5049
modelId: "dxf_2",
@@ -69,40 +68,24 @@
6968
window.viewer = viewer;
7069

7170
const menuConfig = {
72-
[ToolbarMenuId.Settings]: {
73-
onActive: () => {
74-
console.log("[Toolbar]", "Activate Settings");
75-
if (!window.settingsPanel) {
76-
window.settingsPanel = new Viewer2dSettingsPanel(window.viewer);
77-
}
78-
window.settingsPanel.show();
79-
},
80-
onDeactive: () => {
81-
console.log("[Toolbar]", "Deactivate Settings");
82-
window.settingsPanel.hide();
83-
},
84-
mutexIds: [
85-
ToolbarMenuId.Measure,
86-
ToolbarMenuId.MeasureDistance,
87-
ToolbarMenuId.MeasureArea,
88-
ToolbarMenuId.MeasureAngle,
89-
ToolbarMenuId.MeasureCoordinate,
90-
],
91-
},
9271
[ToolbarMenuId.Layers]: {
9372
onActive: () => {
9473
console.log("[Toolbar]", "Activate Layers");
9574
if (!window.layerManager) {
96-
window.layerManager = new LayerManagerPlugin(window.viewer)
97-
window.layerManager.addEventListener("Visibilitychange", (visible) => {
98-
window.toolbar.setActive("Layers", visible);
75+
window.layerManager = new LayerManagerPlugin(window.viewer);
76+
window.layerManager.addEventListener("visibilitychange", (visible) => {
77+
const isActive = toolbarPlugin.isActive(ToolbarMenuId.Layers);
78+
// do this check to avoid recursive call
79+
if (isActive !== visible) {
80+
toolbarPlugin.setActive(ToolbarMenuId.Layers, visible);
81+
}
9982
});
10083
}
101-
window.layerManager.show();
84+
window.layerManager.setVisible(true);
10285
},
10386
onDeactive: () => {
10487
console.log("[Toolbar]", "Deactivate Layers");
105-
window.layerManager.hide();
88+
window.layerManager.setVisible(false);
10689
},
10790
mutexIds: [
10891
ToolbarMenuId.Measure,
@@ -119,8 +102,9 @@
119102
new MarkupPlugin(viewer);
120103
new MeasurementPlugin(viewer, { language });
121104
new ScreenshotPlugin(viewer);
105+
new Settings2dPlugin(viewer, { language, visible: false });
122106
new StatsPlugin(viewer);
123-
window.toolbar = new Viewer2dToolbarPlugin(viewer, { menuConfig, language });
107+
window.toolbarPlugin = new Viewer2dToolbarPlugin(viewer, { menuConfig, language });
124108

125109
let counter = 0; // to indicate how many models are loading
126110
models.forEach((modelCfg) => {

‎dxf_compare_1_viewport.html‎

Lines changed: 13 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
<link rel="stylesheet" type="text/css" href="./iconfont/iconfont.css" />
77
<link rel="stylesheet" type="text/css" href="./iconfont/iconfont2.css" />
88
<link rel="stylesheet" href="./compare/dxfComparePanel.css" />
9-
<link rel="stylesheet" href="./settings/SettingsPanel.css" />
109
<style>
1110
#myCanvas {
1211
width: 100%;
@@ -41,10 +40,10 @@
4140
MarkupPlugin,
4241
MeasurementPlugin,
4342
ScreenshotPlugin,
43+
Settings2dPlugin,
4444
ToolbarMenuId,
4545
} from "@x-viewer/plugins";
4646
import DxfComparePanel from "./compare/dxfComparePanel.js"
47-
import Viewer2dSettingsPanel from "./settings/Viewer2dSettingsPanel.js";
4847

4948
const url1 = "./models/dxf/doors_and_windows.dxf";
5049
const url2 = "./models/dxf/doors_and_windows_mopdified.dxf";
@@ -62,40 +61,24 @@
6261
window.compareHelper = compareHelper;
6362

6463
const menuConfig = {
65-
[ToolbarMenuId.Settings]: {
66-
onActive: () => {
67-
console.log("[Toolbar]", "Activate Settings");
68-
if (!window.settingsPanel) {
69-
window.settingsPanel = new Viewer2dSettingsPanel(compareHelper.viewer);
70-
}
71-
window.settingsPanel.show();
72-
},
73-
onDeactive: () => {
74-
console.log("[Toolbar]", "Deactivate Settings");
75-
window.settingsPanel.hide();
76-
},
77-
mutexIds: [
78-
ToolbarMenuId.Measure,
79-
ToolbarMenuId.MeasureDistance,
80-
ToolbarMenuId.MeasureArea,
81-
ToolbarMenuId.MeasureAngle,
82-
ToolbarMenuId.MeasureCoordinate,
83-
],
84-
},
8564
[ToolbarMenuId.Layers]: {
8665
onActive: () => {
8766
console.log("[Toolbar]", "Activate Layers");
8867
if (!window.layerManager) {
89-
window.layerManager = new LayerManagerPlugin(compareHelper.viewer)
90-
window.layerManager.addEventListener("Visibilitychange", (visible) => {
91-
window.toolbar.setActive("Layers", visible);
68+
window.layerManager = new LayerManagerPlugin(compareHelper.viewer);
69+
window.layerManager.addEventListener("visibilitychange", (visible) => {
70+
const isActive = toolbarPlugin.isActive(ToolbarMenuId.Layers);
71+
// do this check to avoid recursive call
72+
if (isActive !== visible) {
73+
toolbarPlugin.setActive(ToolbarMenuId.Layers, visible);
74+
}
9275
});
9376
}
94-
window.layerManager.show();
77+
window.layerManager.setVisible(true);
9578
},
9679
onDeactive: () => {
9780
console.log("[Toolbar]", "Deactivate Layers");
98-
window.layerManager.hide();
81+
window.layerManager.setVisible(false);
9982
},
10083
mutexIds: [
10184
ToolbarMenuId.Measure,
@@ -108,10 +91,11 @@
10891
};
10992

11093
new AxisGizmoPlugin(compareHelper.viewer, { ignoreZAxis: true });
111-
new ScreenshotPlugin(compareHelper.viewer);
11294
new MarkupPlugin(compareHelper.viewer);
11395
new MeasurementPlugin(compareHelper.viewer);
114-
window.toolbar = new Viewer2dToolbarPlugin(compareHelper.viewer, { menuConfig, language });
96+
new ScreenshotPlugin(compareHelper.viewer);
97+
new Settings2dPlugin(compareHelper.viewer, { language, visible: false });
98+
window.toolbarPlugin = new Viewer2dToolbarPlugin(compareHelper.viewer, { menuConfig, language });
11599

116100
const onProgress = (event) => {
117101
const progress = ((event.loaded * 100) / event.total).toFixed(2);

0 commit comments

Comments
 (0)