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

package/elements/alarm/alarm-element.d.ts

@@ -31,9 +31,17 @@ export declare class AlarmElement extends ConditionalDisplayElement {
     private getAlarmDataId;
     private readonly maxVisibleRows;
     private scrollIntervalId;
-    private scrollContainer;
+    private scrollContent;
+    private scrollWindowStart;
     private hoverTarget;
     private rowHeight;
+    private touchStartY;
+    private touchScrollAccumulator;
+    private scrollTrack;
+    private scrollThumb;
+    private thumbDragStartY;
+    private thumbDragStartWindow;
+    private thumbDragging;
     private isDisposed;
     constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, alarmsStore: AlarmsStore, signalRAppId: string, systemTextLibraryService?: SystemTextLibraryService, languageService?: LanguageService, guiContext?: GuiContext);
     dispose(): void;
@@ -62,6 +70,8 @@ export declare class AlarmElement extends ConditionalDisplayElement {
     private getAlarmData;
     private refreshCurrentPageData;
     private updateTableContent;
+    private renderScrollWindow;
+    private updateScrollThumb;
     private getIconScale;
     private renderElement;
     private buildHeaderRow;
@@ -70,8 +80,19 @@ export declare class AlarmElement extends ConditionalDisplayElement {
     private renderScrollableTable;
     private bindScrollHoverEvents;
     private unbindScrollHoverEvents;
+    private moveScrollWindowBy;
+    private readonly handleScrollWheel;
+    private readonly handleScrollTouchStart;
+    private readonly handleScrollTouchMove;
     private readonly handleScrollMouseEnter;
     private readonly handleScrollMouseLeave;
+    private bindScrollbarEvents;
+    private unbindScrollbarEvents;
+    private getClientY;
+    private readonly handleThumbDragStart;
+    private readonly handleThumbDragMove;
+    private readonly handleThumbDragEnd;
+    private readonly handleTrackClick;
     private startAutoScroll;
     private scrollOneRow;
     private autoNextPage;

package/elements/alarm/alarm-element.js

@@ -38,14 +38,102 @@ export class AlarmElement extends ConditionalDisplayElement {
         this.totalCount = 0;
         this.pageSize = 5;
         this.maxVisibleRows = 15;
+        this.scrollWindowStart = 0;
         this.rowHeight = 0;
+        this.touchStartY = 0;
+        this.touchScrollAccumulator = 0;
+        this.thumbDragStartY = 0;
+        this.thumbDragStartWindow = 0;
+        this.thumbDragging = false;
         this.isDisposed = false;
+        this.handleScrollWheel = (event) => {
+            if (!this.rowHeight)
+                return;
+            event.preventDefault();
+            this.touchScrollAccumulator += event.deltaY;
+            const rowDelta = Math.trunc(this.touchScrollAccumulator / this.rowHeight);
+            if (rowDelta !== 0) {
+                this.touchScrollAccumulator -= rowDelta * this.rowHeight;
+                this.moveScrollWindowBy(rowDelta);
+            }
+        };
+        this.handleScrollTouchStart = (event) => {
+            this.touchStartY = event.touches[0].clientY;
+            this.touchScrollAccumulator = 0;
+        };
+        this.handleScrollTouchMove = (event) => {
+            if (!this.rowHeight)
+                return;
+            event.preventDefault();
+            const currentY = event.touches[0].clientY;
+            const deltaY = this.touchStartY - currentY;
+            this.touchStartY = currentY;
+            this.touchScrollAccumulator += deltaY;
+            const rowDelta = Math.trunc(this.touchScrollAccumulator / this.rowHeight);
+            if (rowDelta !== 0) {
+                this.touchScrollAccumulator -= rowDelta * this.rowHeight;
+                this.moveScrollWindowBy(rowDelta);
+            }
+        };
         this.handleScrollMouseEnter = () => {
             clearInterval(this.scrollIntervalId);
         };
         this.handleScrollMouseLeave = () => {
+            if (!this.thumbDragging)
+                this.startAutoScroll();
+        };
+        // 拖拽滑块时挂全局 mousemove/mouseup，允许拖出滚动条区域也能继续跟手，松开时才解绑
+        this.handleThumbDragStart = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.thumbDragging = true;
+            clearInterval(this.scrollIntervalId);
+            this.thumbDragStartY = this.getClientY(event);
+            this.thumbDragStartWindow = this.scrollWindowStart;
+            document.addEventListener('mousemove', this.handleThumbDragMove);
+            document.addEventListener('mouseup', this.handleThumbDragEnd);
+            document.addEventListener('touchmove', this.handleThumbDragMove, { passive: false });
+            document.addEventListener('touchend', this.handleThumbDragEnd);
+        };
+        this.handleThumbDragMove = (event) => {
+            if (!this.thumbDragging || !this.scrollTrack)
+                return;
+            event.preventDefault();
+            const maxWindowStart = Math.max(0, this.pageSize - this.maxVisibleRows);
+            if (maxWindowStart <= 0)
+                return;
+            const trackHeight = this.scrollTrack.clientHeight;
+            const thumbHeightRatio = Math.min(1, this.maxVisibleRows / this.pageSize);
+            const thumbHeight = Math.max(20, trackHeight * thumbHeightRatio);
+            const maxThumbTop = trackHeight - thumbHeight;
+            if (maxThumbTop <= 0)
+                return;
+            const deltaY = this.getClientY(event) - this.thumbDragStartY;
+            const deltaWindow = Math.round((deltaY / maxThumbTop) * maxWindowStart);
+            const nextStart = Math.min(maxWindowStart, Math.max(0, this.thumbDragStartWindow + deltaWindow));
+            if (nextStart === this.scrollWindowStart)
+                return;
+            this.scrollWindowStart = nextStart;
+            this.renderScrollWindow(this.scrollWindowStart);
+        };
+        this.handleThumbDragEnd = () => {
+            this.thumbDragging = false;
+            document.removeEventListener('mousemove', this.handleThumbDragMove);
+            document.removeEventListener('mouseup', this.handleThumbDragEnd);
+            document.removeEventListener('touchmove', this.handleThumbDragMove);
+            document.removeEventListener('touchend', this.handleThumbDragEnd);
             this.startAutoScroll();
         };
+        // 点击轨道空白处（非滑块）时整页跳转，方向取决于点击位置在滑块上方还是下方
+        this.handleTrackClick = (event) => {
+            if (event.target !== this.scrollTrack || !this.scrollTrack)
+                return;
+            const trackRect = this.scrollTrack.getBoundingClientRect();
+            const clickTop = event.clientY - trackRect.top;
+            const thumbTop = parseFloat(this.scrollThumb.style.top) || 0;
+            const rowDelta = clickTop < thumbTop ? -this.maxVisibleRows : this.maxVisibleRows;
+            this.moveScrollWindowBy(rowDelta);
+        };
         this.rootElement.selectAll('*').remove();
         this.setStatusAsLoading();
         this.logger = injector.get(LOGGER_SERVICE_TOKEN);
@@ -276,10 +364,8 @@ export class AlarmElement extends ConditionalDisplayElement {
         }, 500);
     }
     refreshCurrentPageData() {
-        var _a;
         if (this.isDisposed)
             return;
-        const currentScrollTop = ((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0;
         if (this.model.filterSetting.alarmType) {
             this.updateQueryTimeRange();
             const input = new GetAlarmsArgs(this.alarmNames, this.startTime, this.endTime, this.pageSize, this.page * this.pageSize);
@@ -295,9 +381,6 @@ export class AlarmElement extends ConditionalDisplayElement {
                         item.triggeredTime.format('YYYY-MM-DD HH:mm:ss')
                     ]);
                     this.updateTableContent();
-                    if (this.scrollContainer) {
-                        this.scrollContainer.scrollTop = currentScrollTop;
-                    }
                 }
             });
         }
@@ -321,9 +404,6 @@ export class AlarmElement extends ConditionalDisplayElement {
                         item.triggeredTime.format('YYYY-MM-DD HH:mm:ss')
                     ]);
                     this.updateTableContent();
-                    if (this.scrollContainer) {
-                        this.scrollContainer.scrollTop = currentScrollTop;
-                    }
                 }
             });
         }
@@ -332,36 +412,62 @@ export class AlarmElement extends ConditionalDisplayElement {
         if (!this.element)
             return;
         const useScroll = this.pageSize > this.maxVisibleRows;
-        const dataRowHeight = this.model.heights[1] || this.model.heights[0];
-        // 查找表格主体
-        let tbody;
         if (useScroll) {
-            const bodyContainer = this.element.querySelector('div > div:nth-child(2)');
-            if (!bodyContainer)
+            if (!this.scrollContent)
                 return;
-            const bodyTable = bodyContainer.querySelector('table');
-            if (!bodyTable)
-                return;
-            tbody = bodyTable;
-        }
-        else {
-            const table = this.element.querySelector('table');
-            if (!table)
-                return;
-            tbody = table;
+            this.scrollWindowStart = Math.min(this.scrollWindowStart, Math.max(0, this.pageSize - this.maxVisibleRows));
+            this.renderScrollWindow(this.scrollWindowStart);
+            return;
         }
+        const table = this.element.querySelector('table');
+        if (!table)
+            return;
         // 清除现有数据行（保留表头）
-        const rows = Array.from(tbody.querySelectorAll('tr'));
+        const rows = Array.from(table.querySelectorAll('tr'));
         rows.forEach((row, index) => {
-            if (index > 0 || useScroll) { // 对于 scrollable 模式，表头在另一个 table，所以这里全部清除
+            if (index > 0) {
                 row.remove();
             }
         });
         // 重新生成数据行
         for (let row = 0; row < this.pageSize; row++) {
-            const rowHeight = useScroll ? dataRowHeight : this.model.heights[row + 1];
-            tbody.appendChild(this.buildDataRow(row, rowHeight));
+            table.appendChild(this.buildDataRow(row, this.model.heights[row + 1]));
+        }
+    }
+    renderScrollWindow(startRow) {
+        const table = this.scrollContent;
+        if (!table)
+            return;
+        // 清除现有数据行（保留表头，即第一个 <tr>）
+        const rows = Array.from(table.querySelectorAll('tr'));
+        rows.forEach((row, index) => {
+            if (index > 0) {
+                row.remove();
+            }
+        });
+        for (let i = 0; i < this.maxVisibleRows; i++) {
+            table.appendChild(this.buildDataRow(startRow + i, this.rowHeight));
         }
+        this.updateScrollThumb();
+    }
+    // 滑块高度按"可见行数/总行数"的比例算，位置按当前窗口起始行占可滚动范围的比例算，
+    // 只用 top/height 两个数值属性更新，不涉及 transform，不会触发合成层
+    updateScrollThumb() {
+        if (!this.scrollTrack || !this.scrollThumb)
+            return;
+        const maxWindowStart = Math.max(0, this.pageSize - this.maxVisibleRows);
+        if (maxWindowStart <= 0) {
+            this.scrollThumb.style.display = 'none';
+            return;
+        }
+        this.scrollThumb.style.display = 'block';
+        const trackHeight = this.scrollTrack.clientHeight;
+        const thumbHeightRatio = Math.min(1, this.maxVisibleRows / this.pageSize);
+        const thumbHeight = Math.max(20, trackHeight * thumbHeightRatio);
+        const maxThumbTop = trackHeight - thumbHeight;
+        const thumbTop = maxThumbTop * (this.scrollWindowStart / maxWindowStart);
+        this.scrollThumb.style.height = `${thumbHeight}px`;
+        this.scrollThumb.style.top = `${thumbTop}px`;
     }
     getIconScale() {
         const initSize = this.model.initSize;
@@ -485,7 +591,8 @@ export class AlarmElement extends ConditionalDisplayElement {
         return tr;
     }
     renderPlainTable(elementHeight, operationAreaReservedHeight) {
-        this.scrollContainer = null;
+        this.scrollContent = null;
+        this.scrollWindowStart = 0;
         const table = document.createElement('table');
         table.style.cssText = `border: 2px solid ${this.model.generalSetting.stroke};
             height: ${elementHeight - operationAreaReservedHeight}px;`;
@@ -501,42 +608,41 @@ export class AlarmElement extends ConditionalDisplayElement {
     renderScrollableTable(elementHeight, operationAreaReservedHeight) {
         const dataRowHeight = this.model.heights[1] || this.model.heights[0];
         this.rowHeight = dataRowHeight;
+        this.scrollWindowStart = 0;
+        // 之前用"表头/表体分两个 table + flex 包裹容器 + overflow/transform 滚动"的结构，
+        // 在 iOS WKWebView 上表体会明显放大错位，换了两种滚动实现方式（原生 overflow:auto、
+        // JS transform 平移）都复现同样的问题，怀疑是这套多层 div + 双 table 结构本身的问题。
+        // 这里改成和 renderPlainTable() 完全同构的单 table 结构（已验证在所有平台上都正常），
+        // DOM 里始终只保留 maxVisibleRows 行数据，滚动时只增删 <tr> 内容，不做任何位移/滚动。
+        // 自定义滚动条（轨道+滑块）只用 position + top/height 定位，不用 overflow/transform/
+        // will-change，这些属性都不会触发 WebKit 合成层提升，不会重新引入 iOS 缩放错位问题。
+        const scrollbarWidth = 6;
         const wrapper = document.createElement('div');
-        wrapper.style.cssText = `display: flex;
-            flex-direction: column;
-            box-sizing: border-box;
-            border: 2px solid ${this.model.generalSetting.stroke};
+        wrapper.style.cssText = `position: relative; width: ${this.model.size.width}px;
+            height: ${elementHeight - operationAreaReservedHeight}px;`;
+        const table = document.createElement('table');
+        table.style.cssText = `border: 2px solid ${this.model.generalSetting.stroke};
             height: ${elementHeight - operationAreaReservedHeight}px;
-            overflow: hidden;`;
-        const headerWrapper = document.createElement('div');
-        headerWrapper.style.cssText = 'flex: none; box-sizing: border-box; overflow: hidden;';
-        const headerTable = document.createElement('table');
-        headerTable.style.cssText = 'width: 100%; table-layout: fixed;';
-        headerTable.appendChild(this.buildHeaderRow());
-        headerWrapper.appendChild(headerTable);
-        const bodyContainer = document.createElement('div');
-        bodyContainer.style.cssText = `flex: none;
-            overflow-y: auto;
-            overflow-x: hidden;
-            height: ${dataRowHeight * this.maxVisibleRows}px;`;
-        const bodyTable = document.createElement('table');
-        bodyTable.style.cssText = 'width: 100%; table-layout: fixed;';
-        for (let row = 0; row < this.pageSize; row++) {
-            bodyTable.appendChild(this.buildDataRow(row, dataRowHeight));
-        }
-        bodyContainer.appendChild(bodyTable);
-        wrapper.appendChild(headerWrapper);
-        wrapper.appendChild(bodyContainer);
+            width: calc(100% - ${scrollbarWidth}px);`;
+        table.appendChild(this.buildHeaderRow());
+        wrapper.appendChild(table);
+        const track = document.createElement('div');
+        track.style.cssText = `position: absolute; top: 0; right: 0; width: ${scrollbarWidth}px;
+            height: 100%; background: rgba(0,0,0,0.06); border-radius: ${scrollbarWidth / 2}px;`;
+        const thumb = document.createElement('div');
+        thumb.style.cssText = `position: absolute; left: 0; width: 100%;
+            background: rgba(0,0,0,0.35); border-radius: ${scrollbarWidth / 2}px; cursor: pointer;`;
+        track.appendChild(thumb);
+        wrapper.appendChild(track);
         this.element.appendChild(wrapper);
-        this.scrollContainer = bodyContainer;
-        requestAnimationFrame(() => {
-            const scrollbarWidth = bodyContainer.offsetWidth - bodyContainer.clientWidth;
-            if (scrollbarWidth > 0) {
-                headerWrapper.style.paddingRight = scrollbarWidth + 'px';
-            }
-        });
-        this.hoverTarget = bodyContainer;
+        this.scrollContent = table;
+        this.scrollTrack = track;
+        this.scrollThumb = thumb;
+        this.renderScrollWindow(0);
+        this.updateScrollThumb();
+        this.hoverTarget = table;
         this.bindScrollHoverEvents();
+        this.bindScrollbarEvents();
         this.startAutoScroll();
     }
     bindScrollHoverEvents() {
@@ -544,41 +650,93 @@ export class AlarmElement extends ConditionalDisplayElement {
             return;
         this.hoverTarget.addEventListener('mouseenter', this.handleScrollMouseEnter);
         this.hoverTarget.addEventListener('mouseleave', this.handleScrollMouseLeave);
+        if (this.scrollContent) {
+            this.hoverTarget.addEventListener('wheel', this.handleScrollWheel, { passive: false });
+            this.hoverTarget.addEventListener('touchstart', this.handleScrollTouchStart, { passive: true });
+            this.hoverTarget.addEventListener('touchmove', this.handleScrollTouchMove, { passive: false });
+        }
     }
     unbindScrollHoverEvents() {
+        this.unbindScrollbarEvents();
         if (!this.hoverTarget)
             return;
         this.hoverTarget.removeEventListener('mouseenter', this.handleScrollMouseEnter);
         this.hoverTarget.removeEventListener('mouseleave', this.handleScrollMouseLeave);
+        this.hoverTarget.removeEventListener('wheel', this.handleScrollWheel);
+        this.hoverTarget.removeEventListener('touchstart', this.handleScrollTouchStart);
+        this.hoverTarget.removeEventListener('touchmove', this.handleScrollTouchMove);
         this.hoverTarget = null;
     }
+    // 手动滚动只在当前可见窗口范围内移动（不触发翻页），到顶/到底停住，
+    // 和自动滚动定时器（会在到底后自动翻页）职责区分开
+    moveScrollWindowBy(rowDelta) {
+        if (!this.scrollContent)
+            return;
+        const maxWindowStart = Math.max(0, this.pageSize - this.maxVisibleRows);
+        const nextStart = Math.min(maxWindowStart, Math.max(0, this.scrollWindowStart + rowDelta));
+        if (nextStart === this.scrollWindowStart)
+            return;
+        this.scrollWindowStart = nextStart;
+        this.renderScrollWindow(this.scrollWindowStart);
+    }
+    bindScrollbarEvents() {
+        if (!this.scrollTrack || !this.scrollThumb)
+            return;
+        this.scrollThumb.addEventListener('mousedown', this.handleThumbDragStart);
+        this.scrollThumb.addEventListener('touchstart', this.handleThumbDragStart, { passive: true });
+        this.scrollTrack.addEventListener('mousedown', this.handleTrackClick);
+    }
+    unbindScrollbarEvents() {
+        if (this.scrollThumb) {
+            this.scrollThumb.removeEventListener('mousedown', this.handleThumbDragStart);
+            this.scrollThumb.removeEventListener('touchstart', this.handleThumbDragStart);
+        }
+        if (this.scrollTrack) {
+            this.scrollTrack.removeEventListener('mousedown', this.handleTrackClick);
+        }
+        document.removeEventListener('mousemove', this.handleThumbDragMove);
+        document.removeEventListener('mouseup', this.handleThumbDragEnd);
+        document.removeEventListener('touchmove', this.handleThumbDragMove);
+        document.removeEventListener('touchend', this.handleThumbDragEnd);
+        this.scrollTrack = null;
+        this.scrollThumb = null;
+    }
+    getClientY(event) {
+        return 'touches' in event ? event.touches[0].clientY : event.clientY;
+    }
     startAutoScroll() {
         clearInterval(this.scrollIntervalId);
         if (!this.model.generalSetting.autoScroll)
             return;
         const totalPages = Math.max(1, Math.ceil(this.totalCount / this.pageSize));
-        if (totalPages <= 1 && !this.scrollContainer)
+        if (totalPages <= 1 && !this.scrollContent)
             return;
         const duration = (this.model.generalSetting.scrollDuration || 10) * 1000;
         this.scrollIntervalId = setInterval(() => this.scrollOneRow(), duration);
     }
     scrollOneRow() {
-        const el = this.scrollContainer;
-        if (!el) {
+        if (!this.scrollContent) {
             this.autoNextPage();
             return;
         }
-        const maxScrollTop = el.scrollHeight - el.clientHeight;
-        if (maxScrollTop <= 1 || el.scrollTop >= maxScrollTop - 1) {
+        const maxWindowStart = this.pageSize - this.maxVisibleRows;
+        if (maxWindowStart <= 0 || this.scrollWindowStart >= maxWindowStart) {
             this.autoNextPage();
             return;
         }
-        el.scrollTop = Math.min(el.scrollTop + this.rowHeight, maxScrollTop);
+        this.scrollWindowStart += 1;
+        this.renderScrollWindow(this.scrollWindowStart);
     }
     autoNextPage() {
         const totalPages = Math.max(1, Math.ceil(this.totalCount / this.pageSize));
-        if (totalPages <= 1)
+        if (totalPages <= 1) {
+            // 只有一页数据：没有下一页可翻，循环回本页顶部继续滚动
+            if (this.scrollContent) {
+                this.scrollWindowStart = 0;
+                this.renderScrollWindow(0);
+            }
             return;
+        }
         const lastPage = totalPages - 1;
         this.page = this.page < lastPage ? this.page + 1 : 0;
         this.getAlarmData();

package/elements/alarm/alarm-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"AlarmElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":21,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":61,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":62,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":63,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":64,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":65,"character":23},{"__symbolic":"reference","module":"../../config","name":"AlarmsStore","line":66,"character":38},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"SystemTextLibraryService","line":68,"character":52},{"__symbolic":"reference","module":"../../service","name":"LanguageService","line":69,"character":43},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":70,"character":38}]}],"dispose":[{"__symbolic":"method"}],"subscribeLanguageChange":[{"__symbolic":"method"}],"updateLanguageTexts":[{"__symbolic":"method"}],"getCurrentCulture":[{"__symbolic":"method"}],"getHeaderTextByColumn":[{"__symbolic":"method"}],"getValidTimePeriods":[{"__symbolic":"method"}],"getTimePeriodText":[{"__symbolic":"method"}],"getAlarmData":[{"__symbolic":"method"}],"refreshCurrentPageData":[{"__symbolic":"method"}],"updateTableContent":[{"__symbolic":"method"}],"getIconScale":[{"__symbolic":"method"}],"renderElement":[{"__symbolic":"method"}],"buildHeaderRow":[{"__symbolic":"method"}],"buildDataRow":[{"__symbolic":"method"}],"renderPlainTable":[{"__symbolic":"method"}],"renderScrollableTable":[{"__symbolic":"method"}],"bindScrollHoverEvents":[{"__symbolic":"method"}],"unbindScrollHoverEvents":[{"__symbolic":"method"}],"startAutoScroll":[{"__symbolic":"method"}],"scrollOneRow":[{"__symbolic":"method"}],"autoNextPage":[{"__symbolic":"method"}],"renderOperationArea":[{"__symbolic":"method"}],"updateTimeRange":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"loadFirstPage":[{"__symbolic":"method"}],"loadNextPage":[{"__symbolic":"method"}],"loadPreviousPage":[{"__symbolic":"method"}],"loadLastPage":[{"__symbolic":"method"}],"setStatusAsNormal":[{"__symbolic":"method"}],"setStatusAsLoading":[{"__symbolic":"method"}],"renderStatus":[{"__symbolic":"method"}],"clearStatus":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"AlarmElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":21,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":69,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":70,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":71,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":72,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":73,"character":23},{"__symbolic":"reference","module":"../../config","name":"AlarmsStore","line":74,"character":38},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"SystemTextLibraryService","line":76,"character":52},{"__symbolic":"reference","module":"../../service","name":"LanguageService","line":77,"character":43},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":78,"character":38}]}],"dispose":[{"__symbolic":"method"}],"subscribeLanguageChange":[{"__symbolic":"method"}],"updateLanguageTexts":[{"__symbolic":"method"}],"getCurrentCulture":[{"__symbolic":"method"}],"getHeaderTextByColumn":[{"__symbolic":"method"}],"getValidTimePeriods":[{"__symbolic":"method"}],"getTimePeriodText":[{"__symbolic":"method"}],"getAlarmData":[{"__symbolic":"method"}],"refreshCurrentPageData":[{"__symbolic":"method"}],"updateTableContent":[{"__symbolic":"method"}],"renderScrollWindow":[{"__symbolic":"method"}],"updateScrollThumb":[{"__symbolic":"method"}],"getIconScale":[{"__symbolic":"method"}],"renderElement":[{"__symbolic":"method"}],"buildHeaderRow":[{"__symbolic":"method"}],"buildDataRow":[{"__symbolic":"method"}],"renderPlainTable":[{"__symbolic":"method"}],"renderScrollableTable":[{"__symbolic":"method"}],"bindScrollHoverEvents":[{"__symbolic":"method"}],"unbindScrollHoverEvents":[{"__symbolic":"method"}],"moveScrollWindowBy":[{"__symbolic":"method"}],"bindScrollbarEvents":[{"__symbolic":"method"}],"unbindScrollbarEvents":[{"__symbolic":"method"}],"getClientY":[{"__symbolic":"method"}],"startAutoScroll":[{"__symbolic":"method"}],"scrollOneRow":[{"__symbolic":"method"}],"autoNextPage":[{"__symbolic":"method"}],"renderOperationArea":[{"__symbolic":"method"}],"updateTimeRange":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"loadFirstPage":[{"__symbolic":"method"}],"loadNextPage":[{"__symbolic":"method"}],"loadPreviousPage":[{"__symbolic":"method"}],"loadLastPage":[{"__symbolic":"method"}],"setStatusAsNormal":[{"__symbolic":"method"}],"setStatusAsLoading":[{"__symbolic":"method"}],"renderStatus":[{"__symbolic":"method"}],"clearStatus":[{"__symbolic":"method"}]}}}}]

package/elements/shared/text/text-element.js

@@ -6,9 +6,6 @@ export class TextElementModal {
         this.width = width;
         this.height = height;
         this.isVariableText = isVariableText;
-        if (/iPhone|iPod/i.test(navigator.userAgent)) {
-            width += 10;
-        }
         this._element = this.getforeignObjectElement(width, height);
         this._element.innerHTML = '';
         const text = this.createNewForeignObjectText(content, font, width, height, isVariableText);
@@ -32,10 +29,7 @@ export class TextElementModal {
         // 清空现有内容
         this._element.innerHTML = '';
         // 创建新的文本元素
-        let width = this.width;
-        if (/iPhone|iPod/i.test(navigator.userAgent)) {
-            width += 10;
-        }
+        const width = this.width;
         const text = this.createNewForeignObjectText(content, this.font, width, this.height, this.isVariableText);
         this._element.appendChild(text);
     }

package/modal/verify-password/verify-password-modal.component.js

@@ -64,7 +64,7 @@ VerifyPasswordModalComponent = __decorate([
     Component({
         selector: 'verify-password',
         template: "<form #verifyPasswordForm=\"ngForm\" novalidate (ngSubmit)=\"checkSecurity()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.passwordVerify}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"password-span\">{{localization.password}}： </span> <input type=\"password\" name=\"password\" autoFocus [class.verify-password-input]=\"!isMobileMode\" class=\"form-control element-password\" [(ngModel)]=\"password\" (keyup)=\"validate()\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!passwordError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\" [class.verify-password-footer]=\"!isMobileMode\"> <button type=\"button\" class=\"btn md-skip btn-cancel\" (click)=\"close()\">{{localization.cancel}} </button> <button type=\"submit\" class=\"btn md-skip btn-primary\" [disabled]=\"passwordError\">{{localization.submit}}</button> </div> </form> ",
-        styles: [".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; color: #fff; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { color: #fff; height: 32px; min-width: 71px; margin-right: 10px; line-height: 0px } .password-span { color: #7f939e; font-size: 14px; margin-left: 15px; } .btn-cancel { color: #fff; height: 32px; min-width: 71px; margin-right: 6px; background-color: #dddddd; line-height: 0px } .element-password { padding-left: 8px; height: 32px; min-width: 71px; margin-left: 16px; } .verify-password-input { width: 600px; } .verify-password-footer { padding-right: 18px !important; }"]
+        styles: [".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; color: #fff; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { color: #fff; height: 32px; min-width: 71px; margin-right: 10px; line-height: 0px } .password-span { color: #7f939e; font-size: 14px; margin-left: 15px; } .btn-cancel { color: #fff; height: 32px; min-width: 71px; margin-right: 6px; background-color: #dddddd; line-height: 0px } .element-password { padding-left: 8px; height: 32px; min-width: 71px; margin-left: 16px; } .verify-password-input { width: 600px; } .verify-password-footer { padding-right: 18px !important; } "]
     }),
     __param(0, Inject(LOCALIZATION)),
     __metadata("design:paramtypes", [Object, Injector])

package/modal/verify-password/verify-password-modal.component.less

@@ -71,4 +71,4 @@
 
 .verify-password-footer {
   padding-right: 18px !important;
-}
+}

package/modal/verify-password/verify-password-modal.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"VerifyPasswordModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"verify-password","template":"<form #verifyPasswordForm=\"ngForm\" novalidate (ngSubmit)=\"checkSecurity()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.passwordVerify}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"password-span\">{{localization.password}}： </span> <input type=\"password\" name=\"password\" autoFocus [class.verify-password-input]=\"!isMobileMode\" class=\"form-control element-password\" [(ngModel)]=\"password\" (keyup)=\"validate()\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!passwordError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\" [class.verify-password-footer]=\"!isMobileMode\"> <button type=\"button\" class=\"btn md-skip btn-cancel\" (click)=\"close()\">{{localization.cancel}} </button> <button type=\"submit\" class=\"btn md-skip btn-primary\" [disabled]=\"passwordError\">{{localization.submit}}</button> </div> </form> ","styles":[".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; color: #fff; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { color: #fff; height: 32px; min-width: 71px; margin-right: 10px; line-height: 0px } .password-span { color: #7f939e; font-size: 14px; margin-left: 15px; } .btn-cancel { color: #fff; height: 32px; min-width: 71px; margin-right: 6px; background-color: #dddddd; line-height: 0px } .element-password { padding-left: 8px; height: 32px; min-width: 71px; margin-left: 16px; } .verify-password-input { width: 600px; } .verify-password-footer { padding-right: 18px !important; }"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":29,"character":17},"arguments":[{"__symbolic":"reference","module":"../../localization","name":"LOCALIZATION","line":29,"character":24}]}],null],"parameters":[{"__symbolic":"reference","module":"../../localization","name":"Localization","line":29,"character":59},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":29,"character":83}]}],"ngOnInit":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"checkSecurity":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"VerifyPasswordModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"verify-password","template":"<form #verifyPasswordForm=\"ngForm\" novalidate (ngSubmit)=\"checkSecurity()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.passwordVerify}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"password-span\">{{localization.password}}： </span> <input type=\"password\" name=\"password\" autoFocus [class.verify-password-input]=\"!isMobileMode\" class=\"form-control element-password\" [(ngModel)]=\"password\" (keyup)=\"validate()\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!passwordError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\" [class.verify-password-footer]=\"!isMobileMode\"> <button type=\"button\" class=\"btn md-skip btn-cancel\" (click)=\"close()\">{{localization.cancel}} </button> <button type=\"submit\" class=\"btn md-skip btn-primary\" [disabled]=\"passwordError\">{{localization.submit}}</button> </div> </form> ","styles":[".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; color: #fff; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { color: #fff; height: 32px; min-width: 71px; margin-right: 10px; line-height: 0px } .password-span { color: #7f939e; font-size: 14px; margin-left: 15px; } .btn-cancel { color: #fff; height: 32px; min-width: 71px; margin-right: 6px; background-color: #dddddd; line-height: 0px } .element-password { padding-left: 8px; height: 32px; min-width: 71px; margin-left: 16px; } .verify-password-input { width: 600px; } .verify-password-footer { padding-right: 18px !important; } "]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":29,"character":17},"arguments":[{"__symbolic":"reference","module":"../../localization","name":"LOCALIZATION","line":29,"character":24}]}],null],"parameters":[{"__symbolic":"reference","module":"../../localization","name":"Localization","line":29,"character":59},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":29,"character":83}]}],"ngOnInit":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"checkSecurity":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}}}}]

package/package.json

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