Skip to content

Commit 1c52d38

Browse files
LittlefeanLittlefean
committed
✨ 连线上可以设置颜色了
1 parent 32d68e1 commit 1c52d38

File tree

12 files changed

+154
-76
lines changed

12 files changed

+154
-76
lines changed

‎src/core/render/canvas2d/entityRenderer/edge/EdgeRenderer.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@ export namespace EdgeRenderer {
133133
text: edge.text,
134134
uuid: edge.uuid,
135135
type: "core:line_edge",
136+
color: [0, 0, 0, 0],
136137
});
137138
}
138139
if (edge.target.isHiddenBySectionCollapse) {
@@ -142,6 +143,7 @@ export namespace EdgeRenderer {
142143
text: edge.text,
143144
uuid: edge.uuid,
144145
type: "core:line_edge",
146+
color: [0, 0, 0, 0],
145147
});
146148
}
147149
return edge;
@@ -183,7 +185,7 @@ export namespace EdgeRenderer {
183185
* @param direction
184186
* @param size
185187
*/
186-
export function renderArrowHead(endPoint: Vector, direction: Vector, size: number) {
188+
export function renderArrowHead(endPoint: Vector, direction: Vector, size: number, color: Color) {
187189
const reDirection = direction.clone().multiply(-1);
188190
const location2 = endPoint.add(reDirection.multiply(size).rotateDegrees(15));
189191
const location3 = endPoint.add(reDirection.multiply(size * 0.5));
@@ -195,8 +197,8 @@ export namespace EdgeRenderer {
195197
Renderer.transformWorld2View(location3),
196198
Renderer.transformWorld2View(location4),
197199
],
198-
StageStyleManager.currentStyle.StageObjectBorderColor,
199-
StageStyleManager.currentStyle.StageObjectBorderColor,
200+
color,
201+
color,
200202
0,
201203
);
202204
}
@@ -208,7 +210,12 @@ export namespace EdgeRenderer {
208210
* @param size
209211
* @returns SVG多边形字符串
210212
*/
211-
export function generateArrowHeadSvg(endPoint: Vector, direction: Vector, size: number): React.ReactNode {
213+
export function generateArrowHeadSvg(
214+
endPoint: Vector,
215+
direction: Vector,
216+
size: number,
217+
edgeColor: Color,
218+
): React.ReactNode {
212219
const reDirection = direction.clone().multiply(-1);
213220
const location2 = endPoint.add(reDirection.multiply(size).rotateDegrees(15));
214221
const location3 = endPoint.add(reDirection.multiply(size * 0.5));
@@ -220,12 +227,6 @@ export namespace EdgeRenderer {
220227
.join(" ");
221228

222229
// 返回SVG多边形字符串
223-
return (
224-
<polygon
225-
points={pointsString}
226-
fill={StageStyleManager.currentStyle.StageObjectBorderColor.toString()}
227-
stroke={StageStyleManager.currentStyle.StageObjectBorderColor.toString()}
228-
/>
229-
);
230+
return <polygon points={pointsString} fill={edgeColor.toString()} stroke={edgeColor.toString()} />;
230231
}
231232
}

‎src/core/render/canvas2d/entityRenderer/edge/concrete/StraightEdgeRenderer.tsx‎

Lines changed: 32 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -66,12 +66,15 @@ export class StraightEdgeRenderer extends EdgeRendererClass {
6666

6767
public renderNormalState(edge: LineEdge): void {
6868
// 直线绘制
69+
const edgeColor = edge.color.equals(Color.Transparent)
70+
? StageStyleManager.currentStyle.StageObjectBorderColor
71+
: edge.color;
6972
if (edge.text.trim() === "") {
7073
// 没有文字的边
7174
CurveRenderer.renderSolidLine(
7275
Renderer.transformWorld2View(edge.bodyLine.start),
7376
Renderer.transformWorld2View(edge.bodyLine.end),
74-
StageStyleManager.currentStyle.StageObjectBorderColor,
77+
edgeColor,
7578
2 * Camera.currentScale,
7679
);
7780
} else {
@@ -83,20 +86,20 @@ export class StraightEdgeRenderer extends EdgeRendererClass {
8386
edge.text,
8487
Renderer.transformWorld2View(midPoint),
8588
Renderer.FONT_SIZE * Camera.currentScale,
86-
StageStyleManager.currentStyle.StageObjectBorderColor,
89+
edgeColor,
8790
);
8891
const edgeTextRectangle = edge.textRectangle;
8992

9093
CurveRenderer.renderSolidLine(
9194
Renderer.transformWorld2View(edge.bodyLine.start),
9295
Renderer.transformWorld2View(edgeTextRectangle.getLineIntersectionPoint(startHalf)),
93-
StageStyleManager.currentStyle.StageObjectBorderColor,
96+
edgeColor,
9497
2 * Camera.currentScale,
9598
);
9699
CurveRenderer.renderSolidLine(
97100
Renderer.transformWorld2View(edge.bodyLine.end),
98101
Renderer.transformWorld2View(edgeTextRectangle.getLineIntersectionPoint(endHalf)),
99-
StageStyleManager.currentStyle.StageObjectBorderColor,
102+
edgeColor,
100103
2 * Camera.currentScale,
101104
);
102105
}
@@ -116,41 +119,24 @@ export class StraightEdgeRenderer extends EdgeRendererClass {
116119
public getNormalStageSvg(edge: LineEdge): React.ReactNode {
117120
let lineBody: React.ReactNode = <></>;
118121
let textNode: React.ReactNode = <></>;
122+
const edgeColor = edge.color.equals(Color.Transparent)
123+
? StageStyleManager.currentStyle.StageObjectBorderColor
124+
: edge.color;
119125
if (edge.text.trim() === "") {
120126
// 没有文字的边
121-
lineBody = SvgUtils.line(
122-
edge.bodyLine.start,
123-
edge.bodyLine.end,
124-
StageStyleManager.currentStyle.StageObjectBorderColor,
125-
2,
126-
);
127+
lineBody = SvgUtils.line(edge.bodyLine.start, edge.bodyLine.end, edgeColor, 2);
127128
} else {
128129
// 有文字的边
129130
const midPoint = edge.bodyLine.midPoint();
130131
const startHalf = new Line(edge.bodyLine.start, midPoint);
131132
const endHalf = new Line(midPoint, edge.bodyLine.end);
132133
const edgeTextRectangle = edge.textRectangle;
133134

134-
textNode = SvgUtils.textFromCenter(
135-
edge.text,
136-
midPoint,
137-
Renderer.FONT_SIZE,
138-
StageStyleManager.currentStyle.StageObjectBorderColor,
139-
);
135+
textNode = SvgUtils.textFromCenter(edge.text, midPoint, Renderer.FONT_SIZE, edgeColor);
140136
lineBody = (
141137
<>
142-
{SvgUtils.line(
143-
edge.bodyLine.start,
144-
edgeTextRectangle.getLineIntersectionPoint(startHalf),
145-
StageStyleManager.currentStyle.StageObjectBorderColor,
146-
2,
147-
)}
148-
{SvgUtils.line(
149-
edge.bodyLine.end,
150-
edgeTextRectangle.getLineIntersectionPoint(endHalf),
151-
StageStyleManager.currentStyle.StageObjectBorderColor,
152-
2,
153-
)}
138+
{SvgUtils.line(edge.bodyLine.start, edgeTextRectangle.getLineIntersectionPoint(startHalf), edgeColor, 2)}
139+
{SvgUtils.line(edge.bodyLine.end, edgeTextRectangle.getLineIntersectionPoint(endHalf), edgeColor, 2)}
154140
</>
155141
);
156142
}
@@ -163,6 +149,7 @@ export class StraightEdgeRenderer extends EdgeRendererClass {
163149
.subtract(edge.source.collisionBox.getRectangle().getCenter())
164150
.normalize(),
165151
15,
152+
edgeColor,
166153
);
167154
return (
168155
<>
@@ -181,7 +168,10 @@ export class StraightEdgeRenderer extends EdgeRendererClass {
181168

182169
private renderArrowHead(edge: LineEdge, direction: Vector, endPoint = edge.bodyLine.end.clone()) {
183170
const size = 15;
184-
EdgeRenderer.renderArrowHead(endPoint, direction, size);
171+
const edgeColor = edge.color.equals(Color.Transparent)
172+
? StageStyleManager.currentStyle.StageObjectBorderColor
173+
: edge.color;
174+
EdgeRenderer.renderArrowHead(endPoint, direction, size, edgeColor);
185175
}
186176

187177
public renderShiftingState(edge: LineEdge): void {
@@ -191,19 +181,21 @@ export class StraightEdgeRenderer extends EdgeRendererClass {
191181
const endLine = new Line(shiftingMidPoint, edge.target.collisionBox.getRectangle().center);
192182
const startPoint = edge.source.collisionBox.getRectangle().getLineIntersectionPoint(startLine);
193183
const endPoint = edge.target.collisionBox.getRectangle().getLineIntersectionPoint(endLine);
194-
184+
const edgeColor = edge.color.equals(Color.Transparent)
185+
? StageStyleManager.currentStyle.StageObjectBorderColor
186+
: edge.color;
195187
if (edge.text.trim() === "") {
196188
// 没有文字的边
197189
CurveRenderer.renderSolidLine(
198190
Renderer.transformWorld2View(startPoint),
199191
Renderer.transformWorld2View(shiftingMidPoint),
200-
StageStyleManager.currentStyle.StageObjectBorderColor,
192+
edgeColor,
201193
2 * Camera.currentScale,
202194
);
203195
CurveRenderer.renderSolidLine(
204196
Renderer.transformWorld2View(shiftingMidPoint),
205197
Renderer.transformWorld2View(endPoint),
206-
StageStyleManager.currentStyle.StageObjectBorderColor,
198+
edgeColor,
207199
2 * Camera.currentScale,
208200
);
209201
} else {
@@ -212,21 +204,21 @@ export class StraightEdgeRenderer extends EdgeRendererClass {
212204
edge.text,
213205
Renderer.transformWorld2View(shiftingMidPoint),
214206
Renderer.FONT_SIZE * Camera.currentScale,
215-
StageStyleManager.currentStyle.StageObjectBorderColor,
207+
edgeColor,
216208
);
217209
const edgeTextRectangle = edge.textRectangle;
218210
const start2MidPoint = edgeTextRectangle.getLineIntersectionPoint(startLine);
219211
const mid2EndPoint = edgeTextRectangle.getLineIntersectionPoint(endLine);
220212
CurveRenderer.renderSolidLine(
221213
Renderer.transformWorld2View(startPoint),
222214
Renderer.transformWorld2View(start2MidPoint),
223-
StageStyleManager.currentStyle.StageObjectBorderColor,
215+
edgeColor,
224216
2 * Camera.currentScale,
225217
);
226218
CurveRenderer.renderSolidLine(
227219
Renderer.transformWorld2View(mid2EndPoint),
228220
Renderer.transformWorld2View(endPoint),
229-
StageStyleManager.currentStyle.StageObjectBorderColor,
221+
edgeColor,
230222
2 * Camera.currentScale,
231223
);
232224
}
@@ -239,12 +231,15 @@ export class StraightEdgeRenderer extends EdgeRendererClass {
239231

240232
public renderCycleState(edge: LineEdge): void {
241233
// 自环
234+
const edgeColor = edge.color.equals(Color.Transparent)
235+
? StageStyleManager.currentStyle.StageObjectBorderColor
236+
: edge.color;
242237
ShapeRenderer.renderArc(
243238
Renderer.transformWorld2View(edge.target.collisionBox.getRectangle().location),
244239
(edge.target.collisionBox.getRectangle().size.y / 2) * Camera.currentScale,
245240
Math.PI / 2,
246241
0,
247-
StageStyleManager.currentStyle.StageObjectBorderColor,
242+
edgeColor,
248243
2 * Camera.currentScale,
249244
);
250245
// 画箭头
@@ -258,7 +253,7 @@ export class StraightEdgeRenderer extends EdgeRendererClass {
258253
edge.text,
259254
Renderer.transformWorld2View(edge.target.collisionBox.getRectangle().location.add(new Vector(0, -50))),
260255
Renderer.FONT_SIZE * Camera.currentScale,
261-
StageStyleManager.currentStyle.StageObjectBorderColor,
256+
edgeColor,
262257
);
263258
}
264259

‎src/core/render/canvas2d/entityRenderer/edge/concrete/SymmetryCurveEdgeRenderer.tsx‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,10 @@ export class SymmetryCurveEdgeRenderer extends EdgeRendererClass {
7171
Math.abs(end.subtract(start).magnitude()) / 2,
7272
);
7373
// 曲线模式先不屏蔽箭头，有点不美观，空出来一段距离
74-
this.renderArrowCurve(curve);
74+
this.renderArrowCurve(
75+
curve,
76+
edge.color.equals(Color.Transparent) ? StageStyleManager.currentStyle.StageObjectBorderColor : edge.color,
77+
);
7578
// if (!(edge.target instanceof ConnectPoint)) {
7679
// this.renderArrowCurve(curve);
7780
// } else {
@@ -100,7 +103,10 @@ export class SymmetryCurveEdgeRenderer extends EdgeRendererClass {
100103
endLine.direction().multiply(-1),
101104
Math.abs(endPoint.subtract(startPoint).magnitude()) / 2,
102105
);
103-
this.renderArrowCurve(curve);
106+
this.renderArrowCurve(
107+
curve,
108+
edge.color.equals(Color.Transparent) ? StageStyleManager.currentStyle.StageObjectBorderColor : edge.color,
109+
);
104110
this.renderText(curve, edge);
105111
}
106112

@@ -111,20 +117,28 @@ export class SymmetryCurveEdgeRenderer extends EdgeRendererClass {
111117
(edge.target.collisionBox.getRectangle().size.y / 2) * Camera.currentScale,
112118
Math.PI / 2,
113119
0,
114-
new Color(204, 204, 204),
120+
edge.color.equals(Color.Transparent) ? StageStyleManager.currentStyle.StageObjectBorderColor : edge.color,
115121
2 * Camera.currentScale,
116122
);
117123
// 画箭头
118124
{
119125
const size = 15;
120126
const direction = new Vector(1, 0).rotateDegrees(15);
121127
const endPoint = edge.target.collisionBox.getRectangle().leftCenter;
122-
EdgeRenderer.renderArrowHead(endPoint, direction, size);
128+
EdgeRenderer.renderArrowHead(
129+
endPoint,
130+
direction,
131+
size,
132+
edge.color.equals(Color.Transparent) ? StageStyleManager.currentStyle.StageObjectBorderColor : edge.color,
133+
);
123134
}
124135
}
125136
public getNormalStageSvg(edge: LineEdge): React.ReactNode {
126137
let lineBody = <></>;
127138
let textNode = <></>;
139+
const edgeColor = edge.color.equals(Color.Transparent)
140+
? StageStyleManager.currentStyle.StageObjectBorderColor
141+
: edge.color;
128142
if (edge.text.trim() === "") {
129143
// 没有文字的边
130144
lineBody = (
@@ -134,7 +148,7 @@ export class SymmetryCurveEdgeRenderer extends EdgeRendererClass {
134148
y1={edge.bodyLine.start.y}
135149
x2={edge.bodyLine.end.x}
136150
y2={edge.bodyLine.end.y}
137-
stroke={StageStyleManager.currentStyle.StageObjectBorderColor.toString()}
151+
stroke={edgeColor.toString()}
138152
strokeWidth={2}
139153
/>
140154
);
@@ -148,7 +162,7 @@ export class SymmetryCurveEdgeRenderer extends EdgeRendererClass {
148162
x={midPoint.x}
149163
y={midPoint.y}
150164
key={edge.uuid + "-text"}
151-
fill={StageStyleManager.currentStyle.StageObjectBorderColor.toString()}
165+
fill={edgeColor.toString()}
152166
fontSize={Renderer.FONT_SIZE}
153167
textAnchor="middle"
154168
fontFamily="MiSans"
@@ -164,7 +178,7 @@ export class SymmetryCurveEdgeRenderer extends EdgeRendererClass {
164178
y1={edge.bodyLine.start.y}
165179
x2={startHalf.end.x}
166180
y2={startHalf.end.y}
167-
stroke={StageStyleManager.currentStyle.StageObjectBorderColor.toString()}
181+
stroke={edgeColor.toString()}
168182
strokeWidth={2}
169183
/>
170184
<line
@@ -173,7 +187,7 @@ export class SymmetryCurveEdgeRenderer extends EdgeRendererClass {
173187
y1={endHalf.end.y}
174188
x2={edge.bodyLine.end.x}
175189
y2={edge.bodyLine.end.y}
176-
stroke={StageStyleManager.currentStyle.StageObjectBorderColor.toString()}
190+
stroke={edgeColor.toString()}
177191
strokeWidth={2}
178192
/>
179193
</>
@@ -188,6 +202,7 @@ export class SymmetryCurveEdgeRenderer extends EdgeRendererClass {
188202
.subtract(edge.source.collisionBox.getRectangle().getCenter())
189203
.normalize(),
190204
15,
205+
edgeColor,
191206
);
192207
return (
193208
<>
@@ -222,6 +237,7 @@ export class SymmetryCurveEdgeRenderer extends EdgeRendererClass {
222237
endDirection,
223238
Math.abs(end.subtract(start).magnitude()) / 2,
224239
),
240+
StageStyleManager.currentStyle.StageObjectBorderColor,
225241
);
226242
}
227243

@@ -239,14 +255,15 @@ export class SymmetryCurveEdgeRenderer extends EdgeRendererClass {
239255
endRect.getNormalVectorAt(end),
240256
Math.abs(end.subtract(start).magnitude()) / 2,
241257
),
258+
StageStyleManager.currentStyle.StageObjectBorderColor,
242259
);
243260
}
244261

245262
/**
246263
* 渲染curve及箭头,curve.end即箭头头部
247264
* @param curve
248265
*/
249-
private renderArrowCurve(curve: SymmetryCurve): void {
266+
private renderArrowCurve(curve: SymmetryCurve, color: Color): void {
250267
// 绘制曲线本体
251268
curve.endDirection = curve.endDirection.normalize();
252269
const end = curve.end.clone();
@@ -265,10 +282,10 @@ export class SymmetryCurveEdgeRenderer extends EdgeRendererClass {
265282
// )
266283
// lastPoint = line.end;
267284
// }
268-
WorldRenderUtils.renderSymmetryCurve(curve, new Color(204, 204, 204), 2);
285+
WorldRenderUtils.renderSymmetryCurve(curve, color, 2);
269286
// 画箭头
270287
const endPoint = end.add(curve.endDirection.multiply(2));
271-
EdgeRenderer.renderArrowHead(endPoint, curve.endDirection.multiply(-1), size);
288+
EdgeRenderer.renderArrowHead(endPoint, curve.endDirection.multiply(-1), size, color);
272289
}
273290
// /**
274291
// * 仅仅绘制曲线
@@ -298,6 +315,7 @@ export class SymmetryCurveEdgeRenderer extends EdgeRendererClass {
298315
edge.text,
299316
Renderer.transformWorld2View(curve.bezier.getPointByT(0.5)),
300317
Renderer.FONT_SIZE * Camera.currentScale,
318+
edge.color.equals(Color.Transparent) ? StageStyleManager.currentStyle.StageObjectBorderColor : edge.color,
301319
);
302320
}
303321
}

0 commit comments

Comments
 (0)