代码拉取完成,页面将自动刷新
同步操作将从 Gitee 极速下载/topology 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
English | 简体中文
Le5le-topology 是一个可视化在线绘图工具,使用 Canvas + Typescript。支持 topology, UML、微服务架构、动态流量、SCADA 场景等。
→ 在线画图官网 ,网站可能比较慢,个人申请的云服务器带宽仅仅 1M。
- libs
|- topology // topogoly-core库源码
- src // 官网源码.
- bundle // es5的压缩包和demo
- demo // demo
import { Topology } from 'topology-core';
var canvas = new Topology('topo-dom', options);
canvas.open(data);
<script src="/bundle/topology.bundle.js"></script>
var canvas = new Le5leTopology.Topology('topo-canvas', {});
canvas.open(data);
[Todo]
$ yarn
$ npm start
# build
$ npm run build
$ yarn
//【注意】 修改host文件,把local.dev.le5le.com代理到127.0.0.1
$ npm run dev
$ yarn
//【注意】 修改host文件,把local.le5le.com代理到127.0.0.1
$ npm run prod
[libs/topology#] yarn
# build
[libs/topology#] npm run build
[libs/topology-flow-diagram#] yarn
# build
[libs/topology-flow-diagram#] npm run build
demo 源码
[demo#] yarn or npm install
# build
[demo#] npm run build
// 节点node绘图函数
export function diagram(ctx: CanvasRenderingContext2D, node: Node) {
ctx.beginPath();
// ...
ctx.fill();
ctx.stroke();
}
// [可选] 计算节点node图标区域,默认使用矩形相关函数.
export function diagramIconRect(node: Node) {
let w = node.rect.width / 3;
let h = node.rect.height / 3;
if (w > h) {
w = h;
} else {
h = w;
}
let top = node.rect.width / 5;
if (top < 10) {
top = 10;
}
node.iconRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + top, w, h);
}
// [可选] 计算节点node文字区域,默认使用矩形相关函数.
// fullTextRect - Only text.
// iconTextRect - Incloud icon and text.
export function diagramTextRect(node: Node) {
let bottom = node.rect.height / 10;
if (bottom < 5) {
bottom = 0;
}
node.iconTextRect = new Rect(
node.rect.x + node.rect.width / 3,
node.rect.y + (node.rect.height * 2) / 3 - bottom,
node.rect.width / 3,
node.rect.height / 3 - 5
);
const w = node.rect.width / 2;
const h = (node.rect.height * 1) / 2;
node.fullTextRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + node.rect.height / 4, w, h);
}
// [可选] 计算节点node可连线的锚点,默认使用矩形相关函数.
export function diagramAnchors(node: Node) {
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right));
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom));
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left));
}
// registerNode: Register a custom node.
// name - The name of node.
// drawFn - How to draw.
// anchorsFn - How to get the anchors.
// iconRectFn - How to get the icon rect.
// textRectFn - How to get the text rect.
// force - Overwirte the node if exists.
registerNode(
name: string,
drawFn: (ctx: CanvasRenderingContext2D, node: Node) => void,
anchorsFn?: (node: Node) => void,
iconRectFn?: (node: Node) => void,
textRectFn?: (node: Node) => void,
force?: boolean
);
有任何建议或问题可以在 issue 提出;或提供一个 pr。
MIT © le5le.com
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。