GoJS Diagram 去掉选中黑色边框

GoJS About 2,467 words

原始情况

当鼠标点击Diagram区域，最外层出现黑色边框。

理想效果

当鼠标点击进入Diagram区域内，不出现黑色边框。

解决方法

添加样式。

#myDiagramDiv canvas {
    outline: none;
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.1.38/go.js" crossorigin="anonymous"></script>
    <style>
        #myDiagramDiv canvas {
            outline: none;
        }
    </style>
</head>
<body>

<div id="myDiagramDiv" style="height:300px;background: #E4E7EB"></div>
<script>
    var $ = go.GraphObject.make;

    var diagram = $(go.Diagram, "myDiagramDiv",
        {
            allowHorizontalScroll: false,
            allowVerticalScroll: false,
            allowMove: true,
            allowSelect: true
        }
    );

    diagram.add(
        $(go.Node, "Vertical",
            $(go.Panel, "Auto",
                $(go.Shape, "Rectangle",
                    {
                        stroke: "#00FFFF",
                        strokeWidth: 2,
                        fill: "#F0F8FF",
                        desiredSize: new go.Size(120, 60),
                    },
                ),
                $(go.TextBlock,
                    {margin: 3, stroke: "green", text: "程序员技术之旅"},
                ),
                {
                    contextClick: function (e, node) {
                        node.elements.each(function (element) {
                            console.log(element);
                        })
                    },
                }
            ),
        )
    )
</script>

</body>
</html>

Views: 2,838 · Posted: 2021-11-21

———— END ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓