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

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

@@ -309,4 +309,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"}]}],"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

@@ -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

@@ -491,4 +491,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

@@ -263,6 +263,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

@@ -177,7 +177,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;

package/gui/gui-view.js

@@ -141,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();
@@ -162,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;
@@ -181,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;
@@ -218,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) {
@@ -263,3 +335,5 @@ export class GuiView {
         }
     }
 }
+/** 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":51,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":52,"character":41},{"__symbolic":"reference","module":"./gui-context","name":"GuiContext","line":53,"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/model/alarm/alarm.model.d.ts

@@ -3,6 +3,7 @@ import { Point, Size } from '../shared';
 export interface AlarmModel extends ConditionalDisplayModel {
     readonly version: number;
     readonly size: Size;
+    readonly initSize?: Size;
     readonly location: Point;
     readonly generalSetting?: any;
     readonly filterSetting?: any;

package/model/character-display/character-display.d.ts

@@ -12,6 +12,7 @@ export interface CharacterDisplay extends ReadableModel, SecurityModel {
     readonly graphSetting: GraphSetting;
     readonly charCount: number;
     readonly size: Size;
+    readonly initSize?: Size;
     readonly useGraph: boolean;
     readonly accessPermission: any;
     readonly showVariableText?: boolean;

package/model/historical-curve/historical-curve.display-settings.d.ts

@@ -4,6 +4,7 @@ import { HistoricalCurveAxisSettings } from './historical-curve-axis-settings';
 import { CurveType } from './curve-type';
 export interface HistoricalCurveDisplaySettings {
     readonly size: Size;
+    readonly initSize?: Size;
     readonly location: Point;
     /**
      * 刷新周期（秒)

package/model/numerical-display/numerical-display.d.ts

@@ -4,6 +4,7 @@ import { NumericalOperationSettings } from './numerical-operation-settings';
 import { DisplayDataType } from '../shared/data-type/display-data-type';
 export interface NumericalDisplay extends ReadableModel, SecurityModel {
     readonly size: Size;
+    readonly initSize?: Size;
     readonly useGraph: boolean;
     readonly stroke: string;
     readonly font: string;

package/model/settings/popup/view-popup-location-type.d.ts

@@ -1,4 +1,5 @@
 export declare enum ViewPopupLocationType {
     Center = 0,
-    Custom = 1
+    Custom = 1,
+    NearButton = 2
 }

package/model/settings/popup/view-popup-location-type.js

@@ -2,4 +2,5 @@ export var ViewPopupLocationType;
 (function (ViewPopupLocationType) {
     ViewPopupLocationType[ViewPopupLocationType["Center"] = 0] = "Center";
     ViewPopupLocationType[ViewPopupLocationType["Custom"] = 1] = "Custom";
+    ViewPopupLocationType[ViewPopupLocationType["NearButton"] = 2] = "NearButton";
 })(ViewPopupLocationType || (ViewPopupLocationType = {}));

package/model/settings/popup/view-popup-location-type.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ViewPopupLocationType":{"Center":0,"Custom":1}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ViewPopupLocationType":{"Center":0,"Custom":1,"NearButton":2}}}]

package/model/switch-indicator-light/switch-indicator-light.d.ts

@@ -25,6 +25,7 @@ export interface SwitchIndicatorLight extends ConditionalEnableModel, SecurityMo
     readonly graphSetting?: GraphSetting;
     readonly location: Point;
     readonly size: Size;
+    readonly initSize?: Size;
     readonly isAwaysDisplay?: boolean;
     readonly conditionItems?: ConditionItemModel[];
     readonly dynamicSetting?: DynamicDisplayModel;

package/package.json

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

package/view/popup-view.service.d.ts

@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
 import { ElementRef } from '@angular/core';
 export interface PopupViewService {
-    popView(viewIndex: number, hostContainerId: string, el: ElementRef): Observable<void>;
+    popView(viewIndex: number, hostContainerId: string, el: ElementRef, triggerRect?: DOMRect): Observable<void>;
     closeView(): any;
     moveView(movementX: number, movementY: number): any;
 }