Skip to content

Commit 1f394bc

Browse files
yanzexuan1yanzexuan1
authored
Merge pull request #27 from thingraph/feature/update
Update example pages
2 parents 90ed73a + b40f1a4 commit 1f394bc

8 files changed

Lines changed: 243 additions & 89 deletions

‎dwg_json_viewer.html‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,27 @@
2828
border-radius: 4px;
2929
cursor: pointer;
3030
}
31+
.btn.disabled {
32+
opacity: 0.5;
33+
cursor: default;
34+
pointer-events: none;
35+
}
3136
</style>
3237
</head>
3338
<body>
3439
<h1>Dwg/dxf Database JSON Viewer</h1>
3540
<table class="table">
3641
<tr>
3742
<td>
38-
<label for="fileInput" class="btn">Choose Dwg File</label>
39-
<input type="file" id="fileInput" accept=".dwg" style="display: none;" />
43+
<label for="fileInput" class="btn disabled">Choose Dwg File</label>
44+
<input type="file" id="fileInput" accept=".dwg" style="display: none;" disabled />
4045
<span id="dwgFileName">No File Chosen</span>
4146
<div id="dwgInfo"></div>
4247
</td>
4348
<td></td>
4449
<td>
45-
<label for="fileInputDxf" class="btn">Choose Dxf File</label>
46-
<input type="file" id="fileInputDxf" accept=".dxf" style="display: none;" />
50+
<label for="fileInputDxf" class="btn disabled">Choose Dxf File</label>
51+
<input type="file" id="fileInputDxf" accept=".dxf" style="display: none;" disabled />
4752
<span id="dxfFileName">No File Chosen</span>
4853
<div id="dxfInfo"></div>
4954
</td>
@@ -67,7 +72,7 @@ <h1>Dwg/dxf Database JSON Viewer</h1>
6772
(function() {
6873
// Check if running locally (localhost, 127.0.0.1, or file:// protocol)
6974
const wl = window.location;
70-
const isDevEnv = wl.hostname === 'localhost' || wl.hostname === '127.0.0.1';
75+
const isDevEnv = false;
7176

7277
// Load jsoneditor based on environment
7378
const jsoneditorJsPath = isDevEnv
@@ -90,9 +95,12 @@ <h1>Dwg/dxf Database JSON Viewer</h1>
9095
document.head.appendChild(script);
9196

9297
// Set import map for x-viewer/core
93-
const corePath = isDevEnv
94-
? "../packages/core/dist/index.esm.js"
95-
: "https://cdn.jsdelivr.net/npm/@x-viewer/core@latest/dist/index.esm.js";
98+
const resolvePath = (pkgName) =>
99+
isDevEnv
100+
? `../packages/${pkgName}/dist/index.esm.js`
101+
: `https://cdn.jsdelivr.net/npm/@x-viewer/${pkgName}@latest/dist/index.esm.js`;
102+
103+
const corePath = resolvePath("core");
96104

97105
const importMap = document.createElement('script');
98106
importMap.type = 'importmap';
@@ -107,6 +115,14 @@ <h1>Dwg/dxf Database JSON Viewer</h1>
107115
<script type="module">
108116
import { DxfParser, VERSION, LIBREDWG_WEB_VERSION } from "@x-viewer/core";
109117

118+
// Enable file selection buttons after page and resources are fully loaded
119+
window.addEventListener("load", () => {
120+
document.querySelector('label[for="fileInput"]').classList.remove("disabled");
121+
document.querySelector('label[for="fileInputDxf"]').classList.remove("disabled");
122+
document.getElementById("fileInput").disabled = false;
123+
document.getElementById("fileInputDxf").disabled = false;
124+
});
125+
110126
// Display libredwg-web version
111127
const libredwgVersionElement = document.getElementById('libredwgVersion');
112128
if (libredwgVersionElement && LIBREDWG_WEB_VERSION) {

‎dxf_0.html‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,11 @@
2121
}
2222

2323
#myCanvas {
24-
width: 100%;
25-
height: 100%;
26-
overflow: hidden;
24+
position: absolute;
25+
width: 90%;
26+
height: 90%;
27+
left: 7.5%;
28+
top: 7.5%;
2729
}
2830

2931
.hotpoint {
@@ -97,14 +99,31 @@
9799
<div id="app">
98100
<div id="myCanvas"></div>
99101
</div>
100-
<script type="importmap">
101-
{
102-
"imports": {
103-
"@x-viewer/core": "https://cdn.jsdelivr.net/npm/@x-viewer/core@latest/dist/index.esm.js",
104-
"@x-viewer/plugins": "https://cdn.jsdelivr.net/npm/@x-viewer/plugins@latest/dist/index.esm.js",
105-
"@x-viewer/ui": "https://cdn.jsdelivr.net/npm/@x-viewer/ui@latest/dist/index.esm.js"
106-
}
107-
}
102+
<script>
103+
// Auto-detect environment and set import map for x-viewer packages
104+
(function () {
105+
const wl = window.location;
106+
const isDevEnv = false;
107+
const resolvePath = (pkgName) =>
108+
isDevEnv
109+
? `../packages/${pkgName}/dist/index.esm.js`
110+
: `https://cdn.jsdelivr.net/npm/@x-viewer/${pkgName}@latest/dist/index.esm.js`;
111+
112+
const corePath = resolvePath("core");
113+
const pluginsPath = resolvePath("plugins");
114+
const uiPath = resolvePath("ui");
115+
116+
const importMap = document.createElement("script");
117+
importMap.type = "importmap";
118+
importMap.textContent = JSON.stringify({
119+
imports: {
120+
"@x-viewer/core": corePath,
121+
"@x-viewer/plugins": pluginsPath,
122+
"@x-viewer/ui": uiPath,
123+
},
124+
});
125+
document.head.appendChild(importMap);
126+
})();
108127
</script>
109128
<script type="module">
110129
import {

‎dxf_1.html‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,31 @@
1818
<div id="app">
1919
<div id="myCanvas"></div>
2020
</div>
21-
<script type="importmap">
22-
{
23-
"imports": {
24-
"@x-viewer/core": "../packages/core/dist/index.esm.js",
25-
"@x-viewer/plugins": "../packages/plugins/dist/index.esm.js",
26-
"@x-viewer/ui": "../packages/ui/dist/index.esm.js"
27-
}
28-
}
21+
<script>
22+
// Auto-detect environment and set import map for x-viewer packages
23+
(function () {
24+
const wl = window.location;
25+
const isDevEnv = false;
26+
const resolvePath = (pkgName) =>
27+
isDevEnv
28+
? `../packages/${pkgName}/dist/index.esm.js`
29+
: `https://cdn.jsdelivr.net/npm/@x-viewer/${pkgName}@latest/dist/index.esm.js`;
30+
31+
const corePath = resolvePath("core");
32+
const pluginsPath = resolvePath("plugins");
33+
const uiPath = resolvePath("ui");
34+
35+
const importMap = document.createElement("script");
36+
importMap.type = "importmap";
37+
importMap.textContent = JSON.stringify({
38+
imports: {
39+
"@x-viewer/core": corePath,
40+
"@x-viewer/plugins": pluginsPath,
41+
"@x-viewer/ui": uiPath,
42+
},
43+
});
44+
document.head.appendChild(importMap);
45+
})();
2946
</script>
3047
<script type="module">
3148
import {

‎dxf_2.html‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,31 @@
1818
<div id="app">
1919
<div id="myCanvas"></div>
2020
</div>
21-
<script type="importmap">
22-
{
23-
"imports": {
24-
"@x-viewer/core": "../packages/core/dist/index.esm.js",
25-
"@x-viewer/plugins": "../packages/plugins/dist/index.esm.js",
26-
"@x-viewer/ui": "../packages/ui/dist/index.esm.js"
27-
}
28-
}
21+
<script>
22+
// Auto-detect environment and set import map for x-viewer packages
23+
(function () {
24+
const wl = window.location;
25+
const isDevEnv = false;
26+
const resolvePath = (pkgName) =>
27+
isDevEnv
28+
? `../packages/${pkgName}/dist/index.esm.js`
29+
: `https://cdn.jsdelivr.net/npm/@x-viewer/${pkgName}@latest/dist/index.esm.js`;
30+
31+
const corePath = resolvePath("core");
32+
const pluginsPath = resolvePath("plugins");
33+
const uiPath = resolvePath("ui");
34+
35+
const importMap = document.createElement("script");
36+
importMap.type = "importmap";
37+
importMap.textContent = JSON.stringify({
38+
imports: {
39+
"@x-viewer/core": corePath,
40+
"@x-viewer/plugins": pluginsPath,
41+
"@x-viewer/ui": uiPath,
42+
},
43+
});
44+
document.head.appendChild(importMap);
45+
})();
2946
</script>
3047
<script type="module">
3148
import {

‎dxf_compare_1_viewport.html‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,31 @@
1818
<div id="app">
1919
<div id="myCanvas"></div>
2020
</div>
21-
<script type="importmap">
22-
{
23-
"imports": {
24-
"@x-viewer/core": "../packages/core/dist/index.esm.js",
25-
"@x-viewer/plugins": "../packages/plugins/dist/index.esm.js",
26-
"@x-viewer/ui": "../packages/ui/dist/index.esm.js"
27-
}
28-
}
21+
<script>
22+
// Auto-detect environment and set import map for x-viewer packages
23+
(function () {
24+
const wl = window.location;
25+
const isDevEnv = false;
26+
const resolvePath = (pkgName) =>
27+
isDevEnv
28+
? `../packages/${pkgName}/dist/index.esm.js`
29+
: `https://cdn.jsdelivr.net/npm/@x-viewer/${pkgName}@latest/dist/index.esm.js`;
30+
31+
const corePath = resolvePath("core");
32+
const pluginsPath = resolvePath("plugins");
33+
const uiPath = resolvePath("ui");
34+
35+
const importMap = document.createElement("script");
36+
importMap.type = "importmap";
37+
importMap.textContent = JSON.stringify({
38+
imports: {
39+
"@x-viewer/core": corePath,
40+
"@x-viewer/plugins": pluginsPath,
41+
"@x-viewer/ui": uiPath,
42+
},
43+
});
44+
document.head.appendChild(importMap);
45+
})();
2946
</script>
3047
<script type="module">
3148
import {

‎dxf_compare_2_viewports.html‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -55,14 +55,31 @@
5555
</div>
5656
<button id="syncCamera" title="Click to sync or unsync cameras">unsynced</button>
5757

58-
<script type="importmap">
59-
{
60-
"imports": {
61-
"@x-viewer/core": "https://cdn.jsdelivr.net/npm/@x-viewer/core@latest/dist/index.esm.js",
62-
"@x-viewer/plugins": "https://cdn.jsdelivr.net/npm/@x-viewer/plugins@latest/dist/index.esm.js",
63-
"@x-viewer/ui": "https://cdn.jsdelivr.net/npm/@x-viewer/ui@latest/dist/index.esm.js"
64-
}
65-
}
58+
<script>
59+
// Auto-detect environment and set import map for x-viewer packages
60+
(function () {
61+
const wl = window.location;
62+
const isDevEnv = false;
63+
const resolvePath = (pkgName) =>
64+
isDevEnv
65+
? `../packages/${pkgName}/dist/index.esm.js`
66+
: `https://cdn.jsdelivr.net/npm/@x-viewer/${pkgName}@latest/dist/index.esm.js`;
67+
68+
const corePath = resolvePath("core");
69+
const pluginsPath = resolvePath("plugins");
70+
const uiPath = resolvePath("ui");
71+
72+
const importMap = document.createElement("script");
73+
importMap.type = "importmap";
74+
importMap.textContent = JSON.stringify({
75+
imports: {
76+
"@x-viewer/core": corePath,
77+
"@x-viewer/plugins": pluginsPath,
78+
"@x-viewer/ui": uiPath,
79+
},
80+
});
81+
document.head.appendChild(importMap);
82+
})();
6683
</script>
6784
<script type="module">
6885
import {

‎pdf_1.html‎

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,34 @@
1919
<div id="app">
2020
<div id="myCanvas"></div>
2121
</div>
22-
<script type="importmap">
23-
{
24-
"imports": {
25-
"pdfjs-dist": "./libs/pdf/pdf.min.js",
26-
"pdfjs-dist/build/pdf.worker.min.js": "./libs/pdf/pdf.worker.min.js",
27-
"@x-viewer/core": "https://cdn.jsdelivr.net/npm/@x-viewer/core@latest/dist/index.esm.js",
28-
"@x-viewer/plugins": "https://cdn.jsdelivr.net/npm/@x-viewer/plugins@latest/dist/index.esm.js",
29-
"@x-viewer/ui": "https://cdn.jsdelivr.net/npm/@x-viewer/ui@latest/dist/index.esm.js"
30-
}
31-
}
32-
</script>
22+
<script>
23+
// Auto-detect environment and set import map for x-viewer packages and pdfjs aliases
24+
(function () {
25+
const wl = window.location;
26+
const isDevEnv = false;
27+
const resolvePath = (pkgName) =>
28+
isDevEnv
29+
? `../packages/${pkgName}/dist/index.esm.js`
30+
: `https://cdn.jsdelivr.net/npm/@x-viewer/${pkgName}@latest/dist/index.esm.js`;
31+
32+
const corePath = resolvePath("core");
33+
const pluginsPath = resolvePath("plugins");
34+
const uiPath = resolvePath("ui");
35+
36+
const importMap = document.createElement("script");
37+
importMap.type = "importmap";
38+
importMap.textContent = JSON.stringify({
39+
imports: {
40+
"pdfjs-dist": "./libs/pdf/pdf.min.js",
41+
"pdfjs-dist/build/pdf.worker.min.js": "./libs/pdf/pdf.worker.min.js",
42+
"@x-viewer/core": corePath,
43+
"@x-viewer/plugins": pluginsPath,
44+
"@x-viewer/ui": uiPath,
45+
},
46+
});
47+
document.head.appendChild(importMap);
48+
})();
49+
</script>
3350
<script type="module">
3451
import {
3552
FontManager,

0 commit comments

Comments
 (0)