Skip to content

Commit

Permalink
Circle enhancments
Browse files Browse the repository at this point in the history 
Signed-off-by: CTomlyn <[email protected]>
  • Loading branch information
@tomlyn
tomlyn committed Dec 16, 2024
1 parent 5f2c730 commit 71aef69
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 33 deletions.
73 changes: 53 additions & 20 deletions canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ $node-port-output-stroke-color: $background-inverse;
$node-port-output-fill-color: $node-body-fill;

$node-port-output-connected-stroke-color: $background-inverse;
$node-port-output-connected-fill-color: $background-inverse;
$node-port-output-connected-fill-color: $node-body-fill;

$node-port-output-hover-stroke: $background-inverse;
$node-port-output-hover-fill: $background-inverse;
Expand Down Expand Up @@ -545,45 +545,63 @@ $link-highlight-color: $support-info;
display: none;
}

/* Styles for ports */
/* Styles for output ports */

.d3-node-port-output {
stroke: $node-port-output-stroke-color;
fill: $node-port-output-fill-color;
fill: $node-body-fill;
stroke-width: 1.25;
& foreignobject {
outline: none;
}
}

.d3-node-shape-port-arcs {
.d3-node-port-output {
stroke: $background-inverse;
fill: $node-body-fill;
stroke-width: 1;
}

.d3-node-port-output[connected="yes"] {
stroke: $background-inverse;
fill: $background-inverse;
stroke-width: 1;
}
}

.d3-node-port-output[connected="yes"] {
stroke: $node-port-output-connected-stroke-color;
fill: $node-port-output-connected-fill-color;
stroke-width: 2;
stroke-width: 1;

.d3-node-port-output-arrow {
stroke: $background-inverse;
stroke-width: 1;
fill: transparent;
pointer-events: none;
}
}

.d3-node-port-output-arrow {
stroke: transparent;
fill: transparent;
}

.d3-node-port-output:hover {
stroke: $node-port-output-hover-stroke;
fill: $node-port-output-hover-fill;
}

.d3-node-port-input {
stroke: $node-port-input-stroke-color;
fill: $node-port-input-fill-color;
stroke-width: 1.25;
}
/* Styles for input ports */

.d3-node-port-input-assoc,
.d3-node-port-output-assoc {
.d3-node-port-input {
stroke: $node-port-input-stroke-color;
fill: $node-port-input-fill-color;
stroke-width: 1.25;
}

.d3-node-port-input-assoc:hover,
.d3-node-port-output-assoc:hover {
stroke: $node-port-output-hover-stroke;
fill: $node-port-output-hover-fill;
& foreignobject {
outline: none;
}
}

.d3-node-shape-port-arcs {
Expand All @@ -607,15 +625,30 @@ $link-highlight-color: $support-info;
}
}

.d3-node-port-input-arrow {
stroke: transparent;
fill: transparent;
}

.d3-node-port-input[connected="yes"][isSupernodeBinding="yes"] {
stroke: $node-port-input-connected-super-binding-stroke-color;
fill: $node-port-input-connected-super-binding-fill-color;
stroke-width: 1;
}

.d3-node-port-input-arrow {
stroke: transparent;
fill: transparent;
/* Styles for ports when creating association links */

.d3-node-port-input-assoc,
.d3-node-port-output-assoc {
stroke: $node-port-input-stroke-color;
fill: $node-port-input-fill-color;
stroke-width: 1.25;
}

.d3-node-port-input-assoc:hover,
.d3-node-port-output-assoc:hover {
stroke: $node-port-output-hover-stroke;
fill: $node-port-output-hover-fill;
}

/* New connection dynamic line styles. */
Expand Down
44 changes: 36 additions & 8 deletions canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1575,10 +1575,11 @@ export default class SVGCanvasRenderer {
.each((d, i, nodeGrps) => {
if (d.isSupernodeInputBinding) {
this.updatePortRadiusAndPos(nodeGrps[i], d, "d3-node-port-output-main");
this.updateOutputPortArrowPath(nodeGrps[i], "d3-node-port-output-arrow");
}
if (d.isSupernodeOutputBinding) {
this.updatePortRadiusAndPos(nodeGrps[i], d, "d3-node-port-input-main");
this.updatePortArrowPath(nodeGrps[i], "d3-node-port-input-arrow");
this.updateInputPortArrowPath(nodeGrps[i], "d3-node-port-input-arrow");
}
});
}
Expand Down Expand Up @@ -1939,7 +1940,7 @@ export default class SVGCanvasRenderer {
const portDisplayInfo = this.getPortDisplayInfo(node.layout.inputPortDisplayObjects, portIdx);
if (portDisplayInfo.type === PORT_DISPLAY_CIRCLE_WITH_ARROW) {
obj
.attr("d", this.getPortArrowPath(port))
.attr("d", this.getPortArrowPath())
.attr("transform", this.getInputPortArrowPathTransform(port));
}
});
Expand Down Expand Up @@ -2033,6 +2034,19 @@ export default class SVGCanvasRenderer {
this.updatePort(obj, portInfo, node, port.cx, port.cy, transform);
});

joinedOutputPortGrps.selectChildren(".d3-node-port-output-arrow")
.datum((port) => node.outputs.find((i) => port.id === i.id))
.each((port, i, outputPorts) => {
const obj = d3.select(outputPorts[i]);
const portIdx = CanvasUtils.getPortIndex(node.outputs, port.id);
const portDisplayInfo = this.getPortDisplayInfo(node.layout.outputPortDisplayObjects, portIdx);
if (portDisplayInfo.type === PORT_DISPLAY_CIRCLE_WITH_ARROW) {
obj
.attr("d", this.getPortArrowPath())
.attr("transform", this.getOutputPortArrowPathTransform(port));
}
});

if (this.config.enableEditingActions) {
const handler = this.dragNewLinkUtils.getDragNewLinkHandler();
joinedOutputPortGrps.call(handler);
Expand Down Expand Up @@ -3186,13 +3200,20 @@ export default class SVGCanvasRenderer {
.attr("cy", (port) => port.cy); // Port position may change for binding nodes with multiple-ports.
}

updatePortArrowPath(nodeObj, portArrowClassName) {
updateInputPortArrowPath(nodeObj, portArrowClassName) {
const nodeGrp = d3.select(nodeObj);
nodeGrp.selectAll("." + portArrowClassName)
.attr("d", (port) => this.getPortArrowPath(port))
.attr("d", this.getPortArrowPath())
.attr("transform", (port) => this.getInputPortArrowPathTransform(port));
}

updateOutputPortArrowPath(nodeObj, portArrowClassName) {
const nodeGrp = d3.select(nodeObj);
nodeGrp.selectAll("." + portArrowClassName)
.attr("d", this.getPortArrowPath())
.attr("transform", (port) => this.getOutputPortArrowPathTransform(port));
}

// Returns true if the port (from a node template) passed in has a max
// cardinaility of zero. If cardinality or cardinality.max is missing the
// max is considered to be non-zero.
Expand Down Expand Up @@ -5683,20 +5704,27 @@ export default class SVGCanvasRenderer {
return ASSOC_VAR_DOUBLE_BACK_RIGHT;
}

// Returns path for arrow head displayed within an input port circle. It is
// Returns path for arrow head displayed within an port circle. It is
// draw so the tip is 2px in front of the origin 0,0 so it appears nicely in
// the port circle.
getPortArrowPath(port) {
getPortArrowPath() {
return "M -2 3 L 2 0 -2 -3";
}

// Returns the transform to position and, if ncessecary, rotate the port
// circle arrow.
// Returns the transform to position and, if necessary, rotate the port
// circle arrow for input ports.
getInputPortArrowPathTransform(port) {
const angle = this.getAngleBasedForInputPorts(port.dir);
return `translate(${port.cx}, ${port.cy}) rotate(${angle})`;
}

// Returns the transform to position and, if necessary, rotate the port
// circle arrow for output ports.
getOutputPortArrowPathTransform(port) {
const angle = this.getAngleBasedForOutputPorts(port.dir);
return `translate(${port.cx}, ${port.cy}) rotate(${angle})`;
}

// Returns an SVG path to draw the arrow head.
getArrowHead(d) {
if (d.type === COMMENT_LINK) {
Expand Down
2 changes: 1 addition & 1 deletion canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-new-link.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ export default class SVGCanvasUtilsDragNewLink {
// we draw a circle at the start of the link to cover over the actual
// link line that is drawn from the port's center.
if (this.ren.canvasLayout.linkMethod === LINK_METHOD_PORTS &&
this.drawingNewLinkData.portDisplayInfo.type === PORT_DISPLAY_CIRCLE) {
this.drawingNewLinkData.portDisplayInfo.tag === PORT_DISPLAY_CIRCLE) {
connectionStartSel
.data(this.drawingNewLinkData.linkArray)
.enter()
Expand Down
4 changes: 0 additions & 4 deletions canvas_modules/harness/src/styles/canvas-customization.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,6 @@
}
}

.d3-node-port-input {
stroke: $background-inverse;
}

.d3-node-selection-highlight[data-selected="yes"],
.d3-comment-selection-highlight[data-selected="yes"] {
stroke-dasharray: 5, 5;
Expand Down

0 comments on commit 71aef69

Please sign in to comment.