/*
* pettanR peta.apps.js
- * version 0.5.55
+ * version 0.5.57
*
* author:
* itozyun
this.flipV = data.height < 0 ? -1 : 1;
this.flipH = data.width < 0 ? -1 : 1;
this.rPicture = data.picture;
+ this.panelElementID = data.id || -1;
var self = this;
function animeComplete(){
this.elmText = this.$.find( 'td,.speach-inner' ).get( 0 );
this.templete = data.balloon_template_id || data.balloon_template.id;
this.tempName = data.classname;
+ this.panelElementID = data.id || -1;
this.content = '';
var speaches = data.speeches;
for( var i = 0; i < panelElements.length; ++i ){
panelElm = panelElements[ i ];
if( panelElm.balloons ){
+ alert( panelElm.id )
PANEL_ELEMENT_CONTROL.createTextElement( panelElm );
} else
if( panelElm.picture ){
};
function imageToJson( _imageElement, t ){
var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
+ var id = _imageElement.panelElementID;
return [
'{', cr,
+ id !== -1 ? ( '"id": ' + id + ',' + cr ) : '',
'"picture_id": ', _imageElement.realPicture().id, ',', cr,
'"x": ', _imageElement.x, ',', cr,
'"y": ', _imageElement.y, ',', cr,
function balloonToJson( _textElement, t ){
var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
+ var id = _textElement.panelElementID;
+ var sys = _textElement.balloon.src || _textElement.balloon.getPictureID();
return [
'{', cr,
+ id !== -1 ? ( '"id": ' + id + ',' + cr ) : '',
'"speech_balloon_template_id": ', _textElement.templete, ',', cr,
'"classname": "', _textElement.tempName, '",', cr,
'"z": ', _textElement.z + 1, ',', cr,
'"settings": "', _textElement.a, '",', cr,
'"balloons_attributes": {', cr,
'"newb', t, '": {', cr,
- '"system_picture_id": ', _textElement.balloon.src, ',', cr,
+ '"system_picture_id": ', sys, ',', cr,
'"caption": "alt text",', cr,
'"x": ', _textElement.x, ',', cr,
'"y": ', _textElement.y, ',', cr,
/*\r
* pettanR peta.common.js\r
- * version 0.5.56\r
+ * version 0.5.57\r
* \r
* author:\r
* itozyun\r
BalloonClass;\r
\r
if( vectorEnabled === true ){\r
- BalloonClass = function( klass ){\r
+ BalloonClass = function( tmpl, klass ){\r
this.elm = ELM_BALLOON_ORIGIN.cloneNode( true );\r
this.path = this.elm.getElementsByTagName( IS_VML === true ? 'shape' : 'path' )[ 0 ];\r
+ this.tmpl = tmpl;\r
this.klass = klass;\r
this.getPath = klass.getPath;\r
};\r
BalloonClass.prototype = {\r
elm : null,\r
path : null,\r
+ tmpl : null,\r
klass : null,\r
getPath : null,\r
args : null,\r
update : IS_VML === true ?\r
- ( function( w, h, a /* w, h [, angle, ,,, ] */ ){\r
- var w = arguments[ 0 ],\r
- h = arguments[ 1 ];\r
+ ( function( w, h, a /* [ ,,, ] */ ){\r
var path = this.getPath.apply( this.klass, arguments );\r
if( !path ) return false;\r
+ this.args = Util.copyArray( srguments );\r
this.a = a;\r
path = /* SVG2VML */ path;\r
this.path.style.width = w + 'px';\r
// this.elm.style.marginTop = _tailY < 0 ? floor( ( 60 + _tailY) / 10 ) : 10;\r
// this.elm.style.marginLeft = _tailX < 0 ? floor( ( 60 + _tailX) / 10 ) : 10;\r
}) :\r
- ( function( w, h, a /* w, h [, angle, ,,, ] */ ){\r
- var w = arguments[ 0 ],\r
- h = arguments[ 1 ],\r
- d = this.getPath.apply( this.klass, arguments );\r
+ ( function( w, h, a /* [ ,,, ] */ ){\r
+ var d = this.getPath.apply( this.klass, arguments );\r
if( !d ) return false;\r
+ this.args = Util.copyArray( arguments );\r
this.a = a;\r
this.elm.setAttribute( 'width', w );\r
this.elm.setAttribute( 'height', h );\r
this.path.setAttribute( 'd', d );\r
}),\r
+ getPictureID : function(){\r
+ return getPictureID.apply( this.tmpl, this.args );\r
+ },\r
destroy : function(){\r
this.elm.parentNode && this.elm.parentNode.removeChild( this.elm );\r
delete this.elm;\r
delete this.path;\r
}\r
};\r
- } else {\r
- BalloonClass = function( klass ){\r
- // templete の vector の有無\r
- this.elm = document.createElement( 'img' ); // pettanr.imageに変更\r
- this.klass = klass;\r
- this.getPictureID = klass.getPictureID;\r
- };\r
- BalloonClass.prototype = {\r
- elm : null,\r
- klass : null,\r
- getPictureID : null,\r
- args : null,\r
- update : function( w, h, a /* w, h [, angle, ,,, ] */ ){\r
- var id = this.getPictureID.aplly( this.klass, arguments );\r
- if( id !== 0 && !id ) return false;\r
- this.a = a;\r
- this.elm.src = PICTURE_PATH + id + '.gif';\r
- },\r
- destroy : function(){\r
- this.elm.parentNode && this.elm.parentNode.removeChild( this.elm );\r
- }\r
- };\r
};\r
\r
/* js を持たず ハッシュに格納したデータと 1枚以上の system picture から描画を行う\r
* http://sourceforge.jp/projects/pettanr/wiki/HowToMakeSpeechBalloon\r
*/\r
var NonVectorBalloonClass = function( templete ){\r
- this.elm = document.createElement( 'img' ); // pettanr.imageに変更\r
- this.size = this.elm.style;\r
- //this.templete = templete;\r
- //this.speech = templete.speech_template_attributes;\r
- //this.defaultW = templete.default_width;\r
- //this.defaultH = templete.default_height;\r
- //this.sizeCount = templete.size_count;\r
- var sb = templete.speech_balloon;\r
- var v, p;\r
- \r
- this.wOffset = sb.width_offset;\r
- this.hOffset = sb.height_offset;\r
- this.wStep = sb.width_step;\r
- this.hStep = sb.height_step;\r
-\r
- // 2013.3.31 itozyun's memo\r
- // 以下の使いやすく加工する処理は pettanr.balloon.register() 内に移動してもよさそう\r
- // new TempleteClass( templeteJson );\r
- // NonVectorBalloon.templete.defaultW みたいにアクセス\r
- if( sb.size_count && 1 < sb.size_count ){\r
- this.picIDs = []; // system picture id list\r
- for( p in templete ){\r
- if( p === 'speech_balloon' ) continue;\r
- if( '' + parseInt( p ) === p ) continue;\r
- v = templete[ p ];\r
- this.picIDs[ this.picIDs.length ] = v.balloon.system_picture_id;\r
- };\r
- if( !this.rOffset ) return;\r
- // tail\r
- //\r
- } else\r
- if( sb.r_offset && sb.r_step ){\r
- this.rOffset = sb.r_offset;\r
- this.rSteps = sb.r_step;\r
- this.tailIDs = [];\r
- for( p in templete ){\r
- if( '' + parseInt( p ) !== p ) continue;\r
- v = templete[ p ];\r
- this.tailIDs[ this.tailIDs.length ] = v.balloon.system_picture_id;\r
- };\r
- } else {\r
- for( p in templete ){\r
- if( p === 'speech_balloon' ) continue;\r
- if( '' + parseInt( p ) === p ) continue;\r
- v = templete[ p ];\r
- this.picID = v.balloon.system_picture_id;\r
- break;\r
- };\r
- };\r
+ this.elm = document.createElement( 'img' ); // pettanr.imageに変更\r
+ this.size = this.elm.style;\r
+ this.tmpl = templete;\r
};\r
NonVectorBalloonClass.prototype = {\r
- elm : null,\r
- size : null,\r
- templete : null,\r
- args : null,\r
- picIDs : null,\r
- picID : 0,\r
- tailIDs : null,\r
- src : 0,\r
- w : 0,\r
- h : 0,\r
- a : 0,\r
+ elm : null,\r
+ size : null,\r
+ tmpl : null,\r
+ src : 0,\r
+ w : 0,\r
+ h : 0,\r
+ a : 0,\r
update : function( w, h, a /* [, ,,, ] */ ){\r
- var l, id, _w, _h, d;\r
- if( this.picIDs ){\r
- _w = ( w - this.wOffset ) / this.wStep;\r
- _h = ( h - this.hOffset ) / this.hStep;\r
- l = this.picIDs.length - 1;\r
- _w = _w < 0 ? 0 : ( _w > l ? l : _w );\r
- _h = _h < 0 ? 0 : ( _h > l ? l : _h );\r
- id = this.picIDs[ Math.floor( _w > _h ? _w : _h ) ];\r
- // tail\r
- //\r
- } else\r
- if( this.tailIDs ){\r
- this.a = a;\r
- d = this.rSteps;\r
- a = a + d / 2;\r
- id = this.tailIDs[ a < 360 - d / 2 ? Math.floor( a / d ) : 0 ];\r
- } else {\r
- id = this.picID;\r
- };\r
-\r
+ var id = getPictureID.apply( this.tmpl, arguments );\r
if( this.src !== id ){\r
this.elm.src = PICTURE_PATH + id + '.gif';\r
this.src = id;\r
}\r
};\r
\r
+ function getPictureID( w, h, a ){\r
+ // this は templete\r
+ var l, id, _w, _h, d;\r
+ if( this.picIDs ){\r
+ _w = ( w - this.wOffset ) / this.wStep;\r
+ _h = ( h - this.hOffset ) / this.hStep;\r
+ l = this.picIDs.length - 1;\r
+ _w = _w < 0 ? 0 : ( _w > l ? l : _w );\r
+ _h = _h < 0 ? 0 : ( _h > l ? l : _h );\r
+ id = this.picIDs[ Math.floor( _w > _h ? _w : _h ) ];\r
+ // tail\r
+ //\r
+ } else\r
+ if( this.tailIDs ){\r
+ d = this.rSteps;\r
+ a = a + d / 2;\r
+ id = this.tailIDs[ a < 360 - d / 2 ? Math.floor( a / d ) : 0 ];\r
+ } else {\r
+ id = this.picID;\r
+ };\r
+ return id;\r
+ };\r
+ \r
return {\r
/**\r
* balloon_templetes.json 取得時に呼ばれる\r
*/\r
register : function( id, name, templete ){\r
templete = $.parseJSON( templete );\r
+\r
+ var tmpl = {},\r
+ sb = templete.speech_balloon,\r
+ p;\r
+ \r
+ tmpl.wOffset = sb.width_offset;\r
+ tmpl.hOffset = sb.height_offset;\r
+ tmpl.wStep = sb.width_step;\r
+ tmpl.hStep = sb.height_step;\r
+\r
+ if( sb.size_count && 1 < sb.size_count ){\r
+ tmpl.picIDs = []; // system picture id list\r
+ for( p in templete ){\r
+ if( p === 'speech_balloon' ) continue;\r
+ if( '' + parseInt( p ) === p ) continue;\r
+ tmpl.picIDs[ tmpl.picIDs.length ] = templete[ p ].balloon.system_picture_id;\r
+ };\r
+ if( !tmpl.rOffset ) return;\r
+ // tail\r
+ //\r
+ } else\r
+ if( sb.r_offset && sb.r_step ){\r
+ tmpl.rOffset = sb.r_offset;\r
+ tmpl.rSteps = sb.r_step;\r
+ tmpl.tailIDs = [];\r
+ for( p in templete ){\r
+ if( '' + parseInt( p ) !== p ) continue;\r
+ tmpl.tailIDs[ tmpl.tailIDs.length ] = templete[ p ].balloon.system_picture_id;\r
+ };\r
+ tmpl.picID = Math.min.apply( null, tmpl.tailIDs );\r
+ } else {\r
+ for( p in templete ){\r
+ if( p === 'speech_balloon' ) continue;\r
+ if( '' + parseInt( p ) === p ) continue;\r
+ tmpl.picID = templete[ p ].balloon.system_picture_id;\r
+ break;\r
+ };\r
+ };\r
+\r
if( !TEMPLETES[ name ] ){\r
- TEMPLETES[ name ] = templete;\r
- TEMPLETES[ id ] = templete;\r
- if( name in window ) templete.classname = name;\r
+ TEMPLETES[ name ] = tmpl;\r
+ TEMPLETES[ id ] = tmpl;\r
+ if( name in window ) tmpl.classname = name;\r
};\r
},\r
create : function( idOrName, w, h, settings ){\r
args = settings.split( ',' ),\r
l = args.length,\r
i = 0, v;\r
- if( tmpl.classname ){\r
- ret = new BalloonClass( window[ tmpl.classname ] );\r
+ if( tmpl.classname && vectorEnabled === true ){\r
+ ret = new BalloonClass( tmpl, window[ tmpl.classname ] );\r
} else {\r
ret = new NonVectorBalloonClass( tmpl );\r
};\r
cround( endX + PADDING_LEFT ), _, cround( endY + PADDING_TOP ),\r
'z'\r
].join( ' ' );\r
- },\r
- getPictureID : function( w, h, a ){\r
- \r
}\r
};\r
\r