OSDN Git Service

support keep-aspect resize ( shift + resiz)
authoritozyun <itozyun@git.sourceforge.jp>
Fri, 30 Dec 2011 16:09:44 +0000 (01:09 +0900)
committeritozyun <itozyun@git.sourceforge.jp>
Fri, 30 Dec 2011 16:09:44 +0000 (01:09 +0900)
0.3.0/all.css
0.3.0/index.html
0.3.0/main.js

index 17f7740..3e045a1 100644 (file)
@@ -762,9 +762,9 @@ version: 2.7.0
                -webkit-border-radius:  0 0 8px 8px;\r
        }\r
 \r
-/*  baloon-tail-mover\r
+/*  balloon-tail-mover\r
 --------------------------------------------------------------------------------------*/               \r
-       #baloon-tail-mover {\r
+       #balloon-tail-mover {\r
                position:                       absolute;\r
                width:                          8px;\r
                height:                         8px;\r
@@ -1039,12 +1039,13 @@ version: 2.7.0
                                left:                           30px;\r
                        }\r
                        #comic-element-z,\r
-                       #comic-element-a,\r
-                       #comic-element-w-percent,\r
-                       #comic-element-h-percent        {\r
+                       #comic-element-a {\r
                                left:                           115px;\r
                        }\r
-                       \r
+            #comic-element-w-percent,\r
+            #comic-element-h-percent    {\r
+                left:               124px;\r
+            }\r
                        #comic-element-x, #comic-element-z {\r
                                top:                            10px;\r
                        }\r
@@ -1078,6 +1079,17 @@ version: 2.7.0
                        #comic-element-h-percent-value {\r
                                width:                          30px;\r
                        }\r
+                       \r
+                       #comic-element-keep-aspect {\r
+                           position:            absolute;\r
+                           top:                 96px;\r
+                           left:                100px;\r
+                           width:               12px;\r
+                           height:              22px;\r
+                           font-size:           22px;\r
+                           line-height:         22px;\r
+                           border:              1px solid #ccc;\r
+                       }\r
 \r
 /*  Background Window\r
 --------------------------------------------------------------------------------------*/\r
index 999a6dc..fc293df 100644 (file)
                                        <dd>domTreeに追加する前にjQueryでセットしても特にイベント周りで表示がおかしくなる.ieでは特に酷い。</dd>\r
                                        <dt>11-12-25</dt>\r
                                        <dd>メニューバーが動作するようになる。他にマウスイベントリスナへのイベント伝播の書き換え。</dd>\r
+                                       <dt>11-12-30</dt>\r
+                                       <dd>shiftキーを押しながらのリサイズでは、縦横比が維持するようにする。</dd>\r
                        </dl>\r
                        </div>\r
                </div>\r
                                        <div class="comic-element-resizer" id="comic-element-resizer-top-right"></div>\r
                                        <div class="comic-element-resizer" id="comic-element-resizer-bottom-left"></div>\r
                                        <div class="comic-element-resizer" id="comic-element-resizer-bottom-right"></div>\r
-                                       <div id="baloon-tail-mover"></div>\r
+                                       <div id="balloon-tail-mover"></div>\r
                                        \r
                                <!-- コミックオブジェクトコンソール -->\r
                                        <div id="comic-element-consol-wrapper">\r
                                                <span id="comic-element-h-percent-value" class="comic-element-attribute-value editable-value">0</span>\r
                                                <span class="comic-element-attribute-label">%</span>\r
                                        </div>\r
+                    <div id="comic-element-keep-aspect"></div>\r
                                </div>\r
                        </script>\r
 \r
index 131114a..a1a2988 100644 (file)
@@ -451,7 +451,6 @@ h2c.view = ( function(){
        var jqWindow,\r
                funcArray,\r
                HOME_ID = 'home',\r
-               currentView,\r
                elmCurrent,\r
                viewID = ( function(){\r
                        var _viewID = h2c.URL_PARAMS.view || HOME_ID\r
@@ -465,7 +464,8 @@ h2c.view = ( function(){
                        }\r
                        elmCurrent = _elmHome;\r
                        return HOME_ID;\r
-               })();\r
+               })(),\r
+               currentView;\r
 \r
        function onWindowResize(){\r
                var _fn,\r
@@ -482,7 +482,7 @@ h2c.view = ( function(){
                        funcArray = _funcArray;\r
                        jqWindow = h2c.jqWindow();\r
                        jqWindow.resize( onWindowResize);\r
-                       \r
+                       currentView = h2c[ viewID];\r
                        setTimeout( onWindowResize, 100);\r
                        \r
                        delete h2c.view.init;\r
@@ -492,7 +492,7 @@ h2c.view = ( function(){
                                if( h2c[ key] === _view){\r
                                        var elm = document.getElementById( key);\r
                                        if( currentView !== _view && elm){\r
-                                               this.current = viewID = key;\r
+                                               this.currentID = viewID = key;\r
                                                currentView = _view;\r
                                                elmCurrent.style.display = '';\r
                                                elm.style.display = 'block';\r
@@ -503,32 +503,39 @@ h2c.view = ( function(){
                        }\r
                        alert( 'fault!!');\r
                },\r
-               current: viewID\r
+               currentID: viewID,\r
+               HOME: HOME_ID,\r
+               COMICS: 'comic-list',\r
+               IMAGES: 'image-list',\r
+               SETTING: 'setting',\r
+               EDITOR: 'editor',\r
+               OVERLAY: 'overlay'\r
        }\r
 })();\r
 \r
-h2c.view.HOME = 'home'; //\r
-h2c.view.COMICS = 'comic-list';\r
-h2c.view.IMAGES = 'image-list';\r
-h2c.view.SETTING = 'setting';\r
-h2c.view.EDITOR = 'editor'; // edit mode\r
-\r
 h2c.overlay = ( function(){\r
        var SHADOW_OPACITY = 0.5,\r
                jqBody, jqConteiner, jqShadow, jqCloseButton,\r
                currentOverlay = null,\r
                visible = false;\r
+       \r
+       function close(){\r
+               currentOverlay && currentOverlay.onClose && currentOverlay.onClose();\r
+               h2c.overlay.hide();             \r
+       }\r
        return {\r
                init: function(){\r
                        jqBody = h2c.jqBody();\r
                        jqConteiner = $( '#overlay-container');\r
                        jqShadow = $( '#overlay-shadow');\r
                        jqCloseButton = $( '#overlay-close-button').click( function( e){\r
-                               currentOverlay && currentOverlay.onClose && currentOverlay.onClose();\r
-                               h2c.overlay.hide();\r
+                               close();\r
+                               e.preventDefault();\r
                                return false;\r
                        });\r
                        \r
+                       h2c.key.addKeyDownEvent( h2c.view.OVERLAY, 27, false, false, close); // 27.esc\r
+                       \r
                        delete h2c.overlay.init;\r
                },\r
                show: function( _currentOverlay){\r
@@ -537,8 +544,9 @@ h2c.overlay = ( function(){
                                filter:         '',\r
                                opacity:        ''\r
                        }).fadeIn();\r
-                       visible = true;\r
+                       this.visible = visible = true;\r
                        currentOverlay = _currentOverlay;\r
+                       this.currentID = _currentOverlay.ID;\r
                        jqCloseButton.toggle( !!_currentOverlay.onClose);\r
                },\r
                hide: function(){\r
@@ -548,8 +556,11 @@ h2c.overlay = ( function(){
                                filter:         '',\r
                                opacity:        ''\r
                        }).fadeOut();\r
-                       visible = false;\r
+                       this.visible = visible = false;\r
+                       this.currentID = null;\r
                },\r
+               visible: visible,\r
+               currentID: null,\r
                onWindowResize: function( _windowW, _windowH){\r
                        jqConteiner.css( { height:      _windowH});\r
                        jqShadow.css( { height: _windowH});\r
@@ -564,7 +575,7 @@ h2c.overlay = ( function(){
  * KEY\r
  * \r
  *  - EDITABLE_TEXT_CONTROL\r
- *    - EDITABLE_TEXT_CLASS\r
+ *    - EditableTextClass\r
  *      .update: function,\r
  *      .show: function,\r
  *      .hide: function,\r
@@ -581,11 +592,11 @@ h2c.overlay = ( function(){
  *    .SPACE_DOWN_EVENT:       'spaceDown',\r
  *    .SPACE_UP_EVENT:         'spaceUp',\r
  *    .init:                           function,\r
- *    .addKeyEvent:                    function,\r
+ *    .addKeyDownEvent:                        function,\r
  *    .keyEventDispatcher:     function,\r
  *    .createEditableText:     function,\r
  * \r
- * ショートカットキーの監視とテキスト入力(input, textarea)を管理する。\r
+ * ã\82·ã\83§ã\83¼ã\83\88ã\82«ã\83\83ã\83\88ã\82­ã\83¼ã\81®ç\9b£è¦\96ã\81¨ã\83\86ã\82­ã\82¹ã\83\88å\85¥å\8a\9b(input, textarea)ã\80\81ã\83\81ã\82§ã\83\83ã\82¯ã\83\9cã\83\83ã\82¯ã\82¹ã\82\92管ç\90\86ã\81\99ã\82\8bã\80\82\r
  * キー入力はdocumentで受けて、テキスト編集中(input, textarea)はそちらにキーイベント流す。\r
  * \r
  */\r
@@ -596,13 +607,12 @@ h2c.key = ( function(){
                KEYEVENT_ARRAY = [],\r
                shiftEnabled = false,\r
                ctrlEnabled = false;\r
-               spaceEnabled = false;\r
        \r
        var EDITABLE_TEXT_CONTROL = ( function(){\r
                var     EDITABLE_TEXT_TABLE = {},\r
                        currentText = null;\r
 \r
-               var EDITABLE_TEXT_CLASS = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID){\r
+               var EditableTextClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID){\r
                        var ELM = WRAPPER_ELM.children( '.editable-value').eq( 0),\r
                                value = ELM.html(),\r
                                jqInput,\r
@@ -616,6 +626,70 @@ h2c.key = ( function(){
                                        jqInput = $( '<input type="text"/>').val( value)//.keydown( finish).keypress( finish);\r
                                        ELM.append( jqInput);\r
                                        jqInput.focus().select();\r
+                                       e.preventDefault();\r
+                                       return false;\r
+                               });\r
+                       ELM.addClass( 'editable-text').html( A);\r
+                       \r
+                       function finish(e){\r
+                               if(e){\r
+                                       var keyCode = e.keyCode;\r
+                                       if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true){ // 13.return 27.esc 9.tab 18.alt\r
+                                               _finish( keyCode !== 27 ? jqInput.val() : value);\r
+                                               keyCode === 9 && GROUP_ID && EDITABLE_TEXT_CONTROL.tabShift( GROUP_ID, index, e.shiftKey === true ? -1 : 1);\r
+                                       }\r
+                               } else {\r
+                                       _finish( jqInput.val());\r
+                               }\r
+                               function _finish( VALUE_NEW){\r
+                                       value = VALUE_NEW;\r
+                                       A.html( VALUE_NEW).show();\r
+                                       jqInput.remove();\r
+                                       jqInput = null;\r
+                                       ON_UPDATE_FUNCTION && VALUE_NEW !== value && ON_UPDATE_FUNCTION( VALUE_NEW, value);\r
+                                       EDITABLE_TEXT_CONTROL.finish( instance);\r
+                               }\r
+                       }\r
+                       return {\r
+                               update: function( _value){\r
+                                       value = _value !== undefined ? _value : value;\r
+                                       A.html( value);\r
+                                       jqInput && jqInput.val( value);\r
+                                       currentText === instance && finish();\r
+                               },\r
+                               show: function(){\r
+                                       enabled === false && WRAPPER_ELM.show();\r
+                                       enabled= true;\r
+                               },\r
+                               hide: function(){\r
+                                       enabled === true && WRAPPER_ELM.hide();\r
+                                       enabled = false;\r
+                               },\r
+                               start: function(){\r
+                                       !jqInput && A.click();\r
+                               },\r
+                               finish: finish,\r
+                               enabled: function(){\r
+                                       return enabled;\r
+                               }\r
+                       }\r
+               }\r
+               var CheckboxClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID){\r
+                       var ELM = WRAPPER_ELM.children( '.checkbox-value').eq( 0),\r
+                               value = ELM.html(),\r
+                               jqInput,\r
+                               index = EDITABLE_TEXT_TABLE[ GROUP_ID].length,\r
+                               instance,\r
+                               enabled = true,\r
+                               A = $( '<a href="#" onclick="return false;"></a>').html( value).click( function(e){\r
+                                       instance = instance || EDITABLE_TEXT_TABLE[ GROUP_ID][ index];\r
+                                       EDITABLE_TEXT_CONTROL.start( instance);                                                         \r
+                                       A.hide();\r
+                                       jqInput = $( '<input type="text"/>').val( value)//.keydown( finish).keypress( finish);\r
+                                       ELM.append( jqInput);\r
+                                       jqInput.focus().select();\r
+                                       e.preventDefault();\r
+                                       return false;\r
                                });\r
                        ELM.addClass( 'editable-text').html( A);\r
                        \r
@@ -662,14 +736,16 @@ h2c.key = ( function(){
                                }\r
                        }\r
                }\r
-               \r
                return {\r
-                       create: function( ELM, ON_UPDATE_FUNCTION, GROUP_ID){\r
+                       createEditableText: function( ELM, ON_UPDATE_FUNCTION, GROUP_ID){\r
                                if( GROUP_ID && !EDITABLE_TEXT_TABLE[ GROUP_ID]) EDITABLE_TEXT_TABLE[ GROUP_ID] = [];\r
-                               var ret = EDITABLE_TEXT_CLASS.apply( {}, [ ELM, ON_UPDATE_FUNCTION, GROUP_ID])\r
+                               var ret = EditableTextClass.apply( {}, [ ELM, ON_UPDATE_FUNCTION, GROUP_ID]);\r
                                GROUP_ID && EDITABLE_TEXT_TABLE[ GROUP_ID].push( ret);\r
                                return ret;\r
                        },\r
+                       createCheckbox: function( ELM, ON_UPDATE_FUNCTION, GROUP_ID){\r
+                               \r
+                       },\r
                        start: function( _currentText){\r
                                currentText !== _currentText && currentText && currentText.finish();\r
                                currentText = _currentText;\r
@@ -701,35 +777,45 @@ h2c.key = ( function(){
        })();\r
        \r
        function keyHit( e){\r
-               log.html( [ e.keyCode, e.shiftKey, e.ctrlKey, e.altKey].join( ','));\r
+               log.html( [ e.keyCode, e.shiftKey, e.ctrlKey, e.altKey, e.type].join( ','));\r
                //keyOperationChatcher.val( '');\r
                var cancel = false,\r
-                       key = e.keyCode;\r
-               if( EDITABLE_TEXT_CONTROL.keyEventRellay( e) === false){\r
-                       if( key === 16 || e.shiftKey === true){\r
-                               keyOperationChatcher.trigger( h2c.key.SHIFT_DOWN_EVENT);\r
-                               shiftEnabled = true;\r
-                       }\r
-                       if( key === 17 || e.ctrlKey === true){\r
-                               keyOperationChatcher.trigger( h2c.key.CTRL_DOWN_EVENT);\r
-                               ctrlEnabled = true;\r
-                       }\r
-                       if( key === 32){\r
-                               keyOperationChatcher.trigger( h2c.key.SPACE_DOWN_EVENT);\r
-                               spaceEnabled = true;\r
-                       }\r
+                       callback = ( function(){\r
+                               var type = e.type;\r
+                               if( type === 'keypress') return 'keydown';\r
+                               return type;\r
+                       })(),\r
+                       key = e.keyCode,\r
+                       overlayEnabled = h2c.overlay.visible === true,\r
+                       currentViewID = overlayEnabled === true ? h2c.overlay.currentID : h2c.view.currentID;\r
+               if( callback === 'keydown' && EDITABLE_TEXT_CONTROL.keyEventRellay( e) === false){\r
                        \r
-                       var l = KEYEVENT_ARRAY.length,\r
+                       var shift = e.shiftKey,\r
+                               ctrl = e.ctrlKey,\r
+                               l = KEYEVENT_ARRAY.length,\r
                                d;\r
+                       \r
+                       shiftEnabled = e.shiftKey;\r
+                       ctrlEnabled = e.ctrlKey;                        \r
+\r
                        for( var i=0; i<l; i++){\r
                                d = KEYEVENT_ARRAY[ i];\r
-                               if( d.keyCode === key && d.shift === e.shiftKey && d.ctrl === e.ctrlKey){\r
-                                       setTimeout( d.callback, 0);\r
+                               if( (\r
+                                               d.viewID === currentViewID ||\r
+                                                       ( overlayEnabled === true && d.viewID === h2c.view.OVERLAY)\r
+                                       ) &&\r
+                                       d.keyCode === key &&\r
+                                       ( d.shift === undefined || d.shift === shift) &&\r
+                                       ( d.ctrl === undefined || d.ctrl === ctrl)\r
+                               ){\r
+                                       ( function( func, e){\r
+                                               setTimeout( function(){ func( e)}, 0);\r
+                                       })( d[callback], e)\r
                                        cancel = true;\r
                                }\r
-                       }                               \r
+                       }\r
                }\r
-               if( key === 13 ||key === 18 || key === 9 || key === 27 || e.altKey === true || cancel === true){ // 13.enter 18.esc 9.tab 27.esc\r
+               if( cancel === true || key === 18 || key === 9 || key === 27 || e.altKey === true){ // 13.enter 18.esc 9.tab 27.esc   || ( key === 13 && overlayEnabled === false)\r
                        e.preventDefault();\r
                e.keyCode = 0;\r
                e.cancelBubble = true;\r
@@ -739,39 +825,14 @@ h2c.key = ( function(){
        }\r
 \r
        return {\r
-               SHIFT_DOWN_EVENT:       'shiftDown',\r
-               SHIFT_UP_EVENT:         'shiftUp',\r
-               CTRL_DOWN_EVENT:        'ctrlDown',\r
-               CTRL_UP_EVENT:          'ctrlUp',\r
-               SPACE_DOWN_EVENT:       'spaceDown',\r
-               SPACE_UP_EVENT:         'spaceUp',\r
                init: function(){\r
                        log = $( '#key-event-log').html( 'ready');\r
 \r
                        jqWindow = h2c.jqWindow().focus();\r
                        keyOperationChatcher = h2c.jqDocument()\r
                                .keydown( keyHit)\r
-                               .keyup( function( e){\r
-                                       log.html( '-' +e.altKey);\r
-                                       var key = e.keyCode;\r
-                                       if( key === 16 || e.shiftKey === true){\r
-                                               keyOperationChatcher.trigger( h2c.key.SHIFT_UP_EVENT);\r
-                                               shiftEnabled = false;\r
-                                       }\r
-                                       if( key === 17 || e.ctrlKey === true){\r
-                                               keyOperationChatcher.trigger( h2c.key.CTRL_UP_EVENT);\r
-                                               ctrlEnabled = false;\r
-                                       }\r
-                                       if( key === 32){\r
-                                               keyOperationChatcher.trigger( h2c.key.SPACE_UP_EVENT);\r
-                                               spaceEnabled = false;\r
-                                       }\r
-                                       e.preventDefault();\r
-                               e.keyCode = 0;\r
-                               e.cancelBubble = true;\r
-                               e.returnValue = false;\r
-                                       return false;\r
-                               }).mouseenter( function(){\r
+                               .keyup( keyHit)\r
+                               .mouseenter( function(){\r
                                        jqWindow.focus();\r
                                });\r
                        h2c.isIE === true && h2c.ieRenderingVersion < 8 && keyOperationChatcher.keypress( function( e){\r
@@ -784,29 +845,38 @@ h2c.key = ( function(){
 \r
                        delete h2c.key.init;\r
                },\r
-               addKeyEvent: function( _keyCode, _shift, _ctrl, _callbackFunction){\r
+               addKeyDownEvent: function( _viewID, _keyCode, _shift, _ctrl, _callbackFunction){\r
                        KEYEVENT_ARRAY.push( {\r
+                               viewID:                 _viewID,\r
                                keyCode:                _keyCode,\r
                                shift:                  _shift,\r
                                ctrl:                   _ctrl,\r
-                               callback:               _callbackFunction\r
+                               keydown:                _callbackFunction\r
+                       });\r
+               },\r
+               addKeyUpdateEvent: function( _viewID, _keyCode, _shift, _ctrl, _callbackFunction){\r
+                       KEYEVENT_ARRAY.push( {\r
+                               viewID:         _viewID,\r
+                               keyCode:        _keyCode,\r
+                               shift:          _shift,\r
+                               ctrl:           _ctrl,\r
+                               keydown:        _callbackFunction,\r
+                               keyup:          _callbackFunction\r
                        });\r
                },\r
-               addCursorEvent: function( _shift, _ctrl, _callbackFunction){\r
+               addCursorEvent: function( _viewID, _shift, _ctrl, _callbackFunction){\r
                        \r
                },\r
                keyEventDispatcher: function(){\r
                        return keyOperationChatcher;\r
                },\r
-               createEditableText: EDITABLE_TEXT_CONTROL.create,\r
+               createEditableText: EDITABLE_TEXT_CONTROL.createEditableText,\r
+               createCheckbox: EDITABLE_TEXT_CONTROL.createCheckbox,\r
                shiftEnabled: function(){\r
                        return shiftEnabled;\r
                },\r
                ctrlEnabled: function(){\r
                        return ctrlEnabled;\r
-               },\r
-               spaceEnabled: function(){\r
-                       return spaceEnabled;\r
                }\r
        }\r
 })();\r
@@ -1471,15 +1541,13 @@ h2c.editor = ( function(){
  */\r
        var HISTORY = ( function() {\r
                var     STACK_BACK = [], STACK_FORWARD = [],\r
-                       menubarBack, menubarForward,\r
+                       MENUBAR_BACK = MENU_BAR_CONTROL.EDIT.createSelection( 'back', 'ctrl + z', back, false),\r
+                       MENUBAR_FORWARD = MENU_BAR_CONTROL.EDIT.createSelection( 'forward', 'ctrl + y', forward, false, false, true),\r
                        log;\r
                        \r
-               h2c.key.addKeyEvent( 90, false, true, back);    // ctrl + Z\r
-               h2c.key.addKeyEvent( 90, true, true, forward);  // ctrl + Y\r
-               h2c.key.addKeyEvent( 89, false, true, forward); // ctrl + shift + Z\r
-               \r
-               menubarBack = MENU_BAR_CONTROL.EDIT.createSelection( 'back', 'ctrl + z', back, false);\r
-               menubarForward = MENU_BAR_CONTROL.EDIT.createSelection( 'forward', 'ctrl + y', back, false, false, true);\r
+               h2c.key.addKeyDownEvent( h2c.view.EDITOR, 90, false, true, back);       // ctrl + Z\r
+               h2c.key.addKeyDownEvent( h2c.view.EDITOR, 90, true, true, forward);     // ctrl + shift + Z\r
+               h2c.key.addKeyDownEvent( h2c.view.EDITOR, 89, false, true, forward); // ctrl + Y\r
 \r
                function back(){\r
                        /*\r
@@ -1490,20 +1558,20 @@ h2c.editor = ( function(){
 \r
                        var state = STACK_BACK.pop();\r
                        state && state.fn( state.argBack);\r
-                       menubarBack.visible( STACK_BACK.length !== 0);\r
+                       MENUBAR_BACK.visible( STACK_BACK.length !== 0);\r
                        \r
                        STACK_FORWARD.push( state);\r
-                       menubarForward.visible( true);\r
+                       MENUBAR_FORWARD.visible( true);\r
                }\r
                function forward(){\r
                        if( STACK_FORWARD.length === 0) return;\r
                        \r
                        var state = STACK_FORWARD.pop();\r
                        state.fn( state.argForword);\r
-                       menubarForward.visible( STACK_FORWARD.length !== 0);\r
+                       MENUBAR_FORWARD.visible( STACK_FORWARD.length !== 0);\r
                        \r
                        STACK_BACK.push( state);\r
-                       menubarBack.visible( true);\r
+                       MENUBAR_BACK.visible( true);\r
                }\r
                return {\r
                        init: function(){\r
@@ -1517,9 +1585,8 @@ h2c.editor = ( function(){
                                        argForword:     _argForword,\r
                                        destroy:        _destroy\r
                        });\r
-                       menubarBack.visible( true);\r
-                       \r
-                       //log.html( 'save' +STACK_BACK.length + '-' +'-' +STACK_FORWARD.length)\r
+                       MENUBAR_BACK.visible( true);\r
+\r
                        while( STACK_FORWARD.length > 0){\r
                                        var _stack = STACK_FORWARD.shift(),\r
                                                _argBack = _stack.argBack,\r
@@ -1540,7 +1607,7 @@ h2c.editor = ( function(){
                                                }                                               \r
                                        }\r
                                }\r
-                               menubarForward.visible( false);\r
+                               MENUBAR_FORWARD.visible( false);\r
                    }           \r
                }\r
        })();\r
@@ -1681,6 +1748,11 @@ h2c.editor = ( function(){
                                w: function(){ return w;},\r
                                h: function(){ return h;},\r
                                $: null,\r
+                               title: function( _title){\r
+                                       _title !== undefined && jqHeader.html( _title);\r
+                                       title = _title || title;\r
+                                       return title;\r
+                               },\r
                                visible: visible,\r
                                open: function(){\r
                                        if( visible === true) return;\r
@@ -1873,13 +1945,13 @@ h2c.editor = ( function(){
                var addImageButton, addTextButton, editBgButton, switchGridButton, popupHelpButton, publishButton,\r
                        gridSwitchFunction;\r
                        \r
-               h2c.key.addKeyEvent( 73, false, true, addImage);\r
+               h2c.key.addKeyDownEvent( h2c.view.EDITOR, 73, false, true, addImage);\r
                MENU_BAR_CONTROL.EDIT.createSelection( 'Add Image', 'ctrl + I', addImage, true, true, false);\r
                \r
-               h2c.key.addKeyEvent( 84, false, true, addText);\r
+               h2c.key.addKeyDownEvent( h2c.view.EDITOR, 84, false, true, addText);\r
                MENU_BAR_CONTROL.EDIT.createSelection( 'Add Text', 'ctrl + T', addText, true, false, true);\r
 \r
-               h2c.key.addKeyEvent( 71, false, true, switchGrid);\r
+               h2c.key.addKeyDownEvent( h2c.view.EDITOR, 71, false, true, switchGrid);\r
                MENU_BAR_CONTROL.EDIT.createSelection( 'show Grid', 'ctrl + G', switchGrid, true, true, true);\r
 \r
                function addImage(){\r
@@ -1952,7 +2024,7 @@ h2c.editor = ( function(){
                        FADE_OUT_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeOut' : 'hide',\r
                        backgroundInfomationElm,\r
                        jqComicElementInformation,\r
-                       xValueElm, yValueElm, zValueElm, aValueElm, wValueElm, hValueElm,\r
+                       xValueElm, yValueElm, zValueElm, aValueElm, wValueElm, hValueElm, aspectElm,\r
                        wPercentElm, hPercentElm,\r
                        currentComicElement = null,\r
                        currentElementType = -1;\r
@@ -1976,6 +2048,7 @@ h2c.editor = ( function(){
                                        hValueElm = CREATER( $( '#comic-element-h'), null, TAB_GROUP_ID);\r
                                        wPercentElm = CREATER( $( '#comic-element-w-percent'), null, TAB_GROUP_ID);\r
                                        hPercentElm = CREATER( $( '#comic-element-h-percent'), null, TAB_GROUP_ID);\r
+                                       aspectElm = $( '#comic-element-keep-aspect');\r
                                        delete this.onInit;\r
                                },\r
                                onResize: function( w, h){\r
@@ -1983,17 +2056,19 @@ h2c.editor = ( function(){
                                                height: this.bodyHeight()\r
                                        });\r
                                },\r
-                               update: function( _currentElementType, x, y, z, a, w, h, wPercent, hPercent){\r
+                               update: function( _currentElementType, x, y, z, a, w, h, wPercent, hPercent, keepAspect){\r
                                        if( currentElementType !== _currentElementType){\r
                                                if( _currentElementType !== -1){\r
                                                        if( _currentElementType === 1){\r
                                                                aValueElm.show();\r
                                                                wPercentElm.hide();\r
                                                                hPercentElm.hide();\r
+                                                               aspectElm.hide();\r
                                                        } else {\r
                                                                aValueElm.hide();\r
                                                                wPercentElm.show();\r
                                                                hPercentElm.show();\r
+                                                               aspectElm.show();\r
                                                        }\r
                                                        currentElementType === -1 && jqComicElementInformation.stop().css( {\r
                                                                filter:         '',\r
@@ -2117,7 +2192,7 @@ h2c.editor = ( function(){
                        canvasW, canvasH, canvasX, canvasY,\r
                        xOffset, yOffset, startCanvasX, startCanvasY,\r
                        isDragging = false,\r
-                       hasFocus = false;\r
+                       isCanvasDraggble = false;\r
                \r
                var GRID_CONTROL = ( function(){\r
                        var elmGrid = document.getElementById( 'grid'),\r
@@ -2247,11 +2322,6 @@ h2c.editor = ( function(){
                                                canvasY = arg[ 1] || canvasY;\r
                                                canvasW = arg[ 2] || canvasW;\r
                                                canvasH = arg[ 3] || canvasH;\r
-                                               \r
-                                               /*\r
-                                                * PANEL_RESIZER_TOP の場合、リサイズに併せてコミック要素を移動させている。\r
-                                                * currentElementを一度PANEL_RESIZER_TOPにしたのちresize
-                                                */\r
                                                onPanelResizeFunction( isTop);\r
                                        }\r
                                }\r
@@ -2267,7 +2337,7 @@ h2c.editor = ( function(){
                                        hitareaW: function(){ return canvasW +2;},\r
                                        hitareaH: function(){ return RESIZER_HEIGHT;},\r
                                        resize: resize,\r
-                                       dragging: function(){\r
+                                       busy: function(){\r
                                                return isDragging;\r
                                        },\r
                                        onMouseDown: function( _mouseX, _mouseY){\r
@@ -2381,10 +2451,6 @@ h2c.editor = ( function(){
                                                                );\r
                                                        },\r
                                                        index: function( _mouseX, _mouseY){\r
-                                                               if( TAIL_MOVER.hitText( _mouseX -x, _mouseY -y) === true){\r
-                                                                       MOUSE_CURSOR( 'move');\r
-                                                                       return TAIL_MOVER_INDEX;\r
-                                                               }\r
                                                                var     p,\r
                                                                        l = POSITION_ARRAY.length;\r
                                                                for( var i=0; i<l; i++){\r
@@ -2413,13 +2479,8 @@ h2c.editor = ( function(){
                                                }\r
                                        })( HIT_AREA),\r
                                        TAIL_MOVER = ( function(){\r
-                                               var     ELM_MOVER = document.getElementById( 'baloon-tail-mover'),\r
-                                                       //ELM_MOVER_PARENT = ELM_MOVER.parentNode,\r
-                                                       //ELM_MOVER_NEXT = ELM_MOVER.nextSibling,\r
-                                                       SIZE = ( function(){\r
-                                                               var _size = h2c.util.getElementSize( ELM_MOVER);\r
-                                                               return _size.width;\r
-                                                       })(),\r
+                                               var     ELM_MOVER = document.getElementById( 'balloon-tail-mover'),\r
+                                                       SIZE = h2c.util.getElementSize( ELM_MOVER).width,\r
                                                        SIN = Math.sin,\r
                                                        COS = Math.cos,\r
                                                        ATAN = Math.atan,\r
@@ -2428,7 +2489,6 @@ h2c.editor = ( function(){
                                                        RAD_TO_DEG = 1 /DEG_TO_RAD,\r
                                                        currentText = null,\r
                                                        x, y, w, h, a, radA;\r
-                                               //ELM_MOVER_PARENT.removeChild( ELM_MOVER);\r
                                                \r
                                                function draw( _w, _h, _a){\r
                                                        w = _w !== undefined ? _w : w;\r
@@ -2446,22 +2506,22 @@ h2c.editor = ( function(){
                                                        update: draw,\r
                                                        show: function( _currentText){\r
                                                                /*\r
-                                                                * domから抜かないとieで表示されてしまう。visibilityのほうがいい
+                                                                * visibilityのほうがいい, display:none だと ie で描画が狂う
                                                                 */\r
-                                                               //ELM_MOVER_NEXT !== ELM_MOVER.nextSibling && ELM_MOVER_PARENT.insertBefore(ELM_MOVER, ELM_MOVER_NEXT);\r
                                                                ELM_MOVER.style.visibility = '';\r
                                                                draw( _currentText.w, _currentText.h, _currentText.angle());\r
                                                                currentText = _currentText;\r
                                                        },\r
                                                        hide: function(){\r
-                                                               //ELM_MOVER.parentNode === ELM_MOVER_PARENT && ELM_MOVER_PARENT.removeChild( ELM_MOVER);\r
                                                                ELM_MOVER.style.visibility = 'hidden';\r
                                                                currentText = null;\r
                                                        },\r
-                                                       hitText: function( _mouseX, _mouseY){\r
+                                                       hitTest: function( _mouseX, _mouseY){\r
                                                                var _x = x -SIZE /2,\r
                                                                        _y = y -SIZE /2;\r
-                                                               return currentIsTextElement === true && _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY;\r
+                                                                       ret = currentIsTextElement === true && _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY;\r
+                                                               ret === true && MOUSE_CURSOR( 'move');\r
+                                                               return ret;\r
                                                        },\r
                                                        onDrag: function( _mouseX, _mouseY){\r
                                                                draw( w, h,\r
@@ -2475,7 +2535,12 @@ h2c.editor = ( function(){
                                                }\r
                                        })(),\r
                                        COMIC_ELEMENT_CONSOLE = ( function(){\r
-                                               var     jqStage,\r
+                                               var LAYER_BACK_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer back', 'ctrl + B', layerBack, false, true, false),\r
+                                                       LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer forward', 'ctrl + F', layerForward, false, false, false),\r
+                                                       DELETE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'delete', 'ctrl + D', del, false, true, true),\r
+                                                       EDIT_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'Edit Text', 'ctrl + E', edit, false, true, false),\r
+                                                       CHANGE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'change', 'ctrl + U', change, false, false, true),\r
+                                                       jqStage,\r
                                                        jqConsoleParent,\r
                                                        jqConsoleWrapper,\r
                                                        jqConsoleTail,\r
@@ -2489,7 +2554,14 @@ h2c.editor = ( function(){
                                                        consoleX, consoleY,\r
                                                        tailSize = 10,\r
                                                        buttonClickable = false;\r
-                                                       \r
+                                               \r
+                                               h2c.key.addKeyDownEvent( h2c.view.EDITOR, 66, false, true, layerBack);\r
+                                               h2c.key.addKeyDownEvent( h2c.view.EDITOR, 70, false, true, layerForward);\r
+                                               \r
+                                               h2c.key.addKeyDownEvent( h2c.view.EDITOR, 68, false, true, del);\r
+                                               h2c.key.addKeyDownEvent( h2c.view.EDITOR, 69, false, true, edit);\r
+                                               h2c.key.addKeyDownEvent( h2c.view.EDITOR, 85, false, true, change);\r
+                                               \r
                                                function buttonBackOrForward( isBack){\r
                                                        var     offest = jqConsoleWrapper.offset();\r
                                                        jqConsoleWrapper.css( {\r
@@ -2500,6 +2572,41 @@ h2c.editor = ( function(){
                                                        buttonClickable === isBack && ( isBack === true ? jqConsoleParent : jqStage).append( jqConsoleWrapper);\r
                                                        buttonClickable = !isBack;\r
                                                }\r
+                                               function layerBack(){\r
+                                                       if( currentElement === null) return;\r
+                                                       replaceComicElement( currentElement, false);\r
+                                                       updateInfomation();\r
+                                                       SAVE( restoreReplaceObject, [ currentElement, true], [ currentElement, false]);\r
+                                                       var _z = currentElement.z;\r
+                                                       LAYER_BACK_BUTTON.visible( _z > 0);\r
+                                                       LAYER_FORWARD_BUTTON.visible( _z < DRAGGABLE_ELEMENT_ARRAY.length -NUM_RESIZER -1);\r
+                                               }\r
+                                               function layerForward(){\r
+                                                       if( currentElement === null) return;\r
+                                                       replaceComicElement( currentElement, true);\r
+                                                       updateInfomation();\r
+                                                       SAVE( restoreReplaceObject, [ currentElement, false], [ currentElement, true]);\r
+                                                       var _z = currentElement.z;\r
+                                                       LAYER_BACK_BUTTON.visible( _z > 0);\r
+                                                       LAYER_FORWARD_BUTTON.visible( _z < DRAGGABLE_ELEMENT_ARRAY.length -NUM_RESIZER -1);\r
+                                               }\r
+                                               function del(){\r
+                                                       if( currentElement === null) return;\r
+                                                       buttonBackOrForward( true);\r
+                                                       removeComicElement( currentElement);\r
+                                                       SAVE( restoreComicElement, [ true, currentElement], [ false, currentElement], true);\r
+                                                       COMIC_ELEMENT_OPERATOR.hide();\r
+                                               }\r
+                                               function edit(){\r
+                                                       if( currentElement === null) return;\r
+                                                       TEXT_EDITOR_CONTROL.show( currentElement);\r
+                                                       buttonBackOrForward( true);\r
+                                               }\r
+                                               function change(){\r
+                                                       if( currentElement === null) return;\r
+                                                       buttonBackOrForward( true);\r
+                                                       IMAGE_GROUP_EXPROLER.show( currentElement.url);\r
+                                               }\r
                                                return {\r
                                                        init: function(){\r
                                                                jqStage = jqEditor;\r
@@ -2517,35 +2624,11 @@ h2c.editor = ( function(){
                                                                jqConsoleWrapper = $( '#comic-element-consol-wrapper').hide();\r
                                                                jqConsoleParent = jqConsoleWrapper.parent();\r
                                                                \r
-                                                               $( '#edit-text-button').click( function(){\r
-                                                                       if( currentElement === null) return;\r
-                                                                       TEXT_EDITOR_CONTROL.show( currentElement);\r
-                                                                       buttonBackOrForward( true);\r
-                                                               });\r
-                                                               $( '#delete-image-button, #delete-text-button').click( function(){\r
-                                                                       if( currentElement === null) return;\r
-                                                                       buttonBackOrForward( true);\r
-                                                                       removeComicElement( currentElement);\r
-                                                                       SAVE( restoreComicElement, [ true, currentElement], [ false, currentElement], true);\r
-                                                                       COMIC_ELEMENT_OPERATOR.hide();\r
-                                                               });\r
-                                                               $( '#change-image-button').click( function(){\r
-                                                                       if( currentElement === null) return;\r
-                                                                       buttonBackOrForward( true);\r
-                                                                       IMAGE_GROUP_EXPROLER.show( currentElement.url);\r
-                                                               });\r
-                                                               $( '#layer-forward-button, #forward-text-button').click( function(){\r
-                                                                       if( currentElement === null) return;\r
-                                                                       replaceComicElement( currentElement, true);\r
-                                                                       updateInfomation();\r
-                                                                       SAVE( restoreReplaceObject, [ currentElement, false], [ currentElement, true]);\r
-                                                               });\r
-                                                               $( '#layer-back-button, #back-text-button').click( function(){\r
-                                                                       if( currentElement === null) return;\r
-                                                                       replaceComicElement( currentElement, false);\r
-                                                                       updateInfomation();\r
-                                                                       SAVE( restoreReplaceObject, [ currentElement, true], [ currentElement, false]);\r
-                                                               });\r
+                                                               $( '#edit-text-button').click( edit);\r
+                                                               $( '#delete-image-button, #delete-text-button').click( del);\r
+                                                               $( '#change-image-button').click( change);\r
+                                                               $( '#layer-forward-button, #forward-text-button').click( layerForward);\r
+                                                               $( '#layer-back-button, #back-text-button').click( layerBack);\r
                                                                                                                        \r
                                                                delete COMIC_ELEMENT_CONSOLE.init;\r
                                                        },\r
@@ -2553,7 +2636,8 @@ h2c.editor = ( function(){
                                                                visible === false && jqConsoleWrapper.show();\r
                                                                visible = true;\r
                                                                currentElement = _currentElement;\r
-                                                               var _currentType = _currentElement.type;\r
+                                                               var _currentType = _currentElement.type,\r
+                                                                       _z = _currentElement.z;\r
                                                                if( currentType !== _currentType){\r
                                                                        currentType = _currentType;\r
                                                                        jqImgConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_IMAGE);\r
@@ -2563,6 +2647,12 @@ h2c.editor = ( function(){
                                                                }\r
                                                                consoleX = Math.floor( ( _w -consoleWidth) /2);\r
                                                                \r
+                                                               LAYER_BACK_BUTTON.visible( _z > 0);\r
+                                                               LAYER_FORWARD_BUTTON.visible( _z < DRAGGABLE_ELEMENT_ARRAY.length -NUM_RESIZER -1);\r
+                                                               DELETE_BUTTON.visible( true);\r
+                                                               EDIT_BUTTON.visible( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
+                                                               CHANGE_BUTTON.visible( false);\r
+                                                               \r
                                                                if( _w > consoleWidth * 1.5 && _h > consoleHeight * 1.5){\r
                                                                        consoleY = Math.floor( ( _h -consoleHeight) /2);\r
                                                                        jqConsoleWrapper.css( {\r
@@ -2581,6 +2671,11 @@ h2c.editor = ( function(){
                                                                visible === true && jqConsoleWrapper.hide();\r
                                                                visible = false;\r
                                                                currentElement = null;\r
+                                                               LAYER_BACK_BUTTON.visible( false);\r
+                                                               LAYER_FORWARD_BUTTON.visible( false);\r
+                                                               DELETE_BUTTON.visible( false);\r
+                                                               EDIT_BUTTON.visible( false);\r
+                                                               CHANGE_BUTTON.visible( false);\r
                                                        },\r
                                                        x: function(){ return consoleX;},\r
                                                        y: function(){ return consoleY;},\r
@@ -2599,25 +2694,226 @@ h2c.editor = ( function(){
                                                        }\r
                                                }\r
                                        })(),\r
-                                       TAIL_MOVER_INDEX = 99,\r
-                                       RESIZE_COMMAND_ARRAY = [\r
-                                               { x:    0, w:    0, y:  1, h:   -1}, //top\r
-                                               { x:    1, w:   -1, y:  0, h:    0}, //left\r
-                                               { x:    0, w:    1, y:  0, h:    0}, //right\r
-                                               { x:    0, w:    0, y:  0, h:    1}, //bottom\r
-                                               { x:    1, w:   -1, y:  1, h:   -1}, //top-left\r
-                                               { x:    0, w:    1, y:  1, h:   -1}, //top-right\r
-                                               { x:    1, w:   -1, y:  0, h:    1}, //bottom-left\r
-                                               { x:    0, w:    1, y:  0, h:    1}  //bottom-right\r
-                                       ],\r
-                                       currentResizerIndex = -1,\r
+                                       TAIL_CONTROLER = ( function(){\r
+                                               var startA;\r
+                                               return {\r
+                                                       onStart: function( _mouseX, _mouseY){\r
+                                                               if( TAIL_MOVER.hitTest( _mouseX -x, _mouseY -y) === true){\r
+                                                                       startA = currentElement.angle();\r
+                                                                       return true;\r
+                                                               }\r
+                                                               return false;\r
+                                                       },\r
+                                                       onDrag: function( _mouseX, _mouseY){\r
+                                                               TAIL_MOVER.onDrag( _mouseX -x -w /2, _mouseY -y -h /2); //Balloonの中心を0,0とする座標系に変換\r
+                                                       },\r
+                                                       onFinish: function(){\r
+                                                               if( startA === currentElement.angle()) return;\r
+                                                               // resize( x, y, w, h, currentElement.angle());\r
+                                                               saveComicElementStatus( x, y, w, h, startA);\r
+                                                       },\r
+                                                       onCancel: function(){\r
+                                                               resize( undefined, undefined, undefined, undefined, startA);\r
+                                                       }\r
+                                               }\r
+                                       })(),\r
+                                       RESIZE_CONTROLER = ( function(){\r
+                                               var RESIZE_COMMAND_ARRAY = [\r
+                                                               { x:    0, w:    0, y:  1, h:   -1}, //top\r
+                                                               { x:    1, w:   -1, y:  0, h:    0}, //left\r
+                                                               { x:    0, w:    1, y:  0, h:    0}, //right\r
+                                                               { x:    0, w:    0, y:  0, h:    1}, //bottom\r
+                                                               { x:    1, w:   -1, y:  1, h:   -1}, //top-left\r
+                                                               { x:    0, w:    1, y:  1, h:   -1}, //top-right\r
+                                                               { x:    1, w:   -1, y:  0, h:    1}, //bottom-left\r
+                                                               { x:    0, w:    1, y:  0, h:    1}  //bottom-right\r
+                                                       ],\r
+                                                       currentResizerIndex = -1,\r
+                                                       startX, startY, startW, startH, startFilpV, startFilpH, startAspect,\r
+                                                       baseX, baseY, baseW, baseH,\r
+                                                       currentX, currentY, currentW, currentH,\r
+                                                       transX, transY, transW, transH,\r
+                                                       xOffset, yOffset;\r
+                                                       \r
+                                               function update( _x, _y, _w, _h){\r
+                                                       _x = _x !== undefined ? _x : currentX;\r
+                                                       _y = _y !== undefined ? _y : currentY;\r
+                                                       _w = _w !== undefined ? _w : currentW;\r
+                                                       _h = _h !== undefined ? _h : currentH;\r
+                                                       \r
+                                                       if( currentIsTextElement === false && currentResizerIndex > 3 && h2c.key.shiftEnabled() === true){\r
+                                                               if( startAspect >= 1){\r
+                                                                       var __w = _w;\r
+                                                                       _w = Math.floor( startAspect * _h);\r
+                                                                       _x += currentResizerIndex % 2 === 0 ? __w -_w : 0;\r
+                                                               } else {\r
+                                                                       var __h = _h;\r
+                                                                       _h = Math.floor( _w / startAspect);\r
+                                                                       _y += currentResizerIndex <= 5 ? __h -_h : 0;\r
+                                                               }\r
+                                                       }\r
+                                                       transX = _x;\r
+                                                       transY = _y;\r
+                                                       transW = _w;\r
+                                                       transH = _h;\r
+                                                       RESIZER.update( _x, _y, _w, _h);\r
+                                                       currentElement.resize( _x, _y, _w, _h);\r
+                                                       currentIsTextElement === true && TAIL_MOVER.update( _w, _h);\r
+                                                       COMIC_ELEMENT_CONSOLE.show( currentElement, _w, _h);\r
+                                                       updateInfomation( _x, _y, undefined, undefined, _w, _h);\r
+                                               }\r
+                                                       \r
+                                               return {\r
+                                                       onStart: function( _mouseX, _mouseY){\r
+                                                               if( currentElement.keepSize === true) return false;\r
+                                                               currentResizerIndex = RESIZER.index( _mouseX, _mouseY);\r
+                                                               if( currentResizerIndex === -1) return false;\r
+                                                               xOffset = _mouseX;\r
+                                                               yOffset = _mouseY;\r
+                                                               startX = baseX = x;\r
+                                                               startY = baseY = y;\r
+                                                               startW = baseW = w;\r
+                                                               startH = baseH = h;\r
+                                                               startFilpV = flipV;\r
+                                                               startFilpH = flipH;\r
+                                                               startAspect = startW /startH;\r
+                                                               return true;\r
+                                                       },\r
+                                                       onDrag: function( _mouseX, _mouseY){\r
+                                                               var com = RESIZE_COMMAND_ARRAY[ currentResizerIndex],\r
+                                                                       moveX = _mouseX -xOffset,\r
+                                                                       moveY = _mouseY -yOffset,\r
+                                                                       _x = baseX +moveX *com.x,\r
+                                                                       _y = baseY +moveY *com.y,\r
+                                                                       _w = baseW +moveX *com.w,\r
+                                                                       _h = baseH +moveY *com.h,\r
+                                                                       _updated = moveX !== 0 || moveY !== 0;\r
+\r
+                                                               if( _w >= MIN_OBJECT_SIZE && _h >= MIN_OBJECT_SIZE){\r
+                                                                       \r
+                                                               } else \r
+                                                               if( _w >= -MIN_OBJECT_SIZE && _h >= -MIN_OBJECT_SIZE){\r
+                                                                       return;\r
+                                                               } else \r
+                                                               if( currentIsTextElement === true){\r
+                                                                       \r
+                                                               } else \r
+                                                               if( _w < -MIN_OBJECT_SIZE || _h < -MIN_OBJECT_SIZE){\r
+                                                                       if( _w < -MIN_OBJECT_SIZE && _h > MIN_OBJECT_SIZE){\r
+                                                                       // flipH\r
+                                                                               var __x = _x;\r
+                                                                               baseX = _x = _x +_w;\r
+                                                                               baseY = _y;\r
+                                                                               baseW = _w = __x -_x;\r
+                                                                               baseH = _h;\r
+                                                                               currentElement.flip( false, true);\r
+                                                                               currentResizerIndex = RESIZER.flip( false, true);\r
+                                                                               flipV = currentElement.flipV();\r
+                                                                       } else \r
+                                                                       if( _w > MIN_OBJECT_SIZE && _h < -MIN_OBJECT_SIZE){\r
+                                                                       // flipV\r
+                                                                               var __y = _y;\r
+                                                                               baseX = _x;\r
+                                                                               baseY = _y = _y +_h;\r
+                                                                               baseW = _w;\r
+                                                                               baseH = _h = __y -_y;\r
+                                                                               currentElement.flip( true, false);\r
+                                                                               currentResizerIndex = RESIZER.flip( true, false);\r
+                                                                               flipH = currentElement.flipH();\r
+                                                                       } else {\r
+                                                                       // flipVH\r
+                                                                               var __x = _x,\r
+                                                                                       __y = _y;\r
+                                                                               baseX = _x = _x +_w;\r
+                                                                               baseY = _y = _y +_h;\r
+                                                                               baseW = _w = __x -_x;\r
+                                                                               baseH = _h = __y -_y;\r
+                                                                               currentElement.flip( true, true);\r
+                                                                               currentResizerIndex = RESIZER.flip( true, true);\r
+                                                                               flipV = currentElement.flipV();\r
+                                                                               flipH = currentElement.flipH();\r
+                                                                       }\r
+                                                                       _updated = true;\r
+                                                                       xOffset = _mouseX;\r
+                                                                       yOffset = _mouseY;      \r
+                                                               }\r
+                                                               currentX = _x;\r
+                                                               currentY = _y;\r
+                                                               currentW = _w;\r
+                                                               currentH = _h;\r
+                                                               _updated === true && update( _x, _y, _w, _h);\r
+                                                       },\r
+                                                       onFinish: function(){\r
+                                                               MOUSE_CURSOR( '');\r
+                                                               if( currentW === w && currentH === h && currentX === x && currentY === y) return;\r
+                                                               resize( transX, transY, transW, transH);\r
+                                                               currentElement.resize( transX, transY, transW, transH);\r
+                                                               saveComicElementStatus( startX, startY, startW, startH, angle, startFilpV, startFilpH);\r
+                                                       },\r
+                                                       onCancel: function(){\r
+                                                               MOUSE_CURSOR( '');\r
+                                                               resize( startX, startY, startW, startH);\r
+                                                               currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
+                                                                       currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :\r
+                                                                       currentElement.animate( startX, startY, startW, startH, angle);\r
+                                                       },\r
+                                                       onShiftUpdate: update,\r
+                                                       onCtrlUpdate: update\r
+                                               }\r
+                                       })(),\r
+                                       POSITION_CONTROLER = ( function(){\r
+                                               var startX, startY,\r
+                                                       currentX, currentY,\r
+                                                       xOffset, yOffset,\r
+                                                       isCopy = false;\r
+                                               \r
+                                               function update( _x, _y){\r
+                                                       _x = currentX = _x !== undefined ? _x : currentX;\r
+                                                       _y = currentY = _y !== undefined ? _y : currentY;\r
+                                                       RESIZER.update( _x, _y);\r
+                                                       currentElement.resize( _x, _y);\r
+                                                       updateInfomation( _x, _y);                                                      \r
+                                               }\r
+                                               \r
+                                               return {\r
+                                                       onStart: function( _mouseX, _mouseY){\r
+                                                               xOffset = _mouseX;\r
+                                                               yOffset = _mouseY;\r
+                                                               startX = currentX = x;\r
+                                                               startY = currentY = y;\r
+                                                               MOUSE_CURSOR( 'move');\r
+                                                       },\r
+                                                       onDrag: function( _mouseX, _mouseY){\r
+                                                               var moveX = _mouseX -xOffset,\r
+                                                                       moveY = _mouseY -yOffset,\r
+                                                                       _x = x +moveX,\r
+                                                                       _y = y +moveY;\r
+                                                               if( GRID_ENABLED() === true){\r
+                                                                       _x = Math.floor( _x / 10) * 10;\r
+                                                                       _y = Math.floor( _y / 10) * 10;\r
+                                                               }\r
+                                                               update( _x, _y);\r
+                                                       },\r
+                                                       onFinish: function(){\r
+                                                               MOUSE_CURSOR( '');\r
+                                                               if( currentX === startX && currentY === startY) return;\r
+                                                               resize( currentX, currentY);\r
+                                                               currentElement.resize( currentX, currentY);\r
+                                                               saveComicElementStatus( startX, startY);\r
+                                                       },\r
+                                                       onCancel: function(){\r
+                                                               MOUSE_CURSOR( '');\r
+                                                               resize( startX, startY);\r
+                                                               currentElement.animate( startX, startY);\r
+                                                       },\r
+                                                       onShiftUpdate: update,\r
+                                                       onCtrlUpdate: update\r
+                                               }\r
+                                       })(),\r
                                        currentIsTextElement = false,\r
+                                       currentControler = null,\r
                                        currentElement = null,\r
-                                       x, y, w, h, angle, flipV, flipH,\r
-                                       startX, startY, startW, startH, startA, startFilpV, startFilpH,\r
-                                       xOffset, yOffset,\r
-                                       isDragging = false,\r
-                                       currentUpdated = false;\r
+                                       x, y, w, h, angle, flipV, flipH;\r
 \r
                                        function resize( _x, _y, _w, _h, _angle){\r
                                                x = _x !== undefined ? _x : x;\r
@@ -2631,7 +2927,7 @@ h2c.editor = ( function(){
                                                COMIC_ELEMENT_CONSOLE.show( currentElement, w, h);\r
                                                updateInfomation( x, y, currentElement.z, angle, w, h);\r
                                        }\r
-                                       function updateInfomation( _x, _y, _z, _a, _w, _h){\r
+                                       function updateInfomation( _x, _y, _z, _a, _w, _h, keepAspect){\r
                                                _w = _w !== undefined ? _w : w;\r
                                                _h = _h !== undefined ? _h : h;\r
                                                INFOMATION(\r
@@ -2643,27 +2939,25 @@ h2c.editor = ( function(){
                                                        _w,\r
                                                        _h,\r
                                                        currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualW() === 0 ? '?' : Math.floor( _w / currentElement.actualW() *100)),\r
-                                                       currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualH() === 0 ? '?' : Math.floor( _h / currentElement.actualH() *100))\r
+                                                       currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualH() === 0 ? '?' : Math.floor( _h / currentElement.actualH() *100)),\r
+                                                       currentElement === null || currentIsTextElement === true ? '-' : currentElement.keepAspect\r
                                                );\r
                                        }\r
                                        function show( _currentElement){\r
                                                currentElement === null && RESIZER.show();\r
                                                if( currentElement !== _currentElement){\r
                                                        currentElement = _currentElement;\r
-                                                       startX = _currentElement.x;\r
-                                                       startY = _currentElement.y;\r
-                                                       startW = _currentElement.w;\r
-                                                       startH = _currentElement.h;\r
                                                        \r
                                                        currentIsTextElement = ( _currentElement.type === COMIC_ELEMENT_TYPE_TEXT);\r
-                                                       startA = currentIsTextElement === true ? _currentElement.angle() : 0;\r
                                                        currentIsTextElement === true ? TAIL_MOVER.show( _currentElement) : TAIL_MOVER.hide();\r
                                                        \r
-                                                       startFilpV = flipV = currentIsTextElement === false ? _currentElement.flipV() : 0;\r
-                                                       startFilpH = flipH = currentIsTextElement === false ? _currentElement.flipH() : 0;\r
+                                                       flipV = currentIsTextElement === false ? _currentElement.flipV() : 0;\r
+                                                       flipH = currentIsTextElement === false ? _currentElement.flipH() : 0;\r
                                                        \r
-                                                       resize( startX, startY, startW, startH, startA);\r
-                                                       isDragging = currentUpdated = false;\r
+                                                       resize(\r
+                                                               _currentElement.x, _currentElement.y, _currentElement.w, _currentElement.h,\r
+                                                               currentIsTextElement === true ? _currentElement.angle() : 0\r
+                                                       );\r
                                                }\r
                                        }\r
                                        function hide(){\r
@@ -2671,7 +2965,6 @@ h2c.editor = ( function(){
                                                currentElement = null;\r
                                                MOUSE_CURSOR( '');\r
                                                TAIL_MOVER.hide();\r
-                                               isDragging = currentUpdated = false;\r
                                                COMIC_ELEMENT_CONSOLE.hide();\r
                                                updateInfomation();\r
                                        }\r
@@ -2685,31 +2978,41 @@ h2c.editor = ( function(){
                                                _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
                                                        _currentElement.animate( _x, _y, _w, _h, _flipV, _flipH) :\r
                                                        _currentElement.animate( _x, _y, _w, _h, _a);\r
+                                               currentControler = null;\r
                                                currentElement === _currentElement ? resize( _x, _y, _w, _h, _a) : show( _currentElement);\r
                                        }\r
-                                       function saveState(){\r
+                                       function saveComicElementStatus( startX, startY, startW, startH, startA, startFilpV, startFilpH){\r
+                                               startX = startX !== undefined ? startX : x;\r
+                                               startY = startY !== undefined ? startY : y;\r
+                                               startW = startW !== undefined ? startW : w;\r
+                                               startH = startH !== undefined ? startH : h;\r
+                                               startA = startA !== undefined ? startA : angle;\r
+                                               startFilpV = startFilpV !== undefined ? startFilpV : flipV;\r
+                                               startFilpH = startFilpH !== undefined ? startFilpH : flipH;\r
                                                currentElement && SAVE( restoreState,\r
                                                        [ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH],\r
                                                        [ currentElement, x, y, w, h, angle, flipV, flipH]\r
                                                );\r
-                                               startX = x;\r
-                                               startY = y;\r
-                                               startW = w;\r
-                                               startH = h;\r
-                                               startA = angle;\r
-                                               startFilpV = flipV;\r
-                                               startFilpH = flipH;\r
                                        }\r
+                                       h2c.key.addKeyUpdateEvent( h2c.view.EDITOR, 16, true, undefined, function(){\r
+                                               currentControler !== null && currentControler.onShiftUpdate && currentControler.onShiftUpdate();\r
+                                       });\r
+                                       h2c.key.addKeyUpdateEvent( h2c.view.EDITOR, 17, undefined, true, function(){\r
+                                               currentControler !== null && currentControler.onCtrlUpdate && currentControler.onCtrlUpdate();\r
+                                       });\r
+                                       h2c.key.addKeyDownEvent( h2c.view.EDITOR, 27, false, false, function(){\r
+                                               currentControler !== null && currentControler.onCancel && currentControler.onCancel();\r
+                                               currentControler = null;\r
+                                       });\r
                                return {\r
                                        init: function(){\r
-                                               COMIC_ELEMENT_CONSOLE.init(); // COMIC_ELEMENT_CONSOLE が要素の高さを取得するため、RESIZER.initがあと。\r
-                                               \r
+                                               COMIC_ELEMENT_CONSOLE.init();\r
                                                hide();\r
                                                delete COMIC_ELEMENT_OPERATOR.init;\r
                                        },\r
                                        hide: hide,\r
-                                       dragging: function(){\r
-                                               return isDragging;\r
+                                       busy: function(){\r
+                                               return currentControler !== null;\r
                                        },\r
                                        hitareaX: function( _comicElement, _x){\r
                                                if( _comicElement === currentElement){\r
@@ -2737,108 +3040,28 @@ h2c.editor = ( function(){
                                        },\r
                                        onMouseDown: function( _currentElement, _mouseX, _mouseY){\r
                                                //show( _currentElement);\r
-                                               xOffset = _mouseX;\r
-                                               yOffset = _mouseY;\r
-                                               currentResizerIndex = RESIZER.index( _mouseX, _mouseY);\r
-                                               currentResizerIndex === -1 && MOUSE_CURSOR( 'move');\r
-                                               isDragging = true;\r
+                                               if( currentIsTextElement === true && TAIL_CONTROLER.onStart( _mouseX, _mouseY) === true){\r
+                                                       currentControler = TAIL_CONTROLER;\r
+                                               } else\r
+                                               if( RESIZE_CONTROLER.onStart( _mouseX, _mouseY) === true){\r
+                                                       currentControler = RESIZE_CONTROLER;\r
+                                               } else {\r
+                                                       POSITION_CONTROLER.onStart( _mouseX, _mouseY)\r
+                                                       currentControler = POSITION_CONTROLER;\r
+                                               }\r
                                        },\r
                                        onMouseMove: function( _currentElement, _mouseX, _mouseY){\r
                                                show( _currentElement);\r
-                                               var moveX = _mouseX -xOffset,\r
-                                                       moveY = _mouseY -yOffset;\r
-                                               if( isDragging === true){\r
-                                                       if( currentResizerIndex !== -1){\r
-                                                               if( currentResizerIndex === TAIL_MOVER_INDEX){\r
-                                                                       TAIL_MOVER.onDrag( _mouseX -x -w /2, _mouseY -y -h /2); //Balloonの中心を0,0とする座標系に変換\r
-                                                               } else {\r
-                                                                       var com = RESIZE_COMMAND_ARRAY[ currentResizerIndex],\r
-                                                                               _x = x +moveX *com.x,\r
-                                                                               _y = y +moveY *com.y,\r
-                                                                               _w = w +moveX *com.w,\r
-                                                                               _h = h +moveY *com.h,\r
-                                                                               update = false;\r
-                                                                       \r
-                                                                       if( _w > MIN_OBJECT_SIZE && _h > MIN_OBJECT_SIZE){\r
-                                                                               update = true;\r
-                                                                       } else\r
-                                                                       if( currentElement.type === COMIC_ELEMENT_TYPE_TEXT){\r
-                                                                       } else\r
-                                                                       if( _w < -MIN_OBJECT_SIZE || _h < -MIN_OBJECT_SIZE){\r
-                                                                               if( _w < -MIN_OBJECT_SIZE && _h > MIN_OBJECT_SIZE){\r
-                                                                               // flipH\r
-                                                                                       var __x = _x;\r
-                                                                                       x = _x = _x +_w;\r
-                                                                                       y = _y;\r
-                                                                                       w = _w = __x -_x;\r
-                                                                                       h = _h;\r
-                                                                                       currentElement.flip( false, true);\r
-                                                                                       currentResizerIndex = RESIZER.flip( false, true);\r
-                                                                                       flipV = currentElement.flipV();\r
-                                                                               } else\r
-                                                                               if( _w > MIN_OBJECT_SIZE && _h < -MIN_OBJECT_SIZE){\r
-                                                                               // flipV\r
-                                                                                       var __y = _y;\r
-                                                                                       x = _x;\r
-                                                                                       y = _y = _y +_h;\r
-                                                                                       w = _w;\r
-                                                                                       h = _h = __y -_y;\r
-                                                                                       currentElement.flip( true, false);\r
-                                                                                       currentResizerIndex = RESIZER.flip( true, false);\r
-                                                                                       flipH = currentElement.flipH();\r
-                                                                               } else {\r
-                                                                               // flipVH\r
-                                                                                       var __x = _x,\r
-                                                                                               __y = _y;\r
-                                                                                       x = _x = _x +_w;\r
-                                                                                       y = _y = _y +_h;\r
-                                                                                       w = _w = __x -_x;\r
-                                                                                       h = _h = __y -_y;\r
-                                                                                       currentElement.flip( true, true);\r
-                                                                                       currentResizerIndex = RESIZER.flip( true, true);\r
-                                                                                       flipV = currentElement.flipV();\r
-                                                                                       flipH = currentElement.flipH();\r
-                                                                               }\r
-                                                                               update = true;\r
-                                                                               xOffset = _mouseX;\r
-                                                                               yOffset = _mouseY;      \r
-                                                                       }\r
-                                                                       \r
-                                                                       if( update === true){\r
-                                                                               RESIZER.update( _x, _y, _w, _h);\r
-                                                                               currentElement.resize( _x, _y, _w, _h);\r
-                                                                               currentIsTextElement === true && TAIL_MOVER.update( _w, _h);\r
-                                                                               COMIC_ELEMENT_CONSOLE.show( currentElement, _w, _h);\r
-                                                                               updateInfomation( _x, _y, undefined, undefined, _w, _h);                                                                                \r
-                                                                       }\r
-                                                               }\r
-                                                               currentUpdated = ( currentUpdated === true) ? true : ( moveX !== 0 || moveY !== 0);\r
-                                                       } else {\r
-                                                               var _x = x +moveX,\r
-                                                                       _y = y +moveY;\r
-                                                               if( GRID_ENABLED() === true){\r
-                                                                       _x = Math.floor( _x / 10) * 10;\r
-                                                                       _y = Math.floor( _y / 10) * 10;\r
-                                                               }\r
-                                                               RESIZER.update( _x, _y);\r
-                                                               currentElement.resize( _x, _y);\r
-                                                               currentUpdated = ( currentUpdated === true) ? true : ( moveX !== 0 || moveY !== 0);\r
-                                                               updateInfomation( _x, _y);\r
-                                                       }                                                       \r
+                                               if( currentControler !== null){\r
+                                                       currentControler.onDrag( _mouseX, _mouseY);                                             \r
                                                } else {\r
                                                        currentElement && COMIC_ELEMENT_CONSOLE.onMouseMove( _mouseX -x, _mouseY -y);\r
-                                                       RESIZER.index( _mouseX, _mouseY) === -1 && MOUSE_CURSOR( '');\r
+                                                       TAIL_MOVER.hitTest( _mouseX -x, _mouseY -y) === false && RESIZER.index( _mouseX, _mouseY) === -1 && MOUSE_CURSOR( '');\r
                                                }\r
                                        },\r
                                        onMouseUp: function( _currentElement, _mouseX, _mouseY){\r
-                                               resize(\r
-                                                       RESIZER.x(), RESIZER.y(), RESIZER.w(), RESIZER.h(),\r
-                                                       currentIsTextElement === true ? currentElement.angle() : 0\r
-                                               );\r
-                                               currentElement && currentElement.resize( x, y, w, h);\r
-                                               MOUSE_CURSOR( '');\r
-                                               currentUpdated === true && saveState();\r
-                                               isDragging = currentUpdated = false;\r
+                                               currentControler !== null && currentControler.onFinish();\r
+                                               currentControler = null;\r
                                        },\r
                                        onMouseClick: function( _mouseX, _mouseY){\r
                                                //return currentElement ? COMIC_ELEMENT_CONSOLE.onMouseClick( _mouseX -x, _mouseY -y) : false;\r
@@ -2867,8 +3090,8 @@ h2c.editor = ( function(){
                                        shift: function( _shiftX, _shiftY){\r
                                                update( this.x +_shiftX, this.y +_shiftY);\r
                                        },\r
-                                       dragging: function(){\r
-                                               return OPERATOR.dragging();\r
+                                       busy: function(){\r
+                                               return OPERATOR.busy();\r
                                        },\r
                                        onMouseMove: function( _mouseX, _mouseY){\r
                                                OPERATOR.onMouseMove( this, _mouseX, _mouseY);\r
@@ -2962,6 +3185,7 @@ h2c.editor = ( function(){
                                                },\r
                                                actualW: function(){ return actualW;},\r
                                                actualH: function(){ return actualH;},\r
+                                               keepSize: false,\r
                                                resize: update,\r
                                                animate: function ( _x, _y, _w, _h, _flipH, _flipV){\r
                                                        flipH = _flipH !== undefined ? _flipH : flipH;\r
@@ -3069,7 +3293,7 @@ h2c.editor = ( function(){
                                                        delete this.init;\r
                                                },\r
                                                angle: function( _a){\r
-                                                       _a !== undefined && update( NaN, NaN, NaN, NaN, _a);\r
+                                                       _a !== undefined && update( undefined, undefined, undefined, undefined, _a);\r
                                                        return a;\r
                                                },\r
                                                text: function( _text){\r
@@ -3262,7 +3486,7 @@ h2c.editor = ( function(){
                                                _Y = _mouseY -( _canvasY || canvasY),\r
                                                _elm, _x, _y;\r
                                                \r
-                                       if( currentElement !== null && currentElement.dragging() === true){\r
+                                       if( currentElement !== null && currentElement.busy() === true){\r
                                                currentElement.onMouseMove( _X, _Y);\r
                                                return true;\r
                                        }\r
@@ -3292,7 +3516,7 @@ h2c.editor = ( function(){
                                        return false;\r
                                },\r
                                onMouseUp: function( _mouseX, _mouseY){\r
-                                       var ret = currentElement !== null && currentElement.dragging() === true;\r
+                                       var ret = currentElement !== null && currentElement.busy() === true;\r
                                        ret === true && currentElement.onMouseUp( _mouseX -_canvasX || canvasX, _mouseY -_canvasY || canvasY);\r
                                        _canvasX = _canvasY = NaN;\r
                                        return ret;\r
@@ -3310,14 +3534,14 @@ h2c.editor = ( function(){
                                                COMIC_ELEMENT_OPERATOR.onMouseClick( _mouseX -canvasX, _mouseY -canvasY);\r
                                },\r
                                onMouseOut: function( _mouseX, _mouseY){\r
-                                       currentElement !== null && currentElement.dragging() === true && currentElement.onMouseUp( _mouseX -canvasX, _mouseY -canvasY);\r
+                                       currentElement !== null && currentElement.busy() === true && currentElement.onMouseUp( _mouseX -canvasX, _mouseY -canvasY);\r
                                        _canvasX = _canvasY = NaN;\r
                                        currentElement = null;\r
                                        COMIC_ELEMENT_OPERATOR.hide();\r
                                        return false;\r
                                },\r
                                busy: function(){\r
-                                       return currentElement !== null ? currentElement.dragging() : false;\r
+                                       return currentElement !== null ? currentElement.busy() : false;\r
                                },\r
                                createImageElement: function( url, imagesetID, x, y, z, w, h){\r
                                        w = w || 200; //ActualWidth\r
@@ -3371,15 +3595,15 @@ h2c.editor = ( function(){
                                \r
                                resize();\r
                                \r
-                               h2c.jqDocument()\r
-                                       .bind( h2c.key.SPACE_DOWN_EVENT, function(){\r
-                                               hasFocus === true && isDragging === false && COMIC_ELEMENT_CONTROL.busy() === false && updateMouseCursor( 'crosshair');\r
-                                       })\r
-                                       .bind( h2c.key.SPACE_UP_EVENT, function(){\r
-                                               hasFocus === true && COMIC_ELEMENT_CONTROL.busy() === false && updateMouseCursor( '');  \r
-                                               isDragging = false;\r
-                                       });\r
-                               \r
+                               h2c.key.addKeyUpdateEvent( h2c.view.EDITOR, 32, false, false, function( e){\r
+                                       if( e.type === 'keyup'){\r
+                                               currentListener === null && COMIC_ELEMENT_CONTROL.busy() === false && updateMouseCursor( '');   \r
+                                               isCanvasDraggble = false;\r
+                                       } else {\r
+                                               currentListener === null && COMIC_ELEMENT_CONTROL.busy() === false && updateMouseCursor( 'move');\r
+                                               isCanvasDraggble = true;\r
+                                       }\r
+                               });\r
                                delete CANVAS_CONTROL.init;\r
                        },\r
                        x: function(){ return canvasX;},\r
@@ -3390,8 +3614,7 @@ h2c.editor = ( function(){
                                resize();\r
                        },\r
                        onMouseMove: function( _mouseX, _mouseY){\r
-                               hasFocus = true;\r
-                               if( isDragging === true){\r
+                               if( currentListener === null && COMIC_ELEMENT_CONTROL.busy() === false && isCanvasDraggble === true && isDragging === true){\r
                                        canvasX = startCanvasX +_mouseX -xOffset;\r
                                        canvasY = startCanvasY +_mouseY -yOffset;\r
                                        resize();\r
@@ -3400,13 +3623,13 @@ h2c.editor = ( function(){
                                }\r
                        },\r
                        onMouseUp: function( _mouseX, _mouseY){\r
-                               if( COMIC_ELEMENT_CONTROL.onMouseUp( _mouseX, _mouseY) === false && isDragging === true){\r
+                               if( COMIC_ELEMENT_CONTROL.onMouseUp( _mouseX, _mouseY) === false && isCanvasDraggble === true){\r
                                        isDragging = false;\r
                                        updateMouseCursor( '');\r
                                }\r
                        },\r
                        onMouseDown: function( _mouseX, _mouseY){\r
-                               if( COMIC_ELEMENT_CONTROL.onMouseDown( _mouseX, _mouseY) === false && isDragging === false && SPACE_ENABLED() === true){\r
+                               if( COMIC_ELEMENT_CONTROL.onMouseDown( _mouseX, _mouseY) === false && isCanvasDraggble === true){\r
                                        xOffset = _mouseX;\r
                                        yOffset = _mouseY;\r
                                        startCanvasX = canvasX;\r
@@ -3423,8 +3646,7 @@ h2c.editor = ( function(){
                                        \r
                                }\r
                        },\r
-                       busy: function( _busy){\r
-                               hasFocus = !!_busy;\r
+                       busy: function(){\r
                                return isDragging === true || COMIC_ELEMENT_CONTROL.busy();\r
                        },\r
                        createImageElement: function( url, imagesetID, x, y, z, w, h){\r
@@ -3444,20 +3666,32 @@ h2c.editor = ( function(){
                var jqWrap, jqTextarea, jqButton,\r
                        textElement, onUpdateFunction;\r
                \r
+               h2c.key.addKeyDownEvent( this.ID, 69, false, false, clickOK);\r
+               \r
                function close(){\r
                        jqWrap.hide();\r
                        textElement = onUpdateFunction = null;          \r
-               }               \r
+               }\r
+               function clickOK(){\r
+                       h2c.overlay.hide();\r
+                       textElement && textElement.text( jqTextarea.val());\r
+                       onUpdateFunction && onUpdateFunction( textElement);\r
+                       close();                        \r
+               }\r
                return {\r
                        init: function(){\r
                                this.jqWrap = jqWrap = $( '#speach-editor-wrapper').hide();\r
-                               jqTextarea = $( '#speach-editor');\r
-                               jqButton = $( '#speach-edit-complete-button').click( function(){\r
-                                       h2c.overlay.hide();\r
-                                       textElement && textElement.text( jqTextarea.val());\r
-                                       onUpdateFunction && onUpdateFunction( textElement);\r
-                                       close();\r
+                               jqTextarea = $( '#speach-editor').keydown( function( e){\r
+                                       if( e.keyCode === 69 && e.shiftKey === false && e.ctrlKey === true){\r
+                                               clickOK();\r
+                                               e.preventDefault();\r
+                                       e.keyCode = 0;\r
+                                       e.cancelBubble = true;\r
+                                       e.returnValue = false;\r
+                                               return false;\r
+                                       }\r
                                });\r
+                               jqButton = $( '#speach-edit-complete-button').click( clickOK);\r
                                delete TEXT_EDITOR_CONTROL.init;\r
                        },\r
                        jqWrap: null,\r
@@ -3489,7 +3723,8 @@ h2c.editor = ( function(){
                        onWindowResize: function(){\r
                                textElement && this.show( textElement);\r
                        },\r
-                       onClose: close\r
+                       onClose: close,\r
+                       ID: 'textEditor'\r
                }\r
        })();\r
 \r
@@ -3774,6 +4009,11 @@ h2c.editor = ( function(){
                        onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
                        onEnterInterval = null;\r
                }\r
+               function clickOK(){\r
+                       h2c.overlay.hide();\r
+                       // onUpdateFunction && onUpdateFunction( textElement);\r
+                       close();\r
+               }\r
                return {\r
                        init: function(){\r
                                this.jqWrap = jqWrap = $( '#image-gruop-wrapper').hide();\r
@@ -3796,12 +4036,9 @@ h2c.editor = ( function(){
                                itemW = itemSize.width;\r
                                itemH = itemSize.height;\r
                                jqName = $( '#gruop-name-display');\r
-                               jqButton = $( '#image-gruop-button').click( function(){\r
-                                       h2c.overlay.hide();\r
-                                       // onUpdateFunction && onUpdateFunction( textElement);\r
-                                       close();\r
-                               });\r
+                               jqButton = $( '#image-gruop-button').click( clickOK);\r
                                buttonW = h2c.util.getElementSize( jqButton.get( 0)).width;\r
+                               \r
                                delete IMAGE_GROUP_EXPROLER.init;\r
                        },\r
                        jqWrap: null,\r
@@ -3868,7 +4105,8 @@ h2c.editor = ( function(){
                                });\r
                                onEnterShowImage();\r
                        },\r
-                       onClose: close\r
+                       onClose: close,\r
+                       ID: 'imageGroupExproler'\r
                }\r
        })();\r
 \r
@@ -3895,8 +4133,6 @@ h2c.editor = ( function(){
                                if( typeof _listener[ rellayMethod] === 'function' && _listener[ rellayMethod]( _mouseX, _mouseY) === true){\r
                                        currentListener = _listener;\r
                                        break;\r
-                               } else {\r
-                                       _listener.busy( false);\r
                                }\r
                        }\r
                }\r
@@ -3912,8 +4148,8 @@ h2c.editor = ( function(){
                        \r
                        jqEditor = $( '#editor');\r
 \r
-                       h2c.key.addKeyEvent( 96, false, true, centering);\r
-                       h2c.key.addKeyEvent( 48, false, true, centering);\r
+                       h2c.key.addKeyDownEvent( h2c.view.EDITOR, 96, false, true, centering);\r
+                       h2c.key.addKeyDownEvent( h2c.view.EDITOR, 48, false, true, centering);\r
 \r
                        HISTORY.init();\r
                        MENU_BAR_CONTROL.EDIT.createSelection( 'centering', 'ctrl + 0', centering, true, true, true);\r
@@ -4027,6 +4263,20 @@ h2c.file = ( function(){
                TREE_EVENT_UPDTE = 'onUpdate',\r
                FILE_EVENT_UPDATED_ATTRIVUTE = 'onUpdate',\r
                FILE_EVENT_GET_SEQENTIAL_FILES = 'gotSeqentilFiles',\r
+               ROLE_IS_SUPER_USER = 2^4,\r
+               ROLE_IS_OWNER = 2^3,\r
+               ROLE_IS_CREATOR = 2^2,\r
+               ROLE_IS_ARTIST = 2^1,\r
+               ROLE_IS_VISITOR = 2^0,\r
+               ROLE_IS_UNKROWN = 2^-1,\r
+               UPDATE_POLICY_SOCAV = 11111,// s: super user\r
+               UPDATE_POLICY_SOCA_ = 11110,// o: owner\r
+               UPDATE_POLICY_SOC__ = 11100,// c: creator\r
+               UPDATE_POLICY_SO_A_ = 11010,// a: artist\r
+               UPDATE_POLICY_SO___ = 11000,// v: visitor\r
+               UPDATE_POLICY__O___ = 01000,\r
+               UPDATE_POLICY_S____ = 10000,\r
+               UPDATE_POLICY______ = 00000,\r
                FILEDATA_RESITER = [],\r
                FILEDATA_ACCESS = [];\r
                \r