Skip to content

Commit 4be7639

Browse files
Jason-chen-coderJason-chen-coder
committed
新增组元素和新增快捷键功能
1 parent 5748293 commit 4be7639

12 files changed

Lines changed: 2762 additions & 424 deletions

File tree

‎package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"lodash": "^4.17.19",
1616
"mxgraph": "^4.2.0",
1717
"mxgraph-js": "^1.0.1",
18+
"ramda": "^0.27.1",
1819
"vue": "^2.6.11",
1920
"vue-codemirror": "^4.0.6",
2021
"vue-router": "^3.3.4"

‎public/icon/dot.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/icon/rotate.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/stencil/card-shape.js‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎public/stencil/image-shape.js‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎src/assets/icon/delete copy.png‎

4.22 KB
Loading

‎src/graph/index.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import mx from 'mxgraph'
2-
const mxgraph = mx({
3-
// mxBasePath: './'
4-
})
2+
const mxgraph = mx({})
53
// decode bug https://github.com/jgraph/mxgraph/issues/49
64
window.mxGraph = mxgraph.mxGraph
75
window.mxGraphModel = mxgraph.mxGraphModel

‎src/graph/mxClient.min.js‎

Lines changed: 1871 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/views/customToolbar/GroupToolbarItems.js‎

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
// const closeIcon = 'data:image/png;base64,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';
2+
import mxgraph from '../../graph/index';
3+
4+
const { mxConstants } = mxgraph;
5+
export const grouptoolItems = [
6+
{
7+
title: '分组1',
8+
id: 'group-1',
9+
width: 400,
10+
height: 800,
11+
dropAble: true,
12+
style: {
13+
overflow: 'fill',
14+
shape: 'swimlane',
15+
html: '1',
16+
swimlaneFillColor: '#FFFF',
17+
fillColor: '#409eff',
18+
strokeColor: '#629EA0',
19+
fontColor: '#000000',
20+
verticalAlign: mxConstants.ALIGN_TOP,
21+
align: mxConstants.ALIGN_CENTER,
22+
},
23+
created (graph, cell, index) {
24+
const deleteIconDom = document.querySelector(`.deleteIcon_${index}`);
25+
if (deleteIconDom) {
26+
deleteIconDom.addEventListener('click', () => {
27+
graph.removeCells([cell]);
28+
});
29+
}
30+
},
31+
html: (index) => `
32+
<div style="margin: 0; height: 100%; width: 100%;display: flex; align-items: center; position: relative;">
33+
<span style="color: cornsilk; font-size: 20px; font-weight: 600; display: inline-block;position: absolute;left: 50%;transform: translateX(-50%)">分组1</span>
34+
<i style="height: 20px; width: 20px;font-size: 20px;color: #ffffff; cursor: pointer;position: absolute;right: 10px" class="deleteIcon_${index} el-icon-delete-solid"></i>
35+
</div>
36+
`.replace(/[\r\n]/g, ''),
37+
},
38+
{
39+
title: '分组2',
40+
id: 'group-2',
41+
width: 400,
42+
height: 800,
43+
dropAble: true,
44+
style: {
45+
overflow: 'fill',
46+
shape: 'swimlane',
47+
html: '1',
48+
swimlaneFillColor: '#FFFF',
49+
fillColor: '#409eff',
50+
strokeColor: '#629EA0',
51+
fontColor: '#000000',
52+
verticalAlign: mxConstants.ALIGN_TOP,
53+
align: mxConstants.ALIGN_CENTER,
54+
},
55+
created (graph, cell, index) {
56+
const deleteIconDom = document.querySelector(`.deleteIcon_${index}`);
57+
if (deleteIconDom) {
58+
deleteIconDom.addEventListener('click', () => {
59+
graph.removeCells([cell]);
60+
});
61+
}
62+
},
63+
html: (index) => `
64+
<div style="margin: 0; height: 100%; width: 100%;display: flex; align-items: center; position: relative;">
65+
<span style="color: cornsilk; font-size: 20px; font-weight: 600; display: inline-block;position: absolute;left: 50%;transform: translateX(-50%)">分组2</span>
66+
<i style="height: 20px; width: 20px;font-size: 20px;color: #ffffff; cursor: pointer;position: absolute;right: 10px" class="deleteIcon_${index} el-icon-delete-solid"></i>
67+
</div>
68+
`.replace(/[\r\n]/g, ''),
69+
},
70+
{
71+
title: '分组3',
72+
id: 'group-3',
73+
width: 400,
74+
height: 800,
75+
dropAble: true,
76+
style: {
77+
overflow: 'fill',
78+
shape: 'swimlane',
79+
html: '1',
80+
swimlaneFillColor: '#FFFF',
81+
fillColor: '#409eff',
82+
strokeColor: '#629EA0',
83+
fontColor: '#000000',
84+
verticalAlign: mxConstants.ALIGN_TOP,
85+
align: mxConstants.ALIGN_CENTER,
86+
},
87+
created (graph, cell, index) {
88+
const deleteIconDom = document.querySelector(`.deleteIcon_${index}`);
89+
if (deleteIconDom) {
90+
deleteIconDom.addEventListener('click', () => {
91+
graph.removeCells([cell]);
92+
});
93+
}
94+
},
95+
html: (index) => `
96+
<div style="margin: 0; height: 100%; width: 100%;display: flex; align-items: center; position: relative;">
97+
<span style="color: cornsilk; font-size: 20px; font-weight: 600; display: inline-block;position: absolute;left: 50%;transform: translateX(-50%)">分组3</span>
98+
<i style="height: 20px; width: 20px;font-size: 20px;color: #ffffff; cursor: pointer;position: absolute;right: 10px" class="deleteIcon_${index} el-icon-delete-solid"></i>
99+
</div>
100+
`.replace(/[\r\n]/g, ''),
101+
},
102+
{
103+
title: '分组4',
104+
id: 'group-4',
105+
width: 400,
106+
height: 800,
107+
dropAble: true,
108+
style: {
109+
overflow: 'fill',
110+
shape: 'swimlane',
111+
html: '1',
112+
swimlaneFillColor: '#FFFF',
113+
fillColor: '#409eff',
114+
strokeColor: '#629EA0',
115+
fontColor: '#000000',
116+
verticalAlign: mxConstants.ALIGN_TOP,
117+
align: mxConstants.ALIGN_CENTER,
118+
},
119+
created (graph, cell, index) {
120+
const deleteIconDom = document.querySelector(`.deleteIcon_${index}`);
121+
if (deleteIconDom) {
122+
deleteIconDom.addEventListener('click', () => {
123+
graph.removeCells([cell]);
124+
});
125+
}
126+
},
127+
html: (index) => `
128+
<div style="margin: 0; height: 100%; width: 100%;display: flex; align-items: center; position: relative;">
129+
<span style="color: cornsilk; font-size: 20px; font-weight: 600; display: inline-block;position: absolute;left: 50%;transform: translateX(-50%)">分组4</span>
130+
<i style="height: 20px; width: 20px;font-size: 20px;color: #ffffff; cursor: pointer;position: absolute;right: 10px" class="deleteIcon_${index} el-icon-delete-solid"></i>
131+
</div>
132+
`.replace(/[\r\n]/g, ''),
133+
},
134+
{
135+
title: '分组5',
136+
id: 'group-5',
137+
width: 400,
138+
height: 800,
139+
dropAble: true,
140+
style: {
141+
overflow: 'fill',
142+
shape: 'swimlane',
143+
html: '1',
144+
swimlaneFillColor: '#FFFF',
145+
fillColor: '#409eff',
146+
strokeColor: '#629EA0',
147+
fontColor: '#000000',
148+
verticalAlign: mxConstants.ALIGN_TOP,
149+
align: mxConstants.ALIGN_CENTER,
150+
},
151+
created (graph, cell, index) {
152+
const deleteIconDom = document.querySelector(`.deleteIcon_${index}`);
153+
if (deleteIconDom) {
154+
deleteIconDom.addEventListener('click', () => {
155+
graph.removeCells([cell]);
156+
});
157+
}
158+
},
159+
html: (index) => `
160+
<div style="margin: 0; height: 100%; width: 100%;display: flex; align-items: center; position: relative;">
161+
<span style="color: cornsilk; font-size: 20px; font-weight: 600; display: inline-block;position: absolute;left: 50%;transform: translateX(-50%)">分组5</span>
162+
<i style="height: 20px; width: 20px;font-size: 20px;color: #ffffff; cursor: pointer;position: absolute;right: 10px" class="deleteIcon_${index} el-icon-delete-solid"></i>
163+
</div>
164+
`.replace(/[\r\n]/g, ''),
165+
},
166+
{
167+
title: '分组6',
168+
id: 'group-6',
169+
width: 400,
170+
height: 800,
171+
dropAble: true,
172+
style: {
173+
overflow: 'fill',
174+
shape: 'swimlane',
175+
html: '1',
176+
swimlaneFillColor: '#FFFF',
177+
fillColor: '#409eff',
178+
strokeColor: '#629EA0',
179+
fontColor: '#000000',
180+
verticalAlign: mxConstants.ALIGN_TOP,
181+
align: mxConstants.ALIGN_CENTER,
182+
},
183+
created (graph, cell, index) {
184+
const deleteIconDom = document.querySelector(`.deleteIcon_${index}`);
185+
if (deleteIconDom) {
186+
deleteIconDom.addEventListener('click', () => {
187+
graph.removeCells([cell]);
188+
});
189+
}
190+
},
191+
html: (index) => `
192+
<div style="margin: 0; height: 100%; width: 100%;display: flex; align-items: center; position: relative;">
193+
<span style="color: cornsilk; font-size: 20px; font-weight: 600; display: inline-block;position: absolute;left: 50%;transform: translateX(-50%)">分组6</span>
194+
<i style="height: 20px; width: 20px;font-size: 20px;color: #ffffff; cursor: pointer;position: absolute;right: 10px" class="deleteIcon_${index} el-icon-delete-solid"></i>
195+
</div>
196+
`.replace(/[\r\n]/g, ''),
197+
},
198+
{
199+
title: '分组7',
200+
id: 'group-7',
201+
width: 400,
202+
height: 800,
203+
dropAble: true,
204+
style: {
205+
overflow: 'fill',
206+
shape: 'swimlane',
207+
html: '1',
208+
swimlaneFillColor: '#FFFF',
209+
fillColor: '#409eff',
210+
strokeColor: '#629EA0',
211+
fontColor: '#000000',
212+
verticalAlign: mxConstants.ALIGN_TOP,
213+
align: mxConstants.ALIGN_CENTER,
214+
},
215+
created (graph, cell, index) {
216+
const deleteIconDom = document.querySelector(`.deleteIcon_${index}`);
217+
if (deleteIconDom) {
218+
deleteIconDom.addEventListener('click', () => {
219+
graph.removeCells([cell]);
220+
});
221+
}
222+
},
223+
html: (index) => `
224+
<div style="margin: 0; height: 100%; width: 100%;display: flex; align-items: center; position: relative;">
225+
<span style="color: cornsilk; font-size: 20px; font-weight: 600; display: inline-block;position: absolute;left: 50%;transform: translateX(-50%)">分组7</span>
226+
<i style="height: 20px; width: 20px;font-size: 20px;color: #ffffff; cursor: pointer;position: absolute;right: 10px" class="deleteIcon_${index} el-icon-delete-solid"></i>
227+
</div>
228+
`.replace(/[\r\n]/g, ''),
229+
},
230+
{
231+
title: '子元素-1', // 显示名称
232+
id: 'member-1',
233+
width: 130, // 默认宽度
234+
height: 50, // 默认高度
235+
dropAble: false, // 是否可以作为drop的对象
236+
style: { // 样式
237+
html: '1',
238+
fillColor: '#409eff',
239+
strokeColor: '#53859F',
240+
fontColor: '#000000',
241+
},
242+
html: () => `
243+
<div style="margin: 0; padding: 0 5px; height: 100%; display: flex; justify-content: space-between; align-items: center;">
244+
<span style="font-size: 1.2rem; color: cornsilk; font-weight: 600;">子元素</span>
245+
</div>
246+
`.replace(/[\r\n]/g, ''),
247+
},
248+
];

0 commit comments

Comments
 (0)