From f87bab8068dd4271cad76b57d4d8f777436cd510 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joker=2EWang-=E7=8E=8B=E9=A1=BA?= Date: Thu, 12 Jan 2023 16:26:37 +0800 Subject: [PATCH] =?UTF-8?q?KERNEL-14083=20refactor:=20widget/downlist?= =?UTF-8?q?=E3=80=81singleslider=E3=80=81intervalslider=20es6=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/case/calendar/calendar.js | 4 +- src/case/layer/panel.js | 4 +- src/case/list/list.select.js | 10 +- src/core/wrapper/layout/flex/flex.vertical.js | 1 - src/widget/downlist/combo.downlist.js | 268 ++++--- src/widget/downlist/group.downlist.js | 113 +-- src/widget/downlist/index.js | 5 + src/widget/downlist/item.downlist.js | 227 +++--- src/widget/downlist/item.downlistgroup.js | 259 ++++--- src/widget/downlist/popup.downlist.js | 587 +++++++------- src/widget/index.js | 9 + src/widget/intervalslider/index.js | 2 + src/widget/intervalslider/intervalslider.js | 726 ++++++++++-------- .../model.accuratecalculation.js | 271 ++++--- .../singleslider/button/editor.sign.text.js | 265 ++++--- .../singleslider/button/iconbutton.slider.js | 28 +- src/widget/singleslider/index.js | 5 + src/widget/singleslider/singleslider.js | 526 +++++++------ src/widget/singleslider/singleslider.label.js | 464 ++++++----- .../singleslider/singleslider.normal.js | 430 ++++++----- 20 files changed, 2350 insertions(+), 1854 deletions(-) create mode 100644 src/widget/downlist/index.js create mode 100644 src/widget/intervalslider/index.js create mode 100644 src/widget/singleslider/index.js diff --git a/src/case/calendar/calendar.js b/src/case/calendar/calendar.js index b656a271e..b049e18b4 100644 --- a/src/case/calendar/calendar.js +++ b/src/case/calendar/calendar.js @@ -139,8 +139,8 @@ export class Calendar extends Widget { rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8, }))], }); - this.days.on(Controller.EVENT_CHANGE, () => { - this.fireEvent(Controller.EVENT_CHANGE, arguments); + this.days.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); createWidget(extend({ element: this, diff --git a/src/case/layer/panel.js b/src/case/layer/panel.js index 51bd4fc50..de18dc35f 100644 --- a/src/case/layer/panel.js +++ b/src/case/layer/panel.js @@ -50,8 +50,8 @@ export class Panel extends Widget { }], }); - this.button_group.on(Controller.EVENT_CHANGE, () => { - this.fireEvent(Controller.EVENT_CHANGE, ...arguments); + this.button_group.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); this.button_group.on(ButtonGroup.EVENT_CHANGE, (value, obj) => { diff --git a/src/case/list/list.select.js b/src/case/list/list.select.js index e9fce794a..88f4856c6 100644 --- a/src/case/list/list.select.js +++ b/src/case/list/list.select.js @@ -55,13 +55,14 @@ export class SelectList extends Widget { // 全选 this.toolbar = createWidget(o.toolbar); this.allSelected = false; - this.toolbar.on(Controller.EVENT_CHANGE, (type, value, obj) => { + this.toolbar.on(Controller.EVENT_CHANGE, (...args) => { + const [type, value, obj] = args; this.allSelected = this.toolbar.isSelected(); if (type === Events.CLICK) { this.setAllSelected(this.allSelected); this.fireEvent(SelectList.EVENT_CHANGE, value, obj); } - this.fireEvent(Controller.EVENT_CHANGE, arguments); + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); this.list = createWidget(o.el, { @@ -84,12 +85,13 @@ export class SelectList extends Widget { hasNext: o.hasNext, }); - this.list.on(Controller.EVENT_CHANGE, (type, value, obj) => { + this.list.on(Controller.EVENT_CHANGE, (...args) => { + const [type, value, obj] = args; if (type === Events.CLICK) { this._checkAllSelected(); this.fireEvent(SelectList.EVENT_CHANGE, value, obj); } - this.fireEvent(Controller.EVENT_CHANGE, arguments); + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); createWidget(extend({ diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js index fefc7abad..5ee654642 100644 --- a/src/core/wrapper/layout/flex/flex.vertical.js +++ b/src/core/wrapper/layout/flex/flex.vertical.js @@ -12,7 +12,6 @@ import { Layout } from "../../layout"; @shortcut() export class FlexVerticalLayout extends Layout { static xtype = "bi.flex_vertical"; - props() { return extend(super.props(...arguments), { baseCls: "bi-f-v", diff --git a/src/widget/downlist/combo.downlist.js b/src/widget/downlist/combo.downlist.js index 10c39bfbf..eb4c9e636 100644 --- a/src/widget/downlist/combo.downlist.js +++ b/src/widget/downlist/combo.downlist.js @@ -1,143 +1,155 @@ -(function() { - function transformItems(items) { - if (!items) return items; - var result = BI.cloneDeep(items); - var isComplexItmes = BI.some(items, function (_, item) { - return BI.isArray(item); +import { shortcut, Widget, extend, createWidget, cloneDeep, some, isArray, each } from "@/core"; +import { DownListPopup } from "./popup.downlist"; +import { Combo } from "@/base"; +import { IconTrigger } from "@/case"; + + +function transformItems(items) { + if (!items) return items; + let result = cloneDeep(items); + const isComplexItmes = some(items, (_, item) => isArray(item)); + // 传一维数组，帮转二维 + if (!isComplexItmes) { + result = [result]; + } + // 帮转 el + each(result, (_, arr) => { + each(arr, (_, item) => { + if (item.children && !item.el) { + item.el = { + text: item.text, + icon: item.icon, + cls: item.cls, + iconCls1: item.iconCls1, + value: item.value, + }; + } }); - // 传一维数组，帮转二维 - if (!isComplexItmes) { - result = [result]; - } - // 帮转 el - BI.each(result, function (_, arr) { - BI.each(arr, function (_, item) { - if (item.children && !item.el) { - item.el = { - text: item.text, - icon: item.icon, - cls: item.cls, - iconCls1: item.iconCls1, - value: item.value - }; - } - }); + }); + + return result; +} + +@shortcut() +export class DownListCombo extends Widget { + static xtype = "bi.down_list_combo"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { + baseCls: "bi-down-list-combo", + height: 24, + items: [], + adjustLength: 0, + direction: "bottom", + trigger: "click", + container: null, + stopPropagation: false, + el: {}, + popup: {}, + minWidth: 140, + maxHeight: 1000, + destroyWhenHide: false, + isDefaultInit: true, }); - return result; } - /** - * Created by roy on 15/8/14. - */ - BI.DownListCombo = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.DownListCombo.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-down-list-combo", - height: 24, - items: [], - adjustLength: 0, - direction: "bottom", - trigger: "click", - container: null, - stopPropagation: false, - el: {}, - popup: {}, - minWidth: 140, - maxHeight: 1000, - destroyWhenHide: false, - isDefaultInit: true, - }); - }, + _init() { + super._init(...arguments); + const o = this.options; - _init: function () { - BI.DownListCombo.superclass._init.apply(this, arguments); - var self = this, o = this.options; - - this.downlistcombo = BI.createWidget({ - element: this, - type: "bi.combo", - trigger: o.trigger, - isNeedAdjustWidth: false, - isDefaultInit: o.isDefaultInit, - container: o.container, - adjustLength: o.adjustLength, - direction: o.direction, - belowMouse: o.belowMouse, - stopPropagation: o.stopPropagation, - destroyWhenHide: o.destroyWhenHide, + this.downlistcombo = createWidget({ + element: this, + type: Combo.xtype, + trigger: o.trigger, + isNeedAdjustWidth: false, + isDefaultInit: o.isDefaultInit, + container: o.container, + adjustLength: o.adjustLength, + direction: o.direction, + belowMouse: o.belowMouse, + stopPropagation: o.stopPropagation, + destroyWhenHide: o.destroyWhenHide, + el: { + type: IconTrigger.xtype, + extraCls: o.iconCls, + width: o.width, + height: o.height, + ...o.el, + }, + popup: { el: { - type: "bi.icon_trigger", - extraCls: o.iconCls, - width: o.width, - height: o.height, - ...o.el - }, - popup: { - el: { - type: "bi.down_list_popup", - ref: function (ref) { - self.popupView = ref; - }, - items: transformItems(o.items), - chooseType: o.chooseType, - value: o.value, - listeners: [{ - eventName: BI.DownListPopup.EVENT_CHANGE, - action: function (value) { - self.fireEvent(BI.DownListCombo.EVENT_CHANGE, value); - self.downlistcombo.hideView(); - } - }, { - eventName: BI.DownListPopup.EVENT_SON_VALUE_CHANGE, - action: function (value, fatherValue) { - self.fireEvent(BI.DownListCombo.EVENT_SON_VALUE_CHANGE, value, fatherValue); - self.downlistcombo.hideView(); - } - }] + type: DownListPopup.xtype, + ref: _ref => { + this.popupView = _ref; }, - stopPropagation: o.stopPropagation, - maxHeight: o.maxHeight, - minWidth: o.minWidth, - ...o.popup - } - }); - - this.downlistcombo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { - self.fireEvent(BI.DownListCombo.EVENT_BEFORE_POPUPVIEW); - }); - }, + items: transformItems(o.items), + chooseType: o.chooseType, + value: o.value, + listeners: [ + { + eventName: DownListPopup.EVENT_CHANGE, + action: value => { + this.fireEvent( + DownListCombo.EVENT_CHANGE, + value + ); + this.downlistcombo.hideView(); + }, + }, + { + eventName: DownListPopup.EVENT_SON_VALUE_CHANGE, + action: (value, fatherValue) => { + this.fireEvent( + DownListCombo.EVENT_SON_VALUE_CHANGE, + value, + fatherValue + ); + this.downlistcombo.hideView(); + }, + } + ], + }, + stopPropagation: o.stopPropagation, + maxHeight: o.maxHeight, + minWidth: o.minWidth, + ...o.popup, + }, + }); - hideView: function () { - this.downlistcombo.hideView(); - }, + this.downlistcombo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => { + this.fireEvent(DownListCombo.EVENT_BEFORE_POPUPVIEW); + }); + } - showView: function (e) { - this.downlistcombo.showView(e); - }, + hideView() { + this.downlistcombo.hideView(); + } - populate: function (items) { - this.popupView.populate(items); - }, + showView(e) { + this.downlistcombo.showView(e); + } - setValue: function (v) { - this.popupView.setValue(v); - }, + populate(items) { + this.popupView.populate(items); + } - getValue: function () { - return this.popupView.getValue(); - }, + setValue(v) { + this.popupView.setValue(v); + } - adjustWidth: function () { - this.downlistcombo.adjustWidth(); - }, + getValue() { + return this.popupView.getValue(); + } - adjustHeight: function () { - this.downlistcombo.adjustHeight(); - } - }); - BI.DownListCombo.EVENT_CHANGE = "EVENT_CHANGE"; - BI.DownListCombo.EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE"; - BI.DownListCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + adjustWidth() { + this.downlistcombo.adjustWidth(); + } - BI.shortcut("bi.down_list_combo", BI.DownListCombo); -}()); + adjustHeight() { + this.downlistcombo.adjustHeight(); + } +} diff --git a/src/widget/downlist/group.downlist.js b/src/widget/downlist/group.downlist.js index c7cc2ce49..2d06f83e0 100644 --- a/src/widget/downlist/group.downlist.js +++ b/src/widget/downlist/group.downlist.js @@ -1,51 +1,62 @@ -/** - * Created by roy on 15/9/6. - */ -BI.DownListGroup = BI.inherit(BI.Widget, { - constants: { - iconCls: "check-mark-ha-font" - }, - _defaultConfig: function () { - return BI.extend(BI.DownListGroup.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-down-list-group", - items: [ - { - el: {} - } - ] - }); - }, - _init: function () { - BI.DownListGroup.superclass._init.apply(this, arguments); - var o = this.options, self = this; - - this.downlistgroup = BI.createWidget({ - element: this, - type: "bi.button_tree", - items: o.items, - chooseType: 0, // 0单选，1多选 - layouts: [{ - type: "bi.vertical", - hgap: 0, - vgap: 0 - }], - value: o.value - }); - this.downlistgroup.on(BI.Controller.EVENT_CHANGE, function (type) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - if(type === BI.Events.CLICK) { - self.fireEvent(BI.DownListGroup.EVENT_CHANGE, arguments); - } - }); - }, - getValue: function () { - return this.downlistgroup.getValue(); - }, - setValue: function (v) { - this.downlistgroup.setValue(v); - } - - -}); -BI.DownListGroup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.down_list_group", BI.DownListGroup); \ No newline at end of file +import { + shortcut, + Widget, + extend, + createWidget, + Controller, + Events +} from "@/core"; + +@shortcut() +export class DownListGroup extends Widget { + static xtype = "bi.down_list_group"; + + constants = { iconCls: "check-mark-ha-font" }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { + baseCls: "bi-down-list-group", + items: [ + { + el: {}, + } + ], + }); + } + + _init() { + super._init(...arguments); + const o = this.options; + + this.downlistgroup = createWidget({ + element: this, + type: "bi.button_tree", + items: o.items, + chooseType: 0, // 0单选，1多选 + layouts: [ + { + type: "bi.vertical", + hgap: 0, + vgap: 0, + } + ], + value: o.value, + }); + this.downlistgroup.on(Controller.EVENT_CHANGE, (type, ...args) => { + this.fireEvent(Controller.EVENT_CHANGE, type, ...args); + if (type === Events.CLICK) { + this.fireEvent(DownListGroup.EVENT_CHANGE, type, ...args); + } + }); + } + + getValue() { + return this.downlistgroup.getValue(); + } + + setValue(v) { + this.downlistgroup.setValue(v); + } +} diff --git a/src/widget/downlist/index.js b/src/widget/downlist/index.js new file mode 100644 index 000000000..07a86df06 --- /dev/null +++ b/src/widget/downlist/index.js @@ -0,0 +1,5 @@ +export { DownListGroup } from "./group.downlist"; +export { DownListItem } from "./item.downlist"; +export { DownListGroupItem } from "./item.downlistgroup"; +export { DownListPopup } from "./popup.downlist"; +export { DownListCombo } from "./combo.downlist"; diff --git a/src/widget/downlist/item.downlist.js b/src/widget/downlist/item.downlist.js index 531806ca0..1a1598490 100644 --- a/src/widget/downlist/item.downlist.js +++ b/src/widget/downlist/item.downlist.js @@ -1,102 +1,125 @@ -BI.DownListItem = BI.inherit(BI.BasicButton, { - _defaultConfig: function () { - var conf = BI.DownListItem.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: "bi-down-list-item bi-list-item-active", - cls: "", - height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - logic: { - dynamic: true - }, - selected: false, - iconHeight: null, - iconWidth: null, - textHgap: 0, - textVgap: 0, - textLgap: 0, - textRgap: 0 - }); - }, - _init: function () { - BI.DownListItem.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.text = BI.createWidget({ - type: "bi.label", - cls: "list-item-text", - textAlign: "left", - hgap: o.textHgap, - vgap: o.textVgap, - lgap: o.textLgap, - rgap: o.textRgap, - text: o.text, - value: o.value, - keyword: o.keyword, - height: o.height - }); - - - var icon = BI.isPlainObject(o.icon) ? o.icon : { - type: "bi.icon", - width: o.iconWidth, - height: o.iconHeight, - } - - this.icon = BI.createWidget({ - type: "bi.center_adapt", - width: 36, - height: o.height, - items: [{ - el: icon, - }], - }); - - BI.createWidget(BI.extend({ - element: this - }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left), BI.extend(o.logic, { - items: BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, this.icon, this.text) - })))); - }, - - setValue: function () { - if (!this.isReadOnly()) { - this.text.setValue.apply(this.text, arguments); - } - }, - - getValue: function () { - return this.text.getValue(); - }, - - setText: function () { - this.text.setText.apply(this.text, arguments); - }, - - getText: function () { - return this.text.getText(); - }, - - doClick: function () { - BI.DownListItem.superclass.doClick.apply(this, arguments); - if (this.isValid()) { - this.fireEvent(BI.DownListItem.EVENT_CHANGE, this.getValue(), this); - } - }, - - doRedMark: function () { - this.text.doRedMark.apply(this.text, arguments); - }, - - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, - - doHighLight: function () { - this.text.doHighLight.apply(this.text, arguments); - }, - - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - } -}); -BI.DownListItem.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.down_list_item", BI.DownListItem); \ No newline at end of file +import { shortcut, extend, createWidget, isPlainObject, LogicFactory, Direction } from "@/core"; +import { BasicButton } from "@/base"; + +@shortcut() +export class DownListItem extends BasicButton { + static xtype = "bi.down_list_item"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: "bi-down-list-item bi-list-item-active", + cls: "", + height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + logic: { + dynamic: true, + }, + selected: false, + iconHeight: null, + iconWidth: null, + textHgap: 0, + textVgap: 0, + textLgap: 0, + textRgap: 0, + }); + } + + _init() { + super._init(...arguments); + const o = this.options; + this.text = createWidget({ + type: "bi.label", + cls: "list-item-text", + textAlign: "left", + hgap: o.textHgap, + vgap: o.textVgap, + lgap: o.textLgap, + rgap: o.textRgap, + text: o.text, + value: o.value, + keyword: o.keyword, + height: o.height, + }); + + const icon = isPlainObject(o.icon) + ? o.icon + : { + type: "bi.icon", + width: o.iconWidth, + height: o.iconHeight, + }; + + this.icon = createWidget({ + type: "bi.center_adapt", + width: 36, + height: o.height, + items: [ + { + el: icon, + } + ], + }); + + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + LogicFactory.createLogicTypeByDirection(Direction.Left), + extend(o.logic, { + items: LogicFactory.createLogicItemsByDirection( + Direction.Left, + this.icon, + this.text + ), + }) + ) + ) + ); + } + + setValue() { + if (!this.isReadOnly()) { + this.text.setValue(...arguments); + } + } + + getValue() { + return this.text.getValue(); + } + + setText() { + this.text.setText(...arguments); + } + + getText() { + return this.text.getText(); + } + + doClick() { + super.doClick(...arguments); + if (this.isValid()) { + this.fireEvent(DownListItem.EVENT_CHANGE, this.getValue(), this); + } + } + + doRedMark() { + this.text.doRedMark(...arguments); + } + + unRedMark() { + this.text.unRedMark(...arguments); + } + + doHighLight() { + this.text.doHighLight(...arguments); + } + + unHighLight() { + this.text.unHighLight(...arguments); + } +} diff --git a/src/widget/downlist/item.downlistgroup.js b/src/widget/downlist/item.downlistgroup.js index df4a09ac7..d2c9d14a7 100644 --- a/src/widget/downlist/item.downlistgroup.js +++ b/src/widget/downlist/item.downlistgroup.js @@ -1,118 +1,141 @@ -BI.DownListGroupItem = BI.inherit(BI.BasicButton, { - _defaultConfig: function () { - var conf = BI.DownListGroupItem.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-down-list-group-item", - logic: { - dynamic: false - }, - // invalid: true, - iconCls1: "dot-e-font", - icon: "", - iconCls2: "pull-right-e-font" - }); - }, - render: function () { - var o = this.options; - var self = this; - this.text = BI.createWidget({ - type: "bi.label", - cls: "list-group-item-text", - textAlign: "left", - text: o.text, - value: o.value, - height: o.height, - }); - - if (BI.isPlainObject(o.icon)) { - this.icon1 = BI.createWidget({ - width: 36, - height: o.height, - type: "bi.center_adapt", - items: [o.icon], - }); - } else { - this.icon1 = BI.createWidget({ - type: "bi.icon_button", - cls: o.iconCls1, - width: 36, - height: o.height, - iconHeight: o.iconHeight, - iconWidth: 36, - disableSelected: true, - selected: this._digest(o.value), - }); - } - - this.icon2 = BI.createWidget({ - type: "bi.icon_button", - cls: o.iconCls2, - width: 24, - forceNotSelected: true - }); - - this.element.hover(function () { - if (self.isEnabled()) { - self.hover(); - } - }, function () { - if (self.isEnabled()) { - self.dishover(); - } - }); - - return { - type: "bi.horizontal_fill", - columnSize: [36, "fill", 24], - items: [this.icon1, this.text, this.icon2] - } - }, - - _getLevel: function () { - var child = BI.first(this.options.childValues); - return BI.isNotNull(child) ? (child + "").split(BI.BlankSplitChar).length : 0; - }, - - _digest: function (v) { - var self = this, o = this.options; - v = BI.isArray(v) ? v : [v]; - var level = this._getLevel(); - return BI.any(v, function (idx, value) { - return BI.contains(o.childValues, (value + "").split(BI.BlankSplitChar).slice(0, level).join(BI.BlankSplitChar)); - }); - }, - - hover: function () { - BI.DownListGroupItem.superclass.hover.apply(this, arguments); - this.icon1.element.addClass("hover"); - this.icon2.element.addClass("hover"); - - }, - - dishover: function () { - BI.DownListGroupItem.superclass.dishover.apply(this, arguments); - this.icon1.element.removeClass("hover"); - this.icon2.element.removeClass("hover"); - }, - - doClick: function () { - BI.DownListGroupItem.superclass.doClick.apply(this, arguments); - if (this.isValid()) { - this.fireEvent(BI.DownListGroupItem.EVENT_CHANGE, this.getValue()); - } - }, - - doRedMark: function () { - this.text.doRedMark.apply(this.text, arguments); - }, - - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, - - setValue: function (v) { - this.icon1.setSelected && this.icon1.setSelected(this._digest(v)); - }, -}); -BI.DownListGroupItem.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.down_list_group_item", BI.DownListGroupItem); +import { + shortcut, + extend, + createWidget, + isNotNull, + isArray, + any, + contains, + isPlainObject, + first, + BlankSplitChar +} from "@/core"; +import { BasicButton } from "@/base"; + +@shortcut() +export class DownListGroupItem extends BasicButton { + static xtype = "bi.down_list_group_item"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-down-list-group-item`, + logic: { + dynamic: false, + }, + // invalid: true, + iconCls1: "dot-e-font", + icon: "", + iconCls2: "pull-right-e-font", + }); + } + + render() { + const o = this.options; + this.text = createWidget({ + type: "bi.label", + cls: "list-group-item-text", + textAlign: "left", + text: o.text, + value: o.value, + height: o.height, + }); + + if (isPlainObject(o.icon)) { + this.icon1 = createWidget({ + width: 36, + height: o.height, + type: "bi.center_adapt", + items: [o.icon], + }); + } else { + this.icon1 = createWidget({ + type: "bi.icon_button", + cls: o.iconCls1, + width: 36, + height: o.height, + iconHeight: o.iconHeight, + iconWidth: 36, + disableSelected: true, + selected: this._digest(o.value), + }); + } + + this.icon2 = createWidget({ + type: "bi.icon_button", + cls: o.iconCls2, + width: 24, + forceNotSelected: true, + }); + + this.element.hover( + () => { + if (this.isEnabled()) { + this.hover(); + } + }, + () => { + if (this.isEnabled()) { + this.dishover(); + } + } + ); + + return { + type: "bi.horizontal_fill", + columnSize: [36, "fill", 24], + items: [this.icon1, this.text, this.icon2], + }; + } + + _getLevel() { + const child = first(this.options.childValues); + + return isNotNull(child) ? (`${child}`).split(BlankSplitChar).length : 0; + } + + _digest(v) { + const o = this.options; + v = isArray(v) ? v : [v]; + const level = this._getLevel(); + + return any(v, (idx, value) => contains( + o.childValues, + (`${value}`).split(BlankSplitChar).slice(0, level).join(BlankSplitChar) + )); + } + + hover() { + super.hover(...arguments); + this.icon1.element.addClass("hover"); + this.icon2.element.addClass("hover"); + } + + dishover() { + super.dishover(...arguments); + this.icon1.element.removeClass("hover"); + this.icon2.element.removeClass("hover"); + } + + doClick() { + super.doClick(...arguments); + if (this.isValid()) { + this.fireEvent(DownListGroupItem.EVENT_CHANGE, this.getValue()); + } + } + + doRedMark() { + this.text.doRedMark(...arguments); + } + + unRedMark() { + this.text.unRedMark(...arguments); + } + + setValue(v) { + this.icon1.setSelected && this.icon1.setSelected(this._digest(v)); + } +} diff --git a/src/widget/downlist/popup.downlist.js b/src/widget/downlist/popup.downlist.js index 0e802a695..9ca7e0edd 100644 --- a/src/widget/downlist/popup.downlist.js +++ b/src/widget/downlist/popup.downlist.js @@ -1,301 +1,332 @@ -/** - * Created by roy on 15/9/8. - * 处理popup中的item分组样式 - * 一个item分组中的成员大于一时，该分组设置为单选，并且默认状态第一个成员设置为已选择项 - */ -BI.DownListPopup = BI.inherit(BI.Pane, { - constants: { - nextIcon: "pull-right-e-font", - height: 24, - iconHeight: 12, - iconWidth: 12, - hgap: 0, - vgap: 0, - border: 1 - }, - _defaultConfig: function () { - var conf = BI.DownListPopup.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: "bi-down-list-popup", - items: [], - chooseType: BI.Selection.Multi - }); - }, - _init: function () { - BI.DownListPopup.superclass._init.apply(this, arguments); - this.singleValues = []; - this.childValueMap = {}; - this.fatherValueMap = {}; - this.items = []; - var self = this, o = this.options, children = this._createPopupItems(o.items); - this.popup = BI.createWidget({ - type: "bi.button_tree", - items: BI.createItems(children, - {}, { - adjustLength: -2 - } - ), - layouts: [{ - type: "bi.vertical", - hgap: this.constants.hgap, - vgap: this.constants.vgap - }], - value: this._digest(o.value), - chooseType: o.chooseType - }); +import { + shortcut, + extend, + createWidget, + createItems, + isNotNull, + contains, + each, + isEmpty, + map, + isNotEmptyString, + isNotEmptyArray, + some, + deepClone +} from "@/core"; +import { Pane, ButtonTree } from "@/base"; - this.popup.on(BI.ButtonTree.EVENT_CHANGE, function (value, object) { - var changedValue = value; - if (BI.isNotNull(self.childValueMap[value])) { - changedValue = self.childValueMap[value]; - self.fireEvent(BI.DownListPopup.EVENT_SON_VALUE_CHANGE, changedValue, self.fatherValueMap[value]); - } else { - self.fireEvent(BI.DownListPopup.EVENT_CHANGE, changedValue, object); - } +@shortcut() +export class DownListPopup extends Pane { + static xtype = "bi.down_list_popup"; + constants = { + nextIcon: "pull-right-e-font", + height: 24, + iconHeight: 12, + iconWidth: 12, + hgap: 0, + vgap: 0, + border: 1, + }; - if (!BI.contains(self.singleValues, changedValue)) { - var item = self.getValue(); - var result = []; - BI.each(item, function (i, valueObject) { - if (valueObject.value != changedValue) { - result.push(valueObject); - } - }); - self.setValue(result); - } + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE"; - }); + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: "bi-down-list-popup", + items: [], + chooseType: Selection.Multi, + }); + } - BI.createWidget({ - type: "bi.vertical", - element: this, - items: [this.popup], - vgap: 5 - }); + _init() { + super._init(...arguments); + this.singleValues = []; + this.childValueMap = {}; + this.fatherValueMap = {}; + this.items = []; + const o = this.options, + children = this._createPopupItems(o.items); + this.popup = createWidget({ + type: "bi.button_tree", + items: createItems( + children, + {}, + { + adjustLength: -2, + } + ), + layouts: [ + { + type: "bi.vertical", + hgap: this.constants.hgap, + vgap: this.constants.vgap, + } + ], + value: this._digest(o.value), + chooseType: o.chooseType, + }); - }, - _createPopupItems: function (items) { - var self = this, result = []; - // 不能修改populate进来的item的引用 - BI.each(items, function (i, it) { - var item_done = { - type: "bi.down_list_group", - items: [] - }; + this.popup.on(ButtonTree.EVENT_CHANGE, (value, object) => { + let changedValue = value; + if (isNotNull(this.childValueMap[value])) { + changedValue = this.childValueMap[value]; + this.fireEvent( + DownListPopup.EVENT_SON_VALUE_CHANGE, + changedValue, + this.fatherValueMap[value] + ); + } else { + this.fireEvent(DownListPopup.EVENT_CHANGE, changedValue, object); + } - var storeItem = []; + if (!contains(this.singleValues, changedValue)) { + const item = this.getValue(); + const result = []; + each(item, (i, valueObject) => { + if (valueObject.value !== changedValue) { + result.push(valueObject); + } + }); + this.setValue(result); + } + }); - BI.each(it, function (i, sourceItem) { - var item = BI.extend({}, sourceItem); - if (BI.isNotEmptyArray(sourceItem.children) && !BI.isEmpty(sourceItem.el)) { - item.type = "bi.combo_group"; - // popup未初始化返回的是options中的value, 在经过buttontree的getValue concat之后，无法区分值来自options - // 还是item自身, 这边控制defaultInit为true来避免这个问题 - item.isDefaultInit = true; - item.cls = "down-list-group"; - item.trigger = "hover"; - item.isNeedAdjustWidth = false; - item.el = sourceItem.el; - item.el.title = sourceItem.el.title || sourceItem.el.text; - item.el.type = "bi.down_list_group_item"; - item.el.logic = { - dynamic: true - }; - item.el.height = sourceItem.el.height || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT; - item.el.iconCls2 = self.constants.nextIcon; - item.popup = { - lgap: 1, - el: { - type: "bi.button_tree", - chooseType: 0, - layouts: [{ - type: "bi.vertical" - }] + createWidget({ + type: "bi.vertical", + element: this, + items: [this.popup], + vgap: 5, + }); + } - }, - innerVgap: 5, - maxHeight: 378 - }; - self._createChildren(item, sourceItem); - } else { - item.type = sourceItem.type || "bi.down_list_item"; - item.title = sourceItem.title || sourceItem.text; - item.textRgap = 10; - item.isNeedAdjustWidth = false; - item.logic = { - dynamic: true - }; - } - var el_done = {}; - el_done.el = item; - item_done.items.push(el_done); - storeItem.push(item); - }); - if (self._isGroup(item_done.items)) { - BI.each(item_done.items, function (i, item) { - self.singleValues.push(item.el.value); - }); - } + _createPopupItems(items) { + const result = []; + // 不能修改populate进来的item的引用 + each(items, (i, it) => { + const item_done = { + type: "bi.down_list_group", + items: [], + }; - result.push(item_done); - self.items.push(storeItem); - if (self._needSpliter(i, items.length)) { - var spliter_container = BI.createWidget({ - type: "bi.vertical", - items: [{ - el: { - type: "bi.layout", - cls: "bi-down-list-spliter bi-split-top cursor-pointer", - height: 0 - } + const storeItem = []; - }], - cls: "bi-down-list-spliter-container cursor-pointer", - vgap: 5, - hgap: 12 - }); - result.push(spliter_container); - } - }); - return result; - }, + each(it, (i, sourceItem) => { + const item = extend({}, sourceItem); + if (isNotEmptyArray(sourceItem.children) && !isEmpty(sourceItem.el)) { + item.type = "bi.combo_group"; + // popup未初始化返回的是options中的value, 在经过buttontree的getValue concat之后，无法区分值来自options + // 还是item自身, 这边控制defaultInit为true来避免这个问题 + item.isDefaultInit = true; + item.cls = "down-list-group"; + item.trigger = "hover"; + item.isNeedAdjustWidth = false; + item.el = sourceItem.el; + item.el.title = sourceItem.el.title || sourceItem.el.text; + item.el.type = "bi.down_list_group_item"; + item.el.logic = { + dynamic: true, + }; + item.el.height = + sourceItem.el.height || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT; + item.el.iconCls2 = this.constants.nextIcon; + item.popup = { + lgap: 1, + el: { + type: "bi.button_tree", + chooseType: 0, + layouts: [ + { + type: "bi.vertical", + } + ], + }, + innerVgap: 5, + maxHeight: 378, + }; + this._createChildren(item, sourceItem); + } else { + item.type = sourceItem.type || "bi.down_list_item"; + item.title = sourceItem.title || sourceItem.text; + item.textRgap = 10; + item.isNeedAdjustWidth = false; + item.logic = { + dynamic: true, + }; + } + const el_done = {}; + el_done.el = item; + item_done.items.push(el_done); + storeItem.push(item); + }); + if (this._isGroup(item_done.items)) { + each(item_done.items, (i, item) => { + this.singleValues.push(item.el.value); + }); + } - _createChildren: function (targetItem, sourceItem) { - var self = this; - targetItem.el.childValues = []; - targetItem.items = targetItem.children = []; - BI.each(sourceItem.children, function (i, child) { - var item = BI.extend({}, child); - var fatherValue = BI.deepClone(targetItem.el.value); - var childValue = BI.deepClone(item.value); - self.singleValues.push(item.value); - item.type = item.type || "bi.down_list_item"; - item.extraCls = " child-down-list-item"; - item.title = item.title || item.text; - item.textRgap = 10; - item.isNeedAdjustWidth = false; - item.logic = { - dynamic: true - }; - item.father = fatherValue; - item.childValue = item.value; - self.fatherValueMap[self._createChildValue(fatherValue, childValue)] = fatherValue; - self.childValueMap[self._createChildValue(fatherValue, childValue)] = childValue; - item.value = self._createChildValue(fatherValue, childValue); - targetItem.el.childValues.push(item.value); - targetItem.items.push(item); - }); - }, + result.push(item_done); + this.items.push(storeItem); + if (this._needSpliter(i, items.length)) { + const spliter_container = createWidget({ + type: "bi.vertical", + items: [ + { + el: { + type: "bi.layout", + cls: "bi-down-list-spliter bi-split-top cursor-pointer", + height: 0, + }, + } + ], + cls: "bi-down-list-spliter-container cursor-pointer", + vgap: 5, + hgap: 12, + }); + result.push(spliter_container); + } + }); + + return result; + } - _isGroup: function (i) { - return i.length > 1; - }, + _createChildren(targetItem, sourceItem) { + targetItem.el.childValues = []; + targetItem.items = targetItem.children = []; + each(sourceItem.children, (i, child) => { + const item = extend({}, child); + const fatherValue = deepClone(targetItem.el.value); + const childValue = deepClone(item.value); + this.singleValues.push(item.value); + item.type = item.type || "bi.down_list_item"; + item.extraCls = " child-down-list-item"; + item.title = item.title || item.text; + item.textRgap = 10; + item.isNeedAdjustWidth = false; + item.logic = { + dynamic: true, + }; + item.father = fatherValue; + item.childValue = item.value; + this.fatherValueMap[this._createChildValue(fatherValue, childValue)] = + fatherValue; + this.childValueMap[this._createChildValue(fatherValue, childValue)] = + childValue; + item.value = this._createChildValue(fatherValue, childValue); + targetItem.el.childValues.push(item.value); + targetItem.items.push(item); + }); + } - _needSpliter: function (i, itemLength) { - return i < itemLength - 1; - }, + _isGroup(i) { + return i.length > 1; + } - _createChildValue: function (fatherValue, childValue) { - return fatherValue + BI.BlankSplitChar + childValue; - }, + _needSpliter(i, itemLength) { + return i < itemLength - 1; + } - _digest: function (valueItem) { - var self = this; - var valueArray = []; - BI.each(valueItem, function (i, item) { - var value; - if (BI.isNotNull(item.childValue)) { - value = self._createChildValue(item.value, item.childValue); - } else { - value = item.value; - } - valueArray.push(value); - } - ); - return valueArray; - }, + _createChildValue(fatherValue, childValue) { + return fatherValue + BI.BlankSplitChar + childValue; + } - _checkValues: function (values) { - var value = []; - BI.each(this.items, function (idx, itemGroup) { - BI.each(itemGroup, function (id, item) { - if(BI.isNotNull(item.children)) { - var childValues = BI.map(item.children, "value"); - var v = joinValue(childValues, values[idx]); - if(BI.isNotEmptyString(v)) { - value.push(v); - } - }else{ - if(item.value === values[idx][0]) { - value.push(values[idx][0]); - } - } - }); - }); - return value; + _digest(valueItem) { + const valueArray = []; + each(valueItem, (i, item) => { + let value; + if (isNotNull(item.childValue)) { + value = this._createChildValue(item.value, item.childValue); + } else { + value = item.value; + } + valueArray.push(value); + }); + + return valueArray; + } - function joinValue (sources, targets) { - var value = ""; - BI.some(sources, function (idx, s) { - return BI.some(targets, function (id, t) { - if(s === t) { - value = s; - return true; - } - }); - }); - return value; - } - }, + _checkValues(values) { + const value = []; + each(this.items, (idx, itemGroup) => { + each(itemGroup, (id, item) => { + if (isNotNull(item.children)) { + const childValues = map(item.children, "value"); + const v = joinValue(childValues, values[idx]); + if (isNotEmptyString(v)) { + value.push(v); + } + } else { + if (item.value === values[idx][0]) { + value.push(values[idx][0]); + } + } + }); + }); + + return value; - populate: function (items) { - BI.DownListPopup.superclass.populate.apply(this, arguments); - this.items = []; - this.childValueMap = {}; - this.fatherValueMap = {}; - this.singleValues = []; - var children = this._createPopupItems(items); - var popupItem = BI.createItems(children, - {}, { - adjustLength: -2 - } - ); - this.popup.populate(popupItem); - }, + function joinValue(sources, targets) { + let value = ""; + some(sources, (idx, s) => some(targets, (id, t) => { + if (s === t) { + value = s; + + return true; + } + })); + + return value; + } + } - setValue: function (valueItem) { - this.popup.setValue(this._digest(valueItem)); - }, + populate(items) { + super.populate(...arguments); + this.items = []; + this.childValueMap = {}; + this.fatherValueMap = {}; + this.singleValues = []; + const children = this._createPopupItems(items); + const popupItem = createItems( + children, + {}, + { + adjustLength: -2, + } + ); + this.popup.populate(popupItem); + } - _getValue: function () { - var v = []; - BI.each(this.popup.getAllButtons(), function (i, item) { - i % 2 === 0 && v.push(item.getValue()); - }); - return v; - }, + setValue(valueItem) { + this.popup.setValue(this._digest(valueItem)); + } - getValue: function () { - var self = this, result = []; - var values = this._checkValues(this._getValue()); - BI.each(values, function (i, value) { - var valueItem = {}; - if (BI.isNotNull(self.childValueMap[value])) { - var fartherValue = self.fatherValueMap[value]; - valueItem.childValue = self.childValueMap[value]; - valueItem.value = fartherValue; - } else { - valueItem.value = value; - } - result.push(valueItem); - }); - return result; - } + _getValue() { + const v = []; + each(this.popup.getAllButtons(), (i, item) => { + i % 2 === 0 && v.push(item.getValue()); + }); + + return v; + } - -}); - -BI.DownListPopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.DownListPopup.EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE"; -BI.shortcut("bi.down_list_popup", BI.DownListPopup); + getValue() { + const result = []; + const values = this._checkValues(this._getValue()); + each(values, (i, value) => { + const valueItem = {}; + if (isNotNull(this.childValueMap[value])) { + const fartherValue = this.fatherValueMap[value]; + valueItem.childValue = this.childValueMap[value]; + valueItem.value = fartherValue; + } else { + valueItem.value = value; + } + result.push(valueItem); + }); + + return result; + } +} diff --git a/src/widget/index.js b/src/widget/index.js index 14146c7ae..874fd77cd 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -7,6 +7,9 @@ import * as datetimepane from "./datetimepane"; import * as dynamicdatetime from "./dynamicdatetime"; import * as time from "./time"; import * as editor from "./editor"; +import * as downList from "./downlist"; +import * as singleSliderItem from "./singleslider"; +import * as intervalSliderItem from "./intervalslider"; import { SelectTreeCombo } from "./selecttree/selecttree.combo"; import { SingleTreeCombo } from "./singletree/singletree.combo"; import { MultiTreeCombo } from "./multitree/multi.tree.combo"; @@ -27,6 +30,9 @@ Object.assign(BI, { ...dynamicdatetime, ...time, ...editor, + ...downList, + ...singleSliderItem, + ...intervalSliderItem, SelectTreeCombo, SingleTreeCombo, MultiTreeCombo, @@ -48,6 +54,9 @@ export * from "./time"; export * from "./editor"; export * from "./multiselect"; export * from "./multiselectlist"; +export * from "./downlist"; +export * from "./singleslider"; +export * from "./intervalslider"; export { Collapse, diff --git a/src/widget/intervalslider/index.js b/src/widget/intervalslider/index.js new file mode 100644 index 000000000..2a99c23bd --- /dev/null +++ b/src/widget/intervalslider/index.js @@ -0,0 +1,2 @@ +export { AccurateCalculationModel } from "./model.accuratecalculation"; +export { IntervalSlider } from "./intervalslider"; diff --git a/src/widget/intervalslider/intervalslider.js b/src/widget/intervalslider/intervalslider.js index 59b1e1676..bd0121523 100644 --- a/src/widget/intervalslider/intervalslider.js +++ b/src/widget/intervalslider/intervalslider.js @@ -1,30 +1,50 @@ -/** - * Created by zcf on 2016/9/26. - */ -BI.IntervalSlider = BI.inherit(BI.Single, { - _constant: { +import { + shortcut, + createWidget, + toPix, + parseFloat, + Layout, + AbsoluteLayout, + clamp, + VerticalLayout, + isEmptyString, + isNumeric, + isNull, + isInteger, + i18nText, + size, + parseInt, + isNotEmptyString, + MouseMoveTracker +} from "@/core"; +import { Single, Editor } from "@/base"; +import { AccurateCalculationModel } from "./model.accuratecalculation"; +import { SignTextEditor, SliderIconButton } from "../singleslider"; + +@shortcut() +export class IntervalSlider extends Single { + static xtype = "bi.interval_slider"; + _constant = { EDITOR_WIDTH: 58, EDITOR_R_GAP: 60, EDITOR_HEIGHT: 20, SLIDER_WIDTH_HALF: 15, SLIDER_WIDTH: 30, SLIDER_HEIGHT: 30, - TRACK_HEIGHT: 24 - }, - - props: { + TRACK_HEIGHT: 24, + } + props = { baseCls: "bi-interval-slider bi-slider-track", digit: false, unit: "", min: 0, max: 100, - value: { - min: "", - max: "", - } - }, + value: { min: "", max: "" }, + }; - beforeMount: function () { + static EVENT_CHANGE = "EVENT_CHANGE"; + + beforeMount() { const { value, min, max } = this.options; this._setMinAndMax({ min, @@ -32,90 +52,104 @@ BI.IntervalSlider = BI.inherit(BI.Single, { }); this.setValue(value); this.populate(); - }, - - render: function () { + } - var self = this; - var c = this._constant; + render() { + const c = this._constant; this.enable = false; this.valueOne = ""; this.valueTwo = ""; - this.calculation = new BI.AccurateCalculationModel(); - this.grayTrack = BI.createWidget({ - type: "bi.layout", + this.calculation = new AccurateCalculationModel(); + this.grayTrack = createWidget({ + type: Layout.xtype, cls: "gray-track", - height: 6 + height: 6, }); - this.blueTrack = BI.createWidget({ - type: "bi.layout", + this.blueTrack = createWidget({ + type: Layout.xtype, cls: "blue-track bi-high-light-background", - height: 6 + height: 6, }); this.track = this._createTrackWrapper(); - this.labelOne = BI.createWidget({ - type: "bi.sign_text_editor", + this.labelOne = createWidget({ + type: SignTextEditor.xtype, cls: "slider-editor-button", text: this.options.unit, allowBlank: false, - width: BI.toPix(c.EDITOR_WIDTH, 2), - height: BI.toPix(c.EDITOR_HEIGHT, 2), - validationChecker: function (v) { - return self._checkValidation(v); - } - }); - this.labelOne.element.hover(function () { - self.labelOne.element.removeClass("bi-border").addClass("bi-border"); - }, function () { - self.labelOne.element.removeClass("bi-border"); + width: toPix(c.EDITOR_WIDTH, 2), + height: toPix(c.EDITOR_HEIGHT, 2), + validationChecker: v => this._checkValidation(v), }); - this.labelOne.on(BI.Editor.EVENT_CONFIRM, function () { - var oldValueOne = self.valueOne; - var v = BI.parseFloat(this.getValue()); - self.valueOne = v; - var percent = self._getPercentByValue(v); - var significantPercent = BI.parseFloat(percent.toFixed(1));// 分成1000份 - self._setSliderOnePosition(significantPercent); - self._setBlueTrack(); - self._checkLabelPosition(oldValueOne, self.valueTwo, self.valueOne, self.valueTwo); - self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); + this.labelOne.element.hover( + () => { + this.labelOne.element + .removeClass("bi-border") + .addClass("bi-border"); + }, + () => { + this.labelOne.element.removeClass("bi-border"); + } + ); + this.labelOne.on(Editor.EVENT_CONFIRM, () => { + const oldValueOne = this.valueOne; + const v = parseFloat(this.getValue()); + this.valueOne = v; + const percent = this._getPercentByValue(v); + const significantPercent = parseFloat(percent.toFixed(1)); // 分成1000份 + this._setSliderOnePosition(significantPercent); + this._setBlueTrack(); + this._checkLabelPosition( + oldValueOne, + this.valueTwo, + this.valueOne, + this.valueTwo + ); + this.fireEvent(IntervalSlider.EVENT_CHANGE); }); - this.labelTwo = BI.createWidget({ - type: "bi.sign_text_editor", + this.labelTwo = createWidget({ + type: SignTextEditor.xtype, cls: "slider-editor-button", text: this.options.unit, allowBlank: false, - width: BI.toPix(c.EDITOR_WIDTH, 2), - height: BI.toPix(c.EDITOR_HEIGHT, 2), - validationChecker: function (v) { - return self._checkValidation(v); - } - }); - this.labelTwo.element.hover(function () { - self.labelTwo.element.removeClass("bi-border").addClass("bi-border"); - }, function () { - self.labelTwo.element.removeClass("bi-border"); + width: toPix(c.EDITOR_WIDTH, 2), + height: toPix(c.EDITOR_HEIGHT, 2), + validationChecker: v => this._checkValidation(v), }); - this.labelTwo.on(BI.Editor.EVENT_CONFIRM, function () { - var oldValueTwo = self.valueTwo; - var v = BI.parseFloat(this.getValue()); - self.valueTwo = v; - var percent = self._getPercentByValue(v); - var significantPercent = BI.parseFloat(percent.toFixed(1)); - self._setSliderTwoPosition(significantPercent); - self._setBlueTrack(); - self._checkLabelPosition(self.valueOne, oldValueTwo, self.valueOne, self.valueTwo); - self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); + this.labelTwo.element.hover( + () => { + this.labelTwo.element + .removeClass("bi-border") + .addClass("bi-border"); + }, + () => { + this.labelTwo.element.removeClass("bi-border"); + } + ); + this.labelTwo.on(Editor.EVENT_CONFIRM, () => { + const oldValueTwo = this.valueTwo; + const v = parseFloat(this.getValue()); + this.valueTwo = v; + const percent = this._getPercentByValue(v); + const significantPercent = parseFloat(percent.toFixed(1)); + this._setSliderTwoPosition(significantPercent); + this._setBlueTrack(); + this._checkLabelPosition( + this.valueOne, + oldValueTwo, + this.valueOne, + this.valueTwo + ); + this.fireEvent(IntervalSlider.EVENT_CHANGE); }); - this.sliderOne = BI.createWidget({ - type: "bi.single_slider_button" + this.sliderOne = createWidget({ + type: SliderIconButton.xtype, }); - this.sliderTwo = BI.createWidget({ - type: "bi.single_slider_button" + this.sliderTwo = createWidget({ + type: SliderIconButton.xtype, }); this._draggable(this.sliderOne, true); this._draggable(this.sliderTwo, false); @@ -127,7 +161,7 @@ BI.IntervalSlider = BI.inherit(BI.Single, { items: [ this._createLabelWrapper(), { - type: "bi.absolute", + type: AbsoluteLayout.xtype, items: [ { el: { @@ -135,75 +169,95 @@ BI.IntervalSlider = BI.inherit(BI.Single, { horizontalAlign: "stretch", verticalAlign: "middle", columnSize: ["fill"], - items: [{ - el: this.track, - }], + items: [ + { + el: this.track, + } + ], hgap: 10, }, - inset: 0 + inset: 0, }, - this._createSliderWrapper(), - ] + this._createSliderWrapper() + ], } - ] + ], }; - }, + } - _rePosBySizeAfterMove: function (size, isLeft) { - var o = this.options; - var percent = size * 100 / (this._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1)); - var v = this._getValueByPercent(significantPercent); + _rePosBySizeAfterMove(size, isLeft) { + const o = this.options; + const percent = (size * 100) / this._getGrayTrackLength(); + const significantPercent = parseFloat(percent.toFixed(1)); + let v = this._getValueByPercent(significantPercent); v = this._assertValue(v); v = o.digit === false ? v : v.toFixed(o.digit); - var oldValueOne = this.valueOne, oldValueTwo = this.valueTwo; - if(isLeft) { + const oldValueOne = this.valueOne, + oldValueTwo = this.valueTwo; + if (isLeft) { this._setSliderOnePosition(significantPercent); this.labelOne.setValue(v); this.valueOne = v; - this._checkLabelPosition(oldValueOne, oldValueTwo, v, this.valueTwo); - }else{ + this._checkLabelPosition( + oldValueOne, + oldValueTwo, + v, + this.valueTwo + ); + } else { this._setSliderTwoPosition(significantPercent); this.labelTwo.setValue(v); this.valueTwo = v; - this._checkLabelPosition(oldValueOne, oldValueTwo, this.valueOne, v); + this._checkLabelPosition( + oldValueOne, + oldValueTwo, + this.valueOne, + v + ); } this._setBlueTrack(); - }, - - _rePosBySizeAfterStop: function (size, isLeft) { - var percent = size * 100 / (this._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1)); - isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent); - }, - - _draggable: function (widget, isLeft) { - var self = this, o = this.options; - var startDrag = false; - var size = 0, offset = 0, defaultSize = 0; - var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) { - if (mouseMoveTracker.isDragging()) { - startDrag = true; - offset += deltaX; - size = optimizeSize(defaultSize + offset); - widget.element.addClass("dragging"); - self._rePosBySizeAfterMove(size, isLeft); - } - }, function () { - if (startDrag === true) { - size = optimizeSize(size); - self._rePosBySizeAfterStop(size, isLeft); - size = 0; - offset = 0; - defaultSize = size; - startDrag = false; - } - widget.element.removeClass("dragging"); - mouseMoveTracker.releaseMouseMoves(); - self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); - }, window); + } + + _rePosBySizeAfterStop(size, isLeft) { + const percent = (size * 100) / this._getGrayTrackLength(); + const significantPercent = parseFloat(percent.toFixed(1)); + isLeft + ? this._setSliderOnePosition(significantPercent) + : this._setSliderTwoPosition(significantPercent); + } + + _draggable(widget, isLeft) { + let startDrag = false; + let size = 0, + offset = 0, + defaultSize = 0; + const mouseMoveTracker = new MouseMoveTracker( + (deltaX => { + if (mouseMoveTracker.isDragging()) { + startDrag = true; + offset += deltaX; + size = optimizeSize(defaultSize + offset); + widget.element.addClass("dragging"); + this._rePosBySizeAfterMove(size, isLeft); + } + }), + (() => { + if (startDrag === true) { + size = optimizeSize(size); + this._rePosBySizeAfterStop(size, isLeft); + size = 0; + offset = 0; + defaultSize = size; + startDrag = false; + } + widget.element.removeClass("dragging"); + mouseMoveTracker.releaseMouseMoves(); + this.fireEvent(IntervalSlider.EVENT_CHANGE); + }), + window + ); widget.element.on("mousedown", function (event) { - if(!widget.isEnabled()) { + if (!widget.isEnabled()) { return; } defaultSize = this.offsetLeft; @@ -211,42 +265,47 @@ BI.IntervalSlider = BI.inherit(BI.Single, { mouseMoveTracker.captureMouseMoves(event); }); - function optimizeSize (s) { - return BI.clamp(s, 0, self._getGrayTrackLength()); - } - }, + const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength()); + } - _createLabelWrapper: function () { - var c = this._constant; + _createLabelWrapper() { + const c = this._constant; + return { el: { - type: "bi.vertical", - items: [{ - type: "bi.absolute", - items: [{ - el: this.labelOne, - top: 0, - left: 0, - }] - }, { - type: "bi.absolute", - items: [{ - el: this.labelTwo, - top: 0, - right: 0, - }] - }], + type: VerticalLayout.xtype, + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.labelOne, + top: 0, + left: 0, + } + ], + }, + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.labelTwo, + top: 0, + right: 0, + } + ], + } + ], rgap: c.EDITOR_R_GAP, - height: c.SLIDER_HEIGHT + height: c.SLIDER_HEIGHT, }, top: 0, left: 0, - width: "100%" + width: "100%", }; - }, + } - _createSliderWrapper: function () { - var c = this._constant; + _createSliderWrapper() { return { el: { type: "bi.horizontal", @@ -254,7 +313,7 @@ BI.IntervalSlider = BI.inherit(BI.Single, { verticalAlign: "middle", items: [ { - type: "bi.absolute", + type: AbsoluteLayout.xtype, height: 12, width: "fill", items: [ @@ -262,24 +321,25 @@ BI.IntervalSlider = BI.inherit(BI.Single, { el: this.sliderOne, top: 0, bottom: 0, - left: 0 - }, { + left: 0, + }, + { el: this.sliderTwo, top: 0, bottom: 0, - left: "100%" + left: "100%", } ], } ], hgap: 10, }, - inset: 0 + inset: 0, }; - }, + } - _createTrackWrapper: function () { - return BI.createWidget({ + _createTrackWrapper() { + return createWidget({ type: "bi.horizontal", cls: "track-wrapper", horizontalAlign: "stretch", @@ -288,100 +348,110 @@ BI.IntervalSlider = BI.inherit(BI.Single, { scrollx: false, items: [ { - type: "bi.absolute", + type: AbsoluteLayout.xtype, height: 6, - items: [{ - el: this.grayTrack, - top: 0, - left: 0, - bottom: 0, - width: "100%" - }, { - el: this.blueTrack, - top: 0, - left: 0, - bottom: 0, - width: "0%" - }] + items: [ + { + el: this.grayTrack, + top: 0, + left: 0, + bottom: 0, + width: "100%", + }, + { + el: this.blueTrack, + top: 0, + left: 0, + bottom: 0, + width: "0%", + } + ], } ], }); - }, + } - _checkValidation: function (v) { - var o = this.options; - var valid = false; + _checkValidation(v) { + const o = this.options; + let valid = false; // 像90.这样的既不属于整数又不属于小数，是不合法的值 - var dotText = (v + "").split(".")[1]; - if (BI.isEmptyString(dotText)) { - }else{ - if (BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)) { + let dotText = (`${v}`).split(".")[1]; + // eslint-disable-next-line no-empty + if (isEmptyString(dotText)) { + } else { + if (isNumeric(v) && !(isNull(v) || v < this.min || v > this.max)) { // 虽然规定了所填写的小数位数，但是我们认为所有的整数都是满足设置的小数位数的 // 100等价于100.0 100.00 100.000 - if(o.digit === false || BI.isInteger(v)) { + if (o.digit === false || isInteger(v)) { valid = true; - }else{ + } else { dotText = dotText || ""; - valid = (dotText.length === o.digit); + valid = dotText.length === o.digit; } } } + return valid; - }, + } - _checkOverlap: function () { - var labelOneLeft = this.labelOne.element[0].offsetLeft; - var labelTwoLeft = this.labelTwo.element[0].offsetLeft; + _checkOverlap() { + const labelOneLeft = this.labelOne.element[0].offsetLeft; + const labelTwoLeft = this.labelTwo.element[0].offsetLeft; if (labelOneLeft <= labelTwoLeft) { - if ((labelTwoLeft - labelOneLeft) < 90) { - this.labelTwo.element.css({top: 40}); + if (labelTwoLeft - labelOneLeft < 90) { + this.labelTwo.element.css({ top: 40 }); } else { - this.labelTwo.element.css({top: 0}); + this.labelTwo.element.css({ top: 0 }); } } else { - if ((labelOneLeft - labelTwoLeft) < 90) { - this.labelTwo.element.css({top: 40}); + if (labelOneLeft - labelTwoLeft < 90) { + this.labelTwo.element.css({ top: 40 }); } else { - this.labelTwo.element.css({top: 0}); + this.labelTwo.element.css({ top: 0 }); } } - }, - - _checkLabelPosition: function (oldValueOne, oldValueTwo, valueOne, valueTwo, isLeft) { - oldValueOne = BI.parseFloat(oldValueOne); - oldValueTwo = BI.parseFloat(oldValueTwo); - valueOne = BI.parseFloat(valueOne); - valueTwo = BI.parseFloat(valueTwo); - if((oldValueOne <= oldValueTwo && valueOne > valueTwo) || (oldValueOne >= oldValueTwo && valueOne < valueTwo)) { - var isSliderOneLeft = BI.parseFloat(this.labelOne.getValue()) < BI.parseFloat(this.labelTwo.getValue()); + } + + _checkLabelPosition(oldValueOne, oldValueTwo, valueOne, valueTwo, isLeft) { + oldValueOne = parseFloat(oldValueOne); + oldValueTwo = parseFloat(oldValueTwo); + valueOne = parseFloat(valueOne); + valueTwo = parseFloat(valueTwo); + if ( + (oldValueOne <= oldValueTwo && valueOne > valueTwo) || + (oldValueOne >= oldValueTwo && valueOne < valueTwo) + ) { + const isSliderOneLeft = + parseFloat(this.labelOne.getValue()) < + parseFloat(this.labelTwo.getValue()); this._resetLabelPosition(!isSliderOneLeft); } - }, + } - _resetLabelPosition: function(needReverse) { - this.labelOne.element.css({left: needReverse ? "100%" : "0%"}); - this.labelTwo.element.css({left: needReverse ? "0%" : "100%"}); - }, + _resetLabelPosition(needReverse) { + this.labelOne.element.css({ left: needReverse ? "100%" : "0%" }); + this.labelTwo.element.css({ left: needReverse ? "0%" : "100%" }); + } - _setSliderOnePosition: function (percent) { - this.sliderOne.element.css({left: percent + "%"}); - }, + _setSliderOnePosition(percent) { + this.sliderOne.element.css({ left: `${percent}%` }); + } - _setSliderTwoPosition: function (percent) { - this.sliderTwo.element.css({left: percent + "%"}); - }, + _setSliderTwoPosition(percent) { + this.sliderTwo.element.css({ left: `${percent}%` }); + } - _setBlueTrackLeft: function (percent) { - this.blueTrack.element.css({left: percent + "%"}); - }, + _setBlueTrackLeft(percent) { + this.blueTrack.element.css({ left: `${percent}%` }); + } - _setBlueTrackWidth: function (percent) { - this.blueTrack.element.css({width: percent + "%"}); - }, + _setBlueTrackWidth(percent) { + this.blueTrack.element.css({ width: `${percent}%` }); + } - _setBlueTrack: function () { - var percentOne = this._getPercentByValue(this.labelOne.getValue()); - var percentTwo = this._getPercentByValue(this.labelTwo.getValue()); + _setBlueTrack() { + const percentOne = this._getPercentByValue(this.labelOne.getValue()); + const percentTwo = this._getPercentByValue(this.labelTwo.getValue()); if (percentOne <= percentTwo) { this._setBlueTrackLeft(percentOne); this._setBlueTrackWidth(percentTwo - percentOne); @@ -389,133 +459,165 @@ BI.IntervalSlider = BI.inherit(BI.Single, { this._setBlueTrackLeft(percentTwo); this._setBlueTrackWidth(percentOne - percentTwo); } - }, + } - _setAllPosition: function (one, two) { + _setAllPosition(one, two) { this._setSliderOnePosition(one); this._setSliderTwoPosition(two); this._setBlueTrack(); - }, + } - _setVisible: function (visible) { + _setVisible(visible) { this.sliderOne.setVisible(visible); this.sliderTwo.setVisible(visible); this.labelOne.setVisible(visible); this.labelTwo.setVisible(visible); - }, + } - _setErrorText: function () { - var errorText = BI.i18nText("BI-Basic_Please_Enter_Number_Between", this.min, this.max); + _setErrorText() { + const errorText = i18nText( + "BI-Basic_Please_Enter_Number_Between", + this.min, + this.max + ); this.labelOne.setErrorText(errorText); this.labelTwo.setErrorText(errorText); - }, + } - _getGrayTrackLength: function () { + _getGrayTrackLength() { return this.grayTrack.element[0].scrollWidth; - }, + } - // 其中取max-min后保留4为有效数字后的值的小数位数为最终value的精度 - // 端点处的值有可能因为min,max相差量级很大(precision很大)而丢失精度，此时直接返回端点值即可 - _getValueByPercent: function (percent) {// return (((max-min)*percent)/100+min) + _getValueByPercent(percent) { + // return (((max-min)*percent)/100+min) if (percent === 0) { return this.min; } if (percent === 100) { return this.max; } - var sub = this.calculation.accurateSubtraction(this.max, this.min); - var mul = this.calculation.accurateMultiplication(sub, percent); - var div = this.calculation.accurateDivisionTenExponent(mul, 2); - if(this.precision < 0) { - var value = BI.parseFloat(this.calculation.accurateAddition(div, this.min)); - var reduceValue = Math.round(this.calculation.accurateDivisionTenExponent(value, -this.precision)); - return this.calculation.accurateMultiplication(reduceValue, Math.pow(10, -this.precision)); + const sub = this.calculation.accurateSubtraction(this.max, this.min); + const mul = this.calculation.accurateMultiplication(sub, percent); + const div = this.calculation.accurateDivisionTenExponent(mul, 2); + if (this.precision < 0) { + const value = parseFloat( + this.calculation.accurateAddition(div, this.min) + ); + const reduceValue = Math.round( + this.calculation.accurateDivisionTenExponent( + value, + -this.precision + ) + ); + + return this.calculation.accurateMultiplication( + reduceValue, + Math.pow(10, -this.precision) + ); } - return BI.parseFloat(this.calculation.accurateAddition(div, this.min).toFixed(this.precision)); - - }, + + return parseFloat( + this.calculation + .accurateAddition(div, this.min) + .toFixed(this.precision) + ); + } - _getPercentByValue: function (v) { - return (v - this.min) * 100 / (this.max - this.min); - }, + _getPercentByValue(v) { + return ((v - this.min) * 100) / (this.max - this.min); + } - _getPrecision: function () { + _getPrecision() { // 计算每一份值的精度(最大值和最小值的差值保留4为有效数字后的精度) // 如果差值的整数位数大于4,toPrecision(4)得到的是科学计数法123456 => 1.235e+5 // 返回非负值: 保留的小数位数 // 返回负值: 保留的10^n精度中的n - var sub = this.calculation.accurateSubtraction(this.max, this.min); - var pre = sub.toPrecision(4); + const sub = this.calculation.accurateSubtraction(this.max, this.min); + const pre = sub.toPrecision(4); // 科学计数法 - var eIndex = pre.indexOf("e"); - var arr = []; - if(eIndex > -1) { + const eIndex = pre.indexOf("e"); + let arr = []; + if (eIndex > -1) { arr = pre.split("e"); - var decimalPartLength = BI.size(arr[0].split(".")[1]); - var sciencePartLength = BI.parseInt(arr[1].substring(1)); + const decimalPartLength = size(arr[0].split(".")[1]); + const sciencePartLength = parseInt(arr[1].substring(1)); + return decimalPartLength - sciencePartLength; } arr = pre.split("."); + return arr.length > 1 ? arr[1].length : 0; + } - }, - - _assertValue: function (value) { - if(value <= this.min) { + _assertValue(value) { + if (value <= this.min) { return this.min; } - if(value >= this.max) { + if (value >= this.max) { return this.max; } + return value; - }, + } - _setEnable: function (b) { - BI.IntervalSlider.superclass._setEnable.apply(this, [b]); - if(b) { - this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track"); + _setEnable(b) { + super._setEnable.apply(this, [b]); + if (b) { + this.blueTrack.element + .removeClass("disabled-blue-track") + .addClass("blue-track"); } else { - this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track"); + this.blueTrack.element + .removeClass("blue-track") + .addClass("disabled-blue-track"); } - }, + } - getValue: function () { + getValue() { if (this.valueOne <= this.valueTwo) { - return {min: this.valueOne, max: this.valueTwo}; + return { min: this.valueOne, max: this.valueTwo }; } - return {min: this.valueTwo, max: this.valueOne}; - - }, + + return { min: this.valueTwo, max: this.valueOne }; + } - _setMinAndMax: function (v) { - var minNumber = BI.parseFloat(v.min); - var maxNumber = BI.parseFloat(v.max); - if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber >= minNumber)) { + _setMinAndMax(v) { + const minNumber = parseFloat(v.min); + const maxNumber = parseFloat(v.max); + if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber >= minNumber) { this.min = minNumber; this.max = maxNumber; this.valueOne = minNumber; this.valueTwo = maxNumber; this.precision = this._getPrecision(); } - }, + } - setMinAndMax: function (v) { + setMinAndMax(v) { this._setMinAndMax(v); this.setEnable(v.min <= v.max); - }, - - setValue: function (v) { - var o = this.options; - var valueOne = BI.parseFloat(v.min); - var valueTwo = BI.parseFloat(v.max); - valueOne = o.digit === false ? valueOne : BI.parseFloat(valueOne.toFixed(o.digit)); - valueTwo = o.digit === false ? valueTwo : BI.parseFloat(valueTwo.toFixed(o.digit)); + } + + setValue(v) { + const o = this.options; + let valueOne = parseFloat(v.min); + let valueTwo = parseFloat(v.max); + valueOne = + o.digit === false + ? valueOne + : parseFloat(valueOne.toFixed(o.digit)); + valueTwo = + o.digit === false + ? valueTwo + : parseFloat(valueTwo.toFixed(o.digit)); if (!isNaN(valueOne) && !isNaN(valueTwo)) { if (this._checkValidation(valueOne)) { - this.valueOne = (this.valueOne <= this.valueTwo ? valueOne : valueTwo); + this.valueOne = + this.valueOne <= this.valueTwo ? valueOne : valueTwo; } if (this._checkValidation(valueTwo)) { - this.valueTwo = (this.valueOne <= this.valueTwo ? valueTwo : valueOne); + this.valueTwo = + this.valueOne <= this.valueTwo ? valueTwo : valueOne; } if (valueOne < this.min) { this.valueOne = this.min; @@ -524,9 +626,9 @@ BI.IntervalSlider = BI.inherit(BI.Single, { this.valueTwo = this.max; } } - }, + } - reset: function () { + reset() { this._setVisible(false); this.enable = false; this.valueOne = ""; @@ -534,18 +636,32 @@ BI.IntervalSlider = BI.inherit(BI.Single, { this.min = NaN; this.max = NaN; this._setBlueTrackWidth(0); - }, + } - populate: function () { - var o = this.options; + populate() { + const o = this.options; if (!isNaN(this.min) && !isNaN(this.max)) { this.enable = true; this._setVisible(true); this._setErrorText(); - if ((BI.isNumeric(this.valueOne) || BI.isNotEmptyString(this.valueOne)) && (BI.isNumeric(this.valueTwo) || BI.isNotEmptyString(this.valueTwo))) { - this.labelOne.setValue(o.digit === false ? this.valueOne : BI.parseFloat(this.valueOne).toFixed(o.digit)); - this.labelTwo.setValue(o.digit === false ? this.valueTwo : BI.parseFloat(this.valueTwo).toFixed(o.digit)); - this._setAllPosition(this._getPercentByValue(this.valueOne), this._getPercentByValue(this.valueTwo)); + if ( + (isNumeric(this.valueOne) || isNotEmptyString(this.valueOne)) && + (isNumeric(this.valueTwo) || isNotEmptyString(this.valueTwo)) + ) { + this.labelOne.setValue( + o.digit === false + ? this.valueOne + : parseFloat(this.valueOne).toFixed(o.digit) + ); + this.labelTwo.setValue( + o.digit === false + ? this.valueTwo + : parseFloat(this.valueTwo).toFixed(o.digit) + ); + this._setAllPosition( + this._getPercentByValue(this.valueOne), + this._getPercentByValue(this.valueTwo) + ); } else { this.labelOne.setValue(this.min); this.labelTwo.setValue(this.max); @@ -554,6 +670,4 @@ BI.IntervalSlider = BI.inherit(BI.Single, { this._resetLabelPosition(this.valueOne > this.valueTwo); } } -}); -BI.IntervalSlider.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.interval_slider", BI.IntervalSlider); +} diff --git a/src/widget/intervalslider/model.accuratecalculation.js b/src/widget/intervalslider/model.accuratecalculation.js index aa430dad1..fcc944e78 100644 --- a/src/widget/intervalslider/model.accuratecalculation.js +++ b/src/widget/intervalslider/model.accuratecalculation.js @@ -1,172 +1,239 @@ -/** - * Created by zcf on 2017/3/1. - * 万恶的IEEE-754 - * 使用字符串精确计算含小数加法、减法、乘法和10的指数倍除法，支持负数 - */ -BI.AccurateCalculationModel = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.AccurateCalculationModel.superclass._defaultConfig.apply(this, arguments), { - baseCls: "" +import { Widget, extend, parseInt, parseFloat } from "@/core"; + +export class AccurateCalculationModel extends Widget { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { + baseCls: "", }); - }, + } - _init: function () { - BI.AccurateCalculationModel.superclass._init.apply(this, arguments); - }, + _init() { + super._init(...arguments); + } - _getMagnitude: function (n) { - var magnitude = "1"; - for (var i = 0; i < n; i++) { + _getMagnitude(n) { + let magnitude = "1"; + for (let i = 0; i < n; i++) { magnitude += "0"; } - return BI.parseInt(magnitude); - }, + + return parseInt(magnitude); + } - _formatDecimal: function (stringNumber1, stringNumber2) { + _formatDecimal(stringNumber1, stringNumber2) { if (stringNumber1.numDecimalLength === stringNumber2.numDecimalLength) { return; } - var magnitudeDiff = stringNumber1.numDecimalLength - stringNumber2.numDecimalLength; + let magnitudeDiff = + stringNumber1.numDecimalLength - stringNumber2.numDecimalLength; + let needAddZero; if (magnitudeDiff > 0) { - var needAddZero = stringNumber2; + needAddZero = stringNumber2; } else { - var needAddZero = stringNumber1; - magnitudeDiff = (0 - magnitudeDiff); + needAddZero = stringNumber1; + magnitudeDiff = 0 - magnitudeDiff; } - for (var i = 0; i < magnitudeDiff; i++) { + for (let i = 0; i < magnitudeDiff; i++) { if (needAddZero.numDecimal === "0" && i === 0) { continue; } needAddZero.numDecimal += "0"; } - }, + } - _stringNumberFactory: function (num) { - var strNum = num.toString(); - var numStrArray = strNum.split("."); - var numInteger = numStrArray[0]; + _stringNumberFactory(num) { + const strNum = num.toString(); + const numStrArray = strNum.split("."); + const numInteger = numStrArray[0]; + let numDecimal; + let numDecimalLength; if (numStrArray.length === 1) { - var numDecimal = "0"; - var numDecimalLength = 0; + numDecimal = "0"; + numDecimalLength = 0; } else { - var numDecimal = numStrArray[1]; - var numDecimalLength = numStrArray[1].length; + numDecimal = numStrArray[1]; + numDecimalLength = numStrArray[1].length; } + return { - numInteger: numInteger, - numDecimal: numDecimal, - numDecimalLength: numDecimalLength + numInteger, + numDecimal, + numDecimalLength, }; - }, + } - _accurateSubtraction: function (num1, num2) {// num1-num2 && num1>num2 - var stringNumber1 = this._stringNumberFactory(num1); - var stringNumber2 = this._stringNumberFactory(num2); + _accurateSubtraction(num1, num2) { + // num1-num2 && num1>num2 + const stringNumber1 = this._stringNumberFactory(num1); + const stringNumber2 = this._stringNumberFactory(num2); // 整数部分计算 - var integerResult = BI.parseInt(stringNumber1.numInteger) - BI.parseInt(stringNumber2.numInteger); + let integerResult = + parseInt(stringNumber1.numInteger) - + parseInt(stringNumber2.numInteger); // 小数部分 this._formatDecimal(stringNumber1, stringNumber2); - var decimalMaxLength = getDecimalMaxLength(stringNumber1, stringNumber2); + const decimalMaxLength = getDecimalMaxLength( + stringNumber1, + stringNumber2 + ); - if (BI.parseInt(stringNumber1.numDecimal) >= BI.parseInt(stringNumber2.numDecimal)) { - var decimalResultTemp = (BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString(); - var decimalResult = addZero(decimalResultTemp, decimalMaxLength); - } else {// 否则借位 + let decimalResultTemp; + let decimalResult; + + if ( + parseInt(stringNumber1.numDecimal) >= + parseInt(stringNumber2.numDecimal) + ) { + decimalResultTemp = ( + parseInt(stringNumber1.numDecimal) - + parseInt(stringNumber2.numDecimal) + ).toString(); + decimalResult = addZero(decimalResultTemp, decimalMaxLength); + } else { + // 否则借位 integerResult--; - var borrow = this._getMagnitude(decimalMaxLength); - var decimalResultTemp = (borrow + BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString(); - var decimalResult = addZero(decimalResultTemp, decimalMaxLength); + const borrow = this._getMagnitude(decimalMaxLength); + decimalResultTemp = ( + borrow + + parseInt(stringNumber1.numDecimal) - + parseInt(stringNumber2.numDecimal) + ).toString(); + decimalResult = addZero(decimalResultTemp, decimalMaxLength); } - var result = integerResult + "." + decimalResult; - return BI.parseFloat(result); + const result = `${integerResult}.${decimalResult}`; + + return parseFloat(result); - function getDecimalMaxLength (num1, num2) { + function getDecimalMaxLength(num1, num2) { if (num1.numDecimal.length >= num2.numDecimal.length) { return num1.numDecimal.length; } + return num2.numDecimal.length; } - function addZero (resultTemp, length) { - var diff = length - resultTemp.length; - for (var i = 0; i < diff; i++) { - resultTemp = "0" + resultTemp; + function addZero(resultTemp, length) { + const diff = length - resultTemp.length; + for (let i = 0; i < diff; i++) { + resultTemp = `0${resultTemp}`; } + return resultTemp; } - }, + } - _accurateAddition: function (num1, num2) {// 加法结合律 - var stringNumber1 = this._stringNumberFactory(num1); - var stringNumber2 = this._stringNumberFactory(num2); + _accurateAddition(num1, num2) { + // 加法结合律 + const stringNumber1 = this._stringNumberFactory(num1); + const stringNumber2 = this._stringNumberFactory(num2); // 整数部分计算 - var integerResult = BI.parseInt(stringNumber1.numInteger) + BI.parseInt(stringNumber2.numInteger); + let integerResult = + parseInt(stringNumber1.numInteger) + + parseInt(stringNumber2.numInteger); // 小数部分 this._formatDecimal(stringNumber1, stringNumber2); - var decimalResult = (BI.parseInt(stringNumber1.numDecimal) + BI.parseInt(stringNumber2.numDecimal)).toString(); + let decimalResult = ( + parseInt(stringNumber1.numDecimal) + + parseInt(stringNumber2.numDecimal) + ).toString(); if (decimalResult !== "0") { if (decimalResult.length <= stringNumber1.numDecimal.length) { - decimalResult = addZero(decimalResult, stringNumber1.numDecimal.length); + decimalResult = addZero( + decimalResult, + stringNumber1.numDecimal.length + ); } else { - integerResult++;// 进一 + integerResult++; // 进一 decimalResult = decimalResult.slice(1); } } - var result = integerResult + "." + decimalResult; - return BI.parseFloat(result); + const result = `${integerResult}.${decimalResult}`; + + return parseFloat(result); - function addZero (resultTemp, length) { - var diff = length - resultTemp.length; - for (var i = 0; i < diff; i++) { - resultTemp = "0" + resultTemp; + function addZero(resultTemp, length) { + const diff = length - resultTemp.length; + for (let i = 0; i < diff; i++) { + resultTemp = `0${resultTemp}`; } + return resultTemp; } - }, + } - _accurateMultiplication: function (num1, num2) {// 乘法分配律 - var stringNumber1 = this._stringNumberFactory(num1); - var stringNumber2 = this._stringNumberFactory(num2); + _accurateMultiplication(num1, num2) { + // 乘法分配律 + const stringNumber1 = this._stringNumberFactory(num1); + const stringNumber2 = this._stringNumberFactory(num2); // 整数部分计算 - var integerResult = BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numInteger); + const integerResult = + parseInt(stringNumber1.numInteger) * + parseInt(stringNumber2.numInteger); // num1的小数和num2的整数 - var dec1Int2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numInteger), stringNumber1.numDecimalLength); + const dec1Int2 = this._accurateDivisionTenExponent( + parseInt(stringNumber1.numDecimal) * + parseInt(stringNumber2.numInteger), + stringNumber1.numDecimalLength + ); // num1的整数和num2的小数 - var int1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numDecimal), stringNumber2.numDecimalLength); + const int1dec2 = this._accurateDivisionTenExponent( + parseInt(stringNumber1.numInteger) * + parseInt(stringNumber2.numDecimal), + stringNumber2.numDecimalLength + ); // 小数*小数 - var dec1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numDecimal), (stringNumber1.numDecimalLength + stringNumber2.numDecimalLength)); + const dec1dec2 = this._accurateDivisionTenExponent( + parseInt(stringNumber1.numDecimal) * + parseInt(stringNumber2.numDecimal), + stringNumber1.numDecimalLength + stringNumber2.numDecimalLength + ); - return this._accurateAddition(this._accurateAddition(this._accurateAddition(integerResult, dec1Int2), int1dec2), dec1dec2); - }, + return this._accurateAddition( + this._accurateAddition( + this._accurateAddition(integerResult, dec1Int2), + int1dec2 + ), + dec1dec2 + ); + } - _accurateDivisionTenExponent: function (num, n) {// num/10^n && n>0 - var stringNumber = this._stringNumberFactory(num); + _accurateDivisionTenExponent(num, n) { + // num/10^n && n>0 + const stringNumber = this._stringNumberFactory(num); + let integerResult, partDecimalResult; if (stringNumber.numInteger.length > n) { - var integerResult = stringNumber.numInteger.slice(0, (stringNumber.numInteger.length - n)); - var partDecimalResult = stringNumber.numInteger.slice(-n); + integerResult = stringNumber.numInteger.slice( + 0, + stringNumber.numInteger.length - n + ); + partDecimalResult = stringNumber.numInteger.slice(-n); } else { - var integerResult = "0"; - var partDecimalResult = addZero(stringNumber.numInteger, n); + integerResult = "0"; + partDecimalResult = addZero(stringNumber.numInteger, n); } - var result = integerResult + "." + partDecimalResult + stringNumber.numDecimal; - return BI.parseFloat(result); + const result = + `${integerResult}.${partDecimalResult}${stringNumber.numDecimal}`; + + return parseFloat(result); - function addZero (resultTemp, length) { - var diff = length - resultTemp.length; - for (var i = 0; i < diff; i++) { - resultTemp = "0" + resultTemp; + function addZero(resultTemp, length) { + const diff = length - resultTemp.length; + for (let i = 0; i < diff; i++) { + resultTemp = `0${resultTemp}`; } + return resultTemp; } - }, + } - accurateSubtraction: function (num1, num2) { + accurateSubtraction(num1, num2) { if (num1 >= 0 && num2 >= 0) { if (num1 >= num2) { return this._accurateSubtraction(num1, num2); } + return -this._accurateSubtraction(num2, num1); } if (num1 >= 0 && num2 < 0) { @@ -179,11 +246,12 @@ BI.AccurateCalculationModel = BI.inherit(BI.Widget, { if (num1 >= num2) { return this._accurateSubtraction(-num2, -num1); } + return this._accurateSubtraction(-num1, -num2); } - }, + } - accurateAddition: function (num1, num2) { + accurateAddition(num1, num2) { if (num1 >= 0 && num2 >= 0) { return this._accurateAddition(num1, num2); } @@ -196,9 +264,9 @@ BI.AccurateCalculationModel = BI.inherit(BI.Widget, { if (num1 < 0 && num2 < 0) { return -this._accurateAddition(-num1, -num2); } - }, + } - accurateMultiplication: function (num1, num2) { + accurateMultiplication(num1, num2) { if (num1 >= 0 && num2 >= 0) { return this._accurateMultiplication(num1, num2); } @@ -211,12 +279,13 @@ BI.AccurateCalculationModel = BI.inherit(BI.Widget, { if (num1 < 0 && num2 < 0) { return this._accurateMultiplication(-num1, -num2); } - }, + } - accurateDivisionTenExponent: function (num1, n) { + accurateDivisionTenExponent(num1, n) { if (num1 >= 0) { return this._accurateDivisionTenExponent(num1, n); } + return -this._accurateDivisionTenExponent(-num1, n); } -}); \ No newline at end of file +} diff --git a/src/widget/singleslider/button/editor.sign.text.js b/src/widget/singleslider/button/editor.sign.text.js index 281c7b0e1..09eb164db 100644 --- a/src/widget/singleslider/button/editor.sign.text.js +++ b/src/widget/singleslider/button/editor.sign.text.js @@ -1,196 +1,217 @@ -BI.SignTextEditor = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.SignTextEditor.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-sign-initial-editor", - validationChecker: BI.emptyFn, +import { + shortcut, + Widget, + extend, + emptyFn, + createWidget, + nextTick, + Controller, + AbsoluteLayout, + VerticalLayout, + bind, + isEmpty, + isKey +} from "@/core"; +import { TextButton, Editor } from "@/base"; + +@shortcut() +export class SignTextEditor extends Widget { + static xtype = "bi.sign_text_editor"; + + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; + static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-sign-initial-editor`, + validationChecker: emptyFn, text: "", - height: 24 + height: 24, }); - }, + } - _init: function () { - BI.SignTextEditor.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget({ - type: "bi.editor", + _init() { + super._init(...arguments); + const o = this.options; + this.editor = createWidget({ + type: Editor.xtype, simple: o.simple, height: o.height, hgap: 4, vgap: 2, value: o.value, validationChecker: o.validationChecker, - allowBlank: false + allowBlank: false, }); - this.text = BI.createWidget({ - type: "bi.text_button", + this.text = createWidget({ + type: TextButton.xtype, cls: "sign-editor-text", - title: function () { - return self.getValue(); - }, + title: () => this.getValue(), textAlign: o.textAlign, height: o.height, hgap: 4, - handler: function () { - self._showInput(); - self.editor.focus(); - self.editor.selectAll(); - } + handler: () => { + this._showInput(); + this.editor.focus(); + this.editor.selectAll(); + }, }); - this.text.on(BI.TextButton.EVENT_CHANGE, function () { - BI.nextTick(function () { - self.fireEvent(BI.SignTextEditor.EVENT_CLICK_LABEL); + this.text.on(TextButton.EVENT_CHANGE, () => { + nextTick(() => { + this.fireEvent(SignTextEditor.EVENT_CLICK_LABEL); }); }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.text, - left: 0, - right: 0, - top: 0, - bottom: 0 - }] + items: [ + { + el: this.text, + left: 0, + right: 0, + top: 0, + bottom: 0, + } + ], }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.Editor.EVENT_CONFIRM, function () { - self._showHint(); - self._checkText(); - self.fireEvent(BI.SignTextEditor.EVENT_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CONFIRM, (...args) => { + this._showHint(); + this._checkText(); + this.fireEvent(SignTextEditor.EVENT_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { - self._showHint(); - self._checkText(); - self.fireEvent(BI.SignTextEditor.EVENT_CHANGE_CONFIRM, arguments); + this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => { + this._showHint(); + this._checkText(); + this.fireEvent(SignTextEditor.EVENT_CHANGE_CONFIRM, ...args); }); - this.editor.on(BI.Editor.EVENT_ERROR, function () { - self._checkText(); + this.editor.on(Editor.EVENT_ERROR, () => { + this._checkText(); }); - BI.createWidget({ - type: "bi.vertical", + createWidget({ + type: VerticalLayout.xtype, scrolly: false, element: this, - items: [this.editor] + items: [this.editor], }); this._showHint(); - self._checkText(); - }, - - _checkText: function () { - var o = this.options; - BI.nextTick(BI.bind(function () { - if (this.editor.getValue() === "") { - this.text.setValue(o.watermark || ""); - this.text.element.addClass("bi-water-mark"); - } else { - var v = this.editor.getValue(); - v = (BI.isEmpty(v) || v == o.text) ? o.text : v + o.text; - this.text.setValue(v); - this.text.element.removeClass("bi-water-mark"); - } - }, this)); - }, - - _showInput: function () { + this._checkText(); + } + + _checkText() { + const o = this.options; + nextTick( + bind(() => { + if (this.editor.getValue() === "") { + this.text.setValue(o.watermark || ""); + this.text.element.addClass("bi-water-mark"); + } else { + let v = this.editor.getValue(); + v = isEmpty(v) || v === o.text ? o.text : v + o.text; + this.text.setValue(v); + this.text.element.removeClass("bi-water-mark"); + } + }, this) + ); + } + + _showInput() { this.editor.visible(); this.text.invisible(); - }, + } - _showHint: function () { + _showHint() { this.editor.invisible(); this.text.visible(); - }, + } - setTitle: function (title) { + setTitle(title) { this.text.setTitle(title); - }, + } - setWarningTitle: function (title) { + setWarningTitle(title) { this.text.setWarningTitle(title); - }, + } - focus: function () { + focus() { this._showInput(); this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); this._showHint(); this._checkText(); - }, + } - doRedMark: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doRedMark() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doRedMark.apply(this.text, arguments); - }, + this.text.doRedMark(...arguments); + } - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + unRedMark() { + this.text.unRedMark(...arguments); + } - doHighLight: function () { - if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { + doHighLight() { + if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } - this.text.doHighLight.apply(this.text, arguments); - }, + this.text.doHighLight(...arguments); + } - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - }, + unHighLight() { + this.text.unHighLight(...arguments); + } - isValid: function () { + isValid() { return this.editor.isValid(); - }, + } - setErrorText: function (text) { + setErrorText(text) { this.editor.setErrorText(text); - }, + } - getErrorText: function () { + getErrorText() { return this.editor.getErrorText(); - }, + } - isEditing: function () { + isEditing() { return this.editor.isEditing(); - }, + } - getLastValidValue: function () { + getLastValidValue() { return this.editor.getLastValidValue(); - }, + } - getLastChangedValue: function () { + getLastChangedValue() { return this.editor.getLastChangedValue(); - }, + } - setValue: function (v) { + setValue(v) { this.editor.setValue(v); this._checkText(); - }, + } - getValue: function () { + getValue() { return this.editor.getValue(); - }, + } - getState: function () { + getState() { return this.text.getValue(); - }, + } - setState: function (v) { - var o = this.options; + setState(v) { + const o = this.options; this._showHint(); - v = (BI.isEmpty(v) || v == o.text) ? o.text : v + o.text; + v = isEmpty(v) || v === o.text ? o.text : v + o.text; this.text.setValue(v); } -}); -BI.SignTextEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.SignTextEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; -BI.SignTextEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; - -BI.shortcut("bi.sign_text_editor", BI.SignTextEditor); \ No newline at end of file +} diff --git a/src/widget/singleslider/button/iconbutton.slider.js b/src/widget/singleslider/button/iconbutton.slider.js index 3b3432253..c1b5ce6f8 100644 --- a/src/widget/singleslider/button/iconbutton.slider.js +++ b/src/widget/singleslider/button/iconbutton.slider.js @@ -1,26 +1,24 @@ -/** - * Created by zcf on 2016/9/22. - */ -BI.SliderIconButton = BI.inherit(BI.Widget, { +import { shortcut, Widget, Layout } from "@/core"; - props: { +@shortcut() +export class SliderIconButton extends Widget { + static xtype = "bi.single_slider_button"; + + props = { baseCls: "bi-single-slider-button slider-button bi-high-light-border", height: 8, width: 8, - }, - - constants: { + } + constants = { LARGE_SIZE: 16, NORMAL_SIZE: 12, LARGE_OFFSET: 4, - NORMAL_OFFSET: 6 - }, + NORMAL_OFFSET: 6, + }; - render: function () { - var self = this; + render() { return { - type: "bi.layout", + type: Layout.xtype, }; } -}); -BI.shortcut("bi.single_slider_button", BI.SliderIconButton); +} diff --git a/src/widget/singleslider/index.js b/src/widget/singleslider/index.js new file mode 100644 index 000000000..dc4943c0c --- /dev/null +++ b/src/widget/singleslider/index.js @@ -0,0 +1,5 @@ +export { SingleSlider } from "./singleslider"; +export { SingleSliderLabel } from "./singleslider.label"; +export { SingleSliderNormal } from "./singleslider.normal"; +export { SignTextEditor } from "./button/editor.sign.text"; +export { SliderIconButton } from "./button/iconbutton.slider"; diff --git a/src/widget/singleslider/singleslider.js b/src/widget/singleslider/singleslider.js index 8cf77b180..0a2b7496e 100644 --- a/src/widget/singleslider/singleslider.js +++ b/src/widget/singleslider/singleslider.js @@ -1,8 +1,29 @@ -/** - * Created by zcf on 2016/9/22. - */ -BI.SingleSlider = BI.inherit(BI.Single, { - _constant: { +import { + shortcut, + createWidget, + parseFloat, + toPix, + Layout, + VerticalAdaptLayout, + AbsoluteLayout, + VerticalLayout, + HorizontalAutoLayout, + clamp, + isNumeric, + isNull, + parseInt, + i18nText, + isNotEmptyString, + MouseMoveTracker +} from "@/core"; +import { Single } from "@/base"; +import { SignEditor } from "@/case"; + +@shortcut() +export class SingleSlider extends Single { + static xtype = "bi.single_slider"; + + _constant = { EDITOR_WIDTH: 90, EDITOR_HEIGHT: 20, SLIDER_WIDTH_HALF: 15, @@ -10,19 +31,21 @@ BI.SingleSlider = BI.inherit(BI.Single, { SLIDER_HEIGHT: 30, TRACK_HEIGHT: 24, TRACK_GAP_HALF: 7, - TRACK_GAP: 14 - }, + TRACK_GAP: 14, + } - props: { + props = { baseCls: "bi-single-slider bi-slider-track", digit: false, unit: "", value: "", min: 0, max: 100, - }, + }; - beforeMount: function () { + static EVENT_CHANGE = "EVENT_CHANGE"; + + beforeMount() { const { value, min, max } = this.options; this.setMinAndMax({ min, @@ -30,175 +53,205 @@ BI.SingleSlider = BI.inherit(BI.Single, { }); this.setValue(value); this.populate(); - }, + } - render: function () { - var self = this, o = this.options; - var c = this._constant; + render() { + const o = this.options; + const c = this._constant; this.enable = false; this.value = ""; - this.grayTrack = BI.createWidget({ - type: "bi.layout", + this.grayTrack = createWidget({ + type: Layout.xtype, cls: "gray-track", - height: 6 + height: 6, }); - this.blueTrack = BI.createWidget({ - type: "bi.layout", + this.blueTrack = createWidget({ + type: Layout.xtype, cls: "blue-track bi-high-light-background", - height: 6 + height: 6, }); this.track = this._createTrackWrapper(); - this.slider = BI.createWidget({ - type: "bi.single_slider_button" + this.slider = createWidget({ + type: "bi.single_slider_button", }); this._draggable(this.slider); - var sliderVertical = BI.createWidget({ - type: "bi.vertical_adapt", + const sliderVertical = createWidget({ + type: VerticalAdaptLayout.xtype, cls: "slider-wrapper", columnSize: ["fill"], - items: [{ - type: "bi.absolute", - items: [ - { - el: this.slider, - top: 8, - } - ], - height: c.SLIDER_HEIGHT - }], + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.slider, + top: 8, + } + ], + height: c.SLIDER_HEIGHT, + } + ], hgap: c.SLIDER_WIDTH_HALF, - height: c.SLIDER_HEIGHT + height: c.SLIDER_HEIGHT, }); // 这边其实是有问题的，拖拽区域是个圆，在圆的边缘拖拽后放开，这边计算出来的蓝条宽度实际上会比放开时长一点或者短一点 - sliderVertical.element.click(function (e) { - if (self.enable && self.isEnabled() && sliderVertical.element[0] === e.originalEvent.target) { - var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF; - var trackLength = self.track.element[0].scrollWidth - c.TRACK_GAP; - var percent = 0; + sliderVertical.element.click(e => { + if ( + this.enable && + this.isEnabled() && + sliderVertical.element[0] === e.originalEvent.target + ) { + const offset = + e.clientX - + this.element.offset().left - + c.SLIDER_WIDTH_HALF; + const trackLength = + this.track.element[0].scrollWidth - c.TRACK_GAP; + let percent = 0; if (offset < 0) { percent = 0; } if (offset > 0 && offset < trackLength) { - percent = offset * 100 / self._getGrayTrackLength(); + percent = (offset * 100) / this._getGrayTrackLength(); } if (offset >= trackLength) { percent = 100; } - var significantPercent = BI.parseFloat(percent.toFixed(1)); - self._setAllPosition(significantPercent); - var v = self._getValueByPercent(significantPercent); + const significantPercent = parseFloat(percent.toFixed(1)); + this._setAllPosition(significantPercent); + let v = this._getValueByPercent(significantPercent); v = o.digit === false ? v : v.toFixed(o.digit); - self.label.setValue(v); - self.value = v; - self.fireEvent(BI.SingleSlider.EVENT_CHANGE); + this.label.setValue(v); + this.value = v; + this.fireEvent(SingleSlider.EVENT_CHANGE); } }); - this.label = BI.createWidget({ + this.label = createWidget({ type: "bi.sign_text_editor", cls: "slider-editor-button", text: o.unit, - width: BI.toPix(c.EDITOR_WIDTH, 2), - height: BI.toPix(c.EDITOR_HEIGHT, 2), + width: toPix(c.EDITOR_WIDTH, 2), + height: toPix(c.EDITOR_HEIGHT, 2), allowBlank: false, textAlign: "center", - validationChecker: function (v) { - return self._checkValidation(v); - } + validationChecker: v => this._checkValidation(v), }); - this.label.element.hover(function () { - self.label.element.removeClass("bi-border").addClass("bi-border"); - }, function () { - self.label.element.removeClass("bi-border"); - }); - this.label.on(BI.SignEditor.EVENT_CONFIRM, function () { - var v = BI.parseFloat(this.getValue()); - var percent = self._getPercentByValue(v); - var significantPercent = BI.parseFloat(percent.toFixed(1)); - self._setAllPosition(significantPercent); + this.label.element.hover( + () => { + this.label.element + .removeClass("bi-border") + .addClass("bi-border"); + }, + () => { + this.label.element.removeClass("bi-border"); + } + ); + this.label.on(SignEditor.EVENT_CONFIRM, () => { + const v = parseFloat(this.getValue()); + const percent = this._getPercentByValue(v); + const significantPercent = parseFloat(percent.toFixed(1)); + this._setAllPosition(significantPercent); this.setValue(v); - self.value = v; - self.fireEvent(BI.SingleSlider.EVENT_CHANGE); + this.value = v; + this.fireEvent(SingleSlider.EVENT_CHANGE); }); this._setVisible(false); + return { - type: "bi.absolute", - items: [{ - el: { - type: "bi.vertical", - items: [{ - type: "bi.absolute", - items: [{ - el: this.track, - width: "100%", - height: c.TRACK_HEIGHT - }] - }], - hgap: c.TRACK_GAP_HALF, - height: c.TRACK_HEIGHT + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: VerticalLayout.xtype, + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.track, + width: "100%", + height: c.TRACK_HEIGHT, + } + ], + } + ], + hgap: c.TRACK_GAP_HALF, + height: c.TRACK_HEIGHT, + }, + top: 23, + left: 0, + width: "100%", }, - top: 23, - left: 0, - width: "100%" - }, { - el: sliderVertical, - top: 20, - left: 0, - width: "100%" - }, { - el: { - type: "bi.vertical", - items: [{ - type: "bi.horizontal_auto", - items: [this.label] - }], - // height: c.EDITOR_HEIGHT + { + el: sliderVertical, + top: 20, + left: 0, + width: "100%", }, - top: 0, - left: 0, - width: "100%" - }] + { + el: { + type: VerticalLayout.xtype, + items: [ + { + type: HorizontalAutoLayout.xtype, + items: [this.label], + } + ], + // height: c.EDITOR_HEIGHT + }, + top: 0, + left: 0, + width: "100%", + } + ], }; - }, + } - _draggable: function (widget) { - var self = this, o = this.options; - var startDrag = false; - var size = 0, offset = 0, defaultSize = 0; - var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) { - if (mouseMoveTracker.isDragging()) { - startDrag = true; - offset += deltaX; - size = optimizeSize(defaultSize + offset); - widget.element.addClass("dragging"); - var percent = size * 100 / (self._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 - self._setBlueTrack(significantPercent); - self._setLabelPosition(significantPercent); - self._setSliderPosition(significantPercent); - var v = self._getValueByPercent(significantPercent); - v = o.digit === false ? v : v.toFixed(o.digit); - self.label.setValue(v); - self.value = v; - } - }, function () { - if (startDrag === true) { - size = optimizeSize(size); - var percent = size * 100 / (self._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1)); - self._setSliderPosition(significantPercent); - size = 0; - offset = 0; - defaultSize = size; - startDrag = false; - } - widget.element.removeClass("dragging"); - mouseMoveTracker.releaseMouseMoves(); - self.fireEvent(BI.SingleSlider.EVENT_CHANGE); - }, window); + _draggable(widget) { + const o = this.options; + let startDrag = false; + let size = 0, + offset = 0, + defaultSize = 0; + const mouseMoveTracker = new MouseMoveTracker( + (deltaX => { + if (mouseMoveTracker.isDragging()) { + startDrag = true; + offset += deltaX; + size = optimizeSize(defaultSize + offset); + widget.element.addClass("dragging"); + const percent = (size * 100) / this._getGrayTrackLength(); + const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 + this._setBlueTrack(significantPercent); + this._setLabelPosition(significantPercent); + this._setSliderPosition(significantPercent); + let v = this._getValueByPercent(significantPercent); + v = o.digit === false ? v : v.toFixed(o.digit); + this.label.setValue(v); + this.value = v; + } + }), + (() => { + if (startDrag === true) { + size = optimizeSize(size); + const percent = (size * 100) / this._getGrayTrackLength(); + const significantPercent = parseFloat(percent.toFixed(1)); + this._setSliderPosition(significantPercent); + size = 0; + offset = 0; + defaultSize = size; + startDrag = false; + } + widget.element.removeClass("dragging"); + mouseMoveTracker.releaseMouseMoves(); + this.fireEvent(SingleSlider.EVENT_CHANGE); + }), + window + ); widget.element.on("mousedown", function (event) { - if(!widget.isEnabled()) { + if (!widget.isEnabled()) { return; } defaultSize = this.offsetLeft; @@ -206,100 +259,107 @@ BI.SingleSlider = BI.inherit(BI.Single, { mouseMoveTracker.captureMouseMoves(event); }); - function optimizeSize (s) { - return BI.clamp(s, 0, self._getGrayTrackLength()); - } - }, + const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength()); + } - _createTrackWrapper: function () { - return BI.createWidget({ - type: "bi.absolute", - items: [{ - el: { - type: "bi.vertical", - items: [{ - type: "bi.absolute", - items: [{ - el: this.grayTrack, - top: 0, - left: 0, - width: "100%" - }, { - el: this.blueTrack, - top: 0, - left: 0, - width: "0%" - }] - }], - hgap: 8, - height: 8 - }, - top: 8, - left: 0, - width: "100%" - }] + _createTrackWrapper() { + return createWidget({ + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: VerticalLayout.xtype, + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.grayTrack, + top: 0, + left: 0, + width: "100%", + }, + { + el: this.blueTrack, + top: 0, + left: 0, + width: "0%", + } + ], + } + ], + hgap: 8, + height: 8, + }, + top: 8, + left: 0, + width: "100%", + } + ], }); - }, + } - _checkValidation: function (v) { - var o = this.options; - var valid = false; - if (BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)) { - if(o.digit === false) { + _checkValidation(v) { + const o = this.options; + let valid = false; + if (isNumeric(v) && !(isNull(v) || v < this.min || v > this.max)) { + if (o.digit === false) { valid = true; - }else{ - var dotText = (v + "").split(".")[1] || ""; - valid = (dotText.length === o.digit); + } else { + const dotText = (`${v}`).split(".")[1] || ""; + valid = dotText.length === o.digit; } } + return valid; - }, + } - _setBlueTrack: function (percent) { - this.blueTrack.element.css({width: percent + "%"}); - }, + _setBlueTrack(percent) { + this.blueTrack.element.css({ width: `${percent}%` }); + } - _setLabelPosition: function (percent) { + _setLabelPosition(percent) { // this.label.element.css({left: percent + "%"}); - }, + } - _setSliderPosition: function (percent) { - this.slider.element.css({left: percent + "%"}); - }, + _setSliderPosition(percent) { + this.slider.element.css({ left: `${percent}%` }); + } - _setAllPosition: function (percent) { + _setAllPosition(percent) { this._setSliderPosition(percent); this._setLabelPosition(percent); this._setBlueTrack(percent); - }, + } - _setVisible: function (visible) { + _setVisible(visible) { this.slider.setVisible(visible); this.label.setVisible(visible); - }, + } - _getGrayTrackLength: function () { + _getGrayTrackLength() { return this.grayTrack.element[0].scrollWidth; - }, + } - _getValueByPercent: function (percent) { - var thousandth = BI.parseInt(percent * 10); - return (((this.max - this.min) * thousandth) / 1000 + this.min); - }, + _getValueByPercent(percent) { + const thousandth = parseInt(percent * 10); + + return ((this.max - this.min) * thousandth) / 1000 + this.min; + } - _getPercentByValue: function (v) { - return (v - this.min) * 100 / (this.max - this.min); - }, + _getPercentByValue(v) { + return ((v - this.min) * 100) / (this.max - this.min); + } - getValue: function () { + getValue() { return this.value; - }, + } - setValue: function (v) { - var o = this.options; - v = BI.parseFloat(v); + setValue(v) { + const o = this.options; + v = parseFloat(v); v = o.digit === false ? v : v.toFixed(o.digit); - if ((!isNaN(v))) { + if (!isNaN(v)) { if (this._checkValidation(v)) { this.value = v; } @@ -310,47 +370,63 @@ BI.SingleSlider = BI.inherit(BI.Single, { this.value = this.min; } } - }, + } - _setEnable: function (b) { - BI.SingleSlider.superclass._setEnable.apply(this, [b]); - if(b) { - this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track"); + _setEnable(b) { + super._setEnable.apply(this, [b]); + if (b) { + this.blueTrack.element + .removeClass("disabled-blue-track") + .addClass("blue-track"); } else { - this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track"); + this.blueTrack.element + .removeClass("blue-track") + .addClass("disabled-blue-track"); } - }, + } - setMinAndMax: function (v) { - var minNumber = BI.parseFloat(v.min); - var maxNumber = BI.parseFloat(v.max); - if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) { + setMinAndMax(v) { + const minNumber = parseFloat(v.min); + const maxNumber = parseFloat(v.max); + if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber > minNumber) { this.min = minNumber; this.max = maxNumber; } - }, + } - reset: function () { + reset() { this._setVisible(false); this.enable = false; this.value = ""; this.min = 0; this.max = 0; this._setBlueTrack(0); - }, + } - populate: function () { - var o = this.options; + populate() { + const o = this.options; if (!isNaN(this.min) && !isNaN(this.max)) { this._setVisible(true); this.enable = true; if (o.digit) { - this.label.setErrorText(BI.i18nText("BI-Basic_Please_Enter_Number_Between", this.min, this.max)); + this.label.setErrorText( + i18nText( + "BI-Basic_Please_Enter_Number_Between", + this.min, + this.max + ) + ); } else { - this.label.setErrorText(BI.i18nText("BI-Basic_Please_Enter_Integer_Number_Between", this.min, this.max)); + this.label.setErrorText( + i18nText( + "BI-Basic_Please_Enter_Integer_Number_Between", + this.min, + this.max + ) + ); } - if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) { + if (isNumeric(this.value) || isNotEmptyString(this.value)) { this.label.setValue(this.value); this._setAllPosition(this._getPercentByValue(this.value)); } else { @@ -359,6 +435,4 @@ BI.SingleSlider = BI.inherit(BI.Single, { } } } -}); -BI.SingleSlider.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_slider", BI.SingleSlider); +} diff --git a/src/widget/singleslider/singleslider.label.js b/src/widget/singleslider/singleslider.label.js index c9ec33998..1253c5681 100644 --- a/src/widget/singleslider/singleslider.label.js +++ b/src/widget/singleslider/singleslider.label.js @@ -1,8 +1,26 @@ -/** - * Created by Urthur on 2017/9/12. - */ -BI.SingleSliderLabel = BI.inherit(BI.Single, { - _constant: { +import { + shortcut, + createWidget, + parseFloat, + toPix, + Layout, + VerticalAdaptLayout, + AbsoluteLayout, + VerticalLayout, + HorizontalAutoLayout, + clamp, + isNumeric, + isNull, + parseInt, + isNotEmptyString, + MouseMoveTracker +} from "@/core"; +import { Single, Label } from "@/base"; + +@shortcut() +export class SingleSliderLabel extends Single { + static xtype = "bi.single_slider_label"; + _constant = { EDITOR_WIDTH: 90, EDITOR_HEIGHT: 20, HEIGHT: 20, @@ -11,19 +29,20 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, { SLIDER_HEIGHT: 30, TRACK_HEIGHT: 24, TRACK_GAP_HALF: 7, - TRACK_GAP: 14 - }, - - props: { + TRACK_GAP: 14, + } + props = { baseCls: "bi-single-slider-label bi-slider-track", digit: false, unit: "", value: "", min: 0, max: 100, - }, + }; - beforeMount: function () { + static EVENT_CHANGE = "EVENT_CHANGE"; + + beforeMount() { const { value, min, max } = this.options; this.setMinAndMax({ min, @@ -31,152 +50,179 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, { }); this.setValue(value); this.populate(); - }, + } - render: function () { - var self = this, o = this.options; - var c = this._constant; + render() { + const o = this.options; + const c = this._constant; this.enable = false; this.value = ""; - this.grayTrack = BI.createWidget({ - type: "bi.layout", + this.grayTrack = createWidget({ + type: Layout.xtype, cls: "gray-track", - height: 6 + height: 6, }); - this.blueTrack = BI.createWidget({ - type: "bi.layout", + this.blueTrack = createWidget({ + type: Layout.xtype, cls: "blue-track bi-high-light-background", - height: 6 + height: 6, }); this.track = this._createTrackWrapper(); - this.slider = BI.createWidget({ - type: "bi.single_slider_button" + this.slider = createWidget({ + type: "bi.single_slider_button", }); this._draggable(this.slider); - var sliderVertical = BI.createWidget({ - type: "bi.vertical_adapt", + const sliderVertical = createWidget({ + type: VerticalAdaptLayout.xtype, columnSize: ["fill"], - items: [{ - type: "bi.absolute", - items: [ - { - el: this.slider, - top: 8, - } - ], - height: c.SLIDER_HEIGHT - }], + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.slider, + top: 8, + } + ], + height: c.SLIDER_HEIGHT, + } + ], hgap: c.SLIDER_WIDTH_HALF, - height: c.SLIDER_HEIGHT + height: c.SLIDER_HEIGHT, }); - sliderVertical.element.click(function (e) { - if (self.enable && self.isEnabled() && sliderVertical.element[0] === e.originalEvent.target) { - var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF; - var trackLength = self.track.element[0].scrollWidth - c.TRACK_GAP; - var percent = 0; + sliderVertical.element.click(e => { + if ( + this.enable && + this.isEnabled() && + sliderVertical.element[0] === e.originalEvent.target + ) { + const offset = + e.clientX - + this.element.offset().left - + c.SLIDER_WIDTH_HALF; + const trackLength = + this.track.element[0].scrollWidth - c.TRACK_GAP; + let percent = 0; if (offset < 0) { percent = 0; } if (offset > 0 && offset < trackLength) { - percent = offset * 100 / self._getGrayTrackLength(); + percent = (offset * 100) / this._getGrayTrackLength(); } if (offset >= trackLength) { percent = 100; } - var significantPercent = BI.parseFloat(percent.toFixed(1)); - self._setAllPosition(significantPercent); - var v = self._getValueByPercent(significantPercent); + const significantPercent = parseFloat(percent.toFixed(1)); + this._setAllPosition(significantPercent); + let v = this._getValueByPercent(significantPercent); v = o.digit === false ? v : v.toFixed(o.digit); - self.label.setText(v + o.unit); - self.value = v; - self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE); + this.label.setText(v + o.unit); + this.value = v; + this.fireEvent(SingleSliderLabel.EVENT_CHANGE); } }); - this.label = BI.createWidget({ - type: "bi.label", + this.label = createWidget({ + type: Label.xtype, height: c.HEIGHT, - width: BI.toPix(c.EDITOR_WIDTH, 2) + width: toPix(c.EDITOR_WIDTH, 2), }); this._setVisible(false); - return ({ - type: "bi.absolute", - items: [{ - el: { - type: "bi.vertical", - items: [{ - type: "bi.absolute", - items: [{ - el: this.track, - width: "100%", - height: c.TRACK_HEIGHT - }] - }], - hgap: c.TRACK_GAP_HALF, - height: c.TRACK_HEIGHT + + return { + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: VerticalLayout.xtype, + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.track, + width: "100%", + height: c.TRACK_HEIGHT, + } + ], + } + ], + hgap: c.TRACK_GAP_HALF, + height: c.TRACK_HEIGHT, + }, + top: 13, + left: 0, + width: "100%", }, - top: 13, - left: 0, - width: "100%" - }, { - el: sliderVertical, - top: 10, - left: 0, - width: "100%" - }, { - el: { - type: "bi.vertical", - items: [{ - type: "bi.horizontal_auto", - items: [this.label] - }], - height: c.EDITOR_HEIGHT + { + el: sliderVertical, + top: 10, + left: 0, + width: "100%", }, - top: 0, - left: 0, - width: "100%" - }] - }); - }, + { + el: { + type: VerticalLayout.xtype, + items: [ + { + type: HorizontalAutoLayout.xtype, + items: [this.label], + } + ], + height: c.EDITOR_HEIGHT, + }, + top: 0, + left: 0, + width: "100%", + } + ], + }; + } - _draggable: function (widget) { - var self = this, o = this.options; - var startDrag = false; - var size = 0, offset = 0, defaultSize = 0; - var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) { - if (mouseMoveTracker.isDragging()) { - startDrag = true; - offset += deltaX; - size = optimizeSize(defaultSize + offset); - widget.element.addClass("dragging"); - var percent = size * 100 / (self._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 - self._setBlueTrack(significantPercent); - self._setLabelPosition(significantPercent); - self._setSliderPosition(significantPercent); - var v = self._getValueByPercent(significantPercent); - v = o.digit === false ? v : v.toFixed(o.digit); - self.label.setValue(v + o.unit); - self.value = v; - self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE); - } - }, function () { - if (startDrag === true) { - size = optimizeSize(size); - var percent = size * 100 / (self._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1)); - self._setSliderPosition(significantPercent); - size = 0; - offset = 0; - defaultSize = size; - startDrag = false; - } - widget.element.removeClass("dragging"); - mouseMoveTracker.releaseMouseMoves(); - self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE); - }, window); + _draggable(widget) { + const o = this.options; + let startDrag = false; + let size = 0, + offset = 0, + defaultSize = 0; + const mouseMoveTracker = new MouseMoveTracker( + (deltaX => { + if (mouseMoveTracker.isDragging()) { + startDrag = true; + offset += deltaX; + size = optimizeSize(defaultSize + offset); + widget.element.addClass("dragging"); + const percent = (size * 100) / this._getGrayTrackLength(); + const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 + this._setBlueTrack(significantPercent); + this._setLabelPosition(significantPercent); + this._setSliderPosition(significantPercent); + let v = this._getValueByPercent(significantPercent); + v = o.digit === false ? v : v.toFixed(o.digit); + this.label.setValue(v + o.unit); + this.value = v; + this.fireEvent(SingleSliderLabel.EVENT_CHANGE); + } + }), + (() => { + if (startDrag === true) { + size = optimizeSize(size); + const percent = (size * 100) / this._getGrayTrackLength(); + const significantPercent = parseFloat(percent.toFixed(1)); + this._setSliderPosition(significantPercent); + size = 0; + offset = 0; + defaultSize = size; + startDrag = false; + } + widget.element.removeClass("dragging"); + mouseMoveTracker.releaseMouseMoves(); + this.fireEvent(SingleSliderLabel.EVENT_CHANGE); + }), + window + ); widget.element.on("mousedown", function (event) { if (!widget.isEnabled()) { return; @@ -186,99 +232,109 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, { mouseMoveTracker.captureMouseMoves(event); }); - function optimizeSize(s) { - return BI.clamp(s, 0, self._getGrayTrackLength()); - } - }, + const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength()); + } - _createTrackWrapper: function () { - return BI.createWidget({ - type: "bi.absolute", - items: [{ - el: { - type: "bi.vertical", - items: [{ - type: "bi.absolute", - items: [{ - el: this.grayTrack, - top: 0, - left: 0, - width: "100%" - }, { - el: this.blueTrack, - top: 0, - left: 0, - width: "0%" - }] - }], - hgap: 8, - height: 8 - }, - top: 8, - left: 0, - width: "100%" - }] + _createTrackWrapper() { + return createWidget({ + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: VerticalLayout.xtype, + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.grayTrack, + top: 0, + left: 0, + width: "100%", + }, + { + el: this.blueTrack, + top: 0, + left: 0, + width: "0%", + } + ], + } + ], + hgap: 8, + height: 8, + }, + top: 8, + left: 0, + width: "100%", + } + ], }); - }, + } - _checkValidation: function (v) { - return BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max); - }, + _checkValidation(v) { + return isNumeric(v) && !(isNull(v) || v < this.min || v > this.max); + } - _setBlueTrack: function (percent) { - this.blueTrack.element.css({ width: percent + "%" }); - }, + _setBlueTrack(percent) { + this.blueTrack.element.css({ width: `${percent}%` }); + } - _setLabelPosition: function (percent) { + _setLabelPosition(percent) { // this.label.element.css({left: percent + "%"}); - }, + } - _setSliderPosition: function (percent) { - this.slider.element.css({ left: percent + "%" }); - }, + _setSliderPosition(percent) { + this.slider.element.css({ left: `${percent}%` }); + } - _setAllPosition: function (percent) { + _setAllPosition(percent) { this._setSliderPosition(percent); this._setLabelPosition(percent); this._setBlueTrack(percent); - }, + } - _setVisible: function (visible) { + _setVisible(visible) { this.slider.setVisible(visible); this.label.setVisible(visible); - }, + } - _getGrayTrackLength: function () { + _getGrayTrackLength() { return this.grayTrack.element[0].scrollWidth; - }, + } - _getValueByPercent: function (percent) { - var thousandth = BI.parseInt(percent * 10); - return (((this.max - this.min) * thousandth) / 1000 + this.min); - }, + _getValueByPercent(percent) { + const thousandth = parseInt(percent * 10); + + return ((this.max - this.min) * thousandth) / 1000 + this.min; + } - _getPercentByValue: function (v) { - return (v - this.min) * 100 / (this.max - this.min); - }, + _getPercentByValue(v) { + return ((v - this.min) * 100) / (this.max - this.min); + } - _setEnable: function (b) { - BI.SingleSliderLabel.superclass._setEnable.apply(this, [b]); + _setEnable(b) { + super._setEnable.apply(this, [b]); if (b) { - this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track"); + this.blueTrack.element + .removeClass("disabled-blue-track") + .addClass("blue-track"); } else { - this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track"); + this.blueTrack.element + .removeClass("blue-track") + .addClass("disabled-blue-track"); } - }, + } - getValue: function () { + getValue() { return this.value; - }, + } - setValue: function (v) { - var o = this.options; - v = BI.parseFloat(v); + setValue(v) { + const o = this.options; + v = parseFloat(v); v = o.digit === false ? v : v.toFixed(o.digit); - if ((!isNaN(v))) { + if (!isNaN(v)) { if (this._checkValidation(v)) { this.value = v; } @@ -289,32 +345,32 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, { this.value = this.min; } } - }, + } - setMinAndMax: function (v) { - var minNumber = BI.parseFloat(v.min); - var maxNumber = BI.parseFloat(v.max); - if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber)) { + setMinAndMax(v) { + const minNumber = parseFloat(v.min); + const maxNumber = parseFloat(v.max); + if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber > minNumber) { this.min = minNumber; this.max = maxNumber; } - }, + } - reset: function () { + reset() { this._setVisible(false); this.enable = false; this.value = ""; this.min = 0; this.max = 0; this._setBlueTrack(0); - }, + } - populate: function () { - var o = this.options; + populate() { + const o = this.options; if (!isNaN(this.min) && !isNaN(this.max)) { this._setVisible(true); this.enable = true; - if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) { + if (isNumeric(this.value) || isNotEmptyString(this.value)) { this.label.setValue(this.value + o.unit); this._setAllPosition(this._getPercentByValue(this.value)); } else { @@ -323,6 +379,4 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, { } } } -}); -BI.SingleSliderLabel.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_slider_label", BI.SingleSliderLabel); +} diff --git a/src/widget/singleslider/singleslider.normal.js b/src/widget/singleslider/singleslider.normal.js index 1f7338530..993e86043 100644 --- a/src/widget/singleslider/singleslider.normal.js +++ b/src/widget/singleslider/singleslider.normal.js @@ -1,28 +1,43 @@ -/** - * normal single slider - * Created by Young on 2017/6/21. - */ -BI.SingleSliderNormal = BI.inherit(BI.Single, { +import { + shortcut, + createWidget, + parseFloat, + VerticalAdaptLayout, + AbsoluteLayout, + VerticalLayout, + clamp, + Layout, + isNull, + parseInt, + isNumeric, + isNotEmptyString, + MouseMoveTracker +} from "@/core"; +import { Single } from "@/base"; +import { SingleSlider } from "./singleslider"; - _constant: { +@shortcut() +export class SingleSliderNormal extends Single { + static xtype = "bi.single_slider_normal"; + _constant = { HEIGHT: 28, SLIDER_WIDTH_HALF: 15, SLIDER_WIDTH: 30, SLIDER_HEIGHT: 30, TRACK_HEIGHT: 24, TRACK_GAP_HALF: 7, - TRACK_GAP: 14 - }, - - props: { + TRACK_GAP: 14, + } + props = { baseCls: "bi-single-slider-normal bi-slider-track", min: 0, max: 100, value: "", - // color: "#3f8ce8" - }, + }; - beforeMount: function () { + static EVENT_DRAG = "EVENT_DRAG"; + + beforeMount() { const { value, min, max } = this.options; this.setMinAndMax({ min, @@ -30,122 +45,143 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, { }); this.setValue(value); this.populate(); - }, + } - render: function () { - var self = this; - var o = this.options; - var c = this._constant; + render() { + const c = this._constant; - var track = this._createTrack(); - this.slider = BI.createWidget({ - type: "bi.single_slider_button" + const track = this._createTrack(); + this.slider = createWidget({ + type: "bi.single_slider_button", }); this._draggable(this.slider); - var sliderVertical = BI.createWidget({ - type: "bi.vertical_adapt", + const sliderVertical = createWidget({ + type: VerticalAdaptLayout.xtype, columnSize: ["fill"], - items: [{ - type: "bi.absolute", - items: [ - { - el: this.slider, - top: 8, - } - ], - height: c.SLIDER_HEIGHT - }], + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.slider, + top: 8, + } + ], + height: c.SLIDER_HEIGHT, + } + ], hgap: c.SLIDER_WIDTH_HALF, - height: c.SLIDER_HEIGHT + height: c.SLIDER_HEIGHT, }); - sliderVertical.element.click(function (e) { - if (self.enable && self.isEnabled() && sliderVertical.element[0] === e.originalEvent.target) { - var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF; - var trackLength = self.track.element[0].scrollWidth - c.TRACK_GAP; - var percent = 0; + sliderVertical.element.click(e => { + if ( + this.enable && + this.isEnabled() && + sliderVertical.element[0] === e.originalEvent.target + ) { + const offset = + e.clientX - + this.element.offset().left - + c.SLIDER_WIDTH_HALF; + const trackLength = + this.track.element[0].scrollWidth - c.TRACK_GAP; + let percent = 0; if (offset < 0) { percent = 0; } if (offset > 0 && offset < trackLength) { - percent = offset * 100 / self._getGrayTrackLength(); + percent = (offset * 100) / this._getGrayTrackLength(); } if (offset >= trackLength) { percent = 100; } - var significantPercent = BI.parseFloat(percent.toFixed(1)); - self._setAllPosition(significantPercent); - var v = self._getValueByPercent(significantPercent); - self.value = v; - self.fireEvent(BI.SingleSlider.EVENT_CHANGE); + const significantPercent = parseFloat(percent.toFixed(1)); + this._setAllPosition(significantPercent); + const v = this._getValueByPercent(significantPercent); + this.value = v; + this.fireEvent(SingleSlider.EVENT_CHANGE); } }); return { - type: "bi.absolute", + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: { - type: "bi.vertical", - items: [{ - type: "bi.absolute", - items: [{ - el: track, - width: "100%", - height: c.TRACK_HEIGHT - }] - }], - hgap: c.TRACK_GAP_HALF, - height: c.TRACK_HEIGHT + items: [ + { + el: { + type: VerticalLayout.xtype, + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: track, + width: "100%", + height: c.TRACK_HEIGHT, + } + ], + } + ], + hgap: c.TRACK_GAP_HALF, + height: c.TRACK_HEIGHT, + }, + top: 3, + left: 0, + width: "100%", }, - top: 3, - left: 0, - width: "100%" - }, { - el: sliderVertical, - top: 0, - left: 0, - width: "100%" - }] + { + el: sliderVertical, + top: 0, + left: 0, + width: "100%", + } + ], }; - }, + } - _draggable: function (widget) { - var self = this, o = this.options; - var startDrag = false; - var size = 0, offset = 0, defaultSize = 0; - var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) { - if (mouseMoveTracker.isDragging()) { - startDrag = true; - offset += deltaX; - size = optimizeSize(defaultSize + offset); - widget.element.addClass("dragging"); - var percent = size * 100 / (self._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 - self._setBlueTrack(significantPercent); - self._setSliderPosition(significantPercent); - var v = self._getValueByPercent(significantPercent); - v = o.digit === false ? v : v.toFixed(o.digit); - self.value = v; - self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v); - } - }, function () { - if (startDrag === true) { - size = optimizeSize(size); - var percent = size * 100 / (self._getGrayTrackLength()); - var significantPercent = BI.parseFloat(percent.toFixed(1)); - self._setSliderPosition(significantPercent); - size = 0; - offset = 0; - defaultSize = size; - startDrag = false; - } - widget.element.removeClass("dragging"); - mouseMoveTracker.releaseMouseMoves(); - self.fireEvent(BI.SingleSlider.EVENT_CHANGE); - }, window); + _draggable(widget) { + const o = this.options; + let startDrag = false; + let size = 0, + offset = 0, + defaultSize = 0; + const mouseMoveTracker = new MouseMoveTracker( + (deltaX => { + if (mouseMoveTracker.isDragging()) { + startDrag = true; + offset += deltaX; + size = optimizeSize(defaultSize + offset); + widget.element.addClass("dragging"); + const percent = (size * 100) / this._getGrayTrackLength(); + const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。 + this._setBlueTrack(significantPercent); + this._setSliderPosition(significantPercent); + let v = this._getValueByPercent(significantPercent); + v = o.digit === false ? v : v.toFixed(o.digit); + this.value = v; + this.fireEvent(SingleSliderNormal.EVENT_DRAG, v); + } + }), + (() => { + if (startDrag === true) { + size = optimizeSize(size); + const percent = (size * 100) / this._getGrayTrackLength(); + const significantPercent = parseFloat(percent.toFixed(1)); + this._setSliderPosition(significantPercent); + size = 0; + offset = 0; + defaultSize = size; + startDrag = false; + } + widget.element.removeClass("dragging"); + mouseMoveTracker.releaseMouseMoves(); + this.fireEvent(SingleSlider.EVENT_CHANGE); + }), + window + ); widget.element.on("mousedown", function (event) { - if(!widget.isEnabled()) { + if (!widget.isEnabled()) { return; } defaultSize = this.offsetLeft; @@ -153,110 +189,120 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, { mouseMoveTracker.captureMouseMoves(event); }); - function optimizeSize (s) { - return BI.clamp(s, 0, self._getGrayTrackLength()); - } - }, + const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength()); + } - _createTrack: function () { - var self = this; - var c = this._constant; - this.grayTrack = BI.createWidget({ - type: "bi.layout", + _createTrack() { + this.grayTrack = createWidget({ + type: Layout.xtype, cls: "gray-track", - height: 6 + height: 6, }); - this.blueTrack = BI.createWidget({ - type: "bi.layout", + this.blueTrack = createWidget({ + type: Layout.xtype, cls: "blue-track bi-high-light-background", - height: 6 + height: 6, }); if (this.options.color) { - this.blueTrack.element.css({"background-color": this.options.color}); + this.blueTrack.element.css({ + "background-color": this.options.color, + }); } return { - type: "bi.absolute", - items: [{ - el: { - type: "bi.vertical", - items: [{ - type: "bi.absolute", - items: [{ - el: this.grayTrack, - top: 0, - left: 0, - width: "100%" - }, { - el: this.blueTrack, - top: 0, - left: 0, - width: "0%" - }] - }], - hgap: 8, - height: 8 - }, - top: 8, - left: 0, - width: "100%" - }], - ref: function (ref) { - self.track = ref; - } + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: VerticalLayout.xtype, + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.grayTrack, + top: 0, + left: 0, + width: "100%", + }, + { + el: this.blueTrack, + top: 0, + left: 0, + width: "0%", + } + ], + } + ], + hgap: 8, + height: 8, + }, + top: 8, + left: 0, + width: "100%", + } + ], + ref: _ref => { + this.track = _ref; + }, }; - }, + } - _checkValidation: function (v) { - return !(BI.isNull(v) || v < this.min || v > this.max); - }, + _checkValidation(v) { + return !(isNull(v) || v < this.min || v > this.max); + } - _setBlueTrack: function (percent) { - this.blueTrack.element.css({width: percent + "%"}); - }, + _setBlueTrack(percent) { + this.blueTrack.element.css({ width: `${percent}%` }); + } - _setSliderPosition: function (percent) { - this.slider.element.css({left: percent + "%"}); - }, + _setSliderPosition(percent) { + this.slider.element.css({ left: `${percent}%` }); + } - _setAllPosition: function (percent) { + _setAllPosition(percent) { this._setSliderPosition(percent); this._setBlueTrack(percent); - }, + } - _setVisible: function (visible) { + _setVisible(visible) { this.slider.setVisible(visible); - }, + } - _getGrayTrackLength: function () { + _getGrayTrackLength() { return this.grayTrack.element[0].scrollWidth; - }, + } - _getValueByPercent: function (percent) { - var thousandth = BI.parseInt(percent * 10); - return (((this.max - this.min) * thousandth) / 1000 + this.min); - }, + _getValueByPercent(percent) { + const thousandth = parseInt(percent * 10); + + return ((this.max - this.min) * thousandth) / 1000 + this.min; + } - _getPercentByValue: function (v) { - return (v - this.min) * 100 / (this.max - this.min); - }, + _getPercentByValue(v) { + return ((v - this.min) * 100) / (this.max - this.min); + } - _setEnable: function (b) { - BI.SingleSliderNormal.superclass._setEnable.apply(this, [b]); - if(b) { - this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track"); + _setEnable(b) { + super._setEnable.apply(this, [b]); + if (b) { + this.blueTrack.element + .removeClass("disabled-blue-track") + .addClass("blue-track"); } else { - this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track"); + this.blueTrack.element + .removeClass("blue-track") + .addClass("disabled-blue-track"); } - }, + } - getValue: function () { + getValue() { return this.value; - }, + } - setValue: function (v) { - var value = BI.parseFloat(v); - if ((!isNaN(value))) { + setValue(v) { + const value = parseFloat(v); + if (!isNaN(value)) { if (this._checkValidation(value)) { this.value = value; } @@ -267,37 +313,35 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, { this.value = this.min; } } - }, + } - setMinAndMax: function (v) { - var minNumber = BI.parseFloat(v.min); - var maxNumber = BI.parseFloat(v.max); - if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) { + setMinAndMax(v) { + const minNumber = parseFloat(v.min); + const maxNumber = parseFloat(v.max); + if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber > minNumber) { this.min = minNumber; this.max = maxNumber; } - }, + } - reset: function () { + reset() { this._setVisible(false); this.enable = false; this.value = ""; this.min = 0; this.max = 0; this._setBlueTrack(0); - }, + } - populate: function () { + populate() { if (!isNaN(this.min) && !isNaN(this.max)) { this._setVisible(true); this.enable = true; - if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) { + if (isNumeric(this.value) || isNotEmptyString(this.value)) { this._setAllPosition(this._getPercentByValue(this.value)); } else { this._setAllPosition(100); } } } -}); -BI.SingleSliderNormal.EVENT_DRAG = "EVENT_DRAG"; -BI.shortcut("bi.single_slider_normal", BI.SingleSliderNormal); +}