Skip to content

Commit 4f0d7f0

Browse files
yanzexuan1yanzexuan1
authored
Merge pull request #30 from thingraph/feature/fix-js
Fix loading json editor js error
2 parents a6881e8 + 25bf691 commit 4f0d7f0

2 files changed

Lines changed: 155 additions & 138 deletions

File tree

‎dwg_json_viewer.html‎

Lines changed: 135 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ <h1>Dwg/dxf Database JSON Viewer</h1>
7272
(function() {
7373
// Check if running locally (localhost, 127.0.0.1, or file:// protocol)
7474
const wl = window.location;
75-
const isDevEnv = false;
75+
const isDevEnv = wl.hostname === "localhost" || wl.hostname === "127.0.0.1";
7676

7777
// Load jsoneditor based on environment
7878
const jsoneditorJsPath = isDevEnv
@@ -92,6 +92,13 @@ <h1>Dwg/dxf Database JSON Viewer</h1>
9292
// Load JS
9393
const script = document.createElement('script');
9494
script.src = jsoneditorJsPath;
95+
// Wait for JSONEditor to load before initializing the module code
96+
script.onload = () => {
97+
// Trigger the module initialization after JSONEditor is loaded
98+
if (window.initJsonViewerModule) {
99+
window.initJsonViewerModule();
100+
}
101+
};
95102
document.head.appendChild(script);
96103

97104
// Set import map for x-viewer/core
@@ -115,133 +122,141 @@ <h1>Dwg/dxf Database JSON Viewer</h1>
115122
<script type="module">
116123
import { DxfParser, VERSION, LIBREDWG_WEB_VERSION } from "@x-viewer/core";
117124

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-
126-
// Display libredwg-web version
127-
const libredwgVersionElement = document.getElementById('libredwgVersion');
128-
if (libredwgVersionElement && LIBREDWG_WEB_VERSION) {
129-
libredwgVersionElement.textContent = `(v${LIBREDWG_WEB_VERSION})`;
130-
}
125+
// Initialize function that will be called after JSONEditor is loaded
126+
window.initJsonViewerModule = function() {
127+
// Enable file selection buttons after page and resources are fully loaded
128+
window.addEventListener("load", () => {
129+
document.querySelector('label[for="fileInput"]').classList.remove("disabled");
130+
document.querySelector('label[for="fileInputDxf"]').classList.remove("disabled");
131+
document.getElementById("fileInput").disabled = false;
132+
document.getElementById("fileInputDxf").disabled = false;
133+
});
131134

132-
// Display x-viewer/core version
133-
const coreVersionElement = document.getElementById('coreVersion');
134-
if (coreVersionElement && VERSION) {
135-
coreVersionElement.textContent = `(v${VERSION})`;
136-
}
135+
// Display libredwg-web version
136+
const libredwgVersionElement = document.getElementById('libredwgVersion');
137+
if (libredwgVersionElement && LIBREDWG_WEB_VERSION) {
138+
libredwgVersionElement.textContent = `(v${LIBREDWG_WEB_VERSION})`;
139+
}
137140

138-
const printDwgInfo = (version, codepage, stats) => {
139-
const infoElement = document.getElementById('dwgInfo');
140-
infoElement.innerHTML = '';
141-
infoElement.textContent = `Version: ${version}, Code Page: ${codepage}, Unknown Entities: ${stats.unknownEntityCount}`;
142-
}
141+
// Display x-viewer/core version
142+
const coreVersionElement = document.getElementById('coreVersion');
143+
if (coreVersionElement && VERSION) {
144+
coreVersionElement.textContent = `(v${VERSION})`;
145+
}
143146

144-
// create the editor
145-
const container1 = document.getElementById('jsonEditor1')
146-
const container2 = document.getElementById('jsonEditor2')
147-
const container3 = document.getElementById('jsonEditor3')
148-
const options = {
149-
mode: 'view'
150-
}
151-
const jsonEditor1 = new JSONEditor(container1, options)
152-
const jsonEditor2 = new JSONEditor(container2, options)
153-
const jsonEditor3 = new JSONEditor(container3, options)
154-
155-
// handle file input change event
156-
const fileInput = document.getElementById('fileInput')
157-
const dwgFileNameElement = document.getElementById('dwgFileName')
158-
fileInput.addEventListener('change', function(event) {
159-
const file = event.target.files[0]
160-
if (file) {
161-
// Update file name display
162-
dwgFileNameElement.textContent = file.name
163-
164-
const reader = new FileReader();
165-
reader.onload = function(e) {
166-
const fileContent = e.target.result;
167-
let version;
168-
let codepage;
169-
let stats = { unknownEntityCount: "" };
170-
const parser = new DxfParser();
171-
if (file.name.endsWith(".dwg")) {
172-
const result = parser.libredwgConvertEx(fileContent);
173-
jsonEditor1.set(result.database);
174-
version = result.version;
175-
codepage = result.codepage;
176-
stats = result.stats;
177-
}
178-
const result = parser.parse(fileContent);
179-
jsonEditor2.set({
180-
tables: result.tables,
181-
objects: result.objects,
182-
header: result.header,
183-
entities: result.entities,
184-
classes: result.classes,
185-
blocks: result.blocks,
186-
});
187-
version = version || result.header["$ACADVER"];
188-
codepage = result.header["$DWGCODEPAGE"];
189-
printDwgInfo(version, codepage, stats);
190-
}
147+
const printDwgInfo = (version, codepage, stats) => {
148+
const infoElement = document.getElementById('dwgInfo');
149+
infoElement.innerHTML = '';
150+
infoElement.textContent = `Version: ${version}, Code Page: ${codepage}, Unknown Entities: ${stats.unknownEntityCount}`;
151+
}
191152

192-
jsonEditor1.clear();
193-
jsonEditor2.clear();
194-
// read the file
195-
reader.readAsArrayBuffer(file)
196-
} else {
197-
dwgFileNameElement.textContent = 'No File Chosen'
198-
console.log('No file selected')
153+
// create the editor (now JSONEditor is guaranteed to be loaded)
154+
const container1 = document.getElementById('jsonEditor1')
155+
const container2 = document.getElementById('jsonEditor2')
156+
const container3 = document.getElementById('jsonEditor3')
157+
const options = {
158+
mode: 'view'
199159
}
200-
})
201-
202-
// handle dxf file input change event
203-
const fileInputDxf = document.getElementById('fileInputDxf')
204-
const dxfFileNameElement = document.getElementById('dxfFileName')
205-
fileInputDxf.addEventListener('change', function(event) {
206-
const file = event.target.files[0]
207-
if (file) {
208-
// Update file name display
209-
dxfFileNameElement.textContent = file.name
210-
211-
const reader = new FileReader();
212-
reader.onload = function(e) {
213-
const fileContent = e.target.result;
214-
const parser = new DxfParser();
215-
216-
// Parse DXF file using dxf-parser
217-
const result = parser.parse(fileContent);
218-
219-
// Display in the third column (dxf-parser result)
220-
jsonEditor3.set({
221-
tables: result.tables,
222-
objects: result.objects,
223-
header: result.header,
224-
entities: result.entities,
225-
classes: result.classes,
226-
blocks: result.blocks,
227-
});
160+
const jsonEditor1 = new JSONEditor(container1, options)
161+
const jsonEditor2 = new JSONEditor(container2, options)
162+
const jsonEditor3 = new JSONEditor(container3, options)
163+
164+
// handle file input change event
165+
const fileInput = document.getElementById('fileInput')
166+
const dwgFileNameElement = document.getElementById('dwgFileName')
167+
fileInput.addEventListener('change', function(event) {
168+
const file = event.target.files[0]
169+
if (file) {
170+
// Update file name display
171+
dwgFileNameElement.textContent = file.name
228172

229-
// Display info
230-
const infoElement = document.getElementById('dxfInfo');
231-
infoElement.innerHTML = '';
232-
const version = result.header["$ACADVER"] || "Unknown";
233-
const codepage = result.header["$DWGCODEPAGE"] || "Unknown";
234-
infoElement.textContent = `Version: ${version}, Code Page: ${codepage}`;
173+
const reader = new FileReader();
174+
reader.onload = function(e) {
175+
const fileContent = e.target.result;
176+
let version;
177+
let codepage;
178+
let stats = { unknownEntityCount: "" };
179+
const parser = new DxfParser();
180+
if (file.name.endsWith(".dwg")) {
181+
const result = parser.libredwgConvertEx(fileContent);
182+
jsonEditor1.set(result.database);
183+
version = result.version;
184+
codepage = result.codepage;
185+
stats = result.stats;
186+
}
187+
const result = parser.parse(fileContent);
188+
jsonEditor2.set({
189+
tables: result.tables,
190+
objects: result.objects,
191+
header: result.header,
192+
entities: result.entities,
193+
classes: result.classes,
194+
blocks: result.blocks,
195+
});
196+
version = version || result.header["$ACADVER"];
197+
codepage = result.header["$DWGCODEPAGE"];
198+
printDwgInfo(version, codepage, stats);
199+
}
200+
201+
jsonEditor1.clear();
202+
jsonEditor2.clear();
203+
// read the file
204+
reader.readAsArrayBuffer(file)
205+
} else {
206+
dwgFileNameElement.textContent = 'No File Chosen'
207+
console.log('No file selected')
235208
}
209+
})
236210

237-
jsonEditor3.clear();
238-
// read the file
239-
reader.readAsArrayBuffer(file)
240-
} else {
241-
dxfFileNameElement.textContent = 'No File Chosen'
242-
console.log('No DXF file selected')
243-
}
244-
})
211+
// handle dxf file input change event
212+
const fileInputDxf = document.getElementById('fileInputDxf')
213+
const dxfFileNameElement = document.getElementById('dxfFileName')
214+
fileInputDxf.addEventListener('change', function(event) {
215+
const file = event.target.files[0]
216+
if (file) {
217+
// Update file name display
218+
dxfFileNameElement.textContent = file.name
219+
220+
const reader = new FileReader();
221+
reader.onload = function(e) {
222+
const fileContent = e.target.result;
223+
const parser = new DxfParser();
224+
225+
// Parse DXF file using dxf-parser
226+
const result = parser.parse(fileContent);
227+
228+
// Display in the third column (dxf-parser result)
229+
jsonEditor3.set({
230+
tables: result.tables,
231+
objects: result.objects,
232+
header: result.header,
233+
entities: result.entities,
234+
classes: result.classes,
235+
blocks: result.blocks,
236+
});
237+
238+
// Display info
239+
const infoElement = document.getElementById('dxfInfo');
240+
infoElement.innerHTML = '';
241+
const version = result.header["$ACADVER"] || "Unknown";
242+
const codepage = result.header["$DWGCODEPAGE"] || "Unknown";
243+
infoElement.textContent = `Version: ${version}, Code Page: ${codepage}`;
244+
}
245+
246+
jsonEditor3.clear();
247+
// read the file
248+
reader.readAsArrayBuffer(file)
249+
} else {
250+
dxfFileNameElement.textContent = 'No File Chosen'
251+
console.log('No DXF file selected')
252+
}
253+
})
254+
};
255+
256+
// If JSONEditor is already loaded (e.g., cached), initialize immediately
257+
if (typeof JSONEditor !== 'undefined') {
258+
window.initJsonViewerModule();
259+
}
245260
</script>
246261
</body>
247262
</html>

‎dxf_compare_2_viewports.html‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -29,20 +29,19 @@
2929

3030
#syncCamera {
3131
position: absolute;
32-
text-align: center;
33-
top: 20px;
34-
left: calc(50% - 40px);
35-
height: 40px;
36-
width: 80px;
37-
font-size: 16px;
38-
line-height: 40px;
32+
top: 16px;
33+
left: 50%;
34+
transform: translateX(-50%);
35+
min-width: 32px;
36+
min-height: 32px;
37+
padding: 4px 6px;
38+
font-size: 18px; /* icon size */
39+
line-height: 1;
40+
border-radius: 6px;
41+
border: 1px solid #409effaa;
42+
background-color: rgba(64, 158, 255, 0.4);
3943
color: #fff;
40-
border-radius: 5px;
41-
border: 1px solid #409eff;
42-
background-color: #409eff;
43-
font-family: inherit;
4444
cursor: pointer;
45-
margin: 5px auto;
4645
}
4746
</style>
4847
</head>
@@ -53,13 +52,14 @@
5352
<div class="split"></div>
5453
<div id="myCanvas2"></div>
5554
</div>
56-
<button id="syncCamera" title="Click to sync or unsync cameras">unsynced</button>
55+
<!-- Use an icon-style button to indicate synced/unsynced state (unlocked = unsynced, locked = synced) -->
56+
<button id="syncCamera" title="Click to toggle camera sync">🔓</button>
5757

5858
<script>
5959
// Auto-detect environment and set import map for x-viewer packages
6060
(function () {
6161
const wl = window.location;
62-
const isDevEnv = false;
62+
const isDevEnv = wl.hostname === "localhost" || wl.hostname === "127.0.0.1";
6363
const resolvePath = (pkgName) =>
6464
isDevEnv
6565
? `../packages/${pkgName}/dist/index.esm.js`
@@ -128,14 +128,16 @@
128128
const syncCameraBtn = document.getElementById("syncCamera");
129129
let enableSyncCamera = false;
130130
syncCameraBtn.onclick = function () {
131-
if (!enableSyncCamera) {
131+
enableSyncCamera = !enableSyncCamera;
132+
if (enableSyncCamera) {
132133
compareHelper.enableSyncCamera(true);
133-
syncCameraBtn.innerText = "synced";
134+
syncCameraBtn.textContent = "🔒";
135+
syncCameraBtn.title = "Click to unsync cameras";
134136
} else {
135137
compareHelper.enableSyncCamera(false);
136-
syncCameraBtn.innerText = "unsynced";
138+
syncCameraBtn.textContent = "🔓";
139+
syncCameraBtn.title = "Click to sync cameras";
137140
}
138-
enableSyncCamera = !enableSyncCamera;
139141
};
140142

141143
const onProgress = (event) => {

0 commit comments

Comments
 (0)