mirror of
https://gitee.com/coder-xiaomo/algorithm-visualization
synced 2025-09-06 04:41:38 +08:00
122 lines
3.3 KiB
JavaScript
122 lines
3.3 KiB
JavaScript
/**
|
|
* WorkSpace class v0.1.0
|
|
*
|
|
* @author coder-xiaomo
|
|
* @date 2022-05-15
|
|
*
|
|
* Released under the MIT license
|
|
*/
|
|
class WorkSpace {
|
|
static settings = null;
|
|
static primaryCanvas = null;
|
|
|
|
constructor(settings) {
|
|
this.settings = settings
|
|
|
|
// 清除原有内容
|
|
settings.container
|
|
.style("width", settings.width)
|
|
.style("height", settings.height)
|
|
// .attr("width", settings.width)
|
|
// .attr("height", settings.height)
|
|
.html("")
|
|
|
|
// 创建工作区SVG
|
|
this.primaryCanvas = settings.container.append("svg")
|
|
// 添加id
|
|
.attr("id", "primaryCanvas")
|
|
// 设置 SVG 宽高
|
|
.attr("width", "100%")
|
|
.attr("height", "100%")
|
|
// 背景色
|
|
.style("background-color", settings.colorMap["background"])
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Shape class v0.1.0
|
|
*
|
|
* @author coder-xiaomo
|
|
* @date 2022-05-15
|
|
*
|
|
* Released under the MIT license
|
|
*/
|
|
class Shape {
|
|
static workSpace = null;
|
|
constructor(workSpace) {
|
|
this.workSpace = workSpace
|
|
}
|
|
|
|
addShape(shape, id) {
|
|
return workSpace.primaryCanvas.append(shape)
|
|
.attr("id", id)
|
|
}
|
|
|
|
// 添加矩形
|
|
rectangle(id, { x, y, width, height, fillColor = "white", strokeColor = "black" }) {
|
|
return this.addShape("rect", id)
|
|
.attr("x", x)
|
|
.attr("y", y)
|
|
.attr("width", width)
|
|
.attr("height", height)
|
|
.style("fill", fillColor)
|
|
.style("stroke", strokeColor)
|
|
}
|
|
|
|
// 添加圆形
|
|
circle(id, { x, y, radius, fillColor = "white", strokeColor = "black" }) {
|
|
return this.addShape("circle", id)
|
|
.attr("cx", x)
|
|
.attr("cy", y)
|
|
.attr("r", radius)
|
|
.style("fill", fillColor)
|
|
.style("stroke", strokeColor)
|
|
}
|
|
|
|
// 添加文本
|
|
text(id, { x, y, text, fillColor }) {
|
|
return this.addShape("text", id)
|
|
.attr("x", x)
|
|
.attr("y", y)
|
|
.text(text)
|
|
.style("fill", fillColor)
|
|
}
|
|
|
|
// 添加线
|
|
line(id, { x1, y1, x2, y2, strokeColor }) {
|
|
return this.addShape("line", id)
|
|
.attr("x1", x1)
|
|
.attr("y1", y1)
|
|
.attr("x2", x2)
|
|
.attr("y2", y2)
|
|
.style("stroke", strokeColor)
|
|
}
|
|
|
|
// 添加路径
|
|
path(id,d, { fillColor = "white", strokeColor = "black" }) {
|
|
return this.addShape("path", id)
|
|
.attr("d", d)
|
|
.style("fill", fillColor)
|
|
.style("stroke", strokeColor)
|
|
}
|
|
|
|
// 添加一个链表节点
|
|
addNode(id, x, y, width, height, text) {
|
|
var primaryCanvas = workSpace.primaryCanvas
|
|
primaryCanvas.append("rect", id)
|
|
.attr("x", x)
|
|
.attr("y", y)
|
|
.attr("width", width)
|
|
.attr("height", height)
|
|
.style("fill", workSpace.settings.colorMap["fill"])
|
|
.style("stroke", workSpace.settings.colorMap["stroke"])
|
|
primaryCanvas.append("text", id + "_text")
|
|
.attr("x", x)
|
|
.attr("y", y)
|
|
// .attr("x", x + width / 2)
|
|
// .attr("y", y + height / 2)
|
|
.text(text)
|
|
.style("fill", workSpace.settings.colorMap["text"])
|
|
}
|
|
}
|