fex-team / kityminder-core Goto Github PK

View Code? Open in Web Editor NEW

1.3K 85.0 519.0 34.3 MB

强大的脑图可视化工具

License: BSD 3-Clause "New" or "Revised" License

JavaScript 97.77% CSS 1.04% HTML 1.19%

kityminder-core's Introduction

KityMinder Core

简介

KityMinder 是一款强大的脑图可视化/编辑工具，由百度 FEX 团队开发并维护。

本仓库是 KityMinder 的核心实现部分：

包括脑图数据的可视化展示（Json 格式）
包括简单的编辑功能（节点创建、编辑、删除）。更加强大编辑功能的 KityMinder 编辑器请移步 kityminder-editor
不包含第三方格式（FreeMind、XMind、MindManager）的支持，可以加载 kityminder-protocol 来扩展第三方格式支持。
不包含文件存储的支持，需要自行实现存储。可参照百度脑图中的开源的 fio + 百度网盘方案进行实现。

使用

可以参考 example.html 进行使用。

<div id="minder-container"></div>
<script type="text/javascript" src="kityminder.core.min.js"></script>
<script type="text/javascript">
var minder = new kityminder.Minder({
	renderTo: '#minder-container'
});
</script>

更多详细的开发资料可以参考 wiki

兼容性

KityMinder 基于 SVG 技术实现，支持绝大多数的 HTML5 浏览器，包括：

Chrome
Firefox
Safari
Internet Explorer 10 或以上

使用说明

kityminder-core 依赖于 kity，开发中用到 seajs 进行异步加载。例子中 dev.html 使用 seajs 进行包加载，example.html 使用同步加载的方式。使用步骤如下：

安装 bower
切换到 kityminder-core 目录下，运行：

bower install

开发说明

安装 bower
安装 npm

bower install
npm install
npm run dev

联系我们

问题和建议反馈：Github Issues 邮件组: [email protected] QQ 讨论群: 374918234

kityminder-core's People

Contributors

Stargazers

Watchers

Forkers

ztx1491 asd1355215911 keyzf sunhuawei kissthink lanting2009 tyler-li editzhu eseawind zhiyue-archive guigu0101 xuanskyer mararmyjj lonjoy houhlin diaosir jasonzhaolin zhenhuamcu linbq lvyue a4963290 in12hacker lacerba wangjun allenlu1991 fzxs8 myl142857 csq7922070 liyg02 gfkdliuyanjun tianjinrong hillbamboo flyingnautiloidea ipy powerflio matthewxu dmyi zhangfangxu june-ly geniusgene ikenneth liuyutao newlysoft felixgrey sdtm1016 neverwell mkevinc luxh1121 yeemaster cncaimaosheng windli4367 dengc367 li-wenbiao bluewaitor bb-components chenqing24 seoppt 1016135097 senseb gabryz ltbycn zhaopeifei dpreal wxclaude qinshulei simonhjsong ravenzz wilesun mingchunding hehetown xchenguang josonchen nuoyz jmolboy yangyiru mlhorizon abnerlv zhjphust tyctac sinodang tour1986 icloudkit davidmr001 myplist willjoe1987 paradisefj zyzz19951230 schuckbeta junyue yearnsunshine qqcloud ydfqcmt terrycpp wu1005690803 zvker lirongfei123-fork melodyjun php-cpm jurnlee eug3

kityminder-core's Issues

将dev.html作为iframe嵌入到页面中后点击某个元素会导致父页面滚动到顶部

如题，将dev.html作为iframe嵌入到页面中后点击某个元素会导致父页面滚动到顶部
（将其中test.html放入项目的根目录下）
test.zip

Markdown支持太有限，提议添加部分功能

目前的Markdown支持很有限，只支持标题和普通文本。提议添加超级链接功能。另外最好有加粗斜体等的支持。

请问节点文本编辑功能要自己实现吗？

我把这个项目运行起来后，并没有出现编辑节点文本input标签。是因为在这个项目中，默认没有触发输入文本功能吗？另外，我找到了input的标签，也找到了更改文字内容的方法--text。我如果要实现文本输入功能，在现有的基础上，怎么实现快一些呢？非常感谢~

如果百度脑图节点比较多，选择编辑某个节点时，网页就会变成空白

我弹出报错，，报错信息如下

错误
{"data":"","status":500,"config": ,"cached":false},"statusText":"Internal Server Error"}

浏览器信息：Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

希望你们能在码云或者你们百度自己的开源代码库上传一份代码，我现在用的还是联通的宽带，使用 bower init 的时候还遇到了 bower json-diff#* retry Download of https://github.com/andreas-gruenbacher/json-diff/archive/master.tar.gz failed with ETIMEDOUT, trying with git..

源码压根跑不出来！

百度的产品~ 百度的开源产品！！！我搞了2个小时居然跑不出来！如果文档不齐全请不要开源！

js执行到如下地方走不动了，对象不支持此操作，什么意思？kity是最新版v2.0.0 - 2014-08-04

var FRAME_GRAD = new kity.LinearGradient().pipe(function(g) {
g.setStartPosition(0, 0);
g.setEndPosition(0, 1);
g.addStop(0, "#fff");
g.addStop(1, "#ccc");
});

请问什么时候可以协同编辑？太需要这个功能了！

脑图这个工具使用起来特别棒，平时团队中我们很多人都喜欢用这个来做项目的整理和规划。目前脑图可以共享，但是我们迫切的希望能够加入协同编辑的功能，这样就不仅是一个个人工具，可以用来做团队的项目规划了。谢谢！

怎么引入到自己的项目中去啊

我现在使用的是angular1.x 引入了 dist中的两个文件，接下来要怎么做啊

Fatal error: Module [../core/kity] not found

$ grunt build
Running "clean:last" (clean) task
>> 0 paths cleaned.

Running "dependence:merge" (dependence) task
Fatal error: Module [../core/kity] not found

执行grunt build时报这样的错，有人遇到过吗

收起一个节点后，拖动任意非根节点，该节点会消失

使用示例代码，并在新闻节点中加入子节点：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>KityMinder Example</title>

    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
    <link rel="stylesheet" href="src/kityminder.css" rel="stylesheet">

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #minder-view {
            position: absolute;
            border: 1px solid #ccc;
            left: 10px;
            top: 10px;
            bottom: 10px;
            right: 10px;
        }
    </style>

    <script type="text/javascript" src="bower_components/kity/dist/kity.min.js"></script>
</head>
<body>
    <script id="minder-view" type="application/kityminder" minder-data-type="json">
    {
        "root": {
            "data": {
                "text": "百度产品",
                "image": "https://ss0.bdstatic.com/5a21bjqh_Q23odCf/static/superplus/img/logo_white.png?v=md5",
                "imageSize": { "width": 270, "height": 129 }
            },
            "children": [
                { 
                    "data": { "text": "新闻" },
                    "children": [
                        { "data": { "text": "新闻" } },
                        { "data": { "text": "网页", "priority": 1 } },
                        { "data": { "text": "贴吧", "priority": 2 } },
                        { "data": { "text": "知道", "priority": 2 } },
                        { "data": { "text": "音乐", "priority": 3 } },
                        { "data": { "text": "图片", "priority": 3 } },
                        { "data": { "text": "视频", "priority": 3 } },
                        { "data": { "text": "地图", "priority": 3 } },
                        { "data": { "text": "百科", "priority": 3 } },
                        { "data": { "text": "更多", "hyperlink": "http://www.baidu.com/more" } }
                    ]
                },
                { "data": { "text": "网页", "priority": 1 } },
                { "data": { "text": "贴吧", "priority": 2 } },
                { "data": { "text": "知道", "priority": 2 } },
                { "data": { "text": "音乐", "priority": 3 } },
                { "data": { "text": "图片", "priority": 3 } },
                { "data": { "text": "视频", "priority": 3 } },
                { "data": { "text": "地图", "priority": 3 } },
                { "data": { "text": "百科", "priority": 3 } },
                { "data": { "text": "更多", "hyperlink": "http://www.baidu.com/more" } }
            ]
        }
    }
    </script>
</body>

<script type="text/javascript" src="dist/kityminder.core.min.js"></script>
<script type="text/javascript">
    // 创建 km 实例
    /* global kityminder */
    var km = window.km = new kityminder.Minder();
    km.setup('#minder-view');
    //km.disable();
    //km.execCommand('hand');
</script>

</html>

操作步骤：

载入页面
收起新闻节点
拖动任意非新闻节点
结果：被拖动的节点消失
浏览器： Chrome 版本 44.0.2403.155 m (64-bit)

数据结构的建议

现在的数据结构是树壮的，好处是存储父子节点关系很方便，但是有以下问题：

当处理大量数据（测试数据是6000个节点）时，初次加载非常慢
初次加载无法定位到某个节点（这可能是我没仔细读源码，没找到API或命令，（API文档是不是该完善下了））

所以我希望改变数据结构，改用扁平化结构，父子关系通过id:id对的形式去实现
另外开放初次加载时显示指定节点的方法（通过id）

两个建议

1，节点图片支持base64的image: "data:image/png;base64,iVBORw0KGg。。。。"

2，导入数据时候增加原生json（非字符串json，就算是map吧）的支持，测试时发现小数据貌似是可以的，但数据大了就不行了

启用右键问题

能告知一下如果在画布上启用右键该修改哪一部分代码呢？

如何手动触发interactchange 事件？

我扩展了kityminder-editor，数据是变了，导出的数据也对，但是kityminder-editor 有个基于localStorage的自动保存机制，这个机制是根据contentchange触发的，但是我修改节点data里的自定义属性，却无法触发这个contentchange

脑图的二次开发文档不全啊

wiki里面的接口核心类文档都没有

#建议# 描述中链接修改

README.md中，“百度脑图”的链接建议修改为kitymider的页面，其中有文件存储的实现。

不包含文件存储的支持，需要自行实现存储。可参照百度脑图中的开源的 fio + 百度网盘方案进行实现。

能告知下，怎么扩展自定义的节点吗

在chrome下无法复制

kityminder-core在Firefox下可以使用快捷键Ctrl+c/Ctrl+v复制黏贴,
但是在chrome下就不行

对于命令编辑选中的节点 EditNode 为什么没有反应

执行EditNode 编辑节点命令，没有效果，为什么呢

http://naotu.baidu.com 为什么还不支持HTTPS?

3ee0fe550d56f8d6169cc2bfb2cbbd7f:13 Mixed Content: The page at 'https://naotu.baidu.com/file/3ee0fe550d56f8d6169cc2bfb2cbbd7f' was loaded over HTTPS, but requested an insecure stylesheet 'http://naotu.baidu.com/public/dist/kityminder.online.min.css?_=dd2447233c92274d'. This request has been blocked; the content must be served over HTTPS.
3ee0fe550d56f8d6169cc2bfb2cbbd7f:20 Mixed Content: The page at 'https://naotu.baidu.com/file/3ee0fe550d56f8d6169cc2bfb2cbbd7f' was loaded over HTTPS, but requested an insecure script 'http://hm.baidu.com/hm.js?0703917f224067c887f3664479a03887'. This request has been blocked; the content must be served over HTTPS.
(anonymous) @ 3ee0fe550d56f8d6169cc2bfb2cbbd7f:20
3ee0fe550d56f8d6169cc2bfb2cbbd7f:1 Mixed Content: The page at 'https://naotu.baidu.com/file/3ee0fe550d56f8d6169cc2bfb2cbbd7f' was loaded over HTTPS, but requested an insecure script 'http://naotu.baidu.com/public/dist/kityminder.online.min.js?_=2dbf34d4d0334cf8'. This request has been blocked; the content must be served over HTTPS.
3ee0fe550d56f8d6169cc2bfb2cbbd7f:34 Uncaught ReferenceError: angular is not defined
at 3ee0fe550d56f8d6169cc2bfb2cbbd7f:34
3ee0fe550d56f8d6169cc2bfb2cbbd7f:1 Mixed Content: The page at 'https://naotu.baidu.com/file/3ee0fe550d56f8d6169cc2bfb2cbbd7f' was loaded over HTTPS, but requested an insecure stylesheet 'http://naotu.baidu.com/public/dist/kityminder.online.min.css?_=dd2447233c92274d'. This request has been blocked; the content must be served over HTTPS.

getSiblings

ie 11到处svg

ie导出的svg 没办法打开。方法没有报错

中心主题
以上是具体数据的svg内容

exportData导出图片，每次导出的形态不一样

在使用importJson初始化脑图对象后，使用exportData('png')导出图片，每次导出的样子不一样，有的时候是正常的节点展开的状态没问题，有事就是所有节点都挤在一起，有的时候又是节点重合一半等等，不知道是什么原因导致的每次生成的图片和预想效果不一致，还是变化的

怎么控制节点插入到左边还是右边

怎么控制节点插入到左边还是右边，比如左边两个，右边五个

如何扩展一个节点？

我想把节点做成一个div，如下图，不知道有没有开放的接口？

没办法加载树形结构图 filetree引入无效也无法换模板，是怎么回事呢

这个项目还在维护吗？希望提供小程序支持

ie 11 导出png失败

如题

API文档为空

求补录参考文档。

如何初始化字体颜色或者背景色的信息？

抱歉，wiki的开发文档实在有限，在源码中也没很快地找到相应的配置信息。比如说支持的属性，尝试了background、或者color等均无效

        var mock_data = {
            "data": {
                "id": 201,
                "text": "777"
            },
            "children": [{
                "data": {
                    "id": 202,
                    "text": "a",
                    "priority": 1
                }
            }, {
                "data": {
                    "id": 203,
                    "text": "b",
                    "priority": 2
                }
            }, {
                "data": {
                    "id": 203,
                    "text": "asdfad阿萨德阿萨德da",
                    "priority": ""
                }
            }]
        }

类似于

                "data": {
                    "id": 203,
                    "text": "asdfad阿萨德阿萨德da",
                    "priority": ""
                    "color": "#aaa"
                }

这样，kityminder-core是否提供了这样的接口
打扰请见谅

求补全kityminder-core和kityminder-editor的接口文档

希望能够补全接口文档，便于我这种入门级选手使用

在chrome上导出png图片不可用

问题如题，经过调试发现在：
src/protocol/png.js 中的 loadImage 这个方法创建了一个img元素，然后把svg的url作为src传入。但是这里的svg对象中没有命名空间：“xmlns:http://www.w3.org/2000/svg" 属性，导致图片加载失败。

不确定是否是我的环境问题，但是当我在getSVGInfo方法中，增加了svgDom的上述属性就可以正常导出了：
svgDom.setAttribute('xmlns', 'http://www.w3.org/2000/svg')

参见：https://stackoverflow.com/a/46238680