@flexem/fc-gui 3.0.0-alpha.185 → 3.0.0-alpha.187

package/elements/historical-curve/historical-curve.element.js

@@ -164,19 +164,6 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
                     item.textContent = updatedTimePeriods[i].name;
                 }
             });
-            // 文字更新后重新测量宽度，修正首次加载时文字为空导致宽度过小的问题
-            const prevDisplay = this.dropdownListEl.style.display;
-            const prevVisibility = this.dropdownListEl.style.visibility;
-            this.dropdownListEl.style.display = 'block';
-            this.dropdownListEl.style.visibility = 'hidden';
-            this.dropdownListEl.style.width = '';
-            const newWidth = this.dropdownListEl.offsetWidth;
-            this.dropdownListEl.style.display = prevDisplay;
-            this.dropdownListEl.style.visibility = prevVisibility;
-            this.dropdownListEl.style.width = newWidth + 'px';
-            if (this.dropdownTriggerEl) {
-                this.dropdownTriggerEl.style.width = newWidth + 'px';
-            }
         }
         // 更新触发按钮文字（显示当前选中项的最新语言文案）
         if (this.dropdownTriggerEl) {
@@ -671,9 +658,7 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
                 .style('padding', '4px 8px')
                 .style('cursor', 'pointer')
                 .style('white-space', 'nowrap')
-                .style('font-size', (parseFloat(this.displayOption.operationSelectFontSize) * scale) + 'px')
-                .style('line-height', (this.displayOption.operationAreaHeight * scale - 8) + 'px')
-                .style('min-height', (this.displayOption.operationAreaHeight * scale - 8) + 'px')
+                // 字号/行高在打开时动态根据 trigger 的视口实际尺寸设置，见 dropdownTrigger.on('click') 处理
                 .style('background', tp.key === Number(this.currentTimePeriod) ? '#1890ff' : 'transparent')
                 .style('color', tp.key === Number(this.currentTimePeriod) ? '#fff' : '#333')
                 .text(tp.name)
@@ -715,15 +700,6 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
                 this.reRenderElement(this.startTime, this.endTime, this.displayOption.dataLimit, HistoricalCurveTimeRange.BeginOpenEndOpen);
             });
         });
-        // 测量下拉列表最大宽度，让 trigger 和列表宽度一致
-        dropdownListEl.style.display = 'block';
-        dropdownListEl.style.visibility = 'hidden';
-        const listContentWidth = dropdownListEl.offsetWidth;
-        dropdownListEl.style.display = 'none';
-        dropdownListEl.style.visibility = '';
-        dropdownListEl.style.width = listContentWidth + 'px';
-        dropdownTrigger.node().style.width = listContentWidth + 'px';
-        dropdownTrigger.node().style.boxSizing = 'border-box';
         const hideDropdown = () => { dropdownListEl.style.display = 'none'; };
         dropdownTrigger.on('click', () => {
             const isVisible = dropdownListEl.style.display !== 'none';
@@ -733,10 +709,19 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             else {
                 const triggerNode = dropdownTrigger.node();
                 const triggerRect = triggerNode.getBoundingClientRect();
-                // 设置宽度至少和 trigger 一样宽
+                // trigger 在视口中的实际高度（已经过画布 transform 缩放），用于对齐下拉项尺寸。
+                // 不能在渲染时写死设计像素，因为下拉挂在 body 上不受画布 transform 影响。
+                const itemHeight = triggerRect.height;
+                // 字号取行高的 60%，保证文字在行内垂直居中且不溢出
+                const itemFontSize = Math.round(itemHeight * 0.6);
+                dropdownList.selectAll('.hc-dropdown-item')
+                    .style('font-size', itemFontSize + 'px')
+                    .style('line-height', itemHeight + 'px')
+                    .style('min-height', itemHeight + 'px');
+                // 设置宽度至少和 trigger 一样宽，先展示再测宽度
+                dropdownListEl.style.display = 'block';
                 dropdownListEl.style.minWidth = triggerRect.width + 'px';
                 dropdownListEl.style.left = triggerRect.left + 'px';
-                dropdownListEl.style.display = 'block';
                 const listHeight = dropdownListEl.offsetHeight;
                 const spaceBelow = window.innerHeight - triggerRect.bottom;
                 if (spaceBelow < listHeight) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"main": "bundles/fc-gui.umd.js",
-	"version": "3.0.0-alpha.185",
+	"version": "3.0.0-alpha.187",
 	"module": "public_api.js",
 	"typings": "public_api.d.ts",
 	"license": "UNLICENSED",