fix #7208 improve focus-text layout and sizing

radiasoft · Oct 7, 2024 · 0482d3e · 0482d3e
1 parent 201184f
commit 0482d3e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 21 deletions.
diff --git a/sirepo/package_data/static/html/plot3d.html b/sirepo/package_data/static/html/plot3d.html
@@ -3,7 +3,7 @@
       <div><svg class="sr-plot" style="position: relative" ng-attr-width="{{ margin.left + noLabelPad + canvasSize.width + rightPanelWidth }}" ng-attr-height="{{ margin.top + margin.bottom + canvasSize.height + bottomPanelHeight }}">
         <g ng-attr-transform="translate({{ margin.left + noLabelPad }},{{ margin.top }})">
           <text class="focus-hint" text-anchor="start" x="0" y="-10" dy=".35em"></text>
-          <text class="focus-text" text-anchor="end" ng-attr-x="{{ canvasSize.width - focusTextCloseSpace }}" y="-10" dy=".35em"></text>
+          <text class="focus-text" text-anchor="start" ng-attr-x="0" y="-10" dy=".35em"></text>
           <text class="focus-text-close close" text-anchor="end" ng-attr-x="{{ canvasSize.width }}" y="-10" dy=".35em">&times;</text>
           <text class="main-title" ng-attr-x="{{ titleCenter }}" ng-attr-y="{{ -margin.top / 2 }}"></text>
           <text class="sub-title" ng-attr-x="{{ subTitleCenter }}" y="0" dy="-.5em"></text>

diff --git a/sirepo/package_data/static/js/sirepo-plotting.js b/sirepo/package_data/static/js/sirepo-plotting.js
@@ -2626,7 +2626,6 @@ SIREPO.app.directive('plot3d', function(appState, focusPointService, layoutServi
             $scope.subTitleCenter = 0;
             $scope.rightPanelWidth = $scope.bottomPanelHeight = 55;
             $scope.dataCleared = true;
-            $scope.focusTextCloseSpace = 18;
             $scope.focusPoints = [];
 
             var canvas, ctx, fullDomain, heatmap, lineOuts, prevDomain, scaleFunction, xyZoom;
@@ -2792,6 +2791,12 @@ SIREPO.app.directive('plot3d', function(appState, focusPointService, layoutServi
                 return pixels < MIN_PIXEL_RESOLUTION;
             }
 
+            function layoutFocusPointText() {
+                select('.focus-text-close').node().setAttribute(
+                    'x', select('.focus-text').node().getComputedTextLength() + 16,
+                );
+            }
+
             function refresh() {
                 if (! fullDomain) {
                     return;
@@ -2879,24 +2884,6 @@ SIREPO.app.directive('plot3d', function(appState, focusPointService, layoutServi
                 axes.y.zoom = axes.y.createZoom($scope);
             }
 
-            function resizefocusPointText() {
-                var maxSize = 14;
-                var minSize = 9;
-                var focusText = select('.focus-text');
-                var fs = focusText.style('font-size');
-
-                var currentFontSize = utilities.fontSizeFromString(fs);
-                var newFontSize = currentFontSize;
-
-                var textWidth = focusText.node().getComputedTextLength();
-                var pct = ($scope.canvasSize.width - $scope.focusTextCloseSpace) / textWidth;
-
-                newFontSize *= pct;
-                newFontSize = Math.max(minSize, newFontSize);
-                newFontSize = Math.min(maxSize, newFontSize);
-                focusText.style('font-size', newFontSize + 'px');
-            }
-
             function restoreDomain(scale, oldValue) {
                 var d = scale.domain();
                 d[0] = oldValue[0];
@@ -3073,7 +3060,7 @@ SIREPO.app.directive('plot3d', function(appState, focusPointService, layoutServi
                 }
                 select('.sub-title').style('display', 'none');
                 focusText.text(xyfText);
-                resizefocusPointText();
+                layoutFocusPointText();
             };
 
             $scope.showPlotSize = () => {