ClientPanelEditor - ぺったんR Wiki - ぺったんR

パネルエディタについて

panel editor

finder

Premium Stage

panel editor

panel editor

panel editor

panel editor

reversible

• ぺったん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
• html 順に拘束されない独自イベント伝播ツリーを使用する．ClientEventTree

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

アプリケーションに 複数 Window を表示するレイヤーを作る．

• 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 を prototype としている．

パネル要素はパネルエレメントコントロールによって、add, remove, replace などされる．

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()

PANEL_ELEMENT_CONTROL

• init: function()
  • container 要素の取得．
• open: function()
• close: function()
• remove: function( _panelElement )
• restore: function( arg ),
• replace: function( _panelElement, goForward ),
• restoreReplace: function( 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 )