Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[FIX JENKINS-42982] - fix issue on EDGE & node styles (#36)
* JENKINS-42982 - fix issue on EDGE & node styles
  • Loading branch information
kzantow committed Mar 23, 2017
1 parent d2e6795 commit 9ee2d50
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 48 deletions.
36 changes: 12 additions & 24 deletions src/main/js/components/editor/EditorPipelineGraph.jsx
Expand Up @@ -10,18 +10,17 @@ import pipelineValidator from '../../services/PipelineValidator';
export const defaultLayout = {
nodeSpacingH: 120,
nodeSpacingV: 70,
nodeRadius: 11,
nodeRadius: 12.5,
innerDotRadius: 9.3,
placeholderRadius: 11,
startRadius: 7.5,
dotRadius: 3.4,
curveRadius: 12,
connectorStrokeWidth: 3.2,
addStrokeWidth: 1.7,
labelOffsetV: 25,
smallLabelOffsetV: 20
};

const nodeStrokeWidth = 3.1;

// Typedefs

type StageNodeInfo = {
Expand Down Expand Up @@ -452,12 +451,12 @@ needsLayout = true;
const key = leftNode.key + "_con_" + rightNode.key;

const leftPos = {
x: leftNode.x,// + nodeRadius - (nodeStrokeWidth / 2),
x: leftNode.x,
y: leftNode.y
};

const rightPos = {
x: rightNode.x,// - nodeRadius + (nodeStrokeWidth / 2),
x: rightNode.x,
y: rightNode.y
};

Expand Down Expand Up @@ -503,33 +502,27 @@ needsLayout = true;

getSVGForNode(node:NodeInfo) {

const {nodeRadius, startRadius, addStrokeWidth} = this.state.layout;
const {nodeRadius, startRadius, addStrokeWidth, innerDotRadius, placeholderRadius} = this.state.layout;
const nodeIsSelected = this.nodeIsSelected(node);

if (node.isPlaceholder === true) {
if (node.type === "start") {
return <circle r={startRadius} className="start-node" stroke="none"/>;
}

return getAddIconGroup(nodeRadius, addStrokeWidth);
return getAddIconGroup(placeholderRadius, addStrokeWidth);
}

/*
if (nodeHasErrors(node)) {
return (<g>
<circle className="editor-graph-node" r="13" strokeWidth="2.5"/>
<circle className="editor-graph-node" r="8.5" strokeWidth="2.5"/>
</g>);
}
*/

return <circle className="editor-graph-node" r={nodeRadius} strokeWidth={nodeStrokeWidth} />;
return (<g>
<circle className="editor-graph-node" r={nodeRadius} />
<circle className="editor-graph-node-inner" r={innerDotRadius} />
</g>);
}

renderNode(node:NodeInfo) {

const nodeIsSelected = this.nodeIsSelected(node);
const { nodeRadius, dotRadius, connectorStrokeWidth } = this.state.layout;
const { nodeRadius, connectorStrokeWidth } = this.state.layout;

// Use a bigger radius for invisible click/touch target
const mouseTargetRadius = nodeRadius + (2 * connectorStrokeWidth);
Expand Down Expand Up @@ -575,11 +568,6 @@ needsLayout = true;

if (nodeIsSelected) {
classNames.push("selected");

// add a middle dot
// groupChildren.push(
// <circle className="pipeline-selection-highlight" r={dotRadius} strokeWidth={nodeStrokeWidth} />
// );
}

// Add an invisible click/touch target, coz the nodes are small and (more importantly)
Expand Down
2 changes: 1 addition & 1 deletion src/main/js/services/fetchClassic.js
Expand Up @@ -40,7 +40,7 @@ export default function fetch(path, body, handler, disableLoadingIndicator) {
} else {
try {
let crumb = response.text();
if (crumb instanceof Promise) {
if (crumb.then) {
crumb.then(c => {
cache.crumb = c;
useCrumb(c);
Expand Down
33 changes: 10 additions & 23 deletions src/main/less/editor.less
Expand Up @@ -178,31 +178,22 @@
//--[ Pipeline Graph ]--------------------------------------------------------------------------------------------------

.editor-graph-node {
fill: none;
stroke: @brand-grey-lite;
transition: stroke .25s, fill .25s;
fill: @brand-grey-lite;
}

.editor-graph-nodegroup .editor-graph-node {
.editor-graph-node-inner {
fill: #fff;
}

.editor-graph-nodegroup.selected .editor-graph-node {
stroke: @brand-color;
}

.editor-graph-nodegroup circle {
transition: all 0.1s ease-in;
}

.editor-graph-nodegroup.selected circle {
stroke-width: 12px;
r: 6px;
}

.pipeline-selection-highlight {
fill: @brand-color;
stroke: @brand-color;
.editor-graph-nodegroup.selected {
.editor-graph-node {
fill: @brand-color;
}
.editor-graph-node-inner {
fill: @brand-color;
transform: scale(0);
}
}

.editor-graph-nodegroup.errors text {
Expand All @@ -225,10 +216,6 @@
color: @error-highlight;
}

.editor-add-node-placeholder {
fill: @brand-color;
}

.result-status-glyph polygon {
fill: #cbcbcb;
}
Expand Down

0 comments on commit 9ee2d50

Please sign in to comment.