@riil-frontend/component-topology 6.0.0-alpha.6 → 6.0.0-alpha.7
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/1.js +2 -2
- package/build/2.js +1 -1
- package/build/index.css +1 -1
- package/build/index.js +21 -21
- package/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js +60 -2
- package/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.module.scss +74 -0
- package/es/core/models/TopoApp.js +1 -1
- package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js +67 -2
- package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.module.scss +74 -0
- package/lib/core/models/TopoApp.js +1 -1
- package/package.json +2 -2
|
@@ -1,4 +1,62 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _Tag from "@alifd/next/es/tag";
|
|
2
|
+
import React, { useState } from 'react';
|
|
3
|
+
import styles from "./CanvasPanel.module.scss";
|
|
4
|
+
var CANVAS_TOGGLE = [{
|
|
5
|
+
value: 0,
|
|
6
|
+
label: '白色',
|
|
7
|
+
color: '#FFFFFF',
|
|
8
|
+
isSystem: 1
|
|
9
|
+
}, {
|
|
10
|
+
value: 1,
|
|
11
|
+
label: '蓝色',
|
|
12
|
+
color: '#F9FBFF',
|
|
13
|
+
isSystem: 0
|
|
14
|
+
}, {
|
|
15
|
+
value: 2,
|
|
16
|
+
label: '黄色',
|
|
17
|
+
color: '#FFFDE6',
|
|
18
|
+
isSystem: 0
|
|
19
|
+
}, {
|
|
20
|
+
value: 3,
|
|
21
|
+
label: '绿色',
|
|
22
|
+
color: '#EAFFE8',
|
|
23
|
+
isSystem: 0
|
|
24
|
+
}, {
|
|
25
|
+
value: 4,
|
|
26
|
+
label: '深色',
|
|
27
|
+
color: '#031425',
|
|
28
|
+
isSystem: 0
|
|
29
|
+
}];
|
|
2
30
|
export default function CanvasPanel(props) {
|
|
3
|
-
|
|
31
|
+
var selected = props.selected,
|
|
32
|
+
onSelect = props.onSelect;
|
|
33
|
+
|
|
34
|
+
var _useState = useState(0),
|
|
35
|
+
selectVal = _useState[0],
|
|
36
|
+
setSelectVal = _useState[1];
|
|
37
|
+
|
|
38
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
39
|
+
className: styles.canvasToggle
|
|
40
|
+
}, CANVAS_TOGGLE.map(function (item, index) {
|
|
41
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
42
|
+
className: styles.canvas
|
|
43
|
+
}, /*#__PURE__*/React.createElement(_Tag.Selectable, {
|
|
44
|
+
className: styles.tag,
|
|
45
|
+
style: {
|
|
46
|
+
background: item.color
|
|
47
|
+
},
|
|
48
|
+
key: item.value,
|
|
49
|
+
checked: selected ? selected === item.value : selectVal === item.value,
|
|
50
|
+
onChange: function onChange(checked) {
|
|
51
|
+
setSelectVal(item.value);
|
|
52
|
+
onSelect && onSelect(item);
|
|
53
|
+
}
|
|
54
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
55
|
+
className: styles.box
|
|
56
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
57
|
+
className: styles.bgColor
|
|
58
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
59
|
+
className: styles.canvasText
|
|
60
|
+
}, item.label));
|
|
61
|
+
}));
|
|
4
62
|
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
@import "~@alifd/next/variables.scss";
|
|
2
|
+
|
|
3
|
+
.canvasToggle {
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-wrap: wrap;
|
|
6
|
+
.canvas {
|
|
7
|
+
.tag {
|
|
8
|
+
border: 1px solid #E4E9EE;
|
|
9
|
+
width: 110px;
|
|
10
|
+
height: 62px;
|
|
11
|
+
border-radius: 2px;
|
|
12
|
+
margin: 16px 0 0 16px;
|
|
13
|
+
:global {
|
|
14
|
+
.#{$css-prefix}tag-body {
|
|
15
|
+
width: 100%;
|
|
16
|
+
padding: 0;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
.box {
|
|
21
|
+
position: relative;
|
|
22
|
+
height: 100%;
|
|
23
|
+
user-select: none;
|
|
24
|
+
.bgColor {
|
|
25
|
+
max-width: 100%;
|
|
26
|
+
max-height: 100%;
|
|
27
|
+
display: block;
|
|
28
|
+
margin: auto;
|
|
29
|
+
position: absolute;
|
|
30
|
+
left: 0;
|
|
31
|
+
top: 0;
|
|
32
|
+
bottom: 0;
|
|
33
|
+
right: 0;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
&::before,
|
|
37
|
+
&::after {
|
|
38
|
+
z-index: 1;
|
|
39
|
+
}
|
|
40
|
+
&:hover {
|
|
41
|
+
.operation {
|
|
42
|
+
display: block;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
.operation {
|
|
46
|
+
display: none;
|
|
47
|
+
// z-index: -1;
|
|
48
|
+
position: absolute;
|
|
49
|
+
right: 0;
|
|
50
|
+
bottom: 0;
|
|
51
|
+
left: 0;
|
|
52
|
+
height: 22px;
|
|
53
|
+
text-align: center;
|
|
54
|
+
background: rgba(0, 0, 0, 0.4);
|
|
55
|
+
button {
|
|
56
|
+
height: 100%;
|
|
57
|
+
color: #fff;
|
|
58
|
+
vertical-align: text-bottom;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
.canvasText{
|
|
63
|
+
width: 49px;
|
|
64
|
+
height: 12px;
|
|
65
|
+
margin: 8px 0 0 46px;
|
|
66
|
+
text-align: center;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
.canvas:nth-child(2n){
|
|
70
|
+
margin-left: -7px;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
|
|
@@ -22,7 +22,7 @@ import topoFactory from "./topoFactory";
|
|
|
22
22
|
import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
|
|
23
23
|
import SelectionManager from "./SelectionManager"; // eslint-disable-next-line no-undef
|
|
24
24
|
|
|
25
|
-
var version = typeof "6.0.0-alpha.
|
|
25
|
+
var version = typeof "6.0.0-alpha.7" === 'string' ? "6.0.0-alpha.7" : null;
|
|
26
26
|
console.info("\u62D3\u6251\u7248\u672C: " + version);
|
|
27
27
|
/**
|
|
28
28
|
* 拓扑显示和编辑
|
|
@@ -5,8 +5,73 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
exports.__esModule = true;
|
|
6
6
|
exports["default"] = CanvasPanel;
|
|
7
7
|
|
|
8
|
-
var
|
|
8
|
+
var _tag = _interopRequireDefault(require("@alifd/next/lib/tag"));
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
12
|
+
var _CanvasPanelModule = _interopRequireDefault(require("./CanvasPanel.module.scss"));
|
|
13
|
+
|
|
14
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
+
|
|
16
|
+
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; }
|
|
17
|
+
|
|
18
|
+
var CANVAS_TOGGLE = [{
|
|
19
|
+
value: 0,
|
|
20
|
+
label: '白色',
|
|
21
|
+
color: '#FFFFFF',
|
|
22
|
+
isSystem: 1
|
|
23
|
+
}, {
|
|
24
|
+
value: 1,
|
|
25
|
+
label: '蓝色',
|
|
26
|
+
color: '#F9FBFF',
|
|
27
|
+
isSystem: 0
|
|
28
|
+
}, {
|
|
29
|
+
value: 2,
|
|
30
|
+
label: '黄色',
|
|
31
|
+
color: '#FFFDE6',
|
|
32
|
+
isSystem: 0
|
|
33
|
+
}, {
|
|
34
|
+
value: 3,
|
|
35
|
+
label: '绿色',
|
|
36
|
+
color: '#EAFFE8',
|
|
37
|
+
isSystem: 0
|
|
38
|
+
}, {
|
|
39
|
+
value: 4,
|
|
40
|
+
label: '深色',
|
|
41
|
+
color: '#031425',
|
|
42
|
+
isSystem: 0
|
|
43
|
+
}];
|
|
9
44
|
|
|
10
45
|
function CanvasPanel(props) {
|
|
11
|
-
|
|
46
|
+
var selected = props.selected,
|
|
47
|
+
onSelect = props.onSelect;
|
|
48
|
+
|
|
49
|
+
var _useState = (0, _react.useState)(0),
|
|
50
|
+
selectVal = _useState[0],
|
|
51
|
+
setSelectVal = _useState[1];
|
|
52
|
+
|
|
53
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
54
|
+
className: _CanvasPanelModule["default"].canvasToggle
|
|
55
|
+
}, CANVAS_TOGGLE.map(function (item, index) {
|
|
56
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
57
|
+
className: _CanvasPanelModule["default"].canvas
|
|
58
|
+
}, /*#__PURE__*/_react["default"].createElement(_tag["default"].Selectable, {
|
|
59
|
+
className: _CanvasPanelModule["default"].tag,
|
|
60
|
+
style: {
|
|
61
|
+
background: item.color
|
|
62
|
+
},
|
|
63
|
+
key: item.value,
|
|
64
|
+
checked: selected ? selected === item.value : selectVal === item.value,
|
|
65
|
+
onChange: function onChange(checked) {
|
|
66
|
+
setSelectVal(item.value);
|
|
67
|
+
onSelect && onSelect(item);
|
|
68
|
+
}
|
|
69
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
70
|
+
className: _CanvasPanelModule["default"].box
|
|
71
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
72
|
+
className: _CanvasPanelModule["default"].bgColor
|
|
73
|
+
}))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
74
|
+
className: _CanvasPanelModule["default"].canvasText
|
|
75
|
+
}, item.label));
|
|
76
|
+
}));
|
|
12
77
|
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
@import "~@alifd/next/variables.scss";
|
|
2
|
+
|
|
3
|
+
.canvasToggle {
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-wrap: wrap;
|
|
6
|
+
.canvas {
|
|
7
|
+
.tag {
|
|
8
|
+
border: 1px solid #E4E9EE;
|
|
9
|
+
width: 110px;
|
|
10
|
+
height: 62px;
|
|
11
|
+
border-radius: 2px;
|
|
12
|
+
margin: 16px 0 0 16px;
|
|
13
|
+
:global {
|
|
14
|
+
.#{$css-prefix}tag-body {
|
|
15
|
+
width: 100%;
|
|
16
|
+
padding: 0;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
.box {
|
|
21
|
+
position: relative;
|
|
22
|
+
height: 100%;
|
|
23
|
+
user-select: none;
|
|
24
|
+
.bgColor {
|
|
25
|
+
max-width: 100%;
|
|
26
|
+
max-height: 100%;
|
|
27
|
+
display: block;
|
|
28
|
+
margin: auto;
|
|
29
|
+
position: absolute;
|
|
30
|
+
left: 0;
|
|
31
|
+
top: 0;
|
|
32
|
+
bottom: 0;
|
|
33
|
+
right: 0;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
&::before,
|
|
37
|
+
&::after {
|
|
38
|
+
z-index: 1;
|
|
39
|
+
}
|
|
40
|
+
&:hover {
|
|
41
|
+
.operation {
|
|
42
|
+
display: block;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
.operation {
|
|
46
|
+
display: none;
|
|
47
|
+
// z-index: -1;
|
|
48
|
+
position: absolute;
|
|
49
|
+
right: 0;
|
|
50
|
+
bottom: 0;
|
|
51
|
+
left: 0;
|
|
52
|
+
height: 22px;
|
|
53
|
+
text-align: center;
|
|
54
|
+
background: rgba(0, 0, 0, 0.4);
|
|
55
|
+
button {
|
|
56
|
+
height: 100%;
|
|
57
|
+
color: #fff;
|
|
58
|
+
vertical-align: text-bottom;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
.canvasText{
|
|
63
|
+
width: 49px;
|
|
64
|
+
height: 12px;
|
|
65
|
+
margin: 8px 0 0 46px;
|
|
66
|
+
text-align: center;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
.canvas:nth-child(2n){
|
|
70
|
+
margin-left: -7px;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
|
|
@@ -52,7 +52,7 @@ var _ElementTagTipConfig = _interopRequireDefault(require("./tagstips/ElementTag
|
|
|
52
52
|
var _SelectionManager = _interopRequireDefault(require("./SelectionManager"));
|
|
53
53
|
|
|
54
54
|
// eslint-disable-next-line no-undef
|
|
55
|
-
var version = typeof "6.0.0-alpha.
|
|
55
|
+
var version = typeof "6.0.0-alpha.7" === 'string' ? "6.0.0-alpha.7" : null;
|
|
56
56
|
console.info("\u62D3\u6251\u7248\u672C: " + version);
|
|
57
57
|
/**
|
|
58
58
|
* 拓扑显示和编辑
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@riil-frontend/component-topology",
|
|
3
|
-
"version": "6.0.0-alpha.
|
|
3
|
+
"version": "6.0.0-alpha.7",
|
|
4
4
|
"description": "拓扑",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"start": "build-scripts start",
|
|
@@ -115,6 +115,6 @@
|
|
|
115
115
|
"access": "public"
|
|
116
116
|
},
|
|
117
117
|
"license": "MIT",
|
|
118
|
-
"homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.
|
|
118
|
+
"homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.7/build/index.html",
|
|
119
119
|
"gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
|
|
120
120
|
}
|