@flexem/fc-gui 3.0.0-alpha.180 → 3.0.0-alpha.182

package/elements/character-display/character-display-element.d.ts

@@ -4,7 +4,7 @@ import { VariableCommunicator } from '../../communication';
 import { GraphStore, VariableStore } from '../../config';
 import { Localization } from '../../localization';
 import { CharacterDisplay } from '../../model';
-import { OperationRecordService, PermissionChecker } from '../../service';
+import { OperationRecordService, PermissionChecker, ReleasedVariableService } from '../../service';
 import { ReadableElement } from '../base/readable-element';
 import { SecurityChecker } from '../../security';
 export declare class CharacterDisplayElement extends ReadableElement {
@@ -12,12 +12,13 @@ export declare class CharacterDisplayElement extends ReadableElement {
     private readonly graphStore;
     private readonly operationRecordService;
     private readonly securityChecker;
+    private readonly releasedVariableService?;
     protected readonly model: CharacterDisplay;
     private readonly accessPermissionService;
     private displayValue;
     private graphs;
     private readonly logger;
-    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, variableCommunicator: VariableCommunicator, graphStore: GraphStore, permissionChecker: PermissionChecker, operationRecordService: OperationRecordService, securityChecker: SecurityChecker, variableStore: VariableStore, localization: Localization, signalRAppId: string);
+    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, variableCommunicator: VariableCommunicator, graphStore: GraphStore, permissionChecker: PermissionChecker, operationRecordService: OperationRecordService, securityChecker: SecurityChecker, variableStore: VariableStore, localization: Localization, signalRAppId: string, releasedVariableService?: ReleasedVariableService);
     get readVariableName(): string;
     get writeVariableName(): string;
     protected updateVariableValue(value: string): void;
@@ -32,4 +33,13 @@ export declare class CharacterDisplayElement extends ReadableElement {
     private doWriteCharacterValue;
     private recordOperation;
     private changeGraph;
+    /**
+     * 提供元件尺寸信息用于状态图标缩放
+     */
+    protected getElementSizeForIconScale(): {
+        width: number;
+        height: number;
+        initWidth?: number;
+        initHeight?: number;
+    } | null;
 }

package/elements/character-display/character-display-element.js

@@ -12,12 +12,13 @@ import { VerifyPasswordModalComponent } from '../../modal/verify-password/verify
 import { VariableUtil } from '../../utils/variable-util';
 import { TextElementModal } from '../shared/text/text-element';
 export class CharacterDisplayElement extends ReadableElement {
-    constructor(element, injector, modalService, variableCommunicator, graphStore, permissionChecker, operationRecordService, securityChecker, variableStore, localization, signalRAppId) {
+    constructor(element, injector, modalService, variableCommunicator, graphStore, permissionChecker, operationRecordService, securityChecker, variableStore, localization, signalRAppId, releasedVariableService) {
         super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
         this.modalService = modalService;
         this.graphStore = graphStore;
         this.operationRecordService = operationRecordService;
         this.securityChecker = securityChecker;
+        this.releasedVariableService = releasedVariableService;
         this.displayValue = '';
         this.graphs = new Map();
         this.logger = injector.get(LOGGER_SERVICE_TOKEN);
@@ -247,7 +248,10 @@ export class CharacterDisplayElement extends ReadableElement {
     }
     checkElementPassword() {
         if (this.model.enablePassword) {
-            const modalRef = this.modalService.show(VerifyPasswordModalComponent, { initialState: { securityChecker: this.securityChecker }, backdrop: 'static', class: 'gui-modal-dialog-position', animated: false });
+            const modalRef = this.modalService.show(VerifyPasswordModalComponent, {
+                initialState: { securityChecker: this.securityChecker, releasedVariableService: this.releasedVariableService },
+                backdrop: 'static', class: 'gui-modal-dialog-position', animated: false
+            });
             const onClosedSub = modalRef.content.onClosed.subscribe(result => {
                 modalRef.hide();
                 onClosedSub.unsubscribe();
@@ -264,7 +268,15 @@ export class CharacterDisplayElement extends ReadableElement {
         if (null == this.writeVariableName) {
             return;
         }
-        const args = new WriteCharacterModalArgs(this.writeVariableName, this.model.isPassword, this.model.charCount, this.displayValue);
+        // 优先使用接口返回的实时字符长度，如果获取不到则使用页面配置中的长度
+        let charCount = this.model.charCount;
+        if (this.variableStore.getCharCountByVariableName) {
+            const runtimeCharCount = this.variableStore.getCharCountByVariableName(this.writeVariableName);
+            if (runtimeCharCount !== undefined) {
+                charCount = runtimeCharCount;
+            }
+        }
+        const args = new WriteCharacterModalArgs(this.writeVariableName, this.model.isPassword, charCount, this.displayValue, this.releasedVariableService);
         const modalRef = this.modalService.show(WriteCharacterModalComponent, {
             initialState: { args: args }, backdrop: 'static', class: 'gui-modal-dialog-position gui-modal-write', animated: false
         });
@@ -309,4 +321,19 @@ export class CharacterDisplayElement extends ReadableElement {
             this.rootElement.select('image').attr('xlink:href', null);
         }
     }
+    /**
+     * 提供元件尺寸信息用于状态图标缩放
+     */
+    getElementSizeForIconScale() {
+        var _a, _b;
+        if (this.model.size) {
+            return {
+                width: this.model.size.width,
+                height: this.model.size.height,
+                initWidth: (_a = this.model.initSize) === null || _a === void 0 ? void 0 : _a.width,
+                initHeight: (_b = this.model.initSize) === null || _b === void 0 ? void 0 : _b.height
+            };
+        }
+        return null;
+    }
 }

package/elements/character-display/character-display-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"CharacterDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/readable-element","name":"ReadableElement","line":20,"character":45},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":29,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":29,"character":48},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":30,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":31,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":32,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":33,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":34,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":35,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":36,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":37,"character":22},{"__symbolic":"reference","name":"string"}]}],"updateVariableValue":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"updateDisplayValue":[{"__symbolic":"method"}],"getVariableValueText":[{"__symbolic":"method"}],"characterDisplayText":[{"__symbolic":"method"}],"initElement":[{"__symbolic":"method"}],"initVariableText":[{"__symbolic":"method"}],"initClickEvent":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"doWriteCharacterValue":[{"__symbolic":"method"}],"recordOperation":[{"__symbolic":"method"}],"changeGraph":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"CharacterDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/readable-element","name":"ReadableElement","line":20,"character":45},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":29,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":29,"character":48},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":30,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":31,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":32,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":33,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":34,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":35,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":36,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":37,"character":22},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"ReleasedVariableService","line":39,"character":51}]}],"updateVariableValue":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"updateDisplayValue":[{"__symbolic":"method"}],"getVariableValueText":[{"__symbolic":"method"}],"characterDisplayText":[{"__symbolic":"method"}],"initElement":[{"__symbolic":"method"}],"initVariableText":[{"__symbolic":"method"}],"initClickEvent":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"doWriteCharacterValue":[{"__symbolic":"method"}],"recordOperation":[{"__symbolic":"method"}],"changeGraph":[{"__symbolic":"method"}],"getElementSizeForIconScale":[{"__symbolic":"method"}]}}}}]

package/elements/historical-curve/historical-curve.element.d.ts

@@ -51,6 +51,7 @@ export declare class HistoricalCurveElement extends ConditionalDisplayElement {
     private _fullscreenChangeHandler;
     private _resizeHideHandler;
     constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, historyDataStore: HistoryDataStore, signalRAppId: string, systemTextLibraryService?: SystemTextLibraryService, languageService?: LanguageService, guiContext?: GuiContext, releasedVariableService?: ReleasedVariableService);
+    private getIconScale;
     dispose(): void;
     private initKeyboardListener;
     private setNeedResize;

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

@@ -72,6 +72,16 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
         // 订阅语种变化事件 和 文本库缓存更新事件
         this.subscribeLanguageChange();
     }
+    getIconScale() {
+        const initSize = this.model.displaySetting.initSize;
+        const size = this.model.displaySetting.size;
+        if (!initSize || !initSize.width || !initSize.height) {
+            return 1;
+        }
+        const scaleX = size.width / initSize.width;
+        const scaleY = size.height / initSize.height;
+        return Math.min(scaleX, scaleY);
+    }
     dispose() {
         clearInterval(this.refreshIntervalId);
         if (this.chartElement) {
@@ -337,7 +347,10 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
     }
     renderChart(result) {
         const chartWidth = this.model.displaySetting.size.width;
-        const chartHeight = this.model.displaySetting.size.height - this.displayOption.operationAreaHeight - this.displayOption.operationAreaMarginTop;
+        const scale = this.getIconScale();
+        // 图表主体与底部操作区之间的预留高度，需要与操作区渲染时使用的同一个 scale 保持一致，
+        // 否则图表按未缩放高度占满后，缩放后的操作区会超出元件整体高度
+        const chartHeight = this.model.displaySetting.size.height - (this.displayOption.operationAreaHeight + this.displayOption.operationAreaMarginTop) * scale;
         const data = new Array();
         each(this.model.dataSetting.channels, (channel, key) => {
             const values = new Array();
@@ -347,10 +360,10 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
         this.data = data;
         let chart;
         if (this.model.displaySetting.curveType === CurveType.BarGroup || this.model.displaySetting.curveType === CurveType.BarStack) {
-            chart = this.getMultiBarWithFocusChart(chartWidth, chartHeight, data);
+            chart = this.getMultiBarWithFocusChart(chartWidth, chartHeight, data, scale);
         }
         else {
-            chart = this.getLineChart(chartWidth, chartHeight, data);
+            chart = this.getLineChart(chartWidth, chartHeight, data, scale);
         }
         // 设置 tooltip 自动隐藏逻辑
         this.setupTooltipAutoHide(chart);
@@ -400,7 +413,7 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             console.log(e);
         }
     }
-    getLineChart(chartWidth, chartHeight, data) {
+    getLineChart(chartWidth, chartHeight, data, scale = 1) {
         const chart = nv.models.lineChart().showLegend(true)
             .margin({ top: 0, bottom: 0, left: this.displayOption.marginLeft, right: this.displayOption.marginRight })
             .noData(this.localization.chartNoData);
@@ -414,7 +427,7 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             chart.focus.showXAxis(false);
         }
         this.renderCommonProperty(chart, chartWidth, chartHeight, data);
-        this.renderOperationArea(chartWidth, chartHeight);
+        this.renderOperationArea(chartWidth, chartHeight, scale);
         this.initPoint();
         chart.legend.dispatch.on('legendClick', () => {
             setTimeout(() => {
@@ -430,7 +443,7 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
         });
         return chart;
     }
-    getMultiBarWithFocusChart(chartWidth, chartHeight, data) {
+    getMultiBarWithFocusChart(chartWidth, chartHeight, data, scale = 1) {
         const chart = nv.models.multiBarWithFocusChart()
             .margin({
             top: 0, bottom: 0, left: this.displayOption.marginLeft, right: this.displayOption.marginRight
@@ -453,7 +466,7 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
         }
         chart.xAxis.tickFormat(d => this.timeFormat(d, '%x %X'));
         this.renderCommonProperty(chart, chartWidth, chartHeight, data);
-        this.renderOperationArea(chartWidth, chartHeight);
+        this.renderOperationArea(chartWidth, chartHeight, scale);
         const focusContext = this.rootElement.select('.nv-context');
         focusContext.select('.nv-barsWrap.nvd3-svg').attr('transform', 'translate(0,30)');
         focusContext.select('.nv-brushBackground').attr('transform', 'translate(0,30)');
@@ -614,17 +627,17 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
                 .remove();
         }
     }
-    renderOperationArea(chartWidth, chartHeight) {
+    renderOperationArea(chartWidth, chartHeight, scale = 1) {
         const backgroundColor = this.model.displaySetting.axisSetting.filterBackgroudColor || 'inherit';
-        const operationArea = this.rootElement.append('g').attr('transform', `translate(0,${chartHeight + this.displayOption.operationAreaMarginTop})`)
-            .append('foreignObject').attr('width', chartWidth).attr('height', this.displayOption.operationAreaHeight).attr('fill', 'none')
-            .append('xhtml:div').style('height', (this.displayOption.operationAreaHeight - 4) + 'px').style('overflow', 'hidden').style('margin-top', '4px');
+        const operationArea = this.rootElement.append('g').attr('transform', `translate(0,${chartHeight + this.displayOption.operationAreaMarginTop * scale})`)
+            .append('foreignObject').attr('width', chartWidth).attr('height', this.displayOption.operationAreaHeight * scale).attr('fill', 'none')
+            .append('xhtml:div').style('height', (this.displayOption.operationAreaHeight * scale - 4) + 'px').style('overflow', 'hidden').style('margin-top', '4px');
         const rect = this.$element.parent().parent().find('rect');
         const fillColor = rect.attr('fill');
         const dropdownBg = this.model.displaySetting.axisSetting.filterBackgroudColor || fillColor || '#fff';
         const dropdownWrapper = operationArea.append('div')
             .style('display', 'inline-block')
-            .style('margin-left', this.displayOption.marginLeft + 'px')
+            .style('margin-left', (this.displayOption.marginLeft * scale) + 'px')
             .style('vertical-align', 'middle');
         const selectedText = this.timePeriods.find(t => t.key === Number(this.currentTimePeriod));
         const arrowIconUrl = 'url("data:image/svg+xml,'
@@ -636,14 +649,14 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             .style('background-image', arrowIconUrl)
             .style('background-repeat', 'no-repeat')
             .style('background-position', 'right 4px center')
-            .style('font-size', this.displayOption.operationSelectFontSize)
+            .style('font-size', (parseFloat(this.displayOption.operationSelectFontSize) * scale) + 'px')
             .style('cursor', 'pointer')
             .style('padding', '0 18px 0 4px')
             .style('border', '1px solid #ccc')
             .style('border-radius', '2px')
             .style('white-space', 'nowrap')
-            .style('line-height', (this.displayOption.operationAreaHeight - 8) + 'px')
-            .style('min-height', (this.displayOption.operationAreaHeight - 8) + 'px')
+            .style('line-height', (this.displayOption.operationAreaHeight * scale - 8) + 'px')
+            .style('min-height', (this.displayOption.operationAreaHeight * scale - 8) + 'px')
             .text(selectedText ? selectedText.name : '');
         const dropdownListEl = document.createElement('div');
         dropdownListEl.style.cssText = 'display:none;position:fixed;background:' + dropdownBg
@@ -658,9 +671,9 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
                 .style('padding', '4px 8px')
                 .style('cursor', 'pointer')
                 .style('white-space', 'nowrap')
-                .style('font-size', this.displayOption.operationSelectFontSize)
-                .style('line-height', (this.displayOption.operationAreaHeight - 8) + 'px')
-                .style('min-height', (this.displayOption.operationAreaHeight - 8) + 'px')
+                .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')
                 .style('background', tp.key === Number(this.currentTimePeriod) ? '#1890ff' : 'transparent')
                 .style('color', tp.key === Number(this.currentTimePeriod) ? '#fff' : '#333')
                 .text(tp.name)
@@ -755,24 +768,24 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
         window.addEventListener('resize', this._resizeHideHandler);
         // 滚动时收起
         document.addEventListener('scroll', hideDropdown, true);
-        const buttonWidth = this.displayOption.operationButtonWidth + 'px', buttonHeight = this.displayOption.operationButtonHeight + 'px';
+        const buttonWidth = (this.displayOption.operationButtonWidth * scale) + 'px', buttonHeight = (this.displayOption.operationButtonHeight * scale) + 'px';
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
             .style('float', 'right').style('background-image', 'url(assets/img/black_last_page.png)')
             .style('background-color', backgroundColor).style('background-size', 'cover')
             .on('click', () => { this.loadLastPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
             .style('float', 'right').style('background-image', 'url(assets/img/black_next_page.png)')
-            .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .style('margin', `0 ${this.displayOption.operationButtonMargin * scale}px 0 0`)
             .style('background-color', backgroundColor).style('background-size', 'cover')
             .on('click', () => { this.loadNextPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
             .style('float', 'right').style('background-image', 'url(assets/img/black_previous_page.png)')
-            .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .style('margin', `0 ${this.displayOption.operationButtonMargin * scale}px 0 0`)
             .style('background-color', backgroundColor).style('background-size', 'cover')
             .on('click', () => { this.loadPreviousPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
             .style('float', 'right').style('background-image', 'url(assets/img/black_first_page.png)')
-            .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .style('margin', `0 ${this.displayOption.operationButtonMargin * scale}px 0 0`)
             .style('background-color', backgroundColor).style('background-size', 'cover')
             .on('click', () => { this.loadFirstPage(); });
     }

package/elements/historical-curve/historical-curve.element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"HistoricalCurveElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":23,"character":44},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":77,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":78,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":79,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":80,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":81,"character":23},{"__symbolic":"reference","module":"../../config","name":"HistoryDataStore","line":82,"character":43},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"SystemTextLibraryService","line":84,"character":52},{"__symbolic":"reference","module":"../../service","name":"LanguageService","line":85,"character":43},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":86,"character":38},{"__symbolic":"reference","module":"../../service","name":"ReleasedVariableService","line":87,"character":51}]}],"dispose":[{"__symbolic":"method"}],"initKeyboardListener":[{"__symbolic":"method"}],"subscribeLanguageChange":[{"__symbolic":"method"}],"updateLanguageTexts":[{"__symbolic":"method"}],"getCurrentCulture":[{"__symbolic":"method"}],"getValidTimePeriods":[{"__symbolic":"method"}],"getTimePeriodText":[{"__symbolic":"method"}],"updateTimeRange":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"reRenderElement":[{"__symbolic":"method"}],"renderElement":[{"__symbolic":"method"}],"setupTooltipAutoHide":[{"__symbolic":"method"}],"renderChart":[{"__symbolic":"method"}],"initPoint":[{"__symbolic":"method"}],"getLineChart":[{"__symbolic":"method"}],"getMultiBarWithFocusChart":[{"__symbolic":"method"}],"renderCommonProperty":[{"__symbolic":"method"}],"renderOperationArea":[{"__symbolic":"method"}],"timeFormat":[{"__symbolic":"method"}],"fmtDatetimeLocal":[{"__symbolic":"method"}],"showCustomTimeRangeModal":[{"__symbolic":"method"}],"showCustomTimeRangeModalFallback":[{"__symbolic":"method"}],"loadFirstPage":[{"__symbolic":"method"}],"loadNextPage":[{"__symbolic":"method"}],"loadPreviousPage":[{"__symbolic":"method"}],"loadLastPage":[{"__symbolic":"method"}],"initElementStatus":[{"__symbolic":"method"}],"updateElementStatus":[{"__symbolic":"method"}],"setStatusAsUnbound":[{"__symbolic":"method"}],"setStatusAsLoading":[{"__symbolic":"method"}],"setStatusAsLoadFailed":[{"__symbolic":"method"}],"renderStatus":[{"__symbolic":"method"}],"clearStatus":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"HistoricalCurveElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":23,"character":44},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":77,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":78,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":79,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":80,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":81,"character":23},{"__symbolic":"reference","module":"../../config","name":"HistoryDataStore","line":82,"character":43},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"SystemTextLibraryService","line":84,"character":52},{"__symbolic":"reference","module":"../../service","name":"LanguageService","line":85,"character":43},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":86,"character":38},{"__symbolic":"reference","module":"../../service","name":"ReleasedVariableService","line":87,"character":51}]}],"getIconScale":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"initKeyboardListener":[{"__symbolic":"method"}],"subscribeLanguageChange":[{"__symbolic":"method"}],"updateLanguageTexts":[{"__symbolic":"method"}],"getCurrentCulture":[{"__symbolic":"method"}],"getValidTimePeriods":[{"__symbolic":"method"}],"getTimePeriodText":[{"__symbolic":"method"}],"updateTimeRange":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"reRenderElement":[{"__symbolic":"method"}],"renderElement":[{"__symbolic":"method"}],"setupTooltipAutoHide":[{"__symbolic":"method"}],"renderChart":[{"__symbolic":"method"}],"initPoint":[{"__symbolic":"method"}],"getLineChart":[{"__symbolic":"method"}],"getMultiBarWithFocusChart":[{"__symbolic":"method"}],"renderCommonProperty":[{"__symbolic":"method"}],"renderOperationArea":[{"__symbolic":"method"}],"timeFormat":[{"__symbolic":"method"}],"fmtDatetimeLocal":[{"__symbolic":"method"}],"showCustomTimeRangeModal":[{"__symbolic":"method"}],"showCustomTimeRangeModalFallback":[{"__symbolic":"method"}],"loadFirstPage":[{"__symbolic":"method"}],"loadNextPage":[{"__symbolic":"method"}],"loadPreviousPage":[{"__symbolic":"method"}],"loadLastPage":[{"__symbolic":"method"}],"initElementStatus":[{"__symbolic":"method"}],"updateElementStatus":[{"__symbolic":"method"}],"setStatusAsUnbound":[{"__symbolic":"method"}],"setStatusAsLoading":[{"__symbolic":"method"}],"setStatusAsLoadFailed":[{"__symbolic":"method"}],"renderStatus":[{"__symbolic":"method"}],"clearStatus":[{"__symbolic":"method"}]}}}}]

package/elements/main-element.js

@@ -84,7 +84,7 @@ export class MainElement {
                     this.elements.push(new ViewOperationElement(element, this.injector, this.bsModalService, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.graphStore, this.context.permissionChecker, this.context.operationRecordService, this.context.securityChecker, this.injector.get(LOCALIZATION), this.popupViewService, guiOptions.hostContainerId, guiOptions.el, this.signalRAppId, this.context.textLibraryService, this.context.languageService, this.context));
                     break;
                 case GuiConsts.components.characterKey:
-                    this.elements.push(new CharacterDisplayElement(element, this.injector, this.bsModalService, this.variableCommunicator, this.context.configStore.graphStore, this.context.permissionChecker, this.context.operationRecordService, this.context.securityChecker, this.context.configStore.variableStore, this.injector.get(LOCALIZATION), this.signalRAppId));
+                    this.elements.push(new CharacterDisplayElement(element, this.injector, this.bsModalService, this.variableCommunicator, this.context.configStore.graphStore, this.context.permissionChecker, this.context.operationRecordService, this.context.securityChecker, this.context.configStore.variableStore, this.injector.get(LOCALIZATION), this.signalRAppId, this.context.releasedVariableService));
                     break;
                 case GuiConsts.components.textKey:
                     this.elements.push(new TextElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.graphStore, this.signalRAppId, this.context.textLibraryService, this.context.languageService, this.context));
@@ -318,7 +318,8 @@ export class MainElement {
         each(this.elements, e => {
             if (e instanceof HistoricalCurveElement || e instanceof VideoElement
                 || e instanceof WeatherElement || e instanceof NumericalDisplayElement || e instanceof TextElement
-                || e instanceof AirQualityElement || e instanceof SwitchIndicatorLightElement || e instanceof ScrollAlarmElement) {
+                || e instanceof AirQualityElement || e instanceof SwitchIndicatorLightElement || e instanceof ScrollAlarmElement
+                || e instanceof AlarmElement) {
                 e.dispose();
             }
         });

package/elements/numerical-display/numerical-display-element.d.ts

@@ -57,4 +57,13 @@ export declare class NumericalDisplayElement extends ReadableElement {
     private formatFloatDisplayText;
     private isNumeric;
     private formatDisplayTextUnit;
+    /**
+     * 提供元件尺寸信息用于状态图标缩放
+     */
+    protected getElementSizeForIconScale(): {
+        width: number;
+        height: number;
+        initWidth?: number;
+        initHeight?: number;
+    } | null;
 }

package/elements/numerical-display/numerical-display-element.js

@@ -164,7 +164,10 @@ export class NumericalDisplayElement extends ReadableElement {
     }
     checkElementPassword() {
         if (this.model.enablePassword) {
-            const modalRef = this.modalService.show(VerifyPasswordModalComponent, { initialState: { securityChecker: this.securityChecker }, backdrop: 'static', class: 'gui-modal-dialog-position', animated: false });
+            const modalRef = this.modalService.show(VerifyPasswordModalComponent, {
+                initialState: { securityChecker: this.securityChecker, releasedVariableService: this.releasedVariableService },
+                backdrop: 'static', class: 'gui-modal-dialog-position', animated: false
+            });
             const onClosedSub = modalRef.content.onClosed.subscribe(result => {
                 modalRef.hide();
                 onClosedSub.unsubscribe();
@@ -491,4 +494,19 @@ export class NumericalDisplayElement extends ReadableElement {
         }
         return displayText;
     }
+    /**
+     * 提供元件尺寸信息用于状态图标缩放
+     */
+    getElementSizeForIconScale() {
+        var _a, _b;
+        if (this.model.size) {
+            return {
+                width: this.model.size.width,
+                height: this.model.size.height,
+                initWidth: (_a = this.model.initSize) === null || _a === void 0 ? void 0 : _a.width,
+                initHeight: (_b = this.model.initSize) === null || _b === void 0 ? void 0 : _b.height
+            };
+        }
+        return null;
+    }
 }

package/elements/numerical-display/numerical-display-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NumericalDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/readable-element","name":"ReadableElement","line":29,"character":45},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":73,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":74,"character":18},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":75,"character":39},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":76,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":77,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":78,"character":37},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":79,"character":49},{"__symbolic":"reference","module":"../../service","name":"ReleasedVariableService","line":80,"character":50},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":81,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":82,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":83,"character":22},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":85,"character":38}]}],"dispose":[{"__symbolic":"method"}],"reportValueChanged":[{"__symbolic":"method"}],"initElement":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"initVariableText":[{"__symbolic":"method"}],"initGraphAndText":[{"__symbolic":"method"}],"doWriteValue":[{"__symbolic":"method"}],"recordOperation":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}],"updateDisplayText":[{"__symbolic":"method"}],"rebuildTextElement":[{"__symbolic":"method"}],"formatNumericalDisplayText":[{"__symbolic":"method"}],"formatFloatDisplayText":[{"__symbolic":"method"}],"isNumeric":[{"__symbolic":"method"}],"formatDisplayTextUnit":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NumericalDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/readable-element","name":"ReadableElement","line":29,"character":45},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":73,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":74,"character":18},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":75,"character":39},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":76,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":77,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":78,"character":37},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":79,"character":49},{"__symbolic":"reference","module":"../../service","name":"ReleasedVariableService","line":80,"character":50},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":81,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":82,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":83,"character":22},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":85,"character":38}]}],"dispose":[{"__symbolic":"method"}],"reportValueChanged":[{"__symbolic":"method"}],"initElement":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"initVariableText":[{"__symbolic":"method"}],"initGraphAndText":[{"__symbolic":"method"}],"doWriteValue":[{"__symbolic":"method"}],"recordOperation":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}],"updateDisplayText":[{"__symbolic":"method"}],"rebuildTextElement":[{"__symbolic":"method"}],"formatNumericalDisplayText":[{"__symbolic":"method"}],"formatFloatDisplayText":[{"__symbolic":"method"}],"isNumeric":[{"__symbolic":"method"}],"formatDisplayTextUnit":[{"__symbolic":"method"}],"getElementSizeForIconScale":[{"__symbolic":"method"}]}}}}]

package/elements/switch-indicator-light/switch-indicator-light-element.d.ts

@@ -40,6 +40,15 @@ export declare class SwitchIndicatorLightElement extends ConditionalEnableElemen
     private currentStateIdChange;
     private switchToState;
     private initGraphAndText;
+    /**
+     * 提供元件尺寸信息用于状态图标缩放
+     */
+    protected getElementSizeForIconScale(): {
+        width: number;
+        height: number;
+        initWidth?: number;
+        initHeight?: number;
+    } | null;
     /**
      * 释放资源
      */

package/elements/switch-indicator-light/switch-indicator-light-element.js

@@ -116,8 +116,12 @@ export class SwitchIndicatorLightElement extends ConditionalEnableElement {
         };
     }
     checkElementPassword(afterConfirm) {
+        var _a;
         if (this.model.enablePassword) {
-            const modalRef = this.modalService.show(VerifyPasswordModalComponent, { initialState: { securityChecker: this.securityChecker }, backdrop: 'static', class: 'gui-modal-dialog-position', animated: false });
+            const modalRef = this.modalService.show(VerifyPasswordModalComponent, {
+                initialState: { securityChecker: this.securityChecker, releasedVariableService: (_a = this.guiContext) === null || _a === void 0 ? void 0 : _a.releasedVariableService },
+                backdrop: 'static', class: 'gui-modal-dialog-position', animated: false
+            });
             const onClosedSub = modalRef.content.onClosed.subscribe(result => {
                 modalRef.hide();
                 onClosedSub.unsubscribe();
@@ -263,6 +267,21 @@ export class SwitchIndicatorLightElement extends ConditionalEnableElement {
         this.textStateElement = new TextStateElement(this.model.states, width, height, this.logger, this.model.version, this.model.states, this.model.textLibrary, this.textLibraryService, this.languageService, this.guiContext, true, this.model.fontStyleCultures);
         this.$element.append(this.textStateElement.Element);
     }
+    /**
+     * 提供元件尺寸信息用于状态图标缩放
+     */
+    getElementSizeForIconScale() {
+        var _a, _b;
+        if (this.model.size) {
+            return {
+                width: this.model.size.width,
+                height: this.model.size.height,
+                initWidth: (_a = this.model.initSize) === null || _a === void 0 ? void 0 : _a.width,
+                initHeight: (_b = this.model.initSize) === null || _b === void 0 ? void 0 : _b.height
+            };
+        }
+        return null;
+    }
     /**
      * 释放资源
      */

package/elements/switch-indicator-light/switch-indicator-light-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"SwitchIndicatorLightElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-enable-element","name":"ConditionalEnableElement","line":33,"character":49},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":52,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":53,"character":18},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":54,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":55,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":56,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":57,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":58,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":59,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":60,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":61,"character":22},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"TextLibraryService","line":63,"character":46},{"__symbolic":"reference","module":"../../service","name":"LanguageService","line":64,"character":43},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":65,"character":38}]}],"handleMouseUp":[{"__symbolic":"method"}],"initOnDocMouseUpEvent":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"doSwitchOperator":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"initSwitchOperator":[{"__symbolic":"method"}],"initIndictorLightOperator":[{"__symbolic":"method"}],"currentStateIdChange":[{"__symbolic":"method"}],"switchToState":[{"__symbolic":"method"}],"initGraphAndText":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"checkState":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"SwitchIndicatorLightElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-enable-element","name":"ConditionalEnableElement","line":33,"character":49},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":52,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":53,"character":18},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":54,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":55,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":56,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":57,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":58,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":59,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":60,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":61,"character":22},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"TextLibraryService","line":63,"character":46},{"__symbolic":"reference","module":"../../service","name":"LanguageService","line":64,"character":43},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":65,"character":38}]}],"handleMouseUp":[{"__symbolic":"method"}],"initOnDocMouseUpEvent":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"doSwitchOperator":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"initSwitchOperator":[{"__symbolic":"method"}],"initIndictorLightOperator":[{"__symbolic":"method"}],"currentStateIdChange":[{"__symbolic":"method"}],"switchToState":[{"__symbolic":"method"}],"initGraphAndText":[{"__symbolic":"method"}],"getElementSizeForIconScale":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"checkState":[{"__symbolic":"method"}]}}}}]

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

@@ -132,8 +132,12 @@ export class ViewOperationElement extends ConditionalEnableElement {
         }
     }
     checkElementPassword() {
+        var _a;
         if (this.model.enablePassword) {
-            const modalRef = this.modalService.show(VerifyPasswordModalComponent, { initialState: { securityChecker: this.securityChecker }, backdrop: 'static', class: 'gui-modal-dialog-position', animated: false });
+            const modalRef = this.modalService.show(VerifyPasswordModalComponent, {
+                initialState: { securityChecker: this.securityChecker, releasedVariableService: (_a = this.guiContext) === null || _a === void 0 ? void 0 : _a.releasedVariableService },
+                backdrop: 'static', class: 'gui-modal-dialog-position', animated: false
+            });
             const onClosedSub = modalRef.content.onClosed.subscribe(result => {
                 modalRef.hide();
                 onClosedSub.unsubscribe();
@@ -177,7 +181,8 @@ 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');

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;
@@ -34,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;