Phương pháp tắt nút trong dat.gui?

Question

Tôi đang cố gắng tìm ra cách để dễ dàng tắt/bật các nút trong dat.gui.

Tôi đã thiết lập dat.gui để điều khiển hoạt ảnh. Khi hoạt ảnh kết thúc, tôi muốn nút "Phát" bị tắt. Tôi đã thử thêm thuộc tính "bị vô hiệu hóa" vào phần tử DOM của nút, nhưng tôi vẫn thấy chức năng tương ứng kích hoạt khi nút được nhấp sau khi thuộc tính này được đặt.

phương pháp hiện tại của tôi là như sau:

1. Xác định vị trí các yếu tố li tương ứng với nút trong giao diện dat.gui
2. Tạo một phần tử DOM mới đó là bán trong suốt và đen, và thêm điều này bên trong phần tử li để tô xám nội dung của nút.
3. Trong chức năng được liên kết với nút này, hãy kiểm tra sự tồn tại của phần tử DOM "bị vô hiệu hóa" này trong nút và nếu nó tồn tại, hãy kiềm chế phần còn lại của hàm.

Đây là bản hack và tôi rất muốn biết có phương pháp vô hiệu hóa nút được xây dựng ngay vào dat.gui hay một phương pháp tốt hơn mà tôi không biết.

Answer 1

Trong dat.GUI, lớp FunctionController chịu trách nhiệm về các nút. Nếu bạn nhìn vào its source code, không có logic điều kiện trong đó. Bộ điều khiển sẽ nghe các sự kiện click trên nút và nó sẽ luôn gọi chức năng khi nhấp. Điều này có nghĩa là bạn sẽ không nhận được bất kỳ sự trợ giúp nào từ thư viện ở đây - bạn cần phải kiểm tra trình xử lý xem nút có bị tắt hay không. Một cái gì đó dọc theo các dòng này:

// Find the GUI controller listening to given property on given object 
function getController(gui, object, property) 
{ 
    for (var i = 0; i < gui.__controllers.length; i++) 
    { 
    var controller = gui.__controllers[i]; 
    if (controller.object == object && controller.property == property) 
     return controller; 
    } 
    return null; 
} 

... 

object.button = function() 
{ 
    // Don't do anything if the button is disabled 
    if (getController(gui, this, "button").domElement.hasAttribute("disabled")) 
    return; 

    alert("Button clicked"); 
}; 
gui.add(object, "button"); 

... 

// Disable button 
getController(gui, object, "button").domElement.setAttribute("disabled", ""); 

Lưu ý rằng không có kiểu dáng đặc biệt cho các phần tử bị vô hiệu hóa trong dom.GUI, bạn sẽ phải thêm kiểu của riêng bạn cho điều đó. Cho rằng những gì bạn thấy trong trường hợp của một nút là nhãn tài sản chứ không phải là nút thực tế này sẽ không được khá tầm thường - Tôi nghĩ rằng bạn sẽ phải đặt thuộc tính disabled trên controller.domElement.parentNode thay vì controller.domElement. Sau đó, bạn sẽ có thể sử dụng công cụ chọn [disabled] > .property-name cho kiểu của mình.

Sửa: Bạn thực sự có thể làm điều này một cách chung chung hơn bằng cách mở rộng FunctionController:

function blockEvent(event) 
{ 
    event.stopPropagation(); 
} 

Object.defineProperty(dat.controllers.FunctionController.prototype, "disabled", { 
    get: function() 
    { 
    return this.domElement.hasAttribute("disabled"); 
    }, 
    set: function(value) 
    { 
    if (value) 
    { 
     this.domElement.setAttribute("disabled", "disabled"); 
     this.domElement.addEventListener("click", blockEvent, true); 
    } 
    else 
    { 
     this.domElement.removeAttribute("disabled"); 
     this.domElement.removeEventListener("click", blockEvent, true); 
    } 
    }, 
    enumerable: true 
}); 

này sẽ bổ sung thêm một tài sản disabled với bộ điều khiển sẽ bắt click sự kiện để các nút điều khiển isn' t kích hoạt. Việc vô hiệu hóa nút sẽ đơn giản hơn sau đó:

getController(gui, object, "button").disabled = true; 

Và trình xử lý nút có thể không thay đổi, nó sẽ không được kích hoạt cho các nút bị vô hiệu hóa.