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

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

@@ -88,6 +88,7 @@ export declare class AlarmElement extends ConditionalDisplayElement {
     private readonly handleScrollTouchEnd;
     private getCanvasScaleY;
     private getScreenRowHeight;
+    private supportsMouseHover;
     private startAutoScroll;
     private scrollOneRow;
     private autoNextPage;

package/elements/alarm/alarm-element.js

@@ -87,6 +87,8 @@ export class AlarmElement extends ConditionalDisplayElement {
             }
         };
         this.handleScrollMouseEnter = () => {
+            if (!this.supportsMouseHover())
+                return;
             this.scrollHovered = true;
             clearInterval(this.scrollIntervalId);
         };
@@ -416,10 +418,10 @@ export class AlarmElement extends ConditionalDisplayElement {
     }
     updateScrollThumb() {
         if (this.scrollbar)
-            this.scrollbar.update(this.scrollWindowStart, this.alarmList.length);
+            this.scrollbar.update(this.scrollWindowStart, this.pageSize);
     }
     getMaxWindowStart() {
-        return Math.max(0, this.alarmList.length - this.maxVisibleRows);
+        return Math.max(0, this.pageSize - this.maxVisibleRows);
     }
     getIconScale() {
         const initSize = this.model.initSize;
@@ -562,8 +564,8 @@ export class AlarmElement extends ConditionalDisplayElement {
         this.rowHeight = dataRowHeight;
         this.scrollWindowStart = 0;
         // 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.
+        // Keep a single unpositioned table directly in foreignObject. The sibling
+        // SVG scrollbar overlays the table's right edge without an HTML scrolling layer.
         const scrollbarWidth = Math.min(12, this.model.size.width * 0.04);
         const tableHeight = elementHeight - operationAreaReservedHeight;
         const table = document.createElement('table');
@@ -571,12 +573,14 @@ export class AlarmElement extends ConditionalDisplayElement {
             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());
-        this.element.setAttribute('width', String(this.model.size.width - scrollbarWidth));
         this.element.appendChild(table);
         this.scrollContent = table;
         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());
+        const canvasScaleY = this.getCanvasScaleY();
+        const renderedTableHeight = table.getBoundingClientRect().height / canvasScaleY || tableHeight;
+        const renderedHeaderHeight = table.rows[0].getBoundingClientRect().height / canvasScaleY || this.model.heights[0];
+        const scrollbarInset = 2;
+        this.scrollbar = new AlarmTableScrollbar(this.element.parentNode, this.model.size.width - scrollbarWidth, renderedHeaderHeight + scrollbarInset, scrollbarWidth, Math.max(0, renderedTableHeight - renderedHeaderHeight - scrollbarInset * 2), this.maxVisibleRows, start => this.moveScrollWindowBy(start - this.scrollWindowStart), () => clearInterval(this.scrollIntervalId), () => this.startAutoScroll());
         this.updateScrollThumb();
         this.hoverTarget = table;
         this.bindScrollHoverEvents();
@@ -633,6 +637,11 @@ export class AlarmElement extends ConditionalDisplayElement {
         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();
     }
+    supportsMouseHover() {
+        var _a, _b;
+        const view = (_b = (_a = this.element) === null || _a === void 0 ? void 0 : _a.ownerDocument) === null || _b === void 0 ? void 0 : _b.defaultView;
+        return !!view && (!view.matchMedia || view.matchMedia('(hover: hover) and (pointer: fine)').matches);
+    }
     startAutoScroll() {
         var _a;
         clearInterval(this.scrollIntervalId);

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":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"}]}}}}]
+[{"__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"}],"supportsMouseHover":[{"__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

@@ -1,4 +1,4 @@
-/** SVG scrollbar kept outside foreignObject so WKWebView applies the canvas scale. */
+/** SVG scrollbar overlays the table bounds but stays outside foreignObject for WKWebView scaling. */
 export declare class AlarmTableScrollbar {
     private readonly y;
     private readonly height;
@@ -16,7 +16,6 @@ export declare class AlarmTableScrollbar {
     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);
@@ -31,8 +30,7 @@ export declare class AlarmTableScrollbar {
     private readonly handleEnd;
     private readonly handleLeave;
     private readonly handleEnter;
-    private readonly handleFocus;
-    private readonly handleBlur;
     private readonly handleKeyDown;
     private unbindDrag;
+    private supportsMouseHover;
 }

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

@@ -1,4 +1,4 @@
-/** SVG scrollbar kept outside foreignObject so WKWebView applies the canvas scale. */
+/** SVG scrollbar overlays the table bounds but stays outside foreignObject for WKWebView scaling. */
 export class AlarmTableScrollbar {
     constructor(parent, x, y, width, height, visibleRows, onChange, onPause, onResume) {
         this.y = y;
@@ -13,7 +13,6 @@ export class AlarmTableScrollbar {
         this.thumbTop = 0;
         this.dragging = false;
         this.hovered = false;
-        this.focused = false;
         this.dragStartY = 0;
         this.dragStartRow = 0;
         this.handleStart = (event) => {
@@ -66,17 +65,11 @@ export class AlarmTableScrollbar {
             this.onResume();
         };
         this.handleEnter = () => {
+            if (!this.supportsMouseHover())
+                return;
             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,
@@ -102,7 +95,7 @@ export class AlarmTableScrollbar {
         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.track.setAttribute('rx', '0');
         this.thumb = this.createElement('rect');
         this.setRect(this.thumb, x + width / 4, y, width / 2, height);
         this.thumb.setAttribute('fill', '#b6bdc9');
@@ -116,11 +109,9 @@ export class AlarmTableScrollbar {
         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;
+        return this.dragging || this.hovered;
     }
     update(start, totalRows) {
         this.maxStart = Math.max(0, totalRows - this.visibleRows);
@@ -141,8 +132,6 @@ export class AlarmTableScrollbar {
         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) {
@@ -170,4 +159,8 @@ export class AlarmTableScrollbar {
         this.ownerDocument.removeEventListener('touchcancel', this.handleEnd);
         this.ownerDocument.defaultView.removeEventListener('blur', this.handleEnd);
     }
+    supportsMouseHover() {
+        const view = this.ownerDocument.defaultView;
+        return !!view && (!view.matchMedia || view.matchMedia('(hover: hover) and (pointer: fine)').matches);
+    }
 }

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

@@ -1 +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"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"AlarmTableScrollbar":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":16,"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":22,"character":35},{"__symbolic":"error","message":"Expression form not supported","line":23,"character":34},{"__symbolic":"error","message":"Expression form not supported","line":24,"character":35}]}],"update":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"createElement":[{"__symbolic":"method"}],"setRect":[{"__symbolic":"method"}],"getLocalY":[{"__symbolic":"method"}],"unbindDrag":[{"__symbolic":"method"}],"supportsMouseHover":[{"__symbolic":"method"}]}}}}]

package/package.json

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