@flexem/fc-gui 3.0.0-alpha.131 → 3.0.0-alpha.133

package/elements/scroll-alarm/scroll-alarm-element.js

@@ -37,8 +37,8 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         this.variableCommunicator = variableCommunicator;
         this.autoCycle = (_b = (_a = this.model.generalSetting) === null || _a === void 0 ? void 0 : _a.autoCycle) !== null && _b !== void 0 ? _b : true;
         this.maxResultCount = (_d = (_c = this.model.generalSetting) === null || _c === void 0 ? void 0 : _c.pageSize) !== null && _d !== void 0 ? _d : 500;
-        // 检测是否是模拟运行模式（通过检查 alarmsStore 的类型）
-        this.isSimulateMode = alarmsStore && alarmsStore.constructor.name === 'SimulateAlarmDataStore';
+        // 检测是否是模拟运行模式（通过检查 alarmsStore 的标记属性，不受代码混淆影响）
+        this.isSimulateMode = alarmsStore && alarmsStore.isSimulationStore === true;
         if (this.model.filterSetting && this.model.filterSetting.detailsData && this.model.filterSetting.detailsData.length > 0) {
             this.alarmNames = this.model.filterSetting.detailsData.map(item => item.name);
             // 如果是模拟运行模式，使用静态显示逻辑（类似设计态）
@@ -286,7 +286,6 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         this.allAlarmsContainer = document.createElement('div');
         this.allAlarmsContainer.style.cssText = `
             position: absolute;
-            left: ${elementWidth}px;
             top: 50%;
             transform: translateY(-50%);
             display: flex;
@@ -296,6 +295,7 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         this.container.appendChild(this.allAlarmsContainer);
         // 设置初始位置为容器宽度，让内容从右侧滚入
         this.currentLeft = elementWidth;
+        this.allAlarmsContainer.style.left = `${elementWidth}px`;
         // 添加鼠标悬停暂停和恢复滚动功能
         this.container.addEventListener('mouseenter', () => this.pauseScroll());
         this.container.addEventListener('mouseleave', () => this.resumeScroll());
@@ -604,27 +604,28 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         }
         // 设置文本内容
         textContainer.textContent = textParts.join(' ');
-        this.allAlarmsContainer.appendChild(textContainer);
-        // 计算文本宽度
-        const textWidth = textContainer.offsetWidth;
-        this.totalWidth = textWidth;
-        this.pageWidths.push(textWidth);
-        // 设置初始位置为容器宽度（从右侧滚入）
-        this.currentLeft = this.container.clientWidth;
+        // 使用配置的宽度，而不是 clientWidth（因为DOM可能还没渲染完成）
+        const containerWidth = this.model.size.width;
+        // 先设置容器位置到右侧（屏幕外），这样添加元素时不会闪烁
+        this.currentLeft = containerWidth;
         this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
-        // 根据 autoCycle 配置决定是否启动滚动
-        if (this.autoCycle) {
+        // 添加到DOM以便计算宽度
+        this.allAlarmsContainer.appendChild(textContainer);
+        // 使用 setTimeout 确保 DOM 渲染完成后再计算宽度
+        setTimeout(() => {
+            // 计算文本宽度
+            const textWidth = textContainer.offsetWidth;
+            this.totalWidth = textWidth;
+            this.pageWidths.push(textWidth);
+            // 启动滚动（autoCycle 只控制是否循环，不控制是否滚动）
             this.initStaticScrolling();
-        }
+        }, 50);
     }
     /**
      * 模拟运行时的静态滚动逻辑
      */
     initStaticScrolling() {
         clearInterval(this.scrollIntervalId);
-        // 确保初始位置在容器右侧
-        this.currentLeft = this.container.clientWidth;
-        this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
         const scrollInterval = 100;
         // 延迟启动滚动确保内容渲染完成
         setTimeout(() => {
@@ -644,11 +645,17 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         const scrollStep = 2;
         // 更新位置 - 从右往左滚动
         this.currentLeft -= scrollStep;
-        // 当内容完全滚出容器左侧时
-        if (this.currentLeft + this.totalWidth < 0) {
+        // 更新显示位置
+        this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
+        // 当内容完全滚出容器左侧时（内容右边缘完全移出容器左边缘）
+        // currentLeft + totalWidth 表示内容右边缘的位置
+        // 当这个值 <= 0 时，表示内容右边缘已经到达或超过容器左边缘，内容完全不可见
+        const rightEdge = this.currentLeft + this.totalWidth;
+        if (rightEdge <= 0) {
             if (this.autoCycle) {
-                // 自动循环模式：重置到容器右侧
-                this.currentLeft = this.container.clientWidth;
+                // 自动循环模式：重置到容器右侧（使用配置宽度）
+                this.currentLeft = this.model.size.width;
+                this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
             }
             else {
                 // 非循环模式：停止滚动
@@ -657,7 +664,5 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
                 return;
             }
         }
-        // 更新显示位置
-        this.allAlarmsContainer.style.left = `${this.currentLeft}px`;
     }
 }

package/package.json

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