|
|
@ -1,17 +1,4 @@ |
|
|
|
import { |
|
|
|
import { isNull, isFunction, each, stripEL, keys, isArray, contains, isKey, isOdd, isWidget, isNotNull, has } from "../2.base"; |
|
|
|
isNull, |
|
|
|
|
|
|
|
isFunction, |
|
|
|
|
|
|
|
each, |
|
|
|
|
|
|
|
stripEL, |
|
|
|
|
|
|
|
keys, |
|
|
|
|
|
|
|
isArray, |
|
|
|
|
|
|
|
contains, |
|
|
|
|
|
|
|
isKey, |
|
|
|
|
|
|
|
isOdd, |
|
|
|
|
|
|
|
isWidget, |
|
|
|
|
|
|
|
isNotNull, |
|
|
|
|
|
|
|
has |
|
|
|
|
|
|
|
} from "../2.base"; |
|
|
|
|
|
|
|
import { Widget } from "../4.widget"; |
|
|
|
import { Widget } from "../4.widget"; |
|
|
|
import { _lazyCreateWidget, Providers } from "../5.inject"; |
|
|
|
import { _lazyCreateWidget, Providers } from "../5.inject"; |
|
|
|
import { shortcut } from "../decorator"; |
|
|
|
import { shortcut } from "../decorator"; |
|
|
@ -78,31 +65,31 @@ export class Layout extends Widget { |
|
|
|
|
|
|
|
|
|
|
|
_init4Scroll() { |
|
|
|
_init4Scroll() { |
|
|
|
switch (this.options.scrollable) { |
|
|
|
switch (this.options.scrollable) { |
|
|
|
case true: |
|
|
|
case true: |
|
|
|
case "xy": |
|
|
|
case "xy": |
|
|
|
this.element.css("overflow", "auto"); |
|
|
|
this.element.css("overflow", "auto"); |
|
|
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
case false: |
|
|
|
|
|
|
|
this.element.css("overflow", "hidden"); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
case "x": |
|
|
|
|
|
|
|
this.element.css({ |
|
|
|
|
|
|
|
"overflow-x": "auto", |
|
|
|
|
|
|
|
"overflow-y": "hidden", |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return; |
|
|
|
return; |
|
|
|
case "y": |
|
|
|
case false: |
|
|
|
this.element.css({ |
|
|
|
this.element.css("overflow", "hidden"); |
|
|
|
"overflow-x": "hidden", |
|
|
|
|
|
|
|
"overflow-y": "auto", |
|
|
|
return; |
|
|
|
}); |
|
|
|
case "x": |
|
|
|
|
|
|
|
this.element.css({ |
|
|
|
|
|
|
|
"overflow-x": "auto", |
|
|
|
|
|
|
|
"overflow-y": "hidden", |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
return; |
|
|
|
return; |
|
|
|
default : |
|
|
|
case "y": |
|
|
|
break; |
|
|
|
this.element.css({ |
|
|
|
|
|
|
|
"overflow-x": "hidden", |
|
|
|
|
|
|
|
"overflow-y": "auto", |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
default : |
|
|
|
|
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
if (this.options.scrollx) { |
|
|
|
if (this.options.scrollx) { |
|
|
|
this.element.css({ |
|
|
|
this.element.css({ |
|
|
@ -203,19 +190,19 @@ export class Layout extends Widget { |
|
|
|
} |
|
|
|
} |
|
|
|
const className = Object.prototype.toString.call(a); |
|
|
|
const className = Object.prototype.toString.call(a); |
|
|
|
switch (className) { |
|
|
|
switch (className) { |
|
|
|
case "[object RegExp]": |
|
|
|
case "[object RegExp]": |
|
|
|
case "[object String]": |
|
|
|
case "[object String]": |
|
|
|
return `${a}` === `${b}`; |
|
|
|
return `${a}` === `${b}`; |
|
|
|
case "[object Number]": |
|
|
|
case "[object Number]": |
|
|
|
if (+a !== +a) { |
|
|
|
if (+a !== +a) { |
|
|
|
return +b !== +b; |
|
|
|
return +b !== +b; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return +a === 0 ? 1 / +a === 1 / b : +a === +b; |
|
|
|
return +a === 0 ? 1 / +a === 1 / b : +a === +b; |
|
|
|
case "[object Date]": |
|
|
|
case "[object Date]": |
|
|
|
case "[object Boolean]": |
|
|
|
case "[object Boolean]": |
|
|
|
return +a === +b; |
|
|
|
return +a === +b; |
|
|
|
default: |
|
|
|
default: |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const areArrays = className === "[object Array]"; |
|
|
|
const areArrays = className === "[object Array]"; |
|
|
@ -277,9 +264,9 @@ export class Layout extends Widget { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 不依赖于this.options.items进行更新
|
|
|
|
// 不依赖于this.options.items进行更新
|
|
|
|
_updateItemAt(oldIndex, newIndex, item, context) { |
|
|
|
_updateItemAt(oldIndex, newIndex, item) { |
|
|
|
const del = this._children[this._getChildName(oldIndex)]; |
|
|
|
const del = this._children[this._getChildName(oldIndex)]; |
|
|
|
const w = this._newElement(newIndex, item, context); |
|
|
|
const w = this._newElement(newIndex, item); |
|
|
|
// 需要有个地方临时存一下新建的组件,否则如果直接使用newIndex的话,newIndex位置的元素可能会被用到
|
|
|
|
// 需要有个地方临时存一下新建的组件,否则如果直接使用newIndex的话,newIndex位置的元素可能会被用到
|
|
|
|
this._children[`${this._getChildName(newIndex)}-temp`] = w; |
|
|
|
this._children[`${this._getChildName(newIndex)}-temp`] = w; |
|
|
|
const nextSibling = del.element.next(); |
|
|
|
const nextSibling = del.element.next(); |
|
|
@ -330,7 +317,6 @@ export class Layout extends Widget { |
|
|
|
|
|
|
|
|
|
|
|
return (item._lgap || 0) + (item.lgap || 0); |
|
|
|
return (item._lgap || 0) + (item.lgap || 0); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_optimiseItemRgap(item) { |
|
|
|
_optimiseItemRgap(item) { |
|
|
|
if (Providers.getProvider(SystemProvider.xtype).getLayoutOptimize()) { |
|
|
|
if (Providers.getProvider(SystemProvider.xtype).getLayoutOptimize()) { |
|
|
|
return ((!item.type && item.el) ? ((item._rgap || 0) + (item.rgap || 0)) : item._rgap) || 0; |
|
|
|
return ((!item.type && item.el) ? ((item._rgap || 0) + (item.rgap || 0)) : item._rgap) || 0; |
|
|
@ -338,7 +324,6 @@ export class Layout extends Widget { |
|
|
|
|
|
|
|
|
|
|
|
return (item._rgap || 0) + (item.rgap || 0); |
|
|
|
return (item._rgap || 0) + (item.rgap || 0); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_optimiseItemTgap(item) { |
|
|
|
_optimiseItemTgap(item) { |
|
|
|
if (Providers.getProvider(SystemProvider.xtype).getLayoutOptimize()) { |
|
|
|
if (Providers.getProvider(SystemProvider.xtype).getLayoutOptimize()) { |
|
|
|
return ((!item.type && item.el) ? ((item._tgap || 0) + (item.tgap || 0)) : item._tgap) || 0; |
|
|
|
return ((!item.type && item.el) ? ((item._tgap || 0) + (item.tgap || 0)) : item._tgap) || 0; |
|
|
@ -346,7 +331,6 @@ export class Layout extends Widget { |
|
|
|
|
|
|
|
|
|
|
|
return (item._tgap || 0) + (item.tgap || 0); |
|
|
|
return (item._tgap || 0) + (item.tgap || 0); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_optimiseItemBgap(item) { |
|
|
|
_optimiseItemBgap(item) { |
|
|
|
if (Providers.getProvider(SystemProvider.xtype).getLayoutOptimize()) { |
|
|
|
if (Providers.getProvider(SystemProvider.xtype).getLayoutOptimize()) { |
|
|
|
return ((!item.type && item.el) ? ((item._bgap || 0) + (item.bgap || 0)) : item._bgap) || 0; |
|
|
|
return ((!item.type && item.el) ? ((item._bgap || 0) + (item.bgap || 0)) : item._bgap) || 0; |
|
|
@ -354,7 +338,6 @@ export class Layout extends Widget { |
|
|
|
|
|
|
|
|
|
|
|
return (item._bgap || 0) + (item.bgap || 0); |
|
|
|
return (item._bgap || 0) + (item.bgap || 0); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_optimiseItemHgap(item) { |
|
|
|
_optimiseItemHgap(item) { |
|
|
|
if (Providers.getProvider(SystemProvider.xtype).getLayoutOptimize()) { |
|
|
|
if (Providers.getProvider(SystemProvider.xtype).getLayoutOptimize()) { |
|
|
|
return ((!item.type && item.el) ? ((item._hgap || 0) + (item.hgap || 0)) : item._hgap) || 0; |
|
|
|
return ((!item.type && item.el) ? ((item._hgap || 0) + (item.hgap || 0)) : item._hgap) || 0; |
|
|
@ -362,7 +345,6 @@ export class Layout extends Widget { |
|
|
|
|
|
|
|
|
|
|
|
return (item._hgap || 0) + (item.hgap || 0); |
|
|
|
return (item._hgap || 0) + (item.hgap || 0); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_optimiseItemVgap(item) { |
|
|
|
_optimiseItemVgap(item) { |
|
|
|
if (Providers.getProvider(SystemProvider.xtype).getLayoutOptimize()) { |
|
|
|
if (Providers.getProvider(SystemProvider.xtype).getLayoutOptimize()) { |
|
|
|
return ((!item.type && item.el) ? ((item._vgap || 0) + (item.vgap || 0)) : item._vgap) || 0; |
|
|
|
return ((!item.type && item.el) ? ((item._vgap || 0) + (item.vgap || 0)) : item._vgap) || 0; |
|
|
@ -570,7 +552,7 @@ export class Layout extends Widget { |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
patchItem(oldVnode, vnode, oldIndex, newIndex, context) { |
|
|
|
patchItem(oldVnode, vnode, oldIndex, newIndex) { |
|
|
|
const shouldUpdate = this.shouldUpdateItem(oldIndex, vnode); |
|
|
|
const shouldUpdate = this.shouldUpdateItem(oldIndex, vnode); |
|
|
|
const child = this._children[this._getChildName(oldIndex)]; |
|
|
|
const child = this._children[this._getChildName(oldIndex)]; |
|
|
|
if (shouldUpdate) { |
|
|
|
if (shouldUpdate) { |
|
|
@ -582,7 +564,7 @@ export class Layout extends Widget { |
|
|
|
// if (child.update) {
|
|
|
|
// if (child.update) {
|
|
|
|
// return child.update(this._getOptions(vnode));
|
|
|
|
// return child.update(this._getOptions(vnode));
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
return this._updateItemAt(oldIndex, newIndex, vnode, context); |
|
|
|
return this._updateItemAt(oldIndex, newIndex, vnode); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -683,26 +665,26 @@ export class Layout extends Widget { |
|
|
|
} else if (isNull(oldEndVnode)) { |
|
|
|
} else if (isNull(oldEndVnode)) { |
|
|
|
oldEndVnode = oldCh[--oldEndIdx]; |
|
|
|
oldEndVnode = oldCh[--oldEndIdx]; |
|
|
|
} else if (sameVnode(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx)) { |
|
|
|
} else if (sameVnode(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx)) { |
|
|
|
const willUpdate = this.patchItem(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx, context); |
|
|
|
const willUpdate = this.patchItem(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx); |
|
|
|
updated = willUpdate || updated; |
|
|
|
updated = willUpdate || updated; |
|
|
|
children[isNull(oldStartVnode.key) ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(oldStartIdx)]; |
|
|
|
children[isNull(oldStartVnode.key) ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(oldStartIdx)]; |
|
|
|
oldStartVnode = oldCh[++oldStartIdx]; |
|
|
|
oldStartVnode = oldCh[++oldStartIdx]; |
|
|
|
newStartVnode = newCh[++newStartIdx]; |
|
|
|
newStartVnode = newCh[++newStartIdx]; |
|
|
|
} else if (sameVnode(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx)) { |
|
|
|
} else if (sameVnode(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx)) { |
|
|
|
const willUpdate = this.patchItem(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx, context); |
|
|
|
const willUpdate = this.patchItem(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx); |
|
|
|
updated = willUpdate || updated; |
|
|
|
updated = willUpdate || updated; |
|
|
|
children[isNull(oldEndVnode.key) ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[`${this._getChildName(newEndIdx)}-temp`] : this._children[this._getChildName(oldEndIdx)]; |
|
|
|
children[isNull(oldEndVnode.key) ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[`${this._getChildName(newEndIdx)}-temp`] : this._children[this._getChildName(oldEndIdx)]; |
|
|
|
oldEndVnode = oldCh[--oldEndIdx]; |
|
|
|
oldEndVnode = oldCh[--oldEndIdx]; |
|
|
|
newEndVnode = newCh[--newEndIdx]; |
|
|
|
newEndVnode = newCh[--newEndIdx]; |
|
|
|
} else if (sameVnode(oldStartVnode, newEndVnode)) { |
|
|
|
} else if (sameVnode(oldStartVnode, newEndVnode)) { |
|
|
|
const willUpdate = this.patchItem(oldStartVnode, newEndVnode, oldStartIdx, newStartIdx, context); |
|
|
|
const willUpdate = this.patchItem(oldStartVnode, newEndVnode, oldStartIdx, newStartIdx); |
|
|
|
updated = willUpdate || updated; |
|
|
|
updated = willUpdate || updated; |
|
|
|
children[isNull(oldStartVnode.key) ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(oldStartIdx)]; |
|
|
|
children[isNull(oldStartVnode.key) ? oldStartIdx : oldStartVnode.key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(oldStartIdx)]; |
|
|
|
insertBefore(oldStartVnode, oldEndVnode, true); |
|
|
|
insertBefore(oldStartVnode, oldEndVnode, true); |
|
|
|
oldStartVnode = oldCh[++oldStartIdx]; |
|
|
|
oldStartVnode = oldCh[++oldStartIdx]; |
|
|
|
newEndVnode = newCh[--newEndIdx]; |
|
|
|
newEndVnode = newCh[--newEndIdx]; |
|
|
|
} else if (sameVnode(oldEndVnode, newStartVnode)) { |
|
|
|
} else if (sameVnode(oldEndVnode, newStartVnode)) { |
|
|
|
const willUpdate = this.patchItem(oldEndVnode, newStartVnode, oldEndIdx, newEndIdx, context); |
|
|
|
const willUpdate = this.patchItem(oldEndVnode, newStartVnode, oldEndIdx, newEndIdx); |
|
|
|
updated = willUpdate || updated; |
|
|
|
updated = willUpdate || updated; |
|
|
|
children[isNull(oldEndVnode) ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[`${this._getChildName(newEndIdx)}-temp`] : this._children[this._getChildName(oldEndIdx)]; |
|
|
|
children[isNull(oldEndVnode) ? oldEndIdx : oldEndVnode.key] = willUpdate ? this._children[`${this._getChildName(newEndIdx)}-temp`] : this._children[this._getChildName(oldEndIdx)]; |
|
|
|
insertBefore(oldEndVnode, oldStartVnode); |
|
|
|
insertBefore(oldEndVnode, oldStartVnode); |
|
|
@ -715,7 +697,7 @@ export class Layout extends Widget { |
|
|
|
insertBefore(node, oldStartVnode); |
|
|
|
insertBefore(node, oldStartVnode); |
|
|
|
} else { // 如果新节点在旧节点区间中存在就复用一下
|
|
|
|
} else { // 如果新节点在旧节点区间中存在就复用一下
|
|
|
|
const sameOldIndex = sameOldVnode[1]; |
|
|
|
const sameOldIndex = sameOldVnode[1]; |
|
|
|
const willUpdate = this.patchItem(sameOldVnode[0], newStartVnode, sameOldIndex, newStartIdx, context); |
|
|
|
const willUpdate = this.patchItem(sameOldVnode[0], newStartVnode, sameOldIndex, newStartIdx); |
|
|
|
updated = willUpdate || updated; |
|
|
|
updated = willUpdate || updated; |
|
|
|
children[isNull(sameOldVnode[0].key) ? newStartIdx : sameOldVnode[0].key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(sameOldIndex)]; |
|
|
|
children[isNull(sameOldVnode[0].key) ? newStartIdx : sameOldVnode[0].key] = willUpdate ? this._children[`${this._getChildName(newStartIdx)}-temp`] : this._children[this._getChildName(sameOldIndex)]; |
|
|
|
oldCh[sameOldIndex] = undefined; |
|
|
|
oldCh[sameOldIndex] = undefined; |
|
|
|