@riil-frontend/component-topology 6.0.0-alpha.56 → 6.0.0-alpha.58
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.css +1 -1
- package/build/index.js +10 -10
- package/es/core/editor/components/Toolbar/widgets/FontColorButton.js +1 -1
- package/es/core/editor/components/Toolbar/widgets/FontSizeWidget.js +10 -1
- package/es/core/editor/components/Toolbar/widgets/FontStyleButton.js +3 -8
- package/es/core/editor/components/Toolbar/widgets/NodeImageButton/NodeImageButton.js +16 -7
- package/es/core/editor/components/Toolbar/widgets/components/ButtonBox.js +1 -1
- package/es/core/editor/components/Toolbar/widgets/components/ButtonBox.module.scss +4 -3
- package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/ElementTextStyleSetting.js +8 -5
- package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/edgeTag.js +26 -7
- package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/groupTitle.js +17 -3
- package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/nodeTag.js +26 -7
- package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/textStyleUtil.js +45 -17
- package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/GlobalTagStyleSetting.js +5 -1
- package/es/core/editor/components/settings/common/text/fontStyleUtil.js +10 -0
- package/es/core/editor/components/settings/propertyViews/layer/BasicSetting.js +0 -1
- package/es/core/models/TopoApp.js +1 -1
- package/lib/core/editor/components/Toolbar/widgets/FontColorButton.js +1 -1
- package/lib/core/editor/components/Toolbar/widgets/FontSizeWidget.js +10 -1
- package/lib/core/editor/components/Toolbar/widgets/FontStyleButton.js +3 -8
- package/lib/core/editor/components/Toolbar/widgets/NodeImageButton/NodeImageButton.js +15 -6
- package/lib/core/editor/components/Toolbar/widgets/components/ButtonBox.js +1 -1
- package/lib/core/editor/components/Toolbar/widgets/components/ButtonBox.module.scss +4 -3
- package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/ElementTextStyleSetting.js +8 -5
- package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/edgeTag.js +29 -7
- package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/groupTitle.js +21 -3
- package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/nodeTag.js +29 -7
- package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/textStyleUtil.js +49 -18
- package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/GlobalTagStyleSetting.js +6 -1
- package/lib/core/editor/components/settings/common/text/fontStyleUtil.js +13 -0
- package/lib/core/editor/components/settings/propertyViews/layer/BasicSetting.js +0 -2
- package/lib/core/models/TopoApp.js +1 -1
- package/package.json +2 -2
@@ -91,7 +91,7 @@ function FontColorDropdown(props) {
|
|
91
91
|
unit: "%",
|
92
92
|
list: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
|
93
93
|
onChange: backOpacityChange,
|
94
|
-
defaultValue: opacity * 100
|
94
|
+
defaultValue: opacity === undefined ? opacity : opacity * 100
|
95
95
|
})), /*#__PURE__*/React.createElement("div", {
|
96
96
|
style: {
|
97
97
|
marginTop: '10px',
|
@@ -5,6 +5,7 @@ import WidgetBox from "./WidgetBox";
|
|
5
5
|
|
6
6
|
function FontSizeSelect(props) {
|
7
7
|
var value = props.value,
|
8
|
+
disabled = props.disabled,
|
8
9
|
_onChange = props.onChange;
|
9
10
|
var items = [9, 10, 11, 12, 14, 16, 18, 20, 24, 30, 36];
|
10
11
|
return /*#__PURE__*/React.createElement(DropdownMenu, {
|
@@ -16,6 +17,7 @@ function FontSizeSelect(props) {
|
|
16
17
|
}
|
17
18
|
}, val || 12);
|
18
19
|
},
|
20
|
+
disabled: disabled,
|
19
21
|
onChange: function onChange(val) {
|
20
22
|
return _onChange(parseInt(val, 10));
|
21
23
|
}
|
@@ -30,12 +32,19 @@ function FontSizeWidget(props) {
|
|
30
32
|
var topo = props.topo,
|
31
33
|
showLabel = props.showLabel,
|
32
34
|
style = props.style,
|
35
|
+
fieldDisabled = props.fieldDisabled,
|
33
36
|
setStyle = props.setStyle;
|
37
|
+
var disabled = fieldDisabled.fontSize; // 选中的元素
|
38
|
+
|
39
|
+
var selection = topo.selectionModel.useHtSelection();
|
40
|
+
useEffect(function () {}, [selection]);
|
34
41
|
return /*#__PURE__*/React.createElement(WidgetBox, {
|
35
42
|
label: "\u5B57\u53F7",
|
36
|
-
showLabel: showLabel
|
43
|
+
showLabel: showLabel,
|
44
|
+
disabled: disabled
|
37
45
|
}, /*#__PURE__*/React.createElement(FontSizeSelect, {
|
38
46
|
value: style.fontSize,
|
47
|
+
disabled: disabled,
|
39
48
|
onChange: function onChange(val) {
|
40
49
|
topo.historyManager.beginTransaction();
|
41
50
|
setStyle({
|
@@ -59,15 +59,10 @@ function FontStyleButton(props) {
|
|
59
59
|
|
60
60
|
var selection = topo.selectionModel.useHtSelection();
|
61
61
|
useEffect(function () {
|
62
|
-
var
|
63
|
-
return
|
62
|
+
var containText = selection.filter(function (ele) {
|
63
|
+
return isText(ele);
|
64
64
|
}).length;
|
65
|
-
|
66
|
-
if (selection.length && isAllText) {
|
67
|
-
setDisabled(false);
|
68
|
-
} else {
|
69
|
-
setDisabled(true);
|
70
|
-
}
|
65
|
+
setDisabled(!containText);
|
71
66
|
}, [selection]);
|
72
67
|
useEffect(function () {
|
73
68
|
setValue(buildValue({
|
@@ -1,16 +1,25 @@
|
|
1
1
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
2
2
|
var _excluded = ["topo", "showLabel"];
|
3
3
|
import React, { useEffect, useState } from "react";
|
4
|
-
import { isGroup, isNode } from "../../../../../../utils/htElementUtils";
|
4
|
+
import { isGroup, isNode, isText } from "../../../../../../utils/htElementUtils";
|
5
5
|
import DropdownButton from "../components/DropdownButton";
|
6
6
|
import WidgetBox from "../WidgetBox";
|
7
7
|
import BoxBackgroundSetting from "./BoxBackgroundSetting";
|
8
|
+
|
9
|
+
function isElementSetImageEnabled(element) {
|
10
|
+
if (isGroup(element)) {
|
11
|
+
return !element.isExpanded();
|
12
|
+
}
|
13
|
+
|
14
|
+
return isNode(element) && !isText(element) && element.a('type') !== 'box';
|
15
|
+
}
|
8
16
|
/**
|
9
17
|
* 替换图片设置
|
10
18
|
* @param {*} props
|
11
19
|
* @returns
|
12
20
|
*/
|
13
21
|
|
22
|
+
|
14
23
|
function NodeImageButton(props) {
|
15
24
|
var topo = props.topo,
|
16
25
|
showLabel = props.showLabel,
|
@@ -27,9 +36,7 @@ function NodeImageButton(props) {
|
|
27
36
|
|
28
37
|
var selection = topo.selectionModel.useHtSelection();
|
29
38
|
useEffect(function () {
|
30
|
-
var nodes = selection.filter(
|
31
|
-
return isGroup(ele) || isNode(ele);
|
32
|
-
});
|
39
|
+
var nodes = selection.filter(isElementSetImageEnabled);
|
33
40
|
|
34
41
|
if (nodes.length > 0) {
|
35
42
|
setDisabled(false);
|
@@ -44,10 +51,12 @@ function NodeImageButton(props) {
|
|
44
51
|
// const gv = topo.view.topoClient.getGraphView();
|
45
52
|
//const element = topo.getSelectionModel().getFirstData();
|
46
53
|
|
47
|
-
var elements =
|
54
|
+
var elements = selection;
|
48
55
|
console.log("onChange-elements", elements);
|
49
|
-
elements.
|
50
|
-
element
|
56
|
+
elements.forEach(function (element) {
|
57
|
+
if (isElementSetImageEnabled(element)) {
|
58
|
+
element.setImage(prop);
|
59
|
+
}
|
51
60
|
}); // selection.map((element) => {
|
52
61
|
// element.setImage(prop);
|
53
62
|
// });
|
@@ -18,7 +18,7 @@ function ButtonBox(props) {
|
|
18
18
|
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
19
19
|
|
20
20
|
return /*#__PURE__*/React.createElement("div", _extends({
|
21
|
-
className: classNames(styles.ButtonBox, (_classNames = {}, _classNames[styles.ButtonBoxActive] = active, _classNames[styles.ButtonBoxDisabled] = disabled, _classNames)),
|
21
|
+
className: classNames(styles.ButtonBox, (_classNames = {}, _classNames[styles.ButtonBoxActive] = active, _classNames[styles.ButtonBoxDisabled] = disabled, _classNames[styles.disabled] = disabled, _classNames)),
|
22
22
|
onClick: disabled ? undefined : onClick
|
23
23
|
}, otherProps), children, showArrow && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0", /*#__PURE__*/React.createElement(_Icon, {
|
24
24
|
type: "tree_fold_arrow",
|
@@ -24,12 +24,15 @@ function ElementTextStyleSetting(props) {
|
|
24
24
|
|
25
25
|
return topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
|
26
26
|
}, [selection, topo]);
|
27
|
-
var
|
27
|
+
var fieldProps = useMemo(function () {
|
28
28
|
if (!graphLoaded) {
|
29
|
-
return {
|
29
|
+
return {
|
30
|
+
value: {},
|
31
|
+
fieldDisabled: {}
|
32
|
+
};
|
30
33
|
}
|
31
34
|
|
32
|
-
return getTextStyle(htSelection, styleNames, topo)
|
35
|
+
return getTextStyle(htSelection, styleNames, topo);
|
33
36
|
}, [graphLoaded, htSelection, topo]);
|
34
37
|
var setStyle = useMemo(function () {
|
35
38
|
return function (style) {
|
@@ -40,8 +43,8 @@ function ElementTextStyleSetting(props) {
|
|
40
43
|
}, [htSelection]);
|
41
44
|
return /*#__PURE__*/React.createElement(Component, _extends({
|
42
45
|
disabled: false,
|
43
|
-
htSelection: htSelection
|
44
|
-
|
46
|
+
htSelection: htSelection
|
47
|
+
}, fieldProps, {
|
45
48
|
setStyle: setStyle
|
46
49
|
}, widgetProps));
|
47
50
|
}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
3
|
-
var _excluded = ["color", "background", "opacity"];
|
3
|
+
var _excluded = ["color", "background", "opacity", "bold", "italic"];
|
4
4
|
import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
|
5
5
|
import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
|
6
6
|
export function getTextStyle(element) {
|
@@ -11,10 +11,13 @@ export function getTextStyle(element) {
|
|
11
11
|
}, fontStyleUtil.toMap(element.a('link_ind_left_font')), parseBackground(element.a('link_ind_background')));
|
12
12
|
}
|
13
13
|
export function setTextStyle(element, style, topo) {
|
14
|
-
var
|
15
|
-
|
16
|
-
|
17
|
-
|
14
|
+
var _fontStyleUtil$remove = fontStyleUtil.removeBoldItalic(style),
|
15
|
+
color = _fontStyleUtil$remove.color,
|
16
|
+
background = _fontStyleUtil$remove.background,
|
17
|
+
opacity = _fontStyleUtil$remove.opacity,
|
18
|
+
bold = _fontStyleUtil$remove.bold,
|
19
|
+
italic = _fontStyleUtil$remove.italic,
|
20
|
+
otherStyle = _objectWithoutPropertiesLoose(_fontStyleUtil$remove, _excluded);
|
18
21
|
|
19
22
|
var tagStyle = _extends({}, otherStyle);
|
20
23
|
|
@@ -22,15 +25,31 @@ export function setTextStyle(element, style, topo) {
|
|
22
25
|
tagStyle.color = color.hex;
|
23
26
|
}
|
24
27
|
|
28
|
+
if ('bold' in style) {
|
29
|
+
tagStyle.fontBold = bold;
|
30
|
+
}
|
31
|
+
|
32
|
+
if ('italic' in style) {
|
33
|
+
tagStyle.fontItalic = italic;
|
34
|
+
}
|
35
|
+
|
25
36
|
if ('background' in style || 'opacity' in style) {
|
26
37
|
// 背景颜色
|
27
38
|
var prevStyle = getTextStyle(element);
|
28
39
|
tagStyle.background = formatBackgroundRgbaColor(prevStyle, style);
|
29
40
|
}
|
30
41
|
|
31
|
-
|
42
|
+
if (Object.keys(tagStyle).length) {
|
43
|
+
topo.getHtTopo().setEdgeLabelStyle(element, tagStyle);
|
44
|
+
}
|
45
|
+
}
|
46
|
+
export function getFieldDisabled(element) {
|
47
|
+
return {
|
48
|
+
fontSize: true
|
49
|
+
};
|
32
50
|
}
|
33
51
|
export default {
|
34
52
|
getTextStyle: getTextStyle,
|
35
|
-
setTextStyle: setTextStyle
|
53
|
+
setTextStyle: setTextStyle,
|
54
|
+
getFieldDisabled: getFieldDisabled
|
36
55
|
};
|
@@ -9,10 +9,14 @@ export function getTextStyle(element) {
|
|
9
9
|
}
|
10
10
|
|
11
11
|
var underline = element.s('text.decoration') === 'underline';
|
12
|
+
var font = fontStyleUtil.toMap(element.s('group.title.font'));
|
12
13
|
return _extends({
|
13
14
|
color: parseColor(element.s('group.title.color')),
|
14
15
|
underline: underline
|
15
|
-
}, fontStyleUtil.toMap(element.s('group.title.font')),
|
16
|
+
}, fontStyleUtil.toMap(element.s('group.title.font')), {
|
17
|
+
fontSize: font.fontSize || 12,
|
18
|
+
fontFamily: font.fontFamily || '微软雅黑'
|
19
|
+
}, parseBackground(element.s('group.title.background')));
|
16
20
|
}
|
17
21
|
export function setTextStyle(element, style, topo) {
|
18
22
|
if (!element.isExpanded()) {
|
@@ -32,10 +36,20 @@ export function setTextStyle(element, style, topo) {
|
|
32
36
|
|
33
37
|
var fontStyle = _extends({}, getTextStyle(element), style);
|
34
38
|
|
35
|
-
var fontStr = fontStyleUtil.build(fontStyle);
|
39
|
+
var fontStr = fontStyleUtil.build(fontStyleUtil.removeBoldItalic(fontStyle));
|
36
40
|
element.s('group.title.font', fontStr);
|
37
41
|
}
|
42
|
+
export function getFieldDisabled(element) {
|
43
|
+
if (!element.isExpanded()) {
|
44
|
+
return {
|
45
|
+
fontSize: true
|
46
|
+
};
|
47
|
+
}
|
48
|
+
|
49
|
+
return {};
|
50
|
+
}
|
38
51
|
export default {
|
39
52
|
getTextStyle: getTextStyle,
|
40
|
-
setTextStyle: setTextStyle
|
53
|
+
setTextStyle: setTextStyle,
|
54
|
+
getFieldDisabled: getFieldDisabled
|
41
55
|
};
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
3
|
-
var _excluded = ["color", "background", "opacity"];
|
3
|
+
var _excluded = ["color", "background", "opacity", "bold", "italic"];
|
4
4
|
import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
|
5
5
|
import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
|
6
6
|
export function getTextStyle(element) {
|
@@ -11,10 +11,13 @@ export function getTextStyle(element) {
|
|
11
11
|
}, fontStyleUtil.toMap(element.a('ht.font')), parseBackground(element.a('ht.background')));
|
12
12
|
}
|
13
13
|
export function setTextStyle(element, style, topo) {
|
14
|
-
var
|
15
|
-
|
16
|
-
|
17
|
-
|
14
|
+
var _fontStyleUtil$remove = fontStyleUtil.removeBoldItalic(style),
|
15
|
+
color = _fontStyleUtil$remove.color,
|
16
|
+
background = _fontStyleUtil$remove.background,
|
17
|
+
opacity = _fontStyleUtil$remove.opacity,
|
18
|
+
bold = _fontStyleUtil$remove.bold,
|
19
|
+
italic = _fontStyleUtil$remove.italic,
|
20
|
+
otherStyle = _objectWithoutPropertiesLoose(_fontStyleUtil$remove, _excluded);
|
18
21
|
|
19
22
|
var tagStyle = _extends({}, otherStyle);
|
20
23
|
|
@@ -22,15 +25,31 @@ export function setTextStyle(element, style, topo) {
|
|
22
25
|
tagStyle.color = color.hex;
|
23
26
|
}
|
24
27
|
|
28
|
+
if ('bold' in style) {
|
29
|
+
tagStyle.fontBold = bold;
|
30
|
+
}
|
31
|
+
|
32
|
+
if ('italic' in style) {
|
33
|
+
tagStyle.fontItalic = italic;
|
34
|
+
}
|
35
|
+
|
25
36
|
if ('background' in style || 'opacity' in style) {
|
26
37
|
// 背景颜色
|
27
38
|
var prevStyle = getTextStyle(element);
|
28
39
|
tagStyle.background = formatBackgroundRgbaColor(prevStyle, style);
|
29
40
|
}
|
30
41
|
|
31
|
-
|
42
|
+
if (Object.keys(tagStyle).length) {
|
43
|
+
topo.getHtTopo().setNodeLabelStyle(element, tagStyle);
|
44
|
+
}
|
45
|
+
}
|
46
|
+
export function getFieldDisabled(element) {
|
47
|
+
return {
|
48
|
+
fontSize: true
|
49
|
+
};
|
32
50
|
}
|
33
51
|
export default {
|
34
52
|
getTextStyle: getTextStyle,
|
35
|
-
setTextStyle: setTextStyle
|
53
|
+
setTextStyle: setTextStyle,
|
54
|
+
getFieldDisabled: getFieldDisabled
|
36
55
|
};
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
1
2
|
import { isGroup, isLayer, isNode, isText, isEdge } from "../../../../../../../../utils/htElementUtils";
|
2
3
|
import typeMap from "./elements";
|
3
4
|
|
@@ -29,23 +30,30 @@ export function getElementTextStyle(element) {
|
|
29
30
|
|
30
31
|
return null;
|
31
32
|
}
|
32
|
-
export function
|
33
|
-
|
34
|
-
|
35
|
-
return getElementTextStyle(element);
|
36
|
-
} else if (htSelection.length) {
|
37
|
-
// 多选时值相同返回?
|
38
|
-
var values = htSelection.map(function (element) {
|
39
|
-
return getElementTextStyle(element);
|
40
|
-
}).filter(function (item) {
|
41
|
-
return !!item;
|
42
|
-
});
|
33
|
+
export function getElementTextStyleFieldDisabled(element) {
|
34
|
+
var type = getElementType(element);
|
35
|
+
var handler = typeMap[type];
|
43
36
|
|
44
|
-
|
45
|
-
|
37
|
+
if (handler) {
|
38
|
+
if (handler.getFieldDisabled) {
|
39
|
+
return handler.getFieldDisabled(element) || {};
|
46
40
|
}
|
47
41
|
|
48
|
-
|
42
|
+
return {};
|
43
|
+
}
|
44
|
+
|
45
|
+
return null;
|
46
|
+
}
|
47
|
+
export function getTextStyle(htSelection, styleNames) {
|
48
|
+
// 多选时值相同返回?
|
49
|
+
var values = htSelection.map(function (element) {
|
50
|
+
return getElementTextStyle(element);
|
51
|
+
}).filter(function (item) {
|
52
|
+
return !!item;
|
53
|
+
});
|
54
|
+
var value = {};
|
55
|
+
|
56
|
+
if (values.length) {
|
49
57
|
styleNames.forEach(function (styleName) {
|
50
58
|
var val = values[0][styleName];
|
51
59
|
var different = values.filter(function (obj) {
|
@@ -56,10 +64,30 @@ export function getTextStyle(htSelection, styleNames) {
|
|
56
64
|
value[styleName] = val;
|
57
65
|
}
|
58
66
|
});
|
59
|
-
|
60
|
-
}
|
67
|
+
} // 多选时元素都不支持字段时禁用
|
61
68
|
|
62
|
-
|
69
|
+
|
70
|
+
var fieldDisableds = htSelection.map(function (element) {
|
71
|
+
return getElementTextStyleFieldDisabled(element);
|
72
|
+
}).filter(function (item) {
|
73
|
+
return !!item;
|
74
|
+
});
|
75
|
+
var fieldDisabled = styleNames.reduce(function (result, fieldName) {
|
76
|
+
var _extends2;
|
77
|
+
|
78
|
+
var disabled = fieldDisableds.length && fieldDisableds.filter(function (item) {
|
79
|
+
return !!item[fieldName];
|
80
|
+
}).length === fieldDisableds.length;
|
81
|
+
return _extends({}, result, (_extends2 = {}, _extends2[fieldName] = disabled, _extends2));
|
82
|
+
}, {});
|
83
|
+
return {
|
84
|
+
style: value,
|
85
|
+
fieldDisabled: fieldDisabled,
|
86
|
+
debugData: {
|
87
|
+
values: values,
|
88
|
+
fieldDisableds: fieldDisableds
|
89
|
+
}
|
90
|
+
};
|
63
91
|
}
|
64
92
|
export function setTextStyle(element, style, topo) {
|
65
93
|
var type = getElementType(element);
|
@@ -3,6 +3,9 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutP
|
|
3
3
|
var _excluded = ["Component"];
|
4
4
|
import React, { useMemo } from 'react';
|
5
5
|
import { setGlobalTagStyle, useValues } from "./globalTag";
|
6
|
+
var fieldDisabled = {
|
7
|
+
fontSize: true
|
8
|
+
};
|
6
9
|
|
7
10
|
function GlobalTagStyleSetting(props) {
|
8
11
|
var topo = props.topo;
|
@@ -18,7 +21,8 @@ function GlobalTagStyleSetting(props) {
|
|
18
21
|
}, []);
|
19
22
|
return /*#__PURE__*/React.createElement(Component, _extends({
|
20
23
|
style: values,
|
21
|
-
setStyle: setStyle
|
24
|
+
setStyle: setStyle,
|
25
|
+
fieldDisabled: fieldDisabled
|
22
26
|
}, widgetProps));
|
23
27
|
}
|
24
28
|
|
@@ -1,3 +1,5 @@
|
|
1
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
2
|
+
var _excluded = ["bold", "italic"];
|
1
3
|
var fontStyleUtil = {
|
2
4
|
// 字体样式格式: bold italic 12px 黑体 或 12px 黑体
|
3
5
|
toMap: function toMap(font) {
|
@@ -39,6 +41,14 @@ var fontStyleUtil = {
|
|
39
41
|
}
|
40
42
|
});
|
41
43
|
return map;
|
44
|
+
},
|
45
|
+
// TODO 临时方法
|
46
|
+
removeBoldItalic: function removeBoldItalic(obj) {
|
47
|
+
var bold = obj.bold,
|
48
|
+
italic = obj.italic,
|
49
|
+
ohter = _objectWithoutPropertiesLoose(obj, _excluded);
|
50
|
+
|
51
|
+
return ohter;
|
42
52
|
}
|
43
53
|
};
|
44
54
|
export default fontStyleUtil;
|
@@ -22,7 +22,7 @@ import topoFactory from "./topoFactory";
|
|
22
22
|
import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
|
23
23
|
import SelectionModel from "./SelectionModel"; // eslint-disable-next-line no-undef
|
24
24
|
|
25
|
-
var version = typeof "6.0.0-alpha.
|
25
|
+
var version = typeof "6.0.0-alpha.58" === 'string' ? "6.0.0-alpha.58" : null;
|
26
26
|
console.info("\u62D3\u6251\u7248\u672C: " + version);
|
27
27
|
/**
|
28
28
|
* 拓扑显示和编辑
|
@@ -108,7 +108,7 @@ function FontColorDropdown(props) {
|
|
108
108
|
unit: "%",
|
109
109
|
list: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
|
110
110
|
onChange: backOpacityChange,
|
111
|
-
defaultValue: opacity * 100
|
111
|
+
defaultValue: opacity === undefined ? opacity : opacity * 100
|
112
112
|
})), /*#__PURE__*/_react["default"].createElement("div", {
|
113
113
|
style: {
|
114
114
|
marginTop: '10px',
|
@@ -19,6 +19,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
19
19
|
|
20
20
|
function FontSizeSelect(props) {
|
21
21
|
var value = props.value,
|
22
|
+
disabled = props.disabled,
|
22
23
|
_onChange = props.onChange;
|
23
24
|
var items = [9, 10, 11, 12, 14, 16, 18, 20, 24, 30, 36];
|
24
25
|
return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"], {
|
@@ -30,6 +31,7 @@ function FontSizeSelect(props) {
|
|
30
31
|
}
|
31
32
|
}, val || 12);
|
32
33
|
},
|
34
|
+
disabled: disabled,
|
33
35
|
onChange: function onChange(val) {
|
34
36
|
return _onChange(parseInt(val, 10));
|
35
37
|
}
|
@@ -44,12 +46,19 @@ function FontSizeWidget(props) {
|
|
44
46
|
var topo = props.topo,
|
45
47
|
showLabel = props.showLabel,
|
46
48
|
style = props.style,
|
49
|
+
fieldDisabled = props.fieldDisabled,
|
47
50
|
setStyle = props.setStyle;
|
51
|
+
var disabled = fieldDisabled.fontSize; // 选中的元素
|
52
|
+
|
53
|
+
var selection = topo.selectionModel.useHtSelection();
|
54
|
+
(0, _react.useEffect)(function () {}, [selection]);
|
48
55
|
return /*#__PURE__*/_react["default"].createElement(_WidgetBox["default"], {
|
49
56
|
label: "\u5B57\u53F7",
|
50
|
-
showLabel: showLabel
|
57
|
+
showLabel: showLabel,
|
58
|
+
disabled: disabled
|
51
59
|
}, /*#__PURE__*/_react["default"].createElement(FontSizeSelect, {
|
52
60
|
value: style.fontSize,
|
61
|
+
disabled: disabled,
|
53
62
|
onChange: function onChange(val) {
|
54
63
|
topo.historyManager.beginTransaction();
|
55
64
|
setStyle({
|
@@ -76,15 +76,10 @@ function FontStyleButton(props) {
|
|
76
76
|
|
77
77
|
var selection = topo.selectionModel.useHtSelection();
|
78
78
|
(0, _react.useEffect)(function () {
|
79
|
-
var
|
80
|
-
return
|
79
|
+
var containText = selection.filter(function (ele) {
|
80
|
+
return (0, _htElementUtils.isText)(ele);
|
81
81
|
}).length;
|
82
|
-
|
83
|
-
if (selection.length && isAllText) {
|
84
|
-
setDisabled(false);
|
85
|
-
} else {
|
86
|
-
setDisabled(true);
|
87
|
-
}
|
82
|
+
setDisabled(!containText);
|
88
83
|
}, [selection]);
|
89
84
|
(0, _react.useEffect)(function () {
|
90
85
|
setValue(buildValue({
|
@@ -23,11 +23,20 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
23
23
|
|
24
24
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
25
25
|
|
26
|
+
function isElementSetImageEnabled(element) {
|
27
|
+
if ((0, _htElementUtils.isGroup)(element)) {
|
28
|
+
return !element.isExpanded();
|
29
|
+
}
|
30
|
+
|
31
|
+
return (0, _htElementUtils.isNode)(element) && !(0, _htElementUtils.isText)(element) && element.a('type') !== 'box';
|
32
|
+
}
|
26
33
|
/**
|
27
34
|
* 替换图片设置
|
28
35
|
* @param {*} props
|
29
36
|
* @returns
|
30
37
|
*/
|
38
|
+
|
39
|
+
|
31
40
|
function NodeImageButton(props) {
|
32
41
|
var topo = props.topo,
|
33
42
|
showLabel = props.showLabel,
|
@@ -44,9 +53,7 @@ function NodeImageButton(props) {
|
|
44
53
|
|
45
54
|
var selection = topo.selectionModel.useHtSelection();
|
46
55
|
(0, _react.useEffect)(function () {
|
47
|
-
var nodes = selection.filter(
|
48
|
-
return (0, _htElementUtils.isGroup)(ele) || (0, _htElementUtils.isNode)(ele);
|
49
|
-
});
|
56
|
+
var nodes = selection.filter(isElementSetImageEnabled);
|
50
57
|
|
51
58
|
if (nodes.length > 0) {
|
52
59
|
setDisabled(false);
|
@@ -61,10 +68,12 @@ function NodeImageButton(props) {
|
|
61
68
|
// const gv = topo.view.topoClient.getGraphView();
|
62
69
|
//const element = topo.getSelectionModel().getFirstData();
|
63
70
|
|
64
|
-
var elements =
|
71
|
+
var elements = selection;
|
65
72
|
console.log("onChange-elements", elements);
|
66
|
-
elements.
|
67
|
-
element
|
73
|
+
elements.forEach(function (element) {
|
74
|
+
if (isElementSetImageEnabled(element)) {
|
75
|
+
element.setImage(prop);
|
76
|
+
}
|
68
77
|
}); // selection.map((element) => {
|
69
78
|
// element.setImage(prop);
|
70
79
|
// });
|
@@ -31,7 +31,7 @@ function ButtonBox(props) {
|
|
31
31
|
onClick = props.onClick,
|
32
32
|
otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
|
33
33
|
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
|
34
|
-
className: (0, _classnames["default"])(_ButtonBoxModule["default"].ButtonBox, (_classNames = {}, _classNames[_ButtonBoxModule["default"].ButtonBoxActive] = active, _classNames[_ButtonBoxModule["default"].ButtonBoxDisabled] = disabled, _classNames)),
|
34
|
+
className: (0, _classnames["default"])(_ButtonBoxModule["default"].ButtonBox, (_classNames = {}, _classNames[_ButtonBoxModule["default"].ButtonBoxActive] = active, _classNames[_ButtonBoxModule["default"].ButtonBoxDisabled] = disabled, _classNames[_ButtonBoxModule["default"].disabled] = disabled, _classNames)),
|
35
35
|
onClick: disabled ? undefined : onClick
|
36
36
|
}, otherProps), children, showArrow && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "\xA0", /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
37
37
|
type: "tree_fold_arrow",
|
@@ -37,12 +37,15 @@ function ElementTextStyleSetting(props) {
|
|
37
37
|
|
38
38
|
return topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
|
39
39
|
}, [selection, topo]);
|
40
|
-
var
|
40
|
+
var fieldProps = (0, _react.useMemo)(function () {
|
41
41
|
if (!graphLoaded) {
|
42
|
-
return {
|
42
|
+
return {
|
43
|
+
value: {},
|
44
|
+
fieldDisabled: {}
|
45
|
+
};
|
43
46
|
}
|
44
47
|
|
45
|
-
return (0, _textStyleUtil.getTextStyle)(htSelection, styleNames, topo)
|
48
|
+
return (0, _textStyleUtil.getTextStyle)(htSelection, styleNames, topo);
|
46
49
|
}, [graphLoaded, htSelection, topo]);
|
47
50
|
var setStyle = (0, _react.useMemo)(function () {
|
48
51
|
return function (style) {
|
@@ -53,8 +56,8 @@ function ElementTextStyleSetting(props) {
|
|
53
56
|
}, [htSelection]);
|
54
57
|
return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
|
55
58
|
disabled: false,
|
56
|
-
htSelection: htSelection
|
57
|
-
|
59
|
+
htSelection: htSelection
|
60
|
+
}, fieldProps, {
|
58
61
|
setStyle: setStyle
|
59
62
|
}, widgetProps));
|
60
63
|
}
|