X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.4.x%2Fjavascripts%2Fwork.js;h=bebfa299a84564ab8d58df0a871732b826cb146d;hb=dc5a75639232882249108b4f708916e9690e42b3;hp=64e5513ac600d6b48fd3909ab869e3f1369501fd;hpb=8dc765868c7742d486be361c677e9976c17450de;p=pettanr%2FclientJs.git diff --git a/0.4.x/javascripts/work.js b/0.4.x/javascripts/work.js index 64e5513..bebfa29 100644 --- a/0.4.x/javascripts/work.js +++ b/0.4.x/javascripts/work.js @@ -1,6 +1,6 @@ /* * pettanR work.js - * version 0.4.2 + * version 0.4.37 * * author: * itozyun @@ -31,25 +31,12 @@ * */ - pettanr.LINE_FEED_CODE_TEXTAREA = ( function(){ - var text = document.getElementById( 'shadowTxtarea'), - form = text.parentNode; - form.parentNode.removeChild( form); - return text.value; - })(); - pettanr.LINE_FEED_CODE_PRE = ( function(){ - var pre = document.getElementById( 'shadowPre'); - pre.parentNode.removeChild( pre); - return pettanr.ua.isIE === true ? this.LINE_FEED_CODE_TEXTAREA : pre.innerHTML; // ie ?? - })(); /* ---------------------------------------- * pettanr.editor * - MENU_BAR_CONTROL - * - HISTORY + * - HISTORY_CONTROL * - SAVE_CONTROL - * - TEXT_EDITOR_CONTROL - * - IMAGE_GROUP_EXPROLER * - WINDOW_CONTROL * - WindowClass * - INFOMATION_WINDOW @@ -78,26 +65,34 @@ * * */ -pettanr.editor = ( function(){ +pettanr.editor = pettanr.view.registerApplication( function(){ - var COMIC_ELEMENT_TYPE_IMAGE = 0, - COMIC_ELEMENT_TYPE_TEXT = 1, - MOUSE_LISTENER_ARRAY = [], - COMIC_ELEMENT_ARRAY = [], + var PANEL_ELEMENT_TYPE_IMAGE = 0, + PANEL_ELEMENT_TYPE_TEXT = 1, + MOUSE_LISTENER_ARRAY = [], + PANEL_ELEMENT_ARRAY = [], ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'), - MIN_PANEL_HEIGHT = 20, - MIN_OBJECT_SIZE = 19, - MOUSE_HIT_AREA = 10, + MIN_PANEL_HEIGHT = 20, + MIN_ELEMENT_SIZE = 19, + MOUSE_HIT_AREA = 10, jqMouseEventChacher, jqEditor, windowW, windowH, - currentListener = null, - currentCursor = '', + currentListener = null, + currentCursor = '', + instance = this, option, + comicID = -1, + panelID = -1, + panelTimming = -1, + phase = -1, log; /* ---------------------------------------- * MENU BAR + * - mouseEventListener + * - controler + * * div * div.title * ul @@ -107,141 +102,123 @@ pettanr.editor = ( function(){ * kbd shortcut */ var MENU_BAR_CONTROL = ( function(){ - var ELM_BAR = document.getElementById( 'menu-bar'), + var ELM_BAR = document.getElementById( 'menu-bar' ), ELM_ITEM_CLASSNAME = 'menu-bar-item', - ELM_ITEM_ORIGN = ( function(){ - var ret = document.createElement( 'div'), - div = document.createElement( 'div'), - ul = document.createElement( 'ul'); + ELM_ITEM_ORIGN = ( function(){ + var ret = document.createElement( 'div' ), + div = document.createElement( 'div' ), + ul = document.createElement( 'ul' ); ret.className = ELM_ITEM_CLASSNAME; - ret.appendChild( div); - ret.appendChild( ul); + ret.appendChild( div ); + ret.appendChild( ul ); return ret; })(), ELM_SELECTION_ORIGN = ( function(){ - var ret = document.createElement( 'li'), - a = document.createElement( 'a'), - span = document.createElement( 'span'), - key = document.createElement( 'kbd'); - a.appendChild( span); - a.appendChild( key); - ret.appendChild( a); + var ret = document.createElement( 'li' ), + a = document.createElement( 'a' ), + span = document.createElement( 'span' ), + key = document.createElement( 'kbd' ); + a.appendChild( span ); + a.appendChild( key ); + ret.appendChild( a ); a.href = '#'; return ret; })(), - EMPTY_FUNCTION = new Function, ITEM_ARRAY = [], - barH = pettanr.util.getElementSize( ELM_BAR).height, - itemW = pettanr.util.getElementSize( ELM_ITEM_ORIGN).width, - selectionW = pettanr.util.getElementSize( ELM_ITEM_ORIGN.getElementsByTagName( 'ul')[ 0]).width, + barH = pettanr.util.getElementSize( ELM_BAR ).height, + itemW = pettanr.util.getElementSize( ELM_ITEM_ORIGN ).width, + selectionW = pettanr.util.getElementSize( ELM_ITEM_ORIGN.getElementsByTagName( 'ul' )[ 0 ] ).width, jqStage, jqBar; - ELM_BAR.style.top = ( -barH) +'px'; + ELM_BAR.style.top = ( -barH ) +'px'; - var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter){ - var ELM_WRAPPER = ELM_SELECTION_ORIGN.cloneNode( true), - ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'span')[ 0], - elmShortcut = ELM_WRAPPER.getElementsByTagName( 'kbd')[ 0]; + var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter ){ + var ELM_WRAPPER = ELM_SELECTION_ORIGN.cloneNode( true ), + ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'span' )[ 0 ], + elmShortcut = ELM_WRAPPER.getElementsByTagName( 'kbd' )[ 0 ]; - if( shortcut){ + if( shortcut ){ elmShortcut.innerHTML = shortcut; } else { - elmShortcut.parentNode.removeChild( elmShortcut); + elmShortcut.parentNode.removeChild( elmShortcut ); } elmShortcut = null; - container.appendChild( ELM_WRAPPER); - - updateTitle( title); - updateVisible( visible); - - function updateTitle( _title){ - ELM_TITLE.innerHTML = title = _title; - } - function updateVisible( _visible){ - if( _visible !== undefined){ - visible = !!_visible; + container.appendChild( ELM_WRAPPER ); + + this.elm = ELM_WRAPPER; + this.title = function( _title ){ + if( Type.isString( _title ) === true ){ + ELM_TITLE.innerHTML = title = _title; + }; + return title; + }; + this.visible = function( _visible ){ + if( Type.isBoolean( _visible ) === true && visible !== _visible ){ + visible = _visible; ELM_WRAPPER.className = visible === true ? '' : 'disabled'; }; - } - return { - elm: ELM_WRAPPER, - title: function( _title){ - _title !== undefined && updateTitle( _title); - return title; - }, - visible: function( _visible){ - visible !== !!_visible && updateVisible( _visible); - return visible; - }, - separateAfter: separateAfter - } + return visible; + }; + this.separateAfter = separateAfter; + + this.title( title ); + this.visible( visible ); } - var MenuBarItemClass = function( title, opt_callbackArray){ - var ELM_WRAPPER = ELM_ITEM_ORIGN.cloneNode( true), - ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'div')[ 0], - ELM_SELECTION = ELM_WRAPPER.getElementsByTagName( 'ul')[ 0], - INDEX = ITEM_ARRAY.length, - SELECTION_CALLBACK_ARRAY = opt_callbackArray || [], - numSelection = 0, - visible = false; + var MenuBarItemClass = function( title ){ + var ELM_WRAPPER = ELM_ITEM_ORIGN.cloneNode( true ), + ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'div' )[ 0 ], + ELM_SELECTION = ELM_WRAPPER.getElementsByTagName( 'ul' )[ 0 ], + INDEX = ITEM_ARRAY.length, + SELECTION_CALLBACK_ARRAY = [], + numSelection = 0, + visible = false, + instance = this; ELM_TITLE.innerHTML = title; - ELM_WRAPPER.style.left = ( itemW * INDEX) +'px'; - ELM_BAR.appendChild( ELM_WRAPPER); + ELM_WRAPPER.style.left = ( itemW * INDEX ) + 'px'; + ELM_BAR.appendChild( ELM_WRAPPER ); - function onClick( e){ - var that = this, - i = ( function(){ - var parent = that.parentNode, - children = parent.getElementsByTagName( 'li'), - l = children.length; - for(var i=0; i 0 ? SELECTION_CALLBACK_ARRAY[ SELECTION_CALLBACK_ARRAY.length -1] : null; - SELECTION_CALLBACK_ARRAY.push( callback); - if( before !== null && ( separateBefore === true || before.separateAfter === true)){ - ret.elm.style.borderTop = '1px solid #ccc'; - } - return ret; + return false; + }; + this.init = function(){ + $( ELM_SELECTION ).children( 'li' ).click( instance.onClick ); + delete instance.init; + }; + this.show = function(){ + if( visible === true ) return; + jqStage.append( ELM_WRAPPER ); + ELM_WRAPPER.className = ELM_ITEM_CLASSNAME + '-focus'; + instance.onShow && setTimeout( instance.onShow, 0 ); + visible = true; + }; + this.hide = function(){ + if( visible === false ) return; + ELM_BAR.appendChild( ELM_WRAPPER ); + ELM_WRAPPER.className = ELM_ITEM_CLASSNAME; + instance.onHide && setTimeout( instance.onHide, 0 ); + visible = false; + }; + this.createSelection = function( title, shortcut, callback, visible, separateBefore, separateAfter ){ + var ret = new MenubarSelectionClass( ELM_SELECTION, title, shortcut, visible, separateAfter ), + before = SELECTION_CALLBACK_ARRAY.length > 0 ? SELECTION_CALLBACK_ARRAY[ SELECTION_CALLBACK_ARRAY.length -1 ] : null; + SELECTION_CALLBACK_ARRAY.push( callback ); + if( before !== null && ( separateBefore === true || before.separateAfter === true )){ + ret.elm.style.borderTop = '1px solid #ccc'; } - } - } + return ret; + }; + }; - function createMenubarItem( title){ - var _item = MenuBarItemClass.apply( {}, [ title]); - ITEM_ARRAY.push( _item); + function createMenubarItem( title ){ + var _item = new MenuBarItemClass( title ); + ITEM_ARRAY.push( _item ); return _item; } return { @@ -256,6 +233,17 @@ pettanr.editor = ( function(){ delete MENU_BAR_CONTROL.init; }, + open: function(){ + MENU_BAR_CONTROL.init && MENU_BAR_CONTROL.init(); + // ELM_BAR.style.top = ( -barH) +'px'; + // anime + }, + close: function(){ + var l = ITEM_ARRAY.length; + for( var i=0; i= _mouseY){ @@ -282,45 +270,46 @@ pettanr.editor = ( function(){ } return true; }, - busy: function( _busy){ + busy: function( _busy ){ return false; }, - onWindowResize: function( _windowW, _windowH){ + onWindowResize: function( _windowW, _windowH ){ }, - QUIT: createMenubarItem( 'Quit'), - EDIT: createMenubarItem( 'Edit'), - WINDOW: createMenubarItem( 'Window'), - HELP: pettanr.util.extend( createMenubarItem( 'Help'), { - createAjaxSelection: function( callback){ - var elmLoading = document.createElement( 'li'), - that = this, - elmSelection = this.elm.getElementsByTagName( 'ul')[ 0]; - elmSelection.appendChild( elmLoading); - elmLoading.className = 'loading'; - elmLoading.style.height = '90px'; - - this.onShow = callback; - callback = null; - - delete this.createAjaxSelection; - return function(){ - elmSelection.removeChild( elmLoading); - $( elmSelection).children( 'li').click( that.onClick); - elmLoading = elmSelection = null; - delete that.onShow; - that = null; - } + QUIT: createMenubarItem( 'Quit' ), + EDIT: createMenubarItem( 'Edit' ), + WINDOW: createMenubarItem( 'Window' ), + HELP: pettanr.util.extend( createMenubarItem( 'Help' ), { + createAjaxSelection: function( callback ){ + var elmLoading = document.createElement( 'li' ), + that = this, + elmSelection = this.elm.getElementsByTagName( 'ul' )[ 0 ]; + elmSelection.appendChild( elmLoading ); + elmLoading.className = 'loading'; + elmLoading.style.height = '90px'; + + this.onShow = callback; + callback = null; + + delete this.createAjaxSelection; + return function(){ + elmSelection.removeChild( elmLoading ); + $( elmSelection ).children( 'li' ).click( that.onClick ); + elmLoading = elmSelection = null; + delete that.onShow; + that = null; } - }) + } + }) } })(); /* ---------------------------------------- - * HISTORY + * HISTORY_CONTROL + * - controler */ - var HISTORY = ( function() { + var HISTORY_CONTROL = ( function() { var STACK_BACK = [], STACK_FORWARD = [], MENUBAR_BACK = MENU_BAR_CONTROL.EDIT.createSelection( 'back', 'ctrl + z', back, false), @@ -357,12 +346,44 @@ pettanr.editor = ( function(){ MENUBAR_BACK.visible( true); SAVE_CONTROL.panelUpdated( true); } + function destroyStack( _stack, _destroy){ + _stack.fn = null; + + var _argBack = _stack.argBack, + _argForword = _stack.argForword, + _value; + if( Type.isArray( _argBack ) === true ){ // isArray + while( _argBack.length > 0){ + _value = _argBack.shift(); + _destroy === true && Type.isFunction( _value.destroy ) === true && _value.destroy(); + } + } + if( Type.isArray( _argForword ) === true ){ + while( _argForword.length > 0){ + _value = _argForword.shift(); + _destroy === true && Type.isFunction( _value.destroy ) === true && _value.destroy(); + } + } + } return { init: function(){ log = $( '#history-log'); - delete HISTORY.init; + delete HISTORY_CONTROL.init; + }, + open: function(){ + HISTORY_CONTROL.init && HISTORY_CONTROL.init(); + }, + close: function(){ + MENUBAR_BACK.visible( false); + MENUBAR_FORWARD.visible( false); + while( STACK_BACK.length > 0){ + destroyStack( STACK_BACK.shift(), true ); + } + while( STACK_FORWARD.length > 0){ + destroyStack( STACK_FORWARD.shift(), true ); + } }, - saveState: function( _function, _argBack, _argForword, _destory) { + saveState: function( _function, _argBack, _argForword, _destroy) { STACK_BACK.push( { fn: _function, argBack: _argBack, @@ -371,60 +392,48 @@ pettanr.editor = ( function(){ }); MENUBAR_BACK.visible( true); SAVE_CONTROL.panelUpdated( true); - + + var _stack; while( STACK_FORWARD.length > 0){ - var _stack = STACK_FORWARD.shift(), - _destroy = _stack.destroy, - _value; - _argBack = _stack.argBack; - _argForword = _stack.argForword; - _stack.fn = null; - if( typeof _argBack === 'array'){ - while( _argBack.length > 0){ - _value = _argBack.shift(); - _destroy === true && typeof _value.destroy === 'function' && _value.destroy(); - } - } - if( typeof _argForword === 'array'){ - while( _argForword.length > 0){ - _value = _argForword.shift(); - _destroy === true && typeof _value.destroy === 'function' && _value.destroy(); - } - } + _stack = STACK_FORWARD.shift(); + destroyStack( _stack, _stack.destroy ); } MENUBAR_FORWARD.visible( false); } } })(); - /* ---------------------------------------- - * Save Control + * SAVE_CONTROL + * - controler */ - var SAVE_CONTROL = ( function(){ var SAVE = MENU_BAR_CONTROL.QUIT.createSelection( 'save', 'ctrl + S', quit, false), SAVE_AND_QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'save & quit', null, quit, false, false, true), - SAVE_AS_HTML = MENU_BAR_CONTROL.QUIT.createSelection( 'get as html', null, outputAsHtml, true, false, true), - SAVE_AS_JSON_STRING = MENU_BAR_CONTROL.QUIT.createSelection( 'get JsonStr', null, outputAsJsonString, true, false, true), + EXPORT = MENU_BAR_CONTROL.QUIT.createSelection( 'export', null, onExport, true, false, true), QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'quit', null, quit, true, true), updated = false; function quit(){ + pettanr.editor.shutdown(); } - function outputAsHtml(){ - alert( COMIC_ELEMENT_CONTROL.getAsHTML( true, false)); - } - function outputAsJsonString(){ - alert( COMIC_ELEMENT_CONTROL.getAsJsonString()); + function onExport(){ + pettanr.outputConsole.bootInOverlay( + comicID, panelID, panelTimming, + PANEL_CONTROL.w(), PANEL_CONTROL.h(), + 2, // border, BackgroundImage + PANEL_ELEMENT_ARRAY + ); } return { + open: function(){}, + close: function(){}, quit: quit, panelUpdated: function( _updated){ - if( _updated !== undefined && updated !== _updated){ - SAVE.visible( !!_updated); - SAVE_AND_QUIT.visible( !!_updated); + if( _updated !== undefined && updated !== _updated ){ + SAVE.visible( !!_updated ); + SAVE_AND_QUIT.visible( !!_updated ); updated = !!_updated; } return updated; @@ -436,459 +445,9 @@ pettanr.editor = ( function(){ })(); /* ---------------------------------------- - * Text Editor (Overlay) - */ - - var TEXT_EDITOR_CONTROL = ( function(){ - var jqWrap, jqTextarea, jqButton, - textElement, onUpdateFunction; - - pettanr.key.addKeyDownEvent( this.ID, 69, false, false, clickOK); - - function close(){ - jqWrap.hide(); - textElement = onUpdateFunction = null; - } - function clickOK(){ - pettanr.overlay.hide(); - textElement && textElement.text( jqTextarea.val()); - onUpdateFunction && onUpdateFunction( textElement); - close(); - } - return { - init: function(){ - this.jqWrap = jqWrap = $( '#speach-editor-wrapper').hide(); - jqTextarea = $( '#speach-editor').keydown( function( e){ - if( e.keyCode === 69 && e.shiftKey === false && e.ctrlKey === true){ - clickOK(); - e.preventDefault(); - e.keyCode = 0; - e.cancelBubble = true; - e.returnValue = false; - return false; - } - }); - jqButton = $( '#speach-edit-complete-button').click( clickOK); - delete TEXT_EDITOR_CONTROL.init; - }, - jqWrap: null, - show: function( _textElement, _onUpdateFunction){ - textElement = _textElement; - onUpdateFunction = _onUpdateFunction || null; - pettanr.overlay.show( this); - var h = _textElement.h; - jqWrap.show().css( { - left: _textElement.x +PANEL_CONTROL.x(), - top: _textElement.y +PANEL_CONTROL.y(), - width: _textElement.w, - height: h - }); - jqTextarea.val( _textElement.text()).focus(); - - /* - * ie6,7は、textarea { width:100%}でも高さが変わらない。rowsを設定。 - */ - pettanr.ua.isIE === true && pettanr.ua.ieVersion <= 7 && setTimeout( function(){ - var rows = 0; - while( jqTextarea.height() < h){ - rows++; - jqTextarea.attr( 'rows', rows); - } - rows > 1 && jqTextarea.attr( 'rows', rows -1); - }, 0); - }, - onWindowResize: function(){ - textElement && this.show( textElement); - }, - onClose: close, - ID: 'textEditor' - } - })(); - -/* ---------------------------------------- - * Image Group Exproler (Overlay) - */ - var IMAGE_GROUP_EXPROLER = ( function(){ - var ICON_ARRAY = [], - WHEEL_DELTA = 64, - containerW, containerH, wrapX, - jqWrap, jqContainer, jqItemOrigin, - itemW, itemH, - jqName, jqButton, buttonW, - onUpdateFunction, - winW, - onEnterInterval = null; - - var BASE_PATH = pettanr.LOCAL === false ? 'http://pettan.heroku.com/resource_pictures/' : 'resource_pictures/', - THUMB_PATH = BASE_PATH, // + 'thumbnail/', - LIMIT_FILESIZE = 1024 * 10; // 10KB - var IMAGE_DATA = { - pen001: [ - { - "created_at": "2011-11-13T08:57:39Z", - "ext": "png", - "filesize": 9969, - "height": 463, - "id": 1, - "updated_at": "2011-11-13T08:57:39Z", - "width": 441 - }, - { - "created_at": "2011-11-13T08:57:54Z", - "ext": "gif", - "filesize": 5418, - "height": 500, - "id": 2, - "updated_at": "2011-11-13T08:57:54Z", - "width": 500 - }, - { - "created_at": "2011-11-13T08:58:06Z", - "ext": "gif", - "filesize": 8758, - "height": 464, - "id": 3, - "updated_at": "2011-11-13T08:58:06Z", - "width": 366 - }, - { - "created_at": "2011-11-13T08:58:23Z", - "ext": "gif", - "filesize": 9383, - "height": 480, - "id": 4, - "updated_at": "2011-11-13T08:58:23Z", - "width": 392 - }, - { - "created_at": "2011-11-13T08:58:33Z", - "ext": "gif", - "filesize": 11061, - "height": 500, - "id": 5, - "updated_at": "2011-11-13T08:58:33Z", - "width": 500 - }, - { - "created_at": "2011-11-20T09:50:43Z", - "ext": "gif", - "filesize": 1131, - "height": 126, - "id": 6, - "updated_at": "2011-11-20T09:50:43Z", - "width": 259 - }, - { - "created_at": "2011-11-20T09:50:55Z", - "ext": "gif", - "filesize": 1125, - "height": 126, - "id": 7, - "updated_at": "2011-11-20T09:50:55Z", - "width": 259 - }, - { - "created_at": "2011-11-20T11:33:12Z", - "ext": "gif", - "filesize": 17919, - "height": 600, - "id": 8, - "updated_at": "2011-11-20T11:33:12Z", - "width": 800 - }, - { - "created_at": "2011-11-20T11:33:12Z", - "ext": "gif", - "filesize": 17919, - "height": 600, - "id": 9, - "updated_at": "2011-11-20T11:33:12Z", - "width": 800 - }, - { - "created_at": "2011-11-20T11:33:12Z", - "ext": "gif", - "filesize": 17919, - "height": 600, - "id": 10, - "updated_at": "2011-11-20T11:33:12Z", - "width": 800 - }, - { - "created_at": "2011-11-20T11:33:12Z", - "ext": "gif", - "filesize": 17919, - "height": 600, - "id": 11, - "updated_at": "2011-11-20T11:33:12Z", - "width": 800 - }, - { - "created_at": "2011-11-22T09:17:20Z", - "ext": "gif", - "filesize": 9055, - "height": 473, - "id": 12, - "updated_at": "2011-11-22T09:17:20Z", - "width": 405 - }, - { - "created_at": "2011-11-22T10:11:07Z", - "ext": "gif", - "filesize": 8758, - "height": 464, - "id": 13, - "updated_at": "2011-11-22T10:11:07Z", - "width": 366 - }, - { - "created_at": "2011-11-24T09:05:12Z", - "ext": "gif", - "filesize": 6431, - "height": 386, - "id": 16, - "updated_at": "2011-11-24T09:05:12Z", - "width": 453 - }, - { - "created_at": "2011-11-26T04:52:12Z", - "ext": "gif", - "filesize": 6421, - "height": 426, - "id": 17, - "updated_at": "2011-11-26T04:52:12Z", - "width": 306 - }, - { - "created_at": "2011-11-26T04:52:12Z", - "ext": "gif", - "filesize": 6421, - "height": 426, - "id": 18, - "updated_at": "2011-11-26T04:52:12Z", - "width": 306 - }, - { - "created_at": "2011-11-26T04:52:12Z", - "ext": "gif", - "filesize": 6421, - "height": 426, - "id": 19, - "updated_at": "2011-11-26T04:52:12Z", - "width": 306 - }, - { - "created_at": "2011-11-26T04:52:12Z", - "ext": "gif", - "filesize": 6421, - "height": 426, - "id": 20, - "updated_at": "2011-11-26T04:52:12Z", - "width": 306 - }, - { - "created_at": "2011-11-26T04:52:12Z", - "ext": "gif", - "filesize": 6421, - "height": 426, - "id": 21, - "updated_at": "2011-11-26T04:52:12Z", - "width": 306 - } - ] - } - - var ImageGroupIconClass = function( INDEX, data){ - var JQ_ICON_WRAP = jqItemOrigin.clone( true), - SRC = [ BASE_PATH, data.id, '.', data.ext].join( ''), - LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext].join( '') : null, - reversibleImage = null, - onEnterFlag = false; - JQ_ICON_WRAP.children( 'div').eq( 0).html( data.filesize + 'bytes'); - jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW})); - - return { - onEnter: function(){ - if( onEnterFlag === true) return; - reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, function( url, imgW, imgH){ - if( reversibleImage === null) { - alert( url); - return; - } - /* - * ieでサイズが取れない、、、 - */ - imgW = imgW || data.width || 64; - imgH = imgH || data.height || 64; - JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH); - var zoom = 128 /( imgW > imgH ? imgW : imgH), - h = Math.floor( imgH *zoom), - w = Math.floor( imgW *zoom); - reversibleImage.elm.style.width = w +'px'; - reversibleImage.elm.style.height = h +'px'; - reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0'; - reversibleImage.resize( w, h); - JQ_ICON_WRAP.click( function( e){ - pettanr.overlay.hide(); - if (onUpdateFunction) { - if( LOW_SRC === null){ - onUpdateFunction( SRC, imgW, imgH); - } else { - ( function( onUpdate){ - pettanr.util.loadImage( SRC, - function( _abspath, imgW, imgH){ - onUpdate( SRC, imgW, imgH); - onUpdate = null; - }, - function( _abspath){ - onUpdate( SRC, data.width || 64, data.height || 64); - onUpdate = null; - } - ); - })( onUpdateFunction); // close()で値が消えるので、クロージャに保持 - } - } - close(); - }); - }); - JQ_ICON_WRAP.children( 'img').replaceWith( reversibleImage.elm); - onEnterFlag = true; - }, - destroy: function(){ - reversibleImage && reversibleImage.destroy(); - JQ_ICON_WRAP.remove(); - reversibleImage = JQ_ICON_WRAP = null; - delete this.destroy; - } - } - } - - function close(){ - jqContainer.stop().animate( { - height: 0, - top: Math.floor( windowH /2) - }, function(){ - jqWrap.hide() - }); - while( ICON_ARRAY.length > 0){ - ICON_ARRAY.shift().destroy(); - } - onEnterInterval !== null && window.clearTimeout( onEnterInterval); - onUpdateFunction = onEnterInterval = null; - } - function onEnterShowImage(){ - var l = ICON_ARRAY.length, - _start = -wrapX /itemW -1, - _end = _start + winW /itemW +1; - for( var i=0; i 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX; - jqContainer.css( { left: wrapX}); - - onEnterInterval !== null && window.clearTimeout( onEnterInterval); - onEnterInterval = window.setTimeout( onEnterShowImage, 500); - } - //e.stopPropagation(); - return false; - }); - containerH = pettanr.util.getElementSize( jqContainer.get( 0)).height; - jqItemOrigin = $( $( '#imageGruopItemTemplete').remove().html()); - var itemSize = pettanr.util.getElementSize( jqItemOrigin.get( 0)); - itemW = itemSize.width; - itemH = itemSize.height; - jqName = $( '#gruop-name-display'); - jqButton = $( '#image-gruop-button').click( clickOK); - buttonW = pettanr.util.getElementSize( jqButton.get( 0)).width; - - delete IMAGE_GROUP_EXPROLER.init; - }, - jqWrap: null, - show: function( _onUpdateFunction){ - onUpdateFunction = _onUpdateFunction; - pettanr.overlay.show( this); - - var CURRENT_GROUP_ARRAY = IMAGE_DATA[ 'pen001'] || [], - l = CURRENT_GROUP_ARRAY.length; - for( var i=0; i containerW ? winW : containerW, - h = windowH > containerH ? containerH : windowH; - - jqWrap.show(); - jqContainer.css( { - width: w, - height: 0, - left: 0, - top: Math.floor( windowH /2) - }).stop().animate( { - height: h, - top: Math.floor( windowH /2 -h /2) - }); - - jqButton.css( { - left: Math.floor( winW /2 -buttonW /2), - top: Math.floor( windowH /2 +containerH /2 +10) - }); - - onEnterShowImage(); - }, - onWindowResize: function( _windowW, _windowH){ - var w = _windowW > containerW ? _windowW : containerW, - h = _windowH > containerH ? containerH : _windowH, - offsetW = Math.floor( _windowW /2 -winW /2); - winW = _windowW; - if( offsetW <= 0){ // smaller - jqContainer.css( { - left: offsetW, - width: w - }).animate( { - left: 0, - top: Math.floor( _windowH /2 -h /2) - }); - } else { - jqContainer.css( { // bigger - left: 0, - width: w, - borderLeftWidth: offsetW - }).animate( { - top: Math.floor( _windowH /2 -h /2), - borderLeftWidth: 0 - }); - } - jqButton.css( { - left: Math.floor( _windowW /2 -buttonW /2), - top: Math.floor( _windowH /2 +containerH /2 +10) - }); - onEnterShowImage(); - }, - onClose: close, - ID: 'imageGroupExproler' - } - })(); - -/* ---------------------------------------- * WINDOWS_CONTROL + * - contloler + * - mouseEventListener */ var WINDOWS_CONTROL = ( function(){ /* @@ -905,10 +464,10 @@ pettanr.editor = ( function(){ var jqWindowOrigin, closeButtonWidth; - var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, CLOSE_BUTTON_ENABLED, RESIZE_BUTTON_ENABLED, minWindowW, minWindowH){ + var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, CLOSE_BUTTON_ENABLED, RESIZE_BUTTON_ENABLED, minWindowW, minWindowH ){ var MOUSE_CURSOR = updateMouseCursor, MENUBAR_SELWCTION = MENU_BAR_CONTROL.WINDOW.createSelection( - ( visible !== true ? 'show ' : 'hide ') +title, + ( visible !== true ? 'show ' : 'hide ' ) + title, null, onMenuClick, true ), jqStage, @@ -920,7 +479,7 @@ pettanr.editor = ( function(){ isDragging = false, isResizing = false, bodyIsTachable = false, - instance; + instance = this; function onMenuClick(){ visible === true ? instance.close() : instance.open(); @@ -945,7 +504,7 @@ pettanr.editor = ( function(){ w = _w; h = _h; } - function bodyBackOrForward( isBack){ + function bodyBackOrForward( isBack ){ if( !instance) return; if( bodyIsTachable === !isBack) return; elmBodyStyle.position = isBack === true ? 'relative' : 'absolute'; @@ -968,154 +527,159 @@ pettanr.editor = ( function(){ e.stopPropagation(); return false; } - return { - init: function( jqContainer){ - /* - * setTimeout で呼ばれるグローバルメソッド内では、this でなく instance を使う. - */ - instance = this; - - jqWindowOrigin = jqWindowOrigin || ( function(){ - return $( $( '#windowTemplete').remove().html()); - })(); - closeButtonWidth = closeButtonWidth || ( function(){ - return pettanr.util.getElementSize( jqWindowOrigin.clone( true).find( '.window-close-button').get( 0)).width; - })(); - - jqStage = jqEditor; - this.$ = jqWrapper = jqWindowOrigin.clone( true); - jqHeader = jqWrapper.children( '.window-header').eq( 0).html( title); - headerH = pettanr.util.getElementSize( jqHeader.get( 0)).height; - elmBody = jqWrapper.children( '.window-body').get( 0); - elmBodyStyle = elmBody.style; - - if( bodyTempleteID) { - jqWrapper.find( '.window-body-insert-position').replaceWith( $( $( '#' +bodyTempleteID).remove().html())); - } else { - jqWrapper.find( '.window-body-insert-position').remove(); - } - CLOSE_BUTTON_ENABLED !== true && jqWrapper.find( '.window-close-button').remove(); - - this.onInit && this.onInit(); - delete this.init; - }, - x: function(){ return x;}, - y: function(){ return y;}, - w: function(){ return w;}, - h: function(){ return h;}, - $: null, - title: function( _title){ - typeof _title === 'string' && jqHeader.html( _title); - title = typeof _title === 'string' ? _title : title; - return title; - }, - visible: visible, - firstOpen: function(){ - if( RESIZE_BUTTON_ENABLED === true){ - footerH = pettanr.util.getElementSize( jqWrapper.find( '.window-footer').get( 0)).height; - //jqWrapper.find( '.window-resize-button').eq( 0).mousedown( onWindowResize); - } else { - jqWrapper.find( '.window-footer').remove(); - } - update( x, y, w, h); - - this.onFirstOpen && this.onFirstOpen(); - - delete this.firstOpen; - }, - open: function(){ - if( visible === true) return; - instance.visible = visible = true; - openWindow( instance); - MENUBAR_SELWCTION.title( 'hide ' +title); - - for( var i=0, l = WINDOW_ARRAY.length; i _mouseX || y > _mouseY || x +w < _mouseX || y +headerH < _mouseY ) return; - if( CLOSE_BUTTON_ENABLED === true && x +w -closeButtonWidth < _mouseX){ - this.close(); - return; - } - - isDragging = true; - MOUSE_CURSOR( 'move'); + this.init = function( jqContainer ){ + jqWindowOrigin = jqWindowOrigin || ( function(){ + return $( $( '#windowTemplete').remove().html()); + })(); + closeButtonWidth = closeButtonWidth || ( function(){ + return pettanr.util.getElementSize( jqWindowOrigin.clone( true).find( '.window-close-button').get( 0)).width; + })(); + + jqStage = jqEditor; + instance.$ = jqWrapper = jqWindowOrigin.clone( true); + jqHeader = jqWrapper.children( '.window-header').eq( 0).html( title); + headerH = pettanr.util.getElementSize( jqHeader.get( 0)).height; + elmBody = jqWrapper.children( '.window-body').get( 0); + elmBodyStyle = elmBody.style; + + if( bodyTempleteID) { + jqWrapper.find( '.window-body-insert-position').replaceWith( $( $( '#' +bodyTempleteID).remove().html())); + } else { + jqWrapper.find( '.window-body-insert-position').remove(); + } + CLOSE_BUTTON_ENABLED !== true && jqWrapper.find( '.window-close-button').remove(); + + instance.onInit && instance.onInit(); + delete instance.init; + }; + this.x = function(){ return x;}; + this.y = function(){ return y;}; + this.w = function(){ return w;}; + this.h = function(){ return h;}; + this.$ = null; + this.title = function( _title ){ + if( Type.isString( _title ) === true ){ + jqHeader.html( _title ); + title = _title; + } + return title; + }; + this.visible = visible; + this.firstOpen = function(){ + if( RESIZE_BUTTON_ENABLED === true){ + footerH = pettanr.util.getElementSize( jqWrapper.find( '.window-footer' ).get( 0 ) ).height; + } else { + jqWrapper.find( '.window-footer').remove(); + } + instance.onFirstOpen && instance.onFirstOpen( w, h - headerH - footerH ); + + update( x, y, w, h); + + delete instance.firstOpen; + }; + this.open = function(){ + if( visible === true) return; + instance.visible = visible = true; + openWindow( instance); + MENUBAR_SELWCTION.title( 'hide ' +title); + + for( var i=0, l = WINDOW_ARRAY.length; i _mouseX || x +w < _mouseX ) return; - - ( y <= _mouseY && y +headerH >= _mouseY ) ? - MOUSE_CURSOR( 'pointer') : // hit to header - MOUSE_CURSOR( ''); - bodyBackOrForward( y +headerH > _mouseY || y +headerH +bodyH < _mouseY); - }, - onMouseOut: function( _mouseX, _mouseY){ - bodyIsTachable === true && bodyBackOrForward( true); - isDragging = false; - MOUSE_CURSOR( ''); - }, - busy: function(){ - return isDragging === true || isResizing === true; - }, - bodyHeight: function(){ - return bodyH; + MOUSE_CURSOR( 'nw-resize'); + return; } - } + + if( x > _mouseX || y > _mouseY || x + w < _mouseX || y + headerH < _mouseY ) return; + if( CLOSE_BUTTON_ENABLED === true && x + w - closeButtonWidth < _mouseX){ + instance.close(); + return; + } + + isDragging = true; + MOUSE_CURSOR( 'move'); + startX = x; + startY = y; + startW = w; + startH = h; + offsetX = _mouseX; + offsetY = _mouseY; + }; + this.onMouseUp = function( _mouseX, _mouseY ){ + isDragging = isResizing = false; + MOUSE_CURSOR( ''); + }; + this.onMouseMove = function( _mouseX, _mouseY ){ + var _updateX = _mouseX - offsetX, + _updateY = _mouseY - offsetY; + + if( isResizing === true){ + var _w = startW +_updateX, + _h = startH +_updateY; + update( startX, startY, _w < minWindowW ? minWindowW : _w, _h < minWindowH ? minWindowH : _h ); + return; + } else + if( isDragging === true) { + update( startX + _updateX, startY + _updateY); + return; + } else + if( x > _mouseX || x + w < _mouseX ) return; + + ( y <= _mouseY && y +headerH >= _mouseY ) ? + MOUSE_CURSOR( 'pointer') : // hit to header + MOUSE_CURSOR( ''); + bodyBackOrForward( y + headerH > _mouseY || y + headerH + bodyH < _mouseY); + }; + this.onMouseOut = function( _mouseX, _mouseY ){ + bodyIsTachable === true && bodyBackOrForward( true ); + isDragging = false; + MOUSE_CURSOR( '' ); + }; + this.busy = function(){ + return isDragging === true || isResizing === true; + }; + this.bodyHeight = function(){ + return bodyH; + }; }; - function getCurrentWindow( _mouseX, _mouseY){ - if( currentWindow && currentWindow.busy() === true) return currentWindowIndex; + function getCurrentIndex( _mouseX, _mouseY ){ + if( currentWindow && currentWindow.busy() === true ) return currentWindowIndex; var l = WINDOW_ARRAY.length, _currentWindow = null, _win, _x, _y; @@ -1135,32 +699,13 @@ pettanr.editor = ( function(){ currentWindow = _currentWindow; return currentWindowIndex; } - function openWindow( _window){ + function openWindow( _window ){ if( _window.visible !== true) return; var _jqWindow = _window.$; jqContainer.append( _jqWindow);// appendした後に fadeIn() しないと ie で filterが適用されない． - _jqWindow.fadeIn( - function(){ - _window.firstOpen && _window.firstOpen(); - _window.onOpen && setTimeout( _window.onOpen, 0); - } - ); + _jqWindow.fadeIn( _window.onFadeIn); return; } - function closeWindow( _window){ - if( _window.visible !== false) return; - var l = WINDOW_ARRAY.length; - for( var i=0; i 0){ // 先頭のクリックでない場合 // Array を前に WINDOW_ARRAY.splice( currentWindowIndex, 1); WINDOW_ARRAY.unshift( currentWindow); @@ -1195,14 +746,14 @@ pettanr.editor = ( function(){ return false; }, onMouseUp: function( _mouseX, _mouseY){ - if( getCurrentWindow( _mouseX, _mouseY) === 0){ + if( getCurrentIndex( _mouseX, _mouseY) === 0){ currentWindow.onMouseUp( _mouseX, _mouseY); return true; } return false; }, onMouseDown: function( _mouseX, _mouseY){ - if( getCurrentWindow( _mouseX, _mouseY) === 0){ + if( getCurrentIndex( _mouseX, _mouseY) === 0){ currentWindow.onMouseDown( _mouseX, _mouseY); return true; } @@ -1216,20 +767,22 @@ pettanr.editor = ( function(){ * 画面外に出るwindowの移動 */ }, - createWindow: function( scope, EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH){ + createWindow: function( EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH ){ opt_visible = opt_visible !== false; opt_closeButtonEnabled = opt_closeButtonEnabled === true; opt_resizeButtonEnabled = opt_resizeButtonEnabled === true; - opt_minWindowW = opt_minWindowW || ( w < DEFAULT_MIN_WINDOW_WIDTH) ? w : DEFAULT_MIN_WINDOW_WIDTH; - opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT) ? h : DEFAULT_MIN_WINDOW_HEIGHT; + opt_minWindowW = opt_minWindowW || ( w < DEFAULT_MIN_WINDOW_WIDTH ) ? w : DEFAULT_MIN_WINDOW_WIDTH; + opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT ) ? h : DEFAULT_MIN_WINDOW_HEIGHT; - var _window = pettanr.util.extend( - WindowClass.apply( scope, [ bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH]), - EXTENDS - ); - WINDOW_ARRAY.unshift( _window); - WINDOWS_CONTROL.init === undefined && _window.init( jqContainer); - WINDOWS_CONTROL.init === undefined && openWindow( _window); + var _window = new WindowClass( bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH ); + for( var key in EXTENDS ){ + _window[ key ] = EXTENDS[ key ]; + } + WINDOW_ARRAY.unshift( _window ); + if( Type.isUndefined( WINDOWS_CONTROL.init ) === true ){ + _window.init( jqContainer ); + openWindow( _window ); + } return _window; } } @@ -1237,6 +790,7 @@ pettanr.editor = ( function(){ /* ---------------------------------------- * TOOL_BOX_WINDOW + * - window */ var TOOL_BOX_WINDOW = ( function(){ var addImageButton, addTextButton, editBgButton, switchGridButton, popupHelpButton, postButton, @@ -1252,35 +806,35 @@ pettanr.editor = ( function(){ MENU_BAR_CONTROL.EDIT.createSelection( 'show Grid', 'ctrl + G', switchGrid, true, true, true); function addImage( e){ - setTimeout( COMIC_ELEMENT_CONTROL.createImageElement, 0); - e && e.preventDefault(); + IMAGE_EXPLORER_WINDOW.open();// setTimeout( IMAGE_EXPLORER_WINDOW.open, 0); + instance.bodyBackOrForward( true ); + e && e.preventDefault && e.preventDefault(); return false; } function addText( e){ setTimeout( COMIC_ELEMENT_CONTROL.createTextElement, 0); - e && e.preventDefault(); + e && e.preventDefault && e.preventDefault(); return false; } function switchGrid( e){ setTimeout( GRID_CONTROL.update, 0); - e && e.preventDefault(); + e && e.preventDefault && e.preventDefault(); return false; } function popupHelp( e){ instance.bodyBackOrForward( true); setTimeout( HELP_DOCUMENTS_WINDOW.open, 0); - e && e.preventDefault(); + e && e.preventDefault && e.preventDefault(); return false; } function editBG( e){ instance.bodyBackOrForward( true); setTimeout( INFOMATION_WINDOW.open, 0); - e && e.preventDefault(); + e && e.preventDefault && e.preventDefault(); return false; } return WINDOWS_CONTROL.createWindow( - this, { onInit: function(){ instance = this; @@ -1305,88 +859,118 @@ pettanr.editor = ( function(){ /* ---------------------------------------- * IMAGE_EXPROLER + * - window */ var IMAGE_EXPLORER_WINDOW = ( function(){ var instance, finder; + function onFileSelect( _file ){ + // 他の image ファイルも許可する？ + if( pettanr.driver.isPettanrFileInstance( _file ) === true ){ + if( _file.getType() === pettanr.driver.FILE_TYPE.PICTURE ){ + COMIC_ELEMENT_CONTROL.onImageSelect( pettanr.driver._getAPI().getFileData( _file ) ); + } + } + } + return WINDOWS_CONTROL.createWindow( - this, { onInit: function(){ instance = this; delete this.onInit; }, - onFirstOpen: function(){ - finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.file.TREE_TYPE_IS_IMAGE); - delete this.onFirstOpen; - }, - onOpen: function(){ - finder.onOpen(); + onOpen: function( _w, _h ){ + finder = finder || pettanr.finder.createFinder( + pettanr.editor, + document.getElementById( 'image-exproler-container'), + pettanr.driver.createPictureTree(), + null, null, + onFileSelect, + COMIC_ELEMENT_CONTROL.onImageSelect + ); + + finder.resize( _w, _h ); }, - onResize: function( _w, _h){ - finder.onWindowResize( _w, _h); + onResize: function( _w, _h ){ + finder.resize( _w, _h ); } }, - 'image-exproler', 'Album', 0, 215, 400, 350, false, true, true, 300, 300 + 'image-exproler', 'Album', 0, 215, 600, 350, false, true, true, 300, 300 ); })(); /* ---------------------------------------- * INFOMATION_WINDOW + * - window */ var INFOMATION_WINDOW = ( function(){ - var FADE_EFFECT_ENABLED = pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 8, + var FADE_EFFECT_ENABLED = true, //pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 8, FADE_IN_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeIn' : 'show', FADE_OUT_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeOut' : 'hide', backgroundInfomationElm, jqComicElementInformation, - elmValueX, elmValueY, elmValueZ, elmValueA, elmValueW, elmValueH, elmAspect, - elmPercentW, elmPercentH, + inputX, inputY, inputZ, inputA, inputW, inputH, inputAspectRatio, + inputPercentW, inputPercentH, currentComicElement = null, - currentElementType = -1; + currentElementType = -1, + currentLock = false; return WINDOWS_CONTROL.createWindow( - this, { - onFirstOpen: function(){ + onFirstOpen: function( _w, _h){ backgroundInfomationElm = $( '#panel-background-information'); jqComicElementInformation = $( '#comic-element-infomation').hide().css( { - height: this.bodyHeight() + height: _h }); var TAB_GROUP_ID = 'comic-element-attribute'; - var CREATER = pettanr.key.createEditableText; - elmValueX = CREATER( $( '#comic-element-x'), null, TAB_GROUP_ID); - elmValueY = CREATER( $( '#comic-element-y'), null, TAB_GROUP_ID); - elmValueZ = CREATER( $( '#comic-element-z'), null, TAB_GROUP_ID); - elmValueA = CREATER( $( '#comic-element-a'), null, TAB_GROUP_ID); - elmValueW = CREATER( $( '#comic-element-w'), null, TAB_GROUP_ID); - elmValueH = CREATER( $( '#comic-element-h'), null, TAB_GROUP_ID); - elmPercentW = CREATER( $( '#comic-element-w-percent'), null, TAB_GROUP_ID); - elmPercentH = CREATER( $( '#comic-element-h-percent'), null, TAB_GROUP_ID); - elmAspect = $( '#comic-element-keep-aspect'); - delete this.onFirstOpen; + var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText; + inputX = CREATER( document.getElementById( 'comic-element-x'), null, TAB_GROUP_ID); + inputY = CREATER( document.getElementById( 'comic-element-y'), null, TAB_GROUP_ID); + inputZ = CREATER( document.getElementById( 'comic-element-z'), null, TAB_GROUP_ID); + inputA = CREATER( document.getElementById( 'comic-element-a'), null, TAB_GROUP_ID); + inputW = CREATER( document.getElementById( 'comic-element-w'), null, TAB_GROUP_ID); + inputH = CREATER( document.getElementById( 'comic-element-h'), null, TAB_GROUP_ID); + inputPercentW = CREATER( document.getElementById( 'comic-element-w-percent'), null, TAB_GROUP_ID); + inputPercentH = CREATER( document.getElementById( 'comic-element-h-percent'), null, TAB_GROUP_ID); + inputAspectRatio = $( '#comic-element-keep-aspect'); + delete INFOMATION_WINDOW.onFirstOpen; }, - onResize: function( w, h){ - jqComicElementInformation && jqComicElementInformation.css( { - height: h + onResize: function( _w, _h){ + jqComicElementInformation.css( { + height: _h }); }, - update: function( _elementType, x, y, z, a, w, h, wPercent, hPercent, keepAspect){ - if( !backgroundInfomationElm) return; // なぜか !backgroundInfomationElm が必要 + update: function( currentElement ){ + + if( currentLock === true && currentElement === null) return; + + var _elementType = currentElement === null ? -1 : currentElement.type, + x = currentElement !== null ? currentElement.x : 0, + y = currentElement !== null ? currentElement.y : 0, + z = currentElement !== null ? currentElement.z : 0, + a = _elementType === PANEL_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle()) : 0, + w = currentElement !== null ? currentElement.w : 0, + h = currentElement !== null ? currentElement.h : 0, + actualW = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1, + actualH = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1, + wPercent = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100) : 0, + hPercent = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100) : 0, + keepAspect = currentElement !== null && currentElement.keepAspect === true; + if( currentElementType !== _elementType){ if( _elementType !== -1){ if( _elementType === 1){ - elmValueA.show(); - elmPercentW.hide(); - elmPercentH.hide(); - elmAspect.hide(); + inputA.visible( true); + inputPercentW.visible( false); + inputPercentH.visible( false); + inputAspectRatio.hide(); } else { - elmValueA.hide(); - elmPercentW.show(); - elmPercentH.show(); - elmAspect.show(); + inputA.visible( false); + inputPercentW.visible( true); + inputPercentH.visible( true); + inputAspectRatio.show(); } currentElementType === -1 && jqComicElementInformation.stop().css( { filter: '', @@ -1401,17 +985,21 @@ pettanr.editor = ( function(){ currentElementType = _elementType; } if( currentElementType !== -1){ - elmValueX.update( x); - elmValueY.update( y); - elmValueZ.update( z); - _elementType === 1 && elmValueA.update( a); - elmValueW.update( w); - elmValueH.update( h); - _elementType === 0 && elmPercentW.update( wPercent); - _elementType === 0 && elmPercentH.update( hPercent); + inputX.value( x); + inputY.value( y); + inputZ.value( z); + _elementType === 1 && inputA.value( a); + inputW.value( w); + inputH.value( h); + _elementType === 0 && inputPercentW.value( wPercent ); + _elementType === 0 && inputPercentH.value( hPercent ); } else { } + }, + lock: function( _currentLock ){ + currentLock = !!_currentLock; + INFOMATION_WINDOW.bodyBackOrForward( !currentLock ); } }, 'infomation-window', 'Infomation', 0, 30, 200, 180, true @@ -1420,145 +1008,121 @@ pettanr.editor = ( function(){ /* ---------------------------------------- * HELP_WINDOW + * - window */ var HELP_DOCUMENTS_WINDOW = ( function(){ var visible = true, - hasAjaxContents = false, jqAjaxContents, jqNaviItems, jqPages, - HELP = MENU_BAR_CONTROL.HELP, - onLoadFunction = HELP.createAjaxSelection( onFirstOpen), - instance; - function jumpPage( _index){ - - } - function onFirstOpen( _pageIndex){ - _pageIndex = _pageIndex || 0; - if( hasAjaxContents === false){ + currentPageIndex = 0, + numPage = 0, + HELP = MENU_BAR_CONTROL.HELP, + onLoadFunction = HELP.createAjaxSelection( onAjaxStart ); + + function onAjaxStart( _pageIndex ){ + currentPageIndex = _pageIndex || currentPageIndex; + if( onHelpLoad !== null ){ $.ajax({ url: 'help/jp.xml', dataType: 'xml', - success: function( _xml){ - var jqXML = $( _xml), - helpTitle = jqXML.find( 'pages').eq( 0).attr( 'title'), - elmNavi = document.createElement( 'div'), - elmItemOrigin = document.createElement( 'a'), - elmPages = document.createElement( 'div'), - elmPageOrigin = document.createElement( 'div'), - elmTitleOrigin = document.createElement( 'h2'), - elmPage, - numPage = 0; - elmNavi.className = 'sidenavi'; - elmItemOrigin.className = 'sidenavi-item'; - elmItemOrigin.href = '#'; - elmPages.className = 'page-contents'; - elmPageOrigin.className = 'page-content'; - elmPageOrigin.appendChild( elmTitleOrigin); - - // helpTitle && instance.title( helpTitle); - - jqXML.find( 'page').each( function(){ - var xmlPage = $( this), - title = xmlPage.attr( 'title'), - content = xmlPage.text(); - - elmItemOrigin.innerHTML = title; - elmNavi.appendChild( elmItemOrigin.cloneNode( true)); - - elmTitleOrigin.innerHTML = title; - elmPage = elmPageOrigin.cloneNode( true); - elmPage.innerHTML = content; - - pettanr.util.cleanElement( elmPage); - - if( elmPage.childNodes.length > 0){ - elmPage.insertBefore( elmTitleOrigin.cloneNode( true), elmPage.childNodes[0]); - } else { - elmPage.appendChild( elmTitleOrigin.cloneNode( true)); - } - elmPages.appendChild( elmPage); - - HELP.createSelection( title, null, ( function( _pageIndex){ - return function(){ - HELP_DOCUMENTS_WINDOW.open(); - onOpen( _pageIndex); - } - })( numPage), true); - ++numPage; - }); - onLoadFunction(); - onLoadFunction = null; - - jqAjaxContents.removeClass( 'loading').append( elmNavi, elmPages); - - jqNaviItems = jqAjaxContents.find( 'a.' +elmItemOrigin.className) - .click( function( e){ - var that = this, - parent = this.parentNode, - i = ( function(){ - var children = parent.getElementsByTagName( 'a'), - l = children.length; - for( var i=0; i 0 ){ + elmPage.insertBefore( elmTitleOrigin.cloneNode( true ), elmPage.childNodes[0]); + } else { + elmPage.appendChild( elmTitleOrigin.cloneNode( true )); + } + elmPages.appendChild( elmPage ); + + HELP.createSelection( title, null, onSelectionClick, true ); + ++numPage; + }); + onLoadFunction(); + onLoadFunction = null; + + jqAjaxContents.removeClass( 'loading' ).append( elmNavi, elmPages ); + + jqNaviItems = jqAjaxContents.find( 'a.' + elmItemOrigin.className ).click( onNaviClick ); + jqPages = jqAjaxContents.find( '.page-content' ); + jqPages.find( 'a').click( onInnerLinkClick ); + + setTimeout( jumpPage, 0 ); + } + function onSelectionClick( _pageIndex ){ + HELP_DOCUMENTS_WINDOW.open(); + jumpPage( _pageIndex ); + } + function jumpPage( _index ){ + if( typeof _index === 'number' && 0 <= _index && _index < numPage && currentPageIndex !== _index ){ + currentPageIndex = _index; + } + jqNaviItems.removeClass( 'current' ).eq( currentPageIndex).addClass( 'current' ); + jqPages.hide().eq( currentPageIndex ).show(); + } + function onNaviClick( e ){ + // this は + jumpPage( pettanr.util.getChildIndex( this.parentNode, this )); + e.stopPropagation(); + return false; + } + function onInnerLinkClick( e ){ + var jump = ( this.href || '').split( '#jump' ), + n = jump[1]; + if( !n) return; + jumpPage( '' + parseFloat( n ) === n ? parseFloat( n ) : -1 ); + e.stopPropagation(); + return false; + } + return WINDOWS_CONTROL.createWindow( + { + onInit: function(){ + jqAjaxContents = HELP_DOCUMENTS_WINDOW.$.find( '.window-body' ).addClass( 'loading' ); + delete HELP_DOCUMENTS_WINDOW.onInit; + }, + onFirstOpen: function( _w, _h ){ + jqAjaxContents.css( { height: _h }); + onAjaxStart(); + delete HELP_DOCUMENTS_WINDOW.onFirstOpen; + }, + onResize: function( _w, _h ){ + jqAjaxContents && jqAjaxContents.css( { height: _h }); + } }, null, 'Help', 0, 215, 400, 350, false, true, true, 300, 300 ); @@ -1566,19 +1130,28 @@ pettanr.editor = ( function(){ /* ---------------------------------------- * GRID_CONTROL + * - control + * - panelResizeListener */ var GRID_CONTROL = ( function(){ - var ELM_GRID = document.getElementById( 'grid'), + var ELM_GRID = document.getElementById( 'grid' ), + BG_URL = "url('images/grid.gif')", jqGrid, visible = false; return { init: function(){ - jqGrid = $( ELM_GRID); + jqGrid = $( ELM_GRID ); delete GRID_CONTROL.init; }, - onPanelResize: function( _panelX, _panelY){ - ELM_GRID.style.backgroundPosition = [ _panelX % 10, 'px ', _panelY % 10, 'px'].join( ''); + open: function(){ + GRID_CONTROL.init && GRID_CONTROL.init(); + }, + close: function(){ + + }, + onPanelResize: function( _panelX, _panelY ){ + ELM_GRID.style.backgroundPosition = [ _panelX % 10, 'px ', _panelY % 10, 'px' ].join( '' ); ELM_GRID.style.height = windowH +'px'; }, enabled: function(){ @@ -1588,21 +1161,23 @@ pettanr.editor = ( function(){ jqGrid.css( { opacity: '', fliter: '' - }).stop()[ visible === true ? 'fadeOut' : 'fadeIn'](); + }).stop()[ visible === true ? 'fadeOut' : 'fadeIn' ](); visible = !visible; - if( visible === true && !ELM_GRID.style.backgroundImage){ - ELM_GRID.style.backgroundImage = "url('images/grid.gif')"; + if( visible === true && BG_URL !== null){ + ELM_GRID.style.backgroundImage = BG_URL; + BG_URL = null; } return visible; } } })(); - /* - * WHITE_GLASS_CONTROL - */ +/* ---------------------------------------- + * WHITE_GLASS_CONTROL + * - panelResizeListener + */ var WHITE_GLASS_CONTROL = ( function(){ var styleTop = document.getElementById( 'whiteGlass-top').style, styleLeft = document.getElementById( 'whiteGlass-left').style, @@ -1638,8 +1213,11 @@ pettanr.editor = ( function(){ })(); -/* +/* ---------------------------------------- * PANEL_CONTROL + * - controler + * - mouseEventListener + * * panel-border の表示と onPanelResize の通知． * panel drag. * @@ -1655,6 +1233,8 @@ pettanr.editor = ( function(){ isDragging = false, isDraggable = false; + pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 32, false, false, onSpaceUpdate); + function onSpaceUpdate(e){ if( e.type === 'keyup'){ currentListener === null && updateMouseCursor( ''); @@ -1666,18 +1246,17 @@ pettanr.editor = ( function(){ } return { - init: function( _panelW, _panelH, _borderSize){ - panelW = _panelW || DEFAULT_PANEL_WIDTH; - panelH = _panelH || DEFAULT_PANEL_HEIGHT; - panelX = Math.floor( ( windowW -panelW) /2); - panelY = Math.floor( ( windowH -panelH) /2); - borderSize = _borderSize !== undefined ? _borderSize : borderSize; + open: function( _panelW, _panelH, _borderSize ){ + panelW = Type.isFinite( _panelW ) === true ? _panelW : DEFAULT_PANEL_WIDTH; + panelH = Type.isFinite( _panelH ) === true ? _panelH : DEFAULT_PANEL_HEIGHT; + //panelX = Math.floor( ( windowW -panelW) /2); + //panelY = Math.floor( ( windowH -panelH) /2); + borderSize = Type.isFinite( _borderSize ) === true ? _borderSize : borderSize; - pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 32, false, false, onSpaceUpdate); - - setTimeout( PANEL_CONTROL.resize, 0); + //setTimeout( PANEL_CONTROL.resize, 0); + }, + close: function(){ - delete PANEL_CONTROL.init; }, x: function(){ return panelX; @@ -1685,6 +1264,12 @@ pettanr.editor = ( function(){ y: function(){ return panelY; }, + w: function(){ + return panelW; + }, + h: function(){ + return panelH; + }, resize: function( isResizerTopAction, _x, _y, _w, _h){ panelX = _x !== undefined ? _x : panelX; panelY = _y !== undefined ? _y : panelY; @@ -1735,9 +1320,9 @@ pettanr.editor = ( function(){ } })(); -/* - * -------------------------------------------------------------------------------------------- - * panel resizer +/* -------------------------------------------------------------------------------------------- + * PanelResizerClass + * - mouseEventListener */ var PanelResizerClass = function( ID, isTop){ var ELM = document.getElementById( ID), @@ -1758,80 +1343,77 @@ pettanr.editor = ( function(){ } } - return { - busy: function(){ - return isDragging; - }, - onMouseDown: function( _mouseX, _mouseY){ - var _x = _mouseX -panelX, - _y = _mouseY -panelY; + this.onMouseDown = function( _mouseX, _mouseY){ + var _x = _mouseX -panelX, + _y = _mouseY -panelY; + if( _x < x || x + w < _x || _y < y || y + h < _y) return false; + offsetY = _y; + startY = panelY; + startH = panelH; + isDragging = true; + MOUSE_CURSOR( 'n-resize'); + return true; + } + this.onMouseMove = function( _mouseX, _mouseY){ + var _x = _mouseX -panelX, + _y = _mouseY -panelY; + if( isDragging !== true){ if( _x < x || x + w < _x || _y < y || y + h < _y) return false; - offsetY = _y; - startY = panelY; - startH = panelH; - isDragging = true; - MOUSE_CURSOR( 'n-resize'); + COMIC_ELEMENT_OPERATION_MANAGER.hide(); + MOUSE_CURSOR( 'pointer'); return true; - }, - onMouseMove: function( _mouseX, _mouseY){ - var _x = _mouseX -panelX, - _y = _mouseY -panelY; - if( isDragging !== true){ - if( _x < x || x + w < _x || _y < y || y + h < _y) return false; - COMIC_ELEMENT_OPERATION_MANAGER.hide(); - MOUSE_CURSOR( 'pointer'); - return true; + } else { + var move = _y -offsetY; + if( isTop === true){ + if( panelH - move < MIN_PANEL_HEIGHT){ + move = panelH -MIN_PANEL_HEIGHT; + } + PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move); } else { - var move = _y -offsetY; - if( isTop === true){ - if( panelH - move < MIN_PANEL_HEIGHT){ - move = panelH -MIN_PANEL_HEIGHT; - } - PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move); - } else { - var _h = startH +move; - if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){ - PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h); - } + var _h = startH +move; + if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){ + PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h); } } - return true; - }, - onMouseUp: function( _mouseX, _mouseY){ - if( isDragging !== true) return; - ( startY !== panelY || startH !== panelH) && HISTORY.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]); - isDragging = false; - MOUSE_CURSOR( ''); - }, - busy: function(){ - return isDragging - }, - onPanelResize: function( _x, _y, _w, _h){ - panelX = _x; - panelY = _y; - if( panelW !== _w){ - ELM.style.width = ( _w +2) +'px'; - panelW = _w; - } - panelH = _h; - y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH); - w = panelW +2; } + return true; + } + this.onMouseUp = function( _mouseX, _mouseY){ + if( isDragging !== true) return; + ( startY !== panelY || startH !== panelH) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]); + isDragging = false; + MOUSE_CURSOR( ''); + } + this.busy = function(){ + return isDragging + } + this.onPanelResize = function( _x, _y, _w, _h){ + panelX = _x; + panelY = _y; + if( panelW !== _w){ + ELM.style.width = ( _w +2) +'px'; + panelW = _w; + } + panelH = _h; + y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH); + w = panelW +2; } }; - var PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true), - PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false); + var PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true ), + PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false ); PanelResizerClass = undefined; - +/* -------------------------------------------------------------------------------------------- + * CONSOLE_CONTROLER + */ var CONSOLE_CONTROLER = ( function(){ var LAYER_BACK_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer back', 'ctrl + B', layerBack, false, true, false), LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer forward', 'ctrl + F', layerForward, false, false, false), DELETE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'delete', 'ctrl + D', del, false, true, true), EDIT_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'Edit Text', 'ctrl + E', edit, false, true, false), CHANGE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'change', 'ctrl + U', change, false, false, true), - SAVE = HISTORY.saveState, + SAVE = HISTORY_CONTROL.saveState, jqStage, jqConsoleParent, jqConsoleWrapper, @@ -1866,38 +1448,41 @@ pettanr.editor = ( function(){ } function layerBack(){ if( currentElement === null) return; - COMIC_ELEMENT_CONTROL.replaceComicElement( currentElement, false); - updateInfomation(); - SAVE( COMIC_ELEMENT_CONTROL.restoreReplaceObject, [ currentElement, true], [ currentElement, false]); + if( COMIC_ELEMENT_CONTROL.replace( currentElement, false) === false) return; + INFOMATION_WINDOW.update( currentElement); + SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, true], [ currentElement, false]); var _z = currentElement.z; LAYER_BACK_BUTTON.visible( _z > 0); - LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1); + LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1); } function layerForward(){ if( currentElement === null) return; - COMIC_ELEMENT_CONTROL.replaceComicElement( currentElement, true); - updateInfomation(); - SAVE( COMIC_ELEMENT_CONTROL.restoreReplaceObject, [ currentElement, false], [ currentElement, true]); + if( COMIC_ELEMENT_CONTROL.replace( currentElement, true) === false) return; + INFOMATION_WINDOW.update( currentElement); + SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, false], [ currentElement, true]); var _z = currentElement.z; LAYER_BACK_BUTTON.visible( _z > 0); - LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1); + LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1); } function del(){ if( currentElement === null) return; buttonBackOrForward( true); - COMIC_ELEMENT_CONTROL.removeComicElement( currentElement); - SAVE( COMIC_ELEMENT_CONTROL.restoreComicElement, [ true, currentElement], [ false, currentElement], true); + COMIC_ELEMENT_CONTROL.remove( currentElement); + SAVE( COMIC_ELEMENT_CONTROL.restore, [ true, currentElement], [ false, currentElement], true); COMIC_ELEMENT_OPERATION_MANAGER.hide(); } function edit(){ - if( currentElement === null || currentElement.type !== COMIC_ELEMENT_TYPE_TEXT) return; - TEXT_EDITOR_CONTROL.show( currentElement); - buttonBackOrForward( true); + if( currentElement === null || currentElement.type !== PANEL_ELEMENT_TYPE_TEXT) return; + pettanr.textEditor.bootInOverlay( PANEL_CONTROL.x(), PANEL_CONTROL.y(), currentElement ); + buttonBackOrForward( true ); } function change(){ if( currentElement === null) return; buttonBackOrForward( true); - IMAGE_GROUP_EXPROLER.show( currentElement.url); + pettanr.premiumSatge.bootInOverlay( currentElement.getArtistID(), currentElement.resourcePicture ); + } + function onImageSelect( resourcePicture ){ + currentElement.resourcePicture( resourcePicture ); } return { init: function(){ @@ -1924,7 +1509,9 @@ pettanr.editor = ( function(){ delete CONSOLE_CONTROLER.init; }, - show: function( _currentElement, _w, _h){ + show: function( _currentElement, _w, _h ){ + CONSOLE_CONTROLER.init && CONSOLE_CONTROLER.init(); + visible === false && jqConsoleWrapper.show(); visible = true; currentElement = _currentElement; @@ -1932,17 +1519,17 @@ pettanr.editor = ( function(){ _z = _currentElement.z; if( currentType !== _currentType){ currentType = _currentType; - jqImgConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_IMAGE); - jqTextConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_TEXT); - consoleWidth = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth; - consoleHeight = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight; + jqImgConsole.toggle( _currentType === PANEL_ELEMENT_TYPE_IMAGE); + jqTextConsole.toggle( _currentType === PANEL_ELEMENT_TYPE_TEXT); + consoleWidth = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth; + consoleHeight = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight; } consoleX = Math.floor( ( _w -consoleWidth) /2); LAYER_BACK_BUTTON.visible( _z > 0); - LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1); + LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1); DELETE_BUTTON.visible( true); - EDIT_BUTTON.visible( _currentType === COMIC_ELEMENT_TYPE_TEXT); + EDIT_BUTTON.visible( _currentType === PANEL_ELEMENT_TYPE_TEXT); CHANGE_BUTTON.visible( false); if( _w > consoleWidth * 1.5 && _h > consoleHeight * 1.5){ @@ -1987,18 +1574,21 @@ pettanr.editor = ( function(){ } })(); - +/* -------------------------------------------------------------------------------------------- + * TAIL_OPERATOR + * - comicElementOperator + */ var TAIL_OPERATOR = ( function(){ var MOUSE_CURSOR = updateMouseCursor, - ELM_MOVER = document.getElementById( 'balloon-tail-mover'), - SIZE = pettanr.util.getElementSize( ELM_MOVER).width, - SIN = Math.sin, - COS = Math.cos, - ATAN = Math.atan, - FLOOR = Math.floor, - DEG_TO_RAD = Math.PI / 180, - RAD_TO_DEG = 1 /DEG_TO_RAD, - currentText = null, + ELM_MOVER = document.getElementById( 'balloon-tail-mover'), + SIZE = pettanr.util.getElementSize( ELM_MOVER).width, + SIN = Math.sin, + COS = Math.cos, + ATAN = Math.atan, + FLOOR = Math.floor, + DEG_TO_RAD = Math.PI / 180, + RAD_TO_DEG = 1 / DEG_TO_RAD, + currentText = null, tailX, tailY, x, y, w, h, balloonW, balloonH, balloonA, radA, @@ -2006,13 +1596,13 @@ pettanr.editor = ( function(){ startA; return { - update: function ( _w, _h, _a){ + update: function ( _w, _h, _a ){ balloonW = _w !== undefined ? _w : balloonW; balloonH = _h !== undefined ? _h : balloonH; balloonA = _a !== undefined ? _a : balloonA; - radA = balloonA *DEG_TO_RAD; - tailX = FLOOR( ( ( COS( radA) /2 +0.5) *( balloonW +SIZE)) -SIZE /2); - tailY = FLOOR( ( ( SIN( radA) /2 +0.5) *( balloonH +SIZE)) -SIZE /2); + radA = ( balloonA - 90 ) * DEG_TO_RAD; + tailX = FLOOR( ( ( COS( radA ) / 2 + 0.5 ) * ( balloonW + SIZE )) - SIZE / 2); + tailY = FLOOR( ( ( SIN( radA ) / 2 + 0.5 ) * ( balloonH + SIZE )) - SIZE / 2); ELM_MOVER.style.left = tailX +'px'; ELM_MOVER.style.top = tailY +'px'; //log.html( [ balloonW, balloonH, balloonA].join()); @@ -2022,12 +1612,12 @@ pettanr.editor = ( function(){ * visibilityのほうがいい, display:none だと ie で描画が狂う */ ELM_MOVER.style.visibility = ''; - this.update( _currentText.w, _currentText.h, _currentText.angle()); + TAIL_OPERATOR.update( _currentText.w, _currentText.h, _currentText.angle() ); currentText = _currentText; }, hitTest: function( _mouseX, _mouseY){ - var _x = tailX -SIZE /2, - _y = tailY -SIZE /2; + var _x = tailX -SIZE / 2, + _y = tailY -SIZE / 2; ret = _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY; ret === true && MOUSE_CURSOR( 'move'); return ret; @@ -2037,10 +1627,10 @@ pettanr.editor = ( function(){ currentText = null; }, onStart: function( _currentText, _mouseX, _mouseY){ - if( _currentText.type !== COMIC_ELEMENT_TYPE_TEXT) return false; + if( _currentText.type !== PANEL_ELEMENT_TYPE_TEXT ) return false; x = _currentText.x; y = _currentText.y; - if( this.hitTest( _mouseX -x, _mouseY -y) === true){ + if( TAIL_OPERATOR.hitTest( _mouseX -x, _mouseY -y ) === true){ w = _currentText.w; h = _currentText.h; currentText = _currentText; @@ -2050,16 +1640,15 @@ pettanr.editor = ( function(){ return false; }, onDrag: function( _mouseX, _mouseY){ - _mouseX = _mouseX -x -w /2; - _mouseY = _mouseY -y -h /2; //Balloonの中心を0,0とする座標系に変換 - - this.update( w, h, + _mouseX = _mouseX - x - w / 2; + _mouseY = _mouseY - y - h / 2; //Balloonの中心を0,0とする座標系に変換 + TAIL_OPERATOR.update( w, h, _mouseX !== 0 ? - ATAN( _mouseY /_mouseX) *RAD_TO_DEG +( _mouseX < 0 ? 180 : 0) : - _mouseY > 0 ? 90 : -90 + ATAN( _mouseY / _mouseX ) * RAD_TO_DEG + ( _mouseX > 0 ? 90 : 270 ) : + _mouseY > 0 ? 180 : 0 ); - currentText && currentText.angle( balloonA); - COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( undefined, undefined, undefined, balloonA); + currentText && currentText.angle( FLOOR( balloonA + 0.5 )); + INFOMATION_WINDOW.update( currentText ); }, onFinish: function(){ startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA); @@ -2072,8 +1661,13 @@ pettanr.editor = ( function(){ currentText = null; } } - })(), - RESIZE_OPERATOR = ( function(){ + })(); + +/* -------------------------------------------------------------------------------------------- + * RESIZE_OPERATOR + * - comicElementOperator + */ + var RESIZE_OPERATOR = ( function(){ var MOUSE_CURSOR = updateMouseCursor, GRID_ENABLED = GRID_CONTROL.enabled; @@ -2125,14 +1719,20 @@ pettanr.editor = ( function(){ y = _y !== undefined ? _y : y; w = _w !== undefined ? _w : w; h = _h !== undefined ? _h : h; - elmResizerContainerStyle.left = x +'px'; - elmResizerContainerStyle.top = y +'px'; - elmResizerContainerStyle.width = w +'px'; - elmResizerContainerStyle.height = h +'px'; - elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px'; - elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px'; - elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px'; - elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px'; + try { + elmResizerContainerStyle.left = x +'px'; + elmResizerContainerStyle.top = y +'px'; + elmResizerContainerStyle.width = w +'px'; + elmResizerContainerStyle.height = h +'px'; + elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px'; + elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px'; + elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px'; + elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px'; + } catch(e){ + alert( [x, y, w, h].join( ',')); + return; + } + POSITION_ARRAY.splice( 0, POSITION_ARRAY.length); POSITION_ARRAY.push( @@ -2168,23 +1768,23 @@ pettanr.editor = ( function(){ currentElement.resize( x, y, w, h); currentIsTextElement === true && TAIL_OPERATOR.update( w, h); CONSOLE_CONTROLER.show( currentElement, w, h); - COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( x, y, undefined, undefined, w, h); + INFOMATION_WINDOW.update( currentElement); } - function flip( _flipV, _flipH){ + function flip( _flipH, _flipV){ var p = CURSOR_AND_FLIP[ currentIndex]; currentIndex = _flipH === true || _flipV === true ? p[ _flipH === true && _flipV === true ? 'vh' : ( _flipH === true ? 'h' : 'v') ] : currentIndex; MOUSE_CURSOR( CURSOR_AND_FLIP[ currentIndex].cursor); elmResizerContainer.className = 'current-resizer-is-' +currentIndex; - currentElement.flip( _flipV, _flipH); + currentElement.flip( _flipH, _flipV); } return { update: draw, index: function( _mouseX, _mouseY){ - var p; - for( var i=4; i<8; i++){ + var p, i; + for( i=4; i<8; i++){ p = POSITION_ARRAY[ i]; if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){ MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor); @@ -2192,7 +1792,7 @@ pettanr.editor = ( function(){ return currentIndex = i; } } - for( var i=0; i<4; i++){ + for( i=0; i<4; i++){ p = POSITION_ARRAY[ i]; if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){ MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor); @@ -2206,7 +1806,7 @@ pettanr.editor = ( function(){ }, show: function( _currentElement){ currentElement = _currentElement; - currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT; + currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT; elmResizerContainerStyle.display = ''; }, hide: function(){ @@ -2215,7 +1815,7 @@ pettanr.editor = ( function(){ }, onStart: function( _currentElement, _mouseX, _mouseY){ currentElement = _currentElement; - currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT; + currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT; if( _currentElement.keepSize === true) return false; currentIndex = this.index( _mouseX, _mouseY); if( currentIndex === -1) return false; @@ -2225,7 +1825,7 @@ pettanr.editor = ( function(){ startY = baseY = _currentElement.y; startW = baseW = _currentElement.w; startH = baseH = _currentElement.h; - if( _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE){ + if( _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE){ startFilpV = _currentElement.flipV(); startFilpH = _currentElement.flipH(); } @@ -2262,45 +1862,45 @@ pettanr.editor = ( function(){ } } - if( _w >= MIN_OBJECT_SIZE && _h >= MIN_OBJECT_SIZE){ + if( _w >= MIN_ELEMENT_SIZE && _h >= MIN_ELEMENT_SIZE){ } else - if( _w >= -MIN_OBJECT_SIZE && _h >= -MIN_OBJECT_SIZE){ + if( _w >= -MIN_ELEMENT_SIZE && _h >= -MIN_ELEMENT_SIZE){ //return; - if( _w < MIN_OBJECT_SIZE){ - //_x += Math.abs( MIN_OBJECT_SIZE -_w); + if( _w < MIN_ELEMENT_SIZE){ + //_x += Math.abs( MIN_ELEMENT_SIZE -_w); _x = currentX; - _w = MIN_OBJECT_SIZE; + _w = MIN_ELEMENT_SIZE; } - if( _h < MIN_OBJECT_SIZE){ - //_y += Math.abs( MIN_OBJECT_SIZE -_h); + if( _h < MIN_ELEMENT_SIZE){ + //_y += Math.abs( MIN_ELEMENT_SIZE -_h); _y = currentY; - _h = MIN_OBJECT_SIZE; + _h = MIN_ELEMENT_SIZE; } } else - if( currentElement.type === COMIC_ELEMENT_TYPE_TEXT){ + if( currentElement.type === PANEL_ELEMENT_TYPE_TEXT){ return; } else - if( _w < -MIN_OBJECT_SIZE || _h < -MIN_OBJECT_SIZE){ + if( _w < -MIN_ELEMENT_SIZE || _h < -MIN_ELEMENT_SIZE){ - if( _w < -MIN_OBJECT_SIZE && _h > MIN_OBJECT_SIZE){ + if( _w < -MIN_ELEMENT_SIZE && _h > MIN_ELEMENT_SIZE){ // flipH _memoryX = _x; baseX = _x = _x +_w; baseY = _y; baseW = _w = _memoryX -_x; baseH = _h; - flip( false, true); + flip( true, false); flipV = currentElement.flipV(); } else - if( _w > MIN_OBJECT_SIZE && _h < -MIN_OBJECT_SIZE){ + if( _w > MIN_ELEMENT_SIZE && _h < -MIN_ELEMENT_SIZE){ // flipV _memoryY = _y; baseX = _x; baseY = _y = _y +_h; baseW = _w; baseH = _h = _memoryY -_y; - flip( true, false); + flip( false, true); flipH = currentElement.flipH(); } else { // flipVH @@ -2346,7 +1946,7 @@ pettanr.editor = ( function(){ onCancel: function(){ MOUSE_CURSOR( ''); COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH); - currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ? + currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) : currentElement.animate( startX, startY, startW, startH, angle); }, @@ -2360,8 +1960,13 @@ pettanr.editor = ( function(){ onShiftUpdate: update, onCtrlUpdate: update } - })(), - POSITION_OPERATOR = ( function(){ + })(); + +/* -------------------------------------------------------------------------------------------- + * POSITION_OPERATOR + * - comicElementOperator + */ + var POSITION_OPERATOR = ( function(){ var MOUSE_CURSOR = updateMouseCursor, GRID_ENABLED = GRID_CONTROL.enabled; @@ -2376,7 +1981,7 @@ pettanr.editor = ( function(){ y = _y !== undefined ? _y : y; RESIZE_OPERATOR.update( x, y); currentElement.resize( x, y); - COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( x, y); + INFOMATION_WINDOW.update( currentElement); } return { @@ -2417,13 +2022,12 @@ pettanr.editor = ( function(){ })(); -/* - * -------------------------------------------------------------------------------------------- +/* -------------------------------------------------------------------------------------------- * COMIC_ELEMENT_OPERATION_MANAGER */ var COMIC_ELEMENT_OPERATION_MANAGER = ( function(){ var MOUSE_CURSOR = updateMouseCursor, - SAVE = HISTORY.saveState, + SAVE = HISTORY_CONTROL.saveState, GRID_ENABLED = GRID_CONTROL.enabled, HIT_AREA = MOUSE_HIT_AREA, currentIsTextElement = false, @@ -2441,30 +2045,14 @@ pettanr.editor = ( function(){ RESIZE_OPERATOR.update( currentx, currenty, currentw, currenth); currentIsTextElement === true && TAIL_OPERATOR.update( currentw, currenth, angle); CONSOLE_CONTROLER.show( currentElement, currentw, currenth); - updateInfomation( currentx, currenty, currentElement.z, angle, currentw, currenth); - } - function updateInfomation( _x, _y, _z, _a, _w, _h, keepAspect){ - _w = _w !== undefined ? _w : currentw; - _h = _h !== undefined ? _h : currenth; - INFOMATION_WINDOW.update( - currentElement === null ? -1 : currentElement.type, - _x !== undefined ? _x : currentx, - _y !== undefined ? _y : currenty, - _z !== undefined ? _z : ( currentElement === null ? '*' : currentElement.z), - _a !== undefined ? Math.floor( _a) : ( currentIsTextElement === true ? Math.floor( angle) : '-'), - _w, - _h, - currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualW() === 0 ? '?' : Math.floor( _w / currentElement.actualW() *100)), - currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualH() === 0 ? '?' : Math.floor( _h / currentElement.actualH() *100)), - currentElement === null || currentIsTextElement === true ? '-' : currentElement.keepAspect - ); + INFOMATION_WINDOW.update( currentElement); } function show( _currentElement){ currentElement === null && RESIZE_OPERATOR.show( _currentElement); if( currentElement !== _currentElement){ currentElement = _currentElement; - currentIsTextElement = ( _currentElement.type === COMIC_ELEMENT_TYPE_TEXT); + currentIsTextElement = ( _currentElement.type === PANEL_ELEMENT_TYPE_TEXT); currentIsTextElement === true ? TAIL_OPERATOR.show( _currentElement) : TAIL_OPERATOR.hide(); flipV = currentIsTextElement === false ? _currentElement.flipV() : 0; @@ -2476,29 +2064,48 @@ pettanr.editor = ( function(){ ); } } - function hide(){ + + pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 16, undefined, undefined, function( e){ + currentOperator !== null && currentOperator.onShiftUpdate && currentOperator.onShiftUpdate(); + }); + pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 17, undefined, undefined, function( e){ + currentOperator !== null && currentOperator.onCtrlUpdate && currentOperator.onCtrlUpdate(); + }); + pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 27, false, false, function( e){ + currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel(); + currentOperator = null; + }); + return { + open: function(){ + this.hide(); + }, + close: function(){ + + }, + hide: function(){ currentElement !== null && RESIZE_OPERATOR.hide(); currentElement = null; MOUSE_CURSOR( ''); TAIL_OPERATOR.hide(); CONSOLE_CONTROLER.hide(); - updateInfomation(); - } - function restoreState( arg){ + INFOMATION_WINDOW.update( null); + }, + resize: resize, + restoreState: function( arg){ if( arg && arg.length !== 8) return; var _currentElement = arg[ 0], _x = arg[ 1], _y = arg[ 2], _w = arg[ 3], _h = arg[ 4], _a = arg[ 5], _flipV = arg[ 6], _flipH = arg[ 7]; if( !_currentElement && !currentOperator) return; - _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ? + _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ? _currentElement.animate( _x, _y, _w, _h, _flipV, _flipH) : _currentElement.animate( _x, _y, _w, _h, _a); currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel(); currentOperator = null; currentElement === _currentElement ? resize( _x, _y, _w, _h, _a) : show( _currentElement); - } - function saveComicElementStatus( startX, startY, startW, startH, startA, startFilpV, startFilpH){ + }, + saveStatus: function( startX, startY, startW, startH, startA, startFilpV, startFilpH){ startX = startX !== undefined ? startX : currentx; startY = startY !== undefined ? startY : currenty; startW = startW !== undefined ? startW : currentw; @@ -2506,61 +2113,17 @@ pettanr.editor = ( function(){ startA = startA !== undefined ? startA : angle; startFilpV = startFilpV !== undefined ? startFilpV : flipV; startFilpH = startFilpH !== undefined ? startFilpH : flipH; - currentElement && SAVE( restoreState, + currentElement && SAVE( COMIC_ELEMENT_OPERATION_MANAGER.restoreState, [ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH], [ currentElement, currentx, currenty, currentw, currenth, angle, flipV, flipH] ); - } - pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 16, undefined, undefined, function( e){ - currentOperator !== null && currentOperator.onShiftUpdate && currentOperator.onShiftUpdate(); - }); - pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 17, undefined, undefined, function(){ - currentOperator !== null && currentOperator.onCtrlUpdate && currentOperator.onCtrlUpdate(); - }); - pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 27, false, false, function(){ - currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel(); - currentOperator = null; - }); - return { - init: function(){ - hide(); - delete COMIC_ELEMENT_OPERATION_MANAGER.init; }, - hide: hide, - resize: resize, - restoreState: restoreState, - updateInfomation: updateInfomation, - saveStatus: saveComicElementStatus, busy: function(){ return currentOperator !== null; }, - hitareaX: function( _comicElement, _x){ - if( _comicElement === currentElement){ - var _consoleX = CONSOLE_CONTROLER.x(); - return currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA; - } - return _x -HIT_AREA; - }, - hitareaY: function( _comicElement, _y){ - return _y -HIT_AREA; - }, - hitareaW: function( _comicElement, _w){ - if( _comicElement === currentElement){ - var _consoleW = CONSOLE_CONTROLER.w(); - return ( _consoleW < currentw ? currentw : _consoleW) +HIT_AREA *2; - } - return _w +HIT_AREA *2; - }, - hitareaH: function( _comicElement, _h){ - if( _comicElement === currentElement){ - var _consoleY = CONSOLE_CONTROLER.y(); - return ( _consoleY < currenth ? currenth : _consoleY +CONSOLE_CONTROLER.h()) +HIT_AREA *2; - } - return _h +HIT_AREA *2; - }, - hitTest: function( _mouseX, _mouseY, _comicElement){ + hitTest: function( _mouseX, _mouseY, _panelElement ){ var _x, _y, _w, _h; - if( _comicElement === currentElement){ + if( _panelElement === currentElement){ var _consoleX = CONSOLE_CONTROLER.x(); _x = currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA; _y = currenty -HIT_AREA; @@ -2569,11 +2132,12 @@ pettanr.editor = ( function(){ var _consoleY = CONSOLE_CONTROLER.y(); _h = ( _consoleY < currenth ? currenth : _consoleY +CONSOLE_CONTROLER.h()) +HIT_AREA *2; } else { - _x = _comicElement.x -HIT_AREA; - _y = _comicElement.y -HIT_AREA; - _w = _comicElement.w +HIT_AREA *2; - _h = _comicElement.h +HIT_AREA *2; + _x = _panelElement.x -HIT_AREA; + _y = _panelElement.y -HIT_AREA; + _w = _panelElement.w +HIT_AREA *2; + _h = _panelElement.h +HIT_AREA *2; } + log.html( [ _x, _y, _w, _h ].join( ' ') ); return _x <= _mouseX && _mouseX <= _x + _w && _y <= _mouseY && _mouseY <= _y + _h; }, onMouseDown: function( _currentElement, _mouseX, _mouseY){ @@ -2610,181 +2174,135 @@ pettanr.editor = ( function(){ * // COMIC_ELEMENT_OPERATION_MANAGER */ - var AbstractComicElement = function( JQ_WAPPER, COMIC_ELM_TYPE, update, x, y, w, h, z, timing){ - var OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER; - return { - $: JQ_WAPPER, - type: COMIC_ELM_TYPE, - x: x, - y: y, - w: w, - h: h, - z: z, - timing: timing, - hitareaX: function(){ return OPERATOR.hitareaX( this, this.x);}, - hitareaY: function(){ return OPERATOR.hitareaY( this, this.y);}, - hitareaW: function(){ return OPERATOR.hitareaW( this, this.w);}, - hitareaH: function(){ return OPERATOR.hitareaH( this, this.h);}, - hitTest: function( _mouseX, _mouseY){ return OPERATOR.hitTest( _mouseX, _mouseY, this);}, - shift: function( _shiftX, _shiftY){ - update( this.x +_shiftX, this.y +_shiftY); - }, - busy: function(){ - return OPERATOR.busy(); - }, - onMouseMove: function( _mouseX, _mouseY){ - OPERATOR.onMouseMove( this, _mouseX, _mouseY); - }, - onMouseUp: function( _mouseX, _mouseY){ - OPERATOR.onMouseUp( this, _mouseX, _mouseY); - }, - onMouseDown: function( _mouseX, _mouseY){ - OPERATOR.onMouseDown( this, _mouseX, _mouseY); - } + var AbstractComicElement = function( COMIC_ELM_TYPE ){ + this.type = COMIC_ELM_TYPE; + this.hitTest = function( _mouseX, _mouseY ){ + return COMIC_ELEMENT_OPERATION_MANAGER.hitTest( _mouseX, _mouseY, this ); + } + this.shift = function( _shiftX, _shiftY ){ + this.resize( this.x + _shiftX, this.y + _shiftY); + } + this.busy = function(){ + return COMIC_ELEMENT_OPERATION_MANAGER.busy(); + } + this.onMouseMove = function( _mouseX, _mouseY ){ + COMIC_ELEMENT_OPERATION_MANAGER.onMouseMove( this, _mouseX, _mouseY ); + } + this.onMouseUp = function( _mouseX, _mouseY ){ + COMIC_ELEMENT_OPERATION_MANAGER.onMouseUp( this, _mouseX, _mouseY ); + } + this.onMouseDown = function( _mouseX, _mouseY ){ + COMIC_ELEMENT_OPERATION_MANAGER.onMouseDown( this, _mouseX, _mouseY ); } }; -/* - * -------------------------------------------------------------------------------------------- + +/* -------------------------------------------------------------------------------------------- * ImageElementClass */ var jqImageElementOrigin; - var ImageElementClass = function( url, IMAGE_SET_ID, x, y, z, w, h, timing){ - jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html()); + var ImageElementClass = function( data ){ + jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete' ).remove().html() ); - var JQ_WRAPPER = jqImageElementOrigin.clone( true), - OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER, - SAVE = HISTORY.saveState, - HIT_AREA = MOUSE_HIT_AREA, + var jqWrap = jqImageElementOrigin.clone( true ), + flipH = data.width < 0 ? -1 : 1, + flipV = data.height < 0 ? -1 : 1, + resourcePicture = data.resource_picture, + actualW = data.resource_picture.width, + actualH = data.resource_picture.height, reversibleImage = null, - actualW = 0, actualH = 0, - flipH = w < 0 ? -1 : 1, - flipV = h < 0 ? -1 : 1, - instance; - w = Math.floor( w); - h = Math.floor( h); - - function update( _x, _y, _w, _h, animate){ - instance.x = x = _x !== undefined ? _x : x; - instance.y = y = _y !== undefined ? _y : y; - instance.w = w = _w !== undefined ? _w : w; - instance.h = h = _h !== undefined ? _h : h; - JQ_WRAPPER[ animate === true ? 'animate' : 'css']( { - left: x, - top: y, - width: w, - height: h - }, 250, onAnimeComplete); - animate !== true && onAnimeComplete(); + instance = this, + x, y, z, w, h; + function flipReversibleImage(){ + reversibleImage && reversibleImage.resize( flipH * w, flipV * h ); } - function onAnimeComplete(){ - reversibleImage.resize( flipH * w, flipV * h); - } - - function updateUrl( _url){ - if( url === _url) return; - url = _url || url; - var _reversibleImage = pettanr.image.createReversibleImage( url, flipH * w, flipV * h, function( _url, _actualW, _actualH){ - actualW = _actualW; - actualH = _actualH; - }); - if( reversibleImage !== null){ - JQ_WRAPPER.children( reversibleImage.elm).replaceWith( _reversibleImage.elm); + function updateResourcePicture( _resourcePicture ){ + resourcePicture = _resourcePicture; + + actualW = _resourcePicture.width; + actualH = _resourcePicture.height; + + var _reversibleImage = pettanr.image.createReversibleImage( + [ pettanr.CONST.RESOURCE_PICTURE_PATH, _resourcePicture.id, '.', _resourcePicture.ext ].join(''), + flipH * w, flipV * h + ); + if( reversibleImage !== null ){ + jqWrap.children( reversibleImage.elm ).replaceWith( _reversibleImage.elm ); reversibleImage.destroy(); } else { - JQ_WRAPPER.append( _reversibleImage.elm); + jqWrap.append( _reversibleImage.elm ); } reversibleImage = _reversibleImage; } - return pettanr.util.extend( - new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, timing), - { - init: function(){ - instance = this; - updateUrl(); - update(); - delete this.init; - }, - flip: function( _flipH, _flipV){ - if( _flipH !== true && _flipV !== true) return; - flipH = _flipH === true ? -flipH : flipH; - flipV = _flipV === true ? -flipV : flipV; - reversibleImage.resize( flipH * w, flipV * h); - }, - flipV: function(){ - return flipV; - }, - flipH: function(){ - return flipH; - }, - url: function( _url, _actualW, _actualH){ - if( _url && _url !== url){ - SAVE( updateUrl, url, _url); - actualW = _actualW; - actualH = _actualH; - updateUrl( _url); - } - return url; - }, - actualW: function(){ return actualW;}, - actualH: function(){ return actualH;}, - keepSize: false, - resize: update, - animate: function ( _x, _y, _w, _h, _flipH, _flipV){ - flipH = _flipH !== undefined ? _flipH : flipH; - flipV = _flipV !== undefined ? _flipV : flipV; - update( _x, _y, _w, _h, true); - }, - getAsHTML: function( isAbsoluteUrl, isXHTML){ - return [ - '' : ' \/>' - ].join( ''); - }, - getAsJsonString: function(){ - var cr = pettanr.LINE_FEED_CODE_TEXTAREA; - return [ - '"new', this.timing, '": {', cr, - '"resource_picture_id": 1,', cr, - '"x": ', x, ',', cr, - '"y": ', y, ',', cr, - '"z": ', this.z, ',', cr, - '"width": ', w, ',', cr, - '"height": ', h, ',', cr, - '"flipv": ', flipV === true ? 1 : 0, ',', cr, - '"fliph": ', flipH === true ? 1 : 0, ',', cr, - '"t": ', this.timing, cr, - '}' - ].join( ''); - }, - destroy: function(){ - reversibleImage.destroy(); - JQ_WRAPPER.remove(); - JQ_WRAPPER = reversibleImage = OPERATOR = null; - delete this.destroy; - } + /* global methods */ + this.$ = jqWrap; + //this.x = x; + //this.y = y; + //this.w = w; + //this.h = h; + this.z = data.z; + this.timing = data.t || PANEL_ELEMENT_ARRAY.length + 1; + this.keepSize = false; + this.init = function(){ + updateResourcePicture( data.resource_picture ); + instance.resize( data.x, data.y, Math.abs( data.width ), Math.abs( data.height ) ); + delete instance.init; + } + this.flip = function( _updateH, _updateV ){ + if( _updateH !== true && _updateV !== true ) return; + flipH = _updateH === true ? -flipH : flipH; + flipV = _updateV === true ? -flipV : flipV; + reversibleImage.resize( flipH * w, flipV * h ); + } + this.flipV = function(){ return flipV;} + this.flipH = function(){ return flipH;} + this.resourcePicture = function( _resourcePicture ){ + if( _resourcePicture && _resourcePicture !== resourcePicture ){ + HISTORY_CONTROL.saveState( updateResourcePicture, resourcePicture, _resourcePicture ); + updateResourcePicture( _resourcePicture ); } - ); + return resourcePicture; + } + this.getArtistID = function(){ + return resourcePicture.artist_id || resourcePicture.artist.id || -1; + } + this.actualW = function(){ return actualW;} + this.actualH = function(){ return actualH;} + this.resize = function( _x, _y, _w, _h, animate ){ + instance.x = x = Type.isFinite( _x ) === true ? _x : x; + instance.y = y = Type.isFinite( _y ) === true ? _y : y; + instance.w = w = Type.isFinite( _w ) === true ? _w : w; + instance.h = h = Type.isFinite( _h ) === true ? _h : h; + jqWrap[ animate === true ? 'animate' : 'css' ]( { + left: x, + top: y, + width: w, + height: h + }, 250, flipReversibleImage ); + animate !== true && flipReversibleImage(); + } + this.animate = function ( _x, _y, _w, _h, _flipH, _flipV ){ + flipH = _flipH !== undefined ? _flipH : flipH; + flipV = _flipV !== undefined ? _flipV : flipV; + instance.resize( _x, _y, _w, _h, true ); + } + this.destroy = function(){ + delete instance.destroy; + + reversibleImage.destroy(); + jqWrap.stop().remove(); + jqWrap = reversibleImage = resourcePicture = data = instance = null; + } } + ImageElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_IMAGE ); /* * / ImageElementClass * -------------------------------------------------------------------------------------------- */ -/* - * -------------------------------------------------------------------------------------------- +/* -------------------------------------------------------------------------------------------- * TextElementClass * - * ELM はpettanr.domで書き出したものを突っ込むcreateの場合 - * * type * 0.none * 1.speach balloon @@ -2795,24 +2313,74 @@ pettanr.editor = ( function(){ * */ var jqTextElementOrigin; - var TextElementClass = function( type, a, text, x, y, z, w, h, timing){ + var TextElementClass = function( data ){ jqTextElementOrigin = jqTextElementOrigin || ( function(){ var _OLD_IE = $( $( '#textElementTempleteForOldIE').remove().html()), _MODERN = $( $( '#textElementTemplete').remove().html()); return pettanr.ua.isIE === true && pettanr.ua.ieRenderingVersion < 8 ? _OLD_IE : _MODERN; })(); - var JQ_WRAPPER = jqTextElementOrigin.clone( true), - XBROWSER_BALLOON = pettanr.balloon.createBalloon( w, h, a, type), - TEXT_ELM = JQ_WRAPPER.find( 'td,.speach-inner').eq( 0), - OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER, - HIT_AREA = MOUSE_HIT_AREA, - SAVE = HISTORY.saveState, - instance; - - JQ_WRAPPER.find( 'img').eq( 0).replaceWith( XBROWSER_BALLOON.elm); + var JQ_WRAPPER = jqTextElementOrigin.clone( true ), + elmText = JQ_WRAPPER.find( 'td,.speach-inner' ).get( 0 ), + type = data.balloon_template_id, + text = ( function(){ + var _speachs = data.speeches_attributes; + for( var k in _speachs ){ + return _speachs[ k ].content || ''; + } + return ''; + })(), + balloon = pettanr.balloon.createBalloon( data.width, data.height, data.tail, type ), + x, y, w, h, a, + instance = this; + + JQ_WRAPPER.find( 'img' ).eq( 0 ).replaceWith( balloon.elm ); + + function updateType( _type ){ + if( type !== _type ){ + type = _type || type; + balloon.type( type ); + } + } + function updateAngle( _a ){ + if( _a !== undefined && a !== _a ){ + a = _a !== undefined ? _a : a; + balloon.angle( a ); + } + } + function updateText( _text ){ + text = _text || text || ''; + elmText.firstChild.data = text; + } + function resizeBalloon(){ + balloon && balloon.resize( a, w, h ); + } - function update( _x, _y, _w, _h, _a, animate){ + /* global methods */ + this.$ = JQ_WRAPPER; + //this.x = x; + //this.y = y; + //this.w = w; + //this.h = h; + this.z = data.z; + this.timing = data.t || PANEL_ELEMENT_ARRAY.length + 1; + this.init = function(){ + updateText(); + instance.resize( data.x, data.y, data.width, data.height, data.tail ); + delete instance.init; + }; + this.angle = function( _a ){ + _a !== undefined && instance.resize( x, y, w, h, _a ); + return a; + }; + this.text = function( _text ){ + if( _text && text !== _text) { + HISTORY_CONTROL.saveState( updateText, text || '', _text ); + updateText( _text ); + } + return text; + }; + this.resize = function( _x, _y, _w, _h, _a, animate ){ instance.x = x = _x !== undefined ? _x : x; instance.y = y = _y !== undefined ? _y : y; instance.w = w = _w !== undefined ? _w : w; @@ -2824,131 +2392,35 @@ pettanr.editor = ( function(){ top: y, width: w, height: h - }, 250, - function(){ - XBROWSER_BALLOON.resize( a, w, h); - } + }, 250, resizeBalloon ); - animate !== true && XBROWSER_BALLOON.resize( a, w, h); - } - - function updateType( _type){ - if( type !== _type){ - type = _type || type; - XBROWSER_BALLOON.type( type); - } - } - function updateAngle( _a){ - if( _a !== undefined && a !== _a){ - a = _a !== undefined ? _a : a; - XBROWSER_BALLOON.angle( a); - } - } - function updateText( _text){ - text = _text || text || ''; - TEXT_ELM.html( text); - } - - return pettanr.util.extend( - new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, timing), - { - init: function(){ - instance = this; - updateText(); - update(); - delete this.init; - }, - angle: function( _a){ - _a !== undefined && update( undefined, undefined, undefined, undefined, _a); - return a; - }, - text: function( _text){ - if( _text && text !== _text) { - SAVE( updateText, text || '', _text); - updateText( _text); - } - return text; - }, - resize: update, - animate: function ( _x, _y, _w, _h, _a){ - update( _x, _y, _w, _h, _a, true); - }, - destroy: function(){ - JQ_WRAPPER.remove(); - XBROWSER_BALLOON.destroy(); - OPERATOR = null; - delete this.destroy; - }, - getAsJSON: function(){ - - }, - getAsJsonString: function(){ - var cr = pettanr.LINE_FEED_CODE_TEXTAREA; - return [ - '"new', this.timing, '": {', cr, - '"balloon_template_id": ', 1, ',', cr, - '"system_picture_id": ', 1, ',', cr, - '"size": ', 1, ',', cr, - '"tail": ', a, ',', cr, - '"x": ', x, ',', cr, - '"y": ', y, ',', cr, - '"z": ', this.z, ',', cr, - '"t": ', this.timing, ',', cr, - '"width": ', w, ',', cr, - '"height": ', h, ',', cr, - '"speaches_attributes": {', cr, - '"newf', this.timing, '": {', cr, - '"content": "', text, '",', cr, - '"x": ', x, ',', cr, - '"y": ', y, ',', cr, - '"t": ', 0, ',', cr, - '"width": ', w, ',', cr, - '"height": ', h, cr, - '}', cr, - '}', cr, - '}' - ].join( ''); - }, - getAsHTML: function( isAbsoluteUrl, isXHTML){ - var url = XBROWSER_BALLOON.getURL(); - return [ - '' : ' \/>', - pettanr.LINE_FEED_CODE_TEXTAREA, - '
', text, '<\/span>', '<\/div>' - - ].join( ''); - }, - getAsXML: function(){} - - } - ); + animate !== true && resizeBalloon(); + }; + this.animate = function ( _x, _y, _w, _h, _a ){ + instance.resize( _x, _y, _w, _h, _a, true ); + }; + this.destroy = function(){ + delete instance.destroy; + + JQ_WRAPPER.stop().remove(); + balloon.destroy(); + JQ_WRAPPER = elmText = data = balloon = instance = null; + }; } + TextElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_TEXT ); - +/* -------------------------------------------------------------------------------------------- + * COMIC_ELEMENT_CONTROL + * - mouseEventListener + */ var COMIC_ELEMENT_CONTROL = ( function(){ - var SAVE = HISTORY.saveState, + var SAVE = HISTORY_CONTROL.saveState, ELM_CONTAINER = document.getElementById( 'comic-element-container'), currentElement = null, currentLockTest = false, currentLock = false, panelX, panelY, panelW, panelH, startX, startY; - /* * append, remove, replace * @@ -2961,129 +2433,142 @@ pettanr.editor = ( function(){ * * append comicElement * 1. 新しい comicElement の z-position を得る - * 2. ｚ の同じ comicElementを見つけ、その前に加える。または一番先頭へ。（COMIC_ELEMENT_ARRAY） - * zが大きいほど、COMIC_ELEMENT_ARRAYの先頭へ。 - * 3. dom位置は、COMIC_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。 + * 2. ｚ の同じ comicElementを見つけ、その前に加える。または一番先頭へ。（PANEL_ELEMENT_ARRAY） + * zが大きいほど、PANEL_ELEMENT_ARRAYの先頭へ。 + * 3. dom位置は、PANEL_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。 * * * remove comicElement * 1. remove * 2. renumber z */ - function appendComicElement( _comicElement) { - _comicElement.init && _comicElement.init(); - var z = _comicElement.z, - l = COMIC_ELEMENT_ARRAY.length, - _jqElm = _comicElement.$.stop().css( { + function appendComicElement( _panelElement ) { + var z = Type.isFinite( _panelElement.z ) === true ? _panelElement.z : -1, + l = PANEL_ELEMENT_ARRAY.length, + _jqElm = _panelElement.$.stop().css( { filter: '', opacity: '' }); - if( typeof z !== 'number' || z < 0 || z >= l){ - COMIC_ELEMENT_ARRAY.unshift( _comicElement); - ELM_CONTAINER.appendChild( _jqElm.get( 0)); + if( z < 0 ){ + PANEL_ELEMENT_ARRAY.unshift( _panelElement ); + // ELM_CONTAINER.appendChild( _jqElm.get( 0 )); + renumber(); _jqElm.fadeIn(); } else { - var insertIndex = 0; - for( var i = 0; i < l; ++i){ - if( COMIC_ELEMENT_ARRAY[ i].z <= z){ - insertIndex = i; - break; - } + for( var i = 0; i < l; ++i ){ + if( PANEL_ELEMENT_ARRAY[ i ].z < z ) break; + } + if( i === l ){ + PANEL_ELEMENT_ARRAY.push( _panelElement ); + //ELM_CONTAINER.appendChild( _jqElm.get( 0 )); + } else { + PANEL_ELEMENT_ARRAY.splice( i, 0, _panelElement ); + //PANEL_ELEMENT_ARRAY[ insertIndex ].$.before( _jqElm ); } - COMIC_ELEMENT_ARRAY[ insertIndex].$.before( _jqElm.fadeIn()); - COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement); + renumber(); + _jqElm.fadeIn(); } - numberingComicElement(); } - function removeComicElement( _comicElement) { - var l = COMIC_ELEMENT_ARRAY.length; - for( var i=0; i 0){ + _comicElm = PANEL_ELEMENT_ARRAY.shift(); + _comicElm.destroy && _comicElm.destroy(); + } + }, + remove: removeComicElement, + restore: restoreComicElement, + replace: replaceComicElement, + restoreReplace: restoreReplaceElement, + onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction ){ /* * リサイズが、ResizerTopによって行われた場合、comicElementのyを動かして見かけ上動かないようにする。 */ if( isResizerTopAction === true){ var _shiftX = _panelW -panelW, _shiftY = _panelH -panelH, - l = COMIC_ELEMENT_ARRAY.length; + l = PANEL_ELEMENT_ARRAY.length; for( var i = 0; i < l; i++){ - COMIC_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY); + PANEL_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY); } } panelX = _panelX; @@ -3096,20 +2581,20 @@ pettanr.editor = ( function(){ ELM_CONTAINER.style.left = _panelX +'px'; ELM_CONTAINER.style.top = _panelY +'px'; }, - onMouseMove: function( _mouseX, _mouseY){ - var l = COMIC_ELEMENT_ARRAY.length, + onMouseMove: function( _mouseX, _mouseY ){ + var l = PANEL_ELEMENT_ARRAY.length, _x = _mouseX -panelX, _y = _mouseY -panelY, _elm = currentElement; if( _elm !== null){ currentLockTest = currentLockTest === true && _x === 0 && _y === 0; - if( _elm.busy() === true){ + if( _elm.busy() === true ){ _elm.onMouseMove( _x, _y); return true; } - if( _elm.hitTest( _x, _y) === true){ - _elm.onMouseMove( _x, _y); // cursor + if( _elm.hitTest( _x, _y) === true ){ + _elm.onMouseMove( _x, _y ); // cursor return true; } if( currentLock === true){ @@ -3118,25 +2603,27 @@ pettanr.editor = ( function(){ } } for( var i=0; i' - ].join( '') - ); - HTML_ARRAY.push( '
'); - - return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA); - }, - getAsJsonString: function(){ - var JSON_STRING_ARRAY = [], - IMAGE_ARRAY = [], - BALLOON_ARRAY = [], - l = COMIC_ELEMENT_ARRAY.length, - _timing = 0, - _comicElement, - cr = pettanr.LINE_FEED_CODE_TEXTAREA; - - while( IMAGE_ARRAY.length + BALLOON_ARRAY.length < l){ - _comicElement = getComicElementByTiming(); - if( _comicElement === null) break; - _comicElement.type === COMIC_ELEMENT_TYPE_IMAGE ? - IMAGE_ARRAY.push( _comicElement.getAsJsonString()) : - BALLOON_ARRAY.push( _comicElement.getAsJsonString()); - } - function getComicElementByTiming(){ - while( _timing < l *2){ - for(var i=0; i' + ].join( '') + ); + HTML_ARRAY.push( ''); + + return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA); + } + + function panelElementToHtml( _panelElement, isAbsoluteUrl, isXHTML ){ + var url; + if( _panelElement.type === 0 ){ + url = [ pettanr.CONST.RESOURCE_PICTURE_PATH, _panelElement.resourcePicture().id, '.', _panelElement.resourcePicture().ext ].join( '' ); + return [ + '' : ' \/>' + ].join( ''); + } else { + url = pettanr.balloon.getBalloonUrl( _panelElement.w, _panelElement.h, _panelElement.angle() ); + return [ + '' : ' \/>', + pettanr.LINE_FEED_CODE_TEXTAREA, + '
', _panelElement.text(), '<\/span>', '<\/div>' + + ].join( ''); + } + } + + function getJsonGetString(){ + timing = 0; + + var JSON_STRING_ARRAY = [], + ELEMENT_ARRAY = [], + l = panelElementArray.length, + cr = pettanr.LINE_FEED_CODE_TEXTAREA, + _panelElement; + + while( ELEMENT_ARRAY.length <= l){ + _panelElement = getPanelElementByTiming(); + if( _panelElement === null ) break; + + ELEMENT_ARRAY.push( _panelElement.type === 0 ? getImageJsonGET( _panelElement ) : balloonToJson( _panelElement )); + } + return [ + '{', cr, + '"panel": {', cr, + '"id": ', panelID, ',', cr, + '"border": ', borderSize, ',', cr, + '"comic_id": ', comicID, ',', cr, + '"resource_picture_id": 1,', cr, + '"x": ', 0, ',', cr, + '"y": ', 0, ',', cr, + '"z": ', 0, ',', cr, + panelTimming !== -1 ? ( '"t": ' + panelTimming + ',' + cr ) : '', + '"width": ', panelW, ',', cr, + '"height": ', panelH, ',', cr, + '"panel_elements": [', cr, + ELEMENT_ARRAY.join( ',' + cr ), cr, + ']', cr, + '}', cr, + '}' + ].join( '' ); + } + function getImageJsonGET( _imageElement ){ + var cr = pettanr.LINE_FEED_CODE_TEXTAREA; + return [ + '{', cr, + '"resource_picture": {', cr, + '"id": ', _imageElement.resourcePicture().id, ',', cr, + '"ext": ', '"',_imageElement.resourcePicture().ext, '"', cr, + '},', cr, + '"x": ', _imageElement.x, ',', cr, + '"y": ', _imageElement.y, ',', cr, + '"z": ', _imageElement.z, ',', cr, + '"width": ', _imageElement.flipH() * _imageElement.w, ',', cr, + '"height": ', _imageElement.flipV() * _imageElement.h, ',', cr, + '"t": ', timing, cr, + '}' + ].join( ''); + } + + function getJsonPostString(){ + timing = 0; + + var JSON_STRING_ARRAY = [], + IMAGE_ARRAY = [], + BALLOON_ARRAY = [], + l = panelElementArray.length, + _panelElement, + cr = pettanr.LINE_FEED_CODE_TEXTAREA; + + while( IMAGE_ARRAY.length + BALLOON_ARRAY.length <= l){ + _panelElement = getPanelElementByTiming(); + if( _panelElement === null) break; + _panelElement.type === 0 ? + IMAGE_ARRAY.push( [ '"new', timing, '": ', imageToJson( _panelElement ) ].join( '' )) : + BALLOON_ARRAY.push( [ '"new', timing, '": ', balloonToJson( _panelElement ) ].join( '' ) ); + } + return [ + '{', cr, + '"panel": {', cr, + '"id": ', panelID, ',', cr, + '"border": ', borderSize, ',', cr, + '"comic_id": ', comicID, ',', cr, + '"resource_picture_id": 1,', cr, + '"x": ', 0, ',', cr, + '"y": ', 0, ',', cr, + '"z": ', 0, ',', cr, + '"t": ', panelTimming, ',', cr, + '"width": ', panelW, ',', cr, + '"height": ', panelH, ',', cr, + '"panel_pictures_attributes": {', cr, + IMAGE_ARRAY.join( ',' + cr ), cr, + '},', cr, + '"balloons_attributes": {', cr, + BALLOON_ARRAY.join( ',' + cr ), cr, + '}', cr, + '}', cr, + '}' + ].join( '' ); + } + function imageToJson( _imageElement ){ + var cr = pettanr.LINE_FEED_CODE_TEXTAREA; + return [ + '{', cr, + '"resource_picture_id": ', _imageElement.resourcePicture().id, ',', cr, + '"x": ', _imageElement.x, ',', cr, + '"y": ', _imageElement.y, ',', cr, + '"z": ', _imageElement.z, ',', cr, + '"width": ', _imageElement.flipH() * _imageElement.w, ',', cr, + '"height": ', _imageElement.flipV() * _imageElement.h, ',', cr, + '"t": ', timing, cr, + '}' + ].join( ''); + } + + function balloonToJson( _textElement ){ + var cr = pettanr.LINE_FEED_CODE_TEXTAREA; + return [ + '{', cr, + '"balloon_template_id": ', 1, ',', cr, + '"system_picture_id": ', 1, ',', cr, + '"size": ', 1, ',', cr, + '"tail": ', _textElement.angle(), ',', cr, + '"x": ', _textElement.x, ',', cr, + '"y": ', _textElement.y, ',', cr, + '"z": ', _textElement.z, ',', cr, + '"t": ', timing, ',', cr, + '"width": ', _textElement.w, ',', cr, + '"height": ', _textElement.h, ',', cr, + '"speeches_attributes": {', cr, + '"newf', timing, '": {', cr, + '"content": "', _textElement.text(), '",', cr, + '"x": ', _textElement.x, ',', cr, + '"y": ', _textElement.y, ',', cr, + '"t": ', timing, ',', cr, + '"width": ', _textElement.w, ',', cr, + '"height": ', _textElement.h, cr, + '}', cr, + '}', cr, + '}' + ].join( ''); + } + + function clickGenerate(){ + var i = comboboxFormat.selectIndex(), + text = 'sorry...'; + if( i === 0 ){ + text = getJsonPostString(); + } else + if( i === 1 ){ + text = getJsonGetString(); + } else + if( i === 3 ){ + text = getAsHtmlString( false, false ); + } else { - WINDOWS_CONTROL.onWindowResize( _windowW, _windowH); - MENU_BAR_CONTROL.onWindowResize( _windowW, _windowH); - PANEL_CONTROL.onWindowResize( _windowW, _windowH); - }, - MIN_WIDTH: 320, - MIN_HEIGHT: 320 + } + jqOutputArea.val( text ); + } + function clickClose(){ + pettanr.outputConsole.shutdown(); + return false; + } + + /* grobal method */ + this.rootElement = document.getElementById( 'output-console-wrapper' ); + this.displayName = ID; + this.ID = ID; + + this.MIN_WIDTH = 320; + this.MIN_HEIGHT = 320; + this.init = function(){ + jqWrap = $( '#output-console-wrapper').hide(); + jqOutputArea = $( '#output-area'); + + comboboxFormat = pettanr.form.createCombobox( document.getElementById( 'output-console-format' ), null, ID ); + for( var i=0, l = FORMAT_LIST.length; i