Question

我无法使用Alloy的Diagram Builder创建项目。当用户双击组件之一（例如任务）时，我需要触发一个事件。我想知道是否可行，是否不可能建议图构建器的另一个组件来解决这个问题并最终生成JSON。

<!doctype html>

<html>
<head>
    <script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
    <link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
    <script>
        YUI().use(
            'aui-diagram-builder', 'aui-button',
            function(Y) {
                var availableFields = [
                    {
                        iconClass: 'diagram-node-start-icon',
                        label: 'Start',
                        type: 'start'
                    },
                    {
                        iconClass: 'diagram-node-task-icon',
                        label: 'Task',
                        type: 'task'
                    },
                    {
                        iconClass: 'diagram-node-end-icon',
                        label: 'End',
                        type: 'end'
                    }
                ];

                var diagramBuilder = new Y.DiagramBuilder (
                    {
                        availableFields: availableFields,
                        boundingBox: '#diagram-builder-bb',
                        render: true,
                        srcNode: '#diagram-builder-sn'
                    }
                );

                var btn = new Y.Button(
                    {
                        icon: 'icon-print',
                        iconAlign: 'left',
                        label: 'Load JSON',
                        srcNode: '#myButton'
                    }
                ).render();

                btn.on('click', function () {
                   console.log(diagramBuilder.toJSON());
                });
            }
        );
    </script>
</head>
<body>
    <div class="row">
        <div class="col-md-6">
            <div id="diagram-builder-bb">
                <div id="diagram-builder-sn"></div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <button id="myButton">Load JSON</button>
                </div>
                <div id="json"></div>
            </div>
        </div>
    </div>
</body>
</html>

https://codepen.io/braulioti/pen/MPdQYr

谢谢。

双击事件到Diagram Builder组件到AlloyUI

0 个答案: