/*\r
* pettanR work.js\r
- * version 0.4.0\r
+ * version 0.4.1\r
* \r
* author:\r
* itozyun\r
return pettanr.ua.isIE === true ? this.LINE_FEED_CODE_TEXTAREA : pre.innerHTML; // ie ?? \r
})();\r
\r
-\r
-\r
/* ----------------------------------------\r
* pettanr.editor\r
* - MENU_BAR_CONTROL\r
* - INFOMATION_WINDOW\r
* - TOOL_BOX_WINDOW\r
* - HELP_DOCUMENTS_WINDOW\r
- * - CANVAS_CONTROL\r
- * - GRID_CONTROL\r
- * - WHITE_GLASS_CONTROL\r
- * - PANEL_CONTROL\r
- * - COMIC_ELEMENT_CONTROL\r
- * - PanelResizerClass\r
- * - COMIC_ELEMENT_OPERATOR\r
- * - TAIL_CONTROLER\r
- * - ImageElementClass\r
- * - TextElementClass\r
+ * - PANEL_CONTROL\r
+ * - GRID_CONTROL\r
+ * - WHITE_GLASS_CONTROL\r
+ * - PANEL_CONTROL\r
+ * \r
+ * \r
+ * - PanelResizerClass\r
+ * - PANEL_RESIZER_TOP\r
+ * - PANEL_RESIZER_BOTTOM\r
+ * - CONSOLE_CONTROLER\r
+ * \r
+ * - TAIL_OPERATOR\r
+ * - RESIZE_OPERATOR\r
+ * - POSITION_OPERATOR\r
+ * - COMIC_ELEMENT_OPERATION_MANAGER\r
+ * \r
+ * - ImageElementClass\r
+ * - TextElementClass\r
+ * \r
+ * - COMIC_ELEMENT_CONTROL\r
+ * \r
* \r
*/\r
pettanr.editor = ( function(){\r
+\r
var COMIC_ELEMENT_TYPE_IMAGE = 0,\r
COMIC_ELEMENT_TYPE_TEXT = 1,\r
MOUSE_LISTENER_ARRAY = [],\r
+ COMIC_ELEMENT_ARRAY = [],\r
ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'),\r
+ MIN_PANEL_HEIGHT = 20,\r
+ MIN_OBJECT_SIZE = 19,\r
+ MOUSE_HIT_AREA = 10,\r
jqMouseEventChacher,\r
jqEditor,\r
windowW, windowH,\r
currentListener = null,\r
currentCursor = '',\r
- option;\r
+ option,\r
+ log;\r
\r
/* ----------------------------------------\r
* MENU BAR\r
* kbd shortcut\r
*/\r
var MENU_BAR_CONTROL = ( function(){\r
- var BAR_ID = 'menu-bar',\r
- ELM_BAR = document.getElementById( BAR_ID),\r
+ var ELM_BAR = document.getElementById( 'menu-bar'),\r
ELM_ITEM_CLASSNAME = 'menu-bar-item',\r
ELM_ITEM_ORIGN = ( function(){\r
- var ret = document.createElement( 'DIV'),\r
- div = document.createElement( 'DIV'),\r
- ul = document.createElement( 'UL');\r
+ var ret = document.createElement( 'div'),\r
+ div = document.createElement( 'div'),\r
+ ul = document.createElement( 'ul');\r
ret.className = ELM_ITEM_CLASSNAME;\r
ret.appendChild( div);\r
ret.appendChild( ul);\r
return ret;\r
})(),\r
ELM_SELECTION_ORIGN = ( function(){\r
- var ret = document.createElement( 'LI'),\r
- a = document.createElement( 'A'),\r
- span = document.createElement( 'SPAN'),\r
- key = document.createElement( 'KBD');\r
+ var ret = document.createElement( 'li'),\r
+ a = document.createElement( 'a'),\r
+ span = document.createElement( 'span'),\r
+ key = document.createElement( 'kbd');\r
a.appendChild( span);\r
a.appendChild( key);\r
ret.appendChild( a);\r
ITEM_ARRAY = [],\r
barH = pettanr.util.getElementSize( ELM_BAR).height,\r
itemW = pettanr.util.getElementSize( ELM_ITEM_ORIGN).width,\r
- selectionW = pettanr.util.getElementSize( ELM_ITEM_ORIGN.getElementsByTagName( 'UL')[ 0]).width,\r
+ selectionW = pettanr.util.getElementSize( ELM_ITEM_ORIGN.getElementsByTagName( 'ul')[ 0]).width,\r
jqStage, jqBar;\r
ELM_BAR.style.top = ( -barH) +'px';\r
\r
var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter){\r
var ELM_WRAPPER = ELM_SELECTION_ORIGN.cloneNode( true),\r
- ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'SPAN')[ 0];\r
- updateTitle( title);\r
- updateVisible( visible);\r
+ ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'span')[ 0],\r
+ elmShortcut = ELM_WRAPPER.getElementsByTagName( 'kbd')[ 0];\r
+ \r
+ if( shortcut){\r
+ elmShortcut.innerHTML = shortcut;\r
+ } else {\r
+ elmShortcut.parentNode.removeChild( elmShortcut);\r
+ }\r
+ elmShortcut = null;\r
\r
- ( function(){\r
- var ELM_SHORTCUT = ELM_WRAPPER.getElementsByTagName( 'KBD')[ 0];\r
- if( shortcut){\r
- ELM_SHORTCUT.innerHTML = shortcut;\r
- } else {\r
- ELM_SHORTCUT.parentNode.removeChild( ELM_SHORTCUT);\r
- } \r
- })();\r
-\r
container.appendChild( ELM_WRAPPER);\r
\r
+ updateTitle( title);\r
+ updateVisible( visible);\r
+ \r
function updateTitle( _title){\r
ELM_TITLE.innerHTML = title = _title;\r
}\r
function updateVisible( _visible){\r
- _visible !== undefined && ( function(){\r
+ if( _visible !== undefined){\r
visible = !!_visible;\r
ELM_WRAPPER.className = visible === true ? '' : 'disabled';\r
- })();\r
+ };\r
}\r
return {\r
elm: ELM_WRAPPER,\r
\r
var MenuBarItemClass = function( title, opt_callbackArray){\r
var ELM_WRAPPER = ELM_ITEM_ORIGN.cloneNode( true),\r
- ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'DIV')[ 0],\r
- ELM_SELECTION = ELM_WRAPPER.getElementsByTagName( 'UL')[ 0],\r
+ ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'div')[ 0],\r
+ ELM_SELECTION = ELM_WRAPPER.getElementsByTagName( 'ul')[ 0],\r
INDEX = ITEM_ARRAY.length,\r
SELECTION_CALLBACK_ARRAY = opt_callbackArray || [],\r
numSelection = 0,\r
var that = this,\r
i = ( function(){\r
var parent = that.parentNode,\r
- children = parent.getElementsByTagName( 'LI'),\r
+ children = parent.getElementsByTagName( 'li'),\r
l = children.length;\r
for(var i=0; i<l; ++i){\r
if( children[ i] === that) return i;\r
var ret = MenubarSelectionClass.apply( {}, [ ELM_SELECTION, title, shortcut, visible, separateAfter]),\r
before = SELECTION_CALLBACK_ARRAY.length > 0 ? SELECTION_CALLBACK_ARRAY[ SELECTION_CALLBACK_ARRAY.length -1] : null;\r
SELECTION_CALLBACK_ARRAY.push( callback);\r
- if( ( separateBefore === true && before) || ( before && before.separateAfter === true)){\r
+ if( before !== null && ( separateBefore === true || before.separateAfter === true)){\r
ret.elm.style.borderTop = '1px solid #ccc';\r
}\r
return ret;\r
return {\r
init: function(){\r
jqStage = jqEditor;\r
- jqBar = $( '#' +BAR_ID).animate( { top: 0});\r
+ jqBar = $( ELM_BAR).animate( { top: 0});\r
\r
var l = ITEM_ARRAY.length;\r
for( var i=0; i<l; ++i){\r
createAjaxSelection: function( callback){\r
var elmLoading = document.createElement( 'li'),\r
that = this,\r
- elmSelection = this.elm.getElementsByTagName( 'UL')[ 0];\r
+ elmSelection = this.elm.getElementsByTagName( 'ul')[ 0];\r
elmSelection.appendChild( elmLoading);\r
elmLoading.className = 'loading';\r
elmLoading.style.height = '90px'; \r
null, onMenuClick, true\r
),\r
jqStage,\r
- jqWrapper, jqHeader, elmBody, elmBodyStyle,\r
+ jqWrapper, jqHeader, jqFooter = null,\r
+ elmBody, elmBodyStyle,\r
startX, startY, startW, startH,\r
- xOffset, yOffset,\r
- headerH, bodyH,\r
+ offsetX, offsetY,\r
+ headerH, bodyH, footerH = 0,\r
isDragging = false,\r
isResizing = false,\r
bodyIsTachable = false,\r
visible === true ? instance.close() : instance.open();\r
}\r
function update( _x, _y, _w, _h){\r
- ( w !== _w || h !== _h) && instance.onResize && instance.onResize( _w, _h);\r
- x = _x !== undefined ? _x : x;\r
- y = _y !== undefined ? _y : y;\r
- w = _w !== undefined ? _w : w;\r
- h = _h !== undefined ? _h : h;\r
- y = y > MENU_BAR_CONTROL.h ? y : MENU_BAR_CONTROL.h;\r
+ _x = _x !== undefined ? _x : x;\r
+ _y = _y !== undefined ? _y : y;\r
+ _y = _y > MENU_BAR_CONTROL.h ? _y : MENU_BAR_CONTROL.h;\r
+ _w = _w !== undefined ? _w : w;\r
+ _h = _h !== undefined ? _h : h;\r
jqWrapper.css( {\r
- left: x,\r
- top: y,\r
- width: w,\r
- height: h\r
+ left: _x,\r
+ top: _y,\r
+ width: _w,\r
+ height: _h\r
});\r
- bodyH = h -headerH;\r
+ bodyH = _h -headerH -footerH;\r
elmBodyStyle.height = bodyH +'px';\r
+ ( w !== _w || h !== _h) && instance.onResize && instance.onResize( _w, bodyH);\r
+ x = _x;\r
+ y = _y;\r
+ w = _w;\r
+ h = _h;\r
}\r
function bodyBackOrForward( isBack){\r
if( !instance) return;\r
elmBodyStyle.left = isBack === true ? 0 : x +'px';\r
elmBodyStyle.top = isBack === true ? 0 : y +headerH +'px';\r
elmBodyStyle.width = isBack === true ? '' : ( w -WINDOW_BODY_BODER_SIZE *2) +'px';\r
- bodyIsTachable === isBack && isBack === true ? jqWrapper.append( elmBody) : jqStage.append( elmBody);\r
+ bodyIsTachable === isBack && isBack === true ? jqHeader.after( elmBody) : jqStage.append( elmBody);\r
bodyIsTachable = !isBack;\r
}\r
function onWindowResize( e){\r
startY = y;\r
startW = w;\r
startH = h;\r
- xOffset = e.pageX;\r
- yOffset = e.pageY;\r
+ offsetX = e.pageX;\r
+ offsetY = e.pageY;\r
MOUSE_CURSOR( 'nw-resize');\r
e.stopPropagation();\r
return false;\r
return {\r
init: function( jqContainer){\r
/*\r
- * setTimeout で呼ばれるグローバルメソッドは、this でなく instance を使う.\r
+ * setTimeout で呼ばれるグローバルメソッド内では、this でなく instance を使う.\r
*/\r
instance = this;\r
\r
headerH = pettanr.util.getElementSize( jqHeader.get( 0)).height;\r
elmBody = jqWrapper.children( '.window-body').get( 0);\r
elmBodyStyle = elmBody.style;\r
+ \r
if( bodyTempleteID) {\r
jqWrapper.find( '.window-body-insert-position').replaceWith( $( $( '#' +bodyTempleteID).remove().html()));\r
} else {\r
h: function(){ return h;},\r
$: null,\r
title: function( _title){\r
- _title !== undefined && jqHeader.html( _title);\r
- title = _title || title;\r
+ typeof _title === 'string' && jqHeader.html( _title);\r
+ title = typeof _title === 'string' ? _title : title;\r
return title;\r
},\r
visible: visible,\r
firstOpen: function(){\r
if( RESIZE_BUTTON_ENABLED === true){\r
- jqWrapper.find( '.window-resize-button').eq( 0).mousedown( onWindowResize);\r
+ footerH = pettanr.util.getElementSize( jqWrapper.find( '.window-footer').get( 0)).height;\r
+ //jqWrapper.find( '.window-resize-button').eq( 0).mousedown( onWindowResize);\r
} else {\r
- jqWrapper.find( '.window-resize-button').remove();\r
+ jqWrapper.find( '.window-footer').remove();\r
}\r
update( x, y, w, h);\r
\r
},\r
bodyBackOrForward: bodyBackOrForward,\r
onMouseDown: function( _mouseX, _mouseY){\r
+ if( RESIZE_BUTTON_ENABLED === true && x +w -20 <= _mouseX && _mouseX < x +w && y +headerH +bodyH < _mouseY && _mouseY <= y +h){\r
+ bodyBackOrForward( true);\r
+ isResizing = true;\r
+ startX = x;\r
+ startY = y;\r
+ startW = w;\r
+ startH = h;\r
+ offsetX = _mouseX;\r
+ offsetY = _mouseY;\r
+ MOUSE_CURSOR( 'nw-resize');\r
+ return;\r
+ }\r
+ \r
if( x > _mouseX || y > _mouseY || x +w < _mouseX || y +headerH < _mouseY ) return;\r
if( CLOSE_BUTTON_ENABLED === true && x +w -closeButtonWidth < _mouseX){\r
this.close();\r
return;\r
}\r
+ \r
isDragging = true;\r
MOUSE_CURSOR( 'move'); \r
startX = x;\r
startY = y;\r
startW = w;\r
startH = h;\r
- xOffset = _mouseX;\r
- yOffset = _mouseY;\r
+ offsetX = _mouseX;\r
+ offsetY = _mouseY;\r
},\r
onMouseUp: function( _mouseX, _mouseY){\r
isDragging = isResizing = false;\r
MOUSE_CURSOR( '');\r
},\r
onMouseMove: function( _mouseX, _mouseY){\r
- var _updateX = _mouseX -xOffset,\r
- _updateY = _mouseY -yOffset;\r
+ var _updateX = _mouseX -offsetX,\r
+ _updateY = _mouseY -offsetY;\r
\r
if( isResizing === true){\r
var _w = startW +_updateX,\r
*/\r
var TOOL_BOX_WINDOW = ( function(){\r
var addImageButton, addTextButton, editBgButton, switchGridButton, popupHelpButton, postButton,\r
- gridSwitchFunction,\r
instance;\r
\r
pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 73, false, true, addImage);\r
return false;\r
}\r
function switchGrid( e){\r
- setTimeout( gridSwitchFunction, 0);\r
+ setTimeout( GRID_CONTROL.update, 0);\r
e && e.preventDefault();\r
return false;\r
}\r
postButton = $( '#toolbox-post-button');\r
\r
delete this.onFirstOpen;\r
- },\r
- setGridSwitchFunction: function( _gridSwitchFunction){\r
- gridSwitchFunction = _gridSwitchFunction || gridSwitchFunction;\r
}\r
},\r
'toolbox-window', 'Tool box', 0, 215, 110, 290, true\r
);\r
})();\r
+ \r
+ \r
+/* ----------------------------------------\r
+ * IMAGE_EXPROLER\r
+ */\r
+ var IMAGE_EXPLORER_WINDOW = ( function(){\r
+ var instance, finder;\r
+ \r
+ return WINDOWS_CONTROL.createWindow(\r
+ this,\r
+ {\r
+ onInit: function(){\r
+ instance = this;\r
+ delete this.onInit;\r
+ },\r
+ onFirstOpen: function(){\r
+ finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.file.TREE_TYPE_IS_IMAGE);\r
+ delete this.onFirstOpen;\r
+ },\r
+ onOpen: function(){\r
+ finder.onOpen();\r
+ },\r
+ onResize: function( _w, _h){\r
+ finder.onWindowResize( _w, _h);\r
+ }\r
+ },\r
+ 'image-exproler', 'Album', 0, 215, 400, 350, false, true, true, 300, 300\r
+ );\r
+ })();\r
+ \r
+ \r
/* ----------------------------------------\r
* INFOMATION_WINDOW\r
*/ \r
},\r
onResize: function( w, h){\r
jqComicElementInformation && jqComicElementInformation.css( {\r
- height: this.bodyHeight()\r
+ height: h\r
});\r
},\r
update: function( _elementType, x, y, z, a, w, h, wPercent, hPercent, keepAspect){\r
success: function( _xml){\r
var jqXML = $( _xml),\r
helpTitle = jqXML.find( 'pages').eq( 0).attr( 'title'),\r
- elmNavi = document.createElement( 'DIV'),\r
- elmItemOrigin = document.createElement( 'A'),\r
- elmPages = document.createElement( 'DIV'),\r
- elmPageOrigin = document.createElement( 'DIV'),\r
- elmTitleOrigin = document.createElement( 'H2'),\r
+ elmNavi = document.createElement( 'div'),\r
+ elmItemOrigin = document.createElement( 'a'),\r
+ elmPages = document.createElement( 'div'),\r
+ elmPageOrigin = document.createElement( 'div'),\r
+ elmTitleOrigin = document.createElement( 'h2'),\r
elmPage,\r
numPage = 0;\r
elmNavi.className = 'sidenavi';\r
var that = this,\r
parent = this.parentNode,\r
i = ( function(){\r
- var children = parent.getElementsByTagName( 'A'),\r
+ var children = parent.getElementsByTagName( 'a'),\r
l = children.length;\r
for( var i=0; i<l; ++i){\r
if( children[ i] === that) return i;\r
},\r
onFirstOpen: onFirstOpen,\r
onResize: function( w, h){\r
- jqAjaxContents && jqAjaxContents.css( { height: this.bodyHeight()});\r
+ jqAjaxContents && jqAjaxContents.css( { height: h});\r
},\r
setAjaxContent: function( html){\r
\r
* GRID_CONTROL\r
*/\r
var GRID_CONTROL = ( function(){\r
- var elmGrid = document.getElementById( 'grid'),\r
- jQGrid,\r
+ var ELM_GRID = document.getElementById( 'grid'),\r
+ jqGrid,\r
visible = false;\r
- \r
- function update(){\r
- jQGrid.css( {\r
- opacity: '',\r
- fliter: ''\r
- }).stop()[ visible === true ? 'fadeOut' : 'fadeIn']();\r
- visible = !visible;\r
- if( visible === true && !elmGrid.style.backgroundImage){\r
- elmGrid.style.backgroundImage = "url('grid.gif')";\r
- }\r
- return visible;\r
- }\r
+\r
return {\r
init: function(){\r
- jQGrid = $( elmGrid);\r
- TOOL_BOX_WINDOW.setGridSwitchFunction( update);\r
+ jqGrid = $( ELM_GRID);\r
delete GRID_CONTROL.init;\r
},\r
- onCanvasResize: function( _canvasX, _canvasY){\r
- elmGrid.style.backgroundPosition = [ _canvasX % 10, 'px ', _canvasY % 10, 'px'].join( '');\r
- elmGrid.style.height = windowH +'px';\r
+ onPanelResize: function( _panelX, _panelY){\r
+ ELM_GRID.style.backgroundPosition = [ _panelX % 10, 'px ', _panelY % 10, 'px'].join( '');\r
+ ELM_GRID.style.height = windowH +'px';\r
},\r
enabled: function(){\r
return visible;\r
+ },\r
+ update: function(){\r
+ jqGrid.css( {\r
+ opacity: '',\r
+ fliter: ''\r
+ }).stop()[ visible === true ? 'fadeOut' : 'fadeIn']();\r
+ \r
+ visible = !visible;\r
+ \r
+ if( visible === true && !ELM_GRID.style.backgroundImage){\r
+ ELM_GRID.style.backgroundImage = "url('grid.gif')";\r
+ }\r
+ return visible; \r
}\r
}\r
})();\r
styleLeft = document.getElementById( 'whiteGlass-left').style,\r
styleRight = document.getElementById( 'whiteGlass-right').style,\r
styleBottom = document.getElementById( 'whiteGlass-bottom').style;\r
- function resize( _canvasX, _canvasY, _canvasW, _canvasH){\r
- var _w = _canvasW,\r
- _h = _canvasH,\r
- marginTop = _canvasY,\r
- marginBottom = windowH -_h -marginTop,\r
- marginX = _canvasX,\r
- rightWidth = windowW -_w -marginX;\r
- \r
- styleTop.height = ( marginTop < 0 ? 0 : marginTop) +'px';\r
- \r
- styleLeft.top = marginTop +'px';\r
- styleLeft.width = ( marginX < 0 ? 0 : marginX) +'px';\r
- styleLeft.height = ( _h + marginBottom) +'px';\r
- \r
- styleRight.top = marginTop +'px';\r
- styleRight.left = _w +marginX +'px';\r
- styleRight.width = ( rightWidth < 0 ? 0 : rightWidth) +'px';\r
- styleRight.height = ( _h + marginBottom) +'px';\r
- \r
- styleBottom.top = ( _h +marginTop) +'px';\r
- styleBottom.left = marginX +'px';\r
- styleBottom.width = _w +'px';\r
- styleBottom.height = ( marginBottom < 0 ? 0 : marginBottom) +'px';\r
- }\r
+\r
return {\r
- onCanvasResize: resize\r
+ onPanelResize: function( _panelX, _panelY, _panelW, _panelH){\r
+ var _w = _panelW,\r
+ _h = _panelH,\r
+ marginTop = _panelY,\r
+ marginBottom = windowH -_h -marginTop,\r
+ marginX = _panelX,\r
+ rightWidth = windowW -_w -marginX;\r
+ \r
+ styleTop.height = ( marginTop < 0 ? 0 : marginTop) +'px';\r
+ \r
+ styleLeft.top = marginTop +'px';\r
+ styleLeft.width = ( marginX < 0 ? 0 : marginX) +'px';\r
+ styleLeft.height = ( _h + marginBottom) +'px';\r
+ \r
+ styleRight.top = marginTop +'px';\r
+ styleRight.left = _w +marginX +'px';\r
+ styleRight.width = ( rightWidth < 0 ? 0 : rightWidth) +'px';\r
+ styleRight.height = ( _h + marginBottom) +'px';\r
+ \r
+ styleBottom.top = ( _h +marginTop) +'px';\r
+ styleBottom.left = marginX +'px';\r
+ styleBottom.width = _w +'px';\r
+ styleBottom.height = ( marginBottom < 0 ? 0 : marginBottom) +'px';\r
+ }\r
}\r
})();\r
\r
\r
- var MIN_PANEL_HEIGHT = 20,\r
- RESIZER_BORDER_WIDTH = 1;\r
-\r
/*\r
* PANEL_CONTROL\r
+ * panel-border の表示と onPanelResize の通知．\r
+ * \r
*/\r
var PANEL_CONTROL = ( function(){\r
- var DEFAULT_PANEL_WIDTH = 400,\r
+ var ELM_PANEL = document.getElementById('panel-tools-container'),\r
+ ELM_PANEL_STYLE = ELM_PANEL.style,\r
+ DEFAULT_PANEL_WIDTH = 400,\r
DEFAULT_PANEL_HEIGHT = 300,\r
- BORDER_WIDTH = 2,\r
- canvasW, canvasH, canvasX, canvasY,\r
- xOffset, yOffset, startCanvasX, startCanvasY,\r
+ borderSize = 2,\r
+ panelW, panelH, panelX, panelY,\r
+ offsetX, offsetY, startX, startY,\r
isDragging = false,\r
- isCanvasDraggble = false; \r
- \r
- var panelElm, borderWidth;\r
- \r
- function resize( isResizerTopAction, _x, _y, _w, _h){\r
- canvasX = _x !== undefined ? _x : canvasX;\r
- canvasY = _y !== undefined ? _y : canvasY;\r
- canvasW = _w !== undefined ? _w : canvasW;\r
- canvasH = _h !== undefined ? _h : canvasH;\r
- \r
- panelElm.css( {\r
- left: canvasX -BORDER_WIDTH,\r
- top: canvasY -BORDER_WIDTH,\r
- width: canvasW,\r
- height: canvasH\r
- });\r
- \r
- PANEL_RESIZER_TOP.onCanvasResize( canvasX, canvasY, canvasW, canvasH);\r
- PANEL_RESIZER_BOTTOM.onCanvasResize( canvasX, canvasY, canvasW, canvasH);\r
- GRID_CONTROL.onCanvasResize( canvasX, canvasY);\r
- WHITE_GLASS_CONTROL.onCanvasResize( canvasX, canvasY, canvasW, canvasH);\r
- COMIC_ELEMENT_CONTROL.onCanvasResize( canvasX, canvasY, canvasW, canvasH, isResizerTopAction === true);\r
- }\r
+ isDraggable = false;\r
\r
function onSpaceUpdate(e){\r
if( e.type === 'keyup'){\r
currentListener === null && updateMouseCursor( '');\r
- isCanvasDraggble = false;\r
+ isDraggable = false;\r
} else {\r
currentListener === null && updateMouseCursor( 'move');\r
- isCanvasDraggble = true;\r
+ isDraggable = true;\r
}\r
}\r
\r
return {\r
- init: function( _canvasW, _canvasH){\r
- panelElm = $( '#panel-border');\r
- borderWidth = panelElm.css( 'border-width');\r
-\r
- canvasW = _canvasW || DEFAULT_PANEL_WIDTH;\r
- canvasH = _canvasH || DEFAULT_PANEL_HEIGHT;\r
- canvasX = Math.floor( ( windowW -canvasW) /2);\r
- canvasY = Math.floor( ( windowH -canvasH) /2);\r
-\r
+ init: function( _panelW, _panelH, _borderSize){\r
+ panelW = _panelW || DEFAULT_PANEL_WIDTH;\r
+ panelH = _panelH || DEFAULT_PANEL_HEIGHT;\r
+ panelX = Math.floor( ( windowW -panelW) /2);\r
+ panelY = Math.floor( ( windowH -panelH) /2);\r
+ borderSize = _borderSize !== undefined ? _borderSize : borderSize;\r
+ \r
pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 32, false, false, onSpaceUpdate);\r
-\r
- COMIC_ELEMENT_CONTROL.init( canvasX, canvasY, canvasW, canvasH);\r
\r
- setTimeout( resize, 0);\r
+ setTimeout( PANEL_CONTROL.resize, 0);\r
\r
delete PANEL_CONTROL.init;\r
},\r
x: function(){\r
- return canvasX;\r
+ return panelX;\r
},\r
y: function(){\r
- return canvasY;\r
+ return panelY;\r
+ },\r
+ resize: function( isResizerTopAction, _x, _y, _w, _h){\r
+ panelX = _x !== undefined ? _x : panelX;\r
+ panelY = _y !== undefined ? _y : panelY;\r
+ panelW = _w !== undefined ? _w : panelW;\r
+ panelH = _h !== undefined ? _h : panelH;\r
+ \r
+ ELM_PANEL_STYLE.left = ( panelX -borderSize) +'px';\r
+ ELM_PANEL_STYLE.top = ( panelY -borderSize) +'px';\r
+ ELM_PANEL_STYLE.width = panelW +'px';\r
+ ELM_PANEL_STYLE.height = panelH +'px';\r
+ \r
+ PANEL_RESIZER_TOP.onPanelResize( panelX, panelY, panelW, panelH);\r
+ PANEL_RESIZER_BOTTOM.onPanelResize( panelX, panelY, panelW, panelH);\r
+ GRID_CONTROL.onPanelResize( panelX, panelY);\r
+ WHITE_GLASS_CONTROL.onPanelResize( panelX, panelY, panelW, panelH);\r
+ COMIC_ELEMENT_CONTROL.onPanelResize( panelX, panelY, panelW, panelH, isResizerTopAction === true);\r
},\r
- resize: resize,\r
onWindowResize: function( _windowW, _windowH){\r
- canvasX = Math.floor(( _windowW - canvasW) / 2);\r
- canvasY = Math.floor(( _windowH - canvasH) / 2);\r
- resize();\r
+ panelX = Math.floor(( _windowW - panelW) / 2);\r
+ panelY = Math.floor(( _windowH - panelH) / 2);\r
+ PANEL_CONTROL.resize();\r
},\r
onMouseMove: function( _mouseX, _mouseY){\r
- if( isCanvasDraggble === true && isDragging === true){\r
- resize( false, startCanvasX +_mouseX -xOffset, startCanvasY +_mouseY -yOffset);\r
+ if( isDraggable === true && isDragging === true){\r
+ PANEL_CONTROL.resize( false, startX +_mouseX -offsetX, startY +_mouseY -offsetY);\r
}\r
},\r
onMouseUp: function( _mouseX, _mouseY){\r
- if( isCanvasDraggble === true){\r
+ if( isDraggable === true){\r
isDragging = false;\r
updateMouseCursor( '');\r
}\r
},\r
onMouseDown: function( _mouseX, _mouseY){\r
- if( isCanvasDraggble === true){\r
- xOffset = _mouseX;\r
- yOffset = _mouseY;\r
- startCanvasX = canvasX;\r
- startCanvasY = canvasY;\r
+ if( isDraggable === true){\r
+ offsetX = _mouseX;\r
+ offsetY = _mouseY;\r
+ startX = panelX;\r
+ startY = panelY;\r
isDragging = true;\r
updateMouseCursor( 'move');\r
return true;\r
y = isTop === true ? ( -5 -RESIZER_HEIGHT -BORDER_WIDTH) : 0,\r
w,\r
h = RESIZER_HEIGHT,\r
- canvasX, canvasY, canvasW, canvasH,\r
- yOffset, startY, startH,\r
+ panelX, panelY, panelW, panelH,\r
+ offsetY, startY, startH,\r
isDragging = false,\r
MOUSE_CURSOR = updateMouseCursor;\r
\r
function restoreState( arg){\r
if( arg && arg.length > 3){\r
- PANEL_CONTROL.resize( isTop, arg[ 0] || canvasX, arg[ 1] || canvasY, arg[ 2] || canvasW, arg[ 3] || canvasH);\r
+ PANEL_CONTROL.resize( isTop, arg[ 0] || panelX, arg[ 1] || panelY, arg[ 2] || panelW, arg[ 3] || panelH);\r
}\r
}\r
\r
return isDragging;\r
},\r
onMouseDown: function( _mouseX, _mouseY){\r
- var _x = _mouseX -canvasX,\r
- _y = _mouseY -canvasY;\r
+ var _x = _mouseX -panelX,\r
+ _y = _mouseY -panelY;\r
if( _x < x || x + w < _x || _y < y || y + h < _y) return false;\r
- yOffset = _y;\r
- startY = canvasY;\r
- startH = canvasH;\r
+ offsetY = _y;\r
+ startY = panelY;\r
+ startH = panelH;\r
isDragging = true;\r
MOUSE_CURSOR( 'n-resize');\r
return true;\r
},\r
onMouseMove: function( _mouseX, _mouseY){\r
- var _x = _mouseX -canvasX,\r
- _y = _mouseY -canvasY;\r
+ var _x = _mouseX -panelX,\r
+ _y = _mouseY -panelY;\r
if( isDragging !== true){\r
if( _x < x || x + w < _x || _y < y || y + h < _y) return false;\r
- COMIC_ELEMENT_OPERATOR.hide();\r
+ COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
MOUSE_CURSOR( 'pointer');\r
return true;\r
} else {\r
- var move = _y -yOffset;\r
+ var move = _y -offsetY;\r
if( isTop === true){\r
- if( canvasH - move < MIN_PANEL_HEIGHT){\r
- move = canvasH -MIN_PANEL_HEIGHT;\r
+ if( panelH - move < MIN_PANEL_HEIGHT){\r
+ move = panelH -MIN_PANEL_HEIGHT;\r
}\r
- PANEL_CONTROL.resize( true, canvasX, canvasY + move, canvasW, canvasH - move);\r
+ PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move);\r
} else {\r
var _h = startH +move;\r
- if( 0 < _h && _h < windowH -canvasY -RESIZER_HEIGHT -5 -BORDER_WIDTH){\r
- PANEL_CONTROL.resize( false, canvasX, canvasY, canvasW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h);\r
+ if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){\r
+ PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h);\r
}\r
}\r
}\r
},\r
onMouseUp: function( _mouseX, _mouseY){\r
if( isDragging !== true) return;\r
- ( startY !== canvasY || startH !== canvasH) && HISTORY.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, canvasY, NaN, canvasH]);\r
+ ( startY !== panelY || startH !== panelH) && HISTORY.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]);\r
isDragging = false;\r
MOUSE_CURSOR( '');\r
},\r
busy: function(){\r
return isDragging\r
},\r
- onCanvasResize: function( _x, _y, _w, _h){\r
- canvasX = _x;\r
- canvasY = _y;\r
- if( canvasW !== _w){\r
+ onPanelResize: function( _x, _y, _w, _h){\r
+ panelX = _x;\r
+ panelY = _y;\r
+ if( panelW !== _w){\r
ELM.style.width = ( _w +2) +'px';\r
- canvasW = _w;\r
+ panelW = _w;\r
}\r
- canvasH = _h;\r
- y = isTop === true ? y : ( canvasH +5 +BORDER_WIDTH);\r
- w = canvasW +2;\r
+ panelH = _h;\r
+ y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH);\r
+ w = panelW +2;\r
}\r
}\r
};\r
PANEL_RESIZER_BOTTOM = PanelResizerClass.apply( {}, [ 'panel-resizer-bottom', false]);\r
\r
PanelResizerClass = undefined;\r
-/*\r
- * - COMIC_ELEMENT_CONTROL\r
- * - PanelResizerClass\r
- * - COMIC_ELEMENT_OPERATOR\r
- * - AbstractComicElement\r
- * - ImageElementClass\r
- * - TextElementClass\r
-*/\r
\r
- var MIN_OBJECT_SIZE = 19,\r
- MOUSE_HIT_AREA = 10,\r
- SAVE = HISTORY.saveState,\r
- log,\r
- DRAGGABLE_ELEMENT_ARRAY = [];// PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM\r
- \r
-/*\r
- * --------------------------------------------------------------------------------------------\r
- * COMIC_ELEMENT_OPERATOR\r
- */\r
- var COMIC_ELEMENT_OPERATOR = ( function(){\r
- var MOUSE_CURSOR = updateMouseCursor,\r
+\r
+ var CONSOLE_CONTROLER = ( function(){\r
+ var LAYER_BACK_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer back', 'ctrl + B', layerBack, false, true, false),\r
+ LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer forward', 'ctrl + F', layerForward, false, false, false),\r
+ DELETE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'delete', 'ctrl + D', del, false, true, true),\r
+ EDIT_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'Edit Text', 'ctrl + E', edit, false, true, false),\r
+ CHANGE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'change', 'ctrl + U', change, false, false, true),\r
SAVE = HISTORY.saveState,\r
- INFOMATION = INFOMATION_WINDOW.update,\r
- GRID_ENABLED = GRID_CONTROL.enabled,\r
- HIT_AREA = MOUSE_HIT_AREA,\r
- currentIsTextElement = false,\r
- currentControler = null,\r
+ jqStage,\r
+ jqConsoleParent,\r
+ jqConsoleWrapper,\r
+ jqConsoleTail,\r
+ jqImgConsole, jqTextConsole,\r
currentElement = null,\r
- currentx, currenty, currentw, currenth, angle, flipV, flipH,\r
- COMIC_ELEMENT_CONSOLE = ( function(){\r
- var LAYER_BACK_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer back', 'ctrl + B', layerBack, false, true, false),\r
- LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer forward', 'ctrl + F', layerForward, false, false, false),\r
- DELETE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'delete', 'ctrl + D', del, false, true, true),\r
- EDIT_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'Edit Text', 'ctrl + E', edit, false, true, false),\r
- CHANGE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'change', 'ctrl + U', change, false, false, true),\r
- jqStage,\r
- jqConsoleParent,\r
- jqConsoleWrapper,\r
- jqConsoleTail,\r
- jqImgConsole, jqTextConsole,\r
- currentElement = null,\r
- currentType = -1,\r
- visible = false,\r
- imgConsoleWidth, imgConsoleHeight,\r
- textConsoleWidth, textConsoleHeight,\r
- consoleWidth, consoleHeight,\r
- consoleX, consoleY,\r
- tailSize = 10,\r
- buttonClickable = false;\r
+ currentType = -1,\r
+ visible = false,\r
+ imgConsoleWidth, imgConsoleHeight,\r
+ textConsoleWidth, textConsoleHeight,\r
+ consoleWidth, consoleHeight,\r
+ consoleX, consoleY,\r
+ tailSize = 10,\r
+ buttonClickable = false;\r
+ \r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 66, false, true, layerBack);\r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 70, false, true, layerForward);\r
+ \r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 68, false, true, del);\r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 69, false, true, edit);\r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 85, false, true, change);\r
+ \r
+ function buttonBackOrForward( isBack){\r
+ var offest = jqConsoleWrapper.offset();\r
+ jqConsoleWrapper.css( {\r
+ position: isBack === true ? '' : 'absolute',\r
+ left: isBack === true ? consoleX : offest.left,\r
+ top: isBack === true ? consoleY : offest.top\r
+ });\r
+ buttonClickable === isBack && ( isBack === true ? jqConsoleParent : jqStage).append( jqConsoleWrapper);\r
+ buttonClickable = !isBack;\r
+ }\r
+ function layerBack(){\r
+ if( currentElement === null) return;\r
+ COMIC_ELEMENT_CONTROL.replaceComicElement( currentElement, false);\r
+ updateInfomation();\r
+ SAVE( COMIC_ELEMENT_CONTROL.restoreReplaceObject, [ currentElement, true], [ currentElement, false]);\r
+ var _z = currentElement.z;\r
+ LAYER_BACK_BUTTON.visible( _z > 0);\r
+ LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);\r
+ }\r
+ function layerForward(){\r
+ if( currentElement === null) return;\r
+ COMIC_ELEMENT_CONTROL.replaceComicElement( currentElement, true);\r
+ updateInfomation();\r
+ SAVE( COMIC_ELEMENT_CONTROL.restoreReplaceObject, [ currentElement, false], [ currentElement, true]);\r
+ var _z = currentElement.z;\r
+ LAYER_BACK_BUTTON.visible( _z > 0);\r
+ LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);\r
+ }\r
+ function del(){\r
+ if( currentElement === null) return;\r
+ buttonBackOrForward( true);\r
+ COMIC_ELEMENT_CONTROL.removeComicElement( currentElement);\r
+ SAVE( COMIC_ELEMENT_CONTROL.restoreComicElement, [ true, currentElement], [ false, currentElement], true);\r
+ COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
+ }\r
+ function edit(){\r
+ if( currentElement === null || currentElement.type !== COMIC_ELEMENT_TYPE_TEXT) return;\r
+ TEXT_EDITOR_CONTROL.show( currentElement);\r
+ buttonBackOrForward( true);\r
+ }\r
+ function change(){\r
+ if( currentElement === null) return;\r
+ buttonBackOrForward( true);\r
+ IMAGE_GROUP_EXPROLER.show( currentElement.url);\r
+ }\r
+ return {\r
+ init: function(){\r
+ jqStage = jqEditor;\r
+ jqConsoleTail = $( '#comic-element-consol-tail');\r
+ jqImgConsole = $( '#image-element-consol').hide();\r
+ var imgConsoleSize = pettanr.util.getElementSize( jqImgConsole.get( 0));\r
+ imgConsoleWidth = imgConsoleSize.width;\r
+ imgConsoleHeight = imgConsoleSize.height;\r
\r
- pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 66, false, true, layerBack);\r
- pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 70, false, true, layerForward);\r
+ jqTextConsole = $( '#text-element-consol').hide();\r
+ var textConsoleSize = pettanr.util.getElementSize( jqTextConsole.get( 0));\r
+ textConsoleWidth = textConsoleSize.width;\r
+ textConsoleHeight = textConsoleSize.height;\r
\r
- pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 68, false, true, del);\r
- pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 69, false, true, edit);\r
- pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 85, false, true, change);\r
+ jqConsoleWrapper = $( '#comic-element-consol-wrapper').hide();\r
+ jqConsoleParent = jqConsoleWrapper.parent();\r
\r
- function buttonBackOrForward( isBack){\r
- var offest = jqConsoleWrapper.offset();\r
- jqConsoleWrapper.css( {\r
- position: isBack === true ? '' : 'absolute',\r
- left: isBack === true ? consoleX : offest.left,\r
- top: isBack === true ? consoleY : offest.top\r
- });\r
- buttonClickable === isBack && ( isBack === true ? jqConsoleParent : jqStage).append( jqConsoleWrapper);\r
- buttonClickable = !isBack;\r
- }\r
- function layerBack(){\r
- if( currentElement === null) return;\r
- COMIC_ELEMENT_CONTROL.replaceComicElement( currentElement, false);\r
- updateInfomation();\r
- SAVE( COMIC_ELEMENT_CONTROL.restoreReplaceObject, [ currentElement, true], [ currentElement, false]);\r
- var _z = currentElement.z;\r
- LAYER_BACK_BUTTON.visible( _z > 0);\r
- LAYER_FORWARD_BUTTON.visible( _z < DRAGGABLE_ELEMENT_ARRAY.length -1);\r
- }\r
- function layerForward(){\r
- if( currentElement === null) return;\r
- COMIC_ELEMENT_CONTROL.replaceComicElement( currentElement, true);\r
- updateInfomation();\r
- SAVE( COMIC_ELEMENT_CONTROL.restoreReplaceObject, [ currentElement, false], [ currentElement, true]);\r
- var _z = currentElement.z;\r
- LAYER_BACK_BUTTON.visible( _z > 0);\r
- LAYER_FORWARD_BUTTON.visible( _z < DRAGGABLE_ELEMENT_ARRAY.length -1);\r
- }\r
- function del(){\r
- if( currentElement === null) return;\r
- buttonBackOrForward( true);\r
- COMIC_ELEMENT_CONTROL.removeComicElement( currentElement);\r
- SAVE( COMIC_ELEMENT_CONTROL.restoreComicElement, [ true, currentElement], [ false, currentElement], true);\r
- COMIC_ELEMENT_OPERATOR.hide();\r
+ $( '#edit-text-button').click( edit);\r
+ $( '#delete-image-button, #delete-text-button').click( del);\r
+ $( '#change-image-button').click( change);\r
+ $( '#layer-forward-button, #forward-text-button').click( layerForward);\r
+ $( '#layer-back-button, #back-text-button').click( layerBack);\r
+ \r
+ delete CONSOLE_CONTROLER.init;\r
+ },\r
+ show: function( _currentElement, _w, _h){\r
+ visible === false && jqConsoleWrapper.show();\r
+ visible = true;\r
+ currentElement = _currentElement;\r
+ var _currentType = _currentElement.type,\r
+ _z = _currentElement.z;\r
+ if( currentType !== _currentType){\r
+ currentType = _currentType;\r
+ jqImgConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_IMAGE);\r
+ jqTextConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
+ consoleWidth = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;\r
+ consoleHeight = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;\r
}\r
- function edit(){\r
- if( currentElement === null || currentElement.type !== COMIC_ELEMENT_TYPE_TEXT) return;\r
- TEXT_EDITOR_CONTROL.show( currentElement);\r
- buttonBackOrForward( true);\r
+ consoleX = Math.floor( ( _w -consoleWidth) /2);\r
+ \r
+ LAYER_BACK_BUTTON.visible( _z > 0);\r
+ LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);\r
+ DELETE_BUTTON.visible( true);\r
+ EDIT_BUTTON.visible( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
+ CHANGE_BUTTON.visible( false);\r
+ \r
+ if( _w > consoleWidth * 1.5 && _h > consoleHeight * 1.5){\r
+ consoleY = Math.floor( ( _h -consoleHeight) /2);\r
+ jqConsoleWrapper.css( {\r
+ left: consoleX,\r
+ top: consoleY\r
+ }).removeClass( 'console-out');\r
+ } else {\r
+ consoleY = _h +tailSize;\r
+ jqConsoleWrapper.css( {\r
+ left: consoleX,\r
+ top: consoleY\r
+ }).addClass( 'console-out');\r
}\r
- function change(){\r
- if( currentElement === null) return;\r
- buttonBackOrForward( true);\r
- IMAGE_GROUP_EXPROLER.show( currentElement.url);\r
+ },\r
+ hide: function (){\r
+ visible === true && jqConsoleWrapper.hide();\r
+ visible = false;\r
+ currentElement = null;\r
+ LAYER_BACK_BUTTON.visible( false);\r
+ LAYER_FORWARD_BUTTON.visible( false);\r
+ DELETE_BUTTON.visible( false);\r
+ EDIT_BUTTON.visible( false);\r
+ CHANGE_BUTTON.visible( false);\r
+ },\r
+ x: function(){ return consoleX;},\r
+ y: function(){ return consoleY;},\r
+ w: function(){ return consoleWidth;},\r
+ h: function(){ return consoleHeight;},\r
+ onMouseMove: function( _mouseX, _mouseY){\r
+ if( consoleX > _mouseX || consoleY > _mouseY || consoleX +consoleWidth < _mouseX || consoleY +consoleHeight < _mouseY){\r
+ buttonClickable === true && buttonBackOrForward( true);\r
+ return false;\r
}\r
- return {\r
- init: function(){\r
- jqStage = jqEditor;\r
- jqConsoleTail = $( '#comic-element-consol-tail');\r
- jqImgConsole = $( '#image-element-consol').hide();\r
- var imgConsoleSize = pettanr.util.getElementSize( jqImgConsole.get( 0));\r
- imgConsoleWidth = imgConsoleSize.width;\r
- imgConsoleHeight = imgConsoleSize.height;\r
- \r
- jqTextConsole = $( '#text-element-consol').hide();\r
- var textConsoleSize = pettanr.util.getElementSize( jqTextConsole.get( 0));\r
- textConsoleWidth = textConsoleSize.width;\r
- textConsoleHeight = textConsoleSize.height;\r
- \r
- jqConsoleWrapper = $( '#comic-element-consol-wrapper').hide();\r
- jqConsoleParent = jqConsoleWrapper.parent();\r
- \r
- $( '#edit-text-button').click( edit);\r
- $( '#delete-image-button, #delete-text-button').click( del);\r
- $( '#change-image-button').click( change);\r
- $( '#layer-forward-button, #forward-text-button').click( layerForward);\r
- $( '#layer-back-button, #back-text-button').click( layerBack);\r
- \r
- delete COMIC_ELEMENT_CONSOLE.init;\r
- },\r
- show: function( _currentElement, _w, _h){\r
- visible === false && jqConsoleWrapper.show();\r
- visible = true;\r
- currentElement = _currentElement;\r
- var _currentType = _currentElement.type,\r
- _z = _currentElement.z;\r
- if( currentType !== _currentType){\r
- currentType = _currentType;\r
- jqImgConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_IMAGE);\r
- jqTextConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
- consoleWidth = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;\r
- consoleHeight = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;\r
- }\r
- consoleX = Math.floor( ( _w -consoleWidth) /2);\r
- \r
- LAYER_BACK_BUTTON.visible( _z > 0);\r
- LAYER_FORWARD_BUTTON.visible( _z < DRAGGABLE_ELEMENT_ARRAY.length -1);\r
- DELETE_BUTTON.visible( true);\r
- EDIT_BUTTON.visible( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
- CHANGE_BUTTON.visible( false);\r
- \r
- if( _w > consoleWidth * 1.5 && _h > consoleHeight * 1.5){\r
- consoleY = Math.floor( ( _h -consoleHeight) /2);\r
- jqConsoleWrapper.css( {\r
- left: consoleX,\r
- top: consoleY\r
- }).removeClass( 'console-out');\r
- } else {\r
- consoleY = _h +tailSize;\r
- jqConsoleWrapper.css( {\r
- left: consoleX,\r
- top: consoleY\r
- }).addClass( 'console-out');\r
- }\r
- },\r
- hide: function (){\r
- visible === true && jqConsoleWrapper.hide();\r
- visible = false;\r
- currentElement = null;\r
- LAYER_BACK_BUTTON.visible( false);\r
- LAYER_FORWARD_BUTTON.visible( false);\r
- DELETE_BUTTON.visible( false);\r
- EDIT_BUTTON.visible( false);\r
- CHANGE_BUTTON.visible( false);\r
- },\r
- x: function(){ return consoleX;},\r
- y: function(){ return consoleY;},\r
- w: function(){ return consoleWidth;},\r
- h: function(){ return consoleHeight;},\r
- onMouseMove: function( _mouseX, _mouseY){\r
- if( consoleX > _mouseX || consoleY > _mouseY || consoleX +consoleWidth < _mouseX || consoleY +consoleHeight < _mouseY){\r
- buttonClickable === true && buttonBackOrForward( true);\r
- return false;\r
- }\r
- buttonClickable === false && buttonBackOrForward( false);\r
- return true;\r
- },\r
- onMouseOut: function( _mouseX, _mouseY){\r
- buttonClickable === true && buttonBackOrForward( true);\r
- }\r
+ buttonClickable === false && buttonBackOrForward( false);\r
+ return true;\r
+ },\r
+ onMouseOut: function( _mouseX, _mouseY){\r
+ buttonClickable === true && buttonBackOrForward( true);\r
+ }\r
+ }\r
+ })();\r
+\r
+\r
+ var TAIL_OPERATOR = ( function(){\r
+ var MOUSE_CURSOR = updateMouseCursor,\r
+ ELM_MOVER = document.getElementById( 'balloon-tail-mover'),\r
+ SIZE = pettanr.util.getElementSize( ELM_MOVER).width,\r
+ SIN = Math.sin,\r
+ COS = Math.cos,\r
+ ATAN = Math.atan,\r
+ FLOOR = Math.floor,\r
+ DEG_TO_RAD = Math.PI / 180,\r
+ RAD_TO_DEG = 1 /DEG_TO_RAD,\r
+ currentText = null,\r
+ tailX, tailY,\r
+ x, y, w, h,\r
+ balloonW, balloonH, balloonA, radA,\r
+ visible = false,\r
+ startA;\r
+ \r
+ return {\r
+ update: function ( _w, _h, _a){\r
+ balloonW = _w !== undefined ? _w : balloonW;\r
+ balloonH = _h !== undefined ? _h : balloonH;\r
+ balloonA = _a !== undefined ? _a : balloonA;\r
+ radA = balloonA *DEG_TO_RAD;\r
+ tailX = FLOOR( ( ( COS( radA) /2 +0.5) *( balloonW +SIZE)) -SIZE /2);\r
+ tailY = FLOOR( ( ( SIN( radA) /2 +0.5) *( balloonH +SIZE)) -SIZE /2);\r
+ ELM_MOVER.style.left = tailX +'px';\r
+ ELM_MOVER.style.top = tailY +'px';\r
+ //log.html( [ balloonW, balloonH, balloonA].join());\r
+ },\r
+ show: function( _currentText){\r
+ /*\r
+ * visibilityのほうがいい, display:none だと ie で描画が狂う\r
+ */\r
+ ELM_MOVER.style.visibility = '';\r
+ this.update( _currentText.w, _currentText.h, _currentText.angle());\r
+ currentText = _currentText;\r
+ },\r
+ hitTest: function( _mouseX, _mouseY){\r
+ var _x = tailX -SIZE /2,\r
+ _y = tailY -SIZE /2;\r
+ ret = _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY;\r
+ ret === true && MOUSE_CURSOR( 'move');\r
+ return ret;\r
+ },\r
+ hide: function(){\r
+ ELM_MOVER.style.visibility = 'hidden';\r
+ currentText = null;\r
+ },\r
+ onStart: function( _currentText, _mouseX, _mouseY){\r
+ if( _currentText.type !== COMIC_ELEMENT_TYPE_TEXT) return false;\r
+ x = _currentText.x;\r
+ y = _currentText.y;\r
+ if( this.hitTest( _mouseX -x, _mouseY -y) === true){\r
+ w = _currentText.w;\r
+ h = _currentText.h;\r
+ currentText = _currentText;\r
+ startA = _currentText.angle();\r
+ return true;\r
}\r
- })(),\r
- TAIL_CONTROLER = ( function(){\r
- var ELM_MOVER = document.getElementById( 'balloon-tail-mover'),\r
- SIZE = pettanr.util.getElementSize( ELM_MOVER).width,\r
- SIN = Math.sin,\r
- COS = Math.cos,\r
- ATAN = Math.atan,\r
- FLOOR = Math.floor,\r
- DEG_TO_RAD = Math.PI / 180,\r
- RAD_TO_DEG = 1 /DEG_TO_RAD,\r
- currentText = null,\r
- tailX, tailY,\r
- balloonW, balloonH, balloonA, radA,\r
- visible = false,\r
- startA;\r
+ return false;\r
+ },\r
+ onDrag: function( _mouseX, _mouseY){\r
+ _mouseX = _mouseX -x -w /2;\r
+ _mouseY = _mouseY -y -h /2; //Balloonの中心を0,0とする座標系に変換\r
\r
- function draw( _w, _h, _a){\r
- balloonW = _w !== undefined ? _w : balloonW;\r
- balloonH = _h !== undefined ? _h : balloonH;\r
- balloonA = _a !== undefined ? _a : balloonA;\r
- radA = balloonA *DEG_TO_RAD;\r
- tailX = FLOOR( ( ( COS( radA) /2 +0.5) *( balloonW +SIZE)) -SIZE /2);\r
- tailY = FLOOR( ( ( SIN( radA) /2 +0.5) *( balloonH +SIZE)) -SIZE /2);\r
- ELM_MOVER.style.left = tailX +'px';\r
- ELM_MOVER.style.top = tailY +'px';\r
- log.html( [ balloonW, balloonH, balloonA].join());\r
+ this.update( w, h,\r
+ _mouseX !== 0 ?\r
+ ATAN( _mouseY /_mouseX) *RAD_TO_DEG +( _mouseX < 0 ? 180 : 0) :\r
+ _mouseY > 0 ? 90 : -90\r
+ );\r
+ currentText && currentText.angle( balloonA);\r
+ COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( undefined, undefined, undefined, balloonA);\r
+ },\r
+ onFinish: function(){\r
+ startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA);\r
+ startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, currentText.angle());\r
+ currentText = null;\r
+ },\r
+ onCancel: function(){\r
+ currentText.angle( startA);\r
+ COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, startA);\r
+ currentText = null;\r
+ }\r
+ }\r
+ })(),\r
+ RESIZE_OPERATOR = ( function(){\r
+ var MOUSE_CURSOR = updateMouseCursor,\r
+ GRID_ENABLED = GRID_CONTROL.enabled;\r
+ \r
+ var HIT_AREA = MOUSE_HIT_AREA,\r
+ POSITION_ARRAY = [],\r
+ FLOOR = Math.floor,\r
+ CURSOR_AND_FLIP = [\r
+ { cursor: 'n-resize', v: 3},\r
+ { cursor: 'e-resize', h: 2},\r
+ { cursor: 'e-resize', h: 1},\r
+ { cursor: 'n-resize', v: 0},\r
+ { cursor: 'nw-resize', h: 5, v: 6, vh: 7},\r
+ { cursor: 'ne-resize', h: 4, v: 7, vh: 6},\r
+ { cursor: 'ne-resize', h: 7, v: 4, vh: 5},\r
+ { cursor: 'nw-resize', h: 6, v: 5, vh: 4}\r
+ ],\r
+ elmResizerContainer = document.getElementById( 'comic-element-resizer-container'),\r
+ elmResizerContainerStyle = elmResizerContainer.style,\r
+ elmResizerTopStyle = document.getElementById( 'comic-element-resizer-top').style,\r
+ elmResizerLeftStyle = document.getElementById( 'comic-element-resizer-left').style,\r
+ elmResizerRightStyle = document.getElementById( 'comic-element-resizer-right').style,\r
+ elmResizerBottomStyle = document.getElementById( 'comic-element-resizer-bottom').style,\r
+ x, y, w, h,\r
+ currentIndex = -1,\r
+ currentElement,\r
+ currentIsTextElement = false;\r
+ \r
+ elmResizerContainerStyle.display = 'none';\r
+ \r
+ var RESIZE_WORK_ARRAY = [\r
+ { x: 0, w: 0, y: 1, h: -1}, //top\r
+ { x: 1, w: -1, y: 0, h: 0}, //left\r
+ { x: 0, w: 1, y: 0, h: 0}, //right\r
+ { x: 0, w: 0, y: 0, h: 1}, //bottom\r
+ { x: 1, w: -1, y: 1, h: -1}, //top-left\r
+ { x: 0, w: 1, y: 1, h: -1}, //top-right\r
+ { x: 1, w: -1, y: 0, h: 1}, //bottom-left\r
+ { x: 0, w: 1, y: 0, h: 1} //bottom-right\r
+ ],\r
+ startX, startY, startW, startH, startFilpV, startFilpH, startAspect,\r
+ baseX, baseY, baseW, baseH,\r
+ currentX, currentY, currentW, currentH,\r
+ offsetX, offsetY,\r
+ error = 0;\r
+ \r
+ function draw( _x, _y, _w, _h){\r
+ x = _x !== undefined ? _x : x;\r
+ y = _y !== undefined ? _y : y;\r
+ w = _w !== undefined ? _w : w;\r
+ h = _h !== undefined ? _h : h;\r
+ elmResizerContainerStyle.left = x +'px';\r
+ elmResizerContainerStyle.top = y +'px';\r
+ elmResizerContainerStyle.width = w +'px';\r
+ elmResizerContainerStyle.height = h +'px';\r
+ elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px';\r
+ elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px';\r
+ elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px';\r
+ elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px';\r
+ \r
+ POSITION_ARRAY.splice( 0, POSITION_ARRAY.length);\r
+ POSITION_ARRAY.push(\r
+ {x: x +5, y: y -HIT_AREA, w: w -5 *2, h: HIT_AREA +5},\r
+ {x: x -HIT_AREA, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2},\r
+ {x: x +w -5, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2},\r
+ {x: x +5, y: y +h -5, w: w -5 *2, h: HIT_AREA +5},\r
+ {x: x -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},\r
+ {x: x +w -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},\r
+ {x: x -HIT_AREA, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5},\r
+ {x: x +w -5, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5}\r
+ );\r
+ }\r
+ \r
+ function update( _x, _y, _w, _h){\r
+ x = _x !== undefined ? _x : currentX;\r
+ y = _y !== undefined ? _y : currentY;\r
+ w = _w !== undefined ? _w : currentW;\r
+ h = _h !== undefined ? _h : currentH;\r
+ \r
+ if( currentIsTextElement === false && currentIndex > 3 && pettanr.key.shiftEnabled() === true){\r
+ if( startAspect >= 1){\r
+ _w = w;\r
+ w = Math.floor( startAspect * h);\r
+ x = x +( currentIndex % 2 === 0 ? _w -w : 0);\r
+ } else {\r
+ _h = h;\r
+ h = Math.floor( w / startAspect);\r
+ y = y + ( currentIndex <= 5 ? _h -h : 0);\r
}\r
- function hitTest( _mouseX, _mouseY){\r
- var _x = tailX -SIZE /2,\r
- _y = tailY -SIZE /2;\r
- ret = currentIsTextElement === true && _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY;\r
- ret === true && MOUSE_CURSOR( 'move');\r
- return ret;\r
+ }\r
+ draw( x, y, w, h);\r
+ currentElement.resize( x, y, w, h);\r
+ currentIsTextElement === true && TAIL_OPERATOR.update( w, h);\r
+ CONSOLE_CONTROLER.show( currentElement, w, h);\r
+ COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( x, y, undefined, undefined, w, h);\r
+ }\r
+ \r
+ function flip( _flipV, _flipH){\r
+ var p = CURSOR_AND_FLIP[ currentIndex];\r
+ currentIndex = _flipH === true || _flipV === true ? p[\r
+ _flipH === true && _flipV === true ? 'vh' : ( _flipH === true ? 'h' : 'v')\r
+ ] : currentIndex;\r
+ MOUSE_CURSOR( CURSOR_AND_FLIP[ currentIndex].cursor);\r
+ elmResizerContainer.className = 'current-resizer-is-' +currentIndex;\r
+ currentElement.flip( _flipV, _flipH);\r
+ }\r
+ return {\r
+ update: draw,\r
+ index: function( _mouseX, _mouseY){\r
+ var p;\r
+ for( var i=4; i<8; i++){\r
+ p = POSITION_ARRAY[ i];\r
+ if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){\r
+ MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);\r
+ elmResizerContainer.className = 'current-resizer-is-' +i;\r
+ return currentIndex = i;\r
+ }\r
}\r
- return {\r
- update: draw,\r
- show: function( _currentText){\r
- /*\r
- * visibilityのほうがいい, display:none だと ie で描画が狂う\r
- */\r
- ELM_MOVER.style.visibility = '';\r
- draw( _currentText.w, _currentText.h, _currentText.angle());\r
- currentText = _currentText;\r
- },\r
- hitTest: hitTest,\r
- hide: function(){\r
- ELM_MOVER.style.visibility = 'hidden';\r
- currentText = null;\r
- },\r
- onStart: function( _currentText, _mouseX, _mouseY){\r
- if( hitTest( _mouseX -currentx, _mouseY -currenty) === true){\r
- currentText = _currentText;\r
- startA = _currentText.angle();\r
- return true;\r
- }\r
- currentText = null;\r
- return false;\r
- },\r
- onDrag: function( _mouseX, _mouseY){\r
- _mouseX = _mouseX -currentText.x -currentw /2;\r
- _mouseY = _mouseY -currentText.y -currenth /2; //Balloonの中心を0,0とする座標系に変換\r
- \r
- draw( currentw, currenth,\r
- _mouseX !== 0 ?\r
- ATAN( _mouseY /_mouseX) *RAD_TO_DEG +( _mouseX < 0 ? 180 : 0) :\r
- _mouseY > 0 ? 90 : -90\r
- );\r
- currentText && currentText.angle( balloonA);\r
- updateInfomation( undefined, undefined, undefined, balloonA);\r
- },\r
- onFinish: function(){\r
- startA !== currentText.angle() && saveComicElementStatus( currentx, currenty, currentw, currenth, startA);\r
- startA !== currentText.angle() && resize( undefined, undefined, undefined, undefined, currentText.angle());\r
- currentText = null;\r
- },\r
- onCancel: function(){\r
- resize( undefined, undefined, undefined, undefined, startA);\r
+ for( var i=0; i<4; i++){\r
+ p = POSITION_ARRAY[ i];\r
+ if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){\r
+ MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);\r
+ elmResizerContainer.className = 'current-resizer-is-' +i;\r
+ return currentIndex = i;\r
}\r
}\r
- })(),\r
- RESIZE_CONTROLER = ( function(){\r
- var POSITION_ARRAY = [],\r
- FLOOR = Math.floor,\r
- CURSOR_AND_FLIP = [\r
- { cursor: 'n-resize', v: 3},\r
- { cursor: 'e-resize', h: 2},\r
- { cursor: 'e-resize', h: 1},\r
- { cursor: 'n-resize', v: 0},\r
- { cursor: 'nw-resize', h: 5, v: 6, vh: 7},\r
- { cursor: 'ne-resize', h: 4, v: 7, vh: 6},\r
- { cursor: 'ne-resize', h: 7, v: 4, vh: 5},\r
- { cursor: 'nw-resize', h: 6, v: 5, vh: 4}\r
- ], \r
- elmResizerContainerStyle = document.getElementById( 'comic-element-resizer-container').style,\r
- elmResizerTopStyle = document.getElementById( 'comic-element-resizer-top').style,\r
- elmResizerLeftStyle = document.getElementById( 'comic-element-resizer-left').style,\r
- elmResizerRightStyle = document.getElementById( 'comic-element-resizer-right').style,\r
- elmResizerBottomStyle = document.getElementById( 'comic-element-resizer-bottom').style,\r
- x, y, w, h,\r
- currentIndex = -1,\r
- currentElement,\r
- currentIsTextElement = false;\r
- \r
+ MOUSE_CURSOR( '');\r
+ elmResizerContainer.className = '';\r
+ return -1;\r
+ },\r
+ show: function( _currentElement){\r
+ currentElement = _currentElement;\r
+ currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;\r
+ elmResizerContainerStyle.display = '';\r
+ },\r
+ hide: function(){\r
+ currentElement = null;\r
elmResizerContainerStyle.display = 'none';\r
- \r
- var RESIZE_WORK_ARRAY = [\r
- { x: 0, w: 0, y: 1, h: -1}, //top\r
- { x: 1, w: -1, y: 0, h: 0}, //left\r
- { x: 0, w: 1, y: 0, h: 0}, //right\r
- { x: 0, w: 0, y: 0, h: 1}, //bottom\r
- { x: 1, w: -1, y: 1, h: -1}, //top-left\r
- { x: 0, w: 1, y: 1, h: -1}, //top-right\r
- { x: 1, w: -1, y: 0, h: 1}, //bottom-left\r
- { x: 0, w: 1, y: 0, h: 1} //bottom-right\r
- ],\r
- startX, startY, startW, startH, startFilpV, startFilpH, startAspect,\r
- baseX, baseY, baseW, baseH,\r
- currentX, currentY, currentW, currentH,\r
- resultX, resultY, resultW, resultH,\r
- xOffset, yOffset,\r
- error = 0;\r
- \r
- function draw( _x, _y, _w, _h){\r
- x = _x !== undefined ? _x : x;\r
- y = _y !== undefined ? _y : y;\r
- w = _w !== undefined ? _w : w;\r
- h = _h !== undefined ? _h : h;\r
- elmResizerContainerStyle.left = x +'px';\r
- elmResizerContainerStyle.top = y +'px';\r
- elmResizerContainerStyle.width = w +'px';\r
- elmResizerContainerStyle.height = h +'px';\r
- elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px';\r
- elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px';\r
- elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px';\r
- elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px';\r
- \r
- POSITION_ARRAY.splice( 0, POSITION_ARRAY.length);\r
- POSITION_ARRAY.push(\r
- {x: x +5, y: y -HIT_AREA, w: w -5 *2, h: HIT_AREA +5},\r
- {x: x -HIT_AREA, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2},\r
- {x: x +w -5, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2},\r
- {x: x +5, y: y +h -5, w: w -5 *2, h: HIT_AREA +5},\r
- {x: x -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},\r
- {x: x +w -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},\r
- {x: x -HIT_AREA, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5},\r
- {x: x +w -5, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5}\r
- );\r
+ },\r
+ onStart: function( _currentElement, _mouseX, _mouseY){\r
+ currentElement = _currentElement;\r
+ currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;\r
+ if( _currentElement.keepSize === true) return false;\r
+ currentIndex = this.index( _mouseX, _mouseY);\r
+ if( currentIndex === -1) return false;\r
+ offsetX = _mouseX;\r
+ offsetY = _mouseY;\r
+ startX = baseX = _currentElement.x;\r
+ startY = baseY = _currentElement.y;\r
+ startW = baseW = _currentElement.w;\r
+ startH = baseH = _currentElement.h;\r
+ if( _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE){\r
+ startFilpV = _currentElement.flipV();\r
+ startFilpH = _currentElement.flipH(); \r
}\r
- \r
- function update( _x, _y, _w, _h){\r
- resultX = _x !== undefined ? _x : currentX;\r
- resultY = _y !== undefined ? _y : currentY;\r
- resultW = _w !== undefined ? _w : currentW;\r
- resultH = _h !== undefined ? _h : currentH;\r
+ startAspect = startW /startH;\r
+ return true;\r
+ },\r
+ onDrag: function( _mouseX, _mouseY){\r
+ var com = RESIZE_WORK_ARRAY[ currentIndex],\r
+ moveX = _mouseX -offsetX,\r
+ moveY = _mouseY -offsetY,\r
+ _x, _y, _w, _h,\r
+ _updated,\r
+ _thisError = 0;\r
\r
- if( currentIsTextElement === false && currentIndex > 3 && pettanr.key.shiftEnabled() === true){\r
- if( startAspect >= 1){\r
- _w = resultW;\r
- resultW = Math.floor( startAspect * resultH);\r
- resultX = resultX +( currentIndex % 2 === 0 ? _w -resultW : 0);\r
- } else {\r
- _h = resultH;\r
- resultH = Math.floor( resultW / startAspect);\r
- resultY = resultY + ( currentIndex <= 5 ? _h -resultH : 0);\r
- }\r
- }\r
- draw( resultX, resultY, resultW, resultH);\r
- currentElement.resize( resultX, resultY, resultW, resultH);\r
- currentIsTextElement === true && TAIL_CONTROLER.update( resultW, resultH);\r
- COMIC_ELEMENT_CONSOLE.show( currentElement, resultW, resultH);\r
- updateInfomation( resultX, resultY, undefined, undefined, resultW, resultH);\r
- }\r
- function getIndex( _mouseX, _mouseY){\r
- var p,\r
- l = POSITION_ARRAY.length;\r
- for( var i=0; i<l; i++){\r
- p = POSITION_ARRAY[ i];\r
- if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){\r
- MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);\r
- return currentIndex = i;\r
- }\r
+ var _memoryX = 0,\r
+ _memoryY = 0;\r
+ /*\r
+ * Opera 11+ often forget values, why ??
+ */\r
+ while( _x === undefined || _y === undefined || _w === undefined || _h === undefined){\r
+ com = RESIZE_WORK_ARRAY[ currentIndex];\r
+ moveX = _mouseX -offsetX;\r
+ moveY = _mouseY -offsetY;\r
+ _x = baseX +moveX *com.x;\r
+ _y = baseY +moveY *com.y;\r
+ _w = baseW +moveX *com.w;\r
+ _h = baseH +moveY *com.h;\r
+ _updated = moveX !== 0 || moveY !== 0;\r
+ ++_thisError;\r
+ if( _thisError > 9999){\r
+ ++error\r
+ //alert( 'opera error' +error);\r
+ this.onCancel;\r
+ return;\r
}\r
- return -1;\r
}\r
- function flip( _flipV, _flipH){\r
- var p = CURSOR_AND_FLIP[ currentIndex];\r
- currentIndex = _flipH === true || _flipV === true ? p[\r
- _flipH === true && _flipV === true ? 'vh' : ( _flipH === true ? 'h' : 'v')\r
- ] : currentIndex;\r
- MOUSE_CURSOR( CURSOR_AND_FLIP[ currentIndex].cursor);\r
- currentElement.flip( _flipV, _flipH);\r
- }\r
- return {\r
- x: function(){ return x;},\r
- y: function(){ return y;},\r
- w: function(){ return w;},\r
- h: function(){ return h;},\r
- update: draw,\r
- index: getIndex,\r
- show: function( _currentElement){\r
- currentElement = _currentElement;\r
- currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;\r
- elmResizerContainerStyle.display = '';\r
- },\r
- hide: function(){\r
- currentElement = null;\r
- elmResizerContainerStyle.display = 'none';\r
- },\r
- onStart: function( _currentElement, _mouseX, _mouseY){\r
- currentElement = _currentElement;\r
- currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;\r
- if( _currentElement.keepSize === true) return false;\r
- currentIndex = getIndex( _mouseX, _mouseY);\r
- if( currentIndex === -1) return false;\r
- xOffset = _mouseX;\r
- yOffset = _mouseY;\r
- startX = baseX = x = _currentElement.x;\r
- startY = baseY = y = _currentElement.y;\r
- startW = baseW = w = _currentElement.w;\r
- startH = baseH = h = _currentElement.h;\r
- startFilpV = flipV;\r
- startFilpH = flipH;\r
- startAspect = startW /startH;\r
- return true;\r
- },\r
- onDrag: function( _mouseX, _mouseY){\r
- var com = RESIZE_WORK_ARRAY[ currentIndex],\r
- moveX = _mouseX -xOffset,\r
- moveY = _mouseY -yOffset,\r
- _x = baseX +moveX *com.x,\r
- _y = baseY +moveY *com.y,\r
- _w = baseW +moveX *com.w,\r
- _h = baseH +moveY *com.h,\r
- _updated = moveX !== 0 || moveY !== 0;\r
- \r
- // opera がときどき baseH の値を忘れる ？？\r
- if( _x === undefined || _y === undefined || _w === undefined || _h === undefined){\r
- ++error;\r
- return;\r
- }\r
- \r
- if( _w >= MIN_OBJECT_SIZE && _h >= MIN_OBJECT_SIZE){\r
- \r
- } else \r
- if( _w >= -MIN_OBJECT_SIZE && _h >= -MIN_OBJECT_SIZE){\r
- return;\r
- } else \r
- if( currentElement.type === COMIC_ELEMENT_TYPE_TEXT){\r
- return;\r
- } else \r
- if( _w < -MIN_OBJECT_SIZE || _h < -MIN_OBJECT_SIZE){\r
- var __x = 0,\r
- __y = 0;\r
- if( _w < -MIN_OBJECT_SIZE && _h > MIN_OBJECT_SIZE){\r
- // flipH\r
- __x = _x;\r
- baseX = _x = _x +_w;\r
- baseY = _y;\r
- baseW = _w = __x -_x;\r
- baseH = _h;\r
- flip( false, true);\r
- flipV = currentElement.flipV();\r
- } else \r
- if( _w > MIN_OBJECT_SIZE && _h < -MIN_OBJECT_SIZE){\r
- // flipV\r
- __y = _y;\r
- baseX = _x;\r
- baseY = _y = _y +_h;\r
- baseW = _w;\r
- baseH = _h = __y -_y;\r
- flip( true, false);\r
- flipH = currentElement.flipH();\r
- } else {\r
- // flipVH\r
- __x = _x;\r
- __y = _y;\r
- baseX = _x = _x +_w;\r
- baseY = _y = _y +_h;\r
- baseW = _w = __x -_x;\r
- baseH = _h = __y -_y;\r
- flip( true, true);\r
- flipV = currentElement.flipV();\r
- flipH = currentElement.flipH();\r
- }\r
- _updated = true;\r
- xOffset = _mouseX;\r
- yOffset = _mouseY; \r
- }\r
- currentX = _x;\r
- currentY = _y;\r
- currentW = _w;\r
- currentH = _h;\r
- _updated === true && update( _x, _y, _w, _h);\r
- \r
- log.html( [\r
- 'currentIndex:', currentIndex, \r
- 'baseW', baseW, 'baseH', baseH,'<br>',\r
- 'mouse', _mouseX, _mouseY,'<br>',\r
- 'move', moveX, moveY,'<br>',\r
- 'xy', _x, _y, 'wh',_w, _h,'<br>',\r
- 'com.w', com.w, 'com.h', com.h,'<br>',\r
- 'current',currentW, currentH,'<br>',\r
- 'result', resultY, resultH,\r
- 'err', error\r
- ].join( ' , '));\r
- },\r
- onFinish: function(){\r
- MOUSE_CURSOR( '');\r
- if( resultW === startW && resultH === startH && resultX === startX && resultY === startY) return;\r
- resize( resultX, resultY, resultW, resultH);\r
- currentElement.resize( resultX, resultY, resultW, resultH);\r
- saveComicElementStatus( startX, startY, startW, startH, angle, startFilpV, startFilpH);\r
- },\r
- onCancel: function(){\r
- MOUSE_CURSOR( '');\r
- resize( startX, startY, startW, startH);\r
- currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
- currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :\r
- currentElement.animate( startX, startY, startW, startH, angle);\r
- },\r
- onShiftUpdate: update,\r
- onCtrlUpdate: update\r
- }\r
- })(),\r
- POSITION_CONTROLER = ( function(){\r
- var currentElement,\r
- startX, startY,\r
- x, currentY,\r
- xOffset, yOffset,\r
- isCopy = false;\r
\r
- function update( _x, _y){\r
- x = _x !== undefined ? _x : x;\r
- y = _y !== undefined ? _y : y;\r
- RESIZE_CONTROLER.update( x, y);\r
- currentElement.resize( x, y);\r
- updateInfomation( x, y); \r
+ if( _w >= MIN_OBJECT_SIZE && _h >= MIN_OBJECT_SIZE){\r
+ \r
+ } else \r
+ if( _w >= -MIN_OBJECT_SIZE && _h >= -MIN_OBJECT_SIZE){\r
+ //return;\r
+ _w = _w < MIN_OBJECT_SIZE ? MIN_OBJECT_SIZE : _w;\r
+ _h = _h < MIN_OBJECT_SIZE ? MIN_OBJECT_SIZE : _h;\r
+ _x = currentX;\r
+ _y = currentY;\r
+ } else \r
+ if( currentElement.type === COMIC_ELEMENT_TYPE_TEXT){\r
+ return;\r
+ } else \r
+ if( _w < -MIN_OBJECT_SIZE || _h < -MIN_OBJECT_SIZE){\r
+\r
+ if( _w < -MIN_OBJECT_SIZE && _h > MIN_OBJECT_SIZE){\r
+ // flipH\r
+ _memoryX = _x;\r
+ baseX = _x = _x +_w;\r
+ baseY = _y;\r
+ baseW = _w = _memoryX -_x;\r
+ baseH = _h;\r
+ flip( false, true);\r
+ flipV = currentElement.flipV();\r
+ } else \r
+ if( _w > MIN_OBJECT_SIZE && _h < -MIN_OBJECT_SIZE){\r
+ // flipV\r
+ _memoryY = _y;\r
+ baseX = _x;\r
+ baseY = _y = _y +_h;\r
+ baseW = _w;\r
+ baseH = _h = _memoryY -_y;\r
+ flip( true, false);\r
+ flipH = currentElement.flipH();\r
+ } else {\r
+ // flipVH\r
+ _memoryX = _x;\r
+ _memoryY = _y;\r
+ baseX = _x = _x +_w;\r
+ baseY = _y = _y +_h;\r
+ baseW = _w = _memoryX -_x;\r
+ baseH = _h = _memoryY -_y;\r
+ flip( true, true);\r
+ flipV = currentElement.flipV();\r
+ flipH = currentElement.flipH();\r
+ }\r
+ _updated = true;\r
+ offsetX = _mouseX;\r
+ offsetY = _mouseY; \r
}\r
+ currentX = _x;\r
+ currentY = _y;\r
+ currentW = _w;\r
+ currentH = _h;\r
+ _updated === true && update( _x, _y, _w, _h);\r
\r
- return {\r
- onStart: function( _currentElement, _mouseX, _mouseY){\r
- currentElement = _currentElement;\r
- xOffset = _mouseX;\r
- yOffset = _mouseY;\r
- startX = x = currentx;\r
- startY = y = currenty;\r
- MOUSE_CURSOR( 'move');\r
- },\r
- onDrag: function( _mouseX, _mouseY){\r
- var moveX = _mouseX -xOffset,\r
- moveY = _mouseY -yOffset,\r
- _x = currentx +moveX,\r
- _y = currenty +moveY;\r
- if( GRID_ENABLED() === true){\r
- _x = Math.floor( _x / 10) * 10;\r
- _y = Math.floor( _y / 10) * 10;\r
- }\r
- update( _x, _y);\r
- },\r
- onFinish: function(){\r
- MOUSE_CURSOR( '');\r
- if( x === startX && y === startY) return;\r
- resize( x, y);\r
- currentElement.resize( x, y);\r
- saveComicElementStatus( startX, startY);\r
- },\r
- onCancel: function(){\r
- MOUSE_CURSOR( '');\r
- resize( startX, startY);\r
- currentElement.animate( startX, startY);\r
- },\r
- onShiftUpdate: update,\r
- onCtrlUpdate: update\r
+ log.html( [\r
+ 'currentIndex:', currentIndex, \r
+ 'baseW', baseW, 'baseH', baseH,'<br>',\r
+ 'mouse', _mouseX, _mouseY,'<br>',\r
+ 'move', moveX, moveY,'<br>',\r
+ 'xy', _x, _y, 'wh',_w, _h,'<br>',\r
+ 'com.w', com.w, 'com.h', com.h,'<br>',\r
+ 'current',currentW, currentH,'<br>',\r
+ 'result', y, h,\r
+ 'err', error\r
+ ].join( ' , '));\r
+ },\r
+ onFinish: function(){\r
+ MOUSE_CURSOR( '');\r
+ if( w === startW && h === startH && x === startX && y === startY) return;\r
+ COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h);\r
+ currentElement.resize( x, y, w, h);\r
+ COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY, startW, startH, undefined, startFilpV, startFilpH);\r
+ },\r
+ onCancel: function(){\r
+ MOUSE_CURSOR( '');\r
+ COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH);\r
+ currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
+ currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :\r
+ currentElement.animate( startX, startY, startW, startH, angle);\r
+ },\r
+ onShiftUpdate: update,\r
+ onCtrlUpdate: update\r
+ }\r
+ })(),\r
+ POSITION_OPERATOR = ( function(){\r
+ var MOUSE_CURSOR = updateMouseCursor,\r
+ GRID_ENABLED = GRID_CONTROL.enabled;\r
+ \r
+ var currentElement,\r
+ startX, startY,\r
+ x, y,\r
+ offsetX, offsetY,\r
+ isCopy = false;\r
+ \r
+ function update( _x, _y){\r
+ x = _x !== undefined ? _x : x;\r
+ y = _y !== undefined ? _y : y;\r
+ RESIZE_OPERATOR.update( x, y);\r
+ currentElement.resize( x, y);\r
+ COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( x, y);\r
+ }\r
+ \r
+ return {\r
+ onStart: function( _currentElement, _mouseX, _mouseY){\r
+ currentElement = _currentElement;\r
+ offsetX = _mouseX;\r
+ offsetY = _mouseY;\r
+ startX = x = _currentElement.x;\r
+ startY = y = _currentElement.y;\r
+ MOUSE_CURSOR( 'move');\r
+ },\r
+ onDrag: function( _mouseX, _mouseY){\r
+ var moveX = _mouseX -offsetX,\r
+ moveY = _mouseY -offsetY,\r
+ _x = startX +moveX,\r
+ _y = startY +moveY;\r
+ if( GRID_ENABLED() === true){\r
+ _x = Math.floor( _x / 10) * 10;\r
+ _y = Math.floor( _y / 10) * 10;\r
}\r
- })();\r
+ update( _x, _y);\r
+ },\r
+ onFinish: function(){\r
+ MOUSE_CURSOR( '');\r
+ if( x === startX && y === startY) return;\r
+ COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y);\r
+ currentElement.resize( x, y);\r
+ COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY);\r
+ },\r
+ onCancel: function(){\r
+ MOUSE_CURSOR( '');\r
+ COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY);\r
+ currentElement.animate( startX, startY);\r
+ },\r
+ onShiftUpdate: update,\r
+ onCtrlUpdate: update\r
+ }\r
+ })();\r
+\r
+\r
+/*\r
+ * --------------------------------------------------------------------------------------------\r
+ * COMIC_ELEMENT_OPERATION_MANAGER\r
+ */\r
+ var COMIC_ELEMENT_OPERATION_MANAGER = ( function(){\r
+ var MOUSE_CURSOR = updateMouseCursor,\r
+ SAVE = HISTORY.saveState,\r
+ GRID_ENABLED = GRID_CONTROL.enabled,\r
+ HIT_AREA = MOUSE_HIT_AREA,\r
+ currentIsTextElement = false,\r
+ currentOperator = null,\r
+ currentElement = null,\r
+ currentx, currenty, currentw, currenth, angle, flipV, flipH;\r
\r
function resize( _x, _y, _w, _h, _angle){\r
currentx = _x !== undefined ? _x : currentx;\r
currenth = _h !== undefined ? _h : currenth;\r
angle = _angle !== undefined ? _angle : angle;\r
\r
- RESIZE_CONTROLER.update( currentx, currenty, currentw, currenth);\r
- currentIsTextElement === true && TAIL_CONTROLER.update( currentw, currenth, angle);\r
- COMIC_ELEMENT_CONSOLE.show( currentElement, currentw, currenth);\r
+ RESIZE_OPERATOR.update( currentx, currenty, currentw, currenth);\r
+ currentIsTextElement === true && TAIL_OPERATOR.update( currentw, currenth, angle);\r
+ CONSOLE_CONTROLER.show( currentElement, currentw, currenth);\r
updateInfomation( currentx, currenty, currentElement.z, angle, currentw, currenth);\r
}\r
function updateInfomation( _x, _y, _z, _a, _w, _h, keepAspect){\r
_w = _w !== undefined ? _w : currentw;\r
_h = _h !== undefined ? _h : currenth;\r
- INFOMATION(\r
+ INFOMATION_WINDOW.update(\r
currentElement === null ? -1 : currentElement.type,\r
_x !== undefined ? _x : currentx,\r
_y !== undefined ? _y : currenty,\r
);\r
}\r
function show( _currentElement){\r
- currentElement === null && RESIZE_CONTROLER.show( _currentElement);\r
+ currentElement === null && RESIZE_OPERATOR.show( _currentElement);\r
if( currentElement !== _currentElement){\r
currentElement = _currentElement;\r
\r
currentIsTextElement = ( _currentElement.type === COMIC_ELEMENT_TYPE_TEXT);\r
- currentIsTextElement === true ? TAIL_CONTROLER.show( _currentElement) : TAIL_CONTROLER.hide();\r
+ currentIsTextElement === true ? TAIL_OPERATOR.show( _currentElement) : TAIL_OPERATOR.hide();\r
\r
flipV = currentIsTextElement === false ? _currentElement.flipV() : 0;\r
flipH = currentIsTextElement === false ? _currentElement.flipH() : 0;\r
}\r
}\r
function hide(){\r
- currentElement !== null && RESIZE_CONTROLER.hide();\r
+ currentElement !== null && RESIZE_OPERATOR.hide();\r
currentElement = null;\r
MOUSE_CURSOR( '');\r
- TAIL_CONTROLER.hide();\r
- COMIC_ELEMENT_CONSOLE.hide();\r
+ TAIL_OPERATOR.hide();\r
+ CONSOLE_CONTROLER.hide();\r
updateInfomation();\r
}\r
function restoreState( arg){\r
_x = arg[ 1], _y = arg[ 2], _w = arg[ 3], _h = arg[ 4],\r
_a = arg[ 5],\r
_flipV = arg[ 6], _flipH = arg[ 7];\r
- if( !_currentElement && !currentControler) return;\r
+ if( !_currentElement && !currentOperator) return;\r
_currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
_currentElement.animate( _x, _y, _w, _h, _flipV, _flipH) :\r
_currentElement.animate( _x, _y, _w, _h, _a);\r
- currentControler !== null && currentControler.onCancel && currentControler.onCancel();\r
- currentControler = null;\r
+ currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();\r
+ currentOperator = null;\r
currentElement === _currentElement ? resize( _x, _y, _w, _h, _a) : show( _currentElement);\r
}\r
function saveComicElementStatus( startX, startY, startW, startH, startA, startFilpV, startFilpH){\r
);\r
}\r
pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 16, undefined, undefined, function( e){\r
- currentControler !== null && currentControler.onShiftUpdate && currentControler.onShiftUpdate();\r
+ currentOperator !== null && currentOperator.onShiftUpdate && currentOperator.onShiftUpdate();\r
});\r
pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 17, undefined, undefined, function(){\r
- currentControler !== null && currentControler.onCtrlUpdate && currentControler.onCtrlUpdate();\r
+ currentOperator !== null && currentOperator.onCtrlUpdate && currentOperator.onCtrlUpdate();\r
});\r
pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 27, false, false, function(){\r
- currentControler !== null && currentControler.onCancel && currentControler.onCancel();\r
- currentControler = null;\r
+ currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();\r
+ currentOperator = null;\r
});\r
return {\r
init: function(){\r
- COMIC_ELEMENT_CONSOLE.init();\r
hide();\r
- delete COMIC_ELEMENT_OPERATOR.init;\r
+ delete COMIC_ELEMENT_OPERATION_MANAGER.init;\r
},\r
hide: hide,\r
+ resize: resize,\r
+ restoreState: restoreState,\r
+ updateInfomation: updateInfomation,\r
+ saveStatus: saveComicElementStatus,\r
busy: function(){\r
- return currentControler !== null;\r
+ return currentOperator !== null;\r
},\r
hitareaX: function( _comicElement, _x){\r
if( _comicElement === currentElement){\r
- var _consoleX = COMIC_ELEMENT_CONSOLE.x();\r
+ var _consoleX = CONSOLE_CONTROLER.x();\r
return currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA;\r
}\r
return _x -HIT_AREA;\r
},\r
hitareaW: function( _comicElement, _w){\r
if( _comicElement === currentElement){\r
- var _consoleW = COMIC_ELEMENT_CONSOLE.w();\r
+ var _consoleW = CONSOLE_CONTROLER.w();\r
return ( _consoleW < currentw ? currentw : _consoleW) +HIT_AREA *2;\r
}\r
return _w +HIT_AREA *2;\r
},\r
hitareaH: function( _comicElement, _h){\r
if( _comicElement === currentElement){\r
- var _consoleY = COMIC_ELEMENT_CONSOLE.y();\r
- return ( _consoleY < currenth ? currenth : _consoleY +COMIC_ELEMENT_CONSOLE.h()) +HIT_AREA *2;\r
+ var _consoleY = CONSOLE_CONTROLER.y();\r
+ return ( _consoleY < currenth ? currenth : _consoleY +CONSOLE_CONTROLER.h()) +HIT_AREA *2;\r
}\r
return _h +HIT_AREA *2;\r
},\r
onMouseDown: function( _currentElement, _mouseX, _mouseY){\r
//show( _currentElement);\r
- if( currentIsTextElement === true && TAIL_CONTROLER.onStart( _currentElement, _mouseX, _mouseY) === true){\r
- currentControler = TAIL_CONTROLER;\r
+ if( currentIsTextElement === true && TAIL_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){\r
+ currentOperator = TAIL_OPERATOR;\r
} else\r
- if( RESIZE_CONTROLER.onStart( _currentElement, _mouseX, _mouseY) === true){\r
- currentControler = RESIZE_CONTROLER;\r
+ if( RESIZE_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){\r
+ currentOperator = RESIZE_OPERATOR;\r
} else {\r
- POSITION_CONTROLER.onStart( _currentElement, _mouseX, _mouseY)\r
- currentControler = POSITION_CONTROLER;\r
+ POSITION_OPERATOR.onStart( _currentElement, _mouseX, _mouseY)\r
+ currentOperator = POSITION_OPERATOR;\r
}\r
},\r
onMouseMove: function( _currentElement, _mouseX, _mouseY){\r
show( _currentElement);\r
- if( currentControler !== null){\r
- currentControler.onDrag( _mouseX, _mouseY); \r
- } else {\r
- currentElement && COMIC_ELEMENT_CONSOLE.onMouseMove( _mouseX -currentx, _mouseY -currenty);\r
- TAIL_CONTROLER.hitTest( _mouseX -currentx, _mouseY -currenty) === false && RESIZE_CONTROLER.index( _mouseX, _mouseY) === -1 && MOUSE_CURSOR( '');\r
+ if( currentOperator !== null){\r
+ currentOperator.onDrag( _mouseX, _mouseY); \r
+ } else\r
+ if( currentElement !== null){\r
+ CONSOLE_CONTROLER.onMouseMove( _mouseX -currentx, _mouseY -currenty);\r
+ if( currentIsTextElement === false || TAIL_OPERATOR.hitTest( _mouseX -currentx, _mouseY -currenty) === false){\r
+ RESIZE_OPERATOR.index( _mouseX, _mouseY);\r
+ }\r
}\r
},\r
onMouseUp: function( _currentElement, _mouseX, _mouseY){\r
- currentControler !== null && currentControler.onFinish();\r
- currentControler = null;\r
+ currentOperator !== null && currentOperator.onFinish();\r
+ currentOperator = null;\r
}\r
}\r
})();\r
/*\r
- * // COMIC_ELEMENT_OPERATOR\r
+ * // COMIC_ELEMENT_OPERATION_MANAGER\r
*/\r
\r
var AbstractComicElement = function( JQ_WAPPER, COMIC_ELM_TYPE, update, x, y, w, h, z, timing){\r
- var OPERATOR = COMIC_ELEMENT_OPERATOR;\r
+ var OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER;\r
return {\r
$: JQ_WAPPER,\r
type: COMIC_ELM_TYPE,\r
jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html());\r
\r
var JQ_WRAPPER = jqImageElementOrigin.clone( true),\r
- OPERATOR = COMIC_ELEMENT_OPERATOR,\r
+ OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,\r
SAVE = HISTORY.saveState,\r
HIT_AREA = MOUSE_HIT_AREA,\r
reversibleImage = null,\r
var JQ_WRAPPER = jqTextElementOrigin.clone( true),\r
XBROWSER_BALLOON = pettanr.balloon.createBalloon( w, h, a, type),\r
TEXT_ELM = JQ_WRAPPER.find( 'td,.speach-inner').eq( 0),\r
- OPERATOR = COMIC_ELEMENT_OPERATOR,\r
+ OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,\r
HIT_AREA = MOUSE_HIT_AREA,\r
SAVE = HISTORY.saveState,\r
instance;\r
\r
\r
var COMIC_ELEMENT_CONTROL = ( function(){\r
- var currentElement = null,\r
- canvasX, canvasY, canvasW, canvasH,\r
+ var SAVE = HISTORY.saveState,\r
+ ELM_CONTAINER = document.getElementById( 'comic-element-container'),\r
+ currentElement = null,\r
+ panelX, panelY, panelW, panelH,\r
startX, startY;\r
\r
/*\r
* \r
* append comicElement\r
* 1. 新しい comicElement の z-position を得る\r
- * 2. ｚ の同じ comicElementを見つけ、その前に加える。または一番先頭へ。（DRAGGABLE_ELEMENT_ARRAY）\r
- * zが大きいほど、DRAGGABLE_ELEMENT_ARRAYの先頭へ。\r
- * 3. dom位置は、DRAGGABLE_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。\r
+ * 2. ｚ の同じ comicElementを見つけ、その前に加える。または一番先頭へ。（COMIC_ELEMENT_ARRAY）\r
+ * zが大きいほど、COMIC_ELEMENT_ARRAYの先頭へ。\r
+ * 3. dom位置は、COMIC_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。\r
* \r
* \r
* remove comicElement\r
function appendComicElement( _comicElement) {\r
_comicElement.init && _comicElement.init();\r
var z = _comicElement.z,\r
- l = DRAGGABLE_ELEMENT_ARRAY.length;\r
- _comicElement.$.stop().css( {\r
- filter: '',\r
- opacity: ''\r
- });\r
- if( z === undefined || z === NaN || z < 0 || z >= l){\r
- DRAGGABLE_ELEMENT_ARRAY.unshift( _comicElement);\r
- comicElementContainer.append( _comicElement.$.fadeIn());\r
+ l = COMIC_ELEMENT_ARRAY.length,\r
+ _jqElm = _comicElement.$.stop().css( {\r
+ filter: '',\r
+ opacity: ''\r
+ });\r
+ if( typeof z !== 'number' || z < 0 || z >= l){\r
+ COMIC_ELEMENT_ARRAY.unshift( _comicElement);\r
+ ELM_CONTAINER.appendChild( _jqElm.get( 0));\r
+ _jqElm.fadeIn();\r
} else {\r
- var insertIndex = ( function(){\r
- for( var ret = 0; ret < l; ++ret){\r
- if( DRAGGABLE_ELEMENT_ARRAY[ ret].z <= z) return ret +1;\r
- }\r
- return 0;\r
- })();\r
- DRAGGABLE_ELEMENT_ARRAY[ insertIndex -1].$.after( _comicElement.$.fadeIn());\r
- DRAGGABLE_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement);\r
+ var insertIndex = 0;\r
+ for( var i = 0; i < l; ++i){\r
+ if( COMIC_ELEMENT_ARRAY[ i].z <= z){\r
+ insertIndex = i;\r
+ break;\r
+ }\r
+ }\r
+ COMIC_ELEMENT_ARRAY[ insertIndex].$.before( _jqElm.fadeIn());\r
+ COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement);\r
}\r
- sortComicElement();\r
+ numberingComicElement();\r
}\r
function removeComicElement( _comicElement) {\r
- var l = DRAGGABLE_ELEMENT_ARRAY.length;\r
+ var l = COMIC_ELEMENT_ARRAY.length;\r
for( var i=0; i<l; ++i){\r
- if( DRAGGABLE_ELEMENT_ARRAY[ i] === _comicElement){\r
- DRAGGABLE_ELEMENT_ARRAY.splice( i, 1);\r
- sortComicElement();\r
+ if( COMIC_ELEMENT_ARRAY[ i] === _comicElement){\r
+ COMIC_ELEMENT_ARRAY.splice( i, 1);\r
+ numberingComicElement();\r
_comicElement.$.stop().css( {\r
filter: '',\r
opacity: ''\r
- }).fadeOut( function(){\r
- this.parentNode.removeChild( this);\r
- });\r
+ }).fadeOut( onFadeOut);\r
currentElement = currentElement === _comicElement ? null : currentElement;\r
return;\r
}\r
}\r
+ function onFadeOut(){\r
+ this.parentNode.removeChild( this);\r
+ }\r
}\r
function restoreComicElement( arg){\r
var isAppend = arg[ 0],\r
isAppend === true ? appendComicElement( comicElement) : removeComicElement( comicElement);\r
}\r
/*\r
- * DRAGGABLE_ELEMENT_ARRAY の順番を基準に、zの再計算\r
+ * COMIC_ELEMENT_ARRAY の順番を基準に、zの再計算\r
* jqElmの並び替え。\r
*/\r
- function sortComicElement(){\r
- var l = DRAGGABLE_ELEMENT_ARRAY.length,\r
+ function numberingComicElement(){\r
+ var l = COMIC_ELEMENT_ARRAY.length,\r
_comicElement, jqElm, jqNext;\r
for( var i=0; i < l; ++i){\r
- _comicElement = DRAGGABLE_ELEMENT_ARRAY[ i];\r
+ _comicElement = COMIC_ELEMENT_ARRAY[ i];\r
jqElm = _comicElement.$;\r
jqNext && jqNext.before( jqElm);\r
- _comicElement.z = l -i +1;\r
+ _comicElement.z = l -i -1;\r
jqNext = jqElm;\r
}\r
}\r
function replaceComicElement( _comicElement, goForward){\r
- // DRAGGABLE_ELEMENT_ARRAYの再構築\r
- var l = DRAGGABLE_ELEMENT_ARRAY.length,\r
+ // COMIC_ELEMENT_ARRAYの再構築\r
+ var l = COMIC_ELEMENT_ARRAY.length,\r
i = ( function(){\r
for( var ret = 0; ret < l; ++ret){\r
- if( DRAGGABLE_ELEMENT_ARRAY[ ret] === _comicElement) return ret;\r
+ if( COMIC_ELEMENT_ARRAY[ ret] === _comicElement) return ret;\r
}\r
return -1;\r
})();\r
if( i === -1) return;\r
if( goForward === true){\r
if( i === 0) return;\r
- DRAGGABLE_ELEMENT_ARRAY.splice( i, 1);\r
- DRAGGABLE_ELEMENT_ARRAY.splice( i -1, 0, _comicElement);\r
+ COMIC_ELEMENT_ARRAY.splice( i, 1);\r
+ COMIC_ELEMENT_ARRAY.splice( i -1, 0, _comicElement);\r
} else {\r
if( i === l -1) return;\r
- DRAGGABLE_ELEMENT_ARRAY.splice( i, 1);\r
- DRAGGABLE_ELEMENT_ARRAY.splice( i +1, 0, _comicElement);\r
+ COMIC_ELEMENT_ARRAY.splice( i, 1);\r
+ COMIC_ELEMENT_ARRAY.splice( i +1, 0, _comicElement);\r
}\r
- sortComicElement();\r
+ numberingComicElement();\r
}\r
function restoreReplaceObject( arg){\r
replaceComicElement( arg[ 0], arg[ 1]);\r
\r
return {\r
init: function( _x, _y, _w, _h){\r
- /*\r
- * comic-element\r
- */\r
- comicElementContainer = $( '#comic-element-container');\r
\r
appendComicElement( ImageElementClass.apply( {}, [ 'images/13.gif', 'penchan', 10, 10, 0, 100, 140, 0]));\r
appendComicElement( TextElementClass.apply( {}, [ 0, 270, 'Hello', 50, 70, 1, 200, 160, 1]));\r
- \r
- COMIC_ELEMENT_OPERATOR.init( updateMouseCursor);\r
/*\r
* \r
*/\r
log = $( '#operation-catcher-log');\r
-\r
- this.onCanvasResize( _x, _y, _w, _h);\r
\r
delete COMIC_ELEMENT_CONTROL.init;\r
},\r
restoreComicElement: restoreComicElement,\r
replaceComicElement: replaceComicElement,\r
restoreReplaceObject: restoreReplaceObject,\r
- onCanvasResize : function ( _canvasX, _canvasY, _canvasW, _canvasH, isResizerTopAction){\r
+ onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction){\r
/*\r
* リサイズが、ResizerTopによって行われた場合、comicElementのyを動かして見かけ上動かないようにする。\r
*/ \r
if( isResizerTopAction === true){\r
- var _shiftX = _canvasW -canvasW,\r
- _shiftY = _canvasH -canvasH,\r
- l = DRAGGABLE_ELEMENT_ARRAY.length;\r
+ var _shiftX = _panelW -panelW,\r
+ _shiftY = _panelH -panelH,\r
+ l = COMIC_ELEMENT_ARRAY.length;\r
for( var i = 0; i < l; i++){\r
- DRAGGABLE_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY);\r
+ COMIC_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY);\r
}\r
}\r
- canvasX = _canvasX;\r
- canvasY = _canvasY;\r
- canvasW = _canvasW;\r
- canvasH = _canvasH;\r
+ panelX = _panelX;\r
+ panelY = _panelY;\r
+ panelW = _panelW;\r
+ panelH = _panelH;\r
\r
- comicElementContainer.css( {\r
- width: _canvasW,\r
- height: _canvasH,\r
- left: _canvasX,\r
- top: _canvasY\r
- });\r
+ ELM_CONTAINER.style.width = _panelW +'px';\r
+ ELM_CONTAINER.style.height = _panelH +'px';\r
+ ELM_CONTAINER.style.left = _panelX +'px';\r
+ ELM_CONTAINER.style.top = _panelY +'px';\r
},\r
onMouseMove: function( _mouseX, _mouseY){\r
- var l = DRAGGABLE_ELEMENT_ARRAY.length,\r
- _X = _mouseX -canvasX,\r
- _Y = _mouseY -canvasY,\r
+ var l = COMIC_ELEMENT_ARRAY.length,\r
+ _X = _mouseX -panelX,\r
+ _Y = _mouseY -panelY,\r
_elm, _x, _y;\r
\r
if( currentElement !== null){\r
}\r
}\r
for( var i=0; i<l; i++){\r
- _elm = DRAGGABLE_ELEMENT_ARRAY[ i];\r
+ _elm = COMIC_ELEMENT_ARRAY[ i];\r
_x = _elm.hitareaX();\r
_y = _elm.hitareaY();\r
// hitTest\r
}\r
}\r
currentElement = null; \r
- COMIC_ELEMENT_OPERATOR.hide();\r
+ COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
log.html( [ _X, _Y, _x, _y].join( ','));\r
return false;\r
},\r
onMouseUp: function( _mouseX, _mouseY){\r
var ret = currentElement !== null && currentElement.busy() === true;\r
- ret === true && currentElement.onMouseUp( _mouseX -startX || canvasX, _mouseY -startY || canvasY);\r
+ ret === true && currentElement.onMouseUp( _mouseX -startX || panelX, _mouseY -startY || panelY);\r
startX = startY = NaN;\r
return ret;\r
},\r
onMouseDown: function( _mouseX, _mouseY){\r
- startX = canvasX;\r
- startY = canvasY;\r
+ startX = panelX;\r
+ startY = panelY;\r
currentElement !== null && currentElement.onMouseDown( _mouseX -startX, _mouseY -startY);\r
return currentElement !== null;\r
},\r
createImageElement: function( url, imagesetID, x, y, z, w, h){\r
w = w || 200; //ActualWidth\r
h = h || 150; //ActualHeight\r
- x = x || Math.floor( canvasW /2 -w /2);\r
- y = y || Math.floor( canvasH /2 -h /2);\r
+ x = x || Math.floor( panelW /2 -w /2);\r
+ y = y || Math.floor( panelH /2 -h /2);\r
IMAGE_GROUP_EXPROLER.show( function( _url, _w, _h){\r
- var _comicElement = ImageElementClass.apply( {}, [ _url, imagesetID, x, y, z || -1, w, h, DRAGGABLE_ELEMENT_ARRAY.length]);\r
+ var _comicElement = ImageElementClass.apply( {}, [ _url, imagesetID, x, y, z || -1, w, h, COMIC_ELEMENT_ARRAY.length]);\r
appendComicElement( _comicElement);\r
_comicElement.animate( undefined, undefined, _w, _h);\r
SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);\r
text = text || '';\r
w = w || 200;\r
h = h || 150;\r
- x = x || Math.floor( canvasW /2 -w /2 +Math.random() *10);\r
- y = y || Math.floor( canvasH /2 -h /2 +Math.random() *10);\r
- var _comicElement = TextElementClass.apply( {}, [ type, angle, text, x, y, z || -1, w, h, DRAGGABLE_ELEMENT_ARRAY.length]);\r
+ x = x || Math.floor( panelW /2 -w /2 +Math.random() *10);\r
+ y = y || Math.floor( panelH /2 -h /2 +Math.random() *10);\r
+ var _comicElement = TextElementClass.apply( {}, [ type, angle, text, x, y, z || -1, w, h, COMIC_ELEMENT_ARRAY.length]);\r
TEXT_EDITOR_CONTROL.show( _comicElement, function( _comicElement){\r
appendComicElement( _comicElement);\r
SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);\r
},\r
getAsHTML: function( isAbsoluteUrl, isXHTML){\r
var HTML_ARRAY = [],\r
- l = DRAGGABLE_ELEMENT_ARRAY.length,\r
+ l = COMIC_ELEMENT_ARRAY.length,\r
_timing = 0,\r
_comicElement;\r
\r
function getComicElementByTiming(){\r
while( _timing < l *2){\r
for(var i=0; i<l; ++i){\r
- if( _timing === DRAGGABLE_ELEMENT_ARRAY[ i].timing){\r
+ if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){\r
++_timing;\r
- return DRAGGABLE_ELEMENT_ARRAY[ i];\r
+ return COMIC_ELEMENT_ARRAY[ i];\r
}\r
}\r
++_timing;\r
[\r
'<div class="panel" ',\r
'style="',\r
- 'height:', canvasH, 'px;',\r
+ 'height:', panelH, 'px;',\r
'background-color:', ';',\r
'"',\r
'>'\r
var JSON_STRING_ARRAY = [],\r
IMAGE_ARRAY = [],\r
BALLOON_ARRAY = [],\r
- l = DRAGGABLE_ELEMENT_ARRAY.length,\r
+ l = COMIC_ELEMENT_ARRAY.length,\r
_timing = 0,\r
_comicElement,\r
cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
function getComicElementByTiming(){\r
while( _timing < l *2){\r
for(var i=0; i<l; ++i){\r
- if( _timing === DRAGGABLE_ELEMENT_ARRAY[ i].timing){\r
+ if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){\r
++_timing;\r
- return DRAGGABLE_ELEMENT_ARRAY[ i];\r
+ return COMIC_ELEMENT_ARRAY[ i];\r
}\r
}\r
++_timing;\r
'"y": ', 0, ',', cr,\r
'"z": ', 0, ',', cr,\r
'"t": ', 0, ',', cr,\r
- '"width": ', canvasW, ',', cr,\r
- '"height": ', canvasH, ',', cr,\r
+ '"width": ', panelW, ',', cr,\r
+ '"height": ', panelH, ',', cr,\r
'"panel_pictures_attributes": {', cr,\r
IMAGE_ARRAY.join( ',' +cr), cr,\r
'},', cr,\r
\r
jqEditor = $( '#editor');\r
\r
- pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 96, false, true, centering);\r
- pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 48, false, true, centering);\r
-\r
/*\r
* MOUSE_LISTENER_ARRAY は、表示順に格納．手前の要素が最初\r
* MENU_BAR_CONTROL,\r
* WINDOW_CONTROL,\r
* COMIC_ELEMENT_CONTROL,\r
- * CANVAS_CONTROL\r
+ * PANEL_CONTROL\r
* .busy() === true なら、そのままonMouseMove()にイベントを流す．これはArrayの後ろから、奥の表示要素から\r
* onMouseMove()に流してみて、false が帰れば、次にリスナーにも流す．\r
*/\r
MOUSE_LISTENER_ARRAY.push( MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, COMIC_ELEMENT_CONTROL, PANEL_CONTROL);\r
\r
HISTORY.init();\r
- MENU_BAR_CONTROL.EDIT.createSelection( 'centering', 'ctrl + 0', centering, true, true, true);\r
\r
WINDOWS_CONTROL.init();\r
\r
GRID_CONTROL.init();\r
- // WHITE_GLASS_CONTROL.init();\r
PANEL_CONTROL.init();\r
- //COMIC_ELEMENT_CONTROL.init();\r
+ CONSOLE_CONTROLER.init();\r
+ COMIC_ELEMENT_OPERATION_MANAGER.init();\r
+ COMIC_ELEMENT_CONTROL.init();\r
\r
// last\r
MENU_BAR_CONTROL.init();\r
\r
- \r
- \r
TEXT_EDITOR_CONTROL.init();\r
IMAGE_GROUP_EXPROLER.init();\r
+\r
+ /*\r
+ * centering
+ */\r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 96, false, true, centering); // ctrl + 0\r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 48, false, true, centering); // ctrl + 0\r
+ MENU_BAR_CONTROL.EDIT.createSelection( 'centering', 'ctrl + 0', centering, true, true, true);\r
/*\r
* jqMouseEventChacher は透明な要素で、\r
* マウスイベントをcurrentElement(currentElement)に伝えるのが仕事\r
OSDN Git Service
