OSDN Git Service

client is version0.4.22, update pettanr.outputConsole.
[pettanr/pettanr.git] / public / assets / work.js
index 8433a9a..733d313 100644 (file)
@@ -1,6 +1,6 @@
 /*\r
  * pettanR work.js\r
- *   version 0.4.21\r
+ *   version 0.4.22\r
  *   \r
  * author:\r
  *   itozyun\r
@@ -70,7 +70,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
        var PANEL_ELEMENT_TYPE_IMAGE = 0,\r
                PANEL_ELEMENT_TYPE_TEXT = 1,\r
                MOUSE_LISTENER_ARRAY = [],\r
-               COMIC_ELEMENT_ARRAY = [],\r
+               PANEL_ELEMENT_ARRAY = [],\r
                ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'),\r
                MIN_PANEL_HEIGHT = 20,\r
                MIN_ELEMENT_SIZE = 19,\r
@@ -82,6 +82,9 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                currentCursor = '',\r
                instance = this,\r
                option,\r
+               comicID = -1,\r
+               panelID = -1,\r
+               panelTimming = -1,\r
                log;\r
 \r
 /* ----------------------------------------\r
@@ -181,8 +184,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        ELM_BAR.appendChild( ELM_WRAPPER);\r
                        \r
                        function onClick( e){\r
-                               var that = this,\r
-                                       i = pettanr.util.getChildIndex( this.parentNode, this);\r
+                               var i = pettanr.util.getChildIndex( this.parentNode, this);\r
                                i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i]( i);\r
                                e.stopPropagation();\r
                                return false;\r
@@ -421,15 +423,26 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        updated = false;\r
                \r
                function quit(){\r
-                       // 本来は os.application.close();\r
                        pettanr.editor.shutdown();\r
                }\r
                \r
                function outputAsHtml(){\r
-                       pettanr.outputConsole.bootInOverlay( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));\r
+                       pettanr.outputConsole.bootInOverlay(\r
+                               pettanr.outputConsole.HTML,\r
+                               comicID, panelID, panelTimming,\r
+                               PANEL_CONTROL.w(), PANEL_CONTROL.h(),\r
+                               1, // border, BackgroundImage\r
+                               PANEL_ELEMENT_ARRAY\r
+                       );\r
                }\r
                function outputAsJsonString(){\r
-                       pettanr.outputConsole.bootInOverlay( COMIC_ELEMENT_CONTROL.getAsJsonString());\r
+                       pettanr.outputConsole.bootInOverlay(\r
+                               pettanr.outputConsole.JSON,\r
+                               comicID, panelID, panelTimming,\r
+                               PANEL_CONTROL.w(), PANEL_CONTROL.h(),\r
+                               1, // border, BackgroundImage\r
+                               PANEL_ELEMENT_ARRAY\r
+                       );\r
                }\r
                return {\r
                        open: function(){},\r
@@ -1261,6 +1274,12 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        y: function(){\r
                                return panelY;\r
                        },\r
+                       w: function(){\r
+                               return panelW;\r
+                       },\r
+                       h: function(){\r
+                               return panelH;\r
+                       },\r
                        resize: function( isResizerTopAction, _x, _y, _w, _h){\r
                                panelX = _x !== undefined ? _x : panelX;\r
                                panelY = _y !== undefined ? _y : panelY;\r
@@ -1444,7 +1463,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, true], [ currentElement, false]);\r
                        var _z = currentElement.z;\r
                        LAYER_BACK_BUTTON.visible( _z > 0);\r
-                       LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);\r
+                       LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1);\r
                }\r
                function layerForward(){\r
                        if( currentElement === null) return;\r
@@ -1453,7 +1472,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, false], [ currentElement, true]);\r
                        var _z = currentElement.z;\r
                        LAYER_BACK_BUTTON.visible( _z > 0);\r
-                       LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);\r
+                       LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1);\r
                }\r
                function del(){\r
                        if( currentElement === null) return;\r
@@ -1518,7 +1537,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                consoleX = Math.floor( ( _w -consoleWidth) /2);\r
                                \r
                                LAYER_BACK_BUTTON.visible( _z > 0);\r
-                               LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);\r
+                               LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1);\r
                                DELETE_BUTTON.visible( true);\r
                                EDIT_BUTTON.visible( _currentType === PANEL_ELEMENT_TYPE_TEXT);\r
                                CHANGE_BUTTON.visible( false);\r
@@ -2113,9 +2132,9 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        busy: function(){\r
                                return currentOperator !== null;\r
                        },\r
-                       hitTest: function( _mouseX, _mouseY, _comicElement ){\r
+                       hitTest: function( _mouseX, _mouseY, _panelElement ){\r
                                var _x, _y, _w, _h;\r
-                               if( _comicElement === currentElement){\r
+                               if( _panelElement === currentElement){\r
                                        var _consoleX = CONSOLE_CONTROLER.x();\r
                                        _x = currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA;\r
                                        _y = currenty -HIT_AREA;\r
@@ -2124,10 +2143,10 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                        var _consoleY = CONSOLE_CONTROLER.y();\r
                                        _h = ( _consoleY < currenth ? currenth : _consoleY +CONSOLE_CONTROLER.h()) +HIT_AREA *2;\r
                                } else {\r
-                                       _x = _comicElement.x -HIT_AREA;\r
-                                       _y = _comicElement.y -HIT_AREA;\r
-                                       _w = _comicElement.w +HIT_AREA *2;\r
-                                       _h = _comicElement.h +HIT_AREA *2;\r
+                                       _x = _panelElement.x -HIT_AREA;\r
+                                       _y = _panelElement.y -HIT_AREA;\r
+                                       _w = _panelElement.w +HIT_AREA *2;\r
+                                       _h = _panelElement.h +HIT_AREA *2;\r
                                }\r
                                log.html( [ _x, _y, _w, _h ].join( ' ') );\r
                                return _x <= _mouseX && _mouseX <= _x + _w && _y <= _mouseY && _mouseY <= _y + _h;\r
@@ -2200,12 +2219,12 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        HIT_AREA = MOUSE_HIT_AREA,\r
                        w = data.width,\r
                        h = data.height,\r
-                       x, y, z, timing,\r
+                       x, y, z,\r
                        flipH = w < 0 ? -1 : 1,\r
                        flipV = h < 0 ? -1 : 1,\r
-                       resourcePicture,\r
-                       actualW,\r
-                       actualH,\r
+                       resourcePicture = data.resource_picture,\r
+                       actualW = data.resource_picture.width,\r
+                       actualH = data.resource_picture.height,\r
                        reversibleImage = null,\r
                        instance = this;\r
                w = Math.floor( w );\r
@@ -2221,9 +2240,9 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        actualH = _resourcePicture.height;\r
                        \r
                        var _reversibleImage = pettanr.image.createReversibleImage( \r
-                               [ pettanr.CONST.RESOURCE_PICTURE_PATH, _resourcePicture.id, '.', _resourcePicture.ext ].join(''),\r
-                               flipH * w, flipV * h\r
-                       );\r
+                                       [ pettanr.CONST.RESOURCE_PICTURE_PATH, _resourcePicture.id, '.', _resourcePicture.ext ].join(''),\r
+                                       flipH * w, flipV * h\r
+                               );\r
                        if( reversibleImage !== null){\r
                                JQ_WRAPPER.children( reversibleImage.elm ).replaceWith( _reversibleImage.elm );\r
                                reversibleImage.destroy();\r
@@ -2239,7 +2258,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                //this.w = w;\r
                //this.h = h;                                   \r
                this.z = data.z;\r
-               this.timing = timing;\r
+               this.timing = data.t;\r
                this.init = function(){\r
                        updateResourcePicture( data.resource_picture );\r
                        instance.resize( data.x, data.y, data.width, data.height );\r
@@ -2288,36 +2307,6 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        flipV = _flipV !== undefined ? _flipV : flipV;\r
                        instance.resize( _x, _y, _w, _h, true);\r
                }\r
-               this.getAsHTML = function( isAbsoluteUrl, isXHTML ){\r
-                       return [\r
-                               '<img ',\r
-                                       'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
-                                       'width="', w, '" ',\r
-                                       'height="', h, '" ',\r
-                                       'style="',                                                                      \r
-                                               'left:', x, 'px;',\r
-                                               'top:', y, 'px;',\r
-                                               'z-index:', this.z, ';',\r
-                                       '"',\r
-                               isXHTML !== true ? '>' : ' \/>'\r
-                       ].join( '');\r
-               }\r
-               this.getAsJsonString = function(){\r
-                       var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
-                       return [\r
-                               '"new', this.timing, '": {', cr,\r
-                                       '"resource_picture_id": 1,', cr,\r
-                                       '"x": ', x, ',', cr,\r
-                                       '"y": ', y, ',', cr,\r
-                                       '"z": ', this.z, ',', cr,\r
-                                       '"width": ', w, ',', cr,\r
-                                       '"height": ', h, ',', cr,\r
-                                       '"flipv": ', flipV === true ? 1 : 0, ',', cr,\r
-                                       '"fliph": ', flipH === true ? 1 : 0, ',', cr,\r
-                                       '"t": ', this.timing, cr,\r
-                               '}'\r
-                       ].join( '');\r
-               }\r
                this.destroy = function(){\r
                        reversibleImage.destroy();\r
                        JQ_WRAPPER.remove();\r
@@ -2363,7 +2352,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                        return _speachs[ k ].content || '';\r
                                }\r
                                return '';\r
-                       }),\r
+                       })(),\r
                        balloon = pettanr.balloon.createBalloon( data.width, data.height, data.tail, type ),\r
                        x, y, w, h, a,\r
                        instance = this;\r
@@ -2376,13 +2365,13 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                balloon.type( type );\r
                        }\r
                }\r
-               function updateAngle( _a){\r
+               function updateAngle( _a ){\r
                        if( _a !== undefined && a !== _a ){\r
                                a = _a !== undefined ? _a : a;\r
                                balloon.angle( a );\r
                        }\r
                }\r
-               function updateText( _text){\r
+               function updateText( _text ){\r
                        text = _text || text || '';\r
                        TEXT_ELM.html( text );\r
                }\r
@@ -2400,7 +2389,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        instance.resize( data.x, data.y, data.width, data.height, data.tail );\r
                        delete instance.init;\r
                }\r
-               this.angle = function( _a){\r
+               this.angle = function( _a ){\r
                        _a !== undefined && instance.resize( undefined, undefined, undefined, undefined, _a);\r
                        return a;\r
                }\r
@@ -2411,6 +2400,9 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        }\r
                        return text;\r
                }\r
+               this.getBalloonURL = function(){\r
+                       return balloon.getURL();\r
+               }\r
                this.resize = function( _x, _y, _w, _h, _a, animate ){\r
                        instance.x = x = _x !== undefined ? _x : x;\r
                        instance.y = y = _y !== undefined ? _y : y;\r
@@ -2439,61 +2431,6 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        balloon = null;\r
                        delete instance.destroy;\r
                }\r
-               this.getAsJSON = function(){\r
-                       \r
-               }\r
-               this.getAsJsonString = function(){\r
-                       var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
-                       return [\r
-                               '"new', this.timing, '": {', cr,\r
-                                       '"balloon_template_id": ', 1, ',', cr,\r
-                                       '"system_picture_id": ', 1, ',', cr,\r
-                                       '"size": ', 1, ',', cr,\r
-                                       '"tail": ', a, ',', cr,\r
-                                       '"x": ', x, ',', cr,\r
-                                       '"y": ', y, ',', cr,\r
-                                       '"z": ', this.z, ',', cr,\r
-                                       '"t": ', this.timing, ',', cr,\r
-                                       '"width": ', w, ',', cr,\r
-                                       '"height": ', h, ',', cr,\r
-                                       '"speaches_attributes": {', cr,\r
-                                               '"newf', this.timing, '": {', cr,\r
-                                               '"content": "', text, '",', cr,\r
-                                                       '"x": ', x, ',', cr,\r
-                                                       '"y": ', y, ',', cr,\r
-                                                       '"t": ', 0, ',', cr,\r
-                                                       '"width": ', w, ',', cr,\r
-                                                       '"height": ', h, cr,\r
-                                               '}', cr,\r
-                                       '}', cr,\r
-                               '}'\r
-                       ].join( '');\r
-               }\r
-               this.getAsHTML = function( isAbsoluteUrl, isXHTML){\r
-                       var url = balloon.getURL();\r
-                       return [\r
-                               '<img ',\r
-                                       'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
-                                       'width="', w, '" ',\r
-                                       'height="', h, '" ',\r
-                                       'style="',                                                                      \r
-                                               'left:', x, 'px;',\r
-                                               'top:', y, 'px;',\r
-                                               'z-index:', this.z, ';',\r
-                                       '"',\r
-                               isXHTML !== true ? '>' : ' \/>',\r
-                               pettanr.LINE_FEED_CODE_TEXTAREA,\r
-                               '<div class="balloon" style="',\r
-                                       'left:', x, 'px;',\r
-                                       'top:', y, 'px;',\r
-                                       'width:', w, 'px;',\r
-                                       'height:', h, 'px;',\r
-                                       'z-index:', this.z,\r
-                               '"><span>', text, '<\/span>', '<\/div>'\r
-                                       \r
-                       ].join( '');\r
-               }\r
-               this.getAsXML = function(){}\r
        }\r
        TextElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_TEXT );\r
 \r
@@ -2521,50 +2458,54 @@ pettanr.editor = pettanr.view.registerApplication( function(){
         * \r
         * append comicElement\r
         * 1. 新しい comicElement の z-position を得る\r
-        * 2. z の同じ comicElementを見つけ、その前に加える。または一番先頭へ。(COMIC_ELEMENT_ARRAY)\r
-        *    zが大きいほど、COMIC_ELEMENT_ARRAYの先頭へ。\r
-        * 3. dom位置は、COMIC_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。\r
+        * 2. z の同じ comicElementを見つけ、その前に加える。または一番先頭へ。(PANEL_ELEMENT_ARRAY)\r
+        *    zが大きいほど、PANEL_ELEMENT_ARRAYの先頭へ。\r
+        * 3. dom位置は、PANEL_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。\r
         * \r
         * \r
         * remove comicElement\r
         * 1. remove\r
         * 2. renumber z\r
         */\r
-               function appendComicElement( _comicElement ) {\r
-                       var z = _comicElement.z,\r
-                               l = COMIC_ELEMENT_ARRAY.length,\r
-                               _jqElm = _comicElement.$.stop().css( {\r
+               function appendComicElement( _panelElement ) {\r
+                       var z = _panelElement.z,\r
+                               l = PANEL_ELEMENT_ARRAY.length,\r
+                               _jqElm = _panelElement.$.stop().css( {\r
                                        filter:         '',\r
                                        opacity:        ''\r
                                });\r
                        if( typeof z !== 'number' || z < 0 || z >= l ){\r
-                               COMIC_ELEMENT_ARRAY.unshift( _comicElement );\r
+                               PANEL_ELEMENT_ARRAY.unshift( _panelElement );\r
                                ELM_CONTAINER.appendChild( _jqElm.get( 0 ));\r
                                _jqElm.fadeIn();\r
+                       } else\r
+                       if( l === 0 ){\r
+                               PANEL_ELEMENT_ARRAY.push( _panelElement );\r
+                               ELM_CONTAINER.appendChild( _jqElm.get( 0 ));\r
                        } else {\r
                                var insertIndex = 0;\r
                                for( var i = 0; i < l; ++i ){\r
-                                       if( COMIC_ELEMENT_ARRAY[ i ].z <= z ){\r
+                                       if( PANEL_ELEMENT_ARRAY[ i ].z <= z ){\r
                                                insertIndex = i;\r
                                                break;\r
                                        }\r
                                }\r
-                               COMIC_ELEMENT_ARRAY[ insertIndex ].$.before( _jqElm.fadeIn() );\r
-                               COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement );\r
+                               PANEL_ELEMENT_ARRAY[ insertIndex ].$.before( _jqElm.fadeIn() );\r
+                               PANEL_ELEMENT_ARRAY.splice( insertIndex, 0, _panelElement );\r
                        }\r
                        renumber();\r
                }\r
-               function removeComicElement( _comicElement ) {\r
-                       var l = COMIC_ELEMENT_ARRAY.length;\r
+               function removeComicElement( _panelElement ) {\r
+                       var l = PANEL_ELEMENT_ARRAY.length;\r
                        for( var i=0; i<l; ++i){\r
-                               if( COMIC_ELEMENT_ARRAY[ i ] === _comicElement ){\r
-                                       COMIC_ELEMENT_ARRAY.splice( i, 1 );\r
+                               if( PANEL_ELEMENT_ARRAY[ i ] === _panelElement ){\r
+                                       PANEL_ELEMENT_ARRAY.splice( i, 1 );\r
                                        renumber();\r
-                                       _comicElement.$.stop().css( {\r
+                                       _panelElement.$.stop().css( {\r
                                                filter:         '',\r
                                                opacity:        ''\r
                                        }).fadeOut( onFadeOut );\r
-                                       currentElement = currentElement === _comicElement ? null : currentElement;\r
+                                       currentElement = currentElement === _panelElement ? null : currentElement;\r
                                        return;\r
                                }\r
                        }\r
@@ -2578,38 +2519,38 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        isAppend === true ? appendComicElement( comicElement ) : removeComicElement( comicElement );\r
                }\r
                /*\r
-                * COMIC_ELEMENT_ARRAY の順番を基準に、zの再計算\r
+                * PANEL_ELEMENT_ARRAY の順番を基準に、zの再計算\r
                 * jqElmの並び替え。\r
                 */\r
                function renumber(){\r
-                       var l = COMIC_ELEMENT_ARRAY.length,\r
-                               _comicElement, jqElm, jqNext;\r
+                       var l = PANEL_ELEMENT_ARRAY.length,\r
+                               _panelElement, jqElm, jqNext;\r
                        for( var i=0; i < l; ++i){\r
-                               _comicElement = COMIC_ELEMENT_ARRAY[ i ];\r
-                               jqElm = _comicElement.$;\r
+                               _panelElement = PANEL_ELEMENT_ARRAY[ i ];\r
+                               jqElm = _panelElement.$;\r
                                jqNext && jqNext.before( jqElm );\r
-                               _comicElement.z = l -i -1;\r
+                               _panelElement.z = l -i -1;\r
                                jqNext = jqElm;\r
                        }\r
                }\r
-               function replaceComicElement( _comicElement, goForward ){\r
-                       // COMIC_ELEMENT_ARRAYの再構築\r
-                       var l = COMIC_ELEMENT_ARRAY.length,\r
+               function replaceComicElement( _panelElement, goForward ){\r
+                       // PANEL_ELEMENT_ARRAYの再構築\r
+                       var l = PANEL_ELEMENT_ARRAY.length,\r
                                i = ( function(){\r
                                        for( var ret = 0; ret < l; ++ret ){\r
-                                               if( COMIC_ELEMENT_ARRAY[ ret] === _comicElement ) return ret;\r
+                                               if( PANEL_ELEMENT_ARRAY[ ret] === _panelElement ) return ret;\r
                                        }\r
                                        return -1;\r
                                })();\r
                        if( i === -1) return false;\r
                        if( goForward === true){\r
                                if( i === 0) return false;\r
-                               COMIC_ELEMENT_ARRAY.splice( i, 1);\r
-                               COMIC_ELEMENT_ARRAY.splice( i -1, 0, _comicElement);\r
+                               PANEL_ELEMENT_ARRAY.splice( i, 1);\r
+                               PANEL_ELEMENT_ARRAY.splice( i -1, 0, _panelElement);\r
                        } else {\r
                                if( i === l -1) return false;\r
-                               COMIC_ELEMENT_ARRAY.splice( i, 1);\r
-                               COMIC_ELEMENT_ARRAY.splice( i +1, 0, _comicElement);\r
+                               PANEL_ELEMENT_ARRAY.splice( i, 1);\r
+                               PANEL_ELEMENT_ARRAY.splice( i +1, 0, _panelElement);\r
                        }\r
                        renumber();\r
                        return true;\r
@@ -2629,8 +2570,8 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        },\r
                        close: function(){\r
                                var _comicElm;\r
-                               while( COMIC_ELEMENT_ARRAY.length > 0){\r
-                                       _comicElm = COMIC_ELEMENT_ARRAY.shift();\r
+                               while( PANEL_ELEMENT_ARRAY.length > 0){\r
+                                       _comicElm = PANEL_ELEMENT_ARRAY.shift();\r
                                        _comicElm.destroy && _comicElm.destroy();\r
                                }\r
                        },\r
@@ -2645,9 +2586,9 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                if( isResizerTopAction === true){\r
                                        var     _shiftX = _panelW -panelW,\r
                                                _shiftY = _panelH -panelH,\r
-                                               l = COMIC_ELEMENT_ARRAY.length;\r
+                                               l = PANEL_ELEMENT_ARRAY.length;\r
                                        for( var i = 0; i < l; i++){\r
-                                               COMIC_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY);\r
+                                               PANEL_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY);\r
                                        }\r
                                }\r
                                panelX = _panelX;\r
@@ -2661,7 +2602,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                ELM_CONTAINER.style.top         = _panelY +'px';\r
                        },\r
                        onMouseMove: function( _mouseX, _mouseY ){\r
-                               var l = COMIC_ELEMENT_ARRAY.length,\r
+                               var l = PANEL_ELEMENT_ARRAY.length,\r
                                        _x = _mouseX -panelX,\r
                                        _y = _mouseY -panelY,\r
                                        _elm = currentElement;\r
@@ -2682,7 +2623,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                        }\r
                                }\r
                                for( var i=0; i<l; i++){\r
-                                       _elm = COMIC_ELEMENT_ARRAY[ i ];\r
+                                       _elm = PANEL_ELEMENT_ARRAY[ i ];\r
                                        // hitTest\r
                                        if( _elm.hitTest( _x, _y ) === true ){\r
                                                _elm.onMouseMove( _x, _y ); // cursor\r
@@ -2729,20 +2670,20 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                                        x:               Math.floor( panelW /2 - data.width /2 ),\r
                                                        y:               Math.floor( panelH /2 - data.height /2 ),\r
                                                        z:               -1,\r
-                                                       t:               COMIC_ELEMENT_ARRAY.length,\r
+                                                       t:               PANEL_ELEMENT_ARRAY.length,\r
                                                        width:           data.width,\r
                                                        height:          data.height\r
                                                }\r
                                        }\r
-                                       var _comicElement = new ImageElementClass( data );\r
-                                       _comicElement.init && _comicElement.init();\r
-                                       appendComicElement( _comicElement );\r
-                                       _comicElement.animate( undefined, undefined, data.width, data.height );\r
-                                       SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true );\r
+                                       var _panelElement = new ImageElementClass( data );\r
+                                       _panelElement.init && _panelElement.init();\r
+                                       appendComicElement( _panelElement );\r
+                                       _panelElement.animate( undefined, undefined, data.width, data.height );\r
+                                       SAVE( restoreComicElement, [ false, _panelElement], [ true, _panelElement], true );\r
                                }\r
                        },\r
                        createTextElement: function( data ){\r
-                               var _comicElement;\r
+                               var _panelElement;\r
                                if( Type.isObject( data ) === false ){\r
                                        data = {\r
                                                balloon_template_id:1,\r
@@ -2751,7 +2692,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                                x:                                      Math.floor( panelW /2 - 100 +Math.random() *10 ),\r
                                                y:                  Math.floor( panelH /2 - 100 +Math.random() *10 ),\r
                                                z:                  -1,\r
-                                               t:                  COMIC_ELEMENT_ARRAY.length,\r
+                                               t:                  PANEL_ELEMENT_ARRAY.length,\r
                                                width:              200,\r
                                                height:             200,\r
                                                speaches_attributes: {\r
@@ -2760,105 +2701,18 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                                        }\r
                                                }\r
                                        }\r
-                                       _comicElement = new TextElementClass( data );\r
-                                       _comicElement.init();\r
-                                       pettanr.textEditor.bootInOverlay( PANEL_CONTROL.x(), PANEL_CONTROL.y(), _comicElement, onTextInput );\r
+                                       _panelElement = new TextElementClass( data );\r
+                                       _panelElement.init();\r
+                                       pettanr.textEditor.bootInOverlay( PANEL_CONTROL.x(), PANEL_CONTROL.y(), _panelElement, onTextInput );\r
                                } else {\r
-                                       _comicElement = new TextElementClass( data );\r
-                                       _comicElement.init();\r
-                                       onTextInput( _comicElement );\r
-                               }\r
-                               function onTextInput( _comicElement ){\r
-                                       appendComicElement( _comicElement );\r
-                                       SAVE( restoreComicElement, [ false, _comicElement ], [ true, _comicElement ], true );\r
-                               }\r
-                       },\r
-                       getAsHTML: function( isAbsoluteUrl, isXHTML){\r
-                               var HTML_ARRAY = [],\r
-                                       l = COMIC_ELEMENT_ARRAY.length,\r
-                                       _timing = 0,\r
-                                       _comicElement;\r
-\r
-                               while( HTML_ARRAY.length < l){\r
-                                       _comicElement = getComicElementByTiming();\r
-                                       if( _comicElement === null) break;\r
-                                       HTML_ARRAY.push( _comicElement.getAsHTML( isAbsoluteUrl, isXHTML));\r
-                               }\r
-                               function getComicElementByTiming(){\r
-                                       while( _timing < l *2){\r
-                                               for(var i=0; i<l; ++i){\r
-                                                       if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){\r
-                                                               ++_timing;\r
-                                                               return COMIC_ELEMENT_ARRAY[ i];\r
-                                                       }\r
-                                               }\r
-                                               ++_timing;\r
-                                       }\r
-                                       return null;\r
-                               }\r
-                               HTML_ARRAY.unshift(\r
-                                       [\r
-                                               '<div class="panel" ',\r
-                                                       'style="',\r
-                                                               'height:', panelH, 'px;',\r
-                                                               'background-color:', ';',\r
-                                                       '"',\r
-                                               '>'\r
-                                       ].join( '')\r
-                               );              \r
-                               HTML_ARRAY.push( '</div>');\r
-                               \r
-                               return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA);\r
-                       },\r
-                       getAsJsonString: function(){\r
-                               var JSON_STRING_ARRAY = [],\r
-                                       IMAGE_ARRAY = [],\r
-                                       BALLOON_ARRAY = [],\r
-                                       l = COMIC_ELEMENT_ARRAY.length,\r
-                                       _timing = 0,\r
-                                       _comicElement,\r
-                                       cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
-                                       \r
-                               while( IMAGE_ARRAY.length + BALLOON_ARRAY.length < l){\r
-                                       _comicElement = getComicElementByTiming();\r
-                                       if( _comicElement === null) break;\r
-                                       _comicElement.type === PANEL_ELEMENT_TYPE_IMAGE ? \r
-                                               IMAGE_ARRAY.push( _comicElement.getAsJsonString()) :\r
-                                               BALLOON_ARRAY.push( _comicElement.getAsJsonString());\r
-                               }\r
-                               function getComicElementByTiming(){\r
-                                       while( _timing < l *2){\r
-                                               for(var i=0; i<l; ++i){\r
-                                                       if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){\r
-                                                               ++_timing;\r
-                                                               return COMIC_ELEMENT_ARRAY[ i];\r
-                                                       }\r
-                                               }\r
-                                               ++_timing;\r
-                                       }\r
-                                       return null;\r
+                                       _panelElement = new TextElementClass( data );\r
+                                       _panelElement.init();\r
+                                       onTextInput( _panelElement );\r
+                               }\r
+                               function onTextInput( _panelElement ){\r
+                                       appendComicElement( _panelElement );\r
+                                       SAVE( restoreComicElement, [ false, _panelElement ], [ true, _panelElement ], true );\r
                                }\r
-                               return [\r
-                                       '{', cr,\r
-                                               '"panel": {', cr,\r
-                                                   '"border": 1,', cr,\r
-                                                   '"comic_id": 5,', cr,\r
-                                                   '"resource_picture_id": 1,', cr,\r
-                                                       '"x": ', 0, ',', cr,\r
-                                                       '"y": ', 0, ',', cr,\r
-                                                       '"z": ', 0, ',', cr,\r
-                                                       '"t": ', 0, ',', cr,\r
-                                                   '"width": ', panelW, ',', cr,\r
-                                                   '"height": ', panelH, ',', cr,\r
-                                                   '"panel_pictures_attributes": {', cr,\r
-                                                       IMAGE_ARRAY.join( ',' +cr), cr,\r
-                                                   '},', cr,\r
-                                                   '"balloons_attributes": {', cr,\r
-                                                       BALLOON_ARRAY.join( ',' +cr), cr,\r
-                                                   '}', cr,\r
-                                               '}', cr,\r
-                                       '}'\r
-                               ].join( '');\r
                        }\r
                }\r
        })();\r
@@ -2944,17 +2798,21 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                delete instance.firstOpen;\r
        }\r
        this.onOpen = function( _w, _h, _file ){\r
+               comicID = -1;\r
+               panelID = -1;\r
+               panelTimming = -1;\r
+               \r
                var panelW, panelH,\r
                        borderSize,\r
                        fileData, panelElements, panelElm;\r
                \r
-               \r
                if( pettanr.file.isFileInstance( _file ) === true ){\r
                        if( pettanr.driver.isPettanrFileInstance( _file ) === true ){\r
                                if( _file.getType() === pettanr.driver.FILE_TYPE.COMIC ){\r
                                        fileData = _file.read();\r
                                        panelW = fileData.width;\r
                                        panelH = fileData.height;\r
+                                       comicID = fileData.id || -1;\r
                                } else\r
                                if( _file.getType() === pettanr.driver.FILE_TYPE.PANEL ){\r
                                        fileData = _file.read();\r
@@ -2962,7 +2820,9 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                        panelH = fileData.height;\r
                                        borderSize = fileData.border;\r
                                        panelElements = fileData.panel_elements;\r
-                                       \r
+                                       comicID = fileData.comic ? fileData.comic.id || -1 : -1;\r
+                                       panelID = fileData.id || -1;\r
+                                       panelTimming = fileData.t || -1;\r
                                        if( Type.isArray( panelElements ) === true ){\r
                                                for( var i=0; i<panelElements.length; ++i){\r
                                                        panelElm = panelElements[ i ];\r
@@ -3017,7 +2877,6 @@ pettanr.editor = pettanr.view.registerApplication( function(){
        this.onPaneResize = function( _windowW, _windowH){\r
                windowW = _windowW || windowW;\r
                windowH = _windowH || windowH;\r
-               if( instance.firstOpen) return;\r
                /*\r
                 * ieは +'px'が不要みたい\r
                 */\r
@@ -3676,14 +3535,181 @@ pettanr.artistConsole = pettanr.view.registerApplication( function(){
 pettanr.outputConsole = pettanr.view.registerApplication( function(){\r
        var jqWrap, jqOutputArea,\r
                ID = 'outputConsole',\r
+               timing = 0,\r
                instance = this;\r
        //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
        \r
        function clickOK(){\r
-               pettanr.overlay.hide();\r
                pettanr.outputConsole.shutdown();\r
        }\r
-       \r
+\r
+       function getPanelElementByTiming( PANEL_ELEMENT_ARRAY, l ){\r
+               while( timing < l * 2){\r
+                       for(var i=0; i<l; ++i){\r
+                               if( timing === PANEL_ELEMENT_ARRAY[ i ].timing ){\r
+                                       ++timing;\r
+                                       return PANEL_ELEMENT_ARRAY[ i ];\r
+                               }\r
+                       }\r
+                       ++timing;\r
+               }\r
+               return null;\r
+       }\r
+\r
+       function getAsHtmlString( isAbsoluteUrl, isXHTML, panelW, panelH, border, PANEL_ELEMENT_ARRAY ){\r
+               timing = 0;\r
+               \r
+               var HTML_ARRAY = [],\r
+                       l = PANEL_ELEMENT_ARRAY.length,\r
+                       _panelElement;\r
+\r
+               while( HTML_ARRAY.length < l ){\r
+                       _panelElement = getPanelElementByTiming( PANEL_ELEMENT_ARRAY, l );\r
+                       if( _panelElement === null) break;\r
+                       HTML_ARRAY.push( panelElementToHtml( _panelElement, isAbsoluteUrl, isXHTML ));\r
+               }\r
+\r
+               HTML_ARRAY.unshift(\r
+                       [\r
+                               '<div class="panel" ',\r
+                                       'style="',\r
+                                               'height:', panelH, 'px;',\r
+                                               'background-color:', ';',\r
+                                       '"',\r
+                               '>'\r
+                       ].join( '')\r
+               );              \r
+               HTML_ARRAY.push( '</div>');\r
+               \r
+               return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA);\r
+       }\r
+\r
+               function panelElementToHtml( _panelElement, isAbsoluteUrl, isXHTML ){\r
+                       var url;\r
+                       if( _panelElement.type === 0 ){\r
+                               url = [ pettanr.CONST.RESOURCE_PICTURE_PATH, _panelElement.resourcePicture().id, '.', _panelElement.resourcePicture().ext ].join( '' );\r
+                               return [\r
+                                       '<img ',\r
+                                               'src="',        isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url ), '" ',\r
+                                               'width="',      _panelElement.w, '" ',\r
+                                               'height="',     _panelElement.h, '" ',\r
+                                               'style="',\r
+                                                       'left:',    _panelElement.x, 'px;',\r
+                                                       'top:',     _panelElement.y, 'px;',\r
+                                                       'z-index:', _panelElement.z, ';',\r
+                                               '"',\r
+                                       isXHTML !== true ? '>' : ' \/>'\r
+                               ].join( '');                            \r
+                       } else {\r
+                               url = _panelElement.getBalloonURL();\r
+                               return [\r
+                                       '<img ',\r
+                                               'src="',        isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url ), '" ',\r
+                                               'width="',      _panelElement.w, '" ',\r
+                                               'height="',     _panelElement.h, '" ',\r
+                                               'style="',                                                                      \r
+                                                       'left:',    _panelElement.x, 'px;',\r
+                                                       'top:',     _panelElement.y, 'px;',\r
+                                                       'z-index:', _panelElement.z, ';',\r
+                                               '"',\r
+                                       isXHTML !== true ? '>' : ' \/>',\r
+                                       pettanr.LINE_FEED_CODE_TEXTAREA,\r
+                                       '<div class="balloon" style="',\r
+                                               'left:',        _panelElement.x, 'px;',\r
+                                               'top:',         _panelElement.y, 'px;',\r
+                                               'width:',       _panelElement.w, 'px;',\r
+                                               'height:',      _panelElement.h, 'px;',\r
+                                               'z-index:',     _panelElement.z,\r
+                                       '"><span>', _panelElement.text(), '<\/span>', '<\/div>'\r
+                                               \r
+                               ].join( '');                            \r
+                       }\r
+               }\r
+\r
+       function getAsJsonString( comicID, panelID, panelTimming, panelW, panelH, border, PANEL_ELEMENT_ARRAY ){\r
+               timing = 0;\r
+               \r
+               var JSON_STRING_ARRAY = [],\r
+                       IMAGE_ARRAY = [],\r
+                       BALLOON_ARRAY = [],\r
+                       l = PANEL_ELEMENT_ARRAY.length,\r
+                       _panelElement,\r
+                       cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
+\r
+               while( IMAGE_ARRAY.length + BALLOON_ARRAY.length <= l){\r
+                       _panelElement = getPanelElementByTiming( PANEL_ELEMENT_ARRAY, l );\r
+                       if( _panelElement === null) break;\r
+                       _panelElement.type === 0 ? \r
+                               IMAGE_ARRAY.push( imageToJson( _panelElement )) :\r
+                               BALLOON_ARRAY.push( balloonToJson( _panelElement ) );\r
+               }\r
+               return [\r
+                       '{', cr,\r
+                               '"panel": {', cr,\r
+                                       '"id": ',               panelID, ',', cr,\r
+                                   '"border": ',           border, ',', cr,\r
+                                   '"comic_id": ',         comicID, ',', cr,\r
+                                   '"resource_picture_id": 1,', cr,\r
+                                       '"x": ',                0, ',', cr,\r
+                                       '"y": ',                0, ',', cr,\r
+                                       '"z": ',                0, ',', cr,\r
+                                       panelTimming !== -1 ? ( '"t": ' + panelTimming + ',' + cr ) : '',\r
+                                   '"width": ',            panelW, ',', cr,\r
+                                   '"height": ',           panelH, ',', cr,\r
+                                   '"panel_pictures_attributes": {', cr,\r
+                                       IMAGE_ARRAY.join( ',' + cr ), cr,\r
+                                   '},', cr,\r
+                                   '"balloons_attributes": {', cr,\r
+                                       BALLOON_ARRAY.join( ',' + cr ), cr,\r
+                                   '}', cr,\r
+                               '}', cr,\r
+                       '}'\r
+               ].join( '' );\r
+       }\r
+               function imageToJson( _imageElement ){\r
+                       var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
+                       return [\r
+                               '"new', timing, '": {', cr,\r
+                                       '"resource_picture_id": ', _imageElement.resourcePicture().id, ',', cr,\r
+                                       '"x": ',                   _imageElement.x, ',', cr,\r
+                                       '"y": ',                   _imageElement.y, ',', cr,\r
+                                       '"z": ',                   _imageElement.z, ',', cr,\r
+                                       '"width": ',               _imageElement.flipH() * _imageElement.w, ',', cr,\r
+                                       '"height": ',              _imageElement.flipV() * _imageElement.h, ',', cr,\r
+                                       '"t": ',                   timing, cr,\r
+                               '}'\r
+                       ].join( '');\r
+               }\r
+\r
+               function balloonToJson( _textElement ){\r
+                       var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
+                       return [\r
+                               '"new', timing, '": {', cr,\r
+                                       '"balloon_template_id": ', 1, ',', cr,\r
+                                       '"system_picture_id": ',   1, ',', cr,\r
+                                       '"size": ',                1, ',', cr,\r
+                                       '"tail": ',                _textElement.angle(), ',', cr,\r
+                                       '"x": ',                   _textElement.x, ',', cr,\r
+                                       '"y": ',                   _textElement.y, ',', cr,\r
+                                       '"z": ',                   _textElement.z, ',', cr,\r
+                                       '"t": ',                   timing, ',', cr,\r
+                                       '"width": ',               _textElement.w, ',', cr,\r
+                                       '"height": ',              _textElement.h, ',', cr,\r
+                                       '"speaches_attributes": {', cr,\r
+                                               '"newf', timing, '": {', cr,\r
+                                               '"content": "', _textElement.text(), '",', cr,\r
+                                                       '"x": ',        _textElement.x, ',', cr,\r
+                                                       '"y": ',        _textElement.y, ',', cr,\r
+                                                       '"t": ',        timing, ',', cr,\r
+                                                       '"width": ',    _textElement.w, ',', cr,\r
+                                                       '"height": ',   _textElement.h, cr,\r
+                                               '}', cr,\r
+                                       '}', cr,\r
+                               '}'\r
+                       ].join( '');\r
+               }\r
+\r
+\r
        /* grobal method */\r
        this.rootElement = document.getElementById( 'output-console-wrapper' );\r
        this.displayName = ID;\r
@@ -3696,12 +3722,18 @@ pettanr.outputConsole = pettanr.view.registerApplication( function(){
                jqOutputArea = $( '#output-area');\r
                delete instance.init;\r
        }\r
-       this.onOpen = function( _w, _h, _text ){\r
+       this.onOpen = function( _w, _h, _dataType, _comicID, _panelID, _panelTimming, _panelW, _panelH, _borderSize, _panelElements ){\r
                instance.init && instance.init();\r
                \r
                jqWrap.show();\r
                instance.onPaneResize( _w, _h );\r
-               jqOutputArea.val( _text).focus();\r
+               var text;\r
+               if( _dataType === pettanr.outputConsole.JSON ){\r
+                       text = getAsJsonString( _comicID, _panelID, _panelTimming, _panelW, _panelH, _borderSize, _panelElements );\r
+               } else {\r
+                       text = getAsHtmlString( false, false, _panelW, _panelH, _borderSize, _panelElements );\r
+               }\r
+               jqOutputArea.val( text ).focus();\r
        }\r
        this.onPaneResize = function( _w, _h){\r
                jqWrap.css(\r
@@ -3716,3 +3748,9 @@ pettanr.outputConsole = pettanr.view.registerApplication( function(){
                jqOutputArea.val('');\r
        }\r
 });\r
+pettanr.outputConsole.JSON          = 0;\r
+pettanr.outputConsole.HTML          = 1;\r
+pettanr.outputConsole.XML           = 2;\r
+pettanr.outputConsole.SHORT_URL     = 3;\r
+pettanr.outputConsole.MOVERBLE_TYPE = 4;\r
+pettanr.outputConsole.BLOGGER       = 5;\r