fix(node-border): use borderWidthSelected when set (#1145)

visjs · Oct 28, 2020 · c2f8473 · c2f8473
1 parent bfceb7b
commit c2f8473
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 52 deletions.
diff --git 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
@@ -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
@@ -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;