Pull request #3268: BI-118917 fix: bi.switcher这种利用Masker遮罩的场景处理

Merge in VISUAL/fineui from ~DAILER/fineui:master to master

* commit 'b8f272885f9e949b950cb2370cc435b5a7a34c82':
  BI-118659 fix: belowMouse的实现
  无JIRA "bi.number_editor" 支持水印
  BI-118917 fix: bi.switcher这种利用Masker遮罩的场景处理

demo/js/widget/numbereditor/demo.number_editor.js

@@ -14,7 +14,8 @@ Demo.FileManager = BI.inherit(BI.Widget, {
             },
             height: 24,
             width: 150,
-            errorText: "hahah"
+            errorText: "hahah",
+            watermark: "每个人都是自己健康的第一责任人",
         });
         editor1.on(BI.NumberEditor.EVENT_CHANGE, function () {
             if (BI.parseFloat(this.getValue()) < 1) {

src/base/combination/combo.js

@@ -196,28 +196,22 @@
             this.popupView.visible();
             var combo = (o.belowMouse && BI.isNotNull(e)) ? {
                 element: {
-                    0: e.target,
+                    0: BI.extend({}, e.target, {
+                        getBoundingClientRect: function () {
+                            return {
+                                left: e.pageX,
+                                top: e.pageY,
+                                width: 0,
+                                height: 0,
+                            };
+                        }
+                    }),
                     offset: function () {
                         return {
                             left: e.pageX,
                             top: e.pageY,
                         };
                     },
-                    bounds: function () {
-                        // offset为其相对于父定位元素的偏移
-                        return {
-                            x: e.offsetX,
-                            y: e.offsetY,
-                            width: 0,
-                            height: 24,
-                        };
-                    },
-                    outerWidth: function () {
-                        return 0;
-                    },
-                    outerHeight: function () {
-                        return 24;
-                    },
                 },
             } : this.combo;
             var positionRelativeElement = BI.DOM.getPositionRelativeContainingBlock(BI.isNull(o.container) ? this.element[0] : BI.Widget._renderEngine.createElement(BI.isFunction(o.container) ? o.container() : o.container)[0]);

src/core/controller/controller.layer.js

@@ -63,41 +63,54 @@ BI.LayerController = BI.inherit(BI.Controller, {
         var layout = BI.createWidget({
             type: "bi.absolute",
             invisible: true,
-            items: [{
-                el: widget,
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0
-            }]
+            items: [
+                {
+                    el: widget,
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0
+                }
+            ]
         }, context);
         BI.createWidget({
             type: "bi.absolute",
             element: op.container || this.options.render,
-            items: [{
-                el: layout,
-                left: offset.left || 0,
-                right: offset.right || 0,
-                top: offset.top || 0,
-                bottom: offset.bottom || 0
-            }]
+            items: [
+                {
+                    el: layout,
+                    left: offset.left || 0,
+                    right: offset.right || 0,
+                    top: offset.top || 0,
+                    bottom: offset.bottom || 0
+                }
+            ]
         });
         if (w) {
             layout.element.addClass("bi-popup-view");
-            layout.element.css({
-                left: w.offset().left + (offset.left || 0),
-                top: w.offset().top + (offset.top || 0),
-                width: offset.width || (w.outerWidth() - (offset.left || 0) - (offset.right || 0)) || "",
-                height: offset.height || (w.outerHeight() - (offset.top || 0) - (offset.bottom || 0)) || ""
-            });
-            layout.element.on("__resize__", function () {
-                w.is(":visible") &&
-                layout.element.css({
+
+            function getComputedPosition() {
+
+                var css = {
                     left: w.offset().left + (offset.left || 0),
                     top: w.offset().top + (offset.top || 0),
                     width: offset.width || (w.outerWidth() - (offset.left || 0) - (offset.right || 0)) || "",
                     height: offset.height || (w.outerHeight() - (offset.top || 0) - (offset.bottom || 0)) || ""
-                });
+                };
+
+                const { top, left, scaleY, scaleX } = BI.DOM.getPositionRelativeContainingBlockRect(layout.element[0]);
+
+                css.top = (css.top - top) / scaleY;
+                css.left = (css.left - left) / scaleX;
+
+                return css;
+            }
+
+
+            layout.element.css(getComputedPosition());
+            layout.element.on("__resize__", function () {
+                w.is(":visible") &&
+                layout.element.css(getComputedPosition());
             });
         }
         this.add(name, widget, layout);

src/core/platform/web/dom.js

@@ -249,12 +249,14 @@
         },
 
         _getLeftAlignPosition: function (combo, popup, extraWidth, container) {
-            var viewBounds = popup.element.bounds(),
-                windowBounds = BI.Widget._renderEngine.createElement("body").bounds();
-            var left = combo.element.offset().left - (container ? container.getBoundingClientRect().left : 0) + extraWidth;
+            var comboRect = combo.element[0].getBoundingClientRect(),
+                popupRect = popup.element.bounds(),
+                viewportRect = document.documentElement.getBoundingClientRect(),
+                containerRect = container ? container.getBoundingClientRect() : { left: 0 };
+            var left = comboRect.left - containerRect.left + extraWidth;
 
-            if (left + viewBounds.width > windowBounds.width) {
-                left = windowBounds.width - viewBounds.width;
+            if (left + popupRect.width - containerRect.left > viewportRect.width) {
+                left = viewportRect.width - popupRect.width - containerRect.left;
             }
             return left;
         },
@@ -285,17 +287,19 @@
             };
         },
 
-        _getRightAlignPosition: function (combo, popup, extraWidth) {
-            var comboBounds = combo.element.bounds(), viewBounds = popup.element.bounds();
-            return combo.element.offset().left + comboBounds.width - viewBounds.width - extraWidth;
+        _getRightAlignPosition: function (combo, popup, extraWidth, container) {
+            var comboBounds = combo.element[0].getBoundingClientRect(),
+                viewBounds = popup.element[0].getBoundingClientRect(),
+                containerRect = container ? container.getBoundingClientRect() : { left: 0 };
+            return comboBounds.left + comboBounds.width - viewBounds.width - extraWidth - containerRect.left;
         },
 
-        getRightAlignPosition: function (combo, popup, extraWidth) {
-            var left = this._getRightAlignPosition(combo, popup, extraWidth);
+        getRightAlignPosition: function (combo, popup, extraWidth, container) {
+            var left = this._getRightAlignPosition(combo, popup, extraWidth, container);
             var dir = "";
             // 如果放不下，优先使用LeftAlign, 如果LeftAlign也放不下, 再使用left=0
             if (left < 0) {
-                left = this._getLeftAlignPosition(combo, popup, extraWidth);
+                left = this._getLeftAlignPosition(combo, popup, extraWidth, container);
                 dir = "right";
             }
             if (left < 0) {
@@ -317,14 +321,13 @@
         },
 
         getTopAlignPosition: function (combo, popup, extraHeight, needAdaptHeight, container) {
-            var comboOffset = combo.element.offset();
             var comboBounds = combo.element[0].getBoundingClientRect(),
                 popupBounds = popup.element[0].getBoundingClientRect(),
                 viewportBounds = document.documentElement.getBoundingClientRect(),
                 containerBounds = container ? container.getBoundingClientRect() : { top: 0 };
             var top, adaptHeight, dir;
             if (BI.DOM.isBottomSpaceEnough(combo, popup, -1 * comboBounds.height + extraHeight)) {
-                top = comboOffset.top - containerBounds.top + extraHeight;
+                top = comboBounds.top - containerBounds.top + extraHeight;
             } else if (needAdaptHeight) {
                 top = comboBounds.top - containerBounds.top + extraHeight;
                 adaptHeight = viewportBounds.height - comboBounds.top;
@@ -375,20 +378,19 @@
         },
 
         getBottomAlignPosition: function (combo, popup, extraHeight, needAdaptHeight, container) {
-            var comboOffset = combo.element.offset();
             var comboBounds = combo.element[0].getBoundingClientRect(),
                 popupBounds = popup.element[0].getBoundingClientRect(),
                 windowBounds = BI.Widget._renderEngine.createElement("body").bounds(),
                 containerBounds = container ? container.getBoundingClientRect() : { top: 0 };
             var top, adaptHeight, dir;
             if (BI.DOM.isTopSpaceEnough(combo, popup, -1 * comboBounds.height + extraHeight)) {
-                top = comboOffset.top + comboBounds.height - containerBounds.top - popupBounds.height;
+                top = comboBounds.top + comboBounds.height - containerBounds.top - popupBounds.height;
             } else if (needAdaptHeight) {
                 top = 0 - containerBounds.top;
                 adaptHeight = comboBounds.top + comboBounds.height - extraHeight;
             } else if (BI.DOM.isBottomSpaceEnough(combo, popup, -1 * comboBounds.height + extraHeight)) {
                 // 上方空间不足且不允许调整高度的情况下，优先使用下对齐
-                top = comboOffset.top - containerBounds.top + extraHeight;
+                top = comboBounds.top - containerBounds.top + extraHeight;
                 dir = "bottom";
             } else {
                 top = 0;
@@ -410,7 +412,6 @@
         },
 
         getBottomAdaptPosition: function (combo, popup, extraHeight, needAdaptHeight) {
-            var comboOffset = combo.element.offset();
             var comboBounds = combo.element.bounds(), popupBounds = popup.element.bounds(),
                 windowBounds = BI.Widget._renderEngine.createElement("body").bounds();
             if (BI.DOM.isBottomSpaceEnough(combo, popup, extraHeight)) {
@@ -418,8 +419,8 @@
             }
             if (needAdaptHeight) {
                 return {
-                    top: comboOffset.top + comboBounds.height + extraHeight,
-                    adaptHeight: windowBounds.height - comboOffset.top - comboBounds.height - extraHeight
+                    top: comboBounds.top + comboBounds.height + extraHeight,
+                    adaptHeight: windowBounds.height - comboBounds.top - comboBounds.height - extraHeight
                 };
             }
             if (popupBounds.height + extraHeight > windowBounds.height) {
@@ -732,5 +733,19 @@
 
             return BI.DOM.getPositionRelativeContainingBlock(element.parentNode);
         },
+
+        /**
+         * 获取position:fixed相对定位的元素的clientRect
+         */
+        getPositionRelativeContainingBlockRect: function (element) {
+            var positionRelativeElement = BI.DOM.getPositionRelativeContainingBlock(element);
+            var rect = positionRelativeElement.getBoundingClientRect();
+
+            return {
+                ...rect.toJSON(),
+                scaleX: rect.width / positionRelativeElement.offsetWidth,
+                scaleY: rect.height / positionRelativeElement.offsetHeight
+            };
+        },
     });
 })();

src/widget/numbereditor/number.editor.js

@@ -18,7 +18,8 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
             errorText: "",
             step: 1,
             min: BI.MIN,
-            max: BI.MAX
+            max: BI.MAX,
+            watermark: "",
         });
     },
 
@@ -30,6 +31,7 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
             height: BI.toPix(o.height, 2),
             simple: o.simple,
             allowBlank: o.allowBlank,
+            watermark: o.watermark,
             value: o.valueFormatter(o.value),
             validationChecker: function (v) {
                 // 不设置validationChecker就自动检测
@@ -89,23 +91,27 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
             type: "bi.htape",
             height: BI.toPix(o.height, 2),
             element: this,
-            items: [this.editor, {
-                el: {
-                    type: "bi.grid",
-                    columns: 1,
-                    rows: 2,
-                    items: [{
-                        column: 0,
-                        row: 0,
-                        el: this.topBtn
-                    }, {
-                        column: 0,
-                        row: 1,
-                        el: this.bottomBtn
-                    }]
-                },
-                width: 23
-            }]
+            items: [
+                this.editor, {
+                    el: {
+                        type: "bi.grid",
+                        columns: 1,
+                        rows: 2,
+                        items: [
+                            {
+                                column: 0,
+                                row: 0,
+                                el: this.topBtn
+                            }, {
+                                column: 0,
+                                row: 1,
+                                el: this.bottomBtn
+                            }
+                        ]
+                    },
+                    width: 23
+                }
+            ]
         });
     },
 
@@ -117,13 +123,13 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
         return this.editor.isEditing();
     },
 
-    _checkValueInRange: function(v) {
+    _checkValueInRange: function (v) {
         var o = this.options;
         return !!(BI.isNumeric(v) && BI.parseFloat(v) >= o.min && BI.parseFloat(v) <= o.max);
     },
 
-    _checkAdjustDisabled: function(v) {
-        if(this.options.validationChecker === BI.emptyFn) {
+    _checkAdjustDisabled: function (v) {
+        if (this.options.validationChecker === BI.emptyFn) {
             this.bottomBtn.setEnable(BI.parseFloat(v) > this.options.min);
             this.topBtn.setEnable(BI.parseFloat(v) < this.options.max);
         }