forked from fanruan/fineui
Treecat
2 years ago
30 changed files with 2325 additions and 2209 deletions
@ -0,0 +1,3 @@ |
|||||||
|
export * from "./tree.level"; |
||||||
|
export * from "./treeexpander/tree.expander"; |
||||||
|
export * from "./treeexpander/tree.expander.popup"; |
@ -1,130 +1,142 @@ |
|||||||
/** |
import { |
||||||
* guy |
shortcut, |
||||||
* 二级树 |
Widget, |
||||||
* @class BI.LevelTree |
extend, |
||||||
* @extends BI.Single |
isKey, |
||||||
*/ |
each, |
||||||
BI.LevelTree = BI.inherit(BI.Widget, { |
UUID, |
||||||
_defaultConfig: function () { |
defaults, |
||||||
return BI.extend(BI.LevelTree.superclass._defaultConfig.apply(this, arguments), { |
isNotEmptyArray, |
||||||
baseCls: "bi-level-tree", |
Tree, |
||||||
el: { |
createWidget, |
||||||
chooseType: 0 |
VerticalLayout |
||||||
}, |
} from "@/core"; |
||||||
expander: {}, |
import { ButtonTree, CustomTree } from "@/base"; |
||||||
items: [], |
import { TreeExpander } from "./treeexpander/tree.expander"; |
||||||
value: "" |
import { BasicTreeItem, BasicTreeNode } from "@/case"; |
||||||
}); |
|
||||||
}, |
@shortcut() |
||||||
|
export class LevelTree extends Widget { |
||||||
|
static xtype = "bi.level_tree"; |
||||||
|
|
||||||
|
static EVENT_CHANGE = "EVENT_CHANGE"; |
||||||
|
|
||||||
|
props = { |
||||||
|
baseCls: "bi-level-tree", |
||||||
|
el: { |
||||||
|
chooseType: 0, |
||||||
|
}, |
||||||
|
expander: {}, |
||||||
|
items: [], |
||||||
|
value: "", |
||||||
|
}; |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.LevelTree.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
|
|
||||||
this.initTree(this.options.items); |
this.initTree(this.options.items); |
||||||
}, |
} |
||||||
|
|
||||||
_formatItems: function (nodes, layer, pNode) { |
_formatItems(nodes, layer, pNode) { |
||||||
var self = this; |
const self = this; |
||||||
BI.each(nodes, function (i, node) { |
each(nodes, (i, node) => { |
||||||
var extend = { |
const extend = { |
||||||
layer: layer, |
layer, |
||||||
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
||||||
isFirstNode: i === 0, |
isFirstNode: i === 0, |
||||||
isLastNode: i === nodes.length - 1, |
isLastNode: i === nodes.length - 1, |
||||||
}; |
}; |
||||||
if (!BI.isKey(node.id)) { |
if (!isKey(node.id)) { |
||||||
node.id = BI.UUID(); |
node.id = UUID(); |
||||||
} |
} |
||||||
extend.pNode = pNode; |
extend.pNode = pNode; |
||||||
if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) { |
if (node.isParent === true || node.parent === true || isNotEmptyArray(node.children)) { |
||||||
extend.type = "bi.tree_node"; |
extend.type = BasicTreeNode.xtype; |
||||||
extend.selectable = false; |
extend.selectable = false; |
||||||
|
|
||||||
BI.defaults(node, extend); |
defaults(node, extend); |
||||||
self._formatItems(node.children, layer + 1, node); |
self._formatItems(node.children, layer + 1, node); |
||||||
} else { |
} else { |
||||||
extend.type = "bi.tree_item"; |
extend.type = BasicTreeItem.xtype; |
||||||
BI.defaults(node, extend); |
defaults(node, extend); |
||||||
} |
} |
||||||
}); |
}); |
||||||
|
|
||||||
return nodes; |
return nodes; |
||||||
}, |
} |
||||||
|
|
||||||
_assertId: function (sNodes) { |
_assertId(sNodes) { |
||||||
BI.each(sNodes, function (i, node) { |
each(sNodes, (i, node) => { |
||||||
if (!BI.isKey(node.id)) { |
if (!isKey(node.id)) { |
||||||
node.id = BI.UUID(); |
node.id = UUID(); |
||||||
} |
} |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
// 构造树结构,
|
initTree(nodes) { |
||||||
initTree: function (nodes) { |
const self = this, o = this.options; |
||||||
var self = this, o = this.options; |
|
||||||
this.empty(); |
this.empty(); |
||||||
this._assertId(nodes); |
this._assertId(nodes); |
||||||
this.tree = BI.createWidget({ |
this.tree = createWidget({ |
||||||
type: "bi.custom_tree", |
type: CustomTree.xtype, |
||||||
element: this, |
element: this, |
||||||
expander: BI.extend({ |
expander: extend({ |
||||||
type: "bi.tree_expander", |
type: TreeExpander.xtype, |
||||||
el: {}, |
el: {}, |
||||||
isDefaultInit: false, |
isDefaultInit: false, |
||||||
selectable: false, |
selectable: false, |
||||||
popup: { |
popup: { |
||||||
type: "bi.custom_tree" |
type: CustomTree.xtype, |
||||||
} |
}, |
||||||
}, o.expander), |
}, o.expander), |
||||||
items: this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0), |
items: this._formatItems(Tree.transformToTreeFormat(nodes), 0), |
||||||
value: o.value, |
value: o.value, |
||||||
|
|
||||||
el: BI.extend({ |
el: extend({ |
||||||
type: "bi.button_tree", |
type: ButtonTree.xtype, |
||||||
chooseType: 0, |
chooseType: 0, |
||||||
layouts: [{ |
layouts: [ |
||||||
type: "bi.vertical" |
{ |
||||||
}] |
type: VerticalLayout.xtype, |
||||||
}, o.el) |
} |
||||||
|
], |
||||||
|
}, o.el), |
||||||
}); |
}); |
||||||
this.tree.on(BI.Controller.EVENT_CHANGE, function (type, value, ob) { |
this.tree.on(BI.Controller.EVENT_CHANGE, function (type, value, ob) { |
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
||||||
if (type === BI.Events.CLICK) { |
if (type === BI.Events.CLICK) { |
||||||
self.fireEvent(BI.LevelTree.EVENT_CHANGE, value, ob); |
self.fireEvent(LevelTree.EVENT_CHANGE, value, ob); |
||||||
self.setValue(value); |
self.setValue(value); |
||||||
} |
} |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
// 生成树方法
|
stroke(nodes) { |
||||||
stroke: function (nodes) { |
this.tree.stroke(nodes); |
||||||
this.tree.stroke.apply(this.tree, arguments); |
} |
||||||
}, |
|
||||||
|
|
||||||
populate: function (items, keyword) { |
populate(items, keyword) { |
||||||
items = this._formatItems(BI.Tree.transformToTreeFormat(items), 0); |
items = this._formatItems(Tree.transformToTreeFormat(items), 0); |
||||||
this.tree.populate(items, keyword); |
this.tree.populate(items, keyword); |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.tree.setValue(v); |
this.tree.setValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return this.tree.getValue(); |
return this.tree.getValue(); |
||||||
}, |
} |
||||||
|
|
||||||
getAllLeaves: function () { |
getAllLeaves() { |
||||||
return this.tree.getAllLeaves(); |
return this.tree.getAllLeaves(); |
||||||
}, |
} |
||||||
|
|
||||||
getNodeById: function (id) { |
getNodeById(id) { |
||||||
return this.tree.getNodeById(id); |
return this.tree.getNodeById(id); |
||||||
}, |
} |
||||||
|
|
||||||
getNodeByValue: function (id) { |
getNodeByValue(id) { |
||||||
return this.tree.getNodeByValue(id); |
return this.tree.getNodeByValue(id); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.LevelTree.EVENT_CHANGE = "EVENT_CHANGE"; |
|
||||||
|
|
||||||
BI.shortcut("bi.level_tree", BI.LevelTree); |
|
||||||
|
@ -1,80 +1,84 @@ |
|||||||
!(function () { |
import { contains, Controller, createWidget, isArray, shortcut, Widget } from "@/core"; |
||||||
var Widget = BI.inherit(BI.Widget, { |
import { Expander } from "@/base"; |
||||||
props: { |
import { TreeExpanderPopup } from "./tree.expander.popup"; |
||||||
baseCls: "bi-tree-expander", |
|
||||||
layer: 0, // 第几层级
|
|
||||||
isLastNode: false, // 是不是最后一个
|
|
||||||
isFirstNode: false, // 是不是第一个
|
|
||||||
selectable: false, |
|
||||||
showLine: true, |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
|
export class TreeExpander extends Widget { |
||||||
|
static xtype = "bi.tree_expander"; |
||||||
|
|
||||||
var self = this; |
props = { |
||||||
var o = this.options; |
baseCls: "bi-tree-expander", |
||||||
|
layer: 0, // 第几层级
|
||||||
|
isLastNode: false, // 是不是最后一个
|
||||||
|
isFirstNode: false, // 是不是第一个
|
||||||
|
selectable: false, |
||||||
|
showLine: true, |
||||||
|
}; |
||||||
|
|
||||||
this.trigger = BI.createWidget(o.el, { |
render() { |
||||||
forceNotSelected: !o.selectable, |
const self = this; |
||||||
}); |
const o = this.options; |
||||||
this.trigger.on(BI.Controller.EVENT_CHANGE, function (type) { |
|
||||||
o.selectable && self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
|
||||||
}); |
|
||||||
|
|
||||||
return { |
this.trigger = createWidget(o.el, { |
||||||
type: "bi.expander", |
forceNotSelected: !o.selectable, |
||||||
ref: function (_ref) { |
}); |
||||||
self.expander = _ref; |
this.trigger.on(Controller.EVENT_CHANGE, function (type) { |
||||||
}, |
o.selectable && self.fireEvent(Controller.EVENT_CHANGE, arguments); |
||||||
trigger: o.selectable ? "" : "click", |
}); |
||||||
el: this.trigger, |
|
||||||
isDefaultInit: o.isDefaultInit, |
|
||||||
popup: { |
|
||||||
type: "bi.tree_expander.popup", |
|
||||||
layer: o.layer || o.el.layer, |
|
||||||
isLastNode: o.isLastNode || o.el.isLastNode, |
|
||||||
isFirstNode: o.isFirstNode || o.el.isFirstNode, |
|
||||||
showLine: o.showLine, |
|
||||||
el: o.popup, |
|
||||||
}, |
|
||||||
value: o.value, |
|
||||||
listeners: [ |
|
||||||
{ |
|
||||||
eventName: BI.Controller.EVENT_CHANGE, |
|
||||||
action: function (type) { |
|
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
|
||||||
}, |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
||||||
}, |
|
||||||
|
|
||||||
setValue: function (v) { |
return { |
||||||
if (BI.contains(v, this.trigger.getValue())) { |
type: Expander.xtype, |
||||||
this.trigger.setSelected(true); |
ref(_ref) { |
||||||
this.expander.setValue([]); |
self.expander = _ref; |
||||||
} else { |
}, |
||||||
this.trigger.setSelected(false); |
trigger: o.selectable ? "" : "click", |
||||||
this.expander.setValue(v); |
el: this.trigger, |
||||||
} |
isDefaultInit: o.isDefaultInit, |
||||||
}, |
popup: { |
||||||
|
type: TreeExpanderPopup.xtype, |
||||||
|
layer: o.layer || o.el.layer, |
||||||
|
isLastNode: o.isLastNode || o.el.isLastNode, |
||||||
|
isFirstNode: o.isFirstNode || o.el.isFirstNode, |
||||||
|
showLine: o.showLine, |
||||||
|
el: o.popup, |
||||||
|
}, |
||||||
|
value: o.value, |
||||||
|
listeners: [ |
||||||
|
{ |
||||||
|
eventName: Controller.EVENT_CHANGE, |
||||||
|
action: (...args) => { |
||||||
|
this.fireEvent(Controller.EVENT_CHANGE, ...args); |
||||||
|
}, |
||||||
|
} |
||||||
|
], |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
getValue: function () { |
setValue(v) { |
||||||
if (this.trigger.isSelected()) { |
if (contains(v, this.trigger.getValue())) { |
||||||
var value = this.trigger.getValue(); |
this.trigger.setSelected(true); |
||||||
return BI.isArray(value) ? value : [value]; |
this.expander.setValue([]); |
||||||
} |
} else { |
||||||
return this.expander.getValue(); |
this.trigger.setSelected(false); |
||||||
}, |
this.expander.setValue(v); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
populate: function (items) { |
getValue() { |
||||||
this.expander.populate(items); |
if (this.trigger.isSelected()) { |
||||||
}, |
const value = this.trigger.getValue(); |
||||||
|
|
||||||
getAllLeaves: function () { |
return isArray(value) ? value : [value]; |
||||||
return this.expander && this.expander.getAllLeaves(); |
|
||||||
} |
} |
||||||
}); |
|
||||||
|
|
||||||
BI.shortcut("bi.tree_expander", Widget); |
return this.expander.getValue(); |
||||||
}()); |
} |
||||||
|
|
||||||
|
populate(items) { |
||||||
|
this.expander.populate(items); |
||||||
|
} |
||||||
|
|
||||||
|
getAllLeaves() { |
||||||
|
return this.expander && this.expander.getAllLeaves(); |
||||||
|
} |
||||||
|
} |
||||||
|
@ -1,60 +1,61 @@ |
|||||||
!(function () { |
import { Controller, createWidget, pixFormat, shortcut, VerticalLayout, Widget } from "@/core"; |
||||||
var Widget = BI.inherit(BI.Widget, { |
|
||||||
props: function () { |
@shortcut() |
||||||
return { |
export class TreeExpanderPopup extends Widget { |
||||||
baseCls: "bi-tree-expander-popup", |
static xtype = "bi.tree_expander.popup"; |
||||||
layer: 0, // 第几层级
|
|
||||||
el: {}, |
props() { |
||||||
isLastNode: false, |
return { |
||||||
showLine: true, |
baseCls: "bi-tree-expander-popup", |
||||||
}; |
layer: 0, // 第几层级
|
||||||
}, |
el: {}, |
||||||
|
isLastNode: false, |
||||||
render: function () { |
showLine: true, |
||||||
|
}; |
||||||
var self = this; |
} |
||||||
var o = this.options; |
|
||||||
var offset = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2; |
render() { |
||||||
|
const self = this; |
||||||
this.popupView = BI.createWidget(BI.extend(o.el, { |
const { el, value, layer, showLine, isLastNode } = this.options; |
||||||
value: o.value |
const offset = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2; |
||||||
}), this); |
|
||||||
|
this.popupView = createWidget({ |
||||||
this.popupView.on(BI.Controller.EVENT_CHANGE, function () { |
...el, |
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
value, |
||||||
}); |
}, this); |
||||||
|
|
||||||
if (o.showLine) { |
this.popupView.on(Controller.EVENT_CHANGE, function () { |
||||||
this.popupView.element.css("margin-left", BI.pixFormat(-offset * (o.layer + 1))); |
self.fireEvent(Controller.EVENT_CHANGE, arguments); |
||||||
this.element.css("margin-left", BI.pixFormat(offset * (o.layer + 1))); |
}); |
||||||
} |
|
||||||
|
if (showLine) { |
||||||
return { |
this.popupView.element.css("margin-left", pixFormat(-offset * (layer + 1))); |
||||||
type: "bi.vertical", |
this.element.css("margin-left", pixFormat(offset * (layer + 1))); |
||||||
cls: (o.showLine && !o.isLastNode) ? (BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "line solid" : "line") : "", |
|
||||||
scrolly: null, |
|
||||||
items: [ |
|
||||||
this.popupView, |
|
||||||
], |
|
||||||
}; |
|
||||||
}, |
|
||||||
|
|
||||||
setValue: function (v) { |
|
||||||
this.popupView.setValue(v); |
|
||||||
}, |
|
||||||
|
|
||||||
getValue: function () { |
|
||||||
return this.popupView.getValue(); |
|
||||||
}, |
|
||||||
|
|
||||||
populate: function (items) { |
|
||||||
this.popupView.populate(items); |
|
||||||
}, |
|
||||||
|
|
||||||
getAllLeaves: function () { |
|
||||||
return this.popupView && this.popupView.getAllLeaves(); |
|
||||||
} |
} |
||||||
}); |
|
||||||
|
|
||||||
BI.shortcut("bi.tree_expander.popup", Widget); |
return { |
||||||
}()); |
type: VerticalLayout.xtype, |
||||||
|
cls: (showLine && !isLastNode) ? (BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "line solid" : "line") : "", |
||||||
|
scrolly: null, |
||||||
|
items: [ |
||||||
|
this.popupView |
||||||
|
], |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
setValue(v) { |
||||||
|
this.popupView.setValue(v); |
||||||
|
} |
||||||
|
|
||||||
|
getValue() { |
||||||
|
return this.popupView.getValue(); |
||||||
|
} |
||||||
|
|
||||||
|
populate(items) { |
||||||
|
this.popupView.populate(items); |
||||||
|
} |
||||||
|
|
||||||
|
getAllLeaves() { |
||||||
|
return this.popupView && this.popupView.getAllLeaves(); |
||||||
|
} |
||||||
|
} |
||||||
|
@ -0,0 +1,14 @@ |
|||||||
|
import "./jquery.ztree.core-3.5"; |
||||||
|
import "./jquery.ztree.excheck-3.5"; |
||||||
|
|
||||||
|
export * from "./treeview"; |
||||||
|
export * from "./asynctree"; |
||||||
|
export * from "./parttree"; |
||||||
|
export * from "./tree.display"; |
||||||
|
export * from "./tree.list.display"; |
||||||
|
export * from "./tree.simple"; |
||||||
|
export * from "./treerender.scroll.service"; |
||||||
|
export * from "./treerender.page.service"; |
||||||
|
export * from "./list/listtreeview"; |
||||||
|
export * from "./list/listasynctree"; |
||||||
|
export * from "./list/listparttree"; |
File diff suppressed because it is too large
Load Diff
@ -1,118 +0,0 @@ |
|||||||
/** |
|
||||||
* author: windy |
|
||||||
* 继承自treeView, 此树的父子节点的勾选状态互不影响, 此树不会有半选节点 |
|
||||||
* 返回value格式为[["A"], ["A", "a"]]表示勾选了A且勾选了a |
|
||||||
* @class BI.ListTreeView |
|
||||||
* @extends BI.TreeView |
|
||||||
*/ |
|
||||||
BI.ListTreeView = BI.inherit(BI.TreeView, { |
|
||||||
|
|
||||||
_constants: { |
|
||||||
SPLIT: "<|>" |
|
||||||
}, |
|
||||||
|
|
||||||
_defaultConfig: function () { |
|
||||||
return BI.extend(BI.ListTreeView.superclass._defaultConfig.apply(this, arguments), { |
|
||||||
value: {} |
|
||||||
}); |
|
||||||
}, |
|
||||||
_init: function () { |
|
||||||
BI.ListTreeView.superclass._init.apply(this, arguments); |
|
||||||
var o = this.options; |
|
||||||
if(BI.isNotNull(o.value)) { |
|
||||||
this.setSelectedValue(o.value); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
// 配置属性
|
|
||||||
_configSetting: function () { |
|
||||||
var paras = this.options.paras; |
|
||||||
var self = this; |
|
||||||
var setting = { |
|
||||||
async: { |
|
||||||
enable: false |
|
||||||
}, |
|
||||||
check: { |
|
||||||
enable: true, |
|
||||||
chkboxType: {Y: "", N: ""} |
|
||||||
}, |
|
||||||
data: { |
|
||||||
key: { |
|
||||||
title: "title", |
|
||||||
name: "text" |
|
||||||
}, |
|
||||||
simpleData: { |
|
||||||
enable: true |
|
||||||
} |
|
||||||
}, |
|
||||||
view: { |
|
||||||
showIcon: false, |
|
||||||
expandSpeed: "", |
|
||||||
nameIsHTML: true, |
|
||||||
dblClickExpand: false |
|
||||||
}, |
|
||||||
callback: { |
|
||||||
onCheck: onCheck, |
|
||||||
onClick: onClick |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
function onClick (event, treeId, treeNode) { |
|
||||||
var zTree = BI.$.fn.zTree.getZTreeObj(treeId); |
|
||||||
var checked = treeNode.checked; |
|
||||||
self._checkValue(treeNode, !checked); |
|
||||||
zTree.checkNode(treeNode, !checked, true, true); |
|
||||||
} |
|
||||||
|
|
||||||
function onCheck (event, treeId, treeNode) { |
|
||||||
self._selectTreeNode(treeId, treeNode); |
|
||||||
} |
|
||||||
|
|
||||||
return setting; |
|
||||||
}, |
|
||||||
|
|
||||||
_selectTreeNode: function (treeId, treeNode) { |
|
||||||
this._checkValue(treeNode, treeNode.checked); |
|
||||||
BI.ListTreeView.superclass._selectTreeNode.apply(this, arguments); |
|
||||||
}, |
|
||||||
|
|
||||||
_transArrayToMap: function (treeArrays) { |
|
||||||
var self = this; |
|
||||||
var map = {}; |
|
||||||
BI.each(treeArrays, function (idx, array) { |
|
||||||
var key = array.join(self._constants.SPLIT); |
|
||||||
map[key] = true; |
|
||||||
}); |
|
||||||
return map; |
|
||||||
}, |
|
||||||
|
|
||||||
_transMapToArray: function (treeMap) { |
|
||||||
var self = this; |
|
||||||
var array = []; |
|
||||||
BI.each(treeMap, function (key) { |
|
||||||
var item = key.split(self._constants.SPLIT); |
|
||||||
array.push(item); |
|
||||||
}); |
|
||||||
return array; |
|
||||||
}, |
|
||||||
|
|
||||||
_checkValue: function (treeNode, checked) { |
|
||||||
var key = BI.concat(this._getParentValues(treeNode), this._getNodeValue(treeNode)).join(this._constants.SPLIT); |
|
||||||
if(checked) { |
|
||||||
this.storeValue[key] = true; |
|
||||||
} else { |
|
||||||
delete this.storeValue[key]; |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
setSelectedValue: function (value) { |
|
||||||
this.options.paras.selectedValues = value || []; |
|
||||||
this.storeValue = this._transArrayToMap(value); |
|
||||||
}, |
|
||||||
|
|
||||||
getValue: function () { |
|
||||||
return this._transMapToArray(this.storeValue); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
BI.shortcut("bi.list_tree_view", BI.ListTreeView); |
|
@ -1,123 +0,0 @@ |
|||||||
/** |
|
||||||
* author: windy |
|
||||||
* 继承自treeView, 此树的父子节点的勾选状态互不影响, 此树不会有半选节点 |
|
||||||
* 返回value格式为["A", ["A", "a"]]表示勾选了A且勾选了a |
|
||||||
* @class BI.ListListAsyncTree |
|
||||||
* @extends BI.TreeView |
|
||||||
*/ |
|
||||||
BI.ListAsyncTree = BI.inherit(BI.ListTreeView, { |
|
||||||
_defaultConfig: function () { |
|
||||||
return BI.extend(BI.ListAsyncTree.superclass._defaultConfig.apply(this, arguments), {}); |
|
||||||
}, |
|
||||||
_init: function () { |
|
||||||
BI.ListAsyncTree.superclass._init.apply(this, arguments); |
|
||||||
}, |
|
||||||
|
|
||||||
// 配置属性
|
|
||||||
_configSetting: function () { |
|
||||||
var paras = this.options.paras; |
|
||||||
var self = this; |
|
||||||
var setting = { |
|
||||||
async: { |
|
||||||
enable: false, // 很明显这棵树把异步请求关掉了,所有的异步请求都是手动控制的
|
|
||||||
otherParam: BI.cjkEncodeDO(paras) |
|
||||||
}, |
|
||||||
check: { |
|
||||||
enable: true, |
|
||||||
chkboxType: {Y: "", N: ""} |
|
||||||
}, |
|
||||||
data: { |
|
||||||
key: { |
|
||||||
title: "title", |
|
||||||
name: "text" |
|
||||||
}, |
|
||||||
simpleData: { |
|
||||||
enable: true |
|
||||||
} |
|
||||||
}, |
|
||||||
view: { |
|
||||||
showIcon: false, |
|
||||||
expandSpeed: "", |
|
||||||
nameIsHTML: true, |
|
||||||
dblClickExpand: false |
|
||||||
}, |
|
||||||
callback: { |
|
||||||
onCheck: onCheck, |
|
||||||
beforeExpand: beforeExpand, |
|
||||||
beforeCheck: beforeCheck, |
|
||||||
onClick: onClick |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
function beforeCheck (treeId, treeNode) { |
|
||||||
treeNode.half = false; |
|
||||||
} |
|
||||||
|
|
||||||
function onClick (event, treeId, treeNode) { |
|
||||||
var zTree = BI.$.fn.zTree.getZTreeObj(treeId); |
|
||||||
var checked = treeNode.checked; |
|
||||||
self._checkValue(treeNode, !checked); |
|
||||||
zTree.checkNode(treeNode, !checked, true, true); |
|
||||||
} |
|
||||||
|
|
||||||
function beforeExpand (treeId, treeNode) { |
|
||||||
self._beforeExpandNode(treeId, treeNode); |
|
||||||
} |
|
||||||
|
|
||||||
function onCheck (event, treeId, treeNode) { |
|
||||||
self._selectTreeNode(treeId, treeNode); |
|
||||||
} |
|
||||||
|
|
||||||
return setting; |
|
||||||
}, |
|
||||||
|
|
||||||
// 展开节点
|
|
||||||
_beforeExpandNode: function (treeId, treeNode) { |
|
||||||
var self = this, o = this.options; |
|
||||||
var parentValues = treeNode.parentValues || self._getParentValues(treeNode); |
|
||||||
var op = BI.extend({}, o.paras, { |
|
||||||
id: treeNode.id, |
|
||||||
times: 1, |
|
||||||
parentValues: parentValues.concat(this._getNodeValue(treeNode)) |
|
||||||
}); |
|
||||||
var complete = function (d) { |
|
||||||
var nodes = d.items || []; |
|
||||||
if (nodes.length > 0) { |
|
||||||
callback(self._dealWidthNodes(nodes), !!d.hasNext); |
|
||||||
} |
|
||||||
}; |
|
||||||
var times = 1; |
|
||||||
|
|
||||||
function callback (nodes, hasNext) { |
|
||||||
self.nodes.addNodes(treeNode, nodes); |
|
||||||
// 展开节点是没有分页的
|
|
||||||
if (hasNext === true) { |
|
||||||
BI.delay(function () { |
|
||||||
times++; |
|
||||||
op.times = times; |
|
||||||
o.itemsCreator(op, complete); |
|
||||||
}, 100); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
if (!treeNode.children) { |
|
||||||
setTimeout(function () { |
|
||||||
o.itemsCreator(op, complete); |
|
||||||
}, 17); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
hasChecked: function () { |
|
||||||
return !BI.isEmpty(this.options.paras.selectedValues) || BI.ListAsyncTree.superclass.hasChecked.apply(this, arguments); |
|
||||||
}, |
|
||||||
|
|
||||||
// 生成树方法
|
|
||||||
stroke: function (config) { |
|
||||||
delete this.options.keyword; |
|
||||||
BI.extend(this.options.paras, config); |
|
||||||
var setting = this._configSetting(); |
|
||||||
this._initTree(setting); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
BI.shortcut("bi.list_async_tree", BI.ListAsyncTree); |
|
@ -0,0 +1,122 @@ |
|||||||
|
/** |
||||||
|
* author: windy |
||||||
|
* 继承自treeView, 此树的父子节点的勾选状态互不影响, 此树不会有半选节点 |
||||||
|
* 返回value格式为["A", ["A", "a"]]表示勾选了A且勾选了a |
||||||
|
* @class ListListAsyncTree |
||||||
|
* @extends TreeView |
||||||
|
*/ |
||||||
|
|
||||||
|
import { Listtreeview } from "./listtreeview"; |
||||||
|
import { cjkEncodeDO, delay, isEmpty, shortcut, extend } from "@/core"; |
||||||
|
|
||||||
|
@shortcut() |
||||||
|
export class Listasynctree extends Listtreeview { |
||||||
|
static xtype = "bi.list_async_tree"; |
||||||
|
|
||||||
|
// 配置属性
|
||||||
|
_configSetting() { |
||||||
|
const paras = this.options.paras; |
||||||
|
const self = this; |
||||||
|
|
||||||
|
function beforeCheck(treeId, treeNode) { |
||||||
|
treeNode.half = false; |
||||||
|
} |
||||||
|
|
||||||
|
function onClick(event, treeId, treeNode) { |
||||||
|
const zTree = BI.$.fn.zTree.getZTreeObj(treeId); |
||||||
|
const checked = treeNode.checked; |
||||||
|
self._checkValue(treeNode, !checked); |
||||||
|
zTree.checkNode(treeNode, !checked, true, true); |
||||||
|
} |
||||||
|
|
||||||
|
function beforeExpand(treeId, treeNode) { |
||||||
|
self._beforeExpandNode(treeId, treeNode); |
||||||
|
} |
||||||
|
|
||||||
|
function onCheck(event, treeId, treeNode) { |
||||||
|
self._selectTreeNode(treeId, treeNode); |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
async: { |
||||||
|
enable: false, // 很明显这棵树把异步请求关掉了,所有的异步请求都是手动控制的
|
||||||
|
otherParam: cjkEncodeDO(paras), |
||||||
|
}, |
||||||
|
check: { |
||||||
|
enable: true, |
||||||
|
chkboxType: { Y: "", N: "" }, |
||||||
|
}, |
||||||
|
data: { |
||||||
|
key: { |
||||||
|
title: "title", |
||||||
|
name: "text", |
||||||
|
}, |
||||||
|
simpleData: { |
||||||
|
enable: true, |
||||||
|
}, |
||||||
|
}, |
||||||
|
view: { |
||||||
|
showIcon: false, |
||||||
|
expandSpeed: "", |
||||||
|
nameIsHTML: true, |
||||||
|
dblClickExpand: false, |
||||||
|
}, |
||||||
|
callback: { |
||||||
|
onCheck, |
||||||
|
beforeExpand, |
||||||
|
beforeCheck, |
||||||
|
onClick, |
||||||
|
}, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
// 展开节点
|
||||||
|
_beforeExpandNode(treeId, treeNode) { |
||||||
|
const self = this, o = this.options; |
||||||
|
const parentValues = treeNode.parentValues || self._getParentValues(treeNode); |
||||||
|
const op = extend({}, o.paras, { |
||||||
|
id: treeNode.id, |
||||||
|
times: 1, |
||||||
|
parentValues: parentValues.concat(this._getNodeValue(treeNode)), |
||||||
|
}); |
||||||
|
|
||||||
|
function complete(d) { |
||||||
|
const nodes = d.items || []; |
||||||
|
if (nodes.length > 0) { |
||||||
|
callback(self._dealWidthNodes(nodes), !!d.hasNext); |
||||||
|
} |
||||||
|
}; |
||||||
|
let times = 1; |
||||||
|
|
||||||
|
function callback(nodes, hasNext) { |
||||||
|
self.nodes.addNodes(treeNode, nodes); |
||||||
|
// 展开节点是没有分页的
|
||||||
|
if (hasNext === true) { |
||||||
|
delay(() => { |
||||||
|
times++; |
||||||
|
op.times = times; |
||||||
|
o.itemsCreator(op, complete); |
||||||
|
}, 100); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (!treeNode.children) { |
||||||
|
setTimeout(() => { |
||||||
|
o.itemsCreator(op, complete); |
||||||
|
}, 17); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
hasChecked() { |
||||||
|
return !isEmpty(this.options.paras.selectedValues) || super.hasChecked(...arguments); |
||||||
|
} |
||||||
|
|
||||||
|
// 生成树方法
|
||||||
|
stroke(config) { |
||||||
|
delete this.options.keyword; |
||||||
|
extend(this.options.paras, config); |
||||||
|
const setting = this._configSetting(); |
||||||
|
this._initTree(setting); |
||||||
|
} |
||||||
|
} |
||||||
|
|
@ -0,0 +1,121 @@ |
|||||||
|
/** |
||||||
|
* author: windy |
||||||
|
* 继承自treeView, 此树的父子节点的勾选状态互不影响, 此树不会有半选节点 |
||||||
|
* 返回value格式为[["A"], ["A", "a"]]表示勾选了A且勾选了a |
||||||
|
* @class BI.ListTreeView |
||||||
|
* @extends BI.TreeView |
||||||
|
*/ |
||||||
|
|
||||||
|
import { TreeView } from "../treeview"; |
||||||
|
import { extend, isNotNull, concat, each, shortcut } from "@/core"; |
||||||
|
|
||||||
|
@shortcut() |
||||||
|
export class Listtreeview extends TreeView { |
||||||
|
static xtype = "bi.list_tree_view"; |
||||||
|
|
||||||
|
_constants = { |
||||||
|
SPLIT: "<|>", |
||||||
|
}; |
||||||
|
|
||||||
|
_defaultConfig() { |
||||||
|
return extend(super._defaultConfig(...arguments), { |
||||||
|
value: {}, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
_init() { |
||||||
|
super._init(...arguments); |
||||||
|
const o = this.options; |
||||||
|
if (isNotNull(o.value)) { |
||||||
|
this.setSelectedValue(o.value); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 配置属性
|
||||||
|
_configSetting() { |
||||||
|
const self = this; |
||||||
|
|
||||||
|
function onClick(event, treeId, treeNode) { |
||||||
|
const zTree = BI.$.fn.zTree.getZTreeObj(treeId); |
||||||
|
const checked = treeNode.checked; |
||||||
|
self._checkValue(treeNode, !checked); |
||||||
|
zTree.checkNode(treeNode, !checked, true, true); |
||||||
|
} |
||||||
|
|
||||||
|
function onCheck(event, treeId, treeNode) { |
||||||
|
self._selectTreeNode(treeId, treeNode); |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
async: { |
||||||
|
enable: false, |
||||||
|
}, |
||||||
|
check: { |
||||||
|
enable: true, |
||||||
|
chkboxType: { Y: "", N: "" }, |
||||||
|
}, |
||||||
|
data: { |
||||||
|
key: { |
||||||
|
title: "title", |
||||||
|
name: "text", |
||||||
|
}, |
||||||
|
simpleData: { |
||||||
|
enable: true, |
||||||
|
}, |
||||||
|
}, |
||||||
|
view: { |
||||||
|
showIcon: false, |
||||||
|
expandSpeed: "", |
||||||
|
nameIsHTML: true, |
||||||
|
dblClickExpand: false, |
||||||
|
}, |
||||||
|
callback: { |
||||||
|
onCheck, |
||||||
|
onClick, |
||||||
|
}, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
_selectTreeNode(treeId, treeNode) { |
||||||
|
this._checkValue(treeNode, treeNode.checked); |
||||||
|
super._selectTreeNode(...arguments); |
||||||
|
} |
||||||
|
|
||||||
|
_transArrayToMap(treeArrays) { |
||||||
|
const map = {}; |
||||||
|
each(treeArrays, (idx, array) => { |
||||||
|
const key = array.join(this._constants.SPLIT); |
||||||
|
map[key] = true; |
||||||
|
}); |
||||||
|
|
||||||
|
return map; |
||||||
|
} |
||||||
|
|
||||||
|
_transMapToArray(treeMap) { |
||||||
|
const array = []; |
||||||
|
BI.each(treeMap, key => { |
||||||
|
const item = key.split(this._constants.SPLIT); |
||||||
|
array.push(item); |
||||||
|
}); |
||||||
|
|
||||||
|
return array; |
||||||
|
} |
||||||
|
|
||||||
|
_checkValue(treeNode, checked) { |
||||||
|
const key = concat(this._getParentValues(treeNode), this._getNodeValue(treeNode)).join(this._constants.SPLIT); |
||||||
|
if (checked) { |
||||||
|
this.storeValue[key] = true; |
||||||
|
} else { |
||||||
|
delete this.storeValue[key]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setSelectedValue(value) { |
||||||
|
this.options.paras.selectedValues = value || []; |
||||||
|
this.storeValue = this._transArrayToMap(value); |
||||||
|
} |
||||||
|
|
||||||
|
getValue() { |
||||||
|
return this._transMapToArray(this.storeValue); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,73 @@ |
|||||||
|
/** |
||||||
|
* @author windy |
||||||
|
* @version 2.0 |
||||||
|
* Created by windy on 2020/1/8 |
||||||
|
* 提供节点分页加载方式 |
||||||
|
*/ |
||||||
|
|
||||||
|
import { createWidget, debounce, has, OB, size, each, VerticalLayout } from "@/core"; |
||||||
|
import { LoadingBar } from "@/base"; |
||||||
|
|
||||||
|
export class TreeRenderPageService extends OB { |
||||||
|
nodeLists = {}; |
||||||
|
|
||||||
|
_getLoadingBar(tId) { |
||||||
|
const tip = createWidget({ |
||||||
|
type: LoadingBar.xtype, |
||||||
|
height: 25, |
||||||
|
handler: () => { |
||||||
|
this.refreshNodes(tId); |
||||||
|
}, |
||||||
|
}); |
||||||
|
tip.setLoaded(); |
||||||
|
|
||||||
|
return tip; |
||||||
|
} |
||||||
|
|
||||||
|
pushNodeList(tId, populate) { |
||||||
|
const o = this.options; |
||||||
|
const tip = this._getLoadingBar(tId); |
||||||
|
if (!has(this.nodeLists, tId)) { |
||||||
|
this.nodeLists[tId] = { |
||||||
|
populate: debounce(populate, 0), |
||||||
|
options: { |
||||||
|
times: 1, |
||||||
|
}, |
||||||
|
loadWidget: tip, |
||||||
|
}; |
||||||
|
} else { |
||||||
|
this.nodeLists[tId].loadWidget.destroy(); |
||||||
|
this.nodeLists[tId].loadWidget = tip; |
||||||
|
} |
||||||
|
createWidget({ |
||||||
|
type: VerticalLayout.xtype, |
||||||
|
element: o.subNodeListGetter(tId), |
||||||
|
items: [tip], |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
refreshNodes(tId) { |
||||||
|
const nodeList = this.nodeLists[tId]; |
||||||
|
nodeList.options.times++; |
||||||
|
nodeList.loadWidget.setLoading(); |
||||||
|
nodeList.populate({ |
||||||
|
times: nodeList.options.times, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
removeNodeList(tId) { |
||||||
|
this.nodeLists[tId] && this.nodeLists[tId].loadWidget.destroy(); |
||||||
|
this.nodeLists[tId] && (this.nodeLists[tId].loadWidget = null); |
||||||
|
delete this.nodeLists[tId]; |
||||||
|
if (size(this.nodeLists) === 0) { |
||||||
|
this.clear(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
clear() { |
||||||
|
each(this.nodeLists, tId => { |
||||||
|
this.removeNodeList(tId); |
||||||
|
}); |
||||||
|
this.nodeLists = {}; |
||||||
|
} |
||||||
|
} |
@ -1,76 +0,0 @@ |
|||||||
/** |
|
||||||
* @author windy |
|
||||||
* @version 2.0 |
|
||||||
* Created by windy on 2020/1/8 |
|
||||||
* 提供节点分页加载方式 |
|
||||||
*/ |
|
||||||
|
|
||||||
!(function () { |
|
||||||
BI.TreeRenderPageService = BI.inherit(BI.OB, { |
|
||||||
_init: function () { |
|
||||||
this.nodeLists = {}; |
|
||||||
}, |
|
||||||
|
|
||||||
_getLoadingBar: function(tId) { |
|
||||||
var self = this; |
|
||||||
var tip = BI.createWidget({ |
|
||||||
type: "bi.loading_bar", |
|
||||||
height: 25, |
|
||||||
handler: function () { |
|
||||||
self.refreshNodes(tId); |
|
||||||
} |
|
||||||
}); |
|
||||||
tip.setLoaded(); |
|
||||||
return tip; |
|
||||||
}, |
|
||||||
|
|
||||||
pushNodeList: function (tId, populate) { |
|
||||||
var self = this, o = this.options; |
|
||||||
var tip = this._getLoadingBar(tId); |
|
||||||
if (!BI.has(this.nodeLists, tId)) { |
|
||||||
this.nodeLists[tId] = { |
|
||||||
populate: BI.debounce(populate, 0), |
|
||||||
options: { |
|
||||||
times: 1 |
|
||||||
}, |
|
||||||
loadWidget: tip |
|
||||||
}; |
|
||||||
} else { |
|
||||||
this.nodeLists[tId].loadWidget.destroy(); |
|
||||||
this.nodeLists[tId].loadWidget = tip; |
|
||||||
} |
|
||||||
BI.createWidget({ |
|
||||||
type: "bi.vertical", |
|
||||||
element: o.subNodeListGetter(tId), |
|
||||||
items: [tip] |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
refreshNodes: function (tId) { |
|
||||||
var nodeList = this.nodeLists[tId]; |
|
||||||
nodeList.options.times++; |
|
||||||
nodeList.loadWidget.setLoading(); |
|
||||||
nodeList.populate({ |
|
||||||
times: nodeList.options.times |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
removeNodeList: function (tId) { |
|
||||||
this.nodeLists[tId] && this.nodeLists[tId].loadWidget.destroy(); |
|
||||||
this.nodeLists[tId] && (this.nodeLists[tId].loadWidget = null); |
|
||||||
delete this.nodeLists[tId]; |
|
||||||
if (BI.size(this.nodeLists) === 0) { |
|
||||||
this.clear(); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
clear: function () { |
|
||||||
var self = this; |
|
||||||
BI.each(this.nodeLists, function (tId) { |
|
||||||
self.removeNodeList(tId); |
|
||||||
}); |
|
||||||
this.nodeLists = {}; |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
})(); |
|
@ -1,204 +1,206 @@ |
|||||||
import { parseInt, parseFloat, isNull, isKey } from "../2.base"; |
import { parseInt, parseFloat, isNull, isKey } from "../2.base"; |
||||||
import * as DOMUtils from "../platform/web/dom"; |
|
||||||
|
|
||||||
export const DOM = { |
|
||||||
isColor(color) { |
|
||||||
return color && (this.isRGBColor(color) || this.isHexColor(color)); |
|
||||||
}, |
|
||||||
|
|
||||||
isRGBColor(color) { |
|
||||||
if (!color) { |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
return color.substr(0, 3) === "rgb"; |
|
||||||
}, |
|
||||||
|
|
||||||
isHexColor(color) { |
|
||||||
if (!color) { |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
return color[0] === "#" && color.length === 7; |
|
||||||
}, |
|
||||||
|
|
||||||
isDarkColor(hex) { |
|
||||||
if (!hex || !this.isHexColor(hex)) { |
|
||||||
return false; |
|
||||||
} |
|
||||||
const rgb = this.rgb2json(this.hex2rgb(hex)); |
|
||||||
const grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114); |
|
||||||
if (grayLevel < 192/** 网上给的是140**/) { |
|
||||||
return true; |
|
||||||
} |
|
||||||
|
|
||||||
|
export function isColor(color) { |
||||||
|
return color && (isRGBColor(color) || isHexColor(color)); |
||||||
|
} |
||||||
|
|
||||||
|
export function isRGBColor(color) { |
||||||
|
if (!color) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
return color.substr(0, 3) === "rgb"; |
||||||
|
} |
||||||
|
|
||||||
|
export function isHexColor(color) { |
||||||
|
if (!color) { |
||||||
return false; |
return false; |
||||||
}, |
} |
||||||
|
|
||||||
// 获取对比颜色
|
return color[0] === "#" && color.length === 7; |
||||||
getContrastColor(color) { |
} |
||||||
if (!color || !this.isColor(color)) { |
|
||||||
return ""; |
export function isDarkColor(hex) { |
||||||
} |
if (!hex || !isHexColor(hex)) { |
||||||
if (this.isDarkColor(color)) { |
return false; |
||||||
return "#FFFFFF"; |
} |
||||||
} |
const rgb = rgb2json(hex2rgb(hex)); |
||||||
|
const grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114); |
||||||
return "#3D4D66"; |
if (grayLevel < 192/** 网上给的是140**/) { |
||||||
}, |
return true; |
||||||
|
} |
||||||
rgb2hex(rgbColour) { |
|
||||||
if (!rgbColour || rgbColour.substr(0, 3) !== "rgb") { |
return false; |
||||||
return ""; |
} |
||||||
} |
|
||||||
const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
// 获取对比颜色
|
||||||
const red = parseInt(rgbValues[0]); |
export function getContrastColor(color) { |
||||||
const green = parseInt(rgbValues[1]); |
if (!color || !isColor(color)) { |
||||||
const blue = parseInt(rgbValues[2]); |
return ""; |
||||||
|
} |
||||||
const hexColour = `#${this.int2hex(red)}${this.int2hex(green)}${this.int2hex(blue)}`; |
if (isDarkColor(color)) { |
||||||
|
return "#FFFFFF"; |
||||||
return hexColour; |
} |
||||||
}, |
|
||||||
|
return "#3D4D66"; |
||||||
_hue2rgb(m1, m2, h) { |
} |
||||||
h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); |
|
||||||
if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; |
export function rgb2hex(rgbColour) { |
||||||
if (h * 2 < 1) return m2; |
if (!rgbColour || rgbColour.substr(0, 3) !== "rgb") { |
||||||
if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; |
return ""; |
||||||
|
} |
||||||
return m1; |
const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
||||||
}, |
const red = parseInt(rgbValues[0]); |
||||||
|
const green = parseInt(rgbValues[1]); |
||||||
hsl2rgb(hsl) { |
const blue = parseInt(rgbValues[2]); |
||||||
const h = hsl[0], s = hsl[1], l = hsl[2]; |
|
||||||
const m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s; |
const hexColour = `#${int2hex(red)}${int2hex(green)}${int2hex(blue)}`; |
||||||
const m1 = l * 2 - m2; |
|
||||||
|
return hexColour; |
||||||
return [this._hue2rgb(m1, m2, h + 0.33333), |
} |
||||||
this._hue2rgb(m1, m2, h), |
|
||||||
this._hue2rgb(m1, m2, h - 0.33333)]; |
function _hue2rgb(m1, m2, h) { |
||||||
}, |
h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); |
||||||
|
if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; |
||||||
rgb2hsl(rgb) { |
if (h * 2 < 1) return m2; |
||||||
let h, s; |
if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; |
||||||
const r = rgb[0], g = rgb[1], b = rgb[2]; |
|
||||||
const min = Math.min(r, Math.min(g, b)); |
return m1; |
||||||
const max = Math.max(r, Math.max(g, b)); |
} |
||||||
const delta = max - min; |
|
||||||
const l = (min + max) / 2; |
export function hsl2rgb(hsl) { |
||||||
s = 0; |
const h = hsl[0], s = hsl[1], l = hsl[2]; |
||||||
if (l > 0 && l < 1) { |
const m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s; |
||||||
s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); |
const m1 = l * 2 - m2; |
||||||
} |
|
||||||
h = 0; |
return [ |
||||||
if (delta > 0) { |
_hue2rgb(m1, m2, h + 0.33333), |
||||||
if (max === r && max !== g) h += (g - b) / delta; |
_hue2rgb(m1, m2, h), |
||||||
if (max === g && max !== b) h += (2 + (b - r) / delta); |
_hue2rgb(m1, m2, h - 0.33333) |
||||||
if (max === b && max !== r) h += (4 + (r - g) / delta); |
]; |
||||||
h /= 6; |
} |
||||||
} |
|
||||||
|
export function rgb2hsl(rgb) { |
||||||
return [h, s, l]; |
let h, s; |
||||||
}, |
const r = rgb[0], g = rgb[1], b = rgb[2]; |
||||||
|
const min = Math.min(r, Math.min(g, b)); |
||||||
rgb2json(rgbColour) { |
const max = Math.max(r, Math.max(g, b)); |
||||||
if (!rgbColour) { |
const delta = max - min; |
||||||
return {}; |
const l = (min + max) / 2; |
||||||
} |
s = 0; |
||||||
if (!this.isRGBColor(rgbColour)) { |
if (l > 0 && l < 1) { |
||||||
return {}; |
s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); |
||||||
} |
} |
||||||
const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
h = 0; |
||||||
|
if (delta > 0) { |
||||||
return { |
if (max === r && max !== g) h += (g - b) / delta; |
||||||
r: parseInt(rgbValues[0]), |
if (max === g && max !== b) h += (2 + (b - r) / delta); |
||||||
g: parseInt(rgbValues[1]), |
if (max === b && max !== r) h += (4 + (r - g) / delta); |
||||||
b: parseInt(rgbValues[2]), |
h /= 6; |
||||||
}; |
} |
||||||
}, |
|
||||||
|
return [h, s, l]; |
||||||
rgba2json(rgbColour) { |
} |
||||||
if (!rgbColour) { |
|
||||||
return {}; |
export function rgb2json(rgbColour) { |
||||||
} |
if (!rgbColour) { |
||||||
const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
return {}; |
||||||
|
} |
||||||
return { |
if (!isRGBColor(rgbColour)) { |
||||||
r: parseInt(rgbValues[0]), |
return {}; |
||||||
g: parseInt(rgbValues[1]), |
} |
||||||
b: parseInt(rgbValues[2]), |
const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
||||||
a: parseFloat(rgbValues[3]), |
|
||||||
}; |
return { |
||||||
}, |
r: parseInt(rgbValues[0]), |
||||||
|
g: parseInt(rgbValues[1]), |
||||||
json2rgb(rgb) { |
b: parseInt(rgbValues[2]), |
||||||
if (!isKey(rgb.r) || !isKey(rgb.g) || !isKey(rgb.b)) { |
}; |
||||||
return ""; |
} |
||||||
} |
|
||||||
|
export function rgba2json(rgbColour) { |
||||||
return `rgb(${rgb.r},${rgb.g},${rgb.b})`; |
if (!rgbColour) { |
||||||
}, |
return {}; |
||||||
|
} |
||||||
json2rgba(rgba) { |
const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
||||||
if (!isKey(rgba.r) || !isKey(rgba.g) || !isKey(rgba.b)) { |
|
||||||
return ""; |
return { |
||||||
} |
r: parseInt(rgbValues[0]), |
||||||
|
g: parseInt(rgbValues[1]), |
||||||
return `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`; |
b: parseInt(rgbValues[2]), |
||||||
}, |
a: parseFloat(rgbValues[3]), |
||||||
|
}; |
||||||
int2hex(strNum) { |
} |
||||||
const hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; |
|
||||||
|
export function json2rgb(rgb) { |
||||||
return `${hexdig[strNum >>> 4]}${hexdig[strNum & 15]}`; |
if (!isKey(rgb.r) || !isKey(rgb.g) || !isKey(rgb.b)) { |
||||||
}, |
return ""; |
||||||
|
} |
||||||
hex2rgb(color) { |
|
||||||
if (!color) { |
return `rgb(${rgb.r},${rgb.g},${rgb.b})`; |
||||||
return ""; |
} |
||||||
} |
|
||||||
if (!this.isHexColor(color)) { |
export function json2rgba(rgba) { |
||||||
return color; |
if (!isKey(rgba.r) || !isKey(rgba.g) || !isKey(rgba.b)) { |
||||||
} |
return ""; |
||||||
let tempValue = "rgb(", colorArray; |
} |
||||||
|
|
||||||
if (color.length === 7) { |
return `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`; |
||||||
colorArray = [parseInt(`0x${color.substring(1, 3)}`), |
} |
||||||
parseInt(`0x${color.substring(3, 5)}`), |
|
||||||
parseInt(`0x${color.substring(5, 7)}`)]; |
export function int2hex(strNum) { |
||||||
} else if (color.length === 4) { |
const hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; |
||||||
colorArray = [parseInt(`0x${color.substring(1, 2)}`), |
|
||||||
parseInt(`0x${color.substring(2, 3)}`), |
return `${hexdig[strNum >>> 4]}${hexdig[strNum & 15]}`; |
||||||
parseInt(`0x${color.substring(3, 4)}`)]; |
} |
||||||
} |
|
||||||
tempValue += `${colorArray[0]},`; |
export function hex2rgb(color) { |
||||||
tempValue += `${colorArray[1]},`; |
if (!color) { |
||||||
tempValue += `${colorArray[2]})`; |
return ""; |
||||||
|
} |
||||||
return tempValue; |
if (!isHexColor(color)) { |
||||||
}, |
return color; |
||||||
|
} |
||||||
rgba2rgb(rgbColor, bgColor) { |
let tempValue = "rgb(", colorArray; |
||||||
if (isNull(bgColor)) { |
|
||||||
bgColor = 1; |
if (color.length === 7) { |
||||||
} |
colorArray = [ |
||||||
if (rgbColor.substr(0, 4) !== "rgba") { |
parseInt(`0x${color.substring(1, 3)}`), |
||||||
return ""; |
parseInt(`0x${color.substring(3, 5)}`), |
||||||
} |
parseInt(`0x${color.substring(5, 7)}`) |
||||||
const rgbValues = rgbColor.match(/\d+(\.\d+)?/g); |
]; |
||||||
if (rgbValues.length < 4) { |
} else if (color.length === 4) { |
||||||
return ""; |
colorArray = [ |
||||||
} |
parseInt(`0x${color.substring(1, 2)}`), |
||||||
const R = parseFloat(rgbValues[0]); |
parseInt(`0x${color.substring(2, 3)}`), |
||||||
const G = parseFloat(rgbValues[1]); |
parseInt(`0x${color.substring(3, 4)}`) |
||||||
const B = parseFloat(rgbValues[2]); |
]; |
||||||
const A = parseFloat(rgbValues[3]); |
} |
||||||
|
tempValue += `${colorArray[0]},`; |
||||||
return `rgb(${Math.floor(255 * (bgColor * (1 - A)) + R * A)},${ |
tempValue += `${colorArray[1]},`; |
||||||
Math.floor(255 * (bgColor * (1 - A)) + G * A)},${ |
tempValue += `${colorArray[2]})`; |
||||||
Math.floor(255 * (bgColor * (1 - A)) + B * A)})`;
|
|
||||||
}, |
return tempValue; |
||||||
|
} |
||||||
...DOMUtils, |
|
||||||
}; |
export function rgba2rgb(rgbColor, bgColor) { |
||||||
|
if (isNull(bgColor)) { |
||||||
|
bgColor = 1; |
||||||
|
} |
||||||
|
if (rgbColor.substr(0, 4) !== "rgba") { |
||||||
|
return ""; |
||||||
|
} |
||||||
|
const rgbValues = rgbColor.match(/\d+(\.\d+)?/g); |
||||||
|
if (rgbValues.length < 4) { |
||||||
|
return ""; |
||||||
|
} |
||||||
|
const R = parseFloat(rgbValues[0]); |
||||||
|
const G = parseFloat(rgbValues[1]); |
||||||
|
const B = parseFloat(rgbValues[2]); |
||||||
|
const A = parseFloat(rgbValues[3]); |
||||||
|
|
||||||
|
return `rgb(${Math.floor(255 * (bgColor * (1 - A)) + R * A)},${ |
||||||
|
Math.floor(255 * (bgColor * (1 - A)) + G * A)},${ |
||||||
|
Math.floor(255 * (bgColor * (1 - A)) + B * A)})`;
|
||||||
|
} |
||||||
|
|
||||||
|
@ -1,4 +1,12 @@ |
|||||||
export * from "./events"; |
export * from "./events"; |
||||||
export * from "./i18n"; |
export * from "./i18n"; |
||||||
export { makeFirstPY } from "./chinesePY"; |
export { makeFirstPY } from "./chinesePY"; |
||||||
export { DOM } from "./color"; |
|
||||||
|
import * as platformDom from "./dom"; |
||||||
|
import * as colorDom from "./color"; |
||||||
|
|
||||||
|
|
||||||
|
export const DOM = { |
||||||
|
...platformDom, |
||||||
|
...colorDom |
||||||
|
}; |
||||||
|
Loading…
Reference in new issue