Skip to content

fix: 删除自动获取宽度，子级撑开 #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 10, 2021
Merged

fix: 删除自动获取宽度，子级撑开 #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5acec1f
fix: 删除计算宽度，父级自动撑开
Jun 10, 2021
0796316
fix: 删除计算宽度，父级自动撑开
Jun 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-visual-modeling",
"version": "1.0.31",
"version": "1.0.32",
"description": "一个基于React的数据可视化建模的DAG图，适用于UML，数据库建模，数据仓库建设等业务",
"main": "dist/index.js",
"pack": "pack/index.js",
Expand Down
11 changes: 0 additions & 11 deletions src/adaptor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,6 @@ import * as _ from 'lodash';
import Edge from './canvas/edge';
import TableNode from './canvas/node';

export const BORDER_WIDTH = 2;
export const OPER_ICON_WIDTH = 86;

export const getWidth = (columns) => {
let width = columns.reduce((cur, pre) => {
cur = cur + pre.width;
return cur;
}, 0);
return width;
}

export const transformInitData = (info) => {
let {
columns, data, config,
Expand Down
20 changes: 1 addition & 19 deletions src/canvas/node.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ import emptyDom from './empty';
import Endpoint from './endpoint';
import RightMenuGen from './right-menu';

import {getWidth, BORDER_WIDTH, OPER_ICON_WIDTH} from '../adaptor'

export default class TableNode extends Node {
constructor(opts) {
super(opts);
Expand Down Expand Up @@ -48,15 +46,9 @@ export default class TableNode extends Node {
this._createNodeEndpoint();
// 保持title宽度
if (this.fieldsList.length > 0) {
let columns = _.get(this.options, '_columns', []);
// 获取所有columns的宽度总和 加border
let width = getWidth(columns);
// let width = $(this.fieldsList[0].dom).width();
let width = $(this.fieldsList[0].dom).width();
$(this.dom).find('.title').css('width', width);
} else {
let columns = _.get(this.options, '_columns', []);
// 获取所有columns的宽度总和 加border
let width = getWidth(columns);
$(this.dom).find('.title').css('width', this.options._emptyWidth || width);
}

Expand Down Expand Up @@ -109,10 +101,6 @@ export default class TableNode extends Node {
}

_collapse(oldEdges) {
let columns = _.get(this.options, '_columns', []);
// 获取所有columns的宽度总和 加border
let width = getWidth(columns) + BORDER_WIDTH;

if (this.status === 'collapse') {
console.warn(`节点${this.id}已经是收缩状态`)
return;
Expand All @@ -121,7 +109,6 @@ export default class TableNode extends Node {
this._createTitleEndpoint();
// 隐藏字段
this.fieldsList.forEach((item) => {
$(item.dom).parent().css('width', width);
$(item.dom).css('display', 'none');
});
// 记录状态
Expand Down Expand Up @@ -160,23 +147,18 @@ export default class TableNode extends Node {
let title = _.get(this, 'options.title');
let titleRender = _.get(this, 'options._config.titleRender');
let titleDom = $(`<div class="title"></div>`);
let columns = _.get(this.options, '_columns', []);
// 获取所有columns的宽度 - 操作按钮预留宽度
let width = getWidth(columns) - OPER_ICON_WIDTH;
$(container).append(titleDom);
if (title) {
if (titleRender) {
let titleTextDom = $(`<div class="title-text"></div>`);
$(titleDom).append(titleTextDom);
titleTextDom.css('width', width)
ReactDOM.render(
titleRender(title),
titleTextDom[0]
);
} else {
let titleTextDom = $(`<div class="title-text">${title}</div>`);
$(titleDom).append(titleTextDom);
titleTextDom.css('width', width)
}
}
}
Expand Down