update .gitgnore

2022-11-04 11:39:56 +08:00
parent d89ce6f05d
commit ec65c97e99
400 changed files with 12826 additions and 30162 deletions
--- a/public/demo/settings/DxfSettingsPanel.js
+++ b/public/demo/settings/DxfSettingsPanel.js
@ -0,0 +1,134 @@
+export default class DxfSettingsPanel {
+    viewer;
+    parentContainer;
+    panel; // settings panel
+    closeBtn;
+    colorInputs;
+
+    /* eslint-disable no-undef */
+    constructor(viewer, parentContainer = document.body) {
+        this.init(viewer, parentContainer);
+    }
+
+    init(viewer, parentContainer) {
+        this.viewer = viewer;
+        this.parentContainer = parentContainer;
+        this.buildPage();
+        this.addEventHandlers();
+    }
+
+    show() {
+        if (this.panel?.classList.contains("panel-hide")) {
+            this.panel.classList.remove("panel-hide");
+        }
+    }
+
+    hide() {
+        if (!this.panel?.classList.contains("panel-hide")) {
+            this.panel?.classList.add("panel-hide");
+
+            // when click the close button, trigger the layers button's click event
+            const layersBtn = document.querySelector("#Settings");
+            if (layersBtn.classList.contains("active")) {
+                layersBtn.click();
+            }
+        }
+    }
+
+    destroy() {
+        this.closeBtn?.removeEventListener("click", this.hide);
+
+        this.checkboxes?.forEach((checkbox, i) => {
+            checkbox.removeEventListener("change", () => {
+                this.checkboxHandler(checkbox, i);
+            });
+        });
+        document.body.removeChild(this.panel);
+    }
+
+    buildPage() {
+        this.panel = document.createElement("div");
+        this.panel.classList.add("panel-container", "panel-hide");
+
+        const header = document.createElement("div");
+        header.innerText = "设置";
+        header.classList.add("panel-header");
+        this.panel.appendChild(header);
+
+        this.closeBtn = document.createElement("span");
+        this.closeBtn.classList.add("panel-close-btn");
+        this.closeBtn.innerHTML = "X";
+        header.appendChild(this.closeBtn);
+
+        const bgColors = [
+            { name: "默认", rgb: [0.082, 0.11, 0.117], color: "#212830" },
+            { name: "黑色", rgb: [0, 0, 0], color: "#000000" },
+            { name: "白色", rgb: [1, 1, 1], color: "#ffffff" },
+            { name: "灰色", rgb: [0.6, 0.6, 0.6], color: "#888888" },
+        ];
+        let colorHtml = "";
+        bgColors.forEach((item) => {
+            colorHtml += `
+                <div>${item.name}
+                    <input type="button" class="color-input" style="background-color: ${item.color}" value=${item.color}></input>
+                </div>
+            `;
+        });
+        const bgColorDiv = document.createElement("div");
+        bgColorDiv.classList.add("panel-body");
+        bgColorDiv.innerHTML = `
+            <table>
+                <tr>
+                    <td style="width: 40%">背景色</td>
+                    <td>${colorHtml}</td>
+                </tr>
+            </table>
+        `;
+        this.panel.appendChild(bgColorDiv);
+        this.parentContainer.appendChild(this.panel);
+    }
+
+    addEventHandlers() {
+        this.closeBtn?.addEventListener("click", this.hide.bind(this));
+
+        const bgColorInputs = document.querySelectorAll("input[type=button]");
+        this.colorInputs = [].slice.call(bgColorInputs, 0);
+        this.colorInputs.forEach((input) => {
+            input.addEventListener("click", () => {
+                const rgb = this.convertHexToRGB(input.value);
+                this.setBackgroundColor(rgb);
+            });
+            // input.onclick = () => {
+            //     const rgb = this.convertHexToRGB(input.value);
+            //     this.setBackgroundColor(rgb);
+            // };
+        });
+
+        const settingsToolbarBtn = document.querySelector("#Settings");
+        settingsToolbarBtn.addEventListener("click", () => {
+            if (settingsToolbarBtn.classList.contains("active")) {
+                if (!window.dxfSettingsPanel) {
+                    window.dxfSettingsPanel = new DxfSettingsPanel(this.viewer);
+                } else {
+                    window.dxfSettingsPanel.show();
+                }
+            } else {
+                this.hide();
+            }
+        });
+    }
+
+    // convert "#rrggbb" to { r, g, b }
+    convertHexToRGB(hex) {
+        const color = {};
+        hex = `0x${hex.slice(1)}`;
+        color.r = ((hex >> 16) & 255) / 255;
+        color.g = ((hex >> 8) & 255) / 255;
+        color.b = (hex & 255) / 255;
+        return color;
+    }
+
+    setBackgroundColor(rgb) {
+        this.viewer.setBackgroundColor(rgb.r, rgb.g, rgb.b);
+    }
+}