DOM.correctNodes( span );
return [ w, h ];
},
+ getTextHeight : function( elm, w, content ){
+ var div = DOM.createSpan(),
+ text = DOM.createText(),
+ w, h;
+ elm.appendChild( div );
+ div.style.cssText = 'visibility:hidden;position:absolute;width:' + w + 'px;';
+ div.appendChild( text );
+ text.data = content;
+ w = div.offsetWidth;
+ h = div.offsetHeight;
+ DOM.correctNodes( div );
+ return h;
+ },
correctNodes : function( node ){
var child;
if( node && node.parentNode ){
var getIndex = Util.getIndex;
var ROOT_LIST = [];
var DEF_ATTRS = {};
- var AUTO = undefined;
+ var AUTO = Number.POSITIVE_INFINITY;
var FULL = DEF_ATTRS; // something unigue value;
var FLOOR = Math.floor;
DEF_ATTRS.BOX_SIZING = 'content-box,padding-box,border-box,margin-box'.split(',');
DEF_ATTRS.PAINT = 1; // 再描画のみ必要
DEF_ATTRS.REFLOW = 2; // レイアウトの再計算が必要
+ DEF_ATTRS.FONT = 3; // フォントサイズが変更された
+ DEF_ATTRS.CONTENT_UPDATE = 4; // コンテンツが変更された
DEF_ATTRS.borderWidth = [ DEF_ATTRS.REFLOW, 0, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH ]; // em [ top, right, bottom, left ]
DEF_ATTRS.borderColor = [ DEF_ATTRS.PAINT, 4, DEF_ATTRS.QUARTET | DEF_ATTRS.DEF_COLOR ]; // color [ top, right, bottom, left ]
- DEF_ATTRS.borderStyle = [ DEF_ATTRS.REFLOW, 8, DEF_ATTRS.QUARTET | DEF_ATTRS.LIST, DEF_ATTRS.BORDER_STYLE ]; // string [ top, right, bottom, left ]
+ DEF_ATTRS.borderStyle = [ DEF_ATTRS.PAINT, 8, DEF_ATTRS.QUARTET | DEF_ATTRS.LIST, DEF_ATTRS.BORDER_STYLE ]; // string [ top, right, bottom, left ]
DEF_ATTRS.cornerRadius = [ DEF_ATTRS.PAINT, 12, DEF_ATTRS.QUARTET | DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ]; // em, px [ top, right, bottom, left ]
DEF_ATTRS.bgColor = [ DEF_ATTRS.PAINT, 16, DEF_ATTRS.COLOR ]; // color
DEF_ATTRS.bgAlpha = [ DEF_ATTRS.PAINT, 17, DEF_ATTRS.U_DECIMAL ]; // 0 - 1
DEF_ATTRS.shadowInset = [ DEF_ATTRS.PAINT, 29, DEF_ATTRS.BOOLEAN ]; // true / false
DEF_ATTRS.color = [ DEF_ATTRS.PAINT, 30, DEF_ATTRS.COLOR ]; // color
- DEF_ATTRS.fontFamily = [ DEF_ATTRS.REFLOW, 31, DEF_ATTRS.FONT_NAME ]; // string
- DEF_ATTRS.fontSize = [ DEF_ATTRS.REFLOW, 32, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ]; // em, %
- DEF_ATTRS.bold = [ DEF_ATTRS.REFLOW, 33, DEF_ATTRS.BOOLEAN ]; // true / false
- DEF_ATTRS.italic = [ DEF_ATTRS.REFLOW, 34, DEF_ATTRS.BOOLEAN ]; // true / false
- DEF_ATTRS.lineHeight = [ DEF_ATTRS.REFLOW, 35, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT | DEF_ATTRS.NUMERICAL ]; // em, %,
- DEF_ATTRS.letterSpacing = [ DEF_ATTRS.REFLOW, 36, DEF_ATTRS.LENGTH ]; // em
- DEF_ATTRS.wordSpacing = [ DEF_ATTRS.REFLOW, 37, DEF_ATTRS.LENGTH ];
- DEF_ATTRS.align = [ DEF_ATTRS.REFLOW, 38, DEF_ATTRS.LIST, DEF_ATTRS.ALIGN ];
+ DEF_ATTRS.fontFamily = [ DEF_ATTRS.FONT, 31, DEF_ATTRS.FONT_NAME ]; // string
+ DEF_ATTRS.fontSize = [ DEF_ATTRS.FONT, 32, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ]; // em, %
+ DEF_ATTRS.bold = [ DEF_ATTRS.FONT, 33, DEF_ATTRS.BOOLEAN ]; // true / false
+ DEF_ATTRS.italic = [ DEF_ATTRS.FONT, 34, DEF_ATTRS.BOOLEAN ]; // true / false
+ DEF_ATTRS.lineHeight = [ DEF_ATTRS.FONT, 35, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT | DEF_ATTRS.NUMERICAL ]; // em, %,
+ DEF_ATTRS.letterSpacing = [ DEF_ATTRS.FONT, 36, DEF_ATTRS.LENGTH ]; // em
+ DEF_ATTRS.wordSpacing = [ DEF_ATTRS.FONT, 37, DEF_ATTRS.LENGTH ];
+ DEF_ATTRS.align = [ DEF_ATTRS.FONT, 38, DEF_ATTRS.LIST, DEF_ATTRS.ALIGN ];
DEF_ATTRS.decoration = [ DEF_ATTRS.PAINT, 39, DEF_ATTRS.LIST, DEF_ATTRS.TEXT_DECORATION ];
- DEF_ATTRS.transform = [ DEF_ATTRS.REFLOW, 40, DEF_ATTRS.LIST, DEF_ATTRS.TEXT_TRANSFORM ];
- DEF_ATTRS.shadowColor = [ DEF_ATTRS.PAINT, 41, DEF_ATTRS.COLOR ];
- DEF_ATTRS.shadowOffsetX = [ DEF_ATTRS.PAINT, 42, DEF_ATTRS.LENGTH ];
- DEF_ATTRS.shadowOffsetY = [ DEF_ATTRS.PAINT, 43, DEF_ATTRS.LENGTH ];
+ DEF_ATTRS.transform = [ DEF_ATTRS.FONT, 40, DEF_ATTRS.LIST, DEF_ATTRS.TEXT_TRANSFORM ];
+ DEF_ATTRS.textShadowColor = [ DEF_ATTRS.PAINT, 41, DEF_ATTRS.COLOR ];
+ DEF_ATTRS.textShadowOffsetX = [ DEF_ATTRS.PAINT, 42, DEF_ATTRS.LENGTH ];
+ DEF_ATTRS.textShadowOffsetY = [ DEF_ATTRS.PAINT, 43, DEF_ATTRS.LENGTH ];
DEF_ATTRS.shadowBlur = [ DEF_ATTRS.PAINT, 44, DEF_ATTRS.LENGTH ];
DEF_ATTRS.width = [ DEF_ATTRS.REFLOW, 45, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT, DEF_ATTRS.WIDTH_HEIGHT ];
DEF_ATTRS.bottom = [ DEF_ATTRS.REFLOW, 63, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
DEF_ATTRS.right = [ DEF_ATTRS.REFLOW, 64, DEF_ATTRS.LENGTH | DEF_ATTRS.PERCENT ];
+ var ATTRS = ( function(){
+ var ret = {},
+ obj = DEF_ATTRS,
+ p;
+ for( p in obj ){
+ if( Type.isArray( obj[ p ] ) === true ){
+ ret[ p ] = obj[ p ][ 1 ];
+ };
+ };
+ return ret;
+ })();
+
/**
* 再計算と再描画
* redraw 再描画はパラメータ変更後に setTimeout で
childW = 0,
childH = 0,
styles, child, calc, i;
-
- if( style ){
- styles = style.data;
- calc = BasicLayoutManager.calcValue;
- sizing = styles[ 53 ];
- page = styles[ 54 ];
- x = calc( styles[ 55 ], allowW );
- y = calc( styles[ 56 ], page === true ? allowH : allowW );
- w = styles[ 45 ];
- minW = styles[ 46 ];
- maxW = styles[ 47 ];
- contentW = BasicLayoutManager.finalValue( w, minW, maxW, allowW );
- h = styles[ 48 ];
- minW = styles[ 49 ];
- maxW = styles[ 50 ];
- contentH = BasicLayoutManager.finalValue( h, minW, maxW, allowH );
- autoSize = w === AUTO || h === AUTO;
- paddingT = calc( styles[ 51 ], page === true ? allowH : allowW );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して
- paddingR = calc( styles[ 52 ], allowW );
- paddingT = calc( styles[ 53 ], page === true ? allowH : allowW );
- paddingL = calc( styles[ 54 ], allowW, autoW );
- borderT = styles[ 0 ];
- borderR = styles[ 1 ];
- borderB = styles[ 2 ];
- borderL = styles[ 3 ];
- marginT = calc( styles[ 55 ], page === true ? allowH : allowW );// marginTRBL の % 指定は 最大幅に対して TB でも幅に対して
- marginR = calc( styles[ 56 ], allowW );
- marginB = calc( styles[ 57 ], page === true ? allowH : allowW );
- marginL = calc( styles[ 58 ], allowW );
- boxW = contentW;
- boxH = contentH;
- switch( sizing ){
- case 3 : // margin-box
- contentW -= ( marginR + marginL );
- contentH -= ( marginT + marginR );
-
- case 2 : // border-box
- contentW -= ( borderR + borderL );
- contentH -= ( borderT + borderR );
- case 1 : // padding-box
- contentW -= ( paddingR + paddingL );
- contentH -= ( paddingT + paddingR );
- // case 0 : // content-box
- };
- } else {
- boxW = contentW = w = allowW;
- boxH = contentH = h = allowH;
- minW = minH = 0;
- maxW = maxH = Infinity;
- autoSize = false;
- };
+
+ nodeData.preSizing( allowW, allowH );
if( nodeData.contentWidth !== contentW || nodeData.contentHeight === contentH ){
if( autoSize === false ){
return v;
};
BasicLayoutManager.calcValue = function( styleValue, srcValue ){
- if( styleValue === 0 ) return 0;
- // 100%
- if( styleValue === FULL || styleValue === AUTO ) return srcValue;
- if( 1 <= styleValue ) return styleValue; // legth
- if( -1 < styleValue ) return FLOOR( srcValue * styleValue ); // %
+ switch( styleValue ){
+ case 0 :
+ return 0;
+ case AUTO :
+ return AUTO;
+ case FULL :
+ return srcValue; // 100%
+ default :
+ if( 1 <= styleValue ) return styleValue; // legth
+ if( -1 < styleValue ) return FLOOR( srcValue * styleValue ); // %
+ };
return styleValue; // - length
};
+ BasicLayoutManager.advancedCalcValue = function( styleValue, srcValue ){
+ switch( styleValue ){
+ case 0 :
+ return 0;
+ case AUTO :
+ return srcValue;
+ case FULL :
+ throw new Error( 'calcValueFromSelf FULL' );
+ // return ; // 100%
+ default :
+ if( 1 <= styleValue ) return styleValue;
+ if( -1 < styleValue ) return FLOOR( ( srcValue / ( 1 - styleValue ) ) * styleValue ); // %
+ };
+ return styleValue; // - length
+ }
var NodeStylePrivate = Class.create(
Class.PRIVATE_DATA | Class.POOL_OBJECT,
{
+ fontCssText : null,
colorCssText : null,
layoutCssText : null,
Constructor : function(){
var styleClass = Class.getClass( this.User ),
dataClass = Class.getClass( this );
},
- attr : function( prop, v ){
+ /*
+ * opt_unit は getter のみ
+ */
+ attr : function( prop, v, opt_unit ){
var update = prop[ 0 ],
propID = prop[ 1 ],
type = prop[ 2 ],
};
return this.User;
};
- if( update === DEF_ATTRS.REFLOW ){
- delete this.layoutCssText;
- } else {
- delete this.colorCssText;
+ switch( update ){
+ case DEF_ATTRS.REFLOW :
+ delete this.layoutCssText;
+ break;
+ case DEF_ATTRS.PAINT :
+ delete this.colorCssText;
+ break;
+ case DEF_ATTRS.FONT :
+ delete this.fontCssText;
};
+
if( this.dirty < update ){
this.dirty = update;
roots = this.rootList;
if( list ) _v = Util.getIndex( list, v );
data[ propID ] = _v !== -1 ? _v : v;
+
+ switch( prop ){
+ case DEF_ATTRS.left :
+ case DEF_ATTRS.right :
+ this.ltrtWidth = data[ DEF_ATTRS.left[ 0 ] ] === undefined && data[ DEF_ATTRS.right[ 0 ] ] === undefined;
+ break;
+ case DEF_ATTRS.top :
+ case DEF_ATTRS.bottom :
+ this.tpbtHeight = data[ DEF_ATTRS.top[ 0 ] ] === undefined && data[ DEF_ATTRS.bottom[ 0 ] ] === undefined;
+ break;
+ case DEF_ATTRS.width :
+ this.autoWidth = v === AUTO;
+ this.prctWidth = v === FULL || v < 1;
+ break;
+ case DEF_ATTRS.height :
+ this.autoHeight = v === AUTO;
+ this.prctHeight = v === FULL || v < 1;
+ break;
+ };
return this.User;
};
/*
return v;
},
cssText : function(){
- if( this.colorCssText === null ) this.colorCssText = this.createColorCssText();
+ if( this.fontCssText === null ) this.fontCssText = this.createFontCssText();
if( this.layoutCssText === null ) this.layoutCssText = this.createLayoutCssText();
- return this.colorCssText + ';' + this.layoutCssText;
+ if( this.colorCssText === null ) this.colorCssText = this.createColorCssText();
+ return [ this.fontCssText, this.colorCssText, this.layoutCssText ].join( ';' );
+ },
+ createFontCssText : function(){
+ var data = this.data,
+ css = [],
+ v;
+ if( v = data[ ATTRS.fontFamily ] ) css[ 0 ] = 'font-family:' + v;
+ if( v = data[ ATTRS.fontSize ] ) css[ css.length - 1 ] = 'font-size:' + v;
+ if( v = data[ ATTRS.bold ] ) css[ css.length - 1 ] = 'font-weight:bold';
+ if( v = data[ ATTRS.bold ] ) css[ css.length - 1 ] = 'font-style:italic';
+ if( v = data[ ATTRS.lineHeight ] ) css[ css.length - 1 ] = 'line-height:' + v;
+ if( v = data[ ATTRS.letterSpacing ] ) css[ css.length - 1 ] = 'letter-spacing:' + v;
+ if( v = data[ ATTRS.wordSpacing ] ) css[ css.length - 1 ] = 'word-spacing:' + v;
+ if( v = data[ ATTRS.align ] ) css[ css.length - 1 ] = 'text-align:' + DEF_ATTRS.ALIGN[ v ];
+ if( v = data[ ATTRS.transform ] ) css[ css.length - 1 ] = 'text-transform:' + DEF_ATTRS.TEXT_TRANSFORM[ v ];
+ return css.join( ',' );
},
createColorCssText : function(){
+ var data = this.data,
+ css = [],
+ v, x, y, c, b;
+ if( v = data[ ATTRS.borderColor ] ) css[ 0 ] = 'border-color:' + v;
+ if( v = data[ ATTRS.borderStyle + 0 ] ) css[ css.length - 1 ] = 'border-top-style:' + DEF_ATTRS.BORDER_STYLE[ v ];
+ if( v = data[ ATTRS.borderStyle + 1 ] ) css[ css.length - 1 ] = 'border-right-style:' + DEF_ATTRS.BORDER_STYLE[ v ];
+ if( v = data[ ATTRS.borderStyle + 2 ] ) css[ css.length - 1 ] = 'border-bottom-style:' + DEF_ATTRS.BORDER_STYLE[ v ];
+ if( v = data[ ATTRS.borderStyle + 3 ] ) css[ css.length - 1 ] = 'border-left-style:' + DEF_ATTRS.BORDER_STYLE[ v ];
+ if( v = data[ ATTRS.cornerRadius + 0 ] ) css[ css.length - 1 ] = 'corner-radius-top:' + v;
+ if( v = data[ ATTRS.cornerRadius + 1 ] ) css[ css.length - 1 ] = 'corner-radius-right:' + v;
+ if( v = data[ ATTRS.cornerRadius + 2 ] ) css[ css.length - 1 ] = 'border-radius-bottom:' + v;
+ if( v = data[ ATTRS.cornerRadius + 3 ] ) css[ css.length - 1 ] = 'border-radius-left:' + v;
+ if( v = data[ ATTRS.bgColor ] ) css[ css.length - 1 ] = 'background-color:' + v;
+ // ATTRS.bgAlpha
+ if( v = data[ ATTRS.bgImgUrl ] ) css[ css.length - 1 ] = 'background-image:url(' + v + ')';
+ x = data[ ATTRS.bgImgRepeatX ];
+ y = data[ ATTRS.bgImgRepeatY ];
+ if( x && y ){
+ css[ css.length - 1 ] = 'background-repeat:repeat';
+ } else
+ if( x ){
+ css[ css.length - 1 ] = 'background-repeat:repeat-x';
+ } else
+ if( y ){
+ css[ css.length - 1 ] = 'background-repeat:repeat-y';
+ };
+ x = data[ ATTRS.bgImgPositionX ];
+ y = data[ ATTRS.bgImgPositionY ];
+ if( x && y ){
+ css[ css.length - 1 ] = 'background-position:' + x + ' ' + y;
+ } else
+ if( x ){
+ css[ css.length - 1 ] = 'background-position:' + x + ' 0';
+ } else
+ if( y ){
+ css[ css.length - 1 ] = 'background-position:0 ' + y;
+ };
+ if( v = data[ ATTRS.color ] ) css[ css.length - 1 ] = 'color:' + v;
+ if( v = data[ ATTRS.decoration ] ) css[ css.length - 1 ] = 'text-decoration:' + DEF_ATTRS.TEXT_DECORATION[ v ];
+ x = data[ ATTRS.textShadowOffsetX ];
+ y = data[ ATTRS.textShadowOffsetY ];
+ b = data[ ATTRS.textShadowBlur ];
+ c = data[ ATTRS.textShadowColor ];
+ if( c || x || y || b ){
+ css[ css.length - 1 ] = 'text-shadow:' + x + ' ' + y + ' ' + b + ' ' + c;
+ };
+ /*
+ ATTRS.shadowColor = [ DEF_ATTRS.PAINT, 23, DEF_ATTRS.COLOR ]; // color
+ ATTRS.shadowAlpha = [ DEF_ATTRS.PAINT, 24, DEF_ATTRS.U_DECIMAL ]; // 0 - 1
+ ATTRS.shadowOffsetX = [ DEF_ATTRS.PAINT, 25, DEF_ATTRS.LENGTH ]; // em
+ ATTRS.shadowOffsetY = [ DEF_ATTRS.PAINT, 26, DEF_ATTRS.LENGTH ]; // em
+ ATTRS.shadowBlur = [ DEF_ATTRS.PAINT, 27, DEF_ATTRS.LENGTH ]; // em
+ ATTRS.shadowSpread = [ DEF_ATTRS.PAINT, 28, DEF_ATTRS.LENGTH ]; // em
+ ATTRS.shadowInset = [ DEF_ATTRS.PAINT, 29, DEF_ATTRS.BOOLEAN ]; // true / false
+ */
+ },
+ createBoxShadowCssText : function(){
+
+ },
+ createBGAlphaCssText : function(){
+
+ },
+ createTextShadowCssText : function(){
},
createLayoutCssText : function(){
transform : function( v ){
return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.transform, v );
},
- shadowColor : function( v ){
- return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowColor, v );
+ textShadowColor : function( v ){
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.textShadowColor, v );
},
- shadowOffsetX : function( v ){
- return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowOffsetX, v );
+ textShadowOffsetX : function( v ){
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.textShadowOffsetX, v );
},
- shadowOffsetY : function( v ){
- return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowOffsetY, v );
+ textShadowOffsetY : function( v ){
+ return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.textShadowOffsetY, v );
},
shadowBlur : function( v ){
return TypoStyle.getPrivateData( this ).attr( DEF_ATTRS.shadowBlur, v );
'NodePrivate',
Class.PRIVATE_DATA | Class.POOL_OBJECT,
{
- elmWrap : null,
- textNode : null,
- autoWidth : false,
- autoHeight : false,
- autoSize : false,
- boxX : 0,
- boxY : 0,
- boxWidth : 0,
- boxHeight : 0,
- boxRight : 0,
- boxBottom : 0,
- contentX : 0,
- contentY : 0,
- contentWidth : 0,
- contentHeight : 0,
+ elmWrap : null,
+ textNode : null,
+ boxX : 0,
+ boxY : 0,
+ boxWidth : 0,
+ boxHeight : 0,
+ contentL : 0,
+ contentT : 0,
+ contentR : 0,
+ contentB : 0,
+ borderL : 0,
+ borderT : 0,
+ borderR : 0,
+ borderB : 0,
+ paddingL : 0,
+ paddingT : 0,
+ paddingR : 0,
+ paddingB : 0,
+ marginL : 0,
+ marginT : 0,
+ marginR : 0,
+ marginB : 0,
+ boxSizingOffsetLR : 0,
+ boxSizingOffsetTB : 0,
+ contentWidth : 0,
+ minContentWidth : 0,
+ maxContentWidth : AUTO,
+ contentHeight : 0,
+ minContentHeight : 0,
+ maxContentHeight : AUTO,
Constructor : function( __root, __parent ){
this.__root = __root;
if( __parent ) this.__parent = __parent;
};
return this._style;
},
+ content : function( v ){
+ if( Type.isString( v ) === true ){
+ if( !this.textNode || ( this.textNode && this.textNode.data !== v ) ){
+ this._content = v;
+ this.updateContent = true;
+ };
+ return this.User;
+ } else
+ if( v === null ){
+ if( this._content !== v && this.textNode ){
+ this._content = v;
+ this.updateContent = true;
+ };
+ return this.User;
+ };
+ if( this._content ) return this._content;
+ if( this._content === null ) return null;
+ if( this.textNode ) return this.textNode.data;
+ return null;
+ },
/**
- * 1. 要素の追加・削除
- * 2. auto 指定時は要素の高さ取得．
- * 3. 親の許す子の最大サイズと自信のスタイル指定から、自身の位置とサイズを計算
- * 4. 描画更新リストに追加
+ * 要素の追加・削除
+ * 1. ペイントがある // 予約のみ
+ * 2. コンテンツがある // 予約のみ *
+ * 3. コンテンツを削除 // 予約のみ
+ * 4. 要素を削除 // 予約のみ
+ *
+ * コンテンツの再計算
+ * 0. 要素追加して css セット
+ * 1. コンテンツの変更
+ * 2. font 指定の変更
+ * 3. contentWidth の変更 （コンテンツの高さの再計算） 前回の contentWidth の保持
+ *
+ * contentSize, scrollSize の決定
*/
- reflow : function(){
- var content = this._textContent,
+ musure : function( dirty ){
+ var content = this._content,
+ root = this.__root,
style = this.__style,
- parent = this.__parent,
- size, data, w, h;
-
- if( content || ( style && style.hasPaint === true ) ){
+ w = this.contentWidth,
+ h = this.contentHeight;
+ switch( this.updateContent === true ? DEF_ATTRS.CONTENT_UPDATE : dirty ){
+ case DEF_ATTRS.CONTENT_UPDATE : // コンテンツが変更された
+ this.paint( 0 );
+ this.lastContentWidth = -1;
+ case DEF_ATTRS.FONT : // フォントサイズが変更された
+ case DEF_ATTRS.REFLOW : // レイアウトの再計算が必要
+ /* http://web-designs.seesaa.net/article/188400668.html
+ * min-width の値が max-width の値より大きい場合は、max-width の値は min-width の値に設定される。
+ *
+ * テキストノードがあり
+ * 1. contentWidth === AUTO
+ * style を更新して contentWidth の決定
+ * min or max に引っかかったら style 更新
+ * contentHeight === AUTO の場合
+ * textHeight の決定
+ * contentHeight !== AUTO の場合 scrollHeight のみ更新
+ * 2. contentHeight === AUTO かつ
+ * コンテンツの高さの再取得が必要( contentWidth が最終計測時の contentWidth と一致 かつ フォント・コンテンツに変更無し の場合再取得不要)
+ * style を更新して contentHeight の決定
+ * 必要でない
+ * 3. content のサイズがすでに決定している
+ * コンテンツの高さの再取得が必要
+ * 必要でない
+ */
+ if( this.textNode ){
+ if( w === AUTO ){
+ this.commitStyle();
+ w = this.contentWidth = this.textNode.offsetWidth;
+ this.scrollWidth = w + this.contentL + this.contentR;
+ if( this.maxContentWidth < w - this.boxSizingOffsetLR ) this.contentWidth = this.maxContentWidth + this.boxSizingOffsetLR;
+ if( w - this.boxSizingOffsetLR < this.minContentWidth ) this.contentWidth = this.minContentWidth + this.boxSizingOffsetLR;
+ this.lastContentWidth = this.contentWidth;
+
+ w !== this.contentWidth && this.commitStyle();
+
+ if( h === AUTO ){
+ h = this.conetntHeight = this.textNode.offsetHeight;
+ this.scrollHeight = h + this.contentT + this.contentB;
+ if( this.maxContentHeight < h - this.boxSizingOffsetTB ) this.contentHeight = this.maxContentHeight + this.boxSizingOffsetTB;
+ if( h - this.boxSizingOffsetTB < this.minContentHeight ) this.contentHeight = this.minContentHeight + this.boxSizingOffsetTB;
+ } else {
+ this.scrollHeight = this.textNode.offsetHeight + this.contentT + this.contentB;
+ };
+ } else
+ if( h === AUTO ){
+ if( w !== this.lastContentWidth || dirty !== DEF_ATTRS.REFLOW ){
+ this.commitStyle();
+ this.lastContentWidth = w;
+ h = this.conetntHeight = this.textNode.offsetHeight;
+ this.scrollWidth = w + this.contentL + this.contentR;
+ this.scrollHeight = h + this.contentT + this.contentB;
+ if( this.maxContentHeight < h - this.boxSizingOffsetTB ) this.contentHeight = this.maxContentHeight + this.boxSizingOffsetTB;
+ if( h - this.boxSizingOffsetTB < this.minContentHeight ) this.contentHeight = this.minContentHeight + this.boxSizingOffsetTB;
+ } else {
+ this.scrollWidth = w + this.contentL + this.contentR;
+ this.scrollHeight = h + this.contentT + this.contentB;
+ root.paintReserve( this );
+ };
+ } else {
+ if( dirty !== DEF_ATTRS.REFLOW ){
+ this.commitStyle();
+ this.scrollWidth = this.textNode.offsetWidth + this.contentL + this.contentR;
+ this.scrollHeight = this.textNode.offsetHeight + this.contentT + this.contentB;
+ } else {
+ root.paintReserve( this );
+ this.scrollWidth = w + this.contentL + this.contentR;
+ this.scrollHeight = h + this.contentT + this.contentB;
+ };
+ };
+ } else {
+ if( w === AUTO ) this.contentWidth = w = 0 < this.minContentWidth ? this.minContentWidth : 0;
+ if( h === AUTO ) this.contentHeight = h = 0 < this.minContentHeight ? this.minContentHeight : 0;
+ this.scrollWidth = w + this.contentL + this.contentR;
+ this.scrollHeight = h + this.contentT + this.contentB;
+ root.paintReserve( this );
+ };
+ break;
+ case DEF_ATTRS.PAINT : // 再描画のみ必要
+ root.paintReserve( this );
+ break;
+ };
+ },
+ paint : function( dirty ){
+ var content = this._content,
+ style = this.__style;
+ if( this.updateContent === true || ( style && style.hasPaint === true ) ){
if( !this.elmWrap ){
this.elmWrap = DOM.createDiv();
- parent.addDisplayElement( this );
+ this.__parent.addDisplayElement( this );
};
- if( style && style.hasStyle === true ){
- this.elmWrap.style.cssText = style.cssText();
- };
- if( content ){
- if( !this.textNode ){
- this.textNode = DOM.cerateText();
- this.elmWrap.appendChild( this.textNode );
- };
- if( style && ( style.autoWidth === true || style.autoHeight === true ) ){
- size = DOM.getTextSize( this.elmWrap, content );
- this.contentWidth = size[ 0 ];
- this.conetntHeight = size[ 1 ];
- };
- this.textNode.data = content;
- } else
- if( this.textNode ){
- DOM.correct( this.textNode );
- delete this.textNode;
- delete this.contentWidth;
- delete this.conetntHeight;
+ dirty !== 0 && this.commitStyle();
+ if( this.updateContent === true ){
+ if( content !== null ){
+ if( !this.textNode ){
+ this.textNode = DOM.cerateText();
+ this.elmWrap.appendChild( this.textNode );
+ };
+ this.textNode.data = content;
+ } else
+ if( this.textNode ){
+ DOM.correct( this.textNode );
+ delete this.textNode;
+ delete this.contentWidth;
+ delete this.conetntHeight;
+ delete this.scrollWidth;
+ delete this.scrollHeight;
+ };
};
- this.boxWidth = this.elmWrap.offsetWidth;
- this.boxHeight = this.elmWrap.offsetHeight;
} else
+ if( this.elmWrap && content === null && ( !style || style.hasPaint === false ) ){
+ this.__parent.removeDisplayElement( this );
+ DOM.correct( this.elmWrap );
+ delete this.contentWidth;
+ delete this.conetntHeight;
+ };
+ },
+ commitStyle : function(){
+ var css;
if( this.elmWrap ){
- parent.removeDisplayElement( this );
+ css = this.__style ? this.__style.cssText( this ) : '';
+ if( this.contentWidth !== AUTO ) css += 'width:' + this.contentWidth + 'px';
+ if( this.contentHeight !== AUTO ) css += 'height:' + this.contentHeight + 'px';
+ this.elmWrap.style.cssText = css;
};
},
- preSizing : function(){
- var parent = nodeData.__parent,
- allowW = parent.contentWidth,
- allowH = parent.contentHeight,
- style = nodeData.__style,
- x, y, w, minW, maxW, h, minH, maxH,
- contentW, contentH,
- page,
+ /*
+ * 親の サイズを元に自身のサイズを計算していく
+ */
+ preMesure : function( allowW, allowH ){
+ var style = this.__style,
+ styles, calc, box, min, max,
+ contentW, contentH, allowSize, boxMinus,
paddingT, paddingR, paddingB, paddingL,
borderT, borderR, borderB, borderL,
- marginT, marginR, marginB, marginL,
- styles, calc;
+ marginT, marginR, marginB, marginL;
if( style ){
styles = style.data;
calc = BasicLayoutManager.calcValue;
- page = styles[ 54 ] === true ? allowH : allowW ;
- w = styles[ 45 ];
- minW = styles[ 46 ];
- maxW = styles[ 47 ];
- contentW = BasicLayoutManager.finalValue( w, minW, maxW, allowW );
- h = styles[ 48 ];
- minW = styles[ 49 ];
- maxW = styles[ 50 ];
- contentH = BasicLayoutManager.finalValue( h, minW, maxW, allowH );
- paddingT = calc( styles[ 51 ], page );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して
- paddingR = calc( styles[ 52 ], allowW );
- paddingB = calc( styles[ 53 ], page );
- paddingL = calc( styles[ 54 ], allowW );
- borderT = styles[ 0 ];
- borderR = styles[ 1 ];
- borderB = styles[ 2 ];
- borderL = styles[ 3 ];
- marginT = calc( styles[ 55 ], page );// marginTRBL の % 指定は 最大幅に対して TB でも幅に対して
- marginR = calc( styles[ 56 ], allowW );
- marginB = calc( styles[ 57 ], page );
- marginL = calc( styles[ 58 ], allowW );
- this.boxWidth = contentW;
- this.boxHeight = contentH;
- switch( styles[ 53 ] ){
- case 3 : // margin-box
- contentW -= ( marginR + marginL );
- contentH -= ( marginT + marginR );
-
- case 2 : // border-box
- contentW -= ( borderR + borderL );
- contentH -= ( borderT + borderR );
- case 1 : // padding-box
- contentW -= ( paddingR + paddingL );
- contentH -= ( paddingT + paddingR );
- // case 0 : // content-box
+ box = styles[ ATTRS.sizing ];
+
+ // Width
+ // 自身が ltrtWidth の場合 親が AUTO ではない
+ // 自身が ltrtWidth でない場合自身が AUTO はなくかつ親 が AUTO の場合自身は % でない
+ if( style.ltrtWidth ? allowW !== AUTO : !style.autoWidth && ( allowW !== AUTO || !style.prctWidth ) ){
+ if( style.ltrtWidth ){
+ contentW = allowW - calc( styles[ ATTRS.left ], allowW ) - calc( styles[ ATTRS.right ], allowW );
+ } else {
+ contentW = BasicLayoutManager.finalValue( styles[ ATTRS.width ], styles[ ATTRS.minWidth ], styles[ ATTRS.maxWidth ], allowW );
+ };
+ paddingR = calc( styles[ ATTRS.padding + 1 ], allowW );
+ paddingL = calc( styles[ ATTRS.padding + 3 ], allowW );
+ borderR = styles[ ATTRS.border + 1 ];
+ borderL = styles[ ATTRS.margin + 3 ];
+ marginR = calc( styles[ ATTRS.margin + 1 ], allowW );
+ marginL = calc( styles[ ATTRS.margin + 3 ], allowW );
+ this.boxWidth = contentW;
+ boxMinus = 0;
+ switch( box ){
+ case 3 : // margin-box
+ boxMinus = - marginR - marginL;
+ case 2 : // border-box
+ boxMinus -= borderR + borderL;
+ case 1 : // padding-box
+ boxMinus -= paddingR + paddingL;
+ // case 0 : // content-box
+ };
+ this.contentL = marginL + borderL + paddingL;
+ this.contentR = marginR + borderR + paddingR;
+ this.contentWidth = contentW + boxMinus;
+ this.boxSizingOffsetLR = boxMinus;
+ } else {
+ this.boxWidth = this.contentWidth = AUTO;
+ min = styles[ ATTRS.minWidth ];
+ max = styles[ ATTRS.maxWidth ];
+ this.minContentWidth = 1 <= min ? min : 0;
+ this.maxContentWidth = 1 <= max ? max : AUTO;
+ delete this.boxSizingOffsetLR;
+ };
+
+ // Height
+ if( style.tpbtHeight ? allowH !== AUTO : !style.autoHeight && ( allowH !== AUTO || !style.prctHeight ) ){
+ if( style.tpbtHeight ){
+ contentH = allowH - calc( styles[ ATTRS.top ], allowH ) - calc( styles[ ATTRS.bottom ], allowH );
+ } else {
+ contentH = BasicLayoutManager.finalValue( styles[ ATTRS.height ], styles[ ATTRS.minHeight ], styles[ ATTRS.maxHeight ], allowH );
+ };
+ allowSize = styles[ ATTRS.pageBox ] === true ? allowH : allowW;
+ paddingT = calc( styles[ ATTRS.padding + 0 ], allowSize );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して
+ paddingB = calc( styles[ ATTRS.padding + 2 ], allowSize );
+ borderT = styles[ ATTRS.border + 0 ];
+ borderB = styles[ ATTRS.border + 2 ];
+ marginT = calc( styles[ ATTRS.margin + 0 ], allowSize );// marginTRBL の % 指定は 最大幅に対して TB でも幅に対して
+ marginB = calc( styles[ ATTRS.margin + 2 ], allowSize );
+ this.boxHeight = contentH;
+ boxMinus = 0;
+ switch( box ){
+ case 3 : // margin-box
+ boxMinus = - marginT - marginR;
+ case 2 : // border-box
+ boxMinus -= borderT + borderR;
+ case 1 : // padding-box
+ boxMinus -= paddingT + paddingR;
+ // case 0 : // content-box
+ };
+ this.contentT = marginT + borderT + paddingT;
+ this.conetntB = marginB + borderB + paddingB;
+ this.contentHeight = contentH + boxMinus;
+ this.boxSizingOffsetTB = boxMinus;
+ } else {
+ this.boxHeight = this.contentHeight = AUTO;
+ min = styles[ ATTRS.minHeight ];
+ max = styles[ ATTRS.maxHeight ];
+ this.minContentHeight = 1 <= min ? min : 0;
+ this.maxContentHeight = 1 <= max ? max : AUTO;
+ delete this.boxSizingOffsetTB;
};
- this.contentX = marginL + borderL + paddingL;
- this.contentY = marginT + borderT + paddingT;
- this.contentWidth = contentW;
- this.contentHeight = contentH;
- this.autoHeight = h === AUTO;
- this.autoWidth = w === AUTO;
- this.autoSize = this.autoWidth || this.autoHeight;
} else {
this.boxWidth = this.contentWidth = allowW;
this.boxHeight = this.contentHeight = allowH;
- delete this.contentX;
- delete this.contentY;
- delete this.autoSize;
- delete this.autoWidth;
- delete this.autoHeight;
+ delete this.minContentHeight;
+ delete this.maxContentHeight;
+ delete this.contentL;
+ delete this.contentT;
+ delete this.contentR;
+ delete this.contentB;
+ };
+ },
+ /**
+ * 自身のコンテンツサイズを元に AUTO な width, height を確定していく
+ */
+ postMesure : function(){
+ var style = this.__style,
+ styles, calc, box,
+ contentW, contentH, w, h
+ contentSize, contentPlus;
+ if( style ){
+ styles = style.data;
+ calc = BasicLayoutManager.advancedCalcValue;
+ contentW = this.contentWidth;
+ box = styles[ ATTRS.sizing ];
+
+ // Width
+ if( this.boxWidth === AUTO ){
+ paddingR = calc( styles[ ATTRS.padding + 1 ], contentW );
+ paddingL = calc( styles[ ATTRS.padding + 3 ], contentW );
+ borderR = styles[ ATTRS.border + 1 ];
+ borderL = styles[ ATTRS.border + 3 ];
+ marginR = calc( styles[ ATTRS.margin + 1 ], contentW );
+ marginL = calc( styles[ ATTRS.margin + 3 ], contentW );
+ contentPlus = 0;
+ switch( box ){
+ case 3 : // margin-box
+ contentPlus = ( marginR + marginL );
+ case 2 : // border-box
+ contentPlus += ( borderR + borderL );
+ case 1 : // padding-box
+ contentPlus += ( paddingR + paddingL );
+ // case 0 : // content-box
+ };
+ this.contentWidth = contentW;
+ contentW += contentPlus;
+ if( !style.ltrtWidth ){
+ min = styles[ ATTRS.minWidth ];
+ max = styles[ ATTRS.maxWidth ];
+ if( contentW < min && 1 <= min && contentPlus < min ){
+ this.contentWidth = min - contentPlus;
+ } else
+ if( max < contentW && 1 <= max && contentPlus < max ){
+ this.contentWidth = max - contentPlus;
+ };
+ };
+ this.contentL = marginL + borderL + paddingL;
+ this.contentR = marginR + borderR + paddingR;
+ this.boxWidth = this.contentWidth + this.contentL + this.contentR;
+ };
+ // Height
+ if( this.boxHeight === AUTO ){
+ contentH = this.contentHeight;
+ contentSize = styles[ ATTRS.pageBox ] === true ? contentH : contentW;
+ paddingT = calc( styles[ ATTRS.padding + 0 ], contentSize );// paddingTRBL の % 指定は 最大幅に対して TB でも幅に対して
+ paddingB = calc( styles[ ATTRS.padding + 2 ], contentSize );
+ borderT = styles[ ATTRS.border + 0 ];
+ borderB = styles[ ATTRS.border + 2 ];
+ marginT = calc( styles[ ATTRS.margin + 0 ], contentSize );// marginTRBL の % 指定は 最大幅に対して TB でも幅に対して
+ marginB = calc( styles[ ATTRS.margin + 2 ], contentSize );
+ contentPlus = 0;
+ switch( box ){
+ case 3 : // margin-box
+ contentPlus = ( marginT + marginB );
+ case 2 : // border-box
+ contentPlus += ( borderT + borderB );
+ case 1 : // padding-box
+ contentPlus += ( paddingT + paddingB );
+ // case 0 : // content-box
+ };
+ this.contentHeight = contentH;
+ contentH += contentPlus;
+ if( !style.tpbtHeight ){
+ min = styles[ ATTRS.minHeight ];
+ max = styles[ ATTRS.maxHeight ];
+ if( contentH < min && 1 <= min && contentPlus < min ){
+ this.contentHeight = min - contentPlus;
+ } else
+ if( max < contentH && 1 <= max && contentPlus < max ){
+ this.contentHeight = max - contentPlus;
+ };
+ };
+ this.contentT = marginT + borderT + paddingT;
+ this.contentB = marginB + borderB + paddingB;
+ this.boxHeight = this.contentHeight + this.contentT + this.contentB;
+ };
+ } else {
+ this.boxWidth = this.contentWidth;
+ this.boxHeight = this.contentHeight;
+ delete this.minContentHeight;
+ delete this.maxContentHeight;
+ delete this.contentL;
+ delete this.contentT;
+ delete this.contentR;
+ delete this.contentB;
};
},
addDisplayElement : function( nodeData ){
-
+ // 描画更新リストに追加
},
removeDisplayElement : function( nodeData ){
+ // 描画更新リストに追加
DOM.correct( nodeData.elmWrap );
delete nodeData.elmWrap;
delete nodeData.textNode;
Constructor : function( root, parent ){
Node.newPrivateData( this, LayoutBox.getPrivateData( root ), parent ? LayoutBox.getPrivateData( parent ) : undefined, this );
},
+ content : function( v ){
+ return Node.getPrivateData( this ).content( v );
+ },
style : function( v ){
return Node.getPrivateData( this ).paint( v );
},
OSDN Git Service
