mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-06 01:33:55 +00:00
55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
/**
|
|
* Licensed to the Apache Software Foundation (ASF) under one or more
|
|
* contributor license agreements. See the NOTICE file distributed with
|
|
* this work for additional information regarding copyright ownership.
|
|
* The ASF licenses this file to You under the Apache License, Version 2.0
|
|
* (the "License"); you may not use this file except in compliance with
|
|
* the License. You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
import icons from "@/assets/img/icons";
|
|
import { Node } from "@/types/topology";
|
|
|
|
export default (d3: any, graph: any, funcs: any, tip: any) => {
|
|
const nodeEnter = graph
|
|
.append("g")
|
|
.call(
|
|
d3
|
|
.drag()
|
|
.on("start", funcs.dragstart)
|
|
.on("drag", funcs.dragged)
|
|
.on("end", funcs.dragended)
|
|
)
|
|
.on("mouseover", function (event: unknown, d: Node) {
|
|
tip.html(funcs.tipHtml).show(d, this);
|
|
})
|
|
.on("mouseout", function () {
|
|
tip.hide(this);
|
|
});
|
|
nodeEnter
|
|
.append("image")
|
|
.attr("width", 35)
|
|
.attr("height", 35)
|
|
.attr("x", (d: any) => d.x - 15)
|
|
.attr("y", (d: any) => d.y - 15)
|
|
.attr("style", "cursor: move;")
|
|
.attr("xlink:href", icons.CUBE);
|
|
nodeEnter
|
|
.append("text")
|
|
.attr("fill", "#000")
|
|
.attr("text-anchor", "middle")
|
|
.attr("x", (d: any) => d.x)
|
|
.attr("y", (d: any) => d.y + 28)
|
|
.text((d: { name: string }) =>
|
|
d.name.length > 10 ? `${d.name.substring(0, 10)}...` : d.name
|
|
);
|
|
return nodeEnter;
|
|
};
|