diff --git a/netbox/dcim/svg/cables.py b/netbox/dcim/svg/cables.py index 34a171e00e2..3a9b47b543b 100644 --- a/netbox/dcim/svg/cables.py +++ b/netbox/dcim/svg/cables.py @@ -1,6 +1,6 @@ import svgwrite from svgwrite.container import Group, Hyperlink -from svgwrite.shapes import Line, Rect +from svgwrite.shapes import Line, Polyline, Rect from svgwrite.text import Text from django.conf import settings @@ -16,7 +16,8 @@ __all__ = ( OFFSET = 0.5 PADDING = 10 LINE_HEIGHT = 20 -FANOUT_HEIGHT = 25 +FANOUT_HEIGHT = 35 +FANOUT_LEG_HEIGHT = 15 TERMINATION_WIDTH = 100 @@ -213,15 +214,25 @@ class CableTraceSVG: return nodes def draw_fanin(self, node, connector): + points = ( + node.bottom_center, + (node.bottom_center[0], node.bottom_center[1] + FANOUT_LEG_HEIGHT), + connector.start, + ) self.connectors.extend(( - Line(start=node.bottom_center, end=connector.start, class_='cable-shadow'), - Line(start=node.bottom_center, end=connector.start, style=f'stroke: #{connector.color}'), + Polyline(points=points, class_='cable-shadow'), + Polyline(points=points, style=f'stroke: #{connector.color}'), )) def draw_fanout(self, node, connector): + points = ( + connector.end, + (node.top_center[0], node.top_center[1] - FANOUT_LEG_HEIGHT), + node.top_center, + ) self.connectors.extend(( - Line(start=connector.end, end=node.top_center, class_='cable-shadow'), - Line(start=connector.end, end=node.top_center, style=f'stroke: #{connector.color}') + Polyline(points=points, class_='cable-shadow'), + Polyline(points=points, style=f'stroke: #{connector.color}'), )) def draw_cable(self, cable): diff --git a/netbox/project-static/dist/cable_trace.css b/netbox/project-static/dist/cable_trace.css index 50622f1284d..ff431f4ad84 100644 --- a/netbox/project-static/dist/cable_trace.css +++ b/netbox/project-static/dist/cable_trace.css @@ -1 +1 @@ -:root{--nbx-trace-color: #000;--nbx-trace-node-bg: #e9ecef;--nbx-trace-termination-bg: #f8f9fa;--nbx-trace-cable-shadow: #343a40;--nbx-trace-attachment: #ced4da}:root[data-netbox-color-mode=dark]{--nbx-trace-color: #fff;--nbx-trace-node-bg: #212529;--nbx-trace-termination-bg: #343a40;--nbx-trace-cable-shadow: #e9ecef;--nbx-trace-attachment: #6c757d}*{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:.875rem}text{text-anchor:middle;dominant-baseline:middle}text:not([fill]){fill:var(--nbx-trace-color)}text.bold{font-weight:700}svg rect{fill:var(--nbx-trace-node-bg);stroke:#606060;stroke-width:1}svg rect .termination{fill:var(--nbx-trace-termination-bg)}svg .connector text{text-anchor:start}svg line{stroke-width:5px}svg line.cable-shadow{stroke:var(--nbx-trace-cable-shadow);stroke-width:7px}svg line.wireless-link{stroke:var(--nbx-trace-attachment);stroke-dasharray:4px 12px;stroke-linecap:round}svg line.attachment{stroke:var(--nbx-trace-attachment);stroke-dasharray:5px} +:root{--nbx-trace-color: #000;--nbx-trace-node-bg: #e9ecef;--nbx-trace-termination-bg: #f8f9fa;--nbx-trace-cable-shadow: #343a40;--nbx-trace-attachment: #ced4da}:root[data-netbox-color-mode=dark]{--nbx-trace-color: #fff;--nbx-trace-node-bg: #212529;--nbx-trace-termination-bg: #343a40;--nbx-trace-cable-shadow: #e9ecef;--nbx-trace-attachment: #6c757d}*{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:.875rem}text{text-anchor:middle;dominant-baseline:middle}text:not([fill]){fill:var(--nbx-trace-color)}text.bold{font-weight:700}svg rect{fill:var(--nbx-trace-node-bg);stroke:#606060;stroke-width:1}svg rect .termination{fill:var(--nbx-trace-termination-bg)}svg .connector text{text-anchor:start}svg line{stroke-width:5px}svg polyline{fill:none;stroke-width:5px}svg .cable-shadow{stroke:var(--nbx-trace-cable-shadow);stroke-width:7px}svg line.wireless-link{stroke:var(--nbx-trace-attachment);stroke-dasharray:4px 12px;stroke-linecap:round}svg line.attachment{stroke:var(--nbx-trace-attachment);stroke-dasharray:5px} diff --git a/netbox/project-static/styles/cable-trace.scss b/netbox/project-static/styles/cable-trace.scss index 51d94d38a7e..59c67ad4ded 100644 --- a/netbox/project-static/styles/cable-trace.scss +++ b/netbox/project-static/styles/cable-trace.scss @@ -55,7 +55,11 @@ svg { line { stroke-width: 5px; } - line.cable-shadow { + polyline { + fill: none; + stroke-width: 5px; + } + .cable-shadow { stroke: var(--nbx-trace-cable-shadow); stroke-width: 7px; }