le5le-com / topology Goto Github PK

A diagram (topology, UML) framework uses canvas and typescript. 一个轻量（100k左右）、功能丰富的绘图工具（微服务架构图、拓扑图、流程图、类图等UML图、脑图，动画、视频支持）。【在线使用】：

Home Page: http://topology.le5le.com/

License: MIT License

JavaScript 0.17% TypeScript 99.57% HTML 0.19% Shell 0.08%

topology canvas typescript diagrams

topology's People

Contributors

Stargazers

Watchers

Forkers

1257any gailufeng b-xiang fengjinli dut3062796s henryleecn imloama casually linzongkao raccoonrat fddqfddq maliqiang newlysoft stacey1018 zhaoguanjun666 moon989 zeng12155 huboy2004 awesome-javascript mdeng1024 sinolbs mtwebui huanzui birdflyinhigh yesc leegkon failry whelamc ray09jerry zouxyjj dragonxu wxyer huangmeng4520 lxh-wind hanhuigithub2018 shaomingchao charles2mx yyb-dalu i7see 51ding forksss amtech yrq110-forkrepo zbmio sunnyguohua leigocq pythgulp szhorizon tt1262360978 moto998 lqc19901106 yqjack yangxin1994 gaodun2016 akalsy ferren-qf yanglang1987500 ljia310 hhhgame gechong oliver225 sunyongming ikuler zcx990 lan9liang baisheng jackjkl apiend zuodh libin1991 mfdefs szsheep beetaa sgguo giscafer robbbit hh1977 fcwalker timeless1406 freegodly arvin-xuwj ztcbat rainleo qdmall yh-test master-kolan ruanfeixiong yanhaizhe wittech go-on-the-way lai3d keyzf zhh007 kowills guzeh mcclcm fuchen1994 dngiveu johnnyhhj tomzhang

topology's Issues

设置节点的图片属性后，节点移动后渲染有问题

设置节点的图片属性后，节点移动后，框图没有移动

点击空白处，节点显示消失，全选后，相关节点还在

增加一个div层，允许拖放管理dom元素

例如iframe url，视频，音频等。

此层的保存图片和svg可以暂时留白说明。

The height of topology canvas

The height of topology canvas is not equal to the height of the parent node. I don't know what kind of Kaolv it is
$6J1N} 5_RHJ{(2AV_WDAHO$

When the background color is set, there will be an obvious problem

使用es5，topology.bundle.js直接引入到html中，出现Uncaught ReferenceError: Le5leTopology is not defined

在https://github.com/le5le-com/topology/releases中下载最新的topology.bundle.js
html中引入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="topology.bundle.js"></script>
	<script src="./index.js"></script>
</head>
<body>
	<div class="canvas" id="topo-canvas"></div>
</body>
</html>

本地运行项目，浏览器访问，http://localhost:8090
结果

Init middles.

topology.bundle.js:1 Uncaught TypeError: Cannot read property 'appendChild' of null
    at topology.bundle.js:1
    at Module.<anonymous> (topology.bundle.js:1)
    at i (topology.bundle.js:1)
    at topology.bundle.js:1
    at topology.bundle.js:1
    at topology.bundle.js:1
    at topology.bundle.js:1
(anonymous) @ topology.bundle.js:1
(anonymous) @ topology.bundle.js:1
i @ topology.bundle.js:1
(anonymous) @ topology.bundle.js:1
(anonymous) @ topology.bundle.js:1
(anonymous) @ topology.bundle.js:1
(anonymous) @ topology.bundle.js:1

index.js:1 Uncaught ReferenceError: Le5leTopology is not defined
    at index.js:1
(anonymous) @ index.js:1
(index):38 Live reload enabled.

canvas图片不清晰

这个麻烦你统一解决以下吧。我不知道有没有更好的方案。
https://www.jianshu.com/p/28a28ddeeb5c

节点设置背景色，选中时看不到图标和文字

如题
猜测是因为选中时，复制并渲染了一个新节点在原有节点上面。请问这样玩如何解决？

请问怎么和php结合，我想要和php结合做一个在线脑图工具！

Provides parameters for whether to draw lines automatically

In the process of drawing a figure, sometimes the drawing line is always triggered by mistake. Whether it can provide a parameter to disable the function of automatic drawing line? It is turned on when the line needs to be drawn. When drawing small figures, it's too obvious to touch them by mistake

绘制图形的过程中，有时总是误触发画线，能否提供一个参数禁用自动绘制线的功能，需要绘制直线的时候在开启。当绘制小的图形时，误触太明显了

子节点指定图片宽高不会缩放

线上能否带字

你好：
线上能否带字？

节点新增padding

[bug]鼠标右键限制不触发拉框操作，会和右键菜单冲突

鼠标右键限制不触发拉框操作，会和右键菜单冲突

[suggestion]一些类的成员变量特定含义的值用枚举类型表示

建议一些属性值可以用枚举类型表示，或者源码加上注释，这样libs API生成的文档可以清晰明白可能的值代表含义。源码阅读体验会更好，也不需要更多文档支持，现在不看文档，源码没说明就没法了解到。

eg: Pen 类的 dash 和 Topology 的locked，不看文档，单纯看源码不清楚其他值表示的意思。

举例

export enum TopologyLockedType {
    Unlock = 0, // 未锁定，可任意编辑
    DisableLine = 1, // 锁定连线。不能编辑连线
    OnlySelectAndHighlight = -1, // 全部锁定，不能做任何编辑，允许选中，并高亮
    OnlyCanSelect = -2, // 全部锁定，不能做任何编辑，允许选中，无高亮
    Locked = -3 // 无法做任何操作
}

选中多个节点，属性栏新增对齐方式

选中多个节点，在右侧属性栏新增：上、下、左、右、居中等对齐方式。

节点/连线动画播放结束时，触发下一个节点/连线播放动画

触发下一个节点/连线播放动画时，同时发送一个消息通知

锚点选中应该向节点外偏移，使操作更方便

当鼠标移动到节点边框外部靠近时，选中锚点；
当鼠标移动到节点上时，选中节点

Advice add High DPI support

See Detail: Canvas High DPI

请问怎么重新设置topology canvas 的大小

请问怎么重新设置topology canvas 的大小，我发现窗口变化时，canvas 大小没有跟着变化，绘制区域和显示区域不相符。

直接通过函数添加连线

The result of painting the whole canvas is so fuzzy

提交错误

项目的bundle文件夹下的demo文件夹下仅有2个文件，一个html一个js。但是这个html引用了2个js文件，缺少一个topology.bundle.js文件。求快速修复

结合echarts的部分，数据填写的时候是[Object object]

store独立出来，和le5le-store整合

能否将项目中左边工具栏的iconfont独立出一个package?

在使用过程中发现工具栏的iconfont是通过

这样的方式来引用cdn 上的资源，
但是开发者在开发软件的过程中，比方说开发electron 应用或者vscode插件，希望将这些icon打包到应用中，也就是不走网络下载。因此请求，如果您有时间的话，能够方便将iconfont 独立成一个package 吗？
根据我的经验，将阿里的iconfont制作成一个npm package 非常简单，只需要在iconfont.cn网站上对应图标字体的工程里下载zip包，解压，然后将里面的文件放到npm 工程里面即可。
示例：https://github.com/awehook/blink-mind/tree/master/packages/icons

parse() {

parse: 解析
paste: 粘贴

期望新增部分配置

感谢作者开源，使用起来非常方便，在使用过程中遇到一点小的问题，需要在 topology 中新增一点配置才能实现，希望作者能提供便利。

目前遇到如下两点问题：

每一个节点中添加一个hideInput配置，部分节点不需要双击出现输入框

  private showInput(item: Pen) {
    if (this.data.locked || item.locked || this.options.hideInput) {
      return;
    }

    this.inputObj = item;
    const textRect = item.getTextRect();
    this.input.value = item.text || '';
    this.input.style.left = textRect.x + 'px';
    this.input.style.top = textRect.y + 'px';
    this.input.style.width = textRect.width + 'px';
    this.input.style.height = textRect.height + 'px';
    this.input.style.zIndex = '1000';
    this.input.focus();
  }

在 options 中提供一个最大缩放配置参数，避免放大到最大时屏幕会卡顿

欢迎有兴趣的开发者继续补充.