如何在 Autodesk 查看器 api 的停靠面板内使用输入字段？

Question

我试图在 Autodesk 查看器的停靠面板内添加递增和递减计数器输入。

我什至尝试在其中使用基本的文本输入字段。它不工作。面板和输入字段显示正常。但是为什么我不能使用它。就像它是一个输入字段一样，我没有启用，无法输入或更改它的值。如果是柜台，也是一样。

是故意的吗？如果是这样的话，我已经看到应用程序使用这种类似输入的计数器。有人可以告诉我我的方法有什么问题吗？

下面给出了我正在尝试的代码示例，

截图： https://i.stack.imgur.com/hyEBr.png

注意：我也试过用一个简单的文本输入字段代替计数器，它的工作方式相同

编辑：从容器中禁用移动处理程序解决了这个 issue.Comment 来自 samuel-middendorp 的帮助。

    <head>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
        <meta charset="utf-8">

        <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
        <style>
            body {
                margin: 0;
            }
            #forgeViewer {
                width: 100%;
                height: 100%;
                margin: 0;
                background-color: #F0F8FF;
            }

            </style>
    </head>
    <body>
        <div id="forgeViewer"></div>
    </body>
   <script>

   var viewer;
   var closable = null;
    var options = {
        env: 'AutodeskProduction',
        api: 'derivativeV2',  // for models uploaded to EMEA change this option to 'derivativeV2_EU'
        getAccessToken: function(onTokenReady) {
            var token = 'access token';
            var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
            onTokenReady(token, timeInSeconds);
        }
    };

SimplePanel = function(parentContainer, id, title, content, x, y)
{
  this.content = content;
Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, title,{shadow:false});

// Auto-fit to the content and don't allow resize.  Position at the coordinates given.

this.container.style.height = "250px";
this.container.style.width = "450px";
this.container.style.resize = "auto";
this.container.style.left = x + "px";
this.container.style.top = y + "px"; 
this.container.style.zIndex = 2;

};

SimplePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
SimplePanel.prototype.constructor = SimplePanel;

SimplePanel.prototype.initialize = function()
{ 
        this.title = this.createTitleBar(this.titleLabel || this.container.id);
this.container.appendChild(this.title);

this.container.appendChild(this.content);
this.initializeMoveHandlers(this.container);

this.closer = document.createElement("span");
this.closer = this.createCloseButton();
this.initializeCloseHandler(this.closer);
this.container.appendChild(this.closer);

var op = {left:false,heightAdjustment:45,marginTop:0};
this.scrollcontainer = this.createScrollContainer(op);

var id = viewer.getSelection();
var dataItem;
var data = [
    {
        id:"2648",
        name:"Chiller",
        temp:"300 deg",
        serviceReq:5,
        reservations:"3"
    },
    {
        id:"2228",
        name:"Door",
        temp:"150 deg",
        serviceReq:2,
        reservations:"4"
    },
    {
        id:"2198",
        name:"Cooler",
        temp:"400 deg",
        serviceReq:6,
        reservations:"2"
    }
]

data.forEach(item => {
    if(item.id == id){
        dataItem = item;
    }
})

//this is the portion I have the issue - here I appending an input tag inside of a table cell. But the problem is the input field is not focussing,can't able to edit, not enabled 

var html = [
    '<table>',
    '<thead>',
    '<th>Key</th><th>Value</th>',
    '</thead>',
    '<tbody>',
    '<tr><td>ID</td><td>'+dataItem.id+'</td></tr>',
    '<tr><td>Name</td><td>'+dataItem.name+'</td></tr>',
    '<tr><td>Temperature</td><td>'+dataItem.temp+'</td></tr>',
    '<tr><td>Service Requests</td><td contenteditable="true"> <input type=“text”/></td></tr>',
    '<tr><td>Reservations</td><td>'+dataItem.reservations+'</td></tr>',
    '</tbody>',
    '</table>',
].join('\n');


$(this.scrollContainer).append(html);

this.initializeMoveHandlers(this.title);    
};

    Autodesk.Viewing.Initializer(options, function() {   
    var htmlDiv = document.getElementById('forgeViewer');
    viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv,{ extensions: ['CustomPropertyPanelExtension'] });
    var startedCode = viewer.start();
    if (startedCode > 0) {
        console.error('Failed to create a Viewer: WebGL not supported.');
        return;
    }

    console.log('Initialization complete, loading a model next...');

});

var documentId = 'urn:my urn';
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);

function onDocumentLoadSuccess(viewerDocument) {

    var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
    viewer.loadDocumentNode(viewerDocument, defaultModel);
    viewer.addEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, event=>{

        if( closable != null ) {
           closable.uninitialize();
           closable = null;
        }
        var content = document.createElement('div');
        var mypanel = new  SimplePanel(NOP_VIEWER.container,'mypanel','Asset properties',content,20,20);
        closable = mypanel;
        mypanel.setVisible(true);
})
}

function onDocumentLoadFailure() {
    console.error('Failed fetching Forge manifest');
}
   </script>
</html>

Answer 1

编辑

如果你坚持让滚动容器可拖动，这对我来说看起来很反直觉，你可以很容易地阻止输入上的事件（鼠标按下）被容器上启用的处理程序captured/intercepts（这让我们回到面板处理程序捕获事件而不是让它们冒泡的反模式方式 ...

查看更新后的 sample here

inputElement.addEventListener('mousedown',e=>e.stopPropagation())

原答案

不幸的是，我无法用我自己的示例重现这些问题 here - 输入功能与面板中预期的一样：

innerHTML=[
    '<table>',
    '<thead>',
    '<th>Key</th><th>Value</th>',
    '</thead>',
    '<tbody>',
    '<tr><td>ID</td><td>233</td></tr>',
    '<tr><td>Name</td><td>233</td></tr>',
    '<tr><td>Temperature</td><td>233</td></tr>',
    '<tr><td>Service Requests</td><td contenteditable="true"> <input type=“text”/></td></tr>',
    '<tr><td>Reservations</td><td>233</td></tr>',
    '</tbody>',
    '</table>',
].join('\n')

看起来这个问题不能完全重现 w/o 你的其他代码 and/or CSS 可能有问题所以你可以克隆并添加你自己的代码来重现错误和在下面发表评论，这样我就知道要检查了？？

编辑

仍然无法重现问题...在 Firefox (62.0) 和 Chrome (81 ) 并且输入按预期工作：

如何在 Autodesk 查看器 api 的停靠面板内使用输入字段？

How to use input field inside docking panel of autodesk viewer api?

autodesk-forge

autodesk-viewer