`);
+
+ container.append(titleDom);
+
+ return container[0];
+ }
+}
+
+module.exports = BaseNode;
\ No newline at end of file
diff --git a/example/demo/relationalBooks-new/alis-node.js b/example/demo/relationalBooks-new/alis-node.js
new file mode 100644
index 00000000..f96df321
--- /dev/null
+++ b/example/demo/relationalBooks-new/alis-node.js
@@ -0,0 +1,76 @@
+'use strict';
+
+const Node = require('../../../index.js').Node;
+const $ = require('jquery');
+
+class AlisBaseNode extends Node {
+ constructor(opts) {
+ super(opts);
+ this.options = opts;
+ }
+
+ draw = (opts) => {
+ let className = this.options.type;
+ let container = $('
')
+ .css('top', opts.top + 'px')
+ .css('left', opts.left + 'px')
+ .addClass(className)
+ .attr('id', opts.id);
+
+ this._createTitle(container);
+ this._createContent(container);
+ this._onRemoveNode(container);
+
+ return container[0];
+ }
+
+ _createTitle = (dom) => {
+ let title = $(
+ `
+ ${this.options.name}
+
`);
+
+ dom.append(title);
+ this._editNode(title);
+ }
+
+ _createContent(dom) {
+ let con = $(`
+
+
${this.options.data.content}
+
+
`);
+
+ dom.append(con);
+ this._editNode(con);
+ }
+
+ _onRemoveNode(dom) {
+ $(dom).find('#close').click(function () {
+ dom[0].remove();
+ });
+ }
+
+ _editNode = (dom) => {
+ dom.find('.alis-node-edit').click(function (e) {
+ const oldNode = $(this).prev('.title-text');
+ const oldNodeText = $(this).prev('.title-text').text();
+
+ if (dom[0] === $('.group-node > .title')[0]) {
+ oldNode.html(`
`);
+ $(oldNode).find('input').focus().val(oldNodeText);
+ } else {
+ oldNode.html(`
`);
+ $(oldNode).find('textarea').focus().val(oldNodeText);
+ }
+ oldNode.children().keyup(function (event) {
+ if (event.keyCode === 13 || event.keyCode === 27) {
+ const oldInputText = $(this).val();
+
+ $(this).parent('.title-text').text(oldInputText);
+ }
+ });
+ })
+ }
+}
+module.exports = AlisBaseNode;
\ No newline at end of file
diff --git a/example/demo/relationalBooks-new/data.js b/example/demo/relationalBooks-new/data.js
new file mode 100644
index 00000000..c10e3930
--- /dev/null
+++ b/example/demo/relationalBooks-new/data.js
@@ -0,0 +1,134 @@
+'use strict';
+
+const BaseNode = require('./node.js');
+const AlisBaseNode = require('./alis-node.js');
+const $ = require('jquery');
+
+module.exports = {
+ nodes: [{
+ id: '0',
+ name: 'Book',
+ top: 264,
+ left: 172,
+ data: {
+ content: ['id', 'isbn', 'title']
+ },
+ endpoints: [{
+ id: 'point_1',
+ type: 'source',
+ orientation: [1, 0],
+ pos: [0, 1.5]
+
+ }, {
+ id: 'point_2',
+ type: 'target',
+ orientation: [-1, 0],
+ pos: [0, 1.5]
+ }],
+ Class: BaseNode
+ }, {
+ id: '1',
+ name: 'BookPublisher',
+ top: 488,
+ left: 374,
+ data: {
+ content: ['book_id', 'publisher_id']
+ },
+ endpoints: [{
+ id: 'point_1',
+ type: 'target',
+ orientation: [-1, 0],
+ pos: [0, 1.5]
+ }, {
+ id: 'point_2',
+ type: 'source',
+ orientation: [1, 0],
+ pos: [0, 2.5]
+ }],
+ Class: BaseNode
+ }, {
+ id: '2',
+ name: 'Author',
+ top: 488,
+ left: 750,
+ data: {
+ content: ['id', 'name']
+ },
+ endpoints: [{
+ id: 'point_1',
+ type: 'target',
+ orientation: [-1, 0],
+ pos: [0, 1.5]
+ }],
+ Class: BaseNode
+ }, {
+ id: '3',
+ name: 'BookAuthor',
+ top: 754,
+ left: -36,
+ data: {
+ content: ['book_id', 'author_id']
+ },
+ endpoints: [{
+ id: 'point_1',
+ type: 'source',
+ orientation: [1, 0],
+ pos: [0, 1.5]
+ }, {
+ id: 'point_2',
+ type: 'source',
+ orientation: [1, 0],
+ pos: [0, 2.5]
+ }],
+ Class: BaseNode
+ }, {
+ id: '4',
+ name: 'Publisher',
+ data: {
+ content: ['id', 'name']
+ },
+ top: 754,
+ left: 374,
+ endpoints: [{
+ id: 'point_1',
+ type: 'target',
+ orientation: [-1, 0],
+ pos: [0, 1.5]
+ }],
+ Class: BaseNode
+ }, {
+ id: '5',
+ name: 'Books By Author',
+ data: {
+ content: 'SELECT * FROM b INNER JOIN book_author ba ON b.id = ba.book_id GROUP BY ba.author_id'
+ },
+ top: 744,
+ left: 900,
+ Class: AlisBaseNode
+ }],
+ edges: [{
+ source: 'point_1',
+ target: 'point_1',
+ sourceNode: '0',
+ targetNode: '1',
+ type: 'endpoint',
+ }, {
+ source: 'point_2',
+ target: 'point_1',
+ sourceNode: '1',
+ targetNode: '4',
+ type: 'endpoint',
+ }, {
+ source: 'point_1',
+ target: 'point_2',
+ sourceNode: '3',
+ targetNode: '0',
+ type: 'endpoint',
+ }, {
+ source: 'point_2',
+ target: 'point_1',
+ sourceNode: '3',
+ targetNode: '2',
+ type: 'endpoint',
+ }],
+};
\ No newline at end of file
diff --git a/example/demo/relationalBooks-new/index.jsx b/example/demo/relationalBooks-new/index.jsx
new file mode 100644
index 00000000..b0d766e2
--- /dev/null
+++ b/example/demo/relationalBooks-new/index.jsx
@@ -0,0 +1,44 @@
+'use strict';
+import React, {Component} from 'react';
+const Canvas = require('../../../index.js').Canvas;
+const mockData = require('./data.js');
+
+require('./index.less');
+require('butterfly-dag/dist/index.css');
+
+class RelationalBooksNew extends Component {
+ constructor() {
+ super();
+ this.canvas = null;
+ }
+ componentDidMount() {
+ let root = document.getElementById('dag-canvas');
+ this.canvas = new Canvas({
+ root: root,
+ disLinkable: true, // 可删除连线
+ linkable: true, // 可连线
+ draggable: true, // 可拖动
+ zoomable: true, // 可放大
+ moveable: true, // 可平移
+ theme: {
+ edge: {
+ type: 'Straight',
+ },
+ }
+ });
+ this.canvas.setMinimap(true);
+ this.canvas.draw(mockData, () => {
+ this.canvas.focusCenterWithAnimate();
+ });
+ }
+ render() {
+ return (
+
+ );
+ }
+}
+
+module.exports = RelationalBooksNew;
diff --git a/example/demo/relationalBooks-new/index.less b/example/demo/relationalBooks-new/index.less
new file mode 100644
index 00000000..4cf1b4a3
--- /dev/null
+++ b/example/demo/relationalBooks-new/index.less
@@ -0,0 +1,115 @@
+.relational-books-page{
+ width: 100%;
+ height: 100%;
+ position: relative;
+ .butterfly-minimap-container {
+ top: 30px;
+ right: 30px !important;
+ }
+ .flow-canvas {
+ width: 100%;
+ height: 100%;
+ .butterflies-link {
+ stroke: #c66767;
+ stroke-width: 3px;
+ }
+ .butterfly-wrapper {
+ .base-node {
+ width: 200px;
+ position: absolute;
+ .title {
+ line-height: 32px;
+ height: 32px;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ background: #597EF7;
+ padding: 0 8px;
+ color: #fff;
+ .remove {
+ cursor: pointer;
+ }
+ .add-node {
+ cursor: pointer;
+ }
+ }
+ .content {
+ height: 32px;
+ width: 200px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 8px;
+ background: #fff;
+ border: 1px solid #d9d9d9;
+ .remove {
+ visibility: hidden;
+ cursor: pointer;
+ }
+ .text {
+ .input-text {
+ height: 28px;
+ border: 1px solid #000;
+ width: 130px;
+ padding: 0 4px;
+ }
+ }
+ .edit {
+ visibility: hidden;
+ cursor: pointer;
+ }
+ }
+ .content:hover > .remove,.content:hover > .edit {
+ visibility: visible;
+ }
+ .content:hover {
+ background: #d9d9d9;
+ }
+ }
+ .group-node {
+ width: 200px;
+ position: absolute;
+ .title {
+ line-height: 32px;
+ height: 32px;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ background: #597EF7;
+ padding: 0 8px;
+ color: #fff;
+ .title-text {
+ input {
+ width: 140px;
+ color: #333;
+ height: 28px;
+ border: 1px solid #ccc;
+ }
+ }
+ #close {
+ cursor: pointer;
+ }
+ .alis-node-edit {
+ cursor: pointer;
+ }
+ }
+ .container {
+ display: flex;
+ padding: 8px;
+ justify-content: space-between;
+ border: 1px solid #ccc;
+ background: #fff;
+ p {
+ textarea {
+ min-height: 80px;
+ width: 164px;
+ }
+ }
+ .alis-node-edit {
+ cursor: pointer;
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/example/demo/relationalBooks-new/node.js b/example/demo/relationalBooks-new/node.js
new file mode 100644
index 00000000..6a92b1fd
--- /dev/null
+++ b/example/demo/relationalBooks-new/node.js
@@ -0,0 +1,101 @@
+'use strict';
+
+const Node = require('../../../index.js').Node;
+const $ = require('jquery');
+import '../../static/iconfont.css';
+
+class BaseNode extends Node {
+ constructor(opts) {
+ super(opts);
+ this.options = opts;
+ }
+ draw = (opts) => {
+ let className = this.options.type;
+ let container = $('
')
+ .css('top', opts.top + 'px')
+ .css('left', opts.left + 'px')
+ .addClass(className)
+ .attr('id', opts.id);
+
+ this._createTitle(container);
+ this._createChildNode(container);
+
+ return container[0];
+ }
+
+ _createTitle(dom) {
+ let title = $(`
+
+ ${this.options.name}
+
+
`);
+
+ dom.append(title);
+ this._onAddNode(title);
+ this._onRemovedNode(title);
+ }
+
+ _createChildNode(dom) {
+ $.each(this.options.data.content, (i, item) => {
+ dom.append(`
+
+
+ ${item}
+
+
`);
+ });
+
+ let childNode = dom.find('.content');
+
+ this._onRemovedNode(childNode);
+ this._onEditNode(childNode);
+ }
+
+ _onRemovedNode(dom) {
+ dom.find('.remove').on('click', function () {
+ this.parentNode.remove();
+ });
+ }
+
+ _onEditNode(dom) {
+ dom.find('.edit').click(function () {
+ const oldNode = $(this).prev('.text');
+ const oldNodeText = $(this).prev('.text').text();
+
+ if ($(oldNode.html()).attr("type") !== 'text') {
+ oldNode.html(`
`);
+ $(oldNode).find('input').focus().val(oldNodeText);
+ oldNode.children().keyup(function (event) {
+ if (event.keyCode === 13 || event.keyCode === 27) {
+ const oldInputText = $(this).val();
+
+ oldNode.text(oldInputText);
+ }
+ });
+ }
+ })
+ }
+
+ _onAddNode(dom) {
+ dom.find('.add-node').click(() => {
+ let code = '';
+ const codeLength = 4;
+ const random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');
+
+ for (let i = 0; i < codeLength; i++) {
+ const index = Math.floor(Math.random() * 36);
+ code += random[index];
+ }
+ dom.parent('.base-node').append(`
+
+
+ ${code}
+
+
`);
+
+ this._onRemovedNode($('.content'));
+ this._onEditNode($('.content'));
+ });
+ }
+}
+module.exports = BaseNode;
diff --git a/example/index.jsx b/example/index.jsx
index f0665b73..ad7e8261 100644
--- a/example/index.jsx
+++ b/example/index.jsx
@@ -11,9 +11,11 @@ import Diodes from './demo/diodes/index.jsx';
import Force from './demo/force/index.jsx';
import RelationalNetwork from './demo/relationalNetwork/index.jsx';
import RelationalBooks from './demo/relationalBooks/index.jsx';
+import RelationalBooksNew from './demo/relationalBooks-new/index.jsx';
import System from './demo/system/index.jsx';
import liteGraph from './demo/liteGraph/index.jsx';
import MindMap from './demo/mindMap/index.jsx';
+import MindMapNew from './demo/mindMap-new/index.jsx';
import CompactBoxTree from './demo/compact-box-tree/index.jsx';
import EntityRelationship from './demo/entity-relationship/index.jsx';
import Emergency2 from './demo/emergency2/index.jsx';
@@ -89,6 +91,9 @@ ReactDOM.render((
MindMap
+
+ MindMapNew
+
Policy
@@ -98,6 +103,9 @@ ReactDOM.render((
Relational Network
+
+ RelationalBooks-new
+
RuleTree
@@ -128,6 +136,9 @@ ReactDOM.render((
+
+
+