2022-11-20 00:02:55 +08:00
< html >
< head >
2022-11-28 09:51:30 +08:00
< 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/layerManager/layerManager.css" >
< link rel = "stylesheet" href = "./demo/settings/SettingsPanel.css" >
2022-11-20 00:02:55 +08:00
< style >
2023-05-15 19:30:47 +08:00
#myCanvas {
width: 100%;
height: 100%;
}
2022-11-20 00:06:08 +08:00
.hotpoint-toolbar {
2022-11-20 00:02:55 +08:00
position: absolute;
2022-12-04 20:38:30 +08:00
right: 20px;
top: 20px;
2022-11-20 00:02:55 +08:00
}
2022-11-20 00:06:08 +08:00
.hotpoint-toolbar-btn {
2022-11-20 00:02:55 +08:00
min-width: 50px;
height: 30px;
cursor: pointer;
padding: 2px;
}
.btn-active {
background-color: cornflowerblue;
}
.hotpoint {
opacity: 0.8;
top: 0px;
left: 0px;
}
.hotpoint-dot:hover {
box-shadow: 0px 0px 12px rgba(0,255,255,0.75);
border: 1px solid rgba(127,255,255,0.75);
}
.hotpoint-dot {
width: 15px;
height: 15px;
opacity: 0.8;
cursor: pointer;
top: 10px;
left: 10px;
background-color: yellow;
border-width: 3px;
border-style: dotted;
border-color: red;
border-radius: 50%;
}
.hotpoint-panel {
min-width: 150px;
min-height: 30px;
opacity: 0.8;
position: absolute;
top: 10px;
left: 10px;
background-color: white;
border-radius: 0px;
border: 1px solid rgba(127,255,255,0.25);
box-shadow: 0px 0px 3px rgba(0,255,255,0.5);
vertical-align: middle;
font-size: 12px;
}
.hotpoint-panel:hover {
opacity: 1;
box-shadow: 0px 0px 12px rgba(0,255,255,0.75);
border: 1px solid rgba(127,255,255,0.75);
}
.hotpoint-close {
color: black;
font-size: 14px;
font-family: monospace;
background-color: lightskyblue;
text-align: right;
padding-right: 3px;
cursor: pointer;
}
.hotpoint-body {
padding: 3px;
min-height: 40px;
}
.hide {
display: none;
}
< / style >
< / head >
< body >
2023-01-05 10:51:54 +08:00
< div id = "app" >
< div id = "myCanvas" class = "container" > < / div >
2022-11-20 00:06:08 +08:00
< div class = "hotpoint-toolbar" >
< button id = "AddHotpoint" class = "hotpoint-toolbar-btn" > Add hotpoint< / button >
< button id = "ClearHotpoints" class = "hotpoint-toolbar-btn" title = "Clear all hotpoints" > Clear< / button >
2022-11-20 00:02:55 +08:00
< / div >
< / div >
< script type = "module" >
2023-02-07 19:09:26 +08:00
import { DxfViewer, ViewerEvent, ToolbarMenuId } from "./demo/libs/gemini-viewer.esm.min.js";
2022-11-28 09:51:30 +08:00
import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
import LayerManager from './demo/layerManager/LayerManager.js';
2022-11-20 00:02:55 +08:00
2022-12-02 15:52:49 +08:00
const filename = "rac_basic_sample_project";
const modelCfg = {
modelId: filename,
name: filename,
src: `./demo/models/dxf/${filename}.dxf`,
2022-11-20 00:02:55 +08:00
merge: true,
2022-12-02 15:52:49 +08:00
};
const viewerCfg = {
2022-11-20 00:02:55 +08:00
containerId: "myCanvas",
enableAxisGizmo: true,
enableSpinner: true,
enableProgressBar: true,
enableLayoutBar: true,
2023-02-07 19:09:26 +08:00
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();
},
},
},
2022-11-20 00:02:55 +08:00
};
2022-12-02 15:52:49 +08:00
const viewer = new DxfViewer(viewerCfg);
2022-11-28 09:51:30 +08:00
const fontFiles = ["./demo/three/fonts/hztxt.shx", "./demo/three/fonts/simplex.shx"];
2022-11-20 00:02:55 +08:00
await viewer.setFont(fontFiles);
2023-02-07 19:09:26 +08:00
window.viewer = viewer;
2022-11-20 00:02:55 +08:00
2022-12-02 15:52:49 +08:00
const onProgress = (event) => {
const progress = ((event.loaded * 100) / event.total).toFixed(1);
console.log(`[Demo] Loading progress: ${progress}%`);
};
await viewer.loadModelAsync(modelCfg, onProgress);
console.log(`[Demo] Loaded model ${modelCfg.src}`);
2022-11-20 00:02:55 +08:00
let addingHotpoint = false;
let hotpointCount = 0; // used to generate unique id
const hotpointsPerLayout = {}; // a map, the key is layoutName
2023-07-13 15:59:09 +08:00
let draggingHotpointId = "";
2022-11-20 00:02:55 +08:00
const addHotpointBtn = document.getElementById("AddHotpoint");
const clearHotpointsBtn = document.getElementById("ClearHotpoints");
addHotpointBtn.onclick = () => {
if (addHotpointBtn.classList.contains("btn-active")) {
addHotpointBtn.classList.remove("btn-active")
addingHotpoint = false;
} else {
addHotpointBtn.classList.add("btn-active")
addingHotpoint = true;
}
};
clearHotpointsBtn.onclick = () => {
addHotpointBtn.classList.remove("btn-active");
addingHotpoint = false;
viewer.clearHotpoints();
Object.keys(hotpointsPerLayout).forEach((key) => {
hotpointsPerLayout[key] = [];
});
};
2023-07-13 15:59:09 +08:00
const n2s = (n) => n.toFixed(1);
const createOrToggleHotpoint = (event) => {
2022-11-20 00:02:55 +08:00
// if clicked on "close" button, close the hotpoint panel
// if clicked on hotpoint, open the hotpoint panel
const target = event.target;
if (target.classList.contains("hotpoint-close")) {
target.parentElement.classList.add("hide");
} else if (target.classList.contains("hotpoint-dot")) {
const hotpointId = target.id.replace("hotpoint-dot_", "");
const hotpointPanel = document.getElementById(`hotpoint-panel_${hotpointId}`);
if (hotpointPanel.classList.contains("hide")) {
hotpointPanel.classList.remove("hide");
} else {
hotpointPanel.classList.add("hide");
}
}
// create hotpoint...
if (addingHotpoint & & target instanceof HTMLCanvasElement) {
2023-04-03 10:53:49 +08:00
const location = viewer.getHitResult(event);
if (!location) {
2022-11-20 00:02:55 +08:00
return;
}
const hotpointId = `hotpoint_${hotpointCount}`;
const hotpoint = {
hotpointId,
2023-04-03 10:53:49 +08:00
anchorPosition: [location.x, location.y],
2022-11-20 00:02:55 +08:00
visible: true,
html: `< div class = "hotpoint" id = "hotpoint_${hotpointId}" >
< div class = "hotpoint-dot" id = "hotpoint-dot_${hotpointId}" > < / div >
< div class = "hotpoint-panel" id = "hotpoint-panel_${hotpointId}" >
< div class = "hotpoint-close" > X< / div >
2023-07-13 15:59:09 +08:00
< div class = "hotpoint-body" > This is a hotpoint with id 'hotpoint_${hotpointCount}'< / br > < / br > You can drag the dot to change its location.< / div >
2022-11-20 00:02:55 +08:00
< / div >
< / div > `,
}
const layoutName = viewer.getActiveLayoutName();
if (!hotpointsPerLayout[layoutName]) {
hotpointsPerLayout[layoutName] = [];
}
hotpointsPerLayout[layoutName].push(hotpoint);
viewer.addHotpoint(hotpoint);
hotpointCount++;
}
2023-07-13 15:59:09 +08:00
};
2022-11-20 00:02:55 +08:00
// manages hotpoints for different layouts
viewer.addEventListener(ViewerEvent.LayoutChanged, () => {
viewer.clearHotpoints();
const layoutName = viewer.getActiveLayoutName();
const hotpoints = hotpointsPerLayout[layoutName];
if (hotpoints) {
hotpoints.forEach((h) => viewer.addHotpoint(h));
}
});
2023-07-13 15:59:09 +08:00
// enable to drag the hotpoint
const onPointerDown = (e) => {
if (event.isPrimary === false) {
return;
}
const t = e.target;
if (t.classList.contains(`hotpoint-dot`)) {
// get the hotpoint id
draggingHotpointId = t.id.replace("hotpoint-dot_", "");
viewer.controls.enabled = false; // disable controls
window.addEventListener("pointermove", onPointerMove);
window.addEventListener("pointerup", onPointerUp);
console.log("Going to drag hotpoint with id: ", draggingHotpointId);
} else if (e.button === 0) { // left button
createOrToggleHotpoint(e);
}
};
const onPointerUp = (e) => {
viewer.controls.enabled = true; // recover controls
window.removeEventListener("pointermove", onPointerMove);
window.removeEventListener("pointerup", onPointerUp);
draggingHotpointId = "";
};
const onPointerMove = (e) => {
if (event.isPrimary === false) {
return;
}
const location = viewer.getHitResult(event);
if (!location) {
return;
}
const layoutName = viewer.getActiveLayoutName();
const hotpoint = hotpointsPerLayout[layoutName].find((h) => h.hotpointId === draggingHotpointId);
// console.log(hotpoint);
console.log(`Moving hotpoint '${hotpoint.hotpointId}' from (${n2s(hotpoint.anchorPosition[0])}, ${n2s(hotpoint.anchorPosition[1])}) to (${n2s(location.x)}, ${n2s(location.y)})`);
hotpoint.anchorPosition[0] = location.x;
hotpoint.anchorPosition[1] = location.y;
// update object position in three.js
// DxfViewer desn't have api to update hotpoint position yet, so, we'll hack it
const objects = viewer.hotpointRoot?.children || [];
let object = objects.find((o) => o.userData.hotpoint?.hotpointId === hotpoint.hotpointId);
if (object) {
object.position.set(location.x, location.y, 0);
object.updateWorldMatrix(false, false);
viewer.enableRender();
}
};
window.addEventListener("pointerdown", onPointerDown);
2022-11-20 00:02:55 +08:00
< / script >
< / body >
< / html >
