Skip to content

Commit 7d697a3

Browse files
tomlyntomlyn
authored
#1659 Highlight branch feature to support dark theme or custom css (#1660)
1 parent ab99678 commit 7d697a3

File tree

12 files changed

+155
-46
lines changed

12 files changed

+155
-46
lines changed

‎canvas_modules/common-canvas/src/common-canvas/canvas-controller-menu-utils.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,7 @@ const createDefaultContextMenu = (source) => {
280280
}
281281
if (source.type === "canvas") {
282282
menuDefinition = menuDefinition.concat(
283-
{ action: "unhighlight", label: getLabel("menu.unhighlight"), enable: cc.isHighlighted() }
283+
{ action: "unhighlight", label: getLabel("menu.unhighlight"), enable: cc.isBranchHighlighted() }
284284
);
285285
}
286286
if (source.type === "node" &&
@@ -319,7 +319,7 @@ const createHighlightSubMenu = (source) => {
319319
// This should only appear in menu if highlight is true.
320320
const createUnhighlightMenu = (source) => {
321321
const unhighlightSubMenu = [
322-
{ action: "unhighlight", label: getLabel("menu.unhighlight"), enable: cc.isHighlighted() }
322+
{ action: "unhighlight", label: getLabel("menu.unhighlight"), enable: cc.isBranchHighlighted() }
323323
];
324324
return unhighlightSubMenu;
325325
};

‎canvas_modules/common-canvas/src/common-canvas/canvas-controller.js

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export default class CanvasController {
118118
// canvas controller is created.
119119
this.instanceId = commonCanvasControllerInstanceId++;
120120

121-
this.highlight = false;
121+
this.branchHighlighted = false;
122122
}
123123

124124
// ---------------------------------------------------------------------------
@@ -314,6 +314,11 @@ export default class CanvasController {
314314
this.objectModel.setSubdueStyle(newStyle);
315315
}
316316

317+
// Unsets all branch highlight flags from all nodes and links in the pipeline flow.
318+
unsetAllBranchHighlight() {
319+
this.objectModel.unsetAllBranchHighlight();
320+
}
321+
317322
// ---------------------------------------------------------------------------
318323
// Pipeline methods
319324
// ---------------------------------------------------------------------------
@@ -486,7 +491,7 @@ export default class CanvasController {
486491
this.objectModel.setIsOpenCategory(categoryId, true);
487492
}
488493

489-
// Closes the palette category idetified by the category ID passed in.
494+
// Closes the palette category identified by the category ID passed in.
490495
closePaletteCategory(categoryId) {
491496
this.objectModel.setIsOpenCategory(categoryId, false);
492497
}
@@ -709,6 +714,12 @@ export default class CanvasController {
709714
this.objectModel.setObjectsMultiStyle(pipelineObjStyles, temporary);
710715
}
711716

717+
// Sets the branch highlighting flag on all nodes identified in
718+
// the pipelineObjectIds parameter.
719+
setObjectsBranchHighlight(pipelineObjectIds) {
720+
this.objectModel.setObjectsBranchHighlight(pipelineObjectIds);
721+
}
722+
712723
// ---------------------------------------------------------------------------
713724
// Node methods
714725
// ---------------------------------------------------------------------------
@@ -1299,6 +1310,12 @@ export default class CanvasController {
12991310
return this.objectModel.getAPIPipeline(pipelineId).getLinkStyle(linkId, temporary);
13001311
}
13011312

1313+
// Sets the branch highlighting flag on all links idetified in
1314+
// the pipelineLinkIds parameter.
1315+
setLinksBranchHighlight(pipelineLinkIds) {
1316+
this.objectModel.setLinksBranchHighlight(pipelineLinkIds);
1317+
}
1318+
13021319
// Sets the decorations on a link. The decorations array passed in
13031320
// will replace any decorations currently applied to the link.
13041321
// linkId - The ID of the link
@@ -1412,24 +1429,14 @@ export default class CanvasController {
14121429
// Highlight methods
14131430
// ---------------------------------------------------------------------------
14141431

1415-
//
1416-
setHighlightStyle(highlightObjectIds, pipelineId) {
1417-
this.removeAllStyles(true);
1418-
const objectStyle = {
1419-
body: {
1420-
default: `fill: ${constants.HIGHLIGHT_FILL} ;stroke: ${constants.HIGHLIGHT_STROKE};`,
1421-
hover: `fill: ${constants.HIGHLIGHT_HOVER_FILL};`
1422-
}
1423-
};
1424-
const linkStyle = {
1425-
line: {
1426-
default: `stroke: ${constants.HIGHLIGHT_STROKE};`,
1427-
hover: `stroke-width: ${constants.HIGHLIGHT_STROKE_WIDTH}`
1428-
}
1429-
};
1430-
this.setObjectsStyle(highlightObjectIds.nodes, objectStyle, true, false);
1431-
this.setLinksStyle(highlightObjectIds.links, linkStyle, true, false);
1432-
this.highlight = true;
1432+
// Sets the branch highlight flag on the nodes and links passed in
1433+
// the highlightObjectIds parameter
1434+
setBranchHighlight(highlightObjectIds) {
1435+
this.unsetAllBranchHighlight();
1436+
this.setObjectsBranchHighlight(highlightObjectIds.nodes);
1437+
this.setLinksBranchHighlight(highlightObjectIds.links);
1438+
1439+
this.branchHighlighted = true;
14331440
}
14341441

14351442
// Highlights the branch(s) (both upstream and downstream) from the node
@@ -1438,7 +1445,7 @@ export default class CanvasController {
14381445
// pipelineId - The ID of the pipeline
14391446
highlightBranch(nodeIds, pipelineId) {
14401447
const highlightObjectIds = this.objectModel.getHighlightObjectIds(pipelineId, nodeIds, constants.HIGHLIGHT_BRANCH);
1441-
this.setHighlightStyle(highlightObjectIds, pipelineId);
1448+
this.setBranchHighlight(highlightObjectIds);
14421449
return highlightObjectIds;
14431450
}
14441451

@@ -1447,7 +1454,7 @@ export default class CanvasController {
14471454
// pipelineId - The ID of the pipeline
14481455
highlightUpstream(nodeIds, pipelineId) {
14491456
const highlightObjectIds = this.objectModel.getHighlightObjectIds(pipelineId, nodeIds, constants.HIGHLIGHT_UPSTREAM);
1450-
this.setHighlightStyle(highlightObjectIds, pipelineId);
1457+
this.setBranchHighlight(highlightObjectIds);
14511458
return highlightObjectIds;
14521459
}
14531460

@@ -1456,12 +1463,12 @@ export default class CanvasController {
14561463
// pipelineId - The ID of the pipeline
14571464
highlightDownstream(nodeIds, pipelineId) {
14581465
const highlightObjectIds = this.objectModel.getHighlightObjectIds(pipelineId, nodeIds, constants.HIGHLIGHT_DOWNSTREAM);
1459-
this.setHighlightStyle(highlightObjectIds, pipelineId);
1466+
this.setBranchHighlight(highlightObjectIds);
14601467
return highlightObjectIds;
14611468
}
14621469

1463-
isHighlighted() {
1464-
return this.highlight;
1470+
isBranchHighlighted() {
1471+
return this.branchHighlighted;
14651472
}
14661473

14671474
// ---------------------------------------------------------------------------
@@ -2530,9 +2537,8 @@ export default class CanvasController {
25302537
data.highlightedObjectIds = this.highlightUpstream(this.objectModel.getSelectedNodesIds(), data.pipelineId);
25312538
break;
25322539
case "unhighlight":
2533-
// this.setSubdueStyle(null);
2534-
this.removeAllStyles(true);
2535-
this.highlight = false; // TODO: use this for context menu when to show unhighlight option.
2540+
this.unsetAllBranchHighlight();
2541+
this.branchHighlighted = false;
25362542
break;
25372543
case "openNotificationPanel":
25382544
this.openNotificationPanel();

‎canvas_modules/common-canvas/src/common-canvas/constants/canvas-constants.js

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -132,11 +132,6 @@ export const HIGHLIGHT_BRANCH = "branch";
132132
export const HIGHLIGHT_UPSTREAM = "upstream";
133133
export const HIGHLIGHT_DOWNSTREAM = "downstream";
134134

135-
export const HIGHLIGHT_FILL = "#bad8ff";
136-
export const HIGHLIGHT_HOVER_FILL = "#a0c8fe";
137-
export const HIGHLIGHT_STROKE = "#152935";
138-
export const HIGHLIGHT_STROKE_WIDTH = "3px";
139-
140135
export const BINDING = "binding";
141136
export const SUPER_NODE = "super_node";
142137
export const MODEL_NODE = "model_node";

‎canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,7 @@ $link-highlight-color: $support-04;
261261
}
262262
}
263263

264-
/* Node highlight when end of new link line is over, or approaching, the node */
264+
/* Node selection highlight when end of new link line is over, or approaching, the node */
265265

266266
.d3-node-group[data-new-link-over="yes"] {
267267
.d3-node-selection-highlight {
@@ -273,6 +273,28 @@ $link-highlight-color: $support-04;
273273
}
274274
}
275275

276+
/* Node branch highlight styles */
277+
278+
.d3-node-group.d3-branch-highlight {
279+
.d3-node-body-outline {
280+
stroke: $ui-05;
281+
stroke-width: 2px;
282+
fill: $highlight;
283+
}
284+
285+
.d3-node-label {
286+
color: $text-01;
287+
}
288+
}
289+
290+
.d3-node-group.d3-branch-highlight:hover {
291+
.d3-node-body-outline {
292+
stroke: $ui-05;
293+
stroke-width: 2px;
294+
fill: $hover-primary;
295+
}
296+
}
297+
276298
/* Node styles - Error indication */
277299

278300
.d3-node-error-label {
@@ -865,7 +887,20 @@ g.bkg-col-cyan-50 {
865887
}
866888
}
867889

868-
/* Link styles */
890+
/* Link styles for branch highlighting */
891+
892+
.d3-link-group.d3-branch-highlight {
893+
.d3-link-line {
894+
stroke: $inverse-02;
895+
}
896+
}
897+
898+
.d3-link-group.d3-branch-highlight:hover {
899+
.d3-link-line {
900+
stroke: $inverse-02;
901+
stroke-width: 3px;
902+
}
903+
}
869904

870905
// Common styles for all links
871906
.d3-link-line,

‎canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4204,7 +4204,12 @@ export default class SVGCanvasRenderer {
42044204

42054205
// Returns the class string to be appled to the link group object.
42064206
getLinkGroupClass(d) {
4207-
return "d3-link-group " + this.getLinkTypeClass(d) + " " + this.getLinkCustomClass(d);
4207+
return "d3-link-group " + this.getLinkTypeClass(d) + " " + this.getLinkBranchHighlightCLass(d) + " " + this.getLinkCustomClass(d);
4208+
}
4209+
4210+
// Returns the class to be used for branch highlighting if the branchHighlight flag id set for the link.
4211+
getLinkBranchHighlightCLass(d) {
4212+
return (d.branchHighlight ? "d3-branch-highlight" : "");
42084213
}
42094214

42104215
// Returns the custom class string for the link object passed in.
@@ -4282,7 +4287,9 @@ export default class SVGCanvasRenderer {
42824287
? " d3-resized"
42834288
: "";
42844289

4285-
return "d3-node-group" + supernodeClass + resizeClass + draggableClass + customClass;
4290+
const branchHighlightClass = d.branchHighlight ? " d3-branch-highlight" : "";
4291+
4292+
return "d3-node-group" + supernodeClass + resizeClass + draggableClass + branchHighlightClass + customClass;
42864293
}
42874294

42884295
// Pushes the links to be below nodes within the nodesLinksGrp group.

‎canvas_modules/common-canvas/src/object-model/object-model.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2302,6 +2302,18 @@ export default class ObjectModel {
23022302
return port;
23032303
}
23042304

2305+
setObjectsBranchHighlight(pipelineObjIds) {
2306+
this.store.dispatch({ type: "SET_OBJECTS_BRANCH_HIGHLIGHT", data: { pipelineObjIds: pipelineObjIds } });
2307+
}
2308+
2309+
setLinksBranchHighlight(pipelineLinkIds) {
2310+
this.store.dispatch({ type: "SET_LINKS_BRANCH_HIGHLIGHT", data: { pipelineObjIds: pipelineLinkIds } });
2311+
}
2312+
2313+
unsetAllBranchHighlight() {
2314+
this.store.dispatch({ type: "UNSET_OBJECTS_BRANCH_HIGHLIGHT" });
2315+
}
2316+
23052317
// ---------------------------------------------------------------------------
23062318
// Clipboard methods
23072319
// ---------------------------------------------------------------------------

‎canvas_modules/common-canvas/src/object-model/redux/reducers/canvasinfo.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -445,7 +445,9 @@ export default (state = {}, action) => {
445445
}
446446

447447
case "SET_OBJECTS_STYLE":
448-
case "SET_LINKS_STYLE": {
448+
case "SET_LINKS_STYLE":
449+
case "SET_OBJECTS_BRANCH_HIGHLIGHT":
450+
case "SET_LINKS_BRANCH_HIGHLIGHT": {
449451
const pipelineIds = Object.keys(action.data.pipelineObjIds);
450452
const canvasInfoPipelines = state.pipelines.map((pipeline) => {
451453
if (pipelineIds.indexOf(pipeline.id) > -1) {
@@ -461,6 +463,16 @@ export default (state = {}, action) => {
461463
return Object.assign({}, state, { pipelines: canvasInfoPipelines });
462464
}
463465

466+
case "UNSET_OBJECTS_BRANCH_HIGHLIGHT": {
467+
const canvasInfoPipelines = state.pipelines.map((pipeline) => {
468+
return Object.assign({}, pipeline, {
469+
nodes: nodes(pipeline.nodes, action),
470+
comments: comments(pipeline.comments, action),
471+
links: links(pipeline.links, action) });
472+
});
473+
return Object.assign({}, state, { pipelines: canvasInfoPipelines });
474+
}
475+
464476
case "SET_OBJECTS_MULTI_STYLE":
465477
case "SET_LINKS_MULTI_STYLE": {
466478
const canvasInfoPipelines = state.pipelines.map((pipeline) => {

‎canvas_modules/common-canvas/src/object-model/redux/reducers/comments.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,6 @@ export default (state = [], action) => {
206206
return comment;
207207
});
208208

209-
210209
default:
211210
return state;
212211
}

‎canvas_modules/common-canvas/src/object-model/redux/reducers/links.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,22 @@ export default (state = [], action) => {
251251
return link;
252252
});
253253

254+
case "SET_LINKS_BRANCH_HIGHLIGHT":
255+
return state.map((link) => {
256+
if (action.data.objIds.indexOf(link.id) > -1) {
257+
return Object.assign({}, link, { branchHighlight: true });
258+
}
259+
return link;
260+
});
261+
262+
case "UNSET_OBJECTS_BRANCH_HIGHLIGHT":
263+
return state.map((link) => {
264+
if (link.branchHighlight) {
265+
return Object.assign({}, link, { branchHighlight: false });
266+
}
267+
return link;
268+
});
269+
254270
case "SET_LINK_DECORATIONS":
255271
return state.map((link, index) => {
256272
if (action.data.linkId === link.id) {

‎canvas_modules/common-canvas/src/object-model/redux/reducers/nodes.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -287,6 +287,22 @@ export default (state = [], action) => {
287287
return node;
288288
});
289289

290+
case "SET_OBJECTS_BRANCH_HIGHLIGHT":
291+
return state.map((node) => {
292+
if (action.data.objIds.indexOf(node.id) > -1) {
293+
return Object.assign({}, node, { branchHighlight: true });
294+
}
295+
return node;
296+
});
297+
298+
case "UNSET_OBJECTS_BRANCH_HIGHLIGHT":
299+
return state.map((node) => {
300+
if (node.branchHighlight) {
301+
return Object.assign({}, node, { branchHighlight: false });
302+
}
303+
return node;
304+
});
305+
290306
case "SET_INPUT_PORT_LABEL":
291307
case "SET_INPUT_PORT_SUBFLOW_NODE_REF":
292308
return state.map((node, index) => {

0 commit comments

Comments
 (0)