最近在写代码时,充分享受到了借助于AI来编写代码的好处。以下演示实例:
因为历史的原因,需要用到Eclipse的SWT来写流程图的代码,但是国内基本上都是如何用JS来写代码,对于SWT的应用现在都非常有限。我们以前用SWT做的流程图,不能实现画虚线。比如两个节点之间,鼠标拖动时,实现一个虚线。
我本人这方面的经验不足,就询问AI,看能否对我进行指导:
我做了这样的询问:
我用zest来实现流程图。请实现节点间可以通过鼠标移动添加连线的功能,鼠标移动时可以显示虚拟的连线。
AI做出如下的回答:
在 Eclipse Zest 中实现通过鼠标移动添加连线并显示虚拟连线的功能,可以借助 Zest 和 Draw2D 的功能来实现。以下是实现步骤和示例代码:
实现步骤
- 创建 Zest 图表
使用 Graph 组件作为主容器。 - 捕获鼠标事件
监听鼠标按下、移动和释放事件,记录节点的起点和终点。 - 绘制虚拟连线
使用 PolylineConnection 在鼠标移动时动态绘制虚拟连线。 - 添加连线
当鼠标释放时,将虚拟连线替换为实际连线,并更新图表模型。
示例代码
以下代码展示如何实现这个功能:
import org.eclipse.draw2d.*;
import org.eclipse.swt.*;
import org.eclipse.swt.events.*;
import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.widgets.*;
import org.eclipse.zest.core.widgets.*;
import org.eclipse.zest.layouts.*;
public class ZestDynamicConnectionExample {
private Graph graph;
private GraphNode sourceNode;
private PolylineConnection temporaryConnection;
private Layer connectionLayer;
public static void main(String[] args) {
Display display = new Display();
Shell shell = new Shell(display);
shell.setLayout(new FillLayout());
shell.setText("Zest Dynamic Connection Example");
new ZestDynamicConnectionExample().createGraph(shell);
shell.setSize(800, 600);
shell.open();
while (!shell.isDisposed()) {
if (!display.readAndDispatch()) {
display.sleep();
}
}
display.dispose();
}
private void createGraph(Composite parent) {
graph = new Graph(parent, SWT.NONE);
graph.setLayoutAlgorithm(new TreeLayoutAlgorithm(LayoutStyles.NO_LAYOUT_NODE_RESIZING), true);
// 创建节点
GraphNode node1 = new GraphNode(graph, SWT.NONE, "Node 1");
GraphNode node2 = new GraphNode(graph, SWT.NONE, "Node 2");
GraphNode node3 = new GraphNode(graph, SWT.NONE, "Node 3");
// 初始化图层
LightweightSystem lws = new LightweightSystem(graph);
connectionLayer = new Layer();
lws.getRootFigure().add(connectionLayer);
// 鼠标事件监听
graph.addMouseListener(new MouseAdapter() {
@Override
public void mouseDown(MouseEvent e) {
sourceNode = findNodeAt(e.x, e.y);
if (sourceNode != null) {
createTemporaryConnection(e.x, e.y);
}
}
@Override
public void mouseUp(MouseEvent e) {
GraphNode targetNode = findNodeAt(e.x, e.y);
if (sourceNode != null && targetNode != null && sourceNode != targetNode) {
new GraphConnection(graph, SWT.NONE, sourceNode, targetNode);
}
clearTemporaryConnection();
sourceNode = null;
}
});
graph.addMouseMoveListener(e -> {
if (sourceNode != null && temporaryConnection != null) {
updateTemporaryConnection(e.x, e.y);
}
});
}
private GraphNode findNodeAt(int x, int y) {
for (Object item : graph.getNodes()) {
GraphNode node = (GraphNode) item;
if (node.getBounds().contains(x, y)) {
return node;
}
}
return null;
}
private void createTemporaryConnection(int startX, int startY) {
temporaryConnection = new PolylineConnection();
temporaryConnection.setSourceAnchor(new AbsoluteAnchor(startX, startY));
temporaryConnection.setTargetAnchor(new AbsoluteAnchor(startX, startY));
connectionLayer.add(temporaryConnection);
}
private void updateTemporaryConnection(int x, int y) {
if (temporaryConnection != null) {
temporaryConnection.setTargetAnchor(new AbsoluteAnchor(x, y));
graph.redraw();
}
}
private void clearTemporaryConnection() {
if (temporaryConnection != null) {
connectionLayer.remove(temporaryConnection);
temporaryConnection = null;
graph.redraw();
}
}
private static class AbsoluteAnchor extends AbstractConnectionAnchor {
private final int x;
private final int y;
public AbsoluteAnchor(int x, int y) {
super(null);
this.x = x;
this.y = y;
}
@Override
public Point getLocation(Point reference) {
return new Point(x, y);
}
}
}
代码说明
- 节点查找 (findNodeAt)
通过鼠标坐标检查鼠标点击的节点。 - 临时连线创建 (createTemporaryConnection)
创建虚拟连线并将其绘制在图层上。 - 动态更新连线 (updateTemporaryConnection)
鼠标移动时更新连线的终点。 - 清理虚拟连线 (clearTemporaryConnection)
在鼠标释放时移除虚拟连线。 - 添加实际连线
鼠标释放时,如果目标节点存在且与起始节点不同,则创建实际的 GraphConnection。
运行效果
- 用户按下鼠标选择起始节点。
- 鼠标拖动时显示虚拟连线。
- 鼠标释放后,如果释放位置在另一个节点上,则添加连线;否则取消连线。
此代码可以作为基础,根据需求扩展更多功能(如连接线样式、属性编辑等)。
想不到这么简单就完成了。这就是使用AI带来的开发效率。
不过有担心了,程序员是否真的要失业了?