OSDN Git Service

Client is version 0.5.56, working svg circle.
[pettanr/pettanr.git] / app / assets / javascripts / peta-common.js
index 0458082..fee0491 100644 (file)
@@ -1,6 +1,6 @@
 /*\r
  * pettanR peta.common.js\r
- *   version 0.5.52\r
+ *   version 0.5.56\r
  * \r
  *   author:\r
  *     itozyun\r
@@ -102,6 +102,7 @@ pettanr.CONST = ( function(){
                SYSTEM_PICTURE_PATH           : ( SERVER_SUPPORT === false ? RELATIVE : PETTANR_ROOT_PATH ) + 'system_pictures\/',\r
                CREATE_COMIC_JS               : SERVER_SUPPORT === false ? 'js\/create_new_comic.js' : PETTANR_ROOT_PATH + 'comics\/new.js',\r
                CREATE_PANEL_JS               : SERVER_SUPPORT === false ? 'js\/create_new_panel.js' : PETTANR_ROOT_PATH + 'panels\/new.js',\r
+               UPDATE_PANEL_JS               : SERVER_SUPPORT === false ? 'js\/edit_panel.js?id=' : PETTANR_ROOT_PATH + 'panels\/',\r
                UPLOAD_PICTURE_JS             : SERVER_SUPPORT === false ? 'js\/upload_picture.js' : PETTANR_ROOT_PATH + 'original_pictures\/new.js',\r
                REGISTER_ARTIST_JS            : SERVER_SUPPORT === false ? 'js\/register_artist.js' : PETTANR_ROOT_PATH + 'artists\/new.js',\r
                SERVER_SUPPORT                : SERVER_SUPPORT,\r
@@ -164,7 +165,7 @@ pettanr.balloon = ( function() {
                round      = Math.round,\r
                floor      = Math.floor,\r
                TARGET     = TAIL_WIDTH * TAIL_WIDTH,\r
-               isFinit    = Type.isFinite,\r
+               isFinite   = Type.isFinite,\r
                ACCURACY   = 1, // 有効少数桁      \r
                cround     = function( v, r ){\r
                                                r = r || ACCURACY;\r
@@ -184,8 +185,8 @@ pettanr.balloon = ( function() {
                h     : 0,\r
                a     : 0,\r
                resize : function ( _a, _w, _h ){\r
-                       this.w  = isFinit( _w ) === true ? _w - PADDING_TOP  * 2 : this.w;\r
-                       this.h  = isFinit( _h ) === true ? _h - PADDING_LEFT * 2 : this.h;\r
+                       this.w  = isFinite( _w ) === true ? _w - PADDING_TOP  * 2 : this.w;\r
+                       this.h  = isFinite( _h ) === true ? _h - PADDING_LEFT * 2 : this.h;\r
                        // ie6 でリサイズが反応しない対策\r
                        if( vectorEnabled === false && UA.isIE === true && UA.ieVersion < 7 ){\r
                                var parent = this.elm.parentNode;\r
@@ -195,7 +196,7 @@ pettanr.balloon = ( function() {
                        this.angle( _a );\r
                },\r
                angle : function( _a ){\r
-                       if( isFinit( _a ) === true ){\r
+                       if( isFinite( _a ) === true ){\r
                                this.a = _a;\r
                                if( vectorEnabled === false ){\r
                                        this.elm.src = pettanr.balloon.getBalloonUrl( this.w, this.h, _a );\r
@@ -331,7 +332,7 @@ pettanr.newBalloon = ( function(){
                                        shape.strokecolor  = "black";\r
                                        shape.strokeweight = STROKE_WIDTH;\r
                                        shape.fillcolor    = "white";\r
-                                       ret.appendChild( shape);\r
+                                       ret.appendChild( shape );\r
                                } else {\r
                                        var kSVGNS = 'http://www.w3.org/2000/svg';\r
                                        // http://modernizr.com/downloads/modernizr.js\r
@@ -370,11 +371,12 @@ pettanr.newBalloon = ( function(){
                        getPath : null,\r
                        args    : null,\r
                        update  : IS_VML === true ?\r
-                               function( /* w, h [, angle, ,,, ] */ ){\r
+                               ( function( w, h, a /* w, h [, angle, ,,, ] */ ){\r
                                        var w = arguments[ 0 ],\r
                                                h = arguments[ 1 ];\r
-                                       var path = this.getPath.call( this.klass, arguments );\r
+                                       var path = this.getPath.apply( this.klass, arguments );\r
                                        if( !path ) return false;\r
+                                       this.a = a;\r
                                        path = /* SVG2VML */ path;\r
                                        this.path.style.width  = w + 'px';\r
                                        this.path.style.height = h + 'px';\r
@@ -382,16 +384,17 @@ pettanr.newBalloon = ( function(){
                                        this.path.path         = path;\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 [, angle, ,,, ] */ ){\r
+                               }) :\r
+                               ( function( w, h, a /* w, h [, angle, ,,, ] */ ){\r
                                        var w = arguments[ 0 ],\r
                                                h = arguments[ 1 ],\r
-                                               d = this.getPath.call( this.klass, arguments );\r
+                                               d = this.getPath.apply( this.klass, arguments );\r
                                        if( !d ) return false;\r
-                                       this.elm.width  = w + PADDING_LEFT * 2;\r
-                                       this.elm.height = h + PADDING_TOP  * 2;\r
+                                       this.a = a;\r
+                                       this.elm.setAttribute( 'width',  w );\r
+                                       this.elm.setAttribute( 'height', h );\r
                                        this.path.setAttribute( 'd', d );\r
-                               },\r
+                               }),\r
                        destroy : function(){\r
                                this.elm.parentNode && this.elm.parentNode.removeChild( this.elm );\r
                                delete this.elm;\r
@@ -410,9 +413,10 @@ pettanr.newBalloon = ( function(){
                        klass        : null,\r
                        getPictureID : null,\r
                        args         : null,\r
-                       update : function( /* w, h [, angle, ,,, ] */ ){\r
-                               var id = this.getPictureID.call( this.klass, arguments );\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
@@ -432,29 +436,44 @@ pettanr.newBalloon = ( function(){
                //this.defaultW  = templete.default_width;\r
                //this.defaultH  = templete.default_height;\r
                //this.sizeCount = templete.size_count;\r
-               this.wOffset   = templete.speech_balloon.width_offset;\r
-               this.hOffset   = templete.speech_balloon.height_offset;\r
-               this.wStep     = templete.speech_balloon.width_step;\r
-               this.hStep     = templete.speech_balloon.height_step;\r
-               // r_offset\r
-               // r_steps\r
+               var sb  = templete.speech_balloon;\r
+               var v, p;\r
                \r
-               var obj = templete, v, p;\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( templete.speech_balloon.size_count && 1 < templete.speech_balloon.size_count ){\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
-                               v = obj[ p ];\r
+                               if( '' + parseInt( p ) === p ) continue;\r
+                               v = templete[ p ];\r
                                this.picIDs[ this.picIDs.length ] = v.balloon.system_picture_id;\r
-                       };                      \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 obj ){\r
+                       for( p in templete ){\r
                                if( p === 'speech_balloon' ) continue;\r
-                               v = obj[ p ];\r
+                               if( '' + parseInt( p ) === p ) continue;\r
+                               v = templete[ p ];\r
                                this.picID = v.balloon.system_picture_id;\r
                                break;\r
                        };\r
@@ -467,11 +486,13 @@ pettanr.newBalloon = ( function(){
                args     : null,\r
                picIDs   : null,\r
                picID    : 0,\r
+               tailIDs  : null,\r
                src      : 0,\r
                w        : 0,\r
                h        : 0,\r
-               update : function( w, h /* [, angle, ,,, ] */ ){\r
-                       var l, id, _w, _h;\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
@@ -479,9 +500,18 @@ pettanr.newBalloon = ( function(){
                                _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
                        if( this.src !== id ){\r
                                this.elm.src = PICTURE_PATH + id + '.gif';\r
                                this.src = id;\r
@@ -510,16 +540,27 @@ pettanr.newBalloon = ( function(){
                        if( !TEMPLETES[ name ] ){\r
                                TEMPLETES[ name ] = templete;\r
                                TEMPLETES[ id ]   = templete;\r
+                               if( name in window ) templete.classname = name;\r
                        };\r
                },\r
-               create : function( idOrName, w, h /* [, angle, ,,, ] */ ){\r
-                       var ret;\r
-                       if( Type.isString( idOrName ) === true && idOrName in window ){\r
-                               ret = new BalloonClass( window[ idOrName ] );\r
+               create : function( idOrName, w, h, settings ){\r
+                       var ret,\r
+                               tmpl = TEMPLETES[ idOrName ],\r
+                               args = settings.split( ',' ),\r
+                               l    = args.length,\r
+                               i    = 0, v;\r
+                       if( tmpl.classname ){\r
+                               ret = new BalloonClass( window[ tmpl.classname ] );\r
                        } else {\r
-                               ret = new NonVectorBalloonClass( TEMPLETES[ idOrName ] );\r
+                               ret = new NonVectorBalloonClass( tmpl );\r
+                       };\r
+                       for( ; i < l; ++i ){\r
+                               v = args[ i ];\r
+                               args[ i ] = parseInt( v );\r
                        };\r
-                       ret.update( w, h /* [, angle, ,,, ] */ );\r
+                       args.unshift( h );\r
+                       args.unshift( w );\r
+                       ret.update.apply( ret, args );\r
                        return ret;\r
                },\r
                isTemplete : function( templete ){\r
@@ -531,6 +572,76 @@ pettanr.newBalloon = ( function(){
        }\r
 })();\r
 \r
+\r
+/**\r
+ * Balloon \r
+ */\r
+var Circle = {\r
+       getPath : function( w, h, a ){\r
+               var TAIL_WIDTH   = 6,\r
+                       TAIL_HEIGHT  = 10,\r
+                       PADDING_TOP  = TAIL_HEIGHT,\r
+                       PADDING_LEFT = TAIL_HEIGHT,\r
+                       TARGET       = TAIL_WIDTH * TAIL_WIDTH,\r
+                       ACCURACY     = 1, // 有効少数桁    ;\r
+                       MATH         = Math,\r
+                       DEG_TO_RAD   = MATH.PI / 180,\r
+                       cos          = MATH.cos,\r
+                       sin          = MATH.sin,\r
+                       pow          = MATH.pow,\r
+                       round        = MATH.round,\r
+                       cround       = function( v, r ){\r
+                               r = r || ACCURACY;\r
+                               return round( v * pow( 10.0, r )) / pow( 10.0, r );\r
+                       },\r
+                       rx           = ( w - PADDING_LEFT * 2 ) / 2,\r
+                       ry           = ( h - PADDING_TOP  * 2 ) / 2,\r
+                       _            = ',',\r
+                       tailRad      = a * DEG_TO_RAD,\r
+                       tailX        = rx + ( rx + TAIL_HEIGHT ) * sin( tailRad ),\r
+                       tailY        = ry - ( ry + TAIL_HEIGHT ) * cos( tailRad ),\r
+                       tailDeg      = 0,\r
+                       d, startRad, endRad,\r
+                       startX, startY, endX, endY,\r
+                       _startX, _startY, _endX, _endY;\r
+               /*\r
+                * tailの太さをTAIL_WIDTHに一致させるため、角度を絞りつつ計算\r
+                */\r
+               for( var i = 45; i > 0.01; i /= 2 ){\r
+                       d = ( tailDeg + i ) / 2;\r
+                       startRad = ( a + d ) * DEG_TO_RAD;\r
+                       endRad   = ( a - d ) * DEG_TO_RAD;\r
+                       \r
+                       _startX  = rx + sin( startRad ) * rx;\r
+                       _startY  = ry - cos( startRad ) * ry;\r
+                       _endX    = rx + sin( endRad ) * rx;\r
+                       _endY    = ry - cos( endRad ) * ry;     //円弧上のY位置=円中心Y+sin(角度×PI÷180)×円半径\r
+                               \r
+                       if( pow( ( _startX - _endX ), 2 ) + pow( ( _startY - _endY ), 2 ) < TARGET ){\r
+                               tailDeg += i;\r
+                               startX  = _startX;\r
+                               startY  = _startY;\r
+                               endX    = _endX;\r
+                               endY    = _endY;\r
+                       };\r
+               };\r
+\r
+               return [\r
+                       'M', cround( tailX + PADDING_LEFT  ), _, cround( tailY  + PADDING_TOP ),\r
+                       'L', cround( startX + PADDING_LEFT ), _, cround( startY + PADDING_TOP ),\r
+                       'A', rx, _, ry,\r
+                       '0 1 1',                        // flag\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
+\r
+\r
 /* ----------------------------------------\r
  *  pettanr.image\r
  *  \r