feat: improve outline and drag handle styles

* remove hover outline (not present in comparable editor apps)
* make select outline solid so it is easier to recognize
* make drag handles solid so they are easier to recognize
* unify drag handle sizes

assets/diagram-js.css

@@ -29,8 +29,10 @@
   --color-black-opacity-05: hsla(0, 0%, 0%, 5%);
   --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
 
-  --bendpoint-fill-color: var(--color-blue-205-100-45-opacity-30);
-  --bendpoint-stroke-color: var(--color-blue-205-100-50);
+  --canvas-fill-color: var(--color-white);
+
+  --bendpoint-fill-color: var(--color-blue-205-100-45);
+  --bendpoint-stroke-color: var(--canvas-fill-color);
 
   --context-pad-entry-background-color: var(--color-white);
   --context-pad-entry-hover-background-color: var(--color-grey-225-10-95);
@@ -57,8 +59,8 @@
   --popup-background-color: var(--color-grey-225-10-97);
   --popup-border-color: var(--color-grey-225-10-75);
 
-  --resizer-fill-color: var(--color-blue-205-100-45-opacity-30);
-  --resizer-stroke-color: var(--color-blue-205-100-50);
+  --resizer-fill-color: var(--color-blue-205-100-45);
+  --resizer-stroke-color: var(--canvas-fill-color);
 
   --search-container-background-color: var(--color-grey-225-10-97);
   --search-container-border-color: var(--color-blue-205-100-50);
@@ -93,22 +95,12 @@
   visibility: hidden;
 }
 
-.djs-element.hover .djs-outline,
 .djs-element.selected .djs-outline {
   visibility: visible;
   shape-rendering: geometricPrecision;
-}
-
-.djs-element.hover .djs-outline {
-  stroke: var(--element-hover-outline-fill-color);
-  stroke-dasharray: 3,3;
-  stroke-width: 1px;
-}
 
-.djs-element.selected .djs-outline {
   stroke: var(--element-selected-outline-stroke-color);
   stroke-width: 1px;
-  stroke-dasharray: none;
 }
 
 .djs-shape.connect-ok .djs-visual > :nth-child(1) {
@@ -193,7 +185,6 @@ svg.new-parent {
 .djs-resizer-visual {
   fill: var(--resizer-fill-color);
   stroke-width: 1px;
-  stroke-opacity: 0.5;
   stroke: var(--resizer-stroke-color);
   shape-rendering: geometricprecision;
 }
@@ -618,7 +609,6 @@ marker.djs-dragger tspan {
   fill: var(--bendpoint-fill-color);
   stroke: var(--bendpoint-stroke-color);
   stroke-width: 1px;
-  stroke-opacity: 0.5;
 }
 
 .djs-segment-dragger:hover,

lib/features/bendpoints/BendpointUtil.js

@@ -94,8 +94,8 @@ function createParallelDragger(parentGfx, segmentStart, segmentEnd, alignment) {
 
   svgAppend(parentGfx, draggerGfx);
 
-  var width = 14,
-      height = 3,
+  var width = 18,
+      height = 6,
       padding = 11,
       hitWidth = calculateHitWidth(segmentStart, segmentEnd, alignment),
       hitHeight = height + padding;

lib/features/resize/ResizeHandles.js

@@ -26,7 +26,7 @@ import {
 import { getReferencePoint } from './Resize';
 
 var HANDLE_OFFSET = -6,
-    HANDLE_SIZE = 4,
+    HANDLE_SIZE = 8,
     HANDLE_HIT_SIZE = 20;
 
 var CLS_RESIZER = 'djs-resizer';

test/spec/features/bendpoints/BendpointsSpec.js

@@ -431,7 +431,7 @@ describe('features/bendpoints', function() {
       var bendpointGfx,
           listenerSpy;
 
-      beforeEach(inject(function(bendpoints, eventBus) {
+      beforeEach(inject(function(bendpoints) {
         bendpoints.addHandles(connection);
 
         bendpointGfx = domQuery('.djs-bendpoint', bendpoints.getBendpointsContainer(connection));
@@ -571,7 +571,7 @@ describe('features/bendpoints', function() {
 
         // then
         expect(newBounds).to.not.eql(oldBounds);
-        expect(newBounds.left).to.be.closeTo(453, 2);
+        expect(newBounds.left).to.be.closeTo(451, 2);
       }
     ));