@flexem/fc-gui 3.0.0-alpha.18 → 3.0.0-alpha.181

package/elements/view-operation/view-operation.element.js

@@ -2,6 +2,7 @@ import { LOGGER_SERVICE_TOKEN } from '../../logger';
 import * as d3 from 'd3-selection';
 import { drag } from 'd3-drag';
 import { ViewOperationType } from '../../model';
+import { TextElementModal } from '../shared/text/text-element';
 import { ConditionalEnableElement } from '../base/conditional-enable-element';
 import { GraphStateElement } from '../shared/graph/graph-state-element';
 import { AlertModalComponent } from '../../modal/alert/alert-modal.component';
@@ -9,7 +10,7 @@ import { ConfirmOperationModalComponent } from '../../modal/confirm-operation/co
 import { VerifyPasswordModalComponent } from '../../modal/verify-password/verify-password-modal.component';
 import { ViewService } from '../../view/view.service';
 export class ViewOperationElement extends ConditionalEnableElement {
-    constructor(element, injector, modalService, variableCommunicator, variableStore, graphStore, permissionChecker, operationRecordService, securityChecker, localization, popupViewService, hostContainerId, el, signalRAppId) {
+    constructor(element, injector, modalService, variableCommunicator, variableStore, graphStore, permissionChecker, operationRecordService, securityChecker, localization, popupViewService, hostContainerId, el, signalRAppId, textLibraryService, languageService, guiContext) {
         super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
         this.modalService = modalService;
         this.graphStore = graphStore;
@@ -18,20 +19,27 @@ export class ViewOperationElement extends ConditionalEnableElement {
         this.popupViewService = popupViewService;
         this.hostContainerId = hostContainerId;
         this.el = el;
+        this.textLibraryService = textLibraryService;
+        this.languageService = languageService;
+        this.guiContext = guiContext;
         this.touchedScreenX = 0;
         this.touchedScreenY = 0;
         this.logger = injector.get(LOGGER_SERVICE_TOKEN);
         this.viewService = injector.get(ViewService);
         this.initElement();
+        this.subscribeLanguageChange();
     }
     initElement() {
         const width = this.model.size.width;
         const height = this.model.size.height;
+        // 在 initGraph 之前移除模板原有的 SVG <text>（改用 foreignObject 渲染，支持换行居中）
+        // 必须在 initGraph 前执行，否则会误删图形状态内部后续添加的文字节点
+        this.$element.find('text').remove();
         this.initGraph(width, height);
         this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', width).attr('height', height).attr('fill', 'transparent');
-        const $dateTimeText = this.$element.find('text').last();
-        const fontStyle = this.model.label.font.fontStyle;
-        $dateTimeText.css('font', fontStyle + ',msyh');
+        const font = this.getFontStyle();
+        this.textElementModal = new TextElementModal(this.getDisplayText(), font, width, height);
+        this.$element.append(this.textElementModal.Element);
         this.switchToState(0);
         this.rootElement.on('mousedown', () => {
             if (!this.isInitialized) {
@@ -169,7 +177,11 @@ export class ViewOperationElement extends ConditionalEnableElement {
     popView() {
         const viewIndex = this.model.viewIndex;
         if (null != viewIndex) {
-            this.popupViewService.popView(viewIndex, this.hostContainerId, this.el).subscribe(() => this.recordViewOperation(), error => this.logger.error(`ToggleView(${viewIndex}) failed. ${error}`));
+            const triggerRect = this.$element[0].getBoundingClientRect();
+            this.popupViewService.popView(viewIndex, this.hostContainerId, this.el, triggerRect).subscribe(() => this.recordViewOperation(), error => this.logger.error(`ToggleView(${viewIndex}) failed. ${error}`));
+            $(`#${this.hostContainerId} video`)
+                .addClass('video-hidden')
+                .css('visibility', 'hidden');
         }
         else {
             this.logger.error('[GUI]Toggle View:invalid view index');
@@ -177,6 +189,11 @@ export class ViewOperationElement extends ConditionalEnableElement {
     }
     closeView() {
         this.popupViewService.closeView();
+        if ($(`#${this.hostContainerId} > svg > svg`).length === 0) {
+            $(`#${this.hostContainerId} .video-hidden`)
+                .removeClass('video-hidden')
+                .css('visibility', 'visible');
+        }
         this.recordViewOperation();
     }
     moveView(movementX, movementY) {
@@ -191,4 +208,147 @@ export class ViewOperationElement extends ConditionalEnableElement {
             this.operationRecordService.record({ operationDescription: this.model.operationDescription });
         }
     }
+    /**
+     * 订阅语种变化事件
+     */
+    subscribeLanguageChange() {
+        if (this.guiContext && this.guiContext.languageChanged$) {
+            this.languageChangeSubscription = this.guiContext.languageChanged$.subscribe(() => {
+                this.updateTextContent();
+            });
+        }
+    }
+    /**
+     * 获取当前语种的字体样式
+     */
+    getFontStyle() {
+        const getTargetLanguage = () => {
+            var _a, _b, _c, _d, _e, _f;
+            const currentLanguageId = (_c = (_b = (_a = this.guiContext) === null || _a === void 0 ? void 0 : _a.getCurrentLanguageId) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : null;
+            const defaultLanguage = ((_d = this.languageService) === null || _d === void 0 ? void 0 : _d.getDefaultLanguage()) || 'zh-CN';
+            if (currentLanguageId === null || currentLanguageId === undefined) {
+                return defaultLanguage;
+            }
+            return ((_f = (_e = this.guiContext) === null || _e === void 0 ? void 0 : _e.getLanguageCultureById) === null || _f === void 0 ? void 0 : _f.call(_e, currentLanguageId)) || defaultLanguage;
+        };
+        const targetLanguage = getTargetLanguage();
+        if (this.model.fontStyleCultures && this.model.fontStyleCultures[targetLanguage]) {
+            const style = this.model.fontStyleCultures[targetLanguage];
+            const fs = style.fontStyle || '';
+            const isBold = fs.indexOf('bold') !== -1;
+            const isItalic = fs.indexOf('Italic') !== -1;
+            const parts = fs.split(' ');
+            const familyIndex = (isBold ? 1 : 0) + (isItalic ? 1 : 0) + 1;
+            const fontFamily = parts.length > familyIndex ? parts[familyIndex] : null;
+            return {
+                isUnderline: style.isUnderline,
+                isBold,
+                isItalic,
+                fontSize: style.fontSize,
+                fontFamily: fontFamily || 'msyh',
+                color: style.color
+            };
+        }
+        return Object.assign(Object.assign({}, this.model.label.font), { fontFamily: this.model.label.font.fontFamily || 'msyh' });
+    }
+    /**
+     * 更新文本内容（支持文本库和语种切换）
+     */
+    updateTextContent() {
+        if (this.textElementModal) {
+            const font = this.getFontStyle();
+            this.textElementModal.updateFont(font);
+            this.textElementModal.updateText(this.getDisplayText());
+        }
+    }
+    /**
+     * 获取显示文本
+     */
+    getDisplayText() {
+        var _a, _b, _c, _d, _e, _f;
+        // 检查是否使用文本库
+        if (this.model.textLibrary && this.model.textLibrary.labelType === 'textLibrary') {
+            const textLibraryId = this.model.textLibrary.selectedTextLibraryItem;
+            const textItem = this.model.textLibrary.selectedTextItem;
+            if (textLibraryId && textItem && this.textLibraryService) {
+                // 获取文本库数据
+                const textLibraryData = this.textLibraryService.getTextLibraryById(typeof textLibraryId === 'string' ? parseInt(textLibraryId, 10) : textLibraryId);
+                if (textLibraryData && textLibraryData.data) {
+                    // 查找对应的文本条目
+                    const textEntry = textLibraryData.data.find(entry => entry.key === textItem.toString());
+                    if (textEntry) {
+                        // 获取当前语种ID
+                        const currentLanguageId = (_c = (_b = (_a = this.guiContext) === null || _a === void 0 ? void 0 : _a.getCurrentLanguageId) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : null;
+                        // 确定要使用的语种代码（culture）
+                        let targetLanguage;
+                        const defaultLanguage = ((_d = this.languageService) === null || _d === void 0 ? void 0 : _d.getDefaultLanguage()) || 'zh-CN';
+                        if (currentLanguageId === null || currentLanguageId === undefined) {
+                            // 设备未设置当前语种，使用默认语种
+                            targetLanguage = defaultLanguage;
+                        }
+                        else {
+                            // 设备已设置当前语种，获取对应的语种代码
+                            const currentLanguage = (_f = (_e = this.guiContext) === null || _e === void 0 ? void 0 : _e.getLanguageCultureById) === null || _f === void 0 ? void 0 : _f.call(_e, currentLanguageId);
+                            if (currentLanguage) {
+                                targetLanguage = currentLanguage;
+                            }
+                            else {
+                                // 无法获取语种代码，使用默认语种
+                                targetLanguage = defaultLanguage;
+                            }
+                        }
+                        // 返回对应语种的文本
+                        if (textEntry.cultures && textEntry.cultures[targetLanguage]) {
+                            return textEntry.cultures[targetLanguage];
+                        }
+                        // 如果没有对应语种，返回空字符串
+                        return '';
+                    }
+                }
+            }
+            // 文本库配置但未找到数据，返回空字符串
+            return '';
+        }
+        // 处理自定义文本（支持多语种）
+        if (this.model.label) {
+            // 获取目标语种（公共逻辑）
+            const getTargetLanguage = () => {
+                var _a, _b, _c, _d, _e, _f;
+                const currentLanguageId = (_c = (_b = (_a = this.guiContext) === null || _a === void 0 ? void 0 : _a.getCurrentLanguageId) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : null;
+                const defaultLanguage = ((_d = this.languageService) === null || _d === void 0 ? void 0 : _d.getDefaultLanguage()) || 'zh-CN';
+                if (currentLanguageId === null || currentLanguageId === undefined) {
+                    return defaultLanguage;
+                }
+                return ((_f = (_e = this.guiContext) === null || _e === void 0 ? void 0 : _e.getLanguageCultureById) === null || _f === void 0 ? void 0 : _f.call(_e, currentLanguageId)) || defaultLanguage;
+            };
+            // 新格式：cultures 在 label 顶层
+            if (this.model.label.cultures && typeof this.model.label.cultures === 'object') {
+                return this.model.label.cultures[getTargetLanguage()] || '';
+            }
+            if (this.model.label.content) {
+                // 中间格式（兼容）：content 为 { cultures: {...} }
+                if (typeof this.model.label.content === 'object' && this.model.label.content.cultures) {
+                    return this.model.label.content.cultures[getTargetLanguage()] || '';
+                }
+                // 旧格式：字符串
+                if (typeof this.model.label.content === 'string') {
+                    return this.model.label.content;
+                }
+            }
+        }
+        return '';
+    }
+    /**
+     * 释放资源
+     */
+    dispose() {
+        // 取消语种变化订阅
+        if (this.languageChangeSubscription) {
+            this.languageChangeSubscription.unsubscribe();
+            this.languageChangeSubscription = undefined;
+        }
+        if (this.$element) {
+            this.$element.remove();
+        }
+    }
 }

package/elements/view-operation/view-operation.element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ViewOperationElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-enable-element","name":"ConditionalEnableElement","line":20,"character":42},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":31,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":31,"character":48},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":32,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":33,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":34,"character":23},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":35,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":36,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":37,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":38,"character":42},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":39,"character":22},{"__symbolic":"reference","module":"../../view/popup-view.service","name":"PopupViewService","line":40,"character":43},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":42,"character":29},{"__symbolic":"reference","name":"string"}]}],"initElement":[{"__symbolic":"method"}],"switchToState":[{"__symbolic":"method"}],"initGraph":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"executeViewOperation":[{"__symbolic":"method"}],"toggleView":[{"__symbolic":"method"}],"popView":[{"__symbolic":"method"}],"closeView":[{"__symbolic":"method"}],"moveView":[{"__symbolic":"method"}],"recordViewOperation":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ViewOperationElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-enable-element","name":"ConditionalEnableElement","line":23,"character":42},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":36,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":36,"character":48},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":37,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":38,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":39,"character":23},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":40,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":41,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":42,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":43,"character":42},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":44,"character":22},{"__symbolic":"reference","module":"../../view/popup-view.service","name":"PopupViewService","line":45,"character":43},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":47,"character":29},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"TextLibraryService","line":49,"character":46},{"__symbolic":"reference","module":"../../service","name":"LanguageService","line":50,"character":43},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":51,"character":38}]}],"initElement":[{"__symbolic":"method"}],"switchToState":[{"__symbolic":"method"}],"initGraph":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"executeViewOperation":[{"__symbolic":"method"}],"toggleView":[{"__symbolic":"method"}],"popView":[{"__symbolic":"method"}],"closeView":[{"__symbolic":"method"}],"moveView":[{"__symbolic":"method"}],"recordViewOperation":[{"__symbolic":"method"}],"subscribeLanguageChange":[{"__symbolic":"method"}],"getFontStyle":[{"__symbolic":"method"}],"updateTextContent":[{"__symbolic":"method"}],"getDisplayText":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}]}}}}]

package/elements/weather/weater-element.js

@@ -45,7 +45,6 @@ export class WeatherElement extends ConditionalDisplayElement {
     }
     handleGettingAddress() {
         this.handleUnusualCommon(this.localization.weatherNotAvailable);
-        setTimeout(() => this.initWeatherInfo(), 1000 * 60);
     }
     handleNoAddress() {
         this.handleUnusualCommon(this.localization.weatherNotAddress);

package/gui/gui-context.d.ts

@@ -1,16 +1,39 @@
 import { ConfigStore } from '../config';
 import { VariableCommunicator } from '../communication';
 import { SecurityChecker } from '../security';
-import { VideoService, WeatherService, PermissionChecker, OperationRecordService } from '../service';
+import { VideoService, WeatherService, PermissionChecker, OperationRecordService, ReleasedVariableService, TextLibraryService, LanguageService, SystemTextLibraryService } from '../service';
+import { Subject } from 'rxjs';
 export interface GuiContext {
     readonly configStore: ConfigStore;
     readonly variableCommunicator: VariableCommunicator;
     readonly permissionChecker: PermissionChecker;
     readonly operationRecordService: OperationRecordService;
+    readonly releasedVariableService: ReleasedVariableService;
     readonly securityChecker: SecurityChecker;
     readonly videoService: VideoService;
     readonly weatherService: WeatherService;
+    readonly textLibraryService?: TextLibraryService;
+    readonly languageService?: LanguageService;
+    readonly systemTextLibraryService?: SystemTextLibraryService;
     readonly configureViewId?: number;
     readonly configureViewCode?: string;
-    dispose(): any;
+    /**
+     * 模拟模式下由后端 GetVariablesForDesigner 查询出的"有效变量"名集合
+     * (IncludeCalculationVariable=true, HasRefVariable=true，即绑定了 manager 的变量)。
+     * 运行模式不填充，元件会回退到 variableStore.getAllVariableNames()。
+     */
+    readonly validVariableNames?: string[];
+    readonly languageChanged$?: Subject<number | null>;
+    getCurrentLanguageId?(): number | null;
+    getDefaultLanguageId?(): number;
+    getLanguageCultureById?(languageId: number | null): string | null;
+    updateCurrentLanguageId?(languageId: number | null): Promise<void>;
+    showCustomTimeRangeModal?(config: {
+        startTime?: Date;
+        endTime?: Date;
+    }): Promise<{
+        startTime: Date;
+        endTime: Date;
+    } | null>;
+    dispose(): void;
 }

package/gui/gui-host.d.ts

@@ -13,7 +13,7 @@ export declare class GuiHost implements Disposable {
     readonly el: ElementRef;
     private isLoaded;
     private currentView;
-    private currentViewIndex;
+    currentViewIndex: number;
     private containerEl;
     private currentViewSize;
     private currentViewReiszeMode;

package/gui/gui-view.d.ts

@@ -12,6 +12,8 @@ export declare class GuiView implements PopupViewService {
     private readonly bsModalService;
     private readonly context;
     private readonly parentView?;
+    /** showShadow() 给阴影留白，内容整体右下偏移的量，"按钮附近"定位需要据此修正才能让可见内容与按钮对齐 */
+    private static readonly SHADOW_INSET;
     get element(): HTMLElement;
     get rawWidth(): number;
     get rawHeight(): number;
@@ -21,7 +23,10 @@ export declare class GuiView implements PopupViewService {
     private mainElement;
     private muskElement;
     private openVariableStatesSubscription;
-    private openVariablesSubscription;
+    private requestVirtualDeviceState;
+    private virtualDeviceStatesChanged;
+    private openVariablesSubscriptions;
+    private openedVariableNamesForValues;
     private openedVariableNames;
     private perViewVariableCommunicator;
     private svgRootClass;
@@ -31,7 +36,19 @@ export declare class GuiView implements PopupViewService {
     resize(size: Size, resizeMode: ViewResizeMode, svgRootClass: string): void;
     load(config: ViewModel, guiOptions: GuiOptions): void;
     loadElementState(): void;
-    popView(viewIndex: number, hostContainerId: string, el: ElementRef): Observable<void>;
+    popView(viewIndex: number, hostContainerId: string, el: ElementRef, triggerRect?: DOMRect): Observable<void>;
+    /**
+     * 把屏幕像素矩形（如按钮的 getBoundingClientRect）换算为当前画面 SVG 坐标系下的矩形。
+     * 用 getScreenCTM 而不是简单的宽高比换算，因为画面容器宽高比与 rawWidth/rawHeight 不一致时
+     * SVG 会按 preserveAspectRatio 留白（letterbox），线性比例换算会有偏差。
+     */
+    private toLocalRect;
+    /**
+     * 按钮附近：按钮与弹出画面之间留缝隙，两侧都放得下时默认放右侧，放不下时放在放得下的一侧；
+     * 竖直方向默认与按钮顶部对齐，下方放不下时改为与按钮底部对齐；
+     * 左右两侧都放不下（弹窗比画面还宽）时直接退化为画面居中，不再跟随按钮
+     */
+    private getNearButtonPosition;
     closeView(): void;
     moveView(movementX: number, movementY: number): void;
     showMusk(): void;

package/gui/gui-view.js

@@ -2,13 +2,14 @@ import { LOGGER_SERVICE_TOKEN } from '../logger';
 import * as d3 from 'd3-selection';
 import { each, forEach } from 'lodash';
 import { map } from 'rxjs/operators';
-import { VariableStateEnum } from '../communication';
+import { VariableStateEnum, VariableState } from '../communication';
 import { MainElement } from '../elements/main-element';
 import { PerViewVariableCommunicator } from '../elements/per-view-variable-communicator';
 import { ViewPopupBackdropType, ViewPopupLocationType } from '../model';
 import { ViewResizeMode, DisplayMode, GlobalSettings } from '../settings';
 import { ConfigIsEmptyError } from '../shared';
 import { Guid } from '../utils/guid';
+import { GuiFeatureConfig } from '../config';
 export class GuiView {
     constructor(injector, bsModalService, context, parentView) {
         this.injector = injector;
@@ -16,6 +17,8 @@ export class GuiView {
         this.context = context;
         this.parentView = parentView;
         this.viewId = Guid.newGuid().toString('n');
+        this.openVariablesSubscriptions = [];
+        this.openedVariableNamesForValues = new Set();
         this.logger = injector.get(LOGGER_SERVICE_TOKEN);
         this.childViews = new Array();
         if (parentView) {
@@ -61,6 +64,7 @@ export class GuiView {
         this.logger.debug('[GUI] View loaded.');
     }
     loadElementState() {
+        var _a, _b, _c;
         if (!this.mainElement) {
             return;
         }
@@ -71,16 +75,64 @@ export class GuiView {
         if (this.openVariableStatesSubscription) {
             this.openVariableStatesSubscription.unsubscribe();
         }
+        this.openVariablesSubscriptions.forEach(s => s.unsubscribe());
+        this.openVariablesSubscriptions = [];
+        this.openedVariableNamesForValues.clear();
         this.openedVariableNames = this.mainElement.getVariableNames();
-        if (this.openedVariableNames.length === 0) {
+        // 分离系统变量和普通变量
+        const systemVariables = [];
+        const normalVariablesForState = [];
+        this.openedVariableNames.forEach(variableName => {
+            if (variableName === '当前语种ID') {
+                // 系统变量直接订阅，不需要等待状态
+                systemVariables.push(variableName);
+            }
+            else {
+                normalVariablesForState.push(variableName);
+            }
+        });
+        // 立即订阅系统变量
+        if (systemVariables.length > 0) {
+            this.normalOpenedVariableNames(systemVariables);
+        }
+        if (normalVariablesForState.indexOf('设备状态') !== -1) {
+            if (this.requestVirtualDeviceState) {
+                this.requestVirtualDeviceState.unsubscribe();
+            }
+            if (this.requestVirtualDeviceState) {
+                this.requestVirtualDeviceState.unsubscribe();
+            }
+            this.normalOpenedVariableNames(['设备状态']);
+            this.requestVirtualDeviceState =
+                this.perViewVariableCommunicator.requestVirtualDeviceState().subscribe({
+                    complete: () => { }
+                });
+            normalVariablesForState.splice(normalVariablesForState.indexOf('设备状态'), 1);
+        }
+        const validVariableNames = (_a = this.context.validVariableNames) !== null && _a !== void 0 ? _a : (_c = (_b = this.context.configStore.variableStore).getAllVariableNames) === null || _c === void 0 ? void 0 : _c.call(_b);
+        if (validVariableNames) {
+            const invalidVariables = normalVariablesForState.filter(name => !validVariableNames.includes(name));
+            if (invalidVariables.length > 0) {
+                const unbindStates = invalidVariables.map(name => new VariableState(name, VariableStateEnum.InvalidMonitor));
+                this.mainElement.reportVariableStates(unbindStates);
+                invalidVariables.forEach(name => {
+                    const idx = normalVariablesForState.indexOf(name);
+                    if (idx !== -1) {
+                        normalVariablesForState.splice(idx, 1);
+                    }
+                });
+            }
+        }
+        if (normalVariablesForState.length === 0) {
             return;
         }
         this.openVariableStatesSubscription =
-            this.perViewVariableCommunicator.subscribeVariableStates(this.openedVariableNames).subscribe((states) => {
+            this.perViewVariableCommunicator.subscribeVariableStates(normalVariablesForState).subscribe((states) => {
                 this.mainElement.reportVariableStates(states);
                 const normalVariableNames = [];
                 each(states, v => {
-                    if (v.state === VariableStateEnum.Normal && normalVariableNames.indexOf(v.variableName) === -1) {
+                    if ((v.state === VariableStateEnum.Normal || (GuiFeatureConfig.isOfflineDisplayEnabled && v.state === VariableStateEnum.Offline))
+                        && normalVariableNames.indexOf(v.variableName) === -1) {
                         normalVariableNames.push(v.variableName);
                     }
                 });
@@ -89,7 +141,7 @@ export class GuiView {
                 }
             });
     }
-    popView(viewIndex, hostContainerId, el) {
+    popView(viewIndex, hostContainerId, el, triggerRect) {
         return this.context.configStore.viewStore.getViewConfig(viewIndex).pipe(map(view => {
             if (!view.config || !view.config.length) {
                 throw new ConfigIsEmptyError();
@@ -110,6 +162,10 @@ export class GuiView {
                 x = settings.popup.location.x;
                 y = settings.popup.location.y;
             }
+            else if (settings.popup.locationType === ViewPopupLocationType.NearButton && triggerRect) {
+                const hasShadow = settings.popup.backdropType === ViewPopupBackdropType.Shadow && !this.isMobileMode;
+                ({ x, y } = this.getNearButtonPosition(popView, triggerRect, hasShadow));
+            }
             else {
                 x = (this.rawWidth - popView.rawWidth) / 2;
                 y = (this.rawHeight - popView.rawHeight) / 2;
@@ -129,6 +185,73 @@ export class GuiView {
             this.element.appendChild(popView.element);
         }));
     }
+    /**
+     * 把屏幕像素矩形（如按钮的 getBoundingClientRect）换算为当前画面 SVG 坐标系下的矩形。
+     * 用 getScreenCTM 而不是简单的宽高比换算，因为画面容器宽高比与 rawWidth/rawHeight 不一致时
+     * SVG 会按 preserveAspectRatio 留白（letterbox），线性比例换算会有偏差。
+     */
+    toLocalRect(rect) {
+        const svgRoot = this.element;
+        const ctm = svgRoot.getScreenCTM && svgRoot.getScreenCTM();
+        if (ctm) {
+            const inverse = ctm.inverse();
+            const toLocal = (clientX, clientY) => {
+                const pt = svgRoot.createSVGPoint();
+                pt.x = clientX;
+                pt.y = clientY;
+                return pt.matrixTransform(inverse);
+            };
+            const topLeft = toLocal(rect.left, rect.top);
+            const bottomRight = toLocal(rect.right, rect.bottom);
+            return {
+                x: topLeft.x,
+                y: topLeft.y,
+                width: bottomRight.x - topLeft.x,
+                height: bottomRight.y - topLeft.y
+            };
+        }
+        const viewRect = this.element.getBoundingClientRect();
+        const scaleX = viewRect.width ? this.rawWidth / viewRect.width : 1;
+        const scaleY = viewRect.height ? this.rawHeight / viewRect.height : 1;
+        return {
+            x: (rect.left - viewRect.left) * scaleX,
+            y: (rect.top - viewRect.top) * scaleY,
+            width: rect.width * scaleX,
+            height: rect.height * scaleY
+        };
+    }
+    /**
+     * 按钮附近：按钮与弹出画面之间留缝隙，两侧都放得下时默认放右侧，放不下时放在放得下的一侧；
+     * 竖直方向默认与按钮顶部对齐，下方放不下时改为与按钮底部对齐；
+     * 左右两侧都放不下（弹窗比画面还宽）时直接退化为画面居中，不再跟随按钮
+     */
+    getNearButtonPosition(popView, triggerRect, hasShadow) {
+        const gap = 20;
+        const { x: buttonX, y: buttonY, width: buttonWidth, height: buttonHeight } = this.toLocalRect(triggerRect);
+        const rightX = buttonX + buttonWidth + gap;
+        const leftX = buttonX - gap - popView.rawWidth;
+        const fitsRight = rightX + popView.rawWidth <= this.rawWidth;
+        const fitsLeft = leftX >= 0;
+        let x;
+        let y;
+        if (!fitsRight && !fitsLeft) {
+            x = (this.rawWidth - popView.rawWidth) / 2;
+            y = (this.rawHeight - popView.rawHeight) / 2;
+        }
+        else {
+            x = fitsRight ? rightX : leftX;
+            const fitsBelow = buttonY + popView.rawHeight <= this.rawHeight;
+            y = fitsBelow ? buttonY : buttonY + buttonHeight - popView.rawHeight;
+            if (hasShadow) {
+                // 阴影会把可见内容整体右下偏移 SHADOW_INSET，这里反向补偏移让可见内容而不是容器本身对齐按钮
+                x -= GuiView.SHADOW_INSET;
+                y -= GuiView.SHADOW_INSET;
+            }
+        }
+        x = Math.max(0, Math.min(x, this.rawWidth - popView.rawWidth));
+        y = Math.max(0, Math.min(y, this.rawHeight - popView.rawHeight));
+        return { x, y };
+    }
     closeView() {
         if (!this.parentView) {
             return;
@@ -166,10 +289,11 @@ export class GuiView {
         if (!container) {
             return;
         }
+        const inset = GuiView.SHADOW_INSET;
         container.setAttribute('filter', `url(#${filterId})`);
-        container.setAttribute('x', '6');
-        container.setAttribute('y', '6');
-        $(this.element).children('g').attr('transform', 'matrix(1, 0, 0, 1, 6, 6)');
+        container.setAttribute('x', String(inset));
+        container.setAttribute('y', String(inset));
+        $(this.element).children('g').attr('transform', `matrix(1, 0, 0, 1, ${inset}, ${inset})`);
     }
     hideMusk() {
         if (this.muskElement) {
@@ -181,8 +305,14 @@ export class GuiView {
         if (this.openVariableStatesSubscription) {
             this.openVariableStatesSubscription.unsubscribe();
         }
-        if (this.openVariablesSubscription) {
-            this.openVariablesSubscription.unsubscribe();
+        if (this.requestVirtualDeviceState) {
+            this.requestVirtualDeviceState.unsubscribe();
+        }
+        if (this.virtualDeviceStatesChanged) {
+            this.virtualDeviceStatesChanged.unsubscribe();
+        }
+        if (this.openVariablesSubscriptions) {
+            this.openVariablesSubscriptions.forEach(s => s.unsubscribe());
         }
         if (this.perViewVariableCommunicator) {
             this.perViewVariableCommunicator.dispose();
@@ -196,9 +326,14 @@ export class GuiView {
         this.logger.debug('[GUI] View disposed.');
     }
     normalOpenedVariableNames(normalVariableNames) {
-        if (normalVariableNames.length > 0) {
-            this.openVariablesSubscription = this.perViewVariableCommunicator.openVariables(normalVariableNames, this.signalRAppId)
+        const newVariables = normalVariableNames.filter(v => !this.openedVariableNamesForValues.has(v));
+        if (newVariables.length > 0) {
+            newVariables.forEach(v => this.openedVariableNamesForValues.add(v));
+            const sub = this.perViewVariableCommunicator.openVariables(newVariables, this.signalRAppId)
                 .subscribe(variableValues => this.mainElement.reportVariableValues(variableValues));
+            this.openVariablesSubscriptions.push(sub);
         }
     }
 }
+/** showShadow() 给阴影留白，内容整体右下偏移的量，"按钮附近"定位需要据此修正才能让可见内容与按钮对齐 */
+GuiView.SHADOW_INSET = 5;

package/gui/gui-view.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GuiView":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":47,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":48,"character":41},{"__symbolic":"reference","module":"./gui-context","name":"GuiContext","line":49,"character":34},{"__symbolic":"reference","name":"GuiView"}]}],"resize":[{"__symbolic":"method"}],"load":[{"__symbolic":"method"}],"loadElementState":[{"__symbolic":"method"}],"popView":[{"__symbolic":"method"}],"closeView":[{"__symbolic":"method"}],"moveView":[{"__symbolic":"method"}],"showMusk":[{"__symbolic":"method"}],"showShadow":[{"__symbolic":"method"}],"hideMusk":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"normalOpenedVariableNames":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GuiView":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":54,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":55,"character":41},{"__symbolic":"reference","module":"./gui-context","name":"GuiContext","line":56,"character":34},{"__symbolic":"reference","name":"GuiView"}]}],"resize":[{"__symbolic":"method"}],"load":[{"__symbolic":"method"}],"loadElementState":[{"__symbolic":"method"}],"popView":[{"__symbolic":"method"}],"toLocalRect":[{"__symbolic":"method"}],"getNearButtonPosition":[{"__symbolic":"method"}],"closeView":[{"__symbolic":"method"}],"moveView":[{"__symbolic":"method"}],"showMusk":[{"__symbolic":"method"}],"showShadow":[{"__symbolic":"method"}],"hideMusk":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"normalOpenedVariableNames":[{"__symbolic":"method"}]},"statics":{"SHADOW_INSET":5}}}}]

package/gui/gui.component.d.ts

@@ -24,10 +24,12 @@ export declare class GuiComponent implements OnChanges, OnDestroy {
     initHeight: number;
     lastScale: number;
     isMobileMode: boolean;
+    hostContainerId: string;
     private $svg;
     private host;
     private get viewResizeMode();
     private readonly globalSettings;
+    private readonly viewService;
     constructor(el: ElementRef, localization: Localization, injector: Injector, bsModalService: BsModalService);
     ngOnChanges(changes: {
         [propKey: string]: SimpleChange;
@@ -39,4 +41,5 @@ export declare class GuiComponent implements OnChanges, OnDestroy {
     private onSizeChanged;
     private onResizeModeChanged;
     private onDisplayModeChanged;
+    refreshCurrentPage(): boolean;
 }