* author:\r
* itozyun\r
* licence:\r
- * BSD\r
+ * new BSD\r
*\r
* \r
* ----------------------------------------\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
document.body.appendChild( ret);\r
return ret;\r
})(),\r
- CLEAN_TARGET_ELEMENT = 'script,style,object,applet,embed,iframe,frame'.split( ',');\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
+ for(i=0; i<l; ++i){\r
+ elm = elms[ i];\r
+ elm.style.filter = '';\r
+ elm.style.behavior = '';\r
+ }\r
},\r
getElementSize: function( _elm){\r
if( !_elm){\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
key = e.keyCode,\r
overlayEnabled = h2c.overlay.visible === true,\r
currentViewID = overlayEnabled === true ? h2c.overlay.currentID : h2c.view.currentID;\r
- if( callback === 'keydown' && EDITABLE_TEXT_CONTROL.keyEventRellay( e) === false){\r
- \r
+ if( callback === 'keyup' || EDITABLE_TEXT_CONTROL.keyEventRellay( e) === false){\r
var shift = e.shiftKey,\r
ctrl = e.ctrlKey,\r
l = KEYEVENT_ARRAY.length,\r
d;\r
\r
- shiftEnabled = e.shiftKey;\r
- ctrlEnabled = e.ctrlKey; \r
+ shiftEnabled = callback !== 'keyup' ?\r
+ e.shiftKey :\r
+ key !== 16 ? shiftEnabled : false;\r
+ ctrlEnabled = callback !== 'keyup' ?\r
+ e.ctrlKey :\r
+ key !== 17 ? ctrlEnabled : false;; \r
\r
for( var i=0; i<l; i++){\r
d = KEYEVENT_ARRAY[ i];\r
( d.ctrl === undefined || d.ctrl === ctrl)\r
){\r
( function( func, e){\r
- setTimeout( function(){ func( e)}, 0);\r
- })( d[callback], e)\r
+ func && setTimeout( function(){\r
+ func( e);\r
+ func = e = null;\r
+ }, 0);\r
+ })( d[callback], e);\r
cancel = true;\r
}\r
}\r
* ie5.5-8\r
* \r
* 内部の角度計算は radian で統一したい。\r
- * 当初 vectorEnabled = true で一度書いてみる。\r
+ * 当初 vectorEnabled = true で一度書いてみる。\r
* 駄目なら、代替のイメージのsrcの用意もここで担当。\r
* 閲覧と編集両方で使う。\r
* \r
return null;\r
}\r
})(),\r
- vectorEnabled = ELM_BALLOON_ORIGIN !== null;\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
- return 'url'//\r
+ var d = 360 /NUM_BALLOON_IMAGE;\r
+ _a += 90 +d /2;\r
+ return [ 'balloon\/_w', _a < 360 -d /2 ? floor( _a /d) : 0, '.gif'].join( '');\r
}\r
return {\r
elm: balloonElm,\r
resize: draw,\r
angle: function( _a){\r
- if( _a && _a !== a){\r
- draw( _a);\r
- }\r
+ _a !== undefined && _a !== a &&\r
+ vectorEnabled === false ? balloonUrlBuilder( _a) : draw( _a);\r
+ return a;\r
},\r
type: function( _type){\r
//draw( _a);\r
},\r
+ getURL: function(){\r
+ return balloonUrlBuilder( a);\r
+ },\r
destroy: function(){\r
- balloonElm.parentNode.removeChild( balloonElm);\r
+ balloonElm.parentNode && balloonElm.parentNode.removeChild( balloonElm);\r
balloonElm = null;\r
delete this.destroy;\r
}\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);\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
function onLoad( _url, _actualW, _actualH){\r
if( elmWrap === null) return;\r
elmImg = new Image;\r
- elmImg.src = url;\r
- elmWrap.appendChild( elmImg); // load後にimg\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
* a\r
* span\r
* kbd shortcut\r
- * li.separator\r
*/\r
var MENU_BAR_CONTROL = ( function(){\r
var BAR_ID = 'menu-bar',\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
}\r
\r
- var MenuBarItemClass = function( title){\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
INDEX = ITEM_ARRAY.length,\r
- SELECTION_CALLBACK_ARRAY = [],\r
+ SELECTION_CALLBACK_ARRAY = opt_callbackArray || [],\r
numSelection = 0,\r
visible = false;\r
ELM_TITLE.innerHTML = title;\r
return false; \r
}\r
return {\r
+ elm: ELM_WRAPPER,\r
+ onClick: onClick,\r
init: function(){\r
$( ELM_SELECTION).children( 'li').click( onClick);\r
delete this.init;\r
ret.elm.style.borderTop = '1px solid #ccc';\r
}\r
return ret;\r
- },\r
- createAjaxSelection: function(){\r
- var elmLoading = document.createElement( 'li');\r
- elmLoading.className = 'loading';\r
- elmLoading.style.height = '90px';\r
- ELM_SELECTION.appendChild( elmLoading);\r
- \r
- delete this.createAjaxSelection;\r
- return function(){\r
- SELECTION_CALLBACK_ARRAY.shift();\r
- ELM_SELECTION.removeChild( elmLoading);\r
- elmLoading = null;\r
- $( ELM_SELECTION).children( 'li').click( onClick);\r
- }\r
}\r
}\r
}\r
\r
delete MENU_BAR_CONTROL.init;\r
},\r
+ h: barH,\r
onMouseMove: function( _mouseX, _mouseY){\r
if( barH >= _mouseY){\r
return true;\r
EDIT: createMenubarItem( 'Edit'),\r
WINDOW: createMenubarItem( 'Window'),\r
HELP: h2c.util.extend( createMenubarItem( 'Help'), {\r
- \r
- }) // extend, onShow, ajaxselection, HELP_DOCUMENTS_CONTROL.load()\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
var state = STACK_BACK.pop();\r
state && state.fn( state.argBack);\r
MENUBAR_BACK.visible( STACK_BACK.length !== 0);\r
+ SAVE_CONTROL.panelUpdated( STACK_BACK.length !== 0);\r
\r
STACK_FORWARD.push( state);\r
MENUBAR_FORWARD.visible( true);\r
\r
STACK_BACK.push( state);\r
MENUBAR_BACK.visible( true);\r
+ SAVE_CONTROL.panelUpdated( true);\r
}\r
return {\r
init: function(){\r
destroy: _destroy\r
});\r
MENUBAR_BACK.visible( true);\r
+ SAVE_CONTROL.panelUpdated( true);\r
\r
while( STACK_FORWARD.length > 0){\r
_argBack = _stack.argBack;\r
\r
\r
/* ----------------------------------------\r
- * HELP_DOCUMENTS_CONTROL\r
- * * menubar の help 下に help documents の index を挿入\r
- * * help window に help documents を挿入\r
+ * Save Control\r
*/\r
- var HELP_DOCUMENTS_CONTROL = ( function(){\r
- var onLoadFunction = MENU_BAR_CONTROL.HELP.createAjaxSelection();\r
+\r
+ var SAVE_CONTROL = ( function(){\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 quit(){\r
+ }\r
+ \r
+ function outputAsHtml(){\r
+ alert( CANVAS_CONTROL.getAsHTML( true, false));\r
+ }\r
+ function outputAsJsonString(){\r
+ alert( CANVAS_CONTROL.getAsJsonString());\r
+ }\r
return {\r
- load: function(){\r
- // HELP_DOCUMENTS_WINDOW.setAjaxContent();\r
- var help = MENU_BAR_CONTROL.HELP;\r
- //help.createSelection();\r
- //onLoadFunction();\r
+ quit: quit,\r
+ panelUpdated: function( _updated){\r
+ if( _updated !== undefined && updated !== _updated){\r
+ SAVE.visible( !!_updated);\r
+ SAVE_AND_QUIT.visible( !!_updated);\r
+ updated = !!_updated;\r
+ }\r
+ return updated;\r
+ },\r
+ save: function(){\r
+ \r
}\r
}\r
})();\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
- setInstance: function(){\r
- instance = this;\r
- delete this.setInstance;\r
- },\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
jqStage = jqEditor;\r
this.$ = jqWrapper = jqWindowOrigin.clone( true);\r
jqHeader = jqWrapper.children( '.window-header').eq( 0).html( title);\r
}\r
CLOSE_BUTTON_ENABLED !== true && jqWrapper.find( '.window-close-button').remove();\r
\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
- } else {\r
- jqWrapper.find( '.window-resize-button').remove();\r
- }\r
- update( x, y, w, h);\r
this.onInit && this.onInit();\r
delete this.init;\r
},\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
+ } else {\r
+ jqWrapper.find( '.window-resize-button').remove();\r
+ }\r
+ update( x, y, w, h);\r
+ \r
+ this.onFirstOpen && this.onFirstOpen();\r
+ \r
+ delete this.firstOpen;\r
+ },\r
open: function(){\r
if( visible === true) return;\r
- this.visible = visible = true;\r
- this.onOpen && setTimeout( this.onOpen, 0);\r
- openWindow( this);\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
currentWindowIndex = -1;\r
for( var i=0; i<l; i++){\r
_win = WINDOW_ARRAY[ i];\r
+ if( _win.visible !== true) continue;\r
_x = _win.x();\r
_y = _win.y();\r
if( _x <= _mouseX && _y <= _mouseY && _x +_win.w() >= _mouseX && _y +_win.h() >= _mouseY){\r
}\r
function openWindow( _window){\r
if( _window.visible !== true) return;\r
- WINDOW_ARRAY.unshift( _window);\r
- WINDOWS_CONTROL.init === undefined &&\r
- ( _window.init === undefined ?\r
- jqContainer.append( _window.$.stop().fadeIn()) :\r
- _window.init( jqContainer)\r
- );\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
+ 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.splice( i, 1);\r
+ //WINDOW_ARRAY.push( _window);\r
_window.$.stop().fadeOut( function(){\r
this.parentNode.removeChild( this);\r
});\r
_window;\r
for( var i=l-1; i >= 0; --i){\r
_window = WINDOW_ARRAY[ i];\r
- _window.visible === true && _window.init && _window.init( jqContainer);\r
+ _window.init && _window.init( jqContainer);\r
+ _window.visible === true && openWindow( _window);\r
}\r
log = $( '#window-log');\r
\r
WindowClass.apply( scope, [ bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH]),\r
EXTENDS\r
);\r
- _window.setInstance();\r
- opt_visible === true && openWindow( _window);\r
+ WINDOW_ARRAY.unshift( _window);\r
+ WINDOWS_CONTROL.init === undefined && _window.init( jqContainer);\r
+ WINDOWS_CONTROL.init === undefined && openWindow( _window);\r
return _window;\r
}\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
h2c.key.addKeyDownEvent( h2c.view.EDITOR, 71, false, true, switchGrid);\r
MENU_BAR_CONTROL.EDIT.createSelection( 'show Grid', 'ctrl + G', switchGrid, true, true, true);\r
\r
- function addImage(){\r
- setTimeout( function(){ CANVAS_CONTROL.createImageElement();}, 0); \r
+ function addImage( e){\r
+ setTimeout( CANVAS_CONTROL.createImageElement, 0);\r
+ e && e.preventDefault();\r
+ return false;\r
}\r
- function addText(){\r
- setTimeout( function(){ CANVAS_CONTROL.createTextElement();}, 0); \r
+ function addText( e){\r
+ setTimeout( CANVAS_CONTROL.createTextElement, 0);\r
+ e && e.preventDefault();\r
+ return false;\r
}\r
- function switchGrid(){\r
+ function switchGrid( e){\r
setTimeout( gridSwitchFunction, 0);\r
+ e && e.preventDefault();\r
+ return false;\r
+ }\r
+ function popupHelp( e){\r
+ instance.bodyBackOrForward( true);\r
+ setTimeout( HELP_DOCUMENTS_WINDOW.open, 0); // setTimeout で囲むと window が開かない\r
+ e && e.preventDefault();\r
+ return false;\r
}\r
- function popupHelp(){\r
- setTimeout( function(){ HELP_DOCUMENTS_WINDOW.open();}, 0); \r
+ function editBG( e){\r
+ instance.bodyBackOrForward( true);\r
+ setTimeout( INFOMATION_WINDOW.open, 0); \r
+ e && e.preventDefault();\r
+ return false;\r
}\r
\r
return WINDOWS_CONTROL.createWindow(\r
this,\r
{\r
onInit: function(){\r
- addImageButton = $( '#toolbox-add-image-button').click( function(e){\r
- addImage();\r
- e.preventDefault();\r
- return false;\r
- });\r
-\r
- addTextButton = $( '#toolbox-add-text-button').click( function(e){\r
- addText();\r
- e.preventDefault();\r
- return false;\r
- });\r
- \r
- editBgButton = $( '#toolbox-edit-bg-button').click( function( e){\r
- setTimeout( function(){\r
- INFOMATION_WINDOW.open();\r
- }, 0); \r
- e.preventDefault();\r
- return false;\r
- });\r
- \r
- switchGridButton = $( '#toolbox-switch-grid').click( function( e){\r
- switchGrid();\r
- e.preventDefault();\r
- return false;\r
- });\r
- \r
- popupHelpButton = $( '#toolbox-popup-help-button').click( function( e){\r
- popupHelp();\r
- e.preventDefault();\r
- return false;\r
- });\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
+ 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.onInit;\r
+ delete this.onFirstOpen;\r
},\r
setGridSwitchFunction: function( _gridSwitchFunction){\r
gridSwitchFunction = _gridSwitchFunction || gridSwitchFunction;\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
return WINDOWS_CONTROL.createWindow(\r
this,\r
{\r
- onInit: function(){\r
+ onFirstOpen: function(){\r
backgroundInfomationElm = $( '#panel-background-information');\r
\r
jqComicElementInformation = $( '#comic-element-infomation').hide().css( {\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
- delete this.onInit;\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
jqComicElementInformation && jqComicElementInformation.css( {\r
height: this.bodyHeight()\r
});\r
},\r
- update: function( _currentElementType, x, y, z, a, w, h, wPercent, hPercent, keepAspect){\r
- if( currentElementType !== _currentElementType){\r
- if( _currentElementType !== -1){\r
- if( _currentElementType === 1){\r
- aValueElm.show();\r
- wPercentElm.hide();\r
- hPercentElm.hide();\r
- aspectElm.hide();\r
+ 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
hasAjaxContents = false,\r
jqAjaxContents,\r
jqNaviItems,\r
- jqPages;\r
+ jqPages,\r
+ HELP = MENU_BAR_CONTROL.HELP,\r
+ onLoadFunction = HELP.createAjaxSelection( onFirstOpen),\r
+ instance;\r
function jumpPage( _index){\r
\r
}\r
- function onOpen( _pageIndex){\r
+ function onFirstOpen( _pageIndex){\r
_pageIndex = _pageIndex || 0;\r
if( hasAjaxContents === false){\r
$.ajax({\r
url: 'help/jp.xml',\r
dataType: 'xml',\r
- success: function( xml){\r
- var elmNavi = document.createElement( 'DIV'),\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
- elmPage;\r
+ elmPage,\r
+ numPage = 0;\r
elmNavi.className = 'sidenavi';\r
elmItemOrigin.className = 'sidenavi-item';\r
elmItemOrigin.href = '#';\r
elmPageOrigin.className = 'page-content';\r
elmPageOrigin.appendChild( elmTitleOrigin);\r
\r
- $( xml).find( 'page').each( function(){\r
+ // helpTitle && instance.title( helpTitle);\r
+ \r
+ jqXML.find( 'page').each( function(){\r
var xmlPage = $( this),\r
title = xmlPage.attr( 'title'),\r
content = xmlPage.text();\r
elmPage.appendChild( elmTitleOrigin.cloneNode( true));\r
}\r
elmPages.appendChild( elmPage);\r
+ \r
+ HELP.createSelection( title, null, ( function( _pageIndex){\r
+ return function(){\r
+ HELP_DOCUMENTS_WINDOW.open();\r
+ onOpen( _pageIndex); \r
+ }\r
+ })( numPage), true);\r
+ ++numPage;\r
});\r
- jqAjaxContents.append( elmNavi, elmPages);\r
+ onLoadFunction();\r
+ onLoadFunction = null;\r
+ \r
+ jqAjaxContents.removeClass( 'loading').append( elmNavi, elmPages);\r
\r
- jqNaviItems = jqAjaxContents.removeClass( 'loading')\r
- .find( 'a.' +elmItemOrigin.className)\r
+ jqNaviItems = jqAjaxContents.find( 'a.' +elmItemOrigin.className)\r
.click( function( e){\r
var that = this,\r
parent = this.parentNode,\r
}\r
});\r
hasAjaxContents = true;\r
- } else {\r
+ }\r
+ function onOpen( _pageIndex){\r
+ _pageIndex = _pageIndex || 0;\r
jqNaviItems.removeClass( 'current').eq( _pageIndex).addClass( 'current');\r
jqPages.hide().eq( _pageIndex).show();\r
}\r
this,\r
{\r
onInit: function(){\r
+ instance = this;\r
jqAjaxContents = this.$.find( '.window-body').addClass( 'loading').css( { height: this.bodyHeight()});\r
- onOpen( 0);\r
delete this.onInit;\r
},\r
+ onFirstOpen: onFirstOpen,\r
onResize: function( w, h){\r
jqAjaxContents && jqAjaxContents.css( { height: this.bodyHeight()});\r
},\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
- \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 ? 0 : 180\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
- // resize( x, y, w, h, currentElement.angle());\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 RESIZE_COMMAND_ARRAY = [\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: 0, w: 1, y: 0, h: 0}, //right\r
{ x: 1, w: -1, y: 0, h: 1}, //bottom-left\r
{ x: 0, w: 1, y: 0, h: 1} //bottom-right\r
],\r
- currentResizerIndex = -1,\r
startX, startY, startW, startH, startFilpV, startFilpH, startAspect,\r
baseX, baseY, baseW, baseH,\r
currentX, currentY, currentW, currentH,\r
transX, transY, transW, transH,\r
- xOffset, yOffset;\r
+ 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_COMMAND_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
[ currentElement, x, y, w, h, angle, flipV, flipH]\r
);\r
}\r
- h2c.key.addKeyUpdateEvent( h2c.view.EDITOR, 16, true, undefined, function(){\r
+ h2c.key.addKeyUpdateEvent( h2c.view.EDITOR, 16, true, undefined, function( e){\r
currentControler !== null && currentControler.onShiftUpdate && currentControler.onShiftUpdate();\r
});\r
h2c.key.addKeyUpdateEvent( h2c.view.EDITOR, 17, undefined, true, function(){\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
* // COMIC_ELEMENT_OPERATOR\r
*/\r
\r
- var AbstractComicElement = function( JQ_WAPPER, COMIC_ELM_TYPE, update, x, y, w, h, z, domIndex){\r
+ var AbstractComicElement = function( JQ_WAPPER, COMIC_ELM_TYPE, update, x, y, w, h, z, timing){\r
var OPERATOR = COMIC_ELEMENT_OPERATOR;\r
return {\r
$: JQ_WAPPER,\r
w: w,\r
h: h, \r
z: z,\r
- domIndex: domIndex,\r
+ timing: timing,\r
hitareaX: function(){ return OPERATOR.hitareaX( this, this.x);},\r
hitareaY: function(){ return OPERATOR.hitareaY( this, this.y);},\r
hitareaW: function(){ return OPERATOR.hitareaW( this, this.w);},\r
* ImageElementClass\r
*/\r
var jqImageElementOrigin;\r
- var ImageElementClass = function( url, IMAGE_SET_ID, x, y, z, w, h, domIndex){\r
+ var ImageElementClass = function( url, IMAGE_SET_ID, x, y, z, w, h, timing){\r
jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html());\r
\r
var JQ_WRAPPER = jqImageElementOrigin.clone( true),\r
reversibleImage = _reversibleImage;\r
}\r
return h2c.util.extend(\r
- AbstractComicElement.apply( this, [ JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, domIndex]),\r
+ AbstractComicElement.apply( this, [ JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, timing]),\r
{\r
init: function(){\r
instance = this;\r
flipV = _flipV !== undefined ? _flipV : flipV;\r
update( _x, _y, _w, _h, true);\r
},\r
- getAsHtml: function(){\r
- \r
+ getAsHTML: function( isAbsoluteUrl, isXHTML){\r
+ return [\r
+ '<img ',\r
+ 'src="', isAbsoluteUrl !== true ? url : h2c.util.getAbsolutePath( url), '" ',\r
+ 'width="', w, '" ',\r
+ 'height="', h, '" ',\r
+ 'style="', \r
+ 'left:', x, 'px;',\r
+ 'top:', y, 'px;',\r
+ 'z-index:', z, ';',\r
+ '"',\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
var jqTextElementOrigin;\r
- var TextElementClass = function( type, a, text, x, y, z, w, h, domIndex){\r
+ var TextElementClass = function( type, a, text, x, y, z, w, h, timing){\r
jqTextElementOrigin = jqTextElementOrigin || ( function(){\r
var _OLD_IE = $( $( '#textElementTempleteForOldIE').remove().html()),\r
_MODERN = $( $( '#textElementTemplete').remove().html());\r
}\r
\r
return h2c.util.extend(\r
- AbstractComicElement.apply( this, [ JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, domIndex]),\r
+ AbstractComicElement.apply( this, [ JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, timing]),\r
{\r
init: function(){\r
instance = this;\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
+ return [\r
+ '<img ',\r
+ 'src="', isAbsoluteUrl !== true ? url : h2c.util.getAbsolutePath( url), '" ',\r
+ 'width="', w, '" ',\r
+ 'height="', h, '" ',\r
+ 'style="', \r
+ 'left:', x, 'px;',\r
+ 'top:', y, 'px;',\r
+ 'z-index:', z, ';',\r
+ '"',\r
+ isXHTML !== true ? '>' : ' \/>',\r
+ h2c.LINE_FEED_CODE_TEXTAREA,\r
+ '<div class="balloon" style="',\r
+ 'left:', x, 'px;',\r
+ 'top:', y, 'px;',\r
+ 'width:', w, 'px;',\r
+ 'height:', h, 'px;',\r
+ 'z-index:', z,\r
+ '"><span>', text, '<\/span>', '<\/div>'\r
+ \r
+ ].join( '');\r
},\r
- getAsHTML: function(){},\r
getAsXML: function(){}\r
\r
}\r
*/\r
comicElementContainer = $( '#comic-element-container');\r
\r
- appendComicElement( ImageElementClass.apply( {}, [ 'images/13.gif', 'penchan', 10, 10, 0, 100, 140]));\r
- appendComicElement( TextElementClass.apply( {}, [ 0, 270, 'Hello', 50, 70, 1, 200, 160]));\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
x = x || Math.floor( canvasW /2 -w /2);\r
y = y || Math.floor( canvasH /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]);\r
+ var _comicElement = ImageElementClass.apply( {}, [ _url, imagesetID, x, y, z || -1, w, h, DRAGGABLE_ELEMENT_ARRAY.length -NUM_RESIZER]);\r
appendComicElement( _comicElement);\r
_comicElement.animate( undefined, undefined, _w, _h);\r
SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);\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]);\r
+ var _comicElement = TextElementClass.apply( {}, [ type, angle, text, x, y, z || -1, w, h, DRAGGABLE_ELEMENT_ARRAY.length -NUM_RESIZER]);\r
TEXT_EDITOR_CONTROL.show( _comicElement, function( _comicElement){\r
appendComicElement( _comicElement);\r
SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);\r
});\r
+ },\r
+ getAsHTML: function( isAbsoluteUrl, isXHTML){\r
+ var HTML_ARRAY = [],\r
+ l = DRAGGABLE_ELEMENT_ARRAY.length,\r
+ _timing = 0,\r
+ _comicElement;\r
+\r
+ while( HTML_ARRAY.length < l -NUM_RESIZER){\r
+ _comicElement = getComicElementByTiming();\r
+ if( _comicElement === null) break;\r
+ HTML_ARRAY.push( _comicElement.getAsHTML( isAbsoluteUrl, isXHTML));\r
+ }\r
+ function getComicElementByTiming(){\r
+ while( _timing < l *2){\r
+ for(var i=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
+ HTML_ARRAY.unshift(\r
+ [\r
+ '<div class="panel" ',\r
+ 'style="',\r
+ 'height:', canvasH, 'px;',\r
+ 'background-color:', ';',\r
+ '"',\r
+ '>'\r
+ ].join( '')\r
+ ); \r
+ HTML_ARRAY.push( '</div>');\r
+ \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
},\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
+ },\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
OSDN Git Service
