diff --git a/cypress/integration/visual/node-shapes.spec.ts b/cypress/integration/visual/node-shapes.spec.ts index 88e863fb0c..e18033cf73 100644 --- a/cypress/integration/visual/node-shapes.spec.ts +++ b/cypress/integration/visual/node-shapes.spec.ts @@ -17,70 +17,136 @@ const shapes = [ "triangleDown", ] as const; -const variantGroups: any[][] = [ - [ - { shapeProperties: { borderDashes: true } }, - { shapeProperties: { borderDashes: [1, 2, 5, 9, 4, 6, 3, 7, 8] } }, - ], - [ - { shapeProperties: { borderRadius: 0 } }, - { shapeProperties: { borderRadius: 12 } }, - ], - [{ borderWidth: 1 }, { borderWidth: 7 }], - [ - { color: "#ACDC00" }, - { color: { border: "#00AA00", background: "#00AAAA" } }, - ], - [{ font: { size: 17 } }, { font: { size: 31 } }], - [{ icon: { code: "\uDB81\uDF85", face: '"Material Design Icons"' } }], - [{ label: "TEST" }, { label: "Test Label" }], - [{ opacity: 0.6 }, { opacity: 0.8 }], - [ - { shadow: true }, - { shadow: { color: "rgba(0,200,200,0.3)", size: 17, x: 7, y: -11 } }, - ], - [{ size: 13 }, { size: 43 }], -]; +context("Node shapes", (): void => { + const points = createGridPoints(shapes.length); -const configs: any[] = []; + describe("Options", function (): void { + const variantGroups: any[][] = [ + [ + { shapeProperties: { borderDashes: true } }, + { shapeProperties: { borderDashes: [1, 2, 5, 9, 4, 6, 3, 7, 8] } }, + ], + [ + { shapeProperties: { borderRadius: 0 } }, + { shapeProperties: { borderRadius: 12 } }, + ], + [{ borderWidth: 1 }, { borderWidth: 7 }], + [ + { color: "#ACDC00" }, + { color: { border: "#00AA00", background: "#00AAAA" } }, + ], + [{ font: { size: 17 } }, { font: { size: 31 } }], + [{ icon: { code: "\uDB81\uDF85", face: '"Material Design Icons"' } }], + [{ label: "TEST" }, { label: "Test Label" }], + [{ opacity: 0.6 }, { opacity: 0.8 }], + [ + { shadow: true }, + { shadow: { color: "rgba(0,200,200,0.3)", size: 17, x: 7, y: -11 } }, + ], + [{ size: 13 }, { size: 43 }], + ]; -// All defaults -configs.push({}); + const configs: any[] = []; -// Each variant from each group on it's own. -for (const group of variantGroups) { - configs.push(...group.map((variant): any => pureDeepObjectAssign(variant))); -} + // All defaults + configs.push({}); -// All groups combined. -const longest = Math.max( - ...variantGroups.map((variant): number => variant.length) -); -for (let i = 0; i < longest; ++i) { - configs.push( - pureDeepObjectAssign( - {}, - ...variantGroups.map((group): any => group[i % group.length]) - ) - ); -} + // Each variant from each group on it's own. + for (const group of variantGroups) { + configs.push( + ...group.map((variant): any => pureDeepObjectAssign(variant)) + ); + } -context("Node shapes", (): void => { - const points = createGridPoints(shapes.length); + // All groups combined. + const longest = Math.max( + ...variantGroups.map((variant): number => variant.length) + ); + for (let i = 0; i < longest; ++i) { + configs.push( + pureDeepObjectAssign( + {}, + ...variantGroups.map((group): any => group[i % group.length]) + ) + ); + } + + configs.forEach((config, i): void => { + const screenshotNumber = i + 1; + it(`${screenshotNumber}: ${JSON.stringify(config)}`, (): void => { + cy.visSimpleCanvasSnapshot(screenshotNumber, { + nodes: shapes.map((shape, id): any => ({ + ...config, + shape, + id, + fixed: true, + ...points[id], + })), + edges: [], + }); + }); + }); + }); + + describe("Border width", function (): void { + it("Default", function (): void { + cy.visVisitUniversal({ + nodes: shapes.map((shape, id): any => ({ + shape, + id, + fixed: true, + ...points[id], + })), + edges: [], + }); + cy.visSnapshotOpenedPage("border-widths-default-width-unselected"); + + cy.visRun(({ network }): void => { + network.selectNodes(shapes.map((_v, id): number => id)); + }); + cy.visSnapshotOpenedPage("border-widths-default-width-selected"); + }); - configs.forEach((config, i): void => { - const screenshotNumber = i + 1; - it(`${screenshotNumber}: ${JSON.stringify(config)}`, (): void => { - cy.visSimpleCanvasSnapshot(screenshotNumber, { + it("Custom width", function (): void { + cy.visVisitUniversal({ nodes: shapes.map((shape, id): any => ({ - ...config, shape, id, fixed: true, ...points[id], + borderWidth: 5, })), edges: [], }); + cy.visSnapshotOpenedPage("border-widths-custom-width-unselected"); + + cy.visRun(({ network }): void => { + network.selectNodes(shapes.map((_v, id): number => id)); + }); + cy.visSnapshotOpenedPage("border-widths-custom-width-selected"); + }); + + it("Custom widths", function (): void { + cy.visVisitUniversal( + { + nodes: shapes.map((shape, id): any => ({ + shape, + id, + fixed: true, + ...points[id], + borderWidth: 9, + borderWidthSelected: 4, + })), + edges: [], + }, + { requireNewerVersionThan: "8.5.1" } + ); + cy.visSnapshotOpenedPage("border-widths-custom-widths-unselected"); + + cy.visRun(({ network }): void => { + network.selectNodes(shapes.map((_v, id): number => id)); + }); + cy.visSnapshotOpenedPage("border-widths-custom-widths-selected"); }); }); }); diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js index 96d75d9072..ecd6506085 100644 --- a/lib/network/modules/NodesHandler.js +++ b/lib/network/modules/NodesHandler.js @@ -35,7 +35,7 @@ class NodesHandler { this.defaultOptions = { borderWidth: 1, - borderWidthSelected: 2, + borderWidthSelected: undefined, brokenImage: undefined, color: { border: "#2B7CE9", diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js index 1e774f6ceb..12db3e0727 100644 --- a/lib/network/modules/components/Node.js +++ b/lib/network/modules/components/Node.js @@ -455,7 +455,11 @@ class Node { if (this.selected || this.hover) { if (this.chooser === true) { if (this.selected) { - values.borderWidth *= 2; + if (this.options.borderWidthSelected != null) { + values.borderWidth = this.options.borderWidthSelected; + } else { + values.borderWidth *= 2; + } values.color = this.options.color.highlight.background; values.borderColor = this.options.color.highlight.border; values.shadow = this.options.shadow.enabled;