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

package/elements/alarm/alarm-element.js

@@ -565,7 +565,7 @@ export class AlarmElement extends ConditionalDisplayElement {
         this.scrollWindowStart = 0;
         // WKWebView can paint positioned HTML descendants outside the SVG scale.
         // Keep a single unpositioned table directly in foreignObject. The sibling
-        // SVG scrollbar overlays the table's right edge without an HTML scrolling layer.
+        // SVG scrollbar sits inside the table's right border 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');
@@ -580,7 +580,7 @@ export class AlarmElement extends ConditionalDisplayElement {
         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.scrollbar = new AlarmTableScrollbar(this.element.parentNode, this.model.size.width - scrollbarWidth - scrollbarInset, 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();

package/elements/alarm/alarm-table-scrollbar.d.ts

@@ -1,4 +1,3 @@
-/** SVG scrollbar overlays the table bounds but stays outside foreignObject for WKWebView scaling. */
 export declare class AlarmTableScrollbar {
     private readonly y;
     private readonly height;

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

@@ -1,4 +1,7 @@
 /** SVG scrollbar overlays the table bounds but stays outside foreignObject for WKWebView scaling. */
+const TRACK_COLOR = '#f0f1f4';
+const THUMB_COLOR = '#c5cbd4';
+const ACTIVE_THUMB_COLOR = '#adb6c2';
 export class AlarmTableScrollbar {
     constructor(parent, x, y, width, height, visibleRows, onChange, onPause, onResume) {
         this.y = y;
@@ -31,7 +34,7 @@ export class AlarmTableScrollbar {
             this.dragging = true;
             this.dragStartY = localY;
             this.dragStartRow = this.start;
-            this.thumb.setAttribute('fill', '#8f99aa');
+            this.thumb.setAttribute('fill', ACTIVE_THUMB_COLOR);
             this.thumb.style.cursor = 'grabbing';
             this.ownerDocument.addEventListener('mousemove', this.handleMove);
             this.ownerDocument.addEventListener('mouseup', this.handleEnd);
@@ -56,7 +59,7 @@ export class AlarmTableScrollbar {
                 return;
             this.dragging = false;
             this.unbindDrag();
-            this.thumb.setAttribute('fill', '#b6bdc9');
+            this.thumb.setAttribute('fill', THUMB_COLOR);
             this.thumb.style.cursor = 'grab';
             this.onResume();
         };
@@ -94,12 +97,13 @@ export class AlarmTableScrollbar {
         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('fill', TRACK_COLOR);
         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');
-        this.thumb.setAttribute('rx', String(width / 4));
+        this.setRect(this.thumb, x, y, width, height);
+        this.thumb.setAttribute('fill', THUMB_COLOR);
+        this.thumb.setAttribute('rx', String(width / 2));
+        this.thumb.style.transition = 'fill 120ms ease';
         this.thumb.style.cursor = 'grab';
         this.group.appendChild(this.track);
         this.group.appendChild(this.thumb);

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":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"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"AlarmTableScrollbar":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":20,"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":26,"character":35},{"__symbolic":"error","message":"Expression form not supported","line":27,"character":34},{"__symbolic":"error","message":"Expression form not supported","line":28,"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.189",
+	"version": "3.0.0-alpha.190",
 	"module": "public_api.js",
 	"typings": "public_api.d.ts",
 	"license": "UNLICENSED",