@flexem/fc-gui 3.0.0-alpha.187 → 3.0.0-alpha.188

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

@@ -37,11 +37,9 @@ export declare class AlarmElement extends ConditionalDisplayElement {
     private rowHeight;
     private touchStartY;
     private touchScrollAccumulator;
-    private scrollTrack;
-    private scrollThumb;
-    private thumbDragStartY;
-    private thumbDragStartWindow;
-    private thumbDragging;
+    private scrollbar;
+    private scrollHovered;
+    private touchScrolling;
     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;
@@ -72,6 +70,7 @@ export declare class AlarmElement extends ConditionalDisplayElement {
     private updateTableContent;
     private renderScrollWindow;
     private updateScrollThumb;
+    private getMaxWindowStart;
     private getIconScale;
     private renderElement;
     private buildHeaderRow;
@@ -86,13 +85,9 @@ export declare class AlarmElement extends ConditionalDisplayElement {
     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 readonly handleScrollTouchEnd;
+    private getCanvasScaleY;
+    private getScreenRowHeight;
     private startAutoScroll;
     private scrollOneRow;
     private autoNextPage;

package/elements/alarm/alarm-element.js

@@ -4,6 +4,7 @@ import { ConditionalDisplayElement } from '../base/conditional-display-element';
 import { GetAlarmsArgs } from '../../config';
 import * as moment from 'moment';
 import { LOGGER_SERVICE_TOKEN } from '../../logger';
+import { AlarmTableScrollbar } from './alarm-table-scrollbar';
 var AlaertElementStatus;
 (function (AlaertElementStatus) {
     AlaertElementStatus[AlaertElementStatus["Normal"] = 0] = "Normal";
@@ -42,97 +43,60 @@ export class AlarmElement extends ConditionalDisplayElement {
         this.rowHeight = 0;
         this.touchStartY = 0;
         this.touchScrollAccumulator = 0;
-        this.thumbDragStartY = 0;
-        this.thumbDragStartWindow = 0;
-        this.thumbDragging = false;
+        this.scrollHovered = false;
+        this.touchScrolling = false;
         this.isDisposed = false;
         this.handleScrollWheel = (event) => {
-            if (!this.rowHeight)
+            if (!this.rowHeight || !this.getMaxWindowStart())
                 return;
             event.preventDefault();
-            this.touchScrollAccumulator += event.deltaY;
-            const rowDelta = Math.trunc(this.touchScrollAccumulator / this.rowHeight);
+            event.stopPropagation();
+            const screenRowHeight = this.getScreenRowHeight();
+            const delta = event.deltaMode === 1 ? event.deltaY * screenRowHeight
+                : event.deltaMode === 2 ? event.deltaY * screenRowHeight * this.maxVisibleRows : event.deltaY;
+            this.touchScrollAccumulator += delta;
+            const rowDelta = Math.trunc(this.touchScrollAccumulator / screenRowHeight);
             if (rowDelta !== 0) {
-                this.touchScrollAccumulator -= rowDelta * this.rowHeight;
+                this.touchScrollAccumulator -= rowDelta * screenRowHeight;
                 this.moveScrollWindowBy(rowDelta);
             }
         };
         this.handleScrollTouchStart = (event) => {
+            if (event.touches.length !== 1 || !this.getMaxWindowStart())
+                return;
+            this.touchScrolling = true;
+            clearInterval(this.scrollIntervalId);
+            event.stopPropagation();
             this.touchStartY = event.touches[0].clientY;
             this.touchScrollAccumulator = 0;
         };
         this.handleScrollTouchMove = (event) => {
-            if (!this.rowHeight)
+            if (!this.touchScrolling || event.touches.length !== 1)
                 return;
             event.preventDefault();
+            event.stopPropagation();
             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);
+            const screenRowHeight = this.getScreenRowHeight();
+            const rowDelta = Math.trunc(this.touchScrollAccumulator / screenRowHeight);
             if (rowDelta !== 0) {
-                this.touchScrollAccumulator -= rowDelta * this.rowHeight;
+                this.touchScrollAccumulator -= rowDelta * screenRowHeight;
                 this.moveScrollWindowBy(rowDelta);
             }
         };
         this.handleScrollMouseEnter = () => {
+            this.scrollHovered = true;
             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.scrollHovered = false;
             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.handleScrollTouchEnd = () => {
+            this.touchScrolling = false;
+            this.startAutoScroll();
         };
         this.rootElement.selectAll('*').remove();
         this.setStatusAsLoading();
@@ -415,7 +379,7 @@ export class AlarmElement extends ConditionalDisplayElement {
         if (useScroll) {
             if (!this.scrollContent)
                 return;
-            this.scrollWindowStart = Math.min(this.scrollWindowStart, Math.max(0, this.pageSize - this.maxVisibleRows));
+            this.scrollWindowStart = Math.min(this.scrollWindowStart, this.getMaxWindowStart());
             this.renderScrollWindow(this.scrollWindowStart);
             return;
         }
@@ -450,24 +414,12 @@ export class AlarmElement extends ConditionalDisplayElement {
         }
         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`;
+        if (this.scrollbar)
+            this.scrollbar.update(this.scrollWindowStart, this.alarmList.length);
+    }
+    getMaxWindowStart() {
+        return Math.max(0, this.alarmList.length - this.maxVisibleRows);
     }
     getIconScale() {
         const initSize = this.model.initSize;
@@ -516,7 +468,7 @@ export class AlarmElement extends ConditionalDisplayElement {
             vertical-align: middle;`;
         for (let col = 0; col < 4; col++) {
             const th = document.createElement('th');
-            th.innerHTML = this.getHeaderTextByColumn(col);
+            th.textContent = this.getHeaderTextByColumn(col);
             th.style.cssText = `width: ${this.model.widths[col] / this.model.size.width * 100}%;
                 border-style: solid;
                 border-color: ${this.model.generalSetting.splitLine};
@@ -543,7 +495,7 @@ export class AlarmElement extends ConditionalDisplayElement {
             border-left-width: ${!col || this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;`;
             if (this.alarmList[row]) {
                 if (col !== 2) {
-                    td.innerHTML = this.alarmList[row][col];
+                    td.textContent = this.alarmList[row][col];
                     td.style.cssText += `${this.model.generalSetting.isUnderline ? 'text-decoration: underline' : ''};`;
                 }
                 else {
@@ -562,14 +514,14 @@ export class AlarmElement extends ConditionalDisplayElement {
                         border-radius: 5px;
                         background: ${levelColors[this.alarmList[row][col]]};
                         color: #ffffff;
-                        width: ${this.model.widths[col] - 30}px;
+                        width: calc(100% - 30px);
                         height: ${alarmHeight}px;
                         max-height: ${rowHeight}px;
                         display: flex;
                         justify-content: center;
                         align-items: center;
                         ${this.model.generalSetting.isUnderline ? 'text-decoration: underline' : ''};`;
-                    alarmLevel.innerHTML = this.model.levelText[this.alarmList[row][col]];
+                    alarmLevel.textContent = this.model.levelText[this.alarmList[row][col]];
                     td.appendChild(alarmLevel);
                 }
             }
@@ -609,40 +561,25 @@ export class AlarmElement extends ConditionalDisplayElement {
         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 = `position: relative; width: ${this.model.size.width}px;
-            height: ${elementHeight - operationAreaReservedHeight}px;`;
+        // WKWebView can paint positioned HTML descendants outside the SVG scale.
+        // Keep a single unpositioned table directly in foreignObject; the scrollbar
+        // is a sibling SVG group, never an HTML overlay or native scrolling layer.
+        const scrollbarWidth = Math.min(12, this.model.size.width * 0.04);
+        const tableHeight = elementHeight - operationAreaReservedHeight;
         const table = document.createElement('table');
         table.style.cssText = `border: 2px solid ${this.model.generalSetting.stroke};
-            height: ${elementHeight - operationAreaReservedHeight}px;
-            width: calc(100% - ${scrollbarWidth}px);`;
+            height: ${tableHeight}px; width: 100%; table-layout: fixed;
+            overflow-wrap: break-word; -webkit-text-size-adjust: none; text-size-adjust: none;`;
         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.element.setAttribute('width', String(this.model.size.width - scrollbarWidth));
+        this.element.appendChild(table);
         this.scrollContent = table;
-        this.scrollTrack = track;
-        this.scrollThumb = thumb;
         this.renderScrollWindow(0);
+        const headerHeight = Math.min(tableHeight, table.rows[0].getBoundingClientRect().height / this.getCanvasScaleY());
+        this.scrollbar = new AlarmTableScrollbar(this.element.parentNode, this.model.size.width - scrollbarWidth, headerHeight, scrollbarWidth, Math.max(0, tableHeight - headerHeight), this.maxVisibleRows, start => this.moveScrollWindowBy(start - this.scrollWindowStart), () => clearInterval(this.scrollIntervalId), () => this.startAutoScroll());
         this.updateScrollThumb();
         this.hoverTarget = table;
         this.bindScrollHoverEvents();
-        this.bindScrollbarEvents();
         this.startAutoScroll();
     }
     bindScrollHoverEvents() {
@@ -654,10 +591,16 @@ export class AlarmElement extends ConditionalDisplayElement {
             this.hoverTarget.addEventListener('wheel', this.handleScrollWheel, { passive: false });
             this.hoverTarget.addEventListener('touchstart', this.handleScrollTouchStart, { passive: true });
             this.hoverTarget.addEventListener('touchmove', this.handleScrollTouchMove, { passive: false });
+            this.hoverTarget.addEventListener('touchend', this.handleScrollTouchEnd);
+            this.hoverTarget.addEventListener('touchcancel', this.handleScrollTouchEnd);
         }
     }
     unbindScrollHoverEvents() {
-        this.unbindScrollbarEvents();
+        if (this.scrollbar)
+            this.scrollbar.dispose();
+        this.scrollbar = null;
+        this.scrollHovered = false;
+        this.touchScrolling = false;
         if (!this.hoverTarget)
             return;
         this.hoverTarget.removeEventListener('mouseenter', this.handleScrollMouseEnter);
@@ -665,6 +608,8 @@ export class AlarmElement extends ConditionalDisplayElement {
         this.hoverTarget.removeEventListener('wheel', this.handleScrollWheel);
         this.hoverTarget.removeEventListener('touchstart', this.handleScrollTouchStart);
         this.hoverTarget.removeEventListener('touchmove', this.handleScrollTouchMove);
+        this.hoverTarget.removeEventListener('touchend', this.handleScrollTouchEnd);
+        this.hoverTarget.removeEventListener('touchcancel', this.handleScrollTouchEnd);
         this.hoverTarget = null;
     }
     // 手动滚动只在当前可见窗口范围内移动（不触发翻页），到顶/到底停住，
@@ -672,41 +617,26 @@ export class AlarmElement extends ConditionalDisplayElement {
     moveScrollWindowBy(rowDelta) {
         if (!this.scrollContent)
             return;
-        const maxWindowStart = Math.max(0, this.pageSize - this.maxVisibleRows);
+        const maxWindowStart = this.getMaxWindowStart();
         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);
+    getCanvasScaleY() {
+        const matrix = this.element.getScreenCTM();
+        return matrix ? Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d) || 1 : 1;
     }
-    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;
+    getScreenRowHeight() {
+        var _a;
+        const row = (_a = this.scrollContent) === null || _a === void 0 ? void 0 : _a.querySelectorAll('tr')[1];
+        return (row === null || row === void 0 ? void 0 : row.getBoundingClientRect().height) || this.rowHeight * this.getCanvasScaleY();
     }
     startAutoScroll() {
+        var _a;
         clearInterval(this.scrollIntervalId);
-        if (!this.model.generalSetting.autoScroll)
+        if (this.isDisposed || this.scrollHovered || this.touchScrolling || ((_a = this.scrollbar) === null || _a === void 0 ? void 0 : _a.isInteracting) || !this.model.generalSetting.autoScroll)
             return;
         const totalPages = Math.max(1, Math.ceil(this.totalCount / this.pageSize));
         if (totalPages <= 1 && !this.scrollContent)
@@ -719,7 +649,7 @@ export class AlarmElement extends ConditionalDisplayElement {
             this.autoNextPage();
             return;
         }
-        const maxWindowStart = this.pageSize - this.maxVisibleRows;
+        const maxWindowStart = this.getMaxWindowStart();
         if (maxWindowStart <= 0 || this.scrollWindowStart >= maxWindowStart) {
             this.autoNextPage();
             return;

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":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"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"AlarmElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":22,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":68,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":69,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":70,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":71,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":72,"character":23},{"__symbolic":"reference","module":"../../config","name":"AlarmsStore","line":73,"character":38},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"SystemTextLibraryService","line":75,"character":52},{"__symbolic":"reference","module":"../../service","name":"LanguageService","line":76,"character":43},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":77,"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"}],"getMaxWindowStart":[{"__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"}],"getCanvasScaleY":[{"__symbolic":"method"}],"getScreenRowHeight":[{"__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/alarm/alarm-table-scrollbar.d.ts

@@ -0,0 +1,38 @@
+/** SVG scrollbar kept outside foreignObject so WKWebView applies the canvas scale. */
+export declare class AlarmTableScrollbar {
+    private readonly y;
+    private readonly height;
+    private readonly visibleRows;
+    private readonly onChange;
+    private readonly onPause;
+    private readonly onResume;
+    private readonly group;
+    private readonly track;
+    private readonly thumb;
+    private readonly ownerDocument;
+    private maxStart;
+    private start;
+    private thumbHeight;
+    private thumbTop;
+    private dragging;
+    private hovered;
+    private focused;
+    private dragStartY;
+    private dragStartRow;
+    constructor(parent: SVGElement, x: number, y: number, width: number, height: number, visibleRows: number, onChange: (start: number) => void, onPause: () => void, onResume: () => void);
+    get isInteracting(): boolean;
+    update(start: number, totalRows: number): void;
+    dispose(): void;
+    private createElement;
+    private setRect;
+    private getLocalY;
+    private readonly handleStart;
+    private readonly handleMove;
+    private readonly handleEnd;
+    private readonly handleLeave;
+    private readonly handleEnter;
+    private readonly handleFocus;
+    private readonly handleBlur;
+    private readonly handleKeyDown;
+    private unbindDrag;
+}

package/elements/alarm/alarm-table-scrollbar.js

@@ -0,0 +1,173 @@
+/** SVG scrollbar kept outside foreignObject so WKWebView applies the canvas scale. */
+export class AlarmTableScrollbar {
+    constructor(parent, x, y, width, height, visibleRows, onChange, onPause, onResume) {
+        this.y = y;
+        this.height = height;
+        this.visibleRows = visibleRows;
+        this.onChange = onChange;
+        this.onPause = onPause;
+        this.onResume = onResume;
+        this.maxStart = 0;
+        this.start = 0;
+        this.thumbHeight = 0;
+        this.thumbTop = 0;
+        this.dragging = false;
+        this.hovered = false;
+        this.focused = false;
+        this.dragStartY = 0;
+        this.dragStartRow = 0;
+        this.handleStart = (event) => {
+            if (!this.maxStart || ('button' in event && event.button !== 0) || ('touches' in event && event.touches.length !== 1))
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.onPause();
+            const localY = this.getLocalY(event);
+            // The full gutter is clickable, including the transparent sides of the thumb.
+            if (localY < this.y + this.thumbTop || localY > this.y + this.thumbTop + this.thumbHeight) {
+                this.onChange(this.start + (localY < this.y + this.thumbTop ? -this.visibleRows : this.visibleRows));
+                this.onResume();
+                return;
+            }
+            this.dragging = true;
+            this.dragStartY = localY;
+            this.dragStartRow = this.start;
+            this.thumb.setAttribute('fill', '#8f99aa');
+            this.thumb.style.cursor = 'grabbing';
+            this.ownerDocument.addEventListener('mousemove', this.handleMove);
+            this.ownerDocument.addEventListener('mouseup', this.handleEnd);
+            this.ownerDocument.addEventListener('touchmove', this.handleMove, { passive: false });
+            this.ownerDocument.addEventListener('touchend', this.handleEnd);
+            this.ownerDocument.addEventListener('touchcancel', this.handleEnd);
+            this.ownerDocument.defaultView.addEventListener('blur', this.handleEnd);
+        };
+        this.handleMove = (event) => {
+            if (!this.dragging || ('touches' in event && event.touches.length !== 1))
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            const travel = this.height - this.thumbHeight;
+            if (travel <= 0)
+                return;
+            const rowDelta = Math.round((this.getLocalY(event) - this.dragStartY) / travel * this.maxStart);
+            this.onChange(this.dragStartRow + rowDelta);
+        };
+        this.handleEnd = () => {
+            if (!this.dragging)
+                return;
+            this.dragging = false;
+            this.unbindDrag();
+            this.thumb.setAttribute('fill', '#b6bdc9');
+            this.thumb.style.cursor = 'grab';
+            this.onResume();
+        };
+        this.handleLeave = () => {
+            this.hovered = false;
+            this.onResume();
+        };
+        this.handleEnter = () => {
+            this.hovered = true;
+            this.onPause();
+        };
+        this.handleFocus = () => {
+            this.focused = true;
+            this.onPause();
+        };
+        this.handleBlur = () => {
+            this.focused = false;
+            this.onResume();
+        };
+        this.handleKeyDown = (event) => {
+            const targets = {
+                ArrowUp: this.start - 1,
+                ArrowDown: this.start + 1,
+                PageUp: this.start - this.visibleRows,
+                PageDown: this.start + this.visibleRows,
+                Home: 0,
+                End: this.maxStart
+            };
+            if (!(event.key in targets))
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.onChange(targets[event.key]);
+        };
+        this.ownerDocument = parent.ownerDocument;
+        this.group = this.createElement('g');
+        this.group.setAttribute('role', 'scrollbar');
+        this.group.setAttribute('aria-orientation', 'vertical');
+        this.group.setAttribute('aria-valuemin', '0');
+        this.group.setAttribute('tabindex', '0');
+        this.group.style.cursor = 'default';
+        this.track = this.createElement('rect');
+        this.setRect(this.track, x, y, width, height);
+        this.track.setAttribute('fill', '#eef0f4');
+        this.track.setAttribute('rx', String(width / 2));
+        this.thumb = this.createElement('rect');
+        this.setRect(this.thumb, x + width / 4, y, width / 2, height);
+        this.thumb.setAttribute('fill', '#b6bdc9');
+        this.thumb.setAttribute('rx', String(width / 4));
+        this.thumb.style.cursor = 'grab';
+        this.group.appendChild(this.track);
+        this.group.appendChild(this.thumb);
+        parent.appendChild(this.group);
+        this.group.addEventListener('mousedown', this.handleStart);
+        this.group.addEventListener('touchstart', this.handleStart, { passive: false });
+        this.group.addEventListener('keydown', this.handleKeyDown);
+        this.group.addEventListener('mouseenter', this.handleEnter);
+        this.group.addEventListener('mouseleave', this.handleLeave);
+        this.group.addEventListener('focus', this.handleFocus);
+        this.group.addEventListener('blur', this.handleBlur);
+    }
+    get isInteracting() {
+        return this.dragging || this.hovered || this.focused;
+    }
+    update(start, totalRows) {
+        this.maxStart = Math.max(0, totalRows - this.visibleRows);
+        this.start = Math.min(this.maxStart, Math.max(0, start));
+        this.group.setAttribute('display', this.maxStart ? 'inline' : 'none');
+        this.group.setAttribute('aria-valuemax', String(this.maxStart));
+        this.group.setAttribute('aria-valuenow', String(this.start));
+        this.thumbHeight = Math.min(this.height, Math.max(20, this.height * this.visibleRows / Math.max(1, totalRows)));
+        this.thumbTop = this.maxStart ? (this.height - this.thumbHeight) * this.start / this.maxStart : 0;
+        this.thumb.setAttribute('height', String(this.thumbHeight));
+        this.thumb.setAttribute('y', String(this.y + this.thumbTop));
+    }
+    dispose() {
+        this.dragging = false;
+        this.unbindDrag();
+        this.group.removeEventListener('mousedown', this.handleStart);
+        this.group.removeEventListener('touchstart', this.handleStart);
+        this.group.removeEventListener('keydown', this.handleKeyDown);
+        this.group.removeEventListener('mouseenter', this.handleEnter);
+        this.group.removeEventListener('mouseleave', this.handleLeave);
+        this.group.removeEventListener('focus', this.handleFocus);
+        this.group.removeEventListener('blur', this.handleBlur);
+        this.group.remove();
+    }
+    createElement(name) {
+        return this.ownerDocument.createElementNS('http://www.w3.org/2000/svg', name);
+    }
+    setRect(rect, x, y, width, height) {
+        rect.setAttribute('x', String(x));
+        rect.setAttribute('y', String(y));
+        rect.setAttribute('width', String(width));
+        rect.setAttribute('height', String(height));
+    }
+    getLocalY(event) {
+        const pointer = 'touches' in event ? event.touches[0] : event;
+        const point = this.group.ownerSVGElement.createSVGPoint();
+        point.x = pointer.clientX;
+        point.y = pointer.clientY;
+        const matrix = this.group.getScreenCTM();
+        return matrix ? point.matrixTransform(matrix.inverse()).y : point.y;
+    }
+    unbindDrag() {
+        this.ownerDocument.removeEventListener('mousemove', this.handleMove);
+        this.ownerDocument.removeEventListener('mouseup', this.handleEnd);
+        this.ownerDocument.removeEventListener('touchmove', this.handleMove);
+        this.ownerDocument.removeEventListener('touchend', this.handleEnd);
+        this.ownerDocument.removeEventListener('touchcancel', this.handleEnd);
+        this.ownerDocument.defaultView.removeEventListener('blur', this.handleEnd);
+    }
+}

package/elements/alarm/alarm-table-scrollbar.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"AlarmTableScrollbar":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":17,"character":16,"context":{"typeName":"SVGElement"}},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"error","message":"Expression form not supported","line":23,"character":35},{"__symbolic":"error","message":"Expression form not supported","line":24,"character":34},{"__symbolic":"error","message":"Expression form not supported","line":25,"character":35}]}],"update":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"createElement":[{"__symbolic":"method"}],"setRect":[{"__symbolic":"method"}],"getLocalY":[{"__symbolic":"method"}],"unbindDrag":[{"__symbolic":"method"}]}}}}]

package/package.json

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