iapyang
2 years ago
26 changed files with 525 additions and 32 deletions
@ -0,0 +1,74 @@ |
|||||||
|
import { registFunction } from './plugins'; |
||||||
|
|
||||||
|
export function Element(widget, attribs) { |
||||||
|
this.l = this.r = this.t = this.b = 0; // 边框
|
||||||
|
this.marginLeft = this.marginRight = this.marginTop = this.marginBottom = 0; //间距
|
||||||
|
this.position = {}; |
||||||
|
this.classMap = {}; |
||||||
|
this.classList = []; |
||||||
|
this.children = []; |
||||||
|
this.attribs = attribs || {}; |
||||||
|
this.styles = {}; |
||||||
|
// 兼容处理
|
||||||
|
this['0'] = this; |
||||||
|
this.style = {}; |
||||||
|
if (!widget) { |
||||||
|
this.nodeName = 'body'; |
||||||
|
this.position.x = 0; |
||||||
|
this.position.y = 0; |
||||||
|
this.attribs.id = 'body'; |
||||||
|
} else if (BI.isWidget(widget)) { |
||||||
|
this.widget = widget; |
||||||
|
this.nodeName = widget.options.tagName; |
||||||
|
this.textBaseLine = widget.options.textBaseLine; |
||||||
|
} else if (BI.isString(widget)) { |
||||||
|
this.nodeName = widget; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
initElement(Element); |
||||||
|
registFunction(Element); |
||||||
|
|
||||||
|
function initElement(element) { |
||||||
|
element.prototype = { |
||||||
|
appendChild(child) { |
||||||
|
child.parent = this; |
||||||
|
if (this.children.push(child) !== 1) { |
||||||
|
var sibling = this.children[this.children.length - 2]; |
||||||
|
sibling.next = child; |
||||||
|
child.prev = sibling; |
||||||
|
child.next = null; |
||||||
|
} |
||||||
|
}, |
||||||
|
append(child) { |
||||||
|
child.parent = this; |
||||||
|
if (this.children.push(child) !== 1) { |
||||||
|
var sibling = this.children[this.children.length - 2]; |
||||||
|
sibling.next = child; |
||||||
|
child.prev = sibling; |
||||||
|
child.next = null; |
||||||
|
} |
||||||
|
}, |
||||||
|
getParent() { |
||||||
|
return this.parent; |
||||||
|
}, |
||||||
|
getSiblings() { |
||||||
|
var parent = this.getParent(); |
||||||
|
return parent ? parent.getChildren() : [this]; |
||||||
|
}, |
||||||
|
getChildren() { |
||||||
|
return this.children; |
||||||
|
}, |
||||||
|
|
||||||
|
getBounds() { |
||||||
|
return {}; |
||||||
|
}, |
||||||
|
|
||||||
|
width() { |
||||||
|
|
||||||
|
}, |
||||||
|
height() { |
||||||
|
|
||||||
|
} |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
import { Element } from './element'; |
||||||
|
|
||||||
|
BI.Element = Element; |
||||||
|
BI.Element.renderEngine = { |
||||||
|
createElement: (widget) => { |
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
if (BI.isWidget(widget)) { |
||||||
|
var o = widget.options; |
||||||
|
if (o.element instanceof Element) { |
||||||
|
return o.element; |
||||||
|
} |
||||||
|
if (typeof o.element === 'string' && o.element !== 'body') { |
||||||
|
o.root = false; |
||||||
|
return new Element(widget); |
||||||
|
} |
||||||
|
|
||||||
|
if (o.root === true) { |
||||||
|
return new Element(); |
||||||
|
} |
||||||
|
} |
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
if (BI.isString(widget)) { |
||||||
|
return new Element(widget); |
||||||
|
} |
||||||
|
return new Element(widget); |
||||||
|
}, |
||||||
|
|
||||||
|
createFragment() { |
||||||
|
return new Element(); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
export const registAttrFun = (Element) => { |
||||||
|
Element.registerFunction('attr', function (key, value) { |
||||||
|
var self = this; |
||||||
|
if (BI.isObject(key)) { |
||||||
|
BI.each(key, (k, v) => { |
||||||
|
self.attr(k, v); |
||||||
|
}); |
||||||
|
return this; |
||||||
|
} |
||||||
|
if (BI.isNull(value)) { |
||||||
|
return this.attribs[key]; |
||||||
|
} |
||||||
|
this.attribs[key] = value; |
||||||
|
return this; |
||||||
|
}); |
||||||
|
Element.registerFunction('hasAttrib', function (key) { |
||||||
|
return this.attribs[key] != null; |
||||||
|
}); |
||||||
|
Element.registerFunction('removeAttr', function (key) { |
||||||
|
delete this.attribs[key]; |
||||||
|
}); |
||||||
|
}; |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
export const registClassFun = (Element) => { |
||||||
|
Element.registerFunction('addClass', function (classList) { |
||||||
|
var self = this; |
||||||
|
BI.each(classList.split(' '), (i, cls) => { |
||||||
|
if (cls && !self.classMap[cls]) { |
||||||
|
self.classList.push(cls); |
||||||
|
} |
||||||
|
cls && (self.classMap[cls] = true); |
||||||
|
}); |
||||||
|
return this; |
||||||
|
}); |
||||||
|
|
||||||
|
Element.registerFunction('removeClass', function (classList) { |
||||||
|
var self = this; |
||||||
|
BI.each(classList.split(' '), (i, cls) => { |
||||||
|
if (cls && self.classMap[cls]) { |
||||||
|
delete self.classMap[cls]; |
||||||
|
self.classList.splice(self.classList.indexOf(cls), 1); |
||||||
|
} |
||||||
|
}); |
||||||
|
return this; |
||||||
|
}); |
||||||
|
}; |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
export const registCssFun = (Element) => { |
||||||
|
Element.registerFunction('css', function (key, value) { |
||||||
|
var self = this; |
||||||
|
if (BI.isObject(key)) { |
||||||
|
BI.each(key, (k, v) => { |
||||||
|
self.css(k, v); |
||||||
|
}); |
||||||
|
return this; |
||||||
|
} |
||||||
|
key = BI.trim(BI.camelize(key)); |
||||||
|
return css(this, key, value); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const css = (elem, key, value) => { |
||||||
|
key = BI.trim(BI.camelize(key)); |
||||||
|
if (BI.isNull(value)) { |
||||||
|
return elem.styles[key]; |
||||||
|
} |
||||||
|
elem.styles[key] = value; |
||||||
|
return elem; |
||||||
|
}; |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
export const registDataFun = (Element) => { |
||||||
|
Element.registerFunction('data', function (key, value) { |
||||||
|
if (!this._data) { |
||||||
|
this._data = {}; |
||||||
|
} |
||||||
|
if (BI.isNull(value)) { |
||||||
|
return this._data[key]; |
||||||
|
} |
||||||
|
this._data[key] = value; |
||||||
|
return this; |
||||||
|
}); |
||||||
|
}; |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
export const registEmptyFun = (Element) => { |
||||||
|
Element.registerFunction('empty', function (text) { |
||||||
|
this.children = []; |
||||||
|
return this; |
||||||
|
}); |
||||||
|
Element.registerFunction('destroy', function (text) { |
||||||
|
return this; |
||||||
|
}); |
||||||
|
}; |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
var returnThis = function () { |
||||||
|
return this; |
||||||
|
}; |
||||||
|
export const registEventFun = (Element) => { |
||||||
|
[ |
||||||
|
'mousedown', |
||||||
|
'mouseup', |
||||||
|
'mousewheel', |
||||||
|
'keydown', |
||||||
|
'keyup', |
||||||
|
'focus', |
||||||
|
'focusin', |
||||||
|
'focusout', |
||||||
|
'click', |
||||||
|
'on', |
||||||
|
'off', |
||||||
|
'bind', |
||||||
|
'unbind', |
||||||
|
'trigger', |
||||||
|
'hover', |
||||||
|
'scroll', |
||||||
|
'scrollLeft', |
||||||
|
'scrollTop', |
||||||
|
'resize', |
||||||
|
'show', |
||||||
|
'hide', |
||||||
|
'dblclick', |
||||||
|
'blur', |
||||||
|
].forEach((event) => { |
||||||
|
Element.registerFunction(event, returnThis); |
||||||
|
}); |
||||||
|
}; |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
export const registHtmlFun = (Element) => { |
||||||
|
Element.registerFunction('html', function (text) { |
||||||
|
if (text && text.charAt(0) === '<') { |
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.html', |
||||||
|
element: this.widget, |
||||||
|
html: text, |
||||||
|
}); |
||||||
|
this.originalHtml = text; |
||||||
|
} else { |
||||||
|
this.text = BI.htmlDecode(text); |
||||||
|
} |
||||||
|
return this; |
||||||
|
}); |
||||||
|
}; |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
import { registAttrFun } from './attr'; |
||||||
|
import { registClassFun } from './class'; |
||||||
|
import { registCssFun } from './css'; |
||||||
|
import { registDataFun } from './data'; |
||||||
|
import { registEmptyFun } from './empty'; |
||||||
|
import { registEventFun } from './event'; |
||||||
|
import { registHtmlFun } from './html'; |
||||||
|
import { registKeywordMarkFun } from './keywordMark'; |
||||||
|
import { registRenderToHtmlFun } from './renderToHtml'; |
||||||
|
import { registRenderToStringFun } from './renderToString'; |
||||||
|
import { registTextFun } from './text'; |
||||||
|
import { registValFun } from './val'; |
||||||
|
|
||||||
|
export const registFunction = (Element) => { |
||||||
|
var functionMap = {}; |
||||||
|
Element.registerFunction = (key, fn) => { |
||||||
|
Element.prototype[key] = functionMap[key] = fn; |
||||||
|
}; |
||||||
|
registAttrFun(Element); |
||||||
|
registClassFun(Element); |
||||||
|
registCssFun(Element); |
||||||
|
registDataFun(Element); |
||||||
|
registEmptyFun(Element); |
||||||
|
registEventFun(Element); |
||||||
|
registHtmlFun(Element); |
||||||
|
registKeywordMarkFun(Element); |
||||||
|
registRenderToStringFun(Element); |
||||||
|
registRenderToHtmlFun(Element); |
||||||
|
registTextFun(Element); |
||||||
|
registValFun(Element); |
||||||
|
}; |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
export const registKeywordMarkFun = (Element) => { |
||||||
|
Element.registerFunction('__textKeywordMarked__', function (text) { |
||||||
|
this[0].textContent = text; |
||||||
|
return this; |
||||||
|
}); |
||||||
|
}; |
||||||
@ -0,0 +1,65 @@ |
|||||||
|
var skipArray = []; |
||||||
|
var pxStyle = ['font-size', 'width', 'height']; |
||||||
|
var _renderToHtml = function (root) { |
||||||
|
var str = ''; |
||||||
|
if (BI.isNull(root.originalHtml)) { |
||||||
|
if (root.tag !== 'body') { |
||||||
|
str += `<${root.tag}`; |
||||||
|
if (root.classList.length > 0) { |
||||||
|
str += ' class="'; |
||||||
|
BI.each(root.classList, (i, cls) => { |
||||||
|
str += ` ${cls}`; |
||||||
|
}); |
||||||
|
str += '"'; |
||||||
|
} |
||||||
|
str += ' style="'; |
||||||
|
BI.each(root.originalStyles, (key, stl) => { |
||||||
|
if ( |
||||||
|
skipArray.contains(key) || |
||||||
|
(key == 'height' && root.classList.contains('bi-design-components-data-data-table-cell')) |
||||||
|
) { |
||||||
|
return; |
||||||
|
} |
||||||
|
key = BI.hyphenate(key); |
||||||
|
if (key === 'font-family') { |
||||||
|
stl = stl.replace(/\"/g, ''); |
||||||
|
} |
||||||
|
if (pxStyle.contains(key) && BI.isNumeric(stl)) { |
||||||
|
stl += 'px'; |
||||||
|
} |
||||||
|
if (BI.isKey(stl)) { |
||||||
|
str += ` ${key}:${stl};`; |
||||||
|
} |
||||||
|
}); |
||||||
|
str += '"'; |
||||||
|
BI.each(root.attribs, (key, attr) => { |
||||||
|
if (BI.isKey(attr)) { |
||||||
|
str += ` ${key}=${attr}`; |
||||||
|
} |
||||||
|
}); |
||||||
|
if (root.textContent) { |
||||||
|
str += ` title=${root.textContent}`; |
||||||
|
} |
||||||
|
str += '>'; |
||||||
|
} |
||||||
|
// 特殊处理，spread_table的行列元素是不取配置里的高度的，使用stretch拉伸的（leaves取了高度），但是功能代码里给单元格默认高度了，导致拉伸不了
|
||||||
|
// 而spread_grid_table的行列元素是取配置里的高度的，拉不拉伸都一样
|
||||||
|
BI.each(root.children, (i, child) => { |
||||||
|
str += _renderToHtml(child); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
str += root.originalHtml; |
||||||
|
} |
||||||
|
if (root.tag !== 'body') { |
||||||
|
if (root.textContent) { |
||||||
|
str += root.textContent; |
||||||
|
} |
||||||
|
str += `</${root.tag}>`; |
||||||
|
} |
||||||
|
return str; |
||||||
|
}; |
||||||
|
export const registRenderToHtmlFun = (Element) => { |
||||||
|
Element.registerFunction('renderToHtml', function () { |
||||||
|
return _renderToHtml(this); |
||||||
|
}); |
||||||
|
}; |
||||||
@ -0,0 +1,50 @@ |
|||||||
|
var skipArray = ['width', 'height']; |
||||||
|
var _renderToString = function (root) { |
||||||
|
var str = ''; |
||||||
|
if (root.nodeName !== 'body') { |
||||||
|
str += `<${root.nodeName}`; |
||||||
|
if (root.classList.length > 0) { |
||||||
|
str += ' class="'; |
||||||
|
BI.each(root.classList, (i, cls) => { |
||||||
|
str += ` ${cls}`; |
||||||
|
}); |
||||||
|
str += '"'; |
||||||
|
} |
||||||
|
str += ' style="'; |
||||||
|
BI.each(root.styles, (key, stl) => { |
||||||
|
if (skipArray.includes(key)) { |
||||||
|
return; |
||||||
|
} |
||||||
|
key = BI.hyphenate(key); |
||||||
|
str += ` ${key}:${stl};`; |
||||||
|
}); |
||||||
|
str += ` width:${root.width}px;`; |
||||||
|
str += ` height:${root.height}px;`; |
||||||
|
str += ' position: fixed;'; |
||||||
|
str += ` left: ${root.position.x}px;`; |
||||||
|
str += ` top: ${root.position.y}px;`; |
||||||
|
str += '"'; |
||||||
|
BI.each(root.attribs, (key, attr) => { |
||||||
|
str += ` ${key}:${attr}`; |
||||||
|
}); |
||||||
|
str += '>'; |
||||||
|
} |
||||||
|
BI.each(root.children, (i, child) => { |
||||||
|
str += _renderToString(child); |
||||||
|
}); |
||||||
|
// if (root.htmlContent) {
|
||||||
|
// str += root.htmlContent;
|
||||||
|
// }
|
||||||
|
if (root.nodeName !== 'body') { |
||||||
|
if (root.text) { |
||||||
|
str += root.text; |
||||||
|
} |
||||||
|
str += `</${root.nodeName}>`; |
||||||
|
} |
||||||
|
return str; |
||||||
|
}; |
||||||
|
export const registRenderToStringFun = (Element) => { |
||||||
|
Element.registerFunction('renderToString', function () { |
||||||
|
return _renderToString(this); |
||||||
|
}); |
||||||
|
}; |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
export const registTextFun = (Element) => { |
||||||
|
Element.registerFunction('setText', function (text) { |
||||||
|
this.text = text; |
||||||
|
return this; |
||||||
|
}); |
||||||
|
Element.registerFunction('setValue', function (text) { |
||||||
|
this.text = text; |
||||||
|
return this; |
||||||
|
}); |
||||||
|
}; |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
export const registValFun = (Element) => { |
||||||
|
Element.registerFunction('val', function (value) { |
||||||
|
if (BI.isNotNull(value)) { |
||||||
|
this.text = `${value}`; |
||||||
|
return this; |
||||||
|
} |
||||||
|
return this.text; |
||||||
|
}); |
||||||
|
}; |
||||||
Loading…
Reference in new issue