* author:\r
* itozyun\r
* licence:\r
- * BSD\r
+ * new BSD\r
*\r
* \r
* ----------------------------------------\r
* \r
*/\r
\r
-/*\r
- * if (!document.namespaces["v"]) { // VMLネームスペースが定義されていないなら\r
- // ネームスペース(v) をVMLとして認識させる\r
- document.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML");\r
- }\r
- // スタイルシートを生成し、<v:rect> と <v:fill> をVMLとして紐付ける\r
- document.createStyleSheet().cssText = "v\:rect,v\:fill{behavior:url(#default#VML);";\r
-\r
- */\r
-\r
var h2c = ( function(){\r
var FUNCTION_ARRAY = [],\r
URL = document.location.href.split( '#')[ 0],\r
ieMode = ieVersion === 8 ? document.documentMode : 0,\r
isStanderdMode = document.compatMode === 'CSS1Compat',\r
jqWindow , jqDocument , jqBody;\r
- \r
- ( function(){\r
- var _elms = document.getElementsByTagName( '*'),\r
- _elm,\r
- i = 0;\r
- while( i < _elms.length){\r
- _elm = _elms[ i];\r
- if( _elm.nodeType === 8 && _elm.parentNode){\r
- _elm.parentNode.removeChild( _elm);\r
- } else {\r
- ++i;\r
- }\r
- }\r
- })();\r
- \r
return {\r
version: '0.3.0',\r
init: function(){\r
}\r
return !!test;\r
})(),\r
+ VML: ( function(){\r
+ if( isIE === false || ieVersion > 8) return false;\r
+ var globalObjectName = '_global',\r
+ script;\r
+ document.write( [ '<!--[if gte vml 1]><script>window', globalObjectName, '=1;<\/script><![endif]-->'].join( ''));\r
+ if( window[globalObjectName] === 1){\r
+ //script = document.getElementById( globalObjectName);\r
+ //script.parentNode.removeChild( script);\r
+ window[globalObjectName] = undefined;\r
+ return true;\r
+ }\r
+ return false;\r
+ })(),\r
+ startVML: function(){\r
+ if( h2c.VML !== true) return false;\r
+ if (!document.namespaces["v"]) {\r
+ document.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML");\r
+ }\r
+ document.createStyleSheet().cssText = "v\:shape,v\:image{behavior:url(#default#VML);display:block;};";\r
+ delete this.startVML;\r
+ },\r
jqWindow: function(){\r
return jqWindow;\r
},\r
* getImageSize()\r
* \r
*/\r
-\r
h2c.util = ( function(){\r
var ELM_SIZE_GETTER = ( function(){\r
var ret = document.createElement( 'DIV'),\r
return ret;\r
})(),\r
CLEAN_TARGET_ELEMENT = 'script,style,object,applet,embed,iframe,frame,base,bgsound,frameset,listing'.split( ',');\r
+ \r
+ // cleanCommnetNode();\r
+ function cleanCommnetNode( _targetElm){\r
+ var _elms = ( _targetElm || document).getElementsByTagName( '*'),\r
+ _elm,\r
+ i = 0;\r
+ while( i < _elms.length){\r
+ _elm = _elms[ i];\r
+ if( _elm.nodeType === 8 && _elm.parentNode){\r
+ _elm.parentNode.removeChild( _elm);\r
+ } else {\r
+ ++i;\r
+ }\r
+ }\r
+ }\r
return {\r
extend: function( baseInstance, extend){\r
for( var key in extend){\r
}\r
return baseInstance;\r
},\r
+ cleanCommnetNode: cleanCommnetNode,\r
cleanElement: function( _targetElm){\r
var l = CLEAN_TARGET_ELEMENT.length,\r
elms, elm, j;\r
for( var i=0; i<l; ++i){\r
- elms = _targetElm.getElementsByTagName( CLEAN_TARGET_ELEMENT[ 0]);\r
+ elms = _targetElm.getElementsByTagName( CLEAN_TARGET_ELEMENT[ i]);\r
if( elms.length > 0){\r
for( j=0; i<elms.length; ++j){\r
elm = elms[ 0];\r
}\r
}\r
}\r
+ cleanCommnetNode( _targetElm);\r
if( h2c.isIE === false) return;\r
elms = document.getElementsByName( '*');\r
l = elms.length;\r
/*\r
* window resize event, overlay と currentなviewに流す\r
* view modeの保持\r
- * editor, overlay, comic-viewer, image-explorer\r
+ * editor, overlay, comic-viewer, image-explorer\r
* fadeIn, faseOut\r
*/\r
h2c.view = ( function(){\r
* ie5.5-8\r
* \r
* 内部の角度計算は radian で統一したい。\r
- * 当初 vectorEnabled = true で一度書いてみる。\r
+ * 当初 vectorEnabled = true で一度書いてみる。\r
* 駄目なら、代替のイメージのsrcの用意もここで担当。\r
* 閲覧と編集両方で使う。\r
* \r
})(),\r
NUM_BALLOON_IMAGE = 24,\r
vectorEnabled = ELM_BALLOON_ORIGIN !== null && h2c.URL_PARAMS.vector !== false;\r
+ if( IS_VML === true && h2c.VML === false) vectorEnabled = false;\r
\r
var XBROWSER_BALLOON_CLASS = function( w, h, a){\r
var balloonElm = vectorEnabled === true ? ELM_BALLOON_ORIGIN.cloneNode( true) : document.createElement( 'IMG'), // h2c.imageに変更\r
- PI = Math.PI, cos = Math.cos, sin = Math.sin,\r
- abs = Math.abs, pow = Math.pow;\r
+ path = balloonElm.getElementsByTagName( 'path')[ 0],\r
+ shape = balloonElm.getElementsByTagName( 'shape')[ 0],\r
+ cos = Math.cos, sin = Math.sin,\r
+ abs = Math.abs, pow = Math.pow,\r
+ round = Math.round,\r
+ floor = Math.floor,\r
+ TARGET = TAIL_WIDTH * TAIL_WIDTH,\r
+ DEG_TO_RAD = Math.PI / 180,\r
+ l = ',';\r
\r
draw( a, w, h);\r
\r
function draw( _a, _w, _h){\r
a = _a !== undefined ? _a : a;\r
- w = _w ? _w -PADDING_TOP *2 : w;\r
- h = _h ? _h -PADDING_LEFT *2 : h;\r
+ w = _w !== undefined ? _w -PADDING_TOP *2 : w;\r
+ h = _h !== undefined ? _h -PADDING_LEFT *2 : h;\r
\r
if( vectorEnabled === false){\r
balloonElm.setAttribute( 'src', balloonUrlBuilder( a));\r
\r
var rx = w /2,\r
ry = h /2,\r
- tailRad = a * PI / 180,\r
+ tailRad = a * DEG_TO_RAD,\r
tailX = rx +( rx +TAIL_HEIGHT) * cos( tailRad),\r
tailY = ry +( ry +TAIL_HEIGHT) * sin( tailRad),\r
startX, startY, endX, endY;\r
/*\r
* tailの太さをTAIL_WIDTHに一致させるため、角度を絞りつつ計算\r
*/\r
- ( function( a, rx, ry, sin, cos, pow){\r
- var startRad, endRad,\r
- _startX, _startY, _endX, _endY,\r
- tailDeg = 0, d,\r
- TARGET = TAIL_WIDTH * TAIL_WIDTH,\r
- DEG_TO_RAD = PI / 180;\r
+ var startRad, endRad,\r
+ _startX, _startY, _endX, _endY,\r
+ tailDeg = 0, d;\r
+ \r
+ for( var i = 45; i > 0.01; i /= 2){\r
+ d = ( tailDeg +i) /2;\r
+ startRad = ( a +d) * DEG_TO_RAD;\r
+ endRad = ( a -d) * DEG_TO_RAD;\r
\r
- for( var i = 45; i > 0.01; i /= 2){\r
- d = ( tailDeg +i) /2;\r
- startRad = ( a +d) * DEG_TO_RAD;\r
- endRad = ( a -d) * DEG_TO_RAD;\r
+ _startX = rx +cos( startRad) *rx;\r
+ _startY = ry +sin( startRad) *ry;\r
+ _endX = rx +cos( endRad) *rx;\r
+ _endY = ry +sin( endRad) *ry; //円弧上のY位置=円中心Y+sin(角度×PI÷180)×円半径\r
\r
- _startX = rx +cos( startRad) *rx;\r
- _startY = ry +sin( startRad) *ry;\r
- _endX = rx +cos( endRad) *rx;\r
- _endY = ry +sin( endRad) *ry; //円弧上のY位置=円中心Y+sin(角度×PI÷180)×円半径\r
- \r
- if( pow( ( _startX -_endX), 2) + pow( ( _startY -_endY), 2) < TARGET){\r
- tailDeg += i;\r
- startX = _startX;\r
- startY = _startY;\r
- endX = _endX;\r
- endY = _endY; \r
- }\r
- } \r
- })( a, rx, ry, sin, cos, pow);\r
+ if( pow( ( _startX -_endX), 2) + pow( ( _startY -_endY), 2) < TARGET){\r
+ tailDeg += i;\r
+ startX = _startX;\r
+ startY = _startY;\r
+ endX = _endX;\r
+ endY = _endY; \r
+ }\r
+ }\r
\r
/*\r
* \r
*/ \r
- IS_VML === true ?\r
- ( function ( tailX, tailY, startX, startY, rx, ry, endX, endY, _w, _h){\r
- var l = ',',\r
- round = Math.round,\r
- shape = balloonElm.getElementsByTagName( 'shape')[ 0];\r
+ if( IS_VML === true){\r
+ var _tailX = tailX *10,\r
+ _tailY = tailY *10,\r
+ __startX = startX *10,\r
+ __startY = startY *10,\r
+ __endX = endX *10,\r
+ __endY = endY *10,\r
+ __w = w *10,\r
+ __h = h *10;\r
\r
shape.style.width = w +'px';\r
shape.style.height = h +'px';\r
- shape.coordsize = [ _w, _h].join( l);\r
+ shape.coordsize = [ __w, __h].join( l);\r
shape.path = [\r
- ' ar ', 0, l, 0, l, _w, l, _h, l,\r
- round( startX), l, round( startY), l,\r
- round( endX), l, round( endY),\r
- ' l ', round( tailX), l, round( tailY),\r
+ ' ar ', 0, l, 0, l, __w, l, __h, l,\r
+ round( __endX), l, round( __endY), l,\r
+ round( __startX), l, round( __startY),\r
+ ' l ', round( _tailX), l, round( _tailY),\r
' x e'\r
].join( '');\r
\r
- balloonElm.style.marginTop = tailY < 0 ? Math.floor( ( 60 +tailY) /10) : 10;\r
- balloonElm.style.marginLeft = tailX < 0 ? Math.floor( ( 60 +tailX) /10) : 10;\r
- \r
- })( tailX *10, tailY *10, endX *10, endY *10, rx *10, ry *10, startX *10, startY *10, w *10, h *10)\r
- :\r
- ( function (){\r
- var l = ',',\r
- path = balloonElm.getElementsByTagName( 'path')[ 0];\r
- \r
+ balloonElm.style.marginTop = _tailY < 0 ? floor( ( 60 +_tailY) /10) : 10;\r
+ balloonElm.style.marginLeft = _tailX < 0 ? floor( ( 60 +_tailX) /10) : 10;\r
+ } else {\r
balloonElm.setAttribute( 'width', w +PADDING_LEFT *2);\r
balloonElm.setAttribute( 'height', h +PADDING_TOP *2);\r
path.setAttribute( 'd', [\r
cround( endX +PADDING_LEFT), l, cround( endY +PADDING_TOP),\r
'z'\r
].join( ' '));\r
- \r
- function cround( v, r){\r
- r = r || ACCURACY;\r
- return Math.round( v *pow( 10.0, r)) /pow( 10.0, r);\r
- } \r
- })();\r
+ }\r
+ function cround( v, r){\r
+ r = r || ACCURACY;\r
+ return round( v *pow( 10.0, r)) /pow( 10.0, r);\r
+ }\r
}\r
\r
function balloonUrlBuilder( _a){\r
var d = 360 /NUM_BALLOON_IMAGE;\r
_a += 90 +d /2;\r
- return [ 'balloon\/_w', _a < 360 -d /2 ? Math.floor( _a /d) : 0, '.gif'].join( '');\r
+ return [ 'balloon\/_w', _a < 360 -d /2 ? floor( _a /d) : 0, '.gif'].join( '');\r
}\r
return {\r
elm: balloonElm,\r
}\r
};\r
\r
- vectorEnabled === true && ( function(){\r
+ IS_VML === false && vectorEnabled === true && ( function(){\r
var detect = XBROWSER_BALLOON_CLASS.apply( {}, [ 100, 100, 0]),\r
- size = h2c.util.getElementSize( detect.elm.firstChild ? detect.elm.firstChild : detect.elm);\r
+ size = h2c.util.getElementSize( detect.elm);\r
vectorEnabled = size.width !== 0 && size.height !== 0;\r
detect.destroy();\r
- detect = size = null; \r
+ detect = size = null;\r
})();\r
\r
return {\r
if( rimg === 'vml') return IS_VML;\r
}\r
if( h2c.isIE === false || h2c.ieVersion >= 9) return IS_CSS3; // 不十分!\r
- if( h2c.balloon.VML === true) return IS_VML;\r
+ if( h2c.VML === true) return IS_VML;\r
if( h2c.ACTIVEX === true) return IS_ACTIVEX;\r
if( h2c.FLASH === true) return IS_FLASH;\r
if( h2c.SILVERLIGHT === true) return IS_SILVERLIGHT;\r
h2c.util.loadImage( url, onLoad, onError, 100, 10000);\r
function onLoad( _url, _actualW, _actualH){\r
if( elmWrap === null) return;\r
- elmImg = document.createElement( 'IMG');\r
- elmWrap.appendChild( elmImg); // load後にimg\r
- elmImg.src = url;\r
+ elmImg = new Image;\r
+ /*\r
+ * createElement 直後に append しないと、ie(ActiveX)で img が正しく表示されない.\r
+ */\r
+ elmWrap.appendChild( elmImg);\r
+ elmImg.setAttribute( 'src', url);\r
elmWrap.className = CLASS_NAME;\r
onLoadCallback && onLoadCallback( _url, _actualW, _actualH);\r
onLoadCallback = null;\r
* - COMIC_ELEMENT_CONTROL\r
* - PanelResizerClass\r
* - COMIC_ELEMENT_OPERATOR\r
- * - TAIL_MOVER\r
+ * - TAIL_CONTROLER\r
* - ImageElementClass\r
* - TextElementClass\r
* \r
})(),\r
EMPTY_FUNCTION = new Function,\r
ITEM_ARRAY = [],\r
- barH,\r
+ barH = h2c.util.getElementSize( ELM_BAR).height,\r
itemW = h2c.util.getElementSize( ELM_ITEM_ORIGN).width,\r
selectionW = h2c.util.getElementSize( ELM_ITEM_ORIGN.getElementsByTagName( 'UL')[ 0]).width,\r
jqStage, jqBar;\r
- barH = h2c.util.getElementSize( ELM_BAR).height;\r
ELM_BAR.style.top = ( -barH) +'px';\r
\r
var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter){\r
\r
delete MENU_BAR_CONTROL.init;\r
},\r
+ h: barH,\r
onMouseMove: function( _mouseX, _mouseY){\r
if( barH >= _mouseY){\r
return true;\r
QUIT: createMenubarItem( 'Quit'),\r
EDIT: createMenubarItem( 'Edit'),\r
WINDOW: createMenubarItem( 'Window'),\r
- HELP: ( function(){\r
- var SELECTION_CALLBACK_ARRAY = [];\r
- return h2c.util.extend( createMenubarItem( 'Help', SELECTION_CALLBACK_ARRAY), {\r
- createAjaxSelection: function( callback){\r
- var elmLoading = document.createElement( 'li'),\r
- that = this,\r
- elmSelection = this.elm.getElementsByTagName( 'UL')[ 0];\r
- elmSelection.appendChild( elmLoading);\r
- elmLoading.className = 'loading';\r
- elmLoading.style.height = '90px'; \r
- \r
- //SELECTION_CALLBACK_ARRAY.push( callback);\r
- this.onShow = callback;\r
- callback = null;\r
- \r
- delete this.createAjaxSelection;\r
- return function(){\r
- //SELECTION_CALLBACK_ARRAY.shift();\r
- elmSelection.removeChild( elmLoading);\r
- $( elmSelection).children( 'li').click( that.onClick);\r
- elmLoading = elmSelection = null;\r
- delete that.onShow;\r
- that = null;\r
- }\r
+ HELP: h2c.util.extend( createMenubarItem( 'Help'), {\r
+ createAjaxSelection: function( callback){\r
+ var elmLoading = document.createElement( 'li'),\r
+ that = this,\r
+ elmSelection = this.elm.getElementsByTagName( 'UL')[ 0];\r
+ elmSelection.appendChild( elmLoading);\r
+ elmLoading.className = 'loading';\r
+ elmLoading.style.height = '90px'; \r
+\r
+ this.onShow = callback;\r
+ callback = null;\r
+ \r
+ delete this.createAjaxSelection;\r
+ return function(){\r
+ elmSelection.removeChild( elmLoading);\r
+ $( elmSelection).children( 'li').click( that.onClick);\r
+ elmLoading = elmSelection = null;\r
+ delete that.onShow;\r
+ that = null;\r
}\r
- });\r
- })()\r
+ }\r
+ })\r
}\r
})();\r
\r
\r
\r
/* ----------------------------------------\r
- * HELP_DOCUMENTS_CONTROL\r
- * * menubar の help 下に help documents の index を挿入\r
- * * help window に help documents を挿入\r
- */\r
- var HELP_DOCUMENTS_CONTROL = ( function(){\r
- \r
- return {\r
- load: function( titleArray){\r
- var help = MENU_BAR_CONTROL.HELP;\r
- //help.createSelection();\r
- //onLoadFunction();\r
- }\r
- }\r
- })();\r
-\r
-/* ----------------------------------------\r
* Save Control\r
*/\r
\r
var SAVE = MENU_BAR_CONTROL.QUIT.createSelection( 'save', 'ctrl + S', quit, false),\r
SAVE_AND_QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'save & quit', null, quit, false, false, true),\r
SAVE_AS_HTML = MENU_BAR_CONTROL.QUIT.createSelection( 'get as html', null, outputAsHtml, true, false, true),\r
+ SAVE_AS_JSON_STRING = MENU_BAR_CONTROL.QUIT.createSelection( 'get JsonStr', null, outputAsJsonString, true, false, true),\r
QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'quit', null, quit, true, true),\r
updated = false;\r
\r
function outputAsHtml(){\r
alert( CANVAS_CONTROL.getAsHTML( true, false));\r
}\r
- \r
+ function outputAsJsonString(){\r
+ alert( CANVAS_CONTROL.getAsJsonString());\r
+ }\r
return {\r
quit: quit,\r
panelUpdated: function( _updated){\r
log;\r
\r
var jqWindowOrigin,\r
- windowCloseButtonWidth;\r
+ closeButtonWidth;\r
var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, CLOSE_BUTTON_ENABLED, RESIZE_BUTTON_ENABLED, minWindowW, minWindowH){\r
var MOUSE_CURSOR = updateMouseCursor,\r
MENUBAR_SELWCTION = MENU_BAR_CONTROL.WINDOW.createSelection( \r
\r
function update( _x, _y, _w, _h){\r
( w !== _w || h !== _h) && instance.onResize && instance.onResize( _w, _h);\r
- x = _x || x;\r
- y = _y || y;\r
- w = _w || w;\r
- h = _h || 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
jqWrapper.css( {\r
left: x,\r
top: y,\r
elmBodyStyle.height = bodyH +'px';\r
}\r
function bodyBackOrForward( isBack){\r
+ if( !instance) return;\r
if( bodyIsTachable === !isBack) return;\r
elmBodyStyle.position = isBack === true ? 'relative' : 'absolute';\r
elmBodyStyle.left = isBack === true ? 0 : x +'px';\r
bodyIsTachable === isBack && isBack === true ? jqWrapper.append( elmBody) : jqStage.append( elmBody);\r
bodyIsTachable = !isBack;\r
}\r
- \r
+ function onWindowResize( e){\r
+ bodyBackOrForward( true);\r
+ isResizing = true;\r
+ startX = x;\r
+ startY = y;\r
+ startW = w;\r
+ startH = h;\r
+ xOffset = e.pageX;\r
+ yOffset = e.pageY;\r
+ MOUSE_CURSOR( 'nw-resize');\r
+ e.stopPropagation();\r
+ return false;\r
+ }\r
return {\r
init: function( jqContainer){\r
+ /*\r
+ * setTimeout で呼ばれるグローバルメソッドは、this でなく instance を使う.\r
+ */\r
instance = this;\r
\r
jqWindowOrigin = jqWindowOrigin || ( function(){\r
return $( $( '#windowTemplete').remove().html());\r
})();\r
- windowCloseButtonWidth = windowCloseButtonWidth || ( function(){\r
+ closeButtonWidth = closeButtonWidth || ( function(){\r
return h2c.util.getElementSize( jqWindowOrigin.clone( true).find( '.window-close-button').get( 0)).width;\r
})();\r
\r
},\r
visible: visible,\r
firstOpen: function(){\r
- //jqContainer.append( jqWrapper); // domに追加しないと、this.onInit()が正しく動かない.\r
- //jqWrapper.fadeIn(); // appendした後に fadeIn() しないと ie で filterが適用されない.\r
if( RESIZE_BUTTON_ENABLED === true){\r
- jqWrapper.find( '.window-resize-button').eq( 0)\r
- .mousedown( function( e){\r
- bodyBackOrForward( true);\r
- isResizing = true;\r
- startX = x;\r
- startY = y;\r
- startW = w;\r
- startH = h;\r
- xOffset = e.pageX;\r
- yOffset = e.pageY;\r
- MOUSE_CURSOR( 'nw-resize');\r
- e.stopPropagation();\r
- return false;\r
- });\r
+ jqWrapper.find( '.window-resize-button').eq( 0).mousedown( onWindowResize);\r
} else {\r
jqWrapper.find( '.window-resize-button').remove();\r
}\r
},\r
open: function(){\r
if( visible === true) return;\r
- this.visible = visible = true;\r
- openWindow( this);\r
- \r
+ instance.visible = visible = true;\r
+ openWindow( instance);\r
MENUBAR_SELWCTION.title( 'hide ' +title);\r
+ \r
+ for( var i=0, l = WINDOW_ARRAY.length; i<l; ++i){\r
+ if( WINDOW_ARRAY[ i] === instance){\r
+ WINDOW_ARRAY.splice( i, 1);\r
+ WINDOW_ARRAY.unshift( instance);\r
+ currentWindow = null;\r
+ currentWindowIndex = -1;\r
+ }\r
+ }\r
},\r
close: function(){\r
if( visible === false) return;\r
- this.visible = visible = false;\r
- this.onClose && setTimeout( this.onClose, 0);\r
- closeWindow( this);\r
+ instance.visible = visible = false;\r
+ instance.onClose && setTimeout( instance.onClose, 0);\r
+ closeWindow( instance);\r
MENUBAR_SELWCTION.title( 'show ' +title);\r
},\r
+ bodyBackOrForward: bodyBackOrForward,\r
onMouseDown: function( _mouseX, _mouseY){\r
if( x > _mouseX || y > _mouseY || x +w < _mouseX || y +headerH < _mouseY ) return;\r
- if( CLOSE_BUTTON_ENABLED === true && x +w -windowCloseButtonWidth < _mouseX){\r
+ if( CLOSE_BUTTON_ENABLED === true && x +w -closeButtonWidth < _mouseX){\r
this.close();\r
return;\r
}\r
return currentWindowIndex;\r
}\r
function openWindow( _window){\r
- if( _window.firstOpen && h2c.isIE === true && h2c.ieVersion < 9){\r
- jqContainer.append( _window.$.stop());\r
- _window.firstOpen();\r
- }\r
- _window.visible === true && jqContainer.append( _window.$.stop().fadeIn(\r
+ if( _window.visible !== true) return;\r
+ var _jqWindow = _window.$;\r
+ jqContainer.append( _jqWindow);// appendした後に fadeIn() しないと ie で filterが適用されない.\r
+ _jqWindow.fadeIn(\r
function(){\r
_window.firstOpen && _window.firstOpen();\r
_window.onOpen && setTimeout( _window.onOpen, 0);\r
}\r
- ));\r
+ );\r
+ return;\r
}\r
function closeWindow( _window){\r
+ if( _window.visible !== false) return;\r
var l = WINDOW_ARRAY.length;\r
for( var i=0; i<l; ++i){\r
if( WINDOW_ARRAY[ i] === _window){\r
//WINDOW_ARRAY.splice( i, 1);\r
+ //WINDOW_ARRAY.push( _window);\r
_window.$.stop().fadeOut( function(){\r
this.parentNode.removeChild( this);\r
});\r
* TOOL_BOX_WINDOW\r
*/\r
var TOOL_BOX_WINDOW = ( function(){\r
- var addImageButton, addTextButton, editBgButton, switchGridButton, popupHelpButton, publishButton,\r
- gridSwitchFunction;\r
+ var addImageButton, addTextButton, editBgButton, switchGridButton, popupHelpButton, postButton,\r
+ gridSwitchFunction,\r
+ instance;\r
\r
h2c.key.addKeyDownEvent( h2c.view.EDITOR, 73, false, true, addImage);\r
MENU_BAR_CONTROL.EDIT.createSelection( 'Add Image', 'ctrl + I', addImage, true, true, false);\r
return false;\r
}\r
function popupHelp( e){\r
- setTimeout( HELP_DOCUMENTS_WINDOW.open, 0);\r
+ instance.bodyBackOrForward( true);\r
+ setTimeout( HELP_DOCUMENTS_WINDOW.open, 0); // setTimeout で囲むと window が開かない\r
+ e && e.preventDefault();\r
+ return false;\r
+ }\r
+ function editBG( e){\r
+ instance.bodyBackOrForward( true);\r
+ setTimeout( INFOMATION_WINDOW.open, 0); \r
e && e.preventDefault();\r
return false;\r
}\r
return WINDOWS_CONTROL.createWindow(\r
this,\r
{\r
+ onInit: function(){\r
+ instance = this;\r
+ delete this.onInit;\r
+ },\r
onFirstOpen: function(){\r
addImageButton = $( '#toolbox-add-image-button').click( addImage);\r
addTextButton = $( '#toolbox-add-text-button').click( addText);\r
- \r
- editBgButton = $( '#toolbox-edit-bg-button').click( function( e){\r
- setTimeout( INFOMATION_WINDOW.open, 0); \r
- e.preventDefault();\r
- return false;\r
- });\r
- \r
+ editBgButton = $( '#toolbox-edit-bg-button').click( editBG);\r
switchGridButton = $( '#toolbox-switch-grid').click( switchGrid);\r
popupHelpButton = $( '#toolbox-popup-help-button').click( popupHelp);\r
\r
- publishButton = $( '#toolbox-publish-button');\r
+ postButton = $( '#toolbox-post-button');\r
\r
delete this.onFirstOpen;\r
},\r
'toolbox-window', 'Tool box', 0, 215, 110, 290, true\r
);\r
})();\r
-\r
/* ----------------------------------------\r
* INFOMATION_WINDOW\r
*/ \r
FADE_OUT_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeOut' : 'hide',\r
backgroundInfomationElm,\r
jqComicElementInformation,\r
- xValueElm, yValueElm, zValueElm, aValueElm, wValueElm, hValueElm, aspectElm,\r
- wPercentElm, hPercentElm,\r
+ elmValueX, elmValueY, elmValueZ, elmValueA, elmValueW, elmValueH, elmAspect,\r
+ elmPercentW, elmPercentH,\r
currentComicElement = null,\r
currentElementType = -1;\r
\r
});\r
var TAB_GROUP_ID = 'comic-element-attribute';\r
var CREATER = h2c.key.createEditableText;\r
- xValueElm = CREATER( $( '#comic-element-x'), null, TAB_GROUP_ID);\r
- yValueElm = CREATER( $( '#comic-element-y'), null, TAB_GROUP_ID);\r
- zValueElm = CREATER( $( '#comic-element-z'), null, TAB_GROUP_ID);\r
- aValueElm = CREATER( $( '#comic-element-a'), null, TAB_GROUP_ID);\r
- wValueElm = CREATER( $( '#comic-element-w'), null, TAB_GROUP_ID);\r
- hValueElm = CREATER( $( '#comic-element-h'), null, TAB_GROUP_ID);\r
- wPercentElm = CREATER( $( '#comic-element-w-percent'), null, TAB_GROUP_ID);\r
- hPercentElm = CREATER( $( '#comic-element-h-percent'), null, TAB_GROUP_ID);\r
- aspectElm = $( '#comic-element-keep-aspect');\r
+ elmValueX = CREATER( $( '#comic-element-x'), null, TAB_GROUP_ID);\r
+ elmValueY = CREATER( $( '#comic-element-y'), null, TAB_GROUP_ID);\r
+ elmValueZ = CREATER( $( '#comic-element-z'), null, TAB_GROUP_ID);\r
+ elmValueA = CREATER( $( '#comic-element-a'), null, TAB_GROUP_ID);\r
+ elmValueW = CREATER( $( '#comic-element-w'), null, TAB_GROUP_ID);\r
+ elmValueH = CREATER( $( '#comic-element-h'), null, TAB_GROUP_ID);\r
+ elmPercentW = CREATER( $( '#comic-element-w-percent'), null, TAB_GROUP_ID);\r
+ elmPercentH = CREATER( $( '#comic-element-h-percent'), null, TAB_GROUP_ID);\r
+ elmAspect = $( '#comic-element-keep-aspect');\r
delete this.onFirstOpen;\r
},\r
onResize: function( w, h){\r
height: this.bodyHeight()\r
});\r
},\r
- update: function( _currentElementType, x, y, z, a, w, h, wPercent, hPercent, keepAspect){\r
- if( this.onFirstOpen) return;\r
- if( currentElementType !== _currentElementType){\r
- if( _currentElementType !== -1){\r
- if( _currentElementType === 1){\r
- aValueElm.show();\r
- wPercentElm.hide();\r
- hPercentElm.hide();\r
- aspectElm.hide();\r
+ update: function( _elementType, x, y, z, a, w, h, wPercent, hPercent, keepAspect){\r
+ if( !backgroundInfomationElm) return; // なぜか !backgroundInfomationElm が必要\r
+ if( currentElementType !== _elementType){\r
+ if( _elementType !== -1){\r
+ if( _elementType === 1){\r
+ elmValueA.show();\r
+ elmPercentW.hide();\r
+ elmPercentH.hide();\r
+ elmAspect.hide();\r
} else {\r
- aValueElm.hide();\r
- wPercentElm.show();\r
- hPercentElm.show();\r
- aspectElm.show();\r
+ elmValueA.hide();\r
+ elmPercentW.show();\r
+ elmPercentH.show();\r
+ elmAspect.show();\r
}\r
currentElementType === -1 && jqComicElementInformation.stop().css( {\r
filter: '',\r
opacity: ''\r
})[ FADE_OUT_EFFECT]();\r
}\r
- currentElementType = _currentElementType;\r
+ currentElementType = _elementType;\r
}\r
if( currentElementType !== -1){\r
- xValueElm.update( x);\r
- yValueElm.update( y);\r
- zValueElm.update( z);\r
- _currentElementType === 1 && aValueElm.update( a);\r
- wValueElm.update( w);\r
- hValueElm.update( h);\r
- _currentElementType === 0 && wPercentElm.update( wPercent);\r
- _currentElementType === 0 && hPercentElm.update( hPercent); \r
+ elmValueX.update( x);\r
+ elmValueY.update( y);\r
+ elmValueZ.update( z);\r
+ _elementType === 1 && elmValueA.update( a);\r
+ elmValueW.update( w);\r
+ elmValueH.update( h);\r
+ _elementType === 0 && elmPercentW.update( wPercent);\r
+ _elementType === 0 && elmPercentH.update( hPercent); \r
} else {\r
\r
}\r
$.ajax({\r
url: 'help/jp.xml',\r
dataType: 'xml',\r
- success: function( xml){\r
- var jqXML = $( xml),\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
currentIsTextElement = false,\r
currentControler = null,\r
currentElement = null,\r
- x, y, w, h, angle, flipV, flipH, \r
- RESIZER = ( function( HIT_AREA){\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;\r
- elmResizerContainerStyle.display = 'none';\r
- return {\r
- x: function(){ return x;},\r
- y: function(){ return y;},\r
- w: function(){ return w;},\r
- h: function(){ return h;},\r
- update: function( _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
- index: function( _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
- }\r
- return -1;\r
- },\r
- flip: function( _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
- return currentIndex;\r
- },\r
- show: function(){\r
- elmResizerContainerStyle.display = '';\r
- },\r
- hide: function(){\r
- elmResizerContainerStyle.display = 'none';\r
- }\r
- }\r
- })( HIT_AREA),\r
- TAIL_MOVER = ( function(){\r
- var ELM_MOVER = document.getElementById( 'balloon-tail-mover'),\r
- SIZE = h2c.util.getElementSize( ELM_MOVER).width,\r
- SIN = Math.sin,\r
- COS = Math.cos,\r
- ATAN = Math.atan,\r
- FLOOR = Math.floor,\r
- DEG_TO_RAD = Math.PI / 180,\r
- RAD_TO_DEG = 1 /DEG_TO_RAD,\r
- currentText = null,\r
- x, y, w, h, a, radA,\r
- visible = false;\r
- \r
- function draw( _w, _h, _a){\r
- w = _w !== undefined ? _w : w;\r
- h = _h !== undefined ? _h : h;\r
- a = _a !== undefined ? _a : a;\r
- radA = a *DEG_TO_RAD;\r
- x = FLOOR( ( ( COS( radA) /2 +0.5) *( w +SIZE)) -SIZE /2);\r
- y = FLOOR( ( ( SIN( radA) /2 +0.5) *( h +SIZE)) -SIZE /2);\r
- ELM_MOVER.style.left = x +'px';\r
- ELM_MOVER.style.top = y +'px';\r
- log.html( [ w, h, a].join());\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
- hide: function(){\r
- ELM_MOVER.style.visibility = 'hidden';\r
- currentText = null;\r
- },\r
- hitTest: function( _mouseX, _mouseY){\r
- var _x = x -SIZE /2,\r
- _y = y -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
- onDrag: function( _mouseX, _mouseY){\r
- draw( 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( a);\r
- updateInfomation( undefined, undefined, undefined, a);\r
- }\r
- }\r
- })(),\r
+ x, y, w, h, 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
}\r
})(),\r
TAIL_CONTROLER = ( function(){\r
- var startA;\r
+ var ELM_MOVER = document.getElementById( 'balloon-tail-mover'),\r
+ SIZE = h2c.util.getElementSize( ELM_MOVER).width,\r
+ SIN = Math.sin,\r
+ COS = Math.cos,\r
+ ATAN = Math.atan,\r
+ 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
+ \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
+ }\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
return {\r
- onStart: function( _mouseX, _mouseY){\r
- if( TAIL_MOVER.hitTest( _mouseX -x, _mouseY -y) === true){\r
- startA = currentElement.angle();\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 -x, _mouseY -y) === 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
- TAIL_MOVER.onDrag( _mouseX -x -w /2, _mouseY -y -h /2); //Balloonの中心を0,0とする座標系に変換\r
+ _mouseX = _mouseX -currentText.x -w /2;\r
+ _mouseY = _mouseY -currentText.y -h /2; //Balloonの中心を0,0とする座標系に変換\r
+ \r
+ draw( 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
+ updateInfomation( undefined, undefined, undefined, balloonA);\r
},\r
onFinish: function(){\r
- if( startA === currentElement.angle()) return;\r
- saveComicElementStatus( x, y, w, h, startA);\r
+ startA !== currentText.angle() && saveComicElementStatus( x, y, w, h, startA);\r
+ currentText = null;\r
},\r
onCancel: function(){\r
resize( undefined, undefined, undefined, undefined, startA);\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
+ 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: 1, w: -1, y: 0, h: 1}, //bottom-left\r
{ x: 0, w: 1, y: 0, h: 1} //bottom-right\r
],\r
- currentResizerIndex = -1,\r
startX, startY, startW, startH, startFilpV, startFilpH, startAspect,\r
baseX, baseY, baseW, baseH,\r
currentX, currentY, currentW, currentH,\r
transX, transY, transW, transH,\r
- xOffset, yOffset;\r
+ 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
+ \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
+ transX = _x !== undefined ? _x : currentX;\r
+ transY = _y !== undefined ? _y : currentY;\r
+ transW = _w !== undefined ? _w : currentW;\r
+ transH = _h !== undefined ? _h : currentH;\r
\r
- if( currentIsTextElement === false && currentResizerIndex > 3 && h2c.key.shiftEnabled() === true){\r
+ if( currentIsTextElement === false && currentIndex > 3 && h2c.key.shiftEnabled() === true){\r
if( startAspect >= 1){\r
- var __w = _w;\r
- _w = Math.floor( startAspect * _h);\r
- _x += currentResizerIndex % 2 === 0 ? __w -_w : 0;\r
+ _w = transW;\r
+ transW = Math.floor( startAspect * transH);\r
+ transX = transX +( currentIndex % 2 === 0 ? _w -transW : 0);\r
} else {\r
- var __h = _h;\r
- _h = Math.floor( _w / startAspect);\r
- _y += currentResizerIndex <= 5 ? __h -_h : 0;\r
+ _h = transH;\r
+ transH = Math.floor( transW / startAspect);\r
+ transY = transY + ( currentIndex <= 5 ? _h -transH : 0);\r
}\r
}\r
- transX = _x;\r
- transY = _y;\r
- transW = _w;\r
- transH = _h;\r
- RESIZER.update( _x, _y, _w, _h);\r
- currentElement.resize( _x, _y, _w, _h);\r
- currentIsTextElement === true && TAIL_MOVER.update( _w, _h);\r
- COMIC_ELEMENT_CONSOLE.show( currentElement, _w, _h);\r
- updateInfomation( _x, _y, undefined, undefined, _w, _h);\r
+ draw( transX, transY, transW, transH);\r
+ currentElement.resize( transX, transY, transW, transH);\r
+ currentIsTextElement === true && TAIL_CONTROLER.update( transW, transH);\r
+ COMIC_ELEMENT_CONSOLE.show( currentElement, transW, transH);\r
+ updateInfomation( transX, transY, undefined, undefined, transW, transH);\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
+ }\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
- \r
return {\r
- onStart: function( _mouseX, _mouseY){\r
- if( currentElement.keepSize === true) return false;\r
- currentResizerIndex = RESIZER.index( _mouseX, _mouseY);\r
- if( currentResizerIndex === -1) return false;\r
+ 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;\r
- startY = baseY = y;\r
- startW = baseW = w;\r
- startH = baseH = h;\r
+ startX = baseX = _currentElement.x;\r
+ startY = baseY = _currentElement.y;\r
+ startW = baseW = _currentElement.w;\r
+ startH = baseH = _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[ currentResizerIndex],\r
+ var com = RESIZE_WORK_ARRAY[ currentIndex],\r
moveX = _mouseX -xOffset,\r
moveY = _mouseY -yOffset,\r
_x = baseX +moveX *com.x,\r
_w = baseW +moveX *com.w,\r
_h = baseH +moveY *com.h,\r
_updated = moveX !== 0 || moveY !== 0;\r
-\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( currentIsTextElement === true){\r
- \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, __y;\r
+ var __x = 0,\r
+ __y = 0;\r
if( _w < -MIN_OBJECT_SIZE && _h > MIN_OBJECT_SIZE){\r
// flipH\r
__x = _x;\r
baseY = _y;\r
baseW = _w = __x -_x;\r
baseH = _h;\r
- currentElement.flip( false, true);\r
- currentResizerIndex = RESIZER.flip( false, true);\r
+ flip( false, true);\r
flipV = currentElement.flipV();\r
} else \r
if( _w > MIN_OBJECT_SIZE && _h < -MIN_OBJECT_SIZE){\r
baseY = _y = _y +_h;\r
baseW = _w;\r
baseH = _h = __y -_y;\r
- currentElement.flip( true, false);\r
- currentResizerIndex = RESIZER.flip( true, false);\r
+ flip( true, false);\r
flipH = currentElement.flipH();\r
} else {\r
// flipVH\r
baseY = _y = _y +_h;\r
baseW = _w = __x -_x;\r
baseH = _h = __y -_y;\r
- currentElement.flip( true, true);\r
- currentResizerIndex = RESIZER.flip( true, true);\r
+ flip( true, true);\r
flipV = currentElement.flipV();\r
flipH = currentElement.flipH();\r
}\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
+ 'trans', transY, transH,\r
+ 'err', error\r
+ ].join( ' , '));\r
},\r
onFinish: function(){\r
MOUSE_CURSOR( '');\r
}\r
})(),\r
POSITION_CONTROLER = ( function(){\r
- var startX, startY,\r
+ var currentElement,\r
+ startX, startY,\r
currentX, currentY,\r
xOffset, yOffset,\r
isCopy = false;\r
function update( _x, _y){\r
_x = currentX = _x !== undefined ? _x : currentX;\r
_y = currentY = _y !== undefined ? _y : currentY;\r
- RESIZER.update( _x, _y);\r
+ RESIZE_CONTROLER.update( _x, _y);\r
currentElement.resize( _x, _y);\r
updateInfomation( _x, _y); \r
}\r
\r
return {\r
- onStart: function( _mouseX, _mouseY){\r
+ onStart: function( _currentElement, _mouseX, _mouseY){\r
+ currentElement = _currentElement;\r
xOffset = _mouseX;\r
yOffset = _mouseY;\r
startX = currentX = x;\r
h = _h !== undefined ? _h : h;\r
angle = _angle !== undefined ? _angle : angle;\r
\r
- RESIZER.update( x, y, w, h);\r
- currentIsTextElement === true && TAIL_MOVER.update( w, h, angle);\r
+ RESIZE_CONTROLER.update( x, y, w, h);\r
+ currentIsTextElement === true && TAIL_CONTROLER.update( w, h, angle);\r
COMIC_ELEMENT_CONSOLE.show( currentElement, w, h);\r
updateInfomation( x, y, currentElement.z, angle, w, h);\r
}\r
);\r
}\r
function show( _currentElement){\r
- currentElement === null && RESIZER.show();\r
+ currentElement === null && RESIZE_CONTROLER.show( _currentElement);\r
if( currentElement !== _currentElement){\r
currentElement = _currentElement;\r
\r
currentIsTextElement = ( _currentElement.type === COMIC_ELEMENT_TYPE_TEXT);\r
- currentIsTextElement === true ? TAIL_MOVER.show( _currentElement) : TAIL_MOVER.hide();\r
+ currentIsTextElement === true ? TAIL_CONTROLER.show( _currentElement) : TAIL_CONTROLER.hide();\r
\r
flipV = currentIsTextElement === false ? _currentElement.flipV() : 0;\r
flipH = currentIsTextElement === false ? _currentElement.flipH() : 0;\r
}\r
}\r
function hide(){\r
- currentElement !== null && RESIZER.hide();\r
+ currentElement !== null && RESIZE_CONTROLER.hide();\r
currentElement = null;\r
MOUSE_CURSOR( '');\r
- TAIL_MOVER.hide();\r
+ TAIL_CONTROLER.hide();\r
COMIC_ELEMENT_CONSOLE.hide();\r
updateInfomation();\r
}\r
},\r
onMouseDown: function( _currentElement, _mouseX, _mouseY){\r
//show( _currentElement);\r
- if( currentIsTextElement === true && TAIL_CONTROLER.onStart( _mouseX, _mouseY) === true){\r
+ if( currentIsTextElement === true && TAIL_CONTROLER.onStart( _currentElement, _mouseX, _mouseY) === true){\r
currentControler = TAIL_CONTROLER;\r
} else\r
- if( RESIZE_CONTROLER.onStart( _mouseX, _mouseY) === true){\r
+ if( RESIZE_CONTROLER.onStart( _currentElement, _mouseX, _mouseY) === true){\r
currentControler = RESIZE_CONTROLER;\r
} else {\r
- POSITION_CONTROLER.onStart( _mouseX, _mouseY)\r
+ POSITION_CONTROLER.onStart( _currentElement, _mouseX, _mouseY)\r
currentControler = POSITION_CONTROLER;\r
}\r
},\r
currentControler.onDrag( _mouseX, _mouseY); \r
} else {\r
currentElement && COMIC_ELEMENT_CONSOLE.onMouseMove( _mouseX -x, _mouseY -y);\r
- TAIL_MOVER.hitTest( _mouseX -x, _mouseY -y) === false && RESIZER.index( _mouseX, _mouseY) === -1 && MOUSE_CURSOR( '');\r
+ TAIL_CONTROLER.hitTest( _mouseX -x, _mouseY -y) === false && RESIZE_CONTROLER.index( _mouseX, _mouseY) === -1 && MOUSE_CURSOR( '');\r
}\r
},\r
onMouseUp: function( _currentElement, _mouseX, _mouseY){\r
isXHTML !== true ? '>' : ' \/>'\r
].join( '');\r
},\r
- getAsJson: function(){\r
- \r
+ getAsJsonString: function(){\r
+ var cr = h2c.LINE_FEED_CODE_TEXTAREA;\r
+ return [\r
+ '"new', this.timing, '": {', cr,\r
+ '"resource_picture_id": "', url, '",', cr,\r
+ '"x": ', x, ',', cr,\r
+ '"y": ', y, ',', cr,\r
+ '"z": ', z, ',', cr,\r
+ '"w": ', w, ',', cr,\r
+ '"h": ', h, ',', cr,\r
+ '"flipv": ', flipV === true ? 1 : 0, ',', cr,\r
+ '"fliph": ', flipH === true ? 1 : 0, ',', cr,\r
+ '"t": ', this.timing, cr,\r
+ '}'\r
+ ].join( '');\r
},\r
destroy: function(){\r
reversibleImage.destroy();\r
\r
},\r
getAsJsonString: function(){\r
- \r
+ var cr = h2c.LINE_FEED_CODE_TEXTAREA;\r
+ return [\r
+ '"new', this.timing, '": {', cr,\r
+ '"balloon_template_id": ', 1, ',', cr,\r
+ '"resource_picture_id": ', 1, ',', cr,\r
+ '"border": ', 1, ',', cr,\r
+ '"tail": ', a, ',', cr,\r
+ '"x": ', x, ',', cr,\r
+ '"y": ', y, ',', cr,\r
+ '"z": ', z, ',', cr,\r
+ '"w": ', w, ',', cr,\r
+ '"h": ', h, ',', cr,\r
+ '"t": ', this.timing, ',', cr,\r
+ '"speaches_attributes": {', cr,\r
+ '"newf', this.timing, '": {', cr,\r
+ '"content": "', text, '",', cr,\r
+ '"x": ', x, ',', cr,\r
+ '"y": ', y, ',', cr,\r
+ '"w": ', w, ',', cr,\r
+ '"h": ', h, cr,\r
+ '}', cr,\r
+ '}', cr,\r
+ '}'\r
+ ].join( '');\r
},\r
getAsHTML: function( isAbsoluteUrl, isXHTML){\r
var url = XBROWSER_BALLOON.getURL();\r
});\r
},\r
getAsHTML: function( isAbsoluteUrl, isXHTML){\r
- var HTML_CONTAINER = [],\r
+ var HTML_ARRAY = [],\r
l = DRAGGABLE_ELEMENT_ARRAY.length,\r
_timing = 0,\r
_comicElement;\r
\r
- while( HTML_CONTAINER.length < l -NUM_RESIZER){\r
+ while( HTML_ARRAY.length < l -NUM_RESIZER){\r
_comicElement = getComicElementByTiming();\r
if( _comicElement === null) break;\r
- HTML_CONTAINER.push( _comicElement.getAsHTML( isAbsoluteUrl, isXHTML));\r
+ HTML_ARRAY.push( _comicElement.getAsHTML( isAbsoluteUrl, isXHTML));\r
}\r
function getComicElementByTiming(){\r
while( _timing < l *2){\r
}\r
return null;\r
}\r
- HTML_CONTAINER.unshift(\r
+ HTML_ARRAY.unshift(\r
[\r
'<div class="panel" ',\r
'style="',\r
'>'\r
].join( '')\r
); \r
- HTML_CONTAINER.push( '</div>');\r
+ HTML_ARRAY.push( '</div>');\r
\r
- return HTML_CONTAINER.join( h2c.LINE_FEED_CODE_TEXTAREA);\r
+ return HTML_ARRAY.join( h2c.LINE_FEED_CODE_TEXTAREA);\r
+ },\r
+ getAsJsonString: function(){\r
+ var JSON_STRING_ARRAY = [],\r
+ IMAGE_ARRAY = [],\r
+ BALLOON_ARRAY = [],\r
+ l = DRAGGABLE_ELEMENT_ARRAY.length,\r
+ _timing = 0,\r
+ _comicElement,\r
+ cr = h2c.LINE_FEED_CODE_TEXTAREA;\r
+ \r
+ while( IMAGE_ARRAY.length + BALLOON_ARRAY.length < l -NUM_RESIZER){\r
+ _comicElement = getComicElementByTiming();\r
+ if( _comicElement === null) break;\r
+ _comicElement.type === COMIC_ELEMENT_TYPE_IMAGE ? \r
+ IMAGE_ARRAY.push( _comicElement.getAsJsonString()) :\r
+ BALLOON_ARRAY.push( _comicElement.getAsJsonString());\r
+ }\r
+ function getComicElementByTiming(){\r
+ while( _timing < l *2){\r
+ for(var i=NUM_RESIZER; i<l; ++i){\r
+ if( _timing === DRAGGABLE_ELEMENT_ARRAY[ i].timing){\r
+ ++_timing;\r
+ return DRAGGABLE_ELEMENT_ARRAY[ i];\r
+ }\r
+ }\r
+ ++_timing;\r
+ }\r
+ return null;\r
+ }\r
+ return [\r
+ '{', cr,\r
+ '"panel": {', cr,\r
+ '"border": 1,', cr,\r
+ '"comic_id": 5,', cr,\r
+ '"resource_picture_id": 1,', cr,\r
+ '"width": ', canvasW, ',', cr,\r
+ '"height": ', canvasH, ',', cr,\r
+ '"panel_pictures_attributes": {', cr,\r
+ IMAGE_ARRAY.join( ',' +cr), cr,\r
+ '},', cr,\r
+ '"balloons_attributes": {', cr,\r
+ BALLOON_ARRAY.join( ',' +cr), cr,\r
+ '}', cr,\r
+ '}', cr,\r
+ '}'\r
+ ].join( '');\r
}\r
}\r
})( resize);\r
createTextElement: function( type, angle, text, x, y, w, h, z){\r
COMIC_ELEMENT_CONTROL.createTextElement( type, angle, text, x, y, w, h, z);\r
},\r
- getAsHTML: COMIC_ELEMENT_CONTROL.getAsHTML\r
+ getAsHTML: COMIC_ELEMENT_CONTROL.getAsHTML,\r
+ getAsJsonString: COMIC_ELEMENT_CONTROL.getAsJsonString\r
}\r
})();\r
\r
function updateMouseCursor( _cursor){\r
if( currentCursor !== _cursor){\r
currentCursor = _cursor;\r
- ELM_MOUSE_EVENT_CHATCHER.style.cursor = _cursor;\r
+ setTimeout(\r
+ function(){\r
+ ELM_MOUSE_EVENT_CHATCHER.style.cursor = _cursor;\r
+ }, 0\r
+ );\r
}\r
}\r
function centering(){\r
* キャラクター画像庫 > アニマル系 > tag:ペン次郎 > ペン次郎:笑う\r
* 風景画像庫 >\r
* 効果画像庫 >\r
- * アイテム画像庫 >\r
+ * アイテム画像庫 >\r
* \r
* 画像一覧を読み込むタイミング\r
*/\r