f3dd51ab97
The primary goals of this change are: - Better conformance to the W3C flexbox standard (https://www.w3.org/TR/css-flexbox-1/) and a clear articulation of the areas where it deviates from the spec. - Support for flex-shrink. - Conformance with layout effects of "overflow: hidden". Specifically, here are the limitations of this implementation as compared to the W3C flexbox standard (this is also documented in Layout.js): - Display property is always assumed to be 'flex' except for Text nodes, which are assumed to be 'inline-flex'. - The 'zIndex' property (or any form of z ordering) is not supported. Nodes are stacked in document order. - The 'order' property is not supported. The order of flex items is always defined by document order. - The 'visibility' property is always assumed to be 'visible'. Values of 'collapse' and 'hidden' are not supported. - The 'wrap' property supports only 'nowrap' (which is the default) or 'wrap'. The rarely-used 'wrap-reverse' is not supported. - Rather than allowing arbitrary combinations of flexGrow, flexShrink and flexBasis, this algorithm supports only the three most common combinations: - flex: 0 is equiavlent to flex: 0 0 auto - flex: n (where n is a positive value) is equivalent to flex: n 0 0 - flex: -1 (or any negative value) is equivalent to flex: 0 1 auto - Margins cannot be specified as 'auto'. They must be specified in terms of pixel values, and the default value is 0. - The 'baseline' value is not supported for alignItems and alignSelf properties. - Values of width, maxWidth, minWidth, height, maxHeight and minHeight must be specified as pixel values, not as percentages. - There is no support for calculation of dimensions based on intrinsic aspect ratios (e.g. images). - There is no support for forced breaks. - It does not support vertical inline directions (top-to-bottom or bottom-to-top text). And here is how the implementation deviates from the standard (this is also documented in Layout.js): - Section 4.5 of the spec indicates that all flex items have a default minimum main size. For text blocks, for example, this is the width of the widest word. Calculating the minimum width is expensive, so we forego it and assume a default minimum main size of 0. - Min/Max sizes in the main axis are not honored when resolving flexible lengths. - The spec indicates that the default value for 'flexDirection' is 'row', but the algorithm below assumes a default of 'column'.
2 lines
14 KiB
JavaScript
2 lines
14 KiB
JavaScript
!function(a,b){"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.computeLayout=b()}(this,function(){var a=function(){function a(b){if(b.layout&&!b.isDirty||(b.layout={width:void 0,height:void 0,top:0,left:0,right:0,bottom:0}),b.style||(b.style={}),b.children||(b.children=[]),b.style.measure&&b.children&&b.children.length)throw new Error("Using custom measure function is supported only for leaf nodes.");return b.children.forEach(a),b}function b(a){return void 0===a||Number.isNaN(a)}function c(a){return a===ca||a===da}function d(a){return a===ea||a===fa}function e(a){return void 0===a.style.flex?0:a.style.flex}function f(a){return V?!0:e(a)<=0}function g(a){return e(a)>0?e(a):0}function h(a){if(V){if(0!==e(a))return 1}else if(e(a)<0)return 1;return 0}function i(a,b){if(void 0!==a.style.marginStart&&c(b))return a.style.marginStart;var d=null;switch(b){case"row":d=a.style.marginLeft;break;case"row-reverse":d=a.style.marginRight;break;case"column":d=a.style.marginTop;break;case"column-reverse":d=a.style.marginBottom}return void 0!==d?d:void 0!==a.style.margin?a.style.margin:0}function j(a,b){if(void 0!==a.style.marginEnd&&c(b))return a.style.marginEnd;var d=null;switch(b){case"row":d=a.style.marginRight;break;case"row-reverse":d=a.style.marginLeft;break;case"column":d=a.style.marginBottom;break;case"column-reverse":d=a.style.marginTop}return null!=d?d:void 0!==a.style.margin?a.style.margin:0}function k(a,b){if(void 0!==a.style.paddingStart&&a.style.paddingStart>=0&&c(b))return a.style.paddingStart;var d=null;switch(b){case"row":d=a.style.paddingLeft;break;case"row-reverse":d=a.style.paddingRight;break;case"column":d=a.style.paddingTop;break;case"column-reverse":d=a.style.paddingBottom}return null!=d&&d>=0?d:void 0!==a.style.padding&&a.style.padding>=0?a.style.padding:0}function l(a,b){if(void 0!==a.style.paddingEnd&&a.style.paddingEnd>=0&&c(b))return a.style.paddingEnd;var d=null;switch(b){case"row":d=a.style.paddingRight;break;case"row-reverse":d=a.style.paddingLeft;break;case"column":d=a.style.paddingBottom;break;case"column-reverse":d=a.style.paddingTop}return null!=d&&d>=0?d:void 0!==a.style.padding&&a.style.padding>=0?a.style.padding:0}function m(a,b){if(void 0!==a.style.borderStartWidth&&a.style.borderStartWidth>=0&&c(b))return a.style.borderStartWidth;var d=null;switch(b){case"row":d=a.style.borderLeftWidth;break;case"row-reverse":d=a.style.borderRightWidth;break;case"column":d=a.style.borderTopWidth;break;case"column-reverse":d=a.style.borderBottomWidth}return null!=d&&d>=0?d:void 0!==a.style.borderWidth&&a.style.borderWidth>=0?a.style.borderWidth:0}function n(a,b){if(void 0!==a.style.borderEndWidth&&a.style.borderEndWidth>=0&&c(b))return a.style.borderEndWidth;var d=null;switch(b){case"row":d=a.style.borderRightWidth;break;case"row-reverse":d=a.style.borderLeftWidth;break;case"column":d=a.style.borderBottomWidth;break;case"column-reverse":d=a.style.borderTopWidth}return null!=d&&d>=0?d:void 0!==a.style.borderWidth&&a.style.borderWidth>=0?a.style.borderWidth:0}function o(a,b){return k(a,b)+m(a,b)}function p(a,b){return l(a,b)+n(a,b)}function q(a,b){return i(a,b)+j(a,b)}function r(a,b){return o(a,b)+p(a,b)}function s(a){return a.style.justifyContent?a.style.justifyContent:"flex-start"}function t(a){return a.style.alignContent?a.style.alignContent:"flex-start"}function u(a,b){return b.style.alignSelf?b.style.alignSelf:a.style.alignItems?a.style.alignItems:"stretch"}function v(a,b){if(b===ba){if(a===ca)return da;if(a===da)return ca}return a}function w(a,b){var c;return c=a.style.direction?a.style.direction:_,c===_&&(c=void 0===b?aa:b),c}function x(a){return a.style.flexDirection?a.style.flexDirection:ea}function y(a,b){return d(a)?v(ca,b):ea}function z(a){return a.style.position?a.style.position:pa}function A(a){return a.style.overflow?a.style.overflow:ra}function B(a){return z(a)===pa&&void 0!==a.style.flex&&0!==a.style.flex}function C(a){return"wrap"===a.style.flexWrap}function D(a,b){return a.layout[Aa[b]]+q(a,b)}function E(a,b){return void 0!==a.style[za[b]]&&a.style[za[b]]>=0}function F(a,b){return void 0!==a.layout[Aa[b]]&&a.layout[Aa[b]]>=0}function G(a,b){return void 0!==a.style[b]}function H(a){return void 0!==a.style.measure}function I(a,b){return void 0!==a.style[b]?a.style[b]:0}function J(a,b,c){var d={row:a.style.minWidth,"row-reverse":a.style.minWidth,column:a.style.minHeight,"column-reverse":a.style.minHeight}[b],e={row:a.style.maxWidth,"row-reverse":a.style.maxWidth,column:a.style.maxHeight,"column-reverse":a.style.maxHeight}[b],f=c;return void 0!==e&&e>=0&&f>e&&(f=e),void 0!==d&&d>=0&&d>f&&(f=d),f}function K(a,b){return b>a?a:b}function L(a,b){return a>b?a:b}function M(a,b,c){return L(J(a,b,c),r(a,b))}function N(a,b,c){var d=z(b)===qa?0:b.layout[Aa[c]];b.layout[xa[c]]=a.layout[Aa[c]]-d-b.layout[ya[c]]}function O(a,b){return void 0!==a.style[wa[b]]?I(a,wa[b]):-I(a,xa[b])}function P(a,b){var c=v(x(a),b),d=y(c,b);a.layout[wa[c]]=i(a,c)+O(a,c),a.layout[xa[c]]=j(a,c)+O(a,c),a.layout[wa[d]]=i(a,d)+O(a,d),a.layout[xa[d]]=j(a,d)+O(a,d)}function Q(a,b){if(!a)throw new Error(b)}function R(a,d,e,k,l,O,R){Q(b(d)?l===ta:!0,"availableWidth is indefinite so widthMeasureMode must be CSS_MEASURE_MODE_UNDEFINED"),Q(b(e)?O===ta:!0,"availableHeight is indefinite so heightMeasureMode must be CSS_MEASURE_MODE_UNDEFINED");var T=r(a,ca),V=r(a,ea),W=q(a,ca),_=q(a,ea),aa=w(a,k);if(a.layout.direction=aa,H(a)){var ba=d-W-T,ra=e-_-V;if(l===ua&&O===ua)a.layout.measuredWidth=M(a,ca,d-W),a.layout.measuredHeight=M(a,ea,e-_);else if(0>=ba)a.layout.measuredWidth=M(a,ca,0),a.layout.measuredHeight=M(a,ea,0);else{var za=a.style.measure(ba,l,ra,O);a.layout.measuredWidth=M(a,ca,l===ta||l===va?za.width+T:d-W),a.layout.measuredHeight=M(a,ea,O===ta||O===va?za.height+V:e-_)}}else{var Ba=a.children.length;if(0===Ba)return a.layout.measuredWidth=M(a,ca,l===ta||l===va?T:d-W),void(a.layout.measuredHeight=M(a,ea,O===ta||O===va?V:e-_));if(!R){if(l===va&&0>=d&&O===va&&0>=e)return a.layout.measuredWidth=M(a,ca,0),void(a.layout.measuredHeight=M(a,ea,0));if(l===va&&0>=d)return a.layout.measuredWidth=M(a,ca,0),void(a.layout.measuredHeight=M(a,ea,b(e)?0:e-_));if(O===va&&0>=e)return a.layout.measuredWidth=M(a,ca,b(d)?0:d-W),void(a.layout.measuredHeight=M(a,ea,0));if(l===ua&&O===ua)return a.layout.measuredWidth=M(a,ca,d-W),void(a.layout.measuredHeight=M(a,ea,e-_))}var Ca,Da,Ea,Fa,Ga,Ha,Ia=v(x(a),aa),Ja=y(Ia,aa),Ka=c(Ia),La=s(a),Ma=C(a),Na=void 0,Oa=void 0,Pa=o(a,Ia),Qa=p(a,Ia),Ra=o(a,Ja),Sa=r(a,Ia),Ta=r(a,Ja),Ua=Ka?l:O,Va=Ka?O:l,Wa=d-W-T,Xa=e-_-V,Ya=Ka?Wa:Xa,Za=Ka?Xa:Wa;for(Da=0;Ba>Da;Da++){if(Ca=a.children[Da],R){var $a=w(Ca,aa);P(Ca,$a)}z(Ca)===qa?(void 0===Na&&(Na=Ca),void 0!==Oa&&(Oa.nextChild=Ca),Oa=Ca,Ca.nextChild=void 0):Ka&&E(Ca,ca)?Ca.layout.flexBasis=L(Ca.style.width,r(Ca,ca)):!Ka&&E(Ca,ea)?Ca.layout.flexBasis=L(Ca.style.height,r(Ca,ea)):f(Ca)||b(Ya)?(Ea=U,Fa=U,Ga=ta,Ha=ta,E(Ca,ca)&&(Ea=Ca.style.width+q(Ca,ca),Ga=ua),E(Ca,ea)&&(Fa=Ca.style.height+q(Ca,ea),Ha=ua),Ka||!b(Ea)||b(Wa)||(Ea=Wa,Ga=va),A(a)===sa&&Ka&&b(Fa)&&!b(Xa)&&(Fa=Xa,Ha=va),S(Ca,Ea,Fa,aa,Ga,Ha,!1,"measure"),Ca.layout.flexBasis=L(Ka?Ca.layout.measuredWidth:Ca.layout.measuredHeight,r(Ca,Ia))):Ca.layout.flexBasis=L(0,r(Ca,Ia))}for(var _a=0,ab=0,bb=0,cb=0,db=0;Ba>ab;){var eb=0,fb=0,gb=0,hb=0;Da=_a;for(var ib=void 0,jb=void 0;Ba>Da;){if(Ca=a.children[Da],Ca.lineIndex=bb,z(Ca)!==qa){var kb=Ca.layout.flexBasis+q(Ca,Ia);if(fb+kb>Ya&&Ma&&eb>0)break;fb+=kb,eb++,B(Ca)&&(gb+=g(Ca),hb+=h(Ca)*Ca.layout.flexBasis),void 0===ib&&(ib=Ca),void 0!==jb&&(jb.nextChild=Ca),jb=Ca,Ca.nextChild=void 0}Da++,ab++}var lb=!R&&Va===ua,mb=0,nb=0,ob=0;b(Ya)?0>fb&&(ob=-fb):ob=Ya-fb;var pb=ob;if(!lb){var qb,rb,sb,tb,ub,vb=0,wb=0,xb=0;for(jb=ib;void 0!==jb;)qb=jb.layout.flexBasis,0>ob?(rb=h(jb)*qb,0!==rb&&(tb=qb+ob/hb*rb,ub=M(jb,Ia,tb),tb!==ub&&(vb-=ub,wb-=rb))):ob>0&&(sb=g(jb),0!==sb&&(tb=qb+ob/gb*sb,ub=M(jb,Ia,tb),tb!==ub&&(vb-=ub,xb-=sb))),jb=jb.nextChild;for(hb+=wb,gb+=xb,ob+=vb,pb=ob,jb=ib;void 0!==jb;){qb=jb.layout.flexBasis;var yb=qb;0>ob?(rb=h(jb)*qb,0!==rb&&(yb=M(jb,Ia,qb+ob/hb*rb))):ob>0&&(sb=g(jb),0!==sb&&(yb=M(jb,Ia,qb+ob/gb*sb))),pb-=yb-qb,Ka?(Ea=yb+q(jb,ca),Ga=ua,E(jb,ea)?(Fa=jb.style.height+q(jb,ea),Ha=ua):(Fa=Za,Ha=b(Fa)?ta:va)):(Fa=yb+q(jb,ea),Ha=ua,E(jb,ca)?(Ea=jb.style.width+q(jb,ca),Ga=ua):(Ea=Za,Ga=b(Ea)?ta:va));var zb=!E(jb,Ja)&&u(a,jb)===oa;S(jb,Ea,Fa,aa,Ga,Ha,R&&!zb,"flex"),jb=jb.nextChild}}ob=pb,Ua===va&&(ob=0),La!==ga&&(La===ha?mb=ob/2:La===ia?mb=ob:La===ja?(ob=L(ob,0),nb=eb>1?ob/(eb-1):0):La===ka&&(nb=ob/eb,mb=nb/2));var Ab=Pa+mb,Bb=0;for(Da=_a;ab>Da;++Da)Ca=a.children[Da],z(Ca)===qa&&G(Ca,wa[Ia])?R&&(Ca.layout[ya[Ia]]=I(Ca,wa[Ia])+m(a,Ia)+i(Ca,Ia)):(R&&(Ca.layout[ya[Ia]]+=Ab),z(Ca)===pa&&(lb?(Ab+=nb+q(Ca,Ia)+Ca.layout.flexBasis,Bb=Za):(Ab+=nb+D(Ca,Ia),Bb=L(Bb,D(Ca,Ja)))));Ab+=Qa;var Cb=Za;if(Va!==ta&&Va!==va||(Cb=M(a,Ja,Bb+Ta)-Ta,Va===va&&(Cb=K(Cb,Za))),Ma||Va!==ua||(Bb=Za),Bb=M(a,Ja,Bb+Ta)-Ta,R)for(Da=_a;ab>Da;++Da)if(Ca=a.children[Da],z(Ca)===qa)G(Ca,wa[Ja])?Ca.layout[ya[Ja]]=I(Ca,wa[Ja])+m(a,Ja)+i(Ca,Ja):Ca.layout[ya[Ja]]=Ra+i(Ca,Ja);else{var Db=Ra,Eb=u(a,Ca);if(Eb===oa){Ea=Ca.layout.measuredWidth+q(Ca,ca),Fa=Ca.layout.measuredHeight+q(Ca,ea);var Fb=!1;Ka?(Fb=E(Ca,ea),Fa=Bb):(Fb=E(Ca,ca),Ea=Bb),Fb||(Ga=b(Ea)?ta:ua,Ha=b(Fa)?ta:ua,S(Ca,Ea,Fa,aa,Ga,Ha,!0,"stretch"))}else if(Eb!==la){var Gb=Cb-D(Ca,Ja);Db+=Eb===ma?Gb/2:Gb}Ca.layout[ya[Ja]]+=cb+Db}cb+=Bb,db=L(db,Ab),bb++,_a=ab,ab=_a}if(bb>1&&R&&!b(Za)){var Hb=Za-cb,Ib=0,Jb=Ra,Kb=t(a);Kb===na?Jb+=Hb:Kb===ma?Jb+=Hb/2:Kb===oa&&Za>cb&&(Ib=Hb/bb);var Lb=0;for(Da=0;bb>Da;++Da){var Mb,Nb=Lb,Ob=0;for(Mb=Nb;Ba>Mb;++Mb)if(Ca=a.children[Mb],z(Ca)===pa){if(Ca.lineIndex!==Da)break;F(Ca,Ja)&&(Ob=L(Ob,Ca.layout[Aa[Ja]]+q(Ca,Ja)))}if(Lb=Mb,Ob+=Ib,R)for(Mb=Nb;Lb>Mb;++Mb)if(Ca=a.children[Mb],z(Ca)===pa){var Pb=u(a,Ca);Pb===la?Ca.layout[ya[Ja]]=Jb+i(Ca,Ja):Pb===na?Ca.layout[ya[Ja]]=Jb+Ob-j(Ca,Ja)-Ca.layout[Aa[Ja]]:Pb===ma?(Fa=Ca.layout[Aa[Ja]],Ca.layout[ya[Ja]]=Jb+(Ob-Fa)/2):Pb===oa&&(Ca.layout[ya[Ja]]=Jb+i(Ca,Ja))}Jb+=Ob}}if(a.layout.measuredWidth=M(a,ca,d-W),a.layout.measuredHeight=M(a,ea,e-_),Ua===ta?a.layout[Aa[Ia]]=M(a,Ia,db):Ua===va&&(a.layout[Aa[Ia]]=L(K(Ya+Sa,J(a,Ia,db)),Sa)),Va===ta?a.layout[Aa[Ja]]=M(a,Ja,cb+Ta):Va===va&&(a.layout[Aa[Ja]]=L(K(Za+Ta,J(a,Ja,cb+Ta)),Ta)),R){var Qb=!1,Rb=!1;if(Ia!==da&&Ia!==fa||(Qb=!0),Ja!==da&&Ja!==fa||(Rb=!0),Qb||Rb)for(Da=0;Ba>Da;++Da)Ca=a.children[Da],Qb&&N(a,Ca,Ia),Rb&&N(a,Ca,Ja)}for(Oa=Na;void 0!==Oa;)R&&(Ea=U,Fa=U,E(Oa,ca)?Ea=Oa.style.width+q(Oa,ca):G(Oa,X)&&G(Oa,Z)&&(Ea=a.layout.measuredWidth-(m(a,ca)+n(a,ca))-(Oa.style[X]+Oa.style[Z]),Ea=M(Oa,ca,Ea)),E(Oa,ea)?Fa=Oa.style.height+q(Oa,ea):G(Oa,Y)&&G(Oa,$)&&(Fa=a.layout.measuredHeight-(m(a,ea)+n(a,ea))-(Oa.style[Y]+Oa.style[$]),Fa=M(Oa,ea,Fa)),(b(Ea)||b(Fa))&&(Ga=b(Ea)?ta:ua,Ha=b(Fa)?ta:ua,Ka||!b(Ea)||b(Wa)||(Ea=Wa,Ga=va),A(a)===sa&&Ka&&b(Fa)&&!b(Xa)&&(Fa=Xa,Ha=va),S(Oa,Ea,Fa,aa,Ga,Ha,!1,"abs-measure"),Ea=Oa.layout.measuredWidth+q(Oa,ca),Fa=Oa.layout.measuredHeight+q(Oa,ea)),S(Oa,Ea,Fa,aa,ua,ua,!0,"abs-layout"),G(Oa,xa[ca])&&!G(Oa,wa[ca])&&(Oa.layout[wa[ca]]=a.layout[Aa[ca]]-Oa.layout[Aa[ca]]-I(Oa,xa[ca])),G(Oa,xa[ea])&&!G(Oa,wa[ea])&&(Oa.layout[wa[ea]]=a.layout[Aa[ea]]-Oa.layout[Aa[ea]]-I(Oa,xa[ea]))),Oa=Oa.nextChild}}function S(a,b,c,d,e,f,g,h){var i=a.layout,j=a.isDirty&&i.generationCount!==W||i.lastParentDirection!==d;j&&(void 0!==i.cachedMeasurements&&(i.cachedMeasurements=[]),void 0!==i.cachedLayout&&(i.cachedLayout.widthMeasureMode=void 0,i.cachedLayout.heightMeasureMode=void 0));var k;if(g)i.cachedLayout&&i.cachedLayout.availableWidth===b&&i.cachedLayout.availableHeight===c&&i.cachedLayout.widthMeasureMode===e&&i.cachedLayout.heightMeasureMode===f&&(k=i.cachedLayout);else if(i.cachedMeasurements)for(var l=0,m=i.cachedMeasurements.length;m>l;l++)if(i.cachedMeasurements[l].availableWidth===b&&i.cachedMeasurements[l].availableHeight===c&&i.cachedMeasurements[l].widthMeasureMode===e&&i.cachedMeasurements[l].heightMeasureMode===f){k=i.cachedMeasurements[l];break}if(j||void 0===k){if(R(a,b,c,d,e,f,g),i.lastParentDirection=d,void 0===k){var n;g?(void 0===i.cachedLayout&&(i.cachedLayout={}),n=i.cachedLayout):(void 0===i.cachedMeasurements&&(i.cachedMeasurements=[]),n={},i.cachedMeasurements.push(n)),n.availableWidth=b,n.availableHeight=c,n.widthMeasureMode=e,n.heightMeasureMode=f,n.computedWidth=i.measuredWidth,n.computedHeight=i.measuredHeight}}else i.measureWidth=k.computedWidth,i.measureHeight=k.computedHeight;return g&&(a.layout.width=a.layout.measuredWidth,a.layout.height=a.layout.measuredHeight,i.shouldUpdate=!0),i.generationCount=W,j||void 0===k}function T(a,c,d,e){W++,b(c)&&E(a,ca)&&(c=a.style.width+q(a,ca)),b(d)&&E(a,ea)&&(d=a.style.height+q(a,ea));var f=b(c)?ta:ua,g=b(d)?ta:ua;S(a,c,d,e,f,g,!0,"initial")&&P(a,a.layout.direction)}var U,V=!1,W=0,X="left",Y="top",Z="right",$="bottom",_="inherit",aa="ltr",ba="rtl",ca="row",da="row-reverse",ea="column",fa="column-reverse",ga="flex-start",ha="center",ia="flex-end",ja="space-between",ka="space-around",la="flex-start",ma="center",na="flex-end",oa="stretch",pa="relative",qa="absolute",ra="visible",sa="hidden",ta="undefined",ua="exactly",va="at-most",wa={row:"left","row-reverse":"right",column:"top","column-reverse":"bottom"},xa={row:"right","row-reverse":"left",column:"bottom","column-reverse":"top"},ya={row:"left","row-reverse":"right",column:"top","column-reverse":"bottom"},za={row:"width","row-reverse":"width",column:"height","column-reverse":"height"},Aa={row:"measuredWidth","row-reverse":"measuredWidth",column:"measuredHeight","column-reverse":"measuredHeight"};return{layoutNodeImpl:R,computeLayout:T,fillNodes:a}}();return"object"==typeof exports&&(module.exports=a),function(b){a.fillNodes(b),a.computeLayout(b)}});
|
|
//# sourceMappingURL=css-layout.min.js.map
|