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 @@
|
||||
/** |
||||
* guy |
||||
* 二级树 |
||||
* @class BI.LevelTree |
||||
* @extends BI.Single |
||||
*/ |
||||
BI.LevelTree = BI.inherit(BI.Widget, { |
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.LevelTree.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-level-tree", |
||||
el: { |
||||
chooseType: 0 |
||||
}, |
||||
expander: {}, |
||||
items: [], |
||||
value: "" |
||||
}); |
||||
}, |
||||
import { |
||||
shortcut, |
||||
Widget, |
||||
extend, |
||||
isKey, |
||||
each, |
||||
UUID, |
||||
defaults, |
||||
isNotEmptyArray, |
||||
Tree, |
||||
createWidget, |
||||
VerticalLayout |
||||
} from "@/core"; |
||||
import { ButtonTree, CustomTree } from "@/base"; |
||||
import { TreeExpander } from "./treeexpander/tree.expander"; |
||||
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 () { |
||||
BI.LevelTree.superclass._init.apply(this, arguments); |
||||
_init() { |
||||
super._init(...arguments); |
||||
|
||||
this.initTree(this.options.items); |
||||
}, |
||||
} |
||||
|
||||
_formatItems: function (nodes, layer, pNode) { |
||||
var self = this; |
||||
BI.each(nodes, function (i, node) { |
||||
var extend = { |
||||
layer: layer, |
||||
_formatItems(nodes, layer, pNode) { |
||||
const self = this; |
||||
each(nodes, (i, node) => { |
||||
const extend = { |
||||
layer, |
||||
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
||||
isFirstNode: i === 0, |
||||
isLastNode: i === nodes.length - 1, |
||||
}; |
||||
if (!BI.isKey(node.id)) { |
||||
node.id = BI.UUID(); |
||||
if (!isKey(node.id)) { |
||||
node.id = UUID(); |
||||
} |
||||
extend.pNode = pNode; |
||||
if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) { |
||||
extend.type = "bi.tree_node"; |
||||
if (node.isParent === true || node.parent === true || isNotEmptyArray(node.children)) { |
||||
extend.type = BasicTreeNode.xtype; |
||||
extend.selectable = false; |
||||
|
||||
BI.defaults(node, extend); |
||||
defaults(node, extend); |
||||
self._formatItems(node.children, layer + 1, node); |
||||
} else { |
||||
extend.type = "bi.tree_item"; |
||||
BI.defaults(node, extend); |
||||
extend.type = BasicTreeItem.xtype; |
||||
defaults(node, extend); |
||||
} |
||||
}); |
||||
|
||||
return nodes; |
||||
}, |
||||
} |
||||
|
||||
_assertId: function (sNodes) { |
||||
BI.each(sNodes, function (i, node) { |
||||
if (!BI.isKey(node.id)) { |
||||
node.id = BI.UUID(); |
||||
_assertId(sNodes) { |
||||
each(sNodes, (i, node) => { |
||||
if (!isKey(node.id)) { |
||||
node.id = UUID(); |
||||
} |
||||
}); |
||||
}, |
||||
} |
||||
|
||||
// 构造树结构,
|
||||
initTree: function (nodes) { |
||||
var self = this, o = this.options; |
||||
initTree(nodes) { |
||||
const self = this, o = this.options; |
||||
this.empty(); |
||||
this._assertId(nodes); |
||||
this.tree = BI.createWidget({ |
||||
type: "bi.custom_tree", |
||||
this.tree = createWidget({ |
||||
type: CustomTree.xtype, |
||||
element: this, |
||||
expander: BI.extend({ |
||||
type: "bi.tree_expander", |
||||
expander: extend({ |
||||
type: TreeExpander.xtype, |
||||
el: {}, |
||||
isDefaultInit: false, |
||||
selectable: false, |
||||
popup: { |
||||
type: "bi.custom_tree" |
||||
} |
||||
type: CustomTree.xtype, |
||||
}, |
||||
}, o.expander), |
||||
items: this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0), |
||||
items: this._formatItems(Tree.transformToTreeFormat(nodes), 0), |
||||
value: o.value, |
||||
|
||||
el: BI.extend({ |
||||
type: "bi.button_tree", |
||||
el: extend({ |
||||
type: ButtonTree.xtype, |
||||
chooseType: 0, |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}] |
||||
}, o.el) |
||||
layouts: [ |
||||
{ |
||||
type: VerticalLayout.xtype, |
||||
} |
||||
], |
||||
}, o.el), |
||||
}); |
||||
this.tree.on(BI.Controller.EVENT_CHANGE, function (type, value, ob) { |
||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
||||
if (type === BI.Events.CLICK) { |
||||
self.fireEvent(BI.LevelTree.EVENT_CHANGE, value, ob); |
||||
self.fireEvent(LevelTree.EVENT_CHANGE, value, ob); |
||||
self.setValue(value); |
||||
} |
||||
}); |
||||
}, |
||||
} |
||||
|
||||
// 生成树方法
|
||||
stroke: function (nodes) { |
||||
this.tree.stroke.apply(this.tree, arguments); |
||||
}, |
||||
stroke(nodes) { |
||||
this.tree.stroke(nodes); |
||||
} |
||||
|
||||
populate: function (items, keyword) { |
||||
items = this._formatItems(BI.Tree.transformToTreeFormat(items), 0); |
||||
populate(items, keyword) { |
||||
items = this._formatItems(Tree.transformToTreeFormat(items), 0); |
||||
this.tree.populate(items, keyword); |
||||
}, |
||||
} |
||||
|
||||
setValue: function (v) { |
||||
setValue(v) { |
||||
this.tree.setValue(v); |
||||
}, |
||||
} |
||||
|
||||
getValue: function () { |
||||
getValue() { |
||||
return this.tree.getValue(); |
||||
}, |
||||
} |
||||
|
||||
getAllLeaves: function () { |
||||
getAllLeaves() { |
||||
return this.tree.getAllLeaves(); |
||||
}, |
||||
} |
||||
|
||||
getNodeById: function (id) { |
||||
getNodeById(id) { |
||||
return this.tree.getNodeById(id); |
||||
}, |
||||
} |
||||
|
||||
getNodeByValue: function (id) { |
||||
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 () { |
||||
var Widget = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "bi-tree-expander", |
||||
layer: 0, // 第几层级
|
||||
isLastNode: false, // 是不是最后一个
|
||||
isFirstNode: false, // 是不是第一个
|
||||
selectable: false, |
||||
showLine: true, |
||||
}, |
||||
import { contains, Controller, createWidget, isArray, shortcut, Widget } from "@/core"; |
||||
import { Expander } from "@/base"; |
||||
import { TreeExpanderPopup } from "./tree.expander.popup"; |
||||
|
||||
render: function () { |
||||
@shortcut() |
||||
export class TreeExpander extends Widget { |
||||
static xtype = "bi.tree_expander"; |
||||
|
||||
var self = this; |
||||
var o = this.options; |
||||
props = { |
||||
baseCls: "bi-tree-expander", |
||||
layer: 0, // 第几层级
|
||||
isLastNode: false, // 是不是最后一个
|
||||
isFirstNode: false, // 是不是第一个
|
||||
selectable: false, |
||||
showLine: true, |
||||
}; |
||||
|
||||
this.trigger = BI.createWidget(o.el, { |
||||
forceNotSelected: !o.selectable, |
||||
}); |
||||
this.trigger.on(BI.Controller.EVENT_CHANGE, function (type) { |
||||
o.selectable && self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
||||
}); |
||||
render() { |
||||
const self = this; |
||||
const o = this.options; |
||||
|
||||
return { |
||||
type: "bi.expander", |
||||
ref: function (_ref) { |
||||
self.expander = _ref; |
||||
}, |
||||
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); |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
}, |
||||
this.trigger = createWidget(o.el, { |
||||
forceNotSelected: !o.selectable, |
||||
}); |
||||
this.trigger.on(Controller.EVENT_CHANGE, function (type) { |
||||
o.selectable && self.fireEvent(Controller.EVENT_CHANGE, arguments); |
||||
}); |
||||
|
||||
setValue: function (v) { |
||||
if (BI.contains(v, this.trigger.getValue())) { |
||||
this.trigger.setSelected(true); |
||||
this.expander.setValue([]); |
||||
} else { |
||||
this.trigger.setSelected(false); |
||||
this.expander.setValue(v); |
||||
} |
||||
}, |
||||
return { |
||||
type: Expander.xtype, |
||||
ref(_ref) { |
||||
self.expander = _ref; |
||||
}, |
||||
trigger: o.selectable ? "" : "click", |
||||
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 () { |
||||
if (this.trigger.isSelected()) { |
||||
var value = this.trigger.getValue(); |
||||
return BI.isArray(value) ? value : [value]; |
||||
} |
||||
return this.expander.getValue(); |
||||
}, |
||||
setValue(v) { |
||||
if (contains(v, this.trigger.getValue())) { |
||||
this.trigger.setSelected(true); |
||||
this.expander.setValue([]); |
||||
} else { |
||||
this.trigger.setSelected(false); |
||||
this.expander.setValue(v); |
||||
} |
||||
} |
||||
|
||||
populate: function (items) { |
||||
this.expander.populate(items); |
||||
}, |
||||
getValue() { |
||||
if (this.trigger.isSelected()) { |
||||
const value = this.trigger.getValue(); |
||||
|
||||
getAllLeaves: function () { |
||||
return this.expander && this.expander.getAllLeaves(); |
||||
return isArray(value) ? value : [value]; |
||||
} |
||||
}); |
||||
|
||||
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 () { |
||||
var Widget = BI.inherit(BI.Widget, { |
||||
props: function () { |
||||
return { |
||||
baseCls: "bi-tree-expander-popup", |
||||
layer: 0, // 第几层级
|
||||
el: {}, |
||||
isLastNode: false, |
||||
showLine: true, |
||||
}; |
||||
}, |
||||
|
||||
render: function () { |
||||
|
||||
var self = this; |
||||
var o = this.options; |
||||
var offset = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2; |
||||
|
||||
this.popupView = BI.createWidget(BI.extend(o.el, { |
||||
value: o.value |
||||
}), this); |
||||
|
||||
this.popupView.on(BI.Controller.EVENT_CHANGE, function () { |
||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
||||
}); |
||||
|
||||
if (o.showLine) { |
||||
this.popupView.element.css("margin-left", BI.pixFormat(-offset * (o.layer + 1))); |
||||
this.element.css("margin-left", BI.pixFormat(offset * (o.layer + 1))); |
||||
} |
||||
|
||||
return { |
||||
type: "bi.vertical", |
||||
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(); |
||||
import { Controller, createWidget, pixFormat, shortcut, VerticalLayout, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class TreeExpanderPopup extends Widget { |
||||
static xtype = "bi.tree_expander.popup"; |
||||
|
||||
props() { |
||||
return { |
||||
baseCls: "bi-tree-expander-popup", |
||||
layer: 0, // 第几层级
|
||||
el: {}, |
||||
isLastNode: false, |
||||
showLine: true, |
||||
}; |
||||
} |
||||
|
||||
render() { |
||||
const self = this; |
||||
const { el, value, layer, showLine, isLastNode } = this.options; |
||||
const offset = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2; |
||||
|
||||
this.popupView = createWidget({ |
||||
...el, |
||||
value, |
||||
}, this); |
||||
|
||||
this.popupView.on(Controller.EVENT_CHANGE, function () { |
||||
self.fireEvent(Controller.EVENT_CHANGE, arguments); |
||||
}); |
||||
|
||||
if (showLine) { |
||||
this.popupView.element.css("margin-left", pixFormat(-offset * (layer + 1))); |
||||
this.element.css("margin-left", pixFormat(offset * (layer + 1))); |
||||
} |
||||
}); |
||||
|
||||
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 * 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; |
||||
}, |
||||
|
||||
// 获取对比颜色
|
||||
getContrastColor(color) { |
||||
if (!color || !this.isColor(color)) { |
||||
return ""; |
||||
} |
||||
if (this.isDarkColor(color)) { |
||||
return "#FFFFFF"; |
||||
} |
||||
|
||||
return "#3D4D66"; |
||||
}, |
||||
|
||||
rgb2hex(rgbColour) { |
||||
if (!rgbColour || rgbColour.substr(0, 3) !== "rgb") { |
||||
return ""; |
||||
} |
||||
const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
||||
const red = parseInt(rgbValues[0]); |
||||
const green = parseInt(rgbValues[1]); |
||||
const blue = parseInt(rgbValues[2]); |
||||
|
||||
const hexColour = `#${this.int2hex(red)}${this.int2hex(green)}${this.int2hex(blue)}`; |
||||
|
||||
return hexColour; |
||||
}, |
||||
|
||||
_hue2rgb(m1, m2, h) { |
||||
h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); |
||||
if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; |
||||
if (h * 2 < 1) return m2; |
||||
if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; |
||||
|
||||
return m1; |
||||
}, |
||||
|
||||
hsl2rgb(hsl) { |
||||
const h = hsl[0], s = hsl[1], l = hsl[2]; |
||||
const m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s; |
||||
const m1 = l * 2 - m2; |
||||
|
||||
return [this._hue2rgb(m1, m2, h + 0.33333), |
||||
this._hue2rgb(m1, m2, h), |
||||
this._hue2rgb(m1, m2, h - 0.33333)]; |
||||
}, |
||||
|
||||
rgb2hsl(rgb) { |
||||
let h, s; |
||||
const r = rgb[0], g = rgb[1], b = rgb[2]; |
||||
const min = Math.min(r, Math.min(g, b)); |
||||
const max = Math.max(r, Math.max(g, b)); |
||||
const delta = max - min; |
||||
const l = (min + max) / 2; |
||||
s = 0; |
||||
if (l > 0 && l < 1) { |
||||
s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); |
||||
} |
||||
h = 0; |
||||
if (delta > 0) { |
||||
if (max === r && max !== g) h += (g - b) / delta; |
||||
if (max === g && max !== b) h += (2 + (b - r) / delta); |
||||
if (max === b && max !== r) h += (4 + (r - g) / delta); |
||||
h /= 6; |
||||
} |
||||
|
||||
return [h, s, l]; |
||||
}, |
||||
|
||||
rgb2json(rgbColour) { |
||||
if (!rgbColour) { |
||||
return {}; |
||||
} |
||||
if (!this.isRGBColor(rgbColour)) { |
||||
return {}; |
||||
} |
||||
const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
||||
|
||||
return { |
||||
r: parseInt(rgbValues[0]), |
||||
g: parseInt(rgbValues[1]), |
||||
b: parseInt(rgbValues[2]), |
||||
}; |
||||
}, |
||||
|
||||
rgba2json(rgbColour) { |
||||
if (!rgbColour) { |
||||
return {}; |
||||
} |
||||
const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
||||
|
||||
return { |
||||
r: parseInt(rgbValues[0]), |
||||
g: parseInt(rgbValues[1]), |
||||
b: parseInt(rgbValues[2]), |
||||
a: parseFloat(rgbValues[3]), |
||||
}; |
||||
}, |
||||
|
||||
json2rgb(rgb) { |
||||
if (!isKey(rgb.r) || !isKey(rgb.g) || !isKey(rgb.b)) { |
||||
return ""; |
||||
} |
||||
|
||||
return `rgb(${rgb.r},${rgb.g},${rgb.b})`; |
||||
}, |
||||
|
||||
json2rgba(rgba) { |
||||
if (!isKey(rgba.r) || !isKey(rgba.g) || !isKey(rgba.b)) { |
||||
return ""; |
||||
} |
||||
|
||||
return `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`; |
||||
}, |
||||
|
||||
int2hex(strNum) { |
||||
const hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; |
||||
|
||||
return `${hexdig[strNum >>> 4]}${hexdig[strNum & 15]}`; |
||||
}, |
||||
|
||||
hex2rgb(color) { |
||||
if (!color) { |
||||
return ""; |
||||
} |
||||
if (!this.isHexColor(color)) { |
||||
return color; |
||||
} |
||||
let tempValue = "rgb(", colorArray; |
||||
|
||||
if (color.length === 7) { |
||||
colorArray = [parseInt(`0x${color.substring(1, 3)}`), |
||||
parseInt(`0x${color.substring(3, 5)}`), |
||||
parseInt(`0x${color.substring(5, 7)}`)]; |
||||
} else if (color.length === 4) { |
||||
colorArray = [parseInt(`0x${color.substring(1, 2)}`), |
||||
parseInt(`0x${color.substring(2, 3)}`), |
||||
parseInt(`0x${color.substring(3, 4)}`)]; |
||||
} |
||||
tempValue += `${colorArray[0]},`; |
||||
tempValue += `${colorArray[1]},`; |
||||
tempValue += `${colorArray[2]})`; |
||||
|
||||
return tempValue; |
||||
}, |
||||
|
||||
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)})`;
|
||||
}, |
||||
|
||||
...DOMUtils, |
||||
}; |
||||
} |
||||
|
||||
return color[0] === "#" && color.length === 7; |
||||
} |
||||
|
||||
export function isDarkColor(hex) { |
||||
if (!hex || !isHexColor(hex)) { |
||||
return false; |
||||
} |
||||
const rgb = rgb2json(hex2rgb(hex)); |
||||
const grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114); |
||||
if (grayLevel < 192/** 网上给的是140**/) { |
||||
return true; |
||||
} |
||||
|
||||
return false; |
||||
} |
||||
|
||||
// 获取对比颜色
|
||||
export function getContrastColor(color) { |
||||
if (!color || !isColor(color)) { |
||||
return ""; |
||||
} |
||||
if (isDarkColor(color)) { |
||||
return "#FFFFFF"; |
||||
} |
||||
|
||||
return "#3D4D66"; |
||||
} |
||||
|
||||
export function rgb2hex(rgbColour) { |
||||
if (!rgbColour || rgbColour.substr(0, 3) !== "rgb") { |
||||
return ""; |
||||
} |
||||
const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
||||
const red = parseInt(rgbValues[0]); |
||||
const green = parseInt(rgbValues[1]); |
||||
const blue = parseInt(rgbValues[2]); |
||||
|
||||
const hexColour = `#${int2hex(red)}${int2hex(green)}${int2hex(blue)}`; |
||||
|
||||
return hexColour; |
||||
} |
||||
|
||||
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; |
||||
if (h * 2 < 1) return m2; |
||||
if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; |
||||
|
||||
return m1; |
||||
} |
||||
|
||||
export function hsl2rgb(hsl) { |
||||
const h = hsl[0], s = hsl[1], l = hsl[2]; |
||||
const m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s; |
||||
const m1 = l * 2 - m2; |
||||
|
||||
return [ |
||||
_hue2rgb(m1, m2, h + 0.33333), |
||||
_hue2rgb(m1, m2, h), |
||||
_hue2rgb(m1, m2, h - 0.33333) |
||||
]; |
||||
} |
||||
|
||||
export function rgb2hsl(rgb) { |
||||
let h, s; |
||||
const r = rgb[0], g = rgb[1], b = rgb[2]; |
||||
const min = Math.min(r, Math.min(g, b)); |
||||
const max = Math.max(r, Math.max(g, b)); |
||||
const delta = max - min; |
||||
const l = (min + max) / 2; |
||||
s = 0; |
||||
if (l > 0 && l < 1) { |
||||
s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); |
||||
} |
||||
h = 0; |
||||
if (delta > 0) { |
||||
if (max === r && max !== g) h += (g - b) / delta; |
||||
if (max === g && max !== b) h += (2 + (b - r) / delta); |
||||
if (max === b && max !== r) h += (4 + (r - g) / delta); |
||||
h /= 6; |
||||
} |
||||
|
||||
return [h, s, l]; |
||||
} |
||||
|
||||
export function rgb2json(rgbColour) { |
||||
if (!rgbColour) { |
||||
return {}; |
||||
} |
||||
if (!isRGBColor(rgbColour)) { |
||||
return {}; |
||||
} |
||||
const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
||||
|
||||
return { |
||||
r: parseInt(rgbValues[0]), |
||||
g: parseInt(rgbValues[1]), |
||||
b: parseInt(rgbValues[2]), |
||||
}; |
||||
} |
||||
|
||||
export function rgba2json(rgbColour) { |
||||
if (!rgbColour) { |
||||
return {}; |
||||
} |
||||
const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
||||
|
||||
return { |
||||
r: parseInt(rgbValues[0]), |
||||
g: parseInt(rgbValues[1]), |
||||
b: parseInt(rgbValues[2]), |
||||
a: parseFloat(rgbValues[3]), |
||||
}; |
||||
} |
||||
|
||||
export function json2rgb(rgb) { |
||||
if (!isKey(rgb.r) || !isKey(rgb.g) || !isKey(rgb.b)) { |
||||
return ""; |
||||
} |
||||
|
||||
return `rgb(${rgb.r},${rgb.g},${rgb.b})`; |
||||
} |
||||
|
||||
export function json2rgba(rgba) { |
||||
if (!isKey(rgba.r) || !isKey(rgba.g) || !isKey(rgba.b)) { |
||||
return ""; |
||||
} |
||||
|
||||
return `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`; |
||||
} |
||||
|
||||
export function int2hex(strNum) { |
||||
const hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; |
||||
|
||||
return `${hexdig[strNum >>> 4]}${hexdig[strNum & 15]}`; |
||||
} |
||||
|
||||
export function hex2rgb(color) { |
||||
if (!color) { |
||||
return ""; |
||||
} |
||||
if (!isHexColor(color)) { |
||||
return color; |
||||
} |
||||
let tempValue = "rgb(", colorArray; |
||||
|
||||
if (color.length === 7) { |
||||
colorArray = [ |
||||
parseInt(`0x${color.substring(1, 3)}`), |
||||
parseInt(`0x${color.substring(3, 5)}`), |
||||
parseInt(`0x${color.substring(5, 7)}`) |
||||
]; |
||||
} else if (color.length === 4) { |
||||
colorArray = [ |
||||
parseInt(`0x${color.substring(1, 2)}`), |
||||
parseInt(`0x${color.substring(2, 3)}`), |
||||
parseInt(`0x${color.substring(3, 4)}`) |
||||
]; |
||||
} |
||||
tempValue += `${colorArray[0]},`; |
||||
tempValue += `${colorArray[1]},`; |
||||
tempValue += `${colorArray[2]})`; |
||||
|
||||
return tempValue; |
||||
} |
||||
|
||||
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 "./i18n"; |
||||
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