= パネルエディタについて = [[Thumb(http://static.sourceforge.jp/thumb/g/3/212/120x120_0.png, size=240x240, caption=panel editor, float=left)]] [[Thumb(http://static.sourceforge.jp/thumb/g/3/213/120x120_0.png, size=240x240, caption=finder, float=left)]] [[Thumb(http://static.sourceforge.jp/thumb/g/3/217/120x120_0.png, size=240x240, caption=Premium Stage, float=left)]] [[Thumb(http://static.sourceforge.jp/thumb/g/3/10/120x120_0.png, size=240x240, caption=panel editor, float=left)]] [[Thumb(http://static.sourceforge.jp/thumb/g/2/963/120x120_0.png, size=240x240, caption=panel editor, float=left)]] [[Thumb(http://static.sourceforge.jp/thumb/g/2/949/120x120_0.png, size=240x240, caption=panel editor, float=left)]] [[Thumb(http://static.sourceforge.jp/thumb/g/2/934/120x120_0.png, size=240x240, caption=panel editor, float=left)]] [[Thumb(http://static.sourceforge.jp/thumb/g/2/933/120x120_0.png, size=240x240, caption=reversible, float=left)]] [[BR(clear=left)]] * ぺったんR で最も込み入ったデータである、パネルの json データ制作のための GUI を提供する． * 機能をプラグインで追加できる（はず） * ぺったんR サーバと疎結合なため、サーバ管理者は好みのクライアント実装を選べる（はず） == パネルエディタを実装する人へ == * 画像・吹き出し各要素の順番(t)を入力する UI を備えなければならない．（アクセサビリティのために） * 画像素材のライセンス等を正しく扱えなければならない． == プラグインを書く人へ == * peta.apps.js 内の パネルエディターの構造を以下に示します． * system.js の理解も必要です．ClientSystem * 画像エクスプローラ（ PremiumStage ）とテキストエディタはオーバーレイアプリケーションとなります． === ぺったんR チームによる パネルエディタ実装の詳細 === * system.js から起動する application として書かれている． * パネルエディターを定義している function が new された段階では、また html 要素が生成されていない． * application.onInit() 以降 application.rootElement にアクセスできる．そのタイミングで application.rootElement.innerHTML に大量の html 要素が書き込まれる． * 上記要素には application.onOpen() 以降にアクセスするのが安全． * パネルエディターを構成する部品は多岐に渡る．そのほとんどはいわゆる js シングルトンパターンで書かれている． * 複数のインスタンスが作られる場合、.prototype を使ったクラス生成を用いる． * これはメモリ効率で有利． * 但し、全ての値が public に露出してしまう．これはグループ開発ではきつい． * そこでクロージャを使ったパターンと使い分けがいる．完全に内部で使用されるものは、値が全て public でも無問題． * しかしどこからどこまでが内部ということになるのだろう？？ * 各モジュールは、init, open, close メソッドを持つ． * init でモジュールの初期化．（ rootElement 以下にもアクセス可能 ） * open で他モジュールにもアクセスしつつ起動プロセスの完了． * close で終了処理の開始 * clean ==== MENU_BAR_CONTROL ==== ページ上部に表示されているメニューバーを扱う． * init: function() * メニュー部品のオリジナル要素を取得 * QUIT, EDIT, WINDOW, HELP という 4 つのメニューを登録 * 他のモジュールから MenuBarItemClass の createOption が呼ばるのは このあと．つまり各モジュールの .open() 以降． * open: function() * close: function() * mousemove: function( x, y ) * mouseup: function( x, y ) * mousedown: function( x, y ) * busy: boolean * onWindowResize: function( w, h ) * h: Number * メニュバーの高さ * QUIT: MenuBarItemClass * EDIT: MenuBarItemClass * WINDOW: MenuBarItemClass * HELP: MenuBarItemClass ===== MenuBarItemClass ===== MENU_BAR_CONTROL.init() 後にアクセス可能になる．他のモジュールから createOption が呼ばれる． * elm: HTMLElement * elmUL: HTMLElement * optionList: Array( MenubarOptionClass ) * show: function() * hide: function() * createOption: function( title, shortcut, callback, visible, separateBefore, separateAfter ) * _open: funciton() * _close: function() ===== MenubarOptionClass ===== * elm: HTMLElement * elmTitle: HTMLElement * callback: function * separateAfter: Boolean * title: function( _title ) * visible: function( _visible ) * _init: function( elmParent, _title, _shortcut, _visible ) * _kill: function() ==== HISTORY_CONTROL ==== もどる、進む情報を保持．もどる、進むを実行． * init: function() * KeyEvent の登録 * open: function() * MENU_BAR_CONTROL.EDIT に 戻る・進む オプションを作る． * close: function() * saveStaet: function( _function, _argBack, _argForword, _destroy ) * 内部で new StackClass する．StackClass は HISTORY_CONTROL の外から見えない． ==== SAVE_CONTROL ==== * init: functiion() * open: function() * MENU_BAR_CONTROL.QUIT に save などのオプションを作る * close: funciton() * quit: function() * panelUpdated: function( _updated ) * パネルの内容が更新された場合、save オプションを有効にする．HISTORY_CONTROL が呼び出している． * save: function ==== WINDOWS_CONTROL ==== * init: function() * windown のための htmlテンプレートを取得． * open: function() * createWindow で登録された window の init を呼び出す． * close: function() * mousemove: function( _mouseX, _mouseY ) * mouseup: function( _mouseX, _mouseY ) * mousedown: function( _mouseX, _mouseY ) * busy:Boolean * onWindowResize: function( _windowW, _windowH ) * createWindow: function( EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH ) ===== WindowClass ===== * init: function() * window の html を構築． * x: Number * y: Number * w: Number * h: Number * title: function( _title ) * visible: Boolean * firstOpen: function() * open: function() * onFadeIn: function() * close: function() * onFadeOut: function() * bodyBackOrForward: function( isBack ) * mousemove: function( _mouseX, _mouseY ) * mouseup: function( _mouseX, _mouseY ) * mousedown: function( _mouseX, _mouseY ) * mouseOut: function( _mouseX, _mouseY ) * budy: Boolean ==== TOOL_BOX_WINDOW ==== WindowClass ==== IMAGE_EXPLORER_WINDOW ==== WindowClass ==== INFOMATION_WINDOW ==== WindowClass ==== HELP_DOCUMENTS_WINDOW ==== WindowClass * onInit: function() * MENU_BAR_CONTROL.HELP.createAjaxSelection( onAjaxStart ) を呼び出す． ==== GRID_CONTROL ==== グリッドが表示されていると、パネルエレメントの配置が 10px 刻みになる． グリッド用 url の設定は初回表示のときでグリッドを一度も表示しない場合、グリッド画像へのアクセスが発生しない． * init: functiion() * elmGrid の取得 * open: function() * close: funciton() * onPanelResize: function( _panelX, _panelY ) * enabled: Boolean ==== WHITE_GLASS_CONTROL ==== * init: functiion() * elm の取得 * onPanelResize: function( _panelX, _panelY, _panelW, _panelH ) ==== PanelResizerClass ==== * mousemove: function( _mouseX, _mouseY ) * mouseup: function( _mouseX, _mouseY ) * mousedown: function( _mouseX, _mouseY ) * busy: Boolean * onPanelResize: function( _x, _y, _w, _h ) ==== PANEL_RESIZER_TOP ==== PanelResizerClass ==== PANEL_RESIZER_BOTTOM ==== PanelResizerClass ==== PANEL_CONTROL ==== パネルの枠線の表示．パネルのリサイズの通知．パネルのドラッグ． * init: function() * PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true ); * PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false ); * open: function( _panelW, _panelH, _borderSize ) * close: function() * x: Number * y: Number * w: Number * h: Number * resize: function( isResizerTopAction, _x, _y, _w, _h ) * PanelResizerClass から呼ばれる．以下のモジュールの onPaneResize をそれぞれ呼び出す． * PANEL_RESIZER_TOP.onPanelResize( _x, _y, _w, _h ); * PANEL_RESIZER_BOTTOM.onPanelResize( _x, _y, _w, _h ); * GRID_CONTROL.onPanelResize( _x, _y ); * WHITE_GLASS_CONTROL.onPanelResize( _x, _y, _w, _h ); * COMIC_ELEMENT_CONTROL.onPanelResize( _x, _y, _w, _h, isResizerTopAction === true ); * onWindowResize: function( _windowW, _windowH ) * mousemove: function( _mouseX, _mouseY ) * mouseup: function( _mouseX, _mouseY ) * mousedown: function( _mouseX, _mouseY ) * busy: Boolean ==== CONSOLE_CONTROLER ==== 画像・吹き出しの各パネル要素にマウスオーバーすると表示される操作盤（ボタンボックス）の表示とクリックを扱う． * init: function() * show: function( _currentElement, _w, _h ) * hide: function() * x: Number * y: Number * w: Number * h: Number * mousemove: function( _mouseX, _mouseY ) ==== パネルエレメントオペレーター ==== PANEL_ELEMENT_OPERATION_MANAGER によって呼び出される．onDrag, onFinish, onCancel といった共通関数を持つ．IPanelElementOperator (インターフェイス) を実装してる 的なイメージ． ===== TAIL_OPERATOR ===== 尻尾の角度担当． * init: function() * update: function ( _w, _h, _a ) * show: function( _currentText ) * hitTest: function( _mouseX, _mouseY ) * hide: function() * onStart: function( _currentText, _mouseX, _mouseY ) * onDrag: function( _mouseX, _mouseY ) * onFinish: function() * onCancel: function() ===== RESIZE_OPERATOR ===== リサイズ操作担当．画像の場合、MIN_ELEMENT_SIZE 以上をマイナス軸方向にリサイズすると反転する．shift キーを押しながらリサイズすると縦横比維持リサイズ．ライセンスデータを元にしたリサイズ制限は未実装． * init: function() * update: function draw( _x, _y, _w, _h ) * show: function( _currentElement ) * hide: function() * onStart: function( _currentElement, _mouseX, _mouseY ) * onDrag: function( _mouseX, _mouseY ) * onFinish: function() * onCancel: function() * lock: function( _lock ) * onShiftUpdate: function update( _x, _y, _w, _h ) * onCtrlUpdate: function update( _x, _y, _w, _h ) ===== POSITION_OPERATOR ===== 移動担当．グリッドが表示されている場合、10px 刻みで移動．shift キーを押しながら移動すると、縦方向または横方向に平行移動． * onStart: function( _currentElement, _mouseX, _mouseY ) * onDrag: function( _mouseX, _mouseY ) * onFinish: function() * onCancel: function() * onShiftUpdate: function update( _x, _y ) * onCtrlUpdate: function update( _x, _y ) ==== PANEL_ELEMENT_OPERATION_MANAGER ==== 尻尾の角度・リサイズ・移動 というオペレーターの管理クラス． * init: function() * open: function() * close: function() * hide: function() * resize: function resize( _x, _y, _w, _h, _angle ) * restoreState: function( arg ) * saveStatus: function( startX, startY, startW, startH, startA, startFilpV, startFilpH ) * busy: Boolean * hitTest: function( _mouseX, _mouseY, _panelElement ) * mousedown: function( _currentElement, _mouseX, _mouseY ) * mousemove: function( _currentElement, _mouseX, _mouseY ) * mouseup: function( _currentElement, _mouseX, _mouseY ) ==== パネルエレメント ==== ===== AbstractPanelElement ===== * type: 0, 1 * hitTest: function( _mouseX, _mouseY ) * shift: function( _shiftX, _shiftY ) * busy: function() * mousemove: function( _mouseX, _mouseY ) * mouseup: function( _mouseX, _mouseY ) * mousedown: function( _mouseX, _mouseY ) ===== ImageElementClass ===== * $: jQuery * x: Number * y: Number * w: Number * h: Nmber * z: Number * timing: Number * keepSize: Boolean * init: function() * flip: function( _updateH, _updateV ) * flipV: Number * flipH: Number * resourcePicture: function( _resourcePicture ) * getArtistID: function() * actualW: Number * actualH: Number * resize: function( _x, _y, _w, _h, animate ) * animate: function ( _x, _y, _w, _h, _flipH, _flipV ) * destroy: function() ===== TextElementClass ===== * $: jQuery * x: Number * y: Number * w: Number * h: Nmber * z: Number * timing: Number * init: function() * angle: function( _a ) * text: function( _text ) * resize: function( _x, _y, _w, _h, _a, animate ) * animate: function ( _x, _y, _w, _h, _a ) * destroy: function() ==== COMIC_ELEMENT_CONTROL ==== * init: function() * open: function() * close: function() * remove: function removeComicElement( _panelElement ) * restore: function restoreComicElement( arg ), * replace: function replaceComicElement( _panelElement, goForward ), * restoreReplace: function restoreReplaceElement( arg ), * onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction ) * mousemove: function( _mouseX, _mouseY ) * mouseup: function( _mouseX, _mouseY ) * mousedown: function( _mouseX, _mouseY ) * busy: Boolean * createImageElement: function( data ) * onImageSelect: function( data, isPanelPictureData ) * createTextElement: function( data ) function updateMouseCursor( _cursor ) function centering() function mouseEventRellay( e )
Fork
edit