-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
122 lines (103 loc) · 3.78 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import CustomPropertyPanel from "../custom_property_panel";
import { createRoot } from "react-dom/client";
interface CustomToolbarExtension extends Autodesk.Viewing.Extension {
isCustomJSPanelVisible: boolean;
isReactPanelVisible: boolean;
}
let isReactPanelVisible = false;
function CustomToolbarExtension(
this: CustomToolbarExtension,
viewer: Autodesk.Viewing.GuiViewer3D,
options: Record<string, unknown>,
) {
Autodesk.Viewing.Extension.call(this, viewer, options);
console.log("CustomToolbarExtension", viewer, options);
}
console.log("CustomToolbarExtension", Autodesk);
CustomToolbarExtension.prototype = Object.create(
Autodesk.Viewing.Extension.prototype,
);
CustomToolbarExtension.prototype.constructor = CustomToolbarExtension;
function toggleCustomReactPanel(
button: Autodesk.Viewing.UI.Button,
viewer: Autodesk.Viewing.GuiViewer3D,
) {
if (isReactPanelVisible) {
const existingPanel = document.getElementById("customPropertyPanel-react");
if (existingPanel) {
existingPanel.remove();
}
isReactPanelVisible = false;
button.icon.parentElement?.classList.remove("active");
return;
}
const customPropertyPanel = new Autodesk.Viewing.UI.DockingPanel(
document.querySelector(".adsk-viewing-viewer")!,
"customPropertyPanel-react",
"React Panel",
);
customPropertyPanel.setVisible(true);
customPropertyPanel.container.style.top = "260px";
customPropertyPanel.container.style.left = "10px";
customPropertyPanel.container.style.width = "auto";
customPropertyPanel.container.style.height = "300px";
customPropertyPanel.container.style.resize = "auto";
customPropertyPanel.container.style.zIndex = "100";
customPropertyPanel.container.style.backgroundColor = "rgba(34, 34, 34, 0.9)";
customPropertyPanel.container.style.overflow = "auto";
customPropertyPanel.container.style.boxShadow = "0 0 10px rgba(0,0,0,0.25)";
const reactContainer = document.createElement("div");
reactContainer.id = "customPropertyPanel-react-root";
customPropertyPanel.container.appendChild(reactContainer);
const container = document.getElementById("customPropertyPanel-react-root");
const root = createRoot(container!);
root.render(<CustomPropertyPanel viewer={viewer} />);
button.icon.parentElement?.classList.add("active");
isReactPanelVisible = true;
}
CustomToolbarExtension.prototype.createUI = function () {
var viewer = this.viewer;
var button = new Autodesk.Viewing.UI.Button("my-view-back-button");
button.onClick = function () {
const button = this;
toggleCustomReactPanel(button, viewer);
};
button.setToolTip("Show React Property Window");
button.icon.classList.add("fa-brands", "fa-react", "fa-lg");
// SubToolbar
this.subToolbar = new Autodesk.Viewing.UI.ControlGroup(
"my-custom-view-toolbar",
);
this.subToolbar.addControl(button);
viewer.toolbar.addControl(this.subToolbar);
};
CustomToolbarExtension.prototype.load = function () {
if (this.viewer.toolbar) {
// Toolbar is already available, create the UI
this.createUI();
} else {
// Toolbar hasn't been created yet, wait until we get notification of its creation
this.onToolbarCreatedBinded = this.onToolbarCreated.bind(this);
this.viewer.addEventListener(
Autodesk.Viewing.TOOLBAR_CREATED_EVENT,
this.onToolbarCreatedBinded,
);
}
return true;
};
CustomToolbarExtension.prototype.onToolbarCreated = function () {
this.viewer.removeEventListener(
Autodesk.Viewing.TOOLBAR_CREATED_EVENT,
this.onToolbarCreatedBinded,
);
this.onToolbarCreatedBinded = null;
this.createUI();
};
CustomToolbarExtension.prototype.unload = function () {
return true;
};
Autodesk.Viewing.theExtensionManager.registerExtension(
"CustomToolbarExtension",
CustomToolbarExtension,
);
export default CustomToolbarExtension;